/*

Global Settings
TOP-BAR
MENU PROFILE
HEADER
Custom Check
Gia hạn thanh toán
FOOTER

*/
BODY, div, p, table, td, form, input, textarea, option, button, pre {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #666;
}

* {
    transition: all .3s;
}

a {
    color: #f27226;
}
a:hover {
    color: #e15705;
    text-decoration: none;
}
.unclick {
    pointer-events: none;
}
.tooltip-inner {
    font-size: .9em; /* Giảm cỡ font của tooltip. */
}
i.verified {
    color: #50d181;
    cursor: pointer;
}
input {
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1.1em;
    outline: none;
}
a.button,
input.button,
button.button,
.btn-primary {
    background: #f27226;
    padding: 10px 17px 10px 17px;
    border: 0;
    border-radius: 3px;
    color: #fff;
    font-size: 1em;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
    white-space: nowrap;
    cursor: pointer;
    outline: none;
}
a.button:hover,
input.button:hover,
.button:hover,
.btn-primary:hover {
    background: #ff8842;
    color: #fff;
    opacity: .9;
}
a.button-register {
    margin: 5px 0 0 0;
    display: inline-block;
}
a.button-grey {
    background: #ccc;
    color: #fff;
}
a.button-grey:hover {
    background: #666;
}
.close {
    outline: none !important
}
.page-buttons {
    display: block;
    padding: 20px 20px 10px 10px;
    min-height: 50px;
}
.submit {
    color: #fff !important;
    padding: 10px 25px 10px 25px !important;
}
.page-link {
    color: #ff8842;
}
.page-link:hover {
    background: #ff8842;
    color: #fff;
}
/* Start: Status */
.status {
    display: inline-block;
    position: relative;
}
@keyframes status {
    from { opacity: .1 }
    to { opacity: .3 }
}
.status .online {
    width: 10px;
    height: 10px;
    border-radius: 12px;
    background: #f27226;
    z-index: 2;
    margin: 0 5px 0 5px;
    position: relative;
    display: inline-block;
}
.status .online:before {
    content: " ";
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 20px;
    background: #f27226;
    z-index: 1;
    position: absolute;
    top: -3px;
    left: -3px;
    animation: status .4s infinite alternate;
}
.status .offline {
    width: 16px;
    height: 16px;
    margin: 3px 2px 0 2px;
    position: relative;
    display: inline-block;
    border-radius: 16px;
    background: #ccc;
    border: 3px solid #eee;
}
/* End: Status */
/* Start: Custom Check */
.customcheck {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.customcheck input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background: #eee;
    border-radius: 4px;
}
.customcheck:hover input ~ .checkmark {
    background-color: #ccc;
}
.customcheck input:checked ~ .checkmark {
    background-color: #f27226;
    border-radius: 5px;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.customcheck input:checked ~ .checkmark:after {
    display: block;
}
.customcheck .checkmark:after {
    left: 7px;
    top: 4px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* End: Custom Check */

/* TOP-BAR */
#top-bar {
    background: #2b2b2b;
    height: 40px;
    color: #fff;
}
#top-bar .menu-left {
    list-style: none;
    margin: 0;
    padding: 10px 0 0 0;
}
#top-bar .menu-left li {
    float: left;
    font-size: .9em;
    text-transform: uppercase;
    margin: 0 20px 0 0;
}
#top-bar .menu-left li a {
    color: #fff;
}
#top-bar .menu-left li a:hover,
#top-bar .menu-left li a.active {
    color: #f27226;
}
@media only screen and (max-width: 991px) {
    #top-bar {
        height: 70px;
    }
    #top-bar .menu-left li {
        font-size: .9em;
        margin: 0 10px 0 0;
    }

}
@media only screen and (max-width: 771px) {
    #top-bar {
        background: transparent;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10001;
    }
    #top-bar .menu-left {
        display: none;

    }
}

/* MENU PROFILE */
.menu-profile {
    list-style: none;
    cursor: pointer;
    position: relative;
    display: block;
    z-index: 1000;
    float: right;
}
.menu-profile .notification,
.menu-profile .contract,
.menu-profile .user,
.menu-profile .lang {
    float: left;
}
.menu-profile .lang { /* Hide lang for 2.0 version */
    display: none;
}
@media only screen and (max-width: 771px) {
    .menu-profile .contract,
    .menu-profile .lang {
        display: none;
    }
    #top-bar .menu-left {
        display: none;
    }
}
.menu-profile .name {
    color: #999;
    padding: 8px 10px 0 10px;
    border-right: 1px solid #333;
    min-height: 40px;
    float: left;
}
@media only screen and (max-width: 771px) {
    .menu-profile .name {
        padding: 13px 10px 0 10px;
        border: 0;
    }
}
.menu-profile .more {
    width: 40px;
    height: 40px;
    display: table;
    padding: 10px 0 0 0;
    text-align: center;
    position: relative;
    border-right: 1px solid #555;
}
.menu-profile .more .menu-hover {
    display: none;
}
@media only screen and (max-width: 771px) {
    .menu-profile .more {
        border-right: 0;
    }
    .menu-profile .more i {
        margin-top: 10px;
        color: #ccc;
    }
    .menu-profile .user .avatar {
        opacity: .3;
        margin-right: -5px;
    }
    .menu-profile .user .more .avatar {
        display: block;
    }
}
.menu-profile .more:hover .menu-hover {
    color: #666;
    box-shadow: 1px 2px 8px rgba(0, 0, 0, .2);
    background: #fff;
    position: absolute;
    display: block;
    top: 40px;
    right: 0;
    min-width: 150px;
    z-index: 1001;
}
.menu-profile .more .menu-hover ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu-profile .more .menu-hover ul li {
    padding: 0;
    clear: both;
    text-align: left;
    border-bottom: 1px solid #f5f5f5;
    width: 100%;
}
.menu-profile .more .menu-hover ul li:last-child {
    border: 0;
}
.menu-profile .more .menu-hover ul li a i {
    margin: 0 7px 0 7px;
    color: #ccc;
}
.menu-profile .more .menu-hover ul a {
    color: #666;
    padding: 15px;
    display: block;
    width: 100%;
}
.menu-profile .more .menu-hover ul a:hover {
    background: #f27226;
    color: #fff;
}
.menu-profile .more .menu-hover ul a:hover i {
    color: #fff;
}
.menu-profile .more .menu-hover ul li.name {
    color: #666;
    padding: 7px 5px 7px 50px !important;
    border-right: 0;
}
.menu-profile .more .menu-hover ul li.name .avatar {
    width: 30px;
    height: 30px;
    padding: 6px 0 0 0;
    border-radius: 30px;
    background: #dbdbdb;
    color: #fff;
    font-size: .9em;
    text-align: center;
    position: absolute;
    top: 10px;
    left: 10px;
}

.menu-profile .more .menu-hover ul li.name .email {
    color: #ccc;
    font-size: .9em;
    margin: -3px 0 0 0;
    padding: 0;
}
.menu-profile .notification {
    border-right: 1px solid #555;
    position: relative;
    width: 60px;
    height: 40px;
    background: url('../img/notification.png') top center no-repeat;
}
.menu-profile .notification .num {
    width: 24px;
    height: 24px;
    border-radius: 24px;
    font-size: .9em;
    text-align: center;
    color: #fff;
    background: #f27226;
    border: 3px solid #2b2b2b;
    position: absolute;
    top: 4px;
    right: 9px;
}
@media only screen and (max-width: 771px) {
    .menu-profile .notification {
        border: 0;
        position: absolute;
        top: 5px;
        right: 0;
    }
    .menu-profile .notification .num {
        border: 3px solid #fff;
    }
}
.menu-profile .notification .more {
    border: 0;
    width: 60px;
}
.menu-profile .notification .more:hover .menu-hover {
    right: 0;
    max-height: 600px;
    overflow-x: hidden;
    overflow-y: scroll;
}
.menu-profile .notification .more .menu-hover {
    min-width: 350px;
}
.menu-profile .notification .more .menu-hover .label {
    padding: 8px;
}
.menu-profile .notification .more .menu-hover a.mark {
    background: transparent;
    padding: 0;
    color: #ccc;
    width: auto;
    font-size: .9em;
    float: right;
}
.menu-profile .notification .more .menu-hover .item .desc {
    color: #666;
    font-size: .9em;
    margin: 3px 0 3px 0;
}
.menu-profile .notification .more .menu-hover .item a:hover .desc {
    color: #fff;
}
.menu-profile .notification .more .menu-hover .item {
    position: relative;
}
.menu-profile .notification .more .menu-hover .item-unread {
    background: #f9f9f9;
}

.menu-profile .notification .more .menu-hover .item a {
    padding: 7px 7px 7px 44px;
}
.menu-profile .notification .more .menu-hover .view-all a {
    color: #f27226;
    padding: 10px;
    font-size: .9em;
}
.menu-profile .notification .more .menu-hover .view-all a:hover {
    color: #fff;
}
/* Notification icons */
.menu-profile .notification .more .menu-hover .item .icon {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 24px;
    height: 24px;
    background: url('../img/notification_icons.png');
}
.menu-profile .notification .more .menu-hover .item .icon-payment { background-position: 0 0 }
.menu-profile .notification .more .menu-hover .item .icon-support { background-position: -24px 0 }
.menu-profile .notification .more .menu-hover .item .icon-feed { background-position: -48px 0 }
.menu-profile .notification .more .menu-hover .item .icon-doc { background-position: -72px 0 }

.menu-profile .notification .more .menu-hover .item .icon-payment-read { background-position: 0 -24px }
.menu-profile .notification .more .menu-hover .item .icon-support-read { background-position: -24px -24px }
.menu-profile .notification .more .menu-hover .item .icon-feed-read { background-position: -48px -24px }
.menu-profile .notification .more .menu-hover .item .icon-doc-read { background-position: -72px -24px }

.menu-profile .notification .more .menu-hover .item:hover .icon-payment-read,
.menu-profile .notification .more .menu-hover .item:hover .icon-payment { background-position: 0 -48px }
.menu-profile .notification .more .menu-hover .item:hover .icon-support-read,
.menu-profile .notification .more .menu-hover .item:hover .icon-support { background-position: -24px -48px }
.menu-profile .notification .more .menu-hover .item:hover .icon-feed-read,
.menu-profile .notification .more .menu-hover .item:hover .icon-feed { background-position: -48px -48px }
.menu-profile .notification .more .menu-hover .item:hover .icon-doc-read,
.menu-profile .notification .more .menu-hover .item:hover .icon-doc { background-position: -72px -48px }

.menu-profile .notification .more .menu-hover .item .date {
    display: table;
    clear: both;
    color: #ccc;
    font-size: .85em;
}

@media only screen and (max-width: 771px) {
    .menu-profile .user {
        margin-right: 60px;
    }
}
.menu-profile .user .avatar {
    width: 40px;
    height: 40px;
    background: url('../img/avatar-profile.png');
    float: left;
}
@media only screen and (max-width: 771px) {
    .menu-profile .user .avatar {
        border-radius: 30px;
        margin-top: 3px;
    }
}
.menu-profile .lang .current {
    float: left;
    padding: 10px;
    text-align: right;
    color: #666;
}

/* HEADER */
#header {
    height: 70px;
    background: #fff;
    border-bottom: 1px solid #f5f5f5
}
#header .main-menu {
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
    float: right;
}
#header .main-menu li {
    float: left;
    text-transform: uppercase;
}
#header .main-menu li a {
    color: #333;
    display: block;
    font-size: 1.2em;
    font-weight: 700;
    padding: 20px;
    letter-spacing: -0.5px;
    text-align: right;
}
#header .main-menu .sub {
    background: #ebebeb;
    width: 100%;
    list-style: none;
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    z-index: 1000;
    text-align: center;
}
#header .main-menu .sub li {
    width: 25%;
}
#header .main-menu .member li {
    width: 25%;
}
#header .main-menu .sub a {
    display: block;
    text-transform: none;
    font-weight: bold;
    font-size: 1.4em;
    text-align: center;
    margin: 0 auto 0 auto;
    padding: 15px 0 10px 0;
    width: 100%;
    color: #f27226;
}
#header .main-menu .sub a:hover {
    color: #a3a3a3;
}
#header .main-menu .sub a img {
    margin: 0 0 10px 0;
}
#header .main-menu .sub a:hover img {
    -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(100%); /* FF 35+ */
}
#header .main-menu li:hover .sub {
    display: block;
}
#header .main-menu .sub .sub-sub {
    width: 100%;
    list-style: none;
    margin: 0 0 30px 0;
    padding: 0;
}
#header .main-menu .sub .sub-sub li {
    width: 100%;
    float: none;
    text-align: center;
    padding: 0;
    margin: 0;
}
#header .main-menu .sub .sub-sub li a {
    color: #333;
    font-size: 1.2em;
    font-weight: normal;
    padding: 0;
    margin: 0;
}
#header .main-menu .sub .sub-sub li a:hover {
    color: #f27226;
}
#header #mobile-main-menu {
    display: none;
}
@media only screen and (max-width: 1201px) {
    #header .main-menu li a {
        padding: 27px 10px 20px 20px;
        text-align: right;
        font-size: 1.1em;
    }
}
@media only screen and (max-width: 991px) {
    #header .main-menu li a {
        padding: 27px 5px 0 5px;
        text-align: right;
        font-size: 1em;
    }
}
@media only screen and (max-width: 771px) {
    #header {
        height: 70px;
        width: 100%;
        position: fixed;
        z-index: 10000;
    }
    #header .container {
        max-width: 100%;
        width: 100%;
        margin: 0;
    }
    #header .main-menu {
        display: none;
        width: 100%;
        background: #fff;
        position: absolute;
        top: 45px;
        left: 0;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
    #header .main-menu li {
        width: 100%;
        float: left;
        padding: 0;
        font-size: 1.2em;
        margin: 0;
        border-top: 1px solid #eee;
        position: relative;
    }
    #header .main-menu li:hover .sub {
        display: none;
    }
    #header .main-menu li a {
        font-size: .9em;
        display: block;
        width: 100%;
        text-align: left;
        margin: 0;
        padding: 15px;
    }
    #header .main-menu li:first-child a {
        margin-top: 0;
    }
    #header .main-menu li a i.fa {
        position: absolute;
        top: 20px;
        right: 15px;
    }
    #header .main-menu li:hover a i.fa {
        transform: rotate(90deg);
    }
    #header .main-menu .sub {
        margin: 0;
        padding: 0;
    }
    #header .main-menu .sub li {
        background: #fff;
        text-align: left;
        width: 100%;
        float: none;
        margin: 0;
    }
    #header .main-menu .sub {
        text-align: left;
        position: relative;
        top: unset;
    }
    #header .main-menu .sub a {
        width: 100%;
        text-align: left;
        font-size: .8em;
        padding: 13px 0 13px 30px;
    }
    #header .main-menu .sub .sub-sub {
        display: none;
        margin: 0;
    }
    #header .main-menu .sub li:hover .sub-sub {
        display: block;
    }
    #header .main-menu .sub:hover .sub-sub a {
        font-size: .6em;
        padding: 5px 0 5px 0;
        margin: 0 0 0 40px;
    }
}
#header .main-menu li a:hover,
#header .main-menu li a.active {
    color: #f27226;
}
#header .logo {
    float: left;
    background: #fff;
}
#header .logo a {
    display: block;
    margin: 8px 0 0 0;
}
#header .logo object {
    height: 55px;
    pointer-events: none;
    z-index: -1;
}
#header .menu-switcher,
#header .menu-search {
    display: none;
    cursor: pointer;
}
@media only screen and (max-width: 991px) {
    #header .logo object {
        margin-top: 8px;
        height: 40px;
        pointer-events: none;
        z-index: -1;
    }
}
@media only screen and (max-width: 771px) {
    #header .menu-switcher {
        display: inline-block;
        width: 50px;
        height: 50px;
        text-align: left;
        position: absolute;
        top: 15px;
        left: 15px;
        cursor: pointer;
    }
    #header .menu-search {
        display: inline-block;
        width: 50px;
        height: 50px;
        text-align: center;
        position: absolute;
        top: 15px;
        left: 40px;
    }
    #header .logo {
        width: 100%;
        margin: 3px 0 0 50px;
    }
    #header .logo object {
        margin-top: 5px;
        height: 35px;
        pointer-events: none;
        z-index: -1;
    }
    .menu-profile .name {
        display: none;
    }
}

/* CONTENT */
#content {
    min-height: 150px;
    background: #fff url("../img/background.png") top center repeat-x;
    padding-top: 50px;
    position: relative;
    z-index: 1;
}
@media only screen and (max-width: 771px) {
    #content {
        padding-top: 50px;
    }
}
.content-map {
    padding-top: 170px !important;
}
/* Modal */
#wifi-password .modal-body ul {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
#wifi-password .modal-body ul li {
    padding: 2px 0 0 0;
}
#wifi-password .modal-body ul li#warning {
    color: #f27226;
}
#wifi-password .modal-body ul li label {
    padding-top: 5px;
}
#wifi-password .modal-body ul li input {
    font-size: 1em;
    padding: 5px;
    width: 100%;
}

/* Map */
#map {
    height: 240px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#content .container {

}
.right-page-tools {
    position: absolute;
    top: 0;
    right: 10px;
    padding-top: 10px;
}
.right-page-tools a.button {
    display: inline-block;
    color: #fff;
    margin: 3px 0 0 0;
}
.right-page-tools a.button:hover {
    color: #fff;
}
.right-page-tools .icon-page {
    margin: 0 0 0 15px;
}
#breadcrumb {
    background: #fff;
    position: relative;
    border-bottom: 1px solid #eee;
}
.breadcrumb-item+.breadcrumb-item::before {
    color: #eee;
}
.breadcrumb {
    background: #fff;
    font-size: 1.5em;
    font-weight: 300;
    color: #666;
    padding: 15px 30px 0 15px;
}
@media only screen and (max-width: 991px) {
    .breadcrumb {
        padding: 9px 30px 0 10px;
    }
    .right-page-tools {
        display: block;
        position: relative;
        padding: 0 0 10px 10px;
        margin: 0;
    }
}
@media only screen and (max-width: 771px) {
    .breadcrumb {
        font-size: 1.1em;
    }
}
@media only screen and (max-width: 641px) {
    .breadcrumb {
        font-size: .9em;
    }
}

