body {
    background: #1F2937;
    color: white;
    padding: 50px 50px 20px 50px;
    font-family: "Open Sans", sans-serif;
}

.disappear {
    display: none; 
    width: 0; 
    height: 0; 
}



::-webkit-scrollbar {
    width: 8px;
    display: none;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px transparent; 
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #10B981; 
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #4ADF86; 
}



#log-in-first {
    text-align: center;
    margin-top: 50px;
}

#rishi-password, #title, .heading {
    color: #4ADF86;
}

#title {
    margin-bottom: 60px;
    font-size: 50px;
}

#initial-password {
    text-align: center;
    display: block;
    margin-left: auto; 
    margin-right: auto; 
    width: 250px; 
    height: 50px;
    border-radius: 5px;
    border: none;
    margin-top: 30px;
    font-size: 16px;
    background-color: whitesmoke;
}

#enter-first-password {
    margin-top: 20px; 
    border-radius: 5px; 
    border: none; 
    background-color: #10B981;
    color: white;
    width: 140px; 
    height: 35px;
    padding: 8px 4px;
    font-size: 12px;
    text-align: center;
}


.input-field {
    font-weight: bold;
    margin: 20px;
    margin-bottom: 10px;
    margin-left: 0px;
    padding: 0px; 
    color: #1B1924; 
    border-radius: 5px; 
    text-align: center;
    width: 180px; 
    height: 40px;
    border: none;
    font-size: 12px;
    display: block;
}

.input-field::placeholder {
    color: #D5D4D8;
}

#warning-msg {
    font-style: italic;
    margin-top: 20px; 
    font-weight: light;
    margin-left: 60px;
    width: 100px;
}

#username-password {
    margin-left: 20px;
}

#save-btn {
    margin-top: 20px; 
    border-radius: 5px; 
    border: none; 
    background-color: #10B981;
    color: white;
    width: 140px; 
    height: 35px;
    padding: 8px 4px;
    font-size: 12px;
    text-align: center;
    display: block; 
    margin-left: 40px;
}

.save-btn {
    margin-top: 25px; 
    border-radius: 5px; 
    border: none; 
    background-color: #10B981;
    color: white;
    width: 140px; 
    height: 35px;
    padding: 8px 4px;
    font-size: 12px;
    text-align: center;
    display: block;
}




#saved-passwords-title {
    display: block; 
    margin-left: auto; 
    margin-right: auto;
}


#saved-passwords-wrapper {
    display: flex; 
    width: 100%;
}

.section {
    min-width: 0px; 
    margin-right: 75px;
}

#account-information {
    width: 85%;
}




ul {
    list-style-type: none;
    padding: 0;
    display: flex; 
    flex-direction: column;
    gap: 20px;  
    margin-top: -5px;
    flex-wrap: wrap;
}

.account-user {
    display: flex; 
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    border-radius: 4px; 
    width: 100%;
    padding: 15px 15px;
}

.table-element {
    min-height: 50px;
}

.styling-logins {
    /* min-width: 65vw; */
    appearance: none;
    /* overflow: hidden; */
    overflow: scroll;
    /* inline-size: 180px;  */
    overflow-wrap: break-word;
    word-break: break-all;
}

#password {
    width: 300px;
}


.horizontal-dotted-line {
    border-bottom: 5px dashed white; 
    width: 100%;
    margin-top: 75px; 
    margin-bottom: 75px; 

}



#note-input {
    color: #1B1924;
    background-color: white;
    min-width: 315px;
    min-height: 135px;
    border: none;
    border-radius: 8px;
    padding: 15px 15px;
    resize: none;
    font-size: 14px;
    font-weight: bold;
}

#general-note-input {
    color: #1B1924;
    background-color: white;
    min-width: 315px;
    min-height: 135px;
    border: none;
    border-radius: 8px;
    padding: 15px 15px;
    resize: none;
    font-size: 14px;
    font-weight: bold;
}

