@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=latin,cyrillic);
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
  color: #3c763d;
}
.has-success .form-control {
  border-color: #3c763d;
}
.has-success .form-control:focus {
  border-color: #2b542c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}
.has-success .input-group-addon {
  color: #3c763d;
  border-color: #3c763d;
  background-color: #dff0d8;
}
.has-success .form-control-feedback {
  color: #3c763d;
}
.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline,
.has-warning.radio label,
.has-warning.checkbox label,
.has-warning.radio-inline label,
.has-warning.checkbox-inline label {
  color: #8a6d3b;
}
.has-warning .form-control {
  border-color: #8a6d3b;
}
.has-warning .form-control:focus {
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}
.has-warning .input-group-addon {
  color: #8a6d3b;
  border-color: #8a6d3b;
  background-color: #fcf8e3;
}
.has-warning .form-control-feedback {
  color: #8a6d3b;
}
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
  color: #a94442;
}
.has-error .form-control {
  border-color: #a94442;
}
.has-error .form-control:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}
.has-error .input-group-addon {
  color: #a94442;
  border-color: #a94442;
  background-color: #f2dede;
}
.has-error .form-control-feedback {
  color: #a94442;
}
.btn:hover,
.btn:focus,
.btn.focus {
  color: #333;
}
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: #fff;
  border-color: #ccc;
}
.btn-default .badge {
  color: #fff;
  background-color: #333;
}
.btn-primary {
  color: #fff;
  background-color: #0032ff;
  border-color: #2e6da4;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: #0032ff;
  border-color: #2e6da4;
}
.btn-primary .badge {
  color: #0032ff;
  background-color: #fff;
}
.input-group-addon {
  color: #555555;
  background-color: #eeeeee;
  border: 1px solid #ccc;
}
.tooltip-inner {
  color: #fff;
  background-color: #000;
}
.tooltip.right .tooltip-arrow {
  border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
  border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
  border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #000;
}
.popover {
  background-color: #fff;
  border: 1px solid #ccc;
}
.popover.top > .arrow {
  border-top-color: #999999;
  border-top-color: rgba(0, 0, 0, 0.25);
}
.popover.top > .arrow:after {
  border-top-color: #fff;
}
.popover.right > .arrow {
  border-right-color: #999999;
}
.popover.right > .arrow:after {
  border-right-color: #fff;
}
.popover.bottom > .arrow {
  border-bottom-color: #999999;
}
.popover.bottom > .arrow:after {
  border-bottom-color: #fff;
}
.popover.left > .arrow {
  border-left-color: #999999;
}
.popover.left > .arrow:after {
  border-left-color: #fff;
}
/*! jQuery UI - v1.11.4 - 2015-04-21
* http://jqueryui.com
* Includes: core.css, draggable.css, autocomplete.css, datepicker.css, menu.css
* Copyright 2015 jQuery Foundation and other contributors; Licensed MIT */
/* Layout helpers
----------------------------------*/
.ui-slider .ui-slider-handle {
  background-color: #0032ff;
}
.ui-autocomplete {
  border: 1px solid #CCCCCC;
  background-color: #fff;
}
.ui-autocomplete-term {
  color: #0032ff;
}
.ui-state-focus {
  color: #0032ff;
}
body {
  background-color: #F2F2F2;
}
label {
  color: black;
}
#header {
  background-color: #0032ff;
}
#progressBar {
  background-color: #CCCCCC;
}
#progressBar #progress {
  background-color: #7F6D3E;
}
#footer {
  background-color: #FFFFFF;
  border-top: 1px solid #ccc;
}

/* shows footer logo */
#footerContent img {
  display: block;
}

/* hides version text */
#footerContent p {
  display: none;
  /* position: relative;
  height: 5px; */
  /* Adjust height as needed */
}


