html {
    --color-bg: #fff;
    --color-400: #eee;
    --color-300: #008996;
    --color-250: #586566;
    --color-200: #394d4e;
    --color-success: #5cb85c;
	--color-error: #d9534f;
	--color-alert: #f0ad4e;
	--color-info: #0da4ee;
	
	--img-home: url(../images/home.jpg);

    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: var(--color-250);
    margin: 0;
    background: linear-gradient(170deg, var(--color-bg) 85%, var(--color-250) 100%);
    background-attachment: fixed;
    height: 100%;
    font-size: 1em;
    box-sizing: border-box;
    line-height: 1em;
    scroll-behavior: smooth;
}

.dark-mode {
    --color-bg: #111;
    --color-400: #333;
    --color-300: #888;
    --color-250: #aaa;
    --color-200: #ddd;
    --img-home: url(../images/home-dark.jpg);
}

.ale-mode {
    --color-bg: rgb(226, 126, 59);
    --color-400: rgb(233, 43, 43);
    --color-300: rgb(201, 102, 45);
    --color-250: rgb(192, 73, 44);
    --color-200: rgb(201, 243, 85);
}

body {
  
    display: grid;
    max-width: 100%;
    margin: 0;
    height: 100%;
    position: relative;
    gap: 4em;
    grid-template-rows: auto 1fr auto;
}

/* ========================================= HEADER AND BUTTONS ============================================== */

.a-1 {
    cursor: pointer;
    color: var(--color-300);
    text-decoration: none;
    padding: 0.5em 1em;
    text-align: center;
    vertical-align: middle;
}

.a-2 {
    cursor: pointer;
    color: var(--color-250);
    /* text-decoration: none; */
    text-align: center;
    vertical-align: middle;
}

.a-2:hover, .a-2.active {
    color: var(--color-200);
    text-decoration: underline;
}

.btn-2 {
    cursor: pointer;
    color: var(--color-300);
    text-decoration: none;
    border-radius: 0.25em;
    padding: 0.5em 1em;
    user-select: none;
    transition: background-color 250ms, color 250ms, opacity 250ms;
}

.material-icons.btn-1 {
    font-size: 1.6rem;
    padding: 0.25em;
    border-radius: 50vh;
    background: transparent;
}

div.material-icons.btn-1:hover {
    background: rgba(0 0 0 / 0.35);
}

.material-icons.btn-2 {
    font-size: 1.6rem;
    padding: 0.25em;
    border-radius: 50vh;
}

.material-icons.icon {
    user-select:none;
}

.cell-color-default {
	color: var(--color-300)
}

.cell-color-red {
	color: var(--color-error);
}

.cell-color-green {
	color: var(--color-success);
}

.cell-color-orange {
	color: orange;
}

.cell-color-yellow {
	color: var(--color-alert);
}

.cell-color-pink {
	color: pink;
}

.material-icons.btn-2[data-title] {
	 display:flex;
}

.icon.material-icons.btn-2[data-title]::before {
    content: attr(data-title);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 1rem;
    align-self: center;
    transform-origin: right;
    animation: extend 1250ms ease forwards;
    display: none;
    margin-right: 0.5em;
    margin-left: 0.5em;
    font-weight: bold;
}

.btn-2:hover {
    
color: var(--color-400);
    
background-color: var(--color-300);
}

.icon.material-icons.btn-2[data-title]:hover::before {
   display: flex;
}

.btn-2:hover::after .svg-path {
    
    fill: var(--color-200);
    
}

input[type="radio"], input[type="checkbox"] {
    accent-color: var(--color-250);
}

input[type='radio'][disabled]:not([checked]) {
    filter: opacity(0.5);
}

.wb-png {
    position: absolute;
    align-self: center;
    height: 20em;
    opacity: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity:0;
    box-shadow: 0 0 2.5em 3em var(--color-bg);
    background: var(--color-bg);
    transition: opacity 350ms ease-in-out; 
   
}

header {
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    box-shadow: 0 1px 5px rgb(0 0 0 / 30%);
    background: var(--color-400);
}

.header-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-content: stretch;
    align-items: flex-start;
    width: inherit;
}

.header-elem {
   
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    user-select: none;
    align-self: center;
}

.header-elem .whistleblowing-title {
   
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    padding: 0.5em;
    flex-direction: row;
    margin: 0;
    cursor:pointer;
}

.header-elem:first-of-type {
    justify-self: flex-start;
    padding-inline: 1em;
    flex-direction: row;
    cursor:pointer;
    max-height: 3.7rem;
}

.header-elem:last-of-type {
    justify-self: flex-end;
    padding: 0.5em;
    flex-direction: row;
}

.header-elem > img {
    width: 100%;
    object-fit: cover;
    max-height: 3.5rem;
}

.dark-mode .header-elem > img {
	filter: contrast(0.5);
}


.header-btn {
    position:relative;
    padding-inline: 0.5em;
    display: flex;
    gap: 0.3em;
    padding: 0.5em;
}

.header-btn > img, .header-btn div > img {
    height: 1em;
    object-fit: cover;
    object-view-box: inset(0% 5% 5% 5.5%);
    width: 32px;
    border-radius: 0.25em;
    vertical-align: middle;
    position:relative;
    z-index: 2;
}

.header-btn > img:hover, .header-btn div > img:hover {
    cursor: pointer;
    outline: 2px solid var(--color-300);
}

.header-language {
    position: relative;
}

.header-language-select {
    position: absolute;
    top: -.5rem;
    display: none;
    flex-direction: column;
    gap: 0.7rem;
    background: var(--color-400);
    padding: 0.5rem;
    z-index: 3;
    border-radius: 0.25rem;
    left: -.5rem;
    box-shadow: 0 3px 5px -2px rgb(0 0 0 / 30%);
    
}

.header-language > .header-language-arrow {
	display:none;
	position: absolute;
	left: 50%;
	top: 83%;
	transform: translateX(-50%);
	z-index: 1;
	padding: 0;
}

.header-language:hover > .header-language-arrow {
	display:grid;
}

.header-language-select.open {
    display: flex;
}

.home-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-btn a > span {

   font-size: 1.5em;
}

.btn-dropped {
   display: none;
   opacity: 0;
   transition: opacity 350ms;
   position: absolute;
   top: calc(100% + 0.5em);
   left: 50%;
   transform: translateX(-50%);
   flex-direction: column;
   gap: 0.5em;
   z-index: 1;
   min-width: 100%;
   align-items: center;
   background-color: var(--color-bg);
   box-shadow: 0 1px 5px var(--color-300);
   justify-content: space-evenly;
   padding: 0.5em 0;
}

