.configurator:after {
    content: '';
    clear: both;
    display: block;
}
.configurator .col {
    box-shadow: -6px 13px 27px rgba(94, 98, 105, 0.1);
    border-radius: 6px;
    background: #FFF;
    box-sizing: border-box;
    padding: 24px;
    margin-left: 30px;
}
.configurator h2 {
    color: #111213;
    font-size: 28px;
    line-height: 30px;
    font-weight: 500;
    margin-bottom: 32px;
    position: relative;
}
.configurator .toggle-rooms {
    position: absolute;
    right: 24px;
    top: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #5daf8b;
    line-height: 32px;
}
.configurator .toggle-rooms:hover {
    text-decoration: underline;
}
.configurator .add-room {
    border: 1px solid #E5E5E5;
    box-sizing: border-box;
    border-radius: 10px;
    height: 56px;
    line-height: 54px;
    color: #5DAF8B;
    font-weight: 500;
    padding: 0 16px;
    cursor: pointer;
    position: relative;
}
.configurator .add-room:hover {
    border-color: #5DAF8B;
}
    .configurator .add-room i {
        position: absolute;
        width: 20px;
        height: 20px;
        box-sizing: border-box;
        border-radius: 50%;
        border: 2px solid #5daf8b;
        display: block;
        top: 17px;
        right: 16px;
    }
    .configurator .add-room i:after {
        content: '';
        display: block;
        width: 12px;
        height: 2px;
        left: 2px;
        top: 7px;
        background: #5daf8b;
        position: absolute;
    }
    .configurator .add-room i:before {
        content: '';
        display: block;
        width: 2px;
        height: 12px;
        left: 7px;
        top: 2px;
        background: #5daf8b;
        position: absolute;
    }
.configurator .col-15 {
    width: calc(17% - 20px);
    float: left;
    height: 100%;
    padding: 0 10px 24px 24px;
}
    .configurator .col-15 h2 {
        background: #ECECEC;
        text-align: center;
        margin: 0 -10px 25px -24px;
        border-radius: 6px 6px 0 0;
        padding: 6px 0;
        font-size: 18px;
        color: #5A5A5A;
    }
    .configurator .col-15 .m-list {
        height: calc(100% - 62px);
        overflow-y: scroll;
        padding-right: 10px;
    }
.configurator .col-25 {
    width: calc(25% - 20px);
    float: left;
    height: 100%;
    padding-top: 0;
}
    .configurator .col-25 h2 {
        background: #ECECEC;
        margin: 0 -24px 25px -24px;
        border-radius: 6px 6px 0 0;
        padding: 6px 24px;
        font-size: 18px;
        color: #5A5A5A;
    }
    .configurator .col-25 form {
        height: calc(100% - 62px);
    }
    .configurator .col-25 .btn {
        width: calc(50% - 10px);
        float: left;
        display: block;
        margin: 0 0 0 20px !important;
        padding: 8px;
    }
    .configurator .col-25 .preview-link {
        margin-left: 0 !important;
    }
.configurator .col-60 {
    width: calc(58% - 20px);
    height: 100%;
    float: left;
    box-shadow: none;
    border-radius: 0;
    background: none;
    padding: 0;
    position: relative;
}
    .configurator .col-60 .editor {
        box-shadow: -6px 13px 27px rgba(94, 98, 105, 0.1);
        border-radius: 6px;
        background: #FFF;
        padding: 24px;
    }
    .configurator .col-60 .favorites {
        box-shadow: -6px 13px 27px rgba(94, 98, 105, 0.1);
        border-radius: 6px;
        background: #FFF;
        padding: 24px;
        position: absolute;
        width: 100%;
        box-sizing: border-box;
        left: 0;
        bottom: 0;
    }
.configurator .col:first-child {
    margin-left: 0;
}
.configurator .editor {
    position: relative;
    height: 455px;
    box-sizing: border-box;
}
.configurator .editor:after {
    content: '';
    clear: both;
    display: block;
}
.configurator .configuring-set .placeholder {
    height: 100%;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}
