@background-layer: rgba(255, 255, 255, 0.8);

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

#documents-module {
    .document-icon-layer {
        position: relative;
    }

    .document-icon {
        font-size: 200%;
    }

    .document-icon-text {
        position: absolute;
        bottom: 5%;
        color: #FFF;
        padding: 2px;
        font-size: 61%;
    }

    .docx, .doc {
        color: rgb(35, 114, 186);
    }

    .pdf {
        color: rgb(231, 76, 60);
    }

    .xlsx, .xls {
        color: rgb(0, 102, 0);
    }
}

#documents-view-layer {
    .module-layer;

    .document-categ {
        margin-top: 1%;
    }

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

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

    .document-name {
        font-size: 130%;
        font-weight: bold;
    }
}

#documents-link-layer {
    .module-layer;
    padding-top: 2%;

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

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

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

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

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

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

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

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

    .document-icon-layer {
        display: inline-block;
        margin-right: 2%;
    }

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

#documents-add-layer {
    .module-layer;

    .documents-add-layer {
        padding: 2% 0;
    }

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

    .documetns-types {
        border: 2px solid #337ab7;
        border-radius: 10px;
    }

    .document-types-list{
      overflow-y: scroll;
      max-height: 30rem;
      border-bottom: 2px solid #337ab7;
    }

    .add-type-layer{
      margin-top: 1rem;
    }

    .document-type-row{
        padding: 1%;
        border-bottom: 2px solid #337ab7;
    }

    .can-add-document {
        cursor: pointer;
    }

    .can-add-document:hover {
        background: rgba(59, 185, 255, 0.5);
    }

    .special-document {
        cursor: pointer;
        background: rgba(192, 192, 192, 0.5);
    }

    .special-document:hover {
        background: rgba(59, 185, 255, 0.5);
    }

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


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

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

    .doc-type-info {
        margin-top: 1%;
    }
}