/* https://spotter.uz CSS */

body {
  background-color: white;
  margin: 0;
}

.header_top {
  background-color: rgba(4, 196, 255, 0.5);
	display: -webkit-lex;
  display: flex;
  width:100%;
  height: 10vh;
  overflow:hidden;
}

.header_text {
  color: rgba(50, 50, 250, 0.9);
  font-size:2vh;
  text-align:center;
  font-family:sans-serif;
  font-weight: normal;
  float: none;
  font-style: italic;
  display: block;
  width: 40vw;
}

.header_text a {
  text-decoration: none;
}

.capital {
  font-size:2vh;
  font-family:sans-serif;
  font-weight: bold;
}

p::first-letter, h4::first-letter, .h4::first-letter {
  /*font-size:2vh;*/
  font-family:sans-serif;
  font-weight: bold;
  color: rgba(0, 156, 205, 0.9);
  padding: 0 2px 10px 15px;
  text-shadow: 1px -1px 1px navy;
}

.c {
  /*font-size:2vh;*/
  font-family:sans-serif;
  font-weight: bold;
  color: rgba(0, 156, 205, 0.9);
  padding: 0 2px 10px 0;
  text-shadow: 1px -1px 1px navy;
}

.c1 {
  font-family:sans-serif;
  font-weight: bold;
  color: rgba(0, 156, 205, 0.9);
  padding: 0 2px 10px 0;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(240,240,255, 0.8);
}

ul.topnav li {
  float: left;
}

ul.topnav li a, .dropbtn {
  display: block;
  color: navy;
  text-align: center;
  padding: 5px 16px;
  text-decoration: none;
}

ul.topnav li a:hover:not(.active) {
  background-color: rgba(26, 198, 241, 0.212);
  text-shadow: 1px -1px 1px;
}

ul.topnav li a.active:hover {
  background-color: rgba(26, 198, 241, 0.404);
  text-shadow: 1px -1px 1px;
}

ul.topnav li a.active {
  background-color: rgba(21, 162, 197, 0.746);font-weight: bold;
}

ul.topnav li.right {
  float: right;
}

.main_block_p li::marker, .main_block_c li::marker {
  color: rgba(0, 0, 255, 0.9);
}

.main_block_p li:before, .main_block_c li:before {
  color: rgba(0, 0, 255, 0.9);
  content: "\2708   ";
}

