@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

/* ----------common css ------------- */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a{
  text-decoration: none;
  color:#042E6C
}
.list-type-none{
  list-style: none;
}
body{
  font-size: 16px;
}

/*--------------- Custom CSS Color Palette --------------*/
:root {
  --primary-color: #134b8e;
  --secondary-color: #eaf4ec;
  --link-color: #093c7a;
  --hover-color: #8d1409;
}
.bg-primary{
  background: #134b8e;
}
.bg-secondary{
  background: #eaf4ec;
}
.primary-color{
  color: #134b8e;
}
.secondary-color{
  color: #eaf4ec;
}
.btn-primary{
  color: #fff;
  background: #134b8e;
  border-color: #134b8e;
}

.btn-more{
  right:10px;
  top:0px;
}
.bg-white.btn:hover{
  color: var(--link-color);
}
.fs-7{
  font-size: 15px;
}
.fs-8{
  font-size: 13px;
}

/* __ Gradient ___ */
.gradient-a{
  background: hsla(186, 33%, 94%, 1);
  background: linear-gradient(90deg, hsla(186, 33%, 94%, 1) 0%, hsla(216, 41%, 79%, 1) 100%);
}
.gradient-b{
  background: hsla(141, 54%, 86%, 1);
  background: linear-gradient(90deg, hsla(141, 54%, 86%, 1) 0%, hsla(333, 73%, 85%, 1) 50%, hsla(211, 58%, 79%, 1) 100%);
}
.gradient-c{
  background: hsla(145, 84%, 73%, 1);
  background: linear-gradient(90deg, hsla(145, 84%, 73%, 1) 0%, hsla(150, 61%, 48%, 1) 100%);
}
.gradient-d{
  background: rgb(26, 9, 154);
  background: linear-gradient(90deg, hsl(221deg 79.71% 30.67%) 0%, hsl(220deg 50.38% 71.43%) 100%) !important;
}


/* ____ List Style ___ */
.list-a{
  list-style: none;
  padding:0px
}
.list-a li{
  padding: 5px 0;
  list-style-position: inside;
}

.ad-box{
  background:rgb(240, 233, 233);
  border-radius: 10px;
  margin:10px 0
}


/* __header__ */
.header{
    background: #eaeef4;
}
.header #logo-section{
    display: flex;
    align-items: center;
}

.navbar-brand {
    margin-right: 0;
}

.header #logo-section h2{
    display: inline-block;
    font-size: 20px;
    color: #134b8e;
    font-weight: 600;
    letter-spacing: .1px;
    text-align: left;
    padding: 2px 0px 2px 8px;
    vertical-align: middle;
    text-shadow:  2px 0px 0px #fff, -1px 0px 0px #fff;
}
.header #logo-section h3{
    color: #CC0000;
    padding: 0 0 0 5px;
    font-size: 13px;
    letter-spacing: 7px;
}


/* _____ top-head ________ */

.top-head{
    background: #eaeef4;
    color: #fff;
    font-size: 14px;
    text-align: center;
    border-bottom: 1px solid #dfdddd;
}
.top-head .social-network{
    padding:3px 0;
}
.top-head .social-network a{
  border-right: 1px solid #ccc;
  padding: 0px 8px 0px;
}
.top-head .login-register a{
  font-size: 14px; 
}
.top-head .login-register a i{
  font-size: 12px;
}

.top-head .social-network .fa-facebook-f{
    color: #365290;
}
.top-head .social-network .fa-twitter{
    color: #1da1f2;
}
.top-head .social-network .fa-youtube{
    color: #d30505;
} 
.top-head .social-network .fa-linkedin{
    color: #0077b5;
}


/* ___________Top Menu ____________ */
.top-menu .nav .nav-link{ 
    color:#111; 
    padding-left: .8rem;
    padding-right: .8rem;
    font-weight: normal;
    font-size:15px;
  }

@media (max-width: 768px) {
  .header{
    padding-bottom: 0 !important;
  }
  .top-menu.nav-scroller{
    background-color: white;
    height: 2.4rem;
  }
  .res{ 
    padding: 0;
    margin-top:7px;
  }

  .top-menu.nav-scroller .nav-link{
    padding-top: 0.5rem;
    padding-bottom: 0.6rem;
    padding-left: .5rem;
    padding-right: .5rem;
    font-size:0.9rem;
  }



}

  

/* ------------------search css start---------------- */

.search-area {
    border-radius: 0;
    border-color: #ddd;
    background: #134b8e;  
}
.search-area .offcanvas-btn{
    background: #c5d8ef;
    padding: 5px 15px;
}
.search-area .offcanvas-btn:active{
    background: #f7ea77;
    padding: 5px 20px;
}

.search-area #dictionary .input-group-text{
    border-radius: 0;
    height: calc(1.5em + 1.3rem + 2px);
    text-align: start;
    outline: none;
}
.search-area #dictionary .custom-select{
    background: #f7ea77;
}
.search-area #dictionary .search{  
    border-radius: 0;
}

@media (max-width: 576px){
    select#selectWord {
        width: 25px;
    }

    .search-bar .dtext{
      display: none;
    }
}


/*------------- offcanvas style ------------------*/

.offcanvas-body {
    padding: 20px;
}
.offcanvas-body .navbar-nav{
  width: 100%;
}

