html, body {
    height: 100%;
}

.blindbox {
    position: fixed;
    top: 0;
    right: 0;
    z-index:2;
    background: transparent;
}

.blindOn {    
    bottom: 0;
    left: 0;
}

.blindOff {
    bottom: 100%;
    left:100%;
}

.blind {
    position: fixed;
    top: 0;
    right:0;    
    background: rgba(255,255,255,1);
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    z-index: 2;
    width:auto;
    transition:all;
    transition:0.5s;
    height:100vh;    
}

.open {
    left: 100%;
}

.close {    
    left: 60%;
}

.bContent4Row {
    display: grid;
    grid-template-rows: 10% 60% 20% 10%;
}

.bContent4RowMin {
    display: grid;
    grid-template-rows: 10% 73% 7% 10%;
}

.blindhead {
    display: flex;
    align-items: center;
    gap:1rem;
    padding-top: 1em;
    height: 4em;
}

    .blindhead .flex-vertical{
        flex-direction:column;        
    }

    .blindcontent {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 2em;
        height: 100vh;
    }

.blindbody {
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content:center;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    flex-grow: 1;
    padding-right:1em;
    padding-bottom:1em;
}

.blindcontent .DspError {
    display: flex;
    height: 3em;
    text-align: left;
}

.blindbody .divStepsHeader {
    display: flex;
    height: 4em;
}

.blindbody .divLoginCredential {
    display: flex;
    height: 100%;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
    flex-grow: 1;
}

    .blindbody .divLoginCredential .SectionTitle {
        display: flex;
        flex-direction:column;
        height:fit-content;
    }

    .blindbody .divLoginCredential .SectionBody {
        display: flex;
        height: fit-content;
        justify-content: center;
        margin:auto 0;
    }

    .blindfooter {
        display: flex;
        border-top: 1px solid rgba(70,70,70,0.1);
        margin: 1em;
        padding-top: 1em;
        height: 3em;
    }

.blindfooter div{
    min-width:7em;
}
   
.blindcontent ul {
    list-style: none;
}

.blindcontent li {
    padding: 0.2em 0;
}

    .blindcontent li label {           
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border: 0.008em solid transparent;
        padding: 0.4em 0.2em;
        width: max-content;
    }

        .blindcontent li label img,input{
            align-self:center;
        }

        .blindcontent li label:hover {
            cursor: pointer;
            border: 0.008em solid rgba(90,100,90,0.10);
        }

.blindsearch{
    padding-left:1em;
}

@media only screen and (max-width:1000px) {
    .close {
        left:50%;
    }
}

@media only screen and (max-width:720px){
    .close {
        left: 15%;
    }
}

@media only screen and (max-width:420px) {
    .close {
        left: 10%;
    }
}