/*<editor-fold desc="Colors">*/

:root {
    --color-yellow-light: #FFFFCC;
    --color-red-light: #FFCCCC;
    --color-red-light-50: #ffcccc75;
    --color-lime-light-50: #ccffcc78;
    --color-pink-light: #FFCCFF;
    --color-blue-light: #99CCFF;
    --color-blue-lighter: #d9edf7;
    --color-blue-dark: #31708f;
    --color-azure-light: #CCFFFF;
    --color-turquoise-light: #bce8f1;
    --color-lime-light: #CCFFCC;
    --color-amber-light: #FFBF00;
    --color-purple-light: #CCCCFF;
    --color-green-system: #2eb85c;
    --color-grey-dark: rgba(44, 56, 74, .95);
    --color-grey: rgba(178, 178, 180, .95);
    --color-text: var(--color-grey-dark);
}

.yellow-light-bg-color {
    background-color: var(--color-yellow-light);
}

.red-light-bg-color {
    background-color: var(--color-red-light);
}

.red-light-50-bg-color {
    background-color: var(--color-red-light-50);
}

.lime-light-50-bg-color {
    background-color: var(--color-lime-light-50);
}

.pink-light-bg-color {
    background-color: var(--color-pink-light);
}

.blue-light-bg-color {
    background-color: var(--color-blue-light);
}

.blue-lighter-bg-color {
    background-color: var(--color-blue-lighter);
}

.azure-light-bg-color {
    background-color: var(--color-azure-light);
}

.lime-light-bg-color {
    background-color: var(--color-lime-light);
}

.amber-light-bg-color {
    background-color: var(--color-amber-light);
}

.amber-light-color {
    color: var(--color-amber-light);
}

.purple-light-bg-color {
    background-color: var(--color-purple-light);
}

.green-system-bg-color {
    background-color: var(--color-green-system);
}
.green-system-color {
    color: var(--color-green-system);
}

/*</editor-fold>*/

/*<editor-fold desc="Show operation classes">*/

.input-group-text.border-split-show-operation, .form-control.border-split-show-operation {
    border-bottom: 1px solid var(--cui-input-border-color) !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.badge.badge-select-show-option {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
}

.form-control-sm .badge.badge-select {
    font-size: 14px;
}

/*</editor-fold>*/


/*<editor-fold desc="Entity table classes">*/

.entity-table .dataTables_scrollHead table {
    border: none;
}

.entity-table .dataTables_scrollHead table th {
    border: none !important;
}

.entity-table div.dataTables_scrollBody>table {
    border-top: 1px solid var(--cui-border-color-translucent) ;
}

.entity-table .dataTables_scrollBody table td {
    border: none !important;
}

.entity-table .dataTables_length .form-select {
    border: 1px solid var(--cui-border-color-translucent);
}

/*</editor-fold>*/

/*<editor-fold desc="Navigation menu on the page">*/
/*
 * it didn't work as on the coreui page, so had to add manually
 * https://coreui.io/bootstrap/docs/components/navs-tabs/
 */

.row.nav-row {
    padding-right: calc(var(--cui-gutter-x)* .5);
    padding-left: calc(var(--cui-gutter-x)* .5);
}
.nav-underline-border {
    --cui-nav-underline-border-gap: 0.5rem;
    --cui-nav-underline-border-border-color: var(--cui-border-color);
    --cui-nav-underline-border-border-width: 0.125rem;
    --cui-nav-underline-border-border-width-active: 0.2rem;
    --cui-nav-underline-border-link-padding-x: 0.5rem;
    --cui-nav-underline-border-link-padding-y: 0.5rem;
    --cui-nav-underline-border-link-color: rgba(37, 43, 54, 0.681);
    --cui-nav-underline-border-link-active-color: var(--cui-primary);
    --cui-nav-underline-border-link-disabled-color: rgba(37, 43, 54, 0.38);
    /*--cui-nav-link-color: var(--cui-nav-underline-border-link-color);*/
    --cui-nav-link-disabled-color: var(--cui-nav-underline-border-link-disabled-color);
    /*gap: var(--cui-nav-underline-border-gap);*/
    border-bottom: var(--cui-nav-underline-border-border-width) solid var(--cui-nav-underline-border-border-color);
    max-width: 100%;
    padding-right: 0;
    /*margin-right: calc(var(--cui-gutter-x)* .5);*/
    /*margin-left: calc(var(--cui-gutter-x)* .5);*/
}
.nav-underline-border .nav-link.active, .nav-underline-border .nav-link.active:hover {
    font-weight: 700;
    color: var(--cui-nav-underline-border-link-active-color);
    border-bottom: var(--cui-nav-underline-border-border-width-active) solid currentcolor;
}

.nav-underline-border .nav-link:hover {
    border-bottom: var(--cui-nav-underline-border-border-width-active) solid var(--color-grey);
}

.nav-underline-border .nav-link {
    padding: var(--cui-nav-underline-border-link-padding-y) var(--cui-nav-underline-border-link-padding-x);
    margin-bottom: calc(-1* var(--cui-nav-underline-border-border-width));
    border-bottom: var(--cui-nav-underline-border-border-width) solid transparent;
}
a.nav-link {
    display: block;
    padding: var(--cui-nav-link-padding-y) var(--cui-nav-link-padding-x);
    font-weight: var(--cui-nav-link-font-weight);
    color: var(--cui-nav-link-color);
    text-decoration: none;
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

/*</editor-fold>*/

/*<editor-fold desc="Tab adjustments">*/

.tab-container .tab-content .tab-pane {
    border-top-width: 0 !important;
}

.tab-page-menu {
    margin-top: 10px;
}

/*</editor-fold>*/

.form-control.form-select {
    border-color: var(--cui-input-border-color);
}

.page-menu form .card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.row-crud-list.page-menu {
    margin-top: 10px;
}

.page-menu .alert.alert-danger {
    margin-bottom: 0;
    border-radius: 0;
}

.alert.alert-blue-lighter-bg-color {
    color: var(--color-blue-dark);
    background-color: var(--color-blue-lighter);
    border-color: var(--color-turquoise-light);
}

.hidden {
    display: none;
}

.bold {
    font-weight: bold;
}

/* if we need to hide the label of the form field */
.hide-label label {
    display: none;
}

.form-group-sm .input-group-text {
    padding: .25rem .5rem;
    font-size: .875rem;
    /*border-radius: .25rem;*/
}

.form-group-sm .select2 .selection span.select2-selection {
    min-height: calc(1.5em + .5rem + 2px);
    padding: .25rem .5rem;
    /*font-size: .875rem;*/
}
/* used to hide sidebar project name when bar is narrowed */
.sidebar-narrow-unfoldable .logo-name {
    display: none;
}

.sidebar-narrow-unfoldable:hover .logo-name {
    display: inline;
}

.badge.column-text-dark {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text)
}

.dashboard .logo {
    font-size: 2rem;
    font-weight: 500;
    color: rgba(134, 134, 134, .95);
}

/*<editor-fold desc="Login">*/

.sso-google-icon:before {
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
    background-color: transparent;
    background-position : center center;
    background-repeat:no-repeat;
    background-size: cover;
    background-image : url(/image/sso/google-icon-48.png);
}

/*</editor-fold>*/

/*<editor-fold desc="Modal overlay">*/

body .modal-backdrop {
    z-index: -1;
}

/*</editor-fold>*/

.nav .delimiter {
    border-left: 1px solid var(--color-text);
    height: auto;
    margin-top: 8px;
    margin-bottom: 8px;
}

.tooltip .tooltip-inner {
    max-width: 500px;
}