.offcanvas-body .navbar-nav .nav-item {
    width: 100%;
    border-top: 1px solid #dee2e6;
}
.offcanvas-body ul li ul{
  margin : 0 20px;
  transition: all .5s ease-in-out;
}

.offcanvas-body .navbar-nav .nav-link {
    width: 100%;
    padding: 6px 0;
    color: #343a40;
}

.offcanvas-body .border-top {
    border-top: 1px solid #dee2e6;
}

.offcanvas-body .social-icons {
    text-align: center;
}

.offcanvas-body .social-icon {
    margin: 0 5px;
    color: #007bff;
}

.collapse {
  transition: height 0.3s ease;
}

.nav-link[data-bs-toggle="collapse"] {
  cursor: pointer;
  position: relative;
}

.nav-link[data-bs-toggle="collapse"]::after {
  content: "\f107";
  font-family: 'FontAwesome';
  position: absolute;
  right: 10px;
  transition: transform 0.3s ease;
}

.nav-link[data-bs-toggle="collapse"][aria-expanded="true"]::after {
  transform: rotate(180deg);
}


/* _______ Site Navbar _____ */

.side .dropdown-menu  {
  border:none;
  background-color: #eeebeb;
  padding: 0;
  margin-bottom: 10px;
  border-radius: 0;
}
.side .dropdown-menu .nav-item {
  padding-left:10px; 
  padding-right:10px
}


/* _____ Page Titles____ */

.h-1{
  font-size: 20px;
  color: #0e3c74;
  font-weight: 600;
  border-bottom:1px solid #ccc;
  padding-bottom: 3px;
  margin: 2px 0 10px 0px;
  line-height: 35px;
}

.section-title{
  font-size: 18px;
  color: #0e3c74;
  font-weight: 600;
  border-bottom:1px solid #c97e7e;
  padding-bottom: 3px;
  margin: 2px 0 10px 0px;
}


/* ___ Word engage box ____ */

.w-engage{
  right: 10px;
}

@media(max-width:768px){
  .w-engage{
    right: 3px;
  }
}	

/* ______________word Meaning_____________ */


.word-info {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 20px 20px;
  border-radius: 5px;
  margin-bottom: 20px;
  font-family:Lato, Helvetica, sans-serif;
  line-height: 30px;
}

.word-base {
  min-height: 120px;
  padding: 20px 25px 20px 10px;
}

.format1{
  font-size: 20px;
  line-height: 32px;
}

@media(max-width:768px){
  .word-base{
    padding: 5px 20px 5px 0px !important;
  }
  .word-info{
    padding:10px;
    border: none;
    border-radius: 0px;
  }
  .wwword{
    padding: 0
  }
}	



/* ____ New Style ____ */

.word-header{
  margin-left:23px;
  margin-top:15px;
}

.wbase {
  margin-bottom: 15px;
}

.word {
  font-size: 30px;
}

.wb {
  text-align: left;
  padding: 5px 15px;
  font-size: 17px;
}

.wb h1{
  margin-left:10px
}

.wb .meaning {
  display: block;
  margin-bottom: 18px;
  color: #000;
  font-size: 19px;
  line-height: 30px;
  background: #fff;
  padding: 5px 10px;
}

.wb .block {
  display: block;
  margin: 13px 0;
  padding: 7px 0;
  border-bottom: 1px dotted #ddd;
  background: #fff;
  padding: 10px 10px;
}

.wb .br {
  font-size: 15px;
  font-weight: bold;
  color: #333;
}

.wb .syn br,
.wb .meaning br {
  content: "";
  display: block;
  margin: 5px 0;
}

.wb .format {
  display: block;
  font-weight: bold;
  background: none;
  border: none;
  border-bottom: 1px dashed #e1e1e1;
  font-size: 14px;
  color: #702E0E;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 5px;
}

.wb .break {
  text-align: left;
  font-weight: bold;
  color: #145EAF;
  display: block;
  margin-top: 12px;
}

.wb hr {
  border: 0;
  border-bottom: 1px solid #ccc;
  background: #999;
  margin: 2px 0 8px 0;
}

.mn {
  font-size: 14px;
  font-weight: bold;
  color: #08832e;
}

.meaning .mn:nth-child(n+2) {
  padding-left: 10px;
}

@media(max-width:768px) {
  .word-header{
    margin-left:0px
  }
  .wb h1{
    margin-left:0px
  }
  .wb{
    padding-left:0px
  }
  .wb .meaning {
      font-size: 21px;
      line-height: 32px;
      padding-left:0px
  }
  .wb .block{
    padding-left:0px
  }
}


