body {
    font-size: 12px;
    //font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-family: 'Work Sans', sans-serif;
    color: #000;
    overflow-y: hidden;
    background: #e5e5e5;
    padding: 0 !important;
}

a:hover {
    text-decoration: none;
}

label {
    font-weight: 100;
}

.table > thead > tr > th {
    color: #59323c;
    border-color: #59323c;
    border: 0;
    //vertical-align: top;
}

tbody {
    border-bottom: 1px solid #59323c;
}

th {
    font-weight: 100;
}

td {
    max-height: 34px;
}

    td span {
        margin-right: 25px;
    }

strong {
    color: #59323c;
}

.clickable {
    cursor: pointer;
}

tr.clickable:hover td {
    background: rgba(0,0,0,0.05);
}

tr.table-selected-row.clickable:hover td {
    background: #d0dbdb;
}

.top-bar,
.navigation-sidebar,
.main-container,
.ls-button-cancel,
.home-menu-box,
.home-menu-box:hover .home-menu-box-inner,
.home-menu-box h1 span,
.ls-panel,
.modal-panel-collapsable,
.ls-panel-collapsed,
.pin-pinned,
.play-pause-img,
.logout,
.title,
.slide-panel,
.details-panel,
.new-version,
.new-version.show-panel-height,
.modal-slide,
.modal-second-slide,
.move-slide,
.movable,
.modal-back-button,
.menu-category div,
.link-variation,
.pin-button {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.top-bar {
    width: 100%;
    height: 34px;
    background: #260126;
}

button:focus {
    outline: 0;
}

/* MAIN NAV */

.navigation-sidebar {
    width: 200px;
    height: calc(100vh - 34px);
    position: absolute;
    z-index: 100;
    left: -160px;
    background: #e5e5e5;
    text-align: right;
    border-right: 1px solid #bebebe;
}

.navigation-sidebar-large {
    left: 0;
}

.navigation-sidebar.navigation-sidebar-large ul li.menu-category div {
    width: 100%;
    text-align: right;
    padding-right: 50px;
}

.navigation-sidebar ul {
    list-style: none;
    padding: 0;
    //margin-top: -5px;
    margin-bottom: 0;
}

    .navigation-sidebar ul li {
        padding: 8px 0px;
        font-size: 11px;
        cursor: pointer;
        color: #260126;
        height: 32px;
        clear: both;
    }

        .navigation-sidebar ul li:hover {
            background: rgba(0,0,0,0.1);
        }

        .navigation-sidebar ul li span.glyphicon,
        .navigation-sidebar ul li span.fa {
            font-size: 15px;
            margin-left: 8px;
        }

        .navigation-sidebar ul li.divider {
            height: 1px;
            padding: 0;
            margin-top: -1px;
            //background-color: #260126;
            background: rgba(0,0,0,0.15);
        }

            .navigation-sidebar ul li.divider.divider-variation {
                background-color: #3E5678;
            }

        .navigation-sidebar ul li.menu-category {
            padding: 0;
            height: auto;
            text-align: left;
            cursor: default;
            display: none;
        }

            .navigation-sidebar ul li.menu-category:hover {
                box-shadow: 0 0 0;
                background: transparent;
            }

            .navigation-sidebar ul li.menu-category div {
                background: #260126;
                color: #fff;
                display: inline-block;
                text-align: left;
                padding: 4px 10px;
                width: auto;
            }

.navigation-sidebar i.pull-right {
    margin-left: 25px;
}

.navigation-sidebar .panel-body {
    padding: 0;
    background: transparent;
}

.navigation-sidebar h4 {
    padding: 10px 15px;
    cursor: pointer;
    margin: 0;
    font-size: 16px;
}

    .navigation-sidebar h4:hover {
        background: #d4d4d4;
    }

    .navigation-sidebar h4 span {
        margin-left: 20px;
    }

.navigation-sidebar .panel-title a {
    padding: 10px;
}

.navigation-sidebar .modal-panel-collapsable.ls-panel-collapsed {
    max-height: 40px;
}

.menu-item-title {
    padding-right: 0;
}

.pinned {
    color: #260126;
}

.pin-button {
    background: #260126;
    color: #e5e5e5;
    border: 0;
    width: 100%;
    padding: 0;
}

    .pin-button:hover {
        background: #3B233B;
    }

    .pin-button span {
        font-size: 18px;
    }

.pin {
    float: right;
    width: 39px;
    padding: 8px 10px;
}

.pin-pinned {
    background: #e5e5e5;
}

/* MAIN CONTAINER */

.main-container {
    width: calc(100% - 40px);
    height: calc(100vh - 34px);
    float: right;
    background-color: #eee;
    position: relative;
    padding-top: 34px;
}

.main-container-small {
    width: calc(100% - 200px);
}

    .main-container-small .toolbar {
        width: calc(100% - 200px);
    }

.title {
    padding: 7px 15px 7px 15px;
    //background: #170017;
    float: left;
    margin-right: 10px;
    cursor: pointer;
    //border-right: 1px solid #59323c;
    height: 33px;
}

.logout,
.user {
    padding: 9px 15px 7px 15px;
    background: #260126;
    float: right;
    margin-right: 0;
    //margin-left: 15px;
    cursor: pointer;
    border-left: 1px solid #472931;
}

.user {
    padding: 10px 15px 6px 15px;
    background: transparent;
}

    .title label,
    .logout label,
    .user label {
        color: #fff;
        margin: 0;
        cursor: pointer;
        font-weight: 100;
    }

.title label {
    padding-top: 2px;
    //font-weight: bold;
}

.user,
.user label {
    cursor: default;
}

    .user span {
        margin-right: 5px;
        font-size: 11px;
    }

.title:hover,
.logout:hover {
    background: #3B233B;
}

/* COMMON ELEMENTS */

.toolbar {
    width: calc(100% - 40px);
    min-height: 34px;
    background: #e5e5e5;
    padding: 4px 15px;
    position: fixed;
    top: 34px;
    z-index: 90;
    box-shadow: 0 -1px 0 #b5b5b5 inset;
    border-bottom: 1px solid #fff;
}

.ls-label {
    margin-right: 6px;
    //font-size: 14px;
    color: #000;
    vertical-align: top;
    font-weight: bold;
}

.toolbar .ls-label {
    color: #59323c;
    vertical-align: middle;
    margin-right: 20px;
    padding-top: 5px;
    font-weight: 100;
}

.input-label {
    vertical-align: bottom;
    margin-right: 15px;
    font-size: 12px;
}

.ls-textarea {
    width: 100%;
    max-width: 100%;
    resize: none;
    padding: 5px;
    border: 0;
    box-shadow: 0 0px 1px #260126 inset;
}

    .ls-textarea:focus {
        outline: 0;
        box-shadow: 0 -2px 0px 0px #59323c inset;
        background: transparent;
    }

.ls-button,
.ls-button-save,
.ls-button-cancel,
.ls-button-load {
    //background: #59323c;
    background: rgba(89,50,60,1);
    background: -moz-linear-gradient(top, rgba(89,50,60,1) 0%, rgba(71,40,49,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(89,50,60,1)), color-stop(100%, rgba(71,40,49,1)));
    background: -webkit-linear-gradient(top, rgba(89,50,60,1) 0%, rgba(71,40,49,1) 100%);
    background: -o-linear-gradient(top, rgba(89,50,60,1) 0%, rgba(71,40,49,1) 100%);
    background: linear-gradient(to bottom, rgba(89,50,60,1) 0%, rgba(71,40,49,1) 100%);
    color: white;
    border: 1px solid rgba(89,50,60,1);
    height: 24px;
    line-height: 22px;
    padding: 0 14px;
    vertical-align: top;
    -webkit-box-shadow: 0px 1px 1px rgba(64,1,64,0.8) inset;
    -moz-box-shadow: 0px 1px 1px rgba(64,1,64,0.8) inset;
    box-shadow: 0px 1px 1px rgba(64,1,64,0.8) inset;
}

    .ls-button:hover {
        background: #663A45;
        box-shadow: 0 0 0;
    }

    .ls-button:focus,
    .ls-button-cancel:focus {
        outline: 0;
    }

    .ls-button[disabled="disabled"] {
        background: #6B4343;
        color: #D1D1D1;
        box-shadow: 0 0 0;
    }

    .ls-button span {
        margin-right: 4px;
        font-size: 12px;
        vertical-align: text-top;
        color: white;
    }

.ls-button-cancel {
    background: #fff;
    color: #000;
    box-shadow: 0 0 0;
    border-color: #d1d1d1;
}

    .ls-button-cancel:hover {
        background: #f5f5f5;
        box-shadow: 0 0 8px 2px #DBDBDB inset;
    }

.ls-button-save {
    background: rgba(58,166,94,1);
    background: -moz-linear-gradient(top, rgba(58,166,94,1) 0%, rgba(41,120,68,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(58,166,94,1)), color-stop(100%, rgba(41,120,68,1)));
    background: -webkit-linear-gradient(top, rgba(58,166,94,1) 0%, rgba(41,120,68,1) 100%);
    background: -o-linear-gradient(top, rgba(58,166,94,1) 0%, rgba(41,120,68,1) 100%);
    background: linear-gradient(to bottom, rgba(58,166,94,1) 0%, rgba(41,120,68,1) 100%);
    box-shadow: 0px 2px 0px #71c78e inset, 1px 2px 0px #71c78e inset;
    text-shadow: 0 -1px 0 #1d6332;
    border: 0;
}

    .ls-button-save:hover {
        background: #3aa65e;
    }

.ls-button-load {
    background: rgba(109,180,199,1);
    background: -moz-linear-gradient(top, rgba(109,180,199,1) 0%, rgba(25,109,128,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(109,180,199,1)), color-stop(100%, rgba(25,109,128,1)));
    background: -webkit-linear-gradient(top, rgba(109,180,199,1) 0%, rgba(25,109,128,1) 100%);
    background: -o-linear-gradient(top, rgba(109,180,199,1) 0%, rgba(25,109,128,1) 100%);
    background: linear-gradient(to bottom, rgba(109,180,199,1) 0%, rgba(25,109,128,1) 100%);
    box-shadow: 0px 2px 0px #6db4c7 inset, 1px 0 0 #6db4c7 inset;
    text-shadow: 0 -1px 0 #256e85;
    border: 0;
}

    .ls-button-load:hover {
        background: #6db4c7;
    }

.ls-button.search-button {
    margin-left: -24px;
    padding: 0 10px;
}

    .ls-button.search-button span {
        margin: 0;
    }

.filter-group .ls-input-field.time-field {
    width: 30px;
    padding: 0 5px;
    text-align: center;
    vertical-align: baseline;
}

.timeSetWrapper {
    height: 20px;
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    top: -2px;
}

.settings .timeSet {
    height: 10px;
}

    .settings .timeSet span {
        margin: 0;
        padding: 0;
    }

.ls-panel {
    width: 100%;
    padding: 20px 15px;
    margin-bottom: 15px;
}

    .ls-panel:last-of-type {
        margin-bottom: 0;
    }

    .ls-panel:nth-child(odd) {
        background: #e5e5e5;
    }

    .ls-panel h5 {
        margin-bottom: 25px;
    }

.ls-panel-collapsed {
    max-height: 65px;
    overflow: hidden;
}

.ls-panel.panel-bar {
    padding: 5px 15px;
    margin-bottom: 0;
    //border-bottom: 1px solid #fff;
}

    .ls-panel.panel-bar h5 {
        margin-bottom: 0;
    }

.modal-panel-collapsable {
    max-height: 500px;
}

    .modal-panel-collapsable:first-of-type {
        margin-top: -5px;
    }

    .modal-panel-collapsable.ls-panel-collapsed {
        max-height: 28px;
        border-bottom: 1px solid #e5e5e5;
    }

.row.ls-panel-collapsed:last-of-type {
    border-bottom: 0;
}

.ls-panel .category-header {
    color: #59323c;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #59323c;
}

.ls-panel .ls-button {
    margin-top: 15px;
}

    .ls-panel .ls-button.collapse-button {
        float: right;
        margin-top: 0px;
        margin-right: 100px;
    }

        .ls-panel .ls-button.collapse-button span {
            line-height: 12px;
        }

.settings div {
    margin-bottom: 2px;
}

.settings label {
    padding-top: 6px;
    margin-bottom: 0;
}

.settings .filter-group,
.settings .filter-group input {
    width: 100%;
}

.settings span {
    color: #59323c;
    padding-top: 4px;
    cursor: pointer;
    margin-left: -25px;
}

.ls-input-field {
    height: 24px;
    padding: 0 10px;
    border: 0;
    box-shadow: 0 0px 1px #260126 inset;
    vertical-align: bottom;
}

    .ls-input-field:focus {
        outline: 0;
        box-shadow: 0 0px 0px 1px #59323c inset;
        background: transparent;
    }

    .ls-input-field[type="number"] {
        padding-right: 0;
    }

    .ls-input-field[type=number]::-webkit-inner-spin-button {
        height: 24px;
    }

    .ls-input-field[type=number]:hover::-webkit-inner-spin-button {
        box-shadow: 0 0px 1px #260126 inset;
    }



.toolbar .ls-input-field {
    width: 150px;
}

    .toolbar .ls-input-field.full-width {
        width: 100%;
    }

.toolbar label {
    margin-bottom: 2px;
}

.filter-group {
    display: inline-block;
    position: relative;
    margin-right: 20px;
    vertical-align: top;
}

    .filter-group input {
        padding-right: 20px;
    }

        .filter-group input.ls-date-range-picker {
            padding-right: 5px;
        }

a.clear-input-field {
    font-size: 10px;
    color: #59323c;
    top: 7px;
    right: 6px;
    position: absolute;
}

    a.clear-input-field:hover {
        text-decoration: none;
        cursor: pointer;
    }

.assignment-button {
    margin: 15px 0;
}

.back-button {
    display: inline-block;
    padding: 8px 15px 8px 15px;
    cursor: pointer;
    margin: -4px 15px -5px -15px;
    //border-right: 1px solid #bebebe;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    box-shadow: -1px -1px 0 #b5b5b5 inset;
}

    .back-button:hover {
        background: #dbdbdb;
    }

    .back-button span {
        color: #59323c;
        font-size: 16px;
    }

.hidden-panel {
    opacity: 0;
    display: none;
}

.show-panel {
    opacity: 1;
    display: block;
}

.error-wrapper {
    max-width: 70%;
}

.errorPanel {
    width: auto;
    border-radius: 0;
    font-size: 12px;
    margin-right: 2px;
    margin-bottom: 2px;
}

.invalid-field {
    border: 1px solid #59323c;
}

.no-sidebar-menu {
    border: 0;
    background: #eee;
}

.play-pause-img {
    display: block;
    cursor: pointer;
}

    .play-pause-img:hover {
        opacity: 0.8;
    }

.table tr td.action-buttons {
    padding-right: 0;
}

.action-buttons span:hover {
    cursor: pointer;
    color: #59323c;
}

.no-margin {
    margin: 0;
}

.no-padding {
    padding: 0;
}

.clear {
    clear: both;
}




/* POPOVER */

div.popover {
    background: #59323c;
    border: 0;
    font-size: 11px;
    border-radius: 0;
    text-align: center;
    box-shadow: 0 0 0;
    position: absolute;
    line-height: 10px;
    border-bottom: 2px solid #260126;
}

    div.popover .popover-content {
        color: white;
    }

.bar-pull-right .popover.top > .arrow:after,
.toolbar .popover.top > .arrow:after {
    border-top-color: #59323c;
}

.popover.bottom > .arrow:after,
.bar-pull-right .popover.bottom > .arrow:after,
.toolbar .popover.bottom > .arrow:after,
.ui-grid-cell .popover.bottom > .arrow:after,
.ls-grid .ui-grid-cell .popover.bottom > .arrow:after,
.ls-grid .ui-grid-header-cell .popover.bottom > .arrow:after {
    border-bottom-color: #59323c;
}

div.popover.left > .arrow:after {
    border-left-color: #59323c;
}

div.popover.right > .arrow:after {
    border-right-color: #59323c;
}

.settings div.popover.right {
    width: 250px;
    margin-top: 2px;
    margin-left: 15px;
    line-height: 14px;
}

/* END POPOVER */


/* DATE RANGE PICKER */

.ls-input-field.ls-date-range-picker {
    text-align: center;
}

.daterangepicker.dropdown-menu,
.daterangepicker.dropdown-menu button,
.daterangepicker.dropdown-menu input.input-mini {
    border-radius: 0;
    box-shadow: 0 0 0;
}

.daterangepicker div.daterangepicker_input i {
    top: 6px;
}

.daterangepicker.dropdown-menu button,
.daterangepicker.dropdown-menu input {
    height: 24px;
    line-height: 12px;
}

    .daterangepicker.dropdown-menu input.input-mini:focus,
    .daterangepicker.dropdown-menu button:focus {
        box-shadow: 0 0 0;
        outline: 0;
    }

.daterangepicker.dropdown-menu td.active {
    background: #59323c;
}

.daterangepicker table {
    text-transform: capitalize;
}

.daterangepicker input.input-mini.active {
    border-color: #59323c;
}

.daterangepicker .ranges li {
    border-radius: 0;
    color: #59323c;
}

    .daterangepicker .ranges li:hover {
        background: #59323c;
        color: white;
        border-color: #59323c;
    }

    .daterangepicker .ranges li.active {
        background: #59323c;
        border-color: #59323c;
        color: white;
    }

.daterangepicker.dropdown-menu {
    margin-top: 5px;
}

.daterangepicker .month select.monthselect,
.daterangepicker .month select.yearselect {
    border: 0;
    cursor: pointer;
    padding: 4px 8px;
    width: auto;
    box-shadow: 0 -1px #d1d1d1 inset;
}

    .daterangepicker .month select.monthselect:hover,
    .daterangepicker .month select.yearselect:hover {
        background: #f5f5f5;
    }

    .daterangepicker .month select.monthselect:focus,
    .daterangepicker .month select.yearselect:focus {
        outline: 0;
    }

/* END DATE RANGE PICKER */

/* HOME PAGE */

.home-page-body {
    width: 100%;
    height: calc(100vh - 100px);
    overflow: hidden;
    position: relative;
}

    .home-page-body .slide-panel > div {
        width: 40%;
        margin: 0 auto;
    }

.home-menu-box {
    border: 1px solid #d1d1d1;
    padding: 15px 0 15px 0;
    cursor: pointer;
    position: relative;
    height: 200px;
    background: #f5f5f5;
    background: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
    background: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%);
    background: linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 );
    margin-bottom: 30px;
}

    .home-menu-box:hover {
        box-shadow: 0 1px 8px 1px rgba(0,0,0,0.2) inset;
        background: #e5e5e5;
        background: -moz-linear-gradient(bottom, #f5f5f5 0%, #dddddd 100%);
        background: -webkit-linear-gradient(bottom, #f5f5f5 0%,#dddddd 100%);
        background: linear-gradient(to top, #f5f5f5 0%,#dddddd 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#f5f5f5',GradientType=0 );
    }

        .home-menu-box:hover .home-menu-box-inner {
            background: #59323c;
            color: white;
            box-shadow: 0 0 0;
        }

    .home-menu-box h1,
    .home-menu-box h3 {
        text-align: center;
        text-transform: uppercase;
        font-size: 14px;
        color: #260126;
    }

        .home-menu-box h1 span {
            font-size: 60px;
        }

    .home-menu-box:hover h1 span {
        font-size: 59px;
        margin-top: 3px;
    }

    .home-menu-box:hover h3 {
        color: #fff;
    }

    .home-menu-box:hover span {
        color: #59323c;
    }

    .home-menu-box hr {
        border-color: #d1d1d1;
    }

.home-menu-box-inner {
    width: 100%;
    position: absolute;
    bottom: 0px;
    padding: 5px 15px;
    border-top: 1px solid #d1d1d1;
    box-shadow: 0 1px 1px #f5f5f5 inset;
}

    .home-menu-box-inner h3 {
        margin-top: 10px;
    }

/* END HOME PAGE */


/* LOGIN */

.login-panel {
    width: 40%;
    margin: 0 auto;
    text-align: center;
    color: white;
    padding-top: 180px;
}

    .login-panel h1 {
        color: #59323c;
        margin-bottom: 50px;
    }

    .login-panel .ls-input-field {
        width: 80%;
        padding: 10px 14px;
        display: block;
        height: 40px;
        margin: 0 auto 5px auto;
        color: #000;
        font-size: 16px;
        border-radius: 0px;
    }

        .login-panel .ls-input-field:focus {
            box-shadow: 0 0px 0px 2px #59323c inset;
        }

    .login-panel .ls-button {
        background: #59323c;
        width: 280px;
        height: 40px;
        font-size: 16px;
        border-radius: 0px;
        box-shadow: 0 0 0;
        margin-top: 10px;
    }

        .login-panel .ls-button:hover {
            background: #86B0D9;
        }

.login-failed-message {
    width: 280px;
    height: 40px;
    margin: 5px auto;
    line-height: 10px;
}

/* END LOGIN */

.modal-dialog {
    margin-top: 30vh;
}

/* CUSTOM MODAL */

.custom-modal .modal-dialog {
    width: 70%;
    margin-top: 30px;
}

.modal-content {
    border-radius: 0;
    width: 100%;
    margin: 0 auto;
}

.modal-header {
    padding: 0 30px 10px 30px;
    background: #59323c;
    color: #fff;
}

.default-modal.modal-header {
    padding: 0 10px 10px 10px;
}

.custom-modal .modal-body .row {
    margin: 10px 0 5px 0;
}

.custom-modal .modal-body .filter-group {
    width: 100%;
}

.custom-modal .modal-body input.ls-input-field {
    width: 100%;
    padding-right: 22px;
}

    .custom-modal .modal-body input.ls-input-field.short-field {
        padding-right: 5px;
    }

.custom-modal .modal-body .ls-date-picker {
    width: 100%;
}

    .custom-modal .modal-body .ls-date-picker input.ls-input-field {
        width: calc(100% - 30px);
    }

.custom-modal label {
    font-weight: normal;
}

.custom-modal .wrap-dd-select,
.custom-modal .wrap-dd-select .dropdown-menu {
    width: 100%;
}

.custom-modal a.clear-input-field {
    //right: 20px;
}

/* END CUSTOM MODAL */


/* LOADER */

#loading-bar-spinner div.spinner-icon {
    width: 150px;
    height: 150px;
    position: fixed;
    top: calc(50% - 75px);
    left: calc(50% - 75px);
}

/* DATE PICKER */

.ls-date-picker {
    width: 195px;
    display: inline-block;
}

    .ls-date-picker input {
        width: calc(100% - 30px);
    }

    .ls-date-picker input,
    .ls-date-picker button {
        float: left;
        height: 24px;
        border-radius: 0;
    }

    .ls-date-picker > span button {
        border-radius: 0;
        width: auto;
        border: 0;
        background: #59323c;
        color: #fff;
        padding: 3px 8px;
    }

        .ls-date-picker > span button.btn-default:focus,
        .ls-date-picker > span button.btn-default:hover {
            outline: 0;
            color: #fff;
            background: #260126;
        }

    .ls-date-picker .dropdown-menu {
        padding: 0 0 10px 0;
        border-radius: 0;
        border-color: rgba(0, 0, 0, .15);
        margin-top: 1px;
    }

        .ls-date-picker .dropdown-menu:focus,
        .ls-date-picker .dropdown-menu li:focus {
            outline: 0;
        }

        .ls-date-picker .dropdown-menu .uib-day:nth-child(7) button.btn-default span,
        .ls-date-picker .dropdown-menu .uib-day:nth-child(8) button.btn-default span {
            color: #C42323;
        }

            .ls-date-picker .dropdown-menu .uib-day:nth-child(7) button.btn-default span.text-muted,
            .ls-date-picker .dropdown-menu .uib-day:nth-child(8) button.btn-default span.text-muted {
                color: #4A0F0F;
            }

        .ls-date-picker .dropdown-menu .uib-day:focus {
            outline: 0;
        }

        .ls-date-picker .dropdown-menu button.btn:focus {
            outline: 0;
        }

        .ls-date-picker .dropdown-menu .uib-day button.btn-info.active {
            background: #59323c;
            border: 0;
        }

        .ls-date-picker .dropdown-menu .btn-success {
            background: white;
            border: 1px solid #ccc;
            color: #000;
        }

            .ls-date-picker .dropdown-menu .btn-success:hover {
                background: #e6e6e6;
            }

        .ls-date-picker .dropdown-menu .btn-info:hover {
            background: #7BBBE3;
        }

        .ls-date-picker .dropdown-menu .uib-day button.btn-info.active span {
            color: white;
        }

    .ls-date-picker .uib-datepicker:focus,
    .ls-date-picker .uib-datepicker .uib-daypicker:focus {
        outline: 0;
        border: 0;
    }

    .ls-date-picker .uib-datepicker .uib-daypicker tr:nth-child(2) th {
        padding: 4px 0;
        text-transform: capitalize;
        font-size: 14px;
    }

        .ls-date-picker .uib-datepicker .uib-daypicker tr:nth-child(2) th:nth-child(7) small,
        .ls-date-picker .uib-datepicker .uib-daypicker tr:nth-child(2) th:nth-child(8) small {
            color: #C42323;
        }

    .ls-date-picker .uib-datepicker .uib-daypicker td.uib-day button {
        border-color: rgba(0, 0, 0, .15);
        border-width: 0;
    }

    .ls-date-picker .uib-datepicker .uib-daypicker tbody tr:last-of-type {
        border-bottom: 1px solid rgba(0, 0, 0, .15);
    }

    .ls-date-picker .uib-datepicker th .btn-default {
        background: #fff;
        border-color: rgba(0, 0, 0, .15);
        border-width: 0 0 1px 0;
        width: 100%;
        height: 40px;
        text-transform: capitalize;
    }

    .ls-date-picker .uib-datepicker .btn-default:hover,
    .ls-date-picker td.h6,
    .ls-date-picker tr:nth-child(2) th:first-of-type {
        background: #f5f5f5;
    }

    .ls-date-picker .uib-datepicker th .btn-default strong,
    .ls-date-picker .uib-datepicker th .btn-default i {
        color: #000;
    }

    .ls-date-picker .uib-button-bar button {
        border-radius: 0;
        line-height: 12px;
    }

    .ls-date-picker td span {
        margin: 0;
    }

/* END DATE PICKER */


.slide-panel {
    width: 100%;
    position: absolute;
    padding-top: 10vh;
    top: 0;
    left: 0;
}

    .slide-panel.next-slide {
        left: 100%;
    }

.nextP,
.previous {
    position: absolute;
    z-index: 800;
    top: 0;
    right: 44px;
    text-align: right;
    font-size: 22px;
    cursor: pointer;
}

.previous {
    left: 0px;
    right: auto;
    text-align: left;
}

    .nextP:hover,
    .previous:hover {
        opacity: 0.7;
    }

.slide-panel.previous-slide {
    left: -100%;
}

.slide-panel.next-slide-show {
    left: 0;
}

.details-panel {
    opacity: 0;
    border-left: 1px solid #d1d1d1;
}

    .details-panel.details-panel-visible {
        opacity: 1;
    }

.custom-modal.custom-modal-variation .modal-body {
    height: auto;
    max-height: calc(100vh - 190px);
    overflow: hidden;
}

.details-panel .filter-group,
.custom-modal.custom-modal-variation .filter-group {
    width: 100%;
    max-width: 250px;
}

.details-panel .ls-input-field,
.custom-modal.custom-modal-variation .ls-input-field {
    width: 100%;
    margin-bottom: 10px;
    //border-right: 4px solid #3E5678;
}

.details-panel .ls-input-field {
    margin: 5px 0 0 0;
}

.custom-modal.custom-modal-variation table .ls-input-field {
    margin-bottom: 0;
}

.details-panel .clear-input-field,
.custom-modal-variation .clear-input-field {
    color: #3E5678;
    right: 8px;
}

.table-selected-row td {
    background: #D0DBDB;
}

/* SKIN */
/*
    3E5678 = 035C5C
    344a6b = 344a6b
    344a6b = 034A4A
*/

.top-bar.top-bar-variation,
.second-slide .home-menu-box:hover .home-menu-box-inner,
.modal-header-variation {
    background: #3E5678;
}

.home-menu-box.reverse {
    background: #59323c;
    padding-top: 50px;
    cursor: default;
}

    .home-menu-box.reverse h1 {
        font-size: 28px;
        color: #fff;
        margin-bottom: 0;
        line-height: 28px;
        text-transform: none;
    }

        .home-menu-box.reverse h1 small {
            color: rgba(255,255,255,0.7);
        }

.top-bar.top-bar-variation .title,
.top-bar.top-bar-variation .logout {
    background: #3E5678;
}

.top-bar.top-bar-variation .user,
.top-bar.top-bar-variation .logout {
    border-left: 1px solid #344a6b;
}

    .top-bar.top-bar-variation .title:hover,
    .top-bar.top-bar-variation .logout:hover {
        background: #344a6b;
    }

.second-slide .home-menu-box span,
.second-slide .home-menu-box h3,
.previous {
    color: #3E5678;
}

.second-slide .home-menu-box.reverse {
    background: #344a6b;
}

.second-slide .home-menu-box:hover h3 {
    color: #fff;
}

.toolbar.toolbar-variation .ls-label,
.side-nav-icon-variation span,
.side-nav-icon-variation div {
    color: #3E5678;
}

.toolbar.toolbar-variation .ls-button,
.custom-modal.custom-modal-variation .ls-button,
.ls-button.ls-button-variation {
    background: rgba(109,180,199,1);
    background: -moz-linear-gradient(top, rgba(109,180,199,1) 0%, rgba(25,109,128,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(109,180,199,1)), color-stop(100%, rgba(25,109,128,1)));
    background: -webkit-linear-gradient(top, rgba(109,180,199,1) 0%, rgba(25,109,128,1) 100%);
    background: -o-linear-gradient(top, rgba(109,180,199,1) 0%, rgba(25,109,128,1) 100%);
    background: linear-gradient(to bottom, rgba(109,180,199,1) 0%, rgba(25,109,128,1) 100%);
    border-color: #4f7193;
    box-shadow: 0px 2px 0px #6db4c7 inset, 1px 0 0 #6db4c7 inset;
}

    .toolbar.toolbar-variation .ls-button:hover,
    .custom-modal.custom-modal-variation .ls-button:hover,
    .ls-button.ls-button-variation:hover {
        background: #6db4c7;
        box-shadow: 0 0 0;
    }

.custom-modal.custom-modal-variation .ls-input-field:focus,
.details-panel .ls-input-field:focus {
    box-shadow: 0 0px 0px 1px #3E5678 inset;
    border: 0;
}

.details-panel table:last-of-type {
    margin-bottom: 0;
}

.custom-modal.custom-modal-variation .table > tbody > tr > td {
    vertical-align: middle;
}

.pin-button.pin-button-variation,
.main-container.main-container-variation .popover,
.custom-modal.custom-modal-variation .modal-header {
    background: #3E5678;
}

    .pin-button.pin-button-variation:hover {
        background: #344a6b;
    }

    .main-container.main-container-variation .popover.bottom > .arrow:after {
        border-bottom-color: #3E5678;
    }

.main-container.main-container-variation .table > thead > tr > th,
.custom-modal.custom-modal-variation .table > thead > tr > th {
    color: #fff;
    background: #3E5678;
    border-color: #3E5678;
}

.main-container .table > tbody > tr > td.limit {
    max-width: 220px;
    word-wrap: break-word;
}


.main-container.main-container-variation .table tbody,
.custom-modal.custom-modal-variation .table tbody {
    border-color: #3E5678;
}

.main-container.main-container-variation .modal-header {
    background: #3E5678;
}

.navigation-sidebar ul {
    background: rgba(0,0,0,0.08);
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 1px 0 #fff inset, 0 -1px 0 #fff inset;
}

    .navigation-sidebar ul li.menu-category.menu-category-variation div {
        background: #3E5678;
        border-color: #3E5678;
        border-top: 1px solid #3E5678;
    }

.link-variation,
.details-panel .link-variation {
    color: #fff;
    background: rgba(85,116,161,1);
    background: -moz-linear-gradient(top, rgba(85,116,161,1) 0%, rgba(62,86,120,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(85,116,161,1)), color-stop(100%, rgba(62,86,120,1)));
    background: -webkit-linear-gradient(top, rgba(85,116,161,1) 0%, rgba(62,86,120,1) 100%);
    background: -o-linear-gradient(top, rgba(85,116,161,1) 0%, rgba(62,86,120,1) 100%);
    background: linear-gradient(to bottom, rgba(85,116,161,1) 0%, rgba(62,86,120,1) 100%);
    cursor: pointer;
    padding: 4px 12px;
    border: 1px solid #3e5678;
    height: 24px;
    vertical-align: top;
    margin-left: 2px;
}

    .link-variation:hover,
    .details-panel .link-variation:hover {
        background: rgba(77,105,147,1);
        background: -moz-linear-gradient(top, rgba(77,105,147,1) 0%, rgba(55,77,108,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(77,105,147,1)), color-stop(100%, rgba(55,77,108,1)));
        background: -webkit-linear-gradient(top, rgba(77,105,147,1) 0%, rgba(55,77,108,1) 100%);
        background: -o-linear-gradient(top, rgba(77,105,147,1) 0%, rgba(55,77,108,1) 100%);
        background: linear-gradient(to bottom, rgba(77,105,147,1) 0%, rgba(55,77,108,1) 100%);
        color: #fff;
    }

    .link-variation[disabled="disabled"] {
        background: rgba(219,219,219,1);
        background: -moz-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(179,179,179,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(219,219,219,1)), color-stop(100%, rgba(179,179,179,1)));
        background: -webkit-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(179,179,179,1) 100%);
        background: -o-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(179,179,179,1) 100%);
        background: linear-gradient(to bottom, rgba(219,219,219,1) 0%, rgba(179,179,179,1) 100%);
        text-shadow: 0 1px 0 #f2f2f2;
        color: #838485;
        border-color: #bebebe;
    }

        .link-variation[disabled="disabled"] span {
            color: #838485;
        }

