@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');
*{
    font-family: 'Source Sans Pro', sans-serif;
}



body{
    /* display:flex;
    justify-content:center;
    align-items: center;
    min-height: 100vh; */
    /* background: #03a9f4; */
}

.v-hidden{
    visibility: hidden;
}

.box{
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
    position:fixed;
    width: 250px;
    height: 200px;
    visibility:hidden;
    z-index: 2001;
    /* margin:auto;
    position: relative;
    width:300px;
    height:400px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column; */



    /* background: #fff; */
    /* box-shadow: 0 30px 60px rgba(0,0,0,.2); */
}

.box .percent{
    position: relative;
    width: 150px;
    height:150px;
}
.box .percent svg{
    position: relative;
    width: 150px;
    height: 150px;
}
.box .percent svg circle{
    width: 150px;
    height: 150px;
    fill: none;
    stroke-width:10;
    stroke:#000;
    transform: translate(5px, 5px);
    stroke-dasharray: 440;
    stroke-dashoffset:440;
    stroke-linecap:round;
}
.box .percent svg circle:nth-child(1){
    stroke-dashoffset:0;
    stroke: #f3f3f3;
}
.box .percent svg circle:nth-child(2){
    stroke-dashoffset:calc(440 - (440 * 87) / 100);
    stroke: #03a9f4;
}
.box .percent .number{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    display: flex;
    justify-content:center;
    align-items:center;
    color:#03a9f4;
}
.box .percent .number h2{
    font-size: 48px;
}
.box .percent .number h2 span{
    font-size:24px;
}

.box.bg-load-round{
    padding:50%;
    border:1px solid #999;
    border-radius: 10px;
    vertical-align: middle;
    line-height: 200px;
}

.box .text{
    padding: 10px 0 0;
    color: #999;
    font-weight:700;
    letter-spacing: 1px;
}

.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 125px;
    height: 125px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
    position:fixed;
    /* visibility:hidden;  */
    z-index: 2001;
  }

  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }