@font-face{
src:url("../font/Lato-Heavy.ttf");
font-family:lato_heavy;
}

@font-face{
src:url("../font/Roboto-Regular.ttf");
font-family:roboto_regular;
}

@font-face{
src:url("../font/Roboto-Light.ttf");
font-family:roboto_light;
}

@font-face{
src:url("../font/Segoe_UI.ttf");
font-family:segoe_regular;
}

@font-face{
src:url("../font/Tahoma_Regular.ttf");
font-family:tahoma_regular;
}

@font-face{
src:url("../font/Lato-Light.ttf");
font-family:lato_light;
}

@font-face{
src:url("../font/Proxima_Nova.otf");
font-family:proxima_nova;
}

div#body_wrapper{
position:relative;
min-height:530px;
}

header{
position:relative;
min-height:50px;
}

header div#header_info{
position:relative;
background:rgb(20, 81, 99);
min-height:25px;
box-shadow:0px 2px 3px rgba(100,100,100,.3);
padding:5px 0px 10px 5px;
display:flex;
flex-wrap:wrap;
flex-direction:row;
justify-content:center;
gap:10px;
}

header div#header_info span{
display:block;
padding:5px 0px 0px 20px;
color:rgb(255,255,255);
font:14px segoe_regular;
}

header div#header_info span a{
text-decoration:none;
display:inline-block;
color:rgb(255,255,255);
font:12px segoe_regular;
}

header div#header_info span a:hover{
text-decoration:underline;
}

header div#header_info span:nth-child(1){
width:auto;
/*border:1px solid red;*/
}

header div#header_info span:nth-child(2){

}

header div#header_info span:nth-child(3){

}

header div#header_info span:nth-child(4){

}

header div#header_info span:nth-child(4) a{
margin:0px;
}

div#drop_menu{
position:absolute;
top:50px;
z-index:2;
height:100px;
background:#145163;
width:150px;
border-radius:5px;
padding:10px;
box-shadow:0px 0px 3px rgba(6, 12, 38,.5);
display:none;
}

div#drop_menu ul{
list-style:none;
}

div#drop_menu ul li{
border-bottom:1px solid #060C26;
padding:10px;
}

div#drop_menu ul li a{
color:white;
}

header div#header_menu{
position:relative;
background:rgb(28, 86, 106);
min-height:200px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
/*border:1px dotted red;*/
}

header > div#header_menu > div{
position:relative;
width:100%;
/*border:1px dotted red;*/
}

header > div#header_menu > div:nth-child(1){
padding:0px;
/*border:1px dotted white;*/
}

header > div#header_menu > div:nth-child(2){
width:100%;
padding:0px 0px 0px 0px;
/*border:1px solid gold;*/
}

header > div#header_menu > div:nth-child(3){
padding:5px 0px 0px 0px;
/*border:1px solid gold;*/
width:100%;
}

header > div#header_menu > div figure{
position:relative;
padding:5px 0px 0px 0px;
width:60%;
margin:auto;
}

header > div#header_menu > div figure img{
display:inline-block;
margin:2px 5px 0px 0px;
}

header > div#header_menu > div figure figcaption{
position:relative;
top:-5px;
display:inline-block;
padding:0px 0px 0px 0px;
}

header > div#header_menu > div figure figcaption h1{
font:20px lato_heavy;
text-transform:uppercase;
color:rgb(255,255,255);
letter-spacing:.2em;
}

header > div#header_menu > div figure figcaption h2{
font:10px lato_heavy;
text-transform:uppercase;
color:rgb(255,255,255);
letter-spacing:.1em;
}

header > div#header_menu > div nav#menu{
position:relative;
height:50px;
width:100%;
/*border:1px dotted white;*/
}

header > div#header_menu > div nav#menu ul{
list-style:none;
height:100%;
}

header > div#header_menu > div nav#menu ul li{
position:relative;
float:left;
width:70px;
margin:0px 10px;
height:100%;
text-align:center;
}

header > div#header_menu > div nav#menu ul li a{
font:14px tahoma_regular;
text-decoration:none;
color:rgb(255,255,255);
}

body#index nav#menu li#tab1,
body#services nav#menu li#tab2,
body#shipping nav#menu li#tab4,nav#menu li:hover{
border-bottom:7px solid #152635;
}

header > div#header_menu > div nav#menu ul li a{
text-decoration:none;
color:rgb(255,255,255);
}

header > div#header_menu > div form{
width:70%;
display:flex;
justify-content:center;
margin:20px auto auto auto;
}

header > div#header_menu > div form span{
display:block;
}

header > div#header_menu > div form span input[type="text"]{
display:block;
width:250px;
padding:5px 5px 5px 10px;
}

header > div#header_menu > div form span input[type="submit"]{
background:url('../images/search_icon.png') no-repeat center;
border:0px;
width:50px;
height:32px;
/*border:1px dotted red;*/
padding:5px;
display:block;
}

div#content_wrapper{
position:relative;
min-height:400px;
}

div#feedback_div{
position:fixed;
right:0px;
top:40%;
background:rgb(28, 86, 106);
z-index:2;
width:25px;
height:100px;
padding:2px;
box-shadow:0px 0px 3px rgba(100,100,100,.5);
}

