body {
    background-color: #fff;
}

section.content {
    padding: 0;
    min-height: calc(100vh - 50px);
}

.s-sidebar-search-input {
    border-radius: 0.25rem;
    font-size: 1rem;
    height: 30px;
}
.s-sidebar-search-icon {
    padding-top: 10px;
    position: absolute;
    left: 0.6em;
    top: 0.6em;
    font-size: 14px;
}

/*Css for the boolean switch/toggle button*/
.s-BooleanSwitchEditor > input[type="checkbox"] {
    display: none;
}

.s-BooleanSwitchEditor > label {
    cursor: pointer;
    height: 0px;
    position: relative;
    width: 40px;
}

    .s-BooleanSwitchEditor > label::before {
        background: rgb(0, 0, 0);
        box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
        border-radius: 8px;
        content: '';
        height: 16px;
        margin-top: -8px;
        position: absolute;
        opacity: 0.3;
        transition: all 0.4s ease-in-out;
        width: 40px;
    }

    .s-BooleanSwitchEditor > label::after {
        background: rgb(255, 255, 255);
        border-radius: 16px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
        content: '';
        height: 24px;
        left: -4px;
        margin-top: -8px;
        position: absolute;
        top: -4px;
        transition: all 0.3s ease-in-out;
        width: 24px;
    }

.s-BooleanSwitchEditor > input[type="checkbox"]:checked + label::before {
    background: rgb(50, 205, 50);
    opacity: 0.5;
}

.s-BooleanSwitchEditor > input[type="checkbox"]:checked + label::after {
    background: rgb(50, 205, 50);
    left: 20px;
}

.s-BooleanSwitchEditor.readonly {
    background-color: transparent;
}

    .s-BooleanSwitchEditor.readonly > label {
        cursor: not-allowed;
    }

.tab-pane .editor .grid-container {
    min-height: 400px;
}

.s-DashboardWidgetsDashboardEditor .grid-container {
    min-height: 400px;
}

/*fix form height and layout*/
.s-Form label.caption {
    margin-bottom: 2px;
    text-align: left;
    flex: 0 0 100%;
    width: auto;
    flex-basis: 100%;
    color: #596882;
}

.flex-layout .field {
    flex-wrap: wrap;
}

/*Custom styling for forms*/
.s-Administration-AccountsDialog > .size {
    height: 800px;
}

.s-Application-WidgetsDialog > .size {
    height: 800px;
}

.s-Application-WidgetActionsWidgetEditorDialog > .size {
    height: 775px;
}

.s-Jobs-JobsDialog > .size {
    height: 800px;
}

.s-Vms-Administration-UserDialog > .size {
    height: 800px;
    width: 1100px;
}
/*Custom styling for the site header and nav sidebar*/
.s-sidebar-header-branding {
    display: flex;
}

    .s-sidebar-header-branding > h4 {
        font-size: 24px;
        color: white;
        font-weight: bold;
        padding-left: 15px;
    }

.header-text {
    color: white;
}    

.navbarheading {
    text-decoration: none;
}

.s-Dialog {
    z-index: 2000;
    border: 1px solid #cdd4e0;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.CodeMirror {
    height: auto;
    border: 1px solid #eee;
}

body > div > div > div.container {
    padding-right: 0;
    padding-left: 0;
}

/*Grid toolbar*/
.s-Toolbar {
    padding-bottom: 10px;
}

.s-QuickSearchBar .quick-search-icon,
.s-QuickSearchBar input.s-QuickSearchInput {
    height: 36px;
}

.s-QuickSearchBar .quick-search-icon {
    line-height: 52px;
}

.s-Toolbar .tool-button {
    padding: 5px 16px;
    background: none;
    margin-bottom: 0;
}

.s-Toolbar .buttons-inner {
    border: none;
}

.s-Toolbar .button-outer {
    border: none;
}

.s-Toolbar .button-inner {
    border: none;
}

.s-Toolbar .tool-button,
.ui-dialog .ui-dialog-buttonpane button {
    color: #fff;
    font-size: 14px;
    background-color: #007bff;
    border-color: #000;
    border-color: #007bff;
}

