.mosaic-container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    height:70vh;
    margin-top:103px;
}
.tile-left
{
    grid-column: span 3;
    grid-row: span 3;
    position:relative;
}
.tile-right
{
    grid-column: span 2;
    position:relative;
    top: 0;
    bottom: 0;
    margin: auto;
    width:100%;
    text-align:center;
}
.tile-about
{
    position:relative;
    top: 0;
    bottom: 0;
    margin: auto;
}
.frontIcon
{
    width:auto; 
    height:9vw;
}

.mosaic-containerM {
    display:none;
}

#header {
    height: 10em;
    /* box-shadow: 0 0 0.25em 0 rgba(179, 190, 127, 1); */
    box-shadow: none;
    border-bottom: solid 4px #B3BE7F;
}

#footer{
    /* border-top: solid 4px #B3BE7F; */
}

#header nav {
    height:auto;
    top:auto;
    bottom: 0;
}

h2
{
    display: inline-block;
    position: relative;
    z-index: 0;
    color:#fff;
    margin-left:5px;
    margin-bottom:0;
    padding: 0.5em 2em;
}

h2::before {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    /* border: 2px solid #ddd; */
    background-color: #B3BE7F;
    transform: skewX(-10deg);
    z-index: -1;    
}
h2:after
{
    border-bottom:none;
}
h3 {
display: inline-block;
position: relative;
z-index: 0;
padding: 0em 0em;
    background-color: #bfcb87;
}
h3:after
{
    border-bottom:none;
}
.content
{
    background-color:#fff;
    padding: 50px;    
    border: solid 4px #B3BE7F;
    border-top-right-radius:50px 50px;
    border-bottom-left-radius:50px 50px;
}
.form-control {
    border: solid 1px #BFCB87;
}
.form-control:focus {
    border-color: #7B93CD;
    box-shadow: 0 0 0 0.25rem rgba(123, 147, 205, 0.25);
}
.input-group-text {
    /* background-color: #e9ecef; */
    background: rgba(191,203,135,0.3);
    border: 1px solid #BFCB87;
}

#logo
{
    width:auto; 
    height:80%; 
    margin-top:15px;
}

.bstreeview {
    border:none;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #7B93CD;
    --bs-btn-border-color: #7B93CD;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}




#header nav > ul > li a {
    color: #4D4D4D;
}

/*
#headerF {
background-color: #fff;
box-shadow: none;
font-family: "Raleway", Helvetica, sans-serif;
font-weight: 500;
height: 3.5em;
left: 0;
line-height: 3.5em;
position: fixed;
text-transform: uppercase;
top: 0;
width: 100%;
z-index: 10000;
height: 10em;
}

#headerF h1 {
height: inherit;
left: 1.5em;
line-height: inherit;
margin: 0;
padding-bottom: 0;
position: relative;
}
#headerF h1 a {
color: inherit;
}
#headerF nav {
height: inherit;
line-height: inherit;
position: absolute;
right: 1.5em;
top: 0;
}
#headerF nav {
height: auto;
top: auto;
bottom: 0;
}
#headerF nav > ul {
list-style: none;
margin: 0;
padding: 0;
}
#headerF nav > ul > li:first-child {
margin-left: 0;
}
#headerF nav > ul > li {
display: inline-block;
margin-left: 2em;
padding: 0;
}
#headerF nav > ul > li a {
text-decoration: none;
border-bottom: 0;
}
*/


#main {
    padding: 10em 0 4em 0;
    background: url('/assets/img/front/background.png');
    background-size: 100%;
    background-repeat: repeat-y;
    min-width:100%;
    border-bottom: solid 4px #B3BE7F;
}
#mainL {
    padding: 10em 0 4em 0;
    background: url('/assets/img/front/background.png');
    background-size: 100%;
    background-repeat: repeat-y;
    border-bottom: solid 4px #B3BE7F;
}
a{
    border-bottom:none;
}
.tile-right-inner
{
    text-align:right;
    color: #ffffff;
    text-shadow: 0px 0px 10px #213653;
    font-size:36px;
    font-weight:bold;
    font-family: Montserrat, sans-serif;
    line-height:1.4em; 
    padding:40px; 
    background-color:#BFCB87;
    border-radius: 30px;
    border: 1px solid #D7E596; 
    overflow:auto;
}
.tile-right-inner-text
{
    float:right;
    color:#fff;
    position:absolute; 
    bottom:40px; 
    right: 40px;
}
.tile-about-inner
{
    text-align:right;
    color: #ffffff;
    text-shadow: 0px 0px 10px #213653;
    font-size:30px;
    font-weight:bold;
    font-family: Montserrat, sans-serif;
    line-height:1.4em; 
    padding:40px; 
    background-color:#BFCB87;
    border-radius: 30px;
    border: 1px solid #D7E596;
}
#loginEmail {
    /* font-family: Poppins-Medium; */
    font-family: "微軟正黑體", "Microsoft JhengHei", 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #666666;
    display: block;
    width: 100%;
    background: #e6e6e6;
    height: 50px;
    border-radius: 25px;
    padding: 0 30px 0 68px;
}
#loginPWD {
    /* font-family: Poppins-Medium; */
    font-family: "微軟正黑體", "Microsoft JhengHei", 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #666666;
    display: block;
    width: 100%;
    background: #e6e6e6;
    height: 50px;
    border-radius: 25px;
    padding: 0 30px 0 68px;
}

