.backgroundBox {
    margin: 5px;
    border: 2px;
    border-radius: 20px;
    border-style: groove;
    padding-bottom: 15px;
    background-color: rgba(100, 100, 100, .5);
}

h1 {
    text-align: center;
}

.setupButtons {
    margin: 5px;
}

.cardImage {
    /* width: 63mm; */
    /* height: 100px; */
    position: relative;
    display:block;
    /* z-index:999; */
    cursor: pointer;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

.cardImage:hover {
    transform: scale(1.5);
    z-index: 999;
}

.imageDiv {
    overflow: scroll;
    height: 80vh;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

.tab-pane {
    padding: 10px;
    text-align: center;
}

.animated-linear-gradient {
    animation: animatelinear 80s ease infinite;
    background-image: linear-gradient(135deg, #fdfdc1,#66c0f4,#848483,#f85353,#26b568);
    background-size: 100% 600%;
}
@keyframes animatelinear {
    0% { background-position: 0% 100%; }
    50% { background-position: 0% 0%; }
    100% { background-position: 0% 100%; }
}

.animated-flat {
    animation: animateFlat 60s linear infinite;
    background-color: #fdfdc1;
}

@keyframes animateFlat {
    0% { background-color: #fdfdc1; }
    20% { background-color: #66c0f4; }
    40% { background-color: #848483; }
    60% { background-color: #f85353; }
    80% { background-color: #26b568; }
    100% { background-color: #fdfdc1; }
}

.background{
    width: 200vmax;
    height: 200vmax;
    background-image: conic-gradient(#fdfdc1,#66c0f4,#848483,#f85353,#26b568,#fdfdc1);
    /* background: conic-gradient(#fdfdc1 72deg,#66c0f4 72deg 144deg,#848483 144deg 216deg,#f85353 216deg 288deg,#26b568 288deg 360deg); */
    position: absolute;
    /* -1 * width + 50% */
    top: calc(-0.5 * 200vmax + 50%);

    /* -1 * height + 50% */
    left: calc(-0.5 * 200vmax + 50%);
    z-index: -100;
    animation: animateConic 80s linear infinite;
}

@keyframes animateConic {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}

.checkmark {
    display:inline-block;
    width: 22px;
    height:22px;
    transform: rotate(45deg);
}

.checkmark_circle {
    position: absolute;
    width:22px;
    height:22px;
    /* background-color: green; */
    background-color: red;
    border-radius:11px;
    left:0;
    top:0;
}

.checkmark_stem {
    position: absolute;
    width:3px;
    height:9px;
    background-color:#fff;
    left:11px;
    top:6px;
}

.checkmark_kick {
    position: absolute;
    width:3px;
    height:3px;
    background-color:#fff;
    left:8px;
    top:12px;
}

.loader{
    position: fixed;
    height: 100vh;
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background: #0009;
    transition: all 0.5s;
    z-index: 10;
  }
  .loader .ring{
    height: 45px;
    width: 45px;
    border: 5px solid #ddd;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .loader .ring:after{
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    border-radius: 50%;
    border: 5px solid #ff3d00;
    border-top-color: transparent;
    animation: rotate 1.5s linear infinite;
  }
  @keyframes rotate {
    100%{
      transform: rotate(360deg);
    }
  }