@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700;800;900&display=swap');

@font-face {
    font-family: 'Montserrat-Local-Bold';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/Montserrat-Bold.ttf') format("truetype");
}

.uui-center {
    display: flex;
    justify-content: center;
}

.uui-heading {
    font-family: Montserrat, sans-serif;
    font-weight: bold;
    color: #43B3AE;
}

.uui-form label {
    color: #43B3AE;
}

.uui-center-div {
    font-family: Montserrat, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uui-form input {
    border: 2px solid #43B3AE;
    background: #fff;
    border-radius: 5px;
}

/** generic button css **/

.uui-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    left: -12px;
    width: 40px;
    height: 40px;
    padding: 6px;
    box-shadow: 2px 0px 3px 0px rbga(0,0,0,0.5);
    border-radius: 5px;
}

.uui-button-icon {
    width: 25px;
    height: 25px;
    display: block;
    font-size: 25px;
}

.uui-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px;
    color: white;
    font-size: 16px;
    line-height: 16px;
    border-radius: 5px;
    margin: 5px 10px;
}

.uui-button .fa {
    margin-right: 5px;
}

.uui-envelope-icon {
    background: url('../img/ui-icons/envelope-of-white-paper.svg') no-repeat center center/cover;
}

.uui-arrow-right-icon {
    background: url('../img/ui-icons/arrow-pointing-to-right.svg') no-repeat center center/cover;
}

.uui-edit-solid-icon {
    background: url('../img/ui-icons/edit-solid.svg') no-repeat center center/cover;
}

.uui-close-icon {
    background: url('../img/ui-icons/close-svg.svg') no-repeat center center/cover;
}

.uui-orange {
    background: #FF6700;
    border: 2px solid #C65000;
}

.uui-orange .uui-icon-container {
    background: #FF6700 no-repeat center center/cover;
    border: 2px solid #C65000;
}

.uui-student-button {
    margin-bottom: 10px;
}

/** submit button specific css **/
.uui-submit .uui-icon-container {
    background: #30BF30 no-repeat center center/cover;
    border: 2px solid #0F990F;
}

.uui-button.uui-submit {
    background: #30BF30;
    border: 2px solid #0F990F;
}

.uui-submit-icon {
    background: url('../img/ui-icons/lightbulb-svg.svg') no-repeat center center/cover;
}

.uui-orange-button {
    background: #FF6700;
    color: #fff;
    border: 2px solid #C65000;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.uui-orange-button .uui-icon-container {
    background: #FF6700 no-repeat center center/cover;
    border: 2px solid #C65000;
}

.uui-teal-button {
    background: #43B3AE;
    color: #fff;
    border: 2px solid #0A8B86;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.uui-teal-button .uui-icon-container {
    background: #43B3AE no-repeat center center/cover;
    border: 2px solid #0A8B86;
}

.uui-blue-button {
    background: #0000FF;
    color: #fff;
    border: 2px solid #0000A6;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.uui-blue-button .uui-icon-container {
    background: #0000FF no-repeat center center/cover;
    border: 2px solid #0000A6;
}

.uui-red-button {
    background: #BF3030;
    color: #fff;
    border: 2px solid #990F0F;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.uui-red-button .uui-icon-container {
    background: #BF3030 no-repeat center center/cover;
    border: 2px solid #990F0F;
}

.uui-green-button {
    background: #30BF30;
    color: #fff;
    border: 2px solid #0F990F;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.uui-green-button .uui-icon-container {
    background: #30BF30 no-repeat center center/cover;
    border: 2px solid #0F990F;
}

.uui-list-icon {
    background: url('../img/ui-icons/list-alt-regular.svg') no-repeat center center/cover;
}

.uui-printing-icon {
    background: url('../img/ui-icons/printing-tool.svg') no-repeat center center/cover;
}

.uui-plus-icon {
    background: url('../img/ui-icons/plus-black-symbol.svg') no-repeat center center/cover;
}