div#feedback_div p{
color:rgb(255,255,255);
transform:rotate(90deg);
margin:22px 0px 0px 2px;
text-align:center;
}

div#feedback_div p a{
display:block;
text-decoration:none;
color:rgb(255,255,255);
font:14px segoe_regular;
}

div#banner{
position:relative;
height:300px;
/*border:1px solid red;*/
}

div#banner img{
display:block;
height:100%;
width:100%;
}

div#banner > article{
position:absolute;
bottom:250px;
right:50px;
z-index:1;
width:500px;
height:100px;
display:none;
}

div#banner > article h1{
font:28px lato_heavy;
text-transform:uppercase;
margin:0px 0px 5px 0px;
color:white;
}

div#banner > article p{
font:18px roboto_light;
color:white;
line-height:1.2em;
}

div#banner > article a{
text-decoration:none;
display:block;
height:40px;
width:180px;
text-align:center;
border-radius:5px;
background:#145163;
color:rgb(255,255,255);
box-sizing:border-box;
padding:6px 0px 0px 0px;
margin:10px 0px 0px 0px;
font:16px segoe_regular;
}

div#quick_tools{
background:blue;
min-height:50px;
background:#F7F7F7;
padding:30px 10px 20px 10px;
display:flex;
flex-direction:row;
justify-content:center;
flex-wrap:wrap;
box-shadow:0px 2px 3px rgba(100,100,100,.2);
}

div#quick_tools div{
position:relative;
width:100%;
border:0px;
border-bottom:1px solid rgb(200,200,200);
padding:10px 0px 10px 0px;
}

div#quick_tools div:nth-child(3){
border:0px;
}

div#quick_tools div a{
display:block;
padding:50px 0px 0px 0px;
margin:0px 0px 5px 0px;
text-decoration:none;
text-align:center;
font:16px lato_heavy;
text-transform:capitalize;
color:#303061;
}

div#quick_tools div:nth-child(1) a{
background:transparent url('../images/tracking.svg') no-repeat center top;
background-size:50px 50px;
}

div#quick_tools div:nth-child(2) a{
background:transparent url('../images/create_shipment.svg') no-repeat center 2px;
background-size:40px 40px;
}

div#quick_tools div:nth-child(3) a{
background:transparent url('../images/pickup.svg') no-repeat center 1px;
background-size:50px 50px;
}

div#quick_tools div h5{
font:14px segoe_regular;
text-align:center;
}

div#services{
position:relative;
min-height:500px;
padding:10px 0px 20px 0px;
}

div#services > article{
position:relative;
padding:0px 10px 80px 10px;
}

div#services article h1{
text-align:center;
font:32px lato_heavy;
margin:0px 0px 10px 0px;
color:#303061;
}

div#services article p{
text-align:justify;
font:16px lato_light;
line-height:1.2em;
color:rgb(100,100,100);
}

div#service_div1{
position:relative;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
min-height:200px;
background:#07F7F7;
}

div#service_div1 > div{
position:relative;
/*border:1px solid red;*/
}

div#service_div1 > div:nth-child(1){
width:100%;
padding:50px 30px 30px 30px;
}

div#service_div1 > div:nth-child(1) > h1{
text-align:center;
font:24px lato_heavy;
text-transform:uppercase;
margin:0px 0px 20px 0px;
}

div#service_div1 > div:nth-child(1) > div{
margin:10px 0px 20px 0px;
padding:60px 0px 0px 0px;
}

div#service_div1 > div:nth-child(1) > div#serv1{
background:url('../images/lock_icon.png') no-repeat center top;
}

div#service_div1 > div:nth-child(1) > div#serv2{
background:url('../images/globe_icon.png') no-repeat center top;
}

div#service_div1 > div:nth-child(1) > div#serv3{
background:url('../images/edit_image.png') no-repeat center top;
}

div#service_div1 > div:nth-child(1) > div h5{
font:16px lato_heavy;
text-align:center;
color:#145163;
margin:0px 0px 5px 0px;
}

div#service_div1 > div:nth-child(1) > div p{
font:16px roboto_light;
line-height:1.5em;
text-align:justify;
}

div#service_div1 > div:nth-child(2){
width:100%;
}

div#service_div1 > div:nth-child(2) figure{
width:100%;
}

div#service_div1 > div:nth-child(2) figure img{
display:block;
width:100%;
}

div#service_div2{
position:relative;
padding:50px 50px 30px 50px;
}

div#service_div2 p{
font:18px roboto_light;
margin:0px 0px 10px 0px;
line-height:1.7em;
color:rgb(100,100,100);
text-align:justify;
}

div#service_div3{
position:relative;
padding:30px 10px 0px 10px;
margin:0px 0px 10px 0px;
}

div#service_div3 h2{
text-align:center;
font:24px lato_heavy;
color:#303061;
margin:0px 0px 20px 0px;
}

div#service_div3 article{
position:relative;
padding:0px 10px 0px 10px;
}

div#service_div3 article p{
font:14px roboto_light;
color:rgb(100,100,100);
line-height:1.5em;
text-align:justify;
margin:0px 0px 1.5em 0px;
}

div#service_div3 > div{
position:relative;
min-height:100px;
margin:0px 10px 0px 10px;
}

div#service_div3 > div > div{
position:relative;
display:flex;
flex-wrap:wrap;
background:rgb(250,250,250);
}

