﻿.dateformattype{ width: 7em!important;}

.sweet-alert h2 {
    font-size: 20px !important;
    font-weight: lighter;
}

body {
    overflow-x: hidden;
}

/* fancy checkbox */

/*https://codepen.io/sol_b/pen/qrzZjE

*/
.fancycheckbox { margin-bottom: 10px; }

    /* use :not selector here to support older broswers 
   more info: http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/
*/
    .fancycheckbox input[type=checkbox]:not(old) { opacity: 0; /* match the dimentsions of the custom label */ width: 20px; height: 20px; padding: 0; margin: 0; }

    /**
 * The box
 */

    .fancycheckbox label { position: relative; }

        .fancycheckbox label::after { content: ""; position: absolute; top: 0px; left: -50px; /*cover the default input */ width: 40px; height: 30px; border-radius: 3px; background-color: white; border: 1px dotted black; transform: rotate(0); pointer-events: none; text-align: center; color: #000; /* easier to see */ }


    /**
 * The tick
 */


    .fancycheckbox input[type=checkbox]:checked + label:after { content: "\2713"; font-size: 1.2em; font-weight: bold; color: black }

@media( max-width:600px ) {
    .fancycheckbox label::after { top: -5px; }
    .fancycheckbox input[type=checkbox]:checked + label:after { font-size: 1.8em; color: black }

    .fancycheckbox { margin-left: 2em; }
}

/* end fancy checbox*/

/* user photo*/

.photoneeded {
    text-align: center;
    padding: 1em;
    font-weight: bold;
    display: inline-block;
    width: 100%;
    font-size: 1.5em;
}
.bordered {
    border: dashed 4px silver;
}

.userphoto {
    padding-top: 1em;
    width: 100%;
    margin: 0 auto;
}

    .userphoto h2 {
        margin-left: 15px;
        text-transform: capitalize;
        font-weight: 600;
        padding-left: 0;
        margin-left: 0;
        font-size: 2em;
        color: rgb(105, 105, 105);

    }

    .userphoto img {
        display: inline-block;
        margin-top: 1em;
        margin-bottom: 1em;
        width: 50%;
    }

#userphoto {
    cursor: pointer;
    max-width: 100%;
    width: 100%;
    object-fit: contain;
    display: inline-block;
    margin: 0 auto;
}

.userphotos #userphoto {
    max-width: 100%;
    width: 100%;
    height: 20%;
}
.userphoto .fileupload {
    clear: both;
    width: 100%;
    text-align: center;
    color: silver;
    height: 5em;
    line-height: 2.5em;
    font-size: 1.25em;
    margin-top: 1em;
}

.userphoto #idonothaveaphoto {
    width: 100%;
    margin-top: 10px;
}

@media (max-width: 400px) {
    .userphoto .fileupload { line-height: 0.5em; }

    .userphoto .fileupload .btn { padding: 0.25em;}
}

        .userphoto .fileupload p{ font-size: 0.75em;margin-top: 1em;display: inline-block;clear: both; overflow: hidden}

        .userphoto .clearbtn {
            background: black;
            color: white;
        }

    .userphoto .options {
        margin-top: 1em;
        margin-bottom: 1em;
        text-align: center;
    }

        .userphoto .options button{ margin-left: 1em;}

        .userphoto input[type=button] {
            float: left;
            margin-left: 0;
            margin-top: 1em;
            clear: both;
        }

    .userphoto input[type=file] { float: left; margin-left: 0; margin-left: 15px; }
    .userphoto .photocontainer { clear: both; margin-left: 15px; margin-top: 0.5em; width: 50%; }
    .userphoto .photoimage { max-width: 50%; max-height: 30%; margin-top: 0.5em; }

.userphoto .fileupload .btn { }
.userphoto .fileupload .preview{ display: inline-block; clear: both; width: 100%;margin-bottom: .5em;visibility: hidden; color: black;font-weight: lighter}
    .userphoto #photothumbails{ overflow-y: auto;height:120px}
    .userphoto .thumbnailimage{ height: 100%;margin-top: 0;margin-bottom: 0;width: 100%;margin-left: 0;}
    .userphoto .uploaddelete {
        display: block;
        padding: 0.5em;
        margin-bottom: 0.25em;
        clear: both;
    }

