@charset "utf-8";
/* CSS Document */

[x-cloak] { display: none !important; }

:root {
	--theme-primary-color: #222;
	--theme-secondary-color: #fed103;
}

body {
	font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:"wdth" 100;
}

.mono {
  font-family: "Noto Sans Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}


img { border-style: none; }

/* Hyperlink colouring */
a:not(.styled, .styled-links a):link {text-decoration: none; color:#888888;}
a:not(.styled, .styled-links a):visited {text-decoration: none; color: #888888;}
a:not(.styled, .styled-links a):hover {text-decoration: none; color: #000000;}
a:not(.styled, .styled-links a):active {text-decoration: none; color: #888888;}

.submitButton:disabled,
.submitButton[disabled] {
	color: #666666;
    background-color: #cccccc;
}


#pDefaultText{
	font-family: arial, helvetica, lucida, sans-serif;
	font-size:11px;
	padding-bottom: 3px;
	padding-left: 3px;
}

#dash{
	width: 100px;
}




#gpluslogo {
	float: left;
	position:relative;
	top: 14px;
	left: 550px;
}

div.extranetheader {
	font-family: arial, helvetica, lucida, sans-serif;
	font-size:18px;
	color: #888888;
	alignment-adjust:middle;
	padding-bottom: 20px;
	padding-top: 20px;
	padding-left: 0px;
}

div.extranetwarning {
	font-family: arial, helvetica, lucida, sans-serif;
	font-size:12px;
	color: #ff0000;
	alignment-adjust:middle;
	padding-bottom: 20px;
	padding-top: 20px;
	padding-left: 0px;
}

div.pageInfo {
	color: #000000;
	font-family: verdana, geneva, sans-serif;
	font-size: 14px;
}

.card-javabutton {
  cursor		: pointer;
  width         : 100%;
  border-color  : transparent;
  border-radius : 6px;
  font-size     : 14px;
  margin-bottom : 0px;
  background    : var(--theme-secondary-color);
  font-weight	: bold;
}
.card-submitbutton {
  cursor		: pointer;
  width         : 100%;
  border-color  : transparent;
  border-radius : 6px;
  font-size     : 14px;
  margin-bottom : 0px;
  background    : var(--theme-secondary-color);
  font-weight	: bold;
}

.card-text {
  width         : 100%;
  margin-bottom : 00px;
  padding-left  : 0px;
  border        : 2px solid #e1e8ee;
  border-radius : 6px;
}
.card-expiry {
  width         : 45%;
  float			: left;
  margin-bottom : 00px;
  padding-left  : 5px;
  border        : 2px solid #e1e8ee;
  border-radius : 6px;
}

.personnelLanguagesSpokenTextBox {
    width: 250px;
 }
.personnelCarRegistrationTextBox {
    width: 270px;
 }
.personnelExtensionNumber{
    width: 100px;
 }
 .personnelContactNameTextBox {
    width: 210px;
 }
 .personnelTelephoneNumberTextBox {
    width: 130px;
 }
.personnelReportsToTextBox {
    width: 200px;
 }
.personnelQualificationsTextBox {
    width: 356px;
 }

.JobTitleTextBox {
    width: 356px;
 }

 .personnelTelephoneNumberIsPublicCheckBox{
    width: 30px;
 }

 .personnelHasMobileNumberCheckBox{
    width: 30px;
 }

 .thumbnail {
	width: 50px;
	height: 50px;
 }
.largeThumbnail {
	width: 100px;
	height: 100px;
 }

div.wrapper {
	background: transparent;
    margin: auto;
    width: 1200px;
}

div.largeIcon {
	background: transparent;
	float: left;
	height: 100px;
	width: 100px;
	padding-top: 0px;
	padding-left: 20px;
	clear: both;
	background-color: #ffffff
}

div.largeIconNext {
	background: transparent;
	float: left;
	height: 100px;
	width: 100px;
	padding-top: 0px;
	padding-left: 90px;
	background-color: #ffffff
}

.menu-description {
	font-family: arial, helvetica, lucida grande, lucida sans, lucida sans unicode, sans-serif, verdana;
	font-size: 14px;
	color:#777777;
}

div.mediumLabel {
	font-family: arial, helvetica, lucida grande, lucida sans, lucida sans unicode, sans-serif, verdana;
	font-size: 14px;
	color:#777777;
	float: left;
	height: 50px;
	width: 900px;
	padding-left: 4px;
	padding-top: 10px;
	background-color: #ffffff;
	font-weight: bold;
}

img.thumbnail {
	 border-radius: 50%;
	 width: 30px;
	 height: 30px;
}

div.iconImage {
	padding-top: 10px;
	height: 80px;
	width: 80px;
}

#contactsgrid {
	font-family: arial, helvetica, lucida, sans-serif;
    border-collapse: collapse;
	width: 100%;
}

#contactsgrid caption {
    background-color: var(--theme-primary-color);
    color: #ffff00;
    font-size: 1em;
	font-weight: bold;
	padding: 0.25em;
}

