.accordion {
  background-color: #4552BD;
  color: #FFF;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #051F47;
}

.panel {
  padding: 0 18px;
  background-color: #84B1EF;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}


@media (max-width: 1080px) {
    .content {
    max-width: 1250px;
    margin: auto;
    }}


@media (min-width: 1100px) {
    .content {
    max-width: 1400px;
    margin: auto;
    }
}


.fieldset-auto-width {
    display: inline-block;
    float: left;
    max-width: none;

}

.color-shade1 {color:#FFF!important;background-color:#3B5998!important}
.border-shade1 {border-color:#3B5998!important}

.color-shade2 {color:#FFF!important;background-color:#8B9DC3!important}
.border-shade2 {border-color:#8B9DC3!important}

.color-shade3 {color:#000!important;background-color:#DFE3EE!important}
.border-shade3 {border-color:#DFE3EE!important}

.color-shade4 {color:#000!important;background-color:#F7F7F7!important}
.border-shade4 {border-color:#F7F7F7!important}

.color-shade5 {color:#000!important;background-color:#FFFFFF!important}
.border-shade5 {border-color:#FFFFFF!important}

.color-shade6 {color:#FFF!important;background-color:#292F33!important}
.border-shade6 {border-color:#292F33!important}

.color-shade7 {color:#FFF!important;background-color:#66757F!important}
.border-shade7 {border-color:#66757F!important}

.color-shade8 {color:#FFF!important;background-color:#CCD6DD!important}
.border-shade8 {border-color:#CCD6DD!important}

.color-shade9 {color:#000!important;background-color:#E1E8ED!important}
.border-shade9 {border-color:#E1E8ED!important}

.pushable {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
  }

.shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }

.edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
  }

.edge-green {
    background: linear-gradient(
      to left,
      hsl(120deg 100% 16%) 0%,
      hsl(120deg 100% 32%) 8%,
      hsl(120deg 100% 32%) 92%,
      hsl(120deg 100% 16%) 100%
    );
}

.edge-red {
    background: linear-gradient(
      to left,
      hsl(340deg 100% 16%) 0%,
      hsl(340deg 100% 32%) 8%,
      hsl(340deg 100% 32%) 92%,
      hsl(340deg 100% 16%) 100%
    );
}

.front {
    display: block;
    position: relative;
    padding: 12px 42px;
    border-radius: 12px;
    font-size: 1.25rem;
    color: white;

    will-change: transform;
    transform: translateY(-4px);
    transition:
      transform
      600ms
      cubic-bezier(.3, .7, .4, 1);
  }

.front-green {
    background: hsl(120deg 60% 47%);     
}

.front-red {
    background: hsl(345deg 100% 47%);
}


.pushable:hover {
    filter: brightness(110%);
  }

.pushable:hover .front {
    transform: translateY(-6px); 
    transition: transform 
        250ms 
        cubic-bezier(.3, .7, .4, 1.5);
}

.pushable:active .front {
    transform: translateY(-2px); 
    transition: transform 34ms;
}

.pushable:hover .shadow {
    transform: translateY(4px); 
    transition: transform 
        250ms 
        cubic-bezier(.3, .7, .4, 1.5);
}

.pushable:active .shadow {
    transform: translateY(1px); 
    transition: transform 34ms;
}

.pushable:focus:not(:focus-visible) {
    outline: none;
}

/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}