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

@layer base {

    /* IranSans Fa Num */
    @font-face {
        font-family: IRANSansX;
        font-style: normal;
        font-weight: 100;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansXFaNum-Thin.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansXFaNum-Thin.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSansX;
        font-style: normal;
        font-weight: 200;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansXFaNum-UltraLight.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansXFaNum-UltraLight.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSansX;
        font-style: normal;
        font-weight: 300;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansXFaNum-Light.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansXFaNum-Light.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSansX;
        font-style: normal;
        font-weight: 500;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansXFaNum-Medium.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansXFaNum-Medium.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSansX;
        font-style: normal;
        font-weight: 600;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansXFaNum-DemiBold.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansXFaNum-DemiBold.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSansX;
        font-style: normal;
        font-weight: 800;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansXFaNum-ExtraBold.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansXFaNum-ExtraBold.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSansX;
        font-style: normal;
        font-weight: 900;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansXFaNum-Black.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansXFaNum-Black.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSansX;
        font-style: normal;
        font-weight: 950;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansXFaNum-ExtraBlack.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansXFaNum-ExtraBlack.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSansX;
        font-style: normal;
        font-weight: 1000;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansXFaNum-Heavy.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansXFaNum-Heavy.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSansX;
        font-style: normal;
        font-weight: bold;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansXFaNum-Bold.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansXFaNum-Bold.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSansX;
        font-style: normal;
        font-weight: normal;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansXFaNum-Regular.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansXFaNum-Regular.woff2") format("woff2");
    }

    /* IranSans */
    @font-face {
        font-family: IRANSans;
        font-style: normal;
        font-weight: 100;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansX-Thin.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansX-Thin.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSans;
        font-style: normal;
        font-weight: 200;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansX-UltraLight.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansX-UltraLight.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSans;
        font-style: normal;
        font-weight: 300;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansX-Light.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansX-Light.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSans;
        font-style: normal;
        font-weight: 500;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansX-Medium.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansX-Medium.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSans;
        font-style: normal;
        font-weight: 600;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansX-DemiBold.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansX-DemiBold.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSans;
        font-style: normal;
        font-weight: 800;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansX-ExtraBold.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansX-ExtraBold.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSans;
        font-style: normal;
        font-weight: 900;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansX-Black.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansX-Black.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSans;
        font-style: normal;
        font-weight: 950;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansX-ExtraBlack.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansX-ExtraBlack.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSans;
        font-style: normal;
        font-weight: 1000;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansX-Heavy.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansX-Heavy.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSans;
        font-style: normal;
        font-weight: bold;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansX-Bold.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansX-Bold.woff2") format("woff2");
    }

    @font-face {
        font-family: IRANSans;
        font-style: normal;
        font-weight: normal;
        src: url("/Plugins/KdrTail/Content/font/iransans/Woff/IRANSansX-Regular.woff") format("woff"), url("/Plugins/KdrTail/Content/font/iransans/Woff2/IRANSansX-Regular.woff2") format("woff2");
    }
}

:root {
    --grid-odd-light: oklch(98% 0 0);
    --grid-even-light: oklch(100% 0 0);
    --grid-2-odd-light: oklch(100% 0 0);
    --grid-2-even-light: oklch(98% 0 0);
    --authority-broader: oklch(42.09% 0.193453 328.3634);
    --authority-narrower: oklch(79.27% 0.171 70.67);
    --authority-related: oklch(51.98% 0.176858 142.4953);
    --radius-field: 0.5rem;
}

html[data-theme="dark"] {
    --grid-odd-dark: oklch(20% 0 0);
    --grid-even-dark: oklch(0.2533 0.016 252.42);
    --grid-2-odd-dark: oklch(0.2533 0.016 252.42);
    --grid-2-even-dark: oklch(20% 0 0);
}

html[dir="rtl"] {
    font-family: "IRANSansX";
}

html[dir="ltr"] {
    font-family: "IRANSans";
}

html[dir="rtl"] #white-player {
    font-family: "IRANSansX" !important;
}

html[dir="ltr"] #white-player {
    font-family: "IRANSans" !important;
}

