* {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}

input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
    cursor: pointer;
}

input[type='checkbox'] {
    width:18px;
    height:18px;
}

*:focus {
    outline: none;
}

textarea{
    vertical-align:top;
}

.text_long_url{
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ccc;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #ccc;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #ccc;
}

/*
::-webkit-scrollbar
{
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.5);
}
*/



body
{
	font-family: arial, verdana, tahoma, sans-serif, helvetica;
	font-size: 15px;
	color: #666666;
	background-color:#ffffff;
	padding:0px;
    margin:0px;
    font-weight:normal;
    

    /*max-width:1020px;
    margin:auto;
    background-color:#ccc;
        
*/
}

.text_arial{
	font-family: arial, verdana, tahoma, sans-serif, helvetica;
	font-size: 15px;
	color: #666666;
}

input::-webkit-input-placeholder {
    color: #ccc !important;
}
					
input:-moz-placeholder { /* Firefox 18- */
    color: #ccc !important;  
}
					
input::-moz-placeholder {  /* Firefox 19+ */
    color: #ccc !important;  
}
					
input:-ms-input-placeholder {  
color: #ccc !important;  
}


.body_container{
    margin:10px;overflow-y:hidden;
}

.text_27{
    font-size:27px;
}

.text_22{
    font-size:22px;
}

.text_24{
    font-size:24px;
}

.text_30{
    font-size:30px;
}

.text_20{
    font-size:20px;
}

.text_18{
    font-size:18px;
}

.text_16{
    font-size:16px;
}

.text_12{
    font-size:12px;
}

.text_10 {
    font-size: 10px;
}

.text_14{
    font-size:14px;
}
.text_black{
    color:#000;
}

.text_body {
    color: #666666;
}
.text_org{
    color:orange;
}
.text_green {
    color: #1ab394;
}
.text_blue{
    color:#1d9be0;
}

.text_link {
    color: #1d9be0;
    cursor: pointer;
    display: inline-block;
}

.text_red
{
    color:#ff0000;
}

.text_gray{
    color:#cdd1d4;
}

.text_dark_gray{
    color:darkgray;
}

.text_dark_slate_gray{
    color:darkslategray;
}

.text_white{
    color:white;
}

.text_light_green{
    color:#39CCCC;
}

.text_wave{
    color:#66a5ad;
}

.text_yellow{
    color:#ffd800;
}

.text_pear_green {
    color: #739f3d
}

.text_deep_sky_blue {
    color: deepskyblue;
}

.text_canceled {
    color: #ccc;
    text-decoration: line-through;
}

.border_red {
    border: 1px solid red;
}

.text_breadcrumbs {
    color: #1d9be0;
}

.border_vip_org {
    border: 2px solid orange;
}

.border_vip_green {
    border: 2px solid #20c063;
}

.border_vip_blue {
    border: 2px solid #1d9be0;
}

.border_bottom_org{

    border-bottom: 1px solid orange;
}

.border_bottom_blue{
    border-bottom: 1px solid #1d9be0;
}

.border_bottom_green{
    border-bottom: 1px solid #20c063;
}

.border_bottom_light_green{
    border-bottom: 1px solid #39CCCC;
}

.bg_white{
    background-color:#ffffff;
}

.bg_gray {
    background-color: #f8f9fa;
}

.bg_dark_slate_gray {
    background-color: darkslategray;
    color: white;
}

.bg_dark_slate_gray a {
    color: white;
}

.bg_dark_slate_gray div {
    color: white;
}

.bg_ocean {
    background-color:#7d4427;
    color:white;
}

.bg_ocean a{
    background-color:#7d4427;
    color:white;
}

.bg_smoke{
    background-color:#F7F9F9;
}


.bg_green {
    background-color: #20c063;
    color: white;
}

.bg_green a{
    color:white;
}

.bg_light_green{
    background-color:#39CCCC;
    color:white;
}

.bg_deep_sky_blue {
    background-color: deepskyblue;
}

    .deepskyblue a {
        color: white;
    }

.bg_deep_sky_blue a {
    color: white;
}

