@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

:root {
    /* Logo */
    --header-logo-url: url("../img/headers/logo.png");
    /* Fonts */
    --main-font-family: 'Roboto', sans-serif;
    /* Primary Colors */
    --primary-color: #230078;
    --primary-hover-color: #230078;
    --primary-light-color: white;
    /* Secondary Colors */
    --secondary-color: #230078;
    --secondary-hover-color: #230078;
    --secondary-light-color: white;
    /* Fonts */
    --primary-dark: #1d2127;
    --primary-light: #cecece;
    --secondary-white: white;
}

#main-logo {
    width: 250px;
}


@media (max-width: 991px) {
    .mobile {
        border-top: 2px solid var(--primary-color);
    }

        .mobile li a {
            border-bottom: 0.5px solid var(--primary-color);
        }

    .header ul li button {
        color: var(--primary-dark) !important;
        background: var(--secondary-white) !important;
    }

        .header ul li button.btn:hover {
            background: var(--primary-light-color) !important;
        }
}

input[type="checkbox"].checkbox-switch:checked {
    background: var(--primary-color) !important;
}

.thumb-info-action {
    width: 100%;
    text-align: center;
}

/*=============================================
=            Header Content Height            =
=============================================*/

.main .container-fluid {
    padding: 100px 0 0 0 !important;
}

/*=============================================
=              Fonts and images               =
=============================================*/
#back-to-top {
    cursor: pointer;
    display: none;
    z-index: 999999;
    position: fixed;
    bottom: 0px;
    right: 0px;
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 5px 5px 0 5px !important;
}

/*=============================================
=                Global Classes               =
=============================================*/

body {
    padding: 0 !important;
    margin: 0 !important;
    color: #1D263A !important;
    font-size: 14px;
    line-height: inherit;
    background-color: #e5e5e5 !important;
}

* {
    transition: all .5s ease;
    box-sizing: border-box !important;
}

/*=============================================
=                Header Resets                =
=============================================*/

.header-body,
.header-body *,
.header-documentation .container,
.header-documentation,
.header-documentation * {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
    text-decoration: inherit !important;
    text-transform: inherit !important;
    background-color: transparent !important;
    background: transparent !important;
}

#header,
#header .header {
    background: var(--primary-color);
    background-color: var(--secondary-white);
}

    #header .lang-position {
        display: block;
    }

    #header .container,
    .header-container {
        margin: 0 auto !important;
    }

.header-logo a {
    display: block !important;
}

/*=============================================
=                   Header                    =
=============================================*/

.header-documentation > .container,
.header-faq > .container {
    text-align: center !important;
    margin: 0 auto !important;
    margin-top: 0 !important;
    padding: 40px 20px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 180px;
    background-color: #005696 !important;
    width: 100% !important;
    max-width: 100%;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
}

.body-documentation > .container {
    width: 100% !important;
}

.header-faq > .container {
    background-image: url(../img/headers/faq.png) !important;
}

.header-documentation > .container {
    background-image: url(../img/headers/api.png) !important;
}

    .header-documentation > .container h5,
    .header-faq > .container h5 {
        margin: 0 auto !important;
        font-weight: 600;
        letter-spacing: normal;
        line-height: 18px;
    }

.header-documentation .container h5,
.header-faq .container h5 {
    font-size: 32px !important;
    line-height: 42px;
    color: #FFFFFF;
}

.header-documentation > .container h5 + p,
.header-faq > .container h5 + p {
    margin: 20px auto 0 auto !important;
    line-height: 2rem;
    font-size: 1.3rem !important;
    font-weight: 400 !important;
    color: white !important;
}

.header-documentation p,
.header-faq p {
    color: #FFFFFF !important;
}

.header-body, .header-documentation, .header-documentation *,
.header-faq, .header-faq * {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
    text-decoration: inherit !important;
    text-transform: inherit !important;
    background-color: transparent !important;
    background: transparent !important;
}

#header .header-row {
    display: flex;
    flex-grow: 1;
    align-items: center;
    align-self: stretch;
    max-height: 100%;
}

