/* Whole page styles */
html,
body {
    margin: 0;
    padding: 0;
    font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
    /* height: 100%; */
    line-height: 1.5;
    background-color:  floralwhite; /* This is the Main Screen background colour*/ /* #D8D8D8 */

    /*background-image: url('images/Coach.jpg'); */  /* This is the main screen background image */
    /*background-size: 75% ; */
    /*background-position: top left bottom right;*/

}


.image {

    opacity: 0.4;
    filter: alpha(opacity=60);
}

.main-content {
    width:90%;        /* 70%;    IFE 19 April 2018   Changed this to reduce the size of the side margins across the application*/
    margin:auto;
}

.notes-field {
    padding-top:10px;
    height: 150px;
}

.back-link {
    text-align: center;
    margin-top:15px;
}

.sub-menu {
    padding-top: 50px;
    text-align: center;
}

/* Nav bar styles */
.top-nav {
    /*background: -webkit-linear-gradient(#4c4f5b, #2f313a);*/
    /* background: -webkit-linear-gradient(maroon, yellow); */ /* This is the line (next to the logo) that goes the entire way across the screen */

    background: -webkit-linear-gradient(maroon, #d3a6a6); /* This is the line (next to the logo) that goes the entire way across the screen */
    border-bottom: solid 1px #474747;
}

.left-menu img {
    /*padding: 10px;*/
    padding: 0px;           /* This is the margin around the image on the menu - is applied right across the page */


}

@media only screen and (max-width: 600px) {
    .main-content {
        width: 90%;
        margin:auto;
    }

    .left-menu img {
        display: block;
        margin: 0 auto;

    }
}

.welcome-container {
    display: block;
    width: 100%;
}

.welcome-menu {
    text-align: right;
    padding-right: 15px;
    margin-bottom: 20px;
    display: block;
    width: 100%;
    /*background-color: yellow;*/ /* On Home Screen, this is the line that the Welcome, Ian (Admin) Logout text is on */
    background-color: #ecd9d9; /* On Home Screen, this is the line that the Welcome, Ian (Admin) Logout text is on */
}

/* Footer nav Styles */
footer {
  text-align: center;
  height: 50px;
  margin-top: -50px;
}

footer .footer-info {
    border-top: solid 1px #4c4f5b;
    padding-top: 5px;
    padding-bottom: 5px;
}

/** login box styling **/

#login-box {
    width: 300px;
    height: 360px; /*Use this to change the height of the Login box - IFE 8 Apr 2018*/
    background-color: #800000; /* #F5F5F5; */ /*Use this to change the background of the login box - IFE 8 Apr 2018*/
    margin: 0;
    padding: 0;
    /* center the div */
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -165px; /*half height */
    margin-left: -150px; /*half width */
    border: 2px solid #d1d7d9;
    border-radius: 6px;
}

#login-form {
	  text-align: center;
	  width: 300px;   /* was 300px */
	  padding-top: 20px;
	  padding-bottom: 10px;
}

#login-form h2 {
  color: #12aad9;   
}

#login-form input[type=text], #login-form input[type=password] {
	width: 200px; 
	height: 50px;
	margin-top: 20px;
	padding-left: 15px;
	border-radius: 3px;
}

#login-form input[type=submit]{
	margin-top:30px;
	width: 230px;
	height: 35px;
	margin-left:-5px;	
}


#WelcomeTo {              /* Login screen Welcome to Busstop */
    color: white;
}

#Version {                /* Login screen Version info */
    color: white;
    font-style: italic;
}


#PasswordEdit { /* Login screen Version info */
    color: black;
    font-style: italic;
}



/** Home page Styling*/

#home-main-content, #home-messages, #home-reminder, #bday-reminder, #calendar-reminder {
    padding-bottom: 3em;
    text-align: center;
}

#home-main-content {
    margin-top:0%;    /*7%;*/
}

#home-reminder h3 {
    font-weight: bold;
    color: #a01023;
}

#bday-reminder h3 {
    font-weight: bold;
    font-style: italic;
    /** color: #ff00ff; */
    color:#ff0000;
}

#Student-Count h3 {
    text-align: center;
}






#calendar-reminder h3 {
    font-weight: bold;
    font-style: italic;
    color: #328737;
}

.message-date {
    color:#17499b;
    font-style:italic;
}

.message-calendar {
    color: #328737;
    font-style: italic;
}

.sandpit {
    background-color: #5eeb34;
}

.sandpitbackground {
    background-color: #d1edca;
}


.img {
    max-height: 500px;
    max-width: 500px;
    height: auto;
    width: auto;
}


/** Index Page styles (All pages, lists) */
.heading {
    text-align: center;
}

