@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    }
    body {
        /* background-image: url('./bg.jpg'); */
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: linear-gradient(180deg, #13a0d8, #135169);
        overflow: hidden;
    }

    section {
        position: relative;
        display: flex;
        opacity: 1;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }

    section .box {
        position: relative;
        background-color: rgb(255, 255, 255);
        max-width: 93%;
        min-width: 93%;
        max-height: 93vh;
        min-height: 93vh;
        padding: 10px;
        box-shadow: 0 5px 25px rgba(0,0,0,1);
        text-align: center;
        backdrop-filter: blur(25px);
        color: #000;
        margin-top: 0px;
        border-radius: 30px;
    }

    section .login-box {
        position: relative;
        background-color: rgb(255, 255, 255);
        min-width: 30vw;
        min-height: 30vh;
        padding: 10px;
        box-shadow: 0 5px 25px rgba(0,0,0,1);
        text-align: center;
        backdrop-filter: blur(25px);
        color: #000;
        margin-top: 0px;
        border-radius: 30px;
        margin-top: 100px;
    }

    .title {
      font-size:18px;
      margin: 2px;
    }

    .item1 { grid-area: joe; }
    .item2 { grid-area: megan; }
    .item3 { grid-area: camping; }
    .item4 { grid-area: dinner; }
    .item5 { grid-area: task; }

    .grid-container {
        display: grid;
        grid-template-areas:
          'joe megan camping'
          'dinner task camping';
        grid-gap: 10px;
        /* background-color: #2196F3; */
        padding: 10px;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr 1fr 2fr;
        min-height: 90vh;
       
      }
      
      .grid-container > div {
        /* background-color: rgba(255, 255, 255, 0.8); */
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
        border: solid 3px black;
        border-radius: 10px;
      }

      .camp-box {
          font-size:18px;
          height:25px;
          text-align: center;
          border-radius: 10px;
      }

      .state {
          width:50px;
      }

      .zip {
        width:50px;
    }

    .park {
        width:85%;
    }

    .btn {
        height:30px;
        border-radius: 10px;
    }

    .btn-hide {
      height:30px;
      border-radius: 10px;
    }

    .btn-mobile {
      height:30px;
      border-radius: 10px;
      display: none;
    }
    .setting-btn {
      margin-right: 80px;
    }

    .admininfo {
        height: 80px;
        width: 275px;
    }

    .admincaldate {
        width: 275px;
    }

    .adminlabel {
        font-size:18px;
    }

    .adminsave {
        width:100px;
    }

    .login-form {
        margin-top: 50px;
    }

    .btn-login {
        width: 100px;
        height: 50px;
        border-radius: 15px;
        background-color: #13a0d8;
        color: white;
    }

    .login-form-text {
        height:30px;
        width: 200px;
        border: solid 1px #13a0d8;
        background-color: white;
        border-radius: 10px;
        margin: 2px;
        text-align: center;
        font-size:20px;
    }

    .adminkids {
        width: 250px;
        height: 24px;
        font-size: 20px;
    }

    p {
        margin: 5px;
        padding: 0;
    }
    
    

    #taskeditor {
        height: 75px;
    }

    #joeeditor {
        height: 75px;
    }

    #meganeditor {
        height: 75px;
    }

    #dinnereditor {
        height: 75px;
    }




    .alert{
        background: #3e8d09;
        padding: 20px 40px;
        min-width: 420px;
        position: absolute;
        right: 0;
        top: 10px;
        border-radius: 4px;
        border-left: 8px solid #2b6306;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
      }
      .alert.showAlert{
        opacity: 1;
        pointer-events: auto;
      }
      .alert.show{
        animation: show_slide 1s ease forwards;
      }
      @keyframes show_slide {
        0%{
          transform: translateX(100%);
        }
        40%{
          transform: translateX(-10%);
        }
        80%{
          transform: translateX(0%);
        }
        100%{
          transform: translateX(-10px);
        }
      }
      .alert.hide{
        animation: hide_slide 1s ease forwards;
      }
      @keyframes hide_slide {
        0%{
          transform: translateX(-10px);
        }
        40%{
          transform: translateX(0%);
        }
        80%{
          transform: translateX(-10%);
        }
        100%{
          transform: translateX(100%);
        }
      }
      .alert .fa-exclamation-circle{
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        font-size: 30px;
      }
      .alert .msg{
        padding: 0 20px;
        font-size: 18px;
        color: #fff;
      }
      .alert .close-btn{
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
        background: #2b6306;
        padding: 20px 18px;
        cursor: pointer;
      }
      .alert .close-btn:hover{
        background: #55ec27;
      }
      .alert .close-btn .fas{
        color: #fff;
        font-size: 22px;
        line-height: 40px;
      }

      /* Login error message */
      .fa-exclamation-triangle {
        color: white;
        font-size:20px;
      }

      .alertlogin{
        background: #3e8d09;
        padding: 20px 40px;
        min-width: 420px;
        position: absolute;
        right: 0;
        top: 10px;
        border-radius: 4px;
        border-left: 8px solid #2b6306;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
      }
      .alertlogin.showAlert{
        opacity: 1;
        pointer-events: auto;
      }
      .alertlogin.show{
        animation: show_slide 1s ease forwards;
      }
      @keyframes show_slide {
        0%{
          transform: translateX(100%);
        }
        40%{
          transform: translateX(-10%);
        }
        80%{
          transform: translateX(0%);
        }
        100%{
          transform: translateX(-10px);
        }
      }
      .alertlogin.hide{
        animation: hide_slide 1s ease forwards;
      }
      @keyframes hide_slide {
        0%{
          transform: translateX(-10px);
        }
        40%{
          transform: translateX(0%);
        }
        80%{
          transform: translateX(-10%);
        }
        100%{
          transform: translateX(100%);
        }
      }
      .alertlogin .loginmsg{
        padding: 0 20px;
        font-size: 18px;
        color: #fff;
      }
      .alertlogin .loginclose-btn{
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
        background: #2b6306;
        padding: 20px 18px;
        cursor: pointer;
      }
      .alertlogin .loginclose-btn:hover{
        background: #55ec27;
      }
      .alertlogin .loginclose-btn .fas{
        color: #fff;
        font-size: 22px;
        line-height: 40px;
      }



.settings {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60%; /* Full width */
  height: 60%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(255, 255, 255); /* Fallback color */
  background-color: rgba(255, 255, 255, 0.877); /* Black w/ opacity */
  border: black solid 2px;
  
}































@media (max-width: 600px) {
  .btn-hide { display:none}

  section .box {
    position: relative;
    background-color: rgb(255, 255, 255);
    max-width: 93%;
    min-width: 93%;
    max-height: 100%;

    padding: 10px;
    box-shadow: 0 5px 25px rgba(0,0,0,1);
    text-align: center;
    backdrop-filter: blur(25px);
    color: #000;
    margin-top: 0px;
    border-radius: 30px;
}

  body {
    overflow: auto;
  }
  .grid-container{
    display: block;
  }

  .btn-mobile { display: block;}
  
  .grid-container > div {
    height:auto;

  }

  .alertlogin {
    min-width: 200px;
  }
}