:root {
    --devap-light-logo-1: #fff;
    --devap-light-logo-2: #35415a;
    --devap-light-logo-3: #f9a51a;
    --devap-light-link: #aaa;
    --devap-light-link-hover: #444;

    --devap-dark-logo-1: #fff;
    --devap-dark-logo-2: #ffffff;
    --devap-dark-logo-3: #f9a51a;
    --devap-dark-link: #f9a51a;
    --devap-dark-link-hover: #956d2a;

    --devap-light-modal-background: #444;
    --devap-dark-modal-background: #454968;
}

.devap_hidden { display: none; }

html { margin-top: 0 !important; }
body { min-height: 100vh; }
body.devap_dark .light_only, body:not(.devap_dark) .dark_only { display: none; }

main { min-height: 80vh; }

h2 { font-size: 2rem; line-height: 1.4em; }
h3 { font-size: 1.5rem; line-height: 1.4em; }
h4 { font-size: 1.25rem; line-height: 1.4em; }

input[type="text"], input[type="password"], input[type="email"], input[type="date"], select, textarea {
    width: calc(100% - 20px); font-size: 1.1em; font-family: 'Roboto Flex', sans-serif; border: 1px black solid; padding: 5px 10px; box-sizing: border-box;
             /*        ^^^^ this is 2x horizontal padding */
}
textarea { resize: none; height: 20rem; }
label { font-size: 0.7em; text-transform: uppercase; display: block; }
select.filter_dropdown { font-size: 0.8em !important; }
.devap_popup input[type="text"] { text-align: center; }

.devap_subtle_link a { font-weight: normal; color: var(--devap-light-link-hover); }
.devap_dark .devap_subtle_link a { color: var(--devap-dark-link-hover); }

.devap_locked input[type="text"], .devap_locked input[type="password"], .devap_locked input[type="email"], .devap_locked input[type="date"],
.devap_locked select, .devap_locked textarea { border-color: transparent; background: transparent; pointer-events: none; }
.devap_locked select { -webkit-appearance: none; -moz-appearance: none; }
.devap_locked input[type="date"]::-webkit-inner-spin-button, .devap_locked input[type="date"]::-webkit-calendar-picker-indicator { display: none; --webkit-appearance: none; -moz-appearance: none; }


.devap_locked input[type="submit"] { display: none; }
.devap_dark .devap_locked input[type="text"], .devap_dark .devap_locked input[type="password"], .devap_dark .devap_locked input[type="email"],
.devap_dark .devap_locked input[type="date"], .devap_dark .devap_locked select, .devap_dark .devap_locked textarea { color: white; }



.dt-container input[type="text"], .dt-container input[type="password"], .dt-container input[type="email"], .dt-container select { font-size: inherit; width: auto; }
.dt-container label { font-size: inherit; text-transform: none; }

ul sub { font-size: 0.8em; display: block; }
ul:not(.devap_indented) sub { text-indent: 1.5rem; }

header { padding: 1rem 2rem; position: relative; }
header svg { height: 75px; }
header p span a + a { margin-left: 1rem; }
.devap-logo-3 { fill: var(--devap-light-logo-3); }
.devap-logo-2 { fill: var(--devap-light-logo-2); }
.devap-logo-1 { fill: var(--devap-light-logo-1); }
.devap_dark .devap-logo-3 { fill: var(--devap-dark-logo-3); }
.devap_dark .devap-logo-2 { fill: var(--devap-dark-logo-2); }
.devap_dark .devap-logo-1 { fill: var(--devap-dark-logo-1); }

footer { border-top: 1px solid var(--devap-light-modal-background); margin-top: 2rem; padding: 1rem 2rem; }
.devap_dark footer { border-top: 1px solid var(--devap-dark-modal-background); }
footer .copyright { font-size: 0.8em; }

.floatright { display: block; float: right; }

a { color: var(--devap-light-link); transition: 0.5s all; text-decoration: none; font-weight: bold; }
a:hover { color: var(--devap-light-link-hover); }
.devap_dark a { color: var(--devap-dark-link); }
.devap_dark a:hover { color: var(--devap-dark-link-hover); }

.devap_overlay, .devap_dialog, #devap_frame { display: none; }

.devap_overlay { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; background: rgba(0,0,0,0.3); text-align: center; }

.devap_modal {
    position: absolute; top: 50%; left: 50%; width: 80%; height: 80%; transform: translate(-50%, -50%); border: 2px black solid;
    background: var(--devap-light-modal-background);
    box-shadow: rgba(0,0,0,0.6) 0 4px 7px, rgba(0,0,0,0.6) 0 -4px 7px, rgba(0,0,0,0.6) 4px 0 7px, rgba(0,0,0,0.6) -4px 0 7px;
}
.devap_dark .devap_modal { background: var(--devap-dark-modal-background); }
.devap_modal_50 { width: 50%; height: auto; padding: 2rem; }

