#header {position:fixed; height:80px; border-bottom:1px solid; top:0; left:0; right:0; background:#fff; padding:0 20px; z-index:5;}
#header h1 {float:left; font-family:'Roboto'; font-weight:300;}
#header p {float:right;}
#header i {font-size:1em;}

#container {padding-top:70px; display:flex;}

#preview {position:absolute; width:0; height:0; z-index:25;}
#preview.open {top:0; bottom:0; left:0; right:0; background:#fff; width:100%; height:100%;}
#preview.open .preview-cancel {position:fixed; top:10px; right:10px; display:inline-block; font-size:40px; opacity:.5;}
#preview.open .preview-cancel:hover {opacity:1;}
#preview.open #preview-content {max-width:1024px; margin:40px auto; height:auto;}

#preview.open #report-preview-window {width:90%; height:90%; overflow:scroll; margin:0 auto; position:fixed; top:80px;}
/*
#preview.open #report-preview-window {width:90%; table-layout:fixed; border-collapse:collapse;}
#preview.open #report-preview-window tbody {display:block; width:100%; overflow:auto; height:50px;}
#preview.open #report-preview-window thead tr {display:block;}
#preview.open #report-preview-window th,
#preview.open #report-preview-window td {padding:5px; width:auto;}
*/

#popup {position:fixed; width:0; height:0; z-index:15;}
#popup.open {height:auto; width:auto; background:#fff; border-radius:8px; padding:0; position:absolute; top:174px; left:50%; margin-right:-50%; transform:translate(-50%); overflow:hidden; min-width:200px; min-height:100px; max-width:90%;}
.popup-top-bar {color:#fff; background:#1b365d; font-size:21px; font-weight:200; padding:7px 20px 10px;}
.popup-top-bar a {float:right; margin:2px; text-decoration:none; color:#fff;}
.popup-content {padding:20px;}
.popup-bottom-bar {border-top:1px solid #d2d2d2; padding:17px 20px 20px; text-align:right;}
#popup button {font-size:14px; font-weight:100; padding:3px 30px 5px; margin:2px 4px;}

#overlay, #img-popup-overlay {position:fixed; top:80px; left:0; z-index:10; background:#555; opacity:0; transition:opacity .5s;}
#overlay.open, #img-popup-overlay.open {bottom:0; right:0; opacity:.75;}

#img-popup {position:fixed; width:0; height:0; z-index:35;}
#img-popup.open {height:auto; width:auto; background:#fff; border-radius:8px; padding:0; position:absolute; top:174px; left:50%; margin-right:-50%; transform:translate(-50%); overflow:hidden; min-width:200px; min-height:100px; max-width:90%; max-height:70%; border:2px solid #a30000;}
#img-popup.open div {text-align:right; padding:10px; background:#a30000;}
#img-popup.open span {float:left; padding:4px 8px; color:#fff;}
#img-popup.open a {display:inline-block; text-decoration:none; margin:0 4px; background:#fff; padding:4px 8px;}
#img-popup.open a:hover {background:rgba(255, 255, 255, .8);}
#img-popup.open img {max-width:100%; max-height:100%;}

input, select {padding:2px 4px;}
input[type="number"] {text-align:right;}

/*#left, #right {flex:1;}
*/

.login-container {padding:140px 0 0 0; width:800px;}
.login-container input {display:block; margin:4px 0 16px 0;}

.nav-arrow {display:block; width:95%; height:15px;}
.nav-expanded {background:url("../i/nav-arrow-expanded.svg") right bottom no-repeat;}
.nav-collapsed {background:url("../i/nav-arrow-collapsed.svg") right bottom no-repeat;}

#left {position:absolute; top:80px; left:0; height:auto; width:300px; overflow-y:visible;}
#left.fixed {position:fixed;}

#left nav {}
#global-search {width:90%; font-size:16px; padding:4px 8px; margin:20px 0; border-top:0; border-left:0; border-right:0; box-shadow:0 4px 2px -2px #fff;}
#global-search:hover {box-shadow:0 4px 2px -2px #555; cursor:pointer;}
#global-search:focus-visible,
#global-search:focus:not(:focus-visible) {outline:none; box-shadow:0 4px 2px -2px #500; border-bottom:1px solid #900; border-top:0; border-left:0; border-right:0;}

#left ul {list-style-type:none; margin:0; padding:0;}
#left li {}
#left li a {display:block; padding:8px 16px 8px 10px; border-bottom:1px solid #fff; text-decoration:none; font-size:20px; color:#fff;}
#left li a i {width:40px; text-align:center; margin-right:10px;}

#nav-primary {position:absolute; width:100%;}

#left ul.subnav {display:none; white-space:normal;}
#left ul.subnav a {background:#ccc; color:#000; font-size:14px; padding:4px 16px 4px 20px;}
#left ul.subnav a:hover {background:#ddd; color:#333;}
#left ul.subnav .subnav-ctrls {padding-top:10px; padding-bottom:10px;}
#left ul.subnav .subnav-ctrls a {display:inline-block; background:#fff; text-decoration:underline;}

#left ul#nav-Clients-subs.subnav a {font-size:10px;}

#left ul.subnav a i {width:20px;}
.subnav-icon {float:left; width:20%;}
.subnav-text {float:right; width:80%;}

#nav-secondary, #nav-tertiary {position:absolute; white-space:nowrap; right:0; left:0; display:none;}

#nav-secondary.focus {left:60px; display:block;}
#nav-secondary.min-focus {left:240px; display:block;}
#nav-tertiary.focus {left:120px; display:block;}
#nav-tertiary.min-focus {left:240px; display:block;}

#left i.tip {position:relative;}
#left i.tip[aria-label]:after {opacity:0; content:attr(aria-label); font-family:'Fira Sans', sans-serif; font-weight:normal; position:absolute; white-space:nowrap; z-index:20; top:-10px; bottom:-10px; right:auto; left:40px; color:#fff; padding:8px 8px 8px 10px; transition:opacity .25s; pointer-events:none;}

#nav-tertiary i.tip[aria-label]:after {right:50px; left:auto;}

#nav-primary i.tip[aria-label]:hover:after,
#nav-secondary i.tip[aria-label]:hover:after,
#nav-tertiary.min-focus i.tip[aria-label]:hover:after {opacity:1; transition-delay:.25s;}
#nav-secondary.min-focus i.tip, #nav-tertiary.min-focus i.tip {margin-right:-10000px;}

#nav-tertiary .note-counter-container {position:relative;}
#nav-tertiary .note-counter-container .note-counter {font-size:.7em; font-family:sans-serif; display:inline-block; position:absolute; left:16px; bottom:5px; color:#fff;}

#trail {border-bottom:1px solid #ccc; top:80px; left:340px; padding-top:20px; right:0; position:fixed; background:#fff; z-index:2;}
#breadcrumb-trail {list-style:none; padding-left:0; display:inline-block; float:left;}
#breadcrumb-trail li {display:inline-block; margin:0; padding:0; font-size:14px;}
#breadcrumb-trail li:first-child {font-size:16px;}
#breadcrumb-trail li:not(:last-child):after {content: " > "; padding:0 12px; font-weight:bold;}
#breadcrumb-trail li i {margin-right:4px;}
#info-trail {list-style:none; padding-right:60px; display:flex; float:right;}
#info-trail li {display:flex; align-items:center; margin:0; padding:0; font-size:14px; max-width:300px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#info-trail li:first-child {font-size:16px;}
#info-trail li:not(:last-child):after {content: " | "; padding:0 12px; font-weight:bold;}
#info-trail li i {margin-right:4px;}
.overall-status {height:2em; width:2em;}

#right {padding:100px 40px 40px 340px; width:calc(100% - 340px);}

#stage {min-width:1180px;}

#client-activity-listing .dhlist-orderby {clear:none;}

#activity-list-top.fixed {position:fixed; top:152px; border-top:18px solid #fff; left:340px; right:40px; background:#fff; z-index:2;}

.activity-folder-container {width:100%; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #ccc;}
.activity-folder-container tr td:last-child {text-align:right;}
.activity-folder-list {width:25%; padding:0;}
.activity-folder-list div {padding-bottom:4px;}
.activity-folder-list a {color:#555; text-decoration:none; border:2px solid #fff; display:block;}
.activity-folder-list a:hover {color:#000;}
.subfolders {display:block; padding:0 20px 0 40px; font-size:14px;}
.subfolders a:not(:first-child) {margin-left:20px;}

.draggable-event-title {display:inline-block; border-bottom:1px solid transparent;}
.draggable-event-title:hover {cursor:grab;}
.draggable-event-title.dragging {/*font-size:16px;*/}
.activity-folder-list a.droppable {border:2px dotted #4d9cf7;}
.folder-path {display:block;}
.folder-path i:hover:before {cursor:pointer;}

.dhlist-header-cell, .dhlist-cell {font-size:14px; padding:8px;}

/**/

.test-randomize {display:inline-block; text-transform:uppercase; font-size:12px; font-family:'Courier New', monospace;}
.test-randomize-on {color:#3c3;}
.test-randomize-on::after {content:"_on";}
.test-randomize-off {color:#f00;} 
.test-randomize-off::after {content:"off";}

.field-ctrl-toggle {position:relative; display:inline-block; text-decoration:none; padding-left:20px; color:#000;}
.field-ctrl-toggle.show:before {position:absolute; font-family:"FontAwesome"; content:"\f078"; top:2px; left:0; color:#a30000;}
.field-ctrl-toggle.hide:before {position:absolute; font-family:"FontAwesome"; content:"\f054"; top:2px; left:0; color:#a30000;}

.module-tabs {list-style:none; padding:0;}
.module-tabs li {float:left;}
.module-tabs a {display:inline-block; text-decoration:none; padding:10px; border:1px solid #a30000;}
.module-tabs a:hover {background:#ccc;}
.module-tabs a.selected {color:#fff; background:#a30000;}
.module-tabs a.add-form-btn {border:1px solid transparent; margin:0 5px;}
.module-tabs::after {content:"";}

.legacy-form-stage {width:74%; padding:20px 1% 20px 0; float:left; clear:left;}
.legacy-form-frame {list-style-type:none; margin:0; padding:0; position:relative;}
.legacy-form-frame li.form-item-container {border:1px solid #ccc; padding:10px; margin:10px 0; background:#fff;}
.element-container label {clear:both; float:left; width:30%;}
.element-container label.field-req::after {content: "*"; color:#f00;}
.element-container input {float:left; width:60%; max-width:180px;}
.element-container input[type=checkbox], .element-container input[type=radio] {float:none; width:auto; margin:0 5px;}
.element-container input.small {max-width:70px;}
.element-container input.large {max-width:60%;}
.element-container:before, .element-container:after {content:""; display:table;}
.element-container:after {clear:both;}

.element-container-header label,
.element-container-radio label, 
.element-container-checkbox label {display:block; float:none; width:auto;}
.element-container label.iblock {display:inline-block;}

.element-container-radio ul, 
.element-container-checkbox ul {margin:10px 0; padding:0; list-style:none;}

.legacy-form-row-number {font-weight:bold;}


.cafe-builder-element-list {position:fixed; width:calc(.2 * (100% - 360px)); padding:20px 1%; top:340px; bottom:40px; right:40px; overflow-y:scroll; background:#f2f2f2; font-size:12px;}
.cafe-builder-element-list li {margin:2px; padding:2px; border:1px solid #ccc; background:#fff;}
.cafe-builder-element-list li:hover {cursor:grab;}

#field-list-quick_start li {border:none; background:none;}
#field-list-quick_start li:hover {cursor:default;}

.form-item-container {position:relative;}
.form-item-container .form-ctrls {position:absolute; display:none; background:#fff; opacity:.5; top:-5px; font-size:24px;}
.form-item-container .handle {left:-5px;}
.form-item-container .edit {left:40px;}
.form-item-container:hover .handle {display:block; cursor:grab;}
.form-item-container:hover .edit {display:block; cursor:pointer;}
.element-ctrls-container {display:none; background:#f2f2f2; border:1px solid #555; padding:10px 10px 0 10px; margin:50px 0 10px 0; font-size:11pt;}
.element-ctrls-container div.container {padding:0 60px 0 0;}
.element-ctrls-container label {font-weight:bold; display:block;}
.element-ctrls-container label input {margin-left:20px;}
.element-ctrls-container label.ctrls-options {font-weight:normal; display:inline; margin-right:20px;}
textarea.config {width:100%; height:80px;}
textarea.tiny-label {}
.ctrls-options-container {display:block; padding:0 0 12px 0; clear:both;}


.choice-list-text {width:70%;}

.autonumber, .config-autonumber {width:20px; display:inline-block;}
.autonumber::after, .config-autonumber::after {content:":"}

.tooltip {position:relative; display:inline-block;}
.tooltip .tooltip-text {visibility:hidden; background:#000; color:#fff; border-radius:6px; padding:5px; position:absolute; top:-25%; left:140%; font-size:12px; font-weight:normal; width:max-content; max-width:300px;}
.tooltip:hover .tooltip-text {visibility:visible;}

#mt-stage {}
.mt-editable-ctrls {display:inline-block; width:6%; float:right;}
.mt-editable-ctrls a {font-size:26px;}
#mt-stage > p label {font-size:.85em; font-weight:bold; color:#ccc;}
#mt-stage label.mt-active {color:#000;}
#mt-stage > div {margin:0 30px 30px 30px; display:none;}
#mt-link-url {font-size:18px; padding:8px 16px; width:80%;}
#mt-stage textarea {width:90%; min-height:150px; padding:8px 16px;}
#mt-stage input[type=radio] {accent-color:#004d97; width:1.1em; height:1.1em;}
.mt-slide-header {width:30%; max-width:30%;}
.mt-slide-title {width:20%; max-width:30%;}
.mt-slide-link {width:40%; max-width:40%;}
#mt-slide-div .cafe-form-element div {float:left; margin-left:8px;}
#mt-slide-div .cafe-form-element input {width:94%;}
#mt-slide-div a {opacity:0;}
#mt-slide-div .edit-mode .cafe-form-element:hover a {opacity:1;}
#mt-slide-header-row, #mt-slide-header-row:hover {border:1px solid transparent;}
#mt-slide_new {min-width:600px;}
#mt-slide_new input {font-size:18px; padding:4px 8px;}
#mt-slide_new input[type=text] {width:94%;}
#mt-slide-div a.mt-slide-image-full {font-size:24px; opacity:1;}
#mt-slide-div a.mt-slide-image-empty {font-size:24px; opacity:.3;}

.ui-autocomplete {padding:10px; font-size:14px; max-width:500px;}
.ui-menu .ui-menu-item {overflow:hidden; white-space:nowrap; max-width:95%; border-top:1px solid transparent; border-bottom:1px solid transparent;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-state-active.ui-button:hover {background:#a30000; color:#fff;}

.edit-form label {clear:both; float:left; width:140px; margin:10px 10px 10px 0; padding:0 10px 10px 0;}
.edit-form label.long {width:240px;}
.edit-form input,
.edit-form select {float:left; margin:0 10px 10px; padding:4px 8px;}
.edit-form input[type=checkbox] {zoom:2;}
.edit-form textarea {width:80%; height:80px;}
.edit-form p {padding:10px 0;}
.edit-form div.switch-container {float:left; padding-top:10px;}

#certificate_generation-inputs {}
#certificate_generation-inputs label {font-weight:bold;}
#certificate_generation-inputs label small {font-weight:normal;}

#cert-bg {position:relative; width:100%;}
.hair {position:absolute; top:0; left:0; z-index:3; border-top:1px dotted #000; border-left:1px dotted #000;}
#vline {bottom:0;}
#hline {right:0;}
.hair.sel {border-top-style:solid; border-left-style:solid; border-color:#a020f0;}
.grid {position:absolute; z-index:2; border-top:1px solid #a020f0; border-left:1px solid #a020f0; opacity:.25;}
#c25line {top:0; bottom:0; left:25%;}
#cvline {top:0; bottom:0; left:50%;}
#c75line {top:0; bottom:0; left:75%;}
#h25line {top:25%; left:0; right:0;}
#hvline {top:50%; left:0; right:0;}
#h75line {top:75%; left:0; right:0;}
#the-cert {z-index:1; border:10px solid #ccc;}
.new-field {border:1px solid #ccc; box-shadow:0 0 12px #ccc; padding:2px; position:absolute; background:#fff; z-index:6; width:300px;}
.new-field a {margin:0 4px;}
.new-field ul li:nth-last-of-type(2) {margin-left:10px;}
.new-field ul li:nth-last-of-type(1) {margin-left:10px;}
.cert-msg {padding:8px; clear:both;}
.ta.unsel, .fs.unsel {opacity:.2}
.cert-field {background:#f2f2f2; padding:2px; position:absolute; z-index:5; width:100px; height:25px; white-space:nowrap; border-top:2px solid #000;}
.edit-cert-field {display:inline-block; background:#a30000; color:#fff; text-decoration:none; width:80px;}
.edit-cert-field:hover {background:#f2f2f2; color:#555;}
/*.drag-cert-field {display:inline-block; background:#a30000; color:#fff; width:20px; text-align:center;}
.drag-cert-field:hover {background:#f2f2f2; color:#555;}
*/
.drag-cert-field {display:inline-block; position:relative; background:#a30000; color:#fff; width:20px; text-align:center;}
.drag-cert-field ixxxx {position:absolute; top:0; bottom:0; left:0; right:0;}
.move {position:absolute; width:6px; height:6px; display:inline-block; text-indent:-100000px;}
.move-up {top:0; left:7px;}
.move-down {bottom:0; left:7px;}
.move-left {top:6px; left:0;}
.move-right {top:6px; right:0;}
.move:hover {background:#a30000; opacity:.2;}
.move-save {position:absolute; display:none; width:20px; height:20px; background:#0c0; color:#fff; text-align:center; top:0; right:-30px;}

#event-dashboard {margin:10px auto;}
.event-dashboard-row {display:flex;}
.event-dashboard {flex:1; text-align:center; padding:5px; margin:5px; background:#f5f5f5; border:1px solid #f5f5f5; position:relative;}
.event-dashboard span {display:block; font-size:28px;}
#event-meta {text-align:left;}

.horiz-chart {text-align:left;}
.horiz-chart label {display:inline-block; width:40%; max-width:300px; font-size:14px;}
.horiz-chart-bar-container {display:inline-block; width:60%;}
.horiz-chart-bar-container div {text-align:right; height:18px;}
.horiz-chart-bar-container span {font-size:12px; padding:4px; background:#f5f5f5; height:100%; float:right;}

.date-range-selector {border:1px solid transparent; margin-right:30px;}
.date-range-selector:hover, .date-range-selector:focus {border:1px solid #555;}

#activity-metrics-ctrls {position:fixed; background:#fff; top:150px; left:340px; right:0; padding:20px 0 10px; z-index:5;}
#activity-metrics-stage {padding-top:70px;}
.activity-metrics-ctrl {line-height:1.15; margin:1em;}
.activity-metrics-ctrl i {margin-right:4px;}

.tile {display:inline-block; width:43%; margin:1.32%; padding:10px; background:#f5f5f5; border:10px solid #f5f5f5; height:340px; font-size:.8em; overflow:hidden; position:relative;}
.full-tile, .summary-tile {width:93%; height:auto; margin:1.32% 1%;}
.mini-tile {width:26%; height:200px; padding:0;}
.donut-tile {height:280px;}
.summary-tile {height:auto;}
.summary-test-left {float:left; clear:right; width:60%; padding:0 5%;}
.summary-test-right {float:right; width:30%;}

.activity-ga-container {padding:20px 0;}
.activity-ga-url {text-align:center;}

#activity-ga-sessions {position:relative; border:4px solid transparent;}
#activity-ga-sessions.selectable {border:4px solid #ccc;}
#activity-ga-sessions.selectable:hover {border:4px solid #a30000; cursor:pointer;}

/*.event-dashboard:hover,
.tile:hover {border:1px solid; cursor:pointer;} 
*/

.retake-time {padding:10px 340px 10px 40px;}

#setpass-ctrls {margin-top:20px;}

#activity-metrics-info {display:inline-block; width:500px; opacity:0;}
#activity-metrics-info a {margin:0 6px; font-size:.9em;}
#activity-metrics-info i {padding-right:4px;}
#activity-metrics-counter {display:inline-block; padding:0 10px;}
.selectable.event-dashboard {padding:10px; border:4px solid #ccc;}
.selectable.tile {border:10px solid #ccc;}
.selectable.event-dashboard:hover {border:4px solid #a30000; cursor:pointer;}
.selectable.tile:hover {border:10px solid #a30000; cursor:pointer;}

.report-selected {border:1px solid #a30000; background-color:rgba(255, 255, 255, .5); position:absolute; padding:3px; color:#a30000; top:0; left:0; font-size:12px;}

.not-selecting .report-selected {display:none;}

/* clients */
.client-info {font-size:18px; margin:0 10px 10px 0; padding:5px 10px; border:1px solid #555;}
#x-client_name {font-size:24px; width:60%;}
#x-client_code {font-size:24px; width:10%; text-transform:uppercase;}
#x-api_user {width:10%;}
#x-api_pass {width:30%;}
#client-info ul {column-count:4;}
#client-info ul li {padding:20px 0;}
#client-info ul li input {width:60%; height:60px;}
#client-info a {font-size:24px; margin:0 4px;}
#client-info a.cancel-ctrl {display:none;}

/* Dynamic Pages */
#x-dynapage_title {font-size:24px; width:60%;}
#dyna-info a {font-size:24px; margin:0 4px;}
#dyna-info a.cancel-ctrl {display:none;}

/* Contact Forms */
#contact-form-data {border-collapse:collapse; margin:0 20px;}
#contact-form-data th {text-align:left; margin-right:20px;}
#contact-form-data th, #contact-form-data td {padding:4px 8px; border-bottom:1px solid #f2f2f2; vertical-align:top;}
.form-acknowledged {color:#ccc;}

/* Websites */
a.website-list {text-decoration:none; color:#000;}
a.website-list:hover {text-decoration:underline;}
a.website-list.dynapage-list {font-size:11px;}
a.website-list.dynapage-list i {margin-right:4px;}

#website-dyna-info a {font-size:24px; margin:0 4px;}
#website-dyna-info a.cancel-ctrl {display:none;}

#wpx .dhlist-header-cell, #wpx .dhlist-header-cell a {color:#000; background:#fff; border-bottom:2px solid #000; border-top:none;}

#website-design-editor {width:100%; height:80%; border-collapse:collapse; background:#fff; font-size:10px;}
#website-design-editor td {border:1px solid #ccc; padding:6px;}
.wde-brace img {width:30px; max-width:30px; height:80%; opacity:.25;}
#website-design-editor td.wde-page {width:1024px; padding:0; font-size:16px;}
.wde-bg {width:88px;}
#website-design-editor select {width:80px; font-size:10px;}

#wde-configurator {min-width:1000px;}
#wde-configurator hr {border:2px solid;}
#wde-configurator h3 {font-size:14px;}
#wde-configurator label {display:inline-block;}
.wde-alignment label {margin-right:20px;}
#show-mods-ctrls label {font-size:12px; margin-right:20px;}
#wde-links .handle {display:inline-block; margin:2px 8px 6px 2px;}
#wde-links .handle:hover {cursor:move; opacity:.5;}
#wde-link-title-row label {font-weight:bold;}
#wde-header-type {margin:0 160px 0 32px;}
#wde-header-title {margin:0 150px 0 0;}
.wde-link-url {width:360px;}

#wde-preview {margin:0 auto; padding:0 0 20px 0;}
#wde-preview-header, #wde-preview-body, #wde-preview-footer {margin:0 auto;}
#wde-preview-body {width:1024px;}

/*
#Clients_Analytics-stage table {border-collapse:collapse;}
#Clients_Analytics-stage th {padding:2px 6px; border-bottom:2px solid #333;}
#Clients_Analytics-stage td {padding:2px 6px; border:1px solid #ccc;}
*/
.ga-report-container {display:inline;}
.ga-sessions tr {vertical-align:bottom;}
.ga-sessions td {font-size:26px; font-weight:bold; padding:8px 20px;}
.ga-sessions th {font-weight:normal; padding:0 30px 60px 30px; font-size:12px;}
.ga-sessions th:first-of-type {text-align:left; font-weight:bold;}

/* events */
#Clients_Events_Activity-stage .dhlist-table {border-bottom:2px solid #a30000;}
#event-info {width:90%; margin-top:50px;}
.event-info {font-size:18px; margin:0 10px 10px 0; padding:5px 10px; border:1px solid #555; position:relative;}
#x-event_title {font-size:32px; width:90%;}
#x-short_title {width:40%;}
#x-event_code {text-transform:uppercase;}
#x-event_code::placeholder {text-transform:none;}
#x-html_title, #x-html_title-div, #x-event_overview {width:90%;}
#x-event_overview {min-height:150px; height:auto;}
.timeline-label {display:inline-block; width:280px; padding:0 10px 6px;}
#event-info a {font-size:24px; margin:0 4px;}
#event-info a.cancel-ctrl {display:none;}
#event-info input[type=checkbox] {transform:scale(1.5);}
#x-html_title-div {background:#fafafa; min-height:40px; border:1px solid #fafafa;}
#event-info .tox {margin-bottom:20px; width:calc(90% + 20px);}

.editable:focus, .editable:hover {box-shadow:0 0 10px #555;}
.editable:disabled {border:1px solid transparent; color:#000; box-shadow:none;}
textarea.editable:disabled {resize:none; min-height:40px;}

.download-link {text-decoration:none;}
.download-link i {margin-right:6px;}

.path-stage-container {border-bottom:1px solid #d5d5d5; padding:0 0 5px 5px; color:#aaa;}
.path-stage-container h3 {font-size:10px; margin:2px 0; padding:4px 0 0 0;}
.path-stage {list-style:none; margin:2px 0; padding:2px 0; min-height:40px;}
.path-stage > li {float:left;}
.path-stage > li:not(:last-child):after {content:"\2192"; padding:0 12px; font-size:30px;}
.path-stage i {float:left; font-size:40px;}
.path-stage-accreditor-list {list-style:none; float:left; padding:0 6px;}
.path-stage-accreditor-list li {font-size:12px;}
.path-stage-mod-container {padding:4px; float:left; }
.path-stage-mod-container:hover {box-shadow:0 0 4px #a30000;} 
.path-stage-mod-container.sel {box-shadow:0 0 4px #000;}

.path-stage-multi-link {color:#555;}

.path-min h3 {display:none;}
.path-min .path-stage {min-height:24px;}
.path-min .path-stage > li:not(:last-child):after {padding:0 4px; font-size:14px;}
.path-min .path-stage i {font-size:24px;}
.path-min .path-stage-accreditor-list li {font-size:12px;}


.form-status-3 {color:#3c3;}
.form-status-2 {color:#f39a08;}
.form-status-1 {color:#f00;}
.form-status-0 {color:#ccc;}
.form-status-0 a i {color:#000;}

.dot.form-status-3 {background:#3c3;}
.dot.form-status-2 {background:#f39a08;}
.dot.form-status-1 {background:#f00;}
.dot.form-status-0 {background:#ccc;}

.form-status-ctrl {width:25px; height:25px;}
.form-status-ctrl-3 {accent-color:#3c3;}
.form-status-ctrl-2 {accent-color:#f39a08;}
.form-status-ctrl-1 {accent-color:#f00;}
.form-status-ctrl-0 {accent-color:#ccc;}

#event-path-stage {position:relative;}

#event-mod-working-info {margin:0; padding:0; border:none;}
#event-mod-working-info.active {padding:20px 0; margin:0 0 20px 0; border-bottom:2px solid #555;}
#event-mod-working-info.active.fixed {background:#fff; top:150px; left:340px; right:40px; z-index:5;}
#event-mod-working-info li:last-child {float:right;}
#event-mod-working-info li:not(:last-child, :nth-last-child(2)):after {content:"|"; padding:0 12px;}
#event-mod-working-info li label {font-size:.8em; font-weight:bold; color:#555;}
#event-mod-working-info li i {font-size:20px;}

.delete-page-icon:before {content:"|"; padding:0 12px;}

#test-score-link {text-decoration:none; border:1px solid; padding:6px 4px 2px 4px;}
#set-passing-score {font-size:40px; width:100px; text-align:center;}

#event-note-txt {width:700px; height:80px; padding:5px 10px; border:1px solid #555;}

#files-list-path {}
#files-list-path span {font-size:16px; display:inline-block; padding-left:4px; padding-right:4px;}
#files-list-path a {text-decoration:none;}
#files-list-stage {clear:both; padding:0;}
#files-list-stage .fa-folder {font-size:32px;}
.edit-form label.fm-input-label {width:auto; font-weight:bold; padding-right:0; margin:5px 0;}

#Clients_Events_Accreditors-stage select, .acc-codes-list input {margin:0 10px 0 0; padding:4px 8px;}
#Clients_Events_Accreditors-stage select {width:130px;}
.acc-codes-list label {padding:0 2px 0 20px;}
.acc-codes-list input {width:120px;}
.acc-codes-list input.acc-hrs {width:30px;}
.acc-codes-list a {font-size:.8em;}
#acc-save.btn {opacity:0;}
#acc-save.btn-show {opacity:1; transition:opacity 2s; background:#fff; animation:bg-change 2s;}
#acc-save-msg {background:#fff; animation:bg-change 4s;}
#acc-save-msg span {color:#fff; animation:fg-change 4s; margin:6px 10px; padding:6px 10px;}
@keyframes bg-change {from {background-color:#a30000;} to {background-color:#fff;}}
@keyframes fg-change {0% {color:#fff;} 50% {color:#000;} 100% {color:#fff;}}

.report-listing-container {display:flex; flex-wrap:wrap; gap:30px 100px;}
.report-list-container {}
.report-list-container h3 {margin:8px 0; font-size:16px;}
.report-list-container ul {list-style:none; margin:0; padding:0; width:300px;}
.report-list-container li {margin:0; padding:2px 6px; border-bottom:1px solid #f2f2f2; font-size:12px;}
.report-list-container li:hover {background:#f2f2f2;}
.report-list-container span:last-child {float:right;}
.report-list-container a {margin:0 4px;}

.apicafe-report-data {border-collapse:collapse; margin:40px auto; padding:10px;}
.apicafe-report-data td {font-size:10px; padding:2px; border:1px solid #555;}
.apicafe-report-data tr.apicafe-report-header {font-weight:bold;}

/* accounts */
.account-tabs-stage {padding:40px 0;}
.account-info li {margin:2px 0 4px 0; padding:2px 0 4px 0; border-bottom:1px solid #f2f2f2;}
.account-info label {display:inline-block; width:160px; font-weight:bold;}


/* calendar */
#cal-action-ctrls > li {padding-bottom:8px;}
#cal-action-ctrls span {display:inline-block; margin:8px 2px 18px 30px;}
#cal-action-ctrls input[type="text"] {padding:4px 8px; width:400px;}

#activity-accred-dates {margin:20px 20px 0 0;}
#activity-accred-dates * {font-size:10px;}
#activity-accred-dates input {margin-right:20px;}

.cal-month {list-style-type:none; border-collapse:collapse; margin:0; padding:0;}
.cal-month li {display:inline-block; width:14%; height:30px; border:1px solid; text-align:center; box-sizing:border-box;}
.cal-month li.cal-month-first-day-1 {margin-left:14%;}
.cal-month li.cal-month-first-day-2 {margin-left:28%;}
.cal-month li.cal-month-first-day-3 {margin-left:42%;}
.cal-month li.cal-month-first-day-4 {margin-left:56%;}
.cal-month li.cal-month-first-day-5 {margin-left:70%;}
.cal-month li.cal-month-first-day-6 {margin-left:84%;}
.cal-month li.cal-month-weekend {background:#ccc;}
.cal-month li.cal-month-holiday {background:#a30000;}
.cal-month li.cal-month-today {background:#ccccfc;}

.calendar-year-view h2 {font-size:26px;}
.calendar-year-view h2 a {font-size:16px; padding:0 0 0 10px;}
.calendar-year-view .cal-container {display:inline-block; width:18%; margin:0 4% 20px 0; font-size:10px; vertical-align:top;}
.calendar-year-view .cal-container h3 span {display:none;}
.calendar-year-view .cal-header .cal-day-header span {display:none;}
.calendar-year-view .cal-header .cal-day-header span:first-of-type {display:block; font-weight:bold;}
.calendar-year-view .cal-month li {border:1px solid transparent; height:20px; padding-top:3px;}
.calendar-year-view .cal-month li.cal-month-weekend {background:#f5f5f5;}
.calendar-year-view .cal-month li.cal-month-holiday {background:transparent; border-radius:50%; border-color:#a5a5ff;}
.calendar-year-view .cal-month li.cal-month-today {background:transparent; border-radius:0%; border-color:#555;}
.calendar-year-view .cal-month li.cal-recur {background:transparent; border-radius:50%; border-color:#fe7f2d; color:#fe7f2d;}
.calendar-year-view .cal-month li.acc-start {background:#0c0; border-radius:50%; border-color:#0c0; color:#fff;}
.calendar-year-view .cal-month li.acc-90 {background:rgba(255, 0, 0, .2); border-radius:50%; border-color:#f00; color:#fff;}
.calendar-year-view .cal-month li.acc-60 {background:rgba(255, 0, 0, .5); border-radius:50%; border-color:#f00; color:#fff;}
.calendar-year-view .cal-month li.acc-30 {background:rgba(255, 0, 0, .8); border-radius:50%; border-color:#f00; color:#fff;}
.calendar-year-view .cal-month li.acc-end {background:#f00; border-radius:50%; border-color:#f00; color:#fff;}
.calendar-year-view .cal-month li:hover {border-radius:50%; border-color:#000; cursor:pointer;}
.calendar-year-view .cal-month .cal-event-list {display:none;}

.calendar-month-view h2 {font-size:26px;}
.calendar-month-view h2 a {font-size:16px; padding:0 0 0 10px;}
.calendar-month-view .cal-container h3 {display:none;}
.calendar-month-view .cal-month li {text-align:left; border-top:1px solid transparent; border-left:1px solid transparent; border-right:1px solid #f2f2f2; border-bottom:1px solid #f2f2f2; height:100px; overflow:hidden; vertical-align:top;} 
.calendar-month-view .cal-month li.cal-month-weekend {background:#e5e5e5;}
.calendar-month-view .cal-month li.cal-day-header {border:1px solid transparent; text-align:center; height:auto; font-weight:bold; padding-bottom:6px;}
.calendar-month-view .cal-month li.cal-month-first-day {border-left:1px solid #f2f2f2;}
.calendar-month-view .cal-month li.cal-month-top-row {border-top:1px solid #f2f2f2;}
.calendar-month-view .cal-month-day {padding:5px; display:inline-block;}
.calendar-month-view .cal-month .cal-event-list {display:block; font-size:10px; padding:2px; margin:2px auto;}
.calendar-month-view .cal-month li.cal-recur .cal-event-list {background:#fe7f2d; border-radius:5px; border-color:#fe7f2d; color:#fff;}
.calendar-month-view .cal-month li.acc-start .cal-event-list {background:#0c0; border-radius:5px; border-color:#0c0; color:#fff;}
.calendar-month-view .cal-month li.acc-90 .cal-event-list {background:rgba(255, 0, 0, .2); border-radius:5px; border-color:#f00; color:#fff;}
.calendar-month-view .cal-month li.acc-60 .cal-event-list {background:rgba(255, 0, 0, .5); border-radius:5px; border-color:#f00; color:#fff;}
.calendar-month-view .cal-month li.acc-30 .cal-event-list {background:rgba(255, 0, 0, .8); border-radius:5px; border-color:#f00; color:#fff;}
.calendar-month-view .cal-month li.acc-end .cal-event-list {background:#f00; border-radius:5px; border-color:#f00; color:#fff;}
.calendar-month-view .cal-month li.cal-client-event .cal-event-list {background:#f0f; border-radius:5px; border-color:#f0f; color:#fff;}
.calendar-month-view .cal-month li.cal-client-event .cal-event-list.multi-day {border-radius:0;}
.calendar-month-view .cal-month li.cal-month-holiday {background:#fff;}
.calendar-month-view .cal-month li .cal-event-holiday {background:#a30000; border-radius:5px; border-color:#a30000; color:#fff;}

.site-error-log-header {float:left; padding:0 30px 10px 0;}
.site-error-log-header span {padding-right:2px; font-size:12px; color:#555;}
.site-error-log-header span:hover {cursor:pointer;}
.site-error-log-header span.active {color:#a30000;}

.site-error-log {background:#fe7f2d; color:#fff;}
.site-error-log-stage {clear:both;}

input[type=text].scheds {width:95%; padding:4px; font-size:12px;}
textarea.scheds {width:95%; padding:4px; font-size:12px; height:60px;}

#account-mod-data #detail-tabs .active-tab {background:#f2f2f2; border-bottom:1px solid #f2f2f2;}
#account-mod-data .mod-title {background:#f2f2f2; border-bottom:2px solid #000; margin:0; padding:30px 10px 10px 10px;}

.cafe-module-form-editable .cafe-form-element.cafe-hide-not-logged-in {border:1px dashed #555;}
.cafe-module-form-editable .cafe-form-element.cafe-hide-logged-in {border:1px dashed #0cc;}
.cafe-module-form-editable .cafe-form-element.cafe-hide-first-load {border:1px dashed #c33;}

.cafe-view-mode-account .cafe-form-element.cafe-incorrect {border:1px solid #f00; margin:10px 0;}
.cafe-view-mode-account .cafe-form-element.cafe-correct {border:1px solid #0f0; margin:10px 0;}

.cafe-view-mode-account input:disabled,
.cafe-view-mode-account textarea:disabled,
.cafe-view-mode-account select:disabled {background:#fff; border:1px solid #ccc; color:#000;}
,
.cafe-view-mode-account input[type="checkbox"]:disabled {border:1px solid #f00; background:#0f0;}
.cafe-view-mode-account input[type="radio"]:disabled:checked {position: relative;
  height:13px;
  width: 13px;
  box-sizing: border-box;
  &:after {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
	border:1px solid #000;
    background:#d7d7d7;

  }}

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

.rotating {-webkit-animation: rotating 1s linear infinite; cursor:progress;}



.shadow-spinner, .shadow-spinner * {
      box-sizing: border-box;
    }

    .shadow-spinner {
      height: 0;
      width: 0;
      position: relative;
        margin:0;
    }

#overlay.open .shadow-spinner {width:300px; height:300px; margin:100px auto;}

.shadow-spinner .ring {position:absolute; top:0; left:-100000px;}

#overlay.open .shadow-spinner .ring {
      border-radius: 50%;
      
      border: calc(300px * 0.05) solid transparent;
      border-top-color: #555;
      border-left-color: #333;
      animation: shadow-spinner-animation 3s infinite;
    }

#overlay.open .shadow-spinner .ring:nth-child(1) {
      height: calc(300px - 300px * 0.2 * 0);
      width: calc(300px - 300px * 0.2 * 0);
      top: calc(300px * 0.1 * 0);
      left: calc(300px * 0.1 * 0);
      animation-delay: calc(2000ms * 0.1 * 4);
      z-index: 5;
    }

#overlay.open .shadow-spinner .ring:nth-child(2) {
      height: calc(300px - 300px * 0.2 * 1);
      width: calc(300px - 300px * 0.2 * 1);
      top: calc(300px * 0.1 * 1);
      left: calc(300px * 0.1 * 1);
      animation-delay: calc(2000ms * 0.1 * 3);
      z-index: 4;
    }

#overlay.open .shadow-spinner .ring:nth-child(3) {
      height: calc(300px - 300px * 0.2 * 2);
      width: calc(300px - 300px * 0.2 * 2);
      top: calc(300px * 0.1 * 2);
      left: calc(300px * 0.1 * 2);
      animation-delay: calc(2000ms * 0.1 * 2);
      z-index: 3;
    }

#overlay.open .shadow-spinner .ring:nth-child(4) {
      height: calc(300px - 300px * 0.2 * 3);
      width: calc(300px - 300px * 0.2 * 3);
      top: calc(300px * 0.1 * 3);
      left: calc(300px * 0.1 * 3);
      animation-delay: calc(2000ms * 0.1 * 1);
      z-index: 2;
    }

#overlay.open .shadow-spinner .ring:nth-child(5) {
      height: calc(300px - 300px * 0.2 * 4);
      width: calc(300px - 300px * 0.2 * 4);
      top: calc(300px * 0.1 * 4);
      left: calc(300px * 0.1 * 4);
      animation-delay: calc(2000ms * 0.1 * 0);
      z-index: 1;
    }

    @keyframes shadow-spinner-animation {
      50% {
        transform: rotate(360deg) scale(0.7);
      }
    }

@media screen and (min-height:800px) {
    #left { position: fixed; }
}