@charset "utf-8";
/* CSS Document */
.card1 {
  width:282px;
  box-sizing: border-box;
  padding: 2em;
  font-family: Ubuntu;
  border-radius: 10px;
  color: white;
  box-shadow: 5px 5px 10px #ccc;
  float: left;
  margin-top:10px;
  margin-right: 1em;
}
.card7 {
  width:100%;
  box-sizing: border-box;
  padding: 2em;
  font-family: Ubuntu;
  border-radius: 10px;
  color: white;
  box-shadow: 5px 5px 10px #ccc;
  float: left;
  margin-top:10px;
  margin-right: 1em;
}
.card4 {
  margin-top:10px;
  min-width:400px;
  color:#FFF;
}
.card3 {
  min-height:300px;
  box-shadow: 5px 5px 10px #ccc;
  margin-top:10px;
  margin-bottom:10px; 
  color: white;
}
.card5 {
  with :100px;
  min-width:150px;
  margin-top:10px;
  color:#FFF;
  border-radius: 5px;
  background: white;
  border: none;
  font-weight: bold;
  height:50px;
}
.card1.gradient1 {
  background: linear-gradient(150deg, #B1EA4D, #459522 100%);
}
.card1.gradient2 {
  background: linear-gradient(150deg,#C3EC52, #0BA29D 100%);
}


.card2.gradient21 {
 background: linear-gradient(150deg,#C56CD6, #3425AF 100%);
}
.card2.gradient1 {
 background: linear-gradient(150deg,#C56CD6, #3425AF 100%);
}
.gradient2 {
  background: linear-gradient(150deg,#C3EC52, #0BA29D 100%);
}

.gradient3 {
  background: linear-gradient(150deg, #DFEC51, #73AA0A 100%);
}
.gradient4 {
   background: linear-gradient(150deg, #F02FC2, #6094EA 100%);
}
.gradient5 {
background: linear-gradient(150deg,#FAD961, #F76B1C 100%);
 }
 .gradient6 {
background: linear-gradient(150deg,#42E695, #3BB2B8 100%);
 }
.gradient7 {
background: linear-gradient(150deg,#6698C6, #DC2E2E 100%);
 }
.gradient8 {
  background: linear-gradient(150deg,#F5515F, #A1051D 100%);
}
.gradient9 {
  background: linear-gradient(150deg,#F2D50F, #DA0641 100%);
}
.gradient10 {
  background: linear-gradient(150deg,#FAD961, #F76B1C 100%);
}
.gradient11 {
  background: linear-gradient(150deg,#5B247A, #1BCEDF 100%);
}
.gradient12 {
  background: linear-gradient(150deg,#184E68,#57CA85 100%);
}
.gradient13 {
  background: linear-gradient(150deg,#65799B, #5E2563 100%);
}

.gradient14 {
  background: linear-gradient(150deg, #F02FC2, #6094EA 100%);
}
.gradient15 {
  background: linear-gradient(150deg,#42E695, #3BB2B8 100%);
}
.gradient16 {
  background: linear-gradient(150deg,#7117EA, #EA6060 100%);
}
.gradient17 {
  background: linear-gradient(150deg,#622774, #C53364 100%);
}
.gradient18 {
  background: linear-gradient(150deg,#17EAD9,#6078EA 100%);
}
.card1.gradient19 {
  background: linear-gradient(150deg,#F65599, #4D0316 100%);
}
.gradient20 {
  background: linear-gradient(150deg,#FCDF8A,#F38381 100%);
}
.gradient21 {
  background: linear-gradient(150deg, #39ef74, #4600f1 100%);
}
.gradient22 {
  background: linear-gradient(150deg, #DFEC51, #73AA0A 100%);
}
.card_hover:hover {
  background: linear-gradient(150deg,#C56CD6, #3425AF 100%);
  text-decoration:none;
}
.card_hover:active {
  background: linear-gradient(150deg, #D0021B, #D0021B 100%);
  text-decoration:none;
}
.card_hover_click{
	background: linear-gradient(150deg, #D0021B, #D0021B 100%);
	text-decoration:none;
}
.btn_quizz {
  width: 200px;
  display: block;
  margin: 0 auto;
  color: #FFF;
  border-radius: 10px;
  padding: 1em;
  background: white;
  border: none;
  font-weight: bold;
  background: linear-gradient(150deg,#622774, #C53364 100%);
}

.circle-wrapper {
    position: relative;
    width: 30px;
    height:30px;
    float: left;
   
}

.icon {
    position: absolute;
    color: #fff;
    font-size:15px;
    top: 15px;
    left:15px;
    transform: translate(-50%, -50%);
}

.circle {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 2.5px;
    background-clip: content-box;
    animation: spin 10s linear infinite;
}

.circle-wrapper:active .circle {
    animation: spin 2s linear infinite;
}

.success {
    background-color: #4BB543;
    border: 2.5px dashed #4BB543;
}

.error {
    background-color: #CA0B00;
    border: 2.5px dashed #CA0B00;
}

.warning {
    background-color: #F0D500;
    border: 2.5px dashed #F0D500;
}

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

.page-wrapper {
    height: 100vh;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}
.border-gradient {
  border: 10px solid;
  border-image-slice: 1;
  border-width: 5px;
}
.border-gradient-purple {
  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}
.border-gradient-green {
 
  border-image-source: linear-gradient(45deg, purple, orange);
}
.numberCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 5px;
    text-align: center;
	color:#fff;
	font-weight:bold;
}
.numberCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 5px;
    text-align: center;
	color:#fff;
	font-weight:bold;
}
.numberCircle_1 {
	margin-top:0px;
    border-radius: 50%;
    width: 27px;
    height: 27px;
    padding: 0px;
    text-align: center;
	color:#fff;
	font-weight:bold;
}
.numberCircle_2 {	
    border-radius: 50%;
    width: 27px;
    height: 27px;
    padding: 6px;
  box-sizing: border-box;
  color: white;
}