/*
	CORE CSS
*/
/* 
@font-face {
  font-family: 'Material Symbols';
  src: url('../plugins/material-icons/MaterialSymbolsOutlined-VariableFont_FILL,GRAD,opsz,wght.ttf') format('woff');
  font-weight: 100 700;
  font-style: normal;
} */


@font-face {
  font-family: 'Material Symbols';
  font-style: normal;
  font-weight: 100 700; /* Supports weight variations */
  src: url('../plugins/material-icons/font.woff2') format('woff2');
}

.core-icon {
  font-family: 'Material Symbols', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1.2em; /* Adjust size */
  line-height: inherit;
  display: inline-block;
  vertical-align: -3px;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 
    'FILL' 0, 
    'wght' 400, 
    'GRAD' 0,
    'opsz' 24;
}
.core-icon.solid {
  font-variation-settings:
    'FILL' 1,    /* filled */
    'wght' 400,  /* SAME weight as outline */
    'GRAD' 0,
    'opsz' 24;
}
.core-icon.solid2 {
  font-variation-settings: 
    'FILL' 1, 
    'wght' 400, 
    'GRAD' 0, 
    'opsz' 48;
}

.core-icon.alert-title-icon {
  color: #f90b31 !important;
  font-size: 3em;
  padding-top: 20px;
}

.core-icon.rotate-90 {
  transform: rotate(90deg);
}
.core-icon.rotate-180 {
  transform: rotate(180deg);
}
.core-icon.rotate-270 {
  transform: rotate(270deg);
}


.progress-bar.bg-warning,
.progress-bar.bg-yellow {
  background: linear-gradient(45deg, rgba(255, 184, 0, 1), rgba(255, 166, 0, 1), rgba(255, 0, 128, 1));
}


.core-icon.core-icon-pulse {
  animation: icon-pulse 3s ease-in-out infinite;
}

@keyframes icon-pulse {
  0% {
    font-variation-settings: 'wght' 100;
  }
  50% {
    font-variation-settings: 'wght' 400;
  }
  100% {
    font-variation-settings: 'wght' 100;
  }
}

.core-icon.core-icon-spin,
.core-icon.fa-spin {
  -webkit-animation: core-icon-spin 0.75s infinite linear;
  animation: core-icon-spin 0.75s infinite linear;
}

.core-icon.core-icon-spin.reversed {
  -webkit-animation: core-icon-spin 0.55s infinite linear reverse;
  animation: core-icon-spin 0.55s infinite linear reverse;
}

.core-icon-stack .core-icon.core-icon-spin.reversed {
  -webkit-animation: core-spin-stack-reversed 0.55s infinite linear reverse;
  animation: core-spin-stack-reversed 0.55s infinite linear reverse;
}

.core-icon-stack {
  position: relative;
}

.core-icon-stack .core-icon {
  position: absolute;
  z-index: 1; /* Ensures the second icon appears on top */
}

.core-icon-stack .core-icon.core-icon-spin.reversed {
  z-index: 2 !important; /* Ensures the first icon appears on the bottom */
}

@-webkit-keyframes core-icon-spin {
  0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100% {
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
  }
}
@keyframes core-icon-spin {
  0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100% {
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
  }
}

@keyframes core-spin-stack-reversed {
  from {
      transform: rotate(0deg) scale(0.65);
  }
  to {
      transform: rotate(360deg) scale(0.65);
  }
}

.core-icon.core-icon-animate-rotate {
  transition: transform 0.2s ease-in-out;
}
.core-icon.core-icon-animate-rotate:hover {
  transform: rotate(360deg);
}



#overlay,
.spinnerOverlay {
	width:100%;
	height:100%;
	position:fixed;
	display:block;
	top:0px;
	left:0px;
	background:rgba(245,245,245,0.88) !important;
	padding:10%;
	color:rgb(0,0,0);
	text-align:center;
	font-size:60px;
	z-index:999999999999999999999999;
}
#overlay i,
#overlay .fa,
.spinnerOverlay i,
.spinnerOverlay .fa {
	font-size:100px;
}

body .modal-xl {
	width:95% !important;
}

body .modal-md {
	width:70% !important;
}

#CoreAdminOpen {
	display:block;
	position:fixed;
	bottom:5px;
	right:5px;
	background:black;
	color:white;
	padding:2px 6px;
	border-radius:50%;
	cursor:pointer;
}
#CoreAdminOpen.inDEBUG {
	background:red;
}
@media print {
	#CoreAdminOpen {
		display:none;
	}
}

a.btn {
	text-decoration: none !important;
}
.coreRenderInventory {
	cursor:pointer;
}
.coreCartTable {

}
.margin-right-5 {
	margin-right:5px;
}
/*
@media (min-width: 992px){
	.modal-xl {
		width: 900px;
	}
}
*/


#coreChatIcon {
	display:block;
	position:fixed;
	bottom:5px;
	right:40px;
	background:black;
	color:white;
	padding:3px 6px;
	border-radius:50%;
	cursor:pointer;
  z-index:998;
}
#coreChatWindow {
	display:block;
	position:fixed;
  border:rgb(199,199,199) 1px solid;
  width:400px;
  height:500px;
  max-width:100%;

	bottom:5px;
	right:5px;
	background:white;
	color:black;
	padding:0px;
	border-radius:5px;
  z-index:999;
  overflow:hidden;
}
#coreChatIconClose {
  cursor:pointer;
}