@media screen(lg) {
    .bg-hero {
        width: 2000px;
        height: 300px;
        right: 30%;
        @apply absolute top-52 rounded-l-full bg-primary;
    }

    .bg-tabs {
        width: 2000px;
        height: 300px;
        left: 60%;
        @apply absolute top-60 rounded-r-full bg-primary;
    }
}

.ficon:hover {
    filter: invert(53%) sepia(38%) saturate(3303%) hue-rotate(326deg) brightness(101%) contrast(96%);
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    /*background: #fff;*/
    display: flex;
    justify-content: center;
    align-items: center;
}

    .swiper-slide img {
        width: auto;
        height: 100%;
        object-fit: cover;
        border-radius: 1rem;
    }

.swiper {
    margin-left: auto;
    margin-right: auto;
}

.background {
    background-image: url("./../image/background pattern.svg");
    background-size: contain;
    background-position: top;
    /*background-repeat: no-repeat;*/
}

html[data-theme="light"] .search-product-card em {
    background: #ebebeb;
    padding: 1px 3px;
    border-radius: 5px;
}
html[data-theme="dark"] .search-product-card em {
    background: #606060 !important; /* Dark Mode */
    color: #ffffff;
    padding: 1px 3px;
    border-radius: 5px;
}

nav .pagination {
    @apply flex;
    /*@apply gap-3;*/
}

.pagination .current-page {
    /*@apply p-4;*/
    @apply rounded-full;
    @apply bg-primary;
   /* @apply bg-shark-950;
    @apply dark:bg-shark-100;*/
}

    .pagination .current-page > .page-link {
        @apply w-12;
        @apply h-12;
        @apply flex;
        @apply items-center;
        @apply justify-center;
        @apply text-white;
        @apply dark:text-[#212121];
    }
.page-link {
    padding: 12px 12px;
}

.pagination .individual-page,
.pagination .next-page,
.pagination .previous-page,
.pagination .last-page,
.pagination .first-page {
    @apply flex;
    @apply flex-col;
    @apply items-center;
    @apply justify-center;
}

.pagination .page-item {
    @apply w-12;
    @apply h-12;
}
nav[aria-label="Page navigation"] {
    @apply flex;
    @apply justify-center;
    @apply py-4;
}

.filter-container {
    display: flex !important;
}

.customer-navigation .active {
    @apply bg-primary dark:bg-primary-content;
}

.customer-navigation .active:first-child {
    @apply rounded-t-2xl;
}

.customer-navigation .active:last-child {
    @apply rounded-b-2xl;
}

.customer-navigation .active div, 
.customer-navigation .active svg {
    color: white;
}

div.k-grid-footer, div.k-grid-header {
    padding-right: 0px !important;
}
.k-grid-header th.k-header {
    padding-right: 8px !important;
    padding-left: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.k-grid td {
    padding: 8px !important;
    text-align: center;
}
.k-grid th {
    text-align: start;
    width: 50px !important;
}

.toast {
    padding: 3rem !important;
}

.scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scrollbar-none::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}

html[data-theme="dark"] .kendo-header-sameindex,
html[data-theme="dark"] .kendo-header-sameindex a {
    background-color: #374151 !important;
    color: #F6F6F6 !important;
    text-align: center;
}

html[data-theme="light"] .kendo-header-sameindex,
html[data-theme="light"] .kendo-header-sameindex a {
    background-color: #e2e8f0 !important;
    color: #212121 !important;
    text-align: center;
}

html[data-theme="dark"] .k-grid tr td, .k-pivot-layout .k-grid tr td {
    color: #F6F6F6 !important;
}

html[data-theme="light"] .k-grid tr td, .k-pivot-layout .k-grid tr td {
    color: #212121 !important;
}

html[data-theme="dark"] .k-grid tr:hover td,
html[data-theme="dark"] .k-pivot-layout .k-grid tr:hover td {
    color: #000000 !important;
}

html[data-theme="light"] .k-grid tr:hover td,
html[data-theme="light"] .k-pivot-layout .k-grid tr:hover td {
    color: #000000 !important;
}

html[data-theme="dark"] .k-button {
    background-color: #475569 !important;
    border-radius: 8px;
    border-color: #d1d5db;
    color: #F6F6F6;
    white-space: nowrap;
    text-align: center;
}

html[data-theme="light"] .k-button {
    background-color: #e2e8f0 !important;
    border-radius: 8px;
    border-color: #d1d5db;
    color: #212121;
    white-space: nowrap;
    text-align: center;
}

html[data-theme="dark"] .kendo-header-work,
html[data-theme="dark"] .kendo-header-work a {
    background-color: #374151 !important;
    color: #F6F6F6 !important;
    text-align: center !important;
}

html[data-theme="light"] .kendo-header-work,
html[data-theme="light"] .kendo-header-work a {
    background-color: #e2e8f0 !important;
    color: #212121 !important;
    text-align: center !important;
}


table[role="grid"] tr {
    background-color: transparent !important;
}

.k-grid tr:hover {
    background-color: #e6e6e6 !important;
}

html[data-theme="dark"] .kendo-header-content,
html[data-theme="dark"] .kendo-header-content a {
    background-color: #374151 !important;
    color: #F6F6F6 !important;
    text-align: center !important;
}

html[data-theme="light"] .kendo-header-content,
html[data-theme="light"] .kendo-header-content a {
    background-color: #e2e8f0 !important;
    color: #212121 !important;
    text-align: center !important;
}

html[data-theme="dark"] .kendo-header-search,
html[data-theme="dark"] .kendo-header-search a {
    background-color: #374151 !important;
    color: #F6F6F6 !important;
    text-align: center !important;
}

html[data-theme="light"] .kendo-header-search,
html[data-theme="light"] .kendo-header-search a {
    background-color: #e2e8f0 !important;
    color: #212121 !important;
    text-align: center !important;
}
table[role="rowgroup"] tr {
    background-color: transparent !important;
}

tr:hover {
    background-color: #e6e6e6 !important;
}

/* Light mode styles */
html[data-theme="light"] .k-block,
html[data-theme="light"] .k-widget {
    background-color: white !important;
}

/* Dark mode styles */
html[data-theme="dark"] .k-block,
html[data-theme="dark"] .k-widget {
    background-color: #1A1A1A !important;
    border: unset !important;
}

html[data-theme="dark"] .btn.content-osas-btn {
    background-color: #475569 !important;
    border-radius: 8px;
    border-color: #d1d5db;
    color: #F6F6F6;
    white-space: nowrap;
    padding: 0 16px !important;
    font-weight: 400 !important;
    font-size: 16px !important;
}

html[data-theme="light"] .btn.content-osas-btn {
    background-color: #e2e8f0 !important;
    border-radius: 8px;
    border-color: #d1d5db;
    color: #212121;
    white-space: nowrap;
    padding: 0 16px !important;
    font-weight: 400 !important;
    font-size: 16px !important;
}

.zoom-able-img {
    cursor: pointer;
}

.image-zoom-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1080;
}

