#rip-crosshair {
    position: absolute;
    width: 37vh;
    height: 50vh;
    margin: 0;
    top: 50%;
    left: 50%;
    padding: 0 1vh;
    transform: translate(-50%, -50%);

    background: linear-gradient(60deg, var(--background));
    border-radius: 2vh;
    opacity: 0;
    overflow: hidden;
    transition: all 187ms ease;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

#crosshair-head {
    position: relative;
    width: calc(100% + 2vh);
    height: 4.5vh;
    margin: 0 0 0 -1vh;
    float: left;

    background: #FFFFFF09;
    display: flex;
    align-items: center;
}
#crosshair-head img {
    width: auto;
    height: 2vh;
    margin: 0 0 0 1.5vh;
    float: left;
}
#crosshair-head h2 {
    margin: 0 0 0 1vh;
    float: left;

    font-family: 'Calibri', sans-serif;
    font-size: 1.65vh;
    font-weight: normal;
    color: var(--main);
    filter: drop-shadow(0 0 1vh var(--main));
}
#crosshair-head i {
    position: absolute;
    margin: 0;
    right: 1vh;

    font-size: 1.75vh;
    color: var(--main);
    filter: drop-shadow(0 0 1vh var(--main));
    opacity: .6;
    transition: all 187ms ease;
}
#crosshair-head i:hover {
    opacity: .9;
    cursor: pointer;
}

h3 {
    width: 100%;
    margin: 0;
    float: left;

    font-family: 'Calibri', sans-serif;
    font-size: 2.25vh;
    font-weight: bold;
    color: var(--main);
    filter: drop-shadow(0 0 1vh var(--main));
}
h4 {
    width: 100%;
    margin: 1vh 0 -.25vh 0;
    float: left;

    font-family: 'Calibri', sans-serif;
    font-size: 1.4vh;
    font-weight: normal;
    text-transform: uppercase;
    color: #FFF9;
}

/* SETTINGS - CROSSHAIR */
#settings-crosshair-frame {
    width: 100%;
    height: 10vh;
    margin: 1vh 0;
    float: left;

    background: #FFFFFF06;
    border-radius: .75vh;
    box-shadow: inset 0 0 0 .25vh #FFFFFF20;
    display: flex;
    justify-content: center;
    align-items: center;
}
#settings-point-opacity, #settings-circle-opacity, #settings-cross-opacity {
    width: calc(100% - 9.5vh);
}

#settings-point-color, #settings-circle-color, #settings-cross-color {
    margin-left: 1vh;
}

.settings-crosshair-hover {
    float: right; 
}
.settings-crosshair-hover p {
    margin: .5vh 1vh 0 0;
    float: left;

    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
    line-height: 2.25vh;
    margin-left: .5vh;
    color: #FFF6;
    transition: all 187ms ease;
}

#settings-crosshair-switch {
    width: 100%;
    height: 4vh;
    margin: 2vh 0 1vh 0;
    float: left;

    background: #FFFFFF09;
    border-radius: 1vh;
}
#settings-crosshair-switch span {
    width: 50%;
    height: 100%;
    margin: -4vh 0 0 0;
    float: left;

    background: #FFFFFF12;
    border-radius: 1vh;
    box-shadow: inset 0 0 0 .25vh var(--main);
    content: '';
    transition: all 187ms ease;
}
#settings-crosshair-switch h3 {
    width: 50%;
    margin: 0;
    float: left;

    text-align: center;
    line-height: 4vh;
    color: #FFFFFF60;
    cursor: pointer;
    transition: all 187ms ease;
}
#settings-crosshair-switch h3[active] {
    color: var(--main);
}
#settings-crosshair-switch h3:not([active]):hover {
    color: #FFFFFF90;
}

#settings-crosshair-switch-body {
    width: calc(200% + 2vh);
    height: auto;
    margin: 0;
    float: left;

    background: #f0f0;
    transition: all 187ms ease;
}
.crosshair-switch-body-box {
    width: calc(50% - 1vh);
    margin: 0;
    float: left;
}
.crosshair-switch-body-box:nth-child(2) {
    margin-left: 2vh;
}

/* ------------------------ */
/* --------- GAME --------- */
/* ------------------------ */
#game-crosshair {
    position: fixed;
    width: auto;
    height: auto;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    transition: all 99ms ease;
}

/* ----------------------------- */
/* --------- CROSSHAIR --------- */
/* ----------------------------- */

.crosshair {
    position: relative;
    width: 10vh;
    height: 10vh;
    margin: 0;
    padding: 0;

    --point-s: .5vh;
    --point-c: #FFF;
    --point-b: .15vh;

    --circle-s: 3vh;
    --circle-w: 1.6vh;
    --circle-r: 50%;
    --circle-b: .15vh;
    --circle-c: #FFF;

    --cross-s: 1.5vh;
    --cross-b: .25vh;
    --cross-m: 1.5vh;
    --cross-c: #FFF;
}

