@eye-open-color: #2184be;
@eye-close-color: #C11B17;
@layer-background: rgba(255, 255, 255, 0.7);

.module-layer {
    position: relative;
    margin-top: 1%;
    background: @layer-background;
    margin-bottom: 3%;
    padding-bottom: 2%;
}

.packages-lists {
    display: inline-block;
    border: 1px solid #000;
    border-radius: 5px;
    width: 95%;
    height: 200px;
    overflow-y: overlay;
}

.dropzone-packages {
    display: inline-block;
    width: 100%;
    padding: 0 2%;
}

.packages-countries {
    display: block;
    font-size: 110%;
    padding-left: 1%;
    padding-top: 1%;
}

.allowed-drop-zone {
    background: rgba(223, 240, 216, 0.5);
    border: 3px dashed #000;
}

.create-packages-name-description {
    display: block;
    padding-left: 1%;
    padding-top: 1%;

    .create-package-name,
    .create-package-reference {
        display: inline-block;
        margin-top: 1%;
        padding-left: 1%;
    }

    .create-package-description {
        display: inline-block;
        margin-top: 1%;
        padding-left: 1%;
    }

    .package-label {
        vertical-align: top;
        display: inline-block;
    }
}

#upload-image-cdn-container {
    .upload-image-title {
        text-align: center;
        padding-bottom: 1.5%;
    }

    .drop-box {
        margin-top: 2%;
        color: #337ab7;
        border: 5px dashed #337ab7;
        border-radius: 10px;
        text-align: center;
        vertical-align: middle;
        font-size: 130%;
        padding: 6% 0;
        cursor: pointer;
    }

    .dragover {
        border: 5px dashed #4CC417;
    }

    .image-characteristic {
        padding-bottom: 1%;
    }

    .use-same-image-for-market {
        padding-left: 2%;
    }

    .image-url-label {
        font-weight: bold;
    }
}

.images-from-cdn-container {
    border: 1px solid #000;
    border-radius: 5px;
    height: 400px;
    overflow: auto;
    padding: 1%;
    white-space: nowrap;
}

.display-small-image {
    padding-bottom: 2%;
    display: inline-block;
}

.image-from-cdn {
    width: 60px;
    height: 39px;
}

.cover-image-from-cdn {
    width: 100px;
    height: 75px;
}

.url-from-cdn {
    display: inline-block;
    white-space: nowrap;
}

.cover-image-url-text {
    margin: 2% 0;
}

.image-label {
    padding-left: 0;
}

.create-package-title {
    display: inline-block;
    width: 35%;
    margin-bottom: 1%;
    font-weight: bold;
    font-size: 120%;
}

.steps-container {
    position: relative;
}

.draggable-icon {
    color: #3c763d;
    left: 28%;
    top: 50%;
    font-size: 200%;
    text-align: center;
    position: absolute;
}

.draggable-icon-steps {
    color: #3c763d;
    left: 34%;
    top: 50%;
    font-size: 200%;
    text-align: center;
    position: absolute;
}

.draggable-icon-template {
    color: #3c763d;
    right: 0;
    top: 45%;
    font-size: 200%;
    text-align: center;
}

.create-packages-from-template-container {
    height: 400px;
    overflow: hidden;
}

#product-info-fields {
    border: 1px solid #000;
    border-radius: 5px;
    padding: 5% 0;
    min-height: 300px;
    font-size: 90%;
}

.product-info-label {
    display: inline-block;
    width: 40%;
    margin-left: 2%;
    font-weight: bold;
}

.product-info-text {
    display: inline-block;
    width: 55%;
}

.create-packages {
    vertical-align: top;
}

.create-package-list {
    display: inline-block;
    width: 95%;
    border: 1px solid #000;
    border-radius: 5px;
    height: 400px;
    overflow-y: overlay;
}

.create-package-list-from-template {
    display: inline-block;
    width: 95%;
    border: 1px solid #000;
    border-radius: 5px;
    overflow-y: scroll;
}

.create-package-row {
    width: 100%;
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    cursor: pointer;
}

.not-available-prdocut {
    background: rgba(255, 166, 47, 0.3);
}

.create-package-products-display {
    display: block;
    font-size: 100%;

    .create-package-header {
        display: inline;
        width: 25%;
        font-weight: bold;
    }

    .create-package-product {
        width: 70%;
        display: inline;
    }
}

.create-package-products-info-display {
    display: inline;
    width: 100%;
    font-size: 90%;

    .create-package-header {
        display: inline;
        width: 15%;
        font-weight: bold;
    }

    .create-package-product-info {
        display: inline;
        width: 30%;
    }
}

.product-quantity-box {
    font-size: 90%;

    .product-quantity {
        width: 20%;
    }
}

.create-package-row:hover {
    background: rgba(223, 240, 216, 0.5);
}

.create-package-row .dndDraggingSource {
    display: none;
}

.create-package-row .dndPlaceholder {
    background-color: #ddd;
    display: block;
}

.create-package-row.selected {
    background-color: #dff0d8;
    color: #3c763d;
}

.add-products-by-template {
    width: 90%;
    min-height: 40px;
    margin: 2%;
    border: 1px solid #ddd;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.real-product-in-package {
    width: 95%;
    border: 1px solid #ddd;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    margin: 2%;
    padding: 1%;
}

#packages-list {
    overflow: hidden;
}

#add-installation-companies-container {
    margin-top: 1%;

    .installation-companies-list {
        .packages-lists;
    }

    .installation-companies-list-title {
        font-weight: bold;
        font-size: 120%;
    }

    .create-packages-lists-container {
        display: inline-block;
    }
}

#edit-package-installation-companies-container {
    margin-top: 1%;

    .installation-companies-list {
        .packages-lists;
    }

    .installation-companies-list-title {
        font-weight: bold;
        font-size: 120%;
    }

    .create-packages-lists-container {
        display: inline-block;
    }
}

#create-template-packages-container {
    margin-top: 2%;
    margin-left: 1%;

    .create-packages-titles {
        margin-top: 1%;
    }
}

#create-template-draggable-icon {
    color: #3c763d;
    left: 29.5%;
    font-size: 200%;
    text-align: center;
    position: absolute;
}

.create-processes-name-description {
    padding-left: 1%;
    display: block;
    font-size: 110%;

    .add-step-label {
        cursor: pointer;
    }

    .create-processes-name {
        display: block;
        margin-top: 2%;
    }

    .create-package-name-input {
        display: inline-block;
    }

    .create-process-steps-add-button {
        margin-top: 2%;
    }
}

.create-process-notice {
    width: 98%;
    margin-left: 1%;
    margin-top: 1%;
}

.select-group {
    display: block;
    font-size: 110%;
    padding-left: 1%;
    margin-top: 1%;
}

.create-process-steps-container {
    margin-top: 2%;
    position: relative;

    .create-processes-title {
        margin-bottom: 2%;
        width: 95%;
        font-weight: bold;
        font-size: 120%;
    }

    #product-info-fields {
        border: 1px solid #000;
        border-radius: 5px;
        padding: 5% 0;
        min-height: 300px;
        font-size: 90%;
    }

    .product-info-label {
        display: inline-block;
        width: 40%;
        margin-left: 2%;
        font-weight: bold;
    }

    .product-info-text {
        display: inline-block;
        width: 55%;
    }

    .create-process-steps {
        display: inline-block;
        vertical-align: top;
        width: 35%;
    }

    #create-processes-step-dragndrop-process {
        margin-left: 10%;
    }

    .create-processes-list {
        display: inline-block;
        width: 95%;
        border: 1px solid #000;
        border-radius: 5px;
        height: 400px;
        overflow-y: auto;
        background: #FFF;
    }
}

.create-processes-row {
    width: 100%;
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    cursor: pointer;
    font-weight: bold;
}

.create-processes-row:hover {
    background: rgba(223, 240, 216, 0.5);
}

.create-processes-row .dndDraggingSource {
    display: none;
}

.create-processes-row .dndPlaceholder {
    background-color: #ddd;
    display: block;
}

.create-processes-row.selected {
    background-color: #dff0d8;
    color: #3c763d;
}

