body {
     margin:0; padding:0;
     font-family: var(--bs-font-sans-serif)!important;
}

a {
    text-decoration: none;
    color: inherit;
}

.phone {
    font-size: 26px; 
    color: #64a09a; 
}

.headlineUI {
    padding-top: 12px;
    font-size: 26px;
    color: #00867c;
    transition: 0.2s;
}

.headerlogo {
    width: 100px;
    padding-top: 5px;
    transition: 0.2s;
}

.mixtureHeadline {
    font-size: 24px;
    color: #00867c;
}

.tlLogo {
     width: 150px;
     transition: 0.2s;
}

.green {
    color: #00867c;
}

.white {
    color: #ffffff;
}

.lightGray {
    color: #dddede;
}

.gray {
    color: #999999;
}

.red {
    color: #aa0000;
}

.pointer {
    cursor: pointer;
}

.small {
    font-size: 10px;
}

.bold {
    font-weight: bold;
}

.fieldDescription {
    font-size: 16px;
}

.resultText {
    font-size: 16px;
    color: #999999;
}

.resultTextValue {
    font-size: 32px;
}

.resultTextCurrency {
    font-size: 16px;
    font-weight: bold;
}

.hoverGreen { transition: 0.2s; }
.hoverGreen:hover {
    color: #00867c;
    text-shadow: 1px 1px 1px #dddede, 0 0 1em #dddede, 0 0 0.1em #dddede;
}

li::marker {
  color: #00867c;
}

.smButton {
    border-radius: 20px;
    display: inline;
    background-color: #ff0000;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    font-size: 20px;
    line-height: 40px;
    color: #0e6a63;
    background-color: #f5f5f5;
    transition: 0.2s;
    cursor: pointer;
}

.smButton:hover {
    background-color: #ffffff;
    color: #00867c;
    text-shadow: 1px 1px 1px #dddede, 0 0 1em #dddede, 0 0 0.1em #dddede;
}

.footerInfo {
    display: inline;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 10px;
    color: #dddede;
    transition: 0.2s;
}

.footerLink {
    display: inline;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 10px;
    color: #dddede;
    transition: 0.2s;
    cursor: pointer;
}

.footerLink:hover {
    color: #ffffff;
    text-shadow: 1px 1px 1px #747474, 0 0 1em #747474, 0 0 0.1em #747474;
}

.footer {
        background-color: #00867c;
    transition: 0.2s;
}

.footer:hover {
    background-color: #0d8f85;
    
}

.rounded-bottom-dsv {
    border-bottom-right-radius:.45rem !important;
    border-bottom-left-radius:.45rem!important;
}
.rounded-top-dsv {
    border-top-right-radius:.45rem !important;
    border-top-left-radius:.45rem!important;
}

.form-control:focus {
  border-color: #00867c;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 134, 124, 0.6);
}


.consultText {
    font-size: 20px;
}

.fieldErrorBorder {
    border: 3px solid #ff0000;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 134, 124, 0.6);
}


input[type=button] {
        font-family: 'FontAwesome', 'Arial';
        width: 100%;
        border-radius: 4px;
	outline: none;
	border:0; 
	color: #ffffff;
	transition: 0.2s;
	padding-top: 5px;
	padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 5px;
        background-color: #00867c;
}

input[type=button]:hover {
	color: #00867c;
	background-color: #e6f2f1;
	transition: 0.2s;
}

input[type=button]:active {
	color: #e4f3ff;
	background-color: #a3cced;
	transition: 0.2s;
}   

input[type=button]:disabled {
	color: #999999;
	background-color: #efefef;
	transition: 0.2s;
}




@media screen and (max-width: 767px) {
   .headlineUI {
        padding-top: 13px;
        font-size: 24px;
    }
    .headerlogo {
        width: 100px;
    }
    .tlLogo {
        width: 150px;
   }
}

@media screen and (max-width: 510px) {
   .headlineUI {
        padding-top: 13px;
        font-size: 20px;
    }
    .headerlogo {
        width: 80px;
    }
    .consultText {
        font-size: 16px;
    }

}

@media screen and (max-width: 420px) {
   .headlineUI {
        font-size: 20px;
    }
    .headerlogo {
        padding-top:10px;
        width: 60px;
    }
    .consultText {
        font-size: 10px;
    }
    .tlLogo {
        width: 100px;
   }
   .resultText {
        font-size: 12px;
    }
}

@media screen and (max-width: 330px) {
    .headlineUI {
        font-size: 16px;
    }
    
}

@media screen and (max-width: 310px) {
    .headerlogo {
        display: none;
    }
    .tlLogo {
       width: 80px;
   }
}