.tick-circle,
.untick-circle{
  margin-left: 10px;
}

/*  Popup Events and Updates */
.view_event_popup .modal-content-container{
  background-color: #F7F8FC;
  overflow: hidden;
}
.view_event_popup .modal-content{
  width: 99%;
  max-height: 520px;
  overflow-y: scroll;
  background-color: #fff;
  padding-right: 10px;
  border:none;
}
.view_event_popup .modal-header{
  padding: 32px 32px 20px;
  position: sticky;
  top: 0;
  background-color: #fff;
  align-items: center;
  z-index: 1;
}
.view_event_popup .modal-body{
  padding: 32px;
}
.view_event_popup .modal-content::-webkit-scrollbar{
  display:block;
  width: 4px;
  border-radius: 12px;
}
.view_event_popup .modal-content::-webkit-scrollbar-track{
  background: var(--font-color-light);
}
.view_event_popup .modal-content::-webkit-scrollbar-thumb{
  background: var(--primary-font-color);
}
.view_event_popup .modal-content-container{
  width: 100%;
}
.view_event_popup .modal-header .note,.view_event_popup .event_title{
  color:var(--primary-color-dark);
}
.view_event_popup .modal-body .event-date span{
  margin-left: 16px;
}
.view_event_popup .event-description{
  max-width: 80%;
  text-align: justify;
}
#event_img img, #update_img img{
  width: 100%;
  max-height: 250px;
  object-fit: contain;
}

.earned-badge-card-container{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 500;
}
.earned-badge-card{
  width: 335px;
  height: 318px;
  padding: 20px;
  background-color: #fff;
  overflow: hidden;
}
.earned-badge-card .card-heading{
  margin-bottom: 4px;
  color: var(--primary-color-bg);
}
.earned-badge-card .note{
  width: 70%;
  margin: 0 auto 34px;
}
/*vector positions*/
[class*='vec-']{
  position: absolute;
}
.vec-1-sm{
  top: 20px;
  left: 0;
}
.vec-1{
  top: 23px;
  left: 0;
}
.vec-2{
  top: 90px;
  left: 0;
}
.vec-3{
  top: 10px;
  left: 54px;
}
.vec-4{
  top: 0;
  right: 0;
}
.vec-5{
  top: 96px;
  right: 0;
}
.vec-6{
  bottom: 0;
  right: 0;
}

/* HOME CARDS */

.home-ilust{
  position: absolute;
  width: 98px;
  right: 0;
  top:50px;
  transition: .3s;
}

/*curriculum cards*/
.curriculum-card{
  position: relative;
  /*width: 300px;*/
  height: 190px;
  /*padding: 20px;*/
  margin-right: 16px;
  overflow: hidden;
  flex-grow: 1;
  transition: .3s;
  margin-bottom: 16px;
}

.curriculum-card h6{
  width: 200px;
  transition: .3s;
}
.curriculum-card-img{
  position: absolute;
  width: 170px;
  height: 100%;
  top: 0;
  right: 0;
}
.refer-card,.form-card{
  flex-wrap: wrap;
  gap:10px;
}
.refer-card > div,
.form-card > div{
  width: 60%;
}
.aciton-card h6{
  transition: .3s;
}

.card-desc{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  padding: 20px;
  z-index: 1;
}
.indian-card{
  background-color: var(--primary-color-bg);
  /*margin-right: 16px;*/
}
.indian-card h6{
  color: #fff;
}
.american-card{
  background-color: #800020;
  margin-right: 16px;
}
.american-card h6{
  color: #fff;
}
.british-card{
  background-color: #471C51;
}
.british-card h6{
  color:#fff;
}

/*action cards for taking quiz,fill form link and refer friend*/
.action-card-container{
  padding-bottom: 32px;
}
.action-card{
  min-height: 140px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*cursor: pointer;*/
  transition: .3s;
  position: relative;
  overflow: hidden;
}
.action-card p{
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quiz-card-box{
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  padding: 20px;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}
.refer-card{
  background-color:#09CCCC;
  position: relative;
}
.refer-illust,.quiz-illust{
  position: absolute;
  right: 0;
  bottom: 0;
}
.form-illust1{
  position: absolute;
  right: 0;
  top: 0;
}
.form-illust2{
  position: absolute;
  left: 0;
  bottom: 0;
}
.refer-btn{
  color: #09CCCC;
}
.form-btn{
  color: var(--secondary-color-light);
}
.refer-card .card-heading,.refer-card .card-sub-desc{
  color: #004D4D;
}
.form-card{
  background-color:var(--secondary-color-light);
}
.form-card p{
  color: #fff;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-card a:hover{
  color:var(--secondary-color-light);
}
.action-card-butn{
  display: inline-block;
  white-space: nowrap;
  text-transform: uppercase;
  height: 30px;
  border-radius: 50px;
  background-color: #fff;
  text-align: center;
  padding:8px 16px 8px 16px;
  border:none;
  font:12px var(--bold-sans-font);
  cursor: pointer;
  transition: .3s;
}

.connecting-cards{
  position: relative;
  height: 180px;
  padding: 24px 20px;
  transition: .3s;
}
.connecting-cards .action-card-butn{
  margin-top: 30px;
}
.connecting-cards .card-sub-desc{
  width: 225px;
}
.placement-card{
  background-color:#FFBE00;
  margin-bottom: 16px;
}
.placement-card .card-sub-desc{
  color: #FFFFE6;
}
.placement-card .action-card-butn{
  color: #FFBE00;
}
.meeting-card{
  background-color:var(--primary-color-light);
}
.meeting-card .card-heading{
  color: var(--primary-color-bg)
}
.meeting-card .card-sub-desc{
  color:var(--primary-font-color);
}
.meeting-card .action-card-butn{
  background-color: var(--primary-color-bg);
  color:#fff;
}
.placement-illust{
  position: absolute;
  bottom: 0;
  right: 0;
}
.meeting-illust{
  position: absolute;
  top: 20px;
  right: 30px;
}

/*REGION CARD*/
.region-card{
  height: 315px;
  padding: 24px;
  background-color: var(--primary-color-light);
}
.map-box{
  text-align: center;
  height: 85%;
}
.map-box img{
  width: 85%;
  height: 100%;
}

/*School Events card*/
.school-event-card{
  position: relative;
  background-color: var(--secondary-color-light);
  width: 100%;
  height: 380px;
  color: #fff;
}
.school-event-card > img{
  position: absolute;
  top: 0;
  right: 0;
}
.school-event-header {
  padding: 32px 32px 16px;
  border-bottom: 1px solid #CAA371;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.school-event-header p{
  color: #FCF4EA;
  margin: 0;
  z-index: 1;
}
.school-event-header .view_all-btn{
  font-weight: 600;
  text-transform: uppercase;
  color: #FCF4EA;;
  font: 11px var(--semibold-sans-font);
  margin-bottom: 0;
  cursor: pointer;
  z-index: 1;
}
.school-event-body{
  padding: 16px 32px 50px;
}
.school-event-body .school-event-date{
  font-size: 13px;
}
.school-event-body .school-event-name{
  margin-bottom: 22px;
}
.school-event-card .owl-theme .owl-dots .owl-dot span{
  background: #F7F8FC;
}
.school-event-card .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #463013;
}

/*SOCIAL CARD*/
.social-card{
  position: relative;
  /*height: 336px;*/
  height: 380px;
  background-color: var(--primary-color-light);
  padding: 20px;
  transition: .3s;
}
.social-illust{
  position: absolute;
  width: 160px;
  bottom: 0;
  left: 0;
}
.social-card .social-card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.social-card .social-card-header .main-heading{
  margin-bottom: 0;
}
.social-card .social-card-header .view-btn{
  text-transform: uppercase;
  color: var(--secondary-color-light);
  font:11px var(--semibold-sans-font);
  margin-bottom: 0;
  cursor: pointer;
}
.social-card .card-sub-desc{
  -webkit-line-clamp:1;
}

/*.OR_card {
  border-radius: 12px;
  width: 95%;
  padding: 0px;
}*/
.OR_card .owl-item .play-box .play-icon{
  width: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.OR_card .owl-item .play-box img:first-child{
  height: 169px;
}
#testimonials_slied .owl-dots{
  margin-top: 92px;
}
.OR_card .owl-dots{
  margin-top: 30px;
}
.OR_card .owl-theme .owl-dots .owl-dot span{
  width: 52px;
}


