/**
 * Theme Name:     rjCar
 * Author:         Mohsen Javadi
 * Template:       twentytwentythree
 * Text Domain:	   rjcar
 * Description:    Perfect tracking system
 */


@import url('base-files/iransansfont/css/fontiran.css');

:root {
	--text-light-color: #FFFFFF;
	--brand-color: #AD010D;
	--background-dark-color: #16273B;
}

body {
	font-family: IRANSans !important;
	font-weight: 300;
	direction: rtl;
	background-color: #E2E2E2;
	margin: 0;
}

h1, h2, h3, h4, h5, h6,input, textarea, .leaflet-popup-content {
	font-family: IRANSans !important;
}

h1 {
	font-weight: bold;
}

#nav-bottom {
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1030;
	position: fixed;
	border-radius: 1rem 1rem 0 0;
	background-color: var(--background-dark-color);
}
.page-content {
	display: none;
}
#nav-bottom button {
	border: 0;
	outline: none;
	color: var(--text-light-color);
	cursor: pointer;
	transition: 0.3s;
	font-size: 25px;
	margin: 0.3rem auto;
	border-radius: 0.65rem;
	padding: 0.5rem 1rem;
	background: transparent;
}
#nav-bottom button.act {
	background-color: var(--brand-color);
}
#nav-bottom button:hover {
	box-shadow: 0px 0px 20px 1px var(--brand-color) inset;
}
#leaflet-map {
	width: 100%;
	height: 100%;
	position: absolute;
}
#top-left-buttons {
	left: 0;
}
#top-right-buttons {
	right: 0;
}
#top-left-buttons,
#top-right-buttons {
	z-index: 1001;
	position: fixed;
	padding: 6px 12px;
	top: 0;
	display: flex;
	flex-direction: column;
}
#top-left-buttons button,
#top-left-buttons>a,
#top-right-buttons button,
#top-right-buttons a {
	border: 0;
	width: 45px;
	opacity: 0.8;
	height: 45px;
	outline: none;
	display: flex;
	font-size: 23px;
	cursor: pointer;
	transition: 0.3s;
	align-items: center;
	margin: 0.3rem auto;
	border-radius: 2rem;
	text-decoration: none;
	justify-content: center;
	background: transparent;
	color: var(--text-light-color);
	background-color: var(--brand-color);
}
#top-left-buttons button.act,
#top-left-buttons button:hover,
#top-left-buttons a.act,
#top-left-buttons a:hover,
#top-right-buttons button.act,
#top-right-buttons button:hover,
#top-right-buttons a.act,
#top-right-buttons a:hover {
	opacity: 1;
	transition: 0.3s;
	animation: heartbeat 1s infinite;
}
@keyframes heartbeat {
	0% {
		box-shadow: var(--brand-color) 0 0 0 0;
	}
	80% {
		box-shadow: #ff280000 0 0 0 10px;
	}
}

