.orgaev_page {
}

.orgaev_list {
    margin-top: 1em;
}

.orgaev_list_section {
}

.orgaev_list_section_title {
    font-weight: bold;
    font-size: 200%;
    margin-top: 2em;
    border-bottom: .1em solid #000000;
}

.orgaev_list_name {
    font-weight: bold;
    font-size: 125%;
    margin-top: 1em;
}

button.orgaev_button {
    background-color: #8080ff;
    border: 1px solid #404080;
    border-radius: .5em;
    color: white;
    padding: 0 .5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: none;
}
button:hover.orgaev_button {
    background-color: #0000ff;
}

.orgaev_list_title {
    font-weight: bold;
}

.orgaev_list_item {
}

/* For the help icon (question mark in a circle). */
.orgaev_help_icon {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url('../images/question-circle.png');
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
}
.orgaev_help_icon:hover .orgaev_help_content {
    display: block;
}
.orgaev_help_content {
    display: none;
    position: absolute;
    top: 150%;
    left: 0;
    padding: .5em;
    background-color: #f0f0f0;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
    z-index: 1;
    min-width: 20em;
    text-align: left;
    color: #404040;
}

/************************* Monthly Calendar *************************/

.orgaev_month {
    margin-bottom: 1em;
}

.orgaev_month_title {
    font-weight: bold;
    font-size: 200%;
    text-align: center;
}

.orgaev_month_timezone {
    text-align: center;
    margin-bottom: 1em;
}

.orgaev_month_container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    /*
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    box-sizing: border-box;
    */
}

.orgaev_month_past {
    color: #808080;
    background-color: #f8f8f8;
}
.orgaev_month_present {
    background-color: #f0f0ff;
}

.orgaev_month_wide .orgaev_month_daynum {
    font-weight: bold;
    font-size: 150%;
}
.orgaev_month_narrow .orgaev_month_daynum {
    font-weight: bold;
    text-align: center;
}

.orgaev_month_item {
    border: 1px solid #f0f0f0;
    padding: .5em;
    min-height: 8em;
}

.orgaev_month_wide {
}

.orgaev_month_narrow {
    display: none;
    text-align: center;
}

.orgaev_month_narrow:hover {
    background-color: #fffff0;
}

.orgaev_green_ball {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url('../images/green-ball.png');
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
}

.orgaev_month_detail_item {
    display: none;
    background-color: #fffff0;
    border: 2px solid #f0f0f0;
    border-radius: 1em;
    padding: 1em;
    margin-top: 1em;
}

.orgaev_month_detail_date {
    text-align: center;
    font-weight: bold;
    font-size: 150%;
}

.orgaev_month_detail_event {
    margin-top: 1em;
}

.orgaev_event_start_time {
    font-weight: bold;
}

.orgaev_event_time {
    font-style: italic;
}

.orgaev_event_name {
    font-weight: bold;
    font-size: 150%;
}

.orgaev_event_short {
    font-weight: bold;
}

.orgaev_event_descr {
}

.orgaev_event_cost {
}

/************************* Pop up *************************/

.orgaev_popup {
    position: relative;
    display: inline-block;
}

.orgaev_popup_content {
    visibility: hidden;
    position: absolute;
    z-index: 1;
    width: 30em;
    max-width: 100vw;
    box-sizing: border-box;
    padding: 1em;
    background-color: #fffff0;
    border: 1px solid #ddd;
    border-radius: 1em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: visibility 0.5s linear;
    top: auto;
    bottom: 125%;
    left: 0;
    right: auto;
    white-space: normal;
    text-align: left;
}

.orgaev_popup:hover .orgaev_popup_content {
    visibility: visible;
}

/************************* Messages *************************/

.orgaev_okay {
    margin-top: 2em;
    margin-bottom: 2em;
    padding: 1em;
    border: 2px solid #80ff80;
    border-radius: 5px;
    background: #e0ffe0;
    color: #008000;
}

.orgaev_error {
    margin-top: 2em;
    margin-bottom: 2em;
    padding: 1em;
    border: 2px solid #ff8080;
    border-radius: 5px;
    background: #ffe0e0;
    color: #800000;
}

/****************************** Forms ******************************/

.orgaev_form {
    border-radius: .5em;
}

