* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Lato;
    font-size: 1em;
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
}

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

a:hover {
    text-decoration: underline;
}

/* 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: absolute;
    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(100% - 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;
}

/* */
.meapp-wrapper {
    margin: 0 auto 0 auto;
    max-width: 1200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
}

.meapp-wrapper-left {
    padding: 2em 1em;
    width: 300px;
    flex-shrink: 1;
}

.meapp-wrapper-middle {
    padding: 2em 1em;
    max-width: 600px;
    flex-grow: 1;
}

.meapp-wrapper-right {
    padding: 2em 1em;
    width: 300px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    flex-shrink: 1;
}

.meapp-wrapper-right--robot1 {
    background-image: url('/images/robot1.png');
}

.meapp-wrapper-right--robot2 {
    background-image: url('/images/robot2.png');
}

.meapp-wrapper-right--robot3 {
    background-image: url('/images/robot3.png');
}

h1 {
    margin: 0 0 1em 0;
    color: #0c5709;
}

h3 {
    margin: 0 0 0.5em 0;
    font-size: 1em;
    letter-spacing: 0.04em;
    color: #183b17;
    font-weight: 400;
}

p {
    margin: 0 0 1em 0;
    line-height: 1.5;
}

.mime-project {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
}

.mime-project-icon {
    height: 64px;
}

.mime-project-name {
    font-size: 1.3em;
    letter-spacing: 0.04em;
    font-style: italic;
}

#tus-files {
    display: none;
}

.mime-title i {
    margin-right: 0.3em;
}

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

.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;
}

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

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

.mime-link-url {
    padding: 0.4em;
    flex-grow: 1;
    line-height: 1;
    font-size: 1em;
    color: #333;
}

.mime-link-copy {
    padding: 0.4em;
    background-color: #ddd;
    color: #666;
    font-size: 1.2em;
    line-height: 1;
    cursor: pointer;
}

.mime-company {
    margin-bottom: 1em;
    list-style: none;
    list-style-position: inside;
    text-align: center;
}

.mime-company-link {
    margin: 0 1em 1em 0;
    display: inline-block;
}

.mime-company-link a {
    color: rgb(40, 40, 138);
    text-decoration: none;
}

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

.meapp-general-popup {
    margin: 0 0 2em 0;
    padding: 1em;
    background-color: white;
    border-radius: 0.5em;
    border: 1px solid #ccc;
}

.meapp-general-popup h1 {
    color: maroon;
    margin-bottom: 0.5em;
}

.meapp-messagebox-footer {
    display: none;
}

.mime-contact-email, 
.mime-contact-subject {
    border: 1px solid #ccc;
    padding: 0.4em;
    font-size: 1em;
    border-radius: 0.5em;
    background-color: white;
    width: 100%;
    color: #333;
    line-height: 1.2;
    font-family: Lato;
    outline: none;
}

.mime-contact-message {
    border: 1px solid #ccc;
    padding: 0.4em;
    font-size: 1em;
    border-radius: 0.5em;
    background-color: white;
    width: 100%;
    height: 5em;
    color: #333;
    line-height: 1.2;
    font-family: Lato;
    outline: none;
    resize: vertical;
}

.mime-upload-clear,
.mime-contact-submit {
    border: 1px solid #ccc;
    padding: 0.4em;
    font-size: 1em;
    border-radius: 0.5em;
    background-color: white;
    width: 100%;
    color: #fff;
    line-height: 1.2;
    font-family: Lato;
    outline: none;
    text-align: center;
    background-color: rgb(115, 115, 189);    
    cursor: pointer;
}

.mime-contact-submit[disabled] {
    background-color: lightgray;
}

.invalid {
    color: maroon;
}

.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;
    background-color: white;
    color: #fff;
    line-height: 1;
    min-width: 100px;
    font-family: Lato;
    letter-spacing: 0.04em;
    outline: none;
    text-align: center;
    background-color: rgb(191, 191, 214);    
    cursor: pointer;
}

.mime-faq {
    margin-bottom: 1em;
}

.mime-faq-title {
    display: block;
    margin: 0 0 0.3em 0;
    letter-spacing: 0.05em;
    font-family: Lato;
}

.mime-faq-title i {
    margin-right: 0.2em;
}

.mime-faq-body {
    /*border: 1px solid #ccc;*/
    padding: 0.6em;
    font-size: 0.9em;
    border-radius: 0.5em;
    background-color: white;
    width: 100%;
    color: #666;
    line-height: 1.2;
    font-family: Lato;
}

/* Small screen  */
@media only screen and (max-width: 1200px) {
  
   .meapp-wrapper-left,
   .meapp-wrapper-right {
        display: none;
   }
}

/* Mobile */
@media only screen and (max-width: 600px) {
  
    .cbanner-background--selected .cbanner {
      left: 1em;
      right: 1em;
      transform: unset;
      max-width: unset;
    }
  
    .cbanner-option {
      margin-left: 0.5em;
    }
}