﻿/* colors */
:root {
    --color-blue: #142f90;
    --color-blue-light: #142f90;
    --color-yellow: #e5c693;
    --color-gray: #8c8c8c;
    --color-light-bg: #fafafa;
    --color-dark: #232425;
    --color-light-gray: #F3F3F3;
    --color-medium-gray: #d7d7d7;
    --color-error: #823329;
    --color-error-light: #cf9d97;
}

/* buttons */
.mud-button-filled.mud-button-filled-secondary {
    border-radius: 20px !important;
}

.btn-primary {
    white-space: nowrap;
    background-color: var(--color-blue);
    color: #fff;
    transition: opacity 0.5s;
    border-color: var(--color-blue);
    border-radius: 20px;
}

    .btn-primary:hover {
        opacity: 0.87;
        background-color: var(--color-blue);
        border-color: var(--color-blue);
    }

.btn-soft-secondary {
    border-radius: 20px;
    background-color: var(--color-yellow);
    color: var(--color-dark);
    transition: opacity 0.5s;
    white-space: nowrap;
}

    .btn-soft-secondary:hover {
        opacity: 0.87;
        background-color: var(--color-yellow);
        border-color: var(--color-yellow);
    }

.btn-soft-primary {
    border-radius: 20px;
    background-color: var(--color-blue);
    color: var(--color-dark);
    transition: opacity 0.5s;
    white-space: nowrap;
    color: #fff;
}


    .btn-soft-primary:hover {
        opacity: 0.87;
        background-color: var(--color-blue);
        border-color: var(--color-blue);
    }

.btn-blue {
    background-color: var(--color-blue);
    color: #fff;
    transition: opacity 0.5s;
}

.btn-soft-secondary:hover,
.btn-soft-secondary:focus,
.btn-soft-secondary:active {
    opacity: 0.87;
    background-color: var(--color-yellow);
    color: var(--color-dark);
    box-shadow: none;
}

    .btn-soft-secondary:active:focus {
        box-shadow: none;
    }

.btn.btn-soft-danger {
    border-radius: 20px;
    background-color: var(--color-medium-gray);
    color: var(--color-dark);
    transition: opacity 0.5s;
}

    .btn.btn-soft-danger:hover {
        opacity: 0.87;
    }

    .btn.btn-soft-danger i {
        color: var(--color-error);
    }

.btn.btn-soft-success {
    border-radius: 20px;
    background-color: var(--color-blue);
    color: #fff;
    transition: opacity 0.5s;
}

.btn.btn-soft-succes:hover {
    opacity: 0.87;
}

.btn-success {
    border-radius: 20px;
    background-color: var(--color-blue);
    color: #fff;
    transition: opacity 0.5s;
    border-color: var(--color-blue);
}

    .btn-success:hover {
        background-color: var(--color-blue);
        border-color: var(--color-blue);
        opacity: 0.87;
    }

.btn-info {
    background-color: var(--color-blue);
    border-radius: 20px;
    border-color: var(--color-blue);
    transition: opacity 0.5s;
}

    .btn-info:hover,
    .btn-info:active,
    .btn-info:focus {
        background-color: var(--color-blue);
        border-radius: 20px;
        border-color: var(--color-blue);
        opacity: 0.87;
    }

        .btn-info:active:focus {
            box-shadow: none;
        }

.btn-circle {
    padding: 0.25rem 0.55rem;
    font-size: 1.2rem;
}

.btn-soft-info {
    background-color: var(--color-medium-gray);
    border-radius: 20px;
    color: var(--color-dark);
    transition: opacity 0.5s;
}

    .btn-soft-info:hover,
    .btn-soft-info:active,
    .btn-soft-info:focus {
        opacity: 0.87;
        background-color: var(--color-medium-gray);
        color: var(--color-dark);
    }

.btn-soft-dark {
    background-color: var(--color-blue);
    color: #fff;
    border-color: var(--color-blue);
    transition: opacity 0.5s;
    border-radius: 20px;
}

    .btn-soft-dark:active, .btn-soft-dark:focus, .btn-soft-dark:hover {
        background-color: var(--color-blue);
        color: #fff;
        border-color: var(--color-blue);
        opacity: 0.87;
    }

.btn-soft-light {
    white-space: nowrap;
    background-color: var(--color-medium-gray);
    color: var(--color-dark);
    transition: opacity 0.5s;
    border-color: var(--color-medium-gray);
    border-radius: 20px;
}

    .btn-soft-light:hover,
    .btn-soft-light:active,
    .btn-soft-light:focus {
        opacity: 0.87;
        background-color: var(--color-medium-gray);
        border-color: var(--color-medium-gray);
        color: #fff;
        color: var(--color-dark);
    }

/* backgrounds */
.navbar-brand-box,
.navbar-header {
    background-color: var(--color-light-bg);
}

