/* CSS variables */
:root {
    --body-scroll-width: 0px; /* Special Variable used when hiding body scroll. Computed by JS */
}

/* ------------------------------------------------------------ */
/* ---------------------- Modal Styles ------------------------ */
/* ------------------------------------------------------------ */

/* Fixes for bootsrap modals, because we don't use the bootstrap js for openeing them, because it can have compatibility issues with Vue */
.modal {
    display: block;
    opacity: 0;
    pointer-events: none;
    touch-action: none;
}
.modal.show {
    opacity: 1;
}

.modal:not(.show) .modal-content {
    pointer-events: none;
    touch-action: none;
}

.modal-backdrop:not(.show) {
    pointer-events: none;
    touch-action: none;
}

.modal-backdrop.transparent {
    background-color: transparent;
}

/* Overscrolling */
.modal {
    overscroll-behavior: contain;
}

.modal-body {
    overscroll-behavior: contain;
}

/* Remove scroll from body when modal is opened */
body.modal-opened {
    overflow: hidden;
    padding-right: var(--body-scroll-width, 17px);
}

/* ------------------------------------------------------------ */
/* ------------------ End of Modal Styles --------------------- */
/* ------------------------------------------------------------ */


/* ------------------------------------------------------------ */
/* ------------------- Form Input Styles ---------------------- */
/* ------------------------------------------------------------ */

.form-check-input:checked {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.form-check-input:focus {
    border-color: var(--main-color-alpha-20);
    box-shadow: 0 0 0 0.25rem var(--main-color-alpha-20);
}

.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}

/* ------------------------------------------------------------ */
/* --------------- End of Form Input Styles ------------------- */
/* ------------------------------------------------------------ */

/* ------------------------------------------------------------ */
/* --------------------- Other Styles ------------------------- */
/* ------------------------------------------------------------ */