.userphotos{ padding: 1em;}
    .userphotos #userphotoscontainer{ padding: 1.5em;padding-top: 0;}
        .userphotos #userphotoscontainer select{ width: 98%;cursor: pointer;}
        .userphotos #userphotoscontainer .list-tag-container{ padding-left: 1em;padding-bottom: 1em;text-align: center;}
    .userphotos .list-item-container img {
        margin: 0.5em;
        margin: 0 auto;
        display: inherit;
        object-fit: fill !important
    }

    .userphotos .photorotate, .userphotos .type {
        display: inline-block;
        width: 100%;
        padding: 0.5em;
        padding-bottom: 0;
        font-weight: bolder;
        text-align: left;
        padding: 1em;
        text-transform: uppercase;
        cursor: text;
    }

        .userphotos .requiredinfo { font-weight: lighter!important; display: inline-block;margin-left: 0.5em;padding:0.25em }

        .userphotos .photorotate, .userphotos .type .typename {
            padding-left: 0.3em;
            font-weight: bolder;
            font-size: 0.8em;
        }
    .userphotos .fileuploaded{ padding-left: 0.25em;}
    .userphotos h3{ text-align: center;font-weight: lighter;}
    @media(min-width:1023px) {
        .userphotos .photorotate, .userphotos .type { height: 10em;}
       }

@media(min-width:1500px) 
{
    .userphotos .photorotate, .userphotos .type { height: 9em;}
}

.userphotos .list-item .list-item-border .list-item-container {
    background-color: white;
}

    .userphotos .uo-grid-wrapper {
        margin-bottom: 0;
    }

.userphotos .uploadoptions {
    clear: both;
    margin-bottom: 0.5em;
    margin-top: 1em;
    text-align: center;
}

    .userphotos .uploadoptions:last-of-type {
        margin-top: 1em;
    }

    .userphotos .uploadoptions .btn {
        margin-left: 0.5em;
    }

    .userphotos .ticks 
    {
        font-weight: lighter;position: absolute;
        bottom: 1px;
    }
.userphotos .ticks input[type=checkbox] {
    display: none;
}

/* fancy checkbox */
.userphotos .ticks input[type="checkbox"]:not(old),
.userphotos .ticks input[type=radio ]:not(old) { width: 2em; margin: 0; padding: 0; font-size: 1em; opacity: 0; }


    .userphotos .ticks input[type=checkbox]:not(old) + label,
    .userphotos .ticks input[type=radio ]:not(old) + label {
        display: inline-block;
        line-height: 1.5em;
        cursor: pointer;

    }

.userphotos .ticks input[type=checkbox]:not(old) + label > span,
.userphotos .ticks input[type=radio ]:not(old) + label > span { cursor: pointer; display: inline-block; width: 1.875em; height: 1.875em; margin: 0.25em 0.5em 0.25em 0.25em; border: 0.0625em solid rgb(192,192,192); border-radius: 0.25em; background: black; vertical-align: middle; }
.userphotos .ticks input[type=checkbox]:not(old):checked + label > span:before {  content: '✓'; display: block; width: 1em; color: white; font-size: 1.875em; line-height: 1em; text-align: center; text-shadow: 0 0 0.0714em rgb(115,153,77); font-weight: bold; }



    .userphotos .list-item .list-item-border .list-item-title {
        text-align: center!important;
    }

.userphotoscontainer .photorotate, .userphotoscontainer .list-item-image, .userphotoscontainer .phototypeselect {
    cursor: pointer;
}

    .phototypeselectcontainer {
        margin-left: 7px;
    }
     
.userphotolargepreview #previewimage {
    width: 100%;
    height: 100%;
    max-width: 100%;
    z-index: 900000;
    object-fit: contain;
}

