/*---------- FORMULÄRET -------------*/
.wm-archive-form {padding-bottom: 6vh;}
#wm-title {display: block; width: 100%;}
#wm-note {height: 20vh; width: 100%;}
#wm-archive-btn:hover {background: white;}

/*---------- UPPLADDNING -------------*/
.approved {display: flex; flex-direction: column; align-items: center; padding: 8px; border-radius: 4px; transition: background 0.6s;}
.approved img {height: 26px;}

.wm-file-input {display: flex; flex-direction: column; border: 2px dashed #ccc; border-radius: 4px; padding: 20px; min-height: 100px;}
.approved-icons {display: flex; flex-direction: row; justify-content: space-between; padding-top: 40px;}


.search-tools {display: flex; flex-direction: row; align-items: baseline; margin-bottom: 6px;}
#wm-year-filter {height: 30px; margin-right: 10px; border: unset; width: 80px;}



/*---------- ARKIVET -------------*/
#wm-archive-list {border: 1px solid #ccc;}
.wm-archive-item {border-bottom: 1px solid #ccc; display: flex; align-items: center; padding: 2px 6px;}

.wm-filter-category-label, .wm-category-label, .wm-item-cats {text-transform: uppercase;}

.archive-icon {align-items: center; display: flex; margin-right: 24px;}
.archive-icon svg {width: 25px; height: 32px;}

.wm-item-date, .wm-item-time, .wm-item-cats {font-size: 11px;}
.wm-item-time {margin-right: 30px;}



.wm-item-date {margin-right: 10px;}
.wm-item-title {display: block; font-size: 20px; line-height: 22px;}

.date-name {flex: 1;}

.wm-delete-btn {flex: 0 0 auto;}


.archive-icon:hover, .date-name:hover, .wm-delete-btn:hover {cursor: pointer;}



/*---------- Accordion -------------*/
.accordion-content {max-height: 0; overflow: hidden; transition: max-height .7s ease;}
.accordion-open .accordion-content {max-height: 600px;}

.accordion-header {width: fit-content; padding: 4px 12px; border-radius: 6px;}

.accordion-header, .wm-filter-category-label, .wm-category-label, #wm-year-filter {background: var(--wp--preset--color--light-1); transition: background 0.6s;}

.accordion-header, .approved, .wm-filter-category-label, .wm-category-label {color: var(--wp--preset--color--dark-1);}

.accordion-open .accordion-header {background: unset!important;}

.accordion-header:hover, .approved:hover, .wm-filter-category-label:hover, .wm-category-label:hover {background: var(--wp--preset--color--dark-1); color: var(--wp--preset--color--light-1);}

.wm-categories {margin: 15px 0;}

.wm-category-checkboxes, .wm-filter-category-checkboxes {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px;}

.wm-category-label, .wm-filter-category-label {display: flex; align-items: center; gap: 5px; cursor: pointer; padding: 5px 10px; border-radius: 4px;}

#wm-title {font-size: var(--wp--preset--font-size--small);}






/*---------- OVERLAY -------------*/
.wm-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center;
max-width: unset!important; z-index: 9999;}

.wm-overlay-content {background: white; color: black; max-width: 850px; border-radius: 6px; width: 94%; overflow-y: auto; max-height: 90%; height: auto;}


.wm-overlay-header {idth: 94%; max-width: 850px; background: #e7ebf1; padding: 20px; box-sizing: border-box; border-top-left-radius: 6px; border-top-right-radius: 6px;}

.wm-overlay-header .wm-header-top, .wm-overlay-header .wm-header-middle {display: flex; flex-direction: row; justify-content: space-between;}


.wm-overlay-content img {width: 100%;}
.wm-overlay-content.wide {max-width: 90%;}
.wm-note-content {margin-top: 80px; white-space: pre-wrap; padding: 20px;}