html, body {
    margin-top: 0 !important;
    margin-left: 0 !important;
    background-color: #eeeeee !important;
    /* font-family: arial, verdana, sans-serif; */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.15 !important;
    font-size: 14px;
}

h1, h2, h3, h4, h5 {    
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

/* bootstrap overrides */
/* a v small button - like bs btn-sm */
.btn-mini {
    padding: .1rem .35rem !important;
    font-size: .75rem !important;
    border-radius: .2rem !important;
}
/* end of bootstrap overrides */

.hidden {
    display: none !important;
}

/* useful for hiding an icon but reserving the space */
.hide-before::before {
    display: none;
}

.invisible {
    visibility: hidden !important;
}

.admin .header {
    flex-basis: 95%;
    padding: .5em;
    height: 2em;
    /* background-color: gold; */
    font-weight: bold;
}

/* grey border right / left */
.gbr {
    border-right: 2px solid #EEEEEE;
}
.gbr-1 {
    border-right: 1px solid lightgray;
}
.gbl {
    border-left: 2px solid #EEEEEE;
}

/* shadowy figures */
/* TODO: webkit box shadows */
.boxshadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.softBoxShadow {
    box-shadow: 0 0.2em 0.2em 0 rgba(0, 0, 0, 0.2), 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.19);
}
.softerBoxShadow {
    box-shadow: 0 0.1em 0.2em 0 rgba(0, 0, 0, 0.2), 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.1);
}
/* !important avoids the bootstrap blue outline on focus - helpful on .btn elements */
.hardBoxShadow {
    box-shadow: 0 0.1em 0 0 rgba(0, 0, 0, 0.2), 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.19) !important;
}
.insetBoxShadow {
    box-shadow: inset 0 0.2em 0 0 rgba(0, 0, 0, 0.2), 0 0em 0em 0 rgba(0, 0, 0, 0.19);
}
/* fade from orange to gray over n secs */
.orangeToGray5sec {
    box-shadow: 0 0.1em 0.2em 0 rgba(255, 153, 0, 0.4), 0 0.1em 0.5em 0 rgba(255, 153, 0, 0.2);
    opacity: 1;
    transition: opacity 5s ease-out;
}
.orangeToGray10sec {
    box-shadow: 0 0.1em 0.2em 0 rgba(255, 153, 0, 0.4), 0 0.1em 0.5em 0 rgba(255, 153, 0, 0.2);
    opacity: 1;
    transition: opacity 10s ease-out;
}
.orangeToGray15sec {
    box-shadow: 0 0.1em 0.2em 0 rgba(255, 153, 0, 0.4), 0 0.1em 0.5em 0 rgba(255, 153, 0, 0.2);
    opacity: 1;
    transition: opacity 15s ease-out;
}
.insetSoftBoxShadow {
    box-shadow: inset 0 0.1em .5em 0 rgba(0, 0, 0, 0.2), 0 0em 0em 0 rgba(0, 0, 0, 0.19);
}
.largeOffsetShadow {
    box-shadow: -2em 2em 1em 0 rgba(0,0,0,0.2), 0 2em 2em 0 rgba(0,0,0,0.19);
}

/* user can't select text in elements with this class */
.unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* title divs - should be one on every page */
/* .title {

} */

/* warning messages */
.warn {
    /* clear: both; */
    max-width: 100%;
}

.warn span {
    padding: 10px;
    color: #ff0000;
}

/* global table stuff */
.nixor-table {
    background-color: white;
}

.nixor-table-header {
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
}

.nixor-table-header th {
    background-color: lightgray;
}

.nixor-table-header th:first-child {
    border-top-left-radius: .5em;
}

.nixor-table-header th:last-child {
    border-top-right-radius: .5em;
}

/* a tidy place to show a static message */
.nixor-well {
    display: flex;
    flex-direction: column;
    background-color: #f3f3f3;
    border: 1px solid lightgray;
    border-radius: .5em;
    padding: .5em;
    width: 50%;
}
@media only screen and (max-width: 768px) {
    .nixor-well {
        width: 100%;
    }
}