#header .header-column {
    display: flex !important;
}

#header .header-column {
    display: flex;
    align-self: stretch;
    align-items: center;
    flex-grow: 1;
    flex-direction: column;
}

.header-row > div:first-child {
    flex-grow: 0 !important;
}

.flexitem, .header-row > div {
    position: relative;
    margin: 1rem !important;
    background: white;
    align-items: center;
    -webkit-box-align: center;
    -webkit-box-flex: 1;
    -ms-flex-align: center;
    flex-grow: 1;
    -ms-flex-negative: 0;
    -ms-flex-positive: 1;
    -ms-flex-preferred-size: 15rem;
    flex-shrink: 0;
}

.flexitem, .header-row .header-row > div {
    margin: 0 !important;
}

.main-header .header-content a {
    border: 2px solid var(--secondary-color) !important;
}

    .main-header .header-content a:hover {
        background: var(--secondary-color) !important;
    }

/*=============================================
=                DESIGN CHANGE                =
=============================================*/


/*=====  Main font  ======*/

html, body {
    font-family: 'Roboto', sans-serif !important;
}

#index-slick > .container {
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
}


/*=============================================
=                 Navigation                  =
=============================================*/
.header ul li a, #footer .header ul li a {
    color: var(--primary-dark) !important;
}

    .header ul li a:hover, #footer .header ul li a:hover {
        color: var(--primary-dark) !important;
        background: var(--primary-light-color) !important;
    }

.profile-menu-ul li.username {
    border: 1px solid var(--primary-light) !important;
}

.header ul li a.active-submenu, #footer .header ul li a.active-active-submenu {
    background: var(--primary-light-color) !important;
}

/*=============================================
=                    Images                   =
=============================================*/
.main-header {
    background-image: url(../img/headers/home.png) !important;
}

.main-navigation-logo > a:before {
    content: var(--header-logo-url);
}

.main-header.support {
    background-image: url(../img/headers/faq.png) !important;
}

.main-header.products {
    background-image: url(../img/headers/apiproducts.png) !important;
}

/*=====  Inner Pages  ======*/

.body.systemperformance .header-documentation > .container,
.body.home_dashboard .header-documentation > .container {
    background-image: url(../img/headers/systemperformance.png) !important;
}

.body.reports .header-documentation > .container {
    background-image: url(../img/headers/reports.png) !important;
}

.body.apidocumentation .header-documentation > .container {
    background-image: url(../img/headers/api.png) !important;
}

.body.home_static .header-documentation > .container {
    background-image: url(../img/headers/faq.png) !important;
}

.body.home_static .header-documentation > .container {
    background-image: url(../img/headers/docs.png) !important;
}

.body.tpp_tppapplication .header-documentation > .container,
.body.tpp_tppregistration .header-documentation > .container,
.body.tpp_tppapplications .header-documentation > .container,
.body.tpp_tppuser .header-documentation > .container,
.body.tpp_tppusers .header-documentation > .container,
.body.tpp_tppsandboxuser .header-documentation > .container,
.body.tpp_tppsandboxusers .header-documentation > .container,
.body.tpp_tppcertificate .header-documentation > .container,
.body.tpp_sandboxuris .header-documentation > .container,
.body.transfers_singlepayments .header-documentation > .container,
.body.tpp_sandboxtests .header-documentation > .container,
.body.manage_userinfo .header-documentation > .container,
.body.manage_changepassword .header-documentation > .container,
.body.manage_twofactorauthentication .header-documentation > .container {
    background-image: url(../img/headers/userinfo.png) !important;
}

/*=====  When not logged in  ======*/

.body.account_login #index-slick > .container,
.body.Account_Login #index-slick > .container {
    background-image: url(../img/headers/login.png) !important;
}

.body.account_register #index-slick > .container,
.body.support_contact #index-slick > .container,
.body.support_sendemailrequestconfirmation #index-slick > .container,
[class^="body Account_ConfirmEmail_"] #index-slick > .container,
.body.account_confirmemailsuccess #index-slick > .container,
.body.account_emailnotverified #index-slick > .container,
.body.account_registerconfirmation #index-slick > .container {
    background-image: url(../img/headers/register.png) !important;
}

