@charset "utf-8";
/* CSS Document */
*{ box-sizing:border-box;}
html{font-smoothing:antialiased;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased; scroll-behavior: smooth;}
body{font:normal 13px/18px "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; margin: 0; color: #6f6f6f; counter-reset: my-sec-counter; background: #f7f9fa;}
.clear{content:".";display:block;clear:both;height:0;visibility:hidden;}
img{max-width:100%;width:auto\9;height:auto;border:0;-ms-interpolation-mode:bicubic; vertical-align: middle;}
p{ margin:5px 0;}
a{ color: #404040; text-decoration: none; display: inline-block;}
ul,ul li{ list-style:none; padding: 0; margin: 0;}
i{ font-size:24px;}
h1,h2,h3,h4,h5,h6{margin:0;}

.m-t-3x{ margin-top:30px;}

header{ box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); background-color: #2c2f2f; padding:20px 10px; text-align: center;}
footer{display: grid; grid-template-columns: auto auto; align-items: center; padding:20px 0 10px 0; font-size: 15px;}
footer > div:nth-of-type(2){ text-align: right;}
.button{border-radius: 20px; background-color: #2bab64; color: #FFF; padding:12px; text-transform: uppercase; font-weight: bold; font-size: 16px; width: 80%;border: 0;
    outline: none;
    cursor: pointer; margin-top:10px}
#cancel-verify-code-button.button{background-color: #fb0404;}
.content-wrapper{max-width: 1240px; width:100%; margin:15px auto;}
.content-section{position: relative;background: #FFF; padding:10px; display: grid; grid-template-columns: 1fr; align-items: center; z-index: 1;}
.content-section:before{background: url("https://image.vikatan.com/static/netcore/20210319/pattern.png") repeat; /*background: #f9f9f9;*/ content: ''; position: absolute; width:calc(100% - 20px); height: calc(100% - 20px); left: 10px; top:10px; z-index: -1;}
.content-area{text-align: center;max-width: 600px;margin: 0 auto;}
.show-img{width:100%;}
.main-txt {margin:0px auto 15px; max-width: 85%;}
.main-txt h1{font: bold 32px/32px 'NotoSansTamil';}
.main-txt h2{font: bold 20px/28px 'NotoSansTamil'; color: #4e4c4c;}
.main-txt h2 span{ display: block;}
.main-txt h5{ font-size: 22px; margin-top:12px;}
.main-txt{font-size: 12px;}
.main-txt h6{font-size: 14px;margin-top: 10px; color: rgba(0,0,0,0.4);}
.main-txt h6 span{display:block;}
.main-txt p{margin: 10px 0; line-height: 24px;}

.form{ padding:15px 0;}
.form input{border-radius: 6px; border: solid 0.5px #707070; background-color: #ffffff; padding:8px 15px; outline: none;}
.otp input{ width:36px; border: 0;border-bottom: 2px solid #989898; border-radius: 0; margin:0 5px; background: transparent;padding: 5px 0;
text-align: center;}
.resent-otp{ display: grid; grid-template-columns: auto max-content; grid-gap: 10px; text-align: left; font-weight: bold; padding: 0 10px;}
.resend{ text-transform: uppercase;font-family: 'PFHandbookPro-Regular'; font-size:16px; magin-top:5px; color: #377bee;}
.resend button{ color: #ff0000; border:0; background:none; }
.otp-number .main-txt{margin-bottom: 0;}
.otp-number .form {/*max-width: 50%;*/ margin: 0 auto;}
.otp-number .form input{ width: 100%; border-radius: 30px; background-color: #fff; padding: 10px;}
.otp-number .form .button{ width:100%; margin-top: 20px;}
.time{font-size: 13px;}

.form.otp{}
.otp-number .form.otp input{ border-radius: 4px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border: 1px solid #d1d1d1;}
.form-grid{display: inline-flex;}

.quiz-panel{font-family: 'NotoSansTamil'; padding: 40px 0;}
.quiz-panel h1{ color: #4e4c4c; font-size: 14px; display: grid; grid-template-columns: max-content auto; align-items: center; padding: 0 20px; text-align: left;}
.count{ width:35px; height: 35px; line-height: 38px; border-radius: 50%; margin-right: 10px; background: #8d8888; display: inline-block; color: #FFF; text-align: center;}
.quiz-panel ul{display: grid; grid-template-columns: repeat(2,1fr); grid-column-gap: 10px; padding: 0 20px;  width: 85%; margin: 0 auto;}
.quiz-panel ul li{font-weight: bold; margin: 15px 0;display:grid; grid-template-columns: max-content auto; grid-gap:5px; text-align: left; align-items: center}
.quiz-panel ul li span{display: inline-block; vertical-align: middle;}
.survey-questions{width:85%; margin:0 auto;}

.thankyou{ position: relative;}
.thankyou h1{position: static; text-align: center; top: 50%; left: 50%; font-family: 'NotoSansTamil'; color: #585656; font-size: 21px; line-height: 30px; margin: 10px 0 0;}
.thankyou h1 span{display: block;}
.thankyou p{font-family: 'NotoSansTamil'; padding: 10px 30px; font-size: 16px; line-height: 22px; color:#4e4c4c;}
.thankyou-grid{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 40px; margin-bottom: 20px;}
.thankyou-grid .button{padding: 10px;}
.thankyou-grid .button.channel{ background: #fff; border:1px solid #2bab64; border-radius: 30px; padding: 4px 10px; color: #2bab64;}
.thankyou p.note{font-size: 12px;}

.quiz-panel ul.multi-options{ display: block;}
.quiz-panel ul.multi-options li{grid-template-columns: 130px auto;}
.quiz-panel ul.multi-options .options{display: grid; grid-template-columns: repeat(4, 1fr); grid-gap:10px; align-items: center;}
.quiz-panel ul.multi-options .options span{margin:0 2px;}
/* Base for label styling */
[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
}

[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  position: relative;
  padding-left: 2.95em;
  cursor: pointer;
}

/* checkbox aspect */
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
  content:'';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px;
  background: #b6b9b7;
  border-radius: 50%;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
/* checked mark aspect */
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:after {
  content: '\2713\0020';
  position: absolute;
  width: 30px; height: 30px;
  border-radius:50%;
  top: 50%; transform: translateY(-50%); left: 0;
  font-size: 1.3em;
  line-height: 30px;
  background: #57b0dd; 
  /*background: #57b0dd;*/
  text-align:center;
  transition: all .2s;
  color:#FFF;
  font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}

/* checked mark aspect changes */
[type="radio"]:not(:checked) + label:after {
  content: '\2713\0020';
  position: absolute;
  top: 50%; transform: translateY(-50%); left: 0;
  font-size: 1.3em;
  line-height: 30px;
  background: transparent;
  transition: all .2s;
  font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}
/* disabled checkbox */
[type="radio"]:disabled:not(:checked) + label:before,
[type="radio"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="radio"]:disabled:checked + label:after {
  color: #999;
}
[type="radio"]:disabled + label {
  color: #aaa;
}
/*.quiz-panel ul li.question-active [type="radio"]:not(:checked) + label:after,
.quiz-panel ul li.question-active[type="radio"]:checked + label:after {background: #57b0dd;}
.quiz-panel ul li.question-active span{color: #57b0dd;}*/

.intl-tel-input{width: 100% !important;}
.constituency{ max-width: 66%; margin: 0 auto;}
.constituency label{width: 100%; display: block; font-weight: bold; font-size: 27px; line-height: 35px; margin-bottom: 22px; color: #404040;}
.constituency select{ width: 100%; background: #fff; border-radius: 30px; padding: 10px; border: solid 0.5px #707070; margin-bottom: 20px;}
.constituency .button{ width: 100%;}

.question-list{display: grid; grid-template-columns: 35px 1fr;}
.answer-option{width: 200px; display: block;}
@media only screen and (max-width: 600px) {
	header{display: none;}
    .hidden-mobile{display: none;}
    .m-t-3x{ margin-top:10px;}
    .content-wrapper{margin:0;}
    .content-section{display:block; padding:0;}
    .content-area{padding: 20px 0 50px;}
    .content-section:before{right: 0;}
    .content-area img{width: 56px;}
    .main-txt {margin: 25px auto; }
    .content-section:before{ width:100%; left:0;}
/*    .content-area .button{margin-bottom: 40px;}*/
    footer{ font-size: 12px; display:block; text-align: center;}
    footer span{display: block;}
    footer > div:nth-of-type(2){ text-align: center; margin-top:5px;}
    .main-txt h2 { font: bold 16px/24px 'NotoSansTamil';}
    .survey-questions{width:100%;}
    .quiz-panel{ padding-bottom: 0;}
    .quiz-panel ul{display: block; width:75%;}
    .quiz-panel ul li{margin:20px 0;}
    .thankyou img{ width: 300px; margin: 0 auto; }
    .thankyou h1{font-size: 18px;line-height: 26px;top: 40%;}
    .quiz-panel ul.multi-options li{display: block;}
    .quiz-panel ul.multi-options .options {grid-template-columns: repeat(2, 1fr);grid-gap: 20px;margin-top: 12px;}
	.thankyou-grid{grid-template-columns: repeat(1, 1fr); grid-gap:10px;}
	.thankyou-grid .button img {width: auto;}
	.otp-number .form {max-width: 100%; }
	.constituency { max-width: 90%;}
	.constituency label{font-size: 18px; line-height: 26px;}
}

.none,.hide{ display:none; }
#forgot_err{
	padding:20px;
	font-size:14px;
}
.reg_err,.submition_err{
	color:#f10808;
	font-weight:bolder;
}
.mobile_validation_err{
	padding-bottom: 20px;
    color: #f10808;
    font-weight: bolder;
}
.registration-form-btn{
	padding-top:12px;
}
.submission_err{
	padding:20px;
	color:#f10808;
	line-height:25px;
}
.disabled {
    pointer-events:none; 
    opacity:0.6;  
}