@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,500,500i');

body {
    padding-top: 50px;
    padding-bottom: 20px;
    font-family: 'Raleway', sans-serif; 
    font-weight: lighter;
}

h1 { font-family: 'Raleway', sans-serif; font-weight: 500; }
h2 { font-family: 'Raleway', sans-serif; font-weight: 400; }
h2.h2plus {font-size: 190%; font-weight: 400; }
.lead { font-weight: 400; }
p {font-weight: 300;}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

   
td  {
    vertical-align: top;
}

/* Фильтрация таблицы id=evatab и, возможно, modtab

/* #evatab tr.header {background-color: #f1f1f1;} */
#evatab tr:hover {background-color: #f1f1f1;} 
/* #evatab th {position: relative;} */
#evatab th {text-align: left; vertical-align: middle; position: relative;}
#evatab td {text-align: left; vertical-align: top;}

#modtab tr:hover {background-color: #f1f1f1;} 
#restab tr:hover {background-color: #f1f1f1;} 

.header input {
  background-position: 10px 10px; /* Расположите значок поиска */
  background-repeat: no-repeat; /* Не повторяйте изображение значка */
  width: 100%; /* Полная ширина */
  padding: 15px 10px 20px; /* Добавить немного отступов */
  border: 1px solid #ddd; /* Добавить серую границу */
  box-sizing: border-box;
  text-align: left;
}

.header span {
  border-radius: 50%;
  color: grey;
  opacity: 1;
  text-align: center;
}
  
.header input+span {
  position: absolute;
  /* right: 0px; */
  bottom: 10%;
  display: inline-block;
  height: 19px;
  width: 19px;
  /* border: 2px solid rgba(33, 110, 243, 0.44); */ 
  background-color: #fff;
  line-height: 19px;
  transform: scaleX(0);
  transition: transform .4s ease;
  cursor: pointer;
}

.txt {
    input line-height: 1.42;
    border: solid thin darkgray;
    padding: 6px 6px;
    border-radius: 4px;
    max-width: 1000px;
    height: 32px;
}

.txt::placeholder, .header input+span::placeholder {
    font-family: 'Raleway', cursive, sans-serif;
    opacity: 1; /* Firefox */
    font-style: normal;
    font-weight: 200;
    color: #999999;            
}  

.txt::-moz-placeholder, .header input+span::-moz-placeholder {
    font-family: 'Raleway', cursive, sans-serif;          
    opacity: 1; /* Firefox */            
    color: #999999;            select
}

.txt::-ms-input-placeholder, .header input+span::-moz-placeholder {
    font-family: 'Raleway', cursive, sans-serif;                  
    color: #999999;
}

.txt:-ms-input-placeholder, .header input+span::-moz-placeholder {
    font-family: 'Raleway', cursive, sans-serif;            
    color: #999999;            
}

.txt::-webkit-input-placeholder, .header input+span::-moz-placeholder {
    font-family: 'Raleway', cursive, sans-serif;          
    color: #999999;            
}  

textarea::placeholder {
    font-family: 'Raleway', cursive, sans-serif;
    opacity: 1; /* Firefox */
    font-style: normal;
    font-weight: 200;            
    color: #999999;            
}

.sel {
    line-height: 1.42; 
    border: solid thin darkgray; 
    padding: 6px 6px; 
    border-radius: 4px; 
    max-width: 1000px; 
    width: 480px; 
    height: 32px;
}



check { }
verify { }
verifydigit { }



.supermain { display: inline-block; width: 100%; } 

.mainmenu { 
    display: inline-block; /*Задаем блочно-строчное отображение*/ 
    width: 350px; /*  задаем ширину блока*/
    margin-right: 30px;
    
} 

.spinner-border,.spinner-grow {
         display:inline-block;
         width:var(--bs-spinner-width);
         height:var(--bs-spinner-height);
         vertical-align:var(--bs-spinner-vertical-align);
         border-radius:50%;
         animation:var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name)
         }
@keyframes spinner-border {
         to{transform:rotate(360deg)}
         }
.spinner-border {
        --bs-spinner-width:2rem;
        --bs-spinner-height:2rem;
        --bs-spinner-vertical-align:-0.125em;
        --bs-spinner-border-width:0.25em;
        --bs-spinner-animation-speed:0.75s;
        --bs-spinner-animation-name:spinner-border;
        border:var(--bs-spinner-border-width) solid currentcolor;
        border-right-color:transparent}
        .spinner-border-sm {
                --bs-spinner-width:1rem;
                --bs-spinner-height:1rem;
                --bs-spinner-border-width:0.2em
        }