#shift-input {
    color: #1B1924;
    background-color: white;
    min-width: 315px;
    min-height: 135px;
    border: none;
    border-radius: 8px;
    padding: 15px 15px;
    resize: none;
    font-size: 14px;
    font-weight: bold;
}

#note-input::placeholder {
    color: #D5D4D8;
}

#general-note-input::placeholder {
    color: #D5D4D8;
}

#shift-input::placeholder {
    color: #D5D4D8;
}

#add-password {
    margin-left: 20px;
}

#big-password-wrapper {
    margin-left: 20px;
}

#add-note {
    margin-left: 20px;
}

#saved-notes-wrapper {
    margin-left: 20px;
}

#saved-shift-wrapper {
    margin-left: 20px;
}


#saved-passwords {
    margin-bottom: 50px; 
}

#saved-notes {
    margin-top: 28px;
    margin-bottom: 50px; 
    width: 100%;
}

#saved-shift {
    margin-top: 25px;
    margin-bottom: 50px; 
    width: 100%;
}

#add-note-section {
    margin-bottom: 50px; 
}

#add-shift-section {
    margin-left: 20px;
    margin-bottom: 50px; 
}

#add-shift {
    margin-left: 20px;
}

#add-login-section {
    margin-bottom: 50px; 
}

#saved-general-notes {
    margin-top: 25px;
    margin-bottom: 50px; 
    width: 100%;
}

#add-general-note-section {
    margin-left: 20px;
    margin-bottom: 50px; 
}

#add-general-note {
    margin-left: 20px;
}

#saved-general-notes-wrapper {
    margin-left: 20px;
}




#info-img {
    width: 50px; 
    height: 50px; 
    margin-top: 45px;
}

#top-header {
    display: flex; 
    justify-content: space-between;
}

#archived-section-wrapper {
    margin-left: 20px;
    margin-top: 40px;
}

#archived-logins {
    margin-bottom: 60px; 
}

#archived-notes {
    margin-top: 150px;
    margin-bottom: 50px; 
}

#archived-shift {
    margin-top: 150px;
    margin-bottom: 50px; 
}

#archived-notes-wrapper {
    margin-left: 20px; 
}

#archived-shift-wrapper {
    margin-left: 20px; 
}

#archived-general-notes {
    margin-top: 150px;
    margin-bottom: 50px; 
}

#archived-general-notes-wrapper {
    margin-left: 20px; 
}

#archived-logins-alternative {
    margin-left: 20px; 
}

#archived-password-wrapper {
    margin-left: 20px;
    display: flex; 
    width: 100%;
    margin-top: -10px;
}

.section-checkbox-toggle {
    margin-top: 25px;
    display: block;
}



#note-section-input {
    margin-top: 0px;
    display: block
}

#shift-section-input {
    margin-top: 0px;
    display: block
}

#general-note-section-input {
    margin-top: 0px;
    display: block
}

#template-section-input {
    margin-top: 0px;
    display: block
}


.section-select {
    margin-top: 0px; 
    min-width: 180px; 
    /* height: 35px; */
    font-weight: bold;
    border: none;
    padding: 4px;
    text-align: center;
    border-radius: 5px; 
    color: #1B1924; 
    appearance: none;
    /* overflow: hidden; */
    overflow: scroll;
    font-size: 12px;
    /* inline-size: 180px;  */
    overflow-wrap: break-word;
    word-break: break-all;
    /* background: url("images/down.png") 96% / 8% no-repeat white; */
}

.section-select select {
    background: white; 
    width: 180px; 
    border: none;
    border-radius: 10px;
    overflow: scroll;
    font-size: 12px;
    /* inline-size: 180px;  */
    overflow-wrap: break-word;
    word-break: break-all;
}

option {
    border-radius: 5px;
    font: BetinaBold;
    word-break: break-all;
}

/* 
.input-field {
    margin: 20px;
    margin-bottom: 5px;
    margin-left: 0px;
    padding: 0px; 
} */

