/**
 * AJR DieSpec Plugin - Global Styles
**/
:root {
    /* fonts */
    --font_family_17: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
    --font_family_25: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    /* colours */
    --colour_text_darkest: #111;
    --colour_text_dark: #333;
    --colour_text: #555;
    --colour_text_light: #777;
    --colour_text_lightest: #999;
    --colour_green: #009200;
    --colour_orange: #ff9c00;
    --colour_gold: #f9da54;
    --colour_red: #ff0000;
    --colour_grey_darkest: #333;
    --colour_grey_darker: #666;
    --colour_grey_dark: #999;
    --colour_grey: #bbb;
    --colour_grey_light: #c6c6c6;
    --colour_grey_lighter: #d1d1d1;
    --colour_grey_lighter2: #dcdcdc;
    --colour_grey_lighter3: #e7e7e7;
    --colour_grey_lighter4: #f0f0f0;
    --colour_grey_lighter5: #f2f2f2;
    --colour_grey_lighter6: #f5f5f5;
    --colour_grey_lighter7: #f8f8f8;
    --colour_grey_lighter8: #fbfbfb;
    --colour_grey_lightest: #fefefe;
    --colour_accent: #2271b1;
    --colour_success: #32cd32; /* limegreen */
    --colour_error: var(--colour_orange); /* orange */
    --colour_warning: #e00000;
    --colour_highlight_success: #c6fdb4; /* light green */
    --colour_highlight_warning: #ffe4e4; /* light red */
    --colour_highlight_error: #fff2e4;   /* light orange */
    --colour_nav_divider: #dcdcdc;
    /* inputs */
    --colour_input_border: var(--colour_grey_lighter2);
    --colour_input_border_empty: var(--colour_grey_lighter3);
    --colour_input_border_hover: var(--colour_grey_light);
    --colour_input_border_focus: var(--colour_accent);
    --colour_input_bgd: var(--colour_grey_lighter8);
    --colour_input_bgd_empty: var(--colour_grey_lighter7);
    --colour_input_bgd_hover: var(--colour_grey_lightest);
    --colour_input_bgd_focus: #fff;
    /* background */
    --colour_bgd_admin: #f0f0f1;
    --colour_bgd_admin_header: #dcdcdc;
    --colour_bgd_success: #eef8ee; /* #e7ffe7 */
    --colour_bgd_warning: #fef7e9; /* #fee */
    --colour_bgd_button_inset_active: var(--colour_grey_lighter3);
    --colour_bgd_button_active: var(--colour_grey_lightest);
    --colour_bgd_button_inset_disabled: var(--colour_grey_lighter);
    --colour_bgd_button_disabled: var(--colour_grey_lighter);
    /* border */
    --border_container: 1px solid var(--colour_grey_lighter7);
    --border_container_inset: 1px solid var(--colour_grey_lighter2);
    --border_popup_menu: var(--border_container);
    --border_radius_container: 8px;
    --border_radius_inputs: 4px;
    --border_radius_buttons: 4px;
    /* box shadows */
    --box_shadow: 0 3px 10px -5px rgba(0,0,0,.4);
    --box_shadow_success: 0 0px 15px 0px rgba(0,255,0,.25);
    --box_shadow_warning: 0 0px 15px 0px rgba(255,0,0,.75);
    --box_shadow_dark: var(--colour_grey_lighter2);
    --box_shadow_light: var(--colour_grey_lightest);
    --box_shadow_top: inset 0 1px 0 0 var(--box_shadow_light), 0 -1px 0 0 var(--box_shadow_dark);
    --box_shadow_top_admin_menu: inset 0 1px 0 0 rgba(255,255,255,.06), 0 -1px 0 0 rgba(0,0,0,.4);
    --box_shadow_bottom: 0 1px 0 0 var(--box_shadow_light), inset 0 -1px 0 0 var(--box_shadow_dark);
    --box_shadow_left: inset 1px 0 0 0 var(--box_shadow_light), -1px 0 0 0 var(--box_shadow_dark);
    /*--box_shadow_right: 0 1px 0 0 rgba(255,255,255,.15), inset 0 -1px 0 0 rgba(0,0,0,.5);*/
    --box_shadow_button: 1px 1px 0 var(--colour_grey_lightest), -1px -1px 2px -1px var(--colour_grey_lighter2), inset 1px 1px 0 var(--colour_grey_lightest), inset -1px -1px 2px -1px var(--colour_grey_lighter2);
    --box_shadow_button_active: 1px 1px 0 var(--colour_grey_lightest), -1px -1px 1px -1px var(--colour_grey);
    --box_shadow_container_groove: inset 1px 1px 0px var(--colour_grey_lighter2), inset 2px 2px 1px #fff, inset -1px -1px 0px #fff, inset -2px -2px 1px var(--colour_grey_lighter2);
    --box_shadow_container_groove_rl: inset 1px 0 0px var(--colour_grey_lighter2), inset 2px 0 1px #fff, inset -1px 0 0px #fff, inset -2px 0 1px var(--colour_grey_lighter2);
    --box_shadow_container_groove_rbl: inset 1px 0 0px var(--colour_grey_lighter2), inset 2px 0 1px #fff, inset -1px -1px 0px #fff, inset -2px -2px 1px var(--colour_grey_lighter2);
    --box_shadow_container_outset: inset 1px 1px 1px #fff, inset -1px -1px 1px var(--colour_grey_lighter2);
    --box_shadow_container_inset: inset 2px 2px 2px var(--colour_grey_lighter2), inset -2px -2px 2px #fff;
    --box_shadow_popup_menu: var(--box_shadow);
    /* transitions */
    --transition: ease 0.3s;
    --transition_active: ease 0.3s;
    --transition_cb: cubic-bezier(.5,0,.5,1.5) 0.3s;
    --transition_cb_active: cubic-bezier(.5,0,.5,2.0) 0.3s;
    --transition_highlight: ease-out 1.5s;
    --transition_highlight_active: ease-in 0.15s;
}

