html,
body {
    font-size: 100%;
}

.sidemenu>li>a,
.submenu>li>a,
#hko_nav_bar li {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.uv {
    font-family: Arial, 'Microsoft JhengHei', sans-serif;
    margin: 10px 5px;
    color: #333;
    transition: padding-top 1.5s;
}

.uv abbr {
    font-variant: none;
    text-decoration: none;
    border: 0;
}

.uv figure img {
    max-width: 100%;
}

.uv ol {
    list-style: decimal;
    padding-left: 30px;
}

.uv ul {
    list-style: disc;
    padding-left: 30px;
}

.preventScrolling {
    height: 100%;
    overflow: hidden;
}

.nowrap {
    display: inline-block;
    white-space: nowrap;    
}

.spacing-top {
    margin-top: 20px;
}

.spacing-top-tiny,
.uv .spacing-top-tiny {
    margin-top: 3px;
}

.page-loader {
    display: none;
    position: fixed;
    z-index: 100;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #aaa;
    opacity: .75;
    text-align: center;
}

.page-loader.requireLoader {
    display: block;
}

.loading-text {
    display: inline-block;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    padding-top: 30px;    
    font-family: Arial, 'Microsoft JhengHei', sans-serif;
    font-size: 200%;
    color: #000;
    opacity: 1;
    background: url('../../../../../en/wxinfo/uvinfo/images/loader.gif') 50% 0 no-repeat;
}

.uv .alert .alert-header {
    margin-top: 3px;
    margin-bottom: 3px;
}

.greenL,
.data-table .greenL {
    background-color: #289500;
    color: #FFF;
}

.orangeL,
.data-table .orangeL {
    background-color: #F85900;
    color: #000;
}

.yellowL,
.data-table .yellowL {
    background-color: #F7E400;
    color: #000;
}

.redL,
.data-table .redL {
    background-color: #D8001D;
    color: #FFF;
}

.purpleL,
.data-table .purpleL {
    background-color: #6B49C8;
    color: #fff;
}

.greenT {
    color: #289500;
}

.orangeT {
    color: #F85900;
}

.yellowT {    
    color: #F7E400;
}

.redT {
    color: #D8001D;
}

.purpleT {
    color: #6B49C8;
}

.uv .main-title,
.uv .section-heading {
    padding: 0.25em 0.25em;
    font-weight: normal;
    background-color: #004b87;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
}

.not-visible {
    visibility: hidden;
}

.section-tools {
    margin: 0;
    text-align: right;
}

.userGuide {
    margin-right: 10px;
}

/*** ui-button primary ***/
.ui-button-primary {
    border: 2px solid #666;
}
.ui-button-primary:hover,
.ui-button-primary:focus {
    border: 2px solid #666;
    background-color: #ccc;
}
.ui-button-primary:active {
    background-color: #007fff;
}

.section-collapse {
    margin-bottom: 15px;
}

.section-collapse-content {
    margin-top: 30px;
}

.sectionTitle {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.1429em;
    font-weight: bold;
}

.indexGraph {
    width: 100%;
}

/*** Charts  ***/
.charts {
    width: 100%;
    min-height: 400px;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1;
    overflow: auto;
}
.charts canvas {
    width: 100% !important;
}
.hideCharts {
    height: 0;
    overflow: hidden;
}

.table-balanced {
    table-layout: fixed;
}

.table-header {
    background-color: #ccffff;
    vertical-align: top;
}

.table-header-rating,
.table-header-forecast,
.table-cell-forecast {
    text-align: center;
}

.table-cell-rating {
    font-size: 200%;
    text-align: center;
}

.table-cell {
    width: 40%;
}

.table-cell-narrow {
    width: 20%;
}

.table-cell-wide {
    width: 60%;
}

.table-cell--single-item,
.table > tbody > tr > .table-cell--single-item {
    vertical-align: middle;
}
.table-cell.single--item ul,
.table > tbody > tr > .table-cell--single-item ul {
    margin-bottom: 0;
}

.table .icons {
    min-height: 50px;
    padding-left: 60px;
    background-repeat: no-repeat;
}

.rating-table thead th {
    font-size: 125%;
    vertical-align: top;
}

.teaser {
    display: table;
    min-height: 4em;
    padding-top: 10px;
}

.teaser span {
    display: table-cell;
    vertical-align: top;
    padding-right: 10px;
}

.teaser p {
    display: table-cell;
    vertical-align: top;
    font-size: 87.5%;
}

.with-icon {
    min-height: 70px;
    padding-left: 70px;
    background-position: 10px 10px;
    background-repeat: no-repeat;
}

.icons-list li {
}

.rating {
    display: inline-block;
    margin-bottom: 5px;
    padding: 5px 8px;
}

.ui-slider-value {
    display: inline-block;
    width: 2.1em;
    border: 0;
    text-align: center;
}

