/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

@media screen and (max-width: 1222px) and (min-width: 769px) {
    #sidebar {
        display: none;
    }

    #toggle-sidebar {
        padding-left: 0px;
    }

    #main-content {
        margin-left: 15.6px;
        padding-top: 4.5rem;
    }

    .min-w-12-5 {
        min-width: 12.5% !important;
    }
}

@media screen and (min-width: 1223px) {
    #sidebar {
        display: block;
    }

    #main-content {
        margin-left: 15.6rem;
        padding-top: 4.5rem;
    }

    .min-w-12-5 {
        min-width: 12.5% !important;
    }
}

@media screen and (max-width: 768px) and (min-width: 0px) {
    #sidebar {
        display: none;
    }

    #main-content {
        padding-top: 4.5rem;
    }

    .min-w-12-5 {
        min-width: 25% !important;
    }

    .swal2-popup {
        width: 80vw;
    }
}

@media screen and (max-width: 640px) {
    #dx-main-btn-group {
        padding-top: 15px;
    }
}

#setting-dropdown {
    display: flex;
}

#sidebar {
    min-width: 240px;
    position: fixed;
    height: 100%;
}

.pl-253 {
    padding-left: 253px !important;
}

.pl-15 {
    padding-left: 15px !important;
}

.background-dx {
    background-color: #2f75b5 !important;
}

button.background-dx:hover {
    background-color: #003563 !important;
}

.dx-color {
    color: #2f75b5 !important;
}

.input-bg {
    background-color: #ddebf7 !important;
}

.dx-btn {
    height: 36px;
    text-align: center;
    font-size: 14px;
    line-height: 36px;
    padding: 0;
    font-weight: bold;
    border: 1px solid #9e9e9e;
    padding-right: 10px;
    margin-left: 10px;
    padding-left: 10px;
    white-space: nowrap;
    background-color: #efefef;
}

.dx-input {
    border: none;
    height: 36px;
    background-color: #fff;
    outline: none !important;
}

.dx-input:focus {
    border: 1px solid black !important;
    border-radius: 5px;
    box-shadow: 0 0 10px #719ece;
}

.dx-table-bg {
    background-color: #f7fdff;
}

thead.sticky {
    z-index: 1;
    box-shadow: inset 0 -2px 0 #d1d5db;
}

.dx-user-no {
    border: none;
    display: inline;
    font-family: inherit;
    font-size: inherit;
    padding: 7px 10px;
    width: 100px;
    background-color: #eceff4 !important;
    border-radius: 5px;
}

.color-success {
    color: green !important;
}

.color-alert {
    color: red !important;
}

.error-txt {
    display: none;
}

input:disabled {
    background: #dddddd;
}

select:disabled {
    border: 1px solid #6b7280;
    background: #dddddd;
    color: #1f2937;
    opacity: 1;
}

.border-pale-gray {
    border: 1px solid #6b7280;
}

.max-w-200 {
    max-width: 200px !important;
}

.max-w-150 {
    max-width: 150px !important;
}

.sidebar {
    background-color: #F6A400;
}

.sidebar-header {
    background-color: #ffe699;
}

.sidebar-selected {
    background-color: #0088FF;
    color: rgb(255 255 255) !important;
}

.sidebar-selected-upload {
    background-color: #fce4d6;
}

.min-w-44 {
    min-width: 11rem;
}

.min-w-48 {
    min-width: 12rem;
}

.page-title-bg {
    background-color: #ddebf7 !important;
}

.header-bg {
    background-color: #c6e0b4;
}