.orgaev_form_group {
    padding: .5em;
    margin-bottom: 1em;
    border: 2px solid #606060;
    border-radius: 1em;
}

.orgaev_form_group_title {
    font-weight: bold;
    font-size: 150%;
}

/* List of associative table records */
.orgaev_form_list {
}

/* Like a <table>. */
.orgaev_form_list_item {
    display: table;
    width: 100%;
    border-radius: .5em;
    border: 2px solid #c0c0c0;
    padding: 1em;
    margin-top: 1em;
    background-color: #f0f0f0;
}
.orgaev_form_list_item:first-child {
    margin-top: 0;
}

/* Like a <tr>. */
.orgaev_form_row {
    display: table-row;
}

/* Like a <td> for the 1st column. */
.orgaev_form_label {
    display: table-cell;
    text-align: right;
    vertical-align: top;
    padding-right: .25em;
    width: 1%;
    white-space: nowrap;
}

/* Like a <td> for the 2nd column. */
.orgaev_form_input {
    display: table-cell;
    width: 99%;
}

/* The "More" button. */
button.orgaev_form_more_button {
    margin-top: 1em;
    background-color: #00a060;
    color: white;
    padding: .5em 1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-transform: none;
}
button.orgaev_form_more_button:hover {
    background-color: #008040;
}

.orgaev_vertical_group {
    /* column-width: a jQuery will set this to the max width of the children */
    column-gap: 1em;
}

.orgaev_vertical_item_outer {
    width: fit-content;
}

.orgaev_vertical_item_inner {
    display: inline-block;
    white-space: nowrap;
}

.orgaev_form_radio_with_other {
    background-color: #ffffff;
    padding: .25em;
    border: 1px solid #c0c0c0;
    border-radius: .5em;
}
.orgaev_form_radio_with_other label {
    margin-right: 1em;
}
.orgaev_form_radio_with_other input[type="text"]:disabled {
    background-color: #f0f0f0;
    color: #f0f0f0;
}

/* A cell that has an error message. */
.orgaev_form_error {
    background-color: #fff0f0;
    color: #c00000;
}

.orgaev_form_input input[type=text],
.orgaev_form_input textarea,
.orgaev_form_input select {
    width: 100%;
    padding: .25em;
    border: 1px solid #c0c0c0;
    border-radius: .5em;
    resize: vertical;
    background-color: #ffffff;
}

.orgaev_form input[type=submit] {
    background-color: #00a060;
    color: white;
    padding: .5em 1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    float: right;
    font-weight: bold;
    font-size: 150%;
    text-transform: none;
}
.orgaev_form input[type=submit]:hover {
    background-color: #008040;
}

/************************* Filters and Navigators *************************/

.orgaev_list_filter {
    background-color: #f0f0f0;
    border: .2em solid #d0d0d0;
    border-radius: 1em;
    padding: 1em;
    margin-bottom: 1em;
}

.orgaev_list_filter_heading {
    font-weight: bold;
    font-size: 125%;
    margin-top: 1em;
}

.orgaev_list_filter_button {
    cursor: pointer;
    display: flex;
    align-items: center;
}
.orgaev_list_filter_button span {
    margin-left: .5em;
}
.orgaev_list_filter_button img {
    width: 1em;
}

.orgaev_list_filter_inside {
}

.orgaev_form_navmonth {
}

.orgaev_form_navmonth form {
    display: inline;
    padding-left: .5em;
    padding-right: .5em;
}

.orgaev_form_navmonth_selectors {
}

/****************************** Media settings ******************************/

@media screen and (max-width: 40em) {
    .orgaev_form_list_item {
        display: block;
    }
    .orgaev_form_row {
        display: block;
    }
    .orgaev_form_label {
        display: block;
        text-align: left;
    }
    .orgaev_form_input {
        display: block;
    }
}

@media screen and (max-width: 80em) {
    .orgaev_month_wide {
	display: none;
    }
    .orgaev_month_narrow {
	display: block;
    }
    .orgaev_month_item {
	padding: .1em;
	min-height: 1em;
    }

}

@media print {
    .orgaev_noprint {
	display: none !important;
    }
    .orgaev_list_name button {
	display: none !important;
    }
}