/* vim: set sts=4 sw=4 et ai: */

body {
    font-size: 15px;
    font-family: 'Lato', sans-serif;
    color: #333;
}

button,
input,
select,
.lato,
.sans-serif {
    font-family: 'Lato', sans-serif;
}

.cerapro-black {
	font-family: CeraPRO-Black;
}
.cerapro-bold {
	font-family: CeraPRO-Bold;
}
.cerapro-bolditalic {
	font-family: CeraPro-BoldItalic;
}
.cerapro-light {
	font-family: CeraPro-Light;
}
.cerapro-blackitalic {
	font-family: CeraPro-BlackItalic;
}
.cerapro-lightitalic {
	font-family: CeraPro-LightItalic;
}
.cerapro-medium {
	font-family: CeraPro-Medium;
}
.cerapro-mediumitalic {
	font-family: CeraPro-MediumItalic;
}
.cerapro-regular {
	font-family: CeraPro-Regular;
}
.cerapro-regularitalic {
	font-family: CeraPro-RegularItalic;
}
.cerapro-thinitalic {
	font-family: CeraPro-ThinItalic;
}
.cerapro-thin {
	font-family: CeraPro-Thin;
}

textarea, select, input, button { outline: none; }

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.striped--ultra-light:nth-child(odd) { background-color: rgb(251,251,251); }
.striped--ultra-light-even:nth-child(even) { background-color: rgb(251,251,251); }

.top-3 {
    top: 4rem;
}

.b-hover:hover {
    border-style: solid;
}
.bg-grad-gray {
background: rgb(229,229,228);
background: linear-gradient(180deg, rgba(229,229,228,1) 0%, rgba(213,213,213,1) 100%);
}

.bg-grad-light-gray {
background: rgb(229,229,228);
background: linear-gradient(180deg, rgba(244,244,243,1) 0%, rgba(251,251,251,1) 100%);
}

.row-hover-bg-black-10:hover > td {
    background-color: rgba(0, 0, 0, .1);
}

