//******************************************
//   Fonts
//******************************************

@font-face {
    font-family: 'Open Sans';  
    src: url('../../../fonts/OpenSans-Regular-webfont.eot');
    src: url('../../../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../../../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Open Sans Bold';
    src: url('../../../fonts/OpenSans-Semibold-webfont.eot');
    src: url('../../../fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../../fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('../../../fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('../../../fonts/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

// Font Icons
/*@font-face {
  font-family: 'ezcard';
  src: url('../../../fonts/ezcard.eot?28003520');
  src: url('../../../fonts/ezcard.eot?28003520#iefix') format('embedded-opentype'),
       url('../../../fonts/ezcard.woff?28003520') format('woff'),
       url('../../../fonts/ezcard.ttf?28003520') format('truetype'),
       url('../../../fonts/ezcard.svg?28003520#ezcard') format('svg');
  font-weight: normal;
  font-style: normal;
}*/
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'ezcard';
    src: url('../font/ezcard.svg?28003520#ezcard') format('svg');
  }
}
*/

@font-family-sans-serif:  "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base: 16px;

//******************************************
//   Helper variables
//******************************************
@white: #fff;
@black: #0F1117;
@border-width: 1px;
@border-radius: 4px;
@btn-border-width: 0;
@btn-border-color: transparent;
@btn-border-radius: @border-radius;
@alert-border-radius: 3px;
@alert-danger-color: @white;

// Layout Variables
@padding: 1em;
@margin: 1em;

@bar-width: .9em;
@bar-height: .2em;


// Media Query Mixin Variables
@grandad-bear: ~"all and (min-width: 72em)";
@papa-bear: ~"all and (min-width: 68em)";
@mama-bear: ~"all and (min-width: 63em)";
@teen-bear: ~"all and (min-width: 48em)";
@kid-bear: ~"all and (min-width: 40em)";
@baby-bear: ~"all and (min-width: 30em)";


// Navigation Bar Breakpoint
@nav-breakpoint: @mama-bear;


// These may be overriding the Bootstrap values.
@badge-border-radius: 50%;
@table-background-color: @white;


//******************************************
//   Mixins
//******************************************

.transition(@items) {
    -webkit-transition: @items 0.2s ease-in-out;  
    -moz-transition: @items 0.2s ease-in-out;
    -ms-transition: @items 0.2s ease-in-out;
    -o-transition: @items 0.2s ease-in-out;
    transition: @items 0.2s ease-in-out;
}

.border-left-radius(@radius) {
    border-radius: 0 0 @radius @radius;
}

.border-right-radius(@radius) {
    border-radius: @radius @radius 0 0;
}

.background-opacity(@color, @opacity) {
    @rgba-color: rgba(red(@color), green(@color), blue(@color), @opacity);
    background-color: @rgba-color;
    // IE9 and down
    background: none\9;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color),argb(@rgba-color))); // IE9 and down
}

//******************************************
//   Responsive Breakpoint Helpers
//******************************************


.sm-and-up {
    display: none;
    @media @baby-bear {
        display: inherit;
    }
}

.md-and-up {
    display: none;
    @media @teen-bear {
        display: inherit;
    }
}

.lg-only {
    display: none;
    @media @mama-bear {
        display: inherit;
    }
}

.lg-only-inline-block {
    display: none;
    @media @mama-bear {
        display: inline-block;
    }
}

.md-only {
    display: none;
    @media @teen-bear {
        display: inherit;
    }
    @media @mama-bear {
        display: none;
    }
}

.sm-only {
    display: none;
    @media @baby-bear {
        display: inherit;
    }
    @media @teen-bear {
        display: none;
    }
}

.xs-only {
    display: inherit;
    @media @baby-bear {
        display: none;
    }
}

.md-and-down {
    display: inherit;
    @media @mama-bear {
        display: none;
    }
}

.sm-and-down {
    display: inherit;
    @media @teen-bear {
        display: none !important;
    }
}

.sm-and-md {
    display: none;
    @media @teen-bear {
        display: inherit;
    }
    @media @mama-bear {
        display: inherit;
    }
}


//******************************************
//   Font Icons
//******************************************

