* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* color: #ed1c24; */

body {
  background-color: #435165;
  margin: 0;
  font-size: 16px;  
  animation-name: fadeIn;
  animation-duration: 1s;
}

	@keyframes fadeIn {
     0%	  { opacity: 0;}	 
	 100% { opacity: 1;}
	}

body.register-page {
  background-image: url(/images/login-home-bg.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  margin: 0;
  padding: 10px;
}


.add-to-home-button {
 position: absolute;
 top: 0;
 left: 0;
 background: #fff;
 display: flex;
 justify-content: space-between;
 flex-wrap: nowrap;
 align-items: center;
 right: 0;
 padding: 15px;
 font-size: 14px;
 box-shadow: 1px 1px 5px 2px rgba(0,0,0,.4);  
 cursor: pointer;
 z-index: 999999;
} 
	

.add-to-home-button .cc-icon {
 max-width: 60px;
 height: auto; 
 margin-left: 20px;
 margin-right: 30px;
}

.add-to-home-button #athd-close {
 position: absolute;
 top: 10px;
 right: 15px;  
 font-weight: 600;
 font-size: 19px;
 display: block;
 z-index: 9999999; 
}

.add-to-home-button #athd-close:hover {
 opacity: 0.8;
}


img, iframe, audio {
 max-width: 100%;	
}


.container {
 max-width: 1920px;	
}

.fs-13 {
 font-size: 13px;	
}

.fs-14 {
 font-size: 14px;	
}

h4 {
 font-size: 17px;	
}

.login, .register {
  max-width: 600px;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  margin: 150px auto;
  overflow: hidden;
}

.register.register-access-level {
 margin-top: 50px;	
}

.register.register-access-level INPUT:focus {
 outline: none;	
}

.register.register-access-level INPUT[type="text"]:read-only,
.register.register-access-level INPUT[type="email"]:read-only {
 color: #999;
}

.login h1, .register h1 {
  text-align: center;
  color: #5b6574;
  font-size: 24px;
  padding: 20px 0 20px 0;
  border-bottom: 1px solid #dee0e4;
}


.login .links, .register .links {
  display: flex;
  padding: 0 15px;
}

.login .links a, .register .links a {
  color: #adb2ba;
  text-decoration: none;
  display: inline-flex;
  padding: 0 10px 10px 10px;
  font-weight: bold;
}

.login .links a:hover, .register .links a:hover {
  color: #9da3ac;
}

.login .links a.active, .register .links a.active {
  border-bottom: 3px solid #f82b61;
  color: #f82b61;
}

.links .show-instr {
 font-size: 90%!important;
 opacity: 0.7!important; 
 cursor: pointer;
}

.login form, .register form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 20px;
}

.login form label, .register form label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10%;
  height: 50px;
  background-color: #f82b61;
  color: #ffffff;
}

.login form input[type="password"], .login form input[type="text"], .login form input[type="email"], .register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
  width: 84%;
  height: 50px;
  border: 1px solid #dee0e4;
  margin-bottom: 20px;
  padding: 0 15px;
}

.login form input[type="submit"], .register form input[type="submit"] {
  width: 100%;
  padding: 15px;
  margin-top: 20px;
  background-color: #f82b61;
  border: 0;
  cursor: pointer;
  font-weight: bold;
  color: #ffffff;
  transition: background-color 0.2s;
}

.login form input[type="submit"]:hover, .register form input[type="submit"]:hover {
  background-color: #2868c7;
  transition: background-color 0.2s;
}

.register form .qt-tooltip-wrapper {
 position: relative;
 display: flex;
 width: 100%;
 flex-wrap: wrap;
 justify-content: center; 	
}

.register form .qr-tooltip {
 position: absolute;
 background: #f82b61;
 color: #fff;
 padding: 10px;
 border-radius: 5px;
 top: -20px;
 right: 25px;
 opacity: 0;
 /*transition: all .3s ease; */
 animation-name: alpha;
 animation-duration: 1s;
 animation-delay: 2s!important;
 animation-fill-mode: forwards;
}

