.headerSpace{height: 65px;}
#header{height: 65px; position: fixed; top: 0px; left: 0px; width: 100%; z-index: 55; background: var(--bg_white); border-bottom: 1.5px solid var(--bg_line);}
#header > div{max-width: 1000px; padding: 0px 15px; z-index: 1; position: relative;}
#header .hBox{display: grid; grid-template-columns: min-content 1fr; grid-gap: 15px; align-items: center;}
#header .hBox > div{width: 100%;}
#header .h_logo{width: 135px; height: 65px; float: left;}
#header .h_logo > div{width: 170px; height: 35px; margin-top: 15px; cursor: pointer;}
#header .h_menu{height: 65px; white-space: nowrap; text-align: right;}
#header .h_menu > a{display: inline-block;}
#header .h_menu > a .hmTxt{padding: 17px 0px 19px 0px; font-weight: bold; color: var(--text_blue); transition: var(--transition);}
#header .h_menu > a .hmTxt > div{width: 100%; position: relative; padding: 5px 25px; box-sizing: border-box; font-size: 17px;}
#header .h_menu > a .hmTxt.active > div{background: var(--bg_bluecalm); border-radius: 50px;}
#header .h_btn > a .hmBtn{padding: 5px 15px; border-radius: 50px; color: var(--text_blue); transition: var(--transition); border: 1px solid var(--bg_blue);}
#header .h_btn .btnHead{text-align: center;}
#header .h_btn .btnHead:hover{background: var(--bg_blue); color: var(--text_white);}
#header .h_btn .btnHead.login{width: 120px;}
#header .h_opt{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px; align-items: center;}
#header .h_opt > div{width: 100%;}
#header .h_opt .hoItem{width: 25px; height: 25px;}
#header .h_opt .hoItem > div{width: 20px; height: 20px; position: relative; top: 2px;}
#header .h_opt .hoItem .hiBubble{width: 10px; height: 10px; border-radius: 50%; background: var(--bg_red); position: absolute; bottom: -3px; right: -3px;}
#header .h_opt .hoPost{display: grid; align-items: center; grid-gap: 15px; grid-template-columns: 15px 1fr; border-radius: 50px; border: 1.5px solid var(--bg_blue); white-space: nowrap; padding: 5px 10px;}
#header .h_opt .hoPost > div{width: 100%;}
#header .h_opt .hoPost > div:first-child > div{width: 15px; height: 15px;}
#header .h_opt .hoMore{cursor: pointer; padding: 5px;}
#header .h_opt .hoMore > div:first-child > div{width: 20px; height: 20px;}
#header .h_opt .hoMore > div:nth-child(2){margin-top: 3px; font-size: 11px; color: var(--text_silver);}

#headerMobile{position: fixed; top: 0px; left: 0px; width: 100%; height: 0px; z-index: 56; display: none;}
#headerMobile > div{width: 40px; height: 40px;position: absolute; text-align: center;}
#headerMobile > div.hmLeft{top: 12px; left: 12px;}
#headerMobile > div > div:first-child{width: 15px; height: 15px; position: relative; top: 6px;}
#headerMobile > div > div:first-child .hmBubble{width: 10px; height: 10px; border-radius: 50%; background: var(--bg_red); position: absolute; bottom: -3px; right: -3px;}
#headerMobile > div > div:nth-child(2){margin-top: 10px; font-size: 11px; font-weight: bold;}

#navbarMobile{position: fixed; bottom: 0px; left: 0px; height: 55px; display: none; grid-template-columns: 1fr 1fr 1fr; width: 100%; z-index: 55; background: var(--bg_blue); border-top: 1px solid rgba(255, 255, 255, 0.3);}
#navbarMobile.nm2{grid-template-columns: 1fr 1fr;}
#navbarMobile > a{width: 100%; position: relative;}
#navbarMobile > a:before{content: ''; opacity: 0; position: absolute; bottom: 3px; width: 50%; height: 2px; left: 25%; background: var(--bg_white);}
#navbarMobile > a.active:before{opacity: 1;}
#navbarMobile .nmItem{position: relative; top: 10px; text-align: center;}
#navbarMobile .nmItem > div:first-child > div{width: 15px; height: 15px;}
#navbarMobile .nmItem > div:nth-child(2){color: var(--text_white); margin-top: 5px; font-weight: bold;}

