/* latin */
        

   .text-color-dark{
    color:#333 !important;
}


@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../fonts/opensans.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.md body {
    /* Disables pull-to-refresh and overscroll glow effect.
Still keeps swipe navigations. */
    overscroll-behavior-y: none;
    font-family: 'Open Sans';
}

.md .navbar a.link.link-small-padding {
    padding: 0 12px;
    padding-top: 0px;
    padding-right: 12px;
    padding-bottom: 0px;
    padding-left: 12px;
}

.splash {
    background-color: #2d2e2d;
    height: 100%;
}

.device-desktop .fab a:hover {
    transform: scale(1.2);
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}

.device-desktop .fab a:hover {
    cursor: pointer;
    background-color: white;
    color: #666;
    fill: #666;
}

html.device-desktop .not-desktop {
    display: none;
}

html:not(.device-desktop) .near-invisible-mobile {
    opacity: 0.01;
}

#splash_container {
    margin: 40vh auto auto auto;
    position: absolute;
    left: 0;
    right: 0;
    width: 80%;
    text-align: center;
    opacity: 0;
    /* make things invisible upon start */
    -webkit-animation: fadeIn 0ms 139.333ms 1;
    /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation: fadeIn 0ms 139.333ms 1;
    animation: fadeIn 0ms 139.333ms 1;
    -webkit-animation-fill-mode: forwards;
    /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}

#splash_container img {
    width: 70%;
    margin-left: 11%;
}

.mdl-button .material-icons {
    vertical-align: middle;
}

.text-overflow {
    text-overflow: ellipsis;
    white-space: nowrap;
}


.secure_text{
-webkit-text-security:disc;
}

.inline-error-is-warn.item-input.item-input-invalid .item-input-wrap::after{
background-color: #ff9800!important;
}


.inline-error-is-warn.item-input.item-input-invalid .item-floating-label,
.inline-error-is-warn.item-input.item-input-invalid .item-label,
.inline-error-is-warn.item-input +.inline-error-message{
color: #ff9800!important;
}

@media only hand and (min-device-width: 220px) and (max-device-width: 350px) {
    /* Styles */
    .row.no-gap .col-100 {
        width: 50% !important;
    }
    .row.no-gap .col-95 {
        width: 47.5% !important;
    }
    .row.no-gap .col-90 {
        width: 40% !important;
    }
    .row.no-gap .col-85 {
        width: 42.5%!important;
    }
    .row.no-gap .col-80 {
        width: 70% !important;
    }
    .row.no-gap .col-75 {
        width: 70.5% !important;
    }
    .row.no-gap .col-70 {
        width: 60% !important;
    }
    .row.no-gap .col-65 {
        width: 60.5% !important;
    }
    .row.no-gap .col-60 {
        width: 50% !important;
    }
    .row.no-gap .col-55 {
        width: 50.5% !important;
    }
    .row.no-gap .col-50 {
        width: 40% !important;
    }
    .row.no-gap .col-45 {
        width: 40.5% !important;
    }
    .row.no-gap .col-40 {
        width: 30%!important;
    }
    .row.no-gap .col-35 {
        width: 30.5% !important;
    }
    .row.no-gap .col-30 {
        width: 20% !important;
    }
    .row.no-gap .col-25 {
        width: 20.5% !important;
    }
    .row.no-gap .col-20 {
        width: 10% !important;
    }
    .row.no-gap .col-15 {
        width: 10.5% !important;
    }
    .row.no-gap .col-10 {
        width: 4% !important;
    }
    .row.no-gap .col-5 {
        width: 4.5% !important;
    }
}

.appModalClientComponentClientEmail,
.appModalClientComponentClientPhone,
.appModalServicesComponentLabel,
.appModalServicesComponentDuration,
.appModalServicesComponentPrice {
    font-size: 14px !important;
}

.appModalServicesComponentSearchList li .item-title::first-letter {
    text-transform: uppercase;
}

.md .row .col-18 {
    width: 18%;
}

.md .row .col-22 {
    width: 22%;
}

.md .navbar .searchbar-expandable {
    border-radius: 0px !important;
    margin-top: -28px;
    margin-left: -56px;
}

.md .list input[disabled],
.md .list select[disabled],
.md .list textarea[disabled] {
    color: #9e9e9e !important;
    -webkit-text-fill-color: #9e9e9e !important;
    opacity: 1;
    /*Fix ios issue dim text*/
}

.simplerTopShadow {
    box-shadow: 0px 0px 20px -10px black;
    -webkit-box-shadow: 0px 0px 20px -10px black;
}

#apptModalStatus button.button-active:disabled {
    background-color: gray;
}

.smallerText {
    font-size: 14px;
}

.form_icon_color {
    color: #909090;
}

.inline-error-message {
    color: #f44336;
    font-size: 0.7em;
    border-top: 2px solid red;
    margin-top: -10px;
    opacity: 0;
    /* make things invisible upon start */
    -webkit-animation: fadeIn 0ms 139.333ms 1;
    /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation: fadeIn 0ms 139.333ms 1;
    animation: fadeIn 0ms 139.333ms 1;
    -webkit-animation-fill-mode: forwards;
    /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}
/* make keyframes that tell the start state and the end state of our object */

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* Allow disabled btn to recieve a click listener on parent?*/
#apptModalStatus button:disabled{
    pointer-events: none;
}