.social-card .press-poster{
  width: 100%;
  height: 169px;
  margin-bottom: 12px;
/*  background-image: url(../assets/press-poster@2x.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;*/
  transition: .3s;
}
.press-poster-img{
  width: 94%;
  height: 100%;
  object-fit: cover;
}
.press-date{
  text-transform: uppercase;
  color: var(--secondary-color-light);
  font:11px var(--semibold-sans-font);
  margin-bottom: 12px;
}
.intro-vd-head{
  margin-left: 10px;
}

/*school bio card*/
.school-bio-head{
  margin-left: 10px;
}
.school-bio{
    width: 100%;
    height: 315px;
    border: 1px solid #E4E4E7;
    box-sizing: border-box;
    border-radius: 12px;
}
.school-bio-list{
    width: 100%;
    /*height: 100%;*/
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    padding: 16px;
}
.school-bio-list li{
    width: 50%;
    min-height: 120px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.school-bio-list li:first-child{
    border-right: 1px solid #E4E4E7;
    border-bottom: 1px solid #E4E4E7;
}
.school-bio-list li:nth-child(2){
    border-bottom: 1px solid #E4E4E7;
}
.school-bio-list li:nth-child(3){
    border-right: 1px solid #E4E4E7;
}
.count{
   font: 28px/30px 'Montserrat-Regular';
   display: block;
   padding-bottom: 5px;
}
.counter-number{
   display: flex;
   align-items: center;
}
.school-bio-list .desc{
   font: 12px/16px 'Montserrat-Regular';
   color: #7586BB;
   width: 120px;
}
.text-yellow{
  color: var(--yellow);
}
.text-olive{
  color: var(--olive);
}
.text-light-blue{
  color: var(--light-blue);
}
.text-red{
  color: var(--red);  
}

/*ENROLLMENT FORM STATUS SHOW CARD*/

/*——————————————
TimeLine CSS
———————————————*/
/* Base */
.progress-bar {
  margin: 0 auto;
  width: 100%;
  height: 10px;
  background-color: #7586BB;
  border-radius: 5px;
}
.progress-bar .progress[data-color="white"] {
  background-color: #fff;
}
.progress-bar .progress {
  position: relative;
  background-color: #2ECC40;
  height: 10px;
  border-radius: 5px;
  width: 0%;
  transition: width 1s ease-in-out, background 1s ease-in-out;
}
.progress-bar .progress[data-percent="1"] {
  width: 1%;
}
.progress-bar .progress[data-percent="2"] {
  width: 2%;
}
.progress-bar .progress[data-percent="3"] {
  width: 3%;
}
.progress-bar .progress[data-percent="4"] {
  width: 4%;
}
.progress-bar .progress[data-percent="5"] {
  width: 5%;
}
.progress-bar .progress[data-percent="6"] {
  width: 6%;
}
.progress-bar .progress[data-percent="7"] {
  width: 7%;
}
.progress-bar .progress[data-percent="8"] {
  width: 8%;
}
.progress-bar .progress[data-percent="9"] {
  width: 9%;
}
.progress-bar .progress[data-percent="10"] {
  width: 10%;
}
.progress-bar .progress[data-percent="11"] {
  width: 11%;
}
.progress-bar .progress[data-percent="12"] {
  width: 12%;
}
.progress-bar .progress[data-percent="13"] {
  width: 13%;
}
.progress-bar .progress[data-percent="14"] {
  width: 14%;
}
.progress-bar .progress[data-percent="15"] {
  width: 15%;
}
.progress-bar .progress[data-percent="16"] {
  width: 16%;
}
.progress-bar .progress[data-percent="17"] {
  width: 17%;
}
.progress-bar .progress[data-percent="18"] {
  width: 18%;
}
.progress-bar .progress[data-percent="19"] {
  width: 19%;
}
.progress-bar .progress[data-percent="20"] {
  width: 20%;
}
.progress-bar .progress[data-percent="21"] {
  width: 21%;
}
.progress-bar .progress[data-percent="22"] {
  width: 22%;
}
.progress-bar .progress[data-percent="23"] {
  width: 23%;
}
.progress-bar .progress[data-percent="24"] {
  width: 24%;
}
.progress-bar .progress[data-percent="25"] {
  width: 25%;
}
.progress-bar .progress[data-percent="26"] {
  width: 26%;
}
.progress-bar .progress[data-percent="27"] {
  width: 27%;
}
.progress-bar .progress[data-percent="28"] {
  width: 28%;
}
.progress-bar .progress[data-percent="29"] {
  width: 29%;
}
.progress-bar .progress[data-percent="30"] {
  width: 30%;
}
.progress-bar .progress[data-percent="31"] {
  width: 31%;
}
.progress-bar .progress[data-percent="32"] {
  width: 32%;
}
.progress-bar .progress[data-percent="33"] {
  width: 33%;
}
.progress-bar .progress[data-percent="34"] {
  width: 34%;
}
.progress-bar .progress[data-percent="35"] {
  width: 35%;
}
.progress-bar .progress[data-percent="36"] {
  width: 36%;
}
.progress-bar .progress[data-percent="37"] {
  width: 37%;
}
.progress-bar .progress[data-percent="38"] {
  width: 38%;
}
.progress-bar .progress[data-percent="39"] {
  width: 39%;
}
.progress-bar .progress[data-percent="40"] {
  width: 40%;
}
.progress-bar .progress[data-percent="41"] {
  width: 41%;
}
.progress-bar .progress[data-percent="42"] {
  width: 42%;
}
.progress-bar .progress[data-percent="43"] {
  width: 43%;
}
.progress-bar .progress[data-percent="44"] {
  width: 44%;
}
.progress-bar .progress[data-percent="45"] {
  width: 45%;
}
.progress-bar .progress[data-percent="46"] {
  width: 46%;
}
.progress-bar .progress[data-percent="47"] {
  width: 47%;
}
.progress-bar .progress[data-percent="48"] {
  width: 48%;
}
.progress-bar .progress[data-percent="49"] {
  width: 49%;
}
.progress-bar .progress[data-percent="50"] {
  width: 50%;
}
.progress-bar .progress[data-percent="51"] {
  width: 51%;
}
.progress-bar .progress[data-percent="52"] {
  width: 52%;
}
.progress-bar .progress[data-percent="53"] {
  width: 53%;
}
.progress-bar .progress[data-percent="54"] {
  width: 54%;
}
.progress-bar .progress[data-percent="55"] {
  width: 55%;
}
.progress-bar .progress[data-percent="56"] {
  width: 56%;
}
.progress-bar .progress[data-percent="57"] {
  width: 57%;
}
.progress-bar .progress[data-percent="58"] {
  width: 58%;
}
.progress-bar .progress[data-percent="59"] {
  width: 59%;
}
.progress-bar .progress[data-percent="60"] {
  width: 60%;
}
.progress-bar .progress[data-percent="61"] {
  width: 61%;
}
.progress-bar .progress[data-percent="62"] {
  width: 62%;
}
.progress-bar .progress[data-percent="63"] {
  width: 63%;
}
.progress-bar .progress[data-percent="64"] {
  width: 64%;
}
.progress-bar .progress[data-percent="65"] {
  width: 65%;
}
.progress-bar .progress[data-percent="66"] {
  width: 66%;
}
.progress-bar .progress[data-percent="67"] {
  width: 67%;
}
.progress-bar .progress[data-percent="68"] {
  width: 68%;
}
.progress-bar .progress[data-percent="69"] {
  width: 69%;
}
.progress-bar .progress[data-percent="70"] {
  width: 70%;
}
.progress-bar .progress[data-percent="71"] {
  width: 71%;
}
.progress-bar .progress[data-percent="72"] {
  width: 72%;
}
.progress-bar .progress[data-percent="73"] {
  width: 73%;
}
.progress-bar .progress[data-percent="74"] {
  width: 74%;
}
.progress-bar .progress[data-percent="75"] {
  width: 75%;
}
.progress-bar .progress[data-percent="76"] {
  width: 76%;
}
.progress-bar .progress[data-percent="77"] {
  width: 77%;
}
.progress-bar .progress[data-percent="78"] {
  width: 78%;
}
.progress-bar .progress[data-percent="79"] {
  width: 79%;
}
.progress-bar .progress[data-percent="80"] {
  width: 80%;
}
.progress-bar .progress[data-percent="81"] {
  width: 81%;
}
.progress-bar .progress[data-percent="82"] {
  width: 82%;
}
.progress-bar .progress[data-percent="83"] {
  width: 83%;
}
.progress-bar .progress[data-percent="84"] {
  width: 84%;
}
.progress-bar .progress[data-percent="85"] {
  width: 85%;
}
.progress-bar .progress[data-percent="86"] {
  width: 86%;
}
.progress-bar .progress[data-percent="87"] {
  width: 87%;
}
.progress-bar .progress[data-percent="88"] {
  width: 88%;
}
.progress-bar .progress[data-percent="89"] {
  width: 89%;
}
.progress-bar .progress[data-percent="90"] {
  width: 90%;
}
.progress-bar .progress[data-percent="91"] {
  width: 91%;
}
.progress-bar .progress[data-percent="92"] {
  width: 92%;
}
.progress-bar .progress[data-percent="93"] {
  width: 93%;
}
.progress-bar .progress[data-percent="94"] {
  width: 94%;
}
.progress-bar .progress[data-percent="95"] {
  width: 95%;
}
.progress-bar .progress[data-percent="96"] {
  width: 96%;
}
.progress-bar .progress[data-percent="97"] {
  width: 97%;
}
.progress-bar .progress[data-percent="98"] {
  width: 98%;
}
.progress-bar .progress[data-percent="99"] {
  width: 99%;
}
.progress-bar .progress[data-percent="100"] {
  width: 100%;
}

/*progress linearbar in popup*/

.progress-bar .progress-linear[data-color="white"] {
  background-color: var(--primary-color-bg);
}
.progress-bar .progress-linear{
  position: relative;
  background-color: green;
  height: 10px;
  border-radius: 5px;
  width: 0%;
  transition: width 1s ease-in-out, background 1s ease-in-out;
}
.progress-bar .progress-linear[data-percent="1"] {
  width: 1%;
}
.progress-bar .progress-linear[data-percent="2"] {
  width: 2%;
}
.progress-bar .progress-linear[data-percent="3"] {
  width: 3%;
}
.progress-bar .progress-linear[data-percent="4"] {
  width: 4%;
}
.progress-bar .progress-linear[data-percent="5"] {
  width: 5%;
}
.progress-bar .progress-linear[data-percent="6"] {
  width: 6%;
}
.progress-bar .progress-linear[data-percent="7"] {
  width: 7%;
}
.progress-bar .progress-linear[data-percent="8"] {
  width: 8%;
}
.progress-bar .progress-linear[data-percent="9"] {
  width: 9%;
}
.progress-bar .progress-linear[data-percent="10"] {
  width: 10%;
}
.progress-bar .progress-linear[data-percent="11"] {
  width: 11%;
}
.progress-bar .progress-linear[data-percent="12"] {
  width: 12%;
}
.progress-bar .progress-linear[data-percent="13"] {
  width: 13%;
}
.progress-bar .progress-linear[data-percent="14"] {
  width: 14%;
}
.progress-bar .progress-linear[data-percent="15"] {
  width: 15%;
}
.progress-bar .progress-linear[data-percent="16"] {
  width: 16%;
}
.progress-bar .progress-linear[data-percent="17"] {
  width: 17%;
}
.progress-bar .progress-linear[data-percent="18"] {
  width: 18%;
}
.progress-bar .progress-linear[data-percent="19"] {
  width: 19%
}
.progress-bar .progress-linear[data-percent="20"] {
  width: 20%;
}
.progress-bar .progress-linear[data-percent="21"] {
  width: 21%;
}
.progress-bar .progress-linear[data-percent="22"] {
  width: 22%;
}
.progress-bar .progress-linear[data-percent="23"] {
  width: 23%;
}
.progress-bar .progress-linear[data-percent="24"] {
  width: 24%;
}
.progress-bar .progress-linear[data-percent="25"] {
  width: 25%;
}
.progress-bar .progress-linear[data-percent="26"] {
  width: 26%;
}
.progress-bar .progress-linear[data-percent="27"] {
  width: 27%;
}
.progress-bar .progress-linear[data-percent="28"] {
  width: 28%;
}
.progress-bar .progress-linear[data-percent="29"] {
  width: 29%
}
.progress-bar .progress-linear[data-percent="30"] {
  width: 30%;
}
.progress-bar .progress-linear[data-percent="31"] {
  width: 31%;
}
.progress-bar .progress-linear[data-percent="32"] {
  width: 32%;
}
.progress-bar .progress-linear[data-percent="33"] {
  width: 33%;
}
.progress-bar .progress-linear[data-percent="34"] {
  width: 34%;
}
.progress-bar .progress-linear[data-percent="35"] {
  width: 35%;
}
.progress-bar .progress-linear[data-percent="36"] {
  width: 36%;
}
.progress-bar .progress-linear[data-percent="37"] {
  width: 37%;
}
.progress-bar .progress-linear[data-percent="38"] {
  width: 38%;
}
.progress-bar .progress-linear[data-percent="39"] {
  width: 39%;
}
.progress-bar .progress-linear[data-percent="40"] {
  width: 40%;
}
.progress-bar .progress-linear[data-percent="41"] {
  width: 41%;
}
.progress-bar .progress-linear[data-percent="42"] {
  width: 42%;
}
.progress-bar .progress-linear[data-percent="43"] {
  width: 43%;
}
.progress-bar .progress-linear[data-percent="44"] {
  width: 44%;
}
.progress-bar .progress-linear[data-percent="45"] {
  width: 45%;
}
.progress-bar .progress-linear[data-percent="46"] {
  width: 46%;
}
.progress-bar .progress-linear[data-percent="47"] {
  width: 47%;
}
.progress-bar .progress-linear[data-percent="48"] {
  width: 48%;
}
.progress-bar .progress-linear[data-percent="49"] {
  width: 49%;
}
.progress-bar .progress-linear[data-percent="50"] {
  width: 50%;
}
.progress-bar .progress-linear[data-percent="51"] {
  width: 51%;
}
.progress-bar .progress-linear[data-percent="52"] {
  width: 52%;
}
.progress-bar .progress-linear[data-percent="53"] {
  width: 53%;
}
.progress-bar .progress-linear[data-percent="54"] {
  width: 54%;
}
.progress-bar .progress-linear[data-percent="55"] {
  width: 55%;
}
.progress-bar .progress-linear[data-percent="56"] {
  width: 56%;
}
.progress-bar .progress-linear[data-percent="57"] {
  width: 57%;
}
.progress-bar .progress-linear[data-percent="58"] {
  width: 58%;
}
.progress-bar .progress-linear[data-percent="59"] {
  width: 59%;
}
.progress-bar .progress-linear[data-percent="60"] {
  width: 60%;
}
.progress-bar .progress-linear[data-percent="61"] {
  width: 61%;
}
.progress-bar .progress-linear[data-percent="62"] {
  width: 62%;
}
.progress-bar .progress-linear[data-percent="63"] {
  width: 63%;
}
.progress-bar .progress-linear[data-percent="64"] {
  width: 64%;
}
.progress-bar .progress-linear[data-percent="65"] {
  width: 65%;
}
.progress-bar .progress-linear[data-percent="66"] {
  width: 66%;
}
.progress-bar .progress-linear[data-percent="67"] {
  width: 67%;
}
.progress-bar .progress-linear[data-percent="68"] {
  width: 68%;
}
.progress-bar .progress-linear[data-percent="69"] {
  width: 69%;
}
.progress-bar .progress-linear[data-percent="70"] {
  width: 70%;
}
.progress-bar .progress-linear[data-percent="71"] {
  width: 71%;
}
.progress-bar .progress-linear[data-percent="72"] {
  width: 72%;
}
.progress-bar .progress-linear[data-percent="73"] {
  width: 73%;
}
.progress-bar .progress-linear[data-percent="74"] {
  width: 74%;
}
.progress-bar .progress-linear[data-percent="75"] {
  width: 75%;
}
.progress-bar .progress-linear[data-percent="76"] {
  width: 76%;
}
.progress-bar .progress-linear[data-percent="77"] {
  width: 77%;
}
.progress-bar .progress-linear[data-percent="78"] {
  width: 78%;
}
.progress-bar .progress-linear[data-percent="79"] {
  width: 79%;
}
.progress-bar .progress-linear[data-percent="80"] {
  width: 80%;
}
.progress-bar .progress-linear[data-percent="81"] {
  width: 81%;
}
.progress-bar .progress-linear[data-percent="82"] {
  width: 82%;
}
.progress-bar .progress-linear[data-percent="83"] {
  width: 83%;
}
.progress-bar .progress-linear[data-percent="84"] {
  width: 84%;
}
.progress-bar .progress-linear[data-percent="85"] {
  width: 85%;
}
.progress-bar .progress-linear[data-percent="86"] {
  width: 86%;
}
.progress-bar .progress-linear[data-percent="87"] {
  width: 87%;
}
.progress-bar .progress-linear[data-percent="88"] {
  width: 88%;
}
.progress-bar .progress-linear[data-percent="89"] {
  width: 89%;
}
.progress-bar .progress-linear[data-percent="90"] {
  width: 90%;
}
.progress-bar .progress-linear[data-percent="91"] {
  width: 91%;
}
.progress-bar .progress-linear[data-percent="92"] {
  width: 92%;
}
.progress-bar .progress-linear[data-percent="93"] {
  width: 93%;
}
.progress-bar .progress-linear[data-percent="94"] {
  width: 94%;
}
.progress-bar .progress-linear[data-percent="95"] {
  width: 95%;
}
.progress-bar .progress-linear[data-percent="96"] {
  width: 96%;
}
.progress-bar .progress-linear[data-percent="97"] {
  width: 97%;
}
.progress-bar .progress-linear[data-percent="98"] {
  width: 98%;
}
.progress-bar .progress-linear[data-percent="99"] {
  width: 99%;
}
.progress-bar .progress-linear[data-percent="100"] {
  width: 100%;
}


section.timeline-outer {
   /*width: 80%; */
  margin: 0 auto;
  overflow-y:scroll;
  height:70%;
  padding-left:12px;
  padding-right:32px;
}
.progress-card{
  background-color:#243978;
  height: 376px;
  border-radius:12px;
  position: relative;
  overflow: hidden;
  transition: .3s;
}
.progress-card-illust{
  position: absolute;
  top: 0;
  right: 0;
}
/* Timeline */

.timeline {
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
  color: #333;
  letter-spacing: 0.5px;
  position: relative;
  line-height: 1.4em;
  padding-left:20px;
  list-style: none;
  text-align: left;
  margin-top:32px;
}

.form-status-head{
  text-transform:uppercase;
  font:13px var(--bold-sans-font);
  color:#fff;
  margin-bottom:16px;
  margin-top:0;
}
.offstatus-head{
  color:#D4DBEE !important;
}
.form-status-desc{
  font-size:11px;
  color:#fff;
  margin:12px 0 0;
}
.timeline .event {
  padding-bottom: 32px;
  position: relative;
}

.timeline .event:last-of-type {
  padding-bottom: 0;
  margin-bottom: 32px;
  border: none;
}

.timeline .event:before,
.timeline .event:after {
  position: absolute;
  display: block;
}
.timeline .event:before{
  content: "";
  top:11px;
  left: -22px;
  height:85%;
  border-left:2px dashed #F15B5B;
}
.timeline .event:after{
  content: "";
  left: -26px;
  top: 0px;
}
.timeline .event-completed:before{
  border-left:2px solid #F15B5B;
}
.timeline .event-completed:after {
  background: #F15B5B;
  border-radius: 50%;
  height: 10px;
  width: 10px;
}
.timeline .event-onstatus:before{
  border-left:2px dashed #F15B5B;
}
.timeline .event-onstatus:after{
  left:-24px;
  background: #F15B5B;
  border-radius: 50%;
  height: 6px;
  width: 6px;
}
.timeline .event-offstatus:after{
  top:1px;
  left:-24px;
  border:1px solid #F15B5B;
  border-radius: 50%;
  height: 6px;
  width: 6px;
}

.progress-card-bar{
  position:relative
}
.progress-card-bar:before{
  content:"";
  position:absolute;
  display:block;
  width:100%;
  height:8px;
  background-color:#7586BB;
  border-radius:4px;
}
.progress-card-bar:after{
  content:"";
  position:absolute;
  display:block;
  width:84%;
  height:8px;
  background-color:#fff;
  border-radius:4px;
}
.form-fees-progress:after{
  width: 50%;
}
.progress-butn-box{
  height:30%;
  width:100%;
  padding:25px;
  display:flex;
  align-items:flex-end;
  border-top:1px solid #7586BB;
}
.progress-butn{
  width:100%;
  height:51px;
  border:none;
  border-radius:12px;
  background-color:#fff;
  text-align: center;
  font-size:13px;
  color: var(--primary-color-bg);
}
.progress-butn-link{
  display: flex;
  align-items: center;
  justify-content: center;
}
.view-stages-card  section.timeline-outer{
  height: 60% !important;
}
.view-stages-card .progress-butn-box{
  height: 40% !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
}
.view-status-popup .modal-header{
  padding: 32px 40px 0;
}
.view-status-popup .modal-title,
.view-status-popup .close{
  color:#F15B5B;
}
.view-status-popup .form-status-head,
.view-status-popup .form-status-desc{
  color:var(--primary-color-bg) !important;
} 
.view-status-popup .offstatus-head{
    color: #93A1CE !important;
}
.view-status-popup .form-status-desc{
  margin-top: 12px;
}
.view-status-popup .progress-bar{
  background-color: var(--font-color-light);
}
.view-status-popup .progress-bar .progress{
  background-color: var(--primary-color-bg);
}


/* ======= OTHERS ======= */  

.skill-video-box{
  position: relative;
  width: 95%;
  margin: 0px auto;
}
.skill-video-box-sm{
  width: 100%;
  height: 257px;
  margin-bottom: 16px;
}
.skill-video-box-lg{
  width: 100%;
  height: 315px;
}
.skill-video-box iframe{
  width: 100% !important;
  height: 100%;
  border-radius: 12px;
}
.skill-video-box img:first-child{
  object-fit: cover;
  height: 100%;
}
[class^="inner-skill-video"]{
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}
[class^="play-btn"]{
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  width: 60px;
  height: 100%;
  border-radius: 12px;
}
.intro-play-icon{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.social-card .testimonial-video-box::-webkit-scrollbar {
  display:block !important;
  height: 3px;
  padding-left: 20px;
  border-radius: 12px;
  cursor: pointer !important;
}
.testimonial-video-box::-webkit-scrollbar-track {
  background: var(--font-color-light); 
  border-radius: 12px;
  margin-inline: 220px 220px;
  cursor: pointer !important;
}
/* Handle */
.testimonial-video-box::-webkit-scrollbar-thumb {
  background: var(--primary-color-bg); 
  border-radius: 12px;
  cursor: pointer !important;
}

.testimonial-video-box .play-box{
  margin-right: 11px;
}

.add-sib-box{
  position: relative;
  overflow: hidden;
}
.add-sib-ilust{
  width: 25px;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: rotate(30deg);
}
.add-sib-butn{
  width: 100%;
  height: 103px;
  background-color: var(--primary-color-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px;
  cursor: pointer;
}
.add-sib-butn .main-heading{
  font-size: 19px;
}

.stu-council-vd-box{
  margin-bottom: 16px;
}

.stu-council-vd-box h2{
  margin-left: 10px;
}

.stu-council-vd-box .col-md-6 > div{
    height: 315px;
}
.stu-council-vd-box .row{
    row-gap: 30px;
}

.no_title{
    margin-top: 44px;
}
.stu-council-vd-box   .skill-video-box-sm{
    margin-bottom: 0;
}

.student-analytics-box{
  margin-bottom: 32px;
}

.congrd-card{
    position: relative;
    width: 100%;
    height: 305px;
    padding: 20px;
    overflow: hidden;
    flex-grow: 1;
    transition: .3s;
    margin-bottom: 16px;
}
.congrd-card img{
    position: absolute;
    width: 152px;
    bottom: 0;
    right: 0;
}
.underline{
  border-top: 1px solid #E4E4E7;
  margin: 15px 0px;
}
.stududent-detail-section{
  position: relative;
  width: 100%;
  background-color: var(--primary-color-light);
  padding: 32px;
  margin-bottom: 20px;
}
.stududent-detail-section .main-heading{
  margin-left:-12px;
}
.std-detail-main-box{
  width: 100%;
  background-color: #fff;
}
.st-name-list-box{
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.st-name-list-box li span{
  font:12px/16px var(--bold-nunitosans-font);
  width: auto;
  border: 1px solid #D4DBEE;
  border-radius: 50px;
  color: #7586BB;
  cursor: pointer;
  text-transform: uppercase;
  padding: 8px 16px;
  margin-right: 10px;
}
.st-name-list-box li span.active{
  background: #FFBE00;
  color: #fff;
  border: 1px solid #FFBE00;
}
.std-detail-desc-box{
  width: 100%;
  min-height:273px;
  background-color: #fff;
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  padding: 24px;
  margin-bottom: 15px;
}
.std-info-set{

}
.std-info-set h2{
  color: var(--secondary-color-light);
  font: 12px var(--bold-sans-font);
  padding-bottom: 5px;
  margin: 0px;
}
.std-info-set p{
  font-size: 16px;
  color: var(--primary-color-dark);
  margin: 0px;
}
.fees-box{
  width: 95%;
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  min-height: 273px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fees-desc{
  border-bottom: 1px solid #E4E4E7;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: url(../assets/term-fees-vector.png);
  background-repeat: no-repeat;
  background-position: 80% -50%;
}
.fees-desc h2{
  font: 40px var(--medium-Mont-font);
  color: var(--primary-color-dark);
  margin: 0px;
  padding-bottom: 10px;
}
.fees-desc p{
  margin: 0px;
  font: 16px/16px 'Montserrat-Regular';
  color: #7586BB;
  padding-bottom: 10px;
}
.due-date{
  font: 14px/20px 'Montserrat-Regular' !important;
  color: #7586BB !important;
  padding-top: 5px;
}
.more-paynow-btn-box{
  width: 100%;
  display: flex;
  flex-wrap:no-wrap;
  justify-content: space-between;
}
.more-info-btn{
  width: 48%;
  height: 54px;
  background-color: transparent;
  border: 1px solid #243978;
  border-radius: 12px;
  font: 19px var(--medium-Mont-font);
  color: var(--primary-color-dark);
  outline: none;
}
.pay-now-btn{
  width: 48%;
  height: 54px;
  border: 1px solid #243978;
  border-radius: 12px;
  font: 19px var(--medium-Mont-font);
  background-color: #243978;
  color: #fff;
  outline: none;
}



/*footer*/
.our-help-box{
  width: 100%;
  height: 125px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: url(../assets/our-help-vector.png) #F15B5B;
  padding: 24px;
  background-repeat: no-repeat;
  background-size: 70px;
  background-position: 90% 50%;
}
.our-help-box h2{
  font: 20px var(--medium-Mont-font);
  color: #fff;
  margin: 0px;
  padding-bottom: 10px;
}
.our-help-box p{
  margin: 0px;
  font: 14px/16px 'Montserrat-Regular';
  color: #fff;
}
.social-media-box{
  width: 100%;
  margin-left: 16px;
}
.social-media-box h2{
  font: 24px var(--medium-Mont-font);
  color: #0A1E5C;
  margin: 0px;
  padding-bottom: 16px;
}
.social-media-iocn-box{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.social-media-iocn-box li{
  margin-right: 20px;
}
.social-media-icon{
  width: 80px;
}
.dashboard-card{
  position: relative;
  width: 95%;
  height: 250px;
  padding: 20px;
  overflow: hidden;
  flex-grow: 1;
  transition: .3s;
  margin-bottom: 0px;
}
.dashboard_document_slied{
  width: 100%;
  border-radius: 13px;
}
.profile-card h2{
  font: 24px var(--medium-Mont-font);
  color: #fff;
  margin: 0px;
  padding-bottom: 10px;
}
.profile-card h6{
  font: 14px/16px 'Montserrat-Regular';
  color: #fff;
  margin: 0px;
}
.flex-wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 160px;
}
.document-desc-set{
  padding-left: 15px;
}
.document-status-card h4{
  font: 24px var(--medium-Mont-font);
  color: #004D4D;
  margin: 0px;
  padding-bottom: 10px;
}
.document-status-card h6{
  font: 14px/16px 'Montserrat-Regular';
  color: #007979;
  margin: 0px;
}
.latest-upload-status-card .dashboard-card{
  /*height: 100%;*/
}
.latest-upload-status-card h4{
  font: 24px var(--medium-Mont-font);
  color: #0A1E5C;
  margin: 0px;
  padding-bottom: 10px;

}
.latest-upload-status-card h5{
  font: 14px/16px 'Montserrat-Regular';
  color: #7586BB;
  margin: 0px;
}
.upated-date{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.upated-date a{
  color: #7586BB;
  text-transform: uppercase; 
  font: 11px var(--semibold-sans-font);
  cursor: pointer;
}
.upated-date .form-label{
  cursor: pointer;
  width: unset;
}
.dashboard-card-img1{
  width: 102px;
  position: absolute;
  bottom: 0;
  right: 0;
}
.dashboard-card-img2{
  width: 72px;
  position: absolute;
  bottom: 0;
  right: 0;
}
.dashboard-card-img3{
  width: 59px !important;
  position: absolute;
  bottom: 0;
  right: 0;
}
.profile-card{
  background-color: #243978;
}
.document-status-card{
  background-color: #00BCBC;
}
.latest-upload-status-card{
  background-color: #D4DBEE;
  position: relative;
  overflow:hidden;
}
.view-details-btn{
  display: inline-block;
  font-size: 12px;
  width: 102px;
  background: #F15B5B;
  color: #fff;
  border-radius: 50px;
  padding: 2px 16px;
  border: 1px solid #F15B5B;
}

.orien-status-card{
  background-color: #FFBE05;
}
.orien-status-card h4{
  font: 24px var(--medium-Mont-font);
  color: #014d4d;
  margin: 0px;
  padding-bottom: 10px;
}
.orien-status-card h6{
  font: 14px/16px 'Montserrat-Regular';
  color: #01797b;
  margin: 0px;
}

.progressbar {
  position: relative;
  left: 6%;
  width: 105px;
  height: 105px;
  transform: rotate(-90deg);
}
.progressbar:before{
  content: "";
  position: absolute;
  top: 0;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  border: 14px solid rgba(0,0,0,.4);
}

.progressbar__svg {
  position: relative;
  width: 100%;
  height: 100%;
}
.progressbar__svg-circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 15px;
  stroke-dasharray: 280;
  stroke-dashoffset: 140;
  stroke-linecap: round;
  transform: translate(5px, 5px); // stroke-width / 2
}
.progressbar__svg-circle{
  stroke: #fff;
}
.progressbar__text {
  position: absolute;
  top: 50%;
  left: 48%;
  padding: 0.25em 0.5em;
  color: hsl(0, 0%, 100%);
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 0.25em;
  transform: translate(-50%, -50%) rotate(90deg);
}

/*orientation-progress*/
/* .orien-status-card{
  background-color: #FFBE05;
}
.orien-status-card h4{
  font: 24px var(--medium-Mont-font);
  color: #014d4d;
  margin: 0px;
  padding-bottom: 10px;
}
.orien-status-card h6{
  font: 14px/16px 'Montserrat-Regular';
  color: #01797b;
  margin: 0px;
}

.orien-status-card .progressbar {
  position: relative;
  left: 6%;
  width: 105px;
  height: 105px;
  transform: rotate(-90deg);
}
.orien-status-card .progressbar:before{
  content: "";
  position: absolute;
  top: 0;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  border: 14px solid #8d6500;
}

.orien-status-card .progressbar__svg {
  position: relative;
  width: 100%;
  height: 100%;
}
.orien-status-card .progressbar__svg-circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 15px;
  stroke-dasharray: 280;
  stroke-dashoffset: 140;
  stroke-linecap: round;
  transform: translate(5px, 5px); // stroke-width / 2
}
.orien-status-card .progressbar__svg-circle{
  stroke: #fff;
}
.orien-status-card .progressbar__text {
  position: absolute;
  top: 50%;
  left: 48%;
  padding: 0.25em 0.5em;
  color: hsl(0, 0%, 100%);
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 0.25em;
  transform: translate(-50%, -50%) rotate(90deg);
} */
.dashboard-card-img4{
  width: 72px;
  position: absolute;
  bottom: 0;
  right: 0;
}

/*payment section*/
.due-date-underline{
  border-bottom: 1px solid #FF6C6C;
  margin: 20px auto;
}
.feespayment-view{
  width: 100%;
}
.due-date-card{
  position: relative;
  width: 95%;
  height: 100%;
  min-height: 200px;
  padding: 20px;
  overflow: hidden;
  flex-grow: 1;
  transition: .3s;
  margin-bottom: 0px;
  background: url(../assets/next-due-vector.png)#F15B5B;
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 72px;
  /*margin-top: 30px;*/
}
.box-set{
  width: 100%;
}
.box-set h3{
  font: 16px var(--regular-sans-font);
  color: #fff;
  margin: 0px;
  padding-bottom: 8px;
}
.box-set h2{
  font: 24px var(--medium-Mont-font);
  color: #fff;
  margin: 0px;
}
.box-set select{
  font: 24px var(--medium-Mont-font);
  color: #fff;
  margin: 0px;
  border: none;
  outline: none;
  appearance: none;
  background: url('../assets/down-arrow.png')#243978;
  background-repeat: no-repeat;
  background-position: right center;
  width: 170px;
}

.payment-detail-box{
  width: 100%;
}
.payment-det-list{
  width: 100%;
}
.payment-det-list li{
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}
.payment-det-list li h2{
  font: 14px var(--regular-sans-font);
  color: #FFC0C0;
}
.payment-det-list li p{
  font: 14px var(--regular-sans-font);  
  color: #fff;
}
.paynow-btn-box{
  width: 100%;
  position: absolute;
  bottom: 20px;
}
.pay-now-btn-sm{
  font: 12px var(--bold-nunitosans-font);
  background: #FFFFFF;
  border-radius: 50px;
  color: #F15B5B;
  width: 86px;
  height: 29px;
  border: none;
  outline: none;
}
/*end*/
/*Download receipt*/
.pre-payment-underline{
  border-bottom: 1px solid #7586BB;
  margin: 20px auto;
}
.pre-payment-card{
  position: relative;
  width: 95%;
  height: 100%;
  min-height: 200px;
  padding: 20px;
  overflow: hidden;
  flex-grow: 1;
  transition: .3s;
  margin-bottom: 0px;
  background: url(../assets/pre-paymt-vector.png)#243978;
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 72px;
  /*margin-top: 30px;*/
}
.pre-payment-detail-box{
  width: 100%;
}
.pre-payment-det-list{
  width: 100%;
}
.pre-payment-det-list li{
  display: flex;
  align-items: flex-start;
  width: 100%;
  justify-content: space-between;
}
.pre-payment-det-list li h2{
  font: 14px var(--regular-sans-font);
  color: #93A1CE;
}
.pre-payment-det-list li p{
  font: 14px var(--regular-sans-font);  
  color: #fff;
}
.down-recpt-btn-box{
  width: 100%;
}
.down-recpt-btn-sm{
  font: 12px var(--bold-nunitosans-font);
  background: #FFFFFF;
  border-radius: 50px;
  color: #243978;
  width: 150px;
  height: 29px;
  border: none;
  outline: none;
}
/*end*/
/*fees-structure*/
.fees-structure-box{
  position: relative;
  width: 97.5%;
  min-height: 200px;
  padding: 20px;
  overflow: hidden;
  flex-grow: 1;
  transition: .3s;
  margin-bottom: 0px;
  background: url(../assets/fees-strc-vector.png)#F7F8FC;
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 60px;
  margin-top: 30px;
}
.heading-highlight{
  font: 12px var(--bold-nunitosans-font);
  color: var(--secondary-color-light);
  margin: 0px;
}
.payment-amt{
  font: 16px var(--regular-nunitosans-font);
  color: #142865;
  margin: 0px;
}
.fees-str-box{
  width: 100%;
}
.fees-str-table-box{
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 20px 0px;
  overflow-x: scroll;
}
.fees-str-table{
  width: 1084px;
}
.fees-str-table tbody > tr > td{
  padding: 20px 10px;
  border-right: 1px solid #E4E4E7;
  border-bottom: 1px solid #E4E4E7;
  text-align: center;
}
.fees-str-table tbody > tr > td:first-child{
  position: sticky;
  left: 0;
  background-color: #fff;
  border-right: 1px solid #E4E4E7;
  z-index: 1;
}
.fees-str-table tbody > tr > td:last-child{
  border-right: 1px solid transparent;
}
.fees-str-table tbody tr.remove-border td{
  border-bottom: 1px solid transparent;
}
.fees-str-box h2{
  font: 23px var(--medium-Mont-font);
  color: var(--primary-color-dark);
}
.fees-str-box p{
  font: 16px var(--regular-sans-font);  
  color: #243978;
}
.payment-date{
  font: 14px var(--regular-nunitosans-font);
  color: var(--primary-font-color);
  margin: 0px;
}
.payment-total{
  font: 16px var(--regular-nunitosans-font);
  color: #142865;
  margin: 0px;
}
/*owl carousel*/
/*.latest-upload-status-card .owl-theme .owl-dots{
  margin-top: -10px;
}*/
.latest-upload-status-card .owl-theme .owl-dots .owl-dot span{
  background: #F7F8FC;
}
.latest-upload-status-card .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #243978;
}

/*========= percentage circle =============*/
.document-status-card .progress {
  width: 110px;
  height: 110px;
  line-height: 160px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}
.document-status-card .progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #007979;
  position: absolute;
  top: 0;
  left: 0;
}
.document-status-card .progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left {
  left: 0;
}
.document-status-card .progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: #fff;
  border-width: 13px;
}
.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 95px;
  border-bottom-right-radius: 95px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right {
  right: 0;
}
.progress .progress-right .progress-bar {
  left: -101%;
  border-top-left-radius: 95px;
  border-bottom-left-radius: 95px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
.progress .progress-value {
  display: flex;
  border-radius: 50%;
  font-size: 1rem;
  text-align: center;
  line-height: 20px;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  font-weight: 300;
}
.progress .progress-value span {
  font: 16px/20px 'OpenSans-Regular';
  text-transform: uppercase;
  color: #fff;
}



/* This for loop creates the necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
.progress[data-percentage="1"] .progress-right .progress-bar {
  animation: loading-1 0.5s linear forwards;
}
.progress[data-percentage="1"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="2"] .progress-right .progress-bar {
  animation: loading-2 0.5s linear forwards;
}
.progress[data-percentage="2"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="3"] .progress-right .progress-bar {
  animation: loading-3 0.5s linear forwards;
}
.progress[data-percentage="3"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="4"] .progress-right .progress-bar {
  animation: loading-4 0.5s linear forwards;
}
.progress[data-percentage="4"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="5"] .progress-right .progress-bar {
  animation: loading-5 0.5s linear forwards;
}
.progress[data-percentage="5"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="6"] .progress-right .progress-bar {
  animation: loading-6 0.5s linear forwards;
}
.progress[data-percentage="6"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="7"] .progress-right .progress-bar {
  animation: loading-7 0.5s linear forwards;
}
.progress[data-percentage="7"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="8"] .progress-right .progress-bar {
  animation: loading-8 0.5s linear forwards;
}
.progress[data-percentage="8"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="9"] .progress-right .progress-bar {
  animation: loading-9 0.5s linear forwards;
}
.progress[data-percentage="9"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-10 0.5s linear forwards;
}
.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="11"] .progress-right .progress-bar {
  animation: loading-11 0.5s linear forwards;
}
.progress[data-percentage="11"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="12"] .progress-right .progress-bar {
  animation: loading-12 0.5s linear forwards;
}
.progress[data-percentage="12"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="13"] .progress-right .progress-bar {
  animation: loading-13 0.5s linear forwards;
}
.progress[data-percentage="13"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="14"] .progress-right .progress-bar {
  animation: loading-14 0.5s linear forwards;
}
.progress[data-percentage="14"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="15"] .progress-right .progress-bar {
  animation: loading-15 0.5s linear forwards;
}
.progress[data-percentage="15"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="16"] .progress-right .progress-bar {
  animation: loading-16 0.5s linear forwards;
}
.progress[data-percentage="16"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="17"] .progress-right .progress-bar {
  animation: loading-17 0.5s linear forwards;
}
.progress[data-percentage="17"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="18"] .progress-right .progress-bar {
  animation: loading-18 0.5s linear forwards;
}
.progress[data-percentage="18"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="19"] .progress-right .progress-bar {
  animation: loading-19 0.5s linear forwards;
}
.progress[data-percentage="19"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-20 0.5s linear forwards;
}
.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="21"] .progress-right .progress-bar {
  animation: loading-21 0.5s linear forwards;
}
.progress[data-percentage="21"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="22"] .progress-right .progress-bar {
  animation: loading-22 0.5s linear forwards;
}
.progress[data-percentage="22"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="23"] .progress-right .progress-bar {
  animation: loading-23 0.5s linear forwards;
}
.progress[data-percentage="23"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="24"] .progress-right .progress-bar {
  animation: loading-24 0.5s linear forwards;
}
.progress[data-percentage="24"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="25"] .progress-right .progress-bar {
  animation: loading-25 0.5s linear forwards;
}
.progress[data-percentage="25"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="26"] .progress-right .progress-bar {
  animation: loading-26 0.5s linear forwards;
}
.progress[data-percentage="26"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="27"] .progress-right .progress-bar {
  animation: loading-27 0.5s linear forwards;
}
.progress[data-percentage="27"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="28"] .progress-right .progress-bar {
  animation: loading-28 0.5s linear forwards;
}
.progress[data-percentage="28"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="29"] .progress-right .progress-bar {
  animation: loading-29 0.5s linear forwards;
}
.progress[data-percentage="29"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-30 0.5s linear forwards;
}
.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="31"] .progress-right .progress-bar {
  animation: loading-31 0.5s linear forwards;
}
.progress[data-percentage="31"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="32"] .progress-right .progress-bar {
  animation: loading-32 0.5s linear forwards;
}
.progress[data-percentage="32"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="33"] .progress-right .progress-bar {
  animation: loading-33 0.5s linear forwards;
}
.progress[data-percentage="33"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="34"] .progress-right .progress-bar {
  animation: loading-34 0.5s linear forwards;
}
.progress[data-percentage="34"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="35"] .progress-right .progress-bar {
  animation: loading-35 0.5s linear forwards;
}
.progress[data-percentage="35"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="36"] .progress-right .progress-bar {
  animation: loading-36 0.5s linear forwards;
}
.progress[data-percentage="36"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="37"] .progress-right .progress-bar {
  animation: loading-37 0.5s linear forwards;
}
.progress[data-percentage="37"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="38"] .progress-right .progress-bar {
  animation: loading-38 0.5s linear forwards;
}
.progress[data-percentage="38"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="39"] .progress-right .progress-bar {
  animation: loading-39 0.5s linear forwards;
}
.progress[data-percentage="39"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-40 0.5s linear forwards;
}
.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="41"] .progress-right .progress-bar {
  animation: loading-41 0.5s linear forwards;
}
.progress[data-percentage="41"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="42"] .progress-right .progress-bar {
  animation: loading-42 0.5s linear forwards;
}
.progress[data-percentage="42"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="43"] .progress-right .progress-bar {
  animation: loading-43 0.5s linear forwards;
}
.progress[data-percentage="43"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="44"] .progress-right .progress-bar {
  animation: loading-44 0.5s linear forwards;
}
.progress[data-percentage="44"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="45"] .progress-right .progress-bar {
  animation: loading-45 0.5s linear forwards;
}
.progress[data-percentage="45"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="46"] .progress-right .progress-bar {
  animation: loading-46 0.5s linear forwards;
}
.progress[data-percentage="46"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="47"] .progress-right .progress-bar {
  animation: loading-47 0.5s linear forwards;
}
.progress[data-percentage="47"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="48"] .progress-right .progress-bar {
  animation: loading-48 0.5s linear forwards;
}
.progress[data-percentage="48"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="49"] .progress-right .progress-bar {
  animation: loading-49 0.5s linear forwards;
}
.progress[data-percentage="49"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="51"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="51"] .progress-left .progress-bar {
  animation: loading-1 0.5s linear forwards 0.5s;
}

.progress[data-percentage="52"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="52"] .progress-left .progress-bar {
  animation: loading-2 0.5s linear forwards 0.5s;
}

.progress[data-percentage="53"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="53"] .progress-left .progress-bar {
  animation: loading-3 0.5s linear forwards 0.5s;
}

.progress[data-percentage="54"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="54"] .progress-left .progress-bar {
  animation: loading-4 0.5s linear forwards 0.5s;
}

.progress[data-percentage="55"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="55"] .progress-left .progress-bar {
  animation: loading-5 0.5s linear forwards 0.5s;
}

.progress[data-percentage="56"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="56"] .progress-left .progress-bar {
  animation: loading-6 0.5s linear forwards 0.5s;
}

.progress[data-percentage="57"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="57"] .progress-left .progress-bar {
  animation: loading-7 0.5s linear forwards 0.5s;
}

.progress[data-percentage="58"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="58"] .progress-left .progress-bar {
  animation: loading-8 0.5s linear forwards 0.5s;
}

.progress[data-percentage="59"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="59"] .progress-left .progress-bar {
  animation: loading-9 0.5s linear forwards 0.5s;
}

.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-10 0.5s linear forwards 0.5s;
}

.progress[data-percentage="61"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="61"] .progress-left .progress-bar {
  animation: loading-11 0.5s linear forwards 0.5s;
}

.progress[data-percentage="62"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="62"] .progress-left .progress-bar {
  animation: loading-12 0.5s linear forwards 0.5s;
}

.progress[data-percentage="63"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="63"] .progress-left .progress-bar {
  animation: loading-13 0.5s linear forwards 0.5s;
}

.progress[data-percentage="64"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="64"] .progress-left .progress-bar {
  animation: loading-14 0.5s linear forwards 0.5s;
}

.progress[data-percentage="65"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="65"] .progress-left .progress-bar {
  animation: loading-15 0.5s linear forwards 0.5s;
}

.progress[data-percentage="66"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="66"] .progress-left .progress-bar {
  animation: loading-16 0.5s linear forwards 0.5s;
}

.progress[data-percentage="67"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="67"] .progress-left .progress-bar {
  animation: loading-17 0.5s linear forwards 0.5s;
}

.progress[data-percentage="68"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="68"] .progress-left .progress-bar {
  animation: loading-18 0.5s linear forwards 0.5s;
}

.progress[data-percentage="69"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="69"] .progress-left .progress-bar {
  animation: loading-19 0.5s linear forwards 0.5s;
}

.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-20 0.5s linear forwards 0.5s;
}

.progress[data-percentage="71"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="71"] .progress-left .progress-bar {
  animation: loading-21 0.5s linear forwards 0.5s;
}

.progress[data-percentage="72"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="72"] .progress-left .progress-bar {
  animation: loading-22 0.5s linear forwards 0.5s;
}

.progress[data-percentage="73"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="73"] .progress-left .progress-bar {
  animation: loading-23 0.5s linear forwards 0.5s;
}

.progress[data-percentage="74"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="74"] .progress-left .progress-bar {
  animation: loading-24 0.5s linear forwards 0.5s;
}

.progress[data-percentage="75"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="75"] .progress-left .progress-bar {
  animation: loading-25 0.5s linear forwards 0.5s;
}

.progress[data-percentage="76"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="76"] .progress-left .progress-bar {
  animation: loading-26 0.5s linear forwards 0.5s;
}

.progress[data-percentage="77"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="77"] .progress-left .progress-bar {
  animation: loading-27 0.5s linear forwards 0.5s;
}

.progress[data-percentage="78"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="78"] .progress-left .progress-bar {
  animation: loading-28 0.5s linear forwards 0.5s;
}

.progress[data-percentage="79"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="79"] .progress-left .progress-bar {
  animation: loading-29 0.5s linear forwards 0.5s;
}

.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-30 0.5s linear forwards 0.5s;
}

.progress[data-percentage="81"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="81"] .progress-left .progress-bar {
  animation: loading-31 0.5s linear forwards 0.5s;
}

.progress[data-percentage="82"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="82"] .progress-left .progress-bar {
  animation: loading-32 0.5s linear forwards 0.5s;
}

.progress[data-percentage="83"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="83"] .progress-left .progress-bar {
  animation: loading-33 0.5s linear forwards 0.5s;
}

.progress[data-percentage="84"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="84"] .progress-left .progress-bar {
  animation: loading-34 0.5s linear forwards 0.5s;
}

.progress[data-percentage="85"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="85"] .progress-left .progress-bar {
  animation: loading-35 0.5s linear forwards 0.5s;
}

.progress[data-percentage="86"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="86"] .progress-left .progress-bar {
  animation: loading-36 0.5s linear forwards 0.5s;
}

.progress[data-percentage="87"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="87"] .progress-left .progress-bar {
  animation: loading-37 0.5s linear forwards 0.5s;
}

.progress[data-percentage="88"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="88"] .progress-left .progress-bar {
  animation: loading-38 0.5s linear forwards 0.5s;
}

.progress[data-percentage="89"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="89"] .progress-left .progress-bar {
  animation: loading-39 0.5s linear forwards 0.5s;
}

.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-40 0.5s linear forwards 0.5s;
}

.progress[data-percentage="91"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="91"] .progress-left .progress-bar {
  animation: loading-41 0.5s linear forwards 0.5s;
}

.progress[data-percentage="92"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="92"] .progress-left .progress-bar {
  animation: loading-42 0.5s linear forwards 0.5s;
}

.progress[data-percentage="93"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="93"] .progress-left .progress-bar {
  animation: loading-43 0.5s linear forwards 0.5s;
}

.progress[data-percentage="94"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="94"] .progress-left .progress-bar {
  animation: loading-44 0.5s linear forwards 0.5s;
}

.progress[data-percentage="95"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="95"] .progress-left .progress-bar {
  animation: loading-45 0.5s linear forwards 0.5s;
}

.progress[data-percentage="96"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="96"] .progress-left .progress-bar {
  animation: loading-46 0.5s linear forwards 0.5s;
}

.progress[data-percentage="97"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="97"] .progress-left .progress-bar {
  animation: loading-47 0.5s linear forwards 0.5s;
}

.progress[data-percentage="98"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="98"] .progress-left .progress-bar {
  animation: loading-48 0.5s linear forwards 0.5s;
}

.progress[data-percentage="99"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="99"] .progress-left .progress-bar {
  animation: loading-49 0.5s linear forwards 0.5s;
}

.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-50 0.5s linear forwards;
}
.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-50 0.5s linear forwards 0.5s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(3.6);
    transform: rotate(3.6deg);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(7.2);
    transform: rotate(7.2deg);
  }
}
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(10.8);
    transform: rotate(10.8deg);
  }
}
@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(14.4);
    transform: rotate(14.4deg);
  }
}
@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(18);
    transform: rotate(18deg);
  }
}
@keyframes loading-6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(21.6);
    transform: rotate(21.6deg);
  }
}
@keyframes loading-7 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(25.2);
    transform: rotate(25.2deg);
  }
}
@keyframes loading-8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(28.8);
    transform: rotate(28.8deg);
  }
}
@keyframes loading-9 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(32.4);
    transform: rotate(32.4deg);
  }
}
@keyframes loading-10 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}
@keyframes loading-11 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(39.6);
    transform: rotate(39.6deg);
  }
}
@keyframes loading-12 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(43.2);
    transform: rotate(43.2deg);
  }
}
@keyframes loading-13 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(46.8);
    transform: rotate(46.8deg);
  }
}
@keyframes loading-14 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(50.4);
    transform: rotate(50.4deg);
  }
}
@keyframes loading-15 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(54);
    transform: rotate(54deg);
  }
}
@keyframes loading-16 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(57.6);
    transform: rotate(57.6deg);
  }
}
@keyframes loading-17 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(61.2);
    transform: rotate(61.2deg);
  }
}
@keyframes loading-18 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(64.8);
    transform: rotate(64.8deg);
  }
}
@keyframes loading-19 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(68.4);
    transform: rotate(68.4deg);
  }
}
@keyframes loading-20 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg);
  }
}
@keyframes loading-21 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(75.6);
    transform: rotate(75.6deg);
  }
}
@keyframes loading-22 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(79.2);
    transform: rotate(79.2deg);
  }
}
@keyframes loading-23 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(82.8);
    transform: rotate(82.8deg);
  }
}
@keyframes loading-24 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(86.4);
    transform: rotate(86.4deg);
  }
}
@keyframes loading-25 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(90);
    transform: rotate(90deg);
  }
}
@keyframes loading-26 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(93.6);
    transform: rotate(93.6deg);
  }
}
@keyframes loading-27 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(97.2);
    transform: rotate(97.2deg);
  }
}
@keyframes loading-28 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(100.8);
    transform: rotate(100.8deg);
  }
}
@keyframes loading-29 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(104.4);
    transform: rotate(104.4deg);
  }
}
@keyframes loading-30 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg);
  }
}
@keyframes loading-31 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(111.6);
    transform: rotate(111.6deg);
  }
}
@keyframes loading-32 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(115.2);
    transform: rotate(115.2deg);
  }
}
@keyframes loading-33 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(118.8);
    transform: rotate(118.8deg);
  }
}
@keyframes loading-34 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(122.4);
    transform: rotate(122.4deg);
  }
}
@keyframes loading-35 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(126);
    transform: rotate(126deg);
  }
}
@keyframes loading-36 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(129.6);
    transform: rotate(129.6deg);
  }
}
@keyframes loading-37 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(133.2);
    transform: rotate(133.2deg);
  }
}
@keyframes loading-38 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(136.8);
    transform: rotate(136.8deg);
  }
}
@keyframes loading-39 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(140.4);
    transform: rotate(140.4deg);
  }
}
@keyframes loading-40 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}
@keyframes loading-41 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(147.6);
    transform: rotate(147.6deg);
  }
}
@keyframes loading-42 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(151.2);
    transform: rotate(151.2deg);
  }
}
@keyframes loading-43 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(154.8);
    transform: rotate(154.8deg);
  }
}
@keyframes loading-44 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(158.4);
    transform: rotate(158.4deg);
  }
}
@keyframes loading-45 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(162);
    transform: rotate(162deg);
  }
}
@keyframes loading-46 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(165.6);
    transform: rotate(165.6deg);
  }
}
@keyframes loading-47 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(169.2);
    transform: rotate(169.2deg);
  }
}
@keyframes loading-48 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(172.8);
    transform: rotate(172.8deg);
  }
}
@keyframes loading-49 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(176.4);
    transform: rotate(176.4deg);
  }
}
@keyframes loading-50 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}


/* ======= MEDIAQUERY RESPONSIVENESS ======= */
@media screen and (min-width: 1600px){
  .skill-video-box-lg,.school-bio,.region-card{
    height: 395px;
  }
  .stu-council-vd-box .col-md-6 > div{
    height: 380px;  
  }
  .school-bio-list li{
    min-height: 150px;
  }
  .progress-card{
    height: 444px;
  }
  .skill-video-box-sm{
    height: 325px;
  }
}
@media screen and (min-width: 1200px){
  .curriculum-cards-container > .row > div:last-child .curriculum-card{
    margin-right:0;
   }
}

@media screen and (min-width: 576px){
  .view_event_popup .modal-dialog{
    max-width: 800px;
  }
}



@media screen and (max-width: 1630px){
  .testimonial-video-box::-webkit-scrollbar-track{
    margin-inline:170px 170px;
  }
}
@media screen and (max-width: 1440px){
  .testimonial-video-box::-webkit-scrollbar-track{
    margin-inline:180px 180px;
  }
}
@media screen and (max-width: 1320px){
  .testimonial-video-box::-webkit-scrollbar-track{
    margin-inline:140px 140px;
  }
}

@media screen and (max-width: 1200px){
  .curriculum-card{
    margin-bottom: 16px;
   }
  .british-card{
    margin-right: 16px;
  }
  .american-card{
    margin-right: 0;
  }
  .testimonial-video-box::-webkit-scrollbar-track{
    margin-inline:130px 130px;
  }
}
@media screen and (max-width: 991px){
  .home-ilust{
    width: 70px;
  }
  .refer-card,.quiz-card{
    margin-bottom: 32px;
    margin-right: 0;
  }
  .action-card:first-child{
    margin-bottom: 16px;
  }
  .school-bio-head{
    margin-top: 16px;
  }
  .testimonial-video-box::-webkit-scrollbar-track{
    margin-inline:100px 100px;
  }
}

@media (max-width: 945px) {
  /*.timeline .event::before {
    left: 0.5px;
    top: 20px;
    min-width: 0;
    font-size: 13px;
  }
  .timeline h3 {
    font-size: 16px;
  }
  .timeline p {
    padding-top: 20px;
  }
  section.lab h3.card-title {
    padding: 5px;
    font-size: 16px
  }*/
}

@media (max-width: 768px) {
  /*.timeline .event::before {
    left: 0.5px;
    top: 20px;
    min-width: 0;
    font-size: 13px;
  }
  .timeline .event:nth-child(1)::before,
  .timeline .event:nth-child(3)::before,
  .timeline .event:nth-child(5)::before {
    top: 38px;
  }
  .timeline h3 {
    font-size: 16px;
  }
  .timeline p {
    padding-top: 20px;
  }*/
}
@media screen and (min-width: 767px) and (max-width: 991px){
  .skill-video-box-lg{
    height: 375px;
  }
}

@media screen and (max-width: 767px){
  .indian-card,.british-card{
    margin-right: 0;
  }
  .progress-card{
    margin-bottom: 32px;
  }
  .press-card{
    margin-top: 32px;
  }
  .testimonial-video-box::-webkit-scrollbar-track{
    margin-inline:90px 90px;
  }
}
@media screen and (max-width: 576px){
  .action-card{
    flex-wrap: wrap;
    height: 175px;
  }
  .form-card p{
    width: 100%;
  }
  .action-card-butn{
    margin-top: 10px;
  }
}