.create-processes-products-display {
    display: inline-block;
    width: 100%;
    font-size: 100%;
    padding-left: 2%;

    .create-processes-header {
        display: inline;
        width: 25%;
        font-weight: bold;
    }

    .create-processes-product {
        width: 70%;
        display: inline;
        padding-left: 2%;
    }
}

.create-processes-step-number {
    border-right: 2px solid black;
    width: 10%;
    text-align: center;
    display: inline-block;
}

.create-processes-button {
    width: 100%;
    padding-top: 1%;
    padding-bottom: 2%;
}

#edit-packages {
    .module-layer;

    #all-edit-packages-container {
        padding: 2%;
        position: relative;

        .draggable-icon {
            color: #3c763d;
            left: 29%;
            font-size: 200%;
            text-align: center;
            position: absolute;
        }
    }

    #edit-package-templates-container {
        padding: 2%;
        position: relative;
    }

    .draggable-icon {
        left: 29%;
    }

    .edit-buttons {
        padding-left: 2%;
        padding-bottom: 2%;
    }

    .reset-button {
        min-width: 20%;
    }

    .edit-package-description-text {
        height: 200px;
    }

    .edit-packages {
        position: relative;
    }
}

.view-package-process-layer {
    .module-layer;
    padding: 1%;

    .search-process-label {
        display: inline-block;
        margin-left: 2%;
    }

    .search-process-input {
        margin-left: 2%;
        width: 30%;
    }

    .search-package-process-button {
        margin-left: 2%;
    }

    .glyphicon-eye-open {
        color: @eye-open-color;
    }

    .glyphicon-eye-close {
        color: @eye-close-color;
    }

    .package-layer {
        border-bottom: 2px solid rgb(59, 185, 255);
        padding-bottom: 1%;
    }

    .process-info-container {
        margin-top: 1%;
        vertical-align: top;
        border: 2px solid #000;
        border-radius: 5px;
        padding: 2%;
    }

    .package-name {
        display: inline-block;
        width: 96%;
        padding: 2%;
        text-align: center;
        font-weight: bold;
        font-size: 120%;
    }

    .process-name {
        display: inline-block;
        width: 96%;
        padding: 2%;
        text-align: center;
        font-weight: bold;
    }

    .step-number {
        width: 10%;
        display: inline-block;
        text-align: center;
        font-weight: bold;
    }

    .process-step {
        width: 70%;
        display: inline;
        border-left: 1px solid #000;
        padding-top: 2%;
        padding-bottom: 2%;
        padding-left: 2%;
    }

    .process-steps {
        height: 30em;
        overflow-x: auto;
    }

    .package-process-row {
        width: 100%;
        background-color: #fff;
        border-top: 1px solid #ddd;
        display: block;
        padding: 2%;
    }

    .package-process-details {
        float: left;
    }
}

#set-package-price-layer {
    .module-layer;

    .product-category-title {
        margin: 5px 0;
        font-weight: bold;
    }
}

#packages-layer {
    .module-layer;

    td.info-control {
        position: relative;
    }

    td.info-control:before {
        left: 9px;
        height: 14px;
        width: 14px;
        display: block;
        position: absolute;
        color: white;
        border: 2px solid white;
        border-radius: 14px;
        box-shadow: 0 0 3px #444;
        box-sizing: content-box;
        text-align: center;
        font-family: 'Courier New', Courier, monospace;
        line-height: 14px;
        content: '+';
        background-color: #31b131;
        cursor: pointer;
    }

    tr.shown td.info-control:before {
        content: '-';
        background-color: #d33333;
        cursor: pointer;
    }

    .packages-details-layer {
        padding: 1% 0;
    }

    .package-header {
        font-weight: bold;
        text-align: center;
    }

    .big-title {
        font-weight: bold;
        font-size: 110%;
        padding: 2% 0;
    }

    .small-title {
        font-weight: bold;
        padding: 5px 0;
    }

    .warning-message {
        font-size: 90%;
    }

    .warning-icon {
        cursor: pointer;
        margin-left: 2%;
    }

    .edit-icon {
        font-size: 120%;
        cursor: pointer;
        margin-left: 5%;
    }

    .small-price-icon {
        font-size: 60%;
    }

    .set-price-text {
        color: #4863A0;
    }

    .edit-price-text {
        color: #437C17;
    }

    .unavailable-products {
        color: #a94442;
    }

    .margin-exceded {
        display: inline-block;
        color: #FFA62F;
    }
}