div#service_div3 > div > div div{
position:relative;
width:100%;
box-sizing:border-box;
}

div#service_div3 > div > div:nth-child(1){
background:rgb(250,250,250);
padding:5px;
}

div#service_div3 > div > div:nth-child(1) div:nth-child(1){
margin:0px 0px 10px 0px;
width:100%;
}

div#service_div3 > div > div:nth-child(1) div:nth-child(1) img{
display:block;
width:100%;
}

div#service_div3 > div > div:nth-child(1) div:nth-child(2){
/*border:1px solid red;*/
padding:0px 10px 0px 10px;
}

div#service_div3 > div > div:nth-child(1) div:nth-child(2) h5{
font:16px lato_heavy;
text-align:center;
padding:0px 0px 0px 0px;
}

div#service_div3 > div > div:nth-child(1) div:nth-child(2) p{
font:14px roboto_light;
line-height:1.3em;
padding:5px 0px px 0px;
text-align:justify;
color:rgb(100,100,100);
}

div#service_div3 > div > div:nth-child(2){
padding:0px 0px 0px 0px;
background:rgb(240,240,240);
}

div#service_div3 > div > div:nth-child(2) div:nth-child(1){
/*border:1px solid red;*/
padding:10px 5px 0px 5px;
}

div#service_div3 > div > div:nth-child(2) div:nth-child(1) p{
font:14px roboto_light;
line-height:1.3em;
padding:5px 0px px 0px;
text-align:justify;
color:rgb(100,100,100);
}

div#service_div3 > div > div:nth-child(2) div:nth-child(1) h5{
font:16px lato_heavy;
padding:0px 0px 5px 0px;
text-align:center;
}

div#service_div3 > div > div:nth-child(2) div:nth-child(2){
margin:0px 0px 0px 0px;
}

div#service_div3 > div > div:nth-child(2) div:nth-child(2) img{
display:block;
width:100%;
}

div#service_div3 > div > div:nth-child(3){
background:#F7E5E9;
padding:10px 10px 0px 10px;
}

div#service_div3 > div > div:nth-child(3) div:nth-child(1){
padding:0px 0px 0px 0px;
}

div#service_div3 > div > div:nth-child(3) div:nth-child(1) img{
display:block;
width:100%;
}

div#service_div3 > div > div:nth-child(3) div:nth-child(2){
/*border:1px solid red;*/
padding:0px 10px 0px 10px;

}

div#service_div3 > div > div:nth-child(3) div:nth-child(2) h5{
font:16px lato_heavy;
padding:0px 0px 5px 0px;
color:rgb(5,5,5);
text-align:center;
}

div#service_div3 > div > div:nth-child(3) div:nth-child(2) p{
font:14px roboto_light;
line-height:1.3em;
padding:5px 0px px 0px;
text-align:justify;
color:rgb(100,100,100);
}

div#service_div3 > div > div:nth-child(4){
padding:0px 10px 0px 10px;
background:#FFF7F7;
}

div#service_div3 > div > div:nth-child(4) div:nth-child(1){
/*border:1px solid red;*/
padding:20px 10px 0px 10px;
}

div#service_div3 > div > div:nth-child(4) div:nth-child(1) p{
font:14px roboto_light;
line-height:1.3em;
padding:5px 0px px 0px;
text-align:justify;
color:rgb(100,100,100);
}

div#service_div3 > div > div:nth-child(4) div:nth-child(1) h5{
font:16px lato_heavy;
padding:0px 0px 5px 0px;
text-align:center;
}

div#service_div3 > div > div:nth-child(4) div:nth-child(2){
padding:0px;
}

div#service_div3 > div > div:nth-child(4) div:nth-child(2) img{
display:block;
width:100%;
}


div#service_div4{
position:relative;
min-height:100px;
}

div#service_div4 > h2{
text-align:center;
font:24px lato_heavy;
color:#303061;
margin:0px 0px 10px 0px;
}

div#service_div4 > div{
position:relative;
min-height:100px;
display:flex;
}

div#service_div4 > div div{
position:relative;
width:35%;
height:270px;
/*border:1px solid black;*/
margin:30px;
box-shadow:0px 0px 4px rgba(100,100,100,.3);
}

div#service_div4 > div div figure{
/*border:1px solid red;*/
height:220px;
}

div#service_div4 > div div figure img{
display:block;
width:100%;
height:100%;
}

div#service_div4 > div div h2{
text-align:center;
font:16px lato_heavy;
margin:10px 0px 0px 0px;
color:#145163;
}

div#extra{
position:relative;
min-height:50px;
background:#F3B912;
display:flex;
flex-direction:row;
flex-wrap:wrap;
}

div#extra div{
position:relative;
/*border:1px solid red;*/
}

div#extra div:nth-child(1){
padding:20px;
width:100%;
}

div#extra div:nth-child(1) h1{
text-align:center;
font:28px lato_heavy;
}

div#extra div:nth-child(1) h2{
text-align:left;
font:18px lato_heavy;
margin:5px 0px 5px 0px;
}

div#extra div:nth-child(1) p{
font:18px lato_light;
}

div#extra div:nth-child(1) h5{

}

div#extra div:nth-child(1) h5 a{
text-decoration:none;
font:14px tahoma_regular;
color:#BF0009;
}

