﻿/* common styles for all pages */
@font-face {
    font-family: "Digit";
    src: url("../fonts/kredit front.ttf");
}
/*@font-face {
font-family: "Open Sans";
src: url("../fonts/OpenSans-Regular.ttf");
}*/

.CardNumber {
    font-family: Digit;
}

.WhiteFontClass {
    color : white;
}

.data-number {
    font-weight: bold;
    color: #20487f;
    font-size: 20px;
    margin-left: 0;
    padding-left: 0;
}
 
.fa-6x {
    font-size: 2em;
    margin-top: 37px;
    margin-left: 5px;
    color: #295c91;
}

.btnCvvToggle {
    cursor: pointer;
    text-decoration: underline;
}

.btnCardnumToggle {
    cursor: pointer;
    text-decoration: underline;
}

.red {
    color: red;
}
/*.menu {*/
div.menu {
    padding: .4px 0px 4px 0px;
}

    div.menu ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
        width: auto;
    }

        div.menu ul li ul li {
            display: block;
            width: 250px;
        }

        div.menu ul li a, div.menu ul li a:visited {
            background-color: #465c71;
            border: 1px #4e667d solid;
            color: #dde4ec;
            display: block;
            line-height: 1.35em;
            padding: 4px 20px;
            text-decoration: none;
            white-space: nowrap;
        }

        div.menu ul li {
            margin: 0 0 0px;
        }

            div.menu ul li a:hover {
                background-color: #bfcbd6;
                color: #465c71;
                text-decoration: none;
            }

            div.menu ul li a:active {
                background-color: #465c71;
                color: #cfdbe6;
                text-decoration: none;
            }
/*}*/

/* Language Menu*/
.roundImages {
    border-radius: 10px;
}

#lang1:hover, #lang2:hover, #lang3:hover, #lang4:hover, #lang5:hover, #lang6:hover, #lang7:hover, #lang8:hover, #lang9:hover, #lang10:hover, #lang11:hover, #lang12:hover {
    background-color: transparent;
}

/* End of language menu*/
/* Footer menu*/

.footer-menu {
    /*background-color: #295c91;
    height: 100px;
    background-size: cover;
    border: 0;
    text-align: center;
    padding-top: 30px;
    color: #fff;
    overflow-y: auto;*/
    background-color: #295c91;
    font-size: 16px;
    font-weight: bold;
    height: 80px;
    border-radius: 45px;
    background-size: cover;
    border: 0;
    text-align: center;
    padding-top: 15px;
    color: #fff;
    overflow-y: auto;
    display: flex;
    align-items: center;

}

}

.footer-menu-medium {
    /*background-color: #295c91;
    height: 100px;
    background-size: cover;
    border: 0;
    text-align: center;
    padding-top: 5px;
    color: #fff;*/

    background-color: #295c91;
    font-size: 14px;
    font-weight: bold;
    height: 80px;
    border-radius:45px;
    background-size: cover;
    border: 0;
    text-align: center;
    padding-top: 7px;
    color: #fff;
    overflow-y: auto;
    display: flex;
    align-items: center;
    
}

#myNavbar ul li a, #myNavbar2 ul li a {
    color: #fff;
    font-size: inherit;
}

    #myNavbar ul li a:link, #myNavbar ul li a:visited, #myNavbar ul li a:hover, #myNavbar ul li a:active, #myNavbar2 ul li a:link, #myNavbar2 ul li a:visited, #myNavbar2 ul li a:hover, #myNavbar2 ul li a:active {
        color: #fff;
        background-color: transparent;
    }

.first-li-sides-padding {
    padding-left:0px;
    padding-right: 0px;
}

.sides-padding {
    padding-left: 0px;
    padding-right: 0px;
}

.sides-padding-md {
    padding-left: 0px;
    padding-right: 0px;
}

.last-li-sides-padding {
    padding-left: 0px;
}

.last-li-sides-padding-md {
    padding-left: 0px;
}

/*End of Footer Menu*/
.left-padding-0 {
    padding-left: 0;
    margin-left: 0;
}

.padding-r-20 {
    padding-right: 20px;
}

.padding-b-15 {
    padding-bottom: 15px;
}

hr {
    margin-top: 3px;
    margin-bottom: 6px;
}

.height-100 {
    height: 100%;
}

.text-left {
    text-align: left;
}

.float-right {
    float: right;
}

.color-red {
    color: #dd585f;
}

.color-blue {
    color: #204880;
}

.margin-top-10 {
    margin-top: 10px;
}

.no-padding {
    padding: 0;
}

.width-200 {
    width: 200px;
}

.no-wrap {
    white-space: nowrap;
}

#breadcrumb a {
    font-size: 15px;
    color: #444444;
    font-family: 'Open Sans';
    text-transform: uppercase;
    text-decoration: none;
}

    #breadcrumb a.current, #breadcrumb a:hover {
        color: #9fa0a0;
        text-decoration: none;
    }

body {
    padding-top: 0;
    padding-left: 0;
    margin: 0;
    font-family: 'ubuntu';
}


.body-content {
    max-width: 1180px;
}

#langDropdown {
    display: inline;
    position: absolute;
}

#imageLogo {
    background-repeat: no-repeat;
    background-position: center center;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    -webkit-background-size: 100%;
    background-size: 100%;
    position: relative;
    top: 12px;
    height: auto;
    width: auto;
    max-width: 220px;
    max-height: 60px;
}

.logo-header {
    margin-bottom: 2%;
    margin-left: 15px;
}


/*#logoImage {
    display: inline-block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    content: url("Images/bank.jpg");
    width: auto;
    height: 85px;
    max-width: 145px;
    max-height: 70px;
}

#logo:before {
    display: inline-block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url("Images/bank.jpg");
    width: auto;
    height: 85px;
    max-width: 145px;
    max-height: 70px;
}

#logo:after {
    display: inline-block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url("Images/bank.jpg");
    width: auto;
    height: 85px;
    max-width: 145px;
    max-height: 70px;
}*/

#top-menu {
    position: relative;
    top: 20px;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 70px;
    color: #fff;
    font-family: 'ubuntu-light';
    font-size: 12pt;
}

.navbar-toggle {
    background: transparent;
    margin-top: -3px;
}

.icon-bar {
    color: #1f467d;
    background: #1f467d;
}

.dropdown-menu a.icon {
    position: relative;
    padding-left: 40px;
}

.dropdown-menu a.icon .glyphicon {
        top: 6px;
        left: 10px;
        font-size: 18px;
    }

.lan-btn {
    border: 0;
}

.lan-btn-width {
    width: 45px;
}

.lan-select a {
    color: #666;
    font-size: 16px;
}

.lan-fr-btn {
    color: #666;
    font-size: 16px;
    border: 0;
    background: url('Images/Flags/fr-FR.png') left 3px top 5px no-repeat #fff;
    width: 100px;
}

#footer {
    width: 100%;
    font-family: 'ubuntu-light';
    border-top: 1px solid #eee;
    padding-top: 20px;
}

#footer a {
        font-size: 16px;
        color: #444;
    }

.col-footer {
    height: 40px;
}


div.left {
    text-align: right;
    padding-right: 0;
}

div.right {
    text-align: left;
    padding-left: 10px;
}

.cp-input-text {
    padding-left: 10px;
    height: 50px;
}

