* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
   body {
      background: #F5F5F5;
      font-family: monospace;
    }

    h3 {
      text-align: center;
      color: #5C6773;
      font-weight: normal;
    }
    .container2 {
      max-width: 1100px;
      min-width: 310px;
      margin: 10;
	  padding:20;
	 
	    }
	  .pad {
      padding:20 20 20 20;
    }
    .container {
      max-width: 1400px;
      min-width: 310px;
      margin: 0 auto;
    }

    form {
      text-align: center;
    }

    #river-region {
      margin-bottom: 30px;
    }

    select {
      width: 20%;
	  height: 36px;
    }
	.select_tg {
     width: 30%;
    }
    .selectors-error {
      text-align: center;
      color: #ef5350;
      font-weight: normal;
      font-size: 1.1em;
      margin: 10px 0 0 0;
      visibility: hidden;
      opacity: 0;
      transition: visibility .5s, opacity .5s ease-in-out;
    }

    .selectors-error.show {
      visibility: visible;;
      opacity: 1;
    }
	.accept {
      
      font-family: verdana;
      font-size: 12px;
      color: #B89981;
    }
	
    .copy {
      margin-top: 20px;
      text-align: right;
      font-family: verdana;
      font-size: 12px;
      color: #B89981;
    }
 .f16 {
      background: #f5f5f5;
      font-family: verdana;
      font-size: 16px;
      
    }
    .copy span {
      color: #333333;
    }
html, body {
  width: 100%;
  height: 100%;
  float: left;
  padding: 0;
  margin: 0;
}

.ua2  {
  background: #b6d6df;
   background: #cfd6c5;
  font-family: verdana;
  font-size: 16px;
}
.reg, .ua, .distr {
    background: #dfe6ef;
  font-family: verdana;
  font-size: 16px;
}
.distr2 {
  background: #ded0c9;
  font-family: verdana;
  font-size: 16px;
}
.tdleft{
  margin: 100 50 50 50;
  width: 20%;
 }


h1, h2, h3, h4 {
  padding: 0;
  margin: .1rem 0;
 
  padding-left: 8px;
}

.att {
	
      text-align: left;
      color: #ef3d5f;
      font-weight: bold;
	   font-size: 20px; 
    }
.new_wind {
	
      text-align: left;
      color: #ef3d5f;
      font-weight: normal;
	   font-size: 16px; 
  border: 1; /* No border */
  padding: 10px 10px;
    }

.mb:active {
  /* Стили при нажатии */
  background-color: red;
  transform: translateY(1px); /* Создает небольшой эффект нажатия */
}

.mb2 {
	 width:200;
      text-align: center;
      color: #5C6773;
      font-weight: normal;
    }
	
@keyframes pulse {
  25% { transform: scale(1); }
  50% { transform: scale(1); }
}
	/* Приклад анімації кольору фону */
@keyframes backgroundColorChange {
 50% { transform: scale(1.05); }
 50% { background-color: #edbfc9; }
  50% { transform: scale(1.05); }

}

.mban {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: backgroundColorChange;
}	
	

.mban2 {
animation: pulse 2s infinite; 
}
.mbtg {
	 width:200;
      text-align: center;
      color: #5C6773;
      font-weight: normal;
	      }
.mbdistr {
	 width:200;
      text-align: center;
      color: #5C6773;
      font-weight: normal;
    }		
.mbreg {
	 width:200;
      text-align: center;
      color: #5C6773;
      font-weight: normal;
    }
button {
	width:240;
  background-color: #eeeeee; /*  background */
  color:#ef3d5f;  /* White text */
  font-size: 16px; 
  border: 1; /* No border */
  padding: 10px 20px; /* Padding around the text */
  font-size: 16px;
  cursor: pointer; /* Changes mouse cursor to a hand on hover */
  border-radius: 5px; /* Rounded corners */
  text-align: center; /* Center align text */
  text-decoration: none; /* Remove underline for <a> elements */
  display: inline-block; /* Allows width/height and margin/padding */
   margin: 8px auto;
}
.material-tabs {
  display: block;
  float: left;
  padding: 16px;
  padding-top: 0;
  width: 100%;
  position: relative;
  margin: 32px auto;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19);
}

.visible {
  position: relative;
  opacity: 1;
  width: 100%;
  height: auto;
  float: left;
  -webkit-transition: opacity .35s ease;
  transition: opacity .35s ease;
  z-index: 3;
}

.hidden {
  position: absolute;
  opacity: 0;
  z-index: 0;
  -webkit-transition: opacity 0s ease;
  transition: opacity 0s ease;
}
.hidden img {
  display: none;
}

[class*="tabbed-section-"] {
  float: left;
  color: #000;
}
[class*="tabbed-section-"] img {
  display: block;
  width: 80%;
  margin: 0;
}

.tabbed-section__selector {
  position: relative;
  height: 32px;
  top: -31.2px;
  padding: 0;
  margin: 0;
  width: 100%;
  float: left;
}
.tabbed-section__selector [class*="-tab-"] {
  float: left;
  display: block;
  height: 32px;
  line-height: 32px;
  width: 100px;
  text-align: center;
  background: #fff;
  font-weight: bold;
  text-decoration: none;
  color: #5C6773;
  font-size: 14px;
  margin-right: 0px;
}
.tabbed-section__selector [class*="-tab-"].active {
  color: #ffffff;
   font-size: 16px;
  background: #ef3d5f;
  width:300px;
 font-weight: bold;
  }

.tabbed-section__highlighter {
  position: absolute;
  z-index: 0;
  bottom: 0;
  height: 2px;
  background: #B89981;
  max-width: 300px;
  width: 100%;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  display: block;
  left: 0;
  -webkit-transition: -webkit-transform 0.23s ease;
  transition: -webkit-transform 0.23s ease;
  transition: transform 0.23s ease;
  transition: transform 0.23s ease, -webkit-transform 0.23s ease;
}

.tabbed-section__selector-tab-3.active ~ .tabbed-section__highlighter {
  -webkit-transform: translateX(220px);
          transform: translateX(220px);
}

.tabbed-section__selector-tab-2.active ~ .tabbed-section__highlighter {
  -webkit-transform: translateX(110px);
          transform: translateX(110px);
}

.tabbed-section__selector-tab-1.active ~ .tabbed-section__highlighter {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.divider {
  background: rgba(0, 0, 0, 0.1);
  position: relative;
  display: block;
  float: left;
  width: 100%;
  height: 1px;
  margin: 8px 0;
  padding: 0;
  overflow: hidden;
}