.body.account_resetpasswordconfirmation #index-slick > .container,
.body.account_forgotpasswordconfirmation #index-slick > .container,
[class^="body Account_ResetPassword"] #index-slick > .container,
.body.account_forgotpassword #index-slick > .container {
    background-image: url(../img/headers/reset.png) !important;
}

.index-slick-part {
    background-image: url(../img/headers/home.png) !important;
}


/*=============================================
=                Design change                =
=============================================*/

/* Home/Products icons + buttons */

.home-icon {
    background: var(--primary-light-color) !important;
}

    .home-icon i {
        color: var(--primary-color) !important;
        font-size: 35px !important;
    }

.flex-item .home-icon + h4 {
    color: var(--primary-dark) !important;
}

/* Products buttons */
.flex-item a {
    color: white !important;
    background: var(--secondary-color) !important;
}

    .flex-item a:hover {
        background: var(--secondary-hover-color) !important;
    }

/* Buttons + forms */

form[method="post"] input.btn,
form[method="post"] button.btn,
form#tpp-certificate-details-form input.btn,
form#tpp-certificate-details-form button.btn,
.btn-primary,
.btn-secondary {
    background-color: var(--secondary-color) !important;
    font-weight: 400 !important;
    font-size: 0.85rem;
}

    form[method="post"] input.btn:hover,
    form[method="post"] button.btn:hover,
    form#tpp-certificate-details-form input.btn:hover,
    form#tpp-certificate-details-form button.btn:hover,
    .btn-primary:hover,
    .btn-secondary:hover {
        background-color: var(--secondary-hover-color) !important;
    }

form[method="post"] .form-row .form-group p a,
form#tpp-certificate-details-form .form-row .form-group p a {
    color: var(--secondary-color);
}

#back-to-top {
    display: none !important;
    background-color: var(--primary-color) !important;
}


/* Table */
.custom-table-wrapper table thead th {
    background-color: var(--primary-light-color) !important;
}

/* Sidebar */

.sidebar > h4 + ul li > a.active,
.sidebar ul li > a.active {
    color: var(--primary-color) !important;
}

/* Manage User */

.body.tpp_tppapplications .col-md-12.pl-0 .row.mt-lg-5 .col-lg-3.mb-4:last-of-type .thumb-info,
.body.tpp_tppusers .col-md-12.pl-0 .row.mt-lg-5 .col-lg-3.mb-4:last-of-type .thumb-info, .thumb-info-action:hover {
    background: var(--primary-color) !important;
}

    .body.tpp_tppapplications .col-md-12.pl-0 .row.mt-lg-5 .col-lg-3.mb-4:last-of-type .thumb-info:hover,
    .body.tpp_tppusers .col-md-12.pl-0 .row.mt-lg-5 .col-lg-3.mb-4:last-of-type .thumb-info:hover, .thumb-info-action {
        background: var(--primary-hover-color) !important;
    }

.details-action {
    background: var(--secondary-white) !important;
}

    .details-action:hover {
        color: var(--secondary-white) !important;
        background: var(--primary-color) !important;
    }

    .body.tpp_tppapplications .col-md-12.pl-0 .row.mt-lg-5 .col-lg-3.mb-4:last-of-type .thumb-info:before,
    .body.tpp_tppusers .col-md-12.pl-0 .row.mt-lg-5 .col-lg-3.mb-4:last-of-type .thumb-info:before {
        background: var(--primary-hover-color);
        color: var(--secondary-white) !important;
    }

    .body.tpp_tppapplications .col-md-12.pl-0 .row.mt-lg-5 .col-lg-3.mb-4:last-of-type .thumb-info:hover:before,
    .body.tpp_tppusers .col-md-12.pl-0 .row.mt-lg-5 .col-lg-3.mb-4:last-of-type .thumb-info:hover:before {
        background: var(--primary-color);
        color: var(--secondary-white) !important;
    }