#my-packages-layer {
    .module-layer;

    .unavailable-products {
        display: inline-block;
        color: #a94442;
    }

    .margin-exceded {
        display: inline-block;
        color: #FFA62F;
    }

    td.info-control {
        position: relative;
    }

    td.info-control:before {
        left: 9px;
        height: 14px;
        width: 14px;
        display: block;
        position: absolute;
        color: white;
        border: 2px solid white;
        border-radius: 14px;
        box-shadow: 0 0 3px #444;
        box-sizing: content-box;
        text-align: center;
        font-family: 'Courier New', Courier, monospace;
        line-height: 14px;
        content: '+';
        background-color: #31b131;
        cursor: pointer;
    }

    tr.shown td.info-control:before {
        content: '-';
        background-color: #d33333;
        cursor: pointer;
    }

    .customer-name {
        font-weight: bold;
        font-size: 140%;
    }

    .comission-headers {
        font-weight: bold;
        padding-top: 1%;
    }

    .price-group {
        padding-top: 2%;
        border-bottom: 2px solid rgb(59, 185, 255);
    }

    .price-group:nth-child(odd) {
        background: rgba(59, 185, 255, 0.1);
    }

    .pay-type {
        font-weight: bold;
    }

    .price-col {
        display: inline-block;
        width: 15%;
    }

    .price-col-small {
        display: inline-block;
        width: 15%;
    }

    .no-icon {
        display: none;
    }

    .glyphicon-eye-open {
        color: @eye-open-color;
    }

    .glyphicon-eye-close {
        color: @eye-close-color;
    }

    .packages-details-layer {
        padding: 1% 0;
    }

    .package-header {
        font-weight: bold;
        text-align: center;
    }

    .big-title {
        font-weight: bold;
        font-size: 110%;
        padding: 2% 0;
    }

    .small-title {
        font-weight: bold;
        padding: 5px 0;
    }

    .warning-message {
        font-size: 90%;
    }

    .warning-icon {
        cursor: pointer;
        margin-left: 2%;
    }

    .edit-icon {
        font-size: 120%;
        cursor: pointer;
        margin-left: 5%;
    }
}

#select-packages-steps {
    .step {
        display: inline-block;
        padding: 1%;
        border-radius: 5px;
        cursor: default;
    }

    .active-step {
        background: #2184be;
        color: #FFF;
    }

    .inactive-step {
        background: #eee;
        color: #aaa;
    }

    .done-step {
        background: #9dc8e2;
        color: #FFF;
    }

    .step-link {
        display: inline-block;
        background: #2184be;
        width: 30px;
        height: 2px;
    }
}

#choose-customers {
    max-height: 500px;

    .customer-select-layer {
        max-height: 40rem;
        overflow-y: auto;
    }

    .customer-row {
        padding: 3%;
        border: 1px solid #000;
        cursor: pointer;
    }

    .customer-row:hover {
        background: rgba(59, 185, 255, 1);
    }

    .selected-customer {
        background: rgba(59, 185, 255, 0.6);
    }

    .not-selected {
        background: #FFF;
    }

    .select-customer-for-pricing {
        width: 30rem;
        margin-bottom: 3rem;
    }
}

#action-buttons {
    margin-top: 2%;
    margin-bottom: 10%;

    .prev-btn {
        float: right;
        margin-right: 3%;
    }

    .next-btn {
        float: right;
        margin-right: 5%;
    }

    .save-btn {
        float: right;
        margin-right: 5%;
    }
}

#select-package-layer {
    background: @layer-background;
}

