@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* USER VARIABLES SECTION */

:root {
	--transparent: rgba(0, 0, 0, 0.1);
	--transparent-darken: rgba(52, 58, 64, 0.7);
	--accent: #ff8c1c;
	--accent-hover: #cf7116;
	--accent-opacity: rgba(207, 113, 22, 1);
	--text: #333;
	--text-light: rgba(255, 255, 255, 0.75);
	--regular-text: 16px;
	--regular-text-lg: 22px;
	--lineheight: 1.65;
	--userfont: montserrat-wt, sans-serif;
	--titlefont: montserrat-wt, sans-serif;
	--border: 1px solid rgba(237, 237, 237, 0.9);
	--radius-sm: 5px;
	--radius-lg: 10px;
	--transition: .25s ease-out;
	--color-dark: #000;
	--color-light: #f9fff9;
}

/* FONTS LOAD SECTION */

@font-face {
	src: url("../fonts/montserrat/montserrat-v21-latin_cyrillic-300.woff2") format("woff2");
	font-family: "montserrat-wt";
	font-weight: 300;
	font-style: normal;
}

@font-face {
	src: url("../fonts/montserrat/montserrat-v21-latin_cyrillic-regular.woff2") format("woff2");
	font-family: "montserrat-wt";
	font-weight: 400;
	font-style: normal;
}

@font-face {
	src: url("../fonts/montserrat/montserrat-v21-latin_cyrillic-500.woff2") format("woff2");
	font-family: "montserrat-wt";
	font-weight: 500;
	font-style: normal;
}

@font-face {
	src: url("../fonts/montserrat/montserrat-v21-latin_cyrillic-600.woff2") format("woff2");
	font-family: "montserrat-wt";
	font-weight: 600;
	font-style: normal;
}

@font-face {
	src: url("../fonts/montserrat/montserrat-v21-latin_cyrillic-700.woff2") format("woff2");
	font-family: "montserrat-wt";
	font-weight: 700;
	font-style: normal;
}

@font-face {
	src: url("../fonts/montserrat/montserrat-v21-latin_cyrillic-800.woff2") format("woff2");
	font-family: "montserrat-wt";
	font-weight: 800;
	font-style: normal;
}

@font-face {
	src: url("../fonts/montserrat/montserrat-v21-latin_cyrillic-900.woff2") format("woff2");
	font-family: "montserrat-wt";
	font-weight: 900;
	font-style: normal;
}

/* BOOTSTRAP SETTINGS SECTION */
/* gutter 20px (10px + 10px). Comment this code for default gutter start at 1.5rem (24px) wide. */
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
	--bs-gutter-x: .625rem;
}

.row,
.row>* {
	--bs-gutter-x: 1.25rem;
}

.form-check-input {
	margin-top: .4rem;
}

.form-control-lg {
	font-size: var(--userfont)
}

.required label::after {
	content: "*";
	margin-left: 3px;
	color: var(--red);
}

p {
	margin-bottom: 0.2rem;
}

.bg-dark {
	background-color: var(--color-dark) !important;
}

.bg-secondary {
	background-color: #444 !important;
}

.text-danger {
	color: var(--accent) !important;
}

.form-group {
	width: 100%;
}

.btn-danger {
	background-color: var(--accent);
	border: 1px solid var(--accent);
}

.btn-danger:hover {
	background-color: var(--accent-hover);
	border: 1px solid var(--accent-hover);
}

.form-check-inline {
	margin-right: 1rem;
}

.file__upload_actions .form-check-inline .form-check-input {
	margin-top: 0;
	margin-left: 0;
}

/* Modal fullscreen */
.modal.modal-fullscreen .modal-dialog {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	max-width: none;
}

.modal.modal-fullscreen .modal-content {
	height: auto;
	height: 100vh;
	border-radius: 0;
	border: none;
}

.modal.modal-fullscreen .modal-body {
	overflow-y: auto;
}

/* GENERAL CSS SETTINGS */

::placeholder {
	color: #666;
}

::selection {
	background-color: var(--accent);
	color: #fff;
}

input,
textarea {
	outline: none;
}

.input-group-text {
	min-width: 58px;
	text-align: center;
	display: inline-grid;
}

.text-shadow {
	text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
}

.adsbygoogle {
	display: block;
	width: 100%;
	margin: 0 auto;
}

/* input:focus:required:invalid, textarea:focus:required:invalid { border-color: red; } */
/* input:required:valid, textarea:required:valid { border-color: none; } */
textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
select.form-control:focus,
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
[type="text"].form-control:focus,
[type="password"].form-control:focus,
[type="email"].form-control:focus,
[type="tel"].form-control:focus,
[contenteditable].form-control:focus {
	box-shadow: inset 0 -1px 0 #ddd;
	border-color: #bbbbbb;
}

