/* ----- HTML & BODY ----- */
html,
body{
	position: relative;
	margin: 0px;
	padding: 0px;
	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{
        font-size: 32px;
    }
}
@-moz-document url-prefix(){
    @media only screen and (min-device-width: 320px) and (max-device-width: 736px){

        font-size: 16px;
        
    }
}
/* ----- HTML & BODY ----- */

*{
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


/* ----- MOBILE DETECTION ----- */
.is_mobile{ display: none; }
.is_desktop{ display: block; }
@media only screen and (min-device-width: 320px) and (max-device-width: 736px){
    .is_mobile{ display: block; }
    .is_desktop{ display: none; }
}
@-moz-document url-prefix(){
    @media only screen and (min-device-width: 320px) and (max-device-width: 736px){
        .is_mobile{ display: block; }
        .is_desktop{ display: none; }
    }
}
/* ----- 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: 600 !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);
}

@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){

    form.trans-bottom-border {
        width: 100%;
    }
    form.trans-bottom-border > div:not(:last-child) {
        margin-bottom: 40px;
    }
    form.trans-bottom-border label {
        width: 300px;
    }
    form.trans-bottom-border .prefix {
        width: 30px;
    }
    form.trans-bottom-border input,
    form.trans-bottom-border select,
    form.trans-bottom-border textarea {
        width: calc(100% - 310px);
    }
    form.trans-bottom-border input.has-prefix,
    form.trans-bottom-border select.has-prefix,
    form.trans-bottom-border textarea.has-prefix {
        width: calc(100% - 350px);
    }
    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% - 310px);
    }

}
/* ----- END | FORM ----- */



/* ----- POPUP ----- */
#popup > .close,
#popup > .close div{
	background: rgba(0,0,0,0.45);
	left: 50%;
	top: 50%;
	transform: translate(-50%,-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 | 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){

    .fill-screen{
        border-radius: 10px;
    }

}
/* ----- 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){

    .close-x{
        width: 32px;
        height: 32px;
    }

}
/* ----- 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){
    #main .logo .logo-icon{
        width: 184px;
        height: 200px;
    }
    #main .content .buttons .btn{
        padding-top: 30px;
        padding-bottom: 30px;
        width: 240px;
    }
}
/* ----- 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){

    #sign-up form,
    #login form {
        min-width: 600px;
        width: 50%;
    }

}
/* ----- 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){

    #app-map{
        min-height: 1100px;
        height: calc(100% - 400px);
    }
    #app-map .top .search-app-map{
        width: calc(100% - 100px);   
    }
    #app-map .top .search-app-map input {
        height: 100px;
    }
    #app-map .top .search-app-map div {
        width: 100px;
        height: 100px;
    }
    #app-map .top > .abs {
        padding: 250px 100px 0 0;
        width: calc(100% - 200px);
    }
    #app-map .top > .abs .btn {
        width: 100%;
    }
    #app-map .bottom .timeline-title .arrow {
        width: 88px;
    }

}
/* ----- 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){

    #timeline .content {
        top: -68px;
    }

}
/* ----- 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){

    .write-post-block {
        width: 100%;
        padding: 48px 80px;
    }
    .avatar-small.standard{
        margin-left: -50px;
    }

}
/* ----- 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){

    .status{
        width: 100%;
    }
    .status .id {
        height: 120px;
    }
    .status .text {
        font-size: 48px;
    }

}
/* ----- 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;
}

@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){

    #edit-account .items > div {
        vertical-align: top;
        width: calc(50% - 80px);
        height: 360px;
    }
    #edit-account .items > div:nth-child(2n + 2) {
        margin-left: 35px;
    }
    #edit-account .items > div .font-normal {
        font-size: 30px;
        color: white;
    }
    #edit-account .items > div:hover .font-normal {
        color: #888;
    }

    .edit > div:first-child .valign-content {
        vertical-align: top;
    }
    [id*=edit-] > .rel > h1 {
        font-size: 45px;
        font-weight: 500;
        line-height: 90px;
    }

    .edit .address-list .address {
        margin: 0px;
        width: 100%;
        height: auto;
    }
    .edit .address-list .address:not(:first-child):not(:last-child){
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .edit .address-list .address:first-child{
        padding-bottom: 20px;
    }
    .edit .address-list .address:last-child{
        padding-top: 20px;
    }

    .edit.company-profile form > *:not(.btn) {
        padding: 0px;
        width: 100%;
    }
    .edit.company-profile form > *:not(.btn):first-child .half-width,
    .edit.company-profile form > *:not(.btn):nth-child(3) .half-width {
        margin: 20px 0;
        padding: 0px;
        width: 100%;
    }

}
/* ------ 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){
    #edit-account-change-password .width-600 {
        padding: 70px;
    }
}
/* ------ END | CHANGE PASSWORD ------ */


/* ------ 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){

    #edit-bank-account .card,
    #edit-businesses .business{
        background: #222;
        padding: 40px;
    }

}
/* ------ 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){

    .credit-card-mock{
        width: calc(100% - 200px);
    }
    .credit-card-mock .expiration .text {
        width: 60px;
    }

}
/* ------ 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){

    #id-card {
        display: block;
        position: relative;
        padding-bottom: 100px;
        width: 100%;
        min-height: initial;
        height: auto;
        border-right: none;
        overflow: auto;
    }
    #id-card .container {
        min-height: initial;
        height: auto;
    }
    #id-card .container .stats {
        position: relative;
    }
    #profile .main-content {
        display: block;
        position: relative;
        padding-left: 0px;
        width: 100%;
    }
    #profile .main-content .container > div{
        padding-left: 100px;
        padding-right: 100px;
    }
    #profile .main-content .container .info > div {
        margin: 0 0 40px 0;
        padding: 0 0 40px 0;
        width: 100%;
        border-bottom: solid 2px #808080;
    }
    #profile .main-content .container .info > div:last-child {
        margin: 0px;
        padding: 0px;
        border: none;
    }
    #profile .main-content .container .reviews {
        padding: 40px 0 0 0;
    }

}
/* -------- 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){
    .cards .card .container{
        padding: 90px;
        height: auto;
    }

    .cards .card:hover .container{
        box-shadow: 0 0 60px 0 #ccc;
    }
    .cards .card .card-number {
        font-size: 48px;
    }
    .cards .card .valid-thru > span:first-child {
        width: 44px;
        font-size: 14px;
        line-height: 12px;
    }
    .cards .card .valid-thru > span:last-child {
        font-size: 24px;
    }
    .cards .card .card-icon {
        font-size: 48px;
    }
    .cards .card .container .add-card-icon {
        width: 150px;
        height: 150px;
    }
    .cards .card .container .add-card-icon .fa {
        margin-top: 54%;
        transform: translateY(-50%);
    }
}
/* -------- END | CARDS --------- */


/* -------- 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 ----- */