@font-face {
    font-family: 'Tajinier';
    src: url('fonts/tajinier-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Tajinier';
    src: url('fonts/tajinier-bold.woff') format('woff');
    font-weight: bold;
    font-style: bold;
}

* {
	box-sizing: border-box;
	font-family: "Tajinier", Sans-serif;
}

html, body {
	height: 100%;
}

body {
	margin: 0;
	display: flex;
	flex-direction: column;
	background: #000;
}

.hidden {
	display: none;
}

ul {
	list-style: circle!important;
	word-wrap: break-word;
  	overflow-wrap: break-word;
}

.error-container {
	padding: 15px;
	background: #7f2222;
	border: 1px solid #ff0000;
	text-align: center;
}

.container {
	display: flex;
	flex: 1;
}

.error-message {
	font-size: 13px;
	font-style: italic;
	color: #fff;
}

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

.content {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;
}

.menu {
	display: flex;
	justify-content: center;
	background-color: #bd9e5a;
	/* border-bottom: 1px solid #bd9e5a; */
	/* text-transform: uppercase; */
}

.menu a {
	color: #fff;
	padding: 10px;
	text-decoration: none;
}

.menu a:hover {
	background: #000;
	color: #fff;
}

.header {
	display: flex;
	padding: 20px;
}

.logo {
	content: url('logo.png');
	height: 200px;
}
.form {
	display: flex;
	width: 100%;
}

.insert {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.insert input {
	margin: 10px 0;
}

.add-image {
	display: flex;
	border: 2px solid #bd9e5a;
	color: #fff;
	background: rgb(189 158 90 / 18%);
	align-items: center;
	margin: 0 0 5px 0;
}

.add-image span {
	background: #bd9e5a;
	padding: 15px;
}

.add-image input::file-selector-button {
	display: none;
}

.form-login {
	max-width: 400px;
	margin: 0 auto 0 auto;
}

.add-image input {
	border: none!important;
	outline: none!important;
	background: transparent!important;
	width: unset!important;
	flex-grow: 1;
}

.select {
	margin: 10px 0;
	width: 100%;
	padding: 15px!important;
	border: 2px solid #bd9e5a;
	background: rgb(189 158 90 / 18%);
	color: #fff;
	outline: none;
	border-radius: 0!important;
}

.add-btn {
	display: flex;
	width: 100%;
	justify-content: flex-end;
	margin: 10px 0;
}

.add-btn button {
	padding: 15px;
}

.form input {
	width: 100%;
	padding: 15px;
	outline: none;
	color: #fff;
	border: 2px solid #bd9e5a;
	background: rgb(189 158 90 / 18%);
}

.form button {
	border: 2px solid #bd9e5a;
	background: #bd9e5a;
	outline: none;
	color: #fff;
}

.images {
	color: #fff;
	padding: 20px 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	overflow-y: scroll;
	flex: 1;
}

.links {
	display: flex;
	color: #fff;
	justify-content: space-between;
	margin: 20px 0;
	border-bottom: 2px solid #bd9e5a;
}

.links a {
	color: #fff;
	background: #bd9e5a;
	text-decoration: none;
	padding: 10px;
}

.image {
	padding: 5px;
	height: 200px;
	width: calc(100% / 6);
}

.image a {
	display: block;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    text-decoration: none;
    height: 100%;
    width: 100%;
}

.reponse {
	color: #bd9e5a;
	text-align: center;
}

/* *::-webkit-scrollbar {
	background: transparent;
	color: blue;
} */

.conn-btn {
	width: 100%;
	margin: 10px 0;
}

.conn-btn button {
	padding: 15px;
	width: 100%!important;
}

.simplemenu {
	display: flex;
	justify-content: flex-end;
}

.simplemenu a {
	color: #fff;
	background: #bd9e5a;
	text-decoration: none;
	padding: 5px 10px;
}

.s-logo {
	height: 80px!important;
}

.media_content {
	display: flex;
	flex: 1;
	justify-content: center;
    align-items: center;
	margin: 0 0 30px 0;
	background: #221d10;
}

.media_left {
	display: flex;
	/* border-right: 1px solid #bd9e5a; */
	padding: 20px;
	justify-content: center;
	align-items: center;
	background: #221d10;
}

.media_left img {
	width: auto;
	max-height: 600px;
}

.media_left video {
	width: auto;
	max-height: 600px;
}

.media_details {
	display: flex;
	flex-direction: column;
	color: #fff;
	padding: 20px;
}

.img-info {
	display: flex;
	flex-direction: column;
	background: #221d10;
    padding: 20px;
}

.img-more {
	color: #bd9e5a;
	line-height: 2;
	width: 100%;
}

.media_left, .media_details {
	width: 50%;
	margin: 10px 0;
}

.img-download {
	display: flex;
	width: 100%;
}

.img-control {
	display: flex;
	align-items: center;
	margin: 0 0 10px 0;
}

.img-control a {
	text-decoration: none;
	color: #bd9e5a;
}

.img-control button {
	color: #fff;
	padding: 5px 10px;
	background: #9a0f0f;
	outline: none;
	border: none;
}

.admin-img {
	justify-content: space-between;
}

.admin-img a {
	color: #bd9e5a;
	text-decoration: none;
}

.user-img {
	justify-content: flex-start;
}

.user-img a {
	color: #bd9e5a;
	text-decoration: none;
}

.img-download button {
	width: 100%;
	padding: 15px;
	color: #fff;
	background: #bd9e5a;
	outline: none;
	border: 1px solid #bd9e5a;
}

.all-users {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.single-user {
	display: flex;
	flex-direction: column;
	padding: 10px;
	justify-content: center;
	align-items: center;
}

.single-user a {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	text-align: center;
	height: 170px;
	width: 130px;
	justify-content: space-between;
	align-items: center;
	background: rgb(189 158 90 / 20%);
	border-radius: 6px;
}

.admin-star {
	content: url('admin-star.svg');
	height: 15px;
	margin: 0 5px 0 0;
}

.cat-folder {
	content: url('folder.svg');
	height: 60px;
	margin: 38px 0 0 0;
}

.add-cat {
	justify-content: center!important;
}

.single-user a span {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #bd9e5a;
	color: #fff;
	padding: 5px;
	width: 100%;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}

.icon-add {
	content: url('add-icon.svg');
	height: 60px;
}

.simple-user {
	content: url(simple-user.svg);
	height: 150px;
	padding: 20px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

.footer {
	border-top: 1px solid #bd9e5a;
	text-align: center;
	color: #bd9e5a;
	padding: 10px 10px;
}

.progress-bar {
	text-align: center;
	width: 100%;
	background-color: #bd9e5a2e;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
	margin-top: 15px;
}
.progress-bar-fill {
	color: #fff;
	font-size: 13px;
	display: block;
	height: 22px;
	background-color: #bd9e5a;
	transition: width 500ms ease-in-out;
}
.status {
	color: #fff;
}

.cover-none {
	object-fit: none!important;
}
.cover-contain {
	object-fit: contain;
}

.bg-taj {
	background-color: #221d10;
}

.bg-tajinier {
	background-color: #bd9e5a;
}

.second-bg-tajinier {
	background-color: #c8a04b;
}

#menu-toggle {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1000;
}
#sidebar {
	position: fixed;
	top: 0;
	right: -300px;
	width: 300px;
	height: 100%;
	transition: right 0.3s ease-in-out;
	z-index: 999;
	padding-top: 80px;
	color: #fff;
}
#sidebar.active {
	right: 0;
}
#sidebar a {
	display: block;
	padding: 15px 25px;
	color: #fff;
	text-decoration: none;
}
#sidebar a:hover {
	background-color: #bd9e5a;
}
.content {
	transition: margin-right 0.3s ease-in-out;
}
.content.active {
	margin-right: 300px;
}



input[type="file"] {
	width: 100%!important;
	padding: 0 0 0 15px!important;
}

.taj-border {
	border-bottom: 1px solid #bd9e5a;
	margin: 0 0 20px 0;
}

.taj-flex-center {
	justify-content: center!important;
}

.confirmation {
	display: none;
	position: fixed;
	justify-content: center;
	align-items: center;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0 0 0 / 68%);
}
  
  
.confirmation-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #000;
	padding: 20px;
	color: #fff;
	border: 1px solid #bd9e5a;
}

.delete-control {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 10px 0 0 0;
}

.delete {
	background-color: #9a0f0f;
	color: #fff;
	padding: 5px;
	margin: 5px;
}

.delete, .cancel {
	width: 120px;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.cancel {
	background-color: #bd9e5a;
	color: #fff;
	padding: 5px;
	margin: 5px;
}

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

.action-reponse {
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	padding: 10px;
}

.admin-media-control {
	display: flex;

}
.admin-media-control button {
	margin: 0 0 0 10px;
}

.bann-btn {
	background: #b46d41!important;
}

.trash-btn {
	background: #ff0303!important;
}

.wipe-btn {
	background: #9a0f0f!important;
}

.insert-btn {
	background: #085729!important;
}

.restore-btn {
	background-color: #085729!important;
}

.unblock-btn {
	background-color: #085729!important;
}

.edit-btn {
	background-color: #bd9e5a!important;
}

@media screen and (max-width: 800px) {
	.media_content {
		flex-direction: column;
	}
	.media_left, .media_details {
		width: 100%;
	}
	.admin-media-control {
		flex-direction: column;
	}
	.admin-media-control button {
		margin: 5px 0!important;
		width: 100%;
	}
}

.status-bg {
	padding: 5px;
	background: #fff;
	border-radius: 5px;
}
.filter-form {
	width: 100%;
	display: flex;
	align-items: center;
	margin: 0 0 30px 0;
	justify-content: end;
	border-bottom: 1px solid #bd9e5a;
	padding: 0 0 15px 0;
}

.data-filter {
	color: #bd9e5a;
	margin: 0 30px 0 0
}

.data-filter input {
	background-color: #000;
	padding: 12px;
	border: 1px solid #bd9e5a;
	outline: none;
}

.data-filter select {
	background-color: #000;
	padding: 12px;
	border: 1px solid #bd9e5a;
	outline: none;
}

.data-filter label {
	font-size: 18px;
	margin: 0 10px 0 0;
}

.media-blocked {
	text-align: center;
	background: brown;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	margin: 0 0 0 10px;
}

.media-review {
	text-align: center;
	background: orange;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	margin: 0 0 10px 0;
}

.media-trash {
	text-align: center;
	background: red;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	margin: 0 0 10px 0;
}

.media-visible {
	text-align: center;
	background: green;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	margin: 0 0 10px 0;
}

.edit-media {
	display: flex;
	background-color: #221d10;
	padding: 20px;
}

.edit-form {
	padding: 0 20px;
}

.edit-form label {
	margin: 10px 0 0 0;
	color: #fff;
	font-weight: bold;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 5px!important;
	padding: 15px;
}

input {
	border-radius: 0px!important;
}

.search-media, #result {
	padding: 0 15px;
}


@media screen and (max-width: 780px) {
	.edit-form {
		padding: 0px!important;
	}
	.media-preview img, video {
		width: 100%!important;
		height: auto!important;
	}
	.edit-media {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}


@media screen and (max-width: 540px) {
	.img-control, admin-img {
		width: 100%!important;
		flex-direction: column;
		flex-direction: end!important;
	}
	.admin-media-control {
		width: 100%;
		flex-direction: end!important;
		justify-content: start;
	}
	.img-control a {
		display: flex;
		margin: 0 0 20px 0!important;
		width: 100%;
	}
	.admin-media-control button {
		margin: 8px 0!important;
		width: 100%;
	}
}