/* FILTER */
.filter {
    list-style: none;
    padding: 10px 10px 10px 0;
    margin: 0 10px 0 10px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    width: 100%;
}
.filter li {
    float: left;
    margin: 0 0 0 10px;
}
.filter li label {
    color: #999;
    display: block;
    margin: 0 0 5px 0;
}
.filter .input input,
.filter .input select {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    outline: none;
}
.filter .belong label:hover {
    color: #666;
}
.filter .belong label {
    font-size: 1em;
}
.filter .belong label.btn {
    background: #eee !important;
    border: 1px solid #ddd !important
}
.filter .belong label.active {
    background: #f27226 !important;
    border: 1px solid #f27226 !important
}
.filter .input {
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 5px;
    position: relative;
}
.filter .input i {
    position: absolute;
    top: 7px;
    right: 7px;
}
.filter input.submit {
    padding: 5px 30px 5px 30px;
}
@media only screen and (max-width: 641px) {
    .filter li:first-child {
        margin: 0 0 10px 10px;
    }
    .filter li {
        width: 100%;
    }
    .filter .belong {
        width: 100%;
    }
    .filter .belong label {
        width: 50%;
    }

}
/* PROFILE BAR */
#profile-bar {
    background: #fff;
    border-bottom: 1px solid #eee;
    min-height: 120px;
    margin-bottom: 20px;
    z-index: 1;
    position: relative;
}
#profile-bar .avatar {
    background: #fff;
    border: 6px solid #fff;
    width: 90px;
    height: 90px;
    border-radius: 90px;
    margin: 10px 15px 10px 0;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
    float: left;
    position: relative;
}
#profile-bar .avatar .crown {
    position: absolute;
    top: 0;
    right: -5px;
    color: #fff;
    background: #f27226;
    border-radius: 24px;
    width: 24px;
    height: 24px;
    text-align: center;
    font-size: .7em;
    padding: 5px 0 0 0;
}
#profile-bar .avatar img {
    width: 78px;
    height: 78px;
    border-radius: 80px;
}
#profile-bar .avatar-contract {
    background: transparent;
    border: 0;
    width: 60px;
    height: 60px;
    margin: 24px 15px 10px 10px;
    box-shadow: unset;
    float: left;
}
#profile-bar .name {
    font-size: 1.5em;
    font-weight: 400;
    padding-top: 30px;
}
.loyalty-bar {
    position: relative;
}
@media only screen and (max-width: 1201px) {
    .loyalty-bar .detail {
        padding: 20px 0 20px 20px !important
    }
    .loyalty-bar .level {
        font-size: .9em !important
    }
    .percentage {
        zoom: 90%;
    }
}
@media only screen and (max-width: 771px) {
    .block-avatar {
     width: 100%;
 }
 .block-total-points {
    width: 33%;
}
.block-upgrade-points {
    font-size: .9em;
    width: 33%;
}
.block-expired-points {
    width: 33%;
}
.loyalty-bar .detail {
    font-size: .8em;
    padding: 0 !important
}
.loyalty-bar .point-total {
    margin: 0 auto;
}
.loyalty-bar .point a {
    font-size: 1em;
}
.percentage {
    zoom: 60%;
}
}
@media only screen and (max-width: 560px) {
    .percentage {
        display: none;
    }
}
.loyalty-bar label {
    color: #666;
    font-size: 1.1em;
    margin: 0 0 3px 0;
}
.loyalty-bar .point {
    border: 1px solid #eee;
    border-radius: 50px;
    display: table;
    padding: 3px 35px 3px 35px;
    font-size: 1.6em;
    font-weight: bold;
    margin: 0 auto 0 auto;
    position: relative;
}
.loyalty-bar .point a {
    color: unset;
    display: block;
}
.loyalty-bar .point i {
    font-size: .7em;
    position: absolute;
    top: 12px;
    left: 13px;
}
.loyalty-bar .point i.fa-check-circle {
    color: #77cea6;
}
.loyalty-bar .point i.fa-angle-right {
    color: #ccc;
}
.loyalty-bar .point i.fa-arrow-circle-up {
    color: #0e69af
}
.loyalty-bar .point i.fa-exclamation-circle {
    color: #f27226
}
.loyalty-bar .point i.fa-angle-right {
    font-size: .65em;
    color: #ccc;
    left: unset;
    top: 13px;
    right: 15px;
}
.loyalty-bar .point-total {
    color: #f27226;
}
.loyalty-bar .point-expired {
    padding: 3px 15px 3px 35px;
}
.loyalty-bar span.date {
    color: #999;
    margin: 5px 0 0 0;
    display: block;
}
.loyalty-menu ul {
    list-style: none;
    width: 100%;
    border-radius: 4px;
    margin: 0 0 15px 0;
    padding: 0;
    box-shadow: 3px 1px 5px rgba(0, 0, 0, .2);
}
.loyalty-menu ul li {
    float: left;
    font-size: 1.2em;
    color: #666;
}

.loyalty-menu .icons {
    width: 40px;
    height: 40px;
    overflow: hidden;
    display: block;
    position: absolute;
    top: 5px;
    left: 7px;
}

.loyalty-menu .icon-get-points {
    background: url('../img/icon_get_points.png');
    background-size: cover;
}
.loyalty-menu .icon-use-points {
    background: url('../img/icon_use_points.png');
    background-size: cover;
}
.loyalty-menu .icon-my-gifts {
    background: url('../img/icon_my_gifts.png');
    background-size: cover;
}
.loyalty-menu .icon-history-points {
    background: url('../img/icon_history_points.png');
    background-size: cover;
}
.loyalty-menu li.active a .icons,
.loyalty-menu a:hover .icons {
    background-position: bottom;
}
.loyalty-menu ul li a {
    padding: 13px 20px 13px 50px;
    display: block;
    position: relative;
    color: #666;
}
.loyalty-menu ul li:first-child a {
    border-radius: 4px 0 0 4px;
}
.loyalty-menu ul li.my-gifts a {
    padding: 13px 40px 13px 50px;
}
.loyalty-menu ul li.active a {
    background: #f27226;
    color: #fff;
}
.loyalty-menu ul li a:hover {
    background: #e66a20;
    color: #fff;
}

.loyalty-menu ul li div.notification {
    position: absolute;
    top: 15px;
    right: 10px;
    background: #f27226;
    color: #fff;
    width: 20px;
    height: 20px;
    text-align: center;
    border-radius: 50%;
    line-height: 22px;
}
@media only screen and (max-width: 771px) {
    .loyalty-menu ul li {
        font-size: 1em;
    }
    .loyalty-menu ul li a {
        padding: 13px 10px 13px 40px;
    }
    .loyalty-menu .icons {
        top: 3px;
        left: 3px;
    }
    .loyalty-menu ul li div.notification {
        top: 13px;
    }
}
.loyalty-menu ul li.active a div.notification,
.loyalty-menu ul li a:hover div.notification {
    background: #fff;
    color: #f27226;
}
.destination {
    color: #ccc;
    display: block;
    margin: 5px 0 0 0;
}
.destination a {
    color: #666;
}
.voucher {
    border: 1px solid #eee;
    border-radius: 5px;
    color: #f27226;
    padding: 5px 13px 5px 13px;
    text-align: center;
    font-size: 1.2em;
    display: inline-block;
    width: auto;
    margin: 0 0 7px 0;
    cursor: pointer;
}
.voucher:hover {
    background: #f27226;
    color: #fff;
    border: 1px solid #f27226;
}
@font-face {
    font-family: montserrat;
    src: url('../webfonts/montserrat.ttf');
}
#loyalty-about .container {
    position: relative;
    overflow: unset;
}
#loyalty-about .welcome {
    background: #f27226 url('../img/loyalty/block-1.jpg') top center;
    background-size: contain;
    height: 90px;
}
#loyalty-about .block-1 {
    background: #f27226;
    position: relative;
    overflow: unset;
    padding: 0 0 70px 0;
    margin: 40px 0 0 0;
}
#loyalty-about .block-1 .text {
    color: #fff;
    font-weight: 300;
    font-size: 1.2em;
}
#loyalty-about .block-1 .symbol {
    background: #f27226 url('../img/loyalty/crown.png');
    width: 80px;
    height: 80px;
    position: absolute;
    top: -130px;
    left: 10px;
}
#loyalty-about .number {
 font-family: 'montserrat';
 font-size: 5em;
 display: block;
 color: #fff;
 position: absolute;
 top: -60px;
 left: 10px;
}
#loyalty-about .title {
    font-family: 'montserrat';
    font-size: 2.5em;
    display: block;
    color: #fff;
    text-transform: uppercase;
    padding: 30px 0 0 0;
    position: relative;
    margin: 0 0 50px 0;
}
#loyalty-about .title:after {
    content: ' ';
    width: 90px;
    height: 1px;
    background: #fff;
    position: absolute;
    bottom: -10px;
    left: 0;
}
#loyalty-about .block-2 {
    background: #f27226;
    padding: 0;
}
#loyalty-about .block-2 .bg-black {
    background: url('../img/loyalty/bg-black.png') repeat-x;
}
#loyalty-about .block-2 .box {
    background: #fff;
    border-radius: 0;
    border: 0;
    padding: 90px 40px 40px 40px;
    position: relative;
}
#loyalty-about .block-2 .icon {
    background: #f27226 url('../img/loyalty/calc.png');
    overflow: hidden;
    width: 70px;
    height: 70px;
    position: absolute;
    top: 0;
    left: 40px;
}
#loyalty-about .block-2 .icon-2 {
    background-position: 0 -70px;
}
#loyalty-about .block-2 .icon-3 {
    background-position: 0 -140px;
}
#loyalty-about .block-3 {
    border-top: 70px solid #f27226;
    background: #f27226;
    border-bottom: 70px solid #f27226;
}
#loyalty-about .block-3 .box {
    border: 0;
    padding: 0;
    color: #fff;
    margin: 0;
    min-height: unset;
}
#loyalty-about .block-3 .box:after,
#loyalty-about .block-3 .box:before {
    content: ' ';
    border-bottom: 1px dashed #fff;
    width: calc(50% - 11px);
    height: 1px;
    position: absolute;
    top: 20px;
    right: 1px;
}
#loyalty-about .block-3 .box:before {
    left: 1px;
}
#loyalty-about .block-3 .col-lg-4:first-child .box:before {
    content: unset;
}
#loyalty-about .block-3 .col-lg-4:last-child .box:after {
    content: unset;
}
#loyalty-about .block-3 .box .icon {
    background: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 11px 0 0 0;
    color: #f27226;
}
#loyalty-about .block-3 .type {
    color: #fff;
    margin: 20px 0 0 0;
    background: #dc6a25;
    padding: 20px 20px 20px 20px;
}
#loyalty-about .block-3 .type img {
    padding: 10px 30px 10px 10px;
}
#loyalty-about .block-3 .type b {
    display: block;
    font-size: 1.2em;
    margin: 0 0 2px 0;
}
#loyalty-about .block-3 .type i {
    color: #ffcdb0;
    display: block;
}
#loyalty-about .block-4 {
    background: #f27226;
    padding: 0;
    border-bottom: 70px solid #f27226;
}
#loyalty-about .block-4 .bg-black {
    background: url('../img/loyalty/bg-black.png') repeat-x;
}
#loyalty-about .block-4 .title-sub {
    color: #f27226;
    font-size: 1.6em;
    font-weight: 300;
}
#loyalty-about .block-4 .box {
    background: #fff;
    border: 0;
    border-radius: 0;
    padding: 0;
    min-height: unset;
    position: relative;
    z-index: 9990;
}
#loyalty-about .block-4 .box-special {
    margin: 20px 0 0 0;
    width: 100%;
    position: relative;
    height: 50px;
}
#loyalty-about .block-4 .box-special .title {
    background: #313131;
    position: absolute;
    font-size: 1em;
    top: 0;
    left: -20px;
    padding: 20px;
    width: 100%;
    text-transform: unset;
}
#loyalty-about .block-4 .box-special .title:after {
    content: unset;
}
#loyalty-about .block-4 .text {
    font-size: 1.1em;
    font-weight: normal;
    padding: 30px;
    line-height: 120%;
}
#loyalty-about .block-4 .group {
    font-size: 1.2em;
    background: #000;
    color: #fff;
    padding: 10px 15px 10px 20px;
    height: 45px;
}
#loyalty-about .block-4 .level .row {
    padding: 14px 20px 5px 20px;
    border-bottom: 1px solid #eee;
}
#loyalty-about .block-4 .level .row .left,
#loyalty-about .block-4 .level .row .right {
    font-size: 1.2em;
}
#loyalty-about .block-4 .level .icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eee;
    display: inline-block;
    float: left;
    padding: 5px 0 0 0;
}
#loyalty-about .block-4 .level .icon-member {}
#loyalty-about .block-4 .level .icon-silver {

}
#loyalty-about .block-4 .level .icon-gold {
    background: #f27226;
    color: #fff;
}
#loyalty-about .block-4 .level .icon-diamond {
    background: #333;
    color: #f27226;
}
#loyalty-about .block-4 .level .name {
    display: inline-block;
    float: left;
    margin: 3px 0 0 10px;
    font-size: 1em;
}
#loyalty-about .block-4 .text-border {
    border-bottom: 1px solid #eee;
}
#loyalty-about .block-5 .title {
    font-family: 'montserrat';
    font-size: 2.5em;
    display: block;
    color: #f27226;
    text-transform: uppercase;
    padding: 30px 0 0 0;
    position: relative;
    margin: 0 0 50px 0;
}
#loyalty-about .block-5 .title:after {
    content: ' ';
    width: 90px;
    height: 1px;
    background: #f27226;
    position: absolute;
    bottom: -10px;
    left: 0;
}
#loyalty-about .block-5 .title-sub {
    position: relative;
    display: block;
    margin: 0 0 10px 0;
}
#loyalty-about .block-5 .text {
    color: #f27226;
    font-size: 1.6em;
}
#loyalty-about .block-5 .number {
    position: relative;
    display: block;
    font-family: Roboto, sans-serif;
    font-size: 1.2em;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f27226;
    text-align: center;
    padding: 5px 0 0 0;
    top: unset;
    left: unset;
    float: left;
    margin: 0 10px 0 0;
}
#loyalty-about .register-member {
    text-transform: uppercase;
    font-family: 'montserrat';
    background: #f27226;
    font-size: 2em;
    color: #fff;
    padding: 20px 40px 20px 40px;
    clear: both;
    display: inline-block;
    margin: 30px 0 0 0;
}
#loyalty-about .register-member:hover {
    background: #e56519;
}
.loyalty-history {

}
.loyalty-history .my-box {
    border-radius: 5px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
    padding: 10px 10px 10px 10px;
    margin: 0 0 20px 0;
    cursor: pointer;
}
.loyalty-history .my-box .image {
    float: left;
}
.loyalty-history .my-box .image img {
    width: 80px;
    margin: 0 10px 10px 0;
}
.loyalty-history .my-box .bottom {
    display: block;
    clear: both;
    font-size: .95em;
    width: 100%;
    border-top: 1px solid #eee;
}
.loyalty-history .my-box .bottom a {
    display: inline-block;
    border-radius: 30px;
    margin: 10px 0 0 0;
    padding: 3px 13px 3px 13px;
    box-shadow: unset;
}
.loyalty-history .my-box .date {
    color: #ccc;
}
.loyalty-history table {
    width: calc(100% - 30px) !important;
    margin: 5px -10px 5px 15px !important;
}
.loyalty-history td.image img {
    width: 80px;
    height: 80px;
}
.loyalty-history .name {
    font-size: 1.1em;
    display: block;
    margin: 3px 0 0 0;
    color: #666;
    min-width: 100px;
}
.loyalty-history .point {
    font-size: 1.2em;
}
.loyalty-history .plus {
    color: #58c80d;
}
.loyalty-history .items {
    font-size: 1em;
    color: #aaa;
}
.loyalty-history .table {
    margin: 0 15px 0 20px;
}
.loyalty-history .table th {
    font-size: .9em;
    font-weight: normal;
    border-bottom: 1px solid #f27226;
}
.loyalty-history .table tr:last-child {
    border-bottom: 1px solid #eee;
    margin: 0 0 15px 0;
}
.loyalty-history .delivery {
    width: 90px;
    font-size: .9em;
    text-align: center;
}
.loyalty-history .delivery .going {
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background: url('../img/delivery_status.png');
    background-position: bottom left;
}
.loyalty-history .delivery .delivered {
    position: relative;
    float: right;
    width: 30px;
    height: 30px;
    background: url('../img/delivery_status.png');
    background-position: top right;
}
.loyalty-history .delivery .going:before,
.loyalty-history .delivery .delivered:before {
    content: " ";
    background: #eee;
    border-radius: 50%;
    border: 1px solid #eee;
    width: 11px;
    height: 11px;
    display: inline-block;
    position: absolute;
    bottom: -15px;
    left: 10px;
}
.loyalty-history .delivery .going:before {
    background: #fff;
    border: 1px solid #f27226;
}
.loyalty-history .delivery .going:after {
    content: " ";
    background: #eee;
    width: 60px;
    height: 1px;
    display: inline-block;
    position: absolute;
    bottom: -10px;
    left: 21px;
}
.gift-details h1 {
    font-size: 1.25em;
    font-weight: 300;
    color: #f27226;
    clear: both;
    border-top: 1px solid #eee;
    padding: 15px 0 0 0;
}
.gift-details .information {
    min-height: 90px;
}
.gift-details input,
.gift-details textarea {
    width: 100%;
    padding: 3px 5px 3px 5px;
}
.gift-details textarea {
    border-radius: 5px;
}
.gift-details .information ul {
    display: block;
    margin: 0 0 15px 0;
    padding: 0 0 5px 0;
    list-style: none;
    width: 100%;
}
.gift-details .information ul li {
    float: left;
    width: 25%;
}
.gift-details .information ul li input.quantity {
    font-size: 1.1em;
    padding: 2px 2px 2px 5px;
    width: 80px;
}
.gift-details .information .enough {
    width: 100%;
    display: block;
    color: #f27226;
    padding: 10px 10px 10px 45px;
    font-size: .9em;
    border-radius: 5px;
    border: 1px solid #ffe3b1;
    background: #fff8ed;
    margin: 65px 0 10px 0;
    position: relative;
}
.gift-details .information .enough i.fa-exclamation-circle {
    position: absolute;
    top: 20px;
    left: 15px;
}
.gift-details .image {
    width: 90px;
    margin: 0 0 10px 0 ;
    display: block;
    float: left;
}
.gift-details .image img {
    display: block;
    width: 70px;
    border: 1px solid #f5f5f5;
}
.gift-details label {
    color: #999;
    display: block;
    padding: 0;
    font-size: .9em;
    margin: 10px 0 0 0;
}
.my-voucher {
    width: 100%;
    position: relative;
}
.my-voucher .number {
    background: #666;
    color: #fff;
    border-radius: 4px;
    display: inline-block;
    position: absolute;
    top: -30px;
    right: 0;
    padding: 2px 10px 2px 10px;
}
.my-voucher .item {
    border-radius: 5px;
    background: #f5f5f5;
    text-align: center;
    font-size: 1.5em;
    padding: 20px;
    margin: 10px 0 10px 0;
    cursor: pointer;
}
.my-voucher .item:hover {
    background: #f9f9f9;
    color: #f27226;
}
/* Delivered */
.loyalty-history .done .going {
    background-position: top left;
}
.loyalty-history .done .delivered {
    background-position: bottom right;
}
.loyalty-history .done .going:before,
.loyalty-history .done .delivered:before {
    background: #fff;
    border: 1px solid #f27226;
}
.loyalty-history .done .going:after {
    background: #f27226
}
.loyalty-history .delivery .status {
    font-size: 1em;
    text-align: center;
    width: 100%;
    display: inline-block;
    margin: 25px 0 0 0;
}
.loyalty-history .ship {
    padding: 0 0 0 25px;
    position: relative;
}
.loyalty-history .ship .address {
    padding: 0;
    background: transparent;
    color: #aaa;
    text-align: unset;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 75ch;
    display: block;
    margin: 3px 0 -5px 0;
}
.loyalty-history .ship:before {
    content: ' ';
    background: #eee;
    height: 55px;
    width: 1px;
    position: absolute;
    top: 10px;
    left: 5px;
}
.loyalty-history .ship i.fa-map-marker-alt {
    position: absolute;
    top: 5px;
    left: 0;
    color: #999;
}
.loyalty-history .ship .detail {
    margin: 0;
    display: block;
    padding: 0;
    font-size: .9em;
    outline: none;
}
#ship-detail .modal-body b {
    color: #f27226;
    font-weight: normal;
}
#ship-detail .modal-body,
#ship-detail .modal-footer .mr-auto {
    font-size: 1.2em;
    font-weight: 300;
}
#ship-detail .modal-footer label,
#ship-detail .modal-body label {
    display: block;
    font-size: .9em;
    color: #aaa;
    margin: 10px 0 0 0;
}
.gifts-type {
    position: relative;
    margin: 0 0 15px 20px;
}
.gifts-type .gift,
.gifts-type .voucher {
    border: 1px solid #eee;
    border-radius: 5px;
    background: #f5f5f5;
    float: left;
    padding: 10px 40px 10px 20px;
    position: relative;
    color: #666;
}
.gifts-type .gift:hover,
.gifts-type .voucher:hover {
    background: #df6117;
    color: #fff;
    border: 1px solid #df6117;
}
.gifts-type .gift {
    border-radius: 5px 0 0 5px;
}
.gifts-type .voucher {
    border-radius: 0 5px 5px 0;
}
.gifts-type .notification {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #ccc;
    color: #fff;
    text-align: center;
}
.gifts-type .gift:hover .notification,
.gifts-type .voucher:hover .notification {
    background: #fff;
    color: #f27226;
}
.gifts-type .active {
    background: #f27226;
    color: #fff;
    border: 1px solid #f27226;
}
.gifts-type .active .notification {
    background: #fff;
    color: #f27226
}
.pagination {
    margin: 20px 0 0 5px;
}
.gifts-list {
    background: #f5f5f5;
    padding: 30px 0 30px 0;
}
.gifts-list .box {
    background: #fff;
    padding: 20px;
    border: 0;
    border-radius: 0;
    margin: 0 0 30px 0;
}
.gifts-list .box:hover {
    border: 0;
}
.gifts-list .box .name {
    width: 100%;
    font-weight: bold;
    color: #666;
    font-size: 1.2em;
    display: block;
    line-height: 1.2em;
}
.gifts-list .box .name img {
    margin: 0 auto 0 auto;
    display: block;
}
.gifts-list .box .name:hover {
    color: #f27226
}
.gifts-list .box .title {
    font-size: 1em;
    min-height: 40px;
}
.gifts-list .box .exchange {
    width: 100%;
    display: block;
}
.gifts-list .box button.disabled {
    background: #cccccc
}
.gifts-list .box .point {
    font-size: 1.2em;
    display: block;
    margin: 5px 0 5px 0;
}
.gifts-list .box .point b {
    color: #f27226
}
.gifts-list .box .limit {
    border-radius: 5px;
    width: 100%;
    background: #f5f5f5;
    height: 5px;
}
.gifts-list .box .limit .progress {
    border-radius: 5px;
    background: #f27226;
    height: 5px;
}
.gifts-list .box .remain {
    display: block;
    margin: 10px 0 10px 0;
}

