html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #0e0e23;
    color: #9b9ca7;
    font-family: Comfortaa, sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>; /* Додайте значення ваги шрифту */
    font-style: normal;
  }
  
	::-webkit-scrollbar { width: 5px; height: 3px;}
::-webkit-scrollbar-button {  background-color: #25307a; }
::-webkit-scrollbar-track {  background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #0e0e23;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #25307a; border-radius: 5px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #25307a;}
	@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;700&display=swap");

    .header {
        height: 90px;
        
		background-color: #0e0e23;
        color: #fff;
        padding: 10px;
        box-sizing: border-box;
        position: fixed;
        width: calc(100% - 70px); /* Враховуємо ширину сайдбару */
        left: 70px; /* Ширина сайдбару */
		z-index:10;
		
    }
	.menu_top {
	background: radial-gradient(circle, #141834 0%, #13162f 100%);	
	height: 60px;
    margin-top:20px;
    border-radius:6px;	
	box-shadow: 0 16px 12px #0e0e23;
	
	}

    .sidebar {
        width: 50px;
        height: 100px;
        position: fixed;
        top: 90px;
        left: 0;
        box-sizing: border-box;
        padding-top: 20px;
		
    
    -webkit-animation: left 1s var(--delay) both;
    animation: left 1s var(--delay) both;
		
    }

    .content {
        margin-left: 50px; /* Враховуємо ширину сайдбару */
        padding-top: 120px;
        padding-left: 20px;
        
		
    }
	
	.anim {
		animation: moveUp 0.5s var(--delay) both;
		position: relative;
		
	}
	@keyframes left {
  0% {
    transform: translateX(-30px);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
	
	
	@keyframes moveUp {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

   .login_user {
	  width: 500px; 
      height: 300px;
	  margin:10px;
	  border-radius:6px;
	  background: radial-gradient(circle, #1a2049 0%, #13162f 100%);
	  margin: auto; 
	   
   }
   
   .input_user_pass {
	   width: 200px; 
       height: 30px;
	   background:#1a1b3c;
       margin: auto;
	   border-bottom:1px solid #9b9ca7;
	   margin-top:15px;
	   font-size: 13px;
   }
   .input_user_pass img {
	   width: 18px; 
       height: 18px;
	   margin-top:5px;
	   margin-left:5px;
   }
   .input_user_pass input {
	   background:#1a1b3c;
	   border:0px;
	   color:#9b9ca7;
	   outline: none;
       box-shadow: none;
	   padding:3px;
	   width: 160px; 
	   padding-top:8px;
	   
   }
   .input_user_pass input:focus {
	   background:#1a1b3c;
	   border:0px;
	   color:#fff;
	   outline: none;
       box-shadow: none;
	   
   }
	.logo_user_pass {
	   width: 200px; 
       height: 100px;
	   margin: auto;
	  text-align: center;
	}
	.logo_user_pass img{ margin-top:20px; }
	.bitto_user_pass{
		height: 24px;
        width: 200px;
        border-radius: 4px;
        background-color: #4255d3;
        font-size: 13px;
        text-align: center;
        justify-content: center;
        color: #fff;
		margin: auto;
		padding-top:10px;
		margin-top:25px;
	}
	
	.name_title {
		float:left;
	}
	.setting_title{
		float:right;
		height: 25px;
        width: 25px;
		background: url("img_admin/ico_setting_25.png") no-repeat;
		cursor:pointer;
	}
	.setting_title:hover {
		background-position: 0px -25px;
		
		
	}
	
	.conteiner_info  {  
	  float:left;  
	  
      height: 300px;
	  margin:10px;
	  border-radius:6px;
	  background: radial-gradient(circle, #1a2049 0%, #13162f 100%);
	  }
	  .content_flax {
		display: flex;  
		  
	  }
	  .crafic {
		flex: 2 1 200px;
		padding:30px;
	  }
	  .user_m {
		flex: 2 1 150px; 
        padding:30px;		
	  }
	  .user_calen {
		flex: 1 2 150px; 
       	padding-bottom:60px;	
	  }
	  .user_curs {
		flex: 1 2 150px;
       padding:30px;		
	  }
	  .list_order_pros {
		flex: 2 1 300px; 
		padding:30px;
		
	  }
	  .list_order_info_load {
		flex: 1 2 350px; 
        padding:30px;		
	  }
	  .list_order_info {
		flex: 2 1 200px;
		padding:30px;
      		
	  }
	  
	
	  .info_pay { 
	  margin-top: 20px;
	  
	  }
	  .cirk_pay {
		margin-top: 20px;
        padding-top:20px;		
	  }
	  .info_user_admin {
		margin-top: 30px;  
		display: flex;   
	  }
	  .info_user_img {
		 flex: 1 2 50px;
         
         object-fit:cover;
        	 
	  }
	  .info_user_img img{
		  max-width: 100%;
		  border-radius:50%;
	  }
	  .info_user_name {
		  flex: 2 1 250px;
		  padding-left:10px;
		  padding-top:10px;
	  }
	  .list_borg_user {
		 display: flex;
         font-size: 14px;
         margin-top:20px;		 
	  }
	    .list_borg_id {
			flex: 1 2 50px;
          			
		}
		.list_borg_name {
			flex: 1 2 150px; 
			padding: 4px 8px;
		}
		.list_borg_data {
			flex: 2 1 100px; 
			padding: 4px 8px;
		}
		.list_borg_day {
			flex: 2 1 40px;
            padding: 4px 8px;			
		}
		
		.info_kyrs_img {
			flex: 1 2 50px;
            padding: 4px 8px;			
		}
		.info_kyrs {
			flex: 1 2 200px;
			font-size: 13px;
		}
		.info_kyrs input {
		
	    border: 0px;
	    width:35px;
	    padding:4px;
	    font-size:15px;
	    outline: none;	
		background-color: #1a1b3c;
	    color:#9b9ca7;
	    border-radius: 4px;
		text-align:center;	
		}
		.button_load_k {
	height: 20px;
	width: 30px;
	border-radius:3px;
	background: #4255d4;
	color:#fff;
	text-align: center;
    justify-content: center;
	padding-top:7px;
	cursor:pointer;
	float:right;
	
}
		
		.spna_id_order {
		height: 24px;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
         color: #fff;
}
  .spna_id_order_ter {
	  height: 24px;
        padding: 4px 8px;
        border-radius: 4px;
        background-color: #4255d3;
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
         color: #fff;
   }
	.spna_img_kyrs {
		height: 35px;
		width: 52px;
        padding: 4px 8px;
        border-radius: 4px;
        background-color: #292c6d;
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
         color: #fff;
	}	
	
	
	

#calendar {
  width: 100%;
  
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  height: 60px;  
  background: #10122b; 
  border-radius: 6px 6px 0 0;
}
 .my-button {
	color:#4154d1; 
	background: #14183c;
	height: 30px;
	width: 30px;
	border-radius:50%;
	margin:10px;
	text-align:center;
 }

.calendar-header button {
  border: none;
  background: none;
  cursor: pointer;
}

.calendar-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  text-align: center;
  margin-top:15px;
  padding:15px;
}

.calendar-day {
  padding: 5px;
  cursor: pointer;
}

.today {
  background-color: #4255d4;
  border-radius:15px;
  color:#ffffff;
}

#progress {
    stroke-dasharray: calc(251.2 * var(--percent) / 100) 251.2;
    stroke-dashoffset: 0;
    animation: progress 2s ease-in-out forwards;
  }

  @keyframes progress {
    from {
      stroke-dashoffset: 251.2;
    }
    to {
      stroke-dashoffset: 0;
    }
  }

.content_flax_order {
	  display: flex;
	  height: calc(90vh - 130px);
      max-height: calc(90vh - 130px);
	
}

.conteiner_info2  {  
	  height: 100%;
	  margin:10px;
	  border-radius:6px;
	  background: radial-gradient(circle, #1a2049 0%, #13162f 100%);
	  }

.filter_order {
	flex: 1 2 100px;
	padding:30px;
	height: 100%;
	overflow-y: auto;
}
.list_order {
	flex: 2 1 300px;
	padding:30px;
	height: 100%;
}
.info_order	 {
	flex: 2 1 200px;
	padding:30px;
	height: 100%;
	overflow-y: auto;
}
.search_order_input {
	width:90%;
	float:left;
}	
.search_order_closed {
	width:10%;
	float:right;
}	
.search_order_input input {
	background: linear-gradient(325deg, #1a1d3a 0%, #212752 100%); 
	color:#9b9ca7;
	border: 0px;
	width:100%;
	padding:4px;
	font-size:15px;
	outline: none;
}
.search_order input {
	background: linear-gradient(325deg, #1a1d3a 0%, #212752 100%); 
	color:#9b9ca7;
	border: 0px;
	width:100%;
	padding:4px;
	font-size:15px;
	outline: none;
}
.search_order {
	height: 20px;
	border-radius:6px;
	padding:20px;
	background: linear-gradient(325deg, #1a1d3a 0%, #212752 100%); 
}
.search_ttn_order {
	height: 20px;
	border-radius:6px;
	padding:20px;
	background: linear-gradient(325deg, #1a1d3a 0%, #212752 100%); 
	
}
.search_ttn_order input{
	background: linear-gradient(325deg, #1a1d3a 0%, #212752 100%); 
	color:#9b9ca7;
	border: 0px;
	width:40%;
	padding:4px;
	font-size:15px;
	outline: none;
	float:right;
}
	
.content_menu_agent {
	position: absolute;
	width: 75%;
	min-height: 100px;
	max-height: 400px;
	background-color: #fff;
	z-index:2;
	margin-top:10px;
	margin-left:-10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Додати тінь */
	border-radius: 8px; /* Закруглення кутів */
	
}
.calendar_z{
	position: absolute;
	width: 75%;
	min-height: 100px;
	max-height: 300px;
	background-color: #fff;
	z-index:2;
	margin-top:10px;
	margin-left:-10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Додати тінь */
	border-radius: 8px; /* Закруглення кутів */
}
.calendar_d{
	position: absolute;
	width: 75%;
	min-height: 100px;
	max-height: 300px;
	background-color: #fff;
	z-index:2;
	margin-top:10px;
	margin-left:-10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Додати тінь */
	border-radius: 8px; /* Закруглення кутів */
}

.content_list_order {
	 overflow-y: auto;
	 height: 90%;
}
.content_list_order2 {
	 overflow-y: auto;
	 height: 80%;
}

.order_user_content {
	display: flex;
	min-height: 40px;
	align-items: center;
    justify-content: center;
	padding-top: 9px;
	padding-bottom: 9px;
	padding-left: 6px;
	border-radius:6px;
}
.order_user_content_title {
	display: flex;
	min-height: 40px;
	align-items: center;
    justify-content: center;
	padding-top: 9px;
	padding-bottom: 9px;
	padding-left: 6px;
	border-radius:6px;
	
}
.order_user_content_data {
	display: flex;
	min-height: 40px;
	align-items: center;
    justify-content: center;
	padding-top: 9px;
	padding-bottom: 9px;
	padding-left: 6px;
	border-radius:6px;
	
}
.selected { 
   background: linear-gradient(325deg, #1a1d3a 0%, #212752 100%);
}
.button_more {
	height: 30px;
	width: 250px;
	border-radius:6px;
	background: #4255d4;
	color:#fff;
	text-align: center;
    justify-content: center;
	padding-top:10px;
	cursor:pointer;
	
}
.button_return {
	height: 20px;
	width: 100px;
	border-radius:6px;
	background: #673ab7;
	color:#fff;
	text-align: center;
    justify-content: center;
	padding-top:8px;
	cursor:pointer;
	font-size: 12px;
	margin-left:28px;
	margin-top:4px;
	}

.button_return_aut {
	height: 20px;
	width: 100px;
	border-radius:6px;
	background: #b73a68;
	color:#fff;
	text-align: center;
    justify-content: center;
	padding-top:8px;
	cursor:pointer;
	font-size: 12px;
	margin-left:28px;
	margin-top:4px;
	}
.button_order {
	height: 30px;
	width: 170px;
	border-radius:6px;
	background: #4255d4;
	color:#fff;
	text-align: center;
    justify-content: center;
	padding-top:10px;
	cursor:pointer;
	float:left;
	margin-left:10px;
}
.button_order_non {
	height: 30px;
	width: 170px;
	border-radius:6px;
	background: #4e4e4e;
	color:#fff;
	text-align: center;
    justify-content: center;
	padding-top:10px;
	float:left;
	margin-left:10px;
}
.button_order_ob {
	height: 20px;
	width: 150px;
	border-radius:4px;
	background: #2f9d01;
	color:#fff;
	text-align: center;
    justify-content: center;
	padding-top:5px;
	float:left;
	margin-left:10px;
	font-size: 0.8em;
}

.button_order_exel {
	height: 30px;
	width: 170px;
	border-radius:6px;
	background: #2f9d01;
	color:#fff;
	text-align: center;
    justify-content: center;
	padding-top:10px;
	float:left;
	margin-left:10px;
	cursor:pointer;
}
.button_order2 {
	height: 30px;
	width: 200px;
	border-radius:6px;
	background: #26a576;
	color:#fff;
	text-align: center;
    justify-content: center;
	padding-top:10px;
	cursor:pointer;
	float:left;
	margin-left:10px;
}
.order_user_content:hover { 
    background: linear-gradient(325deg, #1a1d3a 0%, #212752 100%);
}
.info_order_user_total {
	background: linear-gradient(325deg, #212752 100%, #1a1d3a 0%);
	height: 40px;
	border-radius:6px;
	padding:10px;
	background: linear-gradient(325deg, #1a1d3a 0%, #212752 100%); 
}
.menu_list_order {
	min-height: 0px;
	width: 200px;
	position:absolute;
	margin-top: 23px;
	margin-left: 40%;
	background:#3354af;
	color:#fff;
	border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  
}
.menu_list_order2 {
	min-height: 0px;
	width: 200px;
	position:absolute;
	margin-top: 23px;
	
	background:#3354af;
	color:#fff;
	border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  
}
.menu_list_order_status {
	padding:8px;
	font-size:13px;
	cursor:pointer;
	
}
.menu_list_order_status:hover {
	background:#182b5e;
	
}

.list_order_id {
	flex: 1 1 50px;
	padding:5px;
	
}
.chek_order {
	flex: 1 1 20px;
	padding:5px;
	text-align:center;
}
.deliv_div_order {
	margin:7px;
	height: 20px;
	text-align:right;
	font-size:19px;
	cursor:pointer;
	
}

.comnt_div_order {
	margin:7px;
	height: 20px;
	text-align:right;
	font-size:19px;
}
.info_user_all {
	display: flex;
	
}
.info_user_all input{
	background-color: #1a1b3c;
	color:#9b9ca7;
	border: 0px;
	width:100%;
	border-radius: 4px;
}

  .tab_name {
	  flex: 2 1 100px;
	  padding:5px;
	  margin:4px;
	  font-size: 13px;
	  
  }
  .tab_info {
	  flex: 2 1 150px;
	  background:#1a1b3c;
      padding:5px;	
      margin:4px;
      border-radius:6px;
      height: 20px;	  
  }

.content_list_parts {
	 
	 min-height: 10%;
}

.order_user_parts {
	flex: 2 1 200px;
	  padding:5px;
	  margin:4px;
	  display: flex;
 
}
.img_parts_order {
	height: 70px;
	width: 147px; 
}
.img_parts_order img{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover; /* Забезпечує збереження пропорцій та розтягування зображення */
  border: 1px solid white; /* Товщина 2px, колір білий */
  padding: 4px; /* Відступ від фото */
  box-sizing: border-box; /* Забезпечує врахування відступу у розмірі фото */
  margin-right:9px;
	  }
	  .text_parts_order {
		width: 100%; 
        height: 40px;		
	  }
.order_user_total{
	  width: 30px;
	  padding:5px;
	  margin:4px;
}

.order_user_total input {
	background-color: #1a1b3c;
	color:#9b9ca7;
	border: 0px;
	width:30px;
	height: 25px;
	text-align:center;
	border-radius: 4px;
	}
	
.order_user_setting2 {
	width:25px;
	
}	
.return_goods {
	background: url("img_admin/ico_setting_25.png") no-repeat;
	width:25px;
	height: 25px;
	cursor:pointer;
}
.return_goods:hover {
	background-position: 0px -25px;
	
}
.cancel_goods {
	background: url("img_admin/ico_delete2.png") no-repeat;
	width:23px;
	height:23px; 
	margin-top:10px;
	cursor:pointer;
}
.cancel_goods:hover {
	background-position: 0px -23px;
	
}

.return_goods2 {
	background: url("img_admin/ico_return.png") no-repeat;
	width:23px;
	height:23px; 
	margin-top:10px;
	cursor:pointer;
}
.return_goods2:hover {
	background-position: 0px -23px;
	
}
	
.order_user_price{
	width: 70px;
	padding:5px;
	margin:4px;
}

.order_user_price input {
	background-color: #1a1b3c;
	color:#9b9ca7;
	border: 0px;
	width:50px;
	height: 25px;
	text-align:center;
	border-radius: 4px; 
}
.order_user_total_summ{
	width: 70px;
	  padding:5px;
	  margin:4px;
}
.order_user_setting{
	width: 30px;
	  padding:5px;
	  margin:4px;
}

.info_conter_agent {
	 padding-top:9px;
	 padding-bottom:9px;
	 
}

.info_conter_agent input{ 
     background-color: #1a1b3c;
	color:#fff;
	border: 0px;
	font-size: 16px;
	padding:3px;
	margin:2px;
	border-radius: 4px;
}


.list_order_name_user { 
flex: 2 1 300px;
}
.list_order_info_user {
	flex: 1 2 100px;
	}
	
 .content_filter_order {
	 background:#1a1b3c;
      padding:5px;	
      margin:4px;
      border-radius:6px;
	 height: 30px;
 }	
 
 .ico_admin_panel {
	 height: 23px;
	 width: 22px;
	 background: url("img_admin/ico_order_user.jpg") no-repeat;
	 margin-bottom: 30px;
	 margin-left:50%;
 }
 .ico_admin_panel:hover {
		background-position: 0px -23px;
		
	}
	
 .ico_report_user {
	 height: 26px;
	 width: 26px;
	 background: url("img_admin/ico_zvit_user.png") no-repeat;
	 margin-bottom: 30px;
	 margin-left:50%;
 }
 .ico_report_user:hover {
		background-position: 0px -26px;
		
	}
 .ico_setting {
	 height: 26px;
	 width: 26px;
	 background: url("img_admin/ico_setting.png") no-repeat;
	 margin-bottom: 30px;
	 margin-left:50%;
 }
 .ico_setting:hover {
		background-position: 0px -26px;
		
	}	
 .ico_dok_user {
	 height: 26px;
	 width: 26px;
	 background: url("img_admin/ico_dok_user.png") no-repeat;
	 margin-bottom: 30px;
	 margin-left:50%;
 }
 .ico_dok_user:hover {
		background-position: 0px -26px;
		
	}	
.ico_home_user {
	 height: 26px;
	 width: 27px;
	 background: url("img_admin/ico_home_user.jpg") no-repeat;
	 margin-bottom: 30px;
	 margin-top: 30px;
	 margin-left:45%;
 }
 .ico_home_user:hover {
		background-position: 0px -27px;
		
	}
	
.ico_exit_panel {
	 height: 26px;
	 width: 27px;
	 background: url("img_admin/ico_exit.png") no-repeat;
	 margin-bottom: 30px;
	 margin-top: 30px;
	 margin-left:45%;
	 margin-top:500px;
 }
 .ico_exit_panel:hover {
		background-position: 0px -27px;
		
	}	
.logo_site_admin {
	width: 140px;
	height: 37px;
	float:left;
	text-align:center;
	padding-top: 23px;
}
.panel_user {
	float:right;
	padding-right:23px;
	padding-top:21px;
	color:#9b9ca7;
}	
.list_top_menu {
	float:left;
	color:#9b9ca7;
	min-width: 170px;
	height: 37px;
	float:left;
	text-align:center;
	padding-top: 23px;
	
}
.list_top_menu:hover {
	border-bottom: 3px solid #4255d4;
	background:#11132c;
}

.ico_prro {
background: url("img_admin/ico_prro.png") no-repeat;
	width: 25px;
	height: 25px;
	float:left;
	}
.ico_list_top_menu_order_ven {
	background: url("img_admin/ico_vendor_order.png") no-repeat;
	width: 25px;
	height: 25px;
	float:left;
	margin-left:7px;
	margin-top:-3px;
}
.ico_list_top_menu_return {
	background: url("img_admin/ico_return_order.png") no-repeat;
	width: 25px;
	height: 25px;
	float:left;
	margin-left:7px;
	margin-top:-3px;
}
.ico_list_top_menu_order {
	background: url("img_admin/ico_user_order.png") no-repeat;
	width: 25px;
	height: 25px;
	float:left;
	margin-left:7px;
	margin-top:-3px;
}


 .clear {
  clear: both;
}

label {
  float: left;
}

.custom-radio [type="radio"]:checked,.custom-radio [type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}

.custom-radio [type="radio"]:checked + .custom-radio__label,.custom-radio [type="radio"]:not(:checked) + .custom-radio__label {
  position: relative;
  padding: 6px 0 4px 38px;
  cursor: pointer;
  line-height: 10px;
  display: inline-block;
  margin-bottom: 4px;
}

.custom-radio [type="radio"]:checked + .custom-radio__label:before,.custom-radio [type="radio"]:not(:checked) + .custom-radio__label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  border: 2px solid #ddd;
  border-radius: 100%;
  background: #1a2049;
}

.custom-radio [type="radio"]:checked + .custom-radio__label:after,.custom-radio [type="radio"]:not(:checked) + .custom-radio__label:after {
  content: '';
  width: 10px;
  height: 10px;
  background: #4255d4;
  position: absolute;
  top: 4px;
  left: 4px;
  border-radius: 100%;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.custom-radio [type="radio"]:not(:checked) + .custom-radio__label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

.custom-radio [type="radio"]:checked + .custom-radio__label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.window_print {
	position: absolute;
	width: 400px;
	height: 700px;
	background-color: #fff;
	z-index:2;
	left: 45%;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Додати тінь */
	border-radius: 8px; /* Закруглення кутів */
}

.window_error {
	z-index:10;
	position: relative;
	margin-left:30%;
	width: 400px;
	height: 20px;
	background:#0e0e23;
	border-radius: 5px;
	text-align:center;
	padding:10px;
	opacity:0.9;
	border: 1px solid #0e0f24;
	box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
	display:none;
}	


.window_print  iframe {
	border: none;

}
.ico_print {
	width: 30px;
    height: 30px;
	background: url("img_admin/print_order_ico.png") no-repeat;
	float:right;
	margin-left:10px;
	margin-top:-10px;
}
.ico_pay {
	width: 35px;
    height: 30px;
	background: url("img_admin/ico_pay_30.png") no-repeat;/**/
	float:right;
	margin-left:10px;
	margin-top:-10px;
}

.ico_prro {
	background: url("img_admin/ico_prro_35.png") no-repeat;
	width: 30px;
	height: 30px;
	float:right;
	margin-left:10px;
	margin-top:-10px;
	
}
.ico_prro:hover {
	background-position: 0px -30px;
}
.ico_pay:hover {
	background-position: 0px -30px;
}


.wind_pay_user {
	
	position: absolute;
	width: 350px;
    height: 240px;
	left: 50%; /* Центрування по горизонталі */
    transform: translate(-50%, -50%);
    
	margin-top:-200px;
	background:#1a2049;
	box-shadow: 0 16px 12px #0e0e23;
	opacity: 0;
	border-radius: 5px;
	text-align:center;
	
}
.wind_pay_user input{
	background: linear-gradient(325deg, #1a1d3a 0%, #212752 100%); 
	color:#9b9ca7;
	border: 0px;
	width:100px;
	padding:4px;
	font-size:15px;
	outline: none;
	text-align:center;
	border-radius: 5px;
}

.container_wind_pay {
	        display: flex;
            justify-content: space-between; /* Розміщує елементи зліва і справа */
            align-items: center; /* Вирівнює по вертикалі */
            width: 100%; /* Ширина контейнера */
      }
.container_wind_pay div {
            padding: 10px;
            border: 1px solid #0e0f24;
        }

.ico_print:hover {
	background-position: 0px -30px;
	
}
.list_status_order {
	height: 40px;
	padding-left: 4px; 
	padding-right: 4px; 
	margin-top:4px;
	font-size: 12px;
    
}
.list_status_order:hover {
	
	background:#21285c;
	
}
.ico_order_status {
	width: 30px;
    height: 30px;
	
	float:right;
	margin-left:10px;
	margin-top:-10px;
}
.ico_order_status:hover .menu_ico_order_status{
	display:block;
	opacity: 0.9;
	
}
.menu_ico_order_status {
	position: absolute;
	width: 200px;
    min-height: 220px;
	background:#1a2049;
	margin-left:-160px;
	margin-top:10px;
	border-radius:6px;	
	box-shadow: 0 16px 12px #0e0e23;
	opacity: 0;
	display:none;
	z-index:20;
}

.return_goods_window {
	position: absolute;
	width: 150px;
    height: 80px;
	margin-left:-80px;
	margin-top:-51px;
	background:#1a2049;
	box-shadow: 0 16px 12px #0e0e23;
	opacity: 0;
	border-radius: 5px;
	text-align:center;
	display:none;
	
}
.return_goods_window input{
	background: linear-gradient(325deg, #1a1d3a 0%, #212752 100%); 
	color:#9b9ca7;
	border: 0px;
	width:20%;
	padding:4px;
	font-size:15px;
	outline: none;
	text-align:center;
	border-radius: 5px;
}


 .menu_print {
  background:#1a2049;
  width: 100%;
  height: 40px;	
  position:absolute; 
  display: flex; 
  flex-wrap: wrap;
 }
 .loading_gif {
	width: 220px;
	height: 20px;
	background: url("img_admin/loading.gif") no-repeat;
	margin-left:30%;
	margin-top:40%;
}

.count_new_order {
	background:#af0808;
    width: 20px;
    height: 16px;	
	position:absolute;
	border-radius:12px;
	color:#fff;
	opacity: 0.9;
	box-shadow: 0 16px 12px #0e0e23;
	font-size: 0.8em;
	padding-top:4px;
	margin-left:145px;
	margin-top:-33px;
}

.container {
      display: flex; /* Розташування елементів у рядок */
	  flex-wrap: wrap;
      gap: 4px; /* Відступи між квадратами */
      overflow-y: auto;
      padding: 4px;
	  height: 90%;
	  justify-content: center;
    }
	.container2 {
      display: flex; /* Розташування елементів у рядок */
	  flex-wrap: wrap;
	  gap: 5px; /* Відступи між квадратами */
      overflow-y: auto;
      padding: 10px;
	  height: 120px;
	  justify-content: center;
    }

    /* Квадрати */
    .square {
      width: 180px;
      height: 180px;
      border: 1px solid #ddd;
      border-radius: 6px;
      display: flex;
      flex-direction: column; /* Внутрішні елементи вертикально */
      justify-content: center; /* Вирівнювання по вертикалі */
      align-items: center; /* Вирівнювання по горизонталі */
      text-align: center; /* Текст по центру */
      
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
	.square2 {
      width: 130px;
      height: 80px;
      border: 1px solid #ddd;
      border-radius: 6px;
      text-align: center; /* Текст по центру */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
	.img_parts_order2 {
	height: 40px;
	width: 40px; 
	float:left;
}
.img_parts_order2 img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover; /* Забезпечує збереження пропорцій та розтягування зображення */
  border: 1px solid white; /* Товщина 2px, колір білий */
  padding: 4px; /* Відступ від фото */
  box-sizing: border-box; /* Забезпечує врахування відступу у розмірі фото */
  margin-right:9px;
	  }
	.text_parts_order2 {
	float:left;	
	margin-top:5px;	
	}
	.list_z {
		display:block;
		
	}
	

.square div {
      margin: 5px 0;
    }
	
	
	
.rapord_day {
	display: flex; /* Розташування дочірніх блоків у рядок */
      justify-content: space-between; /* Відстань між блоками однакова */
      align-items: center; /* Вирівнювання по вертикалі */
      flex-wrap: wrap; /* Автоматичний перенос, якщо елементи не поміщаються */
      width: 100%; /* Ширина контейнера */
      
      box-sizing: border-box;
	
}
.square_raport_day {
	flex: 1 1 calc(6% - 10px); /* Розмір 1/8 ширини контейнера - 10px відступ */
      margin: 5px; /* Відступи між блоками */
      height: 40px; /* Висота блоків */
      background-color: #f0f0f0; /* Колір фону для візуалізації */
      border: 1px solid #ddd; /* Границя для візуалізації */
      display: flex; /* Вирівнювання тексту всередині блоку */
      justify-content: center; /* Вирівнювання тексту горизонтально */
      align-items: center; /* Вирівнювання тексту вертикально */
      border-radius: 5px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	
	
}
	.day_report_user_order {
	height: 105px;
	border-radius:6px;
	padding:5px;
	background: linear-gradient(325deg, #1a1d3a 0%, #212752 100%); 
}
.rapord_day_all {
	display: flex; /* Розташування дочірніх блоків у рядок */
      justify-content: space-between; /* Відстань між блоками однакова */
      align-items: center; /* Вирівнювання по вертикалі */
      flex-wrap: wrap; /* Автоматичний перенос, якщо елементи не поміщаються */
      width: 100%; /* Ширина контейнера */
      
      box-sizing: border-box;
	
	
}

.square_raport_day_all {
	flex: 1 1 calc(45% - 10px); /* Розмір 1/8 ширини контейнера - 10px відступ */
      margin: 5px; /* Відступи між блоками */
      height: 40px; /* Висота блоків */
      background-color: #f0f0f0; /* Колір фону для візуалізації */
      border: 1px solid #ddd; /* Границя для візуалізації */
      display: flex; /* Вирівнювання тексту всередині блоку */
      justify-content: center; /* Вирівнювання тексту горизонтально */
      align-items: center; /* Вирівнювання тексту вертикально */
      border-radius: 5px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	
	
}
.setting_price {
	display: flex; /* Встановлюємо flex-контейнер */
            justify-content: space-between; /* Рівномірний розподіл між стовпчиками */
            gap: 10px; /* Відстань між стовпчиками */
            max-width: 800px; /* Максимальна ширина контейнера */
            margin: 0 auto;
	
}
.column_price {
	flex: 1; /* Кожен стовпчик займає однакову ширину */
            background-color: #f0f0f0; /* Колір фону для наочності */
            padding: 20px; /* Внутрішні відступи */
            text-align: center;
	        border-radius: 5px;
}
.column_price2 {
	flex: 1; /* Кожен стовпчик займає однакову ширину */
            /* Колір фону для наочності */
            padding: 3px; /* Внутрішні відступи */
            text-align: center;
	       
}
	
	/* Стиль для обгортки перемикача */
.toggle-wrapper {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 30px;
}

/* Сховуємо стандартний чекбокс */
.toggle-checkbox {
    display: none;
}

/* Стиль для видимої кнопки */
.toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ddd;
    border-radius: 15px;
    cursor: pointer;
    height: 100%;
    width: 100%;
    padding: 0 5px;
    transition: background-color 0.3s ease;
}

/* Стиль для OFF та ON текстів */
.toggle-off, .toggle-on {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    flex: 1;
    transition: color 0.3s ease;
}
.ico_copy {
	height: 16px;
    width: 16px;
    background: url("img_admin/ico_copy.png") no-repeat;	
	float:left;
	cursor:pointer;
	margin-right:3px;
}
.ico_copy:hover {
	background-position: 0px -16px;
	
}
.ico_viber_but {
height: 25px;
    width: 25px;
	background: url("img_admin/ico_viber.png") no-repeat;
	float:right;	
	background-size: cover;
    background-position: 0px 0px;
    background-repeat: no-repeat
	
}
.ico_viber_but:hover {
	background-position: 0px -25px;
	
}

.user_setting_containter {
	max-width: 700px;
	
}
.img_user_setting {
	height: 130px;
    width: 130px;
	background: url("img_admin/User_ico_big.png") no-repeat;
	float:left;
}
.info_user_setting {
	float:left;
	max-width: 550px;
	height: 130px;
}

/* Початковий стан: OFF */
.toggle-label .toggle-on {
    color: #666;
}

/* Активний стан: ON */
.toggle-checkbox:checked + .toggle-label {
    background-color: #00bcd4;
}

.toggle-checkbox:checked + .toggle-label .toggle-on {
    color: #fff;
}

.toggle-checkbox:checked + .toggle-label .toggle-off {
    color: #666;
}
	

@media screen and (max-width: 1200px) {
  .content_flax {
    flex-wrap: wrap; /* Рядки стовпчика прокручуються, коли не вистачає місця */
  }
  .content {
        margin-left: 10px; /* Враховуємо ширину сайдбару */
       padding-left: 10px;
        
    }
  .sidebar {
            display: none; /* Ховаємо сайдбар на малих екранах */
        }

        .header {
            width: 100%; /* Повна ширина на малих екранах */
            left: 0; /* Без відступу від лівого краю */
        }

        .content {
            margin-left: 0; /* Зменшуємо відступ від лівого краю */
        }
}