/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

body {
    font-family: "Noto Sans Thai", "Montserrat" !important;
    font-size: 14px;
}

.form-label {
    font-size: 1rem;
}

.text-truncate {
    font-family: "Noto Sans Thai", "Montserrat";
}

.navbar-floating .navbar-container {
    font-family: "Noto Sans Thai", "Montserrat";
}

.header-navbar .navbar-container {
    border: 0 solid rgba(34, 41, 47, 0.125);
    border-radius: 0.428rem;
}

.scroll-top {
    border-radius: 1.5rem;
}

.row {
    --bs-gutter-x: 0.9rem;
}

.card .card-img-overlay.bg-overlay {
    background: rgba(255, 255, 255, 0);
}

.badge.badge-up {
    position: absolute;
    top: -11px;
    right: -9px;
    min-width: 1.429rem;
    min-height: 1.429rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.786rem;
    line-height: 0.786;
    padding-left: 0.25rem;
    padding-right: 0.25rem; 
}
  
  .badge.badge-up.badge-sm {
    top: -0.5rem;
    right: -0.5rem; 
}
  
  .badge-icon i,
  .badge-icon svg {
    font-size: 100%;
    margin-right: 5px; 
}
  
  .dropup .badge {
    cursor: pointer; 
}

/* .badge.badge-up {
    top: -9px;
    right: -4px;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
} */

/* custom scrollbar */
::-webkit-scrollbar {
    width: 20px;
}
  
::-webkit-scrollbar-track {
    background-color: transparent;
}
  
::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
}

.col-form-label {
    font-size: 1.027rem;
}

.navigation .navigation-header {
    font-size: 1rem;
}

.semi-dark-layout .main-menu-content .navigation-main .navigation-header {
    color: #b4b7bd;
}

.custom-options-checkable .custom-option-item {
    border-radius: 0.62rem;
}

.modal .modal-header .btn-close {
    transform: translate(0px, 0px);
}

.size-50{
    width: 50px;
    height: 50px;
}

.a-prev {
    width: 30px;
    height: 30px;
    vertical-align: left
}

.scroll-top {
    bottom: 10%;
    height: 60px;
    width: 60px;
    border-radius: 50%;
}

.helpfixedButton{
    position: fixed;
    bottom: 0px;
    right: 10px; 
    padding: 20px;
    z-index: 99999;
}

.helproundedFixedBtn{
  height: 60px;
  width: 60px;  
  border-radius: 50%;
  background-color: #F24C4C;
  /* color: white; */
  line-height: 60px;  
  font-size: 1.8em;
  text-align: center;
  cursor: pointer;
}

@media (min-width: 1200px) {
    .modal-custom-package {
      max-width: 70%;
    }
}

.card-pinned{
    position:relative;display:block
}

.card-pinned-top-start{
    position:absolute;top:-.0625rem;left:-.0625rem
}

.card-pinned-top-start.badge{
    border-radius:.8125rem 0 .8125rem 0
}

.card-pinned-top-end{
    position:absolute;top:-.0625rem;right:-.0625rem
}

.card-pinned-top-end.badge{
    border-radius:0 .8125rem 0 .8125rem
}

.btn-delete {
    position : absolute;
    bottom: .4rem;
    right: .2rem;
    box-sizing: content-box;
    width: 0.75rem;
    height: 0.75rem;
    color: currentColor;
    background: transparent url("/asset_backend/images/svg/delete.svg") center/13px auto no-repeat;
    border: 0;
}
.btn-delete:hover {
    color: currentColor;
    text-decoration: none;
    opacity: 0.65;
}
.btn-delete:focus {
    outline: 0;
    box-shadow: none;
    opacity: 1;
}

.avatar.avatar-xl img {
    width: 120px;
    height: 120px;
}

@media (min-width: 992px) {
    .col-lgx-3 {
        flex: 0 0 auto;
        width: 220px;
    }
}

.pricing-card .annual-plan .plan-price span {
    font-size: 3.5rem;
    line-height: 0.8;
}

a.disabled {
    pointer-events: none;
    cursor: default;
}

@media (min-width: 1080px) {
    .modal-invoice {
      max-width: 1080px;
    }
}

.modal .modal-header .btn-close:hover, .modal .modal-header .btn-close:focus, .modal .modal-header .btn-close:active {
    opacity: 1;
    outline: none;
    transform: translate(0px, 0px);
    box-shadow: 0 5px 20px 0 rgba(34, 41, 47, 0.1);
    background-color: #fdaaaa;

}

.modal-content {
    border-radius: 0.6rem;
}

.tooltip {
    font-family: "Montserrat", Helvetica, Arial, serif, "Noto Sans Thai";
}

.btn-drag:hover { cursor: grab; }

.btn-delete {
background-color:red;
}

.select2-container--classic .select2-selection__choice, .select2-container--default .select2-selection__choice {
    font-size: 1rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border-radius: 6px
}

.card-body-ds {
    flex: 1 1 auto;
    padding: 0.5rem 1.5rem;
}

.px-x {
    padding-left: 0.28em !important;
    padding-right: 0.28em !important;
}