#profile-bar .role {
    font-size: .9em;
}
#profile-bar .level {
    font-size: 1em;
    padding: 0 0 3px 0;
}
#profile-bar .level-progress {
    background: #ccc;
    height: 2px;
    width: 140px;
    margin: 10px 0 0 130px;
}
#profile-bar .level-progress p {
    background: #f27226;
    display: block;
    height: 2px;
}
#profile-bar .detail {
    padding: 25px 0 20px 20px;
    position: relative;
}
#profile-bar .detail img {
    float: left;
    margin: 0 10px 0 0;
}
#profile-bar .detail .label {
    font-size: .9em;
}
#profile-bar .detail .content {
    font-size: 1.1em;
    word-wrap: break-word;
}
#profile-bar .detail .content i {
    font-size: .9em;
}
@media only screen and (max-width: 1201px) {
    #profile-bar .detail {
        padding: 70px 0 20px 20px;
    }
    #profile-bar .detail img {
        position: absolute;
        top: 20px;
    }
}
@media only screen and (max-width: 991px) {
    #profile-bar .detail {
        padding: 20px 0 20px 20px;
    }
    #profile-bar .detail img {
        position: unset;
    }

}
@media only screen and (max-width: 769px) {
    #profile-bar .detail {
        padding: 10px 0 10px 25px;
    }
}
#profile-bar .detail .content .price {
    color: #f27226;
    font-size: 1.4em;
    font-weight: bold;
}
#profile-bar .detail .content .price sup {
    font-weight: normal;
}
#profile-bar .detail .content .button {
    font-size: .8em;
    margin: 5px 0 0 50px;
    display: inline-block;
    padding: 5px 10px 5px 10px;
}
#profile-bar .detail .content .history {
    background: #fff;
    border: 1px solid #eee;
    box-shadow: none;
    color: #ccc;
    margin: 3px 0 0 5px;
}
@media only screen and (max-width: 1201px) {
    #profile-bar .detail .content .history {
        margin: 5px 0 0 50px;
    }
    #profile-bar .detail .content .button {
        margin: 5px 0 0 0;
    }
}
@media only screen and (max-width: 991px) {
    #profile-bar .detail .content .history {
        margin: 3px 0 0 5px;
    }
}
/* SERVICES */
#services .left-column {
    position: relative !important;
    z-index: 101;
    padding-right: 0; /* Remove right space of left column grid */
}
#services .right-column {
    z-index: 99;
}


/* LEFT MENU */
/* Menu trái trang Tài khoản của bạn, với màn hình dưới 980px, chuyển menu trái thành menu đính đầu trang */
.left-menu {
    background: #585858;
    border-radius: 4px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
    color: #ccc;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 175px;
    z-index: 1000000;
}
.left-menu a {
    background: #585858;
    display: block;
    border-bottom: 1px solid #757575;
    padding: 10px 10px 10px 20px;
    color: #ccc;
}
.scrollable {
    position: fixed;
    top: 50px !important;
    padding-right: 0;
    z-index: 10002;
}
.left-menu li a:hover,
.left-menu li a.active {
    background: #f27226;
    color: #fff;
    border-bottom: 1px solid #f27226;
    position: relative;
    z-index: 100000;
}
.left-menu li:first-child {
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: -1px;
    text-transform: uppercase;
    padding: 15px 0 10px 20px;
    border-bottom: 1px solid #757575;
}
.left-menu li:last-child a {
    border-top: 1px solid #585858;
    border-bottom: 1px solid #585858;
    border-radius: 0 0 5px 5px;
}
.left-menu .add-service a {
    background: #585858;
    color: #999999;
    font-size: .85em;
    border: 1px solid #757575;
    border-radius: 20px;
    padding: 13px 5px 13px 15px;
}
.left-menu .add-service a:hover {
    background: #f27226;
    border: 1px solid #f27226;
    color: #fff;
}
.left-menu .add-service a:hover:after {
    content: ""; /* Xóa ký tự mũi tên với menu Thêm dịch vụ */
}
@media only screen and (max-width: 991px) {
    .left-menu li:last-child a {
        border-radius: 0;
        min-height: 50px;
        padding: 15px 10px 10px 10px;
        border-left: 1px solid #585858;
    }
}
/* Tạo menu xem đầy đủ các dịch vụ trên màn hình có kích thước dưới 980px */
.left-menu a.full-services {
    background: #666;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    border: 0;
    text-align: center;
    padding: 15px 0 0 0;
    display: none;
}
.left-menu a.full-services:hover {
    background: #f27226;
    color: #fff;
}
@media only screen and (max-width: 1201px) {
    .left-menu {
        min-width: 150px;
    }
}
@media only screen and (max-width: 991px) {
    .left-menu a.full-services {
        display: block; /* Hiển thị menu xem đầy đủ dịch vụ */
    }
    .left-menu {
        min-height: 50px;
        top: 0;
        left: 0;
        border-radius: 0;
        width: 100%;
        padding: 0;
        height: 50px;
        overflow: hidden;
    }
    .left-menu li {
        background: #585858;
        float: left;
        border: 0;
        padding: 0;
    }
    .left-menu li:first-child {
        border-bottom: 0;
        padding: 15px 20px 10px 20px;
    }
    .left-menu li:last-child {
        border-left: 1px solid #757575;
        padding: 1px 0 0 0;
    }
    .left-menu li a {
        border-bottom: 0;
        border-left: 1px solid #757575;
        padding: 14px 20px 15px 20px;
    }
    .left-menu li a:hover {
        background: #f27226;
        border: 0;
        border-left: 1px solid #f27226;
        color: #fff;
    }
    .left-menu li a:hover,
    .left-menu li a.active {
        background: #f27226;
        color: #fff;
        border: 0;
        border-left: 1px solid #f27226;
        position: relative;
        z-index: 10000;
    }
    .left-menu li a:hover::after,
    .left-menu li a.active::after {
        font-family: FontAwesome, sans-serif;
        color: #fff;
        content: "\f107";
        position: absolute;
        top: auto;
        bottom: -2px;
        right: calc(50% - 5px);
    }
    .left-menu .add-service a {
        padding: 5px 15px 5px 15px;
    }
}
@media only screen and (max-width: 769px) {
    .left-menu li:first-child {
        display: none;
    }
    .left-menu li {
        border: 0;
    }
}
.left-menu-expanded {
    min-height: 100px;
}

.service {
    display: block;
    position: relative;
}
.service-header {
    margin: 0 0 10px 0;
    padding: 10px 0 0 0;
    min-height: 60px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    position: relative;
}
.service-header .ip {
    float: right;
    margin: 8px 85px 0 0;
    padding: 0;
    font-size: 16px;
    color: #ccc;
    position: relative;
}
@media only screen and (max-width: 769px) {
    .service-header .ip {
        float: left
    }
}
.service-header .ip b {
    font-weight: normal;
    color: #f27226;
}
.service-header h2 {
    color: #f27226;
    font-size: 1.3em;
    text-transform: uppercase;
    width: auto;
    display: inline-block;
    border-bottom: 1px solid #f27226;
    padding: 0 35px 0 10px;
    height: 49px;
    line-height: 100%;
    float: left;
}
@media only screen and (max-width: 481px) {
    .service-header h2 {
        font-size: 1.1em;
        line-height: 1.2em;
        padding: 5px 60px 30px 0;
    }
    .service-header img {
        display: none;
    }
}
.service-header .switcher {
    width: 70px;
    height: 50px;
    color: #ccc;
    display: block;
    position: absolute;
    top: 5px;
    right: 0;
    overflow: hidden;
    line-height: 55px;
    text-align: center;
    border-left: 1px solid #eee;
    z-index: 100;
    cursor: pointer;
}

.service-header .switcher i {
    color: #999;
}
.service-header .button {
    background: #666;
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 3px 10px 3px 10px;
    font-size: 1em;
    margin: 3px 5px 0 0;
    cursor: pointer;
}
.service-header .button:hover {
    background: #f27226;
    color: #fff !important;
}
.service-header i {
    color: #666;
    font-style: normal;
}
@media only screen and (max-width: 769px) {
    .service-header .buttons {
        position: absolute;
        top: 80px;
        left: 0;
    }
}
.chart-markers {
    text-align: right;
    padding: 20px 240px 0 0;
    margin: 0 0 15px 0;
}
@media only screen and (max-width: 991px) {
    .chart-markers {
        margin: 0 0 20px 0;
    }
}
.chart-markers .dropdown {
    display: inline-block;
    margin: 0 10px 0 20px;
    position: absolute;
    top: 10px;
    right: 120px;
    background: #fff;
    color: #666;
}
.chart-markers .dropdown .btn {
    background: #fff;
    color: #666;
    border: 1px solid #eee;
    padding: 5px 20px 5px 20px;
}
.chart-markers .download,
.chart-markers .upload {
    background: #ffa169;
    display: inline-block;
    width: 14px;
    height: 14px;
}
.chart-markers .upload {
    background: #86e0af;
}
.chart-markers .total {
    margin: 10px 0 0 20px;
    font-size: 1.6em;
    color: #ccc;
    position: absolute;
    top: 0;
    right: 0;
}
.chart-markers .total b {
    color: #666;
    font-weight: bold;
}
@media only screen and (max-width: 991px) {
    .chart-markers {
        padding: 32px 0 0 0;
        text-align: left;
    }
    .chart-markers .download, .chart-markers .upload {
        float: unset;
    }
    .chart-markers .dropdown {
        right: 0;
        top: -5px;
    }
    .chart-markers .total {
        left: 13px;
        margin: -5px 0 0 0;
    }
}

.service-content {
    margin: 0 0 30px 0;
}
.board {
    padding: 0;
    margin-bottom: 10px;
}
.board .col-lg-3,
.board .col-lg-4 {
    padding-right: 5px;
}
.board .col-lg-3:nth-child(4),
.board .col-lg-4:nth-child(4) {
    padding-right: 15px;
}
@media only screen and (max-width: 991px) {
    .board .col-md-6 {
        padding-right: 15px;
    }
}
.board tr:last-child {
    border-bottom: 1px solid #eee;
}
.board .role i {
    font-style: normal;
    color: #ccc;
    display: inline-block;
    clear: both;
    font-size: .9em;
}
.board .role b {
    font-weight: normal;
    color: #f27226;
    display: inline-block;
}
.board .tools i.fa-star {
    margin: 0 0 0 -3px;
    font-size: .8em;
    color: #ccc;
}
.board .tools i.on {
    color: #f27226;
}
.board .tools a.button {
    display: inline-block;
    border: 1px solid #f5f5f5;
    border-radius: 4px;
    box-shadow: unset;
    background: #f9f9f9;
    margin: 10px 0 0 0;
    width: auto;
}
.board .tools a {
    font-size: .9em;
    color: #666;
}
.board i.fa-toggle-on {
    color: #f27226;
}
.board a {
    position: relative;
}
.board i.fa-toggle-off {
    color: #ccc;
}
.board label {
    display: none;
}
@media only screen and (max-width: 641px) {
    .board table th {
        display: none;
    }
    .board table {
        width: 100%;
    }
    .board tr {
        width: 100%;
    }
    .board td {
        width: 100%;
        display: block;
        clear: both;
    }
    .board td:first-child {
        background: #f5f5f5;
    }
    .board label {
        color: #666;
        display: block;
        text-align: left;
        float: left;
        width: 50%;
    }
    .board td .active {
        text-align: right;
        float: right;
        width: 50%;
    }
    .board td .active .button-register {
        margin: 0 0 10px 0;
    }
}

.box {
    padding: 15px 10px 10px 60px;
    margin: 10px 0 0 0;
    width: 100%;
    min-height: 160px;
    border: 1px solid #d7d7d7;
    border-radius: 4px;
}
.box .row-1,
.box .row-2 {
    width: calc(100% + 50px);
    position: relative;
    margin: 3px 0 10px -50px;
    padding-left: 65px;
}
.box .row-2 {
    margin: 0 0 0 -50px;
}
.box img.icon-box {
    position: absolute;
    top: 25px;
    left: 25px;
}
.box .row-1 img.icon-box,
.box .row-2 img.icon-box {
    top: 0;
    left: 10px;
}

@media only screen and (max-width: 1201px) and (min-width: 991px) {
    .box {
        padding: 60px 15px 10px 15px;
        min-height: 210px;
    }
    .box img.icon-box {
        left: calc(50% - 25px);
    }
}
.box:hover {
    border: 1px solid #f27226;
}
.box .label {
    font-size: .9em;
    display: block;
}
.box .text {
    font-size: 1.1em;
    font-weight: bold;
}
.box .desc {
    font-size: .9em;
    font-weight: normal;
    color: #ccc;
}
.box .visual-status {
    border: 1px solid #d7d7d7;
    box-shadow: 0 0 5px 3px #f5f5f5 inset;
    border-radius: 3px;
    margin: 10px 0 10px 0;
    height: 32px;
    color: #ccc;
    line-height: 32px;

}
.box .visual-status div {
    width: 50%;
    float: left;
    overflow: hidden;
    text-align: center;
    font-size: .95em;
}
.box .visual-status .on {
    background: #f27226;
    border-radius: 3px;
    color: #fff;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
    white-space: nowrap;
    font-weight: normal;
    margin-top: -1px;
}
.box .visual-status a {
    color: #ccc;
    display: block;
    outline: none;
}
.box .visual-status .on a {
    color: #fff;
}
.box .price {
    font-size: 1.5em;
    color: #f27226;
    clear: both;
    margin: 0 0 20px 0;
}
.box .price sup {
    font-size: .6em;
}
.box .price i {
    font-weight: 300;
    font-style: normal;
    font-size: .7em;
    display: block;
    color: #ccc;
}
.box a.bottom-link {
    display: block;
    margin: 10px 0 0 0;
    font-size: .9em;
    outline: none;
}
.box .description {
    width: calc(100% - 40px);
    border-top: 1px solid #eee;
    font-size: .9em;
    padding: 10px 0 0 23px;
    color: #ccc;
    position: absolute;
    bottom: 20px;
    left: 25px;
}
.box .description i {
    display: block;
    position: absolute;
    top: 13px;
    left: 3px;

}
@media only screen and (max-width: 1201px) and (min-width: 991px) {
    .box .description {
        bottom: 15px;
    }

}
.box .date {
    color: #ccc;
    display: block;
}
.box .reset {
    display: inline-block;
    width: auto;
    margin: 5px 0 0 0;
}

/* ----------------------------------------------- */

/* START: SERVICE INTERNET */
@media only screen and (max-width: 769px) {
    .service-internet .service-header {
        margin-bottom: 60px;
    }
}
@media only screen and (max-width: 321px) {
    .service-internet .service-header {
        margin-bottom: 60px;
    }
}
.service-internet .menu-contract {
    list-style: none;
    margin: -10px 0 0 -50px;
    padding: 0;
}
.service-internet .menu-contract li {
    border-bottom: 1px solid #eee;
    padding: 3px 0 4px 0;
}
.service-internet .menu-contract li:last-child {
    border: 0;
}
.service-internet .menu-contract li img {
    padding: 0 10px 0 0;
}
.internet-contract-header {
    background: #f9f9f9;
    border-radius: 4px;
    margin: 15px 0 10px 0;
    padding: 10px;
    font-size: 1.2em;
    position: relative;
    cursor: pointer;
}

