@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@plugin 'tailwind-scrollbar' {
    preferredStrategy: 'pseudoelements';
    nocompatible: true;
}
@import './primevue.css';
@import 'primeicons/primeicons.css';


@custom-variant dark (&:where(.dark, .dark *));

@theme{
    --blur-2xs: 2px;
    --breakpoint-2xs: 20rem;
    --breakpoint-xs: 30rem;
    --breakpoint-3xl: 120rem;
    --breakpoint-4xl: 144rem;
    --container-8xl: 96rem;
    --container-9xl: 112rem;
    --container-10xl: 128rem;
    --container-11xl: 144rem;
    --container-12xl: 160rem;

    --aspect-image: 3 / 2;

    --text-2xs: .625rem;
    --text-2xs--line-height: calc( 1 / .625 );

    --color-astronaut: oklch(36.69% 0.11039 273.74);
    --color-astronaut-50: oklch(100% 0 none);
    --color-astronaut-100: oklch(96.539% 0.00939 279.69);
    --color-astronaut-200: oklch(88.696% 0.03166 279.82);
    --color-astronaut-300: oklch(80.663% 0.0554 278.21);
    --color-astronaut-400: oklch(72.356% 0.08028 278.57);
    --color-astronaut-500: oklch(64.134% 0.10688 276.83);
    --color-astronaut-600: oklch(55.974% 0.1344 275.27);
    --color-astronaut-700: oklch(48.234% 0.15318 273.48);
    --color-astronaut-800: oklch(42.589% 0.13095 273.13);
    --color-astronaut-900: oklch(36.69% 0.11039 273.74);
    --color-astronaut-950: oklch(32.598% 0.0948 273.62);


    --color-port-gore: oklch(26.603% 0.05895 271.03);
    --color-port-gore-50: oklch(90.872% 0.02353 275.34);
    --color-port-gore-100: oklch(86.967% 0.03376 274.53);
    --color-port-gore-200: oklch(79.349% 0.0537 273.25);
    --color-port-gore-300: oklch(71.421% 0.07606 273.27);
    --color-port-gore-400: oklch(63.611% 0.09849 272);
    --color-port-gore-500: oklch(55.556% 0.12335 271.08);
    --color-port-gore-600: oklch(48.748% 0.12707 269.85);
    --color-port-gore-700: oklch(42.643% 0.10913 270.77);
    --color-port-gore-800: oklch(36.473% 0.08932 270.68);
    --color-port-gore-900: oklch(30.037% 0.06836 270.46);
    --color-port-gore-950: oklch(26.603% 0.05895 271.03);


    --color-big-stone: oklch(22.83% 0.04593 269.7);
    --color-big-stone-50: oklch(86.584% 0.03405 272.74);
    --color-big-stone-100: oklch(82.85% 0.0435 270.85);
    --color-big-stone-200: oklch(75.215% 0.06545 271.01);
    --color-big-stone-300: oklch(67.452% 0.08727 270.47);
    --color-big-stone-400: oklch(59.626% 0.11031 269.62);
    --color-big-stone-500: oklch(51.818% 0.1343 268.36);
    --color-big-stone-600: oklch(45.809% 0.1166 268.89);
    --color-big-stone-700: oklch(39.533% 0.09855 269.05);
    --color-big-stone-800: oklch(33.237% 0.0782 268.36);
    --color-big-stone-900: oklch(26.454% 0.0576 269.57);
    --color-big-stone-950: oklch(22.83% 0.04593 269.7);
}

.p-datatable{
    @apply text-2xs md:text-xs lg:text-base;
}

.p-datatable-table{
    @apply h-px
}

.p-datatable-thead{
        @apply text-2xs md:text-xs lg:text-sm;

        & th{
            @apply text-center
        }

        & .p-datatable-column-header-content{
            @apply gap-1 items-center
        }
}

.p-datatable-tbody{
    @apply text-xs lg:text-sm 3xl:text-base
}