/* flippin' cards */
.nixor-card {
    transform-style: preserve-3d;
    transition: all 1s ease-in-out;
}
.nixor-card-front {
    backface-visibility: hidden;
}
.nixor-card-back {
    backface-visibility: hidden;
    display: none;
    transform: rotateY(180deg);
}

/* example in ProcessTasks.html next to pie chart */
.infoBadge {
    display: flex;
    border: 1px solid gray;
    border-radius: .5em;
    align-items: center;
}
.infoBadge span:nth-child(1) {
    background-color: lightgray;
    border-top-left-radius: .5em;
    border-bottom-left-radius: .5em;
    border-right: 1px solid gray;
    flex-basis: 20%;
    font-weight: 500;
    padding: .25em;
    align-self: stretch;
}
.infoBadge span:nth-child(2) {
    background-color: white;
    border-top-right-radius: .5em;
    border-bottom-right-radius: .5em;
    flex-grow: 1;
    text-align: left;
    padding: .25em;
}

/* ... */
.half-panel {
    flex-basis: 50%;
}

/* Nav-tab stuff - as seen in scheduler modal */
/* copying bootstrap tab groups as the stock css 
   doesn't give the desired effect */
.nav-tabs {
    border-bottom: 1px solid #ddd !important;
}
.nav {
    padding-left: 0 !important;
    margin-bottom: 0 !important;
    list-style: none !important;
}

/* Note the float!
   And the other none-flex attrs */

.nav-tabs>li {
    float: left;
    margin-bottom: -1px;
}
.nav>li {
    position: relative;
    display: block;
}

/* note the line height, might break flexiness */
.nav-tabs>li>a {
    margin-right: 2px !important;
    line-height: 1.42857143 !important;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0 !important;
}
.nav-tabs>li>a.active {
    font-weight: 600;
}
.nav>li>a {
    color: #555;
    position: relative;
    display: block;
    padding: 10px 15px;
}
/* magic */
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent !important;
}

/* flipswitch style checkbox from - https://proto.io/freebies/onoff/ */
.onoffswitch {
    position: relative; width: 55px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    height: 20px; padding: 0; line-height: 20px;
    border: 0px solid #FFFFFF; border-radius: 30px;
    background-color: #9E9E9E;
}
.onoffswitch-label:before {
    content: "";
    display: block; width: 30px; margin: -5px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 31px;
    border-radius: 30px;
    box-shadow: 0 6px 12px 0px #757575;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
    background-color: #FFA600;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
   border-color: #FFA600;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
    right: 0px; 
    background-color: #FFA600; 
    box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);
}
.toggleBoxWrapper {
    display: flex;
    flex-direction: row;
    font-size: 80%;
    align-items: flex-end;
}
/* Gives the switch disabled styling while leaving the toggle in the correct position */
.disabledToggle {
    background-color: lightgray !important;
}
.disabledToggle:hover {
    cursor: default;
}