div#extra div:nth-child(1) h5 a:hover{
text-decoration:underline;
}

div#extra div:nth-child(2){
width:100%;
}

div#extra div figure{
width:100%;
}

div#extra div figure img{
display:block;
width:100%;
}

div#cookie_div{
position:fixed;
bottom:0px;
z-index:2;
background:#145163;
padding:10px;
color:white;
}

div#cookie_div h5{
text-align:center;
font:14px lato_heavy;
margin:0px 0px 5px 0px;
}

div#cookie_div p{
font:14px roboto_regular;
}

div#cookie_div p span{
display:inline-block;
background:#F3B912;
width:80px;
padding:5px;
}

div#cookie_div p span a{
display:block;
height:100%;
color:black;
text-align:center;
text-decoration:none;
}

/*==================================
/*============services=============*/
div#services_wrapper{
position:relative;
min-height:1000px;
}

div#serv_1{
position:relative;
padding:20px 10px 0px 10px;
}

div#serv_1 h1{
font:24px lato_heavy;
margin:50px 0px 10px 0px;
}

div#serv_1 p{
font:14px lato_light;
text-align:justify;
margin:0px 0px 1.2em 0px;
}

figure#head_banner{
height:300px;
}

figure#head_banner img{
display:block;
height:100%;
width:100%;
}

div#serv_2{
position:relative;
padding:20px 10px 0px 10px;
}

div#serv_2 p{
font:14px lato_light;
text-align:justify;
margin:0px 0px 1.3em 0px;
}

div#serv_2 h1{
font:24px lato_heavy;
margin:50px 0px 10px 0px;
}


div#login_wrapper{
position:relative;
min-height:100px;
padding:100px 200px 100px 200px;
}

div#loginSing_holder{
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
height:100%;
background:rgb(255,255,255,.8);
z-index:2;
display:none;
}

div#loginSing_holder figure{
position:relative;
width:100px;
height:100px;
margin:10% auto auto auto;
/*border:1px solid white;*/
}

div#loginSing_holder figure img{
display:block;
width:100%;
height:100%;
}

div#loginSignupDiv{
position:relative;
display:flex;
/*border:1px solid red;*/
min-height:100px;
}

div#loginSignupDiv > div{
position:relative;
width:50%;
height:300px;
border-right:1px solid rgb(200,200,200);
padding:10px 100px 10px 100px;
}

div#loginSignupDiv > div:nth-child(2){
border:0px;
}

div#login_div{
position:relative;
height:200px;
}

div#login_div > h5{
text-align:center;
font:18px lato_heavy;
margin:0px 0px 10px 0px;
padding:80px 0px 0px 0px;
background:url('../images/login_avatar.png') no-repeat center -6px;
}

div#login_div > p{
border:1px solid #03B9F7;
font:12px segoe_regular;
padding:5px;
border-radius:2px;
background:rgb(170, 230, 227);
text-align:center;
margin:0px 0px 10px 0px;
}

div#login_div form{
display:block;
margin:20px 0px 0px 0px;
}

div#login_div form span{
display:block;
position:relative;
border-bottom:1px solid rgb(200,200,200);
width:250px;
height:30px;
margin:0px 0px 20px 0px;
}

div#login_div form span:nth-child(3){
border:0px;
}

div#login_div form span input[type="text"],div#login_div form span input[type="password"]{
display:block;
width:100%;
height:90%;
border:0px;
margin:2px;
color:#6300F3;
font:14px proxima_nova;
}

div#login_div form span input[type="text"]:focus,div#login_div form span input[type="password"]:focus{
border:0px;
}

div#login_div form span input[type="submit"]{
display:block;
margin:auto;
height:40px;
width:250px;
background:#4EB440;
border-radius:25px;
border:0px;
cursor:pointer;
color:white;
font:14px proxima_nova;
}

.loginError{
background:#FFB1A2;
height:20px;
padding:0px;
width:90%;
margin:auto auto 10px auto;
border-radius:25px;
border:1px solid #FF4F5F;
}

.loginError p{
font:14px tahoma_regular;
text-align:center;
color:#BF0009;
}
/*dashboard
==================================*/
/*===================================*/
div#dashboard_wrapper{
position:relative;
min-height:500px;
padding:0px;
margin:0px;
}

div#dash_body{
position:relative;
min-height:200px;
}

div#dashboard_menu{
position:fixed;
left:0px;
width:200px;
top:0px;
bottom:0px;
/*border:1px solid red;*/
background:#145163;
}

div#dashboard_menu > figure{
height:200px;
background:#1C566A;
padding:20px 0px 0px 0px;
}

div#dashboard_menu > figure img{
display:block;
margin:auto;
width:80%;
}

div#dashboard_menu > figure p{
font:14px segoe_regular;
text-transform:capitalize;
color:white;
text-align:center;
margin:5px 0px 0px 0px;
}

div#dashboard_content_wrapper{
position:relative;
/*border:1px solid red;*/
margin:0px 0px 0px 200px;
min-height:630px;
}

div#dash_header{
height:50px;
/*border:1px solid red;*/
background:rgb(240,240,240);
box-shadow:0px 0px 4px rgba(100,100,100,.4);
}

