/* basic */
/* header */

header{
    height: 3rem;
    background-image: linear-gradient(135deg,  #1a1a1a,  #333333);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    border-bottom: #27f060 2px solid;
    position: relative;
}
.links{
    display: flex;
    /* padding: 1rem; */
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    position: relative;
}
.logo div{
    height: 25%;
    width: 65%;
    margin-bottom: 10%;
    transform: rotateZ(-15deg);
    }
.logo, .projectLink, #asideDi{
        height: 3rem;
        width: 3rem;
    }

#asideDi{
    padding: .7rem;
    z-index: 1004;
    /* background: #303832; */
    /* background-color: #333333; */
    border-radius: .3rem;
    transition: .1s linear;
    cursor: pointer;
}
.projectLink img, #asideDi img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}

#miniProfile{
    position: absolute;
    padding: 1rem;
    top: 3rem;
    right: 1rem;

    display: none;

    background: rgba(149, 255, 193, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);

    background-image: linear-gradient(135deg,  #f0f0f0,  #ffffff);

    
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);

    z-index: 1005;
}

#miniProfileDi div {
    pointer-events: none;
    /* padding: .2rem; */
}
#miniProfileDi {
    padding: .1rem;
}
#miniProfileDi img{
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
}

.logged, .notlogged, .halfLogged{
    display: none;
}

/* not logged */
#register, #signin{
    /* background: #22c7519a; */
    background: #22c751;
    background: #68F690;
    background-image: linear-gradient(135deg,  #68F690,  #22c751);

    border-radius: .5rem;
}
/* logged */
#currentAccount{
    text-decoration: none;
    color: black;
}
#currentAccountImgDi{
    background-position: center;
    background-size: cover;
}


.currentAccount .accountImg{
    height: 3rem;
    width: 3rem;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
}

#byGoogle{
    display: flex;
    justify-content: center;
    align-items: center;
}
/* half logged */


#redArrow{
    display: none;
    position: absolute;
    top: 1rem;
    /* left: 3.5rem; */
    left: 4rem;
    transform: rotateZ(-140deg);
    z-index: 1010;
    height: 7rem;
    width: 7rem;
    transition: opacity 3s;
}



/* main */
main{
    overflow: hidden;
}

#map {
    height: 92vh;
    width: 100vw;
}

#addRouteMode{
    /* border: #1F2721 2px solid; */
    /* background-image: url('./imgs/add-route-icon.png'); */
    /* background-color:#1a1a1a;  */
    color:white;
    z-index: 1003;
    /* background: red; */
    /* background-image: url('./imgs/addroute-form.png'); */
    background-repeat: no-repeat;
    font-size: 1.3rem;
    font-weight: bold;
}

#send{
    /* margin-top: 2rem; */
    background: #1bf057;
    border: 4px #1F2721 solid;
}
#send:hover{
    color: #1bf057;
    background: #1F2721;
}

.deletebtns {
    /* padding: .5rem; */
    border: 2px dashed black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.deletebtns button {
    display: block;
    /* margin: .2rem; */
}

/* controllers */
#controller {
    display: flex;
    flex-direction: column;
    width: 6rem;
    gap: .4rem;
    font-size: 2.4rem;
    font-weight: bold;
    position: absolute;
    top: 50%;
    right: .1rem;
    z-index: 1003;
    background: #303832;
    border-radius: .5rem;
background: rgba(255, 255, 255, 0.2);
background: rgba(149, 255, 193, 0.2);

border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
#controller button{
    font-weight: bold;
}
#newRouteDetails{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    /* display: none; */
}

#selectGovernate{
    position: absolute;
    top: 5.5rem;
    z-index: 1003;
}

#basraLogo{
    background-image: url('./imgs/basra-logo.png');
    background-position: left center;
    background-repeat: no-repeat;
  }
  select#selectGovernate option[value="basra"]   { 
    height: 1rem;
    width: 1rem;
    background-image: url('./imgs/basra-logo.png'); 
}




#makeLocLink{
    position: absolute;
    top: 7rem;
    left: .1rem;
    z-index: 1003;
}


#messages{
    /* position: absolute; */
    position: fixed;
    top: 5rem;
    right: 50vw;
    text-align: center;
    z-index: 1005;
}
#messages div{
    display: none;
}



#routesToDisplay{
    z-index: 1003;
    position: absolute;
    top: 3.2rem;
    left: .1rem;
    font-weight: bold;
    /* color: #0171da; */
}
#routesToDisplay button{
    /* border: ; */
    border: #2b2b2b 1px solid;
    border-radius: .3rem;
}

#findMe{
    position: absolute;
    bottom: 3rem;
    left: .1rem;
    z-index: 1003;
    border-radius: 50%; 
    padding: .1rem;
}


