@charset "utf-8";

@font-face {
    font-family: 'DB Heavent';
    src: url('../../fonts/dbozonex1-webfont-webfont.eot?v=4.1.0');
    src: url('../../fonts/dbozonex1-webfont-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../../fonts/dbozonex1-webfont-webfont.woff?v=4.1.0') format('woff'), url('../../fonts/dbozonex1-webfont-webfont.ttf?v=4.1.0') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dbozonebd';
    src: url('../../fonts/db-ozone-x-bd.eot?v=4.1.0');
    src: url('../../fonts/db-ozone-x-bd.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../../fonts/db-ozone-x-bd.woff?v=4.1.0') format('woff'), url('../../fonts/db-ozone-x-bd.ttf?v=4.1.0') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

@font-face {
    font-family: 'BangkokBankSet-Bold';
    src: url('../../fonts/BangkokBankSet-Bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BangkokBankSet-Light';
    src: url('../../fonts/BangkokBankSet-Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BangkokBankSet-Medium';
    src: url('../../fonts/BangkokBankSet-Medium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BangkokBankSet-Regular';
    src: url('../../fonts/BangkokBankSet-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BangkokBankSet-Text-Bold';
    src: url('../../fonts/BangkokBankSet-Text-Bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BangkokBankSet-Text-Regular';
    src: url('../../fonts/BangkokBankSet-Text-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dbozone';
    src: url('../../fonts/DB Heavent v3.2.1.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DB Heavent';
    src: url('../../fonts/DB Heavent v3.2.1.ttf') format('opentype');
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'element';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1; /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-hint:before {
    content: "\e900";
}

.icon-pdf:before {
    content: "\e901";
}

.icon-approve:before {
    content: "\e902";
}

.icon-compare:before {
    content: "\e903";
}

.icon-shield:before {
    content: "\e904";
}

.icon-inform:before {
    content: "\e905";
}

.icon-close:before {
    content: "\e906";
}

.icon-user-plus:before {
    content: "\e973";
}

.icon-bin:before {
    content: "\e9ac";
}

.ic-information {
    font-style: normal;
    line-height: normal;
    font-weight: 700;
    padding: 0em 0.5em !important;
    margin: 0 5px !important;
    background: #00A7E7;
    color: #fff;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

[class^="steps-"]:before, [class*=" steps-"]:before, [class^="steps-"]:after, [class*=" steps-"]:after {
    font-family: 'steps';
    font-size: 1.2em;
    font-style: normal;
}

.steps-certificate:before {
    content: "\e000";
}

.steps-information:before {
    content: "\e001";
}

.steps-receive:before {
    content: "\e002";
}

.steps-search:before {
    content: "\e003";
}

.grid-row {
    margin: 0;
    padding-left: 0
}

    .grid-row:before, .grid-row:after {
        content: " ";
        display: table
    }

    .grid-row:after {
        clear: both
    }

[class^="grid-col-"], [class*=" grid-col-"] {
    float: left;
    list-style-type: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.grid-col-100 {
    width: 100%;
    float: none;
    clear: both
}

.grid-col-75 {
    width: 75%
}

.grid-col-73 {
    width: 72%
}

.grid-col-72 {
    width: 72%
}

.grid-col-70 {
    width: 70%
}

.grid-col-66 {
    width: 66.6666666%
}

.grid-col-65 {
    width: 65%
}

.grid-col-625 {
    width: 62.5%
}

.grid-col-60 {
    width: 60%
}

.grid-col-55 {
    width: 55%
}

.grid-col-50 {
    width: 50%
}

.grid-col-45 {
    width: 45%
}

.grid-col-44 {
    width: 44%
}

.grid-col-40 {
    width: 40%
}

.grid-col-375 {
    width: 37.5%
}

.grid-col-35 {
    width: 35%
}

.grid-col-33 {
    width: 33.3333333%
}

.grid-col-32 {
    width: 32%
}

.grid-col-30 {
    width: 30%
}

.grid-col-28 {
    width: 28%
}

.grid-col-27 {
    width: 27%
}

.grid-col-25 {
    width: 25%
}

.grid-col-20 {
    width: 20%
}

.grid-col-18 {
    width: 18%
}

.grid-col-17 {
    width: 17%
}

.clearfigue:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfigue {
    display: inline-block;
}

.navbar-right {
    min-width: 350px;
}

html[xmlns] .clearfigue {
    display: block;
}

* html .clearfigue {
    height: 1%;
}

.container-main {
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}

.container-margin {
    width: 95%;
    margin: auto;
}

.navbar-default {
    background: #00A7E7 /*#00b3f0*/ !important;
    border-color: #e7e7e7;
}

.navbar-logo {
    float: left;
    padding: 0 2em;
}

    .navbar-logo img {
        width: 90%;
    }

.navbar {
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    border-bottom: 3px solid #fff !important
}

.navbar-nav > li > a {
    padding: 0 1.3em !important;
    display: block;
    height: 100%;
    line-height: 2.4 !important;
    color: #004c9c !important;
}

.avatar {
    color: #222;
    font-size: 1.2em;
    line-height: 1.2;
    padding-top: 0.5em;
    display: block;
    font-family: 'DB Heavent';
}

    .avatar b {
        color: #0057a8;
        font-size: 1.5em;
    }

    .avatar .img {
        width: 35px;
        height: 35px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        float: left;
        text-align: center;
        padding: 5px;
        margin-right: 1em;
    }

.img.blue {
    background-color: #afe5f8;
    color: #004c9c;
}

    .img.blue a {
        color: white;
        text-decoration: none;
        line-height: 2;
        display: block;
    }

.avatar .menu { /*margin-right: 3em;*/
    float: left;
}

.avatar .toolinfo a, .avatar .toolinfo a:hover, .avatar .toolinfo a:visited {
    color: #004c9c;
    text-decoration: none;
    cursor: pointer
}

.avatar .toolinfo {
    float: right;
    color: #004c9c;
    background: #92d6ef;
    height: 30px;
    line-height: 30px;
    text-align: center;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin-left: 0.5em;
    padding: 0 1.5em;
    position: relative;
    margin-top: 0.5em
}

    .avatar .toolinfo:after { /*font-family: 'Glyphicons Halflings'; content: "\e251";*/
        font-size: 1.1em;
        position: absolute;
        top: 0;
        right: 95%;
        color: #92d6ef;
    }

.menumain {
    font-family: 'DB Heavent';
    font-size: 1.5em;
    margin: 0
}

.wapper-btn {
    width: 90%;
    margin: 1em auto;
    display: block;
    text-align: center;
    clear: both;
}

    .wapper-btn:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }

.serviceref {
    background: url(../../images/bgref.png) no-repeat left #a1e3fa;
    padding: 0.5em 3em 0.5em 3em;
    display: block;
    height: 50px;
}

    .serviceref .hbox {
        font-family: 'DB Heavent';
        color: #004c9c;
        line-height: 0.8;
        font-size: 1.4em;
        font-weight: bold;
    }

    .serviceref .ybox {
        text-align: center !important;
        background: #fcf9a4;
        color: #000;
        height: 100%;
        display: block;
        padding: 0.7em 1.5em;
    }

*[class^="ic-"], *[class*="ic-"] {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    padding: 0.3em;
    margin: 0.5em 0;
    font-weight: 400;
    position: relative;
}

.ic-blue {
    background-color: #004c9c;
    color: #afdff9;
}

.ic-green {
    background-color: #d7e107;
    color: #004c9c;
}

.ic-red {
    background: #FF2404;
    color: #fffde4;
}

.b2x {
    font-size: 1.2em;
}

.s {
    width: 20px;
    height: 20px;
}

.xs {
    width: 15px;
    height: 15px;
}

.bgpolicy {
    background: #fdfdfd;
    padding: 1em 0;
}

.greycolumm {
    background: #ffffff;
}

.services {
    background: #aee6f9;
    display: block;
    font-size: 0.95em;
}

.button {
    z-index: inherit !important;
}

.nav-products {
    display: none;
    text-align: center
}

.btn-plansearh {
    background: #004c9c;
    border-radius: 10px;
    color: #afdff9;
    border: none;
    width: 70%;
    padding: 0.5em 1.5em;
    margin-top: 0.7em;
}
/*** custom checkboxes ***/
input[type=checkbox] + label, input[type=radio] + label {
    color: #e3f8fe;
    font-style: normal;
    font-weight: 300;
    margin-bottom: 0;
}

input[type=checkbox]:hover + label:hover, input[type=radio]:hover + label:hover {
    cursor: pointer;
}

input[type=checkbox]:checked + label, input[type=radio]:checked + label {
    color: #004c9c;
    font-style: normal;
}
/*#e3f8fe*/
input[type=checkbox], input[type=radio] {
    display: none;
}
    /* to hide the checkbox itself */
    input[type=checkbox] + label:before, input[type=radio] + label:before {
        font-family: 'FontAwesome';
        display: inline-block;
        color: #a1e3fa;
        font-style: normal;
        font-size: 1.2em;
        vertical-align: central;
    }

    input[type=checkbox] + label:before, input[type=radio] + label:before {
        content: "\f10c";
        color: #004c9c;
    }
    /* unchecked icon */
    input[type=checkbox] + label:before, input[type=radio] + label:before {
        letter-spacing: 10px;
        font-size: 0.9em;
    }
    /* space between checkbox and label */
    input[type=checkbox]:checked + label:before, input[type=radio]:checked + label:before {
        content: "\f192";
        color: #004c9c;
    }
/* checked icon */
.navbar-default .navbar-toggle {
    border-color: #004c9c !important;
}

    .navbar-default .navbar-toggle .icon-bar {
        background-color: #004c9c !important;
    }

    .navbar-default .navbar-toggle:hover {
        background-color: #afe5f8 !important;
    }

.side {
    -webkit-box-shadow: inset -10px 0px 10px -4px rgba(50, 50, 50, 0.15);
    -moz-box-shadow: inset -10px 0px 10px -4px rgba(50, 50, 50, 0.15);
    box-shadow: inset -10px 0px 10px -4px rgba(50, 50, 50, 0.15); /*background: rgb(245,245,245); background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%);*/
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ffffff', GradientType=0 );
}

    .side:after { /*background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 79%, rgba(255,255,255,1) 99%); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 79%, rgba(255,255,255,1) 99%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 79%, rgba(255,255,255,1) 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0 );*/
        content: "";
        display: block;
        position: relative;
        left: 100%;
        bottom: 0;
        height: 2em;
        width: 100px;
    }

.step {
    position: relative;
    padding: 0em 0.75em; /*margin-top: 3em;*/
}

    .step ul {
        list-style: none;
        padding-left: 0;
        margin-left: 0em;
        font-family: 'DB Heavent';
        font-size: 20px;
        font-weight: 400;
        line-height: 1.3;
    }

        .step ul > li {
            display: block;
            background: #afdff9;
            margin: 0.5em 0;
            text-align: center;
            border-radius: 4px
        }

            .step ul > li a {
                color: #004c9c;
                text-decoration: none;
                display: block;
                padding: 0.5em 1em;
                line-height: 1
            }

    .step .active {
        background: #00A7E7;
        color: #004c9c;
    }
        /*.step .active:before { font-family: 'element'; content: "\e904"; color: #00b3f0; font-size: 2.27em; position: absolute; left: 100%; line-height: 1.05; }*/
        .step .active a, .step .active a:visited, .step .active a:hover {
            color: #ffffff;
        }

    .step .disable {
        background: #F4F4F4;
        color: #b9b8b8;
    }

        .step .disable a, .step .disable a:hover, .step .disable a:visited {
            color: rgb(185 185 184);
            text-decoration: none;
            cursor: default
        }

.assistant { /*margin-top: 4.5em;*/
    padding: 0em 0.75em;
    ;
    position: relative;
    bottom: -2em;
}
    /*.assistant .dialog { background: #fff; padding: 2.5em; display: block; position: relative; font-family: 'DB Heavent'; font-size: 1.25em;border-radius: 50%;border: #266784 1px solid;}
.assistant .dialog:after { font-family: 'Glyphicons Halflings'; content: "\e252"; position: absolute; font-size: 2.5em; color: #266784; bottom: -0.77em; right: 43%;}*/
    .assistant .dialog {
        position: relative;
        background: #ffffff;
        border: 1px solid #266784;
        border-radius: 10px;
        padding: 10px;
        font-family: 'DB Heavent';
        font-size: 18px;
        color: #004c9c;
    }

        .assistant .dialog:after, .assistant .dialog:before {
            top: 100%;
            left: 50%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .assistant .dialog:after {
            border-color: rgba(255, 255, 255, 0);
            border-top-color: #ffffff;
            border-width: 20px;
            margin-left: -20px;
        }

        .assistant .dialog:before {
            border-color: rgba(38, 103, 132, 0);
            border-top-color: #266784;
            border-width: 21px;
            margin-left: -21px;
        }

    .assistant .img {
        text-align: center;
        margin-top: 2em !important;
    }

    .assistant .dialog i {
        color: #E1070B;
        font-weight: 700;
        font-size: 1.125em;
        font-style: normal;
    }

.content {
    display: block; /*margin-left: 2em;*/
    margin-top: 0.5em;
    font-family: 'DB Heavent';
    font-size: 20px;
    line-height: 1.5;
}
    /*.content input[type=text], .content select { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: #aee6f9 1px solid; background: #a1e3fa; color: #000; margin-right: 0.8em; margin-bottom: 0.5em; padding: 0 0.5em; width: auto; }*/
    .content input[type=text], .content input[type=number] {
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: #FFF 1px solid;
        background: #FFF;
        color: #000;
        margin-right: 0.5em;
        margin-bottom: 5px;
        padding: 0 0.5em;
        width: auto;
    }

    .content .information input[type=text], .content input[type=number] {
        border: #dedcdc 1px solid !important;
        background: none !important;
    }

    .content input[disabled], .content input[readonly] {
        border: #dedcdc 1px solid !important;
        background: #F4F4F4 !important;
    }

    .content .information input[disabled], .content .information input[readonly] {
        border: #dedcdc 1px solid !important;
        background: #F4F4F4 !important;
    }
    /*button[disabled], html input[disabled] {cursor: default;background-color: #F5F5F5 !important;border: 1px solid #eee !important;}*/
    .content select {
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: #FFF 1px solid;
        background: #FFF;
        color: #000;
        margin-right: 0.8em;
        margin-bottom: 5px;
        padding: 0 0 0 0.5em;
        width: auto;
    }

    .content .information select {
        border: #dedcdc 1px solid !important;
        background: none !important;
    }

        .content .information select[disabled] {
            border: #dedcdc 1px solid !important;
            background: #F4F4F4 !important;
        }

    .content .mainsearch {
        width: 90%;
        margin: 3em auto;
    }

        .content .mainsearch .btnsearch button {
            padding: 0.3em 0 !important;
        }

        .content .mainsearch .form .col-md-6:nth-child(2) label {
            margin-right: 2.3em;
        }

    .content .search {
        background: #afdff9;
        display: block;
    }

        .content .search label {
            font-weight: 400;
            color: black;
            margin-right: 0.5em;
        }

            .content .search label span {
                color: #E1070B
            }
            /*.content .search label + select { margin-left: 0.8em; }*/
            .content .search label + select {
                margin-left: 0.8em;
                max-width: 160px;
                min-width: 160px;
            }

            .content .search label + input {
                margin-left: 0.8em;
                max-width: 160px;
                min-width: 160px;
            }

        .content .search .btnsearch button {
            position: relative;
            margin: 0 !important;
            width: 100%;
            border: 0 !important;
            background-color: transparent;
            display: block !important; /*padding: 1.41em 0;*/
            padding: 1em 0;
        }

        .content .search .form {
            background: #AFDFF9;
        }

        .content .search .wapper {
            padding: 1em 1.5em;
        }

        .content .search .btnsearch {
            background: #004c9c;
            color: #a1e3fa;
            font-size: 1.5em;
        }

            .content .search .btnsearch b {
                font-family: 'DB Heaventbd';
            }
            /*.content .search .btnsearch button { position: relative; margin: 0!important; width: 100%; border: 0!important; background-color: transparent; display: block!important; padding: 0.8em 0; }*/
            .content .search .btnsearch button:focus {
                outline: none;
            }

            .content .search .btnsearch i {
                display: block;
            }

        .content .search [class^="col-"], .content .search [class*="col-"] {
            padding: 0 !important
        }

    .content .status [class^="col-"], .content .status [class*="col-"] {
        padding: 0 !important
    }

    .content .status {
        color: #004c9c;
        background: #AFDFF9;
        padding: 0.2em 0.5em;
        border-bottom: 1px solid #fff;
    }
        /*#e3f8fe*/
        .content .status label {
            color: #fff;
            font-weight: 700;
            margin: 0em;
        }

        .content .status input {
            margin: 0px 5px 0px 0px;
            width: 94%;
        }

            .content .status input #DateOfBirth {
                line-height: 20px;
                margin: 0px 5px;
                width: 90px
            }

        .content .status select {
            line-height: 20px;
            margin: 0px 5px 0px 0px;
            width: 60px;
            width: 97%;
        }

    .content .lists b {
        font-weight: 400;
    }

    .content .lists [class^="col-"], .content .lists [class*="col-"] {
        padding: 0 0.5em !important
    }

    .content .lists {
        border-top: solid 3px #fff;
        border-bottom: solid 3px #fff;
        box-sizing: border-box;
        background: #edfafe;
        padding: 1em;
    }

        .content .lists .txt {
            font-size: 0.9em;
            font-weight: 400;
            line-height: 1;
        }

        .content .lists b {
            display: block;
            color: #000;
        }

        .content .lists .txt b {
            color: #000;
            font-style: italic;
        }

        .content .lists .price {
            color: #000;
            text-align: right;
        }

            .content .lists .price b {
                font-size: 1.2em;
                color: #000;
                display: inline;
                padding-right: 0.5em;
            }

        .content .lists .inform a, .content .lists .inform a:hover, .content .lists .inform a:visited {
            font-size: 0.875em;
            text-decoration: none;
            color: #000;
        }

        .content .lists *[class^="ic-"], .content .lists *[class*="ic-"] {
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            text-align: center;
            padding-top: 0.2em;
            margin-right: 0.5em;
            font-weight: 400;
            font-size: 0.8em;
            line-height: 0.9;
        }

        .content .lists .ic-blue {
            background-color: #00b4f1;
            color: #fff;
        }

        .content .lists .suminsured {
            text-align: right
        }

            .content .lists .suminsured b {
                font-size: 1.2em;
            }

    .content .recal .btn-block {
        width: 96% !important
    }

    .content .recal .mainbtn {
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-top: 1em;
        font-size: 1.2em;
    }

    .content .recal .button {
        max-width: 100% !important
    }

    .content .recal .btn-cal {
        border-radius: 5px;
        background: #004c9c;
        color: #fff;
        border: none;
        vertical-align: middle;
        position: relative;
        padding: 0.25em 0.5em;
        line-height: 1.5;
        font-weight: 700
    }

        .content .recal .btn-cal > i {
            margin-right: 0.5em;
        }

    .content .recal [class^="col-"], .content .recal [class*="col-"] {
        padding: 0 !important
    }

    .content .recal .wapper {
        padding: 0.8em;
    }

    .content .recal .cards .wapper {
        padding: 1em 1.5em;
    }

    .content .recal .cards {
        background: #afdff9;
    }

        .content .recal .cards .policy {
            color: #004c9c;
            font-size: 1.125em;
            line-height: 1;
            margin-bottom: 0.5em;
        }

            .content .recal .cards .policy b {
                font-size: 1.125em;
                display: block;
            }

.policy .compare:before {
    font-family: 'element';
    content: "\e903";
    color: #eaf502;
    font-size: 1.5em;
    position: absolute;
    right: 90%;
    display: block;
}

.policy .compare {
    padding-left: 1em;
    display: inline-block;
}

    .policy .compare a, .policy .compare a:visited, .policy .compare a:hover {
        text-decoration: none;
        color: #004c9c;
        font-weight: 700;
        font-size: 0.85em;
    }

.content .recal .cards {
    color: #004c9c;
}
    /*#e3f8fe*/
    .content .recal .cards label > span {
        font-weight: 400;
    }

    .content .recal .cards .price {
        text-align: right;
        font-weight: 700;
    }

    .content .recal .cards .text-price {
        text-align: right;
        font-weight: 700;
        border-radius: 4px;
        background: #dff5fd;
        padding: 0 0.5em !important;
        margin-bottom: 0.5em;
    }

    .content .recal .cards select {
        margin-right: 0;
        font-weight: 400;
        width: 100%;
    }

    .content .recal .cards input {
        margin-right: 0;
        font-weight: 400;
        width: 100%;
    }

    .content .recal .cards .sumpaid {
        border-radius: 5px;
        background: #a1e3fa;
        display: block;
        padding: 0.25em 1em;
        color: #004c9c;
        margin-bottom: 0.5em
    }

    .content .recal .cards .totalsumpaid {
        border-radius: 5px;
        background: #f8ffa1;
        display: block;
        padding: 0em 0.5em;
        color: #000000;
        margin-bottom: 0.5em
    }

    .content .recal .cards .line { /*border-top: 1px #e9e9e8 solid; display: block;*/
        margin: 0.5em 0;
    }

.content .recal .benefit {
    padding-left: 0.8em;
}

    .content .recal .benefit .border {
        display: block;
        border: #dedcdc 1px solid;
        box-sizing: border-box;
    }

    .content .recal .benefit h3 {
        color: #004c9c;
        font-weight: 700; /*padding-left: 1.3em;*/
        font-size: 25px;
        line-height: 1;
    }

.content .died {
    font-size: 1.1em;
}

    .content .died .price {
        color: #000;
        text-align: right;
    }

    .content .died .remark {
        font-family: Arial, sans-serif;
        font-style: italic;
        color: #4a4a49;
        font-size: 0.65em;
        display: block;
        border-top: 1px solid #f2f2f4;
        margin-top: 1em;
        padding-top: 1em;
    }

.content .hint {
    display: block;
    background: #fef0c9;
    padding: 0.8em;
    padding-left: 15%;
    margin: 0.8em 0;
    margin-bottom: 0.5em;
}

.content section .payment .hint, .content section .attacthfile .hint {
    display: block;
    background: #fef0c9;
    padding: 0.8em;
    padding-left: 1.5em;
    margin: 0.8em 0;
    margin-bottom: 0.5em;
}

.content .hint:before {
    font-family: 'element';
    content: "\e900";
    color: #000;
    font-size: 2.5em;
    position: absolute;
    right: 85%;
    display: block;
}

.content section .payment .hint:before, .content section .attacthfile .hint:before {
    font-family: 'element';
    content: "\e900";
    color: #000;
    font-size: 2.5em;
    position: absolute;
    right: 92%;
    display: none;
}

.content .hint ul {
    padding-left: 0.3em;
}

.content .hint li {
    list-style: decimal;
    line-height: 1;
}
/*.content .hint ul > li:before { content: "-"; padding-right: 0.3em; }*/
.content .hint div:nth-child(2) {
    border-left: 1px #e2ce98 dashed;
}

.content .hint div:first-child {
    border-right: 1px #fffcf4 dashed;
}

.content .remark {
    font-family: Arial, sans-serif;
    font-style: italic;
    color: #4a4a49;
    font-size: 11px;
}

.footer {
    background: #AFDFF9;
    padding: 1.5em 0;
}

    .footer .pull-left {
        font-family: 'DB Heavent';
    }

    .footer .img {
        width: 50px;
        height: 50px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        float: left;
        text-align: center;
        padding: 5px;
        margin-right: 1em;
    }

        .footer .img.blue {
            background-color: #004c9c;
            color: #004c9c;
        }

        .footer .img i {
            position: relative;
            margin-top: 0.3em;
        }

    .footer .pull-left {
        color: #000;
        font-size: 1.25em;
        line-height: 1;
    }

.address b, .call b {
    -webkit-text-fill-color: #00A7E7;
}

.address b {
    font-size: 1.2em;
}

.call .pull-left {
    font-weight: 700;
    font-size: 1.5em;
    line-height: 1;
}

.call b {
    font-size: 1.8em;
}

.breadcrumbs {
    font-weight: 400;
    line-height: 1.7;
    color: black;
}

    .breadcrumbs a {
        color: #383737;
    }

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

        .breadcrumbs a:after {
            font-family: 'FontAwesome';
            content: "\f105";
            color: #141414;
            font-size: 1em;
            font-weight: 400;
            padding: 0 0.5em;
            line-height: 0.8;
        }

#benefit-callapse [class^="col-"], .content .lists [class*="col-"] {
    padding: 0 !important
}

#benefit-callapse ul {
    width: auto;
    margin: 0;
    padding-left: 0;
}

#benefit-callapse li {
    list-style-type: none;
    cursor: pointer;
    border-radius: 5px;
    background: #dff5fd;
    margin: 0.1em 0;
    display: block;
    padding: 0.3em 0.5em;
}

#benefit-callapse ul .text {
    color: #666666;
    cursor: auto;
    display: none;
    padding: 5px 0 5px 20px;
    text-decoration: none;
}

    #benefit-callapse ul .text a {
        color: #000000;
        font-weight: bold;
    }

#benefit-callapse li .text:hover {
    text-decoration: none !important;
}

#benefit-callapse li:before {
    font-family: 'FontAwesome';
    color: #004c9c;
    font-size: 1em !important;
    content: "\f055"; /*content: "\f106";*/
    left: 92%;
    position: absolute;
    transition: transform .3s ease;
}

#benefit-callapse li.active:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    content: "\f056";
}

#benefit-callapse li.mature {
    border-radius: 5px;
    background: #DCDCDC;
    cursor: auto;
    margin: 0.1em 0;
    display: block;
    padding: 0.3em 0.5em;
}

#benefit-callapse li.total {
    border-radius: 5px;
    background: #f8ffa1;
    color: #fff !important;
    cursor: auto;
    margin: 0.1em 0;
    display: block;
    padding: 0.5em 0.5em;
}

#benefit-callapse li.mature:before {
    content: "";
}

#benefit-callapse li.total:before {
    content: "";
}

#benefit-callapse li b {
    color: #000000;
    font-weight: normal
}

#benefit-callapse li .price {
    text-align: right;
    padding-right: 6% !important;
}

#benefit-callapse li.mature .price {
    text-align: right;
    padding-right: 0.7em !important;
}

#benefit-callapse li.total .price {
    text-align: right;
    padding-right: 0.7em !important;
}

#benefit-callapse li .price b {
    color: #000;
    font-size: 1.125em;
    font-weight: 700;
}

#benefit-callapse .text {
    height: 200px;
}

    #benefit-callapse .text td, #benefit-callapse .text th {
    }

        #benefit-callapse .text td:last-child, #benefit-callapse .text th:last-child {
            text-align: -webkit-center;
            padding-right: 20px;
        }

    #benefit-callapse .text thead {
        border-bottom: 2px solid #f2f2f4;
        padding-bottom: 0.5em;
    }

    #benefit-callapse .text tbody td:first-child {
        padding-left: 1.5em;
    }

    #benefit-callapse .text tfoot {
        border-top: 2px solid #f2f2f4;
        padding-top: 0.5em;
    }

        #benefit-callapse .text tfoot th {
            font-size: 1.125em;
        }

            #benefit-callapse .text tbody td:last-child, #benefit-callapse .text tfoot th:last-child {
                padding-right: 1.5em;
            }