.cp-input-phone {
    max-width: 240px;
    height: 40px;
    background: transparent;
    border: 1px solid #ccc;
    font-family: 'ubuntu-light';
    font-size: 17px;
    color: #000;
    padding-left: 10px;
    border-radius: 4px;
    padding-left: 48px;
}

.cp-input-small {
    max-width: 120px;
    padding-left: 10px;
}

.cp-input-tiny {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid #ccc;
    font-family: 'ubuntu-light';
    font-size: 17px;
    color: #000;
    padding-left: 10px;
    border-radius: 4px;
}

.cp-input-smaller {
    width: 80px;
    height: 40px;
    background: transparent;
    border: 1px solid #ccc;
    font-family: 'ubuntu-light';
    font-size: 17px;
    color: #000;
    padding-left: 10px;
    border-radius: 4px;
}

.calendar-add-on {
    display: inline-block !important;
}

.table-condensed {
    background: #fff;
}

.form-section-head {
    color: #204880;
    font-family: 'Open Sans';
    font-size: 21px;
    padding: 0;
}

.form-text {
    font-size: 15px;
    color: #666;
    width: 80%;
}

.row {
    text-align: left;
    margin-top: 10px;
}

.comment {
    color: #444444;
    font-size: 13px;
    font-family: 'Open Sans';
}

div.fileinputs {
    position: relative;
    margin-bottom: 20px;
}

div.fakefile {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

input.file {
    position: relative;
    text-align: right;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
    height: 40px;
    width: 280px;
}

.cp-input-text {
    height: 50px;
}

.cp-input-file {
    width: 400px;
    height: 40px;
    background: transparent;
    border: 1px solid #ccc;
    font-family: 'ubuntu-light';
    font-size: 17px;
    color: #000;
    border-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-left: 20px;
}

.file-button {
    height: 40px;
    width: 120px;
    background: #1f467d;
    color: #fff;
    /*color: #333;*/
    border: 1px solid #ccc;
    border-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    /*background: #ccc;*/
    font-family: 'Open Sans';
    font-size: 13px;
    padding: 0;
    margin-left: -4px;
    position: relative;
    /*top: -2px;*/
}

@media (max-width: 500px) {
    .cp-input-file {
        width: 100px;
        padding-left: 5px;
    }
}

@media (max-width: 768px) {
    div.left {
        text-align: left;
    }

    .cp-input-text {
        max-width: none;
        width: 100%;
    }

    .form-group {
        margin-bottom: 0;
    }

    .cp-input-smaller {
        width: 90%;
    }

    .row {
        padding-left: 0;
    }

    /*#logo {
        display: inline-block;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background: url("Images/bank.jpg");
        width: auto;
        height: 85px;
        max-width: 145px;
        max-height: 70px;
    }*/

    #footer {
        padding-top: 10px;
    }

    #top-menu {
        position: static;
    }
}

/* 
    START
    DEFAULT.CSS STYLE
*/
.field-label {
    text-transform: uppercase;
    color: #ffffff;
    font-family: 'ubuntu-light';
    font-size: 14px;
}
.field-label-LandingPage {
    text-transform: uppercase;
    color: #ffffff;
    font-family: 'ubuntu-light';
    font-size: 14px;
}
.ddl {
    border-radius: 5px;
    background-position: 88px;
    background-repeat: no-repeat;
    text-indent: 0.01px;
    color: #fff;
    background-color: #295b91;
    border-color: #6c757d;
    text-align: center;
    border: 1px solid transparent;
}
.ddl-general-master {
    border-radius: 5px;
    background-position: 88px;
    background-repeat: no-repeat;
    text-indent: 0.01px;
    color: #fff;
    background-color: #295c91;
    border-color: #6c757d;
    text-align: center;
    border: 1px solid transparent;
    padding-top: 10px;
    padding-left: 10px;
    font-family: 'ubuntu';
    font-size: 20px;
}

.ddl-general-master-phone {
    border-radius: 5px;
    background-position: 88px;
    background-repeat: no-repeat;
    text-indent: 0.01px;
    color: #337ab7;
    background-color: #ffffff;
    text-align: center;
    border: 1px solid transparent;
    font-family: 'ubuntu';
    font-size: 15px
}

#MainContent_ddlLanguageFlag {
    float: left;
    padding-top: 6px;
    padding-right: 1px;
}

#MainContent_ddlLanguageFlag2 {
    float: left;
    padding-top: 6px;
    padding-right: 1px;
}

.login-field {
    width: 320px;
    height: 50px;
    background: transparent;
    background-image: url(Images/form_field.gif);
    background-size: cover;
    font-family: 'ubuntu-light';
    font-size: 17px;
    color: #bbb;
    padding-left: 20px;
}


/*.login-field-Navy {
    width: 320px;
    height: 50px;

    background-color:#eee;
    font-family: 'ubuntu-light';
    font-size: 17px;
    color: #4c235d;
   
    padding-left: 20px;
    border: 3px solid #4c235d; 
    border-radius: 25px; 
}*/

.home-container {
    height: 100vh;
}

.login-head, .codeRecovery-head {
    padding-top:0px;
    margin-top: 0px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 21px;
    font-family: 'Open Sans';
    /*color:#4c235d;*/
}
@media (max-width: 768px)
{
    .login-head, .codeRecovery-head {
    padding-top:1px;
    margin-top: 0px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 21px;
    font-family: 'Open Sans';
    /*color:#4c235d;*/
}
}
@media ( max-width: 400px )
{
    .login-head, .codeRecovery-head {
    padding-top:1px;
    margin-top: 0px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 21px;
    font-family: 'Open Sans';
    /*color:#4c235d;*/
}
}

#LoginFormBodyContent a, #CodeRecoveryFormBody a {
    color: #fff;
    font-size: 13px;
    font-family: 'Open Sans';
}
.login-btn {
    background-color: #295B91;
    width: 230px;
    height: 40px;
    font-family: 'Open Sans';
    font-size: 16px;
    color: #fff;
    margin: 0;
    padding: 10px 20px;
    min-width: 140px;
    border: 0;
    border-radius: 25px;
}
.Forget-btn {
    height: 40px;
    font-family: 'Open Sans';
    font-size: 16px;
    color: #fff;
    background-color: #285a90;
    border-radius: 25px;
    margin: 0;
    padding: 10px 20px;
    min-width: 140px;
    border: 0;
}
/*.login-btn-navy {
    
    width: 129px;
    height: 40px;
    font-family: 'Open Sans';
    font-size: 16px;
    color: #fff;
    background-color:#4c235d;
    border-radius: 25px; 
    margin: 0;
    padding: 0;
    border: 0;
}*/
.cancel-btn {
    background: url(Images/btn.png) left 0 top 0 no-repeat transparent;
    width: 129px;
    height: 40px;
    font-family: 'Open Sans';
    font-size: 16px;
    color: #fff;
    margin: 0;
    padding: 0;
    border: 0;
}

.left-padding-20 {
    padding-left: 20px;
}

.top-margin-0 {
    margin-top: 0;
    padding-top: 0;
}
/* 
    END
    DEFAULT.CSS STYLE
*/

/* 
    START
    ACCOUNT.CSS STYLE
*/

.margin-top-20 {
    margin-top: 20px;
}

.margin-bot-10 {
    margin-bottom: 10px;
}