/* DEFAULT HTML */
html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

*, *::before, *::after {
    box-sizing: inherit; }

body, button, input, select, textarea {
    font-family: var(--font_family_17); }

/* forms and inputs */
::-webkit-input-placeholder {
    font-size: 0.8em;
    font-weight: lighter;
    letter-spacing: 0.05em;
    color: var(--colour_grey); }

/* link */
a span {}
    a:hover span,
    a:active span {
        color: var(--colour_accent); }
    a:active span {
        opacity: 0.5; }

/* dashicons */
.dashicons {
    --this_size: 20px;
    width: var(--this_size);
    height: var(--this_size);
    font-size: var(--this_size); }

/* loading */
.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: -webkit-flex; display: flex;
    -webkit-flex-direction: column; flex-direction: column;
    -webkit-justify-content: center; justify-content: center;
    -webkit-align-items: center; align-items: center;
    width: fit-content;
    margin: 1em 0;
    padding-top: 1.5em; }
    .loading i {
        width: 1em;
        height: 1em;
        line-height: 1em;
        font-size: 1rem;
        color: var(--colour_accent); }
        .loading i::before {
            content: '\f463';
            font-family: dashicons; }
    .loading span {
        font-size: 0.9em;
        color: var(--colour_grey_dark); }
    .loading i + span {
        margin-top: 0.5em; }

/* colours */
.colour_success { color: var(--colour_success); }
.colour_warning { color: var(--colour_warning); }
   
/* shoadows */
.box_shadow_top { box-shadow: var(--box_shadow_top); }
.box_shadow_bot { box-shadow: var(--box_shadow_bottom); }

/** -------------------------------------------------------
 ** ANIMATION
 ** ---------------------------------------------------- */
.ajr_blink        { -webkit-animation: ajr_flash_1 0.6s linear 2 both; animation: ajr_flash_1 0.6s linear 2 both; }
.ajr_blink_2      { -webkit-animation: ajr_flash_2 1.1s linear 3 both; animation: ajr_flash_2 1.1s linear 3 both; }
.ajr_blink_3      { -webkit-animation: ajr_flash_3 1.6s linear 4 both; animation: ajr_flash_3 1.6s linear 4 both; }
@-webkit-keyframes ajr_flash_1 { 0%,60% { opacity: .35; } 30%         { opacity: 1; } 61%,100% { opacity: 0; } }
@keyframes ajr_flash_1         { 0%,60% { opacity: .35; } 30%         { opacity: 1; } 61%,100% { opacity: 0; } }
@-webkit-keyframes ajr_flash_2 { 0%,54% { opacity: .35; } 18%,36%     { opacity: 1; } 55%,100% { opacity: 0; } }
@keyframes ajr_flash_2         { 0%,54% { opacity: .35; } 18%,36%     { opacity: 1; } 55%,100% { opacity: 0; } }
@-webkit-keyframes ajr_flash_3 { 0%,48% { opacity: .35; } 16%,32%,48% { opacity: 1; } 49%,100% { opacity: 0; } }
@keyframes ajr_flash_3         { 0%,48% { opacity: .35; } 16%,32%,48% { opacity: 1; } 49%,100% { opacity: 0; } }

.ajr_flash_xfast  { -webkit-animation: ajr_flash 0.1s linear infinite; animation: ajr_flash 0.1s linear infinite; }
.ajr_flash_vfast  { -webkit-animation: ajr_flash 0.3s linear infinite; animation: ajr_flash 0.3s linear infinite; }
.ajr_flash_fast   { -webkit-animation: ajr_flash 0.5s linear infinite; animation: ajr_flash 0.5s linear infinite; }
.ajr_flash		  { -webkit-animation: ajr_flash 1.0s linear infinite; animation: ajr_flash 1.0s linear infinite; }
.ajr_flash_slow   { -webkit-animation: ajr_flash 1.5s linear infinite; animation: ajr_flash 1.5s linear infinite; }
.ajr_flash_vslow  { -webkit-animation: ajr_flash 1.7s linear infinite; animation: ajr_flash 1.7s linear infinite; }
.ajr_flash_xslow  { -webkit-animation: ajr_flash 1.9s linear infinite; animation: ajr_flash 1.9s linear infinite; }
@-webkit-keyframes ajr_flash { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes ajr_flash		 { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }

.ajr_spin_fast    { -webkit-animation: ajr_spin 0.5s linear infinite; animation: ajr_spin 0.5s linear infinite; }
.ajr_spin         { -webkit-animation: ajr_spin 1.0s linear infinite; animation: ajr_spin 1.0s linear infinite; }
.ajr_spin::before { -webkit-animation: ajr_spin 1.0s linear infinite; animation: ajr_spin 1.0s linear infinite; }
.ajr_spin_slow    { -webkit-animation: ajr_spin 1.5s linear infinite; animation: ajr_spin 1.5s linear infinite; }
@-webkit-keyframes ajr_spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
@keyframes ajr_spin         { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }