:root {

    /*FONTS*/
    --font: serif;

    /*HEADER IMAGE*/
    /* --img-header: url("header.svg"); 
    --img-header-mobile: url("header_mobile.svg");  */

    /*ALERT*/
    --alert-width: 450px;
    --alert-height: 250px;
    --slider-size: 20px;
    --alert-bg-color:white;
    --alert-bg-image:url("unlock_message.svg");

    /*COLORS*/
    --primary: rgb(255, 255, 255);
    --secondary: rgb(0, 0, 0);
    --progress-color: #00ff2a;

    /*STAGE BACKGROUND*/
    /* --img-bg: url("bg.jpg"); */

    /*PREVIEW*/
    --preview-img: url("preview.svg");
    --preview-border-radius:0px;
    --preview-border-stroke:solid 1px #E6E6E6;

    /*WRAPPER (player card)*/
    --card-border: solid 1px #E6E6E6;
    --radius-lg: 0px;
    /*front*/
    --wrapper-color-front:rgba(255, 14, 14, 0);
    /* --img-card-front: url('wrapper_front.png'); */
    /*back*/
    --bg-card-bk: rgb(255, 255, 255);
    /* --back-bg-image: url('wrapper_back.svg'); */
    --back-bg-image-direx:url('directions.svg');
    /*slider*/
    --max_height_slider_boxes:28vh; /* !!! only vh !!!! */
    --shadow: 5px 24px 54px rgba(167, 139, 139, 0.5);
    /*size managed in JS*/
    /* --card-init-width: 413px;
    --card-init-height: 678px; */

    /*BACK OF CARD*/
    --img-direx-bg-large: url('directions_large.svg');
    --img-direx-bg-small: url('directions_small.svg');

    /*LOOPS*/
    --bg-box: #ffffff;
    --notactive-opacity: 0.35; /* sets opacity of the loops which are not playing */
    --active-border: rgba(0, 0, 0, 1); /* sets color of the loops-border which is playing */
    --boxes_cont_bg: transparent;
    --boxes_cont_padding: 5px;
    --boxes_cont_border-radius: 10px;
    --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");
    --border: transparent;

    /*MASTER PLAY*/
    --bg-master: transparent;
    --bg-btn-updown: transparent;
    --txt-master: #4B4F53;
    --img-master-play: url("master_play.svg");
    --img-master-stop: url("master_stop.svg");
    --txt_progress_color: #4B4F53;
    
    /*download*/
    --img-download: url("download_img.svg");    
    /* --color-download: blue; */
    
    /*lock*/
    --img-purchase:url("lock.svg");
    /* --color-purchase:red; */

    /*SLIDER*/
    --bg-slider: rgb(231, 231, 231);
    --slider: #4B4F53;
    --slider-size: 20px;

    /*PLAY BUTTONS*/
    --btn-hover: #a1a1a1;
    --txt: grey;
    --txt-box: rgb(209, 209, 209);

    /*MARQUEE*/
    --txt-marquee: grey;

    /*RANDOM*/
    /* --radius-md: 0px; */
    /* --btn-play: #00B93F; */
    /* --btn-stop: red; */
    /* --txt-pre2: yellow; */
    /* --card-border: solid 1px rgb(0, 0, 0); */
    /* border: solid 0.5px white; */
    /* --img-header-right: url("viva_acid_logo2.svg"); for hex value - comment img out */
    /* --bg-header-right: transparent;
    /*  --bg-header-left: transparent; */
    /* --wrapper-color-front:grey; */

    /*HOVER BUTTONS*/
    --pre_1_col: transparent;
    --pre_2_col: transparent;
    --pre_3_col: transparent;
    --pre_4_col: transparent;

    --pre_1_col_hover: transparent;
    --pre_2_col_hover: transparent;
    --pre_3_col_hover: transparent;
    --pre_4_col_hover: transparent;

    --pre_1_col_active: transparent;
    --pre_2_col_active: transparent;
    --pre_3_col_active: transparent;
    --pre_4_col_active: transparent;

    /*desktop presets*/
    /* --pre_1_img_active: url("lrge.svg");
    --pre_2_img_active: url("lrge2.svg");
    --pre_3_img_active: url("lrge3.svg");
    --pre_4_img_active: url("lrge4.svg");

    --pre_1_img_hover: url("lrge_active1.svg");
    --pre_2_img_hover: url("lrge_active2.svg");
    --pre_3_img_hover: url("lrge_active3.svg");
    --pre_4_img_hover: url("lrge_active4.svg");

    --pre_1_img: url("lrge_hover1.svg");
    --pre_2_img: url("lrge_hover2.svg");
    --pre_3_img: url("lrge_hover3.svg");
    --pre_4_img: url("lrge_hover4.svg"); */

    /*mobile presets*/
    --pre_1_sm_img: url("sml_hover.svg");
    --pre_2_sm_img: url("sml_hover2.svg");
    --pre_3_sm_img: url("sml_hover3.svg");
    --pre_4_sm_img: url("sml_hover4.svg");

    --pre_1_sm_img_hover: url("sml_alt.svg");
    --pre_2_sm_img_hover: url("sml2_alt.svg");
    --pre_3_sm_img_hover: url("sml3_alt.svg");
    --pre_4_sm_img_hover: url("sml4_alt.svg");

    --pre_1_sm_img_active: url("sml.svg");
    --pre_2_sm_img_active: url("sml2.svg");
    --pre_3_sm_img_active: url("sml3.svg");
    --pre_4_sm_img_active: url("sml4.svg");

    /*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.05;
    --glow-play-blur: 5px;
    --glow-play-1-col: #00B93F;
    --glow-play-2-col: #00B93F;
    --glow-play-degree: 270deg;

    --glow-play-hover-scale: 1.05;
    --glow-play-hover-blur: 5px;
    --glow-play-hover-1-col: green;
    --glow-play-hover-2-col: green;
    --glow-play-hover-degree: 270deg;

    --glow-stop-scale: 1.05;
    --glow-stop-blur: 5px;
    --glow-stop-1-col: red;
    --glow-stop-2-col: red;
    --glow-stop-degree: 270deg;

    --glow-stop-hover-scale: 1.05;
    --glow-stop-hover-blur: 5px;
    --glow-stop-hover-1-col: orange;
    --glow-stop-hover-2-col: orange;
    --glow-stop-hover-degree: 270deg;

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

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