@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;
	@apply xl:hidden 2xl:hidden lg:hidden md:hidden sm:block;
}

.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;
	@apply z-10 w-52 absolute overflow-hidden top-[90%] right-10 bg-white dark:bg-[#1C2037] rounded-lg commonBoxShadow;
}

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

.profiledropdown-options{
	@apply flex flex-col gap-5 p-4 border-y border-y-[#ECEFF3] dark:border-y-gray-800;
}

.dropdown-options-text {
	@apply flex items-center gap-2 text-sm;
}

.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 dark:bg-blue-800/50 dark:text-blue-300 border border-blue-500 text-blue-700 px-3 py-3 text-center justify-center rounded-lg;
}

.banner-yellow, .notice{
	@apply bg-yellow-100 dark:bg-yellow-900/40 dark:text-yellow-400 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/50 dark:text-red-500;
}

.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/50 dark:text-green-500;
}

.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] text-wrap 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{
	@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_eye_icon{
	@apply w-[18px] h-[18px] absolute top-4 right-4 cursor-pointer;
}

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

.login-div {
	@apply flex md:flex-row flex-col md:gap-5 gap-12 md:py-0 py-12;
}

.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;
}

.login-card-style {
	@apply shadow-lg p-6 bg-white rounded-lg dark:bg-[#16182f] w-[22rem];
}

.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-[#16192E] 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 text-[18px];
}

.virt_pass_div{
	@apply text-[#838697] dark:text-white bg-[#fafafa] dark:bg-[#1e2035] w-full rounded-lg relative;
}

.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;
}

.virt-form-head{
	@apply text-gray-600 text-lg 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-[#0075FF] 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-4 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;
}

.apexcharts-title-text:is(.dark *),
.apexcharts-yaxis-label:is(.dark *),
.apexcharts-xaxis-label:is(.dark *),
.apexcharts-tooltip:is(.dark *),
.apexcharts-menu:is(.dark *),
.apexcharts-tooltip-text-goals-value:is(.dark *),
.apexcharts-tooltip-text-goals-label:is(.dark *),
.apexcharts-tooltip-title:is(.dark *),
.apexcharts-tooltip-text:is(.dark *),
.apexcharts-active:is(.dark *),
.apexcharts-tooltip-y-group:is(.dark *),
.apexcharts-tooltip-text-y-label:is(.dark *),
.apexcharts-tooltip-text-y-value:is(.dark *),
.apexcharts-tooltip-goals-group:is(.dark *),
.apexcharts-tooltip-z-group:is(.dark *),
.apexcharts-tooltip-text-z-label:is(.dark *),
.apexcharts-tooltip-text-z-value:is(.dark *),
.apexcharts-tooltip .apexcharts-theme-light .apexcharts-tooltip-title:is(.dark *) .apexcharts-theme-dark:is(.dark *) {
	fill: #CBCBCB !important;
	color: #CBCBCB !important;
	background-color: #101224 !important;
}

.apexcharts-legend-series:is(.dark *),
.apexcharts-legend-text:is(.dark *),
.apexcharts-legend:is(.dark *) {
	fill: #CBCBCB !important;
	color: #CBCBCB !important;
}

.apexcharts-gridline:is(.dark *) {
	stroke: #232339;
}

@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
}

.profileavatar{
	@apply bg-[#ebf4ff] dark:bg-[#151f3f] px-3 py-2 rounded-full shadow;
}

.profileavatar:is(.dark *){
	border: 1px solid #2563EB;
	-webkit-box-shadow: 1px 1px 10px 1px #3063ff;
	-moz-box-shadow: 1px 1px 10px 1px #3063ff;
	box-shadow: 0px -1px 10px -4px #3063ff;
}

.eu-page-title .fa:first-child,
.eu-page-title .fas:first-child,
.eu-page-title .far:first-child {
	@apply w-[39px] h-[37px] flex items-center justify-center
}

.poi-document-img{
	@apply w-[50px];
}

.div_main_box{
	@apply grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-8;
}

.virt_modal_main{
	@apply fixed z-[100] left-0 top-0 w-full h-full overflow-auto bg-gray-500/50 justify-center items-center p-3;
}

.virt_modal_main_in{
	@apply flex justify-center items-center h-full w-full;
}

.virt_modal_content{
	@apply dark:bg-[#16192E] relative w-full md:w-[780px] overflow-hidden rounded-xl bg-white shadow-lg py-3;
}

.virt_modal_body{
	@apply p-6 space-y-6 dark:text-gray-300;
}

.virt_modal_footer{
	@apply flex space-x-2 items-center p-6 border-t border-gray-200 rounded-b dark:border-gray-600;
}

.virt_toast_success_main{
	@apply hidden fixed top-28 right-10 z-[100] flex items-center w-full max-w-xs p-4 mb-4 text-white rounded-lg shadow dark:text-gray-400 dark:bg-green-700 bg-green-500;
}

.virt_toast_success_in{
	@apply inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200;
}

.virt_toaster_main{
	@apply hidden fixed top-28 right-10 z-[100] flex items-center w-full max-w-xs p-4 mb-4 rounded-lg shadow text-white;
}

.virt_toaster_in{
	@apply inline-flex items-center justify-center flex-shrink-0 w-8 h-8 rounded-lg;
}

.virt_toaster_head_txt{
	@apply ml-3 text-xl font-medium text-white;
}

.virt_toaster_close{
	@apply text-white rounded-lg inline-flex items-center justify-center;
}

.toaster-close {
	@apply absolute right-5;
}

.toaster-icon {
  	@apply w-5 h-5;
}

.virt_toaster_in_orange{
	@apply text-orange-500 bg-orange-200  dark:bg-orange-700 dark:text-orange-200;
}

.virt_toaster_in_red{
	@apply text-red-500 bg-red-200 dark:bg-red-800 dark:text-red-200;
}

.virt_toaster_in_green{
	@apply text-green-500 bg-green-100  dark:bg-green-800 dark:text-green-200;
}

.virt_toaster_main_yellow{
	@apply text-gray-500 bg-yellow-100 dark:bg-yellow-600;
}

.virt_toaster_main_green{
	@apply dark:text-gray-400 dark:bg-green-700 bg-green-500;
}

.virt_toaster_main_red{
	@apply bg-red-600;
}

.virt_toaster_warn_msg{
	@apply ms-3 text-sm font-normal text-gray-500 dark:text-white;
}

.virt_toaster_danger_msg{
	@apply ms-3 font-normal;
}

.virt_toaster_success_msg{
	@apply ms-3 font-normal text-white;
}

.virtualizor_orange{
	@apply fill-[#fa8901];
}

.virtualizor_blue{
	@apply fill-[#4b5e82];
}

.virtualizor_softaculous {
	@apply dark:fill-slate-400 fill-blue-950;
}

.right_top_menu_div{
	@apply absolute lg:top-5 lg:right-5 md:top-5 md:right-5 sm:top-3 sm:right-3 top-3 right-3 lg:p-4 md:p-4 sm:p-2 p-2 rounded-lg bg-gradient-to-r from-[#f1f8ff] to-[#f9fcff] dark:from-[#0f1730] dark:to-[#101429] border border-[#eef1f5] dark:border-gray-800 z-50;
}

.tab-content {
	@apply mb-4 bg-[#0068fd05] dark:bg-[#1C2037] rounded-lg -mt-4 border border-[#0075ff30] mx-4;
}

.adv-tab-content {
	@apply px-6 py-6 -mt-4 border border-[#0075ff30] dark:border-[#0075ff] rounded-lg bg-[#0068fd05] dark:bg-[#1C2037] mx-4;
}

.manage-vps-button {
	@apply text-[#00C88F] text-xl size-10 rounded-lg shadow-md shadow-[#ededf6] dark:shadow-gray-800 flex justify-center items-center;
}

.select-tab {
	@apply bg-gray-50 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 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
}

.select-div {
	@apply lg:hidden xl:hidden md:hidden sm:block mb-2;
}

.floating-button{
	@apply fixed top-[200px] right-0 flex justify-end items-center overflow-hidden z-[100];
}

.floating-button-div{
	@apply flex items-center common-border bg-white dark:bg-[#16192E] rounded-l-lg commonBoxShadow transition-all duration-500;
}

.floating-button-options {
	@apply flex items-center gap-2 bg-[#F4F6F8] dark:bg-[#252C48] px-3 py-2 rounded-lg text-xs font-medium whitespace-nowrap;
}

.common-border {
	@apply border border-[#ECEFF3] dark:border-[#23283F];
}

.icon-text {
	@apply flex items-center gap-2 text-sm;
}

.navbar {
	@apply hidden md:block lg:block xl:block 2xl:block sticky top-0 z-40 flex w-60 h-[80px] bg-white dark:bg-[#141628] common-border
}

.centered-content {
	@apply flex items-center justify-center;
}

.sidebar-color {
	@apply bg-[#F7F8FB] dark:bg-[#1C2037];
}

.sidebar {
	@apply fixed left-0 top-0 z-50 h-full w-60 sidebar-color overflow-y-hidden transform transition-transform duration-300 ease-in-out -translate-x-full lg:translate-x-0 lg:static lg:h-[calc(100vh-80px)] lg:z-0;
}

.main-window {
	@apply flex md:h-[calc(100vh)] w-full h-full overflow-y-auto overflow-hidden no-scrollbar;
}

.user_notice {
	@apply flex justify-start;	
}

.notice_text {
	@apply text-base;
}

.vpsmanage-header {
	@apply grid md:grid-cols-[70%,30%] grid-cols-1 justify-between items-center gap-5 p-5 pb-2;
}

.vpsmanage-section {
	@apply flex flex-wrap items-center sm:justify-center justify-center md:justify-start lg:justify-start gap-3;
}

.vpsmanage-ip-section{
	@apply flex flex-wrap items-center lg:justify-start md:justify-start sm:justify-center justify-center gap-3;
}

.vpsmanage-tab-options{
	@apply lg:flex md:flex xl:flex sm:hidden hidden justify-center mb-3;
}

.common-card {
	@apply dark:bg-[#16192E] common-border rounded-lg commonBoxShadow;
}

.common-card-subcard {
	@apply bg-[#FAFBFC] dark:bg-[#202337] rounded-lg py-3 px-5 flex shadow;
}

.calender-input {
	@apply bg-gray-50 border-0 border-b-2 border-[#0075ff] text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5  dark:bg-[#0075FF]/[0.08] dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
}

.card-calender-button {
	@apply bg-[#0075FF]/[0.08] text-white shadow items-center flex text-sm rounded-lg cursor-pointer active:scale-95 transition-all duration-150;
}

.calender-icon {
	@apply absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none;
}

.calender-icon-svg {
	@apply w-4 h-4 text-gray-500 dark:text-gray-400;
}

.bandwidth-sub-card {
	@apply bg-[#FAFBFC] dark:bg-[#202337] rounded-lg py-3 px-5 flex place-items-center justify-between lg:gap-5 gap-8 shadow w-3/5 my-2 ml-5;
}

.graph-card-title {
	@apply bg-[#f9fafb] dark:bg-[#1b1e32] px-4 py-2 rounded-t-lg;
}

.weakIndicator{
	@apply bg-[#FB5252] w-7 h-1 rounded-full;
}

.mediumIndicator {
	@apply bg-[#FCA120] w-7 h-1 rounded-full;
}

.strongIndicator {
	@apply bg-[#2BC48A] w-7 h-1 rounded-full;
}

.vertical-tabs {
	@apply hidden lg:block md:flex xl:flex flex-col space-y-1 text-sm font-medium md:me-4 mb-4 md:mb-0 w-1/5;
}

.small-button {
	@apply bg-[#0075FF]/[0.08] text-[#0075FF] border border-[#0075FF] shadow items-center flex text-sm rounded-lg p-2 cursor-pointer;
}

.createvps-tabs {
	@apply overflow-x-auto mx-4 p-4 -mt-4 border border-[#0075ff30] dark:border-[#0075ff] rounded-lg bg-[#0068fd05] dark:bg-[#1C2037];
}

.createvps-advanced {
	@apply border border-[#0075ff30] rounded-lg bg-[#0068fd05] dark:bg-[#1C2037] pb-4 mx-4;
}

.createvps-accordion {
	@apply p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900 mx-4 bg-white commonBoxShadow mb-3;
}

.pageheader-text {
	@apply text-[#2F3554] dark:text-[#D9DBE4] text-xl font-bold;
}

.form-header-text {
	@apply text-[#2F3554] dark:text-white font-bold text-xl mb-1;
}

.left-menu {
	@apply flex flex-col overflow-y-auto no-scrollbar duration-300 ease-linear p-2 h-full;
}

.divider {
	@apply my-2 border-b border-[#0075FF];
}

