.navbarSpace{height: 55px;} .navbarSpaceSub{height: 115px;} #navbar{position: fixed; top: 0px; left: 0px; width: 100%; min-width: 950px; background: var(--bg_white); z-index: 50;} #navbar.nbShadow{box-shadow: 0px 0px 15px #e6e6e6;} #navbar > div:first-child{padding: 0px 25px;} #navbar .navMain{height: 55px; display: grid; grid-template-columns: 120px min-content 1fr min-content; grid-gap: 15px;} #navbar .navMain > div{width: 100%;} #navbar .navMain .nmLogo{width: 105px; height: 55px;} #navbar .navMain .nmLogo div{padding-bottom: 24%; margin-top: 15px; background-size: 100%; background-repeat: no-repeat; background-image: url('../../../images/logo_word.png');} #navbar .navMain .nmLogo div{background-image: url('../../../images/logo_word_doodle.png?t=1');} #navbar .navMain .nmMenu{display: flex;} #navbar .navMain .nmMenu > a{color: var(--text_black);} #navbar .navMain .nmMenu div.nmOpt{padding: 16px 8px; font-size: 15px; font-weight: bold; position: relative;} #navbar .navMain .nmMenu div.nmOpt.active{color: var(--text_blue);} #navbar .navMain .nmMenu div.nmOpt .noBg{position: absolute; top: -31px; left: 0px; width: 100%; opacity: 0; transition: var(--transition);} #navbar .navMain .nmMenu div.nmOpt .noBg > div{width: 30px; height: 30px; background: var(--bg_blue); border-radius:50%;} #navbar .navMain .nmMenu div.nmOpt:hover .noBg{opacity: 1; top: -19px;} #navbar .navMain .nmMenu .nmmDdbtn{display: table;} #navbar .navMain .nmMenu .nmmDdbtn > div{display: table-cell; vertical-align: middle;} #navbar .navMain .nmMenu .nmmDdbtn > div:nth-child(2){padding-left: 5px;} #navbar .navMain .nmMenu .nmmDdbtn > div:nth-child(2) > div{width: 10px; height: 10px; transition: all 0.5s ease;} #navbar .navMain .nmSearch{height: 33px; background: var(--bg_silvercalm); box-shadow: 0px 0px 0px 1px var(--bg_silver); border-radius: 50px; position: relative; margin-top: 10px;} #navbar .navMain .nmSearch > form > input{width: 100%; border: none; padding: 9px 25px 10px 45px;} #navbar .navMain .nmSearch > form > div{position: absolute; left: 5px; top: 0px; height: 100%; width: 37px; transition: all 0.2s ease;} #navbar .navMain .nmSearch > form > div > div{width: 17px; height: 17px; margin-top: 7px;} #navbar .navMain .nmSearchMini{display: none; cursor: pointer; float: right; margin-top: 10px; margin-right: 3px; width: 35px; height: 35px; border-radius: 50%; background: var(--bg_silvercalm); box-shadow: 0px 0px 0px 1px var(--bg_silver); transition: var(--transition);} #navbar .navMain .nmSearchMini:hover{box-shadow: 0px 0px 0px 2px var(--bg_silver);} #navbar .navMain .nmSearchMini > div{width: 17px; height: 17px; position: relative; top: 8px;} #navbar .navMain .nmOption{display: flex;} #navbar .navMain .nmOption > div button{padding: 8px 15px 9px 15px; border-radius: 50px;} #navbar .navMain .nmOption .nmoPublish{margin-top: 10px; margin-right: 5px; width: 91px;} #navbar .navMain .nmOption .nmoBox{width: 45px; height: 40px; position: relative;} #navbar .navMain .nmOption .nmoBox .nbTooltip{position: absolute; display: none; bottom: -22px; left: -3px; color: var(--text_white); font-size: 9px; background: var(--bg_black); border-radius: 15px; padding: 3px 7px;} #navbar .navMain .nmOption .nmoBox:hover .nbTooltip{display: block;} #navbar .navMain .nmOption .nmoBox .navicon > div:first-child{width: 23px; height: 23px; margin-top: 15px; position: relative;} #navbar .navMain .nmOption .nmoBox .navicon > div:first-child > div{padding: 2px 4px; min-width: 5px; text-align: center; background: #ff3636; color: var(--text_white); border-radius: 3px; top: -7px; right: -9px; position: absolute; font-size: 9px;} #navbar .navMain .nmOption .nmoBox .navicon > div:nth-child(2){position: absolute; top: 115%; width: 340px; background: var(--bg_white); border: 2px solid #efeff1; border-top: 0px; right: -85px; display: none; z-index: 5;} #navbar .navMain .nmOption .nmoBox .navicon > div:nth-child(2) > div:first-child{display: grid; grid-template-columns: 1fr 1fr 1fr;} #navbar .navMain .nmOption .nmoBox .navicon > div:nth-child(2) > div:first-child > div{width: 100%;} #navbar .navMain .nmOption .nmoBox .navicon > div:nth-child(2) > div:first-child > div:not(:first-child){background: #efeff1;} #navbar .nn_options{padding: 13px 0px 15px 0px; text-align: center;} #navbar .nn_options > span{color: red; font-family: 'bold';} #navbar .nn_text{text-align: center; padding: 11px 0px 12px 0px;} #navbar .navMain .nmOption > div.nmoBox div.navicon > div:nth-child(2) > div:nth-child(2){width: 100%; min-height: 170px; max-height: calc(100vh - 165px); overflow: auto;} #navbar .navMain .nmOption > div.nmoBox div.navicon > div:nth-child(2) > div:nth-child(2) > div:first-child{padding: 10px 15px; text-align: right;} #navbar .navMain .nmOption > div.nmoBox div.navicon > div:nth-child(2) > div:nth-child(2) > div:first-child > span{color: var(--text_blue); cursor: pointer;} #navbar .navMain .nmOption > div.nmoBox div.navicon > div:nth-child(2) > div:last-child{height: 40px; border-top: 1px solid #f6f6f6;} #navbar .navMain .nmOption > div.nmoBox div.navphoto{width: 23px; height: 23px; margin-top: 12px; background-color: var(--bg_silver); border-radius: 50%;} #navbar .navMain .nmOption > div.nmoLogin{margin-top: 10px; margin-left: 10px; width: 120px;} #navbar .navsub{height: 60px; overflow: hidden; transition: var(--transition);} #navbar .navsub > div{max-width: 1200px; padding: 0px 30px;} #navbar .navsub .nsTitle{float: left; margin-top: 20px; font-size: 20px; font-weight: bold; transition: var(--transition);} #navbar .navsub .nsTitle .nstIcon{width: 106px; height: 20px; margin-top: 10px;} #navbar .navsub .nsOpt{float: right; white-space: nowrap; font-size: 0px; margin-top: 15px; transition: var(--transition);} #navbar .navsub .nsOpt > a{display: inline-block; font-size: 14px;} #navbar .navsub .nsOpt > a > div{color: var(--text_black); position: relative; padding: 12px 0px; font-weight: bold; position: relative; transition: var(--transition);} #navbar .navsub .nsOpt > a > div:before{content: ''; position: absolute; left: 40%; bottom: 5px; width: 15px; border-radius: 15px; height: 3px; background: var(--bg_blue); opacity: 0; transition: var(--transition);} #navbar .navsub .nsOpt > a:not(:last-child) > div{margin-right: 30px;} #navbar .navsub .nsOpt > a:hover > div{color: var(--text_blue);} #navbar .navsub .nsOpt > a:hover > div:before{opacity: 1;} #navbar .navsub .nsOpt > a > div.active{color: var(--text_blue);} #navbar .navsub .nsOpt > a > div.active:before{opacity: 1;} #navbar .navsub .nsOpt .noCount{padding: 2px 4px 2px 4px; background: var(--bg_red); font-size: 11px; border-radius: 3px; top: -1px; right: -5px; position: relative; color: var(--text_white);} #navbar .navsub .nsFilmMember{float: right; cursor: pointer; padding: 7px 15px; margin-left: 15px; border-radius: 5px; background: #333333; text-align: center;} #navbar .navsub .nsFilmMember > div:first-child{font-size: 9px; color: var(--text_silver);} #navbar .navsub .nsFilmMember > div:nth-child(2){color: var(--text_white); font-size: 11px; font-weight: bold;} #navbar .navsub.nsScroll{height: 45px;} #navbar .navsub.nsScroll .nsTitle{height: 45px; margin-top: 10px;} #navbar .navsub.nsScroll .nsTitle .nstIcon{margin-top: 0px;} #navbar .navsub.nsScroll .nsOpt{margin-top: 0px;} #navbar .navsub.nsScroll .nsFilmMember{border-radius: 5px 5px 0px 0px;} #navbar .menu_more > div{position: fixed; top: 54px; right: 0px; width: 300px; background: var(--bg_white); border: 2px solid #efeff1; border-top: 0px; border-right: 0px; display: none; z-index: 10; max-height: 83vh; overflow: auto;} #navbar .nmUser{padding: 15px; display: grid; grid-template-columns: 45px 1fr; grid-gap: 15px; align-items: center; box-sizing: border-box;} #navbar .nmUser > div{width: 100%;} #navbar .nmUser > div:first-child > div{width: 45px; height: 45px; border-radius: 50%; background-color: var(--bg_silvercalm);} #navbar .nmUser > div:nth-child(2) > div:first-child{font-family: 'bold';} #navbar .nmUser > div:nth-child(2) > div:nth-child(2){font-size: 11px; color: var(--text_silver);} #navbar .nmWallet{padding: 0px 15px;} #navbar .nmWallet > div{box-shadow: 0px 0px 5px var(--shadow); padding: 7px 0px 7px 10px; border-radius: 10px; display: grid; grid-template-columns: 1fr 55px 55px 44px; align-items: center; box-sizing: border-box;} #navbar .nmWallet > div > div{width: 100%; position: relative; cursor: pointer; transition: var(--transition);} #navbar .nmWallet > div > div:hover{opacity: 0.7;} #navbar .nmWallet .nmwKunci > div:first-child{font-size: 11px;} #navbar .nmWallet .nmwKunci > div:nth-child(2){display: grid; grid-template-columns: 15px 1fr; grid-gap: 10px; align-items: center;} #navbar .nmWallet .nmwKunci > div:nth-child(2) > div{width: 100%;} #navbar .nmWallet .nmwKunci > div:nth-child(2) > div:first-child > div{width: 15px; height: 15px;} #navbar .nmWallet .nmwKunci > div:nth-child(2) > div:nth-child(2){font-size: 17px; font-weight: bold;} #navbar .nmWallet .nmwOpt > div:first-child{width: 20px; height: 20px;} #navbar .nmWallet .nmwOpt > div:nth-child(2){font-weight: bold; margin-top: 5px; font-size: 11px; text-align: center;} #navbar .nmWallet .nmwQr:before{content: ''; width: 1px; height: 43px; position: absolute; left: 0px; top: -9px; background: var(--bg_line);} #navbar .nmWallet .nmwQr > div{width: 25px; height: 25px;} #navbar .nmList{margin-top: 20px; border-top: 1px solid var(--bg_silvercalm);} #navbar .nmList > a{display: grid; grid-template-columns: 15px 1fr; grid-gap: 15px; padding: 15px 15px; box-sizing: border-box; align-items: center; cursor: pointer; color: var(--text_black); border-bottom: 1px solid var(--bg_silvercalm);} #navbar .nmList > a > div{width: 100%;} #navbar .nmList > a > div:first-child > div{width: 15px; height: 15px;} #navbar .nmInfo{text-align: center; padding: 15px 7px 15px 7px; font-size: 10px;} #navbar .nmInfo > div:first-child{margin-bottom: 5px;} #navbarBrowse{width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 80; overflow: auto; backdrop-filter: blur(3px); background: rgba(0, 0, 0, 0.55); display: none;} #navbarBrowse > div{width: 800px; min-height: 200px; background: var(--bg_white); margin-top: 65px; margin-bottom: 65px; border-radius: 10px; padding: 20px; display: grid; grid-template-columns: 170px 1fr; grid-gap: 15px; box-sizing: border-box; position: relative; opacity: 0; transition: var(--transition);} #navbarBrowse > div:before{content: ''; position: absolute; top: 0px; left: 180px; width: 1px; height: 100%; background: var(--bg_line);} #navbarBrowse > div > div{width: 100%;} #navbarBrowse .nbSide > div:not(:last-child){margin-bottom: 45px;} #navbarBrowse .nbSide .nsTitle{font-weight: bold; font-size: 15px; margin-bottom: 5px;} #navbarBrowse .nbSide .nsList > a > div{padding: 7px 0px; display: grid; grid-template-columns: 20px 1fr; grid-gap: 10px; align-items: center;} #navbarBrowse .nbSide .nsList > a > div > div{width: 100%;} #navbarBrowse .nbSide .nsList > a > div > div:first-child > div{width: 20px; height: 20px;} #navbarBrowse .nbSide .nsList > a > div > div:nth-child(2){color: var(--text_black);} #navbarBrowse .ncTitle{margin-bottom: 5px;} #navbarBrowse .ncTitle > span{font-weight: bold; font-size: 15px;} #navbarBrowse .ncTitle > a{float: right;} #navbarBrowse .ncContent{display: grid; width: 100%;} #navbarBack{position: fixed; top: 0px; left: 0px; width: 100%; background: var(--bg_blue); z-index: 50;} #navbarBack > div{height: 55px; width: 950px; padding: 0px 35px; box-sizing: border-box; display: grid; grid-template-columns: 25px 1fr; grid-gap: 25px;} #navbarBack > div > div{width: 100%;} #navbarBack .nbIcon{width: 20px; height: 20px; margin-top: 17px;} #navbarBack .nbLogo{width: 110px; height: 25px; margin-top: 13px; float: left;} #navbarBack .nbTitle{margin-top: 13px; float: right; font-size: 17px; letter-spacing: 5px; font-family: 'bold'; color: var(--text_white);} #content{} #content .contentSpace{display: inline-block; width: 100%; margin-top: 20px;} #content section{max-width: 1200px;} #content section.sec800{max-width: 900px;} #content section.sec600{max-width: 600px;} #content section > div.distance{padding: 0px 25px;} #content div.empty{padding: 20px 15px; text-align: center; margin-top: 100px; margin-bottom: 300px; font-size: 17px; color: var(--text_silver);} #content div.empty.mini{margin-top: 50px; margin-bottom: 100px;} #container{display: grid;} #container .barfull{grid-column: 1 / side 2; margin: 0px;} #container .content{grid-column: 1; margin: 0px;} #container .side{grid-column: 2; margin: 0px;} #container.cnt800{width: 900px;} #container.cnt800 .content{width: 600px;} #container.cntLeft{grid-template-columns: auto 300px;} #container.cntLeft .side{padding-left: 25px;} #container.cntRight{grid-template-columns: 250px auto;} #container.cntRight .side{padding-right: 25px;} .sideTitle{padding-bottom: 15px; font-size: 20px; font-weight: bold;} .mini_layout{max-width: 900px; padding: 0px 25px; display: grid; grid-gap: 25px; margin-bottom: 25px;} .mini_layout.mlLeft{grid-template-columns: 300px 1fr;} .mini_layout.mlRight{grid-template-columns: 1fr 300px;} .mini_layout > div{width: 100%;} .mini_layout.lmSticky .list_menu{position: sticky; top: 65px;} .sideMenu > a > div{padding: 15px 20px; cursor: pointer; transition: all 0.5s ease; color: var(--text_black); position: relative;} .sideMenu > a:not(:last-child) > div{border-bottom: 1px solid #f6f6f6;} .sideMenu > a:hover > div{background: #e7e7e7;} .sideMenu > a > div.active:before{content: ''; position: absolute; width: 2px; height: 100%; background: var(--bg_blue); left: 0px; top: 0px;} .footerSpace{height: 20px;} #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_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-family: 'bold';} .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 > 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_login{display: table; table-layout: fixed; width: 100%; min-height: 200px; border-spacing: 0px;} .popup_login > div{display: table-cell;} .popup_login > div:first-child{width: 40%; background-size: cover; background-image: url('../../../images/background/popup_login.png'); vertical-align: middle; text-align: center; letter-spacing: 10px;} .popup_login > div:first-child > span{font-size: 40px; font-family: 'bold'; color: var(--text_white);} .popup_login > div:first-child > span > span{padding: 2px 12px 2px 7px; background: rgba(0, 0, 0, 0.70);} .popup_login > div:last-child{width: 60%; background: var(--bg_white);} .popup_login > div:last-child > div{padding: 50px 40px 60px 40px;} .popup_login > div:last-child > div p{} .popupAuthor .paHead{padding: 15px;} .popupAuthor .paHead > div:first-child{font-size: 20px; font-weight: bold;} .popupAuthor .paList > 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 .paList > a > div > div{width: 100%;} .popupAuthor .paList > a > div > div:first-child > div{width: 35px; height: 35px;} .popupAuthor .paList > a > div > div:nth-child(2) > div:first-child{font-size: 15px; font-weight: bold; color: var(--text_black);} .popupAuthor .paList > a > div > div:nth-child(2) > div:nth-child(2){color: var(--text_silver); margin-top: 2px;} .popupAuthor .paList > a > div > div:nth-child(3) > div{width: 15px; height: 15px;} .popupAuthor .paBtn{padding: 15px;} .popupAuthor .paBtn 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;} .popup_nsfw > div > div > div{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 25px;} .popup_nsfw > div > div > div > div:nth-child(4){margin-top: 15px;} .popup_story{display: none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 60;} .popup_story > div{width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); position: absolute; top: 0px; left: 0px; display: table; table-layout: fixed;} .popup_story > div > div{display: table-cell; vertical-align: middle;} .popup_story .psbody{max-width: 1000px; min-width: 850px; height: 80vh; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;} .popup_story .psbody > div{width: 100%; position: relative;} .popup_story .psbody > div:nth-child(2){background: var(--bg_white); border-radius: 5px;} .popup_story .psbody .psbCover{position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; display: table; table-layout: fixed;} .popup_story .psbody .psbCover > div{display: table-cell; vertical-align: middle;} .popup_story .psbody .psbCover > div > div{width: 250px;} .popup_story .psbody .psbCover > div > div > div{padding-bottom: 150%; border-radius: 5px;} .popup_story .psbody .psbContent{position:absolute; bottom:0; top:0; left:0; right:0; padding: 25px;} .popup_story .psbody .psbContent > div{display: grid; grid-template-rows: 37px 1fr 37px; column-gap: 5px; height: 100%;} .popup_story .psbody .psbContent > div > div{width: 100%;} .popup_story .psbody .psbContent > div > div:first-child{display: table; table-layout: fixed;} .popup_story .psbody .psbContent > div > div:first-child > div{display: table-cell; vertical-align: middle;} .popup_story .psbody .psbContent > div > div:first-child > div:first-child{width: 35px;} .popup_story .psbody .psbContent > div > div:first-child > div:first-child > div{height: 35px; border-radius: 50%; background-color: var(--bg_silvercalm);} .popup_story .psbody .psbContent > div > div:first-child > div:nth-child(2){padding-left: 15px;} .popup_story .psbody .psbContent > div > div:first-child > div:nth-child(2) > div:first-child{font-family: 'bold';} .popup_story .psbody .psbContent > div > div:first-child > div:nth-child(2) > div:nth-child(2){color: var(--text_silver); font-size: 11px;} .popup_story .psbody .psbContent > div > div:nth-child(2){padding: 25px 0px;} .popup_story .psbody .psbContent > div > div:nth-child(3) button{width: 100%;} #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; display: grid; grid-template-columns: 25px 1fr; grid-gap: 15px; align-items: center; box-sizing: border-box; margin: 15px 20px 20px 20px; border-radius: 10px; background: var(--bg_alert_red_calm);} .alert_email > div{width: 100%;} .alert_email > div:first-child > div{width: 25px; height: 25px;} .scroll_card{opacity: 0; transition: all 0.2s ease;} .scroll_card > div{height: 100%; width: 0px; top: 0px; position: absolute; z-index: 1;} .scroll_card > div:first-child{left: 25px; display: none;} .scroll_card > div:last-child{right: 30px;} .scroll_card > div > div{width: 40px; height: 40px; cursor: pointer; border-radius: 50%; position: absolute; top: 32%; background: var(--bg_white); border: 3px solid var(--bg_blue);} .scroll_card > div:last-child > div{right: 0px;} .scroll_card > div > div > div{width: 20px; height: 20px; margin-top: 9.5px;} .scroll_card > div:hover:first-child > div > div{margin-left: 5px;} .scroll_card > div:hover:last-child > div > div{margin-right: 5px;} #slider{position: relative;} #slider > div:first-child > a > div{padding-bottom: 33%; background-size: cover; display: none;} #slider > div:first-child > a.active > div{display: block;} #slider > div:nth-child(2){padding: 15px 0px;} #slider > div:nth-child(2) > div{display: table;} #slider > div:nth-child(2) > div > div{display: table-cell;} #slider > div:nth-child(2) > div > div > div{width: 15px; height: 15px; background: var(--bg_silver); margin: 0px 7px; border-radius: 50%;} #slider > div:nth-child(2) > div > div.active > div{background: var(--bg_blue);} .mainFeature{margin-top: 20px; border: 1px solid var(--bg_line); border-radius: 10px; display: grid; grid-template-columns: 1fr 45px; grid-gap: 15px; align-items: center;} .mainFeature > div{width: 100%; position: relative;} .mainFeature > div:first-child{display: flex; flex-wrap: nowrap; padding: 13px 10px 12px 10px; box-sizing: border-box;} .mainFeature > div:first-child > a{display: inline-block; color: var(--text_black); flex-grow: 1;} .mainFeature > div:first-child > a:not(:last-child){margin-right: 10px;} .mainFeature > div:nth-child(2){height: 100%; cursor: pointer;} .mainFeature > div:nth-child(2):before{content: ''; width: 0.5px; height: 100%; position: absolute; top: 0px; left: 0px; background: var(--bg_line);} .mainFeature > div:nth-child(2) > div{width: 25px; height: 25px; position: relative; top: 19px;} .mainFeature .mfBox{display: grid; grid-template-columns: 25px 1fr; grid-gap: 10px; border-radius: 10px; border: 1.5px solid var(--bg_blue); transition: var(--transition); align-items: center; padding: 7px 15px; box-sizing: border-box;} .mainFeature .mfBox > div{width: 100%;} .mainFeature .mfBox > div:first-child > div{height: 25px;} .mainFeature .mfBox:hover{background: var(--bg_silvercalm);} .mainFeature .mfBox:hover > div:nth-child(2){color: var(--text_blue);} .title{display: inline-block; width: 100%; padding: 15px 0px;} .title > div:first-child > div{font-size: 20px; font-weight: bold; float: left;} .title > div:first-child > div .tImgFilm{height: 21px; width: 115px; margin: 5px 0px; float: left;} .title > div:nth-child(2){float: left; margin-left: 50px; position: relative;} .title > div:nth-child(2):before{content: ''; position: absolute; left: -23px; top: 4px; width: 1px; height: 23px; background: var(--bg_blue);} .headMore{font-weight: bold; padding-top: 4px; color: var(--text_blue);} .qrcode > div:first-child img{width: 100%;} .qrcode > div:nth-child(2){text-align: center; background: var(--bg_blue); color: var(--text_white); padding: 10px 0px 12px 0px; border-radius: 5px;} .qrcode > div:nth-child(2) > div:first-child{font-size: 17px; font-family: 'bold';} .qrcode > div:nth-child(2) > div:nth-child(2){margin-top: 3px; font-size: 11px;} .page_head{margin-bottom: 15px;} .page_head > div{display: inline-block; width: 100%;} .page_head > div > div:first-child{font-size: 20px; font-weight: bold; float: left;} .page_head > div > div:nth-child(2){float: right; margin-top: 7px;} .page_head > div > div:nth-child(2) a{cursor: pointer;} .page_back{font-size: 17px; font-family: 'bold';} .page_title{padding: 40px 25px 45px 25px; font-size: 25px; font-weight: bold; color: var(--text_blue);} .page_title_mini{padding: 15px 25px 20px 25px; font-size: 20px; font-weight: bold; color: var(--text_blue);} .page_loading{padding: 35px 0px 20px 0px; text-align: center; font-size: 20px; color: var(--text_silver);} .page_info{padding: 15px; display: grid; grid-template-columns: 35px 1fr; grid-gap: 15px; box-sizing: border-box; border-radius: 10px;} .page_info > div{width: 100%;} .page_info > div:first-child > div{width: 35px; height: 35px;} .menu_horizontal{padding: 15px 0px; margin: 5px 0px 10px 0px;} .menu_horizontal > div{display: table; table-layout: fixed;} .menu_horizontal > div > div{display: table-cell; padding: 0px 5px;} .menu_horizontal > div > div > a > div{padding: 3px 13px 4px 13px; border-radius: 50px; color: var(--text_silver); font-size: 15px; white-space: nowrap;} .menu_horizontal > div > div > a > div:hover, .menu_horizontal > div > div > a > div.active{background: var(--bg_blue); color: var(--text_white);} .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;} .rightclick{display: none; z-index: 1000; position: absolute; overflow: hidden; border: 1px solid var(--bg_silver); white-space: nowrap; background: var(--bg_white); border-radius: 5px; padding: 0;} .rightclick li{padding: 8px 12px; cursor: pointer; list-style-type: none; transition: all 0.2s ease; user-select: none;} .rightclick li:hover{background-color: var(--bg_silvercalm);} .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 var(--bg_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; margin-top: 3px;} .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} .commentbox{background: var(--bg_silvercalm); border-radius: 10px; padding: 20px 25px;} .commentbox > div{display: table; table-layout: fixed; width: 100%;} .commentbox > div > div{display: table-cell; vertical-align: middle;} .commentbox > div > div:first-child > div{font-size: 17px; outline: none;} .commentbox > div > div:first-child > textarea{font-size: 17px; border: 0px; background: transparent; height: 20px; resize: none; padding: 0px; outline: none;} .commentbox > div > div:last-child{vertical-align: bottom; width: 120px;} .commentbox > div > div:last-child > div{display: table; table-layout: fixed; width: 100%;} .commentbox > div > div:last-child > div > div{display: table-cell; vertical-align: middle;} .commentbox > div > div:last-child > div > div:first-child{width: 20px;} .commentbox > div > div:last-child > div > div:first-child > div{width: 20px; height: 20px;} .commentbox > div > div:last-child > div > div:nth-child(2){text-align: right;} .sidebox > div:first-child{padding: 15px 0px; font-size: 20px; font-family: 'bold'; border-bottom: 1px solid var(--bg_line);} .sidebox.first > div:first-child{padding: 0px 0px 15px 0px;} .emoticon{position: relative; cursor: pointer;} .emoticon > .emt{position: absolute; width: 230px; z-index: 10; overflow: hidden; background: var(--bg_white); box-shadow: 0px 0px 10px var(--bg_silver); border-radius: 10px; top: 100%; 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: 41px; width: 40px; 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: 7px;} .emoticon > .emt > div:last-child{height: 240px; 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 > div:first-child{padding: 15px 8px 5px 20px; height: 25px;} .stickerBox > div:first-child > div:first-child{font-size: 17px; font-family: 'bold'; float: left;} .stickerBox > div:first-child > div:nth-child(2){width: 25px; height: 25px; float: right;} .stickerBox > div:first-child > div:nth-child(2) > div{width: 15px; height: 15px; margin-top: 5px;} .stickerBox > div:nth-child(2){display: none; grid-template-columns: auto 40px;} .stickerBox > div:nth-child(2) > div{width: 100%; overflow: auto;} .stickerBox > div:nth-child(3){padding: 15px 15px 20px 15px; min-height: 250px;} .stickerBox .sB_list{white-space: nowrap;} .stickerBox .sB_list > div{display: inline-block; padding: 10px 22px; font-family: 'bold'; cursor: pointer;} .stickerBox .sB_list > div.active{color: var(--text_blue);} .stickerBox .sB_btnstore{height: 40px; border-left: 2px solid var(--bg_line);} .stickerBox .sB_btnstore.active{background: var(--bg_silvercalm);} .stickerBox .sB_btnstore > div{width: 25px; height: 25px; top: 7px; position: relative;} .stickerBox .sB_btnstore > div:hover{opacity: 0.3;} .stickerBox .sB_btnstore.active > div{opacity: 0.3;} .stickerBox .sB_body{display: none;} .stickerBox .sB_body .sB_loading{padding: 85px 0px 100px 0px; text-align: center; color: var(--text_silver);} .stickerBox .sB_body .sB_remove{padding-bottom: 15px; height: 18px; width: 100%; display: none;} .stickerBox .sB_body .sB_remove > div{float: right; color: var(--text_blue); cursor: pointer;} .stickerBox .sB_body .sB_content{display: none; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 15px;} .stickerBox .sB_body .sB_content > div{width: 100%;} .stickerBox .sB_body .sB_content > div > div{padding-bottom: 100%; cursor: pointer;} .stickerBox .sB_body .sB_content > div > div:hover{box-shadow: inset 0px 0px 0px 1px var(--bg_blue);} .stickerBox .sB_store{display: none;} .stickerBox .sB_store > div{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px;} .stickerBox .sB_store > div > div{width: 100%; cursor: pointer;} .stickerBox .sB_store > div > div > div:first-child{padding-bottom: 100%; background-color: var(--bg_silvercalm); border-radius: 5px;} .stickerBox .sB_store > div > div > div:nth-child(2){margin-top: 10px;} .stickerBox .sB_store > div > div > div:nth-child(2) > div:first-child{font-family: 'bold';} .stickerBox .sB_store > div > div:hover > div:nth-child(2) > div:first-child{color: var(--text_blue);} .stickerBox .sB_store > div > div > div:nth-child(2) > div:nth-child(2){margin-top: 3px; color: var(--text_silver);} .list_menu > a > div{padding: 15px; display: grid; grid-template-columns: 20px 1fr; grid-gap: 15px; box-sizing: border-box; align-items: center; transition: var(--transition); position: relative;} .list_menu > a > div:before{content: ''; position: absolute; right: 0px; top: 0px; width: 3px; height: 100%; background: var(--bg_blue); opacity: 0; transition: var(--transition);} .list_menu > a:not(:last-child) > div{border-bottom: 1px solid var(--bg_line);} .list_menu > a:hover > div{background: var(--bg_silvercalm);} .list_menu > a > div.active:before{opacity: 1;} .list_menu > a > div > div{width: 100%;} .list_menu > a > div > div:first-child > div{width: 20px; height: 20px;} .list_menu > a > div > div:nth-child(2){color: var(--text_black);} .list_menu > a > div > div:nth-child(2) > span{padding: 1px 4px 1px 4px; border-radius: 3px; background: var(--bg_red); color: var(--text_white); font-size: 10px;} .list_menu > a > div.disabled > div:nth-child(2) > span{background: var(--bg_silvercalm); color: var(--text_silver);} .list_hashtag{height: 54px; overflow: hidden; position: relative;} .list_hashtag > div:first-child{width: 100%; height: 0px; position: relative;} .list_hashtag > div:first-child > div{position: absolute; top: 0px; width: 75px; height: 55px;} .list_hashtag > div:first-child > div > div{width: 40px; height: 40px; border: 3px solid var(--bg_blue); border-radius: 50%; margin-top: 4px; background: var(--bg_white); opacity: 0; transition: all 0.2s ease; cursor: pointer;} .list_hashtag:hover > div:first-child > div > div{opacity: 1;} .list_hashtag > div:first-child > div > div > div{width: 20px; height: 20px; margin-top: 9.5px;} .list_hashtag > div:first-child > div:first-child{left: 0px; display: none;} .list_hashtag > div:first-child > div:first-child > div{float: right;} .list_hashtag > div:first-child > div:last-child{right: 0px;} .list_hashtag > div:first-child > div:last-child > div{float: left;} .list_hashtag > div:last-child{white-space: nowrap; font-size: 0px; overflow: auto; height: 65px;} .list_hashtag > div:last-child > a > div{display: inline-block; padding: 5px 10px 6px 10px; border-radius: 5px; background: var(--bg_blue); color: var(--text_white); font-size: 17px; margin: 10px 0px; margin-right: 15px; transition: var(--transition);} .list_hashtag > div:last-child > a:first-child > div{margin-left: 15px;} .list_hashtag > div:last-child > 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;} .list_linked > div:first-child{font-size: 20px; font-family: 'bold';} .list_linked > div:nth-child(2){margin-top: 15px;} .list_linked > div:nth-child(2) > a > div{padding: 15px 0px 17px 0px; 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: 70px;} .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.novel > div > div:first-child > div{padding-bottom: 150%;} .list_linked > div:nth-child(2) > a > div.comic > div > div:first-child > div{padding-bottom: 100%;} .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';} .list_linked > div:nth-child(2) > a:hover > div > div > div:nth-child(2) > div:nth-child(2){color: var(--text_blue);} .liveFloating{position: fixed; padding: 7px 15px; bottom: 25px; right: 25px; cursor: pointer; width: 125px; background: var(--bg_blue); color: var(--text_white); z-index: 50; border-radius: 10px;} .liveFloating > div{display: table; width: 100%; table-layout: fixed;} .liveFloating > div > div{display: table-cell; vertical-align: middle;} .liveFloating > div > div:first-child{width: 30px;} .liveFloating > div > div:first-child > div{height: 30px; background: red; border-radius: 50%;} .liveFloating > div > div:nth-child(2){padding-left: 10px; font-family: 'bold';} .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: 17px; height: 17px;} .verify_icon.medium:hover > span > i{transform: rotate(360deg);} /**ADMIN CONTROL**/ .admin_button{position: fixed; bottom: 25px; right: 25px; z-index: 60;} .admin_button > div{padding: 10px 20px; font-family: 'bold'; z-index: 35; background: var(--bg_blue); color: var(--text_white); border-radius: 5px; cursor: pointer;} /**SECTION**/ .film_section{background: var(--bg_black); padding: 0px 0px 65px 0px;} .film_section > div:first-child{margin-bottom: 15px; padding-top: 8px;} .film_section .title > div:first-child > div{color: var(--text_white);} .film_section .title a{color: var(--text_white);} .film_section .title > div:nth-child(2):before{background: var(--bg_red);} .film_section .title .headMore{color: var(--text_red);} .film_section .card_hzl_film .cnt_card > a:first-child > div{margin-left: 35px;} .film_section .card_hzl_film .cnt_card > a:last-child > div{margin-right: 35px;} /**DISCOVER**/ .disc_info_popup{min-height: 100px;} .disc_info_popup > img{width: 100%;} .disc_info{padding: 20px 25px 23px 25px; margin-top: 25px; background: var(--bg_white); border: 1.5px solid var(--bg_line); border-radius: 10px;} .disc_info > div{display: grid; grid-template-columns: 150px 1fr; grid-gap: 25px;} .disc_info > div > div{width: 100%;} .disc_info .di_banner{height: 150px; 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: 10px;} .disc_info .di_info > div:nth-child(3){margin-top: 15px;} .disc_focusmenu{position: relative; z-index: 1 box-sizing: border-box; margin-top: 15px; margin-bottom: 5px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px;} /* .disc_focusmenu{grid-template-columns: 1fr 1fr 1fr;} */ /* .disc_focusmenu > a:last-child{display: none;} */ .disc_focusmenu > a{width: 100%;} .disc_focusmenu > a > div{padding: 14px 0px 15px 10px; overflow: hidden; border-radius: 5px; font-weight: bold; color: var(--text_white); position: relative; box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.4);} .disc_focusmenu > a > div span{position: relative; z-index: 1;} .disc_focusmenu > a > div > div{position: absolute; right: -15px; bottom: 0px; width: 50px; height: 50px;} .disc_focusmenu .dfTrending{background: var(--bg_blue);} .disc_focusmenu .dfPremium{background: var(--bg_orange);} .disc_focusmenu .dfAcademy{background: var(--bg_academy);} .disc_genre{padding-bottom: 30px; margin-top: 20px; background: var(--bg_silvercalm);} .disc_reading{padding-top: 20px;} .disc_reading > div{width: 100%; display: grid; grid-template-columns: 170px 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: 25px; 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_official{padding-bottom: 45px; background: var(--bg_orange);} .disc_official .title > div:first-child > div{color: var(--text_white);} /**TRENDING**/ .trend_head{padding: 30px 0px 40px 0px; text-align: center;} .trend_head > div:first-child{font-size: 30px; font-family: 'bold';} .trend_head > div:last-child{margin-top: 5px; font-size: 15px;} /**N**/ .n_layout{display: grid; grid-template-columns: 1fr 1fr; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; min-width: 940px;} .n_layout > div{width: 100%; padding-top: 55px; position: relative;} .n_layout > div:first-child{background: var(--bg_blue); overflow: hidden;} .n_layout .nlBg > div{position: absolute; background-size: 100%; width: 350px; height: 367px;} .n_layout .nlBg > div:first-child{top: 0px; left: 0px; background-image: url('../../../images/background/n_bg_1.png');} .n_layout .nlBg > div:nth-child(2){bottom: 0px; right: 0px; background-image: url('../../../images/background/n_bg_2.png');} .n_layout .nlWork{position: relative; z-index: 1;} .n_layout .nlWork > div:first-child{width: 180px;} .n_layout .nlWork > div:first-child > div{padding-bottom: 150%; background-color: var(--bg_silvercalm); border-radius: 5px;} .n_layout .nlWork > div:nth-child(2){margin-top: 25px; text-align: center; color: var(--text_white);} .n_layout .nlWork > div:nth-child(2) > div:first-child{font-size: 17px; font-weight: bold;} .n_layout .nlWork > div:nth-child(2) > div:nth-child(2){margin-top: 5px;} .n_layout .nlContent{width: 100%; height: 100%; top: 0px; left: 0px; display: grid; align-items: center;} .n_layout .nlContent > div{width: 100%;} .n_layout .nlBox{padding: 25px; max-width: 450px;} .n_layout .nlBox.register{overflow: auto;} .n_layout .nbTitle{font-size: 25px; font-weight: bold; margin-bottom: 15px;} .n_input{position: relative;} .n_input > div{position: absolute; left: 0px; top: 50px; z-index: 10; border-radius: 5px; padding: 10px 15px 11px 15px; font-size: 11px; width: 200px; background: black; color: var(--text_white); display: none;} .n_input > div:before{content: ''; position: absolute; left: 3px; top: -10px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid black;} .n_input > input:focus ~ div{display: block;} .nl_title{text-align: center; font-size: 15px; font-weight: bold;} /**DASHBOARD**/ .dash_boost{width: 100%; display: inline-block;} .dash_boost > div{width: 68px; height: 68px; border-radius: 50%; margin: 0px 7.5px; float: left; transition: all 0.2s ease; cursor: pointer; overflow: hidden;} .dash_boost > div:first-child{margin-left: 0px; background-color: var(--bg_blue);} .dash_boost > div:first-child > div{width: 30px; height: 30px; margin-top: 18px;} .dash_boost > div:first-child:hover > div{transform: scale(1.2);} .dash_boost > div:first-child > div.db_boostani{transform: scale(2);} .dash_boost > div:not(:first-child){background-color: var(--bg_silver); position: relative;} .dash_boost > div:not(:first-child) > a > div{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;} .dash_boost > div:last-child{margin-right: 0px;} .dash_boost > div:hover{box-shadow: inset 0px 0px 0px 5px white;} .dash_warning{padding: 15px 20px 16px 20px; margin-bottom: 20px; background: var(--bg_yellowcalm);} .dash_warning > div{display: grid; grid-template-columns: 25px 1fr; grid-gap: 25px; align-items: center;} .dash_warning > div > div{width: 100%;} .dash_warning > div > div:first-child{width: 25px;} .dash_warning > div > div:first-child > div{height: 25px;} .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: 20px 50px; position: absolute; bottom: 0px; right: 0px; cursor: pointer; background: rgba(0, 0, 0, 0.25); font-size: 20px;} .dash_intro > div:last-child{width: 100%; height: 90%; display: table; table-layout: fixed;} .dash_intro > div:last-child > div{display: table-cell; vertical-align: middle;} .dash_intro .di_bigtext{font-size: 70px; text-align: center; font-family: 'bold';} .dash_intro .di_mediumtext{font-size: 50px; text-align: center; font-family: 'bold';} .dash_intro .di_info{width: 500px;} .dash_intro .di_info > div:first-child{font-size: 40px; font-family: 'bold';} .dash_intro .di_info > div:last-child{margin-top: 10px; font-size: 20px;} .dash_menu{display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 15px; border: 1px solid var(--bg_line); background: var(--bg_silvercalm); overflow: hidden; border-radius: 10px;} .dash_menu > a{width: 100%; text-align: center;} .dash_menu > a > div{display: inline-block; padding: 13px 0px; position: relative;} .dash_menu > a > div.active:before{content: ''; position: absolute; height: 2px; width: 50px; background: var(--bg_blue); bottom: 0px; left: calc(50% - 22px);} .dash_menu .dmBox{display: grid; grid-template-columns: 15px 1fr; grid-gap: 10px; align-items: center;} .dash_menu .dmBox > div{width: 100%; color: var(--text_black); font-weight: bold; transition: var(--transition);} .dash_menu .dmBox > div:first-child > div{width: 15px; height: 15px;} .dash_menu > a:hover .dmBox > div{color: var(--text_silver);} .dash_slider{padding: 20px; margin-bottom: 15px; background: var(--bg_silvercalm); border-radius: 5px;} .dash_slider > div{display: table; table-layout: fixed; width: 100%;} .dash_slider > div > div{display: table-cell; vertical-align: top;} .dash_slider > div > div:first-child{width: 150px;} .dash_slider > div > div:first-child > div{height: 150px; border-radius: 5px; cursor: pointer;} .dash_slider > div > div:nth-child(2){padding-left: 15px;} .dash_slider > div > div:nth-child(2) > div:first-child{font-size: 17px; font-family: 'bold';} .dash_slider > div > div:nth-child(2) > div:nth-child(2){margin-top: 5px;} .dash_slider > div > div:nth-child(2) > div:nth-child(2) > div:nth-child(2){margin-top: 15px;} /**SEARCH**/ .s_mainbox{background: var(--bg_silvercalm); margin-bottom: 15px; padding: 15px 20px; border-radius: 10px; display: none;} .s_mainbox form{background: var(--bg_white); border-radius: 7px; box-shadow: 0px 0px 0px 1px var(--shadow); position: relative;} .s_mainbox form > input{width: 100%; border: none; padding: 9px 25px 10px 45px;} .s_mainbox form > div{position: absolute; left: 5px; top: 0px; height: 100%; width: 37px; transition: all 0.2s ease;} .s_mainbox form > div > div{width: 17px; height: 17px; margin-top: 7px;} .s_head{padding: 15px 0px; border-bottom: 1px solid var(--bg_line); margin-bottom: 15px;} .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-family: '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: 350px;} .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: 3px;} .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;} /**POST**/ .post_header{display: table; width: 100%; table-layout: fixed;} .post_header > div{display: table-cell; vertical-align: middle;} .post_header > div:first-child{width: 50px;} .post_header > div:nth-child(2){padding-left: 10px;} .post_header > div:last-child{width: 175px;} .post_header > div:last-child button{float: right;} .post_header .ph_photo{width: 40px; height: 40px; background-color: var(--bg_silvercalm); border-radius: 50%;} .post_content{padding: 20px 0px; min-height: 150px;} .post_video > div:first-child{min-height: 300px;} .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{height: 450px; background: var(--bg_black); position: relative;} .post_slider > div:first-child{display: table; table-layout: fixed; width: 100%;} .post_slider > div:first-child > div{height: 450px; text-align: center; display: table-cell; vertical-align: middle; width: 545px;} .post_slider > div:first-child > div > img{max-width: 100%; max-height: 100%; display: none;} .post_slider > div:first-child > div > img.show{display: block;} .post_slider > div:nth-child(2){width: 100%; height: 100%; position: absolute; top: 0px; z-index: 5;} .post_slider > div:nth-child(2) > div{width: 100%; height: 40px; position: absolute; top: 200px;} .post_slider > div:nth-child(2) > div > div{width: 40px; height: 40px; background: var(--bg_white); border-radius: 50%; opacity: 0; cursor: pointer;} .post_slider:hover > div:nth-child(2) > div > div{opacity: 1;} .post_slider:hover > div:nth-child(2) > div > div.disabled{opacity: 0.2;} .post_slider > div:nth-child(2) > div > div:hover{box-shadow: 0px 0px 0px 3px var(--bg_blue);} .post_slider > div:nth-child(2) > div > div:first-child{float: left; margin-left: 25px;} .post_slider > div:nth-child(2) > div > div:last-child{float: right; margin-right: 25px;} .post_slider > div:nth-child(2) > div > div > div{width: 20px; height: 20px; position: relative; top: 9px;} .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;} .post_comment_name{font-size: 17px; font-weight: bold;} .post_comment{min-height: 400px;} .card_comment_status > div{padding: 15px 0px;} .card_comment_status > div:not(:last-child){border-bottom: 1px solid var(--bg_line);} .card_comment_status .ccHead{display: grid; width: 100%; grid-template-columns: 35px 1fr; grid-gap: 10px; align-items: center;} .card_comment_status .ccHead > div{width: 100%;} .card_comment_status .ccHead > div:first-child > a > div{width: 35px; height: 35px; background-color: var(--bg_silvercalm); border-radius: 50%;} .card_comment_status .ccHead > div:nth-child(2) a{color: var(--text_black); font-weight: bold;} .card_comment_status .ccHead > div:nth-child(2) > span:first-child{font-weight: bold;} .card_comment_status .ccHead > div:nth-child(2) > span:nth-child(2){font-size: 11px; color: var(--text_silver);} .card_comment_status .ccContent{padding: 7px 0px 10px 0px; font-size: 17px;} .card_comment_status .ccBottom{color: var(--text_silver); font-size: 11px;} .card_comment_status .ccBottom > span{cursor: pointer;} .card_comment_status .ccBottom > span:not(:last-child){margin-right: 15px;} /**PUB**/ .pub_header > div:first-child{padding: 25px 0px; font-size: 20px; font-family: 'bold';} .pub_header > div:nth-child(2){border: 1px solid var(--bg_line); padding: 25px;} .pub_header .ph_info{display: table; table-layout: fixed; width: 100%;} .pub_header .ph_info > div{display: table-cell; vertical-align: top;} .pub_header .ph_info > div:first-child{width: 80px;} .pub_header .ph_info > div:first-child > div{padding-bottom: 100%;} .pub_header .ph_info > div:nth-child(2){padding-left: 25px;} .pub_header .ph_info > div:nth-child(2) > div:first-child{font-size: 20px; font-family: 'bold';} .pub_header .ph_info > div:nth-child(2) > div:nth-child(2){margin-top: 5px; color: var(--text_silver);} .pub_header .ph_info > div:nth-child(2) > div:nth-child(3){margin-top: 20px;} .pub_header .ph_info > div:nth-child(3){padding-left: 25px; width: 150px;} .pub_header .ph_info > div:nth-child(4){padding-left: 15px; width: 200px;} .pub_header .ph_info .phi_list{display: table; table-layout: fixed; width: 100%;} .pub_header .ph_info .phi_list > div{display: table-cell; vertical-align: middle;} .pub_header .ph_info .phi_list > div:first-child{width: 25px;} .pub_header .ph_info .phi_list > div:first-child > div{padding-bottom: 100%;} .pub_header .ph_info .phi_list > div:nth-child(2){padding-left: 15px;} .pub_header .ph_info .phi_list > div:nth-child(2) > div:first-child{font-size: 11px; color: var(--text_silver); font-family: 'bold';} .pub_header .ph_info .phi_list > div:nth-child(2) > div:nth-child(2){margin-top: 3px;} .pub_header .ph_info .phi_socmed{white-space: nowrap;} .pub_header .ph_info .phi_socmed > a{display: inline-block;} .pub_header .ph_info .phi_socmed > a:not(:last-child){margin-right: 3px;} .pub_header .ph_info .phi_socmed > a > div{width: 30px; height: 30px; background: var(--bg_silvercalm); border-radius: 3px;} .pub_header .ph_info .phi_socmed > a > div > div{width: 20px; height: 20px; position: relative; top: 5px;} .pub_warranty{padding: 15px 20px; display: table; table-layout: fixed; width: 100%;} .pub_warranty > div{display: table-cell; vertical-align: middle;} .pub_warranty > div:first-child{width: 25px;} .pub_warranty > div:first-child > div{padding-bottom: 100%;} .pub_warranty > div:nth-child(2){padding-left: 15px;} .pub_info{height: 300px; overflow: hidden; background-color: var(--bg_white); border-radius: 5px; overflow: hidden; position: relative;} .pub_info > div:first-child{width: 100%; height: 200%; bottom: 0px; position: absolute; left: 0px; background-image: linear-gradient(to bottom, transparent, var(--bg_base));} .pub_info > div:last-child{padding: 20px;} .pub_info > div:last-child > div{position: relative; z-index: 2; display: table; width: 100%;} .pub_info > div:last-child > div > div{display: table-cell; height: 260px;} .pub_info > div:last-child > div > div:first-child{padding: 0px 20px; vertical-align: bottom;} .pub_info > div:last-child > div > div:first-child > div:first-child{font-size: 25px; font-family: 'bold'; margin-bottom: 5px;} .pub_info > div:last-child > div > div:first-child > div:nth-child(2){margin-bottom: 15px;} .pub_info > div:last-child > div > div:first-child > div:last-child{margin-bottom: 20px;} .pub_info > div:last-child > div > div:last-child{width: 200px; vertical-align: middle;} .pub_info > div:last-child > div > div:last-child > img{max-width: 100%; max-height: 100%; display: block; box-shadow: 0px 0px 10px var(--bg_white);} .pub_detail{padding: 20px 25px 30px 25px;} .pub_detail > div:first-child{margin-top: 15px;} .pub_detail > div:nth-child(2){display: table; margin-top: 25px; width: 100%; table-layout: fixed;} .pub_detail > div:nth-child(2) > div{display: table-cell;} .pub_detail > div:nth-child(2) > div > div:first-child{font-size: 17px; color: var(--text_silver); margin-bottom: 5px;} .pub_detail > div:nth-child(2) > div > div:last-child{font-size: 25px; font-family: 'bold';} /**COMMUNITIES**/ .com_layout{display: grid; grid-template-columns: auto 350px;} .com_layout > div:first-child{margin: 0px;} .com_layout > div:nth-child(2)> div:first-child{height: 170px; background-color: var(--bg_silvercalm); position: relative; border-radius: 7px;} .com_layout > div:nth-child(2)> div:first-child > div{position: absolute; width: 110px; height: 110px; background-color: var(--bg_silver); top: 30px; left: 0px; right: 0px;} .com_layout > div:nth-child(2) > div:nth-child(2){margin-top: 15px; font-size: 20px; font-family: 'bold';} .com_layout > div:nth-child(2) > div:nth-child(3){margin-top: 15px;} .com_layout > div:nth-child(2) > div:nth-child(4){margin-top: 15px; color: var(--text_silver);} .com_content{width: 545px;} .com_settings{width: 100%; table-layout: fixed; border-collapse: collapse;} .com_settings tr td{padding: 10px 0px;} .com_settings tr td:first-child > div:first-child{font-family: 'bold';} .com_settings tr td:first-child > div:nth-child(2){font-size: 11px; margin-top: 3px; color: var(--text_silver);} /**MISSION**/ .mis_detail{margin-bottom: 25px;} .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_silver);} .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: 25px; font-family: 'bold';} .mis_header{margin-top: 15px;} .mis_header > div:first-child{display: table; table-layout: fixed; width: 100%; margin-bottom: 20px;} .mis_header > div:first-child > div{display: table-cell; vertical-align: top;} .mis_header > div:first-child > div:first-child{width: 120px;} .mis_header > div:first-child > div:first-child > div{height: 120px; background-color: var(--bg_silvercalm); border-radius: 5px;} .mis_header > div:first-child > div:nth-child(2){padding-left: 20px;} .mis_header > div:first-child > div:nth-child(2) > div:first-child{font-size: 20px; font-family: 'bold';} .mis_header > div:first-child > div:nth-child(2) > div:nth-child(2){margin-top: 5px;} .mis_header > div:first-child > 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: 45px; height: 45px;} .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: 17px;} /**TALK**/ .talk_totw_head{padding: 25px; border-radius: 10px; background: var(--bg_totw); box-sizing: border-box; display: grid; grid-template-columns: 65px 1fr; grid-gap: 25px; align-items: center;} .talk_totw_head > div{width: 100%;} .talk_totw_head > div:first-child > div{width: 65px; height: 65px; background-size: 100%; background-image: url('../../../images/background/talkoftheweek.png');} .talk_totw_head > div:nth-child(2){color: var(--text_white);} .talk_totw_head > div:nth-child(2) > div:first-child{font-size: 20px; font-family: 'bold';} .talk_totw_head > div:nth-child(2) > div:nth-child(2){margin-top: 3px;} /**PROFILE**/ #profile_content{min-height: 800px;} #profile_cover{background-size: cover; position: relative;} #profile_cover:before{content: ''; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 150%; background-image: linear-gradient(to bottom, transparent, var(--bg_white));} #profile_cover > section > div{height: 370px; background-color: var(--bg_silver); border-radius: 0px 0px 10px 10px; position: relative; overflow: hidden; background-size: cover; background-position: center; position: relative;} #profile_cover > section > div > div{width: 130px; height: 130px; background-color: var(--bg_silver); box-shadow: 0px 0px 0px 5px var(--bg_white); border-radius: 50%; position: absolute; left: 0px; right: 0px; bottom: 45px;} #profile_info{padding: 15px 15px 25px 15px; border-bottom: 1px solid var(--bg_line); margin-bottom: 25px;} #profile_info > div{display: grid; grid-template-columns: 1fr 300px; grid-gap: 15px;} #profile_info > div > div{width: 100%;} #profile_info .piLeft > div:first-child > h1{font-size: 30px;} #profile_info .piLeft > div:nth-child(2){color: var(--text_silver); font-size: 17px;} #profile_info .piLeft > div:nth-child(3){margin-top: 10px;} #profile_info .piLeft > div:nth-child(3) > div:first-child{max-height: 105px; overflow: hidden;} #profile_info .piLeft > div:nth-child(3) > div:nth-child(2){height: 15px; display: none; position: relative; cursor: pointer;} #profile_info .piLeft > div:nth-child(3) > div:nth-child(2) > div:first-child{position: absolute; width: 100%; height: 25px; top: -24px; background-image: linear-gradient(to bottom, transparent, var(--bg_white));} #profile_info .piLeft > div:nth-child(3) > div:nth-child(2) > div:nth-child(2){width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; position: relative; top: 7px;} #profile_info .piLeft > div:nth-child(3) > div:nth-child(2) > div:nth-child(2).down{border-top: 7px solid var(--bg_silver);} #profile_info .piLeft > div:nth-child(3) > div:nth-child(2) > div:nth-child(2).up{border-bottom: 7px solid var(--bg_silver);} #profile_info .piLeft > div:nth-child(4){margin-top: 15px; font-size: 20px; font-weight: bold; display: inline-block; width: 100%;} #profile_info .piLeft > div:nth-child(4) > div{float: left;} #profile_info .piLeft > div:nth-child(4) > div:first-child{margin-right: 25px;} #profile_info .piLeft > div:nth-child(4) > div:first-child > a > span:first-child{margin-right: 5px;} #profile_info .piRight{text-align: right;} #profile_info .piRight .pirOptions{display: inline-block; width: 100%;} #profile_info .piRight .pirOptions > div{vertical-align: top;} #profile_info .piRight .pirOptions .piroQrcode{width: 35px; height: 35px; margin-right: 10px; cursor: pointer; box-shadow: inset 0px 0px 0px 2px var(--bg_black); border-radius: 5px; display: inline-block;} #profile_info .piRight .pirOptions .piroQrcode > div{width: 25px; height: 25px; margin-top: 5px;} .profile_achievement{margin-top: 25px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 10px; direction: rtl;} .profile_achievement > div{width: 51px; height: 51px;} .profile_popup_achievement{padding: 15px;} .profile_popup_achievement > div:first-child > div{width: 150px; height: 150px; background-size: 100%;} .profile_popup_achievement > div:nth-child(2){margin-top: 25px; font-size: 17px; font-family: 'bold'; text-align: center;} .profile_popup_achievement > div:nth-child(3){margin-top: 12px; text-align: center;} .profile_popup_achievement > div:nth-child(3) > span{padding: 4px 10px; font-size: 11px; background: var(--bg_silvercalm); border-radius: 5px;} .profile_popup_achievement > div:nth-child(4){margin-top: 15px; text-align: center;} .profile_popup_achievement > div:nth-child(5){margin-top: 25px;} /**NOTIFICATION**/ .notif_canvas{min-height: 500px;} .notif_pl{} .notif_pl > div{padding: 15px;} .notif_pl > div > div{display: table; width: 100%; table-layout: fixed;} .notif_pl > div > div > div{display: table-cell; vertical-align: middle;} .notif_pl > div > div > div:first-child{width: 30px; vertical-align: top;} .notif_pl > div > div > div:nth-child(2){padding-left: 15px;} .notif_pl > div > div > div:last-child{width: 120px; text-align: right;} .notif_pl .nl_photo{width: 30px; height: 30px; border-radius: 50%;} /**MESSAGES**/ .mes_first{padding: 100px 0px 190px 0px; text-align: center;} .mes_first > div:nth-child(2){margin-top: 25px;} .mes_first > div:nth-child(3){margin-top: 35px; padding: 5px 15px 7px 15px; font-size: 11px; background: var(--bg_green); border-radius: 5px; color: var(--text_white); width: 400px;} .mes_first > div:nth-child(3) .mf_icon{width: 16px; height: 16px; float: left;} .mes_empty{padding: 130px 35px 190px 35px;} .mes_empty > div:first-child{font-family: 'bold'; font-size: 17px;} .mes_empty > div:nth-child(2){margin-top: 15px;} .mes_body{display: table; width: 100%; min-height: 500px;} .mes_body > div{display: table-cell; vertical-align: top; position: relative;} .mes_body > div:first-child{width: 280px; min-height: 500px; border-right: 0.5px solid #e8e8e8; list-style-type: none;} .mes_body > div:first-child > span > li{border-bottom: 1px solid #f6f6f6;} .mes_body > div:first-child > span > li:last-child{border-bottom: 0px;} .mes_body > div:last-child{min-height: 500px;} .mes_head{padding: 15px;} .mes_head > div{display: table; width: 100%; table-layout: fixid;} .mes_head > div > div{display: table-cell; vertical-align: middle;} .mes_head a{display: inline-block; vertical-align: middle;} .mes_head .mh_profile{display: grid; grid-template-columns: 35px 1fr; grid-gap: 10px;} .mes_head .mh_profile > div{width: 100%;} .mes_head .mh_profile > div:first-child > div{width: 35px; height: 35px; background-color: var(--bg_silvercalm); border-radius: 50%;} .mes_head .mh_profile > div:nth-child(2) > div:first-child{font-weight: bold; color: var(--text_black); display: grid; width: 100%;} .mes_head .mh_profile > div:nth-child(2) > div:nth-child(2){font-size: 11px; color: var(--text_silver); margin-top: 1px;} .mes_head > div > div:last-child{width: 145px; text-align: right; font-size: 13px;} .mes_box{padding: 0px 15px 15px 15px;} .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: 45px 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);} /**SETTINGS**/ .set_identity_layout{display: grid; grid-template-columns: 250px 1fr; grid-gap: 25px;} .set_identity_layout > div{width: 100%;} .set_date{display: inline-block;} .set_date > div{display: table; width: 100%; float: left; table-layout: fixed;} .set_date > div > div{display: table-cell;} .set_date > div > div:not(:last-child){padding-right: 15px;} .set_date > div > div:first-child{width: 35%;} .set_date > div > div:nth-child(2){width: 45%;} .set_photo{width : 110px; height: 110px; border-radius: 50%;} .set_cover{padding-bottom: 37%; border-radius: 5px;} .set_privacy{width: 100%; table-layout: fixed; border-collapse: collapse;} .set_privacy tr td{padding: 10px 0px;} .set_privacy tr td:first-child > div:first-child{font-weight: bold;} .set_privacy tr td:first-child > div:nth-child(2){font-size: 11px; margin-top: 3px; color: var(--text_silver);} .set_con{list-style-type: none;} .set_con > li{padding: 15px;} .set_con > li:not(:last-child){border-bottom: 1px solid var(--bg_line);} .set_con > li > div:first-child{margin-bottom: 3px; font-size: 17px; font-family: 'bold';} .set_con > li > div:nth-child(2){color: var(--text_silver);} .set_con > li > div:nth-child(3){margin-top: 10px;} /**CART**/ .cart_head{padding: 10px 15px; border-radius: 5px; background: var(--bg_bluecalm); display: grid; grid-template-columns: 20px 1fr; grid-gap: 15px; 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.sticky{position: sticky; top: 75px;} .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;} /**TRANSACTION**/ .trans_layout{display: grid; grid-template-columns: 250px 1fr; grid-gap: 25px; margin-top: 25px;} .trans_layout > div{width: 100%;} .trans_layout .tlLeft{position: sticky; top: 75px;} .trans_layout .tltitle{font-size: 20px; font-weight: bold;} /**WALLET**/ .wallet_info{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 35px; margin-top: 25px; margin-bottom: 25px;} .wallet_info > div{width: 100%;} .wallet_info .wiData{padding: 25px; background-color: var(--bg_blue); border-radius: 10px; color: var(--text_white);} .wallet_info .wiData > div:first-child{margin-bottom: 10px; font-family: 'bold';} .wallet_info .wiData > div:first-child > span:first-child{font-size: 55px; margin-right: 15px;} .wallet_info .wiData > div:first-child > span:last-child{font-size: 20px;} .wallet_info .wiData > div:last-child{border-top: 1px solid var(--bg_bluedark); padding-top: 20px;} .wallet_info .wiTopUp > div:first-child{font-size: 20px; font-family: 'bold';} .wallet_info .wiTopUp > div:nth-child(2){margin-top: 5px;} .wallet_info .wiTopUp > div:nth-child(3){margin-top: 25px;} .wallet_info .wiHistory > div:first-child{font-size: 20px; font-family: 'bold'; margin-bottom: 10px;} .wallet_info .wiHistory .whItems > div{padding: 10px 15px; border-radius: 5px; border: 1px solid var(--bg_line);} .wallet_info .wiHistory .whItems > div:not(:last-child){margin-bottom: 10px;} .wallet_info .wiHistory .whItems > div > div:first-child{font-size: 11px; font-weight: bold;} .wallet_info .wiHistory .whItems .wiStatus{padding: 3px 10px; border-radius: 50px; margin-right: 10px;} .wallet_info .wiHistory .whItems .wiStatus.IN{background: var(--bg_green); color: var(--text_white);} .wallet_info .wiHistory .whItems .wiStatus.OUT{background: var(--bg_silver); color: var(--text_white);} .wallet_info .wiHistory .whItems > div > div:nth-child(2){margin-top: 5px;} .wallet_info .wiHistory .whItems .wiInfo > div{display: inline-block; font-size: 11px;} .wallet_info .wiHistory .whItems .wiInfo > div:not(:last-child){margin-right: 5px;} .wallet_info .wiHistory .whItems .wiInfo > div:first-child{font-weight: bold; color: var(--text_blue);} .wallet_info .wiHistory .whItems .wiInfo > div:nth-child(2){color: var(--text_silver);} /**COMPETITION**/ .compBanner{display: grid; grid-template-columns: 1fr 350px; grid-gap: 20px; margin-bottom: 50px; align-items: center;} .compBanner > div{width: 100%; box-sizing: border-box;} .compBanner > div:first-child{margin-top: 15px; padding: 0px 25px 20px 25px;} .compBanner > div:first-child > div:first-child{font-size: 17px;} .compBanner > div:first-child > div:nth-child(2){margin-top: 10px;} .compBanner > div:nth-child(2){padding-bottom: 40%; background-image: url('../../../images/background/competition.png');} .compHead{display: grid; grid-template-columns: 350px 1fr; grid-gap: 20px;} .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 > div:nth-child(2){padding: 10px;} .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;} .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-top: 25px; font-weight: bold; border-radius: 5px; background: var(--bg_silvercalm);} /**SPECIAL PAGE**/ .sp_background{position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; display: grid; grid-template-columns: 450px 1fr;} .sp_background > div{width: 100%;} .sp_background > div:first-child{background: var(--bg_blue);} .sp_layout{width: 900px; height: 350px; display: grid; grid-template-columns: 350px 1fr; grid-gap: 35px; margin-top: 60px;} .sp_layout > div{width: 100%; position: relative;} .sp_layout > div:nth-child(2){padding-bottom: 35px;} .sp_layout .spCover{width: 350px; height: 350px; position: sticky; top: 95px;} .sp_layout .spTitle > div:first-child{font-weight: bold;} .sp_layout .spTitle > div:nth-child(2){font-family: 'bold'; font-size: 25px;} .sp_layout .spTitle > div:nth-child(3){color: var(--text_silver);} .sp_layout .spDesc{margin-top: 25px;} .sp_layout .spPrice{margin-top: 20px; white-space: nowrap;} .sp_layout .spPrice > div{display: inline-block;} .sp_layout .spPrice .spStrike{font-size: 17px; font-weight: bold; color: var(--text_red); text-decoration: line-through; margin-right: 5px;} .sp_layout .spPrice .spOriginal{font-size: 20px; font-family: 'bold'; color: var(--text_blue);} .sp_layout .spPrice .spDiscount{position: relative; top: -10px; padding: 3px 5px 2px 5px; color: var(--text_white); background: var(--bg_orange); border-radius: 5px; font-size: 11px;} .sp_layout .spPreorder{margin-top: 45px; font-weight: bold; padding: 7px 15px; border: 1.5px solid var(--bg_silver); border-radius: 10px;} .sp_layout .spToContent{margin-top: 25px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px;} .sp_layout .spToContent > a{width: 100%; color: var(--text_white);} .sp_layout .spToContent > a > div{border-radius: 5px; padding: 5px 13px; box-sizing: border-box; display: grid; grid-template-columns: 25px 1fr; grid-gap: 10px; align-items: center;} .sp_layout .spToContent > a > div > div{width: 100%;} .sp_layout .spToContent > a > div > div:first-child > div{width: 25px; height: 25px;} .sp_layout .spToContent > a > div > div:nth-child(2) > div:first-child{font-size: 9px;} .sp_layout .spToContent > a > div > div:nth-child(2) > div:nth-child(2){margin-top: -3px;} .sp_layout .spToContent > a.kwikku > div{background: var(--bg_blue);} .sp_layout .spToContent > a.tokopedia > div{background: var(--tokopedia);} .sp_layout .spToContent > a.shopee > div{background: var(--shopee);} .sp_layout .spBanner{margin-top: 25px;} .sp_layout .spBanner > img{width: 100%;} .sp_layout .spUser{display: grid; grid-template-columns: 45px 1fr; grid-gap: 15px; align-items: center; margin-top: 30px;} .sp_layout .spUser > div{width: 100%;} .sp_layout .spUser > div:first-child > div{width: 45px; height: 45px; border-radius: 50%;} .sp_layout .spUser > div:nth-child(2) > div:first-child{font-weight: bold;} .sp_layout .spUser > div:nth-child(2) > div:nth-child(2){font-size: 11px;} /**ERROR**/ .e_404{height: 250px; padding-top: 50px;} .e_404 > div:first-child{width: 300px; height: 125px; background-image: url('../../../images/error_404.png');} .e_404 > div:last-child{font-size: 25px; text-align: center; margin-top: 40px;} .e_notavail{padding-top: 50px; padding-bottom: 50px;} .e_notavail > div:first-child{width: 125px; height: 125px; 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{width: 600px; font-size: 17px; color: var(--text_silver); text-align: center; margin-top: 20px;} .e_login{display: grid; grid-template-columns: 1fr 250px; grid-gap: 25px; 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: 50px 25px; text-align: center;} .e_login .elContent > div button{width: 100%;} .e_info{width: 500px; padding-top: 100px; padding-bottom: 50px;} .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_suggest{margin-bottom: 50px; padding: 20px 25px;} .e_suggest > div:first-child{font-size: 25px; font-weight: bold;} .e_suggest > div:last-child{display: table; width: 100%; margin-top: 15px; table-layout: fixed;} .e_suggest > div:last-child > div{display: table-cell; vertical-align: top;} .e_suggest > div:last-child > div:first-child{padding-right: 15px;} .e_suggest > div:last-child > div:last-child{width: 300px;} .e_suggest .es_know1{list-style-type: none;} .e_suggest .es_know1 li{padding: 10px 0px 11px 0px;} .e_suggest .es_know1 li > div{display: table; table-layout: fixed; width: 100%;} .e_suggest .es_know1 li > div > div{display: table-cell; vertical-align: middle;} .e_suggest .es_know1 li > div > div:first-child{width: 170px;} .e_suggest .es_know1 li > div > div:last-child{padding-left: 20px; font-size: 20px;} .e_suggest .es_know1 .ek_photo{width: 170px; height: 100px; border-radius: 5px;} .e_suggest .es_know2{list-style-type: none;} .e_suggest .es_know2 li{padding: 10px 10px 11px 10px;} .e_suggest .es_know2 .ek_photo{height: 130px; border-radius: 5px;} .e_suggest .es_know2 .ek_desc{padding: 10px 0px 5px 0px; font-size: 15px; font-family: 'bold';} .empty_body{margin: 60px 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;}