/* previous style */
.w-info{ font-size:17px; padding:15px 0}
.w-info .format{ font-size:12px; border:1px solid #aaa; padding:0 2px; background:#efefef}
.w-info .format1{ font-size:20px;}
.w-info .mgs{ margin:20px 0 15px 0;}
.w-info em{ padding:0 10px 0 5px; font-weight:bold; font-style:normal; color:#555; font-size:15px}
.stl3{ font-size:22px}
.stl1{font-family:Lato, Georgia, "Times New Roman", Times, serif; font-size:18px; line-height:30px;}
.stl2{font-family:Lato, Verdana, Arial, Helvetica, sans-serif; font-size:18px; line-height:30px;}


/* legacy */

.word-info .search-result .word-title {
  font-size: 30px;
  text-transform: lowercase;
}
.word-info .search-result .title {
  background: #0762984a;
  font-size: 16px ;
  padding: 5px 10px;
  font-weight: bold;
  margin-bottom: 0px;
}

.word-header .prnc{ color:#444; font-size:16px}
.word-header .pos{ font-size:15px; font-weight:bold; padding-left:5px; padding-right:5px;}
.word-header .attr{ font-size:15px; color:#555;}

.word-info ul{
  padding-left: 0;
  list-style: none;
}
.word-info .blocks ul {
  margin-bottom: 0px;
}
.word-info .blocks ul li{
  display: inline-block;
  padding-right: 20px;
}
.word-info .blocks ul li a{
  text-decoration: underline;
  line-height: 34px;
}
.word-info .blocks ul li a:hover{
  text-decoration: none;
}
.word-info .blocks {
  padding: 15px 10px;
  background: #f9f9f9;
  border-radius: 5px;
  margin-bottom: 15px;
}
.word-info #suggested ul li{
  display: inline-block;
  padding-right: 10px;
}
.word-info #suggested {
  padding: 10px;
  background: #f9f9f9;
  border-radius: 5px;
  margin-bottom: 15px;
}

/* _ More Meaning _ */
#wordview .word-style { font-size:18px; line-height:30px; letter-spacing: .5px; word-spacing: 1.5px; text-align:left;}
#wordview .word-style .break{ display:block; border-bottom:1px solid #b3e0a8; padding-left:3px; margin:10px 0; font-weight:bold; color:#59954A; font-size:20px;}
#wordview .modal-header {padding: 7px 15px; border-bottom: 1px solid #e5e5e5;}
#wordview .modal-title{font-weight: bold; text-align:left;}
#wordview .modal-body{ padding-top:5px}
#wordview .modal-header button.close{ background:none !important; border:1px solid #888; padding:0px 5px; opacity: .7; margin:0px}

@media(max-width:768px){
  #wordview .word-style { font-size:20px;}
#wordview .modal-lg{ width:98%;}  
}

/* Favorites */
.fav{
  background-color: #fff;
  border: 1px solid #424242;
}
.fav .fa{
  color: #2c2c2c;
}
.fav-active{
  background-color: #fff;
  border: 1px solid #ff0404;
}

.fav-active .fa{
  color: #ff0404;
  animation: scaleUp 0.5s ease-in-out;
}

@keyframes scaleUp {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(2);
  }
  100% {
      transform: scale(1);
  }
}



/* b2b, b2e */

.w-section{
 background-color: #f7f7f7;
 padding:12px 10px
}

.w-section .pos{
  font-size: 18px;
  color: #0e3c74;
  border-bottom: #bebebe 1px dotted;
}
.w-section .w-section-title{
  font-weight: bold;
  color: #575004;
  border-bottom: #dddddd 1px solid;
}

.w-section p{
  font-size: 19px;
  margin:10px 0 15px 0;
}

.b2e .translit, .b2e .ppos{
  font-size: 15px;
  padding-left: 5px;
  padding-right: 5px;
}
.b2e .ppos{
  font-weight: bold;
  font-size: 16px;
}

.b2e .format{ font-size:13px; 
  border:1px solid #aaa; 
  padding:0 2px; 
  background:#efefef;
}

@media (max-width: 768px) {
  .w-section .pos{
    font-size: 17px;
  }
  .w-section .w-section-title{
   
  }
}




/* ____ Login Regiser ______ */

.login-banner {
  border-right: 1px solid #134b8e;
  width: 100%;
  height: 100%;
  padding: 35px 25px;
}

.login-form {
  padding: 35px 25px;

}
.login-form-header h3 {
  font-size: 32px;
  margin: 0px 0 40px;
}

.login-banner h2, .login-banner p {

}

.form-bottom-part span {
  font-size: 14px;
  color: #888;
  margin-top: 5px;
  display: inline-block;
}

.login-form input[type="submit"] {
  background: #134b8e;
  border: 1px solid #134b8e;
  transition: all .3s;
  color: #fff;
  padding: 5px;
  font-size: 18px;
  border-radius: 0px;
}

.login-form input[type="submit"]:hover {
  background: #fff;
  color: #134b8e;
  box-shadow: 0 2px 20px #ddd;
}

.login-form .form-control{
  border-radius: 0px;
}      


/* ____ User Section ___ */

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.shadow-sm {
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
  /* background-color: #d2dbef; */
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.nav-scroller .nav-link {
  color: #666;
  font-size: .8rem;
  font-weight: bold;
  /* text-transform: uppercase; */
  padding-top: 0.8rem;
  padding-bottom: 0.7rem;
  letter-spacing: .5px;
}
.nav-scroller .nav-link:hover {
  color: #134b8e;
  background-color: #f1f6fc;
}



.user-section .card-title {
  float: left;
  font-size: 18px !important;
  font-weight: 400;
  margin: 0;
  margin-bottom: 0 !important;
  vertical-align: middle !important;
}

.user-section .card-header>.card-tools {
  float: right;
  margin-right: -0.625rem;
}
.user-section h2.card-title{
  line-height: 44px;
}
.user-section .card-header{
 
}

/* ______ Article Content______ */

.a-content h2 {
  font-size: 23px;
  color: #0d386a;
  margin: 20px 0 15px 0;
}
.a-content h3 {
  font-size: 20px;
  margin: 20px 0 15px 0;
  line-height: 32px;
}
.a-content h4 {
  font-size: 17px;
  margin: 20px 0 15px 0;
}
.a-content h5 {
  font-size: 17px;
  margin: 20px 0 15px 0;
}
.a-content h6 {
  font-size: 16px;
  margin: 20px 0 15px 0;
}
.a-content p {
  font-size: 17px;
  line-height: 30px;
  margin: 0 0 15px;
}
.a-content ul {
  margin: 0 0 20px;
  padding-left: 20px;
  list-style-position: inside;
}
.a-content ul li {
  font-size:17px;
  line-height: 28px;
}
.a-content ol{
  list-style-type:decimal;
}
.a-content a{
  color: #0c47b5;
}
.a-content a:hover{
  color: #963e15;
  text-decoration: underline;
}
.a-content table th{
  padding: 5px 10px;
  border: 1px solid #ddd;
}
.a-content table td{
  padding: 5px 10px;
  border: 1px solid #ddd;
}
.a-content table td p{
  margin: 0;
}
.a-content blockquote{
  background: #f9f9f9;
  border-left: 5px solid #134b8e;
  padding: 10px;
  margin: 0 0 10px;
}
.a-content img{}
.a-content code{}
.a-content pre{}
.a-content hr{}


.a-content .vocab-table {
    border: 0;
}
.a-content .vocab-table tr th {
  background-color: #08875e;
  color: #ffffff;
  font-size: 17px;
  font-weight: bold;
  padding: 8px 10px;
  text-align: left;
  border: 1px solid #aaa;
}

.a-content .vocab-table tr td {
  font-size: 20px;
  padding: 8px 10px;
}


@media (max-width: 768px) {
  .a-content h2 {
    font-size: 23px;
  }
  .a-content h3 {
    font-size: 20px;
  }
  .a-content h4 {
    font-size: 17px;
  }
}



/* Click n Type */
/* Mouse Click n Type */
#layout button{ font-size:15px; min-width:22px; height:24px; padding:0; margin:0; line-height:10px; background:#eee; border:1px solid #ccc; margin:2px 1px; cursor:pointer;}
#layout button:hover{ box-shadow:0px 0px 2px #ccc; background:#165F9A; color:#fff;border:1px solid #165F9A;}
#layout{position:relative;padding:8px 10px; background:#fff; text-align:left; z-index:10000 !important}
.ui-dialog{box-shadow:0px 0px 8px #ddd;border:1px #bbb solid;z-index:10000 !important}
.ui-dialog-titlebar{cursor:move;background:#fff; text-align:left; height:25px; line-height:30px}
.ui-dialog-title{ font-family:Verdana, Arial, Helvetica, sans-serif; padding:4px 6px; font-size:12px; text-align:left !important; }
.ui-dialog-titlebar-close{ position:absolute; top:0; right:0; margin-right:10px; background:#fff; border:0;background:#ddd url(../img/close.png) no-repeat; background-position:center center; font-size:.1px; width:15px; height:15px; margin-top:6px; margin-right:15px; cursor:pointer}
.ui-dialog-titlebar-close:hover{ border:1px solid #ccc;}
.ui-dialog-content{}
.ui-dialog-buttonpane{}
.ui-dialog-buttonset{}




.navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navigation span{
  border: 1px solid #747e8a;
  padding: 1px 5px 1px 5px;
  font-size: 15px;
}
.navigation span a{
  color: #134b8e;
  font-weight: bold;
}


/* _________Browse Word_________ */
.a-z{ background:#076298; border-radius:2px}
.a-z a{line-height:35px; color:#fff; border: 1px solid #b8c5e9; border-radius: 4px;  padding:2px 6px 2px 5px;}
.a-z.e2b a{ line-height:38px; color:#fff; border: 1px solid #b8c5e9; padding:1px 8px 5px 8px; margin:0px 3px; border-radius: 4px; font-size: 17px;}
.a-z a:hover { background:#ffffff; color:#076298; border-color: #fff;}

.browse-list li{

}
.browse-list a{
  color: var(--link-color) !important;
  /* border: 1px solid #f5f5f5; */
  width: 100%;
  padding:0 4px 2px 6px;
  display: inline-block;
  border-radius: 4px;;
}
.browse-list a:hover{
  color: var(--hover-color) !important;
  background-color: #f7f7f7;
}

.browse-slist { margin:10px 0}
.browse-slist li{ float:left; list-style-type:none;  margin:3px 6px; padding:0; border:1px solid #aaa; background:#fff;}
.browse-slist li:hover{ border:1px solid #D03406;}
.browse-slist li a{ text-decoration:none; padding:0 7px; line-height:28px;}
.browse-slist li a:hover{ background:#D03406; color:#fff; padding:5px 7px;}

/* ___ content area ___ */


@media (max-width: 768px) {
  .content-area{
    padding: 10px !important;
  }
}



/*--------------------------------------------------------------
# Post Navigation - .post-nav
--------------------------------------------------------------*/

#postMenu{ position: relative;}

.post-menu{
  position:sticky;
  top: 80px;
  border:1px solid #caccdc;
  border-radius: 0px; 
  background-color: #fff;
}
.post-menu .h{
  text-align: center;
  text-transform: uppercase;
  padding:3px; 
  margin-bottom: 0;
  font-size: 14px;
  font-weight: bold;
  color:#fff;
  background-color: rgb(101, 105, 128);
}

.post-menu ul{
  display: inline-block; 
  margin: 0 !important; 
  padding: 0 !important;
  width: 100%;
}
.post-menu ul li{ 
  padding:6px 0;
  list-style-type: none !important; 
  border-bottom:1px solid #caccdc;
}
.post-menu ul li a.nav-link{ 
  color:#33333f; 
  padding: 0px 10px;
  line-height: 20px;
  font-size: 15px;
  text-decoration: none;
}
.post-menu ul li .nav-link.active, .post-menu ul li .nav-link:hover{ 
  color:#7f0a2b;
  font-weight: bold;
}

#postMenu .pnav-toggler{ 
  display: none;
}

@media (max-width: 768px) {
  #postMenu{position: sticky; background-color: #fff; top: 53px;}
  .post-menu{width:100%; min-height: auto; border-radius: 0px; margin-top: 31px;}
  .post-menu ul li{ padding: 6px 5px; line-height: 22px;}

  #postMenu .pnav-toggler{
    display:block; 
    position:absolute;
    width: 100%;
    background-color: #e4e4eb; 
    border: none; 
    top: 0px; 
    left: 0px; 
    z-index: 10;
    color: #595463;
    padding: 7px 6px 7px 6px; 
    font-size: .75rem; 
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;    
  }
  #postMenu .pnav-toggler .bi{
    font-size: 15px;
  }
}



/* _______ Card Style ________ */

 /* card-a */
.card{
  border-color:rgb(207, 215, 255);
  border-radius: 0px;
}
 .card-header{
  background: rgb(26, 9, 154);
  background: linear-gradient(90deg, hsl(221deg 79.71% 30.67%) 0%, hsl(220deg 50.38% 71.43%) 100%) !important;
  border-bottom: none;
  color: #ffffff !important;
  position: relative;
  padding: 0.4rem 1rem;
  border-radius: 0px !important;
}
 .title-a::after {
  border-top: 1px solid #ffffff;
}
/* card-b */
 .card-b{
  border-radius:0px !important;
  border-color:rgb(207, 215, 255);
}
.card-b .card-header{
  background: none !important;
  border-bottom: none;
  color: #41416a !important;
  overflow: hidden;
  position: relative;
}
.card-b .card-footer{
  border-color:rgb(207, 215, 255);
}

/* card-b */
.card-c{
  border-radius:0px !important;
  border: 0px !important;
}
.card-c .card-header{
  border-bottom: 1px solid #7c7ccc;
  color: #41416a !important;
  overflow: hidden;
  position: relative;
  background: rgb(235, 238, 254) !important;
}
.card-c .card-body{
  background-color: rgb(244, 246, 255);
}
.card-c .card-footer{
  border-top: 1px solid #9696ef;
  background-color: rgb(249, 250, 254);
}
.card-c .title-a::after {
  display: none;
}

/* card-d */
.card-d{
  border-radius:0px !important;
  border: 0px !important;
}
.card-d .card-header{
  background: rgb(235, 238, 254) !important;
}
.card-d .card-header .card-title{
  font-size: 1.3rem;
  line-height: 1.9rem;
}
.card-d .card-header .card-tag{
  font-size: 14px;
  color:#7c250a;
  font-style: italic;
}
.card-d .card-body{
  background-color: rgb(244, 246, 255);
}
.card-d .card-body p{
  padding:5px 0;
}
.card-d .card-footer{
  border-top: 1px solid #9696ef;
  background-color: rgb(249, 250, 254);
}






/* ____ Title ____ */

.title-a {
  position: relative;
  display: flex;
  align-items: center;
}

.title-a::after {
  content: "";
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  height: 0;
  margin:5px;
  border-top: 1px solid #94a2dd;
}







/* ---------- recent lession -------------- */

.recent-home {
  color: #333;
  border-radius: 0px;
}
.recent-home .single a {
  text-decoration: none;
  color: inherit;
}
.recent-home .single h4 {
  font-size: 18px;
  margin: 0 0 5px 0;
  color: #A62C02;
}
.recent-home .single span {
  display: block;
  font-size: 14px;
  margin-bottom: 10px;
  color: #555;
}
.recent-home .single p {
  font-size: 16px;
  color: #333;
}
.recent-home a.view-all {
  display: block;
}


/* -------------browse start----------- */
#browse-area {
}

#browse-area .card-top{
  min-height: 150px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

#browse-area .browse-item:hover .card-top {
  opacity: 0.9;
}

#browse-area .browse-item {
  transition: border-color 0.5s cubic-bezier(0, 1, 0.5, 1);
}

.browse-item .card{
  border-radius: 10px;
}

#browse-area .browse-item:hover .card-body {
  background-color: #eaecf1;
}

.card-top.bg-one{
  background: rgb(108, 209, 211);
}
.card-top.bg-two{
  background: rgb(159, 197, 101);
}
.card-top.bg-three{
  background: rgb(192, 179, 221);
}
.card-top.bg-four{
  background: rgb(128, 212, 159);
}
.card-top.bg-five{
  background: rgb(218, 180, 147);
}
.card-top.bg-six{
  background: rgb(194, 219, 163);
}



#browse-area .browse-item h4 {
  font-size: 24px;
  color:#0b4787;
}
#browse-area .browse-item p {
}
#browse-area .browse-item:hover h4 {
  color: #064FC6;
}



.featured-box-primary{
  box-shadow:  0 0 0.25rem rgba(0, 0, 0, 0.075);
}
.featured-box-primary .card-body {
  border-bottom: 0px solid #134b8e;
}
.featured-box-primary h4{
  font-size: 20px;
}


.icon-featured {
  display: inline-block;
  font-size: 50px;
  height: 70px;
  line-height: 70px;
  width: 70px;
  /* margin: -100px 0 -15px; */
  position: relative;
  top: 30px;
  /* background-color: #134b8e; */
  border-radius: 50%;
  color: #FFF;
  text-align: center;
  z-index: 10;
}
.icon-featured:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
  box-shadow: 0 0 0 3px #ffffff;
  top: -7px;
    left: -7px;
    padding: 7px;
    transition: transform 0.2s, opacity 0.2s, -webkit-transform 0.2s;
    opacity: 0;
}
.featured-box-primary:hover .icon-featured:after {
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
  opacity: 1;
}


/* -----------------quote -----------------*/

#quote {
  color: #333;
  font-size: 14px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 20px;
}
.quote .quote-text {
  background: url(../img/quote.png) no-repeat 0px 10px;
  padding: 15px 0 0 32px;
  font-size: 19px;
  color: #555;
  font-style: italic;

  line-height: 25px;
}


/* ___ */
.words-topic .card-header h3{
  font-size: 18px;
  margin-bottom: 0;
}
.words-topic .word_cat {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 4px;
  text-align: left;
  margin-bottom: 20px;
}
.words-topic.word_cat ul li {
  padding: 2px 30px;
}
.words-topic.word_cat ul li a {
  font-size: 17px;
  letter-spacing: .5px;
}
.words-topic h4 {
  color: #2E8B3C;
  font-size: 18px;
}


/*------------- sidebar css start ---------------*/
.sidebar-area .card{
  border: 1px solid #ddd;
}
.sidebar-area .card h2{
  font-size: 18px;
  margin-bottom: 0;
}
.sidebar-area .card h3{
  font-size: 18px;
  margin-bottom: 0;
}
/* ---------------newsletter -----------*/
.sidebar-area .newsletter{
  background: #f4fbff;
  border-radius: 8px;
}
/* ---------most search -------------*/
.most-search ul li{
  margin: 2px 1px;
  padding: 0 10px;

}
.most-search ul li a{
  color: #000;

}
/* ------------apps ------------*/
.btn-download {
  display: block;
  width: 100%;
  padding: 15px 10px;

  margin-bottom: 10px;
  border: 1px solid;
  border-radius: 4px;
  font-weight: bold;
  font-size: 20px;
  color: #fff;
  text-align: left;
  text-decoration: none;
}
.btn-download img {
  width: 50px;
  vertical-align: middle;
  float: left;
  margin-right: 8px;
}
.btn-proverb {
  background-color: #4CAF50;
  border-color: #2a8c30;
}
.btn-translation {
  background-color: #b38600;
  border-color: #2a8c30;
  font-size: 18px;
  padding: 9px 10px;
}
.btn-phrasebook {
  background-color: #365899;
  border-color: #2a8c30;
  font-size: 18px;
  padding: 9px 10px;
}
.btn-grammar {
  background-color: #2ba2ce;
  border-color: #2ba2ce;
  font-size: 20px;
}

.apps h4{
  font-size: 18px;
  margin-bottom: 0;
}
.apps span{
  font-size: 13px;
}



/* ----------- achive post ----------- */

.archive-post {
  background: #fff;
  border: 1px solid #0087AE;
  border-radius: 4px;
}
.archive-post p {
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #222;
  line-height: 20px;
}
.archive-post ul li a {
  background: none;
  letter-spacing: .4px;
}
.archive-post ul {
  margin: 7px 0;
  padding: 0 8px;
  list-style-type: none;
}
.archive-post ul li {
  color: #36654F;
  text-align: left;
  padding: 2px 4px;
  font-size: 11px;
  margin: 0;
  position: relative;
}
.archive-post ul li a {
  text-shadow: none;
}
.archive-post .posts_list {
  margin: 0;
  padding: 0;
}
.archive-post .posts_list li {
  margin: 9px 0 !important;
  padding: 4px 4px !important;
  background: #f1f1f1;
  border-left: 3px solid #56A04B;
}
.archive-post .posts_list li a:link {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  background: none !important;
  font-family: Lato, Arial, Helvetica, sans-serif;
}
.archive-post .posts_list li a:hover {
  text-decoration: none !important;
  color: #990000;
}


/* _____ Breadcrumb___ */
.breadcrumb {
  background: #e7f0ff;
  padding: 30px 0;
}
.breadcrumb h1{
  font-size: 24px;
}
.breadcrumb P{
  margin-bottom: 0;
}

.breadcrumb-c{
  padding: 10px 0 20px 0;
}

.breadcrumb-c a{
  color: #134b8e;
  font-size: 15px;
}

.breadcrumb-c i{
  margin: 0 3px;
  font-size: 14px;
  color: #334861;
}


/* ____ Share _____________ */
.social i{
  font-size: 25px;
  margin-right: 5px;
}
.social .fa-facebook-square{
  color: #3b5998;
}
.social .fa-twitter{
  color: #1da1f2;
}
.social .fa-linkedin{
  color: #0077b5;
}


/* ---------- category page ------------- */

.topic-box {
  background: #fff;
  box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.1);
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 20px;
  transition: .4s;
}
.topic-box:hover {
  border: 1px solid #134b8e;
}
.topic-box .topic-label {
  margin: 10px 15px 15px 15px;
}
.topic-box a {
  font-size: 18px;
  font-weight: 600;
}
.topic-label h3{
  font-size: 18px;
    font-weight: 600;
  color: #333333;
  margin-bottom: 0px;
}

