@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

body {
  font-family: "Noto Sans", sans-serif;
  font-style: normal;
}
/* --- LOADER BTN ---- */
@-webkit-keyframes ld {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
@-moz-keyframes ld {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
@-o-keyframes ld {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes ld {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

.m-progress {
  position: relative;
  opacity: .8;
  color: transparent !important;
  text-shadow: none !important;
}

.m-progress:hover,
.m-progress:active,
.m-progress:focus {
  cursor: default;
  color: transparent;
  outline: none !important;
  box-shadow: none;
}

.m-progress:before {
  content: '';  
  display: inline-block;   
  position: absolute;
  background: transparent;
  border: 1px solid #fff;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;    
  box-sizing: border-box;   
  top: 50%;
  left: 50%;
  margin-top: -12px;
  margin-left: -12px;    
  width: 24px;
  height: 24px;
  -webkit-animation: ld 1s ease-in-out infinite;
  -moz-animation:    ld 1s ease-in-out infinite;
  -o-animation:      ld 1s ease-in-out infinite;
  animation:         ld 1s ease-in-out infinite;
}

.m-black:before {
  content: '';  
  display: inline-block;   
  position: absolute;
  background: transparent;
  border: 1px solid #000;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;    
  box-sizing: border-box;   
  top: 50%;
  left: 50%;
  margin-top: -12px;
  margin-left: -12px;    
  width: 24px;
  height: 24px;
  -webkit-animation: ld 1s ease-in-out infinite;
  -moz-animation:    ld 1s ease-in-out infinite;
  -o-animation:      ld 1s ease-in-out infinite;
  animation:         ld 1s ease-in-out infinite;
}

.m-progress.btn_black:hover {
  background: #000 !important;
}


.btn-default.m-progress:before {
  border-left-color: #333333;
  border-right-color: #333333;
}

.btn-lg.m-progress:before {
  margin-top: -16px;
  margin-left: -16px;
  width: 32px;
  height: 32px;
}

.btn-sm.m-progress:before {
  margin-top: -9px;
  margin-left: -9px;
  width: 18px;
  height: 18px;
}

.btn-xs.m-progress:before {
  margin-top: -7px;
  margin-left: -7px;
  width: 14px;
  height: 14px;
}

.shine-me {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    width:100%; 
    height: 100%;
    background-color:transparent;
    -webkit-animation-name: ShineAnimation;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(.12,.89,.98,.47);
}

@-webkit-keyframes ShineAnimation{
    from {
        background-repeat:no-repeat;
        background-image:-webkit-linear-gradient(
            top left,
            rgba(204, 224, 253, 0.0) 0%,
            rgba(204, 224, 253, 0.0) 45%,
            rgba(204, 224, 253, 0.5) 48%,
            rgba(204, 224, 253, 0.8) 50%,
            rgba(204, 224, 253, 0.5) 52%,
            rgba(204, 224, 253, 0.0) 57%,
            rgba(204, 224, 253, 0.0) 100%
        );
        background-position:-250px -250px;
        background-size: 600px 600px
    }
    to {
        background-repeat:no-repeat;
        background-position:400px 400px;
    }
}