body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #e3e3e3;
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
}

.header a, .header a:visited {
    color: #fff0d3;
    text-decoration: none;
}

.header, .footer {
    background: #5c5c5c;
    color: #f5f5f5;
    padding: 0;
    text-align: center;
    width: 100%;
}

.header {
    grid-row: 1;
    padding-bottom: 10px;
}

.footer {
    grid-row: 3;
}

.header a, .header a:visited {
    color: #e6994c;
    text-decoration: none;
}

.header a:hover {
    color: #fff1f1;
}

.main {
    grid-row: 2;
    overflow-y: auto;
}

/* editing fields */
/* .container { max-width: 800px; margin: 20px auto; }
.form-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="text"] { width: 100%; padding: 8px; box-sizing: border-box; }
#editor { height: 300px; }
button { padding: 10px 20px; background: #0366d6; color: white; border: none; cursor: pointer; }
button:hover { background: #0256c7; }
.editor-container, #content { max-width: 800px; margin-left: auto; margin-right: auto; padding: 5px;} */

h1 {
    margin: 5px;
    font-size: clamp(1.2rem, calc(2.2vw + 0.5rem), 1.8rem);
}

h3 {
    margin-left: 20px;
    margin-bottom: 5px;
    font-size: clamp(1rem, calc(2.0vw + 0.4rem), 1.5rem);
}

.instruction h4 {
    font-size: clamp(0.9rem, calc(1.9vw + 0.4rem), 1.3rem);
    margin: 0;
    padding: 5px 5px 0 5px;
    background-color: orange;
}

.container {
    padding: 15px;
}

.container a, .container a:visited {
    color: #775700;
    text-decoration: none;
}

.container a:hover {
    text-decoration: underline;
}

.searchContainer {
    max-width: 800px;
    font-size: 14pt;
    margin: 0px 20px 20px 20px;
    display: -ms-inline-grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
    justify-items: left;
    align-items: top;
    grid-template-areas: 'title title title'
                         'substanceCombo substanceCombo substanceCombo'
                         'nameBg nameBg nameBg'
                         'nameEn nameEn nameEn'
                         'description description description'
                         'hazardClass hazardClass hazardClass'  
                         'unNumber unNumber unNumber'
                         'dangerNumber dangers dangers'
                         'imagesContainer imagesContainer imagesContainer'
                         'dangerAnotations dangerAnotations dangerAnotations'
                         'distances distances distances'
                         'instruction instruction instruction';
}

.searchContainer h3 {
    grid-area: title;
    margin: 20px 0 5px 0;
}

#substanceCombo {
    grid-area: substanceCombo;
    width: 100%;
}

.dropDown_text .text {
    width: 100%;
    box-sizing: border-box;
    font-size: 14pt;
    padding: 5px;
}

.dropDown_text {
    position: relative;
    display: block;
}

.dropDown_text .text {
    border: 1px solid grey;
    border-radius: 5px;
    outline: none;
}

.dropDown_text .dropDown{
    display: none;
    position: absolute;
    margin-top: 1px;
    padding: 3px;
    border: 1px grey solid; 
    max-height: 300px;
    overflow-y: auto;
    background-color: white;
}

.dropDown_text .dropDown.open{
    display: block;
}

.dropDown .item {
    padding: 4px;
    cursor: pointer;
    border-bottom: 1px dashed darkgrey;
}

.dropDown .item:hover {
    background-color: #ffc46c;
}

.unNumber {
    padding-left: 5px;
    font-size: 14pt;
    margin-top: 10px;
    grid-area: unNumber;
}

.unNumber #unNumber {
    font-weight: 900;
}

.nameBg {    
    padding-left: 5px;
    font-size: 14pt;
    margin-top: 10px;
    grid-area: nameBg;
}

.nameBg span {
    font-weight: 900;
}

.nameEn {
    padding-left: 5px;
    margin-top: 10px;
    grid-area: nameEn;
}

.description {
    padding-left: 5px;
    margin-top: 10px;
    grid-area: description;
}

.imagesContainer {
    padding-left: 5px;
    margin-top: 10px;
    grid-area: imagesContainer;
}

.plateImage {
    display: inline;
    width: 100px;
    height: 100px;
    margin-right: 10px;
}

.hazardClass {
    padding-left: 5px;
    margin-top: 10px;
    grid-area: hazardClass;
}

.hazardClass #hazardClass {
    font-weight: 900;
}

.dangerNumber {
    padding-left: 5px;
    margin-top: 10px;
    grid-area: dangerNumber;
}

.dangerNumber #dangerNumber {
    font-weight: 900;
}

.dangers {    
    background-color: #e6994c;
    font-weight: 900;
    grid-area: dangers;
    padding: 5px;
}

.dangerAnotations {
    margin-top: 10px;
    grid-area: dangerAnotations;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.polimerization{
    width: 120px;
    height: 100px;
    background-color: rgb(0, 8, 162);
    color: white;
    padding: 5px;
    border-radius: 5px;
    margin-right: 5px;
    word-wrap: break-word;
}

.reactsWithWater{
    width: 120px;
    height: 100px;
    background-color: #b24141;
    color: white;
    padding: 5px;
    border-radius: 5px;
    margin-right: 5px;
    display: inline-block;
}

.reactionProduct{
    width: 120px;
    height: 100px;
    background-color: rgb(34, 139, 34);
    color: white;
    padding: 5px;
    border-radius: 5px;
    margin-right: 5px;
    display: inline-block;
}
.distances {    
    grid-area: distances;
}

.distances h4 {
    background-color: green;
    color: white;
    margin-bottom: 5px;
}

.distanceTable {
    display: grid;
    border-collapse: collapse;
    width: 100%;
    grid-template-areas: 'header initialDistanceHeader dayDistanceHeader nightDistanceHeader'
                         'smallLeakHeader initialDistanceS dayDistanceS nightDistanceS'
                         'bigLeakHeader initialDistanceL dayDistanceL nightDistanceL';
}

.theader {
    background-color: #c8c8c8;
    font-weight: bold;
    padding: 8px;
    text-align: center;
    border: 1px solid #ddd;
}

.smallLeakHeader {
    grid-area: smallLeakHeader;
}

.bigLeakHeader {
    grid-area: bigLeakHeader;
}

.initialDistanceHeader {
    grid-area: initialDistanceHeader;
}

.dayDistanceHeader {
    grid-area: dayDistanceHeader;
}

.nightDistanceHeader {
    grid-area: nightDistanceHeader;
    background-color: #313131;
    color: white;
}

.distanceTable div {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.smallLeak.initialDistance{
    grid-area: initialDistanceS;
}

.smallLeak.dayDistance{
    grid-area: dayDistanceS;
}

.smallLeak.nightDistance{
    grid-area: nightDistanceS;
    background-color: #5c5c5c;
    color:white;
}

.bigLeak.initialDistance{
    grid-area: initialDistanceL;
}

.bigLeak.dayDistance{
    grid-area: dayDistanceL;
}

.bigLeak.nightDistance{
    grid-area: nightDistanceL;
    background-color: #5c5c5c;
    color:white;
}

.instruction {
    grid-area: instruction;
    max-width: 800px;
}

.instruction .description {
    
    padding: 5px;
}

.instruction .ck-content {
    font-size: 14pt;
}

.hidden {
    display: none;
}