/* form starting stylings ------------------------------- */
.material-group {
    position: relative;
    margin: 5px;
}

.material-group input:not(input[type=checkbox]), .material-group textarea{
    font-size: 16px;
    font-weight: 500;
    padding: 25px 16px 10px 5px;
    display: block;
    width: 100%;
    background: #f9f9f9;
    border: 1px solid #e1e3e8;
    border-radius: 6px;
    color: #1a204a;
}
.material-group input[type=checkbox] {
    width: 24px;
    height: 24px;
    margin: 12px 0 12px 7px;
    border-radius: 6px;
    border: solid 1px #b0b4c1;
    background-color: #ffffff;
}

.material-group select {
    font-size: 18px;
    font-weight: 500;
    text-indent: 80px;
    display: block;
    height: 61px;
    width: 100%;
    background: #f9f9f9;
    border: 1px solid #e1e3e8;
    background: url("../img/icon/dropdown-select.png") no-repeat left #f9f9f9;
    background-position-x: 10px;
    background-position-y: 20px;
    border-radius: 6px;
    color: #1a204a;

    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}
@-moz-document url-prefix() {
    .material-group select {
        text-indent: 37px;
    }
}

.material-group input:focus, .material-group textarea:focus {
    outline: none;
}

/* LABEL ======================================= */
.material-group label:not(.checkbox-label) {
    color: #575d63;
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    right: 16px;
    top: 20px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
    z-index: 100;
}

/* active state */
.material-group input:focus ~ label,
.material-group input:valid ~ label,
.material-group textarea:focus ~ label,
.material-group textarea:valid ~ label {
    top: 10px;
    font-size: 14px;
    color: #575d63;
}

/* BOTTOM BARS ================================= */
/*.material-group .bar 	{ position:relative; display:block; width:300px; }*/
/*.material-group .bar:before, .bar:after 	{*/
/*  content:'';*/
/*  height:2px;*/
/*  width:0;*/
/*  bottom:1px;*/
/*  position:absolute;*/
/*  background:#5264AE;*/
/*  transition:0.2s ease all;*/
/*  -moz-transition:0.2s ease all;*/
/*  -webkit-transition:0.2s ease all;*/
/*}*/
/*.material-group .bar:before {*/
/*  left:50%;*/
/*}*/
/*.material-group .bar:after {*/
/*  right:50%;*/
/*}*/

/*!* active state *!*/
/*.material-group input:focus ~ .bar:before, .material-group input:focus ~ .bar:after {*/
/*  width:50%;*/
/*}*/

/* HIGHLIGHTER ================================== */
.material-group .highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    right: 0;
    pointer-events: none;
    opacity: 0.5;
}

/* active state */
.material-group input.material-checkbox:focus ~ .highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
}
/* HERE IS THE IMPORTANT STUFF RELATED TO THE TOGGLE ITSELF */
.toggle {
    background-color: #cedbea;
    width: 35.5px;
    height: 22px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
}

