/* force overwrite link color. widgets make links color grey. */
.et_pb_widget a{
	color:#2EA3F2 !important;
}

/*cannot just use "p" below. messes with wordpress alignment. be more specific by class.*/


.svg { width: 16px; 
  height: 16px; 
  stroke: #333; 
  stroke-width: 2.5; 
  /* increase for more bold */ 
}

.svg.delete, .svg.flag{
	fill:red;
}

.svg.checked{
	fill:green;
}

.svg.telegram{
  fill:lightblue;
}

.svg.bug{
	fill:white;
	background-color:red;
}

.svg.star{
	fill:darkgoldenrod;
  animation: bounce-glow 1s ease forwards;
}

/* Keyframes for bounce + glow */
@keyframes bounce-glow {
  0% {
    transform: translateY(0);
    filter: drop-shadow(0 0 0px green);
    opacity: 0;
  }
  50% {
    transform: translateY(-8px);
    filter: drop-shadow(0 0 8px limegreen);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    filter: drop-shadow(0 0 0px green);
    opacity: 1;
  }
}


/*SVG sizes*/
.svg.big{
	width:160px;
	height:160px;
}

.svg.mid{
	width:50px;
	height:50px;
}

.spaceit{
	padding:0.5em 0.5em 0.5em 0.5em;
  margin-top:5px;
  margin-bottom:5px;
}
	  
/*------------------[GLOBAL USAGE]--------------*/


.inputtext, .inputtextnarrow, .inputtextqty{
	height:30px;
}

.inputtext{
	width:100%;
}

.inputtextnarrow{
	width:200px;
}

input[type="text"]{
  height: 3em;
}

input[type="text"], textarea{
	padding:3px 3px !important;
  color:black;
  font-weight:bold;
}

.inlineinput {
    width: 100%;
    max-width: 450px; /* Desktop upper limit */
    height: 3em;
    box-sizing: border-box;
}

/* Tablet */
@media (max-width: 992px) {
    .inlineinput {
        max-width: 350px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .inlineinput {
        max-width: 100%;
        height: 2.6em; /* Slightly shorter if you prefer */
        font-size: 0.95em;
    }
}


::placeholder{
  color:grey;
  font-weight:normal !important;
  text-align: center;
}

/* Clearable input field styles */
/* Base input */
.clearable {
  padding-right: 12px;
  transition: padding-right 0.2s ease;
}

/* When input has value — show X icon + add more padding */
.clearable.hasValue {
  padding-right: 32px; /* creates space for the X */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999'><path d='M3.3 3.3l9.4 9.4m0-9.4l-9.4 9.4' stroke='%23999' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  cursor: text; /* normal cursor by default */
}

/* Cursor becomes pointer ONLY over the X area */
.clearable.hasValue.pointer {
  cursor: pointer;
}

.frame{
  border-style: dotted;
  border-width: 1px;
  border-color: grey;
  margin: 10px 3px;
  padding: 10px 5px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}


.blink {
  animation: blink-animation 2s ease-in-out infinite;
  color: red;
}

@keyframes blink-animation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.hidden{
	display:none;
}

.serial{
	/*letter-spacing:10px;*/
	text-align:center;
	font-family:"Courier New", Courier, monospace;
	font-weight:bold;
}

.serial.medium{
  font-size:1.5em;
}

.serial.big{
  font-size:3em;
}

.numeric{
  font-family:"Courier New", Courier, monospace;
}


input:required{
	border-color:#F90 !important;
	border-width:medium !important;
}

/* DISPLAY PRODUCTS for ORDER SHOPPING CART - BEGIN */

#productsearch{
	border-color:#2EA3F2;
	border-width:2px;
}

.tabular{
	display:table;
}

.tabular-row{
	display:table-row;
}

.tabular-cell{
	display:table-cell;
}