#select-packages-all {
    .product-category-title {
        margin: 5px 0;
        font-weight: bold;
    }

    .customer-name {
        font-weight: bold;
        font-size: 140%;
    }

    .comission-headers {
        font-weight: bold;
        margin-bottom: 2%;
    }

    .comissions-row {
        margin-bottom: 1%;
        padding-bottom: 1%;
        border-bottom: 2px solid rgb(59, 185, 255);
    }

    .pay-type {
        font-weight: bold;
    }

    .pay-group:nth-child(odd) {
        background: rgba(59, 185, 255, 0.2);
    }

    .comission-header {
        font-weight: bold;
        margin-bottom: 2%;
    }

    .pay-comission-row {
        margin-top: 3px;
        padding-bottom: 5px;
    }

    .pay-comission-col-small {
        vertical-align: top;
        display: inline-block;
    }

    .visible-glyph {
        cursor: pointer;
        font-size: 140%;
    }

    .glyphicon-eye-open {
        color: @eye-open-color;
    }

    .glyphicon-eye-close {
        color: @eye-close-color;
    }

    .recurent-box {
        position: relative;
    }

    .recurent-tip {
        position: absolute;
        display: block;
        z-index: 9999;
        bottom: 3.5em;
    }

    .recurent-info {
        cursor: default;
    }
}

#packages-per-pay-type {
    h3 {
        font-weight: bold;
    }

    .pay-type {
        font-size: 140%;
        font-weight: bold;
        margin: 1% 0;
    }

    .price-header {
        font-weight: bold;
    }

    .price-col {
        vertical-align: top;
    }

    .price-group {
        padding: 0 0 1% 1%;
        border-bottom: 2px solid rgb(59, 185, 255);
    }

    .price-group:nth-child(odd) {
        background: rgba(59, 185, 255, 0.1);
    }

    .price-small-group {
        margin-bottom: 1%;
    }

    .split-error {
        color: #E42217;
    }

    .btn-extra-text {
        display: none;
    }

    .pay-type-btn:hover .btn-extra-text {
        display: inline-block;
    }

    .pay-type-selection {
        margin: 1% 0;
        width: 50%;
    }

    .price-checkbox {
        cursor: pointer;
        width: 15px;
        height: 15px;
    }
}

#total-costs {
    margin-top: 1%;
    margin-bottom: 1%;

    .price-header {
        font-weight: bold;
    }

    h3 {
        font-weight: bold;
    }
}

#comission-split {
    margin-top: 1%;
    margin-bottom: 3%;

    h3 {
        font-weight: bold;
        margin-bottom: 3%;
    }

    .user-layer {
        display: inline-block;
        width: 12%;
        text-align: center;
        vertical-align: top;
        font-weight: bold;
    }

    .user-icon {
        font-size: 220%;
        color: #337ab7;
    }

    .commission-range-layer {
        display: inline-block;
        width: 40%;
    }

    .split-percent-sign {
        font-size: 130%;
        font-weight: bold;
    }

    .range-input {
        display: inline-block;
        width: 50%;
        margin-left: 5%;
    }

    .small-input {
        display: inline-block;
        width: 15%;
    }
}

#installation-products-container {
    margin-top: 1%;
    position: relative;

    .create-packages-from-template-installation-container {
        height: 200px;
        overflow: hidden;
    }

    .installation-list {
        display: inline-block;
        width: 95%;
        border: 1px solid #000;
        border-radius: 5px;
        min-height: 200px;
        overflow-y: overlay;
    }
}

#create-package-from-template-container {
    min-height: 200px;
    position: relative;

    .arrows-icon-without-virtual {
        margin-top: 6%;
    }

    .disable-installation {
        background: #ccc;
    }

    .list-by-category {
        display: inline-block;
        width: 95%;
        border: 1px solid #000;
        border-radius: 5px;
        overflow: overlay;
        height: 400px;
    }

    .add-products-by-template {
        width: 90%;
        min-height: 40px;
        margin: 2%;
        border: 1px solid #ddd;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
    }

    .add-additional-products-by-template {
        width: 90%;
        min-height: 40px;
        margin: 2%;
        border: 1px dashed #ddd;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        text-align: center;
        font-size: 120%;
        font-weight: bold;
        color: #ddd;
    }

    .create-packages-from-template-container {
        height: 300px;
        overflow: hidden;
    }

    .products-per-category-container {
        margin-top: 2%;
    }
}

.create-from-template-btn {
    padding-top: 2%;
    margin-bottom: 2%;
}

