.navbarSpace{height: 55px;}
#navbarBack{position: fixed; top: 0px; left: 0px; width: 100%; background: var(--bg_blue); z-index: 50;}
#navbarBack > div{height: 55px; width: 950px; padding: 0px 20px; box-sizing: border-box; display: grid; grid-template-columns: 15px 1fr; grid-gap: 25px;}
#navbarBack > div > div{width: 100%; position: relative;}
#navbarBack .nbIcon{width: 20px; height: 20px; margin-top: 17px;}
#navbarBack .nbLogo{width: 100px; height: 23px; top: 16px; position: absolute;}
#navbarBack .nbTitle{margin-top: 13px; position: absolute; top: 4px; left: 118px; font-size: 15px; letter-spacing: 5px; font-family: 'bold'; color: var(--text_white);}

#headerSpace{height: 50px;}
#headerSpaceSub{height: 96px;}
#header{min-height: 50px; position: fixed; width: 100%; top: 0px; left: 0px; z-index: 55; background: var(--bg_white); box-shadow: 0px 0px 15px var(--shadowNavbar); transition:all 0.5s ease;}
#header .hBasic{padding: 0px 15px; box-sizing: border-box; height: 50px; display: grid; grid-template-columns: 100px 1fr min-content; grid-gap: 15px;}
#header .hBasic.hGuest{grid-template-columns: 100px 1fr 25px; grid-gap: 20px;}
#header .hBasic > div{width: 100%;}
#header .hTitle{padding: 0px 15px; box-sizing: border-box; height: 50px; display: grid; grid-template-columns: 1fr min-content; grid-gap: 15px;}
#header .hTitle.withBack{grid-template-columns: 25px 1fr min-content;}
#header .hTitle > div{width: 100%;}
#header .hTitle .htBack{}
#header .hTitle .htBack > a > div{width: 25px; height: 25px; margin-top: 13px;}
#header .hTitle .htName{display: grid; width: 100%;}
#header .hTitle .htName > div{font-size: 20px; width: 100%; font-weight: bold; margin-top: 8px; color: var(--text_blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#header .hBack{padding: 0px 15px; box-sizing: border-box; height: 50px; display: grid; grid-template-columns: 25px 1fr min-content; grid-gap: 15px;}
#header .hBack > div{width: 100%;}
#header .hBack > div:first-child > a > div{width: 25px; height: 25px; margin-top: 13px;}
#header .hBack > div:nth-child(2) > div{font-size: 20px; font-weight: bold; margin-top: 10px; color: var(--text_blue);}
#header .hOpt{display: grid; grid-template-columns: 25px 1fr; grid-gap: 10px; align-items: center; padding: 0px 15px; box-sizing: border-box;}
#header .hOpt > div{width: 100%;}
#header .hOpt > div:first-child > a > div{width: 25px; height: 25px;}
#header .hOpt .hoMenu{float: right; display: flex; align-items: center;}
#header .hOpt .hoMenu > div{display: inline-block;}
#header .hOpt .hoMenu > div:not(:last-child){margin-right: 15px;}

#header .hcLogo{padding-bottom: 24%; margin-top: 13px;}
#header .hcDownload{width: 20px; height: 20px; margin-top: 14px; cursor: pointer;}
#header .hcSearch{height: 35px; background: var(--bg_silvercalm); border-radius: 5px; position: relative; margin-top: 7px;}
#header .hcSearch > form > input{width: 100%; font-size: 15px; border: none; padding: 9px 25px 7px 40px;}
#header .hcSearch > form > div{position: absolute; left: 5px; top: 0px; height: 100%; width: 25px; transition: all 0.2s ease;}
#header .hcSearch > form > div > div{width: 15px; height: 15px; margin-top: 10px;}
#header .hcOption{height: 50px; white-space: nowrap;}
#header .hcOption > a{display: inline-block; margin-top: 13px;}
#header .hcOption > a:not(:last-child){margin-right: 25px;}
#header .hcOption > a > div{width: 23px; height: 23px; position: relative;}
#header .hcOption > a > div > div{padding: 2px 6px; background: var(--bg_red); color: var(--text_white); border-radius: 5px; font-size: 11px; position: absolute; top: -8px; right: -4px;}

.headerBack{display: grid; grid-template-columns: 25px 1fr; grid-gap: 15px; align-items: center; padding: 0px 15px; box-sizing: border-box;}
.headerBack > div{width: 100%;}
.headerBack > div:first-child div{width: 25px; height: 25px;}
.headerBack > div:nth-child(2){font-size: 17px; font-weight: bold; padding: 12px 0px;}

.header_menu{height: 45px; display: table; table-layout: fixed; width: 100%;}
.header_menu > a{display: table-cell; vertical-align: middle;}
.header_menu > a > div{text-align: center; color: var(--text_black); position: relative; font-weight: bold;}
.header_menu > a > div.active{color: var(--text_blue);}
.header_menu > a > div.active:before{content: ''; position: absolute; bottom: -12.5px; left: 0px; width: 100%; height: 2px; background: var(--bg_blue);}
.header_menu .hmIcon{position: relative; width: 15px; height: 15px; top: 3px; right: 3px;}
.header_menu_scroll{height: 45px; position: relative; overflow: hidden;}
.header_menu_scroll > div:not(:nth-child(3)){position: absolute; top: 0px; height: 100%; width: 50px;}
.header_menu_scroll > div:not(:nth-child(3)) > div{width: 20px; height: 20px; margin-top: 13px;}
.header_menu_scroll > div:nth-child(1) > div{margin-left: 7px;}
.header_menu_scroll > div:nth-child(2) > div{margin-right: 7px;}
.header_menu_scroll > div:nth-child(1){left: 0px; z-index: 1; background-image: linear-gradient(to left, transparent, var(--shadowNextPrev)); display: none;}
.header_menu_scroll > div:nth-child(2){right: 0px; z-index: 1; background-image: linear-gradient(to right, transparent, var(--shadowNextPrev)); display: block;}
.header_menu_scroll > div:nth-child(3){white-space: nowrap; overflow: auto; padding-bottom: 5px; height: 65px; font-size: 0px;}
.header_menu_scroll > div:nth-child(3) > a > div{padding: 11px 10px 12px 10px; font-weight: bold; display: inline-block; font-size: 15px; color: var(--text_black); position: relative;}
.header_menu_scroll.nobubble > div:nth-child(3) > a > div:before{content: ''; position: absolute; bottom: 1px; left: 0px; width: 100%; height: 1px; background: var(--bg_line);}
.header_menu_scroll.nobubble > div:nth-child(3) > a > div.active:before{background: var(--bg_blue);}
.header_menu_scroll > div:nth-child(3) > a > div > span{padding: 2px 12px;}
.header_menu_scroll > div:nth-child(3) > a > div.active{color: var(--text_blue);}
.header_menu_scroll > div:nth-child(3) > a > div.active > span{border-radius: 20px; background: var(--bg_blue); color: var(--text_white);}

.header_back{position: relative; z-index: 50; height: 55px;}
.header_back > div{position: fixed; top: 0px; left: 0px; width: 100%; height: 55px; background: var(--bg_white); box-shadow: 0px 0px 5px var(--shadowNavbar);}
.header_back .hb_icon{width: 55px; height: 55px;}
.header_back .hb_icon > div{width: 25px; height: 25px; margin-top: 14px;}
.header_back .hb_text{height: 55px;}
.header_back .hb_text > div{padding-top: 14px; font-size: 17px; font-weight: bold;}

#navbar_canvas{height: 70px;}
#navbar{width: 100%; height: 50px; background: var(--bg_white); z-index: 60; position: fixed; bottom: 0px; left: 0px; box-shadow: 0px 0px 5px var(--shadowNavbar); user-select: none;}
#navbar > div{display: table; width: 100%; height: 100%; table-layout: fixed;}
#navbar > div > a{display: table-cell; vertical-align: middle;}
#navbar .n_options{position: relative;}
#navbar .n_options:before{content: ''; display: none; position: absolute; bottom: 38px; right: 25%; border-radius: 50%; width: 10px; height: 10px; background: red;}
#navbar .n_options.active{background: var(--bg_silvercalm);}
#navbar .n_options.notifActive:before{display: block;}
#navbar .n_options:before{}
#navbar .n_options > div:first-child{width: 20px; height: 20px; position: relative;}
#navbar .n_options > div:first-child > div{padding: 2px 6px; background: var(--bg_red); color: var(--text_white); border-radius: 5px; font-size: 11px; position: absolute; top: -8px; right: -4px;}
#navbar .n_options > div:last-child{text-align: center; margin-top: 5px; color: var(--text_silver); font-size: 11px;}
#navbar .n_options .no_photo{width: 18px; height: 18px; border-radius: 50%; border: 1px solid black;}
#navbar .n_options .no_photo.active{border: 1px solid var(--bg_blue);}

.boxKunci{padding: 5px 15px; cursor: pointer; font-weight: bold; color: var(--text_white); align-items: center; border-radius: 50px; background: var(--bg_black); display: grid; grid-template-columns: 15px minmax(15px, 1fr); grid-gap: 10px;}
.boxKunci.mini{padding: 3px 12px; grid-gap: 5px; font-size: 11px; grid-template-columns: 10px minmax(10px, 1fr)}
.boxKunci > div{width: 100%;}
.boxKunci > div:first-child > div{width: 15px; height: 15px;}
.boxKunci.mini > div:first-child > div{width: 10px; height: 10px;}
.boxKunci > div:nth-child(2){text-align: center; white-space: nowrap;}

.sideTitle{padding: 0px 10px 15px 10px; font-size: 15px; font-weight: bold;}