.details-panel .link-variation {
    margin-right: 10px;
}

.link-header {
    cursor: pointer;
    margin-top: 15px;
}

    .link-header span:hover {
        color: #3e5678;
    }

uib-accordion .link-variation:hover {
    background: #f5f5f5;
}

.custom-modal-variation .add-panel-right {
    top: 0;
}

.link-variation.link-button {
    background: #3E5678;
    color: #fff;
    margin-left: 5px;
    padding: 4px 6px;
}

    .link-variation.link-button:hover {
        background: #344a6b;
    }

.version-button-variation,
.version-button-variation:hover {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #292929;
}

.add-panel-right.button-panel-group {
    top: 37px;
}

.add-panel-right {
    width: 60%;
    position: absolute;
    right: 5px;
    top: 30px;
    text-align: right;
}

    .add-panel-right a.clear-input-field {
        right: 5px;
        color: #3E5678;
    }

    .add-panel-right.single {
        position: absolute;
        top: -10px;
        width: 20%;
        right: 0;
    }

.custom-modal.custom-modal-variation .modal-body .row {
    position: relative;
}

.custom-modal .modal-body .add-panel-right label,
.custom-modal .modal-body .add-panel-right .dropdown {
    display: inline-block;
    margin-right: 10px;
}

.custom-modal .modal-body .add-panel-right .dropdown {
    margin-right: 0px;
}

    .custom-modal .modal-body .add-panel-right .dropdown input {
        vertical-align: baseline;
        border: 0;
        margin-bottom: 0;
    }

