/* START LICENCE TYPES*/

.licence-activated{
    --ribbon-color: #4CAF50;
    --bg-card-color: #e8f5e954;
  }

 .licence-not-activated{
    --ribbon-color: #FF9E07;
    --bg-card-color: #fff3e05c;
  }

  .licence-expired{
    --ribbon-color: #FF5722;
    --bg-card-color: #ffebee53;
  }

  .group-licence{
    --ribbon-color: #4CAF50;
    --bg-card-color: #e8f5e937;
  }

  .masthead { display: none; }


  #licenceActivateModal .modal-body{
    min-height: 200px;
  }


  #licenceActivateModal .modal-content,
  .my-licences .card{
    border-radius: 2px;
  }

  #licenceLoginModal .modal-content{
    border-radius: 2px;
  }

  .my-licences #licence-info-btn{
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
  }
  .my-licences .card .card-title   { padding-right: 20%; }

  .my-licences .licence-card{
    overflow: hidden;
    position: relative;
  }

  .my-licences .licence-card .card-body{
   height: calc(100% - 55px);
  }

  .my-licences .ribbon {
    margin: 0;
    background: var(--ribbon-color);
    color: white;
    padding:0.25em 0.75rem;
    font-size: 0.84rem !important;
    position: absolute;
    top: 0;
    right: 0;
  }


  .my-licences .licence-card-back{
    /* Enable to show some tint*/
    /* background-color: var(--bg-card-color); */
  }
  .my-licences .licence-card-back .ribbon {
    left:0;
    transform: translateX(0%) translateY(200%) rotate(-45deg);
  }


  /* .my-licences .ribbon:before,
  .my-licences .ribbon:after {
    content: '';
    position: absolute;
    top:0;
    margin: 0 -1px;
    width: 100%;
    height: 100%;
    background: var(--ribbon-color);
  }

  .my-licences .ribbon:before {
    right:100%;
  }

  .my-licences .ribbon:after {
    left:100%;
  } */

  .my-licences .licence-code{

    text-align: center;
    margin-top: 20px;
    color:var(--bs-gray);
}

  .my-licences .licence-perspective {
    perspective: 1000px;
  }

  .my-licences .licence-rotation {
    transform-style: preserve-3d;
    transition: transform 0.5s ease-in-out;

    -moz-backface-visibility: hidden;
  }

  .my-licences #licence-info-btn{
    float: right;
  }

  .my-licences .licence-card,
  .my-licences .licence-card-back {
    /* position: absolute; */
    position: relative;
    -webkit-backface-visibility: hidden; /* Safari */
    -moz-backface-visibility: hidden; /* Firefox */
    backface-visibility: hidden;
    transform: rotateX(0deg);
  }

  .my-licencies .licence-card-back {

  }


  .my-licences .licence-card-back {
    /* transform: rotateY(180deg); */
    transform: rotateY(180deg) rotateX(0deg); /* a bit of skew */
    height:100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
  }

  .my-licences .licence-flip{
     float: right;
  }

  /* .my-licences .licence-perspective:not(.backside) .licence-rotation{
    animation-name: flip;
    animation-timing-function: ease-in, ease-out;
    animation-duration:
      500ms;
    animation-direction: reverse;
  } */

  /* .my-licences .licence-perspective.backside.backwards .licence-rotation{
    transform: rotateY(0deg) translateZ(0px);
    animation-direction: reverse;
    animation-timing-function: ease-out, ease-in;

    animation-name: flip;
    animation-duration:
      500ms;
  } */

  .my-licences .licence-perspective.backside .licence-rotation{
    transform: rotateY(180deg) translateZ(0px);
    animation-name: flip;
    animation-timing-function: ease-in, ease-out;
    /* animation-fill-mode: forwards; */
    animation-duration:
      500ms;
  }

  @keyframes flip {
    0% {
      transform:
        /* translateZ(0px) */
        scale(1)
        rotateY(0deg);
    }
    30% {
      transform:
        /* translateZ(-100px) */
        scale(0.6)
        rotateY(100deg);
    }
    70% {
      transform:
        /* translateZ(-100px) */
        scale(1.1)
        rotateY(170deg);
    }
    100% {
      transform:
        /* translateZ(-100px)   */
        scale(1)
        rotateY(180deg);
    }
  }