.uui-chevron-icon {
    background: url('../img/ui-icons/double-left-chevron.svg') no-repeat center center/cover;
}

.uui-save-icon {
    background: url('../img/ui-icons/save-regular.svg') no-repeat center center/cover;
}

.uui-search-icon {
    background: url('../img/ui-icons/search-solid.svg') no-repeat center center/cover;
}

/** continue button specific css **/

.uui-continue .uui-icon-container {
    background: #30BF30 no-repeat center center/cover;
    border: 2px solid #0F990F;
}

.uui-button.uui-continue {
    background: #30BF30;
    border: 2px solid #0F990F;
}

.uui-continue-icon {
    background: url('../img/ui-icons/arrow-pointing-to-right.svg') no-repeat center center/cover;
}

/** back button specific css **/

.uui-back .uui-icon-container {
    background: #FF6700 no-repeat center center/cover;
    border: 2px solid #C65000;
}

.uui-button.uui-back {
    background: #FF6700;
    border: 2px solid #C65000;
}

.uui-back-icon {
    background: url('../img/ui-icons/logout-svg.svg') no-repeat center center/cover;
}

/** help button specific css **/

.uui-help .uui-icon-container {
    background: #BF3030 no-repeat center center/cover;
    border: 2px solid #990F0F;
}

.uui-button.uui-help {
    background: #BF3030;
    border: 2px solid #990F0F;
}

.uui-help-icon {
    background: url('') no-repeat center center/cover;
}

/** blue button specific css **/

.uui-blue .uui-icon-container {
    background: #0000FF no-repeat center center/cover;
    border: 2px solid #0000A6;
}

.uui-button.uui-blue {
    background: #0000FF;
    border: 2px solid #0000A6;
}

.uui-show-translation {
    background: #0000FF;
    border: 2px solid #0000A6;
    margin: auto;
}

.uui-close-icon {
    background: url('../img/ui-icons/close-svg.svg') no-repeat center center/cover;
}

.uui-check-icon {
    background: url('../img/ui-icons/check-svg.svg') no-repeat center center/cover;
}

.uui-pencil-icon {
    background: url('../img/ui-icons/pencil-hand-svg.svg') no-repeat center center/cover;
}

.uui-button.uui-teal {
    background: #43B3AE;
    border: 2px solid #0A8B86;
}

    .uui-button.uui-teal .fa-angle-right {
        margin-left: 5px;
        margin-right: 0;
    }

    .uui-button.uui-teal .fa-angle-left {
        margin-right: 5px;
    }

.uui-icon-eye {
    background: url('/Content/img/ui-icons/eye-open.svg') no-repeat center center/cover;
    height: 25px;
    width: 25px;
    margin-top: 5px;
}

.uui-button.uui-activity-help {
    justify-content: center;
    background-color: #7058C3;
    height: 40px;
    width: 40px;
    padding: 0;
    border: 2px solid #553BAE;
    margin-left: 0;
}

.uui-activity-help-icon {
    background: url('/Content/img/ui-icons/keys-svg.svg') no-repeat center center/cover;
    height: 25px;
    width: 25px;
}

html {
    font-family: Montserrat, sans-serif !important;
    font-size: 16px;
}

body {
    font-size: 1rem;
    font-family: inherit;
}

*, :before, :after {
    font-family: inherit;
}

#shortAnswer {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
}

#descriptionText, #questionTextDiv span {
    font-size: 18px !important;
    font-family: "Montserrat", sans-serif;
}

.header-label {
    font-weight: 400;
}

.mc-label, .mc-label span {
    font-family: "Montserrat", sans-serif !important;
    font-size: 16px !important;
}

/* Event CSS */
#bothForms .alert.alert-warning {
    padding: 20px 50px;
    background: #EBF7F7;
    border-color: #43B3AE;
    color: #000 !important;
}

