:root {
    --MainColor: #E96729;
    --MainColorOpacity: #e96629a1;
    --ErrorColor: #D92D20;
    --WhiteColor: #fff;
    --Category1: rgba(231, 92, 27, 5%);
    --Category2: rgba(44, 171, 226, 5%);
    --Category3: rgba(19, 172, 81, 5%);
    --Category4: rgba(206, 150, 255, 5%);
    --Category5: rgba(248, 249, 250, 100%);
    --Color1: #31394B;
    --Color2: #4B4B4B;
    --Color3: #515151;
    --Color4: #31394A;
    --Color5: #363E52;
    --Color6: #A0AEC0;
    --Color7: #718096;
    --Color8: #2D3748;
    --Color9: #E2E8F0;
    --Color10: #E11B24;
    --Color11: #161616;
    --Color12: #555555;
    --Color13: #b8b8b8;
    --Color14: #E6E6E6;
    --Color15: #494949;
    --Color16: #363F54;
    --Color17: #F4F4F4;
    --Color18: #181D27;
    --Color19: #535862;
    --Color20: #414651;
    --Color21: #D5D7DA;
    --Color22: #717680;
    --Color23: #181818;
    --Color24: #171717;
    --Color25: #F2F2F2;
    --Color26: #BDBDBD;
    --Color27: #EB5757;
    --Font: "Almarai", serif;
}

body {
    background-color: #f8f9fa;
}

