.custom-switch .custom-control-label::after {
    background-color: white;
}

.custom-control-input:not(checked) ~ .custom-control-label::before {
    background-color: #af4c4c;
    border-color: #913e3e;
    outline: 0;
    -webkit-box-shadow: inset 0px 0px 4px 0px rgb(0 0 0 / 20%), 0 -3px 4px rgb(0 0 0 / 15%);
    box-shadow: inset 0px 0px 4px 0px rgb(0 0 0 / 20%), 0 -3px 4px rgb(0 0 0 / 15%);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #4caf50;
    border: 2px solid #88cf8f;
    outline: 0;
    -webkit-box-shadow: inset 0px 0px 4px 0px rgb(0 0 0 / 20%), 0 -3px 4px rgb(0 0 0 / 15%);
    box-shadow: inset 0px 0px 4px 0px rgb(0 0 0 / 20%), 0 -3px 4px rgb(0 0 0 / 15%);
}

.custom-switch.custom-switch-lg {
    padding-bottom: 1rem;
    padding-left: 2.25rem;
}
.custom-switch.custom-switch-lg .custom-control-label {
    padding-left: 0.75rem;
    padding-top: 0.15rem;
}
.custom-switch.custom-switch-lg .custom-control-label::before {
    border-radius: 1rem;
    height: 1.5rem;
    width: 2.5rem;
}
.custom-switch.custom-switch-lg .custom-control-label::after {
    border-radius: 0.65rem;
    height: calc(1.5rem - 4px);
    width: calc(1.5rem - 4px);
}
.custom-switch.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(1rem);
}

.custom-switch.custom-switch-xl {
    padding-bottom: 1rem;
    padding-left: 2.25rem;
}
.custom-switch.custom-switch-xl .custom-control-label {
    padding-left: 2rem;
    padding-top: 0.5rem;
}
.custom-switch.custom-switch-xl .custom-control-label::before {
    border-radius: 1rem;
    height: 2rem;
    width: 3.5rem;
}
.custom-switch.custom-switch-xl .custom-control-label::after {
    border-radius: 2rem;
    height: calc(2rem - 4px);
    width: calc(2rem - 4px);
}
.custom-switch.custom-switch-xl .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(1.5rem);
}
.sidebar-color {
    background-color: #f4d03f;
    background-image: linear-gradient(0deg, #f4d03f 0%, #16a085 100%);
    background-size: cover;
}

/* LDS */
.lds-grid {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-grid div {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1cc88a;
    animation: lds-grid 1.2s linear infinite;
}
.lds-grid div:nth-child(1) {
    top: 8px;
    left: 8px;
    animation-delay: 0s;
}
.lds-grid div:nth-child(2) {
    top: 8px;
    left: 32px;
    animation-delay: -0.4s;
}
.lds-grid div:nth-child(3) {
    top: 8px;
    left: 56px;
    animation-delay: -0.8s;
}
.lds-grid div:nth-child(4) {
    top: 32px;
    left: 8px;
    animation-delay: -0.4s;
}
.lds-grid div:nth-child(5) {
    top: 32px;
    left: 32px;
    animation-delay: -0.8s;
}
.lds-grid div:nth-child(6) {
    top: 32px;
    left: 56px;
    animation-delay: -1.2s;
}
.lds-grid div:nth-child(7) {
    top: 56px;
    left: 8px;
    animation-delay: -0.8s;
}
.lds-grid div:nth-child(8) {
    top: 56px;
    left: 32px;
    animation-delay: -1.2s;
}
.lds-grid div:nth-child(9) {
    top: 56px;
    left: 56px;
    animation-delay: -1.6s;
}
@keyframes lds-grid {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}