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

@layer base {
	html {
		font-family: inter, system-ui, sans-serif;
	}
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	@apply text-[#1F212D] dark:text-[#D9DBE4];
	/*text-[#5E6276] dark:text-[#9A9DA8]*/
}

main {
	flex: 1;
}


/* Light mode Scrollbar */
::-webkit-scrollbar {
	width: 4px !important;
	height: 4px !important;
}
::-webkit-scrollbar-track {
	background: rgb(197, 224, 255) !important;
	border-radius: 10px !important;
}
::-webkit-scrollbar-thumb {
	background: gray !important;
	border-radius: 10px !important;
	transition: all !important;
}
::-webkit-scrollbar-thumb:hover {
	background: rgba(128, 128, 128, 0.646) !important;
}

/* Dark mode Scrollbar */
.dark ::-webkit-scrollbar {
	width: 4px !important;
	height: 4px !important;
}
.dark ::-webkit-scrollbar-track {
	background: #16192E !important;
	border-radius: 10px !important;
}
.dark ::-webkit-scrollbar-thumb {
	background: #363E61 !important;
	border-radius: 10px !important;
	transition: all !important;
}
.dark ::-webkit-scrollbar-thumb:hover {
	background: #363e61b4 !important;
}


/* Common styles */
.commonBoxShadow {
	box-shadow: 0px 10px 20px 0px rgba(0, 16, 107, 0.04);
}

.sidebarNavItem:active, .sidebarNavItem:focus {
	box-shadow: 0px 10px 20px 0px rgba(0, 16, 107, 0.04);
}

/* Tab */
.tab-button.active {
	background: rgba(0, 117, 255, 0.08);
	color: #0075FF;
}
.script-tab-button.active {
	background: rgba(0, 117, 255, 0.08);
	color: #0075FF;
	border-radius: 50px;
}
.tabShadow {
	box-shadow: 0px 5px 10px 0px rgba(0, 16, 107, 0.03);
}
.controlPanelLogos:hover {
	box-shadow: 0px 10px 20px 0px rgba(0, 16, 107, 0.04);
}


/* Toggle switcher */
.toggle-switch {
	position: relative;
	display: inline-block;
	width: 53px;
	height: 27px;
}

.toggle-input {
	display: none;
}

.toggle-label {
	position: absolute;
	top: 0;
	left: 0;
	width: 53px;
	height: 27px;
	border-radius: 17px;
	background-color: #E1E2E7;
	cursor: pointer;
	transition: background-color 0.4s ease;
}

.toggle-label:before {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	transition: transform 0.4s ease;
}

.toggle-input:checked + .toggle-label {
	background-color: #00C88F;
}

.toggle-input:checked + .toggle-label:before {
	transform: translateX(26px);
}

.dark .toggle-label:before {
	background-color: #797B89;
}

.mob_logo{
	max-width: 180px;
	height: 55px !important;
}

.dark .toggle-label {
	background-color: #393D57;
}
.dark .toggle-input:checked + .toggle-label:before {
	background-color: #fff;
}

/* ssh-keys page card */
.switcherCardShadow:hover {
	box-shadow: 0px 10px 20px 0px rgba(0, 16, 107, 0.04);
}

#profileDropdown {
	max-height: 0;
	transition: max-height 0.3s ease-in-out;
}

#profileDropdown.active {
	max-height: 1000px;
	border: 1px solid #ECEFF3;
}
.dark #profileDropdown.active {
	border: 1px solid #353849;
}