.com-number {
    padding-left: 17.5px;
    padding-right: 17.5px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.bg-yellow {
    background-color: #ffff00;
}

.text-xxs {
    font-size: 0.6rem;
    line-height: 1.4rem;
}

.bg-green {
    background-color: #c6e0b4;
}

.bg-gray {
    background-color: #d9d9d9;
}

.bg-red {
    background-color: red;
}

.bg-pale-blue {
    background-color: #9bc2e6;
}

.bg-pale-blue-2 {
    background-color: #ddebf7;
}

.bg-pale-green {
    background-color: #a9d08e;
}

.bg-pale-green-2 {
    background-color: #e2efda;
}

.bg-pale-pink {
    background-color: #f8cbad;
}

.bg-pale-pink-2 {
    background-color: #fce4d6;
}

.bg-pale-yellow {
    background-color: #ffff00;
}

.bg-pale-yellow-2 {
    background-color: #fff2cc;
}

.left-neg-5 {
    left: -5px !important;
}

.navbar-bg {
    background-color: #2453EE;
}

.h-175 {
    height: 175px;
}

.remove-file {
    left: 75% !important;
    bottom: 50px !important;
}

.leading-2 {
    line-height: 8px !important;
}

.l-90 {
    left: 90%;
}

.l-85 {
    left: 85%;
}

.l-95 {
    left: 95%;
}

.t-30 {
    top: 30%;
}

.h-99 {
    height: 99%;
}

#gbiz-password::-ms-reveal,
#gbiz-password::-ms-clear {
    display: none;
}

/* .text-xs-custom {
    font-size: .75rem;
} */

.text-xl-custom {
    font-size: 0.9rem;
    line-height: 1.5rem;
}

.zoom-80 {
    zoom: 70%;
}

.fixed-table-width {
    width: 1240px;
    zoom: 90%;
    margin-bottom: 20px;
}

.navbar-fixed {
    top: 3.5rem;
    background-color: #FFFFFF;
}

.border-t-saddlebrown {
    border-top-color: saddlebrown;
}

.leading-2 {
    line-height: 0.5rem;
}

.progress-bar {
    background-color: #2f75b5;
    height: 3px;
    width: 0px;
}

a.disabled {
    pointer-events: none;
}

.form-btn-action .disabled,
.form-btn-action button:disabled {
    opacity: 0.6;
}

.c-break-word {
    word-break: break-word;
    overflow-wrap: break-word;
}

#reservation-time-table a.disabled {
    opacity: 0.6;
}

.search-select2 .select2 {
    width: 100% !important;
}
.search-select2 .select2-container {
    margin-top: 4px !important;
}

.search-select2 .select2-container .select2-selection--single {
    height: 36px !important;
    border: none !important;
    border-radius: 0 !important;
}

.search-select2 .select2-selection__rendered {
    padding-top: 8px;
    color: #000000 !important;
    line-height: 24px !important;
}

.search-select2 .select2-selection__arrow {
    height: 36px !important;
}

.input-error {
    border: 1px solid rgb(239 68 68);
}