.margin-bot-0 {
    margin-bottom: 0;
    padding-bottom: 0;
}

#ribbon {
    width: 100%;
    height: 100%;
    margin: 25px 0 0 0;
    position: relative;
}

/*#ribbon-left {
    clear: both;
    height: 100px;
    background-color: #e67071;
    float: left;
    background-size: cover;
    border: 0;
}

#ribbon-right {
    height: 100px;
    background-color: #295c91;
    border: 1px solid red;
    float: left;
    background-size: cover;
    border: 0;
}*/

#ribbon-left {
    clear: both;
    height: 70px;
    background-color:#295c91;
    border-top-left-radius:45px;
    border-bottom-left-radius:45px;
    float: left;
    background-size: cover;
    border: 0;
}

#ribbon-right {
    height: 70px;
    border: 1px solid red;
    background-color: #295c91;
    border-top-right-radius:45px;
    border-bottom-right-radius:45px;
    float: left;
    background-size: cover;
    border: 0;
}

.lostCard-Img {
    width: 100px;
    height: 80px;
}

.lostCard-Img2 {
    width: 70px;
    height: 60px;
}

.lostCard-Img-container {
    width: 102px;
    height: 82px;
    margin-right: 0;
    padding-left: 10px;
    float: left;
    overflow: hidden;
}

.lostCard-Img-container2 {
    width: 72px;
    height: 62px;
    margin-right: 0;
    margin-top: 10px;
    padding-left: 10px;
    float: left;
    overflow: hidden;
}

.lostCard-link-container {
    width: 150px;
    height: 82px;
    margin-left: 0;
    display: inline;
    float: left;
    padding-top: 10px;
    padding-left: 5px;
}


.triangle {
    width: 35px;
    height: 31px;
    background-image: url('../Content/Images/triangle.png');
    position: relative;
    top: 30px;
    display: inline-block;
}

.balance-text {
    font-size: 18px;
    color: #ffffff;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 0;
    }

@media (max-width: 768px) {
    .balance-text {
        margin-top: 10px;
    }
    
     .top-logo
  {
          display:none;
                  /*padding:0px;
            max-height:0px;
           
            background-image: url('Images/Logo/Cosmo_top_logo.png');
            background-color:transparent;
            /*background-position: center; 
            background-repeat: no-repeat; 
            background-size: contain;*/
   }


}

@media (max-width: 767px) {
    #ribbon-right {
        /*height: 200px !important;
        background-color: #295c91;
        float: left;
        -ms-background-size: cover;
        background-size: cover;
        border: 0;*/

          height: 70px;
    border: 1px solid red;
    background-color: #295c91;
    border-top-right-radius:45px;
    border-bottom-right-radius:45px;
    float: left;
    background-size: cover;
    border: 0;
    }
}

@media (min-width: 767px) {
    #ribbon-right {
        /*height: 100px !important;
        background-color: #295c91;
        float: left;
        -ms-background-size: cover;
        background-size: cover;
        border: 0;*/
          height: 70px;
    border: 1px solid red;
    background-color: #295c91;
    border-top-right-radius:45px;
    border-bottom-right-radius:45px;
    float: left;
    background-size: cover;
    border: 0;
    }
}

.balance-value {
    font-weight: bold;
    font-size: 32px;
    color: #fff;
}

.balance-currency {
    font-family: 'Open Sans';
    font-size: 18px;
    color: #fff;
}

@media (max-width: 768px) {
    div#add-funds-top-btn.col-xs-6 {
        padding-right: 0;
    }
}

.warning-text {
    display: inline-block;
    position: absolute;
    top: 30px;
    left: 50px;
    color: #fff;
    font-size: 14px;
}

@media (max-width: 992px) {
    .warning-text {
        top: 15px;
    }
}

.card-perview {
    height: 165px;
    width: 245px;
    margin: 40px 10px 10px 0;
}

#account-container {
    width: 100%;
    margin: 0;
    position: relative;
}


#account-content {
    background-image: url(Images/account_background.gif);
    min-height: 523px;
}

#confirmation-content {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    margin: 20px;
    padding: 10px;
    z-index: 10;
}

@media (max-width: 768px) {
    #account-content {
        background: #fff;
        padding-left: 5px;
        padding-right: 5px;
    }

    #add-funds-table.row {
        margin-right: 0;
    }

    #confirmation-content {
        margin: 5px;
        padding: 0;
    }
}


.section-head {
    font-family: 'Open Sans';
    font-size: 18px;
    color: #204880;
}

.upgrade-info {
    /*background: url(Images/upgrade_backgrond.gif) no-repeat;
    background-size: cover;*/
    margin: 0;
}

.upgrade-head {
    color: #dd585e;
    font-family: 'Open Sans';
    font-size: 21px;
    width: 100%;
    text-align: center;
}

.upgrade-option {
    height: 25px;
    width: 25px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background: #1f467d;
    line-height: 18px;
    font-size: 18px;
    text-align: center;
    color: #fff;
    float: none;
    margin: 0 auto;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .upgrade-info {
        margin-top: 10px;
    }
}

.upgrade-text {
    color: #666;
    font-size: 17px;
    width: 80%;
    text-align: center;
    margin: 0 0 0 40px;
}

.upgrade-feature {
    color: #de555a;
    font-size: 13px;
    font-family: 'Open Sans';
    text-align: center;
}

.upgrade-value {
    font-size: 21px;
    color: #20477e;
    text-align: center;
}

.fee-info {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    margin: 0;
}

@media (max-width: 768px) {
    .fee-info {
        border: 0;
    }
}

.fee-cost {
    color: #de575d;
    font-size: 15px;
    font-family: 'Open Sans';
}

.fee-table-head, .fee-table-head a {
    color: #333;
    font-size: 13px;
    font-family: 'Open Sans';
    text-transform: uppercase;
    font-weight: bold;
}

@media (max-width: 768px) {
    .fee-table-head, .fee-table-head a {
        font-weight: normal;
    }
}

.fee-row {
    text-align: center;
    margin: 0 2px 0 2px;
    border-top: 1px solid #eee;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
}

