/* стили адаптивного интерфейса */

/* ------------------------- шрифты ------------------------ */
@font-face {
    /* font-display:auto; */
    font-family:Roboto;
    font-weight:200;
    src:local("Roboto"),
    url(/style/fonts/Roboto/Roboto-Light.ttf) format("truetype")
    }
@font-face {
    /* font-display:auto; */
    font-family:Roboto;
    font-weight:700;
    src:local("Roboto"),
    url(/style/fonts/Roboto/Roboto-Bold.ttf) format("truetype")
    }
@font-face {
    /* font-display:auto; */
    font-family:Roboto;
    font-weight:400;
    src:local("Roboto"),
    url(/style/fonts/Roboto/Roboto-Regular.ttf) format("truetype")
    }
/* --------------------------------------------------------- */

/* ----------------------- default ------------------------- */
* {
    font-family: Roboto; /*ISC*/
    font-size: 14px;
    }
body {
    margin: 0;
    padding: 0;
    }
.display-none {
    display:none;
    }
/* --------------------------------------------------------- */

/* ------------------- главный заголовок ------------------- */
div.header {
    position: sticky;
    top: 0;
    z-index: 99;
    }
div.section-brand-container {
    background: linear-gradient(90deg, #0397C6 0%, #0067BF 100%);
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    }
div.section-brand{
    max-width: 1800px;
    text-align: center;
    display: flex;
    align-items: center !important;
    flex-wrap: wrap;
    align-content: space-between;
    }
div.element-brand {
    /* отступы между элементами, распределение в линию, высота блока, скрыть текст выходящий за рамки блока */
    flex: 0 0 25%;
    height: 2.5rem;  /* обязательно для IE */
    overflow:hidden;
    text-align: center;
    }
div.brand-logo {
    /* после картинки не будет переноса текста, выравнивается по вертикале, следующий элемент чере 0.8, высота картинки*/
    display: inline-block;
    vertical-align: middle;
    height: 2.5rem;
    }
img.brand-logo {
    /* уменьшает картинку по высоте родителя*/
    height: 100%;
    }
div.brand-title {
    /* текст не переносится на следующую линию после картинки, выравнивается по вертикале, и имеет белый цвет*/
    display: inline-block;
    vertical-align: middle;
    padding-left: 0.4rem;
    color: #FFFFFF;
    }

/* --------------------------------------------------------- */
/* ------------------ загаловок раздела -------------------- */
div.header-chapter {
    background: linear-gradient(90deg, #0067BF 0%, #0397C6 100%);
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    height: 2.5rem;
    margin-top: 1px;
    margin-bottom: 1px;
    display: flex;
    align-items: center;  /* вертикальное выравнивание */
    justify-content: center;  /* горизонтальное выравнивание */
    }
div.chapter-title {
    display: inline-block;
    vertical-align: middle;
    color: #FFFFFF;
    }

/* --------------------------------------------------------- */
/* --------------- секция ввода параметров ----------------- */
div.parameters-enter{
    padding: 1px;
    border-bottom: thick double #0397C6;
    }

div.datetime-input{
    margin: 2px;
    padding-bottom: 1px;
    max-width: 840px;
    border-bottom: 1px dashed #becace;
    }

div.datetime-pref{
    display: inline-block;
    min-width: 215px;
    }

.magnitude-block.stats{
    margin: 2px;
    padding-bottom: 1px;
    max-width: 840px;
    border-bottom: 1px dashed #becace;  /*#becace*/
    }

div.magnitude-edit{
    display: inline-block;
    }

div.magnitude-edit.stats{
    min-width: 100px;
    } 

/* ввод параметров выборки по области: трапеция, кольцо, эллипс */
div.area-input{
    margin: 2px;
    padding-bottom: 1px;
    display: flex;
    align-items: center;  /* вертикальное выравнивание */
    justify-content: left;  /* горизонтальное выравнивание */
    max-width: 840px;
    border-bottom: 1px dashed #becace
    }

div.area-input-select {
    min-width: 180px;
    }

div.area-input-element {
    margin-left: 5px;
    }

div.area-grid {
    display: grid; 
    grid-template-columns: 57px, repeat(3, 64px);  /* Будет создано 4 колонки */
    grid-template-rows: repeat(3, 1.4rem);  /* Будет создано 3 ряда */
    gap: 2px;
    }

.area-text-maxlatitude{grid-area: 1/1/2/1;}
.area-input-maxlatitude{grid-area: 1/2/2/4;}
.area-text-minlongitude{grid-area: 2/1/3/1;}
.area-input-minlongitude{grid-area: 2/2/3/3;}
.area-text-maxlongitude{grid-area: 2/4/3/5;}
.area-input-maxlongitude{grid-area: 2/3/3/4;}
.area-text-minlatitude{grid-area: 3/1/4/2;}
.area-input-minlatitude{grid-area: 3/2/4/4;}

.area-text-maxradiuskm{grid-area: 1/1/2/4; min-width: 215px;}
.area-input-maxradiuskm{grid-area: 1/4/2/5;}
.area-text-minradiuskm{grid-area: 2/1/3/4;}
.area-input-minradiuskm{grid-area: 2/4/3/5;}
.area-text-latitude{grid-area: 3/1/4/2;}
.area-input-latitude{grid-area: 3/2/4/3;}
.area-text-longitude{grid-area: 3/4/4/5;}
.area-input-longitude{grid-area: 3/3/4/4;}

.area-text-ela{grid-area: 1/1/2/2; min-width: 113px;}
.area-input-ela{grid-area: 1/2/2/3;}
.area-text-elb{grid-area: 1/4/2/5;}
.area-input-elb{grid-area: 1/3/2/4;}
.area-text-elaz{grid-area: 2/1/3/2;}
.area-input-elaz{grid-area: 2/2/3/3;}
.area-text-ellat{grid-area: 3/1/4/2;}
.area-input-ellat{grid-area: 3/2/4/3;}
.area-text-ellon{grid-area: 3/4/4/5;}
.area-input-ellon{grid-area: 3/3/4/4;}


div.depth-input{
    margin: 2px;
    padding-bottom: 1px;
    max-width: 840px;
    border-bottom: 1px dashed #becace
    }

div.depth-pref{
    display: inline-block;
    min-width: 100px;
    }

div.volcanic-earthquakes-input{
    margin: 2px;
    padding-bottom: 1px;
    max-width: 840px;
    border-bottom: 1px dashed #becace
    }

div.responsibility-input{
    margin: 2px;
    padding-bottom: 1px;
    max-width: 840px;
    border-bottom: 1px dashed #becace
    }

div.zone-input{
    margin: 2px;
    padding-bottom: 1px;
    display: flex;
    align-items: center;  /* вертикальное выравнивание */
    justify-content: left;  /* горизонтальное выравнивание */
    max-width: 840px;
    border-bottom: 1px dashed #becace
    }

div.zone-structure-input{
    margin: 2px;
    padding-bottom: 1px;
    max-width: 840px;
    border-bottom: 1px dashed #becace;
    display: inline-block
    }

/* --------------------------------------------------------- */

/* --------------- секция вывода результатов --------------- */
/* div.show-stats {
    width: 80%;
    max-width: 720px;
    } */

div.stats-element-border-bottom{
    border-bottom: 1px dashed #becace
    }

div.stats-graphs {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    }

div.stats-graph {
    width: 600px;
    min-width: 100px;
    }
img.stats-graph {
    max-width: 100%;
    height: auto;
    }
/* --------------------------------------------------------- */

/* --------------------------------------------------------- */

/* --------------------------------------------------------- */