*{
    box-sizing                  :   border-box;
}

html 
{ 
    margin                      :   0;
    padding                     :   0;
}

body
{
	margin                      :   0;
	padding                     :   0;
	text-align                  :   center;
    /* font-family                 :   'Roboto'; */
    font-size                   :   14px;
}

h2{
    margin-top                  :   .5rem!important;
}

input:focus, textarea:focus, select:focus, button:focus{
    outline: none;
}

.main_container
{
	max-width                   :   748px !important;
    min-height                  :   100vh;
    position                    :   relative;
    padding                     :   0;
	margin-right                :   auto;
    margin-left                 :   auto;
    display                     :   flex;
    flex-direction              :   column;
    padding-right               :   0!important;
    padding-left                :   0!important;
    background                  :   #36301f;
}

.menubar
{
    border                      :   none;
    background                  :   #fff;
}

.menubar a
{
    color                       :   #fff;
    text-decoration             :   none;
    display                     :   block;
    padding                     :   10px 0 5px 0;
}

.menubar ul li {
    transition                  :   all .2s;
    text-align                  :   center;
}

.menubar ul li a {
    position                    :   relative;
    z-index                     :   1;
}


.menubar ul li a:hover {
    color                       :   #fff;
    text-decoration             :   none;
}

  
.menubar ul li :after {
  display                       :   block;
  position                      :   absolute;
  top                           :   0;
  left                          :   0;
  bottom                        :   0;
  right                         :   0;
  margin                        :   auto;
  width                         :   100%;
  height                        :   1px;
  content                       :   '.';
  color                         :   transparent;
  background                    :   var(--theme-btn-purple-hover);
  visibility                    :   none;
  opacity                       :   0;
  z-index                       :   -1;
  transition                    :   all .2s;

}
.menubar ul li :hover:after {
  opacity                       :   1;
  visibility                    :   visible;
  height                        :   100%;
}

.heading
{
    position                    :   relative;
	width                       :   100%;
	min-height                  :   50px;
}           

.heading span           
{           
	display                     :   inline-block;
}           

.collapse-icon          
{           
    position                    :   absolute;
    cursor                      :   pointer;
    right                       :   14px;
	top                         :   9px;
    border-radius               :   5px;
    padding                     :   1px 4px;   
}           

.collapse-icon div          
{           
    width                       :   24px;
    height                      :   3px;
    background-color            :   #fff;
    margin                      :   5px 0;
    transition                  :   0.4s;
    border-radius               :   10px;
}  

#menu           
{           
    display                     :   none;
    padding-inline-start        :   0;
    list-style-type             :   none;
}           

.logo           
{           
	position                    :   absolute;
    font-size                   :   18px;
    left                        :   0px;
    top                         :   -5px;
    background                  :   #36301f;
    width                       :   30%;
    border-radius               :   0 0 20px 0;
}           

.logo img           
{           
	width                       :   120px;
}           

.language-dropdown          
{           
	position                    :   absolute;
	right                       :   0px;
    top                         :   9px;
    width                       :   20%;
}
.language-dropdown img{
    display: none;
}
.language-dropdown {
	display                     :   inline-block;
} 
.language-dropdown select {
	position                    :   absolute; 
	left                        :   0px; 
	top                         :   0px;  
    cursor                      :   pointer;
    border                      :   2px solid #36301f;
    background                  :   none;
    font-size                   :   20px;
    border-radius               :   10px;
    width                       :   100%;

}
.language-dropdown img{
	width                       :   27px;
	height                      :   27px;
}

footer{
    margin-top                  :   10px;
    padding-top                 :   15px;
    color                       :   #000;
    border-radius               :   10px 10px 0 0;
    text-align                  :   center;
    font-size                   :   15px;
    border-top                  :   2px solid #fff;
}

footer p{
    margin-block-start          :   0;
}
.footer-img ul{
    padding-inline-start        :   0;
    margin-block-start          :   0;
    margin-block-end            :   0;
}

.footer-img li{
    list-style-type             :   none;
    display                     :   inline-block;
}

.footer-img img{
    width                       :   70%;
}

.footer-link a{
    color                       :   #000;
    text-decoration             :   none;
}

.footer-link ul{
    padding-inline-start        :   0;
    margin-block-start          :   0;
    margin-block-end            :   0;
    padding                     :   4px 0;
}

.footer-link li{
    list-style-type             :   none;
    display                     :   inline-block;
    margin                      :   0 3px;
}

.middle_conatainer_yellow{
    background                  :   #fbd776;
    min-height                  :   92vh;
}

.middle_conatainer{
    background                  :   #fff;
    width                       :   97%;
    border-radius               :   0 20px 20px 20px;
    padding-bottom              :   10px;
}

.top_div{
    background                  :   #fff;
    border-radius               :   20px 0 0 0;
    z-index                     :   1;
    padding                     :   10px 0px;
}

.top_div h1{
    margin                      :   0 20px;
}

.top_div2{
    background                  :   #fff;
    border-radius               :   20px 0 0 0;
    z-index                     :   1;
    padding                     :   10px 0px;
    /* height                      :   30px; */
}

.instruction_div{
    text-align                  :   left;
}

.instruction_div[dir=rtl]{
    text-align: right !important;
}

.instruction_div[dir=rtl] h1{
    margin-right: 15px;
}

.instruction_div h1{
    margin-top                  :   0;
    margin-left                 :   15px;
}

.instruction_div ul{
    list-style                  :   none;
    font-size                   :   18px;
}

.instruction_div ol{
    font-size                   :   18px;
}
#expandedtext figcaption {
    display: none;
}
#expandedtext div img {
    border-radius: 10px;
}
.instruction_div ul li{
    margin-left                 :   -1em;
}

