html{color:#222;font-size:1em;line-height:1.4}::-moz-selection{background:var(--main);text-shadow:none;color:#fff;}::selection{background:var(--main);text-shadow:none;color:#fff;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}

:root {

  --lightgrey: #efefef;
  --white: #fff;
  --main: #39BABD;
    --pale: #D7E69A;
--black: #212F3E;
--accent: #EE7577;
  --dark: #25292D;
    --lighter:#282E36;
    
    --panelbg: rgba(255,255,255,0.6);
}
/*
body::-webkit-scrollbar {
  width: 11px;
}
body {
  scrollbar-width: thin;
  scrollbar-color: var(--main) var(--black);
}
body::-webkit-scrollbar-track {
  background: var(--black);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--main);
  border-radius: 6px;
  border: 3px solid var(--black);
}
*/
body::-webkit-scrollbar {
    width: 0.5rem;
}

body::-webkit-scrollbar-thumb {
    background-color: var(--main);
    border-radius: 0.7rem;
}

body::-webkit-scrollbar-track {
    background-color: var(--black);
    border-radius: 0.7rem;
}

/* Browsers without `::-webkit-scrollbar-*` support */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: #6d7c77 #cfd7c7;
    }
}

.completed td{background: rgba(178,34,34,0.5);}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
*{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
a{-webkit-transition:all 1s ease;
         -moz-transition:all 1s ease;
               -o-transition:all 1s ease;
                     transition:all 400ms ease; text-decoration: none; color: var(--dark); color: #01244C;}
a:hover{color: var(--accent);}
a img{-webkit-transition:all 1s ease;
         -moz-transition:all 1s ease;
               -o-transition:all 1s ease;
                     transition:all 1s ease;}	
.smoothie{-webkit-transition:all 0.4s ease;
         -moz-transition:all 0.4s ease;
               -o-transition:all 0.4s ease;
                     transition:all 0.4s ease;}
a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  
}

a:hover {
  background-size: 0 3px, 100% 3px;
}
html,body {
	margin:0;
	padding:0;
	
}
p{margin: 0 0 10px;}
img, iframe{max-width: 100%;}
.tcontent{max-width: 100% !important;}
.tinner{max-width: 100% !important;}
.tcontent iframe{width: 90vw; max-width: 700px; height: 400px;}
body{font-family:'Source Sans 3', sans-serif;}
html{background: var(--lightgrey);background: rgb(238,117,119);
background: linear-gradient(90deg, rgba(238,117,119,1) 0%, rgba(33,47,62,1) 53%, rgba(57,186,189,1) 100%); background: var(--black);}
h1,h2,h3,h4,h5,h6{font-weight: 400;text-transform: uppercase;letter-spacing: 1px; color: var(--black);font-family:'Coolvetica', 'Fjalla One', sans-serif;}
.container{width:100%; max-width: 1340px; height: auto; overflow: visible; margin: 20px auto; background: #fff; overflow: hidden;/* From https://css.glass */
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);}


.header {width: 100%; max-width: 100vw; background:var(--white); border:none; position: relative; border-bottom: 1px solid var(--main); z-index: 499; box-sizing: border-box;}
.innerheader{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; width: 100%; position: relative;padding: 20px; overflow: hidden;}


.logo{width:auto; position: relative;  z-index: 2;}
.logo img{max-width: 180px; margin: 0px;}
.logo a{background: none;}

.menu{background-color:transparent;border:none;cursor:pointer;display:flex;padding:0}.line{fill:none;stroke:var(--black);stroke-width:3;transition:stroke-dasharray 600ms cubic-bezier(.4,0,.2,1),stroke-dashoffset 600ms cubic-bezier(.4,0,.2,1)}.line1{stroke-dasharray:60 207;stroke-width:3}.line2{stroke-dasharray:60 60;stroke-width:3}.line3{stroke-dasharray:60 207;stroke-width:3}.opened .line1{stroke-dasharray:90 207;stroke-dashoffset:-134;stroke-width:3}.opened .line2{stroke-dasharray:1 60;stroke-dashoffset:-30;stroke-width:3}.opened .line3{stroke-dasharray:90 207;stroke-dashoffset:-134;stroke-width:3}