.internet-contract-header span.number {
    color: #ccc;
    border-right: 1px solid #eee;
    padding: 0 20px 0 15px;
}
.internet-contract-header span.contract-number {
    border-right: 1px solid #eee;
    padding: 0 20px 0 15px;
}
.internet-contract-header span.contract-combo {
    padding: 0 20px 0 15px;
}
.internet-contract-header .switcher {
    position: absolute;
    top: 5px;
    right: 10px;
}
.internet-contract-header .switcher a {
    cursor: pointer;
    display: block;
    width: 44px;
    height: 44px;
    padding: 10px 0 10px 0;
    text-align: center;
}
.internet-contract-header .switcher i {
    color: #ccc;
}
@media only screen and (max-width: 769px) {
    .internet-contract-header {
        font-size: 1.1em;
    }
}
@media only screen and (max-width: 481px) {
    .internet-contract-header {
        font-size: 1em;
        padding: 10px 40px 10px 10px;
    }
    .internet-contract-header span.number {
        padding: 0 10px 0 10px;
    }
    .internet-contract-header span.contract-number {
        border: 0;
        padding: 0 20px 0 18px;
    }
    .internet-contract-header span.contract-combo {
        display: block;
        padding: 0 20px 0 50px;
    }
}
/* END: SERVICE INTERNET */
/* ----------------------------------------------- */

/* START: SERVICE TV */
.service-tv .box {
    padding: 20px 10px 10px 15px;
}
.service-tv .decode-box .box {
    min-height: 340px;
}
.service-tv .decode-box .col-lg-3 {
    padding-right: 0;
}
.service-tv .decode-box .col-lg-3 .box {
    min-height: 350px;
}
@media only screen and (max-width: 1201px) and (min-width: 981px) {
    .service-tv .decode-box .box {
        min-height: 410px;
    }
    .service-tv .combo .col-lg-4 .box {
        min-height: 200px;
    }
}
@media only screen and (max-width: 981px) {
    .service-tv .decode-box {
        padding-right: 15px;
    }
}
@media only screen and (max-width: 769px) {
    .service-tv .decode-box .box {
        min-height: 150px;
    }
    .service-tv .combo .col-lg-4 .box {
        min-height: 150px;
    }
}
.service-tv .board .col-lg-4:nth-child(3) {
    padding-right: 15px;
}
.service-tv .decode-box .number {
    position: absolute;
    text-align: center;
    color: #ccc;
    width: 60px;
    height: 60px;
    top: 10px;
    left: 30px;
    padding: 20px 0 0 0;
    font-size:  1.5em;
    font-weight: 300;
}
.service-tv .decode-box .name {
    padding: 0 0 20px 60px;
}
.service-tv .decode-box .name b {
    font-size: 1.3em;
}
.service-tv .decode-box .joined {
    border-top: 1px solid #eee;
    padding: 20px 0 20px 60px;
}
.service-tv .decode-box .joined .date {
    font-size: 1.2em;
}
.service-tv .decode-box .box .box {
    border: 0;
    border-top: 1px solid #eee;
    padding: 20px 0 0 60px;
    margin: 0;
    min-height: 150px;
    position: relative;
}
.service-tv .decode-box .box .box .icon-box {
    left: 0;
}
@media only screen and (max-width: 1201px) and (min-width: 981px) {
    .service-tv .decode-box .joined {
        padding: 20px 0 20px 10px;
    }
    .service-tv .decode-box .box .box {
        padding: 80px 0 0 10px;
        min-height: 220px;
    }
    .service-tv .decode-box .box .box .icon-box {

    }
}
@media only screen and (max-width: 769px) {
    .service-tv .decode-box .name {
        float: left;
    }
    .service-tv .decode-box .joined {
        width: 50%;
        text-align: left;
        float: right;
        border: 0;
        padding: 0 0 0 20px;
    }
}
.service-tv .table {
    width: calc(100% - 30px);
    margin: 0 0 0 15px;
}
.service-tv .table td {
    color: #ccc;
}
.service-tv .table td b {
    color: #666;
}
.service-tv .table td i.active {
    color: #f27226;
}
.service-tv .table th {
    border-bottom: 1px solid #f27226;
    text-align: center;
}
.service-tv .table th:nth-child(1),
.service-tv .table th:nth-child(2) {
    text-align: left;
}
.service-tv .table tr {
    cursor: pointer;
}
.service-tv .table tr.info {
    background: #f9f9f9;
}
.service-tv .table tr.info td a.button {
    display: inline-block;
    padding-top: 10px;
}
@media only screen and (max-width: 769px) {
    .service-tv .table th {
        font-size: .9em;
    }
    .service-tv .table th img {
        width: 50px;
    }
}

/* Style Box Combo dùng chung giữa các Service */
.combo .box h4 {
    font-weight: 700;
    font-size: 1.2em;
}
.combo .box .price-combo {
    color: #666;
    font-size: 1em;
}
.combo .box .combo-status {
    color: #ccc;
    position: absolute;
    top: 25px;
    right: 25px;
}
.combo .box .date {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 15px 0 15px 0;
    margin: 15px 0 15px 0;
    text-align: center;
}
.combo .box .date b {
    font-size: 1.1em;
    font-weight: normal;
}
.combo .box .date b i {
    font-style: normal;
    color: #ccc;
}
.combo .box .combo-status i.active { /* Trạng thái đã đăng ký/còn hạn dịch vụ */
    color: #f27226;
}
.combo .box .register a { /* Nút đăng ký/gia hạn gói dịch vụ */
    display: block;
    background: #f27226;
    color: #fff;
    padding: 10px;
    text-align: center;
    margin: 0 auto 0 auto;
    border-radius: 5px;
    text-transform: uppercase;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
}
/* END: SERVICE TV */
/* ----------------------------------------------- */

/* START: SERVICE FPT PLAY */
#service-fpt-play {
    display: block;
    position: relative;
}
#service-fpt-play .combo .box {
    padding: 20px 20px 20px 20px;
}
/* END: SERVICE FPT PLAY */
/* ----------------------------------------------- */

/* START: SERVICE F SEND */
#service-f-send {
    display: block;
    position: relative;
}
/* END: SERVICE F SEND */
/* ----------------------------------------------- */

/* START: SERVICE F SHARE */
#service-f-share {
    display: block;
    position: relative;
}
/* END: SERVICE F SHARE */
/* ----------------------------------------------- */

/* START: CONTRACT */
#contract .box {
    min-height: 150px;
}
#contract .wifi-features,
#contract .modem-features {
    margin: 10px 0 0 0;
}
#contract .modem-features {
    position: absolute;
    bottom: -5px;
    right: 5px;
}
#contract .modem-features a {
    color: #ccc;
    border: 1px solid #eee;
    width: 46px;
    height: 46px;
    display: inline-block;
    border-radius: 46px;
    text-align: center;
    padding: 12px 0 0 0;
    margin: 0 5px 0 0;
}
#contract .modem-features a {
    width: 38px;
    height: 38px;
    padding: 8px 0 0 0;
}
#contract .modem-features a:hover {
    color: #fff;
    background: #f27226;
    border: 1px solid #f27226;
    animation-duration: .1s;
}
#contract .box-wifi {
    padding: 10px 10px 7px 0;
}
#contract .box-wifi .row-1 {
    margin: 0 0 10px 0;
    padding-left: unset;
    padding-bottom: 0;
    width: calc(100% - 10px);
}
#contract .box-wifi .break {
    clear: both;
    width: 100%;
    height: 50px;
    background: #000;
    float: none;
}
#contract .box-wifi .label {
    margin: 3px 0 0 60px;
}
#contract .wifi-features a.btn {
    padding: 5px 60px 5px 5px;
    background: #f5f5f5;
    font-size: .9em;
    color: #333;
    border: 1px solid #eee;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
    width: 100%;
    max-width: 100%;
    position: relative;
    margin: 2px 10px 0 10px;
}
#dropdownMenuLink-2g {
    margin: 10px 0 5px 10px !important
}
#contract .wifi-features a.btn:hover {
    border: 1px solid #ccc;
}
#contract .wifi-features a.btn .band {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #333;
    color: #fff;
    border-radius: 3px;
    padding: 2px 5px 2px 5px;
    font-size: .9em;

}
#contract .wifi-features a.btn .band i {
    color: #333;
    position: absolute;
    top: 6px;
    left: -17px;
    font-size: 1.2em;
}
#dropdownMenuLink-5g .band {
    background: #f27226 !important
}
#contract .wifi-features a.dropdown-item {
    font-size: .9em;
    padding: 3px 3px 3px 10px;
}
#contract .wifi-features a.dropdown-item:hover {
    background: transparent;
    color: #f27226;
}
#contract .wifi-features a.dropdown-item i {
    color: #ccc;
    padding-right: 5px;
}
/* END: CONTRACT */

.wrapper-address {
    width: 100%;
    min-height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}
.address {
    width: 300px;
    text-align: center;
    border-radius: 5px;
    background: #000;
    opacity: .8;
    padding: 10px 15px 10px 15px;
    color: #ccc;
    min-width: 300px;
    min-height: 30px;
    z-index: 1000;
    margin: 30px auto 0 auto;
    position: relative;
}
.address .fa-caret-down {
    color: #000;
    position: absolute;
    bottom: -9px;
    left: 49%;
}
.address .fa-map-marker-alt {
    color: #f27226;
    position: absolute;
    bottom: -37px;
    left: calc(49% - 6px);
    opacity: 1;
}

.sub-header {
    font-weight: bold;
    font-size: 1.3em;
    margin: 10px 0 10px 0;
    padding: 0 0 0 15px;
    position: relative;
}
.service-content .sub-header {
    margin: 10px 0 10px 0;
}
.sub-header:before {
    content: " ";
    border: 0;
    background: #f27226;
    width: 5px;
    border-radius: 10px;
    height: 25px;
    position: absolute;
    top: 0;
    left: 0;
}

/* START: PROFILE EDIT */
.profile-edit {
    font-size: 1.1em;
    padding: 10px 0 0 0;
}
.profile-edit .row {
    padding: 0;
    margin: 0;
}
.profile-edit .col-lg-2 {
    padding: 5px 0 0 0;
    margin-bottom: 20px;
    text-align: right;
}
@media only screen and (max-width: 981px) {
    .profile-edit .col-lg-2 {
        text-align: left;
        margin: 0;
        padding: 10px 0 5px 15px;
    }
}
.profile-edit input {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 5px 5px 10px;
    font-size: 1.1em;
    outline: none;
    min-height: 40px;
}
.profile-edit input[type="radio"] {
    min-height: 5px;
    width: auto;
}
.profile-edit i.fa-lock {
    color: #ccc;
    position: absolute;
    top: 13px;
    right: 30px;
}
.profile-edit .phone {
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 40px;
    position: relative;
    margin-bottom: 10px;
}
.profile-edit .phone .number {
    font-style: italic;
    color: #ccc;
    background: #f5f5f5;
    border-radius: 5px 0 0 5px;
    border: 1px solid #ccc;
    width: 40px;
    height: 40px;
    padding: 5px 0 0 7px;
    position: absolute;
    top: -1px;
    left: -1px;
    font-size: .9em;
}
.profile-edit .phone .number i {
    margin-top: 5px;
    position: absolute;
    top: 10px;
    right: 9px;
}
.profile-edit .phone input {
    width: calc(100% - 45px);
    border: 0;
    margin-left: 45px;
    min-height: 32px;
    padding: 0 0 0 5px;
    cursor: pointer;
}
.profile-edit .phone .status {
    position: absolute;
    top: 10px;
    right: -110px;
    color: #f27226;
    font-size: .9em;
    text-align: left;
    width: 100px;
}
.profile-edit .phone .status a {
    outline: none;
}
.profile-edit .phone .status i.fa-check-circle {
    font-size: 1.2em;
    color: #50d181;
}
.profile-edit .phone .status i.fa-exclamation-triangle {
    font-size: 1.2em;
    color: #f27226;
}
.profile-edit .phone .new {
    border: 1px solid #ccc;
    background: #f5f5f5;
    border-radius: 5px;
    padding: 3px 15px 3px 10px;
    font-size: .9em;
    position: absolute;
    top: 6px;
    right: 5px;
}
.profile-edit .phone .new a {
    color: #666;
}
.profile-edit .phone .new i {
    color: #ccc;
}
.profile-edit input[type="submit"] {
    width: auto;
    padding: 5px 20px 5px 20px;
    cursor: pointer;
}
.forgot-password .check {
    margin: 10px 0 0 0;
    position: absolute;
    width: 100px;
    top: -2px;
    right: 17px;
}
.forgot-password .warning {
    border: 1px solid #eee;
    padding: 13px 10px 13px 10px;
    background: #f9f9f9;
    color: #f27226;
    margin: 10px 0 10px 0;
    border-radius: 3px;
}
.create-password .warning {
    border: 0;
    padding: 0 10px 5px 15px;
    background: #fff;
    color: #f27226;
    margin: 10px 0 10px 0;
}
.create-password .desc {
    padding: 20px 0 20px 70px;
    border-bottom: 1px solid #eee;
    display: inline-block;
    position: relative;
}
.create-password .desc .icon {
    background: #f5f5f5;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    padding: 16px 0 0 0;
    text-align: center;
    color: #f27226;
    position: absolute;
    top: 15px;
    left: 0;
}
.create-password .desc .icon i {
    color: #f27226;
}
.forgot-password .input-contract {
    position: relative;
}
.forgot-password .input-contract i {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #ccc;
}
.forgot-password .input-contract i.locked {
    font-size: 1em;
    left: 30px;
}
.forgot-password .input-contract input[disabled="disabled"] {
    background: #f5f5f5;
}
.forgot-password .label {
    margin: 5px 0 0 0;
    font-size: 1.15em;
}
.forgot-password .label ul.tab {
    list-style: none;
    margin: 0;
    padding: 0;
}
.forgot-password .label ul.tab li {
    float: left;
}
.forgot-password .label ul.tab li a {
    font-size: .9em;
    background: #f5f5f5;
    border-radius: 5px;
    display: block;
    color: #999;
    margin: 0 10px 5px 0;
    padding: 5px 13px 5px 13px;
}
.forgot-password .label ul.tab li.active a {
    color: #fff;
    background: #f27226;
}
.forgot-password .label-space {
    margin: 15px 0 0 0;
}
.forgot-password .contract {
    width: 100%;
    background: #f5f5f5;
    padding: 10px 0 10px 15px;
    margin: 5px 0 0 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    position: relative;
}
.forgot-password .contract .name {
    margin: 5px 0 0 20px;
}
.forgot-password .contract input {
    margin: 3px 5px 0 0;
}
.forgot-password input[type="text"]:disabled {
    color: #ccc;
}
.forgot-password .contract b {
    display: inline-block;
    font-size: 1.3em;
    margin: 0;
}
.forgot-password .email-password {
    width: 100%;
    background: #f5f5f5;
    padding: 10px 0 10px 15px;
    margin: 5px 0 0 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    position: relative;
}
.forgot-password .email-password input {
    margin: 3px 5px 0 0;
}
.forgot-password .email-password b {
    display: table;
    font-size: 1.3em;
    margin: 0 0 0 20px;
}
.forgot-password .key {
    margin: 10px 0 10px 0;
    border: 1px solid #eee;
    background: #f9f9f9;
    border-radius: 4px;
}
.forgot-password input {
    margin: 5px 0 5px 0;
}
.forgot-password .submit {
    margin: 15px 0 0 0;
}
.forgot-password a.not-me {
    background: #959595;
    color: #fff;
    font-size: 1.1em;
    margin: 0 0 0 15px;
    padding: 10px 30px 10px 30px;
}
.forgot-password a.not-me:hover {
    background: #818181;
    color: #fff;
}
.otp {

}

.otp .icon {
    background: #f5f5f5;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    text-align: center;
    color: #666;
    padding: 16px 0 0 0;
}
.otp .contract {
    padding: 0 0 15px 70px !important;
    display: block;
    border-bottom: 1px solid #eee !important;
}
.otp .desc {
    width: 100%;
    padding: 0 0 0 70px;
    margin: 15px 0 0 0;
    position: relative;
    display: inline-block;
    border: 0;
}
.otp .desc b {
    color: #f27226;
    font-weight: normal;
}
.otp .create-password {
    padding: 0 0 0 70px !important;
    margin: 0 !important;
}
.otp .create-password .label {
    padding: 0 0 0 70px;
    margin: 0;
}
.otp .create-password .input-contract {
    padding: 0;
}
.otp .input-contract i {
    right: 20px !important;
}
.otp .desc .icon {
    position: absolute;
    top: 0;
    left: 0;
}
.otp ul.contract-info {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}
.otp ul.contract-info li {
    min-width: 120px;
    font-size: 1.1em;
    float: left;
}
.otp ul.contract-info li.label {
    clear: both;
}
.otp-input {
    padding: 15px 0 0 10px;
    margin: 0;
}
.otp-input .forgot-password input {
    margin: 0 !important;
}
.otp-input .desc {
    margin: 0;
}
.otp input[type='submit'] {
    border: 0;
}
a.back,
.otp a.back {
    font-size: 1em;
    background: #999;
    margin: 0 0 0 10px;
}

.not-me .description {
    width: calc(100% + 32px);
    background: #f9f9f9;
    margin: -16px 0 0 -16px;
    padding: 15px 30px 15px 30px;
    border-bottom: 1px solid #eee;
    position: relative;
}
.not-me .description .hotline {
    padding: 0 0 0 65px;
    font-size: 1.15em;
}
.not-me .description .hotline b {
    color: #f27226;
}
.not-me .description .hotline .icon {
    width: 40px;
    height: 40px;
    background: #f27226;
    border-radius: 40px;
    text-align: center;
    padding: 10px 0 0 0;
    position: absolute;
    top: 0;
    left: 15px;
}
.not-me .description .hotline i {
    color: #fff;
}
.not-me .label {
    color: #999;
    margin: 10px 0 0 0;
}
.not-me .form-input {
    margin: 15px 0 10px 0;
    line-height: 200%;
}
.not-me .form-input input {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    outline: none;
}
.not-me .form-input .key {
    width: 100%;
    border: 1px solid #eee;
    background: #f9f9f9;
    margin: 15px 0 0 0;
}
.not-me .mr-auto {
    padding: 10px 30px 10px 30px;
    margin: 0 0 0 15px;
}
.change-password {
    margin: 30px 0 0 0;
}
.change-password .reset {
    border: 1px solid #f27226;
    font-size: .9em;
    border-radius: 5px;
    padding: 6px 10px 6px 10px;
    display: inline-block;
    line-height: 100%;
    outline: none;
    position: absolute;
    top: 35px;
    right: 21px;
}
.change-password .reset:hover {
    border: 1px solid #f27226;
    background: #f27226;
    color: #fff;
    border-radius: 5px;
    outline: none;
}
.change-password .reset i {
    font-size: .9em;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}
