.checkbox input { position: absolute; opacity: 0; cursor: pointer; } /* Container */ .checkbox { align-items: center; cursor: pointer; user-select: none; position: relative; font-size: var(--font-size--small) !important; } /* Custom box */ .checkmark { width: 18px!important; height: 18px; border: 2px solid var(--brown); /* theme color */ border-radius: 8px; /* change to 50% for a circle */ margin-right: 8px; display: inline-block; position: relative; } /* Tick (hidden by default) */ .checkmark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; opacity: 0; border:solid 1px white; transform:translate(-50%, -50%); border-radius:6px; } /* When checked */ .checkbox input:checked + .checkmark { background-color: var(--brown); border-color: var(--brown); } .checkbox input:checked + .checkmark::after { opacity: 1; } input[type="file"]::file-selector-button { background-color: var(--brown); color: #fff; border: none; border-radius: 10px; padding: 8px 16px; cursor: pointer; transition: background 0.3s; } input[type="file"]::file-selector-button:hover { background-color: #900; } input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FAF7F0 inset !important; /* replace white with your bg */ -webkit-text-fill-color: var(--brown) !important; /* your text color */ transition: background-color 5000s ease-in-out 0s; /* trick to suppress flash */ } .tooltip { display: inline-block; cursor: pointer; font-size: 15px; border-radius: 50%; width: 24px; height: 24px; text-align: center; line-height: 24px; position: relative; top: -7px; z-index: 9999; } /* The box – centered to viewport horizontally */ .tooltiptext { position: absolute; /* appended to while open */ left: 50%; transform: translateX(-50%); top: 0; /* set via JS */ width: 600px; max-width: 90vw; background: #fff; color: var(--brown); text-align: left; border-radius: 10px; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,.1); font-size: var(--font-size-small); opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 1500; } .tooltiptext.is-visible { opacity: 1; pointer-events: auto; } /* Arrow uses a CSS var set by JS */ .tooltiptext::after { content: ""; position: absolute; left: var(--arrow-left, 50%); transform: translateX(-50%); border-width: 5px; border-style: solid; } /* Default: box below icon (arrow on top edge, pointing up) */ .tooltiptext:not(.is-above)::after { top: -10px; border-color: transparent transparent #fff transparent; } /* Flipped: box above icon (arrow on bottom edge, pointing down) */ .tooltiptext.is-above::after { bottom: -10px; border-color: #fff transparent transparent transparent; } @media print, screen and (max-width:40em) { .tooltiptext { width: 80vw !important; margin: 0 !important; } }