/* Downloaded from pannis.info/css 2022-12-30 10:22 EST
  * Mutated significantly to add dark mode 2023-04-14 07:07 EDT
  * Added Atkinson Hyperlegible typefaces 2023-06?
  * Should be copied or soft-linked to /css/acedr.css */

@font-face {
    font-family: "Atkinson Hyperlegible";

    src:
        /* modern browsers: */
        url('/fonts/Atkinson-Hyperlegible-Regular-102.woff2')
                format('woff2'),
        url('/fonts/Atkinson-Hyperlegible-Regular-102.woff') format('woff'),

        /* Safari, Android, iOS: */
        url('/fonts/Atkinson-Hyperlegible-Regular-102.ttf') format('truetype');
}

@font-face {
    font-family: 'BigParty4Blue';
    src:
        url('/fonts/BigParty4Blue-0f5b.woff2') format('woff2');
/*        url('/fonts/BigParty4Blue-2575.woff') format*/
}

:root {
    --hue: 223;
    --light: hsl(var(--hue), 10%, 90%);
    --dark: hsl(var(--hue), 10%, 30%);
}

body {
    background-color: var(--light);
    color: var(--dark);
    font-family: "Atkinson Hyperlegible";
}

/* If Dark mode checked, switch CSS to dark mode*/
body:has(.switch__input:checked) {
    background-color: var(--dark);
    color: var(--light);
}

.fish {
    font-family: 'BigParty4Blue';
}

input[type='text'] {
    /*background-color: #fff;*/
    border: 1px solid #aaa;
    border-radius: 4px;
    width: 100%;
    margin-bottom: 1em;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1em;
}

textarea {
    /*background-color: #fff;*/
    border: 1px solid #aaa;
    border-radius: 4px;
    width: 100%;
    margin-bottom: 1em;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1em;
}

.appended_note {
    margin-top: -1em;
}

/* //// spread stuff out */

.button_group {
    display: flex;
    justify-content: space-between;
}

/* //// CSS for the save buttons */
.save_button {
    color: black;
    background-color: springgreen; /*tomato;*/
    font-size: 1.1em;
    border: 2px solid black;
    border-radius: 4px;
    padding: 0.2em 1em 0.2em 1em;
}

/* //// make a elements look like buttons */

.home_button {
    text-decoration: none;
    border: 2px solid black;
    display: block;
    padding: 0.1em 0.5em 0.1em 0.5em; /*4px;*/
    min-width: 8rem;
    /*text-align: center;*/
    border-radius: 4px;
    /*color: black;*/
    background-color: floralwhite;
}

.main_button {
    text-decoration: none;
    border: 2px solid black;
    display: block;
    padding: 4px;
    min-width: 8rem;
    text-align: center;
    border-radius: 4px;
    color: black;
    background-color: goldenrod;
}

.item_button {
    text-decoration: none;
    border: 2px solid black;
    display: block;
    padding: 4px;
    min-width: 5rem;
    text-align: center;
    border-radius: 4px;
    color: black;
    background-color: orange;
}

.disabled_item_button {
    text-decoration: none;
    border: 2px solid black;
    display: block;
    padding: 4px;
    min-width: 5rem;
    text-align: center;
    border-radius: 4px;
    color: black;
    background-color: #eeeeee;
}

.tag_button {
    text-decoration: none;
    border: 2px solid black;
    flex: 1 1 auto;
    padding: 0.3em;
    /* text-align: center;*/
    border-radius: 4px;
    color: black;
    background-color: azure;
    display: block;
    /*width: 100%;*/
}

.tags_container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    align-items: center;
}

/* //// copied from ebp.css */

table {
    border: 1px solid #1C6EA4;
    background-color: #EEEEEE;
    text-align: left;
    border-collapse: collapse;
}

table td,
table th {
    border: 1px solid #AAAAAA;
    padding: 3px 2px;
}

table tbody td {
    font-size: 13px;
}

table tr:nth-child(even) {
    background: #D0E4F5;
}

table thead {
    background: #1C6EA4;
    background: -moz-linear-gradient(
	top, #5592bb 0%, #327cad 66%, #1C6EA4 100%
    );
    background: -webkit-linear-gradient(
	top, #5592bb 0%, #327cad 66%, #1C6EA4 100%
    );
    background: linear-gradient(
	to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%
    );
    border-bottom: 2px solid #444444;
}

table thead th {
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
    border-left: 2px solid #D0E4F5;
}

table thead th:first-child {
    border-left: none;
}

table tfoot {
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
    background: #D0E4F5;
    background: -moz-linear-gradient(
	top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%
    );
    background: -webkit-linear-gradient(
	top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%
    );
    background: linear-gradient(
	to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%
    );
    border-top: 2px solid #444444;
}

table tfoot td {
    font-size: 14px;
}

table tfoot .links {
    text-align: right;
}

table tfoot .links a {
    display: inline-block;
    background: #1C6EA4;
    color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 5px;
}

/* ////// Making A elements look like BUTTONS */
.bouton-new {
    display: block;
    text-decoration: none;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
}

.bouton {
    display: inline-block;
    background-color: white;
    color: blue; /*black;*/
    /* padding: 1em 1.5em;*/
    /*padding: 0.07rem 0.7rem;*/
    padding: 0.075rem 1rem; /*0.7rem;*/
    text-decoration: none;
    border: 1px solid #c8c8c8;
    border-radius: 0.3rem; /* 0.5 rem; */
}

/* ////// Responsive stuff via flexboxes */

/* Style the container */
.responsive-form-container {
    border-radius: 5px;
    background-color: #f2f2f2;
    /*padding: 20px;*/
}


.form-row {
    display: flex;
    align-items: baseline;
    /*background-color: magenta;*/
}

.form-row:nth-child(even) {
    /*background-color: green;*/
}

.col-label {
    /*background-color: cyan;*/
    /*flex-grow: 1;*/
    text-align: right;
    width: 25%;
    padding-right: 1em;
}

.col-input {
    /*background-color: yellow;*/
    /*flex-grow: 3;*/
    width: 75%;
}

input[type=text], textarea {
    padding-right: 1rem;
    width: 90%;
}

/* ////// Stuff for checkboxes-as-sliders */
.form_input {
    padding-bottom: 1.2em;
}

/*
.select2-container {
    width: 100% !important;
}
*/

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 40px; /*60px;*/
    height: 23px; /*34px;*/
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 17px; /*26px;*/
    width: 17px; /*26px;*/
    left: 2.7px; /*4px;*/
    bottom: 2.7px; /*4px;*/
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #34c759;
}

input:focus + .slider {
    box-shadow: 0 0 1px #34c759;
}

input:checked + .slider:before {
    -webkit-transform: translateX(17px); /*26px);*/
    -ms-transform: translateX(17px); /*26px);*/
    transform: translateX(17px); /*26px);*/
}

/* Rounded sliders */
.slider.round {
    border-radius: 23px; /*34px;*/
}

.slider.round:before {
    border-radius: 50%;
}

.number-align {
    font-family: monospace;
    text-align: right;
}