/***** colors ******/
.hsl-text-color-green {
    color: #33cd5f !important;
}

.hsl-text-color-blue {
    color: #3357d6 !important;
}

.hsl-text-color-grey {
    color: #e0e0e0 !important;
}

.hsl-text-color-dark-grey {
    color: #323232 !important;
}

.hsl-text-color-dark {
    color: #181818 !important;
}

.hsl-text-color-white {
    color: #ffffff !important;
}

.hsl-text-color-orange {
    color: #FF8C00;
}

.hsl-text-color-red {
    color: red;
}

.hsl-background-color-green {
    background-color: #33cd5f !important;
}

.hsl-background-color-blue {
    background-color: #3357d6 !important;
}

.hsl-background-color-grey {
    background-color: #e0e0e0 !important;
}

.hsl-background-color-dark-grey {
    background-color: #323232 !important;
}

.hsl-background-color-dark {
    background-color: #181818 !important;
}

.hsl-background-color-white {
    background-color: #ffffff !important;
}

.hsl-background--color-orange {
    color: #FF8C00;
}

.hsl-background--color-red {
    color: red;
}

.hsl-border-color-green {
    border-color: #33cd5f !important;
}

.hsl-border-color-blue {
    border-color: #3357d6 !important;
}

.hsl-border-color-grey {
    border-color: #e0e0e0 !important;
}

.hsl-border-color-dark-grey {
    border-color: #323232 !important;
}

.hsl-border-color-dark {
    border-color: #181818 !important;
}

.hsl-border-color-white {
    border-color: #ffffff !important;
}

.hsl-border--color-orange {
    color: #FF8C00;
}

.hsl-border--color-red {
    color: red;
}

.hsl-font {
    font-family: Arial, Helvetica, sans-serif;
}

/***** links and buttons ******/
a.hsl-button,
a:link.hsl-button,
a:hover.hsl-button,
a:visited.hsl-button,
a:active.hsl-button {
    text-decoration: none !important;
    color: #323232 !important;
}

a.hsl-button-solid,
a:link.hsl-button-solid,
a:hover.hsl-button-solid,
a:visited.hsl-button-solid,
a:active.hsl-button-solid {
    text-decoration: none !important;
    color: #ffffff !important;
}

a,
a:link,
a:visited,
a:active {
    text-decoration: none;
    color: #3357D6;
}

a:hover {
    color: #323232;
    text-decoration: underline;
}

a.linkinmenu,
a:link.linkinmenu,
a:visited.linkinmenu,
a:active.linkinmenu {
    text-decoration: none;
    padding-top: 12px;
}

a:hover.linkinmenu {
    text-decoration: none;
    padding-top: 12px;
    color: #3357D6 !important;
}

a.hsl-linkinsidebar,
a:link.hsl-linkinsidebar,
a:visited.hsl-linkinsidebar,
a:active.hsl-linkinsidebar {
    text-decoration: none;
}

a:hover.hsl-linkinsidebar {
    text-decoration: none;
    color: #3357D6 !important;
}

/*
i.linkinmenu {
    padding-top: 12px;
}
*/
i:hover.hsl-linkinmenu {
    /*padding-top: 12px;*/
    color: #3357D6 !important;
}

/****** lists *****/
ul {
    padding: 9px;
    margin: 9px;
    text-align: left !important;
    list-style-type: disc;
}

ol {
    padding: 9px;
    margin: 9px;
    text-align: left !important;
}

ol li {
    color: #323232;
    /*color: red; */
}

ul li {
    color: #323232;
    /*color: red; */
}

li span {
    color: #323232;
}

/****** misce *****/
.hsl-bold {
    font-weight: bold !important;
}

div.hsl-mobilemenuicon {
    vertical-align: bottom !important;
    text-align: center;
}

div.hsl-mobilemenutitle {
    font-size: 8px;
    vertical-align: top !important;
    text-align: center;
}

div.hsl-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

p,
div {
    text-align: left;
}

footer div {
    text-align: center;
}

hr.hsl-programcard {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #323232;
    margin: 1em 0;
}

/* for youtube display  */
.hsl-iframe-container {
    overflow: hidden;
    padding-top: 56.25%;
    position: relative;
}

.hsl-iframe-container iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

/* for homepage image side-by-side with text */
.hsl-homepage-image {
    width: 100%;
    height: auto;
}

@media (min-width:601px) {
    .hsl-homepage-image {
        width: 100%;
    }
}

@media (min-width:993px) {
    .hsl-homepage-image {
        width: 50%;
    }
}

/* overall page padding on or off */
.hsl-content-with-padding {
    padding: 10px;
}

.hsl-content-no-padding {
    padding: 0;
}

/* for float image display */
.hsl-image-left {
    float: left;
}

.hsl-image-right {
    float: right;
}

/* for div tag containing floating image */
.hsl-clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/********************** backward-compatible with old app design *******************/
/*  general  */
.hsl-black {
    color: #323232;
}

.hsl-grey {
    color: #e0e0e0;
}

.hsl-green {
    color: #33cd5f;
}

.hsl-yellow {
    color: yellow;
}

.hsl-orange {
    color: #FF8C00;
}

.hsl-red {
    color: red;
}

.hsl-blue {
    color: #3357d6;
}

#busyicon {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    margin: -50px 0px 0px -50px;
    display: block;
    max-width: 150px;
    max-height: 150px;
}

@media only screen and (max-height:400px) {
    .landnoshow {
        display: none;
    }
}

/*
.hsl-card {
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 8px;
    margin-bottom: 8px; 
}
*/
.material-icons.md-60 {
    font-size: 60px;
}

.material-icons.md-72 {
    font-size: 72px;
}