@order-status-open-color: #045FB4;
@order-status-in-progress-color: #FF8040;
@order-status-production-color: #4CC417;
@order-status-canceled-color: #F70D1A;
@order-status-end-of-life-color: #4CC417;

.module-layer {
    position: relative;
    margin-top: 1%;
    background: rgba(255, 255, 255, 0.8);
    margin-bottom: 3%;
    padding-bottom: 1%;
}

#orders-layer {
    .module-layer;
}

#orders-hostory-layer {
    .module-layer;
}

#order-chose-process {
    .order-available-processes-layer{
        max-height: 45rem;
        overflow-y: auto;
    }
}

#orders-module {
    .order-status {
        font-size: 110%;
        font-weight: bold;
        display: inline-block;
    }

    .order-status-open {
        .order-status;
        color: @order-status-open-color;
    }

    .order-status-no-process {
        .order-status;
        color: @order-status-open-color;
    }

    .order-status-in-progress {
        .order-status;
        color: @order-status-in-progress-color;
    }

    .order-status-production {
        .order-status;
        color: @order-status-production-color;
    }

    .order-status-canceled {
        .order-status;
        color: @order-status-canceled-color;
    }

    .order-status-processing {
        .order-status;
        color: @order-status-in-progress-color;
    }

    .order-status-end-of-life {
        .order-status;
        color: @order-status-end-of-life-color;
    }

    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;
    }

    .order-details {
        font-size: 90%;
    }

    .package-item-info {
        display: inline-block;
        width: 75%;
        margin-left: 5%;
    }

    .package-item-status {
        width: 19%;
        font-size: 200%;
        display: inline-block;
        vertical-align: top;
        text-align: center;
    }

    .detailed-status {
        width: 100%;
        font-size: 110%;
        font-weight: bold;
        display: inline-block;
        color: #FFF;
        text-align: center;
    }

    .detailed-status-open {
        .detailed-status;
        background: @order-status-open-color;
    }

    .detailed-status-no-process {
        .detailed-status;
        background: @order-status-open-color;
    }

    .detailed-status-in-progress {
        .detailed-status;
        background: @order-status-in-progress-color;
    }

    .detailed-status-production {
        .detailed-status;
        background: @order-status-production-color;
    }

    .detailed-status-canceled {
        .detailed-status;
        background: @order-status-canceled-color;
    }

    .detailed-status-end-of-life {
        .detailed-status;
        background: @order-status-end-of-life-color;
    }

    .order-details-item {
        border: 1px solid #000;
        border-radius: 5px;
        margin-bottom: 2%;
        margin-radius: 5px;
    }

    .package-item-name {
        font-size: 120%;
        font-weight: bold;
        text-align: center;
        padding: 2% 0;
    }

    .order-details-total {
        text-align: right;
    }

    h5 {
        font-weight: bold;
        font-size: 110%;
    }

    .order-details-label {
        font-weight: bold;
    }

    .send-support-mail-details {
        display: inline-block;
    }

    .order-number-icon {
        font-size: 120%;
        font-weight: bold;
    }

    .user-header {
        font-weight: bold;
        font-size: 120%;
    }

    .order-cl-customer-display {
        display: block;
    }

    .acceptance-button-layer {
        font-size: 120%;
        padding-top: 2%;
    }
}

.assign-broker-layer {
    padding: 5px 0 5px 5px;
    border-radius: 5px;

    .assigned-broker {
        display: inline-block;
        width: 78%;
    }

    .assign-icon {
        display: inline-block;
        width: 15%;
        margin-left: 3%;
        margin-top: 3px;
        cursor: pointer;
        font-size: 120%;
        text-align: center;
        color: rgba(59, 185, 255, 1);
    }

    .assign-buttons {
        width: 50%;
        margin-left: 50%;
        padding: 2% 0;
        text-align: right;
    }

    .assign-btn {
        display: inline-block;
        padding: 7px;
        margin-right: 5px;
        background: rgba(59, 185, 255, 1);
        border-radius: 5px;
        color: #FFF;
        cursor: pointer;
    }

    .assign-btn:hover {
        background: rgba(108, 196, 23, 1);
    }
}

#mail-support-container {
    padding: 2% 0;

    .mail-support-text {
        height: 100px;
        max-width: 100%;
    }
}

.assign-broker-layer:hover {
    border: 1px solid rgba(59, 185, 255, 0.5);
}

