html {
	height: 70%;
    font-weight: 300;
    font-size: 14px;
    line-height: 18px;
}

body {
	/* background-color: #FFCC00; */
	background-color: #eff3f6;
	/* background-image: linear-gradient(to bottom, #ffffff , #dedada47); */
	background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    font-family: 'Kanit', sans-serif;
	color: #000000;
    height: 70%; 
    position: relative;
}

.pageloader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;
    /* background: url('../../images/Dual Ring-1s-200px.gif') 50% 50% no-repeat rgb(249, 249, 249); */
    background:rgb(249, 249, 249);
    opacity: 1;
}

/* Default (Mobile first) */
header {
    width: 100%;
    padding: 15px 0;
    background: transparent;
    /* border-bottom: 1px solid #c2cdcf6e; */
    /* animation magic */
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    z-index: 9999;
    top: 0;
    position: fixed;
}

header h1 {
    font-size: 20px;
    text-indent: 30px;
    font-weight: bold;
    text-align:center;
}

.shrink { 
    padding: 8px 0; 
    background: #3191ce;
    border-bottom: none;
    box-shadow: 0px 1px 1px #a1a5a0;
}

.shrink > h1 { 
    color:#fff;
    font-size: 18px;
    text-indent: 26px; 
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
}

.container {
    width: 90%;
    margin: 90px auto 15px;
    font-size: 16px;
    line-height: 1.8;
}

footer {
    text-align: center;
    font-size: 10px;
    padding: 15px 3px;
    text-transform: uppercase;
}

footer > a:link {
    color: #000000;
    text-decoration: none;
}

/* visited link */
footer > a:visited {
    color: #000000;
}

/* mouse over link */
footer > a:hover {
    color: #000000;
}

/* selected link */
footer > a:active {
    color: #000000;
}

/* Nav Container */
.nav-container {}
.nav-container > .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 47px;
}
.shrink .nav-container > .inner {
    min-height: 35px;
}

.nav-container > .inner > * {}

/* Menu Bar Contaniner */
.nav-container > .inner > .menu-container {
    padding: 0 5px 0 15px;
}
.menu-container > .inner > .hamburger-bar {
    font-size: 20px;
    display: block;
}
.shrink .menu-container > .inner > .hamburger-bar {
    color: #fff;
    font-size: 18px !important;
}

.menu-container > .inner > .menu-bar-card {
    /* display: none; */
}

.menu-bar-card {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #3191ce;
    overflow-y: hidden;
    transition: 0.5s;
}

.menu-bar-card > .overlay-content {
    position: relative;
    text-align: center;
    margin-top: 15px;
    padding: 0 15px;
}

.menu-bar-card > .overlay-content > .item {
    font-size: 18px;
    font-weight: 300;
    line-height: 23px;
    border-bottom: 1px solid #d0cccc21;
    padding: 18px 10px;
    text-decoration: none;
    /* text-transform: uppercase; */
    color: #FFFFFF;
    display: block;
    transition: 0.3s;
    cursor: pointer;
}
.menu-bar-card > .overlay-content > .item:last-child {
    border-bottom: none;
}
.menu-bar-card > .overlay-content > .item.-active > span {
    border-bottom: 3px solid #3191ce;
    padding: 2px 0;
}

.menu-bar-card > .overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
}
.menu-bar-card > .overlay-header > * {}
.menu-bar-card > .overlay-header > .close-btn {
    font-size: 42px;
    display: block;
    cursor: pointer;
    color: #FFFFFF;
    margin-top: -10px;
}
.menu-bar-card > .overlay-header > .logo-black {
    width: 155px;
}

.menu-bar-card > .overlay-content > a:hover, .menu-bar-card > .overlay-content > a:focus {
    color: #3191ce;
}
/* Language Containner */
.language-container {}
.language-container > .inner {}
.language-container > .inner > .item {
    color: #3191ce;
    font-size: 18px;
    font-weight: 500;
}
.shrink .language-container > .inner > .item {
    color: #ffffff;
    font-size: 16px;
}
.language-container > .inner > .item.-active {
    color: #e1473d;
}

.shrink .language-container > .inner > .item.-active {
    color: #e1473d;
}

/* Logo Container */
.nav-container > .inner > .logo-container {
    /* flex-grow: 1;
    text-align: center; */
    padding: 0 15px 0 5px;
}

.logo-container {}

