zxcms/backend/web/css/site.css

html,
body {
    height: 100%;
    background-color: #ffffff !important;
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 70px 15px 20px;
}

.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

a {
    text-decoration: none;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    /*font-family: 'Glyphicons Halflings';*/
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    /*font-weight: normal;*/
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113" "\e151";*/ "\f884";
}

a.desc:after {
    content: /*"\e114"* "\e152"*/ "\f160";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding: 15px;
    border: none;
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
}

.nav > li > form > button.logout:focus {
    outline: none;
}

.company-logo {
    width: 100%;
    text-align: center;
}

.sidebar-collapse .company-logo {
    display: none;
}

.modal-content {
    background: transparent;
}

.modal-content .modal-body, .modal-content .modal-footer {
    background: #ffffff;
}

div.required label.control-label:after {
    content: " *";
    color: red;
}

.thumbnail .file-icon .fa {
    font-size: 36px;
}

.sub-stop-led
{
    font-size: 11px;
    color: #ae121d;
}

.grid-view .glyphicon {
    display: inline-block;
    padding: 5px;
    background-color: #ffffff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

/* CARDS */
.business-card {
    background: #ddd;
    /*padding: 10px;*/
    border-radius: 4px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

.business-card .media-left {
    background-color: #999;
    padding: 10px;
}

.business-card .media-body {
    padding: 10px;
}

.business-card .profile-img {
    height: 80px;
    background: white;
}
.business-card .job {
    color: #555;
    font-size: 16px;
}
.business-card .name {
    font-size: 20px;
}

.business-card .buttons {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: none;
    font-size: 12px;
}

.business-card:hover .buttons {
    display: block;
}

.business-card .buttons a {
    color: #777;
}

.business-card-empty {
    border: solid 3px #ccc;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    text-align: center;
    color: #ccc;
    font-size: 16px;
    cursor: pointer;
}
.business-card-empty i {
    font-size: 30px;
}
.business-card-empty:hover {
    color: #484f58;
}

/* CONTACT CARD */
.contact-card .job {
    color: #999;
    font-size: 16px;
}
.contact-card .name {
    font-size: 20px;
    color: #333;
}

.contact-card .cc_image {
    width:180px;
    height: 220px;
    margin: 0 auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.modal .panel-body {
    color: #ccc !important;
}

.modal #sub_data {
    color: #555 !important;
}

.info-box-number {
    font-size: 26px !important;
}

/* CALENDAR */
.calendar-left-sidebar .list-group .btn {
    border: 0;
    background-color: transparent;
    margin-top: -10px;
    margin-right: -15px;
}

.calendar-left-sidebar .list-group .btn:hover {
    border: 0;
    background-color: transparent;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.business-card-avatar{
    width: 80px;
    height: 80px;
    background-size: cover;
    display: block;
    border-radius: 50%;
}

/*.custom-checkbox { position: absolute; opacity: 0; z-index: -1; }
/.custom-checkbox+span { font: 14px sans-serif; color: #3b3b3b; }
.custom-checkbox+span:before { font: 16pt FontAwesome; content: '\00f096'; display: inline-block; width: 16pt; padding: 2px 0 0 3px; margin-right: 0.5em; }
.custom-checkbox:checked+span:before { content: '\00f046'; color: limegreen }
.custom-checkbox:focus+span:before { outline: 1px dotted #aaa; }
.custom-checkbox:disabled+span { color: #999; }
.custom-checkbox:not(:disabled)+span:hover:before { text-shadow: 0 1px 2px #77F; }*/

.deadline-card-date-success { background-color: #2c9f32 }
.deadline-card-date-danger { background-color:#cc3532 }
.deadline-card-date-primary { background-color:#339ccc }

.card-header-color {
    background-color: #7BA7AB !important;
    color: #ffffff;
}
.card-title-info {
    color: rgba(255,255,255,0.5) !important;
}

.card, .card-header, .btn, .btn-lg, .form-control {
    border-radius: 0 !important;
}
.card-header {
    border-bottom: solid 3px #628589 !important;
}

.custom-control-input.is-valid ~ .custom-control-label::before {
    color: #cccccc !important;
    background-color: #cccccc !important;
    border-color: #cccccc !important;
}
.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
    color: #7BA7AB !important;
    background-color: #7BA7AB !important;
    border-color: #7BA7AB !important;
}
.custom-control-input ~ .custom-control-label::before {
    border-radius: 0 !important;
    border-color: #7BA7AB !important;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #7BA7AB !important;
    border-color: #7BA7AB;
}
.custom-checkbox .custom-control-input:checked:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(123, 167, 171, 0.25)
}
.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 0, 0, 0.25)
}
.custom-checkbox .custom-control-input:active ~ .custom-control-label::before {
    background-color: #9bd2d8;
}
.was-validated .custom-control-input:valid ~ .custom-control-label,
.custom-control-input.is-valid ~ .custom-control-label,
.custom-control-input.is-valid:checked ~ .custom-control-label::before {
    color: inherit !important;
}
.was-validated .form-control:valid, .form-control.is-valid {
    border-color: #cccccc !important;
}
.form-control:focus {
    border-color: rgba(123, 167, 171, 0.44) !important;
}

.btn-success{color:#fff !important; background-color: #7bab83 !important; border-color:#7bab83 !important;border-bottom: solid 3px #658962 !important;}
.btn-success:hover{color:#fff;background-color: #658962 !important;border-color:#658962 !important;}
.btn-success:focus,.btn-success.focus{box-shadow:0 0 0 .2rem rgba(98, 137, 99, 0.5)
}
.btn-success.disabled,.btn-success:disabled{color:#fff;background-color:#7bab83;border-color:#658962}
.btn-success:not(:disabled):not(.disabled):active,.btn-success:not(:disabled):not(.disabled).active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#7bab83;border-color:#000}
.btn-success:not(:disabled):not(.disabled):active:focus,.btn-success:not(:disabled):not(.disabled).active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(98, 137, 101, 0.5)
}

.btn-outline-success{color:#7bab83;background-color:transparent;background-image:none;border-color:#7bab83}.btn-outline-success:hover{color:#222;background-color: #009a1f;border-color:#7bab83}
.btn-outline-success:focus,.btn-outline-success.focus{box-shadow:0 0 0 .2rem #658962}
.btn-outline-success.disabled,.btn-outline-success:disabled{color:#7bab83;background-color:transparent}
.btn-outline-success:not(:disabled):not(.disabled):active,.btn-outline-success:not(:disabled):not(.disabled).active,.show>.btn-outline-success.dropdown-toggle{color:#fff;background-color: #8cc28f;border-color:#7bab83}
.btn-outline-success:not(:disabled):not(.disabled):active:focus,.btn-outline-success:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #658962}


.btn-primary{color:#fff !important; background-color:#7BA7AB !important; border-color:#7BA7AB !important;border-bottom: solid 3px #628589 !important;}
.btn-primary:hover{color:#fff;background-color:#628589 !important;border-color:#628589 !important;}
.btn-primary:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(98,133,137,0.5)}
.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#7BA7AB;border-color:#628589}
.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#7BA7AB;border-color:#000}
.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(98,133,137,0.5)}

.btn-outline-primary{color:#7BA7AB !important;background-color:transparent !important;background-image:none !important;border-color:#7BA7AB !important; border-bottom: solid 3px #628589 !important;}.btn-outline-primary:hover{color:#FFFFFF !important;background-color:#628589 !important;border-color:#628589 !important; !important}
.btn-outline-primary:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem #628589 !important;}
.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#7BA7AB !important;background-color:transparent !important;}
.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{color:#fff !important;background-color: #8cbdc2 !important;border-color:#7BA7AB !important;}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #628589 !important;}


.btn-danger{color:#fff !important; background-color: #dc565f !important; border-color:#dc565f !important;border-bottom: solid 3px #C82333 !important;}
.btn-danger:hover{color:#fff;background-color:#C82333 !important;border-color:#C82333 !important;}
.btn-danger:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(200,35,51,0.5)}
.btn-danger.disabled,.btn-primary:disabled{color:#fff;background-color:#dc565f;border-color:#C82333}
.btn-danger:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#dc565f;border-color:#000}
.btn-danger:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(200,35,51,0.5)}

.btn-outline-danger{color:#dc565f;background-color:transparent;background-image:none;border-color:#dc565f}.btn-outline-primary:hover{color:#222;background-color: #9a231e;border-color:#dc565f}
.btn-outline-danger:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem #C82333}
.btn-outline-danger.disabled,.btn-outline-primary:disabled{color:#dc565f;background-color:transparent}
.btn-outline-danger:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color: #dfa5a1;border-color:#dc565f}
.btn-outline-danger:not(:disabled):not(.disabled):active:focus,.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #C82333}

.btn-info{color:#fff !important; background-color:#17A2B8 !important; border-color:#17A2B8 !important;border-bottom: solid 3px #138496 !important;}
.btn-info:hover{color:#fff;background-color:#138496 !important;border-color:#138496 !important;}
.btn-info:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(98,133,137,0.5)}
.btn-info.disabled,.btn-primary:disabled{color:#fff;background-color:#17A2B8;border-color:#138496}
.btn-info:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#17A2B8;border-color:#000}
.btn-info:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(98,133,137,0.5)}

.btn-outline-info{color:#17A2B8;background-color:transparent;background-image:none;border-color:#17A2B8}.btn-outline-primary:hover{color:#222;background-color:#009a9a;border-color:#17A2B8}
.btn-outline-info:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem #138496}
.btn-outline-info.disabled,.btn-outline-primary:disabled{color:#17A2B8;background-color:transparent}
.btn-outline-info:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color: #8cbdc2;border-color:#17A2B8}
.btn-outline-info:not(:disabled):not(.disabled):active:focus,.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #138496}

.nav-link {
    color: #1e7785;
}

.nav-link:hover {
    color: #06333b;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #7BA7AB !important;
}

.auth-icon {
    display: inline-block !important;
    margin: 0 10px;
}

.invalid-feedback {
    font-size: 0.7em !important;
    color: #F15B42 !important;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #cccccc !important;
}

.card-primary.card-outline {
    border-top: 3px solid #7BA7AB !important;
}

.summary {
    float: right;
    font-size: 0.8em;
    opacity: 0.5;
}

table {
    font-size: 0.9em;
}

.card-header-info {
    border-bottom-color: #17A2B8 !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #17A2B8 !important;
}

.help-block {
    color: red;
    font-size: 0.8em;
}