.display-block{
    display: block;
}

.display-none{
    display: none;
}

.content{
    width: 400px;
    padding: 40px;
    background: url("https://cdn.pixabay.com/photo/2013/10/02/23/03/mountains-190055_1280.jpg");
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.content::after{
    content: "";
    background: rgb(0, 0, 0, .5);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.button-group{
    margin-bottom: 6px;
    padding: 4px;
    border-radius: 30px;         
    box-shadow: 0 0.4rem 0.8rem 0 rgba(149, 149, 151, 0.2); 
    display: flex;
    flex-wrap: nowrap;     
}

.button-group button {   
    width: 100%;
    background: var(--bs-white) ;
    text-align: center;    
    font-size: 14px;
    line-height: 2.4rem;
    border: none;
    border-radius: 30px; 
  }

.button-group .switchSignin,
.button-group .switchSignup{    
    /*font-size: 18px;
    background: var(--bs-primary) ;
    color: rgb(255, 255, 255, .7);
    padding: 10px 2px; */   
    cursor: pointer;    
    transition: .5s;
}

.button-group .switchSignin:hover,
.button-group .switchSignup:hover{
    color: var(--bs-secondary);    
}

.button-group .btnActive{
    background: var(--bs-primary) ;
    color: var(--bs-secondary);  
}

.input-box{
    position: relative;
    margin-bottom: 15px;
}

.input-box input{
    padding: 10px 20px;
    border-radius: 20px;
    width: 100%;
    background: rgb(0, 0, 0, .5);
    color: rgb(255, 255, 255);
    font-size: 16px;
    margin-top: 10px;
}

.input-box label,
.check-box label{
    color: rgb(255, 255, 255, .7);
    letter-spacing: 1px;
}

.check-box{
    padding-left: 15px;
}

.check-box label{
    cursor: pointer;
    padding-left: 5px;
}

.passIcon{
    padding: 5px;
    color: rgb(255, 255, 255);
    position: absolute;
    bottom: 6px;
    right: 8px;
    cursor: pointer;
}

#btn-signin,
#btn-signup{
    padding: 10px 20px;
    margin-top: 30px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    text-transform: capitalize;
    width: 100%;
    border-radius: 20px;
    background: rgb(221, 79, 27);
    color: rgb(255, 255, 255);
    transition: .5s;
}

#btn-signin:hover,
#btn-signup:hover{
    background:var(--bs-secondary);
}

.signin-form a{
    color: var(--bs-primary) ;
    /*font-size: 12px;
    margin-top: 20px;
    text-transform: capitalize;
    display: block;*/
    text-align: center;
    text-decoration: none;
    transition: .5s;
}

.signin-form a:hover{
    color: var(--bs-secondary);
}

.signin-form hr{
    height: 1px;
    background: rgb(255, 255, 255, .7);
    margin-top: 20px;
}