.calc-wrapper h2 {
margin: 20px 0;
padding-top: 50px;
}
.calc-wrapper h3, .calc-wrapper p {
color: #333 !important;
}
#results-introduction span {
color: #369248;
font-weight: 700;
}
.form, .results {
width: 90%;
padding: 20px;
margin: 10px auto;
text-align: center;
}
.form .results-table, .results .results-table {
width: 100%;
text-align: left;
margin-top: 40px;
}
.form .results-table tr, .results .results-table tr {
margin: 5px 0;
}
.form .results-table tr td, .results .results-table tr td {
padding: 15px 0;
}
.form .results-table .t-and-c, .results .results-table .t-and-c {
font-size: 0.8rem;
}
.form .results-table .monthly-total, .results .results-table .monthly-total {
font-weight: 700;
border-top: 1px solid #369248;
}
.form-group {
margin-top: 10px;
}
#hours-selection {
display: none;
}
#hours-selection-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#funded-hours-paragraph {
color: #369248;
border: 1px solid #369248;
}
.form-label-title {
color: #369248 !important;
padding-top: 30px;
font-size: 1.6rem;
}
.add-v-margin {
margin: 15px 0;
}
.results-hidden {
height: 0px !important;
margin-top: 0px;
}
.hide {
display: none;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.hidden {
display: hidden;
}
.show {
opacity: 1 !important;
}
.calc-wrapper .results {
position: relative;
}
.fee-loader {
border: 8px solid #f3f3f3; border-top: 8px solid #369248; border-radius: 50%;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
margin: 20px auto;
display: none;
position: absolute;
top: -10px;
right: 0;
left: 0;
}
.fee-loader.show {
display: block; }
.results div {
margin: 15px auto;
}
.days-container, .funding-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
#fee-form input[type=text], #fee-form input[type=email], #fee-form input[type=number], #fee-form input[type=tel], #fee-form select {
margin-bottom: 5px !important;
padding: 12px 17px !important;
border-color: #eef1f6 !important;
background-color: #eef1f6 !important;
height: 50px !important;
color: #333 !important;
}
#fee-form input[type=checkbox] {
margin-top: 3px;
}
#fee-form input[type=submit] {
border-radius: 50px !important;
margin: 0 auto;
-webkit-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
border: 2px solid #369248;
opacity: 1;
}
#fee-form input, #fee-form select {
border-radius: 0 !important;
}
#fee-form input[type=submit]:hover {
background: white;
border: 2px solid #369248;
color: #369248;
border-radius: 50px !important;
}
#fee-form ::-webkit-input-placeholder {
color: #333;
}
#fee-form :-ms-input-placeholder {
color: #333;
}
#fee-form ::-ms-input-placeholder {
color: #333;
}
#fee-form ::placeholder {
color: #333;
}
#fee-form .days-label {
height: 55px;
}
#fee-form .error {
border: 1px solid #913643;
margin-top: 5px;
color: #913643 !important;
text-align: left;
padding-left: 10px;
display: block;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
#fee-form .radio-inline {
color: #333;
margin-top: 17px;
}
#fee-form input[type=radio] {
margin-top: 5px;
border-radius: 50px !important;
}
.info-icon {
position: relative;
display: inline-block;
margin-left: 6px;
width: 16px;
height: 16px;
background: #00927C;
color: #fff;
font-size: 12px;
text-align: center;
line-height: 16px;
border-radius: 50%;
cursor: pointer;
font-weight: bold;
bottom: 2px;
}
.tooltip-text {
visibility: hidden;
width: 280px;
background-color: #00927C;
color: #fff;
text-align: left;
padding: 10px;
border-radius: 6px;
position: absolute;
z-index: 999;
bottom: 125%; 
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
font-size: 12px;
line-height: 1.5;
}
.info-icon:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#results-pay-intro {
color: #369248;
font-weight: 600;
font-size: 1.2rem;
margin-top: 40px;
color: #913643;
}
.overall-cost {
color: #913643;
}
#results-funded-hours {
color: #913643;
}
#results-funded-hours span {
font-weight: 700;
text-decoration: underline;
}
.tooltip-calc {
opacity: 1 !important;
width: 100%;
text-align: left;
margin-top: -20px;
font-size: 0.7rem;
display: block;
margin-top: 5px;
}
@media only screen and (max-width: 769px) {
.results-hidden {
height: 0px !important;
margin-top: -20px;
}
}