@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);


/* Default font size and font weight for the application */
body {    
    box-sizing: border-box;
    font-weight: 400;
    letter-spacing: 0.010em;
    font: 400 14px/20px Roboto, "Helvetica Neue", sans-serif;    
}

.md-caption{
    font-size: 11px;
}

.md-button {
    letter-spacing: 0em;
}

.hs-popup-close-button {
    margin-left: 2px !important;
    margin-right: 12px !important;

}

.hs-popup-save-button {
    min-width: 35px;
    margin-right: 2px !important;
    min-height: 30px;
    /*height: 30px;
    text-align: right;*/
}


/* disable the outline of mapped image when the image has focus*/
img.map, map area{
    outline: none;
}

/* fix the problem of the toolbar is shrink to 48px when the keyboard is shown in the devices */
@media only screen and (min-width: 0) and (max-width: 959px) {
    md-toolbar {
        min-height: 56px !important; 
    }
}

/* do not display the outline in the multi-lines textbox*/
textarea:focus {
    outline: none; 
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

/* Invisible the clear button on the input IE*/
input[id=toolbar-search]::-ms-clear {
    display: none;
}

/*Fix the problem of FAB button has an outline in safari*/
md-fab-speed-dial:not(.md-hover-full) {
    outline: none !important
}

md-input-container .md-input {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.010em;
}

/* firefox to cause blink md-tooltip (raise event scroll)*/
md-tabs > md-tabs-wrapper > md-tabs-canvas > .md-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 100px;
  margin: -1px;    
  padding: 0;
  position: absolute;
  text-transform: none;
  width: 1px;
}

/* Default icon font for the application */
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

/*
    http://stackoverflow.com/questions/19012135/ios-7-ipad-safari-landscape-innerheight-outerheight-layout-issue
    iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue
*/
@media (orientation:landscape) {
    html.ipad.ios7 > body {                 
        position:fixed;        
        bottom: 0;
        width:100%;
        height: 100% !important;
    }
}

@media (max-width: 499px) {
	.hide-xxs:not(.hide-xs):not(.hide){
		display: none
	}
}

@media (min-width: 500px) and (max-width: 599px) {
    .hide-gt-xxs:not(.hide-xs):not(.hide){
		display: none
	}
}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

.app-input-toolbar-search {
	border-width: 0px;
	line-height: 30px;
    background-color:transparent;
	padding: 0px;
    margin:1px;
	position: relative;
    top:0px;
    font-size:16px;
    font-weight:normal;
    font-style:normal;
    color: rgba(255, 255, 255, 1);
}

.app-input-toolbar-search::-ms-clear {
    display: none;
}

/* The color based on incident statuses*/
.app-issue-new-fill { 
    fill: #8E44AD; 
}

.app-issue-inprogress-fill { 
    fill: #3498DB; 
}

.app-issue-cancelled-fill { 
    fill:#F39C12; 
}

.app-issue-completed-fill { 
    fill: #57AD71; 
}

.app-issue-fixed-fill { 
    fill:#57AD71; 
}

