@font-face {
	font-family: poppinsbold;
	src: url(../fonts/poppins-bold.otf);
}

@font-face {
	font-family: poppinssemibold;
	src: url(../fonts/poppins-semibold.otf);
}

@font-face {
	font-family: poppinsmedium;
	src: url(../fonts/poppins-medium.ttf);
}

@font-face {
	font-family: poppins;
	src: url(../fonts/poppins.ttf);
}

@font-face {
	font-family: sarala;
	src: url(../fonts/sarala.ttf);
}

@font-face {
	font-family: chilanka_regular;
	src: url(../fonts/chilanka_regular.ttf);
}

@font-face {
	font-family: voces;
	src: url(../fonts/voces.ttf);
}

.data-tracking{	
	text-align: center;
	font-size: 13px;
	vertical-align: inherit !important;
	padding: 5px !important;
}

select{ cursor: pointer !important; }

.d-inherit{ display: inherit; }


.f-popbold		{ font-family: poppinsbold; }
.f-popsemibold	{ font-family: poppinssemibold; }
.f-popmed		{ font-family: poppinsmedium; }
.f-pop			{ font-family: poppins; }

.f-sans			{ font-family: sans-serif; }
.f-roboto		{ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }

.f-try1			{ font-family: 'Courier New', Courier, monospace; }
.f-try2			{ font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}
.f-try3			{ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
.f-try4			{ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;}
.f-try5			{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.f-try6			{ font-family: 'Times New Roman', Times, serif; }
.f-try7			{ font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; }
.f-try8			{ font-family: Arial, Helvetica, sans-serif; }
.f-try9			{ font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; }
.f-try10		{ font-family: Georgia, 'Times New Roman', Times, serif;}
.f-try11		{ font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;}
.f-try12		{ font-family: Verdana, Geneva, Tahoma, sans-serif;}


.f-sarala 		{ font-family: sarala; }
.f-voces  		{ font-family: voces; }
.f-chilanka 	{ font-family: chilanka_regular; }

.f-11{ font-size: 11px; }
.f-12{ font-size: 12px; }
.f-13{ font-size: 13px; }
.f-14{ font-size: 14px; }
.f-16{ font-size: 16px; }


.min-w-40 { min-width: 40px; }
.min-w-100 { min-width: 100px; }
.max-w-400{ max-width: 400px; }

.h-fill{ height: -webkit-fill-available; }


.text-gray 		{ color: #929292; }
.text-icon-blue { color: #006cb8; }
.text-main-blue { color: #00467F; }

.text-btn-green { color: #00C51A; }
.text-main-red { color: #ED313A; }
.text-status-orange { color: #FBAF42; }




.bg-yellow 		{ background-color: #FFFDCA; }
.bg-main-blue 	{ background-color: #00467F; }
.bg-btn-green	{ background-color: #009A14; }
.bg-icon-blue 	{ background-color: #006cb8; }


.tint-white		{ filter: invert(83%) sepia(52%) saturate(0%) hue-rotate(136deg) brightness(116%) contrast(102%); }
.tint-grey-500 	{ filter: invert(58%) sepia(82%) saturate(0%) hue-rotate(187deg) brightness(95%) contrast(80%); }
.tint-red		{ filter: invert(50%) sepia(90%) saturate(6493%) hue-rotate(341deg) brightness(96%) contrast(93%); }
.tint-main-blue { filter: invert(15%) sepia(49%) saturate(4228%) hue-rotate(192deg) brightness(99%) contrast(101%); }
.tint-secondary { filter: invert(15%) sepia(49%) saturate(4228%) hue-rotate(192deg) brightness(99%) contrast(101%); }
.tint-sky-blue	{ filter: invert(91%) sepia(4%) saturate(5932%) hue-rotate(180deg) brightness(96%) contrast(79%); }

.rotate-90{ transform: rotate(90deg); }
.rotate-270{ transform: rotate(270deg); }


.common-cont{
    border-radius: 5px;
    padding: 16px 16px;
    box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 1px 3px 1px;
    -webkit-box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 1px 3px 1px;
}

.box-shadow-none:focus{
	box-shadow: none;
	-webkit-box-shadow: none;
}

.common-focus:focus{
    outline: 5px auto lightgray !important;
    outline-offset: 2px !important;
}

.common-shadow{
    box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 1px 3px 1px;
    -webkit-box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 1px 3px 1px;
}

.common-btn-md{
    color: #fff;    
    border-radius: 6px;
    border: 0;
    padding: 10px 8px;
}

.common-btn-md:focus,
.common-btn-md:hover{
    margin: 1.5px;
    padding: 8.5px 6.5px;	    
}

.common-text {
	padding: 4px 0 8px 0;
	border: 0;
	outline: 0;
}


.white-card{
	background-color: white;	
	border-radius: 8px;
	padding: 16px 16px 16px 16px;
	margin: 8px 8px 0px 8px;	
}

* {
	/* font-family: poppins; */
	font-size: 14px;
}

.cont-header-home{
	margin-top: 15%;	
	vertical-align: middle;
}

#home-txt-search{
	height: 40px;
    border-radius: 8px;
    padding-left: 30px;
	padding-right: 10px;
	background-image:url('../images/ic-search.svg');	
	background-repeat:no-repeat;
   	background-position:left center;
	background-size: 8% 55%;
}

/* ========== LOGIN ========== */
.title-head{
	display: block;
	margin-left: 20%;	
}

.title-sml{
	font-size: 45px;
	font-family: Arial, Helvetica, sans-serif;
	color: #ED313A;	
}

.title-container{
	font-size: 50px;
	font-family: poppinsmedium;
	font-weight: bold;
	color: #0B4E94;	
}

.title-tracking{
	font-size: 30px;
	font-family: poppins;
	color: #FFCA29;	
	margin-left: 10px;
}

.login-column{	
	width: 80%;	
	height: 44px;
	padding-left: 6px;
	padding-right: 6px;
	border-color: #e5e5e5;
}

.login-column2{
	width: 100%;
	height: 44px;
	border: 0;
	background: transparent;
	outline: 0;
	padding-left: 8px;
}

.login-button{		
	width: 80%;	
	background-color: #FCC730;
	color: #0B4E94;	
}

.cont-msg-login{
	color: red;
}

#cont-login{
    background-image: url(../images/ic-lock.svg);
    background-repeat: no-repeat;
    background-size: 80% 90%;
    background-position: right center;
}

@media(max-width:500px){
	#content-login{
		display: block;
		width: 100%;
	}
}

#cont-login2{	
    background-image: url(../images/landing_banner.png), url(../images/ic_bg_login_smllink2.svg);
    background-repeat: no-repeat;
    background-size: contain, cover;
    background-position: center;
}



/* ========== END OF LOGIN ========== */

/* ========== HOME HEADER ========== */

.img-logo {
	width: 120px;
    height: auto;
}


.full-name {
    /* font-weight: 500; */
	display: block;
	text-align: end;
}

/* ========== END OF HOME HEADER ========== */

/* ========== HOME MODAL ========== */
#sml-modal-title{
	font-size: 17px;
	font-family: poppinsmedium;
}

.btn-sml-modal, .btn-sml-modal-option{	
	margin-top: 25px;	
	height: 40px;
	min-width: 75px;
	border-radius: 20px;
}
/* ========== END OF HOME MODAL ========== */
.sml-body{
	background-color: whitesmoke;
	height: 100vh;	
	width: 100%;
}

#sml-content{	
	margin: 16px;
	padding-bottom: 16px;
}

#sml-content-header{
	display: flex;
	/* justify-content: space-between;	 */
}

#home-cont-search-result{		
	position: absolute;
	left: 50%;
	transform: translate(-50%, 47%);
	z-index: 2;
}

@media (max-width:767px) {
	#sml-content-header{
		display: flex;
		flex-direction: column;
	}
}

/* ========== HOME SEARCH ========== */
.sml-label{	
	/* font-weight: bold;	 */
	margin-bottom: unset;	
}

.sml-date-pick{	
	max-width: 120px;
	border-radius: 5px !important;
	border-color: lightgray;
	color: black;	
	padding: 0px 5px;
	text-align: center;
}

#sml-track-btn-search{
	/* width: 80px; */
	border-radius: 6px;	
}

@media (max-width:360px) {
	#sml-content-search{
		flex-direction: column;
	}
}

/* ========== END OF HOME SEARCH ========== */

/* ========== HOME FILTER ========== */
.track-filter{
	height: 30px !important;
	border-radius: 5px !important;
	padding-left: 8px;
	padding-right: 8px;	
	border-color: lightgray;
}

#sml-content-filter{	
	display: flex;
	align-items: flex-end;
}

