/*  сообщения */
.dhtmlx-msgRed div{ font-weight:bold !important; color:red !important;}
.dhtmlx-msgGreen div{ font-weight:bold !important; color:#008000 !important;}

h1{
    color:navy;
}

.mainback{
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    background: #d3d3d3;
    z-index: -100;
}

.pageback{
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    background: #fffaf0;
    z-index: -99;
}

.overmessage{
    position: absolute;
    top: 2em;
    right: 3em;
    color: #a9a9a9;
    z-index: 100;
}

/* ------------------------------------- MAIN ------------------------*/

/* фон страницы*/
body {
    margin:0;
    background:#fbfbfb;
    font-family: Calibri;

}


/* --------------------------------------    FORM-GRID   ----------------------------------*/
/* -------------------------центральная часть страницы - контейнер с данными --------------*/
/* основной блок для контейнеров*/
.form-grid{
    display: flex;
    flex-direction: column;
    background-color: #ecf5ff;
    width: 100%;
}

.form-main{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* блоки внутри основного контейнера*/
/* блок шапки контейнера*/
.form-name {
    display: flex;
    padding: 0;
    margin: 0;
    background-color: #ecf5ff;
    width: 100%;
    flex-direction: row;
    align-items: center;

}

.form-name-caption {
    padding-left: 1%;
    align-items: center;
    flex-basis: 20%;
    font-size: large;
    /* Blue Color*/
    color: #00438e;
    /*font-weight: bold;*/
}

/* button bottom greed*/
.form-name-button {
    display: flex;
    flex-direction: row;
    order: 1;
    flex: 2;
    padding: 3px;
    font-size: large;
    /* Blue Color*/
    color: #ffffff;
    /*font-weight: bold;*/
}

/* button cnt */
.form-name-button-item {
}

.form-name-date {
    display: flex;
    flex-direction: row;
    flex: 1;
    order: 4;
    /*padding: 3px;*/
    font-size: small;
    align-items: flex-end;
}

.form-name-date-1 {
    padding-bottom: 2px;
    order: 1;
}
.form-name-date-2 {
    order: 2;
    padding-top: 1px;
    padding-left: 2px;
    flex-basis: 5%;
    ;
}
.form-name-date-3 {
    order: 3;
    padding-bottom: 4px;
    height: 15px;
    flex-basis: 2%;
}
.form-name-date-4 {
    order: 3;
    padding-bottom: 2px;
}
.form-name-date-5 {
    padding-top: 1px;
    padding-left: 8px;
    order: 3;
    flex-basis: 5%;
}
.form-name-date-6 {
    order: 3;
    padding-bottom: 2px;
    flex-basis: 3%;
}
/* search control in DB*/
.form-name-search {
    display: flex;
    flex-direction: row;
    flex: 1;
    order: 2;
    /*padding: 3px;*/
    
    align-items: flex-end;


}

.form-name-inputsearch {
    padding-bottom: 14px;
    height: 10px;
    font-size: 10px;
    padding-left: 2px;
    order: 1;
}
.form-name-combosearch {
    padding-bottom: 14px;
    height: 10px;
    font-size: 10px;
    padding-left: 2px;
    order: 2;
}
.form-name-oksearch {
    padding-bottom: 0px;
    padding-left: 2px;
    font-size: small;
    order: 3;
}




.form-name-errors {
    font-size: large;
    order: 3;
    color: red;
    flex-basis: 40%;
    padding-left: 1%;
}
/* -------------------------------------- */

.form-content {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.form-cnt {
    width: fit-content;
    flex: 0.5;
}

/* контейнер с отображением грида на формах*/
.form-gridbox {
    /*display: inline-block;
    height: 770px;
    margin-left: 0.15%;
    margin-right: 0.15%;
    background-color: #ffffff;
    font-size: large;
    */
    display: flex;
    flex: 1;
    background-color: #ffffff;
    font-size: large;
    flex-direction: column;
    align-items: center;
    //display: inline-block;
    min-height: 740px;
    height: 740px;
    margin-left: 0.15%;
    margin-right: 0.15%;
    min-width: 100%;
}

/* контейнер с отображением грида на формах*/

.form-gridbox-main {
    display: flex;
    padding: 0.2%;
    background-color: #d8eaff;
    width: 96%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;






}


.form-gridbox-l {

    flex: 1;
    margin-left: 0.3%;
    margin-right: 0.3%;
    background-color: #ffffff;
    font-size: large;
}

/* контейнер с отображением грида на формах*/
.form-gridbox-r {
    flex: 1.5;
    margin-right: 0.3%;
    background-color: #ffffff;
    font-size: large;

    display: flex;
    flex-direction: column;
    align-items: center;
    //display: inline-block;
    min-height: 670px;
    margin-left: 0.15%;

}




.form-button {
    margin: 0.2%;
    display:flex;

    justify-content: flex-start;
}
.form-button-group {
    width: 10%;
}


/* строка позиции*/
.wrapper {
    padding: .5em;
    border-radius: 3px;
    margin: 1em;
}
.form-row {
    display: flex;
    justify-content: flex-end;
    padding: .2em;
}
.form-row-error {
    display: flex;
    justify-content: flex-end;
    padding: .2em;
    color: red;
    font-size: small;
}

.form-row > label {
    font-weight: normal;
    padding: .2em 1em .2em 0;
    flex: 1;
}


.redtext  {
    color: red;
    padding: 2px;
    font-size: large;
}

.greentext  {
    color: #008000;
    padding: 2px;
    font-size: large;
}



.form-row > input {
    alignment: right;

}


.form-row-error > input {
    flex: 2;
    background-color: red;
}

.form-row > button {
    padding: .5em;
    background: #008000;
    color: #fafad2;
}

/* --------------------------------------    HEADER   ----------------------------------*/
.form-header {
    display: flex;
    padding: 0.2%;
    background-color: #d8eaff;
    width: 96%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;


    /*border: 1px solid #c0c0c0;*/
}

.form-logo {
    order: 1;
    align-items: center;
    flex-basis: 40%;
}

.form-user {
    order: 2;
    flex-basis: 15%;
    font-size: small;
    height: 50%;
}

.form-logout-button {
    order: 3;
    flex-basis: 4%;

}

/* ----------------------------- FOOTER -----------------------------*/

.form-footer {

    width: 120%;
    padding: 1%;
    flex-direction: column;
    color: #adadad;
    background-color: #fbfbfb;;
    font-size: small;
    display: flex;
}

/* ----------------------------Button of page ---------------------------------------*/
.button.color{
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
  background-image: linear-gradient(top, rgba(255,255,255,.3),
             rgba(255,255,255,0)),
                    url(data:image/png;base64,iVBORw0KGg[...]QmCC);
}

.button.green{
  background-color: #57a957;
  border-color: #57a957;
}

.button.green:hover{
  background-color: #62c462;
}

.button.green:active{
  background: #57a957;
}

.button.red{
  background-color: #c43c35;
  border-color: #c43c35;
}

.button.red:hover{
  background-color: #ee5f5b;
}

.button.red:active{
  background: #c43c35;
}

.button.blue{
  background-color: #269CE9;
  border-color: #269CE9;
}

.button.blue:hover{
  background-color: #70B9E8;
}

.button.blue:active{
  background: #269CE9;
}

/* -----------------------------------------------------*/
/*  ------------------ мобильная версия ----------------*/
/* общая форма*/
.form-main-mobile {
    display: flex;
    flex-direction: column;
    border: 1px solid #c0c0c0;
}

/* шапка */
.form-header-mobile {
    /*position: fixed;*/
    display: flex;
    padding: 0.2%;
    background-color: #d8eaff;
    flex-direction: row;
    align-items: center;
}


/* грид (перечнем SCU)*/
.form-grid-mobile{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
     align-items: center;
}

/* элемент грида */
.form-grid-item-mobile{
    display: flex;
    flex-direction: row;
    /*background-color: #f3f8fe;*/
}

/* элемент грида - фото SCU */
.form-grid-item-photo-mobile{
    flex-direction: row;
}

/* элемент грида - с контролами, названием, штрихкодами */
.form-grid-item-control-mobile{
    font-size: large;
    font-weight: bold;
    flex-direction: row;
    margin-top: 1%;
}
/* наименование */
.form-grid-item-control-name-mobile {
    color: #00438e;
    margin: 2%;
    font-size: large;
}

/* штрихкод */
.form-grid-item-control-barcode-mobile {
    color: #008000;
    font-size: large;
    font-weight: bold;
    margin: 2%;
}

.form-grid-item-control-item-mobile {
    color: #000000;
    margin: 2%;
    font-size: large;
}
/* кнопки*/
.form-button-mobile {
    margin: 2%;
}


/* перед футером */
.form-partefooter-mobile {
    height: 1px;
}


/* разделительная полоса*/
.form-line-mobile {

    display: flex;
    padding: 0.2%;
    background-color: #d8eaff;
    flex-direction: row;
    align-items: center;
    height: 5%;
    width: 100%;
}



/* футер */
.form-footer-mobile {
    padding: 0.2%;
    background-color: #d8eaff;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

}

.form-footer-item-mobile {
    color: #adadad;
    font-size: small;
    align-items: center;

}

.form-logo-mobile {
    order: 1;
    flex: 2;
    align-items: center;

}

.form-user-mobile {
    order: 2;
    flex: 2;
    align-items: center;
    font-size: small;
    height: 50%;
}

.form-logout-button-mobile {
    order: 3;
    flex: 1;
    align-items: center;
}

.form-combo-mobile {

    align-items: center;
    justify-content: space-between;
    padding-left: 1.5%;
    padding-bottom: 0.5%;
    padding-top: 1%;
}