/* display */
.pc {display: block;}
.mobile {display: none;}


.container-main .content {position: relative; max-width:140rem;display: flex;}

.container-main .content .memo-list {position: relative; width:50%;height: 100%;min-height:100vh; min-width: 50rem; padding:1rem 1rem;}
.container-main .content .memo-list::after {position:absolute;top:0;right:0; display: inline-block; content: ""; width:1px; height:100%; min-height:100vh;background-color:#cdcdcd;}
.container-main .content .memo-detail {position: relative; width:50%;height: 100%; min-height:100vh; min-width: 50rem; padding:4rem 2rem;}

/* 리스트 */
.container-main .content .memo-list > header {display: flex;}
.container-main .content .memo-list > header > .btn-wrap {display: flex;}


.container-main .content .memo-list > header > .input-wrap {position: relative; display: flex; flex:1;}
.container-main .content .memo-list > header > .input-wrap > .search-clear {position:absolute; top:50%;right:0.4rem; transform: translateY(-50%); display:none; width:2rem;height:2rem;
background: url('../img/ic_search_clear.svg') no-repeat center center/contain;border:0;}
.container-main .content .memo-list > header > .btn-search {padding:0.6rem 1.5rem;background-color:#404040;color:#fff;font-size:1.4rem;}

.container-main .content .memo-list > header > .btn-new {background-color:#2F70FE;color:#fff;font-size:1.4rem;margin-left:1rem;}

.container-main .content .memo-list > .store {width: 100%;}
.container-main .content .memo-list > .store .btn-wrap {display: flex;flex-wrap: wrap;justify-content: left; margin-top:2rem;}
.container-main .content .memo-list > .store .btn-wrap > .btn {margin-bottom:0.4rem;}

.container-main .content .memo-list > .category {width: 100%;}
.container-main .content .memo-list > .category .btn-wrap {display: flex;flex-wrap: wrap;justify-content: left; margin-top:0.5rem;}
.container-main .content .memo-list > .category .btn-wrap > .btn {margin-bottom:0.4rem;}


/*.container-main .content .memo-list > .list-wrap {border-top:1px solid #CDCDCD;padding-top:1rem;margin-top:1rem;}*/
.container-main .content .memo-list > .list-wrap > ul.list > li {display: flex;}
/*.container-main .content .memo-list > .list-wrap > ul.list > li + li {margin-top:1rem;}*/

.container-main .content .memo-list > .list-wrap > ul.list > li > .category {display: flex;align-items: center;  width:5em;border:1px solid #cdcdcd; border-right:0;padding-left:0.4rem;}
.container-main .content .memo-list > .list-wrap > ul.list > li > .category > ul > li {font-size:1.2rem;}
.container-main .content .memo-list > .list-wrap > ul.list > li input.title {display: flex; width:100%;align-items: center;border:1px solid #cdcdcd;padding: 0.5rem;box-sizing: border-box; cursor: pointer;}
.container-main .content .memo-list > .list-wrap > ul.list > li input.title:focus {outline: none !important;}
.container-main .content .memo-list > .list-wrap > ul.list > li input.title.active {border:2px solid #000;}
.container-main .content .memo-list > .list-wrap > ul.list > li > button {background-color:#F9F9F9; border: 1px solid #CDCDCD;width:4rem;height:4rem;cursor: pointer;}
/*.container-main .content .memo-list > .list-wrap > ul.list > li > div.move {background-color:#F9F9F9; border: 1px solid #CDCDCD;width:4rem;height:4rem;cursor: pointer;margin-right:0.4rem; background: url('../img/ic_move.svg') no-repeat center center/60%; font-size: 0;}*/
/*.container-main .content .memo-list > .list-wrap > ul.list > li > button.copy {margin-left:0.4rem; background: url('../img/ic_copy.svg') no-repeat center center/60%; font-size: 0;}*/

/* 디테일 */
.container-main .content .memo-detail {display: block; position:relative;}
.container-main .content .memo-detail .memo-detail-close{display:none;}
.container-main .content .memo-detail > header {display: flex;}
.container-main .content .memo-detail > header > select {margin-right:0.4rem;}
.container-main .content .memo-detail > header > select.store {width:6rem;}
.container-main .content .memo-detail > header > .input-wrap {flex: 1;}
.container-main .content .memo-detail > header > .input-wrap > input.title {width: 100%;}
.container-main .content .memo-detail > header > button.save {display: none;}
.container-main .content .memo-detail > textarea {margin-top:1rem; width: 100%; height: calc(100vh - 13rem) ; border: 1px solid #cdcdcd; box-sizing: border-box; padding:1rem;}

.toastify{
    min-width: 40%;
}

.addCategory {
    max-width: 100px !important;
    /*font-size: 1.4rem;*/
    height: 3rem;
    margin-left: 10px;
}

.btn-delete {
    display: inline-block;
    font-weight: 400;
    font-size: 1.5rem;
    color: #212529;
    text-align: center;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    line-height: 1.5;
    margin: 6px;
    border-radius: .5rem;
    color: #fff;
    background-color: #dc3545;
}



.btn-delete:hover{
    background-color: #cf2a3a;
}

#memoDetailTitle {
    margin-top: 0;
}

.tools button {
    margin-top: 0;
    margin-left: 2px;
}

.move {
    display: block;
}