@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,400;0,700;0,800;1,400;1,800&display=swap');

@font-face {
    font-family: "Nunito Sans";
    src: url("fonts/NunitoSans-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

html {
    font-family: 'Nunito Sans', sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}


html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 10px;1
    margin-right: 10px;
}

body {
    font-family: "Nunito Sans";
    font-size: 14px;
    line-height: 1.42857143;
    color: #545759;
    background-color: white;
}

a:hover {
    text-decoration: underline !important;
}

h1 {
    font-size: 2rem;
    font-weight: 800;
    color: #002f86;
    margin-top: 20px;
    margin-bottom: 20px;
}

h2 {
    font-size: 1.5rem;
    color: #000;
    font-weight: 800;
    letter-spacing: normal;
    text-transform: none;
    margin-top: 20px;
    margin-bottom: 20px;
}

h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #545759;
    letter-spacing: normal;
    text-transform: none;
    margin-top: 20px;
    margin-bottom: 20px;
}

h4 {
    font-size: 1rem;
    font-weight: 800;
    color: #000;
    letter-spacing: normal;
    text-transform: none;
    margin-top: 10px;
    margin-bottom: 10px;
}

h5 {
    font-size: 1.25rem;
    color: #000;
    font-weight: 800;
    letter-spacing: normal;
    text-transform: none;
}

h6 {
    font-size: 1rem;
    font-weight: 600;
    color: #000;
    letter-spacing: normal;
    text-transform: none;
}

ul {
    list-style-type: none;
}

:focus {
    outline-color: #f38a00 !important;
    outline-width: thin !important;
}

#divLogo {
    padding-bottom: 20px;
}

/* #region Navbar styles */
.navbar-header {
    border-bottom: 1px solid rgba(255,255,255, 0.1);
}

.alert-light {
    color: #545759 !important;
    background-color: #f8f8f8 !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    line-height: 2 !important;
}

 

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 0.9em;
    height: 2.5rem;
}

 .content-wrap {
    padding-bottom: 2.5rem; /* Footer height */
}
/* #endregion */

.page-container {
    position: relative;
    min-height: 1vh;
    margin-left: 1vh;
}

/* #region custom Kendo UI styles */
#configure {
    display: none;
}

/*.k-widget {
    min-width: 100px !important;
}
*/
.k-panelbar .k-content {
    padding: 20px;
}


/**/
.k-state-active .label {
    font-size: 1em;
}

/* #endregion */

@media (max-width: 767px) {
    #responsive-panel {
        transition: all linear .2s;
    }

    #configure {
        display: block;
        float: right;
    }

    .k-rpanel {
        width: 100%;
    }

    .k-rpanel-expanded {
        margin-top: 1rem;
    }

    .navbar-header {
        width: 100%;
    }

    .footer {
        height: 60px;
    }

    .k-menu .k-item,
    .k-menu .k-link {
        width: 100%;
    }

    .k-menu .k-link {
        box-sizing: border-box;
    }
}

.k-invalid-msg {
    color: #d0021b !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-transform: none !important;
}

.required-star::after {
    content: " *";
    color: #dc3545;
    font-weight: bold;
}

.required::before {
    content: "*";
    font-weight: bold;
    color: #d0021b;
    position: relative;
}

.radio-required-label.required:after {
    content: "*";
    color:red;
}

.radio-required-label.required:before {
    content: "";
}


.not-required::before {
    content: "*";
    font-weight: bold;
    color: white;
    position: relative;
}

/**/
.k-floating-label-container {
    width: 100%;
}

.red {
    color: #d0021b;
}

.error{
    color:red;
    font-size:18px;

}
/*
#divLoader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 120px;
    height: 120px;
    margin: -76px 0 0 -76px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}*/

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Add animation to "page content" */
.animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s
}

@-webkit-keyframes animatebottom {
    from {
        bottom: -100px;
        opacity: 0
    }

    to {
        bottom: 0px;
        opacity: 1
    }
}

@keyframes animatebottom {
    from {
        bottom: -100px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

#divLogo {
    align-content: center;
    text-align: center;
    width: 100%;
}

.contentcenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    /* padding-right: 20px; */
}

.logo-print .logo-web {
    visibility: visible;
}

@media screen {
    .logo-print {
        visibility: hidden;
    }

    .logo-web {
        visibility: visible;
    }
}

@media print {
    .logo-print {
        visibility: visible;
    }

    .logo-web {
        visibility: hidden;
    }
}




.print {
    font-weight: normal;
   
    font-size: small;
    font-family: 'Nunito Sans';
}



 
.top-buffer {
    margin-top: 20px;
}


 