/*No Select - disable user from selecting an element on the page.*/
.no_select{
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.button{

  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 10px;
  background-color: #fff;
  cursor: pointer;
  /*font-size: 16px;*/
  text-align: center;
  box-shadow: 0 2.5px 5px rgba(0, 0, 0, 0.2);
  margin:5px;

 	
	/*by default buttons shouldn't be selected. no_select will be for non-buttons.*/
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.button:hover {
  background-color: #2EA3F2;
  color: #fff;
}

/*increment button when on mobile, pressing the button wii causes the button to be colored permanently. So this hover will fix it.*/
@media (max-width: 768px) {
  .button:hover {
    background-color: #fff;
    color:#666;
  }
}



.button:active {
  background-color: #fff;
}

.button:focus {
  outline: none;
}

.button .icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

.button .value {
  display: inline-block;
  vertical-align: middle;
  font-weight: bold;
}

.button:active .icon,
.button:active .value {
  opacity: 0.5;
}

.button.big{
	font-size:2em;
}

.button.small{
	padding:0em 0.5em 0em 0.5em;
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #000000;
    font-size: 0.85rem;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    border-top: 0.5px solid #000000;
}

.divider span {
    padding: 0 0.75rem;
    white-space: nowrap;
}

input[type="submit"] {
  display: inline-block;
  padding: 7px 14px;
  margin: 5px; /* match .button spacing */
  background-color: #F36C8C;
  border: 1px solid #F36C8C;
  border-radius: 4px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2.5px 5px rgba(0, 0, 0, 0.2); /* match .button */
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Hover — darken, keep white text visible */
input[type="submit"]:hover {
  background-color: #d95374;
  color: #fff;
}

/* Mobile fix for hover “sticking” */
@media (max-width: 768px) {
  input[type="submit"]:hover {
    background-color: #F36C8C;
    color: #fff;
  }
}

/* Active */
input[type="submit"]:active {
  background-color: #F36C8C;
  opacity: 0.8;
}

/* No outline glow */
input[type="submit"]:focus {
  outline: none;
}


.success, .warning, .notice {
  font-weight: bold;
  color: white;
  text-shadow: none;
  margin: 0.5em 0.5em 0em 0.5em;
  padding: 0.5em 1em;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.success{
    background-color:#4CAF50;
}

.wa-toast {
    position: fixed;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%) translateY(30px) scale(0.92);
    
    /* ⚡ electric cyan → vivid blue */
    background: linear-gradient(135deg, #22D3EE, #0EA5E9);

    color: #ffffff;
    padding: 12px 18px;
    border-radius: 999px;

    font-size: 1.5em;
    font-weight: 600;
    letter-spacing: 0.2px;

    white-space: nowrap;

    opacity: 0;
    pointer-events: none;

    /* ⚡ deeper, layered glow */
    box-shadow: 
        0 10px 28px rgba(14,165,233,0.45),
        0 0 0 rgba(34,211,238,0);

    /* subtle glass highlight */
    position: fixed;
    overflow: hidden;

    transition: all 0.25s cubic-bezier(.2,.8,.2,1);
    z-index: 9999;
}

/* ⚡ glass shine layer */
.wa-toast::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.25),
        rgba(255,255,255,0.05) 40%,
        transparent 60%
    );
    pointer-events: none;
}

/* ⚡ show state */
.wa-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);

    animation: toastPop 0.25s ease, glowPulse 0.7s ease;
}

/* ⚡ pop */
@keyframes toastPop {
    0% { transform: translateX(-50%) translateY(12px) scale(0.88); }
    100% { transform: translateX(-50%) translateY(0) scale(1); }
}

/* ⚡ electric glow pulse */
@keyframes glowPulse {
    0% {
        box-shadow: 
            0 0 0 rgba(34,211,238,0),
            0 0 0 rgba(14,165,233,0);
    }
    50% {
        box-shadow: 
            0 0 18px rgba(34,211,238,0.9),
            0 0 36px rgba(14,165,233,0.7),
            0 12px 32px rgba(14,165,233,0.6);
    }
    100% {
        box-shadow: 
            0 10px 28px rgba(14,165,233,0.45),
            0 0 0 rgba(34,211,238,0);
    }
}

/* ⚡ timer bar (brighter + sharper) */
.wa-toast::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: rgba(255,255,255,0.85);
    transform: scaleX(1);
    transform-origin: left;
}

.wa-toast.show::after {
    animation: toastTimer 1.2s linear forwards;
}