.image-zoom-view img {
    max-height: 80%;
    max-width: 100%;
}

.image-zoom-view button {
    position: absolute;
    right: 3rem;
    top: 2rem;
}

.image-zoom-view svg {
    color: var(--white);
}

.kendo-header-element {
    text-align: center !important;
}

/*
.MergedField-header {
    border-top-width: 1px !important;
    border-right-width: 1px !important;
}
.key-header {
    border-top-width: 1px !important;
}
.AvailabeForLending-header {
    border-top-width: 1px !important;
}
html[dir="rtl"] .AvailabeForLending-header {
    border-top-left-radius: 8px !important;
}

html[dir="ltr"] .AvailabeForLending-header {
    border-top-right-radius: 8px !important;
    border-right-width: 1px !important;
}

.ClassTypeNameLocalize-header {
    border-top-width: 1px !important;
    border-right-width: 1px !important;
}

html[dir="rtl"] .border-r-important {
    border-right-width: 1px !important;
}
html[dir="rtl"] .border-r-important {
    border-right-width: 1px !important;
}


.border-l-important {
    border-left-width: 1px !important;
}

html[dir="rtl"] .ClassTypeNameLocalize-header {
    border-top-right-radius: 8px !important;
}

html[dir="ltr"] .ClassTypeNameLocalize-header {
    border-top-left-radius: 8px !important;
    border-left-width: 1px !important;
}

html[dir="rtl"] .ClassTypeNameLocalize-td {
    border-right-width: 1px !important;
}

html[dir="ltr"] .ClassTypeNameLocalize-td {
    border-left-width: 1px !important;
}

html[dir="ltr"] .AvailabeForLending-td {
    border-right-width: 1px !important;
}*/