.liveFloating{position: fixed; padding: 13px 10px 15px 10px; bottom: 58px; left: 0px; cursor: pointer; background: var(--bg_red); color: var(--text_white); z-index: 50; display: grid; grid-template-columns: 100px 1fr; grid-gap: 10px; align-items: center; width: 100%; box-sizing: border-box;}
.liveFloating > div{width: 100%;}
.liveFloating .lfTag{display: inline-block;}
.liveFloating .lfTag > div{display: grid; color: var(--text_red); font-weight: bold; font-size: 11px; background: var(--bg_white); grid-template-columns: 7px 1fr; grid-gap: 5px; align-items: center; padding: 3px 10px; border-radius: 50px;}
.liveFloating .lfTag > div > div{width: 100%;}
.liveFloating .lfTag > div > div:first-child > div{width: 7px; height: 7px; border-radius: 50px; background: var(--bg_red);}
.liveFloating > div:nth-child(2){display: grid;}

#popup{width: 100%; top: 0px; left: 0px; height: 100%; position: fixed; z-index: 90; background: rgba(239, 239, 239, 0.55); overflow: auto;}
#popup table{width: 100%; height: 100%;}
#popup .p_canvas{max-width: 400px; width: 80%; margin-top: 50px; margin-bottom: 50px; box-shadow: 0 0 6px 0 rgba(161, 161, 161, 0.5); overflow: hidden; border-radius: 5px;}

#popupBottom > div:first-child{width: 100%; height: 100%; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.4); position: fixed; z-index: 88;}
#popupBottom > div:nth-child(2){position: fixed; bottom: 0px; left: 0px; width: 100%; max-height: 85%; overflow: auto; box-shadow: 0px 0px 10px var(--shadow); background: var(--bg_white); z-index: 89; border-radius: 15px 15px 0px 0px;}
#popupBottom .popupButtonBody{padding: 10px 0px;}

.popup_head_action{height: 45px; padding: 0px 15px;}
.popup_head_action .pha_title{font-size: 15px; font-family: 'bold'; float: left; margin-top: 15px;}
.popup_head_action .pha_action{float: right;}
.popup_head_action .pha_action button{margin-top: 10px;}

.popup_head_close{display: grid; grid-template-columns: 1fr 15px; grid-gap: 10px; align-items: center;}
.popup_head_close > div{width: 100%;}
.popup_head_close > div:first-child{font-weight: bold; font-size: 15px;}
.popup_head_close > div:nth-child(2) > div{width: 15px; height: 15px;}

.popup_option_floating_space{height: 60px;}
.popup_option_floating{position: fixed; padding: 15px; box-shadow: 0px 0px 5px var(--shadow); border-top: 1px solid var(--bg_line); bottom: 0px; left: 0px; width: 100%; background: var(--bg_white);}

.popup_content_tab > div:first-child{white-space: nowrap; padding: 0px 15px;}
.popup_content_tab > div:first-child > div{display: inline-block; padding: 3px 13px; border-radius: 50px; cursor: pointer; transition: var(--transition);}
.popup_content_tab > div:first-child > div.active{background: var(--bg_blue); color: var(--text_white);}
.popup_content_tab > div:first-child > div:not(.active){box-shadow: inset 0px 0px 0px 1.5px var(--bg_silver);}
.popup_content_tab > div:first-child > div:not(:last-child){margin-right: 5px;}
.popup_content_tab > div:first-child > div:not(.active):hover{background: var(--bg_silvercalm);}
.popup_content_tab > div:nth-child(2){margin-top: 10px;}
.popup_content_tab > div:nth-child(2) > div:not(.active){display: none;}