.change-password .reset:hover i {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
.change-password .form-input {
    margin: 10px 0 0 0;
    line-height: 200%;
}
.change-password .form-input input {
    width: 100%;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
    outline: none;
}
.change-password input[type="submit"],
.change-password input.submit {
    margin: 20px 0 0 15px;
    padding: 10px 30px 10px 30px;
}
.change-password .description {
    position: relative;
    padding: 0 30px 0 100px;
}
.change-password .description b {
    color: #f27226;
    font-weight: normal;
}
.change-password .icon {
    width: 60px;
    height: 60px;
    background: #f9f9f9;
    text-align: center;
    border-radius: 60px;
    padding: 20px 0 0 0;
    position: absolute;
    top: 0;
    left: 20px;
}

/* MODAL */
.modal {
    z-index: 100000;
}
@media only screen and (max-width: 641px) {
    .modal {
        margin-top: 50px;
    }
}
.modal-title {
    font-weight: 300;
}
.modal-body {
    text-align: center;
}
.confirm-code {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 0 10px 0;
    display: inline-block;
    padding: 5px;
    clear: both;
}
.confirm-code input {
    border: 0;
    font-size: 1.3em;
    text-align: center;
    outline: none;
    padding: 0 0 0 20px;
}
.confirm-code i {
    color: #ccc;
    margin: 0 10px 0 0;
}
.modal-body a.resend {
    clear: both;
    color: #ccc;
    display: block;
}
.modal-footer {
    text-align: center;
}
.favorites .col-lg-2 {
    padding-left: 10px;
    margin-bottom: 5px;
}
.fav-box {
    text-align: left;
}
.fav-box i {
    position: absolute;
    top: 20px;
    right: 15px;
    color: #ccc;
}
.fav-box a {
    border: 1px solid #ccc;
    background: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
    color: #666;
    display: block;
}
.fav-box a.active {
    border: 1px solid #f27226;
}
.fav-box a.active i {
    color: #f27226;
}
.favorites .submit {
    margin: 5px 0 0 -7px;
}
/* END: PROFILE EDIT */

/* PAYMENT PROGRESS */
.payment-progress {
    padding: 10px 0 0 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}
.payment-progress p {
    font-size: 1.3em;
    display: inline-block;
}
.payment-progress p i {
    color: #ccc;
}
.payment-progress p.active {
     color: #66cc66;
 }

.payment-progress p.active i {
    color: #66cc66;
}
.payment-progress p.failed {
    color: #f27226;
}
.payment-progress p.failed i {
    color: #f27226;
}
@media only screen and (max-width: 641px) {
    .payment-progress p {
        font-size: 1em;
    }
}

/* PREPAID */
.prepaid .title {
    color: #ccc;
    font-size: 1.1em;
}
.prepaid .title b {
    color: #666;
    font-weight: normal;
}
.prepaid .price {
    color: #f27226;
    font-size: 1.3em;
    font-weight: bold;
}
.prepaid .price sup {
    font-weight: normal;
}
.prepaid .submit {
    margin: 0 0 0 0 !important;
    padding: 10px 30px 10px 30px;
}


/* Support Form */
.support-form {
    padding: 20px 0 0 0;
}
.support-form div {
    margin: 0 0 10px 0;
    position: relative;
}
.support-form label {
    display: block;
}
.support-form input,
.support-form select,
.support-form option,
.support-form textarea {
    padding: 10px;
    width: 100%;
}
.support-form input[type=submit] {
    width: auto;
}
.support-form textarea,
.support-form select {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 10px;
    outline: none;
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
    appearance: none;
}
.support-form input[disabled=disabled] {
    padding: 10px 10px 10px 40px;
    border: 1px solid #f5f5f5;
    background: #f5f5f5;
}
.support-form div.time,
.support-form div.date {
    float: left;
    width: calc(50% - 5px);
}
.support-form div.date {
    margin: 0 10px 0 0;
}
.support-form i.fa-map-marker-alt {
    color: #f27226;
    position: absolute;
    top: 45px;
    left: 35px;
}
.support-form i.fa-angle-down {
    position: absolute;
    top: 45px;
    right: 35px;
    z-index: 10;
}
.support-form i.fa-calendar-alt,
.support-form i.fa-clock {
    position: absolute;
    top: 13px;
    right: 15px;
    color: #999;
}
.support-menu-wrapper {
    border: 1px solid #ccc;
    border-radius: 3px;
    outline: none;
    background: #f5f5f5;
    min-height: 43px;
}
.support-menu-wrapper select {
    border: 0;
}

/* Sign Contract */
.sign-contract {
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    position: relative;
}
@media only screen and (max-width: 641px) {
    .sign-contract {
        padding: 0;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
}
.sign-contract-payment {
    padding: 20px;
    margin: 20px 0 0 0;
}
#contract-doc {
    padding: 10px 10px 30px 10px;
    height: 500px;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
}
@media only screen and (max-width: 641px) {
    #contract-doc {
        padding: 10px 0 100px 0;
        overflow-x: scroll;
    }
}
.sign-contract .agree {
    position: absolute;
    bottom: -90px;
    left: -1px;
    width: calc(100% + 2px);
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 20px;
    height: 120px;
    border-radius: 0 0 5px 5px;
}
.sign-contract .agree .submit {
    font-size: 1.15em;
    position: absolute;
    top: 50px;
    width: 120px;
    left: calc(50% - 60px);
    text-align: center;
    padding: 10px 0 10px 0;
    color: #fff;
}
@media only screen and (max-width: 641px) {
    .sign-contract .agree {
        height: 140px;
    }
    .sign-contract .agree .submit {
        top: 80px;
    }
}
.sign-contract .agree .submit:hover {
    color: #fff;
}
.sign-contract .agree .disabled {
    background: #ccc;
    color: #999;
    pointer-events: none;
    cursor: not-allowed;
}
.sign-contract .agree label {
    font-weight: bold;
    cursor: pointer;
}

#slider {
    background: #333 url('../img/slider.png') no-repeat top center;
    width: 100%;
    min-height: 800px;
}
#slider .slider-text {
    color: #fff;
}
#slider .slider-text h2 {
    text-transform: uppercase;
    padding-top: 40%;
}
#slider .slider-text p {
    color: #fff;
    position: relative;
    padding: 20px 0 0 0;
    margin: 20px 0 0 0;
}
#slider .slider-text p:before {
    content: " ";
    background: #f27226;
    width: 200px;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
}
@media only screen and (max-width: 991px) {
    #slider .slider-text h2 {
        font-size: 1.5em;
        padding-top: 80px;
        text-align: center;
    }
    #slider .slider-text p {
        text-align: center;
    }
    #slider .slider-text p:before {
        left: calc(50% - 100px);
    }
}
#slider .login {
    border: 1px solid #fff;
    color: #fff;
    text-align: center;
    padding: 10px;
    width: 400px;
    margin: 40% auto 0 auto;
}

#slider .login ul {
    border: 1px solid #fff;
    width: auto;
    padding: 30px;
    margin: 0;
}
#slider .login ul li {
    width: auto;
    list-style: none;
}
#slider .login ul li.header {
    text-transform: uppercase;
    font-size: 2em;
    padding: 10px 0 20px 0;
}
#slider .login ul li.wrong {
    margin: 0 0 10px 0;
    color: #f37021;
    text-align: left;
}
#slider .login a {
    color: #fff;
}
#slider .login input {
    font-size: 1.2em;
    width: 100%;
    margin: 0 0 20px 0;
    padding: 10px;
    border: 0;
    outline: none;
    clear: both;
    opacity: .8;
}
#slider .login input:hover {
    opacity: 1;
    cursor: pointer;
}
#slider .login input[type="submit"] {
    background: #f37021;
    color: #fff;
    opacity: 1;
}
@media only screen and (max-width: 991px) {
    #slider .login {
        margin: 30px auto 0 auto;
    }
}
@media only screen and (max-width: 641px) {
    #slider .login {
        width: 100%;
    }
}

#slider #login-key {
    margin: 0 0 20px 0;
}
#slider #login-key img.holder {
    width: 100%;
}

.icon {
    margin: 0 0 7px 0;
}
.icon i.fa-check-circle {
    color: #63cf38;
}
.icon i.fa-exclamation-triangle {
    color: #f37021;
}

/* PRICE FORM */
.price-form {
    position: relative;
}
@media only screen and (max-width: 640px) {
    .price-form .col-xs-12 {
        padding: 0;
    }
}
.price-form .header {
    border-bottom: 1px solid #eee;
    padding: 0 0 10px 0;
}
.price-form h2 {
    font-size: 2em;
    font-weight: 300;
    padding: 10px 0 10px 0;
    margin: 0;
}
.price-form .date {
    padding: 10px 0 5px 0;
}
.price-form .text-body {
    font-size: 1.1em;
    color: #666;
}
.price-table {
    margin: 20px 0 20px 0;
    position: relative;
}
.price-table thead {
    background: #df6f21;
    color: #fff;
    border: 0;
}
@media only screen and (max-width: 640px) {
    .price-table thead {
        font-weight: normal !important;
        font-size: .9em;
    }
}
.price-table thead th {
    border: 0;
}
.price-table td {
    background: #f9f9f9;
    font-size: 1.1em;
}
.price-table td.total {
    font-weight: bold;
}
.meter {
    position: relative;
    float: left;
    margin: 5px 15px 5px 0;
}
.meter div {
    border: 1px solid #ccc;
    float: left;
    min-width: 100px;
    padding: 7px 7px 7px 10px;
    font-size: 1.05em;
}
.meter .checker {
    border-radius: 5px 0 0 5px;
}
.meter .checker input {
    margin: 0 5px 0 0;
}
.meter .price {
    min-width: 80px;
    border-radius: 0 5px 5px 0;
    border-left: 0;
    background: #f9f9f9;
}
@media only screen and (max-width: 641px) {
    .meter {
        width: 100%;
    }
    .meter div {
        width: 50%;
    }
}
.report input {
    background: transparent;
    border: 0;

}
.report table tr td {
    font-size: 1.2em;
}
.report .mainTable tr {
    border: 1px solid #ccc;
}
.report .mainTable td {
    border: 1px solid #ccc;
    padding: 5px;
}
.report .line {
    border-bottom: 1px dotted #000;
}
.report tr.caption td,
.report .caption {
    background: #df6f21;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 1.1em;
}



/* FOOTER */
.footer {
    background: #2b2b2b;
    padding: 30px 0 0 0;
    margin: 20px 0 0 0;
}
.footer-white {
    background: #fff;
    padding: 0 0 90px 0;
}
.footer h2 {
    color: #df6f21;
    font-size: 1.1em;
}
@media only screen and (max-width: 640px) {
    #fb {
        width: 100%;
        overflow: hidden;
    }
}
.channels {
    margin: 0 0 20px 0;
}
.channels a {
    margin: 0 5px 0 0;
}
@media only screen and (max-width: 640px) {
    .footer h2 {
        text-align: center;
        margin: 20px 0 5px 0;
    }
    #fb {
        width: 100%;
        text-align: center;
    }
    #fb iframe {
        text-align: center;
    }
    .channels {
        text-align: center;
    }
}
.footer .bottom {
    padding: 5px;
    background: #fff;
}
.footer .bottom .copy {
    font-size: .9em;
    color: #252525;
    width: 350px;
    padding: 8px 0 0 0;
}
.footer .bottom .logo {
    display: inline-block;
}
.footer .bottom .logo object {
    height: 30px;
    float: left;
    margin: 0 20px 0 0;
}
@media only screen and (max-width: 640px) {
    .footer .bottom .logo object {
        float: none;
        margin: 0;
    }
    .footer .bottom .copy {
        width: 100%;
        text-align: center;
    }
}
.footer-menu {
    background: #232323;
}
.footer-menu ul {
    width: auto;
    padding: 0;
    margin: 0 auto 0 auto;
    list-style: none;
}
.footer-menu ul li {
    float: left;
    padding: 5px;
    margin: 0 20px 0 0;
}
.footer-menu ul li a {
    color: #fff;
}
@media only screen and (max-width: 640px) {
    .footer-menu ul li {
        text-align: center;
        float: none;
    }
}
@media only screen and (max-width: 641px) {
    .footer .career {
        text-align: center;
        width: 100%;
        margin: 10px 0 10px 0;
    }
    .footer .career img {
        width: 100%;
    }
}
.footer .useful-links {
    color: #df6f21;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.1em;
}
.footer .useful-links a {
    color: #fff;
    display: block;
    padding: 10px 0 0 0;
    font-size: .9em;
}
@media only screen and (max-width: 640px) {
    .footer .useful-links {
        text-align: center;
        width: 100%;
        margin: 10px 0 10px 0;
    }
}
.footer .second-row {
    padding: 20px 0 0 0;
}
.footer .paper {
    color: #b3b3b3;
    font-size: .9em;
    margin: 0;
    padding: 20px 20px 0 0;
}
@media only screen and (max-width: 640px) {
    .footer .paper {
        text-align: center;
        width: 100%;
        margin: 10px 0 10px 0;
    }
}

/* Footer Logos */
.footer-logos {
    position: relative;
}
.footer .logos {
    padding: 10px 20px 0 20px;
    position: relative;
    width: 100%;
    height: 50px;
    overflow: hidden;
}
.footer .logos a {
    display: block;
    width: 25%;
    float: left;
}
.footer .logos a img {
    text-align: center;
}
@media only screen and (max-width: 640px) {
    .footer .logos {
        height: 90px;
    }
    .footer .logos a {
        text-align: center;
        width: 50%;
    }
}
.footer .logos .column-1,
.footer .logos .column-2 {
    float: left;
}
.footer .logos .column-2 {
    display: none;
}
.footer .control {
    width: 100%;
    height: 70px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}
.footer .control .left,
.footer .control .right {
    position: absolute;
    top: 0;
    width: 30px;
    height: 50px;
    padding: 20px 0 0 0;
    z-index: 9999;
}
.footer .control .left {
    left: 0;
    display: none;
}
.footer .control .right {
    right: -20px;
}
@media only screen and (max-width: 640px) {
    .footer .control .left {
        top: 15px;
        left: 10px;
        display: none;
    }
    .footer .control .right {
        top: 15px;
        right: 5px;
    }
}
.footer .control .left:hover i,
.footer .control .right:hover i {
    color: #fff;
}
/* AutoPay */
.autopay-box {
    margin: 20px 0 0 0;
    list-style: none;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 5px;
}
.autopay-box li.label {
    padding: 0 0 10px 0;
    font-weight: bold;
    font-size: 1.2em;
}
.autopay-box li .submit {
    margin: 20px 0 0 0;
    display: inline-block;
}
.choose-token {
    list-style: none;
    font-size: 1.3em;
    font-weight: 300;
    letter-spacing: 1px;
    margin: 10px 0 0 0;
    padding: 0;

}


.methods-title {
    padding: 0 0 0 35px;
    margin: 0 0 10px 0;
}
.methods-title .int {
    background: #fff;
    color: #f27226;
    width: 40px;
    height: 40px;
    border: 1px solid #f27226;
    border-radius: 50px;
    font-size: 1.5em;
    font-weight: 300;
    display: inline-block;
    position: absolute;
    padding-top: 3px;
    top: 0;
    left: 0;
}
.methods-title .title {
    display: inline-block;
    line-height: 130%;
}
.methods-title .title b {
    color: #f27226;
    display: block;
    font-size: 1.3em;
}
.methods-content {
    border-radius: 4px;
    font-size: 1em;
    width: calc(100% + 15px);
    margin: 5px 0 25px -15px;
    min-height: 270px;
}
.methods-content .desc {
    border-bottom: 1px solid #eee;
    color: #999999;
    width: 100%;
    padding: 15px 20px 15px 70px;
    position: relative;
}
.methods-content .desc i.fa-exclamation-triangle {
    color: #f27226;
}
.methods-content .contract {
    padding: 20px;
    font-size: 1.2em;
}
.methods-content .contract a.submit {
    color: #fff;
    margin: 20px 0 0 0;
    display: inline-block;
    width: auto;
}
.methods-content .contract b {
    font-weight: normal;
    color: #f27226;
}
.methods-content .contract i {
    font-style: normal;
    color: #ccc;
}
.methods-content .desc i {
    position: absolute;
    top: 25px;
    left: 25px;
    color: #ccc;
}
.methods-content .extend-steps {
    padding: 20px;
}
.methods-content .extend-steps .step {
    width: 33.3%;
    float: left;
    position: relative;
}

.methods-content .extend-steps .step .label {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #f27226;
    width: 80px;
    white-space: nowrap;
    display: block;
    margin: 0 auto 10px auto;
    clear: both;
    font-size: 1.1em;
    color: #f27226;
    padding: 0 20px 0 20px;
    z-index: 3;
}
.methods-content .extend-steps .step .label:after {
    content: " ";
    background: #eee;
    width: 100px;
    height: 1px;
    position: absolute;
    top: 13px;
    right: 0;
    z-index: -1;
}
.methods-content .extend-steps .step .label:before {
    content: " ";
    background: #eee;
    width: 100px;
    height: 1px;
    position: absolute;
    top: 13px;
    left: 0;
    z-index: -1;
}
.methods-content .extend-steps .step:first-child .label:before,
.methods-content .extend-steps .step:last-child .label:after {
    display: none;
}
@media only screen and (max-width: 481px) {
    .methods-content .extend-steps .step {
        float: none;
        width: 100%;
        margin: 10px 0 30px 0;
        border-bottom: 1px solid #eee;
    }
    .methods-content .extend-steps .step .label:after,
    .methods-content .extend-steps .step .label:before {
        display: none;
    }
}
.methods-content .extend-steps .step .button {
    display: inline-block;
    margin: 10px 0 10px 0;
    color: #fff;
}
.methods-content .extend-steps .expired,
.methods-content .extend-steps .disallow {
    color: #ccc;
}
.methods-content .extend-steps .expired .label,
.methods-content .extend-steps .disallow .label {
    color: #999;
    border: 1px solid #ccc;
}
.methods-content .extend-steps .expired .button,
.methods-content .extend-steps .disallow .button {
    background: #999;
    color: #fff;
}
.features-hi-fpt {
    background: #f9f9f9;
    padding: 20px;
    margin: 10px 0 20px 0;
}
.features-hi-fpt .logo-hi-fpt {
    padding: 5px 0 10px 0;
}
.features-hi-fpt .logo-hi-fpt img {
    border-radius: 5px;
}
.features-hi-fpt .box {
    border: 0;
    background: #666;
    color: #fff;
    padding: 30px 20px 20px 90px;
    font-size: .9em;
    min-height: 100px;
}
.features-hi-fpt .box-f1 {
    background: #666 url("../img/feature_1.jpg") no-repeat;
    background-size: cover;
}
.features-hi-fpt .box-f2 {
    background: #666 url("../img/feature_2.jpg") no-repeat;
    background-size: cover;
}
.features-hi-fpt .box-f3 {
    background: #666 url("../img/feature_3.jpg") no-repeat;
    background-size: cover;
}
.features-hi-fpt .box b {
    font-size: 1.5em;
    font-weight: 300;
    display: block;
}
.features-hi-fpt .box img {
    position: absolute;
    top: 30px;
    left: 40px;
}
.features-hi-fpt .stores a {
    width: calc(50% - 5px);
    float: left;
    display: inline-block;
    overflow: hidden;
}
.features-hi-fpt .stores a img {
    width: 100%;
}
.features-hi-fpt .stores a:first-child {
    margin-right: 10px;
}

.extend-top-menu {
    background: #fff;
    float: right;
    margin: 15px 0 0 0;
}

