/* @override 
	https://sitedev-2026.lec.info:8043/wp-content/themes/sl-lec-2026/assets/css/test-langue.css */
:root {
  --input: 45px;
  --margin: 10px;
}
#test-content {
  padding: 30px;
  background: #fff;
  margin: 30px 0;
}
#test-content h2,
#test-content h3 {
  color: #27a6cf;
  font-size: 1.2em;
  font-weight: 700;
  margin-top: 0;
}
#test-content h3 {
  color: #e10000;
}
#test-content img {
  max-width: 100%;
  height: auto;
}
#test-content img.aligncenter {
  display: block;
  margin: 1em auto;
}
#test-content .select-test .lang {
  display: flex;
  flex-direction: column;
  margin: 30px 0;
  position: relative;
}
#test-content .select-test .lang img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#test-content .select-test .action {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin: 40px 0 40px 60px;
}
#test-content .select-test .action img.flag {
  height: 90px;
  width: 120px;
}
#test-content .select-test .action .title {
  background: rgba(39, 166, 207, 0.7);
  color: #fff;
  padding: 0 20px;
  transition: background 0.3s ease-in-out 0s;
  width: calc( 100% - 120px );
}
#test-content .select-test .action .title h4,
#test-content .select-test .action .title p {
  margin: 0;
}
#test-content .select-test .action .title h4 {
  font-weight: 800;
}
#test-content .select-test .action .title p {
  font-size: 1.3em;
  font-weight: 300;
}
#test-content .select-test a {
  display: block;
}
#test-content .select-test a:hover .action .title {
  background: #27a6cf;
}
#test-content .test-result img {
  display: block;
  margin: 20px auto;
}
.questions-slider h3 {
  font-size: 1.125em;
  color: #27a6cf;
  margin: 0;
}
.questions-slider .item {
  padding: 20px;
  background: #FFFFFF;
  margin: 20px 0;
  width: 100%;
}
.questions-slider .item:not(.form) label {
  display: block;
  margin: 10px 0;
}
.questions-slider .item:not(.form) h3 + p {
  font-size: 1.3em;
  color: #094679;
  margin: 10px 0;
}
.questions-slider .item.form {
  padding: 0;
}
.questions-slider .item.form p:not(.inline-cb) {
  margin: 20px 0 0;
}
.questions-slider .item p.privacy {
  color: #777;
}
.questions-slider .nav {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.questions-slider .nav a {
  display: inline-block;
  padding: 6px 12px;
  color: #27a6cf;
  border: 1px solid #27a6cf;
  transition: all 0.3s ease-in-out 0s;
}
.questions-slider .nav a .fa {
  margin: 0 5px;
}
.questions-slider .nav a:hover {
  background: #27a6cf;
  color: #FFFFFF;
}
.questions-slider .nav a.next {
  margin-left: auto;
}
.input-field {
  margin: calc( var(--margin) + 15px ) 0;
  position: relative;
}
.input-field input,
.input-field textarea {
  width: 100%;
  background: #fff;
  line-height: var(--input);
  height: var(--input);
}
.input-field input.bold,
.input-field textarea.bold {
  font-weight: 600;
}
.input-field .helper-text {
  display: block;
  font-size: .85em;
  line-height: 1.3em;
  margin: 5px 0 0;
  color: #666;
}
.input-field label {
  display: inline-block;
  color: #777;
  font-size: 14px;
  position: absolute;
  left: 10px;
  top: 0;
  line-height: var(--input);
  transition: all 0.3s ease-in-out 0s;
}
.input-field label .required {
  color: #e10000;
}
.input-field label.active {
  top: calc( var(--input) * -.7 );
  left: 0;
  transform: scale(0.9);
}
[required] ~ label:before {
  content: "*";
  color: #e10000;
  vertical-align: middle;
  margin-right: .25em;
}
input.completed ~ label {
  top: calc( var(--input) * -.7 );
  left: 0;
  transform: scale(0.9);
}
input.completed ~ label:before {
  color: yellowgreen;
}
p.label {
  color: #777;
  font-size: 14px;
  margin: 0;
}
div.lec-select-wrapper {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 3px;
}
.buttons {
  gap: 15px;
  display: flex;
  flex-wrap: wrap;
}
.buttons .btn {
  height: auto;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.4em;
  margin: 0;
}
@media screen and (min-width: 602px) {
  #test-content .test-result {
    display: flex;
    gap: 30px;
    align-items: center;
  }
  #test-content .test-result > div {
    width: calc( 50% - 15px );
  }
}
@media screen and (min-width: 992px) {
  #test-content .select-test {
    --gap: 30px;
    --columns: 3;
    display: flex;
    gap: var(--gap);
  }
  #test-content .select-test .lang {
    margin: 0;
    width: calc( ( 100% / var( --columns ) ) - var( --gap ) + ( var( --gap ) / var( --columns ) ) );
  }
}