/*  Modal CSS  */
/* The Modal (background) */
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99991; /* Sit on top */
    left: 0;
    top: -100px;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
    z-index: 9;
  }
  @media (min-width: 576px) {
	  .modal-dialog {
		max-width: 60%!important;
		margin: 30px auto;
	  }
}
select:focus {
    border: none!important;
}
input[aria-invalid='false'] {
    border: 2px solid green!important;
}
input[aria-invalid='true'] {
border: 2px solid red!important;
}
select[aria-invalid='false'] {
border-bottom: 2px solid green!important;
}
select[aria-invalid='true'] {
border-bottom: 2px solid red!important;
}
sup {
    font-size: 32px!important;
    top: -0.9rem!important;

}
.left-box select {
    font-family: 'Archivo Narrow',sans-serif;
    font-size: 16px;
    font-weight: 700;
    border-style: solid;
    border-width: 0 0 2px!important;
    color: #4a4a4a;
    margin-bottom: 30px;
    height: auto;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-bottom: 0;
}
select:focus-visible {
    outline: none;
}
.left-box label.select-field::after {
    content: "\f107";
    font-family: 'Font Awesome 5 Free';
    color: #999;
    position: absolute;
    right: 15px;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
    pointer-events: none;
    margin-top: -45px;
}
.left-box label#campus-label::after {
    content: "\f107";
    font-family: 'Font Awesome 5 Free';
    color: #999;
    position: absolute;
    right: 15px;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
    pointer-events: none;
}
.large-8.left-box {
    width: 66%;
    padding: 30px;
    border: #8a8a8a solid 3px;
}
.grid-x > .large-8 {
    width: 66.66667%;
}
.large-4.right-box {
    width: 33%;
    min-height: 450px;
    background: #512584;
    border-right: #8a8a8a solid 3px;
    border-top: #8a8a8a solid 3px;
    border-bottom: #8a8a8a solid 3px;
    margin-top: 0;
}
div.container.grid-x {
    min-height: 615px;
    max-width: 975px;
    display: block;
}
tr:nth-child(even) {
    background: #ddd!important;
}
button.close {
    vertical-align: middle;
    border: none;
    color: inherit;
    border-radius: 50%;
    background: transparent;
    position: relative;
    width: 32px;
    height: 32px;
    opacity: 1;
    color: #fff!important;
    background-color: #000!important;
    border: 4px solid #fff!important;
    right: -40px;
    top: -145px;
}
  .close::before, .close::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 20px;
    width: 4px;
    background-color: currentColor;
}
.close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
  .close:focus, .close:hover {
    opacity: 1;
    background: rgba(128, 128, 128, 0.5);
}
  #credits-transferred {
    color: green;
  }
  span.close {
    background-color: #000;
  }
  tr#totals {
    border-top: 1px solid #000;
  }
  .modal-header {
    display: block!important;
    background-color: #512584;
  }
  .modal-header h1, p#header-program-text {
    text-align: center;
    margin: 0 auto;
	color: #fff!important;
  }
  tr#table-header th{
    background-color: #512584;
    color: #fff;
  }
  table td {
	  border: 1px solid rgba(0,0,0,0.3)!important;
  }
  .modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease-in-out;
    z-index: 9;
  }
  /* Modal Content Box */
  .modal-content {
    background-color: #fefefe;
    margin: 0 auto;/* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
  }
  * { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
} 

.modal-content { 
    position: relative; 
    background-color: #fff; 
    border: 1px solid rgba(0,0,0,.2); 
    border-radius: 6px; 
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5); 
    box-shadow: 0 3px 9px rgba(0,0,0,.5); 
    background-clip: padding-box; 
    outline: 0;
} 
div#modal-footer {
    background-color: #512584;
    color: #fff;
    height: 100px;
    width: 100%;

}
@media (min-width: 768px){ 
  .modal-content { 
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5); 
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
  } 
}     

.modal-dialog { 
    position: relative; 
    width: auto; 
    margin: 10px;
} 

@media (min-width: 768px){ 
  .modal-dialog { 
    width: 600px; 
    margin: 30px auto;
  } 
}     

@media (min-width: 992px){ 
  .modal-lg { 
    width: 900px;
  } 
}     

.modal.fade .modal-dialog { 
    -webkit-transform: translate(0,-25%); 
    -ms-transform: translate(0,-25%); 
    -o-transform: translate(0,-25%); 
    transform: translate(0,-25%); 
    -webkit-transition: -webkit-transform .3s ease-out; 
    -moz-transition: -moz-transform .3s ease-out; 
    -o-transition: -o-transform .3s ease-out; 
    transition: transform .3s ease-out;
} 

.modal.in .modal-dialog { 
    -webkit-transform: translate(0,0); 
    -ms-transform: translate(0,0); 
    -o-transform: translate(0,0); 
    transform: translate(0,0);
} 

.fade { 
    opacity: 0; 
    -webkit-transition: opacity .15s linear; 
    -o-transition: opacity .15s linear; 
    transition: opacity .15s linear;
} 

.modal { 
    display: none; 
    overflow: hidden; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0;
    -webkit-overflow-scrolling: touch; 
    outline: 0;
} 

.fade.in { 
    opacity: 1;
} 

.modal-open .modal { 
    overflow-x: hidden; 
    overflow-y: auto;
} 
#btn-container {
    display: flex;
}
#btn-container a {
    margin: 0 auto;
}
body { 
    margin:  0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-size: 14px; 
    line-height: 1.42857; 
    color: #333; 
    background-color: #fff;
} 

.modal-open { 
    overflow: hidden;
} 

html { 
    min-height:   100%; 
    position:   relative;
    font-family:  sans-serif; 
    -ms-text-size-adjust:  100%; 
    -webkit-text-size-adjust:  100%;
    font-size: 10px; 
    -webkit-tap-highlight-color: transparent;
} 

.modal-body { 
    position:  relative; 
    padding:  15px;
    height: calc(100% - 120px); 
    overflow-y: scroll;
} 

:after,:before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
} 

.alert { 
    padding: 15px; 
    margin-bottom: 20px; 
    border: 1px solid transparent; 
    border-radius: 4px;
} 

.alert-info { 
    background-color:  #d9edf7; 
    border-color:  #bce8f1; 
    color:  #245167;
} 

.panel { 
    margin-bottom: 20px; 
    background-color: #fff; 
    border: 1px solid transparent; 
    border-radius: 4px; 
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); 
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
} 

.panel-default { 
    border-color: #ddd;
} 

p { 
    margin: 0 0 10px;
} 

.alert > p  { 
    margin-bottom: 0;
} 

table { 
    border-collapse:  collapse; 
    border-spacing:  0;
    background-color: transparent;
} 

.table { 
    width: 100%; 
    max-width: 100%; 
    margin-bottom: 20px;
} 

.panel > .table  { 
    margin-bottom: 0;
} 

.panel > .table:first-child  { 
    border-top-right-radius: 3px; 
    border-top-left-radius: 3px;
} 

.panel-footer { 
    padding: 10px 15px; 
    background-color: #f5f5f5; 
    border-top: 1px solid #ddd; 
    border-bottom-right-radius: 3px; 
    border-bottom-left-radius: 3px;
} 

.panel > .table:last-child  { 
    border-bottom-right-radius: 3px; 
    border-bottom-left-radius: 3px;
} 

small { 
    font-size:  85%;
} 

.panel > .table:first-child > tbody:first-child > tr:first-child  { 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px;
} 

.ng-hide:not(.ng-hide-animate) { 
    display: none !important;
} 

.panel > .table:last-child > tbody:last-child > tr:last-child  { 
    border-bottom-left-radius: 3px; 
    border-bottom-right-radius: 3px;
} 

th { 
    padding:  0;
    text-align: left;
} 

.table > tbody > tr > th  { 
    padding: 8px; 
    line-height: 1.42857; 
    vertical-align: top; 
    border-top: 1px solid #ddd;
} 

.table > tbody > tr.active > th  { 
    background-color: #f5f5f5;
} 

.panel > .table > tbody:first-child > tr:first-child th  { 
    border-top: 0;
} 

.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child  { 
    border-top-left-radius: 3px;
} 

.text-right { 
    text-align: right;
} 

.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child  { 
    border-top-right-radius: 3px;
} 

td { 
    padding: 0;
} 

.table > tbody > tr > td  { 
    padding: 8px; 
    line-height: 1.42857; 
    vertical-align: top; 
    border-top: 1px solid #ddd;
} 

.table > tbody > tr.active > td  { 
    background-color: #f5f5f5;
} 

.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child  { 
    border-bottom-left-radius: 3px;
} 

.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child  { 
    border-bottom-right-radius: 3px;
} 

strong { 
    font-weight: 700;
} 

a { 
    background-color:  transparent;
    color: #004989; 
    text-decoration: none;
} 

a:active,a:hover { 
    outline: 0;
} 

a:hover { 
    color: #00203d; 
    text-decoration: underline;
} 



  /* The Close Button */
  .close {
    color: #000;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
  /*  Modal CSS --END--  */
div.result {
    height: 100%;
    background-color: #512584;
}
div.tuition-calculator-container {
    display: flex;
}
h2#graduation-date {
    text-align: center;
    color: #F9C623;
    margin-bottom: 5px;
}
div#est-tuition {
    text-align: center;
    font-size: 44px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    width: 100%;
}
button#apply-now {
    background-color: #F9C623;
    color: #000;
    margin-bottom: 15px;
}
button.cf7mls_next, button.cf7mls_back, input#tuition-submit {
    background-color: #512584!important;
    color: #fff!important;
    border-radius: 0!important;
    border: none!important;
}
label.padded-label {
    padding-bottom: 15px;
}

