/*

This file is for any customisation of the main css theme (style.css)

This should be more theme specific styling. If there is anything that is a common feature/layout component
then the common-style.css file should be used as this is always included for every theme

*/

:root {
    --ws-nav-link-item-height: 70px;
    --access-evo-tab-header-height: 0px
}

/*
 *
 * This section contains rules that override the default Admiria theme rules
 *
 */

body {
    background: #f4f1ef;
    font-size:13px;
    line-height: 24px;
}

html {
    background: #f4f1ef;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

h1 {
    line-height: 60px;
    font-size: 45px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
}

h2 {
    line-height: 24px;
    font-size: 24px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
}

h3 {
    line-height: 24px;
    font-family: "Roboto", sans-serif;
    font-size: 22px;
    font-weight: 400;
}

h4 {
    line-height: 24px;
    font-size: 18px;
    font-family: "Roboto", sans-serif;
    font-weight: 500;

}
h5 {
    line-height: 24px;
    font-size: 15px;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
}

a {
    outline: 0;
    text-decoration: none;
}

.footer {
    font-size: 13px;
}

.spinner:before {
    border-color: #000000 rgba(103, 168, 228, 0.3);
}

.spinner:after {
    background-color: #000000;
}

/* Menu */

.topbar {
    /* Must be under 99 for access button to display */
    z-index: 95;
}

.topbar .navbar-custom {
    background-color: #27365E !important;
}

.button-menu-mobile {
    background-color: #27365E !important;
}

.topbar .navbar-custom h3, .topbar .navbar-custom h2, .topbar .navbar-custom h1 {
    color: #ffffff;
}

.topbar .navbar-custom .text-muted {
    color: #ffffff !important;
}

.topbar .notification-list .nav-link.text-muted {
    color: #ffffff !important;
}

.logo {
    font-size: 18px;
}

.navbar-custom {
    background-color: #ffffff;
}

.notification-list .nav-link {
    line-height: var(--ws-nav-link-item-height);
}

.notification-list .nav-link.text-muted {
    color: #333333 !important;
}

.profile-dropdown {
    width: 190px;
}

.profile-dropdown i {
    font-size: 14px;
}

.menu-title {
    font-size: 11px;
}

.side-menu {
    background-color: #27365E !important;
}

#sidebar-menu {
    background-color: inherit !important;
}

.side-menu .ws-logo.ws-logo-light {
    display: block !important;
}

.side-menu .ws-logo.ws-logo-dark {
    display: none !important;
}

.side-menu .topbar-left {
    background-color: inherit !important;
}

#sidebar-menu > ul > li > a {
    background-color: inherit !important;
    color: #ffffff !important;
    /*text-shadow: 1px 1px black;*/
    font-family: "Roboto", serif;
    font-size: 13px;
    line-height: 24px;
}

#sidebar-menu .menu-title {
    color: #ffffff !important;
    /*text-shadow: 1px 1px black;*/
    font-family: "Roboto", serif;
}

#sidebar-menu > ul > li.nav-active > a {
    color: #ffffff !important;
    background-color: inherit !important;
}

#sidebar-menu ul ul a {
    color: #ffffff !important;
    /*text-shadow: 1px 1px black;*/
    font-family: "Roboto", serif;
    font-size: 13px;
}

#sidebar-menu > ul > li > a.active {
    color: #ffffff !important;
    font-weight: bold;
}

#sidebar-menu > ul > li > a.active i {
    color: #ffffff;
}

#wrapper.enlarged .left.side-menu {
    z-index: 15;
}

.page-title {
    color: #333333;
}

/****** boostrap custom ****/

/* see note in style.css about dropdown-menu rule */

.bg-primary {
    background-color: #000000 !important;
}

.text-primary {
    color: #000000 !important;
}

.badge-primary {
    background-color: #000000;
}

/* Navs & Tabs */
.nav-pills .nav-item.show .nav-link, .nav-pills .nav-link.active {
    background-color: #000000;
}

.nav-pills > .active > a > .badge {
    color: #000000;
}

/* List Group */

.list-group-item.active:hover .list-group-item-text {
    color: #000000;
    font-weight: bold;
}

.list-group-item.active:focus .list-group-item-text {
    color: #000000;
}

.list-group-item.active .list-group-item-text {
    color: #000000;
}

.list-group-item.active > .badge {
    color: #000000;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label:before {
    background-color: #000000;
}

/* Alerts */
.alert-danger {
    color: #000000;
}

/* Buttons */

.btn {
    font-family: "Roboto", sans-serif;
    font-size: 13px;
    line-height: 18px;
}