.region_div{
    width                       :   60%;
    margin                      :   15px auto;
    font-size                   :   20px;
    background                  :   #fff;
    padding                     :   10px 10px 20px 10px;
    border-radius               :   20px 0 20px 20px;
}

.region_dropdown{
    background                  :   #01a864;
    border                      :   none;
    color                       :   #fff;
    padding                     :   10px;
    width                       :   100%;
    border-radius               :   8px;
}

.name_div input{
    border                      :   none;
    width                       :   100%;
    padding                     :   15px;
    text-align                  :   center;
    background                  :   #f1f1f1;
    border-radius               :   20px 0 20px 20px;
}

.continue_btn{
    border                      :   none;
    background                  :   #36301f;
    margin-top                  :   10px;
    padding                     :   12px;
    width                       :   60%;
    border-radius               :   20px;
    font-size                   :   20px;
    box-shadow                  :   0px 8px #cccccc;
    color                       :   #fff;
}

.continue_btn:active {
    background-color            :   #36301f!important;
    box-shadow                  :   0 5px #666;
    transform                   :   translateY(4px);
    color                       :   #fff;
}

.continue_btn:focus {
    background-color            :   #36301f!important;
    box-shadow                  :   0 5px #666;
    transform                   :   translateY(4px);
    color                       :   #fff;
}

.continue_btn:hover {
    background-color            :   #36301f;
    box-shadow                  :   0 5px #666;
    color                       :   #fff;
}

input:focus, textarea:focus, select:focus, button:focus{
    outline: none!important;
}

#nonAttemptUserStatsDiv{
    padding:10px;
}
.category_div1{
    padding                     :   0 20px;
    position                    :   relative;
}

.category_div1 h2{
    margin-top                  :   0!important; 
}

.category_div1 img{
    width                       :   100%;
    border-radius               :   20px;
    border                      :   2px solid #36301f;
}

.category_div1 button{
    position                    :   absolute;
    bottom                      :   17px;
    left                        :   37%;
    background                  :   #ff0415;
    border                      :   none;
    color                       :   #fff;
    padding                     :   10px;
    font-size                   :   18px;
    border-radius               :   30px;
    width                       :   25%;
}

.category_div1 button:active{
    box-shadow                  :   0 5px #ff0415;
    transform                   :   translateY(4px);
}

.category_div2{
    padding                     :   0 20px;
    position                    :   relative;
    margin                      :   20px 0;
}

.category_div2 h2{
    margin-top                  :   0!important; 
}

.category_div2 img{
    width                       :   100%;
    border-radius               :   20px;
    border                      :   2px solid #36301f;
}

.category_div2 button{
    position                    :   absolute;
    bottom                      :   17px;
    left                        :   37%;
    background                  :   #ff0415;
    border                      :   none;
    color                       :   #fff;
    padding                     :   10px;
    font-size                   :   18px;
    border-radius               :   30px;
    width                       :   25%;
}

.category_div2 button:active{
    box-shadow                  :   0 5px #ff0415;
    transform                   :   translateY(4px);
}

.bottom_ad {
    margin: 0 auto;
    margin-bottom: 40px;
}

.ad_center{
    margin:auto;
}

.hlist a{
    color: black;
    font-size: 20px;
    text-decoration: none;
    pointer-events: none;
}
.qusetion_div h2{
    margin-top                  :   0!important; 
}

.progress_div{
    background                  :   #d4d0d4;
    height                      :   10px;
    margin                      :   0 auto 20px auto; 
}

.h-custom-tab-active{
    background                  :   #ff8109;
    width                       :   10%;
    height                      :   10px;
}
#questionNoList li {
    list-style: none;
    display: inline-block;
    width: 10%;
}
#questionNoList {
    width: 95%;
}

#questionNoList li:first-child {
    border-radius               :   20px 0 0 20px;
  }
  #questionNoList li:last-child {
    border-radius               :   0 20px 20px 0;
  }

  #questionNoList[dir=rtl] li:first-child {
    border-radius               :   0 20px 20px 0;
  }
  #questionNoList[dir=rtl] li:last-child {
    border-radius               :   20px 0 0 20px;
  }
.imglist_main{
    width                       :   90%;
    background                  :   #fff;
    margin                      :   20px auto;
    padding                     :   10px;
    border-radius               :   20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.qusetion_div div{
    width                       :   0px;
    height                      :   0px;
    margin                      :   auto;   
    margin-bottom               :   20px; 
}

#expandedtext{
    padding-top                 :   44%;
    font-size:  20px;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
  }

  .view_option_text .img_ser img{
    display: inline-flex;
    width: 75px;
    border-radius: 10px;
  }

  .view_option_text[dir=rtl] .img_ser img{
    margin-left: 0px;
  }
  .view_option_text[dir=rtl] figcaption{
    margin-right: 30px;
    margin-left: 0px;
  }
  .view_option_text figcaption{
    display: inline-flex;
    width: 40%;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    word-break: break-word;
    margin-left: 30px;
  }
#expandedtext .img_ser{
    margin-top: -110px;
}
.qusetion_div img{
    width                       :   250px;
    height                      :   250px;
    border-radius               :   10px;
    /* border                      :   2px solid; */
    box-shadow                  :   0px 8px #cccccc;
}

.img_ser img{
    width                       :   100%;
    border-radius               :   10px 10px 0 0;
}

.img_ser img:active {
    background-color            :   #fff;
    box-shadow                  :   0 5px #cccccc;
    transform                   :   translateY(4px);
}