@keyframes spinner-grow	{
        0%{transform:scale(0)}
        50%{opacity:1;transform:none}
}
.spinner-grow {
        --bs-spinner-width:2rem;
        --bs-spinner-height:2rem;
        --bs-spinner-vertical-align:-0.125em;
        --bs-spinner-animation-speed:0.75s;
        --bs-spinner-animation-name:spinner-grow;
        background-color:currentcolor;
        opacity:0}
        .spinner-grow-sm {
                --bs-spinner-width:1rem;
                --bs-spinner-height:1rem
        }
@media (prefers-reduced-motion:reduce) {
.spinner-border,.spinner-grow {
        --bs-spinner-animation-speed:1.5s}
}

.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within) {
        width:1px!important;
        height:1px!important;
        padding:0!important;
        margin:-1px!important;
        overflow:hidden!important;
        clip:rect(0,0,0,0)!important;
        white-space:nowrap!important;
        border:0!important;
}
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption),.visually-hidden:not(caption) {
        position:absolute!important
}

/* Modal window */



/*
.modal-dialog {position: fixed; top: 5vh; left: 20px; width: 700px; max-width: 90vw; max-height:400px; overflow-y: initial;}
.modal-body { max-height: 60vh; overflow-y: auto; }
*/

.modal-dialog-scrollable { height:calc(100% - var(--bs-modal-margin) * 2) }
.vertical-alignment-helper { display:table; height: 100%; width: 100%; pointer-events:none; }
.vertical-align-center { display: table-cell; vertical-align: middle; pointer-events:none; }
.modal-content { width:inherit; max-width:inherit; height:inherit; margin: 0 auto; pointer-events: all; }

/* Contenteditable elements*/

[contenteditable]:focus {
    outline: 0px solid transparent;
}

/* Tooltips */

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

.tooltip{position:absolute;z-index:1030;display:block;font-size:14px;line-height:1.4;opacity:0;filter:alpha(opacity=0);visibility:visible}
.tooltip.in{opacity:.9;filter:alpha(opacity=90)}
.tooltip.top{padding:5px 0;margin-top:-3px}
.tooltip.right{padding:0 5px;margin-left:3px}
.tooltip.bottom{padding:5px 0;margin-top:3px}
.tooltip.left{padding:0 5px;margin-left:-3px}

.tooltip-inner {
    max-width:300px;
    padding:3px 8px;
    color:#fff;
    text-align:left;
    text-decoration:none;
    background-color:#000;
    border-radius:4px
}
    
