/* --- 0-root.css --- */
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap');

:root {
		--font-sans: "Teko", sans-serif !important;
		--font-serif: "Libre Baskerville", serif !important;
		--clr-major: rgb(0, 103, 79);
		--clr-minor: rgb(217, 207, 177);
		--clr-wht: #fff;
		--clr-blk: #000;
		--clr-nav-bg: #fff;
		--img-bg: url(img/site/grid_bg_01.webp);
		--clr-btn-bg-lt: #d4d4d4;
		--clr-btn-bg-dk: var(--clr-major);
		--box-shadow: 0 1px 3px 0 #a0a0a0;
		--btn-shadow: 0px 5px 10px -5px #808080;
}

.teko-normal {
  font-family: "Teko", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

/* --- 1-all.css --- */
html {
	font-size: 16px;
	font-family: var(--font-sans);
  font-weight: 300;
  font-style: normal;
}
body {
	margin: 0;
	padding: 0;
	background: var(--clr-blk);
	box-sizing: border-box;
}
.body {
	--s: 50px;
  --c: #191b22;
  --_s: calc(2*var(--s)) calc(2*var(--s));
  --_g: 35.36% 35.36% at;
  --_c: #0000 66%,#20222a 68% 70%,#0000 72%;
  background: 
    radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s), 
    radial-gradient(var(--_g) 0 75%,var(--_c)) var(--s) var(--s)/var(--_s), 
    radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s), 
    radial-gradient(var(--_g) 0 75%,var(--_c)) 0 0/var(--_s), 
    repeating-conic-gradient(var(--c) 0 25%,#0000 0 50%) 0 0/var(--_s), 
    radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s) var(--c);
  background-attachment: fixed;
}
a {
	text-decoration:none;
	color: var(--clr-black);
}

/* --- album.css --- */
.navs {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}
i {
	line-height: 30px !important;
	text-align: center;
}
ul {
	list-style-type: none;
	padding-left: 10px;
}
#filter-icon {
	border-bottom-right-radius: 50%;
}
#hamburger-icon {
	border-bottom-left-radius: 50%;
}
.nav {
	background: #fff;
	color: #000;
	width: 30px;
	height: 30px;
}
.filters {
	background: transparent;
	color: #000;
	width: 200px;
	position: fixed;
	top: 31px;
	left: -200px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
}
.filters-show {
	left: 0px;
}
.filters-list {
	background: #fff;
	color: #000;
	width: 100%;
}
.actions {
	background: transparent;
	color: #000;
	width: 200px;
	position: fixed;
	top: 31px;
	right: -200px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
}
.actions-show {
	right: 0px;
}
.actions-list {
	background: #fff;
	color: #000;
	width: 100%;
}
.uploads {
	padding-top: 50px;
}
.dialog-upload-head {
	& span {
		position: absolute;
    top: 5px;
    right: 5px;
	}
}
.dialog-upload-body {
	padding-top: 40px;
}
main {
	height: 50dvh;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

/* --- footer.css --- */
footer {
	background: #C1B499;
	padding: 80px 0 20px 0;
	& a {
		color: #000;
	}
}
.footers {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: stretch;
	gap: 8px;
	justify-content: space-between;
	width: 80%;
	margin: 0 auto;
	& div:nth-child(1) {
		width: 45%;
	}
	& div:nth-child(2) {
		width: 25%;
		& ul {
			margin-top: 0;
			list-style: none;
			padding-left: 0;
			& li {
				padding: 3px 0;
			}
		}
	}
	& div:nth-child(3) {
		width: 25%;
	}
}
@media only screen and (max-width : 768px) {
	.footers {
		display: block;
		& div {
			width: 100% !important;
			& ul {
				padding-left: 0;
			}
		}
	}
}

/* --- index.css --- */
.login {
	width: 100dvw;
	height: 100dvh;
}
.login-form-wrapper {
	width: 390px;
	background: transparent;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: stretch;
	flex-wrap: wrap;
	align-content: center;
	height: 100%;
  margin: 0 auto;
}
.login-form {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	height: 80%;
	align-items: center;
	& img {
		width: 50%;
		height: auto;
		text-align: center;
		margin-bottom: 30px;
	}
	& div {
		width: 100%;
		display: flex;
		padding-bottom: 10px;
		flex-direction: column;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;
	}
}
.login-input {
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.2;
	color: #333333;
	display: block;
	background: #fff;
	height: 50px;
	border-radius: 25px;
	padding: 0 30px 0 53px;
}
input {
	outline: none;
	border: none;
	font-weight: 600;
}
.login-submit-btn {
	width: 100%;
	font-size: 15px;
	line-height: 1.5;
	color: #e0e0e0;
	height: 50px;
	margin-top: 10px;
	border-radius: 25px;
	background: #008cd9;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 25px;
	&:focus {
		background: var(--clr-blk);
	}
}
#loginMsg {
	color: #ff0000;
}
button {
	outline: none !important;
	border: none;
	font-weight: 600;
}
@media only screen and (max-width : 768px) {
	.login-form-wrapper {
		width: 90%;
		justify-content: flex-start;
	}
}

