/*::-ms-reveal {
    border: 1px solid transparent;
    background-color: yellow;
    border-radius: 50%;
    box-shadow: 0 0 3px red;
}*/

/* style for home page buttons to access grade test*/
.auth_grade_access3 {
    background-color:floralwhite;
    border-radius: 5px;
    margin:5px 35px 20px 0; 
    max-width:fit-content;
    min-width:15%;
    padding:4px; 
    white-space: normal;
    width: fit-content;
}

.auth_grade_access4 {
    background-color:floralwhite;
    border-radius: 5px;
    margin:5px 35px 20px 35px; 
    max-width:fit-content;
    min-width:15%;
    padding:4px; 
    white-space: normal;
    width: fit-content;
}

.auth_grade_access5 {
    background-color:floralwhite;
    border-radius: 5px;
    margin:5px 0px 20px 35px; 
    max-width:fit-content;
    min-width:15%;
    padding:4px; 
    white-space: normal;
    width: fit-content;
}

/* icon button to close any window*/
.dismiss_btn {
    background: none;
    border: none;
    color: inherit;
    height: 20px;
/*    margin: 0px;*/
    margin: -12px -12px 0 25px;
    padding: 3px 0 0 0;
    width: 20px;
}
    .dismiss_btn:hover {
        background-color: white;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
        color: red;
        padding: 3px 0 0 0;
    }

.login_dismiss_btn {
    /*margin-top: -10px;*/
}

.contact_us_dismiss_btn {
    margin-right: 10px;
}

.classroom_dismiss_btn {
    /*margin-bottom: 40px;*/
}

/*External login button styles*/
.external_login_comb {
    align-items: center;
    background-color: whitesmoke;
    border-color: lightblue;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    padding: 2px;
}

    .external_login_comb:hover {
        background-color: whitesmoke;
        box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,0.3);
    }

/*<i class="fab fa-google fa-1x "></i>*/
    /*.fa-google {
    background: linear-gradient(to bottom left,transparent 49%,#fbbc05 50%) 0 25%/48% 40%, linear-gradient(to top left,transparent 49%,#fbbc05 50%) 0 75%/48% 40%, linear-gradient(-40deg,transparent 53%,#ea4335 54%), linear-gradient( 45deg,transparent 46%,#4285f4 48%), #34a853;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}*/

    .yourclassroombtn {
    background-color: lightblue !important;
    color: black !important;
}

.glowing_text {
    background-color: lightblue;
    border: none;
    border-color: lightblue;
    border-radius: 5px;
    box-shadow: 0 0 18px 15px lightblue;
    color: mediumblue;
    font-size: 90%;
    font-weight: bold;
    margin-bottom: -15px;
    margin-left: -8px;
    margin-top: -5px;
    padding: 0px 1px 0px 1px;
    text-align: left;
    width: fit-content;
}

/*Question table icon modes*/
.qnanswered::before {
    color: violet;
}

.qnnotanswered::before {
}

.qnchoicecorrect::before {
    color: forestgreen;
    font-weight: bold;
    /*    color: limegreen;*/
    /*    background: radial-gradient(limegreen 60%, transparent 40%);*/
}

.qnchoicewrong::before {
    color: red;
    font-weight: bold;
    /*    background: radial-gradient(red 60%, transparent 40%);*/
}

/*internal spacing of all buttons*/
.eogbtnstyle {
    padding: 3px 5px;
    vertical-align: middle;
}

.eogbtnlabel {
    vertical-align: middle;
}

.actiononrowbtn {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}

.pdfgenerationctrl {
    display: flex;
    justify-content: space-around;
}

.pdfgenerationbtn {
    display: block;
}

.sliders_icon {
    color: black;
    vertical-align: middle;
}

    .sliders_icon:hover {
        cursor: pointer;
        color: dimgray
    }

.pdfconfigmenu {
    height: fit-content;
    padding: 2px 0px 2px 2px;
    width: fit-content;
}

    .pdfconfigmenu input[type="radio"] {
        margin-top: -1px;
        margin-bottom: 1px;
        vertical-align: middle;
    }

/* style all radio buttons*/
.configradiobtn {
    height: 11px;
    width: 11px;
}

.configradiolabel {
    margin-left: 2px;
}

/*modal popup styling*/
.moddialog {
    color: black !important;
    width: fit-content !important;
}

.modclose {
    margin: 0;
    margin-left: auto;
}

.modheader {
    display: flex;
    flex-direction: column;
    background: gainsboro !important;
    padding: 3px 2px 0 2px !important;
}

.modtitle {
    color: black;
/*    margin-left: auto !important;*/
}

.modtitledata {
    color: steelblue;
}

.modclosebtn {
    margin-left: 20px !important;
    margin-right: 4px !important;
}

.modbody {
    padding: 4px 0 0 4px !important;
    margin-right: 4px !important;
}

modbodycontent {
    color: black !important;
}

.modfooter {
    padding: 0 2px 0 2px !important;
}

.modconfirmbtn {
    background-color: steelblue !important;
    margin-right: 15px !important;
}

#eoglogo {
    background: #fff url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M288 112C288 129.7 273.7 144 256 144C238.3 144 224 129.7 224 112C224 94.33 238.3 80 256 80C273.7 80 288 94.33 288 112zM200 352C200 321.6 224.2 296.9 254.4 296L322 142.3C327.4 130.2 341.5 124.7 353.7 130C365.8 135.4 371.3 149.5 365.1 161.7L298.3 315.4C306.9 325.2 312 337.1 312 352C312 382.9 286.9 408 256 408C225.1 408 200 382.9 200 352V352zM192 160C192 177.7 177.7 192 160 192C142.3 192 128 177.7 128 160C128 142.3 142.3 128 160 128C177.7 128 192 142.3 192 160zM80 256C80 238.3 94.33 224 112 224C129.7 224 144 238.3 144 256C144 273.7 129.7 288 112 288C94.33 288 80 273.7 80 256zM432 256C432 273.7 417.7 288 400 288C382.3 288 368 273.7 368 256C368 238.3 382.3 224 400 224C417.7 224 432 238.3 432 256zM0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464z"/></svg>') 20px no-repeat;
    background-size: 36px 100px;
    transform: scale(1);
}

.eogbrand {
    padding: 0px !important;
}

.custom-tooltip.tooltip > .tooltip-inner {
    color: #dc3545;
    /* text-align: left;
            max-width: 500px;*/
}

/*site top menu styling*/
.eognavbar_toggler {
    border-color: gainsboro !important;
    transform: scale(0.8);
}

.eognavbar_toggler_icon {
    color: black !important;
    transform: scale(1.2);
}

.site_menu_nav_bar {
    background-color: antiquewhite !important;
    /*background-color: blanchedalmond !important;*/
    height: fit-content !important;
    padding: 0px !important;
}

.site_menu_top_item {
    color: black;
    padding-bottom: 1px !important;
}

    .site_menu_top_item span.eogurl {
        text-decoration: underline;
    }

    .site_menu_top_item:hover {
        /*border-bottom: 1px solid gainsboro;*/
        padding-bottom: 0px !important;
    }

.site_menu_icon::before {
    font-size: 18px;
}

.site_menu_top_item_label {
    color: inherit;
}

.site_menu_dropdown_btn {
    align-content: center;
    display: flex;
    justify-content: center;
}

/*attempt settings menu*/
.attpsetting_dropdown_content {
    /* max-height: 200px;
            overflow: auto;
            overflow-x: hidden;
            touch-action: pan-y;*/
    /**/
    background: gainsboro;
    margin-bottom: 0px;
    min-width: 50px;
    padding: 0px 2px 0px 2px;
    width: max-content;
}


/*exit attempt menu*/
.exitattp_dropdown_content {
    /* max-height: 200px;
            overflow: auto;
            overflow-x: hidden;
            touch-action: pan-y;*/
    /**/
    background: gainsboro;
    margin-bottom: 0px;
    min-width: 50px;
    padding-bottom: 0px;
    padding-top: 0px;
    padding: 0px 2px 0px 2px;
    width: max-content;
}



/*your exams menu*/
.yexams_dropdown_content {
    /* max-height: 200px;
            overflow: auto;
            overflow-x: hidden;
            touch-action: pan-y;*/
    /**/
    /*width: max-content;*/
    background: gainsboro;
    margin-bottom: 0px;
    min-width: 100px;
    padding-bottom: 0px;
    padding-top: 0px;
    width: 123px;
}

.yexams_menu_list {
    max-height: 200px;
    overflow: auto;
    overflow-x: hidden;
    padding-bottom: 5px;
    padding-top: 5px;
    touch-action: pan-y;
    width: 123px;
}

.yexams_menu_list_item {
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    margin: 2px 0 2px 0;
}

.grades_coming_soon {
    color: deeppink;
    font-family: inherit;
    font-size: 14px;
    margin-top: 0px;
}



/*your classroom menu*/
.yclassroom_dropdown_content {
    /* max-height: 200px;
            overflow: auto;
            overflow-x: hidden;
            touch-action: pan-y;*/
    /**/
    /*width: max-content;*/
    background: gainsboro;
    margin-bottom: 0px;
    min-width: 100px;
    padding-bottom: 0px;
    padding-top: 0px;
    width: 161px;
}

.yclassroom_menu_list {
    max-height: 200px;
    overflow: auto;
    overflow-x: hidden;
    padding-bottom: 5px;
    padding-top: 5px;
    touch-action: pan-y;
    width: 161px;
}

.yclassroom_menu_list_item {
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}



/*Pricing*/
.ppheaderborders {
    margin-bottom:20px; 
    padding-top: 5px;
}

