body {
    margin: 0;
}

.dark-mode {
    background: #202020;
}


    .dark-mode p {
        color: white;
    }

    .dark-mode .dark-mode-container span {
        color: white;
    }

    .dark-mode span{
        color:white;
    }

    .dark-mode .project-side-bar {
        background: #151515;
    }

    .dark-mode .switch {
        background: #202020;
    }

    .dark-mode .header-container {
        background: #202020;
        border: 3px solid #202020;
    }


    .dark-mode .header-modal {
        background: #202020;
    }

    .dark-mode .zoom-control img {
        filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(110deg) brightness(113%) contrast(101%);
    }

    .dark-mode .content-container {
        background: #202020;
    }


    .project-container {
        display: flex;
    }

.project-side-bar {
    position: relative;
    padding-top: 20px;
    flex: 1 0 250px;
    border-right: 1px solid #d1d5db;
    background:white;
    top:0px;
}

    .project-side-bar img {
        padding: 12px 0px 12px 30px;
        height: 50px;
    }

.items-project {
    display: flex;
    flex-direction: column;
}

.item-container {
    padding: 12px 0px 12px 30px;
    color: gray;
    cursor: pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

    .item-contaier p {
        padding: 0;
        margin: 0;
        font-weight: 500;
        font-size: 14px;
    }

.content-container {
    height: 100vh;
    overflow: auto;
    position: relative;
    background:white;
    width:100%;
}

.project-title {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    justify-content: center;
}

    .project-title img {
        height: 50px;
    }

    .project-title p {
        font-weight: bold;
        font-size: 20px;
    }

.project {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 20px;
}

.header-container {
    display: flex;
    position: sticky;
    align-items: center;
    top: 0px;
    background: white;
    width: 100%;
    padding: 20px;
    padding-bottom: 10px;
    z-index: 1;
    border: 3px solid white;
}

    .header-container i {
        color: #d90046;
        font-size: 23px;
        cursor: pointer;
    }

.project-selected {
    background: #009bdd;
    color: white;
}


.dark-mode-container {
    position: absolute;
    bottom: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

    .dark-mode-container span {
        color: gray;
        font-size: 14px;
    }

.dark-mode .close-control i {
    color: white;
}

.gallery-container {
    width: 100%;
    columns: 3 auto;
    column-gap: 30px;
}

    .gallery-container .screenshot {
        border: 1px solid #d1d5db;
        margin-bottom: 40px;
    }




.img-magnifying-glass {
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    background: linear-gradient(360deg, #009bdd8a,#009bdd8a);
    display: none;
}

    .img-magnifying-glass img {
        height: 70px
    }

.relative:hover .img-magnifying-glass {
    display: flex;
    cursor: pointer;
    /*top:0;*/
}

.menu-gallery {
    background: none;
    display: none;
}

.menu-close {
    background: none;
    position: absolute;
    top: 50%;
    right: 28px;
    display: none;
    transform: translateY(-50%);
}


    .menu-gallery i, .menu-close i {
        color: #d90046;
        font-size: 25px;        
    }


/*Modal full screen*/
.gallery-modal-container {
    background: #009bdd8a;
    width: 100%;
    height: 100px;
    position: fixed;
    height: 100vh;
    top: 0;
    display: none;
    z-index: 2;
}

.modal-in {
    display: block;
}

.header-modal {
    display: flex;
    align-items: center;
    background-color: white;
    justify-content: space-between;
    padding: 0px 15px;
    height: 60px;
}

   
    .modal-content {
        display: flex;
        justify-content: center;
        height: calc(100vh - 60px);
        overflow: hidden;
        align-items:center;
    }

.modal-content img{
   height:100%;
}
.screenshots-identifier {
    color: black;
}

.project-control, .images-control, .controls-right {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items:center;
}

    .project-control img {
        height: 30px;
    }

    .project-control i {
        color: #009bdd;
        font-size: 30px;
    }

    .images-control i {
        color: #d90046;
        font-size: 30px;
    }

.controls-right {
    width: 200px;
    justify-content:space-between;
}

    .controls-right i {
        color: #212b3f;
        font-size: 40px;
    }

.zoom-control {
    display: flex;
    align-items: center;
    gap: 15px;
}

    .zoom-control img {
        height: 30px;
        cursor:pointer;
    }


    .disabled-btn{
        opacity:.5;       
    }





@media (max-width : 425px) {    
    .project-side-bar {
        display: none;
        position: relative;
    }

    #text-only-desktop{
        display:none;
    }

    #project-title {
        display: none;
    }
   

    .controls-right {
        width: auto;
    }

    .project-title {
        width: 86%;
    }

        .project-title img {
            height: 10vw;
        }

        .project-title p {
            font-size: 5vw;
        }

    .menu-gallery {
        display: block;
    }

    .menu-close {
        display: block;
    }

    .side-bar-in {
        display: block;
        position: fixed;
        width: 100%;
        height: 100vh;
        z-index: 2;
        border: none;
        background: white;
    }
        
    .gallery-container {
        columns: 2 auto;
        column-gap: 15px;
    }

        .gallery-container img {
            margin-bottom: 15px;
        }

    .project-control i {
        font-size: 20px;
    }

    .images-control i {
        font-size: 20px;
    }

    .zoom-control img{
        height:20px;
    }
    .controls-right i{
        font-size:20px;
    }
}