body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
    background-color: #1d1d1d;
}

.container {
    text-align: center;
    background-color: #1d1d1d;
    border-radius: 10px; 
    padding: 20px;
    width: 800px;
}

.tabs {
    display: flex;  
    justify-content: left;  
	margin-left: 20px;
}

.tab {
    background: none; 
    border-radius: 5px 5px 0 0;  
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.tab.active {
    background-color: #4285f4;
    color: white;
}

.tab-content {
    display: none;
}

.tab-content.active {
	display: flex;
    border: 1px solid #4285f4;
    border-radius: 0 0 5px 5px;
    padding: 30px 20px 30px 20px;
    border-radius: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

 

input[type="text"] {
    padding: 10px;
    width: 80%;
    border: 2px solid #333;
    border-radius: 5px;
    margin: 0px 0;
    background-color: #313131;
    color: #7f7f7f;
}

input[type="text"]:focus {
	border-color: #007BFF;
	background-color: #fff; 
}




button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #fa6d64;
    color: #a1a1a1;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #357ae8;
	color: #fff;
}

.btnSearch {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #dd1f26;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btnSearch:hover {
    background-color: #357ae8;
}
.btnSearch {
    display: flex;
    align-items: center;
	justify-content: center;
}

.button-text {
    margin-right: 5px; 
}

button .button-text {
  vertical-align: middle;
}

button i,
button svg {
  vertical-align: middle; 
  height: 1em;    
  width: 1em;
}

	.logo{
 	    height: 80px;
		margin-bottom: 20px;
	}

.user_info{
	position: absolute;
    top: 10px;
    right: 10px;
}

.hide_menu{
	display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-end;
    margin-top: 5px;
    position: absolute;
    top: 43px;
    right: 10px;
	z-index:999;
}
.hide_menu_text{
    padding: 15px 10px 15px 0px;
    color: #b5b5b5;
    background: #404040;
    width: 100%;
    text-align: right;
    border-bottom: solid 1px #1b1b1b;
    line-height: 14px;
}
.hide_menu_text:hover{ 
    color: #ed9d9d; 
}
.avatarshow img:active{
	color: #ccc;
    border: solid 2px #ed6447;
}
.avatarshow{
    width: 40px;
    height: 30px;
    line-height: 36px;
    text-align: center;
	cursor: pointer;	
}

.avatarshow img{ 
    width: 30px;
    border-radius: 50%;
	background: #b8b8b8;
}
.hide_menu_noti{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    background: #272727; 
}
.hide_menu_noti_fa{ 
	font-size: 16pt;
    width: 40px;
    height: 55px;
    text-align: center; 
    color: #7b7b7b;
}
 

.hide_menu a{
	width:100%;
	text-decoration: auto;
}
.shownoti{
	width: 100%; 
}
.hide_menu_noti_fa .noti {
	width: 100%;
    height: 100%;
	text-align: center;
    line-height: 50px;
}
.hide_menu_noti_fa:active{
	background:#434343;
}
.avatarlogin img {
    height: 35px; 
}
.gr_avatar{
	display: flex;
	align-items: center;
}
.bellshow{
	color: #ccc;
	margin-right: 10px;
}
.bellshow:active{
	color: #e65c5c;	
}

.fa-bell:before {
    content: '';
    display: inline-block;
    width: 33px;  
    height: 33px; 
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23cccccc" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 8a6 6 0 1112 0v2.917c0 .703.228 1.387.65 1.95L20.7 15.6a1.5 1.5 0 01-1.2 2.4h-15a1.5 1.5 0 01-1.2-2.4l2.05-2.733a3.25 3.25 0 00.65-1.95V8zm6 13.5A3.502 3.502 0 018.645 19h6.71A3.502 3.502 0 0112 21.5z"/></svg>');
    background-size: contain;
    color: #ccc;  
    vertical-align: middle;  
}

.fa-searchs:before {
    content: '';
    display: inline-block;
    width: 16px;   
    height: 16px; 
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23ffffff" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c28.3-34.9 45.2-79.3 45.2-127C450.5 97.2 353.3 0 228.3 0S6 97.2 6 216.5 103.2 433 228.3 433c47.7 0 92.1-16.9 127-45.2l99.7 99.7c12.5 12.5 32.8 12.5 45.3 0 12.5-12.5 12.5-32.8 0-45.3zM228.3 383c-91.7 0-166.5-74.8-166.5-166.5S136.6 50 228.3 50s166.5 74.8 166.5 166.5-74.8 166.5-166.5 166.5z"/></svg>');
    background-size: contain;
    color: #ffffff;  
    vertical-align: middle;  
}

.fa-youtube:before {
    content: '';
    display: inline-block;
    width: 16px;  
    height: 16px;  
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23ffffff" viewBox="0 0 16 16"><path d="M8.051 1.999c-2.349.021-4.686.22-7.035.6A1.24 1.24 0 0 0 0 3.78v8.44a1.24 1.24 0 0 0 1.017 1.181c2.349.38 4.686.579 7.035.6 2.349-.021 4.686-.22 7.035-.6a1.24 1.24 0 0 0 1.017-1.18V3.78a1.24 1.24 0 0 0-1.017-1.182c-2.349-.38-4.686-.579-7.035-.6zM6.5 11.194V5.278l4.751 2.958-4.751 2.958z"/></svg>');
    background-size: contain;
    color: #ffffff;   
    vertical-align: middle;  
}
.fa-arrow-circle-left::before {
    content: '';
    display: inline-block;
    width: 16px;  
    height: 16px;  
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12.7071 7.29289C12.3166 6.90237 11.6834 6.90237 11.2929 7.29289L7.29289 11.2929C7.10536 11.4804 7 11.7348 7 12C7 12.2652 7.10536 12.5196 7.29289 12.7071L11.2929 16.7071C11.6834 17.0976 12.3166 17.0976 12.7071 16.7071C13.0976 16.3166 13.0976 15.6834 12.7071 15.2929L10.4142 13H16C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11H10.4142L12.7071 8.70711C13.0976 8.31658 13.0976 7.68342 12.7071 7.29289Z" fill="%23cccccc"/></svg>');
    background-size: contain;  
    background-repeat: no-repeat;  
    vertical-align: middle;  
}

.fa-list-ul::before {
    content: '';
    display: inline-block;
    width: 24px;  
    height: 24px;  
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg width="800px" height="800px" viewBox="0 -3.5 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"><title>bullet-list</title><desc>Created with Sketch Beta.</desc><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g id="Icon-Set-Filled" sketch:type="MSLayerGroup" transform="translate(-571.000000, -210.000000)" fill="%23cccccc"><path d="M598,227 L582,227 C580.896,227 580,227.896 580,229 C580,230.104 580.896,231 582,231 L598,231 C599.104,231 600,230.104 600,229 C600,227.896 599.104,227 598,227 L598,227 Z M598,219 L582,219 C580.896,219 580,219.896 580,221 C580,222.104 580.896,223 582,223 L598,223 C599.104,223 600,222.104 600,221 C600,219.896 599.104,219 598,219 L598,219 Z M582,215 L598,215 C599.104,215 600,214.104 600,213 C600,211.896 599.104,211 598,211 L582,211 C580.896,211 580,211.896 580,213 C580,214.104 580.896,215 582,215 L582,215 Z M574,226 C572.343,226 571,227.343 571,229 C571,230.657 572.343,232 574,232 C575.657,232 577,230.657 577,229 C577,227.343 575.657,226 574,226 L574,226 Z M574,218 C572.343,218 571,219.343 571,221 C571,222.657 572.343,224 574,224 C575.657,224 577,222.657 577,221 C577,219.343 575.657,218 574,218 L574,218 Z M574,210 C572.343,210 571,211.343 571,213 C571,214.657 572.343,216 574,216 C575.657,216 577,214.657 577,213 C577,211.343 575.657,210 574,210 L574,210 Z" id="bullet-list" sketch:type="MSShapeGroup"></path></g></g></svg>');
    background-size: contain;  
    background-repeat: no-repeat;  
    vertical-align: middle;  
}
.fa-envelope::before {
    content: '';
    display: inline-block;
    width: 24px;  
    height: 24px;  
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg width="800px" height="800px" viewBox="0 -3.5 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"><title>mail</title><desc>Created with Sketch Beta.</desc><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g id="Icon-Set-Filled" sketch:type="MSLayerGroup" transform="translate(-414.000000, -261.000000)" fill="%23cccccc"><path d="M430,275.916 L426.684,273.167 L415.115,285.01 L444.591,285.01 L433.235,273.147 L430,275.916 L430,275.916 Z M434.89,271.89 L445.892,283.329 C445.955,283.107 446,282.877 446,282.634 L446,262.862 L434.89,271.89 L434.89,271.89 Z M414,262.816 L414,282.634 C414,282.877 414.045,283.107 414.108,283.329 L425.147,271.927 L414,262.816 L414,262.816 Z M445,261 L415,261 L430,273.019 L445,261 L445,261 Z" id="mail" sketch:type="MSShapeGroup"></path></g></g></svg>');
    background-size: contain;  
    background-repeat: no-repeat;  
    vertical-align: middle; 
}

.fa-comments::before {
    content: '';
    display: inline-block;
    width: 24px;  
    height: 24px; 
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.968 18.769C15.495 18.107 19 14.434 19 9.938a8.49 8.49 0 0 0-.216-1.912C20.718 9.178 22 11.188 22 13.475a6.1 6.1 0 0 1-1.113 3.506c.06.949.396 1.781 1.01 2.497a.43.43 0 0 1-.36.71c-1.367-.111-2.485-.426-3.354-.945A7.434 7.434 0 0 1 15 19.95a7.36 7.36 0 0 1-4.032-1.181z" fill="%23cccccc"/><path d="M7.625 16.657c.6.142 1.228.218 1.875.218 4.142 0 7.5-3.106 7.5-6.938C17 6.107 13.642 3 9.5 3 5.358 3 2 6.106 2 9.938c0 1.946.866 3.705 2.262 4.965a4.406 4.406 0 0 1-1.045 2.29.46.46 0 0 0 .386.76c1.7-.138 3.041-.57 4.022-1.296z" fill="%23cccccc"/></svg>');
    background-size: contain;  
    background-repeat: no-repeat;  
    vertical-align: middle;  
}

.fa-users::before {
    content: '';
    display: inline-block;
    width: 24px; 
    height: 24px;  
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg fill="%23cccccc" width="800px" height="800px" viewBox="0 -64 640 640" xmlns="http://www.w3.org/2000/svg"><path d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"/></svg>');
    background-size: contain;  
    background-repeat: no-repeat;  
    vertical-align: middle;  
}


.mNav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    color: #333;
    text-align: center;
    z-index: 1038;
    font-size: 8pt;
}
.mNav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}
.mNav ul>li {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 20%;
    -moz-box-flex: 0;
    -moz-flex: 0 0 20%;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}