input[type='checkbox'] {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 0px;
    border: 1px solid #b2b3b2;
    outline: none;
    margin: 4px;
}

    input[type='checkbox']:checked {
        background: #f38a00;
    }

#divSummary b {
    color: black;
    font-size: 16px;
}

.k-checkbox::before {
    color: #000 !important;
}

.k-checkbox:focus {
    box-shadow: #f38a00 0px 0px 0px 1px !important;
}

.boldcenter {
    font-weight: bold;
    text-align: center;
    font-family:'Nunito Sans';
}

.white {
    color: white;
}
 
     

.k-textbox {
    height: 40px !important;
    padding: 5px 12px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.42857143 !important;
    color: #555555 !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #b2b3b2 !important;
    border-radius: 3px !important;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !important;
}

    .k-textbox:focus {
        box-shadow: none !important;
        border-color: #b35e09 !important;
    }

    .k-textbox:focus-within {
        border-color: #b35e09 !important;
        box-shadow: none !important;
    }

.k-datepicker, .k-picker-wrap.k-state-focused {
    border-color: #b35e09 !important;
    box-shadow: none !important;
}
 

.k-label, .k-input-label,
.k-form-field {
    text-transform: none;
    letter-spacing: 0;
    font-size: 18px;
    font-weight: normal;
}

label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 18px;
    font-weight: normal;
}

 
.k-form-field {
    font-size: 18px;
    font-weight: 800;
    display: block;
    margin-top: 0;
    margin-bottom: 11px;
    letter-spacing: 2px;
    color: #545759;
}

.k-input {
    font-size: 18px !important;
    font-weight: 400 !important;
    font-family: "nunito sans" !important;
    letter-spacing: 0px !important;
}


.k-dropdown, .k-dropdown-wrap {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.42857143 !important;
    color: #555555 !important;
    background-color: #ffffff !important;
    background-image: none !important;
    /* border: 1px solid #b2b3b2 !important; */
    border-radius: 3px !important;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !important;
}

.k-dropdown {
    text-transform: none !important;
}

.k-dropdown, .k-input {
    color: #000 !important;
}

.manualentry {
    color: #002f86 !important;
    background: #f38a00 !important;
}

    .manualentry:hover {
        color: #002f86 !important;
        background: #f38a00 !important;
    }

.k-dropdown-wrap {
    border-radius: 3px !important;
    border: 1px solid #b2b3b2 !important;
}

.transcript {
    color: #002f86 !important;
    background: #f38a00 !important;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-top: 5px;
}

    .transcript:hover {
        color: #002f86 !important;
        background: #f38a00 !important;
    }

.k-calendar td.k-state-selected .k-link {
    border: 0px !important;
    color: #002f86 !important;
    background-color: #f38a00 !important;
    background-image: none !important;
    box-shadow: none !important;
    font-weight: 800;
}

.k-nav-today {
    color: #002f86 !important;
}

.k-calendar {
    font-family: "nunito sans" !important;
}

    .k-calendar td.k-state-hover .k-link {
        border: 0px !important;
        background-color: #002f86 !important;
        color: #fff !important;
        background-image: none !important;
        font-weight: 800;
    }

    .k-calendar .k-today .k-link {
        color: #f38a00 !important;
        box-shadow: none !important;
        font-weight: 800 !important;
    }

/*progress bar */
.k-progressbar .k-state-selected {
    background-color: #f38a00 !important;
    border-color: #002f86 !important;
}

.k-progressbar {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #fff !important;
    margin-left: 5px !important;
    min-width: 320px !important;
    height: 30px;
    border-width: 2px;
    border-color: #545759 !important;
}

#divProgressBar {
    font-size: 1.25em;
    font-weight: 600;
    margin-top: 20px;
}



/* selected item in dropdown */
.k-list-optionlabel.k-state-selected {
    color: #fff !important;
    background-color: #002f86 !important;
    border-radius: 0px !important;
    border: 0px !important;
}

/* dropdown list background and border */
.k-list-container {
    border-color: #b2b3b2 !important;
    background-color: #fff !important;
}

.k-list .k-item.k-state-hover.k-state-selected, .k-list .k-item:hover.k-state-selected {
    background-color: #002f86 !important;
    box-shadow: none !important;
    border: none !important;
}

.k-state-border-down {
    box-shadow: none !important;
}


/**/
.k-popup .k-list .k-item {
    padding: 8px !important;
}

.k-list .k-item.k-state-selected {
    background-color: #002f86 !important;
    box-shadow: none !important;
    border-radius: 0px !important;
}

.k-list .k-item.k-state-focused.k-state-selected {
    box-shadow: none !important;
}

