.bg-red {background-color:red !important;}
.dashboard {display:flex; min-height:100vh;}
.sidebar {width:220px; min-height:100%;  flex:0 0 auto; background-color:#333;}
.sidebar .box-logo {padding:16px; text-align: center; border-bottom:1px solid #555;}
.sidebar .box-logo .logo {font-size:20px; font-weight:600; color:#fff;}
.sidebar .navs {margin-top:20px;}
.sidebar .nav {display:block; padding:20px 20px; padding-left:30px; color:#fff; transition:all .3s;}
.sidebar .nav:hover {background-color:#000;}
.sidebar .nav.active {background-color:#000;}
.container {max-width:calc(100% - 220px); flex:auto; background-color:#eeeeee;}
.container-head {display:flex;  justify-content:space-between;  align-items:center; padding:20px 40px; background-color:#fff;}
.container-head .title .point {font-weight:600;}
.container-head .btn.underline {margin-right:20px; font-weight:600;}
.container-head .btn.point {padding:10px 20px; background-color:#333; color:#fff; border-radius:3px;}
.container-inner {padding:40px;}
.container-btns {display:flex; justify-content:flex-end; margin-bottom:20px;}
.container-btns .m-btn {margin-left:8px;}
.container-title {margin-bottom:20px; font-size:24px; font-weight:600; text-align: left;}
.box-login form {max-width:360px; margin:0 auto;}
.box-login .logo {margin-bottom:40px; font-size:24px; font-weight:600; text-align: center;}
.box-login {padding:80px; background-color:#fff;}
.box-login .links {text-align: right;}
.box-login .link { color:#999;}
.box-login .point {margin:0 8px; font-size:14px; color:#999;}
.box-login .m-btn.type01 {display:block; width:100%; margin-top:40px; text-align: center;}

.box-search {display:flex; align-items: center; justify-content: space-between; margin-bottom:20px;}
.box-search .right {display:flex;}
.box-search .right > div {margin-right:8px;}
.box-search .right .btn {height:40px; padding:0 30px; background-color:#333; color:#fff; border-radius:5px;}

.create img {max-width:100%;}

.webview {background-color:#fff;}
.webview .container {width:100%; max-width:100%;}
.area-letters > .title {margin-bottom:20px; font-size:20px; font-weight:500; text-align: center;}
.area-letters .m-ratioBox-wrap .title {display:none;}
.area-letters .bottom {display:flex; align-items: flex-end; justify-content: space-between;}
.area-letters .letters {}
.area-letters .letter .title {margin:10px 0; margin-bottom:4px; text-align:left; font-size:18px; font-weight:500; word-break: keep-all;}
.area-letters .letter {display:block; margin-bottom:20px; padding:20px; border-radius:5px; box-shadow:0px 0px 6px rgba(0,0,0,0.16); overflow:hidden; background-color:#fff;}
.area-letters .letter .date {display:block; margin-top:4px; font-size:14px; color:#777;}
.area-letters .letter .read {font-size:12px; color:#999;}
.area-letters .letter .read.active { color:#23b9fe;}

.letter-show {padding:40px;  background-color:#fff;}
.letter-show .title {margin:10px 0; padding-bottom:20px; border-bottom:1px solid #e1e1e1; font-size:20px; font-weight:600; word-break: keep-all; text-align: center;}
.letter-show img {width:100%;}
.letter-show .body {min-height:200px; margin-top:20px; margin-bottom:20px; white-space: pre-line; text-align: center; line-height:24px;}
.letter-show .btn {display:flex; align-items: center; justify-content: center; width:100%; padding:8px 10px; font-weight:500; font-size:14px; border:2px solid #e1e1e1; border-radius:3px;}
.letter-show .btn .circle {content:""; width:10px; height:10px; margin-right:10px; position:relative; top:1px; border-radius:100%; background-color:#e1e1e1;}
.letter-show .btn.active {border-color:#23b9fe; color:#23b9fe;}
.letter-show .btn.active .circle {background-color:#23b9fe;}

.ck-editor__editable {
    min-height: 400px;
}
.ck-editor h1 {font-size:30px; font-weight:600;}
.ck-editor h2 {font-size:24px; font-weight:600;}
.ck-editor h3 {font-size:20px; font-weight:600;}
.ck-editor ol li {list-style-type: decimal;}
.ck-editor ol li {list-style-type: decimal;}

.section.type01 {margin-bottom:40px;}
.section.type01:last-of-type {margin-bottom:0;}
.section.type01 .section-title {margin-bottom:20px; font-size:24px; font-weight:500;}

.tables tbody {display:flex; flex-wrap:wrap;}
.tables tbody tr {width:25%;}
.tables tbody th {width:100px;}


.box-bottom-paging {display:flex; align-items: center; justify-content: space-between; margin-top:20px;}
.box-bottom-paging .m-pagination {margin-top:0;}

.round-detail .box-filter {padding:20px;}
.round-detail .infos {display:flex; margin-bottom:10px;}
.round-detail .info {margin-right:20px;}
.round-detail .info .point {font-weight:600;}
.round-detail .m-input-radios {display:flex;}
.round-detail .m-input-radios .input-radio {margin-right:20px;}
.round-detail .box-bottom {display:flex; justify-content: space-between; align-items: center;}
.round-detail .m-table.type01 {border-top:1px solid black;}
.round-detail .box-bottom-paging {margin-top:0;}
.round-detail .box-bottom-paging .title {margin-right:16px; padding:4px 16px; background-color:#199782; color:#fff; font-size:14px;}
.round-detail .box-table {min-height:600px; padding:20px;}
.round-detail .box-feedback .fragments {display:flex; justify-content: space-between; padding:0 100px;}
.round-detail .box-feedback .fragments .title {margin-bottom:10px;}
.round-detail .box-feedback .fragment {margin:0 10px;}
.round-detail .box-feedback .fragment input {text-align: center;}
.round-detail .box-feedback .fragment .m-btn {white-space: nowrap;}
.round-detail .box-feedback .fragment:last-of-type {display:flex; align-items: flex-end;}
.round-detail .box-feedback {margin-bottom:20px;}

.downloads .container-btns {display:flex; flex-wrap:wrap;}
.downloads .container-btns .fragment {display:flex; align-items: center; justify-content: flex-end; width:100%; margin-top:20px;}
.downloads .container-btns .m-btn {margin-left:10px;}

.users-index .align {cursor:pointer;}
.users-index .align img {width:12px;}