/* --- loader.css --- */
/* HTML: <div class="loader"></div> */
.stop-loader {
	display: none;
}
.loader {
  position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0px 0px -25px;
	width: 50px;
	height: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid orange;
  
  animation: l7 1s infinite linear;
}
@keyframes l7 {
  50%  {background-position: 10px 15px,-10px 12px,15px 8px}
  100% {background-position: 20px 20px,-20px 10px,20px 0px}
}

/* --- modal.css --- */
body.no-scroll {
  overflow: hidden;
}
.my-modal {
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: stretch;
	position: fixed;
  background-color: rgba(255, 255, 255, 0.8);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  overflow: auto;
	z-index: 3000;
}

.my-modal-content {
  margin-top: 5px;
	display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
  gap: 8px;
	position: absolute;
  width: 90%;
  text-align: center;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.26), 0 26px 52px rgba(0, 0, 0, 0.26);
	& div {
		padding: 12px;
		background-color: #f3f4f6;
		border: 1px solid #d1d5db;
		border-radius: 6px;
		text-align: center;
		width: 47%;
	}
}

.modal-threed {
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
	position: fixed;
  background-color: rgba(255, 255, 255, 0.8);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  overflow: auto;
	z-index: 3000;
}

.modal-threed-content {
  padding-bottom: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	width: 90%;
	height: 80%;
	text-align: center;
	background-color: white;
	border-radius: 5px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.26), 0 26px 52px rgba(0, 0, 0, 0.26);    
}

.modal-threed-head {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	& div:nth-child(1) {
		text-align: left;
    flex-grow: 1;
    padding: 10px 0 0 10px;
	}
	& div:nth-child(2) {
		padding: 2px 2px 0 0;
	}
	& #modal-threed-title {
		text-transform: capitalize;		
	}
}

.modal-threed-body {
  margin-top: 5px;
  width: 98%;
	height: 95%;
  text-align: center;
	& iframe {
		width: 100%;
		height: 100%;
	}
}

.modal-gallery {
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
	position: fixed;
  background-color: rgba(255, 255, 255, 0.8);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  overflow: auto;
	z-index: 3000;
}

.modal-gallery-content {
  padding-bottom: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	width: 90%;
	height: 80%;
	text-align: center;
	background-color: white;
	border-radius: 5px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.26), 0 26px 52px rgba(0, 0, 0, 0.26);    
}

.modal-gallery-head {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	& div:nth-child(1) {
		text-align: left;
    flex-grow: 1;
    padding: 10px 0 0 10px;
	}
	& div:nth-child(2) {
		padding: 2px 2px 0 0;
	}
	& #modal-gallery-title {
		text-transform: capitalize;		
	}
}

.modal-gallery-body {
  margin-top: 5px;
  width: 98%;
	height: 95%;
  text-align: center;
	& iframe {
		width: 100%;
		height: 100%;
	}
}

@media only screen and (max-width : 768px) {
	.modal-threed-body {
		width: 95%;
		height: 95%;
	}
	
	.modal-gallery-body {
		width: 95%;
		height: 95%;
	}
}