@keyframes toastTimer {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ⚡ your improved hybrid highlight (already good) */
.copy-flash {
    animation: copyHybrid 1s ease;
}

@keyframes copyHybrid {
    0% {
        background-color: rgba(56,189,248,0.10);
        box-shadow: 0 0 0 rgba(56,189,248,0);
    }
    50% {
        background-color: rgba(14,165,233,0.14);
        box-shadow: 
            0 0 14px rgba(0,191,255,0.7),
            0 0 28px rgba(56,189,248,0.4);
    }
    100% {
        background-color: transparent;
        box-shadow: 0 0 0 rgba(56,189,248,0);
    }
}

.warning{
	background-color:#900;
}

.notice{
  background-color:#FFFF00;
  color:black;
}

.show {
  opacity: 1;
  transform: translateY(0);
}

.page-titles{
  font-size: 2em;   
  color: #ff6600;
  background-color: #f8f8f8;
  padding: 10px 20px;
  border-left: 8px solid #ff6600;
  margin-left: -10px;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
}

/*pricetag BEGIN https://codepen.io/Magnilucent/pen/DoBtx*/
.pricetag {
  display: inline-block;
  
  width: auto;
  height: 38px;
  
  /*background-color: #979797;*/
  background-color: #c81e2b;
  -webkit-border-radius: 3px 4px 4px 3px;
  -moz-border-radius: 3px 4px 4px 3px;
  border-radius: 3px 4px 4px 3px;
  
  border-left: 1px solid #c81e2b;

  /* This makes room for the triangle */
  margin-left: 19px;
  
  position: relative;
  
  color: white;
  /*font-weight: 300;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 22px;*/
  line-height: 38px;

  padding: 0 10px 0 10px;
}

/* Makes the triangle */
.pricetag:before {
  content: "";
  position: absolute;
  display: block;
  left: -19px;
  width: 0;
  height: 0;
  border-top: 19px solid transparent;
  border-bottom: 19px solid transparent;
  border-right: 19px solid #c81e2b;
}

/* Makes the circle */
.pricetag:after {
  content: "";
  background-color: white;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  display: block;
  position: absolute;
  left: -9px;
  top: 17px;
}
/*pricetag END*/


/* MEMBER FOUND AJAX LISTING
------------------------------------------------------------------------------------------------------------------------------- */

.membersfound-wrap{
  width:100%;
  margin:8px 0px;
}

.membersfound{
  width:100%;
  border-collapse:separate;
  border-spacing:0px 8px;
}

.membersfound tr{
  background:#ffffff;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.membersfound tr:hover{
  background:#f7fbff;
  box-shadow:0 3px 10px rgba(46, 163, 242, 0.18);
  transform:translateY(-1px);
}

.membersfound td{
  vertical-align:top;
  padding:10px 12px;
  border-top:1px solid #dce7f1;
  border-bottom:1px solid #dce7f1;
  line-height:1.45em;
}

.membersfound td:first-child{
  border-left:4px solid #2EA3F2;
  border-radius:5px 0px 0px 5px;
}

.membersfound td:last-child{
  border-right:1px solid #dce7f1;
  border-radius:0px 5px 5px 0px;
}

.mcol_napi{
  width:32%;
  max-width:280px;
}

.mcol_contact{
  width:24%;
  white-space:nowrap;
}

.mcol_email{
  width:44%;
}

.mf-name{
  color:#111;
  font-weight:bold;
  font-size:1.05em;
  margin-bottom:4px;
}

.mf-nickname{
  color:#777;
  font-weight:normal;
}

.mf-id{
  display:inline-block;
  color:#666;
  background:#eef6fd;
  border:1px solid #cfe7fa;
  border-radius:999px;
  padding:1px 7px;
  font-size:0.85em;
  font-weight:bold;
}

.mf-muted{
  color:#999;
  font-style:italic;
  font-weight:normal;
}

.mf-address{
  color:#555;
}

.membersfound-count,
.mf-autoload{
  color:#666;
  font-size:0.9em;
  margin:6px 0px;
}

@media only screen and (max-width: 640px){
  .membersfound,
  .membersfound tbody,
  .membersfound tr,
  .membersfound td{
    display:block;
    width:100%;
  }

  .membersfound{
    border-spacing:0px;
  }

  .membersfound tr{
    margin:8px 0px;
    border:1px solid #dce7f1;
    border-left:4px solid #2EA3F2;
    border-radius:5px;
    box-shadow:0 2px 5px rgba(0,0,0,0.08);
  }

  .membersfound td{
    border:0px none;
    padding:8px 10px;
  }

  .membersfound td:first-child,
  .membersfound td:last-child{
    border:0px none;
    border-radius:0px;
  }

  .mcol_napi,
  .mcol_contact,
  .mcol_email{
    max-width:none;
    white-space:normal;
  }
}

/* CUSTOMER RAW DETAILS get_user_raw_details($increment)
------------------------------------------------------------------------------------------------------------------------------- */

#customer_raw_details_form{
  padding:10px;
  border:1px dashed #999;
  border-radius:5px;
  background:#fff;
}

