@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: #800080;

#dashboards {
    position: relative;
    margin-top: 1%;
    margin-bottom: 3%;
    padding-bottom: 1%;
}

#dashboards-layer {
    .dashboard-name {
        position: relative;
        font-size: 200%;
        padding: 1% 0;
    }

    .select-dashboard-layer {
        z-index: 9999;
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid #3bb9ff;
        padding: 5px;
    }

    .select-dashboard-title {
        text-align: center;
    }

    .select-dashboard-type{
        text-align: center;
        margin-top: 1%;
    }

    .dashboard-row {
        cursor: pointer;
        border-bottom: 1px solid #3bb9ff;
        padding: 1%;
        font-size: 60%;
    }

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

    .private {
        color: #C11B17;
    }

    .public {
        color: #2184be;
    }

    .visibility-icon {
        float: right;
        margin-right: 5px;
    }

    .dashborad-selected-name{
        margin-right: 2%;
    }

    .dashborad-btn{
        cursor: pointer;
        font-size: 80%;
    }

    .edit-dashboard-btn {
        .dashborad-btn;
    }

    .owner-btns a {
        color: #000;
        text-decoration: none;
    }

    .remove-dashborad-btn{
        .dashborad-btn;
    }

    .select-dashboard-btn {
        .dashborad-btn;
    }

    .confirm-name{
        font-weight: bold;
    }

    .gadget {
        padding: 3%;
        background: rgba(255, 255, 255, 0.8);
    }

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

    .gadget-row {
        padding: 10px 0;
        border-bottom: 1px solid #3bb9ff;
    }

    .gadget-row-column {
        display: inline-block;
    }

    .gadget-row-column a {
        cursor: pointer;
    }

    .order-status {
        font-size: 110%;
        font-weight: bold;
    }

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

    .fitler-layer {
        border-top: 1px solid #3bb9ff;
        border-bottom: 1px solid #3bb9ff;
        padding: 1% 0;
    }

    .filter-title {
        font-weight: bold;
    }

    .filter-logic {
        padding: 1% 0;
    }

    .filter-apply {
        margin-top: 1%;
    }

    .filter-clear {
        margin-top: 1%;
        margin-left: 2%;
    }

    .filter-value,
    .sort-icon {
        cursor: pointer;
        margin-left: 5%;
        color: #045FB4;
    }

    .is-fitlered{
        font-size: 80%;
    }

    .action-status{
        font-weight: bold;
    }

    .invalid {
        color: #d58512;
    }

    .pending {
        color: #800080;
    }

    .not-accepted {
        color: #800080;
    }

    .in-progress {
        color: #FF8040;
    }
}

#create-dashboard-container {
    .dashborad-input {
        font-size: 130%;
    }

    .user-type-select-layer {
        font-size: 130%;

    }

    .user-type-select {
        padding: 5px 0;
    }

    .create-dashboard-label {
        font-weight: bold;
        display: inline-block;
    }

    .gadget {
        position: relative;
        margin-top: 1%;
        padding: 3%;
        background: rgba(255, 255, 255, 0.8);
        text-align: center;
        height: 25em;
    }

    .add-gadget {
        color: #000;
        margin-top: 3em;
        font-size: 200%;
        padding: 2em 0;
    }

    .add-gadget:hover {
        color: #204d74;
        border: 5px dashed #204d74;
        cursor: pointer;
    }

    .drag-gadget {
        color: #000;
        margin-top: 3em;
        font-size: 200%;
        padding: 2em 0;
    }

    .drop-zone {
        background: #FFF;
        color: #000;
        margin-top: 3em;
        font-size: 200%;
        padding: 2em 0;
        border: 5px dashed #5cb85c;
        display: none;
        position: absolute;
        z-index: 1000;
        width: 90%;
    }

    .drag-gadget:hover {
        color: #204d74;
        border: 5px dashed #204d74;
        cursor: move;
    }

    .remove-gadget {
        margin-top: 1%;
        position: relative;
        float: right;
    }

    .create-box {
        margin: 1em 0;
    }

    .visibility-layer {
        display: inline-block;
        font-size: 130%;
        margin-left: 1%;
    }

    .visibility-icon {
        cursor: pointer;
    }

    .visibility-message {
        display: none;
    }

    .visibility-layer:hover .visibility-message {
        display: inline-block;
        font-weight: bold;
        cursor: pointer;
    }

    .private {
        color: #C11B17;
    }

    .public {
        color: #2184be;
    }
}