@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap");
.addCategoriesModal .btn-close,
.removeCategoriesModal .btn-close,
.menuCanvas-Header .btn-close,
.cartTitleContainer .btn-close,
.contact-support-offcanvas .btn-close,
.pdf-modal-header .btn-close,
.campaignModal-header .btn-close,
.addReportModal .btn-close {
  filter: var(--btnClose-customColor);
}

.cartTitleContainer .btn-close,
.menuCanvas-Header .btn-close {
  padding: 1rem;
}

@media (max-width: 768px) {
  html {
    font-size: 16px;
  }
}
.container-renderbody {
  max-width: 100%;
  height: 100vh;
  overflow-y: auto;
}

.container-renderbody::-webkit-scrollbar {
  display: none;
}

html {
  position: relative;
  min-height: 100%;
  font-size: 1.2rem;
}

body {
  overflow: hidden;
  font-family: "Didact Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*Hide scrollbar but function still avaible*/
body::-webkit-scrollbar {
  display: none;
}

/*selected language*/
.active-language {
  display: inline-block;
  box-sizing: border-box;
  transition: border 0.3s ease, background-color 0.3s ease;
}

.language-selector {
  display: flex;
  gap: 0px;
}

.lang-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.lang-option:hover {
  transform: scale(1.5);
}

.lang-flag {
  width: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.lang-name {
  font-weight: bold;
  color: #333; /* Adjust color as needed */
  display: none;
}

/*selected language END*/
.articles-outer-container::-webkit-scrollbar,
.invitationHeader::-webkit-scrollbar,
.companySelectDropdown::-webkit-scrollbar,
.cart-container::-webkit-scrollbar,
.cartSaveOrder-right::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.articles-outer-container::-webkit-scrollbar-track,
.invitationHeader::-webkit-scrollbar-track,
.companySelectDropdown::-webkit-scrollbar-track,
.cart-container::-webkit-scrollbar-track,
.cartSaveOrder-right::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
  border-radius: 4px;
}

.articles-outer-container::-webkit-scrollbar-thumb,
.invitationHeader::-webkit-scrollbar-thumb,
.companySelectDropdown::-webkit-scrollbar-thumb,
.cart-container::-webkit-scrollbar-thumb,
.cartSaveOrder-right::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 4px;
  background-clip: content-box;
  border: 2px solid transparent;
}

.articles-outer-container::-webkit-scrollbar-thumb:hover,
.invitationHeader::-webkit-scrollbar-thumb:hover,
.companySelectDropdown::-webkit-scrollbar-thumb:hover,
.cart-container::-webkit-scrollbar-thumb:hover,
.cartSaveOrder-right::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

/* Firefox support */
.articles-outer-container,
invitationHeader,
.companySelectDropdown .cart-container,
.cartSaveOrder-right {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}

/*Create user tab*/
.userCreateContainer {
  display: none;
}

.createUser-header {
  background-color: rgb(155, 155, 155);
  height: 80px;
  border-radius: 10px 10px 0px 0px;
  align-items: center;
  font-size: 1px;
  color: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
}

.createUser-header h2 {
  font-size: 24px; /* Example size, adjust as needed */
  line-height: 80px; /* Align vertically center */
  margin: 0; /* Remove default margin */
}

/* Ensure the header is displayed as flex to align items properly */
.createUser-header.row {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

/* Optional: Additional styling for the close button, if needed */
.close-button:hover {
  color: #000; /* Change color on hover, if desired */
}

.createUser-form {
  margin-top: 40px;
  font-size: 18px;
}

/* Accordion button */
.accordion-button {
  /*background-color: yellow;*/
  /*color: #444;*/
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  transition: 0.4s;
  border-radius: 5px;
  /*margin-top: 1rem;*/
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it */
.accordion-button.active, .accordion-button:hover {
  /*background-color: #ccc;*/
}

.accordion-button:not(.collapsed) {
  color: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Style the accordion content panel. Note: hidden by default */
.accordion-content {
  padding: 0 18px;
  background-color: gainsboro;
  display: none;
  overflow: hidden;
  border-radius: 5px;
  color: black;
}

/* Add some space between paragraphs */
.accordion-content p {
  margin-bottom: 10px;
}

/* If you have other elements inside accordion-content, style them as well */
.accordion-content .error-detail {
  display: block; /* Ensure each detail is on its own line */
  margin-bottom: 10px; /* Space between each detail */
}

.sortablemultiselect {
  background-color: var(--bg-sortablejs-selected);
}

.sortablemultiselect:hover {
  background-color: var(--bg-sortablejs-selected-hover) !important;
}

.createUser-rightCol label,
.createUser-leftCol label {
  margin-bottom: 0.1rem;
}

.createUserRole-container {
  margin-top: 1rem;
}

#session-timer {
  color: #ff4d4d; /* Red color for visibility */
  font-weight: bold;
  font-size: 16px;
}

#session-warning-modal .modal-content {
  border: none;
  box-shadow: none;
}

#extend-session-button {
  background-color: var(--article-buy-button-bgColor);
}

#extend-session-button,
#dismiss-modal-button {
  border-radius: 5px;
  opacity: 1;
  color: var(--bs-body-textColor);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 1px;
  border: 1px solid;
  border-color: var(--articleQuantity-borderColor);
  text-transform: uppercase;
}

#extend-session-button:hover {
  background-color: var(--article-buy-button-hover) !important;
  color: white !important;
}

#extend-session-button:focus {
  outline: 2px solid #0056b3 !important; /* Focus ring for accessibility */
}

@media (max-width: 1920px) {
  .userCreateContainer {
    overflow-y: auto;
    max-height: 70vh;
  }
}
@media (max-width: 768px) {
  #session-warning-modal {
    width: 90%;
    padding: 15px;
  }
  .container-renderbody {
    overflow-y: auto !important;
  }
}
.add-item-form button {
  background-color: var(--article-buy-button-bgColor);
}

.add-item-form button:hover {
  background-color: var(--article-buy-button-hover);
}

.edit-container {
  border: 1px solid #ccc;
  margin: 5px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
}

.list > div {
  min-height: 50px;
  text-align: left;
  font-family: Helvetica;
  padding-left: 2rem;
  transform: translate3d(0px, 0px, 0px);
  transition: transform 150ms ease 0s;
}

.list {
  padding-bottom: 1rem;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  padding-left: 0;
}

.list-item {
  margin-top: 0.5rem;
}

.n-4 {
  /*background-color: #797979;*/
  margin-left: 1rem;
}

.n-3 {
  /*background-color: #686868;*/
  margin-left: 1rem;
}

.n-2 {
  /*background-color: #575757;*/
  margin-left: 1rem;
}

.n-1 {
  /*background-color: #464646;*/
  margin-left: 1rem;
}

.n-0 {
  background-color: var(--listItem-bgColor);
}

.add-item-form {
  width: 50%;
  margin: auto;
  max-width: 49vw;
  display: flex;
  justify-content: space-between;
}

.add-item-form button {
  color: var(--bs-body-textColor);
}

.add-item-form button:hover {
  color: var(--bs-body-textColor);
}

.input-item-form {
  height: 85%;
}

.item-form-input-div {
  display: flex;
}

.menu-item-bar {
  border: 5px dashed #ff0000;
}

.category-scrollContainer {
  overflow-y: auto;
  max-height: 77vh;
}

.category-scrollContainer::-webkit-scrollbar {
  display: none;
}

.menu-container {
  /*    width: 50%;*/
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  /*margin-right: auto;
  margin-left: auto;
  max-width: 1320px;
  max-height: 68vh;
  overflow-y: auto;
  padding-bottom: 0px;*/
  max-width: 50vw;
  margin: auto;
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari) */
.menu-container::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge, and Firefox */
.menu-container {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.sortable-placeholder {
  border: 1px dashed #f5f5f5;
  justify-content: center;
  opacity: 0.5;
}

.sortable-chosen {
  color: #6c757d;
}

.sortable-placeholder {
  border: 1px dashed #f5f5f5;
  justify-content: center;
  opacity: 0.5;
}

.sortable-chosen {
  color: #A6A6A6;
}

.sortable-ghost {
  opacity: 0.8;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
}

.addCategoryModalForm {
  padding: 0.5rem;
}

.addCategoryModalInput {
  margin-top: 0.5rem;
}

.removeModalButton {
  color: #f5f5f5;
  background-color: #ff0000;
}

.removeModalButton:hover {
  background-color: #990000;
}

.edit-icons {
  background-color: #87A3C5;
  border: 1px solid white;
}

.remove-icons {
  background-color: #87A3C5;
  border: 1px solid white;
}

.closeAddCategoryModal_Btn {
  background-color: var(--closeUserInfoBtn-color);
  color: var(--bs-body-textColor);
}

.closeAddCategoryModal_Btn:hover {
  background-color: var(--closeUserInfoBtn-hoverColor);
  color: var(--bs-body-textColor);
}

.saveAddCatergory {
  background-color: var(--article-buy-button-bgColor);
  color: var(--bs-body-textColor);
}

.saveAddCatergory:hover {
  background-color: var(--article-buy-button-hover);
  color: var(--bs-body-textColor);
}

/*.addCategoriesModal .btn-close,
.removeCategoriesModal .btn-close {
    filter: var(--btnClose-customColor);
}*/
@media (max-width: 1920px) {
  .category-scrollContainer {
    max-height: 69vh;
  }
}
.categoryItem {
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 10px;
}

.categoryItem:nth-child(even) {
  background-color: var(--listItem-bgColor);
}

.categoryItem:hover {
  background-color: var(--dropzone-hover-BgColor);
}

.articleGroupsContainer {
  margin-top: 1rem;
  display: flex;
  justify-content: space-around;
  text-align: center;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
  max-width: 1320px;
}

.sharedSortableParent {
  width: 30%;
  text-align: center;
}

.sharedSortable {
  width: 100%;
  min-height: 10vh;
  border: 1px solid;
  max-height: 80vh;
  overflow: auto;
  margin-top: 1rem;
}

.categoryArticleItem {
  cursor: grab;
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  width: 100%;
}

.categoryArticleItem:hover {
  background-color: var(--status-checkbox-bgColor);
}

.saveArticleGroupContainer {
  /*background-color: red;*/
  text-align: center;
}

#saveArticleGroup {
  /*background-color: Yellow;*/
  margin-top: 4rem;
  border-radius: 10px;
  width: 80px;
  height: 46px;
}

.categorylist {
  margin-top: 2rem;
  width: 50%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
  max-width: 1320px;
}

.categoryContainer {
  overflow: auto;
  max-height: 80vh;
}

.categoryContainer::-webkit-scrollbar {
  display: none;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #464546;
  border-radius: 10px;
}

/* Handle on hover */
.button-loader:after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 4px solid #fff;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  box-sizing: border-box;
  transform-origin: 50% 50%;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (max-width: 1920px) {
  .categoryContainer {
    max-height: 76vh;
  }
}
.userGroupItem:nth-child(even) {
  background-color: #2A2A2A;
}

.userGroupItem:hover {
  background-color: none;
}

.userGroupsContainer {
  margin-top: 1rem;
  display: flex;
  justify-content: space-around;
  text-align: center;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
  max-width: 1320px;
}

.sharedSortableParent {
  width: 30%;
  text-align: center;
}

.sharedSortable {
  width: 100%;
  min-height: 10vh;
  border: 1px solid;
  max-height: 80vh;
  overflow: auto;
}

.userGroupContainer {
  margin-top: 1rem;
  width: 50%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
  max-width: 1320px;
}

.add-item-container button {
  background-color: var(--article-buy-button-bgColor);
  color: var(--bs-body-textColor);
}

.add-item-container button:hover {
  background-color: var(--article-buy-button-hover);
  color: var(--bs-body-textColor);
}

.userGroupCategoryItem {
  cursor: grab;
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  width: 100%;
}

.userGroupCategoryItem:hover {
  background-color: var(--status-checkbox-bgColor);
}

.saveUserGroupContainer {
  text-align: center;
}

.saveUserCategory-btn {
  background-color: var(--article-buy-button-bgColor);
  margin-top: 4rem;
  border-radius: 10px;
  width: 150px;
  height: 40px;
  border: none;
  text-transform: uppercase;
}

.add-item-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.add-item-usergroups {
  display: flex;
}

.input-add-item-usergroups {
  margin-right: 0.5rem;
  height: 85%;
}

.input-add-item-usergroups {
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 8px;
}

.input-add-item-usergroups::placeholder {
  color: var(--bs-secondary-color);
  padding-left: 10px;
}

.edit-userGroups-container {
  cursor: pointer;
  border: var(--bs-border-width) solid var(--bs-border-color);
  margin-top: 5px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  border-radius: 8px;
}

.edit-userGroups-container:hover {
  background-color: var(--article-fallback-bgColor);
}

.userGroupContainer {
  margin-top: 1rem;
  width: 50%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
  max-width: 1320px;
}

.usergroup-name-edit {
  border: 1px solid #ccc;
  /*padding: 10px;*/
}

.userGroupUsersItem:nth-child(even) {
  background-color: #2A2A2A;
}

.userGroupUsersItem:hover {
  background-color: none;
}

.edit-userGroupUsers-container:hover {
  background-color: var(--article-fallback-bgColor);
}

.userGroupUserItem {
  cursor: grab;
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  width: 100%;
}

.globalButton-container button {
  /*background-color: var(--article-buy-button-bgColor);*/
}

.globalButton-container button:hover {
  background-color: var(--article-buy-button-hover);
}

.saveUserToGroup-btn {
  background-color: var(--article-buy-button-bgColor);
  margin-top: 4rem;
  border-radius: 10px;
  width: 150px;
  height: 40px;
  border: none;
  text-transform: uppercase;
}

.edit-userGroupUsers-container {
  background-color: var(--bs-body-bg);
  cursor: pointer;
  border: var(--bs-border-width) solid var(--bs-border-color);
  margin-top: 5px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  border-radius: 8px;
}

.usergroupuser-name-edit {
  border: 1px solid #ccc;
}

.cartClose-btn i {
  font-size: 2rem;
  color: var(--menu-btnClose-color);
  transition: transform 0.2s ease-in-out, color 0.2s ease-in-out; /* Smooth animation */
}

.cartClose-btn i:hover {
  transform: scale(3.5) !important; /* Scale the icon 1.5 times */
  color: var(--menu-btnClose-hover-color); /* Optional: Change color on hover */
}

.cart-liveAlert {
  padding-bottom: 0rem;
  z-index: 9999;
}

.cart-canvas-container {
  min-width: 800px;
  transition: min-width 0.3s ease;
}

.cart-left-col,
.cart-right-col {
  padding: 15px;
}

.cart-left-col,
.cart-right-col,
.removeCartItem-btn {
  color: var(--article-title-text-color);
}

.cart-left-col {
  background-color: var(--background-article);
}

.cart-right-col {
  width: 100%;
  position: relative;
  height: 100vh;
}

.cart-right-col .clearCart-btn {
  display: none !important;
}

.cart-header {
  display: flex;
}

.cart-container-outer {
  position: relative;
  display: flex;
  background-color: var(--cart-offcanvas-bg);
}

.titleCart h1,
.cart-title h1 {
  font-size: 24px;
  color: var(--cart-h1-color);
}

.cart-title {
  margin: 1rem 0;
  border: 0;
}

.conflict-message {
  font-size: 0.8rem;
  color: red;
  font-weight: bold;
  position: absolute;
  bottom: -14%; /* Align at the bottom of the container */
  left: 0;
  width: 100%; /* Make it span the full width */
  display: block; /* Ensure it displays as a block-level element */
}

.cart-container-inner {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: start;
  width: 100%;
  height: 100%;
  min-height: 5rem;
  margin-bottom: 1rem;
  /*border: 1px solid;*/
}

.cart-container-inner h1 {
  font-size: 24px;
}

.cartTitleContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: center;
  position: relative;
  /*min-height: 3rem;*/
  height: 3rem;
}

.cartTitleContainer .btn-close {
  position: absolute; /* Position the button absolutely within the container */
  top: 0; /* Align to the top of the container */
  right: 0; /* Align to the right of the container */
  padding: 10px; /* Add some padding to make the button easier to interact with */
}

.cart-tbody-container {
  /*padding-bottom: 50px;*/ /* Add bottom padding to ensure the cart content doesn't overlap with the fixed footer */
}

.ribbon-cart {
  font-size: 0.5rem !important;
}

.cart-totalPrice-container {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: column;
  font-size: 1.2rem;
  max-width: 100%;
  padding: 0.8rem;
  position: absolute; /* Position absolute within parent container */
  bottom: 0;
  right: 0; /* Align to the right of the parent */
  left: 0; /* Align to the left to maintain parent's width */
  width: 100%; /* Ensure it takes up the parent's width */
  background-color: var(--cart-offcanvas-bg);
  z-index: 100;
  border-top: 1px solid #EAEAEA;
}

.totalPrice-inner-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}

.totalPrice-label {
  color: var(--article-priceLabel-color);
}

.additionl-cost-apply {
  font-size: 0.8rem;
  color: var(--article-priceLabel-color);
}

.cart-container {
  max-height: 83vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  padding: 0.8rem;
}

#clearCart {
  display: block;
}

.clearCart-btn {
  border: none;
  background: none;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.clearCart-btn:hover {
  color: #474747;
}

.clearCart-btn i {
  padding-left: 5px;
}

.clearCartModal {
  z-index: 1050;
}

/*CSS for Cart layout END*/
/*PLACEORDER FORM*/
.cart-image {
  max-width: 100%; /* Ensure image scales within the container */
  max-height: 100%; /* Ensure image scales within the container */
  background-color: var(--article-fallback-bgColor);
}

.cart-left,
.cart-right,
.cart-middle {
  height: 100%;
  min-height: 100px;
}

.cart-left {
  width: 100px;
  /*height: 100px;*/
  display: flex;
  align-items: center;
  justify-content: center;
  /*padding:3px;*/
}

.cart-middle {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-grow: 1;
  padding: 0 1rem;
}

.cart-middle .article-name p {
  margin-bottom: 4px;
  margin-top: 0;
}

.quantity-price-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.quantity-control-cart {
  display: flex;
  align-items: center;
  width: 136px;
  height: 35px;
  background-color: var(--article-quantity-bgColor);
  color: var(--article-title-text-color);
  border: 1px solid #474747;
  border-radius: 5px;
}

.cart-articlePrice-container {
  font-size: 0.9rem;
}

.quantity-input-cart {
  width: 100%;
  text-align: center;
  border: none;
  font-weight: bold;
  background: none;
  font-weight: bold;
  font-size: 16px;
  color: var(--article-title-text-color);
  width: 100%;
}

.quantity-input-cart:focus {
  border: none !important;
  box-shadow: none !important;
}

/* To remove the increment and decrement buttons in WebKit browsers */
.quantity-input-cart::-webkit-outer-spin-button,
.quantity-input-cart::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-increment-btn i,
.qty-decrement-btn i {
  font-size: 18px;
  color: var(--article-title-text-color);
}

.btn-place-order-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--article-buy-button-bgColor) 0% 0% no-repeat padding-box;
  /*background: #90A19D 0% 0% no-repeat padding-box;*/
  border-radius: 5px;
  opacity: 1;
  width: 100%;
  height: 100%;
  margin: auto;
  letter-spacing: 0px;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
  color: var(--bs-body-textColor);
}

.btn-place-order-cart:hover {
  background: var(--article-buy-button-hover);
  color: var(--bs-body-textColor);
}

.btn-more-articles:hover,
.btn-place-order:hover {
  background-color: lightgray;
}

.varukorg-title {
  font-size: 24px;
  font-weight: 600;
}

.empty-cart {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.empty-cart p {
  text-align: center;
}

/*CSS for Cart layout  END*/
@media (max-width: 1920px) {
  .cart-container {
    height: 80vh;
  }
}
@media (min-width: 769px) {
  .cart-container-outer .toggle-cart-btn,
  .btn-hide-forTab {
    display: none;
  }
}
/* Media Queries to adjust layout for smaller screens */
@media (max-width: 768px) {
  .cart-canvas-container {
    min-width: 50%;
    transition: min-width 0.3s ease;
  }
  .cart-left-col, .cart-right-col {
    width: 100%; /* Each container takes full width */
    padding: 10px;
  }
  .cart-left-col.active,
  .cart-right-col.active {
    display: block;
  }
  .cart-right-col {
    order: -1; /* Moves the right column above the left column */
    height: 100vh;
  }
  .cartTitleContainer {
    height: 4rem;
  }
  .toggle-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #EAEAEA;
    background: #90A19D 0% 0% no-repeat padding-box;
    border-radius: 5px;
    opacity: 1;
    width: 100%;
    height: 40px;
    margin-top: 15px;
    padding: 5px;
    letter-spacing: 0px;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    text-decoration: none;
  }
  .toggle-cart-btn:focus, .toggle-cart-btn:active {
    color: #788a91;
    outline: none;
    text-decoration: none;
  }
  .titleLeft i {
    margin-right: 5px;
  }
  .cart-left-col {
    position: absolute;
    width: 100%;
    top: 0;
    transform: scale(0.55);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s ease, opacity 0.5s ease, visibility 0s 0.5s;
  }
  .cart-left-col.active {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    transition: transform 0.5s ease, opacity 0.5s ease;
  }
  .cart-left-col.inactive {
    transform: scale(0.55);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s ease, opacity 0.5s ease, visibility 0s 0.5s;
  }
  .cart-totalPrice-container.inactive {
    transform: scale(0.55);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s ease, opacity 0.5s ease, visibility 0s 0.5s;
  }
  .ribbon-cart.inactive {
    transform: scale(0.15);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s ease, opacity 0.5s ease, visibility 0s 0.5s;
  }
  .ribbon-cart.active {
    /*transform: scale(1);*/
    opacity: 1;
    visibility: visible;
    transition: transform 0.5s ease, opacity 0.5s ease;
  }
  .cart-container-inner {
    margin-bottom: 0px;
  }
  .cart-container-inner img {
    width: 80px;
    /*background-color: black;*/ /* Presuming you want to keep this */
  }
  .cart-left,
  .cart-right,
  .cart-middle {
    height: 80px; /* Reduced height for smaller screen sizes */
  }
  .cart-left {
    width: 80px;
  }
  .cart-middle {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0 10px; /* Adjust padding for better spacing */
  }
  .cart-middle .article-name p {
    margin-bottom: 2px; /* Less space between paragraphs */
    margin-top: 0;
    font-size: 0.8rem;
  }
  .quantity-control-cart {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 130px;
    height: 30px;
    background-color: #292929;
    border: 1px solid #474747;
    border-radius: 5px;
    margin-top: auto;
  }
  .quantity-control-cart input {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .cart-totalPrice-container {
    padding-bottom: 6rem;
  }
  .cart-canvas-container {
    min-width: 100%;
    transition: min-width 0.3s ease;
  }
  .quantity-control-cart {
    max-width: 130px;
  }
}
/* Adjust z-index for modal backdrop */
.modal-backdrop {
  z-index: 1040 !important;
}

.snowflake {
  position: fixed;
  top: -10px;
  color: white;
  z-index: 1000;
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  pointer-events: none; /* Allow clicks to pass through snowflakes */
}

@keyframes fall {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100vh); /* Fall to the bottom of the viewport */
  }
}
/* Rent banner ribbon right*/
/*.ribbon {
    font-size: 0.8rem;*/ /* Adjusted font size to fit the banner */
/*font-weight: bold;
    color: #fff;
    --f: 0.5em;*/ /* Control the folded part */
/*position: absolute;
    top: 0;
    right: 0;
    line-height: 1.8;
    padding-inline: 2em;*/ /* Adjust padding */
/*padding-bottom: var(--f);
    border-image: conic-gradient(#0008 0 0) 51%/var(--f);
    clip-path: polygon( 100% calc(100% - var(--f)), 100% 100%, calc(100% - var(--f)) calc(100% - var(--f)), var(--f) calc(100% - var(--f)), 0 100%, 0 calc(100% - var(--f)), 999px calc(100% - var(--f) - 999px), calc(100% - 999px) calc(100% - var(--f) - 999px) );
    transform: translate(calc((1 - cos(45deg)) * 100%), -100%) rotate(45deg);
    transform-origin: 0% 100%;
    background-color: #2279ac;*/ /* The main color */
/*z-index: 2;*/ /* Make sure the banner is on top of the image */
/*}*/
/* Ensure the image is responsive */
.article-image img {
  display: block;
  width: 100%;
  max-width: 300px;
}

/*Left ribbon*/
.ribbon {
  font-size: 0.8rem;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  --f: .5em; /* control the folded part */
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1.8;
  padding-inline: 2em;
  padding-bottom: var(--f);
  border-image: conic-gradient(rgba(0, 0, 0, 0.5333333333) 0 0) 51%/var(--f);
  clip-path: polygon(100% calc(100% - var(--f)), 100% 100%, calc(100% - var(--f)) calc(100% - var(--f)), var(--f) calc(100% - var(--f)), 0 100%, 0 calc(100% - var(--f)), 999px calc(100% - var(--f) - 999px), calc(100% - 999px) calc(100% - var(--f) - 999px));
  transform: translate(-29.2893218813%, -100%) rotate(-45deg);
  transform-origin: 100% 100%;
  background-color: var(--article-buy-button-bgColor);
  z-index: 2;
}

/**********************************/
#loading-indicator {
  position: relative;
  text-align: center;
  margin: 20px auto;
  color: var(--article-buy-button-bgColor);
}

.highlight-dropdown {
  border: 1px solid var(--article-highlight-dropdownOptions-error);
}

.article-badge {
  display: inline-block;
  background-color: #f44336;
  color: white;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.article-filter-buttons-outer {
  justify-content: start;
  width: 100%;
  max-width: 65vw;
  padding: 10px;
}

.article-filter-buttons {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.filter-link {
  color: var(--default-text-color);
  text-decoration: none;
  margin-right: 10px;
  font-size: 20px;
}

.filter-link:hover {
  color: #6E89A7;
}

.filter-link.active {
  color: #87A3C5;
  font-weight: bold;
}

.articles-outer-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 90vh;
  max-height: 90vh;
  width: 100%;
  overflow-y: auto;
}

.articles-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 5px;
  row-gap: 30px;
  width: 100%;
  max-width: 65vw;
  height: 100%;
  margin: 0 auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 10px;
}

.articles-container .article:last-child {
  margin-bottom: 0px;
}

.article,
.article-footer,
.article-header {
  background-color: var(--background-article);
}

.article {
  position: relative;
  height: 100%;
  min-width: 300px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Ensure the footer stays at the bottom */
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
  vertical-align: top;
  box-sizing: border-box;
}

.btn-openPDF {
  padding: 0;
  border: 0;
}

.article-container-inner {
  flex-grow: 1;
  padding: 5px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.article-number {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.item-number-container,
.item-price-container {
  font-size: 0.7em;
  font-weight: bold;
  margin: 0;
  padding-bottom: 5px;
  overflow: hidden;
  text-align: left;
  color: #a5a5a5;
}

.item-number-label,
.item-price-label {
  font-weight: normal;
}

.item-price-label {
  color: var(--article-priceLabel-color);
}

.item-price-value {
  color: var(--article-title-text-color);
  font-size: 0.8rem;
}

.item-number-value,
.item-price-value {
  font-weight: bold;
}

.article-data-container {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  width: 100%;
  height: 8.25rem;
  max-height: 10rem;
  margin: 0 auto;
  align-items: self-start;
}

.article-title {
  min-height: 50px;
  max-height: 55px;
  margin: 0;
  padding: 0;
}

.article-balance-container {
  margin-top: 5px;
  font-weight: bold;
  color: var(--article-default-text-color);
  margin: 0;
  padding: 0;
  font-size: 0.7rem;
}

.article-title h3 {
  font-size: 1rem;
  font-weight: normal;
  margin: 0;
  color: var(--article-title-text-color);
}

/*.article-body {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    padding-bottom: 5px;
    color: var(--article-default-text-color);
}*/
.article-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--article-default-text-color);
}

.article-body p {
  margin: 0;
  font-size: 0.8rem;
  font-weight: normal;
  padding-top: 0px;
}

.article-description-text {
  max-height: 5rem;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.article-description-text.expanded {
  max-height: 500px; /* or use `none` if height is unknown */
  overflow: visible;
}

.toggle-readmore-btn,
.toggle-readless-btn {
  background: none;
  border: none;
  color: var(--article-buy-button-bgColor);
  padding: 0;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: bold;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.toggle-readmore-btn:hover {
  color: var(--article-buy-button-hover);
}

.article-description-wrapper {
  position: relative;
  flex-grow: 1;
  overflow: hidden;
  transition: max-height 0.5s ease;
  margin-bottom: 0.5rem;
  background-color: var(--background-article);
}

.article-image {
  background-color: var(--article-fallback-bgColor);
  height: 300px;
  width: 100%;
  position: relative;
  display: block;
}

.article-price {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background-color: transparent; /* Semi-transparent background */
  color: var(--article-default-text-color);
  padding: 2px 2px;
  font-weight: bold;
  border-radius: 4px;
  font-size: 0.7em; /* Adjust font size as needed */
}

.dropdowns-container {
  display: flex;
  flex-direction: row; /* Make items align horizontally */
  justify-content: space-between; /* Spread left and right */
  min-height: 38px;
  width: 100%;
  margin-bottom: 10px;
  margin-top: 1rem;
  gap: 10px;
}

.dropdowns-container .form-select {
  transition: border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Variant is always on the left */
.variant-dropdowns {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}

/* Right dropdowns container */
.right-dropdowns {
  flex: 1;
  display: flex;
  justify-content: flex-end; /* By default, align to the right */
  gap: 10px;
}

/* When both color and size are present, split space */
.right-dropdowns.has-color-and-size {
  justify-content: space-between; /* Push Color left, Size right */
}

/* Style for single values */
.one-color-only,
.one-size-only,
.one-variant-only,
.one-color-only-displayed {
  background-color: var(--article-dropdown-option);
  color: var(--article-title-text-color);
  border: 1px solid var(--bs-border-color);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  font-size: 0.85rem;
  /*height: 38px;*/
  width: 140px;
  min-width: 48%;
}

/* Make sure width adjusts properly */
.one-color-only-displayed {
  width: 50%;
}

/* Dropdown width settings */
.variant-dropdowns select,
.right-dropdowns select {
  width: 100%;
}

/* Dark Mode */
[data-bs-theme=dark] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Light Mode */
[data-bs-theme=light] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.left-dropdowns .form-select,
.right-dropdowns .form-select {
  font-size: 0.85rem;
  background-image: var(--bs-form-select-bg-img);
  background-color: var(--article-dropdown-option);
  color: var(--article-default-text-color);
  max-width: 50%;
  border-radius: 5px;
}

/* Ensure the right dropdowns container flexes properly */
.right-dropdowns {
  display: flex;
  gap: 10px;
  width: auto;
}

.right-dropdowns .form-select:only-child {
  max-width: 48%;
  border-radius: 0.375rem;
}

.size-dropdown {
  /*width:48% !important;*/
}

.no-left-dropdowns {
  display: none;
}

.left-dropdowns {
  display: inline-flex;
  width: 100%;
}

.left-dropdowns:empty {
  display: none;
}

.article-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 10px;
  margin-top: auto;
}

.quantity-control,
.quantity-input,
.quantity-control span i {
  background-color: var(--article-quantity-bgColor);
  color: var(--article-default-text-color);
}

.quantity-control {
  display: flex;
  align-items: center;
  border: 1px solid;
  border-color: var(--articleQuantity-borderColor);
  border-radius: 5px;
  padding: 10px;
  height: 50px;
  width: 50px;
  flex-grow: 1;
}

.quantity-input {
  width: 100%;
  text-align: center;
  border: none;
  font-size: 0.8rem;
}

/* Style for icons (if necessary) */
.quantity-control span i {
  padding: 5px;
}

.buy-button,
.not-in-stock,
.notPurchasable {
  flex-grow: 1; /* Allow the button to grow and take available space */
  height: 50px;
  width: 50px;
  border-radius: 5px;
  opacity: 1;
  color: var(--bs-body-textColor);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 1px;
  border: 1px solid;
  border-color: var(--articleQuantity-borderColor);
  text-transform: uppercase;
}

.buy-button {
  background-color: var(--article-buy-button-bgColor);
}

.buy-button:hover {
  background-color: var(--article-buy-button-hover);
}

.not-in-stock,
.notPurchasable {
  font-size: 0.9rem;
  background-color: var(--article-not-in-stock);
  word-wrap: break-word;
}

.not-in-stock:hover,
.notPurchasable:hover {
  background-color: var(--article-not-in-stock-hover);
  color: #fff;
  cursor: not-allowed;
}

.custom-icon-bag {
  font-size: 15px; /* Adjust the size as needed */
}

/*Hide up and down arrow inside input for number */
/* For Chrome, Safari, Edge, Opera */
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Firefox */
.quantity-input[type=number] {
  appearance: textfield;
}

/*Hide up and down arrow inside input for number END */
/*@media (min-width: 3840px) {
    .articles-container {
        max-width: 50vw;
    }
}*/
@media (max-width: 3440px) {
  .article-filter-buttons-outer {
    padding: 8px;
  }
}
@media (max-width: 1920px) {
  .articles-container,
  .article-filter-buttons-outer {
    max-width: 71vw;
  }
  .article-filter-buttons-outer {
    /*padding:8px;*/
  }
  .articles-container {
    margin-bottom: 2rem;
  }
}
@media (max-width: 1440px) {
  .articles-container,
  .article-filter-buttons-outer {
    max-width: 95vw;
  }
}
@media (max-width: 1024px) {
  .articles-container {
    justify-items: center;
    padding-bottom: 3rem;
    padding: 0px;
  }
  .articles-container,
  .article-filter-buttons-outer {
    max-width: 100vw;
  }
  .article-filter-buttons-outer {
    padding: 12px;
  }
}
@media (max-width: 820px) {
  .article-filter-buttons-outer {
    padding-left: 35px;
  }
  .article-filter-buttons {
    margin-top: 0px;
  }
  .articles-container {
    column-gap: 0;
  }
  .articles-outer-container {
    padding-bottom: 2rem;
  }
}
@media (max-width: 768px) {
  .articles-container {
    max-width: 90vw;
  }
}
@media (max-width: 620px) {
  .articles-container {
    max-width: 100vw;
  }
  .article-filter-buttons-outer {
    padding-left: 0;
    max-width: 16rem;
  }
  .articles-outer-container {
    /*padding: 5px;*/
    /*height: 100%;*/
    max-height: 100vh;
    width: 100%;
    padding-bottom: 4rem;
    /*margin-bottom:5rem;*/
  }
}
@media (max-width: 620px) and (max-width: 480px) {
  .articles-container {
    padding-bottom: 9rem;
  }
}
@media (max-width: 620px) and (max-width: 375px) {
  .article-filter-buttons-outer {
    /*padding-left: 24px;*/
  }
}
@media (max-width: 620px) and (max-width: 320px) {
  .article-filter-buttons-outer {
    padding-left: 0px;
  }
}
/****Dashboard for SuperAdmin****/
.dashboard-container {
  margin-top: 80px;
  /*background-color:red;*/
  /*padding:20px;*/
}

.news-section,
.recent-activities-section,
.system-info,
.data-usage,
.questions-section,
.new-files-section,
.error-messages,
.mail-form {
  background-color: rgb(134, 134, 134);
  border-radius: 0.25rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .news-section,
  .recent-activities-section,
  .system-info,
  .data-usage,
  .questions-section,
  .new-files-section,
  .error-messages,
  .mail-form {
    padding: 1rem;
  }
  .dashboard-container {
    padding: 5px;
    display: flex;
    flex-direction: column;
  }
}
.card {
  /*margin-bottom: 1rem;*/
  /* Add other styling as needed */
}

.card-title {
  /* Add styling for card title */
}

.card-text {
  /* Add styling for card text */
}

.error-log-container {
  max-height: 700px; /* Adjust as needed */
  overflow-y: auto; /* Makes the container scrollable */
  position: relative; /* Needed for sticky positioning to work correctly */
}

.sticky-toggle-button {
  position: sticky; /* Stick to a given position within its container */
  bottom: 10px; /* Distance from the bottom of its nearest ancestor with scrolling */
  z-index: 1000; /* Ensure the button stays on top of other elements */
}

/****Dashboard for SuperAdmin END****/
/*
.ham {
    width: 30px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hamRotate.active {
    transform: rotate(45deg);
}

.hamRotate180.active {
    transform: rotate(180deg);
}

.line {
    fill: none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke: #000;
    stroke-width: 5.5;
    stroke-linecap: round;
}

.ham1 .top {
    stroke-dasharray: 40 139;
}

.ham1 .bottom {
    stroke-dasharray: 40 180;
}

.ham1.active .top {
    stroke-dashoffset: -98px;
}

.ham1.active .bottom {
    stroke-dashoffset: -138px;
}

svg {
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.active svg {
    transform: rotate(90deg);
}

path {
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

    path:nth-child(1) {
        transform-origin: 36% 40%;
    }

    path:nth-child(2) {
        stroke-dasharray: 29 299;
    }

    path:nth-child(3) {
        transform-origin: 35% 63%;
    }

    path:nth-child(4) {
        stroke-dasharray: 29 299;
    }

    path:nth-child(5) {
        transform-origin: 61% 52%;
    }

    path:nth-child(6) {
        transform-origin: 62% 52%;
    }

.active path:nth-child(1) {
    transform: translateX(9px) translateY(1px) rotate(45deg);
}

.active path:nth-child(2) {
    stroke-dasharray: 225 299;
    stroke-dashoffset: -72px;
}

.active path:nth-child(3) {
    transform: translateX(9px) translateY(1px) rotate(-45deg);
}

.active path:nth-child(4) {
    stroke-dasharray: 225 299;
    stroke-dashoffset: -72px;
}

.active path:nth-child(5) {
    transform: translateX(9px) translateY(1px) rotate(-45deg);
}

.active path:nth-child(6) {
    transform: translateX(9px) translateY(1px) rotate(45deg);
}

*/
.siteNoticeQuill {
  max-width: 36vw;
}

.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow-y: auto;
}

.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mh-logo {
  margin-bottom: 28px;
}

.mh-logo-text {
  width: 100%;
  height: 53px;
}

.login-box p {
  text-align: center;
}

.login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 579px;
  max-width: 100%;
  background-color: transparent;
  margin-bottom: 1rem;
}

.login-box form {
  width: 348px;
}

.login-box h1 {
  text-align: left;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 1.8px;
  margin-bottom: 20px;
  color: var(--login-logout-text-color);
}

.email-input,
.password-input {
  width: 100%;
  height: 47px;
  background-color: var(--form-input-bgColor);
  border: 1px solid var(--form-input-bgColor);
  border-radius: 16px;
  opacity: 1;
  letter-spacing: 0px;
  font-size: 16px;
  color: #D6D6D6;
  text-align: left;
}

.email-input {
  margin-bottom: 10px;
}

.email-input:focus,
.password-input:focus {
  background-color: var(--form-input-bgColor);
}

.loginBtn {
  border-radius: 5px;
  height: 63px;
  width: 100%;
  background: #87A3C5;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-top: 20px;
  border: 0px;
}

.loginBtn:hover {
  background-color: #6E89A7;
  transition: background-color 0.3s;
}

.forgot-pass {
  letter-spacing: 0px;
  font-size: 14px;
  opacity: 1;
  margin-top: 10px;
}

.forgot-pass a {
  color: #E7E7E7;
}

.forgot-pass a:hover {
  color: #6E89A7;
}

.language-row {
  margin-top: 20px;
}

.language-row img {
  width: 25px;
  height: 25px;
  cursor: pointer;
  transition: transform 0.3s ease, border 0.3s ease;
  padding: 1px;
  object-fit: cover;
  margin: 0px 5px 0px;
}

.language-row img:hover {
  transform: scale(1.2);
}

/* Mobile Styles */
@media (max-width: 768px) {
  .login-container .ql-editor {
    max-width: 100%;
    /*margin: auto;*/
  }
  .login-container {
    padding: 15px;
  }
  .login-logo .mh-logo {
    width: 180px; /* Adjust logo size for mobile */
    margin-bottom: 20px;
  }
  .login-logo .mh-logo-text {
    width: 260px; /* Adjust text size under logo for mobile */
    height: auto; /* Maintain aspect ratio */
  }
  .login-box {
    height: auto; /* Height should be auto on mobile to accommodate different content sizes */
    width: 90%; /* Take up most of the screen width */
    padding: 20px; /* Add some padding inside the box */
  }
  .login-box form {
    width: 100%; /* Form should take the full width of the login-box */
  }
  .login-box h1 {
    font-size: 16px; /* Adjust font size for mobile */
    margin-bottom: 15px;
  }
  .email-input,
  .password-input {
    height: 40px; /* Adjust input height for mobile */
  }
  .loginBtn {
    height: 50px; /* Adjust button height for mobile */
    width: 100%; /* Button should take full width of form */
    font-size: 16px; /* Adjust font size for mobile */
  }
  .forgot-pass {
    font-size: 12px; /* Adjust font size for mobile */
  }
  .language-row img {
    width: 25px; /* Adjust language icon size for mobile */
    /* Keep other styles same */
  }
}
#accordionMain .accordion-item.accordion-item, #accordionCampaignMain .accordion-item.accordion-item {
  /*margin-left: 1rem;*/
  border: none;
}

.accordionButtonContainer {
  display: flex;
  flex-direction: row;
  --bs-accordion-btn-padding-y: 10px;
}

.accordionButtonContainer .accordion-button {
  background-color: var(--menu-canvas-bg);
  border-radius: 0px;
}

.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 0px;
  /*    border-top-right-radius: var(--bs-accordion-inner-border-radius);*/
}

.accordion-item {
  background-color: transparent;
  margin-left: 20px;
}

.accordionButtonName {
  border-top-left-radius: var(--bs-accordion-inner-border-radius);
  border-top-right-radius: var(--bs-accordion-inner-border-radius);
  cursor: pointer;
  padding: 10px;
  border: none;
  text-align: left;
  outline: none;
  border-radius: 0px;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  font-size: 1rem;
  color: var(--article-default-text-color);
  background-color: var(--menu-canvas-bg);
  overflow-anchor: none;
  transition: var(--bs-accordion-transition);
}

.accordionButtonName:hover {
  background-color: var(--menuLink-HoverColor);
  border-radius: 5px;
}

.offcanvas-start {
  background-color: var(--menu-canvas-bg);
  color: var(--article-title-text-color);
}

.footer-categories-menu {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--article-buy-button-bgColor);
  color: var(--bs-body-textColor) !important;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 1px;
  font-size: 1rem;
}

.footer-categories-menu:hover {
  background-color: var(--article-buy-button-hover);
}

.setting-menu-container:hover {
  background-color: var(--menuLink-HoverColor);
}

.menu-admin-link {
  color: var(--footer-color) !important;
  text-decoration: none;
}

.menu-admin-link:hover {
  color: var(--menuLink-HoverColor) !important;
}

/*:root,
[data-bs-theme="light"] {*/
/*--footer-background: #f5f5f5;*/
/*}*/
/*:root,
[data-bs-theme="dark"] {

}*/
.w-90 {
  width: 90% !important;
}

.w-10 {
  width: 10% !important;
}