#coreChatWindow .header {
	display:block;
	position: relative;
  width:100%;
  height:35px;
  padding:5px 10px;
  background:black;
  color:white;
  text-align: left;
}

#coreChatWindow .body {
	
	position: relative;
  width:100%;
  height:285px;
  font-size: 14px;
  padding:5px 10px;
  background:white;
  color:black;
  text-align: left;
  overflow-x:hidden;
  overflow-y: scroll;
}

#coreChatWindow .customMessages {
  line-break: normal !important;
  white-space: nowrap !important;
	display: block;
	position: relative;
  width: 100%;
  height: 35px;
  font-size: 14px;
  padding:5px 10px;
  background:white;
  color:black;
  text-align: left;
  overflow-y: hidden;
  overflow-x: scroll !important;
  
}

#coreChatWindow .footer {
	display: block;
	position: relative;
  width:100%;
  height:100px;
  padding:5px 10px;
  background:rgb(245,245,245);
  color:black;
  text-align: left;
  border:rgb(209,209,209) 1px solid;
}
#coreChatWindow .body .outgoing,
#coreChatWindow .body .incoming {
  border-radius: 20px;
  text-wrap: wrap;
  padding:10px;
  margin:5px;
  overflow-wrap: break-word;
}
#coreChatWindow .body .incoming {
  background:rgb(234, 236, 236);
  color:black;
  width:80%;
}

#coreChatWindow .body .outgoing {
  background:#007AFF;
  color:white;
  width:80%;
  margin-left:20%;
}





.notification {
  width:350px;
  position:fixed;
  box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
  background: #E5E5EB;
  border:1px solid #C5C5C8;
  cursor:pointer;
  color:#222223;
  opacity: 0.95;
  padding:15px 10px !important;
  font-size:12px !important;
  display:block;
  user-select: none !important;
  -webkit-user-select:none !important;
  cursor:pointer;
  -webkit-border-radius: 15px !important;
  -moz-border-radius: 15px !important;
  border-radius: 15px !important;

  z-index:9999999999999999999999999999999;
}

html.dark-mode .notification {
  background-color: #313239;
  border:1px solid #515157;
  color:#EBEBEB;
}

.notification img {
  margin:0px 5px;
}

.notification.standard {
  min-height:35px;
  top:15px;
  right:10px;
  padding:15px 10px;
  margin:0px;
  border-radius: 4px;
}
.notification.standard.error {
  background:rgb(190,0,0);
  color:#FFFFFF;
  font-size:14px !important;
}
.notification-left {
  float:left;
  margin-right:9px;
  padding:0px 2px;
  width:32px;
}
.notification-right {
  float:left;
  width:285px;
}
.notification img {
  width:100%;
  max-width:100%;
}
.notification p {
  margin:0px;
}
.notification strong {
  display:block;
}
.notification {
  animation-duration: 0.5s;
}
.notification .closeNotificationIcon {
  display: block;
  position: absolute;
  left: -10px;
  top: -10px;
  border-radius: 50%;
  line-height: 1em;
  padding: 5px 8px;
  background-color: #313239;
  border:1px solid #515157;
  color:#EBEBEB;
  transition: opacity .3s;
  opacity: 0;
}
.notification:hover .closeNotificationIcon {
  opacity:1;
}
.notification.nonIntrusive {
  bottom:0px;
  left:50%;
  margin-left:-175px;
  padding:10px 10px;
}

.toggle.btn {
  height: 20px !important;
}
.toggle,
.toggle .btn-default {
  border:1px solid #64686A !important;
  background-color: #464B4D !important;
}
.toggle, .toggle-on, .toggle-off { 
  border-radius: 20rem !important;
}
.toggle .toggle-handle { 
  border-radius: 20rem !important;
  background-color: #CBCDCD !important;
}
.toggle.off .toggle-group{
  left:-100% !important;
}

.devBadge {
  display: inline-block;
  position: fixed;
  top: 0px;
  left: 50%;
  max-width: 100% !important;
  word-break: break-word !important;
  white-space: normal !important;
  background-color: #ff0039;
  padding: .4em .99em;
  font-weight: bold;
  font-size:12px;
  line-height: 1;
  color: #ffffff;
  text-align: center;
  vertical-align: baseline;
  border-radius:0px;
  -webkit-border-bottom-right-radius: 7px;
  -webkit-border-bottom-left-radius: 7px;
  -moz-border-radius-bottomright: 7px;
  -moz-border-radius-bottomleft: 7px;
  border-bottom-right-radius: 7px;
  border-bottom-left-radius: 7px;
  z-index:9999;
  cursor:pointer !important;
}

.coreCopyTooltip {
  position: absolute;
  background: black;
  color: white;
  border: solid 1px rgb(68, 66, 66);
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 9999; /* Ensures it appears above all other elements */
  top: 0; /* Adjust to place it at the top */
  left: 50%; /* Center horizontally (adjust as needed) */
  transform: translateX(-50%); /* Adjust positioning to be exactly centered */
}
.alert-primary {
  background: #1683fb;
  color: #ffffff;
}
.alert-pink {
  background: #ef017c;
  color: #ffffff;
}