.ppheadertext {
    padding-bottom:4px; 
    padding-top:4px; 
}

.pricing_page_title {
    background-color: darkslategray;
    color: white;
    font-weight: normal;
    height: 35px;
    line-height: 30px;
    text-align: center;
    vertical-align: middle;
    display: flex;
    justify-content:center;
/*    width: 100%;*/
    margin: 20px 9px 30px 9px;
    padding: 3px 0 0 0;
}

.pricing_block {
    font-family: sans-serif;
    border-radius: 5px;
    min-width: 32%;
}
.pricing_blocks {
   display: flex; flex-direction: row; justify-content: space-around;
}
@media only screen and (max-width: 640px) { 
  .pricing_blocks {
    flex-direction: column;
    width: 95vw !important;
  }
}

.pricing_more_info_icon {
    color:blue; 
    font-size: 11px !important;
    text-decoration: none; 
}

.pricing_more_info_text {
    background-color:lightcyan !important; 
    text-align: left !important;
}

.pricing_offering {
    background-color: lightblue;
    border: none;
    border-color: lightblue;
    border-radius: 5px;
    box-shadow: 0 0 18px 15px lightblue;
    color: mediumblue;
    font-size: 90%;
    font-weight: bold;
    margin-bottom: -15px;
    margin-left: -8px;
    margin-top: -5px;
    padding: 0px 1px 0px 1px;
    text-align: left;
    width: fit-content;
}

    .pricing_offering::before {
        content: attr(offer);
        display: flex;
        justify-content: flex-start;
    }

.pricing_current {
    border: none;
    border-radius: 5px;
    color: mediumblue;
    font-size: 75%;
    font-weight: bold;
    margin-bottom: -14px;
    margin-left: -8px;
    margin-top: -4px;
    padding: 0px 1px 0px 1px;
    text-align: left;
    width: fit-content;
}

    .pricing_current::before {
        content: attr(offer);
        display: flex;
        justify-content: flex-start;
    }

.pricing_current_glow {
    color: black !important;
    background-color: darkgray !important;
    /*box-shadow: 0 0 18px 10px lightgoldenrodyellow;*/
}

.pricing_includes {
    font-size: 90%;
    margin-bottom: -8px;
    margin-top: 10px;
    opacity: 0.6;
    text-align: left;
}

.pricing_cancel_renewal {
    border: none;
    color: red !important;
    font-family: inherit;
    font-size: 12px;
    margin-right: 0px;
    margin-top: -6px !important;
/*    margin-bottom: 15px;*/
    text-align: right;
    padding: 0 1px 0px 1px;
    z-index:10000;
}

.double_line_desc {
    align-content: center;
    display: flex;
    justify-content: center;
    margin-bottom: 11px;
    margin-top: 10px;
}

.pricing_block ul {
    background-color: ghostwhite;
    border-radius: 6px;
}

.pricing_block > ul > li {
    border-color: darkgray;
}

    .pricing_block > ul > li:first-child {
        border-radius: 5px 5px 0px 0px;
    }

    .pricing_block > ul > li.disabled_option_style {
        border-bottom: 1px solid lightgray;
    }

    .pricing_block .checkmark {
        color: green;
    }

    .pricing_block .plan_feature_in, .plan_feature_out {
        padding-left: 15px !important;
        text-align: left;
    }

    .pricing_block .plan_feature_in::before {
        content: "\2713";
        color: green;
        font-weight: bold;
    }

.pricing_per_year {
    display: inline-block;
    font-size: 90%;
    line-height: 15px;
    opacity: 0.6;
}

.pricing_block .pricing_subscribe {
    background-color: gold;
    border: 3px solid gold;
    border-radius: 5px;
    color: black;
    font-family: inherit;
    font-size: 20px;
    font-weight: bold;
    width: 90%;
    display: inline-block;
    padding: 0 10px 0 10px;
    text-decoration: none;
}

.pricing_block .pricing_subscribe:hover {
    border: 3px solid darkorange;
    box-shadow: 0 0 18px 0 orange;
    /*box-shadow: inset 0px 0px 2px 0px darkorange, inset -1px -1px 7px 1px darkorange;*/
}

.pricing_classroom_desc {
    display: inline-block;
    font-size: 90%;
    line-height: 15px;
    margin-bottom: -6px;
    margin-top: 2px;
}

.pricing_block button.pricing_contact_us {
    background-color: slategray;
    border: 3px solid slategray;
    border-radius: 5px;
    color: white;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 1px;
    margin-top: 1px;
    width: 90%;
}

.pricing_block .pricing_contact_us:hover {
    border: 3px solid darkslategray;
    box-shadow: 0 0 18px 0 lightslategray;
    /*box-shadow: inset 0px 0px 2px 0px darkorange, inset -1px -1px 7px 1px darkorange;*/
}

.pricing_block .current_plan_btn {
    background-color: transparent;
    border: none;
    display: block;
    font-weight: bold;
    padding-bottom: 3px;
    padding-top: 3px;
    pointer-events: none;
    width: 90%;
}

.pricing_block .current_plan_label {
    color:forestgreen;
/*    color: mediumseagreen;*/
    font-size: 135%;
    padding-bottom: 0px;
    padding-top: 0px;
}

.large_ok_icon {
    color: forestgreen;
    font-size: 350% !important;
}

.large_notok_icon {
    color: red;
    font-size: 350% !important;
}


/*contact us form*/
.contact_us_block {
    padding: 20px 10px 20px 20px;
}

    .contact_us_block div.vrdivider {
        border-left: 1px solid black;
        margin-right: 5px;
        min-height: 205px;
        padding: 0;
        width: 0%;
    }

 
    .contact_us_block div.contact_us_inputcluster {
        padding-left: 10px;
        width: 45%;
    }

    .contact_us_inputfield {
    width: 94%!important;
}

    ._contact_us_block input[type=text], input[type=email] {
        border: 1px solid lightslategray;
        border-radius: 5px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
        box-sizing: border-box;
        font-family: inherit;
        font-size: 14px;
        height: 42px;
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        outline: 5px solid #eff4f7;
        padding: 0 20px 0 5px;
        width: 94%;
    }

    ._contact_us_block input:active, .contact_us_block input:focus {
        border: 2px solid darkslategray;
        color: black;
    }

    ._contact_us_block input::placeholder {
        color: darkgray;
        font-size: 14px;
        font-family: inherit;
    }

    .contact_us_block div.contact_us_inputtextarea {
        margin-left: 0px;
        margin-top: 1px;
        padding-left: 10px;
        width: 54%;
    }

    .contact_us_block #comment_input {
        border: 1px solid lightslategray;
        border-radius: 5px;
        border-radius: 5px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
        box-sizing: border-box;
        font-family: inherit;
        font-size: 14px;
        margin-bottom: 4px;
        margin-top: 9px;
        min-height: 194px;
        outline: 5px solid #eff4f7;
        overflow: auto;
        padding: 0 4px 0 5px;
        width: 94%;
    }

        .contact_us_block #comment_input::placeholder {
            color: darkgray;
            font-size: 14px;
            font-family: inherit;
        }

        .contact_us_block #comment_input:focus {
            border: 2px solid darkslategray;
            color: black;
        }

    .contact_us_block button.contact_us_submit {
        font-family: inherit;
        font-size: 14px;
        font-weight: normal;
/*        margin-bottom: 5px;*/
        margin-right: 10px;
        margin-top: 10px;
    }

.contact_us_block a.contact_us_price {
    font-family: inherit;
    font-size: 14px;
    font-weight: normal;
    outline: none;
    margin: 0;
    padding: 2px 3px 2px 3px !important;
}

.contact_us_block .contact_us_price:hover {
    /*            border: 1px solid darkorange;*/
    /*            box-shadow: 0 0 18px 0 orange;*/
    box-shadow: inset 0px 0px 0px 1px orange, inset 0px 0px 0px 1px orange;
}

    .contact_us_block a.contact_us_subscribe {
        background: gold;
        border-radius: 5px;
        color: black;
        font-family: inherit;
        font-size: 14px;
        font-weight: normal;
        outline: none;
        padding:3px 3px 3px 3px !important;
    }

.contact_us_block .contact_us_subscribe:hover {
    /*            border: 1px solid darkorange;*/
    /*            box-shadow: 0 0 18px 0 orange;*/
    box-shadow: inset 0px 0px 0px 1px darkorange, inset 0px 0px 0px 1px darkorange;
}

    .contact_us_block hr.contact_us_hr {
        color: black;
        margin-right: 40px;
        width: 99%;
    }

    .contact_us_block p.new_member_question {
        text-align: center;
        margin-top: 20px;
        font-size: 12px;
        font-family: inherit;
        color: black;
    }

    .contact_us_block div.socials {
        display: flex;
        justify-content: space-evenly;
    }

/*status message on the Account mngt forms*/
.status_message_block {
    align-items: center;
    background-color: powderblue;
    border-radius: 5px;
    display: flex;
    font-family: inherit;
    font-size: 14px;
    font-weight: normal;
    justify-content: center;
    margin-top: 5px;
    max-height: fit-content;
    min-height: 30px;
    outline: none;
    padding: 2px 3px 2px 3px;
    pointer-events: none;
    width: 100%;
}
    .status_message_block .status_message {
        color: black;
        display: block;
    }
    .status_message_block .display_error_message {
        color: red;
    }
    .status_message_tip_block {
        background-color: inherit;
    }
.display_tip_message {
    color: gray;
    font-size: 12px;
}

/*    .status_message_single_block {
        align-items: center;
        display: flex;
        justify-content: center;
    }*/

