body {
    background-color: #f4f4f6;
    color: #3C4858;
    font-weight: 300;
}

.hidden {
    display: none;
}

.card .logo-newps {
    width: 100%;
    padding: 6px 10px;
}

.navbar {
    z-index: 10000;
}

.navbar .logo-newps {
    height: 100%;
}

input.form-control {
    padding-left: 4px;
}

.form-control, .is-focused .form-control {
    background-image:
        linear-gradient(0deg,#fc9410 2px,rgba(156,39,176,0) 0),
        linear-gradient(0deg,#d2d2d2 1px,hsla(0,0%,82%,0) 0);
}

#login-page.login-page .container {
    padding-top: 2em !important;
}

#login-page.login-page .card-login .card-title {
    font-weight: 300;
}

#login-page.login-page .card-login .card-body {
    padding: 0 10px;
}

#login-page.login-page .card-login .card-body .input-group {
    padding-right: 10px;
}

#login-page.login-page .card-login .card-body.errors {
    margin-top: 20px;
    padding: 0 10px;
}

#login-page .card-description {
    padding: 0 1em;
}

#dashboard-page .container {
    margin: 90px auto 20px;
}

#dashboard-page .card-dashboard {
    margin: 10px 0;

    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;

    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}

#dashboard-page .card-dashboard:hover {
    -webkit-transform: translate(-2px, -2px);
    -moz-transform: translate(-2px, -2px);
    -ms-transform: translate(-2px, -2px);
    -o-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);

    box-shadow: 3px 3px 3px rgb(33 33 33 / 20%);

    z-index: 2000;
}

#dashboard-page .card-dashboard .btn {
    color: #666;
    text-transform: none;
}

#dashboard-page .card-dashboard .card-logo
{
    display: flex;
    overflow: hidden;
    height: 6em;
}

#dashboard-page .card-dashboard .card-footer {
    padding-top: 0;
}

#dashboard-page .card-dashboard .card-logo img {
    max-width: 100%;
    max-height: 100%;

    margin: auto;
}

#dashboard-page .card-dashboard.add {
}

#dashboard-page .card-dashboard .edit {
    height: 6em;
}

#dashboard-page .card-dashboard .close {
    z-index: 3000;
    position: absolute;
    right: 0.8em;
    top: 0.3em;
}

#dashboard-page .card-dashboard .close:hover {
    color: #f44336;
}

#dashboard-page .card-dashboard.add:not(:hover) {
    border: 1px dashed lightgrey;
    background: none;
    box-shadow: none;
}

#dashboard-page .card-dashboard.add .invalid .form-control {
    background-image: linear-gradient(0deg,#f44336 2px,rgba(244,67,54,0) 0),linear-gradient(0deg,#d2d2d2 1px,hsla(0,0%,82%,0) 0)
}

#dashboard-page .black-logo img {
    background: black;
    border-radius: 6px;
    padding: 1em;
}

#dashboard-page .small-logo img {
    width: 5em;
}

#dashboard-page .bw-logo img {
    filter: grayscale(100%);
}

#dashboard-page .card-dashboard.vpn .card-body::before {
    content: 'VPN';
    position: absolute;
    left: 0.8em;
    top: 0.3em;
    font-size: 0.8em;
}

#dashboard-page .card-dashboard.sso .card-body::after {
    content: 'SSO';
    position: absolute;
    right: 0.8em;
    top: 0.3em;
    font-size: 0.8em;
}

@media (max-width: 767px)
input.form-control {
    font-size: 18px !important;
}