.register form .qr-tooltip:before {
 position: absolute;
 content: "";
 display: block;
 width: 0;
 height: 0;
 border-top: 8px solid transparent;
 border-bottom: 8px solid transparent;
 border-right: 8px solid #f82b61;
 left: -8px;
 bottom: 12px;
}


	@keyframes alpha {
     0%	  { opacity: 0;}
	 100% { opacity: 1;}
	}


.login form #rememberme, .register form #rememberme {
  width: 100%;
  height: auto;
  font-size: 13px;
  padding: 5px 20px;
  background-color: transparent;
  color: #000;
  justify-content: flex-start;
}

.login form #rememberme input, .register form #rememberme input {
  transform: scale(1.3);
  margin-right: 7px;
}

.login form .msg, .register form .msg {
  padding: 0 10px;
  width: 100%;
}

form .msg .msg-wrapper {
 background: #cc0000;
 color: #fff;
 padding: 8px;	
}

form .msg .msg-wrapper a {
 color: #333;	
}

.login form > a, .register form > a {
  text-decoration: none;
  color: #5b6574;
  width: 100%;
  padding: 5px 20px;
}

.login form > a:hover, .register form > a:hover {
  color: #394049;
}

.form-accept {
 display: block;
 width: 94%;
 margin: 5px auto;
 font-size: 12px;
 line-eight: 1.2;
 text-align: justify; 
}

.form-accept a {
 color: inherit;
 font-size: inherit; 
}

.navtop {
  background-color: #6887c4;
  background-color: #f82b61;
  height: 60px;
  width: 100%;
  border: 0;
}

.navtop div {
  display: flex;
  margin: 0 auto;
  width: 1200px;
  height: 100%;
}

.navtop div h1, .navtop div a {
  display: inline-flex;
  align-items: center;
}

.navtop div h1 {
  flex: 1;
  font-size: 24px;
  padding: 0;
  margin: 0;
  color: #eaebed;
  font-weight: normal;
}

.navtop div h1 .go-home {
 padding: 20px;
 display: inline-block;
 padding: 0;
}


.navtop div a {
  padding: 0 14px;
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  font-size: 15px;
}

.navtop div a i {
  padding: 2px 8px 0 0;
}

.navtop div a:hover {
  color: #eaebed;
}

body.loggedin {
  background-color: #f6f9ff;
}