.btn.btn-primary,
.btn.btn-custom-action {
  background-color: #0032ff;
  color: #fff;
}
.btn.btn-primary.disabled,
.btn.btn-custom-action.disabled {
  background-color: #ccc;
}
.btn.btn-prev {
  border: 1px solid #ccc;
  color: #ccc;
}
.btn.btn-prev:hover {
    border-color: #CCCCCC;
    background-color: #CCCCCC;
    color: #fff;
}
.btn.button-clear {
  border: 1px solid #ccc;
  color: #CCCCCC;
}
.btn.button-clear:hover {
  border-color: #CCCCCC;
  background-color: #CCCCCC;
  color: #fff;
}
[class*="button-user-"] {
  margin-left: 15px;
  background-color: #F2F2F2;
}
.form-group.answered .form-control-feedback {
  opacity: 1;
  filter: alpha(opacity=100);
  color: #0032ff;
}
input[type="text"].form-control,
input[type="number"].form-control {
  border-bottom: 2px solid #ccc;
}
input[type="text"].form-control:focus,
input[type="number"].form-control:focus {
  border-bottom: 2px solid #0032ff;
  color: #0032ff;
}
input[type="text"].form-control.error,
input[type="number"].form-control.error,
input[type="text"].form-control:focus.error,
input[type="number"].form-control:focus.error {
  color: #d00;
  border-bottom-color: #d00;
}
textarea.form-control {
  border-left: 2px solid #CCCCCC;
}
textarea.form-control:focus {
  border-color: #0032ff;
  color: #0032ff;
}
.popover {
  background-color: #F5A623;
}
.popover.right > .arrow {
  border-right-color: #F5A623;
}
.popover.right > .arrow:after {
  border-right-color: #F5A623;
}
#loaderAnimation {
  border: 2px solid #fff;
}
#loaderAnimation:after {
  background-color: #0032ff;
}
h1 {
  color: #0032ff;
}
#slideContainerOverflow:before {
  background-color: #0032ff;
}
.card {
  background-color: #fff;
}
@media (max-width: 992px) {
  #slideContainerOverflow:before {
	background-color: #F2F2F2;
  }
}
@media (max-width: 768px) {
  #slideContainerOverflow:before {
	background-color: #fff;
  }
}
.browserupgrade {
  background: #ccc;
  color: #000;
}
#slideContainerOverflow:before {
  background: linear-gradient(to right, #0032ff, #3b60f7);
  background: -webkit-linear-gradient(left, #0032ff, #3b60f7);
  background: -moz-linear-gradient(left, #0032ff, #3b60f7);
  background: -ms-linear-gradient(left, #0032ff, #3b60f7);
  background: -o-linear-gradient(left, #0032ff, #3b60f7);
}
#header {
  background: linear-gradient(to right, #0032ff, #3b60f7);
  background: -webkit-linear-gradient(left, #0032ff, #3b60f7);
  background: -moz-linear-gradient(left, #0032ff, #3b60f7);
  background: -ms-linear-gradient(left, #0032ff, #3b60f7);
  background: -o-linear-gradient(left, #0032ff, #3b60f7);
}
#progressBar #progress {
  background: linear-gradient(to right, #0f288b, #0f288b);
  background: -webkit-linear-gradient(left, #0f288b, #0f288b);
  background: -moz-linear-gradient(left, #0f288b, #0f288b);
  background: -ms-linear-gradient(left, #0f288b, #0f288b);
  background: -o-linear-gradient(left, #080808, #0f288b);
}
.sliderContainer label {
  color: black !important;
}
.fancybox-skin {
  color: #444;
}
.fancybox-close {
  color: #0032ff;
}
.fancybox-title-float-wrap .child {
  color: #0032ff;
}
.fancybox-title-over-wrap {
  color: #fff;
  background: #000;
}
/*Retina graphics!*/
.toggle {
  border: 1px solid #ccc;
  color: #666666;
}
.no-touch .toggle:hover, .no-touch .toggle:focus {
	color: #fff;
	background-color: #0032ff;
	border-color: #0032ff;
}

.toggle.is-selected, .toggle.is-selected:focus {
	color: #fff;
	border: 1px solid #0032ff;
	background: #0032ff;
}

.toggle.is-selected span.input {
  border-color: #fff;
}
.toggle.has-img {
  background-color: #fff;
  outline-color: #0032ff;
}
.toggle.has-img .label-outer .label-inner {
  border-top: 1px solid #ccc;
}
.no-touch .toggle.has-img:hover {
  outline: 5px solid #0032ff;
}
.no-touch .toggle.has-img:hover .label-outer {
  background-color: #0032ff;
}
.no-touch .toggle.has-img:hover .label-outer .label-inner {
  background: #0032ff;
  border-color: #0032ff;
  color: #fff;
}
.no-touch .toggle.has-img:hover .label-outer .label-inner span.input {
  color: #fff;
}
.toggle.has-img.is-selected {
  background-color: #fff;
}
.toggle.has-img.is-selected .label-inner {
  border-color: #0032ff;
  background-color: #0032ff;
}
.toggle.noneOfThese {
  background: #bfbfbf;
  color: #fff;
}
.toggle.noneOfThese.is-selected {
  background: #0032ff;
  border: 1px solid #0032ff;
}
.toggle span.input {
  border: 1px solid #ccc;
}
.toggle .zoom .ic-search {
  color: #0032ff !important;
}
.toggle.has-textarea .twrap textarea {
  color: #0032ff !important;
  border-bottom: 2px solid #ccc;
}
h2.is_stuck {
  background-color: #fff;
}
.nn-grid-row {
  border-bottom: 1px solid #ccc;
}
.nn-grid-row .question .ic-check {
  color: #0032ff;
}
.nn-grid-row .answer.is-selected .label {
  background-color: #0032ff;
  color: #fff;
}
.nn-grid-row .label {
  background-color: #F2F2F2;
}
.nn-grid-row .label:hover {
  color: #fff;
  background-color: #0032ff;
}
.type-radio #activeRow .answer.is-selected .label,
.type-radio #activeRow .label:hover,
.type-radio .nn-grid-row:hover .answer.is-selected .label,
.type-radio .nn-grid-row .label:hover {
  color: #fff;
}
.any-order-true .type-radio .nn-grid-row .label:hover {
  color: #fff;
}
.any-order-true .type-radio .nn-grid-row .is-selected .label {
  color: #fff;
}
@media (max-width: 768px) {
  .nn-grid-row {
	background-color: #fff;
  }
  .touch .label:hover {
	background-color: #F2F2F2 !important;
	color: inherit;
  }
  .touch .is-selected .label:hover {
	background-color: #0032ff !important;
	color: #fff;
  }
}

/* --------------------------------------- */
/**
*   Regular Grid of Doom
*
*   Separated over multiple area's
*
*/
.card-matrix .segmentSection {
  border: 1px solid #0032ff;
}
.card-matrix .segmentSection .sectionTitle {
  color: #CCCCCC;
}
.card-matrix .segmentSection .sectionTitle .arrow {
  border-color: transparent transparent transparent #0032ff;
}
.card-matrix .segmentSection.open .sectionTitle {
  background-color: #0032ff;
  color: #fff;
  border-bottom: 1px solid #0032ff;
}
.card-matrix .segmentSection.open .sectionTitle .arrow {
  border-color: transparent transparent transparent #fff;
}
.no-touch .card-matrix .toggle:hover {
  background-color: #fff;
  border-color: #0032ff;
}
.no-touch .card-matrix .toggle:hover.is-selected {
  color: #fff;
  background-color: #0032ff;
  border-color: #0032ff;
}
/* --------------------------------------- */
/**
*   Grid of Doom horizontal version
*
*   .card-grid-horizontal
*
*/
.card-grid-horizontal .gridContainer .head td.active:after,
.card-grid-horizontal .gridContainer .head th.active:after {
  background-color: #0032ff;
}
.card-grid-horizontal .gridContainer tr.is-blurred td {
  border-bottom: 1px solid #e6e6e6;
}
.card-grid-horizontal .gridContainer tr.selected-prev td {
  border-bottom: 1px solid #ccc;
}
.card-grid-horizontal .gridContainer tr.has-focus th,
.card-grid-horizontal .gridContainer tr.has-focus td {
  border-bottom: 1px solid #ccc;
}
.card-grid-horizontal .gridContainer th,
.card-grid-horizontal .gridContainer td {
  border-bottom: 1px solid #ccc;
}
.card-grid-horizontal .gridContainer th:first-child,
.card-grid-horizontal .gridContainer td:first-child {
  background-color: #fff;
}
.card-grid-horizontal .gridContainer th.answered .group.open-group,
.card-grid-horizontal .gridContainer td.answered .group.open-group {
  background-color: #0032ff;
}
.card-grid-horizontal .gridContainer th .category.is-selected .category-label,
.card-grid-horizontal .gridContainer td .category.is-selected .category-label {
  background-color: #0032ff;
  color: white;
}
.card-grid-horizontal .gridContainer th .category .category-label,
.card-grid-horizontal .gridContainer td .category .category-label {
  background-color: #F2F2F2;
}
.card-grid-horizontal .gridContainer th .category .category-label:hover,
.card-grid-horizontal .gridContainer td .category .category-label:hover {
  background-color: #0032ff;
  color: #fff;
}
.transposed .nn-grid-column .question:after {
  color: #0032ff;
}

#goLeft span,
#goRight span {
  color: #fff;
}
@media (max-width: 992px) {
  .card-grid-horizontal .matrix tr {
	border: 1px solid #ccc;
  }
  .card-grid-horizontal .matrix td:first-child p {
	color: #0032ff;
  }
}
#radioSliderContainer > .segment + .segment {
  border-top: 1px solid #f2f2f2;
}
.sliderContainer label {
  color: #0032ff;
}
.sliderContainer .sliderProgress {
  background-color: #0032ff;
}
.sliderContainer .ui-slider .ui-slider-handle {
  background-color: #CCCCCC;
}
.sliderContainer .ui-slider .ui-slider-handle:hover,
.sliderContainer .ui-slider .ui-slider-handle:focus {
  background-color: #0032ff;
}
.sliderContainer .touched.ui-slider .ui-slider-handle {
  background-color: #0032ff;
}
.sliderContainer.radioSlider .tickIndicator {
  background-color: #fff;
}
.totalSlider label {
  color: #0032ff;
}
.totalSlider .slider .sliderProgress {
  background-color: #0032ff;
}
.totalSlider .input .character {
  color: #0032ff;
}
.totalSlider .input input {
  color: #0032ff;
}
@media (max-width: 768px) {
  .totalSlider .slider .ui-slider-handle {
	background-color: #F2F2F2;
  }
  #radioSliderContainer > .segment + .segment {
	border-top: 1px solid #f2f2f2;
  }
}
#welcomeMsg {
  background-color: #fff;
}
#welcomeMsg h2 {
  color: #7F6D3E;
}
.card-datepicker .answerCategory .input-group {
  border: 1px solid #F2F2F2;
}
.card-datepicker .answerCategory .input-group-addon {
  background-color: #F2F2F2;
}
.card-datepicker .answerCategory .input-group-addon .ic-calendar {
  color: #ccc;
}
.ui-datepicker {
  background-color: #F2F2F2;
  color: #666666;
}
.ui-datepicker:before {
  border-color: transparent #F2F2F2 transparent transparent;
}
.ui-datepicker.position-bottom:before {
  border-color: transparent transparent #F2F2F2 transparent;
}
.ui-datepicker .ui-datepicker-header {
  border-bottom: 2px solid #ccc;
}
.ui-datepicker th span.ui-state-hover,
.ui-datepicker td span.ui-state-hover,
.ui-datepicker th a.ui-state-hover,
.ui-datepicker td a.ui-state-hover {
  color: #0032ff;
  border: 2px solid #0032ff;
}
.ui-datepicker .ui-datepicker-current-day a {
  color: #0032ff;
  border: 2px solid #0032ff;
}
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  color: #666666;
}
.card-dragdrop .ui-draggable-dragging {
  background-color: #0032ff !important;
  color: #fff !important;
}
.card-dragdrop .answer {
  background-color: #F2F2F2;
}
.card-dragdrop #dragAnswers .answer:hover {
  background-color: #0032ff;
  color: #fff;
}
.card-dragdrop #dropCategories .area .droppable {
  border: 1px dashed #0032ff;
}
.starsContainer .ratingRow:after {
  background-color: #ccc;
}
.starsContainer .ratingRow .category-holder-container ul li .btn-default {
  background-color: #ccc;
}
.starsContainer .ratingRow .category-holder-container ul li .btn-default:hover {
  background-color: #ccc;
}
.mediaButton.playButton .arrow {
  border-color: transparent transparent transparent #7F6D3E;
}
.mediaButton.playButton.is-playing:before {
  background-color: #7F6D3E;
}
.mediaButton.playButton:hover .arrow {
  border-color: transparent transparent transparent #97824a;
}
.mediaButton.recordButton:before,
.mediaButton.pictureButton:before {
  background-color: #7F6D3E;
}
.mediaButton.recordButton span,
.mediaButton.pictureButton span {
  color: #7F6D3E;
}
.mediaButton:hover {
  background-color: #dedede;
}
html[dir="RTL"] .ui-datepicker:before {
  border-color: transparent transparent transparent #f2f2f2;
}
@media (max-width: 768px) {
  #slideContainerOverflow {
	background: #fff;
  }
  #slideContainerOverflow:before {
	background-color: #fff;
  }
  html,
  body {
	background-color: #fff;
  }
  .toggle.is-selected {
	color: #fff;
	border: 1px solid #0032ff;
	background: #0032ff;
  }
  .toggle.is-selected span.input {
	border-color: #fff;
  }
}

.transposed .nn-grid-column .category input:checked + .category-label {
  background-color: #0032ff;
}
@media screen and (min-width: 992px) {
  .transposed .nn-grid-column .category .category-label:hover {
	background-color: #0032ff;
  }
}
.notouch .transposed .nn-grid-column .category.is-selected .category-label:hover {
  background-color: #0032ff !important;
}

.toggle.is-selected span.input {
  margin-top: 0;
}

/* slide texts overlapping */
div.legend span.tick{
  padding: 2px;
  margin: 2px;
}

/* custom fonts */
html {
  font-family: 'Open Sans', sans-serif;
}
body {
  font-family: 'Open Sans', sans-serif;
}
.tooltip {
  font-family: 'Open Sans', sans-serif;
}
.popover {
  font-family: 'Open Sans', sans-serif;
}
.ui-menu .ui-menu-item {
  font-family: 'Open Sans', sans-serif;
}
@font-face {
  font-family: 'Open Sans', sans-serif;
}
.ui-autocomplete-input {
  font-family: 'Open Sans', sans-serif;
}
h2 {
  font-family: 'Open Sans', sans-serif;
}
.card-matrix .segmentSection .sectionTitle {
  font-family: 'Open Sans', sans-serif;
}
.card-grid-horizontal .matrix td:first-child {
  font-family: 'Open Sans', sans-serif;
}
.totalSlider label {
  font-family: 'Open Sans', sans-serif;
}
.totalSlider .input input {
  font-family: 'Open Sans', sans-serif;
}
#welcomeMsg h2 {
  font-family: 'Open Sans', sans-serif;
}
.welcomeTitle h1 {
  font-family: 'Open Sans', sans-serif;
}

/* images without text */
.toggle.has-img .label-outer .label-inner {
	padding: 0px;
}

.toggle.has-img.is-selected .label-outer .label-inner {
	padding-left: 50px;
}

.toggle.has-img .label-outer .selected_count_number{
	display: none;
}

.toggle.has-img.is-selected .label-outer .selected_count_number{
	position: absolute;
	bottom: 3px;
	z-index: 10001;
	color: #0032ff;
	width: 100%;
	text-align: right;
	display: block;
	padding-right: 3px;
}

.starsContainer .ratingRow .ratingText .ic-check {
	color: #0032ff;
 }

h2{
	font-family: 'Open Sans', sans-serif;
	font-size: 12pt;
	font-weight: bolder;
	color: #000000;
	text-align: justify;
}

.toggle.is-selected span.input {
	margin-top: -14px;
}
/* shows footer logo */
.logo {
  background-image: var(--footer-logo-path);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 31px;
}

:root {
  --footer-logo-path: url('../../footer-logo-l.png');
}

#footerContent img {
    display: block;
}

