/********************HEADER**************************/
    
    body {
        width: 100%;
        height: 100%;
        background-color: #f4f5f5;
        display: table;
    }
    
    *:focus {
        outline: none
    }
    
    .vertical-center {
        min-height: 100%;
        /* Fallback for browsers do NOT support vh unit */
        display: flex;
        align-items: center;
    }
    
    .vertical-middle {
        vertical-align: middle;
    }
    
    .vertical-middle-i {
        vertical-align: middle !important;
    }
    
    .vertical-top {
        vertical-align: top;
    }
    
    #header {
        background: #ffffff;
        height: 90px;
        display: table-row;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    }
    
    #header .title_container {
        margin-left: 40px;
    }
    
    #header .title {
        font-weight: bold;
        font-size: 22px;
    }
    
    #header .sub-title {
        float: left;
        clear: left;
        color: #a7a9ac;
    }
    
    #header .larg-a {
        margin-right: 7px;
        cursor: pointer;
        font-size: 16px;
    }
    
    #header a.larg-a:hover,
    #header a.larg-a:active,
    #header a.larg-a:focus {
        text-decoration: none;
    }
    
    #header .larg-a.logout {
        margin-left: 10px;
        margin-right: 0px;
        cursor: pointer;
    }
    
    #header .larg-a span {
        font-size: 20px;
        color: #929291;
        cursor: pointer;
        margin-right: 5px;
    }
    
    #header .larg-a.logout span {
        color: #d9534f;
    }
    
    .table-row {
        display: table-row;
    }
    
    .table-cell {
        display: table-cell;
    }
    
    .left-side {
        background: #404551;
        width: 120px;
        height: 100%;
        display: table-cell;
        color: #a7a9ac;
        text-align: center;
        vertical-align: top;
    }
    
    .config {
        background: #eb5b5b url("img/config.jpg") center;
        background-size: 100%;
        width: 90px;
        height: 90px;
        cursor: pointer;
        display: table-cell;
    }
    
    .verticalText {
        writing-mode: vertical-lr;
        -webkit-transform: rotateX(180deg) rotateY(180deg);
        -moz-transform: rotateX(180deg) rotateY(180deg);
        -ms-transform: rotateX(180deg) rotateY(180deg);
        -o-transform: rotateX(180deg) rotateY(180deg);
        transform: rotateX(180deg) rotateY(180deg);
    }
    
    .single-row {
        white-space: nowrap;
        text-overflow: ellipsis;
        height: 25px;
        display: block;
        overflow: hidden;
        font-size: inherit;
    }
    /* -------- wrapper styles -------- */
    
    .breakAll {
        word-break: break-all;
    }
    
    .nowrap {
        white-space: nowrap;
    }
    
    .relative {
        position: relative;
    }
    
    .right {
        position: absolute;
        right: 0;
    }
    
    .left {
        position: absolute;
        left: 0;
    }
    
    .wrap-dd-select span.colorBox.single-row {
        min-height: 30px;
        width: 90%;
    }
    
    .wrap-dd-select .dropdown {
        max-height: 175px;
    }
    
    .wrap-dd-select {
        min-height: 42px;
        width: 100%;
    }
    
    .stepsform .control-label {
        width: 100%;
        text-align: left;
    }
    
    .board-menu {
        display: block;
        list-style: none;
        padding: 0;
        overflow: auto;
        min-height: 220px;
        height: 100%;
        max-height: 800px;
    }
    
    .board-menu .board-menu-buttons {
        border-top: 2px #e7e7e7 solid;
    }
    
    .board-menu .board-menu-buttons .button-right {
        border-left: 1px #e7e7e7 solid;
    }
    
    .board-menu .board-menu-buttons .button-left>span,
    .board-menu .board-menu-buttons .button-right>span {
        margin: 8px 0 8px 0;
        cursor: pointer;
    }
    
    .left-side .board-menu li,
    .add-board-bt {
        display: block;
        padding: 2px;
        width: 120px;
        min-height: 90px;
        overflow: hidden;
        background: #404551;
        color: #e7e7e7;
        border-bottom: 2px solid #e7e7e7;
        -webkit-transition: background-color 500ms linear;
        -moz-transition: background-color 500ms linear;
        -o-transition: background-color 500ms linear;
        -ms-transition: background-color 500ms linear;
        transition: background-color 500ms linear;
    }
    
    .left-side h1 {
        font-weight: bold;
        margin: 0;
        padding-top: 10px;
    }
    
    .left-side h3 {
        font-weight: bold;
        margin: 0;
        padding-top: 10px;
    }
    
    .left-side .board-menu li.active,
    .left-side .board-menu li:hover,
    .left-side .board-menu li .description:hover,
    .add-board-bt:hover {
        color: #a7a9ac;
        background: #1c1f26;
        cursor: pointer;
        -webkit-transition: background-color 500ms linear;
        -moz-transition: background-color 500ms linear;
        -o-transition: background-color 500ms linear;
        -ms-transition: background-color 500ms linear;
        transition: background-color 500ms linear;
    }
    
    .board-menu .board-menu-buttons .button:hover {
        color: #a7a9ac;
        background: #32353B;
        cursor: pointer;
        -webkit-transition: background-color 500ms linear;
        -moz-transition: background-color 500ms linear;
        -o-transition: background-color 500ms linear;
        -ms-transition: background-color 500ms linear;
        transition: background-color 500ms linear;
    }
    
    #boards {
        /*height: 90%;*/
        height: calc(100% - 90px);
        padding-top: 15px;
    }
    
    .paneau {
        clear: both;
        /*float: left;*/
        width: 100%;
        margin-bottom: 70px;
        display: table-row;
    }

    .panel-container {
        display: table-cell;
        vertical-align: top;
    }
    
    .pannel {
        /*float: left;*/
        margin: 40px 18px;
        /*background: url(img/model_bg.png);*/
        background: -webkit-linear-gradient(bottom, rgba(205, 206, 205, 0), rgba(205, 206, 205, 0) 90%, rgba(205, 206, 205, 1));
        /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(bottom, rgba(205, 206, 205, 0), rgba(205, 206, 205, 0) 90%, rgba(205, 206, 205, 1));
        /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(bottom, rgba(205, 206, 205, 0), rgba(205, 206, 205, 0) 90%, rgba(205, 206, 205, 1));
        /* For Firefox 3.6 to 15 */
        background: linear-gradient(to bottom, rgba(205, 206, 205, 0), rgba(205, 206, 205, 0) 90%, rgba(205, 206, 205, 1));
        /* Standard syntax (must be last) */
        background-size: 100% 15px;
        position: relative;
        border-radius: 5px;
        border: 1px solid #cdcecd;
        display: table;
    }
    
    .pannel-netContainer {
        display: table-cell;
        width: 34%;
        z-index: 8;
        border-radius: 0 0 4px 4px;
        height: inherit;
        overflow: hidden;
        height: calc(100% - 20px);
        /*padding-bottom: 18px;*/
        overflow: visible;
        vertical-align: top;
    }
    
    .pannel-netContainer.left {
        position: absolute;
        left: 0;
    }
    
    .pannel-netContainer.center {
        position: absolute;
        left: 50%;
        /*text-align: center;*/
    }
    
    .pannel-netContainer.center>.pannel-net {
        left: -50%;
    }
    
    .pannel-netContainer.center .pannelNetText {
        left: 50%;
        margin-left: -15px;
    }
    
    .pannel-netContainer.right {
        position: absolute;
        right: 0;
    }
    
    .pannel-net {
        position: relative;
        height: 100%;
        width: 100%;
        overflow: visible;
    }
    
    .pannel-net.bordered-right {
        border-right: 1px solid #777;
    }
    
    .pannel-net.bordered-left {
        border-left: 1px solid #777;
    }
    
    .pannel-net.bordered-bottom {
        border-bottom: 1px solid #777;
    }
    
    .pannel-net.filter-transparent-grey {
        background: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 2px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0.5) 3px);
    }
    
    .pannelNetText {
        font-size: 9px;
        line-height: 9px;
        top: 6px;
        color: #000;
        /*color: #d8d8d8;*/
        mix-blend-mode: difference;
        pointer-events: none;
        white-space: nowrap;
        position: absolute;
        z-index: 10;
    }
    
    .pannelNetText.left {
        left: 1px;
    }
    
    .pannelNetText.right {
        right: 1px;
    }
    
    .pannelNetText.right.shifted {
        /*top: 25px;*/
        top: initial;
        bottom: 6px;
    }
    
    .pannelNetBorder {
        background: transparent;
        position: absolute;
    }
    
    .pannelNetBorder.bottom {
        height: 6px;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    .pannelNetBorder.left,
    .pannelNetBorder.right {
        width: 6px;
        top: 0;
        bottom: 0;
    }
    
    .pannelNetBorder.left {
        left: 0;
    }
    
    .pannelNetBorder.right {
        right: 0;
    }
    
    .pannel-before {
        display: block;
        height: 32px;
        width: 100%;
        background-size: 100% 100%;
        position: absolute;
        top: -28px;
        border: 1px solid #cdcecd;
        border-radius: 4px;
        z-index: 9;
        text-align: center;
    }
    
    .pannel .left-grid {
        display: block;
        height: 100%;
        width: 18px;
        background-size: 100% 100%;
        position: absolute;
        left: -18px;
        border: 1px solid #cdcecd;
        border-radius: 0 0 0 4px;
        height: 101%;
        /*border-top: none;*/
        vertical-align: top;
    }
    
    .pannel .right-grid {
        display: block;
        height: 101%;
        width: 18px;
        background-size: 100% 100%;
        position: absolute;
        right: -18px;
        border: 1px solid #cdcecd;
        border-radius: 0 0 4px 0;
        /*border-top: none;*/
    }
    
    .pannel-before .left-grid,
    .left-capac {
        display: block;
        width: 19px;
        background-size: 100% 100%;
        position: absolute;
        top: -1px;
        left: -19px;
        border: 1px solid #cdcecd;
        /*border-radius: 0 0 13px 0;*/
    }
    
    .pannel-before .left-grid {
        height: 100%;
        border-bottom: none;
    }
    
    .left-capac {
        height: 106%;
    }
    
    .left-capac:before {
        content: "";
        position: absolute;
        right: -8px;
        width: 13px;
        height: 79%;
        top: -1px;
        background: inherit;
        border: inherit;
        border-left: none;
        border-bottom: none;
    }
    
    .left-capac:after {
        content: "";
        position: absolute;
        right: -4px;
        width: 100%;
        height: 8px;
        bottom: -1px;
        background: inherit;
        -webkit-transform: skew(-45deg);
        -moz-transform: skew(-45deg);
        -o-transform: skew(-45deg);
        -ms-transform: skew(-45deg);
        transform: skew(-45deg);
        border: inherit;
        border-top: none;
        border-left: none;
    }
    
    .pannel-before .right-grid,
    .right-capac {
        display: block;
        width: 19px;
        background-size: 100% 100%;
        position: absolute;
        top: -1px;
        right: -19px;
        border: 1px solid #cdcecd;
        /*border-radius: 0 0 0 13px;*/
    }
    
    .pannel-before .right-grid {
        height: 100%;
        border-bottom: none;
    }
    
    .right-capac {
        height: 106%;
    }
    
    .right-capac:before {
        content: "";
        position: absolute;
        left: -8px;
        width: 13px;
        height: 79%;
        top: -1px;
        background: inherit;
        border: inherit;
        border-right: none;
        border-bottom: none;
    }
    
    .right-capac:after {
        content: "";
        position: absolute;
        left: -4px;
        width: 100%;
        height: 8px;
        bottom: -1px;
        background: inherit;
        -webkit-transform: skew(45deg);
        -moz-transform: skew(45deg);
        -o-transform: skew(45deg);
        -ms-transform: skew(45deg);
        transform: skew(45deg);
        border: inherit;
        border-top: none;
        border-right: none;
    }
    
    .pannel-after {
        display: block;
        position: absolute;
        height: 22px;
        width: 100%;
        border: 1px solid #cdcecd;
        border-radius: 0 0 1px 1px;
        bottom: -2px;
        left: 0;
        z-index: 9;
        /*border-bottom: none;*/
        text-align: center;
        /*overflow: hidden;*/
    }
    
    .pannelHandle {
        position: relative;
        display: inline-block;
        font-size: 8px;
        z-index: 10;
        pointer-events: none;
        vertical-align: bottom;
        line-height: 8px;
    }
    
    .pannelHandle.left {
        margin-right: 10px;
    }
    
    .pannelHandle.right {
        margin-left: 10px;
    }
    
    .pannelHandle.left:before,
    .pannelHandle.right:after {
        position: absolute;
        height: 8px;
        width: 18px;
        bottom: 0;
        background-color: #d8d8d8;
        mix-blend-mode: difference;
        content: '';
    }
    
    .pannelHandle.left:before {
        left: -19px;
    }
    
    .pannelHandle.right:after {
        right: -19px;
    }
    
    .lastPannelText {
        /*position: relative;*/
        position: absolute;
        display: inline-block;
        /*font-size: 8px;*/
        z-index: 11;
        pointer-events: none;
        vertical-align: bottom;
        /*line-height: 8px;*/
        left: 27px;
    }
    
    .lastPannelText {
        color: #d8d8d8;
        mix-blend-mode: difference;
    }
    /*-------- lastPannelSymbol ---------  */
    
    .lastPannelSymbol {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    /* --- line --- */
    
    .lastPannelSymbol .line {
        width: 100%;
        height: 2px;
        mix-blend-mode: difference;
        top: 6px;
        position: absolute;
        background-color: #d8d8d8;
    }
    /* --- circle --- */
    
    .lastPannelSymbol .circleContainer {
        position: absolute;
        width: 24px;
        line-height: 10px;
    }
    
    .lastPannelSymbol .circle {
        height: 6px;
        width: 6px;
        border-radius: 6px;
        mix-blend-mode: difference;
        background-color: #d8d8d8;
        display: inline-block;
        margin: 0 2px;
    }
    
    .lastPannelSymbol .actionLeft .circleContainer {
        left: 20px;
    }
    
    .lastPannelSymbol .actionLeft .line.leftC {
        width: 22px;
    }
    
    .lastPannelSymbol .actionLeft .line.rightC {
        width: calc(100% - 42px);
        right: 0;
    }
    
    .lastPannelSymbol .actionCenter .circleContainer {
        left: 50%;
        margin-left: -12px;
    }
    
    .lastPannelSymbol .actionCenter .line.leftC {
        width: calc(50% - 10px);
    }
    
    .lastPannelSymbol .actionCenter .line.rightC {
        width: calc(50% - 10px);
        right: 0;
    }
    
    .lastPannelSymbol .actionCenterFar .circle {
        margin: 0;
        position: absolute;
        top: 4px;
    }
    
    .lastPannelSymbol .actionCenterFar .circle:first-child {
        left: 0;
    }
    
    .lastPannelSymbol .actionCenterFar .circle:last-child {
        right: 0;
    }
    
    .lastPannelSymbol .actionCenterFar .circleContainer {
        left: 20px;
        right: 20px;
        width: initial;
    }
    
    .lastPannelSymbol .actionCenterFar .line.leftC {
        width: 20px;
    }
    
    .lastPannelSymbol .actionCenterFar .line.rightC {
        width: 20px;
        right: 0;
    }
    
    .lastPannelSymbol .actionRight .circleContainer {
        right: 20px;
    }
    
    .lastPannelSymbol .actionRight .line.leftC {
        width: calc(100% - 42px);
    }
    
    .lastPannelSymbol .actionRight .line.rightC {
        width: 22px;
        right: 0;
    }
    /* --- square --- */
    
    .lastPannelSymbol .square {
        position: absolute;
        width: 10px;
        mix-blend-mode: difference;
        background-color: #d8d8d8;
    }
    
    .lastPannelSymbol .square.center {
        top: 9px;
        width: 7px;
        background-color: #000;
    }
    
    .lastPannelSymbol .square.top,
    .lastPannelSymbol .square.center,
    .lastPannelSymbol .square.bottom {
        height: 2px;
    }
    
    .lastPannelSymbol .square.top {
        top: 5px;
    }
    
    .lastPannelSymbol .square.bottom {
        bottom: 5px;
    }
    
    .lastPannelSymbol .square.vertical {
        top: 5px;
        width: 2px;
        bottom: 5px;
    }
    
    .lastPannelSymbol .actionLeft .square.top,
    .lastPannelSymbol .actionLeft .square.bottom {
        left: 0;
    }
    
    .lastPannelSymbol .actionLeft .square.vertical {
        left: 10px;
    }
    
    .lastPannelSymbol .actionRight .square.top,
    .lastPannelSymbol .actionRight .square.bottom {
        right: 0;
    }
    
    .lastPannelSymbol .actionRight .square.vertical {
        right: 10px;
    }
    /* --- lock image --- */
    
    .lastPannelSymbol .image {
        position: absolute;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        isolation: auto;
        background-blend-mode: difference;
        /*background-size: contain;*/
    }
    
    .lastPannelSymbol .image.l45 {
        background-image: url(./img/lam-fin-small_13.png);
    }
    
    .lastPannelSymbol .image.l90 {
        background-image: url(./img/lam-fin-small_15.png);
    }
    
    .lastPannelSymbol .image.l09 {
        background-image: url(./img/lam-fin-small_09.png);
    }
    
    .lastPannelSymbol .image.l45.white {
        background-image: url(./img_white/lam-fin-small_13.png);
    }
    
    .lastPannelSymbol .image.l90.white {
        background-image: url(./img_white/lam-fin-small_15.png);
    }
    
    .lastPannelSymbol .image.l09.white {
        background-image: url(./img_white/lam-fin-small_09.png);
    }
    /* --- lock image --- */
    
    .lastPannelSymbol .lImg {
        position: absolute;
        height: 22px;
    }
    
    .lastPannelSymbol .outter .left {
        left: -9px;
    }
    
    .lastPannelSymbol .outter .right {
        right: -9px;
    }
    
    .lastPannelSymbol .stoppersContainer {
        margin-top: 4px;
    }
    
    .lastPannelSymbol .stoppersContainer.inner .lImg.right {
        right: 13px;
    }
    
    .lastPannelSymbol .stoppersContainer.inner .lImg.left {
        left: 13px;
    }
    /*-------- /lastPannelSymbol ---------*/
    
    .last_pannel_31:after {
        content: '';
        display: block;
        position: absolute;
        width: 20px;
        height: 100%;
        background-image: url(img/last_pannel_man_after.png);
        right: 3px;
        top: 0;
    }
    
    .last_pannel_31:before {
        content: '';
        display: block;
        position: absolute;
        width: 20px;
        height: 100%;
        background-image: url(img/last_pannel_man_before.png);
        left: 3px;
        top: 0;
    }
    
    .last_pannel_32:after {
        content: '';
        display: block;
        position: absolute;
        width: 20px;
        height: 100%;
        background-image: url(img/last_pannel_aut_after.png);
        right: 3px;
        top: 0;
    }
    
    .last_pannel_32:before {
        content: '';
        display: block;
        position: absolute;
        width: 20px;
        height: 100%;
        background-image: url(img/last_pannel_aut_before.png);
        left: 3px;
        top: 0;
    }
    
    .last_pannel_33 {
        background-image: url(img/last_pannel_key.png);
        background-position: center;
        background-repeat: no-repeat;
    }
    /* ---- Active Pannel ----- */
    
    .pannel.active,
    .pannel.active .pannel-before,
    .pannel.active .right-grid,
    .pannel.active .left-grid,
    .pannel.active .right-capac,
    .pannel.active .left-capac,
    .pannel.active .pannel-after {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: 0px 0px 20px 1px rgba(102, 175, 233, .3), 0px 0px 20px 1px rgba(102, 175, 233, .3);
        -moz-box-shadow: 0px 0px 20px 1px rgba(102, 175, 233, .3), 0px 0px 20px 1px rgba(102, 175, 233, .3);
        box-shadow: 0px 0px 20px 1px rgba(102, 175, 233, .3), 0px 0px 20px 1px rgba(102, 175, 233, .3);
        box-shadow: 0px 0px 20px 1px rgba(102, 175, 233, .3), 0px 0px 20px 1px rgba(102, 175, 233, .3);
    }
    
    .gridPannel {
        /*width: 100%;
        height: 100%;*/
        background-color: rgba(255, 255, 255, .15);
        background: linear-gradient(to bottom, rgba(205, 206, 205, 0), rgba(205, 206, 205, 0) 90%, rgba(205, 206, 205, 1));
        background-size: 100% 15px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        pointer-events: none;
    }
    /* ---- /Active Pannel ----- */
    
    .right-side {
        z-index: 10;
        min-height: 90%;
        margin: 2% 0;
        background: #ffffff;
        padding: 15px;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    }
    
    .tools {
        width: 60%;
        text-align: center;
        position: fixed;
        bottom: 0;
    }
    
    .add-model {
        width: 50px;
        height: 50px;
        text-align: center;
        font-size: 37px;
        border: 1px;
        border-radius: 10px;
        padding: 5px;
        color: #fff;
        margin: 10px;
        display: inline-block;
    }
    
    .add-model.disabled {
        background-color: #ccc !important;
    }
    
    .toolsPanneau {
        text-align: left;
    }
    
    .toolsPanneau .add-model {
        width: 26px;
        height: 25px;
        text-align: center;
        font-size: 15px;
        border: 1px;
        border-radius: 10px;
        padding: 3px 4px 3px 3px;
        color: #fff;
        margin: 0 0 3px 0;
        display: inline-block;
    }
    
    .success {
        color: #5cb85c;
    }
    
    .warning {
        color: #f0ad4e;
    }
    
    .danger {
        color: #d9534f;
    }
    
    ul.steps {
        display: inline-block;
        list-style: none;
        padding: 0;
        width: 100%;
        color: #cecece;
    }
    
    ul.steps li {
        float: left;
        text-align: center;
        margin: 0 5px;
        padding: 0;
    }
    
    .disabled {
        cursor: not-allowed !important;
        -moz-opacity: .5 !important;
        opacity: .5 !important;
        filter: alpha(opacity=50) !important;
        pointer-events: none;
    }
    
    a.disabled {
        pointer-events: none;
    }
    
    ul.steps li span {
        font-size: 22px;
    }
    
    .module-step {
        display: none;
    }
    
    .module-step.active {
        display: block;
    }
    
    .colorIcon {
        width: 30px;
        height: 30px;
        display: inline-block;
        border-radius: 5px;
        border: 1px solid #ccc;
        margin-bottom: -10px;
        margin-right: 5px;
    }
    /* --------- dropdown --------- */
    
    .popup.wrap-dd-select div.dropdown {
        overflow: auto;
        top: 100px;
        min-width: 700px;
        width: 50%;
        /*min-height: 350px;*/
        max-height: 60%;
        position: fixed;
        z-index: 15 !important;
    }
    
    .popup.wrap-dd-select div.dropdown.standard {
        min-width: 280px;
        width: 34%;
    }
    
    div.dropdown .color-container {
        min-width: 890px;
    }
    
    div.dropdown .colorSelected {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        width: 50%;
    }
    
    div.dropdown .colorSelected .colorIcon {
        width: 100px;
        height: 100px;
        display: block;
        margin: auto;
    }
    
    div.dropdown .colorSelected .colorText {
        text-align: center;
        padding-top: 10px;
        /*padding-bottom: 10px;*/
        width: 100px;
        margin: auto;
    }
    
    div.dropdown .colorSelected .colorSubtitle {
        text-align: center;
        padding-top: 0;
        font-size: 12px;
        padding-bottom: 10px;
        width: 100px;
        margin: auto;
    }
    
    div.dropdown .colorOptions {
        margin-bottom: 20px;
        height: 100%;
        /*max-height: 540px;*/
        overflow: auto;
        border: 1px solid #eee;
        padding: 120x;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        width: 50%;
    }
    
    div.dropdown .dropdown-table {
        text-align: left;
        /*flex-direction: row;*/
    }
    
    div.dropdown .colorOptions .colorItem {
        display: inline-flex;
        padding: 0;
        border: 1px solid #fff;
        /*flex-direction: column;*/
    }
    
    div.dropdown .colorOptions .colorItem:hover {
        background: #eee;
    }
    
    div.dropdown .colorOptions .colorItem.active {
        border: 1px solid #e57373;
    }
    /*div.dropdown .colorOptions .colorItem:first-of-type a,
div.dropdown .colorOptions .colorItem:last-of-type a {
    border-radius: 0;
}*/
    
    div.dropdown .colorOptions .colorItem .colorIcon {
        width: 50px;
        height: 50px;
        display: block;
        margin: auto;
    }
    
    div.dropdown .colorOptions .colorItem .colorText {
        text-align: center;
        padding-top: 10px;
        width: 95px;
        margin: auto;
    }
    
    div.dropdown .colorOptions .colorItem .colorSubtitle {
        text-align: center;
        padding-top: 0;
        font-size: 10px;
        width: 95px;
        margin: auto;
    }
    
    .popup.wrap-dd-select ul.dropdown {
        top: 130px;
        width: 445px;
        max-height: none;
        position: fixed;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }
    
    .popup.wrap-dd-select ul.dropdown li {
        float: left;
        min-width: 110px;
    }
    
    .popup.wrap-dd-select ul.dropdown li a {
        border: none;
        text-align: center;
    }
    
    .popup.wrap-dd-select ul.dropdown li a .colorIcon {
        margin: 5px;
        width: 50px;
        height: 50px;
    }
    
    .popup.wrap-dd-select .dropdown.full-bg {
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        width: 100%;
        height: 100%;
        max-height: 100%;
        top: 0;
        left: 0;
        z-index: 10;
    }
    /* --------- /dropdown --------- */
    
    .ajax-loading {
        position: fixed;
        top: -950%;
        left: -950%;
        width: 2000%;
        height: 2000%;
        background: rgba(255, 255, 255, 0.5) url(img/ajax-loader.gif) no-repeat center center;
        z-index: 1000;
    }
    
    body>.ajax-loading {
        z-index: 10000;
    }
    /************************Profile*********************************/
    
    .ng-dirty input.ng-invalid, .ng-submitted input.ng-invalid,
    .ng-dirty select.ng-invalid, .ng-submitted select.ng-invalid,
    .ng-dirty textarea.ng-invalid, .ng-submitted textarea.ng-invalid {
        border-color: #ffc0cb;
    }
    
    .ng-dirty input.ng-valid, .ng-submitted input.ng-valid,
    .ng-dirty select.ng-valid, .ng-submitted select.ng-valid,
    .ng-dirty textarea.ng-valid, .ng-submitted textarea.ng-valid {
        border-color: #90ee90;
    }
    
    .form-group {
        margin-bottom: 20px;
    }

    ul.alert.alert-danger li {
        list-style: none;
    }

    .error {
        color: #de3200;
        position: absolute;
    }
    
    .pdf_frame {
        width: 200%;
        height: 500px;
        margin-bottom: -250px;
        border: 1px solid #ccc;
        -ms-zoom: 0.50;
        zoom: 0.50;
        -moz-transform: scale(0.50);
        transform: scale(0.50);
        -o-transform: scale(0.50);
        -moz-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.50);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    
    .pannelTitleIcons {
        font-size: 15px;
        text-align: right;
        padding-right: 0;
    }
    
    .okIcon {
        color: #5cb85c;
    }
    
    .editIcon {
        color: #337ab7;
    }
    
    .cancelIcon {
        color: #d9534f;
    }
    
    .errorLog {
        color: red;
        font-style: italic;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    
    .error {
        color: red;
        position: relative;
        font-style: italic;
        font-size: 11px;
        /*margin-top: -9px;*/
    }
    
    .error input {
        border-color: #ffc0cb;
    }
    
    .warningLog {
        color: #ff9800;
        position: absolute;
        position: relative;
        font-style: italic;
        font-size: 11px;
    }
    
    .position-relative {
        position: relative;
    }
    
    .width100p {
        width: 100%;
    }
    
    .width23i {
        width: 23px !important;
    }
    
    .width24i {
        width: 24px !important;
    }
    
    .width39i {
        width: 39px !important;
    }
    
    .width41i {
        width: 41px !important;
    }
    
    .margin-left-22i {
        margin-left: -22px !important;
    }
    
    .margin-left-20i {
        margin-left: -20px !important;
    }
    
    .margin-left-5i {
        margin-left: -5px !important;
    }
    
    .margin-left3i {
        margin-left: 3px !important;
    }
    
    .height22 {
        height: 22px;
    }
    
    .height-inherit {
        height: inherit;
    }
    
    .inline-block {
        display: inline-block;
    }
    
    .padding-top10 {
        padding-top: 10px;
    }
    
    .padding-left10 {
        padding-left: 10px;
    }
    
    .padding-right10 {
        padding-right: 10px;
    }
    
    .padding0 {
        padding: 0;
    }
    
    .padding0-i {
        padding: 0 !important;
    }
    
    .margin0 {
        margin: 0;
    }
    
    .margin-top14 {
        margin-top: 14px;
    }
    
    .margin-bottom10 {
        margin-bottom: 10px;
    }
    /* ------ Material DropDOwn styling ------- */
    
    .multipleDropDown select ._md-select-value {
        border: none;
    }
    
    .multipleDropDown ._md-select-value {
        border: none;
        padding: 0;
    }
    
    .multipleDropDown ._md-select-value ._md-select-icon {
        display: none;
    }
    
    .multipleDropDown md-select:not([disabled]):focus ._md-select-value {
        border: none;
    }
    
    .multipleDropDown .wrap-dd-select {
        padding: 5px 10px;
    }
    
    .multipleDropDown .secondDropDown {
        margin-top: 5px;
    }
    
    .has-feedback label~.form-control-feedback {
        top: initial;
        bottom: 0px;
    }
    /* ------------ Annimations ---------------- */
    
    .fade-element-in {
        transition: 0.2s linear all;
        opacity: 1;
        right: 0;
    }
    
    .fade-element-in.ng-hide {
        opacity: 0;
        right: -200px;
    }
    
    .pannel-actionSystem,
    .pannel-actionSystemText,
    .pannelText_Width,
    .pannelText_Height,
    .pannelHandle,
    .textGhidajBottom {
        color: #d8d8d8;
        mix-blend-mode: difference;
    }
    
    .textGhidajBottom {
        /*margin-top: -20px;*/
        text-align: center;
        position: absolute;
        bottom: 0;
        /*left: 3px;*/
    }
    
    .left-grid .textGhidajBottom {
        left: 1px;
    }
    
    .right-grid .textGhidajBottom {
        right: 1px;
    }
    
    .pannel-actionSystem,
    .pannel-actionSystemText {
        position: absolute;
        z-index: 10;
        display: none;
        pointer-events: none;
    }
    
    .pannel-actionSystemText {
        top: 4px;
    }
    
    .pannel-actionSystemText.left {
        left: -13px;
        display: block;
    }
    
    .pannel-actionSystemText.right {
        right: -13px;
        display: block;
    }
    
    .pannel-actionSystem {
        /*top: 14px;*/
        font-size: 10px;
        line-height: 0px;
        font-weight: bold;
    }
    
    .pannel-actionSystem.top {
        top: 4px;
        display: block;
    }
    
    .pannel-actionSystem.top6 {
        top: 6px;
    }
    
    .pannel-actionSystem.bottom {
        /*top: initial;*/
        bottom: 4px;
        display: block;
    }
    
    .pannel-actionSystem.bottom6 {
        bottom: 6px;
    }
    
    .pannel-actionSystem.left {
        left: -16px;
        display: block;
    }
    
    .pannel-actionSystem.right {
        right: -16px;
        display: block;
    }
    
    .pannel-actionSystem.rotate {
        bottom: 7px;
    }
    
    .pannel-actionSystem.rotate.right {
        -ms-transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
        right: -7px;
    }
    
    .pannel-actionSystem.rotate.left {
        -ms-transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
        left: -7px;
    }
    
    .pannel-actionSystem.reverse {
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    
    .pannel-actionSystem.reverse.right {
        right: -7px;
    }
    
    .pannel-actionSystem.reverse.left {
        left: -7px;
    }
    
    */ .pannelText_Width {
        z-index: 10;
        pointer-events: none;
        height: 100%;
        padding: 5px 16px;
    }
    
    .pannelText_Grid {
        position: relative;
        height: 100%;
        width: 100%;
    }
    
    .pannelText_Height {
        z-index: 10;
        pointer-events: none;
        height: inherit;
        padding: 16px 0;
        width: inherit;
        text-align: center;
        margin-left: 2px;
    }
    /* ------------ Minifying ---------------- */
    
    .panel_type_image {
        position: relative;
        float: left;
        width: 160px;
        height: 160px;
        padding: 10px;
    }

    .panel_type_image img {
        border: 1px solid white;
        width: 100%;
    }

    .panel_type_image .cover {
        width: 140px;
        height: 139px;
        position: absolute;
        top: 9px;
        left: 11px;
        opacity: 0.2;
        display: none;
        pointer-events: none;
    }

    .panel_type_image:hover .cover {
        background-color: #eee;
        display: block;
    }

    .panel_type_image.selected:hover .cover, .panel_type_image.selected .cover {
        background-color: #66afe9;
        display: block;
    }

    .panel_type_image.selected img {
        border: 1px solid #e57373;
    }

    .right-side {
        min-height: 400px;
    }
    
    .right-side hr {
        margin: 7px 0px;
    }
    
    .right-side ul.steps {
        margin: 0;
    }
    
    .right-side ul.steps li {
        font-size: 12px;
        margin: 0 2px;
    }
    
    .right-side ul.steps li:first-child {
        margin-left: 0px;
    }
    
    .right-side ul.steps li:last-child {
        margin-right: 0px;
    }
    
    .right-side legend {
        margin-bottom: 10px;
        font-size: 18px;
    }
    
    .right-side .form-group {
        margin-bottom: 7px;
    }
    
    .right-side .stepsform .control-label {
        font-size: 13px;
        margin-bottom: 0;
    }
    
    .right-side .wrap-dd-select {
        min-height: 31px;
        padding: 0 6px;
        line-height: 29px;
        font-size: 14px;
    }
    
    .right-side .wrap-dd-select span.colorBox.single-row {
        min-height: 29px;
    }
    
    .right-side .wrap-dd-select .colorIcon {
        width: 25px;
        height: 25px;
        margin-bottom: -8px;
        margin-top: 2px;
    }
    
    .right-side .wrap-dd-select ._md-select-value span {
        margin-top: -2px;
        padding-left: 1px;
    }
    
    .right-side .errorLog {
        padding-bottom: 7px;
        margin-bottom: 7px;
        font-size: 13px;
    }
    /* -------- md-select customization ----------- */
    
    md-select-menu {
        min-height: 34px;
    }
    /*.mySelect md-select-menu {
  margin-top: 35px;
}*/
    
    md-select-menu:not(._md-overflow) md-content {
        padding-top: 3px;
        padding-bottom: 3px;
        min-height: 34px;
    }
    
    md-option {
        height: 34px;
    }
    
    md-option ._md-text {
        font-size: 13px;
    }
    /* -------- Toastr -------- */
    
    #toast-container.fullLoad {
        height: 100%;
        pointer-events: initial;
        background: rgba(255, 255, 255, 0.5) url(img/ajax-loader.gif) no-repeat center center;
    }
    
    #toast-container>.toast {
        margin-top: 25px;
    }
    
    .dynBtnsModalContainer {
        margin-top: 7px;
    }
    
    #orderPdfs {
        display: inline;
    }
    
    label,
    .wrap-dd-select {
        font-weight: normal;
    }
    
    .orderForm {
        min-width: 600px;
    }
    
    .orderErrors,
    .orderErrors .error {
        position: relative;
    }
    
    .bold {
        font-weight: bold;
    }
    
    .backToLoginBtn {
        position: absolute;
        right: 10px;
        top: 2px;
    }
    
    .white-color {
        color: #d8d8d8;
    }
    
    @media screen and (min-width:1125px) and (max-width:1268px) {
        .right-side ul.steps li {
            zoom: 90%;
        }
    }
    
    @media screen and (max-width:1125px) {
        div.dropdown .color-container {
            min-width: inherit;
        }
    }

    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
        display: none !important;
    }

    body.account {
        background: url('../img/login-bg.jpeg') no-repeat center center fixed;
        background-size: cover;
    }

    .underline {
        text-decoration: underline;
    }

    .underline:hover {
        color: blue;
    }

    .orderStatus md-progress-linear div.md-container {
        background-color: lightgreen;
    }

    .orderStatus md-progress-linear .md-bar {
        background-color: darkgreen;
    }