/* 記事の部品の土台（endfield/webroot/css/endfield.css のコピー。色やレイアウトは silverpalace.css で上書きする） */
.st_vo {
    background-color: #fd63d2;
    color: #fff;
    border-radius: 3px;
    padding: 2px;
}
.st_da {
    background-color: #6bb9fd;
    color: #fff;
    border-radius: 3px;
    padding: 2px;
}
.st_vi {
    background-color: #ffc233;
    color: #fff;
    border-radius: 3px;
    padding: 2px;
}
.st_me {
    background-color: #c26eed;
    color: #fff;
    border-radius: 3px;
    padding: 2px;
}
.st_sp {
    background-color: #ff822b;
    color: #fff;
    border-radius: 3px;
    padding: 2px;
}
.st_perfect {
    background-color: #f18cae;
    color: #fff;
    padding: 2px;
}
.st_good {
    background-color: #eec36f;
    color: #fff;
    padding: 2px;
}
.st_normal {
    background-color: #61bbe6;
    color: #fff;
    padding: 2px;
}
.st_up {
    background-color: #e6437b;
    color: #fff;
    padding: 2px;
}
.st_down {
    background-color: #477be6;
    color: #fff;
    padding: 2px;
}
.st_keep {
    background-color: #80e6a1;
    color: #fff;
    padding: 2px;
}
.table.st_view th,
.table.st_view td
{
    vertical-align: middle;
}

.limit {
    color : #e6437b;
    font-size: 12px;
    font-weight: bold;
}

.limit_checker {
    color : #e6437b;
    background-color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.color_on {
    filter: grayscale(0%);
    cursor: pointer;
}

.color_off {
    filter: grayscale(100%);
    cursor: pointer;
}


.nav-checker {
    color: #fff !important;
    margin: 0 auto !important;
    display: table !important;
    table-layout: fixed !important;
    float: none !important;

}


.true_ok {
    font-family: Meiryo;
    border-radius: 50%;
    font-size:2.3em;
    line-height: 1.4em;
    padding-top: 0.2em;
    padding-left: 0.35em;
    padding-right: 0.35em;
    color: pink;
    border: 4px solid pink;
    position: absolute;
    left:-10px;
    top:-10px;
    z-index: 1000;
    transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg)
}

.hidden {
    display: none;
}

.col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5,
.col-xs-2-5, .col-sm-2-5, .col-md-2-5, .col-lg-2-5,
.col-xs-3-5, .col-sm-3-5, .col-md-3-5, .col-lg-3-5,
.col-xs-4-5, .col-sm-4-5, .col-md-4-5, .col-lg-4-5 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-xs-1-5 {
    width: 20%;
    float: left;
}
.col-xs-2-5 {
    width: 40%;
    float: left;
}

.col-xs-3-5 {
    width: 60%;
    float: left;
}

.col-xs-4-5 {
    width: 80%;
    float: left;
}

@media (max-width: 767px) {
    .img_checker {
        height: 90px;
    }
}
@media (min-width: 768px) {
    .col-sm-1-5 {
        width: 20%;
        float: left;
    }
    .col-sm-2-5 {
        width: 40%;
        float: left;
    }
    .col-sm-3-5 {
        width: 60%;
        float: left;
    }
    .col-sm-4-5 {
        width: 80%;
        float: left;
    }
    .img_checker {
        height: 115px;
    }
}
@media (min-width: 992px) {
    .col-md-1-5 {
        width: 20%;
        float: left;
    }
    .col-md-2-5 {
        width: 40%;
        float: left;
    }
    .col-md-3-5 {
        width: 60%;
        float: left;
    }
    .col-md-4-5 {
        width: 80%;
        float: left;
    }
    .img_checker {
        height: 120px;
    }
}
@media (min-width: 1200px) {
    .col-lg-1-5 {
        width: 20%;
        float: left;
    }
    .col-lg-2-5 {
        width: 40%;
        float: left;
    }
    .col-lg-3-5 {
        width: 60%;
        float: left;
    }
    .col-lg-4-5 {
        width: 80%;
        float: left;
    }
    .img_checker {
        height: 120px;
    }
}

