/* /////////////////////////// DEFAULT ICONS SETUP ////////////////////////// */

.moreIcons {width: 1rem; height: 1rem; background-color: #fff; mask-repeat: no-repeat; mask-position: center; mask-size: contain; cursor: pointer;}

.moreIcons.close {mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='1' y1='23' x2='23' y2='1' stroke='%23000000' stroke-width='2'/%3E%3Cline x1='1' y1='1' x2='23' y2='23' stroke='black' stroke-width='2'/%3E%3C/svg%3E");}

/* ///////////////////////////// BUTTONS SETUP ////////////////////////////// */

.button {--borderSize: 0.1rem; border-radius: var(--borderRadius); align-content: center; padding: var(--padding); cursor: pointer; user-select: none; text-align: center; position: relative;}
.button .generated {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

.palette-A.white  {--color-dark-1: #000; --color: #999; --color-light-1: #ddd; --color-light-2: #fff; --color-text: #000;}
.palette-A.gray {--color-dark-1: #000;--color: #555; --color-light-1: #888; --color-light-2: #bbb; --color-text: #fff;}
.palette-A.black {--color-dark-1: #000; --color: #111; --color-light-1: #333; --color-light-2: #555; --color-text: #fff;}
.palette-A.red {--color-dark-1: #000; --color: #600; --color-light-1: #c00; --color-light-2: #f30; --color-text: #fff;}
.palette-A.orange {--color-dark-1: #000; --color: #b40; --color-light-1: #fa0; --color-light-2: #fd0; --color-text: #fff;}
.palette-A.yellow {--color-dark-1: #000; --color: #960; --color-light-1: #eb0; --color-light-2: #ff2; --color-text: #fff;}
.palette-A.green {--color-dark-1: #000; --color: #070; --color-light-1: #6c0; --color-light-2: #cf0; --color-text: #fff;}
.palette-A.blue {--color-dark-1: #000; --color: #25b; --color-light-1: #09d; --color-light-2: #7de; --color-text: #fff;}
.palette-A.purple {--color-dark-1: #000; --color: #60b; --color-light-1: #a4f; --color-light-2: #f88; --color-text: #fff;}
.palette-A.pink {--color-dark-1: #000; --color: #914; --color-light-1: #d35; --color-light-2: #f87; --color-text: #fff;}

/* ------------------------------ gradients-B ------------------------------- */

.gradients-A {
  --borderRadius: 0.25rem;
  border-radius: var(--borderRadius);
  color: var(--color-text);
  z-index: 2;
}

.gradients-A .layer-1 {
  background:
    radial-gradient(100% 100% at 50% 0%, var(--color-light-1) 0%, transparent) no-repeat var(--color);
  color: var(--color-text);
  border-radius: calc(var(--borderRadius) - var(--borderSize));
  margin: var(--borderSize) var(--borderSize) 0 var(--borderSize);
  z-index: -1;
}

.gradients-A .layer-2 {
  background: linear-gradient(0deg, transparent 0%, var(--color-light-1) 100%) var(--color);
  border-radius: calc(var(--borderRadius) - var(--borderSize));
  z-index: -2;
}

/* ------------------------------ gradients-B ------------------------------- */

.gradients-B {
  --borderRadius: 0.25rem;
  border-radius: var(--borderRadius);
  color: var(--color-text);
  z-index: 2;
}

.gradients-B .layer-1 {
  background:
    radial-gradient(70% 60% at 50% 0%, var(--color-light-1) 0%, transparent),
    radial-gradient(70% 60% at 50% 100%, var(--color-light-1) 0%, transparent) no-repeat var(--color);
  border-radius: calc(var(--borderRadius) - var(--borderSize));
  margin: var(--borderSize);
  z-index: -1;
}

.gradients-B .layer-2 {
  background: linear-gradient(0deg, var(--color-light-1) 0%, transparent 50%, var(--color-light-1) 100%) var(--color);
  border-radius: inherit;
  z-index: -2;
}

/* ------------------------------ gradients-C ------------------------------- */

.gradients-C {
  border-radius: 0.25rem;
  color: var(--color-text);
  z-index: 2;
}

.gradients-C .layer-1 {
  background:
  radial-gradient(70% 60% at 50% 0%, var(--color-light-2) 0%, var(--color-light-1) 50%, transparent),
  radial-gradient(70% 60% at 50% 100%, var(--color-light-1) 0%, transparent) no-repeat var(--color);
  color: var(--color-text);
  border-radius: inherit;
  margin: var(--borderSize);
  z-index: -1;
}

.gradients-C .layer-2 {
  background: linear-gradient(0deg, var(--color-light-1) 0%, transparent 50%, var(--color-light-1) 75%, var(--color-light-2) 100%) var(--color);
  border-radius: inherit;
  z-index: -2;
}

/* ------------------------------ gradients-D ------------------------------- */

.gradients-D {
  border-radius: 0.25rem;
  color: var(--color-text);
  z-index: 2;
}

.gradients-D .layer-1 {
  background:
  radial-gradient(70% 60% at 50% 0%, var(--color-light-2) 0%, var(--color-light-1) 50%, transparent),
  radial-gradient(70% 60% at 50% 50%, var(--color-dark-1) 0%, transparent),
  radial-gradient(70% 60% at 50% 100%, var(--color-light-1) 0%, transparent) no-repeat var(--color);
  color: var(--color-text);
  border-radius: inherit;
  margin: var(--borderSize);
  z-index: -1;
}

.gradients-D .layer-2 {
  background: linear-gradient(0deg, var(--color-light-1) 0%, transparent 50%, var(--color-light-1) 75%, var(--color-light-2) 100%) var(--color);
  border-radius: inherit;
  z-index: -2;
}

/*///////////////////////////////// TOOLTIPS /////////////////////////////////*/

/*.tooltip {
  --tooltipWidth: 256px;
  --tooltipMargin: 8px;
  --tooltipWindowPadding: 16px;
  width: var(--tooltipWidth);
  height: auto;
  padding: 1rem;
  border-radius: var(--borderRadius);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  opacity: 0;
  visibility: hidden;
}*/

/*////////////////////////////////// SOCIAL //////////////////////////////////*/

.socialPost ul {list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 0.5rem;}
.socialPost div {display: flex; gap: 0.5rem; align-items: center; text-decoration: none; color: #fff; font-weight: normal; position: relative;}
.socialPost img {width: 1.5rem;}
.socialPost li {display: flex; border-radius: 0.25rem; padding: 0.5rem; cursor: pointer;}
.socialPost li.x {background: #000000;}
.socialPost li.facebook {background: #4267B2;}
.socialPost li.whatsapp {background: #25D366;}
.socialPost li.messenger {background: #0084FF;}
.socialPost li.telegram {background: #0088CC;}
.socialPost li.skype {background: #00A1F1;}
.socialPost li.sms {background: #4CAF50;}
.socialPost li.email {background: #b146b7;}
.socialPost li.link {background: #b36e53;}

/* ----------------------------- Initial SETUP ------------------------------ */

/*[data-tooltip] {cursor: help;}
.tooltip {transition:.3s; pointer-events: none; user-select: none; z-index: 1000;}
.tooltip.mouseOut {transform: translateY(-150%);}
.tooltip.mouseEnter {opacity: 1; visibility: visible; transform: translateY(-100%);}
.tooltipDecoration {z-index: 1000;}*/

/* FOR DEV ONLY */ /*.tooltipLayer > div:before {content: ''; background: #f00a; border: 1px solid #f00; position: absolute; inset: 0 0 0 0;}
/* FOR DEV ONLY */ /*.tooltipLayer > div:after {content: 'tooltipContainer'; background: #f00a; border: 1px solid #f00; position: absolute; font-size: 0.6rem; top: -1.5rem; color: #fff; padding: 0.25rem;}
/* FOR DEV ONLY */ /*[data-tooltip] > div:before {content: 'tooltipContainer'; background: #00fa; border: 1px solid #00f; position: absolute; font-size: 0.6rem; top: -1.5rem; color: #fff; padding: 0.25rem;}

/* ------------------- tooltips DEFAULT decoration styles ------------------- */

.default.tooltip {background: #fff; color: #666; box-shadow: #0004 0 0.25em 0.5em;}
.default.tooltipDecoration {position: absolute; border-bottom: 0.2rem double #0f46; bottom: -0.4rem; left: 0; right: 0;} /* double underline decoration*/

/* ------------------- tooltips PRESETS decoration styles ------------------- */

.greeMyst.tooltip {background: radial-gradient(50% 100% at 50% 100%, #8a0a, transparent), radial-gradient(50% 3px at 50% 100%, #ff0, transparent) #071e; color: #fff; box-shadow: #0008 0 0.5em 1em, #0004 0 0.25em 0.5em;}
.greeMyst.tooltipDecoration {position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: radial-gradient(#af0f,#8f08,#0f04,#0f00,#0f00,#0f00);}

.blueClue.tooltip {background: #15fe; color: #fff; box-shadow: #0004 0 0.25em 0.5em;}
.blueClue.tooltipDecoration {background: #04ca; color: #cff; font-weight: bold; font-size: 0.66rem; position: absolute; right: -0.4rem; top: -0.4rem; width: 1rem; height: 1rem; border-radius: 100%;}
.blueClue.tooltipDecoration:before {content: '?'; display: flex; width: 100%; height: 100%; justify-content: center; align-items: center;}

/* --------------------- pupup PRESETS decoration styles -------------------- */

.popup.default {background: #000d; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 5000; display: flex; justify-content: center; align-items: center;}
.popup.default .window {width: auto; height: auto; background: radial-gradient(ellipse at top, #f246, transparent), #280428ee; max-width: 700px; max-height: 90vh; margin: 2rem; padding: 2.5rem; border-radius: 0.5rem; text-align: left; box-shadow: #000a 0 0 20px; position: relative; display: flex;}
/*.popup.default .window {width: auto; height: auto; background: radial-gradient(ellipse 75% 75% at top, #08fa, transparent), radial-gradient(ellipse 75% 32% at bottom, #04f4, transparent), #015e; max-width: 700px; max-height: 90vh; margin: 2rem; padding: 2.5rem; border-radius: 0.5rem; text-align: left; box-shadow: #000a 0 0 20px; position: relative; display: flex;}*/
.popup.default .moreIcons.close {position: absolute; right: 1rem; top: 1rem;}
.popup.default .content {/*transition: all 3s ease;*/ width: auto; height: auto; margin-right: -1.125rem; padding-right: 1.125rem; overflow: auto;} /* potentional scrollbar distancing */
[data-popup-contentID] {display: none;}

.alerter {width: 100vw; height: 100vh; position: fixed; top: 0; z-index: 5000; display: flex; justify-content: center; align-items: center; pointer-events: none;}
.alerter .window {background: radial-gradient(ellipse at top, #fff, transparent), #fffa; width: auto; height: auto; max-width: 700px; max-height: 90vh; margin: 2rem; padding: 2.5rem; border-radius: 0.5rem; text-align: left; box-shadow: #000a 0 0 20px; position: relative; display: flex; color: #222; user-select: none; pointer-events: auto;}

.green .window {background: radial-gradient(ellipse at top, #af0, transparent), #0c4d; color: #130;}
.red .window  {background: radial-gradient(ellipse at top, #f20, transparent), #900e; color: #fff;}

/* ------------- loadeContent Progress PRESETS decoration styles ------------ */

.loadContentProgress.percent {background: #fff; color: #000; width: 5rem; aspect-ratio: 1; border-radius: 100%; display: flex; justify-content: center; align-items: center;}
.loadContentProgress.progressbar {}

/* -------------------------------------------------------------------------- */

.tooltip {
    position: fixed;
    background: #000;
    color: #fff;
    padding: 0.5rem;
    border-radius: 0.25rem;
    font-size: 1rem;
    z-index: 10000;
    /*visibility: hidden;*/
    /*opacity: 0;*/
    /*transition: opacity 0.2s;*/
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.tooltip.transition {transition-duration: .5s;}
.tooltip.transition.xxx { opacity: 0; transform: translate(0, 1rem);}
.tooltip.transition.xxx.in {opacity: 1; transform: translate(0, 0);}
.tooltip.transition.xxx.out { opacity: 0; transform: translate(0, -1rem);}



.tooltip-hover {
    /*visibility: visible;*/
    /*opacity: 1;*/
}

.tooltip-class {
    background: #555;
    color: #eee;
}


/* ----------------------- Syntax Highlighter styles ------------------------ */

pre {background: #181818; color: #888; padding: 1rem; border-radius: 0.25rem; display: block; overflow-x: auto;}
pre .keyword {color: #007acc;}
pre .element {background: #500; color: #d33;}
pre .string {background: #245; color: #4ef;}
pre .comment {color: #6a737d; font-style: italic;}

/* other */

[data-copytoclipboard] {padding: 0 0.33rem; border-radius: 0.33rem; cursor: pointer; display: inline-flex; background: #0006; align-items: center;}
[data-copytoclipboard]:after {content: "đź“„"; font-size: 1rem; padding-left: 0.25rem;}