.mNav ul>li a {
    display: block;
    padding: 7px 0;
	color: #a3a3a3;
	margin-bottom: 5px;
	text-decoration: auto;
}
.mNav ul>li.active span{
    color: #30c1f0;
}
.mNav ul>li i {
    font-size: 20pt;
    color: #9b9c9b;
}
[class*=" icon-"], [class^=icon-] { 
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
} 
 
 
.mNav ul>li.active i {
    color: #30c1f0;
}
 

.mNav ul>li span {
    display: block;
    margin-top: 3px;
}

.logo-btn-slidebar {
    margin-top: 50px;
    text-align: center;
    margin-bottom: 50px!important;
}
 
@media only screen and (min-width: 830px) {
	.mNav{
		display:none;
	}	
}
 
 .fa-history::before {
    content: '';
    display: inline-block;
    width: 30px;  
    height: 30px;  
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg fill="%23cccccc" width="800px" height="800px" viewBox="0 0 24 24" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"><title/><path d="M11,7.4V13h4.68V11H13V7.4Zm7.36-1.76a9,9,0,0,0-12.72,0L5,6.31l-2-2V10H8.66L6.38,7.72l.67-.67a7,7,0,1,1-2,6h-2A9,9,0,0,0,12,21,9,9,0,0,0,18.36,5.64Z"/></svg>');
    background-size: contain;  
    background-repeat: no-repeat;  
    vertical-align: middle;  
}