.fon-12 {
    font-size: 12px !important;
}

.fon-11 {
    font-size: 11px !important;
}
.fon-10 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 10px !important;
    display     : inline-block;
    font-weight : bold;
    color       : #000;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
    -1px 1px 0 #FFF, 1px -1px 0 #FFF,
    0px 1px 0 #FFF,  0-1px 0 #FFF,
    -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.fon-9 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 9px !important;
    display     : inline-block;
    font-weight : bold;
    color       : #000;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
    -1px 1px 0 #FFF, 1px -1px 0 #FFF,
    0px 1px 0 #FFF,  0-1px 0 #FFF,
    -1px 0 0 #FFF, 1px 0 0 #FFF;
}

.fon-10-lg {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 14px !important;
    display     : inline-block;
    font-weight : bold;
    color       : #000;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
    -1px 1px 0 #FFF, 1px -1px 0 #FFF,
    0px 1px 0 #FFF,  0-1px 0 #FFF,
    -1px 0 0 #FFF, 1px 0 0 #FFF;
}

.fon-20-lg {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 24px !important;
    display     : inline-block;
    font-weight : bold;
    color       : #000;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
    -1px 1px 0 #FFF, 1px -1px 0 #FFF,
    0px 1px 0 #FFF,  0-1px 0 #FFF,
    -1px 0 0 #FFF, 1px 0 0 #FFF;
}



h2 {
    background-color: #303238 !important;
    padding: 8px 12px 8px 12px;


    background: #fbfb36;
    -webkit-box-shadow: 5px 5px 0 #9594eb;
    box-shadow: 5px 5px 0 #fbfb36;
    color: #fff;
}

h3 {
    border-left: 10px solid #fbfb36 !important;

}

.index-container {
    background-color: #f5f5f5 !important;
}

.week > .active > a,
.week > .active > a:hover,
.week > .active > a:focus{
    background-color: #f5f5f5 !important;
}

.active_back_color {
    background-color: #f5f5f5 !important;
}

table th {
    background-color: #e6e6e6 !important;
}


.item_container_center {
    position:relative;
    width:60px;
    height:60px;
    margin-right:auto;
    margin-left:auto;
}

.item_container {
    position:relative;
    width:60px;
    height:60px;
    float:left;
    margin-right:8px;
    margin-top:8px;
}

.item_name_pos {
    position:absolute;
    top: 0;
    left: 0;
    width:100%;
    margin:0;
}

.item_name_pos_under {
    position:absolute;
    bottom: -10px;
    right: 0;
    margin:0;
    width:100%;
    height:20px;
}

.item_num_pos {
    position:absolute;
    bottom: 0;
    right: 0;
    margin:0;
    width:100%;
    height:20px;
}

.item_size_pos {
    width: 60px;
    height: 60px;
}

.icon-thumbs-up {
    width: 18px;
    height: 18px;
    vertical-align: -3px;
}

th {
    background-color: #eceaff !important;
}

@media screen and (max-width: 767px)  {
    .item_container {
        position:relative;
        width:49px;
        height:49px;
        float:left;
        margin-right:5px;
        margin-top:5px;
    }

    .item_size_pos {
        width: 49px;
        height: 49px;
    }
}

.item_container_sub {
    position:relative;
    width:50px;
    height:50px;
    float:left;
    margin-right:5px;
    margin-top:5px;
}

.item_size_pos_sub {
    width: 50px;
    height: 50px;
}



.adj_item_pos {
    padding-top:0 !important;
}

.ta_left {
    text-align: left !important;
}

.ta_center {
    text-align: center !important;
}

.fso {
    color: #e45001;
    font-weight: bold;
}

.table.unique-skill th {
    vertical-align: middle !important;
    text-align: center !important;
}

.table.unique-skill td {
    vertical-align: middle !important;
    text-align: left !important;
}