.customer-detail-alerts{
  color:red;
  font-weight:bold;
  margin-bottom:10px;
  line-height:1.8em;
}

.customer-detail-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:5px 0px;
  flex-wrap:wrap;
}

.customer-detail-label{
  width:18%;
  min-width:145px;
  padding-top:7px;
  font-weight:bold;
  color:#444;
}

.people_searched{
  width:100%;
  max-width:420px;
  margin:0px !important;
  box-sizing:border-box;

  border:1px solid #d8e1ea !important;
  border-radius:4px;
  background:#fff;
  padding:6px 8px !important;

  color:#111;
  font-weight:bold;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.people_searched.short{
  max-width:180px;
}

.people_searched.medium{
  max-width:320px;
}

.people_searched.long{
  max-width:720px;
}

textarea.people_searched,
.people_searched.address{
  max-width:720px;
}

textarea.people_searched{
  min-height:170px;
  line-height:1.45em;
}

.people_searched:hover{
  border-color:#b7d7f0 !important;
  background:#fbfdff;
}

.people_searched:focus{
  border-color:#2EA3F2 !important;
  box-shadow:0 0 0 2px rgba(46,163,242,0.14);
  background:#fff;
  outline:none;
}

.people_searched[readonly]{
  background:#f7f9fb;
  color:#555;
  border-color:#e3e8ee !important;
}


.customer-detail-note{
  width:100%;
  margin-left:calc(18% + 8px);
  color:#666;
  font-size:0.9em;
}

.customer-action-panel{
  margin-top:12px;
}

#verify_status{
  padding-top:20px;
}

#admincommentstextarea{
  padding-bottom:10px;
}

@media only screen and (max-width: 640px){
  .customer-detail-row{
    display:block;
  }

  .customer-detail-label{
    display:block;
    width:95%;
    min-width:0px;
    padding-top:10px;
  }

  .people_searched,
  .people_searched.short,
  .people_searched.medium,
  .people_searched.long,
  .people_searched.address,
  textarea.people_searched{
    width:100%;
    max-width:100%;
  }

  .customer-detail-note{
    margin-left:0px;
  }
}

/**********************************************
 COMPACT MEMBER MATCH match_user() */
/* relaxed but still glanceable */
.member-match-compact{
  width:100%;
  border-collapse:collapse;
  margin:6px 0px 10px 0px;
  font-size:0.95em;
  line-height:1.35em;
}

.member-match-compact td{
  vertical-align:top;
  padding:4px 6px !important;
  border-bottom:1px dotted #ddd;
}

.member-match-compact .mm-section td{
  padding-top:8px !important;
  padding-bottom:4px !important;
  color:#444;
  font-weight:bold;
  border-bottom:1px solid #bbb;
  background:#f8f8f8;
}

.member-match-compact .mm-label{
  width:115px;
  color:#666;
  font-weight:bold;
  white-space:nowrap;
}

.member-match-compact .mm-map{
  width:55px;
  white-space:nowrap;
}

.member-match-compact .mm-user{
  font-family:"Courier New", Courier, monospace;
  font-style:italic;
  color:#111;
}

.member-match-compact .mm-db{
  color:#333;
}

.member-match-compact .mm-ok{
  color:green;
  font-weight:bold;
}

.member-match-compact .mm-bad{
  color:#900;
  font-weight:bold;
}

.member-match-compact .mm-muted{
  color:#999;
}

/* top summary */
.member-summary-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(220px, 1fr));
  gap:4px 18px;
  margin:6px 0px 10px 0px;
  padding:8px 10px;
  border:1px solid #ddd;
  background:#fafafa;
}

.member-summary-item{
  display:grid;
  grid-template-columns:115px 1fr;
  gap:6px;
  min-width:0;
}

.member-summary-label{
  color:#666;
  font-weight:bold;
  white-space:nowrap;
}

.member-summary-value{
  min-width:0;
  word-break:break-word;
}

