:root {

  --lightgrey: #efefef;
  --white: #fff;
  --main: #61777F;
--black: #002E5E;

  --darker: #001c38;
    --lightblue:#EDF2F7;
}

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(--main);
}

.picker::-webkit-scrollbar {
  width: 11px;
}
.picker {
  scrollbar-width: thin;
  scrollbar-color: var(--main) var(--lightgrey);
}
.picker::-webkit-scrollbar-track {
  background: var(--lightgrey);
}
.picker::-webkit-scrollbar-thumb {
  background-color: var(--main);
  border-radius: 6px;
  border: 3px solid var(--main);
}
.completed td{background: rgba(178,34,34,0.5);}

@font-face {font-family: "Combi Sans W01 Medium";
  src: url("fonts/072548a65e217b69b29087e11175c486.eot"); /* IE9*/
  src: url("fonts/072548a65e217b69b29087e11175c486.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("fonts/072548a65e217b69b29087e11175c486.woff2") format("woff2"), /* chrome、firefox */
  url("fonts/072548a65e217b69b29087e11175c486.woff") format("woff"), /* chrome、firefox */
  url("fonts/072548a65e217b69b29087e11175c486.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("fonts/072548a65e217b69b29087e11175c486.svg#Combi Sans W01 Medium") format("svg"); /* iOS 4.1- */
}

/* ==========================================================================
   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 1s ease; text-decoration: none; color: var(--main);}
a:hover{color: #01244C;}
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;}
html,body {
	margin:0;
	padding:0;
	
}
p{margin: 0 0 10px;}
img, iframe{max-width: 100%;}
body{font-family:'Inter', sans-serif;}
html{background: var(--lightgrey);}
h1,h2,h3,h4,h5,h6{font-weight: 400;text-transform: uppercase;letter-spacing: 1px; color: var(--black);font-family: "Combi Sans W01 Medium", 'Inter', sans-serif;}
.container{width:96%; max-width: 1340px; height: auto; overflow: visible; margin: 20px auto; background: #fff;border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; overflow: hidden;}


.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: flex-end; flex-wrap: wrap; align-items: flex-start; width: 100%; position: relative;padding: 0px 20px; overflow: hidden;}


.logo{width:100%; position: absolute; top: 0; left: 0; height: 100%; display: flex; justify-content: center; align-content: flex-start; flex-wrap: wrap; z-index: 2;}
.logo img{max-width: 180px; margin: 0px;}


.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;}
.nav a:hover{color: var(--main);}
.nav a.current{color: var(--main);}
.nav a.current:hover{color: var(--main);}

/*
.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; background: var(--lightgrey); background: rgba(255,255,255,0.9);}
.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; display: flex; justify-content: center; flex-wrap: wrap;border-bottom: 1px solid var(--main);}
.adminlink{padding: 10px; background: var(--lightgrey); color: var(--black); border-radius: 10px; margin: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 2px;}
.adminlink:hover{background: var(--black); color: #fff;}



.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: "Combi Sans W01 Medium", '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;
}




/* ==========================================================================
   FOOTER  https://codepen.io/andrewsims/pen/mQoYwz
   ========================================================================== */
.footer{width: 100%; font-size: 12px; background: linear-gradient(#311e4b,#1E002E); 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 40px 20px;}
.footleft{width: 200px; border-right: 0px solid rgba(255,255,255,0.2); padding: 0 20px 20px 0;outline: 0px solid white; }
.footleft img{width: 140px;}


.footbottom{width: calc(100% - 200px); text-align: left;border-top: 0px solid rgba(255,255,255,0.5); }



.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: #fff; margin-bottom: 5px;}

/*ALT FOOTER COLORS*/
.footer{ } 
.footer{background: linear-gradient(var(--black),var(--darker)); } 


.copy a{color: #fff; }
.copy a:hover{color: var(--grey);}

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


.profileform{width: 30%; padding: 20px; text-align: left; outline: 0px solid #0C1A30;}
.loneform{width: 100%; max-width: 400px;}
.profiletable{width: 68%; 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; border: 1px solid rgba(0,0,0,0.2); border-radius: 20px; position: relative;}

.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; background: #fff; padding:40px;}
.theform{width:100%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 40px 20px; margin-bottom: 20px; text-align: center; border: 1px solid rgba(0,0,0,0.2); border-radius: 20px; 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;}
.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}

/* ==========================================================================
   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: 0 auto 20px;}
    .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%;}
.profiletable{width: 100%;}    
    .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 10px;}
    .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}}