/* @import url('https://fonts.googleapis.com/css?family=Lato|Montserrat|Niramit'); */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Poppins:wght@300;400;900&family=Raleway:wght@400&display=swap');
@import url('/assets/plugins/swiper/swiper-bundle.min.css');
@import url('/assets/plugins/quill@1.3.6/quill.snow.css');
@import url('/assets/plugins/uppy/uppy.min.css');
/* @import url('/assets/plugins/tabulator/css/tabulator.min.css'); */
@import url('/assets/plugins/tabulator/css/tabulator_simple.min.css');
@import url('/assets/plugins/tagify-master/dist/tagify.css');
@import url('/assets/plugins/air-datepicker@3.0.0/air-datepicker.css');
@import url('/assets/plugins/ribbons.css');
@import url('/assets/plugins/notifier/css/notifier.css');
@import url('/assets/plugins/iziToast/css/iziToast.min.css');
@import url('/assets/plugins/checkbox.min.css');
/* @import url('/assets/plugins/flowbite/flowbite@1.8.1.min.css'); */
@import url('/assets/plugins/lineicons/web-font-files/lineicons.css');
@import url('/assets/plugins/halfmoon@2.0.1/halfmoon.min.css');
@import url('/assets/plugins/handsontable/handsontable.full.min.css');
@import url('/assets/plugins/drp/daterangepicker.css');
@import url('/assets/plugins/billboard/billboard.min.css');

:root{
    --bs-sidebar-width: 200px;
}

*{
    box-sizing: border-box;
    font-family: 'Montserrat', 'Poppins', Arial, Helvetica, sans-serif;  
    scrollbar-width: thin;
}

