.form-control{
    border-radius: 2rem;
    box-shadow: inset 2px 2px 10px #b8b9be91, inset -3px -3px 7px #FFF;
    border: 1px solid #fff;
    text-align: center;
    font: 2em;
    font-family: 'Inter', sans-serif;
}
.form-control:focus{
    border-color: #fff;
    outline: 0;
    box-shadow: inset 2px 2px 10px #b8b9be91, inset -3px -3px 7px #FFF;
}
.noUi-horizontal {
height: 5px;
}
.noUi-target {
background: #fff;
box-shadow: inset 2px 2px 10px #b8b9be91, inset -3px -3px 7px #FFF;
border-radius: 10px;
border: 0;
margin: 15px 0;
cursor: pointer;
}
.noUi-horizontal {
height: 20px;
}
.noUi-target {
position: relative;
direction: ltr;
}
.noUi-target, .noUi-target * {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
touch-action: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;
}
.noUi-handle {
position: absolute;
border: 1px solid #fff;
border-radius: 50%;
width: 50px;
height: 50px;
background: #fff;
transition: all 250ms cubic-bezier(0.27, 0.01, 0.38, 1.06);
box-shadow: 2px 2px 10px #b8b9be, -2px -2px 4px #ffffff;
}
.noUi-handle::after, .noUi-handle::before{
background: #fff;
}
.noUi-tooltip {
border: 0px solid #D9D9D9;
top: 10%;
z-index: 1;
padding: 0px;
}
.noUi-horizontal .noUi-handle {
width: 40px;
height: 40px;
left: -17px;
top: -12px;
}
input[type="checkbox"]{
position: relative;
-webkit-appearance:none;
height: 56px;
width: 140px;
border: 0px solid #ececec;
box-shadow: inset 2px 2px 10px #b8b9be91, inset -3px -3px 7px #FFF;
outline: none;
cursor: pointer;
border-radius: 40px;
}
input[type="checkbox"]:before,
input[type="checkbox"]:after{
content: "";
position: absolute;
margin:auto;
top: 0;
bottom: 0;
transition: 0.3s;
}
input[type="checkbox"]:before{
height: 40px;
width: 40px;
box-shadow: 2px 2px 10px #b8b9be, -2px -2px 4px #ffffff;
border-radius: 50%;
left: 15px;
}

input[type="checkbox"]:checked:before{
left: 86px;
}

.btn-red{
    background-color: #e7453b;
    color: #fff;
    border-radius: 3rem;
    box-shadow: 2px 2px 25px #f5cece, -2px -2px 25px #f5cece;
}
.btn-red:hover{
    background-color: #e7453b;
    color: #fff;
}
.btn-red:focus{
    box-shadow: 0 0 0 .25rem #fff;
    box-shadow: 2px 2px 25px #f5cece, -2px -2px 25px #f5cece;
}
.noUi-base, .noUi-connects {
    width: 90%;
}
html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
    right: -30px;
}

.card-body {
    padding: 1rem 1.5rem;
}