#order-cancel {
    margin-top: 1%;
    margin-bottom: 1%;
}

#change-orders-steps-module {
    .module-layer;
}

#change-orders-steps-layer {
    .order-box {
        display: inline-block;
        width: 80%;
    }

    .terms-layer {
        text-align: center;
    }

    #selected-broker {
        width: 98%;
    }

    .add-order-comment{
        margin-top: 1%;
    }

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

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

    .document-layer {
        border-bottom: 2px solid #337ab7;
        padding-bottom: 2%;
        margin-bottom: 2%;
        margin-top: 3%;
    }

    .remove-document {
        display: inline-block;
        float: right;
    }

    .remove-document-btn {
        color: #FF0000;
        cursor: pointer;
    }

    .order-step-description {
        font-size: 120%;
        margin-top: 2%;
        margin-bottom: 2%;
    }

    .order-info-toggle {
        font-size: 80%;
        cursor: pointer;
    }

    .step-order-status {
        display: inline-block;
        font-size: 80%;
    }

    .glyphicon-plus-sign {
        color: #31b131;
    }

    .glyphicon-minus-sign {
        color: #d33333;
    }

    .order-seps-more {
        width: 100%;
    }

    .order-seps-more-icon {
        margin-left: 4%;
    }

    .ordere-step-show-all-icon {
        cursor: pointer;
    }

    .hide-steps {
        margin-left: 4%;
        display: block;
    }

    .order-description {
        border: 1px solid #000;
        border-radius: 5px;
        padding: 1%;
        display: none;
    }

    .order-info-container {
        vertical-align: top;
    }

    .order-info-item {
        border: 1px solid #000;
        border-radius: 5px;
        margin-bottom: 2%;
        margin-radius: 5px;
        padding-bottom: 2%;

        .order-info-item-name {
            font-size: 120%;
            font-weight: bold;
            text-align: center;
            padding: 2% 0;
        }
    }

    .order-info-item-info {
        display: inline-block;
        width: 75%;
        margin-left: 5%;
    }

    .order-info-item-status {
        width: 19%;
        font-size: 200%;
        display: inline-block;
        vertical-align: top;
        text-align: center;
    }

    .order-big-label {
        font-size: 110%;
        font-weight: bold;
        margin-bottom: 2%;
    }

    .order-label {
        font-size: 110%;
        display: block;
        font-weight: bold;
        padding: 8px 0 5px;
    }

    .my-selection {
        font-weight: bold;
        color: #31708f;
    }

    .prices-info {
        padding: 5px;
    }

    .order-category {
        font-weight: bold;
    }

    .order-step-layer {
        position: relative;
        width: 100%;
    }

    .order-available-process {
        width: 100%;
        margin: 1% 0;
    }

    .order-process-name {
        display: inline-block;
        width: 65%;
        padding-left: 2%;
    }

    .order-process-chose-btn {
        display: inline-block;
        width: 30%;
        margin-left: 2%;
    }

    .order-comments {
        margin-top: 1%;
        border: 1px solid #000;
        border-radius: 5px;
        padding: 0 2% 5%;
        vertical-align: top;
    }

    .package-steps {
        width: 100%;
        display: inline-block;
        border: 1px solid #000;
        border-radius: 5px;
        padding: 0 2% 2%;
        vertical-align: top;
        margin-top: 1%;
    }

    .outside-process-steps {
        display: inline-block;
        background: rgba(59, 185, 255, 0.3);
        border: 1px solid #000;
        border-radius: 5px;
        font-weight: bold;
        margin-top: 3%;
    }

    .order-step {
        display: inline-block;
        border: 1px solid #000;
        border-radius: 5px;
        font-weight: bold;
        font-size: 90%;
    }

    .order-step-link {
        display: block;
        width: 2px;
        height: 15px;
        position: relative;
        background: #000;
        margin-left: 4%;
    }

    .order-step-number {
        display: inline-block;
        padding: 5px;
        text-align: center;
        vertical-align: top;
        font-weight: bold;
        text-align: center;
        font-size: 130%;
        margin-top: 1%;
    }

    .order-step-info {
        display: inline-block;
        width: 90%;
        padding-left: 2%;
        padding-top: 1%;
        padding-bottom: 1%;
        border-left: 1px solid #000;
    }

    .order-step-status-text {
        display: inline-block;
        position: relative;
        float: right;
        margin-right: 2%;
        font-size: 70%;
    }

    .order-step-full-description {
        padding: 2% 0;
        margin-bottom: 4%;
        border-top: 2px dashed #000;
        border-bottom: 2px dashed #000;
        font-weight: normal;
        font-size: 90%;
    }

    .order-step-description-display {
        display: none;
    }

    .order-step-next {
        display: inline-block;
        vertical-align: top;
        margin-top: 15%;
    }

    .step-done {
        background: rgba(76, 196, 23, 0.3);
    }

    .step-in-progress {
        background: rgba(59, 185, 255, 0.3);
    }

    .step-in-future {
        background: rgba(209, 208, 206, 0.3);
        opacity: 0.6;
    }

    .order-step-estimation {
        font-size: 90%;
    }

    .order-added-comments{
        padding: 1%;
    }

    .order-comment-date {
        display: inline-block;
        width: 80%;
        padding: 2% 3%;
        margin-bottom: 2%;
    }

    .order-comment-label {
        font-weight: bold;
        display: block;
    }

    .order-comment-layer,
    .order-step-comment {
        font-size: 90%;
        margin-top: 2%;
        margin-bottom: 2%;
        padding-bottom: 2%;
        font-weight: normal;
        border-bottom: 1px dashed #000;
    }

    .order-step-comment-textarea {
        display: inline-block;
        font-size: 90%;
        margin-top: 2%;
        font-weight: normal;
        max-width: 90%;
    }

    .comment-glyphicon {
        margin-right: 2%;
        vertical-align: top;
        float: right;
        cursor: pointer;
        font-size: 120%;
    }

    .glyphicon-eye-open {
        color: #2184be;
    }

    .glyphicon-eye-close {
        color: #C11B17;
    }

    .extra-action-layer {
        padding: 7% 0 1%;
    }

    .supplier-schedule-installation-container {
        padding-left: 1%;
    }
}

