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

#create-process-steps {
    width: 100%;
    padding: 1%;
    margin-bottom: 2%;

    .create-process-title {
        margin-bottom: 1%;
        font-weight: bold;
        font-size: 120%;
        text-align: center;
    }

    .processes-list {
        background: #FFF;
        height: 360px;
        min-height: 360px;
        overflow-y: scroll;
        border: 1px solid #000;
        border-radius: 5px;
    }

    .glyphicon-eye-open {
        color: @eye-open-color;
        font-size: 120%;
    }

    .glyphicon-eye-close {
        color: @eye-close-color;
        font-size: 120%;
    }

    .step-extra-action-radios {
        display: inline-block;
    }

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

    .create-process-name-input, .create-process-country-select{
        height: 3rem;
    }

    .add-process-steps {
        display: inline-block;
        margin-top: 1%;
        border-top: 2px solid #3bb9ff;
        border-bottom: 2px solid #3bb9ff;
        padding: 2%;
        background: rgba(59, 185, 255, 0.1);

        .create-processes-description {
            display: inline-block;
            margin-top: 2%;
            width: 98%;

            .package-label {
                width: 30%;
            }

            .create-package-description-text {
                width: 70%;
            }
        }
    }
}

#edit-process-button {
    margin: 2%;
}

#edit-processes-container {
    margin-left: 1%;
}

#edit-process-and-steps-container {
    height: 400px;
    margin-bottom: 2%;
    overflow: hidden;
    position: relative;

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

#edit-processes {
    .module-layer;

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

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

    .edit-processes-lists {
        display: inline-block;
        width: 95%;
        border: 1px solid #000;
        border-radius: 5px;
        height: 400px;
        overflow-y: scroll;
        padding: 0;
    }
}

#link-process-steps {
    .module-layer;

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

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

    .processes-list {
        background: #FFF;
        height: 360px;
        min-height: 360px;
        overflow-y: scroll;
        border: 1px solid #000;
        border-radius: 5px;
    }

    .process-selection-layer {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 360px;
        overflow: hidden;
    }

    .headers-col {
        margin-top: 1%;
        margin-bottom: 1%;
        vertical-align: top;
        text-align: center;
    }

    .process-draggable {
        padding: 7px 5px;
        cursor: pointer;
        border: 1px solid #ddd;
        font-weight: bold;
        padding-left: 2%;
    }

    .process-draggable:hover {
        background: rgba(223, 240, 216, 0.5);
    }

    .info-placeholder {
        color: rgba(124, 128, 130, 0.7);
        padding: 5%;
    }

    .info-step {
        border: 1px solid #ddd;
    }

    .step-position {
        display: inline-block;
        width: 10%;
        font-weight: bold;
        vertical-align: middle;
        background: rgba(59, 185, 255, 0.5);
        border-right: 2px solid rgb(59, 185, 255);
        padding: 5px 0 5px 5px;
    }

    .step-description {
        display: inline-block;
        width: 85%;
        padding: 5px 3px;
    }

    .link-processes-button {
        margin-top: 1%;
        margin-bottom: 3%;
    }

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

    .add-new-process{
        margin: 1% 0;
    }
}