/*** volume-control ***/
.volume-control {
    white-space: nowrap;
}
.volume-selector {
    display: inline-block;
    vertical-align: middle;
    /* IE9 and under */
    width: 70%;
    width: calc(100% - 120px);
}
.volume-icon {
    display: inline-block;
    width: 40px;
    vertical-align: middle;
    font-size: 200%;
}
.volume-control .glyphicon-volume-up {
    text-align: right;
}

/*** ui-dialog ***/
.ui-dialog {
    font-size: 1.1429em;
}
.ui-dialog .ui-dialog-buttonpane {
    padding-left: 1em;
    border-top: 0;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none;
}
.ui-dialog .ui-dialog-buttonset .ui-button {
    width: 100%;
    font-size: 125%;
}
.ui-dialog .ui-button:hover,
.ui-dialog .ui-button:focus {
    border: 1px solid #666;
}
.ui-dialog .ui-checkboxradio-label .glyphicon {
    font-size: 150%;
}
.ui-dialog .ui-slider {
    font-size: 162.5%;
    margin: 0 0.5em;
}

/*** ui-slider ***/
.ui-widget.ui-widget-content {
    border: 1px solid #666;
}
.ui-slider-range {
    background: #007fff;
}
.ui-state-disabled .ui-slider-range {
    background: #ccc;
}
.ui-slider-handle.ui-state-default {
    border: 1px solid #666;
    background: #ccc;
}

/*** carousel (override Bootstrap) ***/
.carousel {
    padding-bottom: 2em;
}
.carousel-indicators {
    bottom: 0;
    margin-bottom: 0;
}
.carousel-indicators li {
    width: 1.25em;
    height: 1.25em;
    margin: 0;
    border: 1px solid #666;
    border-radius: 50%;
}
.carousel-indicators .active {
    width: 1.25em;
    height: 1.25em;
    background-color: #666;
}
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}


.image,
.image img {
    max-width: 100%;
}

.logo-dh {
    background-image: url('../../../../../en/wxinfo/uvinfo/images/logo-dh.png');
    background-position: 10px 5px;
}

.section-tools .icons {
    max-width: 100px;
}

.icons-sun-position {
    background-image: url('../../../../../en/wxinfo/uvinfo/images/icon-sun-position.png');
}

.icons-ozone {
    background-image: url('../../../../../en/wxinfo/uvinfo/images/icon-ozone.png');
}

.icons-absorption {
    background-image: url('../../../../../en/wxinfo/uvinfo/images/icon-absorption.png');
}

.icons-reflection {
    background-image: url('../../../../../en/wxinfo/uvinfo/images/icon-reflection.png');
}

.icons-sea-level {
    background-image: url('../../../../../en/wxinfo/uvinfo/images/icon-sea-level.png');
}

.icons-protection-uv-index {
    background-image: url('../../../../../en/wxinfo/uvinfo/images/icon-uv-index.png');
}

.icons-protection-hat {
    background-image: url('../../../../../en/wxinfo/uvinfo/images/icon-hat.png');
}

.icons-protection-shade {
    background-image: url('../../../../../en/wxinfo/uvinfo/images/icon-shade.png');
}

.icons-protection-sunglasses {
    background-image: url('../../../../../en/wxinfo/uvinfo/images/icon-sunglasses.png');
}

.icons-protection-umbrella {
    background-image: url('../../../../../en/wxinfo/uvinfo/images/icon-umbrella.png');
}

.icons-protection-blocker {
    background-image: url('../../../../../en/wxinfo/uvinfo/images/icon-blocker.png');
}

.icons-protection-clothing {
    background-image: url('../../../../../en/wxinfo/uvinfo/images/icon-clothing.png');
}

.notification-message {
    max-height: 300px;
    overflow: hidden;
    font-family: Arial, 'Microsoft JhengHei', sans-serif;
    transition: max-height 2s;
}
.notification-message.dismiss {
    max-height: 0;
    transition: max-height 1s;
}
.notification-message .alert {
    margin-top: 20px;
}

.notification-content {
    padding: 10px 15px;
}

.section {
    margin-bottom: 20px;
}

.section .section-main-header {
    margin-top: 0;
    font-size: 150%;
    font-weight: normal;
}

.section .section-sub-header {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 100%;
}

.section-text-data .table {
    margin-bottom: 10px;
}

.uv .section-heading {
    margin-top: 0;
}

.section .section-heading:first-child {
    margin-top: 0;
}

.uv .section-remark {
    margin: 0;
    font-size: 87.5%;
}

.separator {
    margin-top: 30px;
    border-top: 1px solid #ccc;
}

.separator-major {
    border-top: 4px solid #999;
}

.protection-methods {
    color: #000;
}