@media (min-width: 426px) {
  .setting-menu-container {
    display: none;
  }
  .accordion-item {
    margin-left: 16px;
  }
}
@media (max-width: 425px) {
  .setting-menu-container {
    margin-bottom: 5px;
  }
  .settingBtnCanvas {
    border: 0;
    background-color: transparent;
    width: 100%;
  }
  .setting-tab {
    right: 0;
    left: 40%;
    bottom: 365px;
    margin: 0 auto;
  }
  body .setting-tab:hover {
    transform: none;
    transition: none;
  }
}
@media (max-width: 375px) {
  .setting-tab {
    left: 43%;
  }
}
@media (max-width: 320px) {
  .setting-tab {
    bottom: 365px;
    left: 47%;
  }
}
.userModalHeader {
  pointer-events: none;
}

.userModalHeader h6 {
  font-size: 1.5rem;
  padding-left: 5px;
}

.profile-modal {
  text-align: center;
}

.profile-modal:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.profile-modal .modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  width: 100%;
}

.modal-profile-container {
  background-color: var(--modal-bg-userProfile);
}

/*.modal-profile-container::-webkit-scrollbar{
    display:none;
}*/
fieldset {
  display: none;
}

fieldset.show {
  display: block;
  overflow-y: hidden;
}

@media (max-width: 1024px) {
  fieldset {
    /*max-height:50vh;*/
  }
}
select:focus, input:focus {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: 1px solid #2196F3 !important;
  outline-width: 0 !important;
  font-weight: 400;
}

button:focus {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  outline-width: 0;
}

.tabs {
  margin: 2px 5px 0px 5px;
  padding-bottom: 10px;
  cursor: pointer;
}

.tabs:hover, .tabs.active {
  /*border-bottom: 1px solid #2196F3;*/
  border-bottom: 2px solid #87A3C5;
}

a:hover {
  text-decoration: none;
  color: #1565C0;
}

.box {
  margin-bottom: 10px;
  border-radius: 5px;
  padding: 10px;
}

.modal-backdrop {
  /*background-color: #64B5F6;*/
}

.line {
  background-color: #CFD8DC;
  height: 1px;
  width: 100%;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*USER PROFILE TAB */
.profile-container,
.profile-container input,
.user-form {
  color: var(--modal-header-color);
}

.profile-container input:focus {
  color: var(--modal-header-color);
}

.profile-container {
  display: flex;
  width: 100%;
  overflow-y: auto;
  height: 82vh;
}

.profile-container::-webkit-scrollbar {
  display: none;
}

.profile {
  width: 40%;
  border-right: solid 1px #ffffff;
}

.profile-header,
.password-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.user-profile-form-container {
  width: 100%;
  height: 100%;
  min-height: 900px;
}

.user-profile-info {
  padding-bottom: 0rem;
  margin-bottom: 12rem;
}

.user-profile-info input:focus,
.passWordContainer input:focus {
  background-color: transparent;
}

.user-form {
  padding: 20px;
}

.user-form label {
  display: flex;
  align-items: center;
  font-weight: 600;
}

.user-form input,
.user-form textarea,
.user-form label {
  height: 50px;
  margin-top: 15px;
}

.activity {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 400;
  color: dimgray;
}

.newUserButton {
  display: flex;
  max-width: 1320px;
  margin-right: auto;
  margin-left: auto;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin: 0;
  padding: 0;
}

.newUserButton button {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.errorLogViewContainer {
  margin-top: 1rem;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
  max-width: 1320px;
}

/*USER PROFILE TAB END*/
.profile-modal-footer {
  border-top: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 10px;
  column-gap: 10px;
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  z-index: 1000;
}

.changePassword-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 80px;
  margin-bottom: 0px;
  gap: 10px;
}

.updateUserMess {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  /*background-color: #717171;*/
  color: white;
  text-align: center;
}

.updateUserMessageContainer {
  display: flex;
  justify-content: center; /* Centered the content inside */
  align-items: center; /* Centered vertically */
  width: 100%; /* Set width to take half of the parent container */
  height: auto; /* Adjusted height to match other container */
}

.passProfileContainer {
  display: flex;
  justify-content: center; /* Ensures buttons are centered */
  align-items: center; /* Aligns buttons vertically */
  width: 50%; /* Set width to take half of the parent container */
}

.changePassProfileBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: 0% 0% no-repeat padding-box;
  background-color: var(--article-buy-button-bgColor);
  border: none;
  border-radius: 5px;
  opacity: 1;
  width: 100%; /* Ensures button takes full available width of its container */
  height: 50px;
  letter-spacing: 0px;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
  text-decoration: none;
}

.tabs {
  text-align: left;
}

.updateCloseBtnContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 10px;
}

.user-profile-form-container {
  position: relative; /* Ensure positioning context for absolutely positioned elements */
}

.updateUserInfoBtn,
.changePassProfileBtn,
.closeUserInfoBtn {
  color: var(--bs-body-textColor);
}

.changePassProfileBtn:hover,
.updateUserInfoBtn:hover {
  background-color: var(--article-buy-button-hover);
  color: var(--bs-body-textColor);
}

.updateUserInfoBtn {
  background-color: var(--article-buy-button-bgColor);
  opacity: 1;
  width: 50%;
  height: 50px;
  margin: auto;
  letter-spacing: 0px;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.closeUserInfoBtn {
  background-color: var(--closeUserInfoBtn-color); /* Neutral gray */
  border-radius: 5px;
  opacity: 1;
  width: 50%;
  height: 50px;
  margin: auto;
  letter-spacing: 0px;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.closeUserInfoBtn:hover {
  background-color: var(--closeUserInfoBtn-hoverColor);
  color: #FFFFFF;
}

/* Media Queries for adjusting font sizes on smaller screens */
@media (min-width: 1920px) {
  .modal-profile-container {
    max-height: 90vh;
  }
  .userProfile-table {
    padding: 0;
    margin: 0;
  }
  /*    .user-profile-info{
          min-height: 50vh;
      }

      .profile-container{
          color:red;
      }*/
}
@media (max-width: 1024px) {
  .modal-profile-container {
    max-height: 89vh;
  }
}
@media (max-width: 768px) {
  .profile-header {
    margin-top: 10px;
  }
  .user-form {
    padding: 0;
  }
  .user-profile-form-container {
    max-height: 47rem;
  }
  .profile-modal .modal-dialog {
    width: 90%;
    min-width: 700px;
  }
  .modal-profile-container {
    padding: 10px;
  }
  .changePassProfileBtn,
  .closeUserInfoBtn,
  .updateUserInfoBtn,
  .closeUserInfoBtn {
    font-size: 15px;
  }
  .profile-header,
  .password-header {
    display: block;
  }
}
@media (max-width: 480px) {
  .profile-container {
    max-height: 75vh;
  }
  .user-profile-form-container {
    min-height: 26rem;
  }
  .profile-modal-footer {
    position: relative;
    margin-top: 1rem;
    padding: 0;
  }
  .profile-modal .modal-dialog {
    min-width: 350px;
  }
  .user-form {
    padding: 0px;
  }
  .user-form input,
  .user-form textarea,
  .user-form label {
    height: 35px;
    margin-top: 5px;
  }
  .user-form textarea {
    /*min-height: 70px;*/
  }
  .user-profile-form-container {
    padding: 10px;
  }
  .user-profile-info {
    padding-bottom: 0px;
    margin-bottom: 0px;
  }
  /*.user-profile-info::-webkit-scrollbar {
      display: none;
  }*/
  .changePassword-container {
    flex-direction: column; /* Stack children vertically */
    height: auto; /* Adjust height to contain both child containers */
    margin-bottom: 10px;
  }
  .updateUserMessageContainer, .passProfileContainer {
    width: 100%; /* Each container takes full width */
    height: auto; /* Adjust height as needed */
  }
  .changePassProfileBtn {
    min-width: auto; /* Remove minimum width restriction */
  }
}
@media (max-width: 375px) {
  .changePassword-container {
    flex-direction: column;
  }
  .changePassProfileBtn,
  .closeUserInfoBtn,
  .updateUserInfoBtn,
  .closeUserInfoBtn {
    font-size: 13px;
  }
  .user-profile-info {
    /*max-height: 45vh;*/
  }
  .profile-modal .modal-dialog {
    min-width: 250px;
  }
}
/* Media Queries for Mobile Devices */
.menu-btn {
  padding-right: 25px;
}

/* Default dark mode styles */
:root {
  --menu-image: url("/images/icons/Hamburger-Meny.svg"); /* Default dark mode image */
  --cart-image: url("/images/icons/Varukorg.svg"); /* Default dark mode image */
  --search-image: url("/images/icons/Search.svg"); /* Default dark mode image */
}

/* Default styles */
.hamburger-menu-navbar,
.cart-icon {
  height: 3rem; /* Common height */
  content: var(--menu-image); /* Default to menu image */
}

.hamburger-menu-navbar {
  content: var(--menu-image); /* Use menu image */
  margin-top: 10px; /* Specific to hamburger menu */
}

.cart-icon {
  content: var(--cart-image);
}

.search-icon {
  content: var(--search-image);
}

/* Light mode styles */
[data-bs-theme=light] {
  --menu-image: url("/images/icons/Hamburger-Meny-lightMode.webp");
  --cart-image: url("/images/icons/Varukorg-lightMode.webp");
  --search-image: url("/images/icons/Search-lightMode.webp");
}

.navbar-toggler {
  border: 0;
}

.navbar {
  padding-top: 0;
  padding-bottom: 0;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
  height: 100px;
  align-items: stretch;
  background-color: var(--bs-navbar-bg);
}

.nav-link {
  transition: 0.3s;
  font-size: 0.9rem;
  /*height: 100px;*/
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
  transition: 0.3s;
}

.max-width-container {
  display: flex;
  align-items: center;
  max-width: 66vw;
  margin: auto;
  width: 100%;
}

.dropdown-item:focus, .dropdown-item:hover {
  text-decoration: none;
}

/***********************************************/
.navbar-container {
  /*display: block;
  justify-content: center;
  align-items: center; */
}

body .container-fluid {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-left-container {
  display: block;
  justify-content: start;
  align-items: center;
  height: 100%;
  max-height: 100px;
  padding: 0;
  margin: 0;
}

.navbar-left-container a {
  height: 100%;
  max-height: 100px;
  display: flex;
  align-items: start;
  justify-content: center;
  transition: 0.3s;
  padding-bottom: 20px;
  padding: 0 10px;
}

.navbar-left-container, .cart-setting-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  min-height: 100%;
}

.cart-icon-container {
  /*height:100%;*/
}

.navbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  min-height: 100%;
}

.navbar-center img {
  width: 100%;
}

.search-ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  height: 100px;
  margin: 0 auto;
}

.search-form {
  display: flex;
  align-items: center;
}

.search-input-container {
  position: relative;
  width: 100%;
  min-width: 15rem;
  display: flex;
  align-items: center;
}

.custom-searchfield-navbar {
  flex-grow: 1;
  padding-right: 2rem; /* Leave space for the search button */
}

.search-button {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-icon {
  width: 1.2rem;
  height: 1.2rem;
}

input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
  appearance: searchfield-cancel-button;
}

.cart-setting-container {
  display: flex;
  justify-content: end;
  align-items: center;
  height: 100px;
  gap: 10px;
  /*width:100%;*/
}

.cart-count {
  position: absolute;
  top: 30px;
  right: 50%;
  /*background-color: #c9302c;*/
  background-color: var(--article-buy-button-bgColor);
  color: white;
  border-radius: 50%;
  padding: 5px 6px;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  min-width: 27px;
  height: 27px;
  text-align: center;
  line-height: 20px;
  box-shadow: 0 0 2px #000;
}

.cart-icon:hover,
.setting-tab:hover,
.hamburger-menu-navbar:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

/*Cart icon css END*/
/*Setting tab in navbar to right corner*/
.setting-tab {
  cursor: pointer;
  color: black;
  text-align: center;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.setting-tab.active:hover {
  transform: none;
  transition: none;
}

.setting-tab.active .bi-caret-down {
  display: none;
  color: white;
}

.setting-tab.active .bi-caret-up {
  display: inline-block;
}

.setting-tab:hover .bi-caret-down {
  display: inline-block;
}

.setting-tab.active:hover .bi-caret-down {
  display: none;
}

/*Cart icon css */
.cart-icon-container {
  display: flex;
  position: relative;
  /*width: 100px;*/
  height: 100%;
}

.cart-btn {
  background-color: transparent;
  border: 0;
  padding-right: 0px;
}

.material-symbols-outlined.cart-icon,
.gear i.bi-gear {
  font-size: 3rem;
  color: var(--bs-cartIcon-color);
  /*transition: color 0.3s ease, transform 0.3s ease;*/
}

.material-symbols-outlined.cart-icon:hover,
.gear i.bi-gear:hover {
  /*    color: var(--bs-cartGearIcon-HoverColor); 
      transform: scale(1.2); */
}

.gear {
  color: white;
  width: 100%;
  position: relative;
}

.gear i.bi-gear {
  bottom: 20%;
  left: 50%;
  /*transform: translateX(-50%);*/
  color: var(--bs-gearIcon-color);
}

.gear-icon-light-theme {
  color: black;
}

.gear i.bi-caret-down, .gear .bi-caret-up {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  display: none; /* Hide by default */
  color: var(--bs-gearIcon-color);
}

.dropdown-container {
  padding: 10px;
  background-color: var(--bs-navbar-bg);
  color: var(--article-dropdown-textColor);
}

.dropdown-container form {
  /*width:200px;*/
  margin: 0 auto;
}

.dropdown-container form select {
  color: var(--article-dropdown-textColor);
}

.my-container {
  width: 100%;
  padding: 15px;
  margin-right: auto;
  margin-left: 5px;
}

.my-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
  align-items: center;
}

.my-col-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.my-col {
  flex: 1 0 0%;
  max-width: 100%;
}

.my-img-fluid {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: block;
  max-width: 100%;
  height: auto;
}

.my-line-height {
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Ensures content aligns at the start */
}

.my-p-bold, .my-p {
  margin: 0; /* Removes default margin */
  padding: 0; /* Ensures there's no padding affecting alignment */
}

.my-p-bold {
  font-weight: bold;
  letter-spacing: 1.3px;
}

.setting-hr {
  margin: 0px;
  /*padding-bottom:10px;*/
}

.logout-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  margin: 0;
  width: 100%;
  cursor: pointer;
  background-color: var(--article-buy-button-bgColor);
  border: none;
  color: var(--bs-body-textColor);
}

.logout-form:hover,
.logout-form li:hover {
  background-color: var(--article-buy-button-hover) !important;
  transition: 0.2s ease-out;
}

.logout-form button {
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 1px;
  font-size: 1rem;
}

.logout-form button,
.logout-form i {
  color: var(--bs-body-textColor);
}

.tab-content {
  background: var(--bs-setting-tab-bg);
  color: var(--bs-setting-text-color);
  display: none;
  position: absolute;
  top: 105px;
  right: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  height: auto;
  width: 100%;
  min-width: 320px;
  border-radius: 5px;
}

.tab-content-light-theme {
  background-color: var(--bs-setting-tab-bg);
}

/* Style for the list */
.tab-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allow it to expand */
  background-color: var(--bs-navbar-bg);
}

.tab-content ul li {
  flex-grow: 1;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 50px;
  position: relative;
}

.tab-content ul li:last-child {
  margin-bottom: 5px;
}

.setting-ul li:hover {
  background-color: var(--setting-ul-hover-color);
  transition: 0.2s ease-out;
}

.tab-content ul li a {
  width: 100%;
}

.profile-btn-li {
  padding: 5px !important;
}

.profile-btn {
  padding: 0px;
  color: var(--bs-setting-text-color);
}

.profile-btn div {
  padding: 0px;
  margin: 0px;
}

.bi-moon,
.bi-globe {
  font-size: 16px;
}

.bi-person,
.bi-box-arrow-left {
  font-size: 20px;
}

/* Default state for the toggle switch (Light Mode - Off) */
.darkMode-switch {
  height: 22px;
  min-width: 36px;
  border: 1px solid #555555;
  background-color: var(--article-buy-button-bgColor);
  border: none;
}

/* Checked State for Dark Mode */
.darkMode-switch:checked {
  background-color: #555555;
  border-color: #333;
}

/*.darkMode-switch::before {
    background-image: none;*/ /* Remove the default image */
/*background-color: #fff;*/ /* Solid white knob */
/*width: 18px;
    height: 18px;
}*/
/* Toggle company logo based on darkMode theme
    primary logo as default = dark theme
    Logo in navbar
*/
.primary-logo,
.secondary-logo {
  height: 70px;
  width: 100%;
  display: block;
  object-fit: contain;
  margin: 0 auto;
}

.logo-navbar-container {
  text-decoration: none !important;
  height: 70px;
  width: 100%;
  max-width: 300px;
}

.no-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.no-logo-text {
  font-size: 1rem;
  font-weight: bold;
  color: white;
  text-align: center;
  margin: 0;
  padding: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Toggle logo based on darkMode theme END*/
/*Language toggle*/
.languageSwitch {
  position: relative;
  display: inline-block;
  margin: 0 0px;
}

.languageSwitch > span {
  position: absolute;
  top: 0;
  pointer-events: none;
  font-weight: bold;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  width: 50%;
  text-align: center;
}

input.check-toggle-round-flat:checked ~ .on {
  display: grid; /* Hide 'on' label when checked */
  opacity: 0;
  /*transition: color 0.2s, opacity 0.2s;*/
}

input.check-toggle-round-flat:checked ~ .off {
  display: block; /* Show 'off' label when checked */
  color: #fff;
  opacity: 1;
  /*    transition: color 0.2s, opacity 0.2s;*/
}

.languageSwitch > span.on {
  display: grid;
  place-items: center;
  top: 6px;
  left: 0px;
  color: #fff;
  /*transition: color 0.2s, opacity 0.2s;*/
}

.languageSwitch > span.off {
  display: grid;
  place-items: center;
  top: 6px;
  right: 0px;
  color: #fff;
  opacity: 0;
  /*transition: color 0.2s, opacity 0.2s;*/
}

.languageSwitch > span.on, .languageSwitch > span.off {
  /*transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;*/
}

.check-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

.check-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 2px;
  width: 60px;
  background-color: #555;
  border-radius: 60px;
  border: 1px solid rgba(116, 114, 114, 0.8);
}

input.check-toggle-round-flat + label {
  padding: 3px;
  width: 60px;
  height: 25px;
  background-color: var(--language-bsColor);
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  border: none;
}

input.check-toggle-round-flat + label:before,
input.check-toggle-round-flat + label:after {
  display: block;
  position: absolute;
  content: "";
}

input.check-toggle-round-flat + label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background-color: var(--language-bsColor);
  border-radius: 60px;
}

input.check-toggle-round-flat + label:after {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  width: 26px;
  background-color: var(--article-buy-button-bgColor);
  -webkit-border-radius: 52px;
  -moz-border-radius: 52px;
  border-radius: 52px;
  border: 1px solid;
  border-color: var(--language-bsBorder-color);
}

input.check-toggle-round-flat:checked + label:after {
  margin-left: 28px;
}

.languageSwitch > span.on, .languageSwitch > span.off, input.check-toggle-round-flat + label:after {
  transition: all 0.2s ease-in-out;
}