div#dashloader{
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
background:rgba(255,255,255,.8);
z-index:2;
display:none;
}

div#dashloader figure{
position:relative;
width:100px;
height:100px;
margin:20% auto auto auto;
}

div#dashloader figure img{
display:block;
width:100%;
height:100%;
}

nav#dash_nav{
position:relative;
margin:5px;
}

ul#dash_nav_links{
position:relative;
width:100%;
}

ul#dash_nav_links li{
list-style:none;
padding:10px 0px 10px 40px;
border-bottom:1px solid #060C26;
}

ul#dash_nav_links li:nth-child(1){
background:url(../images/dashboard.png) no-repeat 10px center;
}

ul#dash_nav_links li#add_user_link{
background:url(../images/add_user.png) no-repeat 10px center;
}

ul#dash_nav_links li#manage_users_link{
background:url(../images/edit_user.png) no-repeat 10px center;
}

ul#dash_nav_links li#shipment_link{
background:url(../images/anchor.png) no-repeat 10px center;
}

ul#dash_nav_links li#manage_shipment_link{
background:url(../images/accept_database.png) no-repeat 10px center;
}

ul#dash_nav_links li#create_storage_link{
background:url(../images/storage_icon.png) no-repeat 10px center;
}

ul#dash_nav_links li#manage_storage_link{
background:url(../images/accept_database.png) no-repeat 10px center;
}

ul#dash_nav_links li#logout_link{
background:url(../images/logout.png) no-repeat 10px center;
}

ul#dash_nav_links li a{
text-decoration:none;
font:14px tahoma_regular;
text-transform:capitalize;
color:rgb(255,255,255);
}

div#tracking_stats{
position:relative;
border:1px solid red;
display:flex;
justify-content:center;
height:200px;
}

div#tracking_stats > div{
width:45%;
margin:10px;
border:1px dotted red;
}

/*================================*/
div#create_shipment_div,div#create_storage_div,div#view_storage_div{
position:relative;
padding:50px 100px 0px 100px;
}

div#create_user_div{
position:relative;
padding:50px 200px 0px 100px;
}

div#create_shipment_div > h1,div#display_tracking_info h1,div#create_user_div h1, div#create_storage_div h1,div#view_storage_div h1{
padding:0px 0px 10px 0px;
border-bottom:1px solid rgb(230,230,230);
margin:0px 0px 10px 0px;
}

div#create_shipment_div > h1 > span, div#display_tracking_info h1 span, div#create_user_div h1 span,div#create_storage_div h1 span, div#view_storage_div h1 span{
display:inline-block;
font:14px segoe_regular;
text-transform:uppercase;
margin:0px 2px;
}

div#create_shipment_div > h2,div#create_storage_div h2, div#view_storage_div h2{
font:14px tahoma_regular;
text-align:center;
text-transform:capitalize;
margin:10px auto 10px auto;
width:60%;
background:#FFCF49 url('../images/warning_icon.png') 17% center no-repeat;
padding:5px;
border-radius:25px;
}

div#create_ship_feedback,div#create_storage_feedback{
position:relative;
min-height:50px;
width:65%;
margin:auto auto 10px auto;

}

div#reError{
position:relative;
background:#FFC0CB;
padding:5px;
border:1px solid #FF5D5B;
border-radius:5px;
}

div#reError p{
font:14px segoe_regular;
margin:0px 0px 5px 0px;
}

form#creat_shipment_form,form#update_shipment_form,div#modify_shipment_div form,div#create_user_form form,#create_storage_form,#edit_storage_form{
position:relative;
display:flex;
flex-diection:row;
flex-wrap:wrap;
min-height:200px;
margin:auto;
padding:10px;
}

form#creat_shipment_form span,form#update_shipment_form span,div#modify_shipment_div form span,div#create_user_form form span, #create_storage_form span, #edit_storage_form span{
display:block;
margin:0px 0px 10px 20px;
}

form#creat_shipment_form span label,form#update_shipment_form label,div#modify_shipment_div form label,div#create_user_form form span label,#create_storage_form span label,
#edit_storage_form span label{
display:block;
font:14px proxima_nova;
margin:0px 0px 5px 0px;
}

form#creat_shipment_form span input[type="text"],
form#update_shipment_form span input[type="text"],
div#modify_shipment_div form span input[type="text"], 
form#creat_shipment_form span select,
form#update_shipment_form span select, 
div#modify_shipment_div form span select,div#create_user_form form span input[type="text"],
div#create_user_form form span select,
#create_storage_form span input[type="text"]{
display:block;
width:300px;
height:40px;
padding:2px 0px 2px 5px;
font:16px lato_light;
color:rgb(50,50,50);
border:1px solid rgb(200,200,200);
border-radius:5px;
}

form#creat_shipment_form span select,form#update_shipment_form select,div#modify_shipment_div form select,div#create_user_form form span select{
height:40px;
width:320px;
}

form#creat_shipment_form span textarea,form#update_shipment_form textarea,div#modify_shipment_div form textarea,#create_storage_form textarea,
#edit_storage_form textarea{
display:block;
width:630px;
height:60px;
padding:2px 0px 2px 5px;
font:14px proxima_nova;
color:rgb(150,150,150);
}

#create_storage_form textarea,#edit_storage_form textarea{
width:800px;
height:300px;
}

