/**MODAL SIGN UP */
/**MODAL SIGN UP */
* {box-sizing: border-box}
/* Full-width input fields */

input.signupform[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

    /* Add a background color when the inputs get focus */
    input.signupform[type=text]:focus, input[type=password]:focus {
        background-color: #ddd;
        outline: none;
    }

input.signupformpage[type=text], input[type=password] {
    width: 50%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;

}

    /* Add a background color when the inputs get focus */
    input.signupformpage[type=text]:focus, input[type=password]:focus {
        background-color: #ddd;
        outline: none;
    }






@media screen and (max-width: 768px) {


    input.signupformpage[type=text], input[type=password] {
        width: 100%;
    }
}

    /* Set a style for all buttons */
    .btnOpenSignupForm {
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 100%;
        opacity: 0.9;
    }

    button:hover {
        opacity: 1;
    }

    .signupbtn {
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 40%;
        opacity: 0.9;
    }




    .wavetablebtn {
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 40%;
        opacity: 0.9;
    }


    /* Extra styles for the cancel button */

    .viewotherbtn {
        color: white;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 40%;
        opacity: 0.9;
        padding: 14px 20px;
        background-color: #f4a336;
    }

    .cancelbtn {
        color: white;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 40%;
        opacity: 0.9;
        padding: 14px 20px;
        background-color: #f42336;
    }


    .uploadnowbtn {
        color: white;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 40%;
        opacity: 0.9;
        padding: 14px 20px;
        background-color: #298ce3;
    }


    /* Float cancel and signup buttons and add an equal width */
    .cancelbtn, .signupbtn, .uploadnowbtn, .viewotherbtn {
        float: left;
        width: 50%;
    }

    /* The Modal (background) */
    .signupmodal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 100; /* Sit on top */
        padding-top: 80px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    }


    /* Modal Content/Box */
    .signupmodal-content {
        background-color: #fefefe;
        margin: 1% auto 5% auto; /* 5% from the top, 15% from the bottom and centered */
        border: 1px solid #888;
        width: 80%; /* Could be more or less, depending on screen size */
    }



    /* Add padding to container elements */
    .signupcontainer {
        margin: auto;
        display: block;
        width: 90%;
        max-width: 600px;
        padding: 32px;
        background-color: white;
    }




    .signupmodalsuccess {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 100; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    }






    .SignupMessage {
        color: red;
    }


    /* Style the horizontal ruler */
    hr {
        border: 1px solid #f1f1f1;
        margin-bottom: 25px;
    }

    /* The Close Button (x) */
    .close {
        position: absolute;
        right: 35px;
        top: 15px;
        font-size: 40px;
        font-weight: bold;
        color: #f1f1f1;
    }

        .close:hover,
        .close:focus {
            color: #f44336;
            cursor: pointer;
        }

    /* Clear floats */
    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }

    /* Change styles for cancel button and signup button on extra small screens */
    @media screen and (max-width: 300px) {
        .cancelbtn, .signupbtn {
            width: 100%;
        }
    }





    @media screen and (max-width: 768px) {


        .signupmodal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 100; /* Sit on top */
            padding-top: 20px; /* Location of the box */
            left: 0px;
            top: 0px;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
        }


        .signupmodal-content {
            background-color: #fefefe;
            margin: 1% auto 5% auto; /* 5% from the top, 15% from the bottom and centered */
            border: 1px solid #888;
            width: 98%; /* Could be more or less, depending on screen size */
        }

        .signupcontainer {
            margin: auto;
            display: block;
            width: 100%;
            max-width: 100%;
            padding: 4px;
            background-color: white;
        }



        .signupmodalsuccess {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 100; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
        }
    }






    /**MODAL SIGN UP END*/
    /**MODAL SIGN UP END */