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

#appModalServicesComponentItemNew .item-input-invalid input{

    text-transform: capitalize;
     border-bottom: 2px solid red;
}

   .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;
   }

   .inline-error-is-warn.item-input+.inline-error-message {
    border-top: 2px solid #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 !important;
       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%;
   }

   #EventEditModal .list-group-title {
       background-color: #ffffff;
       line-height: initial;
       color: #303030;
   }


   #calendarEl.minutes-15 .fc-time-grid .fc-slats td {
    height: 2em;
    border-bottom: 0;
    /* each cell is responsible for its top border */
    }

    /*Give some space to the clear btn*/
  #form_items_holder .item-input-wrap input.input-with-value:not(:only-child) {
      padding-right: 24px;
  }



  #form_items_holder.hide_price .related-col-price{
    display:none;
}

    @media (max-width: 330px) {


    .md .list .item-inner  {

        padding-right: 8px !important;
    }

    .md .list .item-content:not(.no-padding-left) {

        padding-left: 8px !important;
    }
    }

    /* Fix italic padding to prevent cut with max width 100%*/
    .list .item-title i{
        padding-right: 4px;
    }