/* re-styled checkboxes from - https://www.w3schools.com/howto/howto_css_custom_checkbox.asp */
/* Customize the label (the container) */
.customCheckBox {
    display: inline;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* Hide the browser's default checkbox */
.customCheckBox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: -.1em;
    height: 2em;
    width: 2em;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: .2em;
}
.stackedCheck {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* On mouse-over, add a grey background color */
.customCheckBox:hover input ~ .checkmark {
    background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.customCheckBox input:checked ~ .checkmark {
    background-color: #FFA600;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the checkmark when checked */
.customCheckBox input:checked ~ .checkmark:after {
    display: block;
}
/* Style the checkmark/indicator */
.customCheckBox .checkmark:after {
    left: .65em;
    top: 0.25em;
    width: .5em;
    height: 1em;
    border: solid white;
    border-width: 0 4px 4px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.customCheckBox .miniCheckmark:after {
    left: 0.35em;
    top: 0.15em;
    width: .25em;
    height: .5em;
    border-width: 0 3px 3px 0;
}

/* input focus in brand colours */
textarea:focus,
input:focus,
select:focus {
    /* border: 1px solid rgba(255, 174, 0, 0.5) !important; */
    border: 1px solid orange !important;
    box-shadow: 0 0 0 .2rem rgba(255, 183, 0, 0.25) !important;
    outline-color: rgba(255, 183, 0, 0.25) !important;
}

/* Animations from animate.css - https://github.com/daneden/animate.css/blob/master/animate.css */
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  
  .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  
  .animated.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }
  
  .animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
  }
  
  .animated.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
  }
  
  .animated.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
  }
  
  .animated.delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
  }
  
  .animated.fast {
    -webkit-animation-duration: 800ms;
    animation-duration: 800ms;
  }
  
  .animated.faster {
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
  }
  
  .animated.slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
  }
  
  .animated.slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
  }
  
  @media (prefers-reduced-motion) {
    .animated {
      -webkit-animation: unset !important;
      animation: unset !important;
      -webkit-transition: none !important;
      transition: none !important;
    }
  }

  @-webkit-keyframes slideOutUp {
    from {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    to {
      visibility: hidden;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
  }
  
  @keyframes slideOutUp {
    from {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    to {
      visibility: hidden;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
  }
  
  .slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp;
  }

  @-webkit-keyframes slideInUp {
    from {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
      visibility: visible;
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes slideInUp {
    from {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
      visibility: visible;
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  .slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
  }

  @-webkit-keyframes slideInDown {
    from {
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
      visibility: visible;
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes slideInDown {
    from {
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
      visibility: visible;
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  .slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
  }

  @-webkit-keyframes slideOutDown {
    from {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    to {
      visibility: hidden;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  }
  
  @keyframes slideOutDown {
    from {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    to {
      visibility: hidden;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  }
  
  .slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown;
  }

  @-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}
  
@keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}
  
.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown;
}

/* bounce in - drops from top and bounces */
@-webkit-keyframes bounceInDown {
    20% {
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
  
@keyframes bounceInDown {
    20% {
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
  
.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}

.slideInLeft {
    animation-duration: 1s;
    animation-name: slideInLeft;
}

/* @keyframes slideInLeft {
    from {
        margin-left: 100%;
        width: 300%; 
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
} */

.slideInRight {
    animation-duration: 1s;
    animation-name: slideInRight;
}

/* @keyframes slideInRight {
    from {
        margin-right: 100%;
        width: 300%;
    }

    to {
        margin-right: 0%;
        width: 100%;
    }
} */

/* Shaking stuff - see Global.shakeElem() usage */
@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0)  rotate(0deg);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0)  rotate(-1deg);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0)  rotate(1deg);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0)  rotate(0deg);
    }
}
.shake1s {
    animation: shake 1s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
.shake2s {
    animation: shake 2s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
.shakeHalfs {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
.shake3qs {
    animation: shake .75s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Wobble - like shake but with only rotation */
@keyframes wobble {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.wobbleInf {
    animation: wobble 0.5s;
    animation-iteration-count: infinite;
}

/* simple toggles from - https://www.w3schools.com/howto/howto_css_switch.asp */
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    /* width: 60px;
    height: 34px; */
    width: 3em;
    height: 1.5em;
    margin-bottom: 0;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.switch-slider:before {
    position: absolute;
    content: "";
    /* height: 26px;
    width: 26px; */
    height: 1.25em;
    width: 1.25em;
    /* left: 4px; */
    left: .25em;
    /* bottom: 4px; */
    bottom: .15em;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .switch-slider {
    background-color: rgb(255, 153, 0);
}

input:focus + .switch-slider {
    box-shadow: 0 0 1px rgb(255, 153, 0);
}

input:checked + .switch-slider:before {
    /* -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px); */
    -webkit-transform: translateX(1.3em);
    -ms-transform: translateX(1.3em);
    transform: translateX(1.3em);
}

/* Rounded sliders */
.switch-slider.round {
    /* border-radius: 34px; */
    border-radius: 1em;
}

.switch-slider.round:before {
    border-radius: 50%;
}

/* warning text area */
.warningText {
    border-radius: .5em;
    padding: .5em;
    -webkit-box-shadow: inset 0 4px 6px rgba(0,0,0,.08);
    box-shadow: inset 0 4px 6px rgba(0,0,0,.08);
    background-color: #ffd6d6;
    border: 1px solid pink;
    font-weight: 500;
}

.shadowWrapper {
    border-radius: .5em;
}

#warningRow {
    font-size: 115%;
    font-weight: 550;
    color: orangered;
}

.dont-break-out {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* 
.showHelpButton:hover i {
    animation: blink 2s ease-in infinite;
}

.showNewItem:hover,
.hideHelpButton:hover,
.showHelpButton:hover,
.backButton:hover {
    transform: scale(1.1);
    box-shadow: 0 0.2em 0.2em 0 rgba(0, 0, 0, 0.2), 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.19);
} */

.backButton:hover i {
    transition: transform .3s;
    transform: rotate(-35deg);
}


@keyframes shrinkToNothing {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(.5);
    }
    100% {
        transform: scaleY(0);
    }
}

.shrinkToNothing {
    animation: shrinkToNothing .35s;
}

@keyframes growFromNothing {
    0% {
        transform: scaleY(0);
    }
    50% {
        transform: scaleY(.5);
    }
    100% {
        transform: scaleY(1);
    }
}

.growFromNothing {
    animation: growFromNothing .35s;
}

@keyframes blink {
    0% {
        transform: scale(1);
    }
    5% {
        transform: scale(1, 0);
    }
    10% {
        transform: scale(1);
    }
}

@keyframes pulse-1 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1, 1.1);
    }
    100% {
        transform: scale(1);
    }
}
.hover-pulse-1:hover,
.hover-pulse-i-1:hover i {
    animation: pulse-1 .5s ease-in-out 1;
}
.pulse-1 {
    animation: pulse-1 .5s ease-in-out 1;
}

@keyframes pulse-15 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.25, 1.25);
    }
    100% {
        transform: scale(1);
    }
}
.hover-pulse-15:hover,
.hover-pulse-i-15:hover i {
    animation: pulse-15 .5s ease-in-out 1;
}
.pulse-15 {
    animation: pulse-15 .5s ease-in-out 1;
}

@keyframes pulse-2 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5, 1.5);
    }
    100% {
        transform: scale(1);
    }
}
.hover-pulse-2:hover,
.hover-pulse-i-2:hover i {
    animation: pulse-2 .5s ease-in-out 1;
}
.pulse-2 {
    animation: pulse-2 .5s ease-in-out 1;
}

.hover-grow-i:hover i,
.hover-grow:hover {
    transform: scale(1.2);
    transition-timing-function: ease-in;
    transition-duration: .2s;
}
.hover-grow-i-1:hover i,
.hover-grow-1:hover {
    transform: scale(1.1);
    transition-timing-function: ease-in;
    transition-duration: .2s;
}
.hover-grow-i-2:hover i,
.hover-grow-2:hover {
    transform: scale(1.3);
    transition-timing-function: ease-in;
    transition-duration: .2s;
}

/* Does this need the transition-timing-function like above? */
.hover-grow-shadow:hover {
    transform: scale(1.2);
    box-shadow: 0 0.2em 0.2em 0 rgba(0, 0, 0, 0.2), 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.19);
}
.hover-grow-shadow-1:hover {
    transform: scale(1.1);
    box-shadow: 0 0.2em 0.2em 0 rgba(0, 0, 0, 0.2), 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.19);
}
.hover-grow-shadow-0:hover {
    transform: scale(1);
    box-shadow: 0 0.2em 0.2em 0 rgba(0, 0, 0, 0.2), 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.19);
}

.loadingModalContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.loadingModalContent span {
    text-align: center;
}

.sortingHat {
    border: 1px solid gray;
    border-radius: .5em;
    display: flex;
    flex-direction: column;
    padding: 1em;
}
/* First div in the sorting hat is everything but the title h tag */
.sortingHat > div {
    display: flex;
    flex-direction: column;
}
.sortingHat .rowSection {
    border: 1px solid lightgray;
    border-radius: .5em;
    padding: 1em;
}

.fit-content {
    width: fit-content !important;
    width: -moz-fit-content !important;
    width: -webkit-max-content !important; /* should be -min- ? */
}

.fit-content-height {
    height: fit-content !important;
    height: -moz-fit-content !important;
    height: -webkit-max-content !important;
    height: -ms-max-content !important;
}

.align-self-center {
    align-self: center;
}

.available {
    width: 100%;
    width: -moz-available;
    width: -webkit-available;
}

.available-height {
    height: 100%;
    height: -moz-available;
    height: -webkit-available;
}

.available-height-important {
    height: 100% !important;
    height: -moz-available !important;
    height: -webkit-available !important;
}

.available-important {
    width: 100% !important;
    width: -moz-available !important;
    width: -webkit-available !important;
}

.tile:focus {
    outline-style: none !important;
}
.tile:hover {
    cursor: pointer;
}