.ui.fluid.dropdown{ background: transparent; border: none; border-bottom: solid 1px; color: #222222; border: none; border-bottom: solid 1px #ddd; border-radius: 0; }

html, body{ margin: 0; height: 100%; display: flex; flex-flow: column; font-family: 'Montserrat', 'Raleway', 'Lato', Arial, Helvetica, sans-serif; font-size: 14px; background: rgb(240, 242, 245); }
body.has-AjaxPage{ overflow-y: hidden; }
/* body.ps-md-sbwidth{ background: #f5f7ff;  } */
/* rgb(247, 247, 254) */
html[data-bs-theme="dark"] label, html[data-bs-theme="dark"] input, html[data-bs-theme="dark"] select{ color: #999; }
html[data-bs-theme="dark"] .notifyjs-container{ background: #335 !important; color: #ccc !important; }

.dropdown-menu{ width: auto !important; z-index: 2 !important; }

.ajax-page{ position: absolute; top: 100%; left: 0; right: 0; bottom: 0; width: 100%; transition: all .38s ease-in-out; z-index: 1; background: aliceblue; }
    .ajax-page.open{ top: 0; }
    .ajax-page .title .close{ position: absolute; top: 10px; right: 20px; font-size: 3em; }

    .ajax-page .content .left{ border-right: solid 1px #eee; }
a.disabled{ opacity: .5; cursor: not-allowed; }

input{ background: honeydew; color: #007E33; border-radius: 4px; border: solid 1px green; transition: all .38s ease-in-out; } 

.row{ --bs-gutter-x: var(--bs-spacer-0); margin: 0; }
.tagify, tagify__tag{ padding: 0; }
.tagify__input{ font-size: 1.3em; }

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

.page-title{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.page-title span i{color: #ddd; }
.page-title span{ font-size: 14px; padding: 10px 0; color: grey; }
.page-title a{ background:rgb(72, 104, 136); color: aliceblue; border-radius: 30px; padding: 5px; }

.no-udl{ text-decoration: none; }
.not-visible{ visibility: hidden; }

.tagify{ border: none; border-bottom: solid 1px #ddd; }
.tagify__input{ margin-left: 0; }

.selectize-input{ display: flex !important; flex-wrap: wrap !important; background: none !important; }
.selectize-dropdown, .selectize-dropdown .optgroup-header{ background: #f7f5ff !important; }

/* .choices__inner, .choices__input { background: transparent !important; border-bottom: solid 1px #ddd; }
.choices__inner { border: none !important; } */

.no-margin{ margin: 0; }

a{ outline: 0; }
menu{ margin: 0; padding: 0; }

.notifyjs-wrapper{ z-index: 2 !important; }

#togglePasswordVisibility{ position: absolute; top: 50%; right: -20px; transform: translate(-50%, -50%); padding: 10px; font-size: 1.2em; cursor: pointer; }

/* main{ position: relative; overflow: hidden; } */
main{ flex: 1 0 auto; position: relative; overflow: hidden; }

/* main .right-sidebar { width: 80%; height: 100%; padding: 20px; display: grid; align-items: center; }

main .right-sidebar .wrapper, main .right-sidebar .container{ display: grid; align-content: center; }

main .right-sidebar .wrapper .modules{ display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 50px; }

main .right-sidebar .wrapper .modules a{ text-decoration: none; display: grid; grid-template-columns: auto auto;  justify-content: space-between; border-radius: 6px; border: none; font-size: 20px; position: relative; border-radius: 6px; overflow: hidden; background: #fff; color: blue; transition: all .38s ease-in-out; }

main .right-sidebar .wrapper .modules a:hover{ box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, .1); transform: scale(1.03); }

main .right-sidebar .wrapper .modules a:before { content: ""; position: absolute; top: 100%; right: 0; left: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgb(95, 153, 95), rgb(129, 172, 147)); opacity: .1; transform: scale(1.03); transition: all .38s ease-in-out; }

main .right-sidebar .wrapper .modules a:hover:before{ top: 0; }

main .right-sidebar .wrapper .modules a img{ width: 100px; height: 100px; } */

main .toolbar{ margin: 0 10px 0 10px; position: relative; display: grid; grid-template-columns: auto auto; gap: 10px; align-items: center; }
.toolbar #links{ display: flex; grid-template-columns: repeat(5, auto); gap: 5px; align-items: center; }
.toolbar #links button{ height: 40px; padding: 0 25px; text-align: center; } 
.toolbar .form-group.search-pane{ margin: 0; z-index: 1 }

#toolbar #links button{ width: auto; }

body .form-group{ position: relative; margin: 20px 10px; }

.form-group sup.required{ position: absolute; top: -13px; right: 0; }

input[type="number"]{ -webkit-appearance: textfield; appearance: textfield; }
input, textarea, select{ width: 100%; background: transparent; color: #222222; border: none; border-bottom: solid 1px #ddd; border-radius: 0; padding: 10px 0; transition: all .38s ease-in-out; }
input[type="checkbox"]{ width: unset; height: unset; padding: 0; }
/* input[type="checkbox"]{ width: 20px; height: unset; padding: 0; } */

input:invalid:focus ~label.floated-up-lbl, textarea:invalid:focus ~label.floated-up-lbl, select:invalid:focus ~label.floated-up-lbl{ color: dodgerblue; top: -5px; }
input:valid ~label.floated-up-lbl, textarea:valid:focus ~label.floated-up-lbl, select:valid:focus ~label.floated-up-lbl{ top: -5px; }

label.floated-up-lbl{ position: absolute; top: 50%; transform: translate(0%, -50%); left: 0; color: grey; font-size: 12px; transition: top .38s ease; }

input:focus, textaredea:focus, select:focus{ border: none; border-bottom: solid 1px dodgerblue; }

.radiobox{ display: grid; grid-template-columns: auto auto; align-items: center; justify-content: start; }

main .checkbox-group{ display: grid; grid-template-columns: auto auto; justify-content: space-between; height: 43px;}

main .checkbox-group section{ display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; position: relative; }

.checkbox input[type="checkbox"].custom-checkbox ~label { display: flex; align-content: center; align-items: center; color: #777777; }
input[type="checkbox"].custom-checkbox:not(:checked) ~label:before { border: solid 1px dodgerblue; background: transparent; }
input[type="checkbox"].custom-checkbox:checked ~label:before { border: solid 1px dodgerblue; background: dodgerblue; color: #ffffff; }
input[type="checkbox"].custom-checkbox:checked ~label { color: #222222; }

.checkbox input[type="checkbox"].custom-checkbox:disabled ~label { display: flex; align-content: center; align-items: center; color: #777777; }
input[type="checkbox"].custom-checkbox:disabled:not(:checked) ~label:before { border: solid 1px dodgerblue; background: transparent; color: #ffffff; opacity: .3; }
input[type="checkbox"].custom-checkbox:disabled:checked ~label:before { border: solid 1px dodgerblue; background: transparent; color: #ffffff; opacity: .3; }

input:valid ~label.floated-up-lbl, textarea:valid ~label.floated-up-lbl, select:valid ~label.floated-up-lbl{ top: -5px; }
input:valid ~label.floated-up-lbl, textarea:valid ~label.floated-up-lbl, select:valid ~label.floated-up-lbl{ top: -5px; }        

form .btn-group button{ padding: 15px 50px; border-radius: 25px; transition: padding .38s ease; }

.form-group.error label.floated-up-lbl{ color: red; }
.form-group.error input{ color: red; border-bottom: solid 1px red; }
.form-group.error input:focus, .form-group.error textarea:focus, .form-group.error select:focus{ border-bottom: solid 1px red; }

.search-pane input[type="search"]{ padding-left: 25px; }
.search-pane .fa-search{ position: absolute; top: 50%; left: 5px; transform: translate(-50%, -50%); }
table th, table td{ position: relative; }

.notif-wrapper .content .body ul li{ border-left: solid 5px transparent; transition: all .38s ease; }
.notif-wrapper .content .body ul li:hover{ background: #ffffff; border-left: solid 5px dodgerblue; }

#carts .ui.floating.label{ z-index: 1; }

/* Swiper Page Tabs */

/* .swiper#pageTapSwiper .swiperr{ height: 100%; margin: 0; padding: 0; } */
.swiper#pageTapSwiper .swiper-pagination{ text-align: unset; display: flex; position: fixed; bottom: 0px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4); }
.swiper#pageTapSwiper .tabs{ flex: 1; height: 50px; margin: 0; opacity: 1; border-radius: unset; background: #eee; display: grid; align-items: center; }
.swiper#pageTapSwiper .tabs:not(:last-child){ border-right: solid 1px #ccc; }
.swiper#pageTapSwiper .activeTab{ background: dodgerblue; color: #fff; }
.swiper#pageTapSwiper .swiper-slide{ width: 100%; min-height: unset; }
/* Tabulator Custom Styles */
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title { white-space: normal; font-size: 10px; }

.tabulator-paginator{ display: flex; align-items: center; justify-content: flex-end; }
.tabulator-paginator .tabulator-page-size{ width: auto; }

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title { white-space: normal; }

.tabulator-row.tabulator-group { background: #fff; }
.tabulator .tabulator-row .tabulator-cell { white-space: normal; }
  
.tabulator .tabulator-footer .tabulator-paginator button{ width: auto; }
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page-size{ padding: 7px 20px; background: greenyellow; border: inherit; } 

.tabulator .tabulator-footer .tabulator-paginator .tabulator-page{ background: #fff; padding: 10px 20px; border: inherit; }
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page.active{ padding: 10px 20px; background: fuchsia; color: #fff; }
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page[data-page="first"], .tabulator .tabulator-footer .tabulator-paginator .tabulator-page[data-page="next"]{ background: deepskyblue; color: #fff; border: inherit; }
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page[data-page="prev"], .tabulator .tabulator-footer .tabulator-paginator .tabulator-page[data-page="last"]{ background: rgb(43, 19, 21); color: #fff; border: inherit; }

.tabulator-print-table{ width: 100%; }
.tabulator-print-table th{ border: solid 2px #000; height: 50px; }
.tabulator-print-table td{ border: solid 2px #000; font-size: 18px; }
.tabulator-group-level-0{ background: red; }

.notifyjs-multi-price-overlay-base { padding: 0 }

.text-two-lines { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;  -webkit-box-orient: vertical; overflow: hidden; }

.yseditor-toolbar{ overflow-x: auto; }

.apexcharts-toolbar { z-index: 1 !important; }

.notifyjs-update-profile-base { white-space: wrap !important; }

@media screen and (max-width: 1280px) {
    main .right-sidebar .wrapper .modules { grid-template-columns: auto auto;  }
}

@media screen and (min-width: 951px) and (max-width: 1280px) {
    .wrapper .bubble-cards{ grid-gap: 50px; }
    /* .modal .wrapper{ max-width: 80%; min-width: 80%; } */
    main .right-sidebar .wrapper .modules { grid-template-columns: auto auto;  }
    main .container .dashboard{ grid-template-columns: repeat(4, 1fr); }
    main .container .dashboard .well section{ padding: 30px; font-size: 1.5vw; text-align: center; }

    .hide-lg{ display: none; }
}

@media screen and (max-width: 950px){

}

@media screen and (max-width: 767px) {
    header #navMenuSwiper .swiper-slide{ font-size: 12px; padding-top: 17px; display: flex; flex-flow: column; justify-content: center; align-items: center; text-align: center; border-left: solid 1px #ddd; }
    header #navMenuSwiper .swiper-slide i{ position: absolute; top: 5px; font-size: 2em; }

    main form .btn-group button{ padding: 10px; border-radius: 25px; width: 50%; }
    main .container .dashboard{ grid-template-columns: repeat(2, 1fr); grid-gap: 30px; }
    main .container .dashboard .well section{ padding: 30px; font-size: 3.5vw; text-align: center; }
    footer { margin-left: 0; width: 100%; } 

    .modal .wrapper{ max-width: 80%; min-width: 80%; }

    .dialogChangePswd{ display: none; }

    .hide-sm{ display: none; }

    /* .select-container{ margin-top: 25px !important; } */
}

@media screen and (max-width: 500px) {

    /* header { grid-template-columns: 170px 1fr 60px 60px; } */
    
    /* header img.app-icon { width: 45px; height: 64px; } */
    /* header .navbrand a{ font-size: 18px; }
    header .navbrand small{ font-size: 10px; } */

    header #navMenuSwiper .item{ display: grid; gap: 0; justify-items: center; }
    header #navMenuSwiper .item i{ font-size: 12px; }

    header #navMenuSwiper .item{ flex-flow: column; }

    main .right-sidebar { margin-left: 0; width: 100%; }
    main .container .dashboard{ grid-template-columns: repeat(1, 1fr); }
    main .container .dashboard .well section{ padding: 30px; font-size: 7vw; text-align: center; }
    main form .btn-group button{ padding: 15px 20px; border-radius: 25px; width: 50%; }
    footer { margin-left: 0; width: 100%; }
    footer #wrapper{ display: grid; justify-content: center; align-items: center; gap: 20px; }
    .hide-xs{ display: none; }

    .search-pane.float-xs.open{ position: absolute; background: #fff; width: 100%; }    

}

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
    /* .tabulator{ height: 500px; } */
}

/* Landscape */
@media screen and (orientation:landscape) and (max-height: 768px) {
/* Landscape styles */
    /* .tabulator .tabulator-tableHolder .tabulator-table{ height: 500px; } */
    /* footer{ margin-left: 20%; width: 80%;  background: red; } */
}

@media print {
    /* *{
        box-sizing: border-box;
        font-family: Arial;
        color-adjust: exact !important;   
        -webkit-print-color-adjust: exact !important;         
    } */

    body { -webkit-print-color-adjust: exact; }

    /* td{ font-family } */
}

.flatpickr-prev-month, .flatpickr-next-month{ z-index: 1 !important; }