/* THEME PRIMARY  COLOURS -----------------------------*/
/* ----------------------------------------------------*/

.if-green {
    color: #add144;
}
.if-white {
     color: #fff;
 }
.if-grey {
    color: #666;
}
.if-dark-grey {
    color: #444;
}
.if-light-grey {
    color: #efefef !important;
}
.if-green-bg {
    background: #add144;
}
.if-white-bg {
    background: #fff;
}
.if-grey-bg {
    background: #666;
}
.if-dark-grey-bg {
    background: #444;
}
.if-light-grey-bg {
    background: #efefef !important;
}

body {
    background: #fafafa;
    font-family: 'Open Sans', sans-serif;
}
a:hover, a:active, a:focus {
    outline: none;
    border: 0;
    color: #add144 !important;
    text-decoration: none;
}
body a {
    color: #add144 !important;
    text-decoration: none;
}
body a:hover, a:active, a:focus {
    color: #add144 !important;
    text-decoration: none;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 400 !important;
}

h2 {
    font-size: 20px !important;
}
label {
    font-weight: 400 !important;
}
thead {
    background-color: #ABD274;
}
table label {
    padding-left: 10px;
}


tfoot {
    background-color: none !important;
}
tfoot {
    background: none !important;
}
.btnBorder {
    border: 1px solid #646464;
}

.amount::before {
/ / content: "R " !important;
}

.logoholder {
    width: 34%;
}
.interschedulerHolder {
    width: 40%;
    margin-top: -15px;
}
thead tr th {
    text-align: center;
    background: #add144;
    padding-left: 10px;

}
body .ui-menu {
    background: #add144;
}
body .ui-datatable thead th {
    background-color: #add144;
    border: 1px solid #9f9d9d;
}
body .ui-button {
    background-color: #add144;
    color: #fff;
    border: 1px solid #add144;
}
body .ui-button:hover {
    background-color: #666666;
    color: #fff;
    border: 1px solid #666666;
}
body .ui-button:focus {
    background-color: #add144;
    color: #fff;
    border: 1px solid #add144;
}
body .ui-inputfield {
    margin: 3px;
    border: 1px solid #d1d1d1 !important;
}
body .ui-widget:not(.pi), body .ui-widget .ui-widget:not(.pi) {
    font-weight: 400 !important;
}
body .ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-active {
    background-color: #add144;
    color: #fff;
}
body .ui-selectonemenu {
    border: none;
}
body .ui-inputswitch {
    border: none;
}
body .ui-inputswitch .ui-inputswitch-handle {
    background-color: #353535;
}
body .ui-inputswitch.ui-inputswitch-checked:not(.ui-state-disabled):hover {
    background-color: #add144;
}
body .ui-inputswitch.ui-inputswitch-checked {
    background-color: #add144;
}
body .ui-inputswitch.ui-inputswitch-checked:hover {
    background: #add144;
}
body .ui-inputswitch.ui-inputswitch-checked:focus {
    background: #add144;
}
.ui-inputswitch .ui-inputswitch-on span:hover {
    background: #add144;
}
body .ui-selectcheckboxmenu {
    border: none;
}
body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container .ui-selectcheckboxmenu-token {
    background: #add144;
}
body .ui-chkbox .ui-chkbox-box.ui-state-active {
    border-color: #add144;
    background-color: #add144;
}
body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-filter-container .ui-icon {
    color: #add144;
}

.fa {
    color: #9f9f9f;
}
body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item.ui-state-highlight {
    background-color: #666666;
}
body .ui-dialog .ui-dialog-titlebar {
    border: 1px solid #add144 !important;
    background-color: #add144 !important;
}
:root {
    --input-border-color: #add144;
    --input-hover-border-color: #add144;
    --input-focus-border-color: #add144;
}

.box,
.template-layout > div {
    background-color: #cce4f7;
    padding-top: 1em;
    padding-bottom: 1em;
    border-radius: 4px;
}

.box-stretched {
    height: 100%;
}
.ctaHolder {
    height:80px;
    padding: 20px;
    width:100%;
    text-align: center;
    font-size: 21px;
}

.template-layout {
    margin: 0;
}

.template-layout > div {
    border: 1px solid #ffffff;
}

.vertical-container {
    margin: 0;
    height: 200px;
    background: #efefef;
    border-radius: 4px;
}

.nested-grid .p-col-4 {
    padding-bottom: 1em;
}

.template-footer {
    background: #a9a9a9;
    height: 36px;
    padding: 5px;
    margin-top: 10px;
    text-align: left;
}
/* ============ Custom styles below ============= */
.Interf-title {
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    font-weight: 300;
}
.Interf-title span {
    border-bottom-color: #94c523;
}
.login-holder {
    background: #ffffff;
    border-radius: 10px;
    margin-top: 40px;
    box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
    border-top: 5px solid #add144;
    border-bottom: 5px solid #add144;
}
.login-footer {
    background: #878484;
    height: 27px;
    padding: 4px;
}
.after-login-holder {
    background: #f2f2f2;
    border-radius: 10px;
    margin-top: 40px;
    box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 2.7px 5.3px
    rgba(0, 0, 0, 0.048), 0 3.5px 5px
    rgba(0, 0, 0, 0.06), 0 10.3px 9.9px
    rgba(0, 0, 0, 0.072), 0 5.8px 5.4px
    rgba(0, 0, 0, 0.086), 0 1px 1px
    rgba(0, 0, 0, 0.12);
    /*border-top: 5px solid #add144;*/
    border-bottom: 5px solid #add144;
}
.after-login-holder:hover {
    background: #add144;
    color: #fff;
    transition: all 0.5s ease;
}
.after-login-holder fa:hover{
    color: #fff;
}
.a-link-remove-underline:hover {
    text-decoration: none;
}
.texalcenter {
    text-align: center !important;
    font-weight: 300 !important;
}

