@charset "utf-8";

/*
Создаем класс  modalDialog и начинаем формировать внешний вид:

Наше окно будет иметь фиксированное положение, то есть смещаться вниз, если вы будете прокручивать страницу при открытом окне. 
Также наш фон черного цвета  будет расширяться на весь экран.
Фон будет иметь небольшую прозрачность, а также располагаться поверх всех остальных элементов за счет использования свойства z-index.
В завершении устанавливаем переходы для вывода нашего модального окна и скрываем его в неактивном состоянии.
Может быть вы не знаете свойство pointer-events, но оно позволяет контролировать как элементы будут реагировать на нажатие кнопки мыши. 
Мы устанавливаем значение его значение для класса modalDialog, так как ссылка не должна реагировать на нажатие кнопки мыши когда активен псевдо класс “:target”.
*/
.form_callback {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    display: none;
    pointer-events: none;

    /*!!! Для маленьких экранов если в модальном окне много содержимого, показываем скроллбар */
    overflow: auto;

    background-color: rgba(0, 148, 255, 0.3);
    box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.5);
    color: #fff;
}

/*
Теперь добавляем псевдо класс :target и стили для модального окна.

Псевдо класс target изменяет режим вывода элемента, поэтому наше модальное окно будет выводиться при нажатии на ссылку. 
Также мы изменяем значение свойства  pointer-events.
Мы определяем ширину модального окна и положение на странице. 
Также определяем градиент для фона и скругленные углы.
*/
.form_callback:target {
    display: block;
    pointer-events: auto;
}

.form_callback-content {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 5px;

    background-color: rgba(0, 148, 255, 1);
    box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
    color: #fff;
}

.form_callback-content  h3 {
    margin-top: 10px;
    margin-bottom: 10px;
    color: #fff;
}

.form_callback-content fieldset {
    height: 50px;
    margin: 10px;
}

.form_callback-content legend {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #fff;
}

/*
Теперь нужно реализовать функционал закрытия окна. Формируем внешний вид кнопки:

Для нашей кнопки устанавливаем фон и положение текста. 
Затем позиционируем кнопку, делаем ее круглой с помощью свойства скругления рамки и формируем легкую тень. 
При наведении курсора мыши на кнопку будем изменять цвет фона.
*/
.form_callback_close {
    background: #0099ff;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    text-align: center;
    right: 3px;
    top: 1px;
    width: 26px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.form_callback_close:hover {
    background:  red;
    color: #FFFFFF;
}

.form_callback_input{
    width:100%;
    height:30px;
    padding:5px;
    border-radius:3px;
    border:rgba(0,0,0,.3) 1px solid;
    box-sizing:border-box;
    font-size:0.9em;
    color:blue;
}

.form_callback_descript{
    width:100%;
    padding:5px;
    border-radius:3px;
    border:rgba(0,0,255,.3) 1px solid;
    box-sizing:border-box;
    font-size:0.9em;
    color:blue;
}


.form_callback_checkbox{
    margin: 10px;
    padding: 10px;
    display:inline-block;
}

.form_callback_checkbox_label{
    margin-right: 10px;
}

/* кнопка "отправить" формы */
.form_callback_btn{
    width:100%;
    height:45px;
    border-radius:3px;
    border:rgba(0,0,0,.3) 1px solid;
    box-sizing:border-box;
    background: rgba(255, 255, 255, .6);
    font-size:0.9em;
    color:#555;
    transition:background .4s;
}
/* Изменение фона кнопки при наведении */
.form_callback_btn:hover{
    background: rgba(255, 255, 255, .8);
    color:blue;
}
.form_callback_btn:disabled, .form_callback_btn:hover:disabled {
    background-color: rgba(0,0,0,.3);
    border: 1px solid rgba(0, 0, 0, .3);
    cursor: not-allowed;
    color:white;
}