.optionHover{
    border                      :   5px solid #17b5e5!important;
}
audio{
    display: none;
}
.imglist{
    display                     :   inline-flex;
    width                       :   22%;
    margin: 5px;
    box-shadow                  :   0px 5px #cccccc;
    border-radius: 15px;
    border                      :   5px solid #fff;
    word-break: break-word;
}
figcaption {
    /* margin: -1px; */
    color: black;
	font-size: 18px;
	padding: 5px;
}
.imglist div a:hover {
    text-decoration: none;
}
.question_skip_btn{
    border                      :   none;
    background                  :   #36301f;
    margin-bottom               :   20px;
    padding                     :   12px;
    width                       :   40%;
    border-radius               :   20px;
    font-size                   :   20px;
    box-shadow                  :   0px 8px #cccccc;
    color                       :   #fff;
}

.question_skip_btn:active {
    background-color            :   #36301f;
    box-shadow                  :   0 5px #666;
    transform                   :   translateY(4px);
}

.selected_image{
    width                       :   250px;
    height                      :   250px;
    margin                      :   auto;
    border-radius               :   10px;
    border                      :   2px solid;
    box-shadow                  :   0px 8px #cccccc;
    font-size                   :   20px;
}

.chosse_img{
    margin-left                 :   10px;
    margin-right                :   10px;
    position                    :   relative;
    top                         :   -125px;
    height                      :   0!important;
    font-size: 18px;
}

.chosse_text{
    margin-left                 :   10px;
    margin-right                :   10px;
    position                    :   relative;
    top                         :   -155px;
    height                      :   0!important;
}

.hlist{
    width                       :   90%;
    background                  :   #fff;
    margin                      :   20px auto;
    border-radius               :   10px;
    border                      :   5px solid #fff;
    box-shadow                  :   0px 8px #cccccc;
}

.hlist div{
    padding                     :   7px;
}
.hlist:active {
    background-color            :   #fff;
    box-shadow                  :   0 5px #cccccc;
    transform                   :   translateY(4px);
}

.question_text_option_div{
    font-size                   :   20px;
}


.link_div{
    background                  :   #fbd776;
    color                       :   #181216;
    padding-top                 :   15px;
    margin                      :   0px 20px 20px 20px;
    border-radius               :   20px;
    box-shadow                  :   0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
}

.link_div h2{
    margin-top                  :   0!important;
}

.link_div h4{
    margin                      :   5px 10px!important;
}

.copy_link{
    background                  :   #fff;
    border-radius               :   0 20px 20px 20px;
    padding                     :   15px;
}

.copy_link_area{
    background                  :   #e2e2e2;
    border-radius               :   0 20px 20px 20px;
    padding                     :   15px;
}

.link-copied{
    color                       :   #ea0404;
    margin-top                  :   10px;
}

.copy_text{
    background                  :   #fff;
    color                       :   #181216;
    border-radius               :   0 15px 15px 10px;
    width                       :   85%;
    margin                      :   auto;
}

.link{
    display                     :   inline-flex;
    width                       :   72%;
    margin-left                 :   5px;  
}

.copy_btn{
    background                  :   #36301f;
    color                       :   #fff;
    border                      :   none;
    padding                     :   8px;
    width                       :   25%;
    border-radius               :   0 15px 15px 15px;   
}

.share-btn{
    margin                      :   20px;
}

.share-btn img{
    width                       :   10%;
    vertical-align              :   middle;
}

.whatsapp-btn {
    background                  :   #20c47a;
    padding                     :   10px;
    border                      :   2px solid #fff;
    border-radius               :   10px;
    color                       :   #fff!important;
    font-size                   :   16px;
    width                       :   100%;
    margin-bottom               :   5px;
}

.more-plus-share{
    margin-top: 8px;
} 
.more-plus-share .a2a_dd{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    color: #000;
    font-size: 14px;
    background: #F1DB2F;
    border-radius: 10px;
    padding: 12px 0!important;
    border: 2px solid #fff;
    font-size: 16px;
}
.more-plus-share .a2a_dd:hover{
    background-color: #14a1cc;
    border-color: #00c3ff;
}
.more-plus-share .a2a_svg{
    width: 25px;
    height: 25px;
    margin-right: 5px;
}
.more-plus-sharemobile{
    margin-top: 5px;
    display: none;
}
.more-plus-share-mobile{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    color: #000;
    font-size: 14px;
    background: #F1DB2F;
    border-radius: 10px;
    padding: 12px 0!important;
    border: 2px solid #fff;
    font-size: 16px;
}
.more-plus-share-mobile:hover{
    background-color: #14a1cc;
    border-color: #00c3ff;
}
.more-plus-share i{
    background: rgb(1, 102, 255);
    color: #fff;
    font-size: 19px;
    padding: 4px;
    border-radius: 4px;
    margin-right: 5px;
}
.whatsapp-btn img{
    width                       :   5%;
    vertical-align              :   middle;
}
.tiktok-btn img{
    vertical-align              :   middle;
}

.whatsapp-btn a:hover{
    color                       :   #fff!important;
    text-decoration             :   none;
}

.facebook-btn {
    background                  :   #3b5998;
    padding                     :   8px;
    border                      :   2px solid #fff;
    border-radius               :   10px;
    color                       :   #fff!important;
    font-size                   :   16px;
    width                       :   49%;
    margin                      :   5px 0;
    display                     :   inline-block;
}

.messenger-btn {
    background                  :   #0166ff;
    padding                     :   8px;
    border                      :   2px solid #fff;
    border-radius               :   10px;
    color                       :   #fff!important;
    font-size                   :   16px;
    width                       :   49%;
    margin                      :   5px 0;
    display                     :   inline-block;
}