.information .border {
}

    .information .border h3 {
        font-weight: 400; /*padding-bottom: 0.5em;*/
        margin-top: 0;
    }

.information .wapper { /*padding: 1em 0.5em;*/
    margin: 5px 0;
}

    .information .wapper .mobileflex {
        display: flex;
    }

.progress {
    height: auto !important;
    margin: 0 !important;
}

    .progress .progress-bar {
        padding: 0.3em 0.8em;
        font-size: 1em !important;
        line-height: 1;
        text-align: left
    }

        .progress .progress-bar b {
            color: #a1e3fa
        }

.information .mainbtn {
    margin: 0.3em 0;
    font-size: 1.2em;
}

.information h3 {
    color: #000;
    font-weight: 700;
    font-size: 1.125em;
    line-height: 1;
}

    .information h3 span {
        margin-left: 0.5em;
    }

    .information h3 label {
        width: auto;
        padding-right: 0.5em;
        font-size: 0.9em
    }

    .information h3 b {
        font-weight: 700;
        border-radius: 3px; /*background: #eaf07b;*/
        padding: 0.2em;
        display: inline-block;
        color: #000;
    }

.information .doc-sent { /*border: #EDD039 1px dashed; */
    margin-top: 10px;
}

    .information .doc-sent h3 {
        margin: 0; /*text-indent:-1%*/
    }

        .information .doc-sent h3 b { /*background: #fef0c9; padding: 1em 0.8em;*/
        }