.fa-sliders::before {
    content: '';
    display: inline-block;
    width: 24px;  
    height: 24px;  
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg width="800px" height="800px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect width="16" height="16" id="icon-bound" fill="none" /><path fill="%23cccccc" d="M4,12H0v2h4v1h3v-4H4V12z M9,10h3V6H9v1H0v2h9V10z M3,5h3V1H3v1H0v2h3V5z M8,14h8v-2H8V14z M7,2v2h9V2H7z M13,9h3V7h-3V9z" /></svg>');
    background-size: contain;  
    background-repeat: no-repeat; 
    vertical-align: middle;  
}

.fa-cog::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ccc" width="24px" height="24px" viewBox="0 0 340.274 340.274"><path d="M293.629,127.806l-5.795-13.739c19.846-44.856,18.53-46.189,14.676-50.08l-25.353-24.77l-2.516-2.12h-2.937 c-1.549,0-6.173,0-44.712,17.48l-14.184-5.719c-18.332-45.444-20.212-45.444-25.58-45.444h-35.765 c-5.362,0-7.446-0.006-24.448,45.606l-14.123,5.734C86.848,43.757,71.574,38.19,67.452,38.19l-3.381,0.105L36.801,65.032 c-4.138,3.891-5.582,5.263,15.402,49.425l-5.774,13.691C0,146.097,0,147.838,0,153.33v35.068c0,5.501,0,7.44,46.585,24.127 l5.773,13.667c-19.843,44.832-18.51,46.178-14.655,50.032l25.353,24.8l2.522,2.168h2.951c1.525,0,6.092,0,44.685-17.516 l14.159,5.758c18.335,45.438,20.218,45.427,25.598,45.427h35.771c5.47,0,7.41,0,24.463-45.589l14.195-5.74 c26.014,11,41.253,16.585,45.349,16.585l3.404-0.096l27.479-26.901c3.909-3.945,5.278-5.309-15.589-49.288l5.734-13.702 c46.496-17.967,46.496-19.853,46.496-25.221v-35.029C340.268,146.361,340.268,144.434,293.629,127.806z M170.128,228.474 c-32.798,0-59.504-26.187-59.504-58.364c0-32.153,26.707-58.315,59.504-58.315c32.78,0,59.43,26.168,59.43,58.315 C229.552,202.287,202.902,228.474,170.128,228.474z"/></svg>');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    color: transparent;  
	vertical-align: middle;
}


