*{
  margin:0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
overflow-x: hidden; 
background-color: #f0f2f5;
}
  
/********************************************************************************************
                                          HEADER
**********************************************************************************************/
.header{
background-color: hsl(128, 61%, 34%);
position: fixed;
top :0px;
left:0px;
z-index: 2;
width: 100%;
}
#box-title{
text-decoration: none;
display: inline-block;
color: white;
}

#footer{
  background-color: white;
  padding: 10px;
}
.footer-title{
font-weight: bold;
font-size:20px;
}


.footer a{
 text-decoration: none;
 color:black;
 display: block;
 line-height: 25px;
}
.footer a:hover{
 text-decoration: underline;
}

.topnav {
overflow: hidden;
}
.topnav .search-container {
float: left;
border-radius: 50px;
background:#ffffff;
width: 100%;
float:left;
}

.topnav input[type=text] {
background:#ffffff;
padding: 6px;
font-size: 17px;
border: none;
border-radius: 50px;
margin-left:10px;
width:70%;
}

.topnav .search-container .button {
float: right;
padding: 6px 6px;
margin-right: 2px;
background: #ffffff;
font-size: 14px;
border: none;
cursor: pointer;
border-radius: 50px;
}

.topnav .search-container .button:hover {
background: #ccc;
}

.header-control{
padding: 0px;
margin: 0px;
height: 30px;
text-align: center;

}
.header-control div{
padding: 0px;
}

.form-group{
margin:20px;
}

#icon-menu i{
color: white;
}
/********************************************************************************************
                                         LEFT BAR
**********************************************************************************************/

.title{
margin: 10px;
padding:5px;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
}


#title-image{
width:200px;
}
.home , .menu-item{
padding-left:20px;
}
#bodyContent{
width: 100%;
position: absolute;
z-index: 0;
left:0;
margin-top:50px;
}
.left-bar{
background-color: white;
}
.left-bar a {
text-decoration: none;
display: block;
padding: 14px;
transition: all 0.3s ease;
color: #300000;
font-size: 18px;
border:1px solid #f2f2f2;
border-radius: 10px;
font-weight: bold;
}
.left-bar span{
margin-left:10px;
font-size: 15px;
}
.left-bar h2{
background-color:#000099;
text-align: center;
color:white;
padding:5px;
border-top: 2px solid #f2f2f2;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
.left-bar h3{
padding: 10px;
border-top: 1px solid #f2f2f2;
}
.left-bar::-webkit-scrollbar{
display:none;
}


#mainContent{
  background-color: white;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
#header-rgt{
  display: none;
}
.left-bar{
  display: none;
  position : fixed;
  background: white;
  width: 100%;
  top:50;
}
#bodyContent{
width: 100%;
position: absolute;
z-index: 0;
left:0;
margin-top:100px;
}
}


#thongbao{
position: fixed;
padding: 10px;
width: 40%;
height: 40px;
margin: auto;
bottom: 10px;
left: 30%;
z-index: 1;
text-align: center;
border: 1px solid black;
border-radius: 100px;
background-color: black;
color: white;
font-size: 20px;
font-weight: bold;
display: none;
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 768px){
.menu-group-icon{
 display:none;
}
.search-box{
 display: "block",
}
.left-bar.col-sm-2 , .box-title.col-sm-2{
  width: 25%;
}
#index-box .col-sm-6{
  width:100%;
}
.right-bar{
 clear: left;
}
.right-bar.col-sm-2{
    width: 100%;
}
#icon-menu{
 display: none;
}
#mainContent{
 width: 75%;
}

#thongbao{
left: 0;
width: 100%;
}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 993px) {
#header-rgt{
  display: none;
}
.menu-group-icon{
 display:none;
}
.search-box{
 display: "block",
}
.left-bar.col-sm-2 , .box-title.col-sm-2{
  width: 25%;
}
.right-bar{
 clear: left;
}
.right-bar.col-sm-2{
    width: 100%;
}
#icon-menu{
 display: none;
}
#mainContent{
 width: 75%;
}
#index-box .col-sm-6{
  width:100%;
}

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}
@media screen and (max-width: 600px) {
.column {
  width: 100%;
}
}

