/* colors, fonts, effects, etc. */
$width-mobile-max: 621px;
$width-desktop-small-min: 622px;
$width-desktop-small-max: 962px;
$width-desktop-midd-min: 963px;
$width-desktop-midd-max: 1263px;
$width-desktop-big-min: 1264px;
$width-desktop-big-max: 1564px;

:root {
    --widget-scale: 0px;
    --body-light: #fafaf8;
    //--body-dark: #000;
    --body-dark: #1b1c26;
    --widget-light: #fff;
    //--widget-dark: #111312;
    --widget-dark: #1b1c26;
    --standard-light: #fff;
    --standard-dark: #1c1e22;
    --text-light: #585954;
    --text-dark: #8ea2ab;
    --border-light: #e0e5d5;
    --border-dark: #2b2524;
    --header-light: #292b23;
    --header-dark: #fff;
    --btn-text-light: #3e4237;
    --nav-arrow: #a2c0d4;
    //--accent: #FDCA40;
    --accent: #3bc117;
    --azure: #0496ff;
    --blue: #2662f0;
    --green: #13783e;
    --grass: #7ed321;
    --neon-green: #04e762;
    --pink: #de0d92;
    --red: #ed0423;
    --purple: #6665dd;
    --salmon: #ff715b;
    --orange: #f17105;
    --turquoise: #34d1bf;
    --olive: #6f8738;
    --olive-light: #c1c200;
    --pastel-blue: #87bfff;
    --electro: #29e7cd;
    --light-gray: #fafbfd;
    --light-azure: #bde0f6;
    --haki: #b0b7a1;
    --fb: #3b5998;
    --black: #221d1b;
    --black-2: #0c0c0c;
    --black-3: #3a3a3a;
    --cold-white: #ededed;
    --input-box: #13141b;
    --blue-gradient: linear-gradient(360deg, #0496ff 0%, #28b5e0 100%);
    --body-font: "Open Sans", sans-serif;
    --heading-font: "Montserrat", sans-serif;
    --transition: 0.5s ease;
    --main-sidebar-width: 0;
    --header-active: 0px;
    --card-padding: 20px;
    --primary-color: #3bc117;
    --border-radius: 0.25rem;
    --nav-item-h: 46px;
    --mask-blur: linear-gradient(to bottom, transparent, #2e3035);
    --grid-num: 7;
    --side-open: 250px;
    --side-close: 65px;
    --zindex-in: 50;
    --zindex-welfare: 60;
    --zindex-second: 100;
    --zindex-drawer: 120;
    --zindex-popup: 130;
    --zindex-effect: 140;
    --zindex-install: 150;
    --coin-yellow: #edc349;
    //--progressierBg
    --progressierBg: var(--widget) !important;
    --progressierTxt: var(--text) !important;
    --progressierBackdrop: rgba(0, 0, 0, 0.4) !important;

    --thirdColor: #009553;
    --fourthColor: #00713f;
    --primaryColor: #0aeb88;
    --secondaryColor: #08c974;
    --backgroundColor: linear-gradient(270deg,
            rgb(0, 69, 39),
            rgb(0, 0, 0) 100%);
    --buttonColor: linear-gradient(180deg,
            rgb(8, 201, 116),
            rgb(0, 149, 83) 100%);
    --buttonGray: linear-gradient(180deg, #b3b3b3, #939393);
    --textColor: rgb(255, 255, 255);
    --textGrayColor: #818e99;
    --mainBgColor: #1b1c26;
    --darkColor: #13141b;
    --darkColor1: #272d39;
    --darkColor2: #2e3541;
    --darkColor3: #343b49;
    --warningColor: #ffd118;
    --warningButtonColor: linear-gradient(to bottom, #f7c61d, #ef9a05);
    --disabledButtonColor: linear-gradient(to bottom, #b3b3b3, #939393);
    --errorButtonColor: linear-gradient(to bottom, #ff5a6d, #ce1126);
    --activityBgColor: linear-gradient(180deg,
            rgb(14, 110, 67),
            rgb(5, 73, 45) 99.237%);

    --page-padding: 1rem 1.2rem;
    --zIndex-top: 200;
    --zIndex-side: 300;
    --zIndex-bottom: 400;
    --zIndex-mask: 500;
    --zIndex-popup: 600;
    --zIndex-max: 9999;
    --view-size: 1;
    --landscape-ios: 0vh;
}

//@media screen and (min-width: 414px) {
//    :root {
//        --card-padding: 30px;
//    }
//}
@media screen and (max-width: $width-mobile-max) {
    :root {
        --grid-num: 3.2;
    }
}

@media screen and (min-width: $width-desktop-small-min) and (max-width: $width-desktop-small-max) {
    :root {
        --grid-num: 4;
    }
}

@media screen and (min-width: $width-desktop-midd-min) and (max-width: $width-desktop-midd-max) {
    :root {
        --grid-num: 5;
    }
}

@media screen and (min-width: $width-desktop-big-min) and (max-width: $width-desktop-big-max) {
    :root {
        --grid-num: 6;
    }
}