/* base styles
================================================== */
* {
    margin: 0;
    padding: 0;
    outline: 0;
}

body,
html {
    height: 100%;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #6b6b6b;
    margin: 0;
    background: #F8FCFF;

}



:focus {
    outline: 0
}

img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    border: none;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset;

}

h3.profile-tittle {
    font-weight: 900;
    font-size: 29px;
    margin-bottom: 25px;
    color: #163746;
    line-height: 35px;

}


@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro-Bold.eot');
    src: url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/SourceSansPro-Bold.woff2') format('woff2'),
    url('../fonts/SourceSansPro-Bold.woff') format('woff'),
    url('../fonts/SourceSansPro-Bold.ttf') format('truetype'),
    url('../fonts/SourceSansPro-Bold.svg#SourceSansPro-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro-SemiBold.eot');
    src: url('../fonts/SourceSansPro-SemiBold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/SourceSansPro-SemiBold.woff2') format('woff2'),
    url('../fonts/SourceSansPro-SemiBold.woff') format('woff'),
    url('../fonts/SourceSansPro-SemiBold.ttf') format('truetype'),
    url('../fonts/SourceSansPro-SemiBold.svg#SourceSansPro-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro-Regular.eot');
    src: url('../fonts/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/SourceSansPro-Regular.woff2') format('woff2'),
    url('../fonts/SourceSansPro-Regular.woff') format('woff'),
    url('../fonts/SourceSansPro-Regular.ttf') format('truetype'),
    url('../fonts/SourceSansPro-Regular.svg#SourceSansPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


.space {
    padding: 100px 0;
}

/* typography
================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Source Sans Pro', sans-serif;
    color: #222;
}

h1 {
    font-size: 26px;
    line-height: 32px;
}

h2 {
    font-size: 22px;
    line-height: 28px;
}

h3 {
    font-size: 18px;
    line-height: 28px;
}

h4 {
    font-size: 18px;
    line-height: 28px;
}

h5 {
    font-size: 18px;
    line-height: 28px;
}

h6 {
    font-size: 18px;
    line-height: 28px;
}

strong {
    font-weight: 700;
}

a {
    color: white;
    font-family: 'Source Sans Pro', sans-serif;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}

a:hover,
a:active,
a:focus {
    color: white;
    outline: 0;
    text-decoration: none;
}

p {
    color: #6b6b6b;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.5;
}

.heading {
    margin: 0 0 100px 0;
    font-size: 32px;
    line-height: 38px;
    color: #0c3135;
    font-family: 'Ubuntu', sans-serif;
    text-transform: uppercase;
}

button.save {
    background: #FF8900;
    vertical-align: text-bottom;
    border-radius: 20px;
    padding: 10px 55px;
    outline: none;
    font-size: 15px;
    letter-spacing: 0.3px;
    color: white;
    border: none;
}

button.save:hover {
    background: #FFAA00;
}

.right-side {
    margin-left: 240px;
    margin-top: 45px;
}

span.act {
    text-transform: uppercase;
    color: white;
    background: #0DCA65;
    padding: 3px 16px;
    font-size: 11px;
    border-radius: 6px;
}


/*header*/

header {
    border-bottom: 1px solid lightblue;

}


header .navbar-header {
    display: flex;
    justify-content: space-between;
    background: #F8FCFF;
    padding: 0 0 1px 0;

}
header .navbar-header .amount-and-logo {
    padding: 13px 0 12px 0;
}

header .navbar-header .amount-and-logo,
header .navbar-header .notifications {
    display: flex;
    align-items: center;
    position: relative;
}


header .amount-and-logo ul {
    margin-left: 260px;
}

header.clicked .amount-and-logo ul {
    margin-left: 45px;
}

header .amount-and-logo ul li,
header .navbar-header .notifications ul li {
    display: inline-block;
    padding: 0 15px;

}
header .navbar-header .notifications ul li a img {
    width: 18px;
}

/*header .navbar-header .notifications ul li.bell a:afte*/

header .amount-and-logo ul li.availability {
    color: #25C7CE;
}

header .amount-and-logo ul li img {
    width: 13px;
    vertical-align: baseline;
    margin-right: 2px;
}

header .amount-and-logo ul li.limit {
    color: #818188;
}

header .amount-and-logo ul li.due {
    color: #EF5050;
}

header .amount-and-logo ul li.pay {
    /*background: #FF8900;*/
    vertical-align: text-bottom;
    /*border-radius: 20px;*/
    /*padding: 7px 30px;*/
    /*margin-left: 10px;*/
    padding: 0;
    margin-bottom: 2px;
}



header .amount-and-logo ul li.pay a {
    font-size: 15px;
    letter-spacing: 0.3px;
    background: #FF8900;
    vertical-align: super;
    border-radius: 20px;
    padding: 10px 30px;
    margin-left: 10px;
}

header .amount-and-logo ul li.pay a:hover {
    background: #FFAA00;
}

header .amount-and-logo ul li span {
    display: block;
    color: #163746;
    font-weight: 600;
    font-size: 16px;
    line-height: 15px;

}

header .amount-and-logo ul li {
    font-size: 13px;
    font-weight: 600;
    padding: 0 20px;
}


header .navbar-header .notifications ul li a {
    color: #515151;
    position: relative;
    z-index: 1000;
}

header .navbar-header .notifications ul li.bell a span {
    background: #EF871F;
    padding: 0px 6px 0px 6px;
    border-radius: 100%;
    color: white;
    font-size: 11px;
    position: absolute;
    right: 0;
    margin-right: -10px;
    top: 0;
    margin-top: -5px;
}

header .navbar-header .notifications ul li.dropdown {
    position: relative;
    padding-left: 43px;
    padding-right: 30px;

}

header .navbar-header .notifications:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 32%;
    background: white;
    border-left: 1px solid #E8ECF2;
}

header .navbar-header .notifications ul li.dropdown a img.status-image {
    width: 24px;
    margin-right: 3px;
}

header .navbar-header .notifications ul li.dropdown a img.arrow-image {
    width: 11px;
}

header .navbar-header .notifications ul li.dropdown ul li {
    display: block;
    padding: 0;
    /*border-bottom: 1px solid lightgray;*/
    /*background: #5151;*/
}

header .navbar-header .notifications ul li.dropdown ul li a {
    padding: 8px 10px 8px 10px;
    width: 100%;
    display: block;
    padding: 8px 10px 8px 10px;
    border-bottom: 1px solid lightgray;
}

header .navbar-header .notifications ul li.dropdown ul li a:hover {
    /*background: #163746;*/
    color: #FFAA00;
}

header .navbar-header .notifications ul li.dropdown ul.hide-menu {
    position: absolute;
    right: 0;
    width: 100%;
    top: 107%;
    background: white;
    padding-bottom: 0px;
    margin-top: 20px;
    display: none;
    z-index: 1000;
    border: 1px solid #DCE3EC;
    border-top: none;
}


header .navbar-header .notifications ul li.dropdown ul.hide-menu.show {
    display: block;
}


header.clicked .navbar-header .header-menu-logo,
header.mobile .navbar-header .header-menu-logo {
    width: auto;
    margin-bottom: -1px;
}

header.clicked .navbar-header .header-menu-logo a {
    display: none;
}

header .navbar-header .header-menu-logo a.logo {
    font-family: "Ubuntu";
    font-size: 28px;
    line-height: 23px;
}

header .navbar-header .header-menu-logo a.logo span {
    display: block;
    font-size: 10.5px;
    line-height: 10px;
    position: relative;
    margin: 8px 0 0 0;
    font-family: "Ubuntu";
}

.vertical-menu.clicked {
    display: none;
}

.my-profile.clicked {
    margin: 0;
}

.my-profile.clicked .cont {
    display: none;
}

.my-profile.clicked .form-container {
    margin-left: 0;
}

.my-profile.clicked .right-side,
.my-profile.clicked .page-buttons,
.main-content.home-page.clicked {
    margin-left: 0;
}



header.mobile .navbar-header .header-menu-logo {
    width: auto;
    position: absolute;
}

header.mobile .navbar-header .header-menu-logo a {
    display: none;
}

.vertical-menu.mobile{
    display: none;
    position: absolute;
}

.my-profile.mobile {
    margin: 0;
}

.my-profile.mobile .cont {
    display: none;
}

.my-profile.mobile .form-container {
    margin-left: 0;
}

.my-profile.mobile .right-side,
.my-profile.mobile .page-buttons,
.my-profile.mobile.messages .message-cont,
.main-content.mobile {
    margin-left: 0;
}



header.mobile-click .navbar-header .header-menu-logo {
    width: 250px;
    z-index: 100;
    position: fixed;
}

header.mobile-click .navbar-header .header-menu-logo a {
    display: block;
}

header.mobile-click .navbar-header .notifications li.icon {
    display: none;
}

.vertical-menu.mobile-click {
    display: block;
    position: fixed;
}