.btn-dropped-elem {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-dropped-elem > a {
    display: inline-block;
    width: 80%;
    max-width: 40ch;
    margin-inline: 0.5em;
}

.btn-dropped-active {
    display: flex;
    opacity: 1;
}

[aria-details] {
	display:flex;
	gap:0.5em;
	padding-block: 0.65em;
}

[aria-details]::after {
    font-family: 'Material Icons';
    content: attr(aria-details);
    font-size: 1.25em;
    vertical-align: bottom;
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -0.7em;
    font-size: 0.5em;
    color: var(--color-300);
    left: 50%;
    transform: translateX(-50%);
    animation: opacity 350ms ease;
    display: none;
    white-space: nowrap;
}

[data-tooltip]:hover::before {
    display: inline;
}

.just-icon-header {
	font-size:1.3em;
	padding:0.5em;
}

.btn-user:hover::before {
    opacity: 1;
   
}

.btn-1, ::-webkit-file-upload-button {
    
    color: var(--color-400);
    padding: 0.5em 1em;
    border: 0px;
    border-radius: 0.25em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 1em;
    transition: background-color 250ms;
    user-select: none;
}

.btn-1{
	background-color: var(--color-300);
}

::-webkit-file-upload-button {
	background-color: #999;
}

.btn-1:not([disabled]):hover, .btn-1:focus, input:not([disabled])::-webkit-file-upload-button:hover {
	cursor: pointer;
    background-color: var(--color-250);
}

.btn-3 {
    cursor: pointer;
    color: var(--color-250);
    background-color: transparent;
    text-decoration: none;
    border-radius: 0.25em;
    padding: 0.5em 1em;
    user-select: none;
    transition: background-color 250ms, color 250ms, opacity 250ms;
    border: 1px solid var(--color-250);
}

.btn-3:hover {
    
    color: var(--color-bg);
    background-color: var(--color-250);
    
}

/* ============================================== HOME =========================================================== */

.column.wide.home {
    max-width: 100%;
    min-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-block: -4em;
}

.home h1 > span {
    color: var(--color-300);
}

.home-slogan {
    width: 100%;
    padding-block: 10.5em;
    background: var(--color-400);
    display: flex;
    justify-content: center;
    box-shadow: 0 3px 5px -2px rgb(0 0 0 / 30%);
    background-image: var(--img-home);
    background-size: cover;
    background-position-x: 0%;
    background-position-y: 90%;
}

.home-slogan > h1 {
    width: 75%;
    text-align: center;
    background: var(--color-bg);
    padding: 1em;
    line-height: 1em;
}

.home .column-paragraph {
    justify-content: space-between;
    max-width: 25%;
    display: flex;
    flex-direction: column;
    min-width: 25%;
    text-align: left;
}

.home .column-paragraph > span:last-child {
    color: var(--color-300);
    font-weight: bold;
}

.home .column-text {
    justify-content: space-evenly;
    margin-block: 4em;
    line-height: 1.4em;
    flex-direction: row;
    max-width: 100%;
}


.home.wide .form-input {
    flex-direction: column;
    width: 20em;
    border-radius: 0.25em;
    overflow: hidden;
    padding: 0;
}

.form-input > input ~ button button.btn-1 {
    width: 20rem;
    border-radius: 0;
}

.home .form-input input + button {
    border-radius: 0 0 0.25em 0.25em;
}

.home .form-input input {
    padding: 1em;
}

.home .column-paragraph > .column-paragraph {
    max-width: 14em;
    margin-block: 1em;
}

.home button {
    width: 20em;
}

/* ============================================== TABLE =========================================================== */

.column-table {
    max-width: 90vw;
}

.table-title {
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.5em;
    width: 100%;
}

.table-title > *:first-child {
	width: -webkit-fill-available;
}

.column-table table {
	display: block;
	border-spacing: 0;
	border-radius: 0.25em;
	overflow: hidden;
	box-shadow: 0 2px 5px var(--color-400);
	border-collapse: collapse;
	background: var(--color-bg);
	overflow: auto;
	max-width: 100%;
	margin: 0 auto;
}

.column-table thead {
    background: var(--color-300);
    border-collapse: collapse;
    color: var(--color-400);
    box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
    font-weight: bold;
    font-size: 1.0em;
    /* min-width: 100%; */
}

.column-table thead td > span {
    display: flex;
    flex-direction: row;
    gap: 0.25em;
    justify-content: center;
    align-items: center;
    font-size: 1.1em;
}

.column-table thead td > span > .material-icons{
    font-size: 1.1em;   
}

.column-table tbody {
    color: var(--color-200);
}

.column-table tbody tr {
    border-bottom: 1px solid var(--color-400);
}

.column-table tbody tr:hover {
    background: var(--color-400);
}

.column-table table td {
   	padding: 0.75em 0.5em;
    text-align: center;
}

.filters {
    padding: 0.25em;
    display:flex;
    flex-direction: row-reverse;
    justify-content:left;
    gap:0.4em;
    flex-wrap: wrap-reverse;
    align-items: center;
}

.filters > div{
    box-shadow: 1px 2px 4px rgb(0 0 0 / 15%);
}

.filter, 
.filter > .material-icons {
    position: relative;
}

.filter > .filter-toggle,
.filter > .filter-toggle > .material-icons {
    font-size: 1em;
    display: inline-block;
    vertical-align: bottom;
}

.filter > div > .material-icons {
    font-weight: bold;
}

.filter-drop {
    cursor: default;
    position: absolute;
    display: none;
    flex-direction: column;
    top: calc(100% + 0.5em);
    background: var(--color-bg);
    color: var(--color-250);
    left: 0;
    border: 1px solid var(--color-300);
    border-radius: 0.25em;
    box-shadow: 0px 3px 5px 3px rgb(0 0 0 / 15%);
    padding: 0.4em;
    animation: opacity 350ms forwards;
    z-index: 1;
}

.active > .filter-drop {
    display: flex;
}

.filter-drop-close.material-icons {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1em;
    margin: 0.15em;
    padding: 0.1em;
    border-radius: 0.25em;
    color: var(--color-250);
    transition: all 350ms;
    cursor: pointer;
}

.icon.material-icons.small {
    font-size: 0.6em;
    font-weight:bold;
    transition: all 250ms ease;
    cursor: pointer;
}

.icon.material-icons.small:hover {
    transform: scale(1.25);
}

.icon.material-icons.small.active {
    transform: scale(1.25);
}

.icon.material-icons.small.active:hover {
     cursor: default;
}

.filter-drop-close.material-icons:hover {
    color: var(--color-bg);
    background: var(--color-250);
}

.filter-drop-nav {
    display: flex;
    flex-direction: row;
    gap: 0.4em;
    border-bottom: 1px solid var(--color-300);
    padding: 0.4em 0.2em;
    margin-bottom: 0.25em;
}

.filter-drop-container {
    display: flex;
}

.filter-drop-content {
    display:none;
    animation: opacity 350ms ease forwards;
}

.filter-drop-content.active {
    display:block;
}

.filter-drop-search {
    padding: 0.4em 0.2em;
    position:relative;
}

.filter-drop-search > input {
    background-color: var(--color-400);
    border: 0px;
    padding: 0.5em;
    border-radius: 0.125em;
    color: var(--color-200);
    padding-left: 2.25em;
}

.filter-drop-search::before {
    content:'search';
    font-family: 'Material Icons';
    position:absolute;
    top: 0;
    left:0;
    color: var(--color-250);
    z-index: 1;
    padding:0.5em 0.25em;
    font-size: 1.5em;
}

.filter-drop-list {
    display: flex;
    padding: 0.25em;
    gap: 0.4em;
    flex-direction: column;
}

.filter-drop-list.time-list {
    flex-direction: row;
}

.filter-drop-elem {
    display: flex;
    flex-direction: row;
    gap: 0.4em;
    align-items: center;
    padding: 0.25em 0.25em;
    color: var(--color-250);
}

.filter-drop-time > .filter-drop-input {
    width: 14ch;
    background-color: var(--color-400);
    border: 0px;
    padding: 0.5em;
    border-radius: 0.125em;
    color: var(--color-200);
}

.list-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25em;
}

