/* USED FOR STYLES THAT NEED TO LOAD ESSENTIALLY EVERYWHERE - INCLUDING OFF-SITE EMBEDDED FEATURES AS BUILD AND PRICE */

:root {
    /* --- Globals  --- */
    --std-border-radius: 6px;

    /* --- Fonts --- */ 
    --std-font-family: 'Montserrat', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
    --std-header-font-family: 'Source Sans 3', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;

    /* --- Standard Widths --- */
    --std-width-xxs: 50px;
    --std-width-xs: 80px;
    --std-width-s: 100px;
    --std-width-m: 200px;
    --std-width-l: 300px;
    --std-width-xl: 400px;
    --std-width-xxl: 500px;
    --std-width-fill: 100%;

    /* --- Standard Colors --- */
    --std-text-color: #000;

    --std-color: #ef6323; /* #eb6829 */
    --std-hover: #fb8e47;
    --std-color-light: #fcf0eb;
    --std-hover-light: #f9e3d9;
    --std-color-dark: #bd5522;
    --std-hover-dark: #b34a1c;

    --std-color-glass: rgba(239,99,35,.5);
    --std-hover-glass: rgba(239,99,35,.7);
    --std-border-glass: rgba(239,99,35,.1);
    --std-color-light-glass: rgba(255,255,255,.5);
    --std-hover-light-glass: rgba(255,255,255,.7);
    --std-border-light-glass: rgba(255,255,255,.1);
    --std-color-dark-glass: rgba(0,0,0,.5);
    --std-hover-dark-glass: rgba(0,0,0,.7);
    --std-border-dark-glass: rgba(0,0,0,.1);

    --std-color-white: #fff;
    --std-hover-white: #eee;
    --std-border-white: #d9d9d9;
    --std-color-black: #000;
    --std-hover-black: #111;
    --std-border-black: #222;
    --std-color-gray: #ededed;
    --std-hover-gray: #f6f6f6;
    --std-border-gray: #d2d2d2;
    --std-color-light-gray: #f6f6f6;
    --std-hover-light-gray: #e6e6e6;
    --std-color-dark-gray: #666;
    --std-hover-dark-gray: #777;
    --std-color-lighter-gray: #fafafa;
    --std-hover-lighter-gray: #eaeaea;

    --std-color-green: #59b200;
    --std-hover-green: #65ce00;
    --std-border-green: #48a100;
    --std-color-light-green: #e2efd6;
    --std-hover-light-green: #c5dfa1;
    --std-color-dark-green: #1d660f;
    --std-hover-dark-green: #144d0b;
    --std-color-blue: #1b365d;
    --std-hover-blue: #25487c;
    --std-border-blue: #000;
    --std-color-light-blue: #d7eef9;
    --std-hover-light-blue: #b4d4e6;
    --std-color-dark-blue: #0d4866;
    --std-hover-dark-blue: #0a3a52;
    --std-color-red: #e1251b;
    --std-hover-red: #ff3e35;
    --std-border-red: #b00208;
    --std-color-light-red: #faebe9;
    --std-hover-light-red: #edc8c4;
    --std-color-dark-red: #66130f;
    --std-hover-dark-red: #4d0e0b;
    --std-color-yellow: #ffc72c;
    --std-hover-yellow: #ffd863;
    --std-border-yellow: #f5b000;
    --std-color-light-yellow: #fff8e8;
    --std-hover-light-yellow: #ffe6a8;
    --std-color-dark-yellow: #6e5513;
    --std-hover-dark-yellow: #57430e;
}


/* ========================================= */
/* UNIVERSAL TAGS & CLASSES                  */
/* ========================================= */

img { max-width: 100%; }

.hidden,
.invisible { display: none; }
.clear { clear: both; }
.fleft { float: left; }
.fright { float: right; }
.aleft { text-align: left; } /* used rarely */
.aright { text-align: right; }
.acenter { text-align: center; } /* used rarely */
.nowrap { white-space: nowrap; } /* used rarely */


/* ========================================= */
/* STANDARD WIDTH STYLES                     */
/* ========================================= */
.std-width-xxs:not([type=checkbox]):not([type=radio]) { width: var(--std-width-xxs); }
.std-width-xs:not([type=checkbox]):not([type=radio]) { width: var(--std-width-xs); }
.std-width-s:not([type=checkbox]):not([type=radio]) { width: var(--std-width-s); }
.std-width-m:not([type=checkbox]):not([type=radio]) { width: var(--std-width-m); }
.std-width-l:not([type=checkbox]):not([type=radio]) { width: var(--std-width-l); }
.std-width-xl:not([type=checkbox]):not([type=radio]) { width: var(--std-width-xl); }
.std-width-xxl:not([type=checkbox]):not([type=radio]) { width: var(--std-width-xxl); }
.std-width-fill:not([type=checkbox]):not([type=radio]) { width: var(--std-width-fill); }


/* ========================================= */
/* STANDARD ICON STYLES                      */
/* ========================================= */

/* Note: icons will not work outside the app unless you include the fonts */

[data-icon]::before { content: attr(data-icon); font-size: 1.8em; font-family: "Material Symbols Outlined"; font-weight: 300; }
[data-icon]:not(.btn-icon)::before { margin-right: 5px; vertical-align: middle; display: inline-block; }

:not(.btn-icon)[data-icon="local_image"] { padding-top: 5px; padding-bottom: 5px; }
[data-icon="local_image"]::before { content: ''; text-indent: -9999px; background-image: var(--icon-url); background-size: 80%; background-repeat: no-repeat; background-position: center; width: 1em; height: 1em; display: inline-block; }

[data-icon][data-icon-font="DHIcons"]::before { font-family: 'DHIcons'; }


/* ========================================= */
/* STANDARD BUTTON STYLES                    */
/* ========================================= */

/* buttons -- by default they inherit the size of their container (known issue- when using data-icon="local_image" the sizing will be off unless you use .btn-normal or .btn-small */
.btn { display: inline-block; vertical-align: middle; font-size: inherit; font-family: inherit; box-sizing: border-box; padding: 10px 20px; line-height: 1.1em; min-height: calc(1.1em + 20px + 2px); border-radius: var(--std-border-radius); background-color: rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0); position: relative; }
.btn-normal { font-size: 14px; min-height: 38px; font-weight: normal; }
.btn-small { font-size: 10px; padding: 5px 10px; min-height: 24px; font-weight: normal; }
.btn:is(:hover, :focus, :active):is(a, button, label, input) { cursor: pointer; }
.btn:focus { outline: none; }
.btn.hidden { display: none; }
a.btn { text-decoration: none; }
select.btn { padding: 8px 20px; }

