body {
    font-family: sans-serif;
}
.routes {
    padding: 30px 20px 0 20px;
}
.routes-title {
    color: #333333;
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12px;
    margin-bottom: 20px;
    font-family: openSansRegular, arial, sans-serif;
}
.routes-content {
    /*border: 1px solid #e8e8e8;*/
    display: flex;
}
.routes-content-main {
    /*background-color: #f9f9f9;*/
    padding: 0;
    height: calc(100vh - 170px);
    overflow-y: auto;
    padding-left: 15px;
    border-radius: 10px 0 0 10px;
}
.routes-content-main-menu {
    background-color: #ffffff;
    height: 41px;
    padding-left: 20px;
    display: flex;
    align-items: center;
}
.routes-content-main-menu__item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.routes-content-main-menu__item:nth-child(1) {
    color: #333333;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.08px;
    margin-right: 20px;
    border-right: 1px solid #e8e8e8;
    padding-right: 20px;
}
.routes-content-main-menu__item:nth-child(2) {
    color: #767676;
    font-size: 14px;
    letter-spacing: 0.07px;
    margin-right: 20px;
}
.routes-content-main-menu__item:nth-child(3) {
    color: #909090;
    font-size: 13px;
    letter-spacing: 0.07px;
    margin-right: 10px;
    width: 118px;
    height: 25px;
    border-radius: 3px;
    background-color: #fffee2;
}
.routes-content-main-menu__item:nth-child(4) {
    width: 58px;
    height: 25px;
    border-radius: 3px;
    background-color: #a0a0a0;
    color: #ffffff;
    font-size: 13px;
    letter-spacing: 0.07px;
}
.routes-content-main-r {
    border: 6px solid #e8e8e8;
    padding-top: 20px;
    padding-left: 15px;
    padding-bottom: 70px;
    border-right: none;
}
.routes-content-main-r__item {
    margin-bottom: 30px;
}
.routes-content-main-r__item__title {
    color: #333333;
    font-size: 13px;
    letter-spacing: 0.07px;
    margin-bottom: 10px;
    margin-left: 50px;
}
.routes-content-main-r__item__procent {
    display: inline-block;
    text-align: right;
    margin-right: -4px;
    top: -5px;
    position: relative;
}
.routes-content-main-r__item__procent p {
    color: #7f7f7f;
    font-size: 10px;
    letter-spacing: 0.05px;
    margin-bottom: 7px;
}
.routes-content-main-r__item__procent p:first-child:after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 7px;
    background-color: #d25498;
    margin-left: 4px;
}
.routes-content-main-r__item__procent p:last-child:after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 7px;
    background-color: #8262e9;
    margin-left: 4px;
}
.routes-content-main-r__item__distance {
    width: 95%;
    display: inline-block;
    height: 52px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.11);
    border-radius: 3px 3px 0 0;
    border: 1px solid #e8e8e8;
    background-color: #ffffff;
    cursor: pointer;
}
.routes-content-main-r__item__distance:hover .routes-content-main-r__item__distance__img svg {
    fill: #ced5ff;
}
.routes-content-main-r__item__distance__img {
    top: -6px;
    padding-top: 15px;
    padding-left: 17px;
    padding-bottom: 14px;
    display: inline-block;
    padding-right: 10px;
    border-right: 1px solid #e8e8e8;
    margin-right: 4px;
    position: relative;
}
.routes-content-main-r__item__distance__img svg {
    fill: #3753ff;
}
.routes-content-main-r__item__distance__row {
    display: inline-block;
    width: 95%;
}
.routes-content-main-r__item__distance__row__graph {
    display: flex;
    margin-bottom: 10px;
    padding-top: 10px;
}
.routes-content-main-r__item__distance__row__graph_blocks {
    height: 16px;
    border-radius: 3px;
    margin-right: 2px;
}
.routes-content-main-r__item__distance__row__graph_blocks:nth-child(1) {
    width: 161px;
    background-color: #d8d8d8;
}
.routes-content-main-r__item__distance__row__graph_blocks:nth-child(2) {
    width: 74px;
    background-color: #9eabff;
}
.routes-content-main-r__item__distance__row__graph_blocks:nth-child(3) {
    width: 74px;
    background-color: #3ab54a;
}
.routes-content-main-r__item__distance__row__hour {
    display: flex;
    justify-content: space-between;
    max-width: 100%;
    padding-left: 100px;
}
.routes-content-main-r__item__distance__row__hour span {
    font-size: 10px;
    text-transform: uppercase;
    color: #3753ff;
    letter-spacing: 0.05px;
}
.routes-content-main-r__item__time {
    margin-top: 7px;
    padding-left: 111px;
    display: flex;
}
.routes-content-main-r__item__time span {
    display: block;
    color: #7f7f7f;
    font-size: 10px;
    letter-spacing: 0.05px;
}
.routes-content-main-r__item__time span:nth-child(1) {
    width: 161px;
}
.routes-content-main-r__item__time span:nth-child(2) {
    width: 74px;
}
.routes-content-main-r__item__time span:nth-child(3) {
    width: 74px;
}
.routes-content-main-r__btn {
    margin-left: 60px;
    display: flex;
    align-items: center;
}
.routes-content-main-r__btn button {
    width: 51px;
    height: 47px;
    border-radius: 10px;
    background-color: #bfc8ff;
    margin-right: 10px;
    cursor: pointer;
}
.routes-content-main-r__btn button:hover {
    background-color: #3753ff;
}
.routes-content-main-r__btn button svg {
    fill: #fff;
}
.routes-content-main-r__btn span {
    cursor: pointer;
    color: #3753ff;
    font-size: 12px;
    letter-spacing: 0.06px;
    display: block;
}
.routes-content-main-stocks {
    background-color: #f5f5f5;
    width: 100%;
    padding: 16px;
}
.routes-content-main-stocks__title {
    color: #333333;
    font-size: 16px;
    letter-spacing: 0.08px;
    margin-bottom: 28px;
}
.routes-content-main-stocks__s {
    display: flex;
    align-items: flex-end;
    height: 200px;
}
.routes-content-main-stocks__s__item {
    padding-top: 16px;
    border-radius: 10px;
    border: 1px solid #dedede;
    background-color: #ffffff;
    height: 196px;
    overflow: hidden;
    margin-right: 13px;
    transition: all .5s;
}
.routes-content-main-stocks__s__item::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}
.routes-content-main-stocks__s__item::-webkit-scrollbar {
    width: 5px;
    background-color: #F5F5F5;
}
.routes-content-main-stocks__s__item::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #3753ff;
}
.routes-content-main-stocks__s__item:hover {
    height: 411px;
    width: 305px;
    overflow: auto;
    margin-right: 13px;
}
.routes-content-main-stocks__s__item__title {
    color: #000000;
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 35px;
    padding-left: 16px;
}
.routes-content-main-stocks__s__item__name {
    display: flex;
    align-items: center;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 16px;
    padding-right: 20px;
}
.routes-content-main-stocks__s__item__name:hover {
    background-color: #bfc8ff;
    cursor: pointer;
}
.routes-content-main-stocks__s__item__name:hover span {
    color: #3753ff;
    font-weight: 700;
}
.routes-content-main-stocks__s__item__name__auto {
    display: flex;
    align-items: center;
    margin-right: 115px;
}
.routes-content-main-stocks__s__item__name__auto img {
    width: 50px;
    height: 48px;
    border-radius: 2px;
    border: 1px solid #dcdcdc;
    background-color: #ffffff;
    margin-right: 15px;
}
.routes-content-main-stocks__s__item__name__auto span {
    color: #333333;
    font-size: 13px;
    letter-spacing: 0.07px;
}
.routes-content-main-stocks__s__item__name p {
    color: #858585;
    font-size: 15px;
    letter-spacing: 0.07px;
}
.routes-content-main-stocks__s__btn {
    width: 297px;
    height: 46px;
    border-radius: 10px;
    background-color: #dbe0ff;
    padding-left: 15px;
    display: flex;
    align-items: center;
    color: #000000;
    font-size: 16px;
    line-height: 28px;
    cursor: pointer;
}
.routes-content-orders {
    width: 280px;
    border-radius: 0 10px 10px 0;
    overflow-y: auto;
    background-color: #f9f9f9;
    height: calc(100vh - 170px);
}
.routes-content-orders__map {
    height: 588px;
    width: 276px;
    margin-left: -284px;
    position: absolute;
    display: flex;
}
.routes-content-orders__map__arrow {
    display: flex;
    align-items: center;
    width: 7px;
    height: 100%;
    background-image: linear-gradient(to right, #ffffff 0%, #eceae4 100%);
    box-shadow: 0 3px 4px 3px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}
.routes-content-orders__map__arrow .arrow-wrap {
    width: 20px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: inherit;
    box-shadow: inherit;
    margin-left: -15px;
    padding-top: 2px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
.routes-content-orders__map__arrow .arrow-wrap svg {
    fill: #3753ff;
}


/*  START SASHEC 11092019 */

.r-timeline {
    display: flex;
}

.r-trange-item {
    border-left: 1px solid #3753ff;
    border-bottom: 1px solid #3753ff;
    position: relative;
    width: 0.694%;
    cursor: pointer;
    height: 10px;

}
.r-trange-item.is_disable {
    background-color: #292929!important;
    cursor: default;
}
.r-trange-item:hover:not(.is_disable) {
    background-color: #51b2ee;
    border-left: 1px solid #ff2800;
    /*background: linear-gradient(to right, #51b2ee, #ffffff);*/
}
.r-trange-item.selected {
    background-color: #ffa091;
    border-left: 1px solid #ff2800;
    /*background: linear-gradient(to right, #51b2ee, #ffffff);*/
}


.r-trange-item span {
    position: absolute;
    color: #333;
    font-size: 11px;
    display: none;
    margin-top: 50px;
    margin-left: -14px;
    background-color: #fff;
    padding: 2px 4px 1px 3px;
    border-radius: 3px;
}
.r-trange-item:hover span {
    display: block;

}

.r-trange-item:nth-child(6n+1) span {
    display: block;
    margin-top: 30px;
}

.routes-content-main{
    /*width: calc(100% - 280px);*/
    flex: 1;
}

.orders-container{
    max-width: 280px;
    height: calc(100vh - 170px);
    overflow-y: auto;
}
.order-equipment-container {
    box-shadow: 0 0 10px rgba(0,0,0,.15);
}

.r-grid {
    width: calc(100% - 60px);
    height: 105px;
    background-color: #fff;
    box-shadow: 2px 0 5px rgba(0,0,0,0.15);
    border-radius: 0 4px 0 0;
    padding-left: 5px;
}
.r-grid:nth-child(even){
    background-color: #d4ecff;
}
.r-grid-editing{
    background-color: #f1e842!important;
}

.r-grid.is_commited{
    background-color: #98ff288a!important;
}

.r-container {
    display: flex;
    margin-bottom: 60px;
    position: relative;
    padding-top: 30px;
}

/*.r-container:nth-child(odd) .r-grid{*/
/*    !*background-color: #d4e2ff;*!*/
/*    background-color: #eaeaead9;*/
/*}*/
.r-head {
    width: 28px;
    height: 105px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px 0 0 4px;
    padding-top: 8px;
    box-shadow: 2px 0 10px rgba(0,0,0,0.25);
}

.r-elements {
    position: relative;
    display: flex;
    padding-top: 3px;
    min-height: 30px;
    justify-items: start;
}

/*.r-elem-T{*/
/*    background-color: #5dade5;*/
/*}*/

/*.r-elem-W{*/
/*    !*background-color: #ddd;*!*/
/*    background-color: #ccc;*/
/*}*/

/*.r-elem-L{*/
/*    background-color: #9dde54;*/
/*}*/

/*.r-elem-U{*/
/*    background-color: rgb(214, 152, 32);*/
/*}*/

.r-elem-editing{
    /*background-color: #70bcff;*/
    /*background-color: #fffe00;*/
    /*border-color: #d81000;*/
    background-color: #f1e842;
    border: 1px solid #000000a8;
}

.r-elem{
    position: absolute;
    height: 20px;
    /*border: 1px solid #fff;*/
    /*border: 1px solid #000000a8;*/
    border-radius: 4px;
    margin-bottom: 7px;
    /*position: relative;*/
}

.r-elem-duration {
    position: absolute;
    display: none;
    margin-top: -38px;
    left: 0;
    white-space: nowrap;
    background-color: #fff;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 4px 4px 0 0;
    padding-top: 1px;
    padding-bottom: 2px;
}

.r-elem:hover .r-elem-duration {
    display: block;
}



.r-number {
    height: 30px;
    border-radius: 50%;
    padding-top: 3px;
    color: #fff;
    font-size: 16px;
}

.r-elem-letter {
    padding-left: 1px;
    font-weight: 600;
    white-space: nowrap;
}

.o-number {
    font-size: 11px;
    /*color: #fff;*/
    color: #909090;
}

.o-number,
.o-date,
.o-status{

    width: calc(50% - 2px);
    display: inline-block;
    padding-left: 10px;
    margin-bottom: 10px;
}

.o-status{
    margin-bottom: 0;
}

.o-location,
.o-customer{
    padding-left: 10px;
    margin-bottom: 8px;
    padding-right: 10px;
}

.o-head {
    border-radius: 4px 4px 0 0;
    border-bottom: 0;
    padding-top: 4px;
    position: relative;
}

.o-date {
    text-align: right;
    padding-right: 10px;
    font-size: 12px;
}
.o-equip-img-holder {
    width: 40px;
    height: 40px;
    margin-left: 6px;
    margin-bottom: 10px;
    background-color: #fff;
    text-align: center;
    padding-top: 9px;
    margin-right: 10px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 4px rgba(0,0,0,.15);
}

.o-equip-img-holder img{
    width: 20px;
}
.o-equip{
    display: flex;
    padding-left: 10px;
    padding-right: 10px;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    margin-bottom: 10px;
}

.o-equipment {
    background-color: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    min-width: 250px;
}

.o-container{
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    background-color: #fff;
    margin-bottom: 10px;
    margin-right: 6px;
    border-radius: 5px;
    overflow: hidden;
    margin-left: 10px;
    padding-left: 15px;
    position: relative;
}

.o-location {
    margin-bottom: 5px;
}

.o-container.selected{
    background-color: #ccefff;
}

.o-container.selected .o-number{
    /*color: #fff;*/
}

.o-container .o-indrag{
    display: none;
}

.o-container.ui-draggable-dragging .o-head,
.o-container.ui-draggable-dragging .o-equipment,
.o-container.o-placed .o-head,
.o-container.o-placed .o-equipment

{

    display: none;

}

.o-container.ui-draggable-dragging .o-indrag,
.o-container.o-placed .o-indrag{

    display: block;

}

.o-container .one_equip_in_order {
    border: 1px solid #828282;
    height: 13px;
    margin: 3px;
    width: 13px;
    border-radius: 50%;
    display: inline-block;
    background-color: aliceblue;
}
.o-container .one_equip_in_order.on_route{
    background-color: #26be28;
    border: 1px solid #26be28;
}
.o-container .o-color{
    height: 100%;
    width: 10px;
    position: absolute;
    left: 0;
}


.o-base-title {
    padding-left: 15px;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 20px;
    font-family: openSansRegular, arial, sans-serif;
}

.o-equip-name {
    font-family: openSansRegular, arial, sans-serif;
    font-size: 16px;
    font-weight: 600;

}

.o-equip-quantity {
    padding-top: 10px;
    width: 26px;
}



.r-o-item {
    position: absolute;
    z-index: 10;
    color: red;
    left: 57%;
    margin-top: -30px;
}

.r-o-stick{
    width: 1px;
    height: 65px;
    background-color: red;
    margin-top: -4px;
    margin-left: 1px;

}

.r-o-range-line{
    height: 6px;
    border-bottom: 1px solid red;
    background-color: rgba(255, 0, 0, 0.2);
    border-left: 1px solid red;
    border-right: 1px solid red;
    width: 40px;
    position: absolute;
    bottom: 0;
    left: -8px;
}

.r-o-range {
    position: absolute;
    font-size: 11px;
    width: 127px;
    margin-top: -14px;
    margin-left: 16px;
}

.r-stock{
    color: #8d8d8d;
}

.r-points-breadcrumbs {
    display: inline-block;
    margin-left: 10px;
}

.r-point-bc {
    margin-right: 7px;
    color: #333;
}
.r-point-bc:last-child i{
    display: none;
}

.element-edit-form label{
    font-family: arial,Sans-Serif;
    color: #444;
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: 400;
}

.element-edit-form input{
    font-family: arial,Sans-Serif;
    font-size: 14px;
    color: #000;
    width: 100%;
    margin-top: 3px;
    border: 1px solid #888888;
    border-radius: 4px;
    padding: 7px 13px;
    font-weight: 400;
    outline: 0;
}
.element-edit-form input:focus{
    border: 1px solid #2196F3;
}


.edit-elem-btn {
    font-family: opensansregular, arial, sans-serif;
    font-size: 14px;
    padding: 5px 14px;
    background-color: aliceblue;
    display: inline-flex;
    margin-right: 7px;
    border-radius: 4px;
    cursor: pointer;
}

.edit-elem-btn:hover{
    background-color: #e1fdff;
}

.edit-elem-btn.edit-elem-save:hover{
    color: #00aa00;
}
.edit-elem-btn.edit-elem-delete:hover{
    color: #ff5e6a;
}



.edit-elem-btn i {
    margin-right: 6px;
}
.buttons-container{
    margin-top: 10px;
    margin-bottom: 10px;
}

.routes-someEdit-container h4{
    margin-left: 10px;
}
.routes-someEdit-container {
    width: 340px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
    border-radius: 0 5px 5px 0;
    background-color: #ffffff;
}
/* END SASHEC */

.route-add-btn{
    margin-bottom: 24px;
}

.o-equip_ {
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,.1);
    padding-left: 8px;
    padding-bottom: 8px;
    padding-top: 7px;
    width: 360px;
}

.o-equip_.on_route{
    background-color: #acffae;
}

.r-order-range{
    /*height: 25px;*/
    height: 15px;
    border-left: 1px solid red;
    border-right: 1px solid red;
    /*margin-top: 0px;*/
    position: relative;
    background-color: #ff00001c;
    overflow: hidden;
    text-align: center;
    /*top: -10px;*/
    /*vertical-align: bottom;*/
}

.r_points_on_route {
    position: relative;
    display: flex;
    padding-top: 3px;
    min-height: 50px;
    justify-items: start;
}

.point_on_route{
    position: absolute;
    display: flex;
    padding-top: 3px;
    justify-items: start;
    /* width: 24px; */
    height: 24px;
    border: 1px solid #c5c5c5;
    border-radius: 20px;
    background-color: #fff;
    margin-left: -12px;
    z-index: 1;
}
.point_on_route.selected{
    background-color: #ccefff;
    top: -29px;
}

.point_on_route:hover{
    z-index: 10;
    /*background-color: #fff;*/
    /*border-color: #ffc900;*/
    border-color: #2196F3;

}

.point_on_route .stick {
    width: 1px;
    height: 35px;
    background-color: #d4d4d4;
    margin-left: 10px;
    margin-top: 20px;
    position: absolute;

}
.point_on_route .label {
    color: #000;
    font-family: arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    padding-top: 3px;
}


.point_on_route:hover .elements{
    display: inherit;
}
.point_on_route .elements {
    position: relative;
    white-space: nowrap;
    display: none;
}
.point_on_route.selected .elements{
    display: inherit;
    z-index: 11;
}
.point_on_route .elements .r-elem{
    position: relative;
    display: inline-block;
    margin-right: 1px;
    margin-top: -1px;
    height: 17px;

    font-family: arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
}

.point_on_route .elements .r-elem:last-child {
    border-radius: 4px 9px 9px 4px;
    margin-right: 2px;
}
.equip-counter-holder{
    margin-left: 7px;
    margin-bottom: 7px;
}

.tetris-route-item:hover {
    color: #2196F3;
}

.tetris-route-item:hover .tetris-route-item-circle {
    border: 2px solid #2196F3;
}

.map-holder{
    height: calc(100vh - 170px);
    min-width: 50px;
    /*min-width: 500px;*/
    background-color: aliceblue;
    position: relative;
}

.map-edge{
    height: 100%;
    width: 7px;
    cursor: col-resize;
    background-color: rgba(0,0,0,0);
    position: absolute;
    top: 0;
    z-index: 1000;
}

.map-edge:hover{
    background-color: #2196F3;
}

.map-holder #map-container {
    height: 100%;
    width: 100%;
}
.routes-manager-header {
    font-size: 20px;
    margin-bottom: 10px;
}

