/*@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {


    .form-outline-enrolment div form {
        grid-template-columns: 1fr !important;
    }

    body{
        background-color:red !important;
    }

    button {
        background-color: red !important;
    }

    .payment-steps{

        background-color:hotpink;
    }
}*/


/*@media screen and (max-width:500px) {
    body {
        background-color: red !important;
    }

    button {
        background-color: red !important;
    }
}


@media screen and (max-device-width:500px) {
    body {
        background-color: yellow !important;
    }

    button {
        background-color: yellow !important;
    }
}*/

@media only screen and (max-width: 812px) {

   button{
       width:87vw;
   }

    body{
        height:auto !important;
    }
    #dob-label {
        opacity: .7 !important;
        top: 12px !important;
        z-index: 1;
        color: #888;
        font-size:13px;
    }

    #studentDOB:placeholder-shown {
        color: white;
    }

    form{
        min-width:200px;
    }

    .floating-label-select{

        grid-column:1/3;
    }
    .floating-label {
        grid-column: 1/3;
    }

    .right-enrolment-form, .form-outline-enrolment div form {
        width: 99vw;
        padding-left: 0px;
    }

    .payment-steps {
        padding: 19px 0px;
  
        width: 20vw;
        font-size:14px;
    }

    .select2-container, .select2-wrapper .select2-container--default .select2-selection--single{

        width:96vw !important;
    }
    #courseInformation {
        background-color: white !important;
    }

    .select2-container--default .select2-selection--single{
        width:96vw;
    }

    select, .form-outline-enrolment div form input {
        width: 96vw;
    }

    #courseInformation select {
        width: 96vw;
    }
    .existing-student-button{
        margin-left:10px;
        width:34vw;
        font-size:12px;
    }

    .multi-select2 .select2-container--default.select2-container .select2-selection--multiple {
        width: 96vw !important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__rendered{
        width:96vw !important;
    }

    #dropzone-formgeneralUpload{
        width:88vw;
    }


    #courseInformation {
        margin-left: -8px !important;
    }

    .container {
       
        padding-top: 84px;
        margin-bottom: 31px;
        width: 80vw;
    }

    #sign-in-button {
        width:70vw;
    }

}