@font-face {
    font-family: 'rsuregular';
    src: url('../fonts/rsu_regular-webfont.eot');
    src: url('../fonts/rsu_regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/rsu_regular-webfont.woff2') format('woff2'), url('../fonts/rsu_regular-webfont.woff') format('woff'), url('../fonts/rsu_regular-webfont.ttf') format('truetype'), url('../fonts/rsu_regular-webfont.svg#rsuregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'rsubold';
    src: url('../fonts/rsu_bold-webfont.eot');
    src: url('../fonts/rsu_bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/rsu_bold-webfont.woff2') format('woff2'), url('../fonts/rsu_bold-webfont.woff') format('woff'), url('../fonts/rsu_bold-webfont.ttf') format('truetype'), url('../fonts/rsu_bold-webfont.svg#rsubold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'db_thaitext_xregular';
    src: url('../fonts/db_thaitext_x-webfont.eot');
    src: url('../fonts/db_thaitext_x-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/db_thaitext_x-webfont.woff') format('woff'), url('../fonts/db_thaitext_x-webfont.ttf') format('truetype'), url('../fonts/db_thaitext_x-webfont.svg#db_thaitext_xregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'db_thaitext_xregular';
    src: url('../fonts/db_thaitext_x-webfont.eot');
    src: url('../fonts/db_thaitext_x-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/db_thaitext_x-webfont.woff') format('woff'), url('../fonts/db_thaitext_x-webfont.ttf') format('truetype'), url('../fonts/db_thaitext_x-webfont.svg#db_thaitext_xregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'db_thaitext_xregular';
    src: url('../fonts/DBThaiTextX-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/DBThaiTextX-Bold.woff') format('woff'), url('DBThaiTextX-Bold.ttf') format('truetype'), url('../fonts/DBThaiTextX-Bold.svg#DBThaiTextX-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}


a i, i {
    color: #98877F;
}

a:hover i {
    color: #6C5850;
}

a:hover, a:visited, a:focus {
    text-decoration: none;
}

html {
    position: relative;
    min-height: 100%;
}

.highcharts-title {
    font-family: 'db_thaitext_xregular',"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 40px;
}

body {
    /*font-family: 'db_thaitext_xregular',"Helvetica Neue", Helvetica, Arial, sans-serif;*/
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    color: #333333 !important;
}

.kbank-header {
    padding-top: 7px;
    height: 72px;
    box-sizing: border-box;
}

.section-banner {
    -webkit-box-shadow: inset 0px 5px 10px -5px rgba(0,0,0,0.35);
    -moz-box-shadow: inset 0px 5px 10px -5px rgba(0,0,0,0.35);
    box-shadow: inset 0px 5px 10px -5px rgba(0,0,0,0.35);
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}


h1, .h1 {
    margin: 15px 0 15px;
}

h2, .h2 {
    font-weight: bold;
    margin: 15px 0;
    color: #444;
}

h3, .h3 {
    font-weight: bold;
    margin: 0;
}

h1 > small, .h1 > small {
    display: block;
    color: #FFFFFF;
    margin-top: -5px;
    font-family: 'db_thaitext_xregular';
    font-size: 24px;
    letter-spacing: normal;
}

a.link-green {
    background-color: #057722;
    font-size: 14px;
    color: #FFFFFF;
    padding: 5px 10px;
}
/*
 * Custom button
 * -------------------------------------------------------- 
 */
.btn {
    padding: 10px 15px;
    line-height: 1.3;
}

.btn-retirement {
    padding: 10px 15px;
    line-height: 1.3;
}

.btn.btn-green {
    line-height: 3;
}

    .btn.btn-green:hover {
        color: #FFFFFF;
        background-color: #057722;
        border-color: #057722;
    }

.btn-sm, .btn-xs {
    font-family: inherit;
    font-size: 20px;
    padding: 4px 10px 0px;
    line-height: 1.1;
}

.btn.btn-o-brown {
    color: #877167;
    border: 1px solid #877167;
    background: white;
}

    .btn.btn-o-brown i.fa {
        font-size: 80%;
    }
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    /* max-width: 280px;*/
}

section {
    background-color: #ddd;
    padding: 20px 0;
}

footer {
    padding-top: 20px;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 112px;
}

    footer p {
        font-size: 12px;
        padding: 0;
        margin: 3px 0 0;
        line-height: 15px;
    }

    footer a, footer p {
        color: #666;
    }

        footer a:hover {
            color: #666;
        }

.text-small {
    font-size: 13px;
    line-height: 1em;
}

.text-extra-small {
    font-size: 12px;
    line-height: 1.5em;
}

.text-xxs {
    font-size: 13px;
    line-height: 1em;
}

.text-big {
    font-size: 18px;
    line-height: 28px;
}

.text-number {
    font-size: 18px;
    line-height: 30px;
}

.text-box {
    height: 100px;
    /*margin-top:20px;*/
}

.text-green {
    color: #019026;
}

.text-brown {
    color: #75655A;
}
/*******************************/
.box-red-head {
    height: 60px;
    border-radius: 5px 0 0 5px;
    padding: 10px;
    text-align: center;
    color: white;
    background-color: #C33D3D;
}

.box-red-center {
    height: 60px;
    padding: 10px;
    text-align: left;
    color: white;
    background-color: #B61212;
    border-right: 1px solid #ffffff;
}

.box-red-foot {
    border-radius: 0 5px 5px 0;
    height: 60px;
    padding: 10px;
    text-align: center;
    color: white;
    background-color: #B61212;
    padding: 15px 0;
}
/*******************************/
.box-green-head {
    height: 60px;
    border-radius: 5px 0 0 5px;
    padding: 10px;
    text-align: center;
    color: white;
    background-color: #34a651;
}

.box-green-center {
    height: 60px;
    padding: 10px;
    text-align: left;
    color: white;
    background-color: #019026;
    border-right: 1px solid #ffffff;
}

.box-green-foot {
    border-radius: 0 5px 5px 0;
    height: 60px;
    padding: 10x;
    text-align: center;
    color: white;
    background-color: #019026;
    padding: 15px 0;
}

.box-green-body {
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #ffffff;
    padding: 40px 20px;
    text-align: center;
    color: white;
    font-weight: bold;
    background-color: #34a651;
}

    .box-green-body i {
        color: #ffffff;
    }

.box-green-footer {
    border-radius: 0 0 5px 5px;
    padding: 10px 20px;
    text-align: center;
    font-weight: bold;
    color: white;
    background-color: #019026;
}


.box {
    border-radius: 5px;
    padding: 10px 20px;
}

label.box {
    font-weight: normal;
}

    label.box:hover {
        background-color: #eee;
        width: 100%;
    }

label.active {
    background-color: #eee;
}

/* Page Header */
.page-header {
    display: block;
    width: 100%;
    position: relative;
    margin-top: 0px;
    color: #FFFFFF;
    height: 96px;
    overflow: hidden;
}

.page-header-quiz {
    background: url('../images/bg-2.jpg') no-repeat top right;
    background-color: #6B625D;
}

.page-header-retirement {
    background: url('../images/bg-1.jpg') no-repeat top right;
    background-color: #6A615C;
}

.page-header-no-small {
    padding-top: 8px;
}


.page-header .btn-back {
    float: left;
    padding: 32px 12px 0 0;
    margin-top: -15px;
    height: 96px;
}

.page-header .top-shadow, .home-banner .top-shadow {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.35);
}

.page-header-no-small .btn-back {
    padding-top: 21px;
}

/* Home banner */
.home-banner {
    display: block;
    width: 100%;
    position: relative;
    margin-top: 0px;
    margin-bottom: 20px;
    color: #333;
    overflow: hidden;
    background: url('../Images/bg-home.jpg') top center no-repeat;
    background-size: cover;
    padding: 20px 0 0;
    color: #FFFFFF;
}

    .home-banner h1 {
        font-weight: bold;
        letter-spacing: 1px;
    }

    .home-banner .image-wraper-holder {
        position: absolute;
        width: 80%;
        bottom: 0;
        left: 50%;
        padding: 15px 15px 0;
        box-sizing: border-box;
    }

        .home-banner .image-wraper-holder .image-holder {
            position: relative;
            left: -50%;
        }

            .home-banner .image-wraper-holder .image-holder img {
                width: 100%;
            }

/* Container with footer */
.container-with-footer {
    padding-bottom: 112px;
}

/*
 * Row with equal height columns
 * --------------------------------------------------
 */
.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

/*
 * Asset table
 * --------------------------------------------------
 */
.table-asset {
    border: 1px solid #fff;
    border-spacing: 0px;
    border-collapse: collapse;
    margin: 0 0 20px;
}

    .table-asset thead {
        font-size: 18px;
    }

    .table-asset tbody + tbody {
        border: inherit;
    }

    .table-asset thead th {
        line-height: 1em !important;
        padding: 6px 1px !important;
        border: 1px solid #bbb;
        margin: 0;
        text-align: center;
        vertical-align: middle !important;
        background: #f5f5f5;
    }

    .table-asset tbody tr td, .table-asset thead tr th {
        line-height: 1em !important;
        padding: 11px 5px 8px;
        border-left: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #f5f5f5;
        margin: 0;
        font-size: 12px;
        vertical-align: middle !important;
    }

        .table-asset thead tr th.header-cell-hl {
            padding: 0;
            color: #333;
            background: #c6d1d4;
        }

    .table-asset tbody tr#row-recommended td.cell-hl {
        padding: 0;
        color: #333;
        background: #c6d1d4;
    }

    .table-asset tbody tr#row-asset-allocation td.cell-hl {
        padding: 0;
        color: #333;
        background: #c6d1d4;
    }

    .table-asset tbody tr.bm-with-value-row td.cell-hl {
        color: #333;
        background: #c6d1d4;
    }

    .table-asset tbody tr td.cell-hl {
        color: #333;
        background: #c6d1d4;
        /*background: #739ba5;*/
    }

    .table-asset tbody tr td:first-child, .table-asset thead tr th:first-child {
        border-left: 1px solid #fff;
    }

    .table-asset tbody tr td:last-child, .table-asset thead tr th:last-child {
        border-right: 1px solid #fff;
    }

    .table-asset tbody > tr > td.cell-color {
        border-right: none;
        border-bottom: none;
        width: 6px;
        padding: 0 !important;
    }

        .table-asset tbody > tr > td.cell-color + td {
            border-left: none;
        }
    /*.table-asset > tbody[id^=table-body] > tr:nth-child(odd) {
   background-color: #f5f5f5;
}*/
    .table-asset > a:hover {
        text-decoration: none;
    }

#row-recommended {
    /*background: #1c7941;*/
    background: #019025;
    color: #fff;
}

#row-asset-allocation {
    background: #ccc;
    color: #333 !important;
}

    #row-asset-allocation a {
        background: #ccc;
        color: #555 !important;
    }