/* WebKit and Chromiums */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	background-color: var(--white);
}

::-webkit-scrollbar-thumb {
	background: var(--dark);
	border-radius: 5px;
}

html,
body {
	max-width: 100%;
	height: 100%;
	scrollbar-color: var(--dark) var(--white);
	scrollbar-width: thin;
}

body {
	font-family: var(--userfont);
	font-size: var(--regular-text);
	line-height: var(--lineheight);
	color: var(--text);
	min-width: 320px;
	position: relative;
	overflow-x: hidden;
	background-color: #fff;
}

/* HEADER WITH NAVBAR */
header .navbar {
	background-color: var(--color-light);
	padding: 10px 35px;
	z-index: 30;
}

footer {
	background-color: var(--color-light);
	padding: 10px 35px;
}

header .navbar-brand {
	font-weight: bold;
	letter-spacing: 0.3px;
}

header .navbar .navbar-nav li.nav-item {
	margin-right: 15px;
}

header .navbar .navbar__btn-change-lang {
	line-height: 28px;
	text-transform: uppercase;
	margin-left: 0px;
	padding-left: 20px;
	padding-right: 20px;
}

header .navbar .btn-group_lang .dropdown-menu {
	background-color: var(--color-light);
}

header .navbar .btn-group_lang .dropdown-menu a.dropdown-item {
	color: var(--color-dark);
	transition: var(--transition);
}

header .navbar .btn-group_lang .dropdown-menu a.dropdown-item:hover {
	background-color: var(--transparent);
}

/* MAIN SEARCH FORM */
.header__wrapper {
	padding: 25px;
	background-color: var(--transparent);
}

.header__wrapper .input-group {
	width: 100%;
}

.header__wrapper .input-group input {
	border: none;
}

.header__wrapper .input-group-prepend .input-group-text,
.header__wrapper .input-group-append .input-group-text {
	background-color: var(--white);
	color: var(--text);
	border: none;
}

.header__title {
	font-weight: 800;
}

.header__wrapper #btn-whatch-video {
	margin-top: 3rem;
}

.btn__transparent {
	background: transparent;
	border: none;
	color: var(--color-dark);
	padding: 5px 10px;
	margin: 0;
}

.btn__transparent:disabled,
.btn__transparent.disabled {
	background: transparent;
	border: none;
	color: var(--color-dark) !important;
	cursor: pointer;
	opacity: 1;
}

.btn__transparent:focus,
.btn__transparent:hover {
	background: transparent;
	border: none;
	color: var(--accent);
	cursor: pointer;
}

.file__upload_wrapper .form-control-file,
.file__upload_actions .form-control-file {
	display: none;
}

.file__upload_wrapper {
	overflow: auto;
	position: relative;
	min-height: 400px;
}

.file__upload_wrapper td,
.file__upload_wrapper th {
	vertical-align: middle;
}

/* TODO: set class for th */
.file__upload_wrapper .table .columns {
	min-width: 200px;
}

/* TODO: Make show more button */
.file__upload_wrapper .table .columns .table-data {
	max-height: 100px;
	overflow: hidden;
	display: flex;
	height: 40px;
	align-items: center;
	justify-content: left;
	position: relative;
}

.file__upload_wrapper .table .columns .table-data button {
	position: absolute;
	right: 0;
	bottom: -5px;
	opacity: 0.5;
}

.file__upload_wrapper .table .columns .table-data button:hover {
	opacity: 1;
}

.file__upload_actions .form-group,
.file__upload_wrapper .form-group {
	margin-bottom: 0px;
}

.file__upload_actions .form-check-input {
	margin-top: 0.7rem;
	margin-left: -0.5rem;
}

.file__upload_wrapper.loading::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	z-index: 4;
}

.file__upload_wrapper.loading::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 3;
}

.file__upload_wrapper .img-thumbnail {
	cursor: zoom-in;
}