.share-btn a{
    text-decoration             :   none !important;
}
.whatsapp-btn a{
    color                       :   #fff!important;
}

.facebook-btn a{
    color                       :   #fff!important;
}

.messenger-btn a{
    color                       :   #fff!important;
}

.snapchat-btn {
    border                      :   none;
    background                  :   #fff70f;
    padding                     :   8px;
    border                      :   2px solid #fff;
    border-radius               :   10px;
    color                       :   #000!important;
    font-size                   :   16px;
    width                       :   49%;
    margin                      :   5px 0;
    display                     :   inline-block;
    cursor                      :   pointer;
}

.twitter-btn {
    background                  :   #000000;
    padding                     :   10px;
    border                      :   2px solid #fff;
    border-radius               :   10px;
    color                       :   #fff!important;
    font-size                   :   16px;
    width                       :   49%;
    margin                      :   5px 0;
    display                     :   inline-block;
}

.instagram-btn {
    background                  :   linear-gradient(to right, #db7a48 , #b33376);
    padding                     :   10px;
    border                      :   2px solid #fff;
    border-radius               :   10px;
    color                       :   #fff!important;
    font-size                   :   16px;
    width                       :   49%;
    display                     :   inline-block;
    cursor                      :   pointer;
}

.Line-btn {
    background                  :   #00b900;
    padding                     :   8px;
    border                      :   2px solid #fff;
    border-radius               :   10px;
    color                       :   #fff!important;
    font-size                   :   16px;
    width                       :   49%;
    margin                      :   5px 0;
    display                     :   inline-block;
}

.kakao-btn {
    background                  :   #fae301;
    padding                     :   8px;
    border                      :   2px solid #fff;
    border-radius               :   10px;
    color                       :   #000 !important;
    font-size                   :   16px;
    width                       :   49%;
    margin                      :   5px 0;
    display                     :   inline-block;
}

.vk-btn {
    background                  :   linear-gradient(to right, #14a1cc , #14a1cc);
    padding                     :   8px;
    border                      :   2px solid #fff;
    border-radius               :   10px;
    color                       :   #fff!important;
    font-size                   :   16px;
    width                       :   49%;
    margin                      :   5px 0;
    display                     :   inline-block;
}
.tg-btn {
    background: #2BA0D2;
    padding                     :   8px;
    border                      :   2px solid #fff;
    border-radius               :   10px;
    color                       :   #fff!important;
    font-size                   :   16px;
    width                       :   49%;
    margin                      :   5px 0;
    display                     :   inline-block;
}
.tiktok-btn {
    background                  :   #fae301;
    padding                     :   8px;
    border                      :   2px solid #fff;
    border-radius               :   10px;
    color                       :   #000000!important;
    font-size                   :   16px;
    width                       :   49%;
    margin                      :   5px 0;
}
.scoreboard_btn{
    border                      :   none;
    background                  :   #fff;

    margin-top                  :   10px;
    margin-bottom               :   15px;
    padding                     :   12px;
    width                       :   60%;
    border-radius               :   20px;
    font-size                   :   20px;
    color                       :   #181216;
    /* box-shadow                  :   0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15); */
    box-shadow                  :   0px 8px #cccccc;
}
a.scoreboard_btn{
    display: inline-block;
}
a.scoreboard_btn:hover{
    color: #181216;
    text-decoration: none;
}
.create_quiz{
    box-shadow: 0px 8px #36301f;
border: 1px solid;
font-weight: bold;
}
.scoreboard_btn:active {
    background-color            :   #fff;
    box-shadow                  :   0 5px #666;
    transform                   :   translateY(4px);
}

.scoreboard_container{
    background                  :   #36301f;
    color                       :   #fff !important;
    font-size                   :   20px;
    border-radius               :   20px;
    margin                      :   0 15px 15px 15px;
    padding-top                 :   10px;
    box-shadow                  :   0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
}
.scoreboard_div{
    border: none!important;
}
.other-user-stats{
    background                  :   #fff;
    border-radius               :   0 15px 20px 20px;
    /* padding                     :   20px 10px; */
    color                       :   #181216;
    margin-top                  :   10px;
}
.other-user-stats li {
	list-style: none;
}

.scoreboard_div_white{
    background                  :   #fff;
    border-radius               :   0 15px 20px 20px;
    margin-top                  :   10px;
}

#userStatsTable{
    margin-bottom               :   0px!important;
}

#userStatsTable td{
    border-top                  :   none!important;
}

#userStatsTable > thead > tr > th{
    color                       :   #ff8109;
    text-align: center;
}

#userStatsTable > tbody > tr > td{
    color                       :   #181216;
}

#userStatsTable > tbody > tr > td > a{
    text-decoration: none;
    color                       :   #181216!important;

}
.highlight{
    background                  :   #fbd776!important;
}

.view_div{
    background                  :   #36301f;
    color                       :   #fff;
    padding-top                 :   15px;
    width                       :   400px;
    margin                      :   0 auto 20px auto;
    border-radius               :   20px;
    box-shadow                  :   0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
}


.view_div_option{
    background                  :   #fff;
    padding                     :   10px 10px 20px 10px;
    border-radius               :   0 0 20px 20px;
}

.view_div_option_middle{
    display                     :   inline-flex;
    border                      :   5px solid #919191;
    padding                     :   10px;
    border-radius               :   15px;
    box-shadow                  :   0px 5px #cccccc;
    width                       :   100%;
}

.view_div_text_option_middle{
    display                     :   inline-flex;
    border                      :   5px solid #919191;
    padding                     :   10px;
    border-radius               :   15px;
    box-shadow                  :   0px 5px #cccccc;
    width                       :   100%;
}

