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

*{margin:0;padding:0;}
img{vertical-align:middle;max-width:100%;}
html,body {widh:100%;height:100%;position:relative;font-family: 'Roboto', sans-serif;font-size:14px;}

@font-face {
  font-family: 'Roboto', sans-serif;
  src:url(../font/Roboto-Regular.ttf);
  font-weight: 400;
}

@font-face {
  font-family: 'Roboto', sans-serif;
  src:url(../font/Roboto-Bold.ttf);
  font-weight: 700;
}

@font-face {
  font-family: 'Roboto', sans-serif;
  src:url(../font/Roboto-Black.ttf);
  font-weight: 900;
}


.bg-f1{background-color:#e2e2f0;}
.bg-f2{background-color:#6e6db5;}
.bg-f3{background-color:#6260a5;}
.bg-f4{background-color:#b8b8dd;}
.bg-f5{background-color:#403e86;}
.bg-gray{background-color:#e1e1e1;}
.bg-f{background-color:#fff;}
.bg-9{background-color:#999;}

.bg-green2{background-color:#6dae40;}
.bg-orange2{background-color:#e29000;}
.bg-blue2{background-color:#4a74bc;}

.cl-f1{color:#ffba00;}
.cl-f2{color:#ff98a4;}
.cl-f3{color:#6260a5;}
.cl-orange{color:#e29000;}
.cl-9{color:#999;}
.cl-26{color:#262626;}
.cl-green{color:#6dae40;}

.fl{float:left}
.fr{float:right}

.br15{border-radius:15px;}

.pt24{padding-top:24px;}
.pt12{padding-top:12px;}
.pb24{padding-bottom:24px;}
.pb12{padding-bottom:12px;}
.pl24{padding-left:24px;}
.pl12{padding-left:12px;}
.pr24{padding-right:24px;}
.pr12{padding-right:12px;}

.mt24{margin-top:24px;}
.mt12{margin-top:12px;}
.mb24{margin-bottom:24px;}
.mb12{margin-bottom:12px;}
.ml24{margin-left:24px;}
.ml12{margin-left:12px;}
.mr24{margin-right:24px;}
.mr12{margin-right:12px;}

.f1-header{width:100%;height:150px;background-color:#314368;color:#fff;display: flex;justify-content: center;align-items: center;min-width:1200px}

.f1-body{width:1152px;height:auto;padding:24px;margin:auto;}
.f1-col1{width:calc(74% - 48px);height:auto;padding:24px;}
.f1-list-action{width:100%;height:38px;}
.f1-list-action li{list-style:none;float:left;margin-right:12px;display: flex;position:relative}

.f1-box-class{position:absolute;top:0px;width:270px;padding:12px;background-color:#fff;border-radius:5px;visibility:hidden;-webkit-transform:scaleY(0)}
.f1-box-class-show {transition: .4s all ease-in-out;visibility:visible;transform:scaleY(1);transform-origin: top;}


.f1-box-class li{width:50%;display:inline-block;float:left;margin-right:0px;}
.f1-box-class li a{padding:8px 12px;display:block;text-decoration:none;color:#262626;}
.f1-box-class li a:hover{background-color:#e2e2f0;border-radius:50px;text-align:center;font-weight:bold;}

.f1-btn-creat {padding:8px 24px;border-radius:5px;background-color:#e29000;text-decoration:none;color:#fff;}
.f1-btn-creat:hover {background-color:#dd8200;}
.f1-btn-creat img{margin-right:6px;}

.f1-search{border:1px solid #b8b8dd;border-radius:100px;overflow:hidden;position:relative}
.f1-search input{padding:10px 12px;outline:none;border:0px;padding-left:0px;}
.f1-search button{background-color:#fff;padding:9px 12px;border:0px;outline:0px;float:left}

.f1-form-next{float:right!important;}
.f1-form-next strong{padding:3px 6px;font-size:18px;}

.dropbtn {
  background-color: #fff;
  border:1px solid #b8b8dd;
  color: white;
  width:35px;height:35px;border-radius:50%;
  font-size: 16px;
  cursor: pointer;
  outline:none;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #fff;
}

#myInput {
  box-sizing: border-box;
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 12px;
  width:100%;
  border: none;
  border-radius:100px;
  outline:none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {outline:none}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  top:0;left:36px;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
  border-radius:20px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

.f1-show-class{padding:7px 24px;border-radius:100px;border:1px solid #b8b8dd;background-color:#fff;text-decoration:none;color:#262626;}
.f1-show-class img{margin-left:6px;}


.f1-next img{padding:6px;border-radius:5px;background-color:#fff;display:inline-block}
.f1-rotate img{-webkit-transform:rotate(-180deg)}

.f1-list-room{width:100%;height:auto;border-radius:5px;overflow:hidden}
.f1-list-room ul li{display:block;}
.f1-list-room ul li a{text-decoration:none;display:block}
.f1-list-room ul li a:hover{background-color:#6463b0;}
.f1-bd1{border-bottom:1px solid #8786c7}
.f1-list-room ul li table{width:100%;border-collapse: collapse;text-align:center;color:#fff;}
.f1-list-room ul li table td{padding:14px 0px;border-right:1px solid #8786c7}
.f1-list-room table td:nth-child(1){width:7%;}
.f1-list-room table td:nth-child(2){width:19%;}
.f1-list-room table td:nth-child(3){width:7%;}
.f1-list-room table td:nth-child(4){width:39%;}
.f1-list-room table td:nth-child(5){width:14%;}
.f1-list-room table td:nth-child(6){width:14%;}

.f1-align span{width:84%;text-align:left!important;padding:0px 12px!important;text-overflow: ellipsis;
  -webkit-line-clamp: 1;-webkit-box-orient: vertical;display:-webkit-box;
  overflow: hidden;}
  
.f1-btn-fix{position:fixed;bottom:-2px;right:0;padding:0px 24px;}
.f1-btn-fix li{float:left;list-style:none;position:relative}
.f1-btn-fix li a{padding:10px 0px;width:274px;display:block;background-color:#fff;border-radius:5px 5px 0px 0px;border:1px solid #b8b8dd;text-align:center;text-transform:uppercase;color:#6260a5;font-weight:bold;text-decoration:none;z-index:6;}
.f1-btn-fix li img{margin-right:6px;}

.f1-box-show{position:absolute;bottom:0px;width:274px;border:1px solid #b8b8dd;background-color:#fff;border-radius:5px 5px 0px 0px;display:none}

.f1-btn-hide-chat{border:0px!important;}
.f1-btn-hide-chat img{margin-left:6px;}

.f1-form-chat{width:calc(100% - 24px);padding:12px;border-top:1px solid #b8b8dd;overflow:auto;min-height:360px;max-height:360px;}
.f1-form-chat li{display:block;width:100%;position:relative;margin-top:12px;}
.f1-form-chat li:nth-child(1){margin-top:0px;}
.f1-avt{width:30px;height:30px;position:absolute;bottom:0;}
.f1-avt img{border-radius:50%;}
.f1-mesenger{width:calc(100% - 38px)}
.f1-mesenger span{font-size:12px;color:#aaa;}

.f1-chatstyle1{padding:12px;background-color:#e2e2f0;margin-top:4px;border-radius:15px 15px 15px 0px}
.f1-chatstyle2{padding:12px;background-color:#6260a5;margin-top:4px;border-radius:15px 15px 0px 15px;color:#fff;}
.f1-chatstyle3{padding:12px;background-color:#e29000;margin-top:4px;border-radius:15px 15px 0px 15px;color:#fff;}

.form-area{width:calc(100% - 24px);height:60px;margin:12px;border:1px solid #b8b8dd;border-radius:15px;overflow:hidden;}
.form-area textarea{width:calc(100% - 26px);height:6px;padding:8px;outline:none;border:0px;overflow:hidden}

#s-scroll::-webkit-scrollbar-track
{
	background-color: #F5F5F5;
}

#s-scroll::-webkit-scrollbar
{
	width: 6px;
	background-color: #e2e2f0;
}

#s-scroll::-webkit-scrollbar-thumb
{
	background-color: #6260a5;
}

.f1-action-chat li{float:left;}
.f1-action-chat li a{width:26px;height:26px;background-color:#6260a5;border-radius:50%;padding:0px;display:inline-block;border:0px;margin-right:8px;position:relative}
.f1-action-chat li a img{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);position:absolute}

.f1-list-rank{width:100%;padding:12px;border-top:1px solid #b8b8dd;}
.f1-list-rank .f1-avt{position:relative}
.f1-list-rank span{padding-left:6px;display:table}
.f1-list-rank th:nth-child(1){width:80%;}
.f1-list-rank th:nth-child(2){width:20%;}
.f1-list-rank th:nth-child(2) span{text-align:right!important;}

.f1-list-rank th{color:#aaa;font-weight:400;}
.f1-list-rank td{padding-top:8px;}
.f1-number{width:16px;height:16px;background-color:#e1e1e1;position:absolute;bottom:-2px;left:-3px;display: flex!important;justify-content: center;align-items: center;border-radius:50%;padding-left:0px!important;font-size:12px;color:#262626;}
.f1-number1{background-color:#e29000!important;color:#fff!important;}
.f1-number2{background-color:#8ac53e!important;color:#fff!important;}
.f1-number3{background-color:#4a74bc!important;color:#fff!important;}

.f1-more-rank{padding:6px 16px!important;display:inline-block!important;width:auto!important;text-align:center;border:0px!important;background-color:#f1f1f1!important;border-radius:100px!important;
color:#262626!important;text-transform:none!important;font-weight:400!important;margin-bottom:12px;}
.f1-more-rank img{margin-left:6px;}

.f1-list-rank strong{text-transform:uppercase;font-weight:700;color:#6260a5;display:block;text-align:center;}

.f1-opacity{position:fixed;width:100%;height:100%;background-color:#000000cf;top:0px;visibility:hidden;}
.f1-opacity-show{visibility:visible;}

.f1-popup{position:fixed;width:446px;height:auto;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);z-index:9999;background-color:#fff;border-radius:15px;visibility:hidden;-webkit-transition:all ease 0.3s;}
.f1-popup-show{visibility:visible;transform:translate(-50%,-50%) scale(1);-transition:all ease 0.3s;}

.f1-close-pop{position:absolute;top:12px;right:12px;}
.f1-popup h3{text-align:center;text-transform:uppercase;color:#6260a5;padding:12px;border-bottom:1px solid #e1e1e1;}

.f1-creat-room{width:calc(100% - 32px);padding:16px;}
.f1-creat-room li{list-style:none;width:calc(50% - 6px);float:left;margin-bottom:16px;position:relative}
.f1-creat-room li a{padding:8px 12px;display:block;border:1px solid #e1e1e1;border-radius:5px;text-decoration:none;color:#262626}
.f1-creat-room li img{float:right;padding:8px 0px}
.f1-creat-room li p{margin-bottom:6px;font-weight:700;}
.f1-creat-room li:nth-child(3){width:100%!important;}
.f1-lock{width:calc(100% - 32px);height:auto;padding:16px;}
.f1-btn-lock{width:56px;height:26px;display:inline-block;border-radius:100px;}
.f1-lock span{display:table;padding:4px 8px;}
.f1-lock strong{width:22px;height:22px;border-radius:50%;display:inline-block;margin:2px;}
.f1-lock p{color:#6260a5;}

.f1-list{position:absolute;top:55px;left:0;width:100%;max-height:200px;overflow:auto;z-index:999999;background-color:#fff;box-shadow:0px 0px 5px 1px #2626262b;border-radius:5px;display:none;}
.f1-list li{display:block;width:100%;margin-bottom:0px;}
.f1-list li a{border:0px;border-bottom:1px solid #e1e1e1;border-radius:0px;}
.f1-list li a:hover{background-color:#e1e1e1;}

.f1-finish-room{padding:8px 24px;display:inline-block;border-radius:5px;background-color:#e29000;text-decoration:none;color:#fff;margin-top:12px;}

.f1-info-invitation{width:calc(100% - 32px);padding:16px;text-align:center;}
.f1-info-invitation p{color:#6260a5;}
.f1-avt2{width:106px;height:106px;border-radius:50%;border:1px solid #6260a5;overflow:hidden;margin:auto;}
.f1-avt2 img{width:86px;height:86px;overflow:hidden;border-radius:50%;margin:10px;}

.f1-btn-invitation{overflow:hidden;text-align:center;width:auto;margin:0px auto 12px auto;display:table}
.f1-btn-invitation li{float:left;list-style:none;}
.f1-btn-invitation li a{padding:8px 24px;display:inline-block;border-radius:5px;text-decoration:none;color:#262626;}
.f1-yes{background-color:#44a500;color:#fff!important;}
.f1-no{background-color:#e1e1e1;margin-left:12px;}


.f1-room{width:100%;height:auto;border-radius:5px;overflow:hidden}
.f1-notifical{padding:24px;color:#e93c2a;text-align:center;font-size:18px;font-weight:700;}

.f1-form-user{width:calc(100% - 32px);padding:16px;}

.f1-avt76 img{width:76px;height:76px;border-radius:50%;overflow:hidden;margin-right:12px;}

.f1-info-user ul li{padding-bottom:4px;list-style:none;}

.f1-user-action li{float:left;margin-left:12px;list-style:none;text-align:center}
.f1-user-action li div{width:76px;height:76px;border-radius:10px;display:flex;justify-content: center;align-items: center;}
.f1-user-action li:nth-child(2) div{width:74px;height:74px;border:2px dashed #8786c7;}
.f1-user-action li a{color:#262626;text-decoration:none;}
.f1-user-action li span{margin-top:6px;display:inline-block}

.f1-list-user{width:calc(100% - 16px);height:auto;overflow:hidden;text-align:center;padding:8px;}
.f1-tit{text-transform:uppercase;color:#6260a5;text-align:center;}
.f1-theme{padding-bottom:12px;text-align:center;}

.f1-avt58 img{width:58px;height:58px;border-radius:50%;overflow:hidden;margin-right:12px;}

.f1-list-user .f1-info-user{text-align:left!important;width:calc(33.33% - 42px);float:left;margin:8px;padding:12px;border:1px solid #e2e2f0;border-radius:10px;}

.f1-box-question{width:calc(100% - 32px);padding:16px;overflow:hidden;border-radius:5px;position:relative}

.f1-load-ques{width:100%;padding:12px 0px;overflow:hidden}  .f1-load-ques li{float:left;list-style:none;color:#6260a5;}

.f1-load-ques li:nth-child(2){width:calc(100% - 172px);height:2px;display:table;background-color:#bdbde0;margin:9px 12px;border-radius:100px;}
.f1-load-ques li:nth-child(2) div{width:60%;height:2px;background-color:#6260a5;position:relative}
.f1-load-ques li:nth-child(2) span{width:18px;height:18px;border-radius:50%;position:absolute;top:-8px;right:0;display:block;background-color:#6260a5;z-index:6}

.f1-load-ques li:nth-child(3){text-transform:uppercase}

.f1-col2{width:calc(100% - 48px);height:auto;padding:24px;position:relative}

.f1-box-finish{width:100%;height:auto;border-radius:5px;background-image:url(../img/bg_finish.png);background-size:cover;background-position:bottom;background-repeat:no-repeat;overflow:hidden}
  
.f1-winner{width:100%;height:600px;display: flex;align-items: center;justify-content: center;text-align:center}
.f1-winner h3{font-size:24px;color:#fff;text-transform:uppercase;padding:12px;}
.f1-winner h1{font-size:62px;}

.f1-list-win{width:70%;margin:24px auto;border-radius:5px;overflow:hidden}
.f1-box-finish .f1-list-room{max-height:400px;overflow:auto;border-radius:0px;}
.f1-box-finish table td:nth-child(1){width:10%;}
.f1-box-finish table td:nth-child(2){width:30%;}
.f1-box-finish table td:nth-child(3){width:30%;}
.f1-box-finish table td:nth-child(4){width:30%;border:0px;}
.f1-box-finish h3{text-align:center;display:block;text-transform:uppercase;color:#fff;padding-top:24px;}

.f1-box-finish .f1-list-room h3{padding:12px!important;background-color:#6260a5}

.f1-btn-option{overflow: hidden;text-align: center;width: auto;margin: 0px auto 24px auto;display: table;}
.f1-btn-option li{float:left;list-style:none;}
.f1-btn-option li a{padding: 8px 24px;display: inline-block;border-radius: 5px;text-decoration: none;color: #fff;}
.f1-btn-option li img{margin-right:6px;}

.f1-score{width:100%;border-collapse: collapse;text-align:center;margin-bottom:12px;}
.f1-score td{border:1px solid #e1e1e1;padding:12px;}

.f1-center-text{text-align:center;text-transform:uppercase;display:block;padding:12px;}

.f1-box-rate .f1-list-room{border-radius:0px;}
.f1-box-rate table td:nth-child(1){width:10%;}
.f1-box-rate table td:nth-child(2){width:36%;}
.f1-box-rate table td:nth-child(3){width:18%;}
.f1-box-rate table td:nth-child(4){width:18%;}
.f1-box-rate table td:nth-child(5){width:18%;border:0px;}
.f1-box-rate h3{text-align:center;display:block;text-transform:uppercase;color:#6260a5;}
.f1-box-rate .f1-list-room h3{padding:12px!important;background-color:#6260a5;color:#fff;}
.f1-box-rate .f1-list-win{margin:12px auto;}

.f1-tab-rank{width:100%;margin:auto;padding:12px 0px;overflow:hidden}
.f1-tab-rank li{float:left;list-style:none}
.f1-tab-rank strong{padding:0px 6px;}
.f1-btn-tab{padding: 8px 24px;border-radius: 5px;text-decoration: none;color: #fff;}

.f1-tab-rank li:nth-child(3){float:right;}

.f1-popup-invitation{overflow:hidden}

.f1-form-invitation{width:calc(100% - 24px);padding:12px;}

.f1-avt32 img{width:36px;height:36px;border-radius:50%;overflow:hidden}

.f1-list-send{width:100%;border-collapse: collapse;max-height:300px;overflow:auto;display:block}
.f1-list-send td{padding:12px;}
.f1-list-send td:nth-child(1){width:80%;}  
.f1-btn-send{padding:8px 24px;display:block;border-radius:5px;color:#fff;text-decoration:none;text-align:center}

.f1-popup-countdown{width:268px;height:268px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);z-index:9999;visibility:hidden;-webkit-transition:all ease 0.3s;}
.f1-countdowwn{width:236px;height:236px;background-color:#6260a57a;border-radius:50%;padding:16px;}
.f1-popup-countdown-show{visibility:visible;transform:translate(-50%,-50%) scale(1);-transition:all ease 0.3s;}
.f1-box-countdown{width:236px;height:236px;background-color:#fff;border-radius:50%;display:flex;justify-content: center;align-items: center;}
.f1-box-countdown span{display:block;width:100%;text-align:center;text-transform:uppercase;color:#6260a5}
.f1-box-countdown strong{text-align:center;font-size:120px;line-height:110px;color:#6260a5}

.f1-btn-out{padding:8px 24px;display:inline-block;border-radius:5px;text-decoration:none;color:#262626;}