.tooltip-icon {
    /*font-size: 1rem !important;*/
    padding-left: 0.4rem;
    /*color: rgba(59, 72, 80, 0.9);*/
    color: #6c757d
}


[data-tooltip] {
    --arrow-size: 5px;
    position: relative;
    z-index: 100;
}

/* Positioning and visibility settings of the tooltip */
[data-tooltip]:before,
[data-tooltip]:after {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    left: 50%;
    bottom: calc(100% + var(--arrow-size));
    pointer-events: none;
    transition: 0.2s;
    will-change: transform;
}

/* The actual tooltip with a dynamic width */
[data-tooltip]:before {
    content: attr(data-tooltip);
    padding: 5px 9px;
    min-width: 50px;
    max-width: max-content;
    width: max-content;
    width: -moz-max-content;
    border-radius: 6px;
    font-size: 11px;
    background-color: #fff; /*background color of tooltip-data*/
    /*background-image: linear-gradient(30deg, rgba(59, 72, 80, 0.44), rgba(59, 68, 75, 0.44), rgba(60, 82, 88, 0.44));*/
    /*box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);*/
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    color: black;
    text-align: center;
    white-space: pre-wrap;
    transform: translate(-50%, calc(0px - var(--arrow-size))) scale(0.5);
}

/* Tooltip arrow */
[data-tooltip]:after {
    content: '';
    border-style: solid;
    border-width: var(--arrow-size) var(--arrow-size) 0px var(--arrow-size); /* CSS triangle */
    border-color: white transparent transparent transparent;
    transition-duration: 0s; /* If the mouse leaves the element, 
                        the transition effects for the 
                        tooltip arrow are "turned off" */
    transform-origin: top; /* Orientation setting for the
                        slide-down effect */
    /*transform: translateX(-50%) scaleY(0);*/
}

/* Tooltip becomes visible at hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    visibility: visible;
    opacity: 1;
}
/* Scales from 0.5 to 1 -> grow effect */
[data-tooltip]:hover:before {
    transition-delay: 0.3s;
    transform: translate(-50%, calc(0px - var(--arrow-size))) scale(1);
}
/* 
Arrow slide down effect only on mouseenter (NOT on mouseleave)
*/
   /* [data-tooltip]:hover:after {
        transition-delay: 0.5s; 
        transition-duration: 0.2s;
        transform: translateX(-50%) scaleY(1);
    }*/
/*
That's it for the basic tooltip.

If you want some adjustability
here are some orientation settings you can use:
*/

/* LEFT */
/* Tooltip + arrow */
[data-tooltip-location="left"]:before,
[data-tooltip-location="left"]:after {
    left: auto;
    right: calc(100% + var(--arrow-size));
    bottom: 50%;
}

/* Tooltip */
[data-tooltip-location="left"]:before {
    transform: translate(calc(0px - var(--arrow-size)), 50%) scale(0.5);
}

[data-tooltip-location="left"]:hover:before {
    transform: translate(calc(0px - var(--arrow-size)), 50%) scale(1);
}

/* Arrow */
[data-tooltip-location="left"]:after {
    border-width: var(--arrow-size) 0px var(--arrow-size) var(--arrow-size);
    border-color: transparent transparent transparent white;
    transform-origin: left;
    /*transform: translateY(50%) scaleX(0);*/
}

/*[data-tooltip-location="left"]:hover:after {
    transform: translateY(50%) scaleX(1);
}*/



/* RIGHT */
[data-tooltip-location="right"]:before,
[data-tooltip-location="right"]:after {
    left: calc(100% + var(--arrow-size));
    bottom: 50%;
}

[data-tooltip-location="right"]:before {
    transform: translate(var(--arrow-size), 50%) scale(0.5);
}

[data-tooltip-location="right"]:hover:before {
    transform: translate(var(--arrow-size), 50%) scale(1);
}

[data-tooltip-location="right"]:after {
    border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) 0px;
    border-color: transparent white transparent transparent;
    transform-origin: right;
    transform: translateY(50%) scaleX(0);
}

[data-tooltip-location="right"]:hover:after {
    transform: translateY(50%) scaleX(1);
}



/* BOTTOM */
[data-tooltip-location="bottom"]:before,
[data-tooltip-location="bottom"]:after {
    top: calc(100% + var(--arrow-size));
    bottom: auto;
}

[data-tooltip-location="bottom"]:before {
    transform: translate(-50%, var(--arrow-size)) scale(0.5);
}

[data-tooltip-location="bottom"]:hover:before {
    transform: translate(-50%, var(--arrow-size)) scale(1);
}

[data-tooltip-location="bottom"]:after {
    border-width: 0px var(--arrow-size) var(--arrow-size) var(--arrow-size);
    border-color: transparent transparent white transparent;
    transform-origin: bottom;
}


.toggle {
    --width: 30px;
    --height: calc(var(--width) / 3);
    position: relative;
    display: inline-block;
    width: var(--width);
    height: var(--height);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: var(--height);
    cursor: pointer;
    margin-top: 4px;
}

.toggle input {
    display: none;
}

.toggle .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--height);
    background-color: #ccc;
    transition: all 0.4s ease-in-out;
}

.toggle .slider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--height));
    height: calc(var(--height));
    border-radius: calc(var(--height) / 2);
    background-color: #fff;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease-in-out;
}

.toggle input:checked + .slider {
    background-color: #2196F3;
}

.toggle input:checked + .slider::before {
    transform: translateX(calc(var(--width) - var(--height)));
}

.toggle .labels {
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 12px;
    font-family: sans-serif;
    transition: all 0.4s ease-in-out;
}

.toggle .labels::after {
    content: attr(data-off);
    position: absolute;
    /*right: 5px;*/
    left: 35px;
    bottom: 5px;
    font-size: 10px;
    /*color: #4d4d4d;*/
    color: #ccc;
    opacity: 1;
    /*text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);*/
    transition: all 0.4s ease-in-out;
}

.toggle .labels::before {
    content: attr(data-on);
    position: absolute;
    width: max-content;
    left: 35px;
    bottom: 5px;
    font-size: 10px;
    color: #4d4d4d;
    /*            left: 5px;
color: #ffffff;*/
    opacity: 0;
    /*text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4);*/
    transition: all 0.4s ease-in-out;
}

.toggle input:checked ~ .labels::after {
    opacity: 0;
}

.toggle input:checked ~ .labels::before {
    opacity: 1;
}

.progress-point {
    height: 10px;
    width: 10px;
    background-color: #ccc;
}