.clear-float {
    clear:both;
}

.index-button-group {
    margin-top: 15px;
    margin-bottom: 15px;
    float: right;
}

.info-table {
    text-align: left;
}
	
 /** RELATED DETAILS STYLING **/

.client-subsection, .schedule-subsection {
    padding-top: 30px;
    text-align: center;
}

/** FORM STYLING **/

.edit-content, 
.delete-content,
.details-content {
    text-align:center;
}

.edit-form, .unedit-form {
    width: 100%;
    margin: 0 auto;
    line-height: 1.5;
}

.edit-form .btn, .unedit-form .btn {
    margin-top: 10px;
    padding-left: 30px;
    padding-right: 30px;
}

.edit-content .form-group, 
.delete-content .form-group,
.details-content .form-group{
    width: 50%;
    margin: 0 auto;
}

.form-group {
    padding-top:5px;
    padding-bottom:5px;
}

.custom-horizontal-form {
    display: inline;
}

.btn-custom-form-submit {
    margin-top:15px;
}

/** MOBILE FORM STYLING*/
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    .edit-content .form-group, 
    .delete-content .form-group,
    .details-content .form-group,
    .timesheets-content .form-group
     {
        width: 80%;
    }
}

/** Table Styling **/
th:last-child,
td:last-child {
    text-align: right;
}


/** Mobile Table Styling **/
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    .collapsed-table {
        table-layout: fixed;
        width: 100%;
        padding-top: 15px;
    }

        /* Force table to not be like tables anymore */
        .collapsed-table table, .collapsed-table thead, .collapsed-table tbody, .collapsed-table th, .collapsed-table td, .collapsed-table tr {
            display: block;
        }

            /* Hide table headers (but not display: none;, for accessibility) */
            .collapsed-table thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

        .collapsed-table tr {
            border: 1px solid #ccc;
        }

            /* Zebra striping */
            .collapsed-table tr:nth-of-type(odd) {
                background: #eee;
            }

        .collapsed-table th {
            font-weight: bold;
        }

        .collapsed-table td {
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;
            height: 45px;
            white-space: normal;
            word-wrap: break-word;
        }

            .collapsed-table td:before {
                /* Now like a table header */
                position: absolute;
                /* Top/left values mimic padding */
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
            }

    .headcol {
        position: absolute;
        width: 5em;
        left: 0;
        top: auto;
        border-top-width: 1px;
        /*only relevant for first row*/
        margin-top: -1px;
        /*compensate for top border*/
    }
}

/*
Label the data
*/
.collapsed-table td:before { 
    content: attr(data-title); 
    font-weight: bold;
}



/* The following items added to enable the fixed header and left columns on a table (e.g. Generated Schedule )*/
.scrollable-table table{
    position: relative;
    width: 1245px;
    background-color: #aaa;
    overflow: hidden;
    border-collapse: collapse;
}

/*thead*/
.scrollable-table  thead {
    position: relative;
    display: block; 
    width: 1245px;
    overflow: visible;
}

.scrollable-table thead th {
    background-color: lightgray;

    min-width: 120px;

    height: 50px;   /* was 32 - adjusted this for the top left cell which was still showing some grey */
    border: 1px solid #222;
}

.scrollable-table thead th:nth-child(1) { /*first cell in the header*/
    position: relative;
    display: block; /*seperates the first cell in the header from the header*/
    background-color: white;
}


/*tbody*/
.scrollable-table tbody {
    position: relative;
    display: block; /*seperates the tbody from the header*/
    width: 1460px;  /*1245px;*/
    height:  450px; /*239px;*/
    overflow: scroll;
}

.scrollable-table table tbody td {
    /*background-color: white;  /*#bbc;*/

    width: 300px; /* was 300px; IFE 28 May */
    min-width: 120px; 

    border: 1px solid #222;
}

.scrollable-table tbody tr td:nth-child(1) { /*the first cell in each tr*/
    position: relative;
    display: block; /*seperates the first column from the tbody*/
    height: 105px;     
    width: 120px; /* Was 120px; - changed by IFE 28 May */

    background-color: white;  /*#99a;*/
}

#my-table {
    width: 100%;
}
    /*or whatever width you want*/
    #my-table td {
        width: 2000px;
        align-content:center;
    }
/*something big*/

.divider {
    width: 5px;
    height: auto;
    display: inline-block;
}

.double {
    width: 100px;
    height: 100px;
}




/* HEARBEAT */
.heartbeat {
    position: absolute;
    display: none;
    margin: 5px;
    color: red;
    right: 0;
    top: 0;
}

#logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

    #logo-container > img {
        max-width: 100%;
        border: 1px solid black;
    }