html {padding:0; margin:0;}
body {
font-size:16px;font-weight:normal;
background: rgb(13,14,25);
background: -moz-linear-gradient(left, rgba(13,14,25,1) 0%, rgba(20,30,53,1) 50%, rgba(13,14,25,1) 100%);
background: -webkit-linear-gradient(left, rgba(13,14,25,1) 0%,rgba(20,30,53,1) 50%,rgba(13,14,25,1) 100%);
background: linear-gradient(to right, rgba(13,14,25,1) 0%,rgba(20,30,53,1) 50%,rgba(13,14,25,1) 100%);
 margin:0 auto;line-height:22px; 
 }
 
a{color:#333; text-decoration:none; }
body, h1, h2, h3, h4, h5, h6, p, a, ul, li, form {margin: 0;padding: 0;font-family: 'Roboto', sans-serif;}
ul, li, form { list-style-type:none;}
a img {border: medium none;}
a.active,a:hover{color:#333; text-decoration:none;}
.clear{clear:both;}
.fl{float:left;}
.fr{float:right;}
.mar-r10 { margin-right:10px;}
.mar-l10 { margin-left:10px;}
.mar-b10 { margin-bottom:10px;}
.mar-t10 { margin-top:10px;}
.mar-r20 { margin-right:20px;}
.mar-l20 { margin-left:20px;}
.mar-b20 { margin-bottom:20px;}
.mar-t20 { margin-top:20px;}

.pad-r10 { margin-right:10px;}
.pad-l10 { margin-left:10px;}
.pad-b10 { margin-bottom:10px;}
.pad-t10 { margin-top:10px;}
.pad-r20 { margin-right:20px;}
.pad-l20 { margin-left:20px;}
.pad-b20 { margin-bottom:20px;}
.pad-t20 { margin-top:20px;}

.c_mian_wrap { width:100%; box-sizing:border-box; height:100vh;display: inline-block;vertical-align: top;}
.c_wrap { width:100%; padding:0 15px; box-sizing:border-box;height:100vh;display: inline-block;vertical-align: top;}
.c_home_logo { text-align:center;margin: 10px 0 10px 0;}
.home_bg { margin: 0;}
.c_home_logo img { width:auto; height:auto;}
.c_welcome_info { text-align:center; color:#fff;padding: 25px 0; font-weight:500;}
.c_welcome_info span {display: block;font-size: 18px;font-weight: 500;}
.c_pw_info { width:100%; box-sizing:border-box; text-align:center; position:relative;}
.c_pw_info img { width:100%; box-sizing:border-box;} 
.c_pw_info span { position: absolute;bottom: 8%; display: inline-block;margin: 0 auto;left: 0;right: 0;text-transform: uppercase;font-weight: 700;   font-size: 20px;}
.c_footer_info{ color:#6c6c6f;font-size: 11px;text-transform: uppercase;line-height: 16px; text-align:center;padding:15px 15px 8px;}
	
/* ==== SUBSCRIPTION CSS START ==== */
	
.c_subscription { color:#fff; padding:30px 20px; box-sizing:border-box;text-align: center;}
.c_btn_wrap { text-align:center;clear: both;padding: 0 0 10px 0;position: relative;top: 10px; }
.c_btn_wrap a { border-radius:100px; padding:2px; background: rgb(186,138,23);
background: -moz-linear-gradient(left, rgba(186,138,23,1) 0%, rgba(252,216,38,1) 49%, rgba(218,164,28,1) 100%);
background: -webkit-linear-gradient(left, rgba(186,138,23,1) 0%,rgba(252,216,38,1) 49%,rgba(218,164,28,1) 100%);
background: linear-gradient(to right, rgba(186,138,23,1) 0%,rgba(252,216,38,1) 49%,rgba(218,164,28,1) 100%); display:inline-block;min-width: 250px;}
.c_btn_wrap a span {background: #0f111f;color: #f3ca22;border-radius: 100px;padding: 8px 35px;width: 100%;display: inline-block;box-sizing: border-box;text-transform: uppercase;font-family: 'Montserrat';font-weight: 600;font-size: 19px;}
.c_insde_logo  { text-align: center;margin: 10px auto 10px;width: 100px;}
.c_insde_logo img { width:100%; }

/* ==== GENERAL KNOWLAGE CSS START ==== */

.c_gkn_wrap { width:100%;}
.c_gkn_top {background: rgb(14,16,30);
background: -moz-linear-gradient(left, rgba(14,16,30,1) 0%, rgba(23,43,88,1) 49%, rgba(14,16,30,1) 100%);
background: -webkit-linear-gradient(left, rgba(14,16,30,1) 0%,rgba(23,43,88,1) 49%,rgba(14,16,30,1) 100%);
background: linear-gradient(to right, rgba(14,16,30,1) 0%,rgba(23,43,88,1) 49%,rgba(14,16,30,1) 100%);
width: 100%; position: relative;padding: 8px 5px 0;box-sizing: border-box; display:table;}
.c_gkn_tlhs {width: 33%; display:table-cell; vertical-align:middle;position: relative;left: -10px;text-align: center;}
.c_gkn_tlhs img { width:100%;}
.c_gkn_tlhs span {color: #f3ca22;font-size: 10px;text-align: center;line-height: 13px;display: inline-block;text-transform: uppercase;font-weight: 600;position: relative;top: -3px;width: 100%;}
.c_gkn_tlhs .c_gks_question {font-size: 12px;color: #fff;font-weight: 500;position: absolute;bottom: -26px;text-align: center;text-transform: uppercase;width: 100%;}
.c_gkn_tmid {display:table-cell; vertical-align:middle; color:#9195a0; font-size:12px;text-align: center;position: relative;width: 33%;padding: 0 0 0 5%;}
.c_gkn_tmid .gkn_time { background: #172c59;border-radius: 100%;width: 60px;height: 60px;display: inline-block;margin: 0 auto;position: absolute;   left: 5%;right: 0;bottom: -40px;}
.c_gkn_trhs {display:table-cell; vertical-align:middle; text-align:right;width: 33%;right: -10px;position: relative;}
.c_gkn_trhs span {color:#9195a0; font-size:12px;}
.c_gkn_trhs p {color: #f3ca22; font-size:14px; font-weight:600;}
.c_gkn_mid { position:relative;padding: 55px 0 0 0;}
.c_gkn_mid span { color: #fff;display: block;font-size: 14px;padding: 10px 0;text-align: center;}
.c_gkn_mid p { color:#fff; padding:0 20px 10px; text-align:center;font-weight: 500;}
.c_gkn_mid ul { margin:0; padding:0; text-align:center;}
.c_gkn_mid ul li { background:#e7e7e7; display:inline-block; margin:10px auto 0; padding:10px 0; min-width: 250px; border-radius:20px;}
.c_gkn_mid ul li a { display:inline-block;}

.c_gkn_mid ul.deactivate li { background:#101526; border:1px solid #343a49; }
.c_gkn_mid ul.deactivate li a { color:#fff;}
.c_gkn_mid ul li.true_asw { background: #21ae0e url(true.svg) 7px 8px no-repeat;background-size: 25px;border:1px solid #21ae0e; }
.c_gkn_mid ul li.true_asw a {color: #fff;}
.c_gkn_mid ul li.false_asw { background: #ff2e2e url(close.svg) 7px 8px no-repeat;color: #fff;background-size: 25px;border:1px solid #ff2e2e;  }
.c_gkn_mid ul li.false_asw a {color: #fff;}
.c_gkn_mid ul li:hover {background-color: green;}
.circular-chart {display: block;margin: 6px;max-width: 100%;max-height: 250px;}
.circle { stroke: #ff4d4f;fill: none;stroke-width: 3.5;stroke-linecap: round;animation: progress 16s ease-out forwards;}
.c_gkn_tmid .gkn_time span {position: absolute;top: 18px;color: #fff;left: 0;right: 0;font-size: 18px;}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}


/* ==== SELECT LANGUAGE AND MOBILE CSS START ==== */

.c_select_style {border: 1px solid #ccc;width: 250px;border-radius: 7px;overflow: hidden;margin:10px auto 8%;padding: 5px 0; background-size:20px; position:relative; background:#fff;}
.c_select_style:after { content:''; position:absolute; width:20px; height:20px;background: #fff url("arrow-point-to-right.svg") no-repeat 98% 50%;    top: 8px;right: 8px;background-size: 20px;transform: rotate(180deg); }
.c_select_style select {padding: 3px 8px;width: 100%;border: none;box-shadow: none;background: transparent;background-image: none;-webkit-appearance: none;font-size:17px; font-weight:600;}
.c_select_style select:focus,
.c_select_style input:focus {outline: none;}
.c_info_dwrap { text-align:center}
.c_info_dwrap input {padding:8px;border: none;box-shadow: none;box-sizing: border-box;-webkit-appearance: none;font-weight:600;border-radius: 7px; min-width:250px; text-align:center; font-size:18px; outline:none;}


/* ==== OTP CSS START ==== */


.c_otp_wrap { width:100%; box-sizing:border-box;padding: 10px 0;}
.c_otp_wrap ul { margin:0; padding:0;    text-align: center;}
.c_otp_wrap ul li { display:inline-block; width:13%;margin:0 3px;}
.c_otp_wrap ul li input { display:inline-block;  background:#fff;border-radius:6px; text-align:center; font-weight:bold; min-height: 35px; width: 100%; font-size:20px;}

.c_otp_wrap .c_opt_digit { font-size:13px; color:#fff; display:block; text-align:center;padding:5% 0 0;}
.c_otp_wrap p { color:#fff; text-align:center; padding:5% 10px;}
.c_resend_otp_wrap { text-align:center;}
.c_resend_otp_wrap a {color: #f3ca22;font-family: 'Montserrat';font-weight: 600;}

.english{display:block;}
.arabic{display:none;}


.close {
    display: block;
    margin: 10px auto;
    max-width: 220px;
    width: 90%;
    font-family: sans-serif;
    font-size: calc(18px + (24 - 18) * ((100vw - 300px) / (1600 - 300))) !important;
    appearance: none;
    box-shadow: none;
    color: #FFF;
    padding: 10px 5px;
    font-weight: bold;
    border-radius: 15px;
    cursor: pointer;
    border: #005952 solid 1px !important;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #99ff00;
    background: -moz-linear-gradient(top, #99ff00 0%, #417b00 100%);
    background: -webkit-linear-gradient(top, #99ff00 0%,#417b00 100%);
    background: linear-gradient(to bottom, #99ff00 0%,#417b00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ff00', endColorstr='#417b00',GradientType=0 );
    text-shadow: 1px 1px 1px #000;
}