:root {
	--bg-primary: #141617;
	--bg-secondary:#17191a;
	--bg-tertiary:#1c1d1e;
	--bg-dark-gray:#202020;
	--text-primary: #dae2e6;
	--text-secondary: #fff;
	--text-success: #48a464;
	--text-neutral: rgba(255, 255, 255, 0.54);
	--text-warning: #a43b3b;
    --text-error:#c4af5e;
	--text-info: #477fa8; 
	--text-purple: #911684;
	--text-telegram: #2AABEE;
	--theme-first-color: #fe8900;
    --theme-second-color: #fe6b00;
	--radius-small: 2px;
	--radius-medium: 10px;
	--radius-large: 25px;
	--radius-full: 100%;
	--container-width: 98%;
    --container-width-large:97%;
	--container-width-small:800px;
	--container-width-medium:960px;
}


* {
 scrollbar-width:thin;
 scrollbar-color:var(--theme-second-color) var(--bg-dark-gray)
}
*::-webkit-scrollbar {
 width:14px
}
*::-webkit-scrollbar-track {
 background:var(--bg-tertiary)
}
*::-webkit-scrollbar-thumb {
 background-color:var(--theme-first-color);
 border:3px solid var(--bg-dark-gray)
}

html {
	tab-size: 4;
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-feature-settings: normal;

  scroll-behavior: smooth;
}

 *{
   -webkit-user-select: text;
   -moz-user-select: text;
   -ms-user-select: text; 
}

::selection {
    color: var(--text-primary);
	border-radius:var(--radius-medium);
    background-color: var(--theme-second-color);
}



body {
	font-size: 1rem;
	font-family: 'Poppins', sans-serif;
	line-height: 2rem;
	font-weight:300;


}

body:not(.body_index) {
      background-image:url(../images/body_bg.png);	
}

a:link, a:visited {
    color:var(--text-primary);
   
}

a:hover, a:active {
   transition: all 0.2s ease-out;
   opacity:0.8;
}

a:not([href]) {
  cursor:pointer;	
}


header > .container > *:not(:second-child) {
  flex: 0 1 auto;
  width: 100px;
}

.container {
	width: var(--container-width);
	margin: 0 auto;
}


.container_large {
	width: var(--container-width-large);
	margin: 0 auto;
}


.container_small {
	width: var(--container-width-small);
	margin: 0 auto;
}

.container_medium {
	width: var(--container-width-medium);
	margin: 0 auto;
}

.text_xsmall {
  	font-size: 0.55rem;
}

.text_small {
	
}
.text_large {
	font-size: 1.45rem;
	line-height:2rem;
}

.text_xlarge {
	font-size: 1.65rem;
	line-height:2.3rem;
}

.text_2xlarge {
	font-size: 1.95rem;
	line-height:2.45rem;
}

.text_3xlarge {
	font-size: 2.15rem;
	line-height:3.2rem;
}

.text_4xlarge {
	font-size: 3rem;
}




.weight_normal {
	font-weight:400;
 }

.weight_semibold {
   font-weight:500;

}

.weight_bold {
   font-weight:600;
}
.weight_extrabold {
   font-weight:700;
}

.weight_bold {
	font-weight:700;
}

.line_through {
  text-decoration: line-through;
}

.transform_uppercase {
  text-transform:uppercase;

}

.transform_capitalize {
  text-transform:capitalize;

}