.fa-clock-o::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23ccc"><circle cx="12" cy="12" r="9" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 8V13H16" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: 28px 28px;
    background-repeat: no-repeat;
    color: transparent;  
	vertical-align: middle;
}

.fa-home::before {
    content: '';
    display: inline-block;
    width: 24px;  
    height: 24px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ccc" viewBox="0 0 512 512"><polygon points="434.162,293.382 434.162,493.862 308.321,493.862 308.321,368.583 203.682,368.583 203.682,493.862 77.841,493.862 77.841,293.382 256.002,153.862"/><polygon points="0,242.682 256,38.93 512,242.682 482.21,285.764 256,105.722 29.79,285.764"/><polygon points="439.853,18.138 439.853,148.538 376.573,98.138 376.573,18.138"/></svg>');
    background-size: 24px 24px;  
    background-repeat: no-repeat;
    color: transparent;  
	vertical-align: middle;
}

.fa-times::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM15.36 14.3C15.65 14.59 15.65 15.07 15.36 15.36C15.21 15.51 15.02 15.58 14.83 15.58C14.64 15.58 14.45 15.51 14.3 15.36L12 13.06L9.7 15.36C9.55 15.51 9.36 15.58 9.17 15.58C8.98 15.58 8.79 15.51 8.64 15.36C8.35 15.07 8.35 14.59 8.64 14.3L10.94 12L8.64 9.7C8.35 9.41 8.35 8.93 8.64 8.64C8.93 8.35 9.41 8.35 9.7 8.64L12 10.94L14.3 8.64C14.59 8.35 15.07 8.35 15.36 8.64C15.65 8.93 15.65 9.41 15.36 9.7L13.06 12L15.36 14.3Z"/></svg>');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    color: transparent;  
    vertical-align: middle;
}



@media (max-width: 599px) {
	input[type="text"] { 
		width: 75%; 
	}
	.button-text {
        display: none;  
    }

    .btnSearch {
        width: 40px;  
        height: 40px;  
        padding: 0;  
    }

    .fa-search {
        font-size: 20px;  
    }
	 .fa-youtube-play {
        font-size: 20px;  
    }
	.logo{
 	    height: 50px; 
	}
	
}
@media (max-width: 800px) {
	input[type="text"] { 
		width: 75%; 
	}
  
}