.my-profile.mobile-click {
    /*margin: 0 0 0 20px;*/
}

.my-profile.mobile-click .cont {
    display: block;
    margin-left: 250px;
}

/*.my-profile.mobile-click .right-side,*/
/*.my-profile.mobile-click .page-buttons {*/
/*    opacity: 0.6;*/
/*}*/

.my-profile.mobile-click .form-container {
    margin-left: 0;
}

.my-profile.mobile-click .right-side,
.my-profile.mobile-click .page-buttons {
}

header.clicked .navbar-header .header-menu-logo {
    position: absolute;
}

header.hidden .navbar-header .header-menu-logo {
    width: auto;
}

header.hidden .navbar-header .header-menu-logo a {
    display: none;
}

.vertical-menu.hidden{
    display: none;
}

.vertical-menu::-webkit-scrollbar {
    display: none;
}

.my-profile.hidden {
    margin: 0;
}

.my-profile.hidden .cont {
    display: none;
}

.my-profile.hidden .form-container {
    margin-left: 0;
}

.my-profile.hidden .right-side,
.my-profile.hidden .page-buttons {
    margin-left: 0;
}

.my-profile.hidden .right-side,
.my-profile.hidden .page-buttons {
    opacity: 1;
}


/*header .navbar-header .header-menu-logo button {*/
/*    transform: none;*/
/*}*/

header.clicked .navbar-header .header-menu-logo button img {
    transform: rotate(180deg);
}


header.mobile .navbar-header .header-menu-logo button img {
    transform: rotate(180deg);
}

header.mobile-click .navbar-header .header-menu-logo button img {
    transform: none;
}


.my-profile .profile-menu .menu-info img.mobile-arrow.up {
    transform: rotate(180deg);
}






    /*vertical-menu*/


.vertical-menu {
    background: #163746;
    width: 250px;
    z-index: 1001;
    /* bottom: 0; */
    padding: 0 12px 40px 12px;
    margin-top: -1px;
    /*height: 811px;*/

    position: fixed;

    height: 100%;
    overflow-y: scroll;
}

.navbar-header .header-menu-logo {
    display: flex;
    justify-content: space-between;
    width: 250px;
    padding: 0px 15px 0px 15px;
    align-items: center;
    background: #163746;
    height: 64px;
    margin-bottom: -1px;
    position: fixed;
    top: 0;

}



.navbar-header .header-menu-logo a img.logo {
    width: 150px;
    position: relative;
    top: 3px;

}

.navbar-header .header-menu-logo button {
    border: none;
    background: transparent;
    width: 14px;
    outline: none;
}

.navbar-header .header-menu-logo button img {
    vertical-align: inherit;
}

.vertical-menu .body-menu ul li {
    /*padding: 12px 35px;*/
    /*border-radius: 20px;*/
}

.vertical-menu .body-menu ul.profile-links {
    border-bottom: 1px solid #C6C8DB;
    padding-bottom: 15px;
    padding-top: 30px;
}

.vertical-menu .body-menu ul.comment-and-help {
    padding: 17px 0 13px 0;
    border-bottom: 1px solid #C6C8DB;
}

.vertical-menu .body-menu ul.comment-and-help li span {
    float: right;
    background: #EF871F;
    color: white;
    padding: 0px 10px 0px 10px;
    border-radius: 20px;
    margin-top: 13px;
}


.vertical-menu .body-menu ul li.active a {
    background: white;
    color: #515151;
}

.vertical-menu .body-menu ul li.active a:hover {
    color: #515151;
}


.vertical-menu .body-menu ul li a {
    font-size: 16px;
    padding: 9px 11px 9px 50px;
    border-radius: 20px;
    display: block;
    margin: 8px 0;
    position: relative;
}

.vertical-menu .body-menu ul li a img {
    width: 18px;
    /* vertical-align: unset; */
    position: absolute;
    left: 0;
    margin-left: 19px;
    margin-top: 3px;
}

.vertical-menu .body-menu ul li.profile a img.red-user {
    display: none;
}

.vertical-menu .body-menu ul li.profile:hover a img.white-user {
    display: none;

}

.vertical-menu .body-menu ul li.profile:hover a img.red-user {
    display: block;

}


.vertical-menu .body-menu ul li.cards a img.red-c {
    display: none;
    margin-top: 5px;

}

.vertical-menu .body-menu ul li.cards:hover a img.white-c {
    display: none;

}

.vertical-menu .body-menu ul li.cards:hover a img.red-c {
    display: block;


}


.vertical-menu .body-menu ul li.win-with-card a img.red-money {
    display: none;

}

.vertical-menu .body-menu ul li.win-with-card:hover a img.white-money {
    display: none;

}

.vertical-menu .body-menu ul li.win-with-card:hover a img.red-money {
    display: block;

}


.vertical-menu .body-menu ul li.info a img.red-info {
    display: none;

}

.vertical-menu .body-menu ul li.info:hover a img.white-info {
    display: none;

}

.vertical-menu .body-menu ul li.info:hover a img.red-info {
    display: block;

}







.vertical-menu .body-menu ul li.bell a img.red-bell {
    display: none;

}

.vertical-menu .body-menu ul li.bell:hover a img.white-bell {
    display: none;

}

.vertical-menu .body-menu ul li.bell:hover a img.red-bell {
    display: block;

}


.vertical-menu .body-menu ul li.messages a img.red-email {
    display: none;
    margin-top: 5px;

}
.vertical-menu .body-menu ul li.messages a img.white-email {
    margin-top: 5px;
}

.vertical-menu .body-menu ul li.messages:hover a img.white-email {
    display: none;

}

.vertical-menu .body-menu ul li.messages:hover a img.red-email {
    display: block;

}



.vertical-menu .body-menu ul li.chat a img.red-chat {
    display: none;

}

.vertical-menu .body-menu ul li.chat:hover a img.white-chat {
    display: none;

}

.vertical-menu .body-menu ul li.chat:hover a img.red-chat {
    display: block;

}


.vertical-menu .body-menu ul li.lifesaver a img.red-lifesaver {
    display: none;

}

.vertical-menu .body-menu ul li.lifesaver:hover a img.white-lifesaver {
    display: none;

}

.vertical-menu .body-menu ul li.lifesaver:hover a img.red-lifesaver {
    display: block;

}


.vertical-menu ul.os {
    text-align: center;
    padding: 5px 0 18px 0;
}

.vertical-menu ul.os li {
    display: inline-block;
    margin-bottom: 0;
}

.vertical-menu ul.os li a {
    padding: 0px 20px;
}

.vertical-menu ul.os li a img {
    margin: 0;
}


.vertical-menu .footer-menu .bottom-menu ul li.settings a img.red-settings {
    display: none;

}

.vertical-menu .footer-menu .bottom-menu ul li.settings a:hover img.white-settings {
    display: none;

}

.vertical-menu .footer-menu .bottom-menu ul li.settings a:hover img.red-settings {
    display: inline-block;

}


.vertical-menu .footer-menu .bottom-menu ul li.view a img.red-view {
    display: none;

}

.vertical-menu .footer-menu .bottom-menu ul li.view a:hover img.white-view {
    display: none;

}

.vertical-menu .footer-menu .bottom-menu ul li.view a:hover img.red-view {
    display: inline-block;

}



.vertical-menu .footer-menu .bottom-menu ul li.logout a img.red-logout {
    display: none;

}

.vertical-menu .footer-menu .bottom-menu ul li.logout a:hover img.white-logout {
    display: none;

}

.vertical-menu .footer-menu .bottom-menu ul li.logout a:hover img.red-logout {
    display: inline-block;

}





.vertical-menu .body-menu ul li a img.red-promo {
    display: none;
}

.vertical-menu .body-menu ul li a img.white-promo.hide {
    display: none;

}

.vertical-menu .body-menu ul li a img.red-promo.show {
    display: inline-block;
}

.vertical-menu .body-menu ul li a img.white-c,
.vertical-menu .body-menu ul li a img.message {
    margin-top: 5px;
}

.vertical-menu .body-menu ul li a:hover {
    color: #FAA480;
}

.vertical-menu .footer-menu {
    margin-top: 14px;
}

.vertical-menu .footer-menu .profile-name-and-logo {
    display: flex;
    background: #132F3C;
    border-radius: 54px;
    align-items: center;
    padding: 15px 10px 11px 10px;
    border: 1px solid;
}

.vertical-menu .footer-menu .profile-name-and-logo a.status {
    position: relative;
}

.vertical-menu .footer-menu .profile-name-and-logo a.status img {
    width: 31px;
    position: relative;
    bottom: 2px;

}

.vertical-menu .footer-menu .profile-name-and-logo a.status:before {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    right: 0;
    bottom: 0;
    background: #09CB89;
    border: 1px solid #163746;
    border-radius: 100px;
    z-index: 3;
    margin-right: -3px;
    margin-bottom: 2px;
}

