html {
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}
body
{
   font-family: Tw Cen MT, Arial, Verdana, Helvetica;
   font-size: 91%;
   font-weight: normal;
   color: #383838;
   text-align: center;
   background-color: #fff;
}

input, textarea, select {
    font-family: Tw Cen MT, Arial, Verdana, Helvetica;
}

h1{font-size:2rem;}
h2{font-size:1.5rem;}
h3{font-size:1.3rem;}
hr {
    height: 1px;
    border: none;
    color: #b2b2b2;
    background-color: #b2b2b2;
}

sup {
    line-height: 0;
}

.infolink > img {
   /** position: absolute; **/
    margin-left: 6px;
}
/*************************************************
        FRAMEWORK
*************************************************/

.child-space-2 {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

.child-space-2 > div {
    margin-top: 0.5em;
}

.gap-2 {
    gap: 0.5em;
}

.gap-4 {
    gap: 1em;
}

.gap-6 {
    gap: 1.5em;
}

.gap-8 {
    gap: 2em;
}

.grid-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 0.5rem;
    row-gap: 0.75rem;
}

.grid-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.2fr);
    column-gap: 0.5rem;
    row-gap: 0.75rem;
}


.grid-6__first-column-large {
    display: grid;
    grid-template-columns: 180px repeat(5, minmax(0, 1fr));
    column-gap: 0.5rem;
    row-gap: 0.75rem;
}

.grid-6 .ui-datepicker-trigger, grid-compact .ui-datepicker-trigger {
    top: initial !important;
}

.grid-6 .form_tb, .grid-6 .form_tb_wide, .grid-compact .form_tb, .grid-compact .form_tb_wide {
    width: 100%;
}

.grid-6 input:not([type='radio']), .grid-6 select, .grid-compact input:not([type='radio']), .grid-compact select {
    margin-right: 0px;
}

.grid-column-2-end {
    grid-column: 2/-1;
}

.grid-column-2-end-2 {
    grid-column: 2/-2;
}

.grid-column-3-end-2 {
    grid-column: 3/-2;
}

.grid-column-2-6 {
    grid-column: 2/6;
}

.grid-column-2-5 {
    grid-column: 2/5;
}

.grid-column-2-4 {
    grid-column: 2/4;
}

.grid-column-4-6 {
    grid-column: 4/6;
}

.grid-column-3-5 {
    grid-column: 3/5;
}

.grid-column-3-6 {
    grid-column: 3/6;
}

.grid-column-3 {
    grid-column: 3;
}

.grid-column-4 {
    grid-column: 4;
}

.grid-column-5 {
    grid-column: 5;
}

.grid-column-5-end {
    grid-column: 5/7;
}

.grid-column-6 {
    grid-column: 6;
}

.grid-column-7 {
    grid-column: 7;
}

.grid-column-8 {
    grid-column: 8;
}

.grid-column-6-7 {
    grid-column: 6/7;
}

.grid-column-6-8 {
    grid-column: 6/8;
}


.grid-column-1-5 {
    grid-column: 1/5;
}

.grid-column-1-4 {
    grid-column: 1/4;
}

.grid-column-1-end {
    grid-column: 1/-1;
}

.grid-column-1 {
    grid-column: 1;
}

.grid-column-1-2 {
    grid-column: 1/2;
}

.grid-column-1-3 {
    grid-column: 1/3;
}

.grid-column-2 {
    grid-column: 2;
}

.grid-column-3 {
    grid-column: 3;
}


.grid-column-3-6 {
    grid-column: 3/6;
}

.grid-row-start-4 {
    grid-row-start: 4;
}

.grid-row-start-5 {
    grid-row-start: 5;
}

.grid-row-1 {
    grid-row: 1;
}

.grid-row-2 {
    grid-row: 2;
}

.grid-row-3 {
    grid-row: 3;
}

.grid-row-4 {
    grid-row: 4;
}

.grid-row-5 {
    grid-row: 5;
}

.grid-row-6 {
    grid-row: 6;
}

.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-column {
    flex-direction: column;
}

.jc-space-between {
    justify-content: space-between
}

.ai-center {
    align-items: center;
}

.ai-end {
    align-items: end;
}

.as-end {
    align-self: end;
}

.mb-2 {
    margin-bottom: 0.5em;
}

.mb-4 {
    margin-bottom: 1em;
}

.mb-6 {
    margin-bottom: 1.5em;
}

.mt-2 {
    margin-top: 0.5em;
}

.mt-4 {
    margin-top: 1em;
}

.mt-6 {
    margin-top: 1.5em;
}

