@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/********************************   MENU HIEN *******************************************************************************************/

.homepage-leftmenu-container > .mx-scrollcontainer-wrapper > .mx-navigationtree > .navbar-inner > ul > li:first-child > a > img {display: none;} 
.layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar > .mx-scrollcontainer-wrapper > .mx-navigationtree > .navbar-inner > ul > li:first-child > a {
   padding-top: 10px;
}
.layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar > .mx-scrollcontainer-wrapper > .mx-navigationtree > .navbar-inner > ul > li:first-child > a > img {display: block;} 
.layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar > .mx-scrollcontainer-wrapper > .mx-navigationtree > .navbar-inner > ul > li:first-child > a {
   color: #1e4b9b;
   transition: none;
   margin-top: 0px; /* Duc changed. Older value = 70px*/
}
.layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar > .mx-scrollcontainer-wrapper > .mx-navigationtree > .navbar-inner > ul > li.mx-navigationtree-has-items > ul > li:first-child {margin-top: 10px;}
.mx-navigationtree li.mx-navigationtree-has-items > ul li a {
   font-size: 18px;
   font-weight: normal;
   color: #fff;
   background-color: #003e6b;
   padding: 10px 20px 10px 25px;
   padding-left: 50px;
   border-left: solid #1e4b9b 5px;
   border-bottom: solid #1e4b9b 1px;
   border-right: solid #1e4b9b 0px;
   border-top: solid #1e4b9b 1px; 
}
.homepage-leftmenu-container .mx-layoutcontainer-wrapper {
   padding-top: 2px;
   background-color: #1e4b9b;
}
.mx-navigationtree ul li {
   border-bottom: 0px;
}
/*DUC added to modify icon overview of menu student*/
.mx-navigationtree .navbar-inner>ul>li>a:first-child.dropbox {
   width: 127px; 
}
.mx-navigationtree .navbar-inner>ul>li>a>img {
   width: 47px;
   padding-left: 6px;
   padding-right: 12px;
}
.mx-navigationtree .navbar-inner>ul>li>ul>li>a>img {
   width: 50px;
   margin-right: 15px;
}

.mx-navigationtree > .navbar-inner > ul > li.mx-navigationtree-has-items > ul > li > a:hover { 
   padding-left: 50px; 
   background-color: #8cd5f6 !important; 
}
.mx-navigationtree .navbar-inner ul li a.active {
   border-left: solid #f8df24 5px !important;
   border-bottom: solid #8cd5f6 1px; 
   border-right: solid #8cd5f6 0px;
   border-top: solid #8cd5f6 1px;
   background-color: #8cd5f6 !important; 
}
.mx-navigationtree .navbar-inner ul li a:focus {
   outline: none;
}
.mx-navigationtree .navbar-inner ul li a .caret {    
   margin-left: 8px;
   border-top: 6px dashed;
   border-right: 6px solid transparent;
   border-left: 6px solid transparent;
}

	
.mx-navigationtree .navbar-inner ul li a {
   border-left: 5px solid transparent;
   border-bottom: 0px;
 
}

.navbar-inner ul>li
{
   font-weight: bolder;
}

.navbar-inner ul>li li
{
   font-weight: normal;
}

.mx-navigationtree .navbar-inner ul li a
{
   font-weight: bolder !important;
   font-size: 18px !important;
}

.mx-navigationtree .navbar-inner ul li
{
   list-style-type: decimal;
}

.region-sidebar > .mx-layoutcontainer-wrapper
{
   background-color: #1e4b9b;
}