.el_fire {
    font-weight: bold;
    color: #ff184b;
}

.el_ice {
    font-weight: bold;
    color: #5596ff;
}

.el_quantum {
    font-weight: bold;
    color: #3509ff;
}

.el_thunder {
    font-weight: bold;
    color: #a400ff;
}

.el_wind {
    font-weight: bold;
    color: #00ca72;
}

.el_imaginary {
    font-weight: bold;
    color: #ffcd02;
}

.el_physics {
    font-weight: bold;
    color: #414143;
}


.c_bq {
    background-color: #e6e6e6;
    padding: 15px;
    color: #000;
    font-size: 12px;
    border-radius: 10px;
}
.adj_sen {
    margin-bottom: 20px;
}
.balloon_sen {
    width: 100%;
    margin: 1.5em 0;
    overflow: hidden;
}

.balloon_sen .faceicon {
    float: left;
    margin-right: -200px;
    width: 100px;
}

.balloon_sen .faceicon img{
    width: 100%;
    height: auto;

}

.balloon_sen .chatting {
    width: 100%;

}

.says_sen {
    display: inline-block;
    position: relative;
    margin: 5px 0 0 80px;
    padding: 17px 13px;
    border-radius: 8px;
    border: 2px solid #e6e6e6;
    background-color: #e6e6e6;
    color: #000;
}

.says_sen:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 18px;
    left: -15px;
    border: 8px solid transparent;
    border-right: 12px solid #303238;
}

.says_sen p {
    margin: 0;
    padding: 0;
}

.says {
    border: 2px solid #e6e6e6;
    background-color: #e6e6e6 !important;
    color: #000 !important;
}
.says:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 18px;
    left: -20px;
    border: 8px solid transparent;
    border-right: 12px solid #e6e6e6 !important;
}


.item_container_sen {
    position:relative;
    width:75px;
    height:75px;
    float:left;
    margin-right:8px;
    margin-top:8px;
}

.item_name_pos_sen {
    position:absolute;
    top: 0;
    left: 0;
    width:100%;
    margin:0;
}

.item_num_pos_sen {
    position:absolute;
    bottom: 0;
    right: 0;
    margin:0;
    width:100%;
    height:20px;
}

.item_size_pos_sen {
    width: 75px;
    height: 75px;
}

.border_sen {
    border-bottom: 1px solid #000;
    margin-bottom: 10px !important;
    width: 100%;
}

.ann_col {
    color:#4191b4;
    font-weight: bold;
}

.lost_col {
    color: #e7a565;
    font-weight: bold;
}

.el_fire_col {
    color: #c16453;
    font-weight: bold;
}

.el_physics_col {
    color: #c4bc96;
    font-weight: bold;
}

.el_ice_col {
    color: #23bec4;
    font-weight: bold;
}

.el_thunder_col {
    color: #ffbf00;
    font-weight: bold;
}

.el_wind_col {
    color: #9bda27;
    font-weight: bold;
}

.endf {
    background-color: #e6e6e6 !important;
    color: #000;
    border-radius: 8px;
    border: none;
    border-top: hidden;
}

.endf_pad {
    padding: 10px;
 }

.endf_pad_s {
    padding: 5px;
}

.endf th {
    background-color: #d1d1d1 !important;
}

.connect_b {
    margin-left: 25px;
    margin-top: -28px;
    width: 4px;
    height: 30px;
    background: #e6e6e6;
}

hr {
    border-color: #8d93a4 !important;
    margin-top: 7px;
    margin-bottom: 7px;
}

.sen_wrap {
    position: relative;
}

.sen_pos {
    position: absolute;
    right:10px;
    top:5px;
    background: #6b707d;
    color:#fff;
    padding: 2px 5px 2px 5px;
    border-radius: 5px;
}

.sen_pos_b {
    position: absolute;
    right:10px;
    bottom:10px;
    background: #6b707d;
    color:#fff;
    padding: 2px 5px 2px 5px;
    border-radius: 5px;
}