.logo-container > img {
    width: 228px;
}
.logo-container > .logo-white {
    display: none;
}
.shrink .logo-container > .logo-white {
    display: initial;
    width: 170px;
}
.logo-container > .logo-black {
    display: initial;
}
.shrink .logo-container > .logo-black {
    display: none;
    width: 42px;
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-container > .inner {
    width: 100%;
}
.login-container > .inner > .box-header {
    width: 100%;
    text-align: center;
}
.login-container > .inner > .box-header > .image {
    width: 200px;
}
.login-container > .inner > .box-body {}
.login-container > .inner > .box-body > .box-title {}
.login-container > .inner > .box-body > .box-form {

}
.login-container > .inner > .box-body > .box-form > .item {
    padding: 10px 0;
}

.event-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.event-card > .inner {
    padding: 15px;
}
.event-card > .inner > .e-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.event-card .e-header > .date-time > i {
    margin-right: 4px;
    font-size: 18px;
    line-height: 30px;
    color: #f14b59;

}
.event-card .e-header > .date-time {
    margin: 0;
    position: relative;
    display: block;
    font-size: 16px;
    line-height: 30px;
    color: #212639;
    font-weight: 500;
}
.event-card .e-header > .action > button {
    margin: 0;
}
.event-card > .inner > .e-body {
    margin: 15px 0;
}
.event-card .e-body > .title {
    color: #212639;
    font-size: 18px;
    margin: 0;
}
.event-card .e-body > .description {
    font-size: 15px;
    line-height: 26px;
    color: #848484;
    font-weight: 400;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.event-card > .inner > .e-footer {}
.event-card .e-footer > .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #444444de;
    margin-top: 15px;
}
.event-card .e-footer > .item > p {
    margin: 0;
}
.event-card .e-footer > .item > .type {
    background-color: #FF9800;
    color: white;
    padding: 2px 5px;
    border-radius: 4px;
    font-weight: 300;
}
.event-card .e-footer > .item > button {
    padding: 0 15px;
    display: block;
}
.content-center{
    justify-content: center!important;
}
.text-center{
    text-align: center!important;
}
.form-participants{
    min-height: 400px;
}
.mt-5{
    margin-top: 5rem!important;
}
.mb-2{
    margin-bottom: 2rem!important;
}
.mb-5{
    margin-bottom: 5rem!important;
}
.pull-right{
    float: right!important;
}

/*------------------[Start] custom theme calendar ------------------------*/
.timedSheet{
    width: 100%;
}

.timedSheet.timedsheet-type-1 .TimeSheet-colHead{
    width: 5%;
    text-align: center;
    min-width: 52px;
}
.timedSheet.timedsheet-type-2 .TimeSheet-colHead{
    width: 20%;
    text-align: center;
}
.timedSheet .TimeSheet-head{
    min-width: 105px;
}
.TimeSheet .TimeSheet-Weekend{
    background-color: rgba(204,204,204,0.2)!important;
}
/*------------------[End] custom theme calendar ------------------------*/

.event-card-detail {}
.event-card-detail > .inner {}
.event-card-detail > .inner > .e-header {
    /* min-height: 330px; */
    position: relative;
    width: 100%;
    padding-bottom: 75%;
}
.event-card-detail > .inner > .e-header > .content {
    width: 100%;
    text-align: center;
    color: white;
    background-image: linear-gradient(#00000000, #0000009e);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 0;
}
.event-card-detail > .inner > .e-header > .content > .title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    padding: 0 5px;
    margin: 0;
}
.event-card-detail > .inner > .e-header > .content > .date {
    font-size: 14px;
    padding: 0 5px;
    margin: 10px 0 0;
    font-weight: 300;
}
.event-card-detail > .inner > .e-header > .action {
    position: absolute;
    bottom: 5px;
    text-align: center;
    width: 100%;
}
.event-card-detail > .inner > .e-header > .action > .button {
    color: #FFF !important;
}
.event-card-detail > .inner > .e-body {}
.event-card-detail > .inner > .e-body > .description {
    margin: 20px 0 5px;
}
.event-card-detail > .inner > .e-body > .group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    text-transform: uppercase;
    color: #72737c;
}
.event-card-detail > .inner > .e-body > .group > .box {
    padding: 0;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 3px;
}
.event-card-detail > .inner > .e-body > .participants-box {
    margin-top: 20px;
}
.event-card-detail > .inner > .e-body > .participants-box > .box-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #363639;
}
.event-card-detail > .inner > .e-body > .participants-box > .box-header > .name {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
}
.event-card-detail > .inner > .e-body > .participants-box > .box-header > .line {
    margin: 0 10px;
    flex-grow: 2;
    height: 1px;
    background-color: #3d3d40;
}
.event-card-detail > .inner > .e-body > .participants-box > .box-header > .number {
    width: 42px;
    height: 42px;
    line-height: 42px;
    font-size: 12px;
    text-align: center;
    background-color: #3d3d40;
    color: #fff;
    border-radius: 50%;
}
.event-card-detail > .inner > .e-body > .participants-box > .box-body {
    padding: 15px 10px;
}
.event-card-detail > .inner > .e-body > .participants-box > .box-body > .item {
    background-color: #00000005;
    box-shadow: 0px 0px 1px 0px #00000014;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-start;
}
.event-card-detail > .inner > .e-body > .participants-box > .box-body > .item:last-child {
    margin-bottom: 0;
}
.event-card-detail > .inner > .e-body > .participants-box > .box-body > .item > .photo {
    min-width: 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
}
.event-card-detail > .inner > .e-body > .participants-box > .box-body > .item > .content {
    margin-left: 15px;
}
.event-card-detail > .inner > .e-body > .participants-box > .box-body > .item > .content  > .name {
    padding: 0;
    margin: 0;
}
.event-card-detail > .inner > .e-body > .participants-box > .box-body > .item > .content  > .group {
    font-size: 12px;
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    color: #3d3d40de;
}
.event-card-detail > .inner > .e-body > .participants-box > .box-body > .item > .content  > .group > .box {
    margin-right: 10px;
}
.event-card-detail > .inner > .e-body > .participants-box > .box-body > .item > .content  > .group > .box:last-child {
    margin-right: 0;
}
.event-card-detail > .inner > .e-body > .group > .box:last-child {
    margin-right: 0;
}