form#creat_shipment_form input[type="submit"],form#update_shipment_form input[type="submit"],
div#modify_shipment_div form input[type="submit"],
div#create_user_form form span input[type="submit"],#create_storage_form input[type="submit"],
#edit_storage_form input[type="submit"]{
display:block;
width:200px;
border:0px;
background:#2C7D2B;
text-align:center;
color:white;
height:30px;
padding:5px;
font:14px proxima_nova;
cursor:pointer;
}

div#modify_shipment_div form a, form#creat_shipment_form a,form#update_shipment_form a{
display:block;
width:200px;
border:0px;
background:#E64340;
text-align:center;
color:white;
height:30px;
padding:6px 5px 5px 5px;
text-decoration:none;
font:14px proxima_nova;
box-sizing:border-box;
}

div#display_tracking_info{
position:relative;
min-height:100px;
border-bottom:1px solid rgb(240,240,240);
padding:50px 0px 10px 10px;
margin:0px 0px 20px 0px;
box-shadow:0px 2px 3px rgba(100,100,100,.3);
}

div#display_tracking_info table{
display:block;
width:100%;
margin:auto;
border-collapse:collapse;
}

div#display_tracking_info table th{
border-bottom:1px solid rgb(230,230,230);
background:#1F9DF7;
padding:5px;
color:#152635;
font:14px roboto_regular;
text-align:left;
}

div#display_tracking_info table td{
padding:10px;
font:14px tahoma_regular;
}

div#display_tracking_info table tr:nth-child(even){
border-bottom:1px solid rgb(230,230,230);
}

div#display_tracking_info table tr:nth-child(odd){
background:#D0E6F4;
}


div#display_tracking_info table td form{
display:block;
display:flex;
/*border:1px solid red;*/
}

div#display_tracking_info table td form input[type="text"]{
display:block;
width:300px;
padding:5px 0px 5px 5px;
border:1px solid #D0E6F4;
font:14px lato_light;
}

div#display_tracking_info table td form input[type="submit"]{
display:block;
width:120px;
margin:0px 0px 0px 5px;
text-align:left;
cursor:pointer;
font:14px proxima_nova;
}

#label_update_form_btn{
background:#1B497C url('../images/update_icon.png') no-repeat 90% center;
padding:5px 20px 5px 10px;
color:white;
border:0px;
}

a.view_details{
text-decoration:none;
display:block;
background:transparent url('../images/view_icon.png') no-repeat 90% center;
padding:10px 50px 10px 5px;
color:rgb(10,10,10);
}

a.view_details:hover{
text-decoration:underline;
}

a.remove_btn{
display:block;
padding:10px 80px 10px 0px;
background:url('../images/remove_icon.png') no-repeat center;
text-decoration:none;
color:#E64340;
}

a.preview_link{
display:block;
padding:10px 80px 10px 0px;
background:url('../images/preview_link_icon.png') no-repeat center;
text-decoration:none;
color:#4AAEE2;
}

p.no_track_job{
font:14px segoe_regular;
width:500px;
margin:auto;
text-align:center;
text-transform:uppercase;
background:#FFE71C;
border:1px solid #F3B912;
padding:5px;
border-radius:25px;
}

p.no_track_job a{
display:inline-block;
color:#BF0009;
}

p#createShipSucc{
text-align:center;
background:#AEFFAD;
border:1px solid #74AA73;
padding:5px;
border-radius:25px;
font:14px segoe_regular;
}

h2.bread_crumbs{
margin:10px 20px 10px 10px;
font:14px segoe_regular;
text-transform:capitalize;
display:flex;
color:rgb(100,100,100);
/*background:rgb(250,250,250);*/
padding:5px;
}

h2.bread_crumbs a{
text-decoration:none;
display:block;
color:#E64340;
margin:0px 10px;
}

div#track_task_output{
position:relative;
min-height:300px;
overflow:scroll;
padding:10px;
}

div#track_task_output > h5{
text-align:center;
font:14px segoe_regular;
text-transform:uppercase;
width:80%;
margin:auto auto 20px auto;
padding:5px;
background:#FFCF49 url('../images/warning_icon.png') 15% center no-repeat;
border-radius:25px;
}

div#track_task_output table{
border-collapse:collapse;
display:block;
position:relative;
}

div#track_task_output table th{
font:12px roboto_regular;
background:rgb(250,250,250);
padding:5px;
text-align:left;
}

div#track_task_output table td{
text-align:left;
font:14px segoe_regular;
padding:5px;
}

td.prog_msg p{
/*word-break:break-word;*/
width:400px;
}

td.mod_prgs_field p{
width:100px;
}

td.prg_date p{
width:120px;
}

td.c_loc p{
width:120px;
}

td.prog_stat p{
width:100px;
}

td.prog_origin p{
width:200px;
}

td.prog_dest p{
width:200px;
}

a.mod_prgs{
display:block;
width:75px;
background:url('../images/modify_icon.png') no-repeat 90% center;
padding:10px 40px 10px 0px;
text-align:left;
text-decoration:none;
color:#4AAEE2;
}

a#update_ship_pgrs{
display:block;
text-decoration:none;
width:200px;
background:#2C7D2B url('../images/add_field.png') no-repeat 90% center;
padding:10px;
color:white;
border-radius:5px;
}

