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

@font-face {
    font-family: BenSen;
    src: url(/public/fonts/BenSen.ttf);
    font-display: block;
}

@font-face {
    font-family: Themefont;
    src: url(/public/fonts/Themefont.ttf);
    font-display: block;
}

.font-bangla {
    font-family: BenSen, serif;
}

.font-theme {
    font-family: Themefont, serif;
}

[x-cloak] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 0;
}

::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: #d4d4d4;
    box-shadow: 0 0 1px #e0e0e000;
}

input.inputcss ~ span.placeholder {
    top: 8px;
}

.fly {
    color: white;
    background-color: #cacaca;
    padding: 0 1px;
    font-size: 12px;
    top: -18px;
    border-radius: 5px;
    transition: all 0.5s;
}

input.inputcss:valid ~ span.placeholder,
input.inputcss:focus ~ span.placeholder,
input.inputcss:not(:empty) ~ span.placeholder {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: 20px;
    color: black;
    background: linear-gradient(to bottom, rgba(249, 250, 251, 1) 0%, rgba(249, 250, 251, 1) 50%, rgba(249, 250, 251, 0.3) 100%);
    padding: 0 10px;
    font-size: 10px;
    top: -11px;
    border-radius: 5px;
    transition: all 0.5s;
}

input:disabled {
    background-color: #ffffff;
}

.legend-style-point {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid transparent;
    border-radius: 100%;
}

.legend-style-polygon {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #00f;
    border-radius: 10%;
}

.legend-style-line {
    display: inline-block;
    width: 12px;
    height: 2px;
}

.leaflet-control-layers-group-name {
    font-weight: 700;
    margin-bottom: .2em;
    margin-left: 3px
}

.leaflet-control-layers-group {
    margin-bottom: .5em
}

.leaflet-control-layers-scrollbar {
    overflow-y: scroll;
    padding-right: 10px
}

.legend-box {
    position: absolute;
    top: 60px;
    right: 10px;
    z-index: 799;
    background: white;
    padding: 0.75rem;
    border-radius: 0.5rem;
    cursor: move;
}

@media print {
    .leaflet-control-zoom,
    .leaflet-bar.leaflet-control,
    .leaflet-control-boxzoom,
    .leaflet-control-layers {
        display: none;
    }
}


@layer components {
    .adt {
        @apply absolute top-0 left-0 right-0 m-2 flex flex-row items-center justify-start gap-2;
    }

    .adtl {
        @apply absolute top-0 left-0 m-2 flex flex-row items-center justify-start gap-2;
    }

    .adtr {
        @apply absolute top-0 right-0 m-2 flex flex-row items-center justify-end gap-2;
    }

    .adb {
        @apply absolute bottom-0 left-0 right-0 m-2 flex flex-row items-center justify-center gap-2;
    }

    .adbl {
        @apply absolute bottom-0 left-0 m-2 flex flex-row items-center justify-start gap-2;
    }

    .adbr {
        @apply absolute bottom-0 right-0 m-2 flex flex-row items-center justify-end gap-2;
    }

    .adl {
        @apply absolute top-0 bottom-0 left-0 m-2 flex flex-row items-center justify-start gap-2;
    }

    .adr {
        @apply absolute top-0 bottom-0 right-0 m-2 flex flex-row items-center justify-start gap-2;
    }

    .fcol {
        @apply flex flex-col items-center justify-center;
    }

    .fcols {
        @apply flex flex-col items-start justify-center;
    }

    .fcole {
        @apply flex flex-col items-end justify-center;
    }

    .frow {
        @apply flex flex-row items-center justify-center;
    }

    .frows {
        @apply flex flex-row items-center justify-start;
    }

    .frowe {
        @apply flex flex-row items-center justify-end;
    }

    .frowb {
        @apply flex flex-row items-center justify-between;
    }

    .title {
        @apply text-xl md:text-2xl xl:text-3xl font-bold uppercase print:text-base;
    }

    .text-grad {
        @apply w-fit bg-clip-text text-transparent bg-gradient-to-r from-red-500 to-yellow-500;
    }

    .stitle {
        @apply text-xs md:text-base drop-shadow uppercase font-bold print:text-base;
    }

    .menubar {
        @apply frows w-full gap-2 border-b border-green-600 bg-gray-300 px-2;
    }

    .menudiv {
        @apply fcols absolute min-w-40 gap-2 rounded-2xl bg-gray-200 dark:bg-gray-800 bg-opacity-80 p-2 shadow;
    }

    .inputcss {
        @apply w-full rounded-xl border border-gray-400 p-2 pl-12 shadow outline-none;
    }

    .inputcssline {
        @apply w-full border border-gray-400 shadow outline-none;
    }

    .checkbox {
        @apply h-6 w-6 cursor-pointer appearance-none rounded-full border border-green-400 p-2 ml-2 checked:border-transparent checked:bg-green-400;
    }

    .card {
        @apply rounded-[30px] overflow-hidden relative drop-shadow-xl;
    }

    .sqrbtn {
        @apply w-24 h-24 md:w-32 md:h-32 fcol gap-0 shadow rounded-2xl cursor-pointer;
    }

    .modalback {
        @apply fcol gap-2 fixed inset-0 -top-24 z-50 w-full bg-gray-400 print:bg-white bg-opacity-90;
    }

    .modal {
        @apply relative rounded-2xl bg-gray-50 p-4 shadow-2xl print:shadow-none min-w-300 text-black;
    }

    .bodycss {
        @apply p-2 relative m-auto bg-light dark:bg-dark text-black sm:px-6 md:px-12 lg:px-20 xl:px-32 dark:text-white;
    }

    .alink {
        @apply text-base py-2 px-4 cursor-pointer whitespace-nowrap rounded-xl border border-transparent hover:bg-gray-50 hover:border hover:border-gray-300 dark:hover:bg-gray-800 focus:outline;
    }

    .sbtn {
        @apply cursor-pointer text-base text-black frows gap-2 rounded-xl px-2 py-1 pr-4 border border-transparent hover:border hover:border-gray-300 dark:hover:bg-gray-800 focus:outline;
    }
}