/* aside */
aside{
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    position: absolute;
    background: #1a1a1a8c;
    background-image: linear-gradient(180deg,  #33333362,  #088f2a70);

    top: 0;
    /* height: 100vh; */
    width: 100vw;
    margin-top: 3rem;
    gap: 1rem;

    z-index: 1003;
}




  /* leaderboard */
.leaderBoard{
    margin-top: 5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 70%;
    padding: 1rem;
    max-height: 65vh;
    /* overflow-y: scroll; */
    background: #242424;
    background-image: linear-gradient(135deg,  #1a1a1a,  #2b2b2b);

    border: #27f060 1px solid;
    max-height: 70vh;
    /* box-sizing: border-box; */
    overflow: scroll;
}

.leaderBoard button{
    background-repeat: no-repeat;
}

#leaderBoardImg{
    position: absolute;
    top: -1rem;
    right: -1rem;
    height: 11rem;
    width: 13rem;
    z-index: 1010;
}

.rankingSections button{
    background: #33a353;
    padding: .2rem;
    cursor: pointer;
    border-radius: .2rem;
    /* width: fit-content; */
}

.rankingHeader{
    display: flex;
    flex-direction: row;
    background: #0a0a0a;
    justify-content: space-between;
    position: sticky;
    top: 0;
}
.rankingHeader img{
    min-height: 3rem;
    min-width: 3rem;
}
.rankingHeader button{
    padding: 1rem;
    width: 100%;
    width: fit-content;
}

.rankedAccount{
    border: #0a0a0a 2px solid;
    display: flex;
    justify-content: space-between;
    color: white;
    /* background: #242424; */
    background-image: linear-gradient(135deg,  #1a1a1a,  #2b2b2b);

    gap: 1rem;
    max-width: 100%;
    box-sizing: border-box;
}
.rankedAccount .account{
    color: white;
}
.points{
    display: flex;
    width: 7rem;
    justify-content: space-between;
    
}
.point{
    text-align: center;
    font-size: 2rem;
}
.ranking{
    display: flex;
    flex-direction: column;
    background: #29D659;
    border: #a0f7b9 2px solid;
    padding: .3rem;
}
.rankedAccount .accountImg{
    min-height: 2rem;
    min-width: 2rem;
}
.rankedAccount h3{
    line-height: 0;
}
.rankedAccount .account:hover{
    background: #3ac962;
}


#shordDescription{
    margin: 5rem;
    font-weight: bold;
    padding: 1rem;
}



/* footer */
footer{
    min-height: 20vh;
    background-image: linear-gradient(45deg,  #1a1a1a,  #292929);

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-top: #27f060 2px solid;
    gap: 3rem;
    width: 100%;
    padding: 3rem;
}


.sindibadIcons{
    height: 6rem;
    width: 6rem;
    position: absolute;
    bottom: -3rem;
    left: -1rem;
    z-index: 3;
}

.contact, .statics, .features{
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    min-height: 15vh;
    border-radius: .5rem;
    transition: .1s linear;
    background: white;
    padding: 1rem;
    position: relative;
}

.contact:hover, .features:hover, .statics:hover{
    box-shadow: 3px 3px 0px 0px  #29D659;
}
.logoPart{
    /* background: red; */
    height: 1rem;
    width: 2rem;
    margin-top: 1rem;
    transform: rotateZ(-15deg);
    z-index: 1001;
}
.features li img{
    all: unset;
    height: 3rem;
    /* width: 3rem; */
}


.projectsInfo{
    display: flex;
    width: 100%;
    justify-content: space-around;
    gap: .3rem;
}

.projectStatics{
    background: #54db7b;
    background-image: linear-gradient(135deg, #6ada89, #3ac962 );
    /* background: red; */
    border-radius: .3rem;
    padding: .3rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.statics li b{
    color: red;
}
.statics img{
    /* height: 1rem; */
}
.statics li{
    background: #C0F9D0;
    background-image: linear-gradient(135deg, #9cffb8, #54ff85 );

    border-radius: .4rem;
    margin-bottom: .2rem;
}


.features{
    width: fit-content;
}
.features img{
    /* height: 1rem; */
}
.features li b{
    color: red;
}
.features li{
    direction: rtl;
    background: #1a1a1a;
    color: white;
    margin: .1rem;
    padding: .3rem;
    border-radius: .3rem;
    list-style-type: none;

}

/* .features{
    width: 50vw;
}
.features div{
    background: #1a1a1a;
    color: white;
    margin: .1rem;
} */



/* elements */
body{
    margin: 0;
    overflow-x: hidden;
}

main div,main p,main h1,main h2,main h3,main h4,main h5,main h6{
    direction: rtl;
}

body *{
    box-sizing: border-box;
    font-family: 'Prosto One', 'Changa';
    font-size: .8rem;
}
img{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 2rem;
    pointer-events: none;
}
input[type=text]{
    font-size: 1rem;
}
input[type=file]{
    display: none;
}
a{
    text-decoration: none;
    color: black;
    display: inline-block;

}
button{
    background-position: center;
    background-size: contain;
}


::-webkit-scrollbar{width:6px;border-left:1px solid #292929;}
::-webkit-scrollbar-thumb{background-color: #33a353;}




/* shared */
.logged, .makeprofile, .notlogged{
    display: none;
}
.team{
    display: none;
}

.en{
    display: none;
    pointer-events: none;
}
.ar{
    pointer-events: none;
}

.box{
    background-color: #27f060;
    /* background-image: linear-gradient(135deg,  #27f060, #22c751); */
    background-image: linear-gradient(135deg,  #27F060,  #21C24F);
    padding: .5rem;
    border-radius: .5rem;
    transition: .1s linear;
    cursor: pointer;
}
.box2{
    /* background-color: #27f060; */
    /* background-image: linear-gradient(135deg,  #27f060, #22c751); */
    /* background-image: linear-gradient(135deg,  #000000,  #161616); */
    background-image: linear-gradient(135deg,  #1a1a1a,  #333333);


    padding: .5rem;
    border-radius: .5rem;
    transition: .1s linear;
    cursor: pointer;
}
.box img{
    /* height: 100%; */
}

.box:hover{
    background-color: #33a353;
    border-radius: .7rem;
}
.bbox:hover{
    background-color: #464646;
    background-image: linear-gradient(135deg,  #141414,  #2e2e2e);

    border-radius: .7rem;
}

.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}

.account{
    display: flex;
    flex-direction: row;
    gap: .6rem;
    justify-content: center;
    align-items: center;
    transition: .1s linear;
    cursor: pointer;
}
.accountImg{
    border-radius: 50%;
    border: #0a0a0a 1px solid;
}

.on{
    background: #1b1b1b;
    background: #333333;
    background: #e7e7e7;
    background: #eeeeee;

    color: white;
    color: #0a0a0a;

    border: #21C24F 2px solid;
}
.on:hover{
    background: #333333;
}

.on2{
    /* background: #1bf057; */
    background-image: linear-gradient(135deg,  #27F060,  #21C24F);

}

.red {
    background: #ff2a2a;
    background-image: linear-gradient(135deg,  #ED2121,  #CD1A1A);
}

.green {
    background: #27f060;
    background-image: linear-gradient(135deg,  #27F060,  #21C24F);
}

.black {
    background: #1b1b1b;
    background-image: linear-gradient(135deg,  #1A1A1A,  #0E0E0E);
}

.white {
    background: rgb(245, 245, 245);
    background-image: linear-gradient(135deg,  #F5F5F5,  #DEDEDE);
}

/* mobile */

@media all and (max-width: 500px){
    header{
        gap: .3rem;
    }
    .links{
        gap: .3rem;
    }
    .links a, .links button{
        /* height: 2rem; */
        /* width: 2rem; */
    }
    #miniProfile{
        margin: 2rem;
    }
    main{
        flex-direction: column;
    }
    body *{
        font-size: .8rem;
    }
    footer{
        flex-direction: column;
        /* gap: .2rem; */
    }
    .contact, .features, .statics{
        width: 90vw;
    }
      /* leaderboard */
    .leaderBoard{
        width: 90vw;
    }
    .rankingHeader{
        /* height: 2rem; */
    }
    .rankingHeader button:first-child{
        /* padding: auto; */
        /* width: auto; */
        /* line-height: 0; */
    }
    .box, .bbox{
        padding: .2rem;
    }
    
    #leaderBoardImg{
        /* top: 27rem; */
        /* right: 0rem; */
        height: 7rem;
        width: 9rem;
    }
    #shordDescription{
        margin: 1rem;
        font-weight: bold;
        padding: .5rem;
    }
    #redArrow{
    left: 3.5rem;
    }
}


/* js created */

.upvoteBtn, .downvoteBtn{
    margin-right: 2px;
    margin-bottom: 2px;
    border: none;
    border-radius: .6rem;
    cursor: pointer;
    transition: .1s linear;
    display: inline;
    padding: .4rem;
}

.upvoteBtn{
    background: #1bf057;
    border: 2px solid #1bf057;
}
.upvoteBtn:hover{
    background: #29D659;
}

.downvoteBtn{
    background: #ff2a2a;
    border: 2px solid #ff2a2a;

}
.downvoteBtn:hover{
    background: #df2727;
}

.voted{
    border: 2px solid blue;
}

.sureBtn{
    background: rgb(48, 154, 253);
    border: none;
    border-radius: .6rem;
    transition: .1s linear;
    padding: .6rem;
    width: 100%;
    cursor: pointer;
}
.sureBtn:hover{
    background: rgb(34, 106, 173);
}


.leaflet-control-geocoder-icon{
    z-index: 1020;
}