/* This class is used in the sort popover on the toolbar (in mobile mode only) */
.app-div-filter-item {
    position: relative;
    padding: 0px 16px 0 0;
    width: 100%;
    text-align: left;
    text-transform: none;
    border-radius: 0;
    outline: none;
    min-height: 52px;
    cursor:pointer;

    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.010em;
    line-height: 1.2em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* This class is used for the item in the main incident list */
.app-div-list-item {
    position: relative;
    padding: 0px 16px 0 0;
    width: 100%;
    text-align: left;
    text-transform: none;
    border-radius: 0;
    outline: none;
    min-height: 72px;

    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.010em;
    line-height: 1.2em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* by default the login form shows on a card in the center of the page */
.app-login-page {
    background-color: #D5D5D5;
    min-height: 532px;
}

.app-login-card-container {
    /* layout-row */
    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    /* layout-fill */
    margin: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
    /* layout-align-center-center */
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    max-width: 100%;
    justify-content: center;
}

.app-login-card {
    /* (style copied from angular md-card) */
    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 8px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
    /* others */
    background-color: white;
    min-width: 200px;
    width: 440px;
    min-height: 500px;
    height: 520px;
}

/* but on small screen (like mobile phone) it shows full page */
@media screen and (max-width:500px) {
    .app-login-page {
        background-color: white;
        min-height: 500px;
    }

    .app-login-card-container {
        display: block;
        box-sizing: border-box;
        margin: 0px;
        padding: 0px;
        display: block;
        width: 100%;
        max-width: 100%;
        align-content: center;
        justify-content: center;
    }
    
    .app-login-card {
        /* (style copied from angular md-card) */
        box-sizing: border-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        margin:0px;
        background-color: white;
        min-width: 100%;
        width: 100%;
        min-height: 100%;
        height: 100%;
    }
    
    .app-btn-toolbar-icon {
        padding: 0 !important;
    }
}

.md-button.app-btn-validate {
    padding: 0 6px 0 6px;
    margin: 6px 8px 6px 8px;
    min-width: 88px;
    border-radius: 3px;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    text-decoration:none;
    border: none;
    outline: none;
}

.app-toolbar-title {
    color:inherit !important; 
    white-space:nowrap !important; 
    overflow:hidden !important;  
    text-overflow:ellipsis !important; 
    line-height: 28px;
}

.app-side-nav-btn {
    padding-left: 12px !important;    
    border-radius: unset !important;
    text-align: left;
    text-transform: none;    
    width:100%;    
    height:48px;    
    margin-left:0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top:0px !important;
    padding-bottom: 0px !important;
}

.app-side-nav-icon {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-right: 0px !important;
}

/* Password estimate strength*/
#progress-bar-weak {
    width: 25%; height:6px; margin-top:8px; float:left;
}

#progress-bar-medium {
    width: 48%; height:6px; margin-top:8px; margin-left:1%;
}

#progress-bar-strong {
    width: 25%; height:6px; margin-top:8px; float:right;
}

.app-filter-list-item {
    margin-left: 16px;
}

.app-btn-selectall-deselectall {
    text-transform: none;
    border-right: 1px solid #c5c5c5;
    border-top: 1px solid #c5c5c5;
    border-bottom: 1px solid #c5c5c5;
    border-radius: 0px;
    margin: 0px;
}

.app-input-select-items {
    cursor: pointer;
}

.app-select-items-panel {
  box-sizing: border-box;
  position:absolute;
  margin: 0;
  top:0;
  left:0;
  bottom:0;
  right:0;
}

.app-dialog {
    max-width: 600px;
    min-height: 480px;
}

.app-bar-password {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;  
  text-align: center;    
}

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

/* 
    Special css to revert the yellow color applied by Chrome on the fields using auto-complete 
    in the login screen and in the search toolbar.
    http://jafty.com/blog/how-to-get-rid-of-yellow-background-in-form-fields-for-google-chrome-and-safari-for-mac/
*/
input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
    border-color: #E0E0E0;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}
