/* app css stylesheet */
/* RESET */


html, body {
    min-height: 100%;
	height:100%;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	
}						
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body{height:100%;font-family: calibri}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
h1{font-size:36px;padding:5px;text-align: center}
h2{font-size:24px}
h3{font-size:18px}
h4{font-size:16px}
h5{font-size:14px}

/* RESET*/
a{color:#fff}
p{word-wrap:break-word}

#main {height: calc(100% - 22px);}
body, #holidayoverlay{background:#006699;color:#fff;
background-image:radial-gradient(#73c2eb, #1d429b);
background-image:-webkit-radial-gradient(#73c2eb, #1d429b);
background-image:-o-radial-gradient(#73c2eb, #1d429b);
background-image:-moz-radial-gradient(#73c2eb, #1d429b);
background-image:-ms-radial-gradient(#73c2eb, #1d429b);
}
input[type=date],input[type=time]{cursor:pointer}

button, input[type=submit] {background: rgba(0, 0, 0, 0) none repeat scroll 0 0;border: 2px solid #fff;border-radius: 20px;color: #fff;cursor: pointer;font-weight: bold; margin: 20px;padding: 5px 10px;}
button{padding: 7px 12px;}
button:hover,input[type=submit]:hover {background: #fff none repeat scroll 0 0;color: #336699;border: 2px solid #fff;padding: 7px 12px;}
#overlay{position: fixed;display: none;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.5);z-index: 2;}
.center {position: relative;text-align: center;}
.centerh{position: relative;text-align: center;}
.inline{display:inline-block}
.lbox{display:inline-block;width:auto;padding:20px; text-align:left;vertical-align:middle;}
#loading{display:none;}
#logout, #user-menu {right:10px;background-color: #3e8e41}
#logout,#user-menu{z-index:999999;position:absolute;right:0;}
.close {font-size: 32px;line-height: 0px;font-weight: bold;cursor: pointer;padding: 10px;top: 0;position: absolute;color: #fff;right: 0;}

.dropbtn {background-color: #04AA6D;padding: 6px;font-size: 16px;width: 95px;text-align: center;}
.dropbtn span{font-size:11px}
.user-menu {display: none;background-color: #f1f1f1;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;}
.user-menu a {color: black;padding: 12px 16px;text-decoration: none;display: block;}
.user-menu a:hover {background-color: #ddd;}
#user-menu:hover .user-menu {display: block;}
#user-menu:hover .dropbtn {background-color: #3e8e41;text-align: left;}

#b2apps {
	color: white;
	font-size: 16px;
	border-bottom: 1px solid #fff;
	width: 76px;
	padding: 0;
	margin-left: 2px;
}

#b2apps:hover {
	cursor: pointer;
}

/*LOGIN-------------------------------------------------------------------------*/


.logtitle{margin:10px 0 50px}

.logline h4{display: inline-block;width: 100px}

.logline{text-align:left; width:435px;border-bottom:1px solid #fff;margin: 20px auto;padding: 5px}

.logline input{border: medium none;display: inline-block;width: 325px;background:none;color:#fff;padding: 0 5px;}


/*APPS-----------------------------------------------------------------------------*/

.theApps {padding: 50px;}
.app{display: inline-block;width: 260px;}
.appsheader img{display: inline-block;width: 200px;vertical-align: middle;}
.apphead{display: inline-block;font-size: 46px;vertical-align: middle;}
.apptitle{font-weight:bold}
.line{border-bottom: 1px solid #fff;margin: 10px auto;width: calc(100% - 40px)}
.titlebox{display: inline-block;margin-top: 6px;width: auto; margin-bottom:14px}
.appbtn{cursor: pointer;display: block;height: 200px;margin: 0 auto;width: 200px;border: 10px solid transparent;border-radius:100%}
.appbtn:hover{border: 10px solid #222;}
/*app images*/
.users{background: #fff url("../images/users.png") no-repeat}
.printer{background: #fff url("../images/printer.png") no-repeat}
.transfers{background: #fff url("../images/transfers2.png") no-repeat}
.tariff{background: #fff url("../images/tariff.png") no-repeat }
.qquote{background: #fff url("../images/QQ.png") no-repeat scroll 0 60px}
.warehouse{background: #fff url("../images/warehouse2.png") no-repeat -5px -5px}
.collections{background: #fff url("../images/collections.png") no-repeat}
.mailing{background: #fff url("../images/mailing.png") no-repeat}
.sailing{background: #fff url("../images/sailing.png") no-repeat}
.imphaulier{background: #fff url("../images/collections.png") no-repeat}
.dash{background: #fff url("../images/stats2.png") no-repeat}
.testapp{background: #fff url("../images/test.png") no-repeat}
.holidays{background: #fff url("../images/holidays2.png") no-repeat}
.policies{background: #fff url("../images/policies.png") no-repeat}
.docs{background: #fff url("../images/docs.jpg") no-repeat}
.fcldata{background: #fff url("../images/fcldata.png") no-repeat}
.rfq{background: #fff url("../images/rfq.png") no-repeat}
.gat{background: #fff url("../images/gat.png") no-repeat}
.transits{background: #fff url("../images/routes.jpg") no-repeat 0 50px}
.exchange{background: #fff url("../images/exchange.png") no-repeat}
.expenses{background: #fff url("../images/exchange.png") no-repeat}
.phones{background: #fff url("../images/phone.png") no-repeat -4px 10px}
.dbcompare{background: #fff url("../images/dbcompare2.png") no-repeat}
.dbfunctions{background: #fff url("../images/dbfunctions.png") no-repeat}
.fms{background: #fff url("../images/fms.png") no-repeat}
.training{background: #fff url("../images/training.png") no-repeat}
.training_accounts{background: #fff url("../images/training_accounts.jpg") no-repeat}
.training_axe{background: #fff url("../images/training_axe.png") no-repeat}
.admin{background: #fff url("../images/admin.png") no-repeat}
.assetrecorder{background: #fff url("../images/assetrecorder.png") no-repeat}
.creditapps{background: #fff url("../images/creditapps2.png") no-repeat}
.globelinkwebsite{background: #fff url("../images/globelinkwebsite.png") no-repeat}


/*PRINTER-----------------------------------------------------------------------------*/

#logform input{font-size:20px}


.label {
    background: #fff000 none repeat scroll 0 0;
    color: #000000;
    display: block;
    height: 100mm;
    margin: 0 auto;
    width: 149mm;
	font-size: 11px;
    font-weight: bold;
	font-family:Helvetica, Arial, sans-serif;
}

#reftext{font-size:80px}

#dest {border-top: 0.5mm solid;height: 41mm;margin: 0 auto;text-align: left;width: 90%;}
#destbox {display: inline-block;height: 100%;width: 105mm;}
#destin {font-size: 50px;}

#ref {height: 33mm;margin: 0 auto;text-align: left;width: 90%;}

#pkgbox {border-left: 0.5mm solid #000;display: inline-block;height: 70%;text-align: center;width: 27mm;position:absolute;height:25mm}
#pkg {font-size: 70px;}

#labelfoot {background: #fff none repeat scroll 0 0;border-top: 1mm solid #0d1085;height: 25mm;}

#help {padding: 50px;position: absolute;right: 0;}
#theDate {display: inline-block;text-align: right;width: 400px;}
#theDate2 {font-size: 16px;margin-left: 10px;vertical-align: middle;}

@page{margin:0;size:landscape;}

#chrome{display:none;}





/* TARIFFS -----------------------------------------------------------------------*/

#tariff-button {width: 150px !important;}
#color-button {width: 130px !important;}
.bottombtn {margin-top: 60px;}
.lbox label {display: block;}


/* Table -----------------------------------------------------------------------*/
 
.blacktable{background: #000;font-size: 28px;width: 100%;}

.playbtn{border:2px solid;border-radius:5px;cursor:pointer;display:inline-block;float:right;font-size:22px;height:33px;margin:0 10px;padding:5px;vertical-align:middle;width:33px;}


@media print{
.top{display:none;}
body, html {position: absolute;width: 149mm;}
body {height: 100mm;padding:0;-ms-margin-left: 40px;-moz-margin-left: 40px;-ms-transform: rotate(90deg);-moz-transform: rotate(90deg);}
#main {height: 100%;-ms-transform: rotate(180deg);-moz-transform: rotate(180deg);}
header, nav, footer {display: none;}
.label{background:#fff;width: auto;height: auto;}
#labelfoot{border:none}
}



/*----------WAREHOUSE -----------------*/
#warehouseform input[type=text] {font-size: 24px !important;}
#warehouseform input {width: 200px;}
#warehouseform .logline{width:350px}
#warehouseform .logline h4{width: 130px;}
#success{font-size: 22px !important;background:#fff;padding:5px;border-radius:5px;display:none}
#comm {width:200px;height:29px;resize:block;font-size:16px}
#showDateDiv{position:absolute;top:0px;left:43%;font-size:15px;}
#showDate{padding:2px;margin-left: 5px;}
#received, #receivedT{font-size:20px;}
#Wtablebox {display:none;background: #000;color: #fff;position:absolute;top: 50%;left: 50%;width: 1000px;z-index:3;margin-left: -500px;margin-top:-250px;max-height: 510px;overflow: auto;}
#warehouseTable{width:100%}
#warehouseTable td {padding: 3px 10px}
#warehouseTable th{padding: 0 0 5px}
#warehouseTable thead {background: #000;color: #fff;font-weight: bold;text-transform: uppercase;}
#warehouseTable tbody {background: #fff;color: #000;}
.dynatable-search {margin-right:40px}
#printDisplay{margin:5px 10px;border:solid #fff;font-size:34px;padding:0;border-radius: 2px;width: 56px;height:55px;background-image:url("../images/print-icon.jpg");background-size: 100%;}
#printDisplay:hover{border-color: yellow;}
#marks{overflow:hidden}

/*------------- COLLECTIONS --------------*/


/* #Wtablebox {display:none;background: #000;color: #fff;position:absolute;top: 50%;left: 50%;width: 1000px;z-index:3;margin-left: -500px;margin-top:-250px;max-height: 510px;overflow: auto;}
*/
#collectionsTable{width:100%}
#collectionsTable td {padding: 3px 10px}
#collectionsTable th{padding: 0 0 5px}
#collectionsTable thead {background: #000;color: #fff;font-weight: bold;text-transform: uppercase;}
#collectionsTable tbody {background: #fff;color: #000;}
.print{border-radius:2px;width:31px;height:30px;background-image:url("../images/print-icon.jpg");background-size:100%;margin:0;}
.print:hover{border:3px solid #fff000;background-image: url("../images/print-icon.jpg");background-size:100%;}
.printed{background-image:url("../images/tick.png");background-size:100%;background-repeat:no-repeat;background-position:center;margin:0;height:25px;}
.printed:hover{background-image:url("../images/tick.png");background-size:100%;background-repeat:no-repeat;background-position:center;}
.printed:hover::after {content: "REPRINT";font-size:8px;margin-top: -4px;margin-left:-55px;position: fixed;}

/*---------------- POLICIES ------------*/

.docbtn{background:#fff;border:2px #000 solid;padding:17px;border-radius:10px;color:#000;font-weight:bold;font-size:3vh;cursor:pointer}
.docbtn:hover {filter: brightness(90%);}
.docbtn:active {active: brightness(100%);}
.centerpol{position:relative;text-align:center;height:100%;}
.policylink{display: inline-block;margin: 10px;width: 338px;}
.thePolicies{padding:50px;width: 74%;margin: 0 auto;}
.fallowD{background:#FFFFA7}
/*---------------- DOCS ------------*/

.doclink{display: inline-block;margin: 10px;width: 80%;}
.theDocs{padding:50px;width: 630px;margin: 0 auto;display: inline-block;vertical-align: top}

/*---------------- TRAINING ------------*/

.trainbtn{background:#fff;width:300px;border:2px #000 solid;padding:6px;border-radius:10px;color:#000;font-size:18px;margin: 5px 0;}
.trainbtn:hover {filter: brightness(90%);}
.trainbtn:active {active: brightness(100%);}
.centerpol{position:relative;text-align:center;height:100%;}
.traininglink{display: inline-block;margin: 10px;width: 338px;vertical-align: top;}
.theTraining{width: 80%;margin: 0 auto;}
.theTraining li a{padding:5px !important;font-size:32px;width:200px}
.theTraining .ui-tabs-panel{text-align: left;}

/*----------------- USERS -------------*/
#userpage{height:100%}
.user {border: 2px solid #fff;width: 93%;padding: 5px;}
.user:hover{background:#1d429b}
#usersblock{height: 90%;overflow-y: scroll;width:231px;border: 8px solid;cursor:pointer;display:inline-block}
#userblock{border: 4px solid #fff;width: 70%;height: 590px;float: right;right: 10%;position: relative;background: #1d429b;}

.radioswitch {
	float: left;
	margin: 15px 30px 5px 0px;
	padding: 0 0px 3px 0;
	background: #ff0000;
	width: 100px;
	height: 32px;
	border-radius: 5px;
	border: 1px solid #444;
}

.userfield {display: inline-block;}
.userfield input,.userfield select {display: block;padding: 4px;font-size: 14px;}
#userdetails{display: inline-block; width:56%;	padding: 50px;}
#permissions{display: inline-block;float: right;margin: 20px;}
#permissions_ticks{columns:2;display: inline-block;}
#email{width: 300px;}
#initials{width: 50px;}
#fmsref{width: 120px;}
.idsmall{font-size:11px;}


.tickbox{font-size: 20px;}

input[type='checkbox'] {
	-webkit-appearance:none;
	width:30px;
	height:30px;
	background:white;
	border-radius:5px;
	border:2px solid #222;
	cursor:pointer
}
input[type='checkbox']:checked {
	background-image: url("images/tick.jpg");
	background-size: contain;
}

.tickbox label {
	vertical-align: top;
	display: inline-block;
	line-height: 33px;
	cursor:pointer
}

#save {
	border-radius: 0;
	bottom: 0;
	position: absolute;
	right: 0;
	width: 80px;
	height: 80px;
	font-size: 20px;
	background: #73d181;
	color: #333;
	margin:0;
}

#save:hover {
width: 100px;
height:100px;
	color: #999;
	background: #228b22;
	border: 2px solid #fff;
	font-size: 24px;
	transition: all 1s;
}

.switch-field {
	display: flex;
	margin-bottom: 36px;
	overflow: hidden;
}

.switch-field input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.switch-field label {
	background-color: #e4e4e4;
	color: rgba(0, 0, 0, 0.6);
	font-size: 14px;
	line-height: 1;
	text-align: center;
	padding: 8px 16px;
	margin-right: -1px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
	transition: all 0.1s ease-in-out;
}

.switch-field label:hover {cursor: pointer;}
.switch-field input:checked + label {background-color: #a5dc86;box-shadow: none;}
.switch-field label:first-of-type {border-radius: 4px 0 0 4px;}
.switch-field label:last-of-type {border-radius: 0 4px 4px 0;}

/*------------------------Alerts---------------------------------------------------------------------*/

#alert {
	display: none;
	width: 25%;
	height: 100px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
 	background-color: white;
	border: 2px solid black;
	border-radius: 20px;
}

#alert_text {
	text-align: center;
	font-size: 20px;
	color: black;
	margin-top: calc(25% / 2 - 25px);
}