/* Config */
:root {
  --primary1-color: #7373BD;     
  --primary2-color: #0c5709;    
  --primary3-color: navy;  
  --primary4-color: goldenrod; 
  --primary5-color: #fff; 
  --primary6-color: #ccc;    
  --primary7-color: #000;   

  --button-primary-active-bg-color: #7373BD; 
  --button-primary-active-text-color: #fff;  
  --button-primary-highlight-bg-color: #7373BD; 
  --button-primary-disabled-bg-color: #7373BD;  

  --button-secondary-bg-color: #c6c6c9; 
  --button-secondary-fg-color: #333; 
  --button-warning-bg-color: #b47177; 
  --button-warning-fg-color: #fff; 

  --error-bg-color: #f00;    
  --error-fg-color: #fff;    
  --warning-bg-color: #ff0;  
  --warning-fg-color: #000;    
  --info-bg-color: #0f0;     
  --info-fg-color: #fff; 

  --link-text-color: navy; 
}

/* General */
body {
    color: #333;
    font-family: Inter, Roboto;
    font-size: 1em;   
    box-sizing: border-box; 
}

hr {
    margin-bottom: 2em;
}

a {
    color: navy;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.center {
    text-align: center;
}

select,
option,
input[type=text],
input[type=number],
input[type=email],
input[type=password],
input[type=datetime-local],
input[type=text]::first-line,
input[type=email]::first-line,
input[type=password]:first-line,
input[type=datetime-local]:first-line,
textarea {
    border-radius: 0.5em;
    font-size: 1.2em;
    font-family: monospace;
    line-height: 1.2;  
    letter-spacing: 0.03em;	
    padding: 0.6em 0.8em;
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
    width: 100%;
    box-sizing: border-box;
}

input::placeholder,
textarea::placeholder {
  color: #aaa;
}

input:focus,
input:focus::first-line {
    border: 1px solid lightgray;
    outline: none;
}

input[type=checkbox] {
    display: inline;
    border-radius: 0.5em;
    margin-right: 0.5em;
    padding: 0.6em 0.8em;
    width: 1.4em;
    height: 1.4em;
}

label {
    display: inline-block;
    margin-bottom: 0.2em;
    font-size: 1em;
    line-height: 1;
}

[error]:not([error=""])::after {
    display: block;
    content: attr(error);
    color: red;
}

/* General */
.hidden {
    display: none;
}

.mime-general-hidden {
    display: none;
}

.mime-general-nomargin {
    margin: 0;
}

.mime-general-center {
    text-align: center;
}

.mime-general-link {
    text-decoration: none;
    color: var(--link-text-color);
    font-weight: bold;
}

.mime-general-link:hover {
    text-decoration: underline;
}

.mime-general-icon {
    margin-right: 0.3em;
}

/* Page */
.mime-section-title {
    margin: 0 0 0.3em 0;
    font-size: 1.4em;
    color: #333;
}

.mime-section-link {
    color: #333;
}

.mime-page-back:hover {
    text-decoration: none;
    color: #444;
}

.mime-page-back-icon {
    margin-right: 0.5em;
}

/* Form */
.mime-form-section {
    margin-bottom: 2em;
}

.mime-form {
    margin: 2em 0 3em 0;
}

.mime-form-title {
    margin: 0 0 0.5em 0;
    font-size: 1.8em;
    line-height: 1.4;
    letter-spacing: 0.04em;
}

.mime-form-text {
    margin: 0 0 1em 0;
    font-size: 1.2em;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: #333;
}

.mime-form-text:last-child {
    margin: 0;
}

.mime-form-link {
    margin: 0 0 0.2em 0;
}

.mime-form-row {
    margin: 0 0 2em 0;
}

.mime-form-row--middle {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
}

.mime-form-row.hidden {
    display: none;
}

.mime-form-row--right {
    float: right;
}

.mime-form-row--center {
    text-align: center;
}

.mime-form-row--hidden {
    display: none;
}

.mime-form-list {
    margin: 0 0 2em 0;
    padding: 0;
    list-style: none;
    list-style-position: inside;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em;
}

.mime-form-list-item {
    
}

.mime-form-button {
    padding: 0.6em 1.4em;
    background-color: rgba(215, 221, 230, 0.6);
    font-size: 1.2em;
    line-height: 1;
    letter-spacing: 0.03em;
    color: #333;
    font-weight: bold;
    outline: none;
    border-radius: 0.5em;
    border: none;
    cursor: pointer;    
    min-width: min(400px, calc(100% - 2em));
    box-shadow: 8px 4px 4px #ccc;
}

.mime-form-button:hover {
    background-color:rgb(130, 130, 204);
    box-shadow: 10px 5px 5px #aaa;   
    color: #fff; 
}

.mime-form-button--small {
    min-width: 40px;
}

.mime-form-button--default {
    font-size: 1.4em;
    line-height: 1;
    background-color: #7373BD;
    letter-spacing: 0.04em;
    color: #fff;
    box-shadow: 8px 4px 4px #ccc;
    min-width: 100%;
}

.mime-form-button--default:hover {
    background-color:rgb(130, 130, 204);
    box-shadow: 10px 5px 5px #aaa;   
}

.mime-form-button--warning {
    font-size: 1.4em;
    line-height: 1;
    background-color: #bd6767;
    letter-spacing: 0.04em;
    color: #fff;
    box-shadow: 8px 4px 4px #ccc;
    min-width: 100%;
}

.mime-form-button--warning:hover {
    background-color:#9c5050;
    box-shadow: 10px 5px 5px #aaa;   
}

.mime-form-indent {
    margin-left: 1em;
    margin-right: 1em;
}

.mime-form-result {
    padding: 0.5em 1em;
    text-align: center;
    border-radius: 0.4em;
}

.mime-form-result--success {
    background-color: #A5FF30;
    color: #000;    
}

.mime-form-result--failure {
    background-color: #FFB5B7;
    color: #000;
}

.mime-form-result:empty {
    display: none;
}

.mime-form-grid {
    margin: 0 0 2em 0;
    padding: 0.5em;
    list-style: none;
    list-style-position: inside;    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    align-content: stretch;
    gap: 0.5em;
    border: 1px solid #ccc;
    color: #333;
    background-color: #fff;
    border-radius: 0.5em;
}

.mime-form-grid-item {
    display: block;
    flex-basis: 0px;
    border: 1px solid #eee;
    border-radius: 0.2em;
}

.mime-form-grid-item:hover {
    background-color: aliceblue;
}

.mime-form-grid-item--selected {
    border: 1px solid #bbb;
    background-color: aliceblue;
}

.mime-form-grid:hover .mime-form-grid-item--selected {
    background-color: unset;
}

/* Form drop down button */
.mime-form-dropdownbutton {
    display: inline-block;
    background-color: rgba(215, 221, 230, 0.6);
    font-size: 1em;
    line-height: 1;
    letter-spacing: 0.03em;
    color: #333;
    font-weight: normal;
    outline: none;
    border-radius: 0.2em;
    border: none;
    cursor: pointer;    
    box-shadow: 4px 2px 2px #ccc;
    width: max-content;
    text-align: left;
}

.mime-form-dropdownbutton-main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    position: relative;
}