span#grad-year {
    color: #ccc;
    font-size: 3.5rem;
    text-align: center;
    display: inline-block;
    width: 100%;
}
span#grad-month {
    color: #F9C623;
    font-size: x-large;
    text-transform: uppercase;
    text-align: center;
    margin-top: 3%;
    display: inline-block;
    width: 100%;
}
button#details {
    background-color: #F9C623;
    margin: 0 auto;
    padding: 13px;
    margin-top: 5%;
    display: none;
}
button#apply-now {
    padding: 13px;
}
span#tuition {
    font-size: 3.5rem;
    font-weight: 300;
    color: #ccc;
}
span#estimate {
    display: inline-block;
    color: #ccc;
    text-align: center;
    width: 100%;
    font-size: 1rem;
    font-weight: 300;
}
span#est-tuition-text {
    font-size: 1rem;
    font-weight: 300;
    display: inline-block;
    color: #ccc;
    text-align: center;
    width: 80%;
    border-bottom: #ccc solid 1px;
    padding-bottom: 15px;
}
span.counter {
    width: 85%;
    display: inline-block;
    border: #F9C623 2px solid;
    padding: 15px;
    margin-top: 8%;
}
div.left-half-box {
    border: 2px solid #000;
}
div.col-md-4.right-half-box {
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    padding-left: 0!important;
    padding-right: 0!important;
}
.radio-button input[type="radio"] {
	display: none;
}      
.radio-button label {
	display: inline-block;
	background-color: #fff;
	padding: 4px 11px;
	font-family: Arial;
	font-size: 18px;
	cursor: pointer;
	border: #000 solid 1px;
	width: 70px;
}      
.radio-button input[type="radio"]:checked+label {
	background-color: #000;
	color: #fff;
}
.radio-button input[type="radio"]:checked+label div.month {
	color: #F9C623;
}
div.day {
	text-align: center;
}
div.month {
	text-align: center;
}
div.year {
	text-align: center;
}