/* ============================================================

   Toasts

   ============================================================ */



#toast-container.toast-top-right {

    top: 70px;

}



#toast-container > .toast-success {

    opacity: 1 !important;

}



#toast-container > .toast-error {

    opacity: 1 !important;

}



#toast-container > .toast-warning {

    opacity: 1 !important;

}



#toast-container > .toast-info {

    opacity: 1 !important;

}





/* ============================================================

   Number inputs

   ============================================================ */



input.no-spinner::-webkit-inner-spin-button,

input.no-spinner::-webkit-outer-spin-button {

    -webkit-appearance: none;

    margin: 0;

}



input.no-spinner {

    -moz-appearance: textfield;

}





/* ============================================================

   Flatpickr

   ============================================================ */



.flatpickr-datetime {

    background-color: #fff !important;

    opacity: 1 !important;

}





/* ============================================================

   Vue

   ============================================================ */



[v-cloak] {

    display: none !important;

}





/* ============================================================

   Select2 - Bootstrap 5

   ============================================================ */



/*

   Normal Select2 controls keep the standard Bootstrap 5

   Select2 styling.



   Small Select2 controls originate from:



       class="form-select form-select-sm"



   initializeSelect2() adds "select2-size-sm" to the generated

   Select2 container.



   The dropdown itself is appended outside the Select2 container,

   so initializeSelect2() also adds "select2-dropdown-size-sm"

   when a small Select2 is opened.

*/





/* ============================================================

   Small Select2 control

   ============================================================ */



.select2-container--bootstrap-5.select2-size-sm

.select2-selection--single {

    height: calc(1.5em + 0.375rem + 2px) !important;

    min-height: calc(1.5em + 0.375rem + 2px) !important;

    padding: 0.1875rem 2rem 0.1875rem 0.5rem !important;

    font-family: var(--bs-body-font-family) !important;

    font-size: 0.8125rem !important;

    font-weight: 400 !important;

    line-height: 1.5 !important;

    color: var(--bs-body-color) !important;

    background-color: #fff !important;

    border: 1px solid var(--bs-border-color) !important;

    border-radius: var(--bs-border-radius-sm) !important;

    box-sizing: border-box !important;

    box-shadow: none !important;

}





    /* ============================================================

   Selected value

   ============================================================ */



    .select2-container--bootstrap-5.select2-size-sm

    .select2-selection--single

    .select2-selection__rendered {

        display: block;

        height: auto !important;

        padding: 0 !important;

        margin: 0 !important;

        font-family: var(--bs-body-font-family) !important;

        font-size: 0.8125rem !important;

        font-weight: 400 !important;

        line-height: 1.5 !important;

        color: var(--bs-body-color) !important;

    }





    /* ============================================================

   Placeholder

   ============================================================ */



    .select2-container--bootstrap-5.select2-size-sm

    .select2-selection--single

    .select2-selection__placeholder {

        color: var(--bs-secondary-color) !important;

    }





    /* ============================================================

   Arrow

   ============================================================ */



    .select2-container--bootstrap-5.select2-size-sm

    .select2-selection--single

    .select2-selection__arrow {

        position: absolute;

        top: 50% !important;

        right: 0.625rem !important;

        width: 0.625rem !important;

        height: 0.625rem !important;

        margin: 0 !important;

        transform: translateY(-50%);

    }





        .select2-container--bootstrap-5.select2-size-sm

        .select2-selection--single

        .select2-selection__arrow b {

            margin: 0 !important;

        }





/* ============================================================

   Focus

   ============================================================ */



.select2-container--bootstrap-5.select2-size-sm.select2-container--focus

.select2-selection--single,

.select2-container--bootstrap-5.select2-size-sm.select2-container--open

.select2-selection--single {

    border-color: #86b7fe !important;

    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;

    outline: 0 !important;

}





/* ============================================================

   Small Select2 dropdown

   ============================================================ */