.extend-top-menu .item-menu {
    margin: 0 10px 0 0;
    padding: 0 0 0 50px;
    float: left;
    position: relative;
    color: #999;
}
@media only screen and (max-width: 771px) {
    .extend-top-menu {
        padding: 5px;
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
    }
    .extend-top-menu .item-menu {
        width: 30%;
    }
    .extend-top-menu .item-menu:first-child {
        width: 35%;
    }
}
.extend-top-menu .item-menu a {
    display: block;
    color: #666;
    font-size: 1.2em;
    margin: 0;
}
.extend-top-menu .item-menu a.login {
    margin: 5px 0 0 0;
}
.extend-top-menu .circle-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    padding: 9px 0 0 0;
    background: #f9f9f9;
    position: absolute;
    top: 0;
    left: 0;
}
#extend-contract .modal-body i {
    font-style: normal;
    color: #999;
}
#extend-contract h5 {
    font-weight: normal;
    font-size: 1.2em;
}
#extend-contract b {
    font-weight: normal;
    color: #f27226;
}
.popup-bg {
    background: #0e69af url("../img/popup-bg.jpg") no-repeat;
    background-size: cover;
    height: 90px;
    width: calc(100% + 32px);
    margin: -20px 0 20px -16px;
    padding: 10px 0 0 0;
}
.popup-bg-extend {
    background: #f27226 url("../img/popup-bg-extend.jpg") no-repeat;
}
#extend-history ul.list {
    list-style: none;
    margin: 0;
    padding: 0;
}
#extend-history ul.list li:before {
    content: " ";
    background: #eee;
    position: absolute;
    width: 1px;
    height: 100%;
    top: 3px;
    left: 8px;
    z-index: -1;
}
#extend-history ul.list li:last-child:before {
    content: unset;
}
#extend-history ul.list li {
    font-size: 1.2em;
    padding: 0 0 20px 0;
    position: relative;
    z-index: 1;
    font-weight: 300;
}
#extend-history ul.list li i {
    color: #ccc;
}
#extend-history ul.list li b {
    color: #ccc;
    display: block;
    margin: -5px 0 0 75px;
    font-weight: 300;
}
#extend-history ul.list li.expired {

}
#extend-history ul.list li.expired i {
    color: #f27226;
}
/* Bank Search */
.bank-search {
    background: #fff;
    padding: 10px;
    position: relative;
    margin: 0 -15px 20px -15px;
}
.bank-search i {
    color: #ccc;
    position: absolute;
    top: 18px;
    left: 25px;
}
.bank-search input {
    width: calc(100% - 50px);
    float: right;
    margin-left: 50px;
    padding: 5px 0 5px 15px;
    border: 0;
    border-left: 1px solid #f5f5f5;
    outline: none;
}

/* Percentage */
.percentage {

}
.rect-auto, .c100.p51 .slice, .c100.p52 .slice, .c100.p53 .slice, .c100.p54 .slice, .c100.p55 .slice, .c100.p56 .slice, .c100.p57 .slice, .c100.p58 .slice, .c100.p59 .slice, .c100.p60 .slice, .c100.p61 .slice, .c100.p62 .slice, .c100.p63 .slice, .c100.p64 .slice, .c100.p65 .slice, .c100.p66 .slice, .c100.p67 .slice, .c100.p68 .slice, .c100.p69 .slice, .c100.p70 .slice, .c100.p71 .slice, .c100.p72 .slice, .c100.p73 .slice, .c100.p74 .slice, .c100.p75 .slice, .c100.p76 .slice, .c100.p77 .slice, .c100.p78 .slice, .c100.p79 .slice, .c100.p80 .slice, .c100.p81 .slice, .c100.p82 .slice, .c100.p83 .slice, .c100.p84 .slice, .c100.p85 .slice, .c100.p86 .slice, .c100.p87 .slice, .c100.p88 .slice, .c100.p89 .slice, .c100.p90 .slice, .c100.p91 .slice, .c100.p92 .slice, .c100.p93 .slice, .c100.p94 .slice, .c100.p95 .slice, .c100.p96 .slice, .c100.p97 .slice, .c100.p98 .slice, .c100.p99 .slice, .c100.p100 .slice {
   clip: rect(auto, auto, auto, auto);
}
.pie, .c100 .bar, .c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill, .c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill, .c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill, .c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill, .c100.p70 .fill, .c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill, .c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill, .c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill, .c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill, .c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill, .c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .c100.p100 .fill {
    position: absolute;
    border: 0.08em solid #f27226;
    width: 0.84em;
    height: 0.84em;
    clip: rect(0em, 0.5em, 1em, 0em);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    zoom: 570%;
}