.custom-modal.custom-modal-variation .filter-dropdown .dropdown-menu ul,
.custom-modal .modal-body .dropdown.filter-dropdown .dropdown-menu {
    min-width: 138px;
    width: 100%;
    min-height: 24px;
    top: 24px;
}

    .custom-modal.custom-modal-variation .filter-dropdown .dropdown-menu ul li {
        padding: 5px 10px;
        line-height: 12px;
        height: 24px;
    }

        .custom-modal.custom-modal-variation .filter-dropdown .dropdown-menu ul li .checked-field {
            display: none;
        }

.custom-modal .modal-body h4 {
    margin-top: 0;
}

    .custom-modal .modal-body h4 span {
        font-size: 14px;
        color: #3E5678;
    }

.custom-modal .modal-body .dropdown.filter-dropdown .dropdown-menu,
.custom-modal .modal-body .dropdown.filter-dropdown ul {
    margin-bottom: 0;
    padding-bottom: 0;
}

.custom-modal.custom-modal-variation h4 {
    width: 100%;
    cursor: pointer;
    margin-bottom: 0;
    padding-bottom: 11px;
}

    .custom-modal.custom-modal-variation h4:hover {
        color: #3E5678;
    }

.custom-modal.custom-modal-variation .ls-date-picker > span button {
    background: #3E5678;
}

