:root {
   --mobile-font-size :36px;
   --mobile-input-size:30px;   
   --mobile-link-size :26px;   
   --mobile-title-size:12px;
}

/* Тіло сторінки */
/*     background-image:url(/img/fon.jpg); */
body
{
    background-color: #004272;
    background-repeat: repeat;
    color: #FFFFFF;
}

/* Тааблиця */
table 
{
    margin: auto;
    background-color:#404040;
   
}

caption
{
  background-color:#111111;    
}

TH
{
  background: #111111; /* Цвет фона строки заголовка */
  color:#EE8301; 
}

/* Стиль для парних / непарних стрічок */
.gray {
	background-color:#727272;
}

/*Титули сторінки*/
title {
   color:#EE8301; 
}

/*Заголовок 1 типу*/
h1 {
  color: #ffffff; 
  font-size: val(--mobile-font-size);
  text-align: center; 
}

/*Заголовок 2 типу*/
h2 {color: #ff00ff; font-size:16px}

/*Заголовок 3 типу*/
h3 {
    color: #EE8301; 
    font-size:16px;
    text-align: center; 
}

a {color:chartreuse; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}



p {color: #600000; font-size:14px}

.tdInput{
    margin: 0;
    padding: 0;
    width: 100%;
}

.button{
    height:100px;
}

.all{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center; 
    overflow: auto;   
}

.logcentr{
    -webkit-box-shadow: 8px 8px 6px #000000;
    -moz-box-shadow: 8px 8px 6px #000000;
    box-shadow: 8px 8px 6px #000000;
    text-shadow: 1px 1px #000000;
    border: 1px solid #FF7F50;
    background-color: #696969;
    padding: 10px;
    font-family: Verdana, Geneva, sans-serif;
    text-align: left;
    outline: 1px solid #FF7F50;
  }

  .inputhint {
   font-size: 32px;  
   color: #FF7F50; 
  }
  
  .divtitle {
   font-size: 32px;  
   color: #87CEFA; 
  }

  .all{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center; 
    overflow: auto;   
}

.logcentr{
  -webkit-box-shadow: 8px 8px 6px #000000;
  -moz-box-shadow: 8px 8px 6px #000000;
  box-shadow: 8px 8px 6px #000000;
  text-shadow: 1px 1px #000000;
  border: 1px solid #FF7F50;
  background-color: #696969;
  padding: 10px;
  font-family: Verdana, Geneva, sans-serif;
  text-align: left;
  outline: 1px solid #FF7F50;
}

input {
  font-size: var(--mobile-input-size);  
}

.inputhint {
 font-size: var(--mobile-input-size);  
 color: #FF7F50; 
}

.divtitle {
 font-size: var(--mobile-font-size);  
 color: #87CEFA; 
}

.posgreen {
  width: 90%;
 -webkit-box-shadow: 8px 8px 6px #000000;
-moz-box-shadow: 8px 8px 6px #000000;
box-shadow: 8px 8px 6px #000000;
text-shadow: 1px 1px #000000;
border: 1px solid #FF7F50;
background-color: #006400;
padding: 10px;
font-family: Verdana, Geneva, sans-serif;
font-size: var(--mobile-font-size);
color: #87CEFA;
text-align: left;
outline: 1px solid #FF7F50; 
margin: 30px 5% 30px 5%;
}

.posred {
    width: 90%;
   -webkit-box-shadow: 8px 8px 6px #000000;
  -moz-box-shadow: 8px 8px 6px #000000;
  box-shadow: 8px 8px 6px #000000;
  text-shadow: 1px 1px #000000;
  border: 1px solid #FF7F50;
  background-color: #570d0d;
  padding: 10px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: var(--mobile-font-size);
  color: #87CEFA;
  text-align: left;
  outline: 1px solid #FF7F50; 
  margin: 30px 5% 30px 5%;

  }

container {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  background-color: #FF7F50;
}

block {
       padding: 10px;
        margin: 10px;
        background: aqua;
}

.grid-container {
  display: grid;
  grid-template-columns: 3fr 1fr 2fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "art S1 update"
    "name S2 price"
    "name S3 b2b";
  
}

.name {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.3fr 1.7fr;
  gap: 0px 0px;
  grid-template-areas:
    "name_t"
    "name_v";
  grid-area: name;
}

.name_t { grid-area: name_t; 
  background-color: grey;
  color: #000000; 
  font-size: var(--mobile-title-size);
  margin: 0px 10px 10px 0px;
}

.name_v { grid-area: name_v; 
  color: #FFFFFF;
  font-size:var(--mobile-font-size);
}

.art {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.5fr 1.5fr;
  gap: 0px 0px;
  grid-template-areas:
    "art_t"
    "art_v";
  grid-area: art;
}

.art_t { 
  grid-area: art_t; 
  background-color: grey;
  color: #000000; 
  font-size: var(--mobile-title-size);
  margin: 0px 10px 10px 0px;
}

.art_v { grid-area: art_v; 
  color: #FF7F50;
  font-size: var(--mobile-font-size);
  
}

.S1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.5fr 1.5fr;
  gap: 0px 0px;
  grid-template-areas:
    "s1t"
    "s1v";
  grid-area: S1;
}

.s1t { 
  grid-area: s1t; 
  background-color: grey;
  color: #000000; 
  font-size: var(--mobile-title-size);
  margin: 0px 10px 10px 0px;  
}

.s1v { grid-area: s1v; 
 text-align: center; 
 font-size: var(--mobile-font-size);
}

.S2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.5fr 1.5fr;
  gap: 0px 0px;
  grid-template-areas:
    "s2t"
    "s2v";
  grid-area: S2;
}