.pie-fill, .c100.p51 .bar:after, .c100.p51 .fill, .c100.p52 .bar:after, .c100.p52 .fill, .c100.p53 .bar:after, .c100.p53 .fill, .c100.p54 .bar:after, .c100.p54 .fill, .c100.p55 .bar:after, .c100.p55 .fill, .c100.p56 .bar:after, .c100.p56 .fill, .c100.p57 .bar:after, .c100.p57 .fill, .c100.p58 .bar:after, .c100.p58 .fill, .c100.p59 .bar:after, .c100.p59 .fill, .c100.p60 .bar:after, .c100.p60 .fill, .c100.p61 .bar:after, .c100.p61 .fill, .c100.p62 .bar:after, .c100.p62 .fill, .c100.p63 .bar:after, .c100.p63 .fill, .c100.p64 .bar:after, .c100.p64 .fill, .c100.p65 .bar:after, .c100.p65 .fill, .c100.p66 .bar:after, .c100.p66 .fill, .c100.p67 .bar:after, .c100.p67 .fill, .c100.p68 .bar:after, .c100.p68 .fill, .c100.p69 .bar:after, .c100.p69 .fill, .c100.p70 .bar:after, .c100.p70 .fill, .c100.p71 .bar:after, .c100.p71 .fill, .c100.p72 .bar:after, .c100.p72 .fill, .c100.p73 .bar:after, .c100.p73 .fill, .c100.p74 .bar:after, .c100.p74 .fill, .c100.p75 .bar:after, .c100.p75 .fill, .c100.p76 .bar:after, .c100.p76 .fill, .c100.p77 .bar:after, .c100.p77 .fill, .c100.p78 .bar:after, .c100.p78 .fill, .c100.p79 .bar:after, .c100.p79 .fill, .c100.p80 .bar:after, .c100.p80 .fill, .c100.p81 .bar:after, .c100.p81 .fill, .c100.p82 .bar:after, .c100.p82 .fill, .c100.p83 .bar:after, .c100.p83 .fill, .c100.p84 .bar:after, .c100.p84 .fill, .c100.p85 .bar:after, .c100.p85 .fill, .c100.p86 .bar:after, .c100.p86 .fill, .c100.p87 .bar:after, .c100.p87 .fill, .c100.p88 .bar:after, .c100.p88 .fill, .c100.p89 .bar:after, .c100.p89 .fill, .c100.p90 .bar:after, .c100.p90 .fill, .c100.p91 .bar:after, .c100.p91 .fill, .c100.p92 .bar:after, .c100.p92 .fill, .c100.p93 .bar:after, .c100.p93 .fill, .c100.p94 .bar:after, .c100.p94 .fill, .c100.p95 .bar:after, .c100.p95 .fill, .c100.p96 .bar:after, .c100.p96 .fill, .c100.p97 .bar:after, .c100.p97 .fill, .c100.p98 .bar:after, .c100.p98 .fill, .c100.p99 .bar:after, .c100.p99 .fill, .c100.p100 .bar:after, .c100.p100 .fill {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.c100 {
    position: relative;
    width: 1em;
    height: 1em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    float: left;
    margin: 0 0.1em 0.1em 0;
    background: #eee;
}
.c100 *, .c100 *:before, .c100 *:after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.c100.center {
    float: none;
    margin: 0 auto;
}
.c100.big {
    font-size: 240px;
}
.c100.small {
    font-size: 80px;
}
.c100 > span {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    padding: 23px 0 0 0;
    font-size: .3em;
    font-weight: 300;
    color: #f27226;
    display: block;
    text-align: center;
    white-space: nowrap;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.c100:after {
    position: absolute;
    top: 0.08em;
    left: 0.08em;
    display: block;
    content: " ";
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
    width: 0.84em;
    height: 0.84em;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
}
.c100 .slice {
    position: absolute;
    width: 100%;
    height: 100%;
    clip: rect(0em, 10em, 10em, 2.5em);
}
.c100.p1 .bar {
    -webkit-transform: rotate(3.6deg);
    -moz-transform: rotate(3.6deg);
    -ms-transform: rotate(3.6deg);
    -o-transform: rotate(3.6deg);
    transform: rotate(3.6deg);
}
.c100.p2 .bar {
    -webkit-transform: rotate(7.2deg);
    -moz-transform: rotate(7.2deg);
    -ms-transform: rotate(7.2deg);
    -o-transform: rotate(7.2deg);
    transform: rotate(7.2deg);
}
.c100.p3 .bar {
    -webkit-transform: rotate(10.8deg);
    -moz-transform: rotate(10.8deg);
    -ms-transform: rotate(10.8deg);
    -o-transform: rotate(10.8deg);
    transform: rotate(10.8deg);
}
.c100.p4 .bar {
    -webkit-transform: rotate(14.4deg);
    -moz-transform: rotate(14.4deg);
    -ms-transform: rotate(14.4deg);
    -o-transform: rotate(14.4deg);
    transform: rotate(14.4deg);
}
.c100.p5 .bar {
    -webkit-transform: rotate(18deg);
    -moz-transform: rotate(18deg);
    -ms-transform: rotate(18deg);
    -o-transform: rotate(18deg);
    transform: rotate(18deg);
}
.c100.p6 .bar {
    -webkit-transform: rotate(21.6deg);
    -moz-transform: rotate(21.6deg);
    -ms-transform: rotate(21.6deg);
    -o-transform: rotate(21.6deg);
    transform: rotate(21.6deg);
}
.c100.p7 .bar {
    -webkit-transform: rotate(25.2deg);
    -moz-transform: rotate(25.2deg);
    -ms-transform: rotate(25.2deg);
    -o-transform: rotate(25.2deg);
    transform: rotate(25.2deg);
}
.c100.p8 .bar {
    -webkit-transform: rotate(28.8deg);
    -moz-transform: rotate(28.8deg);
    -ms-transform: rotate(28.8deg);
    -o-transform: rotate(28.8deg);
    transform: rotate(28.8deg);
}
.c100.p9 .bar {
    -webkit-transform: rotate(32.4deg);
    -moz-transform: rotate(32.4deg);
    -ms-transform: rotate(32.4deg);
    -o-transform: rotate(32.4deg);
    transform: rotate(32.4deg);
}
.c100.p10 .bar {
    -webkit-transform: rotate(36deg);
    -moz-transform: rotate(36deg);
    -ms-transform: rotate(36deg);
    -o-transform: rotate(36deg);
    transform: rotate(36deg);
}
.c100.p11 .bar {
    -webkit-transform: rotate(39.6deg);
    -moz-transform: rotate(39.6deg);
    -ms-transform: rotate(39.6deg);
    -o-transform: rotate(39.6deg);
    transform: rotate(39.6deg);
}
.c100.p12 .bar {
    -webkit-transform: rotate(43.2deg);
    -moz-transform: rotate(43.2deg);
    -ms-transform: rotate(43.2deg);
    -o-transform: rotate(43.2deg);
    transform: rotate(43.2deg);
}
.c100.p13 .bar {
    -webkit-transform: rotate(46.8deg);
    -moz-transform: rotate(46.8deg);
    -ms-transform: rotate(46.8deg);
    -o-transform: rotate(46.8deg);
    transform: rotate(46.8deg);
}
.c100.p14 .bar {
    -webkit-transform: rotate(50.4deg);
    -moz-transform: rotate(50.4deg);
    -ms-transform: rotate(50.4deg);
    -o-transform: rotate(50.4deg);
    transform: rotate(50.4deg);
}
.c100.p15 .bar {
    -webkit-transform: rotate(54deg);
    -moz-transform: rotate(54deg);
    -ms-transform: rotate(54deg);
    -o-transform: rotate(54deg);
    transform: rotate(54deg);
}
.c100.p16 .bar {
    -webkit-transform: rotate(57.6deg);
    -moz-transform: rotate(57.6deg);
    -ms-transform: rotate(57.6deg);
    -o-transform: rotate(57.6deg);
    transform: rotate(57.6deg);
}
.c100.p17 .bar {
    -webkit-transform: rotate(61.2deg);
    -moz-transform: rotate(61.2deg);
    -ms-transform: rotate(61.2deg);
    -o-transform: rotate(61.2deg);
    transform: rotate(61.2deg);
}
.c100.p18 .bar {
    -webkit-transform: rotate(64.8deg);
    -moz-transform: rotate(64.8deg);
    -ms-transform: rotate(64.8deg);
    -o-transform: rotate(64.8deg);
    transform: rotate(64.8deg);
}
.c100.p19 .bar {
    -webkit-transform: rotate(68.4deg);
    -moz-transform: rotate(68.4deg);
    -ms-transform: rotate(68.4deg);
    -o-transform: rotate(68.4deg);
    transform: rotate(68.4deg);
}
.c100.p20 .bar {
    -webkit-transform: rotate(72deg);
    -moz-transform: rotate(72deg);
    -ms-transform: rotate(72deg);
    -o-transform: rotate(72deg);
    transform: rotate(72deg);
}
.c100.p21 .bar {
    -webkit-transform: rotate(75.6deg);
    -moz-transform: rotate(75.6deg);
    -ms-transform: rotate(75.6deg);
    -o-transform: rotate(75.6deg);
    transform: rotate(75.6deg);
}
.c100.p22 .bar {
    -webkit-transform: rotate(79.2deg);
    -moz-transform: rotate(79.2deg);
    -ms-transform: rotate(79.2deg);
    -o-transform: rotate(79.2deg);
    transform: rotate(79.2deg);
}
.c100.p23 .bar {
    -webkit-transform: rotate(82.8deg);
    -moz-transform: rotate(82.8deg);
    -ms-transform: rotate(82.8deg);
    -o-transform: rotate(82.8deg);
    transform: rotate(82.8deg);
}
.c100.p24 .bar {
    -webkit-transform: rotate(86.4deg);
    -moz-transform: rotate(86.4deg);
    -ms-transform: rotate(86.4deg);
    -o-transform: rotate(86.4deg);
    transform: rotate(86.4deg);
}
.c100.p25 .bar {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.c100.p26 .bar {
    -webkit-transform: rotate(93.6deg);
    -moz-transform: rotate(93.6deg);
    -ms-transform: rotate(93.6deg);
    -o-transform: rotate(93.6deg);
    transform: rotate(93.6deg);
}
.c100.p27 .bar {
    -webkit-transform: rotate(97.2deg);
    -moz-transform: rotate(97.2deg);
    -ms-transform: rotate(97.2deg);
    -o-transform: rotate(97.2deg);
    transform: rotate(97.2deg);
}
.c100.p28 .bar {
    -webkit-transform: rotate(100.8deg);
    -moz-transform: rotate(100.8deg);
    -ms-transform: rotate(100.8deg);
    -o-transform: rotate(100.8deg);
    transform: rotate(100.8deg);
}
.c100.p29 .bar {
    -webkit-transform: rotate(104.4deg);
    -moz-transform: rotate(104.4deg);
    -ms-transform: rotate(104.4deg);
    -o-transform: rotate(104.4deg);
    transform: rotate(104.4deg);
}
.c100.p30 .bar {
    -webkit-transform: rotate(108deg);
    -moz-transform: rotate(108deg);
    -ms-transform: rotate(108deg);
    -o-transform: rotate(108deg);
    transform: rotate(108deg);
}
.c100.p31 .bar {
    -webkit-transform: rotate(111.6deg);
    -moz-transform: rotate(111.6deg);
    -ms-transform: rotate(111.6deg);
    -o-transform: rotate(111.6deg);
    transform: rotate(111.6deg);
}
.c100.p32 .bar {
    -webkit-transform: rotate(115.2deg);
    -moz-transform: rotate(115.2deg);
    -ms-transform: rotate(115.2deg);
    -o-transform: rotate(115.2deg);
    transform: rotate(115.2deg);
}
.c100.p33 .bar {
    -webkit-transform: rotate(118.8deg);
    -moz-transform: rotate(118.8deg);
    -ms-transform: rotate(118.8deg);
    -o-transform: rotate(118.8deg);
    transform: rotate(118.8deg);
}
.c100.p34 .bar {
    -webkit-transform: rotate(122.4deg);
    -moz-transform: rotate(122.4deg);
    -ms-transform: rotate(122.4deg);
    -o-transform: rotate(122.4deg);
    transform: rotate(122.4deg);
}
.c100.p35 .bar {
    -webkit-transform: rotate(126deg);
    -moz-transform: rotate(126deg);
    -ms-transform: rotate(126deg);
    -o-transform: rotate(126deg);
    transform: rotate(126deg);
}
.c100.p36 .bar {
    -webkit-transform: rotate(129.6deg);
    -moz-transform: rotate(129.6deg);
    -ms-transform: rotate(129.6deg);
    -o-transform: rotate(129.6deg);
    transform: rotate(129.6deg);
}
.c100.p37 .bar {
    -webkit-transform: rotate(133.2deg);
    -moz-transform: rotate(133.2deg);
    -ms-transform: rotate(133.2deg);
    -o-transform: rotate(133.2deg);
    transform: rotate(133.2deg);
}
.c100.p38 .bar {
    -webkit-transform: rotate(136.8deg);
    -moz-transform: rotate(136.8deg);
    -ms-transform: rotate(136.8deg);
    -o-transform: rotate(136.8deg);
    transform: rotate(136.8deg);
}
.c100.p39 .bar {
    -webkit-transform: rotate(140.4deg);
    -moz-transform: rotate(140.4deg);
    -ms-transform: rotate(140.4deg);
    -o-transform: rotate(140.4deg);
    transform: rotate(140.4deg);
}
.c100.p40 .bar {
    -webkit-transform: rotate(144deg);
    -moz-transform: rotate(144deg);
    -ms-transform: rotate(144deg);
    -o-transform: rotate(144deg);
    transform: rotate(144deg);
}
.c100.p41 .bar {
    -webkit-transform: rotate(147.6deg);
    -moz-transform: rotate(147.6deg);
    -ms-transform: rotate(147.6deg);
    -o-transform: rotate(147.6deg);
    transform: rotate(147.6deg);
}
.c100.p42 .bar {
    -webkit-transform: rotate(151.2deg);
    -moz-transform: rotate(151.2deg);
    -ms-transform: rotate(151.2deg);
    -o-transform: rotate(151.2deg);
    transform: rotate(151.2deg);
}
.c100.p43 .bar {
    -webkit-transform: rotate(154.8deg);
    -moz-transform: rotate(154.8deg);
    -ms-transform: rotate(154.8deg);
    -o-transform: rotate(154.8deg);
    transform: rotate(154.8deg);
}
.c100.p44 .bar {
    -webkit-transform: rotate(158.4deg);
    -moz-transform: rotate(158.4deg);
    -ms-transform: rotate(158.4deg);
    -o-transform: rotate(158.4deg);
    transform: rotate(158.4deg);
}
.c100.p45 .bar {
    -webkit-transform: rotate(162deg);
    -moz-transform: rotate(162deg);
    -ms-transform: rotate(162deg);
    -o-transform: rotate(162deg);
    transform: rotate(162deg);
}
.c100.p46 .bar {
    -webkit-transform: rotate(165.6deg);
    -moz-transform: rotate(165.6deg);
    -ms-transform: rotate(165.6deg);
    -o-transform: rotate(165.6deg);
    transform: rotate(165.6deg);
}
.c100.p47 .bar {
    -webkit-transform: rotate(169.2deg);
    -moz-transform: rotate(169.2deg);
    -ms-transform: rotate(169.2deg);
    -o-transform: rotate(169.2deg);
    transform: rotate(169.2deg);
}
.c100.p48 .bar {
    -webkit-transform: rotate(172.8deg);
    -moz-transform: rotate(172.8deg);
    -ms-transform: rotate(172.8deg);
    -o-transform: rotate(172.8deg);
    transform: rotate(172.8deg);
}
.c100.p49 .bar {
    -webkit-transform: rotate(176.4deg);
    -moz-transform: rotate(176.4deg);
    -ms-transform: rotate(176.4deg);
    -o-transform: rotate(176.4deg);
    transform: rotate(176.4deg);
}
.c100.p50 .bar {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.c100.p51 .bar {
    -webkit-transform: rotate(183.6deg);
    -moz-transform: rotate(183.6deg);
    -ms-transform: rotate(183.6deg);
    -o-transform: rotate(183.6deg);
    transform: rotate(183.6deg);
}
.c100.p52 .bar {
    -webkit-transform: rotate(187.2deg);
    -moz-transform: rotate(187.2deg);
    -ms-transform: rotate(187.2deg);
    -o-transform: rotate(187.2deg);
    transform: rotate(187.2deg);
}
.c100.p53 .bar {
    -webkit-transform: rotate(190.8deg);
    -moz-transform: rotate(190.8deg);
    -ms-transform: rotate(190.8deg);
    -o-transform: rotate(190.8deg);
    transform: rotate(190.8deg);
}
.c100.p54 .bar {
    -webkit-transform: rotate(194.4deg);
    -moz-transform: rotate(194.4deg);
    -ms-transform: rotate(194.4deg);
    -o-transform: rotate(194.4deg);
    transform: rotate(194.4deg);
}
.c100.p55 .bar {
    -webkit-transform: rotate(198deg);
    -moz-transform: rotate(198deg);
    -ms-transform: rotate(198deg);
    -o-transform: rotate(198deg);
    transform: rotate(198deg);
}
.c100.p56 .bar {
    -webkit-transform: rotate(201.6deg);
    -moz-transform: rotate(201.6deg);
    -ms-transform: rotate(201.6deg);
    -o-transform: rotate(201.6deg);
    transform: rotate(201.6deg);
}
.c100.p57 .bar {
    -webkit-transform: rotate(205.2deg);
    -moz-transform: rotate(205.2deg);
    -ms-transform: rotate(205.2deg);
    -o-transform: rotate(205.2deg);
    transform: rotate(205.2deg);
}
.c100.p58 .bar {
    -webkit-transform: rotate(208.8deg);
    -moz-transform: rotate(208.8deg);
    -ms-transform: rotate(208.8deg);
    -o-transform: rotate(208.8deg);
    transform: rotate(208.8deg);
}
.c100.p59 .bar {
    -webkit-transform: rotate(212.4deg);
    -moz-transform: rotate(212.4deg);
    -ms-transform: rotate(212.4deg);
    -o-transform: rotate(212.4deg);
    transform: rotate(212.4deg);
}
.c100.p60 .bar {
    -webkit-transform: rotate(216deg);
    -moz-transform: rotate(216deg);
    -ms-transform: rotate(216deg);
    -o-transform: rotate(216deg);
    transform: rotate(216deg);
}
.c100.p61 .bar {
    -webkit-transform: rotate(219.6deg);
    -moz-transform: rotate(219.6deg);
    -ms-transform: rotate(219.6deg);
    -o-transform: rotate(219.6deg);
    transform: rotate(219.6deg);
}
.c100.p62 .bar {
    -webkit-transform: rotate(223.2deg);
    -moz-transform: rotate(223.2deg);
    -ms-transform: rotate(223.2deg);
    -o-transform: rotate(223.2deg);
    transform: rotate(223.2deg);
}
.c100.p63 .bar {
    -webkit-transform: rotate(226.8deg);
    -moz-transform: rotate(226.8deg);
    -ms-transform: rotate(226.8deg);
    -o-transform: rotate(226.8deg);
    transform: rotate(226.8deg);
}
.c100.p64 .bar {
    -webkit-transform: rotate(230.4deg);
    -moz-transform: rotate(230.4deg);
    -ms-transform: rotate(230.4deg);
    -o-transform: rotate(230.4deg);
    transform: rotate(230.4deg);
}
.c100.p65 .bar {
    -webkit-transform: rotate(234deg);
    -moz-transform: rotate(234deg);
    -ms-transform: rotate(234deg);
    -o-transform: rotate(234deg);
    transform: rotate(234deg);
}
.c100.p66 .bar {
    -webkit-transform: rotate(237.6deg);
    -moz-transform: rotate(237.6deg);
    -ms-transform: rotate(237.6deg);
    -o-transform: rotate(237.6deg);
    transform: rotate(237.6deg);
}
.c100.p67 .bar {
    -webkit-transform: rotate(241.2deg);
    -moz-transform: rotate(241.2deg);
    -ms-transform: rotate(241.2deg);
    -o-transform: rotate(241.2deg);
    transform: rotate(241.2deg);
}
.c100.p68 .bar {
    -webkit-transform: rotate(244.8deg);
    -moz-transform: rotate(244.8deg);
    -ms-transform: rotate(244.8deg);
    -o-transform: rotate(244.8deg);
    transform: rotate(244.8deg);
}
.c100.p69 .bar {
    -webkit-transform: rotate(248.4deg);
    -moz-transform: rotate(248.4deg);
    -ms-transform: rotate(248.4deg);
    -o-transform: rotate(248.4deg);
    transform: rotate(248.4deg);
}
.c100.p70 .bar {
    -webkit-transform: rotate(252deg);
    -moz-transform: rotate(252deg);
    -ms-transform: rotate(252deg);
    -o-transform: rotate(252deg);
    transform: rotate(252deg);
}
.c100.p71 .bar {
    -webkit-transform: rotate(255.6deg);
    -moz-transform: rotate(255.6deg);
    -ms-transform: rotate(255.6deg);
    -o-transform: rotate(255.6deg);
    transform: rotate(255.6deg);
}
.c100.p72 .bar {
    -webkit-transform: rotate(259.2deg);
    -moz-transform: rotate(259.2deg);
    -ms-transform: rotate(259.2deg);
    -o-transform: rotate(259.2deg);
    transform: rotate(259.2deg);
}
.c100.p73 .bar {
    -webkit-transform: rotate(262.8deg);
    -moz-transform: rotate(262.8deg);
    -ms-transform: rotate(262.8deg);
    -o-transform: rotate(262.8deg);
    transform: rotate(262.8deg);
}
.c100.p74 .bar {
    -webkit-transform: rotate(266.4deg);
    -moz-transform: rotate(266.4deg);
    -ms-transform: rotate(266.4deg);
    -o-transform: rotate(266.4deg);
    transform: rotate(266.4deg);
}
.c100.p75 .bar {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}
.c100.p76 .bar {
    -webkit-transform: rotate(273.6deg);
    -moz-transform: rotate(273.6deg);
    -ms-transform: rotate(273.6deg);
    -o-transform: rotate(273.6deg);
    transform: rotate(273.6deg);
}
.c100.p77 .bar {
    -webkit-transform: rotate(277.2deg);
    -moz-transform: rotate(277.2deg);
    -ms-transform: rotate(277.2deg);
    -o-transform: rotate(277.2deg);
    transform: rotate(277.2deg);
}
.c100.p78 .bar {
    -webkit-transform: rotate(280.8deg);
    -moz-transform: rotate(280.8deg);
    -ms-transform: rotate(280.8deg);
    -o-transform: rotate(280.8deg);
    transform: rotate(280.8deg);
}
.c100.p79 .bar {
    -webkit-transform: rotate(284.4deg);
    -moz-transform: rotate(284.4deg);
    -ms-transform: rotate(284.4deg);
    -o-transform: rotate(284.4deg);
    transform: rotate(284.4deg);
}
.c100.p80 .bar {
    -webkit-transform: rotate(288deg);
    -moz-transform: rotate(288deg);
    -ms-transform: rotate(288deg);
    -o-transform: rotate(288deg);
    transform: rotate(288deg);
}
.c100.p81 .bar {
    -webkit-transform: rotate(291.6deg);
    -moz-transform: rotate(291.6deg);
    -ms-transform: rotate(291.6deg);
    -o-transform: rotate(291.6deg);
    transform: rotate(291.6deg);
}
.c100.p82 .bar {
    -webkit-transform: rotate(295.2deg);
    -moz-transform: rotate(295.2deg);
    -ms-transform: rotate(295.2deg);
    -o-transform: rotate(295.2deg);
    transform: rotate(295.2deg);
}
.c100.p83 .bar {
    -webkit-transform: rotate(298.8deg);
    -moz-transform: rotate(298.8deg);
    -ms-transform: rotate(298.8deg);
    -o-transform: rotate(298.8deg);
    transform: rotate(298.8deg);
}
.c100.p84 .bar {
    -webkit-transform: rotate(302.4deg);
    -moz-transform: rotate(302.4deg);
    -ms-transform: rotate(302.4deg);
    -o-transform: rotate(302.4deg);
    transform: rotate(302.4deg);
}
.c100.p85 .bar {
    -webkit-transform: rotate(306deg);
    -moz-transform: rotate(306deg);
    -ms-transform: rotate(306deg);
    -o-transform: rotate(306deg);
    transform: rotate(306deg);
}
.c100.p86 .bar {
    -webkit-transform: rotate(309.6deg);
    -moz-transform: rotate(309.6deg);
    -ms-transform: rotate(309.6deg);
    -o-transform: rotate(309.6deg);
    transform: rotate(309.6deg);
}
.c100.p87 .bar {
    -webkit-transform: rotate(313.2deg);
    -moz-transform: rotate(313.2deg);
    -ms-transform: rotate(313.2deg);
    -o-transform: rotate(313.2deg);
    transform: rotate(313.2deg);
}
.c100.p88 .bar {
    -webkit-transform: rotate(316.8deg);
    -moz-transform: rotate(316.8deg);
    -ms-transform: rotate(316.8deg);
    -o-transform: rotate(316.8deg);
    transform: rotate(316.8deg);
}
.c100.p89 .bar {
    -webkit-transform: rotate(320.4deg);
    -moz-transform: rotate(320.4deg);
    -ms-transform: rotate(320.4deg);
    -o-transform: rotate(320.4deg);
    transform: rotate(320.4deg);
}
.c100.p90 .bar {
    -webkit-transform: rotate(324deg);
    -moz-transform: rotate(324deg);
    -ms-transform: rotate(324deg);
    -o-transform: rotate(324deg);
    transform: rotate(324deg);
}
.c100.p91 .bar {
    -webkit-transform: rotate(327.6deg);
    -moz-transform: rotate(327.6deg);
    -ms-transform: rotate(327.6deg);
    -o-transform: rotate(327.6deg);
    transform: rotate(327.6deg);
}
.c100.p92 .bar {
    -webkit-transform: rotate(331.2deg);
    -moz-transform: rotate(331.2deg);
    -ms-transform: rotate(331.2deg);
    -o-transform: rotate(331.2deg);
    transform: rotate(331.2deg);
}
.c100.p93 .bar {
    -webkit-transform: rotate(334.8deg);
    -moz-transform: rotate(334.8deg);
    -ms-transform: rotate(334.8deg);
    -o-transform: rotate(334.8deg);
    transform: rotate(334.8deg);
}
.c100.p94 .bar {
    -webkit-transform: rotate(338.4deg);
    -moz-transform: rotate(338.4deg);
    -ms-transform: rotate(338.4deg);
    -o-transform: rotate(338.4deg);
    transform: rotate(338.4deg);
}
.c100.p95 .bar {
    -webkit-transform: rotate(342deg);
    -moz-transform: rotate(342deg);
    -ms-transform: rotate(342deg);
    -o-transform: rotate(342deg);
    transform: rotate(342deg);
}
.c100.p96 .bar {
    -webkit-transform: rotate(345.6deg);
    -moz-transform: rotate(345.6deg);
    -ms-transform: rotate(345.6deg);
    -o-transform: rotate(345.6deg);
    transform: rotate(345.6deg);
}
.c100.p97 .bar {
    -webkit-transform: rotate(349.2deg);
    -moz-transform: rotate(349.2deg);
    -ms-transform: rotate(349.2deg);
    -o-transform: rotate(349.2deg);
    transform: rotate(349.2deg);
}
.c100.p98 .bar {
    -webkit-transform: rotate(352.8deg);
    -moz-transform: rotate(352.8deg);
    -ms-transform: rotate(352.8deg);
    -o-transform: rotate(352.8deg);
    transform: rotate(352.8deg);
}
.c100.p99 .bar {
    -webkit-transform: rotate(356.4deg);
    -moz-transform: rotate(356.4deg);
    -ms-transform: rotate(356.4deg);
    -o-transform: rotate(356.4deg);
    transform: rotate(356.4deg);
}
.c100.p100 .bar {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

.c100:hover {
    cursor: default;
}
.modal-dialog-full {
    width: 98% !important;
    max-width: 98% !important;
    height: 100vh !important;
}
.conditions {
    width: 100%;
    min-height: 80vh !important;
}

/*-----------New CSS-------------*/


.new_ol .menu-profile div {
    display: inline-block;
    color: #999;
    padding: 8px 10px 0 10px;
    border-right: none;
    min-height: 40px;
    float: left;
}
.new_ol #content{
    background: #fff url(../img/background_new_ol.png);
    min-height: 700px;
}
.payment-header {
    min-height: 150px !important;
    color: #fff;
    position: relative;
    display: block;
}
.payment-header p {
    position: absolute;
    bottom: -100px;
    left: 0;
    color: #fff;
}
.payment-steps {
    background: #f5f5f5;
    padding: 30px 20px 20px 20px;
}
.payment-steps h3 {
    margin: 20px 0 10px 0;
    font-weight: bold;
    font-size: 1.2em;
}
.payment-steps .container {
    background: #fff;
    border-radius: 6px;
    padding: 30px 30px 30px 30px;
}
.payment-steps .container .container {
    padding: 0;
}
.checkmark {
    position: absolute;
    top: 17px;
    left: 15px;
    height: 15px;
    width: 15px;
    background-color: #eee;
    border-radius: 50%;
}
.method {
    background: #fff;
    display: block;
    position: relative;
    margin: 5px 0 10px 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #000;
    border-radius: 6px;
    min-height: 50px;
    padding: 17px 0 0 60px;
    font-size: 1.2em;
    border: 1px solid #eee;
}
.method:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 45px;
    width: 1px;
    height: 50px;
    background: #eee;
}
.method input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.method:hover input ~ .checkmark {
    background-color: #ccc;
}
.method input:checked ~ .checkmark {
    background-color: #66cc33;
}
.method input:checked ~ .checkmark:after {
    display: block;
}

.input-info {
    background-color: rgba(0,0,0,0.4);
    float: right;
    padding: 30px 30px 10px 30px;
    position: relative;
    border-radius: 4px;
}
.input-info-confirm:after {
    content: " ";
    width: 0;
    height: 0;
    position: absolute;
    top: 50px;
    right: -16px;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 16px solid rgba(0,0,0,0.4);
}
.input-info-active:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
    width: 155px;
    background-color: #f27226;
    height: 3px;
}
.input-info p {
    color: #fff;
    padding: 15px 0 0 0;
    display: inline-block;
}
.input-info > .form-group select {
    background: #fff;
    height: 48px;
    border-radius: 6px;
    width: 100%;
    outline: none;
    padding: 0 10px 0 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}
.input-info > .form-group select {
    margin: 5px 0;
    display: block;
    font-size: 14px;
    border: 0;
}
.input-info > .form-group input {
    margin: 5px 0;
    display: block;
    font-size: 14px;
    border: 0;
}
.input-info > .form-group .col {
    padding: 0 10px;
}
.input-info input.readonly {
    font-size: 30px;
    text-transform: uppercase;
    background-color: #666666;
    color: #fff;
    border: none;
    font-weight: 300;
}
.input-info img{
    max-width: 100%;
    display: block;
}
.input-info .label p{
    color: #fff;
    font-size: 1.5em;
    text-align: center;
    font-weight: 300;
}
.input-info .key{
    margin: 10px 0 10px 0;
    border: 1px solid #eee;
    background: #f9f9f9;
    border-radius: 4px;
}
.input-info .submit {
    padding: 0 10px !important;

}
.input-info .submit a{
    display: block;
    width: 100%;
    margin: 5px auto;
    text-align: center;
    padding-top: 13px;
    padding-bottom: 13px;
    cursor: pointer;
}
.input-info .col {
    flex-basis: initial;
}
table.bill {
    width: 100%;
    background: #dddddd;
    margin: 15px 0 15px 0;
}
table.bill th {
    background: #999999;
    color: #fff;
    padding: 10px;
    font-weight: bold;
}
table.bill td {
    background: #fff;
    border: 1px solid #ccc;
}
table.bill td.total {
    background: #f4f4f4;
    font-weight: bold;
}
.button-confirm {
    width: 100%;
    height: 48px;
    font-size: 1.2em !important
}
.modal-bill {
    width: 100%;
}
.modal-bill .modal-dialog {
    max-width: 990px;
}
.modal-bill h3 {
    font-size: 1.1em;
    font-weight: bold;
    margin: 10px 0 10px 0;
}
.modal-bill .row input {
    background: #fff;
    border: 1px solid #ccc;
    font-size: 1em;
    margin: 5px 0 5px 0;
}
#content .modal-purchase .container{
    background-color: transparent;
}
.right-content {
     font-weight: 300;
    margin-left: 20px;
}
.right-content h3{
    text-transform: uppercase;
    color: #fff;
    font-size: 40px;
    margin-top: 60px;
    margin-bottom: 20px;
}
.right-content p{
    color: #fff;
}
.home-menu {
    margin: 100px 0 0 0;
}
.other-service {
    margin: 0 auto;
    display: block;
}
.other-service p {
    color: #fff;
    font-size: 1.2em;
    padding-top: 5px;
}
.avatar-service {
    border-radius: 50%;
    display: block;
    background-color: rgba(255,255,255,0.4);
    width: 80px;
    height: 80px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    margin: 0 auto 0 auto;
}
.avatar-service-active {
    background-color: rgba(255,255,255,1);
}
.avatar-service img {
    display: inline-block;
    max-width: 100%;
    padding: 15px 0 0 0;
}
.other-service:hover .avatar-service {
    background-color: rgba(255,255,255,1);
}
.promotion h3 {
    margin: 30px 0 0 0;
    display: inline-block;
    font-size: 1.5em;
    padding: 20px 0 20px 0;
    border-top: 3px solid #f27226;
}
.promotion img {
    width: 100%;
}
.success {
    color: #51b94a;
    font-weight: bold;
    font-size: 1.2em;
    padding: 20px 0 20px 0;
}
.unsuccessful {
    color: #f27226;
    font-weight: bold;
    font-size: 1.2em;
    padding: 20px 0 20px 0;
}
.otp-reset {
    padding: 10px;
    display: block;
}
.table-payment {
    border: 1px solid #eee;
}
.table-payment td {
    font-size: 1.1em;
}
.table-payment tr:nth-child(2n-1) {
    background: #f5f5f5;
}
.table-payment td.number {
    color: #f27226;
}
.list-cards {
    margin: 5px 0 10px 0;
    padding: 0;
    width: 100%;
    list-style: none;
}
.list-cards li {
    margin: 5px 0 20px 0;
    width: 25%;
    float: left;
    position: relative;
    height: 70px;
    padding: 5px 1px 1px 75px;
}
.list-cards li img {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 10px 0 0;
    border: 1px solid #eee;
    border-radius: 15px;
}
@media only screen and (max-width: 771px) {
    .list-cards li {
        width: 50%;
    }
}
@media only screen and (max-width: 641px) {
    .list-cards li {
        width: 50%;
    }
}
@media only screen and (max-width: 481px) {
    .list-cards li {
        width: 50%;
    }
    .list-cards li img {
        max-width: 130px;
    }
}
.menu-guide-wrapper {
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
    position: relative;
}
.menu-guide {
    padding: 10px;
}
.menu-guide a {
    color: #a7a7a7;
}
.menu-guide div {
    font-size: 1.3em;
    cursor: pointer;
}
.menu-guide .arrows {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
}
.menu-guide .arrows a {
    display: block;
    position: absolute;
    top: 45px;
    left: 0;
    color: #a7a7a7;
}
.menu-guide .arrows a:hover {
    color: #f47226;
}
.menu-guide .arrows a:nth-child(2) {
    left: unset;
    right: 0;
}
.menu-guide .icon {
    width: 80px;
    height: 80px;
    background: #a7a7a7;
    margin: 20px auto 5px auto;
    border-radius: 50%;
}
.menu-guide .icon:hover,
.menu-guide .active .icon {
    background: #f47226;

}
.menu-guide .active a,
.menu-guide a:hover {
    color: #f47226;
}
section.content {

}
section.white {
    padding: 50px 0 50px 0;
}
section.content h3 {
    border-top: 3px solid #f47226;
    display: inline-block;
    padding: 20px 0 5px 0;
    clear: both;
}
section.content p {
    font-size: 1.1em;
}
.methods {
    width: 100%;
    background: #f4f4f4;
    overflow: hidden;
    z-index: 1000;
    position: relative;
}
@media only screen and (max-width: 641px) {
    .methods {
        padding: 0;
    }
}
.methods-content {
    padding: 50px 0 50px 0;
    margin: 0;
}
@media only screen and (max-width: 641px) {
    .methods-content {
        padding: 0 0 50px 0;
    }
}
.methods .menu {
    width: 100%;
    position: relative;
    margin: 10px auto 0 auto;
}
.methods .menu .selector {
    position: relative;
    margin: 10px auto 0 auto;
    cursor: pointer;
    opacity: .3;
    z-index: 1000;
    zoom: 80%;
}
.methods .menu .selector i {
    position: absolute;
    bottom: -12px;
    color: #eb6913;
    opacity: 0;
    left: 50%;
    z-index: 999;
}
.methods .menu .selector .image {
    width: 200px;
    height: 200px;
}
#menu-hi-fpt .image {
    background-position: 0 0;
}
#menu-member .image {
    background-position: 0 -200px;
}
#menu-qr .image {
    background-position: 0 -400px;
}