.view_div_option_image {
    width                       :   20%;
}

.view_div_option_image img{
    width                       :   100%;
    border-radius               :   10px;
}

.view_div_option_text{
    color                       :   #181216;
    font-size                   :   20px;
    margin-top                  :   17px;
    width                       :   79%;
}
.center_align{
    justify-content: center;
}

.instruction_div h1{
    font-size: 28px;
}
.view_div_wrong_img img{
    margin-top                  :   5px;
}

.view_div_wrong_img{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.view_option_text{
    color                       :   #181216;
    font-size                   :   20px;
    width                       :   100%;
    margin-top                  :   10px;
    display: flex;
}

.userfriend_correct_selected_image img{
    border                      :   5px solid #0dac25;
}

.userfriend_wrong_selected{
    border                      :   5px solid #eb434d;
}

.result_div h2{
    margin-top                  :   0!important;
}

.result_meter_outer{
    width                       :   90%;
    height                      :   40px;
    background                  :   #fbd4ab;
    border-radius               :   20px;
    margin                      :   auto;
    border                      :   1px solid;
    padding                     :   6px;
}

.result_meter_inner{
    width: 3%;
    background                  :   #36301f;
    height                      :   25px;
    border-radius               :   20px;
}

.triangle-up {
	width                       :   0;
	height                      :   0;
	border-left                 :   5px solid transparent;
	border-right                :   5px solid transparent;
    border-bottom               :   10px solid #36301f;
    margin                      :   auto;
}

.down_area{
    position                    :   relative;
    margin-bottom               :   60px;
}

.triangle-down {
	width                       :   0;
	height                      :   0;
	border-left                 :   5px solid transparent;
	border-right                :   5px solid transparent;
    border-top                  :   10px solid #36301f;
    margin-left                 :   50px;
    position                    :   absolute;
}

.triangle-down_txet{
    position                    :   absolute;
    margin-left                 :   -18px;
    width: max-content;
}

.triangle-down2{
    width                       :   0;
	height                      :   0;
	border-left                 :   5px solid transparent;
	border-right                :   5px solid transparent;
    border-top                  :   10px solid #36301f;
    position                    :   absolute;
    right                       :   50px;
}

.triangle-down_txet2{
    position                    :   absolute;
    right                       :   -20px;
    width: max-content;
}

.result_div h3{
    margin-left                 :   20px;
    margin-right                :   20px;
}



.close-btn{
    background                  :   #d90000!important;
    color                       :   #fff!important;
}

#language_popup > .modal-dialog > .modal-content > .modal-body{
    background                  :   #fbd874;
    padding                     :   0 15px!important;
}

.lang-box{
    border                      :   2px solid #fff;
    padding                     :   10px;
    font-size                   :   18px;
    cursor                      :   default;
}

.lang-box:hover{
    background                  :   #ffcd43;
}

.lang-box-new a{
    border                      :   2px solid #fff;
    padding                     :   10px;
    font-size                   :   18px;
    cursor                      :   default;
    display: block;
}

.lang-box-new a:hover{
    background                  :   #ffcd43;
}

.top_ad{
    margin-bottom: 40px;
    margin-top: 40px;
}

.top_div2 img{
    margin-bottom               :   20px;
}

.card {
    transition                  :   transform 2s;
    transform-style             :   preserve-3d;
    cursor                      :   pointer;
}

.wrong_img{
    position                    :   absolute;
    top                         :   8px;
    left                        :   38%;
}

.wrong_img img{
    width                       :   40px;
    height                      :   40px;
    box-shadow                  :   none;
    border-radius               :   none;
    border                      :   none;
    animation                   :   shake 1s;
    animation-iteration-count   :   2s;
}   

  
  @keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.right_img{
    position                    :   absolute;
    top                         :   8px;
    left                        :   38%;
}

.right_img img{
    width                       :   40px;
    height                      :   40px;
    box-shadow                  :   none;
    border-radius               :   none;
    border                      :   none;
}

  
.card {
    transition                  :   transform 2s;
    transform-style             :   preserve-3d;
    cursor                      :   pointer;
}

.front{
    background-image            :   linear-gradient(#fed324, #ee6a8f);
    border-radius               :   10px;
}
  
.front, .back {
    -webkit-perspective: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    visibility:visible;
    backface-visibility           :   hidden;
}


.back {
  transform                     :   rotateY(180deg);
  position                      :   absolute;
  top                           :   0;
  border-radius                 :   10px;
}
  
  


@media(max-width:747px){

    .top_ad{
        width                   :   100%;
        margin-bottom: 40px;
        margin-top: 40px;
    }
}


@media(max-width:600px){
    .copy_text {
        width                   :   100%;
    }
}


@media(max-width:480px){
    .imglist{
        width                       :   46%;
    }
    .language-dropdown   {
        width: 40%;
    }
    .region_div {
        width                   :   92%;
    }
    .question_skip_btn{
        width                   :   60%;
    }
    .link{
        display                 :   block;
        width                   :   100%;
        padding                 :   10px;
    }
    .copy_btn{
        width                   :   100%;
        font-size               :   16px;
    }
    .scoreboard_btn{
        width                   :   90%;
    }
    .view_div {
        width                   :   90%;
    }
    .view_div_option_text {
        margin-top              :   8px;
    }

    .snapchat_ss{
        width                   :   100%;
    }
}

@media(max-width:430px){
    .logo {
        width                   :   40%;
    }
}

@media(max-width:420px){
    .logo {
        width                   :   40%;
    }
}

@media(max-width:360px){
    .logo {
        width                   :   50%;
    }
}

.error{
    color                       :   rgb(255, 0, 0);
    text-align                  :   center;
    margin                      :   10px;
    display: none;
}
.errorMsg{
    color                       :   rgb(255, 0, 0);
    text-align                  :   center;
    margin                      :   10px;
    grid-column: span 3;
}

.error_home{
    margin                      :   -15px 10px 15px 10px;
}
.error_home_user_friend{
    margin                      :   -27px 10px 17px 10px;
}

#loadingDiv, .defaultHide{
    display:none;
}