.mime-form-dropdownbutton-text {
    padding: 0.4em 0.25em 0.4em 0.5em;
    flex-grow: 1;
}

.mime-form-dropdownbutton-downarrow {
    padding: 0.4em 0.5em 0.4em 0.25em;
}

.mime-form-dropdownbutton-contextmenu {    
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-position: inside;
    position: absolute;
    background-color:#fff;
    font-size: 1em;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0.03em;
    color: #333;
    outline: none;
    border-radius: 0.2em;
    border: none;
    cursor: pointer;    
    box-shadow: 8px 4px 4px #ccc;
    z-index: 10;
}

.mime-form-dropdownbutton-contextmenu--opened {
    display: block;
}

.mime-form-dropdownbutton-contextitem {
    margin: 0.2em;
    padding: 0.4em 0.5em;
    color: #666;
}

.mime-form-dropdownbutton-contextitem:hover {
    background-color: aliceblue;
}

.mime-form-input-title {
    display: block;
    margin-bottom: 0.2em;
    font-size: 1em;
    line-height: 1;
    letter-spacing: 0.04em;
}

.mime-form-toolbar {
    padding: 0.4em;
    border: 1px solid #ccc;
    border-radius: 0.5em;
    background-color: #fff;
    margin-bottom: 2em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    align-content: stretch;
    gap: 0.5em;
}

.mime-form-toolbar--vertical {
    flex-direction: column;
}

.mime-form-toolbar-item {
    margin: 0;
    padding: 0.5em 1em;
    background-color: rgba(215, 221, 230, 0.6);
    border: 1px solid #ccc;
    font-size: 1em;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0.03em;
    color: #333;
    outline: none;
    border-radius: 0.3em;
    cursor: pointer;    
    text-align: center;
    box-shadow: 4px 2px 2px #ccc;
    flex-grow: 1;
}

.mime-form-toolbar-item:hover {
    background-color: #7373BD;
    box-shadow: 8px 4px 4px #ccc;
    color: #fff;
}

.mime-form-toolbar-item[disabled="disabled"] {
    background-color: rgba(191, 194, 201, 0.6);
    box-shadow: 4px 2px 2px #ccc;
    cursor: not-allowed;
    color: #fff;
}

/* */
.mime-form-accordion-items {
    margin: 0 0 2em 0;
    padding: 0;
    list-style: none;
    list-style-position: inside;
    /*background-color: #fff;
    border-radius: 0.5em;
    border: 1px solid #ccc;*/
}

.mime-form-accordion-item {
    padding: 1em;
    font-size: 1.2em;
    font-weight: normal;
    line-height: 1;
    color: #333;
    border-bottom: 1px solid #ccc;
}

.mime-form-accordion-item:last-child {
    border-bottom: none;
}