.r-driver {
    font-size: 14px;
    color: #000;
    font-weight: 600;
    border-bottom: 1px dashed;
    cursor: pointer;
    display: inline-block;

}
.r-driver:hover {
    color: #2196F3;
}
.r-transport{
    margin-left: 12px;
    color: #444;
    border-bottom: 1px dashed;
    cursor: pointer;
    display: inline-block;
}
.r-transport:hover{
    color: #2196F3;
    border-bottom: 1px dashed;
}

.r-transport-header{
    position: absolute;
    margin-top: -27px;
    width: 100%;
}

.r-transport-load {
    position: absolute;
    right: 35px;
    top: -5px;
}

.r-transport-load-info{
    /*display: inline-block;*/
    display: none;
}
.o-location i,
.o-customer i {
    color: #007eff;
}
.routes-order-headline {
    font-size: 18px;
    padding-left: 10px;
    padding-top: 35px;
    padding-bottom: 10px;
    color: #000000a8;
    font-family: openSansRegular, arial, sans-serif;
    font-weight: 600;
}
.order-equipment-holder {
    background-color: #b2d9ea;

}


.o-equipment-headline{
    padding-left: 15px;
    font-weight: 600;
    color: rgba(0,0,0,0.5);
    margin-bottom: 6px;
}
.o-equip-id {
    color: rgba(0,0,0,0.6);
    font-size: 12px;
    margin-right: 5px;
}
.o-equip-size {
    margin-top: 4px;
    margin-bottom: 4px;
    color: #555;
}

