/**
 * @description StDesign 2019
 * @copyright  Stavropolpromstroybank 2019
 */
/**********************************************************************************************************************/
/********************************************************************************************  Компановка элементов   */
/**********************************************************************************************************************/

/****************************************** Компановка: (Класический grid) */
div.std.std-grid-40percent, div.std.std-grid-60percent,
div.std.std-grid-c1, div.std.std-grid-c2, div.std.std-grid-c3, div.std.std-grid-c4 {
    display: inline-block;
    height: auto;
    margin: 5px 0;
    position: relative;
}

div.std.std-grid-40percent {
    width: calc(40% - 3px);
}

div.std.std-grid-60percent {
    width: calc(60% - 3px);
}

div.std.std-grid-c1 {
    width: calc(100% - 5px);
    margin: 0 auto;
}

div.std.std-grid-c2 {
    width: calc(50% - 3px);
}

div.std.std-grid-c3 {
    width: calc(33.3333% - 3px);
}

div.std.std-grid-c4 {
    width: calc(25% - 4px);
}

/**********************************************************************************************************************/
/**************************************************************************************************  Элементы формы   */
/**********************************************************************************************************************/

/****************************************** Элемент: Однострочное поле ввода */
input[type=text].std.std-input-text,
input[type=email].std.std-input-text {
    width: calc(100% - 100px);
    max-width: 512px;
    border-radius: 5px;
    border: 1px solid #e4e4e4;
    padding: 5px 10px;
    outline-width: 1px;
    line-height: normal;
    display: inline-block;
}

/* max */
input[type=text].std.std-input-text.max,
input[type=email].std.std-input-text.max {
    padding: 10px;
}

input[type=email].std.std-input-text:focus,
input[type=text].std.std-input-text:focus {
    border-color: #77a8d0;
}

@media only screen and (max-width: 513px) {
    input[type=email].std.std-input-text.elastic,
    input[type=text].std.std-input-text.elastic {
        max-width: calc(100% - 10px);
        margin: 0 5px;
    }
}

/****************************************** Элемент: Многострочнео поле для ввода */
textarea.std.std-textarea {
    width: 100%;
    max-width: 512px;
    padding: 10px;
    border: 1px solid #e4e4e4;
    resize: none;
}

textarea.std.std-textarea.unlock {
    resize: both;
}

@media only screen and (max-width: 513px) {
    textarea.std.std-textarea.elastic {
        max-width: calc(100% - 10px);
        margin: 0 5px;
    }
}

/****************************************** Элемент: Многострочнео поле для ввода */
textarea.std.std-textarea {
    width: 100%;
    max-width: 512px;
    padding: 10px;
    border: 1px solid #e4e4e4;
    resize: none;
}

textarea.std.std-textarea.unlock {
    resize: both;
}

@media only screen and (max-width: 513px) {
    textarea.std.std-textarea.elastic {
        max-width: calc(100% - 10px);
        margin: 0 5px;
    }
}

/****************************************** Элемент: Переключатель */
input[type=radio].std.std-input-radio,
input[type=radio].std.std-input-radio-cc {
    display: none;
    font-size: 14px;
    cursor: pointer;
}

input[type=radio].std.std-input-radio + label,
input[type=radio].std.std-input-radio-cc + label {
    font-weight: normal !important;
    font-size: 16px !important;
    position: relative;
    margin-left: 30px;
    cursor: pointer;
}

/* Default */
input[type=radio].std.std-input-radio + label:before,
input[type=radio].std.std-input-radio-cc + label:before {
    content: '';
    position: absolute;
    left: -28px;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #999;
    box-sizing: unset;
}

input[type=radio].std.std-input-radio-cc:checked + label:before,
input[type=radio].std.std-input-radio:checked + label:before {
    box-sizing: unset;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 1px #000;
}

/* Color*/
input[type=radio].std.std-input-radio-cc:checked + label:before {
    background: #c72444;
    background-color: #c72444;
}

input[type=radio].std.std-input-radio:checked + label:before {
    background: #e0e0e0;
    background-color: #e0e0e0;
}

/* Max */
input[type=radio].std.std-input-radio.max + label:before,
input[type=radio].std.std-input-radio-cc.max + label:before {
    top: -2px;
    width: 18px;
    height: 18px;
}

input[type=radio].std.std-input-radio.max:checked + label:before,
input[type=radio].std.std-input-radio-cc.max:checked + label:before {
    width: 16px;
    height: 16px;
}

/****************************************** Элемент: флажок */
input[type=checkbox].std.std-input-checkbox,
input[type=checkbox].std.std-input-checkbox-cc {
    display: none;
    font-size: 14px;
    cursor: pointer;
}

input[type=checkbox].std.std-input-checkbox + label,
input[type=checkbox].std.std-input-checkbox-cc + label {
    font-weight: normal !important;
    font-size: 16px !important;
    position: relative;
    margin-left: 30px;
    cursor: pointer;
}

input[type=checkbox].std.std-input-checkbox + label:before,
input[type=checkbox].std.std-input-checkbox-cc + label:before {
    content: '';
    position: absolute;
    left: -28px;
    top: 2px;
    width: 12px;
    height: 12px;
    background-color: #fff;
    border: 1px solid #999;
    box-sizing: unset;
}

input[type=checkbox].std.std-input-checkbox:checked + label:before,
input[type=checkbox].std.std-input-checkbox-cc:checked + label:before {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 1px #000;
    border: 3px solid #fff;
    box-sizing: unset;
}

input[type=checkbox].std.std-input-checkbox:checked + label:before {
    background: #e0e0e0;
}

input[type=checkbox].std.std-input-checkbox-cc:checked + label:before {
    background: #c72444;
}

