@CHARSET "UTF-8";

.font-red{
    color:#e50f0f;
}

.ck-powered-by{
    display:none !important;
}
.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable){
    border:none !important;
    box-shadow: none !important;
}

.view-mode>:not(.view-group){
    display:none;
}

.list-mode>:not(.list-group){
    display:none;
}

.edit-mode>:not(.edit-group){
    display:none;
}

.edit-group, .view-group{
    font-size:16px;
}

.list-header{
    width:100%;
    border-bottom:1px solid #777;
    display:flex;
    flex-direction: row;
}

.search-text-box{
    width:300px;
}

.button-search{
    width:140px;
    color:#fff;
    background-color:rgb(24, 113, 255);
    font-size:17px;
    height: 55px;
    margin-right:20px;
}
.button-search:active{
    background-color:rgb(12, 102, 246);
}

.button-cancel{
    width:50%;
    background-color:#000000;
    color:#fff;
    font-size:17px;
    height: 55px;
}
.button-cancel:active{
    background-color:rgb(53, 53, 53);
}
.button-save{
    width:50%;
    color:#fff;
    background-color:rgb(24, 113, 255);
    font-size:17px;
    height: 55px;
}
.button-save:active{
    background-color:rgb(12, 102, 246);
}

.button-add{
    height: 55px;
    width:55px;
    border-radius:55px !important;
    font-size:30px;
    line-height:50px;
    background-color:rgb(24, 113, 255);;
    color:#fff;
}

.button-add:active{
    background-color:rgb(12, 102, 246);
}

ul.list{
    padding:30px 0px;
    border-bottom:1px solid #777;
}

.up-down-button-wrap{
    display:flex;
    flex-direction:column;
    gap:3px;
    height:55px;
    width:40px;
}

.up-down-button-wrap input{
    width:100%;
    height:50%;
    border-radius:7px;
    font-size:14px;
    color:#fff;
    background-color:#777;
}

.up-down-button-wrap.asc input.up-button{
    background-color:rgb(24, 113, 255);
    color:#fff;
}
.up-down-button-wrap.asc input.up-button{
    cursor:default;
}

.up-down-button-wrap.desc input.down-button{
    background-color:rgb(24, 113, 255);
    color:#fff;
}

.up-down-button-wrap.desc input.down-button{
    cursor:default;
}

.title-line, .title-wrap{
    display:flex;
    flex-direction: row;
}

.title-wrap.underline{
    border-bottom: 1px solid #777;
}

.height-box{
    height:50px;
}

.link-text{
    color: rgb(24, 113, 255);
    display: flex;
    align-items: flex-end;
}


.expander{
    height:30px;
    width:fit-content;
    margin-left:70px;
    color: rgb(24, 113, 255);
    cursor:pointer;
    display:flex;
    align-items: center;
    min-width:65px;
}
.expander:after{
    content: '\2303';
    display:block;
    padding: 0px 5px;
    color: rgb(24, 113, 255);
    font-size:20px;
    transform: rotate(180deg);
    height:15px;
    line-height:17px;
}

.expanded .expander:after{
    transform: rotate(0deg);
    line-height:19px;
}

.title-wrap .mode-group-title{
    flex-grow: 1;
}

.title-line .mode-group-title, .title-wrap .mode-group-title{
    font-size:22px;
    color: rgb(24, 113, 255);
}

/*   기본 스타일    */

table.list{
    width: 100%;
    padding-bottom:50px;
    border-collapse: collapse;
    border: none;
    table-layout: initial;
}
table.list thead{
    background-color:#fafafa;
}

table.list th{
    height:55px;
    font-size:16px;
    border-bottom:1px solid #d5d5d5;
}

table.list tr:hover{
    background-color:#fafafa;
    cursor:pointer;
}

table.list td{
    height:55px;
    font-size:16px;
    padding:3px 5px;
    color:#555;
    border-bottom:1px solid #eaeaea;
}

table.list td.center{
    text-align:center;
}