div.mobile-mark {
    display: none;
}

div.loginDiv {
    position: absolute;
    width: 50%;
    height: 50%;
    background-color: #f8f7f3;
    position: absolute;
    top: 25%;
    left: 25%;
    z-index: 1001;
}

div.loginDivBack {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f8f7f3;
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 1000;
}

div.mainDiv {
    //width: 98%;
    padding-top: 40px;
    margin: auto;
}

div.paginationDiv {
    width: 70%;
    position: relative;
    margin: auto;
}

div.totalFilterDiv {
    position: relative;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

/********************** Massive actions button start ***********************/
tr.maDiv-TR, tr.maDiv-TR td{
    height: 30px;
    border-collapse: collapse;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}
div.maDiv{
    position: relative;
    display: none;
    width: 100%;
    height: 25px;
}
div.maDiv a{
    position: absolute;
    display: block;
}
/********************* Massive actions button end ************************/

div.system-info-div {
    width: 100%;
}

table.system-settings{
    border-style: solid;
    border-collapse: collapse;
    border: 2px solid silver;
    font-size: 12px;
    padding: 0;
}
table.system-settings td {
    border-left: 0px;
    border-right: 0px;
    padding: 3px;
}

input[type=number] {
  width: 4em;
}

table.addEditForm {
    width: 90%;
    margin: auto;
    font-size: 12px;
}

table.registerForm {
    width: 44%;
    margin: auto;
    font-size: 12px;
}

table.adminMainTable {
    margin: auto;
    border-spacing: 5px;
    border-collapse: separate;
}

.adminMainTable th{
    text-align: left;
    background-color: #FAEBD7;
}

.usersMainTable th{
    text-align: center;
    background-color: #FAEBD7;
}

.adminMainTable td{
    vertical-align: text-top;
    width: 25%;
}

table.loginForm {
    width: 200px;
    margin: auto;
    font-size: 16px;
    position: relative;
}
table.loginForm td{
    text-align: center;
}

#loginFormPhone,#loginFormPassw,#loginFormUnn,#userPin {
    font-size: 16px;
    width: 100%;
    height: 2em;
}


/********************** Settings *****************************/
span.span-warning {
    font-weight: bold;
    color: red;
    //font-size: 22px;
}

/********************** Filters *****************************/

div.filtersDiv {
    //position: absolute;
    //top: -2000px;
    position: relative;
}

span.span-statuses {
    display: inline-block;
    background-color: pink;
    border-radius: 8px 8px 8px 8px;
    border: 2px solid grey;
    padding: 2px 5px 2px 5px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    //margin-left: 10px;
}
span.span-statuses:hover{
    border: 2px solid red;
    background-color: #7FFF00;
}

/***************** Main and Marks Tables *********************/

.usersMainTable, .usersMarkTable {
    width: 100%;
    margin: auto;
    font-size: 12px;
    border-style: solid;
    border-collapse: collapse;
    border: 1px solid silver;
}

.usersMainTable th, .usersMarkTable th{
    text-align: center;
    background-color: #FAEBD7;
    border: 1px solid silver;
    padding: 2px;
}
.usersMainTable td, .usersMarkTable td{
    //text-align: center;
    border: 1px solid silver;
    padding: 2px;
}

.usersMainTable-filter, .usersMainTable-filter th, .usersMainTable-filter td {
    border: 1px solid #ffffff;
}


tr.tr-hover:hover{
    background-color: #DCDCDC;
}

td.td-checkbox {
    text-align: center;
    vertical-align: middle;
}

.new-checkbox {
    display: none;
}

td.fio-td {
    text-align: left;
    padding-left: 0.5%;
    font-weight: bold;
    //cursor: pointer;
}
td.fio-td span:hover{
    cursor: pointer;
    color: blue;
}

/*************** ClipBoard ****************************/
.clb-parent {
    position: relative;
}
img.clb-button, span.clb-button{
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0.5;
    display: none;
}
img.clb-button{
    width: 25px;
    height: 25px;
}
img.clb-button-25{
    right: 26px;
}
img.clb-button-50{
    right: 52px;
}
.clb-hover:hover img.clb-button, .clb-hover:hover span.clb-button{
    display: block;
}