.custom-modal.custom-modal-variation .ls-date-picker .dropdown-menu .uib-day button.btn-info.active {
    background: #3E5678;
}

.confirm-delete {
    display: inline-block;
    margin-right: 10px;
}

div.link-icon {
    display: inline-block;
    padding: 8px 12px;
    margin: -8px 0;
}

    div.link-icon:hover {
        cursor: pointer;
        color: #3E5678;
        background: #e5e5e5;
    }

.confirm-delete span {
    margin: 0;
    cursor: pointer;
    background: rgba(85,116,161,1);
    background: -moz-linear-gradient(top, rgba(85,116,161,1) 0%, rgba(62,86,120,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(85,116,161,1)), color-stop(100%, rgba(62,86,120,1)));
    background: -webkit-linear-gradient(top, rgba(85,116,161,1) 0%, rgba(62,86,120,1) 100%);
    background: -o-linear-gradient(top, rgba(85,116,161,1) 0%, rgba(62,86,120,1) 100%);
    background: linear-gradient(to bottom, rgba(85,116,161,1) 0%, rgba(62,86,120,1) 100%);
    color: #fff;
    padding: 8px 10px;
    margin: -8px 0;
    border-right: 1px solid #dedede;
    text-shadow: 0 1px 0 #2C476E;
}

    .confirm-delete span:hover {
        color: #fff;
        background: #5B7CAB;
        box-shadow: 0 0 8px 2px #2C476E inset;
    }

    .confirm-delete span:nth-child(2) {
        background: rgba(219,219,219,1);
        background: -moz-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(179,179,179,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(219,219,219,1)), color-stop(100%, rgba(179,179,179,1)));
        background: -webkit-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(179,179,179,1) 100%);
        background: -o-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(179,179,179,1) 100%);
        background: linear-gradient(to bottom, rgba(219,219,219,1) 0%, rgba(179,179,179,1) 100%);
        text-shadow: 0 1px 0 #f2f2f2;
        color: #000;
    }

        .confirm-delete span:nth-child(2):hover {
            background: #DBDBDB;
            box-shadow: 0 0 8px 2px #DBDBDB inset;
        }