@font-face {
  font-family: 'ezcard';
  src: url('../../../fonts/ezcard.eot?96729289');
  src: url('../../../fonts/ezcard.eot?96729289#iefix') format('embedded-opentype'),
       url('../../../fonts/ezcard.woff?96729289') format('woff'),
       url('../../../fonts/ezcard.ttf?96729289') format('truetype'),
       url('../../../fonts/ezcard.svg?96729289#ezcard') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'ezcard';
    src: url('../font/ezcard.svg?96729289#ezcard') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "ezcard";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
     
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-link-ext-alt:before { content: '\e800'; } /* '' */
.icon-arrows-cw:before { content: '\e802'; } /* '' */
.icon-tag:before { content: '\e803'; } /* '' */
.icon-search-1:before { content: '\e804'; } /* '' */
.icon-menu:before { content: '\e805'; } /* '' */
.icon-credit-card-1:before { content: '\e806'; } /* '' */
.icon-info-circled:before { content: '\e807'; } /* '' */
.icon-lock:before { content: '\e809'; } /* '' */
.icon-lock-open:before { content: '\e80a'; } /* '' */
.icon-reply:before { content: '\e80c'; } /* '' */
.icon-chat:before { content: '\e80d'; } /* '' */
.icon-attention:before { content: '\e80e'; } /* '' */
.icon-trash:before { content: '\e80f'; } /* '' */
.icon-archive:before { content: '\e810'; } /* '' */
.icon-doc:before { content: '\e811'; } /* '' */
.icon-down-open:before { content: '\e812'; } /* '' */
.icon-left-open:before { content: '\e813'; } /* '' */
.icon-up-open:before { content: '\e814'; } /* '' */
.icon-right-open:before { content: '\e815'; } /* '' */
.icon-block:before { content: '\e816'; } /* '' */
.icon-switch:before { content: '\e817'; } /* '' */
.icon-mobile:before { content: '\e818'; } /* '' */
.icon-mail:before { content: '\e819'; } /* '' */
.icon-cancel-circled:before { content: '\e81b'; } /* '' */
.icon-plus-circled:before { content: '\e81d'; } /* '' */
.icon-chart-pie:before { content: '\e820'; } /* '' */
.icon-chart-bar:before { content: '\e821'; } /* '' */
.icon-phone:before { content: '\e822'; } /* '' */
.icon-help:before { content: '\e823'; } /* '' */
.icon-help-circled:before { content: '\e824'; } /* '' */
.icon-eye-off:before { content: '\e826'; } /* '' */
.icon-up:before { content: '\e82b'; } /* '' */
.icon-down:before { content: '\e82c'; } /* '' */
.icon-left-1:before { content: '\e82d'; } /* '' */

/*[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "ezcard";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
}*/

/*.icon-link-ext-alt:before { content: '\e800'; }
.icon-filter:before { content: '\e801'; }
.icon-menu:before { content: '\e805'; }
.icon-check:before { content: '\e806'; }
.icon-cancel:before { content: '\e81a'; }
.icon-cancel-circled:before { content: '\e81b'; }
.icon-plus:before { content: '\e81c'; }
.icon-plus-circled:before { content: '\e81d'; }
.icon-minus:before { content: '\e81e'; }
.icon-minus-circled:before { content: '\e81f'; }
.icon-help:before { content: '\e823'; }
.icon-help-circled:before { content: '\e824'; }
.icon-info-circled:before { content: '\e807'; }
.icon-attach:before { content: '\e808'; }
.icon-lock:before { content: '\e809'; }
.icon-lock-open:before { content: '\e80a'; }
.icon-tag:before { content: '\e80b'; }
.icon-reply:before { content: '\e80c'; }
.icon-sort-alt-up:before { content: '\e803'; }
.icon-attention:before { content: '\e80e'; }
.icon-trash:before { content: '\e80f'; }
.icon-archive:before { content: '\e810'; }
.icon-phone:before { content: '\e822'; }
.icon-down-open:before { content: '\e812'; }
.icon-left-open:before { content: '\e813'; }
.icon-right-open:before { content: '\e815'; } 
.icon-up-open:before { content: '\e814'; }
.icon-up-bold:before { content: '\e816'; }
.icon-switch:before { content: '\e817'; }
.icon-mobile:before { content: '\e818'; }
.icon-search:before { content: '\e804'; }
.icon-mail:before { content: '\e819'; }
.icon-chart-pie:before { content: '\e820'; }
.icon-chart-bar:before { content: '\e821'; }
.icon-doc:before { content: '\e811'; }
.icon-arrows-cw:before { content: '\e802'; }
.icon-chat:before { content: '\e80d'; }*/



//******************************************
//   Elements
//******************************************

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

/* Responsive Images */
img {
    height: auto !important;
    max-width: 100%;
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

figure {
    margin: 0;
}

textarea { 
    vertical-align: top;
}

ul {
    margin: 0;
    padding: 0;
}

ul > li {
    list-style: none;
}

p, li {
    line-height: 140%;
    margin: 0 0 .5em 0;
    @media @mama-bear {
        line-height: 150%;
    }
}

//******************************************
//  Helper Rules. Nothing with Theme
//  variables goes here, see variables_XXX
//******************************************

.hyphenate {
     -ms-word-break: break-all;
     word-break: break-all;
     // Non standard for webkit
     word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

.clearfix {
    &:after {
        content: "";
        clear: both;
        display: table;
    }
}

.pointer {
    cursor: pointer;
}

.middle {
    vertical-align: middle;
}

.pull-right-xs {
    float: none;
    @media @baby-bear {
        float: right; text-align: right;
    }
}

.pull-right-sm {
    float: none;
    @media @kid-bear {
        float: right;
    }
}

.pull-left-xs {
    float: none;
    @media @baby-bear {
        float: left;
    }
} 
 
.pull-left-sm {
    float: none;
    @media @kid-bear {
        float: left;
    }
}  

.always-right {
    float: right;
}

.always-left {
    float: left;
}

.max-800 {
    max-width: 800px;
}

.max-1000 {
    max-width: 1000px !important;
}

.break-word { /* for things like long emails */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

.inline {
    display: inline !important;
}

.inline-block {
    display: inline-block !important;
}

.block {
    display: block !important;
}

.center {
    margin: 0 auto !important;
}

.margin-0 {
    margin: 0;
}

.ng-hide .sr-only { // Fix for JAWS reader still reading display: none text
    display: none !important;
    position: relative;
    visibility: hidden;
}

.sr-only {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

pre, xmp {
    white-space: pre-line;
}

strong {
    font-weight: 600;
}

.text-uppercase {
    font-size: .9em;
    text-transform: uppercase;
}

.text-capitalize {
    text-transform: capitalize;
}

.text-larger {
    font-size: 130%;
}

.text-smaller {
    font-size: 90%;
    @media @teen-bear {
        font-size: 80%;
    }
}

.text-small {
    font-size: 90%;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* Truncates long text for small screens.  From http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ */
.truncate {
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 85px;
}

@media print {
    .no-print {
        display: none;
    }
}

* {
    -ms-overflow-style: scrollbar;
}


//******************************************
//   Debug Helpers
//******************************************
.debug-iphone {
    color: #fff;
    position: fixed;
    right: 10px;
    bottom: 0;
    z-index: 1000;
}


//******************************************
//   Sections & Blocks
//******************************************
.carousel {
    margin-bottom: 10px;
    .carousel-control {
        display: none;
    }
    .carousel-indicators {
        bottom: -30px;
        .active {
            background-color: #333;
        }
        li {
            background-color: #fcfcfc;
            border-color: #333;
        }
    }
}


// Datepicker button group styling, DO NOT REMOVE
.input-group.datepicker {
    position: static;
    width: 130px;
    input {
        margin-right: -1px;
        width: 110px; 
    }
    .input-group-btn {
        .btn {
            border-color: #b6b6b6; 
            margin: 0 0 .5em;
            box-shadow: none;
            line-height: 1.2em;
            padding: round(@padding/3, 1) @padding/2;
            .glyphicon {
                font-size: .9em; 
            }
        }
    }
}

// This is a special style that gets added to
// the body class when we need to have absolutely
// positioned content visible in an aside
// (e.g. the Datepicker's popover.)
.aside-overflow-visible .aside {
    overflow: visible;
}

// This addresses desktop card selection in both themes.
.text-right .dropdown-menu {
    left: auto;
    right: 0;
}

.angular-google-map-container {
    height: 400px;
    margin-top:10px;
    margin-bottom: 10px;
}
.ng-isolate-scope angular-google-map {
    height: 400px;
    margin-top:10px;
    margin-bottom: 10px;
}

.message-badge {
    display: inline-block;
    margin-left: .5em;
    position: relative;
    float: right;
    text-align: left;
    @media @baby-bear {
        float: none;
    }
    .badge {
        position: absolute;
        right: 0;
        top: 0;
    }
}