.s-QuickSearchBar .quick-search-icon {
    color: #000;
    background-color: #007bff;
    border-color: #000;
    border-color: #0062cc;
}

    .s-Toolbar .tool-button:hover,
    .tool-button:hover .button-outer,
    .s-QuickSearchBar .quick-search-icon:hover {
        color: #fff;
        background-color: #0062cc;
        border-color: #0062cc;
        transform: none;
    }

.tool-button:hover {
    border: 0 solid #aaa;
}

.tool-button.disabled:hover {
    border: 1px solid #aaa;
}

.s-Toolbar .s-ToggleButton {
    display: none;
}

/*Forms*/
.ui-dialog .ui-dialog-titlebar {
    background: transparent;
    border-bottom: 1px solid #cdd4e0;
    padding: 2px 1em 2px 1em;
}

.ui-dialog .ui-dialog-title {
    font-size: 18px;
    font-weight: 500;
    color: #1c273c;
}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
    background: transparent;
    border: transparent;
    color: rgba(0, 0, 0, 0.5);
    margin-top: -15px;
}

    .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:hover {
        background: transparent;
        border: transparent;
        color: rgba(0, 0, 0, 1);
    }

.ui-dialog .ui-dialog-buttonpane button {
    padding: 5px 7px;
    border: none;
}

.s-Dialog .s-DialogToolbar {
    margin: 0;
    background: #f8fafc;
    border-radius: 0;
    border: none;
    border-top: 1px solid #fff;
    border-bottom: none;
    padding: 5px 5px 8px 5px;
    min-height: 44px;
}

.s-PropertyGrid .category-title {
    margin: 12px 10px 8px 0;
    border-bottom: 1px solid #7380C4;
    padding: 3px 6px 3px 2px;
}

    .s-PropertyGrid .category-title a {
        font-size: 16px;
        font-weight: 600;
    }

.s-PropertyGrid .category-links {
    display: none;
}

.nav-tabs {
    border-bottom-width: 1px;
}

    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
        color: #555;
        cursor: default;
        background-color: #fff;
        border: 1px solid #ddd;
        border-bottom-color: transparent;
    }

.property-tabs > li > a {
    line-height: 1;
    border-radius: 0;
    color: #666;
    font-weight: 600;
    padding: 10px;
    font-size: 14px;
}

.s-Form input[type="text"],
.s-Form input[type="email"],
.s-Form input[type="tel"],
.s-Form input[type="search"],
.s-Form input[type="url"],
.s-Form input[type="password"],
.s-Form textarea {
    border-radius: 0;
}

.s-Form input[type="text"],
.s-Form input[type="email"],
.s-Form input[type="tel"],
.s-Form input[type="search"],
.s-Form input[type="url"],
.s-Form input[type="password"],
.s-Form select,
.s-Form textarea {
    padding: 4px;
}

