.form-error{
    color: #990000;
}
.btn-disabled{
    cursor: not-allowed !important;
    background: #c7c7c7 !important;
    color: #000000 !important;
}
.app-id-error{
    text-align: center;
    color: red;
}
.login form{
    display: table;
}
.login .custom-reg-fields{
    display: table-header-group;
}
.enrolment-alert{
    color: #728188;
    border-radius: 5px;
    border: 2px solid #e2e7ed;
    background: #ffffff;
    cursor: pointer;
    padding: 10px;
    margin: 10px auto;
}

.enrolment-alert .ld-status-icon{
    height: 45px;
    width: 45px;
    flex-basis: unset;
}
.enrolment-alert .ld-alert-content{
    display: flex;
}
.enrolment-alert .ld-alert-messages{
    margin-left: 10px;
}
.enrolment-disabled{
    background: #f9f9f99e;
    cursor: not-allowed;
}
.heseap-form{
    font-size:16px;
}
.hp-icon-btn{
    background: #008ec2 !important;
    color: #fff !important;
    padding: 10px !important;
    border: none;
    border-radius: 5px;
    cursor:pointer;
}
.form-notifications{
    font-weight:700;
}
.hp-form-btn{
    background: #008ec2 !important;
    color: #fff !important;
    padding: 10px 20px !important;
    font-size: 15px !important;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top:5px;
}
.htp-form-btn:hover{
    background: #ec681f;
    border-color: #ec681f;
}
.existing-application{
    width: 100%;
    display: table;
}
.existing-application thead th{
    line-height: 25.2px;
    background: #dcdcdc;
    text-align: left;
    padding: 3px 10px !important;
    border: 1px solid #dcdcdc;
}
.existing-application tbody td, .existing-application tbody th{
    line-height: 25.2px;
    text-align: left;
    padding: 10px !important;
    border: 1px solid #dcdcdc;
    font-size: 17px;
}
#application-id{
    text-transform: uppercase;
}
.center{
    text-align: center !important;
}
.heseap-form .accordion-content{
    display: none;
    padding: 10px;
}
.heseap-form .accordion .active > .accordion-content{
    display: block;
}
.heseap-form .accordion-element > .accordion-label, .heseap-form .accordion > .left .accordion-label{
    padding: 9px 10px;
    padding-top: 14px;
    padding-bottom: 4px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 2.5px;
    background-color: #1b2653;
    border-radius: 5px;
}
.heseap-form .accordion .active > .accordion-label, .heseap-form > .accordion > .left > .active{
      background-color: #1a1e3e96;
}
    