.devap_modal h2 { text-align: center; }
.devap_modal label { color: white; }
.devap_modal p, .devap_popup p { position: relative; margin: 1rem auto; }
.devap_modal p:last-child { margin: 2rem 0 0;}

.devap_small { font-size: 0.8em;}

.devap_button {
    background: var(--devap-light-link); padding: 0.5rem 1rem; border: 1px black solid; border-radius: 5px;
    display: inline-block; font-family: 'Roboto Flex', sans-serif; font-size: 1.25em; font-weight: bold;
    transition: 0.5s all; color: white !important;
}
.devap_dark .devap_button { color: black !important; }
.devap_button + .devap_button { margin-left: 2rem; }
.devap_button:hover { background: var(--devap-light-link-hover); color: white !important; cursor: pointer; }
.devap_button_small { font-size: 0.7em; padding: 0 0.5rem; }
.devap_dark .devap_button { background: var(--devap-dark-link); }
.devap_dark .devap_button:hover { background: var(--devap-dark-link-hover); }
.dt-container .devap_button { font-size: 1em; padding: 0.25rem 0.5rem; display: inline-block; }

.devap_fit_content { width: fit-content; margin: 1rem auto 0; }

#password_verification { line-height: 2em; }
#password_verification span { padding: 3px 8px; border-radius: 99px; color: black; }
#password_verification span + span { margin-left: 1rem; }
.devap_error { background: #ffaaaa; border: 1px red solid; }
.devap_success { background: #aaffaa; border: 1px green solid; }

.devap_container { display: flex; width: 95%; margin: 0 auto; align-items: stretch; gap: 1rem; }
.devap_container_fh { min-height: 80vh; }
.devap_container_fw { width: 100%; }
.devap_container > article { flex-basis: 85%; padding: 1rem; }
.devap_container > nav { flex-basis: 15%; box-sizing: border-box; padding: 1rem; border-right: 1px var(--devap-light-modal-background) solid; }
.devap_dark .devap_container > nav { border-right: 1px var(--devap-dark-modal-background) solid; }
.devap_container > nav > ul { width: 90%; list-style: none outside; margin-bottom: 0.5rem; }
.devap_container > nav > ul > li > a { padding: 5px 10px; display: inline-block; }

.devap_container > nav > ul > li.current_menu_item { background: var(--devap-light-link-hover); position: relative; padding-right: 2rem; transition: 0.5s all; }
.devap_container > nav > ul > li.current_menu_item:hover { background: var(--devap-light-link); }
.devap_container > nav > ul > li.current_menu_item:before {
    position: absolute; top: -1px; right: -1px; display: block; width: 1rem; height: 50%;
    content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st0%7Bfill:%23eeeeee;%7D%3C/style%3E%3Cg%3E%3Cpolygon class='st0' points='0,0 50,0 50,50'/%3E%3C/g%3E%3C/svg%3E");
}
.devap_container > nav > ul > li.current_menu_item:after {
    position: absolute; bottom: 0; right: -1px; display: block; width: 1rem; height: 50%;
    content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st0%7Bfill:%23eeeeee;%7D%3C/style%3E%3Cg%3E%3Cpolygon class='st0' points='50,0 50,50, 0,50'/%3E%3C/g%3E%3C/svg%3E");
}
.devap_container > nav > ul > li.current_menu_item > a { color: white !important; }
.devap_container > nav > ul > li.current_menu_item > a:hover { color: var(--devap-light-link-hover); }
.devap_dark .devap_container > nav > ul > li.current_menu_item > a { color: black !important; }
.devap_dark .devap_container > nav > ul > li.current_menu_item > a:hover { color: white !important; }
.devap_dark .devap_container > nav > ul > li.current_menu_item { background: var(--devap-dark-link); transition: 0.5s all; }
.devap_dark .devap_container > nav > ul > li.current_menu_item:hover { background: var(--devap-dark-link-hover); }
.devap_dark .devap_container > nav > ul > li.current_menu_item:before {
    content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st0%7Bfill:%2326283a;%7D%3C/style%3E%3Cg%3E%3Cpolygon class='st0' points='0,0 50,0 50,50'/%3E%3C/g%3E%3C/svg%3E");
}
.devap_dark .devap_container > nav > ul > li.current_menu_item:after {
    content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st0%7Bfill:%2326283a;%7D%3C/style%3E%3Cg%3E%3Cpolygon class='st0' points='50,0 50,50, 0,50'/%3E%3C/g%3E%3C/svg%3E");
}

.devap_table { width: 100%; }
.devap_table thead th { vertical-align: top !important; }
.devap_table thead tr:last-child th { border-bottom: 2px solid var(--devap-light-modal-background); }
.devap_dark .devap_table thead tr:last-child th { border-bottom: 2px solid var(--devap-dark-modal-background); }
.devap_table tbody tr td { border-bottom: 1px solid var(--devap-light-modal-background); }
.devap_dark .devap_table tbody tr td { border-bottom: 1px solid var(--devap-dark-modal-background); }
.devap_table.devap_centered th:not(.textleft):not(.textright), .devap_table.devap_centered td:not(.textleft):not(.textright) { text-align: center; }
.devap_table tr.table_header th { padding-top: 1rem; text-align: left; font-size: 1.25em; }
.devap_table tr.table_subheader th { padding-top: 0.5rem; text-align: left; border-bottom: 1px solid var(--devap-dark-modal-background); }
.devap_table .action_icons a i { margin: 0 0.5rem; }

.devap_no_bullets { list-style: none outside; }
.devap_no_margin_bottom { margin-bottom: 0 !important; }

.devap_customize_edit_options p { margin-bottom: 0.5rem !important; text-align: left !important; }


.devap_2col, .devap_2col_75_25, .devap_2col_25_75, .devap_3col, .devap_4col { display: flex; flex-wrap: wrap; gap: 1rem; }
.devap_2col > *, .devap_2col_75_25 > *, .devap_2col_25_75 > *, .devap_3col > *, .devap_4col > * { box-sizing: border-box; margin-bottom: 1rem; }
.devap_2col > * { flex-basis: 50%; }
.devap_2col_25_75 > *:first-child, .devap_2col_75_25 > *:last-child { flex-basis: 25%; }
.devap_2col_75_25 > *:first-child, .devap_2col_25_75 > *:last-child { flex-basis: 70%; }
.devap_3col > * { flex-basis: 30%; }
.devap_4col > * { flex-basis: 25%; }

.status-inactive td { text-decoration: line-through; color: #aaa; }
.status-inactive td a { text-decoration: none; }

.devap_layout_container { display: flex; align-items: flex-start; flex-wrap: wrap; }
.devap_layout_container > h2, .devap_layout_container .devap_buttons { flex-basis: 100%; }
.devap_layout_container > h2 > a { float: right; }
.devap_layout_container > h2 > a + a { margin-right: 1rem; }
.devap_layout_column { flex-grow: 1; }
.devap_layout_column p { margin-bottom: 1rem; }

.devap_item_history_row { display: flex; flex-wrap: wrap; border-bottom: 1px solid white; margin-bottom: 1rem; }
.devap_item_history_meta { flex-basis: 15%; }
.devap_item_history_detail { flex-basis: 85%; }
.devap_item_history_detail_row { display: flex; flex-wrap: wrap; border-bottom: 1px #777 solid; }
.devap_item_history_detail .devap_item_history_detail_row:last-of-type { border-bottom: none; }
.devap_item_history_detail_row > div { flex-basis: 42%; }
.devap_item_history_detail_row > div:first-child { flex-basis: 14%; }

.devap_customize_container { display: flex; border: 1px dashed #777; gap: 2rem; padding: 1rem 2rem 1rem 1rem; margin: 1rem 0; }
.devap_customize_column { flex-basis: 0; border: 1px dashed #444; padding: 1rem; flex-grow: 1; position: relative; }
.devap_customize_item { border: 1px solid #ddd; border-radius: 10px; background: #ccc; padding: 1rem; margin: 1rem 0; }
.devap_customize_item .item_field_type { text-transform: capitalize; }
.devap_customize_item .item_label { font-weight: bold; }
.devap_customize_item .item_label a { float: right; display: inline-block; margin-left: 1rem; }
.devap_direction_x { gap: 0; padding: 1rem; }
.devap_direction_x .devap_customize_item { margin: 0; }
.devap_customize_column_add { position: absolute; left: 101.5%; top: 50%; z-index: 5; transform: translate(0,-50%); background: var(--light); }
.devap_dark .devap_customize_column_add { background: var(--dark); }

.devap_dark .devap_customize_column { border: 1px dashed #ddd; }
.devap_dark .devap_customize_item { background: #444; }

#devap_add_first_column { flex-basis: 100%; }

.devap_scrollable { height: 400px; overflow-y: auto; }

.devap_draggable_item { cursor: all-scroll; }
.devap_direction_x .devap_draggable_item { cursor: ew-resize; }
.devap_direction_y .devap_draggable_item { cursor: ns-resize; }
.devap_draggable_item.devap_dragging { background: var(--devap-light-link-hover); }
.devap_dark .devap_draggable_item.devap_dragging { background: var(--devap-dark-link-hover); }

.devap_width_warning { background: #9c0000; color: white; text-align: center; padding: 0.5rem; }

/* These styles should go last, because they override settings from above. */
p:empty { display: none; }
.textleft { text-align: left; }
.textcenter { text-align: center; }
.textright { text-align: right; }
.devap_margin_top { margin-top: 3rem !important; }
.devap_margin_bottom { margin-bottom: 3rem !important; }