@charset "utf-8";
/* CSS Document */

*{ margin: 0; padding: 0;}

body{  font-family: 'Open Sans', sans-serif;}

header{ width: 100%; float: left; background: #e9e9e9; padding: 15px 10px 12px; box-sizing: border-box; min-height: 58px; text-align: center;}

.mid{ width: 100%; float: left; background: #fff; padding: 20px; box-sizing: border-box;}
.login-main{ width: 100%; float: left; margin-top: 8%;}
.logo{ width: 100%; float: left; text-align: center; margin-bottom: 80px;}

.logo a{ text-decoration: none;}

.logo a img{ max-width: 100%; margin: auto; display: block;}

.login-div{ width: 100%; float: left; text-align: center;}
.login-div input{ width: 100%;  margin: auto; display: block; font-size:15px; color: #000; font-weight: 400; background: #fbfbfb; border: 2px solid #e0e0e0; text-align: center; margin-bottom: 15px; max-width: 375px; padding: 20px; box-sizing: border-box; border-radius: 5px;}

.login-div input:focus{ border-color: #b1108f;}

.login-div button{ width: 100%; margin: auto; display: block; background: #b1108f; font-size: 20px; font-weight: 700; color: #fff; text-transform: uppercase; text-align: center; max-width: 375px; padding: 20px; box-sizing: border-box; border-radius: 5px;}

.login-div button:hover{ background: #29166f;}

.back{ float: left; width: 80px; margin-top: 4px;}
.back a{ text-decoration: none; font-size:18px; line-height: 34px; font-weight: 400; color: #2b2b2b;  float: left;}

.back a i{ font-size: 33px; color: #2b2b2b;  margin-right: 8px; float: left;}

.logo-small{ width: auto; margin: auto; display: inline-block;}
.logo-small a{ text-decoration: none;}

.logo-small a img{ max-width: 100%; margin: auto; display: block;}


.logout{ float: right; width: 80px; margin-top: 10px; }

.logout a{ text-decoration: none; font-size: 16px; line-height: 24px; color: #2b2b2b; font-weight: 400;}

.logout a i{ font-size: 24px; color: #2b2b2b; margin-right: 5px; float: left;}

.logout a:hover i{ color: #b1108f;}

.take-photo{ width: 100%; margin: auto; display:block; max-width: 475px; height: auto;}

.take-photo img{ max-width: 100%; margin: auto; display: block;}

.take-photo h3{ width: 100%; float: left; text-align: center; font-size: 20px; font-weight: 400; color: #6c6b6b; margin: 25px 0 40px; text-transform: uppercase;  }


.take-photo button{ width: 100%; float: left; font-size: 20px; font-weight: 400; color: #fff; background: #b1108f; border-radius: 5px; padding: 10px; text-transform: uppercase;}

.take-photo button:hover{ background: #29166f;}

.rule-main{ width: 100%; margin:auto; display: block; padding-top: 30px; max-width: 1170px;}

.rule-main h2{ width: 100%;  float: left; font-size: 23px; font-weight: 700; color: #1f0c69; text-align: center; margin-bottom: 20px; text-transform: uppercase;}

.rule-main ul{ margin: 50px 0 0; padding: 0; width: 100%; float: left;}


.rule-main ul li{ list-style: none; display: block; width: 100%; float: left; padding-left: 30px; box-sizing: border-box; position: relative; margin-bottom: 10px;}

.rule-main ul li p{ width: 100%; float: left; font-size: 18px; font-weight: 400; color: #323131; text-align: left;}

.rule-main ul li:after{ content: ""; position: absolute; top: 6px; left: 5px; width: 13px; height: 13px; float: left; background: url(../images/bullet.png) no-repeat;;}

.accept-div{ width: 100%; float:left; margin-top: 25px;}

.accept-div a{ font-size: 18px; font-weight: 400; color: #ffffff; padding:10px 25px; background: #b1108f; border-radius: 5px;  float: right;}

.accept-div a:hover{ background: #1f0c69;}

.take-photo h1{ width: 100%; float: left; text-align: center; font-size: 40px; font-weight: 700; color: #454545; margin: 20px 0;}

.take-photo h4{ width: 100%; float: left; text-align: center; font-size: 22px; font-weight: 400; color: #454545; margin-bottom: 20px; line-height: 27px;}

.question-div{ width: 100%; float: left;}

.question-div-left{ width: 35%; float: left; border: 1px solid #1f0c69; padding: 0 ; box-sizing: border-box;}

.question-header{ width: 100%; float: left; background: #1f0c69; padding: 10px 15px; box-sizing: border-box;}

.question-header h3{ font-size: 20px; font-weight: 700; color: #fff; text-align: left;}

.question-div-left-bottom{ width: 100%; float: left; padding: 10px; box-sizing: border-box;}

.category{ width: 100%; float: left; text-align: center;}

.category li{ width: 32%; display: inline-block; list-style: none; vertical-align: top;}

.category li span{ width: 20px; height: 20px; float: left; margin-right: 8px;}

.red{ background: red;}
.red-question{ background:red;}
.red-question a{ color:#fff;}

.green-question{ background:green !important;}
.green-question a{ color:#fff !important;}


.yellow-question{ background:yellow !important;}
.yellow-question a{ color:#fff !important;}


.yellow{ background: yellow !important;}

.green{ background: green !important;}

.category li p{ width: auto; float: left;}

.question-no{ width: 100%; float: left; margin: 30px 0 0; padding: 0; text-align: center; height:335px; overflow-x:auto;}

.question-no li{ font-size: 16px; font-weight: 400; list-style: none; width: auto; padding: 14px 10px; text-align: center; display: inline-block; vertical-align: top; width: 52px; margin: 1px; box-sizing: border-box;}

.question-no li a{ font-size: 16px; font-weight: 400; color: #2b2b2b;}


.question-div-right{ width: 63%; float: right; border: 1px solid #1f0c69; padding: 0 ; box-sizing: border-box;}

.time{ width: auto; float: right; color: white; }

.time p{ color:#e9e9e9; font-size: 18px; font-weight: 400; float: left;}

.time p span{ font-size: 18px; font-weight: 400; color: #e9e9e9;}

.question-div-right-bottom{ width: 100%; float: left; padding: 10px; box-sizing: border-box;}

.question-div-right-bottom h3{ width: 100%; float: left; font-size: 18px; font-weight: 700; color: #2b2b2b; margin: 10px 0;}

.question{ width: 100%; float: left;}



/* The container */
.option {
    display: block;
    position: relative;
    padding-right: 35px;
    padding-left: 15px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.option input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 8px;
    right: 10px;
    height: 30px;
    width: 30px;

    border-radius: 50%;
    border:2px solid #61e83c;
}

/* On mouse-over, add a grey background color */

.option:hover{ background: #fff;}

.option:hover input ~ .checkmark {
    border:2px solid #61e83c;
}

/* When the radio button is checked, add a blue background */
.option input:checked {
    background: #fff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark i {
     font-size: 18px; color: #61e83c; display: none; line-height: 30px;
     text-align: center;
}

/* Show the indicator (dot/circle) when checked */
.option input:checked ~ .checkmark i {
    display: block;
}

/* Style the indicator (dot/circle) */
.option .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}


.ans-option{ width: 100%; float: left;}
.ans-option label{ width: 100%; float: left; font-size:18px; font-weight: 400; color: #2b2b2b; background: #f7f7f7;  box-sizing: border-box; padding-top: 15px; padding-bottom: 15px; border-radius: 0px; border: 1px solid #ebebeb;}
.ans-buttons{ width: 100%; float: left;}
.review{ width: auto; float: left; font-size: 18px; font-weight: 400; color: #fff; background: #ebb72c; padding: 8px 25px;  font-family: 'Open Sans', sans-serif; border-radius: 5px;}

.review:hover{ background: #29166f;}

.save{ width: auto; float: right;  font-size: 18px; font-weight: 400; color: #fff; background: #b1108f; padding: 8px 25px;  font-family: 'Open Sans', sans-serif;border-radius: 5px;}
.save:hover{ background: #29166f;}

.category li p{ font-size: 14px;}

.profile{ width: 100%; float: left; position: relative;}

.profile-div{ width: 100%; float: left;}

.profile img{ width: 100%; float: left;}

.profile-inner{ width: 180px; height: 180px; border-radius: 50%; border: 3px solid #b1108f; float: left; position: absolute; bottom:25px; left: 40px; background: #fff;}

.profile-inner img{ width: 100%; float: left; border-radius: 50%;height: 180px;}


.profile-left{ width: 32%; float: left; border: 1px solid #1f0c69; padding: 0 ; box-sizing: border-box;}



.profile-right{ width: 65%; float: right; border: 1px solid #1f0c69; padding: 0 ; box-sizing: border-box;}


.profile-header{ width: 100%; float: left; background: #1f0c69; padding: 10px 15px; box-sizing: border-box;}

.profile-header h3{ font-size: 20px; font-weight: 700; color: #fff; text-align: center;}

.profile-header h2{ font-size: 24px; font-weight: 700; color: #fff; text-align: left; text-transform: uppercase;}


.profile-header2{ width: 100%; float: left; background: #b1108f; padding: 10px 15px; box-sizing: border-box;}

.profile-header2 h3{ font-size: 20px; font-weight: 700; color: #fff; text-align: center;}

.profile-left-bottom{ width: 100%; float: left; padding: 20px; box-sizing: border-box;}

.profile-left-bottom ul{ margin: 0; padding: 0;}

.profile-left-bottom ul li{ list-style: none; display: block; width: 100%; float: left; margin-bottom: 10px;}

.profile-left-bottom ul li span{ width: 100%; float: left; font-size: 18px; font-weight: 700; color: #2b2b2b;}

.profile-left-bottom ul li span p{ font-size: 18px; font-weight: 400; color: #2b2b2b; margin-left: 5px; display: inline-block;}


.profile-right-bottom{ width: 100%; float: left; padding: 20px; box-sizing: border-box;}

.profile-right-bottom table{ width: 100%; float: left; border-collapse: collapse;}

.profile-right-bottom table td{ padding: 5px; width: 50%;}

.profile-button{ width: 100%; float: left; padding: 10px 0;}

.profile-button p{ width: auto; float: left; font-size: 18px; font-weight: 400; color: #2b2b2b; margin-top: 5px;}


.profile-button a{ width: auto; float: right; padding: 8px 25px; font-size: 18px; font-weight: 400; color: #fff; background: #b1108f; border-radius: 5px;}

.profile-button a:hover{ background: #29166f;}


@media (max-width: 1170px) {
.question-no li{ width: 40px; padding: 9px 10px;}
.category li{ width: 49%; float: left; margin-bottom: 15px;}

}
@media (max-width: 980px) {
    .login-main{ margin-top: 50px;}

}


@media (max-width: 680px) {
    .rule-main ul{ margin-top: 20px;}
}