html { position: relative; min-height: 100%; font-family: "Roboto", sans-serif !important; font-weight: normal; color: rgba(0,0,0,0.87); }

@font-face { font-family: "Roboto"; src: local(Roboto Thin),url("../font/roboto/Roboto-Thin.woff2") format("woff2"),url("../font/roboto/Roboto-Thin.woff") format("woff"),url("../font/roboto/Roboto-Thin.ttf") format("truetype"); font-weight: 200; }
@font-face { font-family: "Roboto"; src: local(Roboto Light),url("../font/roboto/Roboto-Light.woff") format("woff"),url("../font/roboto/Roboto-Light.ttf") format("truetype"); font-weight: 300; }
@font-face { font-family: "Roboto"; src: local(Roboto Regular),url("../font/roboto/Roboto-Regular.woff") format("woff"),url("../font/roboto/Roboto-Regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Roboto"; src: url("../font/roboto/Roboto-Medium.woff") format("woff"),url("../font/roboto/Roboto-Medium.ttf") format("truetype"); font-weight: 500; }
@font-face { font-family: "Roboto"; src: url("../font/roboto/Roboto-Bold.woff") format("woff"),url("../font/roboto/Roboto-Bold.ttf") format("truetype"); font-weight: 700; }

body { background-color: #f9f9f9; }
#main { padding-left: 240px; }
footer { padding-left: 240px; position: absolute; bottom: 0; left: 0; right: 0; }
    footer.page-footer { padding-top: 0px; }
select { background-color: transparent; width: 100%; padding: 5px; border: none; border-radius: 2px; height: 3rem; border-bottom: 1px solid #9e9e9e; }


.HideVisibility { visibility: hidden !important; }
#sidenav-overlay { background-color: transparent; }
.container { padding: 0 0.5rem; margin: 0 auto; max-width: 100% !important; width: 98%; }
#left-sidebar-nav { position: fixed; width: 100px; left: 180px; z-index: 999; height: auto; }
    #left-sidebar-nav span.badge.new { line-height: 20px; margin-top: 11px; }
#content .header-search-wrapper { width: 100%; margin: 0 auto; height: 40px; display: inline-block; position: relative; }
#content .container .row { margin-bottom: 0; }

.alignleft { text-align: left !important; }
.alignright { text-align: right !important; }
.aligncenter { text-align: center !important; }
.alignjustyfy { text-align: justify; }


#profile-page { margin-bottom: 50px; }
#plans { margin-bottom: 30px; }

@media only screen and (min-width: 601px) {
    .container { width: 98%; }
}

@media only screen and (min-width: 993px) {
    .container { width: 98%; }
}

@media only screen and (max-width: 993px) {
    #main { padding-left: 0; }
    footer { padding-left: 0; }
}

.ps-scrollbar-x-rail { z-index: 9999; }
.ps-scrollbar-y-rail { z-index: 9999; }
.small { font-size: 1.0rem; margin: 0; padding: 0; }
.medium-small { font-size: 0.9rem; margin: 0; padding: 0; }
.ultra-small { font-size: 16px; margin: 0; padding: 0; }
small { font-size: 0.8rem; }
.strong { font-weight: 600; }
h4.header { line-height: 2.508rem; margin: 1.14rem 0 0.912rem 0; font-size: 1.4rem; font-weight: 400; text-transform: uppercase; }
h4.header2 { font-size: 1.1rem; font-weight: 400; text-transform: uppercase; }
p.title { font-size: 1.3rem; }
p.header { font-size: 1rem; font-weight: 500; text-transform: uppercase; }
li.li-hover:hover { background: transparent !important; }
li.search-out:hover { background: transparent; }
li.mobile:before { background: #f7464a; }
li.kitchen:before { background: #46bfbd; }
li.home:before { background: #fdb45c; }
.more-text { padding: 5px 20px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
.valign-demo { height: 400px; background-color: #ddd; }
.margin { margin: 0 !important; }
#loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: none; }
    #loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; background: #eceff1; z-index: 1000; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
        #loader-wrapper .loader-section.section-left { left: 0; }
        #loader-wrapper .loader-section.section-right { right: 0; }
#loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: rgb(3, 169, 244); -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; z-index: 1001; }
    #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #FC8002; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; }
    #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #4fd816; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; }
#loader-logo { display: block; position: absolute; left: 48%; top: 46%; background: url("../images/user-bg-2.jpg") no-repeat center center; z-index: 1001; }
.show { display: block !important; }

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes spin {
    0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
}

.loaded #loader-wrapper { visibility: hidden; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all 0.3s 1s ease-out; transition: all 0.3s 1s ease-out; }
    .loaded #loader-wrapper .loader-section.section-left { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
    .loaded #loader-wrapper .loader-section.section-right { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
.loaded #loader { opacity: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.progress { background-color: rgba(252, 128, 2, 0.33); visibility: hidden; }
.no-js #loader-wrapper { display: none; }
h1.logo-wrapper { margin: 0; }
h1 span.logo-text { display: none; }
.menu-sidebar-collapse { margin: 0 10px; }
    .menu-sidebar-collapse i { line-height: 36px !important; }
header .brand-logo { margin: 1px 0; padding: 0px 20px; }
    header .brand-logo img { width: 130px; }

@media only screen and (max-width: 992px) {
    nav .nav-wrapper { text-align: center; }
        nav .nav-wrapper a.page-title { font-size: 36px; }
    ul.side-nav.leftside-navigation { top: 56px !important; }
}

.header-search-wrapper { margin: 10px auto 0 240px; width: calc(100% - 600px); height: 40px; display: inline-block; position: relative; }
    .header-search-wrapper i { position: absolute; font-size: 24px; top: 6px; left: 24px; line-height: 32px !important; -webkit-transition: color 200ms ease; transition: color 200ms ease; }
input.header-search-input { display: block; padding: 8px 8px 8px 72px; width: 100%; background: rgba(255,255,255,0.3); height: 24px; -webkit-transition: all 200ms ease; transition: all 200ms ease; border: none; font-size: 16px; appearance: textfield; font-weight: 400; outline: none; border-radius: 3px; }
    input.header-search-input:hover { background: rgba(255,255,255,0.5); }
    input.header-search-input:focus { color: #333; background: #fff; border-bottom: none !important; box-shadow: none !important; }
.header-search-wrapper-focus i { color: #444; }
.header-search-input::-webkit-input-placeholder { color: #fff; font-size: 16px; font-weight: 400; }
.header-search-input::-moz-placeholder { color: #fff; font-size: 16px; font-weight: 400; }
.header-search-input:-ms-input-placeholder { color: #fff; font-size: 16px; font-weight: 400; }
.header-search-input:focus::-webkit-input-placeholder { color: #333; font-size: 16px; font-weight: 400; }
.header-search-input:focus::-moz-placeholder { color: #333; font-size: 16px; font-weight: 400; }
.header-search-input:focus::placeholder { color: #333; font-size: 16px; font-weight: 400; }
.header-search-input:focus:-ms-input-placeholder { color: #333; font-size: 16px; font-weight: 400; }
.header-search-input::placeholder { color: #fff; font-size: 16px; font-weight: 400; }
.search-out { display: none; }
    .search-out input[type=text]:focus:not([readonly]) { border-bottom: 1px solid #fff !important; box-shadow: none; }
.search-out-text { border-bottom: 1px solid #fff !important; }
.translation-button img { position: relative; top: 12px; }
#translation-dropdown .language-select { position: relative; top: -9px; }
.notification-badge { position: relative; right: 5px; top: -20px; color: #ffffff; background-color: #FF4081; margin: 0 -.8em; border-radius: 50%; padding: 4px 5px; }
#notifications-dropdown h5 { font-size: 1rem; text-transform: capitalize; font-weight: 500; }
#notifications-dropdown li { padding: 10px; font-size: 1rem; }
    #notifications-dropdown li > a { padding: 0; font-size: 1rem; font-weight: 300; }
        #notifications-dropdown li > a > i { display: inline-block; font-size: 1.2rem; position: relative; top: 4px; }
    #notifications-dropdown li > time { font-size: 0.8rem; font-weight: 400; }
    #notifications-dropdown li.divider { padding: 0; }
nav.top-nav { height: 122px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
    nav.top-nav a.page-title { line-height: 122px; font-size: 48px; }
nav ul li.no-hover:hover { background: none; }
.side-nav a { line-height: 42px; height: 42px; }
.side-nav.leftside-navigation .collapsible-body li.active { background-color: rgba(0,0,0,0.04); }
.side-nav.fixed.leftside-navigation .collapsible-body li.active { background-color: rgba(0,0,0,0.04); }
.side-nav .collapsible-body li a { margin: 0 1rem 0 3rem; }
ul.side-nav.leftside-navigation { top: 64px; overflow: hidden; }
    ul.side-nav.leftside-navigation hr { display: block; height: 1px; border: 0; border-top: 1px solid #e0e0e0; margin: 1em 0; padding: 0; }
    ul.side-nav.leftside-navigation li { line-height: 80px; }
        ul.side-nav.leftside-navigation li:hover { background-color: rgba(0,0,0,0.08); }
        ul.side-nav.leftside-navigation li.active { background-color: rgba(0,0,0,0.08); }
        ul.side-nav.leftside-navigation li a { font-size: 14px; font-weight: 400; }
        ul.side-nav.leftside-navigation li.user-details { background: url("../../images/download.png") center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; margin-bottom: 0px; padding: 0px 0 0 0px; }
            ul.side-nav.leftside-navigation li.user-details #profile-dropdown a { padding: 8px 15px; }
    ul.side-nav.leftside-navigation .profile-btn { margin: 0; text-transform: capitalize; padding: 0; text-shadow: 1px 1px 1px #444; font-size: 15px; }
    ul.side-nav.leftside-navigation ul.collapsible-accordion { background-color: #fff; }
ul.side-nav li { padding: 0; }
ul.side-nav .collapsible-header { margin: 0; }
#slide-out li a i { line-height: inherit; width: 2rem; font-size: 1.6rem; display: block; float: left; text-align: center; margin-right: 1rem; }
#slide-out ul.side-nav li { padding: 0 !important; }
.caption { font-size: 1.25rem; font-weight: 300; margin-bottom: 30px; }
.caption-uppercase { font-size: 1.25rem; font-weight: 300; margin-bottom: 30px; text-transform: uppercase; }
.sidebar-collapse { position: absolute; left: -149px; top: -48px; }
.user-task, .user-time { margin: 0; font-size: 13px; color: #fff; }
.user-roal { color: #fff; margin-top: -16px; font-size: 13px; text-shadow: 1px 1px 1px #444; }
.user-details .row { margin: 0; }
.bold > a { font-weight: bold; }
.rightside-navigation { overflow: hidden; }
#right-search .input-field { margin-top: 0; }
#chat-out .collapsible-header { background-color: transparent; border: none; line-height: 45px; height: 45px; font-weight: 400; }
    #chat-out .collapsible-header:after { color: #fff; }
#chat-out .chat-out-list { padding: 5px; margin: 0; border-bottom: 1px solid #e0e0e0; }
#chat-out .favorite-associate-list .circle { -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; border: 2px solid #999; padding: 3px; display: block; }
#chat-out .favorite-associate-list .online-user { border: 2px solid #00e676; }
#chat-out .favorite-associate-list p { padding: 0; }
    #chat-out .favorite-associate-list p.place { font-size: 0.8rem; }
#chat-out .recent-activity-list-icon { margin-top: 8px; font-size: 2rem; }
#chat-out .recent-activity-list-text a { font-size: 0.8rem; padding: 0; font-weight: 600; }
#chat-out .recent-activity-list-text p { font-size: 0.9rem; padding: 0; }
.chat-close-collapse { padding: 5px 15px 0 0; }
#breadcrumbs-wrapper { background: #f3f3f3; }
h5.breadcrumbs-header { font-size: 1.64rem; line-height: 1.804rem; margin: 1.5rem 0 0 0; }
.breadcrumbs { padding: 0; margin: 15px 0; list-style: none; }
    .breadcrumbs > li { display: inline-block; }
        .breadcrumbs > li + li:before { padding: 0 5px; color: #ccc; content: "/\00a0"; }
    .breadcrumbs .active { font-weight: normal; color: #999; }
.breadcrumbs-title { font-size: 1.5rem; line-height: 1.804rem; margin: 18px 0 0; }
.breadcrumbs-nav { margin: 8px 0 9px; }
.breadcrumb:before { content: "\e7c3"; font-family: "Material-Design-Icons"; }
.jsgrid-edit-row input[type="checkbox"], .jsgrid-insert-row input[type="checkbox"], .jsgrid-filter-row input[type="checkbox"], .jsgrid-alt-row input[type="checkbox"], .jsgrid-row input[type="checkbox"], .config-panel input[type=checkbox] { position: relative !important; left: 0 !important; visibility: visible !important; }
.jsgrid-grid-body { height: auto !important; }
.jsgrid-edit-row select { display: block !important; }
.jsgrid-insert-row select { display: block !important; }
.jsgrid-insert-row .select-wrapper .caret { display: none !important; }
.jsgrid-insert-row .select-wrapper .select-dropdown { display: none !important; }
#jsGrid-sorting { height: 500px !important; overflow: scroll !important; }
#jsGrid-page { height: 500px !important; overflow: scroll !important; }
#jsGrid-custom-row { height: 500px !important; overflow: scroll !important; }
.card { overflow: hidden; }
#card-stats .card-content { text-align: center; }
#card-stats .card-stats-title { font-size: 1.2rem; }
    #card-stats .card-stats-title i { font-size: 1.2rem; }
#card-stats .card-stats-compare { font-size: 1.0rem; }
    #card-stats .card-stats-compare i { position: relative; top: 5px; }
#card-stats .card-stats-number { font-size: 1.8rem; line-height: 2.0rem; margin: 0.2rem 0 0.2rem 0; font-weight: 500; }
#card-stats .card .card-content { padding: 10px 14px; }
#card-stats .card .card-action { padding: 10px 14px; }
#card-alert i { font-size: 20px; position: relative; top: 2px; }
#card-alert .alert-circle { display: inline-block; width: 40px; white-space: nowrap; border-radius: 1000px; vertical-align: bottom; position: relative; top: -5px; left: -2px; }
#card-alert .single-alert { line-height: 42px; }
#card-alert button { background: none; border: none; position: absolute; top: 15px; right: 10px; font-size: 20px; color: #fff; }
#card-alert .card .card-content { padding: 20px 40px 20px 20px; }
#card-alert .card-action i { top: 0; margin: 0; }
#work-collections .collection-header { font-size: 1.14rem; font-weight: 500; }
#work-collections p.collections-title { font-size: 1.0rem; padding: 0; margin: 0; font-weight: 500; }
#work-collections p.collections-content { font-size: 0.9rem; padding: 0; margin: 0; font-weight: 400; }
#work-collections .collection-item.avatar { height: auto; padding-top: 22px; }
#flight-card .flight-card-title { margin: 0; font-weight: 300; color: #fff; }
#flight-card .flight-card-date { font-size: 1.0rem; margin: 0; color: #fff; }
#flight-card .flight-state { padding-bottom: 15px; }
#flight-card .flight-state-two { border-left: 1px dashed #9e9e9e; }
#flight-card .flight-icon { font-size: 2.2rem; display: block; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); }
#flight-card .card-content-bg { background: url("../images/sample-1.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
#flight-card .card-content { background: rgba(0,0,0,0.25); }
#flight-card .flight-state-wrapper { margin: 0 0 100px 0 !important; }
#flight-card .card-header .card-title { padding: 20px; }
#task-card label { display: block; color: rgba(0,0,0,0.87); height: auto; }
#task-card .task-card-title { margin: 0; color: #fff; font-weight: 300; }
#task-card .task-card-date { font-size: 1.0rem; margin: 0; color: #fff; }
#task-card .collection-header { padding: 20px; }
#task-card .task-add { position: absolute; right: 10px; top: 76px; }
#task-card .task-cat { padding: 2px 4px; color: #fff; margin-left: 37px; font-weight: 300; font-size: 0.8rem; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background-clip: padding-box; }
.task-cat { padding: 2px 4px; color: #fff; font-weight: 300; font-size: 0.8rem; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background-clip: padding-box; }
.collection .collection-item.avatar i.circle { font-size: 28px; }
#profile-card .card-image { height: 150px; }
#profile-card .card-profile-image { width: 70px; position: absolute; top: 110px; z-index: 1; cursor: pointer; }
#profile-card .btn-move-up { position: relative; top: -40px; right: -18px; margin-right: 10px !important; }
#profile-card .card-content p { font-size: 1.2rem; margin: 10px 0 12px; }
.card-move-up .move-up { padding: 20px; }
#chart-dashboard { padding-top: 12px; }
    #chart-dashboard .card { overflow: hidden; }
        #chart-dashboard .card .card-content { padding: 10px 14px; }
.sample-chart-wrapper { width: 100%; }
.chart-title { font-size: 1.6rem; font-weight: 300; }
.chart-revenue { float: right; text-align: center; padding: 8px; border-radius: 3px; }
    .chart-revenue .chart-revenue-total { font-size: 0.9rem; margin: 0; }
    .chart-revenue .chart-revenue-per { font-size: 0.8rem; margin: 0; }
        .chart-revenue .chart-revenue-per i { position: relative; top: 5px; }
.chart-revenue-switch { padding-top: 28px; padding-right: 10px; color: #fff; text-align: right; }
.doughnut-chart-status { position: relative; top: -75px; left: 0; font-size: 16px; font-weight: 500; height: 0; text-align: center; }
    .doughnut-chart-status p { margin-top: -5px; }
.doughnut-chart-legend li { padding: 2px 0; font-size: 0.9rem; }
    .doughnut-chart-legend li:before { content: ""; width: 8px; height: 8px; display: block; float: left; margin-top: 6px; margin-right: 4px; }
a.button-collapse.top-nav { position: absolute; left: 7.5%; top: 0; float: none; margin-left: 1.5rem; color: #fff; font-size: 32px; z-index: 2; }
.trending-bar-chart-wrapper { width: 100%; }
.btn-move-up { position: relative; top: -28px; right: -18px; margin-right: 10px !important; }
.flotchart-placeholder { width: 100%; height: 300px; font-size: 13px; line-height: 1.2em; }
#flotchart table { position: absolute; top: 13px; right: 17px; font-size: smaller; color: #545454; width: 100px; }
#flotchart td { padding: 5px; }
th { padding: 5px; }
.xchart-placeholder { width: 90%; height: 300px; }
.jqstooltip { border: none !important; box-sizing: content-box; }
.tooltip-class { overflow: hidden; color: #fff; height: 20px; width: 30px; }
#ct2-chart .ct-series.ct-series-a .ct-area { fill: #00bcd4; }
#ct2-chart .ct-series.ct-series-a .ct-point { stroke: #00bcd4; }
#ct2-chart .ct-series.ct-series-a .ct-line { stroke: #54e2f4; }
.socialbox .logo { color: #fff; font-size: 28px; left: 20px; bottom: 20px; position: absolute; }
.socialbox .info { color: #fff; margin: 0; position: absolute; right: 20px; bottom: 20px; font-size: 15px; padding: 0; }
.CardFont { font-size: 14px !important; }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .doughnut-chart-status { display: none; }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .doughnut-chart-status { display: none; }
    #card-stats .card-stats-compare { font-size: 0.8rem; }
}

#full-calendar { padding-top: 30px; }
#calendar h2 { font-size: 1.5rem; text-transform: uppercase; line-height: 35px; }
#calendar .fc-day-header { text-transform: uppercase; font-weight: 400; }
#external-events { padding-top: 50px; }
    #external-events .fc-event { color: #fff; text-decoration: none; padding: 5px; margin-bottom: 10px; cursor: all-scroll; border: none; }
.fc button { background: #fff; }
.fc td { border-width: 0 !important; }
.fc th { border-width: 0 !important; }
.fc-state-active { color: #ff4081 !important; }
.fc-state-down { color: #ff4081 !important; }
.dynamic-color .red, .dynamic-color .pink, .dynamic-color .purple, .dynamic-color .deep-purple, .dynamic-color .indigo, .dynamic-color .blue, .dynamic-color .light-blue, .dynamic-color .cyan, .dynamic-color .teal, .dynamic-color .green, .dynamic-color .light-green, .dynamic-color .lime, .dynamic-color .yellow, .dynamic-color .amber, .dynamic-color .orange, .dynamic-color .deep-orange, .dynamic-color .brown, .dynamic-color .grey, .dynamic-color .blue-grey { height: 55px; width: 100%; padding: 0 15px; line-height: 55px; font-weight: 500; font-size: 12px; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.dynamic-color .col { margin-bottom: 55px; }
tr.group { background-color: #ddd !important; }
    tr.group:hover { background-color: #ddd !important; }

@media only screen and (max-width: 1024px) {
    tfoot { display: none; }
}

#site-layout-example-left { background-color: #90a4ae; height: 300px; }
#site-layout-example-right { background-color: #26a69a; height: 300px; }
#site-layout-example-top { background-color: #e57373; height: 50px; }
.flat-text-header { height: 35px; width: 80%; background-color: rgba(255,255,255,0.15); display: block; margin: 27px auto; }
.flat-text { height: 25px; width: 80%; background-color: rgba(0,0,0,0.15); display: block; margin: 27px auto; }
    .flat-text.small { width: 25%; height: 25px; background-color: rgba(0,0,0,0.15); }
    .flat-text.full-width { width: 100%; }
.col.grid-example { border: 1px solid #eee; margin: 7px 0; text-align: center; line-height: 50px; font-size: 28px; background-color: tomato; color: #fff; padding: 0; }
    .col.grid-example span { font-weight: 200; line-height: 50px; }
.waves-color-demo .collection-item { height: 57px; line-height: 57px; }
.browser-window { text-align: left; width: 100%; height: auto; display: inline-block; -webkit-border-radius: 5px 5px 2px 2px; -moz-border-radius: 5px 5px 2px 2px; border-radius: 5px 5px 2px 2px; background-clip: padding-box; background-color: transparent; margin: 20px 0; overflow: hidden; }
    .browser-window .top-bar { height: 30px; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; background-clip: padding-box; border-top: thin solid #eaeae9; border-bottom: thin solid #ddd; background: linear-gradient(#e7e7e6, #e0e0e0); }
    .browser-window .circle { height: 10px; width: 10px; display: inline-block; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; background-color: #fff; margin-right: 1px; }
    .browser-window .circles { margin: 5px 12px; }
    .browser-window .content { margin: 0; width: 100%; display: inline-block; border-radius: 0 0 5px 5px; background-color: #fafafa; }
    .browser-window .row { margin: 0; }
#close-circle { background-color: #ff5c5a; }
#minimize-circle { background-color: #fdb45c; }
#maximize-circle { background-color: #1bc656; }
.clear { clear: both; }
.promo i { color: #ee6e73; font-size: 6rem; display: block; }
.promo-caption { font-size: 1.7rem; font-weight: 500; margin-top: 5px; margin-bottom: 0; }
.shadow-demo { background-color: #26a69a; width: 100px; height: 100px; margin: 20px auto; }
.collapsible-header { font-weight: 500; }
    .collapsible-header:before { font-family: "Material-Design-Icons"; content: "\e7c3"; float: right; color: #FFF; font-size: 18px; }
    .collapsible-header.active:before { content: "\e7c1"; }
#input-select .input-field label { position: absolute; top: -14px; font-size: 0.8rem; }
.icon-demo { line-height: 50px; }
.icon-container i { font-size: 3em; display: block; margin-bottom: 10px; }
.icon-container .icon-preview { height: 120px; text-align: center; }
.icon-holder { display: block; text-align: center; width: 150px; height: 115px; float: left; margin: 0 0 15px 0; }
    .icon-holder p { margin: 0; }
.text-long-shadow { text-shadow: #1d7d74 1px 1px,#1d7d74 2px 2px,#1d7d74 3px 3px,#1d7d74 4px 4px,#1d7d74 5px 5px,#1d7d74 6px 6px,#1d7d74 7px 7px,#1d7d74 8px 8px,#1d7d74 9px 9px,#1d7d74 10px 10px,#1d7d74 11px 11px,#1d7d74 12px 12px,#1d7d74 13px 13px,#1d7d74 14px 14px,#1d7d74 15px 15px,#1d7d74 16px 16px,#1d7d74 17px 17px,#1d7d74 18px 18px,#1d7d74 19px 19px,#1d7d74 20px 20px,#1d7d74 21px 21px,#208b81 22px 22px,#208b81 23px 23px,#208b81 24px 24px,#208b81 25px 25px,#208b81 26px 26px,#208b81 27px 27px,#208b81 28px 28px,#208b81 29px 29px,#208b81 30px 30px,#26a69a 31px 31px,#26a69a 32px 32px,#26a69a 33px 33px,#26a69a 34px 34px,#26a69a 35px 35px,#26a69a 36px 36px,#26a69a 37px 37px; background-color: #26a69a; width: 100%; font-size: 10rem; color: #fff !important; text-align: center; padding: 20px 0 !important; }
.login-form { width: 320px; }
.login-form-text { text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; }
.profile-image-login { width: 150px; height: 135px !important; }
.login-text { margin-top: -6px; margin-left: -6px !important; }
.Passwordlogin i { position: absolute; right: 11px; top: 13px; color: #616161b3; cursor: pointer; font-size: 18px; }
#mail-app hr { display: block; height: 1px; border: 0; border-top: 1px solid #e0e0e0; margin: 1em 0; padding: 0; }
#mail-app #email-sidebar { margin-top: 0; }
#mail-app #email-list { margin-top: 0; }
#mail-app #email-details { margin-top: 0; }
#mail-app .modal .modal-content { padding: 0; }
.email-unread .email-title { font-weight: 500; }
#email-sidebar { min-height: 650px; }
    #email-sidebar li { padding: 10px 0; text-align: center; }
        #email-sidebar li i { padding: 12px; color: #272727; }
            #email-sidebar li i.active { background: #ddd; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
            #email-sidebar li i:hover { background: #ddd; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
#email-list { padding: 0; }
    #email-list .collection { margin: 0; }
        #email-list .collection .collection-item.avatar { height: auto; padding-left: 72px; position: relative; }
            #email-list .collection .collection-item.avatar .secondary-content { position: absolute; top: 10px; right: -4px; }
                #email-list .collection .collection-item.avatar .secondary-content.email-time { right: 8px; }
            #email-list .collection .collection-item.avatar .icon { position: absolute; width: 42px; height: 42px; overflow: hidden; left: 15px; display: inline-block; text-align: center; vertical-align: middle; top: 20px; }
            #email-list .collection .collection-item.avatar .circle { position: absolute; width: 42px; height: 42px; overflow: hidden; left: 15px; display: inline-block; vertical-align: middle; text-align: center; font-size: 1.5rem; color: #fff; font-weight: 300; padding: 10px; }
            #email-list .collection .collection-item.avatar img.circle { padding: 0; }
        #email-list .collection .collection-item:hover { background: #e1f5fe; cursor: pointer; }
        #email-list .collection .collection-item.selected { background: #e1f5fe; border-left: 4px solid #29b6f6; }
    #email-list .attach-file { -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); color: #9e9e9e; font-size: 1.1rem; }
#email-details { padding: 15px; }
    #email-details .email-subject { font-size: 1.2rem; }
        #email-details .email-subject i { font-size: 2.2rem; }
    #email-details .email-tag { padding: 3px; font-size: 0.9rem; }
    #email-details .collection { border: none; }
        #email-details .collection .collection-item.avatar { height: auto; padding-left: 72px; position: relative; }
            #email-details .collection .collection-item.avatar .icon { position: absolute; width: 42px; height: 42px; overflow: hidden; left: 15px; display: inline-block; vertical-align: middle; top: 20px; }
            #email-details .collection .collection-item.avatar .circle { position: absolute; width: 42px; height: 42px; overflow: hidden; left: 15px; display: inline-block; vertical-align: middle; text-align: center; font-size: 1.5rem; color: #fff; font-weight: 300; padding: 10px; }
            #email-details .collection .collection-item.avatar img.circle { padding: 0; }
        #email-details .collection .collection-item.selected { background: #e1f5fe; border-left: 4px solid #29b6f6; }
    #email-details .email-actions { padding-top: 25px; }
        #email-details .email-actions a { color: #757575; padding: 5px; }
.email-reply { padding-top: 20px; }
    .email-reply a { color: #757575; }
        .email-reply a i { font-size: 2rem; }
    .email-reply p { color: #757575; margin: 0; }
.model-email-content { padding: 24px; }
.blog-card .card .card-content .card-title, .blog-card .card .card-reveal .card-title { font-size: 1.2rem; line-height: 1.6rem; font-weight: 400; }
.blog-card .card { margin: 0; }
    .blog-card .card .card-content { padding: 5px 10px; }
.blog-card ul.card-action-buttons { margin: -26px 10px 0 0; text-align: right; }
    .blog-card ul.card-action-buttons li { display: inline-block; padding-left: 5px; }
.blog .card .card-content .card-title, .blog .card .card-reveal .card-title { font-size: 1.2rem; line-height: 1.6rem; font-weight: 400; }
.blog { width: 20%; padding: 10px; }
    .blog .card { margin: 0; }
        .blog .card .card-content { padding: 5px 10px; }
    .blog ul.card-action-buttons { margin: -26px 10px 0 0; text-align: right; }
        .blog ul.card-action-buttons li { display: inline-block; padding-left: 5px; }
.blog-sizer { width: 20%; }
.blog-post-content { padding-bottom: 10px; }


.float-left { float: left; }
.float-right { float: right; }
.clear { clear: both; }

@media screen and (max-width: 2200px) {
    .blog-sizer { width: 20%; }
    .blog { width: 20%; }
    .doughnut-chart-status { top: -100px; }
    .product-sizer { width: 20%; }
    .product { width: 20%; }
    .gallary-sizer { width: 20%; }
    .gallary-item img { width: 20%; }
}

@media screen and (max-width: 1800px) {
    .blog-sizer { width: 30%; }
    .blog { width: 30%; }
    .product-sizer { width: 30%; }
    .product { width: 20%; }
    .gallary-sizer { width: 30%; }
    .gallary-item img { width: 30%; }
}

@media screen and (max-width: 1600px) {
    .blog-sizer { width: 33.33%; }
    .doughnut-chart-status { top: -75px; }
    .blog { width: 33.33%; }
    .product-sizer { width: 25%; }
    /*.product { width: 25%; }*/
    .gallary-sizer { width: 25%; }
    .gallary-item img { width: 25%; }
}

@media screen and (max-width: 1224px) {
    .blog-sizer { width: 33.33%; }
    .doughnut-chart-status { top: -75px; }
    .doughnut-chart-status { top: -100px; }
    .blog { width: 33.33%; }
    .product-sizer { width: 33.33%; }
    .product { width: 33.33%; }
    .gallary-sizer { width: 33.33%; }
    .gallary-item img { width: 33.33%; }
}

@media screen and (max-width: 980px) {
    .blog-sizer { width: 50%; }
    .blog { width: 50%; }
    .product-sizer { width: 50%; }
    .product { width: 50%; }
    .gallary-sizer { width: 50%; }
    .gallary-item img { width: 50%; }
}

@media screen and (max-width: 720px) {
    .blog-sizer { width: 50%; }
    .blog { width: 50%; }
    .product-sizer { width: 50%; }
    .product { width: 50%; }
    .gallary-sizer { width: 50%; }
    .gallary-item img { width: 50%; }
     #SubscriberRemark {width:75% !important; }
}

@media screen and (max-width: 480px) {
    .blog-sizer { width: 100%; }
    .blog { width: 100%; }
    .product-sizer { width: 100%; }
    /*.product { width: 100%; }*/
    .gallary-sizer { width: 100%; }
    .gallary-item img { width: 100%; }
    #SubscriberRemark {width:95% !important; }
}

#blog-post-full .card-title { text-shadow: 1px 1px 4px #000; font-weight: 300; font-size: 2rem; }
#blog-post-full .blog-post-full-cat { padding: 5px; margin: 25px; right: 0; left: inherit; font-size: 15px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
    #blog-post-full .blog-post-full-cat a { color: #fff; text-shadow: none; }
.invoice-table { padding-top: 40px; }
.invoice-text { padding: 18px 0; }
.invoice-icon i { font-size: 2rem; }
.product-card .card .card-content .card-title, .product-card .card .card-reveal .card-title { font-size: 1.1rem; line-height: 1.6rem; font-weight: 400; }
.product-card .card { margin: 0; }
    .product-card .card .card-content { padding: 5px 10px; }
    .product-card .card .btn-price { width: 65px; height: 65px; font-weight: 600; font-size: 1.0rem; line-height: 65px; margin: 10px; position: absolute; top: 0; letter-spacing: 0; }
.product-card ul.card-action-buttons { margin: -26px 10px 0 0; text-align: right; }
    .product-card ul.card-action-buttons li { display: inline-block; padding-left: 5px; }
.product .card .card-content .card-title, .product .card .card-reveal .card-title { font-size: 1.1rem; line-height: 1.6rem; font-weight: 400; }
.product { padding: 10px; }
    /*width: 20%;*/
    .product .card { margin: 0; }
        .product .card .card-content { padding: 5px 10px; }
        .product .card .btn-price { width: 65px; height: 65px; font-weight: 600; font-size: 1.0rem; line-height: 65px; margin: 10px; position: absolute; top: 0; letter-spacing: 0; }
    .product ul.card-action-buttons { margin: -26px 10px 0 0; text-align: right; }
        .product ul.card-action-buttons li { display: inline-block; padding-left: 5px; }
.product-sizer { width: 20%; }
.gallary-sizer { width: 20%; }
.gallary-item img { width: 20%; }
.slider .indicators { z-index: 99; }
.map-card .card .card-content .card-title, .map-card .card .card-reveal .card-title { font-size: 1.2rem; line-height: 1.6rem; font-weight: 400; }
.map-card #map-canvas { width: 100%; height: 250px; }
.map-card .btn-move-up { top: -38px; }
#map-canvas { width: 100%; height: 250px; }
.plans-container .collection { border: none; }
    .plans-container .collection .collection-item { border-bottom: none; text-align: center; font-size: 1.07rem; line-height: 1.6em; }
/*.plans-container .collection .collection-item:before { font-size: 1.28rem; line-height: 1.6em; color: #009315; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; content: "\e623"; margin-right: 10px; }*/
.plans-container .card .card-image { position: relative; width: 100%; }
    .plans-container .card .card-image .card-title { position: relative; font-size: 1.28rem; line-height: 1.6em; text-align: center; width: 100%; padding: 10px 15px; text-transform: uppercase; background: rgba(0,0,0,0.1); }
    .plans-container .card .card-image .price { position: relative; font-size: 5rem; line-height: 1.6em; color: #fff; font-weight: 300; text-align: center; }
        .plans-container .card .card-image .price sup { font-weight: 100; font-size: 1.42rem; line-height: 1.6em; top: -35px; }
        .plans-container .card .card-image .price sub { font-weight: 100; font-size: 1.42rem; line-height: 1.6em; top: 0; }
    .plans-container .card .card-image .price-desc { text-align: center; color: #fff; padding-bottom: 10px; }
.plans-container .card .card-content { padding: 0; position:relative}
#profile-page-header .card-image { height: 140px; }
#profile-page-header .card-profile-image { width: 95px; position: absolute; top: 80px; z-index: 1; left: 40px; cursor: pointer; margin: 0; }
#profile-page-header .card-content { margin-top: -40px; }
    #profile-page-header .card-content .card-title { margin-bottom: 10px; }
#profile-page-wall .profile-image-post { width: 60px; margin: 30px 10px; }
#profile-page-wall .tab-content { padding: 10px; webkit-box-shadow: 0px 0px 3px 0px rgba(148,148,148,1); -moz-box-shadow: 0px 0px 3px 0px rgba(148,148,148,1); box-shadow: 0px 0px 3px 0px rgba(148,148,148,1); height: 400px; }
#profile-page-wall .share-icons { margin-top: 10px; }
    #profile-page-wall .share-icons i { padding: 0 5px; }
#profile-page-wall .tab-profile .tab i { font-size: 16px; }
#profile-page-wall-posts .profile-small { height: 250px; overflow: hidden; }
#profile-page-wall-posts .profile-medium { height: 350px; overflow: hidden; }
#profile-page-wall-posts .profile-large { height: 450px; overflow: hidden; }
#profile-page-wall-posts .card-profile-title { font-size: 16px; padding: 20px; border-radius: 0 0 2px 2px; }
#profile-page-wall-posts .card-action-share { padding: 16px; }
.page-footer .container { padding: 0 15px; }
#world-map-markers { height: 300px; }
#polar-chart-holder { padding-top: 20px; }



/*New Loading*/
#loding-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: #eceff1; display: none; }
#loding { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: rgb(3, 169, 244); -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; z-index: 1001; }
    #loding:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #FC8002; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; }
    #loding:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #4fd816; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; }
/*End New Loading*/


/*New Lite Loading*/
#Liteloding-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background: #eceff1; opacity: 0.8; display: none; }
#Liteloding { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: rgb(3, 169, 244); -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; z-index: 1001; }
    #Liteloding:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #FC8002; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; }
    #Liteloding:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #4fd816; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; }
/*End New Lite Loading*/


.ShowHidePassword { display: none; }

    .ShowHidePassword i { right: 15px; position: absolute; top: 15px; cursor: pointer; color: #8a8282; font-size: 18px; }


.STBVCInfo i { right: 15px; position: absolute; top: 15px; cursor: pointer; color: #8a8282; font-size: 18px; }




.SubsInfo p { float: left; line-height: 48px; font-size: 14px; }



/* The switch - the box around the slider */
.switch { position: relative; display: inline-block; width: 52px; height: 25px; }

    /* Hide default HTML checkbox */
    .switch input { display: none; }

/* The slider */
.switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }

    .switch-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 3px; background-color: white; -webkit-transition: .4s; transition: .4s; }

input:checked + .switch-slider { background-color: #0dcc59; }

input:focus + .switch-slider { box-shadow: 0 0 1px #2196F3; }

input:checked + .switch-slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }


/* Rounded sliders */
.switch-slider.round { border-radius: 34px; width: auto !important; height: auto !important; }

    .switch-slider.round:before { border-radius: 50%; }


.disabled { pointer-events: none; }
    .disabled input { border-bottom-style: dashed; }


#CollChannels .collapsible-body { padding-left: 4%; }


#text { font-size: 50px; color: white; }
#text1 { font-size: 50px; color: white; }

#Skip { width: 100%; text-align: right; padding-right: 2%; padding: 2%; }
    #Skip a { color: #FFF; text-decoration: underline; font-size: 16px; }

#Skip1 { width: 100%; text-align: right; padding-right: 2%; padding: 2%; }
    #Skip1 a { color: #FFF; text-decoration: underline; font-size: 16px; }


#text1 { display: none; }

#Skip1 { display: none; }

@media screen and (min-width: 100px) and (max-width: 1000px) {
    #modal5 .modal-content { width: 98% !important; }
    #modal5 .collection { margin: 0.5rem 0 0rem 0 !important; }
    #modal5 .collection-item { padding-top: 5px !important; padding-bottom: 0px !important; }
    #LogOut { display: block !important; }

    /*.MainConnDiv { width: 30% !important; }*/
}

@media screen and (min-width: 200px) and (max-width: 500px) {
    #ProfileCustNameDiv { text-align: center !important; padding: 64px 0px 11px 0px !important; }
    .selectProfilePic { top: 101px !important; }
}


@media screen and (min-width: 100px) and (max-width: 600px) {
    #profile-page-header .card-image { height: 170px; }
    #profile-page-header .card-profile-image { top: 35px; left: 98px; }
    #ProfileCustNameDiv { width: 100% !important; margin-left: 0px; }
    #ProfileCustNameDiv { padding: 0px 0px 11px 0px; text-align: right; }
    .ProfilePic { width: 80px !important; height: 80px !important; }
}








@media screen and (min-width: 768px) and (max-width: 1366px) {
    #login-page .overbox { left: 502px !important; top: 40px !important; }
}

@media screen and (min-width: 100px) and (max-width: 400px) {
    .login-form { width: 270px; }
    header .brand-logo img { width: 117px; }
}

@media screen and (min-width: 100px) and (max-width: 990px) {
    #ConnPreloader { margin-left: 40% !important; }

    #breadcrumbs-wrapper1 .btn { margin-top: 6% !important; margin-bottom: 5px; }

    header .brand-logo img { width: 100px; }
    #orrsDiag .channellist { max-width: 100% !important; }
    #orrsDiag { font-size: 13px; }
        #orrsDiag .channellist { max-width: 100% !important; }
    #orrsDiag { font-size: 13px; }

    .switch { margin-top: 5px; }

    #CollChannels .collapsible-body ul { width: 70%; }

    #CollChannels .collapsible-body { padding-left: 18%; }

        /*#MangePacks #AlaCarteBody ul { margin-left: 26% !important; }*/

        #CollChannels .collapsible-body .ChkUnChkAll { width: 90% !important; }

    #breadcrumbs-wrapper3 { width: 92% !important; }

    #text img { width: 220px !important; }
    #text1 img { width: 300px !important; }

    #PaymentHistory td:last-child { margin-bottom: 5px; padding-top: 5px !important; }

    #DownloadReceipt { margin-bottom: 20% !important; }

    /*Dashboard css*/
    #card-widgets .product { margin: 3px; width: 48% !important; padding: 0px !important; }

    #ComplaintsFilter { width: 100%; margin-top: 8px; }
    #LedgerFilter { width: 100%; margin-bottom: 5px; }

    #DasPrePostAmt a { width: 100% !important; }
    .card { border-radius: 0px !important; }

    .clsCardTitle { font-size: 115% !important; }
    .clsCardInnerAmt { font-size: 120% !important; }
    .clsExtratxt { font-size: 12px!important; }
    .clsViewMoreLink { width: 100% !important; padding: 0px 18px 0px 8px !important; }
    .clsPaddingTop { padding-top: 10% !important; }

    /*#RegBackToLogin { font-size: 14px !important; }*/
}



@media screen and (min-width: 1400px) and (max-width: 1600px) {
    .CardFont { font-size: 12px !important; }
}

@media screen and (min-width: 1400px) and (max-width: 1500px) {
    #login-page .overbox { left: 582px !important; top: 82px !important; }
}



/*Dashboard*/

.product { float: left; width: 300px !important; cursor: pointer; }
#profile-card .card-image { height: 90px !important; }
#profile-card .card-profile-image { height: 100px; width: 100px; background: #FFF; top: 15px !important; }
#CurrentCompName { margin-top: 2.82rem; font-weight: 400; }
#profile-card .card-profile-image { height: 100px; width: 100px; background: #FFF; border: 1px outset #ffb500 !important; }


.align-center { text-align: center; }
.clsMobile { font-size: 13px; }
.clsEmail { font-size: 13px; display: none; }



.white-text { position: relative; }
.actions select { float: left; }
.actions a { float: left; }


.table-header .btn { width: 265px; }
#Complaint .btn { width: 265px; }



/*Rate Us Menu*/

.clsRatePlayStore { display: none; }
    .clsRatePlayStore i { font-size: 32px !important; }



.clsCardTitle { font-size: 20px; }
.clsCardInnerAmt { font-size: 25px; }
.clsExtratxt { font-size: 13px; }

.clsViewMoreLink { padding: 0px 18px 0px 15px; color: #FFF !important; text-align: left; font-size: 15px; width: 50%; float: left; pointer-events: none; cursor: pointer; }
.clsPaddingTop { padding-top: 10px; }
/*#OpenRequestCount { margin-bottom: 25px; }*/


/*On My Profile*/

#ProfileDetail .right-align { word-wrap: break-word; }
#ExtendedFeatures { margin-top: 5%; background: #FFF; margin-top: 5%; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); padding: 8px; border-radius: 2px; }
    #ExtendedFeatures i { color: #FC8002; }
    #ExtendedFeatures li { font-size: 18px; line-height: 32px; }
    #ExtendedFeatures sup { background: red; color: #FFF; font-size: 12px; padding: 2px; border-radius: 5px; }
.documenntelement { float: left; width: 100%; border-bottom: 1px solid #c7c7c7; padding-bottom: 8px; padding-top: 8px; }
.documentDetalMain { padding: 10px 0px 15px 0px; float: left; width: 100%; height: 400px; overflow-y: auto; background: #f5f5f5; position: relative; webkit-box-shadow: 0px 0px 3px 0px rgba(148,148,148,1); -moz-box-shadow: 0px 0px 3px 0px rgba(148,148,148,1); box-shadow: 0px 0px 3px 0px rgba(148,148,148,1); }
.DocumentTxt { float: left; line-height: 26px;   width: 60%;}
.DocumentImg { float: left; padding: 10px; border: 1px solid #aeaeae; margin-right: 15px; margin-top: 10px; margin-left: 10px; position: relative; }
    .DocumentImg img { width: 100px; height: 60px; }
    .DocumentImg i { display: none; position: absolute; position: absolute; right: 0; left: 0; text-align: center; padding: 34px 34px 29px 34px; background: #0000003b; /* opacity: .5; */ top: 0; color: red; font-size: 20px; cursor: pointer; }
.Ducumentviewbtn { color: #0099fd; }
.Ducumentdeletebtn { color: red; }
.DocumentHead { font-weight: 700; font-size: 18px; color: #d8a227; }
.DucumentDownloadbtn { color: green; }
.documenntelement:hover + .DeleteIcon { display: block; }
#DeleteIcon { display: none; }
.documenntelement:hover #DeleteIcon { display: block; }
#DeleteIcon2 { display: none; }
.DocumentImg:hover #DeleteIcon2 { display: block; }
.UploadBtn { position: absolute; right: 13px; bottom: 13px; background: #d7a126; color: #fff; border-radius: 50%; font-size: 27px; cursor: pointer; }
    .UploadBtn i { padding: 17px; }
.DocumentHeads { color: #092000; font-weight: 400; font-size: 15px; }
#modal65 { overflow-y: visible; width: 360px; max-height: 100%; }
#DocumentUploadModal { width: 36% !important; }
.Viewdocument { top: 11%; -webkit-animation-name: zoomIn; animation-name: zoomIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; width: 25%; margin: 0 auto; }
.ViewImg { z-index: 10004; position: absolute; margin: 0 auto; left: 0; right: 0; text-align: center; }
.ViewImg img { width: 100%; }
.closeIcon { width: 100%; margin: 0 auto; text-align: right; }
    .closeIcon i { font-size: 24px; color: #fff; border-radius: 50%; padding: 6px 10px; cursor: pointer; }
.NavigationImg { position: absolute; height: 194px; width: 100%; }
    .NavigationImg img { height: 191px; width: 100%; }

@-webkit-keyframes zoomIn {
    0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); }
    50% { opacity: 1; }
}

@keyframes zoomIn {
    0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); }
    50% { opacity: 1; }
}
/*For Quick Login in app*/
.overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.73); }

    .overlay nav { position: relative; margin: auto; top: 20%; min-height: 225px; width: 300px; background: rgb(252, 128, 2); padding: 10px; padding-top: 15px; padding-bottom: 0px; height: auto; }
    /*.DefaultPage .overlay nav { position: relative; margin: auto; top: 20%; min-height: 300px; width: 500px; background: #efefef; padding: 10px; padding-top: 0px; padding-bottom: 20px; border: 2px solid rgb(252, 128, 2); }*/

    .overlay ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; width: 100%; position: relative; }

        .overlay ul li a { text-decoration: none; display: block; color: #FFF; list-style: none; float: right; margin-top: -8px; line-height: 0; }
.overlay-close { right: 35px; font-size: 18px; color: #FFF; }
.overlay-data { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; }
.overlay-open { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; z-index: 9999; }


.clsLogintxt { width: 95% !important; outline: none !important; border: none !important; text-indent: 10px !important; height: 35px !important; border: 1px solid !important; border-color: #bdbdbd !important; color: #777777 !important; background-color: #FFF !important; }

.AppLoginError { color: #ff0a0a; visibility: hidden; text-shadow: 1px 1px 4px #FFFFFF; line-height: 0px; padding-left: 6px; font-size: 15px; text-align: left; margin-bottom: 9px; padding-top: 5px; }
.overlay .innerDiv { margin: auto; }
.uploader { display: block; margin: 0px 0px 0px 24px; float: left; }
    .uploader label { float: left; cursor: pointer; clear: both; width: 100%; padding: 8px 15px; text-align: center; background: #fff; border-radius: 7px; border: 2px dashed #d3d3d3; transition: all .2s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-image-source: url(images\others\Border.png); border-image-slice: 2; border-image-repeat: round; border-radius: 3px; position: relative; }

    .uploader i.fa { font-size: 50px; margin-bottom: 1rem; transition: all .2s ease-in-out; color: #5f6982; }
    .uploader label:hover { border-color: #d7a327; }
    .uploader span { font-size: 16px; }
    .uploader img { width: 151px; }
.dragbtn { background: #cacaca; padding: 10px; margin: 13px auto; color: #616161; width: 113px; }


@media screen and (max-width:1500px) {
    .documentDetalMain { padding: 10px 0px 15px 0px; }
    .DocumentImg { margin-right: 9px; margin-left: 8px; }
}

@media screen and (max-width:1390px) {
    #DocumentUploadModal { width: 50% !important; }
}


@media screen and (max-width:1100px) {
    .Viewdocument { width: 30%; }
}
@media screen and (max-width: 944px) {
    #DocumentUploadModal { width: 95% !important; }
}
@media screen and (max-width: 1353px) and (min-width: 991px) {
    .DocumentTxt { margin: 10px 10px 0px 10px; }
}
@media screen and (max-width: 990px) and (min-width: 100px) {
    #profile-page-sidebar { width: 100% !important; }
    #profile-page-wall { width: 100% !important; }
    .Viewdocument { width: 50%; }
}

@media screen and (min-width: 100px) and (max-width: 413px) {

    .documentDetalMain { padding: 10px 0px 15px 0px; }
    .DocumentTxt { margin: 10px 10px 0px 10px; }
    .Viewdocument { width: 65%; }
}

/*For App login Loading*/
#AppLoginDiv .sk-fading-circle { width: 18px; height: 30px; position: relative; display: none; margin: auto; }

    #AppLoginDiv .sk-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

        #AppLoginDiv .sk-fading-circle .sk-circle:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #FFF; border-radius: 100%; -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; }
    #AppLoginDiv .sk-fading-circle .sk-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); }
    #AppLoginDiv .sk-fading-circle .sk-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); }
    #AppLoginDiv .sk-fading-circle .sk-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
    #AppLoginDiv .sk-fading-circle .sk-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); }
    #AppLoginDiv .sk-fading-circle .sk-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); }
    #AppLoginDiv .sk-fading-circle .sk-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
    #AppLoginDiv .sk-fading-circle .sk-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); }
    #AppLoginDiv .sk-fading-circle .sk-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); }
    #AppLoginDiv .sk-fading-circle .sk-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }
    #AppLoginDiv .sk-fading-circle .sk-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); }
    #AppLoginDiv .sk-fading-circle .sk-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); }
    #AppLoginDiv .sk-fading-circle .sk-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
    #AppLoginDiv .sk-fading-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; }
    #AppLoginDiv .sk-fading-circle .sk-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
    #AppLoginDiv .sk-fading-circle .sk-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
    #AppLoginDiv .sk-fading-circle .sk-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
    #AppLoginDiv .sk-fading-circle .sk-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }
    #AppLoginDiv .sk-fading-circle .sk-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
    #AppLoginDiv .sk-fading-circle .sk-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }
    #AppLoginDiv .sk-fading-circle .sk-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; }
    #AppLoginDiv .sk-fading-circle .sk-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }
    #AppLoginDiv .sk-fading-circle .sk-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; }

@-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
}



/*For Quick Pay*/
#mainDetailDiv { line-height: 26px; border-radius: 4px; -moz-border-radius: 4px; -webkit-box-shadow: 1px 1px 5px 1px rgba(199,199,199,1); -moz-box-shadow: 1px 1px 5px 1px rgba(199,199,199,1); box-shadow: 1px 1px 5px 1px rgba(199,199,199,1); padding: 0px; }
#QuickPay .clsDetailDiv { border-right: 1px solid #b7b2b2; border-bottom: 1px solid #b7b2b2; padding-right: 15px; padding-left: 15px; width: 100%; }
#QuickPay .clsMidDiv { float: left; width: 2%; padding: 8px; }
#QuickPay .clsRightDiv { float: left; padding: 8px; }

#QuickPay .row-padding { padding-top: 15px; padding-bottom: 15px; }

#AppQuickPayDiv .overlay-data { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; }
#AppQuickPayDiv .overlay-open { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; z-index: 9999; }

#AppQuickPayDiv select { background: #FFF; border-radius: 0px; border: none; height: 35px; width: 100%; outline: none; margin-bottom: 20px; text-indent: 10px; color: #7b7878; border: 0px solid; box-shadow: 0px 1px 4px 1px rgb(175, 175, 175); }

/*For Quick Pay STB SmartCard Details Pay*/
.DefaultPage #container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 50px; width: 100px; }
.DefaultPage #overlay-menu { width: 100px; height: 50px; }
.DefaultPage .menuButton { background-color: #7a7a7a; text-indent: 0; border: 1px solid #000; color: #fff; font-size: 15px; font-weight: bold; }
    .DefaultPage .menuButton:hover { background-color: #474747; }
    .DefaultPage .menuButton:active { position: relative; top: 1px; }

#QuickPay .clsOverlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.73); }
    #QuickPay .clsOverlay nav { position: relative; margin: auto; top: 20%; min-height: 300px; width: 275px; background: rgb(252, 128, 2); padding: 10px; padding-top: 0px; padding-bottom: 20px; max-height: 300px; overflow: auto; }
    #QuickPay .clsOverlay ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; width: 100%; position: relative; }

        #QuickPay .clsOverlay ul li a { text-decoration: none; display: block; color: #FFF; list-style: none; float: right; margin-top: 5px; }
#QuickPay .clsOverlay-close { right: 35px; font-size: 18px; color: #FFF; }
#QuickPay .clsOverlay-data { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; }
#QuickPay .clsOverlay-open { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; z-index: 9999; }

.clear { clear: both; }

.clsContinue { font-size: 18px; visibility: hidden; }
.clsBack { font-size: 18px; float: left !important; width: 50%; }

.step-1 { display: none; }
.step-2 { display: none; }

.IDStep .btn-default { color: #6d6a6a; background-color: #fff; border-color: #ccc; border-radius: 3px; margin-top: 10px; margin-bottom: 6px; }

.clsStep2txtbox { width: 100%; outline: none; border: none; text-indent: 10px; height: 40px; border: 1px solid; border-color: #bdbdbd; color: #777777; }
/*box-shadow: 0px 1px 4px 1px rgb(175, 175, 175);*/
.clsStep2OR { text-align: center; color: #FFF; margin-top: 10px; margin-bottom: 10px; }

.innerDiv { width: 98%; margin: auto; }

.step-2 .innerDiv { margin-top: 15px; }

.float-left { float: left; }

.Step2Error { color: #ff0a0a; font-weight: 600; visibility: hidden; text-shadow: 1px 1px 4px #FFFFFF; line-height: normal; }


/*For Quick Pay Loading*/
.sk-fading-circle { width: 18px; height: 30px; position: relative; display: none; }

    .sk-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

        .sk-fading-circle .sk-circle:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #FFF; border-radius: 100%; -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; }
    .sk-fading-circle .sk-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); }
    .sk-fading-circle .sk-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); }
    .sk-fading-circle .sk-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
    .sk-fading-circle .sk-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); }
    .sk-fading-circle .sk-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); }
    .sk-fading-circle .sk-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
    .sk-fading-circle .sk-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); }
    .sk-fading-circle .sk-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); }
    .sk-fading-circle .sk-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }
    .sk-fading-circle .sk-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); }
    .sk-fading-circle .sk-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); }
    .sk-fading-circle .sk-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
    .sk-fading-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; }
    .sk-fading-circle .sk-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
    .sk-fading-circle .sk-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
    .sk-fading-circle .sk-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
    .sk-fading-circle .sk-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }
    .sk-fading-circle .sk-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
    .sk-fading-circle .sk-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }
    .sk-fading-circle .sk-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; }
    .sk-fading-circle .sk-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }
    .sk-fading-circle .sk-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; }

@-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
}




/*Quick Pay Payment Screen*/

#AppQuickPayDiv nav { line-height: normal !important; }

#QuickPay .list-group-item { position: relative; display: block; text-align: center; padding: 10px 15px; margin-bottom: 0px; border: 1px solid #ddd; font-size: 16px; }
.list-group a { color: #555; }
/*  bhoechie tab */
div.bhoechie-tab-container { z-index: 10; background-color: #ffffff; padding: 0 !important; background-clip: padding-box; opacity: 0.97; filter: alpha(opacity=97); }
div.bhoechie-tab-menu { padding-right: 0; padding-left: 0; padding-bottom: 0; }
    div.bhoechie-tab-menu div.list-group { margin-bottom: 0; margin-top: 5px; }
        div.bhoechie-tab-menu div.list-group > a { margin-bottom: 0; }
            div.bhoechie-tab-menu div.list-group > a .glyphicon,
            div.bhoechie-tab-menu div.list-group > a .fa { color: rgb(252, 128, 2); font-size: 25px; }
            div.bhoechie-tab-menu div.list-group > a:first-child { border-top-right-radius: 0; -moz-border-top-right-radius: 0; }
            div.bhoechie-tab-menu div.list-group > a:last-child { border-bottom-right-radius: 0; -moz-border-bottom-right-radius: 0; }
            div.bhoechie-tab-menu div.list-group > a.active,
            div.bhoechie-tab-menu div.list-group > a.active .glyphicon,
            div.bhoechie-tab-menu div.list-group > a.active .fa { background-color: rgb(252, 128, 2); color: #ffffff; border-color: #FFF; border-radius: 0px; }
                div.bhoechie-tab-menu div.list-group > a.active:after { display: none; content: ''; position: absolute; left: 100%; top: 50%; margin-top: -13px; border-left: 0; border-bottom: 13px solid transparent; border-top: 13px solid transparent; border-left: 10px solid rgb(252, 128, 2); }

div.bhoechie-tab-content { background-color: #ffffff; /* border: 1px solid #eeeeee; */ padding-left: 20px; padding-top: 10px; }

div.bhoechie-tab div.bhoechie-tab-content:not(.active) { display: none; }


.list-group-item:first-child { border-top-left-radius: 0px !important; }

.bhoechie-tab { font-size: 16px; color: #636363; }
.row-padding { padding-top: 15px; padding-bottom: 15px; }

.border-top { border-top: 1px solid #9a9a9a; border-top-style: dashed; }


.QuickPayIslimit { display: none; }
    .QuickPayIslimit input[type="text"] { text-indent: 10px; width: 100%; }
.ConviDisplay { display: block; }

@font-face { font-family: "Material-Design-Icons"; src: Url("../../font/material-design-icons/Material-Design-Icons.ttf"); /* Replace with thatever your font file is */ }
.fa-wallet:before { font-family: "Material-Design-Icons"; content: "\e602"; font-size: 20px; font-style: normal; }



.btn-default.btn-on.active { background-color: #5BB75B; color: white; }
.btn-default.btn-off.active { background-color: #DA4F49; color: white; }


.clsOverlay table th { text-align: center !important; border: 2px solid; }
#Detailstbody { text-align: center; }
    #Detailstbody tr td { border: 2px solid; }

.bhoechie-tab-menu .list-group-item { padding: 13px 9px !important; }


sup { background: red; color: #FFF; padding: 2px 4px 2px 2px; border-radius: 5px; font-weight: 600; }


#AppQuickPayDiv .sk-fading-circle { margin: auto; margin-top: 12px; }


@media screen and (min-width: 100px) and (max-width: 1200px) {
    /*Quick Pay and footer*/
    #PW { font-size: 12px; }
    #TC div { font-size: 11px; }

    /*#QuickPay { padding: 38px 0px !important; padding-bottom: 5px !important; }*/
    #mainDetailDiv { width: 95% !important; }
        #mainDetailDiv .container { width: 100% !important; padding: 0px; }

    #QPTitle { margin-top: 0px !important; margin-bottom: 0px !important; }

    .clsDetailDiv { border-right: 0px !important; width: 100%; }

    .clsPayBtn { text-align: center !important; width: 100%; margin-top: 10px; }
    .clsIsReg { width: 100%; padding: 0px; text-align: center; }

    #DisclaimerPage { height: auto !important; }

    .bhoechie-tab { padding-left: 0px; padding-right: 0px; }
    div.bhoechie-tab-content { padding-left: 0px !important; padding-top: 30px !important; }

    .bhoechie-tab .row-padding { padding-right: 0px; padding-left: 0px; }
    .bhoechie-tab .col-xs-6 { padding-right: 0px; padding-left: 0px; }

    .bhoechie-tab .col-xs-5 { font-size: 15px; }

    .DefaultPage .clsOverlay nav { width: 270px !important; }
}



@media screen and (min-width: 100px) and (max-width: 990px) {
    .clsDetailRight { width: 128px !important; }
    #AppLogOut { display: none; }
    #DownloadReceipt .mainDiv { background-color: #fff !important; -webkit-box-shadow: -1px 1px 5px 2px rgba(214,211,214,1); -moz-box-shadow: -1px 1px 5px 2px rgba(214,211,214,1); box-shadow: -1px 1px 5px 2px rgba(214,211,214,1); }
}




.disabledPay { pointer-events: none; opacity: 0.2; }



.hide { display: none; }


/*Margin and Padding Style Start*/

/*[ PADDING ]
///////////////////////////////////////////////////////////
*/
/*------Margin left-------*/
.ml-0 { margin-left: 0px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-20 { margin-left: 20px; }
.ml-30 { margin-left: 30px; }
.ml-40 { margin-left: 40px; }
.ml-50 { margin-left: 50px; }
.ml-60 { margin-left: 60px; }
.ml-70 { margin-left: 70px; }
.ml-80 { margin-left: 80px; }
.ml-90 { margin-left: 90px; }
.ml-100 { margin-left: 100px; }
/*------Margin right-------*/
.mr-0 { margin-right: 0px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-20 { margin-right: 20px; }
.mr-30 { margin-right: 30px; }
.mr-40 { margin-right: 40px; }
.mr-50 { margin-right: 50px; }
.mr-60 { margin-right: 60px; }
.mr-70 { margin-right: 70px; }
.mr-80 { margin-right: 80px; }
.mr-90 { margin-right: 90px; }
.mr-100 { margin-right: 100px; }
/*------Margin Top-------*/
.mt-0 { margin-top: 0px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.mt-70 { margin-top: 70px; }
.mt-80 { margin-top: 80px; }
.mt-90 { margin-top: 90px; }
.mt-100 { margin-top: 100px; }
/*------Margin Bottom-------*/
.mb-0 { margin-bottom: 0px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-60 { margin-bottom: 60px; }
.mb-70 { margin-bottom: 70px; }
.mb-80 { margin-bottom: 80px; }
.mb-90 { margin-bottom: 90px; }
.mb-100 { margin-bottom: 100px; }
/*------Padding left-------*/
.pl-0 { padding-left: 0px; }
.pl-10 { padding-left: 10px; }
.pl-15 { padding-left: 15px; }
.pl-20 { padding-left: 20px; }
.pl-30 { padding-left: 30px; }
.pl-40 { padding-left: 40px; }
.pl-50 { padding-left: 50px; }
.pl-60 { padding-left: 60px; }
.pl-70 { padding-left: 70px; }
.pl-80 { padding-left: 80px; }
.pl-90 { padding-left: 90px; }
.pl-100 { padding-left: 100px; }
/*------Padding right-------*/
.pr-0 { padding-right: 0px; }
.pr-10 { padding-right: 10px; }
.pr-15 { padding-right: 15px; }
.pr-20 { padding-right: 20px; }
.pr-30 { padding-right: 30px; }
.pr-40 { padding-right: 40px; }
.pr-50 { padding-right: 50px; }
.pr-60 { padding-right: 60px; }
.pr-70 { padding-right: 70px; }
.pr-80 { padding-right: 80px; }
.pr-90 { padding-right: 90px; }
.pr-100 { padding-right: 100px; }
/*------Padding Top-------*/
.pt-0 { padding-top: 0px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-20 { padding-top: 20px; }
.pt-30 { padding-top: 30px; }
.pt-40 { padding-top: 40px; }
.pt-50 { padding-top: 50px; }
.pt-60 { padding-top: 60px; }
.pt-70 { padding-top: 70px; }
.pt-80 { padding-top: 80px; }
.pt-90 { padding-top: 90px; }
.pt-100 { padding-top: 100px; }
.pt-110 { padding-top: 110px; }
/*------Padding Bottom-------*/
.pb-0 { padding-bottom: 0px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-20 { padding-bottom: 20px; }
.pb-30 { padding-bottom: 30px; }
.pb-40 { padding-bottom: 40px; }
.pb-50 { padding-bottom: 50px; }
.pb-60 { padding-bottom: 60px; }
.pb-70 { padding-bottom: 70px; }
.pb-80 { padding-bottom: 80px; }
.pb-90 { padding-bottom: 90px; }
.pb-100 { padding-bottom: 100px; }
.pb-110 { padding-bottom: 110px; }
.pb-120 { padding-bottom: 120px; }
.pb-130 { padding-bottom: 130px; }
.block { display: block; }

/*Margin and Padding Style End*/

/*Loading CSS Start*/
.LoadingBg { background: #f1f1f1; width: 100%; height: 100%; position: fixed; top: 0px; z-index: 9999; opacity: .5; }
.cssload-box-loading { width: 50px; height: 50px; margin: auto; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 99999; }
    .cssload-box-loading:before { content: ''; width: 50px; height: 5px; background: #efc23c; opacity: 0.1; position: absolute; top: 59px; left: 0; border-radius: 50%; animation: shadow 0.5s linear infinite; -o-animation: shadow 0.5s linear infinite; -ms-animation: shadow 0.5s linear infinite; -webkit-animation: shadow 0.5s linear infinite; -moz-animation: shadow 0.5s linear infinite; }
    .cssload-box-loading:after { content: ''; width: 50px; height: 50px; background: #efc23c; position: absolute; top: 0; left: 0; border-radius: 3px; animation: cssload-animate 0.5s linear infinite; -o-animation: cssload-animate 0.5s linear infinite; -ms-animation: cssload-animate 0.5s linear infinite; -webkit-animation: cssload-animate 0.5s linear infinite; -moz-animation: cssload-animate 0.5s linear infinite; }



@keyframes cssload-animate {
    17% { border-bottom-right-radius: 3px; }
    25% { transform: translateY(9px) rotate(22.5deg); }
    50% { transform: translateY(18px) scale(1, 0.9) rotate(45deg); border-bottom-right-radius: 40px; }
    75% { transform: translateY(9px) rotate(67.5deg); }
    100% { transform: translateY(0) rotate(90deg); }
}

/*@-o-keyframes cssload-animate { 17%;
{ border-bottom-right-radius: 3px; }
25% { -o-transform: translateY(9px) rotate(22.5deg); }
50% { -o-transform: translateY(18px) scale(1, 0.9) rotate(45deg); border-bottom-right-radius: 40px; }
75% { -o-transform: translateY(9px) rotate(67.5deg); }
100% { -o-transform: translateY(0) rotate(90deg); }
}*/

@-ms-keyframes cssload-animate {
    17% { border-bottom-right-radius: 3px; }
    25% { -ms-transform: translateY(9px) rotate(22.5deg); }
    50% { -ms-transform: translateY(18px) scale(1, 0.9) rotate(45deg); border-bottom-right-radius: 40px; }
    75% { -ms-transform: translateY(9px) rotate(67.5deg); }
    100% { -ms-transform: translateY(0) rotate(90deg); }
}

@-webkit-keyframes cssload-animate {
    17% { border-bottom-right-radius: 3px; }
    25% { -webkit-transform: translateY(9px) rotate(22.5deg); }
    50% { -webkit-transform: translateY(18px) scale(1, 0.9) rotate(45deg); border-bottom-right-radius: 40px; }
    75% { -webkit-transform: translateY(9px) rotate(67.5deg); }
    100% { -webkit-transform: translateY(0) rotate(90deg); }
}

@-moz-keyframes cssload-animate {
    17% { border-bottom-right-radius: 3px; }
    25% { -moz-transform: translateY(9px) rotate(22.5deg); }
    50% { -moz-transform: translateY(18px) scale(1, 0.9) rotate(45deg); border-bottom-right-radius: 40px; }
    75% { -moz-transform: translateY(9px) rotate(67.5deg); }
    100% { -moz-transform: translateY(0) rotate(90deg); }
}

@keyframes shadow {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(1.2, 1); }
}

/*@-o-keyframes shadow { 0%, 100%;
{ -o-transform: scale(1, 1); }
50% { -o-transform: scale(1.2, 1); }
}*/

@-ms-keyframes shadow {
    0%, 100% { -ms-transform: scale(1, 1); }
    50% { -ms-transform: scale(1.2, 1); }
}

@-webkit-keyframes shadow {
    0%, 100% { -webkit-transform: scale(1, 1); }
    50% { -webkit-transform: scale(1.2, 1); }
}

@-moz-keyframes shadow {
    0%, 100% { -moz-transform: scale(1, 1); }
    50% { -moz-transform: scale(1.2, 1); }
}
/*Loading CSS End*/

.blink { display: none; text-align: center; font-size: 16px; color: red; padding-top: 1%; text-decoration: blink; -webkit-animation-name: blinker; -webkit-animation-duration: 0.9s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-direction: alternate; }