/*
 Theme Name:   ReconEcoCams
 Description:  Theme for Recon Eco Cams
 Author:       Dynasoft2000
 Author URI:   http://dynasoft2000.com
 Template:     aasta
 Version:      2000
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
*/
@font-face {
   font-family: 'NinjaTurtles-Regular';
   src: url('css/fonts/NinjaTurtles-Regular.otf');
}

body{
	background-color: black;
}

*{
	font-family: 'NinjaTurtles-Regular';
}

input, select, option{
	font-family: Arial, sans-serif !important;
}

.woocommerce_account_subscriptions{
	overflow-x: scroll;
}
#tgwc-woocommerce > .woocommerce-MyAccount-content
{
	width: auto !important;
}

.custom-logo
{
	max-height: 82px;
}
.navbar-header-wrap.classic-header.not-sticky
{
	background-color: #292b32 !important;
}


a, #fullpage a.aBack{
    color: #80A315;
}

select{
	appearance: menulist;
	-webkit-appearance: caret;
}

.theme-page-header-area{
    /* height: 700px;
    padding-top: 615px; */
    background-position-y: 58px;
	 background-color: black;
}

.theme-page-header-area .overlay{
    background-color: rgba(0,0,0,0);
}

body,  input, select, textarea{
    color:#fff;
}

button,.woocommerce button.button.woocommerce-Button, .woocommerce-button.button.woocommerce-form-login__submit {
	color:#000;
}

.checkout_coupon.woocommerce-form-coupon .form-row button.button
{
	height: auto;
}

button.less-padding, #qr-reader__camera_permission_button{
	padding: 15px;
    height: auto;
}

.uploadgallery > .container{
	padding-top: 15px;
}

.overlay {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: contain;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-color: black;
  touch-action: none;
}

.btn-container{
	margin-bottom: 1.2rem;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.btn-icon-container{
	margin-bottom: 1.2rem;
	display: flex;
	justify-content: end;
}
.btn-icon-container-left{
	margin-bottom: 1.2rem;
	display: flex;
	justify-content: start;
}

.btn-reconeco{
	padding: 0;
}

.btn-reconeco > i.icon-reconeco{
	height: 30px;
    width: 30px;
}

.btn-reconeco > i.icon-reconeco{
    top: 3px;
    position: relative;
}

.btn-reconeco.active > i.icon-reconeco:before{
	background-image:url(css/images/cam-icon-negative-64px.png);
	background-color: #80A315;
	background-repeat: no-repeat;
	background-size: 100% 100%;
    display: inline-block;
    width: 100%; 
    height: 100%;
	content:"";
	transition: .3s;
	
}

.btn-reconeco.inactive > i.icon-reconeco:before{
	background-image:url(css/images/cam-icon-positive-64px.png);
	background-color: #80A315;
	background-repeat: no-repeat;
	background-size: 100% 100%;
    display: inline-block;
	width: 100%; 
    height: 100%;
	content:"";
	transition: .3s;
}

.rec-camera, .pic-camera {	
	height: auto;	
}

.accordion, .rec-camera, .pic-camera{
	margin-bottom: 18px;
}	

.accordion.inactive, .rec-camera.inactive, .pic-camera.inactive{
	background-color: #020202;
	color: #80A315;
}

.panel.active{
	margin-bottom: 18px;
}

.my-btn{
	padding: 0.6rem;
	height: auto;
	width: auto;
	min-width: 12rem;
	font-size: 1rem;
	margin: 0 10px;
}
.tab-report{
	margin-bottom: 10px;
}
.divCamShare{
	padding: 10px;
	background-color: black;
}
.divTableContainer
{
	background-color: black;
}

.btn-icon{
	min-width: 4rem;
	font-size: 1.5rem;
	height: auto;
}

.btnCancelGroupHunt, .btnCancelCamShare
{
	margin-top: 5px;
	white-space: nowrap;
}

.margin-bot{
	margin-bottom: 1.2rem;
}

.toggle-share{
	display: flex;
	width: 100%;
	transition: .3s;
}

.toggle-share.inactive{
	background-color: #020202;
    color: #80A315;
}

.toggle-share.active{
	background-color: #80A315;
    color: #020202;
}

.toggle-share.w-input{
	display: flex;
	justify-content: space-between;
}

.toggle-share > input
{
	padding: 0.4rem 0.5rem;
	margin: 0.4rem 0.5rem;
	border: 1px
}

.toggle-share.active > input
{
	color: #020202;
	border: 2px solid #020202;
}
.toggle-share.inactive > input
{
	color: white;
	border: 1px solid white;
}

.toggle-btn-label
{
	font-family: Arial, sans-serif !important;
    max-width: 83%;
    overflow: hidden;
}



/* .my-btn.active{
	background: #fff;
	color: #000;
} */

.my-btn.inactive, button.inactive{
	background-color: #020202;
	color: #80A315;
}

#fullpage #lightbox{
	height: 100%;
}

.lightbox-link{
	padding: 10px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.lightbox-link a{
	font-size: 2.2rem;
	box-shadow: none;
}

.manage-mode{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 15px;
}

.image-unread{
	border:5px solid #80A315;
}

.not-owner.image-unread{
	border: 5px solid silver;
}

.image-selected{
	border:5px solid white !important;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

#qr-reader__dashboard_section_csr > span:first-child
{
	display: none;
}

#qr-reader__dashboard_section_swaplink{
	display: none !important;
}

#html5-qrcode-button-camera-permission{
	height: auto;
}

/* Style the buttons that are used to open the tab content */
button.w3-bar-item.w3-button.tablinks button {
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  margin: 8px;
}