#footer{padding: 50px; background: var(--bg_black); color: var(--text_white); text-align: center; position: relative; z-index: 1; margin-top: 25px;}
#footer > div{max-width: 600px;}
#footer .fLogo > div{width: 330px;}
#footer .fLogo > div > div{padding-bottom: 15%;}
#footer .fContent{display: grid; grid-template-columns: 130px 1fr; grid-gap: 15px; align-items: center;}
#footer .fContent > div{width: 100%;}
#footer .fContent > div:first-child > div{padding-bottom: 62%;}
#footer .fContent > div:nth-child(2) > div:first-child{font-weight: bold;}
#footer .fCopyright{margin-top: 25px;}

section{max-width: 1000px;}
section .distance{padding: 0px 20px;}
.contentHeight{min-height: calc(100vh - 170px);}
.contentSpace{height: 50px;}

.headTitle{padding: 25px 15px; font-size: 25px; font-family: 'title'; color: var(--text_blue);}
.content{padding: 0px 25px 25px 25px;}
.content_layout{margin-top: 20px; display: flex; min-height: calc(100vh - 290px); flex-wrap: wrap; margin-bottom: 25px;}
.content_layout > div{width: 100%; flex: 1;}
.content_layout > div:first-child{padding-right: 15px;}
.content_layout .clSide{flex: 0 0 350px;}
.content_layout.grant1{display: grid; grid-template-columns: 1fr; max-width: 700px;}
.content_layout.grant1 > div:first-child{display: none;}

.sideReaction > div:first-child{font-weight: bold; font-size: 15px;}
.sideReaction .crContent{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 10px; margin-top: 15px;}
.sideReaction .crContent > div{width: 100%; border: 1px solid var(--bg_silver); border-radius: 10px;}
.sideReaction .crContent .ccItem{text-align: center; padding: 10px 0px;}
.sideReaction .crContent .ccItem > div:first-child > div{width: 25px; height: 25px;}
.sideReaction .crContent .ccItem > div:nth-child(2){margin-top: 5px; font-size: 11px; font-weight: bold;}

#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); border-radius: 5px; overflow: hidden;}

.popup_login{padding: 20px;}
.popup_login > div:first-child{font-size: 17px; font-family: 'bold';}

.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_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 var(--bg_line);}
.popup_list > li:hover{background: var(--bg_silvercalm);}
.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 var(--bg_line);}
.popup_list > a:hover > li{background: var(--bg_silvercalm);}
.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;}

.popupProfile{padding: 10px 0px;}
.popupProfile .ppHead{display: grid; grid-template-columns: 35px 1fr; padding: 0px 15px 10px 15px; grid-gap: 15px; align-items: center;}
.popupProfile .ppHead > div{width: 100%;}
.popupProfile .ppHead > div:first-child > div{width: 35px; height: 35px; background-color: var(--bg_silver); border-radius: 50%;}

.popupReaction .prContent{padding: 20px 10px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 10px; max-height: calc(100vh - 200px); overflow: auto;}
.popupReaction .prContent > div{width: 100%; transition: var(--transition); border-radius: 10px; cursor: pointer;}
.popupReaction .prContent > div:hover{box-shadow: 0px 0px 0px 2px var(--bg_blue);}
.popupReaction .prContent > div > div:first-child{width: 30px;}
.popupReaction .prContent > div > div:first-child > div{padding-bottom: 100%;}
.popupReaction .prContent > div > div:nth-child(2){padding: 3px 5px; text-align: center; font-size: 11px; font-weight: bold;}
.popupReaction .prBtn{padding: 10px 15px 15px 15px;}

.popupReport{padding: 15px 20px; margin: 10px 15px; box-sizing: border-box; cursor: pointer; border-radius: 15px; background: var(--bg_purple); color: var(--text_white); position: relative; display: none;}
.popupReport .erItem > div:first-child{font-size: 15px; font-weight: bold;}
.popupReport .erItem .eiBox{margin-top: 10px; display: grid; grid-template-columns: 15px 1fr; grid-gap: 10px; align-items: center;}
.popupReport .erItem .eiBox > div{width: 100%;}
.popupReport .erItem .eiBox > div:first-child > div{width: 15px; height: 15px;}
.popupReport .erBg{position: absolute; right: 0px; top: 0px; width: 130px; height: 106px; background-position: center; background-size: cover; background-image: url('../../../images/background/explore_komnas_pa.png');}

#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);}

