/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
    padding-bottom: 20px;
}
@media (max-width: 992px){
    body{
         padding-top: 0px;
    }
    .TopTitleDiv{
        max-width: 100%;
        padding: 0px;
    }
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 300px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }
    .body-content {
        padding: 0;
    }
}

.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

.text-info
{
    margin:0 0.5em;
}

header{
        background-color:#2056ac;
        background-position:center;
        background-repeat:no-repeat;
        background-size:cover;
        position:relative;
        padding-top:20px;
}
    header >h1{
        margin:0;
    }
    header >h1 >a:hover{
        text-decoration:none;
    }
    header >h1 #title
    {
        font-size:1.5rem;
        color:#fff;
        padding:1em 2em;
        padding-top:2.3em;
        line-height:1.5em;
    }
    header >h1 #title >span{
        font-size:1.2rem;
    }
    header >h1 >img
    {
        position:absolute;
        top:20px;
        left:20px;
        background-color: #fff;
        border-radius: 20px;
    }

/*主要navbar的背景色、a文字顏色*/
header > .navbar{
    /*background-color:#2056ac;*/
    padding:0.3em 0.5em;
    margin-bottom:1em;
}
    header > nav >div > #mainNav a
    {
        color:#777;
    }
    header > nav >div > #mainNav .navbar-nav
    {
        background-color:#fff;
        border-radius:50px;
        padding:0.7em 1em;
    }
    header > nav >div > #mainNav .navbar-nav >li{
        padding:0 0.3em;
    }

    header > nav >div > #mainNav .navbar-nav >li > a{
        padding:0;
        border-bottom:2px solid transparent;
    }
            
    header > nav >div > #mainNav .navbar-nav >li:hover >a
    {
        color:#333;
        border-bottom:2px solid #2056ac;
    }
    header > nav >div > #mainNav .navbar-nav .dropdown-menu >a:hover{
        background-color:#eee;
    }


header > nav #rwd-nav-icon {
        display: none;
        padding:0.2em;
    }

/*登入狀態顯示*/
header  #logout
{
    position:absolute;
    top:0px;
    right:0;
    padding:0 1em;
}
    header  #logout ul{
        flex-direction: inherit;
    } 
    /*文字顏色*/ 
    header  #logout ul >li a,
    header  #logout ul >li span{
        color:#fff;
    }

/*第二條nav的文字顏色*/
.breadcrumb>li>a{
    color:#333 !important;
}
/*button的邊框、背景、文字顏色*/
.btn-outline-success
{
    background-color:#fff;
    border:#2056ac solid 1px;
}
    .text-success,
    .text-success2 
    {
        color:#2056ac !important;
    }
    .btn-outline-success:hover,
    .btn-outline-success:focus{
        background-color:#2056ac;
        border:#2056ac solid 1px;
    }
    .btn-outline-success:focus, .btn-outline-success.focus
    {
        box-shadow: 0 0 0 0.2rem rgba(32, 86, 172, 0.5);
    }
    a.text-success:hover, 
    a.text-success:focus,
    .text-success:hover,
    .text-success:focus,
    .text-success2:hover,
    .text-success2:focus
    {
        color:#fff !important;
    }
    .btn-success 
    {
        background-color:#2056ac;
        border:#2056ac solid 1px;
    }
    .btn-success:hover{
        background-color:#2056ac;
        border:#2056ac solid 1px;
        -webkit-filter:brightness(0.9);
    }
    .btn-outline-success:not(:disabled):not(.disabled):active,
    .btn-outline-success:not(:disabled):not(.disabled).active,
    .show > .btn-outline-success.dropdown-toggle {
    color: #fff !important;
    background-color: #2056ac;
    border-color: #2056ac;
}
    .btn-outline-success:not(:disabled):not(.disabled):active:focus,
    .btn-outline-success:not(:disabled):not(.disabled).active:focus,
    .show > .btn-outline-success.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(32, 86, 172, 0.5);
}
    .border-success
    {
        border-color:#343a40 !important;
    } 
.btn{
    white-space:normal;
}
.loginFormTitle{
    background-color:#1075A5;
}
@media(max-width:992px) {
    header > .navbar{
        padding:0;
    }
    header > nav #rwd-nav-icon {
        display: block;
        margin: 0 0.5em;
    }
    header > nav #logout {
        right: 0;
        position: absolute;
        top: 0;
    }

    header > nav #logout ul {
        flex-direction: row;
    }

    /*header > nav #rwd-nav-icon .navbar-toggler-icon
    {
        background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(11,65, 153, 1);
    }*/
    header >h1 >img{
        margin:0.2em auto;
        position:relative;
        top:10px;
        left:0;
    }

    header >h1 #title
    {
        padding:1em;
    }

/*主要nav RWD*/
    header > nav >div > #mainNav
    {
        position: absolute;
        top: 60px;
        z-index: 10000;
        background-color: #eee;
        width: 100%;
        margin-top: -16px;
    }
    header > nav >div > #mainNav .navbar-nav {
    background-color: transparent;
    border-radius: none;
    padding: 0;
}
    header > nav >div > #mainNav .navbar-nav >li{
        padding:0.7em 1em;
    }
    header > nav >div > #mainNav .navbar-nav >li:hover{
        background-color:#ddd;
    }

    header > nav >div > #mainNav .navbar-nav >li:hover a {
        color: #333;
        border-bottom: 2px solid transparent;
    }
    header > nav >div > #mainNav .navbar-nav >li > a {
        padding: 0;
        border-bottom: 2px solid transparent;
    }
    header > nav >div > #mainNav .navbar-nav .dropdown-menu
    {
        margin:0.5em 0;
        padding:0;
        background-color:transparent;
        border:none;
    }
    header > nav >div > #mainNav .navbar-nav .dropdown-menu >a{
        margin:0.5em 0;
        color: #fff;
    }

    header > nav >div > #mainNav .navbar-nav > li:hover .dropdown-menu >a:hover
    {
        background-color:#fff;
        color:#5F83B3;
    }
}