.btn-icon[data-icon]::before { line-height: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-indent: 0; }

.btn[data-icon="local_image"]::before { text-indent: -9999px; }
.btn.btn-icon[data-icon="local_image"]::before { background-size: 90%; }
.btn-small:not(.btn-icon)[data-icon="local_image"] { padding-top: 2px; padding-bottom: 2px; }

.btn-icon { text-indent: -9999px; text-align: left; overflow: hidden; display: inline-block; padding: 0; width: calc(1.1em + 20px + 2px); vertical-align: middle; }
.btn:not(.btn-icon)[data-icon] { padding: 10px 20px 9px 5px; }
.btn-small:not(.btn-icon)[data-icon] { padding: 5px 10px 5px 2px; }
.btn-small.btn-icon { width: calc(1.1em + 10px + 2px); height: calc(1.1em + 10px + 2px); }

.btn:not(.btn-icon)[data-icon="local_image"] { padding-top: 0px; padding-bottom: 0px; }
.btn-normal:not(.btn-icon)[data-icon="local_image"] { padding-top: 5px; padding-bottom: 5px; }
.btn-small:not(.btn-icon)[data-icon="local_image"] { padding-top: 2px; padding-bottom: 2px; }

.btn-icon:not(.btn-normal)[data-icon="local_image"]::before { background-size: 80%; }
.btn[data-badge-count] { position: relative; overflow: visible; }
.btn[data-badge-count]::after { content: attr(data-badge-count); text-indent: 0; position: absolute; top: -5px; right: -5px; display: flex; justify-content: center; align-items: center; width: 16px; height: 16px; border-radius: 50%; background-color: var(--std-color); color: white; font-size: 10px; font-weight: bold; }
.btn[data-badge-count-hover]:hover::after { content: attr(data-badge-count-hover); }

/* button colors */
.btn-standard { color: var(--std-text-color); background-color: var(--std-color-gray); border: 1px solid var(--std-color-gray) }
.btn-standard:is(:hover,:focus,:active):is(a,button,label,input) { color: var(--std-color); background-color: var(--std-color-light); border-color: var(--std-color-light) }
.btn-reversed { color: var(--std-color-white); background-color: var(--std-color); border: 1px solid var(--std-color-dark) }
.btn-reversed:is(:hover,:focus,:active):is(a,button,label,input) { color: var(--std-color-white); background-color: var(--std-hover) }