#add-virtual-products-container {
    margin-top: 1%;
    width: 100%;
    border-top: 2px solid rgb(59, 185, 255);
    border-bottom: 2px solid rgb(59, 185, 255);
    background: rgba(59, 185, 255, 0.1);
    padding: 2% 0;
    margin-bottom: 2%;

    .label-value-pair {
        margin-bottom: 2%;
    }
}

#create-packages-container {
    min-height: 400px;
    margin-top: 2%;
    margin-left: 1%;
    position: relative;

    .products-per-category-container {
        margin-top: 2%;
    }

    .create-packages-titles {
        margin-top: 1%;
    }

    .create-packages-container {
        height: 400px;
        overflow: hidden;
    }

    .create-packages {
        vertical-align: top;
    }

    .list-by-category {
        display: inline-block;
        width: 95%;
        border: 1px solid #000;
        border-radius: 5px;
        overflow: overlay;
        height: 400px;
    }

    .create-package-description-text {
        height: 150px;
    }
}

.packages-buttons {
    display: inline;
    padding-top: 2%;
    margin-bottom: 2%;
}

#edit-package-templates {
    .module-layer;
}

#update-packages-templates-container {
    min-height: 300px;
    margin-top: 2%;
    margin-left: 1%;
    position: relative;

    .products-per-category-container {
        margin-top: 2%;
    }

    .create-packages-titles {
        margin-top: 1%;
    }

    .create-packages-container {
        height: 300px;
        overflow: hidden;
    }

    .create-packages {
        vertical-align: top;
    }

    .list-by-category {
        display: inline-block;
        width: 95%;
        border: 1px solid #000;
        border-radius: 5px;
        overflow: overlay;
        height: 300px;
    }

    .create-package-description-text {
        height: 150px;
    }
}

#create-packages {
    .module-layer;
}

#create-packages-templates {
    .module-layer;
}

#add-new-virtual-product-template {
    padding-left: 1%;
}

.arrows-icon {
    color: #3c763d;
    left: 28%;
    font-size: 200%;
    text-align: center;
    position: absolute;
    top: 50%;
}

.meeting-dates {
    margin-top: 1%;
}

#set-additional-installation-days-container {
    margin-top: 2%;
    margin-bottom: 1%;

    .days-input {
        margin-left: 1%;
    }
}

#set-additional-installation-days-from-template-container {
    margin-top: 2%;
    margin-bottom: 1%;

    .days-input {
        margin-left: 1%;
    }
}

#package-optios-layer {
    .module-layer;

    .options-header {
        padding: 1%;
        text-align: center;
        background: #337ab7;
        color: #FFF;
        font-size: 120%;
        font-weight: bold;
    }

    .options-big-container {
        height: 445px;
        overflow: hidden;
    }

    .options-container {
        border: 2px solid #337ab7;
        border-radius: 10px;
    }

    .options-list {
        min-height: 400px;
        height: 400px;
        overflow-x: auto;
        overflow-y: scroll;
    }

    .package-layer {
        padding: 1%;
        border-bottom: 2px solid #337ab7;
        cursor: pointer;
    }

    .option-row {
        padding: 2% 1%;
        border-bottom: 2px solid #337ab7;
        cursor: move;
    }

    .option-row:hover,
    .package-layer:hover {
        background: rgba(59, 185, 255, 0.5);
    }

    .selected-package {
        background: rgba(59, 185, 255, 1);
    }

    .option-group {
        margin: 2%;
        padding-top: 2%;
        border: 2px solid #337ab7;
        min-height: 100px;
    }

    .option-group-name {
        padding-left: 2%;
        font-weight: bold;
        font-size: 110%;
        padding-bottom: 2%;
        border-bottom: 2px solid #337ab7;
    }

    .glyphicon-pencil {
        cursor: pointer;
    }

    .add-btn {
        margin: 2%;
    }

    .remove-group {
        float: right;
        font-size: 70%;
        margin-right: 2px;
    }

    .default-value {
        display: inline-block;
        float: right;
        font-size: 70%;
    }

    .default-btn {
        float: right;
        font-size: 70%;
    }
}