@media (max-width: 768px) {
    .fee-row {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.fee-type {
    color: #333;
    font-size: 15px;
}

.fee-left {
    text-align: left;
    display: inline-block;
    vertical-align: middle;
}

.fee-right {
    text-align: right;
    float: right;
}

.table-row-odd {
    background: #f8f9fb;
    position: absolute;
    top: 2px;
    left: -2px;
    height: 100%;
    width: 100%;
    border-top: 0 !important;
}

.table-row-even {
    position: absolute;
    display: none;
}

a.in-text-link, a.in-text-link:hover {
    text-decoration: underline;
    color: #666;
}

#history-filters {
    background: #f8f9fb;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid #eee;
    border-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

#history-table {
    background: #fff;
    border: 1px solid #eee;
}

.excel-link, .excel-link:hover {
    color: #333;
    font-family: 'Open Sans';
    font-size: 14px;
}

.transaction-date {
    color: #333;
    font-size: 15px;
    font-family: 'Open Sans';
}

.transaction-desc {
    color: #555;
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.transaction-income {
    color: #20487f;
    font-size: 15px;
    font-family: 'Open Sans';
}

.transaction-outcome {
    color: #de575d;
    font-size: 15px;
    font-family: 'Open Sans';
}

.hoverable {
    height: 100%;
    width: 100%;
    z-index: 2;
    background: transparent;
    border: 0;
    margin-top: -15px;
    position: absolute;
}

.hoverable-border:hover {
    border: 2px solid rgb(178, 226, 255);
    /*background: #b2e2ff;*/
    opacity: 1;
}

.hoverable-background:hover {
    border: 2px solid transparent;
    background: rgb(178, 226, 255);
    opacity: 0.3;
}

.filter-head {
    padding-left: 20px;
    text-transform: uppercase;
    color: #010111;
    font-size: 13px;
    font-family: 'Open Sans';
    margin-bottom: 5px;
    border-radius: 4px;
}

a .caret, a .caret-down {
    color: #333;
}

.caret-down {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-bottom: 4px dashed;
    border-bottom: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

#add-funds-table {
    background: transparent;
    border: 0;
    margin: 20px;
    margin-left: 0;
}

.transfer-method-row {
    margin: 0;
    margin-top: 10px;
    border: 1px solid #eee;
    border-radius: 10px;
    line-height: 100%;
    height: 70px;
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 768px) {
    .transfer-method-row {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.transfer-data {
    display: inline-block;
    vertical-align: middle;
    float: none;
    width: 100%;
}

.transfer-name {
    color: #204880;
    vertical-align: middle;
    line-height: 100%;
    font-size: 18px;
    font-family: 'Open Sans';
    text-align: center;
}

.transfer-text-lower {
    color: #666;
    font-size: 17px;
    width: 100%;
    height: 50%;
    text-align: center;
}

.transfer-text-upper {
    color: #333;
    text-transform: uppercase;
    font-family: 'Open Sans';
    font-weight: bold;
    font-size: 13px;
    width: 100%;
    height: 50%;
    text-align: center;
    margin-bottom: 5px;
}

.transfer-button {
    border: 1px solid red;
    border-radius: 100%;
    height: 40px;
    width: 40px;
}

.transfer-arrow-red-right {
    background: url(Images/arrow_right_red.gif) center no-repeat;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.transfer-shadow {
    position: relative;
    top: -9px;
    left: -17px; /*compensate padding*/
}

.main-account-row {
    margin: 30px 0 0 30px;
}

@media (max-width: 768px) {
    .main-account-row {
        margin: 0;
    }

    .no-padding-xs {
        padding-left: 0;
        padding-right: 0;
    }

    .no-padding-xs {
        padding-left: 0;
        padding-right: 0;
    }

    .transfer-image {
        width: 90%;
        max-width: 70px;
    }
}

@media (max-width: 992px) {
    .no-padding-sm {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 1200px) {
    .main-account-row {
        margin: 5px;
    }
}

@media (max-width: 1200px) {
    .filter-buttons-container {
        padding-left: 0;
    }
}

.top-shadow-all {
    -webkit-box-shadow: 0px -5px 10px -1px rgba(102,102,102,0.5);
    -moz-box-shadow: 0px -5px 10px -1px rgba(102,102,102,0.5);
    box-shadow: 0px -5px 10px -1px rgba(102,102,102,0.5);
}

.top-shadow {
    -webkit-box-shadow: 0px -5px 10px -1px rgba(102,102,102,0.5);
    -moz-box-shadow: 0px -5px 10px -1px rgba(102,102,102,0.5);
    box-shadow: 0px -5px 10px -1px rgba(102,102,102,0.5);
}

@media (max-width: 768px) {
    .top-shadow {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
}


/* 
    END
    ACCOUNT.CSS STYLE
*/

/*
    START
    Buttons.css 
*/

.click-link {
    cursor: pointer;
}

.cp-btn-purple-container {
    height: 42px;
    border: 0;
    border-radius: 42px;
    background: #1f467d;
    color: #fff;
    font-size: 17px;
    width: 100%;
    max-width: 250px;
    padding-top: 8px;
    text-align: left;
    /*padding-top: 0;
    background-color:#4c235d;*/
}
.cp-btn-purple-container2 {
    height: 52px;
    border: 0;
    border-radius: 42px;
    background: #1f467d;
    color: #fff;
    font-size: 17px;
    width: 100%;
    max-width: 250px;
    padding-top: 8px;
    text-align: left;
    /*padding-top: 0;
    background-color:#4c235d;*/
}
.cp-btn-purple {
    height: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 17px;
    margin-left: 21px;
    display: block;
}

.cp-asp-btn-purple {
    height: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 17px;
    /*margin-left: 21px;*/
    margin-top: 0;
    padding-top: 0;
    display: block;
    text-decoration: none;
    text-align: center;
}

a.cp-btn-purple:hover {
    color: #fff;
    text-decoration: none;
    border: none;
}

a.cp-btn-purple:focus {
    color: #fff;
    text-decoration: none;
    border: none;
}

a.cp-asp-btn-purple:hover {
    color: #fff;
    text-decoration: none;
    border: none;
}

a.cp-asp-btn-purple:focus {
    color: #fff;
    text-decoration: none;
    border: none;
}

.plus-icon {
    background-image: url(Images/plus.png);
    width: 31px;
    height: 60px;
    background-size: cover;
}

.cp-transparent-btn {
    background: transparent;
    width: 211px;
    height: 42px;
    color: #fff;
    font-size: 18px;
    border: 0;
}




.cp-transparent-btn-container {
    height: 42px;
    border: 1px solid #ffffff;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 42px;
    background: transparent;
    color: #fff;
    font-size: 17px;
    width: 100%;
    padding-top: 5px;
    padding-left: 5px;
}


a.cp-transparent-btn:link {
    color: #fff;
    text-decoration: none;
    border: none;
}

a.cp-transparent-btn:visited {
    color: #fff;
    text-decoration: none;
    border: none;
}

a.cp-transparent-btn:hover {
    color: #fff;
    text-decoration: none;
    border: none;
}

a.cp-transparent-btn:active {
    color: #fff;
    text-decoration: none;
    border: none;
}

a.cp-btn-purple-container:hover {
    color: #fff;
    text-decoration: none;
    border: none;
}

a.cp-btn-purple-container:focus {
    color: #fff;
    text-decoration: none;
    border: none;
}

a.cp-transparent-btn-container:link {
    color: #fff;
    text-decoration: none;
    border: none;
}

a.cp-transparent-btn-container:visited {
    color: #fff;
    text-decoration: none;
    border: none;
}

a.cp-transparent-btn-container:hover {
    color: #fff;
    text-decoration: none;
    border: none;
}

a.cp-transparent-btn-container:active {
    color: #fff;
    text-decoration: none;
    border: none;
}

a.cp-transparent-btn-container:focus {
    color: #fff;
    text-decoration: none;
    border: none;
}

/*
    END
    Buttons.css
*/

/*
    START
    Calendar.css
*/

.filter {
    background: #fff;
    border: 1px solid #ccc;
    /*color: #ccc;*/
    color: #333;
    height: 40px;
    font-family: 'ubuntu';
    font-size: 16px;
}

.filter-date {
    width: 80%;
    padding-left: 10px;
}

.filter-type {
    /*min-width: 120px;*/
    padding-left: 20px;
}

.calendar-add-on {
    /*display: inline-block;*/
    width: 40px;
    height: 40px;
    padding: 9px;
    background-color: #e9ebed;
    position: relative;
    top: -40px;
    left: 80%;
}

.calendar-icon {
    background: url(Images/calendar.gif);
    display: block;
    width: 22px;
    height: 22px;
}

.real-date-input {
    display: none;
    position: absolute;
}

td.active.day {
    background: rgb(178, 226, 255);
    border-radius: 4px;
}


/*
    End
    Calendar.css
*/


/*
    Start 
    Faq.css
*/

.question {
    font-family: 'Open Sans';
    color: #1f467d;
    font-size: 15px;
}

    .question span {
        display: block;
        /*font-weight: bold;*/
        cursor: pointer;
        background-image: url("images/collapsed.gif");
        background-repeat: no-repeat;
        background-position: 0 center;
        padding-top: 5px;
        padding-right: 0;
        padding-bottom: 5px;
        padding-left: 20px;
    }

        .question span.expanded {
            background-image: url("images/expanded.gif");
        }

.faq-collapsed {
    display: none;
}

.answer {
    font-size: 13px;
    text-align: justify;
}

div.question div li {
    display: block;
    color: #4A4A4A;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 20px;
    margin-top: 0px;
    list-style-image: none;
    list-style-type: none;
    list-style-position: outside;
}

div.question div ol li.numb {
    list-style-type: decimal;
    list-style-position: outside;
    padding-left: 0;
    margin-top: 0;
    margin-left: 5px;
    display: list-item;
}

div.question div ul li.Bullets {
    list-style-position: outside;
    margin-left: 5px;
    display: list-item;
    list-style-image: url("images/v.png");
    padding-left: 0px;
}

@media (max-width: 768px) {
    div#top-menu {
        position: relative;
        top: 10px;
        height: 70px;
    }
}

/*
    End
    Faq.css
*/

/*
    Start
    Form-page.css
*/

.dropdown-menu a.icon {
    position: relative;
    padding-left: 40px;
}

    .dropdown-menu a.icon .glyphicon {
        top: 6px;
        left: 10px;
        font-size: 18px;
    }

.open .dropdown-toggle, .dropdown-toggle, .dropdown-toggle:active, .dropdown-toggle:hover {
    background: transparent !important;
    /*color: #000 !important;*/
    border: 0;
}

.dropdown-menu, .dropdown-menu:active, .dropdown-menu:hover {
    background: transparent !important;
    /*color: #000 !important;*/
    border: 0;
    min-width: 100px;
    width: 100px;
}

.cp-transparent-btn-container {
    border: 1px solid #385c8e;
    color: #214981;
}


/*a.cp-transparent-btn, a.cp-transparent-btn:hover {
    color: #214981
}*/

#breadcrumb a {
    font-size: 15px;
    color: #444444;
    font-family: 'Open Sans';
    text-transform: uppercase;
    text-decoration: none;
}

    #breadcrumb a.current, #breadcrumb a:hover {
        color: #9fa0a0;
        text-decoration: none;
    }

#form-container {
    background: #eee;
    background: rgba(225, 225, 225, 0.5);
    border-top: 1px solid #eee;
    width: 100%;
    padding: 30px;
}

#form-content {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 30px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    #form-container {
        background: #fff;
        border-top: 1px solid #333;
        padding: 5px;
    }

    #form-content {
        border: 0;
        padding: 0;
        padding-left: 10px;
    }

    .form-head {
        padding: 0;
    }

    .pull-left-xs {
        float: left;
        max-width: 180px;
    }
}

