/* ############################## */
/* GENERIC STYLES */
/* ############################## */

html { scroll-behavior: smooth; }
html, body { height: 100%; width: 100%; }
body { font-size: .9rem; }   
 
h1 { font-size: 1.5rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1.0rem; }


hr { margin-top: 1.1rem; margin-bottom: 1rem; }

a, a:hover,a:visited, a:focus { text-decoration:none; }

@media (max-width: 1200px) {  
	body { font-size: 17px; }    
	h1 { font-size: 34px; }
}
@media (max-width: 974px) { 
	body { font-size: 16px; } 
	h1 { font-size: 32px; }
}
@media (max-width: 734px) {  
 	body { font-size: 15px; }
	h1 { font-size: 28px; }
}
@media (max-width: 558px) {   
	h1 { font-size: 26px; }
}





/* ############################## */
/* DAF STYLES */
/* ############################## */

.center { text-align: center; }
.tar { text-align: right; }
.tal { text-align: left; }

.sepsm { height: 15px; }
.sepmd { height: 30px; }
.seplg { height: 45px; }
.nopadding { padding: 0px; }

.h-100 { height: 100%; }
.w-100 { width: 100%; }

.hidden-desktop { display: none; }
.hidden-phone { display: block; }

@media (max-width: 974px) { 
	.tar, .tal { text-align: center; }
	.hidden-desktop { display: block; }
	.hidden-phone { display: none; }
}





/* ############################## */
/* GALLERY STYLES */
/* ############################## */

.imageGallery img {
	background: #fff;
	padding: 10px;
	-webkit-box-shadow: 0px 5px 10x 0px rgba(0,0,0,0.25); 
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25);
}

