/* --- COLOR DEFINITION STANDARDS ---
Only use the SEMANTIC COLORS unless DESIGN mandates otherwise
Colors must be maintained in CLJS as well:
/app/lib/ui-base/src/amperity/ui/viz/colors.cljs */

:root {

    /* MARKETING BRAND COLORS */

    /* blacks and greys */
    --c-off-black:                  #0C0C0C;
    --c-anvil:                      #282B2E;
    --c-slate:                      #5A5F66;
    --c-pebble:                     #808890;
    --c-prime-gray:                 #C2CBD1;
    --c-cement:                     #E7EDEF;
    --c-cloud:                      #F2F5F7;

    /* teals */
    --c-midnight:                   #002C33;
    --c-dusk:                       #0A454F;
    --c-lagoon:                     #09717F;
    --c-ocean:                      #459AA8;
    --c-prime-teal:                 #80C7D1;
    --c-ice:                        #CAEFEF;

    /* yellows */
    --c-gold:                       #ABB222;
    --c-moss:                       #CEDB1F;
    --c-butternut:                  #D9ED21;
    --c-amp-yellow:                 #E9FF5F;
    --c-limoncello:                 #EDFF95;
    --c-meringue:                   #F6FFDC;

    /* reds */
    --c-deep-red:                   #AF3708;
    --c-crimson:                    #F75B2B;
    --c-prime-red:                  #FF9988;
    --c-hm-red:                     #F4D0CB;
    --c-red-tint:                   #F7EDED;

    /* greens */
    --c-deep-green:                 #317A1C;
    --c-apple:                      #84D174;
    --c-prime-green:                #A4E298;
    --c-hm-green:                   #CAEFC5;
    --c-green-tint:                 #E9F6EA;

    /* misc */
    --c-lavender:                   #B5B5E0;
    --c-flamingo:                   #F5CFE4;
    --c-new-orange:                 #F4B670;

    /* ----------------------------------------------------------------------- */

    /* Base Colors */

    --c-navy:                       #2D3F56;
    --c-navy-dark:                  #03192D;
    --c-navy-light:                 #4c6682;
    --c-navy-disabled:              #586A83;

    --c-teal:                       #09717F;
    --c-teal-dark:                  #055B67;
    --c-teal-extra-dark:            #002C33;
    --c-teal-light:                 #4DB29C;
    --c-teal-extra-light:           #DCFFEA;
    --c-teal-bright:                #62FFA1;

    --c-turquoise:                  #00C78F;

    --c-light-blue:                 #EFF4F9;
    --c-yellow:                     #FFD637;
    --c-light-yellow:               #FFF7D8;
    --c-orange:                     #EAA221;
    --c-red:                        #8B2C2A;
    --c-red-alt:                    #F75B2B;
    --c-red-dark:                   #670000;
    --c-red-light:                  #d44630;
    --c-red-bright:                 #ff553b;
    --c-red-disabled:               #d5a4a2;

    /* Semi-temporary code/diff highlighting for puget in saving changes work */

    --c-blue:                       #008000;
    --c-green:                      #008000;
    --c-magenta:                    #FF00FF;

    /* Shades of grey currently used in the app ... this is a bit of a clusterfuck */

    --c-grey-1:                     #333437;
    --c-grey-2:                     #5C5E61;
    --c-grey-3:                     #898B8E;
    --c-grey-4:                     #999999;
    --c-grey-5:                     #EEEEEE;
    --c-grey-6:                     #DDDDDD;
    --c-grey-7:                     #BEBFC0;
    --c-grey-8:                     #C2C3C5;
    --c-grey-9:                     #8F9093;
    --c-grey-10:                    #F5F6F7;
    --c-grey-11:                    #A9AAAC;
    --c-grey-12:                    #BBBBBB;
    --c-grey-13:                    #777777;

    --c-white:                      #FFFFFF;
    --c-white-1:                    #F5F6F7;
    --c-white-2:                    #F2F2F2;
    --c-white-3:                    #F9F9F9;
    --c-white-4:                    #F8F8F8;
    --c-white-5:                    #FCFCFC;
    --c-white-6:                    #F0F0F0;

    /* Semantic Colors */

    --c-primary:                        var(--c-off-black);
    --c-primary-dark:                   var(--c-off-black);
    --c-primary-light:                  var(--c-slate);

    --c-secondary:                      var(--c-lagoon);
    --c-secondary-dark:                 var(--c-dusk);
    --c-secondary-light:                var(--c-teal-light);
    --c-secondary-disabled:             var(--c-grey-8);
    --c-secondary-on-dark:              var(--c-teal-light);
    --c-secondary-dark-on-dark:         var(--c-lagoon);
    --c-secondary-light-on-dark:        var(--c-teal-light);
    --c-secondary-disabled-on-dark:     var(--c-grey-9);

    --c-text-dark:                      var(--c-grey-1);

    --c-text:                           var(--c-grey-1);
    --c-text-medium:                    var(--c-grey-2);
    --c-text-light:                     var(--c-grey-3);
    --c-text-disabled:                  var(--c-grey-7);
    --c-text-on-dark:                   var(--c-white-2);
    --c-text-dark-on-dark:              var(--c-grey-7);
    --c-text-light-on-dark:             var(--c-grey-4);
    --c-text-disabled-on-dark:          var(--c-grey-8);
    --c-text-red:                       var(--c-deep-red);
    --c-text-green:                     var(--c-deep-green);
    --c-text-placeholder:               var(--c-grey-3);
    --c-text-placeholder-disabled:      var(--c-grey-7);

    --c-warning:                        var(--c-orange);

    --c-error:                          var(--c-deep-red);
    --c-error-dark:                     var(--c-red);
    --c-error-light:                    var(--c-crimson);
    --c-error-disabled:                 var(--c-red-disabled);

    --c-input-background:               var(--c-white-5);
    --c-input-border:                   var(--c-grey-12);
    --c-input-border-hover:             var(--c-grey-13);
    --c-input-border-disabled:          var(--c-white-6);

    --c-background:                     var(--c-grey-10);
    --c-border:                         var(--c-grey-6);

    --c-header-background:              var(--c-off-black);
    --c-header-link:                    var(--c-white);
    --c-header-link-hover:              var(--c-grey-7);
    --c-header-link-active:             var(--c-amp-yellow);

    --c-dialog-background:              var(--c-grey-5);
    --c-dialog-border:                  var(--c-grey-6);

    --c-grid-background:                var(--c-white-2);
    --c-grid-border:                    var(--c-grey-6);

    --c-hover-background:               var(--c-white-1);
    --c-hover-border:                   var(--c-grey-5);

    --c-icon-grey:                      var(--c-grey-11);

    --c-banner-background:              var(--c-navy-light);
    --c-banner-pill-background-1:       var(--c-turquoise);
    --c-banner-pill-background-2:       var(--c-yellow);

    --c-editor-background:              var(--c-white);
}

/* debug responsive breakpoints */

/* mobile (essentially no breakpoint) */
@media (min-width: 0px) {
    _body {
        background-color: pink !important;
    }
}

/* ipad portrait - SM */
@media (min-width: 640px) {
    _body {
        background-color: lightblue !important;
    }
}

/* ipad landscape */
@media (min-width: 1024px) {
    _body {
        background-color: yellow !important;
    }
}

/* bigger than macbook 13' - LG */
@media (min-width: 1190px) {
    _body {
        background-color: lightgreen !important;
    }
}

@font-face {
    font-family: 'FFMarkWebProRegular';
    src: url('/fonts/3AE709_0_0.eot');
    src: url('/fonts/3AE709_0_0.eot?#iefix') format('embedded-opentype'),
         url('/fonts/3AE709_0_0.woff2') format('woff2'),
         url('/fonts/3AE709_0_0.woff') format('woff'),
         url('/fonts/3AE709_0_0.ttf') format('truetype');}


/* minimalistic scrollbars */

::-webkit-scrollbar {
    background: rgba(0,0,0,0.04);
    height: 10px;
    width: 10px;
}

::-webkit-scrollbar:hover {
    background: rgba(0,0,0,0.08);
}

::-webkit-scrollbar-track {
    display: none;
}

::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.22);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.32);
}

::-webkit-scrollbar-thumb:active {
    background: rgba(0,0,0,0.4);
}

::-webkit-scrollbar-button {
    display: none;
}

html {
  font-size: 12px;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: var(--c-text);
  overflow: hidden;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: var(--c-secondary);
  outline: none;
}

a:hover {
  color: var(--c-secondary-dark);
}

a:active {
    transition: none;
    color: var(--c-secondary-light);
    transition: all 0s !important;
}

/* to deprecate */
a.blueonhover, a.blueonactive, a.blueonparenthover {
 color: var(--c-text);
 z-index: 1;
}

.blueonhover:hover, :hover > .blueonparenthover {
  text-decoration: none;
  cursor: pointer;
  color: var(--c-secondary);
  transition: all 0.1s !important;
}

.blueonhover:hover.stopfuckingaroundcssitotallymeanit {
  text-decoration: none !important;
  cursor: pointer !important;
}

a.blueonhover.disabled:hover, .blueonparenthover.disabled:hover {
  cursor: not-allowed;
  color:  var(--c-text-dark);
}

.blueborderonhover:hover {
  cursor: pointer;
}

.marigoldborderonhover:hover {
  cursor: pointer;
}

.redonclick {
    z-index: 1;
    transition: all 0.1s !important;
}