.heseap-form .accordion .valid > .accordion-label, .heseap-form > .accordion > .left > .valid{
      background-color: #101226;
}
.desktop{
    display: none;
}
.mobile{
    display: block;
}
.heseap-form h1, .heseap-form h2, .heseap-form h3, .heseap-form h4, .heseap-form h5, .heseap-form h6{
    margin: unset;
}
.heseap-form h3{
    font-size: 24px;
}
.required{
    color: #ff0000;
    font-weight: 400;
}
.hp-form-group{
    padding: 7.5px 0;
    display:grid;
    width:100%;
}
.hp-form-group > select{
    width: 100%;
}
.hp-form-group input{
    padding: 12px 10px !important;
}
.hp-form-group input[type=date]{
    padding: 8px 10px !important;
}
.hp-form-group input, .hp-form-group select{
    padding: 6px 10px;
}
.text-red, label.error{
    color: #ff0000;
}
.hp-btn-group{
    text-align: right;
}
.hp-form-btn-next{
    background: #008ec2 !important;
    color: #fff !important;
    padding: 10px 35px !important;
    border-radius: 5px !important;
    font-size: 15px !important;
    cursor: pointer;
    border: none;
}
.hp-form-group > input[type="file"]{
    display: none;
}
.photo_preview > embed{
    margin-top:5px;
    max-width: 150px;
    max-height: 150px !important;
    cursor: pointer;
}
.heseap-form textarea, .heseap-form input, .heseap-form select{
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    padding: 12px 10px;
    height: unset;
}
.heseap-form .multi-form {
    border: 1px solid #95969c;
    border-top-left-radius: 7.5px;
    border-top-right-radius: 7.5px;
    margin-bottom: 10px;
}
.border-bottom{
    border-bottom-left-radius: 7.5px;
    border-bottom-right-radius: 7.5px;
}
.heseap-form .multi-form .title{
    background: #95969c;
    padding: 10px 10px;
    color: #ffffff;
    font-weight: 700;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
    text-transform: capitalize;
}
.heseap-form .multi-form .content{
    padding: 10px 10px 10px;
}
.btn-multi-form{
    background: #d1d2d8;
    padding: 8px 20px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
}
#lifelong_learning_experience label{
    font-weight: 700;
}
.non-discriminatory{
    font-size: 13px;
}
.hide{
    display: none;
}
.clear{
    clear: both;
}
.loader-x-small {
    border: 1px solid #c3c3c3;
    border-radius: 50%;
    border-top: 1px solid #555;
    width: 15px;
    height: 15px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    z-index: 121212;
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@media screen and (min-width: 769px) {
    .desktop{
        display: block;
    }
    .mobile{
        display: none;
    }
    .left{
        width: 30%;
        float: left;
    }
    .right{
        width: 70%;
        float: right;
    }
    .heseap-form .accordion-element > .accordion-label, .heseap-form .accordion > .left .accordion-label{
        height: 28px;
    }
    .electives{
        display: flex;
        flex-wrap: wrap;
    }
    .electives > div{
        width: 50%;
        font-size: 16px;
        padding: 4px 0;
    }
    .form-row{
        display: flex;
    }
    .column-2{
        width: 50%;
        padding: 0 5px;
    }
    .column-3{
        width: 33.333333%;
        padding: 0 5px;
    }
    .form-row > div:first-child{
        padding-left: 0;
    }
    .form-row > div:last-child{
        padding-right: 0;
    }
}
.ui-datepicker-calendar{
    display: table;
}
.multi-form{
    padding-bottom: 10px;
}
.multi-form > small{
    padding: 10px;
    font-size: 80%;
}
@media (min-width: 1025px){
    .site-header__main .site-branding {
        width: 30%;
    }
}
.prerequisite-1{
    color: #469f2a;
}
.prerequisite-2{
    color: #0d2dd3;
}
.prerequisite-title{
    position: absolute !important;
    background: #000 !important;
    color: #fff;
    padding: 2px 10px !important;
    margin-left: 20px !important;
    z-index: 9999999;
    border-radius: 5px !important;
    font-size: 12px !important;
    display: none;
}
.prerequisite-title:before {
    content: "";
    position: absolute;
    border-style: solid;
    border-width: 0px 5px 10px;
    border-color: #000 transparent;
    display: block;
    width: 0;
    z-index: 0;
    top: -10px;
}
.hesaep-electives ul > li:hover > .prerequisite-title , .hesaep-electives .electives > .elective:hover > .prerequisite-title{
    display: block;
}
.form-high-school{
    border: 1px solid #95969c;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
}
.form-high-school > h3{
    background: #d1d2d8;
    font-size: 16px;
    padding: 7.5px 10px;
    border-radius: 5px 5px 0 0;
    margin: -10px -10px 0 -10px;
}
.btn-open{
    display: none;
}
.student-area-wrapper > .student-area-details{
    padding: 0 10px;
}
.student-area-wrapper .nav-item{
    padding: 10px 15px;
    color: #fff;
    display: inline-block;
    width: 100%;
    background: #191d3d;
    cursor: pointer;
    font-size: 16px;
}
.student-area-wrapper .nav-item:hover, .is-active{
    background: #ec6937 !important;
}
.student-area-course-grid{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.student-area-course-grid > .course-item{
    width: 22%;
    padding: 10px;
    margin: 0;
}
.course-item > .item-card{
    padding: 10px 15px;
    text-align: center;
    box-shadow: 1px 1px 3px 0 rgb(0 0 0 / 20%);
    min-height: 135px;
}
.course-item .course-title{
    font-weight: 700;
    min-height: 50px;
}
.course-title a{
    color: #191d3d;
    font-size: 16px;
    text-decoration: none;
}
.student-area-course-grid .course-grade, .student-area-course-grid .course-score{
    padding: 5px 10px;
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
}
.course-item a, .course-item button{
    margin-top: 10px !important;
}
.course-item .course-code{
    margin-bottom: 10px;
    font-size: 15px;
}
.disabled{
    cursor: not-allowed;
}
.requested, .retake-course:hover{
    color: #ffffff !important;
    background: #ec681f !important;
    border-color: #ec681f !important;
}
.button-student-area{
    padding: 10px 30px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 5px;
    border: 1px solid;
}
.btn-paid, .btn-request-transcript{
    color: green !important;
    border-color: green !important;
    background: #fff;
}
.btn-paid:hover, .btn-request-transcript:hover{
    color: #ffffff !important;
    background: green !important;
}
.retake-course{
    background: #fff;
    color: #000;
    border: 1px solid #000;
}
.clear{
    clear: both;
}
table{
    display: table !important;
}
.btn-request-transcript, .print-draft{
    padding: 10px 26px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
    height: 40px;
}
.pop-over-ovelay {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: none;
    padding-bottom: 50px;
}
.modal-popover {
    margin-bottom: 40px;
    top: 5px;
    width: 65%;
    margin: 0 auto;
    position: relative;
    z-index: 121212;
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
}
.modal-heading {
    text-align: right;
    padding-right: 10px;
}
.modal-close {
    font-size: 30px;
    font-weight: 400;
    cursor: pointer;
    color: #808080;
}
.modal-footer {
    margin-top: 10px;
    height: 35px;
    display: flex;
    justify-content: right;
}
.transcript .right{
    width: unset;
    float: unset;
}
.transcript td, .transcript td > span{
    font-size: 15px;
}
.transcript table{
    margin: 0;
}
.transcript-request-modal .modal-popover, .certificate-request-modal .modal-popover{
    width: 85%;
}
.transcript-request-modal .modal-footer, .certificate-request-modal .modal-footer{
    justify-content: center;
}
.modal-details .nav-item{
    width: 95%;
}
.marksheet td, .modals td, .marksheet th, .modals th{
    text-align: left;
    border: 1px solid;
    padding: 7.5px;
    text-align: left;
}
.marksheet tbody > tr:nth-child(2n), .modals tbody > tr:nth-child(2n){
    background: #ebf3fb;
}
.form-error{
    color: #990000;
}
.btn-disabled{
    cursor: not-allowed !important;
    background: #c7c7c7 !important;
    color: #000000 !important;
}
.app-id-error{
    text-align: center;
    color: red;
}
.login form{
    display: table;
}
.login .custom-reg-fields{
    display: table-header-group;
}
.enrolment-alert{
    color: #728188;
    border-radius: 5px;
    border: 2px solid #e2e7ed;
    background: #ffffff;
    cursor: pointer;
    padding: 10px;
    margin: 10px auto;
}

.enrolment-alert .ld-status-icon{
    height: 45px;
    width: 45px;
    flex-basis: unset;
}
.enrolment-alert .ld-alert-content{
    display: flex;
}
.enrolment-alert .ld-alert-messages{
    margin-left: 10px;
}
.enrolment-disabled{
    background: #f9f9f99e;
    cursor: not-allowed;
}
.heseap-form{
    font-size:16px;
}
.hp-icon-btn{
    background: #008ec2 !important;
    color: #fff !important;
    padding: 10px !important;
    border: none;
    border-radius: 5px;
    cursor:pointer;
}
.form-notifications{
    font-weight:700;
}
.hp-form-btn{
    background: #008ec2 !important;
    color: #fff !important;
    padding: 10px 20px !important;
    font-size: 15px !important;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top:5px;
}
.htp-form-btn:hover{
    background: #ec681f;
    border-color: #ec681f;
}
.existing-application{
    width: 100%;
    display: table;
}
.existing-application thead th{
    line-height: 25.2px;
    background: #dcdcdc;
    text-align: left;
    padding: 3px 10px !important;
    border: 1px solid #dcdcdc;
}
.existing-application tbody td, .existing-application tbody th{
    line-height: 25.2px;
    text-align: left;
    padding: 10px !important;
    border: 1px solid #dcdcdc;
    font-size: 17px;
}
#application-id{
    text-transform: uppercase;
}
.center{
    text-align: center !important;
}
.heseap-form .accordion-content{
    display: none;
    padding: 10px;
}
.heseap-form .accordion .active > .accordion-content{
    display: block;
}
.heseap-form .accordion-element > .accordion-label, .heseap-form .accordion > .left .accordion-label{
     padding: 9px 10px;
    padding-top: 14px;
    padding-bottom: 4px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 2.5px;
    background-image: linear-gradient(to right, rgb(26 30 62), rgb(246 182 67));
    border-radius: 5px;
}
.heseap-form .accordion .active > .accordion-label, .heseap-form > .accordion > .left > .active{
    background-image: linear-gradient(to right, rgb(26 30 62), rgb(246 182 67), rgb(144 155 240));
}
.heseap-form .accordion .valid > .accordion-label, .heseap-form > .accordion > .left > .valid{
    background-image: linear-gradient(to right, rgb(26 30 62), rgb(246 182 67), rgb(55 218 98));
}
.desktop{
    display: none;
}
.mobile{
    display: block;
}
.heseap-form h1, .heseap-form h2, .heseap-form h3, .heseap-form h4, .heseap-form h5, .heseap-form h6{
    margin: unset;
}
.heseap-form h3{
    font-size: 24px;
}
.required{
    color: #ff0000;
    font-weight: 400;
}
.hp-form-group{
    padding: 7.5px 0;
    display:grid;
    width:100%;
}
.hp-form-group > select{
    width: 100%;
}
.hp-form-group input{
    padding: 12px 10px !important;
}
.hp-form-group input[type=date]{
    padding: 8px 10px !important;
}
.hp-form-group input, .hp-form-group select{
    padding: 6px 10px;
}
.text-red, label.error{
    color: #ff0000;
}
.hp-btn-group{
    text-align: right;
}
.hp-form-btn-next{
    background: #008ec2 !important;
    color: #fff !important;
    padding: 10px 35px !important;
    border-radius: 5px !important;
    font-size: 15px !important;
    cursor: pointer;
    border: none;
}
.hp-form-group > input[type="file"]{
    display: none;
}
.photo_preview > embed{
      margin-top:5px;
    max-width: 150px;
    max-height: 150px !important;
    cursor: pointer;
}
.heseap-form textarea, .heseap-form input, .heseap-form select{
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    padding: 12px 10px;
    height: unset;
}
.heseap-form .hesaep-electives-edit textarea{
    width: 100%;

}
.heseap-form .multi-form {
    border: 1px solid #95969c;
    border-top-left-radius: 7.5px;
    border-top-right-radius: 7.5px;
    margin-bottom: 10px;
}
.border-bottom{
    border-bottom-left-radius: 7.5px;
    border-bottom-right-radius: 7.5px;
}
.heseap-form .multi-form .title{
    background: #95969c;
    padding: 10px 10px;
    color: #ffffff;
    font-weight: 700;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
    text-transform: capitalize;
}
.heseap-form .multi-form .content{
    padding: 10px 10px 10px;
}
.btn-multi-form{
    background: #d1d2d8;
    padding: 8px 20px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
}
label{
    margin:5px;
}
#lifelong_learning_experience label{
    font-weight: 700;
}
.non-discriminatory{
    font-size: 13px;
}
.hide{
    display: none;
}
.clear{
    clear: both;
}
.loader-x-small {
    border: 1px solid #c3c3c3;
    border-radius: 50%;
    border-top: 1px solid #555;
    width: 15px;
    height: 15px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    z-index: 121212;
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@media screen and (min-width: 769px) {
    .desktop{
        display: block;
    }
    .mobile{
        display: none;
    }
    .left{
        width: 30%;
        float: left;
    }
    .right{
        width: 70%;
        float: right;
    }
    .heseap-form .accordion-element > .accordion-label, .heseap-form .accordion > .left .accordion-label{
        height: 28px;
    }
    .electives{
        display: flex;
        flex-wrap: wrap;
    }
    .electives > div{
        width: 50%;
        font-size: 16px;
        padding: 4px 0;
    }
    .form-row{
        display: flex;
    }
    .column-2{
        width: 50%;
        padding: 0 5px;
    }
    .column-3{
        width: 33.333333%;
        padding: 0 5px;
    }
    .form-row > div:first-child{
        padding-left: 0;
    }
    .form-row > div:last-child{
        padding-right: 0;
    }
}
.ui-datepicker-calendar{
    display: table;
}
.multi-form{
    padding-bottom: 10px;
}
.multi-form > small{
    padding: 10px;
    font-size: 80%;
}
@media (min-width: 1025px){
    .site-header__main .site-branding {
        width: 30%;
    }
}
.prerequisite-1{
    color: #469f2a;
}
.prerequisite-2{
    color: #0d2dd3;
}
.prerequisite-title{
    position: absolute !important;
    background: #000 !important;
    color: #fff;
    padding: 2px 10px !important;
    margin-left: 20px !important;
    z-index: 9999999;
    border-radius: 5px !important;
    font-size: 12px !important;
    display: none;
}
.prerequisite-title:before {
    content: "";
    position: absolute;
    border-style: solid;
    border-width: 0px 5px 10px;
    border-color: #000 transparent;
    display: block;
    width: 0;
    z-index: 0;
    top: -10px;
}
.hesaep-electives ul > li:hover > .prerequisite-title , .hesaep-electives .electives > .elective:hover > .prerequisite-title{
    display: block;
}
.form-high-school{
    border: 1px solid #95969c;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
}
.form-high-school > h3{
    background: #d1d2d8;
    font-size: 16px;
    padding: 7.5px 10px;
    border-radius: 5px 5px 0 0;
    margin: -10px -10px 0 -10px;
}
.btn-open{
    display: none;
}
.student-area-wrapper > .student-area-details{
    padding: 0 10px;
}
.student-area-wrapper .nav-item{
    padding: 10px 15px;
    color: #fff;
    display: inline-block;
    width: 100%;
    background: #191d3d;
    cursor: pointer;
    font-size: 16px;
}
.student-area-wrapper .nav-item:hover, .is-active{
    background: #ec6937 !important;
}
.student-area-course-grid{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.student-area-course-grid > .course-item{
    width: 22%;
    padding: 10px;
    margin: 0;
}
.course-item > .item-card{
    padding: 10px 15px;
    text-align: center;
    box-shadow: 1px 1px 3px 0 rgb(0 0 0 / 20%);
    min-height: 135px;
}
.course-item .course-title{
    font-weight: 700;
    min-height: 50px;
}
.course-title a{
    color: #191d3d;
    font-size: 16px;
    text-decoration: none;
}
.student-area-course-grid .course-grade, .student-area-course-grid .course-score{
    padding: 5px 10px;
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
}
.course-item a, .course-item button{
    margin-top: 10px !important;
}
.course-item .course-code{
    margin-bottom: 10px;
    font-size: 15px;
}
.disabled{
    cursor: not-allowed;
}
.requested, .retake-course:hover{
    color: #ffffff !important;
    background: #ec681f !important;
    border-color: #ec681f !important;
}
.button-student-area{
    padding: 10px 30px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 5px;
    border: 1px solid;
}
.btn-paid, .btn-request-transcript{
    color: green !important;
    border-color: green !important;
    background: #fff;
}
.btn-paid:hover, .btn-request-transcript:hover{
    color: #ffffff !important;
    background: green !important;
}
.retake-course{
    background: #fff;
    color: #000;
    border: 1px solid #000;
}
.clear{
    clear: both;
}
table{
    display: table !important;
}
.btn-request-transcript{
    padding: 10px 26px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
}
.pop-over-ovelay {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999999;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: none;
    padding-bottom: 50px;
}
.modal-popover {
    margin-bottom: 40px;
    top: 5px;
    width: 65%;
    margin: 0 auto;
    position: relative;
    z-index: 121212;
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
}
.modal-heading {
    text-align: right;
    padding-right: 10px;
}
.modal-close {
    font-size: 30px;
    font-weight: 400;
    cursor: pointer;
    color: #808080;
}
.modal-footer {
    margin-top: 10px;
    height: 35px;
    display: flex;
    justify-content: right;
}
.transcript .right{
    width: unset;
    float: unset;
}
.transcript td, .transcript td > span{
    font-size: 15px;
}
.transcript table{
    margin: 0;
}
.transcript-request-modal .modal-popover, .certificate-request-modal .modal-popover{
    width: 85%;
}
.transcript-request-modal .modal-footer, .certificate-request-modal .modal-footer{
    justify-content: center;
}
.modal-details .nav-item{
    width: 95%;
}
.transcript{
    margin-bottom: 10px;
}
.transcript td, .transcript th{
    text-align: left;
    border: 1px solid;
    padding: 7.5px;
    text-align: left;
}
.transcript tbody > tr:nth-child(2n){
    background: #ebf3fb;
}
.confurment-text {
    font-family: edwardian !important;
}
.school-text, .name-text, .major-text {
    font-family: diploma !important;
}
.modals h5{
    font-size: 20px;
}
.modals small{
    font-size: 13px;
}
.document-request-modal .course-count{
    font-size: 20px !important;
    font-weight: 700 !important;
}

span.read-only{
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
}
.profile-img{
height: 120px;
}