body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track {
    background: var(--Color17);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

body::-webkit-scrollbar-thumb {
    background: var(--MainColor);
    cursor: pointer;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

body::-webkit-scrollbar-thumb:hover {
    background: var(--MainColorOpacity);
}

* {
    font-family: var(--Font);
}

p {
    margin: 0;
}

.hide {
    display: none !important;
}

.loader-contain {
    position: fixed;
    height: 100%;
    top: 0;
    width: 100%;
    right: 0;
    z-index: 9999999;
    background-color: var(--MainColor);
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.loader {
    width: 100px;
    aspect-ratio: 1;
    position: relative;
}

.loader:before,
.loader:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    inset: 0;
    background:
        radial-gradient(circle 10px, var(--WhiteColor) 94%, #0000),
        repeating-conic-gradient(from -30deg, #0000 0 60deg, var(--WhiteColor) 61deg 120deg);
    -webkit-mask: radial-gradient(circle 15px, #000 calc(100% - 6px), #0000 calc(100% - 5px) 94%, #000);
}

.loader:after {
    animation: l4 1s infinite;
    transform: perspective(300px) translateZ(0px)
}

@keyframes l4 {
    to {
        transform: perspective(300px) translateZ(150px);
        opacity: 0
    }
}

/* .loader {
    width: 48px;
    height: 48px;
    margin: auto;
    position: relative;
}

.loader:before {
    content: '';
    width: 48px;
    height: 5px;
    background: #000;
    opacity: 0.25;
    position: absolute;
    top: 60px;
    left: 0;
    border-radius: 50%;
    animation: shadow 0.5s linear infinite;
}

.loader:after {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--WhiteColor);
    animation: bxSpin 0.5s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
}

@keyframes bxSpin {
    17% {
        border-bottom-right-radius: 3px;
    }

    25% {
        transform: translateY(9px) rotate(22.5deg);
    }

    50% {
        transform: translateY(18px) scale(1, .9) rotate(45deg);
        border-bottom-right-radius: 40px;
    }

    75% {
        transform: translateY(9px) rotate(67.5deg);
    }

    100% {
        transform: translateY(0) rotate(90deg);
    }
}

@keyframes shadow {

    0%,
    100% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1);
    }
} */

.login_page {
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.login_page .left_contain {
    height: 100vh;
    width: 50%;
}

.login_page .left_contain img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.login_page .left_contain svg {
    width: 100%;
    height: 100vh;
}

.login_page .right_contain {
    display: flex;
    justify-content: center;
    width: 50%;
}

.Form_login img {
    width: 45px;
    height: 49px;
}

.Form_login .head {
    color: var(--MainColor);
    font-size: 32px;
    font-weight: bold;
    margin-top: 20px;
}

.Form_login .descrption {
    margin: 0;
    margin-top: 9px;
    font-size: 14px;
    font-weight: bold;
    color: var(--Color6);
}

.Form_login .inputs {
    margin-top: 35px;
}

.Form_login .password_content {
    margin-top: 24px;
}

.Form_login .form-group label {
    font-size: 14px;
    font-weight: 400;
    color: var(--Color8);
    margin-bottom: 5px;
}

.Form_login .form-group input {
    background-color: var(--WhiteColor);
    padding: 0px 20px;
    height: 50px;
    font-size: 14px;
    border: 1px solid var(--Color9);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.Form_login .form-group input::placeholder,
.Requests_items .footer .form_send input::placeholder {
    color: var(--Color6);
}

.Form_login .form-control:focus,
.form-select:focus,
.modal_form .form-group .form-control:focus {
    box-shadow: 0 0 0 .1rem rgb(233 103 41 / 53%);
    color: var(--Color1);
}

.Form_login .password_content,
.Registration_form .password_content {
    position: relative;
}

.Form_login .password_content .Show_password,
.Registration_form .password_content .Show_password {
    background-color: transparent;
    border: navajowhite;
    color: var(--Color6);
    font-size: 14px;
    position: absolute;
    top: 56%;
    left: 15px;
}

.Form_login .Login_button {
    margin-top: 35px;
    text-decoration: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--MainColor);
    color: var(--WhiteColor);
    border: 1px solid var(--MainColor);
    height: 50px;
    font-size: 12px;
    font-weight: bold;
    transition: all .4s ease-in-out;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

.Form_login .Login_button:hover {
    background-color: transparent;
    color: var(--MainColor);
}

.sidenav {
    height: 100%;
    width: 265px;
    background: #f8f9fa;
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    border-left: 1px solid rgba(0, 0, 0, 10%);
    overflow-x: hidden;
    transition: 0.5s;
}

#main {
    margin-right: 265px;
    transition: margin-right .5s;
    -webkit-transition: margin-right .5s;
    -moz-transition: margin-right .5s;
    -ms-transition: margin-right .5s;
    -o-transition: margin-right .5s;
    position: relative;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

.page_head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0px;
}

.page_head .right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.Side_icon button {
    background-color: transparent;
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    font-size: 15px;
    color: var(--Color1);
}

.Side_icon,
.mob_logo {
    display: none;
}

#closeSide {
    display: none;
}

.breadcamp {
    margin-right: 20px;
}

.breadcamp .breadcrumb {
    margin: 0;
    padding: 0;
}

.breadcamp .breadcrumb li::after {
    content: '/';
    color: var(--Color8);
    font-size: 12px;
    margin: 0px 5px;
}

.breadcamp .breadcrumb li:last-child:after {
    display: none;
}

.breadcamp .breadcrumb li a {
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    color: var(--Color8);
}

.breadcamp .breadcrumb li a.current {
    color: var(--Color6);
}

.breadcamp .page_name {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    margin-top: 6px;
}

.mob_logo img {
    width: 45px;
    height: 45px;
}

.nav_head {
    padding: 25px 10px;
    padding-top: 45px;
    border-bottom: 1px solid;
    border-image: linear-gradient(90deg, rgba(224, 225, 226, 0) 0%, rgba(224, 225, 226, 1) 50%, rgba(224, 225, 226, 0) 100%) 2;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.nav_head .right {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
}

.nav_head .right img {
    width: 24px;
    height: 24px;
}

.nav_head .right p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: bold;
    color: var(--Color10);
    padding-right: 5px;
}

.nav_items {
    margin-top: 25px;
    padding: 0px 10px;
}

.nav_items ul {
    margin: 0;
    padding: 0;
    list-style: none;
    padding-bottom: 50px;
}

.nav_items ul li {
    margin-top: 25px;
}

.nav_items ul li:first-child {
    margin: 0;
}

.nav_items ul a {
    padding: 0px 15px;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    color: var(--Color6);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

.nav_items ul .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--WhiteColor);
    width: 30px;
    height: 30px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.nav_items ul .icon svg {
    width: 17px;
    height: 17px;
}

.nav_items ul .icon svg path {
    fill: var(--MainColor);
}

.nav_items ul li a.active {
    height: 50px;
    color: var(--Color8);
    border-radius: 15px;
    background-color: var(--WhiteColor);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.nav_items ul li a.active .icon {
    background-color: var(--MainColor);
}

.nav_items ul li a.active .icon svg path {
    fill: var(--WhiteColor);
}

.nav_items ul li a:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

.nav_items ul li a.active:hover {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}

.pages_content {
    margin-top: 10px;
}

.card {
    border: none;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.card-body {
    padding: 20px;
}

.card-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid;
    border-image: linear-gradient(90deg, rgba(224, 225, 226, 0) 0%, rgba(224, 225, 226, 1) 50%, rgba(224, 225, 226, 0) 100%) 2;
}

.card-head .right div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.card-head .right .ended_alert {
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: var(--MainColor);
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.card-head .right p {
    font-size: 18px;
    color: var(--Color6);
}

.card-head .right p span {
    color: var(--Color8);
}

.f-requst_button {
    border: 1px solid var(--Color4);
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-left: 25px;
    font-weight: 400;
    color: var(--Color1);
    padding: 7px 24px;
    transition: all .4s ease-in-out;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

.f-requst_button:hover {
    color: var(--WhiteColor);
    background-color: var(--MainColor);
    border-color: var(--MainColor);
}

.f-requst_button.active {
    color: var(--WhiteColor);
    background-color: var(--MainColor);
    border-color: var(--MainColor);
}

.no-data {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}

.no-data h1 {
    font-size: 32px;
    font-weight: bold;
    color: var(--Color11);
    margin: 0;
    line-height: 1.8;
}

.no-data p {
    font-size: 16px;
    font-weight: 400;
    color: var(--Color12);
    margin-top: 40px;
}

.EndedRequests_data {
    display: none;
}

.Requests_items {
    background-color: var(--WhiteColor);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 0px 5px;
    margin-top: 25px;
    padding-bottom: 10px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.Requests_items .head {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 13px 20px;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

.Requests_items .head .req_id {
    color: var(--MainColor);
    font-size: 16px;
    font-weight: 400;
}

.Requests_items .head .req_date {
    color: var(--Color13);
    font-size: 12px;
    font-weight: 400;
}

.Requests_items .content {
    padding: 13px 20px;
    overflow-y: scroll;
    direction: ltr;
    margin-top: 10px;
    max-height: 300px;
}

.Requests_items .content .content_head {
    direction: rtl;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 10px;
}

.Requests_items .content .content_head p {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
}

.Requests_items .content .content_head p .titel {
    font-size: 16px;
    font-weight: bold;
    color: var(--Color2);
}

.Requests_items .content .content_head p .titel label {
    font-size: 10px;
    color: var(--Color2);
}

.Requests_items .content .content_head p .data {
    color: var(--Color13);
    font-size: 12px;
    font-weight: 400;
    margin-top: 5px;
}

.content_massage {
    margin-top: 30px;
    direction: rtl;
}

/* width */
.Requests_items .content::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.Requests_items .content::-webkit-scrollbar-track {
    background: var(--Color17);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

/* Handle */
.Requests_items .content::-webkit-scrollbar-thumb {
    background: var(--MainColor);
    cursor: pointer;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.massage_item {
    border: 1px solid var(--Color14);
    padding: 15px 10px;
    margin-top: 15px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.massage_item .massage_head {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.massage_item .massage_head img {
    width: 20px;
    height: 20px;
}

.massage_item .massage_head p {
    font-size: 12px;
    color: var(--Color7);
}

.massage_item .massage_data {
    margin-top: 10px;
    color: var(--Color15);
    font-size: 14px;
}

.Requests_items .footer {
    padding: 13px 20px;
}

.Requests_items .footer .form_send {
    padding: 0px 6px;
    background-color: var(--WhiteColor);
    border: 1px solid var(--Color14);
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}

.Requests_items .footer .form_send form {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.Requests_items .footer .form_send input {
    background-color: transparent;
    width: 100%;
    border: none;
    color: var(--Color1);
    outline: none;
    height: 40px;
    font-size: 16px;
}

.Requests_items .footer .form_send button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

.Requests_items .footer .form_send button:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

.Requests_items .footer .action_button {
    margin-top: 10px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.Requests_items .footer .action_button button:first-child {
    font-size: 16px;
    font-weight: bold;
    color: var(--WhiteColor);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 49%;
    height: 50px;
    transition: all .4s ease-in-out;
    background-color: var(--Color16);
    border: 1px solid var(--Color16);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

.Requests_items .footer .action_button button:first-child:hover {
    background-color: transparent;
    color: var(--Color16);
}

.Requests_items .footer .action_button button:last-child {
    font-size: 16px;
    font-weight: bold;
    color: var(--Color16);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 49%;
    height: 50px;
    transition: all .4s ease-in-out;
    background-color: transparent;
    border: 1px solid var(--Color16);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

.Requests_items .footer .action_button button:last-child:hover {
    background-color: var(--Color16);
    color: var(--WhiteColor);
}

.Requests_items .footer .action_button button i {
    padding: 0px 5px;
}

.them_button1 {
    background-color: var(--MainColor);
    color: var(--WhiteColor);
    font-size: 12px;
    font-weight: 400;
    border: 1px solid var(--MainColor);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 40px;
    padding: 0px 15px;
    transition: all .4s ease-in-out;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

.them_button1:hover {
    background-color: transparent;
    color: var(--MainColor);
}

.them_button2 {
    background-color: transparent;
    color: var(--MainColor);
    font-size: 12px;
    font-weight: 400;
    border: 1px solid var(--MainColor);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 40px;
    padding: 0px 15px;
    transition: all .4s ease-in-out;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

.them_button2:hover {
    background-color: var(--MainColor);
    color: var(--WhiteColor);
}

.form-group.alert_sort .form-select {
    background-color: var(--WhiteColor);
    padding: 0px 20px;
    height: 40px;
    width: 186px;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid var(--Color9);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    background-position: left .75rem center;
    cursor: pointer;
    margin-left: 20px;
}

.alerts_content {
    margin-top: 25px;
}

.alerts_content .table thead tr th {
    font-size: 12px;
    font-weight: 400;
    color: var(--Color6);
    white-space: nowrap;
}

.alerts_content .table tbody tr td,
.alerts_content .table tbody tr td p {
    font-size: 12px;
    font-weight: 400;
    color: var(--Color1);
}

.alerts_content .table .edit_alert,
.alerts_content .table .delete_alert {
    background-color: transparent;
    border: none;
    font-size: 14px;
    margin: 0;
    padding: 0;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

.alerts_content .table .edit_alert:hover,
.alerts_content .table .delete_alert:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}

.alerts_content .table .edit_alert {
    color: var(--Color1);
}

.alerts_content .table .delete_alert {
    color: var(--ErrorColor);
}

.table_butons {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.alerts_content .table tbody tr td i {
    font-size: 12px;
}

.table_footer {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.table_footer .right .pagination {
    margin: 0;
    padding: 0;
}

.table_footer .pagination .page-link {
    background-color: transparent;
    border: none;
    text-align: center;
    font-size: 14px;
    color: var(--Color1);
    padding: 0;
    margin: 0 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    box-shadow: none !important;
}

.table_footer .pagination .page-link:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}

.table_footer .pagination .page-link.Active {
    background-color: var(--Color9);
}

.table_footer .shown_number {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    border: 1px solid var(--Color9);
    border-radius: 10px;
    padding: 5px 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.table_footer .shown_number p {
    margin: 0;
    padding: 0;
    font-size: 16px;
    color: var(--Color4);
    margin-left: 10px;
}

.table_footer .shown_number select {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
    font-size: 16px;
    outline: none;
    color: var(--Color4);
    cursor: pointer;
    direction: ltr;
}

.header_of_modal {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    flex-wrap: nowrap;
    flex-direction: row;
}

.header_of_modal .icon svg {
    width: 50px;
    height: 50px;
}

.header_of_modal .tittel h1 {
    color: var(--Color18);
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.header_of_modal .tittel p {
    color: var(--Color19);
    font-size: 14px;
    font-weight: 400;
    padding: 0;
    margin: 0;
    margin-top: 5px;
}

.modal-content {
    background-color: var(--WhiteColor);
    border: none;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.modal-body {
    padding: 20px;
}

.modal_form .form-group {
    margin-top: 16px;
}

.modal_form .form-group:first-child {
    margin-top: 0;
}

.modal_form .form-group label {
    color: var(--Color20);
    font-size: 14px;
    margin-bottom: 5px;
}

.modal_form .form-group .form-control {
    border-color: var(--Color21);
    font-size: 16px;
    color: var(--Color1);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    background-position: left 0.75rem center;
    height: 45px;
    padding: 0px 10px;
}

.modal_form .form-group .form-control::placeholder {
    color: var(--Color22);
}

.modal_form .form-group textarea.form-control {
    height: 80px;
    padding: 10px;
    resize: none;
}

.modal-footer {
    display: block;
}

.modal_footer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.modal_footer button {
    width: 50%;
}

.Action_success {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.Action_success img {
    width: 250px;
    height: 250px;
}

.Action_success h1 {
    color: var(--Color18);
    font-size: 32px;
    font-weight: bold;
    margin: 0;
}

.Delete_Alert .modal-footer,
.Delete_Alert .modal-header,
.Leave_Alert .modal-footer,
.Leave_Alert .modal-header {
    border: none;
}

.Delete_Alert .modal_footer,
.Leave_Alert .modal_footer {
    justify-content: flex-start;
}

.Delete_Alert .modal_footer button,
.Leave_Alert .modal_footer button {
    width: auto;
}

.Delete_Alert .modal_footer button:first-child,
.Leave_Alert .modal_footer button:first-child {
    background-color: var(--ErrorColor);
    border: 1px solid var(--ErrorColor);
    color: var(--WhiteColor);
    font-weight: bold;
    font-size: 16px;
    height: 45px;
    padding: 0px 20px;
    border-radius: 8px;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.Delete_Alert .modal_footer button:first-child:hover,
.Leave_Alert .modal_footer button:first-child:hover {
    background-color: transparent;
    color: var(--ErrorColor);
}

.Delete_Alert .modal_footer button:last-child,
.Leave_Alert .modal_footer button:last-child {
    background-color: transparent;
    border: 1px solid var(--Color21);
    color: var(--Color20);
    font-weight: bold;
    font-size: 16px;
    height: 45px;
    padding: 0px 20px;
    border-radius: 8px;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.Delete_Alert .modal_footer button:last-child:hover,
.Leave_Alert .modal_footer button:last-child:hover {
    background-color: var(--Color21);
}

.card-head .head2 h1 {
    font-size: 32px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    color: var(--Color23);
}

.card-head .head2 p {
    color: var(--Color6);
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
}

.Registration_form {
    margin-top: 25px;
}

.Registration_form .form-group label {
    color: var(--Color8);
    font-size: 14px;
    margin-bottom: 5px;
}

.Registration_form .form-group .form-control {
    border: 0;
    color: var(--Color24);
    padding: 5px;
    margin: 0;
    font-size: 18px;
    height: 45px;
    background-position: left 0.75rem center;
}

.Registration_form .form-group .form-control::placeholder {
    color: var(--Color6);
}

.Registration_form .form-group .input_contain {
    border: 1px solid var(--Color9);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 0px 10px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.Registration_form .form-group .input_contain.focused {
    border-color: var(--MainColor);
}

.Registration_form .form-group .input_contain svg {
    width: 12px;
    height: 14px;
}

.Registration_form .form-group .form-control:focus {
    box-shadow: none;
}

.Registration_form .form-group {
    margin-bottom: 30px;
}

.error_message {
    color: var(--ErrorColor);
    font-size: 10px;
    font-weight: 400;
    margin: 5px;
    display: block;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.categories_cards {
    margin-top: 25px;
}

.categories_cards .item {
    min-height: 107px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 30px;
    margin-top: 20px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.categories_cards .item h1 {
    color: var(--Color7);
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.cat_color1 {
    background-color: var(--Category1);
}

.cat_color2 {
    background-color: var(--Category2);
}

.cat_color3 {
    background-color: var(--Category3);
}

.cat_color4 {
    background-color: var(--Category4);
}

.cat_color5 {
    background-color: var(--Category5);
}

.staff_filter {
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 20px;
}

.staff_filter .input_search {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 70%;
    border: 1px solid var(--Color9);
    padding: 0;
    margin: 0;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.staff_filter .input_search input {
    background-color: transparent;
    width: 100%;
    border: none;
    height: 50px;
    font-size: 14px;
    font-weight: 400;
    color: var(--Color1);
    outline: none;
    padding-right: 10px;
}

.staff_filter .input_search input::placeholder {
    color: var(--Color6);
}

.staff_filter .input_search button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px;
    border: none;
    background-color: var(--MainColor);
    color: var(--WhiteColor);
    font-size: 20px;
    padding: 0px 10px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

.staff_filter .input_search button:hover {
    background-color: var(--MainColorOpacity);
}

.staff_filter .select_input {
    width: 25%;
}

.staff_filter .select_input select {
    height: 50px;
    font-size: 14px;
    color: var(--Color1);
    background-position: left .75rem center;
    cursor: pointer;
    border: 1px solid var(--Color9);
    padding: 0px 20px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.staff_action {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}

.staff_action .action_button button {
    color: var(--Color7);
    padding: 0;
    font-size: 12px;
    font-weight: bold;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

.staff_action .action_button button i {
    margin-left: 7px;
}

.staff_action .action_button button:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}

.cr-wrapper *,
.cr-wrapper *::before,
.cr-wrapper *::after {
    box-sizing: content-box !important;
}

.cr-wrapper input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.cr-wrapper span {
    font-size: 12px;
    color: var(--Color6);
}

.cr-wrapper {
    display: table;
    position: relative;
    padding-right: 30px;
    cursor: pointer;
    height: 25px;
}

.cr-wrapper input[type="checkbox"]~.cr-input {
    position: absolute;
    top: 50%;
    right: 0;
    height: 15px;
    width: 15px;
    background: var(--WhiteColor);
    transition: background 250ms;
    border: 2px solid var(--Color9);
    border-radius: 5px;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.cr-wrapper input[type="checkbox"]~.cr-input::after {
    content: "";
    position: absolute;
    display: none;
    left: 3px;
    top: 3px;
    width: 10px;
    height: 10px;
    transition: background 250ms;
    background-color: var(--WhiteColor);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.cr-wrapper input:checked~.cr-input::after {
    display: block;
}

.cr-wrapper:hover input[type="checkbox"]:not([disabled])~.cr-input,
.cr-wrapper input[type="checkbox"]:focus~.cr-input {
    background: var(--WhiteColor);
    border-color: var(--Color9);
}

.cr-wrapper input[type="checkbox"]:checked~.cr-input {
    background: var(--MainColor);
    border-color: var(--MainColor);
}

.cr-wrapper:hover input[type="checkbox"]:not([disabled]):checked~.cr-input,
.cr-wrapper input[type="checkbox"]:checked:focus~.cr-input {
    background: var(--MainColor);
    border-color: var(--MainColor);
}

.staff_items .item {
    margin-top: 20px;
    padding: 10px 30px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.staff_items .item .right {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
}

.staff_items .item .right .staff_data p:first-child {
    color: var(--Color7);
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.staff_items .item .right .staff_data p {
    margin-top: 4px;
    font-size: 12px;
    color: var(--Color7);
    font-weight: 400;
    white-space: break-spaces;
}

.staff_items .item .right .staff_data p span {
    color: var(--Color6);
    padding-left: 5px;
}

.staff_items .item .left {
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    align-items: flex-start;
}

.staff_items .item .left button {
    color: var(--Color7);
    font-size: 12px;
    font-weight: bold;
    background-color: transparent;
    border: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

.staff_items .item .left button i {
    padding-left: 5px;
}

.staff_items .item .left button:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}

.choose_notifcation_type {
    padding: 0px 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--Color9);
}

.choose_notifcation_type .butons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    background-color: var(--Color25);
    height: 50px;
    padding: 0px 10px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.choose_notifcation_type .butons button {
    background-color: transparent;
    border: none;
    width: 50%;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    color: var(--Color26);
    height: 40px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

.choose_notifcation_type .butons button.Active {
    background-color: var(--WhiteColor);
    color: var(--MainColor);
    font-weight: bold;
}

.choose_notifcation_type .butons button:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}

.choose_notifcation_type .butons button.Active:hover {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}

.send_notifcation,
.send_sms {
    margin-top: 20px;
}

.delet_account {
    background-color: var(--Color21);
    border: 1px solid var(--Color21);
    color: var(--Color20);
    font-weight: bold;
}

.delet_account:hover {
    background-color: transparent;
    border: 1px solid var(--Color21);
    color: var(--Color21);
}

.subescription_action {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 15px;
    justify-content: center;
    align-items: flex-start;
}

.subescription_action button.Accept_request {
    background-color: var(--MainColor);
    border: 1px solid var(--MainColor);
    color: var(--WhiteColor);
    height: 35px;
    font-size: 12px;
    font-weight: 400;
    padding: 0px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

.subescription_action button.Accept_request:hover {
    background-color: transparent;
    color: var(--MainColor);
}

.subescription_action button.cansel_request {
    background-color: transparent;
    border: 1px solid var(--Color1);
    color: var(--Color1);
    height: 35px;
    font-size: 12px;
    font-weight: 400;
    padding: 0px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

.subescription_action button.cansel_request:hover {
    background-color: var(--Color1);
    color: var(--WhiteColor);
}

.logout {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    color: var(--Color27);
    font-size: 12px;
    gap: 15px;
    font-weight: bold;
    text-decoration: none;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    background-color: transparent;
    border: none;
}

.logout svg {
    width: 20px;
    height: 20px;
}

.logout:hover {
    gap: 2px;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}

.no_Action .right .staff_data {
    padding-right: 30px;
}

.close_modal .close_icon {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--Color22);
    font-size: 20px;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

.close_modal .close_icon:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}

.footerSignature {
    /* position: fixed;
    bottom: 0px;
    left: 0px; */
    width: 100%;
    text-align: center;
    background-color: #f8f9fa;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(0, 0, 0, 10%);
    z-index: 9;
    margin-top: 50px;
}

.footerSignature p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: bold;
    color: var(--Color1);
}

#resetMapBtn {
    position: absolute;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    border-radius: 30px;
    top: 10px;
    bottom: auto;
    right: 10px;
    font-size: 12px;
    padding: 10px 25px;
    background: var(--MainColorOpacity);
    color: var(--Color18);
    font-weight: bold;
    z-index: 3;
}

#map {
    width: 100%;
    border-radius: 30px;
    position: relative;
    z-index: 1 !important;
    background-color: transparent;
    min-height: 80vh;
}

.citiesContent .item {
    margin-top: 25px;
    display: flex;
    border: 1px solid #DFDFDF;
    border-radius: 12px;
    padding: 16px 32px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

.citiesContent .item .cityName {
    font-size: 24px;
    font-weight: 700;
    color: var(--Color7);
}

.citiesContent .item .left {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.citiesContent .item .left button {
    background-color: transparent;
    border: none;
    font-size: 12px;
    font-weight: bold;
    color: var(--Color7);
    cursor: pointer;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

.citiesContent .item .left button:hover {
    transform: scale(1.2);
}

.citiesContent .item .left button.deleteCity {
    color: var(--ErrorColor);
}

.citiesContent .item .left button.editCity {
    color: var(--blackColor);
}

.switch {
    -webkit-user-select: none;
}

.switch label {
    font-weight: normal;
    font-size: 13px;
    display: inline-block;
}

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    position: absolute;
    right: -9999px;
    opacity: 0;
}

.switch label input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
    padding: 0;
}

.switch label input[type="checkbox"]:checked+.lever.switch-col-blue {
    background-color: #538ABA;
}

.switch label .lever {
    content: "";
    display: inline-block;
    position: relative;
    width: 26px;
    height: 12px;
    background-color: #F48a88;
    border-radius: 15px;
    margin-right: 10px;
    transition: background 0.3s ease;
    vertical-align: middle;
}

.switch label input[type="checkbox"]:checked+.lever.switch-col-blue:after {
    background-color: #01529a;
}

.switch label input[type="checkbox"]:checked+.lever:after {
    left: 17px;
}

.switch label .lever:after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #ef5350;
    border-radius: 21px;
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
    left: -5px;
    top: -2px;
    transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
    cursor: pointer;
}