/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.menu .app-brand.demo {
  height: 64px;
  margin-top: 12px;
}

.app-brand-logo.demo svg {
  width: 22px;
  height: 38px;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.5px;
  text-transform: lowercase;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
/* Detached navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 76px !important;
}
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}

.sidebar-fonts{
  margin-top: -3px !important;
}

.menu-sub{
  list-style: none !important;
}

#layout-menu{
  background-color: #3e1a51 !important;
}

.sideBar-selected{
  background-color: #ffffff !important;
  border-radius: 5px !important;
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  color: #3e1a51 !important;
}

.sideBar-inner-selected{
  background-color: #6b134f !important;
  border-radius: 5px !important;
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  color: #ffffff !important;
}

.menu-item{
  padding: 5px !important;
}

.back-drop{
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,0.6);
}

.hide-side-bar-btn{
  margin-left: 15px !important;
  margin-top: 7px;
}

.cursorTabs{
  cursor: pointer;
  border: 0 !important;
}

.tab-active{
  color: #fff;
  /* border-bottom: 3px solid #3e1a51 !important; */
}

.non-active-tab:hover{
   color: #697a8d;
}

.custom-mb-1{
  margin-top: 1px;
}

.search-card{
  background-color: #eeeeee;
  background-clip: padding-box;
  box-shadow: none !important;
}

/* .tabs-card ul{
  border-bottom: 2px solid #dddddd !important;
} */

.add-order-btn{
  float: right;
}

/* .btn-icon{
  float: left;
  height: 3.6rem;
  width: 3.6rem;
  margin-top: 2px;
} */

.btn-light {
  border: 1px solid #dddddd;
}



.option-tbl{
  width: 35px;
  height: 20px;
  cursor: pointer;
  padding: 1px;
  background-color: #eeeeee;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

.option-tbl:hover{
  background-color: #dddddd;
  border: 1px solid #eeeeee;
}

.content-table{
  float: left;
  clear: left;
}

/* Used Earlier in Sizes of Tables Now used in tbl-sm,md,lg,xl */

.tbl-shipmentId{
  font-size: 10px;
}

.tbl-date{
  font-size: 13px;
}
.tbl-name{
  font-size: 14px;
}

/* Text Size used in Table */

.tbl-sm{
  font-size: 10px;
}
.tbl-md{
  font-size: 12px;
}
.tbl-lg{
  font-size: 14px;
}

.tbl-xl{
  /* Only used this in table if something specific very big is required */
  font-size: 16px;
}

.text-pad{
  padding: 5px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

.tbl-status{
  padding: 3px;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  background-color: #eadcf1;
  color: #3e1a51;
  font-size: 10px;
  font-weight: normal;
-moz-border-radius: 2px;
}

.tbl-bg-payment{
  background-color: #8B7596;
}

.line {
  position: absolute;
  left: 50%;
  width: 2px;
  background-color: #ECECEC;
  top: 12px; /* Adjust this value according to your design */
  bottom: 0;
}

.margin-left-div{
  margin-top: 10px;
  margin-left: 10px;
}

.margin-bottom-icon{
  margin-bottom: 5px;
}

.dropdown-item-text{
  font-size: 12px;
}

.text-card{
  float: left;
  font-size: 14px;
}

.text-card-nrml{
  float: left;
  font-size: 18px;
  clear: both;
  font-weight: bold;
}

.text-card-right-nrml{
  float: left;
  clear: both;
  font-size: 12px;
}

.filters{
  margin-bottom: 2px;
  margin-top: 2px;
}

.tab-icon {
  float: left;
  font-size: 14px;
  margin-right: 5px;
  margin-top: 4px;
}

.courier-selected{
  box-shadow: 0 2px 6px 0 rgba(62, 26, 81, 0.6);
}

.courier-priority-svg{
  height: 110px !important;
  text-align: center;
}
.range-field {
  -webkit-appearance: none;
  outline: none;
  height: 12px;
  background-color: rgb(243, 221, 255);
  border-radius: 20px;
  background-image: linear-gradient(to left, #FFEEBB, rgba(255, 238, 187, 0));
}

.range-field::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #6b134f;
  position: relative;
  cursor: pointer;
}

/* .range-field:disabled {
  background-color: grey;
  background-image: none;
} */

.range-field:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
  /* background: #aaa; */
}


.custom-card-body{
  padding: 0.5rem 1.5rem !important;
}

.ribbon-2 {
  --f: 10px; /* control the folded part*/
  --r: 15px; /* control the ribbon shape */
  --t: 2px; /* the top offset */

  position: absolute;
  inset: var(--t) calc(-1*var(--f)) auto auto;
  padding: 0 10px var(--f) calc(10px + var(--r));
  clipPath:
          polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
          calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
          var(--r) calc(50% - var(--f)/2));
  background: #3e1a51;
  box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
  color: #ffffff;
}

.tab-courier{
  cursor: pointer;
}

.courier-tabs{
  height: 12rem !important;
}

.chat-container{
  position: fixed;
  background-color: #fff;
  /* width: 400px; */
  width: auto;
  margin-left: 10px;
  z-index: 999;
  right: 29px;
  bottom: 39px;
  height: 400px;
  /* border: 1px solid #eeeeee; */
}

.chat-msg-text{
  padding: 10px;
  background-color: #eeeeee;
  border-radius: 4px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.chat-user{
  margin-top: 10px;
  margin-left: 10px;
}

.chat-dp{
  height: 50px;
  width: 50px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

.box-body{
  overflow: auto;
  height: 292px;
  margin-top: 10px;
}

.box-footer{
  padding: 10px 0;
}

.box-header{
  background-color: #3e1a51 !important;
  /* height:40px; */
}

.video-height{
  height: 100% !important;
  width: 100% !important;
}

.chat-box-hide{
  bottom: -362px !important;
}

.chat-box-show{
  bottom: 0px !important;
}

.direct-chat-msg{
  float: left;
}

.css-13cymwt-control {
  border: 1px solid #d9dee3 !important
}

.css-13cymwt-control:hover {
  border: 1px solid #3e1a51 !important
}

.custom-pill {
  min-width: 8px;
  width: 8px;
  background: #F0D3FF !important;
  border-radius: 5px;
}

.custom-pill-2 {
  min-width: 8px;
  width: 8px;
  background: #FFEFBE !important;
  border-radius: 5px;
}

.txt-14{
  font-size: 14px;
}