@charset "utf-8";
body, html { height: 100%; width: 100%; }
/*---------------------- Кнопка -------------------------------------------*/
.custom-btn {
    width: 130px;
    height: 40px;
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
     box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
     7px 7px 20px 0px rgba(0,0,0,.1),
     4px 4px 5px 0px rgba(0,0,0,.1);
    outline: none;
  }
  .btn-8 {
    background-color: #f0ecfc;
  background-image: linear-gradient(315deg, #f0ecfc 0%, #00b1c8 74%);
    line-height: 42px;
    padding: 0;
    border: none;
  }
  .btn-8 span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }
  .btn-8:before,
  .btn-8:after {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    background: #00b1c8;
    /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
                -4px -4px 6px 0 rgba(116, 125, 136, .2), 
      inset -4px -4px 6px 0 rgba(255,255,255,.5),
      inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
    transition: all 0.3s ease;
  }
  .btn-8:before{
     height: 0%;
     width: 2px;
  }
  .btn-8:after {
    width: 0%;
    height: 2px;
  }
  .btn-8:hover:before {
    height: 100%;
  }
  .btn-8:hover:after {
    width: 100%;
  }
  .btn-8:hover{
    background: transparent;
  }
  .btn-8 span:hover{
    color: #00b1c8;
  }
  .btn-8 span:before,
  .btn-8 span:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    background: #00b1c8;
    transition: all 0.3s ease;
  }
  .btn-8 span:before {
    width: 2px;
    height: 0%;
  }
  .btn-8 span:after {
    height: 2px;
    width: 0%;
  }
  .btn-8 span:hover:before {
    height: 100%;
  }
  .btn-8 span:hover:after {
    width: 100%;
  }

  .head {
    font-size: 25px; text-align: left;
  }
  .head a {
    padding: 2px; /* Поля вокруг текста ссылки */
    text-decoration: none; /* Убираем подчёркивание */
    color: black;
   }
   .head a:hover { 
    color: #00b1c8; /* Новый цвет текста */
   }
/*
   .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
   }

   .circle-red {
    background-color: red;
   }
   .circle-green {
    background-color: green;
   }
*/
table{
  color: black; 
  width: 100%;
}
/*h3{
display: inline;
  border-bottom: 3px solid #00b1c8;
}*/

   .border {
    list-style: none;
    padding: 0;
    
    }
    .border li {
    font-family: "Trebuchet MS", "Lucida Sans";
    padding: 7px 20px;
    margin-bottom: 5px;
    border-radius: 5px;
    border-left: 10px solid #f05d22; 
    box-shadow: 2px -2px 5px 0 rgba(0,0,0,.1),
         -2px -2px 5px 0 rgba(0,0,0,.1),
        2px 2px 5px 0 rgba(0,0,0,.1),
        -2px 2px 5px 0 rgba(0,0,0,.1);
    font-size: 15px;
    letter-spacing: 2px;
    transition: 0.3s all linear;
    background-color: #fff;
    }
    .border li:nth-child(2){border-color: #8bc63e;}
    .border li:nth-child(3){border-color: #fcba30;}
    .border li:nth-child(4){border-color: #1ccfc9;}
    .border li:nth-child(5){border-color: #493224;}
    .border li:hover {border-left: 10px solid transparent;}
    .border li:nth-child(1):hover {border-right: 10px solid #f05d22;}
    .border li:nth-child(2):hover {border-right: 10px solid #8bc63e;}
    .border li:nth-child(3):hover {border-right: 10px solid #fcba30;}
    .border li:nth-child(4):hover {border-right: 10px solid #1ccfc9;}
    .border li:nth-child(5):hover {border-right: 10px solid #493224;}

#dl {
      width: 100%; 
      text-align: left;
      font-size: 20px;
    }
#dd{
      padding-left: 20px;
    }
#dt{
display: inline;
  border-bottom: 3px solid #ffffff;
}