/* Minification failed. Returning unminified contents.
(688,23): run-time error CSS1038: Expected hex color, found '#d9d9d9l'
 */
@font-face {
    font-family: 'sanfranciscodisplayregular';
    src: url('../fonts/sanfranciscodisplayregular.otf');
    src: local('☺'), url('../fonts/sanfranciscodisplayregular.otf') format('woff'), url('../fonts/sanfranciscodisplayregular.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sanfranciscodisplaymedium';
    src: url('../fonts/sanfranciscodisplaymedium.otf');
    src: local('☺'), url('../fonts/sanfranciscodisplaymedium.otf') format('woff'), url('../fonts/sanfranciscodisplaymedium.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sanfranciscodisplaysemibold';
    src: url('../fonts/sanfranciscodisplaysemibold.otf');
    src: local('☺'), url('../fonts/sanfranciscodisplaysemibold.otf') format('woff'), url('../fonts/sanfranciscodisplaysemibold.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.field-validation-error {
    color: red;
    font-size: 14px;
}
/* =Reset default browser CSS.
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

:focus {
    outline: 0;
}

ol, ul {
    list-style: none;
}

table {
    border-collapse: separate;
    border-spacing: 0;
}

caption, th, td {
    font-weight: normal;
    text-align: left;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}

blockquote, q {
    quotes: "" "";
}

a img {
    border: 0;
}

figure {
    margin: 0
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

*, ::after, ::before {
    box-sizing: border-box;
}
/* -------------------------------------------------------------- */

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

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

body {
    font-family: 'sanfranciscodisplayregular';
    line-height: 1;
    font-size: 16px;
    color: #555;
    min-height: 100%;
    position: relative;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a:hover, a:focus, a:hover p, select:hover, select:focus, select:active {
    outline: none !important;
}

a, a:link, a:active {
    text-decoration: none;
    outline: none !important;
    color: #008bef;
}

    a:hover {
        text-decoration: underline;
    }

.clearfix {
    clear: both;
}

.container {
    width: 950px;
    margin: auto;
    display: block;
}

.clr {
    clear: both;
    display: block;
    line-height: 0;
    font-size: 0;
}

.header {
    height: 60px;
    border-bottom: 1px solid #d9d9d9;
    background-color: #0070C0;
    position: relative;
    z-index: 1;
}

    .header .logo {
        float: left;
    }

        .header .logo a img {
            margin-top: 12px;
        }

    .header .language {
        float: right;
    }

        .header .language ul {
            font-size: 16px;
            color: #7f7f7f;
            margin-top: 16px;
            width: 104px;
        }

            .header .language ul.bor {
                background: #fff;
                -webkit-border-radius: 8px;
                border-radius: 0;
                -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
                box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
            }

            .header .language ul li {
                padding: 6px 10px;
                z-index: 2;
                cursor: pointer;
                position: relative;
            }

                .header .language ul li:not(.init) {
                    width: 84px;
                    display: none;
                }

                    .header .language ul li:not(.init):hover, .header .language ul li.selected:not(.init) {
                        background: #dedede;
                    }

                .header .language ul li.init {
                    cursor: pointer;
                }

                .header .language ul li .caret {
                    display: none;
                    width: 0;
                    height: 0;
                    margin-left: 2px;
                    vertical-align: middle;
                    border-top: 4px dashed;
                    border-top: 4px solid\9;
                    border-right: 4px solid transparent;
                    border-left: 4px solid transparent;
                    color: #7f7f7f;
                    position: absolute;
                    top: 11px;
                    right: 10px;
                }

                .header .language ul li.init .caret {
                    display: inline-block;
                }

#main {
    min-height: 600px;
    padding-bottom: 200px;
}

.bd-nomal {
    width: 420px;
    flex-shrink: 0;
    background: #fff;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    display: block;
    text-align: center;
    margin: 50px auto;
    padding: 40px 15px;
}

    .bd-nomal.bd-nomal-dou {
        width: 70%;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        background: #fff;
        position: relative;
        margin: auto;
        padding-bottom: 65px;
    }

        .bd-nomal.bd-nomal-dou form {
            width: 350px;
            margin: auto;
            height: 100%;
        }

            .bd-nomal.bd-nomal-dou form .col-6.a:first-child {
                border-right: 1px solid #d9d9d9
            }

        .bd-nomal.bd-nomal-dou p {
            padding: 0px 15px;
        }

        .bd-nomal.bd-nomal-dou form label {
            width: 25%;
            display: inline-block
        }

.title-logo {
    text-align: center
}

.bd-nomal.bd-nomal-dou form.width100 {
    width: 100%;
}

.center {
    margin: auto;
}

.box420 {
    width: 420px;
    margin: auto;
}

.title {
    font-size: 30px;
    color: #5EA8DE;
    text-align: center;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.social {
    width: auto;
    margin: 15px auto 0;
    text-align: center;
}

    .social a {
        width: 63px;
        height: 40px;
        box-sizing: border-box;
        border-radius: 3px;
        border: 1px solid #d9d9d9;
        display: inline-block;
        margin: 4px;
    }

        .social a:first-child {
            margin-left: 0;
        }

        .social a:last-child {
            margin-right: 0;
        }

.f {
    background: url(../images/icon-face.png) no-repeat center;
}

.g {
    background: url(../images/icon-google.png) no-repeat center;
}

.y {
    background: url(../images/icon-yahoo.png) no-repeat center;
}

.d {
    background: url(../images/icon-duo.png) no-repeat center;
}

.qr {
    background: url(../images/icon-rqcode.png) no-repeat center;
}

.f:hover {
    background: url(../images/icon-face-hover.png) no-repeat center;
}

.g:hover {
    background: url(../images/icon-google-hover.png) no-repeat center;
}

.y:hover {
    background: url(../images/icon-yahoo-hover.png) no-repeat center;
}

.d:hover {
    background: url(../images/icon-duo-hover.png) no-repeat center;
}


.container .header1 {
    width: 100%;
    height: 32px;
    color: #444;
    text-indent: 20px;
    border-bottom: 1px solid #e3e2e2;
    background: url(../images/icon.png) no-repeat -301px 0;
    line-height: 24px;
    margin: 10px 0px 0px;
    padding: 4px 0;
}

.box_news {
    line-height: 20px;
    font-size: 16px;
    text-align: justify;
    padding: 10px 0;
}

.container .header1 a {
    color: #444;
}

.container .header1.home {
    background: url(../images/iconB.png) no-repeat 0px -1px
}

.container span.next {
    width: 12px;
    height: 10px;
    display: inline-block;
    background: url(../images/iconB.png) no-repeat -2px -32px #FFF;
    padding: 0px 4px;
    display: inline-block
}

.container span.none {
    background: #fff;
    padding: 0px 7px 0px 5px
}

.container .heading1 span.icon-colap {
    cursor: pointer;
    float: right;
    position: absolute;
    text-align: center;
    width: 20px;
    height: 20px;
    right: 0px;
    top: -5px;
    background: none;
    padding: 0px;
    font-size: 20px;
}

    .container .heading1 span.icon-colap.open:after {
        content: "-";
        color: #aeacac
    }

    .container .heading1 span.icon-colap.close:after {
        content: "+";
        color: #aeacac
    }

.social a:hover {
    background-color: #0070c0;
    transition: background-color 0.5s;
}

.buttom-collap {
    padding: 8px;
    border-radius: 4px;
    width: auto;
    float: left;
    margin-top: 15px;
    /*display:none;  border:1px solid #d9d9d9; */
    position: absolute;
    left: 0px;
}

    .buttom-collap span {
        width: 25px;
        height: 2px;
        background: #d9d9d9;
        display: block;
        margin: 2px 5px;
    }

.menu-mobile {
    position: relative;
    display: block;
}

.menu-mobile-ul {
    width: 100%;
    display: block;
    display: none;
    position: absolute;
    top: 10px;
    z-index: 99;
}

.menu-mobile-li {
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    background: #f2f2f2;
}

    .menu-mobile-li a {
        color: #7f7f7f
    }

.show {
    display: block;
}

.hide {
    display: none;
}


/**************info******************/
.strong, b, strong {
    font-family: sanfranciscodisplaysemibold;
    font-weight: normal
}

.user {
    float: left;
    width: calc(100% - 135px);
    text-align: right;
    line-height: 60px;
    font-size: 15px;
    color: #fff;
}

.col-7 {
    width: 60.241%;
    float: left
}

.col-5 {
    width: 39.579%;
    float: left
}

.dcol-7 {
    width: 52.33333333%;
    float: left
}

.dcol-5 {
    width: 47.66666667%;
    float: left
}

.info_user, .update_user {
    margin-top: 30px;
    clear: both;
    display: block;
}

    .info_user .group .line, .update_user .group .line {
        font-family: 'sanfranciscodisplayregular';
        padding: 15px 0px 20px;
        color: #222;
        position: relative;
        border-bottom: 1px solid #d9d9d9;
        margin: 0 15px;
        position: relative;
        height: auto;
        display: block;
        clear: both;
    }

        .info_user .group .line::after, .update_user .group .line::after {
            display: block;
            clear: both;
            content: "";
        }

        .info_user .group .line p {
            line-height: 22px;
            text-align: justify
        }

        .update_user .gr_title,
        .info_user .group .line.gr_title {
            font-family: 'sanfranciscodisplaysemibold';
            font-size: 16px;
            color: #7f7f7f;
            text-indent: 40px;
            margin: 0px 0px;
            background-color: #ececec;
            cursor: pointer;
            padding: 0px 0;
            transition: all 0.3s ease 0s;
            -moz-transition: all 0.3s ease 0s;
        }

    .update_user .gr_title {
        text-indent: 20px;
        padding: 15px 0px;
        transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
    }

    .info_user .group .gr_title a {
        display: inline-block;
        text-align: left;
        color: #222;
        text-indent: 0px;
        line-height: 47px;
    }

        .info_user .group .gr_title a:hover {
            text-decoration: none;
        }

    .info_user .group .line.gr_title span.icon-colap {
        cursor: pointer;
        float: right;
        text-align: center;
        height: 11px;
        background: none;
        padding: 0px;
        font-size: 20px;
        margin-right: 15px;
    }

        .info_user .group .line.gr_title span.icon-colap.open:after {
            content: "-";
            color: #aeacac;
        }

        .info_user .group .line.gr_title span.icon-colap.close:after {
            content: "+";
            color: #aeacac;
        }

    .info_user .group .line.first, .update_user .group .line.first {
        margin: 0px;
        font-size: 14px;
    }

        .info_user .group .line.first span, .update_user .group .line.first span {
            padding: 0px 15px;
            display: block;
            line-height: 20px;
        }

    .info_user .group .line:last-child {
        border: none;
        padding-bottom: 15px
    }

.icon-title {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin: 10px 0 0 -34px;
    background-image: url(../images/list-icon.png);
    float: left;
}

.bg_user {
    background: url(../images/icon_tit.png) no-repeat 4px 2px #ececec;
}

.bg_security {
    background: url(../images/icon_tit.png) no-repeat -22px 2px #ececec;
}

.bg_info {
    background: url(../images/icon_tit.png) no-repeat -48px 2px #ececec;
}

.bg_act {
    background: url(../images/icon_tit.png) no-repeat -73px 2px #ececec;
}

.bg_details {
    background: url(../images/icon_tit.png) no-repeat -97px 2px #ececec;
}

.update_user .group,
.info_user .group {
    width: 100%;
    box-sizing: border-box;
    border-radius: 3px;
    margin-bottom: 15px;
}

.update_user .line {
    line-height: 24px;
}

.update_user .group {
    border-radius: 3px;
    border: 1px solid #d9d9d9;
    width: 75%;
    margin: auto;
    margin-top: 30px;
}

.info_user .group.w90 {
    width: 95%;
    overflow: hidden;
    border: 1px solid #d9d9d9;
}

    .info_user .group.w90.active {
        height: auto
    }

    .info_user .group.w90 .gr_title a {
        width: 100%;
    }

.block-info {
    margin-bottom: 15px;
    border: 1px solid #d9d9d9l;
    display: none;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
}

    .block-info.active, .block-info.open {
        display: block
    }

.box {
    display: none;
}

    .box.active {
        display: block
    }

.waning {
    background: url(../images/icon-exist.png) no-repeat left center;
    width: 12px;
    height: 11px;
    display: block;
    float: right;
}

.ok {
    background: url(../images/icon-success.png) no-repeat left center;
    width: 16px;
    height: 16px;
    display: block;
    float: right;
}

.info_user .group .error {
    color: #d50000;
}

.info_user .group .success {
    color: #00d54b;
}

.info_user .group .line > label {
    width: 30%;
    display: inline-block;
    color: #7f7f7f;
    vertical-align: top;
    float: left;
    padding-top: 7px;
}

    .info_user .group .line > label.legend {
        width: 17%;
        float: left;
        padding-top: 5px;
        color: #222;
        font-weight: bold;
    }

.value {
    width: 65%;
    display: inline-block;
    padding-top: 3px;
}

.info_user .group .line input[type="radio"] {
    display: none;
}

.icon {
    font-weight: normal;
    text-indent: 20px;
}

.i_mo {
    background: url(../images/icon-mobile.png) no-repeat left center
}

.i_pad {
    background: url(../images/icon-ipad.png) no-repeat left center;
}

.i_lap {
    background: url(../images/icon-laptop.png) no-repeat left center
}

.i_pc {
    background: url(../images/icon-pc.png) no-repeat left center
}



/**************FORM**************/
.form-group {
    font-size: 16px;
    text-align: left;
    line-height: 25px;
    margin-top: 25px;
    position: relative;
    display: block;
}

    .form-group::after {
        display: block;
        content: "";
        clear: both;
    }

    .form-group.margintop10 {
        margin-top: 10px;
    }

.form-control, .form-box {
    width: 100%;
    height: 26px;
    box-sizing: border-box;
    font-size: 16px;
    color: #7f7f7f;
    border: none;
    border-bottom: 1px solid #d9d9d9;
    display: block;
    font-family: sanfranciscodisplayregular;
}

.col-8 .form-group:first-child {
    margin-top: 0px;
}

.form-group.inline {
    display: flex;
}

    .form-group.inline label {
        width: 30%;
    }

    .form-group.inline .form-control, .form-group.inline .form-box {
        width: 70%;
    }

.value .form-group {
    margin-top: 0px;
}

.value .form-control {
    border: 1px solid #d9d9d9;
    height: 35px;
    border-radius: 4px
}

.form-group.has-error .form-control {
    border-color: Red;
}

select.form-control {
    border: 1px solid #d9d9d9;
    padding: 5px;
    height: 32px;
    margin-right: 10px;
}

    select.form-control:last-child {
        margin-right: 0px;
    }

.highlights {
    font-size: 16px;
    color: #7f7f7f;
    position: absolute;
    top: 0;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transition: all .3s cubic-bezier(0.4,0,0.2,1);
    transition: all .3s cubic-bezier(0.4,0,0.2,1);
    -webkit-transition-property: color,bottom,transform;
    transition-property: color,bottom,transform;
    pointer-events: none;
    text-decoration: none;
    left: 0px;
}

.reset-captcha {
    width: 30px;
    height: 22px;
    display: inline-block;
    background: url(../images/icon-reset.png);
    vertical-align: top;
    cursor: pointer;
    margin-top: 3px;
}
/*.w_450 form p.act ._input,*/
.form-group .form-control:not([disbaled]):focus {
    border-bottom: 2px solid #0070c0;
}

.form-group.act .form-control ~ .highlights {
    color: #7f7f7f;
}

.form-group.act .form-control ~ .highlights,
.form-group .form-control:not([disbaled]):focus ~ .highlights {
    transform: scale(.75) translateY(-34px);
}

.btn {
    width: 100%;
    height: 38px;
    background-color: #fff;
    color: #7f7f7f;
    text-transform: uppercase;
    line-height: 38px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #d9d9d9;
    display: inline-block;
    -webkit-appearance: none;
    appearance: none;
}

.btn-primaty {
    float: right;
    background-color: #0070c0;
    color: #fff !important;
}

.btn:hover {
    text-decoration: none !important;
    transition: background-color .5s;
    background-color: #dedede;
}

.btn-primaty:hover {
    background-color: #008bef;
    transition: background-color .5s;
}

.w_450 form p label {
    color: #d50000;
    font-size: 12.12px;
    position: absolute;
    top: -23px;
    left: 0;
    display: none;
}

.error_msg {
    background: red;
    line-height: 18px;
    color: #fff !important;
    font-size: 12px;
    padding: 6px 4px;
    position: absolute;
    top: -4px;
    right: -208px;
    border-radius: 3px;
    width: 200px;
}

    .error_msg:before {
        border-color: transparent transparent red;
        border-image: none;
        border-style: solid;
        border-width: 8px;
        content: "";
        display: block;
        float: left;
        height: 0;
        transform: rotate(-90deg);
        position: absolute;
        left: -15px;
    }

    .error_msg.true {
        background: green;
    }

        .error_msg.true:before {
            border-color: transparent transparent green;
        }

.form-group input[type="radio"] {
    display: none;
}

input[type="radio"] + label span {
    display: inline-block;
    width: 19px;
    height: 19px;
    margin: -2px 6px 0 0px;
    vertical-align: middle;
    background: url(../images/icon-radio.png) no-repeat;
    cursor: pointer;
}

input[type="radio"]:checked + label span {
    background: url(../images/icon-radio-checked.png) no-repeat;
}

.tit {
    text-align: justify
}
/**************END FORM**************/
.eys {
    width: 26px;
    height: 26px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}

    .eys.close {
        background: url(../images/eys-close.png) no-repeat center #fff;
    }

    .eys.open {
        background: url(../images/eys-open.png) no-repeat center #fff;
    }

.refesh {
    width: auto;
    height: auto;
    background: #fff;
    opacity: 0.5;
    display: inline-block;
}

.butRefesh {
    background: #5ea8de none repeat scroll 0 0;
    border-radius: 5px;
    color: #fff !important;
    display: inline-block;
    height: 27px;
    left: calc( 50% - 44px);
    line-height: 27px;
    position: absolute;
    text-align: center;
    top: calc( 50% - 14px);
    width: 88px;
    z-index: 5;
}

.footer {
    height: 120px;
    border-top: 1px solid #d9d9d9;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}

    .footer p {
        text-align: center;
        color: #7f7f7f;
        line-height: 25px;
    }

        .footer p:first-child {
            margin-top: 35px;
        }

        .footer p a {
            color: #7f7f7f;
            font-size: 16px;
            text-align: center;
        }

            .footer p a:hover {
                text-decoration: underline !important;
            }

.w750 {
    width: 750px;
    padding: 40px 15px;
}

#emailtit {
    display: none;
}

.row {
    width: auto;
    margin-left: 15px;
    margin-right: 15px;
}

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

.left {
    float: left
}

.right {
    float: right
}

.grid {
    display: grid;
}

.flex {
    display: flex
}

.flexwrap {
    display: flex;
    flex-wrap: wrap;
}

.color-hover {
    color: #0070c0 !important;
}

.margin-non {
    margin: 0px;
}

.col-4, .col-6 {
    position: relative
}

.col-4 {
    width: 33.333333%
}

.col-6 {
    width: 50%;
}

.col-8 {
    width: 66.666666%
}

.margin-right15 {
    margin-right: 15px;
}

.text-small {
    font-size: 14px;
}

option, select {
    text-align: center !important;
}

.w30 {
    width: 30%
}

.w50 {
    width: 50% !important
}

.bordernon {
    border: none !important;
    box-shadow: none;
}

.btntab {
    display: none;
}

.paddingbottom {
    padding-bottom: 40px;
}

.vertical_mid {
    vertical-align: middle
}

.line_height_mid {
    line-height: 38px;
}

.margin_top40 {
    margin-top: 40px;
}

.margin_topnone {
    padding: 1px 15px;
}

.margin_botnone {
    margin-bottom: 10px;
}

.margin_top10 {
    margin-top: 10px;
}

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

.lineheightnone {
    line-height: normal !important
}
/* end User Style */
.form-control::-webkit-input-placeholder {
    font-family: 'sanfranciscodisplayregular', Arial, Helvetica, sans-serif;
}

.form-control:-ms-input-placeholder {
    font-family: 'sanfranciscodisplayregular', Arial, Helvetica, sans-serif;
}

.form-control:-moz-placeholder {
    font-family: 'sanfranciscodisplayregular', Arial, Helvetica, sans-serif;
}

.form-control::-moz-placeholder {
    font-family: 'sanfranciscodisplayregular', Arial, Helvetica, sans-serif;
}

.non {
    border: none !important;
    padding-bottom: 0px !important;
}

input {
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0px;
}

    input[type="checkbox"] {
        -webkit-appearance: checkbox;
    }

.menu-left {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    top: 0px;
    z-index: 2;
    display: none;
    -moz-transition: all 0.3s ease 0s;
}

.menu-left-ul {
    height: 100%;
    background: #fff;
    width: 360px;
    position: relative;
    z-index: 2;
    transition: all 0.6s ease 0s;
}

.menu-left-li {
}

    .menu-left-li:hover {
        background: #0070C0
    }

    .menu-left-li a {
        width: 100%;
        height: 100%;
        color: #555;
        display: inline-block;
        font-size: 18px;
        padding: 20px;
    }

    .menu-left-li:hover a {
        color: #fff;
        text-decoration: none;
    }

.overlay-menu {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.5;
    background: #888;
    z-index: 1;
}

.Close-menu {
    font-size: 20px;
    text-align: right;
    float: right;
    color: #fff;
    padding: 20px;
}
/* User Style popup css */
.opatiti {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.3;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    overflow: hidden;
}

.poDelLog {
    width: 400px;
    min-height: 200px;
    position: fixed;
    left: 40%;
    top: 10%;
    background: #fff;
    z-index: 11;
    color: #000
}

    .poDelLog .Title {
        height: 45px;
        line-height: 45px;
        text-indent: 10px;
        background: #0070C0;
        color: #fff;
        text-transform: uppercase;
    }

        .poDelLog .Title .close {
            width: 30px;
            height: 40px;
            display: inline-block;
            float: right;
            cursor: pointer;
            font-weight: bold;
            font-size: 20px;
        }

    .poDelLog .Content {
        min-height: 80px;
    }

        .poDelLog .Content .text {
            margin: 0 10px;
            padding: 20px 0;
            border-bottom: 1px solid #ccc;
            line-height: 20px;
        }

        .poDelLog .Content .list_decive, .list_decive ul {
            min-height: 30px;
            overflow: hidden;
        }

            .poDelLog .Content .list_decive ul {
                list-style: none;
                padding: 0px;
                margin: 0 10px;
            }

                .poDelLog .Content .list_decive ul li {
                    width: 100%;
                    min-height: 40px;
                    border-bottom: 1px solid #ccc;
                    line-height: 45px;
                }

                    .poDelLog .Content .list_decive ul li input {
                        line-height: 50px;
                    }

                    .poDelLog .Content .list_decive ul li i {
                        line-height: 0px;
                        height: 15px;
                        text-indent: 10px;
                    }

    .poDelLog .bottom {
        height: 60px;
        margin: 20px 10px;
        line-height: 40px;
    }

#Contain-poDelLog {
    display: none;
}


.step-bar {
    padding-top: 40px;
    padding-bottom: 40px;
    margin: auto;
}

    .step-bar ul {
        display: block;
        width: 560px;
        margin: 0 auto;
        background-color: #e3e2e2;
        list-style: none;
    }

    .step-bar li, .step-bar ul {
        height: 12px;
        border-radius: 10px;
    }

    .step-bar li {
        float: left;
    }

        .step-bar li.step1 {
            width: 25%;
        }

        .step-bar li.step2 {
            width: 25%;
        }

        .step-bar li.step3 {
            width: 25%;
        }

        .step-bar li.step4 {
            width: 25%;
        }

        .step-bar li.active, .step-bar li.passed {
            background-color: #5ea8de;
        }

        .step-bar li .stepnode {
            float: right;
            width: 26px;
            height: 26px;
            margin-top: -8px;
            margin-right: -10px;
            position: relative;
            background-color: #e3e2e2;
            border-radius: 50%;
        }

        .step-bar li.active .stepnode {
            background-color: #5ea8de;
        }

        .step-bar li .stepnode em {
            font-size: 15px;
            font-weight: 700;
            color: #888;
            font-style: normal;
            line-height: 26px;
            padding-left: 8px;
        }

        .step-bar li.active .stepnode em {
            color: #fff;
        }

        .step-bar li .stepname {
            display: block;
            margin-top: -30px;
            text-align: center;
            color: #999;
            margin-right: -91%;
            font-size: 13px;
        }

        .step-bar li.active .stepname {
            color: #5ea8de;
        }


@media only screen and (max-width: 979px) {
    .container {
        width: unset;
        padding-right: 15px;
        padding-left: 15px;
        display: block
    }

    .header .logo {
        text-align: center;
        float: unset;
    }

    .bd-nomal {
        border: none;
        box-shadow: none;
    }

    .error_msg {
        top: 30px;
        right: unset;
        left: 0px;
        z-index: 2;
        width: auto
    }

        .error_msg:before {
            transform: unset;
            top: -13px;
            left: 10px;
        }

    .show {
        display: none;
    }

    .hide {
        display: block;
    }

    .col-7, .col-5, .update_user .group, .col-8 {
        width: 100%;
        float: unset
    }

    .info_user .group.w90 {
        width: 100%
    }

    .block-info {
        display: block
    }

    .buttom-collap {
        display: block;
    }

    .user {
        width: 100%;
        padding: 24px 0 0px 0;
        line-height: normal
    }

    .w750 {
        width: auto;
    }

    .user {
        color: #222;
    }

        .user a {
            color: #008bef
        }
}

@media only screen and (max-width: 736px) {
}

@media only screen and (max-width: 568px) {
}

@media only screen and (max-width: 667px) {
}

@media only screen and (max-width: 480px) {
    .bd-nomal {
        width: 100%;
        padding: 20px 0px;
        margin: 15px auto;
    }

    .info_user, .update_user {
        margin-top: 15px;
    }

    .box420 {
        width: 100%;
    }

    .form-group {
        width: auto;
        font-size: 14px !important;
    }

    .title {
        padding: 0px 0 5px;
        margin-bottom: 0px;
        font-size: 25px;
    }

    .highlights {
        font-size: 13.5px;
    }

    .form-group a {
        font-size: 14px !important;
    }

    .info_user .group .line > label {
        width: 35%;
    }

    .form-group.col-6 {
        width: 100%
    }

    .form-group.inline {
        display: block;
        margin-top: 10px;
    }

    .update_user .group {
        margin-top: 17px;
    }

    .form-group.inline .form-control, .form-group.inline .form-box {
        width: 100%
    }
    /*.info_user .group .line > label{width:100%; padding-bottom:10px;}*/
    .social a {
        width: 16.5%;
    }

    .menu-left-ul {
        width: 70%;
    }

    .menu-left-li a {
        padding: 10px;
    }

    .poDelLog {
        width: 90%;
    }
}

@media only screen and (max-width: 400px) {
    .btn-login {
        width: 100%;
    }
}

@media only screen and (max-width: 320px) {
    .dcol-7 {
        width: 66.333333%;
        float: left
    }

    .dcol-5 {
        width: 33.66666667%;
        float: left
    }
}

* {
    font-family: 'PT Sans Caption', sans-serif, 'arial', 'Times New Roman';
}
/* Error Page */
.error .clip .shadow {
    height: 180px; /*Contrall*/
}

.error .clip:nth-of-type(2) .shadow {
    width: 130px; /*Contrall play with javascript*/
}

.error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow {
    width: 250px; /*Contrall*/
}

.error .digit {
    width: 150px; /*Contrall*/
    height: 150px; /*Contrall*/
    line-height: 150px; /*Contrall*/
    font-size: 120px;
    font-weight: bold;
}

.error h2 /*Contrall*/ {
    font-size: 32px;
}

.error .msg /*Contrall*/ {
    top: -190px;
    left: 30%;
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 32px;
}

.error span.triangle /*Contrall*/ {
    top: 70%;
    right: 0%;
    border-left: 20px solid #535353;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}


.error .container-error-404 {
    margin-top: 10%;
    position: relative;
    height: 250px;
    padding-top: 40px;
}

    .error .container-error-404 .clip {
        display: inline-block;
        transform: skew(-45deg);
    }

.error .clip .shadow {
    overflow: hidden;
}

.error .clip:nth-of-type(2) .shadow {
    overflow: hidden;
    position: relative;
    box-shadow: inset 20px 0px 20px -15px rgba(150, 150, 150,0.8), 20px 0px 20px -15px rgba(150, 150, 150,0.8);
}

.error .clip:nth-of-type(3) .shadow:after, .error .clip:nth-of-type(1) .shadow:after {
    content: "";
    position: absolute;
    right: -8px;
    bottom: 0px;
    z-index: 9999;
    height: 100%;
    width: 10px;
    background: linear-gradient(90deg, transparent, rgba(173,173,173, 0.8), transparent);
    border-radius: 50%;
}

.error .clip:nth-of-type(3) .shadow:after {
    left: -8px;
}

.error .digit {
    position: relative;
    top: 8%;
    color: white;
    background: #07B3F9;
    border-radius: 50%;
    display: inline-block;
    transform: skew(45deg);
}

.error .clip:nth-of-type(2) .digit {
    left: -10%;
}

.error .clip:nth-of-type(1) .digit {
    right: -20%;
}

.error .clip:nth-of-type(3) .digit {
    left: -20%;
}

.error h2 {
    color: #A2A2A2;
    font-weight: bold;
    padding-bottom: 20px;
}

.error .msg {
    position: relative;
    z-index: 9999;
    display: block;
    background: #535353;
    color: #A2A2A2;
    border-radius: 50%;
    font-style: italic;
}

.error .triangle {
    position: absolute;
    z-index: 999;
    transform: rotate(45deg);
    content: "";
    width: 0;
    height: 0;
}

/* Error Page */
@media(max-width: 767px) {
    /* Error Page */
    .error .clip .shadow {
        height: 100px; /*Contrall*/
    }

    .error .clip:nth-of-type(2) .shadow {
        width: 80px; /*Contrall play with javascript*/
    }

    .error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow {
        width: 100px; /*Contrall*/
    }

    .error .digit {
        width: 80px; /*Contrall*/
        height: 80px; /*Contrall*/
        line-height: 80px; /*Contrall*/
        font-size: 52px;
    }

    .error h2 /*Contrall*/ {
        font-size: 24px;
    }

    .error .msg /*Contrall*/ {
        top: -110px;
        left: 15%;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
    }

    .error span.triangle /*Contrall*/ {
        top: 70%;
        right: -3%;
        border-left: 10px solid #535353;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
    }

    .error .container-error-404 {
        height: 150px;
    }
    /* Error Page */
}

/*--------------------------------------------Framework --------------------------------*/

.overlay {
    position: relative;
    z-index: 20;
}
/*done*/
.ground-color {
    background: white;
}
/*done*/
.item-bg-color {
    background: #EAEAEA
}
/*done*/

/* Padding Section*/
.padding-top {
    padding-top: 10px;
}
/*done*/
.padding-bottom {
    padding-bottom: 10px;
}
/*done*/
.padding-vertical {
    padding-top: 10px;
    padding-bottom: 10px;
}

.padding-horizontal {
    padding-left: 10px;
    padding-right: 10px;
}

.padding-all {
    padding: 10px;
}
/*done*/

.no-padding-left {
    padding-left: 0px;
}
/*done*/
.no-padding-right {
    padding-right: 0px;
}
/*done*/
.no-vertical-padding {
    padding-top: 0px;
    padding-bottom: 0px;
}

.no-horizontal-padding {
    padding-left: 0px;
    padding-right: 0px;
}

.no-padding {
    padding: 0px;
}
/*done*/
/* Padding Section*/

/* Margin section */
.margin-top {
    margin-top: 10px;
}
/*done*/
.margin-bottom {
    margin-bottom: 10px;
}
/*done*/
.margin-right {
    margin-right: 10px;
}
/*done*/
.margin-left {
    margin-left: 10px;
}
/*done*/
.margin-horizontal {
    margin-left: 10px;
    margin-right: 10px;
}
/*done*/
.margin-vertical {
    margin-top: 10px;
    margin-bottom: 10px;
}
/*done*/
.margin-all {
    margin: 10px;
}
/*done*/
.no-margin {
    margin: 0px;
}
/*done*/

.no-vertical-margin {
    margin-top: 0px;
    margin-bottom: 0px;
}

.no-horizontal-margin {
    margin-left: 0px;
    margin-right: 0px;
}

.inside-col-shrink {
    margin: 0px 20px;
}
/*done - For the inside sections that has also Title section*/
/* Margin section */

hr {
    margin: 0px;
    padding: 0px;
    border-top: 1px dashed #999;
}
/*--------------------------------------------FrameWork------------------------*/
.box_news_navpage {
    width: auto;
    text-align: center;
}

.group_hide {
    display: none;
}

.bg-linkdou {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #ccc
}