/*POSITION SPACING*/
body{
    padding-top:80px;
    padding-right:10px;
    padding-left:10px;
    padding-bottom:80px;
    background-color:#1B1F23;
}

a{
    text-decoration: none;
}

.visually-hidden {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
    
/*HEADER*/
.header{
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    height:80px;
    width:100%;
    z-index:1;
    background-color:#D1015F;
}

.h1{
    flex: 0 0 auto;
    display:flex;
    align-items:center;
    justify-content: center;
    width: 20%;
    max-width: 100px;
}
.eb-logo{
    height:50px;
}
.h2{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    min-width: 210px;
    flex:1;
    font-family:Impact; 
}
.title{
    color:whitesmoke;
    font-size:40px;
    margin:2px;
    margin-bottom:1px;
}
.sub-title{
    color:whitesmoke;
    font-size:16px;
    margin:2px;
    margin-top:1px;
}
.h3{
    flex: 0 0 auto;
    display:flex;
    align-items:center;
    justify-content: center;
    width: 20%;
    max-width: 100px;
}
.pro-pic-icon{
    height:50px;
    border-radius:25px;
}
.pro-pic-icon:hover{
    cursor:pointer;
}
.pro-pic-div{
    position: relative;
}
.notification-dot {
  position: absolute;
  display: none;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border: 2px solid whitesmoke; /* optional, makes dot stand out */
  border-radius: 50%;
}
.numofnot {
    color:#D1015F;
    font-weight: bolder;
}

/*BODY*/
.notification-section{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.section-title{
    font-family:Impact; 
    color:whitesmoke;
    font-size:18px;
    max-width:98%;
    width: 500px;
    margin:8px;
}
.notification-grid{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:18px;
    width: 500px;
    max-width: 95%;
    margin-bottom:15px;
}
.notif{
    display:flex;
    direction: row;
    position:relative;
    height: 40px;
    max-width: 95%;
    width: 495px;
    border-style:dotted;
    border-radius:10px;
    border-width:3px;
    border-color:whitesmoke;
    background-color:#5C8DAE; 
    align-items: center;
    min-height:100%;
    vertical-align:top;
    margin:auto;
    padding: 5px;
    color:#1B1F23;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 13px;
    font-style: italic;

}
.notif:hover{
    cursor: pointer;
}
.special-texto{
    font-weight: bolder;
}
.no-notifs{
    display:flex;
    font-family:Impact; 
    color:whitesmoke;
    font-size:16px;
    height: 25px;
    max-width: 95%;
    width: 495px;
    font-style: italic;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/*EMAIL LINK*/
.email-box{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:1px;
}

.email-line{
    font-size:12px;
    color:whitesmoke;
    font-style: italic;
    font-family: arial narrow;
    margin:1px;
    text-align: center;
}

.email-link{
    color:#5C8DAE;
    text-decoration: underline;
}

#loading-spinner {
    display: none;
    border: 4px solid #f3f3f3; /* light gray */
    border-top: 4px solid #3498db; /* blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/*FOOTER*/
.footer{
    display:flex;
    flex-direction:row;
    position:fixed;
    justify-content: center;
    background-color:#5C8DAE; 
    bottom:0px;
    left:0px;
    right:0px;
    height:80px;
    z-index:1;
}
.f1{
    flex:1;
}
.f2{
    display:flex;
    align-items:center;
    justify-content: space-between;
    width:240px;
}
.f2 img{
    height:50px;
    flex:1;
}
.f3{
    flex:1;
}
.play-screen-logo:hover{
    cursor: pointer;
}
/*POPUP*/
.popup{
    position:fixed;
    display: none;
    flex-direction: column;
    gap:3px;
    z-index:3;
    width:100px;
    height:75px;
    right:20px;
    top:60px;
    font-family:arial narrow;
    font-size:14px;
    background-color: whitesmoke;
    border-style:solid;
    border-width:1px;
    border-color:#5C8DAE;
}
.popup-text{
    margin:3px;
    border-bottom:1px solid #1B1F23;
    color:#1B1F23;
}

/* --- MOBILE OPTIMIZATION --- */

@media (max-width: 500px) {
    .header {
        height: 70px;
    }

    .title {
        font-size: 30px; 
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis;
        max-width: 90%;
    }

    .sub-title {
        font-size: 14px; 
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis;
    }

}

@media (max-width: 350px) {

    .h2{ 
        min-width: 150px;
    }

  .title {
        font-size: 30px;
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis;
        max-width: 90%;
  }
    .sub-title {
        font-size: 12px;
    }
    .eb-logo{
        height:40px;
    }
    .pro-pic-icon{
        height:40px;
        border-radius:20px;
    }
    .footer{
        height:70px;
    }
}