.mime-form-accordion-item-switch {
    display: none !important;
}

.mime-form-accordion-item-header {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    cursor: pointer;
}

.mime-form-accordion-item-header-text {
    margin: 0;
    padding: 0;
    line-height: 1.2;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    align-content: center;
}

.mime-form-accordion-item-header-arrow {
    padding: 0 0.5em;
}

.mime-form-accordion-item-header-text-icon {
    margin-right: 0.5em;
    color: #0c5709;
}

.mime-form-accordion-item-header-icon {

}

.mime-form-accordion-item-body {
    margin: 1em 0 0 0;
    padding: 1em;
    background-color: rgba(215, 221, 230, 0.6);
    border-radius: 0.5em;
    line-height: 1.4;
}

.mime-form-accordion-item-body {
    margin: 0;
    padding: 0 1em;
    height: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: all 0.75s ease;
}

.mime-form-accordion-item-switch:checked ~ article.mime-form-accordion-item-body {   
    margin: 1em 0 0 0;
    padding: 1em;
    height: auto;
}

.mime-form-accordion-item-switch:checked ~ .mime-form-accordion-item-header .mime-form-accordion-item-header-arrow-icon {
    transform: rotate(180deg);
}


/* Talble */
.mime-table {
    margin: 0 0 2em 0;
    border: 1px solid #ccc;
    border-radius: 0.5em;
    background-color: #fff;
    width: 100%;
    padding: 0.4em;
}

.mime-table-thead {
    background-color: rgba(215, 221, 230, 0.6);
    color: #333;
}

.mime-table-thead .mime-table-cell {
    border-radius: 0.3em;
}

.mime-table-row {
}

.mime-table-row:last-child {
    margin-bottom: 0;
    border-bottom: none;   
}

.mime-table-tbody .mime-table-row:hover {
    background-color: beige;
}

.mime-table-cell--center {
    text-align: center;
}

.mime-table-cell--right {
    text-align: right;
}

.mime-table-cell {
    padding: 0.6em 1em;
    border-bottom: 1px dotted #999;
}

.mime-table-row:last-child .mime-table-cell {
    border-bottom: none;   
}

/* Cookie banner */
.cbanner-background {
  
}

.cbanner-background--selected {	
    display: block;
	position: fixed;	
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(169, 169, 169, .4);	
	z-index: 100000;
}

#cbanner_dismiss {
    display: none;
}

.cbanner {
    position: fixed;
    left: 2em;
    bottom: 2em;
    padding: 1.5em;
    background-color: #fff;
    border-radius: 1em;
    color: #333;
    z-index: 100000;
    -webkit-box-shadow: 3px 9px 27px -2px #61666E;
    box-shadow: 3px 9px 27px -2px #61666E;
    max-width: min(450px, calc(100vw - 4em)); 
}

.cbanner-background--selected .cbanner {
    left: 50%;
    top: 25%;
    bottom: unset;  
    transform: translate(-50%, -25%);
}

.cbanner-background--selected #cbanner_dismiss {
    display: block;
}


.cbanner-title {
    margin: 0 0 1em 0;
    color: #000;
    font-weight: bold;
    font-size: 1.1em;
}

.cbanner-instructions {
    margin: 0 0 1em 0;
    letter-spacing: 0.04em;
    line-height: 1.3;
    font-weight: normal;
}

#cbanner_acceptall {
    width: 100%;
    margin: 0.5em 0; 
    padding: 0.3em;
    color: #fff;
    background-color: #20688F;
    border-radius: 5px;   
    font-size: 1em;     
    font-weight: bold;                
}

.cbanner_buttons_row {
    display: flex;
    flex-direction: row;
    align-content: stretch;
    flex-wrap: wrap;
    gap: 0em;
}

#cbanner_dismiss,
#cbanner_save {
    margin: 0; 
    padding: 0.3em;
    color: #20688F;
    background-color: #fff;
    border-radius: 5px;   
    font-size: 1em;    
    border: 2px solid #eee;  
    flex-grow: 1;      
    font-weight: bold;      
}

#cbanner_dismiss:hover,
#cbanner_save:hover {
    border: 2px solid #20688F;
}

.banner-option {
    font-weight: normal;
    line-height: 2em;
}

.cbanner-options {
    clear: both;
    margin: 0 0 2em 0;
    padding: 0;
    list-style: none;
    list-style-position: inside;            
}

.cbanner-option {
    margin: 0.8em 1em;
    padding: 0;
    line-height: 1;
}

.cbanner-switch {
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    margin-right: 1em;
    padding: 2px;
    background-color: orange;
    border-radius: 1em;
    color: #fff;         
    width: 2em;
    height: 1em;
    vertical-align: top;
    cursor: pointer;
}

.cbanner-switch-inner {
    display: inline-block;
    margin: 0;
    padding: 0;
    background-color: #fff;  
    border-radius: 1em;  
    width: 1em;            
}

.cbanner-switch-enabled {
    background-color: green;
    justify-content: flex-end;
}

