:root {
  --lto-light-green: #CCCD00;
  --lto-dark-green: #009B3E;
  --lto-darker-green: #00742e;
  --lto-purple: #A4418E;
  --lto-white: #ffffff;
  --lto-black: #000000;
  --lto-anthracite: #293133;
}

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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


html {
  font-size: 62.5%; /* Now 10px = 1rem! */
}

body, input, textarea, select, button {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.5em;
}

body, input, textarea, select {
    color: #2D2D2D ;
}


body {font-size: 1.6em;}
p { margin-bottom:1em}

.container { padding:10px; padding-bottom:100px; padding-top:70px}

.lto-logo { padding:0.5em 0em 0.2em 0em;text-align: center; position:fixed; width:100%; background:#fff; box-shadow:0px 2px 8px #ccc; z-index:9999}

.lto-logo svg { height: 40px}
.lto-logo a.right { float:right; margin-right:10px; padding:8px}
.lto-logo a.right svg {  height:24px}

.lto-logo-fixed { padding:0.5em 0em 0.5em 0em;width:100%;  z-index:9999; position:fixed; text-align:center; background:#fff}
.lto-logo-fixed svg { height: 40px}	  

.fixed-buttons {
  position: fixed;
  bottom: 0;
  width: 100%;
  height:72px;
  background-color: #f1f1f1;
  box-shadow : 0px -4px 8px #ccc;
  z-index:9999
  
}

.fixed-buttons svg { max-height:24px; display:block; fill:#fff; margin:0 auto 4px auto}

.fixed-buttons button {
  width: 20%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 18px;
  background-color: var(--lto-dark-green);
  color: white !important;
  float: left;
  padding:0 0.5em;
  font-size:0.7em;
  text-align:center;
  border-right:1px solid var(--lto-darker-green);
}

.fixed-buttons button:last-child { border-right:0}

.fixed-buttons button:hover, .fixed-buttons button.active {
  background-color: var(--lto-light-green) ; color: var(--lto-black) !important; 
}
.fixed-buttons button:hover svg,  .fixed-buttons button.active svg {
	fill:#000;
}

section h1 { font-size:1.4em; font-weight:700; margin-bottom:1em}

body.special {height:100vh; background: var(--lto-light-green); color:var(--lto-black);background: linear-gradient(180deg, var(--lto-white) 0%,  var(--lto-white) 55px,var(--lto-light-green) 56px,  var(--lto-light-green) 100% );}
body.special .container{ padding:10px;}
body.special section { padding-top:60px}
#home-language { position:fixed;   bottom: 0; padding-bottom:2em}

#home-language {text-align:center} 

#home-preload { display:none}

#language-select { margin:2em 0}
#language-select li { float:left; width:calc(50% - 20px); margin:10px }
#language-select li a {   display: inline-flex;flex-direction: column;justify-content: center; align-items: center; background:var(--lto-white); border:4px solid var(--lto-dark-green); color: #000; font-weight:bold; padding:0.5em; text-decoration:none; border-radius: 50%; height:100px; width:100px}
#language-select li a:active { color:var(--lto-white); background: var(--lto-dark-green); border-color: var(--lto-dark-green)}
#language-select li a svg { max-height:40px ; border-radius:6px}


#option-select { margin:2em 0}
#option-select li { float:left; width:calc(50% - 20px); margin:10px; text-align:center }

#option-select li a { display:block; text-align:center ; background:#efefef; border:1px solid #dedede; color: #000; font-weight:bold; padding:0.5em; text-decoration:none}
#option-select li a {   display: inline-flex;flex-direction: column;justify-content: center; align-items: center; background:var(--lto-white); border:4px solid var(--lto-light-green); color: #000; font-weight:bold; padding:0.5em; text-decoration:none; border-radius: 50%; height:130px; width:130px}
#option-select li a svg { max-height:40px;margin-bottom:5px}
#option-select li:nth-child(odd) { clear:both}

#login { margin:1em 0}
#login .row { margin:1em 0; display:block}
#login .row input { width:95%; border:1px solid #ccc; padding:0.4em; font-size:1em; border-radius:3px }


form { margin:1em 0;}
form .row { margin:1em 0; display:block; position:relative}
form .row label {font-weight:700; padding:0 0 0.25em 0; display:inline-block}
form .row label.checkbox {display:inline; font-weight:normal}
form .row input {  border:1px solid #ccc; padding:0.4em; font-size:1em; border-radius:3px }
form .row input[type=text],form .row input[type=email], form .row input[type=password], form .row input[type=date], form .row input[type=number] { width:95%; }
form .row input[type=tel] { padding:0.4em 6px 0.4em 52px; width:95%}
.iti { display:block !important}
body.special .iti--container { color:var(--lto-black) }

#register ul { list-style-type: square; padding:1.2em}
#register ul li { }


a.button {font-size:1em; font-weight:bold; border-radius:0px;background: var(--lto-dark-green); color: var(--lto-white); border:1px solid var(--lto-dark-green); font-weight:600; cursor:pointer; padding:0.5em 1em; text-decoration: none;transition: all 0.5s ease-in-out;line-height:1em; display:inline-block}
a.button:hover  {background: var(--lto-white); color: var(--lto-dark-green); }

form button { font-size:1em; border-radius:0px;background: var(--lto-dark-green); color: var(--lto-white); border:1px solid var(--lto-dark-green); font-weight:600; cursor:pointer; padding:0.5em 1em;transition: all 0.5s ease-in-out;;line-height:1em; display:inline-block}
form button:hover  , form button:active   {background: var(--lto-white); color: var(--lto-dark-green); }
form button:hover  {background: var(--lto-white); color: var(--lto-dark-purle); border:1px solid var(--lto-dark-purle); }
form button:active  {background: var(--lto-white); color: var(--lto-dark-green); }

body.special form button, body.special a.button {border:1px solid var(--lto-dark-white) !important; background:var(--lto-dark-green); color: var(--lto-white);}
body.special form button:hover, body.special a.button:hover {background:var(--lto-white);color:var(--lto-anthracite)}
body.special a { color:var(--lto-black)}

.verification-code { letter-spacing: 1em;}

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

.progress,.progress-bar {
    height: 3px !important;
}

.progress {
    height: 20px;
    margin-bottom: 20px;
	margin-top:10px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

.control-label {
    text-align: left !important;
    padding-bottom: 4px;
}
.progress {
    height: 3px !important;
}
.form-group {
    margin-bottom: 10px;
}
.show-pass{
    position: absolute;
    top:36px;
    right:15px
}
.progress-bar-danger {
    background-color: #e90f10;
}
.progress-bar-warning{
    background-color: #ffad00;
}
.progress-bar-success{
    background-color: #02b502;
}

.fa-eye{
    color: #022255;
    cursor: pointer;
}
.ex-account p a{
    color: #f6086e;
    text-decoration: underline;
}
.fa-circle{
    font-size: 6px;  
}
.fa-check{
    color: #02b502;
}

#jobs ul, #jobs li { list-style:none}
#jobs li { padding:0.4em}
#jobs li a { color:#000; text-decoration:none}
#jobs li a div { font-size:0.8em}
#jobs li a:hover { background:#eee}
#jobs li a h3 { font-weight:bold;display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;}
#jobs li:nth-child(odd) { background:var(--lto-light-green)}

section { clear:both}



.progress-indicator {  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80px;
  } 


.progressbar {
  counter-reset: step;
   font-size:0.8em;
  margin-bottom:1em
}
.progressbar li {
  list-style: none;
  display: inline-block;
  width: 18.5%;
  position: relative;
  text-align: center;
  cursor: pointer;
}
.progressbar.steps-3 li {
  width: 30.5%;
}

.progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 20px;
  height: 20px;
  line-height :20px;
  border: 1px solid #ddd;
  border-radius: 100%;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  background-color: #fff;
}
.progressbar li:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #ddd;
  top: 10px;
  left: -50%;
  z-index : -1;
}
.progressbar li:first-child:after {
  content: none;
}
.progressbar li.active {
  color:  var(--lto-black);
}
.progressbar li.active:before {
  border-color:  var(--lto-dark-green);
  background:  var(--lto-dark-green);
  color:  var(--lto-white);  
} 
.progressbar li.active + li:after {
  background-color: var(--lto-dark-green);
}

label { position:relative}

.tooltip {
    display:inline-block;
    position:relative;
    border-bottom:1px dotted #666;
    text-align:left;
}

.tooltip .bottom {
    min-width:240px; 
    top:40px;
    left:50%;
    transform:translate(-50%, 0);
    padding:10px 20px;
    color:#444444;
    background-color:#EEEEEE;
    font-weight:normal;
    font-size:13px;
    border-radius:0px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    display:none;
}

.tooltip:hover .bottom {
    display:block;
}

.tooltip .bottom i {
    position:absolute;
    bottom:100%;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.tooltip .bottom i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,50%) rotate(45deg);
    background-color:#EEEEEE;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}

.info-item { border-radius:50%; background:#fff; color:#000; width:14px; height:14px; line-height:14px; display:inline-block; text-align:center; font-size:10px; margin-left:2px; float:left}

article { margin-bottom:2em; display:block; height:auto}

article h2 { font-size:1.2em ; font-weight:600; line-height:1.5em; margin-bottom:0.5em}

#my-profile h2 { margin-top:2em; font-size:1.2em ; font-weight:600; line-height:1.5em; margin-bottom:0.5em}
#options { margin-top:20px}

article.list img { float:left; max-width:110px; margin-left:-120px}
article.list .article-lead {padding-left: 120px; overflow:visible; height:100%; display:block}
article.list .article-lead p {font-size:13px; min-height:60px}
article.list .article-lead p span { font-size:13px}
article.list a { text-decoration:none; color:var(--lto-black) }
article.list a h2 { color:var(--lto-dark-green) }

article.full { padding:10px}
article.full img { margin-left:-20px; max-width:calc(100% + 40px)}
article.full h1 { font-size: 1.5em; font-weight:700; line-height:1.4em}
article.full .lead { font-weight:bold}
article.full .lead span { font-weight:normal}
article.full p { font-size:14px}

.back-button { display:inline-block; padding:4px 12px; text-decoration:none; border:1px solid #ccc; background:#eee; font-size:14px;}
.back-button:before {content:"«"; margin-right:5px}


.insurrance { border:1px solid #ccc; background: rgb(233,233,233); background: radial-gradient(circle, rgba(233,233,233,1) 0%, rgba(255,255,255,1) 100%); padding:20px 10px; margin-bottom:20px} 
.insurrance img { max-width:200px; margin-bottom:10px}
.insurrance .options li { display:inline; list-style:none}
.insurrance .options a {} 

#declaration .row label { display:block}

#loading {
    position:fixed;
    padding:0;
    margin:0;

    top:0;
    left:0;
	display:none;
    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.8);	
	z-index:5;
	text-align:center;
}	
.lds-dual-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 108px;
  height: 108px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 96px;
  height: 96px;
  margin: 8px;
  border-radius: 50%;
  border: 10px solid var(--lto-dark-green);
  border-color: var(--lto-dark-green)transparent var(--lto-dark-green) transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#faq ul {}

#faq ul li { border-bottom:1px solid #ccc; padding:10px 0; margin-bottom:10px} 

#faq ul li h3 { font-weight:bold; font-size:1.2em; margin-bottom:0.5em; color:var(--lto-dark-green)}

#faq  h2 { font-weight:bold; font-size:1.42em; margin:1em 0 }

.hidden { display:none !important}
strong { font-weight:700}