.p-paginator-pages{
        @apply font-medium
}

.p-select-option{
    @apply font-medium!
}

.document-button{
    @apply bg-stone-400 hover:bg-stone-500 text-white hover:text-stone-200 dark:bg-astronaut-800 dark:hover:bg-astronaut-600 dark:hover:text-astronaut-200 w-8 rounded-full text-sm aspect-square grid place-content-center cursor-pointer transition duration-300
}

.data-list-tab{
    & .input-label{
        @apply text-stone-400! dark:text-slate-500!
    }
}

.editable-field{
	@apply bg-transparent border border-transparent w-full rounded p-0.5;

	&:not(:disabled){
		@apply hover:border-amber-600 dark:hover:border-amber-300 ring-0 focus:bg-white focus:border-amber-600 dark:focus:bg-white/20 dark:focus:border-amber-300 transition duration-500;
	}

	&::placeholder{
		@apply italic text-stone-400
	}
}

@layer base{
    html{
        font-size: 14px;
        font-family: 'Montserrat', sans-serif;
    }

    html, body {
        @apply w-full h-full min-h-full scroll-smooth
    }

    body{
        @apply flex flex-col bg-slate-200 text-slate-900 font-normal dark:bg-gray-900 dark:text-neutral-200;
    }

    #app{
        @apply flex flex-col flex-grow
    }

    @media screen and ( min-width: 360px ) {
        html { font-size:16px }
    }

    /* @media screen and ( min-width: 1920px ) {
        html { font-size:18px }
    } */
}