.cbanner-switch-disabled {
    background-color: gray;
    cursor: not-allowed;
}

.cbanner-link {
    color: darkgreen;
    text-decoration: none;
}

.cbanner-link:hover {
    text-decoration: underline;
}

/* Message box */
.mime-messagebox-background {
	position: fixed;			
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(169, 169, 169, .4);
	z-index: 1000;
}

.mime-messagebox {
	position: absolute;			
	left: 50%;
	top: 25%;
	transform: translate(-50%, -25%);
	margin: 0;
	padding: 1em;
	list-style: none;
	background-color: #fff;
	border: 1px solid gray;
	font-size: 1em;
	line-height: 1.2;
	font-weight: normal;
	-webkit-box-shadow: 3px 3px 7px -2px #61666E; 
	box-shadow: 3px 3px 7px -2px #61666E;
	border: 1px solid #999;
	border-radius: 5px;	
} 

.mime-messagebox-title {
    font-size: 1em;
	margin: 0 0 0.5em 0;
    color: #000;
}

.mime-messagebox-text {
	margin: 0 0 1em 0;
    padding: 1em;
    color: #000;
}

.mime-messagebox-footer {
	margin: 0 ;
}

.mime-messagebox-buttons {	
	margin: 0;
	padding: 0;
	text-align: center;
	list-style: none;
}

.mime-messagebox-button {	
  display: inline-block;
  padding: 0 0.4em;
  font-size: 1.3em;
  line-height: 32px;
  background-color: #cedae1;
  color: #000;
  letter-spacing: 0.04em;	
  border-radius: 0.2em;
  border: none;
  min-width: 125px;
  cursor: pointer;
}

.mime-messagebox-button:disabled {
  background-color: #B0BBC1;
  color: #fff;
  cursor: not-allowed;
}

.mime-messagebox-buttons li {
	display: inline;
	margin: 0 1em 0 0;
}

.mime-messagebox-button--main {
  color: #fff;
  background-color: #0078CE;
}

.mime-messagebox-buttons li:last-child {
	margin-right: 0;
}

/* Mobile menu */
.mime-mobilemenu {
    display: none;
    padding: 1em;
}

.mime-mobilemenu--icon {
    display: none;
    font-size: 2em;
}

.mime-mobilemenu-items {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-position: inside;
}

.mime-mobilemenu-item {
    display: flex;
    margin: 0;
    padding: 0.5em;
    font-size: 1.5em;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: left;
    align-content: center;
    align-items: stretch;
    gap: 0.5em;
    border-radius: 0.2em;
    cursor: pointer;
}

.mime-mobilemenu-item:hover {
    background-color: #ccc;
}

.mime-mobilemenu-item-icon {
    color: black;    
}

.mime-mobilemenu-item-text {
    color: black;
}

/* Mime */
.mime-wrapper {
}

.mime-viewport {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    align-content: stretch;
    min-height: 100vh; 
    gap: 0;
    background-image: url('/res/images/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.mime-header {
    margin-bottom: 2em;
}

.mime-body {
    flex-grow: 1;
}

.mime-middlecolumn {
    max-width: 1200px;
    margin: 0 auto;
}

.mime-section  {
    margin-bottom: 3.5em;   
}

.mime-menu {
    margin: 0;
    padding: 0.3em 1em;
    list-style: none;
    list-style-position: inside;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: right;
    align-items: center;
    gap: 0.5em;
}

.mime-menu-link {
    padding: 0.3em 0.8em;
    border-radius: 0.3em;
    font-size: 0.9em;
    text-decoration: none;
    letter-spacing: 0.03em;
    color: #000;
}

.mime-menu-link:hover {
    background-color: #ddd;
    text-decoration: none;
}

.mime-mainmenu-container {
    margin: 2em 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6em;
}

.mime-mainmenu-right {
    flex-grow: 1;
}

.mime-mainmenu {
    margin: 0;
    padding: 1.4em 1em;
    list-style: none;
    list-style-position: inside;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
}

.mime-mainmenu-item {
    display: inline-block;
}

.mime-logo {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    text-decoration: none;
}

.mime-logo:hover {
    text-decoration: none;
}

.mime-logo--image {
    height: 64px;
    margin-right: 1em;
}

.mime-logo--text {
    font-size: 2.5em;
    color: #0c5709;
    letter-spacing: -0.02em;
    font-weight: bold;
    font-style: italic;
    font-family: 'Playfair Display', 'Georgia Italic';
    font-optical-sizing: auto;
}

.mime-mainmenu-link {
    padding: 0.6em 0.3em;
    text-decoration: none !important;
    font-size: 1.2em;
    font-weight: bold;
    letter-spacing: 0.03em;
    color: black;
    border-bottom: 5px none #7054F1;
}

.mime-mainmenu-link:hover {
    border-bottom: 5px solid #7054F1;
    border-radius: 0.2em;
}

.mime-status-weak,
.mime-status-fair,
.mime-status-good,
.mime-status-strong,
.mime-status-full {
    margin-right: 0.5em;
    font-size: 1em;
}

.mime-status-weak {
    color: #D62C2C;
}

.mime-status-fair {
    color: #EA7600;
}

.mime-status-good {
    color: #F2C500 ;
}

.mime-status-strong {
    color: #8AC926;
}

.mime-status-full {
    color: #2E7D32;
}

.mime-status--language {
    color: navy;
    margin-right: 0.5em;
    font-size: 1em;
}

.mime-status--user {
    color: navy;
    margin-right: 0.5em;
    font-size: 1em;
}

/* Intro */
.mime-intro {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4em;
}

.mime-intro-left {
    padding: 6em 0;
    flex-basis: 55%;   
}

.mime-intro-left--small {
    padding: 3em 0;
}

.mime-intro-right {
    
}

.mime-intro-title {
    margin: 0 0 2rem 0;
    font-size: 3.5em;
    line-height: 1.2;
}

.mime-intro-subtitle {
    margin: 0 0 2em 0;
    font-size: 2em;
    font-weight: normal;
    color: #666; 
    line-height: 1.4;
}

.mime-intro-subtitle:last-child {
    margin: 0;
}

.mime-intro-button {    
    padding: 0.8em 1.5em;
    background-color: #7373BD;
    font-size: 1.5em;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #fff;
    font-weight: bold;
    outline: none;
    border-radius: 0.5em;
    border: none;
    cursor: pointer;    
    box-shadow: 8px 4px 4px #ccc;
}

.mime-intro-button:hover {
    background-color:rgb(130, 130, 204);
    box-shadow: 10px 5px 5px #aaa;
}

.mime-robot {
    max-height: 400px;
}

.mime-content {
    margin: 3.5em 0;
    font-size: 1.4em;
    line-height: 1.4;
    word-break: break-word;
}

/* Footer */
.mime-footer {
    margin-top: 2em;
    background-color: #7373BD;    
    box-shadow: 0px -2px #ccc;
}

.mime-footer-container {
    padding: 3.5em 0;
}

.mime-footer-sections {    
    margin-bottom: 2em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5em;
}

.mime-footer-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-position: inside;
}

