@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,600');
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css');
body{font-family: Roboto, sans-serif; font-size: 15px; color: #485059;}
body::-webkit-scrollbar{width: 15px;}
body::-webkit-scrollbar-track{background: #f3f3f3;}
body::-webkit-scrollbar-thumb{background-color: #346297; border-radius: 3px;}
h1{font-size: 30px; font-weight: bold; margin: 0 0 0.7em; color: #3d444d;}
h2{font-size: 24px; margin: 0 0 0.7em;}
p{margin: 0 0 1em;}
a{color: #2b7cd9;}
a:hover{color: #d92b2b;}

.nowrap{white-space:nowrap;}

.login_body{height: 100vh;}
.login{display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.login .form{width: 480px; padding: 30px; border-radius: 24px; background: #f3f3f3;}

.content{display: flex; width: 100%; background-color: #f5f7fa;}
.head{display: flex; justify-content: center; align-items: center; position: fixed; top: 0; width: 100%; height: 4rem; background: #3d444d; z-index: 10000;}
.head div{white-space: nowrap;}
.head .logo{min-width: 300px; padding-left: 2em;}
.head .logo a{font-size: 25px; font-weight: bold; color: #f5f7fa; text-decoration: none;}
.head .user{display: flex; align-items: center; color: #f5f7fa; margin-right: 2em;}
.head .user .image{width: 36px; height: 36px; overflow: hidden; position: relative; border-radius: 18px; margin-right: 0.7em;}
.head .user .image img{width: 100%; height: 100%; object-fit: cover; position: absolute;}
.head .user .name{margin-right: 1em;}
.head .info{width: 100%;}
.head .panel_select{position: relative; margin-right: 2em;}
.head .panel_select a{color: #f5f7fa; text-decoration: none;}
.head .panel_select .selected{width: 100%; background: #4c5866; color: #f5f7fa; padding: 0.5em 3em 0.5em 1em; border-radius: 3px;
    cursor: pointer; position: inherit; z-index: 100;
}
.head .panel_select .selected:after{content: ''; width: 9px; height: 9px; position: absolute; top: 14px; right: 15px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff;  transform: rotate(-45deg); transition: transform 0.1s, top 0.1s;
}
.head .panel_select .active{box-shadow: rgba(0, 0, 0, 0.3) 0 0 6px 0;}
.head .panel_select .active:after{top: 18px; transform: rotate(135deg);}

.head .panel_select .options{visibility: hidden; position: absolute; width: 100%; background: #4c5866; border-radius: 0 0 3px 3px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 0 6px 0;
}
.head .panel_select .options .item{padding: 0;}
.head .panel_select .options .item a{display: block; padding: 0.5em 0.5em 0.5em 1em;}
.head .panel_select .options .item:hover{background: #485059;}

.menu{width: 300px; margin-top: 4em; padding: 1em 0 6em; color: #999; background: #3d444d; height: calc(100vh - 4em); overflow-y: scroll; position: sticky;
    top: 4em; transition: left 1s;}
.menu .group{display: flex; align-items: center;}
.menu .group .add{margin-right: 1em;}
.menu .group .add a{font-size: 12px; color: #f5f7fa; background: #485059; text-decoration: none; padding: 0.4em 0.7em; border-radius: 6px;
    white-space: nowrap; transition: background 0.3s;
}
.menu .group .add a:hover{background: #4C5866;}
.menu .group .name{width: 100%; padding: 0.5em 2em; font-size: 16px; color: #346297; font-weight: bold;}

.menu .item{transition: background-color 0.3s;}
.menu .item:hover{background: #346297;}
.menu .item a{display: block; text-decoration: none; padding: 0.5em 2em 0.5em 3em; color: #f5f7fa;}
.menu .item a:hover{}

.menu::-webkit-scrollbar{width: 15px;}
.menu::-webkit-scrollbar-track{background: #3d444d;}
.menu::-webkit-scrollbar-thumb{background-color: #346297; border-radius: 3px;}

.menu .link-group{display: flex !important; align-items: center;}
.menu .link-group .icon{margin-left: 0.7em;}
.menu .link-group .icon img{display: block; height: 20px;}

.body{width: calc(100vw - 300px); margin-top: 4em; padding: 2em;}
.body .inner{padding: 2em; border-radius: 9px; background: #fff;}

.post_types{display: flex; flex-wrap: wrap;}
.post_types a{display: flex; align-items: center; justify-content: center; width: calc(33% - 1em); min-height: 30vh; margin: 0 1em 1em 0; text-align: center;
    text-decoration: none; font-family: Roboto, sans-serif; font-size: 18px; color: #555; background: #f3f3f0; font-weight: bold; border-radius: 9px;
}
.post_types a:hover{background: #e3e3e0; color: #333;}

.table .image{overflow: hidden; position: relative; margin-right: 0.7em;}
.table .image img{width: 100%; height: 100%; object-fit: cover; position: absolute; display: block;}
.table .user{display: flex; align-items: center; position: relative;}
.table .user .image{width: 40px; height: 40px; border-radius: 20px;}
.table .online:after{content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 6px; background-color: #06db00; left: 30px; bottom: 0;}
.table .cover{display: flex; align-items: center; position: relative;}
.table .cover .image{width: 52px; height: 39px; border-radius: 3px;}

.table .ml-0{}
.table .ml-1{padding-left: 4em;}
.table .ml-2{padding-left: 8em;}

.form-check .form-check-input{margin-left: -21px;}
.form-check .form-check-label{margin-left: 3px;}

.tox-tinymce{width: 100%;}
.tox-notifications-container{display: none;}
.tox-promotion{display: none;}

.upload_button, .image_url_icon{width: 180px; display: flex; align-items: center; justify-content: center; margin: 0 1rem 1rem 0; border-radius: 6px; border: 1px solid #ced4da;
    cursor: pointer; position: relative; aspect-ratio: 3/2; transition: background 0.3s;
}
.upload_button:hover, .image_url_icon:hover{background: #f5f7fa;}
.upload_button .icon, .image_url_icon .icon{display: flex; flex-direction: column; align-items: center; justify-content: center;}
.upload_button .icon .txt, .image_url_icon .icon .txt{font-size: 12px; text-transform: uppercase; font-weight: bold; margin-top: 0.3rem; color: #3d444d;}

.image_url{cursor: pointer;}
.image_url .image{border-radius: 6px;}
.image_url .icon{display: none;}

.image_url_icon{}
.image_url_icon .image{display: none;}

.form #generate_psw{cursor: pointer;}

.form .multiple{padding: 0.25rem 0.5rem;}
.form .multiple option{border-radius: 3px; padding: 6px 9px; margin: 5px 0;}
.form .multiple option:checked{background: #0d6efd; color: #fff;}

.form .images{display: flex; flex-wrap: wrap;}
.form .images .progress_bar{display: none;}
.form .images .loaded .progress_bar{width: 100%; height: 100%; align-items: center; display: flex; justify-content: center;}
.form .images .progress_bar{position: absolute; top: 0; left: 0;}
.form .images .progress_bar svg{width: 72px; height: 72px; transform: rotate(-90deg);}
.form .images .progress_bar svg .bg{fill: none; stroke-width: 5px; stroke: #eeeeee;}
.form .images .progress_bar svg .progress{fill: none; stroke-width: 6px; stroke: #a16dad; stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: 201;}
.form .images .item:hover .icon{position: absolute; width: 32px; height: 32px; border-radius: 16px; cursor: pointer;}
.form .images .item:hover .copy{top: 42px; left: 6px; background: #33333380 url(/images/icons/copy.svg) 10px 10px no-repeat; background-size: 12px;}
.form .images .item:hover .copy:hover{background: #333333cc url(/images/icons/copy.svg) 7px 7px no-repeat; background-size: 18px;}
.form .images .item:hover .main{top: 6px; left: 6px; background: #33333380 url(/images/icons/main.svg) 7px 7px no-repeat; background-size: 18px;}
.form .images .item:hover .main:hover{background: #333333cc url(/images/icons/main.svg) 4px 3px no-repeat; background-size: 24px;}
.form .images .item:hover .delete{display: none; width: 26px; height: 26px; top: 6px; right: 6px; background: rgb(51,51,51,0.5) url(/images/icons/basket.svg) 6px 6px no-repeat; background-size: 14px; }
.form .images .item:hover .delete:hover{background: rgb(51,51,51,0.8) url(/images/icons/basket.svg) 6px 6px no-repeat; background-size: 14px;}
.form .images .item:hover .show{display: none; width: 26px; height: 26px; top: 42px; left: 6px; background: rgb(51,51,51,0.5) url(/images/icons/show.svg) 6px 6px no-repeat; background-size: 14px;}
.form .images .item:hover .show:hover{background: rgb(51,51,51,0.8) url(/images/icons/show.svg) 6px 6px no-repeat; background-size: 14px;}
.form .images .loaded .delete{display: none;}
.form .images .loaded .copy{display: none;}

.form .item{position: relative; margin: 0 1rem 1rem 0;}
.form .item .img{height: 120px; border-radius: 9px; overflow: hidden;}
.form .item .img img{display: block; max-height: 120px;}
.form .image{width: 180px; overflow: hidden; position: relative; aspect-ratio: 3/2;}
.form .image img{width: 100%; height: 100%; display: block; object-fit: cover; position: absolute;}
.form .avatar{height: 180px; border-radius: 100px;}
.form .cover{}

.form .fix{position: fixed; bottom: 0; left: 0; z-index: 10000; background: #fff; padding: 1rem; margin-bottom: 0 !important;
    box-shadow: 0 0 10px 2px rgb(34 60 80 / 20%); width: 100%; max-height: 180px;overflow-y: scroll;
}

.popup{display: none; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 15000; background: #00000096;}
.popup .inner{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: none;}
.popup .photos{width: 75%; height: 85vh; background-color: #fefefe; padding: 2rem; border-radius: 9px; box-shadow: 0 0 10px 2px rgb(34 60 80 / 20%); position: relative;}
.popup .photos .close{ opacity: 0.75; position: absolute; height: 27px; top: 14px; right: 21px; border-radius: 15px; cursor: pointer;}
.popup .photos .close .b div {height: 3px; background: #000; width: 27px; border-radius: 3px; top: 14px; position: relative;}
.popup .photos .close .f {transform: rotate(45deg);}
.popup .photos .close .s {margin-top: -3px; transform: rotate(-45deg);}
.popup .preloader{width: 100%; display: flex; align-items: center; justify-content: center;}
.popup .list{overflow-y: scroll; height: calc(100% - 5rem - 110px);}
.popup .list::-webkit-scrollbar{width: 15px;}
.popup .list::-webkit-scrollbar-track{background: #f3f3f3;}
.popup .list::-webkit-scrollbar-thumb{background-color: #346297; border-radius: 3px;}
.popup .list .item .image{cursor: pointer;}
.popup .list .item .image:after{background: none; transition: background 0.3s;}
.popup .list .item .image:hover::after{content: ''; position: absolute; width: 100%; height: 100%; background-color: #33333380;
    background-image: url("/images/icons/image_check_white.svg"); background-repeat: no-repeat; background-size: 128px; background-position: center;

}
.popup .upload_button{width: 160px; height: 38px;}
.popup .upload_button .icon{flex-direction: row; margin-bottom: 3px;}
.popup .upload_button .icon .img{margin-right: 0.3rem;}
.popup .upload_button .icon .img img{width: 27px; height: 27px;}

.list .item{position: relative;}
.list .item .progress_bar{display: none;}
.list .loaded .progress_bar{width: 100%; height: 100%; align-items: center; display: flex; justify-content: center; z-index: 100}
.list .item .progress_bar{position: absolute; top: 0; left: 0;}
.list .item .progress_bar svg{width: 72px; height: 72px; transform: rotate(-90deg);}
.list .item .progress_bar svg .bg{fill: none; stroke-width: 5px; stroke: #eeeeee;}
.list .item .progress_bar svg .progress{fill: none; stroke-width: 6px; stroke: #a16dad; stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: 201;}

.list{display: flex; flex-wrap: wrap;}
.list .item{width: calc(25% - 1rem); height: min-content; margin: 0 1rem 1rem 0;}
.list .item .image{border-radius: 9px; overflow: hidden; margin-bottom: 0.6em; position: relative; aspect-ratio: 3/2; border: 1px solid #ced4da;}
.list .item .image img{width: 100%; height: 100%; display: block; position: absolute; object-fit: cover;}
.list .item .status{font-size: 0.8em; margin: 0.3em 0;}
.list .item .title{margin-bottom: 0.3em; line-height: 1.2em;}
.list .item .info{display: flex; align-items: center;}
.list .item .user{font-size: 0.8em; color: #777; font-weight: bold;}
.list .item .date{font-size: 0.8em; color: #555; margin-right: 12px;}
.list .item .view{margin-left: 12px; position: absolute; top: 9px; background: #333; padding: 0 6px; color: #fff; border-radius: 6px; font-size: 0.9em;}
.list .item .actions{position: absolute; top: 3px; right: 4px; opacity: 0.9; padding: 6px 12px; border-radius: 15px; cursor: pointer}
.list .item .actions div{padding: 2px; margin: 2px; background: #333; border-radius: 3px}
.list .item .actions:hover{background: #333; color: #fff}
.list .item .actions:hover div{background: #fff}
.list .item .actions_menu{display: none; position: absolute; top: 18px; right: 18px; background: #e3e3e3; padding: 12px; border-radius: 6px;}
.list .item .actions_menu a{display: block; color: #333; font-size: 15px}
.list .item .kwd{font-size: 12px; color: #999;}

.list .icons{position: relative;}
.list .icons .itms{display: flex; position: absolute; right: 0; top: -28px}
.list .icons .itm{margin-left: 0.3rem;}
.list .icons .itm img{width: 18px;}

.pages{display: flex; align-items: center; margin-top: 2em;}
.pages .item{margin-right: 1em;}
.pages .current{padding: 3px 12px; background: #999; border-radius: 6px; color: #fff;}


@keyframes ldio-3bz7v91v0yp {
    0% { transform: translate(-50%,-50%) rotate(0deg); }
    100% { transform: translate(-50%,-50%) rotate(360deg); }
}
.ldio-3bz7v91v0yp div {
    position: absolute;
    width: 55px;
    height: 55px;
    border: 9px solid #555555;
    border-top-color: transparent;
    border-radius: 50%;
}
.ldio-3bz7v91v0yp div {
    animation: ldio-3bz7v91v0yp 0.6666666666666666s linear infinite;
    top: 50px;
    left: 50px
}
.loadingio-spinner-rolling-tlw5xbtd3gg {
    width: 64px;
    height: 64px;
    display: inline-block;
    overflow: hidden;
}
.ldio-3bz7v91v0yp {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(0.64);
    backface-visibility: hidden;
    transform-origin: 0 0; /* see note above */
}
.ldio-3bz7v91v0yp div { box-sizing: content-box; }

@media screen and (max-width: 1600px){
    .list .item{width: calc(100% / 3 - 1rem);}
}

@media screen and (max-width: 1280px){
    .list .item{width: calc(50% - 1rem);}
}