.list-checkbox > label:hover,
.list-checkbox > input[type='checkbox']:hover + label {
    color: var(--color-200);
    font-weight: bold;
}

.list-checkbox > * {
    cursor: pointer;
}

.filter-drop-remove {
    display: flex;
    align-items: center;
    padding: 0.5em 0.5em;
    gap: 0.5em;
    border-top: 1px solid var(--color-300);
    margin-top: 0.5em;
}

.filter-drop-remove > * {
    cursor: pointer;
    font-size: 1em;
}

.filter-drop-remove:hover > .material-icons,
.filter-drop-remove:hover > span {
    font-weight: bold;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 4em;
}

.pagination-buttons {
    padding: 0.6em 1em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.4em;
    background: var(--color-bg);
    border-radius: 0.25em;
    box-shadow: 0 2px 5px var(--color-400);
}

.pagination-buttons > div {
    user-select: none;
}

.pagination-btn {
    padding: 0.25em;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    height: 1em;
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: all 250ms ease;
}

.pagination-btn.material-icons {
    font-size: 1em;
    font-weight: bold;
}

.pagination-btn.active {
    font-weight: bold;
    background: var(--color-300);
    color: var(--color-bg);
    cursor: default;
}

.pagination-btn.disabled {
    opacity: .5;
    cursor: default;
}


.pagination-btn:not(.active, .disabled):hover {
    font-weight: bold;
    background: var(--color-300);
    color: var(--color-bg);
}

.pagination-spacer {
    cursor: default;
}

.pagination-select {
    display: flex;
    position: relative;
    flex-direction: row;
    gap: 2em;
    align-items: center;
}

.pagination-select-btn {
    position: relative;
    padding: 0.5em 1em;
    background: var(--color-bg);
    border-radius: 0.25em;
    box-shadow: 0 2px 5px var(--color-400);
    display: flex;
    gap: 1em;
    align-items: center;
    cursor: pointer;
    transition: all 250ms ease;
}

.pagination-select-btn:hover {
    background: var(--color-300);
    color: var(--color-bg);
}

.pagination-drop {
    position: absolute;
    display: none;
    background: var(--color-bg);
    border-radius: 0.25em;
    padding: 0.5em;
    top: -10.25em;
    right: 0em;
    flex-direction: column;
    gap: 0.25em;
    box-shadow: 0 2px 5px var(--color-400);
    width: 8em;
    text-align: center;
    animation: opacity 350ms ease;
}

.pagination-drop.active {
    display: flex;
}

.hasNotification {
    position: relative;
}

.hasNotification::after {
    content: '';
    top: 0.1em;
    right: 0.1em;
    width: 0.45em;
    aspect-ratio: 1 / 1;
    background: red;
    position: absolute;
    border-radius: 100%;
    box-shadow: 0px 0px 0px 2px var(--color-bg);
    transition: all 350ms ease;
}
.hasNotification:hover::after {
    transform: scale(1.25) translate(0.1em, -0.1em);
}

.multi-button-cell {
	display: flex;
	gap: 0.15em;
}

td.word-broken {
	word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}

/* ======================================= FORM ====================================================== */

*[tooltip]:hover::before {
    border: solid !important;
    border-color: var(--color-250) transparent !important;
    border-width: 0.5em 0.4em 0px !important;
    bottom: 17px !important;
    content: '' !important;
    left: 0.25em !important;
    position: absolute !important;
    z-index: 99 !important;
    
    opacity: 0;
    animation: opacity 350ms ease-in-out forwards;
    
}

*[tooltip]:hover::after {
    background: var(--color-250) !important;
    border-radius: 0.25em !important;
    left: 0 !important;

    opacity: 0;
    animation: opacity 350ms ease-in-out forwards;
    
}

.tooltip-element {
    background: var(--color-300) !important;
}

.rendered-form *:not(.formbuilder-checkbox-inline, .formbuilder-checkbox)>label {
    display: flex;
    align-items: center;
    margin-bottom: 0.25em;

}

form h4 {
    position:relative;
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: 2em;
    min-width: 30ch;
}
form .helper {
    font-family: 'Material Icons';
    display: flex;
    justify-content: center;
    align-items: center;
    
    cursor:help;

    position:absolute;
    height: 1.25em;
    width: 1.25em;
    
    right: 0em;
    top:-0.25em;
    border-radius: 50%;
    border: 2px solid var(--color-250);
    user-select: none;
}

.helper-description {
    position: absolute;
    background: var(--color-250);
    color: var(--color-400);
    font-size: 0.7em;
    font-weight: 100;
    padding: 0.5em;
    border-radius: 0.4em;
    top: 2.5em;
    right: 0em;
    width: 22em;
    opacity: 0;
    transition: opacity 450ms;
    user-select: none;

}

.helper-description::after {
    content:'';
    display: block;
    position: absolute;
    background: var(--color-250);
    top: -0.25em;
    right: 0.75em;
    width: 0.5em;
    height:0.5em;
    transform: rotate(45deg);

}

form .helper:hover + .helper-description {
    opacity: 1;
    z-index: 1;
}

