* {
    box-sizing: border-box;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 18px; 
  
}


.grid-wrapper{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 
        "header"
        "navigation"
        "main";
}

header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    background-color: #7477BF;
    color: white;
    height: 70px;
}

.bell:hover .alert-icon{
    transform: scale(1.3);
}

.alert-icon {
    transition: transform .2s ease-out;
    transform-origin: 50% 50%;
}

.notification-dropdown{
    top: 65px;
    right: 50px;
    width: 250px;
    height: auto;
    background-color: rgb(220, 220, 220);
    border-radius: 5px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.425);
    margin: 15px auto 0;
    padding: 15px;
    position: absolute;
    display: none;
}

.notify-img img{
    width: 50px;
    border-radius: 50%;
}

.notification-dropdown .notify-item{
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 2px solid black;
}

.notification-dropdown .notify-item:last-child{
    border-bottom: 0px;
}

.notification-dropdown .notify-item .notify-img{
    margin-right: 15px;
}

.notification-dropdown .notify-item .notify-info p span{
    color: #605dff;
}

.notification-dropdown .notify-item .notify-info .notify-time{
    font-size: 12px;
}

.notify-info p,
.notify-info span{
    color: black;
}

.notification-dropdown:before{
    content:"";
    position:absolute;
    top: -30px;
    left: 56%;
    transform: translateX(-50%);
    border: 15px solid;
    border-color: transparent transparent rgba(220, 220, 220, 0.74) transparent;
}

.notification-dropdown.active{
    display: block;
}

 .bell{
    cursor: pointer;
}

header h1{
    font-size: 21px;
    text-align:center;
    padding-top: 25px;
    padding-right: 20px;
    padding-left: 15px;
}

#notifications{
    width: 30px;
}

 #notifications svg {
    fill:aliceblue;
    width: 40px;
    margin-top: 10px;
}

.notification-dot{
    fill: rgb(2, 238, 2);
}


.vertical{
    border-right: 1px solid rgba(173, 173, 173, 0.808);
    height: 40px;
    width: 8px;
    left: 50%;
    margin-top: 15px;
    padding-left: 14px;
}

header img{
    padding-bottom: 15px;
    padding-top: 15px;
    width: 40px;
    border-radius: 50%;
    margin-left: 10px;
}


 header h3{
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 100;
    padding-right:10px;
    padding-left: 0px;
}

nav {
    grid-area: navigation;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    background-color: #3c3e7ede;
    
}

nav a svg {
    width: 33px;
    margin: 15px;
    fill: white;
    cursor: pointer;
}

.active{
    background-color: #78CF82;
    border-radius: 20px;
    border: none;
    transition: background-color .2s;
}


main {
    grid-area: main;
    display: flex;
    flex-direction: column;
}

.main-header{
    display: flex;
    width: 100%;
    align-items: center;
    text-align: center;
    height: 55px;
}

.headline{
    margin-top: 10px;
    margin-bottom: 12px;
    margin-left: 5px;
    width: 40%;
}

.tab{
    border-left: 2px solid #c7c7c7;
    border-bottom: 2px solid #c7c7c7;
    width: 60%;
    height: 55px;
}

.alert{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

.alert-banner{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    background-color:#7477BF;
    height: 40px;
    color:white;
    margin-left: 15px;
    margin-right: 15px;
}

.alert-banner p{
    padding-top: 7px;
    padding-left: 12px;
    height: 35px;
    font-size: 15px;
    
    
}

.alert-banner-close{
    padding-right: 30px;
    width: 10%;
    cursor: pointer;
}

.traffic-header{
    padding-top: 30px;
}

h3{
    padding-left: 18px;   
}

.traffic h3{
    font-size: 18px;
}

.daily h3,
.mobile h3,
.social h3,
.message h3,
.settings h3{
    font-size: 18px;
    padding-top: 18px;
    padding-bottom: 35px;
}

.members h3,
.activity h3{
    padding-top: 18px;
    align-self: flex-start;
}

.traffic-header ul{
    list-style: none;
    text-align: center;
    padding-inline-start:0;
    display: inline-flex;
    padding-top: 15px;
    padding-bottom: 15px;
}

.traffic-nav{
    width: 100%;
    margin: auto;
    justify-content: space-between;
    
}

.traffic-nav-link{
    display: inline;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
    cursor: pointer;
}


.widget-container-full, .widget-container-half {
    margin:auto;
    padding-bottom: 18px;
    width: 95%;
}

section,
.social{
    border-bottom: 2px solid rgb(230, 227, 227);
}


.social-container{
    display:flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid #c7c7c7;
    width: 90%;
    margin: auto;
    margin-bottom: 16px;
    height: 120px;
    border-radius: 8px;
}

.social-image{
   width: 70px;
   height: 70px;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #7477BF;
   border-radius: 100%;
   margin: 8px;
}


.social-text p:nth-child(1){
    font-size: 20px;
    font-weight: bold;
    color: #7477BF;
}

.social-text p:nth-child(2){
    font-size: 50px;
    color: #818181;
}

svg{
    fill: white;
    width: 45px;
    height: 45px;
}

.members-container,
.activity-container{
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 20px;
    padding-top: 20px;
    width: 90%;
}

.members,
.activity{
    display:flex;
    align-items: center;
    flex-direction: column;
}

.members .members-container:not(:last-child),
.activity .activity-container:not(:last-child){
    border-bottom: 2px solid rgb(230, 227, 227);
}

a{
    text-decoration: none;
}

.activity-arrow{
     display: none;   
}

.profile-image{
    width: 80px;
    border-radius: 50%;
}

.widget-container{
    display: flex;
    flex-direction: column;
    width: auto;
    align-items: center;
}


input,
textarea,
button{
    width: 90%;
    margin-bottom: 20px;
    border-radius: 5px;
}

.autocomplete input{
    height: 60px;
    width: 100%;
}

.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
    width:90%;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
  }
  .autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
  }
  .autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9;
  }
  .autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
  }