.next-step-disabled {
    background-color: #D3D3D3;
    cursor: default;
}

#validate-questionaire {
    a {
        text-decoration: none;
    }

    .document-name{
        font-size: 100%;
    }

    .document-status {
        display: inline-block;
        font-size: 100%;
        font-weight: bold;
        margin-left: 3%;
        margin-top: 1%;
    }

    .validation-buttons {
        display: inline-block;
        float: right;
    }

    .invalid {
        color: #d58512;
    }

    .validated {
        color: #398439;
        font-size: 120%;
    }

    .invalid-questionaire-comment-container {
        margin: 2% 0 0 2%;
    }

    .invalid-questionaire-text {
        max-width: 100%;
        margin-bottom: 1%;
    }

    .save-invalid-doc-btn {
        float: right;
        margin-right: 4%;
    }

    .reason-comment {
        font-size: 110%;
    }
}

#procuremnet-extra-action {
    .supplier-layer {
        border-bottom: 2px solid #337ab7;
        padding-bottom: 2%;
        margin-bottom: 2%;
    }

    .supplier-header {
        font-size: 130%;
        font-weight: bold;
        margin: 1% 0;
    }

    .product-input {
        width: 100%;
    }

    .glyphicon {
        font-weight: bold;
    }

    .supplier-bids{
        margin-top: 1rem;
    }
}

.delivery-dates-container {
    .additional-procurement-header {
        text-align: center;
    }

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

    .supplier-header {
        font-size: 130%;
        font-weight: bold;
        margin: 1% 0;
    }

    .final-dates-layer {
        border-bottom: 2px solid #337ab7;
        margin-top: 3%;
        padding: 1% 0;
    }

    .final-dates-layer-cl {
        border-bottom: 2px solid #337ab7;
        margin-top: 1%;
        font-size: 120%;
        padding: 1% 0;
    }

    .saveTrakingBtn {
        font-size: 80%;
    }

    .traking-layer {
        margin-top: 1%;
        border-top: 2px solid #337ab7;
    }

    .glyphicon {
        font-weight: bold;
    }

    .glyphicon-ok {
        color: #398439;
    }

    .earliest-installation-date-layer {
        margin-top: 2%;
        padding-bottom: 2%;
        font-size: 110%;
    }

    .delivery-dates-header {
        padding-bottom: 2%;
        text-align: center;
    }

    .traking-layer {
        padding: 1%;
        border: 1px dashed #337ab7;
    }

    .save-traking-btn {
        float: right;
    }

    .remove-date-btn {
        cursor: pointer;
        color: #E42217;
    }

    .display-tracking-info {
        border-bottom: 2px solid #337ab7;
        padding-top: 1%;
        padding-bottom: 1%;
    }

    .date-input{
        width: 75%;
    }

    .remove-estiamted, .remove-confirmed {
        cursor: pointer;
        color: red;
    }

    .edit-date {
        cursor: pointer;
    }

    .display-date {
        width: 55%;
        display: inline-block;
    }

    .remove-date-icon-container {
        display: inline-block;
    }
}