.k-state-selected {
    background-image: none !important;
}

.k-dropdown .k-dropdown-wrap.k-state-focused {
    box-shadow: none !important;
}

/* dropdown list highlighted item */
.k-list .k-item.k-state-hover, .k-list .k-item:hover {
    color: #fff !important;
    background-color: #002f86 !important;
    border-radius: 0px !important;
    background-image: none !important;
}

.k-dropdown-wrap.k-state-disabled {
    background-color: #000 !important;
    /* color: red !important; */
}

.k-dropdown-wrap.k-state-disabled {
    background-color: #eaeaea !important;
    /* color: red !important; */
    border-color: grey !important;
    opacity: .7;
    /* color: grey !important; */
}

.k-checkbox {
    border-radius: 0px !important;
    border-color: #b2b3b2 !important;
}

    .k-checkbox:checked {
        border-color: #f38a00 !important;
    }

/* trashcan icons */
.remove-school {
    color: #f38a00 !important;
}

/* body text color */
.k-form {
    color: #545759 !important;
}

a {
    color: #002F86 !important;
}

    a:hover {
        color: #002F86 !important;
    }

    a:focus {
        -webkit-box-shadow: inset 0 0 0 1px #f38a00 !important;
        box-shadow: inset 0 0 0 1px #f38a00 !important;
    }

#divMain {
    background-color: #fff;
    -webkit-box-shadow: 0 2px 15px rgba(0,0,0,.1);
    box-shadow: 0 2px 15px rgba(0,0,0,.1);
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    
}

/*main form card */
#divMain {
    background-color: #fff;
    padding: 30px;
}

.k-radio:checked {
    border-color: #b2b3b2 !important;
    color: #f38a00 !important;
    background-color: #fff !important;
}

.k-radio:focus {
    box-shadow: none !important;
    border-color: #b2b3b2 !important;
}

.k-radio {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    border-color: #b2b3b2 !important;
    color: #f38a00 !important;
}

    .k-radio:hover {
        border-color: #b2b3b2 !important;
        color: #f38a00 !important;
    }

.k-radio-list .k-radio-item {
    margin-top: 0px !important;
}

.k-pager-numbers .k-link {
    border-radius: 3px !important;
}

.k-pager-wrap .k-link.k-state-selected {
    background-color: #002f86 !important;
}

.k-form-field-wrap {
    text-transform: none !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
}
#divLoader {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.65);
    justify-content: center;
    align-items: center;
}

/*#divLoader {
    border-top: 16px solid #f38a00 !important;
}*/

.k-fab {
    box-shadow: none !important;
}

.k-fab-pill {
    border-radius: 3px !important;
}

.k-pager-numbers .k-link.k-state-selected {
    border-color: #002f86 !important;
}

/* larger orange highlight used on marketing site box-shadow: ##f38a00 0px 0px 0px 1px; */
.section {
    font-size: 20px;
    background-color: #F0EDED;
    min-height: 40px;
    display: flex;
    align-items: center;
    padding-left:10px;
}
.step-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 24px;
    font-weight: normal;
    line-height: 1;
    color: #fff;
    background-color: #f38a00; /* replace later */
    flex-shrink: 0;
    margin-right:12px;
   
}
.sticky-app-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #fff;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.hp-container {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.radio-row {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.field-wrap {
    height: 100%;
}

.status-not-reviewed {
    color: #c62828;
}

.status-reviewed {
    color: #2e7d32;
}
.status-text{
    font-size:14px;
}
.k-floating-label-container {
    width: 100%;
}

.k-floating-label-container {
    width: 100%;
}

.k-dropdown {
    background: #f38a00;
}



.ssn-field-wrap {
    position: relative;
}

    .ssn-field-wrap .toggle-ssn {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 2;
    }

.contact-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

    .contact-row .radio-col {
        min-width: 260px;
    }

    .contact-row .rep-col {
        min-width: 260px;
        flex: 1;
    }

        .contact-row .rep-col .k-textbox,
        .contact-row .rep-col .k-input,
        .contact-row .rep-col input {
            width: 100% !important;
        }

.contact-inline {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.contact-label {
    margin: 0;
    
}

.container-college {
    display: flex; /* Enables flexbox on the parent */
    justify-content: space-around; /* Distributes items horizontally along the main axis */
    align-items: center; /* Aligns items vertically along the cross axis (centers content relative to each other's height) */
    /* Optional: Add a gap between items */
    gap: 20px;
}

.item {
    /* Add styling to see the divs */
    padding: 15px;
 }

/*.k-expander-sub-title {
    font-size: 14px !important;
}*/

/* default (your current style) */
.document-row .k-expander-sub-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: #1274AC;
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
}

 
.document-row .k-expander-sub-title.reviewed {
    background: #12ac12;
}