.checkbox .ls-label.empty-label {
    min-height: 17px;
}

.checkbox.checkbox-primary.table-checkbox {
    top: -2px;
    padding: 0;
}

    .checkbox.checkbox-primary.table-checkbox input,
    .checkbox.checkbox-primary.table-checkbox label:before,
    .checkbox.checkbox-primary.table-checkbox label:after {
        margin-left: 0;
    }

.new-version {
    padding: 5px 5px 0 5px;
    background: transparent;
    margin: 3px 0 -5px 0;
    max-height: 0;
    overflow: hidden;
}

    .new-version.show-panel-height {
        max-height: 500px;
        background: #f5f5f5;
        margin-top: 3px;
        margin-bottom: 10px;
        overflow: visible;
    }

.ls-button span.span-button {
    vertical-align: top;
    margin: 0;
}

a.ls-button,
a.ls-button-cancel {
    height: 24px;
    padding: 4px 14px;
    cursor: pointer;
    margin-right: 10px;
}

.custom-modal.custom-modal-variation .modal-body {
    max-width: 100%;
    overflow-x: hidden !important;
}

.movable {
    width: calc(200% + 30px);
    margin-left: 0;
}

    .movable.move-slide {
        margin-left: calc(-100% - 15px);
    }

.modal-slide,
.modal-second-slide {
    width: calc(50% - 15px);
    display: inline-block;
    float: left;
}

