* { box-sizing: border-box;  }

    /* Fix the button on the left side of the page */
    .open-btn {
    display: flex;
    justify-content: right;
    text-align: right ;

    }
    /* Style and fix the button on the page */
    .open-button {
    background-color: #1c87c9;
    color: white;
    padding: 1px 20px 1px 20px;
    border: none;
    border-radius: 1px;
    cursor: pointer;
    opacity: 0.8;
    position: fixed;
    }
    /* Position the Popup form */
    .login-popup {
    position: relative;
    text-align: center;
    width: 100%;
    }
    /* Hide the Popup form */
    .form-popup {
    display: none;
    position: fixed;
    left: 30%;
    top:5%;
    xtransform: translate(-45%,5%);
    border: 1px solid #666;

    z-index: 9;
    box-shadow: 10px 25px 30px -3px #000000;
    }
    /* Styles for the form container */
    .form-container {
    xmax-width: Auto;
    padding: 0px;
    xbackground-color: #fff;

    }
    /* Full-width for input fields */
    .form-container input[type=text], .form-container input[type=password] {
    width: 100%;
    xpadding: 10px;
    xmargin: 5px 0 22px 0;
    border: none;
    background: #eee;
    }
    /* When the inputs get focus, do something */
    .form-container input[type=text]:focus, .form-container input[type=password]:focus {
    background-color: #ddd;
    outline: none;
    }
    /* Style submit/login button */
    .form-container .btn {
    background-color: #8ebf42;
    color: #fff;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom:10px;
    opacity: 0.8;
    }
    /* Style cancel button */
    .form-container .cancel {
    background-color: #cc0000;
    }
    /* Hover effects for buttons */
    .form-container .btn:hover, .open-button:hover {
    opacity: 1;
    }