/* not sure about this one */
.redonactive.redonactive {
    z-index: 1;
    transition: all 0.1s;
}

.redonclick.redonclick.redonclick:active, :active > .redonparentclick {
    color: #e2d736;
    transition: all 0s !important;
}

/* not sure about this one either */
.redonactive.redonactive:active {
    transition: none;
    color: #EBC015;
    transition: all 0s !important;
}

.redborderonclick:active {
    border-color: #e2d736 !important;
    transition: all 0s !important;
}

a.disabled {
  text-decoration: none;
  pointer-events: none;
  cursor: not-allowed;
  color: var(--c-text-disabled);
}

.warning-marigold {
  color: var(--c-warning);
}

h1 {
    font-family: 'Roboto', sans-serif;
    color: var(--c-text-dark);
    font-size: 26px;
    font-weight: 300;
    /* text-align: left; */
    margin-top: 0;
    margin-bottom: 0;
}

h2 {
    font-family: 'Roboto', sans-serif;
    color: var(--c-text-dark);
    font-size: 20px;
    font-weight: 300;
    line-height: 34px;
    margin-top: 0;
    margin-bottom: 0;
}

h3 {
    font-family: 'Roboto', sans-serif;
    color: var(--c-text-dark);
    font-size: 12px;
    font-weight: 400;
    /* text-align: left; */
    margin-top: 0px;
    margin-bottom: 0px;
}

/*
h4 {
    TODO
}
*/

h5 {
    font-family: 'Roboto', sans-serif;
    color: var(--c-text-dark);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: normal;
    margin-top: 0px;
    margin-bottom: 0px;
}

p {
    font-family: 'Roboto', sans-serif;
    color:  var(--c-text);
    font-size: 12px;
    font-weight: 400;
}

.inline-flex,
div.inline-flex {
  display: inline-flex;
}

.text-v-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

input, select, textarea {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    border: solid 1px var(--c-input-border);
    background: var(--c-input-background);
    color: var(--c-text);
}

input:hover, input:focus {
    border: solid 1px var(--c-input-border-hover);
}

textarea:focus {
    outline: none;
}

input[disabled], input:disabled, input.disabled, select[disabled], select:disabled, textarea.disabled,
select[disabled] > option, select:disabled > option, .disabled .CodeMirror,
.disabled.switch .switch-actuator, .disabled.switch .switch-slider, textarea[disabled] {
    outline-color: #efefef;
    border-color: #efefef;
    color: grey;
    cursor: not-allowed;
}

input[type=checkbox]:disabled,
input[type=checkbox].disabled {
  cursor: not-allowed;
}

/* Placeholder styling - updated 07/14/2023 by GR */

.placeholder {
    color: var(--c-text-placeholder)
}

input::placeholder, textarea::placeholder, select::placeholder {
    color: var(--c-text-placeholder);
}

input:disabled::placeholder, textarea:disabled::placeholder, select:disabled::placeholder {
    color: var(--c-text-placeholder-disabled);
}

label.disabled {
    color: #B3B3B3;
    cursor: not-allowed;
}

div.disabled {
    /* color: #B3B3B3; */
    opacity: 0.7    ;
    cursor: not-allowed;
}

.actuator.disabled {
    color: #B3B3B3;
}

table.compact-table {
    _background-color: red;
    border-spacing: 0px;
    border-collapse: separate;
}

table.compact-table td {
    _background-color: yellow;
    padding: 2px;
}

table.compact-table td:first-child {
    _background-color: blue;
    padding-left: 0px;
}

table.compact-table td:last-child {
    _background-color: purple;
    padding-right: 0px;
}


/* misc portable formatting classes */

.default-font {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: normal;
}

.monospaced-font {
  font-family: 'CourierNewPSMT', monospace;
  font-size: 12px;
  font-weight: normal;
}

.b {
    font-weight: bold;
}

.mb {
    font-weight: 400;
}

.normal-weight {
    font-weight: normal;
}

.l {
    font-weight: 200;
}