.content {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.content.content-home {
 margin-top: 100px;	
}

.content.content-home .row .wrapper,
.container-mat .row .wrapper {
 position: relative;
 padding: 70px 20px;
 background: #ffc5c5;
 text-align: center; 
 background: #f82b61; 
 border-radius: 10px;
 margin-bottom: 40px;
 transition: all .3s ease; 
}

.content.content-home .row .wrapper:hover,
.container-mat .row .wrapper:hover {
 background: rgba(248,43,97,.8);
}

.content.content-home .row .wrapper a,
.container-mat .row .wrapper a {
 color: #111;
 color: #fff;
 font-weight: 600; 
 display: block;
}

.content.content-home .row .wrapper .fas,
.container-mat .row .wrapper .fas,
.container-mat .row .wrapper .fa-solid {
 font-size: 40px;
 color: #fff; 
}

.cc-book-ico {
 position: absolute;
 top: 10px;
 left: 10px;
 width: 80px;
 height: 80px;
 border-radius: 50%;
 border: 2px solid #fff;
 padding: 3px;
}

.content h2 {
  margin: 0;
  padding: 25px 0;
  font-size: 22px;
  border-bottom: 1px solid #e0e0e3;
  color: #4a536e;
  margin-bottom: 30px;
  font-weight: 600;
}

.content h3 {
  margin: 0;
  padding: 25px 0;
  font-size: 17px;
  border-bottom: 1px solid #e0e0e3;
  color: #4a536e;
  margin-bottom: 30px;
}

.content .block {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  margin: 25px 0;
  padding: 25px;
  background-color: #fff;
  border-radius: 9px;
}

.content .rojibot {
 position: absolute;	
 top:-110px;
 right: 20px;
}

.content .mat-list {
 list-style: none;
 padding: 0;
 margin: 0; 
 width: 100%; 
}

.content .mat-list li {
 display: flex;
 padding: 15px 10px;
 border-bottom: 1px solid #f3f3f3; 
}

.content .mat-list li i {
 color: #f82b61;
 margin-right: 10px; 
 margin-top: 3px;
}

.content .btn-back {
 margin-bottom: 15px;
 display: inline-block;
 text-align: right;
 width: 100%; 
}

.mat-list .audio-player {
 margin-left: 20px;	
 height: 25px;
 width: 100%; 
 border-radius: 10px;
 max-width: 350px;
}


.scroll-y-container {
 overflow-x: scroll;
 flex-wrap: nowrap;  
}

.scroll-y-container .col-scroll {
 width: 79vw;
 margin-right: 10px;

}

.scroll-y-container .col-scroll .card {
 height: 100%;	
}


.content .block table {
  width: 100%;
}

.content .block table td {
  overflow: hidden;
  padding: 5px;
}

.content .block table td:first-child {
  font-weight: bold;
  color: #4a536e;
  padding-right: 15px;
}

.content .block table td:last-child {
  word-break: break-all;
}



.table-user-profile tr {
 transition: all .3s ease;	
}

.table-user-profile tr:hover {
 background: #f6f6f6;	
}

.table-user-profile td {
 border-bottom: 1px solid #f3f3f3;	
}

.breadcrumb .fas {
 font-size: 90%;
 margin-right: 8px; 
}

.breadcrumb {
 font-size: 90%;  
}

.breadcrumb a {
 font-size: 90%;
 display: inline-block;
}

.content .block p {
  padding: 5px;
  margin: 0 0 10px 0;  
}

.container-video {
 padding-top: 30px;	
}

.container-video .col-md-3 {
 margin-bottom: 50px;	
}

.container-video .lesson-title {
 font-size: 80%;
 text-align: center;
 padding-top: 4px; 
}

.row-video-archive .wrapper {
 border:1px solid rgba(0,0,0,.02);
 padding:30px 15px 15px 15px;
 background: #f9f9f9; 
 height: 100%;
 transition: all .3s ease;
}

.row-video-archive .wrapper:hover {
 box-shadow: 0px 0px 8px -4px rgba(0, 0, 0, 0.9);
 box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
}


.row-archive div[class*="col-"] {
 margin-bottom: 30px;	
}

.row-archive .wrapper {
  border: 1px solid rgba(0,0,0,.02);
  padding: 20px 15px 15px 15px;
  background: #f9f9f9;
  height: 100%;
  transition: all .3s ease;
}

.row-archive h4 {
 margin-top: 8px;	
}

#yt-video-wrapper,
.yt-video-wrapper {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 25px;
 height: 0;		
}

#yt-video-wrapper iframe,
.yt-video-wrapper iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%
}	


.content.profile form label {
  display: block;
  padding: 10px 0 5px 0;
}

.content.profile form input[type="text"], .content.profile form input[type="password"], .content.profile form input[type="email"] {
  padding: 10px;
  width: 250px;
  border: 1px solid #ddd;
}

.content.profile .profile-btn {
  display: inline-block;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  color: #fff;
  background-color: #ed1c24;
  margin: 15px 5px 0 0;
  padding: 10px 15px;
}

.content.profile .profile-btn:hover {
  background-color: #2868c7;
}

/*-------------------- instruction pages -------------------------*/

.instr-page,
.instr-page a {
 color: #fff;	
}

.instr-container {
 max-width: 1100px;
 width: 100%;
 margin: auto; 
}

.instr-photo {
 max-width: 700px;
 width: 100%;
 display: block; 
 margin: auto; 
}

/*--------------------------- wodrpress content styles -------------------------------*/

