/* variables used only in gradients */
:root {
    --direction: 75deg;
    --gradient-red-orange-1: #f16975;
    --gradient-red-orange-2: #f5915b;
    --gradient-blue-green-1: #75c3e1;
    --gradient-blue-green-2: #85cba7;
    --gradient-violet-blue-1: #8175b5;
    --gradient-violet-blue-2: #75c3e1;
    --gradient-violet-lilac-1: #8175b5;
    --gradient-violet-lilac-2: #b977b1;
    --gradient-brown-1: #b56363;
    --gradient-brown-2: #e0a87f;
    --gradient-pink-1: #bc7199;
    --gradient-pink-2: #dd8791;
    --gradient-gold-1: #cea056;
    --gradient-gold-2: #d6d260;
    --gradient-green-1: #9ebc74;
    --gradient-green-2: #72ccb1;
    --gradient-lightblue-1: #76d4f5;
    --gradient-lightblue-2: #cae7f4;
    --gradient-black-1: #292A2E;
    --gradient-black-2: #37383b;
    --gradient-green-lightblue-1: #d4eef8;
    --gradient-green-lightblue-2: #b6f4b8;
    --gradient-domain-check-tld: linear-gradient(to top, #f1f1f1 0%, #fdffff 100%); /* domain-search */
    --gradient-advice-btn: linear-gradient(to top, rgba(0,0,0,.07) 0%, rgba(255,255,255,.07) 50%, rgba(255,255,255,.07) 100%); /* btn advice in block_plan-table-popup */
}
/* /variables used only for gradients */

/* backgrounds */

/* gradient + stars */
.common_gradient-blue_stars {
    border-top: 1px solid var(--color-blue);
    border-bottom: 1px solid var(--color-blue);
    background: url(/images2019/design/common_bg-stars/stars_common.svg) center center repeat-y, linear-gradient(55deg, #6ab6ed 0%, #6bccef 100%) center top repeat-y;
}
.common_gradient-yellow_stars {
    background: url(/images2019/design/common_bg-stars/stars_common.svg) center top repeat-y, linear-gradient(57deg, #f4eee3 0%, #f1f7e8 100%) center top repeat-y;
}

/* gradient */
.common_gradient-blue {
    background: linear-gradient(55deg, #6ab6ed 0%, #6bccef 100%) center top repeat-y;
}
.common_gradient-sky-blue {
    background: linear-gradient(45.59deg, #0986FC 0%, #6BB7ED 55.98%, #6CCDF0 96.71%);
}
.common_gradient-yellow {
    background-image: linear-gradient(57deg, #f4eee3 0%, #f1f7e8 100%);
}
.common_gradient-gray-blue {
    background: linear-gradient(45deg, #F3F3E7 0%, #99D1E3 50%, #7E8FC3 100%);
}
.common_gradient-ukr-flag {
    background-image: linear-gradient(95deg, rgb(255,249,157) 24%, rgb(106,184,237) 76%);
}
.common_gradient-grey-to-bottom {
    background: linear-gradient(180deg, rgba(245, 247, 249, 0) 0%, #F5F7F9 100%);
}
.common_gradient-light-gray {
    background: linear-gradient(44.69deg, rgba(245, 238, 228, 0.6) 0%, rgba(242, 247, 233, 0.6) 93.5%);
}
.common_gradient-yellow-white {
    background: linear-gradient(81.2deg, var(--text-color-yellow) 9.5%, var(--common-white) 86.94%);
}


/* backgrounds + stars */
.common_background-gray_stars {background: var(--bg-grey-blue) url(/images2019/design/common_bg-stars/stars_common.svg) center center repeat-y;}
.common_background-yellow_stars {background: var(--color-yellow-linen) url(/images2019/design/common_bg-stars/stars_common.svg) center 100px repeat-y;}

/* backgrounds */
.common_background-gray {background-color: var(--bg-grey-blue);}
.common_background-light-gray {background-color: var(--bg-grey-cold);}
.common_background-light-gray2 {background-color: var(--bg-grey-light);}
.common_background-grey-black {background-color: var(--bg-grey-black);}
.common_background-blue-dark {background-color: var(--bg-grey-blue-dark);}
.common_background-lilac {background-color: var(--color-lilac);}


@media only screen and (max-width: 1024px) {
    .common_gradient-blue_stars {
        background: none, linear-gradient(15deg, #6ab6ed 0%, #6bccef 100%) center top repeat-y;
    }
    .common_gradient-yellow_stars {
        background: url(/images2019/design/common_bg-stars/stars_common_mob.svg) center 10px repeat-y, linear-gradient(57deg, #f4eee3 0%, #f1f7e8 100%) center top repeat-y;
    }
}

/* /backgrounds */


/* two-tone gradients */

.common_gradient-red-orange,
.colorblock-gradient-red-orange {
    --color-1: var(--gradient-red-orange-1);
    --color-2: var(--gradient-red-orange-2);
}
.common_gradient-blue-green {
    --color-1: var(--gradient-blue-green-1);
    --color-2: var(--gradient-blue-green-2);
}
.common_gradient-violet-blue,
.colorblock-gradient-violet-blue {
    --color-1: var(--gradient-violet-blue-1);
    --color-2: var(--gradient-violet-blue-2);
}
.common_gradient-violet-lilac,
.colorblock-gradient-violet-lilac {
    --color-1: var(--gradient-violet-lilac-1);
    --color-2: var(--gradient-violet-lilac-2);
}
.common_gradient-brown {
    --color-1: var(--gradient-brown-1);
    --color-2: var(--gradient-brown-2);
}
.common_gradient-pink,
.colorblock-gradient-pink {
    --color-1: var(--gradient-pink-1);
    --color-2: var(--gradient-pink-2);
}
.common_gradient-gold,
.colorblock-gradient-gold {
    --color-1: var(--gradient-gold-1);
    --color-2: var(--gradient-gold-2);
}
.common_gradient-green,
.colorblock-gradient-green {
    --color-1: var(--gradient-green-1);
    --color-2: var(--gradient-green-2);
}

.common_gradient-red-orange,
.common_gradient-blue-green,
.common_gradient-violet-blue,
.common_gradient-violet-lilac,
.common_gradient-brown,
.common_gradient-pink,
.common_gradient-gold,
.common_gradient-green {
    background-image: linear-gradient(var(--direction), var(--color-1) 0%, var(--color-2) 100%);
}

.common_gradient-lightblue {
    --color-1: var(--gradient-lightblue-1);
    --color-2: var(--gradient-lightblue-2);
    --direction: 65deg;
}
.common_gradient-black {
    --color-1: var(--gradient-black-1);
    --color-2: var(--gradient-black-2);
    --direction: 225deg;
}
.common_gradient-green-lightblue {
    --color-1: var(--gradient-green-lightblue-1);
    --color-2: var(--gradient-green-lightblue-2);
    --direction: 267deg;
}

.common_gradient-lightblue,
.common_gradient-green-lightblue {
    background: linear-gradient(var(--direction), var(--color-1) 0%, var(--color-2) 100%);
}
.common_gradient-black {
    background: linear-gradient(var(--direction), var(--color-1) 50%, var(--color-2) 100%);
}

/* /two-tone gradients */


.common_light-violet-blue-gradient {
    background: linear-gradient(91.76deg, #E7E5F4 0%, #F7F7F7 25%, #F7F7F7 50%, #F7F7F7 75%, #D7EEF5 100%);
}


/* gradients based on the primary gradients with 0.1 transparency and black background */

.gradient-black-based {
    background: linear-gradient(55deg, rgba(var(--color-1), 0.1) 0%, rgba(var(--color-2), 0.1) 100%), #000;
}

.gradient-black-based.common_gradient-blue {
    --color-1: 106, 182, 237; /* #6ab6ed */
    --color-2: 107, 204, 239; /* #6bccef */
}

.gradient-black-based.common_gradient-yellow {
    --color-1: 244, 238, 227; /* #f4eee3  */
    --color-2: 241, 247, 232; /* #f1f7e8 */
}

.gradient-black-based.common_gradient-red-orange {
    --color-1: 241, 105, 117; /* #f16975 */
    --color-2: 245, 145, 91; /* #f5915b */
}