﻿:root {
    --CTA_Join: #f4d100;
    --CTA_Join_Hover: #f3e589;
    --CTA_Sectoral: #c1fdda;
    --CTA_Sectoral_Hover: #b0ecc9;
    --CTA_Employer: #b8f7ff;
    --CTA_Employer_Hover: #a7e6ee;
    --CTA_Member: #ec8a69;
    --CTA_Member_Hover: #db7958;
    --CTA_AutoEnrol: #4d0061;
    --CTA_AutoEnrol_Hover: #6f2283;
    --CTA_Calcluate: #144a4e;
    --CTA_Calcluate_Hover: #477d7f;
}



a.tab {
    border-radius: 5px;
    display: block;
    width: 100%;
    padding: 10px;
    padding-top: 20px;
    text-decoration: none;
    font-weight: bold;
}

    a.tab img {
        width: 95%;
    }

a.tabsmaller {
    padding: 2px;
    padding-top: 5px !important;
    font-size: 10px;
    text-align:center;
}

a.tabsmaller img {
    margin: .6rem 0 .6rem;
}


.smalltabs .col-md-6, .smalltabs .col-xs-6, .smalltabs .col-6 {
    padding: 0px;
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 5px;
}

a.tabIncreaseYourPension, .greenback {
    background-color: var(--CTA_Calcluate);
    color: white;
}

a.tabDeath {
    background-color: var(--CTA_AutoEnrol);
    color: white;
}

a.tabLife {
    background-color: var(--CTA_Sectoral);
}

a.tabWhyJoin {
    background-color: var(--CTA_Join);
}

a.tabEmployers {
    background-color: var(--CTA_Employer);
}

a.typeMembers {
    background-color: var(--CTA_Member);
}

a.tabIncreaseYourPension:hover, .greenback:hover {
    background-color: var(--CTA_Calcluate_Hover);
}

a.tabDeath:hover {
    background-color: var(--CTA_AutoEnrol_Hover);
}

a.tabLife:hover {
    background-color: var(--CTA_Sectoral_Hover);
}

a.tabWhyJoin:hover {
    background-color: var(--CTA_Join_Hover);
}

a.tabEmployers:hover {
    background-color: var(--CTA_Employer_Hover);
}

a.typeMembers:hover {
    background-color: var(--CTA_Member_Hover);
}

#OnlineServices a.ONSButton {
    display: block;
    padding:15px;
    text-decoration: none;
    font-weight: bold;
    margin-bottom: 5px;
}


#OnlineServices a.EmployerRegister {
    background-color: var(--CTA_Sectoral);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

    #OnlineServices a.EmployerRegister:hover {
        background-color: var(--CTA_Sectoral_Hover);
    }

#OnlineServices a.AutoEnrolement {
    background-color: var(--CTA_AutoEnrol);
    color:white;
}

    #OnlineServices a.AutoEnrolement:hover {
        background-color: var(--CTA_AutoEnrol_Hover);
    }



#OnlineServices a.EmployerService {
    background-color: var(--CTA_Employer);
}

    #OnlineServices a.EmployerService:hover {
        background-color: var(--CTA_Employer_Hover);
    }

#OnlineServices a.EmployeeService {
    background-color: var(--CTA_Member);
}

    #OnlineServices a.EmployeeService:hover {
        background-color: var(--CTA_Member_Hover);
    }


#OnlineServices .line1 {
}

#OnlineServices .line2 {
    font-weight:normal;
}

#OnlineServices a.ClickToJoin {
    background-color: var(--CTA_Join);
    color: black;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

    #OnlineServices a.ClickToJoin:hover {
        background-color: var(--CTA_Join_Hover);
    }

.lhsMenuFooter {
    padding: 10px;
    padding-bottom: 20px;
    margin-bottom: 15px;
    background-color: var(--CTA_Calcluate);
}

.lhsMenuFooter:hover{
    background-color: var(--CTA_Calcluate_Hover);
}

.curvedbottom {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.lhsMenuFooter a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}
#lhsMenu {
    background-color: var(--CTA_Calcluate);
    height: auto;
    overflow: hidden;
}


#lhsMenu a, .lhsMenuFooter a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}


#lhsMenu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
    text-align: left;
}

    #lhsMenu ul li {
    }

        #lhsMenu ul li a {
            border-bottom: 2px white solid;
            padding: 5px 10px 5px 10px;
            display: block;
            width: 100%;
        }

            #lhsMenu ul li a:hover, #lhsMenu ul li a.selected {
                background-color: var(--CTA_Calcluate_Hover);
            }

            #lhsMenu ul li a.nav_level2 {
                padding-left: 30px;
            }