/***************** usersMarkTable *********************/

tr.delimiterTR td{
    background-color: #FAEBD7;
}

div.loader {
    display: none;
    position: fixed;
    z-index: 1003;
    width: 200px;
    height: 200px;
    opacity: 1.0;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

span.loader-progres{
    display: block;
    position: absolute;
    font-size: 16px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    margin-top: 10px;
    background-color: silver;
    padding: 3px 5px 3px 5px;
    border-radius: 3px 3px 3px 3px;
    color: blue;
}

img.loader{
    width: 100%;
}

div.overlay {
    position: fixed;
    width: 800px;
    height: 700px;
    opacity: 1.0;
    z-index: 1001;
    background-color: #f8f7f3;
    display: none;
    border-width:2;
    border-color: #8B4513;
    border-style: solid;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    //overflow-y: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 10px 10px 10px 10px;
}

div.overlayError {
    position: fixed;
    width: 800px;
    height: 700px;
    opacity: 1.0;
    z-index: 1002;
    background-color: #f8f7f3;
    display: none;
    border-width:4;
    border-color: #ff0000;
    border-style: solid;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    //overflow-y: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 10px 10px 10px 10px;
}

div.overlayBack {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 1000;
    background-color: #a8a7a3;
    display: none;
}

input {
    height: 20px;
    font-size: 12px;
    vertical-align: middle;
}

select {
    height: 20px;
    font-size: 12px;
    color: black;
    background-color: white;
    line-height: 19px;
    border: 1px solid #bbb;
    border-radius: 3px;
}
option {
    border: 1px solid #ccc;
    background-color: #00ffff;
}

input.inputFilter {
    width: 100%;
}

a, a:link {
    font-weight: bold;
    text-decoration: none;
    font-size: 12px;
}

a:hover, a {
   color: #483d8b;
   cursor: pointer;
}

body {
    font-family: 'Bitstream Vera Sans',  Verdana,  Tahoma,  'Sans serif';
    font-size: 14px;
    margin: 0;
    padding: 0;
    background: #f8f7f3;
    position: relative;
    height: auto;
    min-height: 100%;
    text-align: center;
}

/*
::-webkit-scrollbar {
  width: 0;
}
*/

textarea, input:not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]):not(.select2-input) {
    border: 1px solid #D3D3D3;
    font-size: 12px;
    border-radius: 3px;
    padding: 0 5px;
}

img.excel-button {
    //position: absolute;
    width: 20px;
    height: 20px;
    //left: 1%;
    //top: 1%;
}

select.period-select{
    width: 25%;
}

img.default-img-button{
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    opacity: 0.5;
}
img.default-img-button:hover{
    opacity: 1;
}

/***************** MarkForm start ******************/

div.markSubsDiv {
    position: relative;
    width: 60%;
    left: 40%;
    //margin: auto;
    text-align: left;
}

input[type=radio].tableRadio {
    border: 0px;
    width: 1.8em;
    height: 1.8em;
}
table.radioMarks1 {
    width: 20%;
    margin: auto;
    font-size: 16px;
    border: 0px;
    text-align: center;
    cursor: pointer;
}

table.radioMarks2 {
    width: 50%;
    margin: auto;
    font-size: 16px;
    border: 0px;
    text-align: center;
    cursor: pointer;
}
table.radioMarks1-90 {
    width: 90%;
}

table.radioMarks2-90 {
    width: 90%;
}

table.radioMarks1-70 {
    width: 70%;
}

table.radioMarks2-70 {
    width: 70%;
}

table.markTable {
    width: 60%;
}

table.show-mark {
    width: 90%;
}

table.markTable td{
    text-align: center;
    vertical-align: middle;
}

b.nomiB {
    font-size: 16px;
}

textarea.qComment {
    width: 50%;
    min-height: 70px;
    border: 3px solid #cccccc;
    padding: 5px;
    font-family: Tahoma, sans-serif;
    font-size: 16px;
    resize: none;
}

textarea.qComment-90 {
    width: 90%;
}

td.markQTitle {
    text-align: center;
    vertical-align: middle;
}


/*********** FIO links start **************/

a.markedlist, a.markedlist:link, a.markedlist:hover {
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
    color: grey;
}

