@view-transition {
    navigation: auto;
}

html {
    --gdk-birthday-gradient: linear-gradient(-45deg, rgba(98,250,173,0.85) 0%, rgba(221,97,231,0.85) 100%);
    --gdk-birthday-gradient-subtle: linear-gradient(-45deg, rgba(98,250,173,0.5) 0%, rgba(221,97,231,0.5) 100%);
}

::-webkit-scrollbar {
    width: 12px;
    height: 0;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    height: 1em;
    border: 3px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 1em;
    background-color: rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.025);
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--ct-primary-rgb), 0.5);
}

::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

/* ::highlight pseudo-element is supported by edge */
::highlight(speech-synth) {
    background-color: var(--ct-primary-bg-subtle);
    color: var(--ct-link-color);
}

/* symfony-ux-live-component hides all elements containing [data-loading=""] which hides loading ladda buttons */
.ladda-button[data-loading=""] {
    display: inline !important;
}

.bg-success-dim {
    background-color:rgba(var(--ct-success-rgb),0.5) !important;
}

.bg-warning-dim {
    background-color:rgba(var(--ct-warning-rgb),0.5) !important;
}

.bg-danger-dim {
    background-color:rgba(var(--ct-danger-rgb),0.5) !important;
}

.bg-dark-dim {
    background-color:rgba(var(--ct-dark-rgb),0.1) !important;
}

.ql-snow .ql-picker {
    color: var(--ct-primary-text-emphasis) !important;
}

.ql-snow .ql-Table-Input .ql-picker-options {
    padding: 3px 5px;
    width: 152px;
}

.ql-snow .ql-Table-Input .ql-picker-item {
    border: 1px solid transparent;
    float: left;
    height: 16px;
    margin: 2px;
    padding: 0;
    width: 16px;
    background: lightsteelblue;
}

.ql-snow .ql-Table-Input .ql-picker-item:hover, .ql-snow .ql-Table-Input .ql-picker-item.ql-picker-item-highlight {
    border-color: #000;
    background: steelblue;
}

.ql-snow .ql-Table-Input.ql-picker {
    width: 28px;
}

.ql-snow .ql-Table-Input.ql-picker .ql-picker-label {
    padding: 2px 4px;
}

.menu-chevron {
    font-size:xx-small !important;
    position: absolute;
    top:30%;
    right:0;
    line-height: 1rem;
    transition: all .25s ease-in-out;
}

.side-nav-link.active.collapsed > .menu-chevron  {
    transform: rotate(-90deg);
}

.side-nav-link[aria-expanded='true'].active > .menu-chevron  {
    transform: rotate(0deg);
}

.side-nav-link[aria-expanded='true'] > .menu-chevron  {
    transform: rotate(90deg);
}

.select2-results__options .select2-results__option--selected {
    background-color: var(--ct-primary-bg-subtle) !important;
    color: var(--ct-primary-text-emphasis) !important;
    font-style: italic;
}

.select2-results__options .select2-results__option--highlighted {
    background-color: var(--ct-primary) !important;
    color: white !important;
}

.authorization-configuration {
    height: 650px;
}

.table-active>* {
    --ct-table-color-state: var(--ct-white) !important;
    --ct-table-bg-state: var(--ct-primary) !important;
}

.table-attribute-header>* {
    --ct-table-color-state: var(--ct-tertiary-color) !important;
    --ct-table-bg-state: var(--ct-focus-ring-color) !important;
}

.preview {
    color: var(--ct-body-color);
    line-height: 2rem;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    height:100%;
    margin-right:35px;
    color:var(--ct-heading-color);
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--ct-tertiary-bg);
    opacity: 1;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--ct-dark);
}

.pointer {
    cursor: pointer !important;
}

footer {
    color:var(--ct-secondary) !important;
}

footer a {
    color:var(--ct-secondary) !important;
}

.table-clickable td {
    cursor: pointer;
}

div.modal[data-action="delete"] div.modal-header {
    --ct-bg-opacity: 1;
    --ct-text-opacity: 1;
    background-color: rgba(var(--ct-danger-rgb),var(--ct-bg-opacity))!important;
    color: rgba(var(--ct-white-rgb),var(--ct-text-opacity))!important;
}

div.modal[data-action="delete"] button.gdkTableConfirmActionModalSubmit {
    --ct-btn-color: #fff;
    --ct-btn-bg: #fa5c7c;
    --ct-btn-border-color: #fa5c7c;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #e75573;
    --ct-btn-hover-border-color: #e75573;
    --ct-btn-focus-shadow-rgb: 251,116,144;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #e75573;
    --ct-btn-active-border-color: #e75573;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: #fa5c7c;
    --ct-btn-disabled-border-color: #fa5c7c;
    box-shadow: var(--ct-btn-box-shadow) rgba(var(--ct-danger-rgb),.5);
}

.apex-charts {
    min-height: 10px!important
}

.apex-charts text {
    font-family: var(--ct-font-sans-serif), sans-serif !important
}

.apex-charts .apexcharts-canvas {
    margin: 0 auto
}

.apexcharts-datalabels text,.apexcharts-tooltip-text,.apexcharts-tooltip-title,.apexcharts-xaxistooltip-text {
    font-family: var(--ct-font-sans-serif), sans-serif !important
}