.btn-primary {
    background-color: #000000;
    border: 1px solid #000000;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover,
.open > .dropdown-toggle.btn-primary, .btn-outline-primary.active, .btn-outline-primary:active,
.show > .btn-outline-primary.dropdown-toggle, .btn-outline-primary:hover, .btn-primary.active,
.btn-primary:active, .show > .btn-primary.dropdown-toggle {
    background-color: #000000;
    border: 1px solid #000000;
}

.btn-link:hover {
    color: #000000;
}

.btn-outline-primary {
    color: #000000;
    border-color: #000000;
}

/* Card */

.card-primary {
    background-color: #000000;
    border-color: #000000;
}


/* Tabs & Accordions */

.nav-tabs .nav-link, .nav-pills .nav-link {
    font-size: 13px;
    font-weight: 700;
}

.nav-tabs-custom > li > a::after {
    background: #000;
}

.nav-tabs-custom > li > a.active {
    color: #000000 !important;
}


/* Pagination */

.page-link {
    color: #000000;
}

.page-item.active .page-link {
    background-color: #000000;
    border-color: #000000;
}

/* Progressbar */

.progress-bar {
    background-color: #000000;
}

/* Sweet alert */

.swal2-modal {
    font-family: "Roboto", sans-serif;
}

.swal2-popup {
    font-size: 1.6rem !important;
}

.swal2-icon.swal2-question {
    color: #000000;
    border-color: #000000;
}

.swal2-modal .swal2-file:focus, .swal2-modal .swal2-input:focus, .swal2-modal .swal2-textarea:focus {
    border: 2px solid #000000;
}

/* Nestable */

.custom-dd .dd-list .dd-item .dd-handle:hover {
    color: #000000;
}

.custom-dd-empty .dd-list .dd3-handle:hover {
    color: #000000;
}

.custom-dd-empty .dd-list .dd3-content {
    font-family: "Roboto", serif;
}

/* Alertify */
.alertify-logs > *, .alertify-logs > .default {
    background-color: #000000;
}

/* Email */

.message-list li.active,
.message-list li.active:hover {
    -webkit-box-shadow: inset 3px 0 0 #000000;
    box-shadow: inset 3px 0 0 #000000;
}

/* Tables */

th {
    font-family: "Roboto", sans-serif;
    font-size: 13px;
    font-weight: 700;
}

.table > tbody > tr > td, .table > tfoot > tr > td, .table > thead > tr > td {
    font-family: "Roboto", sans-serif;
    font-size: 13px;
}

/* Responsive Table */

table.focus-on tbody tr.focused th {
    background-color: #000000;
}

table.focus-on tbody tr.focused td {
    background-color: #000000;
}

.table-rep-plugin .btn-default.btn-primary {
    background-color: #000000;
    border-color: #000000;
}

.table-rep-plugin tbody th {
    font-family: "Roboto", sans-serif;
    line-height: 24px;
    font-size: 11px;
}

.table-rep-plugin .checkbox-row input[type="checkbox"]:checked + label::before {
    background-color: #000000;
    border-color: #000000;
}

/* Range slider */

.irs-from, .irs-to, .irs-single {
    background: #000000;
}

.irs-from:after, .irs-to:after, .irs-single:after {
    border-top-color: #000000;
}

/* Form elements */

label {
    font-weight: 700;
    line-height: 20px;
    font-size: 13px !important;
}

.form-control {
    font-family: "Roboto", sans-serif;
    font-size: 13px;
}

.custom-control-input:checked ~ .custom-control-indicator {
    background-color: #000000;
}

.custom-control-input:focus ~ .custom-control-indicator {
    -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #000000;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #000000;
}

.has-success .form-control {
    border-color: #000000;
}

/**- Form advanced (plugins etc.) -**/

.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover, .datepicker table tr td.today, .datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover, .datepicker table tr td.today:hover, .datepicker table tr td.selected,
.datepicker table tr td.selected.disabled, .datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected:hover {
    background-color: #000000 !important;
}

/*.select2-container .select2-selection--single .select2-selection__rendered {*/
/*    !* This matches the BS5 select2 theme - though still looks a bit wonky *!*/
/*    line-height: 1.5;*/
/*}*/

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #000000;
}

.select2-dropdown {
    border: 1px solid #e3e3e3 !important;
    padding-top: 5px !important;
}

/* css switch */

input[switch] + label {
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
}

input[switch]:checked + label {
    background-color: #000000;
}

input[switch="primary"]:checked + label {
    background-color: #000000;
}

/* form editor */

.mce-menu-item:hover, .mce-menu-item.mce-selected, .mce-menu-item:focus {
    background-color: #000000;
}

/* form wizard */
.wizard > .steps a,
.wizard > .steps a:active,
.wizard > .steps a:hover {
    font-weight: bold;
}

.wizard > .steps .current a,
.wizard > .steps .current a:active,
.wizard > .steps .current a:hover {
    background-color: #27365e;
}

.wizard > .steps .disabled a,
.wizard > .steps .disabled a:active,
.wizard > .steps .disabled a:hover
{
    background-color: #e9f2fb;
    color: #959595;
}

.wizard > .steps .done a,
.wizard > .steps .done a:active,
.wizard > .steps .done a:hover {
    background-color: #e9f2fb;
    color: #000000;
}