/********************************   END MENU  HIEN *******************************************************************************************/
.region-sidebar .mx-navigationtree .navbar-inner>ul>li>a {
   border-color: transparent;
}
/********************************   TOP BAR HIEN *******************************************************************************************/
.img-logo{
   width: 90px;
   padding-top: 6px;
   /* margin-left: 60px; */
}
.grid-top-bar a {border-bottom: 5px solid #fff;}
.grid-top-bar a:focus {color: #0092da !important;border-bottom: 5px solid #0092da;}
.grid-top-bar a:active {color: #0092da;border-bottom: 5px solid #0092da;}
.grid-top-bar a:hover {color: #0092da;border-bottom: 5px solid #0092da;text-decoration: none;}
.homepage-top-left-child {position: relative;
   top: 50%;
   padding-left: 25px;
}

.welcome-profile-img{

}

.homepage-topbar-avatar-container {
   width: 70px;
   height: 70px;
   position: relative;
   overflow: hidden;
   border-radius: 50%;
   background-color: #fff;
   border: 0px;
}
.homepage-topbar-avatar-container img {
   display: inline;
   margin: 0 auto;
   height: 100%;
   width: auto;
}


.homepage-topbar-left
{
   padding-left: 25px;
}

.homepage-top-left-avatar-container {
   width: 175px;
   height: 175px;
   position: relative;
   overflow: hidden;
   border-radius: 50%;
   background-color: #fff;
   border: 0px;
   margin-left: 0px;
}
.homepage-top-left-avatar-container img {
   display: inline;
   margin: 0 auto;
   height: 100%;
   width: auto;
}

.homepage-topbar-center {height:80px;}
.homepage-topbar-center ul {height:100%; font-size:18px;}
.homepage-topbar-center .mx-menubar-horizontal {height:100%;box-shadow:none !important;}

.homepage-topbar-right
{
   padding-bottom: 8px;
}
.region-topbar{
	height: 85px;
	min-width: 1200px;
}
.region-topbar .mx-menubar ul.mx-menubar-list li.mx-menubar-item a {font-size:18px;}

/********************************   END TOP BAR HIEN *******************************************************************************************/

/********************************   FOOTER *******************************************************************************************/

/********************************   END FOOTER ***************************************************************************************/

/********************************   HOME PAGE HIEN *******************************************************************************************/
body{
	min-width : 1600px;
}

.homepage-base {
   padding: 10px 40px 10px 30px !important;
   color: #525252;
   text-align: left;
   font-size: 17px;
}

.homepage-top-left-area img {
   display: inline;
   margin: 0 auto;
}

.homepage-title-txt 
{
   font-size: 25px;
   color: #313131;
   font-weight: bold;
}

.homepage-font-size-20
{
   font-size: 20px;
}

.homepage-grey-dark
{
   color:#abacb0;
}

.homepage-grey-light
{
   color: #cccccc;
}

.homepage-blue
{
   color: #00477f;
}

.homepage-bottom-left-area-left-comlumn1
{
   padding-left:10px;
   height: 32px;
}

.homepage-bottom-left-area-left-comlumn2
{
   padding-top: 8px;
}

.homepage-bottom-left-area-label-text
{
   font-size: 19px;
}

.homepage-bottom-left-area-row
{
   height:auto; 
}

.homepage-bottom-left-header
{
   text-align: left;
}

.homepage-bottom-left-area-data-text
{
   color: #00477f;  
}
.homepage-actions-button-list .row:before {
	clear: both;
}
.homepage-bottom-left-header-cell
{
   border-left: 1px solid #D7D7D7;
   text-align: center;
   height: 100%;
   padding-top: 10px;
}


.homepage-bottom-left-bar-value
{
   padding-left:6px;
   padding-top: 5px;
}

.homepage-bottom-left-bar
{
   padding-left:0px;
}

.homepage-maincontent-text-title {
   font-size: 19px;
   color:#000;
   text-transform:uppercase;
   text-align:left;
   margin-left: 20px;
   margin-top: 20px;
}
.homepage-maincontent-text-number {
   font-size: 60px;
   color:#000;
   text-transform:uppercase;
   text-align:left;
   font-weight:bold;
   margin-left: 20px;
   margin-top:5px;  
}
.homepage-maincontent-departed-text-title {
   font-size: 40px;
   color:#1e4b9b;
   margin: auto;
   margin-top: 45px;
   text-transform:uppercase;	
   width: 250px;

}
.homepage-maincontent-departed-text-number {
   font-size: 100px;
   color:#1e4b9b;
   text-transform:uppercase;
   font-weight:bold;
   margin-top: 0px;
   margin: auto;
   margin-bottom: 35px;
   width: 250px;
}

.homepage-maincontent-page-text-title {
   font-size: 19px;
   margin: 15px 0 15px 0;
   color:#000;
}
.maincontent-topbar-text-level-role {
   font-size: 18px;
   color:#d3eefb;
}
.mx-layoutcontainer-middle {
   background-color: #e6ebf0;
}
.mx-layoutcontainer-middle div.mx-layoutcontainer-nested:first-child {
   padding-top: 5px;
}
.mx-name-TopbarMenuIconContainer .toggle-btn {
   font-size: 30px;
   float: left;
   height: 85px;
   width: 85px;
   border-right: solid 1px #fff;
   color: #fff;
   padding-top: 23px;
   margin: auto;
   text-align: center;
   transform: none;
   vertical-align: middle;


}
.warehouse-topbar-profile-dropdownlist > button.dropdown-button {
   border-color: #000b28 !important;
   background-color: #000b28 !important;
   margin-top: 25px;
}

.warehouse-topbar-profile-dropdownlist > button.dropdown-button .caret {

   border-top: 8px dashed;
   border-right: 8px solid transparent;
   border-left: 8px solid transparent;
}

.mx-name-dropdownProfileDivConverter .mx-navigationlist .mx-navigationlist-item {
   background-color: #fff;	
   min-width: 200px;
   border-right: 0px;
   border: 0px;
}
.mx-name-dropdownProfileDivConverter .mx-navigationlist .mx-navigationlist-item  a {
   margin-left: 20px;
   /*font-family: Verdana, Geneva, sans-serif;*/
   font-size: 16px;
   color: #000;
}
.mx-name-dropdownProfileDivConverter .mx-navigationlist .mx-navigationlist-item  a:hover {
   text-decoration:none;
   color: rgb(246, 146, 30);
}
.homepage-maincontent-placeholder .mx-scrollcontainer-wrapper {
   position:relative;
}
@media (min-width: 992px) {
   .mx-layoutcontainer .mx-placeholder .mx-layoutgrid {
      padding: 20px;
   }
}

.progress {
   margin-bottom: 0px !important;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 50px;
   border-top-left-radius: 50px;
   border-bottom-left-radius: 50px;
}

.homepage-base .content-container{
	background-color: #fff;
}
.homepage-base .mx-tabcontainer .mx-tabcontainer-tabs{
	margin-bottom: 0px !important;
}
.homepage-base .info-cell{
	height : 35px;
}

.homepage-statistics-graph-container {position:relative;}
.homepage-statistics-graph-row-header {height: 40px; z-index: 100;}
.homepage-statistics-graph-row-header .row { height: 100%;}
.homepage-statistics-graph-row-content {position: absolute; top: 50px; z-index: 1 !important; width: 100%; }
.homepage-buttons-joinclass { 
	height: 50px; 
	font-size: 20px; 
	color: #313131;
	padding-bottom: 10px;
	padding-top: 10px;
}

/********************************   END HOME PAGE HIEN *******************************************************************************************/



/********************************   Top 3 Community - NamNH *******************************************************************************************/

/*Numbering*/
.mx-name-table2 .homapage-base {
   counter-reset: section section2 section3;
}

span.mx-text.mx-name-text4::before {
   counter-increment: section;
   content: counter(section);
}

span.mx-text.mx-name-text9::before {
   counter-increment: section2;
   content: counter(section2);
}

span.mx-text.mx-name-text25::before {
   counter-increment: section3;
   content: counter(section3);
}

.mx-name-containerCommunity .mx-templategrid-item {
   border: none;
   padding: 0;
}

.mx-name-containerCommunity .mx-templategrid-item .mx-name-layoutGridCommunity {
   background-color: #F3FBFE;
   border-radius: 15px;
   margin-bottom: 15px ;
   border: 1px solid gray;
   margin-right: 30px;
   padding-top: 10px !important;
}

.mx-name-containerCommunity .mx-templategrid-item .mx-name-layoutGridCommunity div.row {
   margin-right: 0px;
   margin-left: 0px;
}


.mx-name-containerCommunity .mx-templategrid-row {
   margin-bottom: 20px ;
}


.homepage-bottom-right-area-text {
   font-size: 15px ;
   color: #B9B9B9;

}


.homepage-bottom-right-area-value, label {
   font-size: 18px;
   color: #838383;
   font-weight: normal;
}


/********************************   Top 3 Community  *******************************************************************************************/

/********************************* LINH UPDATE  *******************************************/
td.homepage-point-progress-bar .widget-progress-bar {width: 75% !important;}
td.homepage-point-progress-bar .widget-progress-bar .progress {height: 15px;}
.homepage-bottom-left-area-title-text {text-align:right;}
.homepage-bottom-left-area-title-text > img {display: initial !important;}
.btn-lg img {
    height: calc(14px + 14px) !important;
}
#ssoButton {background-color: #fff !important;}
table.homepage-currentsession-container-table > tbody > tr > td {padding: 4px 8px 0px 8px;}
table.homepage-currentsession-container-table > tbody > tr:first-child > td {padding-top: 20px;}
table.homepage-currentsession-container-table > tbody > tr > td:first-child { padding-left: 30px; }
.region-content {background-color: #e6ebf0;}
.mx-scrollcontainer-middle {margin-top:5px; background-color: #fff;}

.wh-beginner-progress-bar,
.wh-advanced-progress-bar,
.wh-professional-progress-bar,
.wh-expert-progress-bar {
	padding-top:15px;
}
.wh-beginner-progress-bar .progress,
.wh-advanced-progress-bar .progress,
.wh-professional-progress-bar .progress,
.wh-expert-progress-bar .progress {
	border-radius: 0px;
}
.wh-beginner-progress-bar .progress {
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
}
.wh-expert-progress-bar .progress {
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
}
.wh-beginner-progress-bar .progress-bar-success {
	 background-color: #8cc63f !important;
}
.wh-advanced-progress-bar .progress-bar-success {
	 background-color: #5da73c !important;
}
.wh-professional-progress-bar .progress-bar-success {
	 background-color: #2f873a !important;
}
.wh-expert-progress-bar .progress-bar-success {
	 background-color: #006837 !important;
}
.topbar-pin-grid .mx-templategrid-row {float:right;}
.topbar-pin-grid .mx-templategrid-item {width: 50px !important;}
.topbar-pin-grid .mx-templategrid-empty {width: 0px;}
.imageViewerPin {float: right;}
/********************************   Reward  *******************************************************************************************/


.mx-templategrid-empty-reward
{
	display:none;
}

.mx-name-actionButtonLogin>img
{
	margin-top: 5px;
}

	
.mx-name-groupBoxLogin .glyphicon-plus:before 
{
	content: "\e252"; 
}

.mx-name-groupBoxLogin .glyphicon-minus:before 
{
	content: "\e253";
}

.mx-name-groupBoxLogin>h2
{
	background: #FFF!important;
	border-color: #FFF!important;
	font-family: "Titillium Web", sans-serif!important;
	font-weight: normal!important;
	color: #004A7F!important;
	font-size: 14px!important;
	line-height: 1.42857143!important;
	padding-left: 0px!important;
}

.mx-name-groupBoxLogin>div
{
	background: #FFF!important; /*#F5F8FD*/
	border-color: #FFF!important;
}



.mx-scrollcontainer-left
{
	background-color: #1e4b9b!important;
}

.mx-navigationtree .navbar-inner ul li a:hover {
   border-left: solid #f8df24 5px;
   border-bottom: solid #8cd5f6 1px;
   border-right: solid #8cd5f6 0px;
   border-top: solid #8cd5f6 1px; 
   background-color: #8cd5f6 !important;
   /*
   color: #525252 !important;
   font-weight: bolder;
   */
}



.mx-placeholder
{
	overflow-y: hidden;
}

.mx-name-layoutGridLogin
{
	padding: 0px!important;
}

.mx-name-layoutGridLogin>div>div
{
	padding-left: 0px;
}

.mx-name-containerLogin1 div
{
	height:100%!important;
}

.mx-name-imageLogin1
{
	height:100%!important;
}

.img-logo{
   width: 125px;
   padding-top: 6px;
   margin-right: 10px;
   margin-left: auto;
   float: left;
}

.mx-navigationtree-has-items a
{
	font-size: 18px!important;
}


.mx-navigationtree,	
.mx-navigationtree .navbar-inner ul li a,	
.mx-navigationtree > ul li a:hover, .mx-navigationtree > ul li a:focus, .mx-navigationtree > ul li a.active,
.mx-navigationtree li.mx-navigationtree-has-items > ul li a,
.mx-navigationtree li.mx-navigationtree-has-items > ul li a:hover, .mx-navigationtree li.mx-navigationtree-has-items > ul li a:focus, .mx-navigationtree li.mx-navigationtree-has-items > ul li a.active {
   background-color: #1e4b9b!important;
   color: #FFF!important;
   font-weight: normal;
   font-size: 18px!important;
}

.grid-top-bar a {border-bottom: 5px solid #fff;font-size: 18px!important;}

.homepage-base h6
{
	font-size: 18px!important;
}

.mx-name-templateGrid1 .mx-templategrid-item
{
	border-width: 0px;
	background-color: transparent;
}

.role-user
{
	margin: 0px !important;
}

.templateGridUserRole .mx-templategrid-item
{
	padding: 0px !important;
	border-width: 0px!important;
}

.warehouse-videopopup-layout-container .mx-window-body
{
	overflow: hidden;
}

.warehouse-videopopup-layout-container .mx-name-layoutGrid1
{
	overflow: hidden;
}

.role-administrator .modal-dialog .mx-name-layoutGrid1
{
	overflow: hidden;
}
.hidden-cell {
   visibility: hidden;
}
/********************************* DUC UPDATE NEW STYLE FOR LOGIN PAGE *******************************************/
.loginpage-header {
   height: 8%;
   width: 100%;
   background-color: #1e274a;
}
.loginpage-header-image-logo{
   height: 100%;
   width: auto;
   padding: 15px;
   background-color: #fff;
}
.loginpage {
   height: 87%;
   width: 100%;
}
.loginpage-image1 {
   background-image: url(images/login_image.jpg);
   background-size: 100%;
   background-position: bottom;
}
.icon-usermanual {
   height: 3%;
   width: auto;
   margin-top: 39px;
}
.button-usermanual {
   width: 100px;
   margin-top: 44px;
   margin-left: -17px; 
   color: #ee7656;
}
.loginpage-footer {
   height: 5%;
   width: 100%;
   background-color: #1e274a;
}
.loginpage-footer-copyright {
   height: 100%;
   width: 50%;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #034991;
}
.rct-tree-root {
   margin-left: -27px;
}
.rct-tree-item-li {
   margin-left: 15px;
   font-family: "Noto Sans", sans-serif !important;
}
.rct-tree-item-button {
   padding-left: 20px;
   margin: 3px 0px;
   height: max-content;
   position: relative;
   left: -7px;
   font-family: "Noto Sans", sans-serif;
   color: #000;
}
.rct-tree-item-button:hover {
  background-color: unset;
  font-weight: bold;
  color:#146ff4;
}
.react-complex-tree-widget .rct-tree-item-title-container-selected .rct-tree-item-button {
    background-color: unset;
    font-weight: bold;
    color: #000;
}
.btn-anonymous {display: none;}
.content-editor .large-image {
   max-width: 90%;
   height: auto;
   position: relative;
   left: 5%;
}
.content-editor .medium-image {
   max-width: 70%;
   height: auto;
   position: relative;
   left: 15%;
}
.content-editor .small-image{
   max-width: 40%;
   height: auto;
   position: relative;
   left: 30%;
}
.content-editor h1 {
   font-family: "Noto Sans", sans-serif !important;
   font-weight: 900 !important;
   font-size: xx-large !important;
}
.content-editor h2 {
   font-family: "Noto Sans", sans-serif !important;
   font-weight: 900 !important;
   font-size: x-large !important;
}
.content-editor h3 {
   font-family: "Noto Sans", sans-serif !important;
   font-weight: 900 !important;
   font-size: large !important;
}
.content-editor span {
   font-family: "Noto Sans", sans-serif !important;
}
.breadcrumb {
   font-family: "Noto Sans", sans-serif !important;
}
a.mx-link.mx-name-actionButton3.backbutton {
   display: flex;
   direction: rtl;
   align-items: baseline;
}
.mx-icon-lined.mx-icon-double-chevron-right {
   margin-left: 3px;
}   
.feedback {
   padding: 10px 8px;
   font-size: 16px;
   display: inline-flex;
   align-content: center;
   border: none;
   border-radius: 4px 4px 0 0;
   background-color: #264ae5;
   z-index: 1000004;
   color: #ffffff;
   line-height: 12px;
   position: fixed;
   top: 50%;
   right: -28px;
   transform: rotate(-90deg);
   box-shadow: -2px 0 4px 0 rgba(0, 0, 0, 0.3);
}
.pdf-overview .mx-datagrid table tbody tr.selected td, .mx-datagrid table tbody tr.selected:hover td {
    color: #164ff4;
    font-weight: bold;
    background-color: #9ddaf5 !important;
}
.pdf-overview tr:hover {
   color: #164ff4;
   font-weight: bold;
}
/********************************* DUC END UPDATE *******************************************/