.nn-grid-row .label:hover, .nn-grid-row .label:focus {
    background-color: #0032ff;
}

.no-touch .toggle.has-img:hover, .no-touch .toggle.has-img:focus {
    outline: 5px solid #0032ff;
}

.no-touch .toggle.has-img:hover .label-outer, .no-touch .toggle.has-img:focus .label-outer {
background-color: #0032ff;
}

.no-touch .toggle.has-img:hover .label-outer .label-inner, .no-touch .toggle.has-img:focus .label-outer .label-inner {
    background: #0032ff;
    border-color: #0032ff;
    color: #fff;
}

.nn-grid-row .label:focus {
    border: 5px solid #0032ff;
}

.sliderContainer .touched.ui-slider .ui-slider-handle {
    background-color: #0032ff;
}

.sliderContainer .sliderProgress {
    background-color: #0032ff;
}

.nn-grid-row .label:focus {
    color: black;
    background-color: #f2f2f2;
    border-color: #0032ff;
}

/* ------------------------------------- New styles by LT team ------------------------------------- */


@media(max-width: 768px) {
  #footer {
    padding: 30px 0;
    display: list-item;
    background-color: #fff;
  }
}

.h2 {
  font-size: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 500;
  line-height: normal;
}

.instructs {
  font-size: smaller;
  font-family: 'Open Sans', 'Roboto', Arial, sans-serif, Calibri;
  font-style: italic;
  font-weight: lighter;
  display: inline-block;
  padding: 10px 0 5px 0;
}

