@tailwind base;
@tailwind components;
@tailwind utilities;
.noto-sans-tc{
    font-family: "Noto Sans TC", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.sibar-ul{
    @apply flex items-center mt-4 text-xl rounded-[15px] hover:bg-[RGB(209,154,0)] cursor-pointer
}

.sibar-ul-hover{
    @apply bg-[RGB(209,154,0)] 
}

.sibar-li{
    @apply p-2 hover:bg-[RGB(209,154,0)] rounded-[15px]
}

.sibar-img{
    @apply w-8 h-8
}

.sibar-li-hover{
    @apply bg-[RGB(209,154,0)]
}

.siber-li-li{
    @apply w-40 mt-2 ml-14 rounded-r-lg border border-transparent border-l-8 hover:bg-[RGB(209,154,0)] hover:border-l-8 hover:cursor-pointer
}
.siber-li-hover{
    @apply bg-[RGB(209,154,0)] border-l-8 
}

.UserChemicalBase-li{
    @apply mr-2 py-2 xl:w-[15%] px-2 rounded-t-lg text-[rgb(86,96,146)] text-center cursor-pointer
}

.UserChemicalBase-hold{
    @apply bg-[rgb(86,96,146)] text-white
}
.ThreeDMenu-li{
    @apply mr-1 py-0.5 border-x-2 border-t-2 border-black  bg-black text-white text-center cursor-pointer w-auto
}

.ThreeDMenu-hold{
    @apply bg-bee text-black
}

.reviewlist-td{
    @apply break-all leading-8 p-2
}
.share-input{
    @apply pl-1 shadow appearance-none border rounded text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent
}
.Droplist{
    @apply pl-1 mr-2 shadow border rounded text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent
}
.image-button{
    @apply bg-[rgb(74,174,171)] flex flex-row justify-center items-center text-white rounded-md px-1 disabled:opacity-60 
}
.text-button{
    @apply bg-[rgb(74,174,171)] flex flex-row justify-center items-center text-white rounded-md px-2 py-1 disabled:opacity-60 
}
.list-button{
    @apply bg-edit text-white rounded-sm px-1 py-1 text-nowrap inline-block
}
.text-cancel-button{
    @apply bg-red-500 flex flex-row justify-center items-center text-white rounded-md px-2 py-1 disabled:opacity-60 
}
.share-table-title{
    @apply xl:flex flex-row justify-between py-2 font-bold hidden bg-[rgb(235,238,243)]
}
.share-table-body{
    @apply rounded-b-lg flex flex-col
}
.share-table-td{
    @apply flex flex-col xl:flex-row border-b-2 xl:justify-between xl:items-center border-[rgb(195,195,195)] py-2 last:border-none
}
.share-table-empty{
    @apply border-b-2 border-[rgb(195,195,195)] py-6
}
.model-table-title{
    @apply xl:flex flex-row justify-between py-2 font-bold hidden bg-[rgb(235,238,243)] rounded-t-lg px-2
}
.model-table-body{
    @apply rounded-b-lg flex flex-col bg-white
}
.model-table-td{
    @apply flex flex-col xl:flex-row border-b-2 xl:justify-between xl:items-center border-[rgb(195,195,195)] py-2 last:border-none px-2
}
.small-table-title{
    @apply xl:flex flex-row py-2 font-bold justify-between hidden bg-[rgb(235,239,242)] rounded-t-md
}
.small-table-body{
    @apply rounded-lg flex flex-col
}
.small-table-td{
    @apply py-1 flex flex-col xl:flex-row xl:justify-between xl:items-center border-[rgb(195,195,195)] odd:bg-white even:bg-[rgb(235,239,242)] last:rounded-b-md
}
.share-radio{
    @apply h-4 w-5
}
.chem-operate-button{
    @apply bg-[rgb(51,160,199)] rounded-md h-10 w-10 hover:cursor-pointer
}
.cesium-button{
    @apply w-10 h-10 bg-[#303336] text-white z-10 hover:cursor-pointer 
}
.black-checkbox{
    @apply size-4 print:size-2 appearance-none checked:bg-black border border-black
}
body{
    @apply break-all
}