@font-face{
	font-family:'regular';
	src: url('../styles_fonts/regular.otf');
}
@font-face{
	font-family:'bold';
	src: url('../styles_fonts/bold.otf');
}
@font-face{
	font-family:'novel';
	src: url('../styles_fonts/novel.otf');
}
@font-face{
	font-family:'script';
	src: url('../styles_fonts/script.ttf');
}

*{margin: 0px auto; padding: 0px;}
body{font-family: 'regular', verdana; font-size: 14px; color: var(--text_black); background: var(--bg_base);}
a{color: var(--text_blue); text-decoration: none;}
a.ablack{color: var(--text_black); transition: all 0.2s ease;}
a.ablack:hover{color: var(--text_blue);}
.bold{font-family: 'bold';}

::-webkit-scrollbar{width: 10px; height: 5px;}
::-webkit-scrollbar-track{background: #d8d8d8;}
::-webkit-scrollbar-thumb{background: #a2a2a2;}
::-webkit-scrollbar-thumb:hover{background: #6d6d6d;}
div::-webkit-scrollbar {width: 7px; height: 5px;}
div::-webkit-scrollbar-track {background: transparent;}
div::-webkit-scrollbar-thumb {background: #cacaca;}
div::-webkit-scrollbar-thumb:hover {background: #9d9d9d;}

div{word-wrap: break-word;}
[contenteditable=true]:empty:before{content: attr(placeholder); display: block; color: var(--text_silver); cursor: text;}
[setplaceholder=true]:empty:before{content: attr(placeholder); display: block; color: var(--text_silver); cursor: text;}
input, textarea, select{box-sizing: border-box; background: var(--bg_white); color: var(--text_black); outline: none; border: 1px solid silver;}
input.input_warning, textarea.input_warning{border: 1px solid red; box-shadow: 0px 0px 5px red;}
.input{padding: 10px; width: 100%; border-radius: 5px; outline: none;}
.input.required{border: 1px solid red; box-shadow: 0px 0px 5px red;}
.input:disabled{background: #d5d5d5;}
textarea{font-family: 'regular'; resize: vertical; min-height: 36px;}
textarea.autogrow{overflow: hidden;}
.input_currency{display: grid; grid-template-columns: 35px 1fr; grid-gap: 5px; align-items: center;}
.input_currency > div{width: 100%;}
.input_currency > div:first-child{font-weight: bold; left: 9px; position: relative; color: var(--text_silver);}

.btn{border: none; padding: 8px 20px; border-radius: 50px; box-shadow: 0px 2px 5px var(--shadow_btn); cursor: pointer; font-weight: bold; outline: none;}
.btn:hover{box-shadow: none;}
.btn.btn_full{width: 100%;}
.btn.btn_red{background: #e74c3c; color: white;}
.btn.btn_green{background: #27ae60; color: white;}
.btn.btn_blue{background: var(--bg_blue); color: white;}
.btn.btn_orange{background: var(--bg_orange); color: white;}
.btn.btn_white{background: var(--bg_white); color: var(--text_blue);}
.btn[disabled=disabled], .btn:disabled{background: #f3f3f3; color: #d0d0d0;}

.button_group{white-space: nowrap; width: 100%; overflow: auto; font-size: 0px;}
.button_group::-webkit-scrollbar{display: none;}
.button_group button{border: none; font-family: 'regular'; border-radius: 0px; font-size: 14px; background: var(--bg_white); padding: 5px 15px 7px 15px; display: inline-block; outline: none; cursor: pointer; position: relative;}
.button_group button:before{content: ''; position: absolute; bottom: 5px; left: 0; right: 0; margin-left: auto; margin-right: auto; height: 2px; width: 50%; background: var(--bg_blue); border-radius: 10px; opacity: 0;}
.button_group button:first-child{border-radius: 5px 0px 0px 5px;}
.button_group button:last-child{border-radius: 0px 5px 5px 0px;}
.button_group button:hover{background: var(--bg_silver);}
.button_group button:active{background: var(--bg_blue); color: var(--text_white);}
.button_group button span{margin-right: 7px;}
.button_group:after{content: ''; clear: both; display: table;}
.button_group button.active{color: var(--text_blue);}
.button_group button.active:before{opacity: 1;}
.button_group button.active:active{color: var(--text_white);}
.button_group button span{padding: 2px 5px 2px 5px; border-radius: 5px; background: var(--bg_blue); color: var(--text_white); font-size: 11px;}

.pagination{border: 1px solid var(--bg_line); border-radius: 5px; display: inline-block; overflow: hidden;}
.pagination > div{display: inline-block; vertical-align: middle;}
.pagination .pgBtn{padding: 7px 10px; cursor: pointer;}
.pagination .pgBtn.disabled{background: var(--bg_silvercalm);}
.pagination .pgBtn > div{width: 15px; height: 15px;}
.pagination .pgBtn.disabled > div{opacity: 0.5;}
.pagination .pgOpt select{outline: none; padding: 5px 10px; border: none; cursor: pointer;}

.check_group{margin: 5px 0px;}
.check_group label{cursor: pointer;}
.check_group > div{display: inline-block; padding: 5px;}
.check_group input{top: 1.5px; position: relative; margin-right: 3px;}

.option_bar{position: relative; overflow: auto; width: 100%;}
.option_hzl{display: table; width: 100%;}
.option_hzl > div{white-space: nowrap; font-size: 0px; float: left; background: var(--bg_silversoft); border-radius: 50px;}
.option_hzl > div > a{display: inline-block; font-size: 13px;}
.option_hzl > div > a > div{padding: 7px 15px; color: var(--text_silver);}
.option_hzl > div > a > div > span{padding: 3px 5px; margin-left: 5px; background: var(--bg_silver); border-radius: 3px; font-size: 9px; position: relative; top: -1.5px;}
.option_hzl > div > a:first-child > div{border-radius: 50px 0px 0px 50px;}
.option_hzl > div > a:last-child > div{border-radius: 0px 50px 50px 0px;}
.option_hzl > div > a:hover > div{color: var(--text_blue);}
.option_hzl > div > a:hover > div > span{color: var(--text_silver);}
.option_hzl > div > a.active > div{background: var(--bg_blue); color: var(--text_white); border-radius: 50px;}
.option_hzl > div > a.active > div > span{background: var(--bg_white); color: var(--text_blue);}

.table{overflow: hidden; border: 1px solid var(--bg_line); border-radius: 10px;}
.table table{border-collapse: collapse; width: 100%; table-layout: fixed;}
.table table th, .table table td{padding: 10px; border: 1px solid var(--bg_line);}
.table table th{text-align: center; background-color: #444444; color: white;}
.table table th.t_no{width: 30px; text-align: center;}
.table table th.t_img{width: 100px; text-align: center;}
.table table th.t_action{width: 100px; text-align: center;}
.table table tr:nth-child(even){background-color: #ececec;}
.table table td{text-align: left;}
.table table td img{width: 100%;}
.table_sticky{max-height: 405px; overflow: auto;}
.table_sticky table th{position: sticky; top: 0px;}
.table_header{height: 30px;}
.table_header span{float: right; position: relative; z-index: 1;}
.table_header span:after{content: ''; position: absolute; width: 23px; height: 23px; background: #27ae60; top: 0px; right: 0px; border-radius: 0px 5px 5px 0px;}
.table_header span input{padding: 3px 28px 3px 5px; outline: none; border: 1px solid #27ae60; border-radius: 5px;}
.table_header p{top: 5px; position: relative;}

.description{line-height: 25px; font-size: 15px;}
.description img{margin: 5px auto; max-width: 100%;}
.description p{padding: 7.5px 0px; font-size: 17px;}
.description p.aligncenter{text-align: center;}
.description p.alignright{text-align: right;}
.description pre{overflow: auto;}
.description img, .description iframe{margin: 10px auto;}
.description img{max-width: 100%; display: block;}
.description iframe{width: 100%; height: 400px;}
.description li{margin-left: 40px; padding: 7.5px 0px;}
.description ol{margin-left: 80px; padding: 7.5px 0px;}
.description ol li{margin-left: 0px; padding: 0px; text-indent: 0px;}
.description h1{line-height: 40px;}
.description h2{line-height: 40px;}
.description iframe{border: none; margin: 10px 0px;}
.description blockquote{padding: 15px 25px 16px 25px; margin: 15px 0px; border-left: 5px solid #DFDFE4;}
.description span.source-text{font-size: 12px; color: var(--text_silver);}
.postdesc img{width: 100%;}
.poststatus{font-size: 23px; line-height: 30px;}
.poststatus img{width: 22px; height: 22px; margin: 0px !important; display: inline !important;}

.tooltip_box{color: var(--text_white); background: var(--bg_black); box-shadow: 0 0 5px var(--bg_silver); position: absolute; z-index: 200; padding: 4px 7px 5px 7px;; text-align: left; border-radius: 5px; font-size: 11px;}
.tooltip_hide{display: none;}

.hover:hover, .hover_active{background: var(--bg_hover);}
.bg_white{background: var(--bg_white);}
.bg_silver{background-color: var(--bg_silver);}
.bg_silvercalm{background-color: var(--bg_silvercalm);}
.bg_blue{background-color: var(--bg_blue);}
.bg_yellow{background-color: var(--bg_yellow);}
.bg_orangecalm{background-color: var(--bg_orangecalm);}
.bg_novel{background-color: var(--bg_novel);}
.bg_script{background-color: var(--bg_script);}
.bg_scrpt{background-color: var(--bg_script);}
.bg_comic{background-color: var(--bg_comic);}
.bg_flash{background-color: var(--bg_flash);}
.bg_short{background-color: var(--bg_short);}
.bg_artwork{background-color: var(--bg_artwork);}

.text_white{color: var(--text_white);}
.text_silver{color: var(--text_silver);}
.text_blue{color: var(--text_blue);}
.text_black{color: var(--text_black);}
.text_red{color: var(--text_red);}
.text_orange{color: var(--text_orange);}
.text_green{color: var(--text_green);}

.fz_mini{font-size: 11px;}
.fz_normal{font-size: 13px;}
.fz_medium{font-size: 15px;}
.fz_big, h1{font-size: 20px;}

.pc{display: block;}
.mobile{display: none;}

.ellipsis{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;}
.border_shadow{box-shadow: var(--shadow);}
.border{box-shadow: 0px 0px 0px 1px var(--bg_line);}
.loading{width: 50px; height: 50px;}
.shake{animation: shake 0.5s; animation-iteration-count: infinite;}
.left{float: left;}
.right{float: right;}
.pointer{cursor: pointer;}
.bsfull{background-size: 100%; background-position: center;}
.bscover{background-size: cover; background-position: center;}
.imgfull img{max-width: 100%; display: block; margin: 0 auto;}
.line{height: 2px; background: var(--bg_line);}
.list10{margin: 10px 0px;}
.list{margin: 5px 0px;}
.list p{margin-bottom: 5px; font-weight: bold; color: var(--text_hl);}
.p15{padding: 15px;}
.p20{padding: 20px;}
.p25{padding: 25px;}
.plr15{padding: 0px 15px}
.ptb15{padding: 15px 0px}
.ptb25{padding: 25px 0px}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt25{margin-top: 25px;}
.mt35{margin-top: 35px;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb35{margin-bottom: 35px;}
.ml5{margin-left: 5px;}
.ml10{margin-left: 10px;}
.mr5{margin-right: 5px;}
.mr10{margin-right: 10px;}
.mr15{margin-right: 15px;}
.mr20{margin-right: 20px;}
.br5{border-radius: 5px;}
.br10{border-radius: 10px;}
.brt5{border-radius: 5px 5px 0px 0px;}
.brb5{border-radius: 0px 0px 5px 5px;}
.brl5{border-radius: 5px 0px 0px 5px;}
.brr5{border-radius: 0px 5px 5px 0px;}
.ofh{overflow: hidden;}
.slow{-webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease;}
.hidden{display: none;}
.opacity{opacity: 0;}
.clear{clear: both;}