/* line spacing helpers */
.ls-0 {
    line-height: normal;
}
.ls-1 {
    line-height: 150%;
}
.ls-2 {
    line-height: 175%;
}
.ls-3 {
    line-height: 200%;
}

/* rotation helpers */
.rl-35 {
    transform: rotate(-35deg);
}

/* icon colours */
.redIcon {
    color: red;
}
.greenIcon {
    color: green;
}
.blueIcon {
    color: blue;
}
/* Get icons to align - DJH 07/07/20 */
.grayIcon {
    color: gray;
    width: 1.2rem;
    margin: 0 0.2rem;
}

.errorIcon {
    color: orange !important;
}

.white {
    background-color: white;
}

.yellowStripes {
    background-image: repeating-linear-gradient(145deg, rgba(255, 255, 0, .75), rgba(255, 255, 0, .75) 30px, rgba(255, 200, 30, .5) 30px, rgba(219, 216, 30, .5) 60px);
}

.whiteStripes {
    background-image: repeating-linear-gradient(145deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .45) 30px, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) 60px);
}

.grayText, .greyText {
    color: gray;
}

/* dev +/ live warning bar */
.stickyLiveBar {
    position: sticky;
    top: 0;
    text-decoration: underline;
}

.orangePulse {
    animation-name: orangePulseAnim;
    animation-duration: 3s;
    animation-iteration-count: 2;
}
@keyframes orangePulseAnim {
    50% {
        background-color: rgba(255, 195, 0, 0.5);
    }
}

.flex-grow-0 {
    flex-grow: 0 !important;
}

.center-text, .text-center {
    text-align: center !important;
}

.hover-grab-cursor:hover {
	cursor:-moz-grab;
	cursor:-webkit-grab;
	cursor:grab;
}
.hover-grab-cursor:active {
	cursor:-moz-grabbing !important;
	cursor:-webkit-grabbing !important;
	cursor:grabbing !important;
}

/* Tooltip stuff */
.helpTooltip i {
    color: gray;
}

/* generic spacers */
.space-h-1 {
    height: 1em !important;
}
.space-min-h-1 {
    min-height: 1em;
}

.font-weight-boldish {
    font-weight: 600;
}

/* custom BS well stuff */
.alertInner {
    display: flex;
}

.warningSection {
    display: flex;
    align-items: center;
}

.warnIconSection {
    font-size: 1.5rem !important;
}

/* Like .form-control without the 100% width */
.nixor-form-control {
    display: block;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.stdHeader {
    line-height: 170%;
    font-size: 110%;
}

.justEnd {
    justify-content: flex-end;
}

.hide-children *,
.hideChildren * {
    display: none;
}

.w-0,
.width-0 {
    width: 0 !important;
}

.p-0 {
    padding: 0 !important;
}

.m-0 {
    margin: 0 !important;
}

.b-0,
.no-border {
    border-width: 0 !important;
}

.no-hover:hover {
    cursor: default !important;
}

.flexRow {
    display: flex;
    flex-direction: row;
}

.flexHalf {
    flex-basis: 50%;
}

.justify-space-between {
    justify-content: space-between;
}

.userAvatar {
    height: 32px;
    width: 32px;
    margin-right: .5em;
    margin-top: -8px;
}

.disabled {
    background-color: lightgray;
}

.blur {
    filter: blur(4px);
}

/* hidden here and shown in notifications.css - loaded when needed */
#notificationWrapper {
    display: none;
}