/*-------------------------------*/
/*        CONFIG-VARIABLES       */
/*-------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
.co-fw--100 {
  font-weight: 100; }

/*-------------------------------*/
/*             MIXINS            */
/*-------------------------------*/
/*******************************
          Transitions
*******************************/
.transition {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-duration: 300ms;
  animation-duration: 300ms;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

/*******************************
            States
*******************************/
/* Animating */
.animating.transition {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  visibility: visible !important; }

/* Loading */
.loading.transition {
  position: absolute;
  top: -99999px;
  left: -99999px; }

/* Hidden */
.hidden.transition {
  display: none;
  visibility: hidden; }

/* Visible */
.visible.transition {
  display: block !important;
  visibility: visible !important;
  /*  backface-visibility: @backfaceVisibility;
    transform: @use3DAcceleration;*/ }

/* Disabled */
.disabled.transition {
  -webkit-animation-play-state: paused;
  animation-play-state: paused; }

/*******************************
          Variations
*******************************/
.looping.transition {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

/*******************************
          Transitions
*******************************/
/*
  Some transitions adapted from Animate CSS
  https://github.com/daneden/animate.css

  Additional transitions adapted from Glide
  by Nick Pettit - https://github.com/nickpettit/glide
*/
/*--------------
     Browse
---------------*/
.transition.browse {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms; }

.transition.browse.in {
  -webkit-animation-name: browseIn;
  animation-name: browseIn; }

.transition.browse.out,
.transition.browse.left.out {
  -webkit-animation-name: browseOutLeft;
  animation-name: browseOutLeft; }

.transition.browse.right.out {
  -webkit-animation-name: browseOutRight;
  animation-name: browseOutRight; }

/* In */
@-webkit-keyframes browseIn {
  0% {
    -webkit-transform: scale(0.8) translateZ(0px);
    transform: scale(0.8) translateZ(0px);
    z-index: -1; }
  10% {
    -webkit-transform: scale(0.8) translateZ(0px);
    transform: scale(0.8) translateZ(0px);
    z-index: -1;
    opacity: 0.7; }
  80% {
    -webkit-transform: scale(1.05) translateZ(0px);
    transform: scale(1.05) translateZ(0px);
    opacity: 1;
    z-index: 999; }
  100% {
    -webkit-transform: scale(1) translateZ(0px);
    transform: scale(1) translateZ(0px);
    z-index: 999; } }
@keyframes browseIn {
  0% {
    -webkit-transform: scale(0.8) translateZ(0px);
    transform: scale(0.8) translateZ(0px);
    z-index: -1; }
  10% {
    -webkit-transform: scale(0.8) translateZ(0px);
    transform: scale(0.8) translateZ(0px);
    z-index: -1;
    opacity: 0.7; }
  80% {
    -webkit-transform: scale(1.05) translateZ(0px);
    transform: scale(1.05) translateZ(0px);
    opacity: 1;
    z-index: 999; }
  100% {
    -webkit-transform: scale(1) translateZ(0px);
    transform: scale(1) translateZ(0px);
    z-index: 999; } }
/* Out */
@-webkit-keyframes browseOutLeft {
  0% {
    z-index: 999;
    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
    transform: translateX(0%) rotateY(0deg) rotateX(0deg); }
  50% {
    z-index: -1;
    -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
    transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); }
  80% {
    opacity: 1; }
  100% {
    z-index: -1;
    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
    transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
    opacity: 0; } }
@keyframes browseOutLeft {
  0% {
    z-index: 999;
    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
    transform: translateX(0%) rotateY(0deg) rotateX(0deg); }
  50% {
    z-index: -1;
    -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
    transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); }
  80% {
    opacity: 1; }
  100% {
    z-index: -1;
    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
    transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
    opacity: 0; } }
@-webkit-keyframes browseOutRight {
  0% {
    z-index: 999;
    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
    transform: translateX(0%) rotateY(0deg) rotateX(0deg); }
  50% {
    z-index: 1;
    -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
    transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); }
  80% {
    opacity: 1; }
  100% {
    z-index: 1;
    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
    transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
    opacity: 0; } }
@keyframes browseOutRight {
  0% {
    z-index: 999;
    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
    transform: translateX(0%) rotateY(0deg) rotateX(0deg); }
  50% {
    z-index: 1;
    -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
    transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); }
  80% {
    opacity: 1; }
  100% {
    z-index: 1;
    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
    transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
    opacity: 0; } }
/*--------------
     Drop
---------------*/
.drop.transition {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
      transform-origin: top center;
  -webkit-animation-duration: 400ms;
  animation-duration: 400ms;
  -webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
  animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); }

.drop.transition.in {
  -webkit-animation-name: dropIn;
  animation-name: dropIn; }

.drop.transition.out {
  -webkit-animation-name: dropOut;
  animation-name: dropOut; }

/* Drop */
@-webkit-keyframes dropIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); } }
@keyframes dropIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); } }
@-webkit-keyframes dropOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0); } }
@keyframes dropOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0); } }
/*--------------
      Fade
---------------*/
.transition.fade.in {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

.transition[class*="fade up"].in {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

.transition[class*="fade down"].in {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown; }

.transition[class*="fade left"].in {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft; }

.transition[class*="fade right"].in {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; }

.transition.fade.out {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

.transition[class*="fade up"].out {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp; }

.transition[class*="fade down"].out {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown; }

.transition[class*="fade left"].out {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft; }

.transition[class*="fade right"].out {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight; }

/* In */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10%);
    transform: translateY(10%); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10%);
    transform: translateY(10%); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(10%);
    transform: translateX(10%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(10%);
    transform: translateX(10%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-10%);
    transform: translateX(-10%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-10%);
    transform: translateX(-10%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }
/* Out */
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(5%);
    transform: translateY(5%); } }
@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(5%);
    transform: translateY(5%); } }
@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-5%);
    transform: translateY(-5%); } }
@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-5%);
    transform: translateY(-5%); } }
@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(5%);
    transform: translateX(5%); } }
@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(5%);
    transform: translateX(5%); } }
@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-5%);
    transform: translateX(-5%); } }
@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-5%);
    transform: translateX(-5%); } }
/*--------------
     Flips
---------------*/
.flip.transition.in,
.flip.transition.out {
  -webkit-animation-duration: 600ms;
  animation-duration: 600ms; }

.horizontal.flip.transition.in {
  -webkit-animation-name: horizontalFlipIn;
  animation-name: horizontalFlipIn; }

.horizontal.flip.transition.out {
  -webkit-animation-name: horizontalFlipOut;
  animation-name: horizontalFlipOut; }

.vertical.flip.transition.in {
  -webkit-animation-name: verticalFlipIn;
  animation-name: verticalFlipIn; }

.vertical.flip.transition.out {
  -webkit-animation-name: verticalFlipOut;
  animation-name: verticalFlipOut; }

/* In */
@-webkit-keyframes horizontalFlipIn {
  0% {
    -webkit-transform: perspective(2000px) rotateY(-90deg);
    transform: perspective(2000px) rotateY(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform: perspective(2000px) rotateY(0deg);
    transform: perspective(2000px) rotateY(0deg);
    opacity: 1; } }
@keyframes horizontalFlipIn {
  0% {
    -webkit-transform: perspective(2000px) rotateY(-90deg);
    transform: perspective(2000px) rotateY(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform: perspective(2000px) rotateY(0deg);
    transform: perspective(2000px) rotateY(0deg);
    opacity: 1; } }
@-webkit-keyframes verticalFlipIn {
  0% {
    -webkit-transform: perspective(2000px) rotateX(-90deg);
    transform: perspective(2000px) rotateX(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform: perspective(2000px) rotateX(0deg);
    transform: perspective(2000px) rotateX(0deg);
    opacity: 1; } }
@keyframes verticalFlipIn {
  0% {
    -webkit-transform: perspective(2000px) rotateX(-90deg);
    transform: perspective(2000px) rotateX(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform: perspective(2000px) rotateX(0deg);
    transform: perspective(2000px) rotateX(0deg);
    opacity: 1; } }
/* Out */
@-webkit-keyframes horizontalFlipOut {
  0% {
    -webkit-transform: perspective(2000px) rotateY(0deg);
    transform: perspective(2000px) rotateY(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(2000px) rotateY(90deg);
    transform: perspective(2000px) rotateY(90deg);
    opacity: 0; } }
@keyframes horizontalFlipOut {
  0% {
    -webkit-transform: perspective(2000px) rotateY(0deg);
    transform: perspective(2000px) rotateY(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(2000px) rotateY(90deg);
    transform: perspective(2000px) rotateY(90deg);
    opacity: 0; } }
@-webkit-keyframes verticalFlipOut {
  0% {
    -webkit-transform: perspective(2000px) rotateX(0deg);
    transform: perspective(2000px) rotateX(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(2000px) rotateX(-90deg);
    transform: perspective(2000px) rotateX(-90deg);
    opacity: 0; } }
@keyframes verticalFlipOut {
  0% {
    -webkit-transform: perspective(2000px) rotateX(0deg);
    transform: perspective(2000px) rotateX(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(2000px) rotateX(-90deg);
    transform: perspective(2000px) rotateX(-90deg);
    opacity: 0; } }
/*--------------
      Scale
---------------*/
.scale.transition.in {
  -webkit-animation-name: scaleIn;
  animation-name: scaleIn; }

.scale.transition.out {
  -webkit-animation-name: scaleOut;
  animation-name: scaleOut; }

@-webkit-keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); } }
@keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); } }
/* Out */
@-webkit-keyframes scaleOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9); } }
@keyframes scaleOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9); } }
/*--------------
      Fly
---------------*/
/* Inward */
.transition.fly {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

.transition.fly.in {
  -webkit-animation-name: flyIn;
  animation-name: flyIn; }

.transition[class*="fly up"].in {
  -webkit-animation-name: flyInUp;
  animation-name: flyInUp; }

.transition[class*="fly down"].in {
  -webkit-animation-name: flyInDown;
  animation-name: flyInDown; }

.transition[class*="fly left"].in {
  -webkit-animation-name: flyInLeft;
  animation-name: flyInLeft; }

.transition[class*="fly right"].in {
  -webkit-animation-name: flyInRight;
  animation-name: flyInRight; }

/* Outward */
.transition.fly.out {
  -webkit-animation-name: flyOut;
  animation-name: flyOut; }

.transition[class*="fly up"].out {
  -webkit-animation-name: flyOutUp;
  animation-name: flyOutUp; }

.transition[class*="fly down"].out {
  -webkit-animation-name: flyOutDown;
  animation-name: flyOutDown; }

.transition[class*="fly left"].out {
  -webkit-animation-name: flyOutLeft;
  animation-name: flyOutLeft; }

.transition[class*="fly right"].out {
  -webkit-animation-name: flyOutRight;
  animation-name: flyOutRight; }

/* In */
@-webkit-keyframes flyIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03); }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97); }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
@keyframes flyIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03); }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97); }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
@-webkit-keyframes flyInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 1500px, 0);
    transform: translate3d(0, 1500px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0); }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
@keyframes flyInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 1500px, 0);
    transform: translate3d(0, 1500px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0); }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
@-webkit-keyframes flyInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -1500px, 0);
    transform: translate3d(0, -1500px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0); }
  100% {
    -webkit-transform: none;
    transform: none; } }
@keyframes flyInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -1500px, 0);
    transform: translate3d(0, -1500px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0); }
  100% {
    -webkit-transform: none;
    transform: none; } }
@-webkit-keyframes flyInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(1500px, 0, 0);
    transform: translate3d(1500px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0); }
  100% {
    -webkit-transform: none;
    transform: none; } }
@keyframes flyInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(1500px, 0, 0);
    transform: translate3d(1500px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0); }
  100% {
    -webkit-transform: none;
    transform: none; } }
@-webkit-keyframes flyInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-1500px, 0, 0);
    transform: translate3d(-1500px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0); }
  100% {
    -webkit-transform: none;
    transform: none; } }
@keyframes flyInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-1500px, 0, 0);
    transform: translate3d(-1500px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0); }
  100% {
    -webkit-transform: none;
    transform: none; } }
/* Out */
@-webkit-keyframes flyOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); } }
@keyframes flyOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); } }
@-webkit-keyframes flyOutUp {
  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); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }
@keyframes flyOutUp {
  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); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }
@-webkit-keyframes flyOutDown {
  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); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); } }
@keyframes flyOutDown {
  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); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); } }
@-webkit-keyframes flyOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }
@keyframes flyOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }
@-webkit-keyframes flyOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }
@keyframes flyOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }
/*--------------
     Slide
---------------*/
.transition.slide.in,
.transition[class*="slide down"].in {
  -webkit-animation-name: slideInY;
  animation-name: slideInY;
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
      transform-origin: top center; }

.transition[class*="slide up"].in {
  -webkit-animation-name: slideInY;
  animation-name: slideInY;
  -webkit-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
      transform-origin: bottom center; }

.transition[class*="slide left"].in {
  -webkit-animation-name: slideInX;
  animation-name: slideInX;
  -webkit-transform-origin: center right;
  -ms-transform-origin: center right;
      transform-origin: center right; }

.transition[class*="slide right"].in {
  -webkit-animation-name: slideInX;
  animation-name: slideInX;
  -webkit-transform-origin: center left;
  -ms-transform-origin: center left;
      transform-origin: center left; }

.transition.slide.out,
.transition[class*="slide down"].out {
  -webkit-animation-name: slideOutY;
  animation-name: slideOutY;
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
      transform-origin: top center; }

.transition[class*="slide up"].out {
  -webkit-animation-name: slideOutY;
  animation-name: slideOutY;
  -webkit-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
      transform-origin: bottom center; }

.transition[class*="slide left"].out {
  -webkit-animation-name: slideOutX;
  animation-name: slideOutX;
  -webkit-transform-origin: center right;
  -ms-transform-origin: center right;
      transform-origin: center right; }

.transition[class*="slide right"].out {
  -webkit-animation-name: slideOutX;
  animation-name: slideOutX;
  -webkit-transform-origin: center left;
  -ms-transform-origin: center left;
      transform-origin: center left; }

/* In */
@-webkit-keyframes slideInY {
  0% {
    opacity: 0;
    -webkit-transform: scaleY(0);
    transform: scaleY(0); }
  100% {
    opacity: 1;
    -webkit-transform: scaleY(1);
    transform: scaleY(1); } }
@keyframes slideInY {
  0% {
    opacity: 0;
    -webkit-transform: scaleY(0);
    transform: scaleY(0); }
  100% {
    opacity: 1;
    -webkit-transform: scaleY(1);
    transform: scaleY(1); } }
@-webkit-keyframes slideInX {
  0% {
    opacity: 0;
    -webkit-transform: scaleX(0);
    transform: scaleX(0); }
  100% {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1); } }
@keyframes slideInX {
  0% {
    opacity: 0;
    -webkit-transform: scaleX(0);
    transform: scaleX(0); }
  100% {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1); } }
/* Out */
@-webkit-keyframes slideOutY {
  0% {
    opacity: 1;
    -webkit-transform: scaleY(1);
    transform: scaleY(1); }
  100% {
    opacity: 0;
    -webkit-transform: scaleY(0);
    transform: scaleY(0); } }
@keyframes slideOutY {
  0% {
    opacity: 1;
    -webkit-transform: scaleY(1);
    transform: scaleY(1); }
  100% {
    opacity: 0;
    -webkit-transform: scaleY(0);
    transform: scaleY(0); } }
@-webkit-keyframes slideOutX {
  0% {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1); }
  100% {
    opacity: 0;
    -webkit-transform: scaleX(0);
    transform: scaleX(0); } }
@keyframes slideOutX {
  0% {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1); }
  100% {
    opacity: 0;
    -webkit-transform: scaleX(0);
    transform: scaleX(0); } }
/*--------------
     Swing
---------------*/
.transition.swing {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms; }

.transition[class*="swing down"].in {
  -webkit-animation-name: swingInX;
  animation-name: swingInX;
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
      transform-origin: top center; }

.transition[class*="swing up"].in {
  -webkit-animation-name: swingInX;
  animation-name: swingInX;
  -webkit-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
      transform-origin: bottom center; }

.transition[class*="swing left"].in {
  -webkit-animation-name: swingInY;
  animation-name: swingInY;
  -webkit-transform-origin: center right;
  -ms-transform-origin: center right;
      transform-origin: center right; }

.transition[class*="swing right"].in {
  -webkit-animation-name: swingInY;
  animation-name: swingInY;
  -webkit-transform-origin: center left;
  -ms-transform-origin: center left;
      transform-origin: center left; }

.transition.swing.out,
.transition[class*="swing down"].out {
  -webkit-animation-name: swingOutX;
  animation-name: swingOutX;
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
      transform-origin: top center; }

.transition[class*="swing up"].out {
  -webkit-animation-name: swingOutX;
  animation-name: swingOutX;
  -webkit-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
      transform-origin: bottom center; }

.transition[class*="swing left"].out {
  -webkit-animation-name: swingOutY;
  animation-name: swingOutY;
  -webkit-transform-origin: center right;
  -ms-transform-origin: center right;
      transform-origin: center right; }

.transition[class*="swing right"].out {
  -webkit-animation-name: swingOutY;
  animation-name: swingOutY;
  -webkit-transform-origin: center left;
  -ms-transform-origin: center left;
      transform-origin: center left; }

/* In */
@-webkit-keyframes swingInX {
  0% {
    -webkit-transform: perspective(1000px) rotateX(90deg);
    transform: perspective(1000px) rotateX(90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(1000px) rotateX(-30deg);
    transform: perspective(1000px) rotateX(-30deg);
    opacity: 1; }
  60% {
    -webkit-transform: perspective(1000px) rotateX(15deg);
    transform: perspective(1000px) rotateX(15deg); }
  80% {
    -webkit-transform: perspective(1000px) rotateX(-7.5deg);
    transform: perspective(1000px) rotateX(-7.5deg); }
  100% {
    -webkit-transform: perspective(1000px) rotateX(0deg);
    transform: perspective(1000px) rotateX(0deg); } }
@keyframes swingInX {
  0% {
    -webkit-transform: perspective(1000px) rotateX(90deg);
    transform: perspective(1000px) rotateX(90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(1000px) rotateX(-30deg);
    transform: perspective(1000px) rotateX(-30deg);
    opacity: 1; }
  60% {
    -webkit-transform: perspective(1000px) rotateX(15deg);
    transform: perspective(1000px) rotateX(15deg); }
  80% {
    -webkit-transform: perspective(1000px) rotateX(-7.5deg);
    transform: perspective(1000px) rotateX(-7.5deg); }
  100% {
    -webkit-transform: perspective(1000px) rotateX(0deg);
    transform: perspective(1000px) rotateX(0deg); } }
@-webkit-keyframes swingInY {
  0% {
    -webkit-transform: perspective(1000px) rotateY(-90deg);
    transform: perspective(1000px) rotateY(-90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(1000px) rotateY(30deg);
    transform: perspective(1000px) rotateY(30deg);
    opacity: 1; }
  60% {
    -webkit-transform: perspective(1000px) rotateY(-17.5deg);
    transform: perspective(1000px) rotateY(-17.5deg); }
  80% {
    -webkit-transform: perspective(1000px) rotateY(7.5deg);
    transform: perspective(1000px) rotateY(7.5deg); }
  100% {
    -webkit-transform: perspective(1000px) rotateY(0deg);
    transform: perspective(1000px) rotateY(0deg); } }
@keyframes swingInY {
  0% {
    -webkit-transform: perspective(1000px) rotateY(-90deg);
    transform: perspective(1000px) rotateY(-90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(1000px) rotateY(30deg);
    transform: perspective(1000px) rotateY(30deg);
    opacity: 1; }
  60% {
    -webkit-transform: perspective(1000px) rotateY(-17.5deg);
    transform: perspective(1000px) rotateY(-17.5deg); }
  80% {
    -webkit-transform: perspective(1000px) rotateY(7.5deg);
    transform: perspective(1000px) rotateY(7.5deg); }
  100% {
    -webkit-transform: perspective(1000px) rotateY(0deg);
    transform: perspective(1000px) rotateY(0deg); } }
/* Out */
@-webkit-keyframes swingOutX {
  0% {
    -webkit-transform: perspective(1000px) rotateX(0deg);
    transform: perspective(1000px) rotateX(0deg); }
  40% {
    -webkit-transform: perspective(1000px) rotateX(-7.5deg);
    transform: perspective(1000px) rotateX(-7.5deg); }
  60% {
    -webkit-transform: perspective(1000px) rotateX(17.5deg);
    transform: perspective(1000px) rotateX(17.5deg); }
  80% {
    -webkit-transform: perspective(1000px) rotateX(-30deg);
    transform: perspective(1000px) rotateX(-30deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(1000px) rotateX(90deg);
    transform: perspective(1000px) rotateX(90deg);
    opacity: 0; } }
@keyframes swingOutX {
  0% {
    -webkit-transform: perspective(1000px) rotateX(0deg);
    transform: perspective(1000px) rotateX(0deg); }
  40% {
    -webkit-transform: perspective(1000px) rotateX(-7.5deg);
    transform: perspective(1000px) rotateX(-7.5deg); }
  60% {
    -webkit-transform: perspective(1000px) rotateX(17.5deg);
    transform: perspective(1000px) rotateX(17.5deg); }
  80% {
    -webkit-transform: perspective(1000px) rotateX(-30deg);
    transform: perspective(1000px) rotateX(-30deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(1000px) rotateX(90deg);
    transform: perspective(1000px) rotateX(90deg);
    opacity: 0; } }
@-webkit-keyframes swingOutY {
  0% {
    -webkit-transform: perspective(1000px) rotateY(0deg);
    transform: perspective(1000px) rotateY(0deg); }
  40% {
    -webkit-transform: perspective(1000px) rotateY(7.5deg);
    transform: perspective(1000px) rotateY(7.5deg); }
  60% {
    -webkit-transform: perspective(1000px) rotateY(-10deg);
    transform: perspective(1000px) rotateY(-10deg); }
  80% {
    -webkit-transform: perspective(1000px) rotateY(30deg);
    transform: perspective(1000px) rotateY(30deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(1000px) rotateY(-90deg);
    transform: perspective(1000px) rotateY(-90deg);
    opacity: 0; } }
@keyframes swingOutY {
  0% {
    -webkit-transform: perspective(1000px) rotateY(0deg);
    transform: perspective(1000px) rotateY(0deg); }
  40% {
    -webkit-transform: perspective(1000px) rotateY(7.5deg);
    transform: perspective(1000px) rotateY(7.5deg); }
  60% {
    -webkit-transform: perspective(1000px) rotateY(-10deg);
    transform: perspective(1000px) rotateY(-10deg); }
  80% {
    -webkit-transform: perspective(1000px) rotateY(30deg);
    transform: perspective(1000px) rotateY(30deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(1000px) rotateY(-90deg);
    transform: perspective(1000px) rotateY(-90deg);
    opacity: 0; } }
/*******************************
       Static Animations
*******************************/
/*--------------
    Emphasis
---------------*/
.flash.transition {
  -webkit-animation-duration: 750ms;
  animation-duration: 750ms;
  -webkit-animation-name: flash;
  animation-name: flash; }

.shake.transition {
  -webkit-animation-duration: 750ms;
  animation-duration: 750ms;
  -webkit-animation-name: shake;
  animation-name: shake; }

.bounce.transition {
  -webkit-animation-duration: 750ms;
  animation-duration: 750ms;
  -webkit-animation-name: bounce;
  animation-name: bounce; }

.tada.transition {
  -webkit-animation-duration: 750ms;
  animation-duration: 750ms;
  -webkit-animation-name: tada;
  animation-name: tada; }

.pulse.transition {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
  -webkit-animation-name: pulse;
  animation-name: pulse; }

.jiggle.transition {
  -webkit-animation-duration: 750ms;
  animation-duration: 750ms;
  -webkit-animation-name: jiggle;
  animation-name: jiggle; }

/* Flash */
@-webkit-keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1; }
  25%,
  75% {
    opacity: 0; } }
@keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1; }
  25%,
  75% {
    opacity: 0; } }
/* Shake */
@-webkit-keyframes shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); } }
@keyframes shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); } }
/* Bounce */
@-webkit-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); } }
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); } }
/* Tada */
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  10%,
  20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg); }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }
  40%,
  60%,
  80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }
  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0); } }