#contactsgrid td, #contactsgrid th {
    font-size: 0.8em;
    border: 1px solid var(--theme-primary-color);
    padding: 4px 10px 4px 10px;
}

#contactsgrid th {
    font-size: 0.8em;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #4285f4;
    color: #ffffff;
}

#contactsgrid th a:link {color: #ffffff;}
#contactsgrid th a:visited {color: #ffffff;}

#contactsgrid tr.alt td {
    color: #000000;
    background-color: #CCE6FF;
}

.sales-table {
	font-family: arial, helvetica, lucida, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.sales-table caption {
  background-color: var(--theme-primary-color);
  color: #ffff00;
  font-size: 1em;
	font-weight: bold;
	padding: 0.25em;
}

.sales-table td, .sales-table th {
    font-size: 0.8em;
    border: 1px solid var(--theme-primary-color);
    padding: 4px 10px 4px 10px;
}

.sales-table th {
    font-size: 0.8em;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: var(--theme-primary-color);
    color: var(--theme-secondary-color);
}

.sales-table tr:nth-child(2) > th {
    font-size: 0.8em;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: var(--theme-secondary-color);
    color: var(--theme-primary-color);
}

.sales-table th a:link {color: #ffffff;}
.sales-table th a:visited {color: #ffffff;}

.sales-table tr.alt td {
    color: #000000;
    background-color: #CCE6FF;
}

#noteselector {
	font-family: arial, helvetica, lucida, sans-serif;
    width: 100%;
    border-collapse: collapse;
}

#noteselector td, #noteselector th {
    font-size: 0.8em;
    border: 1px solid var(--theme-primary-color);
    padding: 4px 10px 4px 10px;
}

#noteselector th {
    font-size: 0.8em;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #4285f4;
    color: #ffffff;
}

#noteselector th a:link {color: #ffffff;}
#noteselector th a:visited {color: #ffffff;}

#noteselector tr.alt td {
    color: #000000;
    background-color: #CCE6FF;
}


#dashgrid {
	font-family: arial, helvetica, lucida, sans-serif;
    width: 100%;
    border-collapse: collapse;
}

#dashgrid td, #dashgrid th {
    font-size: 0.8em;
    border: 1px solid #4285f4;
    padding: 4px 8px 4px 8px;
}

#dashgrid th {
    font-size: 0.8em;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #4285f4;
    color: #ffffff;
}

#dashgrid th a:link {color: #ffffff;}
#dashgrid th a:visited {color: #ffffff;}

#dashgrid tr.alt td {
    color: #000000;
    background-color: #CCE6FF;
}

/* general purpose centering */

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
  }
/* background color for readonly input */
input:read-only:not([type=button], [type=submit], .styled) {
  background-color: #b3b3ff;
}

/* General purpose table style */
.tablestyle {
	border-collapse: collapse;
	font-family: arial, helvetica, lucida, sans-serif;
	font-size: 1em;
	width: 100%;
}

.tablestyle td, .tablestyle th {
    border: 1px solid var(--theme-primary-color);
    padding: 4px 10px 4px 10px;
}

