body {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

h1 {	
    font-size: 40px;
    font-weight: bold;
    background: #545253;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 5px;
    padding-left: 5px;
    border-radius: 10px; 
}	

h2 {
    font-size: 25px;
}

.wrapper {
	width: 350px; 
	padding: 20px; 
	border: 1px solid #3d3d3c; 
	border-radius: 10px; 
	margin-left: auto; 
	margin-right: auto; 
	background: #FFFFFF;
}

.imgcontainer {
	text-align: center;
}

.imgcontainer img {
	width: 250px;
}	

.footer {
	text-align: center;	
	color: #bfbdbd;
	font-size: 10px;
	margin-top: 2px;
	padding: 2px;
}

.top-menu {
    position: fixed;
    min-height: 50px;
    width: 100%;
    background: #ECEFF1;    
    color: blue;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    z-index: 1000;
}

.top-menu-logo-img {
    width: 150px;
    padding-bottom: 3px;
}

.top-menu-logo-img-mob {
    width: 150px;
}

.top-menu table {
    width: 100%;
}

.top-menu table td {
    padding-right: 10px;
    padding-left: 5px;
}

.top-menu-logo {
  text-align: left;
  width: 160px;
}

.top-menu-logo-mob {
  text-align: left;
  width: 40px;
}

.right-sec {
  text-align: right;
}

.left-sec {
  text-align: left;
  width: auto;
}

.line1 {
  padding-top: 40px;
  background: url(/img/infopic-back.gif)  150px 195px #141013;
  background-repeat: no-repeat;
  background-size: 650px 525px;
}

.line1-break {
  width: 100%;
}

.login-main {
    #background: linear-gradient(-90deg, #e73c7e, #141013, #a15297);
    #background-size: 400% 400%;
    #animation: gradient 15s ease infinite;
    background: #ffffff;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.main-info {
    vertical-align: middle;
    color: #ffffff;
    text-align: left;
    padding-left: 10%;
    padding-right: 5%;
}	

.main-info i {
   color: #FFFFFF;
   margin-right: 12px;
   position: relative;
   bottom: 2px;
   font-size: 60px;
   z-index: 0;
}

.sign-form {
    background: url(/img/line3-back.png)  15px 15px , linear-gradient(0.25turn, #141013 70%, #ed248c);
    background-repeat: repeat-x;	
    padding-right: 50px;
    padding-left: 50px;
}

.start-capt {
    color: #216FB3;
}	

.logo-slogan {
font-size: 9px;
color: #383939;
padding-left: 22px;
position: relative;
bottom: 5px;
}	

.LangList-view {
  display:none;
  margin-top: 10px;
}	

.lang-btn {
  background: #ECEFF1;
  border-radius: 5px;
  border: 1px solid #1F527E;
  color: #1F527E;
  padding: 5px 14px;
  cursor: pointer;
  font-size: 12px;
  margin-top: 2px;
}

.lang-sel {
  line-height: 20pt;
  color: #1F527E;
}

.sign-btn {
  background-color: #32a852;
  border-radius: 5px; 
  border: none;
  color: #ffffff;
  padding: 6px 15px;
  cursor: pointer;
  font-size: 12px;
  margin-top: 2px; 
}

.sign-btn:hover {
  background-color: #30ba56;
}

.reg-message {
  background: #3461ad;
  color: #ffffff;
  -moz-box-shadow: 10px 10px 5px #A0A7A6;
  -webkit-box-shadow: 10px 10px 5px #A0A7A6;
  box-shadow: 4px 4px 2px #A0A7A6;  
  width: 70%;
  padding: 20px;
  margin-top: 30px;
  text-align: center;
  margin-left: auto; margin-right: auto;
}

.reg-email {
  font-size: 16px;
}


.line2-uni {
    width: 100%;
    /*background: linear-gradient(0.50turn, #141013 70%, #ed248c);*/
    background: url(/img/line3-back.png)  15px 15px , linear-gradient(0.50turn, #141013 70%, #ed248c);
    padding-top: 70px;
    padding-bottom: 70px;
}	

.line2-uni table {
    border: 2px solid #f0ebeb;
    margin-left: auto; margin-right: auto;
    padding: 5px;
} 

.line2-uni video {
    width: 100%; max-width: 650px;
}	

.line3 {
    width: 100%;
    padding-top: 60px;
    padding-bottom: 40px;
    text-align: center;
}

.line3 hr {
    width: 50%;
    border-top: 1px solid #414C6C;
}

.line3 table {padding-left: 30px; margin-left: auto; margin-right: auto;}

.line3 td {
    padding-left: 20px;
    vertical-align: middle;
}

.steps-title {
    color: #123C61;
    font-size: 30px;
    font-weight: bold;
}	

.step-indicator {
 	
}    

.step-indicator i {
    font-size: 330%;
    color: #111111;
    width: 100%;
    background-image: linear-gradient(to right, #e9e8e8, #ebeaea, #edebeb, #f0eded, #f2eeee);
    border-radius: 20%;
    padding: 20px;    
}

.step-indicator i:hover {
     opacity: 1.0;
}

.step-descriptor {
    color: #235991;
    font-size: 16px;
    text-align: left;
    padding: 10px;
    font-weight: bold;
}


.line4 {
    background: #DCDDE2;
    width: 100%;    
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 100px;
    padding-bottom: 100px;
}	

.line4 img { max-width: 95%;}

.line4 table {margin-left: auto;margin-right: auto;}

.line4 td {
    margin-left: auto; margin-right: auto;
    text-align: left;
    padding: 10px;
}    

.line5 {
    text-align: center; 
    color: #ffffff; 
    font-size: 30px; 
    font-weight: bold; 
    width: 100%; 
    max-width: 1250px; 
    background-image: linear-gradient(45deg, #f2297a 50%, #121212 50%); 
    margin-left:auto; 
    margin-right: auto; 
    padding: 45px; 
    margin-top: 30px; 
    margin-bottom: 30px;
}

.highlight {
    color: #123C61;
    font-size: 22px;   
    font-weight: bold; 
}    

.highlight-green {
    color: #3E9246;
    font-size: 22px;
    font-weight: bold;
}


.highlight-message {
    color: #6b696a;
    font-size: 16px;
}


.footer-main {
    background: #C0C4C7; 
    padding: 30px;
}


.footer-main .txt {
    text-decoration: none;
    color: #818283;
}	

.footer-layout {
    width: 80%; 
    margin-left: auto; 
    margin-right: auto;
}    

.footer-layout hr {
    margin-top: 10px; 
    margin-bottom: 10px
}	

.footer-title {
    color: #4C4E4F;
    font-weight: bold;    
}

.footer-main td {
    width: 26%; 
    padding-left: 10%; 
    vertical-align: top;
    color: #666869;
    text-align: left;
    font-size: 14px;
}	

.fa {
    padding: 10px;
    font-size: 20px;
    width: 40px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
}


.fa:hover {
    opacity: 0.7;
    text-decoration: none;
}

.fa-heart {
    background: #666869;
    color: #ffffff;
}

.fa-facebook {
    background: #666869;
    color: #ffffff;
}

.fa-twitter {
    background: #666869;
    color: #ffffff;
}

.fa-telegram {
    background: #666869;
    color: #ffffff;
}

.fa-envelope {
    background: #666869;
    color: #ffffff;
}

.copyright {
    text-align: center;
    color: #bfbdbd;
    font-size: 10px;
    padding: 2px;
    background: #242426;
    padding: 4px;
}

.docs {
  padding-top: 100px;
}

.docs-title {
    color: #123C61;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}

.docs hr {
    width: 50%;
    border-top: 1px solid #414C6C;
}

.sign-up-docs {
    width: 100%; 
    text-align: center;
    padding-right: 15px;
}

.faq-header {
    width: 85%; border-radius: 7px; text-align: left; padding: 10px;
    margin-left: auto; margin-right: auto;
    margin-bottom: 20px;
    margin-top: 40px;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 16px;
}

.faq-section
{
border-spacing: 5px 10px;
border-collapse: separate;
}

.faq-section td
{
border-left: 4px #4B966C solid;
padding: 5px;
padding-left: 10px;
}

.faq-section a
{
color: #044A82;
text-decoration: none;
}

.faq-section a:hover
{
color: #4B966C;
}

.faq {
    width: 85%; background: #F0F2F4; border-radius: 7px; text-align: left; padding: 10px;
    margin-left: auto; margin-right: auto;
    margin-bottom: 50px;
    margin-top: 40px;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 14px;
}

.faq td {
    padding-top: 6px; 
    padding-bottom: 7px;
    padding-right: 7px;
}

.faq i {
    font-size:36px;
    padding-top: 0px; 
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 10px;
}	

.faq-standard {
    width: 600px;
    max-width: 75%;
}

.quest-icon {   
    color:#394780;
    vertical-align: top;
}

.ans-icon { 
    color:#807f7d; 
    vertical-align: top;
}

.payments {
    width: 85%; background: #F0F2F4; border-radius: 7px; text-align: left; padding: 10px;
    margin-left: auto; margin-right: auto;
    margin-bottom: 50px;
    margin-top: 40px;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 14px;
}


.breaks {
 display: block:
 word-wrap:break-word;
 word-break:break-word; 
}	

.payments table {
 .width: 95% !important;  
  margin-top: 20px;
  margin-bottom: 20px;
}	

.payments td {
    padding-top: 6px;
    padding-bottom: 7px;
    vertical-align: middle;
}

.payments i {
    display: block;
    font-size:36px;
    margin-right: 6px;
    color: #363659;
}

.payment-met {    
    text-align: center;
    color: #363659;
}

.payment-met-name {
    color: #363659;
    font-weight: bold;
}

.quest-text {font-weight: bold;}

.step {border: 1px #000000 dotted; padding: 10px;}
.step_sep {font-size: 30px; color: #5fad34; text-align: center;}
.step_text {padding-left: 10px; padding-right: 5px;}

h3
{
    font-size: 22px;
    color: #244C85;
    font-stretch: normal;
}

.dot {
    height: 8px;
    width: 8px;
    background-color: #54B347;
    border-radius: 50%;
    display: inline-block;
    margin: 2px;
}

.check-more {
    border-spacing: 5px 10px;
    border-collapse: separate;
    padding-left: 10px;
}

.check-more td {
    border-left: 4px #4B966C solid;
    padding: 5px;
    padding-left: 10px;
}

.check-more a {
    color: #044A82;
    text-decoration: none;
}

.check-more a:hover {
    color: #4B966C;
}

.ks {
    border: dotted 1px #28b54e;
    color: #27db58;
    margin-top:  15px;
    margin-bottom: 25px;
}	

.ks td {
    padding: 5px;
}

.wdt-300 {
    width: 300px;
}

.roadmap {
    background: #273c4f;
    background: linear-gradient(to bottom, #273c4f 70%, #2f4a63 100%);
    border-radius: 10px;
    margin-left: 5px;
    margin-top: 5px;
    color: #ffffff;
    font-weight: 100;
}	

.roadmap td {
    text-align: center;
    vertical-align: top;
    border: solid #ffffff 0px;
    padding: 7px;
}	

.milestone-complete  {
    color: #d93497;
}

.milestone  {
    color: #d1cbcf;
}

.milestone-sep { 
  width: 35%;	
  max-width: 80px; 
  min-width: 7px; 
}	

.roadmap hr {
    border-top: 1px dotted #bdbebf;
    width: 100%;
}   

.roadmap-tit {
 color: #ebbd34;
 font-weight: bold;
}

.roadmap-date {
 color: #74a4db;
 font-size: 80%;
 text-decoration: underline;
}



.resh-phrase1 {
font-size: 300%; display: block; opacity: 0.15; color: #ffffff;padding-left: 20px;
}	

.resh-phrase2 {
font-size: 300%; display: block; opacity: 0.15; color: #ebcd81; padding-left: 40px; font-style: italic;
}

.resh-phrase3 {
font-size: 300%; display: block; opacity: 0.45; padding-left: 10px;
}

.resh-phrase4 {
font-size: 300%; display: block; opacity: 0.15; color: #ffffff; padding-left: 60px;
}

.resh-phrase5 {
font-size: 300%; display: block; opacity: 0.45; padding-left: 20px; font-style: italic;
}

.resh-phrase6 {
font-size: 300%; display: block; opacity: 0.15; color: #ebcd81; padding-left: 60px;
}

.resh-phrase-dots {
font-size: 150%; display: block; opacity: 0.15; color: #ebcd81; padding-left: 160px;
}

/* Styles for text transcription */
.transcript-output {
margin-bottom: 10px; border-radius: 10px; border:1px solid #ccc; padding:10px; width:97%; height:380px; overflow-y:auto; display:none;
}

.transcript-line {
  margin: 8px 0;
  padding: 8px 12px;
  border-radius: 12px;
  /* max-width: 70%;       don’t let them stretch too wide */
  /* min-width: 30%;       ensure they don’t collapse */
  width: 90%;  /* fixed width */
  display: inline-block; /* make them size nicely like chat bubbles */
  font-size: 14px;
  line-height: 1.4;
  clear: both;
  word-wrap: break-word; /* wrap long words */
}

/* Teacher bubble (left) */
.transcript-line.teacher {
  background-color: #b5f5da;
  color: #3b6b57;
  float: left;
  text-align: left;
}

/* Student bubble (right) */
.transcript-line.student {
  background-color: #d1ecf1;
  color: #003344;
  float: right;
  text-align: left;
}

.transcript-line strong {
  display: block;
  margin-bottom: 4px;
}

#callButton {
 width: 45%;
 max-width: 110px;
 background: #1ed677;
 margin: 10px;
 margin-top: 70px;
 padding: 10px;
 border-radius: 10px;
 color: #ffffff;
 font-size: 17px;
 border: none;
}

#callButton:hover {background: #1ab063;}

#callButton:disabled {background: #cccac6;}

#hangupButton {
 width: 45%;
 max-width: 110px;
 background: #1ed677;
 margin: 10px;
 margin-top: 70px;
 padding: 10px;
 border-radius: 10px;
 color: #ffffff;
 font-size: 17px;
 border: none;
}

#hangupButton:hover {background: #1ab063;}

#hangupButton:disabled {background: #cccac6;}

.translator-space {
 margin-left: auto;
 margin-right: auto;
 width: 95%;
 max-width: 800px;
}

.spch {margin-left:auto; margin-right: auto; display: none;}
.logo-main {margin-left:auto; margin-right: auto; display: block}
.apps-buttons-main {margin-left:auto; margin-right: auto; display: block; max-width: 150px;}

.tcrLbl {
  font-weight: bold;
  color: #355e3f;
}

.stdLbl {
  font-weight: bold;
  color: #225775;
}


#fadeMessage {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    max-width: 80%;
    transform: translate(-50%, -60%); /* centers horizontally & vertically */
    background: #fc4c8a;
    color: #ffffff;
    padding: 15px 30px;
    -moz-box-shadow: 10px 10px 5px #A0A7A6;
    -webkit-box-shadow: 10px 10px 5px #A0A7A6;
    box-shadow: 4px 4px 2px #A0A7A6;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 9999;
  }