@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&display=swap');

* {
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
    /* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */
    background: linear-gradient(120deg, #c33764, #1d2671);
    background-size: 500% 500%;
    background-repeat: no-repeat;
    animation: bg-animation 20s infinite;
    min-height: 100vh;
    min-width: 100vw;
    color: #FFF;
    font-family: 'Poppins', sans-serif;
    /* Here is the problem!!! */
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
 */}

.bg-overlay{
    /* position: fixed; */
    left:0;
    top:0;
    min-height: 100vh;
    min-width: 100vw;
    background-image: url(/static/assets/waves.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:top;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    margin: 0;
    padding: 0;
}

@keyframes bg-animation {
	0% {
		background-position: left;
	}
	50% {
		background-position: right;
	}
	100% {
		background-position: left;
	}
}

h1, h2, h3, h4 {
    margin: 0;
}

button {
    font-family: inherit;
    font-size: 12px;
    background-color: #5f4fe6;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    padding: 5px 10px;
    margin: 5px;
    border-radius: 10px;
    border-top: 2px solid #5f4fe6;
    border-left: 2px solid #5f4fe6;
}
button:hover {
    background-color: #7a6de9;
}
button:active {
    border-top: 2px solid #9b91f3;
    border-left: 2px solid #9b91f3;
    background-color: #4a38e8;
}

.link {
    text-decoration: none;
    color: #c33764
}
.link:hover{
    background-color: #ddc3cc;
}

#main-container {
    display: flex;
    flex-direction: column;
    max-width: 1024px;
    gap: 0.5em;
}

body > footer {
    position: sticky;
    top: 100vh;
}

footer, .modal-footer {
    font-size: 0.7rem;
    color: white;
}



/* ------ Landing Page Styling --------*/

#landing-header {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 1em;
}

#landing-title h1 {
    font-size: 4em;
    margin-bottom: 0;
}

#landing-subtitle {
    margin-top: 0;
}

.landing-section {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 0.5em;
    background: rgba(0,0,0,0.6);
    padding: 1em;
    margin: 1em;
    border-radius: 15px;
}

.landing-section.transparent {
    background-color: rgba(0,0,0,0);
}

.landing-section p {
    width: 50%;
    text-align: justify;
}

.landing-section img {
    min-width: 150px;
    max-width: 200px;
}

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

    .landing-section p{
        width: 90%;
        text-align: start;
    }
}

/* --------------*/

/* ------ Modal Styling --------*/

.modal-outer {
    position: fixed;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(120deg, #c33764, #1d2671);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hidden {
    display: none;
}

.modal-frame {
    background-color: white;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    border-radius: 20px;
    color: black;
    min-width: 3%;
    max-width: 80%;
    min-height: 300px;
    padding: 0.5em;
    opacity: 0.85;
}

/* --------------*/

/* ------ Login / Signup | Modal Styling --------*/

.tab {
    display: flex;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    border-radius: 15px 15px 0 0;
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    color: black;
    border-radius: 0;
    margin: 0;
}

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

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

/* Style the tab content */
.login-tabcontent {
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    border-radius:0 0 15px 15px;
    animation: fadeEffect 1s;
}

.tabcontent-show {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.tabcontent-hide {
    display: none;
}

@keyframes fadeEffect {
    from {opacity:0;}
    to {opacity:1;}
} 

.single-form {
    border-radius:15px;
    border: 1px solid #ccc;
}

/* --------------*/


/* Form styles */

.form {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 0.2em;
    width: 85%;
    margin-bottom: 1em;
    gap: 0.5em;
}

.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.form-row button {
    margin-top: .5em;
}

/* --------------*/

/* Global logged-in styles */

#header-logged {
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
}

.user-display {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 0.7em;
    gap: 1em;
}

.link-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap:0.5em;
}


/* --------------*/

/* Dashboard styles */

.dashboard-container {
    background-color: rgba(255,255,255,0.75);
    color: black;
    width: 90%;
    height: 90%;
    padding: 1em;
    border-radius: 15px;
}

.logo-mini {
    max-width: 100px;
    max-height: 66px;
}

.events-container {
    border-radius: 15px;
    border: 1px solid rgb(143, 141, 141);
    padding: 1em;
    background-color: rgb(230, 230, 230);
}

.events-container h2 {
    margin:0;
}

.event-list {
    overflow: auto;
    /* height: 100px; */
    max-height: 50%;
    margin-bottom: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.event-item {
    display: flex;
    flex-direction: column;
}

.separator {
    border-bottom: 1px dashed rgb(72, 69, 69);
}

.details-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.event-item p {
    margin: 0;
}

.item-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2em;
    margin: 2px 0;
}

.item-title {
    font-size: 1.3em;
}

.item-description {
    font-size: 1em;
}

.item-label {
    color: rgb(72, 69, 69);
}


/* --------------*/

/* View styles */

.item-view{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 1em;
}

.item-view h2 {
    margin: 0;
}

.buttons-row{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
}

.url-small {
    font-size: 0.8em;
}

.data-row {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    overflow: auto;
    gap: 1.5em;
    min-width: 60%;
    margin: 5px 0;
}

.data-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items:center;
}

.data-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 5px;
}

.data-column p, .data-row p {
    margin: 0;
}

.qr {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.qr h3 {
    margin-bottom: 0;
}

.qr img {
    max-width: 15em;
    max-height: 15em;
    opacity: 0.75;
}
/* --------------*/

/* Alert and icons styles */

.message {
    margin: 5px 0;
    padding: 5px 10px;
    border-radius: 10px;
}
.message p{
    margin:0;
}

.ok {
    color: #1d2671;
    background-color: rgba(72, 110, 233, 0.25);
}

.error {
    color: #c33764;
    background-color: rgba(202, 136, 196, 0.25);
}

.material-icons.red600{
    color: #c24159;
}

.material-icons.green600{
    color: #4c9243;
}
.material-icons.md-18 {
    font-size: 18px;
}
.material-icons.md-24 {
    font-size: 24px;
}

.btn-red{
    background-color: #c24159;
    border-top: 2px solid #c24159;
    border-left: 2px solid #c24159;
}
.btn-red:hover{
    background-color: #cc556b;
}
.btn-red:active{
    border-top: 2px solid #d38594;
    border-left: 2px solid #d38594;
    background-color: #c01333;
}

/*--------------*/