/* #loadingDiv{
    height:80vh;
} */
.share-btn-area a:hover {
    background-color: #14a1cc;
    border-color: #00c3ff;
    color: #fff;
}
.facebook-btn:hover{
    background-color: #14a1cc;
    border-color: #00c3ff;
    color: #fff;
}
.messenger-btn:hover{
    background-color: #14a1cc;
    border-color: #00c3ff;
    color: #fff;
}
.whatsapp-btn:hover{
    background-color: #14a1cc;
    border-color: #00c3ff;
    color: #fff;
}
.tiktok-btn:hover{
    background-color: #14a1cc;
    border-color: #00c3ff;
    color: #fff;
}
.instagram-btn:hover{
    background: linear-gradient(to right, #14a1cc , #14a1cc);
    border-color: #00c3ff;
    color: #fff;
}

.vk-btn:hover{
    background-color: #14a1cc;
    border-color: #00c3ff;
    color: #fff;
}
.facebook-btn:hover {
    color: #fff;
    text-decoration: none;
}

.green{
    border: 5px solid #34d331;
}
.green:hover{
    border: 5px solid #34d331!important;
}
.red{
    border: 5px solid #ff2f2f;
}
.red{
    border: 5px solid #ff2f2f!important;
}

.bottom_dfp_ad {
    margin-top: 40px;
}
.bottom_dfp_ad div div,.top_ad div div{
    margin:auto;
}
.ad_box div {
    margin: auto;
}

.result_meter[dir=rtl] .triangle-down{
    margin-right: 50px;
}

.result_meter[dir=rtl] .triangle-down_txet{
    margin-right: -18px;
}
.result_meter[dir=rtl] .triangle-down2{
    left: 50px;
    right:auto;
}

.result_meter[dir=rtl] .triangle-down_txet2{
    right: -30px;
}
/*=============== loader =============================*/
#loadingDiv > .quizSaveLoading{ 
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#loadingDiv{
    min-height: 30vh;
    position: relative;
    margin-bottom: 300px;
} 
/*====================== for quizonix =======================*/
.copy_text .link{
    overflow: hidden;
    height: 38px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    width: 90%;
    line-height: 1.6;
    white-space: nowrap;
}
.para ul{
    padding-left:0;
}
.adv-ads-txt{
    font-size: 10px!important;
    text-transform: uppercase;
    margin-bottom: 0;
    font-family: 'roboto',sans-serif;
    text-align: center!important;
    opacity: 0.7;
}
/* floating ad */
.footer_static_ad {
    margin-bottom: 70px;
}
.footer_static_ad.footer_120  {
    margin-bottom: 120px;
}
.static_ads{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0%);
    z-index: 999;
    width: 320px;
    height: 65px;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    -webkit-align-items: flex-end;
}
.static_ads.sticky_h100 {
    height: 115px;
}
.static_ads .adv-ads-txt{
    position: absolute;
    top: 0;
}
@media(max-width:480px){
    .static_ads{
        width:100%;
    }
}


/***Replace buttons and icons css  ***/
.view_btn_with_txt{
    font-size: 14px;
  }
  .delete_quiz_btns{
    display: flex;
    justify-content: center;
  }
  .delete_quiz_popup .modal-header{
    padding: 8px;
    text-align: center;
  }
  .delete_quiz_popup .modal-body{
    background: #ffffff;
  }
  .delete_quiz_btns .btn{
    font-size: 16px;
    font-weight: 500;
    opacity: 1;
    padding: 7px 12px;
    text-shadow: none;
    border: 2px solid #ccc;
    color: #000000;
    width: 100px;
    margin: 0 10px;
  }
  .delete_quiz_btns a.btn{
    background: #ff5200;
    color: #ffffff;
    border: 0;
  }

  /*custom-vignate-btn*/