/*.inplace-button {
    height: 30px;
    width: auto;
    padding-top: 2px;
    padding: 0.175rem 0.75rem;
    background: none;
    text-align: center;
    text-decoration: none;
    border-radius: 0.375rem;
    display:block
}*/
.inplace-button {
    display: inline-block !important;
    height: 30px;
    width: 64px;
    float: left;
    padding: 0.375rem 0.65rem;
    margin-left: 2px;
    border: 1px solid #aaa;
    border-radius: 0.375rem;
    background: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.flex-layout .s-DateTimeEditor.dateQ {
    flex: 1 1 36%;
    padding-left: 2px;
    padding-right: 2px;
}

.flex-layout .s-DateTimeEditor.time {
    padding-left: 1px;
    padding-right: 1px;
}

.s-Form .ui-datepicker-trigger {
    margin-top: 4px;
}

.quick-filter-item .ui-datepicker-trigger {
    top: 0px;
    left: 2px;
}

.ui-datepicker-trigger {
    box-sizing: border-box;
    background: url(Images/calendar_black.svg) no-repeat;
    padding-left: 20px;
    width: 18px !important;
    height: 18px !important;
    opacity: 0.5;
}

    .ui-datepicker-trigger:hover {
        cursor: pointer;
    }

.file-item {
    border: 1px solid #ccc;
    padding: 1px;
    width: 132px;
}

    .file-item .thumb {
        background-size: contain;
        height: 76px;
    }

.s-PropertyGrid .categories {
    padding-bottom: 20px;
}

.ui-widget-overlay {
    background: #aaaaaa;
    opacity: .25;
}

.s-Form .readonly {
    color: #000;
    opacity: 0.6;
}

.s-ColumnPickerDialog .column-list {
    background: none !important;
}

.s-ColumnPickerDialog li {
    background: none !important;
}

/*Datagrid*/
section .content > .s-DataGrid {
    padding: 0px;
    border-radius: 3px;
    background: #fff;
    border-top: none;
    box-shadow: none;
}

.grid-title, .panel-titlebar {
    color: #000 !important;
    font-size: 20px;
    margin-bottom: 16px;
}

.slick-header-column,
.slick-header-column.ui-state-default {
    border: solid #cdd4e0;
    border-width: 0px;
    color: #3b4863;
}

    .slick-header-column:hover,
    .slick-header-column-active {
        background-color: #f0f0f0;
    }

.slick-sort-indicator-asc {
    border-bottom-color: #000000;
}

.slick-sort-indicator-desc {
    border-top-color: #000000;
}

.slick-row.even {
    background-color: transparent;
}

.slick-row.odd {
    background-color: rgba(151, 163, 185, 0.1);
}

.slick-cell {
    border-color: #cdd4e0;
    border-bottom: 1px;
    padding: 9px 2px 9px 6px;
    line-height: 1.0;
    color: #3b4863;
    text-align: left;
}

    .slick-cell.align-right {
        border-left-width: 0px;
    }

    .slick-cell > a {
        color: #0039e6;
    }

.s-SlickPager {
    background: transparent;
    border-color: transparent;
}

.slick-pg-btn > span:before {
    color: #007bff;
}

/*Panel*/
.s-Panel {
    padding: 10px 10px;
    border-radius: 3px;
    background: #fff;
    box-shadow: none;
    border: 1px solid #cdd4e0;
}

/*Datepicker*/
.ui-datepicker {
    width: 20em !important;
}

    .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
        width: auto;
    }

/*Dropdown*/
.select2-container-multi .select2-choices {
    background-image: none;
}

.s-Toolbar .select2-container .select2-choice {
    background: #fff;
    border: 1px solid rgb(118, 118, 118);
    border-radius: 0px;
    line-height: 30px;
    height: 30px;
}

.select2-container .select2-choice {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0px;
}

.quick-filters-bar .select2-container .select2-choice {
    line-height: 30px;
    height: 30px;
}

.s-Form .select2-container .select2-choice {
    box-shadow: none;
    padding: 3px 6px 2px 6px;
}

.select2-container .select2-choice .select2-arrow {
    background: #f0f0f0;
    border-radius: 0px;
}

.select2-choice.select2-default {
    box-shadow: none;
}

.select2-container.select2-container-disabled .select2-choice {
    color: #000;
    opacity: 0.6;
}

/*ImageUploadEditor*/
.s-ImageUploadEditor .s-Toolbar, .s-MultipleImageUploadEditor .s-Toolbar {
    background-color: #fff;
    border: 0px solid #f0f0f0;
    padding-top: 2px;
}

.s-ImageUploadEditor ul, .s-MultipleImageUploadEditor ul {
    border-width: 0px;
    border-style: none solid solid solid;
    border-color: #eee;
    padding: 6px 6px 8px 6px;
    overflow-y: auto;
    background-color: #fff;
    min-height: 116px;
}

.cboxElement {
    background-color: #efefef;
}

.slick-container {
    border: 1px solid #f0f0f0;
}

/*Button Icons*/

.tool-button.disabled .button-outer {
    border: 1px solid #00000000;
}

div.s-Toolbar .tool-button.no-text span.button-inner {
    padding: 3px;
}

.s-Toolbar .no-text .button-inner {
    padding: 3px;
}

.add-button span.button-inner:before {
    content: "\f067";
    font-family: FontAwesome;
    font-size: 18px;
    padding-right: 10px;
}

.add-button span.button-inner {
    padding-left: 2px;
    background-image: none;
}

