/*** xsss*/

/***************/
/*tab bahavior: Hide inactive: https://vizuaalog.github.io/BulmaJS/docs/0.9/tabs*/
.tabs-content li {
    display: none;
    list-style: none;
}

.tabs-content li.is-active {
    display: block;
}
/********************/

td.v-center {
    vertical-align: middle !important;
}

div.v-center {
    vertical-align: middle !important;
}

span.v-center {
    vertical-align: middle !important;
}

input.v-center {
    vertical-align: middle !important;
}

button.my-margin {
    margin-left: 1px;
    margin-right: 1px;
}

div.columns.my-price-columns {
    margin-bottom:2px;
}
div.column.my-price-column {
    padding-right: 0px;
    padding-bottom: 2px;
    margin-bottom: 2px;
}

div.column.my-price-balance-column {
    padding-left: 2px;
    padding-bottom: 0px;
    margin-bottom: 2px;
}

div.column.my-price-balance-column-modal {
    padding-left: 2px;
    /*padding-bottom: 2px;*/
    margin-bottom: 2px;
}

div.column.my-pay-button {
    padding-top: 2px;
}

div.column.my-memo-column {
    padding-left: 4px;
    padding-right: 0px;
}


div.columns.my-inner-columns {

}

div.notification.my-narrow-notification {
    padding-bottom: calc(0.5em - 1px);
    padding-left: calc(0.75em - 1px);
    padding-right: calc(0.75em - 1px);
    padding-top: calc(0.5em - 1px);
}

input.my-price-entry {
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    text-align: center;
}

input.is-primary.my-price-entry:focus {
    box-shadow: none;
}

input.is-warning.my-price-entry:focus {
    box-shadow: none;
}

input.is-danger.my-price-entry:focus {
    box-shadow: none;
}

input.my-price-entry-primary {
    color: #00d1b2; /** bulma primary color**/
}

input.my-price-entry-danger {
  color: #f14668; /** bulma danger color**/
}

input.my-price-entry-warning {
    color: #ffe08a; /** bulma danger color**/
}
input.my-ph-danger::placeholder {
    color: red;
    opacity: 0.1;
}

/*input.my-is-huge {
    font-size: 3.0rem;
    height: 1.5rem;
    padding-right: 2px;
    padding-left: 2px;
}*/

div.my-column-short-padding {
    padding: 0.25rem;
}

div.my-nopadding-columns {
    padding-top: 0px;
    padding-bottom:0px;
}


.notification.my-notify-bottom {
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    bottom: 0;
    /*width: 100%;*/ /* Full width */
    /*height: 100%;*/ /* Full height */
    overflow: auto; /* Enable scroll if needed */
    margin:1.25rem;
}

.button.my-is-in-warning-light {
    background-color: #e7d8a8;
}

.is-fullheight-100vh {
    height: 100vh;
}

/* use it to populate the delete button by div.*/
div.delete.my-delete-button {
    background-color: rgba(10, 10, 10, 0.2);
}

div.bottom-float {
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
}
/*.button.is-rounded {
    bottom: 1rem;
    right: 1rem;
    position: fixed;
}
*//*
  Override to Bulma css

*/
.button.is-danger.is-light {
    color: #cc0f3566; /*Use bulma danger color. apply transparent. */
}

a.my-inherit-color {
    color: inherit;
}

section.my-section {
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 4px;
    margin-right:4px;
}

section.my-section-more-margin {
    margin-top: 12px;
    margin-bottom: 12px;
    margin-left: 4px;
    margin-right: 4px;
}

div.my-upper-padding {
    padding-top: 4px;
}

.tag.my-tag-margin {
    margin-top: 2px;
    margin-bottom: 2px;
}

.button.is-small.is-my-chk-btn {
    height: 1.0rem;
    width: 1.0rem;
    font-size: 0.5rem;
    border-radius: 0px;
    margin-top:5px;
}

.button.is-light.is-my-chk-btn {
    background-color: white;
    border-color: black;
}

.columns.is-gapless.my-gapless:not(:last-child) {
    margin-bottom: 0rem;
}

.columns.my-gapless-bottom:not(:last-child) {
    margin-bottom: 0px;
}