/* Max */
input[type=checkbox].std.std-input-checkbox.max + label:before,
input[type=checkbox].std.std-input-checkbox-cc.max + label:before {
    top: -2px;
    width: 18px;
    height: 18px;
}

input[type=checkbox].std.std-input-checkbox.max:checked + label:before,
input[type=checkbox].std.std-input-checkbox-cc.max:checked + label:before {
    width: 16px;
    height: 16px;
}

/****************************************** Элемент: Выпадающий список */
select.std.std-select {
    width: 100%;
    max-width: 533px;
    display: block;
    border-radius: 5px;
    border: 1px solid #e4e4e4;
    padding: 5px 10px;
}

/* max */
select.std.std-select.max {
    padding: 10px;
}

/**********************************************************************************************************************
    [Ru]: Кнопки, ссылки в виде кнопок.
***********************************************************************************************************************/

/*
    Element: a
*/
a.std.std-btn,
a.std.std-btn-cc,
a.std.std-btn-light,
a.std.std-btn-light-cc,
a.std.std-btn-rect-cc {
    text-decoration: none;
}

/*
    Element: input[type=button].
*/
input[type=button].std.std-btn,
input[type=button].std.std-btn-cc,
input[type=button].std.std-btn-light,
input[type=button].std.std-btn-light-cc,
input[type=button].std.std-btn-rect-cc {

}

/*
    Element: button.
*/
button.std.std-btn,
button.std.std-btn-cc,
button.std.std-btn-light,
button.std.std-btn-light-cc,
button.std.std-btn-rect-cc {

}

a.std.std-btn,
a.std.std-btn-cc,
a.std.std-btn-light,
a.std.std-btn-light-cc,
a.std.std-btn-rect-cc,
input[type=button].std.std-btn,
input[type=button].std.std-btn-cc,
input[type=button].std.std-btn-light,
input[type=button].std.std-btn-light-cc,
input[type=button].std.std-btn-rect-cc,
button.std.std-btn,
button.std.std-btn-cc,
button.std.std-btn-light,
button.std.std-btn-light-cc,
button.std.std-btn-rect-cc {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/****************************************** Элемент: Серая кнопка */
input[type=button].std.std-btn,
button.std.std-btn,
a.std.std-btn {
    border: 0;
    border-radius: 5px;
    padding: 5px 10px;
    color: #000;
    background: #e4e4e4;
    box-shadow: 0 1px 1px grey;
}

/* [Ru]: Стиль при наведении на указателя на кнопку.*/
input[type=button].std.std-btn:hover,
button.std.std-btn:hover,
a.std.std-btn:hover {
    background: #e0e0e0;
}

/****************************************** Элемент: Красная кнопка*/
/* [RU]: Перфикс cc - corporation color.*/
/* [RU]: Стиль: Красный корпоративный цвет.*/
input[type=button].std.std-btn-cc,
button.std.std-btn-cc,
a.std.std-btn-cc {
    border: 0;
    border-radius: 5px;
    padding: 5px 10px;
    color: #fff;
    background: #c72444;
    transition: color 0s ease-in .4s
}

/* [RU]: Наведение на кнопку указателя.*/
input[type=button].std.std-btn-cc:hover,
button.std.std-btn-cc:hover,
a.std.std-btn-cc:hover {
    background: #aa1c35;
}

/* [RU]: Увеличение размера кнопки.*/
input[type=button].std.std-btn-cc.max,
button.std.std-btn-cc.max,
a.std.std-btn-cc.max {
    padding: 10px 15px;
}

/****************************************** Элемент: Кнопка белая кнопка с серой границей */
input[type=button].std.std-btn-light,
button.std.std-btn-light,
a.std.std-btn-light {
    border: 1px solid #e4e4e4;
    background: #fff;
    border-radius: 5px;
    padding: 5px 10px;
    color: #c72444;
}

input[type=button].std.std-btn-light:hover,
button.std.std-btn-light:hover,
a.std.std-btn-light:hover {
    border-color: #c72444;
}

/****************************************** Элемент: Кнопка белая кнопка с красной границей */
/* Префикс cc - corporation color*/
input[type=button].std.std-btn-light-cc,
button.std.std-btn-light-cc,
a.std.std-btn-light-cc {
    border: 1px solid #c72444;
    background: #fff;
    border-radius: 5px;
    padding: 5px 10px;
    color: #c72444;
}

input[type=button].std.std-btn-light-cc:hover,
button.std.std-btn-light-cc:hover,
a.std.std-btn-light-cc:hover {
    background: #c72444;
    color: #fff;
}

/****************************************** Элемент: Красная кнопка без закгруглений */
/* Префикс cc - corporation color*/
input[type=button].std.std-btn-rect-cc,
button.std.std-btn-rect-cc,
a.std.std-btn-rect-cc {
    background: #c72444;
    border: 0;
    padding: 5px 10px;
    color: #fff;
}

input[type=button].std.std-btn-rect-cc:hover,
button.std.std-btn-rect-cc:hover,
a.std.std-btn-rect-cc:hover {
    background: #aa1c35;
}

/* [RU]: Увеличение размера кнопки.*/
input[type=button].std.std-btn-rect-cc.max,
button.std.std-btn-rect-cc.max,
a.std.std-btn-rect-cc.max {
    padding: 10px 15px;
}

/****************************************** Элемент: Серая кнопка без закгруглений */
input[type=button].std.std-btn-rect,
button.std.std-btn-rect,
a.std.std-btn-rect {
    background: #e4e4e4;
    border: 0;
    padding: 5px 10px;
    color: #000;
}

input[type=button].std.std-btn-rect:hover,
button.std.std-btn-rect:hover,
a.std.std-btn-rect:hover {
    background: #e0e0e0;
}