.custom-vignate-btn-main{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .custom-vignate-btn{
    font-size: 18px;
    line-height: 25px;
    color: #ffffff;
    border-radius: 5px;
    text-decoration: none;
    padding: 10px 20px;
    background: #36301f ;
    display: inline-block;
    border: 0;
  }
  a.custom-vignate-btn{
    color: #ffffff;
  }
  a.custom-vignate-btn:hover{
    color: #ffffff;
    text-decoration: none;
  }
  
  @media(max-width:767px){
    .custom-vignate-btn-main{
       margin: 20px 20px;
    }
  }

  /* add css for popup top spaces*/
.modal.in .modal-dialog{
    padding-top:130px;
}

/*blog css*/
.quizs_sec h2{
    text-align: center;
    margin-bottom: 5px;
    margin-top: 0;
}
.quizs_sec h2 span{
    font-size: 22px;
    color: #000000;
    font-weight: 600;
    position: relative;
    z-index: 9;
}
.quizs_sec h2 span::before{
    content: "";
    position: absolute;
    width: 55px;
    height: 3px;
    background: #10BBB3;
    left: 50%;
    transform: translate(-50%,0);
    bottom: 0px;
    z-index: -1;
}
.quizs_cont_block{
    width:49%;
    background: #E8EAED 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 10px #00000029;
    overflow: hidden;
    margin-bottom:18px;
    padding: 10px;
}
.quizs_img{
    margin-bottom: 14px;
}
.quizs_link_btn{
    padding-top:14px;
    padding-bottom:11px;
}
.quizs_block{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    padding: 16px 15px;
    margin-bottom: 15px;

}
.blogs_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.quizs_head{
    font: normal normal bold 22px/22px Poppins;
    letter-spacing: 0.22px;
    color: #144D50;
}
.quizs_link_btn button{
    min-width: 210px;
    min-height: 50px;
    background: #EF8450 0% 0% no-repeat padding-box;
    border-radius: 10px;
    border: #EF8450;
    font: normal normal bold 21px Poppins;
    letter-spacing: 0.21px;
    color: #FFFFFF;
}
.quizs_head_sec{
    min-height: 52px;
    margin-bottom: 10px;
}
.all_quiz_sec{
    display: flex;
    justify-content: center;
    width:100%;
    padding-top:10px;
    padding-bottom:10px;
}
.all_quiz_sec button{
    min-width: 118px;
    min-height: 34px;
    border: 2px solid #FF0415;
    border-radius: 18px;
    font: normal normal bold 14px Poppins;
    letter-spacing: 0.14px;
    color: #FF0415;
    background: none;
    margin: 0 10px;
}
.all_quiz_sec button:hover{
    background: #FF0415;
    color: #ffffff;
}
.quizs_sec{
    padding-top:20px;
}

.blog_sec  .quizs_cont_block{
    background: #E8EAED 0% 0% no-repeat ;
}
.blog_sec .quizs_img{
    background: #ffffff;
    padding: 5px;
    overflow: hidden;
}
.blog_sec .quizs_img img {
   width:100%;
}
.blog_sec .quizs_head_sec,.blog_sec .quizs_cont_sec,.blog_sec .quizs_link_btn{
    padding-left: 15px;
    padding-right: 15px;
}
.blog_sec .quizs_head_sec{
    font-size:18px;
    letter-spacing: 0.18px;
    color: #144D50;
    position: relative;
}
.blog_sec .quizs_head_sec p{margin-bottom: 0; }

.blog_sec .quizs_cont_sec{
    font-size: 14px;
    letter-spacing: 0px;
    color: #000000;
}
.blog_sec .quizs_link_btn a{
    letter-spacing: 0.1px;
    border-radius: 18px;
    color: #FFFFFF;
    background: #10BBB3;
    font-size: 16px;
    line-height: 24px;
    width: 140px;
    display: inline-block;
    padding: 6px 12px;
    margin-top: 20px;
}
.blog_sec .quizs_link_btn{
    padding-top:0;
}
.scroll_up{
    width: 58px;
    height: 37px;
    background: #10bbb3 0% 0% no-repeat padding-box;
    box-shadow: 5px 5px 25px #10bbb3;
    border: 3px solid #FFFFFF;
    border-radius: 8px;
    opacity: 1;
    text-align: center;
    position: fixed;
    bottom:75px;
    right:10px;
    z-index: 99;
    display: none;
}
.scroll_up i{
    font-size: 50px;
    line-height: 0.5;
    font-weight: bold;
    color:#fff;
}

@media(max-width:500px){
    .quizs_sec h2 span{
        font-size: 23px;
    }
    .quizs_sec h2 span::before{
        width:50px;
    }
    .quizs_block{
        padding: 16px 16px;
        justify-content: center;
    }
    .quizs_cont_block{
        width:100%;
    }
    .quizs_head_sec {
        min-height: auto;
        padding-left:15px;
        padding-right:15px;
    }
}

/**********blog detail page******************/

.bd-main{
    background: #fbd776;
    margin-top: 20px;
    border-radius: 20px;
    box-shadow:0 0 10px 5px #ccc;
    position:relative;
    padding: 21px 25px;
    margin-bottom: 20px;
    
}
.bd-main img{
    width: 100%;
    border-radius: 5px;
}
.bd-inner{
    background: #ffffff;
    border-radius: 15px;
}
.bd-main-image img{
    width: 100%;
    height: auto;
    border-radius: 16px;
}
.bd-heading-share{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 20px;
    padding: 0 34px;
}
.bd-heading{
    font-size: 32px;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
}
.bd-share-btn img{
    width: 18px;
}
.bd-para{
    padding: 0 34px;
}

.bd-share-btn{
    position: relative;
}
.bd-share-popup{
    position: absolute;
    width: 155px;
    right: 0;
    top: 0;
    background: #ffffff;
    padding: 10px 0 10px 5px;
    border-radius: 10px;
    box-shadow: 0px 0px 4px 0px;
    display: none;
}
.bd-close-popup{
    text-align: right;
    line-height: 0;
    padding-right: 5px;
}
.bd-close-popup img{
    width: 10px;
}
.bd-share-click{
    text-align: left;
    padding-bottom: 10px;
}
.bd-share-click span{ 
    color: #10bbb3;
    font-size: 12px;
    padding-left: 10px;
}
.bd-inner .a2a_kit{
    padding: 0 34px;
    margin-top: 20px;
}
.bd-para{
    text-align:left;
}
.bd-para h2{
    font-size: 25px;
}
.bd-para h3{
    font-size: 19px;
}
.bd-para h4{
    font-size: 16px;
}
.top_ads p, .foot_ads p{
    margin:0;
    color:#134B4E;
}
@media(max-width:767px){
    .bd-inner {
        padding: 40px 10px;
    }
    .bd-para h2{
        line-height: 30px;
    }
}


.bd-inner[dir="rtl"]{
    text-align: right;
}
.bd-inner[dir="rtl"] .bd-para{
    text-align: right;
}



/**customise loader ***/

.loaderquizmain{
    text-align: center;
    margin-top: 30px;
}
.loaderquiz {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite;
    display: inline-block;
  }
  .loaderquiz::before , .loaderquiz::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #5B4FF2;
    animation: prixClipFix 2s linear infinite ;
  }
  .loaderquiz::after{
    inset: 8px;
    transform: rotate3d(90, 90, 0, 180deg );
    border-color: #ff5200;
  }

  @keyframes rotate {
    0%   {transform: rotate(0deg)}
    100%   {transform: rotate(360deg)}
  }

  @keyframes prixClipFix {
      0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
      50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
      75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
  }



  .create-new-quiz-btn{
    margin: 15px 0;
  }


  /*  */