/*
.k-expander-sub-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: #1274AC;
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
}

    .k-expander-sub-title:hover {
        background: #f38a00;
    }



    .k-expander-sub-title.reviewed {
        background: #12ac12;
    }*/

.school-detail {
    width: 100%;
    margin: 0 0 10px 0;
    padding: 12px 15px;
    font-size: 15px;
    color: #1f2937;
    background-color: #e8eaed;
    border: 1px solid #d1d5db;
    border-radius: 15px;
    line-height: 1.4;
    box-sizing: border-box;
}

#divValidationSummary {
    position: relative;
    z-index: 9999;
}

#divValidation {
    position: relative;
    z-index: 9999;
}

.k-list .k-item,
.k-list .k-list-item,
.k-popup .k-item,
.k-popup .k-list-item {
    font-size: 18px;
}
.k-picker,
.k-dropdownlist,
.k-combobox,
.k-input-inner,
.k-input-value-text {
    font-size: 18px;
}

p .k-button {
    margin: 0 15px 0 0;
}
.k-button:focus {
    box-shadow: none !important;
    border: 0px !important;
}

.k-button.k-state-hover, .k-button:hover {
    background: #f38a00 !important;
    color: #fff !important;
    background-image: none !important;
    border-color: #f38a00 !important;
    /*border: 0px !important;*/
}

.k-button.k-state-focused, .k-button.k-state-focused.k-state-disabled, .k-button:focus, .k-button:focus:hover, .k-state-disabled .k-button.k-state-focused {
    box-shadow: 0 0 0 1px #f38a00 !important;
    box-shadow: none !important;
    border-color: #f38a00 !important;
    background: #f38a00 !important;
}

.document-row {
    margin-bottom: 16px;
}

    .document-row > [class*="col-"] {
        display: flex;
        align-items: center;
    }

    .document-row .doc-panel-wrapper {
        width: 100%;
    }

    .document-row .doc-status {
        width: 100%;
        text-align: left;
    }

.transcript-print {
    color: black;
    font-weight: bolder;
    text-transform: uppercase;
    font-size: smaller;
    font-family: "Nunito Sans";
}

.highschool-name,
.college-name {
    font-size: 18px;
    font-weight: 700;
   
    line-height: 1.2;
    color: #f38a00
}

.k-input,
.k-picker,
.k-dropdownlist,
.k-combobox,
.k-input-inner,
.k-picker-wrap,
.k-input-values {
    background-color: #fff;
}

.k-dropdownlist:not(.k-disabled),
.k-combobox:not(.k-disabled),
.k-picker:not(.k-disabled),
.k-input:not(.k-disabled),
.k-dropdownlist:not(.k-disabled) .k-input-inner,
.k-combobox:not(.k-disabled) .k-input-inner,
.k-picker:not(.k-disabled) .k-input-inner {
    background-color: #fff !important;
}

.fullname-validator,
.major-validator,
.first-year-validator,
.last-year-validator {
    display: none;
}

#divDocumentsWrapper .document-row .k-expander:focus,
#divDocumentsWrapper .document-row .k-expander.k-focus,
#divDocumentsWrapper .document-row .k-expander.k-state-focused,
#divDocumentsWrapper .document-row .k-expander-header:focus,
#divDocumentsWrapper .document-row .k-expander-header.k-focus,
#divDocumentsWrapper .document-row .k-expander-header.k-state-focused {
    box-shadow: none;
    outline: none;
}
.transcript-pdf-row {
    margin-left: 0;
    margin-right: 0;
}