.toggle-active {
    background-color: blue;
    width: 60px;
    height: 32px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

input[type='checkbox'].material-checkbox {
    display: none;
}

.slider{
    height: 16.9px;
    width: 16.9px;
    background-color: white;
    border-radius: 12px;
    margin: 4px;
}

input.material-checkbox[type='checkbox']:checked + .toggle {
    background-color: #fc5137;
}

input.material-checkbox[type='checkbox']:checked + .toggle > .slider {
    align-self: flex-end;
}

/* END OF IMPORTANT STUFF, START OF COSMETIC STUFF */




/*for range*/
/* This line can be removed it was just for display on CodePen: */
.container {
    margin-top: 125px;
}

.slider-labels {
    margin-top: 10px;
}

/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,.noUi-target * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-touch-action: none;
    touch-action: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.noUi-target {
    position: relative;
    direction: ltr;
}

.noUi-base {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    /* Fix 401 */
}

.noUi-origin {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
}

.noUi-handle {
    position: relative;
    z-index: 1;
}

.noUi-stacking .noUi-handle {
    /* This class is applied to the lower origin when
       its values is > 50%. */
    z-index: 10;
}

.noUi-state-tap .noUi-origin {
    -webkit-transition: left 0.3s,top .3s;
    transition: left 0.3s,top .3s;
}

.noUi-state-drag * {
    cursor: inherit !important;
}

/* Painting and performance;
 * Browsers can paint handles in their own layer.
 */
.noUi-base,.noUi-handle {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* Slider size and handle placement;
 */
.noUi-horizontal {
    height: 4px;
}

.noUi-horizontal .noUi-handle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    left: -7px;
    top: -7px;
    background-color: #fc5137;
}

/* Styling;
 */
.noUi-background {
    background: #e4e2e6;
}

.noUi-connect {
    background: #fc5137;
    -webkit-transition: background 450ms;
    transition: background 450ms;
}

.noUi-origin {
    border-radius: 2px;
}

.noUi-target {
    border-radius: 2px;
}

.noUi-target.noUi-connect {
}

/* Handles and cursors;
 */
.noUi-draggable {
    cursor: w-resize;
}

.noUi-vertical .noUi-draggable {
    cursor: n-resize;
}

.noUi-handle {
    cursor: default;
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

.noUi-handle:active {
    border: 8px solid #fc5137;
    /*border: 8px solid #fc5137;*/
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    left: -14px;
    top: -14px;
}

/* Disabled state;
 */
[disabled].noUi-connect,[disabled] .noUi-connect {
    background: #B8B8B8;
}

[disabled].noUi-origin,[disabled] .noUi-handle {
    cursor: not-allowed;
}

/* for checkbox*/
.form-check .custom-control-label {
    color: #2c2b2c;
    font-size: 12px;
    line-height: 2.7;
    padding-left:15px;
    text-transform: uppercase;
}
.form-check .custom-control-label::after,
.form-check .custom-control-label::before {
    height: 25px;
    width: 25px;
}
.form-check .custom-control-label::before {
    background-color: #fff;
    border: 1px solid #2c2b2c;
    border-radius: 50%;
}

/* When I remove background the icon goes back to that default size */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #fe5c3e !important;
    border-color: #fe5c3e !important;
}


/*for checkbox*/
/*@import url(https://fonts.googleapis.com/css?family=Roboto);*/

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/KFOmCnqEu92Fr1Mu72xKOzY.woff2') format('woff');  /* All Major Browsers */
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/KFOmCnqEu92Fr1Mu5mxKOzY.woff2') format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/KFOmCnqEu92Fr1Mu7mxKOzY.woff2') format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/KFOmCnqEu92Fr1Mu4WxKOzY.woff2') format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/KFOmCnqEu92Fr1Mu7WxKOzY.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/KFOmCnqEu92Fr1Mu7GxKOzY.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/KFOmCnqEu92Fr1Mu4mxK.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.md-checkbox {
    position: relative;
    text-align: right;
}
.md-checkbox.md-checkbox-inline {
    display: inline-block;
}
.md-checkbox label {
    cursor: pointer;
    display: inline;
    line-height: 1.25em;
    vertical-align: top;
    clear: both;
    padding-left: 1px;
}
/*.md-checkbox label:not(:empty) {*/
/*  padding-right: 0.75em;*/
/*}*/
.md-checkbox label:before, .md-checkbox label:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
}
.md-checkbox label:after {
    width: 1.80em;
    height: 1.80em;
    background: #fff;
    border: 2px solid #b0b4c1;
    border-radius: 0.125em;
    cursor: pointer;
    transition: background 0.3s;
}
.md-checkbox label:before {
    z-index: 3;
}
.md-checkbox input[type="checkbox"] {
    outline: 0;
    visibility: hidden;
    width: 1.25em;
    margin: 0;
    display: block;
    float: right;
    font-size: inherit;
    border-radius: 4px;
}
.md-checkbox input[type="checkbox"]:checked + label:after {
    background: #fe5c3e;
    border: none;
}
.md-checkbox input[type="checkbox"]:checked + label:before {
    transform: translate(-3px, 0.3365384615em) rotate(-45deg);
    width: 0.75em;
    height: 0.375em;
    border: 0.125em solid #fff;
    border-top-style: none;
    border-right-style: none;
}
.md-checkbox input[type="checkbox"]:disabled + label:after {
    border-color: rgba(0, 0, 0, 0.26);
}
.md-checkbox input[type="checkbox"]:disabled:checked + label:after {
    background: rgba(0, 0, 0, 0.26);
}
*, *:before, *:after {
    box-sizing: border-box;
}


/*for checkbox*/
.custom-control-label::before{
    width: 24px;
    height: 24px;
}
.custom-control-label::after {
    width: 24px;
    height: 24px
}
.custom-control-input:focus~.custom-control-label::before{
    box-shadow: unset;
}
@media only screen and (max-width: 1200px) {
    .material-group label:not(.checkbox-label) {
        right: 12px;
    }
}

@media only screen and (max-width: 992px) {
    .material-group label:not(.checkbox-label) {
        right: 8px;
    }
}
@media only screen and (max-width: 768px) {
    .material-group label:not(.checkbox-label) {
        right: 6px;
    }
}