.board-view { display: block; padding: 30px 0 0; border: 1px #333 solid; background: #222; }
.board-view .view-title { display: block; border-bottom: 1px #333 solid; padding: 0 20px 10px; text-align: left; font-size: 20px; color: #fff; }
.board-view .view-title cc { display: block; }
.board-view .view-title .title-date { display: block; font-size: 12px; color: #999; }
.board-view .view-cont { display: block; border-bottom: 1px #333 solid; padding: 30px 20px; text-align: left; font-size: 14px; color: #fff; }

.popup { padding:0; z-index:9999; background:linear-gradient(#111 0%, #222 100%); color:#eee; box-shadow:rgba(0, 0, 0, 0.8) 0 10px 20px; border:1px #333 solid; width:400px; position:absolute; top:10%; right:20%; }
.popup h1 { position:relative; padding:10px; font-size:12px; font-weight:400; line-height:20px; background:#000; color:#eee; }
.popup .topline { position:relative; bottom:0; margin:0 10px 0; height:50px; }
.popup .topline h2 { position:relative; float:right; line-height:50px; color:#eee; font-size:12px; font-weight:400; }
.popup .topline .closebox { position:relative; float:right; margin:18px 10px; }
.popup .topline .check { position:relative; float:right; margin:18px 5px 0 0; }

.select-search-div { display:block; padding: 10px 10px; clear: both; text-align: left; }
.select-search-div .ssd-box { display: inline-block; width: 140px; height: 40px; margin: 0 15px 0 0; }
.select-search-div .ssd-box select { color: #26f496; font-display: 16px; font-weight: bold; width: 100%; height: 40px; background: transparent; border: 0; }
.select-search-div .ssd-box select:focus { outline: none; }
.select-search-div .ssd-box select option { background: #000; color: #fff; }

.responsive-formdiv { display: block; margin: 50px 10px 0; }

.formdivname { display: block; padding: 15px; color: #ffa200; font-size: 18px; text-align: left; }

.responsive-formdiv input { border: 1px #333 solid; width: 100%; height: 34px; border-radius: 6px; text-indent: 10px; font-size: 12px; color: #fff; background: #151515; }
.responsive-formdiv input:focus { outline: none; }
.responsive-formdiv select { border: 1px #333 solid; width: 100%; height: 36px; border-radius: 6px; text-indent: 10px; font-size: 12px; color: #fff; background: #151515; }
.responsive-formdiv select:focus { outline: none; }


.formdiv-wrap { display: inline-flex; flex-wrap: wrap; margin: 5px 0 0; font-size: 12px; color: #fff; }
.formdiv-wrap .input-box { flex: auto; flex-basis: auto; align-items: center; display: flex; word-break: break-all; margin: 0 2px 0; min-width: 105px; position: relative; }
.formdiv-wrap .input-box input[type=checkbox] { width: inherit; height: inherit; margin: 0 5px 0 0; }

.formdiv-wrap .input-box .namelabel { position: absolute; top: -10px; left: 10px; background: #151515; padding: 2px; color: #fff; font-size: 12px; }

.basic-btn1 { width: 100%; min-width: 60px; padding: 10px 0; border-radius: 5px; background: #1bb394; text-align: center; color: #fff; font-size: 12px; cursor: pointer; }
.basic-btn2 { width: 100%; min-width: 60px; padding: 10px 0; border-radius: 5px; background: #444; text-align: center; color: #999; font-size: 12px; cursor: pointer; }

.ptrcont-wrap { display: block; margin: 5px 0 0; }

.prtcont-thead { display: flex; flex-wrap: wrap; border-bottom: 1px #333 solid; border-left: 1px #333 solid; border-top: 1px #333 solid; }
.prtcont-thead .thead-div { flex: 5%; align-items: center; justify-content: center; text-align: center; display: flex; word-break: break-all; background: #222; color: #999; height: 30px; border-bottom: 1px #333 solid; border-right: 1px #333 solid; }

.prtcont-tbody { display: flex; flex-wrap: wrap; border-bottom: 1px #222 solid; border-left: 1px #222 solid; }
.prtcont-tbody .tbody-div { flex: 5%; align-items: center; justify-content: center; display: flex; word-break: break-all; background: #151515; color: #fff; height: 30px; border-bottom: 1px #222 solid; border-right: 1px #222 solid; }
.prtcont-tbody .tbody-div a { color: #2DA7FF; }
.prtcont-tbody .down-arrow { width: 10px; height: 10px; background: url("../images/down.jpg") center center no-repeat; background-size: 100%; display: inline-block; margin: 0 0 0 5px; }
.prtcont-tbody .up-arrow { width: 10px; height: 10px; background: url("../images/up.jpg") center center no-repeat; background-size: 100%; display: inline-block; margin: 0 0 0 5px; }

.tdy-clr-bl { color: #2DA7FF; }
.tdy-clr-rd { color: #ff0000; }

.sub-userinfo { border-radius: 10px; margin: 10px; background: #222; border: 1px #252525 solid; padding: 15px; }
.sub-userinfo .subuiname { font-size: 20px; font-weight: bold; color: #ffa200; text-align: left; display: block; padding-left: 10px; }
.sub-userinfo .tabarea { display: block; margin: 20px 0 0; height: 50px; }
.sub-userinfo .tabarea .tabareabutton { width: 120px; text-align: center; line-height: 50px; height: 50px; color: #999; font-size: 14px; cursor: pointer; float: left; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.sub-userinfo .tabarea .tabareabutton:hover { color: #fff; }
.sub-userinfo .tabarea .on { background: #292929; color: #fff; }

.sub-userinfo .cont-contents { position: relative; padding: 10px 10px 20px; background: #292929; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-right-radius: 5px; }

.ccui-cont { display: block; margin: 10px 0 0; border: 1px #444 solid; border-radius: 4px; background: #333; }
.ccui-cont .ccuicontname { display: block; padding: 10px; font-size: 14px; color: #ffa200; text-align: left; border-bottom: 1px #444 solid; }

.ccui-cont .ccui-tbody { display: flex; flex-wrap: wrap; border-bottom: 1px #333 solid; border-left: 1px #333 solid; border-top: 1px #444 solid; }
.ccui-cont .ccui-tbody .ccui-div { flex: auto; align-items: center; display: flex; word-break: break-all; height: 50px; border-right: 1px #444 solid; color: #fff; padding-left: 100px; position: relative; }
.ccui-cont .ccui-tbody .ccui-div cc { position: absolute; color: #999; left: 5px; top: 0; width: 90px; height: 50px; text-align: left; align-items: center; display: flex; word-break: break-all; }

.ccui-cont .ccui-tbody .ccui-div input { border: 1px #444 solid; width: auto; height: 34px; border-radius: 6px; text-indent: 10px; font-size: 12px; color: #fff; background: #252525; }
.ccui-cont .ccui-tbody .ccui-div input:focus { outline: none; }
.ccui-cont .ccui-tbody .ccui-div select { border: 1px #444 solid; width: auto; height: 36px; border-radius: 6px; text-indent: 10px; font-size: 12px; color: #fff; background: #252525; }
.ccui-cont .ccui-tbody .ccui-div select:focus { outline: none; }

.cc-buttonarea { display: block; margin: 6px 0 0; }
.cc-buttonarea .agrbutton { display: block; padding: 15px 0; text-align: center; background: #444; border-radius: 5px; cursor: pointer; color: #fff; font-size: 15px; }
.cc-buttonarea .agrbutton:hover { background: #666; }

.subsubtabarea { display: block; margin: 20px 0 5px; height: 50px; border-bottom: 1px #333 solid; }
.subsubtabarea .tabareabutton { width: 120px; text-align: center; line-height: 50px; height: 50px; color: #999; font-size: 14px; cursor: pointer; float: left; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: 0; margin: 0 2px 0 0; }
.subsubtabarea .tabareabutton:hover { color: #fff; border: 1px #333 solid; border-bottom: 1px #151515 solid; background: #151515; }
.subsubtabarea .on { color: #fff; border: 1px #333 solid; border-bottom: 1px #151515 solid; background: #151515; }