.authentication-bg {
    background-image: none;
    background-color: var(--color-light-bg);
    background: linear-gradient(180deg, rgba(20,47,144,0.3) 0%, rgba(250,250,250,1) 50%);
}

.bg-primary {
    background-color: var(--color-blue) !important;
}

.btn-soft-primary:active, .btn-soft-primary:focus, .btn-soft-primary:hover {
    background-color: var(--color-blue);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: none;
}

@media(min-width: 992px) {
    .vertical-menu-btn {
        display: none;
    }
}

.mud-alert-filled-info {
    background-color: var(--color-blue);
}

.mud-alert-filled-warning {
    background-color: var(--color-error);
}

    .mud-snackbar-content-action .mud-icon-root.mud-svg-icon,
    .mud-snackbar .mud-icon-root.mud-svg-icon,
    .mud-alert-filled-warning .mud-icon-root.mud-svg-icon,
    .mud-alert-filled-info .mud-icon-root.mud-svg-icon {
        fill: #fff !important;
    }


/* menu */
#sidebar-menu ul li a {
    color: var(--color-dark) !important;
}

    #sidebar-menu ul li a:hover {
        color: var(--color-dark) !important;
    }

    #sidebar-menu ul li a i {
        color: var(--color-yellow) !important;
        font-size: 1.2rem;
        margin-right: 0.4rem
    }

.sidebar-menu-item:hover,
.sidebar-menu-item:focus {
    background-color: var(--color-light-bg) !important;
}

    .sidebar-menu-item:focus > span {
        color: var(--color-dark) !important;
    }


/* progress bar */
.mud-progress-linear.mud-progress-linear-color-info:not(.mud-progress-linear-buffer) .mud-progress-linear-bar {
    background-color: var(--color-blue);
}

.mud-progress-linear .mud-progress-linear-bars {
    background-color: var(--color-light-gray);
}

/* headings */
.card-title {
    font-size: 18px;
    color: var(--color-blue);
}

/* topbar */
.user .user-name {
    font-weight: 500;
}

/* table grid */
.table-scroll {
    min-width: 890px;
}

/* search mobile */
.search-field {
    width: 100%;
}

@media (min-width: 600px) {
    .search-field {
        width: 30%;
    }
}

/* calendar */
.e-schedule .e-month-view .e-date-header-wrap table td.e-current-day, .e-schedule .e-month-agenda-view .e-date-header-wrap table td.e-current-day {
    color: var(--color-blue) !important;
    font-weight: 600;
}

.e-calendar .e-content td.e-selected span.e-day, .e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day {
    background-color: var(--color-yellow) !important;
    color: var(--color-dark) !important;
    border-radius: 50px;
}

.e-calendar .e-btn.e-today.e-flat.e-primary, .e-calendar .e-css.e-btn.e-today.e-flat.e-primary {
    background-color: var(--color-blue) !important;
    border-color: var(--color-blue) !important;
    border-radius: 20px;
    padding: 0.3rem 0.9rem;
    transition: opacity 0.5s;
}

    .e-calendar .e-btn.e-today.e-flat.e-primary:hover, .e-calendar .e-css.e-btn.e-today.e-flat.e-primary:hover {
        background-color: var(--color-blue) !important;
        border-color: var(--color-blue) !important;
        opacity: 0.87;
    }

.e-calendar .e-content td:hover span.e-day, .e-calendar .e-content td:focus span.e-day, .e-bigger.e-small .e-calendar .e-content td:hover span.e-day, .e-bigger.e-small .e-calendar .e-content td:focus span.e-day {
    border-radius: 50px;
}

.e-schedule .e-month-view .e-current-date .e-date-header, .e-schedule .e-month-agenda-view .e-current-date .e-date-header {
    background-color: var(--color-blue) !important;
    padding: 3px 7px;
    transition: opacity 0.5s;
}

.e-schedule .e-month-view .e-date-header:hover {
    text-decoration: none !important;
    opacity: 0.87;
}

.e-schedule .e-next button,
.e-schedule .e-prev button {
    border-radius: 50px !important;
}

.e-toolbar .e-toolbar-item .e-tbar-btn:hover,
.e-toolbar .e-toolbar-item .e-tbar-btn:focus {
    background: var(--color-medium-gray);
    border-color: #6c757d;
    color: var(--color-dark) !important;
}

    .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text,
    .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-icons {
        color: var(--color-dark);
    }

.e-toolbar .e-toolbar-item .e-tbar-btn:active {
    background: var(--color-medium-gray);
    color: var(--color-dark);
}

.e-toolbar .e-toolbar-item .e-tbar-btn:hover:active .e-tbar-btn-text,
.e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text,
.e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
    color: var(--color-dark) !important;
}