/* ----------- Word category details -------------- */

.category-details .cat-title{
  font-size: 22px;
}

.cat-list a{ color: #013165;}

/* ------------ instruction page -------------- */

#search-guidelines {
  background-color: #fff;
  border-radius: 8px;
}
#search-guidelines .content-area{
  background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
}

#search-guidelines h1 {
  color: #333;
  font-weight: bold;
  font-size: 18px;
  background: #b7d1e1;
  padding: 5px 10px;
  text-align: center;
}

#search-guidelines ul li {
  line-height: 1.6;
}

#search-guidelines .fw-bold {
  font-weight: bold;
}

#search-guidelines .text-muted {
  font-style: italic;
}


/* ------------ grammar page -------------- */

.grammar-topics .topic {
  border: 1px dotted #ddd;
  padding: 10px;
  margin-bottom: 15px;
  height: 100%;

}
.grammar-topics .topic ul{
  margin-bottom: 0;
  list-style: circle;
  padding-left: 16px;
}
.grammar-topics .topic ul li{
  background: #f7f7f7;
  margin: 3px;
  padding: 2px 5px;
  color: #106aad;

}
.grammar-topics .topic ul li a{
  color: #106aad;
}
.grammar-topics .topic ul li a:hover{
  color: #B4320C;
}