@keyframes spin {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.file__upload_wrapper .dropdown-menu button {
	display: none;
}

/* MODAL STYLES */
.modal__delete_btn {
	position: absolute;
	z-index: 9;
	right: -3px;
	top: 0px;
}

/* USER AND CONTENT STYLES */
.main>div.alert {
	position: fixed;
	bottom: 10px;
	right: 25px;
	width: auto;
	max-width: 400px;
	padding: 20px;
	text-align: center;
	z-index: 10;
	display: none;
	opacity: 0;
}

.main>div.alert-danger::before {
	content: '\f071';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: var(--red);
	font-size: 42px;
	display: block;
	text-align: center;
	margin-bottom: 5px;
}

.main>div.alert-success::before {
	content: '\f00c';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: var(--green);
	font-size: 42px;
	display: block;
	text-align: center;
	margin-bottom: 5px;
}

.page-content {
	min-height: calc(100vh - 20vh);
	padding-bottom: 50px;
	padding-left: 2%;
	padding-right: 2%;
}

.page-item.disabled .page-link,
.page-link {
	color: #fff;
	background-color: #444;
	border-color: #444;
}

.image {
	max-width: 100%;
	margin-bottom: var(--bs-gutter-x);
	border-radius: 4px;
}

.accent {
	color: var(--accent);
}

.accent-opacity {
	color: var(--accent-opacity);
}

.btn-accent {
	background-color: var(--accent);
	color: var(--white);
}

.btn-accent:hover {
	background-color: var(--accent-opacity);
	color: var(--white);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	font-family: var(--titlefont);
}

.title__wrapper {
	padding: 40px 0;
}

.title__description {
	color: var(--dark);
}

h1.title,
.h1.title {
	color: var(--accent);
	text-shadow: 1px 1px 1px var(--accent-opacity);
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
	text-transform: uppercase;
	margin-bottom: 25px;
	font-size: 2rem;
}

.title::before,
.title::after {
	content: "";
	display: block;
	height: 0.09em;
	min-width: 30vw;
}

.title::before {
	background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--accent-opacity));
	margin-right: 4vh;
}

.title::after {
	background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--accent-opacity));
	margin-left: 4vh;
}

.content-loader {
	background-color: var(--transparent-darken);
	position: absolute;
	width: 100%;
	height: calc(100% + 140px);
	top: -40px;
	z-index: 10;
	display: none;
}

.content-loader__text {
	color: var(--white);
	text-align: center;
	padding-top: 5%;
}

/* Upload File drag and drop */
.file__upload_container .box__dragndrop,
.file__upload_container .box__uploading,
.file__upload_container .box__success,
.file__upload_container .box__error {
	display: none;
}

.file__upload_container .box.has-advanced-upload {
	background-color: white;
	outline: 2px dashed black;
	outline-offset: -10px;
}

.file__upload_container .box.has-advanced-upload .box__dragndrop {
	display: inline;
}

/*-- Loader Spinner --*/
#loader-spinner {
	position: fixed;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	left: 0;
	top: 0px;
	overflow: hidden;
	/*display: none;*/
}

#loader-spinner .spinner-border {
	border: 16px solid #f3f3f3;
	/* Light grey */
	border-top: 16px solid #46464666;
	/* Blue */
	width: 100px;
	height: 100px;
	left: 50%;
	top: 50%;
	margin-top: -100px;
	margin-left: -50px;
	position: fixed;
}

#loader-spinner .spinner-title {
	position: fixed;
	width: 100px;
	height: 100px;
	left: 50%;
	top: 50%;
	margin-top: -70px;
	margin-left: -50px;
	text-align: center;
	color: #fff;
}

/* end */

/* CHECKOUT PAGE */
.checkout__container .btn.btn-light {
	box-shadow: none;
	border: none;
	font-size: 20px;
	width: 100%;
	height: 100%;
}

.checkout__container .card .img-box {
	width: 80px;
	height: 50px;
}

.checkout__container .card img {
	width: 100%;
	object-fit: fill;
}

.checkout__container .card .number {
	font-size: 24px;
}

.checkout__container .card-body .btn.btn-light .fab.fa-cc-paypal {
	font-size: 32px;
	color: #3333f7;
}

.checkout__container .fab.fa-cc-amex {
	color: #1c6acf;
	font-size: 32px;
}

.checkout__container .fab.fa-cc-mastercard {
	font-size: 32px;
	color: red;
}

.checkout__container .fab.fa-cc-discover {
	font-size: 32px;
	color: orange;
}

.checkout__container .box {
	height: 40px;
	width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ddd;
}

.checkout__container .form__div {
	height: 50px;
	position: relative;
	margin-bottom: 24px;
}

.checkout__container .form-control {
	width: 100%;
	height: 45px;
	font-size: 14px;
	border: 1px solid #DADCE0;
	border-radius: 0;
	outline: none;
	padding: 2px;
	background: none;
	z-index: 1;
	box-shadow: none;
}

.checkout__container .form__label {
	position: absolute;
	left: 16px;
	top: 10px;
	background-color: #fff;
	color: #80868B;
	font-size: 16px;
	transition: .3s;
	text-transform: uppercase;
}

.checkout__container .form-control:focus+.form__label {
	top: -8px;
	left: 12px;
	color: #1A73E8;
	font-size: 12px;
	font-weight: 500;
	z-index: 10;
}

.checkout__container .form-control:not(:placeholder-shown).form-control:not(:focus)+.form__label {
	top: -8px;
	left: 12px;
	font-size: 12px;
	font-weight: 500;
	z-index: 10;
}

.checkout__container .form-control:focus {
	border: 1.5px solid #1A73E8;
	box-shadow: none;
}

/* END CHECKOUT PAGE */