.center-in-row {
    float: none;
    margin: 0 auto;
    text-align: center;
}

.form-description {
    font-size: 17px;
    color: #666;
}

.form-head {
    color: #204880;
    font-family: 'Open Sans';
    font-size: 21px;
    padding: 20px;
}

#form-shadow {
    position: relative;
    top: -42px;
    left: -29px; /*compensate padding*/
}

.hint-btn {
    height: 13px;
    width: 13px;
    border: 1px solid #9fa0a0;
    border-radius: 50%;
    background: #ccc;
    line-height: 13px;
    font-size: 13px;
    text-align: center;
    color: #1f467d;
    display: inline;
    padding: 0;
    margin: 0;
}

.hint-bubble {
    width: 150px;
    position: fixed;
    display: none;
    border: 1px solid #9fa0a0;
    border-radius: 4px;
    z-index: 2;
    background: #fff;
    padding: 5px;
}

/*div.col-xs-6 {
    height: 60px;
    line-height: 60px;
    vertical-align: middle
}*/

@media (max-width: 768px) {
    /*div#top-menu {
        background: #fff;
        top: 0;
        height: 60px;
        padding-top: 10px;
        position: absolute;
    }*/

    #form-container {
        margin-top: 70px;
    }

    #side-menu {
        position: absolute;
        top: 60px;
        left: 0;
        background: #fff;
    }
}

/*
    End
    Form-page.css
*/

/*
    Start
    form.css
*/

.form-horizontal .form-group {
    margin-left: 0;
}

.cp-input-text {
    width: 100%;
    background: transparent;
    border: 1px solid #ccc;
    font-family: 'ubuntu-light';
    font-size: 17px;
    color: #000;
    padding-left: 20px;
    border-radius: 4px;
}

.cp-input-multiline {
    width: 100%;
    max-width: 320px;
    height: 250px;
    background: transparent;
    border: 1px solid #ccc;
    font-family: 'ubuntu-light';
    font-size: 17px;
    color: #000;
    padding-left: 20px;
    border-radius: 4px;
}

.cp-input-small {
    width: 160px;
    height: 40px;
    background: transparent;
    border: 1px solid #ccc;
    font-family: 'ubuntu-light';
    font-size: 17px;
    color: #000;
    padding-left: 20px;
    border-radius: 4px;
}

.cp-form-label {
    color: #444444;
    font-size: 13px;
    font-family: 'Open Sans';
    text-transform: uppercase;
}


@media (max-width: 768px) {
    .cp-input-text {
        padding-left: 5px;
    }

    .cp-input-multiline {
        width: 90%;
        padding-left: 5px;
    }
}

@media (max-width: 992px) and (min-width: 768px) {
    .cp-input-text {
        padding-left: 10px;
    }

    .cp-input-multiline {
        min-width: 120px;
        max-width: 320px;
        width: 90%;
        padding-left: 10px;
    }
}

/*
    End
    form.css
*/


/*
    Start 
    side-menu.css
*/

#side-menu a {
    font-family: 'ubuntu';
    font-size: 16px;
    color: #666666;
    vertical-align: middle;
    margin-left: 10px;
}

    #side-menu a.active {
        font-weight: bold;
        color: #204880;
    }

    #side-menu a:last-child.active {
        font-weight: bold;
        color: #204880;
    }

.first-side-menu-row {
    margin-top: 30px;
}

@media (max-width: 768px) {
    .first-side-menu-row {
        margin-top: 0;
    }

    .first-side-menu-row-xs {
        margin-top: 40px;
    }
}

@media (max-width: 1200px) {
    .first-side-menu-row {
        margin-top: 10px;
    }
}

/*
    End
    side-menu.css
*/

/*
    Start
    top-menu-white.css
*/

#top-menu {
    color: #bbb;
    margin-bottom: 4%;
}

.greeting-text {
    color: #20487f;
    font-family: 'Open Sans';
    font-size: 17px;
}

.logout-btn {
    color: #666;
    font-size: 16px;
    border: 0;
    background: url('Images/logout.gif') right 3px top 5px no-repeat #fff;
    width: 100px;
}