div.is-my-top-bottom-margin {
    margin-top: 2px;
    margin-bottom: 2px;
}

div.my-left-margin-check-box {
    margin-left: 10px;
}

div.mynavbar.is-spaced {
    padding-top: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-bottom: 0rem;
}

@media screen and (max-width: 768px) {
    img.my-responsive {
        height: 40px;
        width: 80px;
    }
}
/* End Responsive Image For Nabvar */
/* https://bulma.io/documentation/overview/responsiveness/ */
@media screen and (min-width: 768px) {
    img.my-responsive {
        height: 80px;
        width: 160px;
    }
    span.my-only-show-mobile {
        display: none;
    }

    input.my-is-huge {
        font-size: 2.0rem;
        height: 1.5rem;
        padding-right: 2px;
        padding-left: 2px;
    }

    input.my-is-huge:focus {
        box-shadow: none;
    }

    input.my-is-huge-non-responsive {
        font-size: 3.0rem;
        height: 1.5rem;
        padding-right: 2px;
        padding-left: 2px;
    }

        input.my-is-huge-non-responsive:focus {
            box-shadow: none;
        }

    .tag.is-my-tag-size {
        font-size: 1.0rem;
    }

    div.my-nopadding-all-columns {
        padding-right: 0px;
        padding-left: 0px;
    }

    div.my-nopadding-right-columns {
        padding-right: 0px;
        padding-left: 4px;
    }

    div.column.my-right-pad-0-column-tablet {
        padding-right: 0px;
    }

}

@media screen and (min-width: 1023px) {
    span.my-only-show-tablet {
        display: none;
    }
}


@media screen and (max-width: 768px) {
    th.my-only-hide-mobile {
        display: none;
    }

    td.my-only-hide-mobile {
        display: none;
    }

    span.my-only-hide-mobile {
        display: none;
    }

    div.my-only-hide-mobile {
        display: none;
    }

    input.my-short-price-mobile {
        width: 40%;
    }

    i.my-only-hide-mobile {
        display: none;
    }

    i.my-only-hide-tablet {
        display: none;
    }

    input.my-is-huge {
        font-size: 1.5rem;
        height: 1.5rem;
        padding-right: 2px;
        padding-left: 2px;
    }

        input.my-is-huge:focus {
            box-shadow: none;
        }

    input.my-is-huge-non-responsive {
        font-size: 3.0rem;
        height: 1.5rem;
        padding-right: 2px;
        padding-left: 2px;
    }

        input.my-is-huge-non-responsive:focus {
            box-shadow: none;
        }

/*    div.my-mobile-no-padding-bottom {
        padding-bottom: 0px;
    }
*/
    div.my-nopadding-all-columns {
        padding-right: 0px;
        padding-left: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    div.my-nopadding-right-columns {
        padding-right: 0px;
        padding-left: 4px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    div.column.my-right-pad-0-column-tablet {
       /*padding-right: 0px;*/
    }

}

@media screen and (max-width: 1023px) {
    th.my-only-hide-tablet {
        display: none;
    }

    td.my-only-hide-tablet {
        display: none;
    }

    i.my-only-hide-tablet {
        display: none;
    }
}

.jfc-item {
    color: #ef4123 !important;
}

.card {
    height: 100%;
}

.card-content.my-narrow-card {
    padding:12px;
}

p.control.my-narrow {
    margin:0px;
}

.button.is-jfc {
    background-color: #ef4123;
    border-color: transparent;
    color: #fff;
}

div.jfc-border {
    background-color: #ef4123;
    width: 100px;
    height: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.btn-jfc {
    color: #fff;
    background-color: #ef4123;
    --bs-btn-border-color: #ef4123;
    --bs-btn-hover-color: #ef4123;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #ef4123;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ef4123;
    --bs-btn-active-border-color: #ef4123;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd
}

.btn-outline-jfc {
    color: #ef4123;
    background-color: #fff;
    border-color: #ef4123;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ef4123;
    --bs-btn-hover-border-color: #ef4123;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #ef4123;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #ef4123;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #ef4123;
    --bs-btn-disabled-border-color: #ef4123
}

/*Remove allow from input number
Reference:https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box
*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}