/*new identity registration form*/ 
.registration_block button.registration_submit {
    /*    background-color: #607d8b !important;*/
    background-color: gold !important;
    border: 1px solid #607d8b;
    border-radius: 5px;
    box-sizing: border-box;
    color: white;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: normal;
    height: 35px;
    margin-bottom: 10px;
    margin-top: 5px;
    outline: none;
    padding: 0px;
    width: 100%;
    color: black;
}

    .registration_block button.registration_submit:hover {
        border-color: gold !important;
        /*border-color: #607d8b !important;*/
    }

    .registration_block a.registration_submit {
        background-color: gold !important;
        border: 1px solid #607d8b;
        border-radius: 5px;
        box-sizing: border-box;
        color: white;
        cursor: pointer;
        font-family: inherit;
        font-size: 14px;
        font-weight: normal;
        height: 35px;
        margin-bottom: 10px;
        margin-top: 5px;
        outline: none;
        padding: 0px;
        padding-top: 5px;
        width: 100%;
        color: black;
    }

    .registration_block p.tosandpp {
        font-family: inherit;
        font-size: 10px;
        margin-bottom: 5px;
        text-align: left;
        vertical-align: middle;
    }


.default_submit {
    /*font-weight: bold;*/
    /*height: 54px;*/
    background-color: #607d8b !important;
    border: 1px solid #607d8b;
    border-radius: 5px;
    box-sizing: border-box;
    color: white;
    cursor: pointer;
    font-family: inherit;
    font-size: 18px;
    font-weight: normal;
    height: fit-content;
    margin-bottom: 10px;
    margin-top: 5px;
    outline: 1px solid #607d8b;
    padding: 0px;
    width: 100%;
}

    .default_submit:hover {
        outline: 1px solid gold;
    }

.delete_button {
    background-color: lightsteelblue !important;
    color: darkred;
    outline: 1px solid darkred;
    border: 1px solid #607d8b;
    border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    font-size: 18px;
    font-weight: bold;
    height: 54px;
    /*margin-bottom: 10px;*/
    /*margin-top: 5px;*/
    /*outline: 1px solid #607d8b;*/
    padding-top: 12px;
    width: 100%;
}

    .delete_button:hover {
        box-shadow: inset 0 1px 10px rgba(255, 0, 0, 1);
    }

.default_input_container .form-control {
    border: 1px solid lightslategray;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    height: 42px !important;
    margin-bottom: 10px;
    margin-top: 10px;
    width: 100%;
}

    .default_input_container .form-control:focus {
        border: 1px solid lightslategray;
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem lightslategray;
    }

.default_input_container .form-label {
}

    /* search input group*/
.search_input_container .form-control {
    border: 1px solid lightslategray;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    height: 42px;
    /*margin-bottom: 10px;*/
    /*margin-top: 10px;*/
    /*outline: 1px solid #eff4f7;*/
    /*padding: 0 20px 0 50px;*/
    /*width: 100%;*/
}

    .search__input_container .form-control:focus {
        border: 1px solid lightslategray;
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.1rem lightslategray;
    }

.search_button_submit {
    background-color: #607d8b !important;
    /*border: 1px solid #607d8b;*/
    border: 1px solid lightslategray !important;
    border-radius: 0px 5px 5px 0px;
    box-sizing: border-box;
    color: white;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    font-weight: normal;
    height: 100%;
    /*outline: none;*/
    padding: 0px 8px 0px 8px;
}

    .search_button_submit:hover {
        border-color: gold !important;
    }

.alert {
    /*margin-bottom: 1px;*/
    height: fit-content;
    line-height: 25px;
    padding: 0px 10px 1px 10px;
}

/*default block to place input elements*/
.default_block {
    /*box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9);*/
    background: #fff;
    border: 2px solid black;
    border-radius: 5px;
    box-sizing: border-box;
    font-family: sans-serif;
    margin: auto;
    margin-top: 100px;
    outline: 10px solid #eff4f7;
    padding: 20px;
    width: 320px;
}

    .default_block .default_block_header {
        display: flex;
        flex-direction: column;
    }
    .default_block .default_block_close {
        margin-left: auto;
    }
    .default_block block_title {
        font-family: inherit;
        font-size: 25px;
        margin: auto;
    }
.external_registration_block_width {
    width: 460px;
}
.email_confirmation_block_width {
    width: 430px;
}
.stripe_subscription_block_width {
    width: 450px;
}

.inputvalidationerror {
        color: red;
        font-size: 11px;
        margin-top: -8px;
    }

.information_block {
    max-width: 1000px;
    width: fit-content;
}

    .information_block p.infomessage {
        font-size: 14px;
    }

/* identity signin  page */
/*new identity signin form*/
.signin_block {
    width: 325px;
}

    .signin_block remembermecbx {
        font-family: inherit;
        outline: 1px solid #1e5180;
        text-align: left;
        vertical-align: middle;
    }

    .signin_block label.remembermelabel {
        font-family: inherit;
        font-size: 12px;
        margin-bottom: 5px;
        text-align: left;
        vertical-align: middle;
    }

    .signin_block a.signin_other_services {
        /*color: darkgray;*/
        font-family: inherit;
        font-size: 12px;
        margin-right: 0px;
        /*margin-top: -4px;*/
        margin-bottom: 15px;
        text-align: right;
    }
    
    .signin_block button.login_submit {
        background-color: #607d8b !important;
        border: 1px solid #607d8b;
        border-radius: 5px;
        box-sizing: border-box;
        color: white;
        cursor: pointer;
        font-family: inherit;
        font-size: 14px;
        font-weight: normal;
        height: 35px;
        margin-bottom: 10px;
        margin-top: 5px;
        outline: none;
        padding: 0px;
        width: 100%;
    }

        .signin_block button.login_submit:hover {
            border-color: gold !important;
            /*border-color: #607d8b !important;*/
        }

    a.reset_pwd {
        /*color: darkgray;*/
        font-family: inherit;
        font-size: 12px;
        margin-right: 0px;
        /*margin-top: -4px;*/
        margin-bottom: 15px;
        text-align: right;
    }


.subscribe_btn {
    background: gold;
    border: 1px solid gold;
    border-radius: 5px;
    box-sizing: border-box;
    color: black;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    height: 35px;
    outline: none;
    padding: 0px;
    padding-top: 6px;
    width: 100%;
    vertical-align: middle;
}

    .subscribe_btn:hover {
        background-color: gold !important;
        border-color: #607d8b !important;
        /*border-color: gold !important;*/
        /*border-color: #607d8b !important;*/
    }


.signin_block p.new_member_question {
    color: black;
    font-family: inherit;
    font-size: 12px;
    margin-top: 20px;
    text-align: center;
}

.signin_block button.login_identity_submit:hover button.subscribe_btn:hover {
    border: 3px solid darkorange;
}