.vivid {
  font-weight: bold;
  color: #027c72;
}

.nn {
  font-family: Arial;
  font-style: italic;
  opacity: 0.7;
}

.nn-box {
  background: #bfbfbf;
  color: #fff;
}

.nn-grid-row .nn-box {
  background: #bfbfbf;
  color: #fff;
}

.toggle.nn-box {
  background: #bfbfbf;
  color: #fff;
}

.toggle.nn-box.is-selected {
  background: #04998C !important;
  border: 1px solid #04998C !important;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}

.yellow {
  color: yellow;
}

.orange {
  color: orange;
}

.purple {
  color: purple;
}

.brown {
  color: brown;
}

.cyan {
  color: cyan;
}

.magenta {
  color: magenta;
}

.lime {
  color: lime;
}


.silver {
  color: silver;
}

.gold {
  color: gold;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.underline {
  text-decoration: underline;
}

.centered {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.centered>* {
  display: inline-block;
  vertical-align: middle;
}

.arial {
  font-family: Arial;
}

.header {
  display: block;
  font-size: 42px;
  font-weight: bold;
  text-align: center;
  margin: 10px 0;
  /* color: #333; */
}

/* Header for tablets */
@media (max-width: 768px) {
  .header {
    font-size: 36px;
    margin: 5px 0;
  }
}

/* Header for mobile devices */
@media (max-width: 480px) {
  .header {
    font-size: 28px;
    margin: 0;
  }
}

.header-small {
  display: block;
  font-size: 28px;
  font-weight: normal;
  text-align: center;
  color: #333;
}

/* Header for tablets */
@media (max-width: 768px) {
  .header-small {
    font-size: 24px;
  }
}

/* Header for mobile devices */
@media (max-width: 480px) {
  .header-small {
    font-size: 20px;
  }
}

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

img.left {
  display: block;
  margin-left: 0;
  margin-right: auto;
}

img.right {
  display: block;
  margin-left: auto;
  margin-right: 0;
}

img.hover-zoom {
  transition: transform 0.5s;
}

img.hover-zoom:hover {
  transform: scale(1.1);
}

img.shadow {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

img.circle {
  border-radius: 50%;
}

img.rounded {
  border-radius: 8px;
}

img.grayscale {
  filter: grayscale(100%);
}

img.bordered {
  border: 2px solid #000;
  border-radius: 10px;
}

img.polaroid-left {
  padding: 10px;
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: rotate(-5deg);
}

img.polaroid-right {
  padding: 10px;
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: rotate(5deg);
}

img.polaroid-reverse {
  padding: 10px;
  background: white;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2);
  transform: rotate(5deg);
}

img.polaroid-tilted-left {
  padding: 10px;
  background: white;
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.2);
  transform: rotate(-10deg);
}

img.polaroid-tilted-right {
  padding: 10px;
  background: white;
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
  transform: rotate(10deg);
}


img.thumbnail {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

img.responsive_1 {
  max-width: 50%;
  height: auto;
}

/* Styles for tablets (portrait and landscape) */
@media (max-width: 1024px) {
  img.responsive_1 {
    max-width: 60%;
    height: auto;
  }
}

/* Styles for mobile devices */
@media (max-width: 600px) {
  img.responsive_1 {
    max-width: 75%;
    height: auto;
  }
}

/* Styles for smaller mobile devices */
@media (max-width: 480px) {
  img.responsive_1 {
    max-width: 85%;
    height: auto;
  }
}


img.transparent {
  opacity: 0.5;
}

img.vintage {
  filter: sepia(1) contrast(0.8) brightness(1.2);
  border: 5px solid #704214;
  padding: 10px;
  background: #f4ecd8;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: rotate(-3deg);
}

img.tilted-shadow {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
  transform: rotate(5deg);
  transition: transform 0.3s;
}

img.tilted-shadow:hover {
  transform: rotate(0deg);
}

img.framed {
  padding: 15px;
  border: 10px solid #fff;
  box-shadow: 0 0 0 10px #000, 0 0 0 20px #fff;
  background: #fff;
  transform: rotate(-2deg);
}

img.retro {
  filter: hue-rotate(90deg) saturate(1.5);
  border: 5px solid #ffcc00;
  padding: 10px;
  background: #333;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: rotate(2deg);
}

img.sketch {
  filter: grayscale(1) contrast(1.5);
  border: 2px dashed #000;
  padding: 10px;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: rotate(-1deg);
}

.special_1 {
  width: 90%;
  border: 1px solid #6f6f6f;
  margin: auto;
  text-align: center;
  background-color: rgb(171, 230, 227);
  font-size: 24px;
  padding: 10px;
}

/* SPC_1 for mobile devices */
@media (max-width: 600px) {
  .special_1 {
    font-size: 22px;
    width: 100%;
  }
}

/* SPC_1 for smaller mobile devices */
@media (max-width: 480px) {
  .special_1 {
    font-size: 22px;
    padding: 8px;
    width: 100%;
  }
}