/********************************************************************************************
                                        MAIN CONTENT
**********************************************************************************************/
#boxShow{
min-height:200px;
background: white;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
display: none;
overflow-y: scroll;
}
#boxShow .vocabulary{
margin: 0px;
}
/* width */
#boxShow::-webkit-scrollbar {
width: 7px;
}

/* Track */
#boxShow::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey; 
border-radius: 10px;
}

/* Handle */
#boxShow::-webkit-scrollbar-thumb {
background: #004080; 
border-radius: 10px;
}

/* Handle on hover */
#boxShow::-webkit-scrollbar-thumb:hover {
background: #004080; 
}
@media screen and (max-width: 500px) {
.navbar a {
  float: none;
  display: block;
  width: 100%;
  text-align: left; /* If you want the text to be left-aligned on small screens */
}
}
/*****************************************************
               BUTTON
*****************************************************/

.btn-load-more{
width: 200px;
height: 50px;
overflow: hidden;
margin: 20px auto;
}
.btn-load-more span{ 
width:100%;
background-color: white; 
border: none;
color: #0052cc;
padding: 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
margin: 10px auto;
cursor: pointer;
border:2px solid #0052cc;
border-radius: 100px;
font-weight: bold;
}

.btn{
border: none;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px auto;
cursor: pointer;
border-radius: 10px;
font-weight: bold;
}

div{
display: block;
}

.control{
padding:20px;
}
.btn-control{
width: 50px;
height: 50px;
margin-left:20px;
cursor: pointer;
border:2px solid #0052cc;
border-radius: 100px;
background-color: white; 
}
.btn-control .badge{
position: relative;
top:-50px;
left: 20px;
bottom: -10px;
width: auto;
height: auto;
z-index: 5;
background-color: red;
color: white;
padding: 5px;
border-radius: 10px;
}
.btn-border-primary {
width:100%;
background-color: white; 
border: none;
color: #0052cc;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
margin: 5px 2px;
cursor: pointer;
border:1px solid #0052cc;
border-radius: 100px;
font-weight: bold;
}
.badge{
  position: relative;
  top:-50px;
  left: 20px;
  bottom: -10px;
  width: auto;
  height: auto;
  z-index: 5;
  background-color: red;
  color: white;
  padding: 5px;
  border-radius: 10px;
  }
.btn-border-primary:hover{
  background-color: #0052cc; 
  border:1px solid white;
  color:white;
  font-weight: bold;
}
.btn-border-success {
width:100%;
background-color: white; 
border: none;
color: #0052cc;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
margin: 4px 2px;
cursor: pointer;
border:1px solid green;
border-radius: 100px;
font-weight: bold;
}

.translateConsultBox{
  padding: 20px;
  border:3px solid #0052cc;
  margin:20px;
  text-indent: 30px;
}

/********************************************************************************************
                                        LOGIN REGISTER FORM
**********************************************************************************************/
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}
.login-form .form-group{
width:100%;
margin-top:20px;
border-radius: 50px;
}
.form-group .label{
display: inline-block;
color: #300000;
background-color: white;
position: relative;
top:13px;
left:5px;
height: auto;
width: auto;
z-index: 2;
border-radius: 30px;
padding: 10px;
font-weight: bold;
font-size: 18px;
text-align: center;
}
.form-group .form-control{
width: 100%;
height: 40px;
padding: 20px;
border: 1px solid black;
border-radius: 3px;
}
.submitForm{
float: right;
background-color: white; 
color:white;
border: none;
background: #300000;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 100px;
margin-top:20px;
}
.titleForm{
text-align: center;
padding: 10px;
}
.login-form .title h2{
font-size: 20px;
}

.alert{
padding: 20px;
border-radius: 30px;
position: fixed;
bottom: 0px;
left: 0px;
height: auto;
z-index: 999;
width: 10%;
}

.alert-success{
background-color: #e6ffee;
}

.alert-success p{
color:green;
 margin-left: 10px;
display: inline;
font-weight: bold;
font-size:15px;
}

.alert-danger{
background-color:  #ffe6e6;
}

.alert-danger p{
color:red;
margin-left: 10px;
display: inline;
font-weight: bold;
font-size:15px;
}

