::placeholder {
    color: #dddddd;
    opacity: 1; /* Firefox */
  }
  
::-ms-input-placeholder { /* Edge 12-18 */
    color: #dddddd;
}

.modal {
    display : block;  /* Block by default    */
    position: fixed;  /* Stay in place       */
    z-index : 1;      /* Sit on top          */
    left    : 0;
    top     : 0;
    width   : 100%;   /* Full width                */
    height  : 100%;   /* Full height               */
    overflow: auto;   /* Enable scroll if needed   */
    background-color: rgb(0,0,0);       /* Fallback color   */
    background-color: rgba(0,0,0,0.0);  /* Black w/ opacity */
}

.modal .dialog {
    /* display             : block; */
    position            : absolute;
    top                 : 50%;
    left                : 50%;
    width               : 400px;
    height              : 260px;
    margin-left         : -200px;
    margin-top          : -130px;
    background-color    : #888888dd;
    padding             : 0;
    border              : 1px solid #888;
    box-shadow          : 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    /* animation-name      : animatetop;
    animation-duration  : 0.4s */
}

@keyframes animatetop {
    from { top: -300px; opacity: 0 }
    to   { top:    0px; opacity: 1 }
}

.modal .dialog .header {
    width           : 100%;
    padding         : 6px 10px;
    background-color: #444444dd;
    color           : white;
    display         : flex;
    align-items     : center;
}

.modal .dialog .header .title {
    float			: left;
    font-size       : 16px;
    color           : white;
}

.modal .dialog .body {
    width:100%;
    padding         : 10px 10px 10px 10px;
    background-color: #dddddddd;
}
.modal .dialog .body .label {
    float			: left;
    padding         : 6px 0 6px 6px;
    font-size       : 16px;
    margin-bottom   : 10px;
}

.modal .dialog .body .name{
    width           : 100%;
    height          : 26px;
    text-align      : left;
    padding-inline  : 10px;
    border          : 1.0px solid #444444; 
    box-sizing      : border-box; 
    border-radius   : 1.5em; 
    font-size       : 16px;
    margin-bottom   : 10px;
}
.modal .dialog .body .pswd{
    width           : 100%;
    height          : 26px;
    text-align      : left;
    padding-inline  : 10px;
    border          : 1.0px solid #444444; 
    box-sizing      : border-box; 
    border-radius   : 1.5em; 
    font-size       : 16px;
    margin-bottom   : 10px;
}


.modal .dialog .footer {
    width:100%;
    float			: right;
    padding         : 6px 10px;
    background-color: #dddddddd;
}

.buttonDialogLogin {
    float           : right;
    width           : 110px;
}