/*Items catalog*/

.catalog_image {
    width: 50px;
}
.catalog_text {
    font-size: 16px;
}
.catalog_item-selected {
    background: #008CBA;
}
.catalog_item {
    margin: 10px;
    cursor: pointer;
    min-height: 60px;
    /*float:left;*/
}

.xiat_unpassed{
    color: #ff0000;
}

.xiat_half_passed{
    color: #A68900;
}

.catalog_item:hover{
    background: #ef7c61;
}
.prokrutka {
    height: 400px;
    border: 1px solid #C1C1C1;
    overflow-y: scroll;
}
.prokrutka-2 {
    height: 200px;
    border: 1px solid #C1C1C1;
    overflow-y: scroll;
}
/* end Items catalog*/

/*grapg field*/
.element_canvas {
    cursor: pointer;
    /*position: absolute;*/
    display: inline-block;
}
.element_canvas-bw {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.element_canvas-inv {
    -webkit-filter: invert(100%);
    filter: grayscale(100%) invert(100%);
}


.element_canvas_selected{
    /*border: dotted #007ba4;*/
    /*background: #D9D9D9;*/
    /*opacity: 0.2;*/
}
.element_canvas_selected:hover{
    background: #ffdede;
}
.bg {
    /*background: url("/img/editor_bg.png");*/
    /*border: dotted;*/
    /*padding: 30px;*/
    /*display: inline-block;*/
    float: left;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.bg_out {
    border: dotted #CD3F3F;
}

/*end grapg field*/

/*element list*/
.bagElementsList {
    background-color: #ffffff;
    height: 120px;
    overflow-y: scroll;
    padding: 5px;
}
.bagElementImage {
    width: 20px;
}
.bagElement {
    border-radius: 4px;
    background-color: #ffffff;
    padding: 5px;
    cursor: pointer;

}
.bagElement:hover {
    background-color: #feddef;
}
.bagElementSelected {
    background-color: #f9d9ef;
}

/*end element list*/

/*palette styles*/
.ElementsOptions {
    padding: 5px;
    height: 140px;
    background-color: #ffffff;
}
.paletteEmage {
    width: 50px;
    border: 2px;
}
.range-slider {
    margin: 5px;
}
.paletteSpan{
    font-size: 10px;
}
.range-slider {
    width: 90%;
}

/*end palette styles*/
/*modes styles*/
.action{
    display: inline-block;
    padding: 5px;
    cursor: pointer;
    float: right;
}
.danger{
    display: inline-block;
    padding: 5px;
    cursor: pointer;
    float: right;
}
.exam{
    display: inline-block;
    padding: 5px;
    cursor: pointer;
    float: right;
}
.modes{
    display: inline-block;
    padding: 5px;
    cursor: pointer;
    float: right;
}
.modes:hover{
    background: #ffdede;
}

.mode-selected{
    background: #ef7c61;
    border-radius: 5px;
}
.mode-selected-2{
    background: #3a945b;
    border-radius: 5px;
}

/*end of modes styles*/
/*sessions styles*/
.editorList{
    background-color: #ffffff;
    height: 400px;
    overflow-y: scroll;
    padding: 5px;
}
.editorItem{
    cursor: pointer;
    padding: 3px;
    min-height: 35px;
    /*background-color: #dfdeee;*/
}
.editorItem:hover{
    background-color: #dfdfff;
}
.editorItemSelected{
    background-color: #61b6d9;
}

/*end sessions styles*/


/*main css styles*/
.whidden2 {
    visibility: hidden;
}
.whidden {
    display: none !important;
}

.openBagList{
    background-color: #ffffff;
    height: 420px;
    overflow-y: scroll;
    padding: 5px;
}
.openBagImage {
    width: 100px;
}
.openBagItem:hover{
    cursor: pointer;
    background-color: #dbbdee;
}

.elementItem{
    padding: 5px;
    background: #dddddd;
    cursor: pointer;
    border: 2px solid #111111;
}
.elementItem:hover{
    background: #bbbbcc;
}

.elementItemImage{
    max-width: 150px;
}

.bagItem{
    min-height: 80px;
}

.xiat-main-menu-item:hover{
    background: #43AC6A;
}
.conveyor {
    /*min-height: 400px;*/

}
.icon-bar.five-up .item {
    width: 3%;
}
.control-panel {
    background: #999999;
    position: absolute;
    bottom: 0;
    width: 100%;
    /*height: 25%;*/
    height: 140px;
    padding: 5px;
}
.icon-bar.five-up .item {
    width: 80px;
}
.control-button-pushed{
    /*background: #74bfdd;*/
    border: solid #b03911 2px !important;
}
.test-area{
    color: #eeeeee;
}
.bag-zoom{
    min-height: 600px;
    background: #ffffff;
    border: groove #003f54 1px;
}
.icon-bar > * {
    width: 20px;
}
#chapter-2{
    position: relative;
    min-height: 100%;
}
body {
    height: 100%;
}
.control-button{
    /*min-height: 55px;*/
    /*max-height: 55px;*/
    /*min-width: 55px;*/
    /*max-width: 55px;*/
    /*min-height: 40%;*/
    /*max-height: 40%;*/
    /*min-width: 40%;*/
    /*max-width: 40%;*/
    cursor: pointer;
    text-align:  center;
    border: solid #999999 2px;
    height: 30%;
}
.control-button:hover{
    border: solid #777777 2px;
}
.control-vertical{
    /*margin-top: 0;*/
    padding-top: 2px;
    /*min-width: 100px;*/
    /*max-width: 100px;*/
    /*display: inline-block;*/
    height: 100%;
    /*width: auto;*/
    display: table-cell;
    /*position: absolute;*/
    /*padding: 10px;*/
}
.control-info{
    font-size: 22px;
    min-width: 150px;
    margin: 10px;
}

.control-small-button{
    border-radius: 4px;
    background: #CD3F3F;
    border: 1px #000000 solid;
    padding: 5px;
    font-size: 32px;
    text-align: center;
    cursor: pointer;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
}

.control-small-button:hover{
    background: #74bfdd;
    border: 1px #333333 solid;
}

.conveyor-element{
    border: #ffffff 1px;
    /*max-height: 300px;*/
    height: 525px;
    width: 825px;
    /*border: #003f54 1px dotted;*/
}
.conveyor-element-current{
    border: #ff0000 2px dotted;
}
.conveyor-element-item{
    cursor: crosshair !important;
}
.imim-inv{
    background: #000000;
}

.panel{
    margin-bottom: 0;
}

.tag_item:hover{
    background: #a0d3e8;
}
.tag_item{
    padding: 3px;

}

.noUi-handle-lower{
    max-width: 20px;
}

.targetCrosshair {
    cursor: crosshair;
}
.reded{
    color: #ff0000;
}
input[type="text"]{
    margin: 0;
}
input[type="number"]{
    margin: 0;
}
input[type="file"], input[type="checkbox"], input[type="radio"], select {
    margin: 0;
}
.navigation-item-selected{
    background: #CD3F3F !important;
}
.wrong{
    color: #CD3F3F;
}

.control-quad-img{
    width: 60px;
}

.control-quad-empty{
    border: solid #999999 2px;
}
.control-quad{
    display: inline-block;
    width: 60px;
    overflow: hidden;
    /*font-size: 34px;*/
    /*font-weight: 600;*/
    /*margin-left: 30%;*/
}
.control-quad:before{
    content: "";
    padding-top: 100%;
    float: left;
}
.top-bar-section ul {
    height: 45px!important;
}

html, body {
    font-family: 'Microsoft Sans Serif', Tahoma, Arial, Verdana, Sans-Serif !important;
    height: 97%;
}

.lang-button{
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: bold;
    text-align: center;
}

.disabled {
    pointer-events: none;
    opacity: 0.4;
}

.canvas_image {
    position: absolute;
    width: 825px;
    height: 525px;
}

.drCanvas {
    position: absolute;
}

.showDrCanvas {
    padding: 6px;
    background: #00FFFF;
    border: 1px black solid;
    border-radius: 4px;
    float: right;
    margin: 2px;
    width: 24px;
    height: 24px;
    text-align: center;
}