.token {
    cursor: pointer;
    line-height: 26px;
}

    .token:hover {
        color: #3E5678;
    }

.panel-heading {
    padding: 0;
}

.panel-title a {
    width: 100%;
    display: block;
    padding: 10px 15px;
}

    .panel-title a:focus {
        outline: 0;
        text-decoration: none;
    }

.ls-textarea.ls-textarea-variation {
    overflow: hidden;
}

    .ls-textarea.ls-textarea-variation:focus {
        outline: 0;
        box-shadow: 0 -2px 0px 0px #3E5678 inset;
        background: transparent;
    }

.table-icon {
    padding: 8px 12px;
    margin: -8px 0;
    display: inline-block;
    box-sizing: border-box;
}

    .table-icon:hover {
        cursor: pointer;
        background: #e5e5e5;
    }

    .table-icon span {
        margin: 0;
    }

.custom-modal.custom-modal-variation .ls-button[disabled="disabled"] {
    background: #456969;
    box-shadow: 0 0 0;
}

.custom-modal.custom-modal-variation .ls-button-cancel[disabled="disabled"] {
    background: #e5e5e5;
    box-shadow: 0 0 0;
}

.modal-back-button {
    font-size: 24px;
    margin-right: 5px;
    cursor: pointer;
}

.modal-header h3 {
    width: 60%;
    display: inline-block;
}

