.mynav{
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100% !important;
}
html {
    --scrollbarBG: #fff;
    --thumbBG: #90A4AE;
  }
.form {
    margin: 50px auto;
    /* width: 300px; */
    padding: 30px 25px;
    background: rgb(255, 255, 255);
}
h1.login-title {
    color: #666;
    margin: 0px auto 25px;
    font-size: 25px;
    font-weight: 300;
    text-align: center;
}
.login-input {
    font-size: 15px;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 25px;
    height: 25px;
    width: calc(100% - 23px);
}
.login-input:focus {
    border-color:#6e8095;
    outline: none;
}
.login-button {
    color: #fff;
    background: #55a1ff;
    border: 0;
    outline: 0;
    width: 100%;
    height: 50px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}
.link {
    color: #666;
    font-size: 15px;
    text-align: center;
    margin-bottom: 0px;
}
.link a {
    color: #666;
}
h3 {
    font-weight: normal;
    text-align: center;
}

.images::-webkit-scrollbar {
    width: 11px;
  }

.images {
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
    overflow: scroll;
    overflow-x: hidden; 
    scrollbar-width: thin;
    margin: 10px;
    margin-top: 20px;
    padding-top: 20px;
}

.images::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
  }
.images::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG) ;
    border-radius: 6px;
    border: 3px solid var(--scrollbarBG);
  }

.images img {
    border-radius: 10px;
    padding: 5px;
    right: rgb(60, 237, 6);
    outline-offset: -4px;
}

 @media only screen and (min-width : 481px) {
#fileUploader{
    width: 70%;
    display: inline;
}
.p-5t {
    padding: 3rem !important;
}
        #preview,
        #process,
        #complete {
            color: rgb(80, 80, 232);
            background-color: rgba(255, 255, 255, 0.3);
        }
        .images {
            height: 400px !important;
            width: 428px !important;
            overflow-y: scroll !important;
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: wrap !important;
        }
.mynav a{
    color: white ;
}
#dropdown {
    width: 28%;
    display: inline;
}
}

 @media only screen and (max-width: 480px) {
    /* CSS rules to apply */

    body,html {
        width: 100%;
        overflow-x: hidden !important;
    }
    .navbar-brand{
        font-size: xx-large ;
        font-weight: 800 ;
        color: whitesmoke ;
    }
    .custom-file{
        display: flex;
        flex-direction: column;
        justify-content: center ;
        justify-self: center;
        align-content: center;
    }
    #fileUploader, #dropdown{
        width: 100% !important;
        margin-bottom: 5px;
    }
    .p-5t {
        padding: 3rem !important;
        padding-bottom: 0px !important;
    }
        .images::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0 ) !important;
        }
    .images{
        height: 200 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around;
        overflow-x: scroll;
        width: 80% !important;
        margin-inline: 10% !important;
    }
    .f{
        flex-direction: column !important;
    }
    .txt > h5, p {
        text-align: center;
    }
    .mybtn{
        width: 100%;
    }

    #preview, #process, #complete {
        color: rgb(80, 80, 232);
        background-color: rgba(255, 255, 255, 0.9);
    }
}