/*
    End
    top-menu-white.css
*/

/*
    Start
    font.css
*/

@font-face {
    font-family: 'ubuntu';
    src: url('../fonts/ubuntu-r.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ubuntu';
    src: url('../fonts/ubuntu-ri.ttf');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'ubuntu';
    src: url('../fonts/ubuntu-b.ttf');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'ubuntu';
    src: url('../fonts/ubuntu-bi.ttf');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'ubuntu-light';
    src: url('../fonts/ubuntu-l.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ubuntu-light';
    src: url('../fonts/ubuntu-li.ttf');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/ubuntu-m.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/ubuntu-mi.ttf');
    font-weight: normal;
    font-style: italic;
}

/*
    End
    font.css
*/

/*
    Start
    EditAccount
*/

div.left {
    text-align: right;
    padding-right: 0;
}

div.right {
    text-align: left;
}

.cp-input-text {
    padding-left: 10px;
    height: 50px;
}

.cp-input-phone {
    max-width: 240px;
    height: 40px;
    background: transparent;
    border: 1px solid #ccc;
    font-family: 'ubuntu-light';
    font-size: 17px;
    color: #000;
    padding-left: 10px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    padding-left: 48px;
}

.cp-input-small {
    max-width: 120px;
    padding-left: 10px;
}

.cp-input-tiny {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid #ccc;
    font-family: 'ubuntu-light';
    font-size: 17px;
    color: #000;
    padding-left: 10px;
    border-radius: 4px;
}

.cp-input-smaller {
    width: 80px;
    height: 40px;
    background: transparent;
    border: 1px solid #ccc;
    font-family: 'ubuntu-light';
    font-size: 17px;
    color: #000;
    padding-left: 10px;
    border-radius: 4px;
}

.calendar-add-on {
    display: inline-block !important;
}

.table-condensed {
    background: #fff;
}

@media (max-width: 768px) {
    div.left {
        text-align: left;
    }

    .cp-input-text {
        width: 100%;
    }

    .form-group {
        margin-bottom: 0;
    }

    .cp-input-smaller {
        width: 90%;
    }
}

.custom-checkbox > [type="checkbox"],
.custom-checkbox > label {
    margin-bottom: 0px !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .custom-checkbox > [type="checkbox"]:not(:checked),
    .custom-checkbox > [type="checkbox"]:checked {
        position: absolute;
        left: -9999px;
    }

        .custom-checkbox > [type="checkbox"]:not(:checked) + label,
        .custom-checkbox > [type="checkbox"]:checked + label {
            position: relative;
            padding-left: 22px;
            cursor: pointer;
        }

            .custom-checkbox > [type="checkbox"]:not(:checked) + label:before,
            .custom-checkbox > [type="checkbox"]:checked + label:before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                margin-top: -9px;
                width: 17px;
                height: 17px;
                border: 1px solid #ddd;
                background: #ffffff;
                border-radius: 2px;
            }

            .custom-checkbox > [type="checkbox"]:not(:checked) + label:after,
            .custom-checkbox > [type="checkbox"]:checked + label:after {
                font: normal normal normal 12px/1 'Glyphicons Halflings';
                content: '\e013';
                position: absolute;
                top: 50%;
                margin-top: -7px;
                left: 2px;
                color: #e9a1a2;
                xtransition: all .2s;
            }

            .custom-checkbox > [type="checkbox"]:not(:checked) + label:after {
                opacity: 0;
                transform: scale(0);
            }

            .custom-checkbox > [type="checkbox"]:checked + label:after {
                opacity: 1;
                transform: scale(1);
            }

    .custom-checkbox > [type="checkbox"][data-indeterminate] + label:after,
    .custom-checkbox > [type="checkbox"][data-indeterminate] + label:after {
        content: '\2212';
        left: 2px;
        opacity: 1;
        transform: scale(1);
    }

    .custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:before,
    .custom-checkbox > [type="checkbox"]:disabled:checked + label:before {
        box-shadow: none;
        background-color: #eeeeee;
        border-color: #eeeeee;
        cursor: not-allowed;
        opacity: 1;
        color: #dadada;
    }

    .custom-checkbox > [type="checkbox"]:disabled:checked + label:after {
        color: #dadada;
        cursor: not-allowed;
    }

    .custom-checkbox > [type="checkbox"]:disabled + label {
        color: #aaa;
        cursor: not-allowed;
    }

    .custom-checkbox > [type="checkbox"]:checked:focus + label:before,
    .custom-checkbox > [type="checkbox"]:not(:checked):focus + label:before {
        border: 1px solid #66afe9;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }

    .custom-checkbox > label:hover:before {
        border: 1px solid #88D2FF !important;
    }

    .custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:hover:before,
    .custom-checkbox > [type="checkbox"]:disabled:checked + label:hover:before {
        border: 1px solid #E4E4E4 !important;
    }

input:focus::-webkit-input-placeholder {
    color: transparent;
}

.field {
    transition-property: height, border-width;
    transition-duration: 0.2s;
    transition-timing-function: ease-in;
}

    .field input,
    .field select {
        transition: height 0.2s ease-in;
        width: 100%;
        height: 100%;
        width: 100%;
    }

    .field label {
        transition: max-height 0.2s ease-in;
    }

    .field input[placeholder]::-webkit-input-placeholder {
        transition: opacity 0.2s ease-in;
    }

.field {
    position: relative;
    height: 50px;
    border: 1px solid #aaa;
    -ms-border-radius: 4px;
    border-radius: 4px;
    display: block;
}

    .field input {
        border: none;
        box-sizing: border-box;
        padding-left: 6px;
        width: 100%;
    }

    .field label {
        padding-left: 5px;
        height: 0;
        overflow: hidden;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        font-size: 11px;
        color: #fff;
        background: #aaa;
        margin-bottom: 0;
        margin-top: 10px;
    }

    .field.show-label {
        height: 45px;
        border-bottom-width: 0;
    }

        .field.show-label input {
            height: 70%;
        }

        .field.show-label select {
            height: 71%;
            width: 100%;
        }



        .field.show-label label {
            height: auto;
            white-space: nowrap;
        }

#MainContent_AccountContent_ddownIdType {
    width: 100%;
}

@media (min-width:769px) {
    .dob-field {
        padding: 6px 19px;
    }
}

@media (max-width: 768px) {
    .dob-field {
        padding: 6px 0;
    }

    .field.show-label select {
        padding: 6px 0;
    }

    #MainContent_AccountContent_ddownIdType {
        width: 100%;
    }

    .field input {
        width: 100%;
    }

    .dob {
        display: inline-block;
    }
}

@media (max-width: 400px) {
    .dob-field {
        padding: 6px 0;
    }

    .field.show-label select {
        padding: 6px 0;
    }

    #MainContent_AccountContent_ddownIdType {
        width: 100%;
    }

    .field input {
        width: 100%;
    }

    .dob {
        display: block;
        width: 100%;
    }
}

/*.country-field{
    width:55px;
}*/

@media (max-width: 320px) {
    #MainContent_AccountContent_ddownIdType {
        width: 100%;
    }

    .field input {
        width: 100%;
    }

    .dob {
        display: block;
        width: 100%;
    }
}

/*
    End
    EditAccount
*/

/*
    START
    Overlay.css
*/



