body{
   font-size: 12px !important;
   color: #181818;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
   color: var(--bs-primary);
}

.text-body{
   color: #168168 !important;
}

a:hover{
   color: #45b6fe !important;
   text-decoration: none !important;
}

.btn{   
   padding: 10px 24px;
   margin-bottom: 0px;
}
.btn-sm{   
   padding: 0.375rem 1rem;   
}
.btn-connote-action{
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
}


.fixed-plugin .fixed-plugin-button{
   bottom: 32px;
}


.input-group .input-group-text{
   padding: 0.5rem 0;
}

.input-group-dynamic.input-group > .form-control, 
.input-group-static.input-group > .form-control {
    border-color: transparent;
    box-shadow: none;
}

.field-border-color .input-group-outline.input-group.is-filled > select.form-select,
.field-border-color .input-group-dynamic.input-group.is-filled > select.form-select, 
.field-border-color .input-group-static.input-group.is-filled > select.form-select{
   border-color: var(--bs-primary) !important;
   border-top-color: transparent !important;
   box-shadow: inset 1px 0 var(--bs-primary), inset -1px 0 var(--bs-primary), inset 0 -1px var(--bs-primary);
   
}
.input-group-outline.input-group > select.form-select, 
.input-group-dynamic.input-group > select.form-select, 
.input-group-static.input-group > select.form-select{
   padding-left:12px;
}


.input-group-outline.input-group > select.form-select{
    border-top-left-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
}

.input-group-outline.is-initial.is-filled > select.form-select{
   border-color: #d2d6da !important;
   box-shadow: none;
}

.input-group-outline.is-initial.is-filled > label.form-label {
   border-color: #d2d6da !important;
   box-shadow: none !important;
   color: #7b809a !important;
   border-top-color: #d2d6da;
   /* width: auto; */
   height: initial;
   background: #fff;
   z-index: 20;
   transition: none;
}
.input-group-outline.is-initial.is-filled > label.form-label:before,
.input-group-outline.is-initial.is-filled > label.form-label:after{
   box-shadow: none !important;
   border-color: #d2d6da !important;
}



.field-border-color  .input-group.input-group-outline .form-control,
.field-border-color  .input-group.input-group-outline .form-select{
   border: 2px solid #168168;
}
.field-border-color .input-group.input-group-outline.is-focused .form-control,
.field-border-color .input-group.input-group-outline.is-filled .form-control,
.field-border-color .input-group.input-group-outline.is-focused .form-select
.field-border-color .input-group.input-group-outline.is-filled .form-select{
   border-top: none;   
}
.field-border-color .input-group.input-group-outline.is-focused .form-label + .form-control,
.field-border-color .input-group.input-group-outline.is-filled .form-label + .form-control{
   z-index: 2000;
   padding: 50px;
}

.dataTables_wrapper .form-control{
   border: 1px solid #d2d6da;
}

.table-striped > tbody > tr:nth-of-type(odd) > *, 
.table-striped > tbody > tr:nth-of-type(even) > *,
.table-striped > thead > tr > *
{
   color: #181818;
}

.form-control-lg, .form-control, .form-check-label, .form-select,
.label, .form-label{
   font-size: 13px;
   border-radius: 0.375rem;
}
.input-group.input-group-outline .form-control.form-control-lg, .form-select {
   padding: 0.5rem 0.5rem !important;
}
.input-group.input-group-outline .form-control{
   padding: 0.525rem 0.75rem !important;
}
.input-group.input-group-outline .form-label{
   line-height: 3.525 !important;   
   white-space: nowrap;
   overflow: hidden;
}
.form-select{
   line-height: 1.3 !important; 
   border-top-color: transparent !important;  
}
.form-select:disabled, .form-select:read-only{
   background-color: unset;
   border-style: dashed;
}
label{
   /* z-index: 23; */
}

.invalid-feedback{
   float: left;
   position: absolute;
   top: 1.7rem;
}

.input-group.input-group-outline.is-focused .form-label + .form-control, 
.input-group.input-group-outline.is-filled .form-label + .form-control,
.input-group.input-group-outline.is-filled .form-control,
.input-group.input-group-outline.is-filled .form-select{
   /* box-shadow: unset; */
   border-color: var(--bs-primary) !important;
   border-top-color: transparent !important;
}