.nested-grid {
    background: #ebebeb;
    padding: 5px;
    border-radius: 7px;
    box-shadow: 5px 3px 3px #d8d8d8;
}
.nested-grid h1 {
    font-size: 25px;
}
.nested-grid hr {
    margin-top: -8px;
    margin-bottom: 13px;
}

.ui-inputfield {
    margin: 3px !important;
}
.pad5 {
    padding: 5px;
}
.alignLabelright {
    font-weight: bold !important;
    margin-left: 5%;
    width: 100%;
}
.moveRight {
    margin-left: 7% !important;
}
.moveRight2 {
    margin-left: 9% !important;
}
.moveRight3 {
    margin-left: 12% !important;
}
.alignPanelGridTop td {
    vertical-align: top;
}
.backButton {
    float: right;
    margin-bottom: 10px !important;
    margin-left: 5px !important;
}
.userName {
    font-size: 25px !important;
    margin-left: -20px;
}
.logoutButtonHolder {
    margin-top: 33px !important;
}
.ui-outputlabel .ui-outputlabel-rfi {
    color: red;
}
.ui-state-disabled.showTooltip {
    pointer-events: all;
}
.options-button {
    background: none !important;
    color: black !important;
}
.options-button:hover {
    background: white !important;
    color: black !important;
    border: none !important;
}
.textRight {
    text-align: right;
}
.textLeft {
    text-align: left;
}
.textCenter {
    text-align: center;
}
/*==========  Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media (min-width : 992px) and (max-width : 1200px) {
    .login-holder {
        width: 45% !important;
    }
    .logoholder {
        width: 35%;
    }
    .logoutButtonHolder {
        margin: -56px 0px 20px 0px !important;
    }
}

/* Medium Devices, Desktops */
@media (min-width : 768px) and (max-width : 992px) {
    .login-holder {
        width: 45% !important;
    }
    .logoholder {
        width: 35%;
    }
    .logoutButtonHolder {
        margin: -56px 0px 20px 0px !important;
    }
    .after-login-holder {
        width: 94%;
    }
    .userName span {
        margin-right: 30px;
    }
}
/* Small Devices, Tablets */
@media (min-width: 480px) and (max-width : 768px) {
    .login-holder {
        width: 70% !important;
        margin: 0 auto;
    }
    .logoholder {
        width: 35%;
    }
    .logoutButtonHolder {
        margin: -56px 0px 20px 0px !important;
    }
}
/* Extra Small Devices, Phones */
@media (min-width: 320px) and (max-width: 480px) {
    .login-holder {
        width: 92% !important;
        margin: 0 auto;
    }
    .logoholder {
        width: 50%;
    }
    .logoutButtonHolder {
        margin: -56px 0px 20px 0px !important;
    }
    body .ui-menu.ui-menubar > .ui-menu-list > .ui-menuitem {
        display: block;
    }
    body .ui-menu.ui-menubar > .ui-menu-list > .ui-menuitem.ui-menubar-options {
        float: left;
    }
    .nested-grid hr {
        margin-top: 6px;
    }
    .container {
        padding-right: 0px;
        padding-left: 0px;
    }
    .ctaHolder {
        height: 96px;
        padding: 20px;
        width: 100%;
    }
    .userName {
        font-size: 16px !important;
        margin-left: -15px;
    }
    .moveRight {
        margin-left: 0% !important;
    }
    .moveRight2 {
        margin-left: 0% !important;
    }
    .alignPanelGridTop td {
        display: inline-block;
    }
    .interschedulerHolder {
        width: 45%;
        margin-top: -13px;
    }
}
/* Custom, iPhone Retina */
 @media (max-width: 320px) {
    .login-holder {
        width: 100% !important;
    }
     .logoholder {
         width: 50%;
     }
    .logoutButtonHolder {
        margin: -45px 0px 20px 0px !important;
    }
    body .ui-menu.ui-menubar > .ui-menu-list > .ui-menuitem {
        display: block;
    }
    body .ui-menu.ui-menubar > .ui-menu-list > .ui-menuitem.ui-menubar-options {
        float: left;
    }
    .nested-grid hr {
        margin-top: 6px;
    }
    .container {
        padding-right: 0px;
        padding-left: 0px;
    }
    .ctaHolder {
        height: 96px;
        padding: 20px;
        width: 100%;
    }
    .userName {
        font-size: 16px !important;
        margin-left: -15px;
    }
     body table td .ui-inputfield {
         width: 85%;
     }
     .textRight {
         text-align: left;
     }
     .textCenter {
         text-align: left;
     }
     .alignPanelGridTop td {
         display: inline-block;
     }
     .interschedulerHolder {
         width: 45%;
         margin-top: -10px;
     }
}