/* Custom Styles for WPUM */


/* CSS variables  */
:root {
	--standard-font: #2c2f2f;
	--border-color: #eee5e5;
}


/* corret padding on "Choose File" section */
.wp-admin input[type=file] {
	padding: 5px 10px;
}

/* Removes the ALL HIGHLIGHT effect when hovering over a select form */
.wp-core-ui select:hover {
	color: #000;
}

/* Adds a highlighting effect to the current hovered option */
.wp-core-ui select option:hover {
	color: #55a9f7;
}

.select2-container {width:100% !important;}
#file_tag + .select2 .select2-selection, #link_tag + .select2 .select2-selection,
#WOStatusKeySecs + .select2 .select2-selection, 
#WOStatusKeyLinkSecs + .select2 .select2-selection {
	min-height: 5rem !important;
}

/* Changes the harsh black font colour (#000) to something easier on the eyes */
thead th {color: var(--standard-font);}
th {font-family: Helvetica, Arial, sans-serif;}
td a {text-align: center;}

/* Add spacing next to file icons to align with link icons */
.fa-file {margin-right: 4px;}

.item-content.active {
	border-width: 1px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-color: #55a9f7;
	border-style: solid;
}

/* Error message style */
.error {
	color: #dc3545;
	font-size: 14px;
	margin-top: 5px;
	font-weight: bolder;
  }
  
/* Input field error state 
input.error {
	border-color: #dc3545;
	box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

span.error {
	border-color: #dc3545;
	box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
*/

.file-list td > span[hidden] + .emoji {
	/* 👻 boo! */
	margin: 0 auto !important;
	display: block !important;
	transform: translateY(50%);
}

/* 
	So, _something_ is replacing HTML
	entities with img tags, which is weird. Anyway, this means you can't sort based on the entity, so you've got to put a hidden div with... some kind of value in there if you want to sort by that column.
*/
.file-list span[hidden] {
	position: absolute;
}

/* styles for dropdown component */
.dd-item {
	width: 100%;

	cursor: pointer;
	margin: 0;
}
.item-content {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-style: solid;
	border-width: 1px;
	border-color: lightgrey;
	border-radius: 3px;
}


.item-content:hover {
	background-color: #f5f5f5;
}

.folder-content {
	width: 100%;
	margin-right: 1em;
}

.section-name {
	width: 100%;
	text-decoration: none;
	font-size: 16px;
	font-weight: semibold;
	color: black;
}

.item-content > button {
	margin-right: 10px;
	margin-left: 5px;
	background: transparent;
	cursor: pointer;
	padding: 0;
	font-weight: bold;
	font-size: 20px;
	border: none;
}

.badge {
	float: right;
}

#openAddDialog {
	margin: 5px 0; min-width: 10em; width: 100%;
}

#openEditDialog, #openDeleteDialog {
	display: inline;
	visibility: hidden;
}

@media (min-width: 1278px) {
    #wpbody-content .list-group {
        margin-top: 10px;
    }
	
} 

@media (min-width: 1200px) and (max-width: 1277px) {
	#wpbody-content .list-group {
		margin-top: 3.4rem;
	}
} 

/* Making the upload buttons a little easier to look at */
#show-file-upload, #show-link-upload, #openAddDialog {
	margin: 5px 0; 
	min-width: 10em;
}
/* #show-link-upload {margin-bottom: 10px;} */

@media (min-width: 1200px) and (max-width: 1479px) {
	#show-file-upload, #show-link-upload, #openAddDialog {min-width: 100%}
}

@media (max-width: 1200px) {
	#show-file-upload, #show-link-upload {
		 /*calculate the width of 50% minus the border width of the element  */
		width: calc(50% - 3px);
	}
}

@media (min-width: 1500px) {
	#show-file-upload, #show-link-upload {
		 /*calculate the width of 50% minus the border width of the element  */
		width: calc(50% - 3px);
	}
}

@media (max-width: 992px) {
	#wpbody-content .row .col:first-of-type {
		flex-basis: auto !important;
	}
}

.custom-margin-top {
	margin-top: 4.7rem;
}

.select-icon-from-media-library[src=""] {
	display: none;
}

#link-edit-form .form-select, #link-upload-form .form-select, #file-edit-form .form-select, #file-upload-form .form-select {
	max-width: unset;
	margin-top: 0;
	min-height: 35px;	
}
#link-edit-form input, #link-upload-form input, #file-edit-form input, #file-upload-form input  {
	max-width: unset;
}

.d-flex {
    display: flex;
    align-items: flex-start; /* Ensures the elements start aligned */
}

.flex-column {
    flex-direction: column;
}

.form-label {
    flex: 1; /* Allows the label to take up only as much space as needed */
}

.form-select {
    flex: 1; /* Ensures the select elements take up the remaining space */
}

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

.wpum-icon[aria-label="Check"] {
    color: green;
}

.wpum-icon[aria-label="Cross"] {
    color: red;
}

.edit-btn, .delete-link, .delete-file {
	width: 100%;
	margin-bottom: 0.5rem;
}

#file-upload-form .drop-area__container {
	width: 50%;
}

#file-upload-form label[for="title"] + input {
    width: 50%;
}
``