.btn-transparent { background-color: #0000; border-color: #0000 }
.btn-transparent:is(:hover,:focus,:active):is(a,button,label,input) { background-color: #0000; border-color: #0000 }
.btn-glass { color: #000; background-color: var(--std-color-glass); border-color: var(--std-border-glass) }
.btn-glass:is(:hover,:focus,:active):is(a,button,label,input) { color: #000; background-color: var(--std-hover-glass) }

.btn-white { color: var(--std-text-color); background-color: var(--std-color-white); border: 1px solid var(--std-border-white); }
.btn-white:is(:hover,:focus,:active):is(a,button,label,input) { border-color: var(--std-color); color: var(--std-color); }
.btn-gray { color: var(--std-text-color); background-color: var(--std-color-gray); border: 1px solid var(--std-border-gray); }
.btn-gray:is(:hover,:focus,:active):is(a,button,label,input) { background-color: var(--std-hover-gray); color: var(--std-text-color); }
.btn-green { color: var(--std-color-white); background-color: var(--std-color-green); border: 1px solid var(--std-border-green); }
.btn-green:is(:hover,:focus,:active):is(a,button,label,input) { background-color: var(--std-hover-green); color: var(--std-color-white); }
.btn-blue { color: var(--std-color-white); background-color: var(--std-color-blue); border: 1px solid var(--std-border-blue) }
.btn-blue:is(:hover,:focus,:active):is(a,button,label,input) { background-color: var(--std-hover-blue); color: var(--std-color-white); }
.btn-red { color: var(--std-color-white); background-color: var(--std-color-red); border: 1px solid var(--std-border-red); }
.btn-red:is(:hover,:focus,:active):is(a,button,label,input) { background-color: var(--std-hover-red); color: var(--std-color-white); }
.btn-yellow { color: var(--std-hover-dark-yellow); background-color: var(--std-color-yellow); border: 1px solid var(--std-border-yellow); }
.btn-yellow:is(:hover,:focus,:active):is(a,button,label,input) { background-color: var(--std-hover-yellow); color: var(--std-hover-dark-yellow); }

.btn-simple-white { color: var(--std-text-color); background-color: var(--std-color-white); border: 1px solid var(--std-hover-white); }
.btn-simple-white:is(:hover,:focus,:active):is(a,button,label,input) { color: var(--std-text-color); background-color: var(--std-hover-white); border-color: var(--std-hover-white); }

.btn-light-standard { color: #555; background-color: var(--std-color-light-gray); border: 1px solid var(--std-color-light-gray); }
.btn-light-standard:is(:hover,:focus,:active):is(a,button,label,input) { color: var(--std-color); background-color: var(--std-color-light); border-color: var(--std-color-light); }
.btn-light-reversed { color: var(--std-color-dark); background-color: var(--std-color-light); border-color: var(--std-color-light); }
.btn-light-reversed:is(:hover,:focus,:active):is(a,button,label,input) { color: var(--std-hover-dark); background-color: var(--std-hover-light); border-color: var(--std-hover-light); }
.btn-light-glass { color: #000; background-color: var(--std-color-light-glass); border-color: var(--std-border-light-glass); }
.btn-light-glass:is(:hover,:focus,:active):is(a,button,label,input) { color: #000; background-color: var(--std-hover-light-glass); }
.btn-dark-glass { color: #fff; background-color: var(--std-color-dark-glass); border-color: var(--std-border-dark-glass); }
.btn-dark-glass:is(:hover,:focus,:active):is(a,button,label,input) { color: #fff; background-color: var(--std-hover-dark-glass); }
.btn-light-gray { color: #555; background-color: var(--std-color-light-gray); border: 1px solid var(--std-color-light-gray); }
.btn-light-gray:is(:hover,:focus,:active):is(a,button,label,input) { color: #000; background-color: var(--std-hover-light-gray); border-color: var(--std-hover-light-gray); }
.btn-light-green { color: var(--std-color-dark-green); background-color: var(--std-color-light-green); border: 1px solid var(--std-color-light-green); }
.btn-light-green:is(:hover,:focus,:active):is(a,button,label,input) { color: var(--std-hover-dark-green); background-color: var(--std-hover-light-green); border-color: var(--std-hover-light-green); }
.btn-light-blue { color: var(--std-color-dark-blue); background-color: var(--std-color-light-blue); border: 1px solid var(--std-color-light-blue); }
.btn-light-blue:is(:hover,:focus,:active):is(a,button,label,input) { color: var(--std-hover-dark-blue); background-color: var(--std-hover-light-blue); border-color: var(--std-hover-light-blue); }
.btn-light-red { color: var(--std-color-dark-red); background-color: var(--std-color-light-red); border: 1px solid var(--std-color-light-red); }
.btn-light-red:is(:hover,:focus,:active):is(a,button,label,input) { color: var(--std-hover-dark-red); background-color: var(--std-hover-light-red); border-color: var(--std-hover-light-red); }
.btn-light-yellow { color: var(--std-hover-dark-yellow); background-color: var(--std-color-light-yellow); border: 1px solid var(--std-color-light-yellow); }
.btn-light-yellow:is(:hover,:focus,:active):is(a,button,label,input) { color: var(--std-hover-dark-yellow); background-color: var(--std-hover-light-yellow); border-color: var(--std-hover-light-yellow); }

/* button weights */
.btn-strong { font-weight: bold; }
.btn-strong[data-icon]::before,
.btn-strong:not(.btn-icon)[data-icon]::before,
.btn-icon.btn-strong::before { font-weight: normal; }

.btn-center { text-align: center; }


.btn.fright + .btn.fright { margin-right: 1em; }


/* ========================================= */
/* STANDARD FORM STYLES                       */
/* ========================================= */

.fld { display: inline-block; vertical-align: middle; font-size: inherit; font-family: inherit; box-sizing: border-box; padding: 10px 8px; line-height: 1.1em; border-radius: var(--std-border-radius); background-color: rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, .3); position: relative; }

.fld-small,
.fld-normal { font-weight: normal; }
.fld-small:not(label),
input[type=color].fld-small { height: 24px; }
.fld-small:not(label) { padding: 5px 10px; }
.fld-normal:not(label),
input[type=color].fld-normal { height: 38px; }

.fld-strong { font-weight: bold; }

.fld[disabled=disabled]:not([type=checkbox]):not([type=radio]),
.fld[readonly=readonly]:not([type=checkbox]):not([type=radio]) { background-color: #f3f3f3; cursor: default; user-select: none; }

.fld:not(select):focus { outline: none; }
.fld:focus:not(select):not([type=radio]):not([disabled=disabled]):not([readonly=readonly]) { box-shadow: 0 0 0 2px #000; }

input.fld,
textarea.fld,
select.fld { border: 1px solid var(--std-border-gray); border-radius: var(--std-border-radius); background-color: #fff; }
input[type=submit].fld { padding: 10px 20px; }

select.fld:open { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }

/* specific field types */
input[type=color].fld { padding: 0; }
input[type=color].fld:not(.fld-small, .fld-normal) { height: calc(1.1em + 22px); }

input[type=number].fld { text-align: right; padding-right: 2px; }
input[type=number].fld.aleft { text-align: left; }
input[type=date].fld,
input[type=datetime-local].fld,
input[type=time].fld { padding: 8px 8px; }
input[type=file].fld,
select.fld { padding: 7px 8px; }

input[type=number].fld-small { line-height: 24px; }
/* this is hacky, but it makes the up/down arrows display better on Chrome with the downside that the text is a little higher than similar fields */
input[type=date].fld-small,
input[type=datetime-local].fld-small,
input[type=time].fld-small,
input[type=file].fld-small,
select.fld-small { padding: 3px 10px; }
input[type=submit].fld-small { padding: 5px 10px; }
input[type=radio].fld-small,
input[type=radio].fld-normal,
input[type=checkbox].fld-small,
input[type=checkbox].fld-normal { height: auto; }

/* labels */
.fld-lbl { display: inline-block; vertical-align: middle; padding: 12px 0px 10px; line-height: 1.1em; }
/* I add 1px extra to top to better align with input text */
.fld-lbl.fld-normal { min-height: calc(38px - 12px - 10px); }
.fld-lbl.fld-small { padding: 7px 0px 5px; min-height: calc(24px - 7px - 5px); }

/* specific to form-widgets */
.form-widget { margin: 8px 0; clear: both; }
.form-widget .fld-lbl { padding-right: 1em; }

/* tall fields, where it doesn't make sense to center the label vertically */
.form-widget-textareatinymce .fld-lbl,
.form-widget-textarea .fld-lbl,
.form-widget-checkboxes .fld-lbl,
.form-widget-radios .fld-lbl,
.form-widget-selectmultiple .fld-lbl { vertical-align: top; }

/* widgets and items that need extra margin (mostly tall fields or replaced items) */
.form-widget-selectmultiple select,
.form-widget textarea,
.form-widget .tinywrapper,
.form-widget .file-drop-wrapper,
.form-widget .file-moxie-wrapper,
.form .advanced-list-wrapper,
.fld-lbl + .advanced-list-wrapper,
.fld-lbl + .file-drop-wrapper,
.form-widget-radio-wrapper { display: inline-block; vertical-align: middle; margin: 8px 0; }

.form-widget:has([required=required]) .fld-lbl:after { content: " *"; color: #900; }
.fld.fld-money,
.form-widget-inputmoney input.fld { background-image: url(/pd/img/currency-dollar.svg); background-repeat: no-repeat; background-position: 5px center; background-size: 7px; padding-left: 16px; }
.fld-small.fld-money,
.form-widget-inputmoney input.fld-small { background-size: 5px; }

input.fld.fld-percent,
.form-widget-inputpercentdecimal input.fld,
.form-widget-inputpercent input.fld { background-image: url(/pd/img/percent.svg); background-repeat: no-repeat; background-position: right 3px center; background-size: 12px; padding-right: 18px; }
input.fld-small.fld-percent,
.form-widget-inputpercentdecimal input.fld-small,
.form-widget-inputpercent input.fld-small { background-size: 10px; padding-right: 16px; }

/* this fixes an issue where % symbol conflicts with the up/down arrows on the number field by removing those arrows. This was mostly a problem in Firefox.*/
input.fld.fld-percent,
.form-widget-inputpercentdecimal input.fld,
.form-widget-inputpercent input.fld { -moz-appearance: textfield; }
input.fld.fld-percent::-webkit-inner-spin-button,
input.fld.fld-percent::-webkit-outer-spin-button,
.form-widget-inputpercentdecimal input.fld::-webkit-inner-spin-button,
.form-widget-inputpercentdecimal input.fld::-webkit-outer-spin-button,
.form-widget-inputpercent input.fld::-webkit-inner-spin-button,
.form-widget-inputpercent input.fld::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }


.chosen-error-message.for-std-width-xxs,
.dbform-buttons.for-std-width-xxs { padding-left: calc(var(--std-width-xxs) + 16px); }
.chosen-error-message.for-std-width-xs,
.dbform-buttons.for-std-width-xs { padding-left: calc(var(--std-width-xs) + 16px); }
.chosen-error-message.for-std-width-s,
.dbform-buttons.for-std-width-s { padding-left: calc(var(--std-width-s) + 16px); }
.chosen-error-message.for-std-width-m,
.dbform-buttons.for-std-width-m { padding-left: calc(var(--std-width-m) + 16px); }
.chosen-error-message.for-std-width-l,
.dbform-buttons.for-std-width-l { padding-left: calc(var(--std-width-l) + 16px); }
.chosen-error-message.for-std-width-xl,
.dbform-buttons.for-std-width-xl { padding-left: calc(var(--std-width-xl) + 16px); }
.chosen-error-message.for-std-width-xxl,
.dbform-buttons.for-std-width-xxl { padding-left: calc(var(--std-width-xxl) + 16px); }

.form-widget-selectmultiple select,
.form-widget textarea { height: 8em; }

.form-widget-radio-wrapper input + label { margin: .3em .5em; display: inline-block; }

/* switch / toggle styles */
.switch-checkbox { height: 0; width: 0; opacity: 0; }
.switch-label { display: inline-block; font-weight: normal; background-color: var(--std-color-gray); border-radius: 6px; border: 2px solid var(--std-color-gray); position: relative; cursor: pointer; transition: all 0.2s ease-in; user-select: none; min-width: 68px; height: calc(1.1em + 18px); line-height: calc(1.1em + 20px); vertical-align: middle; }
.switch-label::before { content: ''; position: absolute; top: 0px; left: 0px; width: 34px; height: calc(1.1em + 18px); background-color: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: left 0.2s ease-in; }
.switch-label::after { content: attr(data-off); display: block; padding-left: 52px; padding-right: 18px; color: #000; font-size: inherit; transition: all 0.2s ease-in; }

.switch-checkbox:checked + .switch-label-checkbox,
.switch-checkbox:checked + .switch-label-radio,
.switch-checkbox:checked + .switch-label { background-color: var(--std-color); border-color: var(--std-color); }
.switch-checkbox:checked + .switch-label::before { left: calc(100% - 34px); }
.switch-checkbox:checked + .switch-label::after { content: attr(data-on); padding-left: 18px; padding-right: 52px; color: #fff; }
.switch-checkbox:focus:not([disabled=disabled]):not([readonly=readonly]) + .switch-label-checkbox,
.switch-checkbox:focus:not([disabled=disabled]):not([readonly=readonly]) + .switch-label-radio,
.switch-checkbox:focus:not([disabled=disabled]):not([readonly=readonly]) + .switch-label { border-color: #000; }

/* color support - theoretically, we could support more colors, but we can cross that bridge when necessary */
.switch-checkbox.switch-gray:checked + .switch-label-checkbox,
.switch-checkbox.switch-gray:checked + .switch-label-radio,
.switch-checkbox.switch-gray:checked + .switch-label { background-color: var(--std-color-gray); border-color: var(--std-color-gray); }
.switch-checkbox.switch-gray:checked + .switch-label::after { color: #000; }

.switch-checkbox.switch-red:checked + .switch-label-checkbox,
.switch-checkbox.switch-red:checked + .switch-label-radio,
.switch-checkbox.switch-red:checked + .switch-label { background-color: var(--std-color-red); border-color: var(--std-color-red); }

.fld-normal + .switch-label-checkbox,
.fld-normal + .switch-label-radio,
.fld-normal + .switch-label { height: 34px; line-height: 34px; }
.fld-small + .switch-label { height: 20px; line-height: 20px; min-width: 40px; }
.fld-small + .switch-label { min-width: 40px; }
.fld-small + .switch-label-checkbox,
.fld-small + .switch-label-radio,
.fld-small + .switch-label { height: 20px; }
.fld-normal + .switch-label::before { height: 34px; }
.fld-small + .switch-label::before { height: 20px; width: 20px; }
.fld-normal + .switch-label::after { font-size: 14px; padding-left: 42px; padding-right: 10px; }
.fld-small + .switch-label::after { font-size: 10px; padding-left: 28px; padding-right: 10px; }
.fld-normal.switch-checkbox:checked + .switch-label::after { padding-left: 10px; padding-right: 42px; }
.fld-small.switch-checkbox:checked + .switch-label::after { padding-left: 10px; padding-right: 28px; }
.fld-small.switch-checkbox:checked + .switch-label::before { left: calc(100% - 20px); }

.fld-strong + .switch-label { font-weight: bold; }

.switch-label-checkbox,
.switch-label-radio { display: inline-block; background-color: var(--std-color-gray); border-radius: 6px; border: 2px solid var(--std-color-gray); position: relative; cursor: pointer; transition: all 0.2s ease-in; user-select: none; aspect-ratio: 1 / 1; height: calc(1.1em + 18px); line-height: calc(1.1em + 20px); vertical-align: middle; }
.switch-label-checkbox::after { content: '\2714'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: inherit; color: white; opacity: 0; transition: opacity 0.2s ease-in; }
.switch-checkbox:checked + .switch-label-checkbox::after { opacity: 1; }
.fld-normal + .switch-label-checkbox::after { font-size: 25px; }
.fld-small + .switch-label-checkbox::after { font-size: 18px; }

.switch-label-radio { border-radius: 50%; }
.switch-label-radio::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 50%; border: 2px solid #fff; background-color: #fff; transition: background-color 0.2s ease-in; }
.switch-checkbox:checked + .switch-label-radio { border-color: var(--std-color-gray); }
.switch-checkbox:checked + .switch-label-radio::after { background-color: var(--std-color); }

/* chosen adjustments */
.fld-normal,
.fld.fld-normal + .chosen-container { font-size: 14px; }
.fld-small,
.fld.fld-small + .chosen-container { font-size: 10px; }

.fld + .chosen-container { display: inline-block; vertical-align: middle; font-size: inherit; font-family: inherit; box-sizing: border-box; line-height: 1.1em; border-radius: var(--std-border-radius); background-color: rgba(0, 0, 0, 0); position: relative; }

.fld + .chosen-container-multi .chosen-choices li.search-choice,
.fld + .chosen-container .chosen-results li { line-height: 1.1em; }

.fld + .chosen-container .chosen-single,
.fld + .chosen-container .chosen-choices,
.fld + .chosen-container.chosen-container-active .chosen-single,
.fld + .chosen-container.chosen-container-active .chosen-choices { border: 1px solid rgba(0, 0, 0, .3); border-radius: var(--std-border-radius); line-height: 1.1; background: #fff; box-shadow: none; }

/* chosen single select */
.fld + .chosen-container-single { padding: 0px !important; line-height: 1.1em; }
.fld + .chosen-container-single .chosen-drop { box-shadow: none; }
.fld + .chosen-container-single .chosen-single,
.fld + .chosen-container-single.chosen-container-active .chosen-single { height: calc(1.1em + 20px + 2px); padding: 10px 8px; }
.fld-normal + .chosen-container-single .chosen-single,
.fld-normal + .chosen-container-single.chosen-container-active .chosen-single { height: 38px; }
.fld-small + .chosen-container-single .chosen-single,
.fld-small + .chosen-container-single.chosen-container-active .chosen-single { padding: 5px 10px; height: 24px; }

.fld + .chosen-container-single .chosen-single div b { background-position: 2px 100%; }
.fld + .chosen-container-active.chosen-with-drop .chosen-single div b { background-position: -16px 100%; }
.fld-normal + .chosen-container-single .chosen-single div b { background-position: 2px 7px; }
.fld-normal + .chosen-container-active.chosen-with-drop .chosen-single div b { background-position: -16px 7px; }
.fld-small + .chosen-container-single .chosen-single div b { background-position: 2px 1px; }
.fld-small + .chosen-container-active.chosen-with-drop .chosen-single div b { background-position: -16px 1px; }

/* chosen multiselect */
.fld + .chosen-container-multi .chosen-choices,
.fld + .chosen-container-multi.chosen-container-active .chosen-choices { min-height: calc(1.1em + 20px + 2px); }
.fld-normal + .chosen-container-multi .chosen-choices,
.fld-normal + .chosen-container-multi.chosen-container-active .chosen-choices { min-height: 38px; }
.fld-small + .chosen-container-multi .chosen-choices,
.fld-small + .chosen-container-multi.chosen-container-active .chosen-choices { /*padding: 5px 10px; */ height: auto; min-height: 25px; }

.fld + .chosen-container-multi .chosen-choices .chosen-search-input,
.fld + .chosen-container-multi.chosen-container-active .chosen-choices .chosen-search-input { min-height: calc(1.1em + 20px); font-family: inherit !important; }
.fld-normal + .chosen-container-multi .chosen-choices .chosen-search-input,
.fld-normal + .chosen-container-multi.chosen-container-active .chosen-choices .chosen-search-input { min-height: 34px; }
.fld-small + .chosen-container-multi .chosen-choices .chosen-search-input,
.fld-small + .chosen-container-multi.chosen-container-active .chosen-choices .chosen-search-input { min-height: 20px !important; height: auto !important; }
.fld-small + .chosen-container-multi .chosen-choices .search-choice,
.fld-small + .chosen-container-multi.chosen-container-active .chosen-choices .search-choice { padding: 1px 20px 1px 3px; margin: 2px; }
.fld-small + .chosen-container-multi .chosen-choices li.search-choice .search-choice-close { top: 1px; }

/* final chosen overrides */
.fld + .chosen-container-active.chosen-with-drop .chosen-single,
.fld + .chosen-container-active.chosen-with-drop .chosen-choices { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.chosen-error-message { color: #900; font-size: 11px; font-weight: bold; text-transform: uppercase; }
label.chosen-validation-error { color: #600; background-color: #ffd3d3; }

/* advanced list --this widget is deprecated and isn't being used
.advanced-list-wrapper .tinywrapper { float: none; }
.advanced-list-wrapper .form-widget > label { display: block; box-sizing: border-box; padding: 2px 5px; font-weight: bold; font-size: 10px; text-transform: uppercase; background-color: #9e9e9e; }
.advanced-list-wrapper input { }
.advanced-list-wrapper input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.advanced-list-wrapper textarea,
.advanced-list-wrapper select { width: 100%; padding: 4px 8px; border: 1px solid #9e9e9e; }
.advanced-list-item { margin-bottom: 1em; border: 1px solid #e3e3e3; padding: 1em; width: 100%; }
.advanced-list-item .form-widget { margin-bottom: 1em; }
 */

/* dropzone uploads */
.file-drop-wrapper div { width: 185px; height: 110px; max-width: 45%; display: inline-block; vertical-align: top; }
.file-drop-wrapper div.upload-box { background: url(../img/upload-file-button.png) no-repeat; background-size: 100%; position: relative; }
.file-drop-wrapper div.upload-box.uploading::after { content: " "; position: absolute; left: 0; top: 0; background-image: url(../img/spinners/bars-scale-middle.svg); background-size: contain; width: 100%; height: 90%; background-repeat: no-repeat; background-position: center center; opacity: .1; }
.file-drop-wrapper div.preview-box { background: transparent url(../img/blank.gif) no-repeat center; background-size: contain; }
.file-drop-wrapper div.preview-box p { margin: 0; color: #fff; font-weight: bold; font-size: 12px; }
.file-drop-wrapper p span.error { margin: 0; color: #fff; font-weight: bold; font-size: 12px; padding: 2px; background-color: #900; display: inline-block; }
.file-drop-wrapper small { float: left; width: 370px; color: #666; font-size: 10px; text-transform: uppercase; margin-top: .2em; }
.file-moxie-wrapper div.preview-box { width: 185px; height: 110px; background: transparent url(../img/blank.gif) no-repeat center; background-size: contain; }


/* ========================================= */
/* FORM MESSAGES STYLES                     */
/* ========================================= */

.form-message { border-radius: var(--std-border-radius); color: var(--std-color-black); font-size: .8em; border: 1px solid var(--std-color-dark-gray); padding: 10px 20px; background-color: var(--std-color-light-gray); margin-bottom: 2em; }
.form-message.error { color: var(--std-color-dark-red); background-color: var(--std-color-light-red); border: 1px solid var(--std-color-dark-red); }
.form-message.success { color: var(--std-color-dark-green); background-color: var(--std-color-light-green); border: 1px solid var(--std-color-dark-green); }
.form-message.warning { color: var(--std-color-dark-blue); background-color: var(--std-color-light-blue); border: 1px solid var(--std-color-dark-blue); }
.form-message.notice { color: var(--std-hover-dark-yellow); background-color: var(--std-color-light-yellow); border-color: var(--std-color-dark-yellow); }


/* ========================================= */
/* TOOLTIP STYLES                            */
/* ========================================= */

.dhtooltip-content[role="tooltip"] { display: none; }
.dhtooltip { position: absolute; transform: translateX(-50%); background-color: #333; color: #fff; padding: 5px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; z-index: 999; transform: translateX(-50%); transition: opacity 0.2s ease-in-out; opacity: 0.9; }
.dhtooltip::after { content: ''; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #333; }


.dhwidget-left { float: left; }
.dhwidget-right { float: right; }


.dhwidget.form-dhwidget .form-one { float: left; margin: 0 1%; position: relative; width: 98%; }
.dhwidget.form-dhwidget .form-two { float: left; margin: 0 1%; position: relative; width: 48%; }
.dhwidget.form-dhwidget .form-three { float: left; margin: 0 1%; position: relative; width: 31.33%; }
.dhwidget.form-dhwidget input[type="text"], .dhwidget.form-dhwidget input[type="password"], .dhwidget.map-dhwidget input[type="text"] { box-sizing: border-box; height: 32px; line-height: 32px; }
.dhwidget.form-dhwidget input[type="text"], .dhwidget.form-dhwidget input[type="password"], .dhwidget.map-dhwidget input[type="text"] { border: 1px solid #c6cacc; box-sizing: border-box; margin-bottom: 4px; margin-top: 4px; padding: 4px; width: 100%; }
.dhwidget.form-dhwidget .placeholder { color #999; }
.dhwidget.form-dhwidget .form-required { color: #f77; font-weight: bold; position: absolute; right: 4px; top: 4px; }
.dhwidget.form-dhwidget .select-container select, .dhwidget.map-dhwidget .select-container select { background-color: transparent; border: 0 solid #777; box-sizing: content-box; cursor: pointer; height: 32px; margin: 0; outline: 0 none; padding: 0 24px 0 0; position: relative; z-index: 2; }
.dhwidget.form-dhwidget select, .dhwidget.map-dhwidget select { box-sizing: border-box; margin-top: 4px; padding: 4px; width: 100%; }
.dhwidget.form-dhwidget textarea { border: 1px solid #c6cacc; box-sizing: border-box; margin-top: 4px; padding: 4px; width: 100%; }
.dhwidget.form-dhwidget .form-required-legend { margin: 16px 0 0; text-align: right; }
.dhwidget.form-dhwidget .form-submit { text-align: center; }
.dhwidget.form-dhwidget .select-container, .dhwidget.map-dhwidget .select-container { background: #fff url("https://coressl.digitalhill.com/core2/media/images/select.png") no-repeat scroll right center; border: 1px solid #c6cacc; box-sizing: border-box; display: inline-block; height: 32px; margin-top: 4px; overflow: hidden; padding: 0; position: relative; width: 100%; }
.mario { display: none; }
.dhwidget.form-dhwidget .error { background-color: #fcc; }

.form-widget-inputhidden,
.form-widget-require { display: none; }

label[for] { cursor: pointer; }
/* this makes active labels change the cursor */

.dev-log { clear: both; background-color: #fff; color: #000; padding: 1em 1rem; margin: 0; }

table.standard-table { border-collapse: collapse; }
table.standard-table th,
table.standard-table td { padding: .25em .5em; border: 1px solid #666; }
table.standard-table th { text-align: left; }

table.align-top th,
table.align-top td { vertical-align: top; }

ul.errorlog-errors,
ul.errorlog-errors li { margin: 0; padding: 0; list-style-type: none; }
ul.errorlog-errors { display: block; position: relative; border: 1px solid #900; background-color: #fff3f3; padding: .25em; margin-bottom: .25em; color: #900; }
ul.errorlog-errors:before { content: "ERRORS: "; font-weight: bold; }

.toggle-following { cursor: pointer; }
.toggle-following:before { content: "+"; display: inline-block; font-weight: bold; padding-right: .25em; }
.toggle-following.expanded:before { content: "-"; }
.toggle-following + * { display: none; }
.toggle-following.expanded + * { display: block; }

.dev-site-notice { position: fixed; z-index: 9999999; top: 0; right: 0; padding: .25em; background-color: #ffb600; color: #000; font-size: 11px; font-weight: bold; text-align: center; text-transform: uppercase; letter-spacing: 1px; font-family: Arial; }
.customize-support .dev-site-notice { top: 32px; }

img.icon-help { width: 14px; opacity: .8; }
img.icon-help:is(:hover, :focus, :active) { opacity: 1; }

@media screen {
    .print-only,
    .screen-hide { display: none !important; }
}

@media print {
    .screen-only,
    .print-hide { display: none !important; }
}

/* ========================================= */
/* FILE LIST STYLES                          */
/* ========================================= */

.file-page,
.file-solid,
.file-outline { padding-left: 20px; background: transparent url(../img/filetypes/page/txt.svg) no-repeat top left/16px; }
.file-solid { background-image: url(../img/filetypes/solid/txt.svg); }
.file-outline { background-image: url(../img/filetypes/outline/txt.svg); }

li.file-page,
li.file-solid,
li.file-outline { list-style-type: none; margin-left: -20px; }


.file-solid.folder { background-image: url(../img/filetypes/solid/folder.svg); }
.file-solid.file-doc,
.file-solid.file-docx { background-image: url(../img/filetypes/solid/doc.svg); }
.file-solid.file-ppt,
.file-solid.file-pptx { background-image: url(../img/filetypes/solid/ppt.svg); }
.file-solid.file-xls,
.file-solid.file-xlsx { background-image: url(../img/filetypes/solid/xls.svg); }
.file-solid.file-pdf { background-image: url(../img/filetypes/solid/pdf.svg); }
.file-solid.file-jpg,
.file-solid.file-jpeg,
.file-solid.file-gif,
.file-solid.file-svg,
.file-solid.file-png,
.file-solid.file-tif { background-image: url(../img/filetypes/solid/img.svg); }
.file-solid.file-mov,
.file-solid.file-mpg,
.file-solid.file-mp4,
.file-solid.file-avi,
.file-solid.file-wmv { background-image: url(../img/filetypes/solid/video.svg); }

.file-page.folder { background-image: url(../img/filetypes/page/folder.svg); }
.file-page.file-doc,
.file-page.file-docx { background-image: url(../img/filetypes/page/doc.svg); }
.file-page.file-ppt,
.file-page.file-pptx { background-image: url(../img/filetypes/page/ppt.svg); }
.file-page.file-xls,
.file-page.file-xlsx { background-image: url(../img/filetypes/page/xls.svg); }
.file-page.file-pdf { background-image: url(../img/filetypes/page/pdf.svg); }
.file-page.file-jpg,
.file-page.file-jpeg,
.file-page.file-gif,
.file-page.file-svg,
.file-page.file-png,
.file-page.file-tif { background-image: url(../img/filetypes/page/img.svg); }
.file-page.file-mov,
.file-page.file-mpg,
.file-page.file-mp4,
.file-page.file-avi,
.file-page.file-wmv { background-image: url(../img/filetypes/page/video.svg); }

.file-outline.folder { background-image: url(../img/filetypes/outline/folder.svg); }
.file-outline.file-doc,
.file-outline.file-docx { background-image: url(../img/filetypes/outline/doc.svg); }
.file-outline.file-ppt,
.file-outline.file-pptx { background-image: url(../img/filetypes/outline/ppt.svg); }
.file-outline.file-xls,
.file-outline.file-xlsx { background-image: url(../img/filetypes/outline/xls.svg); }
.file-outline.file-pdf { background-image: url(../img/filetypes/outline/pdf.svg); }
.file-outline.file-jpg,
.file-outline.file-jpeg,
.file-outline.file-gif,
.file-outline.file-svg,
.file-outline.file-png,
.file-outline.file-tif { background-image: url(../img/filetypes/outline/img.svg); }
.file-outline.file-mov,
.file-outline.file-mpg,
.file-outline.file-mp4,
.file-outline.file-avi,
.file-outline.file-wmv { background-image: url(../img/filetypes/outline/video.svg); }


/* ========================================= */
/* LIGHTBOX STYLES                           */
/* ========================================= */

#dhlightbox { position: fixed; z-index: 999; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; text-align: center; background-color: rgba(0,0,0,.8); }
#dhlightbox.hidden { display: none; }
#dhlightbox-content { position: relative; margin: auto; padding: 0; max-width: 1200px; }
#dhlightbox-close,
#dhlightbox-close-inner { color: white; position: absolute; top: 25px; right: 25px; font-size: 35px; font-weight: bold; }
#dhlightbox-close-inner { color: black; top: 0; right: .25em; display: none; }

#dhlightbox-close:is(:hover, :focus, :active), #dhlightbox-close:focus,
#dhlightbox-close-inner:is(:hover, :focus, :active), #dhlightbox-close-inner:focus { color: #999; text-decoration: none; cursor: pointer; }

#dhlightbox.dhpageleft #dhlightbox-content,
#dhlightbox.dhpagecenter #dhlightbox-content,
#dhlightbox.dhformlightbox #dhlightbox-content { padding: 1em 2em; max-width: 500px; background-color: #fff; max-height: 80%; overflow: auto; }
#dhlightbox.dhpageleft #dhlightbox-close,
#dhlightbox.dhpagecenter #dhlightbox-close,
#dhlightbox.dhformlightbox #dhlightbox-close { display: none; }
#dhlightbox.dhpageleft #dhlightbox-close-inner,
#dhlightbox.dhpagecenter #dhlightbox-close-inner,
#dhlightbox.dhformlightbox #dhlightbox-close-inner { display: block; }
#dhlightbox.dhpageleft #dhlightbox-content { text-align: left; }


/* ========================================= */
/* COLUMN STYLES                             */
/* ========================================= */

/*
    There are three methods of columns:
        1. the float method (.dhcolumn)
        2. the flexbox method (.dhflex)
        3. the grid method (.dhgrid)
    All three use the same width classes, since I believe that width, flex-basis and grid-column do not conflict
    The markup differs in two ways:
        1. The flexbox and grid method requires a container (.dhflex-wrap, .dhgrid-wrap)
        2. The float method requires <br> between rows
    The float method is here for backwards compatibility since most of the site was built with it, but the flexbox method should be used where possible because of these advantages:
        1. matchHeight in JS isn't necessary, because flexbox takes care of it
        2. Because there are no <br> enforcing breaks, changing column widths for responsive is more convenient
    Experiment with the differences using test-columns.php
*/

/* float method */
.dhcolumn { float: left; box-sizing: border-box; margin: 0 0 1em 0; }
.dhcolumn + br { clear: left; }
.dhcolumn + .dhcolumn { margin-left: calc(100% / 60); }

/* flexbox method */
.dhflex-wrap { display: flex; flex-flow: row wrap; justify-content: space-between; }
.dhflex { box-sizing: border-box; margin: 0 0 1em 0; overflow: hidden; }

/* grid method */
.dhgrid-wrap { display: grid; grid-gap: 1em calc(100% / 60); grid-template-columns: repeat(60, 1fr); min-width: 0; }
.dhgrid { width: auto !important; }
.dhgrid + hr { display: none; }
/* only included to allow support for IE10/11 flexbox fallback */

/* all methods */
.dhcolumn,
.dhflex,
.dhgrid { padding: 0; }

/* padding */
.pad1rem { padding: 1rem; }
.pad2rem { padding 2rem; }

.dhcolumn > :first-child,
.dhflex > :first-child,
.dhgrid > :first-child { margin-top: 0; }
.dhcolumn > :last-child,
.dhflex > :last-child,
.dhgrid > :last-child { margin-bottom: 0; }

.desktop-hide { display: none; }
.width-100 { grid-column: span 60; width: 100%; flex-basis: 100%; }
.width-90 { grid-column: span 54; width: 89.833%; flex-basis: 89.833%; }
.width-80 { grid-column: span 48; width: 79.666%; flex-basis: 79.666%; }
.width-75 { grid-column: span 45; width: 74.583%; flex-basis: 74.583%; }
.width-70 { grid-column: span 42; width: 69.5%; flex-basis: 69.5%; }
.width-67 { grid-column: span 40; width: 66.108%; flex-basis: 66.108%; }
.width-60 { grid-column: span 36; width: 59.333%; flex-basis: 59.333%; }
.width-50 { grid-column: span 30; width: 49.166%; flex-basis: 49.166%; }
.width-40 { grid-column: span 24; width: 39%; flex-basis: 39%; }
.width-33 { grid-column: span 20; width: 32.220%; flex-basis: 32.220%; }
.width-30 { grid-column: span 18; width: 28.833%; flex-basis: 28.833%; }
.width-25 { grid-column: span 15; width: 23.75%; flex-basis: 23.75%; }
.width-20 { grid-column: span 12; width: 18.666%; flex-basis: 18.666%; }
.width-17 { grid-column: span 10; width: 15.277%; flex-basis: 15.277%; }
.width-10 { grid-column: span 6; width: 8.5%; flex-basis: 8.5%; }

.dbform-wrapper .dhcolumn,
.form-widget .dhcolumn { padding: 1px 0; }

/* use additional class when it's useful to adjust at tablet sizes */
@media only screen and (max-width:800px) {
    .dhcolumn.tablet-100 { width: 100%; margin-left: 0; }
    .dhcolumn.tablet-50 { width: 49.166%; }
    .dhcolumn.tablet-50:nth-of-type(2n + 0) { margin-left: 0; }
    /* corrects for new margins due to rows of 3, 4, or 5 becoming rows of 2 */
    .dhcolumn.tablet-33 { width: 32.220%; }
    /* intended to convert 25/75 or 20/80 columns to wider small column */
    .dhcolumn.tablet-67 { width: 66.108%; }
    /* intended to convert 25/75 or 20/80 columns to wider small column */

    .tablet-hide { display: none; }
    .tablet-100 { grid-column: span 60; flex-basis: 100%; }
    .tablet-90 { grid-column: span 54; flex-basis: 89.833%; }
    .tablet-80 { grid-column: span 48; flex-basis: 79.666%; }
    .tablet-75 { grid-column: span 45; flex-basis: 74.583%; }
    .tablet-70 { grid-column: span 42; flex-basis: 69.5%; }
    .tablet-67 { grid-column: span 40; flex-basis: 66.108%; }
    .tablet-60 { grid-column: span 36; flex-basis: 59.333%; }
    .tablet-50 { grid-column: span 30; flex-basis: 49.166%; }
    .tablet-40 { grid-column: span 24; flex-basis: 39%; }
    .tablet-33 { grid-column: span 20; flex-basis: 32.220%; }
    .tablet-30 { grid-column: span 18; flex-basis: 28.833%; }
    .tablet-25 { grid-column: span 15; flex-basis: 23.75%; }
    .tablet-20 { grid-column: span 12; flex-basis: 18.666%; }
    .tablet-17 { grid-column: span 10; flex-basis: 15.277%; }
    .tablet-10 { grid-column: span 6; flex-basis: 8.5%; }
}

/* use additional class when it's useful to adjust at phone sizes */
@media only screen and (max-width:600px) {
    .dhcolumn.phone-100 { width: 100%; margin-left: 0; }
    .dhcolumn.phone-50 { width: 49.166%; }
    .dhcolumn.phone-50:nth-of-type(2n + 1) { margin-left: 0; }
    /* corrects for new margins due to rows of 3, 4, or 5 becoming rows of 2 */
    .dhcolumn.phone-33 { width: 32.220%; }
    /* intended to convert 25/75 or 20/80 columns to wider small column */
    .dhcolumn.phone-67 { width: 66.108%; }
    /* intended to convert 25/75 or 20/80 columns to wider small column */

    .phone-hide { display: none; }
    .phone-100 { grid-column: span 60; flex-basis: 100%; }
    .phone-90 { grid-column: span 54; flex-basis: 89.833%; }
    .phone-80 { grid-column: span 48; flex-basis: 79.666%; }
    .phone-75 { grid-column: span 45; flex-basis: 74.583%; }
    .phone-70 { grid-column: span 42; flex-basis: 69.5%; }
    .phone-67 { grid-column: span 40; flex-basis: 66.108%; }
    .phone-60 { grid-column: span 36; flex-basis: 59.333%; }
    .phone-50 { grid-column: span 30; flex-basis: 49.166%; }
    .phone-40 { grid-column: span 24; flex-basis: 39%; }
    .phone-33 { grid-column: span 20; flex-basis: 32.220%; }
    .phone-30 { grid-column: span 18; flex-basis: 28.833%; }
    .phone-25 { grid-column: span 15; flex-basis: 23.75%; }
    .phone-20 { grid-column: span 12; flex-basis: 18.666%; }
    .phone-17 { grid-column: span 10; flex-basis: 15.277%; }
    .phone-10 { grid-column: span 6; flex-basis: 8.5%; }

    .dev-log { overflow: hidden; }
}


/* IE10/11 fixes - due to broken box model and no CSS Grid support, we use flexbox instead - this means that the last line on IE10/11 won't sort to left nicely */
/* Without this fix, adding padding to a column would cause the box to expand and eventually break the row */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {

    .dhgrid-wrap { display: flex; flex-flow: row wrap; justify-content: space-between; }
    .dhgrid { box-sizing: border-box; margin-bottom: 1em; }

    .width-100 { max-width: 100%; }

    .width-90 { max-width: 89.833%; }
    .width-80 { max-width: 79.666%; }
    .width-70 { max-width: 69.5%; }
    .width-60 { max-width: 59.333%; }
    .width-40 { max-width: 39%; }
    .width-30 { max-width: 28.833%; }
    .width-20 { max-width: 18.666%; }
    .width-10 { max-width: 8.5%; }

    .width-67 { max-width: 66.108%; }
    .width-33 { max-width: 32.220%; }
    .width-17 { max-width: 15.277%; }

    .width-75 { max-width: 74.583%; }
    .width-50 { max-width: 49.166%; }
    .width-25 { max-width: 23.75%; }
}

@media screen and (-ms-high-contrast: active) and (max-width: 800px), screen and (-ms-high-contrast: none) and (max-width: 800px) {

    .tablet-100 { max-width: 100%; }

    .tablet-90 { max-width: 89.833%; }
    .tablet-80 { max-width: 79.666%; }
    .tablet-70 { max-width: 69.5%; }
    .tablet-60 { max-width: 59.333%; }
    .tablet-40 { max-width: 39%; }
    .tablet-30 { max-width: 28.833%; }
    .tablet-20 { max-width: 18.666%; }
    .tablet-10 { max-width: 8.5%; }

    .tablet-67 { max-width: 66.108%; }
    .tablet-33 { max-width: 32.220%; }
    .tablet-17 { max-width: 15.277%; }

    .tablet-75 { max-width: 74.583%; }
    .tablet-50 { max-width: 49.166%; }
    .tablet-25 { max-width: 23.75%; }
}

@media screen and (-ms-high-contrast: active) and (max-width: 800px), screen and (-ms-high-contrast: none) and (max-width: 600px) {

    .phone-100 { max-width: 100%; }

    .phone-90 { max-width: 89.833%; }
    .phone-80 { max-width: 79.666%; }
    .phone-70 { max-width: 69.5%; }
    .phone-60 { max-width: 59.333%; }
    .phone-40 { max-width: 39%; }
    .phone-30 { max-width: 28.833%; }
    .phone-20 { max-width: 18.666%; }
    .phone-10 { max-width: 8.5%; }

    .phone-67 { max-width: 66.108%; }
    .phone-33 { max-width: 32.220%; }
    .phone-17 { max-width: 15.277%; }

    .phone-75 { max-width: 74.583%; }
    .phone-50 { max-width: 49.166%; }
    .phone-25 { max-width: 23.75%; }
}