@media only screen and (max-width:640px){
  .member-summary-grid{
    grid-template-columns:1fr;
  }

  .member-summary-item{
    grid-template-columns:105px 1fr;
  }
}

/* ADMIN COMMENTS RESPONSIVE SUMMARY
------------------------------------------------------------------------------------------------------------------------------- */

.admin-comments-summary{
  width:100%;
  border-collapse:collapse;
}

.admin-comments-summary td{
  vertical-align:top;
  padding:2px 6px 2px 0px;
}

.admin-comments-summary .admin-comments-label{
  white-space:nowrap;
  color:#666;
  font-weight:bold;
}

.admin-comments-summary .admin-comments-value{
  padding-right:18px;
}

@media only screen and (max-width:640px){
  .admin-comments-summary,
  .admin-comments-summary tbody,
  .admin-comments-summary tr,
  .admin-comments-summary td{
    display:block;
    width:100%;
  }

  .admin-comments-summary tr{
    padding:5px 0px;
    border-bottom:1px dotted #ddd;
  }

  .admin-comments-summary td{
    padding:1px 0px !important;
  }

  .admin-comments-summary .admin-comments-label{
    color:#777;
    font-size:0.85em;
    line-height:1.2em;
  }

  .admin-comments-summary .admin-comments-value{
    padding-right:0px;
    margin-bottom:5px;
    word-break:break-word;
  }

  .admin-comments-summary .admin-comments-label:empty,
  .admin-comments-summary .admin-comments-value:empty{
    display:none;
  }
}




/*process_verified()*/
.verified_0 { fill: red; }
.verified_1 { fill: green; }

/* ================================
   Cart Promo Summary (Card Style)
   ================================ */

.cart-promo-wrapper {
    background: #fff7e6;
    border: 1px solid #ffcf75;
    border-radius: 10px;
    padding: 4px 8px; /* smaller when collapsed */
    margin:10px 0px;
    transition: padding 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    display: inline-block;     /* shrink to fit content */
    width: auto;               /* auto width when closed */
    max-width: 100%;           /* prevent overflow */
}

/* Header title (click to toggle) */
.cart-promo-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    padding: 6px 0;
}

/* Content wrapper (animated) */
.cart-promo-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease;
}

.cart-promo-wrapper.open {
    padding: 14px 16px; /* bigger when expanded */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: block;
    width: 100%;
}

/* When expanded */
.cart-promo-wrapper.open .cart-promo-content {
    max-height: 1000px; /* enough to show all cards */
    margin-top: 12px;
}

/* Card-style promo box */
.cart-promo-box {
    background: #fffefb;
    border: 1px solid #ffe2a9;
    border-radius: 10px;
    padding: 12px 15px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow 0.2s, transform 0.2s;
}

.cart-promo-box:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* Tag */
.cart-promo-tag {
    background: #ffb300;
    color: #fff;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 6px;
    width: fit-content;
}

/* Product name */
.cart-promo-name {
    font-weight: 500;
    font-size: 0.95rem;
    overflow-wrap: break-word;
}

/* Price container */
.cart-promo-pricing {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Old price */
.cart-promo-old {
    color: #888;
    text-decoration: line-through;
    font-size: 0.85rem;
}

/* Promo price */
.cart-promo-new {
    color: #c62828;
    font-weight: 700;
    font-size: 0.95rem;
}

/* Discount */
.cart-promo-discount {
    background: #c62828;
    color: #fff;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: bold;
}

.cart-promo-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        max-height 0.45s ease,
        opacity 0.35s ease;
}

.cart-promo-wrapper.open .cart-promo-content {
    max-height: 1000px; /* enough height for full content */
    opacity: 1;
    margin-top: 12px;
}


/* Responsive: Desktop horizontal layout */
@media (min-width: 768px) {
    .cart-promo-box {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .cart-promo-name {
        flex: 1;
        margin: 0 12px;
    }
}



/* AJAX LOADERS - BEGIN */

/*http://blog.pexels.com/css-only-loaders/*/
.ajax-loader {
  height: 4px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #ddd;
}
.ajax-loader:before{
  display: block;
  position: absolute;
  content: "";
  left: -200px;
  width: 200px;
  height: 4px;
  background-color: #2980b9;
  animation: loading 2s linear infinite;
}

@keyframes loading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
}


.ajax-loader-fam{
	width:16px;
	height:16px;
	display:inline-block;
	background-image:url(/images/ajax_loader_fam.gif);
}

