@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

:root {
    --current-w: var(--switch-w-1);
    --current-h: var(--switch-h-1);

    --switch-w-1: 40px;
    --switch-h-1: 20px;

    --switch-w-2: 50px;
    --switch-h-2: 30px;

    --switch-w-3: 60px;
    --switch-h-3: 40px;

    --switch-bg: #ccc;
    --switch-active: #2196F3;
    --slider-speed: .4s;
    --gap: 4px;
}

.select {
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
}

.select:focus {
    outline: 2px solid #007bff;
    border-radius: 4px;
}

.placeholder {
    max-width: 100%;
}

.options {
    display: none;
    z-index: 1000;
    box-shadow: #24242b9d 0px 4px 8px;
}

.options::-webkit-scrollbar {
    width: 5px;
}

.options::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 10px;
}

.select.active .options {
    display: block;
    position: absolute;
    z-index: 100;
    width: 100%;
    box-sizing: border-box;
    height: min-content;
    max-height: 200px;
    top: 100%;
    border-top: 1px solid #46485a;
    overflow-y: scroll;
    overflow-x: hidden;
}

.option:hover {
    background-color: #2c2e3d;
}

.ch::before, .vc::before, .rl::before, .lg::before, .fc::before, .opt::before {
    font-family: "bootstrap-icons" !important;
    margin-right: 5px;
    color: white;
    font-size: 0.8rem;
}

.ch::before {
    content: '\F40A';
}

.vc::before {
    content: '\F611';
}

.rl::before {
    content: '\F152';
}

.lg::before {
    content: "\F3EE";
}

.fc::before {
    content: "\F1C9";
}

.opt::before {
    content: "\F234";
}

.opt {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.opt::after {
  content: "This is an optional field";
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* mostrar */
.opt:hover::after {
  opacity: 1;
}

.switch.s-1 { --w: var(--switch-w-1); --h: var(--switch-h-1); }
.switch.s-2 { --w: var(--switch-w-2); --h: var(--switch-h-2); }
.switch.s-3 { --w: var(--switch-w-3); --h: var(--switch-h-3); }

.switch {
  position: relative;
  display: inline-block;
  width: var(--w);
  height: var(--h);
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--switch-bg);
  transition: var(--slider-speed);
}

.slider:before {
  position: absolute;
  content: "";
  height: calc(var(--h) - (var(--gap) * 2));
  width: calc(var(--h) - (var(--gap) * 2));
  left: var(--gap);
  bottom: var(--gap);
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--switch-active);
}

input:checked + .slider:before {
  transform: translateX(calc(var(--w) - var(--h)));
}

.slider.round {
  border-radius: var(--current-h);
}

.slider.round:before {
  border-radius: 50%;
}

.module-disabled {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(0.5);
    transition: all 0.3s ease;
}