@layer utilities{
    @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 100;
        font-display: swap;
        src: url( '/fonts/Montserrat/Montserrat-Thin.ttf' );
      }

      @font-face {
        font-family: 'Montserrat';
        font-style: italic;
        font-weight: 100;
        font-display: swap;
        src: url( '/fonts/Montserrat/Montserrat-ThinItalic.ttf' );
      }
      /*200*/
      @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 200;
        font-display: swap;
        src: url( '/fonts/Montserrat/Montserrat-ExtraLight.ttf' );
      }

      @font-face {
        font-family: 'Montserrat';
        font-style: italic;
        font-weight: 200;
        font-display: swap;
        src: url( '/fonts/Montserrat/Montserrat-ExtraLightItalic.ttf' );
      }
      /*300*/
      @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url( '/fonts/Montserrat/Montserrat-Light.ttf' );
      }

      @font-face {
        font-family: 'Montserrat';
        font-style: italic;
        font-weight: 300;
        font-display: swap;
        src: url( '/fonts/Montserrat/Montserrat-LightItalic.ttf' );
      }
      /*400*/
      @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url( '/fonts/Montserrat/Montserrat-Regular.ttf' );
      }

      @font-face {
        font-family: 'Montserrat';
        font-style: italic;
        font-weight: 400;
        font-display: swap;
        src: url( '/fonts/Montserrat/Montserrat-Italic.ttf' );
      }
      /*500*/
      @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url( '/fonts/Montserrat/Montserrat-Medium.ttf' );
      }

      @font-face {
        font-family: 'Montserrat';
        font-style: italic;
        font-weight: 500;
        font-display: swap;
        src: url( '/fonts/Montserrat/Montserrat-MediumItalic.ttf' );
      }
      /*600*/
      @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url( '/fonts/Montserrat/Montserrat-SemiBold.ttf' );
      }

      @font-face {
        font-family: 'Montserrat';
        font-style: italic;
        font-weight: 600;
        font-display: swap;
        src: url( '/fonts/Montserrat/Montserrat-SemiBoldItalic.ttf' );
      }
      /*700*/
      @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url( '/fonts/Montserrat/Montserrat-Bold.ttf' );
      }

      @font-face {
        font-family: 'Montserrat';
        font-style: italic;
        font-weight: 700;
        font-display: swap;
        src: url( '/fonts/Montserrat/Montserrat-BoldItalic.ttf' );
      }
      /*800*/
      @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 800;
        font-display: swap;
        src: url( '/fonts/Montserrat/Montserrat-ExtraBold.ttf' );
      }

      @font-face {
        font-family: 'Montserrat';
        font-style: italic;
        font-weight: 800;
        font-display: swap;
        src: url( '/fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf' );
      }
      /*900*/
      @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 900;
        font-display: swap;
        src: url( '/fonts/Montserrat/Montserrat-Black.ttf' );
      }

      @font-face {
        font-family: 'Montserrat';
        font-style: italic;
        font-weight: 900;
        font-display: swap;
        src: url( '/fonts/Montserrat/Montserrat-BlackItalic.ttf' );
      }

    /**
    * vue transition
    */
    .form-input,.form-select,.form-textarea{
        @apply rounded-md border border-gray-200 shadow-md p-2 ring-0 outline-0 focus:border-gray-400 transition duration-300 bg-slate-50 focus:bg-sky-50 dark:bg-white/15 dark:focus:bg-white/30 ;

        &::placeholder{
            @apply text-sm italic
        }
        &[type='checkbox'],&[type='radio']{
            @apply bg-stone-400 dark:bg-white/15
        }
    }

    .dark .form-input,.dark .form-select,.dark .form-textarea{
        &::placeholder{
            @apply text-sky-300
        }
    }

    .chat-message{
        &.red {
            @apply text-red-600 dark:text-rose-300
        }

        &.blue {
            @apply text-sky-600 dark:text-sky-300
        }


        &.green {
            @apply text-green-600 dark:text-lime-400
        }

        &.line-through{
            @apply text-neutral-400
        }
    }

    .tab-header-edit-link{
        @apply text-zinc-600 dark:text-sky-300 hover:text-rose-400 dark:hover:text-rose-300 transition duration-300 cursor-pointer
    }

    .yes-string {
        @apply font-medium uppercase text-lime-600 dark:text-lime-400
    }
    .no-string{
        @apply font-medium uppercase text-rose-400 dark:text-rose-300
    }

    .aspect-image{
        aspect-ratio: var(--aspect-image );
    }

    .hoverable-row{
        @apply transition duration-300 border-b border-t border-transparent hover:border-stone-200 dark:hover:border-white/10
    }


    .p-fileupload-file-info{
        @apply text-2xs md:text-xs lg:text-sm
    }

    .p-button-label{
        @apply uppercase;
    }

    .p-overlay-mask{
        @apply backdrop-blur-2xs
    }

	.my-timeline-horizontal-wrapper {
		@apply block w-full max-w-full overflow-auto;

		&::-webkit-scrollbar {
			@apply w-1;
		}

		&::-webkit-scrollbar-track {
			@apply bg-stone-300 rounded-full;
		}

		&::-webkit-scrollbar-thumb {
			@apply bg-stone-500 rounded-full;
		}

		&::-webkit-scrollbar-thumb:hover {
			@apply bg-stone-600;
		}

		scrollbar-width: thin;
    	scrollbar-color: var( --color-stone-500) var(--color-stone-300);
	}


	.dark .my-timeline-horizontal-wrapper {
		&::-webkit-scrollbar-track {
			@apply bg-slate-600;
		}

		&::-webkit-scrollbar-thumb {
			@apply bg-slate-500 rounded-full;
		}

		&::-webkit-scrollbar-thumb:hover {
			@apply bg-slate-400;
		}

		scrollbar-width: thin;
    	scrollbar-color: var( --color-slate-500) var(--color-slate-600);
	}


    .my-timeline-horizontal{
        & .p-timeline-event-opposite{
            @apply grow-0! text-left! whitespace-nowrap!
        }

        & .p-timeline-event-content{
            @apply whitespace-nowrap
        }

    }

    .p-button-contrast{
        @apply overflow-visible!
    }

    .p-autocomplete{
        & .p-autocomplete-input{
            @apply form-input rounded px-3 py-2 border w-full
        }
    }

    .p-tag{
        @apply cursor-default select-none;

        &.clickable{
            @apply transition duration-700 cursor-pointer;

            .p-tag-label::after{
                @apply font-black font-[Line_Awesome_Free] ml-2;
                content: '\f303'
            }
        }

        & .p-tag-label{
        @apply whitespace-nowrap
        }
    }

    .handed-over,.closed{
        --p-tag-success-background: var( --color-violet-600 );
    }

    .loaded{
        --p-tag-success-background: var( --color-teal-600 );
    }

    .await-docs-check{
        --p-tag-success-background: var( --color-amber-500 );
    }

    .await-vehicle-check{
        --p-tag-success-background: var( --color-amber-600 );
    }

    .after-vehicle-check{
        --p-tag-success-background: var( --color-amber-700 );
    }

    .vehicle-file-item .p-image-preview:hover > .p-image-preview-mask{
        background-color: transparent;
    }

    .company-tag-identifier{
        --p-tag-primary-background: var( --color-astronaut-600 );
        --p-tag-secondary-background: var(--color-red-800 );
        --p-tag-success-background: var(--color-green-500 );
        --p-tag-info-background: var(--color-sky-600 );
        --p-tag-contrast-background: var(--color-cyan-500 );
    }

    .business-case-company{
        &.primary{
            @apply bg-astronaut-600 text-white;
        }

        &.secondary{
            @apply bg-red-800 text-white
        }

        &.success{
            @apply bg-green-500 text-white
        }

        &.info{
            @apply bg-sky-600 text-white
        }

        &.contrast{
            @apply bg-cyan-500 text-white
        }
    }

    .p-tablist{
        @apply rounded-t-xl
    }

    .p-tablist-prev-button{
        @apply rounded-tl-xl!
    }

    .p-tablist-next-button{
        @apply rounded-tr-xl!
    }

	.p-galleria-close-button{
		@apply z-50
	}

    .stripped{
        & > div{
            @apply px-6
        }
        & > div:nth-child(2n+1){
            @apply bg-slate-100/50 dark:bg-gray-900/50;
        }
    }
}