.admin .live { }
.admin .snapshot { border: 1px solid #ff0000 !important; }
.admin .timeshot { border: 1px solid #0000ff !important; }

.imageGallery .frame { padding: 15px; }
.carousel-item { }
#carousel-example { margin: 15px -15px; }

@media (max-width: 576px) {   
	.imageGallery img { max-height: 500px; }
}





/* ############################## */
/* LAYOUT HEADER STYLES */
/* ############################## */

.fullheader { 

	padding-left: 15px; 
	padding-right: 15px; 
	border-bottom: 1px solid #fff;
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 5px 10x 0px rgba(0,0,0,0.25); 
}
.site-header { line-height: 1; padding: 30px 0px; }
.fullheader .logo { max-width: 340px; }
.site-footer .logo { max-width: 320px; }

@media screen and (max-width: 1200px) {
	.fullheader .logo { margin-bottom: 20px; }
}





/* ############################## */
/* LAYOUT FOOTER STYLES */
/* ############################## */

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    line-height: 40px;
    background-color: #f5f5f5;
	text-align: center;
	border-top: 1px solid #fff;
	-webkit-box-shadow: 0px -5px 10x 0px rgba(0,0,0,0.25); 
	box-shadow: 0px -5px 10px 0px rgba(0,0,0,0.25);
}
.copyright {
	color: #666;
	font-size: .6rem; 
	font-style: italic;
}
.copyright a {
	color: #666;
}
.copyright a:hover {
	color: #888;
}





/* ############################## */
/* WEBCAM RESULTS LIST STYLES */
/* ############################## */

.results { border-top: 1px solid #ebebeb; margin-bottom: 15px; }
.result { position: relative; border-bottom: 1px solid #ebebeb; padding: 15px 10px; cursor: pointer; }
.result:hover { background: #fafafa; }
.result-image { border: 1px solid #ddd; width: 100%; height: 120px; object-fit: cover; -webkit-box-shadow: 0px 5px 10x 0px rgba(0,0,0,0.15); box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.15); }
.result-title { color: #007bff; font-size: 17px; font-weight: 400; margin: 0 0 10px 0; }
.result-subtitle { font-size: 13px; color: #757575; margin: 2px 0 0 0; font-weight: normal; }
.result-description { width: 100%; font-size: 13px; margin: 2px 0 0 0; }
a .result-description { color: #000; }
.result:hover .result-url { color: #007bff; }
.result:hover h2 {  }
.result-url { width: 100%; font-size: 13px; color: #aaa; margin: 2px 0 0 0; }
.result-categories { color: #aaa; font-style: italic; font-size: 12px; margin: 2px 0 0 0; line-height: 18px; }
.result-categories a { color: #aaa; }
.result-sun { font-size: 12px; color: #757575; margin-top: 5px; }
.result-sun img { margin-left: 5px; margin-top: -4px; }
.result-last-checked { font-size: 12px; color: #757575; margin: 2px 0 0 0; }
.result-last-checked .fa { margin-left: 5px; }
.result-last-online { font-size: 12px; color: #757575; margin: 2px 0 0 0; }
.result-last-online .fa	{ margin-left: 5px; }
.result-featured-badge { color: #d45c5a; }

.snapshot-image { 
	-webkit-box-shadow: 0px 5px 10x 0px rgba(0,0,0,0.10); box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.10); '
	width: 100%; object-fit: cover;
	height: 50px;
	border: 1px solid #ddd; 
}
.snapshot-image:not(.cthumb) { 
}
.snapshot-label { font-size: 9px; display: block; margin-bottom: 5px; }

.snapshot-container { }
.snapshots-dir { }

.timedsnapshot {  }
.mainsnapshot {  }
.feedjpg {  }

.corner { position: absolute; top: -5px; left: 10px; width: 74px; height: 60px; }
.maincam-corner { position: absolute; top: -7px; left: -7px; width: 100px; height: 85px; }


@media (max-width: 974px) { 
	.result-title { margin-top: 20px; }
	.result-last-checked, .result-last-online { margin-top: 10px; margin-bottom: 20px; }
	.result-image { height: 280px; }
	.result-url { display: none; }

	.snapshot-image:not(.cthumb) { 
		height: 115px;
	}
	.snapshot-container { margin-top: 20px;}

	.snapshots-dir { flex-direction: row; }
}





/* ############################## */
/* WEBCAM INDIVIDUAL CAMERA PAGE STYLES */
/* ############################## */

.caminfo { border: 1px solid #ddd; padding: 15px; -webkit-box-shadow: 0px 5px 10x 0px rgba(0,0,0,0.15); box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.15); }
.caminfo h2 { }
.camera-subtitle { margin: 0px; }
.camera-description { font-size: 15px; margin-top: 10px; }
.camera-categories { font-size: 12px; margin-top: 10px; }
.camera-categories a { color: #000 }
.camera-sun { font-size: 14px; color: #757575; margin-top: 15px; }
.camera-sun img { margin-top: -4px; margin-right: 5px; }
.camera-weather { font-size: 14px; color: #757575; margin-top: 10px; }
.camera-impressions { font-size: 14px; color: #757575; margin-top: 10px; }
.camera-last-checked { font-size: 13px; color: #757575; margin-top: 10px; }
.camera-last-checked .fa { margin-right: 5px; }
.camera-last-online { font-size: 13px; color: #757575; }
.camera-last-online .fa	{ margin-right: 5px; }
.camera-nearby {  }
.camera-nearby-header { font-size: 18px; background: #000; color: #fff; padding: 8px 10px; }
.camera-nearby-list { margin: 0px; padding: 0px; }
.camera-nearby-item { width: 100%; list-style-type: none; margin-bottom: 3px; }
.camera-mapframe { -webkit-box-shadow: 0px 5px 10x 0px rgba(0,0,0,0.15); box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.15); border: 1px solid #ddd; }
.camera-maincam-container { position: relative; /* height: 100%; */ } 
.camera-maincam-container #playbutton { position: absolute; width: 80px; height: 80px; top: 0px; left: 0px; x-index: 999999; top: 40%; left: 50%; transform: translate(-50%); display: none; } 
.camera-maincam-container #maincam { 

	position: relative; 
	width: 100%; 
	height: 100%; 
	object-fit: contain; 
	cursor: pointer; 
	background: #000; 
	-webkit-box-shadow: 0px 5px 10x 0px rgba(0,0,0,0.15); 
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.15); 
	margin-bottom: 10px; 
	border: 1px solid #ddd; 
}

@media (max-width: 974px) { 

	.comments,
	.leave-comment	{ border: 1px solid #ddd; padding: 15px; margin-bottom: 25px; -webkit-box-shadow: 0px 5px 10x 0px rgba(0,0,0,0.15); box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.15); }
}

.comments {
}
.comments h3 {
}

.leave-comment {
}
.leave-comment h3 {
}
.leave-comment label {
	font-size: 14px;
}


.comment { 
	border: 1px solid #ddd;
	padding: 10px;
	font-size: 13px;
	border-radius: 5px;
	margin: 0 0 10px 0;
}

.comment-name { float: left; width: 48%; font-style: italic; color: #888; }
.comment-date { float: right; width: 48%; text-align: right; font-style: italic; color: #888;  }
.comment-comment { font-size: 15px; }








/* ############################## */
/* WEBCAM STATUS UNDICATORS STYLES */
/* ############################## */

.fa.on { color: #00cc00; }
.fa.off { color: #bbb; }
.fa.error { color: #cc0000; }
.fa.invalid { color: #cc0000; }
.fa.unknown { color: #ffcc00; }
.fa.new { color: #00ccff; }





/* ############################## */
/* WEBCAM PAGINATION STYLES */
/* ############################## */

.paginaterow .col .form-control,
.paginaterow .col-md-3 .form-control { border-radius: 0px; }
.paginaterow .col-md-3 { margin-right: -1px; }
.paginaterow .col:first-child .form-control, 
.paginaterow .col-md-3:first-child .form-control { 
	border-top-left-radius: .25rem;
	border-bottom-left-radius: .25rem;
}
.paginaterow .col:nth-last-child(2) .form-control:not(button), 
.paginaterow .col:last-child .form-control,
.paginaterow .col-md-3:last-child .form-control { 
	border-top-right-radius: .25rem;
	border-bottom-right-radius: .25rem;
}

.paginaterow .col:last-child button.form-control,
.paginaterow .col-md-3:last-child button.form-control { }
.paginaterow .col .form-control,
.paginaterow .col-md-3 .form-control { outline: 0px; }

.bottom-pagination { margin-top: 15px; margin-bottom: 0px; padding-bottom: 0px; }
.page-link { border: 1px solid #ced4da; }

.paginate-floatright { float: right; width: 100%; }
.paginate-floatleft { float: left; width: 100%; }	

.activefilter { background: #cceeff; }
.clearfilter { background: #ffcccc; }
.filterelement { height: 40px; font-size: 11px; border-radius: 0px; }

@media (max-width: 974px) { 
	.paginate-floatright { float: none; display: inline-block; margin-top: 15px; width: 100%; }
	.paginate-floatleft { float: none; display: inline-block; width: 100%; }
	.bottom-pagination .pagination { margin-bottom: 15px; }
	.paginaterow .col .form-control { border-radius: 0px !important; }
	.paginaterow .col-md-3 .form-control { border-radius: 0px !important; }
	.paginaterow .col-md-3 { margin-right: 0px; }
}





/* ############################## */
/* WEBCAM CATEGORY LIST STYLES */
/* ############################## */

.catlist { margin: 0px -5px; padding: 0px; }
.catlist li { 
	list-style-type: none;
	display: inline-block;
	width: calc(25% - 10px);
	margin: 5px;
	background: #007bff;
	padding: 5px;
	text-align: center;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 600;
	border-radius: 4px;
	color: #fff;
}
.catlist li:first-child { background: #ff5b00; }
.catlist li:hover { background: #007bdd; }
.catlist a { display: block; color: #fff; }

@media (max-width: 974px) { 
	.catlist li { width: calc(50% - 10px); }
}
@media (max-width: 558px) { 
	.catlist li { width: calc(100% - 10px); }
}





/* ############################## */
/* WEBCAM LOCATION PAGE AND LIST STYLES */
/* ############################## */

.locations { text-transform: uppercase; }
.locations a { display: block; }
.locations h2 { background: #000; padding: 7px 10px; color: #fff; border-radius: 4px; }
.locations h2 a { color: #fff; }
.locations h3 a { color: #fff; }
.locations li a { color: #000; }
.locations h2 a:hover { color: #007bff; }
.locations h3 a:hover { color: #ccc; }
.locations li a:hover { color: #007bff; }
.locations .col-md-3 { padding-bottom: 15px; }
.country h2 { margin-top: 20px; }
.state {
	text-transform: uppercase;
	font-weight: 600;
	height: 100%;
}
.state h3 { 
	background: #007bff;
	padding: 5px;	
	border-radius: 4px;
	color: #fff;
}
.state ul { margin: 0px; padding: 0px; }
li.city { list-style-type: none; font-size: 11px; }

.locations-small { text-align: center; ext-transform: uppercase; }
.locations-small h3 a { color: #fff; }
.locations-small h3 a:hover { color: #007bff; }

ul.countries { margin: 0px; padding: 0px; }
ul.countries > li { list-style-type: none; }
ul.countries li h2 { margin-top: 15px; }

ul.states { margin: 0px; padding: 0px; }
ul.states > li { 
	list-style-type: none; 
	list-style-type: none;
	display: inline-block;
	width: calc(25% - 10px);
	margin: 5px;
	background: #007bff;
	padding: 5px;
	text-align: center;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 600;
	border-radius: 4px;
	color: #fff;
}
ul.states li h3 { }

ul.cities { margin: 0px; padding: 0px; }
ul.cities > li {
	font-size: 10px;
}





/* ############################## */
/* WEBCAM MISC STYLES */
/* ############################## */

.fullbar { background: #000; color: #fff; padding: 15px 20px; margin: 10px -20px; text-transform: uppercase; }
.fullbar h2 { margin: 0px; }

.standout { color: #d45c5a; }
.h1-right { float: right; margin-top: 10px; }
.fullscreen { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: contain; z-index: 999999; }

#searchform input, #searchform button { outline: 0px; box-shadow: none; border-color: #bbb; }





/* ############################## */
/* GOOGLE AD STYLES */
/* ############################## */

.adbox { }
.adsbygoogle {  }





.topmenu { background: #000; color: #fff; padding: 10px 0; }

.admin-nav-item {
	list-style-type: none;
	display: inline-block;
	margin: 0 5px;
	font-size: 13px;
	text-transform: uppercase;
}
.admin-nav-item a {
	color: #fff;
	padding: 5px;
}
.admin-nav-item.active a, .admin-nav-item:hover a {
	color: #007bff;
}



/* ############################## */
/* DESKTOP MENU STYLE */
/* ############################## */

.fullmenu { 
	background: linear-gradient(to bottom, #333 50%, #222 0%);
	border-bottom:1px solid #fff; 
	-webkit-box-shadow: 0px 5px 10x 0px rgba(0,0,0,0.25); 
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25);
	border-bottom: 1px solid #fff;
}

.navbar-nav { text-align: center; width: 100%; }
.nav-link { font-size: .8rem; text-transform: uppercase; }
.navbar-toggler-icon { border: 0px; outline: 0px; }

.desktopmenu { margin: 0px; padding: 0px; border: 0px; box-shadow: none; background: none; }
.desktopmenu .nav-item {
	display: inline-block;
	height: 50px;
	line-height: 50px;
	margin: 0 1px 0 1px;
}
.desktopmenu .nav-item > a { 
	display: block;
	color: #fff;
	padding: 0 15px;
	text-decoration: none;
	font-size: 13px;
	text-transform: uppercase;
	white-space: nowrap;
}

.nav-item.active { background: linear-gradient(to bottom, #007bff 50%, #006bef 0%); color: #fff; }
.nav-item.active a { color: #fff; }
.nav-item.active .dropdown-item { color: #fff; }
.nav-item.active .dropdown-item.active { color: #fff; }
.nav-item:hover { background: linear-gradient(to bottom, #007bff 50%, #006bef 0%); color: #fff; }
.nav-item:hover a { color: #fff; }
.nav-item .dropdown-item:hover { color: #fff; }

.desktopmenu .dropdown-menu { border: 0px; margin-top: 0px; border-radius: 0px; background: #000; padding: 0px; width: 320px; }
.desktopmenu .dropdown-menu a { 
	text-decoration: none;
	font-size: 13px;
	text-transform: uppercase;
	color: #fff;
}
.desktopmenu .dropdown-item {
	display: block;
    height: 40px;
    line-height: 40px;
	background: #000;
	padding: 0 0 0 20px;
}
.desktopmenu .dropdown-menu hr { margin: 0px; padding: 0px; display:none; }
.desktopmenu .dropdown-menu hr:not(:last-child) { }
.desktopmenu .dropdown-menu hr:last-child { display: none; }
.desktopmenu .dropdown-item { border: 1px solid #000;  }
.desktopmenu .dropdown-item:not(:last-child) { }
.desktopmenu .dropdown-item.active { border: 1px solid #000;  }
.desktopmenu .dropdown-item.active, .desktopmenu .dropdown-item:active { background-color: #007bff; color: #fff; }
.desktopmenu .dropdown-item:hover { background: #007bff; color: #fff; border: 1px solid #000;  }

#sidebar .dropdown-item.active, .dropdown-item:active { background-color: #007bff; color: #fff; }

.dropdown-toggle::after { display: none; }

@media screen and (max-width: 990px) {
	.desktopmenu { display: none; }
}





/* ############################## */
/* MOBILE MENU STYLE */
/* ############################## */

#sidebar {
    width: 250px;
    position: fixed;
    top: 0;
    left: -250px;
    height: 100vh;
    z-index: 999;
    background: #000;
    color: #fff;
    transition: all 0.3s;
    overflow-y: scroll;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
	z-index: 9999;
}
#sidebar-tog { z-index: 9999; }
#sidebar.active { left: 0; }
#sidebar .sidebar-header {
    padding: 20px;
    background: #007bff;
}
#sidebar ul.components { padding: 0px; }
#sidebar ul p { color: #fff; padding: 10px; }
#sidebar ul li a {
 	font-size: 1em;
	display: block;
	color: #fff;
	margin-bottom: 1px;
	padding: 8px 12px;
}
#sidebar ul li a:hover { color: #fff; background: #007bff; }
#sidebar ul li.active > a,
#sidebar ul li.active > a[aria-expanded="true"] { color: #fff; background: #007bff; }
#sidebar .dropdown-item:hover { background: #007bff; }

#dismiss {
	padding: 5px;
    text-align: center;
    position: absolute;
	color: #89b1c4;
    top: 5px;
    right: 10px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#dismiss:hover { color: #AD2B2B; }

.overlay {
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.7);
	z-index: 997;
	opacity: 0;
	transition: all 0.5s ease-in-out;
}
.overlay.active {
    display: block;
    opacity: 1;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
.dropdown:hover > .dropdown-menu, .dropdown-menu:hover { display: block; }

.menu-tog-button { 

	border: 0px; 
	z-index: 998; 
	background: none; 
	box-shadow: none; 
	position: absolute; 
	padding: 0px; 
	margin: 0px; 
	top: 7px;
	left: 9px;
	display: none;
}
.fa-arrow-left, .fa-bars { color: #007bff; }

a[data-toggle="collapse"] { position: relative; }

@media screen and (max-width: 990px) {
	.menu-tog-button { display: block; transition: all 0.3s; }
}





/* ############################## */
/* MISC STYLES */
/* ############################## */

.smaller { font-size: .7rem; font-style: italic; }

.white { color: #fff; }
.lightgray { color: #ddd; }

.loader {
	border: 2px solid #f3f3f3; /* Light grey */
	border-top: 2px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 20px;
	height: 20px;
	animation: spin 1s linear infinite;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.button, input[type='submit'] { 
	background: #007bff;
	padding: 10px 22px;
	text-align: center;
	color: #fff;
	border-radius: 5px;
	text-transform: uppercase;
	border: 0px;
}
.button:hover { 
	background: #005bcf;
	color: #fff;
}





/* ############################## */
/* MEDIA QUERIES */
/* ############################## */

/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {  
}

/* Large devices (desktops, 976px and up) */
@media (max-width: 974px) { 
}

/* Medium devices (tablets, 750px and up) The navbar toggle appears at this breakpoint */
@media (max-width: 734px) {  
}

/* Small devices (landscape phones, 558px and up) */
@media (max-width: 558px) {   
}