.i {
    font-style: italic;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cutoff {
    overflow: hidden;
}

.border {
    border-width: 1px;
    border-style: solid;
    border-color: var(--c-text);
}

.default-color {
    color: var(--c-text);
}

.default-bg {
    background-color: #eef2f5;
}

.white-color {
    color: white;
}

.white-bg {
    background-color: white;
}

.white-border {
    border-color: white;
}

/* NOTE: .black to be deprecated */
.black, black-color {
    color: #33373A;
}

.black-bg {
    background-color: #33373A;
}

.black-border {
    border-color: #33373A;
}

/* NOTE: .grey to be deprecated */
.grey, .grey-color {
    color: #A9ADB6;
}

/* NOTE: .bg-grey to be deprecated */
.bg-grey, .grey-bg {
    background-color: #A9ADB6;
}

.grey-border {
    border-width: 1px;
    border-style: solid;
    background-color: #A9ADB6;
}

/* NOTE: .lightgrey to be deprecated */
.lightgrey, .lightgrey-color {
    color: #aeafb0;
}

/* NOTE: .bg-lightgrey to be deprecated */
.bg-lightgrey, .lightgrey-bg {
    background-color: #aeafb0;
}

.table-header-bg {
    background-color: var(--c-grid-background);
}

.table-header-bg-onhover:hover {
    background-color: var(--c-grid-background);
}

.lightgrey-border {
    border-width: 1px;
    border-style: solid;
    border-color: #aeafb0;
}

/* NOTE: .darkgrey to be deprecated */
.darkgrey, .darkgrey-color {
  color: #898d90;
}

/* NOTE: .darkgrey to be deprecated */
.bg-darkgrey, .darkgrey-bg {
    background-color: #898d90;
}

.darkgrey-border {
    border-width: 1px;
    border-style: solid;
    background-color: #898d90;
}

/* NOTE: .red to be deprecated */
.red, .red-color {
    color: var(--c-error);
}

/* NOTE: .bg-red to be deprecated */
.bg-red, .red-bg {
    background-color: var(--c-error);;
}

/* NOTE: .bg-red to be deprecated */
.red-border {
    border-width: 1px;
    border-style: solid;
    border-color: var(--c-error);;
}

/* NOTE: .pink to be deprecated */
.pink, .pink-color {
    color: pink;
}

/* NOTE: .bg-pink to be deprecated */
.bg-pink, .pink-bg {
    background-color: pink;
}

.pink-border {
    border-width: 1px;
    border-style: solid;
    border-color: pink;
}

.marigold, .marigold-color, .orange, .orange-color {
    color: #EAA221;
}

.marigold-bg, .orange-bg {
    background-color: #EAA221;
}

.marigold-border, .orange-border {
    border-width: 1px;
    border-style: solid;
    border-color: #EAA221 !important;
}

.purple, .purple-color {
    color: purple;
}

.purple-bg {
    background-color: purple;
}

.purple-border {
    border-width: 1px;
    border-style: solid;
}

.yellow, .yellow-color {
    color: #efc62c;
}

.yellow-bg {
    background-color: #efc62c;
}

.yellow-border {
    border-width: 1px;
    border-style: solid;
}

.blue, .blue-color {
    color: var(--c-secondary);
}

.blue-bg {
    background-color: var(--c-secondary);
}

.green, .green-color {
    color: var(--c-secondary);
}

.green-bg {
    background-color: var(--c-secondary);
}

.default-cursor {
    cursor: default;
}

/* NOTE: .pointer to be deprecated */
.pointer, .pointer-cursor {
    cursor: pointer;
}

.copy-cursor {
    cursor: copy !important;
}

.busy-cursor {
    cursor: wait !important;
}

.row-resize-cursor {
    cursor: ns-resize !important;
}

.context-menu-cursor {
    cursor: context-menu !important;
}

.not-allowed-cursor {
    cursor: not-allowed !important;
}

.help-cursor {
    cursor: help !important;
}

/* https://stackoverflow.com/questions/2310734/how-to-make-html-text-unselectable */
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

.sentence-case {
    text-transform: lowercase;
}

.sentence-case::first-letter {
    text-transform: uppercase;
}

.blueonhover, .blueonactive,
.blueonhover a, .blueonactive a {
  color: #ccc;
  text-decoration: none;
  cursor: pointer;
  z-index: 1;
  transition: all 0.2s !important;
}

.blueonhover.disabled, .blueonactive.disabled {
  cursor: not-allowed;
}

.blueonhover.revealonhover.stopfuckingaroundcssitotallymeanit {
    padding-top: 0 !important;
}

.blueonhover.revealonhover.stopfuckingaroundcssitotallymeanit i {
    _background-color: red !important;
    color: #33383b !important;
    opacity: 0.5 !important;
}

.blueonhover.revealonhover.stopfuckingaroundcssitotallymeanit:hover i {
    _background-color: blue !important;
    color: var(--c-secondary) !important;
    opacity: 1 !important;
    z-index: 999 !important; /* this caused me a bit of grief! */
    transition: all 0.2s !important;
}

.blueonhover:hover, .grid-row.active .blueonactive {
  text-decoration: none;
  cursor: pointer;
  color:  var(--c-secondary);
  transition: all 0.1s !important;
}

.blueonhover:hover.stopfuckingaroundcssitotallymeanit,
.grid-row.active .blueonactive.stopfuckingaroundcssitotallymeanit {
  text-decoration: none !important;
  cursor: pointer !important;
  color:  var(--c-secondary) !important;
}

/* to deprecate */
a.blueonhover.disabled:hover, .grid-row.active a.blueonactive.disabled:hover {
  cursor: not-allowed;
  color:  #33383b;
}

.blueborderonhover:hover {
  cursor: pointer;
  border-color: var(--c-secondary) !important;
}

.accent-on-hover-light-dark {
  color: var(--c-header-link);
}

.accent-on-hover-light-dark:hover {
  color: var(--c-header-link-hover);
}

/* note: triple-select 'cause i f'ing mean it css! */
.smooth-transition.smooth-transition.smooth-transition {
    transition: all 0.2s;
}

/* note: triple-select 'cause i f'ing mean it css! */
.smooth-transition-in:hover.smooth-transition-in:hover.smooth-transition-in:hover {
    transition: all 0.2s;
}

/* note: triple-select 'cause i f'ing mean it css! */
.quick-transition.quick-transition.quick-transition {
    transition: all 0.1s;
}

/* note: triple-select 'cause i f'ing mean it css! */
.quick-transition-in:hover.quick-transition-in:hover.quick-transition-in:hover {
    transition: all 0.1s;
}

.gray-bg-onhover {
    transition: all 0.1s
}

.gray-bg-onhover:hover {
    background-color: #eeeeee !important;
}

.redonclick {
    z-index: 1;
    transition: all 0.1s !important;
}

/* not sure about this one */
.redonactive.redonactive {
    z-index: 1;
    transition: all 0.1s;
}

.redonclick.redonclick.redonclick:active {
    color: #e2d736;
    transition: all 0s !important;
}

/* not sure about this one either */
.redonactive.redonactive:active {
    transition: none;
    color: #EBC015;
    transition: all 0s !important;
}

.redborderonclick:active {
    border-color: #e2d736 !important;
    transition: all 0s !important;
}

.pulse-opacity{
    -webkit-animation-name: pulse-opacity-keyframes;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite
}

@-webkit-keyframes pulse-opacity-keyframes {
    0% { opacity: 0.5 }
    50% { opacity: 1.0 }
    100% { opacity: 0.5 }
 }


/* misc portable positioning classes */

.nowrap.nowrap {
    white-space: nowrap;
    flex-wrap: nowrap;
}

.wrap.wrap {
    display: flex;
    white-space: normal;
    flex-wrap: wrap;
}

.center-align,
.center-top-align, .top-center-align,
.center-middle-align, .middle-center-align,
.center-bottom-align, .bottom-center-align {
    display: flex;
    text-align: center;
    justify-content: center;
}

.center-align.stopfuckingaroundcssitotallymeanit {
    /* y u no work sometimes? also why you break things sometimes? */
    margin-left: auto;
    margin-right: auto;
}

.middle-align, .middle.align,
.middle-center-align, .center-middle-align,
.middle-left-align, .left-middle-align,
.middle-right-align, .right-middle-align {
     display: flex;
     align-items: center;
     vertical-align: middle;
}

.middle-align.stopfuckingaroundcssitotallymeanit {
    /* y u no work sometimes? also why you break things sometimes? */
    margin-top: auto;
    margin-bottom: auto;
}

.center-spaced-align {
    display: flex;
    justify-content: space-around;
}

.center-spread-align {
    display: flex;
    justify-content: space-between;
}

.bottom-align,
.bottom-center-align, .center-bottom-align,
.bottom-left-align, .left-bottom-align,
.bottom-right-align, .right-bottom-align {
    display: flex;
    align-items: center;
    vertical-align: bottom;
}

.bottom-align.stopfuckingaroundcssitotallymeanit {
    /* y u no work sometimes? also why you break things sometimes? */
    margin-top: auto;
    margin-bottom: auto;
}

.right-align,
.right-top-align, .top-right-align,
.right-bottom-align, .bottom-right-align,
.right-bottom-align, .bottom-right-align {
    display: flex;
    text-align: right;
    justify-content: flex-end;
}

.left-align,
.left-top-align, .top-left-align,
.left-middle-align, .middle-left-align,
.left-bottom-align, .bottom-left-align {
    display: flex;
    text-align: left;
    align-items: initial;
    justify-content: flex-start;
}

.left-align.stopfuckingaroundcssitotallymeanit {
    /* y u no work sometimes? also why you break things sometimes? */
    margin-right: auto;
}

.bottom-align,
.bottom-left-align, .left-bottom-align,
.bottom-middle-align, .middle-bottom-align,
.bottom-right-align, .right-bottom-align {
    display: flex;
    align-items: flex-end;
    vertical-align: bottom;
}

.bottom-align.stopfuckingaroundcssitotallymeanit {
    /* y u no work sometimes? also why you break things sometimes? */
    margin-top: auto;
}

.baseline-align {
    display: flex;
    align-items: baseline;
    vertical-align: baseline;
}

.top-align,
.top-left-align, .left-top-align,
.top-center-align, .center-top-align,
.top-right-align, .right-top-align {
    display: flex;
    align-items: flex-start;
    vertical-align: top;
}

.top-align.stopfuckingaroundcssitotallymeanit {
    /* y u no work sometimes? also why you break things sometimes? */
    margin-bottom: auto;
}

.spaced-out {
    margin: 10px !important;
}

.not-spaced-out {
    margin: 2px !important;
}

.flex {
    display: flex;
}

.cols {
    display: -webkit-flex; /* note we should add -webkit-X support everywhere */
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/* this is proving to be a bad idea...
.cols > * {
    flex-grow: 1;
}
*/

.rows {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

/* this is proving to be a bad idea...
.rows > * {
    flex-grow: 1;
}
*/

.flex-grow-max.flex-grow-max {
    flex-grow: 100;
}

.flex-grow-min {
    flex-grow: 0;
}

.table-cell {
    display: table-cell;
}

.lighter {
    font-weight: lighter;
}

.semi-bold {
    font-weight: 500;
}

/* basscss already has those!

.relative {
    display: relative;
}

.absolute  {
    display: absolute;
}

.left {
    left: 0;
}

.right {
    right: 0;
}

.top {
    top: 0;
}

.bottom {
    bottom: 0;
}
*/

/* hovever basscss uses `float: left` etc, double-up on absolute (ie `.absolute.absolute.left`) to poke thru padding */

.absolute.absolute.left {
    left: 0;
}

.absolute.absolute.right {
    right: 0;
}

.absolute.absolute.top {
    top: 0;
}

.absolute.absolute.bottom {
    bottom: 0;
}

.absolute.center {
    left: 50%;
    transform: translateX(-50%);
}

.absolute.middle {
    top: 50%;
    transform: translateY(-50%);
}

.absolute.center.middle {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.min-width {
    width: 0%;
}

.min-height {
    width: 0%;
}

.half-width, .twoquarter-width, .two-quarter-width, .two-quarters-width {
    width: 50%;
}

.half-height, .twoquarter-height, .two-quarter-height, .two-quarters-height {
    height: 50%;
}

.third-width {
    width: 34%;
}

.third-height {
    height: 34%;
}

.twothird-width, .two-third-width, .two-thirds-width {
    width: 66%;
}

.twothird-height, .two-third-height, .two-thirds-height {
    height: 66%;
}

.quarter-width, .quarter-width {
    width: 25%;
}

.quarter-height, .quarter-height {
    height: 25%;
}

.threequarter-width {
    width: 75%;
}

.threequarter-height {
    height: 75%;
}

/* padding and margin classes */

/* TO DEPRECATE: Use the container component with desired :spacing */

.pad-items-0 > *,
.pad-items-v-0 > *,
.pad-items-t-0 > * {
    padding-top: 0px;
}

.pad-items-0 > *,
.pad-items-h-0 > *,
.pad-items-r-0 > * {
    padding-right: 0px;
}

.pad-items-0 > *,
.pad-items-v-0 > *,
.pad-items-b-0 > * {
    padding-bottom: 0px;
}

.pad-items-0 > *,
.pad-items-h-0 > *,
.pad-items-l-0 > * {
    padding-left: 0px;
}

.pad-items-1 > *,
.pad-items-v-1 > *,
.pad-items-t-1 > * {
    padding-top: 1px;
}

.pad-items-1 > *,
.pad-items-h-1 > *,
.pad-items-r-1 > * {
    padding-right: 1px;
}

.pad-items-1 > *,
.pad-items-v-1 > *,
.pad-items-b-1 > * {
    padding-bottom: 1px;
}

.pad-items-1 > *,
.pad-items-h-1 > *,
.pad-items-l-1 > * {
    padding-left: 1px;
}

.pad-items-2 > *,
.pad-items-v-2 > *,
.pad-items-t-2 > * {
    padding-top: 2px;
}

.pad-items-2 > *,
.pad-items-h-2 > *,
.pad-items-r-2 > * {
    padding-right: 2px;
}

.pad-items-2 > *,
.pad-items-v-2 > *,
.pad-items-b-2 > * {
    padding-bottom: 2px;
}

.pad-items-2 > *,
.pad-items-h-2 > *,
.pad-items-l-2 > * {
    padding-left: 2px;
}

.pad-items-3 > *,
.pad-items-v-3 > *,
.pad-items-t-3 > * {
    padding-top: 3px;
}

.pad-items-3 > *,
.pad-items-h-3 > *,
.pad-items-r-3 > * {
    padding-right: 3px;
}

.pad-items-3 > *,
.pad-items-v-3 > *,
.pad-items-b-3 > * {
    padding-bottom: 3px;
}

.pad-items-3 > *,
.pad-items-h-3 > *,
.pad-items-l-3 > * {
    padding-left: 3px;
}

.pad-items-4 > *,
.pad-items-v-4 > *,
.pad-items-t-4 > * {
    padding-top: 4px;
}

.pad-items-4 > *,
.pad-items-h-4 > *,
.pad-items-r-4 > * {
    padding-right: 4px;
}

.pad-items-4 > *,
.pad-items-v-4 > *,
.pad-items-b-4 > * {
    padding-bottom: 4px;
}

.pad-items-4 > *,
.pad-items-h-4 > *,
.pad-items-l-4 > * {
    padding-left: 4px;
}

.pad-items-5 > *,
.pad-items-v-5 > *,
.pad-items-t-5 > * {
    padding-top: 5px;
}

.pad-items-5 > *,
.pad-items-h-5 > *,
.pad-items-r-5 > * {
    padding-right: 5px;
}

.pad-items-5 > *,
.pad-items-v-5 > *,
.pad-items-b-5 > * {
    padding-bottom: 5px;
}

.pad-items-5 > *,
.pad-items-h-5 > *,
.pad-items-l-5 > * {
    padding-left: 5px;
}

.pad-items-6 > *,
.pad-items-v-6 > *,
.pad-items-t-6 > * {
    padding-top: 6px;
}

.pad-items-6 > *,
.pad-items-h-6 > *,
.pad-items-r-6 > * {
    padding-right: 6px;
}

.pad-items-6 > *,
.pad-items-v-6 > *,
.pad-items-b-6 > * {
    padding-bottom: 6px;
}

.pad-items-6 > *,
.pad-items-h-6 > *,
.pad-items-l-6 > * {
    padding-left: 6px;
}

/* insert additional classes as needed */

.pad-items-10 > *,
.pad-items-v-10 > *,
.pad-items-t-10 > * {
    padding-top: 10px;
}

.pad-items-10 > *,
.pad-items-h-10 > *,
.pad-items-r-10 > * {
    padding-right: 10px;
}

.pad-items-10 > *,
.pad-items-v-10 > *,
.pad-items-b-10 > * {
    padding-bottom: 10px;
}

.pad-items-10 > *,
.pad-items-h-10 > *,
.pad-items-l-10 > * {
    padding-left: 10px;
}

/* insert additional classes as needed */

.pad-items-15 > *,
.pad-items-v-15 > *,
.pad-items-t-15 > * {
    padding-top: 15px;
}

.pad-items-15 > *,
.pad-items-h-15 > *,
.pad-items-r-15 > * {
    padding-right: 15px;
}

.pad-items-15 > *,
.pad-items-v-15 > *,
.pad-items-b-15 > * {
    padding-bottom: 15px;
}

.pad-items-15 > *,
.pad-items-h-15 > *,
.pad-items-l-15 > * {
    padding-left: 15px;
}

/* insert additional classes as needed */

.pad-items-20 > *,
.pad-items-v-20 > *,
.pad-items-t-20 > * {
    padding-top: 20px;
}

.pad-items-20 > *,
.pad-items-h-20 > *,
.pad-items-r-20 > * {
    padding-right: 20px;
}

.pad-items-20 > *,
.pad-items-v-20 > *,
.pad-items-b-20 > * {
    padding-bottom: 20px;
}

.pad-items-20 > *,
.pad-items-h-20 > *,
.pad-items-l-20 > * {
    padding-left: 20px;
}


/* reset at the edges */

.pad-items-1 > *:first-child, .pad-items-v-1 > *:first-child, .pad-items-l-1 > *:first-child,
.pad-items-2 > *:first-child, .pad-items-v-2 > *:first-child, .pad-items-l-2 > *:first-child,
.pad-items-3 > *:first-child, .pad-items-v-3 > *:first-child, .pad-items-l-3 > *:first-child,
.pad-items-4 > *:first-child, .pad-items-v-4 > *:first-child, .pad-items-l-4 > *:first-child,
.pad-items-5 > *:first-child, .pad-items-v-5 > *:first-child, .pad-items-l-5 > *:first-child,
.pad-items-6 > *:first-child, .pad-items-v-6 > *:first-child, .pad-items-l-6 > *:first-child,
.pad-items-10 > *:first-child, .pad-items-v-10 > *:first-child, .pad-items-l-10 > *:first-child,
.pad-items-15 > *:first-child, .pad-items-v-15 > *:first-child, .pad-items-l-15 > *:first-child,
.pad-items-20 > *:first-child, .pad-items-v-20 > *:first-child, .pad-items-l-20 > *:first-child {
    padding-top: initial;
}

.pad-items-1 > *:last-child, .pad-items-h-1 > *:last-child, .pad-items-r-1 > *:last-child,
.pad-items-2 > *:last-child, .pad-items-h-2 > *:last-child, .pad-items-r-2 > *:last-child,
.pad-items-3 > *:last-child, .pad-items-h-3 > *:last-child, .pad-items-r-3 > *:last-child,
.pad-items-4 > *:last-child, .pad-items-h-4 > *:last-child, .pad-items-r-4 > *:last-child,
.pad-items-5 > *:last-child, .pad-items-h-5 > *:last-child, .pad-items-r-5 > *:last-child,
.pad-items-6 > *:last-child, .pad-items-h-6 > *:last-child, .pad-items-r-6 > *:last-child,
.pad-items-10 > *:last-child, .pad-items-h-10 > *:last-child, .pad-items-r-10 > *:last-child,
.pad-items-15 > *:last-child, .pad-items-h-15 > *:last-child, .pad-items-r-15 > *:last-child,
.pad-items-20 > *:last-child, .pad-items-h-20 > *:last-child, .pad-items-r-20 > *:last-child {
    padding-right: initial;
}

.pad-items-1 > *:last-child, .pad-items-v-1 > *:last-child, .pad-items-b-1 > *:last-child,
.pad-items-2 > *:last-child, .pad-items-v-2 > *:last-child, .pad-items-b-2 > *:last-child,
.pad-items-3 > *:last-child, .pad-items-v-3 > *:last-child, .pad-items-b-3 > *:last-child,
.pad-items-4 > *:last-child, .pad-items-v-4 > *:last-child, .pad-items-b-4 > *:last-child,
.pad-items-5 > *:last-child, .pad-items-v-5 > *:last-child, .pad-items-b-5 > *:last-child,
.pad-items-6 > *:last-child, .pad-items-v-6 > *:last-child, .pad-items-b-6 > *:last-child,
.pad-items-10 > *:last-child, .pad-items-v-10 > *:last-child, .pad-items-b-10 > *:last-child,
.pad-items-15 > *:last-child, .pad-items-v-15 > *:last-child, .pad-items-b-15 > *:last-child,
.pad-items-20 > *:last-child, .pad-items-v-20 > *:last-child, .pad-items-b-20 > *:last-child {
    padding-bottom: initial;
}

.pad-items-1 > *:first-child, .pad-items-h-1 > *:first-child, .pad-items-l-1 > *:first-child,
.pad-items-2 > *:first-child, .pad-items-h-2 > *:first-child, .pad-items-l-2 > *:first-child,
.pad-items-3 > *:first-child, .pad-items-h-3 > *:first-child, .pad-items-l-3 > *:first-child,
.pad-items-4 > *:first-child, .pad-items-h-4 > *:first-child, .pad-items-l-4 > *:first-child,
.pad-items-5 > *:first-child, .pad-items-h-5 > *:first-child, .pad-items-l-5 > *:first-child,
.pad-items-6 > *:first-child, .pad-items-h-6 > *:first-child, .pad-items-l-6 > *:first-child,
.pad-items-10 > *:first-child, .pad-items-h-10 > *:first-child, .pad-items-l-10 > *:first-child,
.pad-items-15 > *:first-child, .pad-items-h-15 > *:first-child, .pad-items-l-15 > *:first-child,
.pad-items-20 > *:first-child, .pad-items-h-20 > *:first-child, .pad-items-l-20 > *:first-child {
    padding-left: initial;
}


/* Recommended instead to use the container component with desired :spacing */

/* insert additional classes as needed */

.margin-items-0 > *,
.margin-items-v-0 > *,
.margin-items-t-0 > * {
    margin-top: 0px;
}

.margin-items-0 > *,
.margin-items-h-0 > *,
.margin-items-r-0 > * {
    margin-right: 0px;
}

.margin-items-0 > *,
.margin-items-v-0 > *,
.margin-items-b-0 > * {
    margin-bottom: 0px;
}

.margin-items-0 > *,
.margin-items-h-0 > *,
.margin-items-l-0 > * {
    margin-left: 0px;
}

.margin-items-1 > *,
.margin-items-v-1 > *,
.margin-items-t-1 > * {
    margin-top: 1px;
}

.margin-items-1 > *,
.margin-items-h-1 > *,
.margin-items-r-1 > * {
    margin-right: 1px;
}

.margin-items-1 > *,
.margin-items-v-1 > *,
.margin-items-b-1 > * {
    margin-bottom: 1px;
}

.margin-items-1 > *,
.margin-items-h-1 > *,
.margin-items-l-1 > * {
    margin-left: 1px;
}

.margin-items-2 > *,
.margin-items-v-2 > *,
.margin-items-t-2 > * {
    margin-top: 2px;
}

.margin-items-2 > *,
.margin-items-h-2 > *,
.margin-items-r-2 > * {
    margin-right: 2px;
}

.margin-items-2 > *,
.margin-items-v-2 > *,
.margin-items-b-2 > * {
    margin-bottom: 2px;
}

.margin-items-2 > *,
.margin-items-h-2 > *,
.margin-items-l-2 > * {
    margin-left: 2px;
}

.margin-items-3 > *,
.margin-items-v-3 > *,
.margin-items-t-3 > * {
    margin-top: 3px;
}

.margin-items-3 > *,
.margin-items-h-3 > *,
.margin-items-r-3 > * {
    margin-right: 3px;
}

.margin-items-3 > *,
.margin-items-v-3 > *,
.margin-items-b-3 > * {
    margin-bottom: 3px;
}

.margin-items-3 > *,
.margin-items-h-3 > *,
.margin-items-l-3 > * {
    margin-left: 3px;
}

.margin-items-4 > *,
.margin-items-v-4 > *,
.margin-items-t-4 > * {
    margin-top: 4px;
}

.margin-items-4 > *,
.margin-items-h-4 > *,
.margin-items-r-4 > * {
    margin-right: 4px;
}

.margin-items-4 > *,
.margin-items-v-4 > *,
.margin-items-b-4 > * {
    margin-bottom: 4px;
}

.margin-items-4 > *,
.margin-items-h-4 > *,
.margin-items-l-4 > * {
    margin-left: 4px;
}

.margin-items-5 > *,
.margin-items-v-5 > *,
.margin-items-t-5 > * {
    margin-top: 5px;
}

.margin-items-5 > *,
.margin-items-h-5 > *,
.margin-items-r-5 > * {
    margin-right: 5px;
}

.margin-items-5 > *,
.margin-items-v-5 > *,
.margin-items-b-5 > * {
    margin-bottom: 5px;
}

.margin-items-5 > *,
.margin-items-h-5 > *,
.margin-items-l-5 > * {
    margin-left: 5px;
}

.margin-items-6 > *,
.margin-items-v-6 > *,
.margin-items-t-6 > * {
    margin-top: 6px;
}

.margin-items-6 > *,
.margin-items-h-6 > *,
.margin-items-r-6 > * {
    margin-right: 6px;
}

.margin-items-6 > *,
.margin-items-v-6 > *,
.margin-items-b-6 > * {
    margin-bottom: 6px;
}

.margin-items-6 > *,
.margin-items-h-6 > *,
.margin-items-l-6 > * {
    margin-left: 6px;
}

/* insert additional classes as needed */

.margin-items-10 > *,
.margin-items-v-10 > *,
.margin-items-t-10 > * {
    margin-top: 10px;
}

.margin-items-10 > *,
.margin-items-h-10 > *,
.margin-items-r-10 > * {
    margin-right: 10px;
}

.margin-items-10 > *,
.margin-items-v-10 > *,
.margin-items-b-10 > * {
    margin-bottom: 10px;
}

.margin-items-10 > *,
.margin-items-h-10 > *,
.margin-items-l-10 > * {
    margin-left: 10px;
}

/* insert additional classes as needed */

.margin-items-20 > *,
.margin-items-v-20 > *,
.margin-items-t-20 > * {
    margin-top: 20px;
}

.margin-items-20 > *,
.margin-items-h-20 > *,
.margin-items-r-20 > * {
    margin-right: 20px;
}

.margin-items-20 > *,
.margin-items-v-20 > *,
.margin-items-b-20 > * {
    margin-bottom: 20px;
}

.margin-items-20 > *,
.margin-items-h-20 > *,
.margin-items-l-20 > * {
    margin-left: 20px;
}

/* reset at the edges (except when used in a container component) */

.margin-items-1:not(.container-content) > *:first-child, .margin-items-v-1 > *:first-child, .margin-items-l-1 > *:first-child,
.margin-items-2:not(.container-content) > *:first-child, .margin-items-v-2 > *:first-child, .margin-items-l-2 > *:first-child,
.margin-items-3:not(.container-content) > *:first-child, .margin-items-v-3 > *:first-child, .margin-items-l-3 > *:first-child,
.margin-items-4:not(.container-content) > *:first-child, .margin-items-v-4 > *:first-child, .margin-items-l-4 > *:first-child,
.margin-items-5:not(.container-content) > *:first-child, .margin-items-v-5 > *:first-child, .margin-items-l-5 > *:first-child,
.margin-items-6:not(.container-content) > *:first-child, .margin-items-v-6 > *:first-child, .margin-items-l-6 > *:first-child,
.margin-items-10:not(.container-content) > *:first-child, .margin-items-v-10 > *:first-child, .margin-items-l-10 > *:first-child,
.margin-items-20:not(.container-content) > *:first-child, .margin-items-v-20 > *:first-child, .margin-items-l-20 > *:first-child {
    margin-top: initial;
}

.margin-items-1:not(.container-content) > *:last-child, .margin-items-h-1 > *:last-child, .margin-items-r-1 > *:last-child,
.margin-items-2:not(.container-content) > *:last-child, .margin-items-h-2 > *:last-child, .margin-items-r-2 > *:last-child,
.margin-items-3:not(.container-content) > *:last-child, .margin-items-h-3 > *:last-child, .margin-items-r-3 > *:last-child,
.margin-items-4:not(.container-content) > *:last-child, .margin-items-h-4 > *:last-child, .margin-items-r-4 > *:last-child,
.margin-items-5:not(.container-content) > *:last-child, .margin-items-h-5 > *:last-child, .margin-items-r-5 > *:last-child,
.margin-items-6:not(.container-content) > *:last-child, .margin-items-h-6 > *:last-child, .margin-items-r-6 > *:last-child,
.margin-items-10:not(.container-content) > *:last-child, .margin-items-h-10 > *:last-child, .margin-items-r-10 > *:last-child,
.margin-items-20:not(.container-content) > *:last-child, .margin-items-h-20 > *:last-child, .margin-items-r-20 > *:last-child {
    margin-right: initial;
}

.margin-items-1:not(.container-content) > *:last-child, .margin-items-v-1 > *:last-child, .margin-items-b-1 > *:last-child,
.margin-items-2:not(.container-content) > *:last-child, .margin-items-v-2 > *:last-child, .margin-items-b-2 > *:last-child,
.margin-items-3:not(.container-content) > *:last-child, .margin-items-v-3 > *:last-child, .margin-items-b-3 > *:last-child,
.margin-items-4:not(.container-content) > *:last-child, .margin-items-v-4 > *:last-child, .margin-items-b-4 > *:last-child,
.margin-items-5:not(.container-content) > *:last-child, .margin-items-v-5 > *:last-child, .margin-items-b-5 > *:last-child,
.margin-items-6:not(.container-content) > *:last-child, .margin-items-v-6 > *:last-child, .margin-items-b-6 > *:last-child,
.margin-items-10:not(.container-content) > *:last-child, .margin-items-v-10 > *:last-child, .margin-items-b-10 > *:last-child,
.margin-items-20:not(.container-content) > *:last-child, .margin-items-v-20 > *:last-child, .margin-items-b-20 > *:last-child {
    margin-bottom: initial;
}

.margin-items-1:not(.container-content) > *:first-child, .margin-items-h-1 > *:first-child, .margin-items-l-1 > *:first-child,
.margin-items-2:not(.container-content) > *:first-child, .margin-items-h-2 > *:first-child, .margin-items-l-2 > *:first-child,
.margin-items-3:not(.container-content) > *:first-child, .margin-items-h-3 > *:first-child, .margin-items-l-3 > *:first-child,
.margin-items-4:not(.container-content) > *:first-child, .margin-items-h-4 > *:first-child, .margin-items-l-4 > *:first-child,
.margin-items-5:not(.container-content) > *:first-child, .margin-items-h-5 > *:first-child, .margin-items-l-5 > *:first-child,
.margin-items-6:not(.container-content) > *:first-child, .margin-items-h-6 > *:first-child, .margin-items-l-6 > *:first-child,
.margin-items-10:not(.container-content) > *:first-child, .margin-items-h-10 > *:first-child, .margin-items-l-10 > *:first-child,
.margin-items-20:not(.container-content) > *:first-child, .margin-items-h-20 > *:first-child, .margin-items-l-20 > *:first-child {
    margin-left: initial;
}


.pad-0,
.pad-v-0,
.pad-t-0 {
    padding-top: 0px;
}

.pad-0,
.pad-h-0,
.pad-r-0 {
    padding-right: 0px;
}

.pad-0,
.pad-v-0,
.pad-b-0 {
    padding-bottom: 0px;
}

.pad-0,
.pad-h-0,
.pad-l-0 {
    padding-left: 0px;
}

.pad-1,
.pad-v-1,
.pad-t-1 {
    padding-top: 1px;
}

.pad-1,
.pad-h-1,
.pad-r-1 {
    padding-right: 1px;
}

.pad-1,
.pad-v-1,
.pad-b-1 {
    padding-bottom: 1px;
}

.pad-1,
.pad-h-1,
.pad-l-1 {
    padding-left: 1px;
}

.pad-2,
.pad-v-2,
.pad-t-2 {
    padding-top: 2px;
}

.pad-2,
.pad-h-2,
.pad-r-2 {
    padding-right: 2px;
}

.pad-2,
.pad-v-2,
.pad-b-2 {
    padding-bottom: 2px;
}

.pad-2,
.pad-h-2,
.pad-l-2 {
    padding-left: 2px;
}

.pad-3,
.pad-v-3,
.pad-t-3 {
    padding-top: 3px;
}

.pad-3,
.pad-h-3,
.pad-r-3 {
    padding-right: 3px;
}

.pad-3,
.pad-v-3,
.pad-b-3 {
    padding-bottom: 3px;
}

.pad-3,
.pad-h-3,
.pad-l-3 {
    padding-left: 3px;
}

.pad-4,
.pad-v-4,
.pad-t-4 {
    padding-top: 4px;
}

.pad-4,
.pad-h-4,
.pad-r-4 {
    padding-right: 4px;
}

.pad-4,
.pad-v-4,
.pad-b-4 {
    padding-bottom: 4px;
}

.pad-4,
.pad-h-4,
.pad-l-4 {
    padding-left: 4px;
}

.pad-5,
.pad-v-5,
.pad-t-5 {
    padding-top: 5px;
}

.pad-5,
.pad-h-5,
.pad-r-5 {
    padding-right: 5px;
}

.pad-5,
.pad-v-5,
.pad-b-5 {
    padding-bottom: 5px;
}

.pad-5,
.pad-h-5,
.pad-l-5 {
    padding-left: 5px;
}

.pad-6,
.pad-v-6,
.pad-t-6 {
    padding-top: 6px;
}

.pad-6,
.pad-h-6,
.pad-r-6 {
    padding-right: 6px;
}

.pad-6,
.pad-v-6,
.pad-b-6 {
    padding-bottom: 6px;
}

.pad-6,
.pad-h-6,
.pad-l-6 {
    padding-left: 6px;
}

.pad-7,
.pad-v-7,
.pad-t-7 {
    padding-top: 7px;
}

.pad-7,
.pad-h-7,
.pad-r-7 {
    padding-right: 7px;
}

.pad-7,
.pad-v-7,
.pad-b-7 {
    padding-bottom: 7px;
}

.pad-7,
.pad-h-7,
.pad-l-7 {
    padding-left: 7px;
}

.pad-8,
.pad-v-8,
.pad-t-8 {
    padding-top: 8px;
}

.pad-8,
.pad-h-8,
.pad-r-8 {
    padding-right: 8px;
}

.pad-8,
.pad-v-8,
.pad-b-8 {
    padding-bottom: 8px;
}

.pad-8,
.pad-h-8,
.pad-l-8 {
    padding-left: 8px;
}

.pad-9,
.pad-v-9,
.pad-t-9 {
    padding-top: 9px;
}

.pad-9,
.pad-h-9,
.pad-r-9 {
    padding-right: 9px;
}

.pad-9,
.pad-v-9,
.pad-b-9 {
    padding-bottom: 9px;
}

.pad-9,
.pad-h-9,
.pad-l-9 {
    padding-left: 9px;
}

.pad-10,
.pad-v-10,
.pad-t-10 {
    padding-top: 10px;
}

.pad-10,
.pad-h-10,
.pad-r-10 {
    padding-right: 10px;
}

.pad-10,
.pad-v-10,
.pad-b-10 {
    padding-bottom: 10px;
}

.pad-10,
.pad-h-10,
.pad-l-10 {
    padding-left: 10px;
}

/* insert additional classes as needed */

.pad-11,
.pad-v-11,
.pad-t-11 {
  padding-top: 11px;
}

.pad-11,
.pad-h-11,
.pad-r-11 {
  padding-right: 11px;
}

.pad-11,
.pad-v-11,
.pad-b-11 {
  padding-bottom: 11px;
}

.pad-11,
.pad-h-11,
.pad-l-11 {
  padding-left: 11px;
}

.pad-12,
.pad-v-12,
.pad-t-12 {
  padding-top: 12px;
}

.pad-12,
.pad-h-12,
.pad-r-12 {
  padding-right: 12px;
}

.pad-12,
.pad-v-12,
.pad-b-12 {
  padding-bottom: 12px;
}

.pad-12,
.pad-h-12,
.pad-l-12 {
  padding-left: 12px;
}

.pad-13,
.pad-v-13,
.pad-t-13 {
  padding-top: 13px;
}

.pad-13,
.pad-h-13,
.pad-r-13 {
  padding-right: 13px;
}

.pad-13,
.pad-v-13,
.pad-b-13 {
  padding-bottom: 13px;
}

.pad-13,
.pad-h-13,
.pad-l-13 {
  padding-left: 13px;
}

.pad-14,
.pad-v-14,
.pad-t-14 {
  padding-top: 14px;
}

.pad-14,
.pad-h-14,
.pad-r-14 {
  padding-right: 14px;
}

.pad-14,
.pad-v-14,
.pad-b-14 {
  padding-bottom: 14px;
}

.pad-14,
.pad-h-14,
.pad-l-14 {
  padding-left: 14px;
}

.pad-15,
.pad-v-15,
.pad-t-15 {
  padding-top: 15px;
}

.pad-15,
.pad-h-15,
.pad-r-15 {
  padding-right: 15px;
}

.pad-15,
.pad-v-15,
.pad-b-15 {
  padding-bottom: 15px;
}

.pad-15,
.pad-h-15,
.pad-l-15 {
  padding-left: 15px;
}

.pad-16,
.pad-v-16,
.pad-t-16 {
    padding-top: 16px;
}

.pad-16,
.pad-h-16,
.pad-r-16 {
    padding-right: 16px;
}

.pad-16,
.pad-v-16,
.pad-b-16 {
    padding-bottom: 16px;
}

.pad-16,
.pad-h-16,
.pad-l-16 {
    padding-left: 16px;
}

.pad-17,
.pad-h-17,
.pad-l-17 {
  padding-left: 17px;
}

.pad-18,
.pad-h-18,
.pad-l-18 {
  padding-left: 18px;
}

.pad-19,
.pad-h-19,
.pad-l-19 {
  padding-left: 19px;
}

.pad-20,
.pad-v-20,
.pad-t-20 {
    padding-top: 20px;
}

.pad-20,
.pad-h-20,
.pad-r-20 {
    padding-right: 20px;
}

.pad-20,
.pad-v-20,
.pad-b-20 {
    padding-bottom: 20px;
}

.pad-20,
.pad-h-20,
.pad-l-20 {
    padding-left: 20px;
}

.pad-21,
.pad-v-21,
.pad-t-21 {
    padding-top: 21px;
}

.pad-21,
.pad-h-21,
.pad-r-21 {
    padding-right: 21px;
}

.pad-21,
.pad-v-21,
.pad-b-21 {
    padding-bottom: 21px;
}

.pad-21,
.pad-h-21,
.pad-l-21 {
    padding-left: 21px;
}

.pad-22,
.pad-v-22,
.pad-t-22 {
    padding-top: 22px;
}

.pad-22,
.pad-h-22,
.pad-r-22 {
    padding-right: 22px;
}

.pad-22,
.pad-v-22,
.pad-b-22 {
    padding-bottom: 22px;
}

.pad-22,
.pad-h-22,
.pad-l-22 {
    padding-left: 22px;
}

.pad-23,
.pad-v-23,
.pad-t-23 {
    padding-top: 23px;
}

.pad-23,
.pad-h-23,
.pad-r-23 {
    padding-right: 23px;
}

.pad-23,
.pad-v-23,
.pad-b-23 {
    padding-bottom: 23px;
}

.pad-23,
.pad-h-23,
.pad-l-23 {
    padding-left: 23px;
}

.pad-24,
.pad-v-24,
.pad-t-24 {
    padding-top: 24px;
}

.pad-24,
.pad-h-24,
.pad-r-24 {
    padding-right: 24px;
}

.pad-24,
.pad-v-24,
.pad-b-24 {
    padding-bottom: 24px;
}

.pad-24,
.pad-h-24,
.pad-l-24 {
    padding-left: 24px;
}

.pad-25,
.pad-v-25,
.pad-t-25 {
    padding-top: 25px;
}

.pad-25,
.pad-h-25,
.pad-r-25 {
    padding-right: 25px;
}

.pad-25,
.pad-v-25,
.pad-b-25 {
    padding-bottom: 25px;
}

.pad-25,
.pad-h-25,
.pad-l-25 {
    padding-left: 25px;
}

.pad-26,
.pad-v-26,
.pad-t-26 {
    padding-top: 26px;
}

.pad-26,
.pad-h-26,
.pad-r-26 {
    padding-right: 26px;
}

.pad-26,
.pad-v-26,
.pad-b-26 {
    padding-bottom: 26px;
}

.pad-26,
.pad-h-26,
.pad-l-26 {
    padding-left: 26px;
}

.pad-27,
.pad-v-27,
.pad-t-27 {
    padding-top: 27px;
}

.pad-27,
.pad-h-27,
.pad-r-27 {
    padding-right: 27px;
}

.pad-27,
.pad-v-27,
.pad-b-27 {
    padding-bottom: 27px;
}

.pad-27,
.pad-h-27,
.pad-l-27 {
    padding-left: 27px;
}

.pad-28,
.pad-v-28,
.pad-t-28 {
    padding-top: 28px;
}

.pad-28,
.pad-h-28,
.pad-r-28 {
    padding-right: 28px;
}

.pad-28,
.pad-v-28,
.pad-b-28 {
    padding-bottom: 28px;
}

.pad-28,
.pad-h-28,
.pad-l-28 {
    padding-left: 28px;
}

.pad-29,
.pad-v-29,
.pad-t-29 {
    padding-top: 29px;
}

.pad-29,
.pad-h-29,
.pad-r-29 {
    padding-right: 29px;
}

.pad-29,
.pad-v-29,
.pad-b-29 {
    padding-bottom: 29px;
}

.pad-29,
.pad-h-29,
.pad-l-29 {
    padding-left: 29px;
}

.pad-30,
.pad-v-30,
.pad-t-30 {
    padding-top: 30px;
}

.pad-30,
.pad-h-30,
.pad-r-30 {
    padding-right: 30px;
}

.pad-30,
.pad-v-30,
.pad-b-30 {
    padding-bottom: 30px;
}

.pad-30,
.pad-h-30,
.pad-l-30 {
    padding-left: 30px;
}

/* insert additional classes as needed */

.pad-40,
.pad-v-40,
.pad-t-40 {
    padding-top: 40px;
}

.pad-40,
.pad-h-40,
.pad-r-40 {
    padding-right: 40px;
}

.pad-40,
.pad-v-40,
.pad-b-40 {
    padding-bottom: 40px;
}

.pad-40,
.pad-h-40,
.pad-l-40 {
    padding-left: 40px;
}

/* insert additional classes as needed */

.margin-n1,
.margin-v-n1,
.margin-t-n1 {
    margin-top: -1px;
}

.margin-n1,
.margin-h-n1,
.margin-r-n1 {
    margin-right: -1px;
}

.margin-n1,
.margin-v-n1,
.margin-b-n1 {
    margin-bottom: -1px;
}

.margin-n1,
.margin-h-n1,
.margin-l-n1 {
    margin-left: -1px;
}

.margin-n2,
.margin-v-n2,
.margin-t-n2 {
    margin-top: -2px;
}

.margin-n2,
.margin-h-n2,
.margin-r-n2 {
    margin-right: -2px;
}

.margin-n2,
.margin-v-n2,
.margin-b-n2 {
    margin-bottom: -2px;
}

.margin-n2,
.margin-h-n2,
.margin-l-n2 {
    margin-left: -2px;
}

.margin-n3,
.margin-v-n3,
.margin-t-n3 {
    margin-top: -3px;
}

.margin-n3,
.margin-h-n3,
.margin-r-n3 {
    margin-right: -3px;
}

.margin-n3,
.margin-v-n3,
.margin-b-n3 {
    margin-bottom: -3px;
}

.margin-n3,
.margin-h-n3,
.margin-l-n3 {
    margin-left: -3px;
}

.margin-n4,
.margin-v-n4,
.margin-t-n4 {
    margin-top: -4px;
}

.margin-n4,
.margin-h-n4,
.margin-r-n4 {
    margin-right: -4px;
}

.margin-n4,
.margin-v-n4,
.margin-b-n4 {
    margin-bottom: -4px;
}

.margin-n4,
.margin-h-n4,
.margin-l-n4 {
    margin-left: -4px;
}

.margin-n5,
.margin-v-n5,
.margin-t-n5 {
    margin-top: -5px;
}

.margin-n5,
.margin-h-n5,
.margin-r-n5 {
    margin-right: -5px;
}

.margin-n5,
.margin-v-n5,
.margin-b-n5 {
    margin-bottom: -5px;
}

.margin-n5,
.margin-h-n5,
.margin-l-n5 {
    margin-left: -5px;
}

.margin-n6,
.margin-v-n6,
.margin-t-n6 {
    margin-top: -6px;
}

.margin-n6,
.margin-h-n6,
.margin-r-n6 {
    margin-right: -6px;
}

.margin-n6,
.margin-v-n6,
.margin-b-n6 {
    margin-bottom: -6px;
}

.margin-n6,
.margin-h-n6,
.margin-l-n6 {
    margin-left: -6px;
}

.margin-n7,
.margin-v-n7,
.margin-t-n7 {
    margin-top: -7px;
}

.margin-n7,
.margin-h-n7,
.margin-r-n7 {
    margin-right: -7px;
}

.margin-n7,
.margin-v-n7,
.margin-b-n7 {
    margin-bottom: -7px;
}

.margin-n7,
.margin-h-n7,
.margin-l-n7 {
    margin-left: -7px;
}

.margin-n8,
.margin-v-n8,
.margin-t-n8 {
    margin-top: -8px;
}

.margin-n8,
.margin-h-n8,
.margin-r-n8 {
    margin-right: -8px;
}

.margin-n8,
.margin-v-n8,
.margin-b-n8 {
    margin-bottom: -8px;
}

.margin-n8,
.margin-h-n8,
.margin-l-n8 {
    margin-left: -8px;
}

.margin-n9,
.margin-v-n9,
.margin-t-n9 {
    margin-top: -9px;
}

.margin-n9,
.margin-h-n9,
.margin-r-n9 {
    margin-right: -9px;
}

.margin-n9,
.margin-v-n9,
.margin-b-n9 {
    margin-bottom: -9px;
}

.margin-n9,
.margin-h-n9,
.margin-l-n9 {
    margin-left: -9px;
}

.margin-n10,
.margin-v-n10,
.margin-t-n10 {
    margin-top: -10px;
}

.margin-n10,
.margin-h-n10,
.margin-r-n10 {
    margin-right: -10px;
}

.margin-n10,
.margin-v-n10,
.margin-b-n10 {
    margin-bottom: -10px;
}

.margin-n10,
.margin-h-n10,
.margin-l-n10 {
    margin-left: -10px;
}

.margin-n11,
.margin-v-n11,
.margin-t-n11 {
    margin-top: -11px;
}

.margin-n11,
.margin-h-n11,
.margin-r-n11 {
    margin-right: -11px;
}

.margin-n11,
.margin-v-n11,
.margin-b-n11 {
    margin-bottom: -11px;
}

.margin-n11,
.margin-h-n11,
.margin-l-n11 {
    margin-left: -11px;
}

.margin-n12,
.margin-v-n12,
.margin-t-n12 {
    margin-top: -12px;
}

.margin-n12,
.margin-h-n12,
.margin-r-n12 {
    margin-right: -12px;
}

.margin-n12,
.margin-v-n12,
.margin-b-n12 {
    margin-bottom: -12px;
}

.margin-n12,
.margin-h-n12,
.margin-l-n12 {
    margin-left: -12px;
}

/* insert additional classes as needed */

.margin-0,
.margin-v-0,
.margin-t-0 {
    margin-top: 0px;
}

.margin-0,
.margin-h-0,
.margin-r-0 {
    margin-right: 0px;
}

.margin-0,
.margin-v-0,
.margin-b-0 {
    margin-bottom: 0px;
}

.margin-0,
.margin-h-0,
.margin-l-0 {
    margin-left: 0px;
}

.margin-1,
.margin-v-1,
.margin-t-1 {
    margin-top: 1px;
}

.margin-1,
.margin-h-1,
.margin-r-1 {
    margin-right: 1px;
}

.margin-1,
.margin-v-1,
.margin-b-1 {
    margin-bottom: 1px;
}

.margin-1,
.margin-h-1,
.margin-l-1 {
    margin-left: 1px;
}

.margin-2,
.margin-v-2,
.margin-t-2 {
    margin-top: 2px;
}

.margin-2,
.margin-h-2,
.margin-r-2 {
    margin-right: 2px;
}

.margin-2,
.margin-v-2,
.margin-b-2 {
    margin-bottom: 2px;
}

.margin-2,
.margin-h-2,
.margin-l-2 {
    margin-left: 2px;
}

.margin-3,
.margin-v-3,
.margin-t-3 {
    margin-top: 3px;
}

.margin-3,
.margin-h-3,
.margin-r-3 {
    margin-right: 3px;
}

.margin-3,
.margin-v-3,
.margin-b-3 {
    margin-bottom: 3px;
}

.margin-3,
.margin-h-3,
.margin-l-3 {
    margin-left: 3px;
}

.margin-4,
.margin-v-4,
.margin-t-4 {
    margin-top: 4px;
}

.margin-4,
.margin-h-4,
.margin-r-4 {
    margin-right: 4px;
}

.margin-4,
.margin-v-4,
.margin-b-4 {
    margin-bottom: 4px;
}

.margin-4,
.margin-h-4,
.margin-l-4 {
    margin-left: 4px;
}

.margin-5,
.margin-v-5,
.margin-t-5 {
    margin-top: 5px;
}

.margin-5,
.margin-h-5,
.margin-r-5 {
    margin-right: 5px;
}

.margin-5,
.margin-v-5,
.margin-b-5 {
    margin-bottom: 5px;
    min-height: 5px;
}

.margin-5,
.margin-h-5,
.margin-l-5 {
    margin-left: 5px;
}

.margin-6,
.margin-v-6,
.margin-t-6 {
    margin-top: 6px;
}

.margin-6,
.margin-h-6,
.margin-r-6 {
    margin-right: 6px;
}

.margin-6,
.margin-v-6,
.margin-b-6 {
    margin-bottom: 6px;
}

.margin-6,
.margin-h-6,
.margin-l-6 {
    margin-left: 6px;
}

.margin-7,
.margin-v-7,
.margin-t-7 {
    margin-top: 7px;
}

.margin-7,
.margin-h-7,
.margin-r-7 {
    margin-right: 7px;
}

.margin-7,
.margin-v-7,
.margin-b-7 {
    margin-bottom: 7px;
}

.margin-7,
.margin-h-7,
.margin-l-7 {
    margin-left: 7px;
}

.margin-8,
.margin-v-8,
.margin-t-8 {
    margin-top: 8px;
}

.margin-8,
.margin-h-8,
.margin-r-8 {
    margin-right: 8px;
}

.margin-8,
.margin-v-8,
.margin-b-8 {
    margin-bottom: 8px;
}

.margin-8,
.margin-h-8,
.margin-l-8 {
    margin-left: 8px;
}

.margin-9,
.margin-v-9,
.margin-t-9 {
    margin-top: 9px;
}

.margin-9,
.margin-h-9,
.margin-r-9 {
    margin-right: 9px;
}

.margin-9,
.margin-v-9,
.margin-b-9 {
    margin-bottom: 9px;
}

.margin-9,
.margin-h-9,
.margin-l-9 {
    margin-left: 9px;
}

.margin-10,
.margin-v-10,
.margin-t-10 {
    margin-top: 10px;
}

.margin-10,
.margin-h-10,
.margin-r-10 {
    margin-right: 10px;
}

.margin-10,
.margin-v-10,
.margin-b-10 {
    margin-bottom: 10px;
}

.margin-10,
.margin-h-10,
.margin-l-10 {
    margin-left: 10px;
}

.margin-11,
.margin-v-11,
.margin-t-11 {
    margin-top: 11px;
}

.margin-11,
.margin-h-11,
.margin-r-11 {
    margin-right: 11px;
}

.margin-11,
.margin-v-11,
.margin-b-11 {
    margin-bottom: 11px;
}

.margin-11,
.margin-h-11,
.margin-l-11 {
    margin-left: 11px;
}

.margin-12,
.margin-v-12,
.margin-t-12 {
    margin-top: 12px;
}

.margin-12,
.margin-h-12,
.margin-r-12 {
    margin-right: 12px;
}

.margin-12,
.margin-v-12,
.margin-b-12 {
    margin-bottom: 12px;
}

.margin-12,
.margin-h-12,
.margin-l-12 {
    margin-left: 12px;
}

.margin-13,
.margin-v-13,
.margin-t-13 {
    margin-top: 13px;
}

.margin-13,
.margin-h-13,
.margin-r-13 {
    margin-right: 13px;
}

.margin-13,
.margin-v-13,
.margin-b-13 {
    margin-bottom: 13px;
}

.margin-13,
.margin-h-13,
.margin-l-13 {
    margin-left: 13px;
}

.margin-14,
.margin-v-14,
.margin-t-14 {
    margin-top: 14px;
}

.margin-14,
.margin-h-14,
.margin-r-14 {
    margin-right: 14px;
}

.margin-14,
.margin-v-14,
.margin-b-14 {
    margin-bottom: 14px;
}

.margin-14,
.margin-h-14,
.margin-l-14 {
    margin-left: 14px;
}

.margin-15,
.margin-v-15,
.margin-t-15 {
    margin-top: 15px;
}

.margin-15,
.margin-h-15,
.margin-r-15 {
    margin-right: 15px;
}

.margin-15,
.margin-v-15,
.margin-b-15 {
    margin-bottom: 15px;
}

.margin-15,
.margin-h-15,
.margin-l-15 {
    margin-left: 15px;
}


/* insert additional classes as needed */

.margin-20,
.margin-v-20,
.margin-t-20 {
    margin-top: 20px;
}

.margin-20,
.margin-h-20,
.margin-r-20 {
    margin-right: 20px;
}

.margin-20,
.margin-v-20,
.margin-b-20 {
    margin-bottom: 20px;
}

.margin-20,
.margin-h-20,
.margin-l-20 {
    margin-left: 20px;
}


/* insert additional classes as needed */

.font-8 {
    font-size: 8px;
}

.font-9 {
    font-size: 9px;
}

.font-10 {
    font-size: 10px;
}

.font-11 {
    font-size: 11px;
}

.font-12 {
    font-size: 12px;
}

.font-13 {
    font-size: 13px;
}

.font-14 {
    font-size: 14px;
}

.font-15 {
    font-size: 15px;
}

.font-16 {
    font-size: 16px;
}

.font-17 {
    font-size: 17px;
}

.font-18 {
    font-size: 18px;
}

.font-19 {
    font-size: 19px;
}

.font-20 {
    font-size: 20px;
}

.font-21 {
    font-size: 21px;
}

.font-22 {
    font-size: 22px;
}

.font-23 {
    font-size: 23px;
}

.font-24 {
    font-size: 24px;
}

.font-25 {
    font-size: 25px;
}

.font-26 {
    font-size: 26px;
}

.font-27 {
    font-size: 27px;
}

.font-28 {
    font-size: 28px;
}

.font-29 {
    font-size: 29px;
}

.font-30 {
    font-size: 30px;
}

.font-31 {
    font-size: 31px;
}

.font-32 {
    font-size: 32px;
}

.font-33 {
    font-size: 33px;
}

.font-34 {
    font-size: 34px;
}

.font-35 {
    font-size: 35px;
}

.font-36 {
    font-size: 36px;
}

.font-37 {
    font-size: 37px;
}

.font-38 {
    font-size: 38px;
}

.font-39 {
    font-size: 39px;
}

.font-40 {
    font-size: 40px;
}

.font-41 {
    font-size: 41px;
}

.font-42 {
    font-size: 42px;
}

/* insert additional classes as needed */


/* decorating classes */

.header-background {
    background: var(--c-primary);
}

.header-text {
    color: var(--c-grey-3);
}

.sandbox .header-background {
    background: var(--c-secondary-dark);
}

.sandbox .header-text {
    color: var(--c-grey-11);
}

.main-nav {
    height: 38px;
    padding-left: 19px;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 14px;
    width: 100%;
    background: var(--c-primary);
}

.loading, .browser-not-supported, .blank-page {
    text-align: center;
    position: absolute;
    background-position: center;
    background-size: cover;
    background-image: url("https://amperity-static-assets.s3-us-west-2.amazonaws.com/resources/img/login-dark.svg");
    background-color: #0c0c0c;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
}

.loading-content {
    width: 310px;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.loading-content .logo {
    margin-bottom: 30px;
    height: 55px
}


/* login errors */

.login-error {
    width: 550px;
    height: 100%;
    margin: 110px auto 0;
    padding: 0 20px;
}

.login-alert-icon {
    color: var(--c-prime-gray);
    font-size: 37px;
    padding: 4px;
}

.login-error > h1 {
    color: var(--c-text-dark);
    font-family: 'MarkPro-Regular', sans-serif;
    font-size: 26px;
    margin: 13px 0 40px;
}

.login-error > h2 {
    color: var(--c-text-dark);
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
}

.login-error > p {
    line-height: 1.33;
}

.login-error ul > li {
    margin: 2px 0;
    padding-left: 5px;
}

.login-error-toggle-icon {
    color: var(--c-text);
    margin-right: 5px;
    width: 10px;
}

.login-error strong {
    font-weight: 500;
}



/* misc classes */

.material-icons {
    font-size: 16px !important;
}

.clickable {
    cursor: pointer;
    z-index: 1;
}

.revealonhover, .revealonactive, .revealonparenthover {
    z-index: 1;
    opacity: 0.4;
}

.showonhover, .showonparenthover {
    z-index: 1;
    opacity: 0;
}

.revealonhover-2, .revealonactive-2, .revealonparenthover-2 {
    z-index: 1;
    opacity: 0.2;
}

.revealonhover:hover, .revealonhover-2:hover, .grid-row.active .revealonactive, .grid-row.active .revealonactive-2,
.showonhover:hover, :hover > .showonparenthover, :hover > .revealonparenthover, :hover > .revealonparenthover-2  {
    opacity: 1;
    z-index: 999; /* this caused me a bit of grief! */
    transition: all 0.2s;
}

input[type=text]:hover,
input[type=text]:focus {
    border: 1px solid #777;
}

.narrow-input.narrow-input.narrow-input.narrow-input {
    height: 20px;
}

@keyframes flip-over-animation-keyframes {
    0% {
        transform:rotate(0deg);
    }
    95% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(180deg);
    }
}

.flip-over-animation {
  position: absolute;
  -webkit-animation:flip-over-animation-keyframes 2s linear infinite;
  -moz-animation:flip-over-animation-keyframes 2s linear infinite;
  animation:flip-over-animation-keyframes 2s linear infinite;
}

@keyframes fa-hourglass-keyframes {
  0% {
    content: "\f251";
  }
  40% {
    content: "\f252";
  }
  80% {
    content: "\f253";
  }
  100% {
    content: "\f253";
  }
}

.fa-hourglass-animated {
  display: inline-block;
  -webkit-animation:flip-over-animation-keyframes 2s ease infinite;
  -moz-animation:flip-over-animation-keyframes 2s ease infinite;
  animation: flip-over-animation-keyframes 2s ease infinite ;

}

.fa-hourglass-animated:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f251";
  -webkit-animation: fa-hourglass-keyframes 2s linear infinite ;
  -moz-animation: fa-hourglass-keyframes 2s linear infinite ;
  animation: fa-hourglass-keyframes 2s linear infinite ;
}

.error-messages {
  color: rgb(156, 6, 6);
}


.print-only {
    display:none;
}

/*
   Percy.io is the tool that we use for visual regression tests.
   CSS defined in this block will only be active when content
   is rendered in Percy, so this CSS can be used to stabilize
   dynamic content that would otherwise result in visual
   diffs.
*/
@media only percy {
  .percy-dynamic-text {
    visibility: hidden;
    line-height: 0;
    text-indent: -9999px;
  }

  .percy-dynamic-text::after {
    content: "dynamic";
    line-height: initial;
    display: block;
    visibility: initial;
    text-indent: initial;
  }

  .percy-notifications table {
    display: none;
  }
}

.page {
    margin-bottom: 40px;
}