.mime-footer-menu-title {
    display: inline-block;
    margin: 0 0 0.5em 0;
    color: goldenrod;
    font-size: 1.3em;
    line-height: 1.5;
    font-weight: bold;
}

.mime-footer-menu-link {
    display: inline-block;
    margin: 0.2em 0;
    color: #fafafa;
    font-size: 1.2em;
    line-height: 1.3;
    text-decoration: none;
    letter-spacing: 0.04em;
}

.mime-footer-slogan {
    font-size: 2em;
    margin: 0 0 1em 0;
    color: #fff;
    font-weight: bold;
    line-height: 1.4;
}

.mime-footer-slogan--highlight {
    color:rgb(150, 174, 190);
}

.mime-preheader {
    padding: 0.3em 0;
    border-bottom: 1px solid lightgray;
}

/* Recommended */ 
.mime-recommends {
    padding: 3.5em 0;
}

.mime-recommends-title {
    font-size: 2.2em;
    margin: 0 0 1em 0; 
}

.mime-recommends-items {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-position: inside;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2em;
}

.mime-recommends-item {
    padding: 1em;
    background-color:rgba(215, 221, 230, 0.6);
    border-radius: 1em;
    min-width: 225px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;    
    justify-content: space-between;
    align-items: stretch;
    flex-grow: 1;
    flex-basis: 0;
}

.mime-recommends-user {
    margin: 0 0 1em 0;
    color: #333;
    font-size: 1.1em;
}

.mime-recommends-user-icon {
    margin-right: 0.5em;
}

.mime-recommends-comment {
    margin: 0 0 1em 0;
    color: #666;
    letter-spacing: 0.04em;
    flex-grow: 1;
}

.mime-recommend-stars {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-position: inside;
}

.mime-recommend-star {
    display: inline-block;
    padding: 0 0.1em;
}

.mime-recommend-star-icon.fa-solid {
    color:rgb(169, 172, 15);
}

.mime-recommend-star-icon.fa-regular {
    color: #999;
}

/* Pricing */ 
.mime-pricing {
    padding: 3.5em 0;  
}

.mime-pricing-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;  
    gap: 3em;  
}

.mime-pricing-left {
    width: 400px;
}

.mime-pricing-right {
    flex-grow: 1;
    flex-basis: 0;
}

.mime-pricing-intro-text {
    margin: 0 0 1em 0;
    color: #333;
    font-size: 1.6em;    
    line-height: 1.4;
}

.mime-pricing-title {
    font-size: 2.2em;
    margin: 0 0 1em 0; 
}

.mime-pricing-items {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-position: inside;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4em;
}

.mime-pricing-item {
    padding: 1.5em;
    background-color: #7373BD;
    border-radius: 1em;
    min-width: 225px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;    
    justify-content: space-between;
    align-items: stretch;
    flex-grow: 1;
    flex-basis: 0;
    box-shadow: 4px 2px 2px #ccc;
}

