/*=== Variables ===*/
:root {
    --primary-color: rgb(49,189,239); /* #31bdef */
    --primary-font-color: rgb(87,83,77); /* #57534d */
    --grey-100: rgb(241,241,241);
    --grey-200: rgb(233, 233, 233);
    --grey-500: rgb(204, 204, 204);
    --grey-600: rgb(196, 196, 196);
}

/* Base styles */
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, div, table {
    padding: 0;
    margin: 0;
    border: 0;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    /* Margin bottom by footer height (Sticky footer) */
    margin: 0;
    margin-bottom: 60px;
    font: normal 62.5%/1.4em "Lucida Grande", "Lucida" Verdana, Geneva, Helvetica, Arial, sans-serif;
    background: #fff;
    color: #444;
}


/* Text */
p {
    font: 13px Arial;
    color: var(--primary-font-color);
}

span {
    color: var(--primary-font-color);
}
    /* Override above rule so color follows text-danger */
    span.text-danger span {
        color: unset;
    }

.text {
    font: 14px Arial var(--primary-font-color);
}

.text-bold {
    font: 13px Arial;
    color: var(--primary-font-color);
    font-weight: bold;
    margin: 2px;
}


/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

/* Anchor Link Styles */
a {
    text-decoration: none;
    background: transparent;
    color: #31bdef;
}

    a:hover {
        color: #f4a21e;
    }

    a:active {
        color: #9cf;
    }

.logo-image {
    width: 75px; /* Or any desired width */
    height: auto; /* Maintain aspect ratio */
    display: inline-block; /* Or float: left; depending on your layout */
    margin-right: 10px; /* Add some spacing */
}

/*=== Bootstrap Overrides ===*/

/* Reset font-size */
/* Update in bootstrap.min.css as well --bs-body-font-size: 0.75rem  */
.form-select, .form-control, .dropdown-menu {
    font-size: 0.75rem;
}

.required::after {
    content: "*";
    font-weight: bold;
    color: red;
}

.btn {
    border: none;
}

.fs-7 {
    font-size: 14px;
}

.fs-8 {
    font-size: 12px;
}

/*=== Utilities ===*/
.cursor-pointer {
    cursor: pointer;
}

.color-primary {
    color: var(--primary-color);
}

.font-color-primary {
    color: var(--primary-font-color);
}

.border-primary-2, .border-primary-2:focus-visible {
    border-color: var(--primary-color);
    border-width: 2px;
}

.light-bg-section {
    background-color: var(--grey-100);
}

.bg-color-grey-200 {
    background-color: var(--grey-200);
}


/* Buttons */
.btn-primary {
    border: 1px solid #31bcef;
    background: #31bcef;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    margin: 10px;
}

.btn-danger {
    border: 1px solid #DC4C64;
    padding: 5px 10px;
    border-radius: 10px;
    margin: 10px;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active {
    border: 1px solid #31bcef;
    background: #fff;
    color: #31bcef;
}

.btn-danger:hover, .btn-danger:active, .btn-danger:not(:disabled):not(.disabled):active {
    border: 1px solid #DC4C64;
    background: #fff;
    color: #DC4C64;
}

/*=== Pagination ===*/
.pagination button {
    border: 1px solid var(--grey-200);
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
}

    .pagination button:not(.disabled):hover, .pagination button:not(.disabled):active {
        border: 1px solid var(--grey-600);
    }

    .pagination button.disabled {
        pointer-events: none;
    }

button.pagination-page {
    border-radius: 0px;
}

.pagination-page:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.pagination-page:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.pagination-page.active {
    background-color: white;
}

/* Textbox */
.textbox {
    border: 1px solid #D3D3D3;
    background: #ffffff;
    outline: none;
    color: #57534d;
    border-radius: 5px;
    padding: 5px;
    font-size: 13px;
}

    .textbox:focus {
        border: 1px solid #31bdef;
    }

/* Drop down*/
.item-list {
    border: 1px solid #D3D3D3;
    border-radius: 5px;
    padding: 5px;
    outline: none;
    color: #57534d;
}

    .item-list:focus {
        border-color: #31bdef;
    }

    .item-list option {
        color: #57534d;
    }

    .item-list:disabled {
        background: #eee;
    }

/* Form group */
.form-group, .form-check {
    text-align: left;
}

.form-control {
    font-size: 13px;
}

.form-group > * {
    margin: 4px;
}

/*=== Checkboxes ===*/
.tick-checkbox[type=checkbox] {
    border-radius: 0;
    border: 2px solid var(--primary-color);
    width: 20px;
    height: 20px;
}

.tick-checkbox-label {
    line-height: 28px;
}

/*=== Table ===*/

/*table.table {
    border: 1px solid var(--primary-color);
}

.table th {
    border-top: 1px solid var(--primary-color);
}

tr:nth-child(2n+1) {
    background: #ffffff;
}

tr:nth-child(2n) {
    background: #f6f6f6;
}*/

table thead .sortable {
    cursor: pointer;
    background-position: right;
    background-repeat: no-repeat;
    padding-right: 30px !important;
}

    table thead .sortable.asc {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==);
    }

    table thead .sortable.desc {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII=);
    }

    table thead .sortable.both {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAkElEQVQoz7XQMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC);
    }

