/*! www.motorwaycameras.co.uk */

@media (prefers-color-scheme: dark) {

	body {
	    /*! Background */
	    background-color: #000000;
	    color: #dddddd;

	    /*! 
	    background-image: url("https://static.roadcams.co.uk/images/backgrndrepeat.jpg");
	    */

	    /*! Pad content downwards to allow for top navbar */
	    padding-top: 60px;
	    padding-bottom: 20px;
	}



	/*! Login page */
	.loginpage {
		display: inline-block; 
		position: relative; 
		top: -10px; 
		background-color: #222222; 
		padding: 0px 10px
	}


    /*! Forms */
    .form-control {
	    background: #222222;
	    border-color: #313131;
    }


	/*! Table borders */
	table.table-bordered > tbody > tr > td{
	    border:1px solid #313131;
	}


	/*! Horizontals */
	hr {
	    border-color: #313131;
	}


	/*! Wells */
	.well {
	    background: #222222;
	    border-color: #313131;
	    border-radius: 10px;
	    margin-left: -5px;    
	    margin-right: -5px;   
	    margin-bottom: 8px;    
	}

	/*! Well Menu Links */
	.wellmenulink {
	    color: #dddddd;
	    text-decoration: none !important;
	}


	/*! Well Headings */
	.wellheading {
	    margin-top: 0px;
	    color: #728ab8;
	}

	/*! Well Table List */
	.welltablelist {
	    background: #222222;
	    border-color: #313131;
	    margin-left: -10px;    
	    margin-right: -10px;    
	    margin-bottom: 8px;    
	}


	/*! Alerts */
	.alert {
	    border-radius: 10px;
	}


	/*! Social */
	.product-social-links {
	    line-height: 10px;
	}


	/* Responsive maps - REF: stackoverflow.com/questions/15668762/using-google-map-with-bootstrap-but-responsive-doesnt-work */
	.map_container{
	    position: relative;
	    width: 60%;
	    padding-bottom: 33.75%; /* Ratio 16:9 ( 60%/16*9 = 33.75% ) */
	}
	.map_container .map_canvas{
	    border-radius: 10px;
	    position: absolute;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    margin: 0;
	    padding: 0;
	}
	@media (max-width: 767px) {
	    .map_container{
		position: relative;
		width: 100%;
		padding-bottom: 80%;
	    }
	    .map_container .map_canvas{
		border-radius: 10px;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: 0;
		padding: 0;
	    }
	}



	/*! Camera Auto Refresh */
	.glyphicon-spin {
	    -webkit-animation: spin 2000ms infinite linear;
	    animation: spin 2000ms infinite linear;
	}
	@-webkit-keyframes spin {
	    0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	    }
	    100% {
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	    }
	}


	/*! Footer */
	footer {
	  color: #dddddd;
	}



	/*! Navbar */
	.navbar-custom {
	  background-color: #222222;
	  border-color: #313131;
	}
	.navbar-custom .navbar-brand {
	  color: #dddddd;
	}
	.navbar-custom .navbar-brand:hover,
	.navbar-custom .navbar-brand:focus {
	  color: #35789a;
	}
	.navbar-custom .navbar-text {
	  color: #dddddd;
	}
	.navbar-custom .navbar-nav > li > a {
	  color: #dddddd;
	}
	.navbar-custom .navbar-nav > li > a:hover,
	.navbar-custom .navbar-nav > li > a:focus {
	  color: #35789a;
	}
	.navbar-custom .navbar-nav > li > .dropdown-menu {
	  background-color: #4A6394;
	}
	.navbar-custom .navbar-nav > li > .dropdown-menu > li > a {
	  color: #dddddd;
	}
	.navbar-custom .navbar-nav > li > .dropdown-menu > li > a:hover,
	.navbar-custom .navbar-nav > li > .dropdown-menu > li > a:focus {
	  color: #35789a;
	  background-color: #a5b5bd;
	}
	.navbar-custom .navbar-nav > li > .dropdown-menu > li > .divider {
	  background-color: #a5b5bd;
	}
	.navbar-custom .navbar-nav .open .dropdown-menu > .active > a,
	.navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover,
	.navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
	  color: #35789a;
	  background-color: #a5b5bd;
	}
	.navbar-custom .navbar-nav > .active > a,
	.navbar-custom .navbar-nav > .active > a:hover,
	.navbar-custom .navbar-nav > .active > a:focus {
	  color: #35789a;
	  background-color: #a5b5bd;
	}
	.navbar-custom .navbar-nav > .open > a,
	.navbar-custom .navbar-nav > .open > a:hover,
	.navbar-custom .navbar-nav > .open > a:focus {
	  color: #35789a;
	  background-color: #a5b5bd;
	}
	.navbar-custom .navbar-toggle {
	  border-color: #a5b5bd;
	}
	.navbar-custom .navbar-toggle:hover,
	.navbar-custom .navbar-toggle:focus {
	  background-color: #a5b5bd;
	}
	.navbar-custom .navbar-toggle .icon-bar {
	  background-color: #dddddd;
	}
	.navbar-custom .navbar-collapse,
	.navbar-custom .navbar-form {
	  border-color: #dddddd;
	}
	.navbar-custom .navbar-link {
	  color: #dddddd;
	}
	.navbar-custom .navbar-link:hover {
	  color: #35789a;
	}
	@media (max-width: 767px) {
	  .navbar-custom .navbar-nav .open .dropdown-menu > li > a {
	    color: #dddddd;
	  }
	  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
	  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
	    color: #35789a;
	  }
	  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a,
	  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover,
	  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
	    color: #35789a;
	    background-color: #a5b5bd;
	  }
	}

}