@font-face{
	font-family: "Cambria";
	src: url("Cambria.ttf");
}

*{
	transition: .3s ease;
}
body{
	margin: 0;
	padding: 0;
	font-family: monospace;
}
#notification-bar{
	height: 100vh;
	width: 100vw;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
}
.show-notification-bar{
	opacity: 1 !important;
	visibility: visible !important;
}
#notification-card{
	margin: 0 auto;
	margin-top: 2vw;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1vw;
	padding: .5vw 1vw;
	border-radius: 1vw;
	max-width: 30vw;
	cursor: pointer;
	color: white;
}
.success-notification-card{
	background: darkgreen;
}
.fail-notification-card{
	background: darkred;
}
#notification-card i{
	font-size: 1vw;
}
#notification-card p{
	margin: 0;
}
#master{
	width: 100vw;
	height: 100vh;
}
#login-panel{
	display: flex;
	width: 100%;
	height: 100%;
	background: #EEE;
	justify-content: center;
	align-items: center;
}
#login-form{
	display: flex;
	flex-direction: column;
	padding: 3vh 3vw;
	padding-bottom: 4vh;
	background: white;
	gap: 1vw 0;
	border-radius: 2vh;
}
#login-form small{
	color: darkred;
}
#login-form .login-group{
	display: flex;
	gap: .5vw;
	align-items: center;
	border: 1px solid darkgrey;
	padding: .2vw 1vw;
	border-radius: .5vw;
}
#login-form .login-group input{
	padding: .6vh;
	border: none;
	width: 15vw;
}
#login-form .login-group input:focus{
	outline: none;
	border-color: black;
}
#login-form .login-group i:last-child{
	cursor: pointer;
	width: 1vw;
}
#login-form button{
	padding: .4vw 0;
	background: #292929;
	color: white;
	border: none;
	border-radius: .5vw;
	cursor: pointer;
}
#login-form button:hover{
	opacity: .8;
}

#dashboard-panel{
	display: flex;
	position: relative;
}
#sidebar{
	position: relative;
	z-index: 99;
	height: 100vh;
	width: 5vw;
	background: #292929;
	display: flex;
	flex-direction: column;
}
#sidebar img{
	width: 100%;
}
#sidebar ul{
	padding: 0;
	margin: 0;
	margin-top: auto;
	list-style: none;
}
#sidebar a{
	width: 100%;
	padding: 0.8vh 0;
	display: flex;
	margin-top: 0.8vh;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: white;
	border-left: 2px solid transparent;
	font-size: 2.5vh;
}
#sidebar a:hover{
	color: #EEF296;
	border-color: #EEF296;
}
#sidebar .active-menu{
	color: #EEF296;
	border-color: #EEF296;
}
#sidebar span{
	margin-top: auto;
	margin-bottom: 4vh;
	cursor: pointer;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}