div#modify_shipment_div{
position:relative;
padding:0px 300px 10px 100px;
}

div#modify_shipment_div > h4{
text-align:center;
font:14px segoe_regular;
text-transform:uppercase;
width:80%;
margin:auto;
padding:5px;
background:#FFCF49 url('../images/warning_icon.png') 10px center no-repeat;
}


div#b_placeholder{
position:absolute;
z-index:5;
height:100%;
top:0px;
left:0px;
bottom:0px;
right:0px;
background:rgba(50,50,50,.5);
}

div#up_ship_form{
position:relative;
padding:0px 300px 0px 100px;
}

p#remove_succ{
width:300px;
margin:auto;
height:40px;
border-radius:25px;
background:#EBF8A4;
border:1px solid #2C7D2B;
text-align:center;
font:14px segoe_regular;
}

/*=================== customer service page ===================
==============================================================*/
div#customer_content_wrapper{
position:relative;
min-height:500px;
}

figure#customer_header{
height:400px;
margin:20px;
}

figure#customer_header img{
display:block;
width:100%;
height:100%;
}

div#cust_div_1{
position:relative;
padding:10px;
min-height:100px;
}

div#cust_div_1 h1{
text-align:center;
font:32px roboto_regular;
}

div#cust_div_1 p{
text-align:center;
font:18px lato_light;
width:60%;
margin:auto;
line-height:1.6em;
}

div#cust_div_2{
position:relative;
min-height:200px;
display:flex;
flex-wrap:nowrap;
justify-content:center;
padding:50px 100px 50px 100px;
}

div#cust_div_2 div{
position:relative;
/*border:1px dotted red;*/
width:50%;
}

div#cust_div_2 div figure{
width:350px;
height:300px;
margin:auto;
}

div#cust_div_2 div figure img{
display:block;
width:100%;
height:100%;
}

div#cust_div_2 div > h1{
text-align:center;
font:22px roboto_regular;
margin:60px 0px 0px 0px;
}

div#cust_div_2 div ul{
list-style:none;
width:60%;
margin:auto;
}

div#cust_div_2 div ul li{
font:16px segoe_regular;
margin:0px 0px 5px 0px;
}

div#cust_div_2 div ul li span{
font:14px lato_heavy;
}

div#cust_div_2 div form{
display:block;
width:60%;
margin:auto;
}

div#cust_div_2 div form input{
display:block;
}

div#cust_div_2 div form input{
height:40px;
width:300px;
}

div#cust_div_2 div form input[type='text']{
padding:2px 0px 2px 5px;
}

div#cust_div_2 div form input[type='submit']{
border-radius:25px;
border:2px solid #4D128B;
margin:10px 0px 0px 0px;
background:white;
}

div#cust_div_2 div form textarea{
display:block;
width:300px;
height:60px;
margin:10px 0px 0px 0px;
}


div#shipping_content_wrapper{
position:relative;
min-height:500px;
padding:50px 10px 50px 10px;
}

div#shipping_content_div{
position:relative;
min-height:500px;
display:flex;
flex-wrap:wrap;
justify-content:center;
}

div#shipping_content_div div{
position:relative;
width:98%;
/*border:1px solid red;*/
}

div#shipping_content_div div figure{
width:80%;
margin:auto;
height:250px;
}

div#shipping_content_div div figure img{
display:block;
width:100%;
height:100%;
filter:drop-shadow(0px 0px 3px rgba(50,50,50,.2));
}

div#shipping_content_div div h5{
text-align:center;
font:14px lato_heavy;
margin:0px 0px 20px 0px;
}

div#shipping_content_div div ul{
width:90%;
margin:auto;
}

div#shipping_content_div div ul li{
list-style:none;
margin:0px 0px 20px 0px;
border-bottom:1px solid #D2D2D2;
padding:10px 2px 10px 2px;
}

div#shipping_content_div div ul li a{
text-decoration:none;
font:14px roboto_regular;
color:rgb(100,100,100);
}

div#shipping_content_div div ul li a:hover{
text-decoration:underline;
}

footer{
min-height:30px;
padding:10px 0px 10px 0px;
background:#152635;
}

footer > p{
color:white;
font:14px roboto_regular;
text-align:center;
}

/*=====================tracking====================*/
div#tracking_page_body_wrapper{
position:relative;
min-height:300px;
}

div#tracking_wrapper{
position:relative;
/*border:1px solid red;*/
min-height:600px;
}

div#track_div{
position:relative;
/*border:1px dotted red;*/
min-height:210px;
padding:20px 10px 30px 10px;
}

div#track_div h1{
border-bottom:1px solid rgb(230,230,230);
padding:0px 0px 20px 0px;
margin:0px 0px 20px 0px;
position:relative;
font:24px lato_heavy;
}

div#track_div h1:before{
display:block;
position:absolute;
left:0px;
bottom:-10px;
content:'';
width:20px;
height:20px;
border:1px solid rgb(230,230,230);
}

div#track_div form{
display:flex;
flex-wrap:wrap;
gap:10px;
flex-direction:row;
/*border:2px solid blue;*/
}

div#track_div form span{
display:block;
/*border:1px solid red;*/
}

div#track_div form span:nth-child(1),div#track_div form span:nth-child(2){
padding:0px 0px 0px 0px;
width:30%;
}