a.tomarklist, a.tomarklist:link, a.tomarklist:hover {
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
}

a.tomarklist:hover {
    color: #FF0000;
}

a.subs-subs-name, a.subs-subs-name:link, a.subs-subs-name:hover {
    font-size: 14px;
}

/***************** ФИО для оценки *******************/
a.a-fio-link {
    display: inline-block;
    border-radius: 10px 10px 10px 10px;
    border: 3px solid #f8f7f3;
    padding: 2px 7px 2px 7px;
    font-size: 16px;
}
a.a-fio-link:hover{
    //border: 2px solid silver;
    border: 3px solid red;
    background-color: #49b2c5; //#7FFF00;
    color: white;
}
a.a-fio-link-tomark {
    //background-color: #FFFF00; //#463c8a;
    //color: #ffffff;
}
a.a-fio-link-marked {
    //background-color: #AFEEEE;
    color: grey;
}

a.a-fio-link-passive:hover {
    border: 3px solid #f8f7f3;
    background-color: #f8f7f3;
    cursor: default;
}


div.subs-subs-div {
    position: absolute;
    border: 2px solid grey;
    border-radius: 5px 5px 5px 5px;
    background-color: #ffffff;
    display: inline-block;
    //display: none;
    text-align: left;
    padding: 5px 5px;
    opacity: 1;
    top: -999em;
    cursor: move;
    z-index: 100;
}

div.subs-subs-div-title {
    height: 20px;
}

div.subs-subs-div-content{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    cursor: auto !important;
}
#subs-subs-div-DEBUG-content{
    font-size: 12px;
}

div.drag-user-info-div {
    //position: absolute;
    text-align: center;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

#subs-subs-div-XXX{
    position: fixed;
    display: none;
    z-index: 9998;
}
#subs-subs-div-INFO,#subs-subs-div-DLG,#subs-subs-div-MAIN,#subs-subs-div-DEBUG{
    position: fixed;
    display: none;
    z-index: 9999;
}



div.subs-subs-div:hover{
    background-color: #fff4ff;
}

div.subs-subs-div-close{
    position: absolute;
    border: 2px solid grey;
    cursor: pointer;
    border-radius: 5px 5px 5px 5px;
    width: 20px;
    height: 20px;
    top: 2px;
    right: 2px;
    background:
         linear-gradient(to top left,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 2px),
             rgba(0,0,0,1) 50%,
             rgba(0,0,0,0) calc(50% + 2px),
             rgba(0,0,0,0) 100%),
         linear-gradient(to top right,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 2px),
             rgba(0,0,0,1) 50%,
             rgba(0,0,0,0) calc(50% + 2px),
             rgba(0,0,0,0) 100%);
}

div.subs-subs-div-help{
    position: absolute;
    //border: 2px solid grey;
    cursor: pointer;
    border-radius: 5px 5px 5px 5px;
    width: 25px;
    height: 25px;
    top: 2px;
    right: 33px;
    background-image: url("/template/public/help.png");
    background-size: contain;
}

div.subs-subs-div-close:hover {
    border: 4px solid red;
    top: 1px;
    right: 1px;
}

div.subs-subs-div-help:hover {
    //border: 4px solid green;
    top: 2px;
    right: 33px;
}

span.subs-show-span, span.search-button-span {
    display: inline-block;
    cursor: pointer;
    min-width: 20px;
    padding-left: 2px;
    padding-right: 2px;
    border: 1.5px solid grey;
    border-radius: 10px 10px 10px 10px;
    text-align: center;
    padding: 2px 5px 2px 5px;

}

span.subs-show-span:hover, span.search-button-span:hover {
    font-weight: bold;
    border: 3px solid red;
}

span.debug-span-title {
    display: inline-block;
    width: 95%;
}

span.debug-span {
    display: inline-block;
    width: 98%;
    font-size: 12px;
    background-color: #FFDEAD;
    border-radius: 5px 5px 5px 5px;
    margin-bottom: 5px;
    padding: 5px 5px 5px 5px;
}
span.debug-span-prefix {
    font-weight: bold;
    display: inline-block;
    margin-left: 1%;
    float: left;
}
span.debug-span-time {
    font-size: 10px;
    font-weight: bold;
    display: inline-block;
    margin-right: 1%;
    float: right;
}