/* --------- grammar details ------------ */
#grammar-details .content-area{
  background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
}
#grammar-details h1 {
  color: #333;
  font-weight: bold;
  font-size: 20px;
  background: #b7d1e1;
  padding: 5px 10px;
}
#grammar-details .section-title{
  font-size: 18px;
}

.grammar-topics .navs li {
  margin: 0 5px 10px 0;
  /* flex: 1 1 auto; */
  padding: 0 10px;
  font-size: 14px;
  text-align: center;
  line-height: 25px;
  font-weight: 500;
  list-style: none;
  border-radius: 5px;
  cursor: pointer;
  background: #fff;
  color: #000;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  transition: .4s;
}
.grammar-topics .navs li:hover {
  background: #134b8e;
  color: #fff!important;
  box-shadow: none;
}

.grammar-topics .navs li a {
  width: 100%;
  display: inline-block;
  border-radius: 5px;
}
.grammar-topics .navs li:hover a{
  color: #fff;
}



/* --------- lesson list --------- */
#lessons-list .content-area{
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}
#lessons-list h1 {
  color: #333;
  font-weight: bold;
  font-size: 20px;
  background: #b7d1e1;
  padding: 5px 10px;
}
#lessons-list .section-title{
  font-size: 16px;
  margin-bottom: 0;
  font-weight: bold;
}
#lessons-list .topic {
  border: 1px dotted #ddd;
  padding: 10px;
  margin-bottom: 15px;
}
#lessons-list .topic p{
  margin-bottom: 0;
  font-size: 16px;
}



