body{
    font-size: 16px;
    font-family: Roboto, sans-serif !important;
    line-height: 1.5em !important;
    overflow-x: hidden;
    color: #50505b;
}
h2{
    font-family:'Montserrat',Arial,sans-serif;
    margin-bottom:0;
}
a{
    text-decoration: none;
    font-weight: 600;
    color: #00538A;
}
.container-estimator{
    max-width:1150px;
    margin:auto;
    width:100%;
}
.container-estimator.tuition{
    position:relative
}
.show-residential{display:none;}
.campuses{
    display:flex;
    gap: 20px;
}
.campuses p{
    margin-bottom:0;
}
.campuses a{
    display:block;
}
.funding-final{
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items:center;
    background: white;
    filter: drop-shadow(2px 2px 6px grey);
    border-radius: 10px;
    margin: 10px 0;
}
.funding-final-name{
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #303234;
}
.funding-final-icons i{
    margin-left:10px;
    color: #003399;
    font-size:16px;
    cursor:pointer;
}
.tuition-estimate{
    position: absolute;
    top: 0;
    left: 75%;
    transform: translateX(20px);
    padding-left: 30px;
    border-left: 3px solid #DDDDDD;
    height: 100%;
    width: calc(25% - 30px - 20px);;
    display:none;
}
.tuition-estimate h3{
    margin:0px;
    font-family:'Montserrat',Arial,sans-serif;
    font-size:14px;
    line-height:16px;
    color: #003399;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.top-info{
    display:flex;
    flex-wrap:wrap;
    margin-bottom:1em;
}
.hours{
    display:none;
    justify-content: space-between;
    border-top: 3px solid #DDDDDD;
}
.per-credit,.tech-fee,.total-per-credit,.tuition-data,.med-equipment,.estimated-tuition,.transfer,.advanced-standing,.total-credits,.discount,.funding-item{
    display:none;
    justify-content: space-between;
}
.per-credit{
    border-top: 2px solid #DDDDDD;
}
.total-per-credit{
    border-bottom: 2px solid #DDDDDD;
}
.estimated-tuition{
    border-top:3px solid #DDDDDD;
}
.top-info .descriptor{
    width:35%;
    margin:0;
}
.top-info .data{
    width:65%;
    margin:0;
}
.tech-fee .descriptor,.med-equipment .descriptor,.transfer .descriptor,.advanced-standing .descriptor,.discount .descriptor,.funding-item .descriptor{
    font-weight:400;
    text-transform: unset;
    margin-left:10px;
}
.tech-fee .descriptor,.med-equipment .descriptor,.tech-fee .data,.med-equipment .data{
    margin-top:0;
}
.descriptor{
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 700;
    color: #A8A8A8;
    margin:5px 0;
    display:none;
    text-transform:uppercase;
    font-size:14px;
    width:50%;
}
.data{
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 700;
    color: #515053;
    margin:5px 0;
    display:none;
    font-size:14px;
}
.flex{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:1em;
    width:100%;
}
.add-section{
    display:flex;
    align-items:center;
    gap: 1em;
    margin-top: 10px;
    margin-bottom: 20px;
}
.add-section i{
    padding: 10px 8px;
    background: #63bef2;
    color: #003399;
    border-radius: 5px;
    cursor: pointer;
    width:35px;
}
.add-tagline{
    font-family: 'Montserrat', Arial, sans-serif;
    font-size:14px;
    font-weight:700;
    line-height:18px;
    color: #003399;
    text-transform:uppercase;
    cursor: pointer;
}
.funding-section{
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    background: white;
    margin-bottom:15px;
}
.ed-left.fix{
    flex:5!important;
}
.ed-left.fix input[type="number"]{
    width: 100%;
    border: none;
    background: #f8f8fa;
    border-radius: 5px;
    padding: 20px;
}
.fix .options{
    height:55px!important;
}
.tuition-left{
    flex:3;
}
.tuition-left p{
    margin-bottom:0;
}
.tuiton-right{
    flex:1;
}
.form-section:not(.visible){
    display:none;
}
.form-section{
    text-transform: uppercase;
    background:#F8F8FA;
    padding: 15px;
    color: #003399;
    font-family: 'Montserrat',Arial,sans-serif;
    font-weight:600;
    border-radius:10px;
    position:relative;
    margin:10px 0;
}
ul.notes {
  list-style: none;
  padding-left:10px;
}