.e-calendar .e-header .e-prev:hover, .e-calendar .e-header .e-next:hover, .e-bigger.e-small .e-calendar .e-header .e-prev:hover, .e-bigger.e-small .e-calendar .e-header .e-next:hover,
.e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active, .e-bigger.e-small .e-calendar .e-header .e-prev:active, .e-bigger.e-small .e-calendar .e-header .e-next:active {
    background: var(--color-medium-gray);
    color: var(--color-dark) !important;
}

    .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span, .e-bigger.e-small .e-calendar .e-header .e-prev:hover > span, .e-bigger.e-small .e-calendar .e-header .e-next:hover > span,
    .e-calendar .e-header button.e-prev:active span, .e-calendar .e-header button.e-next:active span, .e-bigger.e-small .e-calendar .e-header button.e-prev:active span, .e-bigger.e-small .e-calendar .e-header button.e-next:active span {
        color: var(--color-dark) !important;
    }

/* inputs */
.mud-input-underline {
    border: 1px solid #e2e5e8;
    padding: 0.2rem 0.9rem 0.2rem 0.9rem;
    border-radius: 0.25rem;
}

.mud-input.mud-input-underline:before {
    display: none;
}

.mud-theme-primary {
    background-color: var(--color-blue) !important;
}

.mud-icon-root.mud-svg-icon {
    fill: var(--color-blue) !important;
}

.mud-input .mud-icon-root.mud-svg-icon {
    fill: var(--color-gray) !important;
}

.form-select:focus {
    box-shadow: none;
}

.form-check-input:checked {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

.input-fix input.mud-input-slot {
    padding: 0.35rem;
}

    .input-fix input.mud-input-slot svg {
        font-size: 1.25rem;
    }

.btn-fix {
    text-transform: none !important;
    font-size: 0.8rem;
    max-width: 180px
}

.checkbox-fix label {
    margin-bottom: 0;
}

.checkbox-fix .mud-icon-button {
    padding: 0;
}

.badge {
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
}

    .badge.bg-success {
        background-color: #698C53 !important;
    }

    .badge.bg-warning {
        background-color: var(--color-yellow) !important;
    }

input.mud-input-slot.mud-input-root.mud-input-root-outlined,
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border: 1px solid #e2e5e8 !important;
}

.mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover .mud-input-outlined-border {
    border: 1px solid #e2e5e8 !important;
}

/* filters */
.filters-width .form-label {
    width: 50%;
    margin: 0;
}

.filters-width .gridjs-th-content > input,
.filters-width .gridjs-th-content > select,
.filter-width-fix {
    width: 50%;
}

.gridjs-container .mud-input-control.mud-input-input-control {
    margin-top: 0;
}

@media (min-width: 576px) {
    .filters-width .gridjs-th-content > input, .filters-width .gridjs-th-content > select, .filter-width-fix, .filters-width .form-label {
        width: 100%;
    }

    .filters-width .form-label {
        margin-bottom: 0.5rem;
    }
}

/* other */
.mud-pagination .mud-pagination-item .mud-icon-button[disabled] .mud-icon-root.mud-svg-icon {
    fill: var(--color-gray) !important;
}

.floating-label {
    background-color: #959595 !important;
    z-index: 3;
}

.btn-import .mud-icon-root.mud-svg-icon {
    fill: var(--color-dark) !important;
}

th.gridjs-th-sort .gridjs-th-content {
    width: 100%;
}

th.gridjs-th .gridjs-th-content {
    text-overflow: unset;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    padding: 10px 5px 5px;
}

.mud-input-label-inputcontrol {
    top: 4px;
}

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 27px;
}

.btn-settings {
    background-color: #f8f9fa !important;
    transition: background-color 0.5s;
}

    .btn-settings:hover {
        background-color: #ececec !important;
    }

.mud-input-control.mud-input-number-control.mud-input-showspin .mud-input:not(.mud-input-adorned-end) input,
.mud-input > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
    padding: 0.47rem 0.75rem;
}

.mud-input.mud-input-outlined.mud-input-adorned-end {
    padding-right: 12px;
}

.mud-select .mud-select-input .mud-input-adornment-end {
    position: relative;
    left: 6px;
}

.mud-input-control.mud-input-number-control .mud-input-numeric-spin {
    right: 8px;
}

.double-border-fix .mud-input {
    margin-top: 0 !important;
}

.checkbox-p-0 .mud-button-root {
    padding: 0 !important;
}

.checkbox-p-0 .mud-checkbox {
    margin-bottom: 0 !important;
}

.data-input-width input.mud-input-slot {
    width: 80px;
}

.nowrap {
    white-space: nowrap;
}

.spinner-border {
    width: 20px;
    height: 20px;
}

.margin-fix-0 .mud-input-control {
    margin-top: 0;
}


.gridjs-table .mud-checkbox {
    justify-content: center;
}