body,
html {
   height: 100%;
   margin: 0;
   padding: 0;
}

/* override all fonts */

/* modals get appended to body not #root */

body, pre {
   font-family: "Helvetica";
}

pre{
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

p {
   word-wrap: break-word;
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}

*:focus {
   outline: none;
}

#content>div {
   background-color: #F1F1F1;
}

sub {
    bottom: -0.7em;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

sub, sup {
    font-size: 60%;
    position: relative;
}

img{
   height: 0px; /*prevent giant image flashes before webpack css loads*/
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .modal-wrap {
        margin: 40px 20px !important;
    }
}

.ic-chart-date-actual-container-class > .rdrCalendarWrapper > .rdrMonthAndYearWrapper,
.ic-chart-date-actual-container-class > .rdrCalendarWrapper > .rdrMonthAndYearWrapper > button {
    background-color: #FCB828;
}

.pst-calendar-class > .rdrCalendarWrapper > .rdrMonthAndYearWrapper,
.pst-calendar-class > .rdrCalendarWrapper > .rdrMonthAndYearWrapper > button {
    background-color: #2E9BB1;
}
.pst-calendar-class > .rdrCalendarWrapper > .rdrMonthAndYearWrapper > .rdrPprevButton > i {
    border-color: transparent #FFF transparent transparent !important;
}
.pst-calendar-class > .rdrCalendarWrapper > .rdrMonthAndYearWrapper > .rdrNextButton > i {
    border-color: transparent transparent transparent #FFF !important;
}
.pst-calendar-class > .rdrCalendarWrapper > .rdrMonthAndYearWrapper > span > span > select {
    color: #FFF !important;
}

.co-chart-date-actual-container-class > .rdrCalendarWrapper > .rdrMonthAndYearWrapper,
.co-chart-date-actual-container-class > .rdrCalendarWrapper > .rdrMonthAndYearWrapper > button {
    background-color: #7B52A6;
}
.co-chart-date-actual-container-class > .rdrCalendarWrapper > .rdrMonthAndYearWrapper > .rdrPprevButton > i {
    border-color: transparent #FFF transparent transparent !important;
}
.co-chart-date-actual-container-class > .rdrCalendarWrapper > .rdrMonthAndYearWrapper > .rdrNextButton > i {
    border-color: transparent transparent transparent #FFF !important;
}
.co-chart-date-actual-container-class > .rdrCalendarWrapper > .rdrMonthAndYearWrapper > span > span > select {
    color: #FFF !important;
}

.modal-wrap {
   background-color: #fff;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: stretch;
   overflow: auto;
   height: unset;
   border-radius: 10px;
	padding: 10px 30px;
    padding-top: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}

.modal-header {
   background-color: #fff;
   height: 60px;
   padding: 0 30px;
   display: flex;
   align-items: center;
   justify-content: space-between;
	border-bottom: 1px solid #eee;
	flex-shrink: 0;
}

@media(max-width: 599px) {
   .modal-wrap {
      flex:1;
		padding: 10px;
        border-radius: 0px;
        width: 90%;
        height: 90%;
   }
}

.no-css-transitions [stoptransitions="true"],
.no-css-transitions [stoptransitions="true"] * {
   -webkit-transition: none !important;
   -moz-transition: none !important;
   -ms-transition: none !important;
   -o-transition: none !important;
   transition: none !important;
 }

@font-face {
    font-family: 'ralewayregular';
    src: url('fonts/raleway/raleway-regular-webfont.eot');
    src: url('fonts/raleway/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'), 
         url('fonts/raleway/raleway-regular-webfont.woff2') format('woff2'), 
         url('fonts/raleway/raleway-regular-webfont.woff') format('woff'), 
         url('fonts/raleway/raleway-regular-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'seravek-bold';
    src: url('fonts/Seravek/Seravek-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'seravek';
    src: url('fonts/Seravek/Seravek.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'seravek-medium';
    src: url('fonts/Seravek/Seravek-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'seravek-light';
    src: url('fonts/Seravek/Seravek-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.pst-tooltip {
    display: flex; 
    flex-direction: column; 
    pointer-events: none; 
    position: fixed;
    visibility: visible;
    background-color: #FFF;
    border-radius: 10px;
    box-shadow: 0px 5px 30px 5px rgba(42, 41, 58, 0.156);
    padding: 10px;
    font-size: 10px;
    width:300px;
    max-width: 300px;
}
.pst-bar {
    pointer-events: none;
    position: fixed;
    visibility: visible;
    width: 2px;
    background-color: rgba(0,0,0,0.1);
}

.sites-tooltip-header {
    color: #4D4D4D;
    font-weight: 600;
}

.sites-tooltip-text {
    color: #333;
}

.force-visible {
    visibility: visible !important;
}

.force-invisible {
    visibility: hidden !important;
}

.pst-tooltip-bold {
    background-color: #D6EBEF !important;
}

.pst-tooltip .date-description {
    color: #333;
    margin-bottom: 2px;
}

.pst-tooltip .major-description {
    color: #333;
    font-size: 14px;
}

.pst-tooltip .data-value {
    color: #333;
    font-size: 14px;
    display: flex;
    flex-direction: row;
}

.pst-tooltip .minor-description {
    padding-left: 10px;
    display: flex;
    flex-direction: row;
    margin-top: 5px;
    align-items: center;
}

.pst-tooltip .description {
    color: #666;
}

.pst-tooltip-number {
    border-radius: 100px;
    border-style: solid;
    border-width: 1px;
    border-color: #2E9BB1;
    background-color: #FFF;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 10px;
    margin-right: 5px;
}

.border-color-ec { border-color: #6fb8c9 !important; }
.border-color-at { border-color: #3c9946 !important; }
.border-color-aa { border-color: #E83B3A !important; }
.border-color-dr { border-color: #0F2547 !important; }
.border-color-ic { border-color: #FCB828 !important; }
.border-color-pst { border-color: #2E9BB1 !important; }
.border-color-lrc { border-color: #536BAD !important; }
.border-color-vrf { border-color: #E83B3A !important; }
.border-color-co { border-color: #7B52A6 !important; }

.color-ec { color: #6fb8c9 !important; }
.color-at { color: #3c9946 !important; }
.color-aa { color: #E83B3A !important; }
.color-dr { color: #0F2547 !important; }
.color-ic { color: #FCB828 !important; }
.color-pst { color: #2E9BB1 !important; }
.color-lrc { color: #536BAD !important; }
.color-vrf { color: #E83B3A !important; }
.color-co { color: #7B52A6 !important; }

.tooltip-top-gap {
    padding-top: 10px;
}

.flex1 {
    flex: 1;
}