.theme_text_gradient {
	background-image: linear-gradient(90deg, var(--theme-first-color),var(--theme-second-color));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.theme_first_color {
   color:var(--theme-first-color);
}

.position_absolute {
  position:absolute;	
}

.position_relative {
  position:relative;
}

.position_fixed {
  position:fixed;
}

.align_center {
	text-align: center;
}

.align_left {
	text-align: left;
} 

.align_right {
	text-align: right;
}

.items_center {
	align-items: center; 
 }

.flex_container {
	display: flex;
}

.flex_wrap {
  flex-wrap:wrap;
}

.flex_grow {
  flex-grow:1;	
}

.flex_rows_2 {
	flex: 1 0 47%;
}


.flex_rows_3 {
	flex: 1 0 31%;
}

.flex_rows_4 {
	flex: 1 0 23%;
}

.flex_full {
   flex:1;
}

.flex_grid_3 {
	flex-basis: 33.33%;
}

.block {
   display:block;
}

.inline_block {
   display:inline-block;
}

.none {
  display:none;
}

.vmiddle {
  vertical-align: middle;
}

[data-width="100px"] {
	width: 100px;
}

[data-width="60px"] {
	width: 60px;
}

[data-width="1%"] {
	width: 1%;
}

[data-width="2%"] {
	width: 2%;
}


[data-width="2.5%"] {
	width: 2.5%;
}

[data-width="5%"] {
	width: 5%;
}

[data-width="7.5%"] {
	width: 7.5%;
}

[data-width="10%"] {
	width: 10%;
}

[data-width="12.5%"] {
	width: 12.5%;
}

[data-width="15%"] {
	width: 15%;
}

[data-width="17.5%"] {
	width: 17.5%;
}

[data-width="20%"] {
	width: 20%;
}

[data-width="25%"] {
	width: 25%;
}

[data-width="30%"] {
	width: 30%;
}

[data-width="33%"] {
	width: 33%;
}

[data-width="35%"] {
	width: 35%;
}

[data-width="40%"] {
	width: 40%;
}

[data-width="45%"] {
	width: 45%;
}

[data-width="50%"] {
	width: 50%;
}

[data-width="55%"] {
	width: 55%;
}

[data-width="60%"] {
	width: 60%;
}

[data-width="65%"] {
	width: 65%;
}

[data-width="70%"] {
	width: 70%;
}

[data-width="75%"] {
	width: 75%;
}

[data-width="80%"] {
	width: 80%;
}

[data-width="85%"] {
	width: 85%;
}

[data-width="90%"] {
	width: 90%;
}

[data-width="95%"] {
	width: 95%;
}

[data-width="100%"] {
	width: 100%;
}

[data-width="100%"] {
	width: 100%;
}

[data-width="100px"] {
  width:100px;	
}


[data-width="200px"] {
  width:200px;	
}

[data-height="80px"] {
 height:80px;	
}

[data-height="100px"] {
 height:100px;	
}

[data-height="200px"] {
 height:200px;	
}

[data-height="400px"] {
 height:400px;	
}

.float_right {
	float: right;
}

.float_left {
	float: left;
}

.border {
  border-style:dashed;
  border-width:0;
} 

.border_full {
  border-width:1px;
}

.border_neutral {
  border-color:var(--text-neutral);
}

.border_dark_gray {
	border-color:var(--bg-dark-gray);
}

.border_warning {
	border-color:var(--text-warning);
}

.border_white {
	border-color:var(--text-primary);
}

.border_top {
	border-top-width: 1px;
}

.border_left {
	border-left-width: 1px;
}

.border_bottom {
	border-bottom-width: 1px;
}

.border_right {
	border-right-width: 1px;
}

.m_0 {
	margin: 0.12rem;
}

.m_1 {
	margin: 0.25rem;
}

.m_2 {
	margin: 0.5rem;
}

.m_3 {
	margin: 0.75rem;
}

.m_4 {
	margin: 1rem;
}

.-m_1 {
	margin:-0.25rem;
 }

.-m_2 {
	margin:-0.5rem;
 }

.-m_4 {
   margin:-1rem;
}

.m_5 {
	margin: 1.25rem;
}

.m_6 {
	margin: 1.5rem;
}

.m_7 {
	margin: 1.75rem;
}

.m_8 {
	margin: 2rem;
}

.ml_auto {
  margin-left:auto;	
}



.ml_1 {
	margin-left: 0.25rem;
}

.ml_2 {
	margin-left: 0.5rem;
}

.ml_3 {
	margin-left: 0.75rem;
}

.ml_4 {
	margin-left: 1rem;
}

.ml_5 {
	margin-left: 1.25rem;
}

.ml_6 {
	margin-left: 1.5rem;
}

.ml_7 {
	margin-left: 1.75rem;
}

.ml_8 {
	margin-left: 2rem;
}


.-ml_6 {
  margin-left:-1.5rem;	
}


.mt_1 {
	margin-top: 0.25rem;
}

.mt_2 {
	margin-top: 0.5rem;
}

.mt_3 {
	margin-top: 0.75rem;
}

.mt_4 {
	margin-top: 1rem;
}

.mt_5 {
	margin-top: 1.25rem;
}

.mt_6 {
	margin-top: 1.5rem;
}

.mt_7 {
	margin-top: 1.75rem;
}

.mt_8 {
	margin-top: 2rem;
}

.mt_12 {
	margin-top: 3rem;
}

.mr_1 {
	margin-right: 0.25rem;
}

.mr_2 {
	margin-right: 0.5rem;
}

.mr_3 {
	margin-right: 0.75rem;
}

.mr_4 {
	margin-right: 1rem;
}

.mr_5 {
	margin-right: 1.25rem;
}

.mr_6 {
	margin-right: 1.5rem;
}

.mr_7 {
	margin-right: 1.75rem;
}

.mr_8 {
	margin-right: 2rem;
}

.mr_auto {
  margin-right:auto;	
}


.mb_1 {
	margin-bottom: 0.25rem;
}

.mb_2 {
	margin-bottom: 0.5rem;
}

.mb_3 {
	margin-bottom: 0.75rem;
}

.mb_4 {
	margin-bottom: 1rem;
}

.mb_5 {
	margin-bottom: 1.25rem;
}

.mb_6 {
	margin-bottom: 1.5rem;
}

.mb_7 {
	margin-bottom: 1.75rem;
}

.mb_8 {
	margin-bottom: 2rem;
}

.mb_12 {
	margin-bottom: 3rem;
}

.-mb_2 {
	margin-bottom: -0.50rem;
  }

.p_1 {
	padding: 0.25rem;
}

.p_2 {
	padding: 0.5rem;
}

.p_3 {
	padding: 0.75rem;
}

.p_4 {
	padding: 1rem;
}

.p_5 {
	padding: 1.25rem;
}

.p_6 {
	padding: 1.5rem;
}

.p_7 {
	padding: 1.75rem;
}

.p_8 {
	padding: 2rem;
}


/*cell padding*/
.p_cell {
   padding:0.75rem 0.5rem;	
   word-break:break-all;
}

.pl_1 {
	padding-left: 0.25rem;
}

.pl_2 {
	padding-left: 0.5rem;
}

.pl_3 {
	padding-left: 0.75rem;
}

.pl_4 {
	padding-left: 1rem;
}

.pl_5 {
	padding-left: 1.25rem;
}

.pl_6 {
	padding-left: 1.5rem;
}

.pl_7 {
	padding-left: 1.75rem;
}

.pl_8 {
	padding-left: 2rem;
}

.pt_1 {
	padding-top: 0.25rem;
}

.pt_2 {
	padding-top: 0.5rem;
}

.pt_3 {
	padding-top: 0.75rem;
}

.pt_4 {
	padding-top: 1rem;
}

.pt_5 {
	padding-top: 1.25rem;
}

.pt_6 {
	padding-top: 1.5rem;
}

.pt_7 {
	padding-top: 1.75rem;
}

.pt_8 {
	padding-top: 2rem;
}

.pt_12 {
	padding-top: 3rem;
}


.pt_24 {
	padding-top: 6rem;
}

.pr_1 {
	padding-right: 0.25rem;
}

.pr_2 {
	padding-right: 0.5rem;
}

.pr_3 {
	padding-right: 0.75rem;
}

.pr_4 {
	padding-right: 1rem;
}

.pr_5 {
	padding-right: 1.25rem;
}

.pr_6 {
	padding-right: 1.5rem;
}

.pr_7 {
	padding-right: 1.75rem;
}

.pr_8 {
	padding-right: 2rem;
}

.pb_1 {
	padding-bottom: 0.25rem;
}

.pb_2 {
	padding-bottom: 0.5rem;
}

.pb_3 {
	padding-bottom: 0.75rem;
}

.pb_4 {
	padding-bottom: 1rem;
}

.pb_5 {
	padding-bottom: 1.25rem;
}

.pb_6 {
	padding-bottom: 1.5rem;
}

.pb_7 {
	padding-bottom: 1.75rem;
}

.pb_12 {
	padding-bottom: 3rem;
}


.pb_8 {
   padding-bottom: 2rem;
}


.pb_24 {
	padding-bottom: 6rem;
}

.textbox {
  line-height: 1.5;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-medium);
  color: var(--text-neutral);

  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-weight: 300;
}

