@charset "UTF-8";

/* светлая тема браузера  */
	:root:not(html[data-color-scheme="dark"])  /* если явно не указали какую тему грузить то загружаем  светлую тему  */
	 {
	 	 	color-scheme: light;
		--body_background_color:white; 
		--body_text_color:black;

		--ui-widget-content_background_color: #f4f4f5;
		--ui-widget-content_background_color_start:#f4f4f5;
		--ui-widget-content_background_color_end:#fff;
		--ui-widget-content_border_color:#f4f4f5;
		--ui-widget-content_text_color:#333;

		--ui-state-highlight_background_color:hotpink;
		--ui-state-highlight_border_color:#afeeee;
		--ui-state-highlight_text_color:unset;

		--ui-state-error_background_color:#ffb884;
		--ui-state-error_border_color:#d72b2b;
		--ui-state-error_text_color:#ffffff;;


		--ui-widget-header_background_color_start:#f4f4f5;
		--ui-widget-header_background_color_end:#fbf7ff;
		--ui-widget-header_text_color: #205997;


		/* цвет заливки кнопки*/
		--ui-button_border_color:#fccbff;
		--ui-button_background_color:#ffe0e5;
		--ui-button_background_color_start:#c4e5ff;
		--ui-button_background_color_end:#ffe0e5;
		--ui-button_text_color:#333333;

	/* цвет заливки при манипулации с кнопкуо*/
		--ui-button_hover_border_color:#fccbff;
		--ui-button_hover_background_color:#ffe0e5;
		--ui-button_hover_background_color_start:#c4e5ff;
		--ui-button_hover_background_color_end:#ffe0e5;
		--ui-button_hover_text_color:#212121;
		

		--nal_text_color:#717171;
		--tab_border_color:gray;
		--tab_border_hover_background_color:cornsilk;
		--tab_zebra_background_color:linen;

		--a_link_base_color:#1d43ab;
		--a_link_hover_color:#364db8;
		--a_link_visited_color:#495da2;    /* цвет ссылки по которой уже ходили  */

		
		--navigation_background_color:#f4f4f5;
		--navigation_text_color:#375da2;
		--navigation_items_background_color:#f4f5f5;
		--navigation_items_span_background_color:#fbfbfb;
		--navigation_items_border_color:#fff;
		--navigation_items_hover_background_color:powderblue;
		--navigation_items_hover_border_color:black;
		



		--box_shadow_color:rgba(21, 40, 49, 0.5);  /*цвет тени на сайте */

		--brifprice_text_color:#000;  /*цвет ЦЕН на сайте */


		--box-hide_background_color_start:rgba(247, 244, 242, 0);  /*цвет затинения читать подробнее */
		--box-hide_background_color_end:#f8f7f5;


/*цвет заливки чекбокса */
		--checkbox__text_before_background_color_default:#CDD1DA;  /*цвет заливки НЕ активированного ползунка*/
		--checkbox__text_before_background_color_activ:powderblue;  /*цвет заливки Активированного ползунка*/
		--checkbox__text_after_background_color:#fff; /*цвет переключателя в ползунке*/


		--ui-widget-overlay_background_color: rgba(240, 240, 186, 0.55);
		--ui_balplus_color: green;
		--ui_balminus_color:OrangeRed;

	}


/*темная тема браузера  */