#top-left-buttons li,
#top-right-buttons li {
	cursor: pointer;
}
#top-left-buttons li .act,
#top-right-buttons li .act {
	font-size: 22px;
}
#top-left-buttons .dropend .dropdown-toggle::after,
#top-right-buttons .dropend .dropdown-toggle::after {
	display: none;
}
#replayMonitor {
	z-index: 1002;
	position: fixed;
	padding: 6px 12px;
	width: 100%;
	max-width: 400px;
	left: 0;
	bottom: 0;
	border-top-right-radius: 0.5rem;
	transition: 0.8s;
}
.leaflet-popup-content {
	margin: 16px 5px 5px 5px;
}
.leaflet-popup-close-button {
	display: none;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
	color: var(--text-light-color) !important;
	background-color: var(--background-dark-color) !important;
}
.leaflet-container a {
    color: var(--text-light-color) !important;
}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: center;
	border-radius: 1rem;
}
.remote-v2 {
	text-align: center;
	margin: 0 auto;
	width: 180px;
}
.remote-v2 .remote-v2-top {
	position: relative;
	width: 100%;
}
.remote-v2 .remote-v2-top img {
	width: 180px;
    height: auto;
	opacity: 0.6;
	border-radius: 1rem;
}
.remote-v2 .remote-v2-top-tl {
	position: absolute;
	top: 0;
	left: 0;
	border-top-left-radius: 1rem;
}
.remote-v2 .remote-v2-top-tr {
	position: absolute;
	top: 0;
	right: 0;
	border-top-right-radius: 1rem;
}
.remote-v2 .remote-v2-top-br {
	position: absolute;
	bottom: 0;
	right: 0;
	border-bottom-right-radius: 1rem;
}
.remote-v2 .remote-v2-top-bl {
	position: absolute;
	bottom: 0;
	left: 0;
	border-bottom-left-radius: 1rem;
}
.remote-v2 .remote-v2-bottom {
	width: 100%;
	padding: 7px;
	min-width: 180px;
	max-width: 600px;
	margin: 5px auto;
	border-radius: 1rem;
}
.remote-v2 button, .remote-v2 a {
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
	text-decoration: none;
	color: var(--text-light-color);
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	width: 50%;
	height: 50%;
	border: none;
	box-shadow: inset 0 0 10px 0px rgb(255 255 255 / 20%);
}
.remote-v2 button i, .remote-v2 a i {
	font-size: 1.6rem;
	margin: 3px 8px;
}
.remote-v2 button span, .remote-v2 a span {
	width: 100%;
}
.remote-v2 button:active, .remote-v2 a:active {
	box-shadow: inset 0px -3px 7px 3px rgb(0 216 255 / 40%);
	color: rgb(0 184 255);
}
.remote-v2 button:focus, .remote-v2 a:focus {
	outline: none !important;
}
	
#manage-devices section,
#accordionFaqs section {
	padding: 0;
	border-radius: 0.7rem;
	margin: 0.4rem 0 0.2rem 0;
	background: #f3f3f3;
	box-shadow: 0px 1px 7px 0px #b5b5b5ab;
}
#manage-devices section>button,
#accordionFaqs section>button {
	padding: 0.5rem 1rem;
	border-radius: 0.7rem;
	background: #fdfdfd;
	margin: 0;
}
#manage-devices section>button:not(.collapsed),
#accordionFaqs section>button:not(.collapsed) {
	color: #0f1b72;
	font-weight: bold;
}
	
.sms-command {
	display: flex;
	color: var(--text-light-color);
	cursor: pointer;
	border-radius: 2rem;
	margin-bottom: 1rem;
	text-decoration: none;
	background-color: var(--background-dark-color);
	box-shadow: 0px 3px 9px 0px var(--brand-color);
}
.sms-command:hover {
	color: var(--brand-color);
	background-color: var(--text-light-color);
	box-shadow: 0px 3px 4px 0px var(--background-dark-color);
}
.sms-command .sms-number {
	flex-shrink: 1;
	padding: 0.5rem;
	font-weight: bold;
	padding-right: 1rem;
	border-left: 2px solid #41464b73;
}
.sms-command .sms-info {
	width: 100%;
	padding: 0.5rem;
}

#update-modal {
	display: none;
	position: fixed;
	z-index: 1031;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background: rgb( 0 0 0 / 20% );
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
#update-modal-content {
	top: 50%;
	left: 50%;
	width: 250PX;
	padding: 20px;
	position: absolute;
	border-radius: 1rem;
	background-color: #fff;
	-ms-transform: translate( -50% , -50% );
	transform: translate( -50% , -50% );
	box-shadow: 0px 5px 20px 0px rgb(0 0 0);
}
#update-btn {
	outline: none;
	cursor: pointer;
	border: none;
	padding: 0.4rem 0.2rem;
	width: 100%;
	border-radius: 1rem;
	text-decoration: none;
	background: transparent;
	color: var(--text-light-color);
	background-color: var(--brand-color);
	animation: heartbeat 1s infinite;
}
.leaflet-control-layers {
	display: none;
}