.login {
    height: 1000px;
}
.login form {
    padding-top: 10%;
}
.logo {
    text-align: center;
    padding-bottom: 4%;
}
.input, .select, .select.pickerToggler {
    padding: 0.5rem 0.75rem;
}
.dropDownItem {
    padding: 0.25rem 0.75rem;
}
.dropDownItem:first-child {
    padding-top: 0.5rem;
}
.dropDownItem:last-child {
    padding-bottom: 0.5rem;
}
.pickerContent .pickerItem {
    padding: 0.675rem 0.75rem;
}
.pickerHeader .input {
    border-radius: none;
    border: none;
}
.check .checkLabel {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.button {
    padding: 0.5rem 0.75rem;
}
select.select,
.select.pickerToggler {
    background-color: white;
}
.select:not(.is-multiple):not(.is-loading)::after {
    border-color: transparent !important;
}
.tedirTimeGroup .group .button.groupItem {
    padding: 0px;
}
.calendarDay, .calendarMonth, .tedirDateControl {
    display: flex;
    justify-content: center;
}
.tedirDateCenter, .tedirDateMonth {
    flex-grow: 1;
}
.tedirDateEnd {
    flex-grow: 0 !important;
}
.detailRecordTab {
    margin: 0px !important;
    padding: 0px !important;
    overflow-x: auto;
    width: 100%;
    z-index: 1;
}
.detailRecordTab .tabs {
    width: 100%;
}
.detailRecordTab .tabs ul {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
.card.sd-none {
    box-shadow: none !important;
}

.pickerItem {
    background: white;
}

.scrolling-wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;

}
.scrolling-wrapper .card {
    display: inline-block;
}

.container.is-fluid {
    padding-left: 0;
    padding-right: 0;
}
/*.container.is-fluid .banner {*/
/*    margin-left: 1.25rem;*/
/*    margin-right: 1.25rem;*/
/*}*/
main .breadcum {
    margin-top: 0px !important;
}
.modal {
    z-index: 6000 !important;
}
.modalHeader, .modalBody, .modalFooter {
    padding: 0.75rem !important;
}
.modalHeader.modalHeaderNoPad {
    padding: 0px !important;
}

.tabs.is-boxed li.is-active a {
    font-weight: bold;
}
.input {
    border-color: #535353;
    border-width: 1px;
}

@media (min-width: 1024px) {
    .modalPrintPreview .modalContent {
        width: 960px;
    }
}

/*.pickerHeader {*/
/*    background: white;*/
/*}*/

/*textarea.input,*/
/*input[type=checkbox], input[type=radio],*/
/*input.input {*/
/*    background-color: white;*/
/*    color: black;*/
/*}*/

/*label.label {*/
/*    color: black;*/
/*}*/

/*input[type='checkbox']:checked {*/
/*    background-color: #23d160;*/
/*}*/


textarea[disabled],
textarea[readonly],
input[disabled],
input[readonly],
select[disabled] {
    background-color: #fff;
    color: #000;
    opacity: 0.6;
    border: 1px solid #ddd;
}

/*.tabs.is-boxed li.is-active a,*/
/*.footer,*/
/*.card {*/
/*    background-color: white;*/
/*    color: black;*/
/*}*/

.select.pickerToggler {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.pickerContent .pickerItem {
    padding: 5px 5px 5px !important;
}

.pickerContent .pickerItem:hover {
    background-color: lightslategray;
    color: white;
}


.check input[type="checkbox"] {
    /* Base Styles aka unchecked */
    font-weight: 300;
    font-size: 16px;
    margin-top: 3px;
    margin-bottom: 3px;
    border-radius: 0px;
}

.check input[type="checkbox"]:not(:checked) {
    /* Explicit Unchecked Styles */
    background-color:white;
}
.check input[type="checkbox"]:disabled {
    /* Explicit Unchecked Styles */
    background-color:gray;
}
.check input[type="checkbox"]:checked {
    /* Checked Styles */
    font-weight: 900;
    background-color: #00aa00;
}

select.select,
.select.pickerToggler,
.input {
    border-width: 1px;
    /*border-radius: 0px;*/
    border-style: solid;
    font-weight: bold;
}

label.label {
    font-weight: normal;
}
.pickerContent .pickerHeader {
    padding: 0px;
    border-bottom: 0px;
    border: 2px dotted #7365ff;
    background-color: white;
}

.modalContent {
    background-color: white;
}

button.button {
  background-color: #7365ff;
  border: 1px solid #7365ff;
  color: white;
}
button.button:hover,
button.button.buttonActive {
  border: 1px solid #b2aaff;
  background-color: #b2aaff;
}

.headerActionFocus {
    border-radius: 0px !important;
}

.headerActionFocus.d-flex.justify-between {
    justify-content: normal;
}

.button.is-danger {
    background-color: #ff5f5f;
    color: white;
}

.button.is-danger:hover {
    background-color: red;
}

main .container .bannercontrol {
    border-radius: 0px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    background: white;
    padding-left: 20px;
    padding-right: 20px;
    border-bottom: 1px solid lightgrey;
    border-top: 1px solid lightgrey;
    margin-bottom: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: right;
}

.productGallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.galleryBox, .productChooserBox {
    width: 128px;
    height: 128px;
    overflow: hidden;
    position: relative;
    border: 1px solid #e2e2e2;
}

.productChooserBox {
    width: 145px;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    pointer-events: none;
}

.thumbnailBox {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    border: 1px solid #e2e2e2;
    border-radius: 0rem;
}

.thumbnailBox img,
.galleryBox img,
.productChooserBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;

}

.galleryBox .selectedGalleryBox {
    position: absolute;
    top: 5px;
    right: 25px; /*45px*/
    color: #209cee;
}
.galleryBox .chooseGalleryBox {
    position: absolute;
    top: 5px;
    right: 25px;
    color: #209cee;
}
.galleryBox .destroyGalleryBox {
    position: absolute;
    top: 5px;
    right: 5px;
    color: red;
}

.addGalleryBox {
    /*border: 2px dashed #e2e2e2;*/
    border: 2px dashed #909191;
    padding: 2.75rem;
}

.column.importantwrapper {
    border: 1px solid grey;
    border-radius: 0px;
}

.offCanvasBackdrop {
    background-color: rgba(0,0,0,0.15);
}

@media (max-width: 900px) {

    .container.is-fluid .banner {
        margin-left: 0px;
        margin-right: 0px;
    }

    .check input[type="checkbox"] {
        font-size: 30px;
    }

}

.check input[type="checkbox"]{
    border: 1px solid #535353;
}

/*.select.pickerToggler,
input.input {
    height: 30px;
}*/

label.label.d-block {
    font-size: 14px;
}

.calendar {
    width: auto !important;
}

.legend {
    position: relative;
}

.legend .label {
    position: absolute;
    left: 10px;
    top: -13px;
    z-index: 10;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    background-color: #fff;
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 90%;
}

.select, .select.pickerToggler {
    border-color: #535353 !important;
    border-width: 1px !important;
    border-style: solid !important;
}

@ref d-inlineFlex items-center gap-5px fg-primary fg-success fg-info fg-warning fg-danger cursor-pointer;
@ref d-flex justify-between mb-3 gap-0.75rem pointerEvents-none opacity-0.6 filter-grayscale(1) w-180px;
@ref primary-light success-light info-light warning-light danger-light padding-0.5rem_0.75rem color-inherit;
@ref gap-10px w-100pct w-100px ml-2 fg-hex999 fg-hexfff sd-none bd-1px_solid_hexe4e3e6 mb-0px px-1.5rem;
@ref bg-hexfff w-150px flexDirection-column align-center flexGrow-1 mt-2 my-3 bt-2px_dashed_hexe2e2e2;
@ref textAlign-center textAlign-right mnh-450px overflowX-auto d-none flexWrap-wrap zIndex-1 w-60px;
@ref w-300px w-280px bb-1px_solid_hexe2e2e2 p-10px p-0.75rem w-145px p-1.5rem gap-1.5rem mr-1 verticalAlign-middle;
@ref w-250px h-450px mnh-768px px-3rem;
@ref d-grid placeItems-center overflow-auto rd-0px justify-center fs-64px m-1.5rem pt-1.5rem mt-1.5rem;
@ref px-0.75rem pt-0.75rem mxh-450px overflowY-auto justifyContent-flexEnd w-220px fw-bold mb-2 h-100pct;
@use form {
    field: button, group;
}
@use offCanvas;
@use slideX;
@use list;

.mt-0px {
    margin-top: 0px !important;
}

.legend.mt-2 {
    margin-top: 1.5rem !important;
}

.textAlignCenter {
    text-align: center !important;
}
.textAlignRight {
    text-align: right !important;
}
.verticalAlignMiddle {
    vertical-align: middle !important;
}
.banner {
    border: 1px solid #d9d9d9;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.notification {
    top: auto;
    right: auto;
    color: #fff;
}

.fgInheritImportant {
  color: inherit !important;
}

.mb-0px {
  margin-bottom: 0px !important;
}

.check {
  margin-top: 0.375rem !important;
  margin-bottom: 0.375rem !important;
}

.checkInput {
  border-width: 1px !important;
}

.columnProductInfo {
  background-color: #efefef !important;
}

@media (max-width: 1200px) {
  .detailRecordResponsive .tableResponsive,
  .lineTableResponsive .tableResponsive {
    overflow-x: visible;
    overflow-y: visible;
  }
}

/*.section.hero.is-info,*/
/*.card,*/
/*.tabs.is-boxed a,*/
/*.banner,*/
/*button,*/
/*button.button,*/
/*input.input,*/
/*.select,*/
/*.select.pickerToggler {*/
/*    border-radius: 0px !important;*/
/*}*/

/*.tabs.is-boxed li {*/
/*    border: 1px solid lightgrey;*/
/*    margin-right: 5px;*/
/*}*/
/*.tabs.is-boxed li.is-active a {*/
/*    background-color: lightgrey !important;*/
/*    color:white !important;*/

/*}*/


main .container .banner {
    gap: 0;
    padding: 0;
    margin-bottom: 0;
    border-radius: 3px;
}

main .container .banner.datatable-wrapper {
  padding: 1.5rem !important;
}

aside {
    overflow-y: visible;
}

.redButton {
  background-color: #ff5f5f !important;
  border-color: #ff5f5f !important;
  color: #fff !important;
}
.redIcon {
  color: #ff5f5f !important;
}
.detailRecordResponsive span > .menu-icon.tf-icons {
  zoom: 1.5;
}

.redRow {
  background-color: #ffabab !important;
}
.orangeRow {
  background-color: #ffd690 !important;
}
.tealRow {
  background-color: #90ffed !important;
}
.greenRow {
    background-color: #33CC33 !important;
}
.greyRow {
    background-color: lightgrey !important;
}

a {
  --bulma-link-text: #7365ff !important;
}

.switch {
  display: inline-flex;
  align-items: center;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
.switch .switchInput {
  width: 1.5em;
  height: 1.5em;
  appearance: none;
  background-color: #fff;
  border: 1px solid #d9d9d9
}
.switch .switchInput:checked {
  border-color: #7365ff;
  background-color: #7365ff
}
.switch .switchInput[disabled], .switch .switchInput.disabled {
  border-color: #d6d6d6;
  background-color: #f0f0f0;
  pointer-events: none
}
.switch .switchInput:checked[disabled], .switch .switchInput:checked.disabled {
  background-color: #bbb
}
.switch .switchInput[disabled] ~ .switchLabel, .switch .switchInput.disabled ~ .switchLabel {
  color: #9b9b9b;
  cursor: default
}
.switch .switchLabel {
  display: inline-block;
  padding-left: 0.25rem;
  padding-right: 0.25rem
}
.switch .switchInput {
  width: 2.85em;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  background-position: left center;
  border-radius: 2em !important;
  transform: scale(1) !important;
  transition: background-position .15s ease-in-out
}
.switch .switchInput:checked {
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")
}

.fg-warning {
  color: #b48700;
}

.overlay.active {
  margin-left: 250px !important;
}