/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 * NOTE: I removed the "require tree" statement
 * files in the resources directory should be loaded if and only if they are needed
 *



 */

/* Common elements */
/*body *{outline:none;}
body{font:small/1.2em arial,helvetica,clean,sans-serif;font:x-small;}
table{font-size:inherit;font:x-small;}*/
td{vertical-align:top;}
html>body{font:83% arial,helvetica,clean,sans-serif;}
code, select, input {font-size:100%}
pre {font-size: 150%; color: #666666; background-color: #eeeeee; padding-top: 20px; margin-right: 40px;}
label {cursor:pointer; display: block;}
a,a:visited{text-decoration:none;}
a:hover{ text-decoration:underline;}
a.underlined {text-decoration: underline;}
#system_message a {color: white; text-decoration: underline;}
#system_message {text-align: center; margin: 10px; color: white; background-color: red; font-weight: bold; padding: 4px;}
#public_computer_message {text-align: center; margin: 10px; color: white; background-color: red; font-weight: bold; padding: 4px;}
/*#sidebar {text-align: center; margin: 0 10px;}*/
.resource_tab {padding: 4px 15px; margin: 6px 6px 6px 0; background-color: white; cursor: pointer; border: solid 1px #ddd; white-space: nowrap;}
#header_cell {padding-top: 5px; line-height: 20px;}
/*#title {padding-top: 30px; padding-bottom: 8px; font-size: x-large; font-weight: bold; vertical-align: bottom; }*/
#logged_in {white-space: nowrap; padding-bottom: 6px; text-align: right; vertical-align: bottom;}
#nav_cal {background-color: white; margin: 10px; padding: 5px; border: solid 1px #ddd; text-align: center;}
.nav_cal_header{text-align: center; font-weight: bold;}
#m_calendar {background-color: white; border-width: 1px; border-style: solid; border-color: #ddd; border-collapse: collapse;}
.day_header {padding: 2px; border-width: 1px; border-style: solid; }
.week_header {padding: 2px; border-width: 1px; border-style: solid; }
.calendar_cell {border-width: 1px; border-style: solid; border-color: #bbb;}
/*.billing_table {table-layout: fixed; width: max-content; border-collapse: collapse; border: solid 1px; cellpadding: 3px; cellspacing: 0;}*/
.billing_table {border-collapse: collapse;}
.billing_table th, .billing_table td {border: solid 1px #ddd; padding: 3px; text-align: center}
.billing_total {text-align: right; margin-bottom: 0px;}
/*.view_tabs_dropdown {margin-top: 11px;}
.view_tabs_no_dropdown {margin-top: 15px;}*/
/*#view_tabs {height: 20px; padding-top: 11px; vertical-align: bottom;}*/
.error {color: red}
.session {padding: 6px; margin: 0px;}
.date_number {font-weight: bold;}
.add_link {text-align: right;}
.right {text-align: right;}
.left {text-align: left;}
.w_day_header {padding: 6px; text-align: left;}
.w_cell {border-top: solid 1px #ddd; border-bottom: solid 1px #ddd;}
.calendar {border-collapse: collapse;}
.vertical_spacer {margin: 0; padding: 0; height: 3px; line-height: 1px; font-size: 1px;}
.d_row {border-top: solid 1px #ddd; border-bottom: solid 1px #ddd;}
.d_header_cell {text-align: right; padding: 0px 6px;}
.s_data {font-size: larger; margin-top: 10px;}
.s_data td {padding: 6px;}
.p_data {margin-top: 10px;}
.p_data th {font-size: larger; padding: 6px;}
.p_data td {padding: 2px 6px;}
.v_header {text-align: right; font-weight: bold; vertical-align: middle;}
/*.t_header {text-align: right; font-weight: bold; vertical-align: top;}*/
.smallnote {font-size: smaller;}
.nowrap  {white-space: nowrap;}
.holiday {padding: 6px; font-weight: bold; }
.m_holiday {text-align: center; }
.w_holiday {font-size: larger; }
.m_prevnext {width: 100%; text-align: right; padding-top: 3px; }
.large_text {text-align: center; margin-top: 20px; font-size: larger;}
.centered {text-align: center;}
.one_line_form {font-size: larger; margin: 4px;}
.add_member_link {font-size: larger; text-align: left; margin-top: 10px}
#bottom_link {text-align: left; margin-top: 20px;}
a.faq_link {font-size: smaller; text-decoration: underline; }
td.congestion_group {font-size: large; font-weight: bold;}
td.congestion_study {padding-left: 20px;}

/* universal colors */
body {color: #333}
a, a:visited {color: #039;}
.bottom_hr {border-bottom: solid 5px #333; }
.formError {color: red;}
/*.session_error {color: red; text-align: center; font-size: large;}*/
.session_error {color: red; font-size: large;}
.canceled, .canceled a, .canceled a:visited {color: red;}
.day_header {border-color: #bbb; background-color:#ddd; }
.week_header {border-color: #bbb; background-color:#eee;}
.m_offmonth {background-color: #eee;}
.m_today {background-color: #ffffe0;}
.inactive {color: #999;}
.focused_resource_tab {background-color: #e1ebfb; border-color: #3954a3}
.actual_missing {background-color: #e32;}
.sub_table {border: solid 3px red;}
/* quiz */

input.quiz, button.quiz, select.quiz, textarea.quiz {
    font-family: inherit;
    font-size: inherit;
    -webkit-padding: 0.4em 0;
    padding: 0.4em;
    margin: 0 0 0.5em 0;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 2px;
}
input.quiz[type="radio"] {
    margin: 0;
}

input.quiz:disabled {
    color: #ccc;
}

button.quiz {
    margin-top: 1em;
    color: #333;
    background-color: #f4f4f4;
    outline: none;
}

button.quiz:disabled {
    color: #999;
}

button.quiz:not(:disabled):active {
    background-color: #ddd;
}

button.quiz:focus {
    border-color: #666;
}
/* no-tables layout */

nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    margin-block-start: 0.5rem;
}
nav ul li {
    list-style-type: none;
    text-align: center;
}

#page_title {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
}
#page_title h1,
#page_title p {
    margin: auto 0;
    margin-block-end: 0.5rem;
}

main.has_sidebar {
    display: flex;
    flex-wrap: wrap;
}
main.has_sidebar.list,
main.has_sidebar.search {
    flex-wrap: nowrap;
}
#sidebar {
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}
#sidebar > * {
    max-width: 170px;
}

#calendar_section {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}
#calendar_section nav {
    margin-top: -4px;
}
#calendar_section h2 {
    margin-top: 0;
}
#calendar_section h2.list,
#calendar_section h2.gaps,
#calendar_section h2.search {
    margin-top: 16px;
}

.form_layout {
    display: grid;
/*    grid-template-columns: 9rem 1fr 1fr;*/
    grid-template-columns: max-content 1fr 1fr;
    align-items: baseline;
}
.form_layout > * {
    margin: 0.5rem;
}
.form_layout label {
    grid-column-start: 1;
    text-align: right;
    font-weight: bold;
}
.form_layout .new_line {
    grid-column-start: 2;
    grid-column-end: 4;
    margin-block-start: 1rem;
}
.form_layout > p:has(input[type="submit"]) {
    grid-column-start: 2;
    margin-block-start: 1rem;
    margin-block-end: 1rem;
}

@media (max-width: 768px) {
    main.has_sidebar.list,
    main.has_sidebar.search {
        flex-wrap: wrap;
    }
    #sidebar {
        flex-direction: row;
        align-items: flex-start;
        max-width: 100%;
    }
    .form_layout {
        display: block;
    }
    .form_layout label {
        text-align: left;
        margin-top: 1rem;
    }
}
@media (max-width: 1333px) {
    #sidebar.month {
        flex-direction: row;
        align-items: flex-start;
        max-width: 100%;
    }
}