.sticky-footer {
    z-index: 1;
    position: fixed !important;
    width: 100%;
    bottom: 0;
}
/*Modify the Toolbar to allow a segment button control, and overwrite segmented buttons*/

.md .segmented.toolbar .button {
    border-radius: 0 !important;
    height: 100%;
}

.md .segmented button.button.disabled {
    color: grey !important;
    border-color: grey !important;
}

.md .segmented.toolbar {
    border-radius: 0 !important;
    background-color: white;
    position: fixed;
}
/* END OF TOOLBAR MODIFY*/

.popover-inner .list {
    max-height: 85vh; /*IOS max because nav bar is not included in this calc*/
    overflow: auto;
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
}

.material-shadow {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
}


.intl-tel-input .country-list {
    background-color: white;
    overflow-x: hidden;
    z-index: 100 !important;
    padding-left: initial !important;
    overflow-x: hidden;
}

.intl-tel-input input.iti-invalid-key {
    background-color: none;
}

.intl-tel-input .country-list .divider {
    width: 100%;
}

.iti-mobile .intl-tel-input .country-list {
    max-height: 100vh;
    width: 100%;
    border: 0px;
    margin: 0px;
    padding: 0px;
}

.item-input:not(.item-input-with-value):not(.item-input-focused) .flag-container {
    display: none;
}

.iti-mobile .intl-tel-input .country-list .divider {
    padding-bottom: 0px;
}

body.iti-mobile .intl-tel-input.iti-container {
    top: 0px !important;
    left: 0px !important;
    z-index: 10000;
    width: 100vw;
    border: 0px;
    padding: 0px;
    margin: 0px;
}

.iti-mobile .intl-tel-input .country-list .country {
    padding: 1em 10px !important;
}

.phone-only {
    display: none;
}
/* iphone 6 */

@media only screen and (min-device-width: 275px) and (max-device-width: 768px) {
    .phone-only {
        display: block;
    }
}

.not-on-small-screen {
    display: none !important;
}
/* iphone 6 */

@media only screen and (min-device-width: 450px) {
    .not-on-small-screen {
        display: block !important;
    }
}

html.device-ios .android-only {
    display: none;
}

html.device-android .ios-only {
    display: none;
}
/* Allow to hide on non android */

html.device-android .not-android {
    display: none;
}

input.has-input-clear-button,textarea.has-input-clear-button{
    padding-right:28px !important;
}

.offlineNotificationElement .notification-text{
    color: #fff !important;
}


.offlineNotificationElement{
color: #fff !important;
background-color: #ea4335 !important;
}

.offlineNotificationElement .notification-close-button{
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23ffffff%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4%2010.6%2012%205%2017.6%206.4%2019%2012%2013.4%2017.6%2019%2019%2017.6%2013.4%2012z%22%2F%3E%3C%2Fsvg%3E") !important;
}



/*=== FADE IN DOWN ===*/
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

#agent_color_picker div{
width: 34px;
height: 34px;
border-radius: 62px;
margin:10px;
float:left;
border:2px solid rgba(128, 128, 128, 0);
}

#agent_color_picker div.selected:after{
font-family: 'Material Icons';
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
content: 'check';
text-align: center;
font-size: 24px;
display: block;
webkit-filter: grayscale(100%); 
filter: invert(1) grayscale(1) contrast(150);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-color: inherit;
font-weight: bold;
}


#agent_color_picker div[data-color='#d4b1e1']{
background-color:#d4b1e1;
}

#agent_color_picker div[data-color='#ffb9d4']{
background-color:#ffb9d4;
}

#agent_color_picker div[data-color='#f9d570']{
background-color:#f9d570;
}
#agent_color_picker div[data-color='#ff6']{
background-color:#ff6;
}

#agent_color_picker div[data-color='#bff970']{
background-color:#bff970;
}

#agent_color_picker div[data-color='#70f073']{
background-color:#70f073;
}

#agent_color_picker div[data-color='#71ffcd']{
background-color:#71ffcd;
}

#agent_color_picker div[data-color='#5ed1ff']{
background-color:#5ed1ff;
}

#agent_color_picker div[data-color='#7471ff']{
background-color:#7471ff;
}

#agent_color_picker div[data-color='#713587']{
background-color:#713587;
}

#agent_color_picker div[data-color='#fc6cff']{
background-color:#fc6cff;
}

#agent_color_picker div[data-color='#e2128e']{
background-color:#e2128e;
}

#agent_color_picker div[data-color='#bfbfbf']{
background-color:#bfbfbf;
}

#agent_color_picker div[data-color='#ff4b4b']{
background-color:#ff4b4b;
}

#agent_color_picker div[data-color='black']{
background-color:black;
}


#signup_tour_1 ul{
text-align: initial;

}

#left-panel-content .list.media-list::-webkit-scrollbar { 
        display: none; 
} 



input.input-hide-spinners[type=number]::-webkit-inner-spin-button,
input.input-hide-spinners[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

input.input-hide-spinners[type=number] {
-moz-appearance:textfield;
}

/*
FIX ANIMATIONS and optimizations
*/


#EventEditModal .navbar .searchbar-expandable.searchbar-enabled {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
margin-left: 0px;
margin-top: 0px;
top: 0px;
width: 100%;


}

#EventEditModal .navbar .searchbar-expandable {
-webkit-transform: translate3d(100%0,0,0);
transform: translate3d(100%,0,0);
left: 0;
margin-left: 0px;
margin-top: 0px;
top: 0px;
width: 100%;
}