.userphotolargepreview .previewoptions {
    z-index: 900001;
    position: absolute;
    top: 0;
    right: -7px;
              
}
.userphotos .list-item .list-item-border:hover{border:1px dotted silver!important}
.userphotolargepreview .previewoptions btn {
    background: inherit;
}

.userphotolargepreviewbackground {
    position: fixed;
    display: none;
    z-index: 1000000;
    top: 0;
    left: 0;
    width: 103%;
    height: 100%;
    opacity: 0.5 !important;
    background-color: white;
}

.userphotos .photorotate {
    text-decoration: underline;
    text-transform: capitalize;
    width: 100%;
    text-align: center;
    padding-top: 0;
    padding-bottom: 1em;
}

.userphotolargepreview {
    position: fixed;
    width: 100px;
    height: 100px;
    display: none;
    z-index: 2000000;
    top: 0%;
    left: 0%;
    width: 80%;
    height: 70%;
    margin: 10%;
    /*-webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);*/
    background-color: white;
    border: 1px solid black;
}

    .userphotolargepreview #closepreview {
        cursor: pointer;
        margin: 0;
        background-color: white!important;
    }

    @media( min-width:800px ) {
        .userphoto {
            width: 50%;
        }
    }

    @media( min-width:1200px ) {
        .userphoto {
            width: 40%;
        }
    }

    @media( min-width:1500px ) {
        .userphoto {
            width: 32%;
        }
    }

    .policy { padding: 9em; padding-top: 20px; text-align: justify; }

.policies a { width: 18%; display: inline-block; text-align: center; color: white; padding: 1em; }

.requiredhighlight { border: 1px solid red !important; }

.register { margin-top: 2%; margin-bottom: 20px; }

    .register #register { float: none !important; }

