/* variables */
:root {
    --bs-primary: #3CCCF3;
    --bs-primary-rgb: 60,204,243;
    --bs-body-rgb: 81,85,89;
    --radai-main-page-bg-color: #313539;
    --radai-light-font-color-opacity: 0.9;
    --radai-readonly-font-color-opacity: 0.65;
    --radai-placeholder-font-color-opacity: 0.9;
    --radai-dark-font-color-opacity: 0.9;
}

/* changes on elements style */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    position: relative;
}

/* Bootstrap overrides */
.active {
    background-color: rgb(var(--bs-body-rgb)) !important;
}

.card-header, .card-title {
    font-variant-caps: small-caps;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.nav-link.text-light {
    --bs-text-opacity: var(--radai-light-font-color-opacity);
}

.page-link {
    background: var(--bs-dark) !important;
    color: var(--bs-primary);
}

.page-link:hover {
    color: var(--bs-white) !important;
}

.page-item.active .page-link {
    border-color: var(--bs-white) !important;
    background-color: var(--bs-primary) !important;
    color: rgb(var(--bs-black-rgb)) !important;
}

.form-control, .btn-dark, .form-control-sm {
    color: rgba(var(--bs-white-rgb),var(--radai-light-font-color-opacity));
    background-color: var(--bs-dark);
}

.form-control:focus {
    color: rgba(var(--bs-white-rgb),var(--radai-light-font-color-opacity));
    background-color: var(--bs-dark);
}

.form-control:read-only {
    color: rgba(var(--bs-white-rgb),var(--radai-readonly-font-color-opacity));
    background: var(--bs-dark);
}


.form-check-input {
    background-color: var(--bs-dark);
    border-color: var(--bs-gray-400);
}

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

.form-select {
    color: rgba(var(--bs-white-rgb),var(--radai-light-font-color-opacity));
    background: var(--bs-dark) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px !important;
}

    .form-select:disabled {
        color: rgba(var(--bs-white-rgb),var(--radai-readonly-font-color-opacity));
    }

.input-group-text {
    color: rgba(var(--bs-white-rgb),var(--radai-light-font-color-opacity)) !important;
    background-color: var(--bs-dark) !important;
}

.table-bordered {
    border-radius: 3px;
}

/* custom classes */
.radai-menu {
    min-width: 170px;
}

@media (min-width: 768px) {
    .radai-menu {
        min-width: 196px;
    }
}

.radai-full-height { /* 71px is the height of the header. the vh without the header eliminates scroll bar without setting overflow (dynamic) */
    height: calc(100vh - 71px);
}

.radai-menu-collapse-btn {
    margin-right: -10px;
    background-color: var(--radai-main-page-bg-color);
    border-color: rgb(var(--bs-body-rgb));
    color: rgba(var(--bs-white-rgb),var(--radai-readonly-font-color-opacity));
    border-style: solid;
}

.radai-menu-collapse-btn:active {
    border-color: rgba(var(--bs-white-rgb),var(--radai-light-font-color-opacity));
}

.radai-menu-collapse-btn:hover {
    color: rgba(var(--bs-white-rgb),var(--radai-light-font-color-opacity));
}

.radai-menu-vertical-divider {
    background-color: rgb(var(--bs-body-rgb));
    opacity: 0.75;
    border: solid rgba(var(--bs-black-rgb), .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(var(--bs-black-rgb), 0.3), inset 0 .125em .5em rgba(var(--bs-black-rgb), 0.3);
}

.radai-modal-content {
    color: rgba(var(--bs-white-rgb),var(--radai-light-font-color-opacity)) !important;
    border-radius: 4px;
    box-shadow: 5px 5px 5px black;
}

.radai-icon-button {
    background-color: transparent;
    color: #3CCCF3;
    border-color: transparent;
    text-decoration: none;
}

.radai-custom-shadow {
    box-shadow: 5px 5px 10px 0px black;
}

.radai-main-page {
    background-color: var(--radai-main-page-bg-color) !important;
    width: 100%;
    padding: 15px;
    overflow: auto;
}

/* For tootlip decaying popups. */
.radai-bubble-message {
    position: absolute;
    top: -30px;
    left: 68%;
    transform: translateX(-50%);
    background-color: var(--bs-dark);
    color: #fff;
    padding: 6px 12px;
    border-radius: 15px !important;
    font-size: 14px;
}

/* scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bs-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--bs-primary);
}

::-webkit-scrollbar-corner {
    background: var(--bs-dark);
}

/* calendar-picker */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    border-radius: 4px;
    margin-right: 2px;
    opacity: 0.8;
    filter: invert(0.9);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1
}

/* placeholder */
::placeholder {
    color: rgba(var(--bs-white-rgb),var(--radai-placeholder-font-color-opacity));
}

/* select2 overrides */
.select2-search__field {
    color: rgba(var(--bs-white-rgb),var(--radai-light-font-color-opacity)) !important;
    background-color: var(--bs-dark) !important;
}

.select2-container--bootstrap-5 .select2-selection {
    border-radius: 4px;
    background-color: var(--bs-dark) !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--bs-primary) !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
    color: rgba(var(--bs-white-rgb),var(--radai-light-font-color-opacity)) !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--bs-dark) !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    color: rgba(var(--bs-white-rgb),var(--radai-light-font-color-opacity)) !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__message {
    color: var(--bs-primary) !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    color: rgba(var(--bs-black-rgb),var(--radai-dark-font-color-opacity)) !important;
    background-color: var(--bs-primary) !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    color: rgba(var(--bs-white-rgb),var(--radai-light-font-color-opacity)) !important;
}

.card-header .accordion-button {
    color: inherit;
    background-color: transparent;
    box-shadow: none;
}

.card-header .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%233CCCF3' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.sortable-header {
    cursor: pointer;
    user-select: none;
}

    .sortable-header i {
        font-size: 12px;
    }

    .sortable-header:hover {
        background-color: rgb(var(--bs-body-rgb)) !important;
    }