@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');@tailwind base;

@tailwind base;
@tailwind components;
@tailwind utilities;


div.field_with_errors > :is(input, textarea, select) {
    @apply border-pastel-red text-dark-red placeholder-dark-red caret-pastel-red ring-pastel-red focus:ring-pastel-red !important;
}

@layer base {
    body {
        @apply bg-secondary;
    }

    table {
        @apply w-full
    }

    table body {
        @apply p-8
    }
    th {
        @apply bg-blue py-2 rounded-sm border-r-2 border-white border-solid text-white text-sm ;
    }

    td {
        @apply bg-white;
    }

    main {
        @apply text-primary min-h-[100vh] p-2 lg:p-6 xl:p-6 min-w-full flex items-start justify-center;
    }

    form {
        @apply bg-white rounded-lg shadow-primary p-8 rounded-md grid grid-cols-3 caret-blue relative;
    }

    form label {
        @apply mb-2
    }

    input[type='time'] {
        @apply bg-primary border leading-none border-primary text-primary text-sm rounded-lg focus:border-pastel-blue focus:border-2 block w-full p-2.5;
    }

    input[type="time"]::-webkit-calendar-picker-indicator {
        filter: invert(69%) sepia(18%) saturate(637%) hue-rotate(167deg) brightness(88%) contrast(91%);
    }

    input[type='text'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue w-full placeholder:text-blue/60 !important;
    }

    textarea{
        @apply bg-white rounded-md border-primary w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue placeholder:text-blue/60 !important;
    }

    input[type='search'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue w-full placeholder:text-blue/60 !important;
    }

    input[type='file'] {
        @apply text-sm ring-1 ring-blue focus:ring-2 focus:ring-blue text-blue border-primary w-full !important;
    }

    input[type='date'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue placeholder:text-blue/60 !important;
    }

    input[type='datetime-local'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue placeholder:text-blue/60 !important;
    }

    input[type='number'] {
        @apply bg-white rounded-md border-primary w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue placeholder:text-blue/60 !important;
    }

    input[type='email'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue placeholder:text-blue/60 !important;
    }

    input[type='password'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue placeholder:text-blue/60 !important;
    }

    input[type='checkbox'] {
        @apply rounded-full bg-white cursor-pointer w-4 h-4 border-primary ring-0 ring-offset-0 active:ring-0 focus:ring-0 checked:ring-0 checked:ring-offset-0 checked:bg-dark-green checked:border-0 active:border-0 focus:ring-offset-0 !important;
    }

    input[type='radio'] {
        @apply rounded-full bg-white cursor-pointer w-4 h-4 border-primary ring-0 ring-offset-0 active:ring-0 focus:ring-0 checked:ring-0 checked:ring-offset-0 checked:bg-dark-green checked:border-0 active:border-0 focus:ring-offset-0 !important;
    }

    input[type='file']::file-selector-button {
        @apply bg-blue border-0 text-white cursor-pointer;
    }

    select {
        @apply bg-white rounded-md border-primary ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue placeholder:text-blue/60 w-full !important;
    }

    a {
        @apply text-sm no-underline;
    }

    .disabled {
        @apply pointer-events-none bg-blue/30 opacity-40;
    }

    .text-primary {
        @apply text-blue;
    }

    .bg-primary {
        @apply bg-white;
    }

    .bg-secondary {
        @apply bg-gradient-to-r from-white to-blue/20;
    }
    .bg-danger {
        @apply bg-pastel-red;
    }

}