.equip-on-route i{
    font-size: 30px;
}

/*.equip-on-route i:hover {*/
    /*color: #17c4ff;*/
/*}*/
.on_route .equip-on-route i {
    color: #E91E63;
}
/*.on_route .equip-on-route i:hover {*/
    /*color: #ff144a;*/
/*}*/
.equip-on-route {
    display: inline-block;
    vertical-align: middle;
}

.main-container{
    display: flex;
}
.tetris-container{
    display: flex;
}




.tetris-container .routes-content-main {
    height: 170px;
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: rgba(0,0,0,0);
    padding-left: 0;
    padding-right: 0px;
}


.tetris-exсept-map-holder {
    flex: 1;
    position: relative;
}
.tetris-canvas-holder{
    flex: 1;
}
.tetris-canvas-container {
    display: flex;

}

.tetris-container .r_points_on_route{
    display: none;
}

.tetris-container .r-grid {
    height: 56px;
}
.tetris-container .r-head{
    height: 56px;
}

.tetris-container .route-add-btn,
.tetris-container .route-save-btn{
    display: none;
}
.tetris-container .r-container{
    margin-bottom: 0;

}
.tetris-lower {
    position: absolute;
    bottom: 140px;
    width: 100%;
}
.put-on-route-container{
    display: flex;
}
.equipment-route-container {
    flex: 1;
    position: relative;
}