.form-field,
.form-area,
.button-primary,
.button-disabled{
    border: 2px solid rgb(182, 180, 180);
}

textarea{
    height: 200px;
}

button{
    height:60px;
    color: white;
    background-color: #7477BF;
    cursor: pointer;
}




.switch-light strong{
    font-size: 14px;
    font-weight: bold;
}

.toggles,
.timezone-field{
    display: flex;
    flex-direction: column;
    align-items: left;
    width: 100%;
    margin: auto;
}


.switch-light{
    display: flex;  
    justify-content: space-between;
    align-items: center;
    
}

.switch-ios.switch-light > span{
    width: 40%;
    margin-left: auto;
    background-color: #7477BF;
    border: 2px solid rgba(173, 173, 173, 0.959);
}

.switch-ios.switch-light span span{
    color: white;
    cursor:pointer;
}

.switch-ios.switch-light a{
    height: 1.5em;
    width: 1.5em;
    margin-top: 3px;
    margin-left: 3px;
}


label{
    margin-bottom: 50px;
}

#timezone{
    height: 60px;
    width: 100%;
    margin-bottom: 25px;
    border-radius: 5px;
}

.settings-button{
    display: flex;
    flex-direction: row;
}

 #timezone{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("../images/downArrow.PNG");
  background-repeat: no-repeat;
  background-position: 95%;
  background-size: 20px;
}

#save{
   margin: 0px 10px 35px 0px;
}

#cancel{
    margin: 0px 0px 35px 10px;
    background-color: rgba(128, 128, 128, 0.671);
}




/*======================================
            Media Queries
=======================================*/

@media (min-width: 768px) {



    .grid-wrapper{
        display: grid;
        grid-template-columns: 85px 1fr;
        grid-template-areas: 
            "header header"
            "navigation main";
    }

    header{
        justify-content: flex-end;
    }

    header h1 {
        width: 80%;
        text-align: left;
    }

    .notification-dropdown{
        right: 10px;
        z-index: 1;
    }

    .notification-dropdown:before{
        left: 71px;
    }

    .vertical{
        position:unset;
    }

    header img{
        margin-right: 10px;
    }

    header h3{
        padding-right: 0px;
        padding-left: 0px;
        width: 100px;
    }

    #notifications{
        padding-right: 45px;
    }

    nav{
        flex-direction: column;
        justify-content: flex-start;
        height: 100%;
    }


    main{
        grid-template-columns: 50%;
    }  
    
    .headline{
        width: 20%;
    }

    .tab{
        width:100%;
    }

    .alert,
    .alert-banner{
        width: 98%;
    }

    .alert-banner-close{
        text-align: right;
    }

    .traffic,
    .daily-mobile{
        width: 98%;
    }


    .traffic-header{
        display:flex;
        flex:row;
        justify-content: space-between;
        align-items: center;
        padding-top: 15px;
    }

    .traffic-nav{
        justify-content: right;
    }

    .traffic, .social {
        grid-column: 1 / span 2;
    }

    .daily, .members, .message {
        grid-column: 1 / span 1;
    }

    .mobile, .activity, .settings {
        grid-column: 2 / span 1;
    }

    .daily-mobile{
        display:flex;
    }

    .daily{
        border-right: 2px solid rgb(230, 227, 227);
    }

    .daily h3,
    .mobile h3{
        padding-bottom: 10px;
    }

    .widget-container-full {
        position: relative;
        width: 85vw;
    }

    .widget-container-half {
        position: relative;
        margin: 9px;
        width: 40vw;
    }


    .social h3{
        padding-bottom: 15px;
    }

    .social-groups{
        display: flex;
        flex-direction: row;
        margin: 0px 10px 0px 10px;
    }

    .social-image{
        margin:auto;
        width: 60px;
        height: 60px;
    }

    svg{
        width: 35px;
    }

    .social-container{
        width: 32%;
    }

    .social-text{
        width: 60%;
    }

    .social-text p:nth-child(2){
        font-size: 35px;
        margin-right: 20px;
    }

    .members-container,
    .activity-container{
        flex-direction: row;
        width: 95%;
        justify-content: space-between;
    }

    .member-img-email,
    .member-img-comment{
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .members-text,
    .activity-text{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 20px;
    }

    .activity-arrow{
        display:inline;
        font-weight: 900;
        color: #818181;
   }


    .autocomplete, 
    textarea, 
    button {
    width: 95%;
   }

   input::placeholder,
   textarea::placeholder{
       opacity:0.5;
   }

   .switch-light{
       width: 50%;
   }

   .toggles,
   .timezone-field{
       width: 95%;
   }



   #timezone{
       background-position: 98%;
   }

} 

@media (min-width: 1024px) {

    .alert{
        width: 100%;
    }


    .notification-dropdown{
        right: 42px;
        z-index: 1;
    }

    .notification-dropdown:before{
        left: 84px;
    }

    .widget-container-full{
        width: 90vw;
    }

    .members-activity-message-settings{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "members activity"
            "message settings";
    }


    .members{
        grid-area: members;
    }

    .member-img-comment{
        height: 80px;
    }

    .activity{
        grid-area: activity;
    }

    .message{
        grid-area: message;
    }

    .settings{
        grid-area: settings;
    }

    .activity,
    .settings{
        border-left: 2px solid rgb(230, 227, 227);
        height: fit-content;
    }

    .activity-container{
        text-align: left;
        height: 122px;
    }

    .widget-container{
        width: 99%;
    }

    .switch-light{
        width: 75%;
    }

    textarea{
        height: 157px;
    }

}