.tablestyle td {
    font-size: 0.8em;
}

.tablestyle thead th {
    background-color: var(--theme-primary-color);
    color: #ffffff;
}

.tablestyle tbody th {
    font-size: 0.8em;
    background-color: #cce6ff;
}
.tablestyle tbody tr {
    background-color: #ffffee;
}

.tablestyle tfoot th, .tablestyle tfoot tr {
	font-size: 0.8em;
	font-weight: normal;
	background-color: #cce6ff;
}
.tablestyle tfoot th {
	text-align: left;
}
.tablestyle tfoot td {
	text-align: center;
}
/* END OF: General purpose table style */


/* Popup dialog styling */
.min-dialog.ui-dialog.ui-widget.ui-widget-content {
	border: none;
	font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:"wdth" 100;
	background: #ffffff;
	color: black;
	outline: none;
	padding: 0;
}

.min-dialog.ui-dialog .ui-dialog-titlebar {
	padding: 8px 16px;
	border: none;
	background: white;
	color: black;
	border-bottom: 1px solid #e5e7eb;
}

.min-dialog.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
	display: none;
}

.min-dialog.ui-dialog .ui-dialog-titlebar .ui-dialog-title {
	float: unset;
	margin: 0;
	padding: 0;
}

.min-dialog.ui-dialog .ui-dialog-content {
	padding: 0;
	border: none;
	background: white;
	color: black;
}

.min-dialog.ui-dialog .ui-widget-content {
	padding: 0;
	border: none;
	background: white;
	color: black;
}

.min-dialog.ui-widget input {
	font-family: inherit;
	font-size: 0.875rem;
}

.container {
	display: grid;
	grid-template-columns: 0.5fr 1.5fr 1.5fr 0.5fr;
	grid-template-rows: 45px 120px 165px 2.5fr 0.5fr;
	gap: 20px 10px;
	grid-template-areas:
		"bar bar bar bar"
		". hd hd ."
		"bn bn bn bn"
		". mn mn ."
		"ft ft ft ft";
}

.main {
	grid-area: mn;
}

.banner {
	grid-area: bn;
	background-image: url(https://www.fireco.uk/wp-content/uploads/2020/12/2020-12-07-Products-banner.jpg) !important;
	background-position: center;
	height: 100%;
}

.header {
	background-color: #fff;
	z-index: 999999;
	grid-area: hd;
}

.footer {
	background-color: #222;
	width: 100%;
	height: 100%;
	color: #fff;
	grid-area: ft;
	border-top: 10px solid #fed103;
}

.fireco-bar {
	background-color: #fed103;
	grid-area: bar;
	display: flex;
	justify-content: space-between;
	padding-left: 13%;
	padding-right:13%;
}

.bar-info {
	margin-top:auto;
	margin-bottom:auto;
}

.cta a {
	background: #fff;
	font-family: arial, helvetica, lucida, sans-serif;
	font-size: 14px !important;
	color: #434343 !important;
	padding: 5px 20px;
	display: inline-block;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 0px;
	font-weight: bold !important;
	transition: all 0.5s;
}

.cta a:hover {
	background: #222;
	color: #fff !important;
}

.tel {
	font-family: arial, helvetica, lucida, sans-serif;
	color: #222 !important;
	font-weight: 600;
}

.filesgrid-product-heading {
    background-color: var(--theme-secondary-color);
    color: var(--theme-primary-color);
}

.th-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.th-container > div, .th-container > img{
	margin-left: auto;
}

@media screen and (max-width: 700px) {
	.container {
		display: grid;
		grid-template-columns: 0.5fr 1.5fr 1.5fr 0.5fr;
		grid-template-rows: 45px 120px 165px 2.5fr 0.5fr;
		gap: 10px 5px;
		grid-template-areas:
			"bar bar bar bar"
			"hd hd hd hd"
			"bn bn bn bn"
			"mn mn mn mn"
			"ft ft ft ft";
	}
}

body.testing {
  background-image: url('/static/images/fireco-watermark.png');
}