@charset "UTF-8";

img {display: block; margin: 0; outline: none; padding: 0; max-width: 100%; width: auto;}
img.seecmsimagedefault, img.seecmsimagedefaultundefined {display: inline-block; margin: 0 0 20px 0!important;}
img.seecmsimageleft, img.seecmsimageleftundefined {float: left; margin: 0 20px 20px 0!important;}
img.seecmsimageright, img.seecmsimagerightundefined {float: right; margin: 0 0 20px 20px!important;}
img.seecmsimagecentre, img.seecmsimagecentreundefined {display: block; margin: 0 auto;}

p.seeformerrors {color: red;}
.required {font-weight: 500; margin-left: 8px; color: red;}

table {width: 100%; margin: 0 0 20px 0; border: 0!important; border-collapse: separate!important; border-spacing: 2px!important;}
table th {padding: 10px; font-size: 90%; color: #ffffff; background: var(--redgradient); font-weight: normal; border-collapse: separate!important; text-align: left; border: 0!important; border-spacing: 2px!important;}
table td {padding: 10px; font-size: 90%; color: #000000; background: #f1f1f1; font-weight: normal; border-collapse: separate!important; text-align: left; border: 0!important; border-spacing: 2px!important;}
table th p, table td p {font-size: 90%; padding: 0;}
table th a {color: #ffffff!important;}
table p.blockbutton {display: inline-block; margin: 0 0 5px;}
table p.blockbutton a {display: inline-block; margin: 0 0 0 10px; padding: 8px 24px; font-size: 80%;}
table p.blockbutton:first-child a {margin: 0;}

input[type="text"], input[type="password"], input[type="tel"], input[type="email"], textarea, select, button {width: 100%; padding: 0 10px; height: 40px; background: #ffffff; border: 1px solid #cccccc; margin: 5px 0 15px 0; outline: none; resize: vertical; font-family: var(--fontBody);}
input[type="file"] {width: 100%; padding: 10px; background: var(--white); border: 1px solid #cccccc; margin: 5px 0 15px 0; font-family: var(--fontBody);}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px white inset; -webkit-text-fill-color: #000000;}
textarea {height: 130px; padding: 10px;}
input[type="checkbox"] {width: 20px; height: 20px; float: left; margin: 2px 10px 0 0;}
input[type="text"], input[type="submit"], textarea, button, input[type="password"], input[type="button"], select {-webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0;}
input[type="radio"] {margin: 0 10px 0 0;}
input[type="submit"], button, input[type="button"] {cursor: pointer; width: auto; outline: none; border: none; background: var(--redgradient); font-size: 80%; padding: 10px 18px; color: #ffffff; border-radius: 0; font-weight: 700; text-transform: uppercase; font-family: var(--fontBody);}
label {color: #000000; font-size: 100%;}
option {margin: 5px 0;}

.slick-slide {outline: none!important;}

/* Old form builder */
.cmsform p {padding: 0;}
.cmsform p.fieldname {padding: 0 0 5px 0;}
.cmsform p.fieldoption {padding: 0 0 20px 0;}
.cmsform p.fieldoption .notes {font-style: italic;}
.cmsform input, .cmsform select, .cmsform textarea {margin: 0 0 5px 0;}
.cmsform input[type="checkbox"] {margin: 0 10px 0 0;}
.cmsform input[type="submit"] {margin: 15px 0;}
.cmsform .errors p {color: red!important; padding: 0 0 20px 0;}

/* New form builder */
.sc-fb p {padding: 0;}
.sc-fb p.sc-fb-field-name {padding: 0 0 5px 0;}
.sc-fb p.sc-fb-field-option {padding: 0 0 20px 0;}
.sc-fb p.sc-fb-field-option .sc-fb-field-notes {font-style: italic;}
.sc-fb input, .sc-fb select, .sc-fb textarea {margin: 0 0 5px 0;}
.sc-fb input[type="checkbox"] {margin: 0 10px 0 0;}
.sc-fb input[type="submit"] {margin: 15px 0;}
.sc-fb .sc-fb-submit-errors {color: red!important; padding: 0 0 20px 0;}
.sc-fb .sc-fb-field-error {color: red!important; float: right;}
.sc-fb .sc-fb-field-required {margin-left: 8px; font-weight: 600;}
.sc-fb .sc-fb-required-desc {float: right;}

.clear {clear: both;}

.form .row.thirds, .form .row.halves {width: 102%; margin-left: -2%;}
.form .row.thirds .input {float: left; width: 31.3%; margin: 0 0 0 2%;}
.form .row.halves .input {float: left; width: 48%; margin: 0 0 0 2%;}
.ff-required {display: inline-block; margin: 0 2px; color: var(--red);}

/* lotte css */
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}

.message {padding: 20px 20px 0 20px; background: #58c3bb; border-radius: 5px; margin: 0 0 15px 0; position: relative;}
.message p {color: #ffffff; padding: 0 0 20px 40px;}
.message p span.icon {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: 20px; font-size: 150%;}
.message.red {background: #e11f26!important;}
.message.green {background: #7dab4a!important;}
.message.orange {background: #e49e00!important;}
.message.grey {background: #8d9091!important;}

.selectize {margin: 5px 0 15px 0!important;}
.selectize-control.single .selectize-input, .selectize-dropdown.single {border-color: #cccccc!important;}
.selectize-control.single .selectize-input {box-shadow: none!important; background: #ffffff!important;}
.selectize-dropdown, .selectize-input, .selectize-input input {font-size: 95%!important; font-family: "Source Sans Pro", sans-serif!important; font-weight: 400!important;}
.selectize-dropdown .option.selected, .selectize-dropdown .option:hover, .selectize-dropdown .optgroup-header:hover {background: #2a9c94; color: #ffffff; cursor: pointer;}
.selectize .highlight {background: none!important; color: #2a9c94!important; padding: 0!important;}

/* colours */
:root {--red: #ae1921; --lightred: rgba(174, 25, 33, 0.5); --darkgrey: #3c3c3b; --medgrey: #666666; --lightgrey: #f2f2f2; --green: #39b54a; --blue: #6a8d92; --white: #ffffff; --black: #000000; --teal: #6a8d92; --blank: red; --redgradient: linear-gradient(180deg, rgba(174, 25, 33, 1) 0%, rgba(133, 25, 31, 1) 100%); /* for no colour */ --fontHeading: "Noto Sans JP", sans-serif; --fontBody: "Open Sans", sans-serif;}

* {box-sizing: border-box; -webkit-print-color-adjust: exact; line-height: 140%;}
html {width: 100%; height: 100%;}
body {font-family: var(--fontBody); font-weight: 400; font-size: 120%; width: 100%; height: 100%; margin: 0; padding: 0; color: var(--darkgrey);}

h1, h2, h3, h4, h5, h6 {font-family: var(--fontHeading); font-weight: 700; margin: 0 0 10px 0; line-height: 140%;}
h1 {font-size: 250%;}
h2 {font-size: 200%;}
h3 {font-size: 180%;}
h4 {font-size: 130%;}
ul {margin: 0 0 20px 20px; padding: 0;}
li {margin: 0 0 5px 0;}
hr {width: 100%; height: 1px; background: #cccccc; border: none; margin: 10px auto; clear: both;}
strong {font-weight: 900;}
a {text-decoration: none; cursor: pointer; color: var(--blank);}
a:hover {color: var(--blank);}
div {display: block;}
p {margin: 0; padding: 0 0 20px 0;}
.awesomeIcon {font-family: "Font Awesome 5 Free"; font-weight: 900;}
div:after, form:after, ul:after, input:after, section:after, article:after, header:after, footer:after, nav:after, aside:after, hgroup:after {clear: both; content: ""; display: block; height: 0; visibility: hidden;}
i {margin: 0 5px 0 0;}

/* generic div boxes */
.left, .right {float: left;}
.textleft {text-align: left;}
.textright {text-align: right;}
.textcenter {text-align: center;}

.col2, .col3, .col4 {display: block; float: left; min-height: 5px; position: relative;}
.col2 {width: 49%; margin: 0 0 0 2%;}
.col2:first-of-type {margin: 0;}
.col4 {width: 22%; margin: 0 0 0 4%;}
.col4:first-of-type {margin: 0;}

.content-wrap {padding: 0 20px; background: var(--lightgrey);}
.content-wrap .content {width: 100%; max-width: 1440px; margin: 0 auto; padding: 40px; box-sizing: border-box; z-index: 5; margin-top: -80px; background: var(--white) url(../images/logo-background.png) no-repeat right bottom; background-size: 50%; box-shadow: rgba(17, 17, 26, 0.1) 0 4px 16px, rgba(17, 17, 26, 0.05) 0 8px 32px;}
.content .left {width: 30%; margin: 0 5% 0 0; float: left;}
.content .right {width: 65%; float: right;}

.content .left.mobile {display: none;}

.content-wrap.home {background: var(--white) url(../images/logo-background.png) no-repeat right bottom; background-size: 50%;}
.content-wrap.home .content {margin-top: 0; box-shadow: none; background: none;}
.content-wrap.home .content .intro {max-width: 950px; margin: 0 auto 40px auto;}

h1.pagetitle {position: relative;}
h1.pagetitle:before {content: ""; visibility: visible; width: 80px; height: 3px; background: var(--red); position: absolute; top: 0; left: 0;}
.center {margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.verticalCenter {position: absolute; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%);}
p.blockbutton, p.blockbuttonGreen {display: block;}
.blockbutton a {padding: 10px 18px; background: var(--redgradient); color: var(--white); display: inline-block; font-size: 80%; font-weight: 700; text-transform: uppercase;}
.blockbutton.green a {background: green;}
.blockbuttonGreen a {padding: 10px 18px; background: green; color: var(--white); display: inline-block; font-size: 80%; font-weight: 700; text-transform: uppercase;}
.blockbutton a.green {background: green;}
.blockbutton a.orange {background: orange;}
.blockbutton a.grey {background: var(--darkgrey);}
.blockbutton a.selected {position: relative; padding: 10px 32px 10px 18px;}
.blockbutton a.selected:before {font-family: "Font Awesome 5 Free"; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-weight: 900; content: "\f058"; position: absolute; top: 50%; right: 8px; visibility: visible; font-size: 95%; color: var(--white); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.blockbutton.centered {text-align: center;}

p.arrowbutton {display: inline-block;}
.arrowbutton a {padding: 0 20px 0 0; color: var(--red); display: block; font-size: 80%; font-weight: 700; position: relative;}
.arrowbutton a:before {font-family: "Font Awesome 5 Free"; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-weight: 900; content: "\f138"; position: absolute; top: 1px; right: 0; visibility: visible; font-size: 95%; color: var(--red);}
.embed-container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;}
.embed-container iframe, .embed-container object, .embed-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.blockbutton.nocaps a {text-transform: none;}
.seecmswebsiteuserregisteruser input[type="button"], .seecmswebsiteuserregisteruser input[type="submit"] {width: 100%; padding: 8px 18px; margin: 5px 0 0 0; font-size: 90%;}

.error * {color: var(--blank); font-weight: 700;}
div.noticebox {background-color: var(--lightgrey); padding: 10px; font-size: 90%;}

/* header */
.headerspacing {height: 155px;}
.header-container {position: fixed; top: 0; left: 0; box-sizing: border-box; width: 100%; z-index: 10; background: var(--lightgrey); -webkit-box-shadow: 0 0 26px -9px rgb(0 0 0 / 75%); -moz-box-shadow: 0 0 26px -9px rgba(0, 0, 0, 0.75); box-shadow: 0 0 26px -9px rgb(0 0 0 / 75%);}
.header-wrap {padding: 0 20px; background: var(--lightgrey);}
.header {width: 100%; max-width: 1440px; margin: 0 auto; padding: 10px 0; position: relative; transition: all 0.5s ease;}
.header .left {width: 180px; transition: all 0.5s ease;}
.header .left a.logo {width: 100%; height: 150px; background: url(../images/svgs/logo.svg) no-repeat; display: block; background-size: contain;}
.header .left a.logo.contractorlogo {background: none; display: flex; flex-direction: column; justify-content: center;}
.header .left a.logo.contractorlogo img {display: block; width: 100%; max-width: 100%; height: 100%; object-fit: contain;}
.header .left a.logo:after {display: none;}
.header .right {float: right;}
.header .right .socials {padding: 10px 0 0 0; text-align: right; transition: all 0.5s ease;}
.header .right .socials p.blockbutton {display: inline-block; padding: 0 0 0 20px;}
.header .right .socials p.blockbutton a {display: block; color: #ffffff;}
.header .right p.name {text-align: right; padding: 10px 0 0 0; font-size: 90%; transition: all 0.5s ease;}
.header .right p.name span {font-size: 70%; padding: 7px 16px; background: green; color: #ffffff; position: relative; top: -1px; text-transform: uppercase; margin-left: 10px; display: inline-block;}
.header .right p.name span.orange {background: orange;}
.header .right p.name span.blue {background: blue;}
.header .right p.name span.red {background: var(--red);}

.headerscrolled .header-wrap .header {padding: 10px 0;}
.headerscrolled .header-wrap .left {width: 95px;}
.headerscrolled .header-wrap .left a.logo {height: 85px;}
.headerscrolled .header-wrap .right .socials {display: none;}
.headerscrolled .header-wrap .right .nav {top: 55%; transform: translateY(-55%); position: absolute; right: 0; padding: 0;}
.headerscrolled .header-wrap .right .nav li {font-size: 100%;}
.headerscrolled .header-wrap .right p.name {padding: 0 0 10px 0; font-size: 80%;}

/* User status is view page */
.worker span.status {padding: 3px 5px; color: #ffffff;}
.worker span.status.pending {background: orange;}
.worker span.status.approved {background: green;}
.worker span.status.inactive {background: blue;}
.worker span.status.onhold {background: var(--red);}

/* nav */
.nav {padding: 15px 0 0 0; font-family: var(--fontHeading); font-weight: 800; text-transform: uppercase; transition: all 0.5s ease;} /* margin top = a.logo height - 23px (nav height in inspector) to make them inline */
.nav ul {list-style-type: none; margin: 0; float: right;}
.nav li {display: inline; margin: 0 0 0 30px; position: relative; font-size: 100%;}
.nav a {color: var(--darkgrey);}
.nav a:hover {color: var(--red);}
.nav li.selected a {color: var(--red);}

.nav .search {max-width: 200px; float: right;}
.nav .search input[type="text"] {width: 80%; margin: 0; border: none;}
.nav .search input[type="submit"] {width: 20%; margin: 0; background: var(--red); padding: 0;}

.mobile-nav {display: none;}

.title h1 {margin: 0;}

/* just for the login screen */
.login-container {min-height: 100%; background: var(--lightgrey);}
.login-container .header .content {padding: 20px;}
.login-container .content {padding: 0 10px;}
.login-container .mobile-header-wrap, .login-container .mobile-nav, .login-container .nav {display: none;}
.login-container .left {width: 100%;}
.login-container a.logo {margin: 0 auto;}

.login {width: 100%;}
.login label {font-size: 90%;}
.login input[type="submit"] {width: 100%; font-size: 90%;}
.login p {text-align: center; margin: 5px; font-size: 90%;}
.login a {width: 100%; background: var(--darkgrey); padding: 10px; display: block; text-align: center; color: var(--white); font-weight: 700; font-size: 90%; text-transform: uppercase;}
.login .input.address input {margin: 5px 0;}
.login .input.address input:last-of-type {margin: 5px 0 15px 0;}
.login select {background: #ffffff url(../images/chevron-down-solid-red.png) no-repeat 98% center; background-size: 14px 9px; cursor: pointer;}
.login p.or {padding: 10px 0;}

.login .recoverpassword {margin: 5px 0 0 0;}

.login input::placeholder {color: var(--black);}
.login input:-ms-input-placeholder {color: var(--black);}
.login input::-ms-input-placeholder {color: var(--black);}

/* title */
.title-wrap {background-color: var(--red); padding: 0 20px; position: relative;}
.title {text-align: center; padding: 40px 0 120px 0; width: 100%; max-width: 1440px; margin: 0 auto;}
.title h1 {color: var(--white);}

.banners {position: relative;}
.banners img {width: 100%;}
.banners img.mobile {display: none;}
.banners .overlay {position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 6px);}
.banners .overlay .inner {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); max-width: 1440px; width: 100%;}
.banners .overlay .inner .text {max-width: 740px; padding: 20px 20px 30px 20px; box-sizing: border-box; background: rgba(0, 0, 0, 0.5);}
.banners .overlay .inner .text h2 {color: var(--white);}
.banners .overlay .inner .text p {color: var(--white); padding: 0 0 15px 0; font-size: 120%;}
.banners .overlay .inner .text p.blockbutton {display: inline-block; padding: 0; font-size: 90%;}
.banners .overlay .inner .text p.blockbutton a {display: block; background: var(--redgradient); color: var(--white); padding: 10px 32px;}

.banners.top .overlay .inner {bottom: auto; top: 0;}
.banners.top .slick-dots {top: auto; bottom: 100px;}

.banners .slick-dots {position: absolute; top: 20px; z-index: 9; padding: 0; margin: 0 auto; text-align: center; left: 50%; transform: translateX(-50%);}
.banners .slick-dots li {float: right; width: 15px; height: 15px; line-height: 12px; margin: 0 10px 0 0; padding: 0; list-style: none;}
.banners .slick-dots li button {width: 15px; height: 15px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 1); margin: 0; padding: 0; cursor: pointer; text-indent: -9999px;}
.banners .slick-dots li.slick-active button {background: var(--redgradient);}
.banners .slick-dots li:before {display: none;}

.features {position: relative;}
.features .line {width: 5px; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: var(--red);}
.features .feature {position: relative; width: 100%; margin: 0 0 60px 0; float: none;}
.features .feature .text {float: left; width: 44%;}
.features .feature .text p {font-size: 90%;}
.features .feature .images {float: right; width: 44%;}
.features .feature .images .image {width: 100%; position: relative; box-shadow: rgba(17, 17, 26, 0.1) 0 4px 16px, rgba(17, 17, 26, 0.05) 0 8px 32px;}
.features .feature .images .image:after {width: 35%; height: 5px; background: var(--redgradient); position: absolute; bottom: -20px; right: 0; z-index: 5; content: ""; visibility: visible;}
.features .feature .images .image img {width: 100%;}

.features .feature .arrow {width: 25px; height: 44px; background: url(../images/caret-left-solid-red.png) no-repeat center center; background-size: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-left: -10px;}
.features .feature.flip .arrow {width: 25px; height: 44px; background: url(../images/caret-right-solid-red.png) no-repeat center center; background-size: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-left: 10px;}

.features .feature.flip .images {float: left;}
.features .feature.flip .images .image:after {left: 0;}
.features .feature.flip .text {float: right;}

.boxes {width: 102%; margin-left: -2%;}
.boxes .box.button {width: 23%; margin: 0 0 2% 2%; float: left; padding: 30px 20px; box-sizing: border-box; text-align: center; cursor: pointer;}
.boxes .box.button {background: var(--redgradient);}
.boxes .box.button:hover {opacity: 0.7;}
.boxes .box.button .icon p {font-size: 500%; line-height: 100%; padding: 0 0 10px 0;}
.boxes .box.button .icon p i {color: var(--white);}
.boxes .box.button .text {padding: 0 20px; text-transform: uppercase;}
.boxes .box.button p {padding: 0;}
.boxes .box.button p a {color: var(--white); font-weight: 700;}

.title .boxes {width: 100%; margin: 0; text-align: center;}
.title .boxes .box.button {float: none; display: inline-block; width: 18%; padding: 20px 15px;}
.title .boxes .box.button .icon p {font-size: 300%;}

.skilledworkers {margin: 20px 0;}
/* .skilledworkers .buttons { width: 104%; margin:  0 0 40px -4%; }
.skilledworkers .buttons .button { width: 29.3333%; float: left; margin: 0 0 0 4%; background: var(--redgradient);  } */
.skilledworkers .buttons {width: 100%; margin: 0 0 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.skilledworkers .buttons .button {flex-grow: 1; background: var(--redgradient);}
.skilledworkers .buttons .button p {text-align: center; color: var(--white); font-size: 110%; font-weight: 700; padding: 0; text-transform: uppercase;}
.skilledworkers .buttons .button p a {color: var(--white); display: block; padding: 10px 0;}
.skilledworkers .buttons .button.is-checked {opacity: 0.7;}

.skilledworkers .skilledsearch {position: relative; margin: 0 0 20px 0;}
.skilledworkers .skilledsearch .quicksearch {margin: 0; position: relative; padding-right: 60px;}
.skilledworkers input[type="submit"] {position: absolute; top: 0; right: 0; padding-right: 0; width: 40px; background: var(--red) url(../images/search-icon-white.png) no-repeat center center; background-size: 16px; text-indent: -999999px; height: 40px;}

.skilledworkers.application .buttons .button p {font-size: 90%;}

.skilledworkers .boxes {width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0;}
.skilledworkers .boxes .box {position: relative; cursor: pointer; display: flex; align-items: center; min-width: 0;}
.skilledworkers .boxes:after, .skilledworkers .boxes *:after {display: none;}
.skilledworkers .boxes .box:after, .skilledworkers .boxes .box *:after {display: none;}

.skilledworkers .boxes .box .icon {background: var(--red); padding: 17px 26px; text-align: center; border-radius: 100%; display: flex; align-items: center; justify-content: center; aspect-ratio: 1;}

.skilledworkers .boxes .box .icon i {color: #ffffff; font-size: 4rem; margin: 0;}
.skilledworkers .boxes .box .icon img {width: 100%; max-width: 40px;}
.skilledworkers .boxes .box .text {flex-grow: 1; background: #f2f2f2; padding: 20px 10px; box-sizing: border-box; position: relative; height: 100%;}
.skilledworkers .boxes .box .text:before {display: block!important; content: ""; width: 67.5px; height: 100%; position: absolute; top: 0; left: -67.5px; background: inherit; z-index: -1;}
.skilledworkers .boxes .box .text p {padding: 0; font-size: 75%;}
.skilledworkers .boxes .box .text p a {color: var(--darkgrey);}
.skilledworkers .boxes .box .text p:first-child {font-weight: 700;}
.skilledworkers .boxes .box .text p.status {position: absolute; top: 8px; right: 8px; padding: 6px 12px; background: var(--darkgrey); color: var(--white); font-size: 50%; border-radius: 2px; font-weight: 700; text-transform: uppercase;}
.skilledworkers .boxes .box .text p.status.approved {background: green;}
.skilledworkers .boxes .box .text p.status.pending {background: orange;}
.skilledworkers .boxes .box .text p.status.inactive {background: blue;}
.skilledworkers .boxes .box .text p.status.onhold {background: var(--red);}

/* WM 13/08/24 TASK #41179817 */
.users {margin: 20px 0;}
/* .users .buttons { width: 104%; margin:  0 0 40px -4%; }
.users .buttons .button { width: 29.3333%; float: left; margin: 0 0 0 4%; background: var(--redgradient);  } */
.users .buttons {width: 100%; margin: 0 0 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.users .buttons .button {flex-grow: 1; background: var(--redgradient);}
.users .buttons .button p {text-align: center; color: var(--white); font-size: 110%; font-weight: 700; padding: 0; text-transform: uppercase;}
.users .buttons .button p a {color: var(--white); display: block; padding: 10px 0;}
.users .buttons .button.is-checked {opacity: 0.7;}

.users .skilledsearch {position: relative; margin: 0 0 20px 0;}
.users .skilledsearch .quicksearch {margin: 0; position: relative; padding-right: 60px;}
.users input[type="submit"] {position: absolute; top: 0; right: 0; padding-right: 0; width: 40px; background: var(--red) url(../images/search-icon-white.png) no-repeat center center; background-size: 16px; text-indent: -999999px; height: 40px;}

.users.application .buttons .button p {font-size: 90%;}

.users .boxes {width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0;}
.users .boxes .box {position: relative; display: flex; align-items: center; min-width: 0;}
.users .boxes:after, .users .boxes *:after {display: none;}
.users .boxes .box:after, .users .boxes .box *:after {display: none;}

.users .boxes .box .icon {background: var(--red); padding: 17px 26px; text-align: center; border-radius: 100%; display: flex; align-items: center; justify-content: center; aspect-ratio: 1;}

.users .boxes .box .icon i {color: #ffffff; font-size: 4rem; margin: 0;}
.users .boxes .box .text {flex-grow: 1; background: #f2f2f2; padding: 20px 10px; box-sizing: border-box; position: relative; height: 100%;}
.users .boxes .box .text:before {display: block!important; content: ""; width: 67.5px; height: 100%; position: absolute; top: 0; left: -67.5px; background: inherit; z-index: -1;}
.users .boxes .box .text p {padding: 0; font-size: 75%;}
.users .boxes .box .text p a {color: var(--darkgrey);}
.users .boxes .box .text p:first-child {font-weight: 700;}
.users .boxes .box .text p.status {position: absolute; top: 8px; right: 8px; padding: 6px 12px; background: var(--darkgrey); color: var(--white); font-size: 50%; border-radius: 2px; font-weight: 700; text-transform: uppercase;}
.users .boxes .box .text p.status.approved {background: green;}
.users .boxes .box .text p.status.pending {background: orange;}
.users .boxes .box .text p.status.inactive {background: blue;}
.users .boxes .box .text p.status.onhold {background: var(--red);}

.workers .controls {margin: 0 0 40px 0;}
.workers .controls p {padding: 0; font-weight: 700;}
.workers .controls p a {display: inline-block; background: var(--red); color: var(--white); padding: 6px 16px; font-size: 70%; margin: 0 10px 0 0;}

.workers .worker .cols {width: 102%; margin-left: -2%;}
.workers .worker .cols .col {width: 31.3333%; float: left; margin: 0 0 2% 2%; box-sizing: border-box; padding: 0 40px 0 0; border-right: 2px solid var(--lightgrey);}
.workers .worker .cols .col:last-child, .workers .worker .cols.halves .col:last-child {border-right: 0;}

.workers .worker .cols.halves {width: 102%; margin-left: -2%;}
.workers .worker .cols.halves .col {width: 48%; float: left; margin: 0 0 2% 2%; box-sizing: border-box; padding: 0 40px 0 0; border-right: 2px solid var(--lightgrey);}

.workers .worker .cols.rightwider {width: 102%; margin-left: -2%;}
.workers .worker .cols.rightwider .col {width: 31.3333%; float: left; margin: 0 0 2% 2%; box-sizing: border-box; padding: 0 40px 0 0; border-right: 2px solid var(--lightgrey);}
.workers .worker .cols.rightwider .col:last-child {width: 62.6666%; float: left; margin: 0 0 2% 2%; box-sizing: border-box; padding: 0 40px 0 0; border: none;}

.workers .worker .cols.leftwider {width: 102%; margin-left: -2%;}
.workers .worker .cols.leftwider .col {width: 62.6666%; float: left; margin: 0 0 2% 2%; box-sizing: border-box; padding: 0 40px 0 0; border-right: 2px solid var(--lightgrey);}
.workers .worker .cols.leftwider .col:last-child {width: 31.3333%; float: left; margin: 0 0 2% 2%; box-sizing: border-box; padding: 0 40px 0 0; border: none;}

.workers .worker .input {margin: 0 0 20px 0;}
.workers .worker .input p {padding: 0;}

.cols.half {width: 104%; margin-left: -4%;}
.cols.half .col {width: 46%; float: left; margin: 0 0 0 4%;}

.input.selectbox select {background: #ffffff url(../images/chevron-down-solid-red.png) no-repeat 98% center; background-size: 14px 9px; cursor: pointer;}

.editworkers .cols {width: 104%; margin-left: -4%;}
.editworkers .cols .col {width: 29.3333%; float: left; margin: 0 0 0 4%;}
.editworkers select {background: #ffffff url(../images/chevron-down-solid-red.png) no-repeat 98% center; background-size: 14px 9px;}
.editworkers .cols .col .input {margin: 0 0 20px 0;}
.editworkers .cols .col .input input[type="text"], .editworkers .cols .col .input select, .editworkers .cols .col .input textarea {margin: 5px 0 0 0;}

.input.checkbox label {display: block; position: relative; padding-left: 35px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.input.checkbox label input[type="checkbox"] {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.input.checkbox label .checkmark {position: absolute; top: 0; left: 0; height: 20px; width: 22px; background: var(--white); border: 1px solid #cccccc;}
.input.checkbox label:hover input ~ .checkmark {background: var(--white);}
.input.checkbox label input:checked ~ .checkmark {background: var(--red); border-color: var(--red);}
.input.checkbox label .checkmark:after {content: ""; position: absolute; display: none;}
.input.checkbox label input:checked ~ .checkmark:after {display: block;}
.input.checkbox label .checkmark:after {left: 7px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

input[type="radio"]:after {width: 15px; height: 15px; border-radius: 15px; top: -2px; left: -1px; position: relative; background-color: #cccccc; content: ""; display: inline-block; visibility: visible; border: 2px solid white;}
input[type="radio"]:checked:after {width: 15px; height: 15px; border-radius: 15px; top: -2px; left: -1px; position: relative; background-color: var(--red); content: ""; display: inline-block; visibility: visible; border: 2px solid white;}

.row.flex {display: flex; flex-direction: column; gap: 0; width: 100%!important; margin: 0!important;}
.row.flex.grey {background: var(--lightgrey); padding: 20px;}
[hidden] {display: none!important;}

.form .row.flex.thirds, .form .row.flex.halves {flex-direction: row; justify-content: space-between; gap: 20px;}
.form .row.flex.grid-two {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
.form .row.flex.thirds .input, .form .row.flex.halves .input {width: 100%; margin: 0; float: none;}

.seecrmdeleteparent {text-align: right;}
.seecrmdeleteparent i {margin: 0;}

.duplicate-three {width: 100%; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.documentrow {width: 100%; float: none; margin: 0;}
.seecrmduplicate {margin: 20px 0 0;}

/* account */
.accountactions {margin: 20px 0;}

/* .answer {margin: 0 20px 0 0; display: inline-block;}
.rtw { margin: 40px auto 40px auto; border: 2px solid var(--darkgrey); padding: 40px 20px; background: var(--lightgrey); position: relative; }
.rtw form { text-align: center; }
.rtw p { color: var(--black); padding: 0 0 10px 0; }
.rtw input[type="submit"] { margin: 20px 0 0 0; }
.rtw p.blockbutton { padding: 0 0 20px 0; }
.rtw label { color: var(--darkgrey); display: inline-block; margin: 0 0 5px 0; }
.rtw .input { margin: 0 0 40px 0; }

.rtw .ifyes { margin: 20px 0 0px 0; }
.rtw .ifyes select, .rtw .ifyes input[type="file"], .rtw input[type="text"], .rtw input[type="email"] { margin: 0 auto; display: block; }

.rtw select { background: #ffffff url(../images/chevron-down-solid-red.png) no-repeat 98% center; background-size: 14px 9px; }
.rtw .halves { width: 102%; margin-left: -2%; }
.rtw .halves .input { width: 48%; margin: 0 0 40px 2%; float: left; }

.rtw .input.checkbox label {display: inline-block; position: relative; padding-left: 35px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 10px;}
.rtw .input.checkbox label input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.rtw .input.checkbox label .checkmark { position: absolute; top: 4px; left: 0; height: 20px; width: 22px; background: var(--white); border: 1px solid #ccc }
.rtw .input.checkbox label:hover input ~ .checkmark {background: var(--white);}
.rtw .input.checkbox label input:checked ~ .checkmark {background: var(--red); border-color: var(--red); }
.rtw .input.checkbox label .checkmark:after { content: ""; position: absolute; display: none;}
.rtw .input.checkbox label input:checked ~ .checkmark:after {display: block;}
.rtw .input.checkbox label .checkmark:after {left: 7px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

.rtw .progressbar { padding: 0 0 40px 0; }
.rtw .progressbar .buttons { position: absolute; top: 25px; right: 40px; }
.rtw .progressbar p { text-transform: uppercase; font-weight: 700; padding: 0 0 10px 0; font-size: 120%; }
.rtw .progressbar .bar { background: #ffffff; padding: 10px; overflow: hidden; border-radius: 10px; }
.rtw .progressbar .bar span { display: block; border-radius: 10px; width: 1%; background: var(--redgradient); height: 10px; }

.rtw .intro { text-align: center; margin: 0 auto 20px auto; max-width: 880px;}
.rtw .intro p { font-size: 80%; }

.rtw input::placeholder { color: var(--medgrey); }
.rtw input:-ms-input-placeholder { color: var(--medgrey); }
.rtw input::-ms-input-placeholder { color: var(--medgrey); } */

.extrainfo {display: inline-block; font-size: 70%; position: relative;}
.extrainfo span {display: none; background: var(--lightgrey); padding: 2px; position: absolute; top: -5px; width: 136px; font-family: var(--fontBody); font-size: 80%;}
.extrainfo i {margin: 0 0 0 3px;}
.extrainfo i:hover span {display: inline-block;}

.questions {border-radius: 20px; /* padding: 30px 40px; */ position: relative;}
.questions .question {text-align: center; display: none; max-width: 80%; width: 100%; margin: 0 auto;}
.questions .question.active {display: block;}
.questions .question h4 {text-transform: none; font-size: 170%; font-weight: 700; letter-spacing: 0; padding: 0 0 20px 0;}
.questions .question h4.subquestion {font-size: 120%; padding: 20px 0 10px 0;}
.questions .question h5 {text-transform: none; font-size: 140%; font-weight: 700; letter-spacing: 0; padding: 0 0 30px 0;}
.questions .question p {font-size: 100%; padding: 0 0 20px 0;}
.questions .question p.clickall {font-size: 80%; font-style: italic;}
.questions .question p.count {font-weight: 700; padding: 0 0 20px 0;}
.questions .question a.mail {text-decoration: none; font-weight: 700; color: var(--red);}
.questions .question .left {float: left; width: 40%;}
.questions .question .right {float: right; width: 50%;}
.questions .question .buttons .button p {font-size: 100%; padding: 0;}
.questions .question .optionsgrid table {margin: 0;}
.questions .question .optionsgrid th {vertical-align: top; background: none; font-weight: 700; color: #000000; padding: 10px 10px 10px 0; font-size: 100%; border-spacing: 0!important; border-bottom: 1px solid #245b67!important; border-collapse: collapse!important;}
.questions .question .optionsgrid td {vertical-align: top; background: none; font-weight: 300; color: #000000; padding: 10px 10px 10px 0; font-size: 100%; border-spacing: 0!important; border-bottom: 1px solid #245b67!important; border-collapse: collapse!important;}
.questions .question.wideright .left {width: 30%;}
.questions .question.wideright .right {width: 60%;}
.questions .question input[type="checkbox"] {margin-top: 4px;}
.questions .buttons .button {float: none; display: inline-block; margin: 0 5px 10px 5px; color: var(--white); background-color: var(--darkgrey); padding: 15px 20px; font-weight: 700; font-size: 95%; border: none; border-radius: 10px; cursor: pointer; box-sizing: border-box; line-height: 110%; text-align: center;}
.questions .buttons .button.selected {background: var(--red);}
.questions .buttons .button:hover {opacity: 0.5;}
.questions .buttons input[type="checkbox"], .questions .buttons input[type="radio"] {opacity: 0; position: fixed; width: 0; height: 0;}
.questions .buttons input[type="checkbox"]:checked + label, .questions .buttons input[type="radio"]:checked + label {background-color: var(--red); color: var(--white);}
.questions .buttons input[type="checkbox"]:focus + label, .questions .buttons input[type="radio"]:focus + label {border: none;}
.questions .buttons label:hover {background-color: var(--red); color: var(--white);}
.questions .questionnav {padding: 70px 0 0 0;}
.questions .questionnav p {padding: 0; font-size: 90%;}
.questions .questionnav p.next {float: right;}
.questions .questionnav p.prev {float: left;}
.questions .questionnav .hidden {opacity: 0.4;}
.questions .progressbar {padding: 0 0 70px 0;}
.questions .progressbar p {text-transform: uppercase; font-weight: 700; padding: 0 0 10px 0; font-size: 120%;}
.questions .progressbar .bar {background: var(--lightgrey); padding: 10px; overflow: hidden; border-radius: 10px;}
.questions .progressbar .bar span {display: block; border-radius: 10px; width: 1%; background: var(--red); height: 10px;}
.questions .icon {width: 124px; height: 150px; background: url(../images/svgs/icon.svg) no-repeat 0 0; background-size: 100%; margin: 0 auto 20px auto;}
.questions .textareasmall textarea {height: 40px; width: 50%; margin: 0 auto;}
.questions .arrowbutton a {padding: 8px 32px; display: block; color: var(--white); background: var(--red); font-weight: 700; text-transform: uppercase;}

.questions .date {width: 102%; margin-left: -2%;}
.questions .date span.day, .questions .date span.month, .questions .date span.year {width: 31.3333%; float: left; margin: 0 0 0 2%;}

/* .ifbrit, .ifnotbrit #Q11, .ifnotbrit #Q12, .ifnotbrit #Q13, .ifnotbrit #Q14, .ifnotbrit #Q15 {display:none;} */
/* .ifnoteurope #Q16, .ifnoteurope #Q17, .ifnoteurope #Q18, .ifnoteurope #Q19,.ifnoteurope #Q20, .ifnoteurope #Q21,.ifnoteurope #Q22, .ifnoteurope #Q23, .cannotverify, .submitform, .ifyes, .codes {display:none;} */
.submitform p {line-height: 110%;}
.submitform input[type="submit"] {display: block; background: var(--redgradient); width: 100%; font-weight: 700; padding: 10px 18px; height: auto; font-size: 80%;}
.contactform input[type="submit"] {width: 100%;}

.contactdetails .textbox {padding: 20px; box-sizing: border-box; background: var(--red) url(../images/logo-background.png) no-repeat right bottom; background-size: 70%; max-width: 500px; position: relative; margin: 0 0 40px 0;}
.contactdetails .textbox:before {background: url(../images/textbox-red.png) no-repeat center center; background-size: 100%; width: 45px; height: 43px; position: absolute; bottom: -43px; left: 40%; visibility: visible; content: "";}
.contactdetails .textbox p, .contactdetails .textbox h4, .contactdetails .textbox p a {color: var(--white);}
.contactdetails .textbox p {font-size: 90%;}

.filterbox {padding: 20px; margin: 0 0 20px 0; background: var(--lightred);}
.filterbox .input {position: relative;}
.filterbox .input input {margin: 0;}
.filterbox .input input[type="submit"] {position: absolute; top: 0; right: 0; padding-right: 0; width: 40px; background: var(--red) url(../images/search-icon-white.png) no-repeat center center; background-size: 16px; text-indent: -999999px; height: 40px;}

.signup-wrap {padding: 0 20px; background: var(--blue);}
.signup-wrap .signup {width: 100%; max-width: 1440px; margin: 0 auto; padding: 40px 80px;}
.signup-wrap .signup .left {width: 46%; float: left;}
.signup-wrap .signup .left p, .signup-wrap .signup .left h2 {color: var(--white);}
.signup-wrap .signup .left p {font-size: 80%;}
.signup-wrap .signup .left .quicklinks {margin: 10px 0;}
.signup-wrap .signup .left .quicklinks ul {margin: 0; padding: 0; column-count: 2;}
.signup-wrap .signup .left .quicklinks ul li {font-size: 80%; list-style: none; padding: 0 0 0 20px; margin: 0 0 5px 0; position: relative;}
.signup-wrap .signup .left .quicklinks ul li a {color: var(--white); display: block;}
.signup-wrap .signup .left .quicklinks ul li a:hover {color: var(--darkgrey);}
.signup-wrap .signup .left .quicklinks ul li a:before {font-family: "Font Awesome 5 Free"; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-weight: 900; content: "\f138"; position: absolute; top: 1px; left: 0; visibility: visible; font-size: 90%; color: var(--white);}

.signup-wrap .signup .right {width: 46%; float: right;}
.signup-wrap .signup .right .textbox {padding: 20px; box-sizing: border-box; background: var(--lightgrey) url(../images/logo-background.png) no-repeat right bottom; background-size: 70%; max-width: 500px; position: relative; margin: 0 0 40px 0;}
.signup-wrap .signup .right .textbox:before {background: url(../images/textbox.png) no-repeat center center; background-size: 100%; width: 45px; height: 43px; position: absolute; bottom: -43px; left: 40%; visibility: visible; content: "";}
.signup-wrap .signup .right p.heading span {float: right;}
.signup-wrap .signup .right p.heading span i {color: var(--red);}
.signup-wrap .signup .right .textbox p {padding: 0 0 10px 0; color: var(--black); font-size: 80%;}
.signup-wrap .signup .right .textbox p.text {font-size: 80%;}

.signup-wrap .signup p.heading {font-weight: 700;}
.signup-wrap .signup p {padding: 0;}

.jobs {width: 104%; margin-left: -4%;}
.jobs .job {width: 29.3333%; float: left; margin: 0 0 2% 4%; padding: 40px; box-sizing: border-box; background: #f2f2f2; position: relative; box-shadow: rgb(0 0 0 / 20%) 0 4px 16px, rgb(0 0 0 / 5%) 0 8px 32px;}
.jobs .job h3 {padding: 0; margin: 0; color: var(--darkgrey);}
.jobs .job p {color: var(--darkgrey);}

.timesheet {margin: 0 0 20px 0;}
.timesheet .heading {background: var(--redgradient); padding: 20px 15px; cursor: pointer;}
.timesheet .heading h2 {padding: 0; color: var(--white); font-size: 150%; margin: 0;}
.timesheet .heading h2 i {float: right; position: relative; top: 5px;}
.timesheet .text {display: none; padding: 20px; box-sizing: border-box; background: #f2f2f2; margin: 0 0 20px 0;}
.timesheet .rate-value {margin-left: 20px; font-style: italic;}
.timesheet .thirds, .timesheet .quads {width: 102%; margin-left: -2%;}
.timesheet .thirds .col {width: 31.3333%; float: left; margin: 0 0 0 2%;}
.timesheet .quads .col {width: 23%; float: left; margin: 0 0 0 2%;}
.timesheet .input.radios p {padding: 0;}
.timesheet .input.radios .answer {line-height: 40px;}
.timesheet .input.radios label {margin: 0 20px 0 0;}
.timesheet label {font-size: 90%;}
.timesheet .buttons .input {float: left; margin: 0 10px 0 0;}
.timesheet .input.attachfile {margin: 0 0 20px 0;}
.timesheet .input.attachfile p {padding: 0 0 10px 0;}
.timesheet .input p.timesheetfiles {font-size: 90%; padding: 0 0 20px 0;}
.timesheet .input p.timesheetfiles a {color: var(--red);}
.timesheet .input p.timesheetfiles a i {color: var(--blank);}

.timesheets .buttons {width: 100%; margin: 0 0 40px; display: flex; gap: 20px;}
.timesheets .buttons .button {flex-grow: 1; background: var(--redgradient);}
.timesheets .buttons .button p {text-align: center; color: var(--white); font-size: 110%; font-weight: 700; padding: 0; text-transform: uppercase;}
.timesheets .buttons .button p a {color: var(--white); display: block; padding: 10px 0;}

.timesheets-search {background: var(--blue); padding: 20px; display: flex; gap: 20px;}
.timesheets-search::after, .timesheets-search *::after {display: none;}
.timesheets-search label {color: var(--white); font-size: 0.9rem; font-weight: 700;}
.timesheets-search input {margin: 0;}
.timesheets-search input[type="date"] {font: inherit; padding: 5px; font-size: 1rem;}
.timesheets-search #timesheet-search {min-width: 200px; font-size: 1rem;}
.timesheets-search .input {display: flex; gap: 5px; align-items: center;}
.timesheets-search .buttons {display: flex; align-items: center; margin-left: auto; gap: 10px;}

.usefullinks {width: 102%; margin-left: -2%;}
.usefullinks .usefullink {width: 31.3333%; margin: 0 0 2% 2%; float: left;}
.usefullinks .usefullink .image {width: 100%;}
.usefullinks .usefullink .image img {width: 100%;}

.guardian .risk {text-align: center; margin: 20px 0 40px 0;}
.guardian .risk .threes {width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.guardian .risk .threes:after {display: none;}
.guardian .risk .threes .box {width: 100%; margin: 0; padding: 30px 20px; box-sizing: border-box; background: #ffffff; box-shadow: rgb(17 17 26 / 10%) 0 4px 16px, rgb(17 17 26 / 5%) 0 8px 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; transition: all 0.4s ease;}
.guardian .risk .threes .box p {padding: 0;}
.guardian .risk .threes .box .arrowbutton {height: 0; opacity: 0;}
.guardian .risk .threes .box:after {display: none;}
.guardian .risk .threes .box.selected {box-shadow: rgb(174 25 33 / 20%) 0 4px 16px, rgb(174 25 33 / 5%) 0 8px 32px;}
.guardian .risk .threes .box.selected .arrowbutton {height: auto; opacity: 1;}
.guardian .risk .threes .box.unselected {opacity: 0.4;}
.guardian .risk .threes .box.unselected:hover {opacity: 0.8;}

.guardian .risk .threes .box p:first-child:before {content: "\f0c8"; font-family: "Font Awesome 5 Free"; font-weight: 900; display: inline-block; margin: 0 5px 0 0;}
.guardian .risk .threes .box.selected p:first-child:before {content: "\f14a"; color: var(--red);}
.guardian .risk-saved {margin: 20px 0 0;}

.guardian .sentinel {position: relative; margin: 0 0 40px 0;}
.guardian .sentinel .icon {position: absolute; top: 50%; left: 0; width: 140px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.guardian .sentinel .icon p {font-size: 500%; line-height: 100%; padding: 0; text-align: center; color: var(--red);}
.guardian .sentinel .text {padding: 0 0 0 140px;}
.guardian .sentinel .text .inner {border-left: 1px solid #333333; padding: 0 0 0 20px;}

.guardian .learn {position: relative; margin: 0 0 40px 0;}
.guardian .learn .icon {position: absolute; top: 50%; left: 0; width: 140px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.guardian .learn .icon img {max-width: 120px;}
.guardian .learn .text {padding: 0 0 0 140px;}
.guardian .learn .text .inner {border-left: 1px solid #333333; padding: 0 0 0 20px;}

.usefullinkspopup {padding: 0!important; max-width: 1180px!important; width: 90%!important;}
.usefullinkspopup .inner {padding: 30px;}

.intereststatuswon .col {width: 33.3333%; float: left; padding: 0 20px 0 0; box-sizing: border-box;}
.intereststatuswon .col select {background: #ffffff url(../images/chevron-down-solid-red.png) no-repeat 98% 50%; background-size: 15px; padding: 0 30px 0 10px;}
.intereststatuswon input {width: 100%; height: 40px; border: 1px solid #cccccc;}
.intereststatuswon p {padding: 0 20px 20px 0;}

/* footer */
.footer-wrap {padding: 0 20px; background: var(--darkgrey);}
.footer {width: 100%; max-width: 1440px; margin: 0 auto; padding: 60px 0; position: relative; color: var(--white);}
.footer .cols {width: 102%; margin-left: -2%;}
.footer .cols .col {width: 23%; float: left; margin: 0 0 0 2%; position: relative;}
.footer .footerlogo {width: 198px; max-width: 100%;}
.footer .footerlogo a.logo {width: 100%; height: 167px; background: url(../images/svgs/logo-white.svg) no-repeat; background-size: 100%; display: block; max-width: 100%;}
.footer p {padding: 0; font-size: 90%;}
.footer p a {color: #ffffff;}
.footer .address {padding: 0 0 20px 0;}
.footer h4 {font-size: 120%;}
.footer p.blockbutton {position: absolute; bottom: 0; right: 0;}
.footer p.blockbutton a {padding: 10px 36px;}
.footer p.desc {font-size: 75%;}
.footer .cols .col img {float: right; max-height: 160px; margin: 0 0 80px 0;}
.footer p.disclaimer {font-size: 60%; margin: 10px 0 0 0;}
/* .footer .cols .col:last-child { padding: 0 90px 0 0; } */

.formpopup {position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.6);}
.formpopup-content {position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fefefe; padding: 40px; box-sizing: border-box; border: 1px solid #888888; max-width: 1180px!important; width: 90%!important; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.formpopup-content .close {position: absolute; top: 10px; right: 10px; line-height: 30px; width: 30px; height: 30px; color: var(--darkgrey); background: none; text-align: center; border-radius: 100%; cursor: pointer;}
.formpopup-content .close:hover {background: var(--darkgrey); color: var(--white);}

.intereststatuswon {display: none;}

.helpformpopup {max-width: 1180px!important; width: 90%!important; box-sizing: border-box; padding: 40px!important;}
.helpformpopup .input label {font-size: 90%;}

/* seegreen footer */
.seefooter-wrap {padding: 0 20px; background: var(--redgradient);}
.seefooter {width: 100%; max-width: 1440px; margin: 0 auto; padding: 10px 0; font-size: 80%;}
.seefooter .content {padding: 0 10px;}
.seefooter ul {list-style-type: none; margin: 0; float: left;}
.seefooter li {display: inline; font-size: 90%;}
.seefooter li a {padding: 0 0 0 10px; display: inline-block;}
.seefooter li span {color: #ffffff; display: inline-block; padding: 0 0 0 10px;}
.seefooter li:first-child a {padding: 0;}

.seefooter li a, .seefooter li i {color: var(--white);}

.seefooter p.websiteby {float: right; padding: 0; font-size: 90%;}
.seefooter p.websiteby a {color: #ffffff;}

.sitemap ul ul {margin: 0 0 0 10px;}
.sitemap ul ul li:first-of-type {margin: 10px 0;}
.sitemap a {color: var(--black);}

@media screen and (max-width: 1420px){
  .users .boxes {grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width: 1200px){
  .nav li {margin: 0 0 0 15px; font-size: 90%;}
}

@media screen and (max-width: 1024px){

  .nav li {font-size: 90%; margin: 0 0 0 30px;}

  .banners img.desktop {display: none;}
  .banners img.mobile {display: block;}

  .banners.top .slick-dots {bottom: 60px;}

  .content-wrap .content {margin-top: -40px; padding: 20px;}
  .content-wrap.home .content {padding: 40px 0;}
  
  .content-wrap .content, .content-wrap.home {background-size: 100%;}

  .title .boxes .box.button {width: 23%;}

  .signup-wrap .signup {padding: 40px 0;}

  .skilledworkers .boxes {grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width: 940px){

  .header .left {width: 125px;}
}

@media screen and (max-width: 900px){

  .header .right .socials p.blockbutton a {font-size: 70%;}
  .nav li {font-size: 80%; margin: 0 0 0 15px;}

  .boxes .box.button {width: 31.3333%;}
  
  .skilledworkers .buttons {grid-template-columns: 1fr;}

  .workers .worker .cols {width: 100%; margin: 0;}
  .workers .worker .cols .col {width: 100%; margin: 0; border-right: 0; padding: 0;}
  .editworkers .cols {width: 100%; margin: 0;}
  .editworkers .cols .col {width: 100%; margin: 0;}
}

@media screen and (max-width: 820px){

  .header .left {width: 120px;}

  .duplicate-three {grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width: 800px){
  .users .boxes {grid-template-columns: repeat(1, 1fr);}
}

@media screen and (max-width: 768px){
  
  body {font-size: 90%;}
  .workers .controls p a {font-size: 100%;}

  .headerspacing {height: 274px;}
  .headerspacing.headerscrolled {height: 305px;}
  .header .left {float: none;}
  .header .left a.logo {width: 160px;}

  .headerscrolled .header-wrap .left a.logo {width: 100%;}
  .headerscrolled .header-wrap .right .nav li {font-size: 80%;}
  
  .header .right {float: none; text-align: right; width: 100%; margin: 10px 0;}
  .header .right .socials {text-align: center; width: 100%; padding: 0;}
  .header .right .socials p.blockbutton {font-size: 80%; width: 50%;}
  .header .right .socials p.blockbutton:last-child {padding: 0 0 0 10px;}
  .header .right .socials p.blockbutton a {font-size: 100%;}
  .header .right p.name {text-align: right; position: absolute; bottom: 10px; right: 0; font-size: 100%;}

  .headerscrolled .left {float: left;}
  .headerscrolled .right {display: none;}

  .headerscrolled .mobile-nav {position: absolute; top: 20px; right: 20px; margin: 0;}
  .header .right .socials {text-align: right;}
  .header .right .socials p.blockbutton {padding: 0;}
  .header .right .socials p.blockbutton a {padding: 6px 18px;}
  .header .right p.name span {padding: 5px 16px;}

  .nav {display: none;}

  .mobile-nav {display: block; background: var(--darkgrey); margin: 0 0 20px 0;}
  .mobile-nav .top {padding: 15px 20px; cursor: pointer;}
  .mobile-nav .top p {float: left; color: var(--white); font-size: 90%; padding: 0 20px 0 0; font-weight: 700;}
  .mobile-nav .nav-icon {width: 27px; height: 20px; transform: rotate(0deg); transition: 0.5s ease-in-out; cursor: pointer; float: right;}
  .mobile-nav .nav-icon span {display: block; position: absolute; height: 3px; width: 100%; background: var(--white); border-radius: 0; opacity: 1; left: 0; transform: rotate(0deg); transition: 0.25s ease-in-out;}
  .mobile-nav .nav-icon span:nth-child(1) {top: 0;}
  .mobile-nav .nav-icon span:nth-child(2), .mobile-nav .nav-icon span:nth-child(3) {top: 7px;}
  .mobile-nav .nav-icon span:nth-child(4) {top: 14px;}
  .mobile-nav .open .nav-icon span:nth-child(1) {top: 21px; width: 0%; left: 50%;}
  .mobile-nav .open .nav-icon span:nth-child(2) {transform: rotate(45deg);}
  .mobile-nav .open .nav-icon span:nth-child(3) {transform: rotate(-45deg);}
  .mobile-nav .open .nav-icon span:nth-child(4) {top: 18px; width: 0%; left: 50%;}
  .mobile-nav ul {padding: 0; margin: 0; display: none; border-bottom: 2px solid var(--white);}
  .mobile-nav ul ul {padding: 0; margin: 0; display: none; border-bottom: 0;}
  .mobile-nav li {list-style: none; position: relative; font-size: 100%; font-weight: 700; padding: 0; margin: 0;}
  .mobile-nav li:before {display: none;}
  .mobile-nav li a {display: block; padding: 15px 65px 15px 20px; color: var(--white); font-size: 90%; text-decoration: none; font-weight: 700; background: var(--darkgrey);}
  .mobile-nav li li a {padding: 10px 65px 10px 40px; font-size: 80%;}
  .mobile-nav li.selected a {background: var(--redgradient); color: var(--white);}
  .mobile-nav li span {position: absolute; top: 0; cursor: pointer; right: 0; width: 52px; height: 52px; text-align: center; line-height: 52px; background: rgba(0, 0, 0, 0.1); color: #ffffff; z-index: 2; font-size: 140%;}
  .mobile-nav li.selected li a, .mobile-nav li li a {background: var(--white); color: #757575;}
  .mobile-nav li.selected li.selected a {color: #32bdee;}

  .content-wrap .content {margin-top: -80px;}
  .content .left {width: 100%; float: none; display: none;}
  .content .right {width: 100%; float: none; margin: 0 0 40px 0;}
  .content .left.mobile {display: block;}

  .dashboard .boxes .box.button, .boxes .box.button {width: 48%;}
  
  .title .boxes {display: none;}
  .title .boxes .box.button {padding: 20px 10px; font-size: 100%; width: 31.3333%;}

  .signup-wrap .signup .left {width: 100%; float: none; margin: 0 0 20px 0;}
  .signup-wrap .signup .right {width: 100%; float: none;}
  .signup-wrap .signup .right .textbox {margin: 0 auto 40px auto;}

  .usefullinks .usefullink {width: 48%;}

  .guardian .risk .threes {grid-template-columns: repeat(2, 1fr);}

  .jobs {width: 100%; margin-left: 0;}
  .jobs .job {width: 100%; margin: 0 0 2% 0;}

  /* responsive jobs table */
  .alljobs tbody {width: 100%; display: block;}
  .alljobs thead {display: none;}
  .alljobs tr {margin-bottom: 8px; display: block;}
  .alljobs tr:last-of-type {margin-bottom: 0;}
  .alljobs td {display: block; white-space: normal;}
  .alljobs td.name:before {content: "Name:"; display: inline-block; margin-right: 10px; font-weight: bold;}
  .alljobs td.contractor:before {content: "Contractor:"; display: inline-block; margin-right: 10px; font-weight: bold;}
  .alljobs td.address:before {content: "Address:"; display: inline-block; margin-right: 10px; font-weight: bold;}
  .alljobs td.postcode:before {content: "Postcode:"; display: inline-block; margin-right: 10px; font-weight: bold;}
  .alljobs td.job:before {content: "Job:"; display: inline-block; margin-right: 10px; font-weight: bold;}
  .alljobs td.email:before {content: "Email:"; display: inline-block; margin-right: 10px; font-weight: bold;}
  .alljobs td.telephone:before {content: "Telephone:"; display: inline-block; margin-right: 10px; font-weight: bold;}
  .alljobs td.description:before {content: "Description:"; display: inline-block; margin-right: 10px; font-weight: bold;}
  .alljobs td.weekcommencing:before {content: "Week Commencing:"; display: inline-block; margin-right: 10px; font-weight: bold;}
  .alljobs td.status:before {content: "Status:"; display: inline-block; margin-right: 10px; font-weight: bold;}
  .alljobs td.mate:before {content: "Mate:"; display: inline-block; margin-right: 10px; font-weight: bold;}

  .alljobs td.view {text-align: center;}

  .timesheet .thirds .col {width: 48%;}

  .skilledworkers .boxes {grid-template-columns: 1fr;}
  .skilledworkers .boxes .box .text p {font-size: 100%;}
  .skilledworkers .boxes .box .text p.status {font-size: 80%;}

  .footer {padding: 30px 0;}
  .footer .cols {width: 100%; margin-left: 0;}
  .footer .cols .col {width: 100%; float: none; margin: 0 0 20px 0;}
  .footer .cols .col img {float: none; margin: 0 0 20px 0;}
  .footer .cols .col p.blockbutton {position: relative;}

  .seefooter {font-size: 70%;}
  .seefooter ul {float: none; padding: 0 0 10px 0;}
  .seefooter p.websiteby {float: none;}
}

@media screen and (max-width: 600px){

  .header .left {width: 100%; margin-bottom: 30px;}
  .header .left a.logo {margin: 0 auto;}
  .header .right {text-align: center;}
  .header .right p.name {width: 100%; text-align: center;}
  .headerspacing {height: 304px;}

  .headerscrolled .header-wrap .left {margin-bottom: 0;}

  .banners .overlay .inner .text {padding: 10px 15px;}
  .banners .overlay .inner .text h2 {font-size: 150%; margin: 0 0 5px 0;}
  .banners .overlay .inner .text p {font-size: 90%;}
  .banners .overlay .inner .text p.blockbutton a {padding: 8px 16px;}

  .features .line {display: none;}
  .features .feature .arrow {display: none;}

  .features .feature .text, .features .feature.flip .text {width: 100%; float: none;}
  .features .feature .images, .features .feature.flip .images {width: 100%; float: none;}

  .rtw .halves {width: 100%; margin-left: 0;}
  .rtw .halves .input {width: 100%; float: none; margin: 0 0 20px 0;}

  .questions .date {width: 100%; margin-left: 0;}
  .questions .date span.day, .questions .date span.month, .questions .date span.year {width: 100%; float: none; margin: 0 0 2% 0;}

  .usefullinks {width: 100%; margin-left: 0;}
  .usefullinks .usefullink {width: 100%; margin: 0 0 20px 0;}

  .questions .textareasmall textarea {width: 100%;}

  .skilledworkers .buttons {flex-direction: column; margin: 0 0 20px;}
  .skilledworkers .buttons .button {margin: 0;}

  .form .row.flex.thirds, .form .row.flex.halves {flex-direction: column; gap: 10px;}
  .form .row.flex.grid-two {grid-template-columns: repeat(1, 1fr); gap: 10px;}
  .duplicate-three {grid-template-columns: 1fr;}
}

@media screen and (max-width: 495px){

  table {display: block; overflow-x: scroll; white-space: nowrap;}
  .viewworker-table {display: table;}

  .timesheet .thirds, .timesheet .quads {width: 100%; margin-left: 0;}
  .timesheet .thirds .col, .timesheet .quads .col {width: 100%; margin: 0;}

  .form .row.thirds, .form .row.halves {width: 100%; margin: 0;}
  .form .row.thirds .input, .form .row.halves .input {width: 100%; margin: 0;}
  #postcodelookupskip {margin: 0 0 20px;}
  .form .row.address-buttons .input:nth-child(2) {margin: -20px 0 0;}

  .skilledworkers .boxes .box {flex-direction: column; align-items: stretch; background: var(--lightgrey);}
  .skilledworkers .boxes .box .icon {width: 80px; height: 80px; flex-shrink: 0; align-self: center; margin: 20px 0 0;}
  .skilledworkers .boxes .box .text:before {display: none!important;}
}

@media screen and (max-width: 450px){
  .header {display: flex; flex-direction: column; gap: 10px;}
  .header .right {display: contents;}
  .header .right .socials p.blockbutton {width: 100%; display: block;}
  .header .right .socials p.blockbutton:last-child {padding: 0; margin-top: 10px;}
  .header .right p.name {order: 1; position: relative; right: unset; bottom: unset; padding: 0;}
  .header .right p.name span {display: inline-block; margin-top: 5px;}
  .header .left {margin-bottom: 0;}
  .headerspacing {height: 360px;}
  .headerspacing.headerscrolled {height: 325px;}

  .headerscrolled .mobile-nav {width: 200px;}
  .headerscrolled .mobile-nav .top {padding: 15px;}
  .headerscrolled .mobile-nav .top p {font-size: 80%;}
  .headerscrolled .header-wrap .right p.name {display: none;}

  h1.pagetitle {font-size: 200%;}

  .dashboard .boxes, .boxes {width: 100%; margin-left: 0;}
  .dashboard .boxes .box.button, .boxes .box.button {width: 100%; margin: 0 0 20px 0; float: none;}
  .title .boxes .box.button {width: 48%; margin: 0 0 20px 2%;}
  .title .boxes .box.button p {font-size: 80%;}

  .signup-wrap .signup .left .quicklinks ul {column-count: 1;}

  .guardian .risk .threes {grid-template-columns: 1fr; gap: 20px;}
  .guardian .sentinel .icon, .guardian .learn .icon {position: relative; top: unset; left: unset; transform: none; margin: 0 auto 10px;}
  .guardian .sentinel .text, .guardian .learn .text {padding: 0; margin: 10px 0 0;}
  .guardian .sentinel .text .inner, .guardian .learn .text .inner {border-left: none; padding: 0;}

  .questions .questionnav p.prev, .questions .questionnav p.next {float: none; width: 100%; margin: 0 0 10px;}

  .users .boxes .box .icon i {font-size: 2rem;}
}

@media screen and (max-width: 375px){

  .headerscrolled .mobile-nav {width: 165px;}
  .headerscrolled .mobile-nav .top {padding: 10px;}

  .header .right .socials p.blockbutton a {margin: 0 0 5px 0;}

  /* .skilledworkers .boxes .box { padding: 0; border-top-left-radius: 0; border-bottom-left-radius: 0;}
  .skilledworkers .boxes .box .icon { position: relative; width: 100%; top: auto; left: auto; float: none; transform: none; height: auto; max-height: none; max-width: none; border-radius: 0; }
  .skilledworkers .boxes .box .icon i { position: relative; top: auto; left: auto; transform: none; display: block; padding: 10px 0; }
  .skilledworkers .boxes .box .text { padding: 10px 20px;  }

  .skilledworkers .boxes .box .text p.status { position: relative; bottom: 0; right: 0; margin: 5px 0; } */

  .workers .controls p a {display: block; margin: 0 0 5px 0;}
}

@media print {
  * {-webkit-print-color-adjust: exact;}
  body {font-size: 12pt; font-family: arial, serif; line-height: 140%;}
  .see-cms-toolbar {display: none!important;}
}