:root{
    --green-clr: #52B533;
    --filter-green-clr: brightness(0) saturate(100%) invert(54%) sepia(68%) saturate(483%) hue-rotate(61deg) brightness(97%) contrast(89%);

    --green-darker-clr: #479D2D;

    --filter-green-dark-clr: brightness(0) saturate(100%) invert(13%) sepia(21%) saturate(1030%) hue-rotate(63deg) brightness(93%) contrast(95%);
    --green-dark-clr: #192a15;

    --green-light-clr: #EDF7EA;

    --white-clr: #fff;
    --filter-white-clr: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(76deg) brightness(104%) contrast(104%);

    --black-clr: #212121;
    --black-light-clr: #171A1FCC;
    --filter-black-clr: brightness(0) saturate(100%) invert(10%) sepia(53%) saturate(0%) hue-rotate(139deg) brightness(98%) contrast(96%);

    --grey-clr: #9095a1;
    --filter-grey-clr: brightness(0) saturate(100%) invert(62%) sepia(8%) saturate(430%) hue-rotate(185deg) brightness(95%) contrast(88%);

    --grey-light-clr: #DEE1E6;
    --filter-grey-light-clr: brightness(0) saturate(100%) invert(95%) sepia(2%) saturate(941%) hue-rotate(191deg) brightness(102%) contrast(80%);

    --grey-light-darker-clr: #f6f6f6;

    --grey-darker-clr: #6c707a;
    --grey-dark-clr: #909090;

    --blue-clr: #f6fbf5;

    --error-clr: #EF5350;
    --filter-error-clr: brightness(0) saturate(100%) invert(40%) sepia(58%) saturate(2597%) hue-rotate(333deg) brightness(100%) contrast(88%);

    --warning-clr: #FFB300;
    --success-clr: #4CAF50;
    --info-clr: #2196F3;

    --first-bg-clr: #fff;
    --second-bg-grey-clr: #f9f9fa;
    --second-bg-blue-clr: #f5fbf3;
    --second-bg-dark-clr: #212121;

    --wrapper: 1920px;

    --wrapper-padding: 80px;
    @media (max-width: 1024px){
        --wrapper-padding: 30px;
    }

    --bottom-z-ind: 10;
    --middle-z-ind: 100;
    --top-z-ind: 1000;
}

.wrapper {
    max-width: var(--wrapper);
    margin-left: auto;
    margin-right: auto;

    padding: 0 var(--wrapper-padding);

    @media(max-width: 1600px){
        --wrapper-padding: 60px;
    } @media(max-width: 1400px){
        --wrapper-padding: 50px;
    } @media(max-width: 1200px){
        --wrapper-padding: 30px;
    }
}