.refresh-button span.button-inner:before {
    content: "\f021";
    font-family: FontAwesome;
    font-size: 18px;
}

.refresh-button span.button-inner {
    background-image: none;
}

.column-picker-button span.button-inner:before {
    content: "\f0ce";
    font-family: FontAwesome;
    font-size: 18px;
}

.column-picker-button span.button-inner {
    background-image: none;
}

.save-and-close-button span.button-inner:before {
    content: "\f0c7";
    font-family: FontAwesome;
    font-size: 18px;
    padding-right: 10px;
}

.save-and-close-button span.button-inner {
    padding-left: 2px;
    background-image: none;
}

.apply-changes-button span.button-inner:before {
    content: "\f00c";
    font-family: FontAwesome;
    font-size: 18px;
}

.apply-changes-button span.button-inner {
    background-image: none;
}

.delete-button span.button-inner:before {
    content: "\f1f8";
    font-family: FontAwesome;
    font-size: 18px;
    padding-right: 6px;
}

.delete-button span.button-inner {
    padding-left: 2px;
    background-image: none;
}

.clone-button span.button-inner:before {
    content: "\f0c5";
    font-family: FontAwesome;
    font-size: 18px;
    padding-right: 10px;
}

.clone-button span.button-inner {
    padding-left: 2px;
    background-image: none;
}

.add-file-button span.button-inner:before {
    content: "\f1c5";
    font-family: FontAwesome;
    font-size: 18px;
    padding-right: 10px;
}

.add-file-button span.button-inner {
    padding-left: 2px;
    background-image: none;
}

.panel-titlebar-close {
    margin-top: -3px;
    padding-left: 12px;
    background-image: none;
}

    .panel-titlebar-close:before {
        content: "\f060";
        font-family: FontAwesome;
        font-size: 18px;
        padding-right: 10px;
    }

.text-blue {
    color: #fff !important;
}

.text-green {
    color: #fff !important;
}

.s-Form label.error {
    background: inherit;
    padding: 0;
    color: inherit;
}

.s-TreeCollapse {
    position: relative;
    background-image: none;
    font-size: 14px;
    color: #7a7a7a;
}

    .s-TreeCollapse:before {
        content: "\f146";
        font-family: FontAwesome;
        left: -2px;
        position: absolute;
        top: 7px;
    }

.s-TreeExpand {
    position: relative;
    background-image: none;
    font-size: 14px;
    color: #7a7a7a;
}

    .s-TreeExpand:before {
        content: "\f0fe";
        font-family: FontAwesome;
        left: -2px;
        position: absolute;
        top: 7px;
    }

/*Sidebar scroll*/
.s-sidebar-pane {
    overflow-y: auto;
    padding-bottom: 20px;
    border-right: none;
    background: transparent;
    bottom:36px;
}
.s-sidebar-footer {
    position: absolute;
    bottom: 10px;
    width:100%;
    text-align:center;
}

.slick-pg-in {
    margin-left: -6px;
    margin-top:5px;
}

/*Dropdown menu*/
.dropdown-menu {
    margin-top: 15px !important;
    margin-right: 2px !important;
}

    .dropdown-menu .dropdown-item {
        padding: 10px;
    }

.inplace-preview {
    padding-top: 3px;
    margin-top: 5px;
    margin-bottom: 10px;
    width: 80px;
    padding-left: 14px;
    text-decoration: none;
    color: #9da9bb !important;
}

    .inplace-preview:hover {
        background-color: #0062cc;
    }

.inplace-designer {
    padding-top: 3px;
    margin-top: 5px;
    margin-bottom: 10px;
    width: 124px;
    padding-left: 14px;
    text-decoration: none;
    color: #9da9bb !important;
    display: inline !important;
}

    .inplace-designer:hover {
        background-color: #0062cc;
    }

.inplace-button b {
    display: inline;
}

.s-Toolbar .select2-container {
    margin-top: 2px;
    min-width: 100px;
    margin-right: 6px;
}

.select2-container .select2-choice abbr.select2-search-choice-close {
    right: 26px;
    top: 8px;
}

.select2-container-multi .select2-choices .select2-search-choice {
    margin-top: 7px;
}