.nav{margin: 0; padding: 0;  display: flex; justify-content: flex-end; flex-wrap: wrap; position: relative; z-index: 5;}

.nav a{color: var(--black); margin: 0 20px 0 0; font-size: 16px; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; background: none;}
.nav a:hover{color: var(--main);}
.nav a.current{color: var(--main);}
.nav a.current:hover{color: var(--black);}

/*
.footer {border-top: 1px solid var(--black); width: 100%; }
.innerfooter{width: 100%; height: auto; margin: 0 auto; padding: 10px 20px; overflow: hidden; color: var(_-main);font-size: 12px; text-align: center; text-transform: uppercase; display: flex; justify-content: space-between; flex-wrap: wrap;}
*/



.logo{order: 1;}
.navigation{order: 2; }
.ham{display: none; order: 3; position: relative; z-index: 6;}


.content{width: 100%; height: auto; overflow: hidden; margin: 0 auto; color: var(--black); min-height: 100vh; position: relative;}
.flexcontent{display: flex; justify-content: space-between; flex-wrap: wrap;}
.textcontent{width: 100%; height: auto; padding: 30px 0; margin-bottom: 20px;}
.textcontent h3{font-weight: 900; margin-top: 0;}

.error {background: firebrick; display: block; color: #fff; padding: 10px;}
.errorfield{border: 1px solid firebrick;}

.adminmenu{width: 100%; padding: 20px 20px 20px; display: flex; justify-content: center; flex-wrap: wrap; background:var(--black);position: relative;}
.adminlink{padding: 10px; background: var(--main); color: var(--black); border-radius: 10px; margin: 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px;}
.adminlink:hover{background: var(--accent); color: var(--black);}
.currentadmin{background: var(--accent);}
.currentadmin:hover{background: var(--main);}
.custom-shape-divider-top-1704815216{display: none;}

.editor a{padding: 10px; background: var(--main); color: var(--black); border-radius: 10px; margin: 0; font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px;}
.editor a:hover{background: var(--accent); color: var(--black);}
/*
.custom-shape-divider-bottom-1704826085 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1704826085 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 24px;
}

.custom-shape-divider-bottom-1704826085 .shape-fill {
    fill: #FFFFFF;
}

*/
.userjobs{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px;}
.eachjob{padding: 20px; background: var(--black); border-radius: 20px; color: #fff; transition: all 0.2s ease;}
.eachjob:hover{background: var(--lightgrey); color: var(--black);}
.eachjobtitle{ font-family: 'Inter', sans-serif; font-size: 22px; font-weight: bold; margin-bottom: 20px;}
.eachjobdate{font-size: 16px;margin-bottom: 20px;}
.eachjobstatus{ font-size: 16px;}

.card1 h3 {
  color: var(--black);
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  margin-bottom: 4px;
}


.card1 p.small {
  font-size: 14px;
}

.go-corner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 32px;
  height: 32px;
  overflow: hidden;
  top: 0;
  right: 0;
  background-color: var(--black);
  border-radius: 0 4px 0 32px;
}

.go-arrow {
  margin-top: -4px;
  margin-right: -4px;
  color: white;
  font-family: courier, sans;
}

.card1 {
  display: block;
  position: relative;
  max-width: 262px;
  background-color: var(--lightgrey);;
  border-radius: 20px;
  padding: 32px 20px;
  margin: 12px;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;
}
.card1:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -16px;
  right: -16px;
  background: var(--black);
  height: 32px;
  width: 32px;
  border-radius: 32px;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 0.25s ease-out;
}
.card1:hover:before {
  transform: scale(21);
}

.card1:hover p {
  transition: all 0.3s ease-out;
  color: rgba(255, 255, 255, 0.8);
}
.card1:hover h3 {
  transition: all 0.3s ease-out;
  color: #ffffff;
}