.mime-pricing-user {
    font-size: 1.5em;
    text-align: center;
    margin: 0 0 1em 0;
    color: #fff;
}

.mime-pricing-comment {
    margin: 0 0 2em 0; 
    color: #eee;
}

.mime-pricing-button { 
    padding: 0.4em 1em;
    background-color: #fff;
    font-size: 1.2em;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #7373BD;
    font-weight: bold;
    outline: none;
    border-radius: 0.5em;
    border: none;
    cursor: pointer;
    text-align: center;
    width: 100%;
}

.mime-pricing-button:hover {
    background-color: #eee;
}

/* Quickshare */
.mime-quickshare {   
    padding: 3.5em 0;     
}

.mime-quickshare-title {    
    font-size: 2.2em;
    margin: 0 0 1em 0; 
}

.mime-quickshare-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
    gap: 3em;
}

.mime-quickshare-left {
    display: flex;
    flex-basis: 0;
    flex-grow: 1;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1em;
}

.mime-quickshare-drop {
    padding: 0.8em;
    border-radius: 0.5em;
    background-color:rgba(215, 221, 230, 0.6);
    min-height: 175px;
}

.mime-quickshare-message {
    padding: 0.8em;
    border-radius: 0.5em;
    background-color:rgba(215, 221, 230, 0.6);
}

.mime-quickshare-url {
    padding: 0.8em;
    border-radius: 0.5em;
    background-color:rgba(215, 221, 230, 0.6);
    max-width: calc(100vw - 3.6em);
}

.mime-quickshare-right {
    flex-basis: 0;
    flex-grow: 1;
    background-image: url('/res/images/robot_box_clipboard.png');
    background-repeat: no-repeat;
    background-size: auto 325px;
    background-position: bottom -25px left 50%;
}

.mime-quickshare-intro {

}

.mime-quickshare-intro-text {
    margin: 0 0 1em 0;
    font-size: 1.6em;
    color: #333;
    line-height: 1.4;
}

.mime-link {
    border: 1px solid #ddd;
    border-radius: 0.5em;
    background-color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;    
    align-items: center;  
}

.mime-link-title {
    margin: 0 0 0.2em 0;
    font-weight: normal;
    font-size: 0.9em;
    color: #333;
}

.mime-link-url {
    padding: 0.4em;
    flex-grow: 1;
    line-height: 1;
    font-size: 1em;
    color: #333;
    overflow-x: auto;
    text-wrap: nowrap;
}

.mime-link-copy {
    padding: 0.4em;
    background-color: #7373BD;
    color: #fff;
    font-size: 1.2em;
    line-height: 1;
    cursor: pointer;
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
}

.mime-link-copy:hover {
    background-color:rgb(105, 105, 177);
}

.mime-dropbox {
    clear: both;
    border: 1px solid #ccc;
    background-color: white;
    padding: 0;
    border-radius: 0.5em 0 0.5em 0.5em;
    /*background-image: url('upload.jpg');
    background-repeat: no-repeat;
    background-size: cover;*/
    display: flex;
    /*flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    cursor: pointer;*/
    position: relative;
    min-height: 175px;
}

.mime-dropbox-instructions {
    color: #aaa;
    margin: 0;
    padding: 2.0em 0 2.0em 0;
    font-size: 1.2em;
    line-height: 1;
    text-align: center;
    position: absolute;
    width: 100%;
    z-index: 1;
    cursor: pointer;
    user-select: none;
}

.filelist {
    list-style: none;
    list-style-position: inside;
    position: relative;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    background-color: white;
    border-radius: 0.5em;
    min-height: fit-content;
}

.filelist:empty {
    display: none;
}

.file {
    padding: 0.5em;
    color: black;
    font-size: 0.9em;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    letter-spacing: 0.04em;
    user-select: none;
}

.filedownload {
    margin: 0 0.5em;
    color: rgba(14, 77, 33, 0.507);
    cursor: pointer;
}

.filedelete {
    margin: 0 0.5em;
    color: rgba(255, 0, 0, 0.651);
    cursor: pointer;
}

.filename {
    color: #333;
    flex-grow: 1;
}

.fileerror {
    margin-top: 0.2em;
    color: maroon;
}

.filesize {
    color: #333;
    flex-basis: 100px;
    text-align: right;
}

#tus-files {
    display: none;
}

.mime-dropbox-newupload,
.mime-dropbox-addfiles,
.mime-dropbox-downloadall {
    float: right;
    border: 1px solid #ccc;
    padding: 0.4em 0.5em;
    font-size: 0.9em;
    border-radius: 0.4em 0.4em 0 0;
    color: #fff;
    line-height: 1;
    min-width: 100px;
    font-family: Lato;
    letter-spacing: 0.04em;
    outline: none;
    text-align: center;
    background-color: #7373BD;
    cursor: pointer;
}

.mime-dropbox-newupload:hover,
.mime-dropbox-addfiles:hover,
.mime-dropbox-downloadall:hover {
    background-color:rgb(105, 105, 177);
}