.button {
 
  border-radius:var(--radius-large);
  color:var(--text-secondary);
}

a.button {
  color:var(--text-secondary);
}

.button_outlined {
  background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box, linear-gradient(to right, var(--theme-first-color), var(--theme-second-color)) border-box;
  border:1px solid transparent;
}

.button_solid {
	background-image: linear-gradient(90deg, var(--theme-first-color),var(--theme-second-color));
}

.button_solid:not(.no_hover):hover {
   opacity:0.8;
    transition: all 0.2s ease-out;
}

.width_full {
  width:100%;
}

.width_auto {
	width:auto;
}

.height_auto {
  height:auto;
}

.height_full {
  height:100%;
}

.bg_theme_gradient {
	background-image: linear-gradient(90deg, var(--theme-first-color),var(--theme-second-color));
}

.bg_orange {
  background-color:var(--theme-first-color);	
}

.bg_primary {
  background-color:var(--bg-primary);
}

.bg_secondary {
	background-color:var(--bg-secondary);
}

.bg_tertiary {
	background-color:var(--bg-tertiary);
}

.bg_none {
    background-color:transparent;

}

.bg_error,  .bg_yellow  {
   background-color:var(--text-error);	
}

.bg_warning, .bg_red {
   background-color:var(--text-warning);	
}

