#LoginContainerD1
    {
        width:250px;
        height: 100%;
        box-sizing: border-box;
        border:solid 1px gray;
        border-radius: 5px;
        box-shadow: 1px 3px 5px gray;
        background-color: transparent;
        float:left;
    }
#LoginContainerD1 #LogoContainer
    {
        width:100%;
        height: 20vh;
        box-sizing: border-box;
    }
#LoginContainerD1 #TitleContainer
    {
        width:100%;
        box-sizing: border-box;
    }
#LoginContainerD1 #InputContainer
    {
        width:100%;
        padding:20px;
        box-sizing: border-box;
    }
#LogoContainer
    {
        text-align: center;
    }
#LogoContainer img
    {
        width:120px;
        height: 120px;
        border-radius: 50%;
        margin-top:20px;
    }
#TitleContainer label
    {
        display:inline-block;
        width:100%;
        text-align:center;
        font-weight: bold;
    }
.form-group 
    {
        position: relative;
        padding: 10px 0;
        width: 100%;
        box-sizing: border-box;
    }
.form-group input 
    {
        background-color: transparent;
        border: none;
        border-bottom: 2px solid #9e9e9e;
        color: gray;
        font-size: 12px;
        padding: 8px 0;
        margin-top: 10px;
        display: block;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
.form-group label 
    {
        width:100%;
        text-align: center;
        color: #9e9e9e;
        font-size: 14px;
        font-weight: 100;
        position: absolute;
        pointer-events: none;
        top: 0;
        transform: translateY(23px);
        transition: all 0.2s ease-in-out;
        /*left: 0;*/
    }
.form-group input:valid,.form-group input:focus
    {
        border-bottom: solid 2px #0f0f0f;
        outline: none;
    }
.form-group input:valid + label,.form-group input:focus + label
    {
        color: #0f0f0f;
        font-weight: 600;
        font-size: 12px;
        transform: translateY(0);
    }
#InputContainer button
    {
        width:100%;
        height: 40px;
        padding:5px 10px 5px 10px;
        box-sizing: border-box;
        border:solid 1px  #a2a3a3e7;
        background-color:  rgba(116, 116, 117, 0.856);
        border-radius: 5px;
        font-weight: 700;
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 14px;
        cursor:pointer;
        box-shadow: 0px -1px 2px 0 #dadbdb ,0px 1px 1px 1px  #a3adb4e7;
        
    }
#InputContainer button:hover
    {
        border:solid 1px black;
    }
#LoginContainerD2
    {
        float:right;
        width:calc(100% - 260px);
        height: 100%;
        box-sizing: border-box;
        border:solid 1px transparent;

    }
#loginContainerD21
    {
        width:60%;
        margin-left:30%;
        margin-top:20%;
        font-size: larger;
        font-style: italic;
        font-weight: 600;
    }
#loginContainerD22
    {
        width:60%;
        margin-left:30%;
    }
#loginContainerD23
    {
        width:60%;
        height: 23px;
        box-sizing: border-box;
        margin-left:30%;
        position: absolute;
        right:0;
        bottom: 0;
        text-align: right;
    }
/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px)
    {
        #LoginContainerD1
            {
                width:100%;
            }
        #LoginContainerD2
            {
                display: none;
            }
  }