.input-group.input-group-outline.is-focused .form-label + .form-control[disabled], 
.input-group.input-group-outline.is-filled .form-label + .form-control[disabled],
.input-group.input-group-outline.is-filled .form-control[disabled],
.input-group.input-group-outline.is-filled .form-select:disabled,
.input-group.input-group-outline.is-focused .form-label + .form-control:read-only, 
.input-group.input-group-outline.is-filled .form-label + .form-control:read-only,
.input-group.input-group-outline.is-filled .form-control:read-only,
.input-group.input-group-outline.is-filled .form-select:read-only 
{
   box-shadow: unset;
   border-color: #d2d6da !important;
   border-top-color: transparent !important;
   border-style: dashed;
}

.form-check:not(.form-switch) .form-check-input[type=radio]:after{
   width: 0.6375rem;
   height: 0.6275rem;
}









/* chrome autofill background */
input:-webkit-autofill ~ label {
    top:-20px;
} 
/*input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out" !important;
    -webkit-transition-delay: 9999s !important;
}

::-webkit-input-placeholder {
   color:transparent !important;
}

:-moz-placeholder { /* Firefox 18- */
   color:transparent !important; 
}

::-moz-placeholder {  /* Firefox 19+ */
   color:transparent !important; 
}

:-ms-input-placeholder {  
   color:transparent !important;
}

.input-group-outline label sup{
   top: 0em;
   line-height: 1.25 !important;
}
.input-group-outline:not(.is-filled):not(.focused) label sup{
   top: 1.55em;
}

.navbar-vertical.navbar-expand-xs .navbar-collapse {
   height: calc(100vh - 260px);
}

.alert-info {
   color: white;
}




.bg-primary-light{
   background-color: #B8D5D4;
}

.btn-primary {
   background-color: #168168 !important;
   padding: 10px 24px;
   margin: 10px;
   border: 1px solid #0B423550 !important;   
   border-radius: 0.375rem;
}

.input-group .btn{
   margin: 0px;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
   background-color: #45b6fe !important;   
   border:1px solid #39b1fb !important;
   color: #fff !important;
}
 
.btn-secondary {
   background-color: #E7EAED !important;
   padding: 10px 24px;
   margin: 10px;
   border: 1px solid #CDD0D4 !important;         
   border-radius: 0.375rem;
   color: #6A6C6E;
   /* border-color: #6A6C6E50; */
}
 
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
   background-color: #45b6fe !important;
   /* border-color: #348ABF !important; */
   border-right:1px solid #45b6fe !important;
   color: #fff !important;
}

.btn-secondary:disabled, .btn-secondary.disabled{
   background-color: #f4f4f4 !important;
   border: 1px solid #f4f4f4 !important;         
   color: #c4c4c4;
}

 
.btn-link {
   background-color: unset;
   padding: 0px;
   margin: 10px;
   border: 0;
   text-decoration: none;
   color: var(--bs-primary);
   /* font-weight: bold; */
   cursor: pointer;
}
 
.btn-link:hover, .btn-link:active, .btn-link:focus {
   /* background-color: #a4a4a4; */
   /* border-color: #a4a4a4; */
   color: #45b6fe;
}

.card-header{
   white-space: nowrap;
   overflow: hidden;
}
.card-header.is-disabled, .card-header.is-disabled h6, 
.card-body.is-disabled, .card-body.is-disabled div, .card-body.is-disabled span,{
   color: #6A6C6E80;   
}





/* Component-card     */
/* ------------------ */
.border-bottom-primary{
   border-bottom: 1px solid var(--bs-primary);
}
.border-bottom-cut-1{
   border-bottom: 1px solid #f0f2f5;
}
.border-bottom-cut-2{
   border-bottom: 2px solid #f0f2f5;
}



.page-item .page-link, .page-item span{
   padding: 0.375rem 0.75rem;
   border-radius: unset !important;
   width: unset;
   height: unset;
}
.page-item:first-child .page-link {
   border-top-left-radius: 0.375rem !important;
   border-bottom-left-radius: 0.375rem !important;
}
.page-item:last-child .page-link {
   border-top-right-radius: 0.375rem !important;
   border-bottom-right-radius: 0.375rem !important;
}

div.dataTables_wrapper div.dataTables_length select{
   width: 75px;
}
table.dataTable.table-striped>tbody>tr.odd>*{
   box-shadow: inset 0 0 0 9999px #fafafa;
}

table.dataTable.table-striped>tbody>tr.odd.selected>*{
   box-shadow: inset 0 0 0 9999px var(--bs-primary-light);
   color: var(--bs-dark);
}