.overlay-field {
    border: #666 solid 2px;
    border-radius: 2px;
}

.overlay-cancel {
    text-decoration: underline;
    font-weight: bold;
    color: #20487f;
    font-size: 18px;
}

.overlay-text {
    width: 80%;
    color: #666666;
    font-size: 17px;
}

.overlay-card-text {
    background: url(Images/card_background.gif);
    height: 43px;
    width: 250px;
    margin-bottom: 10px;
    padding-top: 8px;
}

.overlay-buttons {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.data-group {
    margin-top: 20px;
}

.data-text {
    font-size: 17px;
    color: #666;
}

.data-caption {
    font-size: 17px;
    /*color: #de555a;*/
    color: #010111;
    text-transform: uppercase;
}

.data-value {
    font-weight: bold;
    color: #20487f;
    font-size: 18px;
    margin-left: 0;
    padding-left: 0;
}

.data-value-wrap {

    word-wrap : break-word
}

.data-data {
    font-weight: bold;
    color: black;
    font-size: 14px;
    margin-left: 0;
    padding-left: 0;
}

.UpgradeHighlight {
    font-weight: bold;
    background-color: yellow;
}

.table-row-width {
    width: 50px;
}

.data-value a {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .overlay-container {
        padding: 15px 0 0 25px;
    }
}

@media (max-width: 380px) {
    .overlay-card-text {
        width: 95%;
    }
}

/*
    END
    Overlay.css
*/

/* 
   Start Activation 
*/

#div-logo {
    min-width: 70px;
}


/*.mob-field {
    width: 100px !important;
}

.yob-field {
    width: 100px !important;
}

.dob-field {
    width: 100px !important;
}*/

/* End Activation*/


/* WebScr*/
#pnlError {
    display: none;
}

#Div11 > span > img {
    height: 42px;
    width: 152px;
}

#pnlError > table {
    padding: 2px;
}

    #pnlError > table > td {
        padding-bottom: 18px;
    }

#pnlThY {
    display: none;
}

    #pnlThY > table > td {
        padding-bottom: 18px;
    }

#Div7 > span > img {
    height: 42px;
    width: 152px;
}

.frm1-table {
    width: 1024px;
    border: 0;
    text-align: center;
    padding: 0;
}

#Table_01 {
    border: 0;
    text-align: center;
    padding: 0;
}

    #Table_01 > tr > td {
        width: 818px;
        height: 13px;
    }

.table-100 {
    width: 100%;
    border: 0;
    padding: 0;
}

.valign-top {
    vertical-align: top;
}

.padding-15 {
    padding: 15px 0 15px 0;
}

.td-special {
    height: 522px;
    background-color: #FFFFFF;
}

/* - WebScr -*/

/* ContactUs*/
.cp-input-text {
    height: 50px;
}

.cursor-position {
    padding-top: 0;
    padding-left: 0;
}
/* End of Contactus*/

/* TopUpCard css*/
.agreement-terms {
    font-weight: normal;
    font-size: 12px;
    text-align: justify;
}

.align-text {
    text-align: justify;
}

/* End of TopUpCard */

/* Start of Popup modal*/
.ThYClaimPopup {
    background-image: url(/images/ThankYou.png);
    width: 550px;
    height: 350px;
}

.ClaimHeader {
    padding: 20px 0 0 30px;
}

.ThYPopupHeader {
    padding: 25px 0 20px 30px;
    font-family: Verdana;
    font-size: 14px;
}

.ThYPopupBody {
    padding-left: 30px;
    padding-right: 30px;
}

.ModalPopupBG {
    background-color: #ffffff;
    filter: alpha(opacity=70);
    -ms-opacity: 0.7;
    opacity: 0.7;
}

.DisplayNone {
    display: none;
}
/* end of Popup modal*/
.left-space-0 {
    padding-left: 0;
    margin-left: 0;
}

.message-bg {
    background: #f9f497;
    border: #1c1a1a 1px solid;
    -ms-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px 1px #000000;
    -webkit-box-shadow: 0 1px 2px 1px rgba(0,0,0,.05);
    -ms-box-shadow: 0 1px 2px 1px #000000;
    -ms-box-shadow: 0 1px 2px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 2px 1px #000000;
    box-shadow: 0 1px 2px 1px rgba(0,0,0,.05);
    padding: 16px 16px 16px;
    /*width: 845px;*/
}

/*Registration page*/
/*form styles*/
#msform {
    width: 100%;
    margin: 80px auto 35px auto;
    text-align: center;
    position: relative;     
}

    /*#msform fieldset {
        background: white;
        border: 0 none;
        border-radius: 3px;
        box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
        padding: 20px 30px;
        box-sizing: border-box;
        width: 80%;
        margin: 0 10%;
        /*stacking fieldsets above each other
        position: relative;
    }
        Hide all except first fieldset
        #msform fieldset:not(:first-of-type) {
            display: none;
        }
    inputs
    #msform input, #msform textarea {
        padding: 15px;
        border: 1px solid #ccc;
        border-radius: 3px;
        margin-bottom: 10px;
        width: 100%;
        box-sizing: border-box;
        font-family: montserrat;
        color: #2C3E50;
        font-size: 13px;
    }
    buttons
    #msform .action-button {
        width: 100px;
        background: #27AE60;
        font-weight: bold;
        color: white;
        border: 0 none;
        border-radius: 1px;
        cursor: pointer;
        padding: 10px 5px;
        margin: 10px 5px;
    }

        #msform .action-button:hover, #msform .action-button:focus {
            box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
        }
headings
.fs-title {
    font-size: 15px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
}

.fs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}*/
/*progressbar*/
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;    
}

    #progressbar li {
        list-style-type: none;
        color:dimgrey;   
        text-transform: uppercase;
        text-align:center;        
        font-size: 13px;
        width: 25%;
        float: left;
        position: relative;
        padding-left:0;
    }

        #progressbar li:before {
            content: counter(step);
            counter-increment: step;
            width: 20px;
            line-height: 20px;
            display: block;
            font-size: 10px;
            color: #333;
            background: white;
            border-radius: 3px;
            margin: 0 auto 5px auto;
        }
        /*progressbar connectors*/
        #progressbar li:after {
            content: '';
            width: 100%;
            height: 2px;
            background: white;
            position: absolute;
            left: -50%;
            top: 9px;
            z-index: -1; /*put it behind the numbers*/
        }

        #progressbar li:first-child:after {
            /*connector not needed before the first step*/
            content: none;
        }
        /*marking active/completed steps green*/
        /*The number of the step and the connector before it = green*/
        #progressbar li.active:before, #progressbar li.active:after {
            background: #27AE60;
            color: white;
        }

/*seb*/
  .capchacontainer { 
    width:320px;
    height: 80px;

    /*width:320px;
    height: 80px;
    background:with;
    background-color:#fff;
    font-family: 'ubuntu-light';
    font-size: 17px;
    padding-left: 20px;
    border: 3px solid #4c235d; 
    border-radius: 25px;*/ 
  }

  /*seb*/
  .grecaptcha-badge { 
/*transform:scale(1);
-webkit-transform:scale(1);*/
  }

  /*seb*/

  .top-logo
  {         
            display:none;
            
            /*min-height:145px;
            background-image: url('Images/Logo/Nothing_top.png'); 
            background-color:transparent;
            background-position: center; 
            background-repeat: no-repeat; 
            background-size:contain;*/
   }
  .bottom-logo
  {         min-height:45px; 
            
            background-image: url('Images/Logo/Nothing-buttom.png'); 
            background-color:transparent;
            background-position: center; 
            background-repeat: no-repeat; 
            background-size: contain;
            margin-bottom:0px;
            margin-top:20px;
   }

