@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-user-template-container {
    .module-layer;

    #user-whole-container {
        padding-top: 2%;
    }

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

    .choose-cl-title {
        display: inline-block;
        margin-bottom: 1%;
        font-weight: bold;
        font-size: 120%;
    }

    .cl-lists {
        height: 400px;
        overflow: hidden;
    }

    .choose-cl {
        vertical-align: top;
    }

    .choose-cl-list {
        display: inline-block;
        width: 95%;
        border: 1px solid #000;
        border-radius: 5px;
        min-height: 400px;
        overflow-y: auto;
        height: 300px;
    }

    .link-cl-user {
        display: block;

        .link-cl-user-header {
            display: inline;
            width: 25%;
            font-weight: bold;
        }

        .link-cl-user-data {
            width: 70%;
            display: inline;
        }
    }

    .choose-cl-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;
    }

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

    .choose-cl-row .dndDraggingSource {
        display: none;
    }

    .choose-cl-row .dndPlaceholder {
        background-color: #ddd;
        display: block;
    }

    .choose-cl-row.selected {
        background-color: #dff0d8;
        color: #3c763d;
    }

    #user-action-buttons {
        margin: 1% 0 2% 1%;
    }

    .draggable-icon {
        color: #3c763d;
        left: 28.5%;
        font-size: 200%;
    }

    .new-company-details {
        padding-left: 2%;
    }

    .select-inactive {
        background-color: #dddddd;
    }

    .company-admin-box {
        padding-left: 1.5%;
    }

    .new-company-details-container {
        margin-top: 1%;
        width: 100%;
        border-top: 2px solid #3bb9ff;
        border-bottom: 2px solid #3bb9ff;
        background: rgba(59, 185, 255, 0.1);
        padding: 2% 0;
        margin-bottom: 2%;
    }
}

#show-users {
    padding-bottom: 2%;

    .search-input {
        padding: 1%;

        .search-icon {
            margin-left: 1%;
        }
    }

    .user-types-container {
        padding-bottom: 2%;
    }

    .users-informations-container {
        width: 100%;
        display: inline-block;
    }

    .users-info-button {
        display: inline-block;
        text-align: right;
        width: 90%;
        position: absolute;
    }

    .show-users-layer {
        position: relative;
        margin-top: 2%;
        background: @layer-background;
        padding: 3%;
        height: 270px;
    }

    .show-users-title {
        font-size: 120%;
        font-weight: bold;
        display: inline-block;
    }

    .users-info {
        margin-bottom: 4%;
    }

    .user-type-show {
        text-align: center;
        font-size: 140%;
        font-weight: bold;
    }

    .company-name-info-title {
        text-align: center;
        margin-bottom: 5%;
        border-bottom: 2px solid #000;
    }
}

#link-customers-template-container{
    .module-layer;
    padding-top: 2%;

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

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

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

    .user-list{
        min-height: 400px;
        height: 400px;
        overflow: auto;
    }

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

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

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

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

    .users-link-buttons {
        margin: 2% 0;
    }
}