.information label {
    width: 30%;
    font-weight: 400;
    line-height: 1;
}

    .information label b {
        color: #E1070B;
        font-weight: 400;
    }

.information input[type=text], .information input[type=number], .information select {
    width: 60%;
    vertical-align: middle;
    margin-right: 0em;
    height: 25px;
}

.information .PrenameTypeahead {
    display: inline-block;
    width: 60%;
}

.information input[type=radio] + label, .information input[type=checkbox] + label {
    color: #000;
    white-space: nowrap;
    margin-top: 5px
}

.information .info-callapse ul {
    padding-left: 0;
    border-top: #ccc 1px dashed;
    padding-top: 0.5em;
    margin-top: 0.8em;
}

.information .info-callapse.normal li {
    font-weight: 400;
}

.information .info-callapse li {
    list-style-type: none;
    cursor: pointer;
    padding: 5px;
    background: none; /*font-weight: 700;*/
    color: #004c9c;
    display: inline-table;
}

.information .noline .text ul {
    border-top: #ccc 1px dashed;
    padding-top: 0.5em;
}

.information .noline ul {
    border-top: 0;
    padding-top: 0;
}

.information .info-callapse .text {
    color: #666666;
    cursor: auto;
    display: none;
    padding: 5px 0 5px 20px;
    text-decoration: none;
    height: auto;
}

.information .info-callapse .PrenameTypeahead li:before {
    font-family: '';
    content: "";
    color: #00b3f0;
    font-weight: 0;
    position: relative;
    transition: transform .3s ease;
    left: 0%;
    font-size: 0;
    line-height: 0;
    padding-right: 0;
}

.information .info-callapse li:before {
    font-family: 'FontAwesome';
    content: "\f055";
    color: #004c9c;
    font-weight: 400;
    position: relative;
    transition: transform .3s ease;
    left: 0%;
    font-size: 1.2em;
    line-height: 0.9;
    padding-right: 0.3em;
}

.information .info-callapse li.active:before {
    font-family: 'FontAwesome';
    content: "\f056";
    color: #004c9c;
    font-weight: 400;
    position: relative;
    left: 0%;
    font-size: 1.2em;
    line-height: 0.9;
    padding-right: 0.3em;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}

.information .tb { /*height: 26em;*/
}

.information p {
    line-height: 1.125;
}

.information .SpecialQuesttion {
    /*color: #004c9c*/
    color: black
}

.information .HeaderSpecialQuesttion {
    /*color: #004c9c;
    text-decoration-line: underline;*/
    color: black
}

.information .hbenefit {
    padding-bottom: 0.5em;
}

    .information .hbenefit .btn {
        border-radius: 5px;
        background: #004c9c;
        color: #fff;
        border: none;
        vertical-align: middle;
        position: relative;
        padding: 0.25em 0.5em;
        font-size: 1em;
        line-height: 0.9;
    }

        .information .hbenefit .btn span {
            padding: 0.2em 0.5em;
        }

        .information .hbenefit .btn:hover {
            color: #fff;
        }

.information .personal {
    border-radius: 5px;
    background: #fffcc2;
    display: block;
    padding: 0.25em 1em;
    color: #004c9c;
    margin-bottom: 0.5em;
}