@utility my-scroll{
    @apply scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar
     scrollbar-thumb-slate-400 scrollbar-hover:scrollbar-thumb-slate-500 scrollbar-active:scrollbar-thumb-slate-600 scrollbar-track-slate-200 dark:scrollbar-thumb-slate-400 dark:scrollbar-hover:scrollbar-thumb-slate-300 dark:scrollbar-active:scrollbar-thumb-slate-100 dark:scrollbar-track-slate-900 overflow-y-scroll
}

@layer components{
    .common-link{
        @apply underline text-sky-600 dark:text-sky-300 hover:text-rose-400 dark:hover:text-rose-300 active:text-rose-500 dark:active:text-rose-500 transition duration-200
    }

    .btn{
        @apply inline-flex items-center rounded-md border border-transparent px-4 py-2 text-xs uppercase tracking-widest text-white transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2
    }

    .login-form{
        @apply w-full mx-auto bg-white dark:bg-gray-800 dark:border dark:border-gray-700 rounded-md p-8 grid content-start;

        & h1{
            @apply text-center mb-5 text-lg md:text-xl lg:text-2xl dark:text-slate-200
        }

        & h2{
            @apply mb-2 md:mb-4 font-medium text-lg md:text-xl lg:text-2xl
        }

        & legend{
            @apply text-stone-500 dark:text-gray-300 uppercase
        }

        & fieldset{
            @apply grid border rounded-md border-stone-400 dark:border-gray-400 px-3 pb-3 content-start
        }
    }

    input,select{
        &.error, &[pattern]:invalid{
            @apply border-rose-500! dark:border-rose-400!
        }

        &[pattern]:invalid{
            @apply text-rose-500 dark:text-rose-300
        }
    }

	.p-invalid .p-inputnumber-input{
		@apply border-rose-500 dark:border-red-400!
	}

    .datatables-actions {
        @apply flex justify-end text-lg md:text-2xl lg:text-3xl items-center;
    }

    /* .datatables-action-button{
        @apply transition duration-300 hover:text-white dark:text-astronaut-400;
    } */

    .context-menu{
        @apply list-none p-0 m-0 flex flex-col gap-2;

		& li{
			@apply flex gap-2 items-center;

			& .spinner-indicator{
				@apply w-4 text-xl
			}
		}

        & button {
            @apply whitespace-nowrap;

            &:not(:disabled){
                @apply cursor-pointer hover:text-sky-500 dark:hover:text-sky-300 transition duration-200
            }

            &:disabled{
                @apply text-slate-400
            }
        }
    }

    .content-tab-header{
        @apply flex items-center;

        & > :first-child{
            @apply text-xl md:text-2xl font-semibold uppercase grow;
        }

        & > :last-child{
            @apply inline-flex;
        }
    }

    .auto-column-grid{
        --grid-max-col-count: attr( max-col-count type(<number>), 6 );
        --grid-min-col-size: attr( min-col-width type(<length>), 240 );
        --grid-min-row-height: attr( min-row-height type(<length>), 100 );

        /* calculation, do not change!!!: */
        --grid-col-size-calc: calc( (100% - ( var(--grid-gap ) * ( var( --grid-max-col-count ) - 1 ) ) ) / var( --grid-max-col-count ) );
        --grid-col-min-size-calc: min( 100%, max( var( --grid-min-col-size ), var( --grid-col-size-calc ) ) );

        @apply grid;
        gap: var( --grid-gap );

        grid-template-columns: repeat(
            auto-fit,
            minmax( var( --grid-col-min-size-calc ), 1fr ) );

        grid-auto-rows: minmax( var( --grid-min-row-height ), auto )
    }

    .filter-tag-radio{
        @apply py-1 px-2 rounded-full flex gap-1 items-center font-medium text-white;

        &.no-filter{
            @apply bg-stone-300 text-stone-700 dark:bg-slate-700 dark:text-white
        }

        &.contrast{
            @apply bg-neutral-900 dark:bg-neutral-700;

            &.company-tag-identifier{
                @apply bg-cyan-500
            }
        }

        &.danger{
            @apply bg-rose-600
        }

        &.info{
            @apply bg-sky-500;

            &.company-tag-identifier{
                @apply bg-sky-600
            }
        }

        &.primary{
            @apply bg-neutral-500;

            &.company-tag-identifier{
                @apply bg-astronaut-600
            }
        }

        &.secondary{
            @apply bg-yellow-500;

            &.company-tag-identifier{
                @apply bg-red-800
            }
        }

        &.success{
            @apply bg-lime-600;

            &.company-tag-identifier{
                @apply bg-green-500
            }
        }

        &.warn{
            @apply bg-orange-600
        }
    }

    .file-item {
        --p-image-preview-mask-background: transparent;
        --p-image-preview-mask-color: transparent;

        @apply border-3 py-2 px-2 rounded flex gap-3 border-stone-500 text-stone-500 hover:text-stone-900 hover:border-stone-900 dark:border-white/60 dark:text-white/60 dark:hover:border-white dark:hover:text-white transition duration-300 relative;

        & .file-item-content{
            @apply flex items-center gap-3 cursor-pointer grow
        }

        & .file-item-icon {
            @apply text-4xl
        }

        & .file-item-label {
            @apply flex flex-col items-start justify-center grow
        }


        &.file-item-jpg .file-item-icon,&.file-item-jpeg .file-item-icon,
        &.file-item-bmp .file-item-icon,&.file-item-png .file-item-icon
        {
            @apply text-amber-500 dark:text-amber-200
        }

        &.file-item-pdf .file-item-icon{
            @apply text-red-400 dark:text-red-300
        }

        &.file-item-link .file-item-icon{
            @apply text-violet-400 dark:text-violet-300
        }

        &.file-item-doc .file-item-icon,&.file-item-docx .file-item-icon,
        &.file-item-pages .file-item-icon,&.file-item-odt .file-item-icon{
            @apply text-sky-500 dark:text-sky-400
        }

        &.file-item-xls .file-item-icon,&.file-item-xlsx .file-item-icon,
        &.file-item-numbers .file-item-icon,&.file-item-ods .file-item-icon{
            @apply text-lime-600 dark:text-lime-400
        }

        & .delete-btn {
            @apply  -mr-3 transition duration-200 text-stone-900/30 hover:text-stone-900 dark:text-white/30 dark:hover:text-white
        }
    }

	.financing-demand-tag{
		--p-tag-primary-background: var( --color-fuchsia-400 );
	}

	.import-demand-tag{
		--p-tag-primary-background: var( --color-sky-600 );
	}

	.insurance-demand-tag{
		--p-tag-primary-background: var( --color-emerald-600 );
	}

	.purchase-demand-tag{
		--p-tag-primary-background: var( --color-cyan-800 )
	}

	.sale-demand-tag{
		--p-tag-primary-background: var( --color-orange-600 );
	}

	.valuation-demand-tag{
		--p-tag-primary-background: var( --color-rose-300 );
	}

	.verification-demand-tag{
		--p-tag-primary-background: var( --color-big-stone-700 )
	}

	.warranty-demand-tag{
		--p-tag-primary-background: var( --color-yellow-500 );
	}
}
/* END COMPONENTS */