.map-orders-container {
    display: flex;
}

.put-on-route-container .routes-content-main{
    height: 228px;
    bottom: 0;
    position: absolute;
    width: 100%;
}

.put-on-route-container .route-add-btn,
.put-on-route-container .route-save-btn{
    display: none;
}

.sidebar-order-equipment {
    margin-left: 20px;
    margin-top: -2px;
    white-space: nowrap;
    color: #555;
}

.put-on-route-order-equipment-container .o-container{
    background-color: rgba(0,0,0,0);
    padding: 0;
    margin: 0;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    margin-top: 20px;

}

.put-on-route-order-equipment-container .o-color{
    height: 35px;
    width: 35px;
    border-radius: 50%;
}

.put-on-route-order-equipment-container .o-number {
    font-size: 14px;
    font-weight: 600;
    margin-left: 40px;
    color: #000;
    margin-top: -10px;
    margin-bottom: 0;
}

.put-on-route-order-equipment-container .o-date {
    text-align: left;
    margin-left: 40px;
    color: #555;
}

.equip-route-btn {
    height: 38px;
    width: 150px;
    background-color: aliceblue;
    border-radius: 4px;
    margin-top: 10px;
    vertical-align: middle;
    color: #fff;
}
.set-route-btn{
    background-color: #009d00;

}
.remove-route-btn{
    background-color: #ef503c;
}
.close-put-on-route {
    border: 1px solid #ddd;
    width: 70px;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    position: absolute;
    cursor: pointer;
    right: 30px;
    z-index: 10;
}
.close-put-on-route:hover {
    border: 1px solid rgba(221, 15, 11, 0.51);
}

