ldc-mesbr-app/resources/sass/partials/fancy.scss

#coupons-list {
    background-color:$grey2;
    padding:20px;
    min-width:550px;
    
    .inputGroup {
      background-color: $grey3;
      display: block;
      margin: 2px 0;
      position: relative;
      &.notPublished {
        background-color:rgba(223, 0, 0, 0.3);
      }
      label {
        padding: 8px 30px;
        width: 100%;
        display: block;
        text-align: left;
        color: $lightgrey;
        cursor: pointer;
        position: relative;
        z-index: 2;
        transition: color 200ms ease-in;
        overflow: hidden;
        box-sizing: border-box;
        font-family: 'Nunito-Regular', sans-serif;
        &:before {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          content: '';
          background-color: $darkgrey;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%) scale3d(1, 1, 1);
          transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
          opacity: 0;
          z-index: -1;
        }
    
        &:after {
          width: 20px;
          height: 20px;
          content: '';
          border: 1px solid $orange;
          background-color: $grey3;
          background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23393939' fill-rule='nonzero'/%3E%3C/svg%3E ");
          background-repeat: no-repeat;
          background-position: -3px -1px;
          //border-radius: 50%;
          z-index: 2;
          position: absolute;
          right: 30px;
          top: 50%;
          transform: translateY(-50%);
          cursor: pointer;
          transition: all 200ms ease-in;
        }
      }
    
      input:checked ~ label {
        color: #fff;
    
        &:before {
          transform: translate(-50%, -50%) scale3d(130, 130, 1);
          opacity: 1;
        }
    
        &:after {
          background-color: $orange;
          border-color: $orange;
        }
      }
    
      input {
        width: 32px;
        height: 32px;
        order: 1;
        z-index: 2;
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        visibility: hidden;
      }
    }
    
      input[type=submit] {
        padding:5px 10px;
        background-color: $orange; 
        color: $darkgrey;
        border:0;
        cursor:pointer;
        margin:5px 0;
        border:1px solid $orange;
        &:hover {
            background-color: $grey2; 
            color: $orange;
            border:1px solid $orange;
        }
    }
    button{
        color:$lightgrey;
    }
}


.fc-container .fancybox-bg {
  background: $grey3;
}

.fancybox-is-open.fc-container .fancybox-bg {
  opacity: 0.95;
}

.fc-content {
  margin: 20px;
  max-width: 550px;
  padding: 50px;
  box-shadow: 10px 10px 60px -25px;
  border-radius: 4px;
}

.fc-content h3 {
  margin-top: 0;
  font-size: 1.6em;
  letter-spacing: normal;
}

.fc-content p {
  color: #666;
  line-height: 1.5;
}

.fc-content p:last-child {
  margin-bottom: 0;
}

/* Custom animation */
.fancybox-fx-material.fancybox-slide--previous,
.fancybox-fx-material.fancybox-slide--next {
  transform: translateY(-60px) scale(1.1);
  opacity: 0;
}

.fancybox-fx-material.fancybox-slide--current {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.fancybox-content {
  //max-width:450px !important; 
  background-color: $grey2 !important;
  font-family: 'Nunito-Regular', sans-serif;
  h3 {
    color:#d70000;
    margin-bottom:20px;
    &.info {
      color:#008e03;
    }
  }
  p {
    color:$lightgrey;
    margin: 10px 0;
    &.tright{
      text-align:right;
    }
  }
   button {
      padding:5px 10px;
      background-color: $orange; 
      color: $darkgrey;
      border:0;
      cursor:pointer;
      margin:5px 0;
      border:1px solid $orange;
      &:hover {
          background-color: $grey2; 
          color: $orange;
          border:1px solid $orange;
      }
   }
   a {
     text-decoration:underline;
     cursor:pointer;
     margin-right:15px;
   }
}

.inputGroup-export {
  background-color: $grey3;
  display: block;
  margin: 2px 0;
  position: relative;
  &.notPublished {
    background-color:rgba(223, 0, 0, 0.3);
  }
  label {
    padding: 8px 30px;
    width: 100%;
    display: block;
    text-align: left;
    color: $lightgrey;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 200ms ease-in;
    overflow: hidden;
    box-sizing: border-box;
    font-family: 'Nunito-Regular', sans-serif;
    &:before {
      width: 15px;
      height: 10px;
      border-radius: 50%;
      content: '';
      background-color: $darkgrey;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale3d(1, 1, 1);
      transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
      opacity: 0;
      z-index: -1;
    }

    &:after {
      width: 20px;
      height: 20px;
      content: '';
      border: 1px solid $orange;
      background-color: $grey3;
      background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23393939' fill-rule='nonzero'/%3E%3C/svg%3E ");
      background-repeat: no-repeat;
      background-position: -3px -1px;
      //border-radius: 50%;
      z-index: 2;
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      transition: all 200ms ease-in;
    }
  }

  input:checked ~ label {
    color: #fff;

    &:before {
      transform: translate(-50%, -50%) scale3d(130, 130, 1);
      opacity: 1;
    }

    &:after {
      background-color: $orange;
      border-color: $orange;
    }
  }

  input {
    width: 32px;
    height: 32px;
    order: 1;
    z-index: 2;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    visibility: hidden;
  }
}