.atr_box {
  background-color: #fbfbfb; border:2px solid gray;
  width:100%;
  overflow:auto; box-sizing: border-box;
}
.atr_box ul {clear:both;}
.atr_box button {padding: 1px 7px;}
.atr_box .atr_catlist{display:none;}
.atr_box .atr_list{display:block;}
.edit_attr .atr_catlist{display:block;}
.edit_attr .atr_list{display:none;}

.atr_list {padding: 20px; overflow:auto; max-height: 300px;}
.atr_list.all_Attr,.atr_catlist.all_Attr{max-height: 2000px;}

.atr_box li {
  display:block; background-color: #efffef;
  padding:2px 2px 2px 20px;
  border-radius: 0 10px;
  border-bottom: 1px solid gray;
  position:relative;
  transition: background-color 1s ease-in-out ;
}
.atr_list li.notuse {background-color: white;}

.atr_list li.hideByAttr {display:none !important;}


.only_used li.notuse{display:none;}

.atr_list .a-show{display:inline-block;}
.atr_list .a-edit{display:none;}

.edit_mode .a-show{display:none;}
.edit_mode .a-edit{display:inline-block;}
li.aNew{display:none;}
.edit_mode li.aNew{display:block;}
.atr_catlist li.aNew{display:block;}


.sw2-3 + span {display:none;}
.sw2-3:checked + span {display:inline-block;}

.atr_head, .atr_foot {background-color: #f0f0f0; padding: 10px;}
.atr_head {border-bottom: 2px solid gray;}

/* Управление атрибутами (кнопки)*/
.atr_head label{margin: 0 20px;}
.atr_head label input{display: none; }
.atr_head label.pull-right{margin-left: 0;}
.ctrl_attr:after{content:"Значения";}
.edit_attr .ctrl_attr:after{content:"Атрибуты"; line-height: 20px; }
.ctrl_edit:after{content:"Просмотр";}
.edit_mode .ctrl_edit:after{content:"Редактирование"; line-height: 20px; }
.ctrl_used:after{content:"Все Значения";}
.only_used .ctrl_used:after{content:"Мои Значения";}



/* Размеры и длины*/
.atr_list > li > span {display:inline-block; box-sizing: border-box;}
.atr_list > li > span:nth-child(1) {width:20%; padding-right: 5px;}
.a-show,.a-edit  {width:79%}
.a-edit input[type=text] {width:25%}
.a-edit span {width:55%}
.a-edit span > input[type=text] {width:40%}
.a-edit span > input[name=sort] {width:15%}
span.a-show > i{display: inline-block; width: 30%; background-color: #99999910;}
span.a-show > s{display: inline-block; width: 30%; text-decoration: none; background-color: #99999920;}
span.a-show > b{display: inline-block; width: 35%; background-color: #99999930;}

.F_color .a-edit span > input[name=value2] {width: calc(31% - 16px);}
.a-edit input[type=checkbox] {margin: 0 8px;}
.atr_box button+button {margin:0 0 0 7px;}
input::placeholder {color:lightgrey; font-style: italic;}


.atr_catlist { padding: 10px; background-color: #ecec86; overflow:auto; max-height: 300px;}
/*.atr_catlist li {padding-left:20px; border-radius:0px 10px;}*/
li.aNew {background-color: #f1f1f1 !important; margin-top:10px; margin-bottom:3px;}
li.aSave {background-color: #b1fdb1 !important;}
li.aDel {background-color: #ffe6eb  !important;}
.atr_catlist input[type=text] {width:25%;}
.atr_catlist input[name=sort] {width:10%;}

.edit_attr .ctrl_val {display:none}

li.aChg:before{ /* Отметка о модификации записи */
  content: "*";
  position: absolute; top: 18px;  left: 5px;
  color: red;
  font-size: 30px;  line-height: 0px;
}
li.aChg .btn-success{box-shadow: 0 0 5px 1px black; color: yellow;}
.atr_box ul li.E_errorMarker{background-color: red !important;}