.content {
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.content-1fr {
    grid-template-columns: 1fr;
}

.content-2fr {
    grid-template-columns: 1fr 3fr;
}

.column {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: opacity 500ms linear;
    opacity: 1;
    
}

.column:not(:first-of-type) {
    border-left: 1px solid var(--color-300);
    flex-direction: row-reverse;
    justify-content: center;
}

.content-1fr .column {
    justify-content: center;
}

.column-not-visible {
    display:none;
}

.column > * {
    display: grid;
    flex-direction: column;
    justify-content: center;
    gap: 1em;
    /* min-width: 40ch; */
    animation: opacity 650ms ease-in-out forwards;
    position: relative;
    /* grid-template-rows: 1fr 1fr 1fr 1fr; */
    grid-template-columns: 1fr;
}

.column-text {
    display: flex;
    flex-direction: column;
    max-width: 85ch;
    gap: 2.5em;

}

.column-paragraph {
    text-align: center;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.column-paragraph.left {
    text-align: left;
}

.column-paragraph.dark {
    color: var(--color-200);
}

.column-paragraph.bold {
    font-weight:bold;
}

.column-paragraph.h1 {
    color: var(--color-300);
    font-size: 1.2em;
}

.column-paragraph.spaced {
    margin-top: 4em;
}

.column-paragraph.key {
    font-size: 2.5em;
    font-weight: bold;
}

.column-paragraph.key::after {
    content: 'key';
    font-size: 2em;
    vertical-align: middle;
    padding-inline: 1em;
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

.column-paragraph-btns {
    display: flex;
    justify-content: center;
    gap: 1em;
}

.column-paragraph-divider {
	height: 1px;
    width: 80%;
    background: var(--color-400);
    margin-inline: auto;
    margin-block: .5rem;
}

/* ========================================= FORM ======================================== */

.form-input {
    display: flex;
    flex-direction: column;
    padding-inline: 0.5em;
}

.form-input.labelled {
	border-top: 0.5px solid var(--color-250);
	gap: 1em;
	padding-top: 1em;
}

.form-input > label {
    font-size: 0.80em;
    padding-left: 1em;
    color: var(--color-250);
    user-select: none;
}

.form-input > input, .rendered-form .form-group .form-control, .form-input > textarea, .popup-row-input.form-input > select {
    background-color: var(--color-400);
    border: 0px;
    padding: 0.5em;
    border-radius: 0.125em;
    color: var(--color-200);
    transition: background 450ms;
}

.form-input > input[disabled], .rendered-form .form-group .form-control[disabled], button[disabled] {
    opacity: 0.5;
}

.rendered-form .form-group .form-control:focus{ 
    box-shadow: none;
}

.form-group div.radio-group > * {
	display: flex;
    flex-direction: row;
}

.form-input > select {
    background-color: transparent;
    border: 0.5px solid var(--color-300);
    padding: 0.5em;
    border-radius: 0.125em;
    color: var(--color-200);
    transition: background 450ms;
    font-size: 0.825em;
}

.form-input > select:focus-visible {
	outline: none;
}

.form-input > input::placeholder {
    color:var(--color-350);
    opacity: 0.6;
}

/* .form-input input[type='checkbox'] { */
/*     display: none; */
/* } */

.font-weight-bold {
    font-weight: bold;
    font-size: 1.2em;
}

.bg-primary {
    background: #999;
    color: var(--color-bg);
    padding: 0.75em;
    border-radius: 0.25em;
}

.column.wide {
    max-width: 90%;
    /* min-width: 50%; */
    align-self: flex-start;
}

.column.wide.is-dashboard {
    align-self: center;
}

/* .column.wide > * { */
/*     padding: 0 1em; */
/* } */

.wide .form-input {
    flex-direction: row;
    justify-content: space-between;
}

.wide .form-input.labelled:not(:first-of-type) {
    border-top:0px;
}

.wide .form-input > label {
    width: 20ch;
    align-self: center;
}

.wide .form-input > *:not(label) {
    min-width: 30ch;
}

.wide .form-input > input,
.wide .form-input > select {
    width: 45ch;
}

.checkbox-btn {
    position: relative;
    border-radius: 0.25em 0 0 0.25em;
    width: 80%;
}

.checkbox-container {
    display: flex;
}

.wide .checkbox-container > a {
    width: 78%;
}


input[type="checkbox"]:not(:checked) + .checkbox-container>.checkbox-btn:hover::after,
input[type="checkbox"]:not(:checked) + .checkbox-container>.checkbox-btn:focus::after {
    color: var(--color-400);
    border-color: var(--color-250)
}

.checkbox-btn::after {
    border: 1px solid var(--color-300);
    border-radius: 0 0.25em 0.25em 0;
    content: '\2713';
    text-align: center;
    color: transparent;
    font-weight: 900;
    height: 1.88em;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 11%;
    position: absolute;
    z-index: -1;
    right: -11%;
    top: 0em;
    transform-origin: center;
    transition: border-color 250ms, color 250ms;
}

input[type="checkbox"]:checked + .checkbox-container>.checkbox-btn {
    background: var(--color-250);
}

input[type="checkbox"]:checked + .checkbox-container>.checkbox-btn::after {
    color: var(--color-250);
    border-color:var(--color-250);
    opacity: 1;
}

textarea:focus, input:focus, .form-group .form-control:focus{ 
    border: none; 
    outline: none;
    background: var(--color-400);
    
} 

textarea:focus-visible, input:focus-visible, .rendered-form .form-group .form-control:focus{ 
    border: none; 
    outline: 1px solid var(--color-300);
} 

.form-input.notValid input,
.form-input.notValid textarea,
.form-input.notValid select,
.form-group.notValid input,
.form-group.notValid textarea,
.form-group.notValid select {
    animation: notValid 1000ms;
}

.form-section {
    display: flex;
    position:relative;
    flex-direction: column;
    gap:1em;
    animation: opacity 650ms ease-in-out forwards;
}

.form-section:not(.active) {
    display:none;
}

.step-container {
    align-self: center;
    position: relative;
    width:80%;
    height:0.5em;
    background: linear-gradient(to right, var(--color-300), 0%, var(--color-400));
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.step-progress {
    content:'';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background: var(--color-300);
    border-radius: 0.25em;
    transition: width 350ms ease-in-out;
}

.form-step {
    position:relative;
    width: 1.25em;
    height: 1.25em;
    background-color: var(--color-400);
    border: 1px solid var(--color-300);
    color: var(--color-300);
    border-radius: 0.25em;
    transition: opacity 250ms;
}

.form-step.done {
    
    background-color: var(--color-300);
    color: var(--color-400);
 
}


.form-step.active {
    
    animation: scale15 250ms ease-in-out both 350ms;
 
}

.form-step:hover {
    
    animation: scale15 250ms ease-in-out both;
 
}

.form-step::after {
    opacity: 0;
    transition: opacity 250ms;
    font-size: 1em;
    line-height: 1em;
}

.form-step.active::after {
    position:absolute;
    font-weight: bold;
    content: '\25B6';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
}

.form-step.done::after {
    position:absolute;
    content: '\2714';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
}

.form-step:not(.active):hover::after {
    cursor: pointer;
    position:absolute;
    font-weight: bolder;
    content: '\21AA';
    animation: opacity 250ms ease-in-out forwards;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.form-step.done:hover::after {
    font-weight: bolder;
    content: '\21A9';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: opacity 250ms ease-in-out forwards;
}

.section-buttons {
    display: flex;
    flex-direction: row;
    gap: 4em;
    justify-content: center;
    padding-top: 2em;
}

.section-buttons > * {
    width: 40%;
}

.error-alert {
    color: red;
    font-size: 0.9em;
    opacity: .85;
}

li {
	padding-bottom: 0.8em
}

/* ========================================= MESSAGES ======================================== */

.message-container {

    min-width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.message-group {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.message-group-title {
    font-size: 1.2em;
    line-height: 1.2em;
    font-weight: bold;
    color: var(--color-250);
}

.message-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.message-list.reverse {
    flex-direction: column-reverse;
}

.single-message {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    padding: 1em;
    border-radius: 0.25rem;
}

.message-request {
    display: flex;
    flex-direction: column;
    background: var(--color-400);
    align-self: flex-start;
    gap: 0.25em;
    padding: 0.5em;
    border-radius: 0.25rem;
    box-shadow: 0 2px 5px var(--color-250);
    min-width: 50%;
    max-width: 70%;
}

.user-perspective .message-request {
    align-self: flex-end;
    background: var(--color-bg);
}

.message-request-user, .message-answer-label, .answer-attachment-title {
    font-size: 1.1em;
    font-weight: bold;
}

.message-request-date, .message-answer-date {
    font-size: 0.8em;
    border-bottom: 1px solid var(--color-250);
}

.message-request-text, .message-answer-text {
    padding: 0.5em;
}

.message-answer {
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    gap: 0.25em;
    padding: 0.5em;
    border-radius: 0.25rem;
    box-shadow: 0 2px 5px var(--color-250);
    min-width: 50%;
    max-width: 70%;
}

.message-request.new-message {
    display: none;
}

.user-perspective .message-request.new-message {
    display: flex;
    width: 100%;
    max-width: 95%;
    margin: 0 auto;
}



.user-perspective .message-answer {
    align-self: flex-start;
    background: var(--color-400);
}

.user-perspective .message-answer.to-answer {
    display:  none;
}


.message-answer-container.form-input, .message-request-container.form-input {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.25em;
}

.message-answer-container.form-input > textarea, .message-request-container.form-input > textarea {
    /* width: calc(100% - 1em); */
    max-width: calc(100% - 1em);
}

.message-answer-button, .message-request-button {
    display: flex;
    flex-direction: row;
    padding: 0.5em;
    justify-content: flex-end;
    gap: 0.5em;
    position: relative;
    align-items: center;
}

.message-hidden-file {
    display: none;
}

.message-answer-button > a, .message-request-button > a {
    position: absolute;
    left: 0;
}

.message-answer-button .error {
    align-self: center;
    color: red;
}

.message-answer-attachments {
    padding: 0.5em;
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    grid-template-columns: auto 1fr auto;
    user-select:none;
}

.answer-attachment-name {
    padding-inline: 1em;
}

.request-attachment {
    padding-inline: 2em;
    display: flex;
    flex-direction: row;
    align-items: center;
    user-select:none;
}

.message-request-button {
    display: none;
}

.user-perspective .message-request-button {
    display:flex;
}

/* ========================================= DASHBOARD ======================================== */

.dashboard {
    display: flex;
    align-items: center;
    justify-content: center;
    height: -webkit-fill-available;
    min-height: 28em;
    gap: 1.8em;
}

.dashboard-title {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--color-250);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 3em;
    position:relative;
    min-height: 2rem;
}

.dashboard-title > span {
    padding-right: 8rem;
    /* padding-bottom: 1rem; */
}

.dashboard-title > .material-icons.btn-2[data-title] {
	position: absolute;
	right: 0;
	top: 0rem;
}

.wide>.dashboard-title {
	border-bottom: 1px solid var(--color-250);
	margin-bottom: 2em;
	padding-bottom: 0.75em;
}

.dashboard-status-container {
    background: var(--color-400);
    border-radius: 0.25em;
    padding: 1em 2em 2.5em;
    box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
    user-select: none;
    width:48em;
    align-self: center;
    transition: all 350ms ease;
}

.dashboard-status {
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;
    background: var(--color-300);;
    height: 2px;
    margin: 1em;
}

.status-fill {
    position: absolute;
    width: 0;
    height: 4px;
    border-radius: 0.25em;
    background: var(--color-300);
}

.status-step {
    
    width: 0.5em;
    height: 0.5em;
    border-radius: 100%;
    background: var(--color-300);
    transition: all 400ms ease; 
    position: relative;
    display: flex;
}

.status-step-label {
    position: absolute;
    text-align: center;
    width: max-content;
    color: var(--color-300);;
    top: 2em;
    left: 0em;
    transform: translateX(calc( -50% + 0.4em ));
    font-size: 0.8em;
    max-width: 8em;
    transform-origin: center;
    transition: all 600ms ease 400ms; 
}

.column-dashboard, 
.column-dashboard-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.8em;
    user-select: none;
}

.column-dashboard.column-direction,
.column-dashboard-group.column-direction  {
    flex-direction: column;
}

.column-dashboard-group {
    margin-bottom: 2em;
    gap:1.2em;
}

.dashboard-card {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: 2em;
    align-items: center;
    height: 16em;
    width: 16em;
    background: var(--color-400);
    box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
    border-radius: 0.25em;
    transition: all 350ms ease-in-out;
    cursor: pointer;
}

.dashboard-card.disabled {
	filter: opacity(0.5);
	cursor:default;
}

.dashboard-card.card-long {
    width: 52em;
    height: 6em;
    flex-direction: row;
}

.dashboard-card.card-medium {
    width: 34em;
    height: 6em;
    flex-direction: row;
}

.dashboard-card.card-short {
    width: 16em;
    height: 6em;
    flex-direction: row;
    gap: 1em;
}

.dashboard-card.list {
    width: 30em;
    height: auto;
    padding: 1.4em;
}

.dashboard-card.list.active {
    background-image: linear-gradient(179deg, #54e979f2 100%, transparent);
}
.dashboard .dashboard-multi-columns {
    display: flex;
    gap: 2rem;
    text-align: center;
}
   

.dashboard .dashboard-multi-columns .dashboard-card {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: .25rem;
    transition: all 250ms ease;
}

.dashboard-card:not(.disabled, .card-select):hover {
    transform: scale(1.05);
}

.dashboard-card::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 0.25em;
    box-shadow: 0 5px 15px rgb(0 0 0 / 30%);
    transition: opacity 0.3s ease-in-out;
}

.dashboard-card:not(.disabled, .clicked):hover::after {
    opacity: 1;
}

.dashboard-card[data-updates]::before {
    content: attr(data-updates);
    position: absolute;
    top: -0.1em;
    right: 1em;
    width: 1.2em;
    height: 2em;
    background: red;
    border-radius: 40vh 40vh 100vh 100vh;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bolder;
    font-size: 1.2em;
    box-shadow: 0px 2px 3px 1px rgb(0 0 0 / 30%);
}

.dashboard-card-filler {
    content: '';
    position: absolute;
    height: 100%;
    width: 0;
    background-color: var(--color-300);
    transition: all 350ms ease-in-out;
    left: 0;
    
}

div.card-icon {
    font-size: 6em;
    color: var(--color-300);
    text-shadow: 0px 1px 8px rgb(0 0 0 / 30%);
}

.card-long > .card-icon, .card-short > .card-icon, .card-medium > .card-icon {
    font-size: 4em;
}

.card-title, .card-select-option {
    font-size: 1.5em;
    color: var(--color-300);
    font-weight: bolder;
    text-align: center;
    z-index: 1;
    line-height: 1em;
    max-width: 80%;
}

.dashboard-card.list > .card-title {
    font-size: 1.2em;
}

.card-title[label] {
    position: relative;
    translate: 0 .25rem;
    margin-left: .6em;
    text-align: left;
}

.card-title[label]:after {
    content: attr(label);
    position: absolute;
    top: -1.2em;
    left: 0;
    font-size: .6em;
    
}

.card-title[label]+.card-icon {
    font-size: 2.5em;
    margin-right: .2em;
}

.dashboard-card.card-select {
	width: 28em;
    height: 4em;
    flex-direction: row;
    justify-content: space-between;
/*     padding-inline: 1rem; */
	box-shadow:none;
	z-index: 100;
	user-select: none;
}

.card-select-option-wrapper {
    position: absolute;
    top: 95%;
    z-index: 10;
    background: inherit;
    width: inherit;
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    font-size: inherit;
    gap: 0.4em;
    align-items: center;
    padding-bottom: 1em;
    border-radius: 0 0 0.25rem 0.25rem;
   	background-image: linear-gradient(180deg, #0000, #fff9);
   	display:none;
   	top:0;
   	transition: all 350ms ease;
   	max-height: 35vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.dark-mode .card-select-option-wrapper {
	background-image: linear-gradient(180deg, #0000, #0006);
}

.card-select-option-wrapper.open {
	display:flex;
	top: 95%;
}

.card-select-option {
	font-size: 1.2em;
	width: 100%;
	padding: .3em;
	text-align:left;
	max-width:100%;
	margin-left: 1.2em;
}

.card-select-option-divider {
	border-top:1px solid var(--color-300);
	width:95%; 
	margin-block:1rem;
}

.card-select-option:hover {

	background-image: linear-gradient(90deg, #fff0, #0001 5%, #fff0);
}

.dark-mode .card-select-option:hover {

	background-image: linear-gradient(90deg, #fff0, #fff1 5%, #fff0);
}



/* ================================== STATS ====================================== */

.card {
    /* padding: 1em; */
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    /* gap: 1em; */
    align-items: center;
    height: 9em;
    width: 22em;
    background: var(--color-bg);
    box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
    border-radius: 0.25em;
    transition: all 350ms ease-in-out;
}

.card-header {
    display: flex;
    flex-direction: row;
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    background: var(--color-300);
    color: var(--color-bg);
    border-radius: 0.25em 0.25em 0 0;
    height: 2em;
    padding-block: 0.75em;
    box-shadow: 0 2px 2px rgb(0 0 0 / 30%);
}

.card-header[functionname] {
	cursor: pointer;
}

.card-header > h5 {display: flex;justify-content: center;align-items: center;gap: 1.25em;font-size: 1em;text-align: center;margin: 0;height: 4em;max-width: 80%;}

.card-content {font-size: 1.25em;height: 4em;justify-content: center;align-items: center;display: flex;}

table.widget-table {
    border-spacing: 2.5em;
}

.card-header > h5 > i {
    font-size: 1.4em;
    transition: all 350ms ease;
}

.card-header:hover > h5 > i {
    transform: scale(1.2);
}

.card-content td {
    padding: 0em 0.5em;
}

.card-content tr > td:nth-child(2) {
    font-size: 1.25em;
}

/* ================================== FOOTER ====================================== */

footer {
    height: 3rem;
    min-height: 3rem;
    background-color: var(--color-400);
    width: 100%;
    left:0;
    box-shadow: 0 -3px 5px rgb(0 0 0 / 30%);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    font-size: 0.7rem;
    color: var(--color-300);
}

.footer-elem {
    display: flex;
    align-items: center;
    justify-content: center;
}


.footer-logo-img {
    height: 28px;
}

.footer-icon {
    font-family: 'Material Icons';
    font-size: 1.25em;
    vertical-align: bottom;
}

/* LOADING */

.loading {
    display: none;
    color: var(--color-400);
    position: fixed;
    z-index: 10;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 4em;
    background: var(--color-250);
    
    justify-content: center;
    align-items: center;
    letter-spacing: 0.25em;
    margin-right: -0.25em;
    opacity: 0.85;
    font-family: 'Montserrat', sans-serif;
    animation: loading-appear 1000ms forwards;
    transition: height 500ms ease-in;

}

.loading.show {
    display: flex;
}

.content-loading {
    filter: blur(1px);
}

.loading>span {
    opacity: 0;
    position:relative;
    animation: loading-span-appear 300ms forwards ease-in;
    animation-delay:250ms;
}

.loading>span::after {
    content: '';
    position: absolute;
    animation: loading-border 4000ms infinite;
    animation-delay: 500ms;
    background: var(--color-300);
}

.loading.remove {
    height: 0;
}

.loading.remove * {
    display:none;
}

/* =================================================== NOTY ================================================== */

.noty-container {
    display:none;
}

/* ============================================== POP UP ======================================================= */

.content-popup, .noty-popup {
    position: fixed;
    background: var(--color-bg);
    box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
    display: none;
    flex-direction: column;
    border-radius: 0.25em;
    max-height: 65%;
    overflow: hidden;
    animation: popup-appear 400ms ease forwards;
    justify-self: center;
}

.content-popup-modal, .content-noty-modal {
	width: 100%;
	height: 100%;
	position: fixed;
	left:0px;
	top:0px;
	display: none;
	justify-content: center;
	z-index:10;
}

.content-popup-modal.visible, .content-noty-modal.visible {
    display:flex;
}


.content-popup {
	width: max(65%, 40em);
	top: 20%;
}

.noty-popup {
	width: max(40%, 40em);
	top: 50%;
    transform: translateY(-50%);
}

.content-popup.visible, .noty-popup.visible {
    display:flex;
}

.popup-nav {
    background: var(--color-200);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: .5em;
    box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
    user-select:none;
}

.noty-popup.success > .popup-nav, .noty-progress.success {
	background: var(--color-success);
}

.noty-popup.success .btn-1 {
	background: var(--color-success);
}

.noty-popup.error > .popup-nav, .noty-progress.error {
	background: var(--color-error);
}

.noty-popup.error .btn-1 {
	background: var(--color-error);
}

.noty-popup.warning > .popup-nav, .noty-progress.alert {
	background: var(--color-alert);
}

.noty-popup.info > .popup-nav, .noty-progress.info {
	background: var(--color-info);
}

.noty-progress {
	position:absolute;
	opacity: 0.2;
	animation: progress 2500ms ease;
	left: 0;
    top: 0;
    height: 100%;
}


.noty-popup .btn-1:hover {
	filter: brightness(0.9);
}


.popup-nav-title {
    font-size: 1.2rem;
    padding-inline: 1rem;
    color: var(--color-bg);
}

.popup-body {
	position:relative;
	display: flex;
    flex-direction: column;
    padding: 1.5em;
    gap: 0.5em;
    font-size: 1.05rem;
    
    animation-delay: 300ms;
    overflow-y: auto;
}

.content-popup .popup-body {
	opacity: 0;
    animation: opacity 350ms ease forwards;
} 

.popup-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.popup-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.popup-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    
    padding: 0.25em;
}

.popup-row-noborder {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    
    padding: 0.25em;
}

.popup-row-noborder.noflex > *:not(:last-child)::after {
    content: " ";
    width: 1rem;
}
.popup-row-noborder.noflex {
    display: block;
}

.popup-row-noborder > ul {
    padding: 0 0 0 1rem;
    margin: 0;
}

.popup-row-chackbox-container {
	border-radius: 0.25rem;
    background-color: var(--color-400);
}

.content-popup .popup-rows > .popup-row  + .popup-row {
    border-top: 1px solid var(--color-300);
}

.popup-buttons-container {
	display:flex;
	flex-direction: row;
	gap: 0.5em;
    justify-content: center;
}

.popup-button {
    display: flex;
    justify-content: center;
    margin-top: 2em;
}

.popup-row > textarea{
	width: -webkit-fill-available;
}

.popup-row.whole-column {
    grid-column: 1 / 3;
}

.popup-body > .popup-error {
	display:none;
	position:absolute;
	width: 100%;
	top: 0;
	left: 0;
	
	
}

.dynamic-btn-container {
    position: absolute;
    display: flex;
    right: 0;
    gap: 0.5em;
    padding: 1em;
    background: var(--color-bg);
    top: 3em;
    box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
    border-radius: 0.25em;
}

.dynamic-btn-container>.popup-button {
    margin: 0;
}

.form-input.is-password {
    position: relative;
}

.is-password.labelled:not(.popup-row-input) .show-visibility-password.material-icons {
    top: 82%;
}

.is-password > input[type="password"], .is-password > input[type="text"] {
    padding-right: 5ch;
    width: 41ch;
}

.is-password > .show-visibility-password.material-icons {
    position: absolute;
    top: 50%;
    right: 0.5em;
    color: var(--color-300);
    z-index: 1;
    font-size: 1.25rem;
    transform: translate(0, -50%);
    border-radius: 50%;
    line-height: 1.25rem;
    transition: all 350ms ease;
    cursor: pointer;
    min-width: 0;
    padding: 0.1em;
    user-select:none;
}

.show-visibility-password.material-icons:hover {
    background: var(--color-300);
    color: var(--color-400);
}

/* ============================================== ACCORDIONS ================================================== */

.column .accordion {
    display: flex;
    flex-direction: column;
    border-radius: 0.5em;
    background: var(--color-bg);
    box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100%;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    padding: 1em 1em;
    font-size: 1.2em;
    align-items: center;
    background: var(--color-300);
    color: var(--color-bg);cursor: pointer;}

.accordion-content {
    padding: 1em;
    display: none;
    animation: opacity 400ms ease;
    transform-origin:
    top;
}

.accordion.open > .accordion-content {
    display:block;
} 

.column.wide.max {
    min-width: 75%;
    max-width: 75%;
    gap: 1.75em;
}

.work-step {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    padding: 0.5em;
    border-radius: 0.25em;
    background: var(--color-bg);
}

.work-step:not(:first-child)::before {
    content: 'south';
    font-family: 'Material Icons';
    font-size: 1.5rem;
    margin-bottom: 2rem;
    line-height: 1em;
    padding-left: 1em;
}

.work-steps-container {
    display: flex;
    gap: 1em;
    flex-direction: column;
}

.work-step > span:nth-child(2) {
    font-size: 1.1em;
    font-weight: bold;
}

.work-step > span:nth-child(1) {
    font-size: 0.8em;
}

.step-detail {
    display: flex;
    flex-direction: column;
    border-radius: 0.25em;
    overflow:hidden;
    margin-block: 0.5em;
    border: 1px solid var(--color-300);
}

.step-detail > span:nth-child(1) {
    background: var(--color-300);
    color:var(--color-bg);
    padding: 0.5em;
    font-weight:bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap-reverse;
}

.step-detail > span:nth-child(2) {
    padding: 0.5em;
    font-weight:bold;
}

.step-detail-text {
	display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

/* ============================================== BACK BUTTON ================================================== */

.back-icon {
    position: fixed;
    top: 2em;
    left: 0em;
    background: var(--color-400);
    border-radius: 0 0.25em 0.25em 0;
    padding: 0.4em 1em;
    padding-left: 1.4em;
    transition: all 350ms ease;
    display: none;
    animation: back-slide 350ms ease forwards;
    transform-origin: left;
    box-shadow: 2px 2px 5px rgb(0 0 0 / 30%);
}

.back-icon.visible {
    display: flex;
}

.back-icon:hover {
    cursor: pointer;
    background: var(--color-300);
    color: var(--color-bg);
}

.back-icon:hover::before {
    content: attr(data-label);
    justify-self: center;
    align-self: center;
    padding-right: 1em;
}

/* ============================================== RECORDER ================================================== */

.recorder_wrapper {
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.recorder {
    display: flex;
    width: 500px;
    height: 100px;
    max-width: 100%;
    flex-direction: row;
    justify-content: center;
    gap: .5rem;
    align-items: center;
}

div#msg_box {
    width: 2rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: .25rem;
    padding: .25rem;
}

.record_btn {
    width: 80px;
    height: 80px;
    font-family: 'Material Icons';
    font-size: 48px;
    color: var(--color-300);
    background: none;
    border: 2px solid var(--color-300);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.15s linear;
    display: flex;
    justify-content: center;
    align-items: center;
}

.record_btn:hover {
    transition: 0.15s linear;
    transform: scale( 1.05 );
}

.record_btn:active {
    background: #e5e5e5;
}

.record_btn:after {
    content: 'mic';
}

.record_btn[disabled] {
    border: 2px solid #ccc;
}

.record_btn[disabled]:after {
    content: '\E02B';
    color: #ccc;
}

.record_btn[disabled]:hover {
    transition: 0.15s linear;
    transform: none;
}

.record_btn[disabled]:active {
    background: none;
}

.recording {
    animation: recording 2s infinite ease-in-out;
    position: relative;
}

.recording:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0px;
    height: 0px;
    margin: 0px;
    border-radius: 50%;
    background: rgba( 0, 0, 0, 0.1 );
    animation: recording_before 2s infinite ease-in-out;
    z-index: -1;
}

@keyframes recording {
    from {
        transform: scale( 1.1 );
    }

    50% {
        transform: none;
    }

    to {
        transform: scale( 1.1 );
    }
}

@keyframes recording_before {
    80% {
        width: 200px;
        height: 200px;
        margin: -100px;
        opacity: 0;
    }

    to {
        opacity: 0;
    }
}

.record_canvas {
    width: 60px;
    height: 100px;
    display: inline-block;
    
}

.txt_btn {
    color: #000;
    text-decoration: none;
    transition: 0.15s linear;
    animation: text_btn 0.3s ease-in-out;
}

#recordings-shelf {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
}

.recording-shelved {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .5rem;
    border-radius: .4rem;
    box-shadow: 0 0 5px 2px #0001;
    align-items: flex-start;
}

.recording-shelved-title {
    width: 100%;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.recording-shelved-player {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

.recording-shelved-player > .icon.material-icons.btn-2 {
    font-size: 3.5rem;
    padding: 0px;
    margin: .5rem;
}

/* ============================================== SCROLLBAR =============================================== */

::-webkit-scrollbar {
    width: 0.5em;
  }
  

::-webkit-scrollbar-track {
    background: var(--color-400);
}


::-webkit-scrollbar-thumb {
    background: var(--color-300);
}


::-webkit-scrollbar-thumb:hover {
    background: var(--color-200);
}

/* ========================================= ANIMATIONS ======================================== */

@keyframes opacity {
    0% {
        opacity: 0;
    }
    
    100% {
        opacity: 1;        
    }
}

@keyframes scale15 {
    0% {
        transform: scale(1);
    }
    
    100% {
        transform: scale(1.35);    
    }
}

@keyframes notValid {
    0% {
        transform: translateX(-0.2em);
        outline: 1px solid rgba(255, 0, 0, 0.0);
    }
    10% {
        transform: translateX(0.2em);
        outline: 1px solid rgba(255, 0, 0, 0.3);
    }
    20% {
        transform: translateX(-0.4em);
        outline: 1px solid rgba(255, 0, 0, 0.6);
    }
    30% {
        transform: translateX(0.4em);
        outline: 1px solid rgba(255, 0, 0, 1);
    }
    40% {
        transform: translateX(-0.4em);
        outline: 1px solid rgba(255, 0, 0, 1);
    }
    50% {
        transform: translateX(0.4em);   
        outline: 1px solid rgba(255, 0, 0, 1);
    }
    60% {
        transform: translateX(-0.4em);
        outline: 1px solid rgba(255, 0, 0, 1);
    }
    70% {
        transform: translateX(0.4em);
        outline: 1px solid rgba(255, 0, 0, 1);
    }
    80% {
        transform: translateX(-0.4em);
        outline: 1px solid rgba(255, 0, 0, 0.6);
    }
    90% {
        transform: translateX(0.2em);
        outline: 1px solid rgba(255, 0, 0, 0.3);
    }
    100% {
        transform: translateX(0em);   
        outline: 1px solid rgba(255, 0, 0, 0.0);
    }
}

@keyframes loading-appear {
    0% {
        width: 0%;
    }
    
    
    100%{
        width: 100%;
    
    
    }
}
@keyframes loading-span-appear {
    0% {
        opacity: 0;
    }

    100%{
        opacity: 1;
    }

}


@keyframes loading-border {
    0% {
        top: -1em;
        left: -1em;
        height: 0.2em;
        width: 0.2em;
        
    }

    12% {
        top: -1em;
        left: -1em;
        height: 0.2em;
        width: calc(100% + 1.75em);
        
    }

    25% {
        top: -1em;
        left: calc(100% + 0.55em);
        height: 0.2em;
        width: 0.2em;
        
    }

    37% {
        top: -1em;
        left: calc(100% + 0.55em);
        height: calc(100% + 2em);
        width: 0.2em;
        
    }

    50% {
        top: calc(100% + 0.8em);
        left: calc(100% + 0.55em);
        height: 0.2em;
        width: 0.2em;
        
    }

    62% {
        top: calc(100% + 0.8em);
        left: -1em;
        height: 0.2em;
        width: calc(100% + 1.75em);
        
    }
    
    75% {
        top: calc(100% + 0.8em);
        left: -1em;
        height: 0.2em;
        width: 0.2em;
       
    }
    87% {
        top: -1em;
        left: -1em;
        height: calc(100% + 2em);
        width: 0.2em;
        
    }
    100% {
        top: -1em;
        left: -1em;
        height: 0.2em;
        width: 0.2em;
        
    }
}


@keyframes back-slide {

    0% {
        /* transform: scaleX(0); */
        left: -4em;
    }

    100% {
        /* transform: scaleX(1); */
        left:0;
    }

}

@keyframes extend {

    0% {
    	
    	font-size: 0;
        opacity: 0;
    }
    
    25% {
    	
    	font-size: 1rem;
    	opacity: 0;
    
    }

    100% {
       font-size: 1rem;
       opacity: 1;
    }

}

@keyframes progress {

    0% {
    	
    	width: 0;
    }
    
    100% {
    	
    	width: 100%;
    
    }

}

@media screen and (max-width: 1500px) {
	.popup-columns {
	    display: grid;
	    grid-template-columns: 1fr;
	}
	
}

@media screen and (max-width: 1050px) {
	
  .header-row {
   
    grid-template-columns: 1fr 1fr;
  
  }
	
  .header-elem:nth-child(2) {
  	display:none;
  }
  
  
  .home .column-text {
  	flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .home .column-paragraph {
      max-width: 80%;
  }
  
  div.card-icon {
  	font-size: 5em;
  }
  .card-title {
  	font-size: 1.2em;
  }
  .dashboard-card {
  	height: 12em;
    width: 12em;
  }
  .dashboard-card.card-short {
  	width: 12em;
  }
  .dashboard-card.card-medium {
  	width: 26em;
  }
  .dashboard-card.card-long {
  	width: 40em;
  }
  .dashboard-status-container {
	width: 36em;
  }
  .status-step:not(.active) > .status-step-label {
	display: none;
  }
  .dashboard .dashboard-multi-columns {
    flex-direction: column;
  }
  
}

@media screen and (max-width: 750px) {
	.header-row {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
	}
	.header-row .header-elem {
		justify-self:center;
	}
	.header-btn > a > span {
		display: none;
	}
	.dashboard-card.list {
		width: 15em;
	}
	footer {
		flex-direction: column;
	    height: fit-content;
	    width: -webkit-fill-available;
	    padding-top: 1em;
	}
	.column > * {
		min-width: 0px;
	}
	
	.column-dashboard, .column-dashboard-group {
		flex-direction: column;
	}
	
	div.card-icon {
	  	font-size: 5em;
	}
	.card-title {
	  	font-size: 1.2em;
	}
	.dashboard-card {
	  	height: 12em;
	    width: min(28em, 90vw);
	}
	.dashboard-card.card-short {
	  	height: 12em;
	    width: min(28em, 90vw);
	    flex-direction: column;
	}
	.dashboard-card.card-medium {
	  	height: 12em;
	    width: min(28em, 90vw);
	    flex-direction: column;
	}
	.dashboard-card.card-long {
	  	height: 12em;
	    width: min(28em, 90vw);
	    flex-direction: column;
	}
	
	.content-popup, .noty-popup {
  		width: min(95%, 40em);
    }
    
    .pagination {
	    flex-direction: column;
	    gap: 1em;
	    justify-content: center;
	}
	
	.pagination-select {
	    justify-content: center;
	}
	.pagination-buttons {
	    margin: 0 auto;
	}
	
	.widget-table tr {
		display:flex;
		flex-direction: column;
		gap: 1em;
		justify-content: center;
    	align-items: center;
	}
	
	.dashboard-status-container {
		width: min(24em, 80vw);
	}
	.status-step:not(.active) > .status-step-label {
		display: none;
	}
	
	.dashboard-card.card-select {
		width: min(28em, 90vw);
	}
	
	.dashboard-card.card-select > .card-icon {
		position: absolute;
		right:0;
	}
}