.floating-labels .form-input { position: relative; }
.floating-labels label { font-weight: 100 !important; font-size: 16px !important; }

.floating-labels .form-control { padding: 10px 10px 6px 6px; display: block; border: 1px solid #cdcecf; border-radius: 0 !important; margin: 8px 0; }

.floating-labels select.form-control > option { font-size: 14px; }

.floating-labels .has-error .form-control { border-bottom: 1px solid #ef5350; }

.floating-labels .has-warning .form-control { border-bottom: 1px solid #ffb22b; }

.floating-labels .has-success .form-control { border-bottom: 1px solid #06d79c; }


.floating-labels label { color: #67757c; position: absolute; cursor: auto; top: 5px; -o-transition: 0.2s ease all; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; }

.floating-labels .focused label { top: -20px; font-size: 12px; color: #263238; }

.floating-labels .bar { display: none; }

.floating-labels .highlight { position: absolute; height: 60%; width: 100px; top: 25%; left: 0; pointer-events: none; opacity: 0.5; }

.floating-labels .input-lg ~ label,
.floating-labels .input-lg { font-size: 24px; }

.floating-labels .input-sm ~ label,
.floating-labels .input-sm { font-size: 16px; }

.has-warning .bar:before,
.has-warning .bar:after { background: #ffb22b; }

.has-success .bar:before,
.has-success .bar:after { background: #06d79c; }

.has-error .bar:before,
.has-error .bar:after { background: #ef5350; }

.has-warning .form-control:focus ~ label,
.has-warning .form-control:valid ~ label { color: #ffb22b; }

.has-success .form-control:focus ~ label,
.has-success .form-control:valid ~ label { color: #06d79c; }

.has-error .form-control:focus ~ label,
.has-error .form-control:valid ~ label { color: #ef5350; }

.has-feedback label ~ .t-0 { top: 0; }

.form-group.error input, .form-group.error select, .form-group.error textarea { border: 1px solid #ef5350; }

.form-group.validate input, .form-group.validate select, .form-group.validate textarea { border: 1px solid #06d79c; }

.form-group.error .help-block ul { padding: 0px; color: #ef5350; }
.form-group.error .help-block ul li { list-style: none; }

.form-group.issue .help-block ul { padding: 0px; color: #ffb22b; }
.form-group.issue .help-block ul li { list-style: none; }

.form-group .help { font-size: 10pt; }

.floating-labels { font-size: 11pt !important; }
.floating-labels label { font-size: 11pt !important; }
.floating-labels input, .floating-labels select { font-size: 11pt !important; }

.circle-wrap { float: left; margin: 2rem; width: 150px; height: 150px; background: #ddc7b9; border-radius: 50%; padding: 0 !important}

.circle-wrap .circle .mask,
.circle-wrap .circle .fill { width: 150px; height: 150px; position: absolute; border-radius: 50%; }

.circle-wrap .circle .mask { clip: rect(0px, 150px, 150px, 74px); }

.circle-wrap .circle .mask .fill { clip: rect(0px, 75px, 150px, 0px); background-color: var(--primary-color); }

.circle-wrap.firstPercentage .circle .mask.full,
.circle-wrap.firstPercentage .circle .fill { animation: firstPercentage ease-in-out 3s forwards; }

.circle-wrap.secondPercentage .circle .mask.full,
.circle-wrap.secondPercentage .circle .fill { animation: secondPercentage ease-in-out 3s forwards; }

.circle-wrap.thirdPercentage .circle .mask.full,
.circle-wrap.thirdPercentage .circle .fill { animation: thirdPercentage ease-in-out 3s forwards; }

.circle-wrap .inside-circle { display: flex; flex-direction: column; justify-content: center; position: absolute; width: 130px; height: 130px; border-radius: 50%; background: #fff; margin-top: 10px; margin-left: 10px; z-index: 1; font-weight: 700; font-size: 2em; text-align: center; }

@keyframes firstPercentage {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(160deg); }
}

@keyframes secondPercentage {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(173deg); }
}

@keyframes thirdPercentage {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(180deg); }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