.btn-top {
    background: transparent linear-gradient(180deg, #ffffff 0%, #fefefe 46%, #d8d8d8 100%) 0% 0% no-repeat padding-box;
    box-shadow: 2px 2px 2px #00000029;
    border-radius: 3px;
}
.box .btn-top.active {
    background: #0088FF 0% 0% no-repeat padding-box;
    color: rgb(255 255 255) !important;
}
.box .box-container {
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 3px;
}
.box-content {
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 3px;
}
.box .btn-form {
    border-radius: 10px;
    color: #ffffff;
    font-weight: bold;
}
.box .btn-primary {
    background: transparent linear-gradient(180deg, #82c5ff 0%, #0088ff 73%, #0088ff 100%) 0% 0% no-repeat padding-box;
}
.box .btn-secondary {
    background: transparent linear-gradient(180deg, #cbcbcb 0%, #9f9f9f 73%, #9f9f9f 100%) 0% 0% no-repeat padding-box;
}
.box .btn-danger {
    background: transparent linear-gradient(180deg, #ffa397 0%, #ff533d 73%, #ff533d 100%) 0% 0% no-repeat padding-box;
}
.box .form-text-input {
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #898a8b;
    border-radius: 5px;
    max-height: 36px;
}
.box .form-textarea {
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #898a8b;
    border-radius: 5px;
    height: 36px;
}
.box .form-file-input {
    background: #efefef 0% 0% no-repeat padding-box;
    border-radius: 0px 3px 3px 0px;
    max-height: 36px;
    position: relative;
}
.box .form-file-input::file-selector-button {
    width: 44px;
    color: transparent;
}
.box .form-file-input::before {
    position: absolute;
    pointer-events: none;
    top: 8px;
    left: 13px;
    height: 20px;
    width: 20px;
    content: '';
    background-image: url('../images/icon-upload.png');
    background-size: cover;
}
.box .form-file-input::file-selector-button {
    border-radius: 4px;
    padding: 0 16px;
    height: 40px;
    cursor: pointer;
    background-color: #ffaa01;
    margin-right: 6px;
    border: none;
    border-radius: 3px 0px 0px 3px;
}
.box .form-file-input {
    color: transparent;
}
.box .form-file-input::after {
    color: #000;
    content: 'ファイル選択';
    position: absolute;
    top: 7px;
    left: 58px;
}
.box .form-file-input.changed::after {
    display: none;
}

.color-success {
    color: green !important;
}

.input-required {
    background-color: #ffb6c1 !important;
}

.box .bg-primary-status {
    background: transparent linear-gradient(180deg, #cbe7ff 0%, #94ceff 66%, #94ceff 100%) 0% 0% no-repeat padding-box;
}

.box .bg-success-status {
    background: transparent linear-gradient(180deg, #b7ffcf 0%, #71ec9a 66%, #71ec9a 100%) 0% 0% no-repeat padding-box;
}

.box .bg-danger-status {
    background: transparent linear-gradient(180deg, #ffcdc6 0%, #ffa498 66%, #ffa498 100%) 0% 0% no-repeat padding-box;
}

.box .bg-warning-status {
    background: transparent linear-gradient(180deg, #ffecc8 0%, #ffd687 66%, #ffd687 100%) 0% 0% no-repeat padding-box;
}

.box .bg-yellow,
.bg-yellow {
    background: transparent linear-gradient(180deg, #ffdc97 0%, #ffaa01 73%, #ffaa01 100%) 0% 0% no-repeat padding-box;
}

.box .bg-danger-span {
    background: var(--unnamed-color-ff533d) 0% 0% no-repeat padding-box;
    background: #ff533d 0% 0% no-repeat padding-box;
}

.box .bg-secondary-status {
    background: transparent linear-gradient(180deg, #e9e9e9 0%, #aeaeae 66%, #aeaeae 100%) 0% 0% no-repeat padding-box;
}

.bg-white {
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    background: #ffffff 0% 0% no-repeat padding-box;
}

.bg-white-smoke {
    background: #f5f5f5 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
}

.element-bg-white {
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    opacity: 1;
}

.element-plus-bg-gray {
    box-shadow: 0px 3px 6px #00000029;
    border: 1px solid #898a8b;
}

/* Scroll-bar style */
/* width */
::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/* Scroll-bar style */

.bg-yellow-shadow {
    background: #FFAA01 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 3px #3D3D3D7F;
}

.circle-custom {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.show-more, .show-less {
    color: blue;
    cursor: pointer;
    padding-left: 5px;
    display: none;
    text-decoration-line: underline;
}

.show-more-container {
    display: flex;
    justify-content: flex-end;
    background-color: rgba(255, 255, 255, 0.0);
}

.answer {
    max-height: 4.5em;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

@media screen and (max-width: 768px) and (min-width: 0px){
    .visible-show-more-less {
        display: block !important;
    }
}

.box .btn-warning {
    background: transparent linear-gradient(180deg, #FFDC97 0%, #FFAA01 73%, #FFAA01 100%) 0% 0% no-repeat padding-box;
}

.fixed-column,
.fixed-column-col-2 {
    position: sticky;
    left: -1px;
    z-index: 1;
    box-shadow: inset -0.75px 0 0 #000000;
}

.justify-content-end {
    justify-content: flex-end;
}
.justify-content-between {
    justify-content: space-between;
}
.flex-end {
    display: flex;
    justify-content: flex-end;
}

.d-block {
    display: block;
}

.text-center {
    text-align: center;
}

.w-10per {
    width: 10%;
}
.w-40per {
    width: 40%;
}