.mime-message {
    border: 1px solid #ccc;
    padding: 0.4em;
    font-size: 1em;
    border-radius: 0.5em;
    background-color: white;
    width: calc(100% - 0.8em);
    height: 3em;
    color: #333;
    line-height: 1.2;
    outline: none;
    resize: vertical;
}

.mime-pricing-feature-text {
    font-size: 1em;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    gap: 0.5em;
}

.mime-pricing-feature-items {
    margin: 1em 1em 2em 1em;
    padding: 0;
    list-style: none;
    list-style-position: inside;
}

.mime-pricing-feature-item {
    margin-bottom: 0.6em;
    font-size: 1.2em;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.mime-pricing-feature-text-badge {
    display: inline-block;
    font-size: 1em;
    color: darkgreen;
}

.mime-pricing-feature-text-inner {
    display: inline-block;
    flex-basis: 0px;
    flex-grow: 1;
}

.mime-pricing-feature-text--highlight {
    color: goldenrod;
}

.mime-pricing-feature-items--light {
    margin-left: 0;
    margin-right: 0;
    color: #fff;
}

.mime-pricing-feature-items--light .mime-pricing-feature-text-badge { 
    color: white;
}

.mime-pricing-feature-items--light .mime-pricing-feature-text--highlight  {    
    color: goldenrod;
}

.mime-pricing-register-button {
    margin: 0 auto;
    padding: 0.6em 1em;
    background-color: #7373BD;
    font-size: 1.3em;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #fff;
    font-weight: bold;
    outline: none;
    border-radius: 0.5em;
    border: none;
    cursor: pointer;
    box-shadow: 8px 4px 4px #ccc;
}

.mime-pricing-register-button:hover {
    background-color:rgb(130, 130, 204);
    box-shadow: 10px 5px 5px #aaa;
}

.mime-footer-copyright {
    margin: 0;
    color: #ccc;
    font-size: 1em;
    font-weight: normal;
}

/* Downloads */
.mime-downloads-title {
    margin-bottom: 0.1em;
    color: #fff;
}

.mime-downloads-version {
    margin-bottom: 2em;
    color: #ccc;
}

.mime-downloads-section {
    margin-bottom: 1em;
}

.mime-downloads-subtitle {
    margin-bottom: 0.3em;
    color: #fff;
    font-size: 1em;
    font-weight: normal;
    letter-spacing: 0.1em;
}

.mime-downloads-brands {
    margin-right: 0.5em;
}

.mime-downloads-platforms {
    display: inline-flex;
    align-content: center;
    align-items: center;
    padding: 0em 0.5em;
    border: 1px solid rgb(182, 178, 178);
    border-radius: 0.4em;
    margin-right: 0.5em;
    font-size: 1.2em;
    color: #fff;
    background-color: black;
    font-family: Arial;
    line-height: 1;
    height: 50px;
}

.mime-downloads-platforms-icon {
    font-size: 1.5em;
    margin-right: 0.3em;
}

.mime-downloads-app {
    height: 600px;
    box-shadow: 4px 2px 2px #aaa;
    transform: skewX(-2deg) skewY(-2deg);
}

.mime-downloads-version {
    font-size: 0.6em;
    color: #000;
}

.mime-page-back {
    color: #333;
}

/* */
.mime-action-statusmenu-html,
.mime-action-languagemenu-html,
.mime-action-accountmenu-html {
    position: absolute;
}

.mime-contextmenu {
    position: relative;
    top: 0.5em;
    left: 0em;
    min-width: 200px;
    padding: 0.2em 0;
    background-color: #fff;
    border-radius: 1em;
    bordeR: 1px solid #ccc;
    box-shadow: 4px 2px 2px #ccc;
    z-index: 10000;
}

.mime-contextmenu-items {
    margin: 0;
    padding: 0.2em 0;
    list-style: none;
    list-style-position: inside;
    border-bottom: 1px solid #ccc;
}

.mime-contextmenu-items--scrollable {
    max-height: 250px;
    overflow-y: auto;
}

.mime-contextmenu-items:first-child {
    margin-top: 0;
}

.mime-contextmenu-items:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.mime-contextmenu-items:hover .mime-contextmenu-item--selected {
    background-color: unset; 
}

.mime-contextmenu-items:hover .mime-contextmenu-item--selected:hover {
    background-color: aliceblue; 
}

.mime-contextmenu-item {
    padding: 0.6em 0.8em;
    font-size: 1.0em;
    line-height: 1;
    font-weight: normal;
    letter-spacing: 0.04em;    
    text-wrap: nowrap;
    cursor: pointer;
}

.mime-contextmenu-item--selected {
    background-color: aliceblue; 
    font-weight: bold;
}

.mime-contextmenu-item:hover {
    background-color: aliceblue;    
}

.mime-contextmenu-item-icon {
   color: #666;  
   width: 1.3em;
   text-align: center;
}

.mime-contextmenu-item-label {
    flex-grow: 1;
}

.mime-contextmenu-link {
    text-decoration: none;
    color: #000;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    gap: 1em;
}

.mime-contextmenu-link:hover {
    text-decoration: none;
}

.mime-statusmenu-header,
.mime-accountmenu-header {
    padding: 1em;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    gap: 0.5em;
    text-decoration: none;
    color: #000;
}

.mime-statusmenu-icon,
.mime-accountmenu-avatar {
    max-height: 64px;
    aspect-ratio: auto;
}

.mime-statusmenu-icon {
    font-size: 2em;
}

.mime-statusmenu-name,
.mime-accountmenu-name {
    margin: 0;
    padding: 0.6em;
    text-align: center;
    font-weight: bold;
}

.mime-statusmenu-header:hover {
    text-decoration: none;
}

.mime-statusmenu-outage {
    color: orangered;
}

/* Small screen  */
@media only screen and (max-width: 1200px) {
     
    .mime-middlecolumn {
        margin: 0 1em;
    }

    .mime-mainmenu-container {
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
        gap: 2em;
    }

    .mime-mainmenu {
        justify-content: center;
    }

    .mime-intro {
        gap: 2em;
    }

    .mime-intro-left {
        padding: 3em 0;
        text-align: center;
    }

    .mime-intro-break {
        display: none;
    }

    .mime-robot {
        height: 400px;
    }

    .mime-quickshare-container {
        gap: 2em;
    }

    .mime-quickshare-right {
        background-image: none;
    }

    .mime-pricing-left {
        width: 100%;
    }

    .mime-footer-sections {
        gap: 2em;
    }
}

/* Mobile */
@media only screen and (max-width: 600px) {

    .cbanner {
        left: 1em;
        right: 1em;
        bottom: 1em;     
        max-width: unset;   
    }

    .cbanner-background--selected .cbanner {
        left: 1em;
        right: 1em;
        transform: unset;
        max-width: unset;
    }

    .cbanner-option {
        margin-left: 0.5em;
    }

    .mime-messagebox {
        left: 1em;
        right: 1em;
        transform: unset;
    }

    .mime-action-statusmenu {
        display: none;
    }

    .mime-form {
        margin: 0 0 1em 0;
    }

    .mime-form-list {
        gap: 1em;
    }

    .mime-form-indent {
        margin-left: 0.5em;
        margin-right: 0.5em;
    }

    .mime-form-section:empty {
        display: none;
    }

    .mime-table,
    .mime-table-thead,
    .mime-table-tbody,
    .mime-table-row {
        display: block;
        width: 100%;
    }

    .mime-table {
        padding: 0.4em;
    }

    .mime-table-thead {
        /* hide the header row */
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .mime-table-row {
        margin-bottom: 0.4em;   
        border: 1px solid #ddd;
        border-radius: .4rem;
        overflow: hidden;
    }

    .mime-table-cell {
        display: flex;                /* label on the left, value on the right */
        padding: .6rem .8rem;
        gap: .6rem;
        border-bottom: none;
    }

    .mime-table-cell::before {
        content: attr(data-label);    /* pulls the header text */
        flex: 0 0 35%;                /* label width */
        font-weight: 600;
        color: #555;
        text-align: right;
    }    

    .mime-table-cell {
    }

    .mime-table-row:last-child {
        border-bottom: 1px solid #ddd;
    }
 
    .mime-mobilemenu--icon {
        display: block;
    }

    .mime-menu {
        justify-content: space-between;
    }    

    .mime-middlecolumn {
        margin: 0 1em;
    }

    .mime-mainmenu-container {
        justify-content: center;
    }

    .mime-intro-left {
        padding: 3em 0;
        flex-basis: unset;
        text-align: center;
    }

    .mime-intro-left--small {
        padding: 0;
    }

    .mime-intro-title {
        font-size: 3em;
    }

    .mime-intro-break {
        display: none;
    }

    .mime-mainmenu-right {
        display: none;
    }

    .mime-intro-right {
        display: none;
    }

    .mime-quickshare {
        padding: 2em 0;
    }

    .mime-quickshare-right {
        background-image: none;
    }

    .mime-recommends {
        padding: 2em 0;
    }

    .mime-recommends-items {
        align-content: stretch;
        align-items: stretch;
    }

    .mime-recommends-item {
        flex-basis: unset;
        min-width: unset;
    }

    .mime-pricing {
        padding: 2em 0; 
    }

    .mime-pricing-left {
        width: unset;
    }

    .mime-pricing-register-button-container {
        text-align: center;
    }

    .mime-pricing-item {
        flex-grow: unset;
        flex-basis: unset;
        min-width: unset;
        width: 100%;
    }

    .mime-footer-container {
        padding: 2em 0;
        text-align: center;  
    }

    .mime-footer-sections {
        align-items: stretch;
        align-content: stretch;
        justify-content: flex-start;
        gap: 3em;      
    }

    .mime-footer-menu {
        flex-grow: 1;
        flex-basis: 0px;
        text-wrap: nowrap;
    }
}