@import url(https://fonts.googleapis.com/css?family=Cherry+Swash);
@import url(https://fonts.googleapis.com/css?family=Lobster);
/* @import url(https://fonts.googleapis.com/css?family=Droid+Serif); */
#titleonline1{
    font-family: 'Cherry Swash';
    font-weight: bold;
    font-size: 17px;
    text-shadow: 0 1px 1px #e7f2f9;
    color: #5071A3;
   
    }
    
h1#header {
  text-align: center;
  padding: 10px;
  font-size: 25px;
  font-family: 'Cherry Swash';
  text-shadow: 0 3px 3px #ABABAB;
  color:#5386AA;

}
#titleapply{
text-align: center;
color:#253b4a;
font-size: 18px;  
font-family: 'Slabo';  
/* font-weight: bold; */

}
body{
  background-color: #ffffff;   
}
.bodywarning{
max-width: 500px;
margin: 0 auto;
/* padding: 2%; */
/* background-color: #fbf4ff; */
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

.callout {
padding: 0.8em 1em;
line-height: 1.2;
text-align: center;
position: relative;
clear: both;
border-radius: 0 10px 10px 0;
}

.callout::before {
width: 35px;
height: 35px;
display: inline-flex;
justify-content: center;
position: absolute;
font-size: 1.5em;
left: -1.2rem;
content: "🙋🏾‍♀️";
background-color: #b4aaff;
border-radius: 50%;
align-items: center;
top: -0.8rem;
}

.callout {
background: rgba(224, 226, 255, 0.5);
border-left: 4px solid #b4aaff;
color: #242424;
margin: 1em;
}

.callout.warning::before {
content: "⚠️";
background-color: #F35252;
border-radius: 50%;
align-items: center;
top: -0.8rem;
}



.callout.warning {
background-color: #f7ece7;
border-left: 4px solid #F35252;
}
/* style backgrounf */
.bodywarning2{
  max-width: 100%;
  margin: 0 auto;
  /* padding: 2%; */
  /* background-color: #fbf4ff; */
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  }
/* stage */

.callout.warning1::before {
content:  url("admission.png");
background-color: #eeeff1;
border-radius: 50%;
align-items: center;
top: -0.8rem;
}

.callout.warning1 {
  background: rgb(231 238 247 / 50%);
  
border-left: 4px solid rgb(220 226 233 / 50%);
}
/* username */

.callout.warning2::before {
  content:  url("pass.png");
  background-color: #921869;
  border-radius: 50%;
  align-items: center;
  top: -0.8rem;
  }
  
  .callout.warning2 {
    background: rgb(231 238 247 / 50%);
    
  border-left: 4px solid rgb(220 226 233 / 50%);
  }

/* steps */

.callout.warning3::before {
  content:  url("step.png");
  background-color: #eeeff1;
  border-radius: 50%;
  align-items: center;
  top: -0.8rem;
  }
  
  .callout.warning3{
    background: rgb(231 238 247 / 50%);
    
  border-left: 4px solid rgb(220 226 233 / 50%);
  }

/* comment */
.callout.warning4::before {
  content:  url("comment.png");
  background-color: #eeeff1;
  border-radius: 50%;
  align-items: center;
  top: -0.8rem;
  }
  
  .callout.warning4{
    background: rgb(231 238 247 / 50%);
    
  border-left: 4px solid rgb(220 226 233 / 50%);
  }