@layer components {
    .opening {
        @apply bg-dark-green text-white border-green !important
    }

    .opening::-webkit-calendar-picker-indicator{
        filter: brightness(0) saturate(100%) invert(100%) sepia(91%) saturate(0%) hue-rotate(177deg) brightness(110%) contrast(110%) !important;    }

    .border-primary {
        @apply border-blue border-[1px] border-solid rounded-lg;
    }

    .button_to {
        @apply border-0 m-0 p-0 p-2 border-primary border-2 border-solid flex items-center justify-center text-base;
    }

    .button {
        @apply py-2 px-2 rounded-full flex items-center justify-center cursor-pointer shadow-primary text-base !important;
    }

    .button-primary {
        @apply text-white bg-green hover:bg-dark-green hover:no-underline hover:text-white;
    }

    .button-accept {
        @apply text-primary bg-green hover:bg-dark-green hover:no-underline hover:text-primary;
    }

    .button-decline {
        @apply text-white bg-pastel-red hover:bg-dark-red hover:no-underline hover:text-white;
    }

    .button-secondary {
        @apply text-white bg-blue hover:bg-pastel-blue hover:no-underline hover:text-white;
    }

    .button-doctor {
        @apply text-primary bg-blue hover:bg-pastel-blue hover:no-underline hover:text-primary;
    }

    .button-normal {
        @apply w-[6rem] !important;
    }

    .button-mini {
        @apply w-[4rem] text-xs !important;
    }

    .button-large {
        @apply min-w-[10rem];
    }

    .button-calendar {
        @apply bg-blue text-white flex items-center h-[1.5rem] justify-center m-[2px] hover:bg-pastel-blue text-[12px] hover:no-underline hover:text-white;
    }

    .button-draft {
        @apply bg-thistle text-white flex items-center h-[1.5rem] justify-center m-[2px] hover:bg-mauve text-[12px] hover:no-underline hover:text-white !important;
    }

    .button-booked {
        @apply bg-green text-white flex items-center h-[1.5rem] justify-center m-[2px] hover:bg-dark-green text-[12px] hover:no-underline hover:text-white !important;
    }

    .button-declined {
        @apply bg-pastel-red text-white flex items-center h-[1.5rem] justify-center m-[2px] hover:bg-pastel-red text-[12px] hover:no-underline hover:text-white !important;
    }

    .nav-button {
        @apply flex items-center justify-center text-sm hover:bg-pastel-blue/20 hover:text-pastel-blue p-2 border-primary;
    }

    .calendar-link {
        @apply cursor-pointer text-white hover:bg-pastel-blue;
    }

    .calendar-tag {
        @apply bg-primary border-primary p-2 text-primary font-semibold flex items-center justify-center;
    }

    .card-text {
        @apply col-span-5 flex items-start justify-start;
    }
    .card-title {
        @apply col-span-2 font-bold;
    }

    .dropdown {
        @apply bg-white border-primary border-2 border-solid rounded-sm absolute top-16 right-4 p-2 min-w-[15rem] flex flex-col p-2;
    }

    .dropdown a {
        @apply hover:text-primary hover:bg-white m-2 p-2 border-primary rounded-md border-2 border-solid hover:border-primary inline-block;
    }

    .dropdown-item {
        @apply hidden bg-white divide-y divide-white rounded-lg shadow-primary border-primary w-44 dark:bg-white;
    }

    .dropdown-text {
        @apply text-sm text-primary font-normal block px-4 py-2 hover:bg-blue hover:text-white;
    }

    .form-item {
        @apply col-span-3 flex flex-col items-center justify-center p-2;
    }

    .form-check-boxes {
        @apply w-full h-full border-primary border-2 grid grid-cols-2 gap-0  p-2 !important;
    }

    .form-language {
        @apply w-full h-[2.75rem] border-primary border-2 flex items-center justify-between !important;
    }

    .form-file {
        @apply grid grid-cols-1 p-2;
    }

    .form-file-item {
        @apply bg-white rounded-md border-primary border-2 min-w-full p-2 !important;
    }


    .form-check {
        @apply col-span-3 flex flex-col items-center justify-between;
    }

    .form-action {
        @apply col-span-3 mt-4 flex items-center justify-center;
    }

    .icon-tag {
        @apply min-w-[6rem] col-span-1 bg-white flex flex-col py-1 items-center justify-center rounded-lg cursor-pointer text-xs shadow-primary hover:bg-blue hover:text-white
    }

    .navbar {
        @apply mt-[1px] bg-primary h-24 sticky top-0 z-50 text-primary grid grid-cols-12 gap-4 border-blue/30 border-b-2 border-solid py-2;
    }

    .pagy {
        @apply flex space-x-1 font-normal text-sm;
        a:not(.gap) {
            @apply block rounded-lg py-2 px-4 bg-blue text-white;
            &:hover {
                @apply bg-pastel-blue;
            }
            &:not([href]) { /* disabled links */
                @apply text-white bg-pastel-blue cursor-default;
            }
            &.current {
                @apply text-white bg-pastel-blue;
            }
        }
        /*label {*/
        /*    @apply inline-block whitespace-nowrap bg-pastel-red rounded-lg px-3 py-0.5;*/
        /*    input {*/
        /*        @apply bg-pastel-red border-none rounded-md;*/
        /*    }*/
        /*}*/
    }


    .review-bar {
        @apply w-full bg-light-green rounded h-2.5 me-2;
    }

    .review-progress {
        @apply bg-green h-2.5 rounded;
    }

    .review-tag {
        @apply bg-green text-white text-lg font-semibold inline-flex items-center p-1.5 rounded;
    }

    .shadow-primary {
        @apply shadow-lg shadow-blue/50;
    }

    .small-counter {
        @apply absolute text-white inline-flex items-center justify-center w-6 h-6 text-xs font-bold bg-pastel-red border-2 border-pastel-red rounded-full -top-2 -end-2 !important;
    }


    .spec-tag {
        @apply mb-[2px] flex flex-row items-center shadow-primary justify-center text-[0.7rem] border-primary font-bold  bg-blue text-white border-2 border-solid rounded-md;
    }

    .price-list-card {
        @apply col-span-3 shadow-primary rounded-lg p-6 font-normal hover:bg-blue/10 grid grid-cols-7 gap-2;
    }

    .notice {
        @apply absolute py-2 px-3 bg-green top-12 left-12 text-white font-medium rounded-lg;
    }

    .flag-container {
        @apply grid grid-cols-2 gap-2;
    }

    .flag {
        @apply col-span-1 w-[2rem];
    }

    .icon {
        @apply text-primary hover:text-pastel-blue stroke-2 w-12;
    }
}

