/* ----- HTML & BODY ----- */
html,
body{
position: relative;
margin: 0px;
padding: 0px;
width: 100%;
font-family: 'Roboto';
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
/* ----- HTML & BODY ----- */
*{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* ----- MOBILE DETECTION ----- */
.is_mobile{ display: none; }
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
.is_mobile{ display: block; }
}
/* ----- END | MOBILE DETECTION ----- */
/* ----- FORM ----- */
form.trans-bottom-border {
width: 600px;
}
form.trans-bottom-border > div:not(:last-child) {
margin-bottom: 20px;
}
form.trans-bottom-border label {
width: 150px;
font-weight: 700 !important;
}
form.trans-bottom-border .prefix {
width: 15px;
}
form.trans-bottom-border input,
form.trans-bottom-border select,
form.trans-bottom-border textarea {
width: calc(100% - 155px);
}
form.trans-bottom-border input.has-prefix,
form.trans-bottom-border select.has-prefix,
form.trans-bottom-border textarea.has-prefix {
width: calc(100% - 175px);
}
form.trans-bottom-border input.disabled,
form.trans-bottom-border select.disabled,
form.trans-bottom-border textarea.disabled {
background: transparent !important;
}
form.trans-bottom-border .multi-field > div {
width: calc(100% - 155px);
}
form .currency-input input {
padding-left: 50px !important;
padding-right: 16px !important;
}
form .currency-input.has-free input {
padding-right: 70px !important;
}
form .currency-input .currency-indicator {
margin-top: 1px;
height: calc(100% - 2px);
}
form .percentage-input input {
padding-left: 16px !important;
padding-right: 60px !important;
}
form .percentage-input .percentage-indicator {
margin-top: 1px;
height: calc(100% - 2px);
}
.text-editor ul,
.text-editor ol,
.text-editor ul li,
.text-editor ol li {
margin: revert !important;
padding: revert !important;
list-style: revert !important;
}
.text-editor img{
width: 100%;
}
.text-editor iframe{
width: 100%;
height: 100%;
}
.text-editor blockquote {
background: rgba(159,78,247,0.1);
margin: 0px;
padding: 10px 20px;
border-left: solid 4px #9f4ef7;
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
/* ----- END | FORM ----- */
/* ----- POPUP ----- */
#popup > .close,
#popup > .close div{
background: rgba(0,0,0,0.45);
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
#popup > .content > form#delete-account-prompt .btn {
width: 100%;
text-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#popup .content [data-popup-version="1.5.0"]#add-component-form .form-area .heading .search input {
padding: 20px 30px;
border: none;
}
#popup .content [data-popup-version="1.5.0"]#add-component-form .form-area .components .component input {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
border: none;
}
#popup .content [data-popup-version="1.5.0"]#save-page-preset-form .form-area .heading .search input {
padding: 20px 30px;
border: none;
}
#popup .content [data-popup-version="1.5.0"]#save-page-preset-form .form-area .components .component input {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
border: none;
}
#popup .content [data-popup-version="1.5.0"]#save-product-collections-form {
width: calc(100vw - 100px);
}
#popup .content [data-popup-version="1.5.0"]#save-product-collections-form .product-collections div {
cursor: revert;
}
#popup .content [data-popup-version="1.5.0"]#save-product-collections-form .product-collections .checkbox {
cursor: pointer;
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
#popup::before {
display: none;
}
#popup > .content {
-webkit-height: var(--vp-height);
-moz-height: var(--vp-height);
-ms-height: var(--vp-height);
-o-height: var(--vp-height);
height: 100%;
width: 100%;
}
#popup > .content > form {
min-height: 100%;
}
#popup > .content > form#delete-account-prompt .width-70-percent {
padding: 0;
width: 100%;
}
#popup > .content #add-page-form {
width: 100%;
}
#popup > .content #add-page-form .form-area {
height: calc(100vh - 104px) !important;
}
#popup > .content .preloader {
margin: 0 auto;
left: 0px;
right: 0px;
top: 50%;
transform: translateY(-50%);
}
#popup > .content #add-page-form .actions {
display: flex;
}
#popup > .content #add-page-form .actions > div {
width: 50%;
}
#popup > .content #add-page-form .actions > div:first-child {
margin-right: 20px;
}
#popup > .content #add-page-form .margin-vert-10 .valign-content:nth-last-child(1) {
width: 100%;
}
#popup > .content #add-page-form .actions {
display: flex;
}
#popup > .content #add-page-form .actions > div {
width: 50%;
text-align: center;
}
#popup > .content #add-page-form .actions > div:first-child {
margin-right: 20px;
}
#popup > .content #add-page-form .actions > div:nth-last-child(1) {
margin-right: 0px;
width: 100%;
}
#popup > .content #add-page-form .actions > div:nth-last-child(2) ~ div {
width: 50%;
}
#popup > .content #add-page-form > div .btn:nth-last-child(1) {
width: 100%;
text-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
#popup > .content #add-page-form > div .btn:nth-last-child(2) {
width: 50%;
text-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
#popup > .content > form#edit-component-form {
width: 100%;
}
#popup > .content > form#edit-component-form > div > .btn {
margin: 0px;
width: 100%;
text-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
}
/* ----- END | POPUP ----- */
/* ----- HEADER & FOOTER ----- */
#header,
#footer{
z-index: 1;
}
#content{
position: relative;
z-index: 0;
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
/* ----- END | HEADER & FOOTER ----- */
/* ----- POPUP NOTIFICATIONS ----- */
@keyframes popup-notification-progress{
0%{ width: 0%; }
100%{ width: 100%; }
}
.popup-notifications .popup-notification {
width: 400px;
right: 30px;
bottom: -106px;
box-shadow: 0 0 30px 0 rgba(0,0,0,0.15);
}
.popup-notifications .popup-notification.show{
bottom: 50px;
}
.popup-notifications .popup-notification .progress {
animation: popup-notification-progress 3.5s;
}
.popup-notifications .popup-notification .content .info .title {
font-size: 14px;
}
.popup-notifications .popup-notification .content .info .subtitle {
font-size: 12px;
}
/* ----- END | POPUP NOTIFICATIONS ----- */
[app-click]{
cursor: pointer;
}
/* ----- FILL SCREEN ----- */
.fill-screen{
position: absolute;
margin: auto;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
border-radius: 5px;
transform: translate(-50%,-50%);
transition: all 1s ease-in-out;
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
/* ----- END | FILL SCREEN ----- */
/* ----- CLOSE (X) ----- */
.close-x{
width: 16px;
height: 16px;
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
/* ----- END | CLOSE (X) ----- */
/* ----- MAIN ----- */
#main .logo .logo-icon{
width: 41px;
height: 50px;
}
#main .content .buttons .btn{
width: 120px;
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
/* ----- END | MAIN ----- */
/* ----- SIGN UP & LOGIN ----- */
#sign-up{
text-transform: initial;
}
#sign-up form,
#login form {
width: 400px;
}
#sign-up form > div:not(.bottom),
#login form > div:not(.btn){
width: 0%;
}
#sign-up form > div:not(.bottom).show,
#login form > div:not(.btn).show{
width: 100%;
}
#sign-up form > div input,
#login form > div input{
background: transparent;
opacity: 0;
border: none;
}
#login form .btn{
opacity: 0;
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
/* ----- END | SIGN UP & LOGIN ----- */
/* ----- MAP ----- */
#app-map{
min-height: 550px;
height: calc(100% - 200px);
}
#app-map .top .search-app-map{
width: 350px;
}
#app-map .top .search-app-map input {
background: none;
height: 50px;
border: none;
}
#app-map .top .search-app-map div {
width: 50px;
height: 50px;
}
#app-map .bottom .timeline-title .arrow {
width: 44px;
}
#map{
height: 100%;
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
/* ----- END | MAP ----- */
/* ----- TIMELINE ----- */
#timeline .content {
top: -34px;
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
/* ----- END | TIMELINE ----- */
/* ----- WRITE BLOCK ----- */
.write-post-block {
width: 530px;
padding: 24px 40px;
}
.avatar-small.standard{
margin-left: -25px;
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
/* ----- END | WRITE BLOCK ----- */
/* ----- STATUS ----- */
.status{
background: #1a1a1a;
width: 530px;
}
.status .id {
height: 60px;
}
.status .text {
font-size: 24px;
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
/* ----- END | STATUS ----- */
/* ------ EDIT ACCOUNT ------- */
#edit-account .items > div {
width: 300px;
height: 150px;
}
.edit .address-list .address {
height: 162px;
}
.edit .address-list .address:not(.persist):hover .container{
border-bottom: solid 2px black;
box-shadow: 0 0 30px 0 #ddd;
}
.edit .address-list .address .add-address {
width: 50px;
height: 50px;
}
.edit .address-list .address:not(.persist):hover .add-address{
border-color: black;
}
.edit .address-list .address .add-address .fa {
margin: 2px 0 0 3px;
font-size: 20px;
}
.edit .address-list .address:not(.persist):hover .add-address .fa{
color: black;
}
#manage-branding .container .details form .image .email-header-image {
padding-bottom: calc((130/600)*100%);
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
.dashboard-content .edit .width-800 {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
.dashboard-content .edit.account-details .width-600 {
padding: 30px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
.dashboard-content .edit .width-800 form:first-child {
margin-top: 1px;
padding: 30px;
}
.dashboard-content .edit form .half-width,
.dashboard-content .edit form .third-width {
display: block;
margin: 0px;
padding: 0px;
width: 100%;
}
.dashboard-content .edit form .margin-vert-10 > .valign-content.half-width:not(:first-child) {
margin-top: 15px;
}
.dashboard-content .edit .address-list {
margin: 0px;
}
.dashboard-content .edit .address-list .address {
margin: 0px;
width: 100%;
height: auto;
}
.dashboard-content .edit .address-list .address .container > div:first-child:not(.add-address) {
width: calc(100% - 30px);
}
.hwo-my-data .dashboard-content .edit.account-details > div:last-child {
padding: 30px;
}
.hwo-manage-communications .dashboard-content .edit form > div:not(:first-child):not(:last-child) {
display: flex;
}
.hwo-manage-communications .dashboard-content .edit form > div:not(:first-child):not(:last-child) > div:first-child {
width: calc(100% - 115px);
}
.hwo-manage-communications .dashboard-content .edit form > div:not(:first-child):not(:last-child) > div:last-child {
width: 115px;
text-align: right;
}
.hwo-manage-communications .dashboard-content .edit form > div:not(:first-child):not(:last-child) > div:last-child::before{
content:"";
display: inline-block;
vertical-align: bottom;
width: 0px;
height: 100%;
}
.hwo-manage-communications .dashboard-content .edit form > div:not(:first-child):not(:last-child) > div:last-child > div:first-child {
display: none;
}
.hwo-manage-communications .dashboard-content .edit form > div:not(:first-child):not(:last-child) > div:last-child > div:last-child {
display: inline-block;
vertical-align: bottom;
margin-left: -5px;
}
.dashboard-content #manage-branding .pages-components > .container {
margin: 0px;
padding: 0px 30px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
.dashboard-content #manage-branding .pages-components .container .details > form {
padding: 30px;
}
.hwo-features .dashboard-content .manage-features .entry-tiles {
padding: 30px;
}
.hwo-features .dashboard-content .manage-features .entry-tiles .features-list {
margin-top: 20px;
padding: 30px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
.hwo-features .dashboard-content .manage-features .entry-tiles .features-list .item{
display: block;
padding: 30px 0;
}
.hwo-features .dashboard-content .manage-features .entry-tiles .features-list .item > div:first-child {
padding-bottom: 10px;
width: 100%;
}
.hwo-features .dashboard-content .manage-features .entry-tiles .features-list .item > div:last-child {
margin-top: 15px;
width: 100%;
text-align: center;
}
.hwo-features .dashboard-content .manage-features .entry-tiles .features-list .item > div:last-child > div {
display: block;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
.hwo-administrators #manage-administrators .users .entry-tiles > div {
padding: 0px;
}
.hwo-administrators #manage-administrators .users .entry-tiles > div:first-child > div:first-child {
margin-right: 20px;
}
.hwo-administrators #manage-administrators .users .entry-tiles > div:first-child > div:last-child .btn {
padding-left: 0px;
padding-right: 0px;
width: 100%;
text-align: center;
}
.hwo-administrators #manage-administrators .users .entry-tiles > div:last-child .row{
padding: 20px;
}
.hwo-administrators #manage-administrators .users .entry-tiles > div:last-child .row .col:not(:first-child):not(:nth-child(2)) {
display: none;
}
.hwo-administrators #manage-administrators .users .entry-tiles > div:last-child .row .col{
width: 50%;
}
.hwo-blog .edit.account-details .blog-posts .search-btn .toggle > div {
top: 0px;
transform: none;
}
.hwo-blog .edit.account-details .blog-posts .search-btn .toggle > div .hwo-toggle {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
.dashboard-content .manage-events .entry-tiles {
padding: 30px;
}
.dashboard-content .manage-events .entry-tiles .search-btn {
display: grid;
padding: 30px;
}
.dashboard-content .manage-events .entry-tiles .search-btn > div {
width: 100%;
}
.dashboard-content .manage-events .entry-tiles .search-btn > div:first-child {
order: 2;
}
.dashboard-content .manage-events .entry-tiles .search-btn > div:first-child input {
padding: 12px 20px !important;
width: 100% !important;
}
.dashboard-content .manage-events .entry-tiles .search-btn > div:first-child .fa {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
.dashboard-content .manage-events .entry-tiles .search-btn > div:last-child {
order: 1;
margin-bottom: 10px;
}
.dashboard-content .manage-events .entry-tiles .search-btn > div:last-child span {
width: 100%;
text-align: center;
}
.dashboard-content .manage-events .entry-tiles .events {
padding: 20px;
}
.dashboard-content .manage-events .entry-tiles .events .event {
padding: 30px 10px 10px 10px;
width: 100%;
}
.dashboard-content .manage-events .entry-tiles .events .event:first-child {
padding-top: 10px;
}
.hwo-event .dashboard-content .manage-events .entry-tiles > div {
padding: 30px;
width: 100%;
}
.hwo-event .dashboard-content .manage-events .entry-tiles > div:not(.location):not(.age-restriction):not(.capacity):not(.actions) .half-width {
margin: 20px 0 0 0;
padding: 0px;
width: 100%;
}
.hwo-event .dashboard-content .manage-events .entry-tiles > div:not(.location):not(.age-restriction):not(.capacity):not(.actions) .half-width:first-child {
margin: 0px;
}
.hwo-event .dashboard-content .manage-events .entry-tiles .live-stream .checkbox label {
vertical-align: top;
padding-top: 4px;
width: calc(100% - 30px);
}
.hwo-event .dashboard-content .manage-events .entry-tiles .actions .half-width:first-child {
margin-right: 20px;
}
.hwo-event .dashboard-content .manage-events .entry-tiles .actions .half-width:last-child .btn {
padding-left: 0px;
padding-right: 0px;
}
.hwo-form-submissions .dashboard-content .account-details .entry-tiles .posts > div > div {
width: 50%;
}
.hwo-form-submissions .dashboard-content .account-details .entry-tiles .posts > div > div:first-child {
display: none;
}
.hwo-edit-page .dashboard-content #manage-website .container {
padding: 30px;
}
.hwo-edit-page .dashboard-content #manage-website .container > div {
display: block;
padding: 30px;
width: 100%;
}
.hwo-edit-page .dashboard-content #manage-website .container > div:first-child > div {
width: 100%;
}
.hwo-edit-page .dashboard-content #manage-website .container > div:first-child > div:first-child {
margin-bottom: 16px;
}
.hwo-edit-page .dashboard-content #manage-website .container > div:first-child > div:last-child span {
width: 100%;
text-align: center;
}
.hwo-edit-page .dashboard-content #manage-website .container .page-details {
padding: 30px 0px;
}
.hwo-edit-page .dashboard-content #manage-website .container .page-details .width-600 {
width: 100%;
}
.hwo-edit-page .dashboard-content #manage-website .container .page-details .width-600 form > div {
padding: 30px;
}
.hwo-edit-page .dashboard-content #manage-website .container .page-details .width-600 form > div .actions {
display: flex;
}
.hwo-edit-page .dashboard-content #manage-website .container .page-details .width-600 form > div .actions .btn{
padding-left: 0px;
padding-right: 0px;
width: 50%;
text-align: center;
}
.hwo-edit-page .dashboard-content #manage-website .container .page-details .width-600 form > div .actions .btn:nth-last-child(1) ~ .btn {
width: 100%;
}
.hwo-edit-page .dashboard-content #manage-website .container .page-details .width-600 form > div .actions .btn:nth-last-child(2) {
width: 50%;
}
.hwo-edit-page .dashboard-content #manage-website .container .page-components > div:first-child > div:last-child .btn {
padding-left: 0px;
padding-right: 0px;
width: 100%;
text-align: center;
}
.hwo-edit-page #manage-website .container .page-components .list .components .component .container {
padding: 0px;
}
.hwo-edit-page #manage-website .container .page-components .list .components .component .container > div {
padding: 0px;
}
.hwo-edit-page #manage-website .container .page-components .list .components .component .container > div:first-child {
padding-bottom: 3px;
}
}
/* ------ END | EDIT ACCOUNT ------- */
/* ------ EDIT PAGE MODE ------ */
#page-edit-mode{
transform: translateX(-100%);
}
#page-edit-mode.open{
transform: translateX(0%);
}
#page-edit-mode .handle {
top: 50%;
transform: translate(50%,-50%);
}
#page-edit-mode .content .data-sets > div:last-child{
border: none;
}
/* ------ END | EDIT PAGE MODE ------ */
/* ------ CHANGE PASSWORD ------ */
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
/* ------ END | CHANGE PASSWORD ------ */
/* ------ MY CHILDREN ------ */
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
/* ------ END | MY CHILDREN ------ */
/* ------ EDIT BANK ACCOUNT ------- */
#edit-bank-account .card,
#edit-businesses .business {
background: #060606;
}
#edit-bank-account .card:hover,
#edit-businesses .business:hover{
background: #D23227;
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
/* ------ END | EDIT BANK ACCOUNT ------- */
/* ------ CREDIT CARD ------- */
.credit-card-mock{
width: 430px;
}
.credit-card-mock .expiration .text {
width: 30px;
}
.credit-card-mock .button {
top: 100%;
}
.credit-card-mock:hover .button {
top: 0%;
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
/* ------ END | CREDIT CARD ------- */
/* -------- PROFILE ------- */
#id-card {
border-right: solid 1px rgba(255,255,255,0.1);
}
#id-card .container {
min-height: 700px;
}
#profile .main-content {
padding-left: 400px;
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
/* -------- END | PROFILE ------- */
/* -------- APPOINTMENTS -------- */
#appointment-popup{
min-width: 450px;
}
/* -------- END | APPOINTMENTS -------- */
/* -------- TIME GRAPH -------- */
.time-graph .row .time {
width: 40px;
}
.time-graph .row:not(.unavailable):hover .time {
color: #d2322c;
}
.time-graph .row .bar {
width: calc(100% - 45px);
}
.time-graph .row:not(.unavailable):hover .bar {
opacity: 1;
background-color: #d2322c;
}
.time-graph .row .entry {
margin-left: 43px;
width: calc(100% - 45px);
}
/* -------- END | TIME GRAPH -------- */
/* -------- CARDS --------- */
.cards .card .container{
padding: 25px;
height: 130px;
transition: all 0.3s linear;
}
.cards .card:hover .container{
box-shadow: 0 0 30px 0 #ccc;
}
.cards .card .card-number {
font-size: 21px;
}
.cards .card .valid-thru > span:first-child {
width: 22px;
font-size: 7px;
line-height: 6px;
}
.cards .card .valid-thru > span:last-child {
font-size: 12px;
}
.cards .card .card-icon {
font-size: 24px;
}
.cards .card .container .add-card-icon {
width: 50px;
height: 50px;
}
.cards .card .container .add-card-icon .fa {
margin-top: 54%;
transform: translateY(-50%);
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
/* -------- END | CARDS --------- */
/* -------- BILLING -------- */
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
.hwo-billing #content .edit.billing .width-800 .transaction-history{
overflow-y: hidden;
}
.hwo-billing #content .edit.billing .width-800 .transaction-history table{
width: auto;
}
.hwo-billing #content .edit.billing .width-800 .transaction-history table th,
.hwo-billing #content .edit.billing .width-800 .transaction-history table td {
padding: 15px 20px;
width: auto;
white-space: nowrap;
}
}
/* -------- END | BILLING -------- */
/* -------- CUSTOMERS -------- */
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
.hwo-customers #content .manage-customers .entry-tiles{
padding: 50px 30px;
}
.hwo-customers #content .manage-customers .entry-tiles .customers-list {
overflow-y: hidden;
width: 100%;
}
.hwo-customers #content .manage-customers .entry-tiles .customers-list .heading,
.hwo-customers #content .manage-customers .entry-tiles .customers-list .item{
width: 300%;
}
.hwo-customers #content .manage-customers .entry-tiles .customers-list .heading > div,
.hwo-customers #content .manage-customers .entry-tiles .customers-list .item > div > div {
width: 25%;
}
}
/* -------- CUSTOMERS -------- */
/* -------- CUSTOMER -------- */
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
.hwo-customer #content .manage-customer .entry-tiles {
padding: 50px 30px;
}
.hwo-customer #content .manage-customer .entry-tiles .data > div {
width: 100%;
box-sizing: border-box;
}
.hwo-customer #content .manage-customer .entry-tiles .data .general .df > div:first-child {
width: 70%;
}
.hwo-customer #content .manage-customer .entry-tiles .data .general .df > div:last-child {
text-align: right;
}
.hwo-customer #content .manage-customer .entry-tiles .data .transactions-info .transactions-list {
overflow-y: hidden;
}
.hwo-customer #content .manage-customer .entry-tiles .data .transactions-info .transactions-list > div {
width: 350%;
}
.hwo-customer #content .manage-customer .entry-tiles .data .transactions-info .transactions-list .heading > div,
.hwo-customer #content .manage-customer .entry-tiles .data .transactions-info .transactions-list .item .df > div {
width: 25%;
}
}
/* -------- END | CUSTOMER -------- */
/* --------- TRANSACTIONS -------- */
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
.manage-transactions .entry-tiles {
padding: 50px 30px;
}
.manage-transactions .entry-tiles .stats{
display: flex;
}
.manage-transactions .entry-tiles .stats > div {
margin: 0px;
padding: 20px;
width: 50%;
}
.manage-transactions .entry-tiles .stats > div:first-child{
margin-right: 20px;
}
.manage-transactions .entry-tiles .stats > div .font-small{
font-size: 12px;
}
.manage-transactions .entry-tiles .stats > div .font-large{
font-size: 24px;
}
.manage-transactions .entry-tiles .download-transactions {
margin-top: 30px;
padding: 20px;
}
.manage-transactions .entry-tiles .search,.manage-transactions .entry-tiles .transactions-list {
margin-top: 30px;
}
.manage-transactions .entry-tiles .search input {
padding: 12px 0;
}
.manage-transactions .entry-tiles .search .abs {
margin-right: 20px;
}
.manage-transactions .entry-tiles .transactions-list{
overflow-y: hidden;
}
.manage-transactions .entry-tiles .transactions-list > div{
width: 350%;
}
.manage-transactions .entry-tiles .transactions-list .heading > div,
.manage-transactions .entry-tiles .transactions-list .item > div > div{
width: 25%;
}
}
/* --------- END | TRANSACTIONS -------- */
/* --------- TRANSACTION -------- */
.hwo-transaction .manage-transactions .transaction .generate-label form [data-couriers] .courier {
box-shadow: 0 0 0 0px rgba(159,78,247,0.5);
}
.hwo-transaction .manage-transactions .transaction .generate-label form [data-couriers] .courier.selected {
box-shadow: 0 0 0 5px rgba(159,78,247,0.5);
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
.hwo-transaction .manage-transactions .entry-tiles .heading{
display: block;
}
.hwo-transaction .manage-transactions .entry-tiles .heading > div {
margin: 10px 0;
width: 100%;
}
.hwo-transaction .manage-transactions .entry-tiles .heading > div > div {
margin: 0px;
width: 100%;
font-size: 16px;
text-align: left;
}
.hwo-transaction .manage-transactions .entry-tiles .heading > div .font-large {
margin-bottom: 5px;
font-size: 24px;
font-weight: 500;
}
.hwo-transaction .manage-transactions .entry-tiles .heading > div:last-child{
display: grid;
}
.hwo-transaction .manage-transactions .entry-tiles .heading > div:last-child > div:first-child {
order: 2;
font-size: 16px;
font-weight: 400;
}
.hwo-transaction .manage-transactions .entry-tiles .heading > div:last-child > div:last-child {
order: 1;
font-size: 24px;
font-weight: 500;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction .info,
.hwo-transaction .manage-transactions .entry-tiles .transaction .customer,
.hwo-transaction .manage-transactions .entry-tiles .transaction .shipping-selection {
padding-right: 0px;
width: 100%;
font-size: 14px;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction .info > div,
.hwo-transaction .manage-transactions .entry-tiles .transaction .customer > div,
.hwo-transaction .manage-transactions .entry-tiles .transaction .shipping-selection > div,
.hwo-transaction .manage-transactions .entry-tiles .transaction .application-fees > div,
.hwo-transaction .manage-transactions .entry-tiles .transaction .refund {
padding: 20px;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction .info > div > div > div:last-child,
.hwo-transaction .manage-transactions .entry-tiles .transaction .customer > div > div > div > div:last-child,
.hwo-transaction .manage-transactions .entry-tiles .transaction .shipping-selection .details .item > div:last-child {
text-align: right;
white-space: nowrap;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction .info > div > div > div:first-child {
width: 15%;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction .info > div > div > div:last-child {
width: 85%;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction > div:nth-child(2) {
display: block;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction > div:nth-child(2) .info {
margin-top: 30px;
padding: 0px;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction > div:nth-child(2) .info > div > div {
width: 100%;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction > div:nth-child(2) .info > div > div > div {
width: 100%;
text-align: left;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction .fulfillment {
margin-top: 30px;
padding: 0px;
width: 100%;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction .fulfillment > div {
padding: 20px;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction .payment-method {
display: block;
padding: 20px;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction .payment-method > div {
padding: 8px 0;
width: 100%;
font-size: 14px;
border-bottom: solid 1px #ccc;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction .payment-method > div > div > div {
width: 50%;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction .payment-method > div > div > div:last-child {
text-align: right;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction .payment-method > div:last-child {
border: none;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction .refund > div {
display: block;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction .refund > div > div{
width: 100%;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction .refund > div > div:first-child > div {
margin-top: 0px;
transform: none;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction .refund > div > div:last-child > div{
margin: 20px 0 0 0;
padding-left: 0px;
padding-right: 0px;
width: 100%;
text-align: center;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction .products{
overflow-y: hidden;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction .products .list,
.hwo-transaction .manage-transactions .entry-tiles .transaction .products .total{
width: 250%;
}
.hwo-transaction .manage-transactions .entry-tiles .transaction .products .list .product,
.hwo-transaction .manage-transactions .entry-tiles .transaction .products .total {
padding: 20px;
font-size: 14px;
}
}
/* --------- END | TRANSACTION -------- */
/* -------- FEATURES -------- */
.manage-features .features-list .item:last-child {
border: none;
}
/* -------- END | FEATURES ------- */
/* -------- PLATFORM VERSIONS --------- */
.manage-versions .entry-tiles .versions-list .item:last-child {
border-bottom: none;
}
/* -------- END | PLATFORM VERSIONS --------- */
/* -------- COOKIE NOTICE -------- */
#cookie-notice > div:first-child {
width: calc(100% - 300px);
}
#cookie-notice > div:last-child {
width: 300px;
}
/* -------- END | COOKIE NOTICE -------- */
/* ----- ENTRY TILES ----- */
.entry-tiles .tile {
width: 350px;
height: 200px;
}
.entry-tiles .search-input {
padding: 15px 40px !important;
width: 665px !important;
border-color: #eee;
}
/* ----- END | ENTRY TILES ----- */
/* ----- PRODUCTS ----- */
/* ----- MANAGE PRODUCTS ----- */
#manage-product .images .fields [data-image] [data-close] {
margin: -15px -15px 0 0;
}
#manage-product .images .fields [data-image]:hover [data-close] {
display: block;
}
#manage-product .product-details .variants .fields .options-container .titles,
#manage-product .product-details .variants .fields .options-container .options-list .option .inputs {
width: calc(100% - 50px);
}
#manage-product .product-details .variants .fields .options-container .options-list .option .inputs [name=option] {
line-height: 24px;
}
#manage-product .product-details .variants .fields .options-container .options-list .option .inputs [data-option-values] {
padding: 12px 16px 7px 16px;
font-size: 11px;
line-height: 24px;
}
#manage-product .product-details .variants .fields .options-container .options-list .option .inputs [data-option-values] input {
line-height: 24px;
}
#manage-product [data-form] [data-details] [data-variants] .fields .variants-container [data-variants-list] [data-variant]:last-child {
padding-bottom: 0px;
border-bottom: none;
}
#manage-product [data-form] [data-details] [data-variants] .fields .variants-container .titles .name,
#manage-product [data-form] [data-details] [data-variants] .fields .variants-container [data-variants-list] [data-variant] .name {
width: 200px;
}
#manage-product [data-form] [data-details] [data-variants] .fields .variants-container .titles .available,
#manage-product [data-form] [data-details] [data-variants] .fields .variants-container [data-variants-list] [data-variant] .available {
width: 70px;
}
#manage-product [data-form] [data-details] [data-variants] .fields .variants-container .titles > div:not(.name):not(.available),
#manage-product [data-form] [data-details] [data-variants] .fields .variants-container [data-variants-list] [data-variant] > div:not(.name):not(.available) {
width: calc((100% - 250px) * 0.25);
}
#manage-product [data-form] [data-details] [data-variants] .fields .variants-container .titles > div:not(.name):not(.available) input,
#manage-product [data-form] [data-details] [data-variants] .fields .variants-container [data-variants-list] [data-variant] > div:not(.name):not(.available) input {
line-height: 24px;
}
/* ----- END | MANAGE PRODUCTS ----- */
/* ----- PRODUCT COLLECTIONS ----- */
.product-collections div {
cursor: move;
}
.product-collections .info {
/*height: 20px;
width: 180px;*/
}
.product-collections .highlighter {
display: inline-block;
background: #fdfdfd;
margin: 0 0 14px 0;
padding: 0;
width: 200px;
height: 40px;
text-align: center;
border-radius: 5px;
cursor: move;
}
.product-collections ul {
list-style-type: none;
}
.product-collections li {
position: relative;
/*z-index: 6;*/
}
.product-collections ul li {
display: block;
}
.product-collections li ul {
float: none;
margin: 0;
}
.product-collections ul li ul li {
float: none;
margin: 0;
padding: 0px;
}
.product-collections li ul.ui-sortable {
min-height: 60px;
/*border: 1px solid #f00;*/
position: relative;
/*z-index: 5;*/
margin-top: 10px;
margin-left: 40px;
padding: 10px 0 0 0;
}
.product-collections .ui-sortable-helper {
padding: 0;
margin: 0 0 10px 0;
}
.product-collections ul.no-child {
margin-bottom: -73px;
}
/* ----- END | PRODUCT COLLECTIONS ----- */
/* ----- END | PRODUCTS ----- */
/* ----- SHIPPING ----- */
/* ----- SHIPPING - ZONE COUNTRIES ----- */
#save-shipping-zone-countries-form .form-area .search input {
border: none !important;
}
#save-shipping-zone-countries-form .form-area .countries .country label {
padding-left: 140px;
line-height: 80px;
}
#save-shipping-zone-countries-form .form-area {
height: calc(100vh - 163px);
}
/* ----- END | SHIPPING - ZONE COUNTRIES ----- */
/* ----- END | SHIPPING ----- */
/* ----- MANAGE DYNAMIC FORMS ----- */
#manage-dynamic-forms-form form .fieldsets .fieldset input {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
border: none;
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
@-moz-document url-prefix(){
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
}
/* ----- END | MANAGE DYNAMIC FORMS ----- */
/* ----- SUPPORT ----- */
/* ----- SUPPORT - REQUEST ----- */
.dashboard-support-request .request {
line-height: 40px;
}
.dashboard-support-request .responses .response:last-child {
z-index: 0;
}
.dashboard-support-request .responses .response:not(:last-child) .profile-picture::before {
content: "";
position: absolute;
background: #eee;
width: 1px;
height: calc(100% - 70px);
left: 75px;
top: 110px;
}
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){
.dashboard-support-request .container {
width: 100%;
}
}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
@-moz-document url-prefix(){
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
}
/* ----- END | SUPPORT - REQUEST ----- */
/* ----- SUPPORT ----- */
@media(max-width: 1550px){}
@media(max-width: 1270px){}
@media (max-width: 1200px){}
@media (max-width: 1072px){}
@media (max-width: 838px){}
@media (max-width: 520px){}
/* ALL MOBILE */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
@-moz-document url-prefix(){
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
}
}