.vertical-menu .footer-menu .profile-name-and-logo .name-and-email {
    margin: 0 19px 0 11px;
}
.vertical-menu .footer-menu .profile-name-and-logo .profile-link a img {
    width: 16px;
}

.vertical-menu .footer-menu .profile-name-and-logo .name-and-email h5 {
    color: white;
    font-size: 15px;
    font-weight: 700;
    line-height: 13px;
    letter-spacing: 0.5px;
}

.vertical-menu .footer-menu .profile-name-and-logo .name-and-email span {
    color: white;
    opacity: 0.7;
    font-size: 12px;
}

.vertical-menu .footer-menu .bottom-menu {
    margin-top: 25px;
}

.vertical-menu .footer-menu .bottom-menu ul {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
}

.vertical-menu .footer-menu .bottom-menu ul li {

}

.vertical-menu .footer-menu .bottom-menu ul li a {

}

.vertical-menu .footer-menu .bottom-menu ul li a img {
    width: 18px;
}


/*main-content*/


.main-content {
    margin-left: 250px;
    background: #F8FCFF;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 65px);
}

.main-content.home-page {
    padding: 30px 10px 0 10px;
}

.main-content .component-content {
    text-align: center;
    background: white;
    margin-bottom: 40px;
    padding: 30px 10px 27px 10px;
    border-radius: 23px;
    /*box-shadow: 0px 3px 5px 2px rgb(128 127 128 / 13%);*/
    box-shadow: 1px 6px 6px 0px rgba(128,127,128,.07);
    position: relative;
}

.main-content .component-content .img {
    position: relative;
    z-index: 10;

}


.main-content .component-content img.bg-path {
    display: none;
    position: absolute;
    top: 0;
    z-index: 2;
    left: 50%;
    margin-left: -75px;
    margin-top: -48px;
    width: 150px;
    height: auto;
}

.main-content .component-content.my-card img.orange-card {
    display: none;
    margin: 0 auto 10px auto;
}

.main-content .component-content.my-card:hover {
        /*box-shadow: 1px 6px 6px 0px rgb(229 135 96 / 19%);*/
    box-shadow: 1px 6px 6px 0px rgba(229,135,69,.19);
}

.main-content .component-content.my-card:hover h5 {
    color: #E58760;
}

.main-content .component-content.my-card:hover img.gray {
    display: none;

}

.main-content .component-content.my-card:hover img.orange-card {
    display: block;

}






.main-content .component-content.win-with-card img.green-money {
    display: none;
    margin: 0 auto 10px auto;
}

.main-content .component-content.win-with-card:hover {
    box-shadow: 1px 6px 6px 0px rgba(151, 194, 3,.19);
}

.main-content .component-content.win-with-card:hover h5 {
    color: #97C203;
}

.main-content .component-content.win-with-card:hover img.gray-money {
    display: none;

}

.main-content .component-content.win-with-card:hover img.green-money {
    display: block;

}



.main-content .component-content.pay img.blue-pay {
    display: none;
    margin: 0 auto 10px auto;
}

.main-content .component-content.pay:hover {
    box-shadow: 1px 6px 6px 0px rgba(37, 199, 206,.19);
}

.main-content .component-content.pay:hover h5 {
    color: #25C7CE;
}

.main-content .component-content.pay:hover img.gray-pay {
    display: none;

}

.main-content .component-content.pay:hover img.blue-pay {
    display: block;

}



.main-content .component-content.box img.pink-dict {
    display: none;
    margin: 0 auto 10px auto;
}

.main-content .component-content.box:hover {
    box-shadow: 1px 6px 6px 0px rgba(239, 101, 152,.19);
}

.main-content .component-content.box:hover h5 {
    color: #EF6598;
}

.main-content .component-content.box:hover img.gray-dict {
    display: none;

}

.main-content .component-content.box:hover img.pink-dict {
    display: block;

}


.main-content .component-content.promo-block img.violet-prom {
    display: none;
    margin: 0 auto 10px auto;
}

.main-content .component-content.promo-block:hover {
    box-shadow: 1px 6px 6px 0px rgba(185, 0, 239,.19);
}


.main-content .component-content.promo-block:hover h5 {
    color: #B900EF;
}

.main-content .component-content.promo-block:hover img.gray-prom {
    display: none;

}

.main-content .component-content.promo-block:hover img.violet-prom {
    display: block;

}



.main-content .component-content.surf img.blue-surf {
    display: none;
    margin: 0 auto 10px auto;
}

.main-content .component-content.surf:hover {
    box-shadow: 1px 6px 6px 0px rgba(37, 155, 233,.19);
}

.main-content .component-content.surf:hover h5 {
    color: #259BE9;
}

.main-content .component-content.surf:hover img.gray-surf {
    display: none;

}

.main-content .component-content.surf:hover img.blue-surf {
    display: block;

}



.main-content .component-content.help img.green-help {
    display: none;
    margin: 0 auto 10px auto;
}

.main-content .component-content.help:hover {
    box-shadow: 1px 6px 6px 0px rgba(151, 194, 3,.19);
}

.main-content .component-content.help:hover h5 {
    color: #97C203;
}

.main-content .component-content.help:hover img.gray-help {
    display: none;

}

.main-content .component-content.help:hover img.green-help {
    display: block;

}



.main-content .component-content.email img.red-email {
    display: none;
    margin: 0 auto 10px auto;
}

.main-content .component-content.email:hover {
    box-shadow: 1px 6px 6px 0px rgba(255, 52, 52,.19);
}


.main-content .component-content.email:hover h5 {
    color: #FF3434;
}

.main-content .component-content.email:hover img.gray-email {
    display: none;

}

.main-content .component-content.email:hover img.red-email {
    display: block;

}




.main-content .component-content:hover img.bg-path {
    display: block;

}


.main-content .component-content img {
    margin-bottom: 10px;
    margin-bottom: 10px;
    width: 49px;
    height: 47px;
}

.main-content .component-content h5 {
    color: #0E0D2E;
    font-weight: 700;
    font-size: 19px;
    margin-bottom: 3px;

}

.main-content .component-content span {
    color: #818188;
}


/*footer*/


footer {
    /*background: #F8FCFF;*/
    margin-top: auto;
    padding-top: 40px;
}

footer .copyright {
    text-align: right;
    color: #AAA3A3;
    font-size: 13px;
    padding-bottom: 11px;
}

footer .log {
    color: #FFFFFF;
}


/*personal-information page*/


.my-profile {
    padding-top: 0;
    position: relative;
}

.my-profile .profile-menu {
    background: white;
    border-right: 1px solid #DCE3EC;;
    border-bottom: 1px solid #DCE3EC;;
    padding: 45px 0px 50px 0px;
    width: 228px;
    /*height: 809px;*/
    height: 100%;

}

.my-profile .profile-menu h5 {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    color: #163746;
}

.my-profile .cont {
    position: absolute;
    z-index: 2;
    top: 0;
    height: 100%;
}

.my-profile .profile-menu nav {

}

.my-profile .profile-menu nav ul li {
    padding: 10px 0 10px 20px;
    position: relative;
}

.my-profile .profile-menu nav ul li a {
    color: #747687;
    display: block;
}

.my-profile .profile-menu nav ul li a img {
    width: 15px;
    margin-right: 6px;
    position: relative;
    vertical-align: top;
    top: 1px;
}

.my-profile .profile-menu nav ul li a img.message {
    top: 5px;
}

.my-profile .profile-menu nav ul li a img.disablee {
    vertical-align: text-top;
}

.my-profile .profile-menu nav ul li.active {
    background: #F1F5F8;
}

.my-profile .profile-menu nav ul li.active:after {
    content: "";
    position: absolute;
    right: 0;
    height: 100%;
    width: 3px;
    background: #FAA480;
    top: 0;
}