@media (max-width: 1920px) {
  .max-width-container {
    max-width: 73vw;
  }
}
@media (min-width: 1025px) {
  .mobileMenuIcons-Container {
    display: none;
  }
  .mobile-checkbox-container {
    display: none;
  }
}
@media (max-width: 1024px) {
  .custom-searchfield-container {
    display: none !important;
  }
  .desktop-checkbox-container {
    display: none;
  }
  .searchTabContent-Container {
    width: 100%;
    padding: 10px;
  }
  .searchTabContent-Container .card {
    border: none;
  }
  body .custom-searchfield-navbar {
    width: 300px;
  }
  .mobileMenuIcons-Container {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  .support-container-mobile {
    display: block;
    height: 40px;
    padding: 10px;
  }
  .mobileSettings-Container {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    padding: 10px;
  }
  .searchBtnMobileView,
  .settingMobileBtn,
  .support-container-mobile button {
    background-color: transparent;
    border: 0;
    padding: 0;
  }
  .settingMobileBtn .bi-gear,
  .searchBtnMobileView .bi-search {
    font-size: 20px;
    color: white;
  }
  .tab-content {
    display: block;
    margin: 0 auto;
    position: static;
    width: 95%;
  }
  .settingTabContent-Container {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    width: 100%;
    padding-right: 10px;
    position: absolute;
  }
  .settingTabContent-Container .card {
    border: 0;
    /*padding: 1rem;*/
    margin-top: 10px;
    /*background: #fff;*/ /* Add background color to differentiate content */
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
  }
  .company-dropdown-navbar {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .navbar {
    height: 100%;
  }
  .mobile-hide {
    display: none;
  }
  .max-width-container {
    max-width: 100%;
  }
  .navbar-toggler {
    padding: 20px;
  }
  .cart-icon-container {
    align-items: center;
    justify-content: center;
    padding: 15px;
  }
  .cart-icon {
    height: 40px;
  }
  .cart-btn {
    padding: 0;
    margin-left: 0px;
  }
  .cart-count {
    top: 35px;
    right: 55%;
    font-size: 12px;
    padding: 3px 4px;
    min-width: 20px;
    height: 20px;
    line-height: 15px;
  }
  /* .navbar-center {
    display: flex;
      align-items: center;
      height: 100%;*/
}
@media (max-width: 425px) {
  .settingTabContent-Container {
    display: block;
    justify-content: center;
    padding: 0px;
  }
}
/* Ensures input and icon are aligned in height */
.datepicker-inputGroup {
  margin-top: 10px;
}

.datepicker-inputGroup span {
  cursor: pointer;
  height: 48px;
}

.cartSaveOrder-right {
  height: 100%;
  max-height: 90vh;
  width: 300px;
  padding: 5px;
  overflow-y: auto;
}

.cart-form-container form {
  height: 89vh;
  display: flex;
  flex-direction: column;
}

.cart-form-container input,
.cart-form-container textarea,
.cart-form-container select {
  margin-bottom: 5px;
  height: 48px;
  color: var(--article-title-text-color);
}

.cart-form-container input:focus,
.cart-form-container textarea:focus,
.cart-form-container select:focus {
  background-color: var(--orderDetails-input-color);
  border: 1px solid gray !important;
  border-radius: 5px;
  outline: none;
  box-shadow: none;
}

.cart-form-container textarea {
  min-height: 100px;
  padding-right: 10px;
}

.input-group-text {
  border-left: 0;
  padding: 0 10px;
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 40px;
  border-radius: 0px 5px 5px 0px !important;
}

/* Customize the icon */
.clickable-icon i {
  font-size: 1.2rem;
  background-color: transparent;
}

/* Make the icon fully clickable */
.clickable-icon {
  cursor: pointer;
  background-color: transparent;
}

/* Asterisk styling for required fields */
.required-asterisk {
  /*color: #6b1919;*/
  font-size: 1rem;
  margin-left: 0px;
  /*vertical-align: super;*/
}

.placeorder-outer-container {
  display: flex;
  /*justify-content:space-between;*/
  height: 100%;
  /*width: 1700px;*/
  column-gap: 40px;
}

.saveOrder-left {
  width: 100%;
}

.saveOrder-right {
  justify-content: center;
  width: 68%;
}

.saveOrder-left h1 {
  font-weight: bold;
  font-size: 24px;
  opacity: 1;
}

.saveOrder-right h1 {
  font-size: 24px;
  font-weight: bold;
}

.cartSaveOrder-container-inner {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  padding: 15px;
}

.cartSaveOrder-container-inner img {
  background-color: black;
  width: 116px;
}

.cartSaveOrder-title p {
  font-size: 18px;
  font-weight: bold;
  opacity: 1;
  color: #E0E0E0;
}

.saveOrder-articleInfo p {
  color: #E3E3E3;
  font-weight: normal;
  opacity: 1;
  font-size: 18px;
}

.cartSaveOrder-img,
.cartSaveOrder-remove,
.cartSaveOrder-title,
.saveOrder-articleInfo,
.cartSaveOrder-quantity {
  height: 116px;
}

.cartSaveOrder-title {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  padding: 0 1rem;
}

.saveOrder-articleInfo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0 1rem;
  width: 100%;
  overflow-y: auto;
}

.saveOrder-articleInfo::-webkit-scrollbar {
  display: none;
}

.cartSaveOrder-quantity {
  display: flex;
  gap: 20px;
}

.quantity-control-cartSaveOrder {
  display: flex;
  width: 186px;
  height: 50px;
  background-color: #292929;
  border: 1px solid #474747;
  border-radius: 5px;
}

.quantity-input-cartSaveOrder {
  width: 100%;
  text-align: center;
  border: none;
  font-weight: bold;
  background: none;
  font-weight: bold;
  font-size: 16px;
  color: #EAEAEA;
}

/* To remove the increment and decrement buttons in WebKit browsers */
.quantity-input-cartSaveOrder::-webkit-outer-spin-button,
.quantity-input-cartSaveOrder::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.SaveOrderqty-increment-btn i,
.SaveOrderqty-decrement-btn i {
  color: lightgray;
  font-size: 18px;
  color: #575757;
}

.placeOrderBtn {
  border-radius: 5px;
  height: 63px;
  width: 100%;
  background: #90A19D 0% 0% no-repeat padding-box;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-top: 20px;
  border: 0px;
  color: var(--bs-body-textColor);
}

.placeOrderBtn:hover,
.btn-SaveOrderCart:hover {
  background-color: var(--article-buy-button-hover);
  transition: background-color 0.3s;
}

.btn-SaveOrderCart {
  width: 303px;
  height: 43px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #92A09D 0% 0% no-repeat padding-box;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1607843137);
  border-radius: 5px;
  opacity: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 1.4px;
}

.button-container-SaveOrderCart {
  margin-top: 20px;
}

.form-container {
  background: #323132 0% 0% no-repeat padding-box;
  padding: 30px;
}

.form-container input,
.form-container textarea {
  margin-bottom: 15px;
}

.form-container input {
  height: 59px;
  width: 100%;
}

.form-container textarea {
  min-height: 100px;
  width: 100%;
}

@media (max-width: 1920px) {
  .cartSaveOrder-right {
    max-height: 86vh;
  }
}
@media (max-width: 768px) {
  .cart-form-container {
    padding-bottom: 12rem;
  }
  .cartSaveOrder-right {
    max-height: 88vh;
    width: 100%;
  }
}
.header {
  margin-top: 30px;
}

.header h1 {
  margin-top: 10px;
}

h4 {
  padding-bottom: 10px;
}

.prettyprinted {
  margin-top: 5px;
  border-top: none !important;
  border-bottom: none !important;
  border-right: none !important;
  border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
  padding-left: 15px !important;
  word-wrap: break-word !important;
  overflow: default !important;
  text-overflow: default !important;
}

.tinted {
  background-color: #fff6b2;
}

.handle {
  cursor: grab;
}

code {
  color: #606;
}

.toc {
  background-color: rgba(255, 255, 255, 0.5);
  border: solid #444 1px;
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
  list-style: none;
}

.toc h5 {
  margin-top: 8px;
}

.list-group-item:hover {
  z-index: 0;
}

.input-section {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 20px;
}

.square-section {
  background-color: rgba(255, 255, 255, 0.5);
}

.square {
  width: 20vw;
  height: 20vw;
  background-color: #00a2ff;
  margin-top: 2vw;
  margin-left: 2vw;
  display: inline-block;
  position: relative;
}

.swap-threshold-indicator {
  background-color: #0079bf;
  height: 100%;
  display: inline-block;
}

.inverted-swap-threshold-indicator {
  background-color: #0079bf;
  height: 100%;
  position: absolute;
}

.indicator-left {
  left: 0;
  top: 0;
}

.indicator-right {
  right: 0;
  bottom: 0;
}

.num-indicator {
  position: absolute;
  font-size: 50px;
  width: 25px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.grid-square {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: #fff;
  border: solid 1px rgba(0, 0, 0, 0.2);
  padding: 10px;
  margin: 12px;
}

.frameworks {
  background-color: rgba(255, 255, 255, 0.5);
  border: solid rgba(0, 0, 0, 0.3) 1px;
  padding: 20px;
}

.frameworks h3 {
  margin-top: 5px;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 3.8px 0;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: rgba(48, 113, 169, 0);
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d;
  border: 1.3px solid rgba(0, 0, 0, 0.7);
  height: 16px;
  width: 16px;
  border-radius: 49px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -4px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgba(54, 126, 189, 0);
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: rgba(48, 113, 169, 0);
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d;
  border: 1.3px solid rgba(0, 0, 0, 0.7);
  height: 16px;
  width: 16px;
  border-radius: 49px;
  background: #ffffff;
  cursor: pointer;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: rgba(42, 100, 149, 0);
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-fill-upper {
  background: rgba(48, 113, 169, 0);
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d;
  border: 1.3px solid rgba(0, 0, 0, 0.7);
  height: 16px;
  width: 16px;
  border-radius: 49px;
  background: #ffffff;
  cursor: pointer;
  height: 8.4px;
}

input[type=range]:focus::-ms-fill-lower {
  background: rgba(48, 113, 169, 0);
}

input[type=range]:focus::-ms-fill-upper {
  background: rgba(54, 126, 189, 0);
}

.blue-background-class {
  background-color: #C8EBFB;
}

.col {
  padding-right: 0;
  margin-right: 15px;
}

.selected {
  background-color: #f9c7c8;
  border: solid red 1px !important;
  z-index: 1 !important;
}

.highlight {
  background-color: #B7F8C7;
}

.sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-top: 20px;
}

.sortable li {
  margin: 5px;
  padding: 5px;
  border: 1px solid #ccc;
  cursor: move;
}

.sortable ol {
  margin-top: 5px;
}

.ui-draggable-dragging {
  border: 1px solid #ccc;
}

.add-item-form {
  margin-top: 20px;
}

.add-item-form input, .add-item-form button {
  /*margin-right: 10px;*/
}

.available-item-container {
  border: 1px solid #ccc;
  margin: 5px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
}

/* .remove-item {
    background-color: #ff0000;
    color: #fff; 
    border: none;
    padding: 5px 10px;
    cursor: pointer;
} */
/* Toast Container Styles */
#toastContainer {
  position: fixed;
  bottom: 0;
  end: 0;
  z-index: 11;
  padding: 1rem;
}

/* Generic Toast Styles */
.toast {
  opacity: 1;
  background-color: #333;
}

.toast-header {
  background-color: #007bff;
  color: #ffffff;
}

.bg-success {
  background-color: #28a745;
  color: white;
}

.bg-danger {
  background-color: #dc3545;
  color: white;
}

.article-details-container {
  width: 90%;
  margin: 0 auto;
  margin-top: 10px;
  overflow-y: hidden;
}

.articleById-header-container {
  display: flex;
  flex-direction: column;
  flex-direction: column;
  margin: 0px;
  text-align: center;
}

.update-btn-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

.articleById-info-container {
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.articleById-info-container ul {
  margin: 0;
}

.articleById-info-container li {
  list-style-type: circle;
  margin-bottom: 5px;
  text-align: left;
}

.articleById-info-container label {
  font-weight: bold;
}

.update-btn {
  background-color: var(--article-buy-button-bgColor);
  border-radius: 5px;
  border: none;
  height: 45px;
  width: 400px;
}

.update-btn:hover {
  background-color: var(--article-buy-button-hover);
}

.links-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.articleContentContainer {
  overflow-y: auto;
  height: 100vh; /* Full viewport height */
  padding-bottom: 500px; /* Bottom padding */
  box-sizing: border-box; /* Include padding in height calculation */
}

.articleContentContainer::-webkit-scrollbar {
  display: none;
}

.navigation-links {
  /*display: flex;*/
  /*gap: 10px;*/
  padding: 0;
}

.btn-navigation:hover,
.btn-all-articles:hover {
  color: #666;
}

.upload-pdf-container {
  display: flex;
  flex-direction: row;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin: 0 auto;
  width: 100%;
  gap: 10px;
}

.upload-pdf-container .dropzone {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: start;
  min-height: 200px;
  max-height: 400px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  overflow-y: auto;
}

.lowPdfContainer {
  width: 100%;
}

.highPdfContainer {
  width: 0%;
}

.lowPdfPathDisplay,
.highPdfPathDisplay {
  color: #7F8E8B;
  font-weight: 600;
}

#dropzoneHighResPdf {
  display: none;
}

.remove-btn-container {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
  gap: 10px;
}

.remove-btn-container button {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.remove-btn-container button:hover {
  background-color: #c82333;
}

.images-drop-container {
  border: 1px solid #333;
  padding: 20px;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin: 0 auto;
}

.dropzone-inner-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
  margin: 0 auto;
}

.images-container {
  margin-bottom: 10px;
}

.dropzone {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  min-height: 200px;
  max-height: 400px;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  cursor: pointer;
  background-color: var(--dropzone-bgColor) !important;
  overflow-y: auto;
}

.dropzone:hover {
  background-color: var(--dropzone-hover-BgColor) !important;
  border-style: dashed;
  transition: background-color 0.3s ease, border-style 0.3s ease;
}

.dropzone::-webkit-scrollbar {
  display: none;
}

.medium-image, .small-image, .big-image {
  height: 100%;
}

.medium-image, .small-image {
  flex: 1 1 auto;
  max-width: calc(15% - 10px);
}

.big-image {
  max-width: calc(10% - 10px);
  margin-right: 10px;
}

/*.big-image-block .big-image {
    max-width: calc(50% - 10px);
}*/
.dropzone img {
  cursor: pointer !important;
}

.dropzone-block {
  display: flex;
  flex-direction: column;
}

.big-dropzone-block {
  grid-column: 1/-1;
  grid-row: 2;
  min-height: 200px;
}

.medium-dropzone-block,
.small-dropzone-block {
  grid-row: 1;
}

.category-info-container {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #333;
  max-height: 500px;
  overflow: auto;
}

.userGroup-label {
  font-weight: 600;
}

.article-categoryitem-names {
  display: flex;
  flex-direction: row;
  justify-content: start;
}

.article-categoryitem-names label {
  cursor: pointer;
}

.article-categoryitem-names input {
  margin-right: 0.5rem;
  cursor: pointer;
  background-color: var(--status-checkbox-bgColor);
}

.article-categoryitem-names input:hover {
  margin-right: 0.5rem;
  cursor: pointer;
  background-color: var(--status-checkbox-hoverColor);
}

.article-category-childlist {
  padding-left: 2rem;
}

.article-info-container {
  width: 100%;
  padding: 20px;
  border: 1px solid #333;
}

.article-info-container::-webkit-scrollbar {
  display: none;
}

.article-info-container .form-group {
  margin-bottom: 15px;
}

.article-info-container .form-group textarea {
  overflow-y: auto;
}

.article-info-container .form-group textarea::-webkit-scrollbar {
  display: none;
}

.article-info-container .form-group label {
  font-weight: bold;
  margin-bottom: 5px;
}

.description-container-articleById {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  height: 100%;
  max-height: 300px;
  min-height: 100px;
  margin-bottom: 20px;
  border-bottom: 1px solid #333;
}

.description-group {
  flex: 1; /* Take up 50% of the container */
  max-height: 100px; /* Ensure max height */
  overflow: auto; /* Add scroll if content overflows */
  height: 100%;
  max-height: 150px;
  overflow: hidden; /* Ensure content doesn't overflow */
}

.description-group label {
  margin-bottom: 5px;
}

.description-display {
  background-color: transparent; /* Remove background color */
  padding: 0.5rem; /* Remove padding */
  white-space: pre-wrap; /* Preserve whitespace and line breaks */
  font-size: 1rem; /* Ensure consistent font size */
  line-height: 1.3; /* Ensure consistent line height */
  max-height: 150px;
  min-height: 60px;
  overflow: auto; /* Add scroll if content overflows */
  border: 1px solid;
  border-color: var(--bs-border-color);
  border-radius: 4px;
}

.status-interval-note-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  height: 100%;
  min-height: 250px;
  border-bottom: 1px solid #333;
  margin-bottom: 60px;
  gap: 20px;
}

.status-interval-container {
  width: 100%;
}

.status_group_container .form-group {
  display: flex;
}

.status_group_container .form-group select,
.status_group_container .form-group input {
  width: 11rem;
}

.article_value_container .form-group input,
.article_value_container .form-group select,
.balance-container .form-group input,
.limitWarning-container .form-group input {
  width: 130px;
}

.status_group_container .form-group select,
.status_group_container .form-group input,
.article_value_container .form-group input,
.article_value_container .form-group select,
.balance-container .form-group input,
.limitWarning-container .form-group input {
  margin: 0;
  border-color: var(--bs-border-color);
}

.supplierName-container {
  max-width: 25rem;
}

.article_value_container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.article_value_container .form-group {
  margin-right: 10px;
}

.limitWarning-container,
.balance-container {
  width: 100%;
}

.limitWarning-container .form-group,
.balance-container .form-group,
.supplierName-container .form-group {
  display: flex;
  flex-direction: row;
}

.limitWarning-container .form-group label,
.balance-container .form-group label,
.interval-label,
.status_group_container .form-group label,
.article-tags-container label,
.supplierName-container label {
  font-weight: bold;
  min-width: 10rem;
  align-content: center;
}

.article-note-container {
  width: 100%;
  max-width: 800px;
}

.article-note-container textarea {
  height: 100%;
  max-height: 200px;
  min-height: 150px;
  border: 1px solid #666;
}

.article-note-container .form-control {
  box-shadow: none;
}

.article-note-container::-webkit-scrollbar {
  display: none;
}

.article-tags-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 10px;
  max-width: 60rem;
}

.article-tags-input {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  row-gap: 0px;
  width: 100%;
  border-radius: 5px;
}

.article-tags-input .form-group {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.tag-btn-container {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

@media (max-width: 1920px) {
  .articleContentContainer {
    height: 55vh;
    padding-bottom: 50px;
  }
}
@media (max-width: 1024px) {
  .articleContentContainer {
    max-height: 64vh;
  }
}
@media (max-width: 768px) {
  .articleContentContainer {
    max-height: 57vh;
  }
}
.spin-animation {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.pagination-container a.active {
  font-weight: bold;
  background-color: #007bff;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
}

/* The overlay that covers the entire page */
#overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  backdrop-filter: blur(5px); /* Adds a blur effect to the background */
  z-index: 9998;
  transition: opacity 0.3s ease-in-out; /* Smooth transition for fade effect */
  opacity: 0; /* Initially invisible */
}

/* The loading spinner that is centered in the page */
#loadingSpinner {
  display: none; /* Initially hidden */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

/* When the overlay is visible */
#overlay.visible {
  display: block;
  opacity: 1;
}

.scrollToTopBtnAllArticle {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: transparent;
  color: var(--scrollToTopBtn-color);
  cursor: pointer;
  font-size: 50px;
  display: none;
  opacity: 0.4;
  transition: opacity 0.7s, visibility 3.2s;
}

.scrollToTopBtnAllArticle:hover {
  opacity: 1;
}

.popover {
  display: none; /* Initially hide the popover */
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  background-color: var(--bg-color-popover);
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  overflow: hidden;
}

.popover.show {
  display: block;
  opacity: 1;
}

/* Popover header */
.popover-header {
  background-color: var(--header-color-popover);
  color: white;
  padding: 8px 14px; /* Padding around the text */
  font-size: 16px; /* Larger font size */
  border-radius: 0px;
}

/* Popover body */
.popover-body {
  padding: 15px;
  color: black;
  font-size: 14px;
}

/* Popover arrow */
.popover .arrow::before {
  border-right-color: #ddd;
}

.popover .arrow::after {
  border-right-color: #f5f5f5;
}

.allArticle-container {
  margin: 0 auto;
  margin-top: 10px;
}

.filter-options-container {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border-bottom: 1px solid #ffffff;
  padding-bottom: 10px;
}

.filter-options {
  width: 100%;
}

.allArticle-filter-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.filter-input-container {
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
  width: 100%;
}

.filter-input-container .form-select,
.filter-input-container .form-control {
  /*width: calc(25% - 10px);*/
  min-width: 200px;
  /*padding: 0.375rem 0.75rem;*/
}

.filter-button {
  width: 100%;
  background-color: var(--article-buy-button-bgColor);
  /*background-color: #000000;*/
  /*height: 40px;*/
  padding: 10px;
  border-radius: 5px;
  border: 0;
}

.filter-button:hover,
.updateStatusBtn:hover {
  background-color: var(--article-buy-button-hover);
  /*background-color: #90A19D;*/
  transition: 0.3s ease-in-out;
}

/*.filter-tooltip {
    display: none;
    position: absolute;
    background-color: black;
    color: white;
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    margin-top: 5px;
    z-index:999;
}*/
.filter-middle-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  /*height: 100px;*/
  /*gap: 7px;*/
  margin-left: 10px;
  /*padding-top:5px;*/
}

.filter-middle-container h3 {
  font-size: 1rem;
}

/* 🔹 Style the refresh button */
.refresh-articles-btn {
  white-space: nowrap; /* Prevents wrapping */
  transition: all 0.3s ease-in-out; /* Smooth transition for all properties */
  cursor: pointer; /* Make it clear it's clickable */
}

/* 🔹 Hover Effect */
.refresh-articles-btn:hover {
  /*color: var(--article-buy-button-bgColor);*/
  transform: scale(1.1); /* Slightly increase size & rotate */
  text-shadow: 0 0 8px rgba(173, 255, 47, 0.8); /* Add a glowing effect */
}

.refresh-articles-btn i {
  color: var(--article-buy-button-bgColor);
}

.allArticle-update-container {
  width: 150px;
}

.updateStatus-div {
  height: 100%;
  width: 150px;
}

.updateStatusBtn {
  background-color: var(--article-buy-button-bgColor);
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: none;
  margin-top: 5px;
}

.table-container {
  position: relative;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  /*padding-bottom:50px;*/
}

.table-container::-webkit-scrollbar {
  display: none;
}

.table-container th,
.table-container a {
  color: var(--article-title-text-color);
  text-decoration: none;
}

.table-container a:hover,
.table-container th:hover {
  color: var(--article-buy-button-hover);
  text-decoration: none;
  cursor: pointer;
}

.table-container th:hover {
  cursor: default;
}

.selectAll-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.selectAll {
  margin-right: 8px;
}

.checkbox-header, .article-checkbox {
  text-align: center;
  vertical-align: middle;
  width: 50px; /* Adjust this width if needed */
}

#selectAll, .article-checkbox input[type=checkbox] {
  margin: 0 auto;
  display: block;
  background-color: var(--status-checkbox-bgColor);
}

.article-checkbox input[type=checkbox]:hover,
#selectAll:hover {
  background-color: var(--status-checkbox-hoverColor);
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 40px;
}

.table-hover tbody tr:hover {
  background-color: #f5f5f5; /* Adjust hover background color as needed */
}

.table-container table {
  cursor: pointer;
}

.allArticle-body img {
  width: 3rem;
  height: 3rem;
}

.allArticle-body select {
  width: 120px;
}

body .status-active {
  color: #2e8b57; /* SeaGreen */
}

body .status-inactive {
  color: #d9534f; /* Salmon Red */
}

body .status-hidden {
  color: #6c757d; /* SlateGray */
}

body .status-discarded {
  color: #f0ad4e;
}

body .status-not-available {
  color: #d9534f;
}

.article-checkbox {
  cursor: default;
}

@media (max-width: 1920px) {
  .table-container {
    max-height: 60vh;
  }
}
@media (max-width: 768px) { /* Adjust breakpoint as needed */
  .filter-options-container {
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center-align children */
  }
  .allArticle-update-container {
    width: 100%; /* Full width for small screens */
  }
  .filter-middle-container {
    display: none; /* Optionally hide or adjust this container for small screens */
  }
  .updateStatus-div {
    width: auto; /* Allow the div to fit its content */
  }
  .allArticle-filter-form {
    flex-direction: column;
    align-items: start;
  }
  .filter-button, .updateStatusBtn {
    width: auto; /* Let the buttons width be content-based */
    margin-top: 10px; /* Provide some space above the button */
  }
}
.viewPdf-btn {
  margin: 20px;
  text-align: center;
}