.main_block_p ul, .main_block_c ul {
  list-style: none;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(240,240,255, 0.8);
  min-width: 80px;
  box-shadow: 0px 8px 16px 0px rgba(160, 159, 159, 0.2);
  z-index: 1;
  float: none;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.right:hover .dropdown-content {
  display: block;
}

hr {
  color: rgba(255, 0, 0, 0.7)
}

.hr_b {
	height:1px;
	border-width: 1px;
	color:rgba(0, 156, 205, 0.9);;
	background-color:navy;
	width: 20%;
	text-align: left;
	margin: 0px;
}

.main_block {
  width:100%;
  overflow:hidden;
  color: rgba(5, 12, 112, 0.9);
  /*font-size:2vh;*/
  text-align:left;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  padding: 10px;
}

.bg {
  opacity: 0.4;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

.main_block_p {
  position: relative;
}

.main_block_g {
  width:100%;
  overflow:hidden;
  color: rgba(5, 12, 112, 0.9);
  /*font-size:2vh;*/
  text-align:left;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  padding: 10px;
}

.footer {
  background-color: rgba(2, 190, 128, 0.4);
  width:100%;
  height: 10vh;
  overflow:hidden;
  color: rgba(68, 102, 24, 0.9);
  font-size:2vh;
  text-align:center;
  font-family:sans-serif;
  font-weight: normal;
  font-style: italic;
  opacity: 0.9;
}

.travel {
  width: 30vw;
}

.travel picture {
  height: 100%;
  float: right;
}

.travel img {
  height: 100%;
  float: right;
}

.logo {
  width: 30vw;
}

.logo img {
  height: 100%;
  float: left;
}

.hide {
  display: none;
}

.responsive {
  padding: 6px 6px;
 /* float: left;*/
  display: inline-table;
  /* Set width to 24.99 for 4 pictures per row, 19.99 for 5, 16.599 for 6 */
  width: 16.5%;
}

div.gallery, .overlay img {
  border: 1px solid rgba(50, 50, 250, 0.9);
	display: flow-root;
}

div.gallery:hover {
  border: 1px solid rgba(0, 156, 205, 0.9);
}

div.gallery img, div.cv img {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
}

div.gallery img:hover{
  opacity: 0.9;
}

div.cv {
  border: 1px solid rgba(50, 50, 250, 0.9);
  border-radius: 10px;
}

div.cv:hover {
  border: 1px solid rgba(0, 156, 205, 0.9);
}

div.desc {
  padding: 15px;
  text-align: center;
}

div.desc h3, div.desc .h3 {
  font-style: italic;
  text-align: center;
  margin-top: 0;
}

p.desc {
  text-align: center;
}

* {
  box-sizing: border-box;
}

.desc td:nth-child(even) {
  text-align: right;
  width: 90%;
}

.desc td:nth-child(odd) {
  text-align: left;
  width: 10%;
}

.link:hover {
  background-color: rgba(26, 198, 241, 0.1);
  font-weight: bold;
}

.link a {
  display: block;
  height: 100%;
  width: 100%;
}

.cv {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width:100%;
  overflow:hidden;
}

.cv table {
  margin: 0 5px;
  width: 98%;
}

.cv img.icon {
  height: 32px;
  width: auto;
}

.main_block_c {
/*  position: relative; */
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 620px) {
  ul.topnav li.right, ul.topnav li {
    float: none;
  }
  .travel {
    display: none;
  }
}

@media only screen and (max-width: 5000px) {
  .main_block_c {
    width: 1200px;
  }
}

@media only screen and (max-width: 2000px) {
  .responsive {
    width: 24%;
    margin: 6px 6px;
  }
  .main_block_c {
    width: 750px;
  }
}

@media only screen and (max-width: 1500px) {
  .responsive {
    width: 32%;
    margin: 6px 6px;
  }
  .main_block_c {
    width: 50%;
  }
}

@media only screen and (max-width: 1000px) {
  .responsive {
    width: 47%;
    margin: 6px 6px;
  }
  .main_block_c {
    width: 75%;
  }
}

@media only screen and (max-width: 620px) {
  .responsive {
    width: 100%;
  }
  .main_block_c {
    width: 100%;
  }
  div.news_line img
  {
	  width: 95vw;
  }
}

b {
  text-shadow: 1px -1px 1px navy;
}

.nav_center {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.nav_sa {
	justify-content: space-around;
}

.status-msg {
  /*font-size:2vh;*/
  font-family:sans-serif;
  font-weight: bold;
  color: rgba(205, 0, 0, 0.9);
  padding: 0 2px 10px 0;
  text-shadow: 1px -1px 1px violet;
}

.status-msg-ok {
  color: rgba(0, 205, 0, 0.9);
  text-shadow: 1px -1px 1px avocado;
}

.flex {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.pad_icon {
	padding-left: 2px;
	padding-right:2px;
	padding-top: 4px;
	padding-bottom: 2px;
}

.disclaimer {
	padding-left: 15px;
	padding-right: 15px;
}

.t_center {
	text-align: center;
	cursor: not-allowed;
}

.t_right {
	text-align: right;
}

.f_large {
  font-size: large;
	text-align: center;
}

input:valid, textarea:valid {
	background-color: rgba(0, 150, 0, 0.05);
}

input:invalid:focus, textarea:invalid:focus, .tr_e{
	background-color: rgba(255, 0, 0, 0.3);
}

input:invalid, textarea:invalid{
	background-color: rgba(255, 0, 0, 0.1);
}

div.table_links {
	width: 100%;
	display: table;
}

form.tr, div.tr, .tr_e, .tr_w, .tr_i {
	display: table-row;
}

form.tr:nth-child(even), div.tr:nth-child(even), div.news_article:nth-child(even), div.grid_8:nth-child(even),form.grid_8:nth-child(even){
	background-color:  rgba(0, 150, 0, 0.05);
}

span.th {
  background-color: rgba(4, 196, 255, 0.3);
	text-align: center;
	display: table-cell;
  font-weight: bold;
	border: 1px solid white;
	vertical-align: middle;
}

span.td, span.td_icon, input.td {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

.tr_w{
	background-color: rgba(200, 200, 0, 0.15);
}

.tr_i{
	background-color: rgba(0, 0, 200, 0.15);
}


form.tr:hover, div.tr:hover, .tr_w:hover, .tr_e:hover, .tr_i:hover {
  font-weight: bold;
}

div.th {
	display: table-caption;
}

span.td_icon:hover div{
	display: flex;
	opacity: 1;
}

span.td_icon:hover span{
	display: flex;
	opacity: 1;
}


.overlay {
	position: relative;
	top: 0;
	left: 0;
	height: 2px;
	width: auto;
	transition: .3s ease;
	display: none;
}

.main_block_t, .astext{
  width:100%;
  overflow:auto;
  color: rgba(5, 12, 112, 0.9);
  /*font-size:2vh;*/
  text-align:left;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  padding: 10px;
}

.margin_5 {
	border: 1px solid rgba(50, 50, 250, 0.9);
  border-radius: 6px;
	margin: 5px;
}
.padding_5_15 {
  color: navy;
  text-align: center;
  padding: 5px 16px;
  text-decoration: none;
}
.button {
	border-radius: 3px;
}

.red {
	color: rgba(255, 10, 10, 0.9);
}

.red:disabled {
	color: rgba(30, 0, 0, 0.5);
	background-color: rgba(10, 0, 0, 0.1);
}

sup {
	font-size: 0.5em;
}

span.td.left, .left {
	text-align: left;
}

.grid_n {
	display: grid;
	grid-template-columns: 3% 7% repeat(3,5% 24%) 3%;
}

.rs2 {
	grid-row: span 2;
}

.cs2 {
	grid-column: span 2;
}

.cs9 {
	grid-column: span 9;
}

.grid_8 {
	display: grid;
	grid-template-columns: 3% 7% repeat(3,5% 24%) 3%;
	grid-column: span 9;
}
cite, blockquote{
  color: rgba(0, 72, 100, 0.9);
	background-color: rgba(0, 0, 180, 0.1);
	border-radius: 3px;
	border: 1px solid rgba(0, 130, 180, 0.7);
	display: inline-flex;
}

q{
  color: rgba(0, 72, 100, 0.9);
	background-color: rgba(0, 0, 180, 0.1);
}
mark {
	background-color: rgba(0, 255, 100, 0.3);
}

summary {
	text-align: center;
  font-weight: bold;
  padding: 0 2px 10px 0;
  color: rgba(0, 156, 205, 0.9);
  text-shadow: 1px -1px 1px navy;
  cursor: n-resize;
}

@media (prefers-color-scheme: dark) 
{
	body {
	  background-color: #565660;
	}

	a, a:visited
	{
					color: #35cc9a;
	}

	a:hover
	{
					color: #55ecba;
	}
	
	.header_top {
	  background-color: rgba(0, 195, 255, 0.5);
	}
	
	.header_text {
	  color: rgba(50, 50, 250, 0.9);
	}
	
	.header_text a {
	  text-decoration: none;
		color: #fffcd4;
	}
	
	.capital {
	  font-weight: bold;
		color: #ffffff;
	}
	
	p::first-letter, h4::first-letter, .h4::first-letter {
	  color: rgba(0, 156, 205, 0.9);
	  text-shadow: 1px -1px 1px navy;
	}

	h4, .h4
	{
					color: #c8dbf4;
	}

	.c {
	  /*font-size:2vh;*/
	  color: rgba(0, 156, 205, 0.9);
	  text-shadow: 1px -1px 1px navy;
	}
	
	.c1 {
	  color: rgba(0, 156, 205, 0.9);
	}
	
	ul.topnav {
	  background-color: rgba(174,174,185, 0.8);
	}
	
	
	ul.topnav li a, .dropbtn {
	  color: navy;
	}
	
	ul.topnav li a:hover:not(.active) {
	  background-color: rgba(26, 198, 241, 0.212);
	}
	
	ul.topnav li a.active:hover {
	  background-color: rgba(26, 100, 140, 0.404);
	}
	
	ul.topnav li a.active {
	  background-color: rgba(53, 110, 132, 0.75);
	}
	
	.main_block_p li::marker, .main_block_c li::marker {
	  color: rgba(0, 0, 255, 0.9);
	}
	
	.main_block_p li:before, .main_block_c li:before {
	  color: rgba(0, 0, 255, 0.9);
	}
	
	
	.dropdown-content {
	  background-color: rgba(240,240,255, 0.8);
	  box-shadow: 0px 8px 16px 0px rgba(160, 159, 159, 0.2);
	}
	
	.dropdown-content a {
	  color: black;
	}
	
	hr {
	  color: rgba(255, 0, 0, 0.7)
	}
	
	.hr_b {
		color:rgba(0, 156, 205, 0.9);;
		background-color:navy;
	}
	
	.main_block {
	  color: rgba(123, 211, 238, 0.9);
	}
	
	.bg {
	}
	
	
	.main_block_g {
	  color: rgba(98, 211, 238, 0.9);
	}
	
	.footer {
	  background-color: rgba(56, 234, 175, 0.57);
	  color: rgba(141, 251, 0, 0.9);
	  opacity: 0.9;
	}
	
	div.gallery, .overlay img {
	  border: 1px solid rgba(50, 50, 250, 0.9);
	}
	
	div.gallery:hover {
	  border: 1px solid rgba(0, 156, 205, 0.9);
	}
	
	div.gallery img:hover{
	  opacity: 0.9;
	}
	
	div.cv {
	  border: 1px solid rgba(50, 50, 250, 0.9);
	}
	
	div.cv:hover {
	  border: 1px solid rgba(0, 156, 205, 0.9);
	}
	
	
	.link:hover {
	  background-color: rgba(26, 198, 241, 0.1);
	}
	
	.link a {
	}
	
	b {
	  text-shadow: 1px -1px 1px navy;
	}
	
	
	.status-msg {
	  color: rgba(205, 0, 0, 0.9);
	  text-shadow: 1px -1px 1px violet;
	}
	
	.status-msg-ok {
	  color: rgba(0, 205, 0, 0.9);
	  text-shadow: 1px -1px 1px avocado;
	}
	
	
	input[type='text']:valid, textarea:valid {
		background-color: rgba(0, 255, 64, 0.1);
		color: #ffffff;
	}
	
	input[type='text']:valid:focus, textarea:valid:focus {
		background-color: rgba(0, 64,255, 0.1);
		color: #ffffff;
	}
	
	
	input[type='text']:invalid:focus, textarea:invalid:focus, .tr_e
	{
		background-color: rgba(255, 0, 0, 0.3);
		color: #ffffff;
	}
	
	input[type='text']:invalid, textarea:invalid{
		background-color: rgba(255, 0, 0, 0.1);
		color: #ffffff;
	}

	input[type='button'], input[type='submit'], button, input[type='reset']
	{
		background-color: #7d97b3;
	}
	
	form.tr:nth-child(even), div.tr:nth-child(even), div.news_article:nth-child(even), div.grid_8:nth-child(even),form.grid_8:nth-child(even){
		background-color:  rgba(20, 140, 247, 0.12);
	}
	
	span.th {
	  background-color: rgba(4, 196, 255, 0.3);
		border: 1px solid white;
	}
	
	.tr_w{
		background-color: rgba(249, 249, 5, 0.5);
	}
	
	.tr_i{
		background-color: rgba(0, 0, 200, 0.15);
	}
	
	.main_block_t {
	  color: rgba(5, 12, 112, 0.9);
	}
	
	.margin_5 {
		border: 1px solid rgba(50, 50, 250, 0.9);
	}
	.padding_5_15 {
	  color: navy;
	}
	
	.red {
		color: rgba(255, 10, 10, 0.9);
	}
	
	.red:disabled {
		color: rgba(30, 0, 0, 0.5);
		background-color: rgba(10, 0, 0, 0.1);
	}
	
	cite, blockquote{
	  color: rgba(0, 183, 253, 0.79);
		background-color: rgba(0, 180, 138, 0.11);
		border: 1px solid rgba(0, 130, 180, 0.7);
	}
	
	q{
	  color: rgba(0, 183, 253, 0.79);
		background-color: rgba(0, 180, 138, 0.11);
	}

	mark {
		background-color: rgba(0, 255, 100, 0.3);
	}
	
	summary {
	  color: rgba(0, 205, 176, 0.9);
	  text-shadow: 1px -1px 1px navy;
	}

	.disclaimer
	{
		color: #6abfe8bf;
	}

	.main_block_g input[readonly]
	{
		background-color: #565660;
	}
}

.ato
{
   @media only screen and (max-width: 2000px)
   {
      writing-mode:vertical-lr;
      text-align: center;
   }
}

.top
{
	vertical-align: top;
}

.canvas
{
	background-color:  rgba(0, 180, 138, 0.3);
	display: flex;
}

.tiny_br
{
	line-height: 3px;
	display: block;
  margin: 1px 3px;
}

button[aria-expanded="false"] + div
{
	display: none;
}


button[aria-expanded="true"] + div
{
	display: table;
}

fieldset:has(legend button[aria-expanded="false"]) div[id] {
	display: none;
}

.astext {
  background: none;
  border: none;
	font-size: 2vh;
}

.scroll {
	overflow-y: auto;
	height: 500px;
}

.img_fit {
	max-width: 1280px;
@media only screen and (max-width: 8000px) {
    width: 1280px;
    margin: 25px;
  }
@media only screen and (max-width: 4000px) {
    width: 800px;
    margin: 15px;
  }
@media only screen and (max-width: 2700px) {
    width: 640px;
    margin: 10px;
  }
@media only screen and (max-width: 640px) {
	width: 95Vmin;
  	margin: 0px;
  }
}

.h4 {
	display: block;
	font-size: 1em;
	margin-top: 1.33em;
	margin-bottom: 1.33em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
}

.h3 {
	display: block;
	font-size: 1.17em;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
}

.h2 {
	display: block;
	font-size: 1.5em;
	margin-top: 0.83em;
	margin-bottom: 0.83em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
}
/* vi: ts=2 */