@media (prefers-color-scheme: dark) {  /* если явно не указали какую тему грузить НО в операцилонной системе выставленная темная тема грузим темную тему */

  :root:not(html[data-color-scheme="light"])
   {

   	 color-scheme: dark;
		--body_background_color: #202124;  
		--body_text_color:#bdc1c6;

		--ui-widget-content_background_color:#303134;
		--ui-widget-content_background_color_start:#303134;
		--ui-widget-content_background_color_end:#202124;
		--ui-widget-content_border_color:#3e2f2f;
		--ui-widget-content_text_color:#ffe8e8;

		--ui-state-highlight_background_color:#ae452d;
		--ui-state-highlight_border_color:#f19809;
		--ui-state-highlight_text_color:unset;

		--ui-state-error_background_color:#e74025;
		--ui-state-error_border_color:#d72b2b;
		--ui-state-error_text_color:#ffffff;;



		--ui-widget-header_background_color_start:#303134;
		--ui-widget-header_background_color_end:#2f3742;
		--ui-widget-header_text_color: var(--ui-widget-content_text_color);

		

		/* цвет заливки кнопки*/
		--ui-button_border_color:#7e5f02; 
		--ui-button_background_color:rgb(107, 107, 107); 
		--ui-button_background_color_start:rgb(107, 107, 107);
		--ui-button_background_color_end:rgb(117, 117, 117);
		--ui-button_text_color:#FFF;


		/* цвет заливки при манипулации с кнопкуо*/
		--ui-button_hover_border_color:#eb2f00;   
		--ui-button_hover_background_color:rgb(117, 117, 117);
		--ui-button_hover_background_color_start:rgb(117, 117, 112);
		--ui-button_hover_background_color_end:rgb(107, 107, 107);
		--ui-button_hover_text_color:#FFF;


		--nal_text_color:#d7baad;
		--tab_border_color:gray;
		--tab_border_hover_background_color:#3b1c32;
		--tab_zebra_background_color:#0f0f11;

		--a_link_base_color:#8ab4f8;
		--a_link_hover_color:#8ab4f9;
		--a_link_visited_color:#9ab4f9;


		--navigation_background_color:#303134;
		--navigation_text_color:#fff;
		--navigation_items_background_color:#312f23;
		--navigation_items_span_background_color:#484135;
		--navigation_items_border_color:#6d4f22;
		--navigation_items_hover_background_color:#3b3835;
		--navigation_items_hover_border_color:#eb2f00;
		

		--box_shadow_color:rgb(180,150,150); /*цвет тени на сайте */

		--brifprice_text_color:#81c995;  /*цвет ЦЕН на сайте */
		

		--box-hide_background_color_start:rgba(5,5,5,0); /*цвет затинения читать подробнее */
		--box-hide_background_color_end:#202124;


		/*цвет заливки чекбокса */
		--checkbox__text_before_background_color_default:#CDD1DA;  /*цвет заливки НЕ активированного ползунка*/
		--checkbox__text_before_background_color_activ:#9fc578;  /*цвет заливки Активированного ползунка*/
		--checkbox__text_after_background_color:#fff; /*цвет переключателя в ползунке*/



		--ui-widget-overlay_background_color: rgba(3, 0, 5, 0.55);

		--bordflag_text_color:black;

		--ui_balplus_color: chartreuse;
		--ui_balminus_color:red;

		}

	/*	 img[src$="/img/mail.svg"]{
  				-webkit-filter: invert(100%); 
          filter: invert(100%);	}
*/
}



 html[data-color-scheme="dark"]
   {
   	 color-scheme: dark;
		--body_background_color: #202124;  
		--body_text_color:#bdc1c6;

		--ui-widget-content_background_color:#303134;
		--ui-widget-content_background_color_start:#303134;
		--ui-widget-content_background_color_end:#202124;
		--ui-widget-content_border_color:#3e2f2f;
		--ui-widget-content_text_color:#ffe8e8;

		--ui-state-highlight_background_color:#ae452d;
		--ui-state-highlight_border_color:#f19809;
		--ui-state-highlight_text_color:unset;

		--ui-state-error_background_color:#e74025;
		--ui-state-error_border_color:#d72b2b;
		--ui-state-error_text_color:#ffffff;;



		--ui-widget-header_background_color_start:#303134;
		--ui-widget-header_background_color_end:#2f3742;
		--ui-widget-header_text_color: var(--ui-widget-content_text_color);

		
		/* цвет заливки кнопки*/
		--ui-button_border_color:#7e5f02; 
		--ui-button_background_color:rgb(107, 107, 107); 
		--ui-button_background_color_start:rgb(107, 107, 107);
		--ui-button_background_color_end:rgb(117, 117, 117);
		--ui-button_text_color:#FFF;


/* цвет заливки при манипулации с кнопкуо*/
		--ui-button_hover_border_color:#eb2f00;   
		--ui-button_hover_background_color:rgb(117, 117, 117);
		--ui-button_hover_background_color_start:rgb(117, 117, 112);
		--ui-button_hover_background_color_end:rgb(107, 107, 107);
		--ui-button_hover_text_color:#FFF;


		--nal_text_color:#d7baad;
		--tab_border_color:gray;
		--tab_border_hover_background_color:#3b1c32;
		--tab_zebra_background_color:#0f0f11;

		--a_link_base_color:#8ab4f8;
		--a_link_hover_color:#8ab4f9;
		--a_link_visited_color:#9ab4f9;


		--navigation_background_color:#303134;
		--navigation_text_color:#fff;
		--navigation_items_background_color:#312f23;
		--navigation_items_span_background_color:#484135;
		--navigation_items_border_color:#6d4f22;
		--navigation_items_hover_background_color:#3b3835;
		--navigation_items_hover_border_color:#eb2f00;
		

		--box_shadow_color:rgb(180,150,150); /*цвет тени на сайте */

		--brifprice_text_color:#81c995;  /*цвет ЦЕН на сайте */
		

		--box-hide_background_color_start:rgba(5,5,5,0); /*цвет затинения читать подробнее */
		--box-hide_background_color_end:#202124;


		/*цвет заливки чекбокса */
		--checkbox__text_before_background_color_default:#CDD1DA;  /*цвет заливки НЕ активированного ползунка*/
		--checkbox__text_before_background_color_activ:#9fc578;  /*цвет заливки Активированного ползунка*/
		--checkbox__text_after_background_color:#fff; /*цвет переключателя в ползунке*/

		--ui-widget-overlay_background_color: rgba(3, 0, 5, 0.55);

		--bordflag_text_color:black;

		--ui_balplus_color: chartreuse;
		--ui_balminus_color:red;

		}


