/* System: Anything that is related to core system functions and should not be changed per client or per user. */

/* *** BEGIN *** System *** General *** */
html {
    /* Parent Layout */
    /* Box Model */
    /* Positioning */
    /* Display */
}

body {
    /* Parent Layout */
    /* Box Model */
    /* Positioning */
    /* Display */
    /* Center and scale the image nicely */
    background-color: steelblue;
    background-image: url('../static/images/site_background.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

nav {
}

pre {
    white-space: pre-wrap;
    word-break: keep-all;
}

a {
    color: var(--color-d5);
}
a:hover {
    color: var(--color-d2);
}

label {
    color: #824240; /*#880000*/ /* Dark red for labels */
    color: var(--info-color-darkest);
}

fieldset {
    /*border: solid thin #eee;*/
    /*border-top: solid thin #eee;*/
    /*border-bottom: solid thin #eee;*/
}

input:required, select:required {
    /*background-color: red;*/
    background-color: var(--danger-color-lighter);
    border-color: var(--danger-color-mid);
    /*border-bottom: dashed medium;
     *    border-bottom: dashed thin;*/
}

input:required:valid {
    /*color: red;*/
    /*border: solid thin green;*/
}

input:required:invalid {
    /*color: red;*/
    /*border: solid thin red;*/
}
/* *** END *** System *** General *** */


/* *** BEGIN *** Global *** Font Family, Size, and Weight *** */
pre, code, kbd, samp, var {
    font-family: 'Roboto Mono', 'Noto Sans Mono', 'Courier New',
    monospace;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 500; /* 700 looks too heavy */
}

.h1, h1 {
    font-size: 1.75rem;
}
.h2, h2 {
    font-size: 1.5rem;
}
.h3, h3 {
    font-size: 1.4rem;
}
/* *** END *** Global *** Set Font Family *** */


/* *** BEGIN *** Global *** Permission Checks and Roles *** */
section.administrator_check {
    /*color: var(--warning-fg-color);*/
    /*background-color: var(--warning-bg-color);*/
    /*background-image: linear-gradient(to right, rgba(207,179,60,.5) 0%, rgba(207,179,60,.25) 5%, rgba(207,179,60,.25) 95%, rgba(207,179,60,.5) 100%);*/
    border-color: var(--warning-border-color);
    box-shadow: 0rem 0rem .5rem 0rem var(--warning-bg-color);
}

section.manager_check {
    border-color: var(--danger-border-color);
    box-shadow: 0rem 0rem .5rem 0rem var(--danger-bg-color);
}
/* *** END *** Global *** Permission Checks and Roles *** */








.navbar {
    /*color: var(--default-fg-color);
     *    background-color: var(--default-bg-color);
     *    border-color: var(--default-border-color);*/
}

.navbar-nav {
    /*color: var(--default-fg-color);
     *    background-color: none;*/
    /*background-color: var(--default-bg-color);
     *    border-color: var(--default-border-color);*/
}

.nav-item {
    color: var(--default-fg-color);
    /*background-color: var(--default-bg-color);
     *    border-color: var(--default-border-color);*/
}

.nav-link {
    /*color: var(--default-fg-color);*/
    /*background-color: var(--default-bg-color);
     *    border-color: var(--default-border-color);*/
}

.nav-pills .nav-link.active {
    color: var(--default-fg-color);
    background-color: var(--default-bg-color);
    border-color: var(--default-border-color);
}


/* *** BEGIN *** Global *** Group List Menu *** */
/* Works together with toggle_group_list_item({element_id:'the_id_to_show', class_name:'name_of_group'}) */
.group_list_item {
    display: none;
}

.group_list_item_show {
}

.group_list_menu {
    position: sticky;
    top: 1rem;
    right: 1rem;
    float: right;

    width: 15rem;

    background-color: hsla(0, 0%, 100%, .8);

    z-index: 99;
    border: solid thin hsla(0, 0%, 75%, .8);

    padding: .5rem 0rem;
}

.group_list_menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.group_list_menu button {
    margin: .1rem 0;
    padding: .1rem;

    border: solid thin hsla(0, 0%, 75%, .2);
    background-color: unset;
    width: 100%;

    font-weight: bold;

    /* border-radius: .4rem; */
}

.group_list_menu button:hover {
    border: solid thin hsla(0, 0%, 60%, 1);
    background-color: hsla(0, 0%, 75%, 1);
}
/* *** END *** Global *** Group List Menu *** */




.form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
    opacity: .85;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

/* .btn-link /*, .page-link, .page-item, .paginate_button, .active, .page-item.active*/ { */
    color: var(--link-fg-color);
    background-color: var(--link-bg-color);
}


/* This is for the datatables. */
.page-item.active .page-link {
    color: var(--link-fg-color);
    background-color: var(--link-bg-color);
}

/* *** END *** Global *** Navigation, Links, and Buttons *** */



.page_help {
    float: right;
}

.page_links {
    float: right;
}


.results_message {
    font-size: 1.6em;
    background-color: yellow;
}

.results_table td {
    background-color: lightyellow;
}




.obj {
    position: relative;
}

.obj_edit_abs {
    /*border: solid thin pink;*/
    position: absolute;
    top: 0rem;
    right: 0rem;
    margin: .1rem .8rem;
    padding: .2rem;
    color: orange;
}

.obj_edit_abs:hover {
    border: solid thin gray;
    border-radius: .25em;
    position: absolute;
    top: 0em;
    right: 0;
    margin: .1rem .8rem;
    padding: .2rem;
    background: rgba(255,255,255,.8);
    color: orange;
    font-size: 1.3rem;
}

.obj_edit_abs:hover::after {
    content: "edit";
}


#edit_object_field_value {
    position: fixed;
    top: 0;
    right: 0;
    background: white;
    border: solid thin black;
    margin: .25rem;
    padding: .5rem;
    opacity: .5;
}



/* *** BEGIN *** Global *** Svelte specific that needs to be merged in *** */
.svelte_target section.obj {
    margin: 1rem 0rem;
    padding: .5rem .5rem;
    /* border: solid thin hsla(0,0%,90%,1); */
}

.svelte_target .input_container {
    margin: .25rem 0rem;
}

.svelte_target label {
    font-weight: bold;
}

.svelte_target .label_select_value {
    font-size: smaller;
    color: hsla(0,0%,50%,1);
}

.svelte_target .obj_type_main {
    border: solid thin hsla(0,0%,90%,1);
}
/* *** BEGIN *** Global *** Svelte specific that needs to be merged in *** */