.pdfModalCustom {
  background-color: rgba(0, 0, 0, 0.5);
  /*width:1200px!important;*/
}

.pdf-modal-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 55rem;
  width: 100vw;
  height: 100vh;
  margin: auto;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (max-width: 1920px) {
  .pdf-modal-dialog {
    max-width: 40%;
    padding-top: 45px;
    padding-bottom: 45px;
  }
}
@media (max-width: 1024px) {
  .pdf-modal-dialog {
    max-width: 90%;
  }
}
.pdf-modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.pdf-modal-body {
  overflow-y: hidden;
}

#div-container {
  display: flex;
  width: 100%;
  height: 100%;
  /*margin: 0px;*/
  overflow: hidden;
  position: relative;
  background-color: transparent;
}

#the-canvas {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: 0px;
}

.modal::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
#div-container::-webkit-scrollbar {
  display: none;
}

#copy-confirmation {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(214, 213, 213);
  padding: 5px;
  border-radius: 5px;
  z-index: 9999;
}

.pdf-modal-footer {
  text-align: center;
}

/* NavBar */
.pdf-navbar {
  background-color: #f7f7f7;
  border: 1px solid gray;
  border-radius: 5px;
  width: 100%;
  height: 55px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pdf-navbar span {
  margin: 0 5px;
}

.pdf-btn {
  border: none;
  background: none;
  color: #888888;
}

.pdf-btn i:hover {
  color: #36accf;
  cursor: pointer;
  font-size: 1.3rem;
}

.pdf-btn i {
  font-size: 1.2rem;
}

.pdf-btnoff {
  border: none;
  background: none;
  color: #cdcece;
}

.text-icon-color {
  width: 8rem;
  color: #888888;
  padding: 10px 12px;
  background-color: #efefef;
}

.pdf-page-input {
  width: 50px;
  height: 30px;
  text-align: center;
  border: none;
  border-radius: 5px;
  background-color: #313233;
  outline: none;
}

/* Change border color on focus */
.pdf-page-input:focus {
  border: none !important; /* Change this to the desired color */
  outline: none; /* Remove the default outline */
  background-color: #494a4d;
}

/* Hide the up and down arrows in number inputs for Webkit browsers (Chrome, Safari, Edge) */
.pdf-page-input::-webkit-outer-spin-button,
.pdf-page-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide the up and down arrows in number inputs for Firefox */
.pdf-page-input[type=number] {
  -moz-appearance: textfield;
}

@media (max-width: 425px) {
  .pdf-page-input {
    width: 55%;
    height: 28px;
  }
  .text-icon-color {
    padding: 2px;
  }
}
#link-textarea:focus {
  outline: none;
}

.newPassword-outer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo-SetPassword {
  /*border: 1px solid red;*/
  margin-bottom: 0px;
}

.setNewPass-container {
  height: auto;
  width: 39vw;
  margin: 0px auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
}

.setNewPass-container h2 {
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 1.8px;
  margin-bottom: 20px;
}

.setNewPass-container .form-floating {
  margin-top: 0px;
  width: 100%;
  min-width: 350px;
}

.setNewPass-container .form-floating input {
  width: 100%;
  height: 47px;
  background-color: var(--form-input-bgColor);
  border: 1px solid var(--form-input-bgColor);
  border-radius: 16px;
  opacity: 1;
  letter-spacing: 0px;
  font-size: 1rem;
  color: var(--bs-body-textColor);
  padding-left: 2.5rem; /* make room for icon if used inside */
}

.setNewPass-container .form-floating input:focus {
  background-color: var(--form-input-bgColor);
  color: #fff;
}

.setNewPass-container .form-floating label:after {
  background-color: transparent !important;
}

.setNewPass-container button {
  width: 100%;
  background-color: var(--article-buy-button-bgColor);
  border: none;
}

.setNewPass-container button:hover {
  background-color: var(--article-buy-button-hover);
}

/* Button styling remains the same */
.newPassword-btn,
.login-confirmation-btn {
  border-radius: 5px;
  height: 63px;
  width: 100%;
  background: #87A3C5;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-top: 20px;
  border: 0px;
}

.newPassword-btn:hover,
.login-confirmation-btn:hover {
  background-color: #6E89A7;
  transition: background-color 0.3s;
}

.confirmation-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90vh;
}

.confirmation-container h1 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 1.8px;
  margin-bottom: 20px;
}

.confirmation-inner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  width: 579px;
  margin: 0px auto;
  padding: 20px;
  background-color: transparent;
}

.confirmation-info-container {
  text-align: center;
}

.reset-password-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90vh;
  max-width: 50vw;
  margin: auto;
}

.reset-password-container .text-danger {
  color: #ff2121 !important;
}

.reset-password-container h1 {
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 1.8px;
  margin-bottom: 10px;
}

.reset-password-container input {
  width: 100%;
  min-width: 300px;
  min-height: 2rem !important;
  background-color: var(--form-input-bgColor);
  border: 1px solid var(--form-input-bgColor);
  border-radius: 16px;
  opacity: 1;
  letter-spacing: 0px;
  font-size: 16px;
  color: #D6D6D6;
}

.reset-password-container label:active,
.reset-password-container input:focus {
  background-color: var(--form-input-bgColor);
}

.reset-password-container button {
  border-radius: 5px;
  height: 63px;
  width: 100%;
  min-width: 300px;
  background: #87A3C5;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-top: 20px;
  border: 0px;
}

.reset-password-container button:hover {
  background-color: #6E89A7;
  transition: background-color 0.3s;
}

@media (max-width: 768px) {
  .setNewPass-container {
    width: 100% !important;
  }
  .setNewPass-container .form-floating input {
    font-size: 1rem;
  }
}
.forgot-pass-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow-y: auto;
}

.forgot-pass-innerContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 348px;
  background-color: transparent;
  margin-bottom: 1rem;
}

.forgot-pass-innerContainer .form-floating input {
  width: 100%;
  min-height: 47px;
  height: 47px;
  background-color: #4B7390;
  border: 1px solid #4B7390;
  border-radius: 16px;
  opacity: 1;
  letter-spacing: 0px;
  font-size: 16px;
  color: #D6D6D6;
  text-align: left;
  padding: 0 12px !important; /* Add padding for horizontal spacing */
}

.forgot-pass-input-container {
  width: 100%;
}

.forgot-pass-innerContainer h1,
.forgot-pass-innerContainer h2 {
  text-align: left;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 1.8px;
  margin-bottom: 20px;
  color: var(--login-logout-text-color);
}

.forgot-pass-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mh-logo-passForget {
  /*max-width: 300px;*/
  margin-bottom: 28px;
}

.mh-logo-text-forgotPass {
  width: 100%;
  height: 53px;
}

.forgot-pass-btn {
  border-radius: 5px;
  height: 63px;
  width: 100%;
  background: #87A3C5;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-top: 20px;
  border: 0px;
}

.forgot-pass-btn:hover {
  background-color: #6E89A7;
  transition: background-color 0.3s;
}

.backToLoginLink-Container {
  margin-top: 10px;
}

.backToLogin-link {
  color: #E7E7E7;
  text-decoration: underline;
  letter-spacing: 0;
  font-size: 14px;
  transition: color 0.3s;
}

.backToLogin-link:hover {
  color: #6E89A7;
  text-decoration: none;
}

.forgot-pass-confirmation-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  padding: 20px; /* Add some padding for smaller screens */
}

.forgot-pass-confirmation-container h1 {
  font-size: 2rem;
}

.mh-logo-resetPassword {
  width: 100%;
  max-width: 320px;
  margin-bottom: 28px;
}

.invalid-token-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  padding: 20px; /* Add some padding for smaller screens */
}

.invalid-token-container p {
  margin: 0;
}

.resetNewLink {
  margin-top: 20px;
  display: inline-block;
}

.resetNewLink:hover {
  color: #6E89A7;
  text-decoration: none;
}

/* Media Queries */
@media (max-width: 768px) {
  .forgot-pass-innerContainer h1, h2 {
    font-size: 1rem;
  }
}
/* Tablets and larger */
/*@media (min-width: 600px) {
    .forgot-pass-innerContainer {
        padding: 40px;
    }

    .forgot-pass-btn {
        font-size: 20px;
    }
}*/
/* Small desktops and larger */
/*@media (min-width: 768px) {
    .forgot-pass-innerContainer {
        padding: 50px;
    }

    .forgot-pass-btn {
        font-size: 22px;
    }
}*/
/* Medium desktops and larger */
/*@media (min-width: 992px) {
    .forgot-pass-innerContainer {
        padding: 60px;
    }

    .forgot-pass-btn {
        font-size: 24px;
    }
}*/
/* Large desktops and larger */
/*@media (min-width: 1200px) {
    .forgot-pass-innerContainer {
        padding: 70px;
    }

    .forgot-pass-btn {
        font-size: 26px;
    }
}*/
/* Extra large desktops */
/*@media (min-width: 1400px) {
    .forgot-pass-innerContainer {
        padding: 80px;
    }

    .forgot-pass-btn {
        font-size: 28px;
    }
}*/
.orderConfirmedContainer {
  margin-top: 50px;
}

.OrderConfirmBtnBack {
  padding: 10px;
  border-radius: 5px;
  opacity: 1;
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
  background-color: var(--article-buy-button-bgColor);
  border: 1px solid #333;
  text-decoration: none;
}

.OrderConfirmBtnBack:hover {
  background-color: #90A19D;
  color: #ffffff;
  transition: 0.3s;
}

.orderConfirmedContainer .card-footer {
  height: 70px;
  padding: 20px;
}

.companySettings-container {
  /*border:1px solid #ccc;*/
  height: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding-bottom: 1rem;
}

.companySettings-container::-webkit-scrollbar {
  display: none;
}

.companyName-container input {
  width: 16rem;
  max-width: 100%;
}

/*
.uploadLogo-container{
    background-color: var(--bs-navbar-bg);
    padding: 20px;
    margin-top:10px;
}*/
.company-image {
  max-height: 50px; /* Adjust height as needed */
  width: auto; /* This will maintain the aspect ratio */
}

.uploadMessageContainer {
  max-width: 400px;
  margin: auto;
  text-align: center;
}

.uploadImageContainer {
  padding: 20px;
  border: 2px dashed #ccc;
  border-radius: 10px;
  /*background-color: #f9f9f9;*/
  margin: 20px;
  text-align: center;
}

.inputRow {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.uploadArea {
  position: relative;
  width: 45%;
  padding: 20px;
  border: 2px dashed #ccc;
  border-radius: 10px;
  /*background-color: #888;*/
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.uploadArea:hover {
  background-color: var(--article-buy-button-hover);
  border-color: #bbb;
  color: #000000;
}

.uploadArea.dragover {
  background-color: #e0e0e0;
  border-color: #aaa;
}

.uploadArea p {
  margin: 0;
  font-size: 14px;
}

.noImageText {
  font-size: 0.9rem;
  color: #777;
  margin-top: 10px;
  font-style: italic;
}

.uploadInput {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.imagePreviewWrapper {
  position: relative;
  display: inline-block;
  margin-top: 10px;
}

.imagePreviewWrapper img.imagePreview {
  max-width: 150px;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.imagePreviewWrapper .delete-logo-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #dc3545;
  border: none;
  color: white;
  font-size: 16px;
  font-weight: bold;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  padding: 0;
}

.imagePreview {
  display: none;
  width: 100%;
  max-width: 9rem;
  /*max-height: auto;*/
  margin: auto;
  margin-top: 10px;
  padding: 20px;
  border-radius: 10px;
  background-color: #bbb;
}

.uploadInput {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.uploadImageBtn,
.companyName-container button {
  padding: 10px 20px;
  background-color: var(--article-buy-button-bgColor);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  text-transform: uppercase;
}

.uploadImageBtn:hover,
.companyName-container button:hover {
  background-color: var(--article-buy-button-hover);
  color: var(--bs-body-textColor);
}

.notifiactionRecipients-container,
.dropdownVisibility-container,
.referenceInput-container,
.uploadLogo-container,
.companyName-container {
  margin-top: 1rem;
  padding: 20px;
  background-color: var(--bs-navbar-bg);
}

.saveRecipient-container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
  gap: 10px;
  margin-bottom: 10px;
}

.saveRecipientInput-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 10px;
  margin-bottom: 10px;
}

.saveRecipientInput-container .form-select {
  margin: 0;
  width: 10rem;
}

.saveRecipientInput-container label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.saveRecipientInput-container input {
  width: 100%;
  min-width: 20rem;
  padding: 8px;
  box-sizing: border-box;
}

.saveRecipient-btn {
  width: 30rem;
  padding: 10px;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  text-transform: uppercase;
}

.saveRecipient-btn {
  background-color: var(--article-buy-button-bgColor);
}

.saveRecipient-btn:hover {
  background-color: var(--article-buy-button-hover);
}

.recipients-tbody-container {
  overflow-y: auto;
  max-height: 23rem;
  padding-bottom: 20px;
}

.recipients-tbody-container tbody {
  /*max-height:500px;*/
}

.actionBtn-container {
  display: flex;
  justify-content: space-around;
}

.actionBtn-container .bi-floppy {
  color: green;
}

.actionBtn-container .bi-floppy:hover {
  color: lightgreen;
}

.actionBtn-container .bi-trash3 {
  color: red;
}

.actionBtn-container .bi-trash3:hover {
  color: lightcoral;
}

.extraCompanySettings-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 1rem;
  background-color: var(--bs-navbar-bg);
}

.dropdownSettings {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.titleButton-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.dropdownBtn {
  padding: 10px;
  background-color: var(--article-buy-button-bgColor);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  text-transform: uppercase;
  width: 100%;
  min-width: 20rem;
}

.dropdownBtn:hover {
  background-color: var(--article-buy-button-hover);
}

.referenceInputSettings {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Responsive Layout */
@media (min-width: 768px) {
  .primaryImageContainer,
  .secondaryImageContainer {
    flex-basis: calc(50% - 10px); /* Each container takes 50% of the width with some spacing */
  }
}
.tbody-container-adminView {
  height: 100%;
  overflow-y: auto;
  max-height: 69vh;
  /*padding-bottom: 40px;*/
}

@media (max-width: 1920px) {
  .tbody-container-adminView {
    max-height: 62vh;
  }
}
.tbody-container-adminView::-webkit-scrollbar {
  display: none;
}

.userContentAdminView-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  height: 100%;
  column-gap: 15px;
}

/* Set fixed table layout for consistent column widths */
.table-userAdminView {
  position: relative;
}

.searchOptionsUsersTable {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 5px;
}

.searchOptionsUsersTable .search-icon {
  position: absolute;
  left: 12px;
  color: #888;
  pointer-events: none;
  z-index: 2;
}

.searchOptionsUsersTable .clear-icon {
  position: relative;
  right: 30px;
  color: #888;
  cursor: pointer;
  z-index: 2;
}

.searchOptionsUsersTable input {
  width: 20rem;
  padding-left: 2.2rem;
  padding-right: 2.2rem;
}

.userProfile-table {
  width: 100%;
  table-layout: fixed; /* Ensures consistent column widths */
  border-collapse: separate;
  border-spacing: 0 5px;
}

.userProfile-table th:nth-child(1),
.userProfile-table td:nth-child(1) {
  width: 5%;
  text-align: center;
}

.userProfile-table th:nth-child(2),
.userProfile-table td:nth-child(2) {
  width: 5%;
}

.userProfile-table th:nth-child(3),
.userProfile-table td:nth-child(3) {
  width: 15%;
}

.userProfile-table th:nth-child(4),
.userProfile-table td:nth-child(4) {
  width: 20%;
}

.userProfile-table th:nth-child(5),
.userProfile-table td:nth-child(5) {
  width: 10%;
}

.userProfile-table th:nth-child(6),
.userProfile-table td:nth-child(6) {
  width: 8%;
  text-align: center;
}

.userProfile-table td, .userProfile-table th {
  white-space: nowrap; /* Prevent text wrapping */
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Scrollable container for the tbody */
.tbody-container-adminView {
  overflow-y: auto;
}

/* Hide scrollbar for WebKit browsers */
.tbody-container-adminView::-webkit-scrollbar {
  display: none;
}

/* Hide expandable rows by default */
.hidden {
  display: none;
}

.visible {
  display: table-row;
}

/* Cursor pointer for expandable rows */
.expandable-row {
  cursor: pointer;
}

.removeUserAccount-btn i {
  color: #e57373; /* Softer red color */
  transition: color 0.3s ease; /* Smooth transition */
}

.removeUserAccount-btn i:hover {
  color: #d32f2f; /* Slightly darker red on hover */
  cursor: pointer; /* Pointer cursor to indicate interactivity */
}

.userContentAdminView-container::-webkit-scrollbar {
  display: none;
}

.user-profile-adminView,
.rightCol-userAdminView {
  flex: 1; /* Allows each child to take equal width and adjust height as needed */
  display: flex;
  flex-direction: column; /* Organizes content within each column vertically */
  width: 100%;
}

.user-profile-adminView input,
.form-group select {
  margin-bottom: 10px;
  margin-left: 10px;
  width: calc(100% - 20px);
}

.userUpdateAdminBtn-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  margin-top: 10px;
  height: 100%;
}

.userUpdateAdminBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #87A3C5;
  border-radius: 5px;
  border: 1px;
  height: 45px;
  width: 100%;
  max-width: 100%;
  opacity: 1;
  margin: 0 auto;
  letter-spacing: 0px;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.rightCol-userAdminView {
  gap: 15px;
}

.rightColHeader-adminvView {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.header-title h3,
.header-info p {
  margin: 0;
  padding: 0;
}

.header-info {
  text-align: right;
}

body .header-info p {
  font-size: 1rem;
}

.passWordAdminView-container {
  height: 100%;
}

.sendActivateLink,
.userUpdateAdminBtn,
.newUserAdminView-Btn,
.submitNewUser-btn {
  background-color: var(--article-buy-button-bgColor);
  color: var(--bs-body-textColor);
}

.sendActivateLink:hover,
.userUpdateAdminBtn:hover,
.newUserAdminView-Btn:hover,
.submitNewUser-btn:hover {
  background-color: var(--article-buy-button-hover);
  color: var(--bs-body-textColor);
}

.sendActivateLink {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px;
  height: 45px;
  width: 100%;
  max-width: 100%;
  opacity: 1;
  margin: 0 auto;
  letter-spacing: 0px;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.user-profile-adminView,
.roleContainer,
.userCompanyInfo-Container,
.passWordAdminView-container,
.adminUserGroupContainer {
  background-color: var(--userProfile-adminview-bg);
  border-radius: 5px;
  padding: 10px;
  width: 100%;
  text-align: left;
}

.userCompanyInfo-Container p {
  font-size: 14px;
}

.userCompanyInfo-Container .form-group {
  margin-bottom: 10px;
}

.userCompanyInfo-Container .form-group input,
.userCompanyInfo-Container .form-group select {
  width: 100%;
  margin-left: 0px;
}

.roleGroup-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  column-gap: 15px;
}

.roleContainer ul {
  list-style-type: none;
  padding: 0px;
}

.roleContainer input {
  margin-right: 10px;
}

/* CSS classes for AccountStatus colors */
body .AccountStatus-active {
  color: #2e8b57;
  font-weight: bold; /* Optional for better visibility */
}

body .AccountStatus-inactive {
  color: #d9534f;
  font-weight: bold; /* Optional for better visibility */
}

/* Change background color for radio input */
.styled-radiobtn {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--article-buy-button-bgColor); /* Border color */
  border-radius: 50%;
  outline: none;
  background-color: var(--bs-body-bg); /* Default background */
  transition: background-color 0.3s, border-color 0.3s;
  cursor: pointer;
}

/* When selected */
.styled-radiobtn:checked,
.user-group-info input:checked,
.createUserRole-container input:checked {
  background-color: var(--article-buy-button-bgColor); /* Selected background color */
  border: 2px solid var(--article-buy-button-bgColor);
}

/* Hover effect */
.styled-radiobtn:hover,
.user-group-info input:hover,
.createUserRole-container input:hover {
  background-color: var(--status-checkbox-hoverColor); /* Light gray hover effect */
  border-color: var(--status-checkbox-hoverColor); /* Darker border on hover */
}

body.body-BG {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("/images/Bakgrund_start_Mediahandler.webp");
  background-size: cover;
  background-position: center;
}

.body-BG .max-width-container {
  display: none;
}

.scrollToTopBtn {
  position: fixed;
  bottom: 10px;
  right: 25px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: transparent;
  color: var(--scrollToTopBtn-color);
  cursor: pointer;
  /*padding: 15px;*/
  /*border-radius: 10px;*/
  font-size: 50px;
  display: none;
  opacity: 0.4;
  transition: opacity 0.7s, visibility 3.2s;
}

.scrollToTopBtn:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .scrollToTopBtn {
    right: 10px;
  }
}
body .floating-btn-container {
  position: fixed;
  bottom: 20px;
  left: 40px;
  transition: left 0.3s ease-in-out;
  z-index: 99;
  /*opacity:50%;*/
}

body .floating-btn-container:hover {
  /*left: 20px;*/
}

body .floating-contact-btn {
  text-decoration: none;
  width: 80px;
  height: 80px;
  background: var(--article-buy-button-bgColor);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  font-size: 40px;
  transition: background 0.25s;
  border: none;
  outline: none;
  cursor: pointer;
}

body .floating-contact-btn:hover {
  /*background: #5a6268;*/
  background: var(--article-buy-button-hover);
}

.floating-contact-btn:hover {
  background: #007d65;
}

.contact-support-offcanvas {
  background: var(--support-bg-color);
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  padding: 20px;
  width: 500px !important;
}

.contact-support-offcanvas.show {
  /*transform: translateX(0);*/
}

/*.contact-support-offcanvas .btn-close {
    filter: var(--btnClose-customColor);
}*/
.support-form {
  width: 100%;
}

.support-form label,
.contact-support-offcanvas h5 {
  color: var(--article-default-text-color);
}

.support-form label {
  display: block;
  margin-bottom: 5px;
}

.support-form input,
.support-form textarea,
.support-form select {
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
  border: none;
  border: 1px solid var(--support-border-color);
  border-radius: 0px;
  background-color: var(--support-bg-color);
}

.support-form textarea {
  min-height: 150px;
}

/* Specific to the textarea within the contact-support-offcanvas when focused */
.contact-support-offcanvas textarea:focus,
.contact-support-offcanvas input:focus {
  border: 1px solid gray !important;
  border-radius: 0px;
  outline: none;
}

.support-form textarea::-webkit-scrollbar {
  display: none;
}

.support-form button {
  background-color: var(--article-buy-button-bgColor);
  color: white;
  border: none;
  padding: 10px;
  border-radius: 3px;
  cursor: pointer;
  width: 100%;
}

body .support-form button:hover {
  background-color: var(--article-buy-button-hover);
}

/* Responsive styles */
@media (max-width: 1024px) {
  body .floating-btn-container {
    /*left: -55px;*/ /* Adjust position for smaller screens */
    display: none;
  }
}
.toast-container {
  z-index: 1050;
  position: fixed;
  bottom: 0px;
  padding: 4px;
  text-decoration: none;
  z-index: 999999;
  max-width: 300px;
  right: 0px;
}

.toast {
  min-width: 250px;
  /*height: 100px;*/
  border-radius: 5px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
}

.toast-body {
  text-align: center;
}

.toast.text-bg-success {
  background-color: #28a745 !important;
  color: #fff !important;
}

.toast.text-bg-danger {
  background-color: #dc3545 !important;
  color: #fff !important;
}

.toast button.btn-close {
  background-color: transparent;
  border: none;
  color: #000;
  cursor: pointer;
}

.toast-container-addToCart {
  position: fixed;
  right: 20px;
  bottom: 10px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding: 0;
}

.toast-message {
  display: none;
  background-color: var(--toast-bgColor-success);
  color: white;
  padding: 15px 20px;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: auto;
  max-width: 300px;
  min-width: 150px;
  text-align: left;
  font-size: 14px;
  line-height: 1.4;
  border-left: 8px solid #1e7e34;
}

/* Improved animation for appearing and disappearing */
.toast-message {
  /*animation: slideIn 0.5s ease-out, fadeOut 0.5s ease-in 2s forwards;*/
  animation: slideIn 0.5s ease-out;
}

/* Additional class for error messages */
.toast-message.error {
  background-color: var(--toast-bgColor-error);
  border-left: 8px solid #a71d2a; /* Darker shade for border */
}

.cookie-consent-container {
  z-index: 9999999;
  position: absolute;
  width: 400px;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #87A3C5;
  opacity: 80%;
  padding: 20px 30px 20px 30px;
  box-shadow: 0px 3px 10px 5px rgba(0, 0, 0, 0.4);
  text-align: center;
  border-radius: 30px 30px 0 0;
  color: black;
}

.cookie-consent-container button {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: none;
  background-color: green;
  padding: 10px 50px;
  margin-top: -5px;
  color: white;
  transition: all ease 0.5s;
}

.cookie-consent-container button:hover {
  background-color: darkgreen;
}

.cookie-consent-container h3 {
  font-size: 22px;
}

.cookie-consent-container p {
  font-size: 13px;
}

.cookie-consent-container a {
  color: gray;
  text-decoration: underline;
}

/* Super Subtle Tooltip Style */
.tooltip {
  background-color: transparent;
  color: #e0e0e0 !important; /* Very light gray text */
  font-size: 11px !important; /* Smaller font size for subtlety */
  border-radius: 3px !important; /* Minimal rounded corners */
  padding: 4px 6px !important; /* Tight padding for a compact look */
  opacity: 0.9 !important; /* Lower opacity to make it blend more */
}

/* Subtle Tooltip Arrow Style */
.tooltip .tooltip-arrow {
  border-top-color: rgba(0, 0, 0, 0.6) !important; /* Match arrow color with subtle background */
}

/* Adjust Tooltip Text */
.tooltip-inner {
  font-weight: 300 !important; /* Lighter font weight */
  text-align: left !important; /* Left-align text for a more natural feel */
}

/* Remove the box-shadow for a completely flat look */
.tooltip {
  box-shadow: none !important; /* No shadow for an ultra-minimal look */
}

div.dt-button-collection {
  color: black !important;
  width: 100% !important;
  max-width: 14rem !important;
  /*display:none;*/
}

#orderHistoryTable_filter {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
}