.crosshair #point {
    position: absolute;
    width: var(--point-s);
    height: var(--point-s);
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-color: var(--point-c);
    border-radius: 50%;
    border: var(--point-b) solid #000;
    background-clip: padding-box;
}

.crosshair #circle {
    position: absolute;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: var(--circle-s);
    height: var(--circle-s);
}
.crosshair #circle span {
    position: absolute;
    width: var(--circle-w);
    height: var(--circle-w);
    top: 0;
    float: left;

    overflow: hidden;
}
.crosshair #circle span::after {
    width: var(--circle-s);
    height: var(--circle-s);
    top: 0;
    float: left;

    border-radius: var(--circle-r);
    box-shadow: inset 0 0 0 var(--circle-b) var(--circle-c);
    content: "";
}
.crosshair #circle .one {
    margin: 0;
}
.crosshair #circle .one::after {
    margin: 0;
}
.crosshair #circle .two {
    margin-left: calc(var(--circle-s) - var(--circle-w)) !important;
}
.crosshair #circle .two::after {
    margin-left: calc(-1 * var(--circle-s) + var(--circle-w)) !important;
    box-shadow: inset 0 0 0 var(--circle-b) #f0f !important;
}
.crosshair #circle .thr {
    margin-top: calc(var(--circle-s) - var(--circle-w)) !important;
}
.crosshair #circle .thr::after {
    margin-top: calc(-1 * var(--circle-s) + var(--circle-w)) !important;
}
.crosshair #circle .fou {
    margin-top: calc(var(--circle-s) - var(--circle-w));
    margin-left: calc(var(--circle-s) - var(--circle-w));
}
.crosshair #circle .fou::after {
    margin-top: calc(-1 * var(--circle-s) + var(--circle-w));
    margin-left: calc(-1 * var(--circle-s) + var(--circle-w));
}

.crosshair #cross {
    position: absolute;
    width: var(--cross-b);
    height: var(--cross-b);
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    float: left;
}
.crosshair #cross span {
    position: absolute;
    height: var(--cross-b);
    width: var(--cross-s);

    background: var(--cross-c);
}

/* ---------------------------- */
/* --------- REDESIGN --------- */
/* ---------------------------- */

input[type="range"] {
    width: 100%;
    height: 2vh;
    margin: .5vh 0 0 0;
    float: left;

    background: #FFFFFF09;
    border-radius: .5vh;
    outline: none;
    transition: all 187ms ease;
    -webkit-appearance: none;
}
input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 2vh;
    height: 2vh;

    background: var(--main);
    border-radius: .5vh;
    cursor: pointer;
    transition: all 187ms ease;
    -webkit-appearance: none;
}
input[type="range"]:hover {
    background: #FFFFFF12;
}

.checkbox {
    width: auto;
    height: 2vh;
    margin: .5vh 1vh 0 0;
    float: left;
}
.checkbox input {
    position: relative;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
    margin: 0;

    background-color: #FFFFFF09;
    border-radius: .5vh;
    display: inline-block;
    outline: none;
    vertical-align: top;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: all 187ms ease;
}
.checkbox input::after {
    content: '';
    display: block;
    top: .55vh;
    left: .4vh;
    position: absolute;
    transform: rotate(-60deg);

    width: 1vh;
    height: .425vh;
    border: .25vh solid #FFF;
    border-top: 0;
    border-right: 0;
    opacity: 0;
    transition: transform .3s cubic-bezier(.2, .85, .32, 1.2), opacity .2s;
}
.checkbox input:checked {
    background-color: var(--main);
}
.checkbox input:checked::after {
    opacity: 1;
    transform: rotate(-45deg);
    transition: transform .6s cubic-bezier(.2, .85, .32, 1.2), opacity .3s;
}
.checkbox input:disabled {
    cursor: not-allowed;
    opacity: .75;
}
.checkbox input:hover:not(:checked):not(:disabled) {
    background: #FFFFFF16;
}
.checkbox label {
    font-family: 'Calibri', sans-serif;
    font-size: 1.5vh;
    line-height: 2.25vh;
    margin-left: .5vh;
    color: #FFF6;
    transition: all 187ms ease;
}
.checkbox input:checked + label {
    color: #FFF9;
}

input[type="color"] {
    position: relative;
    width: 5vh;
    height: 2vh;
    margin: .5vh 0 0 0;
    padding: 0;
    float: left;

    background: #FFF2;
    border-radius: .5vh;
    border: none;
    outline: none;
    box-shadow: inset 0 0 0 .25vh #FFFFFF20;
    color-scheme: dark light;
    overflow: hidden;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    margin: 0;
	padding: .25vh;
}
input[type="color"]::-webkit-color-swatch {
    margin: 0;
	padding: 0;
	border: none;
    border-radius: .25vh;
}
input[type="color"][disabled] {
    opacity: .75;
}