/* #region Registration */
.registrationContainer {
    display: flex;
    width: 80%;
    flex-direction: column;
    margin: 0 auto;
    margin-top: 20px;
    font-size: 18px;
}

    .registrationContainer .formBoxHeader {
        margin-top: 0px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: .5px solid #70707040;
        font-weight: bold;
    }

        .registrationContainer .formBoxHeader h2,
        .registrationContainer .formBoxHeader h4 {
            font-weight: bold;
        }

    .registrationContainer .form-control {
        font-size: 18px;
    }

    .registrationContainer textarea {
        margin: 0 .75rem;
        width: 100%;
    }

    .registrationContainer select {
        padding-top: 4px;
    }

    .registrationContainer .required-field input:not(.chosen-search-input),
    .registrationContainer .required-field select,
    .registrationContainer .required-field textarea {
        border-left: 6px solid !important;
    }

        .registrationContainer .required-field input:invalid,
        .registrationContainer .required-field select:invalid,
        .registrationContainer .required-field textarea:invalid {
            border-left-color: #FD5F63 !important;
        }

    .registrationContainer .chosen-container .chosen-drop {
        border: none;
    }

    .registrationContainer .form-check-label {
        font-weight: normal;
    }

    .registrationContainer .form-check-input {
        margin-right: 20px;
    }

    /* #region Registration Radio Button */
    .registrationContainer input[type='radio'] {
        -webkit-appearance: none;
        width: 17px;
        height: 17px;
        border: 1px solid darkgray;
        border-radius: 50%;
        outline: none;
    }

        .registrationContainer input[type='radio']:hover {
            box-shadow: 0 0 5px 0px #43B3AE inset;
        }

        .registrationContainer input[type='radio']:before {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        .registrationContainer input[type='radio']:checked:before {
            filter: hue-rotate(0deg) brightness(1.1);
            background: #43B3AE;
        }
    /* #endregion Registration Radio Button */

    .registrationContainer input[type='checkbox'] {
        min-width: 17px !important;
        height: 17px;
    }

        .registrationContainer input[type='checkbox']:checked {
            filter: hue-rotate(320deg) brightness(1.45)
        }

    .registrationContainer input[type='radio'] + span,
    .registrationContainer input[type='checkbox'] + span {
        vertical-align: top;
    }

    .registrationContainer input[type='checkbox'] + span {
        margin-left: 5px;
    }

/* #region Registration Heading */
.registration-heading-wrapper {
    width: 100%;
    display: flex;
    margin-bottom: 35px;
}

.registration-heading-text-wrapper {
    flex: 0 0 35vw;
    border: 2px solid #43b6b1;
    border-radius: 8px;
    background: rgba(255,255,255,0.75);
}

.registration-heading {
    font-family: Montserrat, sans-serif;
    font-weight: 900;
    color: #43b6b1;
    text-transform: uppercase;
    font-size: 2vw;
}

.registration-heading-wrapper .line {
    height: 10px;
}

.fading-line-container {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
}

.line.long-light-line {
    width: 76%;
    background: #e1eae7;
}

.line.light-line {
    width: 8%;
    background: #d7f0f2;
}

.line.medium-line {
    width: 8%;
    background: #9ee2e1;
}

.line.dark-line {
    width: 8%;
    background: #3eafa9;
}

@@media screen and (max-width: 450px) {
    .registration-heading-text-wrapper {
        flex: 0 0 200px;
    }

    .registration-heading {
        font-size: 3vw;
    }

    .line.long-light-line {
        width: 79%;
        background: #e1eae7;
    }

    .line.light-line {
        width: 7%;
        background: #d7f0f2;
    }

    .line.medium-line {
        width: 7%;
        background: #9ee2e1;
    }

    .line.dark-line {
        width: 7%;
        background: #3eafa9;
    }
}
/*#endregion Registration Heading*/

.registrationContainer .alert-warning {
    padding: 20px 50px;
    background: #EBF7F7;
    border-color: #43B3AE;
    color: #000 !important;
}

.alert-light {
    color: #000;
    background-color: #fefefe;
    border: none; /* reset border */
    border-color: #fdfdfe;
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
    padding: 2rem;
}

    .alert-light label {
        margin: .25rem;
        font-size: 18px;
    }

.teal-border-top {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-top: 10px solid #43b6b1;
}

.orange-border-top {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-top: 10px solid #FFA65F;
}

.red-border-top {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-top: 10px solid #BF3030;
}

.registrationContainer .header-with-button {
    display: flex;
    justify-content: space-between;
}
/* #endregion Registration */


/* #region Teal Curved Table */
.teal-table.table-curved {
    border-collapse: separate;
    border: none;
}

    .teal-table.table-curved th {
        color: white;
        background-color: #43B3AE;
        border-top: 2px solid #0A8B86 !important;
        border-bottom: none !important;
    }

        .teal-table.table-curved th:first-child {
            border-radius: 6px 0 0 0;
            border-left: 2px solid #0A8B86 !important;
        }

        .teal-table.table-curved th:last-child {
            border-radius: 0 6px 0 0;
            border-right: 2px solid #0A8B86 !important;
        }

        .teal-table.table-curved th:only-child {
            border-radius: 6px 6px 0 0;
        }

    .teal-table.table-curved tr:last-child td:first-child {
        border-radius: 0 0 0 6px;
    }

    .teal-table.table-curved tr:last-child td:last-child {
        border-radius: 0 0 6px 0;
    }

.teal-table.table-bordered > tbody > tr > td:first-child {
    border-left: 2px solid #D1D1D1;
}

.teal-table.table-bordered > tbody > tr > td:last-child {
    border-right: 2px solid #D1D1D1;
}

.teal-table.table-bordered > tbody > tr:last-child > td {
    border-bottom: 2px solid #D1D1D1;
}
/* #endregion Teal Curved Table*/

/** error page specific css **/
.error-page-content {
    margin-top: -10px;
    position: relative;
    height: 100vh;
}

@media screen and (min-width: 767px) {
    .error-page-content {
        margin-top: 0;
        margin-left: 300px;
    }
}

a.accessibility-link {
    margin-top: 10px;
    color: #44b3ad;
    text-transform: uppercase;
}

/* #region regristration modals */
.registrationContainer .modal-content {
    border-radius: 5px
}

.registrationContainer .modal-header {
    background-color: #43B3AE;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 5px 5px 5px 15px;
    border-top-left-radius: 4px;
}

.registrationContainer .pull-right.canclick {
    height: 40px;
    width: 40px;
    background: #43B3AE;
    position: absolute;
    right: -4px;
    top: -2px;
    display: flex;
    align-content: center;
    justify-content: center;
    border-radius: 5px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    border: 2px solid #0A8B86;
    color: #fff;
    opacity: 1;
    font-size: 25px;
    vertical-align: middle;
}

.registrationContainer .uui-icon {
    background: url('../../Content/img/ui-icons/contact-us-svg.svg') no-repeat center center/cover;
    height: 25px;
    width: 25px;
    margin-top: 6px;
}

.registrationContainer .modal-header .modal-title {
    color: #fff;
    font-family: Montserrat, sans-serif;
}
/* #endregion registration modals*/

/* local hosted fonts */

.montserrat-local-bold {
    font-family: 'Montserrat-Local-Bold', sans-serif;
}

/* essay questions */

.tab-pane.active {
    transform: none;
}

#essayExtras .active {
    transform: none;
}

.essayTREEButtons button {
    min-height: 50px;
}

.essayTREEButtons .uui-help .uui-icon-container, .essayTREEButtons .uui-orange .uui-icon-container, .essayTREEButtons .uui-submit .uui-icon-container {
    border: 0;
    left: -6px;
}

/* Custom datatables CSS */
.dataTables_processing {
    padding: 5px;
    border-radius: 3px;
    background: #fff;
    border: 1px solid #ccc;
}

/* Writing Transcription Forms */
.scoreRevision.form-control {
    width: 100px;
}

.scoreContainer {
    display: flex;
}

.scoreContainer span {
    margin-right: 10px;
}