
.tabs-wrapper {
    margin-top:40px;
    background-color:#E7EEF1;
    padding-top:60px;
}

.tabs-title {
    text-align: center;
    padding-right: 15px;
    padding-left: 15px;
}

.tab-content {
    background-color:transparent; 
    margin-bottom:25px;
}

.tabs .nav-tabs.nav-justified>li>a, .nav-tabs.nav-justified>li>a, .nav-tabs.nav-justified>li>a:focus, .nav-tabs.nav-justified>li>a:hover {
    color: #003168;
    font-size: 20px;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #A8A8A8;
    outline-color: #e7eef1;
}

.tabs .nav-tabs > li.active > a, .nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:focus, .nav-tabs.nav-justified>.active>a:hover {
    font-weight: normal;
    font-family: 'Roboto Medium', 'Roboto', Arial, sans-serif;
    background-color: transparent;
    border:none;
    border-bottom: 3px solid #FFC72C;
    outline-color: #e7eef1;
}


.tabs.dark .nav-tabs.nav-justified>li>a, .tabs.dark .nav-tabs.nav-justified>li>a, .tabs.dark .nav-tabs.nav-justified>li>a:focus, .tabs.dark .nav-tabs.nav-justified>li>a:hover {
    color: #ffffff;
    font-size: 20px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(168, 168, 168, 0.71);
    outline-color: #012f63;
}

.tabs.dark .nav-tabs > li.active > a, .tabs.dark .nav-tabs.nav-justified>.active>a, .tabs.dark .nav-tabs.nav-justified>.active>a:focus, .tabs.dark .nav-tabs.nav-justified>.active>a:hover {
    border-bottom: 3px solid #FFC72C;
}


/*Styling for different underline colours for each tab
.tabs .nav-tabs > li:first-child.active > a, .nav-tabs.nav-justified>li:first-child.active>a:focus, .nav-tabs.nav-justified>li:first-child.active>a:hover  {
   border-bottom: 3px solid #6D792C;
}

.tabs .nav-tabs > li:nth-child(2).active > a, .nav-tabs.nav-justified>li:nth-child(2).active>a:focus, .nav-tabs.nav-justified>li:nth-child(2).active>a:hover  {
    border-bottom: 3px solid #427280;
}*/

.tabs.dark .tab-content *, .tabs.dark .panel-body * {
    color:#fff;
}


@media (min-width:992px) and (max-width:1199px) {
    .tabs .nav-tabs.nav-justified>li>a, .nav-tabs.nav-justified>li>a, .nav-tabs.nav-justified>li>a:focus, .nav-tabs.nav-justified>li>a:hover, .tabs .nav-tabs > li.active > a, .nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:focus, .nav-tabs.nav-justified>.active>a:hover {
        font-size:19px;
        min-height: 75px;
        line-height: 120%;
    }
}

@media (max-width:767px) {
    .tab-content {
        margin-bottom:10px;
    }

    .tab-content .tab-pane>.white-box-text {
        padding: 27px 0;
    }
    .tabs-wrapper>.container {
        padding:0
    }
    .tabs-wrapper .panel {
        background-color:transparent;
        border: none;
    }
    .tabs-wrapper .panel-heading {
        background: transparent;
        color: #003168;
        border: none;
        border-top: 1.5px solid #979797;
    }
    .tabs-wrapper .panel-heading a {
        padding: 20px 15px 20px 15px;
        color: #003168 !important;
        font-family: Roboto, sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
    }

    .tabs-wrapper .tabs.dark .panel-heading {
        color: #fff;
        border-top: 0.5px solid #FFC72C;
    }
    .tabs-wrapper .tabs.dark .panel-heading a {
        color: #ffffff !important;
    }

    .tabs-wrapper .panel-heading a:hover {
        background: #f0f8fa;
        text-decoration: none;
    }

    .tabs-wrapper .tabs.dark .panel-heading a:hover {
        background: #002957;

    }  

    .tabs-wrapper .panel-heading a:after {
        font-family: var(--fa-style-family, "Font Awesome 6 Free");
        font-weight: var(--fa-style, 900);
        content: "\f077";
        -webkit-font-smoothing: antialiased;
        display: var(--fa-display, inline-block);
        font-style: normal;
        font-variant: normal;
        line-height: 1;
        text-rendering: auto;
        float: right;
        transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -webkit-transition: all 0.2s linear;
    }

    .tabs-wrapper .panel-heading a.collapsed:after {
        transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }


}