/*========== Style CSS ==========*/
* {
outline: none
}
.row .col-auto, body, html {
width: 100%
}
.pages, .view, .views, body, html {
position: relative
}
.navbar .left, .navbar .right, .page {
-webkit-transform: translate3d(0, 0, 0)
}
.message, .messages, .picker-calendar-month, .swiper-container-vertical>.swiper-wrapper, .tabbar a.link, .tabbar a.tab-link {
-webkit-box-orient: vertical;
-moz-box-orient: vertical
}
body, html {
height: 100%;
overflow-x: hidden;
/*
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-touch-callout: none;
touch-callout: none;
-moz-touch-callout: none;
-ms-touch-callout: none;
*/
}
.navbar-inner, .subnavbar, .toolbar-inner {
left: 0;
/*padding:0 8px;*/
box-sizing: border-box
}
@media all and (width:1024px) and (height:691px) and (orientation:landscape) {
body, html {
height: 671px
}
}
@media all and (width:1024px) and (height:692px) and (orientation:landscape) {
body, html {
height: 672px
}
}
* {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none
}
a, input, select, textarea {
outline: 0 none;
}
a {
text-decoration: none;
color: #007aff
}
.tabbar, .tabbar a {
color: #929292
}
p {
margin: 1em 0
}
/* .row {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start
} */
.buttons-row, .list-block .item-media {
-webkit-box-lines: single;
-moz-box-lines: single
}
.row>[class*=col-] {
box-sizing: border-box
}
.views {
overflow: auto;
-webkit-overflow-scrolling: touch
}
.pages, .view {
overflow: hidden
}
.view {
box-sizing: border-box
}
.page.cached {
display: none
}
.navbar-inner, .toolbar-inner {
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.navbar-inner.cached {
display: none
}
.navbar:not(.site-header,.sub-header), .toolbar {
height: 44px;
width: 100%;
box-sizing: border-box;
font-size: 17px;
position: relative;
margin: 0;
z-index: 500;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.navbar b, .toolbar b {
font-weight: 500
}
html.ios-gt-8 .navbar b, html.ios-gt-8 .toolbar b {
font-weight: 600
}
.navbar a.link, .subnavbar a.link, .toolbar a.link {
line-height: 44px;
height: 44px;
text-decoration: none;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
.navbar a.link.active-state, .subnavbar a.link.active-state, .toolbar a.link.active-state, html:not(.watch-active-state) .navbar a.link:active, html:not(.watch-active-state) .subnavbar a.link:active, html:not(.watch-active-state) .toolbar a.link:active {
opacity: .3;
-webkit-transition-duration: 0s;
transition-duration: 0s
}
.navbar a.link i+i, .navbar a.link i+span, .navbar a.link span+i, .navbar a.link span+span, .subnavbar a.link i+i, .subnavbar a.link i+span, .subnavbar a.link span+i, .subnavbar a.link span+span, .toolbar a.link i+i, .toolbar a.link i+span, .toolbar a.link span+i, .toolbar a.link span+span {
margin-left: 7px
}
.navbar a.icon-only, .subnavbar a.icon-only, .toolbar a.icon-only {
min-width: 44px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
margin: 0
}
.navbar i.icon, .navbar:after, .subnavbar i.icon, .toolbar i.icon {
display: block
}
.navbar {
left: 0;
top: 0
}
.navbar:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto;
height: 0px;
width: 100%;
background-color: #c4c4c4;
z-index: 15;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
backface-visibility: hidden
}
.navbar.no-border:after {
display: none
}
.navbar .center, .navbar .left, .navbar .right {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex
}
.navbar .center {
font-size: 17px;
font-weight: 500;
text-align: center;
margin: 0;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 44px;
-webkit-flex-shrink: 10;
-ms-flex: 0 10 auto;
flex-shrink: 10;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
display: initial;
padding-right: 10px;
}
html.ios-gt-8 .navbar .center {
font-weight: normal;
}
.navbar .left, .navbar .right {
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
transform: translate3d(0, 0, 0)
}
.navbar .left a, .navbar .right a {
padding: 0 8px
}
.navbar .left a+a, .navbar .right a+a {
margin-left: 15px
}
.navbar .left {
/*margin-right:10px*/
}
.navbar .right {
/*margin-left:10px*/
}
.navbar .right:first-child {
/*position: absolute; right: 8px; height: 100% */
}
.popup .navbar {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.subnavbar {
height: 44px;
width: 100%;
position: absolute;
top: 100%;
margin-top: -1px;
z-index: 20;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.subnavbar:after, .toolbar:before {
position: absolute;
height: 0px;
background-color: #c4c4c4;
z-index: 15;
width: 100%;
content: '';
right: auto;
left: 0
}
.subnavbar:after {
bottom: 0;
top: auto;
display: block;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%
}
.subnavbar.no-border:after {
display: none
}
.navbar.no-border .subnavbar {
margin-top: 0
}
.navbar-on-left .subnavbar, .navbar-on-right .subnavbar {
pointer-events: none
}
.navbar .subnavbar, .page .subnavbar {
position: absolute
}
.page>.subnavbar {
top: 0;
margin-top: 0
}
.subnavbar>.buttons-row {
width: 100%
}
.subnavbar .searchbar, .subnavbar.searchbar {
position: absolute
}
.subnavbar .searchbar {
left: 0;
top: 0
}
.toolbar {
left: 0;
bottom: 0
}
.toolbar:before {
top: 0;
bottom: auto;
display: block;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0
}
.tabbar-labels span.tabbar-label, .toolbar a {
position: relative;
text-overflow: ellipsis;
white-space: nowrap
}
.toolbar.no-border:before {
display: none
}
.toolbar a {
-webkit-flex-shrink: 1;
-ms-flex: 0 1 auto;
flex-shrink: 1;
overflow: hidden
}
.tabbar {
z-index: 5001
}
.tabbar a.active {
color: #007aff
}
.tabbar a.link {
line-height: 1.4
}
.tabbar a.link, .tabbar a.tab-link {
height: 100%;
width: 100%;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
overflow: visible;
-webkit-box-flex: 1;
-ms-flex: 1;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column
}
.tabbar i.icon {
height: 30px
}
.tabbar-labels {
height: 50px
}
.tabbar-labels a.link, .tabbar-labels a.tab-link {
padding-top: 4px;
padding-bottom: 4px;
height: 100%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between
}
.tabbar-labels a.link i+span, .tabbar-labels a.tab-link i+span {
margin: 0
}
.tabbar-labels span.tabbar-label {
line-height: 1;
display: block;
margin: 0;
letter-spacing: .01em;
font-size: 10px
}
.list-block .item-media, .searchbar {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex
}
.page>.navbar, .page>.toolbar, .view>.navbar, .view>.toolbar, .views>.navbar, .views>.toolbar {
position: absolute
}
@media all and (min-width:768px) {
.tabbar .toolbar-inner {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center
}
.tabbar a.link, .tabbar a.tab-link {
width: auto;
min-width: 105px
}
.tabbar-labels {
height: 56px
}
.tabbar-labels span.tabbar-label {
font-size: 14px
}
.tabbar-labels-fixed .page-content, .tabbar-labels-through .page-content {
padding-bottom: 56px
}
}
.navbar.navbar-hiding {
-webkit-transition-duration: .4s;
transition-duration: .4s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.navbar.navbar-hiding~.page .list-group-title, .navbar.navbar-hiding~.page .subnavbar, .navbar.navbar-hiding~.page-content .list-group-title, .navbar.navbar-hiding~.page-content .subnavbar, .navbar.navbar-hiding~.pages .list-group-title, .navbar.navbar-hiding~.pages .subnavbar {
-webkit-transition-duration: .4s;
transition-duration: .4s
}
.navbar.navbar-hidden {
-webkit-transition-duration: .4s;
transition-duration: .4s;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
.navbar.navbar-hidden~.page .list-group-title, .navbar.navbar-hidden~.page-content .list-group-title, .navbar.navbar-hidden~.pages .list-group-title {
-webkit-transition-duration: .4s;
transition-duration: .4s;
top: -44px
}
.navbar.navbar-hidden~.page .subnavbar, .navbar.navbar-hidden~.page-content .subnavbar, .navbar.navbar-hidden~.pages .subnavbar {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-transition-duration: .4s;
transition-duration: .4s
}
.page.no-navbar .page-content {
padding-top: 0
}
.page.no-navbar .page-content.with-subnavbar, .page.no-navbar.with-subnavbar .page-content, .with-subnavbar .page.no-navbar .page-content {
padding-top: 44px
}
.tabbar.tabbar-hiding, .tabbar.toolbar-hiding, .toolbar.tabbar-hiding, .toolbar.toolbar-hiding {
-webkit-transition-duration: .4s;
transition-duration: .4s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.tabbar.tabbar-hidden, .tabbar.toolbar-hidden, .toolbar.tabbar-hidden, .toolbar.toolbar-hidden {
-webkit-transition-duration: .4s;
transition-duration: .4s;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
.page.no-tabbar .page-content, .page.no-toolbar .page-content {
padding-bottom: 0
}
.searchbar {
height: 44px;
width: 100%;
background: #c9c9ce;
box-sizing: border-box;
padding: 0 8px;
overflow: hidden;
position: relative;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.searchbar:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto;
height: 1px;
width: 100%;
background-color: #b4b4b4;
display: block;
z-index: 15;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%
}
.searchbar .searchbar-input {
width: 100%;
height: 28px;
position: relative;
-webkit-flex-shrink: 1;
-ms-flex: 0 1 auto;
flex-shrink: 1
}
.searchbar input[type=search] {
box-sizing: border-box;
width: 100%;
height: 100%;
display: block;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
border-radius: 5px;
font-family: inherit;
color: #000;
font-size: 14px;
font-weight: 400;
padding: 0 28px;
background-color: #fff;
background-repeat: no-repeat;
background-position: 8px center;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2013%2013'%20enable-background%3D'new%200%200%2013%2013'%3E%3Cg%3E%3Cpath%20fill%3D'%23939398'%20d%3D'M5%2C1c2.2%2C0%2C4%2C1.8%2C4%2C4S7.2%2C9%2C5%2C9S1%2C7.2%2C1%2C5S2.8%2C1%2C5%2C1%20M5%2C0C2.2%2C0%2C0%2C2.2%2C0%2C5s2.2%2C5%2C5%2C5s5-2.2%2C5-5S7.8%2C0%2C5%2C0%20L5%2C0z'%2F%3E%3C%2Fg%3E%3Cline%20stroke%3D'%23939398'%20stroke-miterlimit%3D'10'%20x1%3D'12.6'%20y1%3D'12.6'%20x2%3D'8.2'%20y2%3D'8.2'%2F%3E%3C%2Fsvg%3E");
-webkit-background-size: 13px 13px;
background-size: 13px 13px
}
.searchbar input[type=search]::-webkit-input-placeholder {
color: #939398;
opacity: 1
}
.searchbar input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: none
}
.searchbar .searchbar-clear {
position: absolute;
width: 28px;
height: 28px;
right: 0;
top: 0;
opacity: 0;
pointer-events: none;
background-position: center;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2028'%3E%3Ccircle%20cx%3D'14'%20cy%3D'14'%20r%3D'14'%20fill%3D'%238e8e93'%2F%3E%3Cline%20stroke%3D'%23ffffff'%20stroke-width%3D'2'%20stroke-miterlimit%3D'10'%20x1%3D'8'%20y1%3D'8'%20x2%3D'20'%20y2%3D'20'%2F%3E%3Cline%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2'%20stroke-miterlimit%3D'10'%20x1%3D'20'%20y1%3D'8'%20x2%3D'8'%20y2%3D'20'%2F%3E%3C%2Fsvg%3E");
-webkit-background-size: 14px 14px;
background-size: 14px 14px;
-webkit-transition-duration: .3s;
transition-duration: .3s;
cursor: pointer
}
.searchbar .searchbar-cancel {
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
font-size: 17px;
cursor: pointer;
opacity: 0;
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
margin-left: 0;
pointer-events: none;
display: none
}
.searchbar.searchbar-active .searchbar-cancel {
margin-left: 8px;
opacity: 1;
pointer-events: auto
}
.searchbar.searchbar-active .searchbar-cancel.active-state, html:not(.watch-active-state) .searchbar.searchbar-active .searchbar-cancel:active {
opacity: .3;
-webkit-transition-duration: 0s;
transition-duration: 0s
}
.searchbar.searchbar-not-empty .searchbar-clear {
pointer-events: auto;
opacity: 1
}
.searchbar-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
opacity: 0;
pointer-events: none;
background: rgba(0, 0, 0, .4);
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.searchbar-overlay.searchbar-overlay-active {
opacity: 1;
pointer-events: auto
}
.hidden-by-searchbar, .list-block .hidden-by-searchbar, .list-block li.hidden-by-searchbar, .searchbar-not-found {
display: none
}
.page>.searchbar {
position: absolute;
width: 100%;
left: 0;
top: 0;
z-index: 200
}
.page>.searchbar~.page-content {
padding-top: 44px
}
.navbar-fixed .page>.searchbar, .navbar-fixed>.searchbar, .navbar-through .page>.searchbar, .navbar-through>.searchbar {
top: 44px
}
.navbar-fixed .page>.searchbar~.page-content, .navbar-fixed>.searchbar~.page-content, .navbar-through .page>.searchbar~.page-content, .navbar-through>.searchbar~.page-content {
padding-top: 88px
}
.badge, .content-block {
box-sizing: border-box
}
.badge, i.icon {
display: inline-block
}
i.icon {
vertical-align: middle;
background-size: 100% auto;
background-position: center;
background-repeat: no-repeat;
font-style: normal;
position: relative
}
i.icon.icon-back {
width: 12px;
height: 20px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2020'%3E%3Cpath%20d%3D'M10%2C0l2%2C2l-8%2C8l8%2C8l-2%2C2L0%2C10L10%2C0z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E")
}
i.icon.icon-forward {
width: 12px;
height: 20px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2020'%3E%3Cpath%20d%3D'M2%2C20l-2-2l8-8L0%2C2l2-2l10%2C10L2%2C20z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E")
}
i.icon.icon-bars {
width: 21px;
height: 14px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2021%2014'%3E%3Cpath%20fill%3D'%23007aff'%20d%3D'M0%2C0h2v2H0V0z%20M4%2C0h17v1H4V0z%20M0%2C6h2v2H0V6z%20M4%2C6h17v1H4V6z%20M0%2C12h2v2H0V12z%20M4%2C12h17v1H4V12z'%2F%3E%3C%2Fsvg%3E")
}
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:2ddpx) {
i.icon.icon-bars {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2042%2026'%3E%3Cpath%20fill%3D'%23007aff'%20d%3D'M0%2C0h4v4H0V0z%20M8%2C1h34v2H8V1z%20M0%2C11h4v4H0V11z%20M8%2C12h34v2H8V12z%20M0%2C22h4v4H0V22z%20M8%2C23h34v2H8V23z'%2F%3E%3C%2Fsvg%3E");
height: 13px
}
}
.badge {
font-size: 13px;
color: #fff;
background: #8e8e93;
border-radius: 20px;
padding: 0 6px;
height: 20px;
line-height: 20px;
text-align: center
}
.item-after .badge {
min-width: 20px
}
.icon .badge {
position: absolute;
left: 100%;
margin-left: -10px;
top: -2px;
font-size: 10px;
line-height: 16px;
height: 16px;
padding: 0 4px;
min-width: 16px
}
.content-block {
margin: 35px 0;
padding: 0 15px;
color: #6d6d72
}
.content-block-title {
position: relative;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
text-transform: uppercase;
line-height: 1;
color: #6d6d72;
margin: 35px 15px 10px
}
.content-block-title+.card, .content-block-title+.content-block, .content-block-title+.list-block {
margin-top: 10px
}
.content-block-inner {
background: #fff;
padding: 10px 15px;
margin-left: -15px;
width: 100%;
position: relative;
color: #000
}
.content-block-inner:after, .content-block-inner:before {
position: absolute;
right: auto;
height: 1px;
width: 100%;
background-color: #c8c7cc;
display: block;
z-index: 15;
content: '';
left: 0
}
.content-block-inner:before {
top: 0;
bottom: auto;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0
}
.content-block-inner:after {
bottom: 0;
top: auto;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%
}
.content-block.inset {
margin-left: 15px;
margin-right: 15px;
border-radius: 7px
}
.content-block.inset .content-block-inner {
border-radius: 7px
}
.content-block.inset .content-block-inner:after, .content-block.inset .content-block-inner:before {
display: none
}
@media all and (min-width:768px) {
.content-block.tablet-inset {
margin-left: 15px;
margin-right: 15px;
border-radius: 7px
}
.content-block.tablet-inset .content-block-inner {
border-radius: 7px
}
.content-block.tablet-inset .content-block-inner:after, .content-block.tablet-inset .content-block-inner:before {
display: none
}
}
.list-block {
margin: 35px 0;
font-size: 17px
}
.list-block ul {
background: #fff;
list-style: none;
padding: 0;
margin: 0;
position: relative
}
.list-block ul:after, .list-block ul:before {
position: absolute;
display: block;
background-color: #c8c7cc
}
.list-block ul:before {
content: '';
left: 0;
top: 0;
bottom: auto;
right: auto;
height: 1px;
width: 100%;
z-index: 15;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0
}
.list-block .item-inner:after, .list-block .item-link.list-button:after, .list-block ul:after {
bottom: 0;
right: auto;
top: auto;
height: 1px;
width: 100%;
z-index: 15;
left: 0;
content: ''
}
.list-block ul:after {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%
}
.list-block .item-inner, .list-block li {
position: relative;
box-sizing: border-box
}
.list-block ul ul:after, .list-block ul ul:before, .list-block.inset ul:after, .list-block.inset ul:before {
display: none
}
.list-block ul ul {
padding-left: 45px
}
.list-block .align-top, .list-block .align-top .item-content, .list-block .align-top .item-inner {
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start
}
.list-block.inset {
margin-left: 15px;
margin-right: 15px;
border-radius: 7px
}
.list-block.inset .content-block-title {
margin-left: 0;
margin-right: 0
}
.list-block.inset ul {
border-radius: 7px
}
.list-block.inset li:first-child>a {
border-radius: 7px 7px 0 0
}
.list-block.inset li:last-child>a {
border-radius: 0 0 7px 7px
}
.list-block.inset li:first-child:last-child>a {
border-radius: 7px
}
@media all and (min-width:768px) {
.list-block.tablet-inset {
margin-left: 15px;
margin-right: 15px;
border-radius: 7px
}
.list-block.tablet-inset .content-block-title {
margin-left: 0;
margin-right: 0
}
.list-block.tablet-inset ul {
border-radius: 7px
}
.list-block.tablet-inset ul:after, .list-block.tablet-inset ul:before {
display: none
}
.list-block.tablet-inset li:first-child>a {
border-radius: 7px 7px 0 0
}
.list-block.tablet-inset li:last-child>a {
border-radius: 0 0 7px 7px
}
.list-block.tablet-inset li:first-child:last-child>a {
border-radius: 7px
}
}
.list-block .item-media {
display: flex;
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: none;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
box-sizing: border-box;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
padding-top: 7px;
padding-bottom: 8px
}
.list-block .item-media i+i, .list-block .item-media i+img {
margin-left: 5px
}
.list-block .item-media+.item-inner {
margin-left: 15px
}
.list-block .item-inner {
padding-right: 15px;
width: 100%;
padding-top: 8px;
padding-bottom: 7px;
min-height: 44px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-item-align: stretch;
-webkit-align-self: stretch;
align-self: stretch
}
.list-block .item-inner:after {
position: absolute;
background-color: #c8c7cc;
display: block;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%
}
.list-block .item-title {
-webkit-flex-shrink: 1;
-ms-flex: 0 1 auto;
flex-shrink: 1;
white-space: nowrap;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%
}
.list-block .item-after {
white-space: nowrap;
color: #8e8e93;
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
margin-left: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
max-height: 28px
}
.notifications, .picker-items-col {
max-height: 100%
}
.list-block .smart-select .item-after {
max-width: 70%;
overflow: hidden;
text-overflow: ellipsis;
position: relative
}
.list-block .item-link {
-webkit-transition-duration: .3s;
transition-duration: .3s;
display: block;
color: inherit
}
.list-block .item-link .item-inner {
padding-right: 35px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%2060%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'm60%2061.5-38.25%2038.25-9.75-9.75%2029.25-28.5-29.25-28.5%209.75-9.75z'%20fill%3D'%23c7c7cc'%2F%3E%3C%2Fsvg%3E");
background-size: 10px 20px;
background-repeat: no-repeat;
background-position: calc(100% - 15px) center
}
.list-block .item-link.active-state, html:not(.watch-active-state) .list-block .item-link:active {
-webkit-transition-duration: 0s;
transition-duration: 0s;
/* background-color: #d9d9d9*/
}
.list-block .item-link.active-state .item-inner:after, html:not(.watch-active-state) .list-block .item-link:active .item-inner:after {
background-color: transparent
}
.list-block .item-link.list-button {
padding: 0 15px;
text-align: center;
color: #007aff;
display: block;
line-height: 43px
}
.list-block .item-link.list-button:after {
position: absolute;
background-color: #c8c7cc;
display: block;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%
}
html.pixel-ratio-2 .list-block .item-link.list-button:after {
-webkit-transform: scaleY(.5);
transform: scaleY(.5)
}
html.pixel-ratio-3 .list-block .item-link.list-button:after {
-webkit-transform: scaleY(.33);
transform: scaleY(.33)
}
.list-block .item-content {
box-sizing: border-box;
padding-left: 15px;
min-height: 44px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.list-block .list-block-label {
margin: 10px 0 35px;
padding: 0 15px;
font-size: 14px;
color: #8f8f94
}
.list-block .swipeout {
overflow: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d
}
.list-block .swipeout.deleting {
-webkit-transition-duration: .3s;
transition-duration: .3s
}
.list-block .swipeout.deleting .swipeout-content {
-webkit-transform: translateX(-100%);
transform: translateX(-100%)
}
.list-block .swipeout.transitioning .swipeout-actions-left a, .list-block .swipeout.transitioning .swipeout-actions-right a, .list-block .swipeout.transitioning .swipeout-content, .list-block .swipeout.transitioning .swipeout-overswipe {
-webkit-transition: .3s;
transition: .3s
}
.list-block .swipeout-content {
position: relative;
z-index: 10
}
.list-block .swipeout-overswipe {
-webkit-transition: .2s left;
transition: .2s left
}
.list-block .swipeout-actions-left, .list-block .swipeout-actions-right {
position: absolute;
top: 0;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex
}
.list-block .swipeout-actions-left a, .list-block .swipeout-actions-right a {
padding: 0 30px;
color: #fff;
background: #c7c7cc;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
position: relative;
left: 0
}
.list-block .swipeout-actions-left a:after, .list-block .swipeout-actions-right a:after {
content: '';
position: absolute;
top: 0;
width: 600%;
height: 100%;
background: inherit;
z-index: -1
}
.list-block .item-divider, .list-block .item-subtitle, .list-block .item-text, .list-block .list-group-title {
position: relative;
overflow: hidden;
text-overflow: ellipsis
}
.list-block .swipeout-actions-left a.swipeout-delete, .list-block .swipeout-actions-right a.swipeout-delete {
background: #ff3b30
}
.list-block .swipeout-actions-right {
right: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%)
}
.list-block .swipeout-actions-right a:after {
left: 100%;
margin-left: -1px
}
.list-block .swipeout-actions-left {
left: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%)
}
.list-block .swipeout-actions-left a:after {
right: 100%;
margin-right: -1px
}
.list-block .item-subtitle {
font-size: 15px;
white-space: nowrap;
max-width: 100%
}
.list-block .item-text {
font-size: 15px;
color: #8e8e93;
line-height: 21px;
height: 42px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box
}
.list-block li.media-item .item-title, .list-block.media-list .item-title {
font-weight: 500
}
html.ios-gt-8 .list-block li.media-item .item-title, html.ios-gt-8 .list-block.media-list .item-title {
font-weight: 600
}
.list-block li.media-item .item-inner, .list-block.media-list .item-inner {
display: block;
padding-top: 10px;
padding-bottom: 9px;
-ms-flex-item-align: stretch;
-webkit-align-self: stretch;
align-self: stretch
}
.list-block li.media-item .item-link .item-inner, .list-block.media-list .item-link .item-inner {
background: 0 0;
padding-right: 15px
}
.list-block li.media-item .item-link .item-title-row, .list-block.media-list .item-link .item-title-row {
padding-right: 20px;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%2060%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'm60%2061.5-38.25%2038.25-9.75-9.75%2029.25-28.5-29.25-28.5%209.75-9.75z'%20fill%3D'%23c7c7cc'%2F%3E%3C%2Fsvg%3E") right center no-repeat;
background-size: 10px 20px
}
.list-block li.media-item .item-media, .list-block.media-list .item-media {
padding-top: 9px;
padding-bottom: 10px
}
.list-block li.media-item .item-media img, .list-block.media-list .item-media img {
display: block
}
.list-block li.media-item .item-title-row, .list-block.media-list .item-title-row {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between
}
.list-block li.media-item .item-content>.item-after, .list-block.media-list .item-content>.item-after {
margin-right: 15px;
margin-left: 15px
}
.list-block .list-group ul:after, .list-block .list-group ul:before {
z-index: 25
}
.list-block .list-group+.list-group ul:before {
display: none
}
.list-block .item-divider, .list-block .list-group-title {
background: #f7f7f7;
margin-top: -1px;
padding: 4px 15px;
white-space: nowrap;
max-width: 100%;
color: #8e8e93;
z-index: 15
}
.list-block .item-divider:before, .list-block .list-group-title:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: auto;
right: auto;
height: 1px;
width: 100%;
background-color: #c8c7cc;
display: block;
z-index: 15;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0
}
.list-block .list-group-title:before, .list-block li.sorting .item-inner:after, .list-block li:last-child .item-inner:after, .list-block li:last-child .list-button:after, .list-block li:last-child li:last-child .item-inner:after {
display: none
}
html.pixel-ratio-2 .list-block .item-divider:before, html.pixel-ratio-2 .list-block .list-group-title:before {
-webkit-transform: scaleY(.5);
transform: scaleY(.5)
}
html.pixel-ratio-3 .list-block .item-divider:before, html.pixel-ratio-3 .list-block .list-group-title:before {
-webkit-transform: scaleY(.33);
transform: scaleY(.33)
}
.list-block .list-group-title {
position: relative;
position: -webkit-sticky;
position: -moz-sticky;
position: sticky;
top: 0;
z-index: 20;
margin-top: 0
}
.list-block .sortable-handler {
position: absolute;
right: 0;
top: 0;
bottom: 1px;
z-index: 10;
background-repeat: no-repeat;
background-size: 18px 12px;
background-position: center;
width: 35px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2018%2012'%20fill%3D'%23c7c7cc'%3E%3Cpath%20d%3D'M0%2C2V0h22v2H0z'%2F%3E%3Cpath%20d%3D'M0%2C7V5h22v2H0z'%2F%3E%3Cpath%20d%3D'M0%2C12v-2h22v2H0z'%2F%3E%3C%2Fsvg%3E");
opacity: 0;
visibility: hidden;
cursor: pointer;
-webkit-transition-duration: .3s;
transition-duration: .3s
}
.list-block.sortable .item-inner {
-webkit-transition-duration: .3s;
transition-duration: .3s
}
.list-block.sortable-opened .sortable-handler {
visibility: visible;
opacity: 1
}
.list-block.sortable-opened .item-inner, .list-block.sortable-opened .item-link .item-inner {
padding-right: 35px
}
.list-block.sortable-opened .item-link .item-inner, .list-block.sortable-opened .item-link .item-title-row {
background-image: none
}
.list-block.sortable-sorting li {
-webkit-transition-duration: .3s;
transition-duration: .3s
}
.list-block li.sorting {
z-index: 50;
background: rgba(255, 255, 255, .8);
box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
-webkit-transition-duration: 0s;
transition-duration: 0s
}
.list-block li li:last-child .item-inner:after, .list-block li:last-child li .item-inner:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto;
height: 1px;
width: 100%;
background-color: #c8c7cc;
display: block;
z-index: 15;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%
}
.list-block input[type=date], .list-block input[type=datetime-local], .list-block input[type=email], .list-block input[type=number], .list-block input[type=password], .list-block input[type=search], .list-block input[type=tel], .list-block input[type=text], .list-block input[type=time], .list-block input[type=url], .list-block select, .list-block textarea {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
box-sizing: border-box;
border: none;
background: 0 0;
border-radius: 0;
box-shadow: none;
display: block;
padding: 0;
margin: 0;
width: 100%;
height: 43px;
color: #000;
font-size: 17px;
font-family: inherit
}
.list-block .item-title.label+.item-input {
margin-left: 5px
}
.list-block input[type=date], .list-block input[type=datetime-local] {
line-height: 44px
}
.list-block select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none
}
.list-block textarea {
height: 100px;
resize: none;
line-height: 1.4;
padding-top: 8px;
padding-bottom: 7px
}
.list-block textarea.resizable {
height: 43px
}
.list-block .item-input {
width: 100%;
margin-top: -8px;
margin-bottom: -7px;
-webkit-box-flex: 1;
-webkit-flex-shrink: 1;
-ms-flex: 0 1 auto;
flex-shrink: 1
}
.button, .label-switch .checkbox {
-webkit-appearance: none;
-ms-appearance: none;
margin: 0
}
.list-block .item-title.label {
vertical-align: top;
width: 35%;
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0
}
.label-switch, .label-switch .checkbox {
width: 52px;
border-radius: 16px;
height: 32px;
position: relative;
box-sizing: border-box;
cursor: pointer
}
.label-switch {
display: inline-block;
vertical-align: middle;
-ms-flex-item-align: center;
-webkit-align-self: center;
align-self: center
}
.label-switch .checkbox {
background: #e5e5e5;
z-index: 0;
padding: 0;
-moz-appearance: none;
appearance: none;
border: none;
-webkit-transition-duration: .3s;
transition-duration: .3s
}
.label-switch .checkbox:after, .label-switch .checkbox:before {
height: 28px;
background: #fff;
position: absolute;
top: 2px;
left: 2px;
content: ' '
}
.label-switch .checkbox:before {
width: 48px;
border-radius: 16px;
box-sizing: border-box;
z-index: 1;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transform: scale(1);
transform: scale(1)
}
.label-switch .checkbox:after {
width: 28px;
border-radius: 28px;
z-index: 2;
box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition-duration: .3s;
transition-duration: .3s
}
.label-switch input[type=checkbox] {
display: none
}
.label-switch input[type=checkbox]:checked+.checkbox {
background: #4cd964
}
.label-switch input[type=checkbox]:checked+.checkbox:before {
-webkit-transform: scale(0);
transform: scale(0)
}
.label-switch input[type=checkbox]:checked+.checkbox:after {
-webkit-transform: translateX(20px);
transform: translateX(20px)
}
html.android .label-switch input[type=checkbox]+.checkbox, html.android .label-switch input[type=checkbox]+.checkbox:after, html.android .label-switch input[type=checkbox]+.checkbox:before {
-webkit-transition-duration: 0;
transition-duration: 0
}
/* Hide button css on app.css for editor website page */
.button {
/* border: 1px solid #007aff;
color: #007aff;
text-decoration: none;
text-align: center;
display: block;
border-radius: 5px;
line-height: 27px;
box-sizing: border-box;
-moz-appearance: none;
appearance: none;
background: 0 0;
padding: 0 10px;
height: 29px;
white-space: nowrap;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
font-family: inherit;
cursor: pointer;
outline: 0 */
}
.buttons-row, .card-footer, .card-header {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex
}
input[type=button].button, input[type=submit].button {
width: 100%
}
.button.active-state, html:not(.watch-active-state) .button:active {
background: rgba(0, 122, 255, .15)
}
.button i.icon:first-child {
margin-right: 10px
}
.button i.icon:last-child {
margin-left: 10px
}
.button i.icon:first-child:last-child {
margin-left: 0;
margin-right: 0
}
.card .list-block>ul:after, .card .list-block>ul:before, .cards-list>ul:after, .cards-list>ul:before, .smart-select select, label.label-checkbox input[type=checkbox], label.label-checkbox input[type=radio], label.label-radio input[type=checkbox], label.label-radio input[type=radio] {
display: none
}
.range-slider {
width: 100%;
position: relative;
overflow: hidden;
padding-left: 3px;
padding-right: 3px;
margin-left: -1px;
-ms-flex-item-align: center;
-webkit-align-self: center;
align-self: center
}
.range-slider input[type=range] {
position: relative;
height: 28px;
width: 100%;
margin: 4px 0 5px;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #b7b8b7), color-stop(100%, #b7b8b7));
background: linear-gradient(to right, #b7b8b7 0, #b7b8b7 100%);
background-position: center;
background-size: 100% 2px;
background-repeat: no-repeat;
outline: 0;
border: none;
box-sizing: content-box;
-ms-background-position-y: 500px
}
.range-slider input[type=range]:active, .range-slider input[type=range]:focus {
border: 0;
outline: 0
}
.range-slider input[type=range]:after {
height: 2px;
background: #fff;
content: ' ';
width: 5px;
top: 50%;
margin-top: -1px;
left: -5px;
z-index: 1;
position: absolute
}
.range-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
border: none;
height: 28px;
width: 28px;
position: relative;
background: 0 0
}
.range-slider input[type=range]::-webkit-slider-thumb:after {
height: 28px;
width: 28px;
border-radius: 28px;
background: #fff;
z-index: 10;
box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
border: 0;
outline: 0;
position: absolute;
box-sizing: border-box;
content: ' ';
left: 0;
top: 0
}
.range-slider input[type=range]::-webkit-slider-thumb:before {
position: absolute;
top: 50%;
right: 100%;
width: 2000px;
height: 2px;
margin-top: -1px;
z-index: 1;
background: #007aff;
content: ' '
}
.range-slider input[type=range]::-moz-range-track {
width: 100%;
height: 2px;
background: #b7b8b7;
border: none;
outline: 0
}
.range-slider input[type=range]::-moz-range-thumb {
height: 28px;
width: 28px;
border-radius: 28px;
background: #fff;
z-index: 10;
box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
border: 0;
outline: 0;
position: absolute;
box-sizing: border-box;
content: ' '
}
.range-slider input[type=range]::-ms-track {
width: 100%;
height: 2px;
cursor: pointer;
background: 0 0;
border-color: transparent;
color: transparent
}
.range-slider input[type=range]::-ms-thumb {
height: 28px;
width: 28px;
border-radius: 28px;
background: #fff;
z-index: 10;
border: 0;
outline: 0;
position: absolute;
content: ' ';
box-shadow: none;
border: 1px solid rgba(0, 0, 0, .2);
box-sizing: border-box;
margin-top: 0;
top: 50%
}
.range-slider input[type=range]::-ms-fill-lower {
background: #007aff
}
.range-slider input[type=range]::-ms-fill-upper {
background: #b7b8b7
}
label.label-checkbox {
cursor: pointer
}
label.label-checkbox i.icon-form-checkbox {
width: 22px;
height: 22px;
position: relative;
border-radius: 22px;
border: 1px solid #c7c7cc;
box-sizing: border-box
}
label.label-checkbox i.icon-form-checkbox:after {
content: ' ';
position: absolute;
left: 50%;
margin-left: -6px;
top: 50%;
margin-top: -4px;
width: 12px;
height: 9px
}
label.label-checkbox input[type=checkbox]:checked+.item-media i.icon-form-checkbox, label.label-checkbox input[type=radio]:checked+.item-media i.icon-form-checkbox {
border: none;
background-color: #007aff
}
label.label-checkbox input[type=checkbox]:checked+.item-media i.icon-form-checkbox:after, label.label-checkbox input[type=radio]:checked+.item-media i.icon-form-checkbox:after {
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2012%209'%20xml%3Aspace%3D'preserve'%3E%3Cpolygon%20fill%3D'%23ffffff'%20points%3D'12%2C0.7%2011.3%2C0%203.9%2C7.4%200.7%2C4.2%200%2C4.9%203.9%2C8.8%203.9%2C8.8%203.9%2C8.8%20'%2F%3E%3C%2Fsvg%3E") center no-repeat;
-webkit-background-size: 12px 9px;
background-size: 12px 9px
}
label.label-radio {
cursor: pointer
}
label.label-radio input[type=checkbox]~.item-inner, label.label-radio input[type=radio]~.item-inner {
padding-right: 35px
}
label.label-radio input[type=checkbox]:checked~.item-inner, label.label-radio input[type=radio]:checked~.item-inner {
background: calc(100% - 15px) center no-repeat;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2013%2010'%3E%3Cpolygon%20fill%3D'%23007aff'%20points%3D'11.6%2C0%204.4%2C7.2%201.4%2C4.2%200%2C5.6%204.4%2C10%204.4%2C10%204.4%2C10%2013%2C1.4%20'%2F%3E%3C%2Fsvg%3E");
-webkit-background-size: 13px 10px;
background-size: 13px 10px
}
label.label-checkbox, label.label-radio {
-webkit-transition-duration: .3s;
transition-duration: .3s
}
html:not(.watch-active-state) label.label-checkbox:active, html:not(.watch-active-state) label.label-radio:active, label.label-checkbox.active-state, label.label-radio.active-state {
-webkit-transition-duration: 0s;
transition-duration: 0s;
/*background-color: #d9d9d9*/
}
html:not(.watch-active-state) label.label-checkbox:active .item-inner:after, html:not(.watch-active-state) label.label-radio:active .item-inner:after, label.label-checkbox.active-state .item-inner:after, label.label-radio.active-state .item-inner:after {
background-color: transparent
}
.list-block .accordion-item-toggle {
cursor: pointer;
-webkit-transition-duration: .3s;
transition-duration: .3s
}
.list-block .accordion-item-toggle .item-inner {
padding-right: 35px;
background: calc(100% - 15px) center no-repeat;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%2060%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'm60%2061.5-38.25%2038.25-9.75-9.75%2029.25-28.5-29.25-28.5%209.75-9.75z'%20fill%3D'%23c7c7cc'%2F%3E%3C%2Fsvg%3E");
background-size: 10px 20px
}
.list-block .accordion-item-toggle.active-state, html:not(.watch-active-state) .list-block .accordion-item-toggle:active {
-webkit-transition-duration: 0s;
transition-duration: 0s;
/*background-color: #d9d9d9*/
}
.list-block .accordion-item-expanded .accordion-item-toggle .item-inner:after, .list-block .accordion-item-expanded>.item-link .item-inner:after, .list-block .accordion-item-toggle.active-state>.item-inner:after, html:not(.watch-active-state) .list-block .accordion-item-toggle:active>.item-inner:after {
background-color: transparent
}
.list-block .accordion-item-toggle .item-inner, .list-block .accordion-item>.item-link .item-inner {
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: background-color;
transition-property: background-color
}
.list-block .accordion-item-toggle .item-inner:after, .list-block .accordion-item>.item-link .item-inner:after {
-webkit-transition-duration: .3s;
transition-duration: .3s
}
.list-block .accordion-item-expanded.media-item .accordion-item-toggle .item-title-row, .list-block .accordion-item-expanded.media-item>.item-link .item-title-row, .list-block.media-list .accordion-item-expanded .accordion-item-toggle .item-title-row, .list-block.media-list .accordion-item-expanded>.item-link .item-title-row, .list-block:not(.media-list) .accordion-item-expanded:not(.media-item) .accordion-item-toggle .item-inner, .list-block:not(.media-list) .accordion-item-expanded:not(.media-item)>.item-link .item-inner {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%2060%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'm60%2061.5-38.25%2038.25-9.75-9.75%2029.25-28.5-29.25-28.5%209.75-9.75z'%20transform%3D'translate(115%2C%2030)%20rotate(90)'%20fill%3D'%23c7c7cc'%2F%3E%3C%2Fsvg%3E");
background-size: 20px 20px
}
.list-block .accordion-item .content-block, .list-block .accordion-item .list-block {
margin-top: 0;
margin-bottom: 0
}
.list-block .accordion-item ul {
padding-left: 0
}
.accordion-item-content {
position: relative;
overflow: hidden;
height: 0;
font-size: 14px;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.accordion-item-expanded>.accordion-item-content {
height: auto
}
html.android-4 .accordion-item-content {
-webkit-transform: none;
transform: none
}
.card .list-block ul, .cards-list ul {
background: 0 0
}
.modal-overlay, .popup-overlay, .preloader-indicator-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
z-index: 106000;
visibility: hidden;
opacity: 0;
-webkit-transition-duration: .4s;
transition-duration: .4s
}
.modal-overlay.modal-overlay-visible, .popup-overlay.modal-overlay-visible, .preloader-indicator-overlay.modal-overlay-visible {
visibility: visible;
opacity: 1
}
.popup-overlay {
z-index: 10200
}
.modalShare {
width: 270px;
position: absolute;
z-index: 110000;
left: 50%;
margin-left: -135px;
margin-top: 0;
top: 50%;
text-align: center;
border-radius: 13px;
overflow: hidden;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0) scale(1.185);
transform: translate3d(0, 0, 0) scale(1.185);
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
color: #000;
height: auto;
}
.modalShare.modal-in {
opacity: 1;
-webkit-transition-duration: .4s;
transition-duration: .4s;
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1)
}
.modalShare.modal-out {
opacity: 0;
z-index: 10999;
-webkit-transition-duration: .4s;
transition-duration: .4s;
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1)
}
.modal-button:after, .modal-buttons-vertical .modal-button:after, .modal-inner:after {
z-index: 15;
content: ''
}
.modal-inner {
padding: 15px;
border-radius: 13px 13px 0 0;
position: relative;
background: rgba(255, 255, 255, .95)
}
.modal-inner:after {
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto;
height: 1px;
width: 100%;
background-color: rgba(0, 0, 0, .2);
display: block;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%
}
.modal-title {
font-weight: 500;
font-size: 18px;
text-align: center
}
html.ios-gt-8 .modal-title {
font-weight: 600
}
.modal-title+.modal-text {
margin-top: 5px
}
.modal-buttons {
height: 44px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center
}
.modal-buttons.modal-buttons-vertical {
display: block;
height: auto
}
.modal-button {
width: 100%;
padding: 0 5px;
height: 44px;
font-size: 17px;
line-height: 44px;
text-align: center;
color: #007aff;
display: block;
position: relative;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
-webkit-box-flex: 1;
-ms-flex: 1;
background: rgba(255, 255, 255, .95)
}
.modal-button:after {
position: absolute;
right: 0;
top: 0;
left: auto;
bottom: auto;
width: 1px;
height: 100%;
background-color: rgba(0, 0, 0, .2);
display: block;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%
}
.modal-button:last-child:after, .modal-buttons-vertical .modal-button:after, .modal-buttons-vertical .modal-button:before {
display: none
}
html.pixel-ratio-2 .modal-button:after {
-webkit-transform: scaleX(.5);
transform: scaleX(.5)
}
html.pixel-ratio-3 .modal-button:after {
-webkit-transform: scaleX(.33);
transform: scaleX(.33)
}
.modal-button:first-child {
border-radius: 0 0 0 13px
}
.modal-button:last-child {
border-radius: 0 0 13px
}
.modal-button:first-child:last-child {
border-radius: 0 0 13px 13px
}
.modal-button.modal-button-bold {
font-weight: 500
}
html.ios-gt-8 .modal-button.modal-button-bold {
font-weight: 600
}
.modal-button.active-state, html:not(.watch-active-state) .modal-button:active {
background: rgba(230, 230, 230, .95)
}
.modal-buttons-vertical .modal-button {
border-radius: 0
}
.modal-buttons-vertical .modal-button:after {
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto;
height: 1px;
width: 100%;
background-color: rgba(0, 0, 0, .2);
display: block;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%
}
.modal-buttons-vertical .modal-button:last-child:after, .modal-no-buttons .modal-buttons, .modal-no-buttons .modal-inner:after {
display: none
}
.modal-buttons-vertical .modal-button:last-child {
border-radius: 0 0 13px 13px
}
.modal-no-buttons .modal-inner {
border-radius: 13px
}
.popover, .popover .list-block:first-child ul:before, .popover .list-block:last-child ul:after {
display: none
}
.popover, .popover .list-block {
margin: 0
}
.popover {
width: 320px;
background: rgba(255, 255, 255, .95);
z-index: 11000;
top: 0;
opacity: 0;
left: 0;
border-radius: 13px;
position: absolute;
-webkit-transform: none;
transform: none;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-ms-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity
}
.popover-angle, .popover-angle:after {
width: 26px;
height: 26px;
position: absolute;
top: 0
}
.popover .list-block:first-child li:first-child a, .popover .list-block:first-child ul {
border-radius: 13px 13px 0 0
}
.login-screen, .picker-modal, .popup {
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform
}
.popover.modal-in {
-webkit-transition-duration: .3s;
transition-duration: .3s;
opacity: 1
}
.popover .list-block ul {
background: 0 0
}
.popover .list-block:last-child li:last-child a, .popover .list-block:last-child ul {
border-radius: 0 0 13px 13px
}
.popover .list-block:first-child:last-child li:first-child:last-child a, .popover .list-block:first-child:last-child ul:first-child:last-child {
border-radius: 13px
}
.popover .list-block+.list-block {
margin-top: 35px
}
.popover-angle {
left: -26px;
z-index: 100;
overflow: hidden
}
.popover-angle:after {
content: ' ';
background: rgba(255, 255, 255, .95);
left: 0;
border-radius: 3px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
.popover-angle.on-left {
left: -26px
}
.popover-angle.on-left:after {
left: 19px;
top: 0
}
.popover-angle.on-right {
left: 100%
}
.popover-angle.on-right:after {
left: -19px;
top: 0
}
.popover-angle.on-top {
left: 0;
top: -26px
}
.popover-angle.on-top:after {
left: 0;
top: 19px
}
.popover-angle.on-bottom {
left: 0;
top: 100%
}
.popover-angle.on-bottom:after {
left: 0;
top: -19px
}
.popover-inner {
overflow: auto;
-webkit-overflow-scrolling: touch
}
.actions-popover .list-block+.list-block {
margin-top: 20px
}
.actions-popover .list-block ul {
background: #fff
}
.modal .preloader {
width: 34px;
height: 34px
}
.preloader-indicator-overlay {
visibility: visible;
opacity: 0;
background: 0 0
}
.preloader-indicator-modal {
position: absolute;
left: 50%;
top: 50%;
padding: 8px;
margin-left: -25px;
margin-top: -25px;
background: rgba(0, 0, 0, .8);
z-index: 11000;
border-radius: 5px
}
.preloader-indicator-modal .preloader {
display: block;
width: 34px;
height: 34px
}
.picker-modal {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 260px;
z-index: 11500;
display: none;
-ms-transition-property: -ms-transform;
-o-transition-property: -o-transform;
transition-property: transform;
background: #cfd5da;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
.picker-modal.modal-in, .picker-modal.modal-out {
-webkit-transition-duration: .4s;
transition-duration: .4s
}
.picker-modal.modal-in {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.picker-modal.modal-out {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
.picker-modal .picker-modal-inner {
height: 100%;
position: relative
}
.picker-modal .toolbar {
position: relative;
width: 100%;
background: #f7f7f8
}
.picker-modal .toolbar:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: auto;
right: auto;
height: 1px;
width: 100%;
background-color: #929499;
display: block;
z-index: 15;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0
}
.picker-modal .toolbar+.picker-modal-inner {
height: -webkit-calc(100% - 44px);
height: -moz-calc(100% - 44px);
height: calc(100% - 44px)
}
.picker-modal.picker-modal-inline, .popover .picker-modal {
display: block;
position: relative;
background: 0 0;
z-index: inherit;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.picker-modal.picker-modal-inline .toolbar:before, .popover .picker-modal .toolbar:before {
display: none
}
.picker-modal.picker-modal-inline .toolbar:after, .popover .picker-modal .toolbar:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto;
height: 1px;
width: 100%;
background-color: #929499;
display: block;
z-index: 15;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%
}
.popover .picker-modal {
width: auto
}
.popover .picker-modal .toolbar {
background: 0 0
}
.picker-modal.smart-select-picker .page {
background: #fff
}
.picker-modal.smart-select-picker .toolbar:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto;
height: 1px;
width: 100%;
background-color: #c4c4c4;
display: block;
z-index: 15;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%
}
.panel, .panel-overlay {
position: absolute;
top: 0
}
.panel, .picker-modal.smart-select-picker .list-block ul:after, .picker-modal.smart-select-picker .list-block ul:before {
display: none
}
html.pixel-ratio-2 .picker-modal.smart-select-picker .toolbar:after {
-webkit-transform: scaleY(.5);
transform: scaleY(.5)
}
html.pixel-ratio-3 .picker-modal.smart-select-picker .toolbar:after {
-webkit-transform: scaleY(.33);
transform: scaleY(.33)
}
.picker-modal.smart-select-picker .list-block {
margin: 0
}
.panel-overlay {
left: 0;
width: 100%;
height: 100%;
background: 0 0;
opacity: 0;
z-index: 5999;
display: none
}
.panel {
z-index: 1000;
background: #111;
box-sizing: border-box;
overflow: auto;
-webkit-overflow-scrolling: touch;
width: 260px;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-duration: .4s;
transition-duration: .4s
}
body.with-panel-left-cover .panel-overlay, body.with-panel-left-reveal .panel-overlay, body.with-panel-right-cover .panel-overlay, body.with-panel-right-reveal .panel-overlay {
display: block
}
.panel.panel-left.panel-cover {
z-index: 6000;
left: -260px
}
.panel.panel-left.panel-reveal {
left: 0
}
.panel.panel-right.panel-cover {
z-index: 6000;
right: -260px
}
.panel.panel-right.panel-reveal {
right: 0
}
body.with-panel-left-cover .views, body.with-panel-right-cover .views {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
body.with-panel-left-reveal .views, body.with-panel-right-reveal .views {
-webkit-transition-duration: .4s;
transition-duration: .4s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform
}
body.with-panel-left-reveal .views {
-webkit-transform: translate3d(260px, 0, 0);
transform: translate3d(260px, 0, 0)
}
body.with-panel-left-reveal .panel-overlay {
margin-left: 260px
}
body.with-panel-left-cover .panel-left {
-webkit-transform: translate3d(260px, 0, 0);
transform: translate3d(260px, 0, 0)
}
body.with-panel-right-reveal .views {
-webkit-transform: translate3d(-260px, 0, 0);
transform: translate3d(-260px, 0, 0)
}
body.with-panel-right-reveal .panel-overlay {
margin-left: -260px
}
body.with-panel-right-cover .panel-right {
-webkit-transform: translate3d(-260px, 0, 0);
transform: translate3d(-260px, 0, 0)
}
body.panel-closing .views {
-webkit-transition-duration: .4s;
transition-duration: .4s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform
}
.lazy-loaded.lazy-fadeIn {
-webkit-animation: lazyFadeIn .6s;
animation: lazyFadeIn .6s
}
@-webkit-keyframes lazyFadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes lazyFadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
.tabs .tab {
display: none
}
.tabs .tab.active {
display: block
}
.messages, .tabs-animated-wrap>.tabs {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex
}
.tabs-animated-wrap {
position: relative;
width: 100%;
overflow: hidden;
height: 100%
}
.tabs-animated-wrap>.tabs {
display: flex;
height: 100%;
-webkit-transition-duration: .3s;
transition-duration: .3s
}
.tabs-animated-wrap>.tabs>.tab {
width: 100%;
display: block;
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0
}
.messages-content {
background: #fff
}
.messages {
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column
}
.photo-browser-swiper-wrapper{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex
}
.messages-date {
text-align: center;
font-weight: 500;
font-size: 11px;
line-height: 1;
margin: 10px 15px;
color: #8e8e93
}
html.ios-gt-8 .messages-date {
font-weight: 600
}
.messages-date span {
font-weight: 400
}
.message {
box-sizing: border-box;
margin: 1px 10px 0;
max-width: 70%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column
}
.message:first-child {
margin-top: 10px
}
.message .message-text {
box-sizing: border-box;
border-radius: 16px;
padding: 6px 16px 9px;
min-width: 48px;
min-height: 35px;
font-size: 17px;
line-height: 1.2;
word-break: break-word
}
.message-label, .message-name {
font-size: 12px;
line-height: 1;
color: #8e8e93
}
.message.message-pic .message-text {
padding: 0;
background: 0 0
}
.message.message-pic img {
display: block;
height: auto;
max-width: 100%;
border-radius: 16px
}
.message-hide-label .message-label, .message-hide-name .message-name, .messages-auto-layout .message-label, .messages-auto-layout .message-name {
display: none
}
.message-name {
margin-bottom: 2px;
margin-top: 7px
}
.message-label {
margin-top: 4px
}
.message-avatar {
width: 29px;
height: 29px;
border-radius: 100%;
margin-top: -29px;
position: relative;
top: 1px;
background-size: cover;
opacity: 1;
-webkit-transition-duration: .4s;
transition-duration: .4s
}
.message-hide-avatar .message-avatar, .messages-auto-layout .message-avatar {
opacity: 0
}
.message-sent {
-ms-flex-item-align: end;
-webkit-align-self: flex-end;
align-self: flex-end;
-webkit-box-align: end;
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end
}
.message-sent .message-name {
margin-right: 16px
}
.message-sent .message-label {
margin-right: 6px
}
.message-sent.message-with-avatar .message-text {
margin-right: 29px
}
.message-sent.message-with-avatar .message-name {
margin-right: 45px
}
.message-sent.message-with-avatar .message-label {
margin-right: 34px
}
.message-sent .message-text {
padding-right: 22px;
background-color: #00d449;
color: #fff;
margin-left: auto;
-webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,") 50% 56% 46% 42%
}
.message-sent.message-last .message-text, .message-sent.message-with-tail .message-text {
border-radius: 16px 16px 0;
-webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,") 50% 56% 46% 42%
}
.message-sent.message-last.message-pic img, .message-sent.message-with-tail.message-pic img {
border-radius: 16px 16px 0
}
.message-received {
-ms-flex-item-align: start;
-webkit-align-self: flex-start;
align-self: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start
}
.message-received .message-text {
padding-left: 22px;
background-color: #e5e5ea;
color: #000;
-webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,") 50% 42% 46% 56%
}
.message-received .message-name {
margin-left: 16px
}
.message-received .message-label {
margin-left: 6px
}
.message-received.message-with-avatar .message-text {
margin-left: 29px
}
.message-received.message-with-avatar .message-name {
margin-left: 45px
}
.message-received.message-with-avatar .message-label {
margin-left: 34px
}
.message-received.message-last .message-text, .message-received.message-with-tail .message-text {
border-radius: 16px 16px 16px 0;
-webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,") 50% 42% 46% 56%
}
.message-received.message-last.message-pic img, .message-received.message-with-tail.message-pic img {
border-radius: 16px 16px 16px 0
}
.message-last {
margin-bottom: 8px
}
.message-appear-from-bottom {
-webkit-animation: messageAppearFromBottom .4s;
animation: messageAppearFromBottom .4s
}
.message-appear-from-top {
-webkit-animation: messageAppearFromTop .4s;
animation: messageAppearFromTop .4s
}
.messages-auto-layout .message-first .message-name, .messages-auto-layout .message-last .message-label, html.with-statusbar-overlay body .statusbar-overlay {
display: block
}
.messages-auto-layout .message-last .message-avatar {
opacity: 1
}
html.retina.ios-6 .message, html.retina.ios-6 .message.message-pic img {
-webkit-mask-box-image: none;
border-radius: 16px
}
@-webkit-keyframes messageAppearFromBottom {
from {
-webkit-transform: translate3d(0, 100%, 0)
}
to {
-webkit-transform: translate3d(0, 0, 0)
}
}
@keyframes messageAppearFromBottom {
from {
transform: translate3d(0, 100%, 0)
}
to {
transform: translate3d(0, 0, 0)
}
}
@-webkit-keyframes messageAppearFromTop {
from {
-webkit-transform: translate3d(0, -100%, 0)
}
to {
-webkit-transform: translate3d(0, 0, 0)
}
}
@keyframes messageAppearFromTop {
from {
transform: translate3d(0, -100%, 0)
}
to {
transform: translate3d(0, 0, 0)
}
}
.preloader {
display: inline-block;
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
background-size: 100%;
background-repeat: no-repeat;
-webkit-animation: preloader-spin 1s steps(12, end) infinite;
animation: preloader-spin 1s steps(12, end) infinite
}
.preloader-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}
@-webkit-keyframes preloader-spin {
100% {
-webkit-transform: rotate(360deg)
}
}
@keyframes preloader-spin {
100% {
transform: rotate(360deg)
}
}
.pull-to-refresh-layer {
position: absolute;
position: relative;
margin-top: -44px;
left: 0;
top: 0;
width: 100%;
height: 44px
}
.pull-to-refresh-layer .preloader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -10px;
margin-top: -10px;
visibility: hidden
}
.pull-to-refresh-layer .pull-to-refresh-arrow {
width: 13px;
height: 20px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -6px;
margin-top: -10px;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2026%2040'%3E%3Cpolygon%20points%3D'9%2C22%209%2C0%2017%2C0%2017%2C22%2026%2C22%2013.5%2C40%200%2C22'%20fill%3D'%238c8c8c'%2F%3E%3C%2Fsvg%3E") center no-repeat;
background-size: 13px 20px;
z-index: 10;
-webkit-transform: rotate(0) translate3d(0, 0, 0);
transform: rotate(0) translate3d(0, 0, 0);
-webkit-transition-duration: .3s;
transition-duration: .3s
}
.pull-to-refresh-content.pull-to-refresh-no-navbar {
margin-top: -44px;
height: -webkit-calc(100% + 44px);
height: -moz-calc(100% + 44px);
height: calc(100% + 44px)
}
.swiper-slide, .swiper-wrapper {
width: 100%;
height: 100%;
position: relative
}
.pull-to-refresh-content.pull-to-refresh-no-navbar .pull-to-refresh-layer {
margin-top: 0
}
.pull-to-refresh-content.refreshing, .pull-to-refresh-content.transitioning {
-webkit-transition-duration: .4s;
transition-duration: .4s
}
.pull-to-refresh-content:not(.refreshing) .pull-to-refresh-layer .preloader {
-webkit-animation: none;
animation: none
}
.pull-to-refresh-content.refreshing {
-webkit-transform: translate3d(0, 44px, 0);
transform: translate3d(0, 44px, 0)
}
.pull-to-refresh-content.refreshing .pull-to-refresh-arrow {
visibility: hidden;
-webkit-transition-duration: 0s;
transition-duration: 0s
}
.pull-to-refresh-content.refreshing .preloader {
visibility: visible
}
.pull-to-refresh-content.pull-up .pull-to-refresh-arrow {
-webkit-transform: rotate(180deg) translate3d(0, 0, 0);
transform: rotate(180deg) translate3d(0, 0, 0)
}
.popover.popover-picker-calendar {
width: 320px
}
.picker-calendar-week-days {
height: 18px;
background: #f7f7f8;
display: flex;
font-size: 11px;
box-sizing: border-box;
position: relative
}
.picker-calendar-week-days:after {
position: absolute;
top: auto;
height: 1px;
width: 100%;
background-color: #c4c4c4;
display: block;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%
}
html.pixel-ratio-2 .picker-calendar-week-days:after {
-webkit-transform: scaleY(.5);
transform: scaleY(.5)
}
html.pixel-ratio-3 .picker-calendar-week-days:after {
-webkit-transform: scaleY(.33);
transform: scaleY(.33)
}
.picker-calendar-week-days .picker-calendar-week-day {
-webkit-flex-shrink: 1;
-ms-flex: 0 1 auto;
flex-shrink: 1;
width: 14.28571429%;
width: -webkit-calc(100% / 7);
width: -moz-calc(100% / 7);
width: calc(100% / 7);
line-height: 17px;
text-align: center
}
.picker-calendar-week-days+.picker-calendar-months {
height: -webkit-calc(100% - 18px);
height: -moz-calc(100% - 18px);
height: calc(100% - 18px)
}
.picker-calendar-months {
width: 100%;
height: 100%;
overflow: hidden;
position: relative
}
.picker-calendar-months-wrapper {
position: relative;
width: 100%;
height: 100%;
-webkit-transition-duration: .3s;
transition-duration: .3s
}
.picker-calendar-month {
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0
}
.picker-calendar-row {
height: 16.66666667%;
height: -webkit-calc(100% / 6);
height: -moz-calc(100% / 6);
height: calc(100% / 6);
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-shrink: 1;
-ms-flex: 0 1 auto;
flex-shrink: 1;
width: 100%;
position: relative
}
.picker-calendar-row:after {
position: absolute;
top: auto;
height: 1px;
width: 100%;
background-color: #ccc;
display: block;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%
}
html.pixel-ratio-2 .picker-calendar-row:after {
-webkit-transform: scaleY(.5);
transform: scaleY(.5)
}
html.pixel-ratio-3 .picker-calendar-row:after {
-webkit-transform: scaleY(.33);
transform: scaleY(.33)
}
.picker-calendar-row:last-child:after {
display: none
}
.picker-calendar-day {
-webkit-flex-shrink: 1;
-ms-flex: 0 1 auto;
flex-shrink: 1;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
box-sizing: border-box;
width: 14.28571429%;
width: -webkit-calc(100% / 7);
width: -moz-calc(100% / 7);
width: calc(100% / 7);
text-align: center;
color: #000;
font-size: 15px;
cursor: pointer;
z-index: 20
}
.notifications, .notifications .item-subtitle, .notifications .item-text, .notifications .item-title {
font-size: 14px
}
.picker-calendar-day.picker-calendar-day-next, .picker-calendar-day.picker-calendar-day-prev {
color: #b8b8b8
}
.picker-calendar-day.picker-calendar-day-disabled {
color: #d4d4d4;
cursor: auto
}
.picker-calendar-day.picker-calendar-day-today span {
background: #e3e3e3
}
.picker-calendar-day.picker-calendar-day-selected span {
background: #007aff;
color: #fff
}
.picker-calendar-day.picker-calendar-day-has-events span:after {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
background: #ccc;
position: absolute;
margin-left: -2px;
left: 50%;
bottom: 1px
}
.picker-calendar-day.picker-calendar-day-has-events.picker-calendar-day-selected span:after {
display: none
}
.picker-calendar-day span {
display: inline-block;
border-radius: 100%;
width: 30px;
height: 30px;
line-height: 30px;
position: relative
}
.picker-calendar-month-picker, .picker-calendar-year-picker {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
width: 50%;
max-width: 200px;
-webkit-flex-shrink: 10;
-ms-flex: 0 10 auto;
flex-shrink: 10
}
.picker-calendar-month-picker a.icon-only, .picker-calendar-year-picker a.icon-only {
min-width: 36px
}
.picker-calendar-month-picker span, .picker-calendar-year-picker span {
-webkit-flex-shrink: 1;
-ms-flex: 0 1 auto;
flex-shrink: 1;
position: relative;
overflow: hidden;
text-overflow: ellipsis
}
.picker-calendar.picker-modal-inline .picker-calendar-week-days, .popover .picker-calendar .picker-calendar-week-days {
background: 0 0
}
.picker-calendar.picker-modal-inline .picker-calendar-week-days:after, .picker-calendar.picker-modal-inline .picker-calendar-week-days:before, .picker-calendar.picker-modal-inline .toolbar:after, .picker-calendar.picker-modal-inline .toolbar:before, .popover .picker-calendar .picker-calendar-week-days:after, .popover .picker-calendar .picker-calendar-week-days:before, .popover .picker-calendar .toolbar:after, .popover .picker-calendar .toolbar:before {
display: none
}
.picker-calendar.picker-modal-inline .picker-calendar-week-days~.picker-calendar-months:before, .picker-calendar.picker-modal-inline .toolbar~.picker-modal-inner .picker-calendar-months:before, .popover .picker-calendar .picker-calendar-week-days~.picker-calendar-months:before, .popover .picker-calendar .toolbar~.picker-modal-inner .picker-calendar-months:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: auto;
right: auto;
height: 1px;
width: 100%;
background-color: #c4c4c4;
display: block;
z-index: 15;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0
}
.login-screen-content .list-block ul:after, .login-screen-content .list-block ul:before, .notifications.list-block>ul:after, .notifications.list-block>ul:before {
display: none
}
html.pixel-ratio-2 .picker-calendar.picker-modal-inline .picker-calendar-week-days~.picker-calendar-months:before, html.pixel-ratio-2 .picker-calendar.picker-modal-inline .toolbar~.picker-modal-inner .picker-calendar-months:before, html.pixel-ratio-2 .popover .picker-calendar .picker-calendar-week-days~.picker-calendar-months:before, html.pixel-ratio-2 .popover .picker-calendar .toolbar~.picker-modal-inner .picker-calendar-months:before {
-webkit-transform: scaleY(.5);
transform: scaleY(.5)
}
html.pixel-ratio-3 .picker-calendar.picker-modal-inline .picker-calendar-week-days~.picker-calendar-months:before, html.pixel-ratio-3 .picker-calendar.picker-modal-inline .toolbar~.picker-modal-inner .picker-calendar-months:before, html.pixel-ratio-3 .popover .picker-calendar .picker-calendar-week-days~.picker-calendar-months:before, html.pixel-ratio-3 .popover .picker-calendar .toolbar~.picker-modal-inner .picker-calendar-months:before {
-webkit-transform: scaleY(.33);
transform: scaleY(.33)
}
.notifications {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 20000;
color: #fff;
margin: 0;
border: none;
display: none;
box-sizing: border-box;
overflow: auto;
-webkit-overflow-scrolling: touch;
-webkit-transition-duration: 450ms;
transition-duration: 450ms;
background: rgba(0, 0, 0, .85);
-webkit-perspective: 1200px;
perspective: 1200px
}
.notifications.list-block>ul {
background: 0 0;
margin: 0
}
.with-statusbar-overlay .notifications {
padding-top: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.notifications .item-content {
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start
}
.notifications .item-title {
font-weight: 500
}
html.ios-gt-8 .notifications .item-title {
font-weight: 600
}
.notifications .item-text {
height: auto;
color: #d2d2d2;
line-height: inherit
}
.notifications .item-subtitle, .notifications .item-text {
font-weight: 300
}
.notifications .item-inner:after {
background-color: rgba(255, 255, 255, .2)
}
.notifications .item-media i.icon {
width: 20px;
height: 20px;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat
}
.notifications li.notification-item .item-media {
padding-top: 13px
}
.notifications .close-notification {
width: 19px;
height: 19px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2019%2019'%3E%3Cg%3E%3Cpath%20fill%3D'%23bcbfc4'%20d%3D'M9.5%2C1C14.2%2C1%2C18%2C4.8%2C18%2C9.5S14.2%2C18%2C9.5%2C18S1%2C14.2%2C1%2C9.5S4.8%2C1%2C9.5%2C1%20M9.5%2C0C4.3%2C0%2C0%2C4.3%2C0%2C9.5%20S4.3%2C19%2C9.5%2C19S19%2C14.7%2C19%2C9.5S14.7%2C0%2C9.5%2C0L9.5%2C0z'%2F%3E%3C%2Fg%3E%3Cline%20stroke%3D'%23bcbfc4'%20stroke-miterlimit%3D'10'%20x1%3D'5.2'%20y1%3D'5.2'%20x2%3D'13.8'%20y2%3D'13.8'%2F%3E%3Cline%20stroke%3D'%23bcbfc4'%20stroke-miterlimit%3D'10'%20x1%3D'14.1'%20y1%3D'4.9'%20x2%3D'4.9'%20y2%3D'14.1'%2F%3E%3C%2Fsvg%3E");
background-position: center top;
background-repeat: no-repeat;
-webkit-background-size: 100% auto;
background-size: 100% auto;
position: relative
}
.notifications .close-notification span {
position: absolute;
width: 44px;
height: 44px;
left: 50%;
top: 50%;
margin-left: -22px;
margin-top: -22px
}
.notifications .notification-item {
max-width: 568px;
margin: 0 auto;
-webkit-transition-duration: 450ms;
transition-duration: 450ms;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
.notifications .notification-hidden {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.login-screen-content {
background: #fff
}
.login-screen-content .content-block, .login-screen-content .list-block, .login-screen-content .list-block-label, .login-screen-content .login-screen-title {
max-width: 480px;
margin: 25px auto
}
.login-screen-content .list-block ul {
background: 0 0
}
.login-screen-content .list-block-label {
text-align: center
}
.login-screen-title {
text-align: center;
font-size: 30px
}
.disabled, [disabled] {
opacity: .55;
pointer-events: none
}
.disabled .disabled, .disabled [disabled], [disabled] .disabled, [disabled] [disabled] {
opacity: 1
}
.floating-button {
align-items: center;
background-color: #2196f3;
border-radius: 50%;
bottom: 16px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
color: #fff;
display: flex;
height: 56px;
justify-content: center;
overflow: hidden;
position: absolute;
right: 16px;
transition-duration: 300ms;
width: 56px;
z-index: 1500;
}
html:not(.watch-active-state) .floating-button:active, .floating-button.active-state {
background: #0c82df none repeat scroll 0 0;
}
.floating-button-toolbar, .speed-dial {
bottom: 16px;
position: absolute;
right: 16px;
z-index: 1500;
}
.floating-button-toolbar .floating-button, .speed-dial .floating-button {
bottom: 0;
position: relative;
right: 0;
}
.speed-dial .floating-button i {
left: 50%;
position: absolute;
top: 50%;
transform: translate3d(-50%, -50%, 0px) rotate(0deg) scale(1);
transition-duration: 300ms;
}
.speed-dial .floating-button i+i {
opacity: 0;
transform: translate3d(-50%, -50%, 0px) rotate(-90deg) scale(0.5);
}
.speed-dial.speed-dial-opened .floating-button i {
opacity: 0;
transform: translate3d(-50%, -50%, 0px) rotate(90deg) scale(0.5);
}
.speed-dial.speed-dial-opened .floating-button i+i {
opacity: 1;
transform: translate3d(-50%, -50%, 0px) rotate(0deg) scale(1);
}
.speed-dial-buttons {
-moz-box-direction: reverse;
-moz-box-orient: vertical;
bottom: 100%;
display: flex;
flex-direction: column-reverse;
left: 50%;
margin-bottom: 16px;
margin-left: -20px;
pointer-events: none;
position: absolute;
visibility: hidden;
width: 40px;
}
.speed-dial-buttons a {
align-items: center;
background-color: #2196f3;
border-radius: 50%;
color: #fff;
display: flex;
height: 40px;
justify-content: center;
opacity: 0;
overflow: hidden;
position: relative;
transform: translate3d(0px, 8px, 0px) scale(0.3);
transform-origin: center bottom 0;
transition-duration: 300ms;
width: 40px;
z-index: 1;
}
html:not(.watch-active-state) .speed-dial-buttons a:active, .speed-dial-buttons a.active-state {
background: #0c82df none repeat scroll 0 0;
}
.speed-dial-buttons a+a {
margin-bottom: 16px;
}
.speed-dial-opened .speed-dial-buttons {
pointer-events: auto;
visibility: visible;
}
.speed-dial-opened .speed-dial-buttons a {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
opacity: 1;
transform: translate3d(0px, 0px, 0px) scaleY(1);
}
.speed-dial-opened .speed-dial-buttons a:nth-child(2) {
transition-delay: 50ms;
}
.speed-dial-opened .speed-dial-buttons a:nth-child(3) {
transition-delay: 100ms;
}
.speed-dial-opened .speed-dial-buttons a:nth-child(4) {
transition-delay: 150ms;
}
.speed-dial-opened .speed-dial-buttons a:nth-child(5) {
transition-delay: 200ms;
}
.speed-dial-opened .speed-dial-buttons a:nth-child(6) {
transition-delay: 250ms;
}
.floating-button-to-popover.floating-button-to-popover {
transition-duration: 300ms;
}
.floating-button-to-popover.floating-button-to-popover-in {
transition-duration: 100ms;
}
.floating-button-to-popover.floating-button-to-popover-in i {
opacity: 0;
transition-duration: 100ms;
}
.floating-button-to-popover.floating-button-to-popover-scale {
border-radius: 0;
box-shadow: none;
transition-duration: 300ms;
}
.floating-button-to-popover.floating-button-to-popover-out {
transition-delay: 0ms;
transition-duration: 300ms;
}
.floating-button-to-popover.floating-button-to-popover-out i {
opacity: 1;
transition-delay: 200ms;
transition-duration: 100ms;
}
html.with-ads-overlay .backgroundAnimation {
height: calc(100% - 50px);
}
html.with-ads-overlay .backgroundAnimation .background-image {
height: calc(100% - 50px);
}
html.with-ads-overlay .backgroundAnimation .background-theme {
height: calc(100% - 50px);
}
html.with-ads-overlay .backgroundAnimation .background-overlay {
height: calc(100% - 50px);
}
.tabbar-fixed .floating-button, .tabbar-through .floating-button, .toolbar-fixed .floating-button, .toolbar-through .floating-button {
bottom: 60px;
}
body.with-panel-left-reveal.compress .panel-overlay {
margin-left: 100px
}
body.compress .panel {
width: 100px
}
body.with-panel-left-reveal.compress .views {
-webkit-transform: translate3d(100px, 0, 0);
transform: translate3d(100px, 0, 0)
}
.sa .icon-left-open-2:before {
transform: rotate(183deg);
top: 0 !important;
}
.video-share {
padding: 7px 10px;
background: rgba(0, 0, 0, .4);
color: #fff;
border-radius: 100%;
width: 36px;
height: 36px;
box-sizing: border-box;
position: absolute;
right: 10px;
top: 10px;
font-size: 16px;
z-index: 99;
}
.timeBg {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
background: rgba(0, 0, 0, 0.1);
z-index: 10000;
}
.timeSelector {
height: 170px;
background: #FFF;
border-top: solid 0px #ccc;
border-bottom: solid 0px #ccc;
overflow: hidden;
padding: 10px 0;
position: fixed;
width: 40%;
left: 30%;
top: 50%;
margin: -70px 0 0 0;
z-index: 10001;
}
.timeSelector .swiper-container {
width: 30%;
float: left;
height: 130px;
overflow: hidden;
}
.timeSelector .swiper-container[data-type="type"] {
height: 78px;
position: relative;
top: 26px;
}
.timeSelector ul, .timeSelector ul li {
margin: 0px;
padding: 0px;
list-style: none;
width: 100%;
text-align: center;
font-size: 16px;
font-family:sans-serif;
line-height: 26px;
}
.timeSelector ul li {
opacity: 0.1;
}
.timeSelector ul li.swiper-slide-prev, .timeSelector ul li.swiper-slide-next {
opacity: 0.4;
font-size: 18px;
}
.timeSelector ul li.swiper-slide-active {
font-size: 20px;
opacity: 1;
}
.timeSelector .btns {
float: left;
width: 100%;
clear: both;
padding: 0 0;
line-height: 26px;
position: absolute;
bottom: 0px;
margin: 10px 0 10px 0;
}
.timeSelector .btns a {
margin: 0 10px 0 0;
float: right;
background: #0CF;
padding: 0 15px;
border-radius: 6px;
line-height: 24px;
}
@media only screen and (max-width: 640px) {
.timeSelector {
width: 300px;
left: 50%;
top: 50%;
margin: -70px 0 0 -150px;
}
}
.modalPWA {
position: fixed;
width: 90%;
height: 100%;
overflow: auto;
margin: 0 auto;
position: fixed!important;
left: 50%;
right: 0;
top: 50%;
transform: translate(-50%, -50%);
background: #fff;
min-height: 360px;
max-width: 500px;
height: auto;
max-height: 90%;
padding: 0;
box-sizing: border-box;
border-radius: 8px;
box-shadow: 0 0 10px rgb(0 0 0 / 30%);
z-index: 100;
}
.modalPWA .modal-content {
position: fixed;
bottom: 0;
width: 100%;
height: 100%
}
.modalPWA .close {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 50px;
text-align: center;
line-height: 2;
float: right;
color: inherit;
font-size: 22px;
font-weight: 700;
display: flex;
align-items: center;
padding: 12px;
text-align: center;
font-family: sans-serif;
box-sizing: border-box;
opacity: .8
}
.modalPWA .close:focus, .modalPWA .close:hover {
text-decoration: none;
cursor: pointer;
opacity: 1
}
.modalPWA .modal-header {
padding: 16px;
line-height: normal;
border-bottom: 1px solid #e1e0e0
}
.modalPWA .modal-header h2 {
font-size: 18px;
font-weight: 700
}
.modalPWA a.model-btn {
margin-left: auto;
padding: 0 26px;
border-radius: 66px;
height: 46px;
float: right;
display: flex;
align-items: center;
font-weight: 400;
text-align: center;
transition: .3s;
justify-content: center;
box-sizing: border-box;
background: #25a3e6;
color: #fff;
cursor: pointer
}
.modalPWA .modal-body {
padding: 16px;
max-height: calc(90vh - 100px);
box-sizing: border-box;
margin-bottom: 50px;
overflow: auto
}
.modalPWA .modal-footer {
padding: 10px 16px;
color: #5c5c5c;
position: absolute;
bottom: 0;
width: 100%;
border-top: 1px solid #e1e0e0;
box-sizing: border-box
}
.toast-message {
position: fixed;
right: 0;
bottom: 0;
z-index: 10;
margin: 10px;
}
.toast-message .toast-body {
width: 100%;
}
.toast-message button {
margin: 10px !important;
float: right;
}
/*HOME.CSS BELOW*/
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
color: #000;
font-size: 14px;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
background: #fff;
}
a{
text-decoration: none
}
.app-container {
float: left;
width: 100%;
height: 100%;
overflow: auto;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul li a,
a {
text-decoration: none;
}
.bold {
font-weight: bold;
}
.text-center {
text-align: center
}
.text-left {
text-align: left
}
.text-right {
text-align: right
}
.clearfix::after,
.clearfix::before {
content: "";
display: table;
position: absolute;
}
.app-header .app-header-overlay {
position: fixed;
background: rgba(0, 0, 0, 0.28);
width: 100%;
height: 100%;
top: 0;
right: 0;
z-index: 99;
display: none;
}
.app-header.open {
position: relative;
}
.app-header.open .app-header-overlay {
display: block;
}
.app-header {
width: 100%;
float: left;
position: fixed;
height: 64px;
z-index: 11;
padding: 0;
box-sizing: border-box;
top: 0;
box-shadow: 0px 1px 6px #656565;
margin: 0 0 0 0!important;
}
.app-header.largeHeaderBar .main-header .nav-section,.app-header.xlargeHeaderBar .main-header .nav-section {
font-size: .8em;
}
.app-header .main-container {
height: 64px;
}
.desk-hide {
display: none;
}
.main-container {
max-width: 90%;
margin: 0px auto;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
.main-header .logo {
width: auto;
float: left;
padding: 7px 0;
}
.app-name {
padding: 0px 8px;
display: inline-block;
width: calc(100% - 50px);
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.main-header .logo a {
text-decoration: none;
cursor: pointer;
float: left;
position: relative;
height: 50px;
font-size: 1.3em;
line-height: 2;
min-width: 20px;
}
.home-page .main-header .logo a.page-back {
display: none !important;
}
.main-header .logo a img {
width: 50px;
float: left;
}
.main-header .nav-section {
float: right;
padding-top: 0;
text-align: right;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.main-header .nav-section.mobile-show {
display: none;
}
.main-header .nav-section ul.nav-bar {
width: auto;
float: right;
padding-right: 10px;
position: relative;
line-height: 1em;
margin: 0;
}
.main-header .nav-section ul.nav-bar.nav_length_0 li.dropdown,
.main-header .nav-section ul.nav-bar.nav_length_1 li.dropdown,
.main-header .nav-section ul.nav-bar.nav_length_2 li.dropdown,
.main-header .nav-section ul.nav-bar.nav_length_3 li.dropdown,
.main-header .nav-section ul.nav-bar.nav_length_4 li.dropdown,
.main-header .nav-section ul.nav-bar.nav_length_grater li:nth-of-type(5n){
display: none;
}
.main-header .nav-section ul.nav-bar::before {
content: '';
height: 16px;
width: 1px;
background: red;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
margin-top: 2px;
}
.main-header .nav-section ul.login {
width: 50px;
float: right;
text-align: left;
height: 22px;
top: 50%;
right: 0;
position: relative;
margin: 0 10px 0 20px;
padding: 0;
}
.main-header .nav-section ul.login li.login-user a {
padding: 0;
float: left;
}
.main-header .nav-section ul.login li:last-child a:hover {
border-radius: 0 0 12px 12px
}
.main-header .nav-section ul.login li.login-user a img {
width: 22px;
height: 22px;
border-radius: 100%;
border: 1px solid rgba(0, 0, 0, .1);
}
.main-header .nav-section-mobile .viewCart {
display: none;
}
.main-header .nav-section .viewCart,
.main-header .nav-section-mobile .viewCart {
float: right;
}
.main-header .nav-section .viewCart b,
.main-header .nav-section-mobile .viewCart b {
float: left;
padding: 0 0 0 0px;
font-weight: normal;
position: relative;
width: 0px;
overflow: hidden;
}
.main-header .nav-section .viewCart b::before {
content: " ";
border-left: 1px solid #C90909;
height: 22px;
position: absolute;
left: 0;
top: 3px;
}
.main-header .nav-section .viewCart i,
.main-header .nav-section-mobile .viewCart i {
width: 30px;
float: left;
line-height: 1.2em;
text-align: center;
position: relative;
top: 3px;
margin: 0 0 0 5px;
left: -20px;
}
.main-header .nav-section .viewCart i span,
.main-header .nav-section-mobile .viewCart i span {
width: 20px;
height: 20px;
position: absolute;
right: -10px;
top: -8px;
background: red;
color: #fff;
padding: 0;
line-height: 20px;
font-size: 12px;
font-style: normal;
border-radius: 100%;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
.nav-section ul li {
padding: 0;
position: relative;
display: inline-block;
line-height: 1.2em;
}
.main-header .nav-section ul li.hide {
display: none;
}
.nav-section ul.login li.login-user {
padding: 0px 0 15px;
width: 100%;
text-align: center;
box-sizing: border-box;
}
.nav-section ul.login li.login-user .icon-down-open {
padding: 0 10px;
top: 13px;
cursor: pointer;
right: 0;
transform: translateY(-50%);
position: absolute;
float: left;
font-size: .9em;
line-height: 6px;
}
.nav-section ul li ul.user-profile {
position: absolute;
min-width: 160px;
height: auto;
right: 15px;
top: 37px;
padding: 0;
border-radius: 12px;
border-top-right-radius: 0;
padding: 0px 0;
opacity: 0;
font-size: .8em;
visibility: hidden;
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
}
.login-user:hover .user-profile {
opacity: 1;
visibility: visible;
}
.nav-section ul li .icon-down-open {
position: relative;
top: 1px;
right: -5px;
font-size: .9em;
}
.nav-section ul li ul.user-profile::after {
content: "";
position: absolute;
border-top: 9px solid #f000;
border-right: 13px solid #efefef;
border-left: 13px solid #2f171700;
top: -9px;
right: 0px;
}
.nav-section ul li ul.user-profile li {
line-height: 1.5;
width: 100%;
box-sizing: border-box;
padding: 0;
text-align: left;
float: left;
}
.nav-section ul li ul.user-profile li:first-child::before {
content: '';
border-bottom: 1px solid;
position: absolute;
bottom: 0;
opacity: .5;
left: 13px;
right: 13px;
}
.nav-section ul li ul.user-profile li .name {
padding: 10px 10px !important;
font-weight: bold;
display: block;
}
.nav-section ul li ul.user-profile li a .count {
padding: 6px 2px;
border-radius: 50%;
width: 23px;
display: inline-block;
box-sizing: border-box;
height: 23px;
font-size: 9px;
text-align: center;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
margin-top: 0px;
font-family: 'Roboto', sans-serif;
}
.nav-section ul li ul.user-profile li a {
width: 100%;
margin: 0 0;
padding: 10px 13px !important;
box-sizing: border-box;
max-width: inherit !important;
}
.nav-section ul li a,
.nav-section ul li button.others {
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0px 10px;
max-width: 160px;
display: inline-block;
margin: 0;
vertical-align: middle;
line-height: 1.6;
background: transparent;
border: 0;
color:inherit
}
.nav-section ul li > a:hover{text-shadow: 0.6px 0 0;}
.app-footer .nav-section ul li > a:hover{text-shadow:0; text-decoration: underline}
#router-navs+.app-content {
padding-top: 50px;
}
.app-content {
margin-top: 64px;
/* float: left; */
width: 100%;
}
.app-content .page-content .web-wrap {
margin-top: 10px !important;
}
.page-banner {
position: relative;
line-height: 0;
}
.no-banner .page-banner,
.no-banner .breadcrumb,
.no-banner .app-footer,
.page-content .app-footer {
display: none;
}
.no-banner .page-content .app-footer {
display: block;
}
.page-banner::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
.page-banner .img-text {
position: absolute;
z-index: 1;
left: 0;
right: 0;
text-align: center;
top: 50%;
margin: 0;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
color: #fff;
font-size: 2em
}
.page-banner img {
background-size: cover;
width: 100%;
height: 100%;
background-repeat: no-repeat;
}
.card {
padding: 20px;
margin: 15px 0;
border-radius: 5px;
margin: 15px;
}
.testimonials img {
width: 80px;
border-radius: 50%;
}
.testimonials .details {
width: calc(100% - 110px);
float: right;
margin: 0;
}
/* more categories popup */
.search-box {
float: left;
width: 100%;
padding: 10px;
box-sizing: border-box;
margin-top: 0;
}
.input-search {
min-height: 36px;
width: 100%;
padding: 0 8px;
box-sizing: border-box;
border: none;
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
outline: none;
}
.all-category ul li a {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.search-box .search-pos {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.search-box .search-pos .icon-search-3 {
position: absolute;
right: 2px;
top: 0;
padding: 0 5px;
cursor: pointer;
min-height: 36px;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
}
.app-container.show-popup::before {
content: "";
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
top: 0;
left: 0;
z-index: 11;
}
.category-popup {
max-width: 600px;
margin: 0 auto;
top: 50%;
position: fixed;
transform: translateY(-50%);
left: 0;
right: 0;
background: rgb(190, 185, 185);
padding: 20px;
border-radius: 10px;
box-shadow: 0 1px 10px rgba(0, 0, 0, .04);
max-height: 300px;
z-index: 99;
display: none;
}
.category-popup .other.hide,
.category-popup .other.folder {
display: none;
}
.show-popup .category-popup,
.category-popup .other.folder.on {
display: block;
}
.all-category {
padding: 5px 0px;
overflow-y: auto;
max-height: 11em;
min-height: 11em;
margin: 10px 0;
}
.all-category ul li {
width: 25%;
box-sizing: border-box;
padding: 0;
float: left;
line-height: 2.9em;
}
.all-category ul li.hide {
display: none;
}
.all-category ul li a {
float: left;
width: 100%;
padding: 0 5px;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.search-section .search-pos {
position: relative;
}
.search-section .search-pos .icon-search-3 {
position: absolute;
right: 2px;
top: 0;
padding: 0 5px 0 15px;
border-left: 1px solid #ccc;
}
.search-section .header-title {
width: auto;
float: right;
margin: 0;
padding: 0
}
.header-title {
width: 100%;
float: left;
}
.close {
position: relative;
right: 0;
top: -8px;
display: block;
width: 30px;
height: 30px;
text-align: center;
line-height: 2;
float: right;
font-weight: bold;
font-size: 20px;
background: transparent;
border: 0;
color: inherit;
}
.inline {
display: inline-block;
}
.mt-0 {
margin-top: 0;
}
.pr-15 {
padding-right: 15px;
}
/* footer css */
.app-footer {
margin-top: 0;
position: relative;
z-index: 1;
float: left;
width: 100%;
height: 115px;
overflow: hidden;
}
.social-icon {
padding: 0 15px;
}
.social-icon p {
width: calc(100% - 50%);
float: left;
margin: 8px 0;
}
.social-icon .s-icons {
text-align: right;
width: 50%;
float: right;
margin: 8px 0;
}
.footer-view .logo a img {
width: 30px;
}
.footer-view .s-icons span {
margin-right: 10px;
}
.footer-view .s-icons a{
padding: 0 0px 0 5px;
}
.footer-view .s-icons a span {
font-size: 0;
}
.footer-view .s-icons a.fa:hover {
color: #3b5998
}
.footer-view .s-icons a.tw:hover {
color: #1DA1F2
}
.footer-view .s-icons a.pi:hover {
color: #c8232c
}
.footer-view .s-icons a.bl:hover {
color: #ff5722
}
.footer-view .s-icons a.li:hover {
color: #0077B5
}
.footer-view .s-icons a.in:hover {
color: #C13584
}
.footer-view .s-icons a.yo:hover {
color: #c4302b
}
.footer-view .s-icons a.gp:hover {
color: #CC3333
}
.social-icon {
background: #dedede;
color: #000;
}
.footer-view {
border-bottom: 0px solid;
padding: 10px;
margin-bottom: 0;
overflow: hidden;
}
.footer-view .s-icons {
width: 38%;
float: left;
padding: 0 0 12px;
}
.footer-view .nav-section {
float: right;
padding-top: 0px;
width: 62%;
text-align: right;
}
.no-connect .footer-view .nav-section {
float: none;
width: 100%;
text-align: center;
padding-bottom: 8px;
}
.footer-link {
padding: 9px 0 11px 0;
}
.footer-view .logo {
width: calc(100% - 75%);
float: left;
padding: 5px 0;
}
.footer-view .app-name {
padding: 8px 7px;
}
.footer-view .nav-bar li {
position: relative;
}
.footer-view .nav-bar li::before {
content: '';
height: 14px;
width: 1px;
background: red;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
margin-top: 2px;
opacity: .7;
}
.footer-view .nav-bar li:last-child::before {
display: none;
}
.footer-view .nav-bar li:last-child a {
padding-right: 0;
}
.copyright-text {
font-size: 0.8em;
text-align: center;
opacity: 0.8;
line-height: 1.5;
padding-top: 10px;
max-width: 1024px;
margin: 0 auto;
position: relative;
}
.reseller:not(.showCopyRight) .app-footer {
height: 60px;
}
.reseller .app-footer {
height: 60px;
}
.reseller .copyright-text {
display: none;
}
.copyright-text::before {
content: '';
border-top: 1px solid #ffad30;
position: absolute;
width: 100%;
left: 0;
opacity: 0.5;
top: 0px;
}
.mobile-top {
float: left;
width: 100%;
height: 160px;
}
.login-mobile {
float: left;
width: 100%;
position: relative;
min-height:45px;
}
.login-mobile a.user-link {
float: left;
width: 100%;
padding: 0 10px;
line-height: 50px;
text-align: left;
}
.login-mobile a.user-link img {
width: 32px;
height: 32px;
float: left;
border-radius: 50%;
margin: 9px 0;
}
.login-mobile a.user-link span {
float: left;
line-height: 50px;
margin: 0 0 0 10px;
}
.login-mobile .notification,
.login-mobile .cross {
position: absolute;
right: 50px;
width: 36px;
height: 50px;
top: 0;
line-height: 50px;
text-align: center;
font-size: 24px;
}
.login-mobile .cross {
right: 0;
font-size: 30px;
}
.login-mobile .notification b {
line-height: 20px;
top: 4px !important;
right: -3px !important;
}
.showCopyRight .app-footer,
.showCopyRight:not(.reseller) .app-footer{
height: 100px;
}
.showCopyRight .app-content, .page-view,
.showCopyRight .page-view .page,
.showCopyRight .page-view .page-content,
[data-page="website-page"] .showCopyRight iframe,
.todolist .showCopyRight .page_height {
min-height: calc(100vh - 164px);
}
/* mobile screen css */
@media screen and (max-width: 1100px) and (min-width: 980px) {
.app-header.largeHeaderBar .main-header .nav-section,.app-header.xlargeHeaderBar .main-header .nav-section {
font-size: .7em;
}
}
@media (max-width:979px) {
.main-container {
max-width: 100%;
}
.desk-hide,
.main-header .nav-section-mobile .viewCart {
display: inline-block;
}
.app-name.mob-hide {
display: none;
}
.main-header .nav-section ul li.folder {
font-weight: bold;
}
.main-header .nav-section ul li.folder a {
width: 85%;
}
.main-header .nav-section ul li.folder .dropdown li {
font-weight: normal;
}
.main-header .nav-section ul li.folder .icon-down-open {
position: absolute;
right: 10px;
top: 11px;
cursor: pointer;
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
line-height: 1.5;
transition: 0.3s all;
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
}
.main-header .nav-section ul li.folder .icon-down-open.rotate {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
.main-header .nav-section ul li.folder ul.dropdown {
height: 0;
/* transition: 0.3s all;
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all; */
overflow: hidden;
}
.main-header .nav-section ul li.folder.on ul.dropdown {
height: auto;
padding-left: 20px;
padding-top: 8px;
}
.login-home-section {
width: 100%;
float: left;
}
.login-home-section ul li {
width: 50%;
box-sizing: border-box;
float: left;
}
.main-header .nav-section .login-home-section ul li:first-child {
text-align: left !important;
}
.main-header .nav-section .login-home-section ul li:first-child {
text-align: left;
}
.main-header .nav-section .login-home-section ul li:last-child {
text-align: right;
}
.main-header .nav-section .login-home-section ul li a:hover {
background: none;
}
.login-home-section ul {
border-bottom: 1px solid #ccc;
width: 100%;
float: left;
padding-bottom: 0;
}
a.page-back {
vertical-align: top;
line-height: 2;
padding: 0 10px 0 0;
}
.main-heading{
margin: 0;
width: calc(100% - 200px);
text-align: center;
position: absolute;
top: 50%;
padding: 0;
transform: translateY(-50%);
white-space: nowrap;
/* overflow: hidden; */
text-overflow: ellipsis;
font-size:1.2em;
border: none;
}
.main-heading span.innerHeading{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
float: left;
}
.app-header.open .main-heading {
top: 32px;
}
.main-header .nav-section-mobile {
float: right;
text-align: right;
padding: 0 !important;
top: 50%;
position: absolute;
transform: translateY(-50%);
right: 20px;
}
.main-header .logo {
width: 80px;
position: relative;
}
.main-header .logo a span,
.main-header .logo a img {
top: 50%;
position: absolute;
transform: translateY(-50%);
left: 0;
}
.main-header .logo a span {
padding: 0 10px 0 5px;
}
.main-header .logo a img {
width: 40px;
}
.main-header .nav-section {
display: none;
}
.main-header .nav-section.mobile-show {
padding: 0px;
background: #fff;
width: 300px;
position: fixed;
height: 100%;
right: -300px;
top: 0;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
padding-top: 0;
z-index: 999;
display: none;
transform: inherit;
}
.open .main-header .nav-section.mobile-show {
right: 0;
display: block;
}
.app-header.open {
position: inherit;
}
.main-header .nav-section-mobile span {
position: relative;
z-index: 9;
cursor: pointer;
font-size: 20px;
}
.main-header .nav-section ul li {
display: block;
padding: 5px 0px;
text-align: left;
}
.main-header .nav-section .login .login-user {
width: 100%;
padding-top: 10px;
}
.main-header .nav-section .login .login-user span.cross {
position: absolute;
right: 12px;
top: 25px;
font-size: 30px;
cursor: pointer;
}
.main-header .nav-section ul li a:hover,
.main-header .nav-section ul li button.others:hover {
opacity: 1;
}
.main-header .nav-section ul li a,
.main-header .nav-section ul li button.others {
display: block;
padding: 10px 15px;
opacity: 0.8;
width: 100%;
box-sizing: border-box;
max-width: initial !important;
background: transparent;
border: 0;
}
.main-header .nav-section ul.login li.login-user a {
text-align: left;
max-width: 220px;
padding: 10px 8px;
}
.main-header .nav-section ul.nav-bar,
.main-header .nav-section ul.login {
border: none;
width: 100%;
float: left;
}
.nav-section ul li ul.user-profile {
display: none;
}
.main-header .nav-section ul.login {
position: absolute;
top: 0;
transform: inherit;
border: none;
width: 100%;
float: left;
}
.main-header .nav-section ul.login .login-user:hover {
background: none;
}
.main-header .nav-section ul.login .login-user .icon-down-open {
display: none;
}
.main-header .nav-section ul.login .login-user .name {
padding: 6px 5px;
vertical-align: top;
line-height: 1;
display: inline-block;
width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.main-header .nav-section ul.login .login-user .notification {
vertical-align: top;
padding: 10px 0;
font-size: 20px;
position: absolute;
width: 30px;
top: 15px;
right: 45px;
cursor: pointer;
}
.main-header .nav-section ul.login .login-user .notification b,
.login-mobile .notification b {
position: absolute;
background: #C90909;
border-radius: 100%;
width: 20px;
height: 20px;
text-align: center;
top: 2px;
font-size: 9px;
color: #fff;
right: -6px;
padding: 1px;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.power-by {
width: 100%;
}
.power-by ul li:hover {
background: none !important;
}
.power-by ul li:first-child {
width: 60px;
padding: 0;
}
.power-by ul li:first-child a{
text-overflow: inherit;
}
.power-by ul li:last-child {
width: calc(100% - 70px);
text-align: right;
padding-top: 8px;
}
.power-by ul li:last-child a {
padding-left: 0;
padding-right: 0;
width: auto;
display: inline-block;
}
.power-by ul li {
width: 50%;
float: left;
box-sizing: border-box;
}
.power-by ul li a img {
width: 35px;
}
.main-header .nav-section ul.nav-bar {
height: calc(100% - 220px);
border-bottom: 1px solid #ccc;
overflow-y: auto;
}
.main-header .nav-section ul li.dropdown .sub-dropdown {
padding-left: 15px;
display: none !important;
width: 100%;
box-sizing: border-box;
}
.main-header .nav-section ul li.dropdown:hover .sub-dropdown {
display: block !important;
}
.main-header .nav-section ul li.dropdown:hover {
background: none;
}
.main-header .nav-section ul li.dropdown span {
position: absolute;
right: 15px;
top: 20px;
}
.reseller .app-footer {
height: 70px;
}
.showCopyRight .app-footer, .showCopyRight:not(.reseller) .app-footer{
height: 100px;
}
}
@media (max-width:820px) {
.footer-view .s-icons {
width: 40%;
}
.footer-view .nav-section {
width: 60%;
}
.nav-section ul li a,
.nav-section ul li button.others {
padding: 0 5px;
}
}
@media screen and (max-width: 991px) and (min-width: 768px) {
.footer-view {
font-size: .8em;
}
}
@media (max-width:767px) {
.main-header .nav-section-mobile {
right: 0px;
}
/* footer css */
.social-icon p {
width: 100%;
float: none;
margin: 8px 0;
text-align: center;
}
.social-icon .s-icons {
width: 100%;
float: none;
margin: 8px 0;
text-align: center;
}
.footer-view .logo {
display: none;
}
.footer-view .nav-section,
.footer-view .s-icons {
padding-bottom: 10px;
width: 100%;
text-align: center;
}
.footer-view .s-icons span {
display: inline;
padding-bottom: 10px;
}
.nav-section ul li a,
.nav-section ul li button.others {
padding: 0 5px 0 5px;
}
.footer-view .s-icons span {
margin-right: 2px;
}
.footer-link {
font-size: .7em;
}
.smallHeaderBar .footer-link {
font-size: .8em;
}
.footer-view .nav-bar li::before {
height: 10px;
}
.footer-view {
margin-bottom: 0;
}
.main-heading {
width: calc(100% - 160px);
}
}
@media(max-width: 399px) {
.reseller .app-footer {
height: 80px;
}
.showCopyRight .app-footer,
.showCopyRight.reseller .app-footer{
height: 100px;
}
}
.reseller .power-by ul li:last-child {
display: none;
}
.ios .page-banner, .android .page-banner,
.ios .app-content .breadcrumb, .android .app-content .breadcrumb {
display: none;
}
.app-container.ios,
.app-container.android {
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
/* layout css mobile and tab */
#pp-nav.right{right:calc(5% + 5px)}
.ios #pp-nav.right,.android #pp-nav.right{right:calc(5% + 5px)}
.pp-section{height:100%;position:absolute;width:100%;backface-visibility:hidden}
.pp-easing{-webkit-transition:all 1000ms cubic-bezier(0.550,0.085,0.000,0.990);-moz-transition:all 1000ms cubic-bezier(0.550,0.085,0.000,0.990);-o-transition:all 1000ms cubic-bezier(0.550,0.085,0.000,0.990);transition:all 1000ms cubic-bezier(0.550,0.085,0.000,0.990);-webkit-transition-timing-function:cubic-bezier(0.550,0.085,0.000,0.990);-moz-transition-timing-function:cubic-bezier(0.550,0.085,0.000,0.990);-o-transition-timing-function:cubic-bezier(0.550,0.085,0.000,0.990);transition-timing-function:cubic-bezier(0.550,0.085,0.000,0.990)}
#pp-nav{position:fixed;z-index:100;margin-top:-32px;top:50%;opacity:1}
#pp-nav.left{left:17px}
.pp-tableCell{width:100%;height:100%}
.pp-slidesNav{position:absolute;z-index:4;left:50%;opacity:1}
.pp-slidesNav.bottom{bottom:17px}
.pp-slidesNav.top{top:17px}
#pp-nav ul,.pp-slidesNav ul{margin:0;padding:0}
#pp-nav li,.pp-slidesNav li{display:block;width:14px;height:14px;margin:10px;position:relative}
.pp-slidesNav li{display:inline-block}
#pp-nav li a,.pp-slidesNav li a{display:block;position:relative;z-index:1;width:100%;height:100%;cursor:pointer;text-decoration:none}
#pp-nav li .active span,.pp-slidesNav .active span{background:#333}
#pp-nav span,.pp-slidesNav span{top:2px;left:2px;width:14px;height:14px;border:1px solid #000;background:rgba(0,0,0,0);border-radius:50%;position:absolute;z-index:1}
.pp-tooltip{position:absolute;top:-2px;color:#fff;font-size:14px;font-family: 'Roboto', sans-serif;white-space:nowrap;max-width:220px}
.pp-tooltip.right{right:20px}
.pp-tooltip.left{left:20px}
.pp-scrollable{overflow-y:scroll;height:100%}
.scroll-msg-container{position:fixed;bottom:25px;right:25px;width:22px;z-index:5;height:37px;margin-left:-11px}
.scroll-msg-inner{width:20px;height:35px;position:relative;border-radius:50px;border:2px solid red}
.scroll-msg-wheel{position:absolute;top:10%;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background-color:red;-webkit-animation:mouse-scroll .9s infinite;-moz-animation:mouse-scroll .9s infinite;-o-animation:mouse-scroll .9s infinite;animation:mouse-scroll .9s infinite}
@-webkit-keyframes mouse-scroll {
0%{top:10%;opacity:1}
80%{opacity:1}
100%{top:30%;opacity:0}
}
@-moz-keyframes mouse-scroll {
0%{top:10%;opacity:1}
80%{opacity:1}
100%{top:30%;opacity:0}
}
@-o-keyframes mouse-scroll {
0%{top:10%;opacity:1}
80%{opacity:1}
100%{top:30%;opacity:0}
}
@keyframes mouse-scroll {
0%{top:10%;opacity:1}
80%{opacity:1}
100%{top:30%;opacity:0}
}
.app_navigation_pwaMatrix, .app_navigation_pwaMatrix,
.app_navigation_deskmenu, .app_navigation_pwaColorParallax,
.app_navigation_pwaGrid.variation-pwa-fluid-grid1,
.app_navigation_pwaGridParallax.variation-pwa-grid-parallax,
.app_navigation_pwaGridParallax.variation-pwa-fluid-grid2,
.app_navigation_pwaColorStack.variation-pwa-color-stack2 {
max-width: 90%;
float: none !important;
margin: 0 auto !important;
padding: 10px;
}
.ios .app_navigation_pwaMatrix, .android .app_navigation_pwaMatrix,
.ios .app_navigation_deskmenu, .android .app_navigation_deskmenu,
.ios .app_navigation_pwaColorParallax, .android .app_navigation_pwaColorParallax,
.ios .app_navigation_pwaGrid.variation-pwa-fluid-grid1, .android .app_navigation_pwaGrid.variation-pwa-fluid-grid1,
.ios .app_navigation_pwaGridParallax.variation-pwa-grid-parallax, .android .app_navigation_pwaGridParallax.variation-pwa-grid-parallax,
.ios .app_navigation_pwaGridParallax.variation-pwa-fluid-grid2, .android .app_navigation_pwaGridParallax.variation-pwa-fluid-grid2 {
max-width: 100%;
padding: 0;
box-sizing: border-box;
}
.ios .app_navigation_pwaGrid.variation-pwa-grid2,
.android .app_navigation_pwaGrid.variation-pwa-grid2,
.ios .app_navigation_pwaGrid .desk_navigation_wrap,
.android .app_navigation_pwaGrid .desk_navigation_wrap,
.ios .app_navigation_pwaGrid.variation-pwa-grid2 .desk_navigation_wrap,
.android .app_navigation_pwaGrid.variation-pwa-grid2 .desk_navigation_wrap {
margin: 0 auto;
max-width: 100%;
}
.ios .app_navigation_pwaColorStack.variation-pwa-color-stack2 .desk_navigation_wrap,
.android .app_navigation_pwaColorStack.variation-pwa-color-stack2 .desk_navigation_wrap {
padding: 0;
}
@media (max-width:479px) {
.ios .app_navigation_pwaGrid a.page-link,
.android .app_navigation_pwaGrid a.page-link {
width: 100%;
margin: 0;
padding: 0;
}
.app_navigation_pwaColorParallax a span h3 {
white-space: normal !important;
max-height: 30px;
}
}
.gm-style .gm-style-iw-c{
background-color: #fff !important;
color:#222 !important;
}
.gm-style .gm-style-iw-t::after{
background: linear-gradient(45deg,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%) !important;
}
.android .main-header .nav-section.mobile-show,
.ios .main-header .nav-section.mobile-show {
width: 100%;
}
/*========== Web CSS ==========*/
#navs {
display: none;
}
.navbar.hide-text .center {
visibility: hidden;
}
.bottom-layout.page-show .navbar-inner .back {
display: none;
}
@media only screen and (min-width: 767px) {
#navs {
display: block;
}
.page-view #navs #app_navigation {
display: block;
}
#navs-more .app_navigation_list a img {
width: 42px;
height: 42px;
border-radius:30px;
}
#navs {
float: left;
width: 100%;
position:absolute;
top: 44px;
z-index: 10;
}
.navs-view .page-content {
padding-top: 100px;
}
/*
.view-main.no-navs #navs {
display: none;
}
*/
#navs div {
float: left;
width: 100%;
text-align: center;
}
#navs div a {
float:none;
padding: 0 15px;
width: auto;
display: inline-block;
white-space: nowrap;
border: 0;
}
#navs div a i,
#navs div a img {
display: none;
}
#navs-more {
position:fixed;
right: -320px;
top: 0;
z-index: 10001;
width: 320px;
height: 100%;
overflow: auto;
display: block;
transition: all 0.5s ease;
}
#navs-more.on {
right:0;
}
#navs-more div {
float: left;
min-height: 100%;
width: 100%;
}
#navs-overlay {
left: 0;
top: 0;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 10000;
display: none;
transition: all 0.5s ease;
opacity: 0;
}
#navs-overlay.on {
display: block;
opacity: 1;
}
.page-view[index="0"],
.page-view[index="1"],
.page-view[index="2"],
.page-view[index="3"] {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: none;
}
.desktop a{cursor: pointer;}
.desktop .page-view[index="0"] .back,
.desktop .page-view[index="1"] .back,
.desktop .page-view[index="2"] .back,
.desktop .page-view[index="3"] .back {
display: none;
}
.page-view[index="0"].page-hide,
.page-view[index="1"].page-hide,
.page-view[index="2"].page-hide,
.page-view[index="3"].page-hide {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
transition: none;
}
}
.web-wrap {
width: 100%;
max-width: 90%;
margin: auto !important;
min-height: calc(100% - 60px);
text-align: center;
}
.web-wrap::after {
content: "";
clear: both;
display: table;
}
.ui-datepicker {
z-index: 100000 !important;
}
.time-picker{
max-width: 300px;
height: auto;
border-radius: 15px;
background: #fff;
padding: 20px;
text-align: center;
display: inline-block;
box-sizing: border-box;
position: absolute;
left:50%;
transform: translate(-50%, -50%);
top: 50%;
}
.timecol{
float: left;
width:45px;
height: auto;
margin: 0px 10px;
text-align: center;
padding: 5px 10px;
}
.tarrow-iconup{
float:left;
width:100%;
height: auto;
transform: rotate(180deg);
}
.tarrow-iconup span{ font-size: 20px;}
.tarrow-icon{
float:left;
width:100%;
height: auto;
}
.tarrow-icon span{ font-size: 20px;}
.time-digit{
float:left;
width:100%;
height: auto;
}
.time-pickerwrapper{
position: fixed;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: rgba(19, 18, 18, 0.73);
z-index: 9999;
}
.closebtntime {
position: absolute;
top: 5px;
right: 0px;
z-index: 9999;
width: 40px;
height: 40px;
}
.closebtntime span{
font-size: 20px;
color: #000;
}
#desktop-view {
float: left;
width: 100%;
height: 100%;
overflow-y: hidden;
overflow: hidden;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
#desktop-view footer#app-footer .wrap {
max-width: 1024px;
margin: auto;
width: 100%;
}
#desktop-view aside {
width: 300px;
float: left;
overflow-y: auto;
height: 100%;
position: fixed;
left: -300px;
top: 0px;
z-index: 100010;
transition: all 0.5s ease;
}
#desktop-view .aside-panel {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 100000;
background-color: rgba(0, 0, 0, 0.4);
display: none;
}
#desktop-view .aside-panel.on {
display: block;
}
#desktop-view aside #app_navigation{
float: left;
width: 100%!important;
padding: 0;
margin: 0;
height: auto;
}
#desktop-view aside.on {
left: 0;
}
#app-footer {
display: none;
}
#desktop-view footer .links {
float: left;
line-height: 30px;
}
#desktop-view footer .links a {
float: left;
margin: 0 20px 0 0;
cursor: pointer;
}
#desktop-view footer .social-links {
float:right;
line-height: 30px;
}
#desktop-view footer .social-links a {
float: left;
margin: 0 10px 0 0;
font-size: 18px;
cursor: pointer;
width: auto;
}
#desktop-view #desktop-section {
float: left;
width: 100%;
height: 100%;
margin:0;
}
#desktop-view.navs-view .page-content {
padding: 0;
}
#desktop-view .popup-view.page-navbar .page-content,
#desktop-view .page-view.page-navbar .page-content {
padding-top: 44px;
}
#desktop-view.navs-view .page-view.page-navbar .page-content,
#desktop-view.router-view .page-view.page-navbar .page-content {
padding-top: 94px;
}
#desktop-view.navs-view #desktop-section {
margin: 0;
}
#desktop-view .page-view,
#desktop-view .page {
height: 100%;
position: relative;
overflow: hidden;
}
#desktop-view .page-view {
padding:0;
}
#desktop-view .page-view.page-hide {
display: none;
}
#desktop-navs,
#router-navs {
float: left;
width: 100%;
line-height: 50px;
background: #fff;
text-align: center;
position: fixed;
left: 0;
top: 64px;
z-index: 10;
height:50px;
/* overflow: hidden; */
border-top:solid 1px #ccc;
box-sizing: border-box;
box-shadow: 0px 6px 3px -6px #111;
}
#desktop-navs .wrap-navs,
#router-navs .wrap-navs {
float: left;
position: relative;
left: 50%;
max-width: 1024px;
transform: translateX(-50%);
}
.navs-view #desktop-navs,
.router-view #router-navs {
display: block;
}
#desktop-view.navs-hide #desktop-navs,
#desktop-view.navs-hide #router-navs,
#desktop-view.router-view #desktop-navs,
#desktop-view.navs-view #router-navs {
display: none;
}
#desktop-navs a{
float: left;
overflow: hidden;
width: auto;
height: auto;
padding: 0px;
line-height: 50px;
padding:0 10px;
margin:0;
cursor: pointer;
}
#desktop-navs a span{
float: left;
width: 100%;
line-height: 44px;
padding: 0 15px;
margin: 0px;
border-top:solid 3px rgba(0, 0, 0, 0);
border-bottom:solid 3px rgba(0, 0, 0, 0);
text-align: left;
white-space: nowrap;
box-sizing: border-box;
}
#desktop-view .popup-view.popup-show,
#desktop-view .page-view.page-parent {
position: fixed;
z-index: 100000;
height: 100%;
}
#desktop-view .popup-view.popup-show .navbar {
display: block;
}
#desktop-view .popup-view.popup-show .page {
height: 100%;
}
#desktop-view[data-global='true'] #app-header .desktop-back,
#desktop-view .popup-view.popup-show .page .navbar-inner .right .iconz-option-vertical {
display: none;
}
#desktop-view .popup-view.popup-show .page .navbar-inner .right .iconz-option-vertical.show {
display: block;
}
#desktop-view[data-global='false'] #app-header .icon-menu,
#desktop-view[data-global='false'] #app-header .desktop-menu {
display: none !important;
}
#desktop-navs .wrap-navs-items,
#router-navs .wrap-navs-items {
white-space: nowrap;
line-height: normal;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
#desktop-navs .paddle,
#router-navs .paddle {
position: absolute;
top: 0;
bottom: 0;
font-size: 22px;
padding: 0 !important;
width: 2em !important;
height: 50px !important;
border: 0;
}
#desktop-navs .left-paddle,
#router-navs .left-paddle {
left:0px;
}
#desktop-navs .right-paddle,
#router-navs .right-paddle {
right: 0px;
}
#desktop-navs .wrap-navs-container,
#router-navs .wrap-navs-container{
overflow-x: auto;
margin: 0 2.5em;
overflow: hidden;
}
#desktop-navs .hidden,
#router-navs .hidden {
display: none !important;
}
#desktop-view #desktop-navs a,
#desktop-view #router-navs a {
box-sizing: border-box;
}
#desktop-view .toolbar {
position: relative;
}
#desktop-view .desktop-popup-wrap{padding-top: 44px;}
#desktop-view .popup-view.popup-show .page .backgroundAnimation {
display: block;
}
#desktop-view.navs-hide .page-view.page-navbar .page-content {
padding-top: 44px;
}
.payFooter{background: none !important}
.payment-mode a.BtText, .payment-mode a.paynowbtn {
text-align: center;
width: 92% !important;
float: none !important;
}
.payment-mode .login-feald label{margin-top:20px;}
.payment-mode .tabs .login-feald label {
margin-top: 30px !important;
}
@media only screen and (min-width: 768px){
}
.payFooter{background: none !important}
.payFooter{background: none !important}
.popup-view.images-gallery,
.popup-view.video-gallery {
background: rgba(0, 0, 0, 0.65) !important;
}
/*Navigation CSS*/
.pwa-navigation{height: auto;
position: relative;
padding: 0;
margin: 0;
width:90%;
max-width: 980px;
left: 50%;
transform: translateX(-50%);}
.pwa-navigation .swiper-button-next, .pwa-navigation .swiper-container-rtl .swiper-button-prev {
right: -35px;
}
.pwa-navigation .swiper-button-prev,.pwa-navigation .swiper-container-rtl .swiper-button-next{ left: -35px;}
.pwa-navigation .swiper-slide{background:none; padding: 0 10px;}
.pwa-navigation a.nextSlide{position: absolute; right:-32px; top: 0; font-size: 25px;}
.pwa-navigation a.prevSlide{position: absolute;
left: -30px;
top: 0;
font-size: 25px;}
.pwa-navigation .swiper-wrapper {
display: inline-flex;
text-align: center;
margin: 0px auto;
width: auto;
height: auto;
max-width: 100%;
}
input[type="search"]{appearance: none}
@media only screen and (min-width:1020px) {
.pwa-navigation{transform: translateX(-51%);}
}
@media only screen and (max-width: 767px) {
#desktop-view footer .links a {
float: none;
display: inherit;
}
.web-wrap {
min-height: calc(100% - 90px);
padding: 0 6px;
box-sizing: border-box;
}
#desktop-view footer .links {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
}
#desktop-view footer .social-links {
float: left;
line-height: 30px;
padding: 10px 20px 0;
}
.payment-mode a.BtText, .payment-mode a.paynowbtn {
text-align: center;
width: 100% !important;
}
.payment-mode .cvv{
top: 30px;
}
.payment-mode .tabs .login-feald label {
margin-top: 30px !important;
}
.payment-mode .tabs .login-feald label.save-card {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.payment-mode .expiry-date input, .payment-mode .expiry-date select {
font-size: 25px !important;
}
}
.page-view .payment-mode .listing-tabs {
border-radius: 4px;
box-sizing: border-box;
overflow: hidden;
padding: 0;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom:none;
display:flex;
display: -webkit-flex;
position: relative;
top: 0px !important;
float: left;
width: 100%;
}
.payment-mode .listing-tabs a {
width:100%;
float: left;
margin: 0 0px 0 0;
text-align: center;
border-radius:0px 0 0;
line-height: 22px;
border: solid 0px #5DD5EB;
box-sizing: border-box;
position: relative;
top: 0px;
color: #333;
font-weight: bold;
background-color: #fff;
font-size:12px;
padding: 8px 0;
}
.payment-mode .listing-tabs a.active {
background-color:#09ac92;
border-bottom: solid 0px #5DD5EB;
color:#fff;
}
.payment-mode .listing-tabs a i {
display: inline-block;
margin-top: 5px;
width: 100%;
}
.page-view .payment-mode.fullsize .listing-tabs,
.page-view .payment-mode.fullsize .tabs-animated-wrap {
width: 100% !important;
}
.desktop .pay_rect_wrap.payment-mode {text-align: left;}
.desktop .pay_rect_wrap.payment-mode .payment-nav {
overflow-x: auto;
border: 1px solid rgba(0,0,0,.1);
}
.desktop .pay_rect_wrap .btn_center{margin: 0px auto; display: table !important;}
.desktop .pay_rect_wrap.payment-mode .payment-nav > a,
.desktop .pay_rect_wrap.payment-mode .payment-nav .swiper-container .swiper-wrapper > a.swiper-slide {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding:10px 20px 10px 10px;
transition: 0.3s;
font-size: 26px;
text-decoration: none;
line-height: normal;
border-right:1px solid rgba(0,0,0,.08);
border-bottom: 5px solid rgba(0,0,0,.1);
margin: 0;
line-height: 22px;
height: auto;
white-space: normal;
width: auto;
max-width: 200px;
min-width: 130px;
}
.desktop .pay_rect_wrap.payment-mode .payment-nav .swiper-button-next,
.desktop .pay_rect_wrap.payment-mode .payment-nav .swiper-button-prev {
background-image: none;
font-size: 35px;
background: rgba(194,194,194,0.63);
text-align: center;
line-height: 42px;
}
.desktop .pay_rect_wrap.payment-mode .payment-nav .swiper-button-next {
right: 0;
}
.desktop .pay_rect_wrap.payment-mode .payment-nav .swiper-button-prev {
left: 0;
}
.desktop .pay_rect_wrap .tabs-animated-wrap {
position: relative;
width: 100%;
overflow: hidden;
height: 100%;
padding:15px;
border: 1px solid rgba(0,0,0,.1);
box-sizing: border-box;
}
.desktop .pay_rect_wrap.payment-mode .tabs {
margin: 0;
padding: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid rgba(0,0,0,.1);
}
.desktop .pay_rect_wrap.payment-mode .tabs p {
margin: 0 0 12px 0;
float: left;
width: 100%;
background:rgba(0,0,0,.1);
padding: 15px 20px;
margin: -20px -15px 20px -20px;
text-align: left;
font-weight: bold;
}
.desktop .pay_rect_wrap .tablinks.appyicon-payu-money {
font-size: 36px;
line-height: 26px;
}
.desktop .pay_rect_wrap .tabcontent {
padding: 20px;
border: 1px solid rgba(0,0,0,.1);
border-top: none;
}
.desktop .pay_rect_wrap .pay_rect_wrap {
margin: 0;
padding: 0
}
.desktop .pay_rect_wrap .pay_rect_left {
width: 320px;
margin-right: 20px;
float: left;
}
.desktop .pay_rect_wrap .pay_react_right {
overflow: hidden;
}
.desktop .pay_rect_wrap label {
margin-bottom: 0;
width: 120px;
float: left;
padding: 14px 0;
text-align: left;
}
.desktop .pay_rect_wrap input[type="text"],
.desktop .pay_rect_wrap input[type="password"],.desktop .pay_rect_wrap input,.desktop .pay_rect_wrap select,.desktop .pay_rect_wrap textarea {
width: 350px;
height: 46px;
padding-right: 16px;
padding-left: 16px;
border: 1px solid rgba(0,0,0,.1);
border-radius: 0px;
outline: none;
box-sizing: border-box;
float: left;
max-width: 100%;
}
.desktop .pay_rect_wrap textarea{min-height: 100px;}
.desktop .pay_rect_wrap input[type='number']{ appearance: textfield;}
.desktop .pay_rect_wrap input[type='number']::-webkit-inner-spin-button,
.desktop .pay_rect_wrap input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
.desktop .pay_rect_wrap .pay_panel {
border: 1px solid rgba(0,0,0,.1);
margin: 0;
}
.desktop .pay_rect_wrap .pay_panel_content {
padding: 20px;
display: inline-block;
width: 100%;
box-sizing: border-box;
margin: 0;
list-style: none;
}
.desktop .pay_rect_wrap .pay_panel_content li {
padding-bottom: 13px;
margin-bottom: 13px;
border-bottom: 1px solid rgba(0,0,0,.1);
text-align: right;
}
.desktop .pay_rect_wrap .pay_panel_content li:first-child{margin: 0 0 12px 0;
float: left;
width: 100%;
background: rgba(0,0,0,.1);
padding: 15px 20px;
margin: -20px -15px 20px -20px;
text-align: left;
font-weight: bold;
text-align: right; }
.desktop .pay_rect_wrap .pay_panel_content li:last-child{margin: 0; border: 0; padding: 0;}
.desktop .pay_rect_wrap .pay_panel_content li>span {
float: left;
text-align: left;
}
.desktop .pay_rect_wrap .grand_total {
font-weight: bold;
text-align: right;
}
.desktop .pay_rect_wrap .grand_total span {
text-align: left;
float: left;
}
.desktop .pay_rect_wrap .pay_panel_content li.grand_total {
margin-bottom: 0px;
padding-bottom: 0px;
border: 0px;
}
.desktop .pay_rect_wrap .pay_panel_title {
background:rgba(0,0,0,.1);
padding: 15px 20px;
}
.desktop .pay_rect_wrap .form_row {
margin-bottom: 10px;
width: 100%;
float: left;
}
.desktop .pay_rect_wrap .form_row:last-child {
margin-bottom: 0;
}
.desktop .pay_rect_wrap .multiple_input {
overflow: hidden;
}
.desktop .pay_rect_wrap .form_month {
max-width: 95px !important;
text-align: center;
margin-right: 10px;
}
.desktop .pay_rect_wrap .form_year {
max-width: 95px !important;
text-align: center;
margin-right: 10px;
}
.desktop .pay_rect_wrap .form_cvv {
max-width: 140px !important;
text-align: left;
margin-right: 10px;
}
.desktop .pay_rect_wrap .cvv_info {
font-size: 12px;
color: #3a90cf;
float: left;
padding: 7px 0;
text-align: left;
}
.desktop .payment-mode input#issavecardcheck {
height: auto;
padding: 0;
position: relative;
top: 0px;
margin-right: 8px;
}
.desktop .pay_rect_wrap .cvv_info span {
display: block;
margin-bottom: 2px;
font-weight: bolder;
}
.desktop .pay_rect_wrap .cvv_info {
color: inherit;
}
.desktop .pay_rect_wrap .tabs .active{overflow: inherit !important;}
.desktop .pay_rect_wrap .react_pay_btn {
width: 150px;
cursor: pointer;
transition: all .2s ease-in-out;
letter-spacing: 1px;
border: none;
border-radius: 100px;
color: #fff;
background: #22a86d;
display: inline-block;
text-align: center;
padding: 16px;
text-decoration: none;
font-weight: bold;
border: 0px;
}
.desktop .pay_rect_wrap .mobile-show {
padding-bottom: 20px;
}
.desktop .pay_rect_wrap .react_pay_btn:hover,.desktop .pay_rect_wrap .react_pay_btn:active,.desktop .pay_rect_wrap .react_pay_btn:focus {
transform: scale(1.1);
border: 0px !important;
}
.desktop .pay_rect_wrap .m-t-20 {
margin-top: 20px;
}
.desktop .cardStorage .cardRow .icons{float: left;
width: auto;
}
.desktop .cardStorage .cardRow .text{float: left;
width: auto; margin-top: 5px;
margin-right: 10px;}
.desktop #savecardcheck{width: auto;
height: auto;}
.desktop .cardStorage {
margin: 0 0 40px 0;
}
.desktop .cardStorage .cardRow b{border-radius: 0px !important;}
.desktop .cardStorage .cardRow .delete {
right: 0px;
top: 0px;
line-height: 25px;
height: 25px;
width: 25px;
border-radius: 0;
}
@media only screen and (max-width:940px) {
.desktop .pay_rect_wrap.payment-mode .tabs p {
margin: -20px -15px 20px -20px;
}
.desktop .pay_rect_wrap label {
width: 100%;
padding: 14px 0 5px 0;
}
.desktop .pay_rect_wrap .form_cvv {
max-width: 102px !important;
margin-right: 0;
}
.desktop .pay_rect_wrap .cvv_info {
padding: 7px 0 0px 0;
}
.desktop .pay_rect_wrap label:empty{display: none;}
.desktop .pay_rect_wrap .multiple_input {
overflow: inherit;
}
}
@media only screen and (max-width:850px) {
.desktop .pay_rect_wrap .pay_rect_left {
width: 100%;
}
.desktop .pay_rect_wrap .pay_react_right {
overflow: inherit;
margin-top:0px;
float: left;
width: 100%;
margin-bottom: 50px;
}
.desktop .pay_rect_wrap .tabs-animated-wrap {
padding: 0;
}
.desktop .pay_rect_wrap.payment-mode .tabs {
float: left;
}
}
@media only screen and (max-width: 480px) {
.payment-mode .cvv p{
width:48% !important;
}
}
.mobile #tabvolecity #expairyMonth{ padding-left: 20px;}
#appyjump-ads,
#appyjump-ads #bg-link {
width: 100%;
height: 100%;
float: left;
position: fixed;
left: 0;
top:0;
z-index: 100001;
background: rgba(0, 0, 0, 0.5);
}
#appyjump-ads #ads-js {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: fixed;
}
#appyjump-ads #bg-link {
background: rgba(0, 0, 0, 0);
}
#appyjump-ads iframe,
#appyjump-ads #main-link {
border: 0;
float: left;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
#appyjump-ads #bg-link {
position: absolute;
z-index: 1;
}
#appyjump-ads span {
position: absolute;
right: 10px;
top: 10px;
background: #fff;
z-index: 3;
width: 30px;
height: 30px;
border-radius:15px;
color: #000000;
line-height: 30px;
text-align: center;
cursor: pointer;
}
#cookies {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgba(0,0,0,0.8);
background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1));
color: #fff;
z-index: 100000;
display: none;
}
#cookies p {
padding: 15px;
margin: 0;
float: left;
width: calc(100% - 150px);
box-sizing: border-box;
}
#cookies p a {
text-decoration: underline;
cursor: pointer;
}
#cookies a.cookies-btn {
float: left;
background: #fff;
border: solid 0px #ccc;
width: 120px;
text-align: center;
line-height: 36px;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
box-sizing: border-box;
}
@media only screen and (max-width: 480px) {
#cookies {
padding: 0 0 50px 0;
}
#cookies p {
width: 100%;
}
#cookies a.cookies-btn {
left: 50%;
transform: translate(0,0);
bottom: 15px;
margin-left: -63px;
top: auto;
}
}
select option{color: #000;}
.datepicker-button {
float:left;
position:relative;
}
.datepicker-button span.button {
line-height:30px;
border:solid 1px #ccc;
float:left;
padding:0 10px;
}
.multidatepicker-wrap {
float: left;
margin: 0 0 30px 0;
position:absolute;
padding: 8px;
box-shadow: 0 0 5px #ccc;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
left:1px;
top:33px;
background: #fff;
display: none;
}
.multidatepicker-wrap.datepicker-show {
display:block;
}
.multidatepicker-wrap .ui-datepicker {
border: 0;
}
.multidatepicker-wrap .top,
.multidatepicker-wrap .bottom {
float:left;
width:100%;
height:0px;
position:relative;
z-index:1;
}
.multidatepicker-wrap .bottom {
margin: 5px 0 0 0;
height: auto;
}
.multidatepicker-wrap .datepicker-prev,
.multidatepicker-wrap .datepicker-next,
.multidatepicker-wrap .datepicker-cancel,
.multidatepicker-wrap .datepicker-done {
float:left;
padding:5px;
background:#ccc;
cursor:pointer;
}
.multidatepicker-wrap .datepicker-next,
.multidatepicker-wrap .datepicker-done {
float:right;
}
.multidatepicker-wrap .ui-datepicker-next,
.multidatepicker-wrap .ui-datepicker-prev {
display:none;
}
.multidatepicker-wrap .ui-datepicker td[data-on='on'] a {
border: 1px solid #003eff;
background: #007fff;
font-weight: normal;
color: #ffffff;
opacity:0.5;
}
.multidatepicker-wrap #datepicker .ui-datepicker td[data-on='on'].on a,
.multidatepicker-wrap #datepicker .ui-datepicker td[data-on='on'].on a {
opacity:1;
}
.desktop .page-menu .menu-clickable-area,
.desktop .slide-popup .menu-clickable-area {
width: 100%;
height: 100%;
float: left;
position: fixed;
left: 0;
top: 0;
z-index: 1;
}
.desktop .page-menu {
background: rgba(0, 0, 0, 0.4) !important;
}
.desktop .page-menu .popup-show {
width: 100%;
max-width: 320px;
transform: translate3d(-100%, 0, 0);
transition: all 0.5s ease;
}
.desktop .page-menu.on .popup-show {
transform: translate3d(0, 0, 0);
z-index: 2;
position: relative;
}
.desktop .slide-popup {
background: rgba(0, 0, 0, 0.4) !important;
transition: all 0s ease;
}
.desktop .slide-popup-show {
width: 30%;
min-width: 300px;
float:right;
transform: translate(100%, 0);
z-index: 2;
transition: all 0.5s ease;
position: relative;
height: 100%;
}
.desktop .slide-popup.on .slide-popup-show {
transform: translate(0, 0);
}
#desktop-view .popup-view.slide-popup .page-content {
width: 100%;
padding: 0;
box-sizing: border-box;
float: left;
height: 100%;
overflow-y: auto;
margin: 0;
}
#desktop-view .popup-view.slide-popup .navbar {
display: none;
}
.desktop .slide-popup .page-content h1 {
width: 100%;
float: left;
line-height: 50px;
margin: 0;
padding: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding: 0 50px;
box-sizing: border-box;
position: relative;
z-index: 1;
}
.desktop .slide-popup .page-content h1 a {
position: absolute;
left: 0;
top: 0;
text-align: center;
line-height: 50px;
width: 50px;
color: inherit;
}
.desktop .hide-items .common-list {
display: none;
}
#color-palette {
width: 100%;
float: left;
position: fixed;
left: 0;
top: -92px;
padding: 15px;
background: #fff;
box-sizing: border-box;
transition: all 0.5s ease;
z-index: 10000;
}
.mobile #color-palette {
display: none;
}
#color-palette.open {
top: 0;
}
#color-palette div {
width: 50px;
height: 60px;
margin: 0 1%;
float: left;
border: solid 1px #ccc;
}
#color-palette div span {
height: 20%;
float: left;
width: 100%;
}
#color-palette a {
position: absolute;
bottom: -40px;
color: #000;
right: 100px;
width: 100px;
line-height: 30px;
text-align: center;
line-height: 40px;
border-radius: 0 0 10px 10px;
background-color: #edf7ed;
}
.app-banner {
width:100%;
height:100px;
background:transparent;
position:fixed;
left:0;
top:0;
font-family: 'Roboto', sans-serif;
font-size: 12px;
line-height: 1.2em;
overflow:hidden;
background:#fff;
border-bottom:solid 1px #ccc;
border-top:solid 5px #549f42;
z-index: 10000;
color: #131313;
}
.app-banner .app-banner-title {
font-weight:bold;
font-size:14px;
line-height: 1.3em;
}
.app-banner .app-banner-close {
position:absolute;
left:0;
top:0;
width:30px;
height:30px;
text-align:center;
line-height:30px;
font-size:16px;
}
.app-banner .app-banner-icon {
width:70px;
height:70px;
float:left;
background-repeat:no-repeat;
background-position:center center;
background-size:70px 70px;
position:absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.app-banner .app-banner-container {
float:left;
width:100%;
height:100%;
overflow:hidden;
position:relative;
padding: 10px 100px 10px 90px;
box-sizing: border-box;
}
.app-banner .app-banner-button {
position: absolute;
right: 10px;
top: 40px;
font-size: 12px;
text-decoration: none;
background: #549f42;
color: #fff;
text-transform: uppercase;
border-radius: 5px;
width: 60px;
height: 30px;
padding: 0;
text-align: center;
line-height: 30px;
}
.app-banner-android .app-banner-close {
position: absolute;
left:auto;
top: 0;
width: 50px;
height: 40px;
text-align: center;
line-height: 40px;
z-index: 1;
font-size: 26px;
right: 0;
color: #000;
}
.app-banner-ios {
background: #f3f3f3;
border-top:solid 0 #549f42;
}
.app-banner-ios .app-banner-title {
color: #000000;
}
.app-banner-ios .app-banner-button {
top: 35px;
background: #006fff;
color: #ffffff;
text-transform: capitalize;
font-size: 12px;
width: 60px;
height: 30px;
line-height: 30px;
}
.app-banner-ios .app-banner-container {
padding: 10px 80px 10px 110px;
}
.app-banner-ios .app-banner-close {
position: absolute;
left: 0;
top: 27px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 32px;
color: #333;
z-index: 10;
}
.app-banner-ios .app-banner-icon {
width: 60px;
height: 60px;
background-size:60px 60px;
left: 40px;
}
.modal.web-model {
width: 600px;
max-width: 100%;
margin: 0;
transform: translateX(-50%);
transition-duration: inherit;
}
.modal.web-model .modal-inner{padding: 0;}
.modal.web-model .modal-title {
font-size: 20px;
text-align: center;
padding: 15px 25px;
border-bottom: 1px solid #ccc;
text-align: left;
}
.modal.web-model .modal-buttons.modal-buttons-vertical {
position: absolute;
top: 0;
right: 0;
padding: 9px 15px 7px 15px;
}
.modal.web-model .modal-button{color: #a5a5a5 !important; background: transparent !important}
.tooltip-web {
position: relative;
display: inline-block;
}
.tooltip-web .tooltiptext {
visibility: hidden;
width: 250px;
background-color: #fff;
color: #000;
text-align: center;
border-radius: 6px;
padding: 10px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
box-shadow: 3px 4px 4px 0px rgba(0,0,0,.2);
border-radius: 10px;
border: 1px solid rgba(0,0,0,.1);
border-top-right-radius: 0;
font-weight: normal;
text-align: left;
}
.tooltip-web:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.tooltip-web .tooltip-left {
top: -5px;
bottom: auto;
right: 100%;
left: inherit;
}
.tooltip-web .tooltip-bottom {
top: 100%;
right: 0;
margin-right: 0;
left: inherit;
float: left;
bottom: inherit;
}
.zopim-chat-container {
position: fixed;
right: 23px;
bottom: 15px;
z-index: 100000;
color: #ffffff;
background: #108ec9;
border-radius: 4px;
display: none;
}
.zopim-chat-container .zopim-chat {
padding: 10px 15px;
box-sizing: border-box;
height: 36px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
overflow: hidden;
cursor: pointer;
}
.zopim-chat-container i.iconz-chat {
vertical-align: text-top;
text-align: center;
padding: 10px;
width: 40px;
background: #0081bb;
position: relative;
top: -3px;
left: -15px;
}
.zopim-close.icon-cancel {
position: absolute;
right: -8px;
top: -8px;
background: #fff;
padding:2px 0px;
color: #333;
border-radius: 100%;
height: 20px;
width: 20px;
box-sizing: border-box;
text-align: center;
line-height: normal;
border: 1px solid #0081bb;
cursor: pointer;
}
/* iframe#launcher {
display: none;
} */
.toastNotification {
visibility: hidden;
max-width: 350px;
min-width: 300px;
background-color: #333;
color: #fff;
text-align: left;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 9999999 !important;
right: 0;
bottom: 30px;
font-size: 12px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
opacity: 0;
}
.toastNotification.show-notif {
opacity: 1;
visibility: visible;
-webkit-animation: toastfadein 0.5s, toastfadeout 0.5s 2.5s;
animation: toastfadein 0.5s, toastfadeout 0.5s 2.5s;
}
@-webkit-keyframes toastfadein {
from {right: 0; opacity: 0;}
to {right: 0px; opacity: 1;}
}
@keyframes toastfadein {
from {right: 0; opacity: 0;}
to {right: 0px; opacity: 1;}
}
@-webkit-keyframes toastfadeout {
from {right: 0px; opacity: 1;}
to {right: 0px; opacity: 0;}
}
@keyframes toastfadeout {
from {right: 0px; opacity: 1;}
to {right: 0px; opacity: 0;}
}
.toastNotification .circle-inner {
position: absolute;
border-right: 1px solid #888;
margin-right: 10px;
border: 1px solid #fff;
border-radius: 50%;
width: 30px;
height: 30px;
text-align: center;
vertical-align: middle;
background: #656565;
line-height: 30px;
float: left;
top: 50%;
transform: translateY(-50%);
}
.toastNotification .circle-innerText{overflow: hidden;
display: block;
padding: 10px 0 10px 45px;
}
.toastNotification .success-text {
border-right: 1px solid #fff;
padding-right: 8px;
margin-right: 8px;
font-weight: bold;
}
.desktop .coupondirectory .canvas,
.desktop .coupon .canvas {
cursor: url('https://media.mediadirhub.com/images/coin.png'), auto;
}
.alt-text {
position: fixed;
left: 0;
top: 0;
padding: 5px 10px;
background: #ececec;
color: #000;
z-index: 100000;
white-space: nowrap;
font-size: 12px;
overflow: hidden;
float: left;
border: solid 1px #000;
border-radius: 5px;
}
.alt-text {
position: fixed;
left: 0;
top: 0;
padding: 5px 10px;
background: #ececec;
color: #000;
z-index: 100000;
white-space: nowrap;
font-size: 12px;
overflow: hidden;
float: left;
border: solid 1px #000;
border-radius: 5px;
}
.alt-text.android,
.alt-text.ios {
display: none !important;
}
.page-preloader,
.temp-preloader,
.progress-preloader {
width: 100%;
height: 100%;
float: left;
position: fixed;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 100000;
display: none;
}
.page-preloader img,
.temp-preloader img {
width: 60px !important;
height: 60px !important;
background: #FFF;
background-size: 80px;
position: absolute;
left: 50%;
top: 50%;
border-radius: 10px;
transform: translate(-50%,-50%) !important;
}
.temp-preloader {
display: block;
}
.app-preloader {
transition: all 0.5s ease;
opacity: 1;
display: block;
}
.app-preloader img {
width: 140px !important;
height: 140px !important;
background:none;
position: absolute;
left: 50%;
top: 50%;
border-radius: 5px;
margin: -70px 0 0 -70px;
}
.app-preloader span {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
font-family: 'Roboto', sans-serif;
text-align: center;
line-height: 40px;
font-size: 16px;
margin: 40px 0 0 0;
}
.app-preloader b {
font-weight: normal;
display: inline-block;
padding: 0 3px;
position: relative;
width: 134px;
}
.app-preloader .loader {
height: 4px;
width: 100%;
position: absolute;
overflow: hidden;
background-color:#fff;
height: 2px;
line-height: 2px;
margin: 25px 0 0 0
}
.app-preloader .loader:before{
display: block;
position: absolute;
content: "";
left: -200px;
width: 200px;
height: 2px;
background-color: #2980b9;
animation: loading 2s linear infinite;
}
@keyframes loading {
from {left: -200px; width: 30%;}
50% {width: 30%;}
70% {width: 70%;}
80% { left: 50%;}
95% {left: 120%;}
to {left: 100%;}
}
.app-preloader.hide {
opacity: 0;
}
div[data-page="webview-page"] .webview-wrap {
width: 100%;
max-width: 1000px;
margin: auto;
height: calc(100vh - 164px);
}
div[data-page="webview-page"] .webview-wrap iframe {
width: 100%;
height: 100%;
float: left;
border: 0;
margin: 0;
}
#__next {
width: 100%;
height: 100%;
position: relative;
float: left;
overflow: hidden;
}
.navbar:not(.sub-header),
.backgroundAnimation {
display: none;
}
.page-view,
.page-view .page,
.page-view .page-content {
float: left;
width: 100%;
}
.app-content,
.page-view,
.page-view .page,
.page-view .page-content,
[data-page="website-page"] iframe,
.todolist .page_height {
min-height: calc(100vh - 164px);
}
.app_navigation_pwaFlatParallax,
.app_navigation_pwaColorParallax,
.app_navigation_pwaGridParallax.variation-pwa-grid-parallax {
height: calc(100vh - 124px) !important;
}
@media screen and ( max-height: 600px ) {
.app_navigation_pwaFlatParallax{
height: calc(100vh) !important;
}
.app_navigation_pwaFlatParallax a span span.content-inside {
top: calc(50% + 55px)
}
}
.reseller:not(.showCopyRight) .app-content,
.reseller:not(.showCopyRight) .page-view,
.reseller:not(.showCopyRight) .page-view .page,
.reseller:not(.showCopyRight) .page-view .page-content,
.reseller:not(.showCopyRight) [data-page="website-page"] iframe,
.todolist .page_height ,.app_navigation_deskmenu{
min-height: calc(100vh - 124px);
}
.app_navigation_pwaColorParallax a.page-link {
height: 100% !important;
}
/* .app_navigation_pwaGrid.variation-pwa-fluid-grid1 a.page-link.item-1, .app_navigation_pwaGrid.variation-pwa-fluid-grid1 a.page-link.item-2 {
height: calc(33vh - 10px) !important;
} */
.flashcard .page-content,
.audio .page-content {
height: calc(100vh - 164px);
}
.popup-view.not-routing .navbar,
.popup-view.not-routing .backgroundAnimation,
.page-view.not-routing .navbar,
.page-view.not-routing .backgroundAnimation {
display: block;
}
.popup-view.not-routing ,
.page-view.not-routing {
position: fixed;
left: 0;
top: 0;
float: left;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 100;
}
.popup-view.not-routing .page,
.page-view.not-routing .page {
float: left;
width: 100%;
height: 100%;
overflow: hidden;
}
.popup-view.not-routing .page-content,
.page-view.not-routing .page-content {
width: 100%;
float: left;
height: 100%;
overflow: auto;
}
.popup-view.not-routing.page-navbar .page-content,
.page-view.not-routing.page-navbar .page-content {
padding-top: 44px;
}
.signup.popup-view.not-routing {
background: rgba(0, 0, 0, 0.6) !important;
}
@media (max-width:767px) {
.popup-view.not-routing.page-navbar .page-content,
.page-view.not-routing.page-navbar .page-content {
padding-top: 44px;
}
.app_navigation_pwaGrid.variation-pwa-fluid-grid1 a.page-link.item-1,
.app_navigation_pwaGrid.variation-pwa-fluid-grid1 a.page-link.item-2 {
height: auto !important;
}
}
/* Timeselector css */
.timeSelector {
height: 245px;
background: #FFF;
border-top: solid 0px #ccc;
border-bottom: solid 0px #ccc;
overflow: hidden;
padding: 0 0 10px;
position: fixed;
width: 100%;
left: 50%;
top: 50%;
z-index: 10001;
max-width: 300px;
transform: translate(-50%,-50%);
border-radius: 20px;
margin: 0
}
.timeSelector .swiper-container {
width:80px;
float:left;
height:120px;
overflow:hidden;
margin: 0;
}
.timeSelector .swiper-container[data-type="type"]{
height:78px;
position:relative;
top:26px;
}
.timeSelector ul,
.timeSelector ul li{
margin:0px;
padding:0px;
list-style:none;
width:100%;
text-align:center;
font-size:16px;
font-family: 'Roboto', sans-serif;
line-height:40px;
}
.timeSelector ul li {
opacity:0.1;
}
.timeSelector ul li.swiper-slide-prev,
.timeSelector ul li.swiper-slide-next {
opacity:0.4;
font-size:18px;
}
.timeSelector ul li.swiper-slide-active {
font-size:24px;
opacity:1;
}
.timeSelector .btns {
float:left;
width:100%;
clear:both;
padding:0 0;
line-height:26px;
position:absolute;
bottom:0px;
margin:10px 0 10px 0;
text-align: center;
}
.timeSelector .btns a {
margin: 0 15px 0 0;
background: #0CF;
padding: 0 15px;
border-radius: 6px;
border-radius: 4px;
padding: 5px 15px;
display: inline-block;
}
.formbuilder .uploadImage-1{width: auto;display: inline-block;}
.formbuilder .uploadImage-0 .uploadImage_container{display:none}
.formbuilder .uploadImage-1 font,.uploadImage-1 input{display:none}
@media only screen and (max-width: 640px) {
.formbuilder .form-page li {
width: calc(50% - 20px);
}
}
@media only screen and (max-width: 479px) {
.formbuilder .form-page li {
width: calc(100% - 20px);
}
}
.timeSelector .picker-header {
background: #0CF;
padding: 10px;
font-size: 25px;
float: left;
width: 100%;
box-sizing: border-box;
margin-bottom:15px;
}
.timeSelector .picker-header .cancel {
text-align: center;
width: 35px;
float: right;
border: 1px solid rgba(8, 8, 8, 0.27);
border-radius: 50%;
height: 35px;
cursor: pointer;
}
.timeSelector .picker-header .see-time {
width: calc(100% - 50px);
float: left;
}
.timeSelector.full-h .picker-header .see-time .type {
display: none;
}
.timeSelector .border {
width: 240px;
height: 40px;
position: absolute;
border-top: 1px solid #dadada;
border-bottom: 1px solid #dadada;
top: 50%;
margin-top: 5px;
z-index: -1;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
box-sizing: border-box;
}
.timeSelector .border::after {
content: ":";
position: absolute;
left: 80px;
font-weight: bold;
line-height: 40px;
font-size: 22px;
}
.timeSelector .time-select {
float: left;
width: 100%;
padding: 0 30px;
box-sizing: border-box;
}
.timeSelector .border .right {
float: right;
line-height: 40px;
}
.timeSelector .border .left {line-height: 40px;}
.timeSelector.full-h .swiper-container {
width:120px;
}
.timeSelector.full-h .border::after {
left: 120px;
}
.page-view.audio {
overflow: auto;
}
/* menu dropdown css */
.menu-view {
position: relative;
float: right;
width: 40px;
height: 40px;
right: 0;
}
.menu-view.open .icon.cross {
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.menu-view .dropdown-view {
min-width: 200px;
max-width: 250px;
float: right;
background: #34685c;
position: absolute;
right: 0;
top: 90%;
z-index: 999;
visibility: hidden;
opacity: 0;
-webkit-transition: 0.2s ease-in-out;
transition: 0.3s ease-in-out;
border-radius: 5px;
border-top-right-radius: 0;
display: block !important;
}
@media screen and (max-height: 400px) and (orientation:landscape) {
.menu-view .dropdown-view {
max-height: 160px;
overflow: auto;
}
}
.menu-view .dropdown-view li:hover {
background: rgba(0,0,0,0.1);
}
.menu-view .dropdown-view li,
.menu-view .dropdown-view li a {
float: left !important;
width: 100% !important;
box-sizing: border-box;
}
.menu-view .dropdown-view li a {
position: relative !important;
background: 0 0;
border: none!important;
text-align: left;
line-height: 44px;
padding: 0 10px !important;
box-sizing: border-box;
border-radius: 10px;
max-width: inherit;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
right: 0 !important;
max-width: initial !important;
font-size:.9em;
}
.menu-view .dropdown-view li a {
background: rgba(0, 0, 0, 0) !important;
}
.menu-view .dropdown-view li a:hover {
text-shadow: none !important;
}
.menu-view .icon.cross {
position: absolute !important;
right: 0px !important;
top: 0;
line-height: 40px;
width: 35px !important;
height: 36px !important;
text-align: center;
border-radius: 50%;
background: #34685c;
border-radius: 50%;
color: #fff;
padding: 0 !important;
margin: 0px 0px !important;
}
.menu-view.open .dropdown-view {
visibility: visible;
opacity: 1;
}
.menu-view .icon.cross .nav-click-area {
position: absolute;
left: 0;
top: 0;
background: red;
width: 100%;
height: 100%;
opacity: 0;
}
/* menu icon css */
#nav-icon3 {
width: 20px;
height: 20px;
position: relative;
margin: 10px auto 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #fff;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
border: none !important;
padding: 0 !important;
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
top: 6px;
}
#nav-icon3 span:nth-child(4) {
top: 12px;
}
#nav-icon3.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
/* Add alignment css */
.about .web-wrap::after,
.socialnetwork .page-content .social-page::after,
.fitness .page-content .fitness-page::after,
.fitness-header::after,
.coupondirectory .page-content .coupon-directory-page::after,
.video .page-content .video-page::after,
.audio .page-content .audio-page::after,
.textpage .page-content .text-page::after,
.chatbot .page-content .chatbot-page::after,
.appypiedb .page-content .apypiedb-page::after,
.quiz .page-content .quiz-page-cont::after,
.event .page-content .event-cont-page::after,
.loyalty .page-content .loyalty-page::after,
.dating .page-content .dating-cont-page::after,
.page-content .memebercard-maincontainer::after,
.editorpage .page-content .webview-wrap::after,
.codepage .page-content .webview-wrap::after,
.hyperlocal .page-content .page-inner-wrapper::after,
.photo .page-content .photo-page::after,
.formbuilder .page-content .formbuilder-main-container::after,
.realestate .page-content .realestate-container::after,
.services .page-content .directory-page::after,
.polling .polling-cont-page::after, .forum .homeScreenSection::after,
.desktop .review .page-content .reviewbody::after,
.todolist .page_height::after,
.education .khan-wrapper::after, .education .dictionary-wrapper::after, .flashcard .page-content.flash-page::after,
.accommodation .page-content .accommodation-page::after,
.recipe .page-content .recipe-cont::after {
content: "";
clear: both;
display: table;
}
.video-header,
.hyperlocal-header, .ecommerce-header {
max-width: 90% !important;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
.desktop .news .page-content .news-container,
.desktop .review .page-content .reviewbody,
.desktop .contact .page-content .contact-us.theme-4 .de_contact,
.desktop .contact .page-content .contact-us.theme-4 .map-area,
.socialnetwork .page-content .social-page,
.fitness .page-content .fitness-page,
.fitness-header,
.coupondirectory .page-content .coupon-directory-page,
.twitter .page-content .twitter-page,
.testimonial .page-content .testimonial-main,
.video .page-content .video-page,
.audio .page-content .audio-page,
.textpage .page-content .text-page,
.chatbot .page-content .chatbot-page,
.map .page-content .maplist-container,
.app_navigation_matrix.rounded-option,
.appypiedb .page-content .apypiedb-page,
.quiz .page-content .quiz-page-cont,
.ereader .page-content .ereader-page,
.event .page-content .event-cont-page,
.loyalty .page-content .loyalty-page,
.dating .page-content .dating-cont-page,
.page-content .memebercard-maincontainer,
.editorpage .page-content .webview-wrap,
.codepage .page-content .webview-wrap,
.hyperlocal .page-content .page-inner-wrapper,
.photo .page-content .photo-page,
.formbuilder .page-content .formbuilder-main-container,
.realestate .page-content .realestate-container,
.services .page-content .directory-page,
.polling .polling-cont-page,
.desktop .forum .forum-main-cont,
.desktop .ecommerce .ecome-page,
.coupon .coupon-maincontainer,
.desktop .payment-mode,
.foodcourt .food-court-page,
.dinein .dinein-container,
.blog .desktop-list, .blog .desktop-view,
.rss .desktop-list, .rss .desktop-view,
.todolist .page_height,
.education .khan-wrapper, .education .dictionary-wrapper,
.flashcard .page-content.flash-page,
.accommodation .page-content .accommodation-page,
.desktop .page-content .main-container-center,
.desktop .quote .quote-page,
.desktop .facebook .facebookbody,
.recipe .page-content .recipe-cont,
.desktop .foodordering .food-order-page,
.quiz-poll .quizpoll-page,
.auction .auction-page {
max-width: 90% !important;
width: 100%;
padding: 10px;
margin: 0 auto;
box-sizing: border-box;
}
.review .review-box, .review .rating-box {
width: 100%;
}
.app_navigation_pwaFlatParallax a span span.content-inside {
z-index: 9;
}
#router-navs .main-header::after {
content: "";
clear: both;
display: table;
}
#router-navs .main-header {
width: 100%;
max-width: 90%;
margin: 0 auto;
}
.pwa_mobi_nav .p-menu1{height:100%}
.pwa_mobi_nav .hamburger1{height:30px;margin:12px 10px 8px;display:-ms-grid;display:grid;grid-template-rows:repeat(3,1fr);justify-items:left;z-index:120}
.pwa_mobi_nav .hamburger1 div{background-color:#3d3d3d;position:relative;width:30px;height:5px;margin-top:0;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.pwa_mobi_nav #toggle1{display:none}
.pwa_mobi_nav #toggle1:checked + .hamburger1 .top{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);margin-top:10px}
.pwa_mobi_nav #toggle1:checked + .hamburger1 .meat{-webkit-transform:rotate(45deg);transform:rotate(45deg);margin-top:-5px}
.pwa_mobi_nav #toggle1:checked + .hamburger1 .bottom{-webkit-transform:scale(0);transform:scale(0)}
.pwa_mobi_nav #toggle1:checked ~ .menu1 {
max-height: 306px;
overflow: auto;
height: 100%;
}
.pwa_mobi_nav .menu1{width:100%;background-color:#fff;margin:0;display:-ms-grid;display:grid;grid-template-rows:1fr repeat(4,0.5fr);grid-row-gap:0;padding:0;list-style:none;clear:both;width:auto;text-align:center;height:0;overflow:hidden;transition:height .4s ease;z-index:120;-webkit-transition:all .3s ease;transition:all .3s ease}
.pwa_mobi_nav .menu1 a{text-align:left;border-bottom:1px solid;padding:0 20px}
@media (min-width: 1025px){
.pwa_mobi_nav .p-menu1{display: none}
}
@media(max-width:1024px) {
.desktop .news .page-content .news-container,
.desktop .review .page-content .reviewbody,
.desktop .contact .page-content .contact-us.theme-4 .de_contact,
.desktop .contact .page-content .contact-us.theme-4 .map-area,
.socialnetwork .page-content .social-page,
.fitness .page-content .fitness-page,
.fitness-header,
.coupondirectory .page-content .coupon-directory-page,
.twitter .page-content .twitter-page,
.testimonial .page-content .testimonial-main,
.video .page-content .video-page,
.audio .page-content .audio-page,
.textpage .page-content .text-page,
.chatbot .page-content .chatbot-page,
.map .page-content .maplist-container,
.app_navigation_matrix.rounded-option,
.appypiedb .page-content .apypiedb-page,
.quiz .page-content .quiz-page-cont,
.ereader .page-content .ereader-page,
.event .page-content .event-cont-page,
.loyalty .page-content .loyalty-page,
.dating .page-content .dating-cont-page,
.page-content .memebercard-maincontainer,
.editorpage .page-content .webview-wrap,
.codepage .page-content .webview-wrap,
.hyperlocal .page-content .page-inner-wrapper,
.photo .page-content .photo-page,
.formbuilder .page-content .formbuilder-main-container,
.realestate .page-content .realestate-container,
.services .page-content .directory-page,
.polling .polling-cont-page,
.desktop .forum .homeScreenSection,
.desktop .ecommerce .ecome-page,
.coupon .coupon-maincontainer,
.desktop .payment-mode,
.dinein .food-court-page,
.blog .desktop-list, .blog .desktop-view,
.rss .desktop-list, .rss .desktop-view,
.todolist .page_height,
.education .khan-wrapper, .education .dictionary-wrapper,
.flashcard .page-content.flash-page,
.accommodation .page-content .accommodation-page,
.desktop .page-content .main-container-center,
.recipe .page-content .recipe-cont {
max-width: 100% !important;
}
}
.ios .web-wrap, .android .web-wrap {
max-width: 100%;
}
.timePickerSector .timeBg {
position: absolute !important;
background: transparent !important;
}
.timePickerSector .timeSelector {
position: absolute;
width: 100%;
left: 0;
top: 100%;
transform: inherit;
box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
border-radius: 0;
font-family: 'Roboto', sans-serif;
height: 255px;
}
.timePickerSector .timeSelector .btns a {
margin: 0 7px;
background: #0087ff;
border-radius: 30px;
padding: 8px 25px;
display: inline-block;
font-size: .9em;
float: none;
color: #fff;
}
.timePickerSector .timeSelector ul,.timeSelector ul li {
line-height:50px !important;
}
.timePickerSector .timeSelector .border {
height: 50px;
top: 50%;
margin-top: -9px;
}
.timePickerSector .picker-header-time {
padding: 10px 30px 0 30px;
font-size: 16px;
float: left;
width: 100%;
box-sizing: border-box;
margin-top: 25px;
text-transform: uppercase;
}
.timePickerSector .picker-header-time span {
width: 80px;
display: inline-block;
text-align: center;
font-weight: bold;
font-size: 13px;
}
.timePickerSector .timeSelector .border .left,.timePickerSector .timeSelector .border .right{display: none}
.timePickerSector .timeSelector .btns {
margin: 10px 0 20px 0;
}
#router-navs ul {
float: left;
}
#router-navs .right-section {
/* overflow: hidden; */
float: right;
}
#router-navs .drop-right-elem{float: right;
padding: 7px 4px 0px 4px;
box-sizing: border-box;
}
#router-navs span.drop-search {
line-height: normal;
padding:0 0px 0 10px;
border: 1px solid;
border-radius: 20px;
margin-top:5px;
float: right;
max-width: 260px;
box-sizing: border-box;
}
#router-navs .pos-abs-icon {
cursor: pointer;
padding: 10px;
margin: 0px 0 0 0px;
width: auto;
box-sizing: border-box;
position: relative;
margin-right: 3px;
flex: 1;
margin-left: auto;
max-width: 40px;
}
#router-navs .header-src-right {
/* position: relative;
display: inline-block;
overflow: hidden;
float: left;
height: 35px;
width: calc(100% - 121px); */
position: relative;
overflow: hidden;
display: flex;
}
#router-navs .header-src-right.full-width {
width: 100%;
}
#router-navs .form-control {
/* width:calc(100% - 43px);
display: inline-block;
padding: 0 0px 0 10px;
border: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 2;
background: transparent;
height: 38px;
float: left; */
width: 100%;
padding: 0 0px 0 10px;
border: none;
box-sizing: border-box;
background: transparent;
flex: 1;
}
#router-navs ul li {
position: relative;
float: left;
padding: 0;
}
#router-navs.off ul li {
display: none;
}
#router-navs.off ul li.more-menu {
display: block;
}
#router-navs ul li a {
float: left;
overflow: hidden;
width: auto;
height: auto;
line-height: 50px;
padding: 0 5px;
margin: 0;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
max-width: 84px;
box-sizing: border-box;
text-transform: capitalize;
}
#router-navs ul li::after{
content: "";
position: absolute;
background: #000;
bottom: 0;
width: 100%;
height: 2px;
left: 0;
visibility: hidden;
}
#router-navs ul li.on::after {
visibility: visible;
}
#router-navs ul li a:hover, #router-navs ul li.on a {
text-shadow: 0.6px 0 0 #000;
}
#router-navs span.search-cat-drop {
position: relative;
padding-right: 20px;
line-height: normal;
float: left;
border-right: 1px solid;
width: 90px;
}
#router-navs .search-cat-drop select {
background: transparent;
padding: 11px 0px;
appearance: none;
border: none;
cursor: pointer;
width: calc(100% - 10px);
float: left;
}
#router-navs span.search-cat-drop:before,.recipe span.pos-abs-icon.icon-search-3:before {
position: absolute;
right: 9px;
z-index: 1;
transform: translateY(-50%);
top: 50%;
}
.recipe span.pos-abs-icon.icon-search-3 {
position: relative;
top: 3px;
right: -2px;
cursor: pointer;
width: 30px;
height: 30px;
z-index: 99;
}
#router-navs .pos-rel .pos-abs-icon {
position: absolute;
right: 0;
width: 32px;
height: 38px;
cursor: pointer;
text-align: center;
}
#router-navs .icon-div,#router-navs .cross {
background: #1aabbe;
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 50%;
color: #fff;
vertical-align: middle;
cursor: pointer;
text-align: center;
padding: 0;
float: right;
margin-left: 4px;
}
#router-navs .icon-div span {
display: inline-block;
font-size: 16px;
vertical-align: top;
line-height: 36px ;
padding: 0 ;
border: 0;
text-align: center;
}
.timeSelector3-wrap {
position: absolute;
z-index: 10002;
}
.timeSelector3 {
width: 220px;
height: 220px;
padding: 10px 0;
position: static;
margin: 0;
left: 0;
transform: none;
z-index: 10001;
box-shadow: none;
border: solid 1px #333;
border-radius: 3px;
box-sizing: border-box;
}
.timeSelector3 .picker-header {
display: none;
}
.timeSelector3 .time-select {
padding: 0;
position: relative;
top: 0%;
left: 0;
}
.timeSelector3 .border::after {
line-height: 35px;
}
.timeSelector3 .picker-header-time {
padding: 0;
font-size: 16px;
float: left;
width: 100%;
box-sizing: border-box;
margin-top: 0;
text-transform: uppercase;
}
.timeSelector3 .picker-header-time span {
width: 90px;
display: inline-block;
text-align: center;
font-weight: bold;
font-size: 13px;
}
.timeSelector3 .btns {
float: left;
width: 100%;
clear: both;
padding: 0 0;
line-height: 26px;
position: static;
bottom: 0px;
margin: 15px 0 0 0;
text-align: center;
width: 240px;
}
.timeSelector3 .btns a {
border-radius: 25px;
float: none;
font-size: 15px;
color: #fff;
background: #007aff;
}
.timeSelector3 .border {
position: absolute;
top: 60px;
z-index: 0;
margin: 0;
}
.timeSelector3 .swiper-container,
.timeSelector3.full-h .swiper-container {
width: 70px;
}
.timeSelector3 .border::after,
.timeSelector3.full-h .border::after {
left: 70px;
}
.timeBg3 {
background: rgba(0,0,0,0) !important;
}
/* .hideapp-banner .page-banner {
display: none;
} */
/* global material css */
.targetLabel {
--color-helper1: #C1C1C1;
--color-helper2: #444;
}
.targetLabel {
position: relative;
display: inline-block;
padding-top: 6px;
line-height: 1.5;
/* overflow: hidden; */
width: 100%;
box-sizing: border-box;
}
/* Input, Textarea */
.targetLabel>.targetField {
box-sizing: border-box;
margin: 0;
border: solid 1px;
/* Safari */
border-color: var(--color-helper1);
border-top-color: transparent;
border-radius: 4px;
padding: 15px 13px 15px;
width: 100%;
height: inherit;
color: var(--color-helper2);
background-color: transparent;
box-shadow: none;
/* Firefox */
font-family: inherit;
font-size: inherit;
line-height: inherit;
caret-color: var(--color-helper1);
transition: border 0.2s, box-shadow 0.2s;
height: 55px;
outline: none;
}
.targetLabel> textarea.targetField{
min-height: 120px !important;
}
/* Span */
.targetLabel>.targetField+span {
position: absolute;
top: 0;
left: 0;
display: flex;
border-color: var(--color-helper1);
width: 100%;
max-height: 100%;
color: var(--color-helper2);
font-size: 90%;
line-height: 15px;
cursor: text;
transition: color 0.2s, font-size 0.2s, line-height 0.2s;
}
/* Corners */
.targetLabel>.targetField+span::before,
.targetLabel>.targetField+span::after {
content: "";
display: block;
box-sizing: border-box;
margin-top: 6px;
border-top: solid 1px;
border-top-color: var(--color-helper1);
min-width: 10px;
height: 8px;
pointer-events: none;
/* box-shadow: inset 0 1px transparent; */
transition: border-color 0.2s, box-shadow 0.2s;
}
.targetLabel>.targetField+span::before {
margin-right: 4px;
border-left: solid 1px transparent;
border-radius: 4px 0;
}
.targetLabel>.targetField+span::after {
flex-grow: 1;
margin-left: 4px;
border-right: solid 1px transparent;
border-radius: 0 4px;
}
/* Hover */
.targetLabel:hover>.targetField {
border-color: var(--color-helper1);
border-top-color: transparent;
}
.targetLabel:hover>.targetField+span::before,
.targetLabel:hover>.targetField+span::after {
border-top-color: var(--color-helper1);
}
.targetLabel:hover>.targetField:not(:focus):placeholder-shown {
border-color: var(--color-helper1);
}
/* Placeholder-shown */
.targetLabel .targetField:not(:focus):placeholder-shown {
border-top-color: var(--color-helper1);
}
.targetLabel .targetField:not(:focus):placeholder-shown+span {
font-size: inherit;
line-height: 68px;
opacity: .6;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.targetLabel .targetField:not(:focus):placeholder-shown+span {
font-size: inherit;
line-height: 68px;
}
.targetLabel .targetField:not(:focus):placeholder-shown+span::before,
.targetLabel .targetField:not(:focus):placeholder-shown+span::after {
border-top-color: transparent;
}
/* global material css end*/
/*========== Index CSS ==========*/
/*=================
Nav Font Size Declare
====================*/
.app_navigation_matrix.smallNav a span , .app_navigation_matrix2.smallNav a span, .pwaAdvanceMatrix.smallNav a span{font-size: 14px ;}
.app_navigation_matrix.mediumNav a span, .app_navigation_matrix2.mediumNav a span, .pwaAdvanceMatrix.mediumNav a span{font-size: 16px ;}
.app_navigation_matrix.largeNav a span, .app_navigation_matrix2.largeNav a span , .pwaAdvanceMatrix.largeNav a span{font-size: 18px ;}
.app_navigation_matrix.xlargeNav a span, .app_navigation_matrix2.xlargeNav a span , .pwaAdvanceMatrix.xlargeNav a span{font-size: 20px ; line-height:28px;}
.app_navigation_list.smallNav a span, .list-layout.smallNav a span {font-size: 18px ;}
.app_navigation_list.mediumNav a span, .list-layout.mediumNav a span{font-size: 22px ;}
.app_navigation_list.largeNav a span, .list-layout.largeNav a span{font-size: 24px ;}
.app_navigation_list.xlargeNav a span, .list-layout.xlargeNav a span{font-size: 26px ;}
.app_navigation_newLayout_list.smallNav a span{font-size: 18px ;}
.app_navigation_newLayout_list.mediumNav a span{font-size: 22px ;}
.app_navigation_newLayout_list.largeNav a span{font-size: 24px ;}
.app_navigation_newLayout_list.xlargeNav a span{font-size: 26px ;}
.app_navigation_bottom.smallNav a span, .app_navigation_bottom_carousel.smallNav a span{font-size: 8px ;}
.app_navigation_bottom.mediumNav a span, .app_navigation_bottom_carousel.mediumNav a span{font-size: 10px ;}
.app_navigation_bottom.largeNav a span, .app_navigation_bottom_carousel.largeNav a span{font-size: 12px ;}
.app_navigation_bottom.xlargeNav a span, .app_navigation_bottom_carousel.xlargeNav a span{font-size: 13px ;}
.app_navigation_slidemenu.smallNav a span{font-size: 18px ;}
.app_navigation_slidemenu.mediumNav a span{font-size: 20px ;}
.app_navigation_slidemenu.largeNav a span{font-size: 22px ;}
.app_navigation_slidemenu.xlargeNav a span{font-size: 24px ;}
.app_navigation_imglist.smallNav a span{font-size: 18px ;}
.app_navigation_imglist.mediumNav a span{font-size: 22px ;}
.app_navigation_imglist.largeNav a span{font-size: 24px ;}
.app_navigation_imglist.xlargeNav a span{font-size: 26px ;}
.app_navigation_imgmatrix.smallNav a span{font-size: 18px ;}
.app_navigation_imgmatrix.mediumNav a span{font-size: 22px ;}
.app_navigation_imgmatrix.largeNav a span{font-size: 24px ;}
.app_navigation_imgmatrix.xlargeNav a span{font-size: 26px ;}
.compress .app_navigation_slidemenu.smallNav a span { font-size:9px; }
.compress .app_navigation_slidemenu.mediumNav a span { font-size: 11px; }
.compress .app_navigation_slidemenu.largeNav a span { font-size: 13px; }
.compress .app_navigation_slidemenu.xlargeNav a span { font-size: 15px;}
.app_navigation_newLayout_matrix.smallNav a span{font-size: 14px ;}
.app_navigation_newLayout_matrix.mediumNav a span{font-size: 16px ;}
.app_navigation_newLayout_matrix.largeNav a span{font-size: 18px ;}
.app_navigation_newLayout_matrix.xlargeNav a span{font-size: 20px ;}
.app_navigation_newLayout_imgmatrix.smallNav a span{font-size: 18px ;}
.app_navigation_newLayout_imgmatrix.mediumNav a span{font-size: 22px ;}
.app_navigation_newLayout_imgmatrix.largeNav a span{font-size: 24px ;}
.app_navigation_newLayout_imgmatrix.xlargeNav a span{font-size: 26px ;}
.app_navigation_fixedmatrix.smallNav a span{font-size: 14px ;}
.app_navigation_fixedmatrix.mediumNav a span{font-size: 16px ;}
.app_navigation_fixedmatrix.largeNav a span{font-size: 18px ;}
.app_navigation_fixedmatrix.xlargeNav a span{font-size: 20px ;}
.app_navigation_crossmatrix.smallNav a span{font-size: 14px ;}
.app_navigation_crossmatrix.mediumNav a span{font-size: 16px ;}
.app_navigation_crossmatrix.largeNav a span{font-size: 18px ;}
.app_navigation_crossmatrix.xlargeNav a span{font-size: 20px ;}
.app_navigation_slidemenu3d.smallNav a span{font-size: 14px ;}
.app_navigation_slidemenu3d.mediumNav a span{font-size: 16px ;}
.app_navigation_slidemenu3d.largeNav a span{font-size: 18px ;}
.app_navigation_slidemenu3d.xlargeNav a span{font-size: 20px ;}
.app_navigation_slideshutter.smallNav a {font-size: 18px ;}
.app_navigation_slideshutter.mediumNav a {font-size: 22px ;}
.app_navigation_slideshutter.largeNav a {font-size: 24px ;}
.app_navigation_slideshutter.xlargeNav a {font-size: 26px ;}
.app_navigation_slidemore.smallNav a span { font-size:9px; }
.app_navigation_slidemore.mediumNav a span { font-size: 11px; }
.app_navigation_slidemore.largeNav a span { font-size: 13px; }
.app_navigation_slidemore.xlargeNav a span { font-size: 15px;}
/*=================
Desktop Font Size Declare
====================*/
.app_navigation_deskmenu.smallNav a h3 {font-size: 24px ;}
.app_navigation_deskmenu.mediumNav a h3 {font-size: 28px ;}
.app_navigation_deskmenu.largeNav a h3 {font-size: 30px ;}
.app_navigation_deskmenu.xlargeNav a h3 {font-size: 36px ;}
.app_navigation_deskmenu.smallNav a p {font-size: 16px ;}
.app_navigation_deskmenu.mediumNav a p {font-size: 18px ;}
.app_navigation_deskmenu.largeNav a p {font-size: 20px ;}
.app_navigation_deskmenu.xlargeNav a p {font-size: 22px ;}
.app_navigation_deskmenu.smallNav a .button {font-size: 14px;}
.app_navigation_deskmenu.mediumNav a .button {font-size: 16px;}
.app_navigation_deskmenu.largeNav a .button {font-size: 18px;}
.app_navigation_deskmenu.xlargeNav a .button {font-size: 20px;}
/*=================
Content Font Size Declare
====================*/
.smallContent { font-size: 10px ;}
.mediumContent { font-size: 12px ; }
.largeContent { font-size: 14px ;}
.xlargeContent { font-size: 17px ;}
.desktop .smallContent { font-size: 13px ;}
.desktop .mediumContent { font-size: 15px ; }
.desktop .mediumContent h1 { font-size: 1.5em ; }
.desktop .largeContent { font-size: 17px ;}
.desktop .xlargeContent { font-size: 19px ;}
/*=================
header Font Size Declare
====================*/
.smallHeaderBar { font-size: 18px!important;}
.mediumHeaderBar { font-size: 22px!important;}
.largeHeaderBar { font-size: 26px!important;}
.xlargeHeaderBar { font-size: 31px !important;}
.app-header.smallHeaderBar,.app-footer.smallHeaderBar { font-size: 13px!important;}
.app-header.mediumHeaderBar,.app-footer.mediumHeaderBar { font-size: 15px!important;}
.app-header.largeHeaderBar,.app-footer.largeHeaderBar { font-size: 17px!important;}
.app-header.xlargeHeaderBar,.app-footer.xlargeHeaderBar { font-size: 20px !important;}
/*=================
Main Heading Font Size Declare
====================*/
.smallHeading { font-size: 14px !important;}
.mediumHeading { font-size: 16px !important;}
.largeHeading { font-size: 18px !important;}
.xlargeHeading{ font-size: 23px !important;}
.desktop .smallHeading { font-size: 17px !important;}
.desktop .mediumHeading { font-size: 19px !important;}
.desktop .largeHeading { font-size: 21px !important;}
.desktop .xlargeHeading{ font-size: 25px !important;}
/*=================
sub Heading Font Size Declare
====================*/
.smallSubHeading { font-size: 12px !important;}
.mediumSubHeading { font-size: 14px !important;}
.largeSubHeading { font-size: 16px !important;}
.xlargeSubHeading { font-size: 19px !important;}
.desktop .smallSubHeading { font-size: 15px !important;}
.desktop .mediumSubHeading { font-size: 17px !important;}
.desktop .largeSubHeading { font-size: 19px !important;}
.desktop .xlargeSubHeading { font-size: 21px !important;}
/*=================
Navigation Icons Declare
====================*/
.app_navigation_matrix i, .app_navigation_newLayout_matrix i{ color: #fff; display: block; font-size:45px; overflow: hidden; text-align: center; text-overflow: ellipsis; text-transform: capitalize; width: 100%; border:0px;}
.app_navigation_matrix2 i{ color: #fff; display: block; font-size:45px; overflow: hidden; text-align: center; text-overflow: ellipsis; text-transform: capitalize; width: 100%; border:0px;}
.app_navigation_matrix a,.app_navigation_matrix2 a, .app_navigation_newLayout_matrix a { box-sizing:border-box; border:solid 1px #ccc; background:none !important; overflow:hidden; }
.app_navigation_matrix a span,.app_navigation_matrix2 a span, .app_navigation_newLayout_matrix a span { margin:0%; padding:0 5%; width:90%; display:inline-block;}
.app_navigation_newLayout_matrix [class^="icon-"]:before,.app_navigation_newLayout_matrix [class*=" icon-"]:before,.app_navigation_newLayout_matrix [class^="iconz-"]:before,.app_navigation_newLayout_matrix [class*=" iconz-"]:before,.app_navigation_newLayout_matrix [class^="iconzu-"]:before,.app_navigation_newLayout_matrix [class*=" iconzu-"]:before,.app_navigation_newLayout_matrix [class^="appyicon-"]:before,.app_navigation_newLayout_matrix [class*=" appyicon-"]:before, .app_navigation_matrix [class^="icon-"]:before,.app_navigation_matrix [class*=" icon-"]:before,.app_navigation_matrix [class^="iconz-"]:before,.app_navigation_matrix [class*=" iconz-"]:before,.app_navigation_matrix [class^="iconzu-"]:before,.app_navigation_matrix [class*=" iconzu-"]:before,.app_navigation_matrix [class^="appyicon-"]:before,.app_navigation_matrix [class*=" appyicon-"]:before,
.app_navigation_matrix2 [class^="icon-"]:before,.app_navigation_matrix2 [class*=" icon-"]:before,.app_navigation_matrix2 [class^="iconz-"]:before,.app_navigation_matrix2 [class*=" iconz-"]:before,.app_navigation_matrix2 [class^="iconzu-"]:before,.app_navigation_matrix2 [class*=" iconzu-"]:before,.app_navigation_matrix2 [class^="appyicon-"]:before,.app_navigation_matrix2 [class*=" appyicon-"]:before{ line-height:1.6em }
.app_navigation_list i, .app_navigation_newLayout_list i{ color: #fff; font-size:40px; overflow: hidden; text-align: center; text-overflow: ellipsis; width: 50px; float:left;}
.app_navigation_list [class^="icon-"]:before,.app_navigation_list [class*=" icon-"]:before,.app_navigation_list [class^="iconz-"]:before,.app_navigation_list [class*=" iconz-"]:before,.app_navigation_list [class^="iconzu-"]:before,.app_navigation_list [class*=" iconzu-"]:before,.app_navigation_list [class^="appyicon-"]:before,.app_navigation_list [class*=" appyicon-"]:before, .app_navigation_newLayout_list [class^="icon-"]:before,.app_navigation_newLayout_list [class*=" icon-"]:before,.app_navigation_newLayout_list [class^="iconz-"]:before,.app_navigation_newLayout_list [class*=" iconz-"]:before,.app_navigation_newLayout_list [class^="iconzu-"]:before,.app_navigation_newLayout_list [class*=" iconzu-"]:before,.app_navigation_newLayout_list [class^="appyicon-"]:before,.app_navigation_newLayout_list [class*=" appyicon-"]:before{ line-height:1.2em }
.app_navigation_bottom i{ color: #fff; display: block; font-size:22px; overflow: hidden; text-align: center; text-overflow: ellipsis; width:100%;}
.app_navigation_bottom [class^="icon-"]:before,.app_navigation_bottom [class*=" icon-"]:before,.app_navigation_bottom [class^="iconz-"]:before,.app_navigation_bottom [class*=" iconz-"]:before,.app_navigation_bottom [class^="iconzu-"]:before,.app_navigation_bottom [class*=" iconzu-"]:before,.app_navigation_bottom [class^="appyicon-"]:before,.app_navigation_bottom [class*=" appyicon-"]:before{ line-height: 1.4em }
.app_navigation_bottom_carousel i{ color: #fff; display: block; font-size:22px; overflow: hidden; text-align: center; text-overflow: ellipsis; width:100%;}
.app_navigation_bottom_carousel [class^="icon-"]:before,.app_navigation_bottom_carousel [class*=" icon-"]:before,.app_navigation_bottom_carousel [class^="iconz-"]:before,.app_navigation_bottom_carousel [class*=" iconz-"]:before,.app_navigation_bottom_carousel [class^="iconzu-"]:before,.app_navigation_bottom_carousel [class*=" iconzu-"]:before,.app_navigation_bottom_carousel [class^="appyicon-"]:before,.app_navigation_bottom_carousel [class*=" appyicon-"]:before{ line-height: 1.4em }
/*=================
Pages Icons Declare
====================*/
.page_innerIcon i{ color: #fff; display: block; font-size: 30px;; overflow: hidden; text-align: center; text-overflow: ellipsis; text-transform: capitalize; width: 100%;}
.page_innerIcon img{display: block; overflow: hidden; text-align: center; width: 35px;}
.page_innerIcon [class^="icon-"]:before,.page_innerIcon [class*=" icon-"]:before,.page_innerIcon [class^="iconz-"]:before,.page_innerIcon [class*=" iconz-"]:before,.page_innerIcon [class^="iconzu-"]:before,.page_innerIcon [class*=" iconzu-"]:before,.page_innerIcon [class^="appyicon-"]:before,.page_innerIcon [class*=" appyicon-"]:before{ line-height:1.2em }
.brack-word{float: left; width: calc(100% - 90px); -webkit-width: calc(100% - 90px); -moz-width: calc(100% - 90px); }
/*=================
Page Sub Icons/Inner cat icon images Declare
====================*/
.audio_list i, .common-list i, .education_list i{color: #fff; display:inline-block; font-size:90px; overflow: hidden; text-align: center; text-overflow: ellipsis; width: 133px;overflow: hidden;height: 133px;box-shadow: 0px 0px 3px #FFFFFF;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;}
.audio_list [class^="icon-"]:before,.audio_list [class*=" icon-"]:before,.audio_list [class^="iconz-"]:before,.audio_list [class*=" iconz-"]:before,.audio_list [class^="iconzu-"]:before,.audio_list [class*=" iconzu-"]:before,.audio_list [class^="appyicon-"]:before,.audio_list [class*=" appyicon-"]:before, .common-list [class^="icon-"]:before,.common-list [class*=" icon-"]:before,.common-list [class^="iconz-"]:before,.common-list [class*=" iconz-"]:before,.common-list [class^="appyicon-"]:before,.common-list [class*=" appyicon-"]:before,.common-list [class^="iconzu-"]:before,.common-list [class*=" iconzu-"]:before, .education_list [class^="icon-"]:before,.education_list [class*=" icon-"]:before,.education_list [class^="iconz-"]:before,.education_list [class*=" iconz-"]:before,.education_list [class^="iconzu-"]:before,.education_list [class*=" iconzu-"]:before,.education_list [class^="appyicon-"]:before,.education_list [class*=" appyicon-"]:before,.audio_list [class^="appyslim-"]:before,.audio_list [class*=" appyslim-"]:before, .common-list [class^="appyslim-"]:before,.common-list [class*=" appyslim-"]:before, .education_list [class^="appyslim-"]:before,.education_list [class*=" appyslim-"]:before
{ line-height:133px }
.audio_list, .common-list, .education_list { margin:15px calc((50% - 133px)/2) 0 }
.hideBorder .audio_list i,
.hideBorder .common-list i,
.hideBorder .education_list i,
.hideBorder .common-list img {
box-shadow: 0px 0px 0 #FFFFFF;
}
/*=================
loaylty Icons / images Declare
====================*/
.loyalty-numb [class^="icon-"]:before,.loyalty-numb [class*=" icon-"]:before,.loyalty-numb [class^="iconz-"]:before,.loyalty-numb [class*=" iconz-"]:before,.loyalty-numb [class^="iconzu-"]:before,.loyalty-numb [class*=" iconzu-"]:before{ position: absolute;display: block;text-align: center;width: 80px;height: 80px;line-height: 80px;font-size: 400%; z-index:1;}
.loyalStemp i{ display: block; font-size:5em; text-align: center; width: 80px; height:80px; margin:0 auto; border:2px solid #fff; border-radius:100px;-moz-border-radius:100px;-webkit-border-radius:100px; line-height:80px;}
span[class^="icon"].freeicon-btn{font-size: 25px; line-height:48px;}
span[class^="icon"].freeicon-btn:before{ display:block !important;}
/*=================
Navigation Option Hide Show Declare
====================*/
.app_navigation_matrix.hide-border a, .app_navigation_matrix2.hide-border a, .app_navigation_imglist.hide-border a, .app_navigation_imgmatrix.hide-border a, .app_navigation_list.hide-border a, .app_navigation_matrix.hide-border i,.app_navigation_matrix.hide-border img, .app_navigation_slide_list.hide-border a, .app_navigation_slide.hide-border a,.app_navigation_newLayout_matrix.hide-border a, .app_navigation_newLayout_list.hide-border a, .app_navigation_newLayout_imglist.hide-border a, .app_navigation_newLayout_imgmatrix.hide-border a{ border-width:0px !important;}
.app_navigation_matrix.hide-text span, .app_navigation_matrix2.hide-text span, .app_navigation_bottom_carousel.hide-text span, .app_navigation_bottom.hide-text span, .app_navigation_slide_list.hide-text span, .app_navigation_newLayout_matrix.hide-text span, .app_navigation_newLayout_list.hide-text span{ display:none;}
.app_navigation_imglist.hide-text a span, .app_navigation_imgmatrix.hide-text a span, app_navigation_newLayout_imglist.hide-text a span, .app_navigation_newLayout_imgmatrix.hide-text a span { text-indent:2000px; overflow:hidden;}
.app_navigation_matrix.hide-text i, .app_navigation_newLayout_matrix.hide-text i{font-size:57px;}
.app_navigation_matrix.hide-text a, .app_navigation_newLayout_matrix.hide-text a{ border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; overflow:hidden;}
/*.app_navigation_matrix.hide-text a img, .app_navigation_matrix2.hide-text a img{ max-width:90px; max-height:90px;} */
.app_navigation_bottom_carousel.hide-text i, .app_navigation_bottom.hide-text i{ font-size:30px; }
.app_navigation_list.hide-icon i, .app_navigation_list.hide-icon a img, .app_navigation_newLayout_list.hide-icon i, .app_navigation_newLayout_list.hide-icon a img, .hide-icon a i{ display:none;}
.app_navigation_list.hide-icon a span, .app_navigation_list.rounded-option.hide-icon a span, .app_navigation_list.centered-option.hide-icon a span, .app_navigation_newLayout_list.hide-icon a span, .app_navigation_newLayout_list.rounded-option.hide-icon a span, .app_navigation_newLayout_list.centered-option.hide-icon a span{width:calc(100% - 30px);line-height:40px;padding:0 15px}
.app_navigation_matrix.hide-background a span, .app_navigation_matrix2.hide-background a span, .app_navigation_list.hide-background a, .app_navigation_list.hide-background span, .app_navigation_matrix.hide-background i, .app_navigation_matrix.hide-background img, .app_navigation_matrix.hide-background i, .app_navigation_matrix.hide-background img, .app_navigation_newLayout_matrix.hide-background a span, .app_navigation_newLayout_list.hide-background a, .app_navigation_newLayout_list.hide-background span, .app_navigation_newLayout_matrix.hide-background i, .app_navigation_newLayout_matrix.hide-background img, .app_navigation_newLayout_matrix.hide-background i, .app_navigation_newLayout_matrix.hide-background img{ background-color:rgba(0,0,0,0) !important;}
/*.app_navigation_matrix.hide-background img, .app_navigation_matrix2.hide-background img{max-width:70px; max-height:70px;}*/
/*.app_navigation_matrix.hide-background.xlargeNav img, .app_navigation_matrix2.hide-background.xlargeNav img{max-width:68px; max-height:68px;}*/
/*.app_navigation_matrix.hide-background img, .app_navigation_matrix2.hide-background img{max-width:90px; max-height:90px;}*/
/*.app_navigation_matrix.hide-background.xlargeNav img, .app_navigation_matrix2.hide-background.xlargeNav img{max-width:68px; max-height:68px;}*/
.app_navigation_matrix.hide-background img {
background-color:rgba(0,0,0,0) !important;
}
/* New Ui's
,,,.app_navigation_list.centered-option.rounded-option.hideBorder a,{border:0}*/
/*=================
Header Option Declare
====================*/
.headerColor{background-image:none;}
.headerImage{background-size:100% 100%;background-repeat:no-repeat;background-position:center; background-color:#000;}
.headerNoBG{background-image:none;}
h1#pageTitle.ui-title{ text-shadow:none;}
.navbar-inner.navHeader {padding:0 !important;}
/*=================
Custom color Declare
====================*/
.custom-color{color:inherit !important; } .custom-color *{color:inherit !important; }
/*=================
Background animation classes
====================*/
.bg-images {
display:none;
}
.animated-bg{ transition: background-image 3s ease 1s; -webkit-transition: background-image 3s ease 1s; -moz-transition: background-image 3s ease 1s;}
.animated-bg{ background-repeat:no-repeat !important; background-size:100% 100% !important; background-color:#000 !important}
/*=================
Chat Icons Declare
====================*/
.chat-room .chat-pic i{ display: block; font-size: 45px; overflow: hidden; text-align: center; text-overflow: ellipsis; text-transform: capitalize; width: 100%;}
.chat-room .chat-pic [class^="icon-"]:before,.chat-room .chat-pic [class*=" icon-"]:before,.chat-room .chat-pic [class^="iconz-"]:before,.chat-room .chat-pic [class*=" iconz-"]:before,.chat-room .chat-pic [class^="iconzu-"]:before,.chat-room .chat-pic [class*=" iconzu-"]:before,.chat-room .chat-pic [class^="appyicon-"]:before,.chat-room .chat-pic [class*=" appyicon-"]:before{ line-height:1.2em }
/*=================
Dirctory Page new icons
====================*/
.dirctroy-inner-icon i{ color: #fff; font-size: 20px; overflow: hidden; text-align: center; text-overflow: ellipsis; text-transform: capitalize;width: 25px; margin: 0 5px 0 0;line-height: 25px !important; float:left;}
.dirctroy-inner-icon [class^="icon-"]:before,.page_innerIcon [class*=" icon-"]:before,.page_innerIcon [class^="iconz-"]:before,.page_innerIcon [class*=" iconz-"]:before,.page_innerIcon [class^="iconzu-"]:before,.page_innerIcon [class*=" iconzu-"]:before,.page_innerIcon [class^="appyicon-"]:before,.page_innerIcon [class*=" appyicon-"]:before{ line-height:1.2em }
.directory-newTab i{ font-size: 25px;; overflow: hidden; line-height:38px; height:38px; width:33%}
.directory-newTab [class^="icon-"]:before,.directory-newTab [class*=" icon-"]:before,.directory-newTab [class^="iconz-"]:before,.directory-newTab [class*=" iconz-"]:before,.directory-newTab [class^="iconzu-"]:before,.directory-newTab [class*=" iconzu-"]:before,.directory-newTab [class^="appyicon-"]:before,.directory-newTab [class*=" appyicon-"]:before{ line-height:1em }
/*=================
Video Page new icons
====================*/
.custom-video i{ display: block; font-size: 45px; overflow: hidden; text-align: center; text-overflow: ellipsis; text-transform: capitalize; width: 100px; float:left; line-height:100px;margin: 0 10px 0 0;}
/*=================
E-reader Page new icons
====================*/
.e-readerimage[class^="icon-"]:before,.directory-newTab [class*=" icon-"]:before,.directory-newTab [class^="iconz-"]:before,.directory-newTab [class*=" iconz-"]:before,.directory-newTab [class^="iconzu-"]:before,.directory-newTab [class*=" iconzu-"]:before,.directory-newTab [class^="appyicon-"]:before,.directory-newTab [class*=" appyicon-"]:before{ line-height:1em }
/*=================
Header new icons
====================*/
.headerIcon{ width:30px; height:30px; display:block; text-indent:-1px }
.headerIcon[class^="icon-"]:before,.headerIcon [class*=" icon-"]:before,.headerIcon [class^="iconz-"]:before,.headerIcon [class*=" iconz-"]:before,.headerIcon [class^="iconzu-"]:before,.headerIcon [class*=" iconzu-"]:before,.headerIcon [class^="appyicon-"]:before,.headerIcon [class*=" appyicon-"]:before{ line-height:1em }
.headerIcon i{ font-size: 25px; overflow: hidden; line-height:30px;width:30px; height:30px; }
.headerIcon img{ width:30px; height:30px; }
/* =======================
Global Theme ==============*/
/* ===
GREEN THEME ==== */
.green{
background: -moz-linear-gradient(top, rgba(139,198,45,0.2) 0%, rgba(100,147,31,0.6) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(139,198,45,0.2)), color-stop(100%,rgba(100,147,31,0.6)));
background:linear-gradient(to bottom, rgba(139,198,45,0.2) 0%,rgba(100,147,31,0.6) 100%);
}
/* ===
BLUE THEME ==== */
.blue{
background: -moz-linear-gradient(top, rgba(33,133,171,0.2) 0%, rgba(51,126,154,0.6) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(33,133,171,0.2)), color-stop(100%,rgba(51,126,154,0.6)));
background: linear-gradient(to bottom, rgba(33,133,171,0.2) 0%,rgba(51,126,154,0.6) 100%);
}
/* ===
YELLOW THEME ==== */
.yellow{
background: -moz-linear-gradient(top, rgba(248,180,5,0.2) 0%, rgba(238,140,11,0.6) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,180,5,0.2)), color-stop(100%,rgba(238,140,11,0.6)));
background: linear-gradient(to bottom, rgba(248,180,5,0.2) 0%,rgba(238,140,11,0.6) 100%);
}
/* ===
ORANGE THEME ==== */
.orange{
background: -moz-linear-gradient(top, rgba(255,94,30,0.2) 0%, rgba(255,94,30,0.27) 17%, rgba(192,56,2,0.6) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,94,30,0.2)), color-stop(17%,rgba(255,94,30,0.27)), color-stop(100%,rgba(192,56,2,0.6)));
background: linear-gradient(to bottom, rgba(255,94,30,0.2) 0%,rgba(255,94,30,0.27) 17%,rgba(192,56,2,0.6) 100%);
}
/* ===
RED THEME ==== */
.red{
background: -moz-linear-gradient(top, rgba(217,2,0,0.2) 0%, rgba(217,2,0,0.27) 18%, rgba(139,42,37,0.6) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(217,2,0,0.2)), color-stop(18%,rgba(217,2,0,0.27)), color-stop(100%,rgba(139,42,37,0.6)));
background: linear-gradient(to bottom, rgba(217,2,0,0.2) 0%,rgba(217,2,0,0.27) 18%,rgba(139,42,37,0.6) 100%);
}
/* ===
BLACK THEME ==== */
.black{
background: -moz-linear-gradient(top, rgba(70,70,70,0.2) 0%, rgba(70,70,70,0.27) 17%, rgba(23,23,23,0.6) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(70,70,70,0.2)), color-stop(17%,rgba(70,70,70,0.27)), color-stop(100%,rgba(23,23,23,0.6)));
background: linear-gradient(to bottom, rgba(70,70,70,0.2) 0%,rgba(70,70,70,0.27) 17%,rgba(23,23,23,0.6) 100%);
}
/* ===
transparent THEME ==== */
.transparent {
background: none;
height: 100%
}
/* ===
for common icon list view ==== */
.common-list {
width: calc(50% - 12px);
float: left;
height: 170px;
padding: 15px 0 0 0;
text-align: center;
background: #c7c7c7;
margin: 8px 11px;
border-radius: 15px;
border-bottom: 8px solid transparent;
box-sizing: border-box;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
}
.common-list:hover {
border-bottom: 8px solid #f00;
transform: scale(1.09);
-webkit-transform: scale(1.09);
-moz-transform: scale(1.09);
}
.common-list span i {
box-shadow: none;
height: 80px;
font-size: 50px;
}
.common-list span i::before {
line-height: 2 !important;
}
.common-list img {
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
width: auto;
height: 85px;
/* box-shadow: 0px 0px 3px #FFFFFF; */
background-size: cover !important;
margin-top: 0;
}
.common-list span{
text-align:center;
margin: 10px 0 0;
width:100%;
float:left;
height: 5em;
line-height: 1.6em;
overflow: hidden;
padding: 0 5px;
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
}
.app-content .breadcrumb h1{
display: block;
width: 100%;
margin-top: -10px !important;
margin: 0;
}
.app-content .breadcrumb p {
width: 100%;
margin: 0px auto 0px;
line-height: 3.5em;
padding: 0;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-content .main-banner .breadcrumb p,
.app-content .main-banner h1.left {
max-width: 90%;
padding: 0 10px;
margin: 0 auto;
box-sizing: border-box;
}
.android .common-list:hover,
.ios .common-list:hover {
border-color: transparent !important;
transform: scale(1);
-webkit-transform: scale(1);
}
@media(max-width: 767px) {
.common-list {
margin: 4px 6px;
}
.common-list:hover {
transform:scale(1);
-webkit-transform:scale(1);
-moz-transform:scale(1);
}
}
@media (min-width: 420px){ .common-list { width:47% } }
@media (min-width: 600px){ .common-list { width:25% } }
@media (min-width: 740px){ .common-list { width:20% } }
@media (min-width: 1024px){
.common-listt { width:17.5% }
}
@media (min-width: 1250px){
.common-list { width:18% }
}
/* //@media (min-width: 880px){ .common-list { width:16.66% } } */
.page[data-page="commanPage"] .page-content {
text-align: center;
}
/* ------------------------------------------------------------------- App Bg Animation ------------- */
.backgroundAnimation {
height: 100%;
position: fixed;
top: 0;
width: 100%;
}
.backgroundAnimation .background-image{height: 100%; width: 100%; position:absolute; z-index: 10; top: 0; background-size: 100% 100%; background-repeat: no-repeat;}
.backgroundAnimation .background-theme{ height: 100%; width: 100%; position:absolute; z-index: 11; top: 0; }
.backgroundAnimation .background-overlay{ height: 100%; width: 100%; position: fixed; z-index: 12; top: 0 }
.backgroundAnimation {
height: 100%;
position: fixed;
top: 0;
width: 100%;
}
.backgroundAnimation img { -webkit-animation-name: cf4FadeInOut; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 8s; -moz-animation-name: cf4FadeInOut; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-duration: 8s; -o-animation-name: cf4FadeInOut; -o-animation-timing-function: ease-in-out; -o-animation-iteration-count: infinite; -o-animation-duration: 8s; animation-name: cf4FadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 8s; position:absolute; width:100%; height:100%; }
.backgroundAnimation img:nth-of-type(1) { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; animation-delay: 6s;}
.backgroundAnimation img:nth-of-type(2) { -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; animation-delay: 4s;}
.backgroundAnimation img:nth-of-type(3) { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; -o-animation-delay: 2s; animation-delay: 2s;}
.backgroundAnimation img:nth-of-type(4) { -webkit-animation-delay: 0; -moz-animation-delay: 0; -o-animation-delay: 0; animation-delay: 0;}
@-webkit-keyframes cf4FadeInOut {0% { opacity:1;}17% {opacity:1;}25% {opacity:0;}92% {opacity:0;}100% {opacity:1;}}
@-moz-keyframes cf4FadeInOut {0% {opacity:1;}17% {opacity:1;}25% {opacity:0;}92% {opacity:0;}100% {opacity:1;}}
@-o-keyframes cf4FadeInOut {0% { opacity:1;} 17% {opacity:1;}25% {opacity:0;}92% {opacity:0;}100% {opacity:1;}}
@keyframes cf4FadeInOut {0% { opacity:1; } 17% { opacity:1; } 25% { opacity:0; } 92% { opacity:0; } 100% { opacity:1; }}
/*------------------notification------------------*/
/* .notificationWrapper{}.notification{display:inline-block;float:left;width:100%;position:relative;margin:0;padding:0}.notification li{background: rgba(0,0,0,0.1) none repeat scroll 0 0;display: inline-block;float: left;position: relative;width: 100%;border-bottom: 1px solid rgba(0,0,0,0.1);min-height: 36px;word-wrap: break-word; padding: 10px;
box-sizing: border-box;}.notification li a{color:#c1d7ff}.notificationImageWrapper{background:rgba(0,0,0,0.2);border:0 solid #f0f0f0;border-radius:0;float:left;font-size:30px!important;height:54px;line-height:55px;margin-bottom:0;margin-right:10px;padding:0;text-align:center;width:54px}.notificationImageWrapper img{background-size:cover!important;display:inline-block;height:100%;width:100%}.notificationText{font-style: italic; margin: 0; text-indent: 0; width: calc(100% - 64px); float: left;}.noti-full .notificationText{width:100%;}.notification .btn{border:1px solid rgba(0,0,0,0.1);border-radius:5px;box-sizing:border-box;color:#fff;display:block;font-size:14px;margin:20px 0 0;padding:10px 30px;text-align:center;width:48%}.btnLeft{float:left}.btnRight{float:right}.bodypan{box-sizing:border-box;display:inline-block;float:left;padding:15px;position:relative;width:100%}
h1{font-weight:700;margin:0 0 10px;padding:0 0 5px}p{font-weight:400;margin:0;padding:0} */
.dropdown-content{background-color:#967979;border-radius:2px;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);display:none;min-width:120px;padding:0;position:absolute;right:5px;top:44px; z-index:700100; width:130px}.dropdown-content .before{bottom:100%;right:5px;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(136,183,213,0);border-bottom-color:#fff;border-width:7px;margin-left:-20px}.dropdown-content a{border-top:1px solid;float:left;font-size:13px!important;margin:0!important;padding:10px!important;text-align:left;vertical-align:middle;width:100%;box-sizing:border-box}.dropdown-content a.first{border:0px}
.notificationProfile input,.notificationProfile select,.notificationProfile textarea{width:100%;background-color:#fff;outline:0;border:0;border-bottom:solid 1px #94c7df;padding:9px;font-size:14px;box-sizing:border-box;appearance:none;margin-bottom:7px}.margin-top-50{margin-top:50px}
.dropdown-content a.first span {
background: red;
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
right: 5px;
top: 10px;
line-height: 20px;
text-align: center;
border-radius: 100%;
}
.dropdown-content .login.none,
.dropdown-content .logout.yes,
.dropdown-content .profile.yes {
display:block;
}
.dropdown-content .login.yes,
.dropdown-content .logout.none,
.dropdown-content .profile.none,
.dropdown-content .rate.none,
.dropdown-content .share.none,
.dropdown-content .myfiles.none {
display:none;
}
.profile_wp{max-width: 100px;
margin: 10px auto 10px;
border-radius: 60%;
height: 100px;
border: 5px solid #fff;
width: 100px;
position:relative;}
.ProfileImg4Notification{width: 100%; box-sizing: border-box; background-size:cover !important;background-repeat: no-repeat !important;background-position:center !important; border-radius: 100%;}
.profile_wp .editProfilebutton{position:absolute; right:-10px; top:-10px; font-size:18px;}
.notificationEditProTxt{margin:0 0 15px 0;}
.notificationProfile ::-webkit-input-placeholder {
color: #fff;
}
.notificationEditProTxt{margin:0 0 15px 0;}
.notificationProfile ::-webkit-input-placeholder {
color: #fff;
}
.notificationProfile :-moz-placeholder{
color: #fff;
}
.notificationProfile ::-moz-placeholder {
color: #fff;
}
.notificationProfile :-ms-input-placeholder {
color: #fff;
}
.imgIcon { border-radius: 50%; height: 250px; width: 250px;}
.submit-button a{ margin:auto;}
.msg-code { left: 0; padding: 10px; position: relative; text-align: center; top: 0; position: relative; box-sizing: border-box; height: 100%; min-height: 300px;}
.msg-code.msgbtn{padding-bottom:50px;}
.msg-container{
left: 0;
position: absolute;
top: 50%;
margin: -121px 0 0 0;
width: 100%;
}
.msg-static {
left: 0;
position: relative;
top: 0;
margin: 0;
width: 100%;
height: 300px;
}
.msg-code .icon {
/* border-radius: 50%;
box-shadow: -1px -5px rgba(0, 0, 0, 0.2);
display: block;
font-size: 148px;
height: 160px;
line-height: 160px;
margin: 0 auto;
padding: 31px;
text-shadow: -1px -5px rgba(0, 0, 0, 0.2);
width: 160px; */
border-radius: 50%;
box-shadow: -3px -3px rgb(0 0 0 / 20%);
display: block;
font-size: 150px;
height: 220px;
line-height: 160px;
margin: 0 auto;
padding: 20px;
text-shadow: -3px -3px rgb(0 0 0 / 20%);
width: 220px;
display: flex;
align-items: center;
justify-content: center;
}
.msg-container .icon.icon-cart:after {
background: red none repeat scroll 0 0;
border: 1px solid red;
content: "";
height: 230px;
left: 50%;
position: absolute;
top: 3px;
transform: rotate(20deg);
width: 8px;
}
.msg-container .icon{border-style: solid; border-width: 10px;}
.msg-container.icon {border-style: solid; border-width: 10px;}
.msg-container h2 {
text-align: center;
padding: 0 15px;
box-sizing: border-box;
margin: 10px 0;
}
.msg-code h2 { text-shadow: 2px 2px rgba(0,0,0,0.2); }
.msg-code > span {font-size: 14px;}
.error-page { left: 0; padding: 10px; position: relative; text-align: center; top: 0; background: #f5f8f6; box-sizing: border-box; height: 100%; min-height: 370px;}
.error-content {transform: translate(-50%, -30%); top: 50%; position: absolute; left: 50%; width: 130px; color: #fff;}
.msg-button {background: #CC6200;
color: #ffffff;
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
line-height: 40px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: calc(100% - 20px);
-webkit-width: calc(100% - 20px);
-moz-width: calc(100% - 20px);
}
/* Portrait and Landscape */
@media screen and (orientation:portrait) {
.portrait{display:block;}
.landscape{display:none;}
}
@media screen and (orientation:landscape) {
.portrait{display:none;}
.landscape{display:block;}
}
.page-search-box {
width:100%;
float:left;
padding:10px;
box-sizing:border-box;
position:relative;
}
.page-search-box input {
float: left;
width: 100%;
box-sizing: border-box;
padding: 10px 10px 10px 40px;
border: 0px;
outline: 0px;
border-radius: 20px;
background: rgba(255,255,255,0.4);
color: #333;
appearance: none;
}
.page-search-box input::-webkit-input-placeholder {
color: #333;
}
.page-search-box input::-moz-placeholder {
color: #333;
}
.page-search-box input:-ms-input-placeholder {
color: #333;
}
.page-search-box input:-moz-placeholder {
color: #333;
}
input[type='search']::-webkit-search-cancel-button {
display: none;
}
.search-nodata {
width:100%;
line-height:50px;
text-align:center;
}
.page-search-box a {
position:absolute;
left:10px;
top:10px;
text-align:center;
line-height:40px;
width:40px;
color:#333;
}
.navbar:not(.site-header,.sub-header) a {
font-size:22px;
}
.navbar a.menu-down,
.navbar a .icon-menu {
font-size:28px;
}
.navbar-inner {
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center center;
}
small {
font-size: .75em!important;
}
.dropdown-overlay {
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:600000;
display:none;
}
.bottom_height {
height:calc(100% - 44px);
}
.bottom_height .toolbar-through .page-content{padding-bottom:0px;}
/* ----- Zopim chat ----- */
.zohochat {
position: absolute;
right: 10px;
bottom: 10px !important;
width: 126px;
height: 30px;
background-Color: #008FC8;
color: #ffffff;
border-radius: 5px;
font-size: 14px;
line-height: 33px;
z-index: 6000;
}
.zohochat.zopimbottom{
bottom: 65px !important;
}
.zohochat.zopimbottomwithads{
bottom: 50% !important;
}
.zohochat b {
width: 30px;
height: 30px;
float: left;
margin: 0 6px 0 0;
background: #027fbc;
overflow: hidden;
border-radius: 5px;
text-align: center;
}
.zohochat input {
width: 20px;
height: 20px;
position: absolute;
right: -2px;
top: -10px;
background: #fff;
text-align: center;
padding: 0;
border-radius: 100%;
border: 0px;
margin: 0px;
line-height: 22px;
color: #027fbc;
border: solid 2px #027fbc;
}
.zohochat i {
color: #FFF;
font-size: 18px;
text-align: center;
line-height: 36px;
}
.zohochat a { color: #ffffff ; font-size:14px; line-height:30px;}
a.rate.none, a.share.none { display: none;}
.navbar .left a.back,
.navbar .right a.back {
padding:0 12px;
font-size: 26px;
}
.preview-mode .navbar .left a.back {
visibility: hidden;
}
.folderPage .app_navigation_bottom a,
.folderPage .app_navigation_list a,
.folderPage .app_navigation_imglist a,
.folderPage .app_navigation_imgmatrix a,
.folderPage .app_navigation_slidemenu a,
.folderPage .app_navigation_matrix a,
.app_navigation_list.pageSearch a {
opacity:1;
}
.app_navigation_bottom.done a,
.app_navigation_list.done a,
.app_navigation_imglist.done a,
.app_navigation_imgmatrix.done a,
.app_navigation_slidemenu.done a,
.app_navigation_matrix.done a,
.app_navigation_bottom.animation-0 a,
.app_navigation_list.animation-0 a,
.app_navigation_imglist.animation-0 a,
.app_navigation_imgmatrix.animation-0 a,
.app_navigation_slidemenu.animation-0 a,
.app_navigation_matrix.animation-0 a {
opacity:1;
}
.layout-preloader,
.layout-disabled {
position:fixed;
z-index:100000;
width:100%;
height:100%;
left:0px;
top:0px;
background:rgba(0,0,0,0.4);
}
.layout-disabled {
background:rgba(0,0,0,0);
}
.layout-preloader .preloader {
width:50px;
height:50px;
position:absolute;
left:50%;
top:50%;
margin:-25px 0 0 -25px;
}
.cardStorage {
margin:0 0 10px 0;
}
.cardStorage,
.cardStorage .cardRow {
float:left;
width:100%;
}
.cardStorage .cardRow {
margin:0 0 0 0;
border-bottom:solid 1px #CCC;
position:relative;
}
.cardStorage .cardRow b {
width: 100%;
margin: 0 0;
float: left;
line-height: 30px;
padding: 10px;
background: #F00;
color: #FFF;
box-sizing: border-box;
}
.cardStorage .cardRow:first-child b {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.cardStorage .cardRow:last-child b {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.cardStorage .cardRow:last-child {
border-bottom:solid 0px #CCC;
}
.cardStorage .cardRow .text,
.cardStorage .cardRow .icons {
float:left;
width:auto
}
.cardStorage .cardRow .icons .last {
margin:0 10px 0 0;
}
.save-card {
float:left;
width:100%;
padding:5px 0;
margin:0 0 5px 0;
}
.save-card input {
width: auto;
margin: 0 5px 0 0;
float: none;
position: relative;
top: 3px;
padding: 8px;
}
.save-card span {
float:none;
}
.cardStorage-divider {
width:100%;
width:calc(100% + 24px);
float:left;
height:0px;
border-bottom:solid 2px #F00;
margin:15px 0;
position:relative;
left:-12px;
}
.cardStorage .cardRow .delete {
position: absolute;
right: 5px;
top: 5px;
line-height: 30px;
height: 30px;
background: #fff;
width: 30px;
text-align: center;
border-radius: 5px;
}
.navbar .left a.menu-down {
margin:0px;
}
.navbar .left .menu-down i.appyicon-sort-down {
font-size:24px;
padding:0 4px;
}
.navbar .left .menu-down i.icon-angle-double-down {
padding:0;
}
.user-files {
float:left;
width:100%;
margin:0px;
padding:0px;
padding:8px;
color:#333;
box-sizing: border-box;
}
.user-files li {
float:left;
width:100%;
padding:8px 8px 8px 66px;
position:relative;
background:#f1f1f1;
box-sizing: border-box;
margin:0 0 8px 0;
box-shadow: 0 0 3px #333;
border-radius: 3px
}
.user-files li i {
height: 50px;
font-size: 30px;
background: #e1e1e1;
color: #333;
position: absolute;
left: 8px;
top: 8px;
width: 50px;
text-align: center;
line-height: 50px;
}
.user-files li h4 {
font-weight:normal;
float:left;
width:100%;
line-height:30px;
font-size:18px;
margin:0px;
padding:0px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.user-files li span {
float:left;
width:100%;
line-height:20px;
font-size:14px;
}
.location-search {
float:left;
width:100%;
position:relative;
height: 44px;
}
.location-search a,
.location-search i {
position: absolute !important;
left: 0;
top: 3px;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 24px;
text-align: center;
}
.location-search i {
left: 25px;
font-size: 16px;
top: 0;
}
.location-search div {
width: calc(100% - 45px);
margin: 0 0 0 35px;
border: 0;
border-bottom: solid 1px #FFF;
height: 36px;
}
.location-search input {
height: 40px;
padding: 10px 10px 10px 25px;
width: 100%;
background: none;
border: 0;
box-sizing: border-box;
}
.modal-inner.modal-image {
padding:15px 15px 0 15px;
}
.image-upload,
.image-upload li {
line-height:40px;
width:100%;
position:relative;
margin:0px;
padding:0px;
list-style:none;
}
.image-upload li {
padding:0 15px;
border-top:solid 1px #007aff;
left:-15px;
color:#007aff;
}
.image-upload li input {
position:absolute;
left:0px;
top:0px;
opacity:0;
width:100%;
height:100%;
}
.mobile .navbar .desktop,
.desktop .navbar .mobile {
display:none;
}
.desktop .navbar .desktop,
.mobile .navbar .mobile {
display: block;
}
.router-link {
display: none;
}
/* mobile matrix layout */
.ismatrix ul {
float: left;
width: 100%;
}
.ismatrix ul li a {
display: block;
width: 96px;
height: 96px;
box-sizing: border-box;
margin: 0 auto;
border: 1px solid;
position: relative;
width: 13%;
margin: 0;
float: left;
margin: 18px calc(2% - 4px) 0px calc(2% - 4px);
overflow: hidden;
padding: 0
}
.ismatrix ul li a img.pageIcon {
width: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.ismatrix ul li a i.pageIcon {
display: block;
width: 100%;
font-size: 45px;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
line-height: 96px;
justify-content: center;
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100%;
}
.ismatrix ul li span.pagename {
position: absolute;
bottom: 0px;
display: block;
width: 100%;
margin: 0 1px;
text-align: center;
color: #333;
text-transform: capitalize;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding: 3px 10px;
box-sizing: border-box;
left: -1px;
}
.ismatrix.border-YES ul li a, .ismatrix.border-YES ul li a i.pageIcon {
border: none !important;
}
.ismatrix.bg-YES ul li a {
background: none !important;
}
.ismatrix.bg-YES.reduce_iconbg-NO ul li a span.pagename {
background: none !important;
}
.ismatrix.bg-YES ul li a i.pageIcon,
.ismatrix.round-YES ul li span.pagename {
background: none !important;
}
.ismatrix.round-YES ul li a {
border: 0;
height: 80px;
}
.ismatrix.text-NO.round-YES ul li a {
height: 96px;
}
.ismatrix.text-YES ul li a i.pageIcon {
font-size: 50px;
}
.ismatrix.text-YES ul li span.pagename {
display: none;
}
.ismatrix.semiround-YES ul li a {
border-radius: 20px;
}
.ismatrix.shadow-YES ul li a {
box-shadow: 1px 2px 13px 8px rgba(51,51,51,.08);
}
.ismatrix.bg-NO.round-YES.shadow-YES ul li a {
box-shadow: none;
}
.ismatrix.round-YES.shadow-YES ul li a i {
box-shadow: 0px 4px 6px 2px rgba(51,51,51,.08);
}
.ismatrix.reduce_iconbg-YES ul li a span.pagename {
background: rgba(189, 189, 189, 0.4) !important;
bottom: 0;
}
.ismatrix.icon-YES ul li a i {
display: none;
}
.ismatrix.icon-YES ul li a span {
top: 50%;
transform: translateY(-50%);
bottom: auto;
}
.ismatrix.round-YES ul li a i.pageIcon {
width: 75px;
border-radius: 100%;
line-height: 75px;
margin: 0 auto;
border: 1px solid;
height: 75px;
font-size: 45px;
}
.ismatrix.round-YES ul li span.pagename {
bottom: -5px;
}
.ismatrix.bg-YES.icon-YES.text-NO.border-YES.round-YES.shadow-YES.semiround-YES.reduce_iconbg-YES ul li a {
height: 60px;
line-height: 2em;
margin-bottom: 0;
margin-top: 0;
}
.ismatrix.bg-YES.round-YES.reduce_iconbg-YES ul li a span {
background: transparent !important;
bottom: -5px;
}
.ismatrix.bg-YES.icon-YES.border-YES.round-YES.shadow-YES ul li a {
box-shadow: 1px 2px 13px 8px rgba(51,51,51,.08);
}
.ismatrix.icon-YES ul li a span.pagename {
background: transparent !important;
}
.ismatrix.text-YES ul li a {
height: 85px;
}
.ismatrix.bg-NO.icon-YES.round-YES ul li a, .ismatrix.bg-YES.icon-YES.round-YES ul li a {
border-radius: 50%;
height: 80px;
line-height: 3.5;
}
.ismatrix.bg-NO.round-YES ul li a {
background: transparent !important;
}
.ismatrix.icon-YES.border-NO ul li a {
height: 26px;
border: 1px solid;
}
/* list layout css */
.list-layout ul {
float: left;
width: 100%;
}
.list-layout ul li {
padding: 5px 10px;
border-bottom: 1px solid;
float: left;
box-sizing: border-box;
width: 100%;
margin-bottom: 0px;
}
.list-layout ul li:last-child {
border: none;
}
.list-layout ul li a {
display: flex;
float: left;
width: 100%;
align-items: center;
}
.list-layout ul li a .pageIcon {
width: 30px;
height: 30px;
background-size: contain;
float: left;
background-repeat: no-repeat;
background-position: center;
}
.list-layout ul li a .pagename {
float: left;
width: calc(100% - 70px);
padding: 6px 10px;
line-height: 35px;
}
.list-layout ul li a i.pageIcon {
font-size: 25px;
}
.list-layout.border-YES ul li {
border: none !important;
}
.list-layout.icon-YES ul li a .pageIcon {
display: none;
}
.list-layout.icon-YES ul li a {
padding: 4px 0;
width: 100%;
}
.list-layout.shadow-YES ul li {
box-shadow: 0px 1px 4px rgb(0 0 0 / 40%);
margin: 2px 0 5px !important;
}
.list-layout.bg-YES ul li {
background: transparent;
}
.list-layout.icon-YES ul li a .pagename {
padding: 0;
}
.list-layout.border-radius-YES ul {
padding: 5px;
box-sizing: border-box;
}
.list-layout.border-radius-YES ul li {
border-radius: 100px;
margin: 2px 0;
border: 1px solid;
}
.list-layout.list-center-YES {
background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
margin: 18px 4.5%;
min-height: 100px;
overflow-x: hidden;
padding: 3%;
width: 90%;
box-sizing: border-box;
}
/* pwaAdvanceMatrix New layout */
div#app_navigation.pwaAdvanceMatrix {
max-width: 90%;
margin: 0px auto;
}
.swiper-container.pwaAdvanceMatrixBanner {
height: 240px;
overflow: hidden;
}
.pwaAdvanceMatrixBanner img {
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 240px;
float: left;
}
.pwaAdvanceMatrixBanner .swiper-button-next, .pwaAdvanceMatrixBanner .swiper-button-prev {
font-size: 60px;
background: transparent !important;
transform: translateY(-50%);
}
.pwaAdvanceMatrix ul {
display: flex;
align-items: center;
/* justify-content: center; */
flex-flow: row wrap;
margin: 20px 0px 0px;
}
.pwaAdvanceMatrix ul li{
width: 13%;
align-items: center;
display: flex;
margin: 1.83%;
}
.pwaAdvanceMatrix ul li a {
flex-flow: column;
width: 100%;
box-sizing: border-box;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-width: 1px;
border-style: solid;
border-color: initial;
border-image: initial;
margin: 0px;
padding:0px;
overflow: hidden;
height: 100%;
}
img.ratio_img {
width: 100%;
float: left;
}
.pwaAdvanceMatrix ul li a .matrix_wrap {
width: 100%;
height: 100%;
position: absolute;
}
.pwaAdvanceMatrix ul li a img.pageIcon {
width: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.pwaAdvanceMatrix ul li a .pageIcon {
display: flex;
width: 100%;
font-size: 48px;
text-align: center;
text-overflow: ellipsis;
justify-content: center;
position: relative;
}
.pwaAdvanceMatrix ul li a .pageIcon::before{
position: absolute;
top: 50%;
transform: translate(-50%, calc(-50% - 10px));
left: 50%;
}
.pwaAdvanceMatrix ul li span.pagename {
height: 36px;
display: block;
width: 100%;
margin: 0;
text-align: center;
text-transform: capitalize;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding: 6px 10px;
position: absolute;
bottom: 0;
box-sizing: border-box;
}
.pwaAdvanceMatrix.border-YES ul li a,
.pwaAdvanceMatrix.border-YES ul li a .pageIcon {
border: none !important;
}
.pwaAdvanceMatrix.bg-YES ul li a {
background-color: transparent !important;
}
.pwaAdvanceMatrix.bg-YES.reduce_iconbg-NO ul li a span.pagename {
background-color: transparent !important;
}
.pwaAdvanceMatrix.bg-YES ul li a .pageIcon,
.pwaAdvanceMatrix.round-YES ul li span.pagename {
background-color: transparent !important;
}
.pwaAdvanceMatrix.round-YES ul li a {
border: 0;
}
.pwaAdvanceMatrix.text-YES ul li a .pageIcon {
font-size: 54px;
}
.pwaAdvanceMatrix.text-YES ul li a .pageIcon::before,
.pwaAdvanceMatrix.round-YES ul li a .pageIcon::before{
transform: translate(-50%, -50%);
}
.pwaAdvanceMatrix.text-YES ul li a{
padding: 0
}
.pwaAdvanceMatrix.text-YES ul li a img.pageIcon {
width: 100%;
height: 100%;
}
.pwaAdvanceMatrix.text-YES ul li span.pagename {
display: none;
}
.pwaAdvanceMatrix.semiround-YES ul li a {
border-radius: 20px;
}
.pwaAdvanceMatrix.text-YES.semiround-YES ul li a .pageIcon {
margin-bottom: 14px;
}
.pwaAdvanceMatrix.round-YES.shadow-YES ul li a {
box-shadow: none !important;
}
.pwaAdvanceMatrix.shadow-YES ul li a {
box-shadow: 1px 2px 13px 8px rgba(51,51,51,.08);
}
.pwaAdvanceMatrix.bg-NO.round-YES.shadow-YES ul li a {
box-shadow: none;
}
.pwaAdvanceMatrix.round-YES.shadow-YES ul li a .pageIcon{
box-shadow: 0px 4px 6px 2px rgba(51,51,51,.08);
}
.pwaAdvanceMatrix.icon-YES ul li a i {
display: none;
}
.pwaAdvanceMatrix.icon-YES ul li a span {
top: 50%;
transform: translateY(-50%);
bottom: auto;
}
.pwaAdvanceMatrix.round-YES ul li a .pageIcon {
width: 100%;
border-radius: 100%;
line-height: 100%;
margin: 0 auto;
border: 1px solid;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 30px;
box-sizing: border-box;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.pwaAdvanceMatrix.round-YES ul li span.pagename {
bottom: -5px;
}
.pwaAdvanceMatrix.bg-YES.icon-YES.text-NO.border-YES.round-YES.shadow-YES.semiround-YES.reduce_iconbg-YES ul li a {
height: 60px;
line-height: 2em;
margin-bottom: 0;
margin-top: 0;
}
.pwaAdvanceMatrix.reduce_iconbg-YES ul li a{
background: transparent !important
}
.pwaAdvanceMatrix.reduce_iconbg-YES ul li a i{
background: transparent !important;
bottom: 0;
}
.pwaAdvanceMatrix.bg-YES.round-YES.reduce_iconbg-YES ul li a span {
background: transparent !important;
bottom: -5px;
}
.pwaAdvanceMatrix.bg-YES.icon-YES.border-YES.round-YES.shadow-YES ul li a {
box-shadow: 1px 2px 13px 8px rgba(51,51,51,.08);
}
.pwaAdvanceMatrix.icon-YES ul li a span.pagename {
background: transparent !important;
}
.pwaAdvanceMatrix.bg-NO.icon-YES.round-YES ul li a,
.pwaAdvanceMatrix.bg-YES.icon-YES.round-YES ul li a {
border-radius: 50%;
height: 80px;
line-height: 3.5;
}
.pwaAdvanceMatrix.bg-NO.round-YES ul li a {
background: transparent !important;
}
.pwaAdvanceMatrix.icon-YES.border-NO ul li a {
height: 26px;
border: 1px solid;
}
/* @media (max-width:1199px) {
.pwaAdvanceMatrix ul li {
width: 12.5%;
}
} */
@media (max-width:991px) {
.pwaAdvanceMatrix ul li {
/* width: calc(16.655% - 20px); */
width: 16%;
margin: 2%;
}
}
@media (max-width:767px) {
.pwaAdvanceMatrix ul li {
/* width: calc(25% - 20px); */
width: calc(25% - 4%);
}
}
@media (max-width:479px) {
div#app_navigation.pwaAdvanceMatrix {
max-width:96%;
}
.pwaAdvanceMatrix ul {
margin: 10px 0px 0px;
}
.pwaAdvanceMatrix ul li {
width: calc(33.333% - 4%);
}
.swiper-container.pwaAdvanceMatrixBanner {
height: 180px;
}
.pwaAdvanceMatrixBanner img{
height: 180px;
}
}
@media (max-width:359px) {
.pwaAdvanceMatrix.round-YES ul li a .pageIcon {
width: 75px;
line-height: 75px;
font-size: 40px;
height: 75px;
}
}
@media (max-width:1024px) {
#router-navs ul,#router-navs span.search-cat-drop {
display: none ;
}
#router-navs span.drop-search{
float: left;
width: calc(100% - 115px);
margin-right: 10px;
max-width: inherit;
}
#router-navs .drop-right-elem {
width: 90px;
box-sizing: border-box;
}
#router-navs .header-src-right {
width: 100%;
}
#router-navs .right-section {
float: none;
}
.ismatrix ul li a {
width: 14%;
margin: 18px calc(4% - 0px) 15px;
}
}
@media(max-width:979px) {
.ismatrix ul li a {
width: 17%;
}
}
@media(max-width:640px) {
.ismatrix ul li a {
width: 25%;
}
}
.disclaimer-popup {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 99;
}
.disclaimer-popup .content {
max-width: 600px;
width: calc(100% - 30px);
margin: 15px;
position: absolute;
left: 50%;
right: 0;
top: 0;
border-radius: 5px;
transform: translate(-50%, 0);
padding: 0;
box-sizing: border-box;
height: calc(100% - 30px);
box-sizing: border-box;
}
.disclaimer-popup .content div {
overflow: auto;
float: left;
width: calc(100% - 30px);
height: calc(100% - 80px);
margin: 15px;
}
.disclaimer-popup a.accept-btn {
background: #585e58;
border: solid 0px #ccc;
width: 150px;
text-align: center;
line-height: 36px;
cursor: pointer;
box-sizing: border-box;
color: #fff;
position: relative;
margin: 0 auto;
float: left;
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%, 0);
}
.iap-page-cont {
width: 100%;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
top: 50%;
transform: translateY(-50%);
max-width: 500px;
padding: 0 20px;
box-sizing: border-box;
}
.iap-page-cont i {
font-size: 100px;
}
.iap-page-cont p {
font-size: 24px;
}
@media(max-width:600px) {
.disclaimer-popup .content {
margin: 15px;
width: calc(100% - 30px);
left: 0;
transform: none;
}
}
/*== SA HEADER AND FOOTER ==*/
.app-container.sa {direction:rtl}
.sa .main-header .logo{float:right}
.sa .main-header .logo a{float:right}
.sa .main-header .logo a img{
float: right;
right: 0;
left: auto;
}
.sa .global_location_wrapper{float:left;margin-left:0;margin-right:-10px}
.sa .global_location_popup{right:inherit;left:-10px}
.sa .global_location_popup:before{right:inherit;left:11px}
.sa .location_search_box input{padding-left:10px;padding-right:37px}
.sa .location_search_box span{left:inherit;right:12px}
.sa .main-header .nav-section ul.nav-bar{float:left;padding-left:0px;padding-right:0}
.sa .main-header .nav-section ul.nav-bar::before{left:0;right:inherit}
.sa .search-section .header-title{float:left}
.sa .search-section .search-pos .icon-search-3{right:inherit;padding:0 15px 0 10px;border-left:0 solid #ccc;left:2px;border-right:1px solid #ccc}
.sa .all-category ul li{float:right}
.sa .nav-section ul li ul.user-profile li a .count{right:inherit;left:10px}
.sa .nav-section ul li ul.user-profile{right:inherit;left:15px;border-top-right-radius:12px;border-top-left-radius:0}
.sa .nav-section ul li ul.user-profile::after{border-right:13px solid transparent!important;border-left:13px solid #efefef;right:inherit;left:0}
.sa .main-header .nav-section ul.login{float:left;margin:0 20px 0 0}
.sa .main-header .nav-section ul.login li.login-user a{text-align:right;float:right}
.sa .nav-section ul.login li.login-user .icon-down-open{right:inherit;left:0}
.sa .nav-section ul li .icon-down-open{right:inherit;left:-5px}
.sa .main-header .nav-section{float:left}
.sa .nav-section ul li ul.user-profile li{text-align:right}
.sa .footer-view .nav-bar li::before{right:inherit;left:0}
.sa .footer-view .nav-bar li:last-child a{padding-right:12px;padding-left:0}
.sa .footer-view .s-icons span{margin-right:0;margin-left:10px}
.sa .footer-view .s-icons{float:right}
.sa .footer-view .nav-section{float:left;text-align:left}
.sa .page-search-box input {
padding: 10px 40px 10px 10px;
}
.sa .page-search-box a {
left: inherit;
top: 7px;
right: 10px;
}
.sa #desktop-view aside {
left: auto;
right: -300px;
}
.sa #desktop-view aside.on {
left: auto;
right: 0;
}
.sa .pwa-navigation {
max-width: 1024px;
left: inherit;
margin: 0px auto;
transform: none !important;
}
.sa .foodordering .foodordering-select li {
padding: 0 20px 0 60px;
text-align: right;
}.sa .foodordering .foodordering-select li b {
right: inherit;
left: 46px;
}
.sa .foodordering .foodordering-select li i {
right: inherit;
left: 6px;
}
.sa .foodordering .product-detail .product-attribute li .select:after {
right: inherit;
left: 12px;
}
.sa .foodordering .cart-item .product_box {
margin: 0 15px 0 0px;
}
.sa .foodordering .cart-item .product_box .product-qty input.qty {
height: 28px;
}
.sa .foodordering #email, .sa .foodordering #bAddress, .sa .foodordering #bState, .sa .foodordering #bZip, .sa .foodordering #spNo, .sa .foodordering #sCity, .sa .foodordering #sZip, .sa .foodordering #dDate {
margin-left: 0px;
margin-right: 10px;
}
.sa .page-menu .popup-show {
transform: translate3d(100%, 0, 0);
}
.sa .common-list {
float:right;
}
.sa .dropdown-content {
left: 5px;
right: inherit;
}
.sa .dropdown-content .before {left: 7px; right: inherit; margin-right: -20px; margin-left: inherit;}
.sa .main-header .nav-section .viewCart i,.sa .main-header .nav-section-mobile .viewCart i {
left: inherit;
right: 10px;
}
.sa .main-header .nav-section .viewCart,.sa .main-header .nav-section-mobile .viewCart {
float: left;
}
.sa #pp-nav.right {
right: inherit;
left: calc(5% + 5px);
}
.sa .scroll-msg-container {
right: inherit;
margin-left: auto;
left: 25px;
margin-right: -11px;
}
.sa .search-box .search-pos .icon-search-3 {
position: absolute;
right: inherit;
left: 4px;
top: 50%;
padding: 0 5px;
cursor: pointer;
transform: translateY(-50%);
}
.sa .login-mobile .cross {
right: inherit;
left:8px;
}
.sa .login-mobile .notification{
right: inherit;
left: 50px;
}
.sa .login-mobile a.user-link {
box-sizing: border-box;
text-align: right;
float: right;
width: auto;
display: flex
}
.sa .login-mobile a.user-link span {
margin:0 10px 0 0px;
}
.sa #router-navs .right-section {
float: left;
}
.sa #router-navs ul {
float: right;
}
.sa #router-navs span.drop-search {
margin-left: 10px;
}
.sa #router-navs span.search-cat-drop {
padding-right: 15px;
padding-left: 5px;
float: right;
border-right: 0px solid;
border-left: 1px solid;
}
.sa #router-navs .pos-abs-icon {
float: left;
margin-right: 0;
margin-left:-6px;
}
.sa #router-navs .form-control {
padding:0 10px 0 0px;
float: right;
}
.sa #router-navs .drop-right-elem {
float: left;
}
.sa .menu-view {
float: left;
right: inherit;
left: 0;
}
.sa .menu-view .dropdown-view {
right: inherit;
left: 5px;
}
.sa #router-navs ul li {
float: right;
}
.sa .slide-popup-show {
transform: translate(-100%, 0);
float: left;
}
.sa .slide-popup .page-content h1 a {
left: inherit;
right: 0 !important;
top: -5px;
}
.sa .main-header .nav-section ul.nav-bar li.dropdown {
margin-left: 10px;
}
.sa .pay_rect_wrap .pay_rect_left {
margin-right: 0;
float: right;
margin-left: 20px;
}
.sa .pay_rect_wrap label {
float: right;
text-align: right;
}
.sa .pay_rect_wrap input[type="text"], .sa .pay_rect_wrap input[type="password"], .sa .pay_rect_wrap input, .sa .pay_rect_wrap select, .sa .pay_rect_wrap textarea {
float: right;
}
.sa .pay_rect_wrap .form_month {
margin-right: 0;
margin-left: 10px;
}
.sa .pay_rect_wrap .cvv_info {
float: right;
text-align: right;
}
.sa .pay_rect_wrap .react_pay_btn {
float: right;
}
.nav-section ul li a,
.nav-section ul li button.others {
padding: 0px 8px;
max-width: 100px !important;
}
.footer-link .nav-section ul li a {
max-width: initial !important;
}
@media (max-width: 1024px){
.sa #router-navs .right-section {
width: 100%;
}
}
@media (max-width: 979px){
.sa #router-navs .right-section {
width: 100%;
}
.sa .main-header .nav-section-mobile {
right: inherit;
left: 20px;
}
.sa .open .main-header .nav-section.mobile-show {
right: inherit;
left: 0;
}
.sa .main-header .nav-section ul li a {
text-align: right;
}
.sa .main-header .nav-section .login-home-section ul li{
text-align: right;
/* width: 100%; */
}
.sa .main-header .nav-section .login-home-section ul li:first-child a{
text-align: left;
}
.sa .power-by ul{float: right;}
.sa .global_location_popup {
right: inherit;
top: calc(100% + 22px);
left: 50%;
transform: translateX(-50%);
}
.sa .global_location_popup:before {
right: inherit;
left: 50%;
margin-left: -5px;
}
.global_location.icon-location:before {
margin-left: 8px;
}
}
.tooltip-widget {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip-widget .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip-widget .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip-widget:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.progress-preloader{
display: block;
}
.progressbar-loader{
width: 300px;
height: 120px;
position: fixed;
background: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
padding: 15px;
border-radius: 6px;
}
.progressbar-loader p{
text-align: center;
margin-bottom: 0px;
font-size: 16px;
}
.progress-preloader .meter {
box-sizing: content-box;
height: 16px;
position: relative;
background: #ccc;
border-radius: 25px;
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
overflow: hidden;
}
.progress-preloader .meter > span {
display: block;
height: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43, 194, 83);
background-image: linear-gradient(
center bottom,
rgb(43, 194, 83) 37%,
rgb(84, 240, 84) 69%
);
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
inset 0 -2px 6px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
.progress-preloader .meter > span:after{
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
z-index: 1;
background-size: 10px 10px;
animation: move 2s linear infinite;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
@keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
.goToMainPage{
display: block;
max-width: 300px;
border: 1px solid #fff;
background: #fff;
margin: 30px auto;
padding: 12px 24px;
border-radius: 4px;
color: #000;
font-size: 1em;
cursor: pointer;
}
.page-link {
background: transparent;
border-color: transparent;
box-shadow: none;
color: inherit;
}.page-link:focus{
background: transparent;
border-color: transparent;
box-shadow: none;
color: inherit;
}
.page-link:hover{
background: transparent;
border-color: transparent;
box-shadow: none;
color: inherit;
}
.coming-soon .page-content {
background-image: url("/images/coming-soon-bg.png");
background-size: 100% auto;
background-position: left bottom;
background-color: #FAFAFA;
background-repeat: no-repeat;
height: 100%;
color: #4E4E4E;
}
.coming-soon .page-content img {
width: 470px;
max-width: 100%;
position: relative;
top: 30px;
left: -30px;
z-index: -1;
}
.coming-soon h1,
.coming-soon h2 {
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 36px;
margin: 0;
line-height: 1.6em;
}
.coming-soon h1 {
text-transform: uppercase;
}
.coming-soon h2 {
font-size: 20px;
color: #EEBD42;
margin: 0 0 10px 0;
}
.coming-soon p {
font-size: 14px;
}
.coming-soon .coming-soon-content {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: auto;
}
.nit-call {
z-index: 999;
position: absolute;
background: rgb(2 2 2 / 53%);
width: 100%;
height: 64px;
top: 0;
left: 0;
color: #fff;
}
.nit-call>a{
color: #000;
}
.nit-call::before{
content: '';
position: fixed;
width: 100%;
height: 100%;
top:0;
left:0;
background: rgb(2 2 2 / 53%);
}
/* new header */
header.app-header {
height: auto;
}
.app-header .site-header {
display: flex;
height: 64px;
background: transparent;
margin: auto;
}
.app-header .site-header,
.sub-header .container{
width: 90%;
max-width: inherit;
padding: 0px;
}
.mob-sidebar{
z-index: 999;
}
.mob-sidebar .sidebar-bottom {
padding-bottom: 20px;
z-index: 5;
}
.mob-sidebar .page-list {
height: 100%;
padding-top: 110px;
}
.mob-sidebar .page-list ul {
max-height: 100%;
display: block;
overflow: hidden;
overflow-y: scroll;
}
.mob-sidebar.active {
display: flex !IMPORTANT;
}
.site-header .navbar-brand {
margin-right: 0px;
}
.site-header{
height: 64px;
}
.site-header.navbar .navbar-brand img {
width: 46px;
}
.site-header .location-bar {
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
top: 50%;
color: #fff;
}
.site-header .viewCart {
position: relative;
}
.app-header .navbar-nav .nav-link{
background: transparent;
box-shadow: none;
border: 0px;
}
.app-header .profile-menu>a>img {
width: 25px;
height: 25px;
}
.app-header .dropdown .dropdown-menu li:not(:last-child) {
margin-bottom: 10px;
}
.app-header .dropdown.show .dropdown-menu .dropdown-item {
font-size: 14px;
}
.app-header .badge{
background-color:#C90909 !important;
color: #fff;
}
.app-header .dropdown .dropdown-menu .dropdown-item:hover {
background: transparent;
}
.mob-sidebar .page-list .hide {
display: none;
}
.mob-sidebar .page-list .nav-link span {
margin-left: 9px;
}
.app-header .dropdown.show .dropdown-menu {
display: block;
}
.app-header .site-header .global_location_popup {
top: 70px;
}
.site-header .nav-item.others {
background: transparent;
border: 0px;
}
.app-header .site-header .cartNotification {
font-size: 13px;
font-style: normal;
border-radius: 100%;
font-weight: 700;
font-family: 'Roboto', sans-serif;
width: 20px;
height: 20px;
position: absolute;
right: -10px;
top: -8px;
background: red;
padding: 0px;
text-align: center;
}
.pages-modal {
background: rgba(0,0,0,.3);
}
.pages-modal .page-scroll {
max-height: 30vh;
overflow-y: scroll;
}
.pages-modal .page-scroll li {
background: transparent;
border-radius: 0px;
}
.pages-modal .page-scroll li.hide {
display: none;
}
.pages-modal .btn-close {
background: transparent;
opacity: 1;
font-size: 25px;
line-height: 1;
}
.pages-modal .search-wrap input,
.mob-sidebar .search-wrap input,
.pages-modal .search-wrap input:focus,
.mob-sidebar .search-wrap input:focus{
background: rgba(0,0,0,.2);
border-radius: 4px;
outline: none;
border: 1px solid;
box-shadow: none;
}
.pages-modal .search-wrap span,
.mob-sidebar .search-wrap span,
.more-category .search-wrap span {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
}
.more-category .category-list .dropdown .dropdown-menu {
left: 0px;
}
.more-category .search-wrap span {
right: inherit;
left: 10px;
}
.show-popup .pages-modal {
display: block;
}
.show-popup .pages-modal .modal-content{
animation: fadeIn .2s ease-in-out both;
border: 0px;
}
.mob-sidebar .menu-wrap{
max-width: 350px;
}
.mob-sidebar .page-list .nav-link {
display: flex;
justify-content: space-between;
}
.mob-sidebar .flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.mob-sidebar .folder> span {
font-size: 18px;
}
.mob-sidebar .page-list .folder .on + .dropdown {
display: block;
}
.mob-sidebar .page-list .folder .dropdown {
display: none;
}
.mob-sidebar .mob-overlay {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
background: #000000bd;
padding: 2px;
display: flex;
color: #fff;
padding-left: 35px;
}
.mob-sidebar .back-btn {
font-size: 44px;
padding: 0px 30px;
top: 0px;
}
.top-sec {
display: flex;
justify-content: space-between;
margin-bottom: 14px;
}
.top-sec .notification {
position: relative;
}
.top-sec .notification .notification-count {
position: absolute;
height: 20px;
width: 20px;
top: -10px;
right: -10px;
background: red;
border-radius: 50px;
text-align: center;
line-height: 1;
font-size: 9px;
display: flex;
align-items: center;
justify-content: center;
}
.top-sec .user-link img {
width: 25px;
margin-right: 7px;
}
.sub-header {
display: flex;
position: fixed;
top: 64px;
left: 0px;
padding: 5px 0px;
height: auto;
box-shadow: 1px 4px 6px -6px rgb(17 17 17 / 55%);
z-index: 99;
width: 100%;
}
.sub-header a,
.sub-header input,
.sub-header select {
font-size: 15px;
}
.input-group.rounded select {
border-radius: 50px;
}
.sub-header .input-group.rounded select {
max-width: 100px;
font-size: 14px;
}
.sub-header .input-group.rounded .form-control {
border-radius: 0px 50px 50px 0px !important;
}
.sub-header .nav-item .nav-link,
.app-header .site-header .nav-item .nav-link,
.pages-modal .page-scroll li>a{
max-width: 90px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.more-category .category-list .item {
border: 1px solid;
padding: 6px 9px;
}
.more-category .category-list li a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.more-category .category-list .dropdown .dropdown-menu {
left: 0px;
min-width: inherit;
width: 100%;
top: 100%;
}
.more-category .category-list .dropdown .dropdown-menu .dropdown-item {
font-size: 80%;
}
.more-category .category-list li.dropdown .icon-right-open {
padding: 0px 5px;
}
.pages-modal .page-scroll li>a{
max-width: 100%;
}
.site-header .navbar-brand .logo {
display: flex;
align-items: center;
}
.app-header .site-header .navbar-brand span {
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px !important;
}
.app-header .site-header .global_location .innerHeading {
max-width: 58px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.app-header .site-header .global_location {
max-width: 150px;
}
.sub-header .header-custom-dropdown {
max-width: 100%;
min-width: 150px;
position: absolute;
background: transparent;
width: auto;
z-index: 9;
left: 0;
margin: 0 auto;
padding-top: 6px;
top: 100%;
display: none;
opacity: 0;
-webkit-transition: visibility 0s linear .5s,opacity 0.5s linear;
-moz-transition: visibility 0s linear .5s,opacity 0.5s linear;
-o-transition: visibility 0s linear .5s,opacity 0.5s linear;
-ms-transition: visibility 0s linear .5s,opacity 0.5s linear;
transition: visibility 0s linear .5s,opacity 0.5s linear;
}
.sub-header .nav-item:hover .header-custom-dropdown {
display: block!important;
opacity: 1;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
.sub-header .header-custom-dropdown .dropdown-container {
height: 100%;
width: 100%;
position: relative;
float: left;
text-align: left;
box-shadow: rgba(167,167,167,0.53) 0px 0px 15px;
box-sizing: border-box;
padding: 15px;
display: flex;
flex-flow: row wrap;
order: 4;
}
.sub-header .header-custom-dropdown .dropdown-container strong a {
padding-bottom: 0px;
display: block;
font-weight: bold;
font-size: 1.1em;
}
.sub-header .header-custom-dropdown .dropdown-container a {
font-size: 1em;
display: block;
float: left;
white-space: inherit;
text-overflow: inherit;
max-width: inherit;
line-height: normal;
width: 100%;
padding: 0;
text-transform: capitalize;
line-height: 1.6em;
}
.sub-header .nav-item {
position: relative;
}
.sub-header .header-custom-dropdown .dropdown-container .dropdown-sub {
margin-bottom: 10px;
padding-right: 15px;
box-sizing: border-box;
}
.sub-header .header-custom-dropdown::after {
content: "";
position: absolute;
left: 20px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
top: 0;
}
.sub-header ul li::after {
content: "";
position: absolute;
background: #000;
bottom: 0;
width: 100%;
height: 2px;
left: 0;
visibility: hidden;
}
@media(min-width: 992px){
}
@media(max-width:991px){
.site-header .navbar-brand img {
width: 42px;
}
.site-header .location-bar .fs-5 {
font-size: 16px !important;
}
.site-header .location-bar {
font-size: 12px !important;
}
.app-header .site-header .global_location {
width: 58%;
max-width: inherit;
}
.app-header .site-header .global_location .innerHeading {
max-width: 100%;
}
}
@keyframes fadeIn{
0%{
opacity: 0;
transform: translateY(20px);
}
100%{
opacity: 1;
transform: translateY(0px);
}
}
.home-page-html {
overflow-x: hidden;
}
.home-page-html .app-header{
margin-top: 0px !important;
}
.home-page-html .app-footer, .home-page-html .app-header{
display: none;
}
.app-header .site-header .navbar-brand {
border-right: 0px;
padding-left: 0px;
padding-right: 0px;
}
.app-header .navbar button.navbar-toggler {
position: static;
}
.app-footer.footer-builder {
min-height: 80px;
position: relative;
margin: 0;
padding: 0px 0;
height: auto!important;
}
.app-footer.footer-builder #footer {
font-size: 14px;
padding: 30px 0;
background: #444;
color: #fff;
}
.app-footer.footer-builder #footer {
font-size: 14px;
}
.app-footer.footer-builder #footer .footer-top .footer-contact h3 {
font-size: 26px;
line-height: 1;
font-weight: 700;
padding-bottom: 5px;
}
.app-footer.footer-builder #footer .footer-top h4 {
font-size: 16px;
font-weight: bold;
position: relative;
padding-bottom: 5px;
}
.app-footer.footer-builder #footer .footer-top .footer-contact p {
font-size: 14px;
line-height: 24px;
margin-bottom: 0;
}
#footer .footer-top .footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.app-footer.footer-builder #footer .footer-top .footer-links ul li {
padding: 10px 0;
display: flex;
align-items: center;
}
#footer .footer-top .footer-links ul a {
color: #aaaaaa;
transition: 0.3s;
display: inline-block;
line-height: 1;
}
.app-footer.footer-builder #footer .footer-top .footer-links ul a:hover {
text-decoration: none;
color: #fff;
}
.app-footer.footer-builder #footer .footer-newsletter form {
margin-top: 30px;
background: #fff;
padding: 5px 10px;
position: relative;
border-radius: 4px;
text-align: left;
}
.app-footer.footer-builder #footer .footer-newsletter form input[type=email] {
border: 0;
padding: 4px 8px;
width: calc(100% - 100px);
}
.app-footer.footer-builder #footer .footer-newsletter form input[type=submit] {
position: absolute;
top: 0;
right: -1px;
bottom: 0;
border: 0;
background: none;
font-size: 16px;
padding: 0 20px;
background: #e03a3c;
color: #fff;
transition: 0.3s;
border-radius: 0 4px 4px 0;
box-shadow: 0px 2px 15px #ccc;
}
.app-footer.footer-builder #footer .footer-top .social a {
margin: 0 0px 0px 5px;
width: 33px;
height: 33px;
font-size: 14px;
line-height: 32px;
color: inherit;
text-shadow: none;
border: 1px solid;
overflow: hidden;
border-radius: 50%;
display: inline-block !important;
text-align: center;
text-decoration: none;
justify-content: center;
}
.app-footer.footer-builder #footer .footer-top .social a::before {
line-height: 32px;
font-size: 16px;
}
.page-preloader .ring-loader {
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
}
.page-preloader .ring-loader {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.page-preloader .ring-loader div {
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid #fff;
border-radius: 50%;
animation: ring-loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}
.page-preloader .ring-loader div:nth-child(1) {
animation-delay: -0.45s;
}
.page-preloader .ring-loader div:nth-child(2) {
animation-delay: -0.3s;
}
.page-preloader .ring-loader div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes ring-loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.ai-stepper-container {
max-width: 320px;
}
.ai-stepper {
overflow: hidden;
padding: 20px;
}
.ai-step {
padding: 10px;
margin-bottom: 10px;
padding-left: 35px;
position: relative;
width: 100%;
color: #6c6c6c;
font-size: 14px;
}
.ai-step.complete-previous {
color: #6c6c6c;
}
.ai-stepper .ai-step .dot {
width: 20px;
height: 20px;
background: #ECECEC;
display: block;
border-radius: 100%;
position: absolute;
left: 0;
border: 3px solid #ffffff;
box-sizing: border-box;
outline: 3px solid #ff000000;
}
.ai-step.complete {
font-weight: bold;
color: #000;
}
.ai-step.complete .dot,
.ai-step.complete-previous .dot {
background: #92D84C;
}
.ai-step .dot:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
border: 1px solid #eee;
border-radius: 50px;
transform: scale(1.5);
z-index: -1;
left: -1px;
top: -1px;
}
.ai-step .dot::before {
content: '';
position: absolute;
left: 0px;
background: rgb(33 194 253 / 31%);
height: 100%;
width: 100%;
border-radius: 50px;
opacity: 0;
z-index: -1;
transition: .3s ease-in-out;
}
.ai-step.complete .dot {
background: #21C2FD;
}
.ai-step.complete .dot::before {
opacity: 1;
animation: sk-bounce 2.0s infinite ease-in-out;
}
@keyframes sk-bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(3);
}
}
.ai-step:before {
content: '';
position: absolute;
width: 2px;
height: calc(100% + 10px);
background: #DEDEDE;
left: 9px;
}
.ai-step:last-child:before {
display: none;
}
.ai-step.complete-previous:before {
background: #92D84C;
}
@media(max-width:399px){
.app-header .site-header .global_location {
width: 57%;
max-width: inherit;
}
}
@media(max-width:399px){
.app-header .site-header .global_location {
width: 57%;
max-width: inherit;
}
}
@media(max-width:360px){
.app-header .site-header .global_location {
width: 57%;
max-width: inherit;
}
}
.sa .pages-modal .search-wrap span {
right: inherit;
left: 10px;
}
.detect_location:hover {
color: inherit;
}
.quote{
background-size: cover !important;
background-position: center center !important;
}
.app_navigation_matrix a.five_seven {
aspect-ratio: 5 / 7;
}
.sa .pages-modal .search-wrap input {
padding-left: 30px;
}
.folder .search-wrap span{
position: absolute;
right: 10px !important;
top:50% !important;
transform: translateY(-50%);
font-size: 16px;
}
.folder .search-wrap input, .folder .search-wrap input:focus {
font-family: initial;
background: rgba(0, 0, 0, .2);
border-radius: 4px;
outline: none;
border: 1px solid;
box-shadow: none;
}
.folder .search-wrap input::placeholder{
color: #fff;
}
.folder .folder-list > a.hide {
display: none;
}
.appHeaderAi .app-content{
margin: 0px;
}
.appHeaderAi #desktop-navs, .appHeaderAi #router-navs {
z-index: 99;
}
.headerAi-scroll-back #router-navs{
position: sticky;
top: 0 !important;
}
.website-login.login-page {
max-width: 320px;
position: relative;
left: 0;
right: 0;
margin: 5% auto;
padding: 15px;
top: 0;
border-radius: 8px;
background-position: center;
box-shadow: 0px 0px 5px #bfbfbf;
-webkit-box-shadow: 0px 0px 5px #bfbfbf;
-moz-box-shadow: 0px 0px 5px #bfbfbf;
-o-box-shadow: 0px 0px 5px #bfbfbf;
-ms-box-shadow: 0px 0px 5px #bfbfbf;
}
.website-login.login-page::after {
content: "";
clear: both;
display: table;
}
.website-login.login-page.center-cont {
position: absolute;
top: 50%;
margin: 0 auto;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
.facebook-btn a {
border: 1px solid;
}
.facebook-btn .icon-facebook:before {
padding-right: 8px;
padding-left: 20px;
}
.website-login li {
float:left;
width:100%;
margin:0 0 10px 0 !important;
}
.website-login li.heading {
font-size:16px;
}
.website-login li.app-logo {
text-align:center;
}
.website-login li.app-logo img {
width:90px;
height:90px;
margin:10px 0 0 0;
}
.website-login li.input {
box-sizing:border-box;
position:relative;
}
.website-login li.remember-check {
margin: 0px !important;
}
.website-login li.remember-check .cstm-checkbox {
font-size: 14px;
padding-top: 13px;
font-weight: bold;
}
.website-login li.customField span {
font-size:18px;
}
.website-login input[type='text'],
.website-login input[type='password'],
.website-login input[type='tel'] ,
.website-login input[type='url'],
.website-login input[type='email'],
.website-login input[type='date'],
.website-login input[type='time'],
.website-login textarea,
.website-login select,
.website-login .select-file,
.website-login .label-head {
width:100%;
margin:0px;
outline:0px;
padding:12px;
box-sizing:border-box;
border-radius:0 4px 4px 0;
font-family:inherit;
font-size:14px;
float:left;
resize:none;
border-radius: 4px;
}
.website-login input[type='text'].error,
.website-login input[type='password'].error,
.website-login input[type='tel'].error,
.website-login input[type='url'].error,
.website-login input[type='email'].error,
.website-login input[type='date'].error,
.website-login input[type='time'].error,
.website-login textarea.error,
.website-login select.error {
border: solid 1px red !important;
}
.website-login select {
-webkit-appearance: button;
-moz-appearance:button;
appearance:button;
height:45px;
}
.website-login textarea {
height:80px;
}
.website-login .login-btn a {
float:left;
width:100%;
line-height:40px;
text-align:center;
border-radius:4px;
}
.website-login .smo-button {
padding:0 0 0 40px;
box-sizing:border-box;
position:relative;
}
.website-login .login-btn.smo-button a {
border-radius:0 4px 4px 0;
color:#fff;
background:#0b4798;
}
.website-login .login-btn.smo-button span {
position:absolute;
left:0px;
top:0px;
width:40px;
height:100%;
color:#fff;
background:#105fca;
border-radius:4px 0 0 4px;
line-height:40px;
}
.website-login li.text {
padding:5px 0;
}
.website-login li.text p {
float:left;
width:100%;
line-height:18px;
margin:3px 0;
line-height: 1.5em;
}
.website-login li.text a {
font-weight:bold;
}
.website-login .label-head {
background:none;
padding:0;
line-height:40px;
font-weight:bold;
border-radius:4px 4px 0 0;
position:absolute;
top:-40px;
}
.website-login li.input[type='radio'],
.website-login li.input[type='checkbox'] {
background: rgba(255, 255, 255, 0.5);
border-radius:0 0 8px 8px;
padding:0px;
position:relative;
margin:40px 0 10px 0;
}
.website-login li.input[type='radio'] span,
.website-login li.input[type='checkbox'] span {
height:40px;
border-radius:8px 0 0 0;
display:none;
}
.website-login li.input[type='radio'] label,
.website-login li.input[type='checkbox'] label {
width:33.33%;
float:left;
padding:0 0 0 30px;
position:relative;
line-height:40px;
margin:0px;
box-sizing:border-box;
}
.website-login li.input[type='radio'] input,
.website-login li.input[type='checkbox'] input {
position:absolute;
left:8px;
top:10px;
}
.website-login li.input .arrow {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right:8px solid #F00;
position: absolute;
right: 50px;
top: 50%;
margin: -8px 0 0 0;
display:none;
}
.website-login.theme-1 li.input span {
border-right:0px;
}
.website-login.theme-2 li.input span,
.website-login.theme-2 .login-btn.smo-button span {
border-radius:40px 0 0 40px;
/*border:solid 1px #fff;*/
box-sizing:border-box;
}
.website-login.theme-2 li.input[type='textarea'] span,
.website-login.theme-2 li.input[type='textarea'] textarea {
border-radius:22px 0 0 22px;
}
.website-login.theme-2 li.input[type='textarea'] textarea {
border-radius:0 22px 22px 0;
}
.website-login.theme-2 .login-btn.smo-button span {
border:0px;
}
.website-login.theme-2 input[type='text'],
.website-login.theme-2 input[type='password'],
.website-login.theme-2 input[type='tel'] ,
.website-login.theme-2 input[type='url'],
.website-login.theme-2 input[type='email'],
.website-login.theme-2 input[type='date'],
.website-login.theme-2 input[type='time'],
.website-login.theme-2 textarea,
.website-login.theme-2 select,
.website-login.theme-2 .select-file,
.website-login.theme-2 .login-btn.smo-button a {
border-radius:0 40px 40px 0;
border-left: solid 0px #fff;
}
.website-login.theme-2 .label-head {
border-radius:22px 22px 0 0;
}
.website-login.theme-2 li.input[type='radio'],
.website-login.theme-2 li.input[type='checkbox'] {
border-radius:0 0 8px 8px;
}
.website-login.theme-2 .login-btn a {
border-radius:40px;
border:solid 0px #fff;
box-sizing:border-box;
}
.website-login.theme-2 .button.smo-button a {
border-left:solid 0px #fff;
}
.website-login.theme-3 li.input,
.website-login.theme-3 .smo-button {
padding:0px;
}
.website-login.theme-3 li.input[type='radio'],
.website-login.theme-3 li.input[type='checkbox'] {
border-radius:0;
}
.website-login.theme-3 li.input span,
.website-login.theme-3 .login-btn.smo-button span {
border-radius:0;
border:solid 1px #ccc;
box-sizing:border-box;
display:none;
}
.website-login.theme-3 input[type='text'],
.website-login.theme-3 input[type='password'],
.website-login.theme-3 input[type='tel'] ,
.website-login.theme-3 input[type='url'],
.website-login.theme-3 input[type='email'],
.website-login.theme-3 input[type='date'],
.website-login.theme-3 input[type='time'],
.website-login.theme-3 textarea,
.website-login.theme-3 select,
.website-login.theme-3 .select-file,
.website-login.theme-3 .label-head,
.website-login.theme-3 .login-btn.smo-button a {
border-radius:0;
border:solid 1px #ccc;
}
.website-login.theme-3 .login-btn.smo-button a {
border:0px;
}
.website-login.theme-3 .login-btn a {
border-radius:0;
border:solid 0px #ccc;
box-sizing:border-box;
}
.website-login.theme-4 li.input {
padding:0 50px 0 0;
}
.website-login.theme-4 .smo-button {
padding:0 40px 0 0;
}
.website-login.theme-4 li.input span,
.website-login.theme-4 .login-btn.smo-button span {
left:auto;
right:0px;
border-radius:0;
border:solid 0px #ccc;
box-sizing:border-box;
}
.website-login.theme-4 input[type='text'],
.website-login.theme-4 input[type='password'],
.website-login.theme-4 input[type='tel'] ,
.website-login.theme-4 input[type='url'],
.website-login.theme-4 input[type='email'],
.website-login.theme-4 input[type='date'],
.website-login.theme-4 input[type='time'],
.website-login.theme-4 textarea,
.website-login.theme-4 select,
.website-login.theme-4 .select-file,
.website-login.theme-4 .label-head,
.website-login.theme-4 .login-btn.smo-button a {
border-radius:0;
border:solid 0px #ccc;
}
.website-login.theme-4 .login-btn a {
border-radius:0;
border:solid 0px #ccc;
box-sizing:border-box;
}
.website-login.theme-4 li.input .arrow {
display:block;
}
.website-login.theme-4 li.input[type='radio'],
.website-login.theme-4 li.input[type='checkbox'] {
border-radius:0;
padding:0px;
}
.website-login.theme-4 li.input[type='radio'] .arrow,
.website-login.theme-4 li.input[type='checkbox'] .arrow {
display:none;
}
.website-login.content-left li.text p,
.website-login.heading-left li.heading {
text-align:left;
}
.website-login.content-center li.text p,
.website-login.heading-center li.heading {
text-align:center;
}
.website-login.content-right li.text p,
.website-login.heading-right li.heading {
text-align:right;
}
.website-login input[type='date'].date-hit,
.website-login input[type='time'].time-hit {
width: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-appearance: none;
}
.website-login li.error input,
.website-login li.error span,
.website-login li.error select,
.website-login li.error textarea,
.website-login li.error .label-head,
.website-login li.error .select-file{
outline:solid 1px red !important;
}
.website-login .select-file {
position:relative;
border: 1px solid;
}
.website-login .select-file input {
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
opacity:0;
}
.password-type {
position: absolute;
right: 0;
line-height: 42px;
height: 100%;
padding: 0 10px;
color: red;
display:none;
}
.payment-mode .payment-nav {
width:100%;
float:left;
padding:0 0;
line-height:27px;
border-bottom:solid 3px #2795c8;
display: -webkit-flex; /* Safari */
display: flex;
}
.payment-mode .tabs {
width: 100% !important;
float: left;
padding: 15px;
box-sizing:border-box;
}
.payment-mode .tabs p {
margin:0 0 12px 0;
float:left;
width:100%;
}
.payment-mode .tabs p.btn-view {
position:fixed;
left:0px;
top:50%;
padding:0 20px;
box-sizing:border-box;
}
.payment-mode .tabs a.BtText {
text-align:center;
width:100%;
padding:0 0;
text-align:center;
background:#1c94b7;
height:42px;
line-height:42px;
font-weight:bold;
}
.payment-mode .tabs a.place-order {
position:relative;
top:75px;
}
.BtText {
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
text-align:center;
display:inline-block;
margin:0 20px 0 0;
}
.tabs .login-feald {
margin-top: 16px;
float:left;
width: 100%;
}
.payment-mode .card-number,
.payment-mode .expiry-date,
.payment-mode .cvv {
float:left;
text-align:center;
margin:10px 0 20px 0;
outline:0px;
}
.login-feald .card-name {
margin-top: 60px;
}
.payment-mode .card-number:focus,
.payment-mode .expiry-date input:focus {
box-shadow:0 0 10px #ccc inset;
}
.payment-mode .expiry-date,
.payment-mode .cvv {
float:left;
width:220px;
margin:auto;
float:none;
clear:both;
position:relative;
top:20px;
}
.payment-mode .cvv {
width:300px;
position:relative;
top:30px;
}
.payment-mode .cvv input {
width: 90px;
float: left;
border: solid 1px #CCC;
padding: 0px;
text-align: center;
font-size: 16px;
position: absolute;
left: 0px;
top: 0px;
height: 23px;
}
#payCard input#cnumber {
border: 0px;
width: calc(100% - 20px);
padding: 10px;
margin: 0;
text-indent: 0;
}
.login-feald input {
border: 1px solid #ccc;
float: left;
padding: 9px;
box-sizing: border-box;
background: #fff;
width: 100%;
}
#payCard #cvvCode {
margin:0 0 10px 0;
}
#payCard {
padding:0 0 60px 0;
margin:0 0 60px 0;
}
.payment-mode .cvv p {
margin:0 0 0 100px;
padding:0 0 0 50px;
text-align:left;
background:url(https://media.mediadirhub.com/images/cvv.jpg) 0 0 no-repeat;
line-height:12px;
font-size:11px;
min-height:24px;
width:150px;
}
.payment-mode .expiry-date span {
width:90px;
display:inline-block;
height:90px;
float:left;
}
.payment-mode .expiry-date span.mid {
width:30px;
background:url(https://media.mediadirhub.com/images/devider.png) center center no-repeat;
}
.payment-mode .expiry-date input,
.payment-mode .expiry-date select {
font-size:30px;
text-align:center;
padding:0px;
width:84px;
height:84px;
border:solid 3px #e7ebea;
border-radius:70px;
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari and Chrome */
outline:0px;
}
.payment-mode .expiry-date b {
white-space: nowrap;
float: left;
width: 100%;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.payment-mode .payment-nav a {
text-align:center;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
font-size:26px;
white-space:nowrap;
padding:0;
line-height:46px;
height:46px;
margin:0 0 0 1px;
border-radius: 0;
box-shadow: none;
}
.payment-mode .payment-nav a:first-child {
margin:0;
}
.paynowbtn {
background: #1c94b7 none repeat scroll 0 0;
color: #fff;
display: inline-block;
font-weight: bold;
padding: 10px 0;
text-align: center;
text-decoration: none;
text-shadow: 0 0 0 #000;
text-transform: none;
width: 100%;
}
.checkout {
background:#1c94b7;
color: #fff;
display: inline-block;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: none;
width: 100%;
line-height:44px;
}
.checkoutHyper
{
display: inline-block;
font-weight: bold;
text-align: right;
text-decoration:underline;
text-transform: none;
width: 100%;
line-height:51px;
}
.footer-nav {
width: 100%;
}
.scanner_btn{
right: 0px !important;
left: auto !important;
display:block !important;
}
.website-login.icon-right .scanner_btn{
left: 0px !important;
right: auto !important;
display:block !important;
}
.website-login .scanner_btn {
border-radius: 0 !important;
}
.website-login.icon-right .scanner_btn {
border-radius:0 !important;
}
.website-login.theme-1.rounded-1 .scanner_btn {
border-radius: 0px 20px 20px 0 !important;
}
.website-login.theme-1.rounded-1.icon-right .scanner_btn {
border-radius:20px 0px 0px 20px !important;
}
.website-login.theme-3 .scanner_btn{
top: 25px;
height: 36px;
right: 0px !important;
}
.fbLoginCutomDiv{
position: absolute;
left: 0;
top: 0;
width:100% !important;
}
.fbLoginCutomDiv span{width:100% !important; height:100% !important}
.kep-login-facebook.metro{ border-radius: 0;
width: 100%;
opacity: 0;}
.website-login li.input[data-type=checkbox], .website-login li.input[data-type=radio], .website-login li.input[data-type=signature] {
border-radius: 0 0 0 0;
padding: 0;
position: relative;
margin: 40px 0 15px !important;
}
.website-login .input[data-type=checkbox] i.info, .website-login .input[data-type=radio] i.info {
right: 5px;
top: -35px;
}
.website-login .input i.info {
position: absolute;
right: 5px;
top: 5px;
font-size: 18px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
z-index: 1;
display: none;
}
.website-login li.input[data-type=checkbox] label, .website-login li.input[data-type=radio] label, .website-login li.input[data-type=signature] label {
width: 50%;
float: left;
padding: 0 0 0 30px;
position: relative;
line-height: 40px;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
font-size: 16px;
}
.website-login .content-center p, .website-login .heading-center h2, .website-login .label-center .label, .website-login .label-center .label-head {
text-align: center !important;
}
.website-login .rounded-1 li.input[data-type=checkbox], .website-login .rounded-1 li.input[data-type=radio], .website-login .rounded-1 li.input[data-type=signature] {
border-radius: 0 0 20px 20px !important;
}
.website-login.theme-2 input+input[type="tel"]{
border-radius: 40px;
}
.website-login .btn{margin: 0 auto;}
.login-content {
background-size: cover;
background-position: center top;
}
/* matrlize css */
.website-login .targetLabel {
position: relative;
display: inline-block;
padding-top: 6px;
line-height: 1.5;
/* overflow: hidden; */
width: 100%;
box-sizing: border-box;
}
/* Input, Textarea */
.website-login .targetLabel>.targetField {
box-sizing: border-box;
margin: 0;
border: solid 1px;
/* Safari */
border-color: var(--color-helper1);
border-top-color: transparent;
border-radius: 4px;
padding: 15px 13px 15px;
width: 100%;
height: inherit;
color: var(--color-helper2);
background-color: transparent;
box-shadow: none;
/* Firefox */
font-family: inherit;
font-size: inherit;
line-height: inherit;
caret-color: var(--color-helper1);
transition: border 0.2s, box-shadow 0.2s;
}
/* Span */
.website-login .targetLabel>.targetField+span {
position: absolute;
top: 0;
left: 0;
display: flex;
border-color: var(--color-helper1);
width: 100%;
max-height: 100%;
color: var(--color-helper2);
font-size: 75%;
line-height: 15px;
cursor: text;
transition: color 0.2s, font-size 0.2s, line-height 0.2s;
}
/* Corners */
.website-login .targetLabel>.targetField+span::before,
.website-login .targetLabel>.targetField+span::after {
content: "";
display: block;
box-sizing: border-box;
margin-top: 6px;
border-top: solid 1px;
border-top-color: var(--color-helper1);
min-width: 10px;
height: 8px;
pointer-events: none;
/* box-shadow: inset 0 1px transparent; */
transition: border-color 0.2s, box-shadow 0.2s;
}
.website-login .targetLabel>.targetField+span::before {
margin-right: 4px;
border-left: solid 1px transparent;
border-radius: 4px 0;
}
.website-login .targetLabel>.targetField+span::after {
flex-grow: 1;
margin-left: 4px;
border-right: solid 1px transparent;
border-radius: 0 4px;
}
/* Hover */
.website-login .targetLabel:hover>.targetField {
border-color: var(--color-helper1);
border-top-color: transparent;
}
.website-login .targetLabel:hover>.targetField+span::before,
.website-login .targetLabel:hover>.targetField+span::after {
border-top-color: var(--color-helper1);
}
.website-login .targetLabel:hover>.targetField:not(:focus):placeholder-shown, .website-login .select-file {
border-color: var(--color-helper1);
}
/* Placeholder-shown */
.website-login .targetLabel .targetField:not(:focus):placeholder-shown {
border-top-color: var(--color-helper1);
}
.website-login .targetLabel .targetField:not(:focus):placeholder-shown+span {
font-size: inherit;
line-height: 68px;
opacity: .6;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.website-login .targetLabel .targetField:not(:focus):placeholder-shown+span {
font-size: inherit;
line-height: 68px;
}
.website-login .targetLabel .targetField:not(:focus):placeholder-shown+span::before,
.website-login .targetLabel .targetField:not(:focus):placeholder-shown+span::after {
border-top-color: transparent;
}
/* Focus */
.website-login .targetLabel>.targetField:focus {
border-color: var(--color-helper1);
border-top-color: transparent;
/* box-shadow: inset 1px 0 var(--color-helper1), inset -1px 0 var(--color-helper1), inset 0 -1px var(--color-helper1); */
outline: none;
}
.website-login .targetLabel>.targetField:focus+span {
color: var(--color-helper2);
}
.website-login .targetLabel>.targetField:focus+span::before,
.website-login .targetLabel>.targetField:focus+span::after {
border-top-color: var(--color-helper1) !important;
/* box-shadow: inset 0 1px var(--color-helper1); */
}
/* Disabled */
.website-login .targetLabel>.targetField:disabled,
.website-login .targetLabel>.targetField:disabled+span {
border-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38) !important;
border-top-color: transparent !important;
color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
pointer-events: none;
}
.website-login .targetLabel>.targetField:disabled+span::before,
.website-login .targetLabel>.targetField:disabled+span::after {
border-top-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38) !important;
}
.website-login .targetLabel>.targetField:disabled:placeholder-shown,
.website-login .targetLabel>.targetField:disabled:placeholder-shown+span {
border-top-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38) !important;
}
.website-login .targetLabel>.targetField:disabled:placeholder-shown+span::before,
.website-login .targetLabel>.targetField:disabled:placeholder-shown+span::after {
border-top-color: transparent !important;
}
/* custom radio and checkbox css */
.website-login .cstm-radio {
display: block;
position: relative;
padding-left: 35px !important;
margin-bottom: 12px;
cursor: pointer;
font-size: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.website-login .cstm-radio input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.website-login .checkmark {
position: absolute;
top: 8px;
left: 0;
height: 25px;
width: 25px;
border-radius: 50%;
border: 2px solid;
}
.website-login .checkmark:after {
content: "";
position: absolute;
display: none;
}
.website-login .cstm-radio input:checked ~ .checkmark:after {
display: block;
}
.website-login .cstm-radio .checkmark:after {
top: 6px;
left: 6px;
width: 12px;
height: 12px;
border-radius: 50%;
}
/* custom checkbox */
.website-login .cstm-checkbox {
display: block;
position: relative;
padding-left: 35px !important;
margin-bottom: 12px;
cursor: pointer;
font-size: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.website-login .cstm-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.website-login .cstm-checkbox .checkmark {
position: absolute;
top: 8px;
left: 0;
height: 25px;
width: 25px;
border-radius: 0;
border: 2px solid;
}
.website-login .cstm-checkbox .checkmark:after {
content: "";
position: absolute;
display: none;
}
.website-login .cstm-checkbox input:checked ~ .checkmark:after {
display: block;
}
.website-login .cstm-checkbox .checkmark:after {
left: 8px;
top: 1px;
width: 7px;
height: 15px;
border: solid;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.global-login .page-content.login-content {
width: 100%;
height: 100vh;
overflow: auto;
}
.global-login .website-login.login-page.center-cont {
position: relative;
margin-top: 20px;
margin-bottom: 20px;
}
.ios .website-login.login-page.center-cont,
.android .website-login.login-page.center-cont {
position: relative;
top: 0;
margin: 3% auto;
transform: translateY(0%);
-webkit-transform: translateY(0%);
}
@media(max-width:568px) {
.global-login .website-login.login-page.center-cont {
margin-top: 50px;
}
}
@media (max-width:380px) {
.website-login.login-page {
max-width: 280px;
}
.global-login .website-login.login-page.center-cont {
margin-top: 20px;
}
}
.label.targetLabel .phone-code {
width: 60px;
float: left;
}
.label.targetLabel .phone-code + .targetField {
width: 80%;
float: right;
}
.label.targetLabel .phone-code + .targetField + span {
width: 80%;
float: right;
left: auto;
right: 0;
}
.website-login.profile-cont {
width: 100%;
max-width: 90%;
margin: 0 auto;
padding: 10px !important;
box-sizing: border-box;
}
.comm-profile.website-login .btn {
width: 100%;
}
@media screen and ( max-height: 600px ) {
.website-login.login-page.center-cont {
position: static;
top: auto;
margin: 40px auto;
transform: inherit;
-webkit-transform: inherit;
-moz-transform: inherit;
}
}
/* new login css file */
:root{
--contentSize:14px;
}
.website-login.login-page {
max-width: 320px;
position: relative;
left: 0;
right: 0;
margin: 5% auto;
padding: 15px;
top: 0;
border-radius: 8px;
background-position: center;
/* transform: translateY(-50%); */
box-shadow: 0px 0px 5px #bfbfbf;
-webkit-box-shadow: 0px 0px 5px #bfbfbf;
-moz-box-shadow: 0px 0px 5px #bfbfbf;
-o-box-shadow: 0px 0px 5px #bfbfbf;
-ms-box-shadow: 0px 0px 5px #bfbfbf;
}
.website-login.login-page::after {
content: "";
clear: both;
display: table;
}
.website-login.login-page.center-cont {
position: absolute;
top: 50%;
margin: 0 auto;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
.facebook-btn a {
border: 1px solid;
}
.facebook-btn .icon-facebook:before {
padding-right: 8px;
padding-left: 20px;
}
.website-login li {
float:left;
width:100%;
margin:0 0 10px 0 !important;
}
.website-login li.heading {
font-size:16px;
}
.website-login li.app-logo {
text-align:center;
}
.website-login li.app-logo img {
width:90px;
height:90px;
margin:10px 0 0 0;
}
.website-login li.input {
box-sizing:border-box;
position:relative;
}
.website-login li.remember-check {
margin: 0px !important;
}
.website-login li.remember-check .cstm-checkbox {
font-size: 14px;
padding-top: 13px;
font-weight: bold;
}
.website-login li.customField span {
font-size:18px;
}
.website-login input[type='text'],
.website-login input[type='password'],
.website-login input[type='tel'] ,
.website-login input[type='url'],
.website-login input[type='email'],
.website-login input[type='date'],
.website-login input[type='time'],
.website-login textarea,
.website-login select,
.website-login .select-file,
.website-login .label-head {
width:100%;
margin:0px;
outline:0px;
padding:12px;
box-sizing:border-box;
border-radius:0 4px 4px 0;
font-family:inherit;
font-size:14px;
float:left;
resize:none;
border-radius: 4px;
}
.website-login input[type='text'].error,
.website-login input[type='password'].error,
.website-login input[type='tel'].error,
.website-login input[type='url'].error,
.website-login input[type='email'].error,
.website-login input[type='date'].error,
.website-login input[type='time'].error,
.website-login textarea.error,
.website-login select.error {
border: solid 1px red !important;
}
.website-login select {
-webkit-appearance: button;
-moz-appearance:button;
appearance:button;
height:45px;
}
.website-login textarea {
height:80px;
}
.website-login .login-btn a {
float:left;
width:100%;
line-height:40px;
text-align:center;
border-radius:4px;
}
.website-login .smo-button {
padding:0 0 0 40px;
box-sizing:border-box;
position:relative;
}
.website-login .login-btn.smo-button a {
border-radius:0 4px 4px 0;
color:#fff;
background:#0b4798;
}
.website-login .login-btn.smo-button span {
position:absolute;
left:0px;
top:0px;
width:40px;
height:100%;
color:#fff;
background:#105fca;
border-radius:4px 0 0 4px;
line-height:40px;
}
.website-login li.text {
padding:5px 0;
}
.website-login li.text p {
float:left;
width:100%;
line-height:18px;
margin:3px 0;
line-height: 1.5em;
}
.website-login li.text a {
font-weight:bold;
}
.website-login .label-head {
background:none;
padding:0;
line-height:40px;
font-weight:bold;
border-radius:4px 4px 0 0;
position:absolute;
top:-40px;
}
.website-login li.input[type='radio'],
.website-login li.input[type='checkbox'] {
background: rgba(255, 255, 255, 0.5);
border-radius:0 0 8px 8px;
padding:0px;
position:relative;
margin:40px 0 10px 0;
}
.website-login li.input[type='radio'] span,
.website-login li.input[type='checkbox'] span {
height:40px;
border-radius:8px 0 0 0;
display:none;
}
.website-login li.input[type='radio'] label,
.website-login li.input[type='checkbox'] label {
width:33.33%;
float:left;
padding:0 0 0 30px;
position:relative;
line-height:40px;
margin:0px;
box-sizing:border-box;
}
.website-login li.input[type='radio'] input,
.website-login li.input[type='checkbox'] input {
position:absolute;
left:8px;
top:10px;
}
.website-login li.input .arrow {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right:8px solid #F00;
position: absolute;
right: 50px;
top: 50%;
margin: -8px 0 0 0;
display:none;
}
.website-login.theme-1 li.input span {
border-right:0px;
}
.website-login.theme-2 li.input span,
.website-login.theme-2 .login-btn.smo-button span {
border-radius:40px 0 0 40px;
/*border:solid 1px #fff;*/
box-sizing:border-box;
}
.website-login.theme-2 li.input[type='textarea'] span,
.website-login.theme-2 li.input[type='textarea'] textarea {
border-radius:22px 0 0 22px;
}
.website-login.theme-2 li.input[type='textarea'] textarea {
border-radius:0 22px 22px 0;
}
.website-login.theme-2 .login-btn.smo-button span {
border:0px;
}
.website-login.theme-2 input[type='text'],
.website-login.theme-2 input[type='password'],
.website-login.theme-2 input[type='tel'] ,
.website-login.theme-2 input[type='url'],
.website-login.theme-2 input[type='email'],
.website-login.theme-2 input[type='date'],
.website-login.theme-2 input[type='time'],
.website-login.theme-2 textarea,
.website-login.theme-2 select,
.website-login.theme-2 .select-file,
.website-login.theme-2 .login-btn.smo-button a {
border-radius:0 40px 40px 0;
border-left: solid 0px #fff;
}
.website-login.theme-2 .label-head {
border-radius:22px 22px 0 0;
}
.website-login.theme-2 li.input[type='radio'],
.website-login.theme-2 li.input[type='checkbox'] {
border-radius:0 0 8px 8px;
}
.website-login.theme-2 .login-btn a {
border-radius:40px;
border:solid 0px #fff;
box-sizing:border-box;
}
.website-login.theme-2 .button.smo-button a {
border-left:solid 0px #fff;
}
.website-login.theme-3 li.input,
.website-login.theme-3 .smo-button {
padding:0px;
}
.website-login.theme-3 li.input[type='radio'],
.website-login.theme-3 li.input[type='checkbox'] {
border-radius:0;
}
.website-login.theme-3 li.input span,
.website-login.theme-3 .login-btn.smo-button span {
border-radius:0;
border:solid 1px #ccc;
box-sizing:border-box;
display:none;
}
.website-login.theme-3 input[type='text'],
.website-login.theme-3 input[type='password'],
.website-login.theme-3 input[type='tel'] ,
.website-login.theme-3 input[type='url'],
.website-login.theme-3 input[type='email'],
.website-login.theme-3 input[type='date'],
.website-login.theme-3 input[type='time'],
.website-login.theme-3 textarea,
.website-login.theme-3 select,
.website-login.theme-3 .select-file,
.website-login.theme-3 .label-head,
.website-login.theme-3 .login-btn.smo-button a {
border-radius:0;
border:solid 1px #ccc;
}
.website-login.theme-3 .login-btn.smo-button a {
border:0px;
}
.website-login.theme-3 .login-btn a {
border-radius:0;
border:solid 0px #ccc;
box-sizing:border-box;
}
.website-login.theme-4 li.input {
padding:0 50px 0 0;
}
.website-login.theme-4 .smo-button {
padding:0 40px 0 0;
}
.website-login.theme-4 li.input span,
.website-login.theme-4 .login-btn.smo-button span {
left:auto;
right:0px;
border-radius:0;
border:solid 0px #ccc;
box-sizing:border-box;
}
.website-login.theme-4 input[type='text'],
.website-login.theme-4 input[type='password'],
.website-login.theme-4 input[type='tel'] ,
.website-login.theme-4 input[type='url'],
.website-login.theme-4 input[type='email'],
.website-login.theme-4 input[type='date'],
.website-login.theme-4 input[type='time'],
.website-login.theme-4 textarea,
.website-login.theme-4 select,
.website-login.theme-4 .select-file,
.website-login.theme-4 .label-head,
.website-login.theme-4 .login-btn.smo-button a {
border-radius:0;
border:solid 0px #ccc;
}
.website-login.theme-4 .login-btn a {
border-radius:0;
border:solid 0px #ccc;
box-sizing:border-box;
}
.website-login.theme-4 li.input .arrow {
display:block;
}
.website-login.theme-4 li.input[type='radio'],
.website-login.theme-4 li.input[type='checkbox'] {
border-radius:0;
padding:0px;
}
.website-login.theme-4 li.input[type='radio'] .arrow,
.website-login.theme-4 li.input[type='checkbox'] .arrow {
display:none;
}
.website-login.content-left li.text p,
.website-login.heading-left li.heading {
text-align:left;
}
.website-login.content-center li.text p,
.website-login.heading-center li.heading {
text-align:center;
}
.website-login.content-right li.text p,
.website-login.heading-right li.heading {
text-align:right;
}
.website-login input[type='date'].date-hit,
.website-login input[type='time'].time-hit {
width: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-appearance: none;
}
.website-login li.error input,
.website-login li.error span,
.website-login li.error select,
.website-login li.error textarea,
.website-login li.error .label-head,
.website-login li.error .select-file{
outline:solid 1px red !important;
}
.website-login .select-file {
position:relative;
border: 1px solid;
}
.website-login .select-file input {
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
opacity:0;
}
.password-type {
position: absolute;
right: 0;
line-height: 42px;
height: 100%;
padding: 0 10px;
color: red;
display:none;
}
.payment-mode .payment-nav {
width:100%;
float:left;
padding:0 0;
line-height:27px;
border-bottom:solid 3px #2795c8;
display: -webkit-flex; /* Safari */
display: flex;
}
.payment-mode .tabs {
width: 100% !important;
float: left;
padding: 15px;
box-sizing:border-box;
}
.payment-mode .tabs p {
margin:0 0 12px 0;
float:left;
width:100%;
}
.payment-mode .tabs p.btn-view {
position:fixed;
left:0px;
top:50%;
padding:0 20px;
box-sizing:border-box;
}
.payment-mode .tabs a.BtText {
text-align:center;
width:100%;
padding:0 0;
text-align:center;
background:#1c94b7;
height:42px;
line-height:42px;
font-weight:bold;
}
.payment-mode .tabs a.place-order {
position:relative;
top:75px;
}
.BtText {
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
text-align:center;
display:inline-block;
margin:0 20px 0 0;
}
.tabs .login-feald {
margin-top: 16px;
float:left;
width: 100%;
}
.payment-mode .card-number,
.payment-mode .expiry-date,
.payment-mode .cvv {
float:left;
text-align:center;
margin:10px 0 20px 0;
outline:0px;
}
.login-feald .card-name {
margin-top: 60px;
}
.payment-mode .card-number:focus,
.payment-mode .expiry-date input:focus {
box-shadow:0 0 10px #ccc inset;
}
.payment-mode .expiry-date,
.payment-mode .cvv {
float:left;
width:220px;
margin:auto;
float:none;
clear:both;
position:relative;
top:20px;
}
.payment-mode .cvv {
width:300px;
position:relative;
top:30px;
}
.payment-mode .cvv input {
width: 90px;
float: left;
border: solid 1px #CCC;
padding: 0px;
text-align: center;
font-size: 16px;
position: absolute;
left: 0px;
top: 0px;
height: 23px;
}
#payCard input#cnumber {
border: 0px;
width: calc(100% - 20px);
padding: 10px;
margin: 0;
text-indent: 0;
}
.login-feald input {
border: 1px solid #ccc;
float: left;
padding: 9px;
box-sizing: border-box;
background: #fff;
width: 100%;
}
#payCard #cvvCode {
margin:0 0 10px 0;
}
#payCard {
padding:0 0 60px 0;
margin:0 0 60px 0;
}
.payment-mode .cvv p {
margin:0 0 0 100px;
padding:0 0 0 50px;
text-align:left;
background:url(https://media.mediadirhub.com/images/cvv.jpg) 0 0 no-repeat;
line-height:12px;
font-size:11px;
min-height:24px;
width:150px;
}
.payment-mode .expiry-date span {
width:90px;
display:inline-block;
height:90px;
float:left;
}
.payment-mode .expiry-date span.mid {
width:30px;
background:url(https://media.mediadirhub.com/images/devider.png) center center no-repeat;
}
.payment-mode .expiry-date input,
.payment-mode .expiry-date select {
font-size:30px;
text-align:center;
padding:0px;
width:84px;
height:84px;
border:solid 3px #e7ebea;
border-radius:70px;
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari and Chrome */
outline:0px;
}
.payment-mode .expiry-date b {
white-space: nowrap;
float: left;
width: 100%;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.payment-mode .payment-nav a {
text-align:center;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
font-size:26px;
white-space:nowrap;
padding:0;
line-height:46px;
height:46px;
margin:0 0 0 1px;
border-radius: 0;
box-shadow: none;
}
.payment-mode .payment-nav a:first-child {
margin:0;
}
.paynowbtn {
background: #1c94b7 none repeat scroll 0 0;
color: #fff;
display: inline-block;
font-weight: bold;
padding: 10px 0;
text-align: center;
text-decoration: none;
text-shadow: 0 0 0 #000;
text-transform: none;
width: 100%;
}
.checkout {
background:#1c94b7;
color: #fff;
display: inline-block;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: none;
width: 100%;
line-height:44px;
}
.checkoutHyper
{
display: inline-block;
font-weight: bold;
text-align: right;
text-decoration:underline;
text-transform: none;
width: 100%;
line-height:51px;
}
.footer-nav {
width: 100%;
}
.scanner_btn{
right: 0px !important;
left: auto !important;
display:block !important;
}
.website-login.icon-right .scanner_btn{
left: 0px !important;
right: auto !important;
display:block !important;
}
.website-login .scanner_btn {
border-radius: 0 !important;
}
.website-login.icon-right .scanner_btn {
border-radius:0 !important;
}
.website-login.theme-1.rounded-1 .scanner_btn {
border-radius: 0px 20px 20px 0 !important;
}
.website-login.theme-1.rounded-1.icon-right .scanner_btn {
border-radius:20px 0px 0px 20px !important;
}
.website-login.theme-3 .scanner_btn{
top: 25px;
height: 36px;
right: 0px !important;
}
.fbLoginCutomDiv{
position: absolute;
left: 0;
top: 0;
width:100% !important;
}
.fbLoginCutomDiv span{width:100% !important; height:100% !important}
.kep-login-facebook.metro{ border-radius: 0;
width: 100%;
opacity: 0;}
.website-login li.input[data-type=checkbox], .website-login li.input[data-type=radio], .website-login li.input[data-type=signature] {
border-radius: 0 0 0 0;
padding: 0;
position: relative;
margin: 40px 0 15px !important;
}
.website-login .input[data-type=checkbox] i.info, .website-login .input[data-type=radio] i.info {
right: 5px;
top: -35px;
}
.website-login .input i.info {
position: absolute;
right: 5px;
top: 5px;
font-size: 18px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
z-index: 1;
display: none;
}
.website-login li.input[data-type=checkbox] label, .website-login li.input[data-type=radio] label, .website-login li.input[data-type=signature] label {
width: 50%;
float: left;
padding: 0 0 0 30px;
position: relative;
line-height: 40px;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
font-size: 16px;
}
.website-login .content-center p, .website-login .heading-center h2, .website-login .label-center .label, .website-login .label-center .label-head {
text-align: center !important;
}
.website-login .rounded-1 li.input[data-type=checkbox], .website-login .rounded-1 li.input[data-type=radio], .website-login .rounded-1 li.input[data-type=signature] {
border-radius: 0 0 20px 20px !important;
}
.website-login.theme-2 input+input[type="tel"]{
border-radius: 40px;
}
.website-login .btn{margin: 0 auto;}
.login-content {
background-size: cover;
background-position: center top;
}
/* matrlize css */
.website-login .targetLabel {
position: relative;
display: inline-block;
padding-top: 6px;
line-height: 1.5;
/* overflow: hidden; */
width: 100%;
box-sizing: border-box;
}
/* Input, Textarea */
.website-login .targetLabel>.targetField {
box-sizing: border-box;
margin: 0;
border: solid 1px;
/* Safari */
border-color: var(--iconColor);
border-top-color: transparent;
border-radius: 4px;
padding: 15px 13px 15px;
width: 100%;
height: inherit;
color: var(--color-helper2);
background-color: transparent;
box-shadow: none;
/* Firefox */
font-family: inherit;
font-size: inherit;
line-height: inherit;
caret-color: var(--iconColor);
transition: border 0.2s, box-shadow 0.2s;
}
/* Span */
.website-login .targetLabel>.targetField+span {
position: absolute;
top: 0;
left: 0;
display: flex;
border-color: var(--iconColor);
width: 100%;
max-height: 100%;
color: var(--color-helper2);
font-size: 75%;
line-height: 15px;
cursor: text;
transition: color 0.2s, font-size 0.2s, line-height 0.2s;
}
/* Corners */
.website-login .targetLabel>.targetField+span::before,
.website-login .targetLabel>.targetField+span::after {
content: "";
display: block;
box-sizing: border-box;
margin-top: 6px;
border-top: solid 1px;
border-top-color: var(--iconColor);
min-width: 10px;
height: 8px;
pointer-events: none;
/* box-shadow: inset 0 1px transparent; */
transition: border-color 0.2s, box-shadow 0.2s;
}
.website-login .targetLabel>.targetField+span::before {
margin-right: 4px;
border-left: solid 1px transparent;
border-radius: 4px 0;
}
.website-login .targetLabel>.targetField+span::after {
flex-grow: 1;
margin-left: 4px;
border-right: solid 1px transparent;
border-radius: 0 4px;
}
/* Hover */
.website-login .targetLabel:hover>.targetField {
border-color: var(--iconColor);
border-top-color: transparent;
}
.website-login .targetLabel:hover>.targetField+span::before,
.website-login .targetLabel:hover>.targetField+span::after {
border-top-color: var(--borderColor);
}
.website-login .targetLabel:hover>.targetField:not(:focus):placeholder-shown, .website-login .select-file {
border-color: var(--borderColor);
}
/* Placeholder-shown */
.website-login .targetLabel .targetField:not(:focus):placeholder-shown {
border-top-color: var(--borderColor);
}
.login-wrapper .targetLabel .targetField:not(:focus):placeholder-shown{
border-color: var(--borderColor);
}
.website-login .targetLabel .targetField:not(:focus):placeholder-shown+span {
font-size: inherit;
line-height: 68px;
opacity: .6;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.website-login .targetLabel .targetField:not(:focus):placeholder-shown+span {
font-size: inherit;
line-height: 68px;
}
.website-login .targetLabel .targetField:not(:focus):placeholder-shown+span::before,
.website-login .targetLabel .targetField:not(:focus):placeholder-shown+span::after {
border-top-color: transparent;
}
/* Focus */
.website-login .targetLabel>.targetField:focus {
border-color: var(--iconColor);
border-top-color: transparent;
/* box-shadow: inset 1px 0 var(--iconColor), inset -1px 0 var(--iconColor), inset 0 -1px var(--iconColor); */
outline: none;
}
.website-login .targetLabel>.targetField:focus+span {
color: var(--color-helper2);
}
.website-login .targetLabel>.targetField:focus+span::before,
.website-login .targetLabel>.targetField:focus+span::after {
border-top-color: var(--iconColor) !important;
/* box-shadow: inset 0 1px var(--iconColor); */
}
/* Disabled */
.website-login .targetLabel>.targetField:disabled,
.website-login .targetLabel>.targetField:disabled+span {
border-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38) !important;
border-top-color: transparent !important;
color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
pointer-events: none;
}
.website-login .targetLabel>.targetField:disabled+span::before,
.website-login .targetLabel>.targetField:disabled+span::after {
border-top-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38) !important;
}
.website-login .targetLabel>.targetField:disabled:placeholder-shown,
.website-login .targetLabel>.targetField:disabled:placeholder-shown+span {
border-top-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38) !important;
}
.website-login .targetLabel>.targetField:disabled:placeholder-shown+span::before,
.website-login .targetLabel>.targetField:disabled:placeholder-shown+span::after {
border-top-color: transparent !important;
}
/* custom radio and checkbox css */
.website-login .cstm-radio {
display: block;
position: relative;
padding-left: 35px !important;
margin-bottom: 12px;
cursor: pointer;
font-size: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.website-login .cstm-radio input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.website-login .checkmark {
position: absolute;
top: 8px;
left: 0;
height: 25px;
width: 25px;
border-radius: 50%;
border: 2px solid;
}
.website-login .checkmark:after {
content: "";
position: absolute;
display: none;
}
.website-login .cstm-radio input:checked ~ .checkmark:after {
display: block;
}
.website-login .cstm-radio .checkmark:after {
top: 6px;
left: 6px;
width: 12px;
height: 12px;
border-radius: 50%;
}
/* custom checkbox */
.website-login .cstm-checkbox {
display: block;
position: relative;
padding-left: 35px !important;
margin-bottom: 12px;
cursor: pointer;
font-size: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.website-login .cstm-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.website-login .cstm-checkbox .checkmark {
position: absolute;
top: 8px;
left: 0;
height: 25px;
width: 25px;
border-radius: 0;
border: 2px solid;
}
.website-login .cstm-checkbox .checkmark:after {
content: "";
position: absolute;
display: none;
}
.website-login .cstm-checkbox input:checked ~ .checkmark:after {
display: block;
}
.website-login .cstm-checkbox .checkmark:after {
left: 8px;
top: 1px;
width: 7px;
height: 15px;
border: solid;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.global-login .page-content.login-content {
width: 100%;
height: 100vh;
overflow: auto;
}
.global-login .website-login.login-page.center-cont {
position: relative;
margin-top: 20px;
margin-bottom: 20px;
}
.ios .website-login.login-page.center-cont,
.android .website-login.login-page.center-cont {
position: relative;
top: 0;
margin: 3% auto;
transform: translateY(0%);
-webkit-transform: translateY(0%);
}
@media(max-width:568px) {
.global-login .website-login.login-page.center-cont {
margin-top: 50px;
}
}
@media (max-width:380px) {
.website-login.login-page {
max-width: 280px;
}
.global-login .website-login.login-page.center-cont {
margin-top: 20px;
}
}
.label.targetLabel .phone-code {
width: 60px;
float: left;
}
.label.targetLabel .phone-code + .targetField {
width: 80%;
float: right;
}
.label.targetLabel .phone-code + .targetField + span {
width: 80%;
float: right;
left: auto;
right: 0;
}
.website-login.profile-cont {
width: 100%;
max-width: 90%;
margin: 0 auto;
padding: 10px !important;
box-sizing: border-box;
}
.comm-profile.website-login .btn {
width: 100%;
}
@media screen and ( max-height: 600px ) {
.website-login.login-page.center-cont {
position: static;
top: auto;
margin: 40px auto;
transform: inherit;
-webkit-transform: inherit;
-moz-transform: inherit;
}
}
/* new css */
.login-wrapper .login-content {
display: flex;
align-items: center;
justify-content: center;
}
.roboto{
font-family: 'roboto';
}
.signin-container {
font-weight: 200;
color: var(--contentColor);
font-size: 14px;
max-width: 420px;
width: 100%;
text-align: var(--contentAlign) !important;
}
.signin-container p {
margin-top: 0;
margin-bottom: 1rem;
}
.signin-container .card {
padding: 20px;
background: transparent;
box-shadow: none;
}
.login-wrapper .form-outline {
position: relative;
margin-bottom: 1.3rem;
z-index: 1;
padding-top: 6px;
color: var(--loginFieldColor);
}
.custom-signup .form-outline.password,
.custom-signup .form-outline.conf_password {
display: none;
}
.login-wrapper .select-file {
width: 100%;
margin: 0;
outline: 0;
padding: 12px;
box-sizing: border-box;
border-radius: 0 4px 4px 0;
font-family: inherit;
font-size: 14px;
resize: none;
border-radius: 4px;
border: 1px solid var(--iconColor);
border-radius: 8px;
display: inline-block;
}
.login-wrapper .form-outline .form-control,
.login-wrapper .form-outline .form-select {
width: 100%;
padding: 10px 15px;
display: block;
border: none;
border: 1px solid var(--borderColor);
background-color:transparent;
border-radius: 8px;
font-size: var(--contentSize);
height: 45px;
border-top-color: transparent;
color: var(--loginFieldColor) !important;
}
.login-wrapper input:-webkit-autofill,
.login-wrapper input:-webkit-autofill:hover,
.login-wrapper input:-webkit-autofill:focus,
.login-wrapper input:-webkit-autofill:active{
-webkit-background-clip: text;
-webkit-text-fill-color: #212529;
transition: background-color 5000s ease-in-out 0s;
box-shadow: none;
}
.form-outline .form-control:focus {
outline: none;
box-shadow: none;
}
/* .login-wrapper .form-outline .form-label {
color: var(--contentColor);
font-weight: normal;
position: absolute;
pointer-events: none;
left: 12px;
top: 12px;
transition: 0.2s ease all;
background: transparent;
font-weight: 200;
} */
.login-wrapper .form-outline .form-label {
position: absolute;
top: 0;
left: 0;
display: flex;
border-color: var(--color-helper1);
width: 100%;
max-height: 100%;
color: var(--color-helper2);
font-size: 90%;
line-height: 15px;
cursor: text;
transition: color 0.2s, font-size 0.2s, line-height 0.2s;
margin-bottom: 0px;
z-index: -1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.login-wrapper .form-outline .form-label::before,
.login-wrapper .form-outline .form-label::after {
content: "";
display: block;
box-sizing: border-box;
margin-top: 6px;
border-top: solid 1px;
border-top-color: var(--borderColor);
min-width: 10px;
height: 8px;
pointer-events: none;
/* box-shadow: inset 0 1px transparent; */
transition: border-color 0.2s, box-shadow 0.2s;
}
.login-wrapper .form-outline .form-control:not(:focus):placeholder-shown {
border-top-color: var(--borderColor);
}
.form-outline .form-control:not(:focus):placeholder-shown+.form-label::before,
.form-outline .form-control:not(:focus):placeholder-shown+.form-label::after {
border-top-color: transparent;
}
.login-wrapper .form-outline .form-control:not(:focus):placeholder-shown+.form-label {
font-size: inherit;
line-height: 57px;
}
.login-wrapper .form-outline .form-label::before{
border-radius: 8px 0px;
margin-right: 4px;
border-left: solid 1px transparent;
}
.login-wrapper .form-outline .form-label::after {
flex-grow: 1;
margin-left: 4px;
border-right: solid 1px transparent;
border-radius: 0px 8px;
}
.form-outline .form-control:not(:focus):placeholder-shown+.form-label::before,
.form-outline .form-control:not(:focus):placeholder-shown+.form-label::after {
border-top-color: transparent;
}
.signin-container .btn {
border-radius: 8px;
padding: 10px 15px;
font-size: 16px;
transition: .3s;
}
.signin-container .btn:hover {
opacity: 0.8;
}
.signin-container .forgot-btn {
color: inherit;
}
.signin-container .social-btn {
/* display: flex;
justify-content: center; */
}
.signin-container .social-btn .btn {
margin: 0 5px;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
}
.signin-container .social-btn .btn {
margin: 0 5px;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
background: transparent;
border: 1px solid #c8d6f0;
}
.signin-container .social-btn .btn .material-icons {
font-size: 28px;
}
.signin-container .social-btn .btn.apple-btn {
background: #000;
color: #fff;
border-color: #000;
}
.signin-container .social-btn .btn.fb-btn {
border-color: rgb(94, 94, 145);
margin: 0px;
margin-top: 10px;
padding: 8px 0px;
border-radius: 6px;
font-size: 13px;
height: 38px;
}
.signin-container .social-btn .fb-btn {
width: 100%;
}
.signin-container .social-btn .fb-btn i {
margin-right: 10px;
}
.signin-container .social-btn .btn.google-btn {
color: #fff;
}
.signin-container .divider {
position: relative;
color: #828689;
text-align: center;
z-index: 1;
font-size: 12px;
}
.signin-container .divider span {
width: 100%;
padding: 10px;
display: flex;
text-align: center;
word-break: break-all;
white-space: nowrap;
text-transform: capitalize;
}
.signin-container .divider span:after, .signin-container .divider span:before {
content: "";
position: relative;
height: 1px;
width: 100%;
left: 0px;
background: var(--iconColor);
z-index: -1;
top: 8px;
margin-left: 10px;
}
.signin-container .divider span:before{
margin-right: 10px;
margin-left: 0px;
}
.signin-container .otp-input {
width: 50px;
height: 50px;
margin: 0 5px;
text-align: center;
font-size: 24px;
border: 1px solid #e0e8f5;
border-radius: 8px;
background-color: transparent;
}
.signin-container .otp-input:focus {
border-color: #007bff;
outline: none;
box-shadow: none;
}
.signin-container .card p.second-txt a,
.signin-container .card p.second-txt {
font-size: 95%;
}
.signin-container .btn.btn-outline-primary:hover {
background: transparent;
}
.country-input .dropdown-menu {
max-height: 200px;
overflow: hidden;
overflow-y: auto;
width: 100%;
margin-top: 5px;
border: 0px;
}
.countryCode .dropdown-menu {
max-height: 200px;
overflow: hidden;
overflow-y: auto;
}
.country-input {
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
}
.country-input .country-code {
margin-right: 8px;
position: static;
margin-top: 6px;
}
.country-input .form-outline {
width: 100%;
}
.country-input .btn {
border: 1px solid var(--borderColor);
padding: 10px 8px;
color: var(--loginFieldColor);
}
.modal.country-modal .modal-dialog .modal-body {
height: 47vh;
overflow: hidden;
overflow-y: scroll;
}
.modal.country-modal .modal-dialog .modal-content {
border: 0px;
border-radius: 8px;
}
/* new login form */
.custom-fields .targetLabel>.targetField {
border-radius: 8px;
padding: 10px 15px;
height: auto;
}
.custom-fields .targetLabel .targetField:not(:focus):placeholder-shown+span {
line-height: 55px;
}
.custom-fields .input {
margin-bottom: 1rem;
}
.custom-fields .targetLabel>.targetField+span {
top: 2px;
left: 1px;
}
.customField .label-head {
margin-bottom: 15px;
font-weight: 600;
}
/* Hide the default radio button */
.customField input[type="radio"],
.customField input[type="checkbox"] {
display: none;
}
/* Create a custom radio button */
.customField .checkmark {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
/* background-color: #ccc; */
border-radius: 50%;
margin-right: 10px;
vertical-align: middle;
border: 1px solid var(--iconColor);
}
/* Create the indicator (inside the radio button) */
.customField .checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator when checked */
.customField input[type="radio"]:checked + .checkmark:after{
display: block;
background: var(--buttonBg);
}
/* Style the indicator */
.customField .checkmark:after {
top: 3px;
left: 3px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--iconColor);
}
.form-checkbox .checkmark:after {
content: "";
position: absolute;
display: none;
}
.customField input[type="checkbox"]:checked + .checkmark:after {
display: block;
}
.login-wrapper .input.customField .cstm-checkbox,
.login-wrapper .input.customField .cstm-radio {
margin-bottom: 12px;
position: relative;
padding-left: 27px;
margin-right: 0px;
color: var(--loginFieldColor);
display: block;
}
.login-wrapper .input.customField .cstm-checkbox .checkmark,
.login-wrapper .input.customField .cstm-radio .checkmark {
position: absolute;
left: 0px;
margin-left: 0px;
}
.customField .form-check.form-check-inline {
position: relative;
padding-left: 0px;
}
.form-checkbox input[type="checkbox"]:checked + .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.form-checkbox .checkmark {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
border-radius: 3px;
margin-right: 10px;
vertical-align: middle;
}
.form-checkbox .checkmark:after {
left: 6px;
top: 1px;
width: 6px;
height: 12px;
border: solid var(--buttonBg);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
border-radius: 0px;
background-color: transparent;
}
.login-wrapper .targetLabel>.targetField {
border-radius: 8px;
padding: 10px 15px;
height: 45px;
}
.login-wrapper .targetLabel .targetField:not(:focus):placeholder-shown+span {
font-size: inherit;
line-height: 57px;
}
.login-wrapper .targetLabel>.targetField+span::before {
border-radius: 8px 0px;
}
.login-wrapper .targetLabel>.targetField+span::after{
border-radius: 0px 8px;
}
.login-wrapper .targetLabel>.targetField+span::before, .targetLabel>.targetField+span::after{
border-top-color:var(--borderColor)
}
.login-wrapper .targetLabel>.targetField{
border-color: var(--borderColor);
}
.login-wrapper .targetLabel>.targetField+span::after{
border-top-color:var(--borderColor);
}
.login-wrapper .input.customField {
margin-bottom: 18px;
}
.login-wrapper .input.customField .cstm-radio {
margin-right: 12px;
}
.image-upload li{
left: 0px;
}
.login-wrapper .targetLabel{
--color-helper1: var(--iconColor);
--color-helper2: var(--iconColor);
}
.login-wrapper .targetLabel>.targetField,
.login-wrapper .targetLabel>.targetField::placeholder,
.login-wrapper .targetLabel>.targetField+span{
color: var(--loginFieldColor);
opacity: 1;
}
.login-wrapper .targetLabel .targetField:not(:focus):placeholder-shown+span{
opacity: 1;
}
@media(max-width:767px){
}
.login-wrapper {
background: var(--loginBackground);
background-size: cover;
background-position: center center;
}
.form-outline.with-icon .icon {
position: absolute;
right: 10px;
top: 56%;
transform: translateY(-50%);
cursor: pointer;
}
.form-outline.with-icon .form-control {
padding-right: 40px;
}
.form-outline.with-icon .icon svg {
fill: var(--loginFieldColor);
height: 20px;
width: 20px;
}
.signin-container .customField .checkmark{
margin-left: 10px;
}
.login-wrapper input::-webkit-contacts-auto-fill-button {
visibility: hidden;
display: none !important;
pointer-events: none;
position: absolute;
right: 0;
}
.login-wrapper input[type="password"]::-ms-reveal {
display: none;
}
.signin-container .card .h2{
color: var(--headingColor);
text-align: var(--headingAlign) !important;
}
.signin-container p{
text-align: var(--contentAlign) !important;
}
.passErrorBox {
position: absolute;
left: calc(100% + 30px);
transform: translateY(-50%);
width: 250px;
box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 13%);
padding: 26px;
color: #717784;
border-radius: 8px;
background-color: #fff;
}
.passErrorBox h5 {
font-size: 13px;
}
.passErrorBox .steps > div {
width: 17%;
height: 2px;
background: #e8e8e8;
}
.passErrorBox .text-success{
color: #4CAF50;
}
.passErrorBox .steps > div.active{
background: #4CAF50;
}
.passErrorBox .steps {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 19px;
}
.passErrorBox ul {
font-size: 13px;
margin-top: 14px;
}
.passErrorBox ul li {
position: relative;
padding-left: 20px;
}
.passErrorBox ul li:not(:last-child) {
margin-bottom: 8px;
}
.passErrorBox ul li:before {
content: '';
position: absolute;
left: 0px;
top: 6px;
width: 5px;
height: 5px;
background: var(--buttonBg);
border-radius: 10px;
}
.passErrorBox ul li:after {
content: '';
position: absolute;
display: none;
left: 5px;
top: 4px;
width: 5px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.passErrorBox ul li.active:before {
width: 15px;
height: 15px;
top: 1px;
left: 0px;
}
.passErrorBox ul li.active:after{
display: block;
}
.passErrorBox ul li.active {
text-decoration: line-through;
}
.passErrorBox ul li.active > span {
opacity: 0.5;
}
.passErrorBox:after,
.passErrorBox:before {
content: '';
right: 100%;
border: 12px solid transparent;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-right-color: #fff;
}
.passErrorBox:before {
border: 0px;
width: 12px;
height: 12px;
background: #fff;
transform: rotate(45deg) translateY(-50%);
box-shadow: -4px 4px 10px rgb(0 0 0 / 16%);
}
@media(max-width:991px){
.passErrorBox {
position: relative;
transform: none;
left: 0px;
width: 100%;
box-shadow: none;
padding: 20px 0px;
}
.passErrorBox:before,
.passErrorBox:after{
display: none;
}
}
.login-wrapper .targetLabel>select.targetField {
border-top-color: transparent;
}
.login-wrapper .targetLabel>.targetField {
border-top-color: transparent;
}
[lang="ar"] .country-input .country-code {
margin-right: 0px;
margin-left: 8px;
}
.signup-page .page-content.login-content {
height: auto;
min-height: 100vh;
}
/* end new login css file*/
.mpesa-page{
background-color: #fff !important;
}
/* new event live page */
.streaming-wrapper {
--bs-body-font-size: 0.9rem;
--header-height:55px;
--sidebar-width:75px;
--sidebar-collaspse:400px;
--second-heading:16px;
--contentSize:13px;
font-size: 14px;
background-color: #111315;
}
.streaming-wrapper.no-sidebar{
--sidebar-width:0px;
}
.streaming-wrapper.not-fixed{
--header-height:0px;
}
.live-event.page-show {
background: var(--background);
}
.streaming-wrapper {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
background: #111315;
width: 100%;
color: var(--contentColor);
z-index: 99;
}
.streaming-wrapper .site-header {
height: var(--header-height);
background: var(--dividerColor);
color: var(--contentColor);
display: flex;
align-items: center;
}
.streaming-wrapper .site-header p {
margin-bottom: 0px;
margin-top: 0px;
}
.streaming-wrapper .sidebar {
position: fixed;
right: 0px;
width: var(--sidebar-width);
border-left: 1px solid var(--dividerColor);
height: calc(100% - var(--header-height));
padding: 10px 10px;
top: calc(var(--header-height));
}
.streaming-wrapper .sidebar nav .nav-link {
text-align: center;
margin-bottom: 14px;
padding: 8px 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
color: var(--contentColor);
}
.streaming-wrapper .sidebar nav .nav-link.active{
background:var(--dividerColor);
}
.streaming-wrapper .sidebar nav .nav-link i {
font-size: 23px;
margin-bottom: 3px;
}
.streaming-wrapper .sidebar .collapse-menu {
position: absolute;
right: var(--sidebar-width);
width: var(--sidebar-collaspse);
height: 100%;
top: 0px;
border-left: 1px solid var(--dividerColor);
display: none;
}
@keyframes fadeInRight{
0%{
opacity: 0;
transform: translateX(20px);
}
100%{
opacity: 1;
transform: translateX(0px);
}
}
.streaming-wrapper .sidebar .collapse-menu.active{
display: block;
animation: fadeInRight .2s ease-in-out both;
animation-delay: .2s;
}
.streaming-wrapper .poll-list {
padding: 0px;
list-style: none;
}
.streaming-wrapper .poll-wrap h5 {
font-size: var(--second-heading);
margin-bottom: 24px;
}
.streaming-wrapper .poll-wrap .progress {
height: 7px;
background-color: #242729;
}
.streaming-wrapper .poll-list li:not(:last-child) {
margin-bottom: 20px;
}
.streaming-wrapper .poll-list li p {
margin-top: 0px;
}
.streaming-wrapper .poll-list li span {
font-size: 18px;
color: #FFB800;
}
.streaming-wrapper .chat-head {
padding: 20px 20px 15px 20px;
border-bottom: 1px solid var(--dividerColor);
}
.streaming-wrapper .chat-head h3 {
font-size: 18px;
margin-bottom: 19px;
}
.streaming-wrapper .chat-head select {
background-color: transparent;
border: 1px solid var(--dividerColor);
color: var(--contentColor);
}
.streaming-wrapper .collapse-menu .collapse-content,.chat-wrapper {
height: 100%;
}
.streaming-wrapper .chat-wrapper .chat-area .no-data {
text-align: center;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.streaming-wrapper .chat-wrapper .chat-area .no-data span {
font-size: 50px;
opacity: 0.2;
}
.streaming-wrapper .chat-bottom {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
padding: 0px 20px;
}
.streaming-wrapper .chat-bottom .input-wrapper .btn {
position: absolute;
right: 0px;
top: 0px;
height: 100%;
color: var(--primaryButtonBg) !important;
}
.streaming-wrapper .chat-bottom .input-wrapper .form-control {
background: transparent;
border: 1px solid var(--dividerColor);
min-height: 42px;
font-size: var(--contentSize);
color: var(--contentColor);
}
.streaming-wrapper .input-wrapper {
position: relative;
margin: 10px 0px;
}
.streaming-wrapper .ques-list .ques-top {
display: flex;
width: 100%;
justify-content: space-between;
margin-bottom: 7px;
}
.streaming-wrapper .user-info{
display: flex;
justify-content: space-between;
}
.streaming-wrapper .ques-list .ques-top .pic-wrap {
width: 25px;
height: 25px;
border-radius: 50px;
overflow: hidden;
margin-right: 10px;
margin-top: 5px;
}
.streaming-wrapper .sec-text {
opacity: 0.5;
}
.streaming-wrapper .ques-list .ques-top .pic-wrap img {
height: 100%;
}
.streaming-wrapper .ques {
padding: 15px;
border-radius: 8px;
z-index: 1;
position: relative;
}
.streaming-wrapper .ques:before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: var(--contentColor);
opacity: 0.05;
z-index: -1;
border-radius: 8px;
}
.streaming-wrapper .ques-list .ques{
margin-bottom: 17px;
}
.streaming-wrapper .like-btn {
display: flex;
align-items: center;
cursor: pointer;
}
.streaming-wrapper .like-btn i {
font-size: 18px;
margin-right: 5px;
}
.streaming-wrapper .like-btn i.liked {
color: var(--sheetIcon);
}
.streaming-wrapper .like-btn span {
font-size: 12px;
}
.streaming-wrapper .user-info .sec-text {
font-size: 80%;
}
.streaming-wrapper .chat-wrapper .chat-area {
height: calc(100% - 230px);
padding: 20px;
overflow-y: auto;
display: flex;
align-items: flex-end;
position: relative;
}
/* For Chrome, Safari, and other WebKit browsers */
.streaming-wrapper .chat-wrapper .chat-area::-webkit-scrollbar,
.streaming-wrapper .main-content::-webkit-scrollbar {
width: 12px; /* Width of the scrollbar */
height: 12px; /* Height of the scrollbar */
}
.streaming-wrapper .chat-wrapper .chat-area::-webkit-scrollbar-thumb,
.streaming-wrapper .main-content::-webkit-scrollbar-thumb {
background-color: #888; /* Color of the scrollbar thumb */
border-radius: 10px; /* Rounded corners */
border: 3px solid transparent; /* Adds padding around the thumb */
background-clip: content-box; /* Makes the thumb fit within the border */
}
.streaming-wrapper .chat-wrapper .chat-area::-webkit-scrollbar-thumb:hover,
.streaming-wrapper .main-content::-webkit-scrollbar-thumb:hover {
background-color: #555; /* Color on hover */
}
.streaming-wrapper .chat-wrapper .chat-area::-webkit-scrollbar-track,
.streaming-wrapper .main-content::-webkit-scrollbar-track {
background: transparent; /* Background of the scrollbar track */
border-radius: 10px; /* Rounded corners */
}
/* Scrollbar corner when both horizontal and vertical scrollbars are visible */
.streaming-wrapper .chat-wrapper .chat-area::-webkit-scrollbar-corner,
.streaming-wrapper .main-content::-webkit-scrollbar-corner {
background: transparent;
}
.streaming-wrapper .chat-wrapper .ques .ques {
border-left: 1px solid var(--dividerColor);
border-radius: 0px;
padding-bottom: 0px;
padding-top: 0px;
margin-top: 15px;
width: 92%;
float: right;
}
.streaming-wrapper .chat-wrapper .ques .ques::before{
display: none;
}
.streaming-wrapper .chat-wrapper .ques:after {
content: '';
display: table;
clear: both;
}
.streaming-wrapper .main-content {
height: calc(100% - var(--header-height));
padding: 50px;
overflow-y: auto;
transition: .3s ease-in-out;
}
.streaming-wrapper.menu-open .main-content{
width: calc(100% - (var(--sidebar-width) + var(--sidebar-collaspse)));
}
.streaming-wrapper .main-content{
width: calc(100% - (var(--sidebar-width)));
}
.streaming-wrapper .live-wrap .content-wrap {
margin-top: 33px;
}
.streaming-wrapper .live-wrap .content-wrap p {
opacity: 0.5;
}
.streaming-wrapper .live-wrap .content-wrap h3 {
margin-bottom: 18px;
font-size: 28px;
font-weight: 600;
}
.streaming-wrapper .chat-item .badge {
background: #0C68E94D;
color: #0C68E9;
font-size: 9px;
padding: 0px 9px;
}
/* .live-event .streaming-wrapper {
position: relative;
min-height: calc(100vh - 124px);
} */
.not-fixed.streaming-wrapper .sidebar {
position: absolute;
padding-top: 25px;
height: calc(100% - var(--header-height));
}
.streaming-wrapper .cloudflare-player {
width: 100% !important;
max-width: initial !important;
}
.streaming-wrapper .login-content {
height: 100%;
}
.streaming-wrapper .login-wrapper {
height: 100%;
--iconColor:#2F3133;
--color-helper2:#616365;
--contentColor:#616365;
}
.streaming-wrapper .login-wrapper input{
color: #fff;
}
.streaming-wrapper .login-wrapper .icon-wrap {
margin-bottom: 24px;
text-align: center;
}
.streaming-wrapper .signin-container {
max-width: 320px;
}
.streaming-wrapper .player-wrap {
position: relative;
aspect-ratio: 2 / 1;
border: 1px solid var(--dividerColor);
}
.streaming-wrapper .player-wrap .event-poster {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
color: #fff;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
background-size: cover !important;
background-position: center center !important;
}
.streaming-wrapper .player-wrap .event-poster img {
width: 100%;
height: 100%;
object-fit: cover;
}
.streaming-wrapper .no-data {
text-align: center;
color: var(--contentColor);
}
.streaming-wrapper .sechulde-wrap {
position: absolute;
bottom: 50px;
left: 20px;
width: 200px;
background: #111315e0;
padding: 15px;
font-size: 12px;
z-index: 99;
}
.streaming-wrapper .sechulde-wrap h5 {
font-size: 14px;
font-weight: bold;
text-transform: capitalize;
}
.streaming-wrapper.not-fixed {
position: absolute;
top: 0;
left: 0;
height: 100%;
z-index: 9;
}
.streaming-wrapper .sechulde-wrap p {
margin: 0px;
font-size: 10px;
}
.streaming-wrapper.fixed{
background: var(--background);
}
.live-event.page-show {
background:var(--background);
position: relative;
}
.streaming-wrapper .login-wrapper .form-outline{
--borderColor:#2F3133;
--loginFieldColor:#616365;
}
.streaming-wrapper .top-bar {
display: flex;
top: 0px;
position: absolute;
left: 0px;
z-index: 99;
width: 100%;
justify-content: space-between;
padding: 20px;
}
/* .streaming-wrapper .vjs-live-viewer-count {
display: flex;
align-items: center;
margin-right: 15px;
}
.streaming-wrapper .vjs-live-viewer-count .icon{
margin-right: 8px;
}
.streaming-wrapper .vjs-live-viewer-count > p {
font-size: 14px;
margin-left: 3px;
} */
.streaming-wrapper .userInfo .content-wrap h5 {
font-size: 14px;
}
.streaming-wrappe .userInfo p {
font-size: 10px;
}
.streaming-wrapper .userInfo {
display: flex;
}
.streaming-wrapper .userInfo .content-wrap {
margin-top: 0px;
}
.streaming-wrapper .userInfo .content-wrap p {
opacity: 0.5;
margin-bottom: 0px;
font-size: 10px;
}
.streaming-wrapper .userInfo .pic {
aspect-ratio: 1 / 1;
width: 35px;
height: 35px;
background: #fff;
border-radius: 50px;
margin-right: 8px;
background-size: cover;
}
.streaming-wrapper .vjs-control-bar.custom-controls{
background-color: var(--player-control) !important;
}
.streaming-wrapper .hide-live .vjs-seek-to-live-control{
display: none;
}
.streaming-wrapper .poll-wrap{
margin-bottom: 20px;
}
.streaming-wrapper .poll-list .poll-option .form-check-label {
border: 1px solid var(--dividerColor);
padding: 15px 15px;
display: block;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
}
.streaming-wrapper .poll-list .poll-option input {
display: none;
}
.streaming-wrapper .poll-list .poll-option input:checked + .form-check-label {
background: #0C68E9;
}
.ques-top-content p {
margin-top: 4px;
}
.chat-bottom .switch-wrap {
align-items: center;
}
.chat-bottom .switch-wrap .form-switch {
padding-bottom: 0px;
min-height: 5px;
}
.hide-loader .page-preloader{
display: none !important;
opacity: 0;
visibility: hidden;
}
#chatroomNew.chat-wrapper .chat-head h3 {
margin-bottom: 0px;
}
.poll-wrapper.chat-wrapper .chat-head h3{
margin-bottom: 0px !important;
}
#chatroomNew.chat-wrapper .chat-area {
height: calc(100% - 150px);
display: flex;
align-items: self-end;
padding-bottom: 0px;
padding-right: 15px;
}
#chatroomNew.chat-wrapper .chat-area .chat-content p {
margin-top: 0px;
}
.streaming-wrapper .chat-wrapper .ques-list,
.streaming-wrapper .chat-wrapper .chat-list,
.streaming-wrapper .chat-wrapper .poll-area {
width: 100%;
max-height: 100%;
}
.streaming-wrapper .chat-wrapper.poll-wrapper .chat-area {
height: calc(100% - 80px);
align-items: flex-start;
}
.event-poster .center-area {
padding: 0px 100px;
text-align: center;
}
.video-js .vjs-volume-panel {
display: flex !important;
}
.more-loader .ring-loader {
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
}
.more-loader .ring-loader {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.more-loader .ring-loader div {
box-sizing: border-box;
display: block;
position: absolute;
width: 40px;
height: 40px;
margin: 8px;
border: 5px solid #fff;
border-radius: 50%;
animation: ring-loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}
.more-loader .ring-loader div:nth-child(1) {
animation-delay: -0.45s;
}
.more-loader .ring-loader div:nth-child(2) {
animation-delay: -0.3s;
}
.more-loader .ring-loader div:nth-child(3) {
animation-delay: -0.15s;
}
.more-loader {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 999;
display: none;
}
.hide-loader .more-loader {
display: block;
}
.streaming-wrapper .live-wrap {
max-width: 1100px;
margin: auto;
}
/* Hide controls when these classes are applied */
.hide-volume .vjs-volume-panel {
display: none !important;
}
.hide-fullscreen .vjs-fullscreen-control {
display: none;
}
.hide-playBar .vjs-play-control {
display: none;
}
.hide-picture-in-picture .vjs-picture-in-picture-control {
display: none;
}
.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{
opacity: 1 !important;
visibility: visible !important;
}
/* .streaming-wrapper .vjs-progress-control {
visibility: hidden !important;
opacity: 0;
width: 100%;
} */
.chat-wrapper .chat-item .time {
margin-top: 0px;
font-size: 10px;
opacity: 0.5;
min-width: 40px;
text-align: right;
}
.chat-wrapper .chat-item {
margin-bottom: 15px;
}
.chat-wrapper .delete svg {
width: 17px;
height: 19px;
}
.chat-wrapper .chat-area .chat-content .chat-message {
word-break: break-word;
}
.chat-wrapper .chat-item .btn.delete {
opacity: 0;
visibility: hidden;
}
.chat-wrapper .chat-item:hover .btn.delete {
opacity: 1;
visibility: visible;
}
.vjs-live-viewer-count {
display: flex;
align-items: center;
}
.vjs-live-viewer-count span {
margin-right: 5px;
}
.streaming-wrapper .no-data.no-wrapper {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.streaming-wrapper #stream-player {
width: 100%;
aspect-ratio: 2 / 1;
height: auto;
}
.streaming-wrapper .back-btn {
color: rgb(255 255 255 / 27%);
}
.streaming-wrapper .back-btn:hover{
color: #fff;
}
@media(max-width:1366px){
.streaming-wrapper{
--sidebar-width:60px;
--sidebar-collaspse:350px;
font-size: 12px;
--header-height: 45px;
}
.streaming-wrapper .chat-head select{
font-size: 13px;
}
.streaming-wrapper .sidebar nav .nav-link {
padding: 5px 0px;
border-radius: 5px;
}
.streaming-wrapper .sidebar nav .nav-link span {
font-size: 10px;
}
.streaming-wrapper .poll-list .poll-option .form-check-label {
font-size: 12px;
padding: 12px;
}
.chat-wrapper .chat-head h3 {
font-size: 16px;
}
.streaming-wrapper .live-wrap .content-wrap h3 {
margin-bottom: 12px;
font-size: 22px;
}
.streaming-wrapper .live-wrap{
max-width: 900px;
}
.streaming-wrapper .ques-list .ques-body .question-area {
margin-top: 0px;
}
.streaming-wrapper .like-btn i {
font-size: 14px;
}
.streaming-wrapper .chat-bottom .input-wrapper .form-control {
min-height: 35px;
}
.chat-wrapper .chat-bottom .input-wrapper .btn {
font-size: 18px;
}
.chat-wrapper .chat-head h3 {
margin-bottom: 10px !important;
}
.streaming-wrapper .chat-wrapper .chat-area {
height: calc(100% - 212px);
}
}
.chat-wrapper .chat-bottom .input-wrapper .btn{
cursor: pointer !important;
}
.chat-wrapper .chat-bottom .input-wrapper .btn svg path {
fill: #fff;
}
@media(max-width:991px){
.streaming-wrapper{
--sidebar-width:60px;
--playerHeight:320px;
font-size: 13px;
}
.streaming-wrapper .live-wrap{
max-width: 100%;
}
.streaming-wrapper .chat-head select{
font-size: 13px;
}
.streaming-wrapper .ques-list .ques {
padding: 13px 10px;
}
.streaming-wrapper .sidebar {
bottom: 0px;
height: auto;
width: 100%;
top: initial;
z-index: 99;
}
.streaming-wrapper .sidebar nav {
justify-content: space-around;
height: var(--sidebar-width);
display: flex;
align-items: center;
border-top: 1px solid var(--dividerColor);
width: 100%;
}
.streaming-wrapper.menu-open .sidebar,
.not-fixed.streaming-wrapper.menu-open .sidebar{
height: calc(100% - (var(--header-height) + var(--playerHeight)));
display: flex;
align-items: end;
}
.streaming-wrapper .sidebar .collapse-menu.active {
height: calc(100% - var(--sidebar-width));
}
.not-fixed.streaming-wrapper .sidebar,
.streaming-wrapper .sidebar {
bottom: 0px;
height: var(--sidebar-width);
width: 100%;
top: initial;
border-left: inherit;
padding: 0px 0px;
}
.streaming-wrapper .sidebar nav .nav-link {
padding: 11px 15px;
margin-bottom: 0px;
}
.streaming-wrapper.menu-open .main-content,
.streaming-wrapper .main-content {
width: 100%;
padding: 0px;
}
.streaming-wrapper .live-wrap .content-wrap{
margin-top: 0px;
padding: 15px;
}
.streaming-wrapper .sidebar .collapse-menu {
width: 100%;
left: 0px;
background-color: var(--background);
bottom: var(--sidebar-width);
top: inherit;
height: calc(100vh - var(--playerHeight));
border-top: 5px solid var(--dividerColor);
border-radius: 0px;
padding-top: 20px;
}
.chat-head .d-flex.align-items-center {
justify-content: right;
}
.chat-head .d-flex.align-items-center {
justify-content: right;
margin-top: -44px;
}
.streaming-wrapper .chat-head{
padding: 12px;
border-bottom: 0px;
}
.chat-wrapper .chat-bottom{
padding: 0px 12px !important;
}
.streaming-wrapper .player-wrap {
height: var(--playerHeight);
width: 100%;
}
.chat-wrapper .input-wrapper + .sec-text {
margin-bottom: 2px !important;
margin-top: 0px !important;
}
.chat-wrapper .input-wrapper {
margin-bottom: 2px !important;
}
.streaming-wrapper .chat-bottom .input-wrapper .form-control {
min-height: 37px;
}
.streaming-wrapper .chat-wrapper .chat-area {
padding: 12px;
height: calc(100% - 147px);
}
.streaming-wrapper .ques-list .ques {
margin-bottom: 10px;
}
.streaming-wrapper .sidebar nav .nav-link span {
display: none;
}
#chatroomNew.chat-wrapper .chat-area {
height: calc(100% - 128px);
}
}
button.btn.fixed-btn {
position: fixed;
z-index: 999;
background: red;
}
.streaming-wrapper .collapse-menu .collapse-btn {
width: 39px;
background: var(--dividerColor);
position: absolute;
left: 0px;
right: 0px;
margin: auto;
top: 0px;
padding: 0px 9px;
padding-top: 8px;
padding-bottom: 5px;
border-radius: 0px 0px 10px 10px;
display: none;
}
.streaming-wrapper .collapse-menu .collapse-btn > div {
height: 3px;
width: 100%;
margin-bottom: 4px;
background: var(--contentColor);
border-radius: 5px;
opacity: 0.3;
}
.card.top-badge {
position: absolute;
right: 10px;
margin: 0px;
top: 10px;
padding: 0px;
z-index: 100;
background: rgb(0 0 0 / 73%);
display: flex;
flex-direction: row;
padding: 10px;
font-size: 12px;
padding-right: 40px;
box-shadow: none;
cursor: pointer;
}
.card.top-badge .pic-wrap {
width: 70px;
background-size: cover !important;;
background-position: center center !important;;
aspect-ratio: 5/4;
display: inline-block;
margin-right: 17px;
}
.card.top-badge .content-wrap {
margin: 0px;
}
.card.top-badge .card-title {
font-size: 14px;
color: #fff;
}
.card.top-badge .live-txt {
position: relative;
display: inline-block;
padding: 5px 8px;
background: #F12E2E;
margin-right: 8px;
font-size: 11px;
border-radius: 3px;
padding-left: 24px;
z-index: 1;
}
.card.top-badge .live-txt:after {
z-index: 2;
content: '';
position: absolute;
left: 8px;
top: 50%;
height: 10px;
width: 10px;
background: #fff;
border-radius: 50px;
transform: translateY(-50%);
}
.stream-player{
background-color: #000;
}
.card.top-badge .cancel-btn {
position: absolute;
right: 6px;
top: 4px;
font-size: 18px;
}
.broadcast-text {
display: flex;
align-items: center;
padding: 10px 15px;
position: absolute;
background: rgb(0 0 0 / 69%);
top: 10px;
left: 10px;
font-size: 12px;
}
.broadcast-text i {
margin-left: 10px;
}
.cursor-pointer{
cursor: pointer;
}
.badge.play-badge {
background: transparent;
border: 1px solid var(--dividerColor);
font-size: 9px;
opacity: 1;
border-radius: 5px;
padding: 6px 9px;
height: auto;
text-transform: uppercase;
margin-bottom: 13px;
color: rgb(255 255 255 / 27%);
align-content: normal;
letter-spacing: 0.5px;
line-height: inherit;
}
.chat-wrapper .input-wrapper input {
padding-right: 40px;
}
@media(max-width:991px){
.streaming-wrapper .collapse-menu .collapse-btn{
display: block;
}
.streaming-wrapper .chat-bottom .input-wrapper .form-control:active,
.streaming-wrapper .form-control:active {
font-size: 16px !important; /* `16px` is safer I assume, although `1rem` works too */
}
.streaming-wrapper #stream-player {
height: 215px;
width: 100%;
aspect-ratio: initial;
}
.streaming-wrapper .userInfo .pic {
width: 20px;
height: 20px;
margin-right: 5px;
}
.streaming-wrapper .top-bar .content-wrap {
padding: 0px;
}
.streaming-wrapper .userInfo .content-wrap h5 {
font-size: 9px;
}
.streaming-wrapper .userInfo .content-wrap p {
font-size: 7px;
margin-top: 1px !important;
}
.streaming-wrapper .top-bar {
padding: 12px;
}
.broadcast-text {
padding: 6px 6px;
font-size: 11px;
line-height: 1;
}
.broadcast-text i {
font-size: 16px;
}
}
@media(max-width:767px){
.streaming-wrapper{
--playerHeight:220px;
}
}
@media(max-width:767px){
.common-list{
width: calc(50% - 12px);
}
}
.login-wrapper .signin-container .select-file{
border-color: var(--borderColor);
color: var(--loginFieldColor);
}
.login-success .thanks-wrap {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color:var(--content-color);
max-width: 320px;
margin: auto;
}
.login-success .thanks-wrap .page-preloader.loader-wrap {
display: block;
}
.login-success .thanks-wrap .ring-loader {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
transform: none;
}
.login-success .thanks-wrap .ring-loader div {
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid var(--content-color);
border-radius: 50%;
animation: ring-loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: var(--content-color) transparent transparent transparent;
}
.login-success .thanks-wrap .ring-loader div:nth-child(1) {
animation-delay: -0.45s;
}
.login-success .thanks-wrap .ring-loader div:nth-child(2) {
animation-delay: -0.3s;
}
.login-success .thanks-wrap .ring-loader div:nth-child(3) {
animation-delay: -0.15s;
}
.group-wrapper {
background:#ececec;
}
.group-list .item-group {
padding: 20px;
border: 1px solid var(--borderColor);
margin-bottom: 20px;
border-radius: 8px;
}
.group-list .item-group h5 {
font-size: var(--contentSize);
margin-bottom: 0px;
max-width: 80%;
}
.group-list .item-group .icon {
font-size: 12px;
border: 1px solid;
padding: 2px 5px;
}
.group-list .item-group .icon:hover,
.group-list .item-group .icon:active{
background-color: var(--contentColor) !important;
color: var(--loginBackground);
border-color: var(--contentColor) !important;
}
.success-icon svg {
width: 60px;
height: 60px;
fill: #4ea00a;
}
.card-custom {
max-width: 500px;
margin: 20px auto;
padding: 20px;
border-radius: 12px;
box-shadow: 0px 0px 6px #0000001a;
font-size:14px;
margin-top: 0px;
}
.card-custom .form-control{
font-size: 14px;
}
.card-custom .form-control:focus{
box-shadow: none;
}
.btn-custom {
border-radius: 6px;
font-weight: 500;
}
.input-error {
border-color: red;
}
.error-text {
color: red;
font-size: 0.875rem;
}
.card-custom.card {
box-shadow: 0px 0px 3px #00000000;
border: 0px;
color: #45484a;
}
.card-custom .btn.btn-custom {
font-size: 13px;
}
.card-custom .btn.btn-custom svg {
width: 15px;
height: 15px;
margin-right: 7px;
}
.card-custom .btn.btn-outline-primary svg path {
fill: #0d6efd;
}
.card-custom .btn.btn-outline-primary:hover svg path{
fill: #fff;
}
.card-custom .btn.btn-light svg path {
fill: #000;
}
/* .card-custom .btn.btn-light:hover svg path{
color: #fff;
} */
/* patient records styling start */
.patient-records {
background: #F8FAFC;
color: #203D73;
}
.patient-records .card {
box-shadow: 0px 4px 34px 0px rgba(222, 222, 222, 0.25);
border: 0;
}
.patient-records .card ,
.patient-records .card-header:first-child {
border-radius: 10px;
}
.patient-records .input-group.search-input input.form-control {
border-left: 0;
padding-left: 0;
}
.patient-records .form-control,
.patient-records .form-select
{
padding: 10px 15px;
font-size: 14px;
}
.patient-records .input-group.search-input .input-group-text {
background: transparent;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
padding-left: 20px;
}
.patient-records .input-group.search-input input.form-control {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.patient-records table {
color: #203D73;
}
.patient-records table thead {
background: #F8F9FA;
border: 0;
}
.patient-records table thead th {
color: #153061;
font-weight: bold;
}
.patient-records table thead th,.patient-records table tbody td {
padding: 15px 15px;
line-height: unset;
vertical-align: middle;
font-size: 13px;
border-color: #e3e3e3 !important;
}
.patient-records table tbody tr:last-child td {
border-color: transparent !important;
}
/* .patient-records .table>:not(caption)>*>* {
padding: 10px !important;
} */
/* .patient-records .form-check-input[type=checkbox] {
zoom: 1.2;
} */
.patient-records .form-check {
padding-left: 1.8em;
}
.patient-records .form-check .form-check-input {
margin-left: -1.8em;
}
.patient-records .form-check-input {
width: 1.1rem;
height: 1.1rem;
transform: scale(1.1);
}
.patient-records .dropstart .custom-dropdown {
position: absolute !important;
left: unset;
right: calc(100% + 4px);
display: block;
top: -4px;
min-width: 160px;
padding: 10px 4px !important;
border-radius: 5px;
box-shadow: -2px 3px 16px 0px #E2E8EB !important;
}
.patient-records .dropstart {
position: relative;
}
.patient-records .dropstart .custom-dropdown .dropdown-item {
padding: 8px 12px;
font-size: 14px;
}
.patient-records .input-group.search-input:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
border-right: 0;
}
.patient-records .input-group.search-input .form-control ~ span.input-group-text {
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.patient-records .input-group input.form-control:focus {
box-shadow: none;
outline: none;
border-color: #ced4da;
}
.patient-records .fs-7{
font-size: 0.9rem;
}
.patient-records .form-label {
font-size: 13px;
color: #6C757D;
}
.patient-records .btn {
font-size: 14px;
}
@media screen and (max-width: 667px) {
.patient-records table thead th, .patient-records table tbody td {
font-size: 13px;
padding: 10px;
}
}
/* .patient-records .limit-case-id {
max-width: 150px;
word-break: break-all;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
} */
.patient-records table tr:nth-child(n+4) ul.custom-dropdown {
bottom: 0;
top: unset;
}