body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
html {    padding-bottom: 6em;}
.preview img {height:100px; width: auto;}
.text-red {color: red;}
.text-green {color: green; font-weight: bold;}
.text-center {text-align: center;}
.text-left {text-align: left;}
.bag-image-sheet, .bag-image-sheet div {
	width: 100%;
	height: 300px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.calcHeader {
    font-size: 1.4em;
    padding: 5px;
    width: -moz-fit-content;
    width: fit-content;
}
.calc-article {
    text-align: center;
    max-width: 50vw;
}
.calc-article__desc {
    font-weight: 600;
}
.calc-article__head {
    text-transform: capitalize;
    font-weight: 200;
}
.ramka {
    /* border: #f60c0c 2px dashed; */
    border: #e5e5e5 2px dashed;
    /* background: azure; */
    padding: 0;
    border-radius: 20px;
    position: relative;
    width: 100%;
    max-height: 1000px;
    z-index: 3;
    top: 0;
    margin: 3px 0 10px;
}
.ramka__form {
    border: #f60c0c 2px dashed;
}
.clear {clear:both;}
.calcValue {
    position: relative;
    top: -11px;
    background: white;
    font-size: 18px;
    padding: 0 14px;
    line-height: 20px;
    left: 24px;
    margin: 0;
}
.calcResultBlock {
    /*background: #84ffde;*/
    text-align: center;
    clear: both;
    border-radius: 20px;
    width: fit-content;
    margin: 11px auto;
    border: 1px solid gray;
    padding: 1em 1em 0 1em;
}
.calcResultBlock * {
    margin: 0;
    padding: 0;
}
.calcResult {
    /*display: none;*/
}
.calcResult, .calcShtrih {
    text-transform: uppercase;
    text-align: center;
}
.calcShtrih img {
    margin: 1em 0 0 0;
    width: 150px;
    height: auto;
}
.c-md-half .calc-price, .c-md-half .calc-msg {
    font-size: 2em;
    opacity: 1;
    margin: 10px 0;
}
.calc-price-for-bag {
    font-size: 1em;
    text-transform: uppercase;
    font-weight: 200;
}
.calc-price-fixed {
    background-color: white;
    position: fixed;
    bottom: 10px;
    left: 10px;
    border-radius: 5px;
    padding: 5px 20px;
    z-index: 999;
    text-align: center;
    box-shadow: 3px 3px 5px 0 #9c9c9c;
}
.calc-price-fixed.green-bg {
    /*background-color: #adffad;*/
    border: 2px green solid;
}
.calc-price-fixed.red-bg {
    border: 2px red dashed;
    /*background-color: #ffa08b;*/
}

.calc-price-fixed .calc-msg {
    font-size: 1.3em;
}
.calc-price-fixed p {
    line-height: 1em;
    margin: 0 0 0.3em 0;
}
.calc-price-fixed .calc-price {font-size: 1.5em;}
select {
	width: 100%;
	max-width: 300px;
    color: #00a9d6;
    border-color: #00a9d6;
	font-size: 1.5em;
    line-height: 2em;
    padding: 6px;
}
.help {color: #888;}
label, .calc-price {
    color: #00a9d6;
}
#color-scheme label {
    font-size: 1.5em;
}
ul > li {
        list-style: none;
}

.next-block {

    /*visibility: hidden;*/


    display: none;
    width: 100%;
    background: url("../img/next-block.png");
    float: none;
    clear: both;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    filter: grayscale(1) blur(2px);
    position: relative;
    z-index: 2;
    left:0;
    top:0;
    opacity: 1;
    margin: 0 20px;
}

input[type="submit"], input[type="text"], input[type="password"], textarea.payer {
    padding: 10px 20px;
    border: solid 1px gainsboro;
    border-radius: 20px;
    font-size: 15px;
    color: gray;
    font-weight: lighter;
    width: calc(100% - 40px);
}
textarea.payer {
    min-height: 80px;
}
input[type="text"] {
}
input[type="submit"] {
    background: #02c4fa;
    text-transform: uppercase;
    color: white;
    width: 100%;
}
input[type="submit"]:hover, input[type="submit"]:active  {
    background: dodgerblue;
}
.ramka__form .text-left p.text {
    padding-left: 20px;
}
.container {
    position: relative;
    float: left;
    margin: 0;
    width: 100%;
}

#bag-type li {
    width: 33%;
}
#bag-type label:before {
    display: block;
    content: " ";
    width: 100%;
    height: 4em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
}


ul#bag-type {
    position: relative;
}

#bag-type label {
    text-align: center;
    width: 100%;
    display: block;
    padding: 1em 0;
}
#bag-type input[type="radio"]:checked+label,
#bag-type input[type="radio"]+label:hover{
    background: #eaeaea;
    border-radius: 5px;
}
#result_form {visibility: hidden;}

input[name="Цвет"]+label:before {
    width:1em;
    height: 1em;
    display:inline-block;
    margin-right: 0.5em;
    margin-bottom: -0.2em;
    border: solid thin lightgray;
    content: "";
    /*text-align: center;*/
    /*font-size: 16px;*/
    /*color: gray;*/
    background: url("../img/q.png") no-repeat center center;
    background-size: 100%;
    background-size: contain;
    line-height: 0.9;
}

input[value^="Крафт"]+label:before,
input[value^="крафт"]+label:before,
input[value^="натуральный"]+label:before {
    background: #c19f76;
}

input[value^="гранатовый"]+label:before {
    background: #9c1c30;
}

input[value^="лайм"]+label:before {
    background: #31c730;
}

input[value^="песочный"]+label:before {
    background: #dfbc72;
}

input[value^="солнечный"]+label:before {
    background: #f2f200;
}

input[value^="тиффани"]+label:before {
    background: #07afae;
}

input[value^="фуксия"]+label:before {
    background: #bd2077;
}


input[value^="шоколадный"]+label:before {
    background: #43251a;
}

input[value^="ярко-красный"]+label:before {
    background: #ed0000;
}

input[value^="бордовый"]+label:before {
    background: #b42a2c;
}

input[value^="Прозрачный"]+label:before,
input[value^="прозрачный"]+label:before{
    background: linear-gradient(135deg, #ffffff 20%, #f1f1f1 40%, #ffffff 60%, #e6eaff 80%);
}

input[value^="Матовый"]+label:before,
input[value^="матовый"]+label:before{
    background: linear-gradient(45deg, #cccccc 20%, #f5f5f5 40%, #fafafa 60%, #e1e1e1 80%);
}

input[value^="Белый"]+label:before,
input[value^="белый"]+label:before {
    background: #fff;
}
input[value^="Чёрный"]+label:before,
input[value^="черный"]+label:before {
    background: #000;
}
input[value^="Серебристый"]+label:before {
    background: #c0c0c0;
}
input[value^="Золотистый"]+label:before {
    background: #808000;
}
input[value^="Жёлтый"]+label:before {
    background: #ff0;
}
input[value^="Салатовый"]+label:before {
    background: #14f708;
}
input[value^="Зелёный"]+label:before,
input[value^="зеленый"]+label:before {
    background: #008000;
}
input[value^="Тёмно-зелёный"]+label:before {
    background: #013220;
}
input[value^="Голубой"]+label:before {
    background: #09f;
}
input[value^="Синий"]+label:before,
input[value^="синий"]+label:before {
    background: #00f;
}
input[value^="Тёмно-синий"]+label:before,
input[value^="темно-синий"]+label:before {
    background: #006;
}
input[value^="Фиолетовый"]+label:before,
input[value^="фиолетовый"]+label:before {
    background: #93c;
}
input[value^="Розовый"]+label:before {
    background: #ff69b4;
}
input[value^="Бордовый"]+label:before {
    background: #9b2d30;
}
input[value^="Красный"]+label:before,
input[value^="красный"]+label:before {
    background: #f00;
}
input[value^="Оранжевый"]+label:before,
input[value^="оранжевый"]+label:before {
    background: #ffa500;
}
input[value^="Бежевый"]+label:before {
    background: #fffeb6;
}
input[value^="Коричневый"]+label:before {
    background: #633;
}
input[value="бежевый на крафте"]+label:before {
    background: linear-gradient(135deg, #e5d5bc 0%, #e5d5bc 50%, #c19f76 50%, #c19f76 100%);
}
input[value="коричневый на крафте"]+label:before {
    background: linear-gradient(135deg, #682404 0%, #682404 50%, #c19f76 50%, #c19f76 100%);
}

input[value="красный на крафте"]+label:before {
    background: linear-gradient(135deg, #f00 0%, #f00 50%, #c19f76 50%, #c19f76 100%);
}
input[value="синий внутри крафт"]+label:before {
    background: linear-gradient(135deg, #00f 0%, #00f 50%, #c19f76 50%, #c19f76 100%);
}
input[value="черный внутри крафт"]+label:before {
    background: linear-gradient(135deg, #000 0%, #000 50%, #c19f76 50%, #c19f76 100%);
}
input[value="Крафт"]+label,
input[value="крафт"]+label,
input[value="белый"]+label,
input[value="Белый"]+label,
input[value="натуральный"]+label {
    text-transform: uppercase;
}

#slaid-1 input+label:before {background-color: transparent;}

.open-invoice, .open-invoice:visited {color: deepskyblue}
.open-invoice:hover, .open-invoice:active {color: dodgerblue}