.information .bank {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.information .bank-acct {
    border-radius: 5px; /*background: #fffcc2;*/
    display: block; /*padding: 0.25em 1em;*/
    color: black; /*color: #000;*/
}

    .information .bank-acct label {
        width: 20%;
    }

    .information .bank-acct input[type=text], .information .bank-acct select, .information .select2-container {
        width: 60% !important;
        margin-bottom: 5px
    }

.information .bank h3 {
    font-size: 400;
    font-size: 22px;
    color: #000;
    line-height: 1;
    margin-bottom: 0;
    padding-bottom: 0.2em;
}

    .information .bank h3 b {
        display: block;
        font-size: 0.75em;
        background: inherit;
        border-radius: inherit;
        padding: inherit;
        color: black;
    }

.information .bank ul {
    margin-top: 1em;
}

.information .bank li {
    list-style: decimal;
}

.information .bank .hint ul {
    margin-top: 0;
}

.information .bank .hint li {
    list-style: none;
}

.information .bank .check {
    text-align: center;
    display: block;
    border: none;
    border-radius: 5px;
    padding-left: 15px;
    padding-top: 0px;
}

.information .check {
    text-align: center;
    display: block;
    border: #dedcdc 1px solid;
    border-radius: 5px; /*padding: 0.8em;*/
}

    .information .check .btn {
        border-radius: 5px;
        background: #004c9c;
        color: #fff;
        border: none;
        vertical-align: middle;
        position: relative;
        padding: 0.5em;
        font-size: 1em;
        line-height: 1;
    }

        .information .check .btn span {
            padding: 0.2em;
            padding-right: 0.5em;
        }

        .information .check .btn:hover {
            color: #fff;
        }

.information .submit {
    text-align: center;
}

    .information .submit .mainbtn {
        margin-bottom: 0;
    }
/*Adding custom checkbox icons*/
.check input[type=checkbox] + label {
    color: #000;
    font-style: normal;
    font-weight: 300;
    margin-bottom: 0;
    font-size: 1em;
}

.check input[type=checkbox]:hover + label:hover {
    cursor: pointer;
}

.check input[type=checkbox]:checked + label {
    color: #000;
    font-style: normal;
}

.check input[type=checkbox] {
    display: none;
}
    /* to hide the checkbox itself */
    .check input[type=checkbox] + label:before {
        font-family: 'FontAwesome';
        display: inline-block;
        color: #000;
        font-style: normal;
    }

    .check input[type=checkbox] + label:before {
        content: "\f096";
        color: #000;
    }
    /* unchecked icon */
    .check input[type=checkbox] + label:before {
        font-size: 1.125em;
    }
    /* space between checkbox and label */
    .check input[type=checkbox]:checked + label:before {
        content: "\f046";
        color: #000;
    }
/* checked icon */
.payment {
    margin-top: 2em;
}

    .payment h3 {
        color: black;
        font-weight: 700;
        font-size: 1.125em;
        line-height: 0.5;
    }

    .payment .wapper {
        padding: 1em 1.5em;
    }

    .payment .amount { /*border: #fcf8bf 1px solid*/
        ;
        display: block;
        margin-top: 10px;
    }

        .payment .amount .total {
            background: #fcf8bf;
            display: block;
            color: #000;
            padding: 0.5em 0.8em;
            font-weight: 400;
            font-size: 20px;
        }

        .payment .amount span {
            font-size: 0.9em;
            font-style: italic;
        }

    .payment .submit {
        text-align: center;
        margin-top: 1em;
    }

        .payment .submit .mainbtn {
            font-size: 1.2em;
        }

    .payment .check input[type=checkbox] + label, .payment .check input[type=checkbox] + label:before {
        font-size: 1em;
    }

.recurring {
    margin-top: 0em;
    height: 700px;
    background-color: #fff
}

    .recurring h2 {
        align-content: center
    }

    .recurring h3 {
        color: black;
        font-weight: 700;
        font-size: 1.125em;
        line-height: 1;
        margin: 0em 0.85em 0em 0.85em; /*border-bottom: 2px solid #004c9c;*/
        padding: 0.5em;
        background-color: #AFDFF9
    }

    .recurring .wapper {
        padding: 0.5em 0.5em;
    }

    .recurring .border { /*border: 1px solid #ccc !important;border-radius: 4px;margin: 0.5em 0em 0.5em 1em;*/
    }

    .recurring .amount {
        border: #fcf8bf 1px solid;
        display: block;
        margin-top: 10px;
    }

        .recurring .amount .total {
            background: #fcf8bf;
            display: block;
            color: #000;
            padding: 0.5em 0.8em;
            font-weight: 700;
            font-size: 18px;
        }

        .recurring .amount span {
            font-size: 0.9em;
            font-style: italic;
        }

    .recurring .submit {
        text-align: center;
        margin-top: 1em;
    }

        .recurring .submit .mainbtn {
            font-size: 1.2em;
        }

    .recurring .check input[type=checkbox] + label, .payment .check input[type=checkbox] + label:before {
        font-size: 1em;
        color: #000
    }

.martop {
    margin-top: 2em;
    padding: 0em 0.75em;
}

.thankyou [class^="btn-"], .thankyou [class*="btn-"] {
    border: none;
    vertical-align: middle;
    position: relative;
    padding: 0.5em 1.5em;
    border-radius: 5px;
    font-family: 'DB Heavent';
    font-size: 1.2em;
    font-weight: 700;
    width: 80%;
    margin: 0.5em;
}

.thankyou .border {
    border: #dedcdc 1px solid;
    border-radius: 5px;
}

.thankyou .wapper {
    padding: 0.5em 1em;
}

.thankyou h3 {
    color: #004c9c;
    font-weight: 700;
    font-size: 1.125em;
    line-height: 0.5;
    margin-bottom: 1em;
}

.thankyou .btn-blue {
    background: #004c9c;
    color: #afdff9;
}

    .thankyou .btn-blue:hover, .thankyou .btn-blue:focus {
        color: #afdff9;
    }

.thankyou .btn-green {
    background: #e0eb01;
    color: #0057a8;
}

    .thankyou .btn-green:hover, .thankyou .btn-green:focus {
        color: #0057a8;
    }

.register {
    background: #afdff9;
    display: block;
    color: #000;
    padding: 0.5em 0.8em;
    font-weight: 700;
    font-size: 18px;
}

.reject [class^="btn-"], .thankyou [class*="btn-"] {
    border: none;
    vertical-align: middle;
    position: relative;
    padding: 0.5em 1.5em;
    border-radius: 5px;
    font-family: 'DB Heavent';
    font-size: 1.2em;
    font-weight: 700;
    width: 100%;
    margin: 0.5em 0em;
}

.reject .border {
    border: #dedcdc 1px solid;
    border-radius: 5px;
}

.reject .wapper {
    padding: 1em 1.5em;
}

.reject h3 {
    color: #004c9c;
    font-weight: 700;
    font-size: 1.125em;
    line-height: 0.5;
    margin-bottom: 1em;
}

.reject .btn-blue {
    background: #004c9c;
    color: #fff;
}

.reject .btn-green {
    background: #e0eb01;
    color: #0057a8;
}


.list-personal .btn-blue {
    background: rgb(140, 212, 245);
    color: #004C9C;
}

.list-personal [class^="btn-"], .list-personal [class*="btn-"] {
    border: none;
    vertical-align: middle;
    position: relative;
    padding: 0.5em 1.5em;
    border-radius: 5px;
    font-family: 'DB Heavent';
    font-size: 1em;
    font-weight: 700;
    margin: 0.5em;
}

.list-personal .wapper {
    background: #fff;
}

.list-personal .border {
    border: none;
}

.list-personal .cusinfo {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #fffcc2;
    display: block;
    padding: 0.5em 1em;
    margin: 0.5em 0;
}

.list-personal .cusinfo {
    color: black;
    font-weight: 700;
}

    .list-personal .cusinfo button {
        background: none;
        border: none;
    }

    .list-personal .cusinfo label {
        padding-right: 0.5em;
        padding-left: 0.5em;
        width: auto !important;
        font-weight: 400;
    }

    .list-personal .cusinfo [class^="col-"], .list-personal .cusinfo [class*="col-"] {
        padding: 0 !important
    }

.list-personal .overlay section {
    width: 90%;
    margin: auto;
    position: relative;
    top: 50%;
    height: auto;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.list-personal .overlay .tb {
    height: 90%;
}

.list-personal .recurring select {
    max-width: 160px;
    min-width: 160px;
}

.list-personal .recurring input[type=checkbox] + label {
    color: #000 !important;
}

.list-personal .recurring input[type=radio] + label {
    color: #000 !important;
}

.minheight {
    min-height: 29.5em;
}

.checkstatus {
    margin-top: 0em;
}

    .checkstatus [class^="btn-"], .checkstatus [class*="btn-"] {
        border: none;
        vertical-align: middle;
        position: relative;
        padding: 0.1em 0.5em;
        border-radius: 5px;
        font-family: 'DB Heavent';
        font-size: 0.9em;
        font-weight: 700;
        width: 80%;
        margin: 0.5em;
    }

    .checkstatus h3 {
        color: #004c9c;
        font-weight: 700;
        font-size: 1.125em;
        line-height: 1;
    }

    .checkstatus thead th {
        background: #AFDFF9;
        color: #000;
        padding: 0.8em;
        line-height: 0.9;
        text-align: center;
        font-weight: 400
    }

    .checkstatus tbody tr {
        background: #f2fbfe;
        color: #000;
        border-top: #AEE5F9 1px solid;
        border-bottom: #AEE5F9 1px solid;
    }

        .checkstatus tbody tr:first-child {
            border-top: none;
        }

        .checkstatus tbody tr:last-child {
            border-bottom: #AEE5F9 3px solid;
        }

        .checkstatus tbody tr td {
            text-align: center;
            vertical-align: top;
            padding: 0.4em;
        }

    .checkstatus .btn-green {
        background: #e0eb01;
        color: #0057a8;
        white-space: nowrap;
    }

        .checkstatus .btn-green[disabled] {
            background: #efefef;
            color: #cdcdcd;
            transition: background-color 0.3s, color 0.3s;
            border: 1px solid #dedede;
        }

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

    .checkstatus tbody b {
        display: block;
        font-weight: 400;
    }

.msg-mobile {
    display: none;
}

.msg-pc {
    display: block;
}

.planname-mobile {
    display: none;
}

.planname-pc {
    display: block;
}

.pension-mobile {
    display: none;
}

.pension-pc {
    display: block;
}

.btn-cal {
    width: auto !important
}

.col-md-4-custom {
    width: 23.3333%
}

.Head {
    position: absolute;
    left: 45%;
    margin: 0.5em 1em 0 1em;
    color: #FFF;
    font-family: 'DB Heavent';
}

#form-recurring input[type=text], #form-recurring select {
    border: #CCC 1px solid !important;
}

.content .search #Fullname {
    width: 94%;
}