.bm-with-value-row {
    color: #000;
    background: #f0f0f0 !important;
}

#row-fund {
    background: #c0f3ac;
    color: #024f01 !important;
}

    #row-fund a {
        color: #024f01 !important;
    }

.btn-asset-group {
    position: relative;
    display: block;
    color: #333;
}

    .btn-asset-group:hover, .btn-asset-group:visited, .btn-asset-group:focus {
        color: #000;
        text-decoration: none !important;
    }

    .btn-asset-group > span {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 14px;
    }



.bg-yellow {
    background-color: #ffc158;
}

.bg-orange {
    background-color: #fd943f;
}

.bg-red {
    background-color: #ed1c24;
}

.bg-dark-red {
    background-color: #9e0b0f;
}

.bg-violet {
    background-color: #a864a8;
}

.bg-dark-violet {
    background-color: #630460;
}

.bg-green {
    background-color: #1fce6f;
}

.bg-gray {
    background-color: #ebebeb;
}

.bg-soft-gray {
    background-color: #f2f2f2;
}

.bs-example-bg-classes p {
    padding: 5px 10px;
}

/********
* Gray table
*/
.table-gray {
    margin: 0px;
    padding: 0px;
    width: 100%;
    border: 2px solid #aaaaaa;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
}

    .table-gray table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    .table-gray tr:last-child td:last-child {
        -moz-border-radius-bottomright: 5px;
        -webkit-border-bottom-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .table-gray tr:last-child td:first-child {
        -moz-border-radius-bottomleft: 5px;
        -webkit-border-bottom-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

    .table-gray td.cell-gray {
        background-color: #eeeeee;
    }

    .table-gray td.text-pink {
        color: #ff8383;
    }

    .table-gray td {
        vertical-align: middle;
        border: 2px solid #aaaaaa;
        border-width: 0px 2px 1px 0px;
        text-align: center;
        padding: 7px;
        font-weight: normal;
        color: #555555;
    }

    .table-gray tr:last-child td {
        border-width: 0px 2px 0px 0px;
    }

    .table-gray tr td:last-child {
        border-width: 0px 0px 1px 0px;
    }

    .table-gray tr:last-child td:last-child {
        border-width: 0px 0px 0px 0px;
    }

    .table-gray tr:first-child td {
        background: -o-linear-gradient(bottom, #aaaaaa 5%, #aaaaaa 100%);
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #aaaaaa), color-stop(1, #aaaaaa) );
        background: -moz-linear-gradient( center top, #aaaaaa 5%, #aaaaaa 100% );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aaaaaa", endColorstr="#aaaaaa");
        background: -o-linear-gradient(top,#aaaaaa,aaaaaa);
        background-color: #aaaaaa;
        border: 0px solid #aaaaaa;
        text-align: left;
        border-width: 0px 0px 2px 2px;
        font-weight: bold;
        font-size: 15px;
        color: #ffffff;
    }

    .table-gray tr:first-child:hover td {
        background: -o-linear-gradient(bottom, #aaaaaa 5%, #aaaaaa 100%);
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #aaaaaa), color-stop(1, #aaaaaa) );
        background: -moz-linear-gradient( center top, #aaaaaa 5%, #aaaaaa 100% );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aaaaaa", endColorstr="#aaaaaa");
        background: -o-linear-gradient(top,#aaaaaa,aaaaaa);
        background-color: #aaaaaa;
    }

/*Table green*/
.table-green {
    margin: 0px;
    padding: 0px;
    width: 100%;
    border: 2px solid #93e373;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
}

    .table-green table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    .table-green tr:last-child td:last-child {
        -moz-border-radius-bottomright: 5px;
        -webkit-border-bottom-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .table-green tr:last-child td:first-child {
        -moz-border-radius-bottomleft: 5px;
        -webkit-border-bottom-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

    .table-green td {
        vertical-align: middle;
        background-color: #ffffff;
        border: 2px solid #93e373;
        border-width: 0px 2px 1px 0px;
        text-align: center;
        padding: 7px;
        font-weight: normal;
        color: #555555;
    }

        .table-green td.cell-green {
            background-color: #e9f9e3;
        }

        .table-green td.text-pink {
            color: #ff8383;
        }

    .table-green tr:last-child td {
        border-width: 0px 2px 0px 0px;
    }

    .table-green tr td:last-child {
        border-width: 0px 0px 1px 0px;
    }

    .table-green tr:last-child td:last-child {
        border-width: 0px 0px 0px 0px;
    }

    .table-green tr:first-child td {
        background: -o-linear-gradient(bottom, #93e373 5%, #93e373 100%);
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #93e373), color-stop(1, #93e373) );
        background: -moz-linear-gradient( center top, #93e373 5%, #93e373 100% );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#93e373", endColorstr="#93e373");
        background: -o-linear-gradient(top,#93e373,93e373);
        background-color: #93e373;
        border: 0px solid #93e373;
        text-align: left;
        border-width: 0px 0px 2px 2px;
        font-weight: bold;
        font-size: 26px;
        color: #019026;
    }

    .table-green tr:first-child:hover td {
        background: -o-linear-gradient(bottom, #93e373 5%, #93e373 100%);
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #93e373), color-stop(1, #93e373) );
        background: -moz-linear-gradient( center top, #93e373 5%, #93e373 100% );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#93e373", endColorstr="#93e373");
        background: -o-linear-gradient(top,#93e373,93e373);
        background-color: #93e373;
    }

    .table-green tr:first-child td:first-child {
        border-width: 0px 0px 2px 0px;
    }

    .table-green tr:first-child td:last-child {
        border-width: 0px 0px 2px 2px;
    }
/*Table Drak green*/
.table-dark-green {
    margin: 0px;
    padding: 0px;
    width: 100%;
    border: 2px solid #019026;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
}

    .table-dark-green table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    .table-dark-green tr:last-child td:last-child {
        -moz-border-radius-bottomright: 5px;
        -webkit-border-bottom-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .table-dark-green tr:last-child td:first-child {
        -moz-border-radius-bottomleft: 5px;
        -webkit-border-bottom-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

    .table-dark-green td.cell-dark-green {
        background-color: #cce9d4;
    }

    .table-dark-green td.text-pink {
        color: #ff8383;
    }

    .table-dark-green td {
        vertical-align: middle;
        background-color: #ffffff;
        border: 2px solid #019026;
        border-width: 0px 2px 1px 0px;
        text-align: center;
        padding: 7px;
        font-weight: normal;
        color: #555555;
    }

    .table-dark-green tr:last-child td {
        border-width: 0px 2px 0px 0px;
    }

    .table-dark-green tr td:last-child {
        border-width: 0px 0px 1px 0px;
    }

    .table-dark-green tr:last-child td:last-child {
        border-width: 0px 0px 0px 0px;
    }

    .table-dark-green tr:first-child td {
        background: -o-linear-gradient(bottom, #019026 5%, #019026 100%);
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #019026), color-stop(1, #019026) );
        background: -moz-linear-gradient( center top, #019026 5%, #019026 100% );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#019026", endColorstr="#019026");
        background: -o-linear-gradient(top,#019026,019026);
        background-color: #019026;
        border: 0px solid #019026;
        text-align: left;
        border-width: 0px 0px 2px 2px;
        font-size: 15px;
        font-weight: bold;
        color: #ffffff;
    }

    .table-dark-green tr:first-child:hover td {
        background: -o-linear-gradient(bottom, #019026 5%, #019026 100%);
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #019026), color-stop(1, #019026) );
        background: -moz-linear-gradient( center top, #019026 5%, #019026 100% );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#019026", endColorstr="#019026");
        background: -o-linear-gradient(top,#019026,019026);
        background-color: #019026;
    }

    .table-dark-green tr:first-child td:first-child {
        border-width: 0px 0px 2px 0px;
    }

    .table-dark-green tr:first-child td:last-child {
        border-width: 0px 0px 2px 2px;
    }


/*
 * Asset list
 * --------------------------------------------------
 */
.asset-list {
    padding: 0;
    margin: 0;
}

    .asset-list ul {
        padding: 0;
        margin: 0;
    }

        .asset-list ul li {
            list-style: none;
            position: relative;
        }

    .asset-list > ul > li + li {
        margin-top: 10px;
    }

    .asset-list > ul > li > a {
        position: relative;
        display: block;
        padding: 10px 62px 10px 12px;
        font-size: 13px;
        color: black;
        text-decoration: none;
    }

        .asset-list > ul > li > a:hover {
            text-decoration: none;
            opacity: 0.8;
        }

        .asset-list > ul > li > a > .right-tab {
            position: absolute;
            top: 0;
            right: 0;
            width: 56px;
            height: 100%;
            vertical-align: middle;
            text-align: center;
        }

            .asset-list > ul > li > a > .right-tab > .badge {
                background: rgba(0,0,0,0.25);
                margin-top: 6px;
                padding: 7px 9px;
                border-radius: 14px;
                font-size: 13px;
            }

        .asset-list > ul > li > a > .badge {
            float: right;
            font-size: 12px;
            padding: 3px 7px 0px 7px;
            text-shadow: 0px 1px 1px #666;
            margin-right: -40px;
        }
    /* level 2 */
    .asset-list ul ul {
        display: none;
    }

    .asset-list > ul > li > ul {
    }

        .asset-list > ul > li > ul > li {
            margin-top: 1px;
            display: inline-block;
            box-sizing: border-box;
        }

            .asset-list > ul > li > ul > li.full {
                width: 100%;
                background: #bbbbbb;
                margin: 2px 0;
                border-top: 3px solid #bbb;
            }

                .asset-list > ul > li > ul > li.full a {
                    width: 100%;
                    background: #cccccc;
                    color: black;
                }

            .asset-list > ul > li > ul > li.half {
                width: 50%;
            }

                .asset-list > ul > li > ul > li.half:nth-child(odd) + li.half:nth-child(even) {
                    border-left: 1px solid white;
                }

            .asset-list > ul > li > ul > li.full:nth-child(odd) ~ li.half:nth-child(even) {
                border-left: none;
            }

            .asset-list > ul > li > ul > li.full:nth-child(even) ~ li.half:nth-child(odd) {
                border-left: none;
            }

            .asset-list > ul > li > ul > li.full:nth-child(odd) ~ li.half:nth-child(even) + li.half:nth-child(odd) {
                border-left: 1px solid white;
            }

            .asset-list > ul > li > ul > li.full:nth-child(even) ~ li.half:nth-child(odd) + li.half:nth-child(even) {
                border-left: 1px solid white;
            }

            .asset-list > ul > li > ul > li > a {
                display: block;
                padding: 6px 36px 4px 8px;
                font-size: 13px;
                color: white;
                text-decoration: none;
            }

                .asset-list > ul > li > ul > li > a:hover {
                    opacity: 0.8;
                    text-decoration: none;
                }

                .asset-list > ul > li > ul > li > a > .badge {
                    float: right;
                    font-size: 12px;
                    padding: 3px 4px;
                    margin-right: -34px;
                    color: black;
                }

@media (min-width: 992px) and (max-width: 1199px) {
    .asset-list > ul > li > ul > li > a {
        font-size: 9px;
    }

        .asset-list > ul > li > ul > li > a > .badge {
            font-size: 9px;
            padding: 2px 3px;
        }
}

/* Level 3 */
.asset-list ul ul ul {
    display: none;
    z-index: 300;
}

.asset-list > ul > li > ul > li > ul {
    position: absolute;
    right: -181px;
    top: 0px;
}

    .asset-list > ul > li > ul > li > ul > li + li {
        margin-top: 1px;
    }

    .asset-list > ul > li > ul > li > ul > li > a {
        display: block;
        padding: 8px 50px 6px 20px;
        font-size: 24px;
        color: white;
        text-decoration: none;
        width: 200px;
    }

        .asset-list > ul > li > ul > li > ul > li > a:hover {
            opacity: 0.8;
            text-decoration: none;
        }

        .asset-list > ul > li > ul > li > ul > li > a > .badge {
            float: right;
            font-size: 18px;
            padding: 3px 7px 0px 7px;
            text-shadow: 0px 1px 1px #666;
            margin-right: -48px;
            color: black;
            background-color: white !important;
        }


.list-draggable {
    cursor: move;
    z-index: 200;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#draggable-proxy {
    z-index: 210;
    border-radius: 4px;
    padding: 5px 12px 3px;
    color: white;
    line-height: 20px;
    border-radius: 16px;
    opacity: 0.95;
    cursor: url('Images/pointer.png');
}

#textcal {
    visibility: hidden;
    font-size: 14px;
}

#piechart-wrapper {
    border-top: 1px solid #b5b5b5;
    border-left: 1px solid #b5b5b5;
}

    #piechart-wrapper .piechart-control {
        font-size: 26px;
        position: relative;
        z-index: 300;
    }

#piechart {
    margin-top: -30px;
}

#chart-tab.btn-group .btn + .btn {
    margin-left: 0;
    font-weight: bold;
}

.piechart-active {
    border: 5px dashed #ccc !important;
}

.border-video {
    text-align: center;
    border-radius: 10px;
    padding: 16px;
    background: rgba(0,0,0,0.2);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.4), 0 5px 15px rgba(0,0,0,0.5);
}

.border-video-ie {
    max-height: 295px;
    height: 295px;
    width: 100%;
    margin: -16px 0px 0px 0px;
    text-align: center;
}

@media (min-width: 1200px) and (max-width: 1366px) {
    .border-video-ie {
        max-height: 295px;
        height: 295px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .border-video-ie {
        max-height: 238px;
        height: 238px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .border-video-ie {
        max-height: 176px !important;
        height: 176px !important;
    }
}

@media (min-width: 450px) and (max-width: 767px) {
    .border-video-ie {
        max-height: 150px !important;
        height: 150px !important;
    }
}

@media (min-width: 0px) and (max-width: 449px) {
    .border-video-ie {
        max-height: 100px !important;
        height: 100px !important;
    }
}

.box-video {
    margin: 0;
    padding: 0;
    line-height: 0;
    display: block;
    width: 100%;
    height: auto;
}

.row-line {
    border-bottom: 1px dashed #bbb;
    margin-bottom: 3px;
    padding-bottom: 3px;
}

.row-space {
    margin-bottom: 5px;
    padding-bottom: 5px;
}

.box-graph {
    padding: 5px;
    border: 1px solid #bbb;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.table-performance-label > li > span {
    color: black;
}

.table-performance-label .label-my-asset {
    color: #aaaaaa;
}

.table-performance-label .label-my-fund {
    color: #c0f3ac;
}

.table-performance-label .label-recommended {
    color: #016026;
}



/* Font Awesome */
.fa-hack-2x {
    font-size: 1em !important;
    line-height: inherit !important;
    text-decoration: none;
}

.fa-hack-1x {
    font-size: 0.5em !important;
    line-height: inherit !important;
    text-decoration: none;
}

.fa-stack-hack {
    line-height: inherit !important;
    width: 1em !important;
    height: 1em !important;
    vertical-align: top !important;
    text-decoration: none;
}

#tutorial {
    display: none;
    position: absolute;
    width: 100%;
    z-index: 500;
}

    #tutorial .btn-close {
        display: block;
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 100;
    }

    #tutorial img {
        display: block;
        width: 100%;
        height: auto;
    }

.modal-lg {
    width: 900px !important;
}

/*.col-1, .col-2, .col-4, .col-7, .col-9 {
    position: relative;
    min-height: 1px;
    padding-right: 0px;
    padding-left: 10px;
}

.col-1 {
    width: 60px;
    float: left;
}

.col-2 {
    width: 60px;
    float: left;
}

.col-4 {
    width: 150px;
    float: left;
}

.col-7 {
    width: 270px;
    float: left;
}

.col-9 {
    width: 350px;
    float: left;
}*/

/* Custom tooltip */
.tooltip {
    font-size: 13px;
}

.tooltip-inner {
    border-radius: 0px;
}

.text-remark {
    font-size: 12px;
}

.heading-top {
    margin: 0;
    padding: 0;
}

.heading-small {
    padding: 0;
    margin: 0;
    margin-bottom: 10px;
    font-size: 12px;
}

.btn-level {
    width: 140px;
    border-radius: 0;
    background: #f5f5f5;
    margin-bottom: -1px;
    z-index: 100;
    border-bottom: 1px solid #b5b5b5;
    color: #019026;
}

    .btn-level.active {
        color: #019026;
        border-top: 1px solid #b5b5b5;
        border-left: 1px solid #b5b5b5;
        border-right: 1px solid #b5b5b5 !important;
        border-bottom: 1px solid #ffffff;
        background: white;
        box-shadow: none !important;
    }

.panel-title {
    font-size: 25px;
}

    .panel-title > small {
        font-size: 22px;
    }

.table-debug {
    font-family: Tahoma;
    font-size: 11px;
    font-weight: normal;
}

/*Choose Model*/
.check-model {
    position: absolute;
    left: 42%;
    top: -25px;
    display: none;
}

    .check-model i {
        color: forestgreen;
        background-color: #FFFFFF;
        font-size: 50px;
    }

.model.active .check-model {
    display: block;
}

.model.active .panel-footer {
    background-color: #C5F3C9;
    border-top: 1px solid #048E26;
}

/*--Bg table crr level--*/
.green1 {
    background-color: #C5F3C9;
    box-shadow: inset 0 0 0 100px #C5F3C9 !important;
}

.green2 {
    background-color: #8ED894;
    box-shadow: inset 0 0 0 100px #8ED894 !important;
}

.green3 {
    background-color: #68BF71;
    box-shadow: inset 0 0 0 100px #68BF71 !important;
}

.green4 {
    background-color: #4DAD57;
    box-shadow: inset 0 0 0 100px #4DAD57 !important;
}

.green5 {
    background-color: #369A3F;
    box-shadow: inset 0 0 0 100px #369A3F !important;
}

.green6 {
    background-color: #2F8E37;
    box-shadow: inset 0 0 0 100px #2F8E37 !important;
}

.green7 {
    background-color: #287F30;
    box-shadow: inset 0 0 0 100px #287F30 !important;
}

.green8 {
    background-color: #227229;
    box-shadow: inset 0 0 0 100px #227229 !important;
}

.gray1 {
    background-color: #eeeeee;
    box-shadow: inset 0 0 0 100px #eeeeee !important;
}

.gray2 {
    background-color: #e4e4e4;
    box-shadow: inset 0 0 0 100px #e4e4e4 !important;
}

.gray3 {
    background-color: #dddddd;
    box-shadow: inset 0 0 0 100px #dddddd !important;
}

.gray4 {
    background-color: #d4d4d4;
    box-shadow: inset 0 0 0 100px #d4d4d4 !important;
}

.gray5 {
    background-color: #cccccc;
    box-shadow: inset 0 0 0 100px #cccccc !important;
}

.gray6 {
    background-color: #c4c4c4;
    box-shadow: inset 0 0 0 100px #c4c4c4 !important;
}

.gray7 {
    background-color: #bbbbbb;
    box-shadow: inset 0 0 0 100px #bbbbbb !important;
}

.gray8 {
    background-color: #b4b4b4;
    box-shadow: inset 0 0 0 100px #b4b4b4 !important;
}

.modal.modal-email-contact {
    height: auto;
    max-height: 500px;
    background-color: white;
    border: 3px solid #eee;
    border-radius: 3px;
    margin-top: 80px;
    overflow: hidden;
}

.modal.modal-wait-contact {
    width: 500px;
    height: 160px;
    background-color: white;
    border: 3px solid #eee;
    border-radius: 3px;
    margin-top: 80px;
    overflow: hidden;
}

.modal.modal-email-success-contact {
    width: 500px;
    height: 160px;
    background-color: white;
    border: 3px solid #eee;
    border-radius: 3px;
    margin-top: 80px;
    overflow: hidden;
}

ul.years-pagination {
}

    ul.years-pagination li {
        display: inline-block;
        list-style: none;
    }

        ul.years-pagination li a {
            padding: 5px 11px;
            border-radius: 4px;
            display: block;
            color: #444;
        }

            ul.years-pagination li.active a, ul.years-pagination li a:hover {
                background: #019026;
                color: white;
            }

.text-icon-append {
    position: relative;
}

    .text-icon-append .icon-append {
        position: absolute;
        top: 0px;
        right: -15px;
        width: 12px;
        height: 12px;
    }

.td-with-icon {
    position: relative;
    height: 50px;
}

    .td-with-icon .icon-append {
        position: absolute;
        top: 1px;
        right: 1px;
        width: 12px;
        height: 12px;
    }

    .td-with-icon .tooltip-inner, .text-icon-append .tooltip-inner {
        min-width: 300px !important;
        max-width: 500px !important;
        font-weight: normal;
        border: none;
        font-size: 13px !important;
        font-family: Tahoma, sans-serif;
    }

.remark-incompleted {
    font-size: 12px;
    color: #019025;
    margin-right: 20px;
}

.form-control {
    font-size: inherit; /* หรือระบุขนาดใหม่ */
}

.pointer-cursor {
    cursor: pointer;
}

.margin-20 {
    margin: 20px;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-8 {
    margin-top: 8px;
}

.margin-left-2 {
    margin-left: 2px;
}

.scale-marker {
    position: absolute;
}

.left-0 {
    left: 0%;
}

.left-10 {
    left: 10%;
}

.left-20 {
    left: 20%;
}

.left-30 {
    left: 30%;
}

.left-40 {
    left: 40%;
}

.left-50 {
    left: 50%;
}

.left-60 {
    left: 60%;
}

.left-70 {
    left: 70%;
}

.left-80 {
    left: 80%;
}

.left-90 {
    left: 90%;
}

.left-100 {
    left: 100%;
}

label {
    display: inline-block !important;
    margin-bottom: 5px !important;
    font-weight: bold !important;
}

#RetirementSummaryForm input.form-control, #RetirementForm input.form-control {
    text-align: right;
    height: 26px;
    padding: 0 10px;
}

.btn-dark-brown {
    color: #ffffff;
    background-color: #98877f;
    border-color: #877167;
}

    .btn-dark-brown i, .btn-dark-brown:hover i {
        color: #ffffff;
    }

    .btn-dark-brown:hover,
    .btn-dark-brown:focus,
    .btn-dark-brown:active,
    .btn-dark-brown.active {
        color: #ffffff;
        background-color: #75655A;
        border-color: #6c5850;
    }

.btn-white {
    color: #75655A;
    background-color: #ffffff;
    border-color: #6c5850;
}

    .btn-white:hover,
    .btn-white:focus,
    .btn-white:active,
    .btn-white.active {
        color: #75655A;
        background-color: #cec6c0;
        border-color: #c8bdb5;
    }

.btn {
    font-size: inherit;
}