/* Change background color of buttons on hover */
button.w3-bar-item.w3-button.tablinks:hover, button.w3-bar-item.w3-button.tablinks.active {
  background-color: #fff;
  color: #000;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.page-select a.gallery-page-link{
	height: auto;
	width: auto;
	background-color: #80A315;
	color: white;
  	padding: 8px 16px;
	text-decoration: none;
}

.page-select a.gallery-page-link.active, .page-select a.gallery-page-link:hover{
	background-color: white;
	color: black;
}

.img-header h5{
	font-size: 1rem;
}

.img-cam{
	display: none;
	text-align: left;
}

.img-container{
	margin-bottom: 3px;
}

#imgs-container{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 10px;
	align-items: end;
}

.tdStatus{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/*slider*/
.bx-wrapper{
	background-color: #000;
	border: 5px solid black;
	min-height: 93%;
	margin-bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.slide{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.bx-wrapper .lightbox
{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bx-wrapper img{
    object-fit: contain;
    max-height: 84vh;
}

.flex-column
{
	display: flex;
	flex-direction: column;
}

.flex-row-spaced
{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.row
{
	margin-bottom: 10px;
}
.justify-right{
	justify-self: end;
}
.grid-nogap{
	display: grid;
}

.grid{
	display: grid;
	grid-gap: 10px;
}

.align-right
{
	text-align: right;
}
.align-left
{
	text-align: left;
}

.accordion.active:focus, .rec-camera.active:focus, .pic-camera.active:focus	
{	
	background-color: #80A315;	
	color: black;	
}	

.accordion:focus, .rec-camera:focus, .pic-camera:focus	
{	
	background-color: #020202;	
	color: #80A315;	
}

.rpt-accordion{
	height:auto;
}

.flex-wrap{
	flex-wrap: wrap;
}

.btn-container button{
	margin-bottom: 5px;
}

.panel {
	display: none;
}

.indented{
	margin-left: 50px;
}

.panel.active {
	display: block;
}

a:focus, a:hover{
	color: #80A315;
}

button:focus{
	background-color: inherit;
	color: inherit;
}

button.active:focus, button:hover, button.my-btn:focus,button.active:focus{
	background-color: #80A315;
	color: black;
}
button.inactive:focus{
	background-color: black;
	color: #80A315;
}

.my-btn:focus, .btn-setting:focus{
	background-color: #80A315;
	color: black;
}

.my-btn.inactive:focus{
	background-color: #020202;
	color: #80A315;
}

#tlight{
	background-color: #292b32;
}
h3.termstitle {
    background-color: #80A315;
    color: #ffffff;
}

#wp-terms-popup-after-content.sticky{
	background-color: #000;
}

.woocommerce-MyAccount-content
{
	 background-color: black;
	padding: 25px 0;
}

.woocommerce-orders-table__cell-order-number
{
	background-color: #292b32 !important;
}

.time-on{
	display: none;
}
.ui-timepicker-list{
    font-size: 1.6rem;
}

.toggle-btn i, .notif-toggle-btn i{
    font-size: 1.5rem;
}

.ui-timepicker-list{
	background-color: #000;

}

.ui-timepicker-list li{
	color: #80A315;
}

li.ui-timepicker-selected
{
	background-color: #80A315;
	color: black;
}

.loading	
{	
	filter: opacity(0.5); 	
	animation: pulse 2s infinite;	
}	

table.striped tr:nth-child(2n+1){
	background-color: #f1f1f1;
}
table.striped tr:nth-child(2n){
	background-color: #ffffff;
}

.mytblcontainer{
	height: 500px; 
	background: white; 
	overflow-y: scroll; 
	border:1px solid black;
}

.tgwc-woocommerce-customize-my-account #tgwc-woocommerce[data-menu-style=sidebar] ul li.woocommerce-MyAccount-navigation-link.is-active a
{
	color: white;
}

@keyframes pulse {	
	0% {	
		color:#b30000;	
	}	
	25% {	
		color:#a77d7d;	
	}	
	50% {	
		color:#c7c7c7;	
	}	
	75% {	
		color:#a77d7d;	
	}	
	100% {	
		color:#b30000;	
	}	
}

/* 769px and down*/
@media only screen and (max-width:769px)
{
	.woocommerce #place_order_top, .woocommerce-page #place_order_top{
		float: none;
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 1em;
		color: white;
	}
	.ui-timepicker-wrapper{
		/* left: 5% !important;
		width: 90% !important; */
		max-height: 250px;
	}
	.custom-logo
	{
		max-height: 40px;
	}
	.container{
		max-width: none;
	}
	.woocommerce .woocommerce-MyAccount-content{
		width: 100% !important;
	}

	.theme-page-header-area{
		height: 175px;
		padding-top: 94px;
	}

	section.theme-block.theme-blog.theme-bg-grey
	{
		padding-top: 1.875rem;
	}

	.woocommerce nav.woocommerce-MyAccount-navigation{
		font-size: 1.4rem;
		text-align: center;
		width: 100% !important;
		margin-bottom: 10px;
	}

	.hide-mobile{
		display: none;
	}

	.post-content{
		padding: inherit;
	}

	.img-cam{
		text-align: left;
	}

	#imgs-container{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 5px;
	}

	#imgs-container.manage-mode{
		grid-gap: 17px;
	}

	#divManageImages{
		position: fixed;
		bottom: 0px;
		width: 100%;
		left: 0;
		background-color: #34363e;
		margin: 0;
		padding: 10px 85px 10px 10px;
		z-index: 998;
		flex-wrap: nowrap !important;
	}

	.btn-container .my-btn{
		margin-bottom: 5px;
		width: 100%;
	}

}