.content .search #IdentityNo {
    width: 94%;
}

.content .search #DateOfBirth {
    width: 94%;
}

.content .search #Gender {
    width: 94%;
}

.H-2 {
    font-weight: bold;
    font-size: 20pt;
    color: #004c9c !important;
    line-height: 1.7;
    margin-right: 5px;
}

.H-3 {
    font-size: 20px;
    color: #004c9c !important;
    line-height: 1;
    vertical-align: middle;
}

.H-4 {
    font-size: 18px;
    color: #004c9c;
    line-height: 1.7;
}

.H-5 {
    font-size: 14px;
    color: #004c9c;
    line-height: 1;
}

.H-6 {
    font-size: 14px;
    color: #004c9c;
    line-height: 1;
}

.unitpemsion-tbody {
    /*border-radius: 5px;*/
    /*background: #dff5fd;*/
    color: #004c9c;
}

    .unitpemsion-tbody input {
        text-align: right;
    }

.unitpemsion-add {
    border-radius: 5px;
    background: #00A7E7;
    display: block;
    padding: 0.25em;
    color: #004c9c;
    margin-bottom: 0.5em;
}

    .unitpemsion-add input {
        text-align: right;
    }

.unitpension-detail {
    border-radius: 5px;
    background: #fef0c9;
    display: block;
    padding: 0.25em;
    color: #004c9c;
    font-size: 13.5px;
}

@media (min-width: 1200px) {
    .container-fluid { /*width: 1170px;*/
        width: 90%;
    }
}

@media screen and (max-width: 1185px) {
    .fa-calculator {
        display: none !important
    }
}

@media screen and (max-width: 1184px) {
    .content .search .btnsearch button { /*padding: 3.03em 0;*/
        padding: 1.858em 0;
    }

    .content .search label + select {
        margin-left: 0em;
        max-width: none;
        width: 98%;
    }

    .content .search label + input {
        margin-left: 0em;
        max-width: none;
        width: 96%;
    }

    .btn-plansearh {
        margin-top: 2.6em;
    }
}

@media screen and (max-width: 1024px) {
    .btn-plansearh {
        margin-top: 0.7em;
        width: 100%;
    }

    .content .search .btn-search, .content .search .form {
        width: 100% !important;
    }

    .content .search .btn-search {
        padding: 0em 2em 1em 1.5em !important;
    }

    .fa-search {
        font-size: 1em !important;
    }
}

@media screen and (max-width: 991px) {
    .pension-mobile {
        display: block;
    }

    .pension-pc {
        display: none;
    }

    .fa-calculator {
        display: inline-block !important
    }

    .content .search .btnsearch button {
        padding: 0.25em 0;
    }

    .content .search input[type=text], .content .status input[type=text] {
        width: 96%;
    }

    .content .search select, .content .status select {
        width: 96%;
    }

    .content .search #IdentityNo, .content .search #DateOfBirth, .content .search #Fullname, .content .status #Fullname, .content .status #IdentityNo, .content .status #DateOfBirth {
        width: 100%;
    }

    .content .search #Gender, .content .status #GENDER {
        width: 96%;
    }

    .content .status #occp-group, .content .status #occp-type {
        width: 98% !important;
    }

    .content .lists .inform b {
        display: inline !important;
        padding-right: 1em;
    }

    .content .lists .inform {
        padding: 0 !important;
    }

    .content .lists .txt {
        display: inline-block;
        padding: 0.8em 0 1em !important;
    }

    .content .lists .suminsured {
        padding: 0 !important;
    }

    .content .lists .price {
        padding: 0 !important;
    }

    #benefit-callapse li:before {
        left: 93%;
    }

    #benefit-callapse .mobile li:before {
        left: 90%;
    }

    .side:after {
        display: none;
    }

    .content .hint:before {
        right: 82%;
    }

    .content .hint div:nth-child(2) {
        border-left: none;
    }

    .content .hint div:first-child {
        border-right: none;
    }

    .content .hint div:nth-child(2) {
        border-top: 1px #e2ce98 dashed;
    }

    .content .hint div:first-child {
        border-bottom: 1px #fffcf4 dashed;
    }

    .side:after {
        background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 79%, rgba(255,255,255,1) 99%);
        background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 79%, rgba(255,255,255,1) 99%);
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 79%, rgba(255,255,255,1) 99%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0 );
        content: "";
        display: block;
        position: relative;
        left: 100%;
        bottom: 0;
        height: 2em;
        width: 100px;
    }

    .information h3 span {
        display: flex;
        margin: 0.2em;
        flex-direction: column;
    }

    .information .doc-sent h3 b { /*display: block; padding: 0.8em;*/
    }

    .information .bank-acct input[type=checkbox] + label {
        width: 33%;
    }
    /*.list-personal .info-callapse li:before, .list-personal .info-callapse li.active:before { left: 93%; }*/
    .list-personal .overlay section {
        height: 90%;
        top: 52%;
    }

    .information .PrenameTypeahead div {
        width: 100%;
    }

    .checkstatus [class^="btn-"], .checkstatus [class*="btn-"] {
        margin: 0em;
        line-height: 30px;
        width: 90%;
    }

    .checkstatus tbody tr td {
        padding: 0em;
        background: linear-gradient(90deg, #4ccaf4 45%, #f2fbfe 45%);
    }
    /* Force table to not be like tables anymore */
    #responsive-table table, #responsive-table thead, #responsive-table tbody, #responsive-table th, #responsive-table td, #responsive-table tr {
        display: block;
    }
        /* Hide table headers (but not display: none;, for accessibility) */
        #responsive-table thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    .checkstatus tbody tr {
        border-top: #AEE5F9 3px solid;
        border-bottom: #AEE5F9 3px solid;
    }

    #responsive-table tr {
        margin: 10px 0px;
    }

        #responsive-table tr td {
            /* Behave  like a "row" */
            line-height: 40px;
            text-align: left !important;
            border: none;
            border-bottom: 1px solid #AEE5F9;
            position: relative;
            padding-left: 50% !important;
        }

    .content .lists .suminsured {
        text-align: center;
    }

    .content .lists .price {
        text-align: center;
    }

    #responsive-table tr td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        /*top: 6px;*/
        left: 0px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        /*background: #4ccaf4;*/
        padding-left: 15px;
    }

    /*
Label the data
*/
    #responsive-table td:nth-of-type(1):before {
        content: "เลขที่ใบคำขอ";
    }

    #responsive-table td:nth-of-type(2):before {
        content: "แบบประกัน";
    }

    #responsive-table td:nth-of-type(3):before {
        content: "จำนวนเงินเอาประกัน";
    }

    #responsive-table td:nth-of-type(4):before {
        content: "เบี้ยประกันภัย";
    }

    #responsive-table td:nth-of-type(5):before {
        content: "เบี้ยชำระแล้ว";
    }

    #responsive-table td:nth-of-type(6):before {
        content: "เบี้ยขาด";
    }

    #responsive-table td:nth-of-type(7):before {
        content: "งวดการชำระ";
    }

    #responsive-table td:nth-of-type(8):before {
        content: "สถานะ";
    }

    #responsive-table td:nth-of-type(9):before {
        content: "ชำระเงิน";
    }

    #responsive-table td:nth-of-type(10):before {
        content: "เอกสารแนบ";
    }

    #responsive-table td:nth-of-type(11):before {
        content: "ใบคำขอ";
    }

    .document-att td:nth-of-type(1):before {
        content: "ลำดับ" !important;
    }

    .document-att td:nth-of-type(2):before {
        content: "ประเภท" !important;
    }

    .document-att td:nth-of-type(3):before {
        content: "วันที่" !important;
    }

    .document-att td:nth-of-type(4):before {
        content: "เรียกดู" !important;
    }
}

@media screen and (max-width: 880px) {
    .content .search input[type=text], .content .status input[type=text] {
        width: 98%;
    }

    .content .search select, .content .status select {
        width: 98%;
    }

    .content .search label + select {
        margin-left: 0;
        min-width: 0px;
    }

    .content .search label + input {
        margin-left: 0;
        min-width: 0px;
    }

    .content .hint:before {
        right: 80%;
    }

    .side:after {
        display: none;
    }

    .assistant {
        bottom: 0;
    }

    #CardType {
        font-size: 14px !important;
    }

    #btn_status {
        width: 190px !important;
    }

    #btn_status_msg1 {
        display: none;
    }

    #btn_status_msg2 {
        display: unset !important;
    }
}