.dt-buttons{
   float: left;
}
.dt-buttons .dt-button{
   border: 1px solid var(--bs-gray-300);
   border-radius: 0.25rem;
   padding: 0.25rem 0.75rem;
}
.dt-buttons .dt-button{
   margin-right: 0.5rem;
}

.courier-logo{
   height: 15px;
}
.courier-logo-big{
   height: 40px;
}


/* Text styles */
/* ----------- */
.subtext{
   color: var(--bs-gray-500); 
   font-size:0.8em;
}
.status-text{
   text-transform:capitalize;
   /* font-size: 0.9em; */
}
.status-text i.fa{
   font-size: 1em;
}

/* Modal              */
/* ------------------ */
.modal-header{
   background-color: var(--bs-primary);   
   padding: 0.75rem 1.5rem;
}
.modal-header .modal-title{   
   color: #fff;
}

legend{
   font-size: calc(0.75rem + 0.3vw);
}


/* TOP Menu              */
/* ---------------------- */
.navbar-main.position-sticky{
   min-height: 67px;
   backdrop-filter: saturate(200%) blur(30px);

   background-color: #16816840;
   box-shadow: inset 0 0px 1px 1px #16816830, 0 20px 27px 0 rgb(0 0 0 / 5%) !important;   
   /* background-color: rgba(255, 255, 255, 0.8) !important; 
   box-shadow: inset 0 0px 1px 1px rgb(254 254 254 / 90%), 0 20px 27px 0 rgb(0 0 0 / 5%) !important; */
   
   margin-bottom: 1rem;
}
.dropdown-toggle ~ .dropdown-menu[data-bs-popper] {
   top: 100%;
   left: inherit;
   margin-top: 5px;
   
}
.navbar-main.position-sticky{
  
}

.dropdown-menu{
   min-width: 8rem !important;
   padding: 0.25rem 0.725rem !important;
}

.dropdown:not(.dropdown-hover) .dropdown-menu.show{
   margin-top: 1.95rem !important
}

.navbar.navbar-main .nav-item .btn-primary{
   border-radius:0;
   margin: 0px !important;  
   min-width:5rem; 
   min-height:4.15rem; 
   padding: 0.8rem 1rem !important; 
   border-right:1px solid var(--bs-primary-dark);
}
.navbar.navbar-main .nav-item .btn-primary:first-child{
   border-radius:0.75rem 0 0 0.75rem !important;  
}
.navbar.navbar-main .nav-item .btn-primary:last-child{
   border-right:1px solid #188F73;
}
.navbar.navbar-main .input-group input{
   /* background-color: #EEF0F3; */
   color: #181818;
}


/* Side Menu              */
/* ---------------------- */
.sidenav-header{
   text-align: center;
   height: 4.15rem;
   background-color: var(--bs-primary-dark);
}
.sidenav .navbar-brand{
   padding: 1em;
}
/* .navbar-vertical.navbar-expand-xs .navbar-nav > .nav-item {
   margin-top: 0.125rem;
} */

.sidenav-footer{
   text-align: center;
   height: 3.875rem;
   background-color: var(--bs-primary);
   /* background-color: var(--bs-primary-dark); */
}
.navbar-vertical.navbar-expand-xs .navbar-nav .nav-link,
.navbar-vertical.navbar-expand-xs .navbar-nav .nav .nav-link.active{
   padding-top: 0.4em;
   padding-bottom: 0.4em;
}
.navbar-vertical.navbar-expand-xs .navbar-nav .nav .nav-link{
   padding-top: 0.5em;
   padding-bottom: 0.5em;
}
.navbar-vertical .navbar-nav .nav-item .collapse .nav, .navbar-vertical .navbar-nav .nav-item .collapsing .nav{
   background-color: #168168;
   border-top: 1px solid var(--bs-primary-dark);
   /* border-bottom: 1px solid var(--bs-primary-dark); */
}
.navbar-vertical.navbar-expand-xs .navbar-nav .nav-link{
   margin: 0.17em 0.75em 0.24em 0.75em;
}
.navbar-vertical .nav-item:hover .nav-link,
.navbar-vertical .nav-item:hover .nav-link + .collapse .nav .nav-item:hover > .nav-link{
   /* border-radius: 2px; */
   background-color: radial-gradient(red 50%, rgba(22, 129, 104, 0.4) 52%) !important;
}