.s2t { grid-area: s2t; 
  background-color: grey;
  color: #000000; 
  font-size: var(--mobile-title-size);
  margin: 0px 10px 10px 0px;
}

.s2v { grid-area: s2v; 
  text-align: center; 
  font-size: var(--mobile-font-size);
}

.S3 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.5fr 1.5fr;
  gap: 0px 0px;
  grid-template-areas:
    "s3t"
    "s3v";
  grid-area: S3;
}

.s3t { grid-area: s3t; 
  background-color: grey;
  color: #000000; 
  font-size: var(--mobile-title-size);
  margin: 0px 10px 10px 0px;

}

.s3v { grid-area: s3v; 
    display: grid;
    justify-content: center;
    align-content: center;
    text-align: center; 
    font-size: var(--mobile-font-size);
}

.update { grid-area: update; 
  text-align: center; 
  vertical-align: middle; 
  font-size: var(--mobile-title-size);
}

.price {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.5fr 1.5fr;
  gap: 0px 0px;
  grid-area: price;
}

.price_t { grid-area: 1 / 1 / 3 / 2; 
  background-color: grey;
  color: #000000; 
  font-size: var(--mobile-title-size);
  margin: 0px 10px 10px 0px;
  text-align: center; 
}

.price_v { grid-area: 2 / 1 / 3 / 2; 
    display: grid;
    justify-content: center;
    align-content: center;
    text-align: center; 
    color: #FF7F50;  
    background-color: DarkBlue;  
    margin: 10px 0px 10px 0px;
    font-size: var(--mobile-font-size);

}

.b2b { grid-area: b2b; 
    text-align: center; 
    font-size: var(--mobile-title-size); 
}


/*
GRID для списку партнерів контрагентів....
*/

.k-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.2fr 1fr 0.2fr 1fr;
    gap: 0px 0px;
    grid-template-areas:
      "kontr_t kontr_t"
      "kontr_v kontr_v"
      "part_t part_t"
      "part_v part_v"
      "dii_t dii_t"
      "exp exp"
      "podii podii"
      "gmap gmap"
      ;
  }
  
  .kontr_t { 
    grid-area: kontr_t; 
    background-color: grey;
    color: #000000; 
    font-size: var(--mobile-title-size);
    margin: 0px 10px 10px 0px;
  }
  
  .kontr_v { grid-area: kontr_v; 
    color: #FFFFFF;
    font-size:var(--mobile-font-size);
  }

  .kontr_v1 { grid-area: kontr_v; 
    color: Aqua;
    font-size:var(--mobile-font-size);
  }
  
  .part_t {
    grid-area: part_t;
    background-color: grey;
    color: #000000; 
    font-size: var(--mobile-title-size);
    margin: 0px 10px 10px 0px;  
  }
  
  .part_v { grid-area: part_v; 
    color: yellow;
    font-size:var(--mobile-font-size);
  }
  
  .dii_t {
    grid-area: dii_t;
    background-color: grey;
    color: #000000; 
    font-size: var(--mobile-title-size);
    margin: 0px 10px 10px 0px;  
  }
  
  .podii { grid-area: podii; 
    font-size:var(--mobile-link-size);
  }
  .exp { grid-area: exp; 
    font-size:var(--mobile-link-size);
  }
  .gmap { grid-area: gmap; 
    margin: 20px 0px 0px 0px;  
    font-size:var(--mobile-link-size);
    text-align: center; 
    background-color: #004272;
  }

  /*
  Події контрагента...
  */

  .p-grid-container {
    display: grid;
    gap: 0px 0px;
    grid-template-areas:
        "p_t"
        "p_info"
        "p_t1"        
        "p_text" 
        "p_t2"                
        "p_r"        
        "p_t3"                
        "p_a"        
      ;
  }

  .p_t {
    grid-area: p_t;
    background-color: grey;
    color: #000000; 
    font-size: var(--mobile-title-size);
    margin: 0px 10px 10px 0px;  
  } 

  .p_info {
    grid-area: p_info;
    font-size: var(--mobile-link-size);
    margin: 0px 10px 10px 0px;  
  } 

  .p_t1 {
    grid-area: p_t1;
    background-color: grey;
    color: #000000; 
    font-size: var(--mobile-title-size);
    margin: 0px 10px 10px 0px;  
  } 

  .p_text {
    grid-area: p_text;
    font-size: var(--mobile-font-size);
    margin: 0px 10px 10px 0px;  
    color: #ffffff; 
  }

  .p_t2 {
    grid-area: p_t2;
    background-color: grey;
    color: #000000; 
    font-size: var(--mobile-title-size);
    margin: 0px 10px 10px 0px;  
  } 

  .p_t3 {
    grid-area: p_t3;
    background-color: grey;
    color: #000000; 
    font-size: var(--mobile-title-size);
    margin: 0px 10px 10px 0px;  
  } 

  .p_r {
    grid-area: p_r;
    font-size: var(--mobile-link-size);
    margin: 0px 10px 10px 0px;  
  } 

  .p_a {
    grid-area: p_a;
    font-size: var(--mobile-link-size);
    margin: 0px 10px 10px 0px;  
  } 

  /* Блок в якому розміщуються посилання на подальші можливі дії*/
  .block_actions {
    background: #5a5a5a;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    width: 90%;
    margin:  0 5%;  
    padding: 10px;
    border: 2px solid rgba(255,153,0,1);
    text-align: center;
    -webkit-box-shadow: 8px 8px 6px #000000;
    -moz-box-shadow: 8px 8px 6px #000000;
    box-shadow: 8px 8px 6px #000000;
    text-shadow: 1px 1px #000000;
    line-height: 200%;
    font-size: var(--mobile-link-size);
  } 

  .bigbutton {
    background-color:#787878;
    -webkit-border-top-left-radius:8px;
    -moz-border-radius-topleft:8px;
    border-top-left-radius:8px;
    -webkit-border-top-right-radius:8px;
    -moz-border-radius-topright:8px;
    border-top-right-radius:8px;
    -webkit-border-bottom-right-radius:8px;
    -moz-border-radius-bottomright:8px;
    border-bottom-right-radius:8px;
    -webkit-border-bottom-left-radius:8px;
    -moz-border-radius-bottomleft:8px;
    border-bottom-left-radius:8px;
    border:2px solid #deb72a;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size: var(--mobile-link-size);
    height:80px;
    text-align:center;
    text-shadow:1px 1px 0px #000000;
  }.bigbutton:hover {
    background-color:#adadad;
  }.bigbutton:active {
    position:relative;
    top:1px;
  }



.greenbutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #9acc85;
	-webkit-box-shadow:inset 0px 1px 0px 0px #9acc85;
	box-shadow:inset 0px 1px 0px 0px #9acc85;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#74ad5a', endColorstr='#68a54b');
	background-color:#d80936;
	-webkit-border-top-left-radius:0px;
	-moz-border-radius-topleft:0px;
	border-top-left-radius:0px;
	-webkit-border-top-right-radius:0px;
	-moz-border-radius-topright:0px;
	border-top-right-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	-moz-border-radius-bottomright:0px;
	border-bottom-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
	border:0.996094px solid #3b6e22;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
  font-size: var(--mobile-link-size);
  height:50px;
	line-height:50px;
	text-decoration:none;
	text-align:center;
}.greenbutton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #68a54b), color-stop(1, #74ad5a) );
	background:-moz-linear-gradient( center top, #68a54b 5%, #74ad5a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a54b', endColorstr='#74ad5a');
}.greenbutton:active {
	position:relative;
	top:1px;
}

.top-grid-container {
  display: grid;
  width: 90%;
  grid-template-columns: 3fr 1fr;
  gap: 0px 5px;
  grid-template-areas:
    "kl_input kl_button";
}

.kl_title { grid-area: kl_title; 
  background-color: grey;
  color: #000000; 
  font-size: var(--mobile-title-size);
  margin: 0px 10px 10px 0px;  
}

.kl_input { grid-area: kl_input; 
  height:80px;
}

.kl_botton { grid-area: kl_button; }

.evlast-grid-container {
  display: grid;
  grid-template-columns: 4fr 1fr;
  gap: 1px 1px;
  grid-template-areas:
    "men_t kil_t"
    "men_v kil_v"
    "actions_t actions_t"
    "actions_v actions_v";
}

.men_t { grid-area: men_t; 
  background-color: grey;
  color: #000000; 
  font-size: var(--mobile-title-size);
  margin: 0px 10px 10px 0px;  
}

.kil_t { grid-area: kil_t; 
  background-color: grey;
  color: #000000; 
  font-size: var(--mobile-title-size);
  margin: 0px 10px 10px 0px;  
}

/* 
Описано вище
.men_v { grid-area: men_v; } 
*/

.kil_v { grid-area: kil_v; 
  color: #FF7F50;
  font-size: var(--mobile-font-size);
}

.actions_t { grid-area: actions_t; 
  background-color: grey;
  color: #000000; 
  font-size: var(--mobile-title-size);
  margin: 0px 10px 10px 0px;  
}

.actions_v { grid-area: actions_v; }

.evlastitem-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px 1px;
    grid-template-areas:
    "ev_t"
    "ev_info"
    "kontr_t"
    "kontr_v"
    "part_t"
    "part_v"
    "p_t"
    "p_text" 
    "actions_t"
    "actions_v";
}

.ev_t { grid-area: ev_t; 
  background-color: grey;
  color: #000000; 
  font-size: var(--mobile-title-size);
  margin: 0px 10px 10px 0px;  
}