.wp-block-columns {
  width: 100%;
  display: flex;
  margin-bottom: 1.75em;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.wp-block-column {
  flex-grow: 1;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

.row-archive .wp-block-column {
 position: relative;
 width: 100%;
 min-height: 1px;
 padding-right: 15px;
 padding-left: 15px; 
 flex: 0 0 33.333333%;
 max-width: 33.333333%;	
}



/*------------------------ layer-popup -------------------------------*/

.layer-popup {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0,0,0,.8);
 color: #fff;
 overflow-y: scroll; 
 display: none; 
 z-index:-1;
 transition: all .3s ease;
}

.layer-popup.show-layer {
 z-index: 99999999;
 display: block; 
 transition: all .3s ease; 
}

.close-button {
 position: fixed;
 right: 40px;
 top: 20px; 
 font-size: 30px;
 font-weight: bold;
 color: #fff;
 cursor: pointer;
 z-index: 999999999;
}

.layer-popup .container {
 max-width: 1000px;
 position: absolute; 
 left: 50%;
 transform: translateX(-50%);
 color: #fff;
}

.layer-popup .container a {
 color: #fff;
 font-weight: 600; 
}


footer {
 font-size: 13px;
 background: #2f3947; 
 color: #fff;
 padding: 25px;
}

.performance {
 opacity: 0.5;
 text-align: right;
 float: right; 
}



@media screen and (max-width: 400px) {
  .login, .register {
    width: 95%;
  }
}

@media screen and (max-width: 768px) {
  .navtop {
    height: auto;
    padding: 10px;
  }
  .navtop div {
    flex-flow: wrap;
    width: 100%;
  }
  .navtop div h1 {
    display: block;
    flex-basis: 100%;
	text-align: center;
  }
  .navtop div a {
    padding: 8px 0;
    flex-basis: 50%;
    text-align: center;
    margin: auto;
    display: block;	
  }


 .register form .qt-tooltip-wrapper-margin {
  margin-top: 0px;	 
  animation-name: moveBottom;
  animation-delay: 1s;
  animation-duration: .6s;
  animation-fill-mode: forwards;  
 }
 
	@keyframes moveBottom {
		0%	  { margin-top: 0px;}	 
		100% { margin-top: 60px;}
	}
 
 .register form .qr-tooltip {
  top: -74px;
  right: auto;
  left: 20px; 
 }

 .register form .qr-tooltip:before {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #f82b61;
  left: 50px;
  bottom: -16px;
 } 

  
  .content {
    padding: 10px 0;
    width: 100%;
  }
  
  .content.content-home .wrapper, .container-mat .row .wrapper {
   position: relative;
   padding: 50px 20px;
   cursor: pointer;
  }
  
  .content.content-home .wrapper .cc-book-ico {
   position: relative;
   top: auto;
   left: auto;   
  }
    
  .content.content-home .wrapper a {
   display: block;	  
  }
  
  .content .rojibot {
    top: -60px;
  }
  
  .content form input[type="text"], .content form input[type="password"], .content form input[type="email"] {
    width: 100%;
  }
  
  .content .mat-list li {
   display: block;	  
  }
  
  
 .row-archive .wp-block-column {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px; 
  flex: 0 0 100%;
  max-width: 100%;	
 }
  
  .mat-list .audio-player {
    margin-left: 0px;
    height: 35px;
    width: 100%;
    max-width: 350px;
    margin-top: 10px;
  }
  
  
  .layer-popup .container {
    max-width: 100%;
	width: 100%;
    position: absolute;
    left: 0%;
    transform: none;
	padding: 30px 15px 15px 15px;
    color: #fff;
  }
  
 .close-button {
  position: fixed;
  right: 20px;
  top: 10px; 
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  z-index: 999999999;
 }
 
 object {
 min-height: 80vh;	 
 }
  
  object div {
  padding: 10px;
  background: #2f3947;	  
  color: #fff;
  text-align: center;
  } 

  object div a {
  color: inherit!important;	  
  }
  
  .in-iframe #main {
   margin-top: 0;	   
  }

  
  .modal .btn-close {
   font-size: 35px;	  
  }
    
  footer,
  footer * {
  text-align: center!important;	
  float: none!important;  
  }

}/*media*/