/* Default */
body { background-color: #fff; cursor: default; font-family: Arial; font-size: 11px; height: 100%; margin: 0px; overflow-y: scroll; position: absolute; width: 100%; zoom: 1; }
body.white { background-color: #fff; }
a { color: #313131; outline: none; text-decoration: none; }
input:focus { outline: none; }
select:focus { outline: none; }
textarea:focus { outline: none; }

.box { background-color: #f4f4f4; border: solid 1px #f4f4f4; border-radius: 2px; padding: 15px; transition: all 0.3s; }
.box.show:hover { border: solid 1px #ffbb00; }
.default-selection { background-color: #fbcb09; color: #fff; font-size: 12px; font-weight: bold; margin-top: -24px; padding: 5px 10px; position: absolute; text-align: center; width: 180px; z-index: 1; }
.error { background-color: #f60000; color: #fff; font-size: 12px; font-weight: bold; min-width: 230px; padding: 12px 15px; position: fixed; text-align: center; z-index: 9999999999; }
.item { border-bottom: solid 2px #f1f3f5; border-radius: 3px; padding-bottom: 35px; margin-bottom: 35px; transition: all 0.3s; }
.item .item-image { border-radius: 10px; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.15); height: 235px; width: 300px; }
.item .item-image img { border-radius: 10px 10px 0px 0px; height: 200px; object-fit: cover; width: 300px; }
.item .item-banner { background-color: #f1f3f5; border-radius: 0px 0px 10px 10px; color: #000; font-size: 13px; font-weight: bold; height: 15px; padding: 10px; text-align: center; }
.item .item-title { color: #000; font-size: 16px; padding: 0px 5px; transition: all 0.3s; }
.item .item-title a b { color: #000; }
.item .item-title a:hover b { color: #fbcb09; }
.item .item-desc { color: #777; font-size: 13px; margin-top: 5px; }
.loadingbox { background: #fff url(/images/waiting.gif) center no-repeat; border-radius: 3px; bottom: 10px; box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.15); height: 36px; position: fixed; right: 10px; width: 36px; z-index: 100002; }
.memberimage { background-color: #fff; height: 32px; width: 32px; }
.memberimage.normal { border-radius: 3px; height: 48px; width: 48px; }
.memberimage.medium { border-radius: 3px; height: 64px; width: 64px; }
.memberimage.large { border-radius: 3px; height: 150px; width: 150px; }
.menubox { background-color: #fff; border-left: solid 1px #e5e5e5; bottom: 0px; position: fixed; right: 0px; top: 40px; width: 350px; z-index: 40; }
.menubox .select { border-radius: 3px; padding: 15px; transition: all 0.3s; }
.menubox .select:hover { background-color: #f5f5f5; }
.messagebox { background-color: #fff; border-left: solid 1px #e5e5e5; bottom: 0px; overflow: auto; overflow-y: hidden; position: fixed; right: 0px; top: 40px; width: 350px; z-index: 40; }
.minidropdown { background-color: #fff; border: solid 1px #e0e0e0; display: none; left: -10px; position: absolute; top: 40px; width: 160px; }
.minidropdown .item { border-bottom: solid 1px #f5f5f5; color: #000; font-size: 12px; font-weight: bold; padding: 10px; transition: all 0.3s; }
.minidropdown .item:hover { background-color: #fbcb09; color: #fff; }
.object-fit { object-fit: contain; }
.pager { background-color: #f5f5f5; border-radius: 3px; bottom: 20px; color: #777; font-size: 12px; padding: 7px 10px; position: fixed; right: 30px; transition: all 0.3s; }
.profile { background-color: #f4f4f4; padding: 5px; width: 600px; }
.red-line { border-top: dashed 2px #f60000; margin-top: 40px; padding-top: 20px; }
.sidebox { background-color: #fff; border-left: solid 1px #e5e5e5; bottom: 0px; position: fixed; right: 0px; top: 40px; width: 350px; z-index: 40; }
.sidebox .select { border-radius: 3px; padding: 15px; transition: all 0.3s; }
.sidebox .select:hover { background-color: #f5f5f5; }
.tagbox { background-color: #fbcb09; border-radius: 3px; color: #fff; font-size: 11px; font-weight: bold; padding: 3px; text-align: center; }
.top-bar { background-color: rgba(255, 255, 255, 0.95); left: 280px; padding-top: 4px; position: fixed; right: 0px; top: 46px; }
.update { background-color: #35b200; color: #fff; font-size: 12px; font-weight: bold; min-width: 230px; padding: 12px 15px; position: fixed; text-align: center; z-index: 9999999999; }
.userimage { height: 200px; width: 200px; }
.userimage.small { height: 32px; width: 32px; object-fit: cover; }
.userimage .image { border-radius: 3px; height: 200px; object-fit: cover; width: 200px; }
.userimage .control { background: url(/images/camera.png) center no-repeat; border-radius: 5px; height: 32px; margin: -32px 0px 0px 2px; transition: all 0.3s; width: 32px; }
.userimage .control:hover { box-shadow: inset 0px 0px 50px rgba(255, 255, 255, 0.5); }

/* Page */
#page { min-height: 100%; min-width: 1000px; width: 100%; }
#page .top-col { background-color: #000; height: 46px; left: 0; position: fixed; right: 0; top: 0; min-width: 1000px; z-index: 50; }
#page .top-col .page-title { color: #fff; font-size: 15px; font-weight: bold; margin: 13px 10px 11px 15px; }
#page .top-col .page-title a { color: #fff; }
#page .top-col .control { margin-left: 100px; }
#page .top-col .control-link { color: #fff; cursor: pointer; font-size: 12px; font-weight: bold; min-width: 40px; margin: 11px 0px; padding: 5px 15px; text-align: center; transition: all 0.3s; }
#page .top-col .control-link:hover { color: #ddd; }
#page .left-col { background-color: #2b323a; bottom: 0px; left: 0px; overflow: auto; padding: 60px 0px 0px 0px; overflow-y: hidden; position: fixed; top: 0px; width: 90px; z-index: 30; }
#page .left-col .list { color: #fff; font-size: 12px; font-weight: 700; padding: 10px 0px; text-align: center; opacity: 0.5; transition: opacity 0.3s; }
#page .left-col .list:hover { opacity: 1; }
#page .left-col .list.selected { background-color: #ffbb00; opacity: 1; }
#page .mid-col { background-color: #f5f5f5; border-right: solid 1px #e0e0e0; bottom: 0px; left: 90px; overflow: auto; padding: 70px 0px 0px 0px; position: fixed; top: 0px; width: 190px; z-index: 20; }
#page .mid-col .selection { color: #555; font-size: 14px; padding: 12px 20px; transition: all 0.3s; }
#page .mid-col .selection .number { font-size: 12px; }
#page .mid-col .selection.active { background-color: #e0e0e0; color: #000; font-weight: bold; }
#page .mid-col .selection:hover { background-color: #e0e0e0; }
#page .mid-col .selection.active:hover { background-color: #e0e0e0; color: #000; font-weight: bold; }
#page .center-col { min-width: 795px; padding: 70px 0px 0px 120px; z-index: 10; }
#page .center-col .content { clear: both; }
#page .center-col .show-content { margin-left: 190px; }
#page .center-col .inner { padding: 5px 10px; }
#page .center-con { position: fixed; right: 20px; top: 60px; z-index: 10; }
#page .center-con-inner { position: fixed; right: 20px; top: 60px; z-index: 10; }

/* Modal Popup */
.modalBackground { background-color: #fff; filter: alpha(opacity=90); opacity: 0.9; box-shadow: inset 0px 0px 200px rgba(0, 0, 0, 0.25); }
.modal { width: 500px; }
.modalset { width: 600px; }
.modallist { width: 700px; }
.modalview { width: 900px; }
.modaledit { width: 650px; }
.modalBorder { background-color: #fff; box-shadow: 0px 7px 25px rgba(0, 0, 0, 0.3) !important; min-width: 550px; padding: 0px 10px; }
.modalBorder.mobile { min-width: 90%; width: 90%; }
.modalBanner { color: #000; font-size: 18px; font-weight: bold; margin-bottom: 10px; padding: 18px 25px; }
.modalContent { color: #777; font-size: 12px; max-height: 450px; overflow: auto; padding: 10px 30px 40px 30px; }

/* Other */
.fixed  { position: fixed; }
.absolute  { position: absolute; }
.clear:after { clear: both; content: "."; display: block; font-size: 0; height: 0; line-height: 0; visibility: hidden; }
.fl-lf { float: left; }
.fright { float: right; }
.hidden { display: none; }
.invisible { opacity: 0; }
.link:hover { text-decoration: underline; }
.overflow { overflow: auto; }
.pointer { cursor: pointer; }
.scroll { }
.textleft { text-align: left; }
.textcenter { text-align: center; }
.textright { text-align: right; }
.tx-up { text-transform: uppercase; }
.wordwrap { word-wrap: break-word; }