ul.notes li.one::marker {
  content: "* ";
}
ul.notes li.two::marker {
  content: "** ";
}
.form-section i{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
.form-section .edit{
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-family: 'Roboto', Arial, sans-serif;
}
.form-section.active{
    background:linear-gradient(to right,#63BEF2, #0033A0);
    color:white;
}
.form-section.active i,.form-section.active .edit{
    display:none;
}
.form-section:not(.active){
    cursor:pointer;
}
.half{
    flex:1;
}
input[type="text"]{
    width:100%;
    border: none;
    padding: 15px;
    margin: 5px 0;
    background: #f8f8fa;
    border-radius: 10px;
    color:#50505b;
    font-size: 14px;
}

.iti input{width:100%!important;}
.check-label {
    color: inherit;
    font-size: 16px !important;
}
input[type="checkbox"] {
    background-color: white;
    border-color: lightgrey;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    position: relative;
    outline: none;
    height: 20px;
    width: 20px;
    top: 10px;
    border-radius: 5px;
    border: 1px solid lightgrey;
}
input[type="checkbox"]:checked {
    background-color: #63BEF2;
    border-color: #63BEF2;
    appearance: none;
    cursor: pointer;
    position: relative;
    outline: none;
    height: 20px;
    width: 20px;
    top: 10px;
    border-radius: 5px;
}
input[type="checkbox"].error {
    background-color: #ffcdd2 !important;
    border: 2px solid #f44336 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2) !important;
    height: 20px !important;
    width: 20px !important;
    position: relative !important;
    cursor: pointer !important;
    border-radius: 5px !important;
    outline: none !important;
}
input[type="checkbox"]:checked:before {
    content: '\f00c';
    font-family: 'FontAwesome';
    color: #FFFFFF;
    font-size: 13px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.check-span{
    font-family:'Roboto',Arial,sans-serif;
    font-size:10px;
    line-height:15px;
    width: calc(100% - 40px);
    display: block;
    float: right;
    margin-top: 10px;
}
.form-section-content{
    padding:15px;
    display:none;
}
.form-section-content.active{
    display:block;
}

.form-section-content {
    overflow: hidden;
    height: 0;
    transition: height 0.4s ease;
}

.form-section-content.active {
    height: auto; /* JS will set exact height */
}

.form-section-content[data-step="5"]{
    position: relative;
}

.form-section-content[data-step="5"] .sub-head:last-child{
    position: absolute;
    bottom:0;
}

.steps{
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 2px;
    color: #63BEF2;
}
.sub-head{
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 28px;
    letter-spacing: 2px;
    color: #003399;    
}
.next-row{
    margin-top: 50px;
    display: flex;
}
.form-section-content[data-step="5"] .next-row{
    margin-top:30px;
}
.next-row:not(.first){
    justify-content: space-between;
}
.next-row.first{
    justify-content: flex-end;
}
.continue{
    width: 20%;
    position: relative;
    background: #003399;
    color: white;
    padding: 15px 20px;
    border-radius: 10px;
    text-transform: uppercase;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor:pointer;
}
.continue i{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}
.previous{
    width: 20%;
    position: relative;
    color: #003399;
    padding: 15px 20px;
    border-radius: 10px;
    text-transform: uppercase;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.previous i{
    margin-right:30px;
}

select{
    width:100%;
    border: none;
    padding: 20px;
    margin: 5px 0;
    background: #f8f8fa;
    border-radius: 10px;
    color:#7d7d7d;
}

.styled-select-wrapper {
    position: relative;
    width:100%;
}

.styled-select-wrapper select {
    appearance: none;
    padding-right: 40px;
    font-size:14px;
}

.styled-select-wrapper::after {
    content: "\f078";
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.tuition-form{
    border-bottom:2px solid #DDDDDD;
    padding-bottom:30px;
    width:75%;
}
.flex.upper-content,.disclaimer{
    width:75%
}

.disclaimer p{
    font-size:8px;
    font-family:'Roboto',Arial,sans-serif;
    line-height:11px;
    margin: 10px 0;
}

.fund-button{
    padding:20px;
    border-radius:10px;
    text-align:center;
    font-family:'Montserrat',Arial,sans-serif;
    font-size:14px;
    font-weight:700;
    display:inline-block;
    line-height:18px;
    color: #505053;
    background: #dddddd;
    cursor:pointer;
    margin-right:5px;
    text-transform: uppercase;
}
.fund-button.save{
    color: #003399;
    background:#63BEF2;
}

#program-doctorate,#program-masters{
    display:none;
}

.ed-flex{
    display:flex;
    gap: 15px;
    justify-content: space-between;
    flex-wrap:wrap;
}
.ed-left{
    flex:2;
}
.ed-right{
    flex:1;
}
.ed-right input{
    width:100%;
    border: none;
    padding: 20px;
    margin: 5px 0;
    background: #f8f8fa;
    border-radius: 10px;
    color:#50505b;
}

.iti{
    width:100%;
    margin:5px 0;
}
.iti__selected-dial-code{
    font-size: 14px;
    color: #50505b;
}

.yes-no-toggle {
  position: relative;
  display: inline-block;
}

.yes-no-toggle input {
  display: none;
}

.options {
    position: relative;
    display: flex;
    width: 120px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #f8f8fa;
    margin-bottom:15px;
    margin-top: 5px;
}

.option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-size: 14px;
  color: #555;
  transition: color 0.25s;
}

/* Highlight box */
.highlight {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 46%;
    background: #ffffff;
    z-index: 1;
    transition: transform 0.25s;
    margin: 5px;
    border-radius: 10px;
    filter: drop-shadow(1px 2px 3px lightgrey);
}

/* Move highlight to the right when checked (No) */
.yes-no-toggle input:not(:checked) + .options .highlight {
  transform: translateX(100%);
}

/* Text colors when selected */
.yes-no-toggle input:not(:checked) + .options .no {
  color: #003399;
}

.yes-no-toggle input:checked + .options .yes {
  color: #003399;
}

.error{
    border: 1px solid red!important;
}

.notes{
    font-size:12px;
}

.input-wrap {
  position: relative;
  display: inline-block;
  width:100%;
}

.fake-placeholder {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  pointer-events: none;
  color: #7d7d7d;
  font-size: 14px;
}

.fake-placeholder span {
  font-size: 12px;
  color: #7d7d7d;
  font-style:italic;
}
.fake-placeholder br{display:none;}

input:not(:placeholder-shown) + .fake-placeholder,
input:focus + .fake-placeholder {
  opacity: 0;
}

.mobi-intuition,.mobi-headline{display:none;}
.mobi-headline{
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    border-radius: 10px 10px 0 0;
    position: relative;
    background: linear-gradient(to right, #63BEF2, #0033A0);
    color: white;
    padding: 15px;
    text-transform: uppercase;
}
.mobi-headline i{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
@media only screen and (max-width:1199px){
    .tuition-estimate{
        left: 8px;
        top: calc(100vh - 53px);
        position: fixed;
        background: white;
        padding-left: 0;
        border: none;
        transform: unset;
        width: 100%;
        max-width: calc(100% - 16px);
        margin: auto;
        border-radius: 10px;
        transition:ease-in-out 0.5s;
        z-index:10;
    }
    .mobi-margin{
        padding: 15px;
        border-left: 2px solid lightgrey;
        border-right: 2px solid lightgrey;
        overflow-y:scroll;
        height:fit-content;
        max-height:650px;
    }
    .container-estimator.tuition{
        margin-bottom:54px;
    }
    .flex.upper-content,.disclaimer,.tuition-form{
        width:100%;
    }
    .mobi-headline{display:block;}
    .mobi-margin h3{display:none;}
}
@media only screen and (max-width:500px){
    .flex{
        flex-direction:column;
        gap:0;
    }
    .continue{
        width:100%;
    }
    .previous{
        width: 100%;
        text-align: center;
    }
    .next-row{
        flex-direction:column-reverse;
    }
    .mobi-intuition{display:block;}
    .desk-intuition{display:none;}
    .ed-flex{
        flex-direction:column;
        gap:0;
    }
    .yes-no-toggle,.options{width:100%;height:75px;}
    .next-row{
        margin-top:75px;
    }
    .previous i{
        display:none;
    }
    .fake-placeholder br{display:block;}
    .fund-button{
        width:100%;
        margin-bottom:10px;
    }
    .highlight{width:48%;}
    .funding-final{
        flex-direction: column;
        align-items: flex-start;
        position: relative;
    }
    .funding-final-icons{
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }
}
p{margin:15px 0;}