@charset "utf-8";

*{
margin: 0;
padding: 0;}

body{
	-webkit-background-size: cover; /* Для хрома */
	-moz-background-size: cover;  /* Для лисы*/
	-o-background-size: cover;  /* Для оперы*/
	-ms-background-size: cover;  /* Для ИЭ*/
	background-size: cover;
	margin:0;
	text-align:center;
	font-family: Verdana;
	background:#e9e9e9;
}

.content{
border:1px solid #ccc;
background:#f1f1f1;
min-height:500px;
width: 70%;
margin:auto;
padding:10px;
}

.logo{
display:block;
margin: 20px auto;	
}
/**Стили блока с текстом внутри спойлера**/
.spoiler-content{
display:none;  /**скрываем блок контента спойлера**/
padding:15px 20px; /**добавляем внутренний отступ**/
border:1px solid #ccc; /**рамка блока контента спойлера**/
margin-top:5px; /**отступ сверху**/
background:#F0F0F0; /**фон блока контента спойлера**/
}
/**Стили блока оборачивающего каждый блок**/
.spoiler-block{
margin-top:10px; 
}
/**Стили кнопки спойлера**/
.spoiler-title {
border:1px solid #B9B9B9;
background: #ccc;/**обычный фон для браузеров, которые не поддерживают градиент**/
background:linear-gradient(#CACACA, #E8E8E8);/**градиентный фон**/
padding:10px;/**внутренний отступ**/
text-decoration:none;/**убираем подчёркивание у ссылки**/
color:#000; /**цвет текста ссылки**/
display:block; /**делаем ссылку на всю ширину**/
text-decoration: none;
}

.spoiler-title a {
	font-weight: 700px;
	text-decoration: none;
	}



	.btn-clipboard{position:absolute;top:.65rem;right:.65rem;z-index:10;display:block;padding:.25rem .5rem;font-size:.65em;color:#0d6efd;background-color:#fff;border:1px solid;border-radius:.25rem}
	
	.btn-clipboard:hover,.btn-clipboard:focus{color:#fff;background-color:#0d6efd}
	
	.bd-placeholder-img{font-size:1.125rem;text-anchor:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none}



 
  h1 {
	text-align:center;
  }
  .container {
	width:90%;
	margin:0 auto;
  }
  input[type="radio"] {
	  display:none;
  }
  label {
	width:23%;
	float:left;
	text-align:center;
	background:#ffffff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	color:#222222;
	padding:0.5%;
	margin:0.5%;
	margin-bottom:30px;
	cursor:pointer;
  }
  input[type="radio"][id="blue"]:checked + label {
	background:#208bfd;
  }
  input[type="radio"][id="blue"]:checked ~ .red, input[type="radio"][id="blue"]:checked ~ .green {
	width:0;
	height:0;
	padding:0;
	margin:0;
	opacity:0;
  }
  input[type="radio"][id="red"]:checked + label {
	background:#e60023;
  }
  input[type="radio"][id="red"]:checked ~ .blue, input[type="radio"][id="red"]:checked ~ .green {
	width:0;
	height:0;
	padding:0;
	margin:0;
	opacity:0;
  }
  input[type="radio"][id="green"]:checked + label {
	background:#5cb85c;
  }
  input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .red {
	width:0;
	height:0;
	padding:0;
	margin:0;
	opacity:0;
  }
  
  .box {
	width:100%;
	height:100px;
	float:left;
	transition:all 1s;
	margin:0.5%;
	padding:0.5%;
	line-height: 100px;
  }
  .green {
	background:#5cb85c;
  }
  .blue {
	background:#208bfd;
  }
  .red {
	background:#e60023;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
body {
	background: #f9f9f9;
	font-family: "Roboto", sans-serif;
}

.main-content {
	padding-top: 100px;
	padding-bottom: 100px;
}

.table {
	border-spacing: 0 15px;
	border-collapse: separate;
}
.table thead tr th,
.table thead tr td,
.table tbody tr th,
.table tbody tr td {
	vertical-align: middle;
	border: none;
}
.table thead tr th:nth-last-child(1),
.table thead tr td:nth-last-child(1),
.table tbody tr th:nth-last-child(1),
.table tbody tr td:nth-last-child(1) {
	text-align: left;
}
.table tbody tr {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
}
.table tbody tr td {
	background: #fff;
}
.table tbody tr td:nth-child(1) {
	border-radius: 5px 0 0 5px;
}
.table tbody tr td:nth-last-child(1) {
	border-radius: 0 5px 5px 0;
}

.user-info {
	display: flex;
	align-items: center;
}