/* TRANSITIONS: */
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s ease
    /* @apply transition ease-in-out */
}

.fade-enter-from, .fade-leave-to {
    opacity: 0;
    /* @apply opacity-0 */
}

/* Slide Up */
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s ease;
}
.slide-up-enter-from {
  transform: translateY(30px);
  opacity: 0;
}
.slide-up-enter-to {
  transform: translateY(0);
  opacity: 1;
}
.slide-up-leave-from {
  transform: translateY(0);
  opacity: 1;
}
.slide-up-leave-to {
  transform: translateY(-30px);
  opacity: 0;
}

/* Slide Down */
.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.3s ease;
}
.slide-down-enter-from {
  transform: translateY(-20px);
  opacity: 0;
}
.slide-down-enter-to {
  transform: translateY(0);
  opacity: 1;
}
.slide-down-leave-from {
  transform: translateY(0);
  opacity: 1;
}
.slide-down-leave-to {
  transform: translateY(20px);
  opacity: 0;
}


.expand-enter-active,
.expand-leave-active {
  transition: all 0.5s;
}
.expand-enter-from,
.expand-leave-to {
  opacity: 0;
  width: 0;
}

.expand-vertical-enter-active,
.expand-vertical-leave-active {
  transition: all 0.5s;
}
.expand-vertical-enter-from,
.expand-vertical-leave-to {
  opacity: 0;
  height: 0;
}