body {
        min-height:100%;  
        max-height:100%;
        font-family:Roboto, BlinkMacSystemFont, -apple-system, sans-serif, Arial, "Droid Sans","Helvetica Neue";
        background-color:var(--body_background_color,unset);
        color:var(--body_text_color,unset);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 0.9em;
      }


/* добавление черезстрочной зебры */
.tab_zebra tr:nth-child(odd),   /* для таблицы*/
.tab_zebra >div.tableflex:nth-child(odd), .tab_zebra >li.tableflex:nth-child(odd), /* для tableflex  */
 #forum >div:nth-child(odd),
#retinglist fieldset:nth-child(odd) { background-color:var(--tab_zebra_background_color); }  /* для форума*/



/*подсветка строки при наведении */
.tab_border:hover, div.pclick:hover{ background-color:var(--tab_border_hover_background_color); }



/*Цвет КОД ТОВАРА и предложений часных витрин*/
.nal{color:var(--nal_text_color);}


div.pclick {padding:0.3rem; border:1px dotted var(--tab_border_color);}

a { 
		color:var(--a_link_base_color);
   	text-decoration: none;
		transition: .2s;
   } /* цвет ссылки  */

a:hover {  color: var(--a_link_hover_color);
   					text-decoration: underline; 
				} /* цвет ссылки при навидении */

a:visited {
   color:var(--a_link_visited_color);
   text-decoration: none;
} /* цвет ссылки по которой уже ходили  */


/* checkbox */
.checkbox input {
  position: absolute;
  opacity: 0;
}

.checkbox__text {
  position: relative;
  top:-0.3rem;
	left:-0.3rem;
  padding:0.1rem 0 0.1rem 4rem;; 
}


.checkbox__text:after, .checkbox__text:before {
  content: ' ';
  position: absolute;
  border-radius: 1rem;
  transition: .4s;
}


.checkbox__text:after {	content: attr(data-default) " ";} /* если прописаны  значения "data-default" то проставляем значения в переключатель<span class="checkbox__text" data-default="🌜" data-activ="☀️">  */
.checkbox input:checked + .checkbox__text:after {	content: attr(data-activ) " ";} /* если прописаны  значения "data-activ" то проставляем значения в переключатель<span class="checkbox__text" data-default="🌜" data-activ="☀️">  */

.checkbox__text:before {
  top: 0rem;
  left: 0;
  width: 3.2rem;
  height: 1.6rem;
  background-color: var(--checkbox__text_before_background_color_default);
  box-shadow: inset 0 0 0.3rem #000;

}

.checkbox__text:after {
  top: 0.1rem;
  left: 0.1rem;
  min-width: 1.2rem;
  min-height: 1.2rem;
  text-align: center;
  padding: 0.1rem;
  color: #000;
  background-color: var(--checkbox__text_after_background_color);
  background:radial-gradient(circle at 30%, var(--checkbox__text_before_background_color_default), 70%, var(--box_shadow_color));
  box-shadow:0 2px 4px #000;
 }


.checkbox input:checked + .checkbox__text:before { background-color:var(--checkbox__text_before_background_color_activ); }   /*    цвет заливки под ползунком */
		
.checkbox input:checked + .checkbox__text:after {  left: 1.6rem; background:radial-gradient(circle at 25%, var(--checkbox__text_after_background_color), 75%, var(--box_shadow_color)); }