#orderHistoryTable_filter input {
  width: 20rem;
  padding: 5px;
}

.orderHistory-container {
  max-height: 85vh;
  overflow-y: auto;
  margin: 0 auto;
  width: 100%;
}

.orderHistory-container::-webkit-scrollbar {
  display: none;
}

.orderHistory-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.orderHistory-table thead th {
  position: relative;
}

.orderHistory-table th, .orderHistory-table td {
  padding: 0.75rem;
  text-align: left;
}

.orderHistoryArticles-tbody td {
  padding: 5px;
}

.orderQuantity-control {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 9rem;
}

.orderQuantity-control input {
  width: 4rem;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.orderQty-decrement-btn, .orderQty-increment-btn {
  background: none;
  border: none;
  cursor: pointer;
}

.orderQty-decrement-btn i, .orderQty-increment-btn i {
  font-size: 1.2rem;
  color: var(--article-buy-button-bgColor); /* Bootstrap Primary Blue */
}

.orderQty-decrement-btn i:hover, .orderQty-increment-btn i:hover {
  color: var(--article-buy-button-hover);
}

.rental-quantity-input {
  width: 50px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.save-rental-quantity-btn {
  /* Responsive Design: Adjust for smaller screens */
}
.save-rental-quantity-btn .save-rental-quantity-btn {
  display: none;
}
.save-rental-quantity-btn .orderQuantity-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center the elements */
  /*width:10rem;*/
}
.save-rental-quantity-btn .button-save-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 12rem;
}
.save-rental-quantity-btn .order-message {
  display: block;
  font-size: 0.8rem;
  margin-top: 4px;
  text-align: center;
}
.save-rental-quantity-btn .orderData-container {
  display: table-cell;
  vertical-align: top;
  line-height: 1.1;
}
.save-rental-quantity-btn .orderData-container i {
  margin-right: 5px;
  font-size: 1rem;
}
.save-rental-quantity-btn .orderData-container span {
  display: block;
  margin-bottom: 3px;
}
.save-rental-quantity-btn .orderData-container a,
.save-rental-quantity-btn .tracking-td a {
  text-decoration: none;
}
.save-rental-quantity-btn .read-note-btn {
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 14px;
  background-color: var(--article-buy-button-bgColor);
  color: var(--article-buy-button-Textcolor);
  border: none;
}
.save-rental-quantity-btn .read-note-btn:hover {
  background-color: var(--article-buy-button-hover);
  color: var(--article-buy-button-Textcolor);
}
.save-rental-quantity-btn .note-modal-body {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bs-body-textColor);
}
.save-rental-quantity-btn .note-modal-title {
  font-weight: bold;
}
@media (max-width: 1920px) {
  .save-rental-quantity-btn .orderHistory-container {
    max-height: 81vh;
  }
}
@media (max-width: 768px) {
  .save-rental-quantity-btn .orderHistory-table, .save-rental-quantity-btn .orderHistory-table thead, .save-rental-quantity-btn .orderHistory-table tbody, .save-rental-quantity-btn .orderHistory-table th, .save-rental-quantity-btn .orderHistory-table td, .save-rental-quantity-btn .orderHistory-table tr {
    display: block;
    width: 100%;
  }
  .save-rental-quantity-btn .orderHistory-table thead {
    display: none;
  }
  .save-rental-quantity-btn .orderHistory-table tr {
    margin-bottom: 1rem;
    border-bottom: 2px solid #ddd;
  }
  .save-rental-quantity-btn .orderHistory-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    text-align: left;
    border: none;
    position: relative;
    padding-left: 50%;
    font-size: 0.875rem;
    background-color: #808080;
  }
  .save-rental-quantity-btn .orderHistory-table td:before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 45%;
    padding-left: 0.75rem;
    font-weight: bold;
    font-size: 0.875rem;
    color: #333;
  }
  .save-rental-quantity-btn .order-note {
    max-width: 95%; /* Nearly full width for smaller screens */
    font-size: 13px; /* Slightly smaller font */
    padding: 8px 10px; /* Adjust padding */
  }
}
@media (max-width: 480px) {
  .save-rental-quantity-btn .orderHistory-table td {
    padding-left: 45%;
    font-size: 0.75rem;
  }
  .save-rental-quantity-btn .orderHistory-table td:before {
    font-size: 0.75rem;
  }
}

:root,
[data-bs-theme=dark] {
  --litepicker-container-months-color-bg: #1e1e1e !important; /* Dark background for container */
  --litepicker-container-months-box-shadow-color: #333 !important; /* Darker shadow for container */
  --litepicker-footer-color-bg: #2c2c2c !important; /* Dark footer background */
  --litepicker-footer-box-shadow-color: #333 !important; /* Darker footer shadow */
  --litepicker-tooltip-color-bg: #2c2c2c !important; /* Dark tooltip background */
  --litepicker-month-header-color: #f5f5f5 !important; /* Lighter text for month header */
  --litepicker-button-prev-month-color: #9e9e9e !important; /* Default button color */
  --litepicker-button-next-month-color: #9e9e9e !important; /* Default button color */
  --litepicker-button-prev-month-color-hover: #1e88e5 !important; /* Blue hover for previous month */
  --litepicker-button-next-month-color-hover: #1e88e5 !important; /* Blue hover for next month */
  --litepicker-month-width: calc(var(--litepicker-day-width) * 7) !important; /* 7 days */
  --litepicker-month-weekday-color: #9e9e9e !important; /* Grey weekday text */
  --litepicker-month-week-number-color: #9e9e9e !important; /* Grey week number text */
  --litepicker-day-width: 38px !important; /* Width for each day */
  --litepicker-day-color: #f5f5f5 !important; /* Light text for days */
  --litepicker-day-color-hover: #1e88e5 !important; /* Blue hover for day */
  --litepicker-is-today-color: #ff5252 !important; /* Red for today's date */
  --litepicker-is-in-range-color: #424242 !important; /* Dark background for range */
  --litepicker-is-locked-color: #616161 !important; /* Grey color for locked days */
  --litepicker-is-start-color: #fff !important; /* White text for start date */
  --litepicker-is-start-color-bg: #1e88e5 !important; /* Blue background for start date */
  --litepicker-is-end-color: #fff !important; /* White text for end date */
  --litepicker-is-end-color-bg: #1e88e5 !important; /* Blue background for end date */
  --litepicker-button-cancel-color: #fff !important; /* White text for cancel button */
  --litepicker-button-cancel-color-bg: #616161 !important; /* Dark grey background for cancel button */
  --litepicker-button-apply-color: #fff !important; /* White text for apply button */
  --litepicker-button-apply-color-bg: #1e88e5 !important; /* Blue background for apply button */
  --litepicker-button-reset-color: #909090 !important; /* Grey text for reset button */
  --litepicker-button-reset-color-hover: #1e88e5 !important; /* Blue hover for reset button */
  --litepicker-highlighted-day-color: #f5f5f5 !important; /* Light text for highlighted day */
  --litepicker-highlighted-day-color-bg: #ffa000 !important; /* Orange background for highlighted day */
}

[data-bs-theme=light] {
  --litepicker-container-months-color-bg: #fff !important;
  --litepicker-container-months-box-shadow-color: #ddd !important;
  --litepicker-footer-color-bg: #fafafa !important;
  --litepicker-footer-box-shadow-color: #ddd !important;
  --litepicker-tooltip-color-bg: #fff !important;
  --litepicker-month-header-color: #333 !important;
  --litepicker-button-prev-month-color: #9e9e9e !important;
  --litepicker-button-next-month-color: #9e9e9e !important;
  --litepicker-button-prev-month-color-hover: #2196f3 !important;
  --litepicker-button-next-month-color-hover: #2196f3 !important;
  --litepicker-month-width: calc(var(--litepicker-day-width) * 7) !important;
  --litepicker-month-weekday-color: #9e9e9e !important;
  --litepicker-month-week-number-color: #9e9e9e !important;
  --litepicker-day-width: 38px !important;
  --litepicker-day-color: #333 !important;
  --litepicker-day-color-hover: #ffa000 !important;
  --litepicker-is-today-color: #f44336;
  --litepicker-is-in-range-color: #bbdefb !important;
  --litepicker-is-locked-color: #9e9e9e !important;
  --litepicker-is-start-color: #fff !important;
  --litepicker-is-start-color-bg: #2196f3 !important;
  --litepicker-is-end-color: #fff !important;
  --litepicker-is-end-color-bg: #2196f3 !important;
  --litepicker-button-cancel-color: #fff !important;
  --litepicker-button-cancel-color-bg: #9e9e9e !important;
  --litepicker-button-apply-color: #fff !important;
  --litepicker-button-apply-color-bg: #2196f3 !important;
  --litepicker-button-reset-color: #909090 !important;
  --litepicker-button-reset-color-hover: #2196f3 !important;
  --litepicker-highlighted-day-color: #333 !important;
  --litepicker-highlighted-day-color-bg: #ffeb3b !important;
}

/* Apply hover effect with border-radius */
.day-item {
  transition: background-color 0.3s, border-radius 0.3s;
}

/* Hover state for all days */
.day-item:hover {
  /*background-color: #555555 !important;*/
  border-radius: 50% !important;
}

/* Override the default .is-today styles */
.litepicker .day-item.is-today {
  background-color: #424242 !important;
  border-radius: 50% !important;
}

/* Styles for locked days */
.is-locked {
  /*background-color: #2c2c2c !important;*/
  pointer-events: none; /* Prevent interaction with locked days */
  opacity: 0.6 !important; /* Slightly fade locked days */
  border-radius: 0px !important;
  box-sizing: border-box !important;
  text-decoration-line: line-through !important; /* Strikethrough effect */
  text-decoration-color: #909090 !important; /* Light grey strikethrough color */
  /*color: #757575 !important;*/
}

/* Hover state for locked days */
.litepicker .is-locked:hover {
  background-color: #444444 !important; /* Slightly lighter grey on hover */
  color: #bdbdbd !important; /* Light grey text on hover */
}

/* Styles for days within the selected range */
.is-in-range {
  background-color: #616161 !important; /* Dark grey background for in-range days */
  border-radius: 0 !important; /* No border-radius */
}

/* Styles for start and end dates in the selected range */
.is-end-date,
.is-start-date {
  background-color: #757575 !important; /* Medium grey for start and end dates */
  /*border-radius: 50% !important;*/
  color: #ffffff !important; /* White text for contrast */
}

.weekend-day {
  color: #e0e0e0 !important;
  text-decoration-line: line-through !important;
}

#backToTodayOverlayBtn {
  position: absolute;
  top: 100px; /* Adjust as needed */
  right: 60px; /* Adjust as needed */
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  z-index: 10000;
}

.latestArticle-btn button:hover,
button.btn.active-latest:hover {
  background-color: var(--article-buy-button-hover);
}

button.btn.active-latest {
  background-color: var(--article-buy-button-bgColor);
  border: none; /* Bootstrap primary blue */
  box-shadow: 0 0 4px rgba(13, 110, 253, 0.5);
  font-weight: 600;
}

.campaign-container {
  max-height: 80vh;
  overflow-y: scroll;
  scroll-behavior: smooth;
  padding: 10px;
  padding-bottom: 1rem;
}

.campaign-container::-webkit-scrollbar {
  display: none;
}

.campaign-links-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.campaign-links-container a {
  text-decoration: none;
}

.active-language {
  background-color: #007bff !important; /* Blue color for active button */
  color: white;
  font-weight: bold;
}

.select-articles-button,
.quillLanguageButton {
  flex-grow: 1;
  border-radius: 5px;
  opacity: 1;
  color: var(--bs-body-textColor);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 1px;
  background-color: var(--article-buy-button-bgColor);
  border: none;
  text-transform: uppercase;
}

.select-articles-button:hover,
.quillLanguageButton:hover {
  background-color: var(--article-buy-button-hover);
  color: var(--bs-body-textColor);
}

.campaign-checkbox {
  background-color: var(--status-checkbox-bgColor);
}

.campaign-checkbox:hover {
  background-color: var(--status-checkbox-hoverColor);
}

.datepicker-campaign {
  margin-top: 10px;
}

/* Adjust input-group text for same height */
.input-group-text {
  padding: 0.375rem 0.75rem; /* Adjust padding to match input */
  display: flex;
  align-items: center;
  height: auto; /* Let the height be auto to match the input */
  border-radius: 0 0.375rem 0.375rem 0; /* Match the input border radius */
}

/* Adjust the icon size and alignment */
.clickable-icon i {
  font-size: 1.2rem; /* Adjust icon size */
  line-height: 1; /* Remove extra space */
}

.templateImg-Container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  width: 20%;
}

.template-image {
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 10px;
  width: 8rem; /* Fixed width */
  height: 8rem; /* Fixed height */
  object-fit: fill; /* Ensures image fills the box while maintaining aspect ratio */
  margin-bottom: 10px;
}

/* Highlight selected template */
.template-image.selected {
  background-color: transparent;
  border: 4px solid rgba(0, 123, 255, 0.5) !important;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.exestingCampaign {
  background-color: yellow;
}

/* Container for checkbox and button in the accordion header */
.accordion-header label {
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
  font-weight: bold;
  padding-left: 1rem;
}

.first-visible-accordion {
  border-top: 1px solid var(--bs-border-color) !important;
  border-radius: 5px 5px 0 0;
  scroll-margin-top: 60px;
}

.campaign-accordion-header {
  display: flex;
  align-items: center; /* Vertically center the items */
  padding: 0.5rem 1rem; /* Adjust padding as needed */
}

/* Margin for the group checkbox */
.campaign-accordion-header .group-checkbox {
  margin-right: 0.5rem; /* Adjust spacing between checkbox and button */
}

/* Flex-grow for the button to take remaining space */
.campaign-accordion-header .accordion-button {
  flex-grow: 1;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: none;
}

.campaign-accordion-header .accordion-button:not(.collapsed) {
  background-color: var(--accordion-bg) !important; /* subtle contrast, still dark */
  color: var(--accordion-color) !important;
}

.campaign-accordion-header .accordion-button:hover {
  background-color: var(--accordion-bg-hover) !important;
}

.campaign-accordion-header .accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1); /* make the icon white */
}

.totalArticleCountAlign-left {
  margin: 0;
  flex-grow: 1;
  text-align: right;
  font-size: 1rem;
}

.group-checkbox-label {
  margin-right: 0.5rem;
}

.campaignType-checkbox {
  width: 1rem;
  height: 1rem;
}

.campaignType-checkbox:hover {
  border-color: #0094ff;
  pointer-events: auto;
  cursor: pointer;
}

.typeGotArticlesCheck {
  font-size: 1rem;
}

.selectAll-articles {
  margin-bottom: 0.5rem;
}

.campaignModal-content {
  min-height: 95vh;
  max-height: 95vh;
}

/* Ensure the table takes full width of the modal */
.campaignArticles-table {
  width: 100%; /* Ensure the table fills the container */
  table-layout: fixed; /* Keeps columns at a consistent width */
}

/* Fixed layout for header and body */
.campaignArticles-thead,
.campaignArticles-tbody tr {
  display: table;
  width: 100%; /* Consistent full width for header and rows */
  table-layout: fixed;
}

/* Enable vertical scrolling for tbody */
.campaignArticles-tbody {
  display: block;
  max-height: 70vh; /* Adjust height as needed */
  overflow-y: auto;
}

/* Specific widths for each column */
.campaignArticles-table th:nth-child(1),
.campaignArticles-table td:nth-child(1) {
  width: 10%; /* Select */
}

.campaignArticles-table th:nth-child(2),
.campaignArticles-table td:nth-child(2) {
  width: 30%; /* Title */
}

.campaignArticles-table th:nth-child(3),
.campaignArticles-table td:nth-child(3) {
  width: 10%; /* ID */
}

.campaignArticles-table th:nth-child(4),
.campaignArticles-table td:nth-child(4) {
  width: 10%; /* Size */
}

.campaignArticles-table th:nth-child(5),
.campaignArticles-table td:nth-child(5) {
  width: 10%; /* Color */
}

.campaignArticles-table th:nth-child(6),
.campaignArticles-table td:nth-child(6) {
  width: 30%; /* Variant */
}

/* Ensure the table columns align between thead and tbody */
.campaignArticles-table th,
.campaignArticles-table td {
  text-align: center; /* Center-align content for consistency */
  overflow: hidden;
  text-overflow: ellipsis; /* Ellipsis for overflow content */
  white-space: nowrap;
}

/* Optional styling to make header more prominent */
.campaignArticles-thead th {
  background-color: rgba(0, 0, 0, 0.1); /* Light gray background */
  position: sticky;
  top: 0;
  z-index: 2; /* Ensure the header stays above the body */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); /* Shadow for header */
}

table tbody tr.selected-article {
  background-color: #d4edda !important; /* Light green background for selected rows */
  color: #155724 !important; /* Darker text for contrast */
}

table tbody tr.selected-article td {
  background-color: #d4edda !important; /* Apply background to all table cells */
  color: #155724 !important; /* Apply text color to all table cells */
}

/* Container for the titles and user groups */
.user-group-container {
  margin-bottom: 1rem;
}

/* Titles row using grid with two columns */
.user-group-container .titles-row {
  display: grid;
  grid-template-columns: 2fr 2fr; /* Two equal columns */
  /*gap: 10px;*/
  margin-bottom: 1rem;
}