.event-card-detail > .inner > .e-body > .participants-box > .box-body > .item > .content > .note {
    font-size: 12px;
    margin: 0;
}
.event-card-detail > .inner > .e-footer {}

.data-matching-box {
    margin-top: 20px;
}
.data-matching-box > .box-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #363639;
}
.data-matching-box > .box-header > .name {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
}
.data-matching-box > .box-header > .line {
    margin: 0 10px;
    flex-grow: 2;
    height: 1px;
    background-color: #3d3d40;
}
.data-matching-box > .box-header > .number {
    width: 42px;
    height: 42px;
    line-height: 42px;
    font-size: 12px;
    text-align: center;
    background-color: #3d3d40;
    color: #fff;
    border-radius: 50%;
}
.data-matching-box > .box-body {
    padding: 15px 10px;
}
.data-matching-box > .box-body > .item {
    padding: 15px;
    border-radius: 4px;
    background-color: #00000003;
    box-shadow: 0px 0px 1px 0px #00000014;
    margin-bottom: 30px;
}
.data-matching-box > .box-body > .item:last-child {
    margin-bottom: 0;
}

.data-matching-box .day-card {}
.data-matching-box .day-card > .inner {}
.data-matching-box .day-card > .inner > .box-header {
    margin: 0;
    padding: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
}
.data-matching-box .day-card > .inner > .box-body {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.data-matching-box .day-card > .inner > .box-body > .item-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* flex-wrap: wrap; */
    width: calc(100% - 17px);
    border: 1px solid #3191ce;
    margin-right: 15px;
    margin-bottom: 15px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    color: #000;
    background-color: #FFF;
}
.data-matching-box .day-card > .inner > .box-body > .item-between.-active {
    color: #FFF;
    background-color: #3191ce;
}
.data-matching-box .day-card > .inner > .box-body > .item-between:last-child {
    margin-right: 0;
}
.data-matching-box .day-card > .inner > .box-body > .item-between > .box {
    display: block;
    padding: 5px;
    width: calc(50% - 12px);
}
.data-matching-box .day-card > .inner > .box-body > .item-between > .box:first-child {
    border-right: 1px solid #3191ce;
}
.data-matching-box .day-card > .inner > .box-body > .item-between.-active > .box:first-child {
    border-right: 1px solid #FFF;
}
.data-matching-box .day-card > .inner > .box-body > .item-between > .box > .title {
    border-bottom: 1px solid #3191ce;
    margin: 0;
	padding: 0;
	font-size: 13px;
}
.data-matching-box .day-card > .inner > .box-body > .item-between.-active > .box > .title {
    border-bottom: 1px solid #FFF;
}
.data-matching-box .day-card > .inner > .box-body > .item-between > .box > .number {}
.data-matching-box .day-card > .inner > .box-body > .item-between > .box > .select-box {}
.data-matching-box .day-card > .inner > .box-body > .item-between.-active > .box > .select-box {}
.data-matching-box .day-card > .inner > .box-body > .item-between > .box > .select-box > .text {
    display: block;
    width: 100%;
}
.data-matching-box .day-card > .inner > .box-body > .item-between.-active > .box > .select-box > .text {
    display: none;
}
.data-matching-box .day-card > .inner > .box-body > .item-between > .box > .select-box > .icon {
    display: none;
}
.data-matching-box .day-card > .inner > .box-body > .item-between.-active > .box > .select-box > .icon {
    display: block;
    font-size: 20px
}