.transcript-certification-text {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    box-sizing: border-box;
}
#hsTranscriptDocumentContent,
[id^="collegeTranscriptDocumentContent"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 20px;
}

    #hsTranscriptDocumentContent .container,
    [id^="collegeTranscriptDocumentContent"] .container {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    #hsTranscriptDocumentContent .row,
    [id^="collegeTranscriptDocumentContent"] .row {
        margin-left: 0;
        margin-right: 0;
    }

    #hsTranscriptDocumentContent [class*="col-"],
    [id^="collegeTranscriptDocumentContent"] [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

.application-review-content {
    font-size: 12px;
    color: #000;
    box-sizing: border-box;
}

.application-review-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.application-review-logo {
    max-width: 240px;
    height: auto;
    margin-bottom: 10px;
}

.application-review-section {
    margin-top: 18px;
    margin-bottom: 18px;
}

    .application-review-section h5 {
        font-weight: 800;
        color: #000;
        margin-bottom: 8px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 4px;
    }

.application-review-table {
    width: 100%;
    border-collapse: collapse;
}

    .application-review-table td {
        padding: 3px 6px 3px 0;
        vertical-align: top;
    }

.application-review-label {
    width: 210px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: smaller;
    color: #000;
    white-space: nowrap;
}

.application-review-address-label {
    vertical-align: top;
}

.review-confirmation {
    margin-top: 20px;
}

#divDocuments {
    flex-direction: column !important;
}
[id^="programDisclosureContent_"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 20px;
}

    [id^="programDisclosureContent_"] .container {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    [id^="programDisclosureContent_"] .row {
        margin-left: 0;
        margin-right: 0;
    }

    [id^="programDisclosureContent_"] [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    [id^="programDisclosureContent_"] .complianceTitle,
    [id^="programDisclosureContent_"] .ComplianceTitle {
        text-align: center;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    [id^="programDisclosureContent_"] .disclosureText,
    [id^="programDisclosureContent_"] .DisclosureText {
        width: 100%;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
        box-sizing: border-box;
    }

.pdf-selected-radio {
    margin-top: 8px;
    font-weight: 800;
    color: #000;
}

.transcript-header-container {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.k-floating-label-container.required-field .k-label::after,
.required-field-label::after {
    content: " *";
    color: #dc3545;
    font-weight: bold;
}

/* =========================================================
   Landscape-phone overrides.
   Targets phones held sideways (orientation: landscape AND
   height <= 500px). Tablets (height >= 768px) and laptops
   (height >= 600px) do not match this query, so their
   layouts are untouched. Catches even large phones (e.g.
   iPhone Pro Max landscape 932x430) that exceed 767.98px
   wide and would otherwise miss the portrait mobile block.
   ========================================================= */
@media (orientation: landscape) and (max-height: 500px) {

    /* Header: in landscape the vertical viewport is tiny.
       Drop the fixed positioning so the header scrolls away
       with the content, and shrink its inner dimensions. */
    .sticky-app-header {
        position: static !important;
        padding: 2px 0 !important;
    }

    .sticky-app-header img {
        max-height: 32px !important;
        min-height: 0 !important;
    }

    .sticky-app-header h2 {
        font-size: 0.85rem;
        margin-top: 4px;
        margin-bottom: 4px;
    }

    /* Section / step-circle: tighten vertical air. */
    .section {
        margin-top: 4px;
        margin-bottom: 4px;
    }

    /* Contact row: width is back, restore natural side-by-side flex. */
    .contact-row .radio-col,
    .contact-row .rep-col {
        min-width: 220px;
        width: auto;
        flex: 1 1 auto;
    }

    /* Start date dropdown: don't dominate the row. */
    #AdStartDateID {
        width: 60% !important;
    }

    /* School selector: State / School combo / Add back on one row. */
    .container-college {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .container-college .item {
        padding: 4px 0 !important;
        width: auto !important;
        max-width: 100% !important;
        flex: 0 1 auto !important;
    }

    /* Document panels: bring back the 10/2 split so the status
       pill sits beside the title, not below it. */
    .document-row > .col-lg-10,
    .document-row > .col-md-10,
    .document-row > .col-sm-10 {
        flex: 0 0 83.33% !important;
        max-width: 83.33% !important;
        width: 83.33% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .document-row > .col-lg-2,
    .document-row > .col-md-2,
    .document-row > .col-sm-2 {
        flex: 0 0 16.67% !important;
        max-width: 16.67% !important;
        width: 16.67% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Primary action buttons: revert full-width; back to content size. */
    #AddHighSchool,
    #AddCollege,
    #DocumentReview,
    #ProceedToProcessing,
    #SignRedirect {
        width: auto;
    }

    /* Body lateral margin: a touch more breathing room is fine here. */
    body {
        margin-left: 8px;
        margin-right: 8px;
    }

    /* Widen the main content container to ~95% of the viewport so
       divMain has room to fill it. Targets only the .container that
       is a direct child of <main> (the page-content container);
       the header's nested .container is unaffected. */
    main > .container {
        max-width: 95vw !important;
        width: 95vw !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* Reclaim the 30px of internal padding around the main form card
       so the content fills the now-wider parent. */
    #divMain {
        padding: 8px 4px !important;
        width: 100%;
        max-width: 100%;
    }

    /* The three primary degree-info dropdowns are already width:100%
       inside their col-lg-8 wrappers, so widening the *input* does
       nothing -- the visible width is limited by the wrapper col
       (66% of the row). Widen the wrapper col to the full row instead
       so the dropdown can stretch. */
    .col-lg-8:has(#SyStateID),
    .col-lg-8:has(#SyCampusID),
    .col-lg-8:has(#AdProgramVersionID) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Name fields (First / Middle / Last): same story -- the input is
       already 100% inside col-lg-4, but the col itself is 33% of the
       row, which truncates longer values. Force each name's wrapper
       col to full-width so the cols stack and each value displays in
       full. The .row already has flex-wrap: wrap so stacking works
       automatically once a col claims 100% width. */
    .col-lg-4:has(#FirstName),
    .col-lg-4:has(#MiddleName),
    .col-lg-4:has(#LastName) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* =========================================================
   PDF-capture override.
   Applied briefly by applicant.application.js while Kendo
   drawDOM is serializing the Application content into a
   single-page PDF for Adobe Sign. Forces the application
   review table back to its desktop table layout so the
   mobile collapse (which stacks every label/value pair
   to its own row) cannot push the document onto extra pages.
   ========================================================= */
.pdf-rendering .application-review-table {
    display: table !important;
    width: auto !important;
}

.pdf-rendering .application-review-table tbody {
    display: table-row-group !important;
    width: auto !important;
}

.pdf-rendering .application-review-table tr {
    display: table-row !important;
    width: auto !important;
}

.pdf-rendering .application-review-table td {
    display: table-cell !important;
    width: auto !important;
}

.pdf-rendering .application-review-label {
    width: 210px !important;
    white-space: nowrap !important;
    display: table-cell !important;
}

/* Force the Bootstrap md-breakpoint widths to apply regardless of viewport
   so the transcript views (which use .col-12 .col-md-5 / .col-12 .col-md-7
   for label/value pairs) capture in their desktop side-by-side layout
   rather than stacking and doubling the vertical footprint. */
.pdf-rendering .col-md-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.pdf-rendering .col-md-7 {
    flex: 0 0 58.333333% !important;
    max-width: 58.333333% !important;
}

.pdf-rendering .col-md-5 {
    flex: 0 0 41.666667% !important;
    max-width: 41.666667% !important;
}

.pdf-rendering .col-md-4 {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
}

.pdf-rendering .col-md-auto {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
}

.pdf-rendering .col-sm-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.pdf-rendering .col-sm-4 {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
}

/* =========================================================
   Mobile-only overrides (<= 767.98px viewport width).
   Scoped inside @media so the laptop/tablet view is unaffected.
   ========================================================= */
@media (max-width: 767.98px) {

    /* Reduce body lateral margin so narrow screens get more usable width. */
    body {
        margin-left: 4px;
        margin-right: 4px;
    }

    /* Header: shrink logo and tagline so it doesn't dominate the viewport. */
    .sticky-app-header img {
        max-height: 60px !important;
        min-height: 0 !important;
        max-width: 100%;
        height: auto;
    }

    .sticky-app-header h2 {
        font-size: 1.1rem;
        margin-top: 8px;
        margin-bottom: 8px;
    }

    /* The hidden print logo block was reserving layout space via visibility:hidden.
       Free up the space on mobile. */
    #divLogoPrint.logo-print {
        display: none !important;
    }

    /* Progress bar: drop the hard 320px floor that exceeds narrow viewports. */
    .k-progressbar {
        min-width: 0 !important;
    }

    /* Contact row: drop the 260px child min-widths that force horizontal scroll. */
    .contact-row .radio-col,
    .contact-row .rep-col {
        min-width: 0;
        width: 100%;
        flex: 1 1 100%;
    }

    /* School selector: stack the State / School / Add cluster vertically. */
    .container-college {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .container-college .item {
        padding: 6px 0;
        width: 100%;
        max-width: 100%;
    }

    /* Documents row: let the title and status pill wrap onto separate lines. */
    .document-row > [class*="col-"] {
        flex-wrap: wrap;
    }

    /* Application-review table: collapse label/value pairs to a stacked block. */
    .application-review-table,
    .application-review-table tbody,
    .application-review-table tr,
    .application-review-table td {
        display: block;
        width: 100%;
    }

    .application-review-table td {
        padding: 2px 0;
    }

    .application-review-label {
        width: auto;
        white-space: normal;
        display: block;
        padding-bottom: 2px;
    }

    /* Application review body text: lift to 14px so iOS doesn't auto-zoom. */
    .application-review-content {
        font-size: 14px;
    }

    /* Transcript document panels: allow inner wide tables to scroll horizontally
       inside the panel rather than overflowing the whole page. */
    #hsTranscriptDocumentContent,
    [id^="collegeTranscriptDocumentContent"] {
        padding: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #hsTranscriptDocumentContent table,
    [id^="collegeTranscriptDocumentContent"] table {
        max-width: 100%;
    }

    /* Strip inline white-space:nowrap on the school address block in
       the transcript header so the address can wrap on phones. */
    #hsTranscriptDocumentContent [style*="nowrap"],
    [id^="collegeTranscriptDocumentContent"] [style*="nowrap"] {
        white-space: normal !important;
    }

    /* Validation summary: keep it visible while the user scrolls down a long form. */
    #divValidation,
    #divValidationSummary {
        position: sticky;
        top: 0;
        background-color: #fff;
        z-index: 9999;
    }

    /* Primary form action buttons: full-width so they're thumb-friendly. */
    #AddHighSchool,
    #AddCollege,
    #DocumentReview,
    #ProceedToProcessing,
    #SignRedirect {
        width: 100%;
    }

    /* -----------------------------------------------------------------
       Round 2: targeted fixes for reported mobile issues.
       ----------------------------------------------------------------- */

    /* Prevent any element that overruns the viewport from triggering a
       page-level horizontal scrollbar (which makes the fixed header
       look like it overflows to the right). Use overflow-x: clip rather
       than hidden -- "hidden" on html+body makes one of them a scroll
       container, which breaks touch-pan momentum scrolling on mobile
       (the page would only scroll when touching the scrollbar itself).
       "clip" hides the overflow without creating a scroll container,
       so touch scrolling works normally. */
    html,
    body {
        overflow-x: clip;
    }

    /* (1) Welcome view: the "Do you have an Application Code?" row has
           inline style="flex-wrap: nowrap;" which keeps the Yes/No buttons
           on the same line as the question. Force wrap on phones so the
           buttons fall under the question. */
    #divAppCode .row {
        flex-wrap: wrap !important;
    }

    #divAppCode .col-auto {
        margin-top: 6px;
    }

    #divAppCode .col-auto:first-child {
        width: 100%;
        margin-top: 0;
    }

    /* (2) Header: keep the inner container inside the viewport so it
           never pushes a horizontal scrollbar. */
    .sticky-app-header {
        padding: 6px 0;
    }

    .sticky-app-header .container,
    .sticky-app-header .container-fluid {
        max-width: 100%;
        padding-left: 8px;
        padding-right: 8px;
    }

    .sticky-app-header .row {
        margin-left: 0;
        margin-right: 0;
    }

    .sticky-app-header [class*="col-"] {
        padding-left: 4px;
        padding-right: 4px;
    }

    /* (3) AdStartDateID dropdown: inline-styled to width:50%. Force full
           width on mobile so the dropdown is legible. */
    #AdStartDateID {
        width: 100% !important;
    }

    /* (4) Ethnicity checkboxes: the wrapper inline-styles itself to
           flex-wrap so several items pack horizontally on narrow screens.
           Stack vertically on phones. */
    #divRaces > div {
        flex-direction: column !important;
        gap: 4px !important;
    }

    #divRaces .race-item {
        display: flex !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 4px !important;
    }

    /* (5) and (6) High school / college selectors: strengthen the
           previously-added column stack with !important so the existing
           ".container-college { display: flex; ... }" rule cannot win. */
    .container-college {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .container-college .item {
        padding: 6px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* (7) Documents: the .document-row templates use col-sm-10 + col-sm-2
           which on phones leaves the document panel at ~83% width and
           pushes the status pill into the remaining 17%. Force both to
           full-width so the doc panel uses the whole viewport. */
    .document-row > .col-lg-10,
    .document-row > .col-md-10,
    .document-row > .col-sm-10,
    .document-row > .col-lg-2,
    .document-row > .col-md-2,
    .document-row > .col-sm-2 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .document-row .doc-status {
        margin-top: 4px;
    }

    /* Reduce the multiple layers of padding that compound inside the
       expansion-panel content on phones, so the transcript document
       has more usable width. */
    .content-padding {
        padding: 8px !important;
    }

    .k-panelbar .k-content,
    .k-expander-content,
    .k-expander > .k-content {
        padding: 8px !important;
    }

    #hsTranscriptDocumentContent,
    [id^="collegeTranscriptDocumentContent"] {
        padding: 6px !important;
    }

    #hsTranscriptDocumentContent .container,
    [id^="collegeTranscriptDocumentContent"] .container,
    #hsTranscriptDocumentContent .row,
    [id^="collegeTranscriptDocumentContent"] .row,
    [id^="programDisclosureContent_"] .container,
    [id^="programDisclosureContent_"] .row {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* (Duplicate landscape block removed — consolidated into the single
   landscape @media block earlier in the file.) */

/* =========================================================
   Phone form-field stacking (any orientation).
   Forces every Bootstrap col that wraps a form field to
   full-width so all inputs stack vertically. Matches the
   name-fields treatment already applied -- the rest of the
   form (Phone, DOB, Email, Address, City/Zip, Country,
   Citizen/SSN, Sex/Hispanic/Race, IsVet/Military,
   CriminalHx/Comment, CEP, etc.) now follows the same
   pattern on portrait AND landscape phones.

   The media query is "any phone": portrait (max-width:
   767.98px) OR landscape phone (orientation: landscape
   AND max-height: 500px) -- a union via comma. Tablets
   and laptops match neither and stay untouched.

   Scoped to the col-X-4 / 6 / 8 sizes so the document-row
   col-X-10 / col-X-2 split is unaffected (those still
   render side-by-side in landscape) and section-level
   col-X-12 wrappers (already 100% wide) are not selected. */
@media (max-width: 767.98px),
       (orientation: landscape) and (max-height: 500px) {

    .col-lg-4:has(.k-form-field-wrap),
    .col-md-4:has(.k-form-field-wrap),
    .col-sm-4:has(.k-form-field-wrap),
    .col-lg-6:has(.k-form-field-wrap),
    .col-md-6:has(.k-form-field-wrap),
    .col-sm-6:has(.k-form-field-wrap),
    .col-lg-8:has(.k-form-field-wrap),
    .col-md-8:has(.k-form-field-wrap),
    .col-sm-8:has(.k-form-field-wrap),
    /* SyStateID wraps its input in a plain <span>, not k-form-field-wrap,
       so it needs an explicit selector. */
    .col-lg-8:has(#SyStateID),
    .col-md-8:has(#SyStateID),
    .col-sm-8:has(#SyStateID),
    /* College selection row: Applicant Full Name, Major, First Year,
       Last Year, Graduated. Defined in the #collegeTemplate (Welcome/
       Index.cshtml) inside .college-transcript-fields. Their inputs
       are plain <input>/<div> -- no .k-form-field-wrap -- so they need
       a direct selector. */
    .college-transcript-fields > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* When the Phone / MobilePhone columns collapse to a single
       stacked column on mobile (and on short-landscape phones),
       give each one a bottom gap so the second field is not flush
       against the first. Scoped to the row containing #Phone so
       it does not affect unrelated form rows. */
    .row:has(> .col-lg-4 > #Phone, > .col-md-4 > #Phone, > .col-sm-4 > #Phone) > [class*="col-"] {
        margin-bottom: 1rem;
    }
}

/* Phone and MobilePhone live in side-by-side Bootstrap columns on
   desktop / tablet. The Phone label is followed by an empty
   <label class="required"> that injects a bold "*" via
   .required::before; the bold glyph nudges the first line's
   line-height upward and pushes the Phone <input> down a couple
   of pixels relative to MobilePhone (which has no required label).
   Force both label rows to the same display + line-height so the
   inputs sit on the same baseline. */
label[for="Phone"],
label[for="MobilePhone"] {
    display: inline-block;
    line-height: 1.5;
    min-height: 21px;
    vertical-align: top;
}

label[for="Phone"] + label.required,
label[for="MobilePhone"] + label.required {
    display: inline-block;
    line-height: 1.5;
    min-height: 21px;
    vertical-align: top;
    font-weight: normal;
}

.phone-intl-wrap {
    width: 100%;
}

.phone-intl-label {
    display: block;
    margin-bottom: 4px;
}

.phone-intl-wrap .iti {
    width: 100%;
}

.phone-intl-wrap input[type="tel"] {
    width: 100%;
}
.ack-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

    .ack-row input[type="checkbox"] {
        margin-top: 3px;
        flex: 0 0 auto;
    }

    .ack-row .required {
        margin: 0;
        flex: 0 0 auto;
    }

    .ack-row span {
        display: inline-block;
    }
.phone-row {
    align-items: flex-start;
}

.phone-col {
    display: flex;
    flex-direction: column;
}

.phone-label-row {
    min-height: 26px;
    line-height: 1.5;
    margin-bottom: 4px;
}

.phone-col .k-form-field-wrap,
.phone-col .iti,
.phone-col input[type="tel"],
.phone-col input[type="text"],
.phone-col input[type="email"],
.phone-col input {
    width: 100% !important;
}

.email-display-value {
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #000;
}

/* Mobile / phone landscape: stack all 3 */
@media (max-width: 767.98px), (orientation: landscape) and (max-height: 500px) {

    .phone-row .phone-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 18px;
    }

        .phone-row .phone-col:last-child {
            margin-bottom: 0;
        }
}