@media (max-width: 800px) {
    .checkstatus tbody tr:first-child {
        border-top: #AEE5F9 3px solid;
    }

    .checkstatus tbody b {
        display: inline-table;
    }
}

@media screen and (max-width: 768px) {
    .dopaLayoutForBacklaser {
        padding: 0px !important;
    }

    .dopaLayout {
        display: flex;
        padding: 0px !important;
    }

        .dopaLayout .labelbirth {
            width: 150px !important
        }

        .dopaLayout .ddmmyy {
            display: flex;
        }

            .dopaLayout .ddmmyy .dd {
                width: 65px;
                margin-right: 1px
            }

            .dopaLayout .ddmmyy .mm {
                width: 110px;
                margin-right: 1px
            }

            .dopaLayout .ddmmyy .yy {
                width: 70px;
                margin-right: 1px
            }

    .imgmoblie {
        display: block !important
    }

    .imgpc {
        display: none;
        width: 100%
    }

    .nav-products {
        display: none;
        width: 100%
    }

    .btn-products {
        display: none
    }

    .checkstatus [class^="btn-"], .checkstatus [class*="btn-"] {
        margin: 0em;
        line-height: 30px;
        width: 90%;
    }

    .checkstatus tbody tr td {
        padding: 0em;
        background: linear-gradient(90deg, #4ccaf4 45%, #f2fbfe 45%);
    }
    /* Force table to not be like tables anymore */
    #responsive-table table, #responsive-table thead, #responsive-table tbody, #responsive-table th, #responsive-table td, #responsive-table tr {
        display: block;
    }
        /* Hide table headers (but not display: none;, for accessibility) */
        #responsive-table thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    .checkstatus tbody tr {
        border-top: #AEE5F9 3px solid;
        border-bottom: #AEE5F9 3px solid;
    }

    #responsive-table tr {
        margin: 10px 0px;
    }

        #responsive-table tr td {
            /* Behave  like a "row" */
            line-height: 40px;
            text-align: left !important;
            border: none;
            border-bottom: 1px solid #AEE5F9;
            position: relative;
            padding-left: 50% !important;
        }

    .assistant .dialog:after, .assistant .dialog:before {
        display: none;
    }

    #responsive-table tr td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        /*top: 6px;*/
        left: 0px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        /*background: #4ccaf4;*/
        padding-left: 15px;
    }

    /*
Label the data
*/
    #responsive-table td:nth-of-type(1):before {
        content: "เลขที่ใบคำขอ";
    }

    #responsive-table td:nth-of-type(2):before {
        content: "แบบประกัน";
    }

    #responsive-table td:nth-of-type(3):before {
        content: "จำนวนเงินเอาประกัน";
    }

    #responsive-table td:nth-of-type(4):before {
        content: "เบี้ยประกันภัย";
    }

    #responsive-table td:nth-of-type(5):before {
        content: "เบี้ยชำระแล้ว";
    }

    #responsive-table td:nth-of-type(6):before {
        content: "เบี้ยขาด";
    }

    #responsive-table td:nth-of-type(7):before {
        content: "งวดการชำระ";
    }

    #responsive-table td:nth-of-type(8):before {
        content: "สถานะ";
    }

    #responsive-table td:nth-of-type(9):before {
        content: "ชำระเงิน";
    }

    #responsive-table td:nth-of-type(10):before {
        content: "เอกสารแนบ";
    }

    #responsive-table td:nth-of-type(11):before {
        content: "ใบคำขอ";
    }

    .document-att td:nth-of-type(1):before {
        content: "ลำดับ" !important;
    }

    .document-att td:nth-of-type(2):before {
        content: "ประเภท" !important;
    }

    .document-att td:nth-of-type(3):before {
        content: "วันที่" !important;
    }

    .document-att td:nth-of-type(4):before {
        content: "เรียกดู" !important;
    }
}

@media screen and (max-width: 1052px) {
    .choosefile {
        width: 73% !important;
    }

    .recurring {
        margin-top: 5px;
        height: 620px !important
    }
}

@media screen and (max-width: 767px) {
    .information label {
        width: 45% !important;
        font-weight: 400;
        line-height: 1;
    }

    .msg-mobile {
        display: block;
    }

    .msg-pc {
        display: none;
    }

    .planname-mobile {
        display: block;
    }

    .planname-pc {
        display: none;
    }
    /*.Head{left: 0%; margin: 1em 1em 0 1em;}
.pension-mobile { display:block;}*/
    .btn-cal {
        width: 50% !important
    }

    .pension-pc {
        display: none;
    }

    .nav-products {
        display: inline-block;
        width: 100%;
    }

    .btn-products {
        display: none !important;
    }

    .grid-col-20 {
        height: auto !important;
    }

    .martop {
        margin-top: 0.5em;
        padding-left: 0.5em;
    }

    .minheight {
        min-height: 0;
    }

    .checkstatus {
        min-height: 20.5em;
    }
    /*.dialog{ margin-top:1em;}*/
    .content {
        margin-left: 0 !important;
    }

    .assistant, .step {
        padding: 0em !important
    }

    .dialog:after {
        display: none;
    }

    .side {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    /*.step { margin-top: 1em; }*/
    .step ul > li {
        width: 24%;
        float: left;
        border-right: #f5f5f5 1px solid;
        border-radius: 10px;
        margin: 1.5px
    }

    .step .active:before {
        display: none;
    }

    .assistant {
        clear: both;
        margin-top: 0;
        display: none;
    }

        .assistant .img {
            display: none;
        }

    .navbar-right {
        position: relative;
        min-width: 100%;
        width: 100%;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        clear: both;
    }

    .navbar-collapse:after {
        padding-bottom: 1em !important;
        background: #fff !important;
    }

    .content {
        margin-left: 2em;
    }

    #benefit-callapse li:before {
        font-size: 1.5em;
    }

    .list-personal .info-callapse li:before, .list-personal .info-callapse li.active:before {
        font-size: 1.5em;
        line-height: 1;
    }

    #benefit-callapse .price b {
        padding-right: 0.3em;
        display: inline-table;
    }

    .content .recal .wapper {
        padding: 0.6em;
    }

    .content .hint:before {
        right: 87%;
    }

    .thankyou [class^="btn-"], .thankyou [class*="btn-"] {
        width: 48%;
        margin: 0px 5px
    }

    #logo-head {
        display: none;
    }

    #logo-product-small {
        display: block !important;
    }

    #link-logo {
        padding-right: 0px;
    }

    #logo-bla {
        display: none !important;
    }
}

@media screen and (max-width: 639px) {
    .address {
        width: 10% !important;
    }

    .call {
        width: 90% !important;
    }

    .address .pull-left {
        display: none;
    }

    .step span {
        display: none;
    }

    .footer .address {
        width: 15% !important;
    }

    .footer .call {
        width: 85% !important;
    }
    /*.user { display: none; }*/
    .content .search input[type=text], .content .status input[type=text] {
        width: 100%;
    }

    .content .search select, .content .status select {
        width: 96%;
    }

    .content .hint:before {
        display: none;
    }

    .content .hint {
        padding-left: 1em;
    }

    .information .check {
        text-align: center;
    }

        .information .check button {
            display: block;
            margin-bottom: 1em;
            width: 100%;
        }

    /*.list-personal .info-callapse li:before, .list-personal .info-callapse li.active:before { left: 90%; }*/
}

@media screen and (min-width: 640px) {
    .step i {
        display: none;
    }
}

@media screen and (max-width: 611px) {
    .check > div > span {
        display: none !important;
    }

    .thankyou [class^="btn-"], .thankyou [class*="btn-"] {
        width: 48%;
        margin: 0.5em 0em;
    }
}

@media screen and (max-width: 525px) {
    .check > div > span {
        display: none !important;
    }

    #benefit-callapse span {
        display: block;
    }

    #benefit-callapse .mobile li:before {
        left: 83% !important; /*padding-top: 0.4em;*/
        display: inline-table;
    }

    #benefit-callapse li:before {
        left: 90%; /*padding-top: 0.4em;*/
        display: inline-table;
    }

    #benefit-callapse li.active:before { /*padding-bottom: 0.4em;*/
        display: inline-table;
    }

    #benefit-callapse .price b {
        padding-top: 0.7em;
        padding-right: 0.8em;
        display: inline-table;
    }

    .information h3 span input[type=checkbox] + label {
        width: 100%; /*margin-top: 0.5em;*/
    }

    .progress .progress-bar b {
        display: block;
    }

    .information .bank-acct label {
        width: 30% !important;
    }

    .information .hbenefit .btn span {
        display: none;
    }

    .information .bank-acct input[type=text], .information .bank-acct select, .information .select2-container {
        width: 60% !important;
    }

    .list-personal .cusinfo b {
        display: block;
    }

    .list-personal .cusinfo label {
        padding-left: 0;
    }

    .list-personal .cusinfo button {
        margin-top: 0.8em;
    }
}

