/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 50px;
  padding-bottom: 20px;
  background-image: url(../images/background/bicycle.jpg);
  
                  position: relative;
                     background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      background-attachment: fixed;
        display: table;
        min-height: 100vh;
        width: 100%;
     
}



.navbar-form {
    padding:0;
    margin:0;
}

#login, #time-out{
 margin-top: 2%;
        background: #fff;
        position: relative;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 0 15px rgba(0,0,0,.8);
        box-shadow: 0 0 15px rgba(0,0,0,.8);
        max-width: 350px;
        padding: 26px 26px 15px 26px;
        width: 100%;
        margin: 0 auto;
        padding:26px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group input{
    height:40px;
    border:1px solid #7f7f7f;
    margin-bottom: 16px;
}

.btn{
    display:block;
}

form button.btn{
    margin: 0 auto;
}

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

#login h1{
    font-size:18px;
    text-align:center;
    margin-bottom: 10px;
    

}

#login form {
   
    padding-top: 15px;
    padding-bottom: 15px;
/*border-bottom : 1px solid #ccc;
border-top : 1px solid #ccc;*/
margin-bottom: 10px;
}

#login  .shimano-logo {
    display: block;
    width:150px;
    height: auto;
    margin: 0 auto;
}

.pet-list-item blockquote {
    color: #999;
    padding: 0 10px;
}

.pet-list-item img {
    max-width: 100%;
    max-height: 200px;
    margin-bottom: 10px;
}

.my_picture {
    max-width: 100%;
    max-height: 200px;
    margin-bottom: 10px;
}

.container.singleMessage{
padding-top:20px;
}

#message-wrapper {
    max-width: 900px;
    width:100%;
    margin:0 auto;
}

#message-wrapper .col-lg-4 {
    width:100%;
}

#message-wrapper .col-lg-4:not(:last-child) {
    border-bottom:1px solid black;
}

.messageHeader{
    text-align:center;
    background:#333333;
    color:#fff;
    padding:8px 0;
    font-size:20px;
}

.singleMessage h1 {
    text-align:center;
    background:#333333;
    color:#fff;
    padding:8px 0;
}

.singleMessage div:first-of-type {
    border: 1px solid #333;
    padding:16px;
}

.singleMessage h2{
    text-align:left;
}

.date{
    font-style: italic;
}

a#backButton, a#editButton {
    text-decoration: none;
    background: #428bca;
    padding:8px 16px;
    color:#fff;
    border-radius:5px;

}

a#backButton:hover, a#editButton:hover {
    background : #3276b1;
}

.user-info{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
}

.user-info p{
    color:white;margin:0 8px 0 0; 
    display:table-cell;
    vertical-align: middle;
  }
  
 .logout-button{ 
    text-align:center;
    display: inline-block;
    background: white;
    padding:4px 2px;width:80px;
    border-radius: 5px; 
 }  

.login-error{
    top:0;
    left:0;
    position: fixed;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index: 9999999;
}

.error-content{
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:250px;
    background:white;
    padding:20px;
    border-radius: 5px;
    text-align: center;
}

.error-content p{
    text-align: left;
} 

#popup-close{
    background: #47a447;
    background: #5cb85c;
    color:white;
    padding:4px 8px;
    display:inline-block;
    margin:0 auto;
    border-radius: 5px;
    cursor: pointer;
}

#popup-close:hover {
    background: #47a447;
}

footer{
    padding:16px;
}

@media screen and (min-width : 700px) {
.singleMessage .multiColumn{
column-count: 2;
column-gap:32px;
    }
}

@media screen and (min-width : 769px) {
    .messageHeader{
        font-size:26px;
    }
}

@media screen and (min-width:768px) and (max-width: 991px)
{
    .container.singleMessage{
        margin-top:50px;
    }
}

..video-js.vjs-fluid, .video-js.vjs-16-9 {

    max-width: 600px!important;}

    /* Tooltip container */