.bg_deep_sky_blue div {
    color: white;
}

.bg_wave{
    background-color:#66a5ad;
    color:white;
}

.bg_wave a{
    background-color:#66a5ad;
    color:white;
}

.bg_yellow{
    background-color:#ffd800;
}

.bg_pear_green{
    color:white;
    background-color:#739f3d;
}

.bg_pear_green a{
    color:white;
}

.border_gray {
    border: solid 1px #d6d6d6;
}

.border_smoke {
    border: solid 1px #e7e7e7;
}


.border_green{
    border-style:solid;
    border-width:1px;
    border-color:#20c063;
}

.bg_note{
    background-color:lemonchiffon;
    text-align:justify;
}

.note_container {
    background-color: lemonchiffon;
    text-align: justify;
    border:dashed 1px gray;
}
.bg_autumn{
    background-color:#763626;
    color:white;
}

.bg_autumn a{
    color:white;
}

.bg_granit{
    background-color:#b7b8b6;
    color:white;
}

.bg_granit a{
    color:white;
}

.bg_black{
    background-color:#000000;
    color:white;
}

/*.bg_black a{
    color:white;
}*/
.bg_dark_blue{
    background-color:#0063BB;
    color:white;
}

.bg_dark_blue a{
    color: white;
}


.text_dark_blue {
    color: #0063BB;
}

.bg_blue{
    background-color:#1d9be0;
    color:white;
}

.bg_blue a{
    color:white;
}

.bg_active{
    background-color:#D5F5E3;
}

.bg_active a{
    background-color:#D5F5E3;
}

.bg_poppy{
    background-color:#ff420e;
    color:white;
}

.bg_poppy a{
    color:white;
}

.border_org{
    border-color:orange;
}

.bg_org{
    background-color:orange;
    color:white;
}

.bg_org a{
    color:white;
}

.bg_red{
    background-color:#ff0000;
    color:white;
}

.bg_red a{
    color:white;
}

.bg_violet{
    background-color:violet;
    color:white;
}

.bg_violet a{
    background-color:violet;
    color:white;
}

.bg_light_violet{
    background-color:#D7BDE2;
    color:white;
}

.expired_post{
    /*text-decoration:line-through;*/

}

.expired_post a{
     
}

hr{
	height:1px;
	border-style:none;
	padding:0px;
	margin:0px;
}

.text_poppy{
    color:#ff420e;
}

.text_slogan{
    font-family: 'Oswald', sans-serif;
    font-weight:400;
}

.text_slogan_200{
    font-family: 'Oswald', sans-serif;
    font-weight:200;
}

#topBreadCrumbs{
    font-family: 'Oswald', sans-serif;
    font-weight:400;
}

#topBreadCrumbs a{
    font-family: 'Oswald', sans-serif;
    font-weight:400;
}

h1
{
    font-family:'Oswald', sans-serif;
    font-weight:400;
	font-size: 30px;
    color:darkslategray;
    padding:0px;
    margin:0px;
}

h2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 25px;
    color: darkslategray;
    padding: 0px;
    margin: 0px;
}

h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: darkslategray;
    padding: 0px;
    margin: 0px;
}

a
{
    font-family:'Open Sans', Helvetica,Arial,sans-serif;
    color:darkslategray;
    text-decoration:none;
}

a:hover {
    color: #1ab394;
}

/*p{
    padding:0px;
    margin:0px;
}*/

th{
    font-weight:normal;
    text-align:left;
}

ul {
	line-height: 1.5em;
	list-style-type:square;
	margin: .3em 0 .3em 1.8em;
	padding: 0;
}

ol {
	line-height: 1.5em;
	margin: .3em 0 0 3.2em;
	padding: 0;
}

li 
{
	padding:0px;
	margin-bottom:10px;
	vertical-align:middle;
}

hr
{
	color:#f5f5f5;
	background-color:#f5f5f5;
	height:1px;
	border-style:none;
	padding:0px;
	margin:0px;
}

#outerMainContainer {
    display:grid;
    grid-template-columns:100px auto;
    height:100vh;
}