.protection-methods .carousel-inner {
    min-height: 70px;
}

.section-text-data {
}

.section-reference .title {
    margin-bottom: 15px;
    font-size: 87.5%;
}

.table-responsive + .section-reference .title {
    margin-top: 0;
}


/*** video-container ***/
.video-container {
    position: relative;
    z-index: 0;
    height: 0;
    padding-bottom: 50%;
    overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.c-hint {
    position: relative;
}

.c-hint_trigger,
.c-hint_trigger:visited {
    color: #333;
}

.c-hint_trigger:hover,
.c-hint_trigger:focus,
.c-hint_trigger:active {
    color: #000;
}

.c-hint_message {
    position: absolute;
    top: 100%;
    padding: 5px 10px;
    background: #eee;
    border: 1px solid #fff;

}

.c-hint_message p {
}

.uv .c-hint_message p {
    margin: 0;
}


/*** overriding styling defined by bootstrap START ***/
.uv caption {
    color: #333;
}

.uv h1, 
.uv h2,
.uv h3,
.uv h4,
.uv h5, 
.uv h6 {
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: bold;
}

.uv p {
    margin-bottom: 15px;
}

.uv .table strong {
    color: #000;
}

.nav-pills {
    margin-bottom: 15px;
}

.tab-content {
    margin-bottom: 15px;
}

/* addition or override bootstrap styling */
.alert-default {
    background-color: #fff;
    border-color: #ccc;
}

.alert-important {
    background-color: #fff;
    border: 2px solid #000;
}

.alert-notice {
    color: #000;
    background-color: #fcf8e3;
    border-color: #e60000;
    border-width: 2px;
}

.alert .alert-notice {
    font-size: 87.5%;
    margin: 0 0 10px;
    padding: 5px 10px;
}

.alert .heading {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 112.5%;
    font-weight: bold;
}

.alert-important .heading {
    font-size: 150%;
}

.alert-no-side-padding {
    padding: 0;
}

.uv .alert-header-tiny {
    font-size: 100%;
}

.alert .table {
    margin-bottom: 10px;
}

.uv .panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 500;   
}

.accordion .accordion {
    margin-bottom: 0;
}
.accordion .panel-heading {
    padding: 0;
}
.accordion .panel-heading a {
    display: block;
    padding: 10px 15px; 
    background-color: #004b87;
    color: #fff;
}
.accordion .panel-heading .collapsed {
    background-color: #f5f5f5;
    color: #333;
}

.panel-section {
    padding-top: 10px;
}

.btn-default {
    display: inline-block;
    padding: 10px 15px;
    background: #f5f5f5;
    vertical-align: middle;
	color:#333;
}

.btn .glyphicon {
    font-size: 150%;
    vertical-align: middle;
    margin-top: -5px;
}

.uv .list-group,
.uv .carousel-indicators {
    padding-left: 0;
}


/*** overriding styling defined by bootstrap END ***/

/*** data table ***/
.data-table th {
    background-color: #ccffff;
}
.data-table > thead > tr > th,
.rating-table > thead > tr > th {
    vertical-align: top;
}
.table-bordered > tbody > .table-cell-solid-line > td {
    border-top: 3px solid #999;
}
.table-bordered > tbody > tr > .table-cell-rating {
    vertical-align: middle;
}

/*** rules affected by clfWrapper START ***/
#clf_wrapper .glyphicon {
    font-family: 'Glyphicons Halflings' !important;
}
/*** rules affected by clfWrapper END ***/


@media print {

    .section-tools {
        display: none;
    }

    .alert-warning,
    .alert-danger {
        border-color: #ccc;
    }
}

/* specific rules to screen width below 768px (mobile size) */
@media all and (max-width:767px) {

    .row {
        margin-left: 0;
        margin-right: 0;
    }

    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
        padding-right: 0;
        padding-left: 0;
    }

    .container {
        padding-left: 0px;
        padding-right: 0px;
    }

    .panel-body {
        padding: 8px;
    }

    .alert {
        padding: 8px;
    }

    .spacing-top-sm {
        margin-top: 20px;
    }

    .no-spacing-top-sm,
    .uv .no-spacing-top-sm {
        margin-top: 0;
    }

    .nav-pills {
        margin-bottom: 5px;
    }

    .nav-pills > li {
        float: none;
        margin-bottom: 5px;
    }

    .nav-pills > li > a {
        padding: 5px;
    }

    .nav-pills > li + li {
        margin-left: 0;
    }

    .tab-content {
        margin-bottom: 5px;
    }

    .table-responsive caption {
        padding-left: 8px;
        padding-right: 8px;
        border-bottom: 1px solid #ddd;
    }

    .table .icons {
        padding-top: 60px;
        padding-left: 0;
    }

    .table-balanced-md {
        table-layout: auto;
    }

}