.loginbg{
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(27, 27, 27); /* Fallback color */

    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
  }

.arywrapper-outer{
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;

    top: 0;
    width: 100%; /* Full width */
    height: 100vh;
    overflow: auto; /* Enable scroll if needed */


  }

  .login-box
  {
      margin: auto;

      padding: 6em 2em 2em 2em;
      transition: all 0.3s ease-in-out;
      background: -webkit-linear-gradient( #000000,#005a6186);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px;
  }
@-webkit-keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

 .small-box
 {
   height: 20em;
   background-color: red;
 }

  .arytab-1
  {
      width: 50%;
      margin:10vh auto;
      border: 3px solid rgb(255, 102, 0);
      border-radius: 2em;
      box-shadow: 1px 8px 8px 6px black;
      padding: 10px;
      min-height: 55vh;
      background: -webkit-linear-gradient( #000000,#005a6186);
      box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px;
  }

  #arysoft-running
  {
      right: 37%;
      margin: auto;
      position: relative;
      width: 100%;
      height: 2em;
  }

  .nametag-1
  {
      margin: auto;
      margin-top: 0.4em;
      margin-bottom: 0.1em;
      border-radius: 9px;
      width: 90%;

  }

  .nametag-8
  {
      margin: auto;
      margin-top: 1em;
      margin-bottom: 1em;
      border-radius: 2px;
      width: 60%;
      height: 3vh;
      font-size: 3vh;
  }

  .heading-text-1
  {
      font-weight: 900;
      text-align: center;
  }
  .heading-text-8
  {
      font-weight: 300;
      text-align: center;
  }
  .arysoftpos-date
  {
      position: absolute;
      right: 0px;
      color:rgb(255, 255, 255);
  }
  .arysoftpos-name-bg
  {
      position: relative;
      margin: auto;
      border-radius: 9px;
      width: 90%;
      background-color: rgba(31, 31, 31, 0);
  }
  .arysoftpos-name
  {
      padding: 0.3em 0 0.1em 0;
      width: 100%;
      transition: all 0.3s ease-in-out;
      background: -webkit-linear-gradient( rgb(255, 102, 0),#ffffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 4em;
      text-shadow: #fffdfd;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }
  .button-group
  {
      position: relative;
      width: 70%;
      margin: 5em auto 0 auto;
      padding: 1em 0.5em 0.5em 0.5em;
      color: white !important
  }
  .session_name
  {
      position: relative;
      bottom: .5em;
      margin: 5em auto 0 auto;
      text-align: center;
      padding: 1em 0.5em 0.5em 0.5em;
      color: white;
  }

  .button-div
  {
    display: flex;
    display: inline;
    padding: 1em ;
    margin: auto;
    border-radius: 8px;
    color: white;
    color: white;
    background-color: #ff7300;
    border-color: #007bff;
    box-shadow: none;

  }
  .button-div a , .button-group a{
    text-decoration: none;
    color: white;
  }

  #login-button
  {
    position: relative;
    float: left;
    box-shadow: 0px 0px 16px #4e4e4e;
      z-index: 3;
      transition: all 1s ease-in-out;
      border-image: linear-gradient(#292929, #242424) 30;
  }
  #logout-button
  {
    position: relative;
    float: right;
    box-shadow: 0px 0px 16px #f80e0e;
      z-index: 3;
      transition: all 1s ease-in-out;
      border-image: linear-gradient(#da3a3a, #af0d0d) 30;
      color: red;
  }
  #register-button
  {
    position: relative;
    float: right;
    box-shadow: 0px 0px 16px #4e4e4e;
      z-index: 3;

      transition: all 1s ease-in-out;
      border-image: linear-gradient(#292929, #242424) 30;
  }
  .loggedin-name
  {
      background-color: black;
      box-shadow: 0px 0px 16px #c5c3c3;
    border-radius: 2px;
      z-index: 3;
      border: 2px solid;
      transition: all 1s ease-in-out;
      border-image: linear-gradient(#000000, #000000) 30;
  }
  .logout
  {
    color:rgb(238, 59, 27);
    background-color: #0066ff;
    margin-left: 1em;
  }
   .logout a
  {
    text-decoration: none;
  }

    .button-div-span {
        width: 3em;
        text-align: center;
        margin: 0 auto;
        font-size: 1.6em;
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
        font-weight: 900;

    }

      @media (max-width:876px)
      {
        .arytab-1{
          width:90%;
        }

    }

      @media (min-width:1350px)
        {
          .arysoftpos-name-bg
            {
                width: 60%;
            }

      }
      @media (max-width:876px)
      {
        .arysoftpos-name
          {
            font-size: 3em;
          }
          .nametag-8
          {
              width: 80%;
              height: 1.5vh;
              font-size: 2.63vh;
          }
          .button-group
          {
              position: relative;
              width: 91%;
              margin: 3em auto 0 auto;
              padding: 0.21em 0.5em 0.5em 0.5em;
          }
          .small-box h3{font-size:18px;}
    }
    @media (max-width:876px)
    {

        .hide_on_mobile{display: none;}
   }
   @media (min-width:876px)
    {
     .hide_on_computer{display: none;}
    }


    /* BG */



      /* END BG  */