.select2-dropdown.select2-dropdown-size-sm {

    font-family: var(--bs-body-font-family) !important;

    font-size: 0.8125rem !important;

    color: var(--bs-body-color) !important;

    background-color: #fff !important;

    border: 1px solid var(--bs-border-color) !important;

    border-radius: var(--bs-border-radius) !important;

    box-shadow: none !important;

    opacity: 1 !important;

}





    /* ============================================================

   Results

   ============================================================ */



    .select2-dropdown.select2-dropdown-size-sm

    .select2-results,

    .select2-dropdown.select2-dropdown-size-sm

    .select2-results__options {

        background-color: #fff !important;

        opacity: 1 !important;

    }





    /* ============================================================

   Search

   ============================================================ */



    .select2-dropdown.select2-dropdown-size-sm

    .select2-search--dropdown {

        padding: 0.375rem !important;

        background-color: #fff !important;

    }





    .select2-dropdown.select2-dropdown-size-sm

    .select2-search__field {

        width: 100% !important;

        min-height: calc(1.5em + 0.375rem + 2px) !important;

        padding: 0.1875rem 0.5rem !important;

        font-family: var(--bs-body-font-family) !important;

        font-size: 0.8125rem !important;

        font-weight: 400 !important;

        line-height: 1.5 !important;

        color: var(--bs-body-color) !important;

        background-color: #fff !important;

        border: 1px solid var(--bs-border-color) !important;

        border-radius: var(--bs-border-radius-sm) !important;

        box-sizing: border-box !important;

        box-shadow: none !important;

    }





        /* ============================================================

   Search focus

   ============================================================ */



        .select2-dropdown.select2-dropdown-size-sm

        .select2-search__field:focus {

            border-color: #86b7fe !important;

            outline: 0 !important;

            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;

        }





    /* ============================================================

   Options

   ============================================================ */



    .select2-dropdown.select2-dropdown-size-sm

    .select2-results__option {

        padding: 0.1875rem 0.5rem !important;

        font-family: var(--bs-body-font-family) !important;

        font-size: 0.8125rem !important;

        font-weight: 400 !important;

        line-height: 1.5 !important;

        color: var(--bs-body-color) !important;

        background-color: #fff !important;

        opacity: 1 !important;

    }





    /* ============================================================

   Highlighted option

   ============================================================ */



    .select2-dropdown.select2-dropdown-size-sm

    .select2-results__option--highlighted {

        color: #fff !important;

        background-color: var(--bs-primary) !important;

    }





    /* ============================================================

   Selected option

   ============================================================ */



    .select2-dropdown.select2-dropdown-size-sm

    .select2-results__option--selected {

        color: var(--bs-body-color) !important;

        background-color: var(--bs-secondary-bg) !important;

    }





        /* ============================================================

   Selected + highlighted

   ============================================================ */



        .select2-dropdown.select2-dropdown-size-sm

        .select2-results__option--selected.select2-results__option--highlighted {

            color: #fff !important;

            background-color: var(--bs-primary) !important;

        }





/* ============================================================

   login form table container

   ============================================================ */



.table-container {

    width: 100%;

    max-width: 100%;

    overflow: hidden;

}





/* ============================================================

   Mobile optimization forthe recorder

   ============================================================ */



/* Mobile optimization */

@media (max-width: 576px) {



    .mobile-form-card {

        margin-bottom: 1rem !important;

    }



        .mobile-form-card .card-body {

            padding: 1rem;

        }



        .mobile-form-card .form-label {

            margin-bottom: .35rem;

            font-size: .9rem;

        }



        .mobile-form-card .form-control,

        .mobile-form-card .form-select {

            min-height: 44px;

            font-size: 16px; /* Prevents iOS Safari zoom */

        }



        .mobile-form-card .btn {

            min-height: 46px;

            font-size: 15px;

        }

}













/* ============================================================

   prifile header

   ============================================================ */



.profile .profile-header {

    position: relative;

}



    .profile .profile-header .profile-header-cover {

        background-image: var(--profile-cover);

        background-size: cover;

        background-position: center;

        background-repeat: no-repeat;

        height: 10.625rem;

        position: relative;

    }



@media (max-width: 767.98px) {

    .profile .profile-header .profile-header-cover {

        height: 6.25rem;

    }

}



.profile .profile-header .profile-header-cover::before {

    content: '';

    position: absolute;

    inset: 0;

    background: rgba(33, 40, 55, .35);

}



.pace {

    display: none;

}



.girly-color{

    color: hotpink;

}