.outerglow {
  box-shadow: 0 0 6px 2px rgba(81, 203, 238, 0.75);
  border: 1px solid rgba(81, 203, 238, 0.9);
  transition: all 0.3s ease-in-out;
  outline: none;
}

.outerwarn {
  box-shadow: 0 0 6px 2px rgba(255, 0, 0, 0.6);
  border: 1px solid rgba(255, 0, 0, 0.9);
  transition: all 0.3s ease-in-out;
  outline: none;
}


.onpromotion{
  font-size:0.8em;
  padding-left:3px;
  padding-right:5px;
  /*text-decoration:blink;*/
  font-weight:bold;
  color:red;
}

.onpromotion a{
  color:red;
  font-weight:bold;
  text-decoration:underline;
}

.promo_highlight{
  /*container*/
  box-shadow: 0 0 10px #FFDD00;
  border: 3px solid #FFDD00 !important;
  /*pattern design*/
  background: repeating-linear-gradient(
  -55deg,
  #ffe14d,
  #ffdd33 100px,
  #ffd91a 130px,
  #FFD600 150px
);
}

.clearance_highlight {
  /*container*/
  box-shadow: 0 0 10px #FFDD00, 0 0 10px #FFF000; /* Adding a red shadow */
  border: 3px solid #FFDD00 !important; /* Yellow border */
  /*pattern design*/
  background: repeating-linear-gradient(
    -55deg,
    #fff14d,
    #fffd33 100px,
    #fff91a 130px,
    #FFf600 150px,
    #fff666 180px /* Red added here */
  );
}


.specialprice_highlight{
  /*container*/
  box-shadow: 0 0 10px #0C0;
  border: 3px solid #0C0 !important;
  /*pattern design*/
  background: repeating-linear-gradient(
  -55deg,
  #33FF33,
  #66FF66 100px,
  #99FF99 130px,
  #CCFFCC 150px
);
}

.rounded_corners{
  border-radius: 15px;
}

/* it that isn't a link now looketh like a link */
.linky{
	cursor:pointer;
	color:#2EA3F2;
	font-weight:600;
}

.linky:hover{
	text-decoration:underline;
}

.nolinky{
  cursor:default;
  color:#94949488;
  font-weight:normal;
  text-decoration:none;
}

.pointy{
	cursor:pointer;
}

.helpy{
	cursor:help;
}

.helpy::after{
	content:" [?]";
	color:gray;
	font-size:10px;
	font-weight:100;
}

.slashable{
  text-decoration:line-through;
  color:#999;
  /*font-size:10px;*/
  font-weight:normal !important; /*overwrite tag_action*/

  text-decoration: line-through; /* Add a strikethrough */
  text-decoration-color: grey; /* Change the strikethrough color */
  text-decoration-thickness: 2px; /* Increase the strikethrough thickness */
  text-decoration-skip-ink: none; /* Prevent ink bleed at strikethrough points */
}
.slashable:hover{
    font-size:inherit;
    color:black;
}

/*https://stackoverflow.com/questions/34141950/how-to-use-tick-checkmark-symbol-instead-of-bullets-in-unordered-list*/
.benefits li:before{
  /*content:"✓ ";*/
  content:"\2714\0020";
}

.benefits li{
  list-style: none;
}

[contenteditable="true"]::before{
/*	content:"[Editable] ";*/
	color:#900;
  font-size:8px; /*divi visual builder has these contenteditable too, which triggers this ::before thing*/
	display:block;
}

.localhost::before{
	content:"Localhost: ";	
}

.standout{
	font-weight:bold;
	font-style:italic;
	color:red;
}

/* CUSTOMER messages – clear and slightly more prominent */
.customer_said {
  color: #111;         /* darker black */
  font-weight: 500;
  font-size: 1.1em;    /* slightly bigger */
  font-style: oblique;
  margin-left: 0;      /* left-aligned, main speaker */
}

/* ADMIN messages – subdued and indented */
.admin_said {
  color: #777;         /* soft gray */
  font-weight: normal;
  font-size: 0.9em;
  margin-left: 20px;   /* indentation preserved */
  font-style: normal;
}


.date-box {
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background-color: #f9f9f9;
  color: #333;
  font-weight: bold;
  font-size: 16px;
  margin:0px 10px;
}