.bg_success, .bg_green{
   background-color:var(--text-success);	
}

.bg_info, bg_blue {
   background-color:var(--text-info);	
}
 
.bg_transparent {
	background-color:rgba(255,255,255, 0.025);
}

.bg_telegram {
	background-color:var(--text-telegram);
}

.bg_purple {
	background-color:var(--text-purple);
}

.bg_blue {
   background-color:var(--text-info);	
}


.color_primary {
   color:var(--text-primary);
}

.color_secondary {
   color:var(--text-secondary);	
}

.color_neutral {
	color:var(--text-neutral);
 }

 .color_success {
   color:var(--text-success);
 }

.color_error {
  color:var(--text-error);	 
}

.color_theme_first {
   color:var(--theme-first-color);	
}

.color_warning {
  color:var(--text-warning);
}

.color_info {
   color: rgb(85, 173, 241);
	
}

.color_confirm {
	color: rgb(92, 151, 231);
}
	
.radius_small {
  border-radius:var(--radius-small);
}

.radius_medium {
  border-radius:var(--radius-medium); 

}

.radius_left_medium {
   border-radius: var(--radius-medium) 0 0 var(--radius-medium);
}

.radius_right_medium {
   border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
}

.radius_large {
	border-radius:var(--radius-large); 
}

.radius_full {
	border-radius:var(--radius-full); 
}

.product_image {
	height: 120px;
	border-radius: var(--radius-small);
	background-size: 120%;
	background-position: center center;
	background-repeat: no-repeat;
}

.background_main {

}

.hero_shape {
  position:absolute;	
}


.hero_image {
   height:270px;
  
   animation: levitate 2s ease-in-out infinite;
 }
 


 

 @keyframes levitate {
   0% {  transform: translateY(0);  }
   50% {  transform: translateY(-10px);  }
   100% {  transform: translateY(0); }
 }
 
input[type="checkbox"]:not(.checkbox_alternative) {
	cursor: pointer;
	width: 40px;
	vertical-align:middle;
	margin-right:0.5rem;
	height: 20px;
	position: relative;
	appearance: none;
	-webkit-appearance: none;
	background: var(--bg-tertiary);
	outline: none;
	border-radius: 20px;
	box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	transition: .5s;
}

input[type="checkbox"]:not(.checkbox_alternative):checked {
	background-image: linear-gradient(90deg, var(--theme-first-color),var(--theme-second-color));
}

input[type="checkbox"]:not(.checkbox_alternative):before {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	position: absolute;
	top: 0;
	left: 0;
	background: #FFF;
	transform: scale(1.1);
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	transition: .5s;
}
input[type="checkbox"]:not(.checkbox_alternative):checked:before {
	left: 20px;
}


input[type=radio] {
 vertical-align:middle;
 display:inline-block;
 margin-right:3px
}

input[type=radio] {
 -webkit-appearance:none;
 appearance:none
}

input[type=radio], .checkbox_alternative {
 position:relative;
 width:1.2em;
 height:1.2em;
 border:1px solid var(--text-neutral);
 vertical-align:-4px;
 color:var(--bg-secondary);
 border-radius:2px;
 background:var(--bg-tertiary)
}
input[type=radio] {
 border-radius:10px
}
input[type=radio]:checked,  .checkbox_alternative:checked {
 background:var(--theme-first-color);
 box-shadow:0 0 0 2px var(--bg-tertiary) inset
}

.dataTables_info {
   margin-top: 1rem;
}
  
  
.dataTables_paginate  {
  text-align:right;	
  font-size: 0.60rem;
  cursor:pointer;
  line-height: 0.90rem;
}