.g-sidenav-show .sidenav .nav-link div:first-child{
   margin-top: -0.3em;
}

/* End - Side Menu---------------------- */



#selectAddress .ct-address{
   cursor: pointer;
   display:inline-block;
}

#selectAddress .ct-address .spacer{      
   margin:0.5rem;
   padding: 1rem;
   border-radius: 5px;
   box-shadow: inset 0 0px 1px 1px #16816830 !important; 
}
#selectAddress .ct-address.active .spacer{
    box-shadow: inset 0 0px 1px 1px #16816830 !important; 
    background-color: #16816840;    
}
#selectAddress .ct-address .spacer:hover{
   box-shadow: inset 0 0px 1px 1px #45b6feaa !important; 
   background:#45b6fe20;
}

.ct-address .type-icon, .address-area .type-icon{
  display:none;
  margin-right: 5px
}

#selectAddress .ct-address[data-type=""] .type-icon.type-empty{
   display:inline-block;
}

#selectAddress .ct-address[data-type="self"] .type-icon.type-profile, #selectAddress .ct-address[data-type="profile"] .type-icon.type-profile{
   display:inline-block;
}

/* #modalSenderPickup .sender-info, #modalSenderPickup .pickup-info{ */
/* .sender-info, .pickup-info{
   cursor:pointer;
   width: 100%; */
   /* border:1px solid #ececee; */
   /* padding: 1em 1.5em; */
   /* border-radius: 3px;
} */

@media (min-width:992px){
   .dropdown .dropdown-menu:before {      
      left: auto;
      right: 10px;      
      /* color: #e4e4e4; */
   }
}
@media (max-width:576px){
   nav[aria-label="breadcrumb"] h6{
      margin-top: 8px;
   }

   nav[aria-label="breadcrumb"] .breadcrumb{
      position: absolute;
      top: 0rem;
   }
}

.swal2-styled.swal2-confirm {
   border: 0;
   border-radius: 0.25em;
   background: initial;
   background-color: var(--bs-primary);
   color: #fff;
   font-size: 1em;
}

.swal2-styled.swal2-cancel {
   border: 0;
   border-radius: 0.25em;
   background: initial;
   background-color: var(--bs-secondary);
   color: #fff;
   font-size: 1em;
}

.swal2-styled.swal2-confirm:hover {
   border-color: var(--bs-primary);
   background-color: var(--bs-primary);
 }
 .swal2-styled.swal2-confirm:focus {
   outline: 0;
   box-shadow: 0 0 0 0.2rem rgba(0, 255, 34, 0.25);
 }
 .swal2-styled.swal2-confirm:active {
   border-color: var(--bs-primary);
   background-color: var(--bs-primary);
 }


 /* Notice board style */
 .notice-date-primary {
   display: flex;
   background: #f4f4f4;
   align-items: center;
   justify-content: center;
   flex-direction: column;    
   width: 3rem;
   height: 3rem;
   border-radius: 50%;
   box-shadow: inset 3px 3px 1px -1px #ddd, 0px 1px 1px -1px #ccc;
}
 
.notice-date-primary .notice-date-day {
   color: #d2d6da;
   font-weight: 500;
   font-size: 1rem;
   line-height: 1;
}
 
.notice-date-primary .notice-date-month {
   color: #d2d6da;
   line-height: 1;
   font-size: 0.8rem;
   text-transform: uppercase;
}
 
#notice-content .notice-title{
    font-size: 1em;
}
#notice-content .notice-desc{
    font-size: 0.8em;
    color: #adb5bd;
}

 /*
 .progress {
 --bs-progress-height: 6px;
 --bs-progress-font-size: 0.75rem;
 --bs-progress-bg: #f0f2f5;
 --bs-progress-border-radius: 0.125rem;
 --bs-progress-box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
 --bs-progress-bar-color: #fff;
 --bs-progress-bar-bg: #e91e63;
 --bs-progress-bar-transition: width 0.6s ease;
 height: var(--bs-progress-height);
 font-size: var(--bs-progress-font-size);
 background-color: var(--bs-progress-bg);
 border-radius: var(--bs-progress-border-radius);
}

.progress-bar {
   flex-direction: column;
   justify-content: center;
   color: var(--bs-progress-bar-color);
   text-align: center;
   white-space: nowrap;
   background-color: var(--bs-progress-bar-bg);
   transition: var(--bs-progress-bar-transition);
}

.progress, .progress-bar {
   display: flex;
   overflow: hidden;
}*/