:root{
    --bgcolor:rgb(77, 77, 77)
  }
  html{
    background-color: var(--bgcolor);
  }

  .logout{
      color: black;
      background-color: lightblue;
      border-radius: 10px;
      padding: 10px;
      margin-top: 10px;
  }




  h1 {
      color: white;
  }

  form {
      padding-right: 10px;
      padding-left: 10px;

  }

  input {
      margin: 5px 0;
      padding: 8px;
      width: 100%;
      box-sizing: border-box;
  }




  button:hover {
      background-color: #0056b3;
  }

  .col-sm-3{
      border-radius: 10px;
      border: 10px rgba(29, 164, 121, 0.281);
      border-style: solid;
      text-align: justify;
      justify-content: center;
      padding-right: 10px;
      padding-top: 2px;
  }


  button {
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      
      transition: background-color 0.1s ease-in-out;
      &:hover{
          transition: background-color 0.1s ease-in-out;
          background-color: rgb(163, 18, 18);
      }
  }   



  .nagy_szoveg{
      width: 1800px;
      text-align: justify;
      display: block;
      justify-content: center;
  }
  .row{
      padding: 10px;
      justify-content: space-around;
      display: flex;
  }
  small{
      font-size: small;
  }

  .login{
      padding: 20px;
      width: 500px;
      height: 350px;
      border-radius: 100px;
      border: 4px black;
      background-color: var(--bgcolor);
      border: 1px solid black;
      border-radius: 10px;
  }

  .kozep{
    position: absolute;
    left: 50%; 
    top: 45%; 
    transform: translate(-50%, -50%); 

  }

  .admin_peopleadd_div{
      width: 500px;
  }


  .login_register{
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      height: 100vh;

  }

  @media (max-width: 1190px){
      .login_register{
          display:block;
          width: auto;
          height: auto;
          justify-content: center;
          align-items: center;
          text-align: center;
          height: 100vh;
      }
      
  }

  @media (max-width: 555px) {
      .login{
          padding: 20px;
          width: auto;
          height: auto;
          border-radius: 100px;
          border: 4px black;
          background-color: rgb(77, 77, 77);
          border: 1px solid black;
          border-radius: 5px;
      }
  }





  body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    
  .topnav {
    overflow: hidden;
    background-color: #333;
  }

  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }

  .topnav a.active {
    background-color: #04AA6D;
    color: white;
  }

  .topnav .icon {
    display: none;
  }
  .navbar_line{
    display: none;
  }

  @media screen and (max-width: 1240px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }

  @media screen and (max-width: 1240px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .icon{
      display: block;
      /*background-color: #04AA6D;*/
    }
    .navbar_line{
    
      width: 10px;
      background-color: #fff;
    }
  }

  form{
    padding: 10px;
  }

  .inp_field{
    background-color: transparent;
    border: 1;
    border-radius: 10px;
    padding-bottom: 3px;
    width: 90%;
    height: 20px;
    justify-content: center;
    border: 1px whitesmoke solid;
    

  }

  .inp_div{
    justify-content: center;
    text-align: center;
    align-items: center;
  }

  .inp_radio{
    background-color: #333;
  }

  .question{
    background-color: #333;
    color: white;
    padding: 10px;
    /*width: fit-content;*/
    border-radius: 10px;
  }

  .ttcim{
    text-align: center;
  }

  .minden {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    background-color: #d1a40e4d;
    box-shadow: 10px 10px 5px gray;
    border: solid 5px wheat;
    margin-top: 10px;
  }

  .al_minden {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    background-color: #d1a40e4d;
    transition: box-shadow 0.1s ease-in-out;
    margin-top: 10px;
    color: black;

    &:hover{
      transition: box-shadow 0.1s ease-in-out;
      box-shadow: 10px 10px 5px gray;
    }
  }