#nprogress .bar{
    height: 4px !important;
}

/* intl-tel-input component:*/
.iti__search-input{
    @apply hidden
}
.iti__selected-country{
    @apply rounded-l-md overflow-hidden
}

.dark{
    --iti-border-color: var( --color-slate-600 );
    --iti-dialcode-color: var( --color-sky-300 );
    --iti-dropdown-bg: var( --color-slate-800 );
    --iti-arrow-color: var( --color-slate-200 );
    --iti-hover-color: var( --color-slate-900 );
    --iti-path-globe-1x: url("/graphics/intl-tel-input/globe_light.webp");
    --iti-path-globe-2x: url("/graphics/intl-tel-input/globe_light@2x.webp");
}

.price-offer-gradient{
    @apply bg-linear-to-r from-port-gore-950 via-astronaut-900 to-big-stone-950
}
.price-offer-items{
    @apply mb-8;
    & > div{
        /* @apply flex items-center border-b border-gray-300 px-2 py-4; */
		@apply grid grid-cols-[2rem_1fr_11rem_11rem] px-12;

        &:nth-child(2n + 1){
            @apply bg-gray-100/50
        }

		& > div{
			&:first-child{
				@apply font-bold;
			}

			@apply py-1.5
		}
    }
}


          /**
TIPPY:
*/
.tippy-box[data-theme]{
    /* max-width: calc(100vw - 2rem) !important; */
    z-index: 40 !important;
    @apply text-white px-2 py-0.5 text-sm shadow-lg shadow-neutral-800/30 max-w-56
}

