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


/* Poppins font */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-LightItalic.woff2') format('woff2'), 
         url('../fonts/Poppins/Poppins-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-Black.woff2') format('woff2'), 
         url('../fonts/Poppins/Poppins-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-Regular.woff2') format('woff2'), 
         url('../fonts/Poppins/Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-ExtraLightItalic.woff2') format('woff2'), url('../fonts/Poppins/Poppins-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-Medium.woff2') format('woff2'), url('../fonts/Poppins/Poppins-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-BoldItalic.woff2') format('woff2'), url('../fonts/Poppins/Poppins-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-Light.woff2') format('woff2'), url('../fonts/Poppins/Poppins-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-BlackItalic.woff2') format('woff2'), url('../fonts/Poppins/Poppins-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-ExtraBoldItalic.woff2') format('woff2'), url('../fonts/Poppins/Poppins-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-ExtraBold.woff2') format('woff2'), url('../fonts/Poppins/Poppins-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-MediumItalic.woff2') format('woff2'), url('../fonts/Poppins/Poppins-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-Bold.woff2') format('woff2'), url('../fonts/Poppins/Poppins-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-Italic.woff2') format('woff2'), url('../fonts/Poppins/Poppins-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-ExtraLight.woff2') format('woff2'), url('../fonts/Poppins/Poppins-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-SemiBold.woff2') format('woff2'), url('../fonts/Poppins/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-SemiBoldItalic.woff2') format('woff2'), url('../fonts/Poppins/Poppins-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-ThinItalic.woff2') format('woff2'), url('../fonts/Poppins/Poppins-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-Thin.woff2') format('woff2'), url('../fonts/Poppins/Poppins-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

html {
    background: #f5f5f5;
    height: 100vh;
    font-family: poppins;
}

.inlogLogo {
    max-height: 75px;
    max-width: 100px;
    margin: auto;
    display: block;
}

.menuLogo {
    max-width: 60px;
}

.menuIcon {
    color: #3893CC;
    font-size: 35px;
}

.menuIcon:active {
    color: #134f75;
}

.logoText {
    margin-top: 10px;
    color: #0077BE;
    font-weight: 200;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}

.btn {
    @apply rounded-lg py-2 px-3 cursor-pointer bg-bisharp-250 text-white hover:bg-bisharp-450 transition ease-out duration-500;
}

.btnSelected {
    @apply rounded-lg py-2 px-3 cursor-pointer bg-bisharp-450 text-white;
}

.btnLight {
    @apply rounded-lg py-2 px-3 cursor-pointer bg-gray-200 text-gray-600 hover:bg-gray-300 transition ease-out duration-500;
}

.btnGray {
    @apply rounded-lg py-2 px-3 cursor-default bg-gray-200 text-gray-600;
}

.btnDelete {
    @apply rounded-lg py-1 px-2 cursor-pointer bg-red-600 bg-opacity-10 text-red-600 hover:bg-red-600 hover:text-white transition ease-out duration-200;
}

.btnCollapse {
    @apply rounded-lg py-1 px-2 cursor-pointer bg-bisharp-200 bg-opacity-10 text-bisharp-250 hover:bg-bisharp-250 hover:text-white transition ease-out duration-200;
}

.btnCollapseSelected {
    @apply rounded-t-lg py-1 px-2 cursor-pointer bg-bisharp-250 text-white hover:bg-bisharp-200 hover:bg-opacity-10 hover:text-bisharp-250 transition ease-out duration-200;
}

.btnEdit {
    @apply rounded-lg py-1 px-2 cursor-pointer bg-white text-bisharp-200 hover:bg-bisharp-200 hover:text-white transition ease-out duration-200;
}

input[type="text"]:focus ~ .input-text {
    @apply text-bisharp-450 bg-white transform -translate-y-5 -translate-x-4 scale-75;
}

.disc-input {
    -webkit-text-security: disc;
    -moz-text-security: disc;
    -ms-text-security: disc;
    -o-text-security: disc;
    text-security: disc;
}

.text-xxs {
    font-size: 8px;
}