.body.tpp_tppapplications .col-md-12.pl-0 .row.mt-lg-5 .col-lg-3.mb-4 .thumb-info::before,
.body.tpp_tppusers .col-md-12.pl-0 .row.mt-lg-5 .col-lg-3.mb-4 .thumb-info::before,
.body.tpp_tppsandboxusers .col-md-12.pl-0 .row.mt-lg-5 .col-lg-3.mb-4 .thumb-info::before {
    background: var(--primary-color);
    color: var(--secondary-white) !important;
    border: 1px solid var(--primary-color) !important;
}


.thumb-info-action:hover {
    color: white !important;
    background: var(--primary-color) !important;
}

    .thumb-info-action:hover .thumb-info-action-icon:before {
        color: var(--secondary-white) !important;
    }

.btn-secondary {
    background-color: var(--primary-color) !important;
}

    .btn-secondary:hover {
        background-color: var(--primary-hover-color) !important;
    }

    .btn-secondary + .btn-primary {
        background: var(--secondary-color) !important;
    }

        .btn-secondary + .btn-primary:hover {
            background: var(--secondary-hover-color) !important;
        }

.k-widget .k-button.k-upload-selected {
    background-color: var(--primary-color) !important;
    color: var(--secondary-white) !important;
}

    .k-widget .k-button.k-upload-selected:hover {
        background-color: var(--primary-hover-color) !important;
    }

/* Question icon on forms */

.fa-question-circle:before {
    padding: 4px;
    color: #d55400;
}

/*=============================================
=          Navigation styles Resets           =
=============================================*/
@media (min-width:992px) {
    .profile-menu-ul li:nth-child(2) a,
    .profile-menu-ul .btn.btn-link.btn-logout {
        background: var(--secondary-color) !important;
        color: var(--secondary-white) !important;
    }

        .profile-menu-ul li:nth-child(2) a:hover,
        .profile-menu-ul .btn.btn-link.btn-logout:hover {
            background: var(--secondary-hover-color) !important;
            color: var(--secondary-white) !important;
        }
}

.languages {
    background: var(--primary-color) !important;
    background: -moz-linear-gradient(left, var(--secondary-white) 0%, var(--primary-color) 100%) !important;
    background: -webkit-linear-gradient(left, var(--secondary-white) 0%, var(--primary-color) 100%) !important;
    background: linear-gradient(to right, var(--secondary-white) 0%, var(--primary-color) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--secondary-white)', endColorstr='var(--primary-color)',GradientType=1 ) !important;
}

@media (min-width:992px) {

    .profile-menu-ul li:nth-child(3) a, .profile-menu-ul li:nth-child(3) a.active {
        color: var(--primary-dark) !important;
        background: var(--secondary-white) !important;
        border: 1px solid var(--primary-light) !important;
    }

    .profile-menu-ul li:nth-child(1) a,
    .profile-menu-ul li:nth-child(1) a.active {
        color: var(--primary-dark) !important;
        background: var(--secondary-white) !important;
        border: 1px solid var(--primary-light) !important;
    }

    .header ul li:nth-child(1) a:hover {
        background: var(--primary-light-color) !important;
    }

    .profile-menu-ul li:nth-child(1) a.active:hover {
        color: var(--primary-dark) !important;
        background: var(--primary-light-color) !important;
    }

    .header ul li a.active, .header ul li a.active:hover,
    #footer .header ul li a.active,
    #footer .header ul li a.active:hover {
        color: var(--secondary-white) !important;
        background: var(--primary-color) !important;
    }

}
/* Dashboard buttons and text */

.tab-wrap .tab:checked + label {
    background: var(--secondary-color) !important;
}

.tab + label:hover {
    color: var(--secondary-white);
    background: var(--secondary-hover-color) !important;
}

.tab__content .chartinfo b {
    color: var(--primary-color);
}

/*=============================================
=                  Don't touch               =
=============================================*/

@media (max-width:991px) {
    div.menu-content {
        width: 100% !important;
    }

    .menu-content {
        top: 96px !important;
        padding: 20px !important;
    }

    .hutltu {
        padding: 0px 40px !important;
    }
}