.warning-msg {
    font-style: italic;
    margin-top: 20px; 
    font-weight: light;
    width: 100px;
    margin-left: 20px;
}

.sectionList {
    margin-left: 20px; 
    margin-top: -20px;
}




#template-input {
    color: #1B1924;
    background-color: white;
    min-width: 315px;
    min-height: 225px;
    border: none;
    border-radius: 8px;
    padding: 15px 15px;
    resize: none;
    font-size: 14px;
    font-weight: bold;
}

#template-input::placeholder {
    color: #D5D4D8;
}

#add-template {
    margin-left: 20px;
}

#saved-template-wrapper {
    margin-left: 20px;
}

#saved-template {
    margin-top: 25px;
    margin-bottom: 50px; 
    width: 100%;
}

#add-template-section {
    margin-left: 20px;
    margin-bottom: 50px; 
}

#archived-template {
    margin-top: 150px;
    margin-bottom: 50px; 
}

#archived-template-wrapper {
    margin-left: 20px; 
}





.indent {
    margin-left: 20px; 

}

.info-section-section {
    margin-bottom: 120px;
}













.version2-wrapper {
    display: flex; 
}

.LHS-section {
    width: 35vw;
    margin-right: 30px;
    margin-left: 20px;
}

.RHS-section {
    width: 65vw;
    margin-left: 30px;
}

#big-login-wrapper {
    margin-bottom: 75px;
}

#big-notes-wrapper {
    margin-bottom: 75px;
}

#big-shift-wrapper {
    margin-bottom: 75px;
}

#big-general-notes-wrapper {
    margin-bottom: 75px;
}

#big-template-wrapper {
    padding-bottom: 75px;
}

/* #note-section-options {
    margin-left: 20px;
}

#shift-section-options {
    margin-left: 20px;
}

#general-note-section-options{
    margin-left: 20px;
}

#template-section-options{
    margin-left: 20px;
} */



/* #saved-username-list li {
    min-width: 250px;
    overflow: scroll;
    overflow-wrap: break-word;
    word-break: break-all;
} */












@media all and (min-width: 0px) and (max-width: 900px) {
    
    /* typography */
    
    #title {
        font-size: 35px;
    }

    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 23px;
    }

    h3 {
        font-size: 18px; 
    }

    h4 {
        font-size: 16px;
    }

    h5 {
        font-size: 14px; 
    }

    h6 {
        font-size: 12px;
    }

    p {
        font-size: 16px;
    }

    




    /* layout */

    body {
        padding: 25px;
        padding-left: 35px;
        padding-top: 35px;
    }

    #log-in-first {
        padding-right: 10px;
    }

    .version2-wrapper {
        display: flex; 
        flex-direction: column;
        gap: 100px;
        margin-right: -20px;
    }

    #info-img {
        width: 32px; 
        height: 32px; 
        margin-top: 35px;
    }

    .LHS-section {
        /* margin-right: 20px; */
        margin-left: 20px;
    }
    
    .RHS-section {
        /* margin-right: -25px; */
        width: 76vw;
        margin-left: 20px;
    }

    .section-checkbox-toggle, .shift-section-checkbox-toggle, .template-section-checkbox-toggle {
        width: 250px;
    }

    .section {
        min-width: 200px; 
        margin-right: 30px;
    }

    #password-information {
        min-width: 300px;
    }




    #add-login-title {
        margin-left: -20px;
    }

    #add-note-title {
        margin-left: -20px;
        width: 250px;
    }

    #add-shift-title {
        margin-left: -20px;
        width: 250px;
    }

    #add-general-note-title {
        margin-left: -20px;
        width: 250px;
    }

    #add-template-title {
        margin-left: -20px;
        width: 250px;
    }



    #note-input {
        min-width: 250px;
    }

    #general-note-input {
        min-width: 250px;
    }

    #shift-input {
        min-width: 250px;
    }

    #template-input {
        min-width: 250px;
    }
    
}