.my-profile .profile-menu nav ul li a img.orange-user {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.gray-user {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.orange-user {
    display: inline-block;
}



.my-profile .profile-menu nav ul li a img.orange-email {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.gray-email {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.orange-email {
    display: inline-block;
}





.my-profile .profile-menu nav ul li a img.orange-bell {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.gray-bell {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.orange-bell {
    display: inline-block;
}




.my-profile .profile-menu nav ul li a img.orange-rate {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.gray-rate {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.orange-rate {
    display: inline-block;
}



.my-profile .profile-menu nav ul li a img.orange-lock {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.gray-lock {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.orange-lock {
    display: inline-block;
}



.my-profile .profile-menu nav ul li a img.orange-disable {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.gray-disable {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.orange-disable {
    display: inline-block;
}



.my-profile .profile-menu nav ul li a img.orange-info {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.gray-info {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.orange-info {
    display: inline-block;
}


.my-profile .profile-menu nav ul li a img.orange-card {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.gray-card {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.orange-card {
    display: inline-block;
}



.my-profile .profile-menu nav ul li a img.orange-wallet {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.gray-wallet {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.orange-wallet {
    display: inline-block;
}



.my-profile .profile-menu nav ul li a img.orange-transaction {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.gray-transaction {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.orange-transaction {
    display: inline-block;
}



.my-profile .profile-menu nav ul li a img.orange-arrow-symbol {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.gray-arrow-symbol {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.orange-arrow-symbol {
    display: inline-block;
}



.my-profile .profile-menu nav ul li a img.orange-money {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.gray-money {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.orange-money {
    display: inline-block;
}



.my-profile .profile-menu nav ul li a img.orange-list {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.gray-list {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.orange-list {
    display: inline-block;
}


.my-profile .profile-menu nav ul li a img.orange-doc {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.gray-doc {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.orange-doc {
    display: inline-block;
}




.my-profile .profile-menu nav ul li a img.orange-terms {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.gray-terms {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.orange-terms {
    display: inline-block;
}



.my-profile .profile-menu nav ul li a img.orange-promo {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.gray-promo {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.orange-promo {
    display: inline-block;
}


.my-profile .profile-menu nav ul li a img.orange-list2 {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.gray-list2 {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.orange-list2 {
    display: inline-block;
}




.my-profile .profile-menu nav ul li a img.terms-orange {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.terms-gray {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.terms-orange {
    display: inline-block;
}



.my-profile .profile-menu nav ul li a img.money-orange {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.money-gray {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.money-orange {
    display: inline-block;
}




.my-profile .profile-menu nav ul li a img.lock-orange {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.lock-gray {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.lock-orange {
    display: inline-block;
}



.my-profile .profile-menu nav ul li a img.documents-orange {
    display: none;

}

.my-profile .profile-menu nav ul li:hover a img.documents-gray {
    display: none;
}

.my-profile .profile-menu nav ul li:hover a img.documents-orange {
    display: inline-block;
}

.my-profile .profile-menu nav ul li.active:hover a img:nth-child(2) {
    display: none;
}



.my-profile .profile-menu nav ul li.active:hover a img {
    display: inline-block;
}

.my-profile .profile-menu nav ul li.active:hover a img.sec {
    display: none;
}

.my-profile .profile-menu nav ul li.active:hover {
    background: #F1F5F8;
}

.my-profile .profile-menu nav ul li.active:hover a {
    color: #163746;
}

.my-profile .profile-menu nav ul li.active a {
    color: #163746;
    opacity: 1;
}

.my-profile .profile-menu nav ul li:hover {
    background: #F7F9FB;
}

.my-profile .profile-menu nav ul li:hover a {
    color: #FFAA00;
}


.my-profile .form-container {
    margin-left: 240px;
    margin-top: 45px;
}

.my-profile .form-container h3 {
    font-weight: 900;
    font-size: 29px;
    margin-bottom: 18px;
    color: #163746;
}

.my-profile .form-container form .form-group {
    margin-bottom: 1.6rem;
    position: relative;

}

.my-profile .form-container form .form-group img.hint {
    max-width: 17px;
    max-height: 20px;
    position: absolute;
    top: 0;
    margin-top: 44px;
    left: 0;
    margin-left: 18px;
}

.my-profile .form-container form .form-group img.hint.phone {
    margin-top: 40px;
}

.my-profile .form-container form .form-group.phone,
.my-profile .form-container form .form-group.address {

}

.my-profile .form-container form .form-group label {
    display: block;
    font-weight: 600;
    color: #444444;
    font-size: 15px;
    margin-bottom: 5px;

}

.my-profile .form-container form .form-group .form-check {
    display: inline-block;
}

.my-profile .form-container form .form-control:disabled, .form-control[readonly] {
    background-color: #F1F5F8;
    line-height: 20px;
    border-radius: 20px;
    padding: 21px 16px;
    font-size: 14px;
    color: #747687;
    border: 1px solid #BBC1C5;
    -webkit-appearance: none;
    appearance: none;
}

.my-profile .form-container form .form-group.address textarea::placeholder {
    color: red;
}

.my-profile .form-container form .form-group input.plus-image {
    padding: 21px 16px 21px 40px;
}

.my-profile .form-container form .form-group input::placeholder {
    color: #747687;
}

.my-profile .form-container form .form-group .form-check input {
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: white;
    border: 0;
    box-shadow: inset 0 0 0 0.5px #BBC1C5;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    margin: 0;
    transition: box-shadow 150ms cubic-bezier(0.95, 0.15, 0.5, 1.25);
    pointer-events: none;
    left: 0;
}

.my-profile .form-container form .form-group .form-check input:focus {
    outline: none;
}

.my-profile .form-container form .form-group .form-check input:checked {
    box-shadow: inset 0 0 0 5px #FAA480;
}

.my-profile .form-container form .form-group label.gender {
    margin-bottom: 9px;
}

.my-profile .form-container form .form-group .form-check label {
    padding-left: 42px;
    position: relative;
    right: 36px;
}

.my-profile .form-container form .form-group .form-check label span {
    font-weight: normal;
    color: #747687;
}


/*persona-information-password*/


/*.my-profile.password {*/
/*    height: 537px;*/
/*    padding-bottom: 30px;*/

/*}*/



.my-profile.password .form-container form .form-group input {
    background-color: white;
    opacity: 1;
    border-radius: 20px;
    padding: 21px 16px 21px 37px;
    font-size: 14px;
    border: 1px solid #BBC1C5;
}

.my-profile.password .form-container form .form-group input::placeholder {
    color: #999AAB !important;
}

.my-profile.password .form-container form .form-group input::-webkit-input-placeholder{
    color: #999AAB !important;
}





.my-profile.password .form-container form .form-group img {
    position: absolute;
    top: 50%;
    left: 0;
    margin-left: 19px;
    width: 12px;
    margin-top: 3px;
}

.my-profile.password .form-container form .form-group img.replay {
    margin-top: 4px;
}

.my-profile.password .form-container form .form-group input::placeholder {
    color: lightseagreen;

}

.my-profile.password .form-container form button {
    background: #FF8900;
    vertical-align: text-bottom;
    border-radius: 20px;
    padding: 10px 55px;
    margin-left: 10px;
    font-size: 15px;
    letter-spacing: 0.3px;
    color: white;
}

.my-profile.password .form-container form button:hover {
    background: #FFAA00;
}


/*personal-information-messages*/


.messages .message-cont {
    margin-left: 240px;
    margin-top: 45px;
}

.messages.clicked .message-cont {
    margin-left: 0;
}

.messages .message-cont .message-question h3 {
    margin-bottom: 20px;
}

.messages .message-cont .message-question .quest {
    line-height: 31px;
}

.messages .message-cont .message-question .quest a {
    color: #404346;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0px;
    border: 1px solid #B4B4B4;
    border-radius: 20px;
    padding: 7px 53px;
}

.messages .message-cont .message-question .quest a:hover {
    border: 1px solid #FF8900;
    color: #FF8900;
}

.messages .message-cont .more-messages {
    margin-top: 23px;
    background: white;
    padding: 20px 30px 10px 30px;
    border-radius: 20px;
    box-shadow: 1px 6px 6px 0px rgba(128,127,128,.07);
}

.messages .message-cont .more-messages .person-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.messages .message-cont .more-messages .person-message .flex-cont {
    display: flex;
}

.messages .message-cont .more-messages .person-message .flex-cont .name-and-time span {
    color: #9A9A9E;
}

.messages .message-cont .more-messages .person-message .flex-cont img {
    margin-right: 9px;
    width: 35px;
    margin-left: -2px;
}

.messages .message-cont .more-messages .person-message .flex-cont h5 {
    color: #163746;
    font-weight: 600;
    font-size: 16px;
}

.messages .message-cont .more-messages .person-message a {
    color: #FAA480;
}

.messages .message-cont .more-messages .person-message a img {
    width: 5px;
    margin-left: 3px;
}

.messages .message-cont .more-messages p {
    margin-left: 41px;
    font-size: 14px;
    margin-top: 15px;
    color: #444444;
    line-height: 20px;

}


/*mesages.history*/


.messages.history .other-message {
    background: white;
    padding: 20px 25px 20px 25px;
    border-radius: 18px;
    box-shadow: 1px 6px 6px 0px rgba(128,127,128,.07);
}

.messages.history .other-message h4 {
    color: #444444;
    font-weight: 600;
    font-size: 30px;
    margin-bottom: 11px;
}

.messages.history .other-message p {
    color: #444444;
    font-size: 14px;
    margin-bottom: 30px;
}

.messages.history .other-message .form-group label {
    display: block;
    font-weight: 600;
    color: black;
    font-size: 15px;
    margin-bottom: 5px;
}

.messages.history .other-message .form-group textarea {
    border-radius: 12px;
    border: 1px solid #BBC1C5;
}


.messages.history .message-cont .more-messages {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-top: 35px;
    border-bottom: 1px solid #D3D7D9;
    border-radius: 0;
    padding-bottom: 25px;
}

.messages.history .message-cont .more-messages p {
    margin-bottom: 0;
}

.messages.history .message-cont .more-messages:last-child {
    border: none;
    padding-bottom: 13px;
    margin-top: 23px;
}


/*activity*/

.activity {
}

.activity .right-side .history-blog {
    box-shadow: 1px 6px 6px 0px rgba(128,127,128,.07);
}

.activity .right-side .history-blog .info-details h5 {
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: white;
    display: flex;
    align-items: center;
    height: 100%;
}

.activity .right-side .history-blog .info-details h5.description {
    margin-left: 8px;
}

.activity .right-side .history-blog .info-details {
    background: #747687;
    padding: 18px 10px;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
}

.activity .right-side .history-blog .info-details h5.browser {
    justify-content: center;
}

.activity .right-side .history-blog .web-info {
    background: #EFF6FB;
    padding: 11px 10px 10px 10px;
}

.activity .right-side .history-blog .web-info:nth-child(odd) {
    background: white;
}

.activity .right-side .history-blog .web-info:nth-child(2) {
    background: #F3FAFF;
}


.activity .right-side .history-blog .web-info img {
    display: flex;
    margin: 0;
    width: 25px;
    align-items: center;
    height: 100%;

}
.activity .right-side .history-blog .web-info img.browser {
    margin: 0 auto;
}


.activity .right-side .history-blog .web-info span {
    vertical-align: sub;
    font-size: 13px;
    color: #444444;
    display: flex;
    align-items: center;
    height: 100%;
}

.activity .right-side .history-blog .web-info span.description {
    font-size: 12px;
    line-height: 18px;
}

.activity .right-side .history-blog .web-info span.price {
    width: 59px;
}

.activity .page-buttons {
    margin-left: 240px;
}

.activity .page-buttons ul {
    margin-top: 25px;
    margin-bottom: 14px;
}

.activity .page-buttons ul li {
    display: inline-block;
    padding: 0 2px;
}

.activity .page-buttons ul li a img {
    width: 7px;
}

.activity .page-buttons ul li a img.white-left-arrow {
    display: none;
}


.activity .page-buttons ul li a img.orange-left-arrow.hide {
    display: none;

}

.activity .page-buttons ul li a img.white-left-arrow.show {
    display: inline-block;

}


.activity .page-buttons ul li a img.white-arrow-right {
    display: none;
}


.activity .page-buttons ul li a img.orange-arrow-right.hide {
    display: none;

}

.activity .page-buttons ul li a img.white-arrow-right.show {
    display: inline-block;

}




.activity .page-buttons ul li.active a {
    background: #FAA480;
    color: white;
}


.activity .page-buttons ul li a {
    color: #FAA480;
    display: block;
    background: white;
    border: 1px solid #FAA480;
    width: 35px;
    height: 35px;
    padding: 6px 4px 10px 13px;
}

.activity .page-buttons ul li a:hover {
    background: #FAA480;
    color: white;
}


/*notifications*/


.my-profile.notifications {
    height: auto;
}

.my-profile.notifications .web-info p {
    margin: 0;
    font-size: 14px;
    color: #444444;
    line-height: 20px;
}

.my-profile.notifications .right-side .history-blog .web-info {
    padding: 14px 10px 15px 17px;
}

.my-profile.notifications .web-info .time-data-and-img {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding-right: 20px;
}

.my-profile.notifications .web-info .time-data-and-img .time-data {

}

.my-profile.notifications .web-info .time-data-and-img .time-data span {
    display: block;
    color: #444444;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
}

.my-profile.notifications .web-info .time-data-and-img .img-data {

}

.my-profile.notifications .web-info .time-data-and-img .img-data img {
    width: 20px;
}


/*deactivation*/


.deactivation .deactivating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    box-shadow: 1px 6px 6px 0px rgba(128,127,128,.07);
    padding: 50px 50px 50px 50px;
    border-radius: 14px;
    margin-top: 26px;
    width: 650px;
}


.deactivation .deactivating span {
    color: #444444;
    font-size: 17px;
}


/*white-card-info*/

.white-card-info {

}

.white-card-info .right-side form {

}

.white-card-info .right-side form .form-group {
    margin-bottom: 1.6rem;
}

.white-card-info .right-side form .form-group label {
    display: block;
    font-weight: 600;
    color: #444444;
    font-size: 15px;
    margin-bottom: 5px;
}

.white-card-info .right-side form .form-control:disabled, .form-control[readonly] {
    background-color: #F1F5F8;
    opacity: 1;
    border-radius: 20px;
    padding: 21px 16px;
    font-size: 14px;
    color: lightseagreen;
    border: 1px solid #BBC1C5;
}

.white-card-info .right-side form .form-control::placeholder {
    color: #747687;
}

.my-profile.w-card .profile-menu nav ul li a img {
    vertical-align: middle;
    top: -2px;
}




/*white-card-management*/


.white-card-management {

}

.white-card-management .card-tools .card-condition {
    border: 1px solid #DCD8CA;
    border-radius: 14px;
    padding: 23px 21px 23px 21px;
    background: #FFFAF5;
}

.white-card-management .card-tools .card-condition .img-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.white-card-management .card-tools .card-condition .img-info .inf {
    display: flex;
    align-items: center;
    margin-right: 5px;
}

.white-card-management .card-tools .card-condition .img-info .inf img {
    width: 27px;
    margin-right: 10px;
}

.white-card-management .card-tools .card-condition .img-info .inf h5 {
    color: #163746;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
}

.white-card-management .card-tools .card-condition .btn-block {
    text-align: center;
    margin-top: 20px;
}


.white-card-management .more-tools {
    background: white;
    box-shadow: 1px 6px 6px 0px rgba(128,127,128,.07);
    padding: 20px 10px 20px 20px;
    border-radius: 13px;
    margin-bottom: 18px;
}

.white-card-management .more-tools p {
    margin: 0;
    color: #163746;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
}

.white-card-management .more-tools .check-block {
    text-align: center;
    width: 25px;
    height: 25px;
    border: 1px solid #0DCA65;
    border-radius: 4px;
}

.white-card-management .more-tools .check-block img {
    width: 13px;
}

.white-card-management .more-tools span {
    vertical-align: bottom;
}

.white-card-management .btn-change {
    margin-top: 29px;
}


/*white-card-balance*/


.card-balance {

}

.card-balance h3 {
    margin-bottom: 25px;
}

.card-balance .balance-obligation {

}

.card-balance .balance-obligation .balance-amount {
    box-shadow: 1px 6px 6px 0px rgba(128,127,128,.07);
    border-radius: 10px;
}

.card-balance .balance-obligation .balance-amount .balance-info {
    background: #EFF6FB;
    display: flex;
    padding: 4px 10px 4px 20px;
    align-items: center;
}

.card-balance .balance-obligation .balance-amount .balance-info:first-child {
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
}

.card-balance .balance-obligation .balance-amount .balance-info:last-child {
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
}

.card-balance .balance-obligation .balance-amount .balance-info:nth-child(odd) {
    background: white;
}

.card-balance .balance-obligation .balance-amount .balance-info h5 {
    color: #163746;
    font-weight: 600;
    font-size: 22px;
    padding: 10px 0;
}

.card-balance .balance-obligation .balance-amount .balance-info span {

}

.card-balance .balance-obligation .balance-amount .balance-info span.information {
    color: #444444;
    width: 206px;
    display: flex;
    height: 42px;
    align-items: center;
    line-height: 16px;
    font-size: 13px;
}

.card-balance .balance-obligation .balance-amount .balance-info span.amount {
    color: #444444;
    font-weight: 600;
    font-size: 14px;
    display: block;
    margin-left: 5em;
    text-align: left;
}

.card-balance .balance-obligation .balance-amount .balance-info.first span.amount {
    font-weight: bold;
    color: #EF5050;
    font-size: 15px;
}

.card-balance .balance-obligation .balance-amount .balance-info.sec span.amount {
    font-weight: bold;
    color: #EF5050;
    font-size: 15px;
}

.card-balance .balance-obligation .balance-amount .balance-info.third span.amount {
    font-weight: bold;
    color: #FF8900;
    font-size: 15px;
}

.card-balance .balance-obligation .balance-amount .balance-info .inf {
    padding: 5px 0;
}

.card-balance .balance-obligation .balance-amount .balance-info .inf .information {
    height: auto;
    line-height: 17px;
}


.card-balance .balance-obligation .balance-amount.current-liability {
    background: white;
    padding: 5px 20px 15px 20px;
}

.card-balance .balance-obligation .balance-amount.current-liability h5 {
    color: #163746;
    font-weight: 600;
    font-size: 22px;
    padding: 14px 0 14px 0;
}

.card-balance .balance-obligation .balance-amount.current-liability .balance-info {
    margin-bottom: 13px;
    border-radius: 8px;
}

.card-balance .balance-obligation .balance-amount.current-liability .balance-info.first {
    background: #FEEFE9;
}

.card-balance .balance-obligation .balance-amount.current-liability .balance-info.sec {
    background: #FFE0E0;
}

.card-balance .balance-obligation .balance-amount.current-liability .balance-info.third {
    background: #FFFAF5;
}

.card-balance .balance-obligation .balance-amount.current-liability .balance-info span.amount {
    margin-left: 1em;
    min-width: 69px;
}

.card-balance .balance-obligation .balance-amount.current-liability .balance-info span.information {
    width: 100%;
    min-height: 70px;
}


/*card-transaction*/

.card-transaction .select-time {
    margin-bottom: 13px;
}

.card-transaction .select-time form {

}

.card-transaction .select-time form .form-group {
    position: relative;
}

.card-transaction .select-time form .form-group label {
    display: block;
    color: #444444;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 5px;
}

.card-transaction .select-time form .form-group input.datepicker {
    background-color: white;
    opacity: 1;
    border-radius: 20px;
    font-size: 14px;
    padding: 10px 0px 10px 43px;
    color: #747687;
    border: 1px solid #BBC1C5;
    width: 167px;
    /*-webkit-appearance: none;*/
    /*-moz-appearance: none;*/
    /*appearance: none;*/
}


.card-transaction .select-time form .form-group select {
    background-color: white;
    opacity: 1;
    border-radius: 20px;
    font-size: 14px;
    padding: 10px 59px 10px 43px;
    color: #747687;
    border: 1px solid #BBC1C5;
    /*-webkit-appearance: none;*/
    /*-moz-appearance: none;*/
    /*appearance: none;*/
    /*appearance: none;*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    overflow: hidden;
}

select:disabled.simple-control::-ms-expand {
    display: none;
}

select::-ms-expand {
    display: none;
}

.card-transaction .select-time form .form-group img.calendar {
    position: absolute;
    top: 50%;
    margin-top: 4px;
    width: 17px;
    z-index: 2;
    margin-left: 17px;
    /*left: 25%;*/
}


.card-transaction .select-time form .form-group select option {

}

.card-transaction .select-time form .btn-search {
    display: flex;
    height: 100%;
    align-items: center;
    margin-top: 5px;
}

.card-transaction .select-time form .btn-search button {
    height: 43px;
}


.card-transaction .right-side .history-blog .web-info span {
    vertical-align: sub;
    font-size: 13px;
    display: flex;
    align-items: center;
    height: 100%;
    -webkit-text-fill-color: #444444
}

.activity .right-side .history-blog .web-info span.description span.number {
    font-size: 12px;
    padding: 0 4px;
    -webkit-text-fill-color: #444444;
}

.card-transaction .right-side .history-blog .web-info span img.pdf-logo {
    display: inline-block;
    width: 15px;
    margin: 0 8px 0 0;

}

.card-transaction .right-side .history-blog .web-info a img.download-img {
    display: inline-block;
    width: 15px;
    margin-right: 2px;
    vertical-align: bottom;
}

.card-transaction .right-side .history-blog .info-details h5.data {
    width: 106px;
}

.card-transaction .right-side .history-blog .info-details h5.amount {
    width: 59px;
}


/*card-repayment*/


.repayment {

}


.repayment .right-side .history-blog .web-info span.description {
    font-size: 13px;
    /*font-weight: 600;*/
}


.repayment .right-side .history-blog .web-info {
    padding: 11px 10px 10px 20px;
}

/*debt-payment*/


.debt-payment {

}

.debt-payment form {
    background: white;
    padding: 40px 40px 40px 0;
    width: 500px;
    border-radius: 20px;
    box-shadow: 1px 6px 6px 0px rgba(128,127,128,.07);

    text-align: center;
}

.debt-payment .right-side .form-group {
    position: relative;
    margin-bottom: 19px;
}

.debt-payment .right-side .form-group.radio {
    margin-left: 24px;
}

.debt-payment .right-side .form-group.radio label {
    margin-bottom: 20px;
    color: #163746;
    font-weight: 600;
    font-size: 16px;
    padding-left: 28px;
}

.debt-payment .right-side .form-group.radio .form-check {
    padding-left: 0;
    display: block;
    text-align: left;
    margin-left: 72px;
}

.debt-payment .right-side .form-check.write label {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.debt-payment .right-side .form-check.write label span img {
    width: 16px;
    margin-left: 3px;
}

.debt-payment .right-side .form-check.write input {
    top: 9px;
}

.debt-payment .right-side .form-group input.form-control {
    border-radius: 20px;
    padding: 21px 2px 21px 12px;
    font-size: 14px;
    margin-right: 10px;
    margin-left: 4px;
    border: 1px solid #BBC1C5;
    width: 170px;
}

.debt-payment .right-side .form-group.radio .form-check-input {
    vertical-align: middle;
    width: 22px;
    height: 22px;
    border-radius: 10px;
    background: white;
    border: 0;
    box-shadow: inset 0 0 0 0.5px #9f9f9f;
    padding: 0;
    margin: 0;
    transition: box-shadow 150ms cubic-bezier(0.95, 0.15, 0.5, 1.25);
    pointer-events: none;
    left: 0;
    margin-left: 0;
    margin-top: 2px;
    -webkit-appearance: none;
    appearance: none;
}

.debt-payment .right-side .form-group.radio .form-check input:checked {
    box-shadow: inset 0 0 0 5px #faa480;
}

.debt-payment .right-side .form-group .form-control {
    width: auto;
}

.debt-payment .right-side .form-group .checkmark {
    position: absolute;

    height: 21px;
    width: 21px;
    background-color: white;
    border-radius: 4px;
    border: 0.5px solid #BBC1C5;
    top: 0%;
    left: 0%;
    margin-left: 0;
    margin-top: 1px;
}

/* Create the checkmark/indicator (hidden when not checked) */
.debt-payment .right-side .form-group .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.debt-payment .right-side .form-group .form-check input:checked ~ .checkmark:after {
    display: block;

}

/* Style the checkmark/indicator */
.debt-payment .right-side .form-group .form-check .checkmark:after {
    left: 7px;
    top: 4px;
    width: 6px;
    height: 10px;
    border: solid #163746;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


.debt-payment .right-side .form-group.checkbox {
    margin-top: 0;
    display: block;
    text-align: left;
    margin-left: 96px;
}

.debt-payment .right-side .form-group.checkbox input {
    position: absolute;
    left: 0;
    top: 5px;
    margin-left: 8px;
}

.debt-payment .right-side .form-group.checkbox label {
    color: #163746;
    font-size: 15px;
    display: inline-block;
    padding-left: 28px;
}

.debt-payment .right-side form .btn-continue {
    text-align: center;
    margin-top: 25px;
}

.tooltip .tooltip-inner {
    max-width: 200px;
    padding: 5px 15px 7px 15px;
    color: #fff;
    text-align: center;
    background-color: #163746;
    border-radius: 1.25rem;
    font-size: 12px;
}

.bs-tooltip-auto[x-placement^=top] .arrow::before,
.bs-tooltip-top .arrow::before {
    border-top-color: #163746;
}






/*card-statements*/

.card-statements .right-side .history-blog .web-info {
    padding: 11px 10px 10px 21px;
}

.card-statements .right-side .history-blog .info-details {
    padding: 16px 10px 15px 21px;
}

.card-statements .right-side .history-blog .web-info a {
    color: #FAA480;
    font-size: 13px;
}


/*card-documents*/


.docs .find-document {
    margin: 35px 0 25px 0;
}

.docs .find-document button {
    border-radius: 36px;
    padding: 12px 40px;
    font-weight: 600;
}

.docs .right-side .history-blog .web-info span {
    font-size: 14px;
    /*font-weight: 600;*/
}





/*card-terms*/


.terms {
    /*overflow-y: scroll;*/
    height: auto;
}

.terms h3 {
    margin-bottom: 30px;
}

.terms .term-info {
    background: white;
    border-radius: 24px;
    padding: 30px;
}

.terms .term-info p {
    margin-bottom: 32px;
    color: #444444;
    font-size: 15px;
    line-height: 22px;
}

.terms .term-info p.bold {
    font-weight: 600;
    margin-bottom: 15px;
    color: #163746;
}

.terms .term-info ul li {
    margin-bottom: 32px;
    font-size: 15px;
    line-height: 22px;
    color: #444444;
}

.terms .term-info ul li:last-child {
    margin-bottom: 0;
}

.terms .term-info ul li span {
    font-weight: 600;
    color: #444444;
    font-size: 15px;
    line-height: 22px;
}


/*promotions page*/


.promotions {

}

.promotions .right-side .offer-block {
    background: white;
    padding: 45px 30px 45px 30px;
    border-radius: 14px;
    width: 420px;
    box-shadow: 1px 6px 6px 0px rgba(128,127,128,.07);
}

.promotions .right-side .offer-block p {
    font-size: 17px;
    text-align: center;
    color: #515151;
    margin: 0;
}

.my-profile.promotions .profile-menu nav ul li a img {
    top: 3px;
}





/*past-promo*/

.past-promo h3.profile-tittle {
    margin-bottom: 17px;
}

.activity.past-promo .page-buttons ul {
    margin-top: 10px;
}

.past-promo .promotion-blogs a img {
    transition: transform .5s ease;
    width: 100%;
}

.past-promo .promotion-blogs .promo-image {
    margin-bottom: 28px;
    border-radius: 15px;
}

.past-promo .promotion-blogs .promo-image а.promo-link {
    display: block;
    position: relative;
    overflow: hidden;
}

.my-profile.past-promo .profile-menu nav ul li a img {
    top: 2px;
}

.promo-link {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 1px 6px 6px 0px rgba(128,127,128,.07);
}
.promo-link img {
    border-radius: 15px;
}

.past-promo .promotion-blogs a img:hover {
    transform: scale(1.1);
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}




/*promo-details*/


.promo-details {
}

.promo-details ul.details {
    margin-bottom: 17px;
}

.promo-details ul.details li {
    display: inline-block;
}

.promo-details ul.details li.active a {
    background: white;
    border: 1px solid #163746;

}

.promo-details ul.details li a {
    font-size: 15px;
    color: #747687;
    display: inline-block;
    padding: 8px 45px;
    border-radius: 30px;
    margin-right: 11px;
    border: 1px solid #CDD4DF;
    background: #F1F5F8;
}

.promo-details ul.details li a:hover {
    border: 1px solid #FAA480;
    background: white;
}

.promo-details ul.details li.active a:hover {
    border: 1px solid #163746;
}



.promo-details ul.details li.active a {
    color: #163746;

}


.promo-details .promo-image {

}

.promo-details .promo-image a {

}

.promo-details .promo-image a img {
    border-radius: 16px;

    margin: 8px 0 20px 0;
}

.promo-details .promo-image p {
    color: #747687;
    padding-left: 5px;
    font-size: 15px;
    margin-bottom: 0;
}



.promo-details .terms-inf {
    background: white;
    border-radius: 14px;
    padding: 30px 30px 25px 30px;
    box-shadow: 1px 6px 6px 0px rgba(128,127,128,.07);
    margin-top: 25px;
}


.promo-details .terms-inf h5 {
    text-transform: uppercase;
    color: #747687;
    font-size: 15px;
    line-height: 22px;
}

.promo-details .terms-inf p {
    color: #747687;
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 20px;
}

.promo-details .terms-inf p.last {
    margin-bottom: 0;
}

.promo-details .terms-inf.example {
    padding: 30px 30px 35px 30px;
}

.promo-details .terms-inf ul.terms-details li p {

}

.promo-details .terms-inf p a {
    color: #747687 ;
    font-size: 15px;
    line-height: 22px;
}








/*win-with-a-white-card*/


.white-card-offer {

}

.white-card-offer .win-offer-block {
    padding-top: 50px;
}

.white-card-offer .win-offer-block h3 {
    text-align: center;
    padding: 0 37px;
    margin-bottom: 16px;
    font-size: 35px;
    line-height: 36px;
}

.white-card-offer .win-offer-block p {
    color: #444444;
    text-align: center;
    padding: 0 27px;
    font-size: 18px;
    line-height: 19px;
    margin-bottom: 15px;
}

/*.white-card-offer .win-offer-block .offer-image {*/
/*    background: url("../images/offer-bgr.png");*/
/*    background-size: cover;*/
/*    */
/*}*/

.white-card-offer .win-offer-block .offer-image {
    padding: 0;
    margin: 0;
    position: relative;
    padding-left: 50px;
}

/*.white-card-offer .win-offer-block .offer-image img.offer-bgr {*/
/*    position: absolute;*/
/*    max-width: 410px;*/
/*    top: 0;*/
/*    margin-top: -22px;*/
/*}*/

/*.white-card-offer .win-offer-block .offer-image img.shape-bgr1 {*/
/*    position: absolute;*/
/*    width: 60px;*/
/*    top: 0;*/
/*    left: 0;*/
/*    margin-left: 116px;*/
/*    margin-top: 27px;*/
/*}*/

/*.white-card-offer .win-offer-block .offer-image img.shape-bgr2 {*/
/*    position: absolute;*/
/*    width: 105px;*/
/*    top: 0;*/
/*    right: 0;*/
/*    margin-right: 40px;*/
/*    margin-top: 31px;*/
/*}*/


.white-card-offer .win-offer-block .offer-image img {
    width: 100%;
}

.white-card-offer .win-offer-block .offer-count {
    background: white;
    margin-bottom: 30px;
    border-radius: 14px;
    padding: 25px 0;
    box-shadow: 1px 6px 6px 0px rgba(128,127,128,.07);
}

.white-card-offer .win-offer-block .offer-count .img-and-count {
    text-align: center;
}

.white-card-offer .win-offer-block .offer-count .img-and-count img {
    vertical-align: top;
    width: 35px;
    height: 30px;
    margin-right: 4px;
}

.white-card-offer .win-offer-block .offer-count .img-and-count span {
    color: #163746;
    font-weight: 600;
    font-size: 32px;
    line-height: 36px;
}

.white-card-offer .win-offer-block .offer-count span.info {
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    color: #747687;

}


.white-card-offer .invite-a-friend {
    background: white;
    margin-bottom: 30px;
    border-radius: 14px;
    padding: 25px 25px 30px 25px;
    box-shadow: 1px 6px 6px 0px rgba(128,127,128,.07);
}

.white-card-offer .invite-a-friend form .form-group {

}

.white-card-offer .invite-a-friend .form-group label {
    color: #444444;
    font-weight: 600;
    font-size: 17px;
    margin-bottom: 3px;
}

.white-card-offer .invite-a-friend form .form-group input {
    background-color: white;
    opacity: 1;
    border-radius: 20px;
    padding: 21px 16px;
    font-size: 14px;
}

.white-card-offer .invite-a-friend form .form-group input,
.white-card-offer .invite-a-friend form .form-group textarea {
    border: 1px solid #BBC1C5;
}


.white-card-offer .invite-a-friend form .form-group input::placeholder,
.white-card-offer .invite-a-friend form .form-group textarea::placeholder {
    color: #747687;
}

.white-card-offer .invite-a-friend form .form-group textarea {
    background-color: white;
    opacity: 1;
    border-radius: 12px;
    padding: 11px 16px 10px 16px;
    font-size: 14px;
    color: lightseagreen;
    margin-top: 15px;
    line-height: 20px;
}


.white-card-offer .share-now {
    background: white;
    border-radius: 14px;
    padding: 25px 25px 30px 25px;
    box-shadow: 1px 6px 6px 0px rgba(128,127,128,.07);
    text-align: center;
}

.white-card-offer .share-now h5 {
    font-weight: 600;
    margin-bottom: 5px;
}


.white-card-offer .share-now ul li {
    display: inline-block;
    padding: 0 4px;
}

.white-card-offer .share-now ul li a {
    color: blue;
}

.white-card-offer .share-now ul li a img {

}

.white-card-offer .share-now a.web-link {
    display: block;
    color: #747687;
}

.white-card-offer .share-now button.clipboard {
    border: none;
    background: none;
    color: #FF8900;
    text-decoration: underline;
    outline: none;
}


/*faq*/

.faq {
    height: auto;
}

.faq ul.faq-info-help {

}

.faq ul.faq-info-help li {
    background: white;
    border-radius: 12px;
    padding: 0 26px;
    margin-bottom: 15px;
    box-shadow: 1px 6px 6px 0px rgba(128,127,128,.07);

}

.faq ul.faq-info-help li button {
    width: 100%;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    padding: 21px 0px 21px 0px;
    color: #163746;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    text-align: left;
    margin-top: 8px;
    outline: none;
}

.faq ul.faq-info-help li.clicked button {
    padding-bottom: 16px;
}

.faq ul.faq-info-help li button img {
    width: 26px;
    padding-left: 10px;
}

.faq ul.faq-info-help li button img.arrow-top {
    display: none;
}

.faq ul.faq-info-help li.clicked button img.arrow-down {
    display: none;
}

.faq ul.faq-info-help li.clicked button img.arrow-top {
    display: inline-block;
}





.faq ul.faq-info-help li p {
    padding-bottom: 23px;
    font-size: 14px;
    display: none;
    color: #747687;
}

.faq ul.faq-info-help li.clicked p {
    display: block;
}


/*register*/

.register {

}

.register .card-register {
    padding-left: 15px;
}

.register .card-register .login-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0DCA65;
    padding: 12px 15px;
    margin-bottom: 32px;
    border-radius: 6px;

}

.register .card-register h3 {
    margin-top: 33px;
}

.register .card-register .login-info .info {

}

.register .card-register .login-info .info img {
    width: 15px;
    margin-right: 7px;
}

.register .card-register .login-info .info span {
    color: white;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    vertical-align: bottom;
}

.register .card-register .login-info .img-close img {
    width: 11px;
}

.register .card-register .form-contract form {
    background: white;
    border-radius: 14px;
    padding: 35px 40px 47px 40px;
    box-shadow: 1px 6px 6px 0px rgba(128,127,128,.07);
}


.register .card-register .form-contract form .form-group {
    margin-bottom: 23px;
}


.register .card-register .form-contract form .form-group label {
    display: block;
    font-weight: 600;
    color: #444444;
    font-size: 15px;
    margin-bottom: 5px;
}

.register .card-register .form-contract form .form-group input {
    background-color: white;
    opacity: 1;
    border-radius: 20px;
    padding: 21px 16px;
    font-size: 14px;
    color: lightseagreen;
    border: 1px solid #BBC1C5;
}

.register .card-register .form-contract form button.save {
    margin-top: 2px;
}


.register .card-register .more-info {

}

.register .card-register .more-info h5 {
    display: block ;
    font-weight: 600;
    color: #163746;
    font-size: 16px;
    margin-bottom: 4px;
}

.register .card-register .more-info img {
    width: 355px;
    display: block;
    margin-bottom: 27px;

}

.register .card-register .more-info img.eclipse {
    position: absolute;
    bottom: 0;
    width: 109px;
    margin-bottom: 100px;
    left: 3px;
}

.register .card-register .more-info img.eclipse2 {
    width: 109px;
    margin-bottom: 99px;
}

.register .card-register .more-info p {
    font-size: 13px;
    line-height: 19px;
    width: 374px;
    color: #747687;
    margin-bottom: 0;
}


li {
    list-style: none
}

.hide-password {
    display: none
}



/*forgot password*/

.form-log {
    padding: 65px 0 0 0;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh);
    background: url("../images/log-bgrd.jpg");
    background-size: cover;
}

.form-log footer .copyright {
    text-align: center;
}

.form-log .form-block {
    text-align: center;
}

.form-log .form-block .logo-text {
    width: 355px;
    margin: 0 auto 0 auto;
    padding: 60px 0 25px 0;
    background: white;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.form-log .form-block .logo-text a {
    color: #163746;
    font-family: "Ubuntu";
    font-size: 43px;
    line-height: 21px;
}

.form-log .form-block .logo-text a span {
    display: block;
    font-size: 13.5px;
    line-height: 10px;
    position: relative;
    margin: 5px 0 0 0;
    font-family: "Ubuntu";
}

.info-img[data-tooltip] .tooltip-inner {
    max-width: 200px;
    padding: 5px 15px 7px 15px;
    color: #444444;
    text-align: center;
    background-color: white;
    border-radius: 1.25rem;
    font-size: 12px;
    border: 1px solid #BBC1C5;
    line-height: 17px;
}

.form-log .bs-tooltip-auto[x-placement^=top] .arrow::before,
.form-log .bs-tooltip-top .arrow::before {
    border-top-color: #BBC1C5;
}

.form-log .form-block img {
    margin-bottom: 23px;
}

.form-log .form-block form {
    width: 355px;
    margin: 0 auto;
    background: white;
    padding: 28px 30px 32px 30px;
    box-shadow: 1px 6px 6px 0px rgba(128,127,128,.07);
    margin-bottom: 32px;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.form-log .form-block form h5 {
    color: #163746;
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 25px;
}

.form-log .form-block form .form-group {
    margin-bottom: 18px;
    position: relative;
}

.form-log .form-block form .form-group input {
    background-color: white;
    opacity: 1;
    border-radius: 20px;
    padding: 21px 16px 21px 40px;
    font-size: 14px;
    border: 1px solid #BBC1C5;
}

.form-log .form-block form .form-group input.pass {
    padding: 21px 39px 21px 40px;
}

.form-log .form-block form .form-group img {
    position: absolute;
    left: 0;
    top: 25%;
    margin-top: 3px;
    margin-left: 17px;
    width: 16px;
    height: 16px;
}

.form-log.form-block form .form-group input::placeholder {
    color: #999AAB;
}

.form-log .form-block form button {
    border-radius: 24px;
    padding: 11px 55px;
    width: 100%;
    margin-top: 6px;

}

.form-log .form-block .register-link {

}

.form-log .form-block .register-link a {
    color: #FF8900;
}

.form-log .form-block .register-link a:hover {
    color: #FFAA00;
}

.form-log .form-block .register-link span {
    color: #FFFFFF;
}


.form-log .form-block .form-group .checkmark {
    position: absolute;
    height: 21px;
    width: 21px;
    background-color: white;
    border-radius: 4px;
    border: 0.5px solid #BBC1C5;
    top: 0%;
    left: 0%;
    margin-left: 0px;
    margin-top: 0px;
    appearance: none;
    -webkit-border-image: none;
    -webkit-appearance: none;
}

/* Create the checkmark/indicator (hidden when not checked) */
.form-log .form-block .form-group .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Show the checkmark when checked */
.form-log .form-block .form-group .form-check input:checked ~ .checkmark:after {
    display: block;
    -webkit-appearance: none;
    appearance: none;

}

/* Style the checkmark/indicator */
.form-log .form-block .form-group .form-check .checkmark:after {
    left: 7px;
    top: 4px;
    width: 6px;
    height: 10px;
    border: solid #163746;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-appearance: none;
    appearance: none;
}


.form-log .form-block .form-group.checkbox {
    margin-left: 0;
    margin-top: 0;
    text-align: left;
    display: flex;
    justify-content: space-between;
    -webkit-appearance: none;
    appearance: none;
}

.form-log .form-block .form-group.checkbox a {
    color: #747687;
    text-decoration: underline;

}

.form-log .form-block .form-group.checkbox input {
    position: absolute;
    left: 0;
    top: 5px;
    margin-left: 5px;
    z-index: -2;
    /*-webkit-appearance: inherit ;*/
    /*appearance: inherit;*/
    /*-webkit-transform: none;*/

}

.form-log .form-block .form-group.checkbox label {
    color: #646262;
    font-size: 14px;
    line-height: 19px;
    display: inline-block;
    padding-left: 28px;
    -webkit-appearance: none;
    appearance: none;
}

.form-log .form-block .form-group #togglePassword {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 15px;
    margin-right: 15px;
    opacity: 0.6;
}


/*footer-info*/

.footer-info {
    background: #F8FCFF;
}

.footer-info p {
    text-align: center;
    color: #515151;
    font-size: 13px;
    opacity: 0.6;
}


/*choose-payment*/


.choose-payment {
    padding: 100px 0 0 0;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh);
}

.choose-payment .steps {
    width: 440px;
    margin: 0 auto;
    position: relative;
}

.choose-payment .steps ul {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.choose-payment .steps ul:after {
    content: "";
    position: absolute;
    width: 161px;
    height: 1px;
    background: #CCD6E2;
    right: 0;
    margin-right: 40px;
    top: 50%;
    margin-top: -16px;
}


.choose-payment .steps ul:before {
    content: "";
    position: absolute;
    width: 161px;
    height: 1px;
    background: #CCD6E2;
    left: 0;
    margin-left: 40px;
    top: 50%;
    margin-top: -16px;
}

.choose-payment .steps ul li.active {
    color: #747687;
}

.choose-payment .steps ul li {
    display: inline-block;
    color: #B0BBC8;

}

.choose-payment .steps ul li.active span {
    background: #F9A37F;
    color: white;
}

.choose-payment .steps ul li span {
    display: block;
    text-align: center;
    color: #CCD6E2;
    border-radius: 100%;
    margin: 0 auto;
    width: 22px;
    height: 22px;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 15px;
    padding: 0px 1px 0px 0px;
    position: relative;
}

.choose-payment .steps ul li.active span:after {
    border: 2px solid #FAA480;
}

.choose-payment .steps ul li span:after {
    content: "";
    position: absolute;
    width: 38px;
    height: 38px;
    border: 2px solid #CCD6E2;
    border-radius: 100px;
    top: 50%;
    left: 50%;
    margin-left: -19px;
    margin-top: -19px;
}

.choose-payment .chooses {
    padding: 0 165px;
    margin-top: 60px;
}

.choose-payment .chooses .without-acc {
    text-align: center;
    background: white;
    padding: 32px 15px 39px 15px;
    border-radius: 18px;
    box-shadow: 1px 6px 6px 0px rgba(128,127,128,.07);
}

.choose-payment .chooses .without-acc h4 {
    color: #163746;
    font-weight: bold;
    font-size: 23px;
    margin-bottom: 20px;
}

.choose-payment .chooses .without-acc p {
    color: #646262;
    font-size: 14px;
}

.choose-payment .chooses .without-acc .btn-continue {
    padding: 0 15px;
}

.choose-payment .chooses .without-acc .btn-continue button {
    width: 100%;
}


/*pay online*/


.pay-online {

}

.pay-online .form-block .form-group {

}

.form-log.pay-online .form-block form .form-group img {
    margin: 3px 14px 0 0;
    position: absolute;
    top: 25%;
    left: auto;
    right: 0 !important;
    width: 16px;

}

.form-log.pay-online .form-block form .form-group input {
    padding: 21px 40px 21px 20px;
}