plugins/sdvx@asphyxia/webui/asset/css/detail.css

@font-face {
    font-family: testfont;
    src: url("font/0001.ttf");
}

@font-face {
    font-family: ffff;
    src: url("font/0002.ttf");
}

table.is-borderless td {
    border: 0px solid #00000000
}

table.is-center td {
    text-align: center;
    justify-content: center;
}


/* .course-content {
    padding: 0 30%;
} */

@media screen and (min-width: 1000px) {
    .card.is-inlineblocked {
        display: inline-block;
        max-width: 60%;
        width: 60%;
        margin: 1em 2%
    }
}

.dots {
    width: 3.5em;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
}

.dots div {
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    background-color: #00b7ff;
    animation: fade 0.8s ease-in-out alternate infinite;
}

.dots div:nth-of-type(1) {
    animation-delay: -0.4s;
}

.dots div:nth-of-type(2) {
    animation-delay: -0.2s;
}


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

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

.uiblocker{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
}

.uiblocker.fade{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.5s, opacity 0.5s linear;
}

.view{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  width: 75%;
  transform: translate(-50%, -50%); 
}

.lds-roller {
    display: inline-block;
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
  }
  .lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
  }
  .lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #136bc0;
    margin: -4px 0 0 -4px;
  }
  .lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
  }
  .lds-roller div:nth-child(1):after {
    top: 63px;
    left: 63px;
  }
  .lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
  }
  .lds-roller div:nth-child(2):after {
    top: 68px;
    left: 56px;
  }
  .lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
  }
  .lds-roller div:nth-child(3):after {
    top: 71px;
    left: 48px;
  }
  .lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
  }
  .lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
  }
  .lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
  }
  .lds-roller div:nth-child(5):after {
    top: 71px;
    left: 32px;
  }
  .lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
  }
  .lds-roller div:nth-child(6):after {
    top: 68px;
    left: 24px;
  }
  .lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
  }
  .lds-roller div:nth-child(7):after {
    top: 63px;
    left: 17px;
  }
  .lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
  }
  .lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12px;
  }
  @keyframes lds-roller {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  p#loading_text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-45%, 100%);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
  }

  
  /* div {
    animation-duration: 0.1s;
    animation-name: changewidth;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  } */