@media screen and (max-width: 490px) {
    .choosefile {
        width: 100% !important;
    }

    .browse {
        width: 100% !important;
    }
}

@media screen and (max-width: 480px) {
    .check > div > span {
        display: none !important;
    }

    .footer .address {
        width: 20% !important;
    }

    .footer .call {
        width: 80% !important;
    }

    .recurring {
        margin-top: 5px;
        height: 435px !important
    }
    /*.user { display: none; }*/
    .avatar .menu {
        margin-right: 1em;
    }

    .content .lists .suminsured {
        text-align: center
    }

    .content .lists .price {
        color: #00b3f0;
        text-align: center;
    }

    #benefit-callapse span {
        display: inline-block;
    }

    #benefit-callapse .price b {
        padding-top: 0em;
        padding-right: 0.3em;
        display: inline-table;
    }

    .information .bank-acct label {
        width: 100%;
    }

    .information .bank-acct #uploadFile {
        width: 71%;
    }

    .information .bank ul {
        padding: 0;
    }

    .information .bank-acct input[type=text], .information select, .information .select2-container {
        width: 100% !important;
    }

    .information input[type=text], .information input[type=number], .information select {
        width: 100%;
        vertical-align: middle;
        margin-right: 0em;
        height: 25px;
    }

    .thankyou [class^="btn-"], .thankyou [class*="btn-"] {
        width: 100%;
    }

    .list-personal .info-callapse li label {
        display: none;
    }

    .list-personal .info-callapse li input[type=text] {
        margin-left: 1em;
    }
}

@media screen and (max-width: 423px) {
    .check > div > span {
        display: none !important;
    }

    .information input[type=text], .information select {
        width: 100%;
        vertical-align: middle;
    }

    .information input[type=text], .information input {
        width: 100%;
        vertical-align: middle;
    }

    .step ul > li {
        display: block;
        background: rgb(244 244 244);
        text-align: center;
        margin-bottom: -5px;
        margin-top: 0px;
        border-radius: 5px
    }

    .step .active {
        background: #00B3F0 none repeat scroll 0% 0%;
        color: #004C9C;
    }

    .step .disable {
        background: #DEDCDC none repeat scroll 0% 0%;
        color: rgb(244 244 244);
    }

    .information .PrenameTypeahead {
        display: block;
        width: 100%;
    }

    #logo-bla {
        /*display: none !important;*/
    }

    #link-logo {
        padding-right: 0px;
    }
}

@media screen and (max-width: 399px) {
    .fa-calculator {
        display: none !important
    }
}

@media screen and (max-width: 375px) {
    .status span {
        display: block;
    }

    .list-personal .info-callapse li:before, .list-personal .info-callapse li.active:before {
        left: 88%;
    }
}

@media screen and (min-width: 361px) {
    .slogo {
        display: none;
    }
}

@media screen and (max-width: 360px) {
    .call b {
        font-size: 1.5em;
    }

    .avatar .menu {
        margin-right: 0em;
    }

    .mlogo {
        display: none;
    }

    #benefit-callapse li:before {
        left: 85%;
        font-size: 1.5em;
        line-height: 1;
    }
}

@media screen and (max-width: 335px) {
    /*.avatar .toolinfo { float: left; }*/
    .avatar .img {
        margin-right: 0.5em;
    }

    .call b {
        font-size: 1.2em;
    }

    .recurring {
        margin-top: 5px;
        height: 350px !important
    }
}

@media screen and (max-height: 1024px) {
    .recurring {
        margin-top: 5px;
        height: 700px !important
    }
}

@media screen and (max-height: 768px) {
    .recurring {
        margin-top: 5px;
        height: 620px !important
    }
}

@media screen and (max-height: 667px) {
    .recurring {
        margin-top: 5px;
        height: 550px !important
    }
}

@media screen and (max-height: 640px) {
    .recurring {
        margin-top: 5px;
        height: 470px !important
    }
}

@media screen and (max-height: 480px) {
    .recurring {
        margin-top: 5px;
        height: 390px !important
    }
}

@media screen and (max-height: 414px) {
    .recurring {
        margin-top: 5px;
        height: 330px !important
    }
}

@media screen and (max-height: 375px) {
    .recurring {
        margin-top: 5px;
        height: 300px !important
    }
}

@media screen and (max-height: 320px) {
    .recurring {
        margin-top: 5px;
        height: 250px !important
    }
}

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}

    .fileUpload input.upload {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        font-size: 20px;
        cursor: pointer;
        opacity: 0;
        filter: alpha(opacity=0);
    }

.swal2-confirm confirm-class swal2-styled {
    font-size: 16px;
}

.swal2-cancel swal2-styled {
    font-size: 16px;
}

.status .select2-container {
    margin-left: unset;
    max-width: unset;
    min-width: 160px;
}

.status .select2-container--default .select2-selection--single {
    border-radius: 4px;
    border: #FFF 1px solid;
    background: #FFF;
    color: #000;
    margin-bottom: 5px;
    padding: 0 0 0 0.5em;
    width: auto;
    height: auto;
}

    .status .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #444;
        line-height: inherit;
        font-size: inherit;
        max-width: 400px;
    }

    .status .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 25px;
        position: absolute;
        top: 1px;
        right: 1px;
        width: 20px;
    }

.search .select2-container {
    margin-left: 0.8em;
    max-width: 160px;
    min-width: 160px;
}

.search .select2-container--default .select2-selection--single {
    border-radius: 4px;
    border: #FFF 1px solid;
    background: #FFF;
    color: #000;
    margin-bottom: 5px;
    padding: 0 0 0 0.5em;
    width: auto;
    height: auto;
}

    .search .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #444;
        line-height: inherit;
        font-size: inherit;
        max-width: 400px;
    }

    .search .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 25px;
        position: absolute;
        top: 1px;
        right: 1px;
        width: 20px;
    }

/*@media (min-device-width : 768px) {
        .desktop_bubble_chat {
            height: 410px;
            max-height: 410px;
            width: 312px;
            position: fixed;
            bottom: 1em;
            right: 1em;
            border: none;
            outline: none;
            box-sizing: border-box;
            z-index: 1001;
            overflow: hidden;
            padding: 0;
        }
    }

    @media (max-device-width: 768px) {
        .desktop_bubble_chat {
            height: 100%;
            max-height: 100%;
            width: 100%;
            position: fixed;
            bottom: 0;
            right: 0;
            border: none;
            outline: none;
            box-sizing: border-box;
            z-index: 1001;
            overflow: hidden;
            padding: 0;
        }
    }

    @media (min-width : 768px) {
        .desktop_bubble_chat {
            height: 410px;
            max-height: 410px;
            width: 312px;
            position: fixed;
            bottom: 1em;
            right: 1em;
            border: none;
            outline: none;
            box-sizing: border-box;
            z-index: 1001;
            overflow: hidden;
            padding: 0;
        }
    }

    @media (max-width: 768px) {
        .desktop_bubble_chat {
            height: 100%;
            max-height: 100%;
            width: 100%;
            position: fixed;
            bottom: 0;
            right: 0;
            border: none;
            outline: none;
            box-sizing: border-box;
            z-index: 1001;
            overflow: hidden;
            padding: 0;
        }
    }

    .mobile_bubble_chat {
        height: 100%;
        max-height: 100%;
        width: 100%;
        position: fixed;
        bottom: 0;
        right: 0;
        border: none;
        outline: none;
        box-sizing: border-box;
        z-index: 1001;
        overflow: hidden;
        padding: 0;
    }

    .minimized_chat {
        height: 56px;
    }

#footer-bontact-btn {
    background-color: rgba(185,233,249,.97);
   
    background-image: url('../images/chat.png');
    background-position: center right .5rem;
    background-repeat: no-repeat;
    background-size: auto 90%;
    border: none;
    border-radius: 5px;
    bottom: 2rem;
    color: #0057a8;
    cursor: pointer;
    font-size: 22px;
    font-size: 1.375rem;
    font-weight: 400;
    outline: 0 !important;
    padding: 1rem 4rem 1rem 1rem;
    position: fixed;
    right: 2.5rem;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    z-index: 1000;
}*/