.sen_image {
    width: 50px;
    vertical-align: middle !important;
    text-align: center;
}

.sen_image_n {
    width: 50px;
    text-align: center;
}

.sen_pt {
    float: right;
}

.adj-col-right {
    padding:0 5px 0 0;
}

.adj-col-left {
    padding:0 0 0 5px;
}

.collapse-btn-pos {
    position: absolute;
    left:2.2%;
    bottom:13px;
    padding: 2px 5px 2px 5px;
}

.collapse-wrap {
    overflow-x: auto;
    width: 100%;
    margin-top:-24px;
    margin-bottom:24px;
}

.collapse-table {
    white-space: nowrap;
    border-radius: 10px;
}

.sticky-table {
    position: sticky;
    left: 0;
    color: #000;
    background: #fff;
    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: -1px;
        width: 100%;
        height: 100%;
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }
}

.over-s {
    overflow-x: scroll;
}

.view-down {
    background-image:url("../../../app/webroot/img/endfield/2d21df5cb33f0fcd6d704905f908f281.png");
    background-size: cover;
    z-index: 1000000;
    width:17px;
    height:17px;
}

.view-up {
    background-image:url("../../../app/webroot/img/endfield/6a2306382be85d0ec532f7c36fbae4a0.png");
    background-size: cover;
    z-index: 1000000;
    width:17px;
    height:17px;
}


.blockq_pos_left {
    position: absolute;
    left:10px;
    top:5px;
    color:#6b707d;
}

.blockq_pos_right {
    position: absolute;
    right:10px;
    top:5px;
    color:#6b707d;
}

.col_check {
    color: #30df4f;
}

.col_stop {
    color: #d8467b;
}


.adj_btn {
    margin-top: 10px;
}

.sheet_tag {
    background: #6b707d;
    color:#fff;
    padding: 2px 5px 2px 5px;
    border-radius: 5px;
}

body.darkmode {
    background-color: #1f1f1f;
    color: #ffffff !important;
}

body.darkmode .navbar.cus { /* sp */
    height: 100%;
    min-height: 50px !important;
    background-color: #282828 !important;
    border-right: 1px solid #a2a2a2 !important;
    border-left: 1px solid #a2a2a2 !important;
    border-top: 1px solid #a2a2a2 !important;
    border-bottom: 1px solid #a2a2a2 !important;
}



body.darkmode .searchBox {
    background-color: #282828 !important;
}

body.darkmode .form-control {
    background-color: #282828 !important;
}



body.darkmode .btn.btn-default.active {
    background-color: #3e3e3e !important;
}

/* Sidebar navigation */
body.darkmode .nav-sidebar {

}
body.darkmode .nav-sidebar > li > a {
    padding-right: 20px !important;
    padding-left: 20px !important;
    color: #fff !important;
}
body.darkmode .nav-sidebar > li > a:hover,
body.darkmode .nav-sidebar > li > a:focus {
    background-color: #3e3e3e !important;
}
body.darkmode .nav-sidebar > .active > a,
body.darkmode .nav-sidebar > .active > a:hover,
body.darkmode .nav-sidebar > .active > a:focus {
    color: #fff;
    background-color: #3e3e3e !important;
}

/* Custom panel */
body.darkmode .panel {
    border: 1px solid #a2a2a2 !important;
}

body.darkmode .panel-default > .panel-heading{
    background-color: #3e3e3e !important;
    border-bottom: 1px solid #a2a2a2 !important;
    border-top: 1px solid #a2a2a2 !important;
}

body.darkmode .panel-default > .panel-heading.sub{
    background-color: #282828 !important;
    border-bottom: 1px solid #a2a2a2 !important;
    color: #fff;
}
body.darkmode .panel-default > .panel-heading.sub-sub{
    background-color: #282828 !important;
    border-bottom: 1px solid #a2a2a2 !important;
    color: #fff;
}
body.darkmode .panel-body{
    background-color: #1f1f1f !important;
}

