body {
  background: url(/roundcubemail-bgimages/loadbackground.php);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center;
}

html {
  min-height: 100%;
}


a, a.visited {color:#000!important;}
a:hover {color:#0a6fb7;}

a.support-link {
  text-transform: capitalize;
}

//label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] {
//    cursor: pointer;
//}

//#login-form input.button, input, #login-form button.button {
//    line-height: normal;
//}
//#login-form input.button, input, select, textarea, #login-form button.button {
//    margin: 0;
//    font-size: 100%;
//    vertical-align: middle;
//}
//user agent stylesheet
//input:not([type]), input[type="number" i], input[type="password" i], input[type="text" i] {
//    padding: 1px 0px;
//}
#login-form input.button, #login-form button.button {
    border:0;
    background: #222;
    font: normal 16px arial;
    color: #fff;
    border-radius: 4px;
    text-shadow: none;
    padding: 11px;
    margin-top: 5px;
}
#login-form input.button:hover, #login-form input.button:focus, #login-form input.button:active,
#login-form button.button:hover, #login-form button.button:focus, #login-form button.button:active {
    color: #FFF !important;
    background: #0a6fb7;
    box-shadow: none;
    -webkit-box-shadow: none;
}

video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(jpg/field.jpg) no-repeat;
    background-size: cover;
    opacity:1;
}

div#layout {
    display: inline-block;   
    background-color!: transparent;
    width: auto;
    height: auto;
    margin-top: 16vh;
}
div#layout-content {
    padding: 6vh 8vh;
    background-color: rgba(255, 255, 255, 0.8)!important;
    border-radius: 12px;
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s; /* Firefox < 16 */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera < 12.1 */
    animation: fadein 1s;
}
div#layout-content form {
}

div#login-footer {
  display: none;
}

div#layout img#logo {
  top: 0;
  max-width: 100%;
}
div#layout form {
  padding-top: 4vh;
  top: 0;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media screen and (max-width: 1023px) {
    body {
        background: url(/roundcubemail-bgimages/loadbackground.php?bgsize=1024x576);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    video#bgvid {
        display: none;
    }
}

@media screen and (max-width: 650px) {
    div#layout {
        width: 95%;
        background: #fff;
    }
    div#layout-content {
        padding: 6vh 15px;
        border-radius: 0;

    }
}

.input-group-text {
  border: 1px solid #333;
}
.form-control {
    border: 1px solid #333;
}

.task-login .input-group .icon.user:before, .task-login .input-group .icon.pass:before {
    font-weight:900;
}

#rcmloginuser, #rcmloginpwd {
    font-size: 16px!important;
}