input.debug-chkbox{
    margin-right: 5px;
    height: 100%;
    display: inline-block;
    float: left;
}

/*********** FIO links end **************/

/*
span.markFormFio {
    font-weight: bold;
    text-decoration: underline;
    color: #4682B4;
    font-size: 22px;
}
*/
.markFormFio {
    display: inline-block;
    font-family: 'Kurale', serif;
    color: DarkOrange;
    font-size: 2em;
    text-shadow: 1px 1px 1px black, 0 0 0 orange;
}

span.masked-phone{
    text-decoration: none;
}

span.class-fileLink {
    font-weight: bold;
    text-decoration: none;
    color: #0000CD;
    //font-size: 16px;
    cursor: pointer;
}
span.class-fileLink:hover {
    color: #0000FF;
    font-style: italic;
    //font-size: 14px;
}

table.markTable span {
    font-weight: bold;
    text-decoration: none;
    font-size: 18px;
    margin-top: 9px;
    margin-bottom: 9px;
    //display: block;
    color: #B22222;
}

td.markTable-td-title {
    text-align: left;
}


div.add-mark-div-user {
    width: 478px;
    background: #F0E68C;
    border: 1px solid black;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 1em;
    padding-bottom: 1em;
    position: relative;
    left: 50%;
    transform: translate(-50%, -0%);
}

div.add-mark-div-user > select.add-select-user {
    width: 95%;
    height: 20%;
    margin-top: 10px;
    margin-bottom: 10px;
}


/************** Подсветки при фильтрации **********************/

table.commons-list-table {
    width: 100%;
    border: 0px;
    padding: 0px;
    font-family: Tahoma, sans-serif;
    font-size: 12px;
}
table.commons-list-table td{
    border: 0px solid;
    background-color: #F0E68C;
    text-align: center;
    border-radius: 4px 4px 4px 4px;
    //cursor: pointer;
}

span.span-filtered-string{
    background-color: #00FF00;
}

table.commons-list-table td.filtered{
    background-color: #00FF00;
    font-weight: bold;
}

/*
table.commons-list-table td:hover{
    border: 2px solid;
    font-weight: bold;
}
*/

/***************** Справочники таблица **********************/

table.common-table {
    width: 100%;
}
table.common-table th.th-num{
    width: 5%;
}
table.common-table th.th-id{
    width: 5%;
}
table.common-table th.th-name{
    width: 77%;
}
table.common-table th.th-links{
    width: 5%;
}
table.common-table th.th-action{
    width: 8%;
}
table.common-table td.td-action{
    padding: 1px 0px 0px 1px;
}

table.common-table tr:hover{
    background-color: #D3D3D3;
}


img.table-action-button {
    height: 16px;
    border: 1px solid silver;
    border-radius: 3px 3px 3px 3px;
}
img.table-action-button:hover {
    height: 14px;
    border: 2px solid silver;
    border-radius: 3px 3px 3px 3px;
}


/*********************** Таблица регистрации нового пользователя *************************/

td.regTD1 {
    text-align: right;
    width: 45%;
}
td.regTD2 {
    text-align: left;
    width: 55%;
}

select.add-chosen-select{
    width: 100%;
    height: 50px;
}

/*********************** Таблица пользователей и фильтр ************************/

th.filterThNN { width: 2%;}
th.filterThFio { width: 10%;}
th.filterThFioFilter { width: 10%;}
th.filterThUnn { width: 7%;}
th.filterThPhone { width: 7%;}
th.filterThMail { width: 7%;}
th.filterThDate { width: 5%;}
th.filterThType { width: 7%;}
th.filterThRegion { width: 5%;}
th.filterThUnit { width: 7%;}
th.filterThDep { width: 7%;}
th.filterThDivision { width: 7%;}
th.filterThPosition { width: 7%;}
th.filterThBosses { width: 14%;}
th.filterThHr { width: 14%;}