/*.clip-ribbon {
    clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0% 100%, 0% 0%);
    max-width: 80%;
    font-size: 0.9em;
    padding: 2px 28px;
}

@media (max-width: 1024) {
    .clip-ribbon {
        font-size: 14px;
        padding: 2px 28px;
    }
}

@media (max-width: 500px) {
    .hidden.md\\:flex {
        display: none !important;
    }
}*/
.badge-container {
    position: absolute;
    top: -10px;
    left: 10px;
    width: 40%;
}


.cover-badge {
    width: 100%;
    height: auto;
}

.flag-badge {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
}
@media (min-width: 1024px) {
    .badge-container {
        top: -30px;
        left: 4px;
    }
}
@media (min-width: 1280px) {
    .badge-container {
        top: -10px;
        left: 10px;
    }
}
@media (min-width: 1440) {
    .badge-container {
        top: -22px;
        left: 4px;
    }
}
@media screen and (max-width: 768px) {
    .badge-container {
        width: 40%;
    }

    .flag-badge {
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    .badge-container {
        width: 40%;
    }

    .cover-badge {
        width: 90%;
    }

    .flag-badge {
        font-size: 14px;
    }
}

.autocomplete-results-container em {
    /*@apply text-primary;*/
    /*@apply font-bolder;*/
    font-style: normal;
    font-weight: 900;
}

.desktop-filters {
    max-height: 90vh;
}
/*.search-result-parent-container {
    min-width: 100vh;
}*/
.my-class {
    width: 100%;
    max-width: 80%;
    max-height: 100%;
}

@media (min-width: 768px) {
    .my-class {
        width: 70%;
    }
}

@media (min-width: 1024px) {
    .my-class {
        width: 80%;
    }
}
@media (min-width: 1280px) {
    .my-class {
        width: 70%;
    }
}
.img-gallery {
    width: 100%;
    max-width: 20%;
    max-height: 100%;
}

@media (min-width: 768px) {
    .img-gallery {
        width: 30%;
    }
}

@media (min-width: 1024px) {
    .img-gallery {
        width: 20%;
    }
}
@media (min-width: 1280px) {
    .img-gallery {
        width: 30%;
    }
}

.bidi-override
{
    unicode-bidi: bidi-override;
}

.bidi-isolate {
    unicode-bidi: isolate;
}

.kdr-text-tab {
    height: 46px !important;
}

.stats-overflow-x {
    overflow-x: unset !important;
}
.desktop-search-group-btn {
    border-top: none;
    border-bottom: none;
}

.formSearch {
    max-height: fit-content;
}

.text-authority-broader {
    color: var(--authority-broader, oklch(42.09% 0.193453 328.3634));
}

.text-authority-narrower {
    color: var(--authority-narrower, oklch(79.27% 0.171 70.67));
}

.text-authority-related {
    color: var(--authority-related, oklch(51.98% 0.176858 142.4953));
}

html[data-theme="dark"] .text-authority-broader {
    color: var(--authority-broader-dark, oklch(42.09% 0.193453 328.3634));
}

html[data-theme="dark"] .text-authority-narrower {
    color: var(--authority-narrower-dark, oklch(79.27% 0.171 70.67));
}

html[data-theme="dark"] .text-authority-related {
    color: var(--authority-related-dark, oklch(51.98% 0.176858 142.4953));
}

.bg-table:nth-child(odd) {
    --tw-bg-opacity: 1;
    background-color: var(--grid-odd-light);
}

.bg-table:nth-child(even) {
    --tw-bg-opacity: 1;
    background-color: var(--grid-even-light);
}

.bg-table:nth-child(odd):is([data-theme="dark"] *) {
    --tw-bg-opacity: 1;
    background-color: var(--grid-odd-dark);
}

.bg-table:nth-child(even):is([data-theme="dark"] *) {
    --tw-bg-opacity: 1;
    background-color: var(--grid-even-dark);
}

.bg-table-2:nth-child(odd) {
    --tw-bg-opacity: 1;
    background-color: var(--grid-2-odd-light);
}

.bg-table-2:nth-child(even) {
    --tw-bg-opacity: 1;
    background-color: var(--grid-2-even-light);
}

.bg-table-2:nth-child(odd):is([data-theme="dark"] *) {
    --tw-bg-opacity: 1;
    background-color: var(--grid-2-odd-dark);
}

.bg-table-2:nth-child(even):is([data-theme="dark"] *) {
    --tw-bg-opacity: 1;
    background-color: var(--grid-2-even-dark);
}