.reward_confirm_modal {
    display: none;
    position: fixed;
    z-index: 999;
    padding-top: 300px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.reward_confirm_modal .reward_modal_dialog {
    margin: auto;
    padding: 25px;
    background-color: white;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 385px;
    border-radius: 20px;
    height: 170px;
}
.reward_modal_dialog > p{
    font-weight: 700;
    font-size: 18px;
    
}

.reward_confirm_modal .closeButton,
.reward_confirm_modal .rewardButtons {
    display: block;
    text-align: center;
    justify-content: center;
    margin-top: 23px;
}

.rewardButtons input[type="button"] {
    width: 150px;
}

.reward_confirm_modal .closeButton {
    position: absolute;
    right: -10px;
    top: -30px;
    z-index: 9;
}

.reward_confirm_modal input[type="button"] {
    padding: 0.5rem;
    border: none;
    border-radius: 4px;
    /* margin: 4px; */
    color: white;
}

.reward_confirm_modal .rewardButtons {
    display: flex;

    .yesButton {
        width: 150px;
    }

    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.reward_confirm_modal .yesCheckbox {
    margin-top: 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reward_confirm_modal .yesCheckbox input[type="checkbox"] {
    margin-top: 0;
}

.reward_confirm_modal .yesCheckbox label {
    padding-left: 0px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 600;
}

.reward_confirm_modal .yesButton {
    background: #ff8109;
    display: flex;
    /* padding-left: 10px; */
    align-items: center;
    border-radius: 5px;
    /* display: inline-block; */
    /* margin-top: 17px; */
    /* margin-right: 20px; */
}

.reward_confirm_modal .yesButton input[type="button"] {
    background: none;
}

.reward_confirm_modal .noButton {
    display: inline-block;
    position: relative;
    top: 0px;
}

.reward_confirm_modal .noButton input[type="button"] {
    border: 1px solid #000000;
    color: #000000;
}

.closeButton input[type="button"] {
    width: 32px;
    border-radius: 50% !important;
    background: rgb(237 7 7) !important;
    font-weight: 800;
}

.view-answer-rewarded{
    background: #FF512F;
    padding: 1px 4px;
    color: #ffffff !important;
    border-radius: 5px;
    display: inline-block;
    font-size: 14px;
    img{
        width: 15px!important;
    }
}
.check-group input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
  }
  
  .check-group label {
    position: relative;
    cursor: pointer;
  }
  
  .check-group label:before {
    content:'';
    -webkit-appearance: none;
    border: 2px solid #2DC38C;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 10px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 5px;
    background: #2DC38C;
    border-radius: 5px;
  }
  
  .check-group input:checked + label:after {
    content: '';
    display: block;
    position: absolute;
    top: 2px;
    left: 9px;
    width: 6px;
    height: 14px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .reward_confirm_modal[dir="rtl"] .check-group input:checked + label:after {
    right: 14px;
    left: auto;
}

@media(max-width:767px) {
    .reward_confirm_modal .reward_modal_dialog {
        width: 340px;
    }

    .rewardButtons input[type="button"] {
        width: 115px;
    }

    .reward_confirm_modal .rewardButtons {
        .yesButton {
            width: 115px;
        }
    }
    .scoreboardsec .table-heading span:nth-child(3) {
        width: 70px;
        margin-right: 10px;
    }
    .scoreboardsec ul li span:nth-child(3) {
        width: 70px;
        margin-right: 10px;
    }
}


 /*** seo blog css***/
 .seo_blog_sec{
    border-top: 50px solid #fff;
    text-align: initial;
    padding: 10px;
    .seo_blog_head{
        font-size: 35px;
        padding-bottom: 20px;
        color: #000000;
        line-height: 100%;
    }
    .seo_blog_title{
        font-size: 30px;
        padding-bottom: 20px;
        color: #000000;
        line-height: 35px;
    }
}

.seo_blog_desc{
    h2{
      font-size: 25px;  
    }
    h3{
        font-size: 20px;  
    }
    h4{
        font-size: 18px;  
    }
    p{
        font-size: 16px;
        margin-bottom: 0;
    }
    ul{
        padding-left: 15px;
        list-style: disc;
    }
}

    /***social profing css***/
    .user-quiz-played-number{
        font-size: 20px;
        padding-top: 20px;
        span{
            padding-right: 5px;
            font-weight: 700;
        }
    }


    /**nudge effect **/
.nudge-effect-quiz {
    animation: animate-shake 2s ease-in-out infinite;
}

@keyframes nudge-effect-quiz {
    0% {
        transform: scale(1);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes animate-shake {
    0%,
    10%,
    65%,
    100% {
      transform: rotate(0deg) scale(1.0);
    }
  
    30%,
    40% {
      transform: rotate(-1deg) scale(1.05);
    }
  
    35%,
    45% {
      transform: rotate(1deg) scale(1.05);
    }
}