/* ---------- translator ------------- */

.translator {
  overflow: hidden;
}

.translator h1 {
  color: #333;
  font-weight: bold;
  font-size: 20px;
  background: #b7d1e1;
  padding: 5px 10px;
}
.translator h3{
  font-size: 20px;
}

.translator-box{
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  background-color: #f1f1f1;
}

.select-width {
  width: auto;
}

.translator-list {
  width: 100%;
  margin: 0;
  padding: 0;
}
.translator-title {
  font-size: 20px;
  background: #134b8e;
  padding: 10px !important;
  color: #fff;
}

.translator-list li {
  list-style-type: none !important;
  list-style-position: inside;
  margin: 0;
  padding: 0 !important;
  border-bottom: 1px dotted #86ACD1;
}

.translator-link {
  width: 100%;
  color: #222 !important;
  font-size: 15px;
  text-decoration: none;
  font-family: Lato, Helvetica, Verdana !important;
  text-transform: none;
  font-weight: normal;
  background: #E4EBF9;
  padding: 4px 5px;
  display: block;
  border-left: 4px solid #134b8e;
}

.translator-link:hover {
  color: #fff !important;
  background: #134b8e;
  -moz-transition: background-color 0.3s ease, color 0.3s;
  -webkit-transition: background-color 0.3s ease, color 0.3s;
  transition: background-color 0.3s ease, color 0.3s;
}