.tippy-box[data-theme~='default']{
    @apply text-white px-2 py-0.5 shadow-lg bg-neutral-700
}

.dark .tippy-box[data-theme~='default']{
    @apply bg-astronaut-200 text-astronaut-900
}

.tippy-box[data-theme~='default'][data-placement^='right']
  > .tippy-arrow::before {
  @apply border-r-neutral-700
}

.dark .tippy-box[data-theme~='default'][data-placement^='right']
> .tippy-arrow::before {
    @apply border-r-neutral-300
}

.tippy-box[data-theme~='default'][data-placement^='left']
  > .tippy-arrow::before {
  @apply border-l-neutral-700
}

.dark .tippy-box[data-theme~='default'][data-placement^='left']
> .tippy-arrow::before {
    @apply border-l-neutral-300
}

.tippy-box[data-theme~='default'][data-placement^='top']
  > .tippy-arrow::before {
  @apply border-t-neutral-700
}

.dark .tippy-box[data-theme~='default'][data-placement^='top']
  > .tippy-arrow::before {
  @apply border-t-neutral-300
}

.tippy-box[data-theme~='default'][data-placement^='bottom']
  > .tippy-arrow::before {
  @apply border-b-neutral-700
}

.dark .tippy-box[data-theme~='default'][data-placement^='bottom']
> .tippy-arrow::before {
@apply border-b-neutral-300
}


.tippy-box[data-theme~='xs'] {
    @apply text-2xs
}

.tippy-box[data-theme~='sm']{
   @apply text-xs
}

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24
}

/* ==========================================================
	Oprava Webkit forced štýlov pre autofill inputy ( adresy, email, kontakty, ...):

   Autofill styling pre PrimeVue inputy (InputText, InputNumber, Textarea)
   Cieľ: zachovať dark/light mode bez blikajúceho bieleho pozadia
   Funguje vo Vivaldi / Chrome / Safari (WebKit engine)
   ==========================================================
   Komentár:
   - :-webkit-autofill je pseudo-class, ktorý sa aplikuje iba vo WebKite
   - -webkit-box-shadow hack prepíše biele/žlté autofill pozadie
   - -webkit-text-fill-color nastavuje farbu textu vo vnútri autofill inputu
   - Tailwind @apply sa používa pre pohodlné utility farieb
   - dark mode sa aktivuje cez .dark triedu
   - Toto riešenie funguje pre všetky PrimeVue inputy/textarea, ktoré rendrujú <input>/<textarea>
   ------------------------ */
input:-webkit-autofill {
  @apply bg-stone-300/20 text-stone-600;
  -webkit-box-shadow: 0 0 0px 1000px inset var(--tw-bg-opacity, 0.1) currentColor;
  -webkit-text-fill-color: var(--color-stone-600);
  transition: background-color 5000s ease-in-out 0s;
}

.dark input:-webkit-autofill {
  @apply bg-stone-300/20 text-slate-200;
  -webkit-box-shadow: 0 0 0px 1000px inset var(--tw-bg-opacity, 0.2) currentColor;
  -webkit-text-fill-color: var(--color-slate-200);
  transition: background-color 5000s ease-in-out 0s;
}