.unavailable { text-transform: capitalize; color: #1c9300; padding-bottom: .5em; }

.btn, .btn-default, .submit { background-color: #777; color: white; font-weight: lighter; }

.register .role label { margin-top: 0.5em; }

.payment_name label, .payment_name input { font-size: 1em; margin-bottom: 0.75em; }
.payment_name #resetmypassword { text-align: center; display: block; margin: 0 auto; cursor: pointer; margin-bottom: 0.5em; }

input[type=text]::-webkit-input-placeholder,
input[type=text]::-moz-placeholder,
input[type=text]:-ms-input-placeholder,
input[type=text]:-moz-placeholder { font-size: 1em; }

.error { text-transform: capitalize; color: #ff0000; display: inline-block; clear: both; }

#invalidcredentials { text-align: center; text-transform: capitalize; font-weight: bolder; font-size: 1em; }

.footer_bar p { float: none; text-align: center; }

.questions li { cursor: text !important; }

.questions label, .questions input[type=radio] { cursor: pointer !important; }



.wpProQuiz_reviewQuestion li { cursor: pointer !important; }

.questions .wpProQuiz_reviewQuestion { clear: both; padding-top: 10px !important; }

.questionaires .wpProQuiz_content .wpProQuiz_questionListItem input[type=text]{ width: 100%; padding: 0.2em;}

dd.course_progress div.course_progress_blue {
    margin: 0;
}

@media (min-width:1000px ) {
    .userlogin { margin-left: 2em; }

        .userlogin .log_bar, .userlogin #login { margin-left: 2em; }
}

.ajaxoverlay { position: fixed; display: none; z-index: 1000000; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5 !important; background-color: white; }

.ajaxoverlayimg { position: fixed; width: 100px; height: 100px; display: none; z-index: 2000000; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }


video
.videotoolbar { }

#defaultBar { position: relative; float: right; width: 85%; height: 34px; border: 1px solid black; }
#progressBar { position: absolute; width: 0px; height: 100%; background: white; }

#playButton { background-color: #1c9300; color: white; width: 15%; text-align: center; float: left; }
.videoslider { margin-top:0.3em; }


.logo img { max-width: 200px; }

    .logo { margin-left: auto; margin-right: auto; display: block; width: 200px; }

@media( min-width:1024px) {
    .logo {
        margin-left: 25%;
    }

}
/* disclaimers */
.disclaimers { }

    .disclaimers .scrollsidebar {
        position: fixed;
        height: 100%;
        left: 0;
        z-index: 100;
        max-width: 10%;
        top: 0;
        background-color: rgb(125,129,132)
    }

        .disclaimers .scrollsidebar .pagingicons {
            height: 50%;
            top: 25%;
            background-color: rgb(125,129,132);
            position: absolute;
        }

            .disclaimers .scrollsidebar .pagingicons .down,
                .disclaimers .scrollsidebar .pagingicons td { text-align: center;}


                .disclaimers .scrollsidebar .pagingicons .down, .disclaimers .scrollsidebar .pagingicons .up { cursor: pointer;padding-top: 5px;padding-bottom: 5px;max-width: 100%;}

                /*https://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle*/
                .disclaimers h1 {
                    margin-top: 60px;
                    display: flex;
                    background: #fff;
                } /* linear-gradient(to left,gray,lightgray,white,yellow,turquoise);; }*/
    .disclaimers h1:before, .disclaimers h1:after { color: #03ddeb; content: ''; flex: 1; border-bottom: solid 2px; margin: auto 0.25em; /* ou 0 1px si border-style:ridge */ }

    .disclaimers h4 { text-align:center; color:rgba(153,151,153,1);}
    .disclaimers h3 { color:#666; text-align:center; margin-top:2em;}
    .disclaimers h3:last-of-type { text-align:center; display:block;margin: 0 auto;  }

    .disclaimers .back, .questionairesection .back { font-weight: bolder; color: #049bc9; font-size: 1.25em; cursor:pointer; }
    .disclaimers .numbercharsheader { font-size: 1.25em; text-align: center; margin-bottom:1em; margin-top:2em; }

    .disclaimers .numberchars {  }
        .disclaimers .numberchars{   }



    .disclaimers #verificationcodeentry { }
    .disclaimers .numberchars .numbercontainer { width:100%;}

    .disclaimers .numberchars input[type=text] { font-weight: lighter; font-size: 1.5em; background-image: linear-gradient(rgba(240,240,240,1), rgba(255,255,255,0)); width: 1.5em; text-align: center; vertical-align: middle; color: rgba(153,151,153,1); border-radius: 0.25em; box-sizing: border-box; border: 1px solid #666; margin: 0.5%; }
        .disclaimers .numberchars input[type=text]:focus { outline: none; }

    .disclaimers .numberchars:last-of-type {  /*margin-left:43%;*/}
        .disclaimers .numberchars:last-of-type input[type=text] { width: 7%; }

    .disclaimers .verification { clear: both; margin-top: 6em; text-align: center; }
    .disclaimers .verification:last-of-type { margin-top: 1em;  }

        .disclaimers .verification input[type=button] { font-size: 0.7em; margin: 0 auto; padding: 1em !important; float: none; display: inline-block; background-color: #049bc9 !important; color: White !important; border: none !important; border-radius: 0.5em !important; padding:2em!important }

        .disclaimers .devicenotify { font-style: italic; color: rgba(219,215,219,1); padding-top: 2em; font-size: 1em; display:inline-block;clear:both; text-align:center; width:100%; margin-bottom:2em; }
            .disclaimers .devicenotify span { color: #049bc9;}

    .disclaimers .clickconfirm { }

    .disclaimers #pdfdociframe { width: 100%; height: 500px; margin-left: -10000px; border: 1px dotted silver; margin-top: 0.5em; margin-bottom: 0.5em; }
        .disclaimers .back { cursor: pointer; }

    /* https://benmarshall.me/responsive-iframes/ */
    /*.disclaimers .iframe-container { overflow: auto; height:500px; padding-top: 56.25%; position: relative; width:90%; margin:0 auto; border:1px silver black; }
        .disclaimers .iframe-container iframe { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }*/
    /* 4x3 Aspect Ratio */
    /*.disclaimers .iframe-container-4x3 { padding-top: 75%; }*/
    .disclaimers .hiddencontent { display: none; }
    .disclaimers #sendverificationcode { margin-top: 2em; }

    .disclaimers #newcode { cursor: pointer; }

    .disclaimers .voice { cursor:pointer; padding-bottom:0.25em; width:100%; padding:1em; background-color: rgb(75,75,75); color:white; font-weight:lighter; font-size:2em; margin-top:-1em; margin-bottom:1em; }
       .playvoicebutton { font-size: 1em!important; }

        .playvoicebutton { float: right; border: 0; background: transparent; box-sizing: border-box; width: 0; height: 1em; border-color: transparent transparent transparent #fff; transition: 100ms all ease; cursor: pointer; border-style: solid; border-width: 37px 0 37px 60px; }
             .paused { border-style: double; border-width: 0px 0 0px 60px; height:2.5em;}
             .playvoicebutton:hover { border-color: transparent transparent transparent #eee; }

.disclaimers .verificationchoice {
    width: 100%;
    padding: 2em;
    text-align: center;
}
    .disclaimers .verificationchoice h3{ padding-bottom: 1em;}

    .disclaimers .verificationchoice .choice {
        width: 100%;
    }
    .disclaimers .verificationchoice .choice td {
        text-align: center;
        padding: 1em;
    }
    .disclaimers .verificationchoice .btn{ float: unset;padding: 2em!important;}


    .disclaimers .verificationchoice .signature {
        width: 60%;
        font-size: 1.2em;
    }

        .disclaimers .verificationchoice .signature input[type=text] {
            padding: 0.5em;
            width: 60%;
            text-align: center;
            border-radius: 10px;
            border: 1px solid silver;
        }

        .disclaimers .verificationchoice .signature .btn {
            float: right;
        }

        .disclaimers .verificationchoice .signature .instruction {
            text-align: left;
        }


    .disclaimers .verificationchoice #signatureparent {
        border: 1px solid silver !important;
        border-radius: 10px;
        padding-bottom: 1em;
        
    }

    .disclaimers .verificationchoice .circle {
        border: 1px solid green;
        background-color: green!important;
        height: 30px;
        line-height: 30px;
        -moz-border-radius: 75px;
        -webkit-border-radius: 75px;
        width: 30px;
        color: white;
        display: inline-block;
    }

#mobileplatform_mobilenumber, #mobileplatform_verificationcode {
    padding: 0.5em;
    width: 60%;
    text-align: center;
    font-size: 2em;
    letter-spacing: 0.25em;
}

#mobileplatform_verificationcode {
    padding: 0.25em;
    width: 80%;
    text-align: center;
    font-size: 1.5em;
    letter-spacing: 0.25em;
}

.jSignature {
    margin-bottom: 2em !important;
}

.disclaimers .verificationchoice .signature .small {
    font-size: 0.6em;
    display: inline-block;
    clear: both;
    width: 100%;
}

        #seekbar::-webkit-progress-bar {
            background-color: white;
            border: none;
            border-radius: 0.5em;
        }
#seekbar::-webkit-progress-value { background-color: rgb(33,150,243) !important; }

#seekbar { background-color: white; }
    /*#seekbar::-webkit-progress-bar { background-color: rgb(33,150,243) !important; }*/
    #seekbar::-webkit-progress-value { background-color: rgb(33,150,243) !important; }
    /*#seekbar::-moz-progress-bar { background-color: rgb(33,150,243) !important; }*/

.fcc .bar_banner
{
    margin-top:1em;
    height:40em;
}


.fcc .matter_bar
{
    padding-top:13em;
    text-align:center;
    color:white;
}

@media( max-width:800px ) { .disclaimers .numberchars { margin: 0; width: 100%; }
        .disclaimers .numberchars input[type=text]{ font-size: 1.2em; width: 1.25em; }

        .disclaimers #verificationcodeentry { margin: 0; width: 100%; }
    }

    @media (max-width:1024px) { #content { padding: 0 !important; }

    .lessonscontainer .headerimage { height: auto; }
    .lessonscontainer .titlecontent { padding: 1em; }
        .lessonscontainer .titlecontent h1 { font-size: 1.25em; }
        .lessonscontainer .titlecontent h2 { font-size: 1em; }
    .lessonscontainer .titlearea, .lessonscontainer .lessonname { display: inline-block !important; }
    .lessonscontainer .lessons_list { padding: 0; }
    .lessons_list .lesson { height: auto; display: inline-block !important; padding: 0 !important; background: rgb(239, 237, 239); }
        .lessons_list .lesson img { height: auto; }
}


@media (min-width: 1023px) {
    .container {
        width: 100%;
        padding: 0;
    }
    /* remove padding if you want to revert */
    .bar_banner {
        background-size: cover !important;
    }

    .fcc .userlogin {
        padding-top: 12em;
        padding-bottom: 12em;
    }

    .featured-image {
        min-height: 227px;
    }

    .loginregbackground {
    }

    .loginregistercontainer .loginorregister, .loginregistercontainer .public_register {
        height: 100%;
        border-left: 1px dotted silver;
    }

    .loginregistercontainer .public_register {
        padding: 2em;
        padding-top: 0;
        padding-right: 0;
    }

    .loginregistercontainer .loginorregister {
        -webkit-appearance: none;
        box-shadow: 10px 1px 5px 0px rgba(219,215,219,1);
    }

    .loginregistercontainer .loginoption {
        position: absolute;
        bottom: 1em;
        text-align: center;
        width: 100%;
    }

    .public_register .payment_name {
        padding-left: 0;
        padding-right: 2em;
    }

        .public_register .payment_name select {
            margin-bottom: 1em;
        }

    .public_register .title_payment {
        text-align: center;
    }

    .public_register .confirm .gavel {
        float: left;
        width: 15%;
    }

    .public_register .gavel img {
        width: 80%;
    }

    .public_register .confirm .info {
        float: right;
        color: black;
        text-align: justify;
    }

        .public_register .confirm .info label {
            font-weight: lighter;
            width: 98%;
        }

    .public_register .confirminfo .fancycheckbox {
        padding-left: 1.3em;
    }
}

    @media ( max-width:600px ) {
        .public_register .confirminfo .fancycheckbox { padding-left: 3.5em; }
    }

    .public_login .logo { text-align: center; padding: 1em; }
    .public_login .banner img { height: 10em; width: 100%; }
    .public_login .log_bar { margin-left: 0; padding: 3em; }
    .loginorregister .btn_payments { border: none; }

    .loginorregister .fome_bar input { width: 100%; }

    .public_register .title_payment h2 { font-weight: bolder; font-size: 2em; margin-top: 1em; }

    .public_register .info label { color: black !important; font-weight: lighter; text-align: justify; width: 96%; font-size: 80%; }

    .error:last-of-type { display: block; }

    .exclamationcourse img { max-width: 25%; margin-left: 39%; margin-top: -120px }

    /*https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container*/
    .superuseralert_ajaxoverlay { position: fixed; z-index: 1000000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); }
        .superuseralert_ajaxoverlay #superuseralert_content { top:25%; -webkit-box-shadow: 0px 0px 5px 5px rgba(232,232,232,1); -moz-box-shadow: 0px 0px 5px 5px rgba(232,232,232,1); box-shadow: 0px 0px 5px 5px rgba(232,232,232,1); background-color: white; width: 70%; margin-left: 15%; position: relative; background-image: url('/Images/gavelgrey.png'); background-repeat: no-repeat; background-size: 39%; background-position-x: -0.8vw; background-position-y: 0vw; }
            .superuseralert_ajaxoverlay #superuseralert_content .closepopup { color: black; position: absolute; top: 0.5vw; right: -1.5vw; font-size: 3vw; text-align: center; cursor: pointer; }
                .superuseralert_ajaxoverlay #superuseralert_content .closepopup span { padding: 1em; }

            .superuseralert_ajaxoverlay #superuseralert_content .header_container { position: relative; width: 20%; margin: 0 auto; }
            .superuseralert_ajaxoverlay #superuseralert_content .header { font-size: 4vw; font-weight: bolder; text-transform: uppercase; }
            .superuseralert_ajaxoverlay #superuseralert_content .borderCircle { position: absolute; border-radius: 50%; width: 2.6vw; height: 2.6vw; background: #fff; border: 4px solid #666; color: #666; text-align: center; font-size: 1.5vw; box-sizing: border-box; display: inline-block; font-weight: bolder; }
                .superuseralert_ajaxoverlay #superuseralert_content .borderCircle:first-of-type { margin-left: -2em; margin-top: 0.95em; }
                .superuseralert_ajaxoverlay #superuseralert_content .borderCircle:last-of-type { margin-left: 0.25em; margin-top: 0.95em; }

            .superuseralert_ajaxoverlay #superuseralert_content .tips { color: black; position: absolute; bottom: 1em; font-size: 1vw; text-align: center; text-align: center; width: 100%; }
                .superuseralert_ajaxoverlay #superuseralert_content .tips span { font-weight: bolder; padding-right: 1em; }

    #superuseralert_content .alert_content { color: black; font-size: 1.4vw; text-align: center; width: 90%; padding: 2vw; margin: 0 auto; }
    #superuseralert_content .options { display: block; padding: 0.5em; font-size: 1.4vw; padding-left: 2em; padding-right: 2em; border-radius: 5px; width: 20%; margin: 0 auto; margin-top: 2.5vw; margin-bottom: 3.5vw; cursor: pointer; }

    /* same message is used on homepage so we put modifications here*/
    .coursenotification { display: block; }
    .coursemsgoptions { margin: 0 auto; width: 100%; }
        .coursemsgoptions .options { width: 30% !important; padding: 0.25em !important; margin-right: 2.5% !important; display: inline-block !important; float: left; margin-bottom: 0 !important; }
            .coursemsgoptions .options:first-of-type { margin-left: 19% !important; }

    /* requested by Abigail 13/11/18 */
    .LindumGroup .matter_bar h1:last-of-type { display: none; }


.onboarding .matter_bar {
    display: none !important;
}


    @media ( max-width:1025px ) {
        .loginregistercontainer { height: auto; width: 90%; margin-left: 5%; }
            .loginregistercontainer .loginoption { position: inherit; }

            .loginregistercontainer .banner { display: none; }

        .public_register, .loginorregister { font-size: 1em; }
            .public_register input,
            .public_register select,
            .public_login input,
            .public_login select { font-size: 1.25em !important; padding: 0.5em !important; height: 2.5em; margin-bottom: 1em; }

                .public_register input[type=checkbox] { height: 0.5em; }

        .loginregistercontainer { width: 100%; margin: 0; padding-top: 5em; margin-top: -4em; }
        .loginorregistermobile { background-color: white; border-radius: 1em; width: 90%; margin-left: 5%; margin-top: 5em; position: relative; z-index: 0; -webkit-appearance: none; box-shadow: 10px 10px 5px 0px rgba(219,215,219,1); }
            .loginorregistermobile .banner { display: none; }
            .loginorregistermobile .public_login { z-index: 100; }

        .logo img { display: inline-block; z-index: 9000; }
        .loginoption { text-align: center; padding-bottom: 1em; }

        .public_register .gavel img { height: 3em; }
        .logo2_bar { display: none; }
    }
}

@media ( max-width: 769px ) {
    .policy { padding: 2em; }
    #gdpr_alert .gdpr_content { font-size: 1.4em; }
    .payment_name label, .payment_name input { }

    .public_register input,
    .public_register select,
    .public_login input,
    .public_login select { background-color: rgba(222,222,222,1); }
}

@media ( min-width:769px) and ( max-width:1024px ) {
    .lessons_list .lesson { height: 15em; margin: 0.5em; margin-left: 1%; width: 23%; }
    .policy { padding: 3em; }
}

@media (max-height: 700px) {

    .public_register, .loginorregister { font-size: 1.4em; }
        .public_register input,
        .public_register select,
        .public_login input,
        .public_login select { height: 2em; margin-bottom: 0.3em; border: none; }
}

@media (min-width: 1024px) and ( max-height:1000px ) {
    .public_register input, .public_register select, .public_login input, .public_login select { font-size: 1em !important; }
    .public_register .info label { font-size: 70% }
}