.translator-box .form-select{
  padding: .275rem 2.15rem .275rem .65rem;
} 


.translator-box #charWordNum{
  font-size: 13px;
  color: #555;
  font-weight: bold;
}
.translator-box .tools .btn{
  padding: .1rem .5rem;
  font-size: 13px;
}
.translator-box .tools a{ 
  margin-left:5px;
  margin-right: 5px;
}

.tab-wrap{
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 20px;
}

.tab-wrap .nav-tabs li{
  margin-top:8px;
  margin-left: 10px;
}

.translation-tab ul li{
  list-style-position: inside;
  padding: 6px 2px;
  line-height: 24px;
  list-style-type: decimal;
  font-size: 16px !important;
  color: #111 !important;  
}
.tab-wrap .nav-tabs .nav-link{
  color: #333;
}
.tab-wrap .nav-tabs .nav-link.active{
  border-color: var(--primary-color);
  border-bottom:0px;
  color: var(--primary-color);
}
.tab-wrap .tab-pane{
  padding:5px;
}



@media (max-width: 768px) {
  .tab-wrap .nav-tabs .nav-link{
    padding: .4rem .5rem;
  }
  .tab-wrap .nav-tabs li{
    font-size: 14px;
  }  
}

/* ---------- Wrapper ------------- */