.tab .tOpt{white-space: nowrap; width: 100%; border-bottom: 1.5px solid var(--bg_line);}
.tab .tOpt > div{display: inline-block; padding: 10px 0px; 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_black);}
.tab .tOpt > div:before{content: ''; transition: var(--transition); opacity: 0; position: absolute; bottom: -1.5px; left: 0px; width: 100%; height: 2px; background: var(--bg_black);}
.tab .tOpt > div:hover:before, .tab .tOpt > div.active:before{opacity: 1;}
.tab .tBody > span{display: none;}
.tab .tBody > span.active{display: block;}

.sortMenu{white-space: nowrap; font-size: 0px;}
.sortMenu > div{padding: 5px 13px; display: inline-block; font-size: 17px; cursor: pointer; background: var(--bg_silversoft);}
.sortMenu > div.active{background: var(--bg_blue); color: var(--text_white);}
.sortMenu > div:first-child{border-radius: 10px 0px 0px 10px;}
.sortMenu > div:last-child{border-radius: 0px 10px 10px 0px;}

.tooltip{position: absolute; background-color: #333; color: #fff; padding: 5px 10px; border-radius: 4px; font-size: 12px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); display: none; white-space: nowrap; z-index: 70;}

.pageBack{cursor: pointer; color: var(--text_blue); display: grid; grid-template-columns: 15px 1fr; align-items: center; grid-gap: 10px;}
.pageBack > div{width: 100%;}
.pageBack > div:first-child > div{width: 15px; height: 15px;}

.info{padding: 7px 10px 8px 15px; background: var(--bg_silvercalm); border-left: 2px solid var(--bg_blue);}

.storieOpt{display: none; position: absolute; background-color: var(--bg_silversoft); border-radius: 10px; overflow: hidden; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 15;}
.storieOpt div{color: var(--text_black); padding: 10px 15px; cursor: pointer; transition: var(--transition); text-decoration: none; display: block;}
.storieOpt div:hover{background-color: var(--bg_silver);}

/**AUTH**/
.login_box{padding: 25px; border: 2px solid var(--bg_silvercalm); border-radius: 10px; max-width: 550px; margin-top: 25px; margin-bottom: 35px;}
.login_box > div > div:first-child{font-size: 17px; font-family: 'bold';}

.register_box{text-align: center;}
.register_box > div:first-child{margin-top: 45px; font-size: 17px; margin-bottom: 15px;}

/**EXPLORE**/
.explore_head{}
.explore_head .ehBanner{position: relative;}
.explore_head .ehBanner > div{padding-bottom: 30%; background-size: cover; background-image: url('../../../images/background/explore_header.png?t=1');}
.explore_head .ehInfo{background: var(--bg_blue); color: var(--text_white);}
.explore_head .ehInfo > div{padding: 25px; max-width: 1100px; display: grid; align-items: center; grid-template-columns: 1fr 300px; grid-gap: 15px;}
.explore_head .ehInfo > div > div{width: 100%;}
.explore_head .ehInfo .eiTitle > div:first-child{font-size: 30px; font-family: 'title';}
.explore_head .ehInfo .eiTitle > div:nth-child(2){font-size: 17px; margin-top: 10px;}
.explore_head .ehInfo .eiTitle > div:nth-child(3){font-size: 17px; margin-top: 15px; font-family: 'bold';}
.explore_head .ehInfo .eiVideo{width: 300px;}
.explore_head .ehInfo .eiVideo div{background-color: var(--bg_black); border-radius: 10px; padding-bottom: 56%; background-image: url('../../../images/background/trailer_thumb.jpg');}

.explore_info{padding: 15px 20px; border-radius: 10px; border: 1px solid var(--bg_silver); margin-top: 20px; font-family: 'title'; line-height: 20px;}

.explore_info_post{margin: 25px 0px; font-size: 17px; text-align: center; font-weight: bold;}

.explore_testi{margin-top: 35px;}
.explore_testi > div:first-child{font-family: 'title'; font-size: 17px;}
.explore_testi .etContent{margin-top: 15px;}
.explore_testi .etContent > div:not(:last-child){margin-bottom: 15px;}
.explore_testi .etContent .ecItem{padding: 10px; border-radius: 10px; border: 1px solid var(--bg_line);}
.explore_testi .etContent .ecItem .description p{margin-bottom: 3px;}
.explore_testi .etContent .ecItem .eiUser{font-size: 11px; font-weight: bold; color: var(--text_silver);}

.explore_write{display: none; background: var(--bg_blue); cursor: pointer; border-radius: 50%; box-shadow: 0px 0px 10px var(--bg_silver); width: 55px; height: 55px; position: fixed; bottom: 70px; right: 15px; transition: var(--transition); z-index: 55;}
.explore_write:hover{box-shadow: 0px 0px 0px 3px var(--bg_silver);}
.explore_write > div{width: 23px; height: 23px; position: relative; top: 15px;}

.explore_post .epOpt{white-space: nowrap; font-size: 0px;}
.explore_post .epOpt > div{display: inline-block; padding: 7px 15px 7px 15px; border-radius: 15px 15px 0px 0px; transition: var(--transition); border: 1px solid var(--bg_blue); border-bottom: 0px; font-size: 13px; position: relative;}
.explore_post .epOpt > div.active:before{content: ''; position: absolute; bottom: -4px; left: 0px; width: 100%; height: 5px; background: var(--bg_silversoft);}
.explore_post .epOpt > div.active{background: var(--bg_silversoft);}
.explore_post .epOpt > div:not(.active){border: 1px solid var(--bg_silver); background: var(--bg_silver); color: var(--text_white); cursor: pointer;}
.explore_post .epOpt > div:not(.active):hover{border: 1px solid var(--bg_blue); background: var(--bg_blue);}
.explore_post .epContent{padding: 10px 15px 25px 15px; border-radius: 0px 15px 15px 15px; border: 1px solid var(--bg_blue); background: var(--bg_silversoft);}
.explore_post .epContent textarea{min-height: 180px;}

.explore_close{position: fixed; z-index: 57; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: none;}
.explore_close > div{width: 20px; height: 20px; position: absolute; top: 15px; right: 15px; cursor: pointer;}

.explore_chat{padding: 10px 15px; border-radius: 15px; border: 1px solid var(--bg_blue); margin-top: 25px;}
.explore_chat > div:first-child{font-weight: bold;}
.explore_chat .ecItem{display: grid; margin-top: 15px; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px;}
.explore_chat .ecItem > div{width: 100%; cursor: pointer;}
.explore_chat .ecItem > div > div:first-child{width: 50px;}
.explore_chat .ecItem > div > div:first-child > div{padding-bottom: 100%; border-radius: 50%; background-color: var(--bg_silversoft);}
.explore_chat .ecItem > div > div:nth-child(2){text-align: center; margin-top: 5px; font-size: 11px;}
.explore_chat .ecItem > div > div:nth-child(2) > div:first-child > span{padding: 0px 7px; border-radius: 10px;}
.explore_chat .ecItem > div:hover > div:nth-child(2){color: var(--text_blue);}

.explore_report{padding: 15px 20px; cursor: pointer; border-radius: 15px; background: var(--bg_purple); color: var(--text_white); margin-top: 25px; align-items: center; grid-gap: 15px; position: relative;}
.explore_report .erItem > div:first-child{font-size: 15px; font-weight: bold;}
.explore_report .erItem .eiBox{margin-top: 10px; display: grid; grid-template-columns: 15px 1fr; grid-gap: 10px; align-items: center;}
.explore_report .erItem .eiBox > div{width: 100%;}
.explore_report .erItem .eiBox > div:first-child > div{width: 15px; height: 15px;}
.explore_report .erBg{position: absolute; right: 0px; top: 0px; width: 130px; height: 106px; background-position: center; background-size: cover; background-image: url('../../../images/background/explore_komnas_pa.png');}

/**POST**/
.post_layout{max-width: 600px;}

.post_layout .plChronology{margin-top: 25px; margin-bottom: 15px; border-top: 1.5px solid var(--bg_silversoft); padding-top: 15px;}

/**STORIE**/
.storie_layout{max-width: 600px;}
.storie_layout .slContent{padding: 0px 15px; margin-top: 25px; border-radius: 10px; border: 1px solid var(--bg_line);}

.storie_option{margin-top: 20px;}
.storie_option > div{display: inline-block; transition: var(--transition); border: 1px solid var(--bg_blue); padding: 5px 10px; border-radius: 10px; cursor: pointer;}
.storie_option > div:hover{background: var(--bg_blue); color: var(--text_white);}

.storie_reaction{display: none;}
.storie_reaction > div{margin: 20px 0px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 10px;}
.storie_reaction > div > div{width: 100%; cursor: pointer; border-radius: 10px; transition: var(--transition); padding: 10px 0px;}
.storie_reaction > div > div:hover{box-shadow: 0px 0px 0px 1.5px var(--bg_blue);}
.storie_reaction > div > div > div:first-child{width: 35px;}
.storie_reaction > div > div > div:first-child > div{padding-bottom: 100%;}
.storie_reaction > div > div > div:nth-child(2){margin-top: 3px; text-align: center; font-weight: bold; font-size: 11px;}

.storie_comment{margin-top: 15px;}
.storie_comment .scTitle{font-size: 17px;}
.storie_comment .scBox{margin: 7px 0px;}
.storie_comment .scBtn{margin-top: 15px;}

/**CHAT**/
.chat_layout .clInfo{padding: 10px 15px; background: var(--bg_greenlight); font-size: 11px; border-radius: 10px;}
.chat_layout .clPeople{margin-top: 45px;}
.chat_layout .clPeople > div:first-child{font-weight: bold;}
.chat_layout .clPeople .cpItem{display: grid; margin-top: 15px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 15px;}
.chat_layout .clPeople .cpItem > div{width: 100%; cursor: pointer;}
.chat_layout .clPeople .cpItem > div > div:first-child{width: 50px;}
.chat_layout .clPeople .cpItem > div > div:first-child > div{padding-bottom: 100%; border-radius: 50%; background-color: var(--bg_silversoft);}
.chat_layout .clPeople .cpItem > div > div:nth-child(2){text-align: center; margin-top: 5px; font-size: 11px;}
.chat_layout .clPeople .cpItem > div > div:nth-child(2) > div:first-child > span{padding: 0px 7px; border-radius: 10px;}
.chat_layout .clPeople .cpItem > div:hover > div:nth-child(2){color: var(--text_blue);}

/**ACCOUNT**/
.account_layout{max-width: 500px; margin-top: 25px;}

.accountContent{padding: 15px 0px;}

/**INFO**/
.info_about_layout{text-align: center; max-width: 1000px;}
.info_about_layout .ialDesc{max-width: 600px;}

.info_about_gridimg{display: flex; margin-top: 35px; flex-direction: column; gap: 1.5rem; align-items: center; padding: 1rem;}
.info_about_gridimg .row {display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap;}
.info_about_gridimg .iagItem {width: 250px; text-align: center;}
.info_about_gridimg .iagItem > div { width: 100%; padding-bottom: 60%; background-size: cover; background-position: center; border-radius: 10px;}

.info_about_watch{margin-top: 35px; text-align: center; margin-bottom: 55px;}
.info_about_watch .iawTitle{font-size: 17px; font-weight: bold;}
.info_about_watch .iawTitle img{position: relative; top: 3px; left: 5px;}
.info_about_watch .iawBtn{margin-top: 20px;}
.info_about_watch .iawBtn button{width: 150px;}

/**OTHERS**/
.userStatus-label{display: flex; align-items: center; width: min-content; white-space: nowrap; margin-right: 15px; cursor: pointer;}
.userStatus-label input{display: none;}
.userStatus-icon{width: 20px; height: 20px; margin-right: 5px;}
.userStatus-label input + .userStatus-icon{content: url('../../../images/icon/shield.png'); opacity: 0.3;}
.userStatus-label input + .userStatus-icon + span{color: var(--text_silver);}
.userStatus-label input:checked + .userStatus-icon{content: url('../../../images/icon/shield_anon.png'); opacity: 1;}
.userStatus-label input:checked + .userStatus-icon + span{color: var(--text_black);}

/**ERROR**/
.error_page{max-width: 500px; min-height: calc(100vh - 300px); box-shadow: 0px 0px 0px 2px var(--bg_silversoft); border-radius: 10px; margin-top: 70px; margin-bottom: 100px;}
.error_page > div{padding: 30px 35px 35px 30px; font-size: 17px;}
.error_page > div > div:first-child{font-size: 25px; font-weight: bold;}

.error_login{max-width: 570px; padding: 10px 15px; background: var(--bg_silversoft); border-radius: 10px; margin-top: 80px; margin-bottom: 200px;}
.error_login > div:first-child{font-family: 'bold'; font-size: 15px;}
.error_login > div:nth-child(2){margin-top: 5px;}

.emptyPage{padding: 100px 0px 200px 0px; text-align: center; color: var(--text_silver);}
.emptyPage.mini{padding: 50px 0px 70px 0px;}