#mainContainer{padding:20px;}
#popupContainer{margin:10px}


.member_txt{
    color: #3b4144;
    height: 38px;
    width:100%;
    outline: none;
    font-weight: 400;
    padding: .6em .7em .5em;
    border:1px solid #aaa;
    border-radius:4px;
}

.member_textarea{
    color: #3b4144;
    width:100%;
    outline: none;
    font-weight: 400;
    padding: .6em .7em .5em;
    border:1px solid #aaa;
    border-radius:4px;
}

#txtQuery {
    color: #3b4144;
    height: 38px;
    width: 100%;
    max-width:600px;
    font-weight: 400;
    padding: .6em .7em .5em;
    border: 1px solid #1ab394;
    border-radius:3px;
}

#memberLoginFormContainerDiv{
    width:600px;
}

#memberLoginFormLeftColumn{
    display:table-cell;
    width:148px;
    vertical-align:middle;
}

#memberLoginFormButtonDiv {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 2px;
    padding-left: 148px;
}

#memberLoginFormTitleDiv{
    display:table-cell;vertical-align:baseline;
}

#memberLoginFormForgotPasswordLinkDiv{
    display:table-cell;text-align:right;vertical-align:baseline;
}

#headerMobileMenuLinkDiv{
    float:right;
}

#headerMobileMenuLink{
    border-radius: 3px !important;
    padding: 0px 4px 0px 4px;
    vertical-align:middle;
    background-color:red;
    color:white;
    border:1px solid red;
    display:inline-block;
    text-align:left;
    display:none;
}
#headerMobileMenuLink a{
    color:white !important;
}

#headerMobileMenuLink:hover{
    color:white;
    background-color:red;
    border-color:red;
}

.pager_item{
    display:inline-block;
    margin-left:1px;
    margin-right:1px;
    margin-bottom:3px;
    padding:5px;
    border:solid 1px #76D7C4;
    border-radius:3px;
    text-align:center;
}

.pager_item:hover{
    color:white;
    background-color:#76D7C4;

}

.pager_active{
    display:inline-block;
    margin-left:1px;
    margin-right:1px;
    margin-bottom:3px;
    padding:5px;
    border:solid 1px #76D7C4;
    border-radius:3px;
    background-color:#76D7C4;
    color:white;
    text-align:center;
}


#copyrightDiv{
    float:left;
}

#moveTopDiv{
    float:right;
    text-align:right;
}

.main_iframe_default{
    width:100%;
    height:100%;
    border:none;
}

.rounded_bg{
    padding:5px;
    padding-left:10px;
    padding-right:10px;
    display:inline-block;
    border-radius:4px;
}

#accountManagementDiv{
    float:left;
}

.ui-autocomplete {
    max-height: 600px;
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
}

.left_menu_item {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    color: white;
    display:block;
}

.left_menu_item :hover {
    /*background-color: #293846;*/
    background-color: #28306a;
}

.left_menu_item_active {
    /*background-color: #293846;*/
    background-color: #28306a;
}

.left_menu_item_active div{
    color: orange;
}

.left_menu_bg {
    /*background-color: #2f4050;*/
    background-color: #2992d0;
    color:white;
}

.left_menu_bg a {
    color: white;
}

.pending_overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.2);

    /*background-color:black;
    background-image:url('http://ttgdqp.edu.vn/skin/defaultskin/images/bg/expired-stamp.png');
    background-repeat:repeat;*/
}

.image_highlight_border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    border: solid 5px orange;
}

.post_edit_image_container {
    padding: 10px;
    margin: 1px;
    float: left;
    max-width: 200px;
}

.post_edit_image {
    height: 100%;
    max-height: 200px;
    border: none;
    border-width: 0px;
    /*    max-width:100%;
*/ /*display: inline-block;*/
}

.student_icon {
    width: 100px;
    height: 100px;
    border: solid 1px #2992d0;
    border-radius: 50%;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    cursor: pointer;
    background:none;
}

.student_icon:hover {
    border: solid 1px #fdb714;
    background-color: #fdb714;
}

.icon_picker_area{
    display:none;
}