/*
 * ===================================================================
 * The styles below are for the 2025 setup of the Compliance Group ELectrical Ltd Portal
 * This stylesheet can be updated without SASS or any preprocessors
 * or task runners like Gulp or Grunt, and all original styles are
 * present in app.css. This stylesheet should be loaded in after
 * app.css in order to override correctly!
 * Please note some SVG's 'fill' attributes were also updated; these
 * are located in the 'assets/img' folder.
 * Paddy - CS Group - 04/04/2025
 * ===================================================================
*/

/* Colour pallette:
 * Green       = #0ade64;
 * Dark red  = #ad0014;
 * Light red = #ff0404;
 * Grey      = #4d4d4f;
*/

/* Generic styles */
body {
    color: #4d4d4f;
    border-top: 6px solid #0ade64; 
}

h1, h2 {
    color: #0ade64;
}
.u-title.secondary {
    border-color: #0ade64;
    color: #0ade64;
}
#header .logo {
    width: 260px !important;
    height: 38px !important;
    background-image: url(http://portal.compliancegroup-electrical.uk/wp-content/uploads/Compliance-Group-Electrical_Logo-1.png);
    background-size: 260px 38px !important;
}

#header .logo:hover {
    background-position: 0;
}

/* Login page */
.u-form-label,
.u-form-checkbox {
    color: #4d4d4f;
}

.u-button.primary {
    background-color: #0ade64;
}

.u-button.primary:hover {
    background-color: #ad0014;
}

/* Dashboard page */
#header .nav .phone {
    color: #4d4d4f;
    padding-left: 38px;
}

#header .nav .phone:before {
    width: 26px ;
    height: 26px;
    background-image: url(../img/2019-rebrand-phone-icon.png);
    background-size: 26px 26px;
}

.u-button.primary.account,
.u-button.primary.account:hover,
.u-button.primary.logout,
.u-button.primary.logout:hover {
    background-color: #4d4d4f;
}

.m-tabs .nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.u-page-header {
    color: #0ade64;
}

.m-tabs .nav .link {
    color: #4d4d4f;
}

.m-tabs .nav .link.active {
    color: #0ade64;
}

.m-table th {
    color: #4d4d4f;
}

.m-table .file {
    color: #ff0404;
}

.u-button.secondary {
    background-color: #4d4d4f;
}

.u-title.gray {
    color: #4d4d4f;
    border-color: #4d4d4f;
}

.datepicker-top-left,
.datepicker-top-right {
    border-top-color: #d32627;
}

.datepicker-panel > ul > li:hover,
.datepicker-panel > ul > li.highlighted.picked,
.datepicker-panel > ul > li.highlighted:hover {
    background-color: #d32627 !important;
}

.m-news .item {
    border-bottom: 8px solid #717171;
    background-color: #4d4d4f;
}

#footer {
    border-top: 21px solid #4d4d4f;
}

#footer .top-content {
    background-color: #717171;
}

#footer .bottom-content {
    background-color: #d32627;
}

@media screen and (max-width: 850px) {
    
    #header .logo {
        width: 170px;
        height: 57px;
        background-size: 170px 57px;
    }
}

@media screen and (max-width: 650px) {
    #header .logo {
        width: 120px;
        height: 40px;
        background-size: 120px 40px;
    }
}

@media screen and (max-width: 568px) {
    
    #header .nav .phone {
        padding-left: 0;
}