#sidebar span:hover{
	color: #EEF296;
}
#content{
	position: relative;
	z-index: 9;
	display: flex;
	flex-direction: column;
	height: calc(100vh - 5vw);
	width: 100%;
	background: white;
	overflow-y: scroll;
	overflow-x: hidden;
	padding-bottom: 0.2vw;
}
#content .content-header{
	padding: 3vh 3vw 0 3vw;
	display: flex;
}
#content .content-header-title{
	display: flex;
	flex-direction: column;
}
#content .content-header-title h2{
	margin: 0;
	margin-bottom: 1vh;
}
#content .content-header-title .title-back-link{
	cursor: pointer;
	display: flex;
	align-items: center;
}
#content .content-header-title .title-back-link:hover{
	text-decoration: underline;
}
#content .content-header-title .title-back-link:hover small:first-child{
	transform: translateX(-3px);
}
#content .content-header-title .title-back-link small:first-child{
	font-size: small;
}
#content .content-header-title small{
	opacity: .6;
}
#content .content-subtitle{
	margin: 1vw 0;
	margin-left: 0.5vw;
}
#content .content-header-toolbar{
	margin-left: auto;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 1vw;
}
#content .content-header-toolbar a{
	width: 5vh;
	height: 5vh;
	background: #DDD;
	border-radius: 1vh;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: black;
}
#content .content-header-toolbar a:hover{
	opacity: .6;
}
#content .content-subheader{
	padding: 3vh 3vw 0 3vw;
	display: flex;
}
#content .content-subheader-toolbar{
	display: flex;
	gap: 0 1vw;
}
#content .content-subheader-toolbar button{
	padding: 1vh 1vw;
	border-radius: 1vh;
	border: none;
	background: #DDD;
	cursor: pointer;
}
#content .content-subheader-toolbar button:hover{
	background: #EEE;
}
#content .content-subheader-toolbar .toolbar-select-search{
	display: flex;
	position: relative;
}
#content .content-subheader-toolbar .toolbar-select-search .select-list{
	position: absolute;
	top: 2vw;
	z-index: 999;
	width: 100%;
	max-height: 10vw;
	overflow: scroll;
	display: flex;
	flex-direction: column;
	border-radius: 0.5vw;
	background: white;
	box-shadow:
		0px 0px 2.7px rgba(0, 0, 0, 0.022),
		0px 0px 6.9px rgba(0, 0, 0, 0.031),
		0px 0px 14.2px rgba(0, 0, 0, 0.039),
		0px 0px 29.2px rgba(0, 0, 0, 0.048),
		0px 0px 80px rgba(0, 0, 0, 0.07);
	visibility: hidden;
	opacity: 0;
}
#content .content-subheader-toolbar .toolbar-select-search .select-list a{
	padding: 0.5vw;
	border-radius: 0;
	background: none;
}
#content .content-subheader-toolbar .toolbar-select-search .select-list a:hover{
	background: #DDD;
}
#content .content-subheader-toolbar .toolbar-select-search input:focus ~ .select-list{
	visibility: visible;
	opacity: 1;
}
#content .content-subheader-toolbar input{
	border: 1px solid darkgrey;
	border-radius: 1vh;
	background: white;
	padding: 0 1vw;
}
#content .content-subheader-toolbar input:focus{
	outline: none;
	border-color: black;
}
#content .content-subheader-toolbar a{
	padding: 1vh 1vw;
	border-radius: 1vh;
	border: none;
	background: #DDD;
	cursor: pointer;
	text-decoration: none;
	color: black;
}
#content .content-subheader-toolbar a:hover{
	background: #EEE;
}
#content .content-subheader-filters{
	margin-left: auto;
}
#content .content-subheader-filters button{
	padding: 1vh 1vw;
	border-radius: 1vh;
	border: none;
	background: #DDD;
	cursor: pointer;
}
#content .content-list{
	padding: 4vh 3vw 0 3vw;
	display: flex;
	gap: 1vw 1vw;
	flex-wrap: wrap;
}
#content .content-list-item{
	padding: 1vh 1vw;
	background: #DDD;
	border-radius: 1vh;
	cursor: pointer;
}
#content .content-list-item:hover{
	background: #A8A8A8;
}
#content .content-table{
	padding: 4vh 3vw 0 3vw;
	display: flex;
	flex-direction: column;
}
#content .content-table-hint{
	opacity: .6;
	margin-top: 1vh;
	margin-right: 3vw;
	text-align: right;
}
#content .content-table table{
	border-collapse: separate;
	border-spacing: 0 1vh;
}
#content .content-table tr{
	text-align: center;
	cursor: pointer;
}
#content .content-table tr:hover td{
	background: #DDD;
}
#content .content-table-left-cell{
	border-top-left-radius: 1vh;
	border-bottom-left-radius: 1vh;
}
#content .content-table-right-cell{
	border-top-right-radius: 1vh;
	border-bottom-right-radius: 1vh;
}
#content .content-table td{
	padding: 1vh 0;
	background: #EEE;
	max-width: 0;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
#content .content-pagination{
	display: flex;
	padding: 2vh 3vw;
	align-items: center;
	justify-content: center;
	gap: 0.5vw;
	flex-wrap: wrap;
}
#content .content-pagination button{
	padding: 1vh 1vw;
	border-radius: 1vh;
	border: none;
	cursor: pointer;
	font-weight: bold;
	background: transparent;
}
#content .content-pagination button:hover{
	background: #DDD;
}
#content .content-pagination .active-page-button{
	background: #DDD;
}
#content .content-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
#content .content-form{
	padding: 4vh 3vw 0 3vw;
	display: flex;
	flex-direction: column;
}
#content .content-form form{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 3vw;
}
#content .content-form form .form-column{
	display: flex;
	flex-direction: column;
	gap: 1vw;
}
#content .content-form form .form-group{
	display: flex;
	flex-direction: column;
	gap: 1vh;
}
#content .content-form form .form-group button{
	padding: 1vh 1vw;
	border-radius: 1vh;
	border: 1px solid darkgrey;
	background: white;
	cursor: pointer;
}
#content .content-form form .form-group input, #content .content-form form .form-group select{
	padding: 1vh 1vw;
	border-radius: 1vh;
	border: 1px solid darkgrey;
	background: white;
}
#content .content-form form .form-group input:disabled{
	background: #DDD;
}
#content .content-form form .form-group select:disabled{
	background: #DDD;
}
#content .content-form form .form-group button:disabled{
	background: #DDD;
}
#content .content-form form .form-group input:focus{
	outline: none;
	border-color: black;
}
#content .form-append-button{
	margin: 0 3vw;
	margin-top: 2vh;
	grid-column: span 2;
	padding: 1vh 1vw;
	border: none;
	border-radius: 1vh;
	background: #DDD;
	cursor: pointer;
}
#content .form-append-button:hover{
	background: darkgrey;
}
#content .content-form form .form-tools{
	margin-top: 1vw;
	grid-column: span 2;
	display: flex;
	justify-content: right;
	gap: 1vw;
}
#content .content-form form .form-tools button:first-child{
	background: darkred;
}
#content .content-form form .form-tools button:first-child:hover{
	background: indianred;
}
#content .content-form form .form-tools button{
	padding: 1vh 1vw;
	border-radius: 1vh;
	border: none;
	background: #292929;
	color: white;
	cursor: pointer;
}
#content .content-form form .form-tools button:hover{
	background: #525252;
}
#content .content-form form .form-tools select{
	padding: 1vh 1vw;
	background: #EEE;
	border: 1px solid darkgrey;
	border-radius: 1vh;
}
#content .content-snackbar{
	position: fixed;
	z-index: 9;
	bottom: 0;
	right: 0;
	width: 100%;
	background: white;
	padding: 1vw 2vw;
	display: flex;
	gap: 2vw;
	justify-content: end;
	align-items: center;
	box-shadow:
		0px 0px 5.3px rgba(0, 0, 0, 0.028),
		0px 0px 17.9px rgba(0, 0, 0, 0.042),
		0px 0px 80px rgba(0, 0, 0, 0.07);
}
#content .content-snackbar input{
	margin-right: auto;
	margin-left: 10vw;
	padding: 1vh 1vw;
	border-radius: 1vh;
	border: 1px solid darkgrey;
	background: white;
}
#content .content-snackbar input:focus{
	outline: none;
	border-color: black;
}
#content .content-order-contructor{
	margin-top: 2vw;
	padding: 4vh 3vw 0 3vw;
	display: flex;
	flex-direction: column;
}
#content .content-order-contructor table{
	border-spacing: 0.5vw;
	border-collapse: separate;
}
#content .content-order-contructor table th{
	text-align: left;
}
#content .content-order-contructor table input{
	padding: 1vh 1vw;
	border-radius: 1vh;
	border: 1px solid darkgrey;
	background: white;
	width: calc(100% - 2vw);
}
#content .content-order-contructor .attendance-table input{
	width: fit-content !important;
}
#content .content-order-contructor .attendance-table .present-true{
	accent-color: green;
}
#content .content-order-contructor .attendance-table .present-false{
	accent-color: red;
}
#content .content-order-contructor table select{
	padding: 1vh 1vw;
	border-radius: 1vh;
	border: 1px solid darkgrey;
	background: white;
	width: 100%;
}
#content .content-order-contructor table input:focus{
	outline: none;
	border-color: black;
}
#content .content-order-contructor table .input-error{
	border-color: darkorange; !important;
}
#content .content-order-contructor table button{
	margin: 0 !important;
	justify-self: flex-end;
}
#content .content-order-contructor button{
	margin: 0 0.5vw;
	margin-top: 1vw;
	padding: 1vh 1vw;
	border-radius: 1vh;
	border: none;
	background: #DDD;
	cursor: pointer;
}
#content .content-order-contructor button:hover{
	background: darkgrey;
}
#content .select-custom{
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
}
#content .select-custom .select-custom-list{
	position: absolute;
	z-index: 999;
	display: flex;
	top: 4vh;
	width: inherit;
	flex-direction: column;
	background: white;
	border-radius: 0.5vw;
	overflow: hidden;
	box-shadow:
		0px 0px 2.7px rgba(0, 0, 0, 0.031),
		0px 0px 6.9px rgba(0, 0, 0, 0.044),
		0px 0px 14.2px rgba(0, 0, 0, 0.056),
		0px 0px 29.2px rgba(0, 0, 0, 0.069),
		0px 0px 80px rgba(0, 0, 0, 0.1);
	visibility: hidden;
	opacity: 0;
	max-height: 13vw;
	overflow: scroll;
}
#content .select-custom .select-custom-list span{
	padding: 0.3vw 0.5vw;
	font-size: .7vw;
	cursor: pointer;
}
#content .select-custom .select-custom-list span:hover{
	background: black;
	color: white;
}
#content .select-custom .select-custom-list span[arial-hover="true"]{
	background: black;
	color: white;
}
#content .select-custom input:focus ~ .select-custom-list{
	opacity: 1 !important;
	visibility: visible !important;
}
#content .content-meta-constructor{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-column-gap: 2vw;
	padding: 3vw;
	padding-bottom: 0;
}
#content .content-meta-constructor .form-group{
	display: flex;
	flex-direction: column;
	gap: 0.5vw;
}
#content .content-meta-constructor .form-group label{
	font-size: small;
}
#content .content-meta-constructor .form-group input{
	padding: 1vh 1vw;
	border-radius: 1vh;
	border: 1px solid darkgrey;
	background: white;
}
#content .content-order-contructor .invoice-table{
	border-collapse: initial;
	border-spacing: 0;
	font-family: "Cambria";
	background: white;
}
#content .content-order-contructor .invoice-table .entry-row td{
	text-align: center;
}
#content .content-order-contructor .invoice-table .entry-cell-left-align{
	text-align: left !important;
}
#content .content-order-contructor .invoice-table td{
	border-color: black;
	font-size: 1.2vw;
}
#content .content-order-contructor .invoice-table .header-cell{
	font-size: 1.8vw;
	background: #d9ead3;
}
#content .content-order-contructor .invoice-table .crucial-cell{
	background: #d9ead3;
}
#content .content-order-contructor .invoice-table .emphasize-row{
	background: #4a86e8;
	color: white;
}
#content .content-order-contructor .invoice-table th{
	font-size: 1.2vw;
	text-align: center;
	background: #d9ead3;
}
#content .content-order-contructor .invoice-table img{
	width: 5vw;
	height: 4vw;
	object-fit: contain;
}
#content hr{
	width: 100%;
	margin-top: 4vh;
	color: #EEE;
}

/* .load-more-btn {
	padding: 8px 16px;
	font-size: 14px;
	background-color: #3498db;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}
.load-more-btn:hover {
	background-color: #2980b9;
} */
.content-table table tr:hover {
	background-color: #f0f8ff;
	cursor: pointer;
}
#scrollContainer {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	overflow-y: auto;
	max-height: 100%;
}
/*Optional*/
#scrollContainer::-webkit-scrollbar {
	width: 8px;
}
#scrollContainer::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 10px;
}
#scrollContainer::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 10px;
}
#scrollContainer::-webkit-scrollbar-thumb:hover {
	background: #a0a0a0;
}

.content-table table tr td {
	padding: 6px 6px;
	font-size: 12px;
}

.content-order-contructor table#invoice-table {
	font-size: 11px;
}

.highlighted {
	background-color: red;
	font-weight: normal;
	border-radius: 3px;
	padding: 0 2px;
}

.search-container {
	position: relative;
	display: inline-block;
}

.search-container input[type="text"] {
	padding-right: 25px; /* space for the button */
}

.clear-search-btn {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: #888;
	font-size: 18px;
	cursor: pointer;
}

.clear-search-btn:hover {
	color: #555;
}

.pagination-wrapper {
	display: flex;
	justify-content: space-between; /* or center if you want */
	align-items: center;
	padding: 10px 20px;
	border-top: 1px solid #eee;
	margin-top: 20px;
	font-size: 14px;
	background-color: #fafafa;
}

/* specific for reports */

/* Ensure employee table in reports_form.html matches transaction tables */

/* Reusable Table Styles */
/* Reusable Table Styles */
.erp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.5vw;
    background: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 1vh;
    margin-bottom: 1vw;
}

.erp-table th,
.erp-table td {
    padding: 1vh 1vw;
    border: 1px solid #dcdcdc;
    text-align: left;
}

.erp-table th {
    background: #f4f6f9;
    font-weight: bold;
}

.erp-table td input,
.erp-table td .select-custom input {
    width: 100%;
    padding: 0.8vh 0.8vw;
    border: 1px solid #dcdcdc;
    border-radius: 0.5vh;
    font-size: 0.9vw;
}

.erp-table td .select-custom-list {
    border: 1px solid #dcdcdc;
    border-radius: 0.5vh;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    max-height: 15vw;
    overflow-y: auto;
}

.erp-table td .select-custom-list span {
    display: block;
    padding: 0.5vh 0.8vw;
    font-size: 0.9vw;
}

.erp-table td .select-custom-list span:hover,
.erp-table td .select-custom-list span.selected {
    background: #292929;
    color: white;
}

/* Button Styles */
.erp-btn {
    padding: 0.8vh 1vw;
    border: none;
    border-radius: 0.5vh;
    cursor: pointer;
    font-size: 0.9vw;
    display: inline-flex;
    align-items: center;
    gap: 0.5vw;
    transition: background 0.3s, transform 0.2s;
}

.erp-btn:hover {
    transform: translateY(-1px);
}

.erp-btn-primary {
    background: #292929;
    color: white;
}

.erp-btn-primary:hover {
    background: #525252;
}

.erp-btn-secondary {
    background: #DDD;
    color: #292929;
}

.erp-btn-secondary:hover {
    background: darkgrey;
}

.erp-btn-danger {
    background: darkred;
    color: white;
}

.erp-btn-danger:hover {
    background: indianred;
}

.erp-btn:disabled {
    background: #EEE;
    cursor: not-allowed;
}


/* Validation */
.input-error {
    border-color: darkred !important;
}

.error-text {
    color: darkred;
    font-size: 0.8vw;
    position: absolute;
    bottom: -1.2vw;
    left: 0;
}

/* Animations */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .form-columns {
        grid-template-columns: 1fr;
    }

    .erp-table,
    .invoice-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    #sidebar {
        width: 10vw;
    }

    .content-order-constructor {
        padding: 2vh 2vw;
    }

    .erp-btn {
        font-size: 1.2vw;
        padding: 1vh 1.5vw;
    }

    .invoice-table td,
    .invoice-table th {
        font-size: 1.5vw;
    }
}

/* Employee Section */
.employee-section {
    background: #f9f9f9;
    padding: 1vw;
    border-radius: 1vh;
    margin-bottom: 1vw;
}

/* Invoice Table */
.invoice-table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: "Cambria";
}

/* pagination of reports*/

.pagination {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pagination-nav, .pagination-page {
    padding: 8px 12px;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    font-size: 14px;
    color: #2c3e50;
    transition: all 0.2s ease;
}

.pagination-nav:hover:not(:disabled), .pagination-page:hover:not(.active) {
    background: #ecf0f1;
    border-color: #3498db;
    color: #3498db;
}

.pagination-nav:disabled, .pagination-page:disabled {
    background: #dfe6e9;
    border-color: #dfe6e9;
    color: #7f8c8d;
    cursor: not-allowed;
}

.pagination-page.active {
    background: #3498db;
    border-color: #3498db;
    color: #ffffff;
    font-weight: bold;
}

.pagination-ellipsis {
    font-size: 14px;
    color: #7f8c8d;
    padding: 0 8px;
}

.pagination .pagination-page.active {
    background: #3498db;
    border-color: #3498db;
    color: #ffffff;
    font-weight: bold;
}
/* Responsive Design */

/*-- content pagination of customers section --*/
.content-pagination {
    display: flex;
    gap: 5px;
    margin-top: 20px;
    justify-content: center;
}

.content-pagination button {
    padding: 8px 12px;
    border: 1px solid #ccc;
    background-color: white;
    border-radius: 4px;
    cursor: pointer;
}

.content-pagination button.active-page-button {
    background-color: #3498db;
    color: white;
    border-color: #3498db;
}

.content-pagination button:hover:not(:disabled) {
    background-color: #f0f0f0;
}

.content-pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.pagination {
	margin-top: 10px;
  }
  .pagination button {
	margin: 0 2px;
	padding: 5px 10px;
	border: 1px solid #ccc;
	background: white;
	cursor: pointer;
  }
  .pagination button.active {
	background: #007BFF;
	color: white;
	border-color: #007BFF;
  }
  .pagination button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
  }
  
  /* Add this CSS to your style.css file */

/* Download Section Styles */
.content-download-section {
	padding: 2vh 3vw;
	margin-top: 2vh;
	background: #F9F9F9;
	border-radius: 1vh;
	margin-left: 3vw;
	margin-right: 3vw;
}

.content-download-section .download-header {
	margin-bottom: 1.5vh;
}

.content-download-section .download-header h3 {
	margin: 0;
	font-size: 1.2em;
	color: #292929;
}

.content-download-section .download-filters {
	display: flex;
	gap: 1.5vw;
	flex-wrap: wrap;
	align-items: flex-end;
	margin-bottom: 1.5vh;
}

.content-download-section .filter-group {
	display: flex;
	flex-direction: column;
	gap: 0.5vh;
	min-width: 150px;
}

.content-download-section .filter-group label {
	font-size: 0.9em;
	font-weight: 600;
	color: #555;
}

.content-download-section .filter-group select,
.content-download-section .filter-group input {
	padding: 1vh 1vw;
	border: 1px solid darkgrey;
	border-radius: 1vh;
	background: white;
	font-size: 0.9em;
}

.content-download-section .filter-group select:focus,
.content-download-section .filter-group input:focus {
	outline: none;
	border-color: black;
}

.content-download-section .download-actions {
	display: flex;
	gap: 1vw;
	align-items: flex-end;
	margin-left: auto;
}

.content-download-section .download-actions button {
	padding: 1vh 1.5vw;
	border-radius: 1vh;
	border: none;
	background: #292929;
	color: white;
	cursor: pointer;
	font-size: 0.9em;
	display: flex;
	align-items: center;
	gap: 0.5vw;
}

.content-download-section .download-actions button:hover:not(:disabled) {
	background: #525252;
}

.content-download-section .download-actions button:last-child {
	background: #DDD;
	color: #292929;
}

.content-download-section .download-actions button:last-child:hover:not(:disabled) {
	background: darkgrey;
}

.content-download-section .download-actions button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.content-download-section .download-info {
	display: flex;
	align-items: center;
	gap: 0.5vw;
	padding: 1vh 1vw;
	background: #E3F2FD;
	border-left: 3px solid #2196F3;
	border-radius: 0.5vh;
	color: #1565C0;
}

.content-download-section .download-info i {
	font-size: 1.2em;
}

.content-download-section .download-info small {
	font-size: 0.85em;
}