/*background image of the site*/
.bg_img {
    background-image: url("/config/images/site-background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    margin: 0;
    left: 0;
    top: 0;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100vh;
    filter: blur(6px) brightness(1.15);
    opacity: 0.3;
}

    .bg_img.main_image {
        height: 250%;
        height: 215vh;
    }

    .bg_img.login_image {
        height: 250%;
        height: 100vh;
        /* height: auto; */
    }

    .bg_img.pricing_image {
        height: 250%;
        height: 100vh;
    }

    .bg_img.contact_us_image {
        height: 250%;
        height: 100vh;
    }

.bg_text_test {
    background: rgba(0,0,0,0.3);
    border: 4px solid white;
    left: 50%;
    padding: 10px;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
}

.inputtextw {
    padding-left: 32px !important;
    position: relative !important;
}

    .inputtextw:before {
        position: absolute !important;
        font-family: 'FontAwesome';
        top: 0 !important;
        left: 10px !important;
        content: "\f0e0" !important;
    }

.trademark {
    margin: 6px 0 0; color: #4b5563; font-family:Haettenschweiler, 'Gill Sans MT', sans-serif; font-size: 14px;
}

/*footer layout*/
.site-footer { background: #f3f4f6; padding: 22px 16px 8px; border-top: 1px solid #e5e7eb; margin-top:30px; 
  bottom: 10px; margin-bottom: 0; width: 100%; box-shadow: inset 0px 5px 20px 0px lightblue;}
    .site-footer .footer-container { max-width: 1100px; margin: 0 auto; }
    .footer-container .footer-cols { display: flex; flex-wrap: wrap; gap: 24px; }
    /* .footer-container .footer-cols { display: flex; flex-direction: column; align-items: center; gap:5px; } */
    .footer-cols .footer-col { flex: 1 1 200px; }
    .footer-col .footer-brand { font-size: 1.1rem; font-weight: 700; color: var(--color-text); text-decoration: none; }
    .footer-col .footer-brand { margin: 6px 0 0; color: #4b5563; }
    .footer-col .footer-tagline { margin: 6px 0 0; color: #4b5563; font-family:Haettenschweiler, 'Gill Sans MT', sans-serif; font-size: 14px; }
    .footer-col h6 { font-size: 0.95rem; margin-bottom: 8px; font-weight: 700; color: #111827; }
    .footer-col .footer_icon { font-size: 13px;}
    .footer-col ul { list-style: none; padding: 0; margin: 0; }
    .footer-col li { margin: 6px 0; }
    .footer-col a { color: var(--color-accent); text-decoration: none; }
    .footer-col a:hover { text-decoration: underline; }
    /* .footer-container .footer-bottom { margin-top: 20px; border-top: 1px solid #e5e7eb; padding-top: 10px; color: #6b7280; font-size: 0.9rem; } */
    .footer-container .footer-bottom { border-top: 1px solid #e5e7eb; padding-top: 10px; color: #6b7280; font-size: 0.9rem; }
    .footer-bottom a { color: var(--color-accent); text-decoration: none; }
    .footer-bottom a:hover { text-decoration: underline; }
    /* Small screens are less than 601 pixels DP */
    /* medium screens are less than 993 pixels DP */
    @media only screen and (max-width: 601px) {
        .footer-container .footer-cols  {
            flex-direction: column;
            align-items: center; /* Center the stacked columns */
            gap:5px; 
        }
        .footer-cols .footer-col {
            flex: 1 1 5px; 
            width: 100%; /* Make columns take full width when stacked */
            margin-bottom: 10px; /* Add spacing between stacked columns */
        }
    }

/*reCAPTCHA*/
.grecaptcha-badge {
    visibility:hidden;
}

 /* Cookie banner */
  .cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1f2937;
    color: #f9fafb;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    z-index: 200;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  }
  .cookie-banner p { margin: 0; font-size: 0.95rem; line-height: 1.4; }
  .cookie-banner .cookie-link { color: #93c5fd; }
  .cookie-banner .cookie-btn {
    background: #2563eb;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
  }
  .cookie-banner .cookie-btn:hover { background: #1d4ed8; }

  @media (max-width: 640px) {
    .footer-cols { flex-direction: column; }
    .cookie-banner { flex-direction: column; align-items: flex-start; }
  }

.notification_page_button {
    display:flex; 
    margin:auto;
    width:fit-content;
    justify-content: center;
}

/* customized input field with icon in front */
/*.input_container {
    position: relative;*/
/*border: 1px solid orange;*/
/*}

    .input_container > input:focus {
        border: 2px solid darkslategray;
        color: black;
    }

    .input_container i {
        margin-top: inherit;
        position: relative;
    }

        .input_container i.icon {
            color: slategray;
            left: 15px;
            margin-top: inherit;
            position: absolute;
            text-align: left;
            top: 12px;
        }

        .input_container i.email_icon {
            top: 22px;
        }

        .input_container i.loginid_icon {
            top: 22px;
        }

        .input_container i.lock_icon {
            top: 22px;
        }
        
        .input_container i.password_icon {
            top: 22px;
        }

        .input_container i.alias_icon {
            top: 22px;
        }

    .input_container input[type=text], input[type=password], input[type=email] {
        border: 1px solid lightslategray;
        border-radius: 5px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
        box-sizing: border-box;
        font-family: inherit;
        font-size: 14px;
        height: 42px !important;
        margin-bottom: 10px;
        margin-top: 10px;
        outline: 5px solid #eff4f7;
        padding: 0 20px 0 50px;
        width: 100%;
    }

    .input_container .input_text input::placeholder {
        color: #ccc;
        font-size: 14px;
        font-family: inherit;
    }

    .input_container .input_text:focus {
        border: 2px solid darkslategray;
        color: black;
    }

#validationmsg {
    display: flex;
    justify-content: left;
    color: red;
    font-size: 11px;
    margin-top: -8px;
    margin-bottom: 2px;
}

p.invalidcredentials {
    border: 1px solid red;
    border-radius: 5px;
    color: red;
    font-family: inherit;
    font-size: 12px;
    margin-top: 20px;
    text-align: center;
}*/



/* classroom form*/
.classroom_block {
    /*box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9);*/
    background: #fff;
    font-family: sans-serif;
    margin: auto;
}

.classroom_manage {
    border: 2px solid black;
    border-radius: 5px;
    box-sizing: border-box;
    margin-top: 100px !important;
    outline: 10px solid #eff4f7;
    padding: 10px;
    height: fit-content;
    width: 450px;
}

.classroom_assigments {
    height: 250px;
    width: 100%;
    max-height: 200px !important;
    margin-top: 5px !important;
    color: black;
    background: inherit;
}

.classroom_block .input_text {
    background-color: aliceblue;
}

.classroom_block .input_container .classroom_inputfield {
    height: 32px !important;
}

.classroom_block .input_container i.loginid_icon {
    top: 16px;
}

.classroom_block .input_container i.password_icon {
    top: 16px;
}

.classroom_block .input_container i.alias_icon {
    top: 16px;
}

.classroom_block h1 {
    color: #000;
    font-family: inherit;
    font-size: 18px;
    height: 45px;
    margin-bottom: 10px;
    margin-top: 20px;
    padding-top: 10px;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

.classroom_block .seats {
    margin-top: 20px;
}

.classroom_block a.gen_loginid {
    /*float: right !important;*/
    /*display:block;*/
    /*justify-content:flex-end;*/
    font-size: 11px;
    margin: -4px 0 -4px 0;
    /*text-align: right !important;*/
}

.classroom_block a.gen_loginid_link:hover {
    text-decoration: underline;
}

.classroom_block .save_stu_submit {
    display: flex !important;
    justify-content: center !important;
    margin-top: 5px;
    margin-bottom: -10px;
}

.classroom_block .stu_table_actions {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 6px 0px;
}

.classroom_block .other_actions {
    margin-left: auto;
}

.classroom_manage .stu_table_config {
}

.classroom_assigments .stu_table_config {
    /*color: black;*/
    /*overflow-x: hidden;*/
    /*width: 100%;*/
    background: inherit;
    height: 179px;
    overflow: auto;
    padding: 0px;
    touch-action: pan-y;
}

.stu_table_config {
    /*default configuration for students table*/
    /*overflow-x: hidden;*/
    margin-top: 5px !important;
    height: 260px;
    overflow: auto;
    padding: 0px;
    touch-action: pan-y;
}

.stu_table {
    /*border-left: 1px solid rgba(0, 0, 0, 0.8);*/
    max-height: 260px;
    min-height: 50px;
    overflow: auto;
    /*overflow-x: hidden;*/
    padding: 0px;
    touch-action: pan-y;
}

    .stu_table > thead > tr > th {
        background: gainsboro;
        line-height: 18px;
        padding: 3px;
        position: sticky;
        text-align: center;
        top: 0;
        vertical-align: middle;
    }

    .stu_table > tbody > tr {
        height: 15px;
        line-height: 15px;
        margin: 0px;
        padding: 2px 0 2px 0;
        vertical-align: middle;
    }

        .stu_table > tbody > tr > td {
            height: 15px;
            line-height: 15px;
            margin: 0px;
            padding: 2px 0 2px 0;
            text-align: center;
            vertical-align: middle;
        }

            .stu_table > tbody > tr > td .stu_checkbox {
                margin-left: 10px;
                vertical-align: middle;
            }

    .stu_table .stu_alias_input_box {
        text-align: center;
    }

    .stu_table .stu_alias_inputfield {
        border: none;
        font-size: 14px;
        height: 18px;
        outline: none;
        padding-left: 2px;
        padding-top: 0px;
        width: 100px;
    }

        .stu_table .stu_alias_inputfield:hover {
            outline: 1px solid lightgray;
            border-radius: 3px;
        }

        .stu_table .stu_alias_inputfield:focus {
            border-radius: 3px;
            outline: 1px solid black;
        }

        .stu_table .stu_alias_inputfield::placeholder {
            color: darkgray;
            font-size: 12px;
            font-family: inherit;
        }

.classroom_block .exam_assign_student_grid {
    max-height: 150px !important;
}

.classroom_block .stu_table > sg_col {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: space-around;
    outline: none;
    padding-top: 1px;
}

.classroom_block .student_list_container {
    margin: 5px;
}

.classroom_block .student_list {
    list-style-type: none;
    max-height: 300px;
    min-height: 300px;
    overflow: auto;
    overflow-x: hidden;
    padding: 5px;
    touch-action: pan-y;
}

.classroom_block .list_item {
    line-height: 10px;
}

.classroom_block .list_item_dl {
    border-bottom: 1px solid lightgray;
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 2fr 1fr;
    padding-bottom: 0px;
}

.classroom_block .row_border {
    border-top: 2px solid gray;
    grid-column: 1 / 5; /* this code makes the row stretch to entire width of the container */
}


.classroom_block hr.classroom_hr {
    background-color: black;
    border: none;
    height: 2px;
    margin-right: 40px;
    margin-top: 20px;
    width: 100%;
}

/*exam list  and metrics*/

.exam_name_metrics {
    text-align: left !important;
}

/*exam name input field*/
.exam_name_input_box {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0px;
    margin-top: 0px;
    line-height: 16px;
}

    .exam_name_input_box .exam_name_inputfield {
        border: none;
        border-radius: 3px;
        font-size: 14px;
        height: 16px;
        margin-left: 5px;
        outline: 1px solid lightgray;
        padding: 1px 1px 1px 2px;
    }

        .exam_name_input_box .exam_name_inputfield:hover {
            border-radius: 3px;
            outline: 1px solid lightgray;
        }

        .exam_name_input_box .exam_name_inputfield:focus {
            border-radius: 3px;
            outline: 1px solid black;
        }

        .exam_name_input_box .exam_name_inputfield::placeholder {
            color: darkgray;
            font-size: 12px;
            font-family: inherit;
        }

.card_exam_name_header {
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: left;
    /*font-size: 80%;*/
}



/* account drop down styling*/
.acc_dropdown_content {
    background: gainsboro;
    height: fit-content;
    /*min-width: 150px;*/
    /*width: 144px;*/
    width: max-content;
    padding: 0 0px 0 0px;
}

.acc_menu_item {
    border-radius: 5px;
    color:black;
    cursor: pointer;
    font-weight: bold;
    margin: 2px 0 2px 0;
}

.acc_dropdown_accprofile_title {
    font-size: 10px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    text-align: center;
}

.acc_dropdown_accprofile_btn {
    display: flex;
    justify-content: center;
    border-radius: 5px;
    font-weight: bold;
    line-height: 20px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    text-align: center;
}


.acc_dropdown_content p.new_member_question {
    color: black;
    font-family: inherit;
    font-size: 12px;
    margin-top: -5px;
    text-align: center;
}

.acc_menu_list {
    max-height: 200px;
    overflow: auto;
    overflow-x: hidden;
    touch-action: pan-y;
}

.animated {
    animation: fadeIn-fadeOut linear 10s;
    opacity: 0;
}

@keyframes fadeIn-fadeOut {
    1% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}



.star_badge {
    position: relative;
}

    .star_badge:after {
        animation: fadeIn-fadeOut linear 10s;
        color: red;
        content: "\f005";
        font: var(--fa-font-regular);
        font-weight: normal;
        opacity: 0;
        position: absolute;
        right: -10px;
        top: -3px;
    }

.btn_star_badge:after {
    /*position: absolute;*/
    /*animation: fadeIn-fadeOut linear 10s;*/
    color: red;
    content: "\f005";
    font: var(--fa-font-regular);
    font-weight: bold;
    opacity: 0;
    right: -6px;
    top: -8px;
    z-index: 999999;
}




/* badge styling*/
/* Use like:*/
/*<span class="notification_badge notification_bell_badge" badge_text="42"></span>*/
.notification_badge {
    position: relative;
}

    .notification_badge[badge_text]:after {
        /* circle shape, size and position */
        align-items: center;
        background: red;
        border-radius: 0.8em;
        color: white;
        content: attr(badge_text);
        display: flex;
        font-size: .7em;
        height: 1.6em;
        justify-content: space-around;
        line-height: 1.6em;
        min-width: 1.6em;
        position: absolute;
        right: -0.7em;
        text-align: center;
        top: -0.7em;
    }

.notification_bell_badge[badge_text]:after {
    /* circle position */
    right: -0.3em;
    top: -0.8em;
}



/* single notification toast to display in the top right corner of the viewport (under the menu) */
.notification_toast_single {
    position: fixed;
    right: 0rem;
    top: 1rem;
    z-index: 99999;
}

    /* showing by transition the toast into view
                single toast has less opacity.
            */
    .notification_toast_single.show .toast_content {
        opacity: 0.85 !important;
        transform: translateX(0%);
        visibility: visible;
    }



/*notification toast to display in the list - toaster dropdown */
.notification_toast {
    align-items: flex-end;
    color: hsl(0, 0%, 20%);
    display: flex;
    flex-direction: row;
    overflow-x: hidden;
    padding: 0.25rem;
}



    /* when the .notification_toast container has a class of .show transition the message into view */
    .notification_toast.show .toast_content {
        opacity: 1;
        transform: translateX(0%);
        visibility: visible;
    }



/* style the content of the message to show a grid with the dismiss button in the top right corner
        |kind  |  button |
        |message   |       |
        */
.toast_content {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-gap: 0rem;
    padding: 0rem 0.5rem 0rem 0.5rem;
    margin: 0;
    background: hsl(0, 0%, 100%);
    box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.1), 0 2px 3px hsla(0, 0%, 0%, 0.1);
    border-radius: 10px;
    border-left: 0.5rem solid hsl(0, 0%, 100%);
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition-property: transform, opacity, visibility;
    transition-duration: 0.7s;
    transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

/*.toast_content toast_kind {*/
.toast_kind {
    display: flex;
    font-size: 1.1rem;
    font-weight: normal;
    justify-content: flex-start;
    margin-top: 0px;
    padding: 0px;
    text-transform: capitalize;
}

.toast_kind_style {
    align-self: center;
}

.toast_content toast_message {
    font-size: 0.8rem;
    grid-column: 1/-1;
    margin-bottom: 8px;
    margin-top: 0px;
    max-width: 320px;
    padding: 0px;
}

.toast_content button {
    align-self: center;
    background: none;
    border: none;
    color: inherit;
    grid-column: 2/3;
    grid-row: 1/2;
    height: 20px;
    margin: 0px;
    padding: 0px;
    text-align: center;
    vertical-align: middle;
    width: 20px;
}

.toast_content_in_list_dismiss button::before {
    content: "\f00d";
}

.toast_content_single_dismiss button::before {
    content: "\f061";
}

.toast_content button:hover {
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
    color: red;
    padding: 0px;
}

.toast_date {
    align-self: center;
    font-family: 'Arial';
    font-size: 10px;
    margin-left: auto;
    margin-right: 5px;
    margin-top: 1.8px;
    text-size-adjust: none;
}

/* change the toast border color according to the different modifiers */
.toast_border_Info {
    border-bottom: 1px solid blue;
    border-left-color: blue;
    border-right: 1px solid blue;
    border-top: 1px solid blue;
}

.toast_border_Success {
    border-bottom: 1px solid limegreen;
    border-left-color: limegreen;
    border-right: 1px solid limegreen;
    border-top: 1px solid limegreen;
}

.toast_border_Warning {
    border-bottom: 1px solid gold;
    border-left-color: gold;
    border-right: 1px solid gold;
    border-top: 1px solid gold;
}

.toast_border_Error {
    border-bottom: 1px solid red;
    border-left-color: red;
    border-right: 1px solid red;
    border-top: 1px solid red;
}



/* notification drop down styling*/
.notification_dropdown_content {
    background: gainsboro;
    height: fit-content;
    max-height: 250px;
    padding-top: 0px;
    width: max-content;
}

.notification_dropdown_header {
    display: flex;
    font-size: 15px;
    justify-content: space-between;
}

.notification_list {
    max-height: 200px;
    overflow: auto;
    overflow-x: hidden;
    touch-action: pan-y;
}

.just_arrived_list {
    position: fixed;
    right: 0rem;
    top: 1.5rem;
    z-index: 99999;
}

.just_arrived_toast {
    display: flex;
    justify-content: flex-end;
    opacity: 0.85 !important;
    z-index: 99999;
}

    .just_arrived_toast button::before {
        content: "\f061";
    }



/* collapsible button arrow controls*/
.collapsablebtntoggle::after {
    content: "\25BC";
    padding-left: 3px;
    vertical-align: middle;
}

.collapsablebtntoggle[aria-expanded="true"]::after {
    content: "\25B2";
    padding-left: 3px;
    vertical-align: middle;
}

/* collapsible exam list controls*/
.collapsablelistplusminus::before {
    color: black;
    content: "\2795";
}

.collapsablelistplusminus[aria-expanded="true"]::before {
    color: black;
    content: "\2796";
}

.collapsablebtnclassroom {
    box-shadow: 0px 0px 0px 1px lightblue;
    border-radius: 5px;
}



.my-dropdown-toggle::after {
    content: none;
}

.eogdropdown {
    display: inline-block;
    position: relative;
}

.eogdropdown_content {
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
    display: none;
    font-size: 12px;
    position: absolute;
    z-index: 99;
}

.eogdropdown_menu {
    padding-bottom: 2px;
    padding-top: 2px;
}

.eogdropdown_item {
    color: black;
    display: block;
    font-size: 12px;
    margin: 1px;
    padding: 2px 1px;
    text-decoration: none;
    white-space: nowrap;
}

    .eogdropdown_item:hover {
        background-color: khaki;
    }

.eogdropdown:hover .dropdown-content {
    border-radius: 6px;
    display: block;
}



.pdfinfotext {
    color: black;
    display: inline-block;
    font-size: 12px;
    margin-left: 5px;
    white-space: normal;
    width: 30%;
}






/*spinners*/
.contentloading {
    border: 2px solid transparent;
    color: black;
    left: 25%;
    position: relative;
    text-align: center !important;
    width: 50%;
}

@media only screen and (max-width: 601px) {
    .contentloading {
        border: 2px solid transparent;
        color: black;
        left: 0%;
        position: relative;
        text-align: center !important;
        width: 100%;
    }
}

.spinnermsg_loading {
    background-color: inherit;
    color: black;
    font-size: 20px;
    font-weight: normal;
    height: 30px;
    line-height: 30px;
    margin-top: 3%;
    text-align: center !important;
    vertical-align: middle;
    width: 100%;
    z-index: 9999;
    /*border: 2px solid gold;*/
}

.simplespinner::before {
    animation: 1s linear infinite eogspinner;
    border: solid 8px lightgray;
    border-bottom-color: darkslategray;
    border-radius: 50%;
    content: "";
    height: 45px;
    position: absolute;
    transform: translate3d(-50%, -50%, 0);
    transform-origin: center;
    width: 45px;
    will-change: transform;
    z-index: 9999;
}

.centerspinner {
    color: black;
    left: 50%;
    position: absolute;
    top: 50%;
    /*border: 2px solid red;*/
}

@keyframes eogspinner {
    0% {
        transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }

    100% {
        transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
}

/*  .spinner-border {
            --bs-spinner-width: 2rem;
            --bs-spinner-height: 2rem;
            --bs-spinner-vertical-align: -0.125em;
            --bs-spinner-border-width: 0.25em;
            --bs-spinner-animation-speed: 0.75s;
            --bs-spinner-animation-name: spinner-border;
             border: var(--bs-spinner-border-width) solid currentcolor;
             border-right-color: transparent;
        }*/

.eogspinner_content {
    color: black !important;
    /* configurations to bootstrap spinner-border*/
    --bs-spinner-width: 2.5rem;
    --bs-spinner-height: 2.5rem;
    --bs-spinner-border-width: 0.35em;
    /*border: var(--bs-spinner-border-width) solid lightgray;*/
    /*border-right-color: darkslategray;*/
    margin-top: 15%;
    z-index: 9999;
}



.pagetitle {
    background-color: darkslategray;
    color: white;
    font-weight: normal;
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
    margin-top: 0px;
    width: 100%;
}



.vrinmenu {
    border-left: 1px solid #000;
    color: gray;
    height: 30px;
    margin-top: 9px;
}

.vrinrow {
    color: gray;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 6px;
}



/*disable bootstrap fading for collapsible sections - not a tab*/
.nofade {
}

    .nofade ~ .collapsing {
        transition: height 0s ease !important;
    }

/* .collapsibleplus::before {
            content: "\2795";
            color: black;
        }*/

/* .collapsibleminus::before {
            content: "\2796";
            color: black;
        }*/

.collapsibledown::before {
    content: "\25BC";
}

/*  .collapsibleup::before {
            content: "\25B2";
        }*/



/*buildexam styling*/
.buildexampagetitle {
    height: 29px;
}

.buildexamnavqns_up {
    margin-bottom: 7px;
    transform: scale(1.5);
    transform-origin: top left;
}

.buildexamnavqns_down {
    margin-bottom: 7px;
    transform: scale(1.5);
    transform-origin: top right;
}

.buildexamnavqns:hover {
    border-radius: 2px;
}

.allgradequestions {
    background-color: ghostwhite;
    height: 575px;
}

.allgradequestionslist {
    height: 420px;
}

.gradeqnproperties {
    background: ghostwhite;
    bottom: 0px;
    margin-top: 2px;
    position: relative;
}

.bothquestionpanes {
    background-color: ghostwhite;
    height: 575px;
    position: relative;
}

.allexamquestions {
    height: 575px;
    background-color: ghostwhite;
}

.allexamquestionslist {
    height: 420px;
}

.examproperties {
    background: ghostwhite;
    bottom: 0px;
    margin-top: 2px;
    position: relative;
}

.addremove_iconfocus {
    color: blue;
}

.addremove_icondisabled {
    pointer-events: none;
}



/*progressbar styling*/
.progressbar_container {
    background-color: ghostwhite;
    border-radius: 0.25rem;
    display: flex;
    font-size: 0.75rem;
    height: 1rem;
    overflow: hidden;
}

.progressbar_item {
    background-color: lightgray;
    border-radius: 0.25rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    transition: width 0.6s ease;
    white-space: nowrap;
}

.successbar {
    background-color: green;
}

.failurebar {
    background-color: firebrick;
}

.remainbar {
    background-color: inherit;
}



/* tab configuration*/
.eogtab_container {
    border-radius: 4px 4px 0px 0px;
    border-radius: 5px;
    margin-bottom: 0px;
}

.eogtablabel {
    border-radius: 4px 4px 0px 0px;
}

.eogtabcontent {
    background-color: ghostwhite;
    margin: 0px;
    padding: 0px;
}


/*features section - Container styling*/
.fbheaderborders {
    padding-top: 5px; 
}

.fbheadertext {
    padding-bottom:4px; 
    padding-top:4px; 
}

.fbbodytext {
    margin-bottom:30px;
    margin-top:8px;
}

.fbtabcontainer {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px; 
}

.fbpanel {
    padding:4px; 
    margin:0px; 
    background-color: ghostwhite;
    background-color:#D6EEEE;
}

/*features section - WorkSheet tab styling*/
.fbwsrow {
    height: 300px;
    margin-bottom: 10px;
    margin-top: 0px;
    max-width: 100%;
    overflow: auto;
    touch-action: pan-y;
    touch-action: pan-x;
    white-space: nowrap;
}

.fbwsitem {
    display: inline-block;
    height: 95%;
    margin-right: 12px;
    width: auto;
}

    .fbwsitem:last-child {
        margin-right: 0px;
    }

.fbwsitemselect:hover {
    border: 1px solid orange;
}

.fbwsimg {
    background-color: seashell;
    border: 1px solid gray;
    height: 90%;
    width: auto;
}

.fbwstext {
    margin: 0px;
    padding: 0px;
    text-align: center;
}

/*features section - Online Tests tab styling*/
.fbolrow {
    height: 300px;
    margin-bottom: 10px;
    margin-top: 0px;
    max-width: 100%;
    overflow: auto;
    touch-action: pan-y;
    touch-action: pan-x;
    white-space: nowrap;
    background-color:#D6EEEE;
}

.fbolitem {
    display: inline-block;
    height: 95%;
    margin-right: 12px;
    width: auto;
}

    .fbolitem:last-child {
        margin-right: 0px;
    }

.fbolitemselect:hover {
    border: 1px solid orange;
}

.fbolimg {
    background-color: seashell;
    border: 1px solid gray;
    height: 90%;
    width: auto;
}

.fboltext {
    margin: 0px;
    padding: 0px;
    text-align: center;
}

.textaligned {
    vertical-align: middle;
}



/*card hover shadow effect*/
.card_product:hover {
    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    transition: all .10s ease-in-out;
}



/*delete icon hover styling*/
.trashcan_icon {
    color: black;
    padding: 0px;
}

    .trashcan_icon:hover {
        color: red;
        cursor: pointer;
    }

/*	tabs settings for acc grades page - working with bootstrap*/
.configbstabs ul.nav-tabs li.nav-item {
    background-color: white !important;
    border: 1px solid #607d8b;
    border-radius: 5px 5px 0 0;
    border-bottom: 0px;
    color: black;
}
    .configbstabs ul.nav-tabs li.nav-item a:active {
        color: white;
        background-color: red;
    }

    .configbstabs ul.nav-tabs li.nav-item a.nav-link {
        background-color: white !important;
        border: 1px solid #607d8b;
        border-radius: 5px 5px 0 0;
        color: black;
        font-weight: normal;
    }

        .configbstabs ul.nav-tabs li.nav-item a.nav-link.active {
            background-color: white !important;
            border: 2px solid #607d8b;
            border-radius: 5px 5px 0 0;
            border-bottom: 0px;
            box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.9);
            color: black;
            font-weight: bold;
        }

        .configbstabs ul.nav-tabs li.nav-item a.nav-link:hover {
            background-color: #f0e68c !important;
            color: #000 !important;
        }

        .configbstabs ul.nav-tabs li.nav-item a.nav-link.active:hover {
            background-color: white !important;
        }

    .configbstabs ul.nav-tabs li.nav-item button.nav-link {
        background-color: white !important;
        border: 1px solid #607d8b;
        color: black !important;
    }

        .configbstabs ul.nav-tabs li.nav-item button.nav-link.active {
            background-color: #607d8b !important;
            border: 1px solid #607d8b;
            border-bottom: none !important;
            color: #fff !important;
        }

        .configbstabs ul.nav-tabs li.nav-item button.nav-link:hover {
            background-color: #f0e68c !important;
            color: #000 !important;
        }

.configbstabs .tab-content {
    background-color: lightgray !important;
    border: 1px solid #607d8b;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: none;
}

    .configbstabs .tab-content .tab-pane {
        background-color: #FFF;
        color: #0080FF;
        height: auto;
        min-height: 200px;
    }


/*.acc_manage {
}

    .acc_manage:hover {
        background-color: gold !important;
        color: red !important;
    }

*/

/*icons */
/* .exampropson::before {
            color: orange;
            content: "\f0d8";
            font: var(--fa-font-regular);
            font-weight: normal;
        }

        .exampropsoff::before {
            content: "\f0da";
            font: var(--fa-font-regular);
        }*/



/* mulitple choice buttons */
.mcbtnlabel {
    margin: 0px;
}

    .mcbtnlabel input:checked + span {
        background: violet;
        border-color: #ccf;
        color: black;
    }

.mcdisabledlabel {
    pointer-events: none;
}

.mcdisabledrb {
    pointer-events: none;
    opacity: 0.5;
}

.mcbtn {
    line-height: 12px;
    margin-bottom: 0px;
    padding: 2px 3px 2px 3px;
}

.mcanswer {
    padding-left: 5px;
    position: relative;
    top: 1px;
}



/*exam session frame props*/
.exam_session {
    background-color: ghostwhite;
    margin-left: 10px;
    margin-right: 10px;
    padding: inherit;
}

/* exam question list pane */
.examquestions_header {
    display: flex;
    height: 29px; /*height of the banner without buttons*/
    justify-content: flex-start;
    margin-bottom: 0px;
    text-align: center;
}

/* exam questions list table */
.examqntable {
    border-collapse: collapse;
    display: table;
    font-size: inherit;
    table-layout: fixed;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

    .examqntable > thead > tr {
        border-bottom: 1px solid black;
        border-top: 1px solid black;
    }

        .examqntable > thead > tr > th:nth-child(1) {
            width: 22px;
        }

        .examqntable > thead > tr > th:nth-child(2) {
            width: 22px;
        }

        .examqntable > thead > tr > th:nth-child(3) {
            width: 22px;
        }

        .examqntable > thead > tr > th:nth-child(4) {
            width: 22px;
        }

        .examqntable > thead > tr > th {
            text-align: center;
            border-right: 1px solid black;
        }

            .examqntable > thead > tr > th:first-child,
            .examqntable > tbody > tr > td:first-child {
                border-left: none;
            }

            .examqntable > thead > tr > th:last-child,
            .examqntable > tbody > tr > td:last-child {
                border-right: none;
            }

    .examqntable > tbody > tr:hover {
        background-color: #D6EEEE;
    }

    .examqntable > tbody > tr > td:nth-child(1) {
        padding-right: 3px;
        text-align: right;
        width: 22px;
    }

    .examqntable > tbody > tr > td:nth-child(2) {
        text-align: center;
        width: 22px;
    }

    .examqntable > tbody > tr > td:nth-child(3) {
        text-align: center;
        width: 22px;
    }

    .examqntable > tbody > tr > td:nth-child(4) {
        padding-left: 4px;
        text-align: left;
        width: 22px;
    }

    .examqntable > tbody > tr > td {
        /*border-right: 1px solid gray ;*/
        border-bottom: 1px solid lightgray;
    }



/* compressed table used in few places*/
.table_squashed > thead > tr > th,
.table_squashed > tbody > tr > th,
.table_squashed > tfoot > tr > th,
.table_squashed > thead > tr > td,
.table_squashed > tbody > tr > td,
.table_squashed > tfoot > tr > td {
    font-size: 80%;
    margin: 0px;
    padding: 0px;
    vertical-align: middle;
}

.attemptsessiontbl {
    border-collapse: collapse;
    display: table;
    font-size: inherit;
    overflow: hidden;
    table-layout: fixed;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

    .attemptsessiontbl > tbody > tr > td {
        border-bottom: 1px solid lightgray;
        border-right: 1px solid lightgray;
        padding-left: 2px;
        text-align: left;
        width: 50%;
    }

        .attemptsessiontbl > tbody > tr > td:last-child {
            border-right: none;
        }

.starttablesection > td {
    border-top: 2px solid gray;
}
/*table cell overflow workaround*/
.eogellipsis {
    position: relative;
}

    .eogellipsis:before {
        content: '&nbsp;';
        visibility: hidden;
    }

    .eogellipsis span {
        position: absolute;
        left: 0;
        right: 0;
        white-space: nowrap;
        overflow: hidden;
        /*text-overflow: ellipsis;*/
    }



/* Single question body with sections of image */
div.eogqn_pane {
    background-color: ghostwhite;
    height: 575px;
}

div.eogqn_container {
    background: ghostwhite;
    height: 90%;
    padding: 75px 4px 4px 4px;
    position: relative;
}

div.eogqn_container_per_qn {
    padding-top: 25px !important;
}

/* Small screens are less than 601 pixels DP */
/* medium screens are less than 993 pixels DP */
@media only screen and (max-width: 601px) {
    div.eogqn_container {
        /*border: 1px solid gold;*/
        background-color: ghostwhite;
        height: 90%;
        padding: 10px 4px 4px 4px;
        position: relative;
    }

    div.eogqn_container_per_qn {
        padding-top: 10px !important;
    }
}

div.eogqn_container_fontsize {
    font-size: 110%;
}

div.eogqnmc_container {
    bottom: 0px;
    left: 0px;
    padding-left: 8px;
    position: absolute;
    right: 0px;
    /*border: 1px solid gold;*/
}

div.mc_all_columns {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

div.mc_all_rows {
    display: block;
}

div .eogqnimg-container {
    /*padding-bottom: 10px;
            padding-top: 10px;
            text-align: center;*/
    /* padding-bottom: 10px;
            padding-top: 10px;
            padding-left: 20px;
            width: 100%;*/
}

div.eogqnimg_container {
    max-height: 350px;
    overflow-x: auto;
    overflow-y: auto;
    /*border: 1px solid green;*/
}

svg.eogqnimg {
    /*border: 1px solid orange;*/
    height: auto;
    margin: 10px 0 10px 20px;
}

svg.eogprevimg {
    border: 1px solid #73AD21;
    height: auto;
    max-width: 100%;
    text-align: center;
}

div.eogqnnav_container {
    align-content: center;
    background-color: inherit;
    display: flex;
    justify-content: space-around;
    margin-bottom: 0px;
    margin-top: -1.5px;
}

div.eogqnfeedback_container {
    background-color: inherit;
    display: flex;
    justify-content: space-around;
    padding: 2px;
    width: 20%;
}



/* Tooltip placement and styling */
.tooltipson::before {
    color: orange;
    content: "\f059";
    font: var(--fa-font-regular);
    font-weight: normal;
}

.tooltipsoff::before {
    content: "\f059";
    font: var(--fa-font-regular);
    font-weight: normal;
}

.eogtooltip {
    position: relative;
}

    .eogtooltip .eogtooltiptext {
        background-color: white;
        border: 1px solid black;
        border-radius: 5px;
        color: #fff;
        color: black;
        font-family: sans-serif;
        font-size: 10px;
        font-weight: normal;
        left: 50%;
        margin-left: -50px;
        opacity: 0;
        padding: 2px 0;
        position: absolute;
        text-align: center;
        transition: opacity 0.3s;
        visibility: hidden;
        width: fit-content;
        z-index: 99999999;
    }

    .eogtooltip:hover span.eogtooltiptext {
        opacity: 1;
        visibility: visible;
    }

    .eogtooltip:hover p.eogtooltiptext {
        opacity: 1;
        visibility: visible;
    }

    .eogtooltip .eogtooltiptext::after {
        border-style: solid;
        border-width: 5px;
        content: "";
        left: 50%;
        margin-left: -5px;
        position: absolute;
    }

    .eogtooltip .eogtooltiptextcenter {
        border-width: 0px;
        top: 50%;
    }

        .eogtooltip .eogtooltiptextcenter::after {
            border-color: transparent transparent transparent transparent;
            border-width: 0px;
        }

    .eogtooltip .eogtooltiptexttop {
        bottom: 125%;
    }

        .eogtooltip .eogtooltiptexttop::after {
            border-color: #555 transparent transparent transparent;
            top: 100%;
        }

    .eogtooltip .eogtooltiptextbottom {
        top: 125%;
    }

        .eogtooltip .eogtooltiptextbottom::after {
            border-color: transparent transparent #555 transparent;
            bottom: 100%;
        }

    .eogtooltip .eogtooltiptextright {
    }

        .eogtooltip .eogtooltiptextright::after {
            border-color: transparent #555 transparent transparent;
            bottom: 21%;
            left: -5px;
        }

    .eogtooltip .eogtooltiptextleft {
    }

        .eogtooltip .eogtooltiptextleft::after {
            border-color: transparent transparent transparent #555;
            bottom: 22%;
            left: 105%;
        }



div.addtoexamfocuson {
    top: 38%;
    right: 7%;
    position: absolute;
}

div.addtoexamfocusoff {
    top: 10%;
    right: 40%;
    position: absolute;
}

div.removefromexamfocuson {
    bottom: 38%;
    left: 5%;
    position: absolute;
}

div.removefromexamfocusoff {
    position: absolute;
    left: 40%;
    bottom: 10%;
}

expandgradeview {
    bottom: 45%;
    position: absolute;
    right: 45%;
    transform-origin: bottom right;
}

expandexamview {
    left: 45%;
    position: absolute;
    top: 45%;
    transform-origin: top left;
}



.sortedcolumn {
    box-shadow: inset 1px 1px 2px 1px rgba(0,0,0,0.2), inset -1px -1px 2px 1px rgba(0,0,0,0.2);
}



/* divider for account exam and attempts lists */
hr.line2 {
    border-top: 3px double #8c8b8b;
}

hr.line13 {
    border: 0;
    box-shadow: 0 10px 10px -10px #8c8b8b inset;
    height: 10px;
}

hr.line18 {
    height: 30px;
    border-style: solid;
    border-color: #8c8b8b;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}

    hr.line18:before {
        border-color: #8c8b8b;
        border-radius: 20px;
        border-style: solid;
        border-width: 0 0 1px 0;
        content: "";
        display: block;
        height: 30px;
        margin-top: -31px;
    }

.h-divider {
    border-top: 1px solid gray;
    height: 1px;
    margin-bottom: 5px;
    margin-top: 5px;
    width: 100%;
}

.divider {
    display: table;
    font-size: 16px;
    margin: 0px auto;
    text-align: center;
    width: 75%;
}

    .divider span {
        display: table-cell;
        position: relative;
    }

        .divider span:first-child, .divider span:last-child {
            background-position: 0 0, 0 100%;
            background-repeat: no-repeat;
            background-size: 100% 2px;
            top: 23px;
            width: 50%;
        }

        .divider span:first-child {
            background-image: linear-gradient(90deg, transparent, #000);
        }

        .divider span:nth-child(2) {
            color: #000;
            padding: 0px 4px;
            top: 13px;
            white-space: nowrap;
            width: auto;
        }

        .divider span:last-child {
            background-image: linear-gradient(90deg, #000, transparent);
        }



.disabled_control {
    opacity: 0.5;
    pointer-events: none;
}

.hidden_control {
    visibility: hidden;
}

.disabled_tab {
    color: darkgray !important;
    background: inherit;
    /*opacity: 0.5;*/
    pointer-events: none;
}


.slidenavcontrols > .slidenavdirection > .w3-left, .w3-right {
    cursor: pointer;
}

.slidenavcontrols > .slidenavdots > .w3-badge {
    cursor: pointer;
    height: 13px;
    margin: 2px;
    padding: 0px;
    width: 13px;
}

.mySlides {
    display: none
}



/*home page ?? */
html, body, h1, h2, h3, h4 {
    font-family: "Lato", sans-serif;
}

body {
    font-weight: normal;
    font-size: 100%;
    font-family: sans-serif;
}


.h1_home {
    margin-bottom: -5px;
    /* margin: 0;
    padding: 0; */
}
.h1_home:focus {
    outline: none;
}

.mobile_break {
  display: inline;
}
@media only screen and (max-width: 601px) {
    .mobile_break  {
        display: block;
        text-align: center;
    }
    .mobile_center {
        text-align: center;
    }
}

/* formatting of math functions, fractions, etc. */
.fractable {
    border-collapse: collapse;
    display: inline-table;
    font-family: sans-serif;
    font-size: 100%;
    font-stretch: normal;
    vertical-align: middle;
}

.fracfloor {
    padding: 0px 2px 0px 0px;
    text-align: center;
    vertical-align: middle;
}

.fracnumer {
    border-bottom: solid 1px;
    font-size: 75%;
    padding: 0px 0px;
    text-align: center;
    vertical-align: bottom;
}

.fracdenom {
    font-size: 75%;
    font-stretch: normal;
    padding: 0px 0px;
    text-align: center;
    vertical-align: top;
}

.tallpar {
    font-family: Calibri;
    font-size: 150%;
    font-weight: 100;
    padding-bottom: 5px;
    padding-left: 0px;
    vertical-align: middle;
}

.mathpar {
    font-family: sans-serif;
    font-size: 100%;
    font-weight: normal;
    padding: 0px;
}

.mathoper {
    font-family: cambria math;
    font-size: 100%;
    vertical-align: middle;
}

.mathbox {
    font-family: cambria math;
    font-size: 30px;
    vertical-align: middle;
}

.mathoperdiv {
    font-family: cambria math;
    font-size: 100%;
    vertical-align: middle;
}

.enclosedtable {
    border-collapse: collapse;
    display: inline-table;
    font-family: sans-serif;
    font-size: 100%;
    font-stretch: normal;
    vertical-align: middle;
}

span.overtext {
    display: inline-block;
    text-align: center;
}

    span.overtext > sup, span.overtext > sub {
        display: block;
        font: inherit;
    }

    span.overtext > sup {
        padding: 0px;
        transform: translate(0px,20px);
        vertical-align: bottom;
    }

    span.overtext > sub {
        padding: 0px 0px;
        vertical-align: top;
    }

    span.overtext > span {
        display: none;
    }



/*original circular multiple choice label */
.mclabel {
    display: block;
    padding: 2px;
    padding-left: 22px;
    position: relative;
}

    .mclabel input {
        display: none;
    }

    .mclabel span.circlerb {
        border: 1px solid #000000;
        border-radius: 100%;
        font-size: 10pt;
        height: 15px;
        left: 0;
        line-height: 1;
        margin-top: -7.5px;
        overflow: hidden;
        position: absolute;
        text-align: center;
        top: 50%;
        width: 15px;
    }


    .mclabel input:checked + span {
        background: #ccf;
        border-color: #ccf;
    }

.answertable, .answerth, .answertr, .answertd {
    border: 1px solid black;
    border-collapse: collapse;
    font-family: sans-serif;
    font-size: 100%;
    font-stretch: normal;
    text-align: center;
    vertical-align: middle;
}



#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }



/*Icons*/
.eogi {
    font: var(--fa-font-regular);
    font-weight: normal;
}

.eogi_brand {
    font: var(--fa-font-regular);
    font-weight: normal;
}

.eogi_light {
    font: var(--fa-font-regular);
    font-weight: lighter !important;
}

.eogi_solid {
    font: var(--fa-font-solid);
/*    font-weight: 900 !important;*/
}

.eogi_privacy::before {
    content: "\e248";
}

.eogi_termsofservice::before {
    content: "\f70e";
}

.eogi_copyright::before {
    content: "\f1f9";
}

.eogi_correct::before {
    content: "\f00c";
}

.eogi_wrong::before {
    content: "\f00d";
}

.eogi_search::before {
    content: "\f002";
}

.eogi_emailverified::before {
    content: "\e4e8";
}

.eogi_rotateleft::before {
    content: "\f2ea";
}

.eogi_floopypen::before {
    content: "\e182";
}

.eogi_floopyarrow::before {
    content: "\e180";
}

.eogi_dismiss::before {
    content: "\f00d";
}

.eogi_users::before {
    content: "\f0c0";
}

.eogi_userout::before {
    color: red;
    content: "\f506";
}

.eogi_cc_stripe::before {
    content: "\f1f5";
}

.eogi_sort::before {
    content: "\f0dc";
}

.eogi_registerusersubscribe::before {
    /*color: white;*/
    content: "\f007";
    /*content: "\f2bd";*/
}

.eogi_usersubscribe::before {
    color: black;
    content: "\f007";
    /*content: "\f2bd";*/
}

.eogi_userin::before {
    color: mediumseagreen;
    content: "\f007";
    /*content: "\f2bd";*/
}

.eogi_userplus::before {
    content: "\f234";
}

.eogi_addresscard::before {
    content: "\f2bb";
}

.eogi_userpen::before {
    content: "\f4ff";
}

.eogi_shareall::before {
    content: "\f14d";
}

.eogi_arrowdowntobracket::before {
    content: "\e094";
}

.eogi_savefloppypen::before {
    content: "\e182";
}

.eogi_inputtext::before {
    content: "\e1bf";
    font-size: 120%;
}

.eogi_email::before {
    content: "\f0e0";
}

.eogi_locked::before {
    content: "\f023";
}

.eogi_unlocked::before {
    content: "\f3c1";
}

.eogi_userlock::before {
    content: "\f502";
}


.eogi_loginemail::before {
    content: "\f0e0";
    font-size: 120%;
}

.eogi_loginuser::before {
    content: "\f406";
    font-size: 120%;
}

.eogi_loginkey::before {
    content: "\f084";
    font-size: 120%;
}

.eogi_usersecret::before {
    content: "\f21b";
    font-size: 120%;
}

.eogi_mask::before {
    content: "\f6fa";
}

.eogi_2fa::before {
    content: "\f87a"; /*devices*/
    /*content: "\e3b4";*/ /*keys*/
    font-size: 120%;
}

.eogi_loginactionright::before {
    content: "\f090";
}

.eogi_loginactionleft::before {
    content: "\e669";
}

.eogi_logoutright::before {
    content: "\f08b";
}

.eogi_logoutleft::before {
    content: "\e668";
}

.eogi_spin::before {
    content: "\f0e2";
}

.eogi_bell::before {
    content: "\f0f3";
}

.eogi_rectlist::before {
    content: "\f022";
}

.eogi_mclist::before {
    content: "\e1d0";
}

.eogi_eye::before {
    content: "\f06e";
}

.eogi_eyeslash::before {
    content: "\f070";
}

.eogi_screenusers::before {
    content: "\f63d";
}

.eogi_plus::before {
    content: "\2b";
}

.eogi_pluslarge::before {
    content: "\e59e";
}

.eogi_sqcheck::before {
    content: "\f14a";
}

.eogi_square::before {
    content: "\f0c8";
}

.eogi_tags::before {
    content: "\f02c";
}

.eogi_envelope::before {
    content: "\f0e0";
}

.eogi_question::before {
    content: "\3f";
}

.eogi_paperplane::before {
    content: "\f1d8";
}

.eogi_circlearrowleft::before {
    content: "\f0a8";
    font-size: 24px;
}

.eogi_circlearrowright::before {
    content: "\f0a9";
    font-size: 24px;
}

.eogi_listol::before {
    content: "\f0cb";
}

.eogi_heart::before {
    content: "\f004";
}

.eogi_flag::before {
    content: "\f024";
}

.eogi_gaugeh::before {
    content: "\f62a";
}

.eogi_layers::before {
    content: "\f5fd";
}

.eogi_tools::before {
    content: "\e206";
}

.eogi_collection::before {
    content: "\e237";
}

.eogi_download::before {
    content: "\f019";
}

.eogi_pdffile::before {
    content: "\f1c1";
}

.eogi_backwardrewind::after {
    content: "\f049";
}

.eogi_play::before {
    content: "\f04B";
}

.eogi_linegraphup::before {
    content: "\e0e5";
}

.eogi_trashcan::before {
    content: "\f2ed";
}

.eogi_info::before {
    content: "\f129";
}

.eogi_circleinfo::before {
    content: "\f05a";
}

.eogi_sliders::before {
    content: "\f1de";
}

.eogi_gear::before {
    content: "\f013";
}

.eogi_gears::before {
    content: "\f085";
}

.eogi_arrowuprightsquare::before {
    content: "\f08e";
}

.eogi_arrowleft::before {
    content: "\f060";
    font-size: 15px;
}

.eogi_arrowright::before {
    content: "\f061";
    font-size: 15px;
}

.eogi_verifyresponse::before {
    content: "\f0ae";
}

.eogi_verifyresponseon::before {
    color: orange;
}

.eogi_verifyresponseoff::before {
}

.eogi_circlecheck::before {
    content: "\f058";
}

.eogi_qnflagon::before {
    color: orange;
    content: "\f024";
}

.eogi_qnflagonv::before {
    color:mediumvioletred;
    content: "\f024";
}

.eogi_qnflagoff::before {
    content: "\f024";
}

.eogi_qnfavoriteon::before {
    color: deeppink;
    content: "\f004";
}

.eogi_qnfavoriteoff::before {
    content: "\f004";
}

/*Answered status icons */
.eogi_circle::before {
    content: "\f111";
}

.eogi_sqcaretup::before {
    content: "\f151";
}

.eogi_sqcaretdown::before {
    content: "\f150";
}

.eogi_maximize::before {
    content: "\f31e";
}

.eogi_toasticon {
    display: inline-block;
    margin-top: 5px;
    margin-right: 10px;
    transform: scale(1.3);
}

.eogi_toasticon_Info::before {
    color: blue;
    content: "\f05a";
}

.eogi_toasticon_Success::before {
    color: limegreen;
    content: "\f058";
}

.eogi_toasticon_Warning::before {
    color: gold;
    content: "\f071";
}

.eogi_toasticon_Error::before {
    color: red;
    content: "\e12e";
}

.eogi_gradearrowright::before {
    content: "\f061";
    font-size: 2rem;
}



/* below are from VS Blazor template  */
/*html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}*/

/*a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}*/