#set-delivery-dates-container {
    .delivery-dates-container;
}

#show-delivery-dates-cl-container {
    .delivery-dates-container;
}

#installation-scheduler-container {
    .installation-company-disabled {
        background: #dddddd;
    }

    .additional-procurement-header {
        text-align: center;
    }

    .set-installation-dates {
        padding: 0 0 2% 1%;
    }

    .show-installation-dates {
        padding: 2% 0 2% 1%;
    }

    .add-new-date {
        padding-top: 2%;
        padding-bottom: 1%;
    }

    .add-new-date-btn {
        padding-top: 2%;
    }

    .add-new-traking-btn {
        padding-top: 2%;
    }

    .earliest-installation-date-layer {
        padding-top: 2%;
    }

    .change-installation-btn {
        cursor: pointer;
        padding-bottom: 3%;
        text-align: center;
    }
}

#propose-installation-dates {
    .confirmation-proposed {
        color: #800080;
    }

    .confirmation-accepted {
        color: #398439;
    }

    .confirmation-declined {
        color: #E42217;
    }

    .confirmation-canceled {
        color: #E42217;
    }

    .confirmation-invalid {
        color: #E42217;
    }

    .date-row {
        padding-top: 1%;
        padding-left: 5%;
        padding-bottom: 1%;
    }

    .installation-date-proposed {
        font-size: 130%;
    }

    .installation-dates-history {
        padding-top: 1%;
        padding-bottom: 1%;
        border-bottom: 2px solid #337ab7;
    }

    .display-dates-history {
        cursor: pointer;
    }

    .show-history-label {
        padding-top: 1%
    }

    .dates-info-btn {
        color: #337ab7;
        cursor: pointer;
    }
}

#orders-steps-schedule {
    .chose-scheduled-date-layer {
        margin-top: 2%;
        border-top: 2px solid #337ab7;
        padding-top: 1%;
    }

    .confirmation-pending {
        color: #800080;
    }

    .confirmation-accepted {
        color: #398439;
    }

    .confirmation-declined {
        color: #E42217;
    }

    .date-row {
        padding: 1% 0;
    }

    .schedule-date {
        font-size: 130%;
    }
}

#customer-acceptance-extra-action {
    .accepted {
        color: #398439;
        margin-bottom: 1%;
    }

    .not-accepted {
        color: #800080;
        margin-bottom: 1%;
    }

    .declined {
        color: #E42217;
        margin-bottom: 1%;
    }

    .decline-installation-container {
        padding-top: 4%;
    }

    .save-decline-install-btn {
        margin-top: 2%;
    }

    .install-btn {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: inherit;
    }

    .decline-installation-text {
        width: 100%;
    }

    .customer-installation-decline-reason {
        display: inline-block;
    }
}

#send-support-mail-btn {
    .send-support-mail {
        float: right;
    }
}

#show-schedule-history-container {
    .supplier-header {
        font-weight: bold;
        font-size: 130%;
        margin: 1% 0;
    }

    .history-date {
        font-size: 120%;
    }

    .company-dates {
        border-bottom: 2px solid #337ab7;
        padding-bottom: 2%;
        margin-bottom: 2%;
    }
}

#installation-files-container {
    .installation-protocol-doc {
        border-bottom: 2px solid #337ab7;
        padding-bottom: 2%;
        margin-top: 3%;
    }
}

#add-documents-to-order-container {
    .upload-files-header {
        text-align: center;
    }

    .document-types {
        padding-bottom: 5%;
    }

    .add-document-value {
        width: 90%;
    }

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

    .outside-process-steps {
        display: inline-block;
        background: rgba(59, 185, 255, 0.3);
        border: 1px solid #000;
        border-radius: 5px;
        font-weight: bold;
        margin-top: 3%;
    }
}