.regTitle
{
    text-align:right;
}
.regTitleL
{
    text-align:left;
}
.btn-mod
{
    background-color: #FFF;
    color:orange !important; 
    font-size:1em;
    box-shadow: inset 0 0 0 1px orange !important;
    margin: 0.5em;
}
.btn-add
{
    background-color: #FFF;
    color:#0053a0 !important; 
    font-size:1em;
    box-shadow: inset 0 0 0 1px #0053a0 !important;
    margin: 0.5em;
}
.btn-suc
{
    background-color: #FFF;
    color:#198754 !important; 
    font-size:1em;
    box-shadow: inset 0 0 0 1px #0053a0 !important;
    margin: 0.5em;
}


@media screen and (max-width: 1100px) {
    .mosaic-containerM {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        height:78vh;
        margin-top:93px;
    }
    #researchersImg
    {
        width:auto;
        height:37vh;
        margin-top:2vh;
    }
    .researchersM
    {
        grid-column: span 3;
        grid-row: span 3;
        position:relative;
        width:100%;
        text-align:center;
    }

    .tile-leftM
    {
        grid-column: span 2;
        position:relative;
        top: 0;
        bottom: 0;
        margin: auto;
        width:100%;
        text-align:center;
    }
    .tile-rightM
    {
        grid-column: span 2;
        position:relative;
        top: 0;
        bottom: 0;
        margin: auto;
        width:100%;
        text-align:center;
    }
    .tile-aboutM
    {
        position:relative;
        top: 0;
        bottom: 0;
        margin: auto;
        width:100%;
        text-align:center;
    }
    .frontIconM
    {
        width:auto; 
        height:13vh;
    }
    .aboutIconM
    {
        width:auto; 
        height:13vh;
    }

    .mosaic-container {
        display: none;
    }

}

@media screen and (max-width: 980px){
    .wrapper > .inner > * {
        width:auto;
        padding-left:inherit !important;
    }
    .content {
        padding: 25px;
        border-top-right-radius: 25px 25px;
        border-bottom-left-radius: 25px 25px;
    }
    #header
    {
        height:auto;
    }

    #logo
    {
        max-width:80%;    
        height:auto; 
        margin-top:15px;
    }
    .regTitle
    {
        text-align:left;
    }
    #main {
        width: fit-content;
    }
}

@media screen and (max-width: 420px){
    
    .mosaic-containerM {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        height:78vh;
        margin-top:55px;
    }
    #researchersImg
    {
        width:auto;
        height:37vh;
        margin-top:2vh;
    }
    .researchersM
    {
        grid-column: span 3;
        grid-row: span 3;
        position:relative;
        width:100%;
        text-align:center;
    }

    .tile-leftM
    {
        grid-column: span 2;
        position:relative;
        top: 0;
        bottom: 0;
        margin: auto;
        width:100%;
        text-align:center;
    }
    .tile-rightM
    {
        grid-column: span 2;
        position:relative;
        top: 0;
        bottom: 0;
        margin: auto;
        width:100%;
        text-align:center;
    }
    .tile-aboutM
    {
        position:relative;
        top: 0;
        bottom: 0;
        margin: auto;
        width:100%;
        text-align:center;
    }
    .frontIconM
    {
        width:46vw; 
        height:auto;
        margin: 0 2vw;
    }
    .aboutIconM
    {
        width:23vw; 
        height:auto;
        margin: 0 1vw;
    }
}