.support .intro, .support-cb .intro {background-color: #f1f1f1; padding: 60px 0; font-size: 1.125rem;}
.support .input-group-addon {background: #fff;}
.support .input-group {flex-wrap: unset;}
.support .intro input {background: url(../png/search-icon.png) no-repeat scroll 20px 15px #fff; background-size: 20px; padding: 5px 0 5px 60px; font-size: 1.063rem;}
#search_form .form-control {height: 50px; border: none; width: 100%; display: inline-block; float: left; border-radius: 0; margin-bottom: 15px;}
.search-section {margin: 20px 0;}
.select-items .btn-default {color: #333; background-color: #fff; border: none; text-transform: capitalize; text-align: left; display: flex; justify-content: space-between; align-items: center;}
.select-items .btn-group {margin: 0 10px 10px 0;}
#search_form select.form-control { font-size: 0.75rem; max-width: 150px; margin-right: 15px; padding: 10px 20px; height: auto; background: url(../png/select-icon.png) no-repeat right white; background-size: 7%; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; background-position-x: 90%;}
.support select::-ms-expand {display: none; }
.select-items .dropdown-menu>li>a {padding: 8px 20px;}
.select-items .dropdown-menu {font-size: 0.75rem; background: #fff; max-width: 150px;}
.form-control option {font-size: 0.75rem; background: #fff; max-width: 150px;}
.btn-search {height: 50px; background: #009CFF; min-width: 120px; padding: 6px 20px 7px; text-transform: capitalize; font-size: 1.125rem; margin-bottom: 15px;}
.btn-search:hover, .btn-search:focus {color: #fff; background: #0ea2ff;}
.btn-register {height: 50px; background: #009CFF; min-width: 130px; padding: 6px 10px 7px; text-transform: capitalize; font-size: 1.125rem; border: none;}
.btn-register:hover, .btn-register:focus {color: #fff; background: #0ea2ff;}
.support .register-section input.form-control {font-size: 14px; border: 1px solid #D6D6D6;}
.support .register-section  .form-control {margin-bottom: 0;}
.support input[placeholder] { text-overflow: ellipsis; }
.support ::-moz-placeholder { text-overflow: ellipsis; }
.support input:-moz-placeholder { text-overflow: ellipsis; }

#announcements-section {background: #fff; padding: 40px 25px;}
#announcements-section {font-size: 16px;}
#announcements-section h3 {font-size: 24px; font-weight: 500; margin-top: 0;}
#announcements-section a {font-weight: 500; color: #333;}
#announcements-section a:hover {text-decoration: underline;}

.faq-section {padding: 60px 0;}
.faq-section h2, .user-manuals h2 {margin-bottom: 60px;}
.faq-section h3 {font-size: 1.125rem; margin: 20px 0; display: inline-block;}
.faq-section h4, .faq-section h5 {font-size: 1rem; font-weight: bold; display: inline;}
.faq-section span {display: block; margin-left: 24px; margin-top: 5px;}
.faq-section ul { margin:0 0 20px; padding:0;}
.faq-section ul>li { margin:0 0 10px 0; padding:0 0 0 58px; list-style-type:none;}
.faq-section ul>li:before { display:inline-block; width:20px; padding-right:10px; font-weight:bold; text-align:right;}
.faq-item {border: 1px solid #9EA9CF; margin-bottom: 20px; padding: 0;}
.faq-section a.collapse-link {text-decoration: none; color: #333;}
.faq-section a {text-decoration: none;}
.faq-section ul a:hover {text-decoration: underline;}
.faq-section i.bi { display: inline-block; padding-right: 0; margin: 0 16px 0 20px; filter: invert(64%) sepia(5%) saturate(6537%) hue-rotate(182deg) brightness(97%) contrast(80%);}
.option ol:first-child { border-top: 1px solid #9ea9cf; padding-top: 20px; }
.option ul {list-style: none; border-top: 1px solid #9ea9cf; padding-top: 20px;}
[class*=" bi-"]::before, [class^=bi-]::before {font-weight: 700 !important;}
.option a[aria-expanded="true"] .bi-chevron-down {transform: rotate(180deg);}

.register-section {background: #F3F3F3; padding: 60px 0;}
.register-section h4 {font-weight: 400; margin-bottom: 15px;}
.register-item {background: #fff; padding: 30px 45px; display: flex; flex-direction: column; border-radius: 10px;}
.register-item .register-form {margin-top: auto;}
.support-section {background: #fff; padding: 60px 0; text-align: center;}
.support-section h4 {margin-top: 10px; font-weight: 400;}
.support-section a {color: #009CFF; text-decoration: none;}
.support-items p, .support-items a {font-size: 1rem;}
.support-items {margin-bottom: 30px;}
.support-items:hover a span {text-decoration: underline;}
a.link-wrap { display: block; color: #333; text-decoration: none; }
a.link-wrap:hover { color: #333; text-decoration: none; }
.support-wrap:hover { border-radius: 0; webkit-box-shadow: 0 0 12px 2px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 12px 2px rgba(0,0,0,0.1); box-shadow: 0 0 12px 2px rgba(0,0,0,0.1); }
.support-wrap {border: 1px solid #d3d3d3; padding: 50px 40px 80px; height: 100%; border-radius: 10px;}
.support-items span.icon {height: 35px; width: 35px; display: block; margin: 0 auto}
.support-section span.link { color: #0067CB; text-decoration: none; font-size: 1rem; }

.icon-contact {background: url(../png/contact-icon.png) no-repeat; background-size: cover;}
.icon-download {background: url(../png/download-icon.png) no-repeat; background-size: cover;}
.icon-learn {background: url(../png/learning-icon.png) no-repeat; background-size: cover;}

h4.modal-title {font-weight: 400;}
.modal-dialog {display: block;}
.support-form-section .form-group {margin-bottom: 15px;}
.form-control {border-radius: 0;}
.support-form-section label {font-weight: bold; margin-bottom: 5px;}
.support-form-section .required {color: #ff0000;}
.support-form-section h3 {padding-bottom: 50px;}
.support-form-section #attach {margin-top: 7px;}
.support-form-success-section {min-height: 15px;}
.support-form-section .container {width: 100%;}
input[type=file] { display: block; }

.support-cb .support-section { background: #f1f1f1; }
.support-cb .support-wrap { text-align: left; border-color: transparent; }
.support-cb .support-items span.icon { margin: 0; }
.support-cb .support-wrap:hover { box-shadow: none; }
.support-cb .faq-section img { margin: 20px 0; max-width: 60%; }
.support-cb .support-wrap { padding: 0; }
.support-cb .faq-section ol:first-child { padding-left: 3rem; padding-right: 1rem; }
.support-cb .option ul {padding-top: 0; padding-left: 20px; list-style: disc; border-color: transparent;}
.support-cb .option ol ol {padding-left: 20px;}
.support-cb .faq-section ol ul>li { padding: 0; }
.support-cb .faq-section ul>li { list-style: disc; }

.form-group { margin-bottom: 1rem; }
#register_product_form .input-group-btn {display: block; margin-top:10px;}

@media (min-width: 577px) {
    .row.equal { display: flex; flex-wrap: wrap; }
    .register-item { height: 100%; }
}

@media (max-width:991px) {
    .support .register-section .input-group {flex-wrap: wrap;}
}

@media (max-width:767px) {
    .support .intro p {font-size: 1rem}
    .manuals-items {width: auto; flex: 0 45%;}
    .user-manuals h3, .support-items p {font-size: 0.875rem;}
    .select-items .form-control {width: auto; min-width: 45%;}
    #search_form  select.form-control {background-size: 6%; background-position-x: 93%;}
    #search_form  .intro input, .btn-search, .btn-register {font-size: 0.938rem;}
    .faq-section h3, .support-section h3 {font-size: 1rem}
    .faq-item {margin: 15px 0;}
    .register-item {padding: 20px;}
    .register-section, .support-section {padding: 40px 0;}
    .modal-body p {font-size: 14px; padding: 0 20px;}
	.support-cb .faq-section img { margin: 20px 0; max-width: 90%; }
	.support-cb .faq-section ol:first-child { padding-left: 2rem; }
}

@media (max-width:576px) {
    .register-item {margin-bottom: 20px;}
}

@media (max-width:450px) {
    .manuals-items {width: auto; flex: 100%;}
    .faq-section .body {display: flex; align-items: center;}
    .faq-section ol>li {padding-left: 10px;}
    .btn-search {width: 100%;}
    .select-items .form-control {width: auto; min-width: 100%;}
    #search_form  select.form-control {background-size: 4%; background-position-x: 95%;}
    #search_form  .input-group {display: block;}
}

/* For loading spinner */
#loader-section, #no-results-msg{
	display: none;
	font-size: 15px;
	padding-top: 20px;
	text-align: center;
}
.loader{
	position: relative;
	height: 48px;
}

.loader-content{
	position: absolute;
	top: 0;
	left: 40%;
	max-width: 100%;
}

.spinner {
	position: absolute;
    left: 250;
    top: 0;
    display: block;
    animation: rotator 1.5s linear infinite;
    -ms-animation: rotator 1.5s linear infinite;
}

.spinner.size-4 {
	width: 48px;
	height: 48px;
}

.spinner.size-4 circle {
	stroke-width: 4;
}
.loader-text {
	padding-left: 72px;
	line-height: 50px;
	height: 50px;
	width: 250px;
}

.text-ellipsis{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.spinner.size-4 .path {
	stroke-dasharray: 150.72px;
	animation: dash-4 1.5s ease-in-out infinite;
	-ms-animation: dash-4 1.5s ease-in-out infinite;
}

@keyframes dash-4 {
	0% {
		stroke-dashoffset: 150.72px;
	}

	50% {
		stroke-dashoffset: 37.68px;
		transform: rotate(135deg);
		-ms-transform: rotate(135deg);
	}

	100% {
		stroke-dashoffset: 150.72px;
		transform: rotate(450deg);
		-ms-transform: rotate(450deg);
	}
}

.spinner circle {
	fill: none;
	stroke-linecap: round;
}

.back {
	stroke: #CDCED0;
}

.path {
	stroke: #3D73D8;
	stroke-dashoffset: 0;
	transform-origin: center;
	-ms-transform-origin: center;
}

@keyframes rotator {
	0% {
		transform: rotate(0deg);
		-ms-transform: rotate(0deg);
	}

	100% {
		transform: rotate(270deg);
		-ms-transform: rotate(270deg);
	}
}

#search_form div.search-line{
	width: 100%;
}
#search-result{
	display: none;
	padding-top: 20px;
	padding-bottom: 20px;
}
#search-result-iframe {overflow:hidden;height:500;width:100%}

.search-result-div{
	margin-bottom: 12px;
}
.search-result-div a.iframe-modal {
	font-size: 16px;
	font-weight: 500;
	color: #333;
	text-decoration: none;
}
.search-result-div a.iframe-modal:hover {
	text-decoration: underline;
}
button.btn { outline: none !important;}
button.btn-default.focus, button.btn-default:focus {
    color: #fff;
    background-color: #959595;
    border-color: #8c8c8c;
}
#modal-search .modal-title{
	line-height: 1.5;
	display: inline-block;
	width: 97%;
}
#modal-search button.close{
	line-height: 1.5;
}
#modal-search .btn {
  text-transform: unset !important;
}

@media (min-width: 768px) {
	#modal-search div.modal-dialog{
	max-width: 890px;
	height: 580px;
}
}