.p-4 {
    padding: 1em;
}

.p-8 {
    padding: 2em;
}

.pr-8 {
    padding-right: 2em;
}

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

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

.float-right {
    float: right
}

.mr-1 {
    margin-right: 0.25em;
}

.mr-2 {
    margin-right: 0.5em;
}

.ws-pre {
    white-space: pre;
}

.light_gray {
    background-color: rgba(0,0,0,0.12);
}

.inline {
    display: inline !important;
}

.w100 {
    width: 100% !important;
}

#container {
    max-width: 1024px;
    margin: 0px auto;
    text-align: left;
}

#container_iframe {
	text-align: left;
}
/*************************************************
        HEADER
*************************************************/
#header
{
    width: 100%;
    height: 150px;
}
#header
{
    width: 100%;
    height: 150px;
}
#header_left
{
    width: 300px;
    height: 100%;
    background-color:#fff;
    float: left;
}
#header_left_top
{
    height: 124px;
    text-align: left;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
#header_left_bottom
{
    text-align: right;
    background-color:#969696;
    height: 27px;
    padding-top:3px;
}
#header_right
{
    width: 724px;
    height: 100%;
    background-color:#fff;
    float: left;
}
.QMLogo
{
    width: 280px;
    padding-top:20px;
    margin-left:9px;
}
/*************************************************
        NAVIGATION
*************************************************/
#column_left
{
    width: 300px;
	float: left;
    height:100%;
	background: url(../img/bg.gif) repeat-y;
}

#main_navi_top
{
    height: 60px;
    background-color: #B2B2B2;
}

#main_navi_middle
{
    position: relative;
    background-color: #B2B2B2;
    height:580px;
}

#main_navi_bottom
{
    background-color: #B2B2B2;
    height:90px;
}

#navi_myClimate
{
    position:absolute; 
    bottom:0%;
    left:0%;
}
/*************************************************
        CONTENT
*************************************************/
#middle
{
    /*background-color:#B2B2B2;*/
    /* display:table-cell; */
    width: 100%;
}
#content
{
	width: 724px;
	padding-left: 0px;
	float: left;
    background-color:#fff;
    padding-bottom:10px;
}
#content_iframe
{
	padding-left: 0px;
	float: left;
}
.main_content_class
{
    margin: 20px 0px 0px 20px;
    border: 1px solid #b2b2b2;
}
.main_content_class_noborder
{
    margin: 20px 0px 0px 20px;
    border: 0px;
}
#main_content_iframe
{
    margin: 20px 20px 20px 20px;
    border: 1px solid #b2b2b2;
}
#main_content_caption
{
    font-weight:bold;
    color:#000;
    background-color: #B2B2B2;
    padding: 0px;
    margin: 0px;
} 
.main_content_text_class
{
    padding: 20px 10px 10px 10px;
    line-height: 16px;
    color: #000;
    font-weight: normal;
    min-height: 550px;
}

.importanthint
{
    color:red;
}
/*************************************************
        FOOTER
*************************************************/
#footer
{
    width: 1022px;
    clear: both;
    background-color: #969696;
    color: #ffffff;
    min-height:20px;
    height:auto;
    background-repeat: no-repeat;
    padding: 0px 0px 0px 2px;
    line-height:1.2rem;
}
/*************************************************
        Tooltip
*************************************************/
body .ui-tooltip
{
	border: 1px solid #000;
    max-width:600px;
}

.ui-tooltip-content
{
	background-color: #ccccff;
    color: #000;
    font-family: Tw Cen MT, Arial, Verdana, Helvetica;
    font-size:0.9rem;
    margin: 0 0 0 0;
}
.ui-widget-content
{
	border: none;
	background-color: #ccccff;
    color: #000;
    text-align:left;
}


/*************************************************
        Dialogs
*************************************************/
.ui-dialog
{
    font-family: Tw Cen MT, Arial, Verdana, Helvetica;
	font-size: 0.9rem;
}
.ui-dialog input
{
    background-color:white;
    border: 1px solid #75736E;
}
.ui-dialog .ui-dialog-buttonpane .ui-button
{
    color:#000;
    font-size:0.8rem;
    font-weight:normal;
    border: 1px solid #75736E;
}


/*************************************************
        Checkbox
*************************************************/
.checkbox-style-flex {
    display: flex;
    align-items: center;
}

.checkbox-style-flex label{
    margin-left:6px
}

.externalTooltipWrapper {
    display: flex;
    flex-direction: column;
    padding: 10px;
    color: white;
    background: #3f3f3f;
}