@media print {
    html, body {
        display: none;  /* hide whole page */
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
    background-image: url(/public/img/bg-light.png);
    background-repeat: repeat;
}
/*
th, td {
    background-color: white;
    background-image: url(/public/img/bg-light.png);
    background-repeat: repeat;
}
 */

thead .table-bst,
tbody .table-bst,
tr .table-bst,
td .table-bst,
th .table-bst {
    display: block;
}

.borderless td,
.borderless th {
    border: none;
}

div.container {
    margin-top: 15px;
}

img {
    border: none;
}

.table-compare {
}

.table-compare th.table-compare-col-header {
    width: 20rem;
}

.table-compare td {
    width: 20rem;
}

.web-logo {
    width: 270px;
    height: 150px;
}

.dl-btns li {
    display: inline;
    width: auto;
}

.dl-global li img {
    max-width: 201px;
    height: auto;
}

.dl-japan ul {
    height: 50px;
}

.dl-japan li img {
    height: 100%;
}

.formation {
    position: relative;
    max-width: 320px;
    max-height: 240px;
    margin: auto;
}

.formation img {
    position: relative;
    max-height: 240px;
    max-width: 320px;
    border: none;
    width: 100%;
    height: 100%;
}

.formation-pos {
    width: 24px;
    height: 24px;
    position: absolute;
    color: black;
    font-weight: bold;
    border-radius: 50%;
    background: white;
}

.arousal-table {
    margin: auto;
    border-spacing: 10px;
    border-collapse: separate;
}

.arousal-column {
    width: 144px;
    height: 144px;
    max-width: 144px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 2px;
    text-align: center;
}

div.dock {
    position: sticky;
    position: -webkit-sticky;
    bottom: 0;
    width: 100%;
    background-color: #f5f5f5;
    z-index: 20;
    padding: 4px 0;
}


footer.sticky-footer {
    /*padding-top: .5rem;*/
    /*padding-bottom: 3.5rem;*/

    position: sticky;
    position: -webkit-sticky;
    bottom: 0;

    width: 100%;
    /*height: 32px;*/
    z-index: 1000;
}

.skill-thumbs-up,
.skill-thumbs-down,
.lb-thumbs-up,
.lb-thumbs-down
{
    cursor: pointer;
    user-select: none;
}


.parameter-plus {
    /*background-color: #ffeeba;*/
}
.parameter-limit-break {
    /*background-color: #f5c6cb;*/
}
.parameter-total {
    /*background-color: #c3e6cb;*/
}
.parameter-buff {

}
.parameter-overall {
    /*background-color: #c3e6cb;*/
}
.head-sortable {
    cursor: pointer;
}

.floating-action-button {
    position: fixed;
    bottom: 4rem;
    right: 2rem;
}
div.floating-action-button>button.dropdown-toggle::after {
    display:none;
}

i{ vertical-align: middle !important; }

.nopad {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/*image gallery*/
.image-checkbox {
    cursor: pointer;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 4px solid transparent;
    margin-bottom: 0;
    outline: 0;
}
.image-checkbox input[type="checkbox"] {
    display: none;
}

.image-checkbox-checked {
    border-color: #4783B0;
}

.icon-128x128 {
    width: 128px !important;; height: 128px !important;;
}
.icon-64x64 {
    width: 64px !important;; height: 64px !important;;
}
.icon-48x48 {
    width: 48px !important; height: 48px !important;
}
.icon-40x40 {
    width: 40px !important;; height: 40px !important;;
}
.icon-43x40 {
    width: 43px !important;; height: 40px !important;;
}

.icon-40x {
    max-width: 40px !important;;
}
.icon-32x {
    max-width: 32px !important;;
}
.icon-28x {
    max-width: 28px !important;;
}
.icon-24x {
    max-width: 24px !important;;
}
.icon-32x32 {
    width: 32px !important;; height: 32px !important;;
}
.icon-28x28 {
    width: 28px !important;; height: 28px !important;
}
.icon-24x24 {
    width: 24px !important;; height: 24px !important;;
}
.icon-16x16 {
    width: 16px !important;; height: 16px !important;;
}

.icon-difficulty {
    width: 16px !important;; height: 22px !important;;
}

div.skill-icon {
    min-height: 36px;
    width: 36px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;

}
div.skill-icon>img.skill-rarity {
    position: relative;
    left: -4px;
    top: -8px;
}
div.skill-icon>div.level {
    text-wrap: none;
    margin: 0 1px;
    /*bottom: 2px;*/
    /*position: relative;*/
    display: inline;
}
div.skill-icon>div.level>span.lvl-label {
    color: white;
    font-size: 0.5rem;
    display: inline-block;
}
div.skill-icon>div.level>span.lvl-level {
    color: white;
    font-size: 0.6rem;
    font-weight: bold;
    display: inline-block;
}

div.pc-card-title>a.card-icon-goto {
    font-size: 28px;
    float: right;
}
div.pc-card-title>i.card-icon-goto {
    font-size: 28px;
    float: right;
}
div.pc-card-title>span.nick-name {
    display: inline;
    font-size: 1.2rem;
}
div.pc-card-title>span.nick-name:after {
    content:"\a";
    white-space: pre;
}
div.pc-card-title>span.character-name {
    font-style: italic;
}
.card-effect {
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.card-effect>div.card-effect-name{
    width: 200px;
    overflow: hidden;
}
.card-effect>div.card-effect-description{
    width: 200px;
    animation: marquee 10s linear infinite;
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

.player-card-popover {
    max-width: 400px;
}
.player-card-popover-body {
    background-image: url(/public/img/bg-light.png);
    background-repeat: repeat;
}

.stage-cover {
    width: 149px;
    height: 172px;
}

.image-error-reload {

}

.player-thumbnail {
    cursor: pointer;
    width: 64px;
    height: 64px;
    margin: auto;
    background-size: cover;
}

.player-thumbnail-image-selected {
    border-width: 2px !important;
}

.col-less-padding {
    padding-left: 5px;
    padding-right: 5px;
}

.gacha-limited-type-1 {

}
.gacha-limited-type-2 {
    background-image: linear-gradient(to right, red, orange, orange, orange, red);
    -webkit-background-clip: text;
    color: transparent;
}
.gacha-limited-type-3 {
    background-image: linear-gradient(to bottom, red, orange, yellow, orange, red);
    -webkit-background-clip: text;
    color: transparent;
}
.gacha-limited-type-4 {
    background-image: linear-gradient(to bottom, orange, orange, orange);
    -webkit-background-clip: text;
    color: transparent;
}
.gacha-limited-type-5 {
    background-image: linear-gradient(to bottom, white, dodgerblue, dodgerblue, limegreen, greenyellow, orange, orange);
    -webkit-background-clip: text;
    color: transparent;
}
.gacha-limited-type-6 {
    background-image: linear-gradient(to bottom, orange, orange, orange);
    -webkit-background-clip: text;
    color: transparent;
}
.gacha-limited-type-7 {
    background-image: linear-gradient(to bottom, orange, orange, orange);
    -webkit-background-clip: text;
    color: transparent;
}
.gacha-limited-type-8 {
    background-image: linear-gradient(to bottom, red, orange, red);
    -webkit-background-clip: text;
    color: transparent;
}

.gacha-limited-type-9 {
    background-image: linear-gradient(to bottom, dodgerblue, skyblue, dodgerblue);
    -webkit-background-clip: text;
    color: transparent;
}
.gacha-limited-type-10 {
    background-image: linear-gradient(to bottom, limegreen, green, limegreen);
    -webkit-background-clip: text;
    color: transparent;
}
.gacha-limited-type-12 {
    background-image: linear-gradient(to bottom, red, orange, yellow, orange, red);
    -webkit-background-clip: text;
    color: transparent;
}

tr.stats-basic > th.stats-basic-item {
    font-size: 0.8rem;
    max-width: 64px;
    width: 64px;
    overflow-x: hidden;
    white-space: nowrap;
}
tr.stats-basic > td.stats-basic-value {

}


.effect-card {
    width: 14rem;
}

.block-check {
    display: block;
    position: relative;

    width: 100%;
    cursor: pointer;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.block-check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.block-check  img {
    margin: 2rem auto 0 auto;
}
/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    cursor: pointer;
}

/* On mouse-over, add a grey background color */
.block-check:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.block-check input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* When the checkbox is checked, add a blue background */
.block-check input:indeterminate ~ .checkmark {
    background-color: #2196F3;
}

/* disabled */
.block-check input:disabled ~ .checkmark {
    background-color: #333;
}
.block-check:hover input:disabled ~ .checkmark {
    background-color: #333;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */

.block-check input:checked ~ .checkmark:after {
    display: block;
    left: 9px;
    top: 6px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.block-check input:indeterminate ~ .checkmark:after {
    display: block;
    left: 8px;
    top: 5px;
    width: 10px;
    height: 10px;
    border: solid white;
    border-width: 0 0 3px 0;
}



#limit-break-dialog {
    touch-action: none;
}

.be-parameter-label {
    overflow: hidden;
}


.compare-highlighted {
    font-weight: bold;
    color: red;
}
.sticky-header {
    border-top: none;
    border-bottom: none;
    background-color: #fff;
}

/* https://github.com/underovsky/jquery-tagsinput-revisited */
.tagsinput {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    box-sizing: border-box;
    background: #fff;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #cce1f1;
    padding: 2px 2px 0 2px;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
}

.tagsinput.focus {
    border-color: #ccc;
}

.tagsinput * {
    box-sizing: border-box;
}

.tagsinput .tag {
    position: relative;
    background: #cce1f1;
    display: block;
    max-width: 100%;
    word-wrap: break-word;
    color: #fff;
    padding: 2px 26px 2px 2px;
    border-radius: 2px;
    margin: 0 2px 2px 0;
}

.tagsinput .tag .tag-remove {
    position: absolute;
    background: none;
    display: block;
    width: 20px;
    height: 28px;
    top: 0;
    right: 0;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    color: #ff6b6b;
    line-height: 28px;
    padding: 0;
    border: 0;
}

.tagsinput .tag .tag-remove:before,
.tagsinput .tag .tag-remove:after {
    background: #ff6b6b;
    position: absolute;
    display: block;
    width: 10px;
    height: 2px;
    top: 16px;
    left: 2px;
    content: '';
}

.tagsinput .tag .tag-remove:before {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.tagsinput .tag .tag-remove:after {
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}

.tagsinput div {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.tagsinput div input {
    background: transparent;
    display: block;
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    padding: 6px 2px 2px 2px;
    border: 0 none;
    margin: 0 2px 2px 0;
}

.tagsinput div input.error {
    color: #ff6b6b;
}

.tagsinput div input::-ms-clear {
    display: none;
}

.tagsinput div input::-webkit-input-placeholder {
    color: #ccc;
    opacity: 1.0;
}

.tagsinput div input:-moz-placeholder {
    color: #ccc;
    opacity: 1.0;
}

.tagsinput div input::-moz-placeholder {
    color: #ccc;
    opacity: 1.0;
}

.tagsinput div input:-ms-input-placeholder {
    color: #ccc;
    opacity: 1.0;
}

.bootstrap-select .dropdown-menu{
    max-width: 100%!important;
    width: 100%;
}
.bootstrap-select .dropdown-header {
    white-space: normal;
}


.global-loading-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    left: 0;
    top: 0;
    z-index: 50000;
    margin: auto;
    /*visibility: hidden;*/
}
.global-loading-overlay .spinner-border {
    z-index: 50001;
    display: block;
    margin: auto;
    position:absolute;
    top: 48%;
    left: 48%;
    text-align:center;
}
.ticon::before {
    content: '';
    /*width: 32px;*/
    height: 24px;
    padding-left: 28px;
    display: inline-block;
    vertical-align: middle;
}

.ticon-teambuff::before {
    background: url(/public/images/ui_skillicon_icon_teamskill_up_all.png) no-repeat;
    background-size: contain;
}
.ticon-ptt-buff::before {
    background: url(/public/images/ui_skillicon_icon_pttskill_buff.png) no-repeat;
    background-size: contain;
}
.ticon-ptt-debuff::before {
    background: url(/public/images/ui_skillicon_icon_pttskill_debuff.png) no-repeat;
    background-size: contain;
}
.ticon-ptt-resist::before {
    background: url(/public/images/ui_skillicon_icon_pttskill_resist.png) no-repeat;
    background-size: contain;
}
.ticon-ptt-seal::before {
    background: url(/public/images/ui_skillicon_icon_pttskill_seal.png) no-repeat;
    background-size: contain;
}
.ticon-ptt-invalidate::before {
    background: url(/public/images/ui_skillicon_icon_pttskill_seal_counter.png) no-repeat;
    background-size: contain;
}
.ticon-ptt-etc::before {
    background: url(/public/images/ui_skillicon_icon_pttskill_etc.png) no-repeat;
    background-size: contain;
}
.ticon-thumb-unitskill-passcut::before {
    background: url(/public/images/ui_thumbnail_icon_unitskill_type_passcut.png) no-repeat;
    background-size: contain;
}
.ticon-thumb-unitskill-block::before {
    background: url(/public/images/ui_thumbnail_icon_unitskill_type_block.png) no-repeat;
    background-size: contain;
}
.ticon-item-training-cards::before {
    background: url(/public/images/ui_unit_icon_powerup_exp.png) no-repeat;
    background-size: contain;
}
.ticon-item-blackballs::before {
    background: url(/public/images/ui_unit_icon_powerup_unitskill.png) no-repeat;
    background-size: contain;
}
.ticon-item-skillholders::before {
    background: url(/public/images/ui_unit_icon_unitskil.png) no-repeat;
    background-size: contain;
}
.ticon-item-formations::before {
    background: url(/public/images/ui_regulation_icon_deck_formation.png) no-repeat;
    background-size: contain;
}
.ticon-item-evolve::before {
    background: url(/public/images/ui_unit_icon_evolve.png) no-repeat;
    background-size: contain;
}
.ticon-item-skilltree::before {
    background: url(/public/images/ui_unit_icon_knowledge.png) no-repeat;
    background-size: contain;
}
.ticon-item-gacha-ticket::before {
    background: url(/public/images/ui_common_icon_ticket.png) no-repeat;
    background-size: contain;
}
.ticon-item-medal::before {
    background: url(/japan/ja/items/medal_image/1.png) no-repeat;
    background-size: contain;
}
.ticon-item-uniform::before {
    background: url(/japan/ja/items/uniform_image/11200.png) no-repeat;
    background-size: contain;
}
.ticon-item-badge::before {
    background: url(/japan/ja/items/badge_image/5.png) no-repeat;
    background-size: contain;
}
.ticon-item-limitbreak::before {
    background: url(/japan/ja/items/distribute_param_point_image/1.png) no-repeat;
    background-size: contain;
}
.ticon-item-marathon-boost::before {
    background: url(/japan/ja/items/marathon_boost_item_image/8.png) no-repeat;
    background-size: contain;
}
.ticon-item-ap-recovery::before {
    background: url(/japan/ja/items/ap_recovery_item_image/1.png) no-repeat;
    background-size: contain;
}
.ticon-playable-card::before {
    background: url(/public/images/ui_unit_icon_char.png) no-repeat;
    background-size: contain;
}
.ticon-card-collection::before {
    background: url(/public/images/ui_unit_icon_collection.png) no-repeat;
    background-size: contain;
}
.ticon-gacha::before {
    background: url(/public/images/ui_home_icon_gacha.png) no-repeat;
    background-size: contain;
}
.ticon-game-difficulty-1::before {
    background: url(/public/images/ui_scenario_icon_clear_001.png) no-repeat;
    background-size: contain;
    padding-left: 20px;
}
.ticon-game-difficulty-2::before {
    background: url(/public/images/ui_scenario_icon_clear_002.png) no-repeat;
    background-size: contain;
    padding-left: 20px;
}
.ticon-game-difficulty-3::before {
    background: url(/public/images/ui_scenario_icon_clear_003.png) no-repeat;
    background-size: contain;
    padding-left: 20px;
}
.ticon-game-difficulty-4::before {
    background: url(/public/images/ui_scenario_icon_clear_004.png) no-repeat;
    background-size: contain;
    padding-left: 20px;
}
.ticon-unit-treemax::before {
    background: url(/public/images/ui_thumbnail_icon_treemax.png) no-repeat;
    background-size: contain;
    padding-left: 20px;
}
.ticon-unit-boundarybreak-1::before {
    background: url(/public/images/ui_thumbnail_icon_overlimit_1.png) no-repeat;
    background-size: contain;
    padding-left: 20px;
}
.ticon-unit-boundarybreak-2::before {
    background: url(/public/images/ui_thumbnail_icon_overlimit_2.png) no-repeat;
    background-size: contain;
    padding-left: 20px;
}
.ticon-unit-boundarybreak-3::before {
    background: url(/public/images/ui_thumbnail_icon_overlimit_3.png) no-repeat;
    background-size: contain;
    padding-left: 20px;
}
.ticon-unit-boundarybreak-4::before {
    background: url(/public/images/ui_thumbnail_icon_overlimit_4.png) no-repeat;
    background-size: contain;
    padding-left: 20px;
}
.ticon-unit-boundarybreak-full::before {
    background: url(/public/images/ui_thumbnail_icon_overlimit_4.png) no-repeat;
    background-size: contain;
    padding-left: 20px;
}
.ticon-unit-max-1::before {
    background: url(/public/images/ui_thumbnail__icon_max_stats.png) no-repeat;
    background-size: contain;
    padding-left: 20px;
}
.ticon-unit-max-2::before {
    background: url(/public/images/ui_thumbnail_icon_max_distribute_value.png) no-repeat;
    background-size: contain;
    padding-left: 20px;
}
.ticon-unit-max-3::before {
    background: url(/public/images/ui_thumbnail_icon_max_overlimit.png) no-repeat;
    background-size: contain;
    padding-left: 20px;
}

.card-lock-group input[type="checkbox"],
.card-lock-group .checked {
    display: none;
}

.card-lock-group input[type="checkbox"]:checked ~ .checked
{
    display: inline-block;
}

.card-lock-group input[type="checkbox"]:checked ~ .unchecked
{
    display: none;
}