.page-wrapper .content-area{
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.page-wrapper .bg-light {
  background-color: #f9f8e5;
  padding: 1rem;
  line-height: 1.5;
  font-size: 1rem;
  border-radius: 0.25rem;
}


/* ______ Proverbs __________ */

.proverbs .form-control{
  border-color:rgb(175, 174, 174);
}

.proverbs p{
  font-size: 19px;
  margin-bottom: .5rem;
  color:#111;
}
.proverbs .bg-highlight {
  background-color: #f9f8e5;
  padding: .5rem .5rem;
  line-height: 1.5;
  font-size: 1rem;
  border-radius: 0.25rem;
}

/* ---------- translations ------------- */



.topic-container {
  overflow-x: auto; 
  white-space: nowrap; 
  padding: 10px 0; 
  border: 1px solid #cddfe7;
 
}

.topic-container::-webkit-scrollbar {
  display: none;
}

.topic-container a {
  display: inline-block;
  padding: 5px 8px;
  margin: 0 3px;
  font-size: 14px;
  color: #222;
  border-radius: 4px;
  background-color: #f1f5fa;
}

.topic-container a:hover {
  color:#0056b3;
}

.topic-container a.active {
  background-color: #5d7b9b;
  color:#fff;
}

.flot-elm{
  position: absolute;
  left: 10px;
  top: 0;
  padding: 13px 5px 13px 10px;
  width: 80px;
  background:rgb(87 114 124 / 90%);
  z-index: 1;
  color:#fff;
  height: 52px;
  vertical-align: middle;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  font-size: 15px;
}
.flot-elm i{
  font-size: 10px;
}

.translations .form-control{
  border-color: #cacad1;
    background: #f6f8fa;
}


.translation-tab ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.translation-tab ul li{
  padding: 5px 10px;
}
.translation-tab ul a{
  text-decoration: none;
  color: #0f2cbd;
}
.translation-tab .tag-pane li{
  width: 50%;
  display: inline-block;
  float: left;
}


@media (max-width: 768px) {

  .topic-container a {
    display: inline-block;
    padding: 5px 6px;
    margin: 0 2px;
  }

  .translations .content-area{
    border: 1px solid #ddd;
    padding: 10px;

  }

  .flot-elm{
    font-size: 13px;
    padding-top:15px;
    width: 65px;
  }
}



/* --------- pagination ---------- */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  font-family: Arial, sans-serif;
}

.pagination span {
  margin: 0 10px;
}

.pagination a {
  text-decoration: none;
  color: #134b8e;
  border: 1px solid #134b8e;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
}

.pagination a:hover {
  background-color: #134b8e;
  color: #ffffff;
}

.pagination .previous a::before {
  content: '« ';
}

.pagination .next a::after {
  content: ' »';
}



/* ------ browse -------- */

.list-unstyled a {
  text-decoration: none;
  color: var(--link-color);
}
.list-unstyled a:hover {
  color: #007bff;
}



/* --------------footer style start ------------------*/

.footer {
  background-color: #343a40;
  color: #ffffff;

}

.footer .box-social-media{
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
}
.footer .box-social-media a{
    background: #fff;
    height: 40px;
    width: 40px;
    font-size: 20px;
    border-radius: 50%;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #134b8e;
}

.footer .footer-link h4 {
  font-size: 1.25rem;
  margin-bottom: 20px;
}

.footer .footer-link ul {
  padding: 0;
  list-style: none;
}

.footer .footer-link ul li {
  margin-bottom: 10px;
}

.footer .footer-link ul li a {
  color: #cccccc;
  text-decoration: none;
  transition: color 0.3s;
}

.footer .footer-link ul li a:hover {
  color: #ffffff;
}
.footer .footer-link.right {
  text-align: end;
}

.footer .box-logo-txt-logo .logo-vocabulary {
  max-width: 150px;
  margin-bottom: 15px;
}

.footer .box-logo-txt-logo p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

.footer .copy-right {
  border-top: 1px solid #444;
  padding-top: 15px;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .footer .footer-link {
      text-align: center !important;
  }
  .footer .footer-content {
      text-align: center;
      margin: 15px 0 22px 0;
  }
  .footer .row {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-link {
    text-align: center;
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}
}