.warning-box {
  background-color: #ffe8e8; /* Light red background */
  border: 1px solid #f44336; /* Red border */
  color: #f44336; /* Red text */
  padding: 10px; /* Add some padding to the box */
  margin:0px 10px;
}

.g_picture {
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #ffffff;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
    display: inline-block;
    max-width: 100px; /* optional */
}

/*order now button that displays on almost every webpage (except home page) */
.order_now{
	width:100%; 
	/*max-width:600px; */
	padding:20px; 
  margin:20px 0px 20px 0px;
  border-left:#2ea3f2 12px solid;
	
	/*https://learn.shayhowe.com/advanced-html-css/transitions-animations/*/
	/*change background color when hovered*/
	transition-property: background;
	transition-duration: 1s;
	transition-timing-function: linear;
}

.order_now .svg{
	fill:#2ea3f2;
}

.order_now .right{
	max-width:500px;
	vertical-align:bottom;
	width:100%;
}

.order_now .link{
  padding:10px 3px 0px 3px;
	font-size:1.2em;
	text-decoration:none; 
	color:#2ea3f2;
}

/* naked table - overriding Divi table formatting. BEGIN */
.naked_table, .naked_table td{ 
	margin:0px !important;
	padding:0px !important;
	max-width:none !important;
	border:0px none !important;
	width:auto !important;
}

.naked_table td{
	padding-left:5px !important;
}

.ordinal {
  font-size: smaller;
  position: relative;
  top: -0.5em;
}

/* REPORT BUG
------------------------------------------------------------------------------------------------------------------------------- */

.report-bug-wrap{
  width:100%;
  max-width:720px;
  padding:12px;
  border:1px solid #d8e1ea;
  border-radius:6px;
  background:#fff;
  box-sizing:border-box;
}

.report-bug-row{
  margin-bottom:10px;
}

.report-bug-row label{
  display:block;
  margin-bottom:4px;
  color:#444;
  font-weight:bold;
}

.report-bug-row input,
.report-bug-row textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #d8e1ea !important;
  border-radius:4px;
  padding:8px !important;
}

.report-bug-row textarea{
  min-height:180px;
  line-height:1.45em;
}

.report-bug-row input:focus,
.report-bug-row textarea:focus{
  border-color:#2EA3F2 !important;
  box-shadow:0 0 0 2px rgba(46,163,242,0.14);
  outline:none;
}

.report-bug-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

#report_bug_submit:disabled{
  opacity:0.65;
  cursor:wait;
}

@media only screen and (max-width:640px){
  .report-bug-wrap{
    padding:10px;
  }

  .report-bug-row textarea{
    min-height:150px;
  }

  .report-bug-actions input[type="submit"]{
    width:100%;
    margin-left:0px;
    margin-right:0px;
  }
}

/* ADMIN NAVIGATION navadmin()
------------------------------------------------------------------------------------------------------------------------------- */

.navadmin{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4, minmax(160px, 1fr));
  gap:10px;
  margin:10px 0px 14px 0px;
}

.navadmin-section{
  background:#fff;
  border:1px solid #d8e1ea;
  border-radius:6px;
  padding:10px;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
}

.navadmin-section h4{
  margin:0px 0px 8px 0px;
  padding-bottom:5px;
  border-bottom:1px solid #eef2f5;
  color:#444;
  font-size:1em;
}

.navadmin a{
  display:block;
  padding:5px 6px;
  margin:1px 0px;
  border-radius:4px;
  color:#2EA3F2;
  font-weight:600;
  text-decoration:none;
}

.navadmin a:hover{
  background:#f0f8ff;
  text-decoration:none;
}

.navadmin a:focus{
  outline:2px solid rgba(46,163,242,0.35);
  outline-offset:1px;
}

@media only screen and (max-width:1024px){
  .navadmin{
    grid-template-columns:repeat(2, minmax(160px, 1fr));
  }
}

@media only screen and (max-width:640px){
  .navadmin{
    grid-template-columns:1fr;
    gap:8px;
  }

  .navadmin-section{
    padding:8px;
  }

  .navadmin a{
    padding:8px 6px;
  }
}



/* COLORIZE ARTICLES BEGIN--------------------------------------------------------------------------------------------------------- */
.cz.em{
  font-size:1.3em;
}

.cz.i{
  font-style:italic;
}