/* Custom button */
body.darkmode .btn > a:link {
    color: #415f7c;
}

body.darkmode .btn-primary {
    background-color: #415f7c;
}
body.darkmode .btn-primary.go_link {
    background-color: #3b9ae0;
}

/* Custom pagination */
body.darkmode .pagination > li > a:link {
    color: #3e89d5 !important;
    background-color: #282828 !important;
}

body.darkmode .pagination > li > a:visited {
    color: #3e89d5 !important;
    background-color: #282828 !important;
}

body.darkmode .pagination > .disabled > a:link {
    color: #ccc !important;
    background-color: #282828 !important;
}

body.darkmode .pagination > .disabled > a:visited {
    color: #ccc !important;
    background-color: #282828 !important;
}

body.darkmode .pagination > .active > a:link{
    background-color: #415f7c !important;
    color: #ccc !important;
}

body.darkmode .thumbnail {
    background-color: #1f1f1f;
    border: none;
}


body.darkmode .caption > h5 {
    font-size: 12px !important;
    margin-top: -1px;
    margin-bottom: -5px;
    color: #fff;
}
body.darkmode .caption > h5 > a:link {
    color:#fff !important;
}


body.darkmode .footer {
    background-color: #1f1f1f;
    text-align: center;
    height: 42px;
}

body.darkmode .footer_e {
    background-color: #282828;
    margin-top: 30px;
    z-index: 10;
    position: relative;
}
body.darkmode .nav-tabs > li.active > a:link {
    background-color: #1f1f1f;
    color: #fff;
    border: 1px solid #a2a2a2;
    border-bottom: 1px solid  #1f1f1f;
}
body.darkmode .nav-tabs > li > a:link {
    background-color: #1f1f1f;
    color: #fff;
    border-bottom: 1px solid #a2a2a2
}
body.darkmode .btn.btn-default {
    background-color: #282828;
    color: #fff;
}
body.darkmode .btn.dark {
    background-color: #282828;
    color: #fff;
    border: none;
}

body.darkmode .btn.dark.active {
    background-color: #5b5b5b;
    color: #fff;
    border: none;
}

body.darkmode span.dark, span.dark > a:link {
    background-color: #282828;
    color: #fff;
}

body.darkmode modal-content.dark {
    background-color: #282828;
    color: #fff;
}

body.darkmode .breadcrumb {
    background-color: #1f1f1f;
}

body.darkmode .btn-default.dropdown-toggle {
    background-color: #3e3e3e !important;
    color: #fff;
}

body.darkmode .panel-default {
    background-color: #1f1f1f;
}

body.darkmode legend {
    color: #fff;
}

body.darkmode .site-data {
    background-color: #3e3e3e !important;
}

body.darkmode .alert-info {
    background-color: #3e3e3e !important;
    color: #fff;
    border: 1px solid #a2a2a2;
}

body.darkmode .alert-success {
    background-color: #3e3e3e !important;
    color: #fff;
    border: 1px solid #a2a2a2;
}

body.darkmode .well {
    background-color: #3e3e3e !important;
    color: #fff;
}

body.darkmode .modal-content {
    background-color: #3e3e3e !important;
    color: #fff;
}

body.darkmode .table-bordered th {
    background-color: #282828 !important;
}

body.darkmode .table-bordered td {
    background-color: #282828 !important;
}
body.darkmode h3 {
    color: #fff;
}
body.darkmode h2 {
    color: #fff;
    background-color: #3e3e3e !important;
}
body.darkmode .index-container {
    color: #fff;
    background-color: #3e3e3e !important;
}
body.darkmode .top_title > a:link {
    color: #fff;
}
body.darkmode .top_title > a:visited {
    color: #fff;
}

body.darkmode .top_title_xs > a:link {
    color: #fff;
}
body.darkmode .top_title_xs > a:visited {
    color: #fff;
}
body.darkmode .navbar.navbar-fixed-top {
    background-color: #282828 !important;
}