/*
 * General
 */
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-size: 15px; font-family: 'Open Sans', sans-serif; color: #333; overflow: hidden; }
h1 { font-size: 1.2em; margin: 0; padding: 0 }
ul, ol { padding: 0; margin: 0; list-style: none; }
a { color: var(--link-color); text-decoration: none; }
.icon { display: inline-block; }
.float { float: left; }
.float.right { float: right; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.fade-out { opacity: 0; transition: all .25s ease-in-out; }
.fade-out.slide-down { transform: translateY(25px); }
/*li { margin: 0 0 -3px 0; }
li:last-child { margin: 0 0 0 0; }*/

/* Helper classes / attr */
.cf:after, .clearfix:after { content:""; display:block; clear:both; }
[unselectable] {cursor:default;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
#editor-container, #email_left_html { height: 500px }
textarea#email_left_html { height: 0; min-height: 0; margin: 0; padding: 0; border: 0; }

.hide { display: none !important; }

body.scrolling h2 { font-size: 1.5em; }

body.small { font-size: 13px; }
body.medium { font-size: 15px; }
body.large { font-size: 17px; }

input, textarea, select, button { -webkit-appearance: none; -webkit-border-radius: 0; }

/*
 * Form & fields
 */

.form-errors .error { display: block; width: 100%; padding: 8px 10px; padding-left: 35px; margin-bottom: 10px; font-size: 1rem; font-weight: 500; color: white; background-color: #de4646; border-radius: 2px; position: relative; }
.form-errors .error::before { content: '\f057'; font-family: 'Font Awesome 5 Pro'; font-weight: 600; line-height: 1rem; position: absolute; top: calc(50% - .5rem); left: 10px; }

form .fields { display: flex; flex-flow: row wrap; }
label.required::after { content: '*'; color: red; margin-left: 5px;  }
label.title {width: 100%;font-size: 1.6em;margin-bottom: 25px;text-transform: uppercase;padding: 0 10px;}
label.title.half { width: 50% }

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection__arrow,
[disabled], [readonly] { background: #f3f3f3 !important; }

.red { color:var(--red);}
i.red { color: var(--red); }
.green { color: var(--green); }
.grey { color: var(--grey); }
.yellow { color: var(--yellow); }
.orange { color: var(--orange); }
.blue { color: var(--blue) }

.field-wrapper { width: 100%; display: inline-block; padding: 0 5px; margin-bottom: 20px; position: relative; }
.field-wrapper.half { width: 50%; }

.form-list .row .column label,
.field-wrapper > label { margin-bottom: 5px; display: block; color: var(--label-color); font-size: 1em; font-weight: 600; }
.field-wrapper.form > label { margin-bottom: 30px; font-size: 1.6em; }
.field-wrapper input[type=text],
.field-wrapper input[type=date],
.field-wrapper input[type=email],
.field-wrapper input[type=number],
.field-wrapper input[type=password],
.field-wrapper input[type=tel],
.field-wrapper select,
.field-wrapper textarea { width: 100%; background: #fff; }
.field-wrapper input[type=text],
.field-wrapper input[type=date],
.field-wrapper input[type=email],
.field-wrapper input[type=number],
.field-wrapper input[type=password],
.field-wrapper input[type=tel],
.field-wrapper select { height: 35px; line-height: 35px; border: 1px solid #a9a9a9; padding: 0 10px; font-size: 1em; color: #333; font-family: 'Open Sans', sans-serif; border-radius: 1px; }
.field-wrapper input[type=radio],
.field-wrapper input[type=checkbox] { display: block; width: 0; height: 0; transform: scale(0); position: absolute; }
.field-wrapper input[type=radio] + label,
.field-wrapper input[type=checkbox] + label { display: flex; align-items: center; padding: 5px 10px; cursor: pointer; }
.field-wrapper input[type=radio]:focus + label::before,
.field-wrapper input[type=checkbox]:focus + label::before { outline: auto 5px -webkit-focus-ring-color; }
.field-wrapper select { padding-right: 45px; background-image: url('data:image/svg+xml;base64,ICAgIDxzdmcgYXJpYS1oaWRkZW49InRydWUiIGRhdGEtcHJlZml4PSJmYWwiIGRhdGEtaWNvbj0iYW5nbGUtZG93biIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWFuZ2xlLWRvd24gZmEtdy04IiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI1NiA1MTIiPjxwYXRoIGZpbGw9IiNhOWE5YTkiIGQ9Ik0xMTkuNSAzMjYuOUwzLjUgMjA5LjFjLTQuNy00LjctNC43LTEyLjMgMC0xN2w3LjEtNy4xYzQuNy00LjcgMTIuMy00LjcgMTcgMEwxMjggMjg3LjNsMTAwLjQtMTAyLjJjNC43LTQuNyAxMi4zLTQuNyAxNyAwbDcuMSA3LjFjNC43IDQuNyA0LjcgMTIuMyAwIDE3TDEzNi41IDMyN2MtNC43IDQuNi0xMi4zIDQuNi0xNy0uMXoiPjwvcGF0aD48L3N2Zz4K'); background-size: 15px auto; background-position: center right 15px; background-repeat: no-repeat; }
.field-wrapper .show-password {position: absolute;right: 10px;line-height: 50px;color: var(--main-color);padding: 0 15px;cursor: pointer;}

.field-wrapper input[type=radio] + label::before,
.actions-button input[type=radio] + label::before,
.radios input[type=radio] + label::before,
.field-wrapper input[type=checkbox] + label::before,
.actions-button input[type=checkbox] + label::before,
.checkboxes input[type=checkbox] + label::before{ content: ''; display: inline-block; width: 12px; height: 12px; border: 1px solid #333; border-radius: 3px; margin-right: 8px; }

.field-wrapper input[type=radio] + label:empty::before,
.actions-button input[type=radio] + label:empty::before,
.radios input[type=radio] + label:empty::before,
.field-wrapper input[type=checkbox] + label:empty::before,
.actions-button input[type=checkbox] + label:empty::before,
.checkboxes input[type=checkbox] + label:empty::before { margin-right: 0; }

.field-wrapper input[type=radio] + label::before,
.actions-button input[type=radio] + label::before,
.radios input[type=radio] + label::before { border-radius: 8px; }

.field-wrapper input[type=radio]:checked + label,
.actions-button input[type=radio]:checked + label,
.field-wrapper input[type=checkbox]:checked + label { background: rgba(0, 80, 178, 0.1); border-radius: 3px; }

.field-wrapper input[type=radio]:checked + label::before,
.actions-button input[type=radio]:checked + label::before,
.field-wrapper input[type=checkbox]:checked + label::before,
.actions-button input[type=checkbox]:checked + label::before,
.checkboxes input[type=checkbox]:checked + label::before { background: var(--main-color); border: 1px solid var(--main-color); }

.field-wrapper textarea { min-height: 150px; padding: 15px 10px; border: 1px solid #a9a9a9; resize: vertical; font-size: 1em; color: #333; font-family: 'Open Sans', sans-serif; }
.field-wrapper .choice label.required::after { content: ''; }
.field-wrapper .select2-hidden-accessible { width: 100% !important; }
.field-wrapper.important-note label { font-size: 1.6em; }
.field-wrapper.important-note textarea { background-color: rgba(0, 80, 178, 0.02); color: var(--main-color); font-weight: 600; font-size: 1.1em; }
.field-wrapper a.field-link { display: inline-block; margin-top: 5px; font-style: italic; }
.field-wrapper a.field-link i { font-size: .8em; margin-left: 5px; }
.field-wrapper.preview iframe { width: 100%; height: 100%; border: 0; border-radius: 3px; }
.field-wrapper ul.collection li { margin-bottom: 10px; position: relative; }
.fields.preview { height: 100%; }

.button:hover { filter: brightness(1.1); }
.button { display: inline-block; text-decoration: none; align-items: center; background: var(--default-button-color); border: 1px solid var(--default-button-color); color: #fff; padding: 10px 15px; border-radius: 3px; font-size: 1em; line-height: 1.2em; cursor: pointer; margin-right: 5px; user-select: none; text-transform: uppercase;border-bottom: 2px solid rgba(0, 23, 103, 0.33) !important;}
.button.small { padding-top: 7px; padding-bottom: 7px; }
.button.red {background: var(--red); border: 1px solid var(--red);}
.button.red:hover { filter: brightness(1.1); }
.button.green { background: var(--green); border-color: var(--green); }
.button.green:hover { filter: brightness(1.1); }
.button.gray,
.button.grey { background: var(--grey); border-color: var(--grey); }
.button.light-gray,
.button.light-grey { color: #777; background: #ddd; border-color: #ddd; border-bottom-color: #bbb !important; }
.button.light-gray:hover,
.button.light-grey:hover { filter: brightness(0.95); }
.button.yellow { background: var(--yellow); border-color: var(--yellow); }
.button.orange { background: var(--orange); border-color: var(--orange); }
.button-container { padding: 0 5px; margin-top: 20px; }
.button-container.right { text-align: right }
.button.small { padding-top: 7px; padding-bottom: 7px;}
.button[disabled], .button.disabled {background:#aaa;border-color: #f3f3f3;color:#8e8e8e;cursor:default;pointer-events: none;}
.actions-button { position: relative }
.actions-button ul.dropdown { display: none; position: absolute; top: 100%; left: 0; background-color: #fff; border-radius: 3px; border: 1px solid rgba(0, 80, 178, 0.15); z-index: 1000; white-space: nowrap; overflow: hidden; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12); margin-top: 7px; user-select: none; z-index: 1000; }
.actions-button ul.dropdown.right,
.head .actions-button:not(.status) ul.dropdown { left: auto; right: 0; }
.actions-button input[type=checkbox] { display: block; width: 0; height: 0; transform: scale(0); position: absolute; }
.actions-button input[type=checkbox]:checked + ul.dropdown { display: block; }

.actions-button .actions > i { margin-left: 10px; }
.actions-button.status .actions > i { margin-left: 5px; }
.actions-button ul.dropdown li, .actions-button ul.dropdown li button { font-family: 'Open Sans', sans-serif; text-transform: none; font-weight: 400; text-align: left; }
.actions-button ul.dropdown li.separator { border-bottom: 1px solid rgba(0, 80, 178, 0.15); }
.actions-button ul.dropdown li span,
.actions-button ul.dropdown li a,
.actions-button ul.dropdown li button { display: inline-block; width: 100%; background-color: transparent; border: none; padding: 10px 15px; color: var(--default-button-color); cursor: pointer; font-size: 15px; text-align: left; outline: none; }
.actions-button ul.dropdown li a > i,
.actions-button ul.dropdown li button > i { margin-right: 10px }
.actions-button ul.dropdown li a.red,
.actions-button ul.dropdown li button.red { color: #f85757; }
.actions-button ul.dropdown li a.green,
.actions-button ul.dropdown li button.green { color: var(--green); }
.actions-button ul.dropdown li a:hover,
.actions-button ul.dropdown li button:hover { color: #fff; background-color: var(--default-button-color); }
.actions-button ul.dropdown ul.fields { padding: 10px 15px; }
.actions-button ul.dropdown ul.fields li { width: 100%; margin-bottom: 4px; }
.actions-button ul.dropdown ul.fields li:last-of-type { margin-bottom: 0; }
.actions-button ul.dropdown ul.fields li label { display: block; width: 100%; cursor: pointer; color: var(--label-color); }
.actions-button ul.dropdown li.fontSize a { width: calc(33% - 26px); padding: 5px; margin: 5px 12px; text-align: center; text-decoration: none; align-items: center; background: #fff; border: 1px solid var(--main-color); color: var(--main-color); border-radius: 3px; font-size: 15px; line-height: 1.2em; cursor: pointer; user-select: none; text-transform: uppercase; border-bottom: 2px solid rgba(0, 23, 103, 0.33) !important; }
.actions-button ul.dropdown li.fontSize a.active { background: var(--main-color); color: #fff; }
.actions-button ul.dropdown li.fontSize a[size="small"]     { font-size: 12px; }
.actions-button ul.dropdown li.fontSize a[size="medium"]    { font-size: 15px; }
.actions-button ul.dropdown li.fontSize a[size="large"]     { font-size: 18px; }

.input-wrapper.percentage { position: relative; }
.input-wrapper.percentage::after { display: flex; width: 30px; height: 100%; justify-content: center; align-items: center; align-content: center; content: '\f295'; font-family: "Font Awesome 5 Pro"; font-weight: 300; color: var(--main-color); position: absolute; top: 0; right: 0; pointer-events: none; }
.input-wrapper.percentage input { width: 100px; padding-right: 20px; text-align: right; }

.user .actions-button { margin-left: 5px; }
.user .name {cursor:pointer;}
.user .actions-button .dropdown-action { display: flex; cursor: pointer; justify-content: center; align-items: center; }
.user .actions-button .dropdown-action i { margin-left: 5px; }
.user .actions-button .dropdown-action i:nth-child(1) { font-size: 22px; }
.user .actions-button ul.dropdown { left: inherit; right: 0; margin-top: 2px; }

.column.more .actions-button { width: 100%; }
.column.more .actions-button > label { display: block; width: 100%; cursor: pointer; }
.column.status .actions-button > label { display: block; cursor: pointer; color: var(--label-color); }


.field-wrapper .group { background-color: var(--light-grey); padding: 10px; margin-bottom: 20px; }
.field-wrapper .group:last-child { margin-bottom: 0; }
.field-wrapper .group .group-title { font-weight: 600; line-height: 1em; margin-bottom: 10px; cursor: pointer; transition: all .15s ease; }
.field-wrapper .group .group-title:hover { color: #777; }
.field-wrapper .group li label { color: var(--label-color); cursor: pointer; }
/*.field-wrapper .group .choices li { margin-bottom: 5px; }*/
.field-wrapper .group .choices li:last-child { margin-bottom: 0 }


/*
 * List
 */
.listing { width: 100% }
.list { display: flex; flex-direction: column; width: 100%; border-top: 1px solid rgba(0, 80, 178, 0.09); }
.list .rows { display: flex; flex-direction: column; }
.list .row { display: flex; position: relative; border-bottom: 1px solid rgba(0, 80, 178, 0.09); flex-wrap: wrap; }
.list .row:not(.head):hover, .list .row:not(.head):hover:nth-child(2n + 1) { background: rgba(0, 80, 178, .045) !important; }
.list:not(.form-list) .rows > .row.more { transition: background .4s ease }
.list:not(.form-list) .rows > .row.more,
.list .row.active { background: rgba(0, 80, 178, .1) !important; }
.list:not(.form-list) .rows > .row.more:nth-child(2n + 1),
.list .row.active:nth-child(2n + 1) { background: rgba(0, 80, 178, 0.14) !important; }
.list .row:nth-child(2n + 1) { background-color: var(--light-grey); }
.list .column { width: 100%;padding: 10px; }
.list.form-list .head .column:not(.checkbox) { padding: 10px 20px; display: flex; line-height: 1.2em; }
.list .column.link { cursor: pointer; }
.list .column.more { color: var(--link-color); overflow: visible !important; }
.list .column.cancel,
.list .column.more,
.list .column.edit-link,
.list .column.archive-link { max-width: 40px; padding: 5px 10px; text-align: center; justify-content: center; }
.list .column.cancel label i,
.list .column.more label i { font-size: 21px; }
.list .column.cancel label { cursor: pointer; }
.list .column.form-list { max-width: 125px; }
.list .column.form-list i,
.list .column.edit-link i,
.list .column.archive-link i { font-size: 18px; }
.list .column.form-list a { margin-right: 10px }
.list .column.form-list a:last-of-type { margin-right: 0 }
.list .column.number { max-width: 150px; }
.list .row .column.form-list-toggle { width: 100%; flex: none; }
.list .row.head { border-bottom: 1px solid rgba(0, 80, 178, 0.15); }
.list .row.head.fields { border-bottom: none; }
.list .row.head:not(.search) { font-weight: 600; }
.list .row.head:not(.search) .column.status { font-size: 0; }
.list .row.head.search .column {
    padding: 7px 10px;
}
.list .row.head .column input,
.list .row.head .column select { width: 100%; height: 30px; padding: 0 7px; line-height: 30px; border: 1px solid #a9a9a9; border-radius: 2px; background-color: white; }
.list .row.head .column select { background-image: url('data:image/svg+xml;base64,ICAgIDxzdmcgYXJpYS1oaWRkZW49InRydWUiIGRhdGEtcHJlZml4PSJmYWwiIGRhdGEtaWNvbj0iYW5nbGUtZG93biIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWFuZ2xlLWRvd24gZmEtdy04IiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI1NiA1MTIiPjxwYXRoIGZpbGw9IiNhOWE5YTkiIGQ9Ik0xMTkuNSAzMjYuOUwzLjUgMjA5LjFjLTQuNy00LjctNC43LTEyLjMgMC0xN2w3LjEtNy4xYzQuNy00LjcgMTIuMy00LjcgMTcgMEwxMjggMjg3LjNsMTAwLjQtMTAyLjJjNC43LTQuNyAxMi4zLTQuNyAxNyAwbDcuMSA3LjFjNC43IDQuNyA0LjcgMTIuMyAwIDE3TDEzNi41IDMyN2MtNC43IDQuNi0xMi4zIDQuNi0xNy0uMXoiPjwvcGF0aD48L3N2Zz4K'); background-size: 10px auto; background-position: center right 10px; background-repeat: no-repeat; }
.list .row .checkbox, .list .row .status { max-width: 40px; text-align: center; }
.list .row .column.date { max-width: 200px; }
.list .row .column.lbs { max-width: 125px }
.list .row .column.price { max-width: 150px }
.list.form-list .row .column.price { max-width: none; }
.list .row .column.quantity, .list .row .column.small { max-width: 100px }
.list .row .column.percentage { max-width: 150px; }
.list .row.head.search .column.status { overflow: visible; padding-left: 0; padding-right: 0; }
.list .row .checkbox, .list .row:not(.head) .column.status { display: flex; cursor: pointer; justify-content: center; align-items: center; }
.list .row .column { display: flex; align-items: center; flex: 1; position: relative; /*overflow: hidden;*/ }
.list .row .column.column-icon { flex-grow: 0.1; }
.list .row:not(.head) .column { color: var(--label-color); }

/* Generic column sizing based on flex-grow */
.list .row .column.flex-small { flex-grow: 0.5; }
.list .row .column.flex-large { flex-grow: 2; }

/* Content alignment for columns */
.list .row .column.text-center { justify-content: center; }
.list .row .column.text-left { justify-content: flex-start; }
.list .row .column.text-right { justify-content: flex-end; }

.list .column.status { padding: 5px 10px; }
.list .column.status i { font-size: 20px; }
.list .head.search .column.status i {
    font-size: 17px;
}
/*.list .fa-exclamation-circle::before {color:#f85757;}*/
.list .column.status.active i { color: var(--green); }
.list .column.status.inactive i { color: rgba(51, 51, 51, 0.55); }

.list .column.signed { max-width: 56px;  }
.list .row:not(.head) .column.signed { justify-content: center; }

/* Inline actions dimmage */
.list .row .column .inline-action { opacity: .25; }
.list .row .column:hover .inline-action { opacity: 1; }

/* Lists with sticky headers */
.list.sticky-header { position: relative; }
.list.sticky-header .row.head:first-child { position: -webkit-sticky; position: sticky; top: 0; border-bottom: 1px solid rgba(0, 80, 178, 0.15); z-index: 100; }
.list.sticky-header .row.head:first-child + .row.head { position: static; z-index: 1; }

.list:not(.form-list) .rows > .row { background-color: var(--list-row-even-color); }
.list:not(.form-list) .rows > .row:nth-child(2n + 1) { background-color: var(--list-row-odd-color); }
.list .row.head.search { border-bottom: 1px solid rgba(0, 80, 178, 0.15); }
.list .row.head.search .column { padding: 10px; padding-top: 2px; }
.list[ei-widget-search] .row.head.search,
.list .row.head { background: var(--list-head-color); border-bottom: 1px solid rgba(0, 80, 178, 0.15); }
.list[ei-widget-search] .row.head { border-bottom: none }

.field-wrapper .empty, .list .empty { display: flex; position: relative; border-bottom: 1px solid rgba(0, 80, 178, 0.09); padding: 10px 20px; font-style: italic; }

.list input[type=checkbox] { display: block; width: 0; height: 0; transform: scale(0); position: absolute;  }
.list input[type=checkbox] + .check { display: block; width: 14px; height: 14px; border: 1px solid #333; border-radius: 3px; margin: 3px auto; }
.list input[type=checkbox]:checked + .check { background: var(--main-color); border: 1px solid var(--main-color); }
.list input[type=checkbox]:checked + .check::before { content: ''; display: block; background: var(--main-color); height: 100%; width: 2px; position: absolute; top: 0; left:0; }
.list input[type=checkbox]:focus + .check { outline: auto 5px -webkit-focus-ring-color; }

.list .head input[type=checkbox]:checked + .check::before { display: none; }
/* temporary */ .search .column.status input { display: none; }

.add-row { padding: 10px; }
.add-row > * { cursor: pointer }
.add-row > *:not(:first-child) { margin-left: 25px; }
.add-row .actions-button { display: inline-block }
.add-row label,
a.add-another-collection-widget,
.add-row a { font-style: italic; color: var(--link-color); cursor: pointer; }
/*.add-row:hover { background: rgba(0, 80, 178, .045); cursor: pointer; }*/
a.add-another-collection-widget i,
.add-row i { margin-left: 2px; margin-right: 5px; font-size: .9em; }

/*
 * Pagination
 */
.pagination { margin-top: 30px; }
.pagination .page { display: inline-block; font-size: 1.1em; margin-right: 3px; min-width: 32px; height: 35px; line-height: 33px; text-align: center; border: 1px solid #d4e0ef; }
.pagination .page.current { font-weight: bold; background: var(--main-color); border: 1px solid var(--main-color); color: #fff; }
.pagination .page a { display: block; width: 100%; height: 100%; padding: 0 5px; }
.pagination .page a:hover { background: rgba(0, 80, 178, .045); }
.pagination .page.current a { color: #fff; }
.pagination .page-input-wrapper { display: inline-block; height: 35px; vertical-align: bottom; }
.pagination .page-input-wrapper input { display: block; width: 120px; height: 100%; padding: 8px; font-size: 12px; border: 1px solid #d4e0ef; outline: none; transition: border-color .15s ease; }
.pagination .page-input-wrapper input:focus { border-color: #999; }

/*
 *  Breadcrumb
*/
.header h2 {float:left;}
.header h2.changed:after {content:"*";color:#222;}
.breadcrumb {line-height:45px;float:right}
.breadcrumb li {display:inline-block;}
.breadcrumb li::after {content: " / "; padding:0 5px;}
.breadcrumb li:last-child::after {display:none;}

/*
 * Legend
 */
.legend-container label {
    color: var(--main-color);
    font-weight: 600;
    float: left;
    margin-right: 10px;
}
p.legend-title { margin: 0 15px 5px 0; font-weight: bold; color: var(--main-color); float: left; }
ul.legend { color: var(--main-color); }
ul.legend li { display: inline-block; margin-bottom: 10px; margin-right: 10px; }
ul.legend li:last-of-type { margin-right: 0; }
ul.legend li i { margin-right: 5px; }

/*
 * Ajax loading screen
 */
.loading-screen { position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; font-size: 40px; text-align: center; color: white; background-color: rgba(0,0,0,.35); z-index: 100; }
.loading-screen > div { width: 100%; text-shadow: 0 0 5px rgba(0,0,0,.15); }
.loading-screen progress { display: block; width: 100px; height: 10px; margin-top: 15px; position: relative; -webkit-appearance: none; appearance: none; }
.loading-screen progress::-webkit-progress-bar { background-color: rgba(255, 255, 255, 0.3); border-radius: 6px; overflow: hidden; }
.loading-screen progress::-webkit-progress-value { background-color: #0074bf; transition: all .2s ease-in-out; }
.loading-screen progress[value]::after { content: attr(value) "%"; position: absolute; top: 100%; left: 0; right: 0; margin-top: 10px; font-size: 12px; line-height: 1em; text-shadow: 0 0 3px rgba(0,0,0,.25); }
.loading-screen progress[custom-label]::after { content: attr(custom-label); }

/* Autocomplete inputs */
input[id^='autocomplete_'][visual-validation] { padding-right: 35px; background-size: 20px; background-position: center right 6px; background-repeat: no-repeat; }
input[type='hidden'][value]:not([value='']) + input[id^='autocomplete_'][visual-validation] { background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJjaGVjay1jaXJjbGUiIGNsYXNzPSJzdmctaW5saW5lLS1mYSBmYS1jaGVjay1jaXJjbGUgZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjMDBhZTU2IiBkPSJNNTA0IDI1NmMwIDEzNi45NjctMTExLjAzMyAyNDgtMjQ4IDI0OFM4IDM5Mi45NjcgOCAyNTYgMTE5LjAzMyA4IDI1NiA4czI0OCAxMTEuMDMzIDI0OCAyNDh6TTIyNy4zMTQgMzg3LjMxNGwxODQtMTg0YzYuMjQ4LTYuMjQ4IDYuMjQ4LTE2LjM3OSAwLTIyLjYyN2wtMjIuNjI3LTIyLjYyN2MtNi4yNDgtNi4yNDktMTYuMzc5LTYuMjQ5LTIyLjYyOCAwTDIxNiAzMDguMTE4bC03MC4wNTktNzAuMDU5Yy02LjI0OC02LjI0OC0xNi4zNzktNi4yNDgtMjIuNjI4IDBsLTIyLjYyNyAyMi42MjdjLTYuMjQ4IDYuMjQ4LTYuMjQ4IDE2LjM3OSAwIDIyLjYyN2wxMDQgMTA0YzYuMjQ5IDYuMjQ5IDE2LjM3OSA2LjI0OSAyMi42MjguMDAxeiI+PC9wYXRoPjwvc3ZnPg==); }

/* Tooltips (on-hover) */
[tooltip] { position: relative; }
[tooltip]::before { content: attr(tooltip); position: absolute; top: 100%; left: -1000px; right: -1000px; width: 125px; padding: 2px 5px; margin: auto; margin-top: 1px; font-size: 12px; font-weight: 500; text-align: center; color: white; background-color: #222; border-radius: 2px; opacity: 0; transition: all .15s ease; pointer-events: none; z-index: 1000; }
[tooltip]:hover::before { opacity: 1; transition: all .25s ease .1s; }