.btn {
@apply bg-[#0075FF] text-white text-sm active:scale-95 rounded-md px-5 py-2 cursor-pointer;
}

.btn-danger{
	@apply bg-red-600 text-white text-sm active:scale-95 rounded-md px-5 py-2 cursor-pointer;
}

.banner-blue{
	@apply bg-blue-100 border border-blue-500 text-blue-700 px-3 py-3 text-center justify-center rounded-lg;
}

.banner-yellow, .notice{
	@apply bg-yellow-100 border border-yellow-500 text-orange-700 px-3 py-3 text-center justify-center rounded-lg;
}

.banner-red{
	@apply bg-red-100 border border-red-500 text-red-700 px-3 py-3 rounded-md rounded-lg;
}
.banner-green{
	@apply bg-green-100 border border-green-500 text-green-700 px-3 py-3 rounded-md rounded-lg;
}

.badge-blue{
	@apply bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300;
}

.badge-red{
	@apply bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300;
}

.badge-green{
	@apply bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300;
}

.badge-yellow{
	@apply bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300;
}

.badge-gray{
	@apply bg-gray-100 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300;
}

.left_menu_i{
	@apply text-[#666D80] px-1;
}

.lm-link-class{
  @apply text-[#1F212D] dark:!text-white sidebarNavItem p-2 rounded-lg font-normal text-sm flex items-center gap-3 hover:bg-white dark:hover:bg-[#252C48] hover:border-l-2 hover:border-l-[#0075FF]
}

.eu_menu_popover{
	@apply inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800;
}
.eu_menu_popover_heading{
	@apply px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700;
}

.vpsmanage_icons{
	@apply cursor-pointer;
}

.lm_names{
	@apply text-black dark:text-white whitespace-nowrap;
}

.pagination_page{
	@apply text-[#989CAE] text-xs font-medium border border-[#ECEFF3] dark:border-[#1C2037] dark:bg-[#15172B] rounded-md w-8 py-2;
}

.pagination_page_selected{
	@apply text-[#0068FF] text-xs font-medium border border-[#0068FF24] dark:border-[#1C2037] bg-[#ebf4ff] dark:bg-[#131e3c] rounded-md w-8 py-2;
}

.z-100{
	z-index: 100;
}

.tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #6b7280 transparent transparent transparent;
	z-index: 90000;
}

@media only screen and (max-width: 600px) {
	.tooltiptext::after {
			left: 8.70% !important;
	}
}

.tooltiptext{
	@apply hidden group-hover:block w-[230px] bg-[#6b7280] p-3 opacity-100 text-white text-xs text-center rounded-lg absolute z-50 bottom-[150%] left-[50%] md:-ml-[115px] -ml-[20px];
}

.tab_button{
	@apply py-2 md:px-4 px-2 tab-button transition-all duration-300;
}

.label-text{
	@apply mb-2 text-[#615E83] dark:text-[#B7B9C3] text-sm;
}

@layer base {
	progress {
		border: revert;
	}
}

#loading{
	@apply bg-[#0075ff47] fixed w-full top-0 left-0 z-[200];
}

.progress-bar-value {
	animation: indeterminateAnimation 2s infinite linear;
	transform-origin: 0% 50%;
}

@keyframes indeterminateAnimation {

	0% {
	  transform:  translateX(0) scaleX(0);
	}
	40% {
	  transform:  translateX(0) scaleX(0.4);
	}
	100% {
	  transform:  translateX(100%) scaleX(0);
	}
}

.vm_status_offline{
	@apply flex items-center gap-2 text-sm text-red-600 font-semibold border border-red-600 bg-red-50 dark:bg-[#2a1c2c] rounded-lg px-3 py-1.5;
}

.vm_status_mob{
	@apply text-xs px-2 py-1;
}

.vm_status_online{
	@apply flex items-center gap-2 text-sm text-green-600 font-semibold border border-green-600 bg-green-50 dark:bg-[#2a1c2c] rounded-lg px-3 py-1.5;
}
.vm_status_suspended{
	@apply flex items-center gap-2 text-sm text-blue-600 font-semibold border border-blue-600 bg-blue-50 dark:bg-[#2a1c2c] rounded-lg px-3 py-1.5;
}
.vm_status_ntw_suspended{
	@apply flex items-center gap-2 text-sm text-yellow-600 font-semibold border border-yellow-600 bg-yellow-50 dark:bg-[#2a1c2c] rounded-lg px-3 py-1.5;
}

.main-tab-content{
	@apply lg:p-3 p-1;
}
.vertical_left_tab{
	@apply inline-flex items-center px-3 py-2 rounded-lg hover:text-gray-900 bg-gray-100 hover:bg-gray-200 w-full dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white;
}

.virt-checkbox{
	@apply  w-4 h-4 border-2 text-blue-600 bg-gray-100 border-gray-400 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-200;
}

.virt-select{
	@apply border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 text-gray-900 dark:text-gray-300 bg-white dark:bg-[#15172B] w-full outline-none p-[0.6rem];
}

.select2-search {
	@apply dark:!bg-[#15172B];
}
	/* Change the appearence of the search input field */
.select2-search input {
	@apply dark:!text-[#ffffff] dark:!bg-[#15172B];
}

/* Change the appearence of the search results container */
.select2-results {
	@apply dark:!bg-[#15172B] dark:!text-[#ffffff];
}

/* Change the appearence of the dropdown select container */
.select2-container--bootstrap-5 .select2-selection {
	@apply dark:!border-[#6c757d] dark:!text-[#ffffff] dark:!bg-[#15172B];
}
.select2-results__option:selected{
	@apply dark:!text-[#15172B];
}

/* Change the caret down arrow symbol to white */
.select2-container--bootstrap-5 .select2-selection--single {
	dark:bg-[url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e")] !important;
}

/* Change the color of the default selected item i.e. the first option */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
	@apply text-[#ffffff];
}
.select2-container--default, .select2-selection--single{
	@apply dark:!text-[#ffffff]	dark:!bg-[#15172B];
}

.select2-selection__rendered{
	@apply dark:!text-[#ffffff]	dark:!bg-[#15172B];
}

.virt-input, .virt-password{
	@apply border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 text-gray-900 dark:text-gray-300 outline-none bg-white dark:bg-[#15172B] p-2;
}

.login-virt-input{
	@apply text-[#2F3554] dark:text-white bg-[#fafafa] dark:bg-[#1e2035] px-5 py-4 w-full text-xs rounded-lg border-gray-300 focus:!border-gray-300 focus:!outline-none focus:!shadow-none dark:border-transparent dark:focus:!border-transparent;
}

.login-link{
	@apply text-[#0075FF] text-sm hover:underline transition-all duration-300;
}

.input-style{
	@apply border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 w-16 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 text-gray-900 dark:text-gray-300 outline-none bg-white dark:bg-[#15172B] p-2;
}

.virt-label{
	@apply text-sm font-medium text-[#615E83] dark:text-[#D9DBE4] mr-1 cursor-pointer justify-between pl-2;
}

.blue_btn{
	@apply bg-[#0075FF] text-white text-sm rounded-lg py-2 px-3 cursor-pointer active:scale-95 transition-all duration-150;
}

.disable_btn{
	@apply bg-gray-300 cursor-not-allowed opacity-50 text-sm rounded-lg py-2 px-3 active:scale-95 transition-all duration-150;
}

.bg{
	@apply dark:bg-[#16192E] border border-[#ECEFF3] dark:border-[#23283F] rounded-lg p-3 dark:bg-gray-800 dark:text-[#D9DBE4] text-[#2F3554]; 
}

.bg-gray{
	@apply bg-gray-50/50 dark:bg-[#16192E] border border-[#ECEFF3] dark:border-[#23283F] rounded-lg p-3 dark:bg-gray-800 dark:text-[#D9DBE4] text-[#2F3554];
}
.box-head{
	@apply bg-gray-200 dark:bg-gray-700 px-4 py-2 rounded-t-lg;
}

.cplogos{
	@apply bg-white dark:bg-[#16192E] flex flex-col justify-center items-center gap-3 border border-[#ECEFF3] dark:border-gray-700 rounded-lg lg:w-40 md:w-36 w-40 py-2 transition-all duration-300 controlPanelLogos;
}

.tooltip_class{
	@apply px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm dark:bg-gray-700;
}

.selected{
	@apply text-[#2F3554] dark:text-[#D9DBE4] !border !border-[#0075ff] dark:!border-solid dark:!border dark:!border-[#0075ff];
}

.error, .danger{
	@apply text-red-600;
}

.success{
	@apply text-green-600;
}

.table {
	@apply w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400;
}

.table thead tr{
	@apply !font-medium uppercase bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-400;
}

.table tr{
	@apply bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600;
}
.table th{
	@apply px-6 py-3;
}

.table td{
	@apply px-6 py-4;
}

.table tr.table-success{
	@apply bg-green-400 dark:bg-green-600 text-white;
}

.table tr.table-danger{
	@apply bg-red-400 dark:bg-red-600;
}

#servicestable_wrapper  {
 @apply text-[#2F3554] dark:text-[#D9DBE4];
}

.modal_close_btn{
	@apply text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white;
}

.fa-info-circle{
	@apply cursor-pointer;
}

.popove_class{
	@apply inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800;
}

.listvs_vals{
  @apply text-[#666D80] dark:text-[#989CAE] font-normal;
}

.listvs_vals_header{
	@apply text-[#666D80] dark:text-[#989CAE] text-xs;
}

.virt-input-group{
	@apply flex flex-wrap items-stretch;
}

.virt-grouped-input{
	@apply border border-gray-300 rounded-l-lg focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 text-gray-900 dark:text-gray-300 outline-none bg-white dark:bg-[#15172B] flex-auto p-2;
}

.virt-grouped-span{
	@apply flex items-center px-2 rounded-r-lg  border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500 text-gray-900 dark:text-gray-300 outline-none bg-gray-200 dark:bg-gray-700;
}

.virt-input-disabled{
	@apply bg-gray-100 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 cursor-not-allowed dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500
}

.virt-multi-grouped-span{
	@apply flex items-center px-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500 text-gray-900 dark:text-gray-300 outline-none bg-gray-200 dark:bg-gray-700;
}


.virt-border-shadow{
	@apply dark:bg-[#16192E] border border-[#ECEFF3] dark:border-[#23283F] rounded-lg commonBoxShadow;
}

.required-field{
	color:red;
}

.edit-icon{
	@apply text-yellow-600 cursor-pointer;
}

.blue-icon{
	@apply text-blue-600 cursor-pointer;
}

.delete-icon{
	@apply text-red-600 cursor-pointer;
}

.virt-login-input{
  @apply text-[#838697] dark:text-white bg-[#fafafa] dark:bg-[#1e2035] px-5 py-4 w-full text-sm rounded-lg !outline-none focus:!outline-none;
}

.virt-form-head{
	@apply text-gray-600 text-xl mb-4 font-medium capitalize dark:text-[#D9DBE4] mr-1;
}

.ihb_slctd_pl, .selected_region, .lb_selected_region{
  @apply !border-[#0068fd] !shadow-lg !border relative !bg-gradient-to-tr !from-[#0075ff0a] !from-0% dark:!from-[#0075ff50] dark:!from-0%;
}

.invoice-container {
margin: 15px auto;
max-width: 850px;
background-color: #fff;
border: 1px solid #DEE2E6;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
}

input:focus {
  @apply ring-offset-0 ring-0 !important;
}

.active-menu{
  @apply bg-white dark:bg-[#252C48] border-l-[1px] border-l-[#0075FF] ;
}

#profileDropdown .active-menu{
	@apply bg-white dark:bg-[#252C48] border-l-[2px] border-l-[#0075FF] px-2 py-2;
}

.cursor-not-allowed{
  @apply !text-gray-400;
}

.statsChart .apexcharts-datalabel-value{
	@apply !text-xl !font-light;
}

.statsChart .apexcharts-datalabel-label{
	@apply !text-sm !font-normal;
}
.wiki_help{
	color: #0068fd;
}

.virt-input-number{
  @apply [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none;
}

.virt-toggle-switch{
	@apply w-8 h-5 flex items-center flex-shrink-0 ml-4 p-0.5 bg-gray-300 rounded-full duration-300 ease-in-out peer-checked:bg-blue-400 after:w-4 after:h-4 after:bg-white after:rounded-full after:shadow-md after:duration-300 peer-checked:after:translate-x-3
}

.plan-card-h5{
	@apply text-sm text-[#5E6276] dark:text-[#9A9DA8];
}

.plan-card-h4{
	@apply font-semibold text-sm text-[#1F212D] dark:text-[#B7B9C3];
}

.plan-card-h3{
	@apply text-lg font-medium text-[#615E83] dark:text-[#D9DBE4];
}

.plan-mrate{
	@apply font-medium text-[#0075FF] text-2xl dark:text-[#D9DBE4];
}

.plan-hrate{
	@apply text-[#5E6276] bg-[#0068fd05] px-2 py-1 m-2 dark:bg-[#1C2037] dark:text-[#D9DBE4] text-sm border border-[#f9fafb80] dark:border-gray-600 flex justify-center rounded  shadow;
}

.plan-card, .region-card, .lb_region-card{
	@apply dark:bg-[#16192E] border-2 border-[#0068fd1f] dark:border-[#23283F] rounded-lg commonBoxShadow cursor-pointer w-[17rem];
}

.plan-card-sm{
	@apply rounded-lg p-1 flex flex-wrap items-center gap-6;
}

.plan-card-head{
	@apply flex flex-wrap justify-center gap-3 px-2 border-b border-[#0068fd1f] dark:bg-[#1C2037] shadow;
}

.eu-page-header{
	@apply relative lg:w-9/12 md:w-9/12 sm:w-full w-full px-4 py-3 mb-8 rounded-lg bg-gradient-to-r from-[#f1f8ff] dark:from-[#0f1730] dark:to-[#101429] overflow-hidden border border-[#eef1f5] dark:border-gray-800;
}

.eu-page-title{
	@apply flex items-center gap-2;
}

.nav-button{
	@apply flex items-center gap-1 border border-[#ECEFF3] dark:border-gray-800 bg-white dark:bg-[#15172B] rounded-lg font-medium text-sm tabShadow;
}

.tc-wrap{
	@apply w-full h-8 rounded-md overflow-hidden;
}

.tc{
	@apply w-0 h-full text-center text-xs text-slate-700 dark:text-white rounded-l-md transition-all duration-1000;
}

.card-head{
	@apply bg-[#615E83] dark:bg-[#23283F] bg-opacity-5 px-4 py-2;
}

.checkbox-holder{
	@apply grid grid-cols-3 gap-4 mb-6;
}

.bg-border{
	@apply border border-[#ECEFF3] dark:border-gray-800 rounded-lg;
}

.modal-container{
	@apply hidden overflow-x-hidden overflow-y-auto fixed md:h-full top-4 left-0 right-0 md:inset-0 justify-center items-center z-50;
}

.modal-wrapper{
	@apply relative w-full max-w-2xl px-4 h-full md:h-auto;
}

.modal-content{
	@apply bg-white rounded-lg shadow relative dark:bg-gray-700;
}

.modal-header{
	@apply flex items-start justify-between p-5 border-b rounded-t dark:border-gray-600;
}

.modal-title{
	@apply text-gray-900 text-xl lg:text-2xl font-semibold dark:text-white;
}

.modal-flex-title{
	@apply modal-title flex gap-3;
}

.khidki{
	@apply mt-16 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0
}

.apexcharts-title-text, .apexcharts-yaxis-label, .apexcharts-xaxis-label, .apexcharts-legend-text{
	@apply dark:fill-white;
	font-family: 'inter' !important;
}

textarea{
	padding: 0.5rem;
}

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

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

:is(.dark .select2-container--open .select2-dropdown--below) {
	background-color: #15172B;
}

:is(.dark .select2-container--default .select2-selection--single .select2-selection__rendered){
	background-color: #15172b;
}

:is(.dark .select2-container--default .select2-selection--single) {
	border : 1px solid #4B5563;
	background-color: #15172b;
}

:is(.dark .select2-container--default .select2-selection--multiple .select2-selection__choice){
	background-color : #101224;
	border : 1px solid #4B5563;	
}

:is(.dark .select2-container--default .select2-selection--multiple){
	border : 1px solid #4B5563;	
}

:is(.dark .select2-container--default .select2-results__option[aria-selected=true]){
	background-color : #4B5563 ;
}

.region-info, .lb_region-info{
	@apply px-2 pr-10;
}
.modal.showModal {
	animation: modal 1s ease;
}

@keyframes modal {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.dropdown_menu_hover{
	@apply cursor-pointer hover:bg-[#00C88F14];
}

.tooltip {
position: relative;
display: inline-block;
}

.tooltip .tooltiptext {
visibility: hidden;
width: full;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 10px;
position: absolute;
z-index: 1;
bottom: 120%;
left: 50%;
}

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
visibility: visible;
display: inline-block;
}

.notice-blue{
	@apply bg-blue-600 flex gap-4 max-sm:flex-col items-center text-center text-white px-6 py-3.5;
}

.notice-yellow{
	@apply bg-yellow-600 flex gap-4 max-sm:flex-col items-center text-center text-white px-6 py-3.5;
}

.notice-red{
	@apply bg-red-600 flex gap-4 max-sm:flex-col items-center text-center text-white px-6 py-3.5;
}
.notice-green{
	@apply bg-green-600 flex gap-4 max-sm:flex-col items-center text-center text-white px-6 py-3.5;
}

.togglebutton{
	@apply text-white border-2 p-3 border-gray-200 dark:border-gray-800 rounded-md absolute top-3 left-3 flex items-center justify-center shadow-sm
}