div#track_div form span:nth-child(3){
padding:0px 0px 0px 0px;
width:99%;
}

div#track_div form span:nth-child(4){
padding:0px 0px 0px 0px;
width:99%;
}

div#track_div form label{
font:18px proxima_nova;
}

div#track_div form input[type="text"]{
display:block;
box-sizing:border-box;
width:100%;
height:50px;
padding:10px;
margin:auto;
font:18px proxima_nova;
}

div#track_div form input[type="submit"]{
display:block;
height:42px;
padding:10px;
width:100%;
margin:auto;
background:#145163;
border:0px;
color:white;
border-radius:2px;
cursor:pointer;
}

div#tracking_output{
position:relative;
min-height:50px;
/*border:1px solid red;*/
}

div#tracking_output figure{
width:200px;
height:200px;
/*border:1px solid red;*/
margin:auto;
display:none;
}

div#tracking_output figure img{
display:block;
width:100%;
height:100%;
}

div#tracking_footer{
position:relative;
bottom:0px;
background:#F0EFEF;
min-height:30px;
padding:30px;
}

div#tracking_footer h1{
font:24px lato_heavy;
margin:0px 0px 10px 0px;
}

div#tracking_footer p{
margin:0px 0px 10px 0px;
font:16px lato_light;
line-height:1.5em;
}

div#display_track_wrapper{
position:relative;
padding:10px 10px 10px 10px;
min-height:50px;
display:flex;
flex-wrap:wrap;
}

div#display_track_wrapper > div{
width:98%;
}

div#display_track_wrapper > div:nth-child(1){
position:relative;
}

div#timeline_div{
/*border:1px solid red;*/
min-height:100px;
}

div#timeline_div::after{
content:'';
position:absolute;
top:0px;
bottom:0px;
left:10px;
width:8px;
background:rgb(250,250,250);
box-shadow:0px 0px 3px rgba(100,100,100,.4);
}

div#timeline_div > div{
position:relative;
left:30px;
width:200px;
height:50px;
padding:10px 5px 10px 50px;
border:1px solid rgb(230,230,230);
margin:5px 0px 20px 0px;
background:rgb(250,250,250);
}

div#timeline_div > div p{
font:14px segoe_regular;
text-transform:capitalize;
}

div#timeline_div > div em{
font:normal 10px Arial;
display:block;
position:absolute;
bottom:5px;
color:rgb(100,100,100);
}

div#timeline_div > div::before{
position:absolute;
content:'';
 width: 20px;
  height: 20px;
  left: 10px;
  background: white url('../images/arrow_up.png') no-repeat center;
  border: 4px solid #145163;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

div#display_track_wrapper > div:nth-child(2){
position:relative;
}

div#progress_bar{
position:relative;
width:99%;
height:30px;
margin:20px 0px 20px 0px;
border-radius:25px;
border:1px solid rgb(250,250,250);
}

div#progress_bar > div{
position:relative;
margin:2px;
height:95%;
transition:.5s width;
border-radius:25px;
}

.transition{
background:#EBF8A4;
border:1px solid #A2D246;
}

.hold{
background:red;
}

p#progressTxt{
font:14px segoe_regular,proxima_nova,lato_light;
text-transform:uppercase;
border-radius:25px;
height:30px;
width:98%;
text-align:center;
padding-top:5px;
background:#E8F7F7;
}

div#msgAlert{
position:relative;
border:1px solid rgb(240,240,240);
width:95%;
height:150px;
margin:10px 0px 0px 0px;
padding:10px;
}

div#msgAlert h5{
font:14px lato_heavy;
}

div#msgAlert p{
font:16px segoe_regular;
}

div#display_track_wrapper > div:nth-child(2) address{
position:relative;
display:flex;
flex-wrap:wrap;
padding:0px 0px 0px 10px;
margin:10px 0px 10px 0px;
}

div#display_track_wrapper > div:nth-child(2) address span{
display:block;
border:1px solid rgb(230,230,230);
margin:auto;
padding:10px;
font:normal 14px segoe_regular;
border-radius:2px;
width:95%;
}

div#display_track_wrapper > div:nth-child(2) address span:nth-child(2){
border:0px;
}

div#display_track_wrapper > div:nth-child(2) address span:nth-child(3){
border:0px;
background:#C9F78B;
}

div#display_track_wrapper > div:nth-child(2) h2{
width:80%;
background:#FFE57E url('../images/warning_icon.png') no-repeat 20px center;
border-radius:25px;
border:1px solid #D67D29;
padding:2px 0px 5px 50px;
font:14px segoe_regular;
}

p.norecord{
width:30%;
margin:auto;
background:#FFB1A2;
border-radius:25px;
border:1px solid #BF0009;
padding:2px 0px 5px 50px;
font:14px segoe_regular;
}

div#display_storage{
position:relative;
min-height:200px;
padding:20px 500px 20px 100px;
background:url('../images/warehouse.webp') no-repeat right center;
}

div#display_storage p{
font:16px segoe_regular;
text-transform:capitalize;
line-height:2em;
position:relative;
}

div#display_storage p:before{
content:'';
display:block;
position:absolute;
left:-10px;
top:5px;
height:20px;
width:5px;
background:#1c566a;
}