@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  10%,
  20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg); }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }
  40%,
  60%,
  80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }
  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0); } }
/* Pulse */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; }
  50% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.7; }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; }
  50% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.7; }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }
/* Rubberband */
@-webkit-keyframes jiggle {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
@keyframes jiggle {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
/* Levitate */
@-webkit-keyframes levitate {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  100% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px); } }
@keyframes levitate {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  100% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px); } }
@-webkit-keyframes levitateShadow {
  0% {
    opacity: 0.5;
    left: -20px;
    height: 5px;
    width: 40px; }
  100% {
    opacity: 1;
    left: -30px;
    height: 10px;
    width: 60px; } }
@keyframes levitateShadow {
  0% {
    opacity: 0.5;
    left: -20px;
    height: 5px;
    width: 40px; }
  100% {
    opacity: 1;
    left: -30px;
    height: 10px;
    width: 60px; } }
p, ol {
  font-size: 0.875rem;
  line-height: 1.365rem;
  font-weight: 300;
  color: #50677b;
  border: none; }
  p span, ol span {
    color: #007db6; }
  p.text--disclaimer, ol.text--disclaimer {
    color: #69859d; }

a {
  font-size: 0.875rem;
  line-height: 1.365rem;
  font-weight: 400;
  color: #007db6;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all 0.2s, ease;
  transition: all 0.2s, ease; }
  a:hover, a:focus {
    color: #004768; }

ul {
  list-style-type: none; }

ol li,
ul li {
  margin: 0.5em 0px; }

h1 {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 300;
  color: #004768; }

h2 {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 300;
  color: #004768; }

h3 {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 1.25rem;
  line-height: 1.6875rem;
  font-weight: 300;
  color: #004768; }

h4 {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400; }

h5 {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 0.875rem;
  line-height: 1.365rem;
  font-weight: 400;
  color: #004768;
  margin: 0; }

h6 {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 0.75rem;
  line-height: 1.15rem;
  font-weight: 400;
  margin: 15px 0;
  color: #004768; }

.disabled {
  cursor: default;
  opacity: 0.45;
  filter: alpha(opacity=45);
  background-image: none !important;
  box-shadow: none !important;
  pointer-events: none !important; }

.pull-right {
  float: right; }

.pull-left {
  float: left; }

.hidden {
  display: none !important; }

.align-center {
  display: table-cell;
  vertical-align: middle;
  text-align: center; }

.text--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  margin-bottom: -3px;
  max-width: initial; }

.text--multiline--truncate {
  overflow: hidden;
  position: relative;
  max-height: 90px;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em; }
  .text--multiline--truncate:before {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0; }
  .text--multiline--truncate:after {
    content: '';
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    margin-top: 7px;
    background: #ddf5ff; }

.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-size: inherit; }

.center--text {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #b0bfcc; }

.display--table {
  display: table; }

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

.display--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.display--inline-flex {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex; }

.text--uppercase {
  text-transform: uppercase; }

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

.vertical--overflow {
  overflow-y: auto; }
  .vertical--overflow ::-webkit-scrollbar {
    width: 0.8em; }
  .vertical--overflow ::-webkit-scrollbar-thumb {
    background: #b0bfcc;
    border-radius: 13px;
    border: 3px solid white; }
  .vertical--overflow ::-webkit-scrollbar-track {
    background: white; }

.clearfix {
  overflow: visible; }
  .clearfix:after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

.co-figure__text--bottom {
  position: relative;
  text-align: center;
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 0.875rem;
  line-height: 1.365rem;
  color: #50677b;
  border: 1px solid white;
  display: block;
  -webkit-transition-property: none;
  transition-property: none; }
  .co-figure__text--bottom img {
    min-height: 50px;
    min-width: 50px;
    border: none;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 0.188rem;
    -webkit-border-radius: 0.188rem;
    -moz-border-radius: 0.188rem;
    -ms-border-radius: 0.188rem;
    -o-border-radius: 0.188rem;
    background-clip: padding-box; }
  .co-figure__text--bottom:hover {
    border-radius: 0.188rem;
    border: 1px solid #d4dce3;
    -webkit-transition: all 0.3s, ease;
    transition: all 0.3s, ease; }

.co-figure__text--right {
  text-align: left;
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  color: #50677b;
  vertical-align: middle; }
  .co-figure__text--right img {
    min-height: 50px;
    min-width: 50px;
    vertical-align: middle;
    max-width: 100%;
    border: none;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 0.188rem;
    -webkit-border-radius: 0.188rem;
    -moz-border-radius: 0.188rem;
    -ms-border-radius: 0.188rem;
    -o-border-radius: 0.188rem;
    background-clip: padding-box; }

.co-figure img {
  min-height: 50px;
  min-width: 50px;
  vertical-align: middle;
  max-width: 100%;
  border: none;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.188rem;
  -webkit-border-radius: 0.188rem;
  -moz-border-radius: 0.188rem;
  -ms-border-radius: 0.188rem;
  -o-border-radius: 0.188rem;
  background-clip: padding-box; }

.co-figure__wrapper {
  display: table;
  margin: 0 auto;
  position: relative;
  margin-bottom: 5px; }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.alert__dialog {
  display: table; }
  .alert__dialog h3, .alert__dialog p, .alert__dialog a {
    font-weight: 300; }
  .alert__dialog h3 {
    margin-bottom: 12px; }
  .alert__dialog p {
    font-size: 1.25rem;
    line-height: 1.6875rem;
    margin: 16px 0px 32px 0px;
    color: #69859d; }

.icon__play {
  line-height: 33px; }
  .icon__play:before {
    content: "";
    background: url("/assets/cobalt/icon-play.svg") center center no-repeat !important;
    width: 28px;
    height: 31px;
    float: left;
    margin-right: 9px; }
  .icon__play:hover:before {
    background: url("/assets/cobalt/icon-play-hover.svg") center center no-repeat !important;
    -webkit-transition: all 0.2s, ease;
    transition: all 0.2s, ease; }
  .icon__play.played:before {
    background: url("/assets/cobalt/icon-played.svg") center center no-repeat !important; }
  .icon__play.played:hover:before {
    background: url("/assets/cobalt/icon-played-hover.svg") center center no-repeat !important; }

.icon__call {
  line-height: 27px;
  float: right; }
  .icon__call:before {
    content: "";
    background: url("/assets/cobalt/icon-call.svg") center center no-repeat !important;
    width: 28px;
    height: 31px;
    float: left;
    margin: 0 20px; }
  .icon__call:hover:before {
    background: url("/assets/cobalt/icon-call-hover.svg") center center no-repeat !important;
    -webkit-transition: all 0.2s, ease;
    transition: all 0.2s, ease; }

.icon__chevron--left, .icon__chevron--right, .icon__chevron--down {
  display: inline-block;
  float: none;
  opacity: 0.5;
  filter: alpha(opacity=50);
  width: 28px;
  height: 28px;
  padding: 0;
  -webkit-mask-image: url("/assets/cobalt/ic__arrow.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__arrow.svg");
  mask-position: center center;
  mask-repeat: no-repeat;
  background-color: #69859d;
  cursor: pointer; }
  .icon__chevron--left:hover, .icon__chevron--right:hover, .icon__chevron--down:hover {
    opacity: 1;
    filter: alpha(opacity=100); }
  .icon__chevron--left:before, .icon__chevron--right:before, .icon__chevron--down:before {
    content: ""; }

.icon__chevron {
  opacity: 1;
  filter: alpha(opacity=100);
  cursor: pointer; }
  .icon__chevron:before {
    content: "";
    -webkit-mask-image: url("/assets/cobalt/ic__arrow.svg");
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("/assets/cobalt/ic__arrow.svg");
    mask-position: center center;
    mask-repeat: no-repeat;
    background-color: #69859d;
    display: inline-block;
    float: none;
    width: 16px;
    height: 16px;
    padding: 0;
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: transform 0.2s, ease;
    -webkit-transition: ease, -webkit-transform 0.2s;
    transition: ease, -webkit-transform 0.2s;
    transition: transform 0.2s, ease;
    transition: transform 0.2s, ease, -webkit-transform 0.2s; }

.icon__myapps {
  display: block;
  float: left;
  width: 28px;
  height: 28px;
  -webkit-mask-image: url("/assets/cobalt/ic__myapps.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__myapps.svg");
  mask-position: center center;
  mask-repeat: no-repeat;
  background-color: white;
  -webkit-transition: all 0.2s, ease;
  transition: all 0.2s, ease; }

.icon__chevron--left {
  margin: 0 2px -9px 0;
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transition: all 0.2s, ease;
  transition: all 0.2s, ease;
  width: 16px; }

.icon__chevron--right {
  margin: 0 0 -8px 1px;
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  -webkit-transition: all 0.2s, ease;
  transition: all 0.2s, ease;
  width: 16px; }

.icon__chevron--down {
  margin: 0px 0 1px 0px;
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: all 0.2s, ease;
  transition: all 0.2s, ease; }

.icon__chevron--up {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: all 0.2s, ease;
  transition: all 0.2s, ease; }

.icon__search:before {
  content: "";
  -webkit-mask-image: url("/assets/cobalt/ic__search.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__search.svg");
  mask-position: center center;
  mask-repeat: no-repeat;
  background-color: #69859d;
  width: 23px;
  height: 23px;
  top: 50%;
  position: absolute;
  text-align: center; }
@-moz-document url-prefix() {
  .icon__search:before {
    background: url("/assets/cobalt/ic__search.svg") center center no-repeat; } }
.icon__avatar {
  background: url("/assets/cobalt/icon-avatar.svg") center center no-repeat !important;
  float: left;
  margin-bottom: 0;
  margin-right: 0;
  margin-top: 0;
  width: 22px;
  height: 21px; }

.text__show--more:after {
  content: "";
  display: inline-block;
  background: url("/assets/cobalt/icon-expand.svg") center center no-repeat !important;
  width: 30px;
  height: 16px;
  margin-bottom: -3px; }

.icon__close {
  -webkit-mask-image: url("/assets/cobalt/ic__close.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__close.svg");
  mask-position: center center;
  mask-repeat: no-repeat;
  background-color: #69859d;
  width: 9px;
  height: 17px;
  position: absolute;
  right: 8px;
  display: inline-block;
  cursor: pointer;
  -webkit-transition: background 0.1s, ease;
  transition: background 0.1s, ease;
  opacity: 0.7;
  filter: alpha(opacity=70); }
@-moz-document url-prefix() {
  .icon__close {
    background: url("/assets/cobalt/ic__close.svg") center center no-repeat; } }
  .icon__close:before {
    content: ""; }
  .icon__close:hover {
    opacity: 1;
    filter: alpha(opacity=100); }

.icon__close--32 {
  -webkit-mask-image: url("/assets/cobalt/ic__close--32.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__close--32.svg");
  mask-position: center center;
  mask-repeat: no-repeat;
  background-color: #d4dce3;
  cursor: pointer;
  -webkit-transition: opacity 0.1s, ease;
  transition: opacity 0.1s, ease;
  opacity: 0.8;
  filter: alpha(opacity=80); }
@-moz-document url-prefix() {
  .icon__close--32 {
    background: url("/assets/cobalt/ic__close--32.svg") center center no-repeat; } }
  .icon__close--32:before {
    content: ""; }
  .icon__close--32:hover {
    opacity: 1;
    filter: alpha(opacity=100); }

.icon__marketplace {
  display: inline-block;
  -webkit-mask-image: url("/assets/cobalt/ic__marketplace.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__marketplace.svg");
  mask-position: center center;
  mask-repeat: no-repeat;
  width: 41px;
  height: 21px;
  margin-bottom: -5px; }

.icon__info {
  display: inline-block;
  -webkit-mask-image: url("/assets/cobalt/ic__info.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__info.svg");
  mask-position: center center;
  mask-repeat: no-repeat;
  background-color: #b0bfcc;
  width: 60px;
  height: 60px; }

.icon__exclamation {
  display: inline-block;
  -webkit-mask-image: url("/assets/cobalt/ic__exclamation.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__exclamation.svg");
  mask-position: center center;
  mask-repeat: no-repeat;
  background-color: #b0bfcc;
  width: 60px;
  height: 60px; }

.icon__exclamation--16:before, .co-wizard-nav-icon--error:before, .co-wizard > .middle nav ul li.co-nav--active.co-nav--error .icon__co-nav:before, .co-wizard > .middle nav ul li.co-nav--error .icon__co-nav:before {
  content: "";
  display: inline-block;
  -webkit-mask-image: url("/assets/cobalt/ic__exclamation--16.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__exclamation--16.svg");
  mask-position: center center;
  mask-repeat: no-repeat;
  width: 19px;
  height: 19px; }

.icon__confirm-circular--16:before, .co-wizard-nav-icon--completed:before, .co-wizard > .middle nav ul li.co-nav--active.co-nav--completed .icon__co-nav:before, .co-wizard > .middle nav ul li.co-nav--completed .icon__co-nav:before {
  content: "";
  display: inline-block;
  -webkit-mask-image: url("/assets/cobalt/ic__confirm-circular--16.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__confirm-circular--16.svg");
  mask-position: center center;
  mask-repeat: no-repeat;
  width: 19px;
  height: 19px; }

.icon__confirm-circular-empty--16:before, .co-wizard-nav-icon--active:before, .co-wizard > .middle nav ul li.co-nav--active .icon__co-nav:before {
  content: "";
  display: inline-block;
  -webkit-mask-image: url("cobaltic__confirm-circular-empty--16.svg");
  -webkit-mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("cobaltic__confirm-circular-empty--16.svg");
  mask-position: 0 0;
  mask-repeat: no-repeat;
  width: 19px;
  height: 19px; }

.icon-base:before, .icon__user:before, .icon__everyone:before, .icon__role:before, .icon__contacts:before, .icon__recordings:before, .icon__reporting:before, .icon__admin--16:before {
  float: left;
  content: "";
  background-color: #69859d;
  display: table-cell;
  width: 16px;
  height: 16px;
  padding: 0;
  -webkit-transition: transform 0.2s, ease;
  -webkit-transition: ease, -webkit-transform 0.2s;
  transition: ease, -webkit-transform 0.2s;
  transition: transform 0.2s, ease;
  transition: transform 0.2s, ease, -webkit-transform 0.2s; }

.icon__user:before {
  -webkit-mask-image: url("/assets/cobalt/ic__user.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__user.svg");
  mask-position: center center;
  mask-repeat: no-repeat; }

.icon__everyone:before {
  -webkit-mask-image: url("/assets/cobalt/ic__everyone.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__everyone.svg");
  mask-position: center center;
  mask-repeat: no-repeat; }

.icon__role:before {
  -webkit-mask-image: url("/assets/cobalt/ic__role.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__role.svg");
  mask-position: center center;
  mask-repeat: no-repeat; }

.icon__contacts:before {
  -webkit-mask-image: url("/assets/cobalt/ic__contacts.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__contacts.svg");
  mask-position: center center;
  mask-repeat: no-repeat; }

.icon__recordings:before {
  -webkit-mask-image: url("/assets/cobalt/ic__recordings.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__recordings.svg");
  mask-position: center center;
  mask-repeat: no-repeat; }

.icon__reporting:before {
  -webkit-mask-image: url("/assets/cobalt/ic__reporting.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__reporting.svg");
  mask-position: center center;
  mask-repeat: no-repeat; }

.ui.button .icon__marketplace {
  background-color: #00A6F1; }

.ui.primary.button .icon__marketplace {
  background-color: white; }

.icon__more--16::after {
  content: "";
  -webkit-mask-image: url("/assets/cobalt/ic__more--16.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__more--16.svg");
  mask-position: center center;
  mask-repeat: no-repeat; }

.icon__less--16::after {
  content: "";
  -webkit-mask-image: url("/assets/cobalt/ic__minus--16.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__minus--16.svg");
  mask-position: center center;
  mask-repeat: no-repeat; }

.icon__admin--16:before {
  -webkit-mask-image: url("/assets/cobalt/icon__admin--16.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/icon__admin--16.svg");
  mask-position: center center;
  mask-repeat: no-repeat; }

.icon__talkdesk-symbol {
  background: url("/assets/cobalt/icon__talkdesk-symbol.svg") center center no-repeat;
  display: block; }

.icon__brands-fusion {
  background: url("/assets/cobalt/icon__brands-fusion.svg") center center no-repeat;
  display: block; }

.icon__brand-placeholder {
  background: url("/assets/cobalt/icon__brand-placeholder.svg") center center no-repeat;
  display: block; }

code {
  padding: 2px 10px;
  color: #007db6;
  background-color: #ecf0f3;
  border-radius: 0.188rem; }

pre code {
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.365rem;
  color: inherit;
  white-space: pre-wrap;
  background-color: transparent;
  border-radius: 0; }

.highlight {
  position: relative;
  padding: 9px 14px;
  margin-bottom: 14px;
  background-color: #f8f9fa;
  border-top: none !important;
  border: 1px solid #ecf0f3;
  border-radius: 0px 0px 4px 4px; }

.highlight pre {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  word-break: normal;
  white-space: nowrap;
  background-color: transparent;
  border: 0; }

.highlight pre code {
  color: #69859d; }

.copied {
  display: none;
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 0.875rem;
  line-height: 1.365rem;
  font-weight: 400;
  position: absolute;
  right: 55px;
  top: 20px;
  color: #004768; }

code[class*="language-"],
pre[class*="language-"] {
  color: black;
  background: none;
  text-shadow: 0 1px white;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  text-align: left;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none; }

.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted {
  color: #b0bfcc; }

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #007db6; }

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #ff4641; }

.nt {
  color: #69859d; }

.na {
  color: #007db6; }

.s {
  color: #ff4641; }

i.icon {
  margin: 0.5rem;
  color: #004768; }

i.icon,
i.icons {
  font-size: 1.25rem;
  line-height: 1.6875rem; }

.example--code {
  background: white;
  border-radius: 6px 6px 0 0;
  border: 1px solid #ecf0f3;
  border-bottom: none; }

.example--bar {
  text-align: center;
  border: 1px solid #ecf0f3;
  background: #ecf0f3;
  color: #007db6;
  padding: 10px; }

.ui.info.message {
  background-color: #f4fcff;
  color: #50677b; }

.ui.attached.info.message, .ui.info.message {
  box-shadow: 0 0 0 1px #b6e8ff inset, 0 0 0 0 transparent;
  font-size: 0.875rem;
  line-height: 1.365rem;
  font-weight: 300; }

.bg__filter--gray {
  background: #f8f9fa; }
  .bg__filter--gray .ui.button {
    background: white;
    border: 1px solid #d4dce3; }
    .bg__filter--gray .ui.button:hover, .bg__filter--gray .ui.button:focus {
      background: 0 0 #f4fcff !important;
      border: 1px solid #68d0ff !important;
      border-left: none; }

.sketch {
  background: #f4fcff;
  position: relative; }
  .sketch h3 {
    margin-top: 10px; }
  .sketch .icon__sketch {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 45px; }

.list__box {
  list-style-type: none;
  margin-top: 25px; }
  .list__box .box-download {
    display: table;
    width: 240px;
    padding: 14px;
    border: 1px solid #b6e8ff;
    border-radius: 6px;
    margin-bottom: 15px;
    -webkit-transition: all 0.2s, ease;
    transition: all 0.2s, ease; }
    .list__box .box-download:hover {
      background: white;
      text-decoration: none; }
    .list__box .box-download .icon {
      float: left;
      height: 35px;
      margin: 5px 13px 5px 0px;
      width: auto; }
    .list__box .box-download .info {
      font-size: 0.75rem;
      line-height: 1.15rem;
      line-height: 24px;
      margin-left: 40px;
      padding-top: 1px; }
      .list__box .box-download .info .title {
        color: #007db6;
        font-weight: 400; }
      .list__box .box-download .info .subtitle {
        color: #69859d; }

ul.list-text {
  color: #50677b;
  font-size: 0.875rem;
  line-height: 1.365rem;
  font-weight: 300;
  list-style-type: none;
  padding: 0; }

.box-color {
  position: relative;
  color: #8492a6;
  border: 1px solid #ecf0f3;
  border-radius: 6px;
  padding: 115px 15px 15px; }
  .box-color .color-display {
    position: absolute;
    left: -1px;
    top: -1px;
    border-radius: 6px 6px 0 0;
    width: calc(100% + 2px);
    height: 100px;
    padding: 30px 15px;
    /*******************************
            Primary color shade
    *******************************/
    /*******************************
          Neutrals color shade
    *******************************/
    /*******************************
            Alerts color shade
    *******************************/
    /*******************************
        Secondary colors shade
    *******************************/ }
    .box-color .color-display .color-title {
      display: block; }
    .box-color .color-display .color-name {
      display: block;
      opacity: 0.6;
      filter: alpha(opacity=60); }
    .box-color .color-display.base-color {
      background: #00A6F1;
      color: white; }
      .box-color .color-display.base-color .copy-text {
        background: #00A6F1; }
    .box-color .color-display.dark-color {
      background: #007db6;
      color: white; }
      .box-color .color-display.dark-color .copy-text {
        background: #007db6; }
    .box-color .color-display.darker-color {
      background: #004768;
      color: white; }
      .box-color .color-display.darker-color .copy-text {
        background: #004768; }
    .box-color .color-display.darkest-color {
      background: #002c40;
      color: white; }
      .box-color .color-display.darkest-color .copy-text {
        background: #002c40; }
    .box-color .color-display.light-color {
      background: #68d0ff;
      color: white; }
      .box-color .color-display.light-color .copy-text {
        background: #68d0ff; }
    .box-color .color-display.lighter-color {
      background: #b6e8ff;
      color: #394958; }
      .box-color .color-display.lighter-color .copy-text {
        background: #b6e8ff; }
    .box-color .color-display.lightest-color {
      background: #ddf5ff;
      color: #394958; }
      .box-color .color-display.lightest-color .copy-text {
        background: #ddf5ff; }
    .box-color .color-display.lighty-color {
      background: #f4fcff;
      color: #394958; }
      .box-color .color-display.lighty-color .copy-text {
        background: #f4fcff; }
    .box-color .color-display.gray-color {
      background: #69859d;
      color: white; }
      .box-color .color-display.gray-color .copy-text {
        background: #69859d; }
    .box-color .color-display.gray-dark-color {
      background: #50677b;
      color: white; }
      .box-color .color-display.gray-dark-color .copy-text {
        background: #50677b; }
    .box-color .color-display.gray-darker-color {
      background: #394958;
      color: white; }
      .box-color .color-display.gray-darker-color .copy-text {
        background: #394958; }
    .box-color .color-display.gray-darkest-color {
      background: #222c34;
      color: white; }
      .box-color .color-display.gray-darkest-color .copy-text {
        background: #222c34; }
    .box-color .color-display.gray-light-color {
      background: #b0bfcc;
      color: white; }
      .box-color .color-display.gray-light-color .copy-text {
        background: #b0bfcc; }
    .box-color .color-display.gray-lighter-color {
      background: #d4dce3;
      color: #394958; }
      .box-color .color-display.gray-lighter-color .copy-text {
        background: #d4dce3; }
    .box-color .color-display.gray-lightest-color {
      background: #ecf0f3;
      color: #394958; }
      .box-color .color-display.gray-lightest-color .copy-text {
        background: #ecf0f3; }
    .box-color .color-display.gray-lighty-color {
      background: #f8f9fa;
      color: #394958; }
      .box-color .color-display.gray-lighty-color .copy-text {
        background: #f8f9fa; }
    .box-color .color-display.green-color {
      background: #00cd73;
      color: white; }
      .box-color .color-display.green-color .copy-text {
        background: #00cd73; }
    .box-color .color-display.green-dark-color {
      background: #00b465;
      color: white; }
      .box-color .color-display.green-dark-color .copy-text {
        background: #00b465; }
    .box-color .color-display.green-darker-color {
      background: #007b45;
      color: white; }
      .box-color .color-display.green-darker-color .copy-text {
        background: #007b45; }
    .box-color .color-display.green-darkest-color {
      background: #003e23;
      color: white; }
      .box-color .color-display.green-darkest-color .copy-text {
        background: #003e23; }
    .box-color .color-display.green-light-color {
      background: #4cdc9d;
      color: white; }
      .box-color .color-display.green-light-color .copy-text {
        background: #4cdc9d; }
    .box-color .color-display.green-lighter-color {
      background: #ccf5e3;
      color: #394958; }
      .box-color .color-display.green-lighter-color .copy-text {
        background: #ccf5e3; }
    .box-color .color-display.green-lightest-color {
      background: #e6faf1;
      color: #394958; }
      .box-color .color-display.green-lightest-color .copy-text {
        background: #e6faf1; }
    .box-color .color-display.yellow-color {
      background: #ffe36c;
      color: #394958; }
      .box-color .color-display.yellow-color .copy-text {
        background: #ffe36c; }
    .box-color .color-display.yellow-dark-color {
      background: #ffd939;
      color: #394958; }
      .box-color .color-display.yellow-dark-color .copy-text {
        background: #ffd939; }
    .box-color .color-display.yellow-darker-color {
      background: #998841;
      color: #394958; }
      .box-color .color-display.yellow-darker-color .copy-text {
        background: #998841; }
    .box-color .color-display.yellow-darkest-color {
      background: #4d4420;
      color: #394958; }
      .box-color .color-display.yellow-darkest-color .copy-text {
        background: #4d4420; }
    .box-color .color-display.yellow-light-color {
      background: #ffefab;
      color: #394958; }
      .box-color .color-display.yellow-light-color .copy-text {
        background: #ffefab; }
    .box-color .color-display.yellow-lighter-color {
      background: #fff9db;
      color: #394958; }
      .box-color .color-display.yellow-lighter-color .copy-text {
        background: #fff9db; }
    .box-color .color-display.yellow-lightest-color {
      background: #fffcf0;
      color: #394958; }
      .box-color .color-display.yellow-lightest-color .copy-text {
        background: #fffcf0; }
    .box-color .color-display.red-color {
      background: #ff4641;
      color: white; }
      .box-color .color-display.red-color .copy-text {
        background: #ff4641; }
    .box-color .color-display.red-dark-color {
      background: #e2413c;
      color: white; }
      .box-color .color-display.red-dark-color .copy-text {
        background: #e2413c; }
    .box-color .color-display.red-darker-color {
      background: #992a27;
      color: white; }
      .box-color .color-display.red-darker-color .copy-text {
        background: #992a27; }
    .box-color .color-display.red-darkest-color {
      background: #4d1514;
      color: white; }
      .box-color .color-display.red-darkest-color .copy-text {
        background: #4d1514; }
    .box-color .color-display.red-light-color {
      background: #ff7f7c;
      color: white; }
      .box-color .color-display.red-light-color .copy-text {
        background: #ff7f7c; }
    .box-color .color-display.red-lighter-color {
      background: #ffdfde;
      color: #394958; }
      .box-color .color-display.red-lighter-color .copy-text {
        background: #ffdfde; }
    .box-color .color-display.red-lightest-color {
      background: #ffedec;
      color: #394958; }
      .box-color .color-display.red-lightest-color .copy-text {
        background: #ffedec; }
    .box-color .color-display.teal-color {
      background: #42c9b9;
      color: white; }
      .box-color .color-display.teal-color .copy-text {
        background: #42c9b9; }
    .box-color .color-display.teal-dark-color {
      background: #34a098;
      color: white; }
      .box-color .color-display.teal-dark-color .copy-text {
        background: #34a098; }
    .box-color .color-display.teal-darker-color {
      background: #28796f;
      color: white; }
      .box-color .color-display.teal-darker-color .copy-text {
        background: #28796f; }
    .box-color .color-display.teal-darkest-color {
      background: #143c38;
      color: white; }
      .box-color .color-display.teal-darkest-color .copy-text {
        background: #143c38; }
    .box-color .color-display.teal-light-color {
      background: #8dded8;
      color: white; }
      .box-color .color-display.teal-light-color .copy-text {
        background: #8dded8; }
    .box-color .color-display.teal-lighter-color {
      background: #d9f4f2;
      color: #394958; }
      .box-color .color-display.teal-lighter-color .copy-text {
        background: #d9f4f2; }
    .box-color .color-display.teal-lightest-color {
      background: #ecfaf8;
      color: #394958; }
      .box-color .color-display.teal-lightest-color .copy-text {
        background: #ecfaf8; }
    .box-color .color-display.purple-color {
      background: #7d3dbc;
      color: white; }
      .box-color .color-display.purple-color .copy-text {
        background: #7d3dbc; }
    .box-color .color-display.purple-dark-color {
      background: #633195;
      color: white; }
      .box-color .color-display.purple-dark-color .copy-text {
        background: #633195; }
    .box-color .color-display.purple-darker-color {
      background: #4b2571;
      color: white; }
      .box-color .color-display.purple-darker-color .copy-text {
        background: #4b2571; }
    .box-color .color-display.purple-darkest-color {
      background: #261238;
      color: white; }
      .box-color .color-display.purple-darkest-color .copy-text {
        background: #261238; }
    .box-color .color-display.purple-light-color {
      background: #b58fda;
      color: white; }
      .box-color .color-display.purple-light-color .copy-text {
        background: #b58fda; }
    .box-color .color-display.purple-lighter-color {
      background: #f0e8f7;
      color: #394958; }
      .box-color .color-display.purple-lighter-color .copy-text {
        background: #f0e8f7; }
    .box-color .color-display.purple-lightest-color {
      background: #f2ecf8;
      color: #394958; }
      .box-color .color-display.purple-lightest-color .copy-text {
        background: #f2ecf8; }
  .box-color .color-title {
    display: block;
    font-size: 0.75rem;
    line-height: 1.15rem;
    font-weight: 300; }
  .box-color .color-name {
    display: block;
    font-size: 0.75rem;
    line-height: 1.15rem;
    font-weight: 300; }

.sass-display {
  position: relative; }
  .sass-display .copy-text {
    top: -15px;
    right: -15px;
    left: -15px;
    bottom: -15px;
    border-radius: 0px 0px 6px 6px;
    background: white;
    -webkit-transition: all 0.2s, ease;
    transition: all 0.2s, ease; }
    .sass-display .copy-text:hover {
      opacity: 1;
      filter: alpha(opacity=100); }

.copy-text {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border-radius: 6px 6px 0 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.2s, ease;
  transition: all 0.2s, ease; }
  .copy-text:hover {
    opacity: 1;
    filter: alpha(opacity=100); }

.btn-copy {
  background-color: transparent;
  border: none;
  vertical-align: middle;
  display: table-cell;
  height: 100%;
  width: 100%; }

/* Toggle Styles */
#wrapper {
  padding-left: 0;
  -webkit-transition: all 0.5s, ease;
  transition: all 0.5s, ease; }

#wrapper.toggled {
  padding-left: 250px; }

#sidebar__wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  border-right: 1px solid #ecf0f3;
  -webkit-transition: all 0.5s, ease;
  transition: all 0.5s, ease; }

#wrapper.toggled #sidebar__wrapper {
  width: 251px; }

#page-content-wrapper {
  width: 100%;
  position: absolute; }

#wrapper.toggled #page-content-wrapper {
  position: absolute;
  margin-right: -250px; }

@media (min-width: 768px) {
  #page-content-wrapper {
    position: relative; }

  #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0;
    margin-top: 2em; } }
#nav-toggle {
  cursor: pointer;
  padding: 10px 35px 16px 0px;
  float: left;
  width: 100%;
  margin-bottom: 30px; }

#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 25px;
  background: #004768;
  position: absolute;
  display: block;
  content: ''; }

#nav-toggle span:before {
  top: -8px; }

#nav-toggle span:after {
  bottom: -8px; }

#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  -webkit-transition: all 500ms, ease-in-out;
  transition: all 500ms, ease-in-out; }

#nav-toggle.active span {
  background-color: transparent; }

#nav-toggle.active span:before,
#nav-toggle.active span:after {
  top: 0; }

#nav-toggle.active span:before {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg); }

#nav-toggle.active span:after {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg); }

.ui.label {
  border-radius: 0.188rem;
  font-size: 0.688rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.5rem;
  position: relative; }

.ui.circular.label {
  font-size: 0.875rem;
  line-height: 1.365rem;
  font-weight: 400;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.3rem !important;
  margin: -4px 10px 0 0px !important; }

.ui.red.label,
.ui.red.labels .label {
  background-color: #ff4641 !important;
  border-color: #ff4641 !important;
  color: white !important; }

.ui.yellow.label,
.ui.yellow.labels .label {
  background-color: #ffe36c !important;
  border-color: #ffe36c !important;
  color: #394958 !important; }

.ui.green.label,
.ui.green.labels .label {
  background-color: #00cd73 !important;
  border-color: #00cd73 !important;
  color: white !important; }

.ui.basic.blue.label {
  background-color: #00A6F1 !important;
  border-color: #00A6F1 !important;
  color: white !important; }

.ui.blue.label,
.ui.blue.labels .label {
  background-color: #00A6F1 !important;
  border-color: #00A6F1 !important;
  color: white !important; }

.ui.gray.label,
.ui.gray.labels .label {
  background-color: #ecf0f3 !important;
  border-color: #ecf0f3 !important;
  color: #007db6 !important; }

.ui.field > label {
  display: block;
  margin: 0 0 0.571em;
  color: #004768;
  font-size: 0.875rem;
  line-height: 1.365rem;
  font-weight: 400;
  text-transform: none;
  cursor: default; }

.notification__label {
  float: left;
  margin-right: 30px; }

.ui.ring--group.label, .ui.ring--group.labels .label {
  background: #ddf5ff;
  text-decoration: none;
  color: #007db6;
  font-size: 0.75rem;
  line-height: 1.15rem;
  font-weight: 600;
  margin-bottom: 8px;
  border: 1px solid #b6e8ff; }

.label--currency .ui.basic.blue.label {
  font-size: 1.25rem !important;
  font-weight: 600;
  background-color: #f8f9fa !important;
  border: none !important;
  padding: 1rem !important;
  border-radius: 0.188rem !important;
  color: #00A6F1 !important; }

.label--info {
  color: #007db6;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.365rem; }
  .label--info.errormark {
    -webkit-transition: all 0.2s, ease;
    transition: all 0.2s, ease;
    color: #ff4641; }
    .label--info.errormark .icon__info {
      -webkit-transition: all 0.2s, ease;
      transition: all 0.2s, ease;
      background-color: #ff4641; }
  .label--info .icon__info {
    width: 20px;
    height: 23px;
    margin: 0rem 0rem 0rem 0.5rem;
    cursor: pointer;
    background-color: #00A6F1;
    margin-bottom: -6px; }

.ui.list {
  height: 100%;
  width: 100%; }

.ui.list > .item .content {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 0.875rem;
  line-height: 1.365rem;
  font-weight: 400;
  color: #50677b; }
.ui.list > .item i:before {
  width: 20px;
  height: 20px;
  margin: 0.5rem; }
.ui.list > .item i.icon__info {
  width: 20px;
  height: 20px;
  float: right;
  margin: 0rem 0.5rem;
  cursor: pointer;
  background-color: #00A6F1; }

.ui.divided.list > .item {
  border-top: 1px solid #ecf0f3; }

.ui.selection.list .item {
  position: relative;
  cursor: pointer;
  padding: 0; }
  .ui.selection.list .item .ui.checkbox {
    width: initial;
    height: initial;
    margin: 0; }
    .ui.selection.list .item .ui.checkbox .box:before, .ui.selection.list .item .ui.checkbox label:before {
      width: 20px;
      height: 20px;
      top: 8px; }
    .ui.selection.list .item .ui.checkbox input:checked ~ .box:after, .ui.selection.list .item .ui.checkbox input:checked ~ label:after {
      width: 15px;
      height: 22px;
      top: 6px; }
    .ui.selection.list .item .ui.checkbox.checked i:before {
      background-color: #00A6F1; }
  .ui.selection.list .item .content {
    padding-right: 2rem; }
    .ui.selection.list .item .content .header {
      font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
      font-size: 1rem;
      line-height: 1.5rem;
      font-weight: 300;
      line-height: 1.2rem;
      color: #50677b; }
    .ui.selection.list .item .content .description {
      font-size: 0.875rem;
      line-height: 1.365rem;
      font-weight: 300;
      color: #69859d; }
    .ui.selection.list .item .content.loading {
      padding-top: 2px;
      padding-bottom: 2px; }
      .ui.selection.list .item .content.loading .header {
        height: 14px !important;
        margin-bottom: 7px; }
      .ui.selection.list .item .content.loading .description {
        height: 12px !important; }
  .ui.selection.list .item i {
    position: absolute;
    right: 6px;
    top: 6px; }
    .ui.selection.list .item i:before {
      width: 24px;
      height: 24px; }
  .ui.selection.list .item:hover {
    background: rgba(248, 249, 250, 0.6) !important; }

.ui.list .list > .item > .icon + .content,
.ui.list .list > .item > .image + .content,
.ui.list > .item > .icon + .content,
.ui.list > .item > .image + .content {
  vertical-align: middle; }

.footer__pagination ul {
  list-style-type: none;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.365rem; }
  .footer__pagination ul li {
    display: inline;
    color: #00A6F1; }
    .footer__pagination ul li:first-child i, .footer__pagination ul li:last-child i {
      font-size: 0.875rem;
      line-height: 1.365rem;
      color: #b0bfcc; }
    .footer__pagination ul li:first-child a, .footer__pagination ul li:last-child a {
      margin: 0;
      padding: 7px; }
    .footer__pagination ul li a {
      border-radius: 0.188rem;
      color: #00A6F1;
      line-height: 16px;
      margin: 7px 2px 6px;
      padding: 6px 9px;
      cursor: pointer; }
      .footer__pagination ul li a:hover, .footer__pagination ul li a:focus {
        background-color: #ecf0f3;
        border-color: #00A6F1; }
      .footer__pagination ul li a:active {
        text-decoration: none; }
    .footer__pagination ul li.active a {
      background-color: #00A6F1;
      border-color: white;
      border-width: 2px;
      color: white;
      margin: 10px 0px;
      padding: 5px 9px; }
      .footer__pagination ul li.active a:hover, .footer__pagination ul li.active a:focus {
        background-color: #00A6F1;
        border-color: white;
        border-width: 2px;
        color: white; }
    .footer__pagination ul li.icon.item {
      padding: 6px 0px; }
    .footer__pagination ul li.item.disabled {
      margin: 0;
      padding: 7px; }

.ui.button {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 300;
  background: #f8f9fa;
  border: 1px solid #ecf0f3;
  color: #00A6F1;
  padding: 0.500rem 1.5rem;
  white-space: nowrap;
  border-radius: 0.188rem;
  -webkit-border-radius: 0.188rem;
  -moz-border-radius: 0.188rem;
  -ms-border-radius: 0.188rem;
  -o-border-radius: 0.188rem;
  background-clip: padding-box; }
  .ui.button:hover, .ui.button:focus {
    background: 0 0 #ecf0f3 !important;
    box-shadow: none !important;
    color: #007db6 !important;
    border: 1px solid #ecf0f3; }

.ui.active.button {
  background-color: #00A6F1;
  background-image: none;
  box-shadow: none;
  color: white;
  border: 1px solid #00A6F1 !important; }
  .ui.active.button:hover, .ui.active.button:focus {
    background-color: #00A6F1 !important;
    background-image: none;
    box-shadow: none;
    color: white !important;
    border: 1px solid #00A6F1 !important;
    cursor: default; }

.ui.button, .ui.buttons .button, .ui.buttons .or {
  font-size: 0.875rem;
  line-height: 1.365rem; }

.ui.mini.button, .ui.mini.buttons .button, .ui.mini.buttons .or {
  font-size: 0.688rem;
  line-height: 1rem; }

.ui.tiny.button, .ui.tiny.buttons .button, .ui.tiny.buttons .or {
  font-size: 0.75rem;
  line-height: 1.15rem; }

.ui.small.button, .ui.small.buttons .button, .ui.small.buttons .or {
  font-size: 0.875rem;
  line-height: 1.365rem; }

.ui.medium.button, .ui.medium.buttons .button, .ui.medium.buttons .or {
  font-size: 1rem;
  line-height: 1.5rem; }

.ui.large.button, .ui.large.buttons .button, .ui.large.buttons .or {
  font-size: 1.25rem;
  line-height: 1.6875rem; }

.ui.big.button, .ui.big.buttons .button, .ui.big.buttons .or {
  font-size: 1.5rem;
  line-height: 2rem; }

.ui.huge.button, .ui.huge.buttons .button, .ui.huge.buttons .or {
  font-size: 2rem;
  line-height: 2.5rem; }

.ui.massive.button, .ui.massive.buttons .button, .ui.massive.buttons .or {
  font-size: 2.25rem;
  line-height: 2.5rem; }

.ui.primary.button, .ui.primary.buttons .button {
  box-shadow: none;
  background-color: #00A6F1;
  color: white;
  border: 1px solid #00A6F1; }
  .ui.primary.button:hover, .ui.primary.button:focus, .ui.primary.buttons .button:hover, .ui.primary.buttons .button:focus {
    background-color: #007db6 !important;
    color: white !important;
    border: 1px solid #007db6; }

.ui.basic.primary.button, .ui.basic.primary.buttons .button {
  box-shadow: none !important;
  color: #00A6F1 !important;
  border: 1px solid #00A6F1;
  min-width: 95px; }

.ui.basic.button, .ui.basic.buttons .button {
  font-weight: 300;
  border-radius: 0.188rem; }

.ui.basic.primary.button:hover, .ui.basic.primary.buttons .button:hover {
  background: 0 0 #f4fcff !important;
  box-shadow: none !important;
  color: #007db6 !important;
  border: 1px solid #007db6; }

.ui.basic.primary.button:focus, .ui.basic.primary.buttons .button:focus {
  box-shadow: none !important;
  color: #007db6 !important;
  border: 1px solid #007db6; }

.ui.buttons:not(.basic):not(.inverted) > .button, .ui.buttons > .ui.button:not(.basic):not(.inverted) {
  box-shadow: none; }

.ui.buttons .button:first-child {
  border: 1px solid #d4dce3;
  margin-left: 0;
  border-top-left-radius: 0.188rem;
  border-bottom-left-radius: 0.188rem;
  border-right: none !important; }
  .ui.buttons .button:first-child.active {
    color: white; }
  .ui.buttons .button:first-child:hover, .ui.buttons .button:first-child:focus {
    border: 1px solid #007db6;
    border-right: none !important; }

.ui.buttons .button:last-child {
  border-top-right-radius: 0.188rem;
  border-bottom-right-radius: 0.188rem;
  border-left: none !important; }

/*--- Danger ---*/
.ui.danger.buttons .button,
.ui.danger.button {
  background-color: #ff4641;
  color: white;
  text-shadow: none;
  border: 1px solid #ff4641;
  background-image: none; }

.ui.danger.buttons .button:hover,
.ui.danger.button:hover {
  background-color: #e2413c !important;
  color: white !important;
  border: 1px solid #e2413c !important;
  text-shadow: none; }

.ui.danger.buttons .button:focus,
.ui.danger.button:focus {
  background-color: #e2413c !important;
  color: white !important;
  border: 1px solid #e2413c !important;
  text-shadow: none; }

.ui.danger.buttons .button:active,
.ui.danger.button:active {
  background-color: #e2413c;
  color: #e2413c;
  border: 1px solid #e2413c !important;
  text-shadow: none; }

.ui.danger.buttons .active.button,
.ui.danger.buttons .active.button:active,
.ui.danger.active.button,
.ui.danger.button .active.button:active {
  background-color: color__red--dark;
  color: white;
  border: 1px solid #e2413c !important;
  text-shadow: none; }

/*--- Success ---*/
.ui.success.buttons .button,
.ui.success.button {
  background-color: #00cd73;
  color: white;
  text-shadow: none;
  border: 1px solid #00cd73;
  background-image: none; }

.ui.success.buttons .button:hover,
.ui.success.button:hover {
  background-color: #00b465 !important;
  color: white !important;
  border: 1px solid #00b465 !important;
  text-shadow: none; }

.ui.success.buttons .button:focus,
.ui.success.button:focus {
  background-color: #00b465 !important;
  color: white !important;
  border: 1px solid #00b465 !important;
  text-shadow: none; }

.ui.success.buttons .button:active,
.ui.success.button:active {
  background-color: #00b465;
  color: #00b465;
  border: 1px solid #00b465;
  text-shadow: none; }

.ui.success.buttons .active.button,
.ui.success.buttons .active.button:active,
.ui.success.active.button,
.ui.success.button .active.button:active {
  background-color: color__green--dark;
  color: white;
  border: 1px solid #00b465;
  text-shadow: none; }

/*--- Info ---*/
.ui.info.buttons .button,
.ui.info.button {
  background-color: #68d0ff;
  color: white;
  text-shadow: none;
  background-image: none;
  border: 1px solid #68d0ff; }

.ui.info.buttons .button:hover,
.ui.info.button:hover {
  background-color: #00A6F1 !important;
  color: white !important;
  border: 1px solid #00A6F1 !important;
  text-shadow: none; }

.ui.info.buttons .button:focus,
.ui.info.button:focus {
  background-color: #00A6F1 !important;
  color: white !important;
  border: 1px solid #00A6F1 !important;
  text-shadow: none; }

.ui.info.buttons .button:active,
.ui.info.button:active {
  background-color: #00A6F1;
  color: #00A6F1;
  border: 1px solid #00A6F1;
  text-shadow: none; }

.ui.info.buttons .active.button,
.ui.info.buttons .active.button:active,
.ui.info.active.button,
.ui.info.button .active.button:active {
  background-color: color__primary;
  color: white;
  border: 1px solid #00A6F1;
  text-shadow: none; }

/*--- warning ---*/
.ui.warning.buttons .button,
.ui.warning.button {
  background-color: #ffe36c;
  color: #394958;
  text-shadow: none;
  border: 1px solid #ffe36c !important;
  background-image: none; }

.ui.warning.buttons .button:hover,
.ui.warning.button:hover {
  background-color: #ffd939 !important;
  color: #394958 !important;
  border: 1px solid #ffd939 !important;
  text-shadow: none; }

.ui.warning.buttons .button:focus,
.ui.warning.button:focus {
  background-color: #ffd939 !important;
  color: #394958 !important;
  border: 1px solid #ffd939 !important;
  text-shadow: none; }

.ui.warning.buttons .button:active,
.ui.warning.button:active {
  background-color: #ffd939;
  color: #ffd939;
  border: 1px solid #ffd939;
  text-shadow: none; }

.ui.warning.buttons .active.button,
.ui.warning.buttons .active.button:active,
.ui.warning.active.button,
.ui.warning.button .active.button:active {
  background-color: color__yellow--dark;
  color: #394958;
  border: 1px solid #ffd939;
  text-shadow: none; }

.empty__states {
  display: table;
  position: relative; }
  .empty__states h3, .empty__states p, .empty__states a {
    font-weight: 300; }
  .empty__states h3 {
    margin-bottom: 12px; }
  .empty__states p {
    font-size: 1.25rem;
    line-height: 1.6875rem;
    margin-top: 5px;
    color: #b0bfcc; }
  .empty__states a {
    font-size: 1rem;
    line-height: 1.5rem; }

.illus--animated {
  min-height: 140px; }
  .illus--animated .illus--shadow {
    position: absolute;
    top: 50%;
    left: 50%; }
    .illus--animated .illus--shadow:before {
      content: "";
      position: absolute;
      top: 5px;
      left: -15px;
      height: 10px;
      background: #ecf0f3;
      border-radius: 100%;
      -webkit-animation: levitateShadow 2s alternate ease-in-out infinite;
      animation: levitateShadow 2s alternate ease-in-out infinite; }
    .illus--animated .illus--shadow .illus-list, .illus--animated .illus--shadow .illus__list--error, .illus--animated .illus--shadow .illus__list--empty, .illus--animated .illus--shadow .illus__list--conquered, .illus--animated .illus--shadow .illus--noresults {
      position: absolute;
      height: 145px;
      width: 260px;
      margin-left: -130px;
      margin-top: -160px;
      -webkit-animation: levitate 2s alternate ease-in-out infinite;
      animation: levitate 2s alternate ease-in-out infinite; }
    .illus--animated .illus--shadow .illus__list--error {
      background: url("/assets/cobalt/illustration-list-error.svg") center center no-repeat !important; }
    .illus--animated .illus--shadow .illus__list--empty {
      background: url("/assets/cobalt/illustration-list-empty.svg") center center no-repeat !important; }
    .illus--animated .illus--shadow .illus__list--conquered {
      background: url("/assets/cobalt/illustration-list-conquered.svg") center center no-repeat !important; }
    .illus--animated .illus--shadow .illus--noresults {
      background: url("/assets/cobalt/illustration-noresults.svg") center center no-repeat !important; }

.co-qty__input {
  border: 1px solid #b0bfcc;
  border-radius: 0.188rem;
  -webkit-border-radius: 0.188rem;
  -moz-border-radius: 0.188rem;
  -ms-border-radius: 0.188rem;
  -o-border-radius: 0.188rem;
  background-clip: padding-box;
  height: 48px;
  position: relative;
  width: 187px; }
  .co-qty__input.errormark {
    border: 1px solid #ff4641;
    -webkit-transition: all 0.2s, ease;
    transition: all 0.2s, ease; }
    .co-qty__input.errormark input {
      color: #ff4641; }
  .co-qty__input i {
    position: relative;
    cursor: pointer;
    height: 46px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    width: 45px;
    border-left: 1px solid #b0bfcc;
    background: #f8f9fa;
    -webkit-transition: all 150ms ease-out;
    transition: all 150ms ease-out; }
    .co-qty__input i:hover {
      background-color: #ecf0f3; }
    .co-qty__input i::after {
      content: '';
      background-color: #50677b;
      width: 45px;
      height: 46px;
      position: absolute; }
  .co-qty__input i.icon__more--16 {
    border-radius: 0 0.188rem 0.188rem 0;
    -webkit-border-radius: 0 0.188rem 0.188rem 0;
    -moz-border-radius: 0 0.188rem 0.188rem 0;
    -ms-border-radius: 0 0.188rem 0.188rem 0;
    -o-border-radius: 0 0.188rem 0.188rem 0;
    background-clip: padding-box; }
  .co-qty__input input {
    border-radius: 0.188rem;
    -webkit-border-radius: 0.188rem;
    -moz-border-radius: 0.188rem;
    -ms-border-radius: 0.188rem;
    -o-border-radius: 0.188rem;
    background-clip: padding-box;
    border: 0;
    padding-right: .5em;
    font-size: 1.5rem;
    line-height: 2rem;
    height: 46px;
    text-align: left;
    outline: none;
    width: 95px;
    color: #50677b; }
  .co-qty__input label {
    font-size: 0.75rem;
    line-height: 1.15rem;
    color: #50677b; }
  .co-qty__input.disabled {
    width: 97px; }

@-webkit-keyframes placeHolderShimmer {
  0% {
    background-position: -310px 0; }
  100% {
    background-position: 310px 0; } }
@keyframes placeHolderShimmer {
  0% {
    background-position: -310px 0; }
  100% {
    background-position: 310px 0; } }
.animated-background, .ui.selection.list .item .content.loading .header, .ui.selection.list .item .content.loading .description {
  -webkit-animation: 1s placeHolderShimmer linear infinite;
  animation: 1s placeHolderShimmer linear infinite;
  background: #ecf0f3;
  background: -webkit-linear-gradient(left, #ecf0f3 8%, #d4dce3 18%, #ecf0f3 33%);
  background: linear-gradient(to right, #ecf0f3 8%, #d4dce3 18%, #ecf0f3 33%);
  background-size: 500px 104px;
  height: 62px;
  position: relative; }
  .animated-background td, .ui.selection.list .item .content.loading .header td, .ui.selection.list .item .content.loading .description td {
    position: relative !important; }

.masker__background {
  background: white;
  position: absolute; }

.masker__background.header--line {
  top: 0;
  left: 0px;
  right: 0;
  height: 24px; }

.masker__background.content--left {
  top: 23px;
  left: 0px;
  right: 0;
  height: 16px;
  width: 13px; }

.masker__background.content--right--small {
  top: 23px;
  height: 16px;
  left: 40px;
  width: calc(100% - 40px); }
.masker__background.content--right--medium {
  top: 23px;
  height: 16px;
  left: 80px;
  width: calc(100% - 80px); }
.masker__background.content--right--large {
  top: 23px;
  height: 16px;
  left: 120px;
  width: calc(100% - 120px); }
.masker__background.content--right--xlarge {
  top: 23px;
  height: 16px;
  left: 150px;
  width: calc(100% - 150px); }

.masker__background.footer--line {
  bottom: 0;
  left: 0px;
  right: 0;
  height: 22px; }

.ui.basic.loading.button:not(.inverted):after {
  border-top-color: #007db6; }

.ui.loading.button:before {
  border: 0.1em solid #b6e8ff; }

.ui.loading.button:after {
  border-width: .1em; }

.ui.basic.loading.button:not(.inverted):before {
  border: 0.1em solid #b6e8ff; }

/*--------------------
  Dropdown Loading
---------------------*/
.ui.loading.dropdown > .icon__chevron:before {
  background: none !important; }

.ui.loading.selection.dropdown > .icon__chevron {
  top: 11px;
  right: -6px; }

.ui.loading.dropdown > i.icon__chevron {
  padding: inherit !important;
  background: none; }

.ui.loading.dropdown > i.icon__chevron:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  margin: -0.64285714em 0em 0em -0.64285714em;
  width: 1.28571429em;
  height: 1.28571429em;
  border-radius: 500rem;
  border: 0.2em solid #b6e8ff;
  -webkit-mask-image: none; }

.ui.loading.dropdown > i.icon__chevron:after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  box-shadow: 0px 0px 0px 1px transparent;
  margin: -0.64285714em 0em 0em -0.64285714em;
  width: 1.28571429em;
  height: 1.28571429em;
  -webkit-animation: dropdown-spin 0.6s linear infinite;
  animation: dropdown-spin 0.6s linear infinite;
  border-radius: 500rem;
  border-color: #007db6 transparent transparent;
  border-style: solid;
  border-width: 0.2em; }

.ui.loading.dropdown.active > .icon__chevron, .ui.checkmark.dropdown.active > .icon__chevron {
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg); }

.ui.checkmark.selection.dropdown > .icon__chevron {
  top: 9px;
  position: absolute;
  right: 10px; }

.ui.checkmark.dropdown > i.icon__chevron:after {
  position: absolute;
  content: '';
  margin: 0em 0em 0em 0.4em;
  top: 50%;
  left: 50%;
  width: 0.5em;
  height: 1em;
  display: block;
  -webkit-animation: check 1s;
  animation: check 1s;
  -ms-transform: scaleX(-1) rotate(135deg);
  -webkit-transform: scaleX(-1) rotate(135deg);
  transform: scaleX(-1) rotate(135deg);
  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-right: 2px solid #007db6;
  border-top: 2px solid #007db6; }

.ui.checkmark.dropdown > i.icon__chevron:before {
  -webkit-mask-image: none;
  background: transparent; }

.ui.loading.dropdown.button > i.icon__chevron:before,
.ui.loading.dropdown.button > i.icon__chevron:after {
  display: none; }

.ui.loading.dropdown > span .icon__chevron:before {
  background: none !important; }

.ui.loading.selection.dropdown > span .icon__chevron {
  top: 11px;
  right: 16px;
  position: absolute; }

.ui.loading.dropdown > span i.icon__chevron {
  padding: inherit !important;
  background: none; }

.ui.loading.dropdown > span i.icon__chevron:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  margin: -0.64285714em 0em 0em -0.4em;
  width: 1.28571429em;
  height: 1.28571429em;
  border-radius: 500rem;
  border: 0.2em solid #b6e8ff;
  -webkit-mask-image: none; }

.ui.loading.dropdown > span i.icon__chevron:after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  box-shadow: 0px 0px 0px 1px transparent;
  margin: -0.64285714em 0em 0em -0.4em;
  width: 1.28571429em;
  height: 1.28571429em;
  -webkit-animation: dropdown-spin 0.6s linear infinite;
  animation: dropdown-spin 0.6s linear infinite;
  border-radius: 500rem;
  border-color: #007db6 transparent transparent;
  border-style: solid;
  border-width: 0.2em; }

.ui.loading.dropdown.active > span .dropdown, .ui.checkmark.dropdown.active > span .icon__chevron, .ui.errormark.dropdown.active > span .icon__chevron {
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg); }

.ui.checkmark.selection.dropdown > span .icon__chevron {
  top: 11px;
  right: 11px;
  position: absolute; }

.ui.checkmark.dropdown > span i.icon__chevron {
  padding: inherit !important;
  background: none; }

.ui.checkmark.dropdown > span i.icon__chevron:before {
  background-color: transparent; }

.ui.checkmark.dropdown > span i.icon__chevron:after {
  position: absolute;
  content: '';
  margin: 0em 0em 0em 0.4em;
  top: 50%;
  left: 50%;
  width: 0.5em;
  height: 1em;
  display: block;
  -webkit-animation: check 1s;
  animation: check 1s;
  -ms-transform: scaleX(-1) rotate(135deg);
  -webkit-transform: scaleX(-1) rotate(135deg);
  transform: scaleX(-1) rotate(135deg);
  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-right: 2px solid #007db6;
  border-top: 2px solid #007db6; }

.ui.loading.dropdown.button > span i.icon__chevron:before,
.ui.loading.dropdown.button > span i.icon__chevron:after {
  display: none; }

@-webkit-keyframes check {
  0% {
    height: 0;
    width: 0; }
  33.3333% {
    width: 0.5em;
    height: 0; } }
@keyframes check {
  0% {
    height: 0;
    width: 0; }
  33.3333% {
    width: 0.5em;
    height: 0; } }
.massive.ui.checkmark:after, .huge.ui.checkmark:after {
  border-right: 3px solid #007db6;
  border-top: 3px solid #007db6; }

.ui.checkmark.button {
  position: relative;
  color: transparent !important; }
  .ui.checkmark.button:after {
    position: absolute;
    content: '';
    margin: 0.1em 0 0 -0.5em;
    top: 50%;
    left: 50%;
    width: 0.5em;
    height: 1.2em;
    display: block;
    -webkit-animation: check 1s;
    animation: check 1s;
    -ms-transform: scaleX(-1) rotate(135deg);
    -webkit-transform: scaleX(-1) rotate(135deg);
    transform: scaleX(-1) rotate(135deg);
    -ms-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-right: 2px solid #007db6;
    border-top: 2px solid #007db6; }

.ui.basic.primary.checkmark.button, .ui.basic.primary.checkmark.buttons .button {
  color: transparent !important; }

.table__content {
  position: relative; }

.table__content--gradient {
  position: absolute;
  bottom: 0px;
  height: 70%;
  width: 100%;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0) 0%;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0) 0%), to(white 100%));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
  background-image: linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%); }

@-webkit-keyframes cross {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes cross {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.ui.errormark.selection.dropdown {
  border: 1px solid #ff4641;
  -webkit-transition: all 0.2s, ease;
  transition: all 0.2s, ease; }
  .ui.errormark.selection.dropdown:hover {
    border: 1px solid #ff4641;
    -webkit-transition: all 0.2s, ease;
    transition: all 0.2s, ease; }

.ui.errormark.dropdown > .text {
  color: #ff4641;
  -webkit-transition: color 0.2s, ease;
  transition: color 0.2s, ease; }

.ui.errormark.dropdown > i.icon__chevron {
  background: none;
  margin-top: 0;
  right: 21px; }

.ui.errormark.dropdown > i.icon__chevron:after, .ui.errormark.dropdown > i.icon__chevron:before {
  position: absolute;
  left: 50%;
  content: ' ';
  height: 1.1em;
  width: 0.143em;
  background-color: #ff4641;
  -webkit-animation: cross 1s;
  animation: cross 1s;
  -webkit-transition: border 1s, ease;
  transition: border 1s, ease;
  -webkit-mask-image: none; }

.ui.errormark.dropdown > i.icon__chevron:after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg); }

.ui.errormark.dropdown > i.icon__chevron:before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg); }

.ui.errormark.dropdown > span i.icon__chevron {
  background: none;
  margin-top: 0;
  top: 2px; }

.ui.errormark.selection.dropdown > span i.icon__chevron {
  background: none;
  margin-top: 0;
  top: 11px;
  right: 16px; }

.ui.errormark.dropdown > span i.icon__chevron:after, .ui.errormark.dropdown > span i.icon__chevron:before {
  position: absolute;
  left: 50%;
  content: ' ';
  height: 1.1em;
  width: 0.143em;
  margin-left: -2px;
  background-color: #ff4641;
  -webkit-animation: cross 1s;
  animation: cross 1s;
  -webkit-transition: border 1s, ease;
  transition: border 1s, ease;
  -webkit-mask-image: none; }

.ui.errormark.dropdown > span i.icon__chevron:after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg); }

.ui.errormark.dropdown > span i.icon__chevron:before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg); }

.ui.errormark.button {
  position: relative;
  color: transparent !important;
  border: 1px solid #ff4641 !important; }
  .ui.errormark.button:after, .ui.errormark.button:before {
    position: absolute;
    content: '';
    top: 25%;
    left: 50%;
    height: 1.143em;
    width: 0.143em;
    display: block;
    background-color: #ff4641;
    -webkit-animation: cross 1s;
    animation: cross 1s;
    -webkit-transition: border 1s, ease;
    transition: border 1s, ease; }
  .ui.errormark.button:after {
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg); }
  .ui.errormark.button:before {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg); }

.ui.basic.primary.errormark.button, .ui.basic.primary.errormark.buttons .button {
  color: transparent !important; }

.co-figure .loader {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #f8f9fa;
  -o-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.09);
  -ms-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.09);
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.09);
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  background-clip: padding-box;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 0s 0.5s, opacity 0.5s linear;
  transition: visibility 0s 0.5s, opacity 0.5s linear;
  display: block; }
  .co-figure .loader::before {
    content: "";
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    margin: 0;
    border: 0.2em solid #b0bfcc; }
  .co-figure .loader::after {
    content: "";
    top: 50% !important;
    left: 50% !important;
    margin-top: -1.14285714rem !important;
    border-color: #394958 transparent transparent; }
  .co-figure .loader.active {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear; }

.co-modal header {
  border-radius: 0.188rem 0.188rem 0 0;
  -webkit-border-radius: 0.188rem 0.188rem 0 0;
  -moz-border-radius: 0.188rem 0.188rem 0 0;
  -ms-border-radius: 0.188rem 0.188rem 0 0;
  -o-border-radius: 0.188rem 0.188rem 0 0;
  background-clip: padding-box; }
.co-modal footer {
  border-radius: 0 0 0.188rem 0.188rem;
  -webkit-border-radius: 0 0 0.188rem 0.188rem;
  -moz-border-radius: 0 0 0.188rem 0.188rem;
  -ms-border-radius: 0 0 0.188rem 0.188rem;
  -o-border-radius: 0 0 0.188rem 0.188rem;
  background-clip: padding-box; }
.co-modal i.icon__close--32 {
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: -2.35rem; }
.co-modal__overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
  background: rgba(0, 44, 64, 0.97);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: default;
  z-index: 9999; }
  .co-modal__overlay.active {
    opacity: 1;
    filter: alpha(opacity=100);
    visibility: visible; }
.co-modal__standard {
  position: fixed;
  left: 50%;
  top: 50%;
  padding: 20px;
  min-height: 200px;
  max-width: 900px;
  background: white;
  opacity: 0;
  filter: alpha(opacity=0);
  visibility: hidden;
  border-radius: 0.188rem;
  -webkit-border-radius: 0.188rem;
  -moz-border-radius: 0.188rem;
  -ms-border-radius: 0.188rem;
  -o-border-radius: 0.188rem;
  background-clip: padding-box;
  -webkit-transform: translate(-50%, -50%) scale(0.8);
      -ms-transform: translate(-50%, -50%) scale(0.8);
          transform: translate(-50%, -50%) scale(0.8);
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  z-index: 10000; }
  .co-modal__standard.active {
    opacity: 1;
    filter: alpha(opacity=100);
    visibility: visible;
    -webkit-transform: translate(-50%, -50%) scale(1);
        -ms-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out; }
.co-modal > .tallest {
  height: 75%; }

.co-wizard {
  position: relative;
  width: 100%;
  height: 100%; }
  .co-wizard.cobalt__page--example {
    height: 650px;
    border: 1px solid #ecf0f3; }
  .co-wizard > header {
    position: absolute;
    height: 85px;
    background-color: #ecf0f3; }
    .co-wizard > header .co-figure__text--right img {
      width: 50px;
      height: 50px; }
    .co-wizard > header .co-figure__text--right span {
      font-size: 1.5rem;
      line-height: 2rem;
      vertical-align: middle;
      margin-bottom: 0; }
    .co-wizard > header .steps--numbers {
      color: #00A6F1; }
  .co-wizard > .middle {
    position: relative;
    padding: 85px 0px 70px 0px;
    top: 0;
    height: 100%;
    min-height: 500px; }
    .co-wizard > .middle nav {
      height: 100%;
      border-right: 1px solid #ecf0f3;
      background-color: #f8f9fa; }
      .co-wizard > .middle nav ul {
        margin: 0; }
        .co-wizard > .middle nav ul li {
          border-bottom: 1px solid #ecf0f3;
          color: #50677b;
          margin: 0;
          position: relative;
          font-weight: 100; }
          .co-wizard > .middle nav ul li.co-nav--disabled {
            color: #b0bfcc; }
          .co-wizard > .middle nav ul li.co-nav--active {
            color: #00A6F1;
            background: white; }
          .co-wizard > .middle nav ul li.co-nav--completed {
            color: #00A6F1; }
          .co-wizard > .middle nav ul li.co-nav--error p {
            color: #ff4641;
            font-size: 0.8em; }
    .co-wizard > .middle > .content {
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; }
      .co-wizard > .middle > .content ::-webkit-scrollbar {
        width: 0.9em; }
      .co-wizard > .middle > .content ::-webkit-scrollbar-thumb {
        background: #b0bfcc;
        border-radius: 13px;
        border: 3px solid white; }
      .co-wizard > .middle > .content ::-webkit-scrollbar-track {
        background: white; }
      .co-wizard > .middle > .content::after {
        content: '';
        position: absolute;
        pointer-events: none;
        bottom: 70px;
        right: 0;
        height: 50px;
        width: 75%;
        background-color: rgba(255, 255, 255, 0) 0%;
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0) 0%), to(white 100%));
        background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
        background-image: linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%); }
      .co-wizard > .middle > .content .empty-states__wrapper {
        -ms-flex-item-align: center;
            align-self: center;
        width: 100%; }
      .co-wizard > .middle > .content .co-figure {
        width: 50px;
        height: 50px; }
  .co-wizard > footer {
    position: absolute;
    height: 70px;
    bottom: 0;
    left: 0;
    border-top: 1px solid #ecf0f3;
    background-color: white; }
    .co-wizard > footer .button {
      min-width: 104px !important; }
    .co-wizard > footer .checkbox {
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      -ms-flex-item-align: center;
          align-self: center;
      font-size: small; }
      .co-wizard > footer .checkbox label::before {
        margin-top: 1px; }
    .co-wizard > footer .button-group {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex; }
    .co-wizard > footer .content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end; }

.co-wizard-nav-icon, .co-wizard-nav-icon--active, .co-wizard > .middle nav ul li.co-nav--active .icon__co-nav, .co-wizard-nav-icon--completed, .co-wizard > .middle nav ul li.co-nav--active.co-nav--completed .icon__co-nav, .co-wizard > .middle nav ul li.co-nav--completed .icon__co-nav, .co-wizard-nav-icon--error, .co-wizard > .middle nav ul li.co-nav--active.co-nav--error .icon__co-nav, .co-wizard > .middle nav ul li.co-nav--error .icon__co-nav {
  visibility: visible;
  position: absolute;
  right: 10px; }

.co-wizard-nav-icon--active:before, .co-wizard > .middle nav ul li.co-nav--active .icon__co-nav:before {
  background-color: #00A6F1; }

.co-wizard-nav-icon--completed:before, .co-wizard > .middle nav ul li.co-nav--active.co-nav--completed .icon__co-nav:before, .co-wizard > .middle nav ul li.co-nav--completed .icon__co-nav:before {
  background-color: #00cd73;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease; }

.co-wizard-nav-icon--error:before, .co-wizard > .middle nav ul li.co-nav--active.co-nav--error .icon__co-nav:before, .co-wizard > .middle nav ul li.co-nav--error .icon__co-nav:before {
  background-color: #ff4641;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease; }

.co-brands__fusion .icon__brand-placeholder, .co-brands__fusion .icon__talkdesk-symbol {
  height: 50px;
  width: 50px;
  vertical-align: middle;
  border-radius: 0.188rem;
  -webkit-border-radius: 0.188rem;
  -moz-border-radius: 0.188rem;
  -ms-border-radius: 0.188rem;
  -o-border-radius: 0.188rem;
  background-clip: padding-box; }
.co-brands__fusion .icon__brands-fusion {
  height: 28px;
  width: 28px;
  vertical-align: middle; }

.ui.search.input {
  border-top: none !important;
  border-bottom: none !important; }
  .ui.search.input .icon__search:before {
    left: 0;
    margin: -0.6875rem 1rem; }
  .ui.search.input .icon__close {
    width: 12px;
    right: 0;
    margin: 1rem; }

.co-section {
  position: relative;
  width: 100%;
  overflow: visible;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  .co-section.full-height {
    height: 100%; }
    .co-section.full-height .co-section__content {
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
  .co-section .co-section__header {
    font-size: 0.875rem;
    line-height: 1.365rem;
    font-weight: 300;
    color: #50677b;
    box-shadow: 0px 1px 1px 0px #d4dce3;
    background-color: #ecf0f3;
    border-radius: 0.188rem;
    overflow: visible; }

/* Sidebar Styles */
.logo img {
  height: 26px;
  padding: 0;
  margin-left: -20px; }

.sidebar__nav {
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none; }

.sidebar__nav li {
  text-indent: 20px;
  line-height: 40px; }

.sidebar__nav li a {
  display: block;
  text-decoration: none;
  color: #00A6F1;
  height: 28px; }
  .sidebar__nav li a.active {
    color: #00A6F1; }

.sidebar__nav li a:hover {
  text-decoration: none;
  color: #002c40; }

.sidebar__nav li a:active,
.sidebar__nav li a:focus {
  text-decoration: none; }

.sidebar__nav > .sidebar__nav--brand {
  background: #002c40;
  padding: 40px 0;
  text-align: center;
  text-transform: uppercase;
  margin: 0; }
  .sidebar__nav > .sidebar__nav--brand span {
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    line-height: 1.15rem; }

.sidebar__nav > .sidebar__nav--brand a {
  color: #ecf0f3; }

.sidebar__nav > .sidebar__nav--brand a:hover {
  color: white;
  background: none; }

.ui.accordion .title:not(.ui) {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 1.25rem;
  line-height: 1.6875rem; }

.ui.accordion.menu .item .title {
  font-size: 1.25rem;
  line-height: 1.6875rem;
  font-weight: 300;
  color: #002c40;
  padding: 0.5rem 2rem; }

.ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {
  padding: 0 25px;
  font-size: 0.875rem;
  line-height: 1.365rem;
  padding: 0.5rem 3rem; }
  .ui.vertical.text.menu .item:not(.dropdown) > .menu > .item.active {
    color: #007db6;
    font-weight: 400; }

.ui.divider:not(.vertical):not(.horizontal) {
  border-top: 1px solid #ecf0f3; }

.ui.accordion .title .dropdown.icon:before,
.ui.accordion .accordion .title .dropdown.icon:before {
  content: ""; }

.dropdown.icon {
  background: url("/assets/cobalt/icon-arrow-down.svg") center center no-repeat; }

/*******************************
            States
*******************************/
.ui.accordion.menu .item .title > .dropdown.icon {
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg); }

.ui.accordion .active.title .dropdown.icon,
.ui.accordion .accordion .active.title .dropdown.icon {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); }

.ui.accordion.menu .item .active.title > .dropdown.icon {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); }

.ui.vertical.menu .item > .label {
  background: #ecf0f3;
  font-size: 0.688rem;
  line-height: 1rem;
  color: #d4dce3;
  margin-top: -1.3em; }

.ui.table {
  margin: 0;
  table-layout: fixed;
  font-size: 0.875rem;
  line-height: 1.365rem; }

.ui.table td {
  padding: 0.875em;
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  height: auto;
  position: inherit; }

.ui.basic.table {
  color: #50677b;
  border: none; }
  .ui.basic.table th {
    font-weight: 600; }
    .ui.basic.table th h4 {
      color: #007db6;
      font-weight: 300; }

.ui.table thead th {
  font-size: 100%;
  border-bottom: none;
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  color: #004768;
  padding: 0.875em; }
  .ui.table thead th.select__checkbox {
    width: 45px; }

.ui.table thead tr:first-child > th:last-child {
  border-radius: none; }

.ui.basic.striped.table tbody tr:nth-child(2n) {
  background-color: #ecf0f3 !important; }

.ui.basic.table tbody tr {
  border-bottom: 1px solid #ecf0f3;
  border-top: 1px solid #ecf0f3; }

.ui.table tr td {
  border-bottom: 1px solid #ecf0f3;
  border-top: none; }

@media only screen and (max-width: 767px) {
  .ui.table:not(.unstackable) tr {
    box-shadow: none !important; } }
.ui.header {
  margin: calc(2rem - .14285em) 0 2rem; }
  .ui.header h4 {
    display: inline;
    color: #004768; }
    .ui.header h4 .table__page--size {
      font-size: 0.875rem;
      line-height: 1.365rem;
      font-weight: 400;
      color: #b0bfcc; }
  .ui.header:first-child {
    margin-top: 0px; }

.ui.dividing.header {
  border-bottom: 1px solid #ecf0f3;
  margin: 0;
  margin-bottom: 20px;
  padding: 11px; }

.ui.header .content {
  color: #00A6F1;
  font-weight: 300; }

h4.ui.header {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; }

table.tablesorter thead tr .header {
  cursor: pointer; }
  table.tablesorter thead tr .header span {
    padding-right: 15px;
    background: url("/assets/cobalt/icon-arrow-double.svg") center right no-repeat !important; }

table.tablesorter thead tr .headerSortUp span {
  background: url("/assets/cobalt/icon-arrow-double-up.svg") center right no-repeat !important; }

table.tablesorter thead tr .headerSortDown span {
  background: url("/assets/cobalt/icon-arrow-double-down.svg") center right no-repeat !important; }

table .player {
  float: left; }
table .ui.search.input {
  border-bottom: none;
  border-top: none; }
table .button {
  min-width: 85px; }
table span.text {
  position: relative;
  padding-right: 27px; }

.ui.dividing.header {
  border-bottom: 1px solid #ecf0f3; }

.ui.header .content {
  color: #00A6F1;
  font-weight: 300; }

.ui.selectable.table tbody tr:hover, .ui.table tbody tr td.selectable:hover {
  background: #ddf5ff;
  color: #50677b !important;
  -webkit-transition: all 0.1s, ease;
  transition: all 0.1s, ease; }

.ui.table tbody tr.visited {
  background: #f8f9fa;
  color: #50677b;
  -webkit-transition: all 0.2s, ease;
  transition: all 0.2s, ease; }
  .ui.table tbody tr.visited:hover {
    background: #ecf0f3 !important; }

table tr.table__info td {
  padding: 0 !important;
  cursor: default;
  border-bottom: none !important; }
  table tr.table__info td .table__info--content {
    background-color: #f8f9fa; }
    table tr.table__info td .table__info--content p {
      font-size: 0.75rem;
      line-height: 1.15rem; }
    table tr.table__info td .table__info--content a {
      text-decoration: underline; }
  table tr.table__info td .table__info--detail h5 {
    font-weight: 600;
    margin-bottom: 15px; }
  table tr.table__info td .table__info--detail--text h5 {
    font-weight: 600; }
  table tr.table__info td .table__info--detail--text a {
    font-weight: 400;
    color: #00A6F1;
    text-decoration: underline;
    -webkit-transition: all 0.2s, ease;
    transition: all 0.2s, ease;
    font-size: 0.75rem;
    line-height: 1.15rem;
    cursor: pointer; }
    table tr.table__info td .table__info--detail--text a:hover, table tr.table__info td .table__info--detail--text a:focus {
      color: #007db6;
      text-decoration: underline; }

.table__info .table__info--content {
  padding: 0px 30px;
  height: 0px;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: all 500ms, ease-in-out;
  transition: all 500ms, ease-in-out; }
.table__info.row__expanded .table__info--content {
  padding: 30px;
  height: 120px;
  opacity: 1;
  -webkit-transition: all 500ms, ease-in-out;
  transition: all 500ms, ease-in-out; }
  .table__info.row__expanded .table__info--content.table__info--transcription {
    height: 310px; }

a.info__row--expanded {
  background: #f8f9fa;
  float: right;
  line-height: 0;
  border-radius: 0.188rem;
  padding: .2em;
  -webkit-transition: all 0.2s, ease;
  transition: all 0.2s, ease;
  cursor: pointer;
  border: 1px solid #f8f9fa; }
  a.info__row--expanded:hover {
    background: #ecf0f3;
    border: 1px solid #ecf0f3; }
  a.info__row--expanded .icon__chevron:before {
    width: 14px;
    height: 14px;
    margin: 7px 5px;
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: transform 0.2s, ease;
    -webkit-transition: ease, -webkit-transform 0.2s;
    transition: ease, -webkit-transform 0.2s;
    transition: transform 0.2s, ease;
    transition: transform 0.2s, ease, -webkit-transform 0.2s;
    background-color: #00A6F1; }
  a.info__row--expanded.active > .icon__chevron:before {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: transform 0.2s, ease;
    -webkit-transition: ease, -webkit-transform 0.2s;
    transition: ease, -webkit-transform 0.2s;
    transition: transform 0.2s, ease;
    transition: transform 0.2s, ease, -webkit-transform 0.2s; }

.table__row {
  -webkit-transition: all 0.2s, ease;
  transition: all 0.2s, ease; }
  .table__row.selected {
    background: #f8f9fa;
    border: 1px solid #f8f9fa; }
    .table__row.selected a.info__row--expanded {
      border: 1px solid #ecf0f3; }
      .table__row.selected a.info__row--expanded:hover {
        background: #ecf0f3; }

.table__content .empty__states {
  -webkit-transition: all 0.2s, ease;
  transition: all 0.2s, ease; }
  @media screen and (min-width: 1261px) {
    .table__content .empty__states {
      height: 668px; } }
  @media screen and (min-width: 961px) and (max-width: 1260px) {
    .table__content .empty__states {
      height: 350px; } }
  @media screen and (max-height: 710px) {
    .table__content .empty__states {
      height: 350px; } }

table .ui.checkbox input:checked ~ .box:after, table .ui.checkbox input:checked ~ label:after {
  height: 19px; }

.ui.checkbox {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 0.875rem;
  line-height: 1.365rem;
  font-weight: normal;
  color: #50677b;
  display: block; }
  .ui.checkbox label {
    color: #50677b !important; }
  .ui.checkbox.disabled {
    opacity: 1; }
    .ui.checkbox.disabled .box, .ui.checkbox.disabled label {
      opacity: .75; }
    .ui.checkbox.disabled .box:before, .ui.checkbox.disabled label:before {
      opacity: .5; }

.checkbox > label {
  cursor: pointer; }

.ui.checkbox .box:before, .ui.checkbox label:before {
  top: 2px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 0.188rem;
  border: 1px solid #b0bfcc; }

.ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after {
  color: #00A6F1;
  border-color: #00A6F1; }

.ui.checkbox input:checked ~ .box:before, .ui.checkbox input:checked ~ label:before {
  border-color: #00A6F1; }

.ui.checkbox input:focus ~ .box:after, .ui.checkbox input:focus ~ label, .ui.checkbox input:focus ~ label:after {
  color: #00A6F1;
  border-color: none; }

.ui.checkbox input:checked:focus ~ .box:after, .ui.checkbox input:checked:focus ~ label:after, .ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:after, .ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after {
  color: #00A6F1;
  border-radius: 0.188rem; }

.ui.checkbox .box:after, .ui.checkbox label:after {
  font-size: 0.688rem;
  line-height: 1rem; }

.ui.checkbox .box:active::before, .ui.checkbox label:active::before {
  border-color: #00A6F1; }

.ui.checkbox .box:hover::before, .ui.checkbox label:hover::before {
  border-color: #00A6F1; }

.ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after {
  content: "";
  -webkit-mask-image: url("/assets/cobalt/ic__check.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__check.svg");
  mask-position: center center;
  mask-repeat: no-repeat;
  background-color: white;
  width: 12px;
  height: 19px;
  margin-left: 3px; }

.ui.checkbox input:checked ~ .box:before, .ui.checkbox input:checked ~ label:before {
  background: #00A6F1; }

.ui.toggle.checkbox .box:before {
  -webkit-transition: all 0.1s, ease;
  transition: all 0.1s, ease;
  background: #ecf0f3; }
.ui.toggle.checkbox .box:hover::before {
  background-color: rgba(212, 220, 227, 0.8);
  border: none; }
.ui.toggle.checkbox .box:after, .ui.toggle.checkbox .box label:after {
  box-shadow: 0px 1px 2px 0 #d4dce3, 0px 0px 0px 1px #d4dce3 inset; }
.ui.toggle.checkbox label {
  color: #50677b !important; }
  .ui.toggle.checkbox label:before {
    -webkit-transition: all 0.1s, ease;
    transition: all 0.1s, ease;
    background: #ecf0f3; }
  .ui.toggle.checkbox label:hover::before {
    background-color: rgba(212, 220, 227, 0.8);
    border: none; }
.ui.toggle.checkbox input:checked ~ .box:before, .ui.toggle.checkbox input:checked ~ label:before {
  background-color: #00cd73 !important; }

.ui.toggle.checkbox input:checked ~ .box, .ui.toggle.checkbox input:checked ~ label {
  color: #50677b !important; }

.ui.toggle.checkbox input:checked ~ .box:after, .ui.toggle.checkbox input:checked ~ label:after {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0;
  -webkit-mask-image: none;
  mask-image: none; }

.ui.toggle.checkbox.pull-right label {
  padding-left: 0;
  padding-right: 4em; }
  .ui.toggle.checkbox.pull-right label span {
    margin-right: 1rem; }

.ui.checkbox.pull-right input,
.ui.toggle.checkbox.pull-right label:before {
  left: auto;
  right: 0; }

.ui.toggle.checkbox.pull-right label:after {
  left: auto;
  right: 2rem;
  -webkit-transition: all 0.3s, ease 0s;
  transition: all 0.3s, ease 0s; }

.ui.toggle.checkbox.pull-right input:checked + label:after {
  left: auto;
  right: -0.1rem;
  -webkit-transition: all 0.3s, ease 0s;
  transition: all 0.3s, ease 0s; }

.co-section .ui.toggle.checkbox label {
  padding-left: 3rem;
  padding-top: 0;
  font-size: 0.875rem;
  line-height: 1.365rem;
  font-weight: 300;
  color: #50677b; }
  .co-section .ui.toggle.checkbox label span {
    margin-right: 0rem; }
  .co-section .ui.toggle.checkbox label:before {
    width: 2.5rem;
    height: 1.3rem;
    margin-top: 2px;
    -webkit-transition: all 0.1s, ease;
    transition: all 0.1s, ease;
    background: #d4dce3; }
  .co-section .ui.toggle.checkbox label:hover::before {
    background-color: rgba(176, 191, 204, 0.8);
    border: none; }
  .co-section .ui.toggle.checkbox label:after {
    width: 1.3rem;
    height: 1.3rem;
    right: 1.3rem;
    margin-top: 2px; }
.co-section .ui.toggle.checkbox input:checked ~ .box:after, .co-section .ui.toggle.checkbox input:checked ~ label:after {
  width: 1.3rem;
  height: 1.3rem;
  left: 1.3rem; }
.co-section .ui.toggle.checkbox input:checked ~ label:before {
  margin-top: 2px; }
.co-section .ui.toggle.checkbox.pull-right input:checked ~ .box:after, .co-section .ui.toggle.checkbox.pull-right input:checked ~ label:after {
  left: auto;
  margin-top: 2px; }
.co-section .ui.toggle.checkbox .box:before {
  -webkit-transition: all 0.1s, ease;
  transition: all 0.1s, ease;
  background: #d4dce3;
  margin-top: 2px; }
.co-section .ui.toggle.checkbox .box:hover::before {
  background-color: rgba(176, 191, 204, 0.8);
  border: none; }
.co-section .ui.toggle.checkbox .box:after, .co-section .ui.toggle.checkbox .box label:after {
  box-shadow: 0px 1px 2px 0 #b0bfcc, 0px 0px 0px 1px #b0bfcc inset; }

.ui.dropdown .divider {
  margin: 0; }

.ui.dropdown .menu .search.input input, .ui.dropdown .menu .search.input input:focus {
  font-size: 0.875rem;
  line-height: 1.365rem;
  border-top: 1px solid #ecf0f3 !important;
  border-bottom: 1px solid #ecf0f3 !important;
  border: none; }
.ui.dropdown .menu .search.input .icon__search:before {
  width: 19px;
  right: 0;
  left: initial;
  margin: -0.6875rem 0.7rem; }

.ui.dropdown > .text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  min-height: 21px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-size: 0.875rem;
  line-height: 1.365rem;
  max-width: 100%; }

.ui.multiple.dropdown > .text {
  margin-left: 0; }

.ui.dropdown > .icon__chevron:before {
  content: "";
  background-color: #69859d;
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: transform 0.2s, ease;
  -webkit-transition: ease, -webkit-transform 0.2s;
  transition: ease, -webkit-transform 0.2s;
  transition: transform 0.2s, ease;
  transition: transform 0.2s, ease, -webkit-transform 0.2s; }

.ui.dropdown.active > .icon__chevron:before {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: transform 0.2s, ease;
  -webkit-transition: ease, -webkit-transform 0.2s;
  transition: ease, -webkit-transform 0.2s;
  transition: transform 0.2s, ease;
  transition: transform 0.2s, ease, -webkit-transform 0.2s; }

.ui.errormark.dropdown.active > .icon__chevron {
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: transform 0.2s, ease;
  -webkit-transition: ease, -webkit-transform 0.2s;
  transition: ease, -webkit-transform 0.2s;
  transition: transform 0.2s, ease;
  transition: transform 0.2s, ease, -webkit-transform 0.2s; }

.ui.dropdown > .icon__chevron {
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: transform 0.2s, ease;
  -webkit-transition: ease, -webkit-transform 0.2s;
  transition: ease, -webkit-transform 0.2s;
  transition: transform 0.2s, ease;
  transition: transform 0.2s, ease, -webkit-transform 0.2s; }

.ui.dropdown.active > span .icon__chevron {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: transform 0.2s, ease;
  -webkit-transition: ease, -webkit-transform 0.2s;
  transition: ease, -webkit-transform 0.2s;
  transition: transform 0.2s, ease;
  transition: transform 0.2s, ease, -webkit-transform 0.2s; }

.ui.dropdown.active > .title .icon__chevron:before {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: transform 0.2s, ease;
  -webkit-transition: ease, -webkit-transform 0.2s;
  transition: ease, -webkit-transform 0.2s;
  transition: transform 0.2s, ease;
  transition: transform 0.2s, ease, -webkit-transform 0.2s; }

.ui.dropdown .menu, .ui.dropdown .menu > .item {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 0.875rem;
  line-height: 1.365rem;
  font-weight: 300;
  color: #50677b;
  border-radius: 0.188rem; }

.ui.dropdown .menu > .item {
  padding: 0.3rem 1.4rem !important;
  -webkit-transition: all 0.3s, ease;
  transition: all 0.3s, ease; }

.ui.dropdown:not(.button) > .default.text, .ui.default.dropdown:not(.button) > .text {
  color: #50677b; }

.ui.dropdown .menu {
  margin-top: 7px;
  border: 1px solid #ecf0f3;
  min-width: 100%; }
  .ui.dropdown .menu ::-webkit-scrollbar {
    width: 0.9em; }
  .ui.dropdown .menu ::-webkit-scrollbar-thumb {
    background: #b0bfcc;
    border-radius: 13px;
    border: 3px solid white; }
  .ui.dropdown .menu ::-webkit-scrollbar-track {
    background: white; }

.ui.multi.dropdown .menu.co--only.transition.visible, .ui.dropdown .menu.co--only.transition.visible {
  -webkit-animation: 0.2s slideInY;
  animation: 0.2s slideInY;
  -ms-transform-origin: top center;
  -webkit-transform-origin: top center;
  transform-origin: top center; }

.ui.dropdown .menu > .item {
  margin: 5px;
  padding-left: 1.4rem !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 10px); }
  .ui.dropdown .menu > .item.active {
    background-color: #394958;
    color: white;
    font-weight: 300; }
    .ui.dropdown .menu > .item.active:before {
      -webkit-mask-image: url("/assets/cobalt/ic__check.svg");
      -webkit-mask-position: center center;
      -webkit-mask-repeat: no-repeat;
      mask-image: url("/assets/cobalt/ic__check.svg");
      mask-position: center center;
      mask-repeat: no-repeat;
      background-color: #69859d;
      content: "";
      top: 10px;
      width: 14px;
      height: 12px;
      position: absolute;
      left: 7px;
      border-radius: 0.188rem;
      color: white; }
    .ui.dropdown .menu > .item.active .icon__avatar {
      display: none; }

.ui.dropdown .menu > .input {
  margin: 0px; }

.ui.input input {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  border-radius: 0.188rem;
  -webkit-border-radius: 0.188rem;
  -moz-border-radius: 0.188rem;
  -ms-border-radius: 0.188rem;
  -o-border-radius: 0.188rem;
  background-clip: padding-box;
  padding: .67861429em 3em;
  color: #50677b;
  border: 1px solid #d4dce3; }

.ui.input input:focus, .ui.input.focus input {
  border-color: #b6e8ff !important;
  color: #69859d; }

.ui.dropdown .menu .selected.item, .ui.dropdown.selected {
  background: #f4fcff;
  color: #394958;
  font-weight: 300; }
  .ui.dropdown .menu .selected.item:hover, .ui.dropdown.selected:hover {
    background: #ecf0f3;
    color: #394958;
    font-weight: 300; }

.ui.dropdown .scrolling.menu {
  border-top: 1px solid #ecf0f3;
  max-width: 240px; }

.ui.dropdown .menu > .item:hover {
  background: #ecf0f3;
  color: #394958; }

.ui.dropdown > span .icon__chevron, .ui.dropdown > .title .icon__chevron {
  display: inline-block;
  float: none;
  opacity: 1;
  filter: alpha(opacity=100);
  height: 1em;
  padding: 0;
  top: 4px;
  right: 0px;
  position: absolute;
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: transform 0.2s, ease;
  -webkit-transition: ease, -webkit-transform 0.2s;
  transition: ease, -webkit-transform 0.2s;
  transition: transform 0.2s, ease;
  transition: transform 0.2s, ease, -webkit-transform 0.2s; }

.ui.dropdown > .icon__chevron:before {
  content: "";
  -webkit-mask-image: url("/assets/cobalt/ic__arrow.svg");
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/cobalt/ic__arrow.svg");
  mask-position: center center;
  mask-repeat: no-repeat;
  background-color: #69859d; }

.ui.dropdown {
  color: #50677b; }
  .ui.dropdown .scrolling.menu .icon__avatar {
    position: absolute;
    top: 9px;
    left: 3px;
    height: 13px; }

table .scrolling.menu .icon__avatar {
  top: 8px !important; }
table .full-width-left-text {
  width: 98%; }

.ui.dropdown .menu > .message:not(.ui) {
  color: #50677b; }

.ui.dropdown .menu > .message {
  padding: 1rem;
  font-weight: 300;
  margin-top: -8px; }

.ui.dropdown .menu > .dropdown__message {
  padding: 1rem;
  font-weight: 300; }

.ui.selection.dropdown {
  color: #50677b;
  position: relative;
  border-radius: 0.188rem;
  border: 1px solid #d4dce3;
  -webkit-transition: all 0.2s, ease;
  transition: all 0.2s, ease;
  padding: 0.5rem 2.1rem 0.47rem 1rem;
  font-size: 0.875rem;
  line-height: 1.365rem;
  font-weight: 400;
  line-height: 0rem; }
  .ui.selection.dropdown.icon__chevron {
    top: 18px;
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all 0.2s, ease;
    transition: all 0.2s, ease; }
  .ui.selection.dropdown:hover {
    border-color: #68d0ff; }

.ui.selection.dropdown > .icon__chevron {
  top: 11px;
  position: absolute;
  right: 12px; }

.ui.selection.dropdown > span .icon__chevron, .ui.selection.dropdown > .title .icon__chevron {
  top: 12px;
  right: 11px; }

.ui.selection.visible.dropdown > .text:not(.default) {
  color: #50677b; }

.ui.selection.dropdown .menu {
  border-radius: 0 0 0.188rem 0.188rem; }

.ui.selection.dropdown .menu, .ui.selection.dropdown .menu > .item {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.365rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 10px); }

.ui.selection.dropdown .menu > .item {
  border-top: none;
  margin: 5px;
  padding: 0.3rem 1.4rem !important; }

.ui.selection.active.dropdown, .ui.selection.active.dropdown .menu {
  border-color: #68d0ff; }

.ui.search.input {
  border-bottom: 1px solid #ecf0f3;
  border-top: 1px solid #ecf0f3; }

.ui.scrolling.dropdown .menu .item.item.item, .ui.dropdown .scrolling.menu > .item.item.item {
  padding-right: calc( 1.14285714rem + 0px) !important; }

.ui.checkbox .box:after, .ui.checkbox label:after {
  line-height: 1.4rem; }

.ui.selection.multi.dropdown .ui.label {
  position: relative; }

.ui.selection.multi.dropdown .menu > .item {
  padding: 0.3rem 0.6rem !important; }

.ui.selection.dropdown.multi > span .icon__chevron, .ui.selection.dropdown.multi > .title .icon__chevron {
  background-color: transparent; }

.column-group.ui.dropdown.selection.multi.quarter-horizontal-gutters:first-child {
  padding-left: 0; }

.ui.selection.multi.dropdown {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 0.875rem;
  line-height: 1.365rem;
  height: 40px; }
  .ui.selection.multi.dropdown .ui.label {
    font-size: 0.75rem;
    line-height: 1.15rem;
    font-weight: 400;
    line-height: 1rem;
    text-transform: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 25px;
    margin: 0; }
  .ui.selection.multi.dropdown .group--labels {
    position: absolute;
    padding-right: 35px;
    padding: 0.3rem; }
  .ui.selection.multi.dropdown .title {
    padding: 0.5rem 1rem;
    width: 100%; }
    .ui.selection.multi.dropdown .title .text--truncate {
      width: 90%; }
  .ui.selection.multi.dropdown .ui.checkbox.mixed input ~ .box:before, .ui.selection.multi.dropdown .ui.checkbox.mixed input ~ label:before, .ui.selection.multi.dropdown .ui.checkbox.semi input:checked ~ .box:before, .ui.selection.multi.dropdown .ui.checkbox.semi input:checked ~ label:before {
    background: #ecf0f3;
    border: 1px solid #b0bfcc; }
  .ui.selection.multi.dropdown .ui.checkbox.mixed input ~ .box:after, .ui.selection.multi.dropdown .ui.checkbox.mixed input ~ label:after {
    content: "";
    -webkit-mask-image: url("/assets/cobalt/ic__minus.svg");
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("/assets/cobalt/ic__minus.svg");
    mask-position: center center;
    mask-repeat: no-repeat;
    background-color: #69859d;
    width: 10px;
    margin-left: 4px;
    height: 19px;
    opacity: 1;
    filter: alpha(opacity=100); }
  .ui.selection.multi.dropdown .ui.checkbox.semi input:checked ~ .box:after, .ui.selection.multi.dropdown .ui.checkbox.semi input:checked ~ label:after {
    content: "";
    -webkit-mask-image: url("/assets/cobalt/ic__check.svg");
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("/assets/cobalt/ic__check.svg");
    mask-position: center center;
    mask-repeat: no-repeat;
    background-color: #69859d;
    width: 10px;
    margin-left: 4px; }

.ui.item.checkbox.checked {
  background: #f4fcff;
  z-index: 1; }

.ui.item.checkbox.mixed, .ui.item.checkbox.checked.semi {
  background: none; }
  .ui.item.checkbox.mixed:hover, .ui.item.checkbox.checked.semi:hover {
    background: #ecf0f3; }

.ui.multi.dropdown .menu > .ui.item label {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 0.875rem;
  line-height: 1.365rem;
  font-weight: 300;
  color: #50677b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0px;
  cursor: pointer; }

.ui.selection.multi.dropdown .ui.label.total--num {
  text-overflow: inherit;
  padding-right: .833rem;
  margin-right: 0px; }

.ui.selection.big.dropdown {
  height: 73px; }
  .ui.selection.big.dropdown h3 {
    margin: 0;
    line-height: 1.3rem; }
  .ui.selection.big.dropdown span {
    font-size: 0.75rem;
    line-height: 1.15rem;
    color: #69859d; }
  .ui.selection.big.dropdown .menu {
    border-top: 1px solid #ecf0f3 !important; }
  .ui.selection.big.dropdown .menu > .item {
    padding: 1rem !important; }
    .ui.selection.big.dropdown .menu > .item.active:before {
      display: none; }
  .ui.selection.big.dropdown .icon__chevron {
    top: 27px;
    right: 15px;
    position: absolute; }
  .ui.selection.big.dropdown .default h3 {
    line-height: 2.5rem;
    color: #b0bfcc; }
  .ui.selection.big.dropdown .text {
    padding: 0.5rem 1rem 0.5rem 0; }
  .ui.selection.big.dropdown .trial--color h3 {
    color: #42c9b9; }

@media only screen and (min-width: 768px) {
  .ui.scrolling.dropdown.big .menu, .ui.dropdown.big .scrolling.menu {
    max-height: 20rem; } }
.example--code .ui.loading.selection.dropdown > span .icon__chevron {
  right: 22px; }
.example--code .ui.checkmark.dropdown > span i.icon__chevron:after, .example--code .ui.checkmark.dropdown > i.icon__chevron:after {
  margin: 0em 0em 0em -0.4em; }

/*--------------
      Popup
---------------*/
.co-popup {
  min-width: 330px;
  top: 110%;
  right: 0;
  cursor: auto;
  position: absolute;
  outline: none;
  margin: 0rem;
  padding: 0rem;
  background: white;
  font-size: 1em;
  text-shadow: none;
  text-align: left;
  visibility: hidden;
  -o-box-shadow: 0px 0px 20px 0px rgba(15, 46, 77, 0.15), 0px 2px 20px 0px rgba(15, 46, 77, 0.15);
  -ms-box-shadow: 0px 0px 20px 0px rgba(15, 46, 77, 0.15), 0px 2px 20px 0px rgba(15, 46, 77, 0.15);
  box-shadow: 0px 0px 20px 0px rgba(15, 46, 77, 0.15), 0px 2px 20px 0px rgba(15, 46, 77, 0.15);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-radius: 0.188rem;
  z-index: 1111;
  opacity: 0;
  filter: alpha(opacity=0); }
  .co-popup.transition.visible {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 1;
    filter: alpha(opacity=100);
    visibility: visible; }
    .co-popup.transition.visible:before {
      opacity: 1;
      filter: alpha(opacity=100); }
  .co-popup:before {
    pointer-events: none;
    position: absolute;
    content: '';
    font-size: 0.875rem;
    line-height: 1.365rem;
    width: 14px;
    height: 14px;
    right: 22px;
    top: -5px;
    opacity: 0;
    filter: alpha(opacity=0);
    background: white;
    -ms-transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    border-radius: 0.188rem;
    z-index: 2;
    -o-box-shadow: 1px 1px 0px 0px #ecf0f3;
    -ms-box-shadow: 1px 1px 0px 0px #ecf0f3;
    box-shadow: 1px 1px 0px 0px #ecf0f3; }
  .co-popup.box__example {
    position: relative;
    opacity: 1;
    filter: alpha(opacity=100);
    visibility: visible; }

.nav-dropdowns-main {
  position: relative;
  width: 100%;
  background: #002c40;
  margin-left: 0; }

.menu-item {
  position: relative;
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 28px;
  padding: 0px 7px;
  float: left;
  font-weight: 300;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .menu-item:hover .menu-item__content, .menu-item.active .menu-item__content {
    opacity: 1;
    filter: alpha(opacity=100); }
  .menu-item:hover .icon__myapps, .menu-item.active .icon__myapps {
    background-color: #00A6F1; }
  .menu-item .icon__chevron--down {
    background-color: white;
    height: 16px;
    margin-bottom: -4px;
    opacity: 1;
    filter: alpha(opacity=100); }

.menu-item__content {
  color: white;
  opacity: 0.6;
  filter: alpha(opacity=60);
  -webkit-transition: all 0.2s, ease;
  transition: all 0.2s, ease; }

.menu-item__badge:before, .menu-item__badge--left:before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ff4641;
  z-index: 1;
  border: 2px solid #002c40; }

.menu-item__badge--left:before {
  left: 8px; }

.menu-item.active .icon__chevron--down {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: transform 0.2s, ease;
  -webkit-transition: ease, -webkit-transform 0.2s;
  transition: ease, -webkit-transform 0.2s;
  transition: transform 0.2s, ease;
  transition: transform 0.2s, ease, -webkit-transform 0.2s; }

.co-popup__content {
  position: relative;
  max-height: 370px;
  min-height: 145px;
  overflow: auto; }
  .co-popup__content .co-figure__text--bottom img {
    width: 50px;
    height: 50px !important; }
  .co-popup__content .content--promo {
    background: url("/assets/cobalt/myapps__promo--bg.png" bottom center no-repeat);
    background-size: cover;
    text-align: center;
    font-weight: 300;
    height: 245px; }
    .co-popup__content .content--promo h2 {
      margin-top: 0px;
      font-weight: 300; }
    .co-popup__content .content--promo h2, .co-popup__content .content--promo h4 {
      color: #00A6F1;
      font-weight: 300; }

.co-popup__footer .button {
  border-radius: 0 0 0.188rem 0.188rem;
  padding: 13px; }

.co-figure__text--bottom .action__admin {
  display: none;
  width: 28px;
  height: 28px;
  background: white;
  position: absolute;
  z-index: 2;
  top: -11px;
  right: -11px; }
.co-figure__text--bottom:hover .action__admin {
  display: block;
  -webkit-animation: fadeIn 0.3s;
  animation: fadeIn 0.3s; }
.co-figure__text--bottom.installing:hover {
  border: 1px solid transparent;
  background-color: transparent;
  cursor: default; }
.co-figure__text--bottom.installing::after {
  content: "installing...";
  font-size: 0.688rem;
  line-height: 1rem;
  color: #b0bfcc;
  position: absolute;
  left: 50%;
  bottom: -4px;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%); }

.action__admin i:before {
  width: 26px;
  height: 26px;
  float: right;
  -webkit-transition: all 0.5s, ease;
  transition: all 0.5s, ease; }

.action__admin:hover i:before {
  background-color: #50677b;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: transform 0.3s, ease;
  -webkit-transition: ease, -webkit-transform 0.3s;
  transition: ease, -webkit-transform 0.3s;
  transition: transform 0.3s, ease;
  transition: transform 0.3s, ease, -webkit-transform 0.3s; }

.co-figure__wrapper .action__error {
  position: absolute;
  top: -9px;
  left: -9px;
  cursor: pointer;
  z-index: 1; }
  .co-figure__wrapper .action__error i.icon__exclamation--16, .co-figure__wrapper .action__error i.co-wizard-nav-icon--error, .co-figure__wrapper .action__error .co-wizard > .middle nav ul li.co-nav--error i.icon__co-nav, .co-wizard > .middle nav ul li.co-nav--error .co-figure__wrapper .action__error i.icon__co-nav {
    width: 20px;
    height: 20px;
    border-radius: 46px;
    background-color: #ff4641;
    position: relative;
    display: block;
    -webkit-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear; }
    .co-figure__wrapper .action__error i.icon__exclamation--16:before, .co-figure__wrapper .action__error i.co-wizard-nav-icon--error:before, .co-figure__wrapper .action__error .co-wizard > .middle nav ul li.co-nav--error i.icon__co-nav:before, .co-wizard > .middle nav ul li.co-nav--error .co-figure__wrapper .action__error i.icon__co-nav:before {
      content: "";
      width: 25px;
      height: 25px;
      position: absolute;
      display: block;
      top: -3px;
      left: -3px;
      background-color: white; }
  .co-figure__wrapper .action__error:hover i.icon__exclamation--16, .co-figure__wrapper .action__error:hover i.co-wizard-nav-icon--error, .co-figure__wrapper .action__error:hover .co-wizard > .middle nav ul li.co-nav--error i.icon__co-nav, .co-wizard > .middle nav ul li.co-nav--error .co-figure__wrapper .action__error:hover i.icon__co-nav {
    background-color: #e2413c; }

/*--------------
    Tooltip
---------------*/
/* Content */
[data-tooltip] {
  position: relative; }

/* Arrow */
[data-tooltip]:before {
  pointer-events: none;
  position: absolute;
  content: '';
  font-size: 0.875rem;
  line-height: 1.365rem;
  width: 0.71428571em;
  height: 0.71428571em;
  background: white;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: 2;
  -o-box-shadow: 1px 1px 0px 0px #b0bfcc;
  -ms-box-shadow: 1px 1px 0px 0px #b0bfcc;
  box-shadow: 1px 1px 0px 0px #b0bfcc; }

/* Popup */
[data-tooltip]:after {
  pointer-events: none;
  content: attr(data-tooltip);
  position: absolute;
  text-transform: none;
  text-align: left;
  white-space: pre;
  font-size: 0.875rem;
  line-height: 1.365rem;
  border: 1px solid #ecf0f3;
  line-height: 1.4285em;
  max-width: none;
  background: white;
  padding: 0.833em 1em;
  font-weight: 400;
  font-style: normal;
  color: #50677b;
  border-radius: 0.188rem;
  -o-box-shadow: 0px 2px 4px 0px rgba(15, 46, 77, 0.12), 0px 2px 10px 0px rgba(15, 46, 77, 0.15);
  -ms-box-shadow: 0px 2px 4px 0px rgba(15, 46, 77, 0.12), 0px 2px 10px 0px rgba(15, 46, 77, 0.15);
  box-shadow: 0px 2px 4px 0px rgba(15, 46, 77, 0.12), 0px 2px 10px 0px rgba(15, 46, 77, 0.15);
  z-index: 1; }

.align-center[data-tooltip]:after {
  text-align: center; }

.align-right[data-tooltip]:after {
  text-align: right; }

/* Default Position (Top Center) */
[data-tooltip]:not([data-position]):before {
  top: auto;
  right: auto;
  bottom: 100%;
  left: 50%;
  background: white;
  margin-left: -0.07142857rem;
  margin-bottom: 0.14285714rem; }

[data-tooltip]:not([data-position]):after {
  left: 50%;
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 100%;
  margin-bottom: 0.5em; }

/* Animation */
[data-tooltip]:before,
[data-tooltip]:after {
  pointer-events: none;
  visibility: hidden; }

[data-tooltip]:before {
  opacity: 0;
  -ms-transform: rotate(45deg) scale(0) !important;
  -webkit-transform: rotate(45deg) scale(0) !important;
  transform: rotate(45deg) scale(0) !important;
  -ms-transform-origin: center top;
  -webkit-transform-origin: center top;
  transform-origin: center top;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease; }

[data-tooltip]:after {
  opacity: 1;
  -ms-transform-origin: center bottom;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease; }

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  pointer-events: auto; }

[data-tooltip]:hover:before {
  -ms-transform: rotate(45deg) scale(1) !important;
  -webkit-transform: rotate(45deg) scale(1) !important;
  transform: rotate(45deg) scale(1) !important;
  opacity: 1; }

/* Animation Position */
[data-tooltip]:after,
[data-tooltip][data-position="top center"]:after,
[data-tooltip][data-position="bottom center"]:after {
  -ms-transform: translateX(-50%) scale(0) !important;
  -webkit-transform: translateX(-50%) scale(0) !important;
  transform: translateX(-50%) scale(0) !important; }

[data-tooltip]:hover:after,
[data-tooltip][data-position="bottom center"]:hover:after {
  -ms-transform: translateX(-50%) scale(1) !important;
  -webkit-transform: translateX(-50%) scale(1) !important;
  transform: translateX(-50%) scale(1) !important; }

[data-tooltip][data-position="left center"]:after,
[data-tooltip][data-position="right center"]:after {
  -ms-transform: translateY(-50%) scale(0) !important;
  -webkit-transform: translateY(-50%) scale(0) !important;
  transform: translateY(-50%) scale(0) !important; }

[data-tooltip][data-position="left center"]:hover:after,
[data-tooltip][data-position="right center"]:hover:after {
  -ms-transform: translateY(-50%) scale(1) !important;
  -webkit-transform: translateY(-50%) scale(1) !important;
  transform: translateY(-50%) scale(1) !important; }

[data-tooltip][data-position="top left"]:after,
[data-tooltip][data-position="top right"]:after,
[data-tooltip][data-position="bottom left"]:after,
[data-tooltip][data-position="bottom right"]:after {
  -ms-transform: scale(0) !important;
  -webkit-transform: scale(0) !important;
  transform: scale(0) !important; }

[data-tooltip][data-position="top left"]:hover:after,
[data-tooltip][data-position="top right"]:hover:after,
[data-tooltip][data-position="bottom left"]:hover:after,
[data-tooltip][data-position="bottom right"]:hover:after {
  -ms-transform: scale(1) !important;
  -webkit-transform: scale(1) !important;
  transform: scale(1) !important; }

/*--------------
    Inverted
---------------*/
/* Arrow */
[data-tooltip][data-inverted]:before {
  -o-box-shadow: none !important;
  -ms-box-shadow: none !important;
  box-shadow: none !important; }

/* Arrow Position */
[data-tooltip][data-inverted]:before {
  background: #004768; }

/* Popup  */
[data-tooltip][data-inverted]:after {
  background: #004768;
  color: white;
  border: none;
  -o-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none; }

[data-tooltip][data-inverted]:after .header {
  background-color: none;
  color: white; }

/*--------------
    Error
---------------*/
/* Arrow */
[data-tooltip][data-error]:before {
  -o-box-shadow: none !important;
  -ms-box-shadow: none !important;
  box-shadow: none !important; }

/* Arrow Position */
[data-tooltip][data-error]:before {
  background: #ff4641; }

/* Popup  */
[data-tooltip][data-error]:after {
  background: #ff4641;
  color: white;
  border: none;
  -o-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none; }

[data-tooltip][data-error]:after .header {
  background-color: none;
  color: white; }

/*--------------
    Position
---------------*/
[data-position="top center"][data-tooltip]:after {
  top: auto;
  right: auto;
  left: 50%;
  bottom: 100%;
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  margin-bottom: 0.5em; }

[data-position="top center"][data-tooltip]:before {
  top: auto;
  right: auto;
  bottom: 100%;
  left: 50%;
  background: white;
  margin-left: -0.07142857rem;
  margin-bottom: 0.14285714rem; }

[data-position="top left"][data-tooltip]:after {
  top: auto;
  right: auto;
  left: 0;
  bottom: 100%;
  margin-bottom: 0.5em; }

[data-position="top left"][data-tooltip]:before {
  top: auto;
  right: auto;
  bottom: 100%;
  left: 1em;
  margin-left: -0.07142857rem;
  margin-bottom: 0.14285714rem; }

[data-position="top right"][data-tooltip]:after {
  top: auto;
  left: auto;
  right: 0;
  bottom: 100%;
  margin-bottom: 0.5em; }

[data-position="top right"][data-tooltip]:before {
  top: auto;
  left: auto;
  bottom: 100%;
  right: 1em;
  margin-left: -0.07142857rem;
  margin-bottom: 0.14285714rem; }

[data-position="bottom center"][data-tooltip]:after {
  bottom: auto;
  right: auto;
  left: 50%;
  top: 100%;
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  margin-top: 0.5em; }

[data-position="bottom center"][data-tooltip]:before {
  bottom: auto;
  right: auto;
  top: 100%;
  left: 50%;
  margin-left: -0.07142857rem;
  margin-top: 0.14285714rem; }

[data-position="bottom left"][data-tooltip]:after {
  left: 0;
  top: 100%;
  margin-top: 0.5em; }

[data-position="bottom left"][data-tooltip]:before {
  bottom: auto;
  right: auto;
  top: 100%;
  left: 1em;
  margin-left: -0.07142857rem;
  margin-top: 0.14285714rem; }

[data-position="bottom right"][data-tooltip]:after {
  right: 0;
  top: 100%;
  margin-top: 0.5em; }

[data-position="bottom right"][data-tooltip]:before {
  bottom: auto;
  left: auto;
  top: 100%;
  right: 1em;
  margin-left: -0.14285714rem;
  margin-top: 0.07142857rem; }

[data-position="left center"][data-tooltip]:after {
  right: 100%;
  top: 50%;
  margin-right: 0.5em;
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }

[data-position="left center"][data-tooltip]:before {
  right: 100%;
  top: 50%;
  margin-top: -0.14285714rem;
  margin-right: -0.07142857rem; }

[data-position="right center"][data-tooltip]:after {
  left: 100%;
  top: 50%;
  margin-left: 0.5em;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }

[data-position="right center"][data-tooltip]:before {
  left: 100%;
  top: 50%;
  margin-top: -0.07142857rem;
  margin-left: 0.14285714rem; }

/* Arrow */
[data-position~="bottom"][data-tooltip]:before {
  background: white;
  -o-box-shadow: -1px -1px 0px 0px #b0bfcc;
  -ms-box-shadow: -1px -1px 0px 0px #b0bfcc;
  box-shadow: -1px -1px 0px 0px #b0bfcc; }

[data-position="left center"][data-tooltip]:before {
  background: white;
  -o-box-shadow: 1px -1px 0px 0px #b0bfcc;
  -ms-box-shadow: 1px -1px 0px 0px #b0bfcc;
  box-shadow: 1px -1px 0px 0px #b0bfcc; }

[data-position="right center"][data-tooltip]:before {
  background: white;
  -o-box-shadow: -1px 1px 0px 0px #b0bfcc;
  -ms-box-shadow: -1px 1px 0px 0px #b0bfcc;
  box-shadow: -1px 1px 0px 0px #b0bfcc; }

[data-position~="top"][data-tooltip]:before {
  background: white; }

/* Inverted Arrow Color */
[data-inverted][data-position~="bottom"][data-tooltip]:before {
  background: #004768;
  -o-box-shadow: -1px -1px 0px 0px #b0bfcc;
  -ms-box-shadow: -1px -1px 0px 0px #b0bfcc;
  box-shadow: -1px -1px 0px 0px #b0bfcc; }

[data-inverted][data-position="left center"][data-tooltip]:before {
  background: #004768;
  -o-box-shadow: 1px -1px 0px 0px #b0bfcc;
  -ms-box-shadow: 1px -1px 0px 0px #b0bfcc;
  box-shadow: 1px -1px 0px 0px #b0bfcc; }

[data-inverted][data-position="right center"][data-tooltip]:before {
  background: #004768;
  -o-box-shadow: -1px 1px 0px 0px #b0bfcc;
  -ms-box-shadow: -1px 1px 0px 0px #b0bfcc;
  box-shadow: -1px 1px 0px 0px #b0bfcc; }

[data-inverted][data-position~="top"][data-tooltip]:before {
  background: #004768; }

/* Error Arrow Color */
[data-error][data-position~="bottom"][data-tooltip]:before {
  background: #ff4641;
  -o-box-shadow: -1px -1px 0px 0px #b0bfcc;
  -ms-box-shadow: -1px -1px 0px 0px #b0bfcc;
  box-shadow: -1px -1px 0px 0px #b0bfcc; }

[data-error][data-position="left center"][data-tooltip]:before {
  background: #ff4641;
  -o-box-shadow: 1px -1px 0px 0px #b0bfcc;
  -ms-box-shadow: 1px -1px 0px 0px #b0bfcc;
  box-shadow: 1px -1px 0px 0px #b0bfcc; }

[data-error][data-position="right center"][data-tooltip]:before {
  background: #ff4641;
  -o-box-shadow: -1px 1px 0px 0px #b0bfcc;
  -ms-box-shadow: -1px 1px 0px 0px #b0bfcc;
  box-shadow: -1px 1px 0px 0px #b0bfcc; }

[data-error][data-position~="top"][data-tooltip]:before {
  background: #ff4641; }

[data-position~="bottom"][data-tooltip]:before {
  -ms-transform-origin: center bottom;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom; }

[data-position~="bottom"][data-tooltip]:after {
  -ms-transform-origin: center top;
  -webkit-transform-origin: center top;
  transform-origin: center top; }

[data-position="left center"][data-tooltip]:before {
  -ms-transform-origin: top center;
  -webkit-transform-origin: top center;
  transform-origin: top center; }

[data-position="left center"][data-tooltip]:after {
  -ms-transform-origin: right center;
  -webkit-transform-origin: right center;
  transform-origin: right center; }

[data-position="right center"][data-tooltip]:before {
  -ms-transform-origin: right center;
  -webkit-transform-origin: right center;
  transform-origin: right center; }

[data-position="right center"][data-tooltip]:after {
  -ms-transform-origin: left center;
  -webkit-transform-origin: left center;
  transform-origin: left center; }

* {
  -webkit-tap-highlight-color: transparent;
  font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -webkit-font-smoothing: subpixel-antialiased; }

ul li {
  margin: 0; }

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #50677b;
  margin: 0; }

h1, h2, h3, h4, .p1, .p2, .p3, .meta, .label {
  margin: 0px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

h1 {
  color: #222c34;
  font-size: 32px;
  line-height: 40px; }

h2 {
  color: #394958;
  font-size: 24px;
  line-height: 32px; }

h3 {
  color: #394958;
  font-size: 20px;
  line-height: 32px; }

h4 {
  color: #394958;
  font-size: 16px;
  line-height: 24px; }

.p2 {
  font-size: 12px;
  line-height: 16px; }

.p3 {
  font-size: 11px;
  line-height: 16px; }

.meta {
  font-size: 10px;
  line-height: 16px; }

.label {
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase; }

.ui.primary.button.-mkt {
  padding: 18px 30px;
  text-transform: uppercase;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 500; }
.ui.primary.button.-orange {
  border: 2px solid #ec8a00;
  background-color: #ec8a00; }
  .ui.primary.button.-orange:hover {
    border: 2px solid #ec8a00 !important;
    background-color: #ec8a00 !important; }
  .ui.primary.button.-orange.-nobg {
    color: #ec8a00; }
    .ui.primary.button.-orange.-nobg:hover {
      color: #ec8a00 !important; }
.ui.primary.button.-blue {
  border: 2px solid #3a99d0;
  background-color: #3a99d0; }
  .ui.primary.button.-blue:hover {
    border: 2px solid #3a99d0 !important;
    background-color: #3a99d0 !important; }
  .ui.primary.button.-blue.-nobg {
    color: #3a99d0; }
    .ui.primary.button.-blue.-nobg:hover {
      color: #3a99d0 !important; }
.ui.primary.button.-nobg {
  background-color: transparent !important; }
  .ui.primary.button.-nobg:hover {
    background-color: transparent !important; }

.topnav {
  background-color: white;
  border-bottom: 1px solid #ecf0f3;
  margin-bottom: 0; }
  .topnav .topnav__grid .topnav__logo {
    margin-bottom: 0; }
  .topnav .topnav__grid .topnav__td-logo {
    float: left;
    display: block;
    width: 230px;
    height: 64px;
    background-image: url(https://prd-cdn-talkdesk.talkdesk.com/cdn-assets/latest/talkdesk/brand/sub_brands/td_appconnect/talkdeskappconnect_logo.svg);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat; }
  .topnav .topnav__grid .topnav__td-logo.developers {
    background-image: url(https://prd-cdn-talkdesk.talkdesk.com/cdn-assets/latest/talkdesk/brand/sub_brands/td_appconnect/talkdeskappconnect_logo.svg);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat; }
  .topnav .topnav__grid .topnav__appconnect {
    float: left;
    font-size: 22px;
    letter-spacing: 0.5px;
    color: #69859d;
    text-decoration: none;
    font-weight: 300;
    line-height: 64px;
    padding-left: 8px; }

.topnav__menu {
  -webkit-transition: 0.2s ease-in-out all;
  transition: 0.2s ease-in-out all;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: fixed;
  height: 56px;
  top: -56px;
  background-color: white;
  border-bottom: 1px solid #ecf0f3;
  opacity: 0;
  z-index: -1;
  width: 100%; }
  @media screen and (max-width: 640px) {
    .topnav__menu {
      display: none !important; } }

.topnav__menu.active {
  -webkit-transform: translateY(56px);
      -ms-transform: translateY(56px);
          transform: translateY(56px);
  z-index: 100;
  opacity: 1; }
  .topnav__menu.active .menu__grid .menu__content .menu__logo .logo.logo--bridge:before {
    z-index: -1;
    -webkit-transform: scale(1.8);
        -ms-transform: scale(1.8);
            transform: scale(1.8);
    opacity: 0; }

.topnav__menu .menu__grid .menu__content {
  margin-bottom: 0; }
  .topnav__menu .menu__grid .menu__content .menu__logo {
    float: left;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 12px;
    margin-right: 16px; }
    .topnav__menu .menu__grid .menu__content .menu__logo:after {
      content: "";
      display: table;
      clear: both; }
    .topnav__menu .menu__grid .menu__content .menu__logo .logo {
      width: 32px;
      height: 32px;
      float: left;
      border-radius: 2px;
      overflow: hidden; }
      .topnav__menu .menu__grid .menu__content .menu__logo .logo.logo--talkdesk {
        background-image: url(https://prd-cdn-talkdesk.talkdesk.com/cdn-assets/latest/talkdesk/brand/main_brand/avatar/talkdesk_avatar_square.svg);
        background-position: center center;
        background-size: 100%;
        background-repeat: no-repeat; }
      .topnav__menu .menu__grid .menu__content .menu__logo .logo.logo--partner {
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat; }
      .topnav__menu .menu__grid .menu__content .menu__logo .logo.logo--bridge {
        position: relative;
        float: left;
        margin: 0 8px;
        width: 16px;
        height: 32px;
        background-image: url(nav-heart.svg);
        background-position: center center;
        background-size: 100%;
        background-repeat: no-repeat;
        background-size: 12px; }
        .topnav__menu .menu__grid .menu__content .menu__logo .logo.logo--bridge:before {
          -webkit-transition: 0.8s ease-in-out all;
          transition: 0.8s ease-in-out all;
          width: 12px;
          height: 12px;
          content: "";
          top: 10px;
          left: 2px;
          opacity: 1;
          -webkit-transform: scale(0.9);
              -ms-transform: scale(0.9);
                  transform: scale(0.9);
          position: absolute;
          background-image: url(nav-heart-active.svg);
          background-position: center center;
          background-size: 100%;
          background-repeat: no-repeat; }

.topnav__menu .partner__name {
  display: none;
  float: left;
  line-height: 54px; }
  @media screen and (min-width: 641px) and (max-width: 800px) {
    .topnav__menu .partner__name {
      display: inline-block; } }

.topnav__menu .button {
  -webkit-transition: 0.2s ease-in-out all;
  transition: 0.2s ease-in-out all;
  float: right;
  box-sizing: border-box;
  padding: 0 40px;
  text-decoration: none;
  line-height: 40px;
  display: block;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  background-color: #00A6F1;
  border-radius: 3px;
  color: white;
  margin-top: 8px; }
  .topnav__menu .button:hover {
    background-color: #007db6; }

.topnav__menu .navmenu {
  float: left;
  padding: 0;
  margin: 0; }
  @media screen and (max-width: 880px) {
    .topnav__menu .navmenu {
      display: none; } }
  .topnav__menu .navmenu:before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 16px;
    background-color: #d4dce3;
    margin-top: 20px;
    margin-right: 14px; }
  .topnav__menu .navmenu .navmenu__item {
    vertical-align: top;
    list-style: none;
    display: inline-block;
    margin-right: 24px; }
    @media screen and (max-width: 998px) {
      .topnav__menu .navmenu .navmenu__item {
        margin-right: 15px; } }
    .topnav__menu .navmenu .navmenu__item a {
      display: block;
      -webkit-transition: 0.2s ease-in-out color;
      transition: 0.2s ease-in-out color;
      text-decoration: none;
      color: #69859d;
      line-height: 28px;
      padding-top: 12px;
      font-size: 14px; }
      @media screen and (max-width: 998px) {
        .topnav__menu .navmenu .navmenu__item a {
          font-size: 13px; } }
      .topnav__menu .navmenu .navmenu__item a:hover {
        color: #394958; }
    .topnav__menu .navmenu .navmenu__item.navmenu__item--active a {
      border-bottom: 2px solid #00A6F1; }

.info__header {
  margin-bottom: 32px; }
  .info__header:after {
    content: "";
    display: table;
    clear: both; }
  .info__header .header__icon {
    float: left;
    width: 72px;
    height: 72px;
    border-radius: 3px;
    overflow: hidden;
    margin-right: 16px;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat; }
    @media screen and (max-width: 640px) {
      .info__header .header__icon {
        margin: 0 auto;
        float: none;
        margin-bottom: 32px; } }
  .info__header .header__info {
    float: left;
    position: relative; }
    @media screen and (max-width: 640px) {
      .info__header .header__info {
        text-align: center;
        margin: 0 auto;
        float: none; } }
    .info__header .header__info:after {
      content: "";
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 40px;
      height: 2px;
      background-color: #00A6F1; }
      @media screen and (max-width: 640px) {
        .info__header .header__info:after {
          display: none; } }
    .info__header .header__info h1 {
      margin-top: -8px; }
    .info__header .header__info .p2 {
      margin-top: 4px;
      padding-bottom: 20px; }
      .info__header .header__info .p2 a {
        -webkit-transition: 0.1s ease-in-out all;
        transition: 0.1s ease-in-out all;
        color: #00A6F1;
        text-decoration: none;
        font-size: inherit;
        line-height: inherit; }
        .info__header .header__info .p2 a:hover {
          color: #007db6; }
      .info__header .header__info .p2 span {
        opacity: 0.5;
        padding: 0 8px;
        display: inline-block; }

.app__info {
  padding-top: 30px; }
  .app__info .info__content {
    margin-bottom: 0; }
    .app__info .info__content .info__main {
      padding-top: 32px;
      margin-bottom: 62px; }
      .app__info .info__content .info__main:after {
        content: "";
        display: table;
        clear: both; }
      @media screen and (max-width: 640px) {
        .app__info .info__content .info__main {
          padding-top: 0px; } }
      .app__info .info__content .info__main .main__content {
        float: left;
        width: calc(100% - 200px); }
        @media screen and (max-width: 640px) {
          .app__info .info__content .info__main .main__content {
            padding-top: 50px;
            width: 100%; } }
        .app__info .info__content .info__main .main__content h2 {
          margin-top: -8px;
          padding-bottom: 16px; }
        .app__info .info__content .info__main .main__content p {
          font-size: 14px;
          line-height: 24px; }
        .app__info .info__content .info__main .main__content ul {
          list-style-type: disc; }
          .app__info .info__content .info__main .main__content ul li {
            font-size: 14px;
            line-height: 24px;
            font-weight: 300; }
        .app__info .info__content .info__main .main__content .content__columns {
          box-sizing: border-box;
          -webkit-column-count: 2;
             -moz-column-count: 2;
                  column-count: 2;
          orphans: 3;
          -webkit-column-gap: 32px;
             -moz-column-gap: 32px;
                  column-gap: 32px; }
          @media screen and (max-width: 640px) {
            .app__info .info__content .info__main .main__content .content__columns {
              -webkit-column-count: 1;
                 -moz-column-count: 1;
                      column-count: 1;
              -webkit-column-gap: 0px;
                 -moz-column-gap: 0px;
                      column-gap: 0px; } }
          .app__info .info__content .info__main .main__content .content__columns .content__column {
            -webkit-column-break-inside: avoid;
               page-break-inside: avoid;
                    break-inside: avoid-column; }
            .app__info .info__content .info__main .main__content .content__columns .content__column h3 {
              padding-top: 22px;
              font-weight: 600;
              color: #304958;
              font-size: 16px;
              line-height: 24px; }
            .app__info .info__content .info__main .main__content .content__columns .content__column p {
              padding-bottom: 2px; }

.main__sidebar {
  box-sizing: border-box;
  float: left;
  width: 200px;
  padding-right: 32px;
  position: relative; }
  .main__sidebar:after {
    content: "";
    display: table;
    clear: both; }
  @media screen and (max-width: 640px) {
    .main__sidebar {
      padding: 0;
      position: relative;
      width: 100%;
      top: 0; } }
  .main__sidebar .button {
    -webkit-transition: 0.2s ease-in-out all;
    transition: 0.2s ease-in-out all;
    text-decoration: none;
    display: block;
    line-height: 40px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    background-color: #00A6F1;
    border-radius: 3px;
    color: white; }
    @media screen and (max-width: 640px) {
      .main__sidebar .button {
        width: 240px;
        margin: 0 auto;
        float: none; } }
    @media screen and (max-width: 480px) {
      .main__sidebar .button {
        width: 100%; } }
    .main__sidebar .button:hover {
      background-color: #007db6; }
  .main__sidebar .sidebar__links {
    padding: 2px 0px 0px 0px;
    text-align: right;
    margin: 0px;
    margin-top: 8px; }
    .main__sidebar .sidebar__links.-no-button {
      margin-top: -8px; }
    @media screen and (max-width: 640px) {
      .main__sidebar .sidebar__links {
        display: none; } }
    .main__sidebar .sidebar__links li {
      list-style: none;
      font-size: 12px;
      line-height: 24px; }
      .main__sidebar .sidebar__links li a {
        font-size: inherit;
        line-height: inherit;
        text-decoration: none;
        color: #69859d; }
    .main__sidebar .sidebar__links li:hover a {
      color: #00A6F1; }

.app__gallery {
  padding-top: 100px;
  position: relative;
  overflow: hidden; }
  .app__gallery .gallery__grid {
    background-color: #d4dce3;
    max-width: 100%; }
    .app__gallery .gallery__grid .column-group {
      margin-left: 0; }
    .app__gallery .gallery__grid .gallery__content {
      padding-left: 0;
      margin-bottom: 0; }

.app__gallery .control, .modal__carousel .control {
  cursor: pointer;
  height: 50%;
  position: absolute;
  z-index: 10;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 128px; }
  @media screen and (max-width: 640px) {
    .app__gallery .control, .modal__carousel .control {
      display: none !important; } }
  .app__gallery .control::before, .modal__carousel .control::before {
    -webkit-transition: 0.15s ease-in-out all;
    transition: 0.15s ease-in-out all;
    content: "";
    position: absolute;
    width: 64px;
    height: 64px;
    background-color: white;
    box-shadow: 0px 8px 16px rgba(0, 0, 25, 0.25);
    border-radius: 50%;
    top: 50%;
    opacity: 0;
    -webkit-transform: translateY(-50%) scale(0.8);
        -ms-transform: translateY(-50%) scale(0.8);
            transform: translateY(-50%) scale(0.8);
    background-repeat: no-repeat;
    background-position: center center; }
  .app__gallery .control::before, .modal__carousel .control::before {
    opacity: 1;
    -webkit-transform: translateY(-50%) scale(1);
        -ms-transform: translateY(-50%) scale(1);
            transform: translateY(-50%) scale(1); }
    @media screen and (max-width: 640px) {
      .app__gallery .control::before, .modal__carousel .control::before {
        -webkit-transform: translateY(-50%) scale(0.6);
            -ms-transform: translateY(-50%) scale(0.6);
                transform: translateY(-50%) scale(0.6); } }
  .app__gallery .control.prev, .modal__carousel .control.prev {
    left: 0; }
    .app__gallery .control.prev:before, .modal__carousel .control.prev:before {
      left: 24px;
      background-image: url("/assets/control-prev.svg"); }
  .app__gallery .control.next, .modal__carousel .control.next {
    right: 0; }
    .app__gallery .control.next:before, .modal__carousel .control.next:before {
      right: 24px;
      background-image: url("/assets/control-next.svg"); }

.app__gallery .carousel {
  z-index: 1;
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 65px; }
  .app__gallery .carousel .slide {
    cursor: pointer;
    display: inline-block;
    position: relative;
    max-width: 800px;
    border-radius: 0px 0px 4px 4px;
    box-shadow: 0px 16px 40px rgba(0, 16, 24, 0.2);
    margin: 0 20px;
    background-position: center center;
    background-size: cover;
    opacity: 1;
    -webkit-transition: opacity 0.6s ease-in-out;
    transition: opacity 0.6s ease-in-out; }
    .app__gallery .carousel .slide:focus {
      outline: none; }
    .app__gallery .carousel .slide:not(.slick-current) {
      opacity: 0.6; }
    @media screen and (max-width: 640px) {
      .app__gallery .carousel .slide {
        margin: 0 5px; } }
    .app__gallery .carousel .slide img {
      display: inline-block;
      max-width: 100%;
      height: auto;
      opacity: 0;
      -webkit-transition: opacity 0.5s ease-in;
      transition: opacity 0.5s ease-in; }
      .app__gallery .carousel .slide img.loaded {
        opacity: 1; }

.app__gallery .gallery__dots {
  z-index: 10;
  position: absolute;
  text-align: center;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin: 0;
  padding: 0;
  bottom: 16px; }
  .app__gallery .gallery__dots:after {
    content: "";
    display: table;
    clear: both; }
  .app__gallery .gallery__dots li {
    position: relative;
    cursor: pointer;
    display: inline-block;
    margin: 0; }
    .app__gallery .gallery__dots li:before {
      -webkit-transition: 0.1s ease-in-out all;
      transition: 0.1s ease-in-out all;
      content: "";
      display: block;
      margin: 0 8px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #b0bfcc; }
    .app__gallery .gallery__dots li:hover:before {
      background-color: #394958; }
    .app__gallery .gallery__dots li.slick-active:before {
      background-color: #00A6F1; }
    .app__gallery .gallery__dots li.slick-active:hover:before {
      background-color: #00A6F1; }
    .app__gallery .gallery__dots li button {
      display: none; }

.modal__carousel .co-modal__standard {
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  padding: 0; }
  @media screen and (max-width: 930px) {
    .modal__carousel .co-modal__standard {
      max-width: 80vw; } }
  .modal__carousel .co-modal__standard .carousel {
    padding: 0;
    overflow: hidden;
    width: 100%; }
    @media screen and (max-width: 960px) {
      .modal__carousel .co-modal__standard .carousel {
        width: 100%; } }
    .modal__carousel .co-modal__standard .carousel .slide {
      max-width: 100%;
      margin: 0;
      border: 0;
      box-shadow: none;
      border-radius: 0;
      cursor: auto;
      display: inline-block;
      height: 100%; }
      .modal__carousel .co-modal__standard .carousel .slide img {
        opacity: 1; }

.slide__frame {
  position: absolute;
  top: -40px;
  width: 100%;
  background-color: #E5E6E7;
  height: 40px;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  background-image: url(frame-center.png);
  background-position: "center";
  background-size: 100%;
  background-repeat: "repeat-x"; }
  .slide__frame:before, .slide__frame:after {
    content: "";
    display: block;
    height: 40px;
    position: absolute;
    top: 0; }
  .slide__frame:before {
    left: 0;
    background-image: url(frame-left.png);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 72px; }
  .slide__frame:after {
    right: 0;
    background-image: url(frame-right.png);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 88px; }

.slide .thumbnail__container {
  position: relative;
  display: block;
  cursor: pointer; }
  .slide .thumbnail__container .play__icon {
    background-color: rgba(0, 0, 0, 0.15);
    cursor: pointer;
    height: 100%;
    position: absolute;
    z-index: 10;
    width: 100%; }
    .slide .thumbnail__container .play__icon::before {
      -webkit-transition: 0.15s ease-in-out all;
      transition: 0.15s ease-in-out all;
      content: "";
      position: absolute;
      width: 64px;
      height: 64px;
      top: 50%;
      left: 50%;
      opacity: 1;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      background-repeat: no-repeat;
      background-position: center center;
      background-image: url("/assets/ic__play.svg"); }
.slide:not(.slick-current) .thumbnail__container .play__icon {
  opacity: 0; }
.slide .video__container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.5%;
  min-width: 80vw; }
  @media screen and (min-width: 930px) {
    .slide .video__container {
      min-width: 860px; } }
  .slide .video__container iframe, .slide .video__container .wistia_embed {
    position: absolute;
    width: 100%;
    height: 100%; }

.app__pricing {
  background-color: #f8f9fa;
  padding: 80px 24px; }
  .app__pricing .pricing__grid .pricing__content {
    margin: 0 auto; }
  .app__pricing .plan-pricing__title {
    position: relative;
    text-align: center; }
    .app__pricing .plan-pricing__title:after {
      content: "";
      display: block;
      margin: 24px auto 32px;
      width: 40px;
      height: 2px;
      background-color: #00A6F1; }
  .app__pricing .plan {
    position: relative;
    z-index: 1;
    margin: 0 auto; }
    .app__pricing .plan .plan--individual {
      background-color: white;
      border: 1px solid #d4dce3;
      border-radius: 4px;
      box-shadow: 0px 2px 4px rgba(0, 8, 16, 0.05);
      margin-bottom: 8px;
      overflow: hidden; }
      .app__pricing .plan .plan--individual .plan__header {
        -webkit-transition: 0.2s ease-in-out all;
        transition: 0.2s ease-in-out all;
        box-sizing: border-box;
        position: relative;
        padding: 0 48px 0px 32px;
        min-height: 64px;
        border-bottom: 1px solid white;
        white-space: normal;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; }
        .app__pricing .plan .plan--individual .plan__header:after {
          content: "";
          display: table;
          clear: both; }
        @media screen and (max-width: 640px) {
          .app__pricing .plan .plan--individual .plan__header {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-align: start;
                -ms-flex-align: start;
                        -ms-grid-row-align: flex-start;
                    align-items: flex-start; } }
        .app__pricing .plan .plan--individual .plan__header:hover {
          background-color: #f8f9fa; }
        .app__pricing .plan .plan--individual .plan__header.active {
          border-bottom: 1px solid #d4dce3; }
          .app__pricing .plan .plan--individual .plan__header.active .header--caret {
            -webkit-transform: translateY(-50%) rotate(180deg);
                -ms-transform: translateY(-50%) rotate(180deg);
                    transform: translateY(-50%) rotate(180deg); }
        .app__pricing .plan .plan--individual .plan__header .header {
          display: inline-block; }
          @media screen and (max-width: 640px) {
            .app__pricing .plan .plan--individual .plan__header .header h3 {
              font-size: 16px; } }
          .app__pricing .plan .plan--individual .plan__header .header p {
            margin-top: -6px; }
          .app__pricing .plan .plan--individual .plan__header .header.header--left {
            float: left; }
            @media screen and (max-width: 640px) {
              .app__pricing .plan .plan--individual .plan__header .header.header--left {
                float: none;
                display: block; } }
          .app__pricing .plan .plan--individual .plan__header .header.header--right {
            margin-left: auto;
            text-align: right; }
            @media screen and (max-width: 640px) {
              .app__pricing .plan .plan--individual .plan__header .header.header--right {
                float: none;
                display: block;
                text-align: left;
                padding-bottom: 10px;
                margin-left: 0; } }
            .app__pricing .plan .plan--individual .plan__header .header.header--right .header--right__price {
              font-size: 20px;
              line-height: 32px; }
              @media screen and (max-width: 640px) {
                .app__pricing .plan .plan--individual .plan__header .header.header--right .header--right__price {
                  font-size: 16px;
                  padding: 0; } }
              .app__pricing .plan .plan--individual .plan__header .header.header--right .header--right__price:before {
                content: attr(currency);
                font-size: 14px;
                display: inline;
                vertical-align: top; }
        .app__pricing .plan .plan--individual .plan__header .header--caret {
          -webkit-transition: 0.2s ease-in-out all;
          transition: 0.2s ease-in-out all;
          position: absolute;
          right: 16px;
          top: 50%;
          -webkit-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
                  transform: translateY(-50%);
          width: 16px;
          height: 16px;
          background-image: url(ui-caret.svg);
          background-position: center center;
          background-size: 100%;
          background-repeat: no-repeat; }
      .app__pricing .plan .plan--individual .plan__detail {
        box-sizing: border-box;
        padding: 24px 32px;
        display: none; }
        .app__pricing .plan .plan--individual .plan__detail.active {
          display: block; }
        .app__pricing .plan .plan--individual .plan__detail .detail__title {
          color: #394958;
          font-weight: 600;
          margin-bottom: 15px; }
      .app__pricing .plan .plan--individual.free-trial .plan__header.active {
        box-shadow: inset 4px 0px 0px #42c9b9; }
      .app__pricing .plan .plan--individual.free-trial .plan__header .header--left__plan-name {
        color: #42c9b9; }
        @media screen and (max-width: 640px) {
          .app__pricing .plan .plan--individual.free-trial .plan__header .header--left__plan-name {
            font-size: 16px; } }
      .app__pricing .plan .plan--individual.free-trial .plan__header .header--right__price {
        color: #42c9b9; }
        @media screen and (max-width: 640px) {
          .app__pricing .plan .plan--individual.free-trial .plan__header .header--right__price {
            font-size: 16px; } }
      .app__pricing .plan .plan--individual.custom .plan__header.active {
        box-shadow: inset 4px 0px 0px #42c9b9; }
      .app__pricing .plan .plan--individual.custom .plan__header .header--left__plan-name {
        color: #42c9b9; }
        @media screen and (max-width: 640px) {
          .app__pricing .plan .plan--individual.custom .plan__header .header--left__plan-name {
            font-size: 16px; } }
      .app__pricing .plan .plan--individual.custom .plan__header .header--right__price {
        color: #42c9b9; }
        @media screen and (max-width: 640px) {
          .app__pricing .plan .plan--individual.custom .plan__header .header--right__price {
            font-size: 16px; } }

.footer {
  background-color: #172241; }
  .footer .footer__content {
    padding: 56px 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start; }
    .footer .footer__content .footer__column {
      box-sizing: border-box;
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1; }
      @media screen and (max-width: 640px) {
        .footer .footer__content .footer__column {
          display: none; } }
      @media screen and (max-width: 640px) {
        .footer .footer__content .footer__column.footer_column--tos {
          display: block;
          text-align: center;
          width: 100%;
          max-width: none; } }
      .footer .footer__content .footer__column.footer_column--tos .column__item {
        color: #FFFFFF; }
      .footer .footer__content .footer__column.footer_column--tos a:hover {
        color: #FFFFFF;
        text-decoration: underline; }
      .footer .footer__content .footer__column a {
        -webkit-transition: 0.2s ease-in-out all;
        transition: 0.2s ease-in-out all;
        font-size: 12px;
        line-height: 24px;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
        color: #FFFFFF;
        text-decoration: none; }
        .footer .footer__content .footer__column a:hover {
          color: #FFFFFF;
          text-decoration: underline; }
        .footer .footer__content .footer__column a.column__item--logo {
          width: 96px;
          height: 24px;
          background-image: url(https://prd-cdn-talkdesk.talkdesk.com/cdn-assets/latest/talkdesk/brand/main_brand/logo/talkdesk_logo_white.svg);
          background-position: center center;
          background-size: 100%;
          background-repeat: no-repeat;
          margin-bottom: 24px; }
          @media screen and (max-width: 640px) {
            .footer .footer__content .footer__column a.column__item--logo {
              margin: 0 auto 24px auto; } }
      .footer .footer__content .footer__column.footer__column--social {
        -webkit-box-flex: 6;
            -ms-flex-positive: 6;
                flex-grow: 6; }
        .footer .footer__content .footer__column.footer__column--social:after {
          content: "";
          display: table;
          clear: both; }
        @media screen and (max-width: 960px) {
          .footer .footer__content .footer__column.footer__column--social {
            -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                    flex-grow: 1; } }
        .footer .footer__content .footer__column.footer__column--social .social__item {
          -webkit-transition: 0.2s ease-in-out all;
          transition: 0.2s ease-in-out all;
          display: inline-block;
          float: right;
          width: 24px;
          height: 24px;
          opacity: 0.6;
          margin-left: 16px; }
          .footer .footer__content .footer__column.footer__column--social .social__item.social__item--facebook {
            background-image: url(social-facebook.svg);
            background-position: center center;
            background-size: 100%;
            background-repeat: no-repeat; }
          .footer .footer__content .footer__column.footer__column--social .social__item.social__item--twitter {
            background-image: url(social-twitter.svg);
            background-position: center center;
            background-size: 100%;
            background-repeat: no-repeat; }
          .footer .footer__content .footer__column.footer__column--social .social__item.social__item--linkedin {
            background-image: url(social-linkedin.svg);
            background-position: center center;
            background-size: 100%;
            background-repeat: no-repeat; }
          .footer .footer__content .footer__column.footer__column--social .social__item.social__item--youtube {
            background-image: url(social-youtube.svg);
            background-position: center center;
            background-size: 100%;
            background-repeat: no-repeat; }
          .footer .footer__content .footer__column.footer__column--social .social__item:hover {
            opacity: 1; }

.mktoForm {
  font-family: inherit; }
  .mktoForm .mktoFormRow {
    display: block;
    margin-top: 12px; }
    .mktoForm .mktoFormRow .mktoFormCol {
      display: inline-block; }
      @media screen and (max-width: 480px) {
        .mktoForm .mktoFormRow .mktoFormCol {
          display: block; } }
      .mktoForm .mktoFormRow .mktoFormCol .mktoFieldWrap {
        margin-bottom: 13px;
        position: relative; }
        @media screen and (max-width: 480px) {
          .mktoForm .mktoFormRow .mktoFormCol .mktoFieldWrap {
            margin-bottom: 20px; } }
      .mktoForm .mktoFormRow .mktoFormCol label {
        font-size: 12px;
        line-height: normal;
        font-weight: 600;
        color: #50677b;
        margin-bottom: 6px;
        display: block;
        text-align: left; }
      .mktoForm .mktoFormRow .mktoFormCol input, .mktoForm .mktoFormRow .mktoFormCol textarea {
        border-radius: 3px;
        border: 1px solid #dcdee1;
        font-size: 14px;
        line-height: normal;
        color: #50677b;
        padding: 10px;
        outline: none;
        box-sizing: border-box;
        width: 100%;
        resize: none; }
      .mktoForm .mktoFormRow .mktoFormCol:first-child {
        margin-right: 16px; }
        @media screen and (max-width: 480px) {
          .mktoForm .mktoFormRow .mktoFormCol:first-child {
            margin: 0; } }
        .mktoForm .mktoFormRow .mktoFormCol:first-child:last-child {
          margin-right: 0;
          width: 100%; }
      .mktoForm .mktoFormRow .mktoFormCol .mktoError {
        position: absolute;
        right: auto !important;
        bottom: auto !important;
        top: auto;
        text-align: left; }
        .mktoForm .mktoFormRow .mktoFormCol .mktoError .mktoErrorMsg {
          font-weight: 100;
          font-size: 12px;
          margin-top: 6px;
          color: #ff4641; }
  .mktoForm .mktoButtonRow {
    margin-top: 24px; }
    .mktoForm .mktoButtonRow .mktoButtonWrap {
      display: block;
      overflow: auto; }
      .mktoForm .mktoButtonRow .mktoButtonWrap button {
        cursor: pointer;
        -webkit-transition: 0.2s ease-in-out all;
        transition: 0.2s ease-in-out all;
        float: right;
        box-sizing: border-box;
        padding: 0 10px;
        text-decoration: none;
        line-height: 40px;
        display: block;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        background-color: #00A6F1;
        border-radius: 3px;
        color: white;
        margin-top: 8px;
        border: none;
        outline: none;
        width: 115px; }
        @media screen and (max-width: 480px) {
          .mktoForm .mktoButtonRow .mktoButtonWrap button {
            float: none;
            margin: 0 auto;
            width: 100%; } }
        .mktoForm .mktoButtonRow .mktoButtonWrap button:hover {
          background-color: #007db6; }

.co-modal .co-modal__standard {
  min-width: 400px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-height: 80vh; }
  @media screen and (max-width: 640px) {
    .co-modal .co-modal__standard {
      min-width: auto;
      width: 90%;
      overflow: scroll;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start; } }
  .co-modal .co-modal__standard .modal__container {
    width: 100%; }
.co-modal .header {
  font-size: 16px;
  line-height: 30px;
  color: #50677b;
  font-weight: 600;
  text-align: center;
  display: none; }
.co-modal .content {
  position: relative;
  text-align: center; }
  .co-modal .content .icon-base, .co-modal .content .icon__user:before, .co-modal .content .icon__everyone:before, .co-modal .content .icon__role:before, .co-modal .content .icon__contacts:before, .co-modal .content .icon__recordings:before, .co-modal .content .icon__reporting:before, .co-modal .content .icon__admin--16:before {
    display: inline-block;
    margin: 40px auto 25px auto; }
    .co-modal .content .icon-base:before, .co-modal .content .icon__user:before, .co-modal .content .icon__everyone:before, .co-modal .content .icon__role:before, .co-modal .content .icon__contacts:before, .co-modal .content .icon__recordings:before, .co-modal .content .icon__reporting:before, .co-modal .content .icon__admin--16:before {
      width: 40px;
      height: 40px; }
    .co-modal .content .icon-base.--green:before, .co-modal .content .--green.icon__user:before, .co-modal .content .--green.icon__everyone:before, .co-modal .content .--green.icon__role:before, .co-modal .content .--green.icon__contacts:before, .co-modal .content .--green.icon__recordings:before, .co-modal .content .--green.icon__reporting:before, .co-modal .content .--green.icon__admin--16:before {
      background-color: #00cd73; }
    .co-modal .content .icon-base.--gray-light:before, .co-modal .content .--gray-light.icon__user:before, .co-modal .content .--gray-light.icon__everyone:before, .co-modal .content .--gray-light.icon__role:before, .co-modal .content .--gray-light.icon__contacts:before, .co-modal .content .--gray-light.icon__recordings:before, .co-modal .content .--gray-light.icon__reporting:before, .co-modal .content .--gray-light.icon__admin--16:before {
      background-color: #b0bfcc; }
  .co-modal .content .modal__message {
    margin-top: 0;
    font-size: 16px;
    text-align: center;
    color: #50677b;
    line-height: normal;
    font-weight: normal;
    margin-bottom: 32px; }
    .co-modal .content .modal__message.--title {
      margin-bottom: 3px; }
    .co-modal .content .modal__message.--subtitle {
      font-size: 14px;
      color: #69859d;
      margin-bottom: 65px; }
  .co-modal .content .button {
    font-size: 16px;
    font-weight: 600;
    display: inline-block; }
  .co-modal .content .form__info {
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 12px;
    color: #69859d;
    font-weight: normal;
    opacity: 0.7;
    padding-right: 15px;
    margin-bottom: 5px; }
    @media screen and (max-width: 480px) {
      .co-modal .content .form__info {
        position: relative;
        width: 100%;
        margin: 20px 0 0 0 !important;
        padding: 0; } }
  .co-modal .content .form__success {
    display: none;
    font-size: 14px;
    line-height: normal;
    color: #50677b;
    text-align: center; }
.co-modal .image__detail .slide__frame {
  position: relative;
  top: 0; }
.co-modal .video__container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.5%;
  min-width: 80vw; }
  @media screen and (min-width: 930px) {
    .co-modal .video__container {
      min-width: 860px; } }
  .co-modal .video__container iframe, .co-modal .video__container .wistia_embed {
    position: absolute;
    width: 100%;
    height: 100%; }

.home__topnav.topnav {
  margin-bottom: 0; }
  .home__topnav.topnav .topnav__logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    .home__topnav.topnav .topnav__logo .topnav__demo {
      display: inline-block;
      margin-left: auto;
      font-size: 14px;
      color: #50677b; }
      .home__topnav.topnav .topnav__logo .topnav__demo a {
        font-size: inherit;
        color: #68d0ff; }
      @media screen and (max-width: 540px) {
        .home__topnav.topnav .topnav__logo .topnav__demo {
          display: none; } }

.home__header {
  padding: 0;
  width: auto;
  overflow: hidden;
  background-image: url(header_pattern.png);
  background-position: center;
  background-size: auto;
  background-repeat: repeat; }
  .home__header .ink-grid {
    position: relative; }
  .home__header .intro {
    min-height: 450px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start; }
    .home__header .intro.-center {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
      .home__header .intro.-center .intro__content {
        text-align: center; }
      .home__header .intro.-center .intro__image {
        position: absolute;
        height: 100%;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        text-align: center;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end; }
        @media screen and (max-width: 640px) {
          .home__header .intro.-center .intro__image {
            display: none; } }
        .home__header .intro.-center .intro__image img {
          -webkit-transform: translate(0, 0);
              -ms-transform: translate(0, 0);
                  transform: translate(0, 0);
          height: auto;
          max-width: auto; }
    .home__header .intro .intro__content {
      z-index: 90; }
      .home__header .intro .intro__content h1 {
        color: white;
        font-size: 32px;
        line-height: 40px;
        font-weight: 400;
        margin-bottom: 10px; }
        .home__header .intro .intro__content h1 span {
          font-style: italic; }
        @media screen and (max-width: 870px) {
          .home__header .intro .intro__content h1 {
            font-size: 24px; } }
        @media screen and (max-width: 680px) {
          .home__header .intro .intro__content h1 br {
            display: none; } }
        @media screen and (max-width: 640px) {
          .home__header .intro .intro__content h1 {
            text-align: center; } }
      .home__header .intro .intro__content h2 {
        color: #ddf5ff;
        font-size: 24px;
        line-height: 30px;
        font-weight: 300;
        margin-bottom: 60px; }
        .home__header .intro .intro__content h2 span {
          font-style: italic; }
        @media screen and (max-width: 870px) {
          .home__header .intro .intro__content h2 {
            font-size: 20px; } }
        @media screen and (max-width: 680px) {
          .home__header .intro .intro__content h2 br {
            display: none; } }
        @media screen and (max-width: 640px) {
          .home__header .intro .intro__content h2 {
            text-align: center; } }
      .home__header .intro .intro__content a {
        font-size: 18px; }
    .home__header .intro .intro__image {
      position: absolute;
      height: 100%;
      right: 0;
      bottom: 0;
      text-align: right; }
      @media screen and (max-width: 640px) {
        .home__header .intro .intro__image {
          display: none;
          bottom: 20%; } }
      .home__header .intro .intro__image img {
        -webkit-transform: translateX(25%);
            -ms-transform: translateX(25%);
                transform: translateX(25%);
        height: 100%;
        max-width: none; }

.app__home {
  margin-top: 32px; }
  .app__home .list__container {
    padding: 0 24px; }
    @media screen and (max-width: 640px) {
      .app__home .list__container {
        padding: 0; } }
  .app__home .apps__container {
    min-height: 600px; }
    @media screen and (max-width: 1023px) {
      .app__home .apps__container {
        width: 100%; } }
    .app__home .apps__container .cat__list {
      display: block;
      width: 100%; }
    .app__home .apps__container .app__list {
      margin: 0 -12px;
      position: relative; }
      .app__home .apps__container .app__list .separator {
        margin: 20px 12px; }
        .app__home .apps__container .app__list .separator h2 {
          display: inline-block;
          position: relative;
          padding-right: 16px;
          font-size: 16px;
          color: #394958;
          line-height: 1; }
          .app__home .apps__container .app__list .separator h2::before {
            content: "";
            position: absolute;
            width: 100vw;
            background-color: #d4dce3;
            height: 1px;
            top: 50%;
            left: 100%; }
      .app__home .apps__container .app__list .app__detail {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-flex: 0;
            -ms-flex-positive: 0;
                flex-grow: 0;
        width: 33%;
        flex-grow: 0;
        position: relative; }
        @media screen and (max-width: 1259px) {
          .app__home .apps__container .app__list .app__detail {
            width: 50%; } }
        @media screen and (max-width: 640px) {
          .app__home .apps__container .app__list .app__detail {
            width: 100%; } }
        .app__home .apps__container .app__list .app__detail.hide-label .label {
          opacity: 0; }
        .app__home .apps__container .app__list .app__detail .label {
          font-size: 11px;
          color: #394958;
          border-radius: 3px;
          background-color: #ffe36c;
          box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.11);
          z-index: 100;
          position: absolute;
          top: -6px;
          right: 6px;
          padding: 6px;
          -webkit-backface-visibility: hidden;
                  backface-visibility: hidden;
          opacity: 1;
          -webkit-transition: all 0.5s linear;
          transition: all 0.5s linear; }
        .app__home .apps__container .app__list .app__detail .card {
          margin: 0 12px 24px 12px;
          width: 100%;
          border-radius: 4px;
          border: 1px solid rgba(0, 0, 0, 0.08);
          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
          box-shadow: none;
          -webkit-backface-visibility: hidden;
                  backface-visibility: hidden; }
          .app__home .apps__container .app__list .app__detail .card .image {
            padding: 36px 0;
            background: -webkit-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.6));
            background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.6));
            box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
            background-color: #000000; }
            .app__home .apps__container .app__list .app__detail .card .image .icon {
              border: 3px solid white;
              background-color: white;
              border-radius: 6px;
              width: 92px;
              height: auto;
              margin: 0 auto;
              position: relative;
              z-index: 100; }
              .app__home .apps__container .app__list .app__detail .card .image .icon img {
                position: relative;
                border-radius: 4px; }
            .app__home .apps__container .app__list .app__detail .card .image .shadow {
              border: 4px solid white;
              background-color: white;
              border-radius: 6px;
              width: 92px;
              height: 92px;
              margin: 0 auto;
              position: absolute;
              top: 50%;
              left: 50%;
              -webkit-transform: translate(-50%, -50%);
                  -ms-transform: translate(-50%, -50%);
                      transform: translate(-50%, -50%);
              z-index: 10;
              mix-blend-mode: overlay; }
              .app__home .apps__container .app__list .app__detail .card .image .shadow::before {
                content: "";
                width: 100%;
                height: 100%;
                background-color: white;
                position: absolute;
                top: -5px;
                left: -5px;
                border-radius: 6px;
                box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 8px 16px 0 rgba(0, 0, 0, 0.4), 0 10px 20px 0 rgba(0, 0, 0, 0.5);
                box-sizing: content-box;
                border: 5px solid white; }
          .app__home .apps__container .app__list .app__detail .card .content {
            border: 1px solid #ecf0f3;
            border-top: none; }
            .app__home .apps__container .app__list .app__detail .card .content h3 {
              font-size: 14px;
              line-height: 20px;
              font-weight: 600;
              color: #394958; }
            .app__home .apps__container .app__list .app__detail .card .content p {
              margin-top: 8px;
              font-size: 13px;
              color: #50677b; }

.app__home .list__sidebar {
  padding: 0 2em;
  border-right: 1px solid #ecf0f3;
  height: 100%; }
  @media screen and (max-width: 1023px) {
    .app__home .list__sidebar {
      display: none; } }
  .app__home .list__sidebar .search input::-webkit-input-placeholder {
    font-style: italic;
    color: #d4dce3; }
  .app__home .list__sidebar .search input::-moz-placeholder {
    font-style: italic;
    color: #d4dce3; }
  .app__home .list__sidebar .search input:-ms-input-placeholder {
    font-style: italic;
    color: #d4dce3; }
  .app__home .list__sidebar .search input::placeholder {
    font-style: italic;
    color: #d4dce3; }
  .app__home .list__sidebar .search .icon__close {
    opacity: 0;
    -webkit-transition: opacity 0.8s ease-in-out;
    transition: opacity 0.8s ease-in-out; }
  .app__home .list__sidebar .app__filters {
    margin-top: 20px; }
    .app__home .list__sidebar .app__filters h2 {
      font-size: 16px;
      color: #394958;
      font-weight: 600; }
    .app__home .list__sidebar .app__filters ul {
      margin: 10px 0 24px 0;
      padding: 0; }
      .app__home .list__sidebar .app__filters ul li a {
        text-transform: capitalize;
        font-size: 14px;
        line-height: 24px;
        color: #69859d;
        text-decoration: none; }
        .app__home .list__sidebar .app__filters ul li a.active {
          color: #00A6F1; }
        .app__home .list__sidebar .app__filters ul li a.mixitup-control-active {
          color: #00A6F1; }
        .app__home .list__sidebar .app__filters ul li a:hover {
          text-decoration: none;
          color: #00A6F1; }

.app__home .app__none {
  display: none;
  margin: 50px 0;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0; }
  .app__home .app__none.active {
    display: block;
    opacity: 1; }
  .app__home .app__none h2 {
    color: #838a95; }
  .app__home .app__none p {
    font-size: 20px;
    text-align: center; }
    .app__home .app__none p a {
      font-size: inherit; }

.app__home .app__dropdown {
  z-index: 250; }
  .app__home .app__dropdown .selection {
    width: 100%;
    display: none; }
    @media screen and (max-width: 1023px) {
      .app__home .app__dropdown .selection {
        display: block; } }
    .app__home .app__dropdown .selection .text {
      text-transform: capitalize; }
    .app__home .app__dropdown .selection .menu .item {
      text-transform: capitalize; }

.developers__why {
  background-color: #ecf0f3;
  padding: 100px 0 50px 0; }
  .developers__why .intro {
    text-align: center; }
    .developers__why .intro h1 {
      font-size: 36px;
      font-weight: 600;
      color: #394958;
      margin-bottom: 40px; }
      @media screen and (max-width: 640px) {
        .developers__why .intro h1 {
          font-size: 28px; } }
    .developers__why .intro p {
      font-size: 18px;
      font-weight: 300;
      color: #394958; }
      @media screen and (max-width: 640px) {
        .developers__why .intro p {
          font-size: 16px; } }
  .developers__why .why {
    margin-top: 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    @media screen and (max-width: 960px) {
      .developers__why .why {
        text-align: center; } }
    .developers__why .why .list {
      margin-bottom: 40px; }
      .developers__why .why .list ul {
        padding: 0;
        margin: 0 60px 0 0; }
        @media screen and (max-width: 960px) {
          .developers__why .why .list ul {
            margin: 0; } }
        .developers__why .why .list ul li {
          margin-bottom: 60px; }
          .developers__why .why .list ul li:last-child {
            margin-bottom: 0; }
          .developers__why .why .list ul li h2 {
            font-size: 20px;
            font-weight: 600;
            color: #007db6;
            margin-bottom: 5px; }
            @media screen and (max-width: 640px) {
              .developers__why .why .list ul li h2 {
                font-size: 18px; } }
          .developers__why .why .list ul li p {
            font-size: 14px;
            font-weight: 300;
            color: #394958;
            line-height: 20px; }
            @media screen and (max-width: 640px) {
              .developers__why .why .list ul li p {
                line-height: 18px; } }

.developers__what {
  background-color: #ecf0f3;
  padding: 50px 0;
  overflow-x: hidden; }
  .developers__what .column-group {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .developers__what .title {
    text-align: center; }
    .developers__what .title h1 {
      font-size: 36px;
      font-weight: 600;
      color: #394958;
      margin-bottom: 40px;
      position: relative;
      display: inline-block;
      padding: 0 60px 30px; }
      @media screen and (max-width: 640px) {
        .developers__what .title h1 {
          font-size: 28px; } }
      .developers__what .title h1::after, .developers__what .title h1::before {
        position: absolute;
        content: "";
        width: 70%;
        height: 2px;
        background-color: #e0e3e6;
        top: 50%; }
        @media screen and (max-width: 640px) {
          .developers__what .title h1::after, .developers__what .title h1::before {
            content: none; } }
      .developers__what .title h1::before {
        left: -70%; }
      .developers__what .title h1::after {
        right: -70%; }
  .developers__what .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .developers__what .list .item {
      text-align: center;
      padding: 0 30px;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      margin-bottom: 40px; }
      @media screen and (max-width: 640px) {
        .developers__what .list .item {
          padding: 0; } }
      .developers__what .list .item .icon {
        width: 100%; }
      .developers__what .list .item h2 {
        font-size: 26px;
        font-weight: 600;
        color: #394958;
        margin: 40px 0 30px 0;
        width: 100%; }
        @media screen and (max-width: 640px) {
          .developers__what .list .item h2 {
            font-size: 20px;
            margin: 10px 0 30px 0; } }
      .developers__what .list .item p {
        font-size: 16px;
        font-weight: 300;
        line-height: 24px;
        margin-bottom: 60px; }
        @media screen and (max-width: 640px) {
          .developers__what .list .item p {
            line-height: 18px; } }
      .developers__what .list .item .button {
        -ms-flex-item-align: end;
            align-self: flex-end;
        width: 100%; }

.developers__services {
  background-color: white;
  padding: 50px 0; }
  .developers__services .column-group {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .developers__services .title {
    text-align: center; }
    .developers__services .title h1 {
      font-size: 36px;
      font-weight: 600;
      color: #394958;
      margin-bottom: 40px;
      position: relative;
      display: inline-block;
      padding: 60px; }
      @media screen and (max-width: 640px) {
        .developers__services .title h1 {
          font-size: 28px; } }
  .developers__services .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .developers__services .list .item {
      text-align: center;
      padding: 0 30px; }
      .developers__services .list .item .icon {
        width: 100%; }
      .developers__services .list .item h2 {
        font-size: 26px;
        font-weight: 600;
        color: #394958;
        margin: 30px 0 20px 0;
        width: 100%; }
        @media screen and (max-width: 640px) {
          .developers__services .list .item h2 {
            font-size: 20px; } }
      .developers__services .list .item p {
        font-size: 16px;
        font-weight: 300;
        line-height: 24px;
        margin-bottom: 60px; }
        @media screen and (max-width: 640px) {
          .developers__services .list .item p {
            line-height: 18px; } }

.developers__building {
  background-color: #00a6f1;
  padding: 80px 0;
  position: relative;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  overflow: hidden; }
  @media screen and (max-width: 980px) {
    .developers__building {
      background-size: cover; } }
  .developers__building .cta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .developers__building .cta h2 {
      color: #FFFFFF;
      font-size: 36px;
      font-weight: 500;
      display: inline-block;
      padding: 0 80px;
      text-align: center; }
      @media screen and (max-width: 640px) {
        .developers__building .cta h2 {
          font-size: 28px;
          padding: 0; } }
      @media screen and (max-width: 750px) {
        .developers__building .cta h2 {
          margin-bottom: 30px; } }

.button.app__install.-wait {
  background-color: #69859d; }
  .button.app__install.-wait:hover {
    background-color: #50677b; }