﻿
html {
    position: relative;
    min-height: 100%;
}


.footer {
    width: 100%;
    /*white-space: nowrap;*/
}



/* COLORS START */

.redBackground,
.dropdown-item:hover, .dropdown-item:focus {
    background: #2754b0 !important;
}

.btn-primary {
    background: #327ec8 !important;
}

    .btn-primary:hover, .btn-primary:focus {
        background: #2866a3 !important;
    }

    .btn-primary:focus, .btn-primary.focus {
        box-shadow: 0 0 0 0.2rem #327ec894 !important;
    }

.redText {
    color: #CF142B;
}


.redBorderBottomColor {
    border-bottom: 1px solid #67B5E9 !important;
}

    .redBorderBottomColor .dropdown-toggle,
    .redBorderBottomColor .dropdown-toggle:focus,
    .redBorderBottomColor .bs-searchbox .form-control {
        border-bottom: 1px solid #CF142B !important;
    }

        .redBorderBottomColor .dropdown-toggle::after,
        .nav-tabs .nav-link.active {
            color: #327ec8 !important;
        }

.redBorderTopColor {
    border-top-color: #CF142B !important;
}

.redBorder {
    border-color: #327ec8 !important;
}


.greyBackground {
    background: #5C5C5C;
}




/* COLORS END */





.customContainer {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .customContainer {
        max-width: 490px;
    }
}

@media (min-width: 768px) {
    .customContainer {
        max-width: 576px;
    }
}

@media (min-width: 992px) {
    .customContainer {
        max-width: 768px;
    }
}

@media (min-width: 1200px) {
    .customContainer {
        max-width: 992px;
    }
}




/* IMAGES START */


.fitImage {
    width: 100%;
    height: 100%;
}

.fitImageCover {
    /*object-fit: cover;*/
    /*position: relative !important;*/
    background-size: cover !important;
    background-repeat: no-repeat !important;
}


.fitImageContain {
    /*object-fit: contain;*/
    /*position: relative !important;*/
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.fitImageLeft {
    background-position: left center !important;
}

.fitImageCenter {
    background-position: center center !important;
}

.fitImageRight {
    background-position: right center !important;
}

.fitImageTop {
    background-position: center top !important;
}

.fitImageBottomRight {
    background-position: right bottom !important;
}


/* IMAGES END */


.line-clamp {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    -webkit-box-orient: vertical;
    white-space: normal;
}


.iconEyePassword {
    right: calc(1rem + 10px);
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1000;
}


.bootstrap-select .dropdown-menu li a span.text {
    white-space: initial;
}


.customScroll {
    overflow: hidden auto;
    max-height: 290px;
    height: 100%;
    position: relative;
}

    .customScroll::-webkit-scrollbar {
        width: 7px;
    }

    .customScroll::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .customScroll::-webkit-scrollbar-thumb {
        background-color: #2855b2;
        outline: 1px solid #2855b2;
    }


.btn-blue {
    background-color: white !important;
    color: #5a5c69 !important;
    border: 1px solid #327ec8 !important;
}

    .btn-blue:hover, .btn-blue:focus {
        background: #327ec8 !important;
        color: white !important;
    }
.btn-primary {
    background-color: white !important;
    color: #5a5c69 !important;
    border: 1px solid #327ec8 !important;
}

    .btn-primary:hover, .btn-primary:focus {
        background: #327ec8 !important;
        color: white !important;
    }

.btn-default {
    background-color: white !important;
    color: #5a5c69 !important;
    border: 1px solid #327ec8 !important;
}

    .btn-default:hover, .btn-default:focus {
        background: #327ec8 !important;
        color: white !important;
    }

.btn-grey {
    background-color: #f0f0f8 !important;
    color: #5a5c69 !important;
    border: 1px solid #327ec8 !important;
}

    .btn-grey:hover, .btn-grey:focus {
        background: #7f7f84 !important;
        color: white !important;
    }


.footerBackground {
    background: linear-gradient(90deg, rgba(48,45,126,1) 0%, rgba(47,47,127,1) 36%, rgba(1,150,131,1) 68%, rgba(7,161,131,1) 100%);
}

.footerBackground-inverse {
    background: linear-gradient(90deg, rgba(7,161,131,1) 0%, rgba(1,150,131,1) 36%, rgba(47,47,127,1) 68%, rgba(48,45,126,1) 100%);
}

.bgwhite {
    background-color: white;
    width: 33%;
    left: 0;
    height: 100%;
    height: fill-available;
    position: absolute;
}



.bggradient {
    background: linear-gradient(90deg, rgba(48,45,126,1) 0%, rgba(47,47,127,1) 36%, rgba(1,150,131,1) 68%, rgba(7,161,131,1) 100%);
    width: 50%;
    right: 0;
    height: 100%;
    height: fill-available;
    position: absolute;
}

.bgtriangle {
    background-image: url("../images/header-triangle.png");
    width: 30%;
    left: 30%;
    height: 100%;
    height: fill-available;
    position: absolute;
    background-color: white;
}

@media (min-width: 2450px) {
    .bggradient {
        width: 65%;
    }

}

@media (max-width: 576px) {
    .bggradient {
        width: 43%;
    }

    .bgtriangle {
        width: 40%;
    }
}


@media (max-width: 425px) {
    .bggradient {
        width: 32%;
    }

}

@media (max-width: 300px) {
    .bggradient {
        width: 19%;
    }

    .bgtriangle {
        width: 52%;
    }
}


.bg-transparent {
    background: transparent !important
}

body {
    font-size: 12px !important
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-size: 13px !important
}

.form-control {
    font-size: 12px !important
}

.btn {
    font-size: 12px !important
}

.dropdown-header {
    font-size: 13px !important
}

.dropdown-item {
    font-size: 12px !important
}

.nav-link span {
    font-size: 12px !important
}

table .small {
    font-size: 12px !important
}

.fit-text {
    width: fit-content;
}

.title-footer-border {
    border-image-slice: 1 !important;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, #07A183 30%, white 30%);
}

.nav-bar-text {
    color: white !important;
}

.angola-logo {
    height: 35px;
}

@media (max-width: 767px) {
    .nav-bar-text {
        color: black !important;
    }


    .angola-logo {
        position: absolute;
        right: 15%;
        bottom: 10px;
    }
}

@media (max-width: 576px) {
    .angola-logo {
        right: 5%;
    }
}


@media (max-width: 425px) {
    .angola-logo {
        height: 25px;
    }
}


@media (max-width: 370px) {
    .angola-logo {
        height: 20px;
    }
}

@media (max-width: 300px) {
    .angola-logo {
        height: 14px;
        right: 1px
    }
}

.footer-border {
    border-top: 3px solid #32cccc !important;
}

.footer-second-border {
    border-top: 3px solid white !important;
}