/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/


@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

.question-container .ls-label-question {
    font-weight: inherit;
}

.checkbox-item label::before {
    border-color: var(--bs-primary)!important;
}

.checkbox-item input[type="checkbox"]:checked + label {
  color: var(--bs-primary)!important;
}

.checkbox-item input[type="checkbox"]:checked + label::after {
  background-color: transparent;
  color: var(--bs-primary)!important;
}

.form-change-lang #language-changer-select {
  color: var(--bs-primary)!important;
}

.form-change-lang #lang-select::after {
  color: var(--bs-primary)!important;
}

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #F6A231;
  --bs-yellow: #ffc107;
  --bs-green: #B5CF48;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #6EC6D1;
  --bs-secondary: #6E6E6E;
  --bs-success: #6EC6D1;
  --bs-danger: #F6A231;
  --bs-warning: #F6A231;
  --bs-info: #8146F6;
  --bs-light: #6EC6D1;
  --bs-dark: #29B8C5;
  --bs-black60: #666666;
  --bs-cancel: #9094A7;
  --bs-primary-rgb: 110, 198, 209;
  --bs-secondary-rgb: 246, 162, 49;
  --bs-success-rgb: 77, 215, 83;
  --bs-danger-rgb: 255, 81, 95;
  --bs-warning-rgb: 255, 224, 70;
  --bs-info-rgb: 129, 70, 246;
  --bs-light-rgb: 238, 239, 247;
  --bs-dark-rgb: 30, 30, 30;
  --bs-black60-rgb: 102, 102, 102;
  --bs-cancel-rgb: 144, 148, 167;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: 'Sarabun', sans-serif;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  /*--bs-body-font-size: 1.14rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;*/
  --bs-body-color: #6EC6D1;
  --bs-body-bg: #fff;
}

body {
  font-family: var(--bs-font-sans-serif);
  color: var(--bs-secondary);
}

body .top-container {
    margin-bottom:0px !important;
    margin-top: 0px !important;
}

.survey-name {
    font-family: var(--bs-font-sans-serif);
    color: var(--bs-body-color);
    font-weight: 900;
    
    color: rgb(83,83,83);
    font-weight: 900 !important;
    margin-top: 0px !important;
}

.group-title {
    /*color: var(--bs-body-color);*/
    color: rgb(83,83,83);
    font-weight: 900 !important;
    margin-top: 0px !important;
}

.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #ffffff;
}

.radio-item input[type=radio]:checked + label {
  color: var(--bs-body-color);
}

.radio-item input[type=radio]:checked + label::before {
  border-color: var(--bs-body-color);
}

.radio-item input[type=radio]:checked + label::after {
  background-color: var(--bs-body-color);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:active:focus, .btn-primary.dropdown-toggle.show, .btn-primary.dropdown-toggle.show:focus {
  color: #ffffff;
  background-color: #29B8C5;
  border-color:  #29B8C5;
}

.progress-bar {
  color: #ffffff;
  background-color: var(--bs-secondary);
  box-shadow: none;
}

p {
    color: var(--bs-secondary);
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.question-container .ls-label-question {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

a:hover {
  color: var(--bs-primary);
  text-decoration: underline;
  font-size: inherit
}

a {
	color: var(--bs-primary);
	font-size: inherit
}

.asterisk {
     display: none
}

.imageselect-list .no-anwser-item, .imageselect-list .radio-text-item, .imageselect-list .radio-item {
	padding-left: 20px;
}

.btn-check + .btn-primary:hover {
	color: #ffffff;
	background-color: var(--bs-body-color);
	border-color: var(--bs-body-color);
	box-shadow: none;
}
.btn-check:checked + .btn-primary, .btn-check:checked + .btn-primary:focus, .btn-check:focus:checked + .btn-primary {
	color: #ffffff;
	background-color: var(--bs-body-color);
	border-color: var(--bs-body-color);
	box-shadow: none;
}

.radio-item label::after {
  background-color: var(--bs-body-color);
}

.radio-item label::after {
	display: inline-block;
	position: absolute;
	content: " ";
	width: 9px;
	height: 9px;
	left: 3px;
	top: 3px;
	margin-left: -18px;
	margin-top: 2px;
	border-radius: 50%;
	transform: scale(0, 0);
	transition: var(--bs-body-color) 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}
	.btn-primary:hover {
	color: #ffffff;
	box-shadow: 0px 0px 0px 3px var(--bs-body-color);
}

[class*="btn-outline-"]:hover {
	box-shadow: 0px 0px 0px 3px #000000;
	background-color: #ffffff;
}