.select-item-card {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px 0px;
}
.select-item-card > .item {
	margin-right: 15px;
	text-align: center;
	padding: 15px 26px;
	border-radius: 4px;
	text-shadow: 2px 2px rgba(0,0,0,0.2);
	box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
}
.select-item-card > .item > .icon {
	font-size: 24px;
}
.select-item-card > .item > .text {
	font-size: 14px;
	margin: 10px 0 0 0;
}

.select-item-card > .item:last-child {
	margin-right: 0;
}

.select-item-card > .item.-blue {
	background-color: #3191ce;
	color: #FFF;
}

.select-item-card > .item.-orange {
	background-color: orange;
	color: #FFF;
}

.indentify-calendar .box-form {
    width: 100%;
}
.indentify-calendar .event-card-detail > .inner > .e-body > .participants-box > .box-body {
    padding: 0;
}

.timedSheet.timedsheet-type-1 .TimeSheet-colHead {
    min-width: 34px !important;
}

.error-handler-container {}
.error-handler-container > .content-error-page {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-bottom: 1px solid lightslategrey;
}
.error-handler-container > .content-error-page > .text-headline {
    /* color: #FF9800; */
    width: 150px;
    height: 150px;
    border: 1px solid lightslategrey;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
}
.error-handler-container > .content-error-page > .text-error-content {}
.error-handler-container > .content-error-page > .text-error-content > .title {
    /* color: #FF9800; */
    text-align: center;
}
.error-handler-container > .content-error-page > .text-error-content > .description {}
.error-handler-container > .content-error-page > .text-error-content > .description > a {
    color: dodgerblue;;
}

.tracking-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.tracking-container > .inner {
    width: 100%;
}
.tracking-container > .inner > .tracking-header {
    text-align: center;
}
.tracking-container > .inner > .tracking-header > .title {
    margin: 0 0 2px;
    padding: 0;
    font-size: 26px;
    line-height: 30px;
    font-weight: 500;
}
.tracking-container > .inner > .tracking-header > .description {
    margin: 0;
	padding: 0;
    font-size: 14px;
    font-weight: 300;
    color: #4a4949;
}
.tracking-container > .inner > .tracking-body {}
.tracking-container > .inner > .tracking-body > .tracking-form {
    text-align: center;
    margin-top: 25px;
}
.tracking-container > .inner > .tracking-body > .tracking-form > button {
    margin-top: 15px;
    border-radius: 28px;
    padding: 10px 15px;
    border: none;
}
.tracking-container > .inner > .tracking-body > .tracking-result {
    margin-top: 30px;
    width: 100%;
}
.tracking-container > .inner > .tracking-body > .tracking-result > table {
    font-size: 12px;
    line-height: 18px;
    font-weight: 300;
    border-collapse: collapse;
    width: 100%;
}

.tracking-container > .inner > .tracking-body > .tracking-result > table tr {
    height: 34px;
}
.tracking-container > .inner > .tracking-body > .tracking-result > table tr:hover {
    background-color: #dcdcdc47;
}
.tracking-container > .inner > .tracking-body > .tracking-result > table tr:hover a {
    color: dodgerblue !important;
}
.tracking-container > .inner > .tracking-body > .tracking-result > table th {
    font-size: 14px;
    border: 1px solid #848484;
    padding: 10px 5px;
    font-weight: 400;
}
.tracking-container > .inner > .tracking-body > .tracking-result > table th.-m-hide {
    display: none;
}
.tracking-container > .inner > .tracking-body > .tracking-result > table td {
    border: 1px solid #848484;
    text-align: left;
    padding: 5px;
}
.tracking-container > .inner > .tracking-body > .tracking-result > table td.-m-hide {
    display: none;
}
.tracking-container > .inner > .tracking-body > .tracking-result > table td.-text-center {
    text-align: center;
}
.tracking-container > .inner > .tracking-body > .tracking-result > table td.-text-right {
    text-align: center;
}