.wizard > .steps .disabled a .number,
.wizard > .steps .disabled a:active .number,
.wizard > .steps .disabled a:hover .number
{
    border-color: #959595;
}

.wizard > .steps .done a .number,
.wizard > .steps .done a:active .number,
.wizard > .steps .done a:hover .number {
    border-color: #000000;
}

.wizard > .actions .disabled a,
.wizard > .actions .disabled a:active,
.wizard > .actions .disabled a:hover {
    background-color: #000000;
}

.wizard > .actions a,
.wizard > .actions a:active,
.wizard > .actions a:hover {
    background-color: #000000;
}

/* summernote */

.note-btn-group .dropdown-menu > li > a {
    text-decoration: none;
}

/* calendar */

.fc-state-active, .fc-state-down {
    background-color: #000000;
    border-color: #000000;
}

.fc-event {
    background-color: #000000;
}

/* timeline */

.activity-feed .feed-item::after {
    border: 1px solid #000000;
}

.cd-timeline-img {
    background-color: #000000;
}

.cd-timeline-content .cd-read-more {
    background: #000000;
}

/* Maps */

.gmaps-overlay {
    background: #000000;
}

.gmaps-overlay_arrow.above {
    border-top: 16px solid #000000;
}

.gmaps-overlay_arrow.below {
    border-bottom: 16px solid #000000;
}

/*
 *
 * End of Admiria Theme overrides
 *
 */

/******
 *
 * These are additional style rules that were at the top/bottom of the old style.css file
 * Now they are all grouped together here
 *
 ******/

/* get rid of the weird double border in the table headers */
.table.table-bordered thead th {
    border-top: 0;
    border-bottom: 0;
}

.ws-logo.ws-logo-light {
    display: none;
}

.ws-logo.ws-logo-dark {
    display: block;
}

.report-chart-card .link_span {
    color: #212529 !important;
}

.wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active {
    background: #000000 !important;
    color: #ffffff !important;
    font-family: "Roboto", serif !important;
}

.reportChartDescription {
    color: #7f878d;
}

.daterangepicker {
    background-color: #ffffff;
}

.row_filter{
    padding: 10px;
    margin-bottom: 10px;
    position: relative;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

.btn-success, .btn-success:hover, .btn-success:focus {
    background-color: #4ac18e !important;
    color: #ffffff;
    border-color: #4ac18e !important;
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #30323e;
    border-color: #30323e;
}

.btn-primary:hover  {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

.btn.disabled, .btn:disabled {
    opacity: .5;
}

a.btn:visited {
    color: #ffffff;
}

/* This was found - is it needed? as the rule above is used to override... */
a,a:hover,a:active,a:visited {
    color: #6f8c9f;
}

.dropdown .dropdown-item, .dropdown .dropdown-item .btn-link {
    color: #6f8c9f !important;
    font-size: 13px;
    font-family: "Roboto", sans-serif !important;
    font-weight: 100 !important;
    line-height: 24px;
    text-decoration: none;
}

.dropdown a:hover, .dropdown .dropdown-item .btn-link:hover {
    text-decoration: underline;
}

.modal-open .select2-dropdown {
    z-index: 10060;
}

.modal-open .select2-close-mask {
    z-index: 10055;
}

.table-bordered {
    border:1px solid var(--bs-border-color)
}

.table-bordered td,
.table-bordered th {
    border:1px solid var(--bs-border-color)
}

.autoComplete_wrapper > input::placeholder {
    color: inherit;
}

.autoComplete_wrapper > input:hover::placeholder {
    color: inherit;
}

.autoComplete_wrapper > input:focus::placeholder {
    color: inherit;
}

.autoComplete_wrapper > input:focus::selection {
    background-color: #000;
    color: #fff;
}

.autoComplete_wrapper > input::selection {
    background-color: #000;
    color: #fff;
}

.autoComplete_wrapper > input {
    color: inherit;
}

.autoComplete_wrapper > input:hover {
    color: inherit;
}

.autoComplete_wrapper > input:focus {
    color: inherit;
    border: none;
}

.form-control.warning-input {
    background-color: #fff1da;
}

/* These override the BS defaults */

/*
A bunch of custom CSS purely to allow for a bar at the top of the page for push users to use Access Evo if applicable
Due to the many different elements needing top and margin-top be very careful as there is a mix of fixed elements
*/
.search-wrap {
    transform: translate3d(0, -200%, 0)
}

.topbar {
    top: var(--access-evo-tab-header-height, 0px);
}

.left.side-menu {
    top: var(--access-evo-tab-header-height, 0px);
}

@media (min-width: 1025px)  {
    .fixed-content-header{
        top: calc(var(--ws-fixed-content-header-top, 0px) +  var(--access-evo-tab-header-height, 0px));
    }
}

@media (max-width: 1024px) {
    .fixed-content-header {
        top: calc(var(--ws-fixed-content-header-top, 0px) +  var(--access-evo-tab-header-height, 0px));
    }
}