.put-on-route-order-equipment-container .order-equipment-holder {
    padding-top: 0;
    padding-bottom: 0;
    width: 40%;
    border-radius: 6px;
    background-color: #fff;
}

.btn-equip-on-route {
    background-color: #3655ff;
    padding: 8px 10px;
    width: 190px;
    margin-top: 10px;
    border-radius: 4px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

.btn-equip-on-route:hover {
    background-color: #1393ff;
}

.order-on-route{

}

.put-on-route-container .r-container {
    padding-top: 61px;
}

.put-on-route-container .r-transport-header {
    margin-top: -53px;
}


.put-on-route-selected-row-holder{
    display: flex;
    padding-top: 1px;
}

.point_on_route.selected .stick {
    height: 89px;
}


/* Tetris */

.tetris-canvas-holder,
.tetris-orders-holder,
.tetris-route{

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

.tetris-container {
    height: 100%;
}

.tetris-upper {
    display: flex;
}

.tetris-canvas-holder {
    width: calc(100% - 540px);
}

.tetris-orders-holder {
    width: 380px;
    display: flex;
}
.tetris-upper {
    display: flex;
    height: calc(100% - 80px);
}
.tetris-lower {
    position: absolute;
    bottom: 0;
    width: 100%;
}
.tetris-route {
    height: 54px;
}


.order-data {
    padding: 10px 10px 10px 15px;
}

.order-title {
    font-size: 13px;
    font-weight: 600;
}

.order-address {
    color: #555;
    font-size: 13px;
    margin-top: 3px;
}
.order-equipment-list {
    padding: 10px 10px 5px 15px;
    display: none;
    background-color: aliceblue;
}

.order-item.opened .order-equipment-list {
    display: block;
}

.order-item {
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    margin-bottom: 15px;
    margin-top: 10px;
    margin-right: 10px;
}

.order-equipment {
    border-bottom: 1px solid #d3e1ef;
    padding-bottom: 7px;
    margin-bottom: 9px;
}

.order-equipment-codenumber {
    font-size: 12px;
    color: #46657f;
    margin-bottom: 2px;
}
.order-equipment:last-child{
    border-bottom: 0;
}
.tetris-route-plan-holder {
    display: flex;
    padding-left: 0;
    width: 100%;
    justify-content: space-around;
}
.tetris-route-item-circle {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid #2196f3;
    background-color: #fff;
    z-index: 1;
    position: absolute;
    bottom: 2px;
}
.tetris-route-item-circle.selected{
    border: 2px solid #2196F3;
    background-color: #FFEB3B;
}
.tetris-route-item-circle.is_commited{
    border: 4px solid #26be28!important;
}

.tetris-route-line {
    height: 2px;
    width: 100%;
    position: absolute;
    background-color: #ddd;
    bottom: 20px;
    display: none;
}
.tetris-route-item {
    margin-right: 0;
    margin-top: -10px;
    position: relative;
    z-index: 1;
    width: 150px;
}
.tetris-route-item-title {
    font-weight: 600;
    font-size: 14px;

}
.tetris-route-item-data {
    display: inline-block;
    padding-left: 35px;
    padding-top: 18px;
    width: 100%;
}


.tetris-route-item-subtitle {
    color: #555;
    display: none;
}

.tetris-route-item-address {
    font-size: 12px;
    color: #555;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 20px;
}

.tetris-upload-holder,
.tetris-platform-holder,
.tetris-plan-holder{
    width: 180px;
    margin-right: 10px;
    margin-left: 10px;
}
.tetris-sidebar-headline {
    font-weight: 600;
    font-size: 15px;
    margin-top: 0;
    margin-bottom: 10px;
}
.tetris-sidebar-subtext {
    color: #555;
    font-size: 12px;
    margin-bottom: 17px;
}
.tetris-upload-item {
    box-shadow: 0 0 7px rgba(0,0,0,0.15);
    border-radius: 5px;
    margin-bottom: 9px;
    position: relative;
}
.tetris-upload-item-order-number {
    position: absolute;
    right: 0;
    background-color: aliceblue;
    width: 52px;
    border-radius: 0 5px 0 5px;
    text-align: center;
    font-size: 12px;
}
span.grey{
    color: #9c9c9c;
}

.tetris-upload-item-eq-codenumber {
    font-size: 12px;
    padding-left: 7px;
    padding-top: 5px;
    color: #555;
}
.tetris-upload-item-eq-name {
    padding-left: 7px;
    padding-bottom: 5px;
    margin-top: 5px;
    font-weight: 600;
}

.tetris-platform-item {
    display: flex;
}
.tetris-platform-item-eq-codenumber {
    margin-left: 7px;
    margin-right: 10px;
    color: #555;
}
.tetris-platform-item {
    display: flex;
    border: 1px solid #ddd;
    padding: 3px 5px 2px 5px;
    margin-bottom: 5px;
    border-radius: 3px;
}
.tetris-platform-item.checked {
    background-color: #dfffcc;
    border: 1px solid #26be28;

}
.tetris-platform-item.checked i{
    color: #26be28;
}

.tetris-plan-item.unload .tetris-plan-item-circle{
    color: #f45b57;
}

.tetris-plan-item.load .tetris-plan-item-circle{
    color: #26be28;
}

.tetris-plan-item-circle {
    font-size: 10px;
    position: absolute;
    margin-top: 2px;
}
.tetris-plan-item-operation {
    padding-left: 15px;

}

.tetris-plan-item-eq {
    display: flex;
    margin-top: 5px;
}

.tetris-plan-item-eq-codenumber {
    color: #555;
    margin-right: 10px;
}

.tetris-plan-item {
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 6px;
    box-shadow: 0 0 2px rgba(0,0,0,0.15);
    border-radius: 7px;
    padding-left: 10px;
    padding-top: 5px;
}

.tetris-plan-item-eq-name {
    font-weight: 600;
}


.to-load-container {

}
.equip-to-load-name {
    padding: 0;
    font-size: 12px;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 0;
    padding-left: 4px;
    background-color: rgba(0,0,0,0.2);
    position: relative;
}

.o-equip-real-size{
    background-color: #dbffd8;
    z-index: 10;
    position: absolute;
    left: 440px;
    padding: 3px;
    top: 130px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 2px;
}

.equip-to-load {
    margin-right: 4px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.2);
}


.tetris-watch-equip-info {
    position: absolute;
    z-index: 1;
    background-color: #005fff;
    height: 18px;
    width: 18px;
    right: 0px;
    top: -1px;
    border-radius: 2px;
    text-align: center;
    padding-top: 3px;
    cursor: pointer;
}
.equip-to-load-size {
    font-size: 11px;
    padding-left: 2px;
    padding-top: 2px;
}

.tetris-options-holder {
    width: 100%;
}

.to-load-equipment-holder{
    width: 100%;
    display: flex;
    margin-top: 20px;
    padding: 15px 10px;
    border: 2px dashed #d8d8d8;
    border-radius: 6px;
    background-color: #fbfaf5;
}

.tetris-return-to-stack{
    margin-right: 4px;
}

.MuiButton-label {
    width: 100%;
    display: inherit;
    align-items: inherit;
    justify-content: inherit;
    font-size: 11px;
}
.canvas-title {
    margin-top: 4px;
    margin-bottom: 4px;
    font-weight: bold;
}


/*Split orders*/

.s-order-container {
    height: 100%;
    display: flex;
}

.s-order-sidebar {
    width: 220px;
}

.s-order-content {
    flex: 1;
}
.s-order-selected-container {
    height: 100px;
}
.s-order-bases-container {
    height: calc(100% - 100px);
    display: flex;
}

.s-order-sidebar-list {
    height: calc(100% - 100px);
    overflow-y: auto;
}

.all-order-item{
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 6px;
    padding-top: 8px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.all-order-item:hover{
    background-color: aliceblue;
}

.all-order-item.selected{
    background-color: #0c91e5;
    color: #fff;
}

.all-order-item.selected .branch-order-date {
    color: rgba(255,255,255,0.6);
}

.s-order-headline {
    height: 100px;
    padding-left: 20px;
    padding-top: 30px;
    font-size: 20px;
}
.branch-order-date {
    font-size: 13px;
    color: #666;
    margin-top: 2px;
    margin-bottom: 3px;
}
.s-order-base {
    width: 33.33333%;
    padding-left: 10px;
    padding-right: 10px;
}

.s-order-selected-container{
    display: flex;
}
.selected-order-item {
    width: 380px;
    padding-top: 10px;
}
.bind-to-container {
    display: flex;
}

.bind-to-btn {
    border: 1px solid #ddd;
    height: 40px;
    margin-right: 10px;
    padding: 11px 14px;
    margin-top: 20px;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    cursor: pointer;
    font-weight: 600;
}
.bind-to-btn:hover {
    border: 1px solid #1393ff;
}
.ctrl-span {
    color: #8a8a8a;
    font-weight: 400;
}

.bind-to-btn i{
    border: 1px solid #ddd;
    padding: 5px;
    margin-top: -5px;
    color: #000;
    margin-right: 10px;
    border-radius: 2px;
}

.s-order-base-map-holder {
    height: 380px;
}
.s-order-base-headline {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600;
}

.s-order-base-distance {
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    display: inline-block;
}

.s-order-base-time{
    font-size: 16px;
    margin-top: 7px;
    color: #777;
    display: inline-block;
    margin-left: 20px;
}

.s-order-base-content {
    height: calc(100% - 415px);
    overflow-y: auto;
}
.s-order-base-orders {
    border-top: 1px solid #ddd;
    padding-top: 7px;
    margin-top: 7px;
}

.branch-order {
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 5px;
    position: relative;
}
.branch-order-remove {
    border: 1px solid red;
    width: 74px;
    text-align: center;
    border-radius: 3px;
    height: 23px;
    padding-top: 2px;
    position: absolute;
    top: 7px;
    right: 5px;
    cursor: pointer;
}

/*-----REPORT ----*/

.rep-plan-item-time {
    font-weight: 600;
    font-family: arial,sans-serif;
    font-size: 16px;
    white-space: nowrap;
    margin-right: 7px;

}

.rep-plan-item-data {
    display: flex;
    margin-bottom: 10px;
    margin-top: 20px;
}
.tetris-step-holder {
    border: 1px solid #777;
    padding: 10px;
    border-radius: 3px;
    display: flex;
}

.tetris-step-picture-holder {
    width: 160px;
}

img.tetris-step-picture {
    width: 100%;
}

/*  */



.auto-split {
    height: 41px;
    width: 200px;
    background-color: #2196F3;
    text-align: center;
    padding-top: 11px;
    margin-top: 20px;
    cursor: pointer;
    position: absolute;
    top: 40px;
    right: 10px;
    color: #fff;
    border-radius: 3px;
    font-size: 14px;
    font-family: arial, sans-serif;
}
#order-map-container {
    width: 100%;
    height: 350px;
    max-width: 650px;
}

button {
    border: 0;
    background-color: aliceblue;
    padding: 7px 18px;
    font-family: arial, sans-serif;
    font-size: 14px;
    color: #0060ad;
    font-weight: 600;
    outline: 0;
    margin-top: 6px;
    margin-bottom: 7px;
}
button:hover {
    background-color: #1393ff;
    color: #fff;
}
button:first-child {
    border-radius: 13px 0 0 13px;
}
button:last-child {
    border-radius: 0 13px 13px 0;
}


.something-not-selected{
    font-size: 17px;
    text-align: center;
    padding-top: 16%;
    color: #607D8B;
}
.tetris-plan-holder {
    width: 350px;
}

.put-on-route-platform{
    background-color: aliceblue;
    position: absolute;
    left: 440px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 2px;
    z-index: 1;
    padding: 10px;
}

.dbrd-dates-list-holder {
    display: flex;
    overflow-y: auto;
}
.dbrd-date {
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    margin-left: 5px;
    margin-right: 5px;
    padding: 6px 12px;
    margin-top: 11px;
    border-radius: 4px 4px 0 0;
    cursor: pointer;

}
.dbrd-date.red{
    color: red;
}

.dbrd-date:hover{
    color: #1393ff;
}

.dbrd-date.selected{
    background-color: #1393ff;
    color: #ffffff;
}
.dbrd-date.selected .grey-day{
    color: rgba(255,255,255,0.5);
}

.grey-day{
    font-size: 13px;
    color: #555;
}

.dbrd-branches-list-holder {
    display: flex;
    margin-top: 20px;
    margin-bottom: 15px;
}

.dbrd-branch {
    font-size: 20px;
    margin-right: 20px;
    cursor: pointer;
}
.dbrd-branch:hover {
    color: #1393ff;
}

.dbrd-branch.selected {

    border-bottom: 2px solid #1393ff;

}



.dbrd-transport-list-holder {
    display: flex;
    overflow-y: auto;
}
.dbrd-transport {
    margin-right: 20px;
    margin-bottom: 15px;
}
.dbrd-transport-head {
    height: 80px;
}

.dbrd-transport-head-driver{
    color: #333;
    margin-bottom: 5px;
    font-weight: bold;
}
.dbrd-transport-head-transport{
    color: #555;
    margin-bottom: 5px;
    font-size: 13px;
}
.dbrd-transport-platform {
    background-color: aliceblue;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 2px;
    padding: 5px;
    font-size: 12px;
    color: #666;
}

.dplan-dates-holder {
    display: flex;
}

.dplan-date {
    background-color: aliceblue;
    padding: 3px 8px;
    margin-right: 7px;
    margin-top: -10px;
    margin-bottom: 20px;
    border-radius: 3px;
    cursor: pointer;
}
.dplan-date:hover {
    color: #1393ff;
}
.dplan-date.selected{
    background-color: #1393ff;
    color: #fff;
}


.canvas-holder{
    display: flex;
}
.canvas1-front,
.canvas2-front{
    width: 30px;
    background-color: #f3f3f3;
    text-align: center;
    padding-top: 50px;
    border-radius: 0 5px 5px 0;
    margin-left: 4px;
}

/*  courier */

#map-container{
    width: 700px;
    height: 400px;
}
.field-map-container-holder{
    padding-left: 35px;
    padding-right: 35px;
}
#courier-map-container{
    width: 100%;
    height: 300px;

}