.embed-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0;
	height: 0;
}
.embed-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    border: none;
}
/* ==========================================================================
   FOOTER  https://codepen.io/andrewsims/pen/mQoYwz
   ========================================================================== */
.footer{width: 100%; font-size: 12px; background: var(--white); color: #fff; position: relative; overflow: hidden;}
.innerfooter{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; width: 100%; margin: 0 auto; padding: 20px;}
.footleft{width: 200px; border-right: 0px solid rgba(255,255,255,0.2); outline: 0px solid white; }
.footleft img{width: 140px;}
.footleft a{background: none;}

.footbottom{width: calc(100% - 200px); text-align: left; outline: 0px solid red; }



.contactsocial a:hover{background: #fff; color: var(--main);}
.footersocial a:hover{background: var(--main);}
.copy span{margin: 0 5px;}
.copy a{color: var(--main); font-weight: 700;}

.copyright{padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.2); margin-bottom: 15px; display: inline-block;}
.vat{ color: var(--black); margin-bottom: 5px;}

/*ALT FOOTER COLORS*/
.footer{ } 

.copy a:hover{color: var(--black);}

/* ==========================================================================
   PROFILE  BADGES
   ========================================================================== */


.profileform{width: 30%; padding: 20px; text-align: left; outline: 0px solid #0C1A30;}
.loneform{width: 100%; max-width: 400px;}
.profiletable{width: 70%; padding: 20px; text-align: left;}
.fullprofiletable{width: 100%; padding: 20px; text-align: left;}
.viewertable{text-align: left;}
.lonetable{width: 100%; max-width: 800px; margin: 20px auto; text-align: left;}

.thetable{padding: 40px 20px; margin-bottom: 20px; text-align: left; box-shadow: 6px 6px 24px 0 rgba(0,10,63,.1); border-radius: 10px; position: relative; background: var(--panelbg);}

.experiencedetails{padding-bottom: 20px; border-bottom: 1px solid var(--main); margin-bottom: 20px;}
.experiencesection{padding-bottom: 20px; border-bottom: 1px solid var(--main); margin-bottom: 20px;}
.eachexperience{display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 5px;}
.eachexperienceq{}
.eachexperiencea{font-weight: 600;}
.eacomment{width: 100%;}
.visituser{font-weight: 500; font-size: 16px; margin-bottom: 5px;}
.visitdate{font-weight: 400; font-size: 14px;}

.singleimage{width: 100%; margin:40px auto; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.singleimage img{width: 100%;}
.halfsingleimagewidth img{width: 50%;}

.centersingleimagealign{justify-content: center;}
.rightsingleimagealign{justify-content: flex-end;}
.leftsingleimagealign{justify-content: flex-start;}

.tabsection{margin: 40px 0;}


.newsimagecontent{width:100%; margin: 40px auto; outline: 0px solid red;box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05);}


/* ==========================================================================
   FORMS
   ========================================================================== */
.loneformer{width: 100%; max-width: 600px; margin: 20px auto; }

.inductionformer{width: 100%; max-width: 800px; margin: 20px auto; background: var(--panelbg); padding:40px 20px; border-radius: 10px; overflow: hidden;}
.inductionedit{width: 100%; max-width: 100%; margin: 20px auto; background: var(--panelbg); padding:40px 20px; border-radius: 10px; overflow: hidden;}

.theform{width:100%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 40px 20px; margin-bottom: 20px; text-align: center;box-shadow: 6px 6px 24px 0 rgba(0,10,63,.1); background: var(--panelbg); border-radius: 10px; position: relative;}

.homeform{width:100%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0; margin-bottom: 20px; text-align: center; position: relative;}
.theformshadow{position: absolute; bottom: -20px; left: 20px; width: calc(100% - 40px); height: 20px; background: var(--lightgrey); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; display: none;}
.pform{text-align: left;}
.formholder{height: 0px; overflow: hidden;}
.halfinput{width:  49%; position: relative; margin-bottom: 10px;}
.fullinput{width: 100%; position: relative; margin-bottom: 10px;}
.textinput{width: 100%; border:1px solid #f9f9f9; padding: 10px; background: #fff;outline: 1px solid #aaa;font-size: 0.8rem;}
textarea.textinput{height: 200px;}
.textinput:focus{background-color: #d9d9d9;}
.fullinput select{width: 100%; border:1px solid #f9f9f9; padding: 10px 10px; font-size: 0.8rem; background: rgba(0,0,0,0.05); background: #fff; outline: 1px solid #aaa; color: #0C0C0B; margin-bottom: 20px;}
.halfinput select{width: 100%; border:1px solid #f9f9f9; padding: 17px 10px; font-size: 0.8rem; background: rgba(0,0,0,0.05); background: #fff; outline: 1px solid #aaa; color: #0C0C0B; margin-bottom: 20px;}
 
.fulllabel{width:100%; font-size: 14px; font-weight: 400; padding: 5px 0 10px; color: #0C1A30; display: block;}
.labelinput{}
.submitbutton{width: 100%; border: 1px solid #d9d9d9; background: var(--black); color: #fff; padding: 15px; transition: 0.4s; text-transform: uppercase; font-weight: 300; font-size: 18px; display: block; cursor: pointer;border-radius: 10px; overflow: hidden;}
.submitbutton:hover{background: var(--lightgrey);color: var(--black);}


.downloadbutton{width: auto; border: 0px solid #d9d9d9; background: #0C1A30; color: #fff; padding: 15px; transition: 0.4s; text-transform: uppercase; font-weight: 900; font-size: 14px;}
.downloadbutton:hover{background: #92002C; color: #fff;}
.downloadbutton:active{background: #92002C;}

.generatebutton{width: auto; border: 0px solid #d9d9d9; background:#92002C ; color: #fff; padding: 15px; transition: 0.4s; text-transform: uppercase; font-weight: bold; font-size: 16px;}
.generatebutton:hover{background: #0C1A30; color: #fff;}
.generatebutton:active{background: #0C1A30;}
.login-help {
  width: 100%;
  text-align: center;
    font-size: 12px}

.printform{width: 60%; padding: 20px; text-align: left; outline: 10px solid #0C1A30;}

.printimage{width: 40%; padding: 20px; position: relative;}
.printimageline{position: absolute; bottom: -10px; left: 0px; height: 10px; width: 100%; background: #0C1A30;}
.printimage img{width: 100%;}
.printtable{width: 100%; padding: 20px;}
.incompletetd{background: rgba(171,25,53,0.5) !important}


.inductionfile{width: 100%; padding: 20px; background: var(--main); color: var(--black); display: flex; justify-content: space-between; margin-bottom: 20px;}
.inductionfile:hover{background: var(--accent);}
.eachquestion{margin-bottom: 20px;}
.thequestion{margin-bottom: 20px; font-weight: 600;}
.eachanswer input{margin-right: 10px;}
.eachanswer{margin-bottom: 5px;}

.checkinput{font-size: 12px; font-style: italic; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding: 10px 0; outline: 0px solid red;}
        .checkinput input{margin-right: 10px;}
        .checkinput .fulllabel{width: 100% !important;}

.message{background: var(--main); padding: 10px; font-weight: 600; margin: 20px auto; width: 100%;}
.message strong{font-weight: 900;}
/* ==========================================================================
   MODAL
   ========================================================================== */

.modall{position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:center;height:0vh;background-color:transparent;overflow:hidden;transition:background-color 0.25s ease;z-index:1200001}.modall.open{position:fixed;width:100%;height:100vh;background-color:rgba(0,0,0,.5);transition:background-color 0.25s}.modall.open>.content-wrapper{transform:scale(1)}.modall .content-wrapper{position:relative;display:flex;flex-direction:column;justify-content:space-between;width:auto;max-width:80%;margin:0;padding:40px;background:#f7f7f7;border-radius:.3125rem;box-shadow:0 0 2.5rem rgba(0,0,0,.5);transform:scale(0);transition:transform 0.25s;transition-delay:0.15s;max-height:90vh;overflow:auto}.modalimage{width:20%;background:#fff;padding:20px}.modalimage img{width:100%;height:100%;object-fit:contain}.modalbody{width:80%;padding:40px}.modall .content-wrapper .close{position:absolute;top:.5rem;right:.5rem;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:none;background-color:transparent;font-size:1.5rem;transition:0.25s linear;cursor:pointer}.modall .content-wrapper .close:before,.modall .content-wrapper .close:after{position:absolute;content:'';width:1.25rem;height:.125rem;background-color:#000}.modall .content-wrapper .close:before{transform:rotate(-45deg)}.modall .content-wrapper .close:after{transform:rotate(45deg)}.modall .content-wrapper .close:hover{transform:rotate(360deg)}.modall .content-wrapper .close:hover:before,.modall .content-wrapper .close:hover:after{background-color:tomato}.modall .content-wrapper .modall-header{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0 0 1.25rem}.modall .content-wrapper .modall-header h2{font-size:1.5rem;font-weight:700;color:var(--main)}.modall .content-wrapper .modall-content{position:relative;display:flex;flex-wrap:wrap;width:100%;padding:0}.modall .content-wrapper .modall-content p{font-size:.875rem;line-height:1.75;width:100%}.modall .content-wrapper .modall-footer{position:relative;display:flex;align-items:center;justify-content:flex-start;width:100%;margin:0;padding:1.875rem 0 0}.modall .content-wrapper .modal-footer .action{position:relative;margin-right:.625rem;padding:.625rem 1.25rem;border:none;background-color:slategray;border-radius:.25rem;color:#fff;font-size:1rem;font-weight:600;text-transform:uppercase;overflow:hidden;z-index:1}.modall .content-wrapper .modal-footer .action:before{position:absolute;content:'';top:0;left:0;width:0%;height:100%;background-color:rgba(255,255,255,.2);transition:width 0.25s;z-index:0}.modall .content-wrapper .modal-footer .action:first-child{background-color:var(--main)}.modall .content-wrapper .modal-footer .action:last-child{background-color:var(--grey)}.modall .content-wrapper .modal-footer .action:hover:before{width:100%}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */


@media only screen and (min-width: 3300px) {
    .navigation{display: flex !important;}
}
@media screen and (max-width: 3300px) {
    .container{width: 100%; margin: 20px auto;}
    .navigation{width: 100%; text-align: right; position: relative; bottom: 0; right: 0; display: none;}
    .nav{ display: block; padding: 20px 0;}
    .nav a{display: block; text-align: right; padding: 10px 0; margin: 0;}

    .ham{display: block;}
    .logo{order: 1;}
    .ham{order: 2;}
    .navigation{order: 3;}
    
    
}
@media screen and (max-width: 1340px) {
    .container{width: 96%;}
    .profileform{width: 100%; padding: 20px 0 0;}.pform{border-radius: 0;}
    .profiletable{width: 100%; padding: 20px 0 0;}.thetable{ border-radius: 0;}  .inductionformer{ border-radius: 0;}  
    .theform{margin: 0;}
    .footbottom{width: 100%; border-top: 1px solid #ccc; padding-top: 20px; margin-top: 20px;}
    
}
@media screen and (max-width: 800px) {
    .halfinput{width: 100%;}
    .userjobs{display: grid; grid-template-columns: 1fr; grid-gap: 20px;}
    .loneformer{padding: 40px 20px;}
    .inductionformer{padding: 40px 20px;}
    .summarytext h3{font-size: 14px;}
}
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

.hidden{display:none!important}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sr-only.focusable:active,.sr-only.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;white-space:inherit;width:auto}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}@media print{*,*:before,*:after{background:transparent!important;color:#000!important;-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}