.paginate_button {
  padding: 0.25rem 0.5rem;
}

.paginate_button.current {
  border-radius:var(--radius-medium); 
  background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box, linear-gradient(to right, var(--theme-first-color), var(--theme-second-color)) border-box;
  border:1px solid transparent;	
}

.z_index:999 {

}

.line_height_0 {
  line-height: 0.25rem; 
}

input[name=payment_method] {
  position:absolute;
  cursor:pointer;
  z-index:25;
  left:0;
  opacity:0;
  right:0;
  top:0;
 bottom:0;
 width:100%;
 height:100%; 
}

.grid_container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1rem;
}

.banner_image {
  width:400px;
  height:75px;  
}

.apexcharts-gridline {
  stroke-dasharray: 1;
}


.apexcharts-tooltip, .apexcharts-tooltip-title{
  border: none !important;
  background: transparent !important;
}

.apexcharts-tooltip  {
  background-color:var(--bg-tertiary) !important;
}

.apexcharts-gridline {
  stroke-dasharray: 5;
  opacity:0.3;
}
  
.apexcharts-xaxis-label {
    color: red !Important;
}
  
.apexcharts-legend{
  display:block !important;  
}

.apexcharts-legend-series {
  padding:5px 0px;	
}

.apexcharts-menu{
  background-color:var(--bg-secondary) !important;
  border:none !important; 
}
.apexcharts-theme-light .apexcharts-menu-item:hover {
  background-color:var(--bg-secondary) !important;
}

tspan, .apexcharts-legend-text, .apexcharts-legend-text{
  font-size:18px !important;	
}

.apexcharts-legend {
  top:30px;	
}

.apexcharts-toolbar {
   transform: scale(1.5);

   padding-right: 30px !important;
   padding-bottom: 30px !important;	
}

.dropdown_menu  {
   min-width:180px;  
   margin-left:-110px;
   top: 100%;
   perspective: 1000px;
   z-index: -1;
   animation: downOut 300ms ease-in-out forwards;
   transform-origin: center center;

}


.dropdown_menu:not(.none){
    z-index:999;
}


@keyframes downOut {
  0% {
    transform: translateZ(200px) transLateY(40px);
  }
  80% {
    transform: translateZ(-10px) transLateY(0px);
  }
  100% {
    transform: translateZ(0px) transLateY(0px);
  }
}

.iziModal {
  background: var(--bg-secondary);
  
  
}

[data-menu="#settings_menu"], [data-menu="#admin_menu"] {
  display:none;	
}


select option {
  background-color:var(--bg-tertiary);
  font-weight:300;
}
select option[selected] {
	 background-color:var(--theme-first-color);
	 color:var(--text-primary);
}


.stroked_text {
    color:var(--bg-primary);
    -webkit-text-stroke: 1px var(--theme-first-color);   
}

#bg_canvas {
   position:fixed;
   top:0;
   left:0;
   z-index:-1;
  
}

#wave {
  position:absolute;
 
 
  z-index:-1;  
}


#wave canvas {
  width:100% !Important;	
}

.hero_container {
  position:relative;
  z-index:0;  
}


.couriers_slider img {
  
  width:80px;
  opacity:0.5;
  display: inline-block;
  vertical-align: middle;
  margin: 0px 1rem;
}

.couriers_slider img[src*="ups"] {  
  height:60px;
  width:auto;
}	

.steps_container {
   width:400px;
   height:400px;
   margin:0 auto;
   position:relative;   
}

.circle_step {
   width:60px;
   height:60px;
   line-height:60px;
}

.popup { 
  width: 460px; 
  background-color: var(--bg-secondary);
  z-index: 99999; 
  border-radius: var(--radius-small);
  display: block; 
  position: fixed; 
  overflow: hidden; 
  z-index: -1;
  animation: downOut 100ms ease-in-out forwards;
  transform-origin: center center;
}

.popup:not(.none) {
  z-index:999;	
}

.popup_wrapper { 
  background-color: rgba(0, 0, 0, .5);
  position: fixed; 
  top: 0;
  left: 0; 
  width: 100%; 
  height: 100%;
  opacity: 0.0;
 
}
 
 
 input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  border-radius: 4px;
  margin-right: 2px;
  opacity: 0.6;
  filter: invert(0.8);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1
}

button.position_absolute.float_right {
  top:4px;
  margin-top:0 !important;
  right:10px;  
}

button.position_absolute i {
  margin-top:0 !Important;	
}