.spin {
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@keyframes pulse {
    0% {
        opacity: 0.4;
    }
    100% {
        opacity: 1.0;
    }
}

.pulse {
  -webkit-animation: pulse 1s infinite alternate;
  animation: pulse 1s infinite alternate;
}

.pe-none {
    pointer-events: none;
}

.hover-row-bg-light-gray:hover td {
    background-color: #EEEEEE;
}

.hover-row-bg-near-white:hover td {
    background-color: #F4F4F4;
}

.hover-row-bg-lightest-blue:hover td {
    background-color: #CDECFF;
}

.hover-row-bg-washed-blue:hover td {
    background-color: #F6FFFE;
}

input:invalid {
    box-shadow: none;
}

.invalid-b--dark-red:invalid {
    border-color: #E7040F;
}

.sticky {
    position: -webkit-sticky;
    position: sticky;
}

.loader {
  display: inline-flex;
  flex-wrap: wrap;
  width: 90px;
  height: 90px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(45deg) rotate(45deg);
          transform: rotateX(45deg) rotate(45deg);
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background: #FED750;
  box-shadow: 112.5px 112.5px 20px #000;
  -webkit-animation: move 2s ease-in-out infinite both;
          animation: move 2s ease-in-out infinite both;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.box:nth-child(1) {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.box:nth-child(2) {
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}
.box:nth-child(3) {
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}
.box:before, .box:after {
  display: block;
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
}
.box:before {
  top: 100%;
  left: 0;
  background: #E6A32F;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
}
.box:after {
  top: 0;
  left: 100%;
  background: #C87932;
  -webkit-transform-origin: center left;
          transform-origin: center left;
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
}

.focus-bg-washed-blue:focus {
    background-color: #F6FFFE;
}

@-webkit-keyframes move {
  0%, 100% {
    -webkit-transform: none;
            transform: none;
  }
  12.5% {
    -webkit-transform: translate(30px, 0);
            transform: translate(30px, 0);
  }
  25% {
    -webkit-transform: translate(60px, 0);
            transform: translate(60px, 0);
  }
  37.5% {
    -webkit-transform: translate(60px, 30px);
            transform: translate(60px, 30px);
  }
  50% {
    -webkit-transform: translate(60px, 60px);
            transform: translate(60px, 60px);
  }
  62.5% {
    -webkit-transform: translate(30px, 60px);
            transform: translate(30px, 60px);
  }
  75% {
    -webkit-transform: translate(0, 60px);
            transform: translate(0, 60px);
  }
  87.5% {
    -webkit-transform: translate(0, 30px);
            transform: translate(0, 30px);
  }
}

@keyframes move {
  0%, 100% {
    -webkit-transform: none;
            transform: none;
  }
  12.5% {
    -webkit-transform: translate(30px, 0);
            transform: translate(30px, 0);
  }
  25% {
    -webkit-transform: translate(60px, 0);
            transform: translate(60px, 0);
  }
  37.5% {
    -webkit-transform: translate(60px, 30px);
            transform: translate(60px, 30px);
  }
  50% {
    -webkit-transform: translate(60px, 60px);
            transform: translate(60px, 60px);
  }
  62.5% {
    -webkit-transform: translate(30px, 60px);
            transform: translate(30px, 60px);
  }
  75% {
    -webkit-transform: translate(0, 60px);
            transform: translate(0, 60px);
  }
  87.5% {
    -webkit-transform: translate(0, 30px);
            transform: translate(0, 30px);
  }
}

.user-menu-pointer:before {
    content: "";
    position: absolute;
    left: calc(100% - 40px);
    top: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #F4F4F4;
}

.trans-fade-in {
    transition: opacity 1s;
    opacity: 1;
}

.w-05 { width: 5%; }
.w-15 { width: 15%; }
.w-35 { width: 35%; }
.w-45 { width: 45%; }
.w-55 { width: 55%; }
.w-65 { width: 65%; }
.w-75 { width: 75%; }
.w-85 { width: 85%; }
.w-95 { width: 95%; }

.shadow-10 {
	-webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.45);
	-moz-box-shadow:0 0 15px rgba(0, 0, 0, 0.45);
	box-shadow:0 0 20px rgba(0, 0, 0, 0.45);
}

.shadow-11 {
    box-shadow: 4px 4px 20px 7px rgba(0, 0, 0, 0.09);
}

.spinner {
    width: 70px;
    text-align: center;
}

.spinner > div {
    width: 18px;
    height: 18px;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner.small > div {
    width: 10px;
    height: 10px;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

.forwards {
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.invisible {
    visibility: hidden;
}

/** Rightly Branding **/

.rightly-blue {
    color: rgb(52, 111, 230)
}

.bg-rightly-blue {
    background-color: rgb(52, 111, 230)
}

.b--rightly-blue {
    border-color: rgb(52, 111, 230)
}

.rightly-green {
    color: rgb(43, 158, 123)
}

.bg-rightly-green {
    background-color: rgb(43, 158, 123)
}

.b--rightly-green {
    border-color: rgb(43, 158, 123)
}

.rightly-light-blue {
    color: rgb(235, 239, 251);
}

.bg-rightly-light-blue {
    background-color: rgb(235, 239, 251);
}

.b--rightly-light-blue {
    border-color: rgb(235, 239, 251);
}

.status-green {
    color: rgb(219, 241, 229);
}

.bg-status-green {
    background-color: rgb(219, 241, 229);
}

.b--status-green {
    border-color: rgb(219, 241, 229);
}

.bg-dark-green {
    background-color: rgb(104, 170, 142);
}

.status-yellow {
    color: rgb(250, 239, 207);
}

.bg-status-yellow {
    background-color: rgb(250, 239, 207);
}

.b--status-yellow {
    border-color: rgb(250, 239, 207);
}

.textbox-color {
    color: rgb(249, 250, 252);
}

.bg-textbox {
    background-color: rgb(249, 250, 252);
}

.b--textbox-frame {
    border-color: rgb(229, 228, 234);
}

.p--textbox {
    padding: 10px 20px;
}

.p--pill-button {
    padding: 12px 18px;
}

.min-h3 {
    min-height: 4rem;
}

.bg-rightly-blue-kb-bg {
    background-color: rgb(224, 240, 254)
}

.shadow-dropdown {
    -webkit-box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.18);
    -moz-box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.18);
    box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.18);
}
.bg-rightly-light-gray {
    background-color: rgb(249, 250, 252);
}

.context-popout-shadow {
    box-shadow: -7px 1px 20px 0px rgba(0,0,0,.1);
}

input[type="email"].rightly-error:invalid,
input[type="password"].rightly-error:invalid,
input[type="text"].rightly-error:invalid {
    background-color: rgb(253, 245, 246);
    border-color: rgb(196, 61, 61);
    color: rgb(196, 61, 61);
}