.workings {

  width: 100%;

  position: absolute;

  z-index: 99;

  height: 100%;

  top: 0;

  background-color: var(--dynaui-form-default-text);

  border-radius: inherit;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.2s ease-in-out;

}

.workings > div {

  display: inline-block;

  width: 6rem;

  height: 6rem;

  position: relative;

  transition: all 0.2s ease-in-out;

}

.workings > div > span {

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  line-height: 6rem;

  text-align: center;

  color: var(--dynaui-bg);

  font-size: 1.5rem;

  font-weight: bold;

  transition: all 0.2s ease-in-out;

}

.loader {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    max-width: 6rem;

    margin-top: 3rem;

    margin-bottom: 3rem;

  }

  .loader:before,

  .loader:after {

    content: "";

    position: absolute;

    border-radius: 50%;

    animation: pulsOut 1.8s ease-in-out infinite;

    filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));

  }

  .loader:before {

    width: 100%;

    padding-bottom: 100%;

    box-shadow: inset 0 0 0 1rem var(--dynaui-bg);

    animation-name: pulsIn;

  }

  .loader:after {

    width: calc(100% - 2rem);

    padding-bottom: calc(100% - 2rem);

    box-shadow: 0 0 0 0 var(--dynaui-bg);

  }



  @keyframes pulsIn {

    0% {

      box-shadow: inset 0 0 0 1rem var(--dynaui-bg);

      opacity: 1;

    }

    50%, 100% {

      box-shadow: inset 0 0 0 0 var(--dynaui-bg);

      opacity: 0;

    }

  }



  @keyframes pulsOut {

    0%, 50% {

      box-shadow: 0 0 0 0 var(--dynaui-bg);

      opacity: 0;

    }

    100% {

      box-shadow: 0 0 0 1rem var(--dynaui-bg);

      opacity: 1;

    }

  }