.cz.b{
  font-weight:bold;
  /* learning creative underline from kidocode.com sourcecode */
  /*background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAxMTkgNiI%2BPHBhdGggZD0iTTExOSAzLjhjLTYwIDIuNS0zMy41LTctMTE5IDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzNjYjM3MCIgc3Ryb2tlLXdpZHRoPSIyIi8%2BPC9zdmc%2B) bottom/1em 28% repeat-x;
  padding-bottom: 9px;
  position: relative;*/
}

.cz.red{
  color:red;
  /*filter: hue-rotate(-153deg);*/
}

.cz.blue{
  color:mediumblue;
  /*filter: hue-rotate(60deg);*/
}

.cz.orange{
  color:orange;
}

.cz.green{
  color:green;
  /*filter: hue-rotate(0deg);*/
}

.cz.gold{
  color:goldenrod;
}

.cz.pink{
  color:pink;
}

.cz.purple{
  color:purple;
}


/* COLORIZE ARTICLES END--------------------------------------------------------------------------------------------------------- */

/*/////////////////////////////////////////////////////////////////////////
//SPEECH BUBBLE BY CHATGPT*/
.speech-bubble-them {
  position: relative;
  background-color: #F8D64E; /* golden yellow */
  padding: 10px;
  border-radius: 5px;
  width: 80%;
  margin: 20px;
  line-height: 2em;

  /* marching ants border */
  border: 4px solid transparent;
  background-image:
    linear-gradient(#F8D64E, #F8D64E),
    repeating-linear-gradient(
      45deg,
      #2ea3f2 0 6px,   /* purple ants */
      #ffffff 6px 12px /* white gaps */
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: marchingAnts 3s linear infinite; /* slower marching */
}

@keyframes marchingAnts {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 0, 24px 0; } /* smoother, slower loop */
}

.speech-bubble-them:before {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent #F8D64E transparent transparent;
  top: 15px;
  left: -15px;
}


.speech-bubble-us {
  position: relative;
  background-color: #f1f1f1;
  padding: 10px;
  border-radius: 5px;
  border: 2px solid #ddd;
  width: 80%;
  margin: 8px 20px 8px auto;
  margin-left:50px;
  line-height:2em;
}

.speech-bubble-us:after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent #ddd;
  top: 15px;
  right: -15px;
  top: calc(50% - 8px);
}


/* SIGNATURE PAD
https://github.com/szimek/signature_pad (v4.15, 02/2023)
------------------------------------------------------------------------------------------------------------------------------- */


.signature-pad {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 10px;
  width: 100%;
  height: 100%;
  max-width: 700px;
  max-height: 460px;
  border: 1px solid #e8e8e8;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
  border-radius: 4px;
  padding: 16px;
}

.signature-pad::before,
.signature-pad::after {
  position: absolute;
  z-index: -1;
  content: "";
  width: 40%;
  height: 10px;
  bottom: 10px;
  background: transparent;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.signature-pad::before {
  left: 20px;
  -webkit-transform: skew(-3deg) rotate(-3deg);
          transform: skew(-3deg) rotate(-3deg);
}

.signature-pad::after {
  right: 20px;
  -webkit-transform: skew(3deg) rotate(3deg);
          transform: skew(3deg) rotate(3deg);
}

.signature-pad--body {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border: 1px solid #f4f4f4;
}

.signature-pad--body
canvas {
  /*position: absolute;*/
  left: 0;
  top: 0;
  width: 100%;
  height: 300px;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
  border:orange 2px solid;
}

/*
************************************************************************* 
** BEGIN OF MOBILE DESIGN, SCREENS SMALLER THAN 801PX 
************************************************************************/
@media only screen and (max-width: 640px){
/* overwrite */
.inputtext, .inlineinput{
	height:30px;
	margin:5px;
	/*width:200px;*/
	}
.helpy{
	cursor:default;
}

.helpy::after{
	content:"";
	color:gray;
	font-size:10px;
	font-weight:100;
}


}

/************************************************************************
************************************************************************/
/* @media only screen and (max-width: 1024px) - BEGIN */

@media only screen and (max-width: 1024px){
	.container{
		width:95% !important;	
	}
}

/* @media only screen and (max-width: 1024px) - END */

@media print{
	.hideable{
		display:none !important;
	}	


	[contenteditable="true"]::before{ 
		display:none;
	}
}