.alert-warning{
background-color: #ffffe6;
}

.alert-warning p{
color:black;
margin-left: 10px;
display: inline;
font-weight: bold;
font-size:15px;
}

/********************************************************************************************
                                         TEXT
**********************************************************************************************/
p {
font-family: "Roboto", sans-serif;
line-height: 2;
font-weight: 400;
}

.text-center{
  text-align: center;
}
.dark{
    color :black;
}
.red{
  color : #cc3300;
}
.green{
    color : #00802b;
}
.white{
  color: #ffffff;
}
.sand{
 color : #ffaa80;
}
.blue{
  color :  #0052cc;
}
.brown{
color :  #993333;
}
.yellow{
color:yellow;
}

.bd-red{
  border:1px solid red;
}
.bd-green{
  border:1px solid green;
}
.bd-blue{
 border:1px solid #1a73e8;
}

.no-under{
text-decoration: none;
font-weight: bold;
color : #0052cc;
}
/********************************************************************************************
                                        BACK GROUND
**********************************************************************************************/
img {
height: auto;
max-width: 100%;
}
.bg-img {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}

.bg-white {
background-color: #ffffff !important; }

.bg-dark {
background-color: #282A35 !important; 
}
.bg-green {
background-color: #e6ffe6 !important; 
}
.bg-red {
background-color : #ffe6e6 !important ; 
}
.bg-blue {
background-color: #1a73e8 !important; 
}
.bg-sand {
background-color: #ffdab3 !important; 
}
.bg-yellow {
background-color:#ffffe6 !important; 
}
.bg-info{
background-color: #f2f2f2 !important; 
}
/********************************************************************************************
                                         FONT
**********************************************************************************************/
.font-bold {
font-weight: 700; 
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.font-light {
font-weight: 300; 
font-family: 'Times New Roman', Times, serif;
}

/***** ĐỊNH DẠNG ******/
.mt-10 {
margin-top: 10px !important; }
.mt-20 {
margin-top: 20px !important; }
.mt-30 {
margin-top: 30px !important; }
.mt-40 {
margin-top: 40px !important; }
.mt-50 {
margin-top: 50px !important; }
.mt-60 {
margin-top: 60px !important; }
.mt-70 {
margin-top: 70px !important; }
.mt-80 {
margin-top: 80px !important; }
.mt-90 {
margin-top: 90px !important; }
.mt-100 {
margin-top: 100px !important; }


.mb-10 {
margin-bottom: 10px !important; }
.mb-20 {
margin-bottom: 20px !important; }
.mb-30 {
margin-bottom: 30px !important; }
.mb-40 {
margin-bottom: 40px !important; }
.mb-50 {
margin-bottom: 50px !important; }
.mb-60 {
margin-bottom: 60px !important; }
.mb-70 {
margin-bottom: 70px !important; }
.mb-80 {
margin-bottom: 80px !important; }
.mb-90 {
margin-bottom: 90px !important; }
.mb-100 {
margin-bottom: 100px !important; }


.ml-10 {
margin-left: 10px !important; }
.ml-20 {
margin-left: 20px !important; }
.ml-30 {
margin-left: 30px !important; }
.ml-40 {
margin-left: 40px !important; }
.ml-50 {
margin-left: 50px !important; }
.ml-60 {
margin-left: 60px !important; }
.ml-70 {
margin-left: 70px !important; }
.ml-80 {
margin-left: 80px !important; }
.ml-90 {
margin-left: 90px !important; }
.ml-100 {
margin-left: 100px !important; }

.mr-10 {
margin-right: 10px !important; }
.mr-20 {
margin-right: 20px !important; }
.mr-30 {
margin-right: 30px !important; }
.mr-40 {
margin-right: 40px !important; }
.mr-50 {
margin-right: 50px !important; }
.mr-60 {
margin-right: 60px !important; }
.mr-70 {
margin-right: 70px !important; }
.mr-80 {
margin-right: 80px !important; }
.mr-90 {
margin-right: 90px !important; }
.mr-100 {
margin-right: 100px !important; }


.p-10 {
padding: 10px !important; }
.p-20 {
padding: 20px !important; }
.p-30 {
padding: 30px !important; }
.p-40 {
padding: 40px !important; }
.p-50 {
padding: 50px !important; }
.p-60 {
padding: 60px !important; }
.p-70 {
padding: 70px !important; }
.p-80 {
padding: 80px !important; }
.p-90 {
padding: 90px !important; }
.p-100 {
padding: 100px !important; }

.w-100 { width:100px; }
.w-200 { width:200px; }
.w-300 { width:300px; }
.w-400 { width:400px; }
.w-500 { width:500px; }
.h-100 { height:100px; }
.h-200 { height:200px; }
.h-300 { height:300px; }
.h-400 { height:400px; }
.h-500 { height:500px; }


.group{
padding: 20px;
}

.group .item{
border: 1px solid black;
padding:10px;
}
.group .item.active{
background-color:#004080;
color: white;
font-weight:bold;
text-align: center;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}


/********************************************************************************************
                                         BOX
**********************************************************************************************/

.border{
border: 1px solid black;
}

.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 100%;
border-radius: 20px;
margin-top: 5px;
}


.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/* TABLE */
.table{
border:2px solid black;
padding:3px;
border-radius: 5px;
}

.table tr th{
padding: 10px;
border: 1px solid #f2f2f2;
font-family: 'Times New Roman', Times, serif;
font-size: 18px;
}

.table td{
text-align: center;
padding: 5px;
border: 1px solid #f2f2f2;
}


table[border="1"] {
border-collapse:collapse;
color:#666;
}

table[border="1"] tr {
background:#fafafa;
}

table[border="1"] th,
table[border="1"] td {
vertical-align:top;
padding:5px 10px;
border:1px solid #fff;
}

table[border="1"] tr:nth-child(even) {
background:#f5f5f5;
}

table[border="1"] th {
background:#418AA4;
color:#fff;
font-weight:bold;
}

/*INPUT*/

@keyframes inputHighlighter {
  from { background: #4a89dc; }
  to  { width: 0; background: transparent; }
}
textarea {
width: 100%;
padding: 0.5rem;
font-size: 1rem;
border: 1px solid #D9D9D9;
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
min-height: 100px;
margin-bottom: 1rem;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

/*IMG*/
.img-thumbnail {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}

.img-thumbnail:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.rounded{
border-radius: 100px;
}
.pagde{
display: block; 
padding: 5px;
background-color: black;
color: yellowgreen;
max-width: 50px;
overflow: hidden;
border-radius: 50px;
}
#changeAvatar{
position: relative;
width: 20px;
height: 20px;
top:-25px;
left:40px;
z-index: 1;
border: 2px solid #4a89dc;
background-color: white;
}


.left{
  float:left;
}
.right{
  float:right;
}
.clear{
  clear: both;
}

.center{
  width: 300px;
  margin: 30px auto;
}

.row::after {
content: "";
clear: both;
display: table;
}

[class*="col-"] {
float: left;
padding: 10px;
}


/*
BUTTON
*/
.success {background-color: #4CAF50;} /* Green */
.success:hover {background-color: #46a049;}

.info {background-color: #2196F3;} /* Blue */
.info:hover {background: #0b7dda;}

.warning {background-color: #ff9800;} /* Orange */
.warning:hover {background: #e68a00;}

.danger {background-color: #f44336;} /* Red */ 
.danger:hover {background: #da190b;}

.default {background-color: #e7e7e7; color: black;} /* Gray */ 
.default:hover {background: #ddd;}


.box-write{
      height:200px;
      border:1px solid black;  
}
.input-write{
width: 40px;
height: 40px;
border: 1px solid black;
}
#resultContent{
top:0px;
left:0px;
width:100%;
height:20%;
position:fixed;
background:red;
z-index:1;
}

@media (max-width: 600px) {
.column {
  width: 100%;
}
}
.row::after {
content: "";
clear: both;
display: table;
}

[class*="col-"] {
float: left;
padding: 10px;
}

[class*="col-"] {
float: left;
padding: 10px;
}

/* For mobile phones: */
[class*="col-sm-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-sm-1 {width: 8.33%;}
.col-sm-2 {width: 16.66%;}
.col-sm-3 {width: 25%;}
.col-sm-4 {width: 33.33%;}
.col-sm-5 {width: 41.66%;}
.col-sm-6 {width: 50%;}
.col-sm-7 {width: 58.33%;}
.col-sm-8 {width: 66.66%;}
.col-sm-9 {width: 75%;}
.col-sm-10 {width: 83.33%;}
.col-sm-11 {width: 91.66%;}
.col-sm-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

/*
AUTOCOMPLATE
*/
.resultSearchIndex{
border: 1px solid #ccc;
background-color: #f2f2f2;
border-radius: 10px;

}
.resultSearchIndex ul{
clear:both;
list-style: none;
margin:10px;
}
.resultSearchIndex ul > li {
padding:10px;
border-bottom: 1px solid #ccc;
white-space: nowrap;
overflow: hidden;
margin-top: 5px;
}
.active-complete{
background-color:  #c2d6d6;
cursor: pointer;
}
.keysearchActive{
font-size: 15px;
font-weight: bold;
color: #008000;
}

/*************************************
INDEX
*************************************/
.countResult{
padding:15px;
font-size: 16px;
font-weight: bold;
font-family: sans-serif;
margin-bottom: 20px;
}

.countResult.exist{
background-color:  #e6f9ff;
border-left: 3px solid  #000099;
}
.countResult.notexist{
background-color:   #ffe6e6;
border-left: 3px solid  red;
}

/*************************************SCROLL*************************************/
div.scrollmenu {
overflow: auto;
white-space: nowrap;
margin-bottom: 20px;
border:1px solid black;
border-radius: 20px;
padding: 5px;
}


@media screen and (max-width: 900px) {
div.scrollmenu::-webkit-scrollbar { 
  display: none; 
}
}

div.scrollmenu a {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
display: inline-block;
color:  black;
text-align: center;
padding: 5px;
text-decoration: none;
font-weight: bold;
border-left: 1px solid #f2f2f2;
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s; 
border: 1px solid black;
}
div.scrollmenu select{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
display: inline-block;
color:  black;
text-align: center;
padding: 5px;
text-decoration: none;
font-weight: bold;
border-left: 1px solid #f2f2f2;
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s; 
border: 1px solid black;
}

div.scrollmenu a:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }



div.scrollmenu a.active{
background-color: black;
color: white;
border-radius: 30px;
}

/****************************** SORT ZONE ***************/


/*************************************
PAGINATION
*************************************/

ul.pagination {
  display: inline-block;
  padding: 0;
  margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
  font-weight: bold;
  color: #00802b;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  background-color:#99f49e ;
}
ul.pagination li.active a{
background-color:#00802b;
color:#99f49e;
}


/*****************************************************
                VOCABULARY
*****************************************************/
.selectdiv{
  display: inline-block;
}
.countResult{
  padding:15px;
  font-size: 16px;
  font-weight: bold;
  font-family: sans-serif;
  margin-bottom: 20px;
}

.countResult.exist{
  background-color:  #e6f9ff;
  border-left: 3px solid  #000099;
}
.countResult.notexist{
  background-color:   #ffe6e6;
  border-left: 3px solid  red;
}
.vocabulary-item {
  min-height: 100px;
}

.vocabulary-item  .vocabulary{
  font-size: 20px;
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-weight: bold;
  color: black;
  text-decoration:none;
  border-radius: 10px;
}
.level1{
  background-color: #f7fcf7;
}
.level2{
    background-color: #fffeef;
}
.level3{
  background-color: #fcf4f4;
}

.vocabulary-item .pronounce{
  display: inline;
  padding: 3px;
  padding-right: 5px;
  border: 1px solid #f1f1f1;
}
.org_lang{
  display: inline-block;
}
.org_lang a{
  background-color:#f2f2f2;
  color: red;
}


.vsub{
  color:red;
  font-size:16px;
}
.meaning{
  margin-top: 7px;
  font-size:16px;
  color:black;
}

.vocabulary-detail{
  padding: 10px;

}
.vocabulary-detail div{
  display: inline;
  border: 1px solid #f2f2f2;
  padding: 5px;
  border-radius: 20px;
  font-weight: bold;
}
.vocabulary-detail a{
  text-decoration: none;
  color: black;
}
.vocabulary-type{
  background-color: #f3f3f3;
}
.example-box div{
  margin: 3px;
}
/*****************************************************
                HAN HAN
*****************************************************/

.hanhan-item{
  padding: 10px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 20px;
  margin-top: 5px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  font-family:sans-serif;
}
.hanhan-box{
  border-bottom: 1px solid #f1f1f1;
  margin: 20px;
}
#hanhan-search{
  width: 100%;
  height: 50px;
  border: 2px solid #0052cc;
  padding: 10px;
  margin-bottom: 10px;
}


.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
.row-hanhan{
  border:3px solid #0052cc;
}

.row-hanhan{
  border: 1px solid black;
  display: inline-block;
  height:400px;
  overflow: auto;
  overflow-y: scroll;
  padding: 20px;
}

/* width */
.row-hanhan::-webkit-scrollbar {
  width: 7px;
}

/* Track */
.row-hanhan::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
.row-hanhan::-webkit-scrollbar-thumb {
  background: #004080; 
  border-radius: 10px;
}

/* Handle on hover */
.row-hanhan::-webkit-scrollbar-thumb:hover {
  background: #004080; 
}

.hanhan-detail-header{
  border-bottom: 3px solid #f2f2f2;
  padding: 10px;
  font-size: 18px;
}

.ko_char{
  font-weight: 18px;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-weight: bold;
}
.cn_char{
  display: inline-block;
  background-color:#f2f2f2;
  border-radius: 50px;
  padding: 3px;
}



.hanhan-meaning{
  font-style: italic;
  font-size: 18upx;
}

.vol-hanhan-header{
  padding: 10px;
  text-align: center;
}
.vol-hanhan-header a{
  text-decoration: none;
  padding: 10px;
  font-size: 24px;
  font-weight: bold;
  color: saddlebrown;
  background-color: #f2f2f2;
  display: inline-block;
  margin: 5px;
  border-radius: 20px;
}


/*****************************************************
                EXAMPLE
*****************************************************/



.hanhan-title{
  padding: 5px;
  text-align: center;
  color:#0052cc;
  font-size: 30px;
  font-weight: bold;
}
.hanhan_meaning{
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #f2f2f2;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  text-transform: uppercase;
}


/* Style the search box */
#searchTag {
  width: 100%;
  font-size: 18px;
  padding: 10px;
  border: 1px solid #ddd;
  }
  
  #searchTag li a {
  padding: 12px;
  text-decoration: none;
  color: black;
  display: block
  }
  
  #searchTag li a:hover {
  background-color: #eee;
  }


/* Hanhan Learn */
.hanhan-learn-input{
  margin: 10px;
  width:50%;
  padding: 10px;
  border: 2px solid #f2f2f2;
}
.submit{
  padding: 8px;
  background-color: #0052cc;
  color: white;
  font-weight: bold;
}
.suggest{
  padding: 8px;
  background-color: #ffdab3;
  font-weight: bold;
}

#analytic-btn{
  padding: 10px;
  font-weight: bold;
  background-color: #0052cc;
  color: white;
  border-radius: 15px;
  border: 1px solid #f2f2f2;
}
.analytic-result-box{
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 2;
}
/******* AJAX VOCABULARY **********/

.ajax-box{
  padding:10px;
}

.ajax-box .icon-row {
  padding:10px;
  border: 1px solid #f2f2f2;
}
.ajax-box a{
  color:black;
  text-decoration: none;
}
.box-search-change{
  margin-top:10px;
}
.box-search-change .box-item{
  padding:10px;
  border: 1px solid #f2f2f2;
  background-color: #f2f2f2;
  display: inline-block;
  min-width: 120px;
  border-radius: 50px;
}

.box-search-change a{
  color:black;
  text-decoration: none;
}

.countResult{
  padding:15px;
  font-size: 16px;
  font-weight: bold;
  font-family: sans-serif;
  margin-bottom: 20px;
}

.countResult.exist{
  background-color:  #e6f9ff;
  border-left: 3px solid  #000099;
}
.countResult.notexist{
  background-color:   #ffe6e6;
  border-left: 3px solid  red;
}

.vocabularyOpen {
  color: black;
  text-decoration: underline;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}
