:root {
    --font: serif;

    /*colors*/
    --primary: rgb(255, 255, 255);
    --secondary: rgb(0, 0, 0);
    --progress-color: #E5660B;
    /* --bg-card: white; */
    --bg-card-bk: white;
    --bg-box: #ffffff;
    --bg-master: rgb(0, 0, 0);
    --bg-btn-updown: transparent;
    --bg-slider: rgb(167, 167, 167);
    --slider: black;
    --btn-hover: #a1a1a1;
    --txt: grey;
    --txt-box: rgb(209, 209, 209);
    --txt-master: white;
    --txt-marquee: grey;
    --border: transparent;
    /* --btn-play: #00B93F; */
    /* --btn-stop: red; */
    /* --btn-download: #ffcc00; */
    --txt-pre2: white;
    /* --card-border: solid 1px rgb(0, 0, 0); */
    --boxes_cont_bg: transparent;
    --boxes_cont_padding: 5px;
    --boxes_cont_border-radius: 10px;
    /* border: solid 0.5px white; */
    --max_height_slider_boxes:28vh; /* !!! only vh !!!! */

    /*settings*/
    --notactive-opacity: 0.35; /* sets opacity of the loops which are not playing */
    --active-border: rgba(167, 139, 139, 0.466); /* sets color of the loops-border which is playing */

    --radius-sm: 10px;
    --radius-md: 30px;
    --radius-lg: 30px;

    --card-init-width: 280px;
    --card-init-height: 320px;
    --alert-width: 300px;
    --slider-size: 20px;

    --shadow: 5px 24px 54px rgba(167, 139, 139, 0.5);

    /*images*/
    /* --img-bg: url("bg.jpg"); */
    /* --img-card-bg: url('wrapper_back.svg'); */
    /* --img-card-front: url('wrapper_front.png'); */
    /* --wrapper-color-front:grey; */

    --img-box-play: url("component_preview_img.svg");
    --img-box-stop: url("component_preview_stop_img.svg");
    --img-box-btn-up: url("sort-up.svg");
    --img-box-btn-down: url("sort-down.svg");
    --img-master-play: url("master_play.svg");
    --img-master-stop: url("master_stop.svg");
    --img-download: url("download_img.svg");
    /* --img-header: url("header.svg"); */
    /* --img-header-mobile: url("header_mobile.svg"); */

    /* --img-header-right: url("viva_acid_logo2.svg"); for hex value - comment img out */
    --bg-header-right: transparent;
    --bg-header-left: transparent;

    /*glow effect*/
    --glow-text-col-1: #7e0fff;
    --glow-text-col-2: #0fffc1;

    --glow-card-scale: 0.9;
    --glow-card-blur: 5vw;
    --glow-card-1-col: #0fffc1;
    --glow-card-2-col: #7e0fff;
    --glow-card-time: 10s;
    --glow-card-degree: 270deg;

    --glow-play-scale: 1;
    --glow-play-blur: 5px;
    --glow-play-1-col: var(--btn-play);
    --glow-play-2-col: var(--btn-play);
    --glow-play-degree: 270deg;

    --glow-stop-scale: 1;
    --glow-stop-blur: 10px;
    --glow-stop-1-col: var(--btn-stop);
    --glow-stop-2-col: var(--btn-stop);
    --glow-stop-degree: 270deg;

    --glow-download-scale: 1;
    --glow-download-blur: 5px;
    --glow-download-1-col: yellow;
    --glow-download-2-col: yellow;
    --glow-download-degree: 270deg;
}