/* Centered titles */
.user-group-container .titles-row .title {
  text-align: start;
  font-weight: bold;
}

/* User group item row using grid with two columns */
.user-group-item {
  display: grid;
  grid-template-columns: 2fr 2fr;
  padding: 1px;
}

/* Hidden elements (used for the isStartPageTitle and switch elements) */
.hidden {
  display: none;
}

/* Show elements inline-block */
.inline-block {
  display: inline-block;
}

/* Spacing between checkbox/switch and label */
.switch-container,
.checkbox-label-container {
  display: flex;
  justify-content: start;
  flex-grow: 1;
  margin-right: 1rem;
}

/* Spacing for switch label */
.switch-label-margin {
  margin-left: 10px;
}

/* Ensure the modal container maintains a consistent height and has some margin */
/* Only affects elements inside #campaignArticleModal */
#campaignArticleModal .campaignModal-sticky-wrapper {
  z-index: 1050; /* above modal content */
  top: 0; /* ensure it’s pinned to top */
  background-color: var(--bs-navbar-bg);
  margin-bottom: 1rem;
}

.campaignArticle-Accordion,
#campaignArticleModal .campaignModal-sticky-wrapper {
  padding: 1rem;
}

.campaignAccordion-item {
  margin: 0;
}

/* Modal body to handle scrolling */
.campaignArticles-body {
  flex: 1;
  overflow-y: auto;
  padding: 0px;
}

/* Sticky header and footer */
.campaignModal-header,
.campaignModal-footer {
  position: sticky;
  top: 0;
  bottom: 0;
  z-index: 2;
  background: var(--bs-body-bg);
}

.saveCampaign-buttonContainer {
  max-width: 25rem; /* Set the maximum width for the container */
  margin-left: auto; /* Ensure it doesn't affect other layout elements */
}

.saveCampaign-buttonContainer button {
  background-color: var(--article-buy-button-bgColor);
  color: var(--bs-body-textColor);
  transition: background-color 0.3s;
  border: none;
  width: 100%;
}

.saveCampaign-buttonContainer button:hover {
  background-color: var(--article-buy-button-hover);
}

/* Padding for modal content */
.modal-header, .modal-footer {
  padding: 1rem;
}

/* Optional: Add border to footer */
.modal-footer {
  border-top: 1px solid #dee2e6;
}

.custom-campaign-dropzone {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 6rem;
  max-height: 6rem;
  border: 2px dashed #ccc;
  padding: 20px;
  margin-bottom: 0.7rem;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
  position: relative; /* Ensure that the remove button is positioned relative to the drop zone */
  transition: background-color 0.3s;
}

.custom-campaign-dropzone:hover {
  background-color: var(--article-buy-button-hover);
}

.custom-campaign-dropzone p {
  margin-top: 10px;
}

.campaign-file-preview {
  display: flex;
  align-items: center;
  justify-content: start;
  /*min-width:20rem;*/
  max-width: 22rem;
}

.campaign-file-preview img {
  width: 100%;
  max-width: 7rem;
  max-height: 5rem;
  margin-right: 10px;
}

.campaign-file-name {
  display: inline-block;
  max-width: 350px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.campaign-remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  color: #d47a7a;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
  /*box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);*/
}

.campaign-remove-btn:hover {
  transform: scale(1.3);
}

/* Style the custom color picker input */
#customColorPicker {
  padding: 5px; /* Adjust padding for alignment */
  margin: -2px -7px;
  height: 24px; /* Match height of toolbar buttons */
  width: 32px; /* Width for visibility but not too wide */
  border: none; /* Remove default border */
  background-color: transparent;
  cursor: pointer; /* Show pointer cursor */
}

/* Optional: Align it vertically if toolbar items have specific alignment */
.ql-toolbar #customColorPicker {
  display: flex;
  align-items: center;
}

/* Adjust the color picker input on hover to match toolbar button hover style */
#customColorPicker:hover {
  border: 1px solid #ccc; /* Optional: Add hover effect */
  border-radius: 4px; /* Round edges to match toolbar buttons */
}

.campaignTemplate-container {
  max-width: 69vw;
  margin: auto;
}

.ql-snow * {
  line-height: 1.6;
}

/* Light background and border for the toolbar */
/*.ql-toolbar.ql-snow {
    background-color: #f9f9f9;
}
*/
/* Force color for all toolbar icons, labels, and buttons */
/*.ql-toolbar.ql-snow * {
    color: var(--article-title-text-color) !important;
    stroke: var(--article-title-text-color) !important;
}*/
.ql-snow .ql-stroke,
.ql-snow .ql-fill,
.ql-toolbar.ql-snow .ql-picker-label {
  stroke: var(--article-title-text-color) !important;
  color: var(--article-title-text-color) !important;
}

/* Main hover override for toolbar icons */
.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow button:hover .ql-fill,
.ql-toolbar.ql-snow .ql-picker-label:hover,
.ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke {
  stroke: var(--article-buy-button-hover) !important;
  color: var(--article-buy-button-hover) !important;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  background-color: var(--bs-body-bg);
  margin-top: 5px;
  /*border:none;*/
  color: var(--article-title-text-color);
}

.ql-toolbar.ql-snow .ql-picker-options .ql-picker-item:hover {
  /*background-color: var(--article-buy-button-hover);*/ /* Light gray background */
  color: var(--article-buy-button-hover) !important;
  fill: var(--article-buy-button-hover) !important;
  stroke: var(--article-buy-button-hover) !important;
  border-radius: 4px;
  cursor: pointer;
}

.ql-toolbar.ql-snow .ql-align.ql-picker.ql-icon-picker.ql-expanded .ql-picker-options .ql-picker-item:hover .ql-stroke,
.ql-toolbar.ql-snow .ql-align.ql-picker.ql-icon-picker.ql-expanded .ql-picker-options .ql-picker-item:hover .ql-fill {
  stroke: var(--article-buy-button-hover) !important;
  fill: var(--article-buy-button-hover) !important;
}

#campaignInput-editor,
#campaignInput-editor-swedish,
#campaignInput-editor-english {
  max-height: 30rem; /* Set the maximum height */
  min-height: 10rem;
  overflow-y: auto; /* Enable vertical scrolling when content exceeds max height */
  border-radius: 0px 0px 5px 5px;
  padding: 10px; /* Optional: Add padding for better user experience */
  box-sizing: border-box; /* Ensure padding is included in height calculation */
}

/*.ql-editor span{
    color: var(--editor-text-color) !important;
}*/
/* Light mode */
/*:root,
[data-bs-theme="light"] {
    --editor-text-color: black;
}*/
/* Dark mode */
/*[data-bs-theme="dark"] {
    --editor-text-color: white;
}*/
@media (max-width: 1920px) {
  .campaignTemplate-container {
    max-width: 76vw;
  }
  .campaign-container {
    max-height: 75vh;
  }
  .ql-editor {
    max-width: 71vw;
    margin: auto;
  }
}
@media (max-width: 1024px) {
  .campaignTemplate-container {
    max-width: 100vw;
  }
}
.checkbox-header, .campaign-checkbox {
  text-align: center;
  vertical-align: middle;
  width: 50px; /* Adjust this width if needed */
}

#selectAllCampaign, .campaign-checkbox input[type=checkbox] {
  margin: 0 auto;
  display: block;
}

.campaign-checkbox {
  cursor: default;
}

.allCampaign-body img {
  width: 50px;
}

.allCampaign-body select {
  width: 120px;
}

.scrollToTopBtnAllCampaign {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: transparent;
  color: var(--scrollToTopBtn-color);
  cursor: pointer;
  /*padding: 15px;*/
  /*border-radius: 10px;*/
  font-size: 50px;
  display: none;
  opacity: 0.4;
  transition: opacity 0.7s, visibility 3.2s;
}

.scrollToTopBtnAllCampaign:hover {
  opacity: 1;
}

.allCampaign-container {
  /*width: 70%;*/
  margin: 0 auto;
  margin-top: 10px;
  /*border:1px solid red;*/
}

.updateStatusCampaign-div {
  height: 100%;
  width: 150px;
  text-align: end;
}

.externInvitation-container {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 100%;
  width: 100%;
}

@media (max-width: 768px) {
  .externApplicationContainer {
    max-width: 100% !important;
  }
  .invitationHeader {
    max-height: 72vh !important;
    padding: 1rem;
  }
}
@media (max-width: 768px) and (max-width: 1920px) {
  .externInvitation-container {
    /*max-height: 76vh;*/
  }
}
.externApplicationContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 64vw;
  margin: auto;
  margin-top: 1rem;
}

/*.invitationHeader::-webkit-scrollbar {
    display: none;
}*/
.invitationHeader {
  overflow-y: auto;
  max-height: 85vh;
  min-width: 64vw;
}

.invitePassword-container {
  border-top: 1px solid;
  margin-top: 2rem;
  padding-top: 1rem;
  padding-right: 0px;
}

.invitePassword-container > * {
  padding-right: 0px;
}

/* Flex container for Generate Link Form and Update Status */
.generateLinkActions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px;
}

/* Container for Generate Link Form */
.generateLinkForm-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center form content horizontally */
  justify-content: center;
  text-align: center;
}

.generateLinkForm-container,
.actionsBtnContainer {
  min-height: 7rem;
}

/* User Group List */
.userGroup-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Space between items */
}

/* Align checkbox and label */
.userGroup-item {
  display: flex;
  align-items: center; /* Align checkbox and label vertically */
  gap: 5px; /* Space between checkbox and label */
}

/* Update Link Status Container */
.updateLinkStatus-container {
  flex: 0;
  /*text-align: right;*/
  /*display: flex;*/
  /*flex-direction: column;*/
  gap: 5px; /* Space between dropdown and button */
  /*min-width:9rem;*/
}

.actionsBtnContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.updateLink-Btn,
.deleteLink-Btn {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  align-self: flex-end;
  margin-top: 5px;
}

.generateLinkBtn {
  background-color: var(--article-buy-button-bgColor);
  color: var(--bs-body-textColor);
  width: 11rem;
}

.generateLinkBtn:hover {
  background-color: var(--article-buy-button-hover);
  color: var(--bs-body-textColor);
}

.deleteLink-Btn {
  background-color: var(--deleteLinkBtn-bgColor);
}

.deleteLink-Btn:hover {
  background-color: var(--deleteLinkBtn-hoverColor);
}

.updateLink-Btn {
  background-color: var(--updateLinkBtn-bgColor);
}

.updateLink-Btn:hover {
  background-color: var(--updateLinkBtn-hoverColor);
}

.deleteTrashBtn .bi-trash3 {
  color: red;
}

.deleteTrashBtn .bi-trash3:hover {
  color: lightcoral;
}

.deleteTrashBtn {
  padding: 0px;
}

.linkTable-scrollable {
  width: 100%;
  max-height: 64vh; /* Set the maximum height */
  overflow-y: auto; /* Enable vertical scrolling */
}

.linkTable-scrollable::-webkit-scrollbar {
  display: none;
}

.linkTable-scrollable thead th {
  position: relative;
}

#generatedLinksTable {
  width: 100%;
  /*border-collapse: collapse;*/
}

#generatedLinksTable thead {
  position: sticky; /* Keep the header fixed */
  top: 0;
  background-color: #f8f9fa; /* Optional: Set a background color for the header */
  z-index: 1;
}

.noLinks {
  text-align: center;
}

.d-none {
  visibility: hidden;
}

.d-visible {
  visibility: visible;
}

.linkAllCheckbox-header {
  width: 60px;
}

.linkAllCheckbox-header input:hover,
.generatedLinks-container input:hover,
.userGroup-item input:hover {
  background-color: var(--status-checkbox-bgColor);
}

.clickable-row {
  cursor: pointer;
}

.handleapplicationsBtn-Container {
  text-align: center;
  width: 14rem;
}

.account-action-btn {
  width: 6rem;
}

/*//Users applied for account extarnally
.user-info-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: auto;
    background-color: #242222;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.user-details {
    flex: 0 0 auto;
    min-width: 150px;
    padding: 10px;
    background-color: transparent;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.collapse-row {
    background-color: #f8f9fa; 
}

.table.table-bordered th,
.table.table-bordered td {
    text-align: center;
    vertical-align: middle;
}*/
.report-container {
  max-width: 60vw;
  padding: 0 1rem;
  margin: auto;
  position: relative;
}

.powerbi-iframe {
  width: 100%;
  height: 78vh;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  display: block;
}

/* Optional: Overlay title on iframe */
.report-title-overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  font-size: 1rem;
  width: 100%;
  z-index: 2;
  text-align: center;
  padding: 0.75rem;
}

@media (max-width: 3440px) {
  .powerbi-iframe {
    max-height: 71vh;
  }
}
@media (max-width: 2560px) {
  .powerbi-iframe {
    max-height: 78vh;
  }
}
@media (max-width: 1920px) {
  .powerbi-iframe {
    max-height: 60vh;
  }
}
/* Responsive tweak for mobile */
@media (max-width: 768px) {
  #reportHeaderWrapper {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
  }
  .report-container {
    max-width: 100%;
  }
  .button-container {
    margin-top: 0 !important;
  }
  .report-dropdown {
    margin-bottom: 0 !important;
  }
}
/*@media (max-width: 768px) {
    #reportHeaderWrapper {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .report-container {
        max-width: 100%;
    }
}*/
/* Optional: better spacing on small screens */
/*@media (max-width: 576px) {
    .report-header-section {
        flex-direction: column;
        gap: 0.5rem;
    }
}*/
.button-group {
  display: flex;
  gap: 0.5rem;
}

.btn-download {
  background-color: #0d6efd;
  color: white;
  font-weight: 500;
}
.btn-download:hover {
  background-color: #0b5ed7;
}

/* Local fallback for Material Symbols Outlined */
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 400;
  src: url("../lib/icons/googleFonts/material-symbols-outlined.woff2") format("woff2");
}
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* Dark mode */
:root,
[data-bs-theme=light] {
  --scrollbar-bg: #f1f1f1;
  --scrollbar-thumb: #888;
  --scrollbar-thumb-hover: #555;
  --btnClose-customColor: invert(1) grayscale(50%) brightness(0.5);
  --language-bsColor: #3b5f75;
  --language-bsBorder-color: #87A3C5;
  --language-knobBsColor: #a5bad4;
  --bs-body-bg: #f4f5f7;
  --bs-body-textColor: #dee2e6;
  --bs-searchfield-bg: #f4f5f7;
  --bs-navbar-bg: #ffffff;
  --bs-gearIcon-color: #333840;
  --btnClose-color: #f4f5f7;
  /* Article */
  --ribbon-bg-color: #87A3C5;
  --bs-border-color: #333; /* Added for consistency */
  --background-article: #ffffff; /* Clean white for article background */
  --article-fallback-bgColor: #D9D9D9; /* Soft gray fallback for articles */
  --articles-dropdowntext-color: #495057; /* Medium dark gray for dropdown text */
  --article-quantity-bgColor: #f4f4f4; /* Light gray for quantity background */
  --article-buy-button-Textcolor: #ffffff;
  --article-buy-button-bgColor: #3b5f75;
  --article-buy-button-hover: #6E89A7;
  --articleQuantity-borderColor: #D9D9D9;
  --article-not-in-stock: #7f7f7f; /* Light coral for unavailable stock */
  --article-not-in-stock-text: #d9534f; /* Red for unavailable stock text */
  --article-not-in-stock-hover: #ffc6c6; /* Softer hover effect */
  --article-default-text-color: #212529; /* Darker gray for default text */
  --article-title-text-color: #212529; /* Darker gray for article titles */
  --article-dropdown-option: #f4f5f7;
  --article-dropdown-textColor: #212529;
  --article-priceLabel-color: #0d6efd; /* Blue for price labels (matches buy button) */
  --article-highlight-dropdownOptions-error: #dc3545; /* Red for errors */
  --article-quantity-control-icon-color: #c2c2c2;
  --article-quantity-bgColor: #f4f5f7;
  --aricle-quantity-textColor: #212529;
  /* Article end */
  /* Article management*/
  --status-checkbox-bgColor: #D9D9D9;
  --status-checkbox-hoverColor: #6E89A7;
  --dropzone-bgColor: #f5f5f5;
  --dropzone-hover-BgColor: #ddd;
  --listItem-bgColor: #ffffff;
  /* Article management end */
  --bs-setting-tab-bg: #d1d1d1; /* White for setting tab background */
  --bs-setting-text-color: #212529;
  --login-bgColor: #ffffff; /* White for login background */
  --setting-ul-hover-color: #f4f5f7; /* Very light gray hover color */
  --dark-mode-switch-bg-color: #f8f9fa; /* Light gray for the dark mode switch */
  --default-text-color: #212529; /* Standard dark text color */
  --header-color-popover: #6c757d; /* Medium gray for popover header */
  --bg-color-popover: #ffffff; /* White popover background */
  --bg-sortablejs-selected: #d4edda; /* Light green for sortable selected */
  --bg-sortablejs-selected-hover: #c3e6cb; /* Slightly darker green on hover */
  --standrad-btn-coor: #007bff; /* Standard blue button */
  --scrollToTopBtn-color: #007bff; /* Blue scroll to top button */
  --cart-h1-color: #87A3C5;
  --cart-offcanvas-bg: #f8f9fa; /* Very light gray for the cart background */
  --orderDetails-input-color: #f8f9fa; /* Light gray for input fields */
  --footer-background: #e9ecef; /* Light gray footer background */
  --footer-color: #212529; /* Dark text for footer */
  --bs-accordion-btn-color: #dee2e6 !important;
  --menuLink-HoverColor: #f4f5f7;
  --menu-canvas-bg: #ffffff;
  --modal-bg-userProfile: #ffffff; /* White background for user profile modal */
  --modal-header-color: #212529; /* Darker text for modal header */
  --closeUserInfoBtn-color: #333333;
  --closeUserInfoBtn-hoverColor: #555555;
  --support-bg-color: #ffffff; /* White background for support canvas */
  --support-border-color: #ced4da; /* Light gray borders */
  --userProfile-adminview-bg: #f8f9fa; /* Very light gray background for admin view */
  --saveRecipient-btn-color: #007bff; /* Standard blue save button */
  --saveRecipient-btn-hover: #0056b3; /* Darker blue on hover */
  --toast-bgColor-error: #dc3545;
  --toast-bgColor-success: #28a745;
  --updateLinkBtn-bgColor: #28a745; /* Light mode normal */
  --updateLinkBtn-hoverColor: #218838; /* Light mode hover */
  --updateLinkBtn-textColor: #ffffff;
  --deleteLinkBtn-bgColor: #dc3545; /* Light mode */
  --deleteLinkBtn-hoverColor: #c82333;
  --deleteLinkBtn-textColor: #ffffff;
  --accordion-bg: #f1f1f1;
  --accordion-bg-hover: #e4e4e4;
  --accordion-color: #212529;
  --form-input-bgColor: #4B7390;
}

:root,
[data-bs-theme=dark] {
  --scrollbar-bg: #2a2a2a;
  --scrollbar-thumb: #555;
  --scrollbar-thumb-hover: #777;
  --language-bsColor: #555555;
  --language-knobBsColor: #808080;
  --language-bsBorder-color: #3b5f75;
  --bs-body-bg: #212529;
  --bs-body-textColor: #dee2e6;
  --bs-searchfield-bg: #292929;
  --bs-navbar-bg: #323132;
  --bs-gearIcon-color: #ffffff;
  --bs-cartIcon-color: #ffffff;
  --bs-cartGearIcon-HoverColor: #6E89A7;
  --bs-setting-tab-bg: #323132;
  --bs-setting-text-color: #fff;
  --btnClose-color: #909294;
  --ribbon-bg-color: #87A3C5;
  --bs-border-color: #495057; /* Added for consistency */
  --background-article: #323132;
  --article-fallback-bgColor: #525252;
  --articles-dropdowntext-color: #E8E8E8;
  --article-quantity-bgColor: #292929;
  --article-buy-button-Textcolor: #212529;
  --article-buy-button-bgColor: #87A3C5;
  --article-buy-button-hover: #6E89A7;
  --article-not-in-stock: #6b6b6b;
  --article-not-in-stock-text: #666;
  --article-not-in-stock-hover: #cc8787;
  --article-default-text-color: #fff;
  --article-title-text-color: #fff;
  --article-dropdown-option: #212529; /* Added for consistency */
  --article-dropdown-textColor: #f4f5f7;
  --article-priceLabel-color: #87A3C5;
  --article-highlight-dropdownOptions-error: #dc3545;
  --articleQuantity-borderColor: #474747;
  /* Article management*/
  --status-checkbox-bgColor: #495057;
  --status-checkbox-hovercolor: #6E89A7;
  --dropzone-bgColor: #333;
  --dropzone-hover-BgColor: #666;
  --listItem-bgColor: #363636;
  /* Article management end */
  /*--login-bgColor: #ffffff;*/
  --setting-ul-hover-color: #5a5a5a;
  --dark-mode-switch-bg-color: #f8f9fa;
  --default-text-color: #fff;
  --cart-h1-color: #87A3C5;
  --cart-offcanvas-bg: #212529;
  --orderDetails-input-color: #212529;
  --footer-background: #333;
  --footer-background: #87A3C5; /* Updated */
  --footer-color: #f5f5f5;
  --menuLink-HoverColor: #5a5a5a;
  --menu-canvas-bg: #212529;
  --modal-bg-userProfile: #212529;
  --modal-header-color: #fff;
  --closeUserInfoBtn-color: #333333;
  --closeUserInfoBtn-hoverColor: #555555;
  --support-bg-color: #212529;
  --support-border-color: #495057;
  --userProfile-adminview-bg: #212529;
  --saveRecipient-btn-color: #87A3C5; /* Added for consistency */
  --saveRecipient-btn-hover: #6E89A7; /* Added for consistency */
  --scrollToTopBtn-color: rgb(155, 155, 155);
  --bg-sortablejs-selected: #268100;
  --bg-sortablejs-selected-hover: #2a8703;
  --dark-mode-switch-bg-color: #333; /* Added for consistency */
  --standrad-btn-coor: #92A09D; /* Added for consistency */
  --toast-bgColor-error: #dc3545;
  --toast-bgColor-success: #28a745;
  --updateLinkBtn-bgColor-dark: #34c759; /* Dark mode normal */
  --updateLinkBtn-hoverColor-dark: #2aa24b; /* Dark mode hover */
  --updateLinkBtn-textColor-dark: #ffffff;
  --deleteLinkBtn-bgColor: #b33a3a; /* Muted red for normal state */
  --deleteLinkBtn-hoverColor: #a12828; /* Darker red for hover state */
  --deleteLinkBtn-textColor: #ffffff; /* White text for contrast */
  --deleteLinkBtn-hoverTextColor: #ffffff; /* Keep white text on hover */
  --accordion-bg: #2a2e32;
  --accordion-bg-hover: #3a3f44;
  --accordion-color: #ffffff;
  --form-input-bgColor: #4B7390;
}