.app-input-toolbar-search:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px #627383 inset; 
    -webkit-text-fill-color: white;
}
.app-input-toolbar-search:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px #627383 inset;
    -webkit-text-fill-color: white;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    CUSTOM COLORS SECTION
    STYLES DEFINED IN THIS SECTION CAN OVERRIDE FOR EACH MANAGED COMPANY
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* define the colors of the send/attach files in the comment tab */
@-webkit-keyframes zoomInButton {
    0% {
        background-color: #3498DB;
        transform: scale(0.1);
        -webkit-transform: scale(0.1);
    }
    5% {
        background-color: #3498DB;
        transform: scale(0.2);
        -webkit-transform: scale(0.2);
    }
    10% {
        background-color: #3498DB;
        transform: scale(0.6);
        -webkit-transform: scale(0.6);
    }
    15% {
        background-color: #3498DB;
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
    }
    20% {
        background-color: #3498DB;
        transform: scale(1);
        -webkit-transform: scale(1);
    }
    100% {
        background-color: #3498DB;
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}
@keyframes zoomInButton {
    from {
        background-color: #3498DB;
        transform: scale(0.1);
        -webkit-transform: scale(0.1);
    }
    5% {
        background-color: #3498DB;
        transform: scale(0.2);
        -webkit-transform: scale(0.2);
    }
    10% {
        background-color: #3498DB;
        transform: scale(0.6);
        -webkit-transform: scale(0.6);
    }
    15% {
        background-color: #3498DB;
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
    }
    20% {
        background-color: #3498DB;
        transform: scale(1);
        -webkit-transform: scale(1);
    }
    100% {
        background-color: #3498DB;
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}
.cus-btn-zoom-in {
  animation-name: zoomInButton;
  -webkit-animation-name:zoomInButton;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-iteration-count: 1;  
  -webkit-animation-iteration-count:1;
}

/* define the colors of the send/attach files in the comment tab (disable status) */
@-webkit-keyframes zoomInButtonDisabled {
    from {
        transform: scale(0.1);
        -webkit-transform: scale(0.1);
    }
    5% {
        transform: scale(0.2);
        -webkit-transform: scale(0.2);
    }
    10% {
        transform: scale(0.6);
        -webkit-transform: scale(0.6);
    }
    15% {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
    }
    20% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}
@keyframes zoomInButtonDisabled {
    from {
        transform: scale(0.1);
        -webkit-transform: scale(0.1);
    }
    5% {
        transform: scale(0.2);
        -webkit-transform: scale(0.2);
    }
    10% {
        transform: scale(0.6);
        -webkit-transform: scale(0.6);
    }
    15% {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
    }
    20% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}
.cus-btn-zoom-in-disabled {
  animation-name: zoomInButtonDisabled;  
  -webkit-animation-name: zoomInButtonDisabled;  
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-iteration-count: 1;  
  -webkit-animation-iteration-count: 1;  
}

/* define the selected item color in the incident list*/
.cus-div-item-selected {
	background-color: #ECECEC
}

/* define the color of the hover button for adding incidents, attachments... */
.md-fab.cus-fab {
    background-color: #3498DB !important;
    outline: none !important;
}

/* define the color of the bottom ink bar in the tab headers*/
md-tabs.md-default-theme.cus-tabs md-ink-bar, 
md-tabs.cus-tabs md-ink-bar {
    background-color: #3498DB !important;
}

/* define the color of the text in the tab headers*/
md-tabs.cus-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, 
md-tabs.cus-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, 
md-tabs.md-accent.cus-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, 
md-tabs.md-default-theme.md-accent.cus-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused, 
md-tabs.md-default-theme.md-accent.cus-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused md-icon {
  color: #3498DB !important;
}

/* define the color of the floating label in the input container */
md-input-container.md-default-theme.cus-input-container:not(.md-input-invalid).md-input-has-value label, 
md-input-container.cus-input-container:not(.md-input-invalid).md-input-focused label {
    color: #34495E !important;
}

/* define the color of the bottom border in the input container */
md-input-container.md-default-theme.cus-input-container.md-input-focused:not(.md-input-invalid) .md-input, 
md-input-container.cus-input-container.md-input-focused:not(.md-input-invalid) .md-input {
	border-color: #34495E !important
}

/* define the color of the link */
a.cus-link:link { color: #34495E; text-decoration:none; }
a.cus-link:visited { color: #34495E; text-decoration:none; }
a.cus-link:hover { color: #34495E; text-decoration:underline; }
a.cus-link:active { color: #34495E; text-decoration:none; }

/* define the color of button used to validate the login (in login/fogorpassword screen)*/
.md-button.app-btn-validate.cus-btn-submit {
    background-color:#34495E;
    color:#DFE2E5;
}
.md-button.app-btn-validate.cus-btn-submit:not([disabled]):hover {
    background-color:#34495E;
}

/* define the color of the main application toolbar */
.cus-toolbar {
    background-color: #34495E !important;
    color: #FFFFFB !important;
    padding: 12px 8px 12px 16px !important;
}
@media only screen and (min-width: 0) and (max-width: 959px) {
    .cus-toolbar {
        min-height: 56px !important;
        height: 56px !important;

        background-color: #34495E !important;
        color: #FFFFFB !important;
    }
}

/* define the color of the toolbar that used in filter dialog */
.cus-toolbar-filter {
    background-color: white !important;
    color: rgba(0, 0, 0, 0.87) !important;
}
@media only screen and (min-width: 0) and (max-width: 959px) {
    .cus-toolbar-filter {
        min-height: 56px !important;
        height: 56px !important;

        background-color: white !important;
        color: rgba(0, 0, 0, 0.87) !important;
    }
}

/* define the color of the div that wrap the search input in the main application toolbar */
.cus-div-toolbar-search-wrapper {
    background-color: #627383 !important;
}

/* define the color of the main application toolbar in phone-mode */
.cus-toolbar-phone {
    padding-left: 0px !important;
    padding-right: 0px !important;

    background-color: #F6F6F6; 
    color: rgba(0, 0, 0, 0.54);
}

/* define the color of the toolbar used in panel dialog */
.cus-toolbar-dlg-select-items {
    background-color:#F6F6F6; 
    color: rgba(0, 0, 0, 0.54);
}

/* define the color of comments div on left side */
.cus-div-left-comment {
    background-color: #EEEEEE;
}

/* define the color of comments div on right side */
.cus-div-right-comment {
    background-color: #E4F3FD;
}

/* define the color of the field CreatedBy in the comment divs */
.cus-text-color-comment-creator {
    color:#67A1E4
}

/* define the margin of the comment divs */
.cus-margin-comment {
    margin:4px;
}

/* define the color for md-icon that want to have the primary color */
.cus-btn-color-icon {
    color: #3498DB;
}

/* define the color of the title panel in the detail of incident */
.cus-incident-detail-title {
    background-color:#3498DB; 
    color:#FFFFFB    
}

/* define the color of grouping text info */
.cus-text-info-group {
     color:#3498DB;
     text-transform:uppercase
}

/* define to color of the div which wrap the account information on the side-nav */
.cus-side-nav {
    background-color: #3498DB; 
}

/* define the color of the dialog about */
.cus-dialog-about {
    background-color: #489AD8;
}

/* define the color of week/strong password */
.cus-text-password-weak { color: red; }
.cus-bar-password-weak { background-color: red; }

.cus-text-password-medium { color: orange; }
.cus-bar-password-medium { background-color: orange; }

.cus-text-password-strong { color: green; }
.cus-bar-password-strong { background-color: green; }

.cus-text-password-default { color: #f5f5f5; }
.progress-bar-password-default { background-color: #f5f5f5; }

/* define the style of the check box with thin border that used in the login screen */
md-checkbox.cus-chk-thin-border .md-icon {
 border: 1px solid #34495E !important;
 border-radius: 0;
}

/* define the color for those text that use the color like primary color */
.cus-text-primary-color {
    color: #34495E;
}

/* define the border of the drag-drop box */
.cus-dragdrop-box.dragover {
    border: 1px dashed #3498DB !important
}

/* define the color of progress bar on the image thumbnail when uploading completed.*/
md-progress-linear.md-accent.cus-div-upload-completed .md-bar {
    background-color: green !important;
}

md-toast.cl-toast-error .md-toast-content {
    height: auto !important;
    padding: 0px !important;
    background-color: rgb(221,44,0);
    color: white;
}

/* Tab Login control */
/*oc-slide-container directive////////////////////////////////////////*/
oc-slide-container {
  display: block;
  margin: 0;
  overflow: hidden;
  position: relative;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0; }

oc-slide-content-wrapper {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden; }

oc-slide-item-content {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: -webkit-transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
  transition: transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
  overflow: auto;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0); }

oc-slide-item-content.oc-left:not(.oc-active) {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-animation: 1s oc-slide-item-hide;
            animation: 1s oc-slide-item-hide;
    opacity: 0; 
}

oc-slide-item-content.oc-left:not(.oc-active) * {
      transition: visibility 0s linear;
      transition-delay: 0.5s;
      visibility: hidden; 
}

oc-slide-item-content.oc-right:not(.oc-active) {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    -webkit-animation: 1s oc-slide-item-hide;
            animation: 1s oc-slide-item-hide;
    opacity: 0; 
}

oc-slide-item-content.oc-right:not(.oc-active) * {
      transition: visibility 0s linear;
      transition-delay: 0.5s;
      visibility: hidden; 
}

@-webkit-keyframes oc-slide-item-hide {
  0% { opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; } 
}

@keyframes oc-slide-item-hide {
  0% { opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; } 
}
/*////////////////////////////////////////////////////////////////////*/