table tbody tr.highlightable.active td {
    background-color: var(--primary-color);
    color: white;
}

table .row-deleted {
    background-color: #f0f0f0; /* light grey */
    color: #888; /* muted text */
    text-decoration: line-through;
}

/*=== Dashboard Panels ===*/
.panel {
    border-radius: 10px;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    padding: 1.5rem;
    background-color: white;
}

.panel-control-button {
    color: var(--primary-font-color);
    background-color: var(--grey-200);
    white-space: nowrap;
}

    .panel-control-button:not(.disabled):hover,
    .panel-control-button:not(.disabled):active,
    .panel-control-button.show {
        background-color: var(--grey-600);
    }

.panel-toggleable-wrapper > div {
    display: none;
}

/*=== Pagination ===*/
.pagination button {
    border: 1px solid var(--grey-200);
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
}

    .pagination button:not(.disabled):hover, .pagination button:not(.disabled):active {
        border: 1px solid var(--grey-600);
    }

    .pagination button.disabled {
        pointer-events: none;
    }

button.pagination-page {
    border-radius: 0px;
}

.pagination-page:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.pagination-page:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.pagination-page.active {
    background-color: white;
}

/*=== Search Bar ===*/
.search-bar-input {
    width: 200px;
}

    .search-bar-input:focus-visible {
        outline: none;
    }

/* Modal */
.modal-body {
    margin: auto;
}

/* Split view */
.split-view {
    display: flex;
    flex-direction: row;
}

.list-panel {
    width: 200px;
}

.detail-panel {
    width: 100%;
}



/* Nav bar */
#navbar a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

#navbar .nav-link {
    color: #31bdef
}

#navbar .dropdown:hover {
    background-color: #31bdef;
    border-radius: 0.25rem;
}

    #navbar .dropdown:hover .nav-link {
        color: #fff;
    }

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

#navbar .dropdown-menu {
    background-color: #31bdef;
}

#navbar .dropdown-item {
    color: #fff;
}

    #navbar .dropdown-item:hover, #navbar .dropdown-item:focus, #navbar .dropdown-item:active {
        background-color: #f4a21e;
    }

#navbar .dropdown:hover .dropdown-menu {
    display: block;
}

nav.border-bottom {
    border-bottom: 1px solid #31bdef;
}



/* Sticky footer styles */
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
    color: #369;
    font-size: 1em;
    border-top: 1px solid #ccc;
    padding: 1em 0;
    background: #f6f6f6;
    text-align: center;
}

footer.border-top {
    border-top: 1px solid #e5e5e5;
}

/* Pagination */
.pagination .page-link {
    color: #31bdef;
}

.pagination .page-item.active .page-link {
    background-color: #31bdef;
    border-color: #31bdef;
}

/* Wrap Json data */
pre.wrap-data {
    text-wrap: wrap;
}