{
        box-sizing: border-box;
    }

    /* The popup form - hidden by default */
    .form-popup {
        display: none;
        border: 1px solid rgba(34, 36, 38, .15);
        z-index: 9;
    }

    /* Add styles to the form container */
    .form-container {
        max-width: 100%;
        padding: 10px;
        color: #ffcc00;
        background-color: #2d1155;
    }

    /*#646565
calontir purple:#2d1155 */
    /* Full-width input fields */
    .form-container input[type=text],
    .form-container input[type=password],
    .form-container textarea {
        width: 100%;
        padding: 15px;
        margin: 5px 0 22px 0;
        border: none;
        background: #ffffff;
    }

    .form-container h1,
    h2,
    h3,
    h4 {
        color: #ffcc00;

    }

    .form-container label {
        color: #ffcc00;
        font-weight: bold;
    }

    /*rgba(0,0,0.87)
/* When the inputs get focus, do something */
    .form-container input[type=text]:focus,
    .form-container input[type=password]:focus {
        background-color: #f9fafb;
        outline: none;
    }

    /* Set a style for the submit/login button */
    .form-container input[type=file] {
        background-color: #ffffff;
        color: rgba(0, 0, 0, .87);
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        width: 100%;
        margin-bottom: 10px;
    }

   
    /* Set a style for the submit/login button */
    .form-container .btn {
        background-color: #04AA6D;
        color: white;
        font-weight: bold;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        width: fit-content;
        margin-bottom: 10px;
        opacity: 0.8;
    }

    /* Add a red background color to the cancel button */
    .form-container .cancel {
        background-color: red;
        color: white;
        font-weight: bold;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        width: fit-content;
        margin-bottom: 10px;
        opacity: 0.8;
    }

    /* Add some hover effects to buttons */
    .form-container .btn:hover,
    .open-button:hover {
        opacity: 1;
    }

    input[type=text],
    input[type=number],
    input[type=date],
    input[type=file],
    select {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    /* Add a background color to the submit button on mouse-over */
    input[type=submit]:hover {
        background-color: #45a049;
    }

    /*Make readonly fields grey*/
    input.readonly, input[readonly] {
        background: #bfbebe !important;
    }

    /* Style the tab */
    .tab {
        overflow: hidden;
        border: 1px solid #ffcc00;
        background-color: #f1f1f1;
    }

    /* Style the buttons that are used to open the tab content */
    .tab button {
        background-color: inherit;
        float: left;
        border: 1px solid #2d1155;
        outline: none;
        cursor: pointer;
        font-weight: bold;
		font-size:large;
        padding: 16px 20px;
        transition: 0.3s;
    }

    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: #ffcc00;
    }

    /* Create an active/current tablink class */
    .tab button:active {
        background-color: #ffcc00;
    }

    .tab button:focus {
        background-color: #ffcc00;
    }

    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
    }