.methods .menu .selector-active i,
.methods .menu .selector-active:hover i,
.methods .menu .selector:hover,
.methods .menu .selector:hover i,
.methods .menu .selector-active,
.methods .menu .selector-active:hover {
    opacity: 1;
    z-index: 999;
}

.methods .menu .selector h2 {
    color: #f7904b;
}
@media only screen and (max-width: 991px) {
    .methods .menu .selector h2 {
        font-size: 1.4em;
    }
}
@media only screen and (max-width: 641px) {
    .methods .menu .selector i {
        bottom: -12px;
    }
    .methods .menu .selector h2 {
        font-size: 1.2em;
    }
    .methods .menu .selector .image {
        opacity: .5;
    }
    .methods .menu .selector-active .image {
        opacity: 1;
    }

}
.methods .menu .selector p {
    font-size: 1.2em;
    margin: 0 0 50px 0;
    padding: 0 0 30px 0;
    position: relative;
    border-bottom: 2px solid #eb6913;
}
.methods .menu .selector .image {
    overflow: hidden;
    margin: 0 auto 0 auto;

}
.methods .menu .selector .image img {
    border-radius: 150px;
    border: 5px solid #fff;
    position: relative;
}
.methods .menu .selector .image span {
    width: 170px;
    height: 170px;
    display: block;
    top: 0;
    border: 5px solid #f7904b;
    border-radius: 160px;
    margin: 0 auto 0 auto;
}
@media only screen and (max-width: 641px) {
    .methods .col-xs-4 {
        position: unset;
    }
    .methods .menu .selector {
        padding: 70px 0 0 0;
        position: unset;
        display: inline-block;
    }
    .methods .menu .selector h2 {
        min-height: 70px;
    }
    .methods .menu .selector p {
        height: 40px;
        font-size: 1.1em;
        position: absolute;
        top: 160px;
        left: 10px;
        padding: 5px;
        width: calc(100% - 20px);
        color: #333;
        background: #fff;
        opacity: 1;
        z-index: 1000;
    }
    .methods .menu .selector-active {
        opacity: 1;
    }
    .methods .menu .selector-active p {
        color: #333;
        opacity: 1;
    }
    .methods .menu .selector .image {
        zoom: 40%;
        top: 0;
        margin: -200px auto 0 auto;
    }
}
@media only screen and (max-width: 321px) {
    .methods .menu .selector h2 {
        font-size: 1em;
        min-height: 80px;
    }
    .methods .menu .selector p {
        font-size: .9em;
        top: 155px;
    }
}
.methods-content .hand {
    width: 430px;
    height: 780px;
    background: url('../img/hand_phone.png') no-repeat;
    padding: 105px 0 0 0;
    margin: 25px auto 0 auto;
    zoom: 80%;
}
.methods-content .hand img {
    width: 320px;
    height: 575px;
}
@media only screen and (max-width: 641px) {
    .methods-content .hand {
        background-position: top center;
        width: 280px;
        height: 410px;
        margin: 25px auto 0 auto;
        padding: 55px 0 0 0;
        background-size: contain;
    }
    .methods-content .hand img {
        width: 173px;
        height: 310px;
    }
}
@media only screen and (max-width: 481px) {

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

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

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

}
.methods-content .laptop {
    width: 540px;
    height: 330px;
    background:  url('../img/laptop.png') no-repeat;
    padding: 40px 0 0 0;
    margin: 60px auto 0 auto;
}
ul.steps-mobile li.active a i.description {
    font-weight: normal;
    color: #999;
}
.methods-content .laptop img {
    width: 380px;
    height: 240px;
}
@media only screen and (max-width: 641px) {
    .methods-content .laptop {
        width: 480px;
        background-size: contain;
        margin: 0 auto 0 auto;
    }
    .methods-content .laptop img {
        width: 340px;
        height: 210px;
    }
}
@media only screen and (max-width: 481px) {
    .methods-content .laptop {
        width: 450px;
        background-size: contain;
        padding: 30px 0 0 0;
        margin-top: 30px;
    }
    .methods-content .laptop img {
        width: 310px;
        height: 200px;
    }
}
@media only screen and (max-width: 321px) {
    .methods-content .laptop {
        width: 450px;
        background-size: contain;
        padding: 30px 0 0 0;
        margin: 30px auto 0 auto !important
    }
    .methods-content .laptop img {
        width: 310px;
        height: 200px;
    }
}
@media only screen and (max-width: 415px) {
    .methods-content .laptop {

    }
}
@media only screen and (max-width: 376px) {
    .methods-content .laptop {

    }
}
@media only screen and (max-width: 321px) {
    .methods-content .laptop {
        width: 300px;
        height: 200px;
        background-size: contain;
        padding: 25px 0 0 0;
        margin: 0 0 0 0;
    }
    .methods-content .laptop img {
        width: 210px;
        height: 130px;
    }
}
ul.steps {
    margin: 50px 0 0 0;
    padding: 0;
    list-style: none;
}
ul.steps-mobile {
    display: none;
}
@media only screen and (max-width: 1201px) {
    ul.steps {
        display: none;
    }
    ul.steps-mobile {
        width: 100%;
        height: 110px;
        margin: 0 auto 0 auto;
        overflow: auto;
        display: block;
    }
}
@media only screen and (max-width: 321px) {
    ul.steps-mobile {
        height: 120px;
    }
}
ul.steps li {
    position: relative;
    padding: 0 0 0 70px;
    min-height: 110px;
    font-size: 1.1em;
    cursor: pointer;
}
ul.steps-mobile li {
    float: left;
    width: 100%;
    text-align: center;
    position: absolute;
    margin: 130px auto 0 auto;
    padding: 0;
    top: 0;
    left: 0;
}

ul.steps li b {
    background: #f9f9f9;
    color: #333;
    width: 48px;
    height: 29px;
    display: block;
    text-align: center;
    font-size: 1.5em;
    font-weight: normal;
    padding: 0 0 0 0;
    position: absolute;
    top: 0;
    left: 0;

}
ul.steps-mobile li b {
    left: calc(50% - 18px)
}
ul.steps li.active b {
    color: #fff;

}
ul.steps li:after {
    content: " ";
    background: #ddd;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    top: 50px;
    left: 20px;
}
ul.steps li b:after {
    content: " ";
    background: #ddd;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    bottom: -44px;
    left: calc(50% - 4px);
}

ul.steps li.active b:after {
    background: #f7c3a1;
}
ul.steps li b:before {
    content: " ";
    background: #ddd;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    bottom: -60px;
    left: calc(50% - 4px);
}
ul.steps li.active b:before {
    background: #f19659;
}
ul.steps li:last-child b:after,
ul.steps li:last-child b:before,
ul.steps li:last-child:after {
    content: unset;
}
ul.steps-mobile li:after,
ul.steps-mobile li b:after,
ul.steps-mobile li b:before {
    content: unset;
}
ul.steps li span {
    background: #f9f9f9;
    width: 48px;
    height: 30px;
    display: block;
    text-align: center;
    color: #333;
    transition: none !important;
}
ul.steps li span:before {
    content: "";
    position: absolute;
    top: -13px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    border-bottom: 13px solid #f9f9f9;
}
ul.steps li span:after {
    content: "";
    position: absolute;
    bottom: -14px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    border-top: 13px solid #f9f9f9;
}
ul.steps li.active span {
    background: #eb6913;
    color: #fff;
}
ul.steps li.active span:before {
    border-bottom: 13px solid #eb6913;
}
ul.steps li.active span:after {
    border-top: 13px solid #eb6913;
}
ul.steps li p.description {
    font-style: italic;
}
ul.steps li a {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    display: block;
    padding: 5px 0 0 0;
}
ul.steps li a:hover,
ul.steps li.active a {
    color: #f27024
}
ul.steps-mobile li b {
    top: -30px;
}

ul.steps-mobile li:nth-child(1) b {
    left: 1%;
}
ul.steps-mobile li:nth-child(2) b {
    left: 28%;
}
ul.steps-mobile li:nth-child(3) b {
    left: 56%;
}
ul.steps-mobile li:nth-child(4) b {
    left: unset;
    right: 1%;
}
#content-qr .row ul.steps-mobile li:nth-child(1) b {
    left: 30%;
}
#content-qr .row ul.steps-mobile li:nth-child(2) b {
    left: 48%;
}
#content-qr .row ul.steps-mobile li:nth-child(3) b {
    left: unset;
    right: 30%;
}
@media only screen and (max-width: 641px) {
    #content-qr .row ul.steps-mobile li:nth-child(1) b {
        left: 10%;
    }
    #content-qr .row ul.steps-mobile li:nth-child(2) b {
        left: 47%;
    }
    #content-qr .row ul.steps-mobile li:nth-child(3) b {
        left: unset;
        right: 10%;
    }
}
@media only screen and (max-width: 521px) {
    #content-qr .row ul.steps-mobile li:nth-child(2) b {
        left: 46%;
    }
}
@media only screen and (max-width: 321px) {
    #content-qr .row ul.steps-mobile li:nth-child(2) b {
        left: 44%;
    }
}

ul.steps-mobile li a {
    display: none;
}
ul.steps-mobile li.active a {
    width: 100%;
    padding: 10px 0 10px 0;
    font-size: 1em;
    position: absolute;
    top: 15px;
    left: 0;
    display: table;
}
ul.steps-mobile li a p.description {
    font-size: .8em;
    margin-top: 3px;
}
ul.steps-mobile li i.fa-arrow-right {
    font-size: .7em;
    color: #ccc;
    position: absolute;
    top: 8px;
    right: -50px;
}
@media only screen and (max-width: 321px) {
    ul.steps-mobile li i.fa-arrow-right {
        right: -30px;
    }
}
ul.steps .step a p {
    font-weight: normal;
    font-size: .9em;
    color: #999999;
    font-style: italic;
    margin: 5px 0 0 0;
    display: block;
}
ul.steps .step p.description {
    display: block;
}
ul.steps .step p.description a {
    font-weight: normal;
    font-style: italic;
    text-decoration: underline;
    background: transparent;
}
@media only screen and (max-width: 1201px) {
    ul.steps .step p.description a {
        margin-top: 25px;
    }
}
.gt-1 {
    background: #f4f4f4;
    padding: 50px 0 50px 0;
}
/* FAQ */
.page-faq {
    background: #f9f9f9;
}

#section-video .container-fluid {
    padding: 0 !important;
}
.list-faq-menu iframe {

}

.list-faq-menu {
    list-style: none;
    margin: 30px 0 0 0;
    padding: 0;
    position: relative;
    background: #fff;
}
.list-faq-menu li {

    cursor: pointer;
    position: relative;
    border-bottom: 1px solid #f5f5f5;
}
.list-faq-menu li::before {
    content: ' ';
    background: #ccc;
    height: 12px;
    width: 2px;
    display: block;
    position: absolute;
    top: 17px;
    left: 0;
}
.list-faq-menu li:hover {
    background: #f9f9f9;
}
.list-faq-menu li div.sub {
    padding: 0 0 0 10px;
    margin: -15px 0 0 0;

}
.list-faq-menu a {
    text-decoration: none;
    color: #333;
    padding: 15px;
    display: block;
}
.list-faq-menu a.hover {
    font-weight: bold;
}
.list-faq {
    background: #fff;
    padding: 30px;
    margin: 30px 0 0 0;
}
.list-faq h1 {
    font-size: 2em;
    font-weight: 300;
    padding: 0;
    margin: 0;
    line-height: 1.3em;
}
.list-faq ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.list-faq ul li {
    border-bottom: 1px solid #f5f5f5;
    padding: 10px 0 10px 0;

}
.list-faq ul li:last-child {
    border: 0;
}
.list-faq ul li div {
    transition: all .1s;
}
.list-faq ul li div.label {
    font-weight: normal;
    color: #ccc;
    font-size: 1.1em;
    position: relative;
    white-space: normal;
    width: 100%;
    padding: 0;
    display: inline-block;
    text-align: left;
    line-height: 150%;
    z-index: 2;
}
.list-faq ul li div.label span {
    color: #ccc;
    margin: 0;
    position: absolute;
}
.list-faq ul li div.label a {
    display: block;
    text-decoration: none;
    z-index: 2;
    padding: 0 30px 0 30px;
}
.list-faq ul li div.label a:hover {
    color: #f38831;
}
.list-faq ul li div.label i {
    position: absolute;
    top: 5px;
    right: 5px;
    pointer-events: none;
}
.list-faq ul li div.collapse {
    padding-top: 10px;
    color: #333;
    line-height: 180%;
}
/* OTP COUNTDOWN */
#otp {
    text-align: center;
    background: transparent;
    color: #fff;
    font-size: 3em;
    letter-spacing: 25px;
    -moz-appearance: textfield;
    position: relative;
}
.otp-mask {
    position: relative;
}
.otp-mask:after {
    content: ' ';
    display: block;
    width: 100%;
    position: absolute;
    bottom: -5px;
    left: 0;
    font-weight: normal;
    letter-spacing: 7px;
    pointer-events: none;
    text-align: center;
}
#otp::-webkit-outer-spin-button,
#otp::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#otp:focus {
    box-shadow: none;
}
#otp-countdown {
    width: 100%;
    background: #aaa;
    height: 4px;
    margin: 25px 0 10px 0;
    display: block;
    position: relative;
}
#otp-countdown p {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 4px;
    font-size: 1px;
    padding: 0;
    background: #f37227;
}
#otp-countdown p.otp-run {
    animation: otp-animation 90s infinite;
}
@keyframes otp-animation {
    0% {
        width: 1%;
    }
    100% {
        width: 100%;
    }
}
#otp-reset {
    display: block;
    margin: 5px 0 10px 0;
}
#otp-counter {
    display: none;
    margin: 5px 0 10px 0;
    cursor: default;
}
/* FEATURES TAB */
.features {
    background: #fff;
    padding: 50px 0 50px 0;
}
.features-tab {
    width: 100%;
    position: relative;
}
.features-tab div {
    float: left;
    width: 50%;
    background: #dddddd;
    text-align: center;
    font-size: 1.4em;
    padding: 10px;
    cursor: pointer;
    position: relative;
}
.features-tab div.active:after {
    content: " ";
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #f37227;
    position: absolute;
    bottom: -8px;
    left: calc(50% - 4px);
}
.features-tab div:hover {
    background: #d95a10;
    color: #fff;
}
.features-tab div.active {
    background: #f37227;
    color: #fff;
}
#bank-name {
    width: calc(100% - 40px);
    border-radius: 6px;
    margin: 20px;
    padding: 10px;
}
#banks-list {
    width: 100%;
    margin: 0 auto 0 auto;
}
#banks-list a.mark {
    display: none;
}
.cards-information {
    background: #f4f4f4;
    padding: 50px 0 50px 0;
}
.card-information {
    width: 100%;
    margin: 0 0 20px 0;
    padding: 0;
}
.card-information th,
.card-information td {
    background: #fff;
    border: 1px solid #eee;
    padding: 5px 5px 5px 10px;
    font-size: 1.1em;
}
.card-information th {
    font-size: 1em;
    background: #f37021;
    color: #fff;
    font-weight: normal;
}
.card-information td.label {
    text-align: center;
    border-right: 10px solid #f4f4f4;
}
@media only screen and (max-width: 771px) {
    .card-information td.label {
        display: none;
    }
    #banks-list a.mark {
        width: 100%;
        text-align: center;
        background: #fff;
        display: block;
        padding: 0 0 10px 0;
        margin: 0;
    }
}