.input-wide,
.input-xwide {
  max-width: 100%;
  box-sizing: border-box;
}

.input-wide {
  min-width: 12rem;
}

.input-xwide {
  min-width: 20rem;
}

.input-smal {
  width: 10rem;
}

.modal-superwide {
  max-width: 80vw;
  min-width: 70vw;
}

.table-warning {
  transition: background-color 0.3s ease-in-out;
}

tr[data-active=false] {
  opacity: 0.6;
}

.siteNoticeContainer {
  max-width: 95vw;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item::before {
  content: attr(data-value);
}

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1"]::before {
  content: "1";
}

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.5"]::before {
  content: "1.5";
}

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.75"]::before {
  content: "1.75";
}

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="2"]::before {
  content: "2";
}

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="2.5"]::before {
  content: "2.5";
}

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="3"]::before {
  content: "3";
}

/* Only apply default line-height when none is explicitly set */
.siteNoticeQuill > *:not([style*=line-height]) {
  line-height: 1.42;
}

.createCardModal .modal-content {
  /*height:59vh;*/
}

.template-thumb.selected {
  border: 2px solid #007bff;
}

/*!
 * Quill Editor v2.0.2
 * https://quilljs.com
 * Copyright (c) 2017-2024, Slab
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container {
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0;
  position: relative;
}

.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}

.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui, .ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui {
  cursor: pointer;
}

.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}

.ql-clipboard p {
  margin: 0;
  padding: 0;
}

.ql-editor {
  box-sizing: border-box;
  counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.ql-editor > * {
  cursor: text;
}

.ql-editor p, .ql-editor ol, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
  margin: 0;
  padding: 0;
}

@supports (counter-set: none) {
  .ql-editor p, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
    counter-set: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor p, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
    counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor table {
  border-collapse: collapse;
}

.ql-editor td {
  border: 1px solid #000;
  padding: 2px 5px;
}

.ql-editor ol {
  padding-left: 1.5em;
}

.ql-editor li {
  list-style-type: none;
  padding-left: 1.5em;
  position: relative;
}

.ql-editor li > .ql-ui:before {
  display: inline-block;
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
  white-space: nowrap;
  width: 1.2em;
}

.ql-editor li[data-list=checked] > .ql-ui, .ql-editor li[data-list=unchecked] > .ql-ui {
  color: #777;
}

.ql-editor li[data-list=bullet] > .ql-ui:before {
  content: "•";
}

.ql-editor li[data-list=checked] > .ql-ui:before {
  content: "☑";
}

.ql-editor li[data-list=unchecked] > .ql-ui:before {
  content: "☐";
}

@supports (counter-set: none) {
  .ql-editor li[data-list] {
    counter-set: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list] {
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered] {
  counter-increment: list-0;
}

.ql-editor li[data-list=ordered] > .ql-ui:before {
  content: counter(list-0, decimal) ". ";
}

.ql-editor li[data-list=ordered].ql-indent-1 {
  counter-increment: list-1;
}

.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before {
  content: counter(list-1, lower-alpha) ". ";
}

@supports (counter-set: none) {
  .ql-editor li[data-list].ql-indent-1 {
    counter-set: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list].ql-indent-1 {
    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-2 {
  counter-increment: list-2;
}

.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before {
  content: counter(list-2, lower-roman) ". ";
}

@supports (counter-set: none) {
  .ql-editor li[data-list].ql-indent-2 {
    counter-set: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list].ql-indent-2 {
    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-3 {
  counter-increment: list-3;
}

.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before {
  content: counter(list-3, decimal) ". ";
}

@supports (counter-set: none) {
  .ql-editor li[data-list].ql-indent-3 {
    counter-set: list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list].ql-indent-3 {
    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-4 {
  counter-increment: list-4;
}

.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before {
  content: counter(list-4, lower-alpha) ". ";
}

@supports (counter-set: none) {
  .ql-editor li[data-list].ql-indent-4 {
    counter-set: list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list].ql-indent-4 {
    counter-reset: list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-5 {
  counter-increment: list-5;
}

.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before {
  content: counter(list-5, lower-roman) ". ";
}

@supports (counter-set: none) {
  .ql-editor li[data-list].ql-indent-5 {
    counter-set: list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list].ql-indent-5 {
    counter-reset: list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-6 {
  counter-increment: list-6;
}

.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before {
  content: counter(list-6, decimal) ". ";
}

@supports (counter-set: none) {
  .ql-editor li[data-list].ql-indent-6 {
    counter-set: list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list].ql-indent-6 {
    counter-reset: list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-7 {
  counter-increment: list-7;
}

.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before {
  content: counter(list-7, lower-alpha) ". ";
}

@supports (counter-set: none) {
  .ql-editor li[data-list].ql-indent-7 {
    counter-set: list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list].ql-indent-7 {
    counter-reset: list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-8 {
  counter-increment: list-8;
}

.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before {
  content: counter(list-8, lower-roman) ". ";
}

@supports (counter-set: none) {
  .ql-editor li[data-list].ql-indent-8 {
    counter-set: list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list].ql-indent-8 {
    counter-reset: list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-9 {
  counter-increment: list-9;
}

.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before {
  content: counter(list-9, decimal) ". ";
}

.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}

.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}

.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}

.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}

.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}

.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}

.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}

.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}

.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}

.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}

.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}

.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}

.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}

.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}

.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}

.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}

.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}

.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}

.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}

.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}

.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}

.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}

.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}

.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}

.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}

.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}

.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}

.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}

.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}

.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}

.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}

.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}

.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}

.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}

.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}

.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}

.ql-editor li.ql-direction-rtl {
  padding-right: 1.5em;
}

.ql-editor li.ql-direction-rtl > .ql-ui:before {
  margin-left: 0.3em;
  margin-right: -1.5em;
  text-align: left;
}

.ql-editor table {
  table-layout: fixed;
  width: 100%;
}

.ql-editor table td {
  outline: none;
}

.ql-editor .ql-code-block-container {
  font-family: monospace;
}

.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}

.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}

.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}

.ql-editor .ql-bg-black {
  background-color: #000;
}

.ql-editor .ql-bg-red {
  background-color: #e60000;
}

.ql-editor .ql-bg-orange {
  background-color: #f90;
}

.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}

.ql-editor .ql-bg-green {
  background-color: #008a00;
}

.ql-editor .ql-bg-blue {
  background-color: #06c;
}

.ql-editor .ql-bg-purple {
  background-color: #93f;
}

.ql-editor .ql-color-white {
  color: #fff;
}

.ql-editor .ql-color-red {
  color: #e60000;
}

.ql-editor .ql-color-orange {
  color: #f90;
}

.ql-editor .ql-color-yellow {
  color: #ff0;
}

.ql-editor .ql-color-green {
  color: #008a00;
}

.ql-editor .ql-color-blue {
  color: #06c;
}

.ql-editor .ql-color-purple {
  color: #93f;
}

.ql-editor .ql-font-serif {
  font-family: Georgia, Times New Roman, serif;
}

.ql-editor .ql-font-monospace {
  font-family: Monaco, Courier New, monospace;
}

.ql-editor .ql-size-small {
  font-size: 0.75em;
}

.ql-editor .ql-size-large {
  font-size: 1.5em;
}

.ql-editor .ql-size-huge {
  font-size: 2.5em;
}

.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}

.ql-editor .ql-align-center {
  text-align: center;
}

.ql-editor .ql-align-justify {
  text-align: justify;
}

.ql-editor .ql-align-right {
  text-align: right;
}

.ql-editor .ql-ui {
  position: absolute;
}

.ql-editor.ql-blank::before {
  color: rgba(0, 0, 0, 0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}

.ql-snow.ql-toolbar:after, .ql-snow .ql-toolbar:after {
  clear: both;
  content: "";
  display: table;
}

.ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}

.ql-snow.ql-toolbar button svg, .ql-snow .ql-toolbar button svg {
  float: left;
  height: 100%;
}

.ql-snow.ql-toolbar button:active:hover, .ql-snow .ql-toolbar button:active:hover {
  outline: none;
}

.ql-snow.ql-toolbar input.ql-image[type=file], .ql-snow .ql-toolbar input.ql-image[type=file] {
  display: none;
}

.ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #06c;
}

.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button:focus .ql-fill, .ql-snow .ql-toolbar button:focus .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #06c;
}

.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke, .ql-snow .ql-toolbar button:focus .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke-miter, .ql-snow .ql-toolbar button:hover .ql-stroke-miter, .ql-snow.ql-toolbar button:focus .ql-stroke-miter, .ql-snow .ql-toolbar button:focus .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #06c;
}

@media (pointer: coarse) {
  .ql-snow.ql-toolbar button:hover:not(.ql-active), .ql-snow .ql-toolbar button:hover:not(.ql-active) {
    color: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill, .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    fill: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke, .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    stroke: #444;
  }
}
.ql-snow {
  box-sizing: border-box;
}

.ql-snow * {
  box-sizing: border-box;
}

.ql-snow .ql-hidden {
  display: none;
}

.ql-snow .ql-out-bottom, .ql-snow .ql-out-top {
  visibility: hidden;
}

.ql-snow .ql-tooltip {
  position: absolute;
  transform: translateY(10px);
}

.ql-snow .ql-tooltip a {
  cursor: pointer;
  text-decoration: none;
}

.ql-snow .ql-tooltip.ql-flip {
  transform: translateY(-10px);
}

.ql-snow .ql-formats {
  display: inline-block;
  vertical-align: middle;
}

.ql-snow .ql-formats:after {
  clear: both;
  content: "";
  display: table;
}

.ql-snow .ql-stroke {
  fill: none;
  stroke: #444;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.ql-snow .ql-stroke-miter {
  fill: none;
  stroke: #444;
  stroke-miterlimit: 10;
  stroke-width: 2;
}

.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill {
  fill: #444;
}

.ql-snow .ql-empty {
  fill: none;
}

.ql-snow .ql-even {
  fill-rule: evenodd;
}

.ql-snow .ql-thin, .ql-snow .ql-stroke.ql-thin {
  stroke-width: 1;
}

.ql-snow .ql-transparent {
  opacity: 0.4;
}

.ql-snow .ql-direction svg:last-child {
  display: none;
}

.ql-snow .ql-direction.ql-active svg:last-child {
  display: inline;
}

.ql-snow .ql-direction.ql-active svg:first-child {
  display: none;
}

.ql-snow .ql-editor h1 {
  font-size: 2em;
}

.ql-snow .ql-editor h2 {
  font-size: 1.5em;
}

.ql-snow .ql-editor h3 {
  font-size: 1.17em;
}

.ql-snow .ql-editor h4 {
  font-size: 1em;
}

.ql-snow .ql-editor h5 {
  font-size: 0.83em;
}

.ql-snow .ql-editor h6 {
  font-size: 0.67em;
}

.ql-snow .ql-editor a {
  text-decoration: underline;
}

.ql-snow .ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}

.ql-snow .ql-editor code, .ql-snow .ql-editor .ql-code-block-container {
  background-color: #f0f0f0;
  border-radius: 3px;
}

.ql-snow .ql-editor .ql-code-block-container {
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}

.ql-snow .ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}

.ql-snow .ql-editor .ql-code-block-container {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
}

.ql-snow .ql-editor img {
  max-width: 100%;
}

.ql-snow .ql-picker {
  color: #444;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  height: 24px;
  position: relative;
  vertical-align: middle;
}

.ql-snow .ql-picker-label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}

.ql-snow .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
}

.ql-snow .ql-picker-options {
  background-color: #fff;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}

.ql-snow .ql-picker-options .ql-picker-item {
  cursor: pointer;
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: #ccc;
  z-index: 2;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #ccc;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #ccc;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  display: block;
  margin-top: -1px;
  top: 100%;
  z-index: 1;
}

.ql-snow .ql-color-picker, .ql-snow .ql-icon-picker {
  width: 28px;
}

.ql-snow .ql-color-picker .ql-picker-label, .ql-snow .ql-icon-picker .ql-picker-label {
  padding: 2px 4px;
}

.ql-snow .ql-color-picker .ql-picker-label svg, .ql-snow .ql-icon-picker .ql-picker-label svg {
  right: 4px;
}

.ql-snow .ql-icon-picker .ql-picker-options {
  padding: 4px 0;
}

.ql-snow .ql-icon-picker .ql-picker-item {
  height: 24px;
  width: 24px;
  padding: 2px 4px;
}

.ql-snow .ql-color-picker .ql-picker-options {
  padding: 3px 5px;
  width: 152px;
}

.ql-snow .ql-color-picker .ql-picker-item {
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0;
  width: 16px;
}

.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  position: absolute;
  margin-top: -9px;
  right: 0;
  top: 50%;
  width: 18px;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=""])::before, .ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=""])::before, .ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=""])::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=""])::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=""])::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=""])::before {
  content: attr(data-label);
}

.ql-snow .ql-picker.ql-header {
  width: 98px;
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "Normal";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "Heading 1";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "Heading 2";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "Heading 3";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "Heading 4";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "Heading 5";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "Heading 6";
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1em;
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: 0.83em;
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: 0.67em;
}

.ql-snow .ql-picker.ql-font {
  width: 108px;
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "Sans Serif";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: "Serif";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: "Monospace";
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family: Georgia, Times New Roman, serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  font-family: Monaco, Courier New, monospace;
}

.ql-snow .ql-picker.ql-size {
  width: 98px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "Normal";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: "Small";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: "Large";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: "Huge";
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  font-size: 10px;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  font-size: 18px;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  font-size: 32px;
}

.ql-snow .ql-color-picker.ql-background .ql-picker-item {
  background-color: #fff;
}

.ql-snow .ql-color-picker.ql-color .ql-picker-item {
  background-color: #000;
}

.ql-code-block-container {
  position: relative;
}

.ql-code-block-container .ql-ui {
  right: 5px;
  top: 5px;
}

.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  padding: 8px;
}

.ql-toolbar.ql-snow .ql-formats {
  margin-right: 15px;
}

.ql-toolbar.ql-snow .ql-picker-label {
  border: 1px solid transparent;
}

.ql-toolbar.ql-snow .ql-picker-options {
  border: 1px solid transparent;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: #ccc;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
}

.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected, .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
  border-color: #000;
}

.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 0;
}

.ql-snow .ql-tooltip {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 5px #ddd;
  color: #444;
  padding: 5px 12px;
  white-space: nowrap;
}

.ql-snow .ql-tooltip::before {
  content: "Visit URL:";
  line-height: 26px;
  margin-right: 8px;
}

.ql-snow .ql-tooltip input[type=text] {
  display: none;
  border: 1px solid #ccc;
  font-size: 13px;
  height: 26px;
  margin: 0;
  padding: 3px 5px;
  width: 170px;
}

.ql-snow .ql-tooltip a.ql-preview {
  display: inline-block;
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.ql-snow .ql-tooltip a.ql-action::after {
  border-right: 1px solid #ccc;
  content: "Edit";
  margin-left: 16px;
  padding-right: 8px;
}

.ql-snow .ql-tooltip a.ql-remove::before {
  content: "Remove";
  margin-left: 8px;
}

.ql-snow .ql-tooltip a {
  line-height: 26px;
}

.ql-snow .ql-tooltip.ql-editing a.ql-preview, .ql-snow .ql-tooltip.ql-editing a.ql-remove {
  display: none;
}

.ql-snow .ql-tooltip.ql-editing input[type=text] {
  display: inline-block;
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0;
  content: "Save";
  padding-right: 0;
}

.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "Enter link:";
}

.ql-snow .ql-tooltip[data-mode=formula]::before {
  content: "Enter formula:";
}

.ql-snow .ql-tooltip[data-mode=video]::before {
  content: "Enter video:";
}

.ql-snow a {
  color: #06c;
}

.ql-container.ql-snow {
  border: 1px solid #ccc;
}


@-webkit-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@-moz-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
.dropzone, .dropzone * {
  box-sizing: border-box;
}

.dropzone {
  min-height: 150px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  background: #fff;
  padding: 20px 20px;
}

.dropzone.dz-clickable {
  cursor: pointer;
}

.dropzone.dz-clickable * {
  cursor: default;
}

.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
  cursor: pointer;
}

.dropzone.dz-started .dz-message {
  display: none;
}

.dropzone.dz-drag-hover {
  border-style: solid;
}

.dropzone.dz-drag-hover .dz-message {
  opacity: 0.5;
}

.dropzone .dz-message {
  text-align: center;
  margin: 2em 0;
}

.dropzone .dz-message .dz-button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 16px;
  min-height: 100px;
}

.dropzone .dz-preview:hover {
  z-index: 1000;
}

.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}

.dropzone .dz-preview.dz-file-preview .dz-image {
  border-radius: 20px;
  background: #999;
  background: linear-gradient(to bottom, #eee, #ddd);
}

.dropzone .dz-preview.dz-file-preview .dz-details {
  opacity: 1;
}

.dropzone .dz-preview.dz-image-preview {
  background: #fff;
}

.dropzone .dz-preview.dz-image-preview .dz-details {
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -ms-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}

.dropzone .dz-preview .dz-remove {
  font-size: 14px;
  text-align: center;
  display: block;
  cursor: pointer;
  border: none;
}

.dropzone .dz-preview .dz-remove:hover {
  text-decoration: underline;
}

.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}

.dropzone .dz-preview .dz-details {
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  font-size: 13px;
  min-width: 100%;
  max-width: 100%;
  padding: 2em 1em;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
  line-height: 150%;
}

.dropzone .dz-preview .dz-details .dz-size {
  margin-bottom: 1em;
  font-size: 16px;
}

.dropzone .dz-preview .dz-details .dz-filename {
  white-space: nowrap;
}

.dropzone .dz-preview .dz-details .dz-filename:hover span {
  border: 1px solid rgba(200, 200, 200, 0.8);
  background-color: rgba(255, 255, 255, 0.8);
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
  border: 1px solid transparent;
}

.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 0 0.4em;
  border-radius: 3px;
}

.dropzone .dz-preview:hover .dz-image img {
  -webkit-transform: scale(1.05, 1.05);
  -moz-transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05);
  -o-transform: scale(1.05, 1.05);
  transform: scale(1.05, 1.05);
  -webkit-filter: blur(8px);
  filter: blur(8px);
}

.dropzone .dz-preview .dz-image {
  border-radius: 20px;
  overflow: hidden;
  width: 120px;
  height: 120px;
  position: relative;
  display: block;
  z-index: 10;
}

.dropzone .dz-preview .dz-image img {
  display: block;
}

.dropzone .dz-preview.dz-success .dz-success-mark {
  -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.dropzone .dz-preview.dz-error .dz-error-mark {
  opacity: 1;
  -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
  pointer-events: none;
  opacity: 0;
  z-index: 500;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -27px;
  margin-top: -27px;
}

.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
  display: block;
  width: 54px;
  height: 54px;
}

.dropzone .dz-preview.dz-processing .dz-progress {
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.dropzone .dz-preview.dz-complete .dz-progress {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
}

.dropzone .dz-preview:not(.dz-processing) .dz-progress {
  -webkit-animation: pulse 6s ease infinite;
  -moz-animation: pulse 6s ease infinite;
  -ms-animation: pulse 6s ease infinite;
  -o-animation: pulse 6s ease infinite;
  animation: pulse 6s ease infinite;
}

.dropzone .dz-preview .dz-progress {
  opacity: 1;
  z-index: 1000;
  pointer-events: none;
  position: absolute;
  height: 16px;
  left: 50%;
  top: 50%;
  margin-top: -8px;
  width: 80px;
  margin-left: -40px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-transform: scale(1);
  border-radius: 8px;
  overflow: hidden;
}

.dropzone .dz-preview .dz-progress .dz-upload {
  background: #333;
  background: linear-gradient(to bottom, #666, #444);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  -webkit-transition: width 300ms ease-in-out;
  -moz-transition: width 300ms ease-in-out;
  -ms-transition: width 300ms ease-in-out;
  -o-transition: width 300ms ease-in-out;
  transition: width 300ms ease-in-out;
}

.dropzone .dz-preview.dz-error .dz-error-message {
  display: block;
}

.dropzone .dz-preview.dz-error:hover .dz-error-message {
  opacity: 1;
  pointer-events: auto;
}

.dropzone .dz-preview .dz-error-message {
  pointer-events: none;
  z-index: 1000;
  position: absolute;
  display: block;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  border-radius: 8px;
  font-size: 13px;
  top: 130px;
  left: -10px;
  width: 140px;
  background: #be2626;
  background: linear-gradient(to bottom, #be2626, #a92222);
  padding: 0.5em 1.2em;
  color: #fff;
}

.dropzone .dz-preview .dz-error-message:after {
  content: "";
  position: absolute;
  top: -6px;
  left: 64px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #be2626;
}

body {
  /*font-family: 'MyCustomFont', sans-serif;*/
}