.modal-header.default-modal h3 {
    width: 100%;
}

.modal-back-button:hover {
    opacity: 0.8;
}

.message-sent {
    width: 100%;
    margin-top: -15px;
    text-align: right;
}

/* TABS */

.ls-panel .tab-content {
    padding: 30px 15px;
    border-bottom: 1px solid #ddd;
    background: #fff;
    box-shadow: 1px 0 0px #ddd inset, -1px 0 0px #ddd inset;
}

.main-container.main-container-variation .details-panel .table > thead > tr > th {
    background: #3E4B5C;
}

.main-container.main-container-variation .details-panel .table > tbody {
    border-color: #3e4b5c;
}

.details-panel th .ls-input-field,
.custom-modal.custom-modal-variation th .ls-input-field {
    border: 0;
    height: 22px;
    box-shadow: none;
    color: #292929;
}

    .details-panel th .ls-input-field:focus,
    .custom-modal.custom-modal-variation th .ls-input-field:focus {
        background: #fff;
        box-shadow: none;
        color: #292929;
    }

.details-panel th a.clear-input-field {
    top: 11px;
}

/* END TABS */

/*span.material-icons {
    font-size: 12px;
}*/

.custom-modal.custom-modal-variation .filter-group.single-search {
    max-width: 500px;
    margin: 0;
}

.single-search input {
    width: 100%;
}