@font-face {
    font-family: 'AmpleSoft Pro';
    src: url('AmpleSoftPro-Regular.eot');
    src: local('AmpleSoftPro-Regular'),
        url("") format('embedded-opentype'),
        url("/jakarta.faces.resource/ample/AmpleSoftPro-Regular.woff2.xhtml?ln=font") format('woff2'),
        url("/jakarta.faces.resource/ample/AmpleSoftPro-Regular.woff.xhtml?ln=font") format('woff'),
        url("/jakarta.faces.resource/ample/AmpleSoftPro-Regular.ttf.xhtml?ln=font") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'opensans';
    font-style: normal;
    font-weight: 400;
    src: url("/jakarta.faces.resource/opensans/opensans-regular-webfont.eot.xhtml?ln=font");
    src: local('opensans'),
        local('opensans-regular-webfont'),
        url("/jakarta.faces.resource/opensans/opensans-regular-webfont.eot.xhtml?ln=font?#iefix") format('embedded-opentype'),
        url("/jakarta.faces.resource/opensans/opensans-regular-webfont.woff2.xhtml?ln=font") format('woff2'),
        url("/jakarta.faces.resource/opensans/opensans-regular-webfont.woff.xhtml?ln=font") format('woff'),
        url("/jakarta.faces.resource/opensans/opensans-regular-webfont.ttf.xhtml?ln=font") format('truetype');

}
html,body,h1,h2,h3,h4,h5 {
    font-family: 'AmpleSoft Pro','opensans','STIX2Math', sans-serif
}
/*.w3-bar-item{text-align:left!important}*/
.w3-bar-item:hover{
    text-decoration: none
}
.main-menu{
    z-index:4;
    width:200px;
    margin-top: 10px;
    left:0;
    border-right: 1px solid cadetblue;
}
.sidebar{
    z-index:3;
    width:250px;
    margin-top: 10px;
    right:0
}
.user-menu{
    z-index:4;
    width:150px;
    right:0;
    height:80px;
    border:1px solid indigo;
    margin-top:40px;
}
.main-content{
    margin-left:50px;
    margin-right:50px;
    margin-top:40px;
}
.brand-logo{
    background-position: left;
    text-indent: 30px;
    margin-left: 8px;
}

.leaf-right {
    position: relative;
    width: 150px;
    height: 100px;
    -moz-border-radius: 60px 0px 30px 0px;
    -webkit-border-radius: 60px 0px 30px 0px;
    border-radius: 60px 0px 30px 0px;
    border: 1px solid #A0DE21;
    text-align: center;
    margin: 8px;
    float: left;
}
.leaf-left {
    position: relative;
    width: 150px;
    height: 100px;
    -moz-border-radius:  0px 40px 0px 60px;
    -webkit-border-radius:  0px 40px 0px 60px;
    border-radius:  0px 40px 0px 60px;
    border: 1px solid #A0DE21;
    text-align: center;
    margin: 8px;
    float: right;
}
.flex-container {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap
}
#searchMain{
    width: 100%;
    position: relative;
    overflow: auto;
    margin: 0 auto;
    display: flex;
    border: 1px solid silver;
    border-radius: 24px;
    padding: 4px 4px 4px 20px;
    max-width: 600px
}
#searchMain input[type='text']{
    float:right;
    width:100%;
    border: none
}
#searchMain .search-button{
    width:40px;
    border-radius: 50%;
    border: none;
    padding: 8px 12px;
    float: left
}
#searchMain .reset-button{
    background-color: silver;
    width:20px;
    height:20px;
    border-radius: 50%;
    border: none;
    padding: 4px 4px;
    float: left
}
#searchBar {
    position: relative;
    overflow: auto;
    margin: 0 auto;
    display: flex;
    border: 1px solid silver;
    border-radius: 16px;
    padding: 2px 2px 2px 8px;
    width:100%;
    max-width: 360px;
    float: right
}
#searchBar input[type='text']{
    float:right;
    height:24px;
    width:100%;
    border: none;
    padding: 0px !important;
    margin: 0px !important
}
#searchBar .search-button{
    width:24px;
    height:24px;
    border-radius: 50%;
    border: none;
    padding: 3px 6px;
    float: left
}
.select-item > span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    padding: 0px 3px;
    text-align: right;
}
.select-item > span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    padding: 0px 3px;
    text-align: left;
}