:root{
    --brand-dark-gray: hsla(0, 0%, 18%, 100%);
}

.brand-dark-gray {
    color: var(--brand-dark-gray);
}   
.bg-brand-dark-gray {
    background-color: var(--brand-dark-gray);
}   

@keyframes slide-underline {
    from {
        border-bottom: 1px solid gray;
        border-width: 0;
    }
    to {
        border-bottom: 1px solid gray;
        border-width: 100%;
    }

}

@keyframes slightGrowRotate {
    0% {
        transform: scale(0.92);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes slipDown {
    0% {
        transform: translateY(-5px);
        opacity: 0;
    }
    100%{
        transform: translateY(0px);
        opacity:1;
    }
}

@keyframes shine {
    0% {
      background-position: right;    
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
      opacity: 0;
    }
}

@keyframes rotate-fly-in  {
    0% {
        /* transform: rotate(-4deg)translateX(-25px)translateY(25px); */
        opacity: 0;
    }
    100% {
        /* transform: rotate(-0deg) translateX(0) translateY(0); */
        opacity: 1;
    }
}

@-webkit-keyframes progressSlosh {
    0%{background-position:0% 99%}
    50%{background-position:100% 2%}
    100%{background-position:0% 99%}
}
@-moz-keyframes progressSlosh {
    0%{background-position:0% 99%}
    50%{background-position:100% 2%}
    100%{background-position:0% 99%}
}
@keyframes progressSlosh {
    0%{background-position:0% 99%}
    50%{background-position:100% 2%}
    100%{background-position:0% 99%}
}


.gloss-green {
    background-color: hsl(93, 69%, 70%);
    background-image: linear-gradient( to right, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
    background-size: 500% 100%;
    animation: shine 3s infinite;
  }
.gloss-yellow {
    background-color: hsl(39, 69%, 70%);
    background-image: linear-gradient( to right, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
    background-size: 500% 100%;
    animation: shine 4.5s infinite;
  }
.gloss-red {
    background-color: hsl(0, 69%, 70%);
    background-image: linear-gradient( to right, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
    background-size: 500% 100%;
    animation: shine 5s infinite;
  }

  .modal {
      z-index: 1000;
  }

.animate-rotate {
    animation: slightGrowRotate 1000ms ease-in-out alternate infinite;
    transform-origin: center;
    /* animation-fill-mode: forwards; */
}

.bg-sub-ui {
    background-color: #d2e2ff;
}

.bg-soft-red {
    background: hsl(0, 69%, 70%);
}
.bg-soft-yellow {
    background: hsl(39, 69%, 70%);
}
.bg-soft-green {
    background: hsl(93, 69%, 70%);
}
.bg-mailraftBlue {
    background: #ABE9FF;
}
.bg-mailraftDeeperBlue {
    background: #3ABEEE;
}
.bg-mailcraftGray {
    background: #38485C;
}

.mailcraftGray {
    color: #38485C;
}

.submissionSuccess {
    z-index: 9999;
}

#form-body {
    max-width: 675px! important;
}

.spacer {
    height: 1px;
    width: 50px;
}

.slipdown  {
    animation: slipDown 170ms ease-in-out 1 forwards;
}

.progressbar {
    transition: all 300ms ease-in-out;
  }

.progressBarGradient {
    /* background: linear-gradient(93deg, #738ae4, #f6af5d); */
    background:#738ae4;
    background-size: 600% 600%;
    -webkit-animation: progressSlosh 4s ease infinite alternate;
    -moz-animation: progressSlosh 4s ease infinite alternate;
    animation: progressSlosh 4s ease infinite alternate;
}


.shadow-7 {
    box-shadow: 0px 0px 2px #295a96;
}

/* Background colours */
.bg-brandGray {
    background-color: #6E6E6E;
}
.bg-brandBlueGray {
    background-color: #34495e;
}
.bg-brandBlue {
    background-color: #738AE4;
}
.bg-brandPurple {
    background-color: #92229F;
}
.bg-brandGreen {
    background-color: #4ec977;
}
.bg-brandPink {
    background-color: #FFBFB7;
}

/* Option colours */
.bg-option1 {
    background-color: #969EBB;
}
.bg-option2 {
    background-color: #F6AF5D;
}
.bg-option3 {
    background-color: #704A66;
}

.dateField:focus{
    outline: none;
}

.slide-fade-enter-active {
    transition: all .2s ease;
  }
  .slide-fade-leave-active {
      position: absolute;
    /* transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); */
  }
  .slide-fade-enter
  /* .slide-fade-leave-active below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
  }
  .slide-fade-leave-to {
    position: absolute;
      opacity: 0;
  }
  .blur-all {
      /* transition: all ease-in-out; */
      filter: blur(20px);
      opacity: 0.3;
  }

  [v-cloak] > * { display:none }
  [v-cloak]::before { content: "" }

  .mw-900 {
      min-width: 900px;
  }

  .drop-down-alternate:nth-of-type(even) {
      background-color: #fafafa;
  }

  .template-area-active > iframe {
    opacity: 1;
    transition: all 450ms ease-out;
    transition-delay: 410ms;
  }
  .template-area > iframe {
      opacity: 0;
      transition: all 200ms;
      transition-delay: 0;
  }
  .template-area {
      z-index: 2 !important;
      transition: all 400ms ease-in-out;
      transform: rotate(2deg);
     margin-left: 2%;
      /* position: absolute; */
  }
  .template-area-active {
      z-index: 2 !important;
      opacity: 1 !important;
      transform: rotate(0deg);
      transition: all 400ms ease-in-out;
      /* position: absolute; */
  }

  .builder-area {
      z-index: 3 !important;
    position: relative;
    margin-right: -38%;
      transition: all 400ms ease-in-out;
  }

 .builder-area-active {
      /* margin-left: -50% !important; */
      position: relative;
      z-index: 3 !important;
      margin-right: 0%;
      transition: all 400ms ease-in-out;

  }

  #app {
      margin-left: 0 auto;
      margin-right: 0 auto;
      text-align: center;
  }

.rotate-fly-in {
    opacity: 0;
    -webkit-animation: rotate-fly-in 300ms ease-in-out;
    animation: rotate-fly-in 300ms ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 200ms;
  }

  .tabularData > tr > td:nth-child(odd) {
    background-color: white;
  }

  .hover-rise-image > img {
    transition: 200ms ease-in-out;
  }

  .hover-rise-image:hover > img {
    transform: translateY(-5px);
    transition: 200ms ease-in-out;

  }

  .admin-bg {
    /* background-image: url('../images/admin-bg.png'); */
  }

  .bg-add {
    background-color: #969EBB;
  }
  .bg-edit {
    background-color: #F5AF5D;
  }
  .bg-remove {
    background-color: #6a4c64
  }

  .b--add {
    border-color: #969EBB;
  }

  .slide-underline > span {
    height: 1px;
    width: 100%;
  }

  .slide-underline:hover > span :hover {
    height: 1px;
    width: 100%;
  }