@media (max-width:500px) {
	#sml-layout-filter{
		flex-direction: column;
	}
}

#sml-content-filter2{
	gap: 0.5rem;
}

/* ========== END OF HOME FILTER ========== */

#sml-content-title{
	font-size: 18px;
	font-family: poppinsmedium;
}

th.dtable{	
	padding: 5px 18px !important;	
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	font-family: poppins;
	color: black;	
	vertical-align: middle !important;
}

th.tbl-no{
	width: 25px !important;
	padding: 5px 13px 5px 5px !important;	
}

th.tbl-number{	
	width: 120px !important;
	padding: 5px 13px !important;
}

th.tbl-seal{	
	width: 60px !important;
	padding: 5px 13px !important;
}

th.tbl-date-depart{
	width: 100px !important;
	padding: 5px 13px !important;
}

th.tbl-date{	
	width: 80px !important;
	padding: 5px 13px !important;
}

th.tbl-status{	
	width: 50px !important;
	padding: 5px 13px !important;
}

.div-track{	
	border-radius: 5px;
	padding: 5px !important;
	vertical-align: middle;
	width: fit-content;
	margin: auto;	
}

.view-track{	
	font-size: 13px;
	font-weight: bold;	
	color: white;	
	white-space: nowrap;
}





a.home-cont-menu.selectedmenu { background-color: #D1D5DB !important;  }
a.home-cont-menu.selectedmenu img { filter: invert(15%) sepia(49%) saturate(4228%) hue-rotate(192deg) brightness(99%) contrast(101%) !important; }
a.home-cont-menu.selectedmenu div { color: #00467F !important; }

a.home-cont-menu:hover { background-color: #D1D5DB; }
a.home-cont-menu:hover img { filter: invert(83%) sepia(52%) saturate(0%) hue-rotate(136deg) brightness(116%) contrast(102%); }
a.home-cont-menu:hover div { color: white; }

#head-cont-menu {
	width: fit-content;
	height: -webkit-fill-available;
    height: -moz-fill-available;
	position: absolute;
	z-index: 2;
}
/* #head-cont-menu:hover { width: 170px; } */
/* #head-cont-menu:hover a div {
	display: block !important;
} */

.home-cont-track-status:hover { border-radius: 5px }
.home-cont-track-status:hover div img { filter: invert(83%) sepia(52%) saturate(0%) hue-rotate(136deg) brightness(116%) contrast(102%); }
.home-cont-track-status:hover div span { color: white; }

#track-status-order:hover 	{ background-color: #CFA013 }
#track-status-to-pickup:hover	{ background-color: #E47EB5 }
#track-status-pickup-point:hover	{ background-color: #25BAB5 }

#track-status-to-cy:hover	{ background-color: #B19650 }
#track-status-on-ship:hover	{ background-color: #18BBD8 }
#track-status-arrive-dest:hover	{ background-color: #AE18D8 }

#track-status-delivery:hover{ background-color: #478736 }
#track-status-drop-point:hover { background-color: #C54A07 }
#track-status-empty-return:hover { background-color: #C50707 }

.btn-menu-small-track:hover, .btn-menu-small-track:focus{
	color: #212529;
	background-color: #e2e6ea;
	border-color: #dae0e5;
}

@media (min-width: 768px) {
	.md\:f-14{ font-size: 14px; }
	.md\:f-20{ font-size: 1.25rem; }

	.md\:w-auto { width: auto; }

	#head-cont-menu:hover { width: 170px; }
	#head-cont-menu:hover a div { display: block !important; }
}

@media (min-width: 1024px) {
	.lg\:f-14{ font-size: 14px; }
	.lg\:f-20{ font-size: 1.25rem; }

	#head-cont-menu {
		width: 60px;
		height: 100%;
		border-right: 2px solid #eaeaea;
		position: unset;
	}

	.img-logo {
		width: 180px;
		height: auto;
	}

	#home-txt-search{
		height: 44px;
	}
}