@import url("common.css");
@import url("post.css");



.date_new {
    display: none;
}

.date_lastpost {
    display: none;
}
.post_id {
    display:none;
}


#login_box {
    border: solid 2px #0CCB52;
    margin: 50px auto 50px auto;
    width: 300px;
    /* margin-bottom: 50px; */
    border-radius: 4px;
}

#login_box .box_title {
    display: inline-flex;
    align-items: center;
    ;
    background: #0CCB52;
    padding: 5px;
    color: white;
}

.box_title {
    font-weight:900;
}

.system .box {
    border: solid 2px #0CCB52;
    /* margin: 10px; */
    /* margin-bottom: 50px; */
    border-radius: 4px;
    margin-bottom:10px;
}

.system .box .box_title {
    background: #0CCB52;
    padding: 5px;
    color: white;
}

.site .box {
    border: solid 2px #0099FF;
    /* margin: 10px; */
    /* margin-bottom: 50px; */
    border-radius: 4px;
    margin-bottom:10px;
}

.site .box .box_title {
    background: #0099FF;
    padding: 5px;
    color: white;
}

.site .topic {
    color:#0099FF;
    font-weight:900;
}

.site a{
    color:#0099FF;
}

.site .block{
    padding-bottom:5px;
    margin-bottom:10px;
    border-bottom:2px solid #0099FF;
}

.target .box {
    border: solid 2px #4700B3;
    /* margin: 10px; */
    /* margin-bottom: 50px; */
    border-radius: 4px;
    margin-bottom:10px;
}

.target a {
    color:#4700B3;
}

.msg {
    font-size:0.8em;
}
.box_wrap input[type=text] {width:100%;}
.box_wrap input[type=password] {width:100%;}
.box_wrap textarea {width:100%;}

.target .box .box_title {
    background: #4700B3;
    padding: 5px;
    color: white;
}

.target .block{
    padding-bottom:5px;
    margin-bottom:10px;
    border-bottom:2px solid #4700B3;
}

.box_title {
    font-weight:900;
    color:white;
}
.box_title a {
    color:white;
    text-decoration:none;
}

.post_time {
    font-size:0.8em;
    padding:5px;
    float:right;

}


.box_wrap {
    margin: 10px;
    /* display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap:2px; */
}

.content_wrap {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 15px;
    padding: 10px;
}

.topic {
    font-weight: 900;
}

#top_bar a {
    color: white;
    text-decoration: none;
}
#top_bar a:hover{
    text-decoration: underline;
}

#stock_posts {
    display: grid;
    grid-template-columns: repeat(auto-fill, 150px);
    grid-gap: 5px;
    margin: 10px;
}

#stock_posts>div {
    outline: 1px solid #000;
}

#stock_posts img {
    width: 100%;
}

#stock_posts p {
    font-size: 0.5em;
    line-height: 1.1;
    padding: 2px;
}

#stock_posts p.title {
    font-weight: bold;
}

#stock_posts .ctrl {
    font-size: 0.5em;
    line-height: 1.1;
    padding: 2px;
}

#stock_posts .date {
    font-size: 0.5em;
    line-height: 1.1;
    padding: 2px;
}

.setting_btn_reset {
    display: block;
    color: white;
    border-radius: 4px;
    padding: 2px;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: center;
}

.setting_crawler {
    display: block;
    color: white;
    border-radius: 4px;
    padding: 2px;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: center;
    background: #0099FF;
    border-bottom: 2px solid #0463A2;
}

.update {
    background-color: #ff0000;
    color: white;
}



#info_console {
    height: 50px;
    font-size: 0.5em;
    background: #EEE;
    padding: 5px;
}

.note {
    font-size: 0.8em;
    color: #009;
}



.cron_log {
    margin-top: 20px;
}

.right-icon {
    color: white;
    display: block;
    float: right;
    text-align: right;
    margin-right: 10px;
}

.postable {
    background: rgba(0, 153, 255, 0.1);
}


.count_created {
    border:2px solid #0099FF;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    text-align:center;
}
.count_created div:nth-child(odd){
    background:#0099FF;
    color:white;
}

.count_created.db {
    border:2px solid #0CCB52;
}
.count_created.db div:nth-child(odd){
    background:#0CCB52;
}

.others_sitename{
    font-size:0.7em;
    color:gray;
    display:block;
}

.post_time_template {
    display: inline-block;
    padding: 2px;
    border-radius: 4px;
    border: #0099FF 1px solid;
    color: #0099FF;
    background: #0099FF33;
    margin-right: 3px;
    margin-bottom: 3px;
    text-decoration: none;
}

.post_time_template.selected {
    background: #0099FF;
    color: white;
}

.post_time_template_change{
    font-size:0.8em;
}

@media screen and (max-width:480px) {
    .pc {
        display: none !important;
    }

    #stock_posts {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 5px;
        margin: 10px;
    }

    #stock_posts .ctrl {
        font-size: 1em;
        line-height: 1.1;
        padding: 2px;
    }

    #stock_posts p {
        font-size: 1em;
        line-height: 1.1;
        padding: 2px;
    }

    #stock_posts p.title {
        font-weight: bold;
    }

    #main_zone {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 5px;
        margin: 10px;
    }

    .zone.editor {
        grid-row: 1 / 2;
    }

    #img_editor_tool {
        display: none;
    }

    #img_canvas {
        width: 100%;
        height: auto;
    }

    #img_editor {
        display: block;
    }

    .zone.video {
        grid-row: 3 / 4;
    }

    .zone.video iframe {
        width: 100%;
    }

    .zone.zurl {
        display: none;
    }

    .nobar {
        height: auto !important;
    }

    .in_info {
        grid-template-columns: 1fr;
    }

    .content_wrap {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 15px;
        padding: 10px;
    }

    /* .content_wrap .stystem{
        grid-row-start: 2;
        grid-row-end: 3;
    }
    .content_wrap .site{
        grid-row-start: 1;
        grid-row-end: 2;
    }
    .content_wrap .target{
        grid-row-start: 3;
        grid-row-end: 4;
    } */

    .box_sep {
        display: block;
        /* grid-gap:5px; */
        grid-template-columns: 1fr 1fr;
    }

    #suggest {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 2px;
        overflow-wrap: anywhere;
        font-size: 0.8em;
    }
    
    #suggest div:first-child {
        grid-column-start: 1;
        grid-column-end: 4;
        margin: 5px;
        text-align: center;
    }
    
    #suggest>div {
        border: #ccc 2px solid;
        border-radius: 4px;
    }
    
    #suggest .inner {
        padding: 4px;
    }
    
    #suggest .inner a {
        font-weight: bold;
    }
    
    #suggest a {
        text-decoration: none;
    }
    
    #suggest img {
        width: 100%;
    }

    .right-icon {
        float: none;
        text-align: left;
    }
}