#unnFilter { width: 100%; }
#regionFilter { width: 100%; }
#depFilter { width: 100%; }
#typeFilter { width: 100%; }
#divisionFilter { width: 100%; }
#positionFilter { width: 100%; }
#unitFilter { width: 100%; }
#bossFilter { width: 100%; }
#hrFilter { width: 100%; }


/*************************************** CSS buttons ********************************************/

a.markButoon, a.markButton, .button-login-next, .button-reg-next{
  display: inline-block;
  color: black;
  font-size: 125%;
  font-weight: 700;
  text-decoration: none;
  user-select: none;
  padding: .25em .5em;
  outline: none;
  border: 1px solid rgb(250,172,17);
  border-radius: 7px;
  background: rgb(255,212,3) linear-gradient(rgb(255,212,3), rgb(248,157,23));
  box-shadow: inset 0 -2px 1px rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px rgba(255,255,0,0);
  transition: box-shadow .2s, border-color .2s;
  cursor: pointer;
}
a.markButoon:hover {
  box-shadow: inset 0 -1px 1px rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px rgba(255,255,0,.5);
}
a.markButoon:active {
  padding: calc(.25em + 1px) .5em calc(.25em - 1px);
  border-color: rgba(177,159,0,1);
  box-shadow: inset 0 -1px 1px rgba(0,0,0,.1), inset 0 1px 2px rgba(0,0,0,.3), inset 0 0 0 60px rgba(255,255,0,.45);
}

div.div-user-message{
    padding: 5px 5px 5px 5px;
    background-color: #FAEBD7;
    border-radius: 5px 5px 5px 5px;
    margin-top: 5px;
    cursor: text;
    font-style: italic;
    word-wrap: break-word
}
div.div-user-reply{
    border: 1px solid silver;
    padding: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    width: 97%;
    display: none;
}
textarea.textarea-reply{
    font-family: inherit;
    font-size: inherit;
    width: 100%;
    font-size: 14px;
    height: 100px;
}
.read-user-message{
    height: 20px;
    display: block;
    right: 0px;
    float: right;
    font-size: 12px;
    border: 1px solid silver;
    border-radius: 5px 5px 5px 5px;
    cursor: pointer;
}
.read-user-message:hover{
    border: 1px solid black;
}

.new-img{
    position: absolute;
    height: 25px;
    margin-top: 5px;
}


div.nomination-select{
    /*padding: 10px 10px 10px 10px;*/
}
div.nomination-select > select{
    font-size: 14px !important;
    font-weight: bold;
}


/*********** Adaptive *********************/

div.div-before-480px {
   display: none;
}

span.count-span{
    display: inline-block;
    padding: 0px 2px 0px 2px;
    color: white;
    border-radius: 5px;
    border: 1px solid black;
    margin-bottom: 2px;
}

div.div-hidden-menu{
    display: none;
    position: absolute;
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 1001;
    min-width: 400px;
}

.c-pointer{
    cursor: pointer;
}

.msg-box-div{
    display: block;
    width: 100%;
    text-align: center;
}

span.nomination-span{
    display: inline-block;
    padding: 2px 4px 2px 4px;
    border-radius: 5px;
    margin-bottom: 2px;
    margin-left: 2px;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.7);
}

div.dlg-back-hidden{
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: grey;
    opacity: 0.3;
}

.position-absolute{
    position: absolute;
}

img.test-class{
    position:fixed;
    top:100px;
    left:100px;
    width:500px;
    z-index:99999999999;
    border-radius: 10px;
    border: 3px solid maroon;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

.excel-w3-btn{
    margin-bottom: 5px;
    margin-top: 5px;
}


/*@media (max-width: 1600px) {
    div.overlay {
        width: 768px;
        height: 600px;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }
}*/

/*

@media (max-width: 800px) {
    div.overlay {
        width: 100%;
        height: 100%;
    }
    div.overlayError {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 478px) {
    div.div-before-480px {
        display: block;
    }

    table.table-over-480px {
        display: none;
    }

    div.markSubsDiv {
        position: relative;
        width: 100%;
    }

    table.radioMarks1 {
        width: 80%;
    }

    table.radioMarks2 {
        width: 80%;
    }

    table.markTable {
        width: 100%;
    }

    table.show-mark {
        width: 90%;
    }

    textarea.qComment {
        width: 100%;
    }

}

*/