/*sc---->Select Card*/
.top-logo-sc {
    background-image: url('Content/Images/CardportalLogo.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.select-comment-sc {
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 10px;
    text-align: center;
}

.select-comment-text-sc {
    font-family: 'ubuntu-light';
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #204880;
}

.form-section-sc {
    border: 10px solid #204880;
    padding: 20px;
    height: 400px;
    font-family: 'ubuntu-light';
    font-size: 21px;
    padding: 0;
}

.visa-card-logo-sc {
    height: 50px;
    background-image: url('Content/Images/Logo/Visa.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.master-card-logo-sc {
    height: 60px;
    background-image: url('Content/Images/Logo/MC_Logo.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.card-number-lables-sc {
    margin-top: 15px;
    width: 100%;
    height: 35px;
    border: 3px solid #204880;
    border-radius: 25px;
    padding: 0 10px;
    align-content: center;
    align-items: center;
}

.access-code-sec-sc {
    padding-top: 70px;
    height: 50px;
    text-align: center;
}

.access-code-text-sc {
    font-family: 'ubuntu-light';
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: #204880;
    margin-top: 15px;
}

.List-cards-text-sc {
    font-family: 'ubuntu-light';
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    color: #204880;
}

.drpCards-sc {
    font-family: 'ubuntu-light';
    float: left;
    font-weight: 700;
    font-size: 16px;
    border: none;
    width: 100%;
    padding-top: 3px;
    align-content: center;
    color: #204880;
}


.input-text-sc {
    margin-top: 15px;
    width: 230px;
    height: 35px;
    border: 3px solid #204880;
    border-radius: 25px;
    padding: 0 10px;
}

    .input-text-sc:focus {
        outline: none !important;
    }

.btn-rows-sc {
    margin: 30px auto 0 auto;
    padding: 0;
    height: 35px;
    width: 150px;
}

.input-rows-sc {
    margin: 10px auto 0 auto;
    padding: 0;
    height: 35px;
    width: 215px;
    align-content: center;
}

.message-rows-sc {
    margin: 10px auto 0 auto;
    padding: 0;
    height: 35px;
    width: 250px;
    align-content: center;
}

.submit-btn-sc {
    padding-top: 5px;
    background-color: #204880;
    color: #FFF;
    font-family: 'ubuntu-light';
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    border: 0;
    border-radius: 25px;
}

    .submit-btn-sc :focus {
        outline: none !important;
        color: #fff;
        text-decoration: none;
    }

.margin-padding-0-sc {
    margin: 0;
    padding: 0;
}
#MainContent_buttonFaq {
    display: none;
}




/* MyCard CSS Start */
@import url('https://fonts.googleapis.com/css2?family=Bitter&family=Work+Sans&display=swap');

:root {
    /*********COLORS********/
    --clr-primary-100: #e6f6f1;
    --clr-primary-200: #9CFCDF;
    --clr-primary-300: #05C78D;
    --clr-primary-400: #04a777; /*Jade*/
    --clr-primary-500: #048B63;
    --clr-secondary-400: #2a73e8; /*Zircon*/
    --clr-secondary-600: #01153a; /*Dark Sapphire*/
    --clr-secondary-800: #161925; /*Onyx*/
    --clr-accent-light-100: #FFF1D6;
    --clr-accent-light-200: #FFEBC2;
    --clr-accent-light-300: #FFD685;
    --clr-accent-light-400: #ffc857; /*Gold*/
    --clr-accent-light-500: #FFBB33;
    --clr-accent-dark: #7a73ff; /*Jasper*/
    --clr-important-200: #FEC3C6;
    --clr-important-300: #FB4B54;
    --clr-important-400: #fb3640; /*Fire Opal*/
    --clr-important-500: #c92b33;
    --clr-neutral-100: #eaeaea;
    --clr-neutral-200: #e0e0e0;
    --clr-neutral-300: #d5d5d5;
    --clr-neutral-400: #cccccc;
    --clr-neutral-500: #999999;
    --clr-neutral-600: #666666;
    --clr-neutral-700: #505050;
    --clr-neutral-800: #424242;
    --clr-neutral-900: #333333;
    /*********FONTS********/
    --ff-headers: 'Bitter', serif;
    --ff-body: 'Work Sans', 'Open Sans', sans-serif;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 62.5%;
}

body {
    background-color: #ffffff;
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    color: var(--clr-secondary-600);
    font-family: var(--ff-body);
}
/* ================================
    Default styles Project Light
   ================================ */

/* HEADER */
.pl-gen-header {
    width: 100%;
    border-bottom: 8px solid var(--clr-primary-400);
    text-align: center;
    padding: 40px 0;
}

    .pl-gen-header img {
        max-width: 444px;
        max-height: 100px;
    }

/* CONTENT */
.pl-gen-content {
    max-width: 720px;
    display: grid;
    margin: 0 auto;
    row-gap: 40px;
    column-gap: 10px;
    padding: 40px 30px 10px;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

    .pl-gen-content img {
        height: auto;
        width: 100%;
    }

    .pl-gen-content h1 {
        grid-column: 1/3;
        font-family: 'bitter', sans-serif;
        color: var(--clr-primary-400);
        font-size: 25pt;
        font-weight: 400;
    }

    .pl-gen-content section {
        grid-column: 1/3;
        background-color: var(--clr-primary-400);
        padding: 30px;
        display: grid;
        gap: 20px;
        text-align: center;
    }

        .pl-gen-content section * {
            font-family: 'work-sans', sans-serif;
            color: #ffffff;
            font-size: 12pt;
        }

        .pl-gen-content section button {
            background: var(--clr-primary-400);
            border: 1px solid #ffffff;
            border-radius: 40px;
            padding: 12px;
            font-size: 11pt;
            max-width: 216px;
            width: 80%;
            cursor: pointer;
            margin: 0 auto;
            transition: all .25S ease-in-out;
        }

            .pl-gen-content section button:hover {
                background: var(--clr-primary-500);
            }

    .pl-gen-content > p {
        font-family: 'work-sans', sans-serif;
        color: var(--clr-secondary-600);
        font-size: 12pt;
        grid-column: 1/3;
    }

/* FOOTER */
.pl-gen-footer {
    max-width: 720px;
    display: grid;
    margin: 0 auto;
    gap: 5px;
    padding: 0 30px 40px;
}

    .pl-gen-footer p, .pl-gen-footer a {
        font-family: 'work-sans', sans-serif;
        color: var(--clr-secondary-600);
        font-size: 8pt;
    }

    .pl-gen-footer a {
        color: var(--clr-secondary-400);
    }

@media screen and (max-width: 640px) {
    .pl-gen-header {
        padding: 20px 0;
    }

        .pl-gen-header img {
            width: 60%;
            max-height: inherit;
            max-width: inherit;
        }

    .pl-gen-content {
        row-gap: 10px;
    }

        .pl-gen-content img {
            grid-column: 1/3;
        }
}
/* MyCard CSS End */