.configurator .configuring-set {
    position: relative;
    margin: 0 auto;
    padding: 150px 5px 17px 5px;
    box-sizing: border-box;
    text-align: center;
    min-height: 291px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.configurator .configuring-set:after {
    content: '';
    display: block;
    clear: both;
}
.configurator .configuring-set.empty {
    height: 390px;
    background: none;
    padding: 100px 0 0;
    margin: 0;
    border: none;
    display: block;
    max-width: none;
}
.configurator .editor .hidden {
    display: none;
}
.configurator .editor .set-name {
    position: absolute;
    top: 20px;
    left: calc(50% - 150px);
    width: 300px;
    border: 1px solid #E5E5E5;
    box-sizing: border-box;
    border-radius: 10px;
    height: 46px;
    line-height: 46px;
    padding: 0 18px;
    font-size: 14px;
    font-size: 16px;
}
.configurator .editor .set-name.error {
    border-color: red;
}
.configurator .editor .save {
    margin-top: 40px;
    float: right;
}
.configurator .editor label {
    margin-top: 50px;
    float: left;
    font-size: 14px;
    line-height: 20px;
}
    .configurator .editor label {
        vertical-align: top;
        line-height: 20px;
        display: inline-block;
    }
.configurator .editor .add-to-favorite {
    padding-left: 35px;
    line-height: 26px;
    position: absolute;
    top: 35px;
    right: 40px;
    color: #FC0;
    background: url(../images/star.svg) no-repeat left center;
    background-size: 26px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.3px;
    cursor: pointer;
}
.configurator .editor .add-to-favorite:hover {
    text-decoration: underline;
}
.configurator .configuring-set .m-element {
    position: relative;
    max-width: 120px;
    margin-left: 0;
    padding: 20px 10px;
    background: linear-gradient(180deg, #d3d3d2 0%, #babbb9 100%);
    display: inline-block;
    z-index: 2;
    transition: none !important;
    box-shadow: 0 10px 5px -5px rgba(255, 255, 255, .6) inset;
}
.configurator .configuring-set .m-element:first-child {
    border-radius: 3px 0 0 3px;
    /*padding-left: 20px;*/
}
.configurator .configuring-set .m-element:nth-last-child(2) {
    border-radius: 0 3px 3px 0;
    /*padding-right: 20px;*/
}
.configurator .configuring-set .m-element.highlight {
    opacity: .5;
}
.configurator .configuring-set .m-element.sortable-ghost {
    opacity: .5;
}
.configurator .configuring-set.e1 .m-element {
    border-radius: 3px;
}
    .configurator .configuring-set .m-element .jqselect {
        position: absolute;
        top: -70px;
        left: 0;
        right: 0;
        width: 92%;
        margin: 0 auto;
        text-align: left;
    }
    .configurator .configuring-set .m-element img {
        display: block;
        width: 100%;
        border-radius: 4px;
        border: 2px solid #7f7f7f;
        box-sizing: border-box;
    }
    .configurator .configuring-set .m-element h4 {
        display: none;
    }
    .configurator .configuring-set .m-element .delete {
        background: rgba(255, 145, 145, .85);
        position: absolute;
        width: calc(100% - 26px);
        height: 20px;
        left: 13px;
        bottom: 23px;
        border-radius: 0 0 4px 4px;
        text-align: center;
        color: #FFF;
        cursor: pointer;
        font-size: 13px;
        line-height: 20px;
        opacity: 0;
        transition: all .1s linear;
    }
    .configurator .configuring-set .m-element:hover {
        z-index: 3;
    }
    .configurator .configuring-set .m-element:hover .delete {
        opacity: 1;
    }
.configuring-set.empty .sortable-ghost {
    display: none !important;
}
.configurator .empty {
    padding: 8px 0;
}
.configurator .empty p {
    color: #8B919C;
    font-size: 20px;
    line-height: 26px;
    font-weight: 400;
    text-align: center;
    padding: 0 130px;
}
.configurator .empty b {
    color: #5DAF8B;
    font-weight: 400;
}
.configurator .empty-frame {
    width: 136px;
    height: 136px;
    box-sizing: border-box;
    background: #FFF;
    border-radius: 5px;
    border: 7px solid #F6F6F6;
    margin: 40px auto 0;
}
.configurator .empty-frame i {
    width: 46px;
    height: 46px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid #C3EBD9;
    margin: 38px auto 0;
    display: block;
    position: relative;
}
.configurator .empty-frame i:after {
    content: '';
    display: block;
    width: 25px;
    height: 1px;
    left: 10px;
    top: 22px;
    background: #C3EBD9;
    position: absolute;
}
.configuring-set .to-remove {
    display: block !important;
}
.configurator .empty-frame i:before {
    content: '';
    display: block;
    width: 1px;
    height: 25px;
    left: 22px;
    top: 10px;
    background: #C3EBD9;
    position: absolute;
}
.configurator .line {
    border-bottom: 1px solid #E5E5E5;
    margin: 24px 0;
}
.configurator .excel {
    display: inline-block;
    background: url(../images/excel.svg) no-repeat left center;
    background-size: 16px;
    color: #5DAF8B;
    text-decoration: none;
    padding-left: 24px;
    font-weight: 500;
    font-size: 14px;
}
    .configurator .excel:hover {
        text-decoration: underline;
    }
.configurator .rooms .hidden {
    display: none;
}
.configurator .rooms form input[type=submit] {
    margin: 24px 0 16px;
}
.configurator .rooms form .result {
    margin-top: 10px;
}
.configurator .rooms form .green {
    margin: 24px 0 16px;
}
.configurator .m-list:after {
    content: '';
    display: block;
    clear: both;
}
.configurator .m-list .m-element {
    width: 100%;
    box-sizing: border-box;
    float: left;
    border-radius: 8px;
    border: 2px solid transparent;
    padding: 16px;
    cursor: pointer;
    background: #FFF;
    transition: none !important;
}
.configurator .m-list .m-element:hover {
    border: 2px solid #86D7B3;
}
.configurator .m-list .img {
    width: 68%;
    min-width: 60px;
    margin: 0 auto;
}
.configurator .m-list img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.configurator .m-list h4 {
    color: #5E6269;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 8px;
    text-align: center;
}
.configurator .rooms-list {
    height: calc(100% - 254px);
    overflow-y: scroll;
    margin-top: 16px;
    padding-right: 10px;
}
.configurator .favorites-list {
    height: calc(100% - 133px);
}
.configurator .rooms-list .room:first-child {
    margin-top: 0;
}
.configurator .room {
    border: 1px solid #E5E5E5;
    box-sizing: border-box;
    border-radius: 10px;
    margin-top: 16px;
    position: relative;
    min-height: 147px;
}
.configurator .room.closed {
    min-height: auto;
}
.configurator .room.active {
    border: 1px solid #86D7B3;
    box-shadow: 0 0 15px -4px rgba(93, 175, 139, 0.3);
}
.configurator .room h3 {
    color: #111213;
    font-size: 18px;
    line-height: 24px;
    padding: 16px;
    font-weight: 500;
    border-bottom: 1px solid #E5E5E5;
    margin-bottom: 16px;
}
.configurator .room h3 input {
    padding: 0 23px 0 0;
    line-height: 24px;
    border: none;
    margin: 0;
    font-size: 16px;
}
.configurator.favorites .room h3 input {
    cursor: default;
    width: 100%;
    box-sizing: border-box;
}
.configurator .room.closed h3 {
    border: none;
    margin-bottom: 0;
}
.configurator .room .submenu {
    display: none;
    position: absolute;
    background: #FFF;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.16);
    border-radius: 6px;
    padding: 10px 0;
    z-index: 5;
    top: 44px;
    width: 110px;
    right: 15px;
}
.configurator .room .submenu.opened {
    display: block;
}
.configurator .room .submenu a {
    display: block;
    font-size: 14px;
    line-height: 20px;
    padding: 6px 15px;
    cursor: pointer;
    text-align: left;
}
.configurator .room .submenu a:hover {
    background: #FAFAFA;
}
.configurator .room i {
    position: absolute;
    right: 18px;
    top: 18px;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: block;
}
.configurator .room i:before {
    content: '';
    position: absolute;
    top: 6px;
    right: 8px;
    display: block;
    width: 4px;
    height: 4px;
    background: #C8C8C8;
    border-radius: 2px;
}
.configurator .room i:after {
    content: '';
    position: absolute;
    top: 12px;
    right: 8px;
    display: block;
    width: 4px;
    height: 4px;
    background: #C8C8C8;
    border-radius: 2px;
}
.configurator .room i:hover:before,
.configurator .room i:hover:after {
    background: #999;
}
    .configurator .room .row {
        padding: 8px 11px;
        position: relative;
        margin: 0 0 8px;
        cursor: pointer;
    }
    .configurator .room .delete-row {
        position: absolute;
        width: 20px;
        height: 20px;
        display: none;
        text-align: center;
        line-height: 14px;
        font-size: 30px;
        box-sizing: border-box;
        color: red;
        border-radius: 50%;
        right: 11px;
        top: calc(50% - 10px);
    }
    .configurator .room .row:hover .delete-row {
        display: block;
    }
    .configurator .room.closed .row {
        display: none;
    }
    .configurator .room .row.draft {
        background: #FAFAFA;
    }
    .configurator .room .row.active {
        background: rgba(134, 215, 179, 0.1);
    }
    .configurator .room .row img {
        display: block;
        float: left;
        width: calc(20% - 2px);
        margin-left: 2.5px;
        border: 1px solid #999;
        border-radius: 3px;
        box-sizing: border-box;
        position: relative;
        z-index: 2;
    }
    .configurator .room .row img:first-child {
        margin-left: 0;
    }
    .configurator .room .row .m-cont {
        margin: 0 30px 0 40px;
        width: calc(100% - 70px);
        padding: 3px;
        box-sizing: border-box;
        position: relative;
    }
    .configurator .room .row .m-cont:after {
        content: '';
        display: block;
        clear: both;
    }
    .configurator .room .row .m-cont:before {
        content: '';
        display: block;
        height: 100%;
        background: linear-gradient(180deg, #d3d3d2 0%, #babbb9 100%);
        border: 1px solid #AAA;
        border-radius: 3px;
        top: 0;
        left: 0;
        position: absolute;
        box-sizing: border-box;
    }
    .configurator .room .row .m5:before {
        width: 100%;
    }
    .configurator .room .row .m4:before {
        width: calc(80% + 1px);
    }
    .configurator .room .row .m3:before {
        width: calc(60% + 1px);
    }
    .configurator .room .row .m2:before {
        width: calc(40% + 2px);
    }
    .configurator .room .row .m1:before {
        width: calc(20% + 3px);
    }
    .configurator .room .row span {
        color: #B3B9C5;
        font-size: 12px;
        width: 20px;
        height: 20px;
        border: 1px solid #B3B9C5;
        display: block;
        text-align: center;
        line-height: 18px;
        box-sizing: border-box;
        border-radius: 50%;
        position: absolute;
        left: 11px;
        top: calc(50% - 10px);
    }
    .configurator .room .row.active span {
        color: #5DAF8B;
        border-color: #5DAF8B;
    }
    .configurator .room .row.draft span {
        color: #777;
        background: #E2E2E2;
        border-color: #AAA;
    }

.configurator .favorites .view-all {
    background: url(../images/green-arrow.svg) no-repeat right center;
    background-size: 18px;
    padding-right: 30px;
    color: #5DAF8B;
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
    line-height: 18px;
    position: absolute;
    top: 30px;
    right: 24px;
}
.configurator .favorites .m-cont {
    padding: 3px;
    border-radius: 3px;
    background: #CCC;
    background: linear-gradient(180deg, #d3d3d2 0%, #babbb9 100%);
    border: 1px solid #AAA;
    display: inline-block;
}
.configurator .favorites .m-cont:after {
    content: '';
    clear: both;
    display: block;
}
.configurator .favorites .list {
    margin: 0 80px;
}
.configurator .favorites .owl-stage-outer {
    overflow: hidden;
}
.configurator .favorites .owl-prev {
    text-indent: -9999px;
    position: absolute;
    top: 130px;
    left: 42px;
    width: 30px;
    height: 30px;
    transform: rotate(-45deg);
    cursor: pointer;
    overflow: hidden;
}
.configurator .favorites .owl-prev:after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: #D3D6DC;
    position: absolute;
    top: 10px;
    left: 10px;
}
.configurator .favorites .owl-prev:before {
    content: '';
    display: block;
    width: 2px;
    height: 20px;
    background: #D3D6DC;
    position: absolute;
    top: 10px;
    left: 10px;
}
.configurator .favorites .owl-stage:after {
    content: '';
    display: block;
    clear: both;
}
.configurator .favorites .owl-item {
    float: left;
    cursor: pointer;
}
.configurator .favorites .owl-next {
    text-indent: -9999px;
    position: absolute;
    top: 130px;
    right: 42px;
    width: 30px;
    height: 30px;
    transform: rotate(135deg);
    cursor: pointer;
    overflow: hidden;
}
.configurator .favorites .owl-next:after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: #D3D6DC;
    position: absolute;
    top: 10px;
    left: 10px;
}
.configurator .favorites .owl-next:before {
    content: '';
    display: block;
    width: 2px;
    height: 20px;
    background: #D3D6DC;
    position: absolute;
    top: 10px;
    left: 10px;
}
.configurator .favorites .item {
    border: 1px solid #E5E5E5;
    box-sizing: border-box;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    padding: 16px 8px;
}
.configurator .favorites span {
    display: block;
    color: #111213;
    text-align: center;
    line-height: 24px;
    margin-top: 8px;
    font-size: 14px;
}
.configurator .favorites img {
    display: block;
    float: left;
    width: 39px;
    margin-left: 3px;
    border: 1px solid #999;
    border-radius: 3px;
}
.configurator .favorites img:first-child {
    margin-left: 0;
}

.pop-up {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: green;
    color: #FFF;
    font-size: 16px;
    font-weight: 300;
}
.pop-up.success {
    background: rgba(0, 128, 0, .7);
}
.pop-up.error {
    background: rgba(255, 0, 0, .7);
}

.empty-editor, .empty-room {
    display: none;
}
@media screen and (max-width: 1370px) {
    .configurator h2 {
        font-size: 22px;
    }
    .configurator .m-list .m-element {
        padding: 11px 5px;
    }
}