/* Define custom colors using CSS variables */
:root {
	--primary-color: #e1000f; /* Custom primary color */ 	
	--secondary-color: #1e1e1e; /* Custom secondary color */
	--background-color: #ffffff; /* Custom background color */
	--transparent-background-color: #89898912; /* Custom background color */
	--text-color: #3b3b3b; /* Custom text color */
	--warm-gray-color: #DED7D6;
	--blue-color: #bdcdda;
}
.input-field>label{
	color: var(--text-color);
}

.select2-dropdown {
	border: 1px solid var(--text-color)!important;
}

.modal {
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px;
}

.modalWithCalendarModal {
    overflow: auto!important;
}
.modal .modal-footer {
    padding: 4px 24px;
}

.row {
	margin-left: -.75rem;
	margin-right: -.75rem;
}

nav{
	background-color: initial;
	box-shadow: none;
}

/* Style odd rows */
.mdc-data-table tbody tr:nth-child(odd) {
    background-color: var(--transparent-background-color); /* Apply background color for odd rows */
}

/* Style even rows */
.mdc-data-table tbody tr:nth-child(even) {
    background-color: var(--background-color); /* Apply background color for even rows */
}

/* Update Materialize CSS classes to use custom colors */

.divider{
	background-color: #9e9e9e!important;	
}
.timepicker-canvas-bg {
	fill: var(--primary-color);
}
.timepicker-canvas line {
	stroke: var(--primary-color);
}
.datepicker-cancel, .datepicker-clear, .datepicker-today, .datepicker-done,
.timepicker-close
{
	color: var(--primary-color);		
}

.datepicker-calendar button  svg{
	fill: var(--primary-color);		
}		

[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:after {
	background-color: var(--primary-color);
}
.datepicker-table td.is-selected {
	background-color: var(--primary-color);			
}

[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:before, [type="radio"].with-gap:checked+span:after {
	border: 2px solid var(--primary-color);
}		
.datepicker-date-display, .timepicker-digital-display {
	background-color: var(--primary-color);			
}
.datepicker-day-button{
	color:  var(--text-color);	;
}
.datepicker-table td.is-outside-current-month, .datepicker-table td.is-disabled {    
    text-decoration: line-through;    
}
.datepicker-table td.is-disabled button{    
    font-weight: 100;	
}
.materialize-container input,
.input-field input[type=text]:focus,
.input-field input[type=password]:focus,
.input-field input[type=email]:focus,
.input-field input[type=url]:focus,
.input-field input[type=tel]:focus,
.input-field input[type=number]:focus,
.input-field textarea:focus {
	box-shadow: unset !important;
	border-bottom: 1px solid var(--text-color) !important; 
	/* box-shadow: 0 1px 0 0 var(--text-color) !important; */
}

/* Popravek za autofill kontrole */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow:none !important;
	-webkit-text-fill-color: var(--text-color) !important;
	box-shadow: 0 0 0px 1000px white inset !important;
}

.materialize-container input,
.input-field input[type=text]:focus + label,
.input-field input[type=password]:focus + label,
.input-field input[type=email]:focus + label,
.input-field input[type=url]:focus + label,
.input-field input[type=tel]:focus + label,
.input-field input[type=number]:focus + label,
.input-field textarea:focus + label {
	color: var(--text-color) !important;
}

[type="checkbox"].filled-in:checked+span:not(.lever):after {
    border: 2px solid var(--primary-color);
    background-color: var(--primary-color);
}


.input-field input[type=text]:focus ~ .helper-text:after,
.input-field input[type=password]:focus ~ .helper-text:after,
.input-field input[type=email]:focus ~ .helper-text:after,
.input-field input[type=url]:focus ~ .helper-text:after,
.input-field input[type=tel]:focus ~ .helper-text:after,
.input-field input[type=number]:focus ~ .helper-text:after,
.input-field textarea:focus ~ .helper-text:after {
	background-color: var(--primary-color) !important;
}

.input-field input[type=search]:focus:not(.browser-default) {
	background-color: var(--primary-color) !important;
}

/* SELECT 2 */
	.select-wrapper input.select-dropdown{
		color: white;
	}

	.select2-dropdown{
		background: rgba(0,0,0,0.03)important;	
		color:rgba(0,0,0,0.87);
	}
	.select2-dropdown ul li{
		padding: 0px 10px;
	}
	.select2-container--default .select2-search--dropdown .select2-search__field{
		padding: 0px 0px;
		color: rgba(0,0,0,0.87);
		text-indent: 5px;
	}
	.select2-container--default .select2-selection--single {
		background-color: transparent!important;
		border: none!important;
		border-bottom: 1px solid #9e9e9e !important;
   		border-radius: 0px !important;
		color: rgba(0,0,0,0.87);
	}
	.select2-container--open .select2-dropdown--below{
		margin-top: 10px;
	}

.dropdown-content li>a, .dropdown-content li>span {
	color: var(--secondary-color);
}


button, .btn, .btn-small, .btn-large{
	background-color: var(--primary-color);
	border-radius: 4.3rem;
	font-weight: 700;
}

.btn:hover, .btn:focus, 
.btn-large:hover, .btn-large:focus,
.btn-small:hover, .btn-small:focus, 
button:hover, button:focus
{
	background-color: var(--text-color) !important;
    border-color: var(--text-color) !important;
    opacity: 1;
}
.btn:hover, .btn-large:hover, .btn-small:hover, 
button:hover, button:focus {
	/* box-shadow: 0px 0px 5px 0px inset white; */
}

button[disabled]{
    background: gray;
}


/* Update background color */
body {
	background-color: var(--background-color);
}
.modal{
	background-color: var(--warm-gray-color);
	color: var(--text-color) !important;	
}
.modal .modal-footer{
	background-color: var(--background-color);
}

.modal-footer a{
	color: white !important;	
}

/* Update text color */
body,
label {
	color: var(--text-color);
}