.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}
.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-top-color:#000;border-width:5px 5px 0}
.tooltip.top-left .tooltip-arrow{bottom:0;left:5px;border-top-color:#000;border-width:5px 5px 0}
.tooltip.top-right .tooltip-arrow{right:5px;bottom:0;border-top-color:#000;border-width:5px 5px 0}
.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-right-color:#000;border-width:5px 5px 5px 0}
.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-left-color:#000;border-width:5px 0 5px 5px}
.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-bottom-color:#000;border-width:0 5px 5px}
.tooltip.bottom-left .tooltip-arrow{top:0;left:5px;border-bottom-color:#000;border-width:0 5px 5px}
.tooltip.bottom-right .tooltip-arrow{top:0;right:5px;border-bottom-color:#000;border-width:0 5px 5px}    

.tooltip-div-outer {display: inline-block;}
.tooltip-div-inner {}



/* Для accordeon */
/*
.panel-default {width: 100%; min-width: 350px; border-color: #fff; }
.panel-default > .panel-heading {background-color: #ffffff; border-color: #fff;}
*/
.panel-group .panel-heading + .panel-collapse .panel-body {border-top: 0px none #fff;}
h4 {font-weight: 400; font-family: 'Raleway', cursive, sans-serif;}
.panel {box-shadow: 0 0 0 rgba(0,0,0,0);}
.panel-heading {padding: 10px 5px; text-decoration: none;}
.acol:before {text-decoration: none; font-family: "Glyphicons Halflings"; font-weight: 200; content: "\e114"; float: right; margin-left: 15px; font-size: small; display:inline; vertical-align: top;}
.acol.collapsed:before {content: "\e080";text-decoration: none;} 
.acol:hover, .acol:focus, .a:hover, .a:focus {text-decoration: none;}
.acol:visited {text-decoration: none;}
collapsed:hover {text-decoration: none;}

.panel-heading .accordion-toggle:before {
    font-family: 'FontAwesome'; 
    content: "\f054"; 
    padding-right: 5px;
    color: grey; 
    text-decoration: none;
}
.panel-heading .accordion-toggle.collapsed:before {
    content: "\f078"; 
}
.accordion-toggle:hover, .accordion-toggle:focus {text-decoration: none;}



/* Для цифр в кружочках */        
span.digit-in-circle {font-size:large; font-weight:100; color:green;}

/* Для списка <ul> */
ul.defis {list-style-type: '– '}

/* Для многострочного текстовго поля */
textarea
{
  width:100%;
}
.textwrapper
{
  border: 0px solid #999999;
  margin: 5px 0;
  padding: 3px;
}

/* Раскрывать полностью частично открытый текст */

.spoiler_content { opacity: 1; transition: opacity 0.4s ease-in-out; margin-bottom: 20px; }
.spoiler_content span { text-align: left; margin-bottom: 0px; }
.read-more-state { display: none; }
.text_hide { opacity: 0; max-height: 0; font-size: 0; transition: opacity 0.4s ease-in-out; }
.read-more-state:checked~.spoiler_content .text_hide { opacity: 1; font-size: inherit; max-height: 999em; }
.read-more-state:checked~.spoiler_content span { margin-bottom: 20px; }
.read-more-state~.read-more-trigger:before { content: 'Рекомендации'; }
.read-more-state:checked~.read-more-trigger:before { content: 'Скрыть рекомендации'; }
.read-more-trigger { cursor: pointer; display: inline-block; padding: 0px 0px; color: #000000; line-height: 0; border: none; border-radius: .0em; margin-bottom: 0px; font-weight: normal; color: #428bca; }

.spoiler_wrap { position: relative; min-height: 30px; margin-bottom: 15px; }
.spoiler_title { width: 100%; position: absolute; top: 0; left: 0; margin: 0; height: 30px; z-index: 1; font-weight: 300; font-size: 18px;}
.toggle:checked~.spoiler_title, .spoiler_title:hover {color: black; font-weight: 500;}
.icon {height: 18px; position: absolute; width: 18px; right: 0; top: 11px; z-index: 2; }
.icon:before, .icon:after { background: #333; content: ''; height: 4px; right: 0; position: absolute; top: 0; width: 18px; transition: transform 500ms ease;}
.toggle:checked~.icon:before, .toggle:checked~.icon:after { background: black; }
.toggle:not(:checked)~.icon:before {transform: rotate(180deg); }
.toggle:not(:checked)~.icon:after { transform: rotate(90deg); }

.toggle { width: 100%; height: 40px; margin: 0; opacity: 0; cursor: pointer; position: absolute; top: 0; z-index: 3; }
.border { height: 40px; border-bottom: 1px solid #333; }
.toggle:checked~.border { border-bottom: 1px solid black; }
.spoiler_content_2 { padding: 10px 0 0 0; height: 0; overflow: hidden; z-index: -1; position: relative; opacity: 0; transition: .4s ease; }
.toggle:checked~.spoiler_content_2 { height: auto; opacity: 1; z-index: 2; }
.spoiler_content_2>p { margin-bottom: 15px; }
.a1 a, .a2 a { font-weight: 500;}

.plus {
  --t:2px;   /* Thickness */
  --l:18px;  /* size of the symbol */
  --s:10px;  /* space around the symbol */
  --c1:#fff; /* Plus color*/
  --c2:#000; /* background color*/

  display:inline-block;
  width:var(--l);
  height:var(--l);
  padding:var(--s);
  box-sizing:border-box; /*Remove this if you don't want space to be included in the size*/
  
  background:
    linear-gradient(var(--c1),var(--c1)) content-box,
    linear-gradient(var(--c1),var(--c1)) content-box,
    var(--c2);
  background-position:center;
  background-size: 100% var(--t),var(--t) 100%;
  background-repeat:no-repeat;
}

.radius {
  border-radius:50%;
}

/* Popover Bootstrap */
.popover {width: 800px!important; max-width:1024px; max-height: 800px; overflow-y: auto; }


/* input[type="file"] */
input[type="file"] {
    font-weight: 300; 
}
.inputfile {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
}

.inputfile + label {
    font-weight: 300;
    display: inline-block;
    margin-bottom: 0px;
}

.dropdown-header {
   font-size: 14px;
}

/* Чистить текстовое поле */ 
.inner-btn {
  position: absolute;
  width: 10px;
  float: none;
  height: 19px;
  width: 19px;
  line-height: 19px;
  font-weight: 550;
  border: none;
  background-color: transparent;
  left: calc(100% - 22px);
  z-index: 99999;
}

.inner-btn:hover {
  color: blue;
}

/* DIV в одну строку */
.block_header {font-weight: bold; display: inline-block; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; width: 120px;} 
.block {display: inline-block; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; width: 120px; white-space: normal; vertical-align: top;} 
.contain {overflow: auto; white-space: nowrap;}

/* Перенос длинных строк */
.long_string {overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;}

/* Кнопки */
.btn_a {
    margin: 10px 5px 0px 0px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: buttonface;
}