:root{--ss-primary-color: #5897fb;--ss-bg-color: #ffffff;--ss-font-color: #4d4d4d;--ss-font-placeholder-color: #8d8d8d;--ss-disabled-color: #dcdee2;--ss-border-color: #dcdee2;--ss-highlight-color: #fffb8c;--ss-success-color: #00b755;--ss-error-color: #dc3545;--ss-focus-color: #5897fb;--ss-main-height: 30px;--ss-content-height: 300px;--ss-spacing-l: 7px;--ss-spacing-m: 5px;--ss-spacing-s: 3px;--ss-animation-timing: 0.2s;--ss-border-radius: 4px}@keyframes ss-valueIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes ss-valueOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}.ss-hide{display:none !important}.ss-main{display:flex;flex-direction:row;position:relative;user-select:none;color:var(--ss-font-color);min-height:var(--ss-main-height);width:100%;padding:var(--ss-spacing-s);cursor:pointer;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;box-sizing:border-box;transition:background-color var(--ss-animation-timing);overflow:hidden}.ss-main:focus{box-shadow:0 0 5px var(--ss-focus-color)}.ss-main.ss-disabled{background-color:var(--ss-disabled-color);cursor:not-allowed}.ss-main.ss-disabled .ss-values .ss-disabled{color:var(--ss-font-color)}.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.ss-main.ss-open-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main.ss-open-below{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.ss-main .ss-values{display:inline-flex;flex-wrap:wrap;gap:var(--ss-spacing-m);flex:1 1 100%}.ss-main .ss-values .ss-placeholder{display:flex;padding:var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s) var(--ss-spacing-m);margin:auto 0px auto 0px;line-height:1em;align-items:center;width:100%;color:var(--ss-font-placeholder-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ss-main .ss-values .ss-max{display:flex;user-select:none;align-items:center;width:fit-content;font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m);background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius)}.ss-main .ss-values .ss-single{display:flex;margin:auto 0px auto var(--ss-spacing-s)}.ss-main .ss-values .ss-value{display:flex;user-select:none;align-items:center;width:fit-content;background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius);animation-name:ss-valueIn;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out;animation-fill-mode:both}.ss-main .ss-values .ss-value.ss-value-out{animation-name:ss-valueOut;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out}.ss-main .ss-values .ss-value .ss-value-text{font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m)}.ss-main .ss-values .ss-value .ss-value-delete{display:flex;align-items:center;height:var(--ss-spacing-l);width:var(--ss-spacing-l);padding:var(--ss-spacing-s) var(--ss-spacing-m);cursor:pointer;border-left:solid 1px var(--ss-bg-color);box-sizing:content-box}.ss-main .ss-values .ss-value .ss-value-delete svg{height:var(--ss-spacing-l);width:var(--ss-spacing-l)}.ss-main .ss-values .ss-value .ss-value-delete svg path{fill:none;stroke:var(--ss-bg-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-deselect{flex:0 1 auto;display:flex;align-items:center;justify-content:center;width:fit-content;height:auto;padding:0 var(--ss-spacing-m) 0 var(--ss-spacing-m)}.ss-main .ss-deselect svg{width:8px;height:8px}.ss-main .ss-deselect svg path{fill:none;stroke:var(--ss-font-color);stroke-width:20;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-arrow{flex:0 1 auto;display:flex;align-items:center;justify-content:flex-end;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-main .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content{position:absolute;display:flex;height:auto;flex-direction:column;width:auto;max-height:var(--ss-content-height);box-sizing:border-box;border:solid 1px var(--ss-border-color);background-color:var(--ss-bg-color);transition:transform var(--ss-animation-timing),opacity var(--ss-animation-timing);opacity:0;transform:scaleY(0);transform-origin:center top;overflow:hidden;z-index:10000}.ss-content.ss-relative{position:relative;height:100%}.ss-content.ss-fixed{position:fixed}.ss-content.ss-open-above{flex-direction:column-reverse;opacity:1;transform:scaleY(1);transform-origin:center bottom;border-top-left-radius:var(--ss-border-radius);border-top-right-radius:var(--ss-border-radius)}.ss-content.ss-open-below{opacity:1;transform:scaleY(1);transform-origin:center top;border-bottom-left-radius:var(--ss-border-radius);border-bottom-right-radius:var(--ss-border-radius)}.ss-content .ss-search{flex:0 1 auto;display:flex;flex-direction:row;padding:var(--ss-spacing-l) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}.ss-content .ss-search input{display:inline-flex;font-size:inherit;line-height:inherit;flex:1 1 auto;width:100%;min-width:0px;padding:var(--ss-spacing-m) var(--ss-spacing-l);margin:0;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;text-align:left;box-sizing:border-box}.ss-content .ss-search input::placeholder{color:var(--ss-font-placeholder-color);vertical-align:middle}.ss-content .ss-search input:focus{box-shadow:0 0 5px var(--ss-focus-color)}.ss-content .ss-search .ss-addable{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;flex:0 0 auto;height:auto;margin:0 0 0 var(--ss-spacing-m);border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius)}.ss-content .ss-search .ss-addable svg{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-content .ss-search .ss-addable svg path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list{flex:1 1 auto;height:auto;overflow-x:hidden;overflow-y:auto}.ss-content .ss-list .ss-error{color:var(--ss-error-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-searching{color:var(--ss-font-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup.ss-close .ss-option{display:none !important}.ss-content .ss-list .ss-optgroup .ss-optgroup-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text{flex:1 1 auto;font-weight:bold;color:var(--ss-font-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label:has(.ss-arrow){cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions{flex:0 1 auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ss-spacing-m)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall{flex:0 0 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall:hover{opacity:.5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall.ss-selected svg path{stroke:var(--ss-error-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall span{flex:0 1 auto;display:flex;align-items:center;justify-content:center;font-size:60%;text-align:center;padding:0 var(--ss-spacing-s) 0 0}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg{flex:0 1 auto;width:13px;height:13px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg path{fill:none;stroke:var(--ss-success-color);stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:first-child{stroke-width:5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:last-child{stroke-width:11}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable{flex:0 1 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow{flex:1 1 auto;width:10px;height:10px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content .ss-list .ss-optgroup .ss-option{padding:var(--ss-spacing-s) var(--ss-spacing-s) var(--ss-spacing-s) calc(var(--ss-spacing-l)*3)}.ss-content .ss-list .ss-option{display:block;padding:var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);white-space:normal;color:var(--ss-font-color);cursor:pointer;user-select:none}.ss-content .ss-list .ss-option:hover{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-highlighted,.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;background-color:var(--ss-disabled-color)}.ss-content .ss-list .ss-option.ss-disabled:hover{color:var(--ss-font-color)}.ss-content .ss-list .ss-option .ss-search-highlight{display:inline-block;background-color:var(--ss-highlight-color)}/*# sourceMappingURL=slimselect.css.map */
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */