/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300&family=Roboto:wght@100&display=swap');


:root {
	/*========= FORM COLORS ===========*/
	--omrs-color-ink-low-contrast: rgba(60, 60, 67, 0.3);
	--omrs-color-ink-medium-contrast: rgba(19, 19, 21, 0.6);
	--omrs-color-interaction: #838383;
	--omrs-color-interaction-minus-two: rgba(73, 133, 224, 0.12);
	--omrs-color-bg-low-contrast: #eff1f2;
	--omrs-color-ink-high-contrast: #121212;
	/*========== Font and typography ==========*/
	--body-font: 'Public Sans';
	--panel-h2-font: 'Roboto', sans-serif;
	--biggest-font-size: 2rem;
	--h2-font-size: 1.25rem;
	--h3-font-size: 1.125rem;
	--normal-font-size: .938rem;
	--small-font-size: .813rem;
	--smaller-font-size: .75rem;
	/*========= COLORS =========*/
	--page-color-background: black;
	--container-color: #32312F;
	--panel-color: #FFFFFF;
	--button-color: #ffff4d;
	--button-hover: rgb(236, 22, 39);
	--font-color: white;
	--sidebar-color: #434343;
	/*========== Font weight ==========*/
	--font-semi-bold: 600;
	--font-bold: 700;
	/*========== Margenes ==========*/
	--mb-0-5: .5rem;
	--mb-0-75: .75rem;
	--mb-1: 1rem;
	--mb-1-5: 1.5rem;
	--mb-2: 2rem;
	/*==== CALC VARIABLES ====*/
	
}

/* BODY */

body {
	margin: 0;
	background-color: var(--page-color-background);
	min-height: 100vh;
	display: grid;
  	grid-template-rows: auto 1fr auto;
	font-family: var(--body-font);
}

/* FOOTER*/

p.footer_copy {
	margin: 0;
}

.footer_copy {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: var(--mb-0-75);
	font-size: var(--small-font-size);
	color: var(--font-color);
	z-index: 5;
  }

/* Disabling default styles */

input[type="submit"] {
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

a {
    color: var(--font-color);
    text-decoration: none;
}

a:hover {
    color:var(--font-color); 
    text-decoration:none; 
    cursor:pointer;  
}

/* CONTENT */

.container {
	width: 100%;
	display: flex;
}

.content {
	width: 100%;
	background-color: var(--container-color);
	justify-content: center;
	align-items: center;
	display: flex;
}

.logo {
	color: white;
}

.logo h1 {
	padding: var(--mb-2);
	margin: 0;
	text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}

#add_settlement {
	display: flex;
}

/* PANEL */

.panel {
	background-color: var(--panel-color);
	text-align: center;
	position: relative;
	border-radius: 2px;
}

.panel form {
	margin-left: auto;
	margin-right: auto;
}

.panel p {
	width: 80%;
	text-align: justify;
	margin-left: auto;
	margin-right: auto;
}

.panel h2 {
	font-family: var(--panel-h2-font);
}

.user_data {
	margin-bottom: 30px;
	text-align: center;
	position: relative;
}

.panel2 {
	background-color: var(--panel-color);
	text-align: center;
	position: relative;
	border-radius: 2px;
	width: 40%;
}

#ogloszenie {
	width: 70%;
}

.badge {
	background-color: #FFFF4D;
	color: black;
	padding: 2px 4px;
	text-align: center;
	border-radius: 80%;
  }

.tekst {
	text-overflow: ellipsis;
	border: 2px solid #32312F;
	box-sizing: border-box;
	border-radius: 5px;
	width: 80%;
	margin-left: 10%;
	padding: 40px;
}
/*========== SIDE BAR ============*/

.sidebar_wrapper {
    float: left;
    height: 100%;
	width: fit-content;
	display: none;
	background-color: var(--sidebar-color);
	position: relative;
	background-image: url(sidebar_bg.svg);
	background-repeat: no-repeat;
	background-position: top;
	position: absolute;
	z-index: 2;
}

.sidebar {
    height: 100%;
	width: fit-content;
    top: 0;
    left: 0;
}

.sidebar_content {
	height: 90%;
	display: grid;
	grid-template-rows: auto 1fr auto;
	text-align: center;
}

.link_list > div{
	margin-bottom: 20px;
}

#logout_button {
	padding-bottom: var(--mb-2);
	margin-bottom: 20px;
}

.sidebar_content a {
	text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
	font-family: var(--body-font);
	color: var(--font-color);
	font-weight: 500;
	font-size: 20px;
}

.sidebar_content a:hover {
	color: #dfdfdf;
}

#add_driver {
	margin-bottom: 3rem;
}

/* MOBILE NAVBAR */

.mobile_navbar {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	color: var(--font-color);
	margin: var(--mb-0-5);
}

.menu_toggle {
	display: flex;
  	flex-direction: column;
  	position: absolute;
  	top: 0;
  	left: 0;
  	z-index: 1;
  	-webkit-user-select: none;
  	user-select: none;
	margin: var(--mb-1);
	cursor: pointer;
}

#menu_toggle span {
	display: flex;
 	width: 29px;
  	height: 2px;
  	margin-bottom: 5px;
 	position: relative;
  	background: #ffffff;
  	border-radius: 3px;
}

#nav_close_btn {
	position: absolute;
    font-size: 30px;
    font-weight: 600;
    transform: rotate(45deg);
    cursor: pointer;
	color: var(--font-color);
	left: 80%;
	display: flex;
}

/* USER DATA CONTAINER */

.user_data_container {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	color: var(--font-color);
	margin: var(--mb-0-5);

}

#user_data {
	display: inherit;
	width: fit-content;
	float: left;
	text-align: right;
	margin-right: 1rem;
	align-items: center;
}

#user_logo {
	display: inherit;
	width: fit-content;
	background-image: url(data_icon.svg);
	background-repeat: no-repeat;
	background-size: contain;
	width: 2.4rem;
	height: 2.4rem;
}

/* BUTTON */

.button {
	font-family: var(--panel-h2-font);
	font-style: normal;
	font-weight: 1000;
	font-size: 15px;
	border: none;
	display: inline-block;
	background-color: var(--button-color);
	color: #000000;
	padding: 0.5rem 1.7rem;
	border-radius: 20px;
	transition: .3s;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
	cursor: pointer;
}
  
.button:hover {
	background-color: var(--button-hover);
	color: var(--page-color-background);
  }

.lower_button {
	margin-bottom: 20px;
	color: var(--page-color-background);
}

.black{
	color: #000000;
}


a.lower_button {
	color: #32312F;
}

#change_password_btn {
	margin-left: 20px;
	margin-bottom: var(--mb-2);
}

#change_email_btn {
	margin-bottom: 20px;
}

#login_btn {
	margin-bottom: 20px;
}

/* FORM */

div.omrs-input-group {
  margin-bottom: 1.5rem;
  position: relative;
  width: 20.4375rem;
  margin-right: auto;
  margin-left: auto;
}

/* Input*/
.omrs-input-underlined > input,
.omrs-input-filled > input {
	border: none;
	border-bottom: 0.125rem solid var(--omrs-color-ink-medium-contrast);
	width: 100%;
	height: 2rem;
	font-size: 1.0625rem;
	padding-left: 0.875rem;
	line-height: 147.6%;
	padding-top: 0.825rem;
	padding-bottom: 0.5rem;
}

.omrs-input-underlined > input:focus,
.omrs-input-filled > input:focus {
	outline: none;
}

.omrs-input-underlined > .omrs-input-label,
.omrs-input-filled > .omrs-input-label {
	position: absolute;
	top: 0.9375rem;
	left: 0.875rem;
	line-height: 147.6%;
	color: var(--omrs-color-ink-medium-contrast);
	transition: top .2s;
}

.omrs-input-underlined > svg,
.omrs-input-filled > svg {
	position: absolute;
	top: 0.9375rem;
	right: 0.875rem;
	fill: var(--omrs-color-ink-medium-contrast);
}

.omrs-input-underlined > .omrs-input-helper,
.omrs-input-filled > .omrs-input-helper {
	font-size: 0.9375rem;
	color: var(--omrs-color-ink-medium-contrast);
	letter-spacing: 0.0275rem;
	margin: 0.125rem 0.875rem;
}

.omrs-input-underlined > input:hover,
.omrs-input-filled > input:hover {
	background: var(--omrs-color-interaction-minus-two);
	border-color: var(--omrs-color-ink-high-contrast);
}

.omrs-input-underlined > input:focus + .omrs-input-label,
.omrs-input-underlined > input:valid + .omrs-input-label,
.omrs-input-filled > input:focus + .omrs-input-label,
.omrs-input-filled > input:valid + .omrs-input-label {
	top: 0;
	font-size: 0.9375rem;
	margin-bottom: 32px;;
}

.omrs-input-underlined:not(.omrs-input-danger) > input:focus + .omrs-input-label,
.omrs-input-filled:not(.omrs-input-danger) > input:focus + .omrs-input-label {
	color: var(--omrs-color-interaction);
}