.popup_list{list-style-type: none;}
.popup_list > li{padding: 15px 20px; cursor: pointer; transition: all 0.5s ease;}
.popup_list.plMini > li{padding: 10px 15px;}
.popup_list > li:not(:last-child){border-bottom: 1px solid #f6f6f6;}
.popup_list > li:hover{background: #e7e7e7;}
.popup_list > a > li{padding: 15px 20px; cursor: pointer; transition: all 0.5s ease; color: var(--text_black);}
.popup_list > a:not(:last-child) > li{border-bottom: 1px solid #f6f6f6;}
.popup_list > a:hover > li{background: #e7e7e7;}
.popup_list.plIcon li{display: grid; grid-template-columns: 20px 1fr; grid-gap: 10px; align-items: center;}
.popup_list.plIcon li > div{width: 100%;}
.popup_list.plIcon li > div:first-child > div{width: 20px; height: 20px;}
.popup_list.plMini.plIcon li{grid-template-columns: 15px 1fr;}
.popup_list.plMini.plIcon li > div:first-child > div{width: 15px; height: 15px;}

.popup_login{min-height: 300px;}
.popup_login > div:first-child{padding: 10px 15px 11px 15px; box-sizing: border-box; color: var(--text_white); font-size: 17px; font-weight: bold; background-image: url('../../../images/background/popup_login.png'); display: grid; grid-template-columns: 1fr min-content; align-items: center;}
.popup_login > div:first-child > div{width: 100%;}
.popup_login > div:first-child > div:nth-child(2) > div{width: 35px; height: 35px; background: var(--bg_white); border-radius: 50%; position: relative;}
.popup_login > div:first-child > div:nth-child(2) > div > div{width: 20px; height: 20px; position: relative; top: 7.5px;}
.popup_login > div:nth-child(2){padding: 10px 20px 25px 20px;}
.popup_login .plBox{padding: 30px 40px 0px 40px;}
.popup_login .plBox > div:first-child{display: grid; overflow: hidden; grid-template-columns: 1fr 1fr; border: 1px solid var(--bg_line); border-radius: 10px;}
.popup_login .plBox > div:first-child > div{padding: 10px 0px; width: 100%; cursor: pointer; transition: var(--transition); text-align: center; font-weight: bold; position: relative;}
.popup_login .plBox > div:first-child > div:hover{background: var(--bg_silvercalm);}
.popup_login .plBox > div:first-child > div:before{content: ''; opacity: 0; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 2px; background: var(--bg_blue);}
.popup_login .plBox > div:first-child > div.active:before{opacity: 1;}
.popup_login .plBox > div:nth-child(2) > div{display: none;}
.popup_login .plBox > div:nth-child(2) > div.active{display: block;}
.popup_login .plBox .pbTelco{margin-top: 15px;}
.popup_login .plBox .pbTelco > div{display: grid; grid-template-columns: 1fr 140px; align-items: center;}
.popup_login .plBox .pbTelco > div:not(:last-child){margin-bottom: 10px;}
.popup_login .plBox .pbTelco > div > div{width: 100%;}
.popup_login .plBox .pbTelco > div img{height: 15px; vertical-align: middle;}
.popup_login .plBox .btnOpt{margin-top: 15px; display: grid; grid-template-columns: 1fr 90px; align-items: center;}
.popup_login .plBox .btnOpt > div{width: 100%;}
.popup_login .plBox .btnOpt > div:nth-child(2){text-align: right;}
.popup_login .plBox .btnOpt > div > a > div{display: inline-block;}
.popup_login .plBox .btnOpt .boRegist{padding: 5px 10px; border-radius: 5px; border: 1.5px solid var(--bg_blue);}

.popup_login_telco .popup_head_close{padding: 15px;}
.popup_login_telco .pltInfo{padding: 10px 15px; background: var(--bg_alert_red_calm);}
.popup_login_telco .pltInfo span{color: var(--text_blue); font-weight: bold; text-decoration: underline;}
.popup_login_telco .pltBody{padding: 15px 15px 20px 15px;}
.popup_login_telco .pltBody > div{display: none;}
.popup_login_telco .pltBody > div.active{display: block;}

.popupAuthor{width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; overflow: auto; background: var(--bg_white); z-index: 58; display: none;}
.popupAuthor .paBody{padding-bottom: 80px;}
.popupAuthor .paBody .pbHead{padding: 15px;}
.popupAuthor .paBody .pbHead > div:first-child{font-size: 20px; font-weight: bold;}
.popupAuthor .paBody .pbList{border-top: 1px solid var(--bg_line);}
.popupAuthor .paBody .pbList > a > div{padding: 10px 15px; display: grid; grid-template-columns: 35px 1fr 15px; grid-gap: 15px; align-items: center; border-bottom: 1px solid var(--bg_line);}
.popupAuthor .paBody .pbList > a > div > div{width: 100%;}
.popupAuthor .paBody .pbList > a > div > div:first-child > div{width: 35px; height: 35px;}
.popupAuthor .paBody .pbList > a > div > div:nth-child(2) > div:first-child{font-size: 15px; font-weight: bold; color: var(--text_black);}
.popupAuthor .paBody .pbList > a > div > div:nth-child(2) > div:nth-child(2){color: var(--text_silver); margin-top: 2px;}
.popupAuthor .paBody .pbList > a > div > div:nth-child(3) > div{width: 15px; height: 15px;}
.popupAuthor .paBody .pbBtn{padding: 0px 15px 15px 15px;}
.popupAuthor .paBody .pbBtn button{width: 100%;}

.popup_nsfw{width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); position: fixed; top: 0px; left: 0px; z-index: 50;}
.popup_nsfw > div{display: table; width: 100%; height: 100%; table-layout: fixed;}
.popup_nsfw > div > div{display: table-cell; vertical-align: middle; padding: 0px 25px;}
.popup_nsfw > div > div > div{max-width: 450px; padding: 25px 0px; background: var(--bg_white); border-radius: 10px; text-align: center;}
.popup_nsfw > div > div > div > div:first-child{width: 135px; height: 100px; background-image: url('../../../images/back_nsfw.png'); background-size: 100%;}
.popup_nsfw > div > div > div > div:nth-child(2){margin-top: 15px; font-size: 17px; font-family: 'bold';}
.popup_nsfw > div > div > div > div:nth-child(3){margin-top: 5px; padding: 0px 20px;}
.popup_nsfw > div > div > div > div:nth-child(4){margin-top: 15px;}

.popup_download{white-space: nowrap; width: 100%; margin-top: 15px;}
.popup_download > a{display: inline-block;}
.popup_download > a > div{width: 130px; height: 43px;}
.popup_download > a:not(:last-child) > div{margin-right: 15px;}

.popupPreviewPhoto{width: 100%; height: 100%; z-index: 62; position: fixed; top: 0px; left: 0px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: rgba(16, 16, 16, 0.7);}
.popupPreviewPhoto .pppClose{position: fixed; top: 15px; left: 15px; background: var(--bg_white); border-radius: 50%; width: 35px; height: 35px; z-index: 1; box-shadow: 0px 0px 5px var(--bg_shadow); border: 1.5px solid var(--bg_blue);}
.popupPreviewPhoto .pppClose > div{width: 15px; height: 15px; position: relative; top: 10px;}
.popupPreviewPhoto .pppBody{max-width: 800px; width: 100%; padding: 15px; height: 100%; position: absolute; left: 0px; right: 0px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
.popupPreviewPhoto .pppBody > img{max-width: 100%; max-height: 100%;}

.popupPremium{padding: 15px;}
.popupPremium > div:first-child{font-weight: bold;}
.popupPremium > div:nth-child(2){color: var(--text_silver);}
.popupPremium .ppFeature{display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 20px;}
.popupPremium .ppFeature > div{width: 100%; text-align: center;}
.popupPremium .ppFeature > div > div:first-child{width: 35px; height: 35px;}
.popupPremium .ppFeature > div > div:nth-child(2){max-width: 90px; font-size: 12px; font-weight: bold; margin-top: 5px;}
.popupPremium > div:nth-child(4){margin-top: 25px;}

.popupImageCompare{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;}
.popupImageCompare > div{width: 100%; position: relative;}
.popupImageCompare .picImg{padding-bottom: 100%; border-radius: 10px; background-color: var(--bg_silvercalm);}
.popupImageCompare > div > div:nth-child(2){text-align: center; font-weight: bold; margin-top: 5px; font-size: 11px; position: absolute; bottom: 10px; left: 10px; padding: 2px 10px 3px 10px; border-radius: 25px; background: var(--bg_white); font-weight: bold;}

.loadingWorkLike{position: fixed; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 150;}
.loadingWorkLike > div{width: 250px; height: 250px; background-size: 100%; background-image: url('../../../images/loading_like.gif');}

.modalDropdown{display: none; position: absolute; background: var(--bg_white); min-width: 230px; box-shadow: 0px 0px 5px var(--shadow); border-radius: 10px; border: 1px solid var(--bg_line); overflow: hidden; z-index: 1;}

#alert{width: 100%; height: 0px; position: fixed; top: 0px; left: 0px; z-index: 100;}
#alert > div{width: 90%; max-width: 450px; transition: 0.2s; box-shadow: 0 0 6px 0 rgba(161, 161, 161, 0.5); position: relative; top: -100px; border-radius: 20px;}
#alert > div > div{padding: 9px 15px 11px 15px; text-align: center; color: var(--text_white);}
#alert > div.success{background: var(--bg_alert_green);}
#alert > div.warning{background: var(--bg_alert_orange);}
#alert > div.failed{background: var(--bg_alert_red);}

.alert_email{padding: 10px 25px 13px 25px; margin: 15px; border-radius: 10px; background: var(--bg_alert_red_calm);}
.alert_email .aeHead{display: grid; grid-template-columns: 20px 1fr; grid-gap: 15px; align-items: center; padding: 5px 0px;}
.alert_email .aeHead > div{width: 100%;}
.alert_email .aeHead > div:first-child > div{width: 20px; height: 20px;}
.alert_email .aeBody{margin-top: 5px;}

.verify_icon > span{display: inline-flex;}
.verify_icon > span > i{background-image: url('../../../images/icon/all/verify.png'); background-size: 100%; transition:all 0.2s ease; cursor: pointer;}
.verify_icon.mini > span > i{width: 10px; height: 10px; margin-left: 2px;}
.verify_icon.medium > span > i{width: 12px; height: 12px;}
.verify_icon.medium:hover > span > i{transform: rotate(360deg);}

.premium_icon{position: relative; padding-left: 19px;}
.premium_icon.pi_big{padding-left: 25px;}
.premium_icon:before{content: ''; top: 3px; left: 0px; position: absolute; width: 13px; height: 13px; background-image: url('../../../images/icon/all/premium_content.png'); background-size: 100%; background-repeat: no-repeat;}
.premium_icon.pi_big:before{width: 17px; height: 17px;}

.emoticon{position: relative; cursor: pointer;}
.emoticon > .emt{position: fixed; width: 100%; z-index: 55; overflow: hidden; background: var(--bg_white); box-shadow: 0px 0px 10px var(--bg_silver); bottom: 0px; right: 0px;}
.emoticon.emt_left > .emt{left: 0px; right: unset;}
.emoticon > .emt > div:first-child{width: 100%; white-space: nowrap; font-size: 0px; background: var(--bg_silvercalm); overflow: auto;}
.emoticon > .emt > div:first-child > div{display: inline-block; height: 50px; width: 50px; cursor: pointer; position: relative;}
.emoticon > .emt > div:first-child > div > div:before{content: ''; transition: all 0.2s ease; bottom: 0px; left: 0px; position: absolute; height: 2px; background: var(--bg_blue); opacity: 0; width: 100%;}
.emoticon > .emt > div:first-child > div:hover:not(.active) > div:before{opacity: 1; background: var(--bg_silver);}
.emoticon > .emt > div:first-child > div.active > div:before{opacity: 1;}
.emoticon > .emt > div:first-child > div > div{width: 25px; height: 26px; background-size: cover; margin-top: 10px;}
.emoticon > .emt > div:last-child{height: 180px; overflow: auto; display: grid; grid-template-columns: auto auto auto auto auto;}
.emoticon > .emt > div:last-child > div.loadingEmoticon{padding-top: 90px; color: var(--text_silver);}
.emoticon > .emt > div:last-child > div:not(.loadingEmoticon){width: 100%; height: 44px; transition: all 0.2s ease; cursor: pointer;}
.emoticon > .emt > div:last-child > div:not(.loadingEmoticon):hover{box-shadow: inset 0px 0px 0px 1px var(--bg_blue);}
.emoticon > .emt > div:last-child > div:not(.loadingEmoticon) > div{width: 30px; height: 31px; background-size: cover; margin-top: 6.5px;}

.stickerBox .sbMenu{white-space: nowrap; overflow: auto;}
.stickerBox .sbMenu > div{display: inline-block; cursor: pointer; padding: 2px 5px 10px 5px; position: relative; transition: var(--transition); border-radius: 20px;}
.stickerBox .sbMenu > div:not(:last-child){margin-right: 10px;}
.stickerBox .sbMenu > div:first-child{margin-left: 15px;}
.stickerBox .sbMenu > div:last-child{margin-right: 15px;}
.stickerBox .sbMenu > div:before{content: ''; transition: var(--transition); position: absolute; bottom: 0px; left: 0px; width: 100%; height: 2px; background: var(--bg_blue); opacity: 0;}
.stickerBox .sbMenu > div:hover:not(.active):before{opacity: 1; background: var(--bg_silver);}
.stickerBox .sbMenu > div.active:before{opacity: 1;}
.stickerBox .sbMenu > div > div{width: 25px; height: 25px;}
.stickerBox .sbContent{overflow: auto; height: 40vh;}
.stickerBox .sbContent > div{display: none;}
.stickerBox .sbContent > div.active{display: block;}
.stickerBox .sbContent > div > div{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 15px; padding: 0px 15px 15px 15px;}
.stickerBox .sbContent > div > div > div{width: 100%;}
.stickerBox .sbContent .scItem{padding-bottom: 100%; cursor: pointer; transition: var(--transition);}
.stickerBox .sbContent .scItem:hover{box-shadow: inset 0px 0px 0px 1.5px var(--bg_line); border-radius: 5px;}

.canvas section{}
.canvas section div.distance{padding: 0px 20px;}
.canvas section div.distance.mini{padding: 0px 15px;}
.canvas .cvs_options{padding: 15px 15px 16px 15px; color: var(--text_blue);}
.canvas div.empty{padding: 20px 15px; text-align: center; margin-top: 90px; margin-bottom: 300px; font-size: 15px; color: var(--text_silver);}
.canvas div.empty.mini{margin-top: 50px; margin-bottom: 100px;}
.title{padding: 15px 20px;}
.title.mini{height: auto; padding-bottom: 0px;}
.title > div{display: grid; grid-template-columns: 1fr 100px; align-items: center;}
.title > div > div{width: 100%;}
.title > div > div:first-child{font-size: 17px; font-weight: bold; color: var(--text_black);}
.title > div > div:first-child .tImgFilm{height: 21px; width: 115px; margin: 5px 0px; float: left;}
.title > div > div:nth-child(2){text-align: right; font-weight: bold;}

.statusPremium{padding: 10px 15px; border-radius: 20px; background: var(--bg_silvercalm); color: var(--text_blue); display: grid; grid-template-columns: 1fr 20px; align-items: center; box-sizing: border-box;}
.statusPremium.premium{background: var(--bg_bluesoft); grid-template-columns: 1fr 100px;}
.statusPremium:not(.premium){grid-gap: 10px;}
.statusPremium > div{width: 100%;}
.statusPremium > div:first-child{font-weight: bold; font-size: 13px;}
.statusPremium.premium > div:nth-child(2){text-align: right;}
.statusPremium:not(.premium) > div:nth-child(2) > div{width: 20px; height: 20px;}

.menu_scroll{overflow: auto; white-space: nowrap;}
.menu_scroll::-webkit-scrollbar{display: none;}
.menu_scroll li{display: inline-block; margin-right: 5px;}
.menu_scroll li:first-child{margin-left: 15px;}
.menu_scroll li:last-child{margin-right: 15px;}
.menu_scroll > li > a > div{padding: 5px 10px 6px 10px; color: var(--text_silver); border-radius: 5px;}
.menu_scroll > li > a > div.active{background: var(--text_blue); color: var(--text_white);}
.menu_scroll.sticky{position: sticky; top: -1px; z-index: 15; background: var(--bg_base);}

.list_hashtag{height: 54px; overflow: hidden; position: relative;}
.list_hashtag > div{white-space: nowrap; font-size: 0px; overflow: auto; height: 75px;}
.list_hashtag > div.lh_padding{padding: 0px 15px;}
.list_hashtag > div > a > div{display: inline-block; padding: 5px 15px 6px 15px; border-radius: 20px; background: var(--bg_blue); color: var(--text_white); font-size: 15px; margin: 7.5px 0px; transition: var(--transition);}
.list_hashtag > div > a > div.active{background: var(--bg_blue);}
.list_hashtag > div > a:not(:last-child) > div{margin-right: 15px;}
.list_hashtag > div > a > div:hover{background: var(--bg_silvercalm); box-shadow: inset 0px 0px 0px 1.5px var(--bg_blue); color: var(--text_blue);}

.list_linked{margin-bottom: 25px; margin-top: 15px;}
.list_linked > div:first-child{font-size: 17px; padding-left: 20px; font-weight: bold;}
.list_linked > div:nth-child(2){margin-top: 10px;}
.list_linked > div:nth-child(2) > a > div{padding: 15px 20px 17px 20px; color: var(--text_black);}
.list_linked > div:nth-child(2) > a:not(:last-child) > div{border-bottom: 1px solid var(--bg_line);}
.list_linked > div:nth-child(2) > a > div > div{display: table; table-layout: fixed; width: 100%;}
.list_linked > div:nth-child(2) > a > div > div > div{display: table-cell; vertical-align: middle;}
.list_linked > div:nth-child(2) > a > div > div > div:first-child{width: 60px;}
.list_linked > div:nth-child(2) > a > div > div > div:first-child > div{background-color: var(--bg_silvercalm); border-radius: 5px;}
.list_linked > div:nth-child(2) > a > div > div > div:first-child > div{padding-bottom: 150%;}
.list_linked > div:nth-child(2) > a > div > div > div:nth-child(2){padding-left: 15px;}
.list_linked > div:nth-child(2) > a > div > div > div:nth-child(2) > div:first-child > span{padding: 2px 7px; background: var(--bg_silvercalm); border-radius: 3px; font-size: 11px;}
.list_linked > div:nth-child(2) > a > div > div > div:nth-child(2) > div:nth-child(2){margin-top: 10px; font-family: 'bold';}

.qrcode > div:first-child img{width: 100%;}
.qrcode > div:nth-child(2){text-align: center; padding: 10px 0px 12px 0px;}

.slider{}
.slider > div{position: relative; padding-bottom: 50%; overflow: hidden;}
.slider .sContent > div{position: absolute; top: 0px; left: 0px; width: 100%; padding-bottom: 50%; background-size: cover;}
.slider .sContent > div:not(:first-child){display: none;}
.slider .sOpt{position: absolute; top: 0px; left: 0px; width: 100%; height: 0px;}
.slider .sOpt > div{width: 30%; height: 100%; position: absolute; top: 0px; opacity: 0; transition: all 0.2s ease;}
.slider .sOpt > div:active{opacity: 1;}
.slider .sOpt > div:first-child{left: 0px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.40), transparent);}
.slider .sOpt > div:last-child{right: 0px; background-image: linear-gradient(to left, rgba(0, 0, 0, 0.40), transparent);}
.slider .sOpt > div > div > div > div{width: 25px; height: 25px; position: relative; top: 11px;}
.slider .sBubble{position: absolute; bottom: 20px; left: 0px; right: 0px; z-index: 1;}
.slider .sBubble > div{display: table; table-layout: fixed;}
.slider .sBubble > div > div{display: table-cell;}
.slider .sBubble > div > div > div{width: 10px; height: 10px; cursor: pointer; transition: all 0.2s ease; border-radius: 15px; background: var(--bg_white); border: 1.5px solid var(--bg_blue); margin: 0px 5px;}
.slider .sBubble > div > div > div.active{background: var(--bg_blue);}

.section_title{font-size: 15px; font-weight: bold;}

.page_back{font-size: 17px; font-weight: bold; padding: 20px;}
.page_title{padding: 20px 20px 23px 20px;}
.page_title > div{font-size: 20px; font-weight: bold;}

.page_loading{padding: 35px 0px 20px 0px; text-align: center; font-size: 20px; color: var(--text_silver); position: relative; z-index: 1;}

.page_info{padding: 15px 20px; display: grid; grid-template-columns: 25px 1fr; align-items: center; grid-gap: 15px; transition: var(--transition); box-sizing: border-box; border-radius: 10px;}
.page_info > div{width: 100%;}
.page_info > div:first-child > div{width: 25px; height: 25px; position: relative; z-index: 1;}
.page_info.diMore{overflow: hidden; max-height: 69px; position: relative;}
.page_info.diMore:before{content: ''; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 70%; background-image: linear-gradient(to bottom, transparent, var(--bg_silvercalm));}

.info{padding: 15px 20px 17px 20px; border-radius: 7px;}
.info > div{display: table; width: 100%;}
.info > div > div{display: table-cell; vertical-align: middle;}
.info > div > div:first-child{color: var(--text_white);}
.info > div > div:nth-child(2){padding-left: 15px; width: 0%; text-align: right;}
.info > div > div:nth-child(2) button{padding: 5px 15px; transition: all 0.2s ease; border: 0px; border-radius: 7px; background: var(--bg_white); color: var(--text_black); outline: none; cursor: pointer;}
.info > div > div:nth-child(2) button:hover{opacity: 0.7;}

.tab .tOpt{white-space: nowrap; width: 100%; border-bottom: 1.5px solid var(--bg_line); overflow: auto; -ms-overflow-style: none; scrollbar-width: none;}
.tab .tOpt::-webkit-scrollbar{display: none;}
.tab .tOpt > div{display: inline-block; padding: 10px 15px; font-weight: bold; color: var(--text_silver); position: relative; cursor: pointer;}
.tab .tOpt > div:not(:first-child){margin-left: 25px;}
.tab .tOpt > div.active{color: var(--text_blue);}
.tab .tOpt > div:before{content: ''; transition: var(--transition); opacity: 0; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 2px; background: var(--bg_blue);}
.tab .tOpt > div:hover:before, .tab .tOpt > div.active:before{opacity: 1;}
.tab .tBody > span{display: none;}
.tab .tBody > span.active{display: block;}

.box{padding: 20px 20px 21px 20px;}

.infobalance{padding: 5px 10px 6px 10px; background: var(--bg_silvercalm); border-radius: 5px;}
.infobalance > div{display: table; table-layout: fixed; width: 100%;}
.infobalance > div > div{display: table-cell; vertical-align: middle;}
.infobalance > div > div:first-child{font-size: 15px; width: 100px;}
.infobalance > div > div:last-child{text-align: right; font-family: 'bold';}

.dropdown{position: relative;}
.dropdown .dd_canvas{width: 225px; min-height: 10px; background: var(--bg_white); position: absolute; z-index: 5; right: 0px; box-shadow: 0px 0px 5px silver; list-style-type: none; border-radius: 5px; overflow: hidden; display: none;}
.dropdown .dd_canvas.top{bottom: 130%;}
.dropdown .dd_canvas.bottom{top: 130%;}
.dropdown .dd_canvas li{border-bottom: 0.5px solid #e0e0e0;}
.dropdown .dd_canvas li:last-child{border-bottom: 0px;}
.dropdown .dd_canvas .ddc_content{padding: 10px 15px;}
.dropdown .dd_canvas .ddc_content > div{width: 15px; height: 15px; float: left; margin-right: 10px;}

.curationProcess{padding: 9px 15px 9px 15px; background: var(--bg_yellowcalm); border-radius: 5px;}
.curationProcess > div{display: table; table-layout: fixed; width: 100%;}
.curationProcess > div > div{display: table-cell; vertical-align: middle;}
.curationProcess > div > div:first-child{width: 17px;}
.curationProcess > div > div:first-child > div{height: 17px;}
.curationProcess > div > div:nth-child(2){padding-left: 15px; font-size: 13px}

/**DISCOVER**/
.disc_info_popup{min-height: 100px;}
.disc_info_popup > img{width: 100%;}

.dis_shuffle{position: fixed; bottom: 75px; right: 20px; width: 50px; height: 50px; background: var(--bg_blue); border-radius: 50%; z-index: 45; color: var(--text_white); cursor: pointer; box-shadow: 2px 3px 10px var(--shadow);}
.dis_shuffle > div{width: 25px; height: 25px; margin-top: 12px;}

.dis_shuffle_popup{text-align: center; padding: 10px 15px;}
.dis_shuffle_popup > div:first-child > div{width: 90px; height: 90px;}
.dis_shuffle_popup > div:nth-child(2){margin: 10px 0px;}

.disc_info{padding: 15px 15px 17px 15px; margin-top: 15px; background: var(--bg_white); border: 2px solid var(--bg_green); border-left: 0px; border-right: 0px;}
.disc_info > div{display: grid; grid-template-columns: 100px 1fr; grid-gap: 15px;}
.disc_info > div > div{width: 100%;}
.disc_info .di_banner{height: 100px; background-color: var(--bg_silvercalm); border-radius: 10px;}
.disc_info .di_info > div:first-child{font-size: 17px; font-family: 'bold';}
.disc_info .di_info > div:nth-child(2){margin-top: 5px;}
.disc_info .di_info > div:nth-child(3){margin-top: 15px;}

.dis_mainFeature{white-space: nowrap; overflow: auto; -ms-overflow-style: none; scrollbar-width: none;}
.dis_mainFeature::-webkit-scrollbar{display: none;}
.dis_mainFeature > a{display: inline-block; padding: 10px 0px; width: 75px; text-align: center; margin-right: 15px; vertical-align: top;}
.dis_mainFeature > a:first-child{margin-left: 15px;}
.dis_mainFeature .dmfIcon{width: 60px; height: 60px;}
.dis_mainFeature .dmfTitle{margin-top: 10px; color: var(--text_black); white-space: normal;}

.dis_wallet{padding: 13px 4px 15px 15px; margin: 0px 20px 10px 20px; margin-top: 20px; box-shadow: 0px 0px 10px rgba(112, 144, 176, 0.4); position: relative; z-index: 1; background: var(--bg_white); border-radius: 10px; height: 80px; overflow: hidden;}
.dis_wallet > div{display: grid; grid-template-columns: 1fr 140px 10px 55px; align-items: center;}
.dis_wallet > div > div{width: 100%; height: 100%; position: relative;}
.dis_wallet > div > div:nth-child(4):before{content: ''; left: -4px; top: -13px; width: 1px; height: 100%; position: absolute; background: var(--bg_line); height: 108px;}
.dis_wallet .dwKunci > div:first-child{font-size: 11px; font-weight: bold; color: var(--text_silver);}
.dis_wallet .dwKunci > div:nth-child(2){margin-top: 5px; display: grid; grid-template-columns: 25px 1fr; grid-gap: 10px; align-items: center;}
.dis_wallet .dwKunci > div:nth-child(2) > div{width: 100%;}
.dis_wallet .dwKunci > div:nth-child(2) > div:first-child > div{width: 25px; height: 25px;}
.dis_wallet .dwKunci > div:nth-child(2) > div:nth-child(2){font-size: 20px; font-weight: bold;}
.dis_wallet .dwKunci > div:nth-child(3) > div{display: inline-block; padding: 3px 15px; font-size: 13px; color: var(--text_white); margin-top: 3px; border-radius: 50px; background: var(--bg_blue);}
.dis_wallet .dwOpt{display: grid; grid-template-columns: 1fr 1fr; align-items: center;}
.dis_wallet .dwOpt > div{width: 100%;}
.dis_wallet .dwOpt > div > div:first-child{width: 35px; height: 35px;}
.dis_wallet .dwOpt > div > div:nth-child(2){text-align: center; font-weight: bold; margin-top: 3px; font-size: 11px;}
.dis_wallet .dwCode{position: relative;}
.dis_wallet .dwCode > div{width: 40px; height: 40px; margin-top: 20px;}

.disc_genre{padding-bottom: 30px; margin-top: 20px; background: var(--bg_silvercalm);}

.disc_reading{padding: 20px;}
.disc_reading > div{width: 100%; display: grid; grid-template-columns: 150px 1fr; grid-gap: 25px;}
.disc_reading > div > div{width: 100%;}
.disc_reading > div > div:first-child > div{padding-bottom: 100%; border-radius: 10px; background-color: var(--bg_silvercalm);}
.disc_reading .dbContent{padding-top: 15px;}
.disc_reading .dbContent > div:first-child{font-size: 20px; font-family: 'bold';}
.disc_reading .dbContent > div:nth-child(2){margin-top: 5px;}
.disc_reading .dbContent > div:nth-child(3){margin-top: 15px; color: var(--text_silver);}

.disc_head{margin-bottom: 15px; padding-bottom: 45px; position: relative; background-size: cover;}
.disc_head:before{content: ''; background-image: linear-gradient(to bottom, transparent, var(--bg_white)); position: absolute; bottom: 0px; left: 0px; width: 100%; height: 100%;}
.disc_head > div{position: relative; z-index: 1;}

/**TRENDING**/
.trend_head{padding: 30px 15px 35px 15px; text-align: center; font-size: 15px;}

/**BENEFIT**/
.benefit_head{background: var(--bg_blue); position: relative; border-radius: 0px 0px 25px 25px; overflow: hidden;}
.benefit_head:before{content: ''; width: 100%; height: 50px; background: var(--bg_bluesoft); position: absolute; bottom: 0px; left: 0px;}
.benefit_head section{position: relative; height: 150px;}
.benefit_head .bhDesign > div:first-child{position: absolute; width: 100%; height: 0px; bottom: 54%; left: 0px;}
.benefit_head .bhDesign > div:first-child > div{width: 98px; height: 109px; background-image: url('../../../images/background/premium.png'); background-size: 100%;}
.benefit_head .bhDesign > div:nth-child(2){position: absolute; left: 0px; height: 100%; top: 0px; width: 120px; background-image: url('../../../images/background/premium_side1.png'); background-size: 100%;}
.benefit_head .bhDesign > div:nth-child(3){position: absolute; right: 0px; height: 100%; top: 0px; width: 120px; background-image: url('../../../images/background/premium_side2.png'); background-size: 100%;}
.benefit_head .bhContent{color: var(--text_white); padding-top: 25px; text-align: center; height: 175px; position: relative; z-index: 1;}
.benefit_head .bhContent > div:first-child{font-size: 15px;}
.benefit_head .bhContent > div:nth-child(2){font-size: 25px; font-weight: bold;}

/**N**/
.n_input > div{padding: 10px 15px 11px 15px; font-size: 11px; background: black; color: var(--text_white); display: none;}
.n_input > input:focus ~ div{display: block;}

.n_opt{margin-bottom: 15px;}
.n_opt > div{display: inline-block; padding: 0px 20px 8px 20px; position: relative; font-weight: bold; cursor: pointer;}
.n_opt > div.active{color: var(--text_blue);}
.n_opt > div.active:before{content: ''; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 2px; background: var(--bg_blue);}
.n_opt > div:hover{color: var(--text_blue);}
.n_opt > div > span{padding: 2px 10px 3px 10px; border: 1.5px solid var(--bg_blue); border-radius: 50px;}

/**DASHBOARD**/
.dash_boost{overflow: auto; white-space: nowrap;}
.dash_boost::-webkit-scrollbar{display: none;}
.dash_boost > div{width: 50px; height: 50px; border-radius: 50%; display: inline-block; margin: 0px 5px;}
.dash_boost > div:first-child{margin-left: 15px;}
.dash_boost > div:first-child:active{background: var(--bg_silver);}
.dash_boost > div:first-child > div{width: 25px; height: 25px; margin-top: 12px;}
.dash_boost > div:last-child{margin-right: 15px;}
.dash_boost .db_bubble{width: 50px; height: 50px; border-radius: 50%;}
.dash_warning{margin: 70px 0px 100px 0px; padding: 15px 20px 16px 20px; border-radius: 10px; background: #ffe3ba;}
.dash_warning > div:first-child{font-family: 'bold'; font-size: 15px;}
.dash_warning > div:nth-child(2){margin-top: 5px;}
.dash_intro{width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 100; background: var(--bg_blue); color: var(--text_white);}
.dash_intro > div:first-child{padding: 15px 0px; position: absolute; bottom: 0px; left: 0px; text-align: center; width: 100%; cursor: pointer; background: rgba(0, 0, 0, 0.25); font-size: 15px;}
.dash_intro > div:last-child{width: 100%; height: 85%; display: table; table-layout: fixed;}
.dash_intro > div:last-child > div{display: table-cell; vertical-align: middle;}
.dash_intro .di_bigtext{font-size: 40px; text-align: center; font-family: 'bold';}
.dash_intro .di_mediumtext{font-size: 20px; text-align: center; font-family: 'bold';}
.dash_intro .di_info{max-width: 400px; width: 80%;}
.dash_intro .di_info > div:first-child{font-size: 25px; font-family: 'bold';}
.dash_intro .di_info > div:last-child{margin-top: 10px; font-size: 17px;}

/**NOTIFICATION**/
.notif_canvas{min-height: 500px;}
.notif_follow{}
.notif_follow > div{padding: 15px 20px; border-bottom: 0.5px solid var(--bg_line);}
.notif_follow > div:last-child{border-bottom: 0px;}
.notif_follow > div > div{display: table; width: 100%; table-layout: fixed;}
.notif_follow > div > div > div{display: table-cell; vertical-align: middle;}
.notif_follow > div > div > div:first-child{width: 30px; vertical-align: top;}
.notif_follow > div > div > div:nth-child(2){padding-left: 15px;}
.notif_follow > div > div > div:nth-child(2) > div:nth-child(2){color: var(--text_silver); margin-top: 3px;}
.notif_follow .nl_photo{width: 30px; height: 30px; border-radius: 50%;}

.notif_visitor > a > div{padding: 15px 20px; border-bottom: 0.5px solid var(--bg_line);}
.notif_visitor > a:last-child > div{border-bottom: 0px;}
.notif_visitor > a > div > div{display: table; width: 100%; table-layout: fixed;}
.notif_visitor > a > div > div > div{display: table-cell; vertical-align: middle;}
.notif_visitor > a > div > div > div:first-child{width: 30px;}
.notif_visitor > a > div > div > div:first-child > div{height: 30px; background-color: var(--bg_silver); border-radius: 50%;}
.notif_visitor > a > div > div > div:nth-child(2){padding-left: 15px;}
.notif_visitor > a > div > div > div:nth-child(2) > div:first-child{font-family: 'bold';}
.notif_visitor > a > div > div > div:nth-child(2) > div:nth-child(2){font-size: 11px; color: var(--text_silver); margin-top: 3px;}

/**MESSAGES**/
.mesHeadSpace{height: 60px;}
.mesBoxSpace{height: 76px;}

.mes_layout{display: grid; grid-template-rows: min-content 1fr min-content; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;}
.mes_layout > div{width: 100%; height: 100%;}
.mes_layout > div:nth-child(2){overflow: auto;}

.mes_head{box-shadow: 0px 0px 5px var(--shadow); padding: 10px 15px; align-items: center; grid-gap: 15px; box-sizing: border-box; display: grid; grid-template-columns: 25px 1fr min-content;}
.mes_head > div{width: 100%;}
.mes_head > div:first-child .icon{width: 25px; height: 25px;}
.mes_head > div > a{vertical-align: middle;}
.mes_head .mhUser{display: grid; grid-template-columns: 35px 1fr; grid-gap: 10px;}
.mes_head .mhUser > div{width: 100%;}
.mes_head .mhUser > div:first-child > div{width: 35px; height: 35px; background-color: var(--bg_silvercalm); border-radius: 50%;}
.mes_head .mhUser > div:nth-child(2) > div:first-child{font-weight: bold; color: var(--text_black); display: grid; width: 100%;}
.mes_head .mhUser > div:nth-child(2) > div:nth-child(2){font-size: 11px; color: var(--text_silver); margin-top: 1px;}
.mes_head .mhOpt{white-space: nowrap;}
.mes_head .mhOpt > div{width: 20px; height: 30px; cursor: pointer;}
.mes_head .mhOpt > div > div{width: 20px; height: 20px; position: relative; top: 5px;}

.mes_box{padding: 15px; box-shadow: 0px 0px 5px var(--shadow); box-sizing: border-box;}
.mes_box.setEmot{bottom: 228px;}
.mes_box > div{border: 1px solid var(--bg_silver);}
.mes_box > div > div{display: table; width: 100%; table-layout: fixed;}
.mes_box > div > div > div{display: table-cell;}
.mes_box .mb_content > textarea{min-height: 36px; padding: 9px 11px 9px 12px; border: none; font-size: 14px; border-radius: 0px; width: 100%;}
.mes_box .mb_options{vertical-align: bottom; width: 100px;}
.mes_box .mb_options > div{display: grid; grid-template-columns: 1fr 1fr 1fr;}
.mes_box .mb_options > div > div{width: 100%; margin-bottom: 13px;}
.mes_box .mb_options > div > div > div{width: 18px; height: 18px; margin-top: 2px;}
.mes_box .mb_send{vertical-align: bottom; width: 55px;}
.mes_box .mb_send > div{padding: 11px 0px 12px 0px; text-align: center;}

.mes_group_list{height: 45vh; overflow: auto;}
.mes_empty{padding: 35px; text-align: center; display: none;}
.mes_empty > div:first-child{font-family: 'bold';}
.mes_empty > div:nth-child(2){margin-top: 3px; color: var(--text_silver);}

/**POST**/
.post_content{padding: 20px;}
.post_content img{display: unset;}
.post_video > div:first-child > div{position: relative; height: 0; overflow: hidden; padding-bottom: 56.25%;}
.post_video > div:first-child > div iframe[width][height]{position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;}
.post_video > div:nth-child(2){padding: 15px 30px 0px 30px; font-size: 17px; font-family: 'bold';}
.post_video > div:last-child{padding: 10px 30px 15px 30px}
.post_photo{min-height: 100px; display: block; margin: 0 auto;}
.post_photo img{max-width: 100%;}
.post_article > div:first-child{padding: 25px 15px; text-align: center;}
.post_article > div:first-child > h1{font-size: 25px;}
.post_article > div:nth-child(2){min-height: 200px;}
.post_article > div:nth-child(2) > img{width: 100%;}
.post_article > div:nth-child(3){padding: 20px;}
.post_article > div:nth-child(4){padding: 0px 20px 20px 20px;}
.post_listicle .pl_main > div:first-child{padding: 25px 15px; text-align: center;}
.post_listicle .pl_main > div:first-child > h1{font-size: 25px;}
.post_listicle .pl_main > div:nth-child(2){min-height: 200px;}
.post_listicle .pl_main > div:nth-child(2) > img{width: 100%;}
.post_listicle .pl_main > div:nth-child(3){padding: 15px 20px 0px 20px;}
.post_listicle .pl_main > div:nth-child(4){padding: 20px 40px; margin: 15px 0px 0px 0px; list-style-type: none;}
.post_listicle .pl_main > div:nth-child(4) > div{margin-bottom: 3px;}
.post_listicle .pl_main > div:nth-child(4) > li{padding: 4px 0px;}
.post_listicle .pl_main > div:nth-child(5){padding: 15px 20px 0px 20px;}
.post_listicle .pl_main > div:nth-child(6){padding: 0px 20px 20px 20px;}
.post_listicle .pl_content > div:first-child{padding: 15px 20px 20px 20px;}
.post_listicle .pl_content > div:nth-child(2) img{width: 100%;}
.post_listicle .pl_content > div:nth-child(2) div{padding: 5px 20px 0px 20px;}
.post_listicle .pl_content > div:last-child{padding: 15px 20px 20px 20px;}
.post_sharework{padding: 10px; border: 1px solid var(--bg_line); border-radius: 5px;}
.post_sharework .psBody{display: grid; grid-template-columns: 65px 1fr; grid-gap: 15px;}
.post_sharework .psBody > div{width: 100%;}
.post_sharework .psBody > div:first-child > div{padding-bottom: 150%; border-radius: 5px; background-color: var(--bg_silvercalm);}
.post_sharework .psBody > div:nth-child(2){padding-top: 5px;}
.post_sharework .psBody > div:nth-child(2) > div:first-child > span{font-size: 9px; color: var(--text_white); padding: 2px 5px; border-radius: 3px;}
.post_sharework .psBody > div:nth-child(2) > div:nth-child(2){margin-top: 3px; font-size: 15px; font-weight: bold;}
.post_sharework .psBody > div:nth-child(2) > div:nth-child(3){font-size: 11px; color: var(--text_silver);}
.post_poetry{padding: 20px 20px 25px 20px;}
.post_poetry > div:first-child{font-size: 20px; font-family: 'bold';}
.post_poetry > div:nth-child(2){margin-top: 10px; font-size: 17px;}
.post_slider{min-height: 100px; background: var(--bg_black); position: relative;}
.post_slider > div:first-child{width: 100%;}
.post_slider > div:first-child > div{white-space: nowrap;}
.post_slider > div:first-child > div > div{display: none; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;}
.post_slider > div:first-child > div > div.show{display: inline-block; vertical-align: middle;}
.post_slider > div:first-child > div > div > div{display: table; table-layout: fixed; width: 100%; height: 100%;}
.post_slider > div:first-child > div > div > div > div{display: table-cell; vertical-align: middle; text-align: center;}
.post_slider > div:first-child > div > div > div > div > img{max-width: 100%; max-height: 100%;}
.post_slider > div:nth-child(2){width: 100%; height: 100%; position: absolute; top: 0px; z-index: 5; touch-action: pan-y;}
.post_slider > div:nth-child(3){position: absolute; top: 15px; right: 15px; background: var(--bg_blue); color: var(--text_white); padding: 5px 10px; font-size: 11px; border-radius: 4px;}

/**COMMENT**/
.commentLayout{min-height: 400px;}
.commentLayout .clLogin{padding: 10px 15px; border-radius: 10px; background: var(--bg_silvercalm);}
.commentLayout .clTitle{font-size: 17px; font-weight: bold; margin: 20px 0px 10px 0px;}
.commentLayout .clContent{}

.commentInputFloating{position: fixed; width: 100%; bottom: 0px; left: 0px; z-index: 25;}
.commentInputFloating .commentbox{border-radius: 0px; border-top: 1px solid var(--bg_silver);}

.commentbox{background: var(--bg_silvercalm); border: 1px solid var(--bg_line); border-radius: 15px; padding: 10px 15px; display: grid; grid-template-columns: 20px 1fr min-content; align-items: end; grid-gap: 15px;}
.commentbox > div{width: 100%;}
.commentbox .cbEmot > div{width: 20px; height: 20px; margin-bottom: 8px;}
.commentbox .cbInput > div{font-size: 17px; outline: none; margin-bottom: 6px;}
.commentbox .cbOpt{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; align-items: center;}
.commentbox .cbOpt > div{width: 100%;}
.commentbox .cbOpt .cbBtnMini{width: 20px; height: 20px;}

/**MISSION**/
.mis_detail{margin-bottom: 25px; margin-top: 15px;}
.mis_detail > div{display: table; table-layout: fixed; width: 100%;}
.mis_detail > div > div{display: table-cell; vertical-align: top; text-align: center; border-right: 1px solid var(--bg_silvercalm);}
.mis_detail > div > div:last-child{border: none;}
.mis_detail > div > div > div:first-child{color: var(--text_silver);}
.mis_detail > div > div > div:nth-child(2){padding-top: 5px; font-size: 17px; font-family: 'bold';}
.mis_header > div:first-child{padding: 0px 15px; margin-bottom: 20px;}
.mis_header > div:first-child > div{display: table; table-layout: fixed; width: 100%;}
.mis_header > div:first-child > div > div{display: table-cell; vertical-align: top;}
.mis_header > div:first-child > div > div:first-child{width: 100px;}
.mis_header > div:first-child > div > div:first-child > div{height: 100px; background-color: var(--bg_silvercalm); border-radius: 5px;}
.mis_header > div:first-child > div > div:nth-child(2){padding-left: 20px;}
.mis_header > div:first-child > div > div:nth-child(2) > div:first-child{font-size: 20px; font-family: 'bold';}
.mis_header > div:first-child > div > div:nth-child(2) > div:nth-child(2){margin-top: 5px;}
.mis_header > div:first-child > div > div:nth-child(2) > div:nth-child(3){margin-top: 15px;}
.mis_header > div:nth-child(2){display: table; table-layout: fixed; width: 100%;}
.mis_header > div:nth-child(2) > div{display: table-cell; vertical-align: top; text-align: center;}
.mis_header > div:nth-child(2) > div > div:first-child{width: 25px; height: 25px;}
.mis_header > div:nth-child(2) > div > div:nth-child(2){margin-top: 7px; color: var(--text_silver);}
.mis_header > div:nth-child(2) > div > div:nth-child(3){margin-top: 10px; font-family: 'bold'; font-size: 15px;}

/**WALLET**/
.wallet_box{padding: 25px; background-color: var(--bg_blue); background-size: cover; background-image: url('../../../images/background/wallet_background.png'); border-radius: 10px; color: var(--text_white);}
.wallet_box .wbHead{display: grid; grid-template-columns: 1fr max-content; grid-gap: 10px; align-items: center;}
.wallet_box .wbHead > div{width: 100%;}
.wallet_box .wbHead > div:first-child > span:first-child{font-size: 40px; margin-right: 10px; font-family: 'bold';}
.wallet_box .wbHead > div:first-child > span:nth-child(2){font-size: 20px; font-weight: bold;}

.wallet_premium_status{overflow: hidden; border-radius: 10px; background: var(--bg_blue); border: 1px solid var(--bg_blue);}
.wallet_premium_status .wpsHead{background: var(--bg_white); border-radius: 0px 0px 10px 10px; padding: 10px 15px;}
.wallet_premium_status .wpsHead.active{background: var(--bg_bluesoft);}
.wallet_premium_status .wpsHead > div:first-child{font-weight: bold; font-size: 15px;}
.wallet_premium_status .wpsHead > div:nth-child(2) b{color: var(--text_blue);}
.wallet_premium_status .wpsBtn .wbItem{padding: 10px 15px; box-sizing: border-box; display: grid; grid-template-columns: 1fr 15px; align-items: center; color: var(--text_white);}
.wallet_premium_status .wpsBtn .wbItem > div{width: 100%;}
.wallet_premium_status .wpsBtn .wbItem > div:nth-child(2) > div{width: 15px; height: 15px;}

.wallet_premium_subs_space{height: 60px;}
.wallet_premium_subs{position: fixed; bottom: 58px; left: 0px; width: 100%; background: var(--bg_white);}
.wallet_premium_subs > div{padding: 15px 10px;}

.wallet_premium_report > div{display: grid; padding: 5px 0px; grid-template-columns: 1fr min-content; grid-gap: 15px; align-items: center;}
.wallet_premium_report > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.wallet_premium_report > div > div{width: 100%; padding: 10px 0px;}
.wallet_premium_report > div > div:nth-child(2){font-weight: bold; color: var(--text_blue); white-space: nowrap;}

/**CART**/
.cart_layout{}
.cart_layout > div:nth-child(2){margin: 15px; border-radius: 10px; background: var(--bg_bluecalm); box-shadow: 0px 0px 10px var(--shadow);}

.cart_head{padding: 10px 15px; border-radius: 5px; background: var(--bg_bluecalm); display: grid; grid-template-columns: 20px 1fr; grid-gap: 10px; box-sizing: border-box; align-items: center; position: relative;}
.cart_head:before{content: ''; position: absolute; right: 0px; top: 0px; width: 35px; height: 45px; background-size: 100%; background-image: url('../../../images/background/cart_trolley.png');}
.cart_head > div{width: 100%; position: relative; z-index: 1;}
.cart_head input{transform: scale(1.5); cursor: pointer;}
.cart_head > div:nth-child(2) > div:first-child{font-family: 'bold';}

.cart_summary{margin-top: 20px; padding: 15px; border: 1px solid var(--bg_line); border-radius: 5px;}
.cart_summary > div:first-child{font-size: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--bg_line);}
.cart_summary .csContent .ccList{margin-top: 15px; border-bottom: 1px solid var(--bg_line); padding-bottom: 15px;}
.cart_summary .csContent .ccList > div{display: grid; grid-template-columns: 1fr 100px; grid-gap: 15px;}
.cart_summary .csContent .ccList > div:not(:last-child){margin-bottom: 10px;}
.cart_summary .csContent .ccList > div > div{width: 100%;}
.cart_summary .csContent .ccList > div > div:nth-child(2){text-align: right; font-family: 'bold';}
.cart_summary .csContent .ccTotal{margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;}
.cart_summary .csContent .ccTotal > div{width: 100%;}
.cart_summary .csContent .ccTotal > div:first-child > div:first-child{font-family: 'bold';}
.cart_summary .csContent .ccTotal > div:first-child > div:nth-child(2){margin-top: 3px; color: var(--text_silver);}
.cart_summary .csContent .ccTotal > div:nth-child(2){font-family: 'bold'; text-align: right; font-size: 17px;}
.cart_summary .csButton{margin-top: 15px;}
.cart_summary .csButton button{width: 100%; font-size: 17px; padding: 13px 0px;}

/**OTHERS**/
.ot_download{margin: 15px 0px;}
.ot_download > a > div{background-size: 100%;}
.ot_download > a > div.playtstore{padding-bottom: 30%; background-image: url('../../../images/download_playstore.png');}
.ot_download > a > div.appstore{padding-bottom: 34%; background-image: url('../../../images/download_appstore.png');}
.ot_download > a:not(:last-child) > div{margin-bottom: 10px;}
.ot_selected > div{display: table; table-layout: fixed; width: 100%; text-align: center;}
.ot_selected > div > a{display: table-cell; vertical-align: middle; padding: 15px 0px;}
.ot_selected > div > a:not(:last-child) > div{border-right: 1.5px solid var(--bg_line);}
.ot_selected > div > a > div > div:last-child{margin-top: 7px; color: var(--text_black);}
.ot_selected .os_icon{width: 20px; height: 20px;}
.ot_selected .os_topup > div{display: table;}
.ot_selected .os_topup > div > div{display: table-cell; vertical-align: middle;}
.ot_selected .os_topup > div > div:first-child{width: 25px;}
.ot_selected .os_topup > div > div:first-child > div{width: 20px; height: 20px;}
.ot_selected .os_topup > div > div:last-child{padding-left: 5px; font-size: 17px; font-family: 'bold';}
.ot_topusers{background: var(--bg_white);}
.ot_topusers > div:first-child{padding: 15px; font-family: 'bold';}
.ot_topusers > div:nth-child(2){height: 150px; overflow: hidden;}
.ot_topusers > div:last-child{padding: 15px 0px; text-align: center; border-top: 1px solid var(--bg_line);}

/**QR SCANNER**/
.qrScanner_layout{max-width: 500px; width: 100%; margin-bottom: 25px;}
.qrScanner_layout > div{display: none;}
.qrScanner_layout > div.active{display: block;}
.qrScanner_layout > div:nth-child(2){margin-top: 15px;}
.qrScanner_layout > div:nth-child(2) > div{width: 250px; height: 250px;}

/**SEARCH**/
.search_input{padding: 20px 15px 21px 15px; background: var(--bg_white);}
.search_input > div{border: 1px solid var(--bg_silver); border-radius: 5px;}
.search_input > div > div{display: table; table-layout: fixed; width: 100%;}
.search_input > div > div > div{display: table-cell; vertical-align: top;}
.search_input > div > div > div:first-child > input{width: 100%; padding: 7px 10px 8px 10px; font-size: 15px; border: 0px;}
.search_input > div > div > div:last-child{width: 30px;}
.search_input > div > div > div:last-child > div{width: 15px; height: 15px; margin-top: 8px;}
.s_search_list{max-width: 450px;}
.s_search_list > div{}
.s_search_list > div:not(:last-child){margin-bottom: 15px; border-bottom: 1px solid var(--bg_silver); padding-bottom: 15px;}
.s_search_list > div > div:first-child{font-size: 15px; font-weight: bold;}
.s_search_list > div > div:nth-child(2){margin-top: 5px; margin-bottom: 10px;}
.s_search_list .ssl_tags{white-space: no-wrap;}
.s_search_list .ssl_tags > a{display: inline-block;}
.s_search_list .ssl_tags > a > div{padding: 4px 8px 5px 8px; border-radius: 5px; background: var(--bg_blue); margin: 5px 3px; color: var(--text_white); transition: var(--transition); max-width: 300px;}
.s_search_list .ssl_tags > a > div:hover{color: var(--text_blue); background: var(--bg_silvercalm); box-shadow: inset 0px 0px 0px 1.5px var(--bg_blue);}
.s_search_list .ssl_users{}
.s_search_list .ssl_users > a > div{padding: 10px 0px;}
.s_search_list .ssl_users > a:not(:last-child) > div{border-bottom: 1px solid var(--bg_silvercalm);}
.s_search_list .ssl_users > a > div > div{display: table; table-layout: fixed; width: 100%;}
.s_search_list .ssl_users > a > div > div > div{display: table-cell; vertical-align: middle;}
.s_search_list .ssl_users > a > div > div > div:first-child{width: 35px;}
.s_search_list .ssl_users > a > div > div > div:first-child > div{height: 35px; background-color: var(--bg_silvercalm); border-radius: 50%;}
.s_search_list .ssl_users > a > div > div > div:nth-child(2){padding-left: 10px;}
.s_search_list .ssl_users > a > div > div > div:nth-child(2) > div:first-child{font-weight: bold;}
.s_search_list .ssl_users > a > div > div > div:nth-child(2) > div:nth-child(2){margin-top: 3px; color: var(--text_silver); font-size: 11px;}
.s_search_list .ssl_work{}
.s_search_list .ssl_work > a > div{padding: 10px 0px;}
.s_search_list .ssl_work > a:not(:last-child) > div{border-bottom: 1px solid var(--bg_silvercalm);}
.s_search_list .ssl_work > a > div > div{display: table; table-layout: fixed; width: 100%;}
.s_search_list .ssl_work > a > div > div > div{display: table-cell; vertical-align: middle;}
.s_search_list .ssl_work > a > div > div > div:first-child{width: 35px;}
.s_search_list .ssl_work > a > div > div > div:first-child > div{padding-bottom: 150%; background-color: var(--bg_silvercalm); border-radius: 5px;}
.s_search_list .ssl_work > a > div > div > div:nth-child(2){padding-left: 10px;}
.s_search_list .ssl_work > a > div > div > div:nth-child(2) > div:first-child{font-weight: bold;}
.s_search_list .ssl_work > a > div > div > div:nth-child(2) > div:nth-child(2){margin-top: 3px; color: var(--text_silver); font-size: 11px;}
.s_search_list .ssl_articles{}
.s_search_list .ssl_articles > a > div{padding: 10px 0px;}
.s_search_list .ssl_articles > a:not(:last-child) > div{border-bottom: 1px solid var(--bg_silvercalm);}
.s_search_list .ssl_articles > a > div > div{display: table; table-layout: fixed; width: 100%;}
.s_search_list .ssl_articles > a > div > div > div{display: table-cell; vertical-align: middle;}
.s_search_list .ssl_articles > a > div > div > div:first-child{width: 65px;}
.s_search_list .ssl_articles > a > div > div > div:first-child > div{padding-bottom: 75%; background-color: var(--bg_silvercalm); border-radius: 5px;}
.s_search_list .ssl_articles > a > div > div > div:nth-child(2){padding-left: 10px; font-weight: bold;}

/**MORE**/
.m_banner{padding-bottom: 29.2%; background-color: var(--bg_silvercalm);}
.m_about > div:first-child{padding-bottom: 25%; background-size: cover; background-color: var(--bg_silvercalm);}
.m_about > div:last-child{padding: 20px;}
.m_about > div:last-child > div:first-child{font-size: 11px; letter-spacing: 7px; margin-bottom: 5px;}
.m_about > div:last-child > div:nth-child(2){font-size: 25px; font-family: 'bold';}
.m_about > div:last-child > div:nth-child(3){margin-top: 10px; color: var(--text_silver);}
.m_about_bottom{display: table; width: 100%; table-layout: fixed;}
.m_about_bottom > div{display: table-cell;}
.m_about_bottom > div > div{padding-bottom: 100%;}
.m_faq > div{padding: 13px 0px;}
.m_faq > div:first-child{padding-top: 0px;}
.m_faq > div > div:first-child{font-family: bold; font-size: 15px; cursor: pointer;}
.m_faq > div > div:last-child{color: var(--text_silver); padding: 15px 0px 15px 25px; display: none;}
.m_contact{display: table; width: 100%; table-layout: fixed;}
.m_contact > div{display: table-cell; padding: 7.5px 0px; vertical-align: middle;}
.m_contact > div:first-child{width: 20px;}
.m_contact > div:first-child > div{height: 20px;}
.m_contact > div:last-child{padding-left: 10px;}

/**COMPETITION**/
.compBanner > div:first-child{padding-bottom: 40%; background-color: #f0f3ff; background-size: cover; background-image: url('../../../images/background/competition.png');}
.compBanner > div:nth-child(2){margin-top: 15px; padding: 0px 25px 20px 25px;}
.compBanner > div:nth-child(2) > div:first-child{font-size: 17px; text-align: center;}
.compBanner > div:nth-child(2) > div:nth-child(2){margin-top: 10px;}
.compBanner > div:nth-child(2) > div:nth-child(2) button{width: 100%;}

.compHead{display: grid; grid-template-columns: 280px 1fr; grid-gap: 15px; padding: 15px; box-sizing: border-box;}
.compHead > div{width: 100%;}
.compHead > div:first-child > div{padding-bottom: 60%; background-color: var(--bg_silvercalm); border-radius: 10px; position: relative;}
.compHead > div:first-child > div > div{position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 50px; background: red; font-size: 9px; color: var(--text_white);}
.compHead > div:first-child > div > div.coming{background: var(--bg_blue);}
.compHead > div:first-child > div > div.ongoing{background: var(--bg_green);}
.compHead > div:first-child > div > div.finish{background: var(--bg_silver);}
.compHead .chTitle{font-size: 17px; font-family: 'bold';}
.compHead .chDate{display: grid; grid-template-columns: 15px 1fr; grid-gap: 7px; align-items: center; margin: 3px 0px 5px 0px;}
.compHead .chDate > div{width: 100%; font-size: 12px; color: var(--text_silver);}
.compHead .chDate > div:first-child > div{width: 15px; height: 15px;}
.compHead .chInfo{color: var(--text_silver); margin-top: 15px;}
.compHead .chBtn{margin-top: 15px;}

.compWinners > div{margin-top: 25px;}
.compWinners > div > div:first-child{margin-bottom: 15px; padding: 0px 15px;}
.compWinners > div > div:first-child > div:first-child{font-weight: bold; font-size: 17px;}
.compWinners > div > div:first-child > div:nth-child(2){margin-top: 5px; color: var(--text_orange); position: relative; padding: 7px 10px 8px 15px; background: var(--bg_silvercalm);}
.compWinners > div > div:first-child > div:nth-child(2):before{content: ''; position: absolute; left: 0px; top: 0px; width: 2px; height: 100%; background: var(--bg_orange);}

.compComing{padding: 10px 15px; margin: 25px 15px 25px 15px; box-sizing: border-box; font-weight: bold; border-radius: 5px; background: var(--bg_silvercalm);}

/**POPUP FULLSCREEN**/
.pf_creatorpage{}
.pf_creatorpage .pcInfo{padding: 15px 20px 20px 20px; background: #4769F5; color: var(--text_white); border-radius: 0px 0px 10px 10px;}
.pf_creatorpage .pcInfo > div{display: table; table-layout: fixed; width: 100%;}
.pf_creatorpage .pcInfo > div > div{display: table-cell; vertical-align: top;}
.pf_creatorpage .pcInfo > div > div:nth-child(2){width: 100px;}
.pf_creatorpage .pcInfo > div > div:nth-child(2) > div{width: 100%; padding-bottom: 75%; background-size: 100%; background-image: url('../../../images/background/author_page.png');}
.pf_creatorpage .pcBody{padding: 20px;}
.pf_creatorpage .pcBody > div{padding: 15px; background: var(--bg_blue); color: var(--text_white); border-radius: 10px;}
.pf_creatorpage .pcBody > div:not(:last-child){margin-bottom: 20px;}
.pf_creatorpage .pcBody .pcbBox{display: grid; grid-template-columns: 35px 1fr; grid-gap: 15px;}
.pf_creatorpage .pcBody .pcbBox > div{width: 100%;}
.pf_creatorpage .pcBody .pcbBox > div:first-child{width: 35px;}
.pf_creatorpage .pcBody .pcbBox > div:first-child > div{height: 35px; background: var(--bg_bluecalm); border-radius: 50%;}
.pf_creatorpage .pcBody .pcbBox > div:first-child > div > div{width: 25px; height: 25px; top: 5px; position: relative;}

/**ERROR & EMPTY**/
.e_404{height: 180px; padding: 30px 0px 35px 0px;}
.e_404 > div:first-child{width: 200px; height: 85px; background-image: url('../../../images/error_404.png');}
.e_404 > div:last-child{font-size: 20px; text-align: center; margin-top: 40px;}
.e_notavail{padding: 30px 20px 30px 20px;}
.e_notavail > div:first-child{width: 85px; height: 85px; background-image: url('../../../images/e_notavail.png');}
.e_notavail > div:nth-child(2){font-size: 20px; font-weight: bold; text-align: center; margin-top: 40px;}
.e_notavail > div:last-child{text-align: center; margin-top: 10px;}

.e_login{display: grid; grid-template-columns: 1fr 250px; grid-gap: 25px; max-width: 600px; margin: 50px auto 60px auto;}
.e_login > div{width: 100%;}
.e_login .elInfo{display: flex; justify-content: center; align-items: center; font-size: 15px; flex-flow: column;}
.e_login .elInfo > div:first-child{width: 75px; height: 97px; margin-bottom: 20px; background-size: cover; background-image: url('../../../images/login.png');}
.e_login .elInfo > div:nth-child(2){padding: 12px 0px 14px 15px; border-left: 3px solid var(--bg_silver); color: var(--text_silver);}
.e_login .elContent{border: 2px solid var(--bg_blue); border-radius: 10px;}
.e_login .elContent > div{padding: 35px 25px; text-align: center;}
.e_login .elContent > div button{width: 100%;}

.e_info{padding: 50px 35px 70px 35px;}
.e_info > div:first-child{font-size: 25px; font-family: 'bold';}
.e_info > div:nth-child(2){margin-top: 15px;}
.e_info > div:nth-child(3){margin-top: 25px;}

.e_premium{padding: 25px; margin: 35px auto 50px auto; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--bg_line); max-width: 500px;}
.e_premium > div:first-child{font-weight: bold; font-size: 17px;}
.e_premium > div:nth-child(2){color: var(--text_silver);}
.e_premium .epFeature{display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 20px;}
.e_premium .epFeature > div{width: 100%; text-align: center;}
.e_premium .epFeature > div > div:first-child{width: 35px; height: 35px;}
.e_premium .epFeature > div > div:nth-child(2){max-width: 90px; font-size: 12px; font-weight: bold; margin-top: 5px;}
.e_premium > div:nth-child(4){margin-top: 25px;}

.empty_body{margin: 25px 20px; text-align: center;}
.empty_body .ebIcon > div{width: 120px; height: 120px;}
.empty_body .ebTitle{font-weight: bold; margin-top: 5px;}
.empty_body .ebContent{margin-top: 15px; color: var(--text_silver);}
.empty_body .ebBtn{margin-top: 15px;}