.checkbox input:hover + .checkbox__text:before, .checkbox input:focus + .checkbox__text:before {  box-shadow: inset 0 0 0.3rem #000, 0 0 2px 3px var(--box_shadow_color); } /* цвет ободка при фокусе на чекбоксе*/

.checkbox input:disabled ~ .checkbox__text, .checkbox input:disabled + span, .ui-state-disabled  {  cursor:not-allowed; opacity:0.5; }  /* убераем насыщенсти если чекбокс disabled  показываем курсор запрещения на disabled*/

/* end checkbox */



.ui-corner-all {  border-radius:0.4rem; }  /* скругление углов */


 /* убераем насыщенсти если  disabled */

.ui-button {
	padding: .4em 1em;
	display: inline-block;
	position: relative;
	line-height: normal;
	margin: .1em;
	vertical-align: middle;
	user-select: none;
	transition: .4s;
font-weight: bold;
}



/* описываем заливку кнопок/ссылок с классом ui-button   */
.ui-button:not(select,.button_reset_style,.ui-state-active),
.ui-button a:link,
.ui-button a:visited,
a.ui-button, 
a:link.ui-button,
a:visited.ui-button,
.ui-button a {  
	border: 1px solid var(--ui-button_border_color);
	background-color:var(--ui-button_background_color);
	background:radial-gradient(ellipse, var(--ui-button_background_color_start), var(--ui-button_background_color_end));
	color: var(--ui-button_text_color);
	
	text-decoration: none;
}



/* цвет заливки при наведении мышкой*/
  .ui-button:not(select,.ui-state-active):hover,
  .ui-button:not(select,.ui-state-active):focus,
  .ui-button:not(select,.ui-state-active):active,
  a.ui-button:hover,
  a.ui-button:focus,
  a.ui-button:active { 
	border: 1px solid var(--ui-button_hover_border_color);
	background-color: var(--ui-button_hover_background_color);
	background:radial-gradient(ellipse, var(--ui-button_hover_background_color_start), var(--ui-button_hover_background_color_end));
	color: var(--ui-button_hover_text_color);

}

.ui-button:hover
{
	 box-shadow: 0px 0px 1.2rem var(--box_shadow_color); /*  Тень под кнопкой при наведении */
}

.ui-widget-header{
	background-color: var(--ui-widget-header_background_color_start);
	background: linear-gradient(80deg, var(--ui-widget-header_background_color_start) 0%, var(--ui-widget-header_background_color_end) 100%);
	color: var(--ui-widget-header_text_color);
	font-weight: bold;
}

.ui-widget-header a { color: var(--ui-widget-header_text_color); }  /* цвет ссылок в контенере ui-widget-header */



.ui-widget-content:not(.ui-state-error,.ui-state-highlight){   /*  описываем контенер его беграунд и цвет текста */
	border: 0.1rem solid var(--ui-widget-content_border_color);
	background-color:var(--ui-widget-content_background_color);
	background: linear-gradient(to top left,var(--ui-widget-content_background_color_start),var(--ui-widget-content_background_color_end));
	color:var(--ui-widget-content_text_color);
}


.ui-state-error{   /* оформление сообщения об ошибках или масимальное вниимаение пользователя*/
	background-color:var(--ui-state-error_background_color);
	border: 1px solid var(--ui-state-error_border_color);
	color:var(--ui-state-error_text_color); 
}


.ui-state-highlight {  /* Выделение ярким для акцента или активности выбранного меню или кнопки  */
	box-shadow: inset 0 0 1rem var(--ui-state-highlight_background_color);
	/*border: 2px solid var(--ui-state-highlight_border_color);*/
	color: var(--ui-state-highlight_text_color);
	}





/* ПАНЕЛЬ НАВИГАЦИИ !  **/
.solidblockmenu ul, .navigation{ background-color: var(--navigation_background_color);	}
.solidblockmenu li > a,
.solidblockmenu li > span,
.navigation > a, 
.navigation > span,
.navigation > i {  color: var(--navigation_text_color); background-color: var(--navigation_items_background_color); border:1px solid var(--navigation_items_border_color); padding:0.5rem;  margin:0.3rem; transition-property: background; transition-duration:0.5s; transition-timing-function:cubic-bezier(.42,1.49,.83,1.360);  }
.navigation {color:var(--navigation_text_color); }
.solidblockmenu li > a:hover, .navigation > a:hover, .navigation  > i:hover {background-color:var(--navigation_items_hover_background_color); color:var(--navigation_text_color); border-color:var(--navigation_items_hover_border_color);}
.solidblockmenu li > span, .navigation span { background-color:var(--navigation_items_span_background_color);  font-weight: bold; }    

.box_shadow_hover:hover, .box_shadow {box-shadow: 0px 0px 7px var(--box_shadow_color); }


.ui-state-active  { /* Выделение анимацией кнопки при загрузки или отображение ЛОАДИНГА  */
  border: 1px solid var(--ui-state-highlight_background_color);
	background-image: repeating-linear-gradient(-45deg, var(--ui-widget-header_background_color_start),var(--ui-widget-header_background_color_end) 11px, var(--ui-state-highlight_background_color) 10px,var(--ui-state-highlight_background_color) 20px);
	background-size: 28px 28px;
	color:var(--ui-widget-header_text_color);
	animation:move 0.7s linear infinite;
	text-shadow: 0 0 0.3rem #000000;
}



@keyframes move{
  0%{background-position:0 0;}
100%{background-position:28px 0;}
}
/*   стили используемые из библиотеки  КОНЕЦ -- Цветовые схемы  */