*,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html, body { min-height: 100vh; color: #555; font-family: arial, helvetica, clean, sans-serif; font-size: 13px; line-height: 1.231; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 5px 0; padding: 0; line-height: 1.231; }
h1 { color: #c60; font-size:138%; }
h2 { color: #666; font-size:123%; }
h3 { margin-top: 1em; font-size:108%;}
input[type=text],
input[type=password],
textarea,
select { color: #555; padding: .5em; border: solid 1px #aaa; border-radius: 2px; outline: none }
textarea { font-family: arial, helvetica, clean, sans-serif; font-size: inherit; line-height: 1.231; outline: none }
a { color: #08c; text-decoration: none; }
a:hover { text-decoration: underline; }
a:hover.no-underline { text-decoration: none; }

/* Control Layout */
.ctrl-lbl { display: block; margin-bottom: .25rem; font-variant: small-caps; font-size: 1.1rem; }
.ctrl-lbl[disabled] { color: #ccc; }

/* Field Layout */
.field-layout { border-bottom-width: 1px; border-bottom-style: solid; }
.field-layout:last-of-type { border-bottom-width: 0 }
.saved { background-color: #dff0d8; }
.saved-fade { transition: background-color 2s; background-color: inherit }
.html-value > p { margin: 0 0 10px; } /* match UI formatting */

/* Grid Layout */
.grid { display: grid; }
.inline-grid { display: inline-grid; }
.col-gap-1 { grid-column-gap: .25rem; }
.col-gap-2 { grid-column-gap: .5rem; }
.col-gap-3 { grid-column-gap: 1rem; }
.col-gap-4 { grid-column-gap: 2rem; }
.row-gap-1 { grid-row-gap: .25rem; }
.row-gap-2 { grid-row-gap: .5rem; }
.row-gap-3 { grid-row-gap: 1rem; }
.row-gap-4 { grid-row-gap: 2rem; }
.grid-gap-1 { grid-column-gap: .25rem; grid-row-gap: .25rem; }
.grid-gap-2 { grid-column-gap: .5rem; grid-row-gap: .5rem; }
.grid-gap-3 { grid-column-gap: 1rem; grid-row-gap: 1rem; }
.grid-gap-4 { grid-column-gap: 2rem; grid-row-gap: 2rem; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }

/* Table */
.table { width: 100%; border-collapse: collapse; }
.table > thead > tr > th { padding: 5px 15px 5px 0; vertical-align: bottom; border-bottom: solid 3px #999; text-align: left; }
.table > thead > tr > th.tr { text-align: right; }
.table > thead > tr > th.tc { text-align: center; }
.table > tbody > tr > td { padding: 5px 15px 5px 0; vertical-align: top; border-bottom: solid 1px #e7e7e7; }
.table > tbody > tr > td.action { padding: 0 5px; }
.table > tbody > tr > td:first-child,
.table > thead > tr > th:first-child { padding-left: 10px; }
.table > tbody > tr > td.action a { margin-right: 5px; font-size: 90%; text-decoration: none; color: #06c; }
.table .no-records { padding: 20px; font-style: italic; text-align: center; }
.table.striped > tbody > tr:nth-child(even) { background-color: #f5f5f5; }
.table.w-auto { width: auto; }
.table > tbody > tr > td.bb-0 { border-bottom-width: 0; }

.pager { margin: 20px 0; }
.pager > a { display: inline-block; padding: 4px 8px; border: 1px solid transparent; border-radius: 5px; text-decoration: none; }
.pager > .page.active { border-color: #ccc; background-color: #eee; color: #999; cursor: default; }


/* Buttons */
button { display: inline-flex; align-items: center; padding: .5em 1em; border: 1px solid #ccc; background-color: #ddd; color: #666; transition: background-color 200ms ease-out; outline: none; cursor: pointer; }
button:hover { background-color: #eee; text-decoration: none; }
.btn-blue { color: #f4f4f4; background-color: #156AA4; border-color: #156AA4; border-color: #156AA4; }
.btn-blue:hover { background-color: #257AB4; border-color: #257AB4; }
.btn-red { color: #f4f4f4; background-color: #d9534f; border-color: #d9534f;}
.btn-red:hover { background-color: #c9302c; border-color: #c9302c; }
.btn-green { color: #f4f4f4; background-color: #3ebb00; border-color: #3ebb00; }
.btn-green:hover { background-color: #4ecb10; border-color: #4ecb10; }
.btn-icon-only { padding: 0; background-color: transparent; border: none; }
.btn-clear { background-color: transparent; border: none; }
.btn-clear[disabled], .btn-clear[disabled]:hover { background-color: transparent; color: inherit; }
.btn-link { border-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0); color: #08c; background-image: none; box-shadow: none; }
.btn-link:hover { border-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0); text-decoration: underline; background-image: none; box-shadow: none; }
.btn-small { padding: .25rem .5rem; font-size: .85rem; line-height: .85rem; }
.btn-small > .icon { height: .85rem; width: .85rem; }
button > .icon { margin-right: .5em; }
button > .icon.mr0 { margin-right: 0; }
button[disabled], button[disabled]:hover { background-color: #f7f7f7; color: #c5c5c5; border-color: #f7f7f7; cursor: default }

    button[disabled].page-menu, button[disabled]:hover.page-menu {
        border: 1px solid #ccc;
        background-color: #ddd;
        color: #666;
        cursor: default
    }

/* Colors and Themes */
.epi-red { color: firebrick; }
.bg-epi-red { background-color: firebrick; }
.b--epi-red { border-color: firebrick; }

.theme-none .theme-wrapper { border-top: 1px solid #d9d9d9; }
.theme-none .theme-wrapper.no-title { border-top: none; }

.bg-trans { background: transparent; }
.bg-trans-dark-50 { background-color: rgba(0,0,0,0.5) }
.bg-trans-light-50 { background-color: rgba(255,255,255,0.5) }
.bg-trans-light-75 { background-color: rgba(255,255,255,0.75) }
.bg-trans-light-85 { background-color: rgba(255,255,255,0.85) }

.epi-neutral { color: #888; }
.bg-epi-neutral { background-color: #888; }
.b--epi-neutral { border-color: #888; }
.theme-neutral .theme-header { color: #888; }
.theme-neutral .theme-color { color: #888; }
.theme-neutral .theme-bg { background-color: #eeeee6; }
.theme-neutral .theme-wrapper { border-top: .25rem solid #888; }
.theme-neutral .field-layout { border-bottom-color: #bbb; }

.epi-orange { color: #e37200; }
.bg-epi-orange { background-color: #e37200 }
.b--epi-orange { border-color: #e37200 }
.theme-orange .theme-header { color: #e37200; }
.theme-orange .theme-color { color: #e37200; }
.theme-orange .theme-bg { background-color: #ffe9d4; }
.theme-orange .theme-wrapper { border-top: .25rem solid #e37200; }
.theme-orange .field-layout { border-bottom-color: #ffb76f; }

.epi-green { color: #788c6e; }
.b--epi-green { border-color: #788c6e; }
.bg-epi-green { background-color: #788c6e; }
.theme-green .theme-header { color: #788c6e; }
.theme-green .theme-color { color: #788c6e; }
.theme-green .theme-bg { background-color: #dff0d8; }
.theme-green .theme-wrapper { border-top: .25rem solid #788c6e; }
.theme-green .field-layout { border-bottom-color: #a7c896; }

.theme-gray .theme-header { color: #888; }
.theme-gray .theme-color { color: #888; }
.theme-gray .theme-bg { background-color: #f5f5f5; }
.theme-gray .theme-wrapper { border-top: .25rem solid #888; }
.theme-gray .field-layout { border-bottom-color: #dEe3e9; }

.epi-blue { color: #156AA4 }
.b--epi-blue { border-color: #156AA4 }
.bg-epi-blue { background-color: #156AA4 }
.theme-blue .theme-header { color: #3e7fb6; }
.theme-blue .theme-color { color: #3e7fb6; }
.theme-blue .theme-bg { background-color: #EEF3F9; }
.theme-blue .theme-wrapper { border-top: .25rem solid #3e7fb6; }
.theme-blue .field-layout { border-bottom-color: #abceeb; }

.epi-purple { color: purple; }
.bg-epi-purple { background-color: purple; }
.b--epi-purple { border-color: purple; }





/* NEW STYLES */
.w35 { width: 6rem; } /* w3.5 */
.w45 { width: 12rem; } /* w4.5 */
.w55 { width: 24rem; }
.w6 { width: 32rem; }
.z100 { z-index: 100; }
.no-outline { outline: none; }
.pointer { cursor: pointer; }
.no-pointer { cursor: default; }
.no-underline { text-decoration: none; }
.hover-underline:hover { text-decoration: underline; }
.epi-shadow { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23) }
.last-no-bb:last-child { border-bottom-width: 0 }
.last-no-pb:last-child { padding-bottom: 0 }
.last-no-mb:last-child { margin-bottom: 0 }
.last-no-mb-bb:last-child { border-bottom-width: 0; margin-bottom: 0; }
.no-shrink { flex-shrink: 0 }
.bg-highlight { background-color: #cedff6; }



.spin { animation: spin 1s linear infinite; }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.responsive-embed { overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0; }
.responsive-embed iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute; }

/* Icons */
.icon { fill: currentColor; }

/* Toasts */
.toaster { pointer-events: none }
.toast { pointer-events: all; }
.toast.success { background-color: #60A917; color: #fff; }
.toast.error { background-color: #CE352C; color: #fff; }
.fade-in { opacity: 1; animation: fadeInOpacity ease-in .5s; }
.fade-out { opacity: 0; animation: fadeOutOpacity ease-in .5s; }

@keyframes fadeInOpacity {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeOutOpacity {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Drag and Drop */
.drop-zone { box-sizing: content-box; height: 3px; border-top: 5px solid transparent; border-bottom: 5px solid tansparent; }
.drop-zone.dragged-over { background-color: #cedff6; height: 15px; border-width: 10px; }

/* Editors */
input[type=text].invalid-editor,
input[type=password].invalid-editor,
textarea.invalid-editor,
select.invalid-editor { border-color: firebrick; }

/* Text Editor */
.pre-input,
.post-input { display: none; align-self: stretch; align-items: center; padding: .5em .75em; border: 1px solid #aaa; background-color: #eee; color: #777; }
.has-pre > .pre-input,
.has-post > .post-input { display: inline-flex; }
.has-pre > .text-editor { border-left-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0 }
.has-post > .text-editor { border-right-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0 }
.has-pre.invalid > .pre-input { border-color: firebrick; }
.has-post.invalid > .post-input { border-color: firebrick; }
input[type=text].align-right { text-align: right; }

/* Select Editor */
.ss-main .ss-single-selected { color: #555; border: solid 1px #aaa; border-radius: 2px; }
.ss-main .ss-single-selected .placeholder .ss-disabled { color: #999 }

/* Switch Editor */
.checkbox-ctrl > label.check { width: 16px; height: 16px; cursor: pointer; position: absolute; background-color: #ccc; border: 1px solid #aaa; border-radius: 4px; }
.checkbox-ctrl > label.check:after { content: ''; width: 10px; height: 6px; position: absolute; top: 3px; left: 2px; border: 3px solid #444; border-top: none; border-right: none; background: transparent; opacity: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.checkbox-ctrl > label.check:hover::after { opacity: 0.3; }
.checkbox-ctrl > input[type=checkbox] { visibility: hidden; }
.checkbox-ctrl > input[type=checkbox]:checked + label.check:after { opacity: 1; }

.switch-ctrl > input[type=checkbox] { height: 0; width: 0; visibility: hidden; }
.switch-ctrl > .slider { cursor: pointer; text-indent: -9999px; width: 3rem; height: 1.5rem; background: #ccc; display: block; border-radius: 100px; position: relative; }
.switch-ctrl > .slider:after { content: ''; position: absolute; top: .14rem; left: .14rem; width: 1.2rem; height: 1.2rem; background: #fff; border-radius: 90px; transition: 0.3s; }
.switch-ctrl > input:checked + .slider { background: #21c217; }
.switch-ctrl > input:checked + .slider:after { left: calc(100% - .14rem); transform: translateX(-100%); }

/* Image Editor */
.imged-dragover { }
.imged-dragover.leftside { border-left-color: orange; }
.imged-dragover.rightside { border-right-color: orange; }
.imged-dragover-prev { border-right-color: orange; }
.imged-dragover-next { border-left-color: orange; }
.imged-dragover * { pointer-events: none }


/* PAGES */

/* Reservations */
.due-today > td { background-color: #ffc; }
.floating-dates > td { background-color: #dce; }
.sorted-asc::after { content: '▲'; margin-left: .25rem; color: #3e7fb6; }
.sorted-desc::after { content: '▼'; margin-left: .25rem; color: #3e7fb6; }

/* Itinerary Builder */
.tp-time { width: 75px; height: 20px; display: inline-block; font-size: 90%; vertical-align: top; }
.tp-time:hover { font-size: 120%; font-weight: bold; cursor: pointer; }
.schedulable { display: flex; margin-left: -10px; margin-right: -10px; padding: 10px; border: 1px solid transparent; border-radius: 3px; cursor: move; }
.schedulable:hover { border-color: #ccc; background-color: rgba(255,255,255,.5); }