.omrs-input-underlined:not(.omrs-input-danger) > input:focus,
.omrs-input-filled:not(.omrs-input-danger) > input:focus {
	border-color: var(--omrs-color-interaction);
}

.omrs-input-underlined:not(.omrs-input-danger) > input:focus ~ svg,
.omrs-input-filled:not(.omrs-input-danger) > input:focus ~ svg {
	fill: var(--omrs-color-ink-high-contrast);
}

/** DISABLED **/

.omrs-input-underlined > input:disabled {
	background: var(--omrs-color-bg-low-contrast);
	cursor: not-allowed;
}

.omrs-input-underlined > input:disabled + .omrs-input-label,
.omrs-input-underlined > input:disabled ~ .omrs-input-helper{
	color: var(--omrs-color-ink-low-contrast);
}

.omrs-input-underlined > input:disabled ~ svg {
	fill: var(--omrs-color-ink-low-contrast);
}

.form_email_icon {
	width: 24px;
	height: 24px;
	background-image: url(img/icons/email_icon_optimized.svg);
	background-size: contain;
}

/*========== MODAL ============*/

.modal_back {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg_change_email_modal {
    display: none;
}

.bg_change_password_modal {
    display: none;
}

.bg_driver_registration_modal {
	display: none;
}

.bg_new_driver_created {
	display: none;
}

.bg_new_driver_creation_failed {
	display: none;
}

.bg_password_changed {
	display: none;
}

.bg_password_change_failed {
	display: none;
}

.bg_password_restarted {
	display: none;
}

.bg_settelment_added {
	display: none;
}

.bg_phone_number_changed {
	display: none;
}

.bg_phone_number_change_failed {
	display: none;
}

.modal-content {

    background-color: var(--panel-color);
    border-radius: 2px;
    text-align: center;
    padding: 40px;
    position: relative;
}

.modal-content h1 {
	font-family: var(--panel-h2-font);
}

.close {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 20px;
    font-weight: 600;
    transform: rotate(45deg);
    cursor: pointer;
}


.bg-modal{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0, 0, 0.7);
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.zamknij {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 30px;
    font-weight: 600;
    transform: rotate(45deg);
    cursor: pointer;
}

/*========== LIST COMPONENT ============*/

.modal_back {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg_change_email_modal {
    display: none;
}

.modal-rozliczenia{
    background-color: var(--panel-color);
    border-radius: 3px;
    text-align: center;
    padding: 0 40px 0;
    position: absolute;
	height: fit-content;
}

.table{
    width: 100%;
    min-width: fit-content;
}

.table-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: rgb(240, 240, 240);
	margin-top: 50px;
}

.table_section{
    max-height: 75vh;
    overflow: auto;
}

thead th{
    position: sticky;
    top: 0;
    background-color: rgb(240, 240, 240);
    color: #424242;
    font-size: 15px;
}

th, td{
    word-break: break-word;
    text-align: center;
}

.srodek{
	overflow: scroll;
	width: 100%;
	height: 100%;
}
.table-section tr{
	display: block;
	width: 100%;
}

.accordion {
    background-color: #eee;
    cursor: pointer;
    border: none;
    outline: none;
    transition: 0.4s;
  }

.accordion-button {
	padding: var(--mb-0-5) 0 var(--mb-0-5);
}

.active, .accordion:hover {
    background-color: #ccc;
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	header {
		margin-left: 30px;
	}

	.panel {
		width: 370px;
	}

	.panel2 {
		width: 370px;
	}

	th, td {
		word-wrap: none;
		word-break: none;
		min-width: 60px;
		overflow: scroll;
	}

	.srodek {
		height: 100%;
	}

	.table_section {
		max-height: none;
	}

	.user_data_container {
		right: 0;
	}

	.sidebar_wrapper {
		height: 100%;
	}

	.sidebar_content {
		height: 100vh;
	}

	.container {
		height: 100%;
	}

	.modal-rozliczenia{
		background-color: var(--panel-color);
		border-radius: 3px;
		text-align: center;
		padding: 0 40px 0;
		position: absolute;
		height: fit-content;
		overflow: scroll;
		top: 0;
		overflow-y:hidden;
	}

	.bg-modal{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		display: none;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	header {
		margin-left: 60px;
	}

	.panel {
		width: 370px;
	}


}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	.sidebar_wrapper {
		display: flex;
	}

	.container {
		min-height: fit-content;
		height: 100%;
	}

	.menu_toggle {
		display: none;
	}

	#nav_close_btn {
		display: none;
	}

	.sidebar_wrapper {
		display: flex;
		position: relative;
		z-index: 0;
	}
	.sidebar_content {
		height: 100%;
	}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	
}