.tracking-container > .inner > .tracking-body > .tracking-loadmore {
    text-align: center;
}

.tracking-detail-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.tracking-detail-container > .inner {
    width: 100%;
}
.tracking-detail-container > .inner > .detail-header {
    text-align: center;
}
.tracking-detail-container > .inner > .detail-header > .title {
    font-weight: 400;
    margin: 15px 0 5px;
    padding: 0;
}
.tracking-detail-container > .inner > .detail-header > .description {
    font-weight: 300;
    margin: 0;
    padding: 0;
}
.tracking-detail-container > .inner > .detail-body {
    /* margin-top: 20px; */
    /* border-top: 1px solid #44444429; */
}
.tracking-detail-container > .inner > .detail-body > .detail-body-box {
    width: 100%;
}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .content-group {
    margin-top: 15px;
}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .content-group:first-child {
    margin-top: 0;
}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .content-group > .title {
    font-weight: 400;
    padding: 0;
    margin: 0;
}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .content-group > .description {
    font-weight: 200;
    font-size: 13px;
    padding: 0;
    margin: 0;
}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .title {
    font-weight: 500;
    border-bottom: 1px solid #4444441f;
    margin: 20px 0 15px;
}

.tracking-detail-container > .inner > .detail-body > .detail-body-box > .tacking-status {}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .tacking-status > .tracking-step-card {
    display: flex;
    justify-content: center;
}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .tacking-status > .tracking-step-card > .inner {
    width: 100%;
    padding-top: 5px;
}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .tacking-status > .tracking-step-card > .inner > .step-item {
    display: flex;
}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .tacking-status > .tracking-step-card > .inner > .step-item.-active {}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .tacking-status > .tracking-step-card > .inner > .step-item > .step-box {
    width: 55%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-direction: column;
}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .tacking-status > .tracking-step-card > .inner > .step-item > .step-box:first-child {
    width: 30%;
    align-items: flex-end;
}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .tacking-status > .tracking-step-card > .inner > .step-item > .step-box:nth-last-child(2) {
    width: 15%;
    justify-content: flex-end;
    align-items: center;
}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .tacking-status > .tracking-step-card > .inner > .step-item > .step-box > .title {
    padding: 0px;
    margin: 0;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .tacking-status > .tracking-step-card > .inner > .step-item > .step-box > .description {
    padding: 0px;
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    font-weight: 300;
    color: #363639;
}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .tacking-status > .tracking-step-card > .inner > .step-item > .step-box > .circle-line {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .tacking-status > .tracking-step-card > .inner > .step-item > .step-box > .circle-line > .circle {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #444444;
    width: 34px;
    height: 34px;
    border-radius: 50%;
}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .tacking-status > .tracking-step-card > .inner > .step-item.-active > .step-box > .circle-line > .circle {
    background-color: #0d4b72;
    border: 1px solid #0d4b72;
    color: #FFFFFF;
}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .tacking-status > .tracking-step-card > .inner > .step-item > .step-box > .circle-line > .circle > i {
    font-size: 16px;
}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .tacking-status > .tracking-step-card > .inner > .step-item > .step-box > .circle-line > .line {
    display: block;
    width: 1.2px;
    height: 50px;
    background-color: #444444;
}
.tracking-detail-container > .inner > .detail-body > .detail-body-box > .tacking-status > .tracking-step-card > .inner > .step-item.-active > .step-box > .circle-line > .line {
    background-color: #0d4b72;
}
.tracking-detail-container > .inner > .detail-footer {}

.igrid-containner {}
.igrid-containner > .inner {}
.igrid-containner > .inner > .item {
	width: 100%;
	height: auto;
    position: relative;
    margin: 5px 0;
}

.igrid-containner > .inner > .item > .middle {
	transition: .5s ease;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align: center;

	display: flex;
	justify-content: center;
	align-items: center;
}

.igrid-containner > .inner > .item > .middle > .text {
	color: white;
	font-size: 14px;
	color: #000000;
}
.igrid-containner > .inner > .item > .middle > .text > i {
	font-size: 26px;
	margin-bottom: 5px;
}
.igrid-containner > .inner > .item > .middle > .text > p {
	padding: 0;
	margin: 0;
}

.igrid-containner > .inner > .item:hover .blur {
	transition: .5s ease;
	opacity: 0.5;
	background-color:#FFFFFF;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.igrid-containner > .inner > .item:hover .middle {
	opacity: 1;
}

.banner-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: #f0f4f7;
    /* background-color: #eaebe6; */
    /* border-bottom: 15px solid #3191ce; */
}
.banner-container > .inner {
    margin: 130px 0 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 80%;
    /* background-color: #a1a5a0; */
}
.banner-container > .inner > .box {
    /* border: 1px solid red; */
    width: 50%;
    min-height: 500px;
}

.service-container {
    display: flex;
    justify-content: center;
}
.service-container > .inner {
    width: 100%;
}
.service-container > .inner > .box-header {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}
.service-container > .inner > .box-header > .title {
    margin: 0;
    text-align: center;
}
.service-container > .inner > .box-header > .hr-line {
    margin: 5px 0;
    display: block;
    width: 40px;
    height: 3px;
    background-color: #3191ce;
}
.service-container > .inner > .box-header > .description {
    margin: 0px;
    padding: 10px 10px 20px;
}
.service-container > .inner > .box-body {}
.service-container > .inner > .box-body > .item {
    text-align: center;
    border: 1px solid #4444441f;
    margin-top: 15px;
    padding: 15px 10px;
}
.service-container > .inner > .box-body > .item:first-child {
    margin-top: 0;
}
.service-container > .inner > .box-body > .item > .photo {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    box-shadow: 1px 1px 2px #888888;
    object-fit: cover;
}
.service-container > .inner > .box-body > .item > .title {
    margin: 20px 0 0;
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
    color: #353535;
}
.service-container > .inner > .box-body > .item > .description {
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    color: #929294;
    width: 100%;
    text-align: left;
}

.contact-us-container {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    background-color: #f5f5f4;
}
.contact-us-container.-hide {
    display: none;
}
.contact-us-container > .inner {
    width: 90%;
    padding: 30px 0px 40px;
}
.contact-us-container > .inner > .box-body {}
.contact-us-container > .inner > .box-body > .inner {}
.contact-us-container > .inner > .box-body > .inner > .boxs {
    width: 100%;
}
.contact-us-container > .inner > .box-body > .inner > .boxs:last-child {
    border-bottom: 10px solid #3191ce;
    padding-bottom: 25px;
    margin-top: 30px;
}

.privacy-policy-container {
    font-size: 14px;
    line-height: 24px;
}

.privacy-policy-container > h4 {
    margin-top: 30px;
}

.privacy-policy-container > h6 {
    font-size: 16px;
    line-height: 26px;
    font-weight: 600;
}

.table-default {
    width: 100%;
    border-collapse: collapse;
}
.table-default thead tr th{
    /* border-bottom: 1px solid #000000; */
    font-weight: 600;
    text-align: center;
}
.table-default th, .table-default td {
    border: 1px solid #999;
    padding: 0.5rem;
    text-align: left;
    vertical-align: top;
}
.table-default th, .table-default td { /* Added padding for better layout after collapsing */
    padding: 6px 8px;
}

.hyphenate {
    word-break: break-word;
}


/* Extra small devices (phones, 600px and down) "Custom style" */
@media only screen and (max-width: 600px) {
    body:after {
        content: "mobile";
        display: none;
    }
    .event-card > .inner {
        padding: 10px;
    }
    .event-card .e-header > .date-time {
        font-size: 11px;
    }
    .event-card .button.-small {
        font-size: 10px;
    }
    .event-card .e-footer > .item > .last-update {
        font-size: 10px;
    }
    .event-card .e-footer > .item > button {
        padding: 0px;
        min-width: 0px;
    }

    .logo-container > img {
        width: 47px;
        margin-bottom: -6px;
    }

    .shrink .logo-container > .logo-white {
        display: initial;
        width: 34px;
    }

    .menu-bar-card > .overlay-content > .item.-active > span {
        border-bottom: 3px solid #FFFFFF;
        padding: 2px 0;
    }

    .shrink .menu-bar-card > .overlay-content > .item.-active > span {
        border-bottom: 3px solid #FFFFFF;
    }

    .menu-bar-card > .overlay-content > a:hover, .menu-bar-card > .overlay-content > a:focus {
        color: #FFFFFF;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    body:after {
        content: "mobile-large";
        display: none;
    }

    .data-matching-box .day-card > .inner > .box-body > .item-between {
        width: calc(50% - 17px);
    }

    .logo-container > img {
        width: 47px;
        margin-bottom: -6px;
    }
    .shrink .logo-container > .logo-white {
        display: initial;
        width: 34px;
    }

    .menu-bar-card > .overlay-content > .item.-active > span {
        border-bottom: 3px solid #FFFFFF;
        padding: 2px 0;
    }

    .shrink .menu-bar-card > .overlay-content > .item.-active > span {
        border-bottom: 3px solid #FFFFFF;
    }

    .menu-bar-card > .overlay-content > a:hover, .menu-bar-card > .overlay-content > a:focus {
        color: #FFFFFF;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	body:after {
		content: "tablet";
		display: none;
	}

	header {
		padding: 40px 0;
	}

	header h1 {
		font-size: 30px;
		text-indent: 40px;
	}

	.shrink { 
		padding: 10px 0; 
	}

	.shrink > h1 { 
		font-size: 26px;
		text-indent: 36px;
	}

	.container {
		width: 90%;
		margin: 130px auto 15px;
	}

	footer {
		font-size: 12px;
	}

	.nav-container {
		display: flex;
    	justify-content: center;
	}
	.nav-container > .inner {
		width: 90%;
		justify-content: space-between;
	}

	/* Menu bar container */
	.nav-container > .inner > .menu-container {
		padding: 0 15px;
	}
	.menu-container > .inner > .hamburger-bar {
		display: none;
	}
	.menu-container > .inner > .menu-bar-card > .overlay-header {
		display: none;
	}
	.menu-bar-card {
		height: 100%;
		position: relative;
		z-index: 0;
		top: unset;
		left: unset;
		background-color: transparent;
		overflow-y: unset;
		transition: unset;
	}

	.menu-bar-card > .overlay-content {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
    	top: unset;
    	width: 100%;
    	text-align: unset;
    	margin-top: 0;
    	padding: 0;
	}

	.menu-bar-card > .overlay-content > .item {
		font-size: 16px;
		font-weight: 300;
		line-height: 18px;
		padding: 6px;
		border-bottom: none;
		text-decoration: none;
		/* text-transform: uppercase; */
		color: #000000;
		display: block;
		transition: 0.3s;
		cursor: pointer;
	}
	.shrink .menu-bar-card > .overlay-content > .item {
		font-size: 16px;
		line-height: 18px;
		color: #ffffff;
	}
	.shrink .menu-bar-card > .overlay-content > .item.-active > span {
		border-bottom: 3px solid #3191ce;
	}

	/* Logo Container */
	.logo-container {
		display: none;
	}

	.nav-container > .inner > .logo-container {
		flex-grow: 0;
		min-width: 75px;
		text-align: left;
	}

	/* Language Containner */
	.language-container > .inner > .item {
		color: #3191ce;
		font-size: 16px;
		font-weight: 500;
	}
	.shrink .language-container > .inner > .item {
		color: #ffffff;
		font-size: 14px;
	}

	.login-container > .inner {
		width: 400px;
	}

	.select-item-card {
		padding: 30px 15px;
	}

	.select-item-card > .item {
		margin-right: 30px;
		padding: 15px 30px;
	}
	.select-item-card > .item > .text {
		font-size: 18px;
	}

	.event-card-detail > .inner > .e-header {
		padding-bottom: 42.85%; /* 21:9 */
	}
	.event-card-detail > .inner > .e-header > .content > .title {
		font-size: 26px;
		line-height: 30px;
		padding: 0 15px;
	}
	.event-card-detail > .inner > .e-header > .content > .date {
		font-size: 16px;
		padding: 0 15px;
	}
	.event-card-detail > .inner > .e-header > .action {
		text-align: right;
	}
	.event-card-detail > .inner > .e-body > .group {
		justify-content: flex-start;
		font-size: 12px;
	}
	.event-card-detail > .inner > .e-body > .group > .box {
		margin-right: 15px;
	}

	.event-card-detail > .inner > .e-body > .participants-box > .box-body {
		display: flex;
		justify-content: space-between;
    	flex-wrap: wrap;
	}
	.event-card-detail > .inner > .e-body > .participants-box > .box-body > .item {
		width: 46%;
	}

	.event-card-detail > .inner > .e-body > .participants-box > .box-body > .item:last-child {
		margin-bottom: auto;
	}

	.data-matching-box .day-card > .inner > .box-header {
		font-size: 20px;
	}
	.data-matching-box .day-card > .inner > .box-body > .item-between {
		width: calc(33.3% - 17px);
    }

    .logo-container > img {
        width: 188px;
    }

    .shrink .logo-container > .logo-white {
        display: initial;
        width: 130px;
    }

    .menu-bar-card > .overlay-content > .item.-active > span {
        border-bottom: 3px solid #3191ce;
        padding: 2px 0;
    }

    .shrink .menu-bar-card > .overlay-content > .item.-active > span {
        border-bottom: 3px solid #FFFFFF;
    }

    .menu-bar-card > .overlay-content > a:hover, .menu-bar-card > .overlay-content > a:focus {
        color: #3191ce;
    }

    .igrid-containner > .inner {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}
	.igrid-containner > .inner > .item {
        width: calc(50% - 10px);
        margin: 5px;
    }

    .tracking-detail-container > .inner > .detail-body > .detail-body-box > .title {
        border-bottom: none;
    }

    .tracking-container > .inner > .tracking-body > .tracking-result > table th.-m-hide {
        display: table-cell;
    }

    .tracking-container > .inner > .tracking-body > .tracking-result > table td.-m-hide {
        display: table-cell;
    }

    .service-container > .inner > .box-body {
        display: flex;
        justify-content: space-around;
        align-items: stretch;
    }

    .service-container > .inner > .box-body > .item {
        width: 22%;
        margin-top: 0;
    }

    .service-container > .inner > .box-body > .item > .photo {
        width: 160px;
        height: 160px;
    }

    .contact-us-container > .inner {
        width: 75%;
    }

    .contact-us-container > .inner > .box-body > .inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .contact-us-container > .inner > .box-body > .inner > .boxs {
        width: 30%;
    }
    .contact-us-container > .inner > .box-body > .inner > .boxs:last-child {
        width: 60%;
        margin-top: 0px;
    }
    .contact-us-container > .inner > .box-body > .inner > .boxs > iframe {
        box-shadow: 20px 20px 0px -5px #3191ce;
    }
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    body:after {
        content: "desktop";
        display: none;
    }

    .container {
        width: 80%;
    }

    .nav-container > .inner {
        width: 80%;
    }

    /* Menu bar container */
    .nav-container > .inner > .menu-container {
        padding: 0;
    }
    .menu-container > .inner > .hamburger-bar {}
    .menu-container > .inner > .menu-bar-card > .overlay-header {}
    .menu-bar-card {}
    .menu-bar-card > .overlay-content {}
    .menu-bar-card > .overlay-content > .item {
        font-size: 18px;
        line-height: 20px;
        padding: 6px 0;
    }
    .menu-bar-card > .overlay-content > .item {
        margin-right: 45px;
    }
    .menu-bar-card > .overlay-content > .item:last-child {
        margin-right: 0px;
    }
    .shrink .menu-bar-card > .overlay-content > .item {
        font-size: 18px;
        line-height: 20px;
    }

    /* Language Containner */
    .language-container > .inner > .item {
        color: #3191ce;
        font-size: 18px;
        font-weight: 500;
    }
    .shrink .language-container > .inner > .item {
        color: #ffffff;
        font-size: 16px;
    }

    .data-matching-box .day-card > .inner > .box-body > .item-between {
        width: calc(20% - 17px);
    }

    .logo-container > img {
        width: 228px;
    }
    
    .shrink .logo-container > .logo-white {
        display: initial;
        width: 170px;
        margin-bottom: -2px;
    }

    .tracking-container > .inner > .tracking-body {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .tracking-container > .inner > .tracking-body > .tracking-form {
        width: 60%;
    }

    .tracking-detail-container > .inner > .detail-body {
        display: flex;
        justify-content: space-between;
    }

    .tracking-detail-container > .inner > .detail-body > .detail-body-box {
        width: 48%;
    }

    .igrid-containner > .inner > .item {
		width: calc(25% - 10px);
	}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    body:after {
        content: "desktop-large";
        display: none;
    }

    .tracking-detail-container > .inner > .detail-body > .detail-body-box {
        width: 58%;
    }

    .tracking-detail-container > .inner > .detail-body > .detail-body-box:last-child {
        width: 35%;
    }
}