:root {
    --mainFontColorLighter: #d1d1d1;
    --mainFontColor: #a6a6a6;
    --mainFontColorDarker: #747474;
    --mainFontColorDarkerx05: #8d8d8d;
    --mainFontColorDarkerx2: #646464;
    --mainCyUIColorPurple: #a8a8a8;
    --mainCyUIColorLighterPurple: #ebe6e6;
    --mainCyUIDark: #555555;
    --mainCyUIDarkHover: #6e6e6e;
    --mainCyUIDarkHoverv3: #888888;
    --mainCyUIDarkHoverBgv3: rgb(46, 46, 46);
    --mainCyUIDarkActive: rgba(65, 65, 65, 1);
    --CyUIButtonColor: rgb(35, 35, 35);
}

.mainFont {
    font-size: 14px;
    color: var(--mainFontColor);
    font-family: "Maven Pro", Arial, Helvetica, sans-serif;
}

.selectNone {
    user-select: none;
}

.countercontrols {
    color: var(--mainFontColorDarker);
}

@font-face {
    font-family: 'Maven Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(mavenpro.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.cyuibutton,
.detailsExpand,
.cyuibuttoncolordark {
    background-color: rgba(35, 35, 35, 1);
    border: none;
    text-align: center;
    font-size: 13px;
    font-family: Calibri, 'Trebuchet MS', sans-serif;
    border: 2px solid var(--mainCyUIColorPurple);
    color: snow;
    border-radius: 0px;
}

.cyuibuttonv3 {
    background-color: var(--CyUIButtonColor);
    border: none;
    text-align: center;
    font-size: 13px;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    border-bottom: 1px solid var(--mainCyUIColorPurple);
    color: var(--mainFontColorLighter);
}

.cyuibuttonv3:hover {
    border-bottom: 1px solid var(--mainCyUIColorLighterPurple);
    background-color: var(--mainCyUIDarkHoverBgv3);
}

.cyuibutton:active,
.cyuibuttoncolordark:active,
.cyuibuttonv3:active {
    background-color: var(--mainCyUIDarkActive);
}

.cyuicheckbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 13px;
    height: 13px;
    border: 1px solid var(--mainCyUIDarkHoverv3);
    background-color: var(--mainFontColor);
    /* cursor: pointer; */
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    transition: background-color 0.2s ease;
}

.cyuicheckbox:checked {
    background-color: var(--mainCyUIColorLighterPurple);
}

.cyuibutton:hover,
.detailsExpand:hover {
    border: 2px solid var(--mainCyUIColorLighterPurple);
}

.cyuibuttoncolordark:hover {
    border: 2px solid var(--mainCyUIDarkHover);
}

.cyuibuttoncolordark {
    border: 2px solid var(--mainCyUIDark);
}

.cyuitext {
    font-size: 13px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: rgb(210, 210, 210);
}

.h1,
.headerLogo {
    color: #d8d8d8;
    margin: 0px;
    padding: 0px;
    display: block;
    font-family: alliance, sans-serif;
    font-weight: 400 !important;
    letter-spacing: -.01em;
    background: linear-gradient(94.23deg, #a953fa 1px, #ff0000 280px, #ff6969 350px);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.fbody {
    background: radial-gradient(circle at 50% 50%, #242424, #212121, #1d1d1d, #1a1a1a, #161616, #121212, #0e0e0e, #0a0a0a);
}

.body {
    background-color: #202020;
    margin: 20px;
    margin-left: 25px;
    accent-color: var(--mainCyUIColorPurple)
}

/* thanks https://www.html5canvastutorials.com/blog/2012/06/custom-form-radio-checkbox/ */
.notesCheckbox {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fafafa;
    border: 1px solid #cacece;
    padding: 5px;
    border-radius: 2px;
}

.notesCheckbox:checked {
    background-color: var(--mainCyUIColorPurple);
    border: 1px solid #adb8c0;
    color: #99a1a7;
}

.transformDetails {
    position: relative;
    top: -5px;
}

.detailsExpandedFont {
    font-size: x-small;
}

.cyuislider[type='range'] {
    accent-color: var(--mainCyUIColorLighterPurple)
}