.apexcharts-tooltip {
    border: 1px solid var(--ct-border-color)!important;
    background-color: var(--ct-secondary-bg)!important;
    -webkit-box-shadow: var(--ct-box-shadow)!important;
    box-shadow: var(--ct-box-shadow)!important
}

.apexcharts-tooltip * {
    font-family: var(--ct-font-sans-serif), sans-serif !important;
    color: var(--ct-tertiary-color)!important
}

.apexcharts-tooltip .apexcharts-tooltip-title {
    background-color: rgba(var(--ct-light-rgb),.75)!important;
    border-bottom: 1px solid var(--ct-border-color)!important
}

.apexcharts-tooltip.apexcharts-theme-dark * {
    color: #fff!important
}

.apexcharts-legend-series {
    font-weight: 600
}

.apexcharts-gridline {
    pointer-events: none;
    stroke: var(--ct-border-color-custom)
}

.apexcharts-legend-text {
    color: var(--ct-body-color)!important;
    font-family: var(--ct-font-sans-serif), sans-serif !important;
    font-size: 13px!important;
    vertical-align: middle
}

.apexcharts-legend-marker {
    vertical-align: middle;
    margin-right: 5px!important;
    top: -1px!important
}

.apexcharts-pie-label {
    fill: #fff!important
}

.apex-charts .apexcharts-bar-series path,.apex-charts .apexcharts-heatmap-series rect,.apex-charts .apexcharts-pie-series path,.apex-charts .apexcharts-treemap rect {
    stroke: var(--ct-body-bg)
}

.apexcharts-pie circle,.apexcharts-pie line {
    stroke: var(--ct-border-color)
}

.apexcharts-yaxis-label {
    fill: var(--ct-secondary-color)!important;
    font-size: 12px!important;
}

.apexcharts-xaxis-label {
    fill: var(--ct-secondary-color)!important;
}

.ts-control {
    background-color: var(--ct-body-bg) !important;
    color: var(--ct-body-color) !important;
}

.ts-dropdown {
    background-color: var(--ct-body-bg) !important;
    color: var(--ct-body-color) !important;
    user-select: none;
}

.notification-list .noti-icon-with-number {
    left: 12px !important;
}

.hover-disabled {
    pointer-events: all !important;
    cursor: not-allowed;
}

.text-transform-none {
    text-transform: none !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover, .numInputWrapper:hover {
    background-color: var(--ct-body-bg);
}

.teamBookingDropupButton {
    margin-left: -7.6rem !important;
    min-width: 10.3rem;
}

.btn-close-sm {
    height: 0.4em;
    width: 0.4em;
}

.favorite-booking-item, .favorite-booking-item-create {
    transition: all 0.1s ease;
}

.favorite-booking-item:hover {
    background-color: var(--ct-primary-bg-subtle) !important;
}

.favorite-booking-item:active {
    transform: scale(0.98);
}

.favorite-booking-item-create:hover {
    border-color: var(--ct-primary) !important;
}

#html-input-icon {
    margin-right: 20px;
    cursor: pointer;
}

.nav-tabs.nav-bordered div a.active {
    border-bottom: 2px solid var(--ct-primary);
}

.nav-tabs.nav-bordered div a {
    border: 0;
    padding: .625rem 1.25rem;
}

input:disabled, select:disabled, textarea:disabled, span:disabled, button:disabled {
    cursor: not-allowed
}

[aria-disabled="true"] {
    cursor: not-allowed!important;
}

.apexcharts-datalabel {
    fill: var(--ct-secondary-color);
}

.missingTimeWeekendStyle {
    background: var(--ct-tertiary-bg);
}

.missingTimeChartVacation {
    background: var(--ct-green);
    color: white!important;
}

.missingTimeChartSick {
    background: var(--ct-yellow);
    color: white!important;
}

.missingTimeChartParenthood {
    background: var(--ct-blue);
    color: white!important;
}

.missingTimeChartParentLeave{
    background: #56a4f8;
    color: white!important;
}

.missingTimeNoReason {
    background: var(--ct-gray);
    color: white!important;
}

.missingTimeChartSpecial {
    background: var(--ct-gray);
    color: white!important;
}

.missingTimeChartAbsenceRequest {
    background: var(--ct-red);
    color: white!important;
    transition: all .3s;
}

.missingTimeChartAbsenceRequest:hover {
    scale: 1.1;
}

.missingTimeChartHoliday {
    background: var(--ct-cyan);
    color: white!important;
}

.missingTimeChart thead {
    position: sticky;
    top: 69px;
    background-color: var(--ct-secondary-bg);
    z-index: 1000;
}

.cursor-help {
    cursor: help;
}

.filetype-img {
    width: 90px;
}

.ts-control > input {
    color: var(--ct-body-color) !important;
}

select[name*="[referenceMonth][day]"] {
    display: none !important;
}

.select2-dropdown {
    z-index: 1!important;
}

.bg-birthday {
    background: var(--gdk-birthday-gradient);
}

.bg-birthday-subtle {
    background: var(--gdk-birthday-gradient-subtle);
}

.text-birthday {
    background: var(--gdk-birthday-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}