Romhack-Plaza---WordPress-Plugin/assets/css/submissions.css

body {
    font-family: 'Arial', sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    color: #333;
}

/* Accomodating for theme css */
.single-post .post-inner {
    padding-left: 0px !important;

}

.wplink-autocomplete {
    color: #111;
    font-size: 14px;
}

.ui-autocomplete.wplink-autocomplete li {
    padding: 0px 10px !important;
}

.container.custom-uploader {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    color: #000;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@media (max-width: 600px) {
    .container {
        width: 100%;
        padding: 10px;
        border-radius: 0;
    }
}

.container h1, .container h3 {
    /* color: #2C3E50; */
}

.container h3 {

    margin-bottom: 15px;
}

.container input:focus {

    color: #454545;
}

.container input[type="text"],
.container textarea,
.container input[type="file"],
.container input[type="url"] {
    box-sizing: border-box;
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Arial', sans-serif;
}

.container input[type="date"] {
    display: block;
    padding: 8px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Arial', sans-serif;
}

.acf-field-image,
.container #gameTitle,
.container #platform,
.container #language,
.container #versionNumber,
.container #hashes,
.container #featuredImage,
.container #staff,
.container #releaseSite,
.container #youtubeVideo,
.container fieldset,
.container #entryTitle,
.container #current-files,
.container .modifications-wrapper,
.container form#translationForm,
.container #rhdopage,
.container .news-selector,
.container .wp-editor-wrap
{
    margin-bottom: 30px !important;
}



.modifications-wrapper input[type="checkbox"],
fieldset input[type="radio"] {
    transform: scale(1.5);
}


.container .label {
    font-weight: bold;
    display: block;
    margin-bottom: 15px;
}


.modifications-wrapper label {
    font-weight: 500;
}

fieldset label {
    font-weight: 500;
    margin-left: 5px;
}

.modifications-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Create four columns */
    gap: 15px; /* Spacing between columns and rows */
}

.modifications-wrapper label {
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Adjusts any labels not inside .modifications-wrapper */
.custom-uploader label:not(.modifications-wrapper label):not(fieldset label) {
    margin-bottom: 15px;
    display: block;
}

fieldset {
    display: flex;
    justify-content: space-between;
}

.status-option {
    flex: 1;
    display: flex;
    align-items: center; /* Vertically center the label and radio button */
}


.custom-select {
    display: block;
    width: 100%;
    height: 28px;
    outline-color: #444;
    color: #454545;
}

.container textarea {
    resize: vertical;
}


.file-upload-container {
    /* display: flex; */
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.container #fileInput, .container #filetohash {
    flex-grow: 1;
    margin-right: 10px;
    border: 1px solid #ccc;
    padding: 8px;
    background: #fff;
    border-radius: 5px;
}

.button-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blueButton, .acf-gallery-add, a.acf-button.button {
    background-color: #db7f00;
    font-size: 16px;
    color: #fff !important;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: none;
}

.acf-gallery-add:focus {
    text-decoration: none !important;
}

.container button:hover {
    background-color: #ae6400;
}

.container #cancelButton {
    background-color: #E74C3C;
    padding: 13px;
    width: 160px;
}

.container #cancelButton:hover {
    background-color: #C0392B;
}

.container #fullbar {
    width: 100%; /* Adjusted to full width */
    position: relative;
    background-color: #e0e0e0;
    border-radius: 5px;
    margin-top: 10px;
}

.container .bar {
    position: relative;
    background-color: #2ECC71;
    height: 20px;
    border-radius: 3px;
}

.container #status {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
    z-index: 2;
    font-weight: bold;
    white-space: nowrap;
}

.container #speed {
    margin-top: 10px;
    font-style: italic;
}

.container input[type="text"]:focus, textarea:focus, input[type="file"]:focus, input[type="date"]:focus, input[type="url"]:focus {
    outline: none;
    border-color: #3498DB;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

.container button:disabled, button[disabled] {
    background-color: #B3B3B3;
    cursor: not-allowed;
}

.container button:disabled:hover, button[disabled]:hover {
    background-color: #B3B3B3;
}

.uploaded-file {
    align-items: center;
    margin: 10px 20px;
}

.delete-file {
    color: red;
    cursor: pointer;
    padding-left: 10px;
}

.put-as-private-file, .put-as-public-file {
    color: blue;
    cursor: pointer;
}

.put-as-archive-file {
    color: purple;
    cursor: pointer;
}

.field-helper {
    font-size: 0.75em;
    display: block;
    color: #777;
    margin: 5px;
    font-style: italic;
    max-width: 90%;
    word-wrap: break-word;
}

.fields-importance {
    font-weight: bold;
    color: black;
    text-align: right;
    border-bottom: 2px solid black;
    width: 100%;
    padding-bottom: 5px;
    margin: 30px 0;
}

.select2-container {
    width: 100% !important; /* This makes the select2 dropdown take the full width of its container */
    margin-bottom: 30px !important;
}

.select2-results__option {

    line-height: 20px !important;
    font-size: 0.75em !important;
}

.select2-results__message {

    font-size: smaller;
    padding: 3px;
}

.select2-results {
    color: #555;
}

.acf-fields > .acf-field {
    padding: 0px !important;
}

.acf-gallery, .acf-gallery-toolbar, .acf-gallery-main {
    border-radius: 5px;
}

.acf-label, .acf-hl > li.acf-fr {
    display: none;
}

/* Styles the scrollbar for the whole page */
/* NO, apply when needed not whole form */

.attachments-wrapper::-webkit-scrollbar {
    width: 30px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Adjust the track color if necessary */
}

::-webkit-scrollbar-thumb {
    background: #aaa; /* Adjust the thumb color if necessary */
}

/*unused?*/
.hide-if-value {
    font-size: 16px;
    font-style: italic;
    color: #ea5973;
}

/*media library*/


.media-modal button,
.media-modal .button,
.media-modal .faux-button,
.media-modal :root .wp-block-button__link,
.media-modal :root .wp-block-file__button,
.media-modal input[type="button"],
.media-modal input[type="reset"],
.media-modal input[type="submit"] {
    padding: 0;
    margin: 0;
    border: initial;
    border-radius: 0;
    background: initial;
    font-size: initial;
    line-height: initial;
    font-weight: initial;
    text-transform: none;
    letter-spacing: normal;
    color: inherit;
    text-shadow: none;
    -webkit-appearance: initial;
    color: initial;
}
#wp-link-wrap {
    color: initial;
    font-size: initial !important;
}

.media-modal-content {
    color: initial;
}

.languages-selector,
.category-selector {
    height: 190px;
    width: 100%;
    overflow-y: scroll;
    margin-bottom: 30px;
    padding: 5px;
    border: 1px #aaaaaa solid;
    border-radius: 3px;
}

.languages-selector label, .category-selector label {
    margin-bottom: 0px !important;
    margin-top: 5px;
}


.custom-post-status-select, .custom-post-author-select {
    padding: 8px 12px; /* Padding for better readability */
    margin: 10px 0; /* Space around the select */
    background-color: #fff; /* Background color */
    border: 1px solid #ddd; /* Border properties */
    border-radius: 4px; /* Rounded corners */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    font-size: 16px; /* Adequate font size */
    color: #333; /* Font color */
}

.custom-post-status-select:hover, .custom-post-author-select:hover {
    border-color: #bbb; /* Change border on hover for visual feedback */
}

.custom-post-status-select:focus, .custom-post-author-select:focus {
    border-color: #888; /* Change border when focused for accessibility */
    outline: none; /* Remove default focus outline */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Enhanced shadow on focus */
}

.drafts-checkbox label {
    display: inline-block !important;
}

.container.custom-uploader.translation {
    background-color: #e5f8d5; /*green*/
}
.container.custom-uploader.romhack {
    background-color: #dbe3ff; /* blue*/
}
.container.custom-uploader.homebrew {
    background-color: #ffeaee; /*red*/
}
.container.custom-uploader.utility {
    background-color: #fffdea; /*yellow*/
}
.container.custom-uploader.document {
    background-color: #f1eaff; /*purple*/
}
.container.custom-uploader.lua-script {
    background-color: #eed6c5; /*orange*/
}
.container.custom-uploader.tutorial {
    background-color: #d1c9ba; /* brown */
}
.container.custom-uploader.news {
    background-color:#b0b0b0; /* brown */
}



.select2-style {
    display: block;
    width: 100%; /* Responsive width */
    padding: 8px 12px; /* Adequate padding for better appearance */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 4px; /* Rounded corners */
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Slight shadow for depth */
    background-color: white;
    font-size: 16px; /* Readable font size */
    line-height: 1.5; /* Adequate line height for readability */
    color: #555; /* Font color */
    -webkit-appearance: none; /* Removes default styling on Webkit browsers */
    -moz-appearance: none; /* Removes default styling on Mozilla browsers */
    appearance: none; /* Standard way to remove default arrow */
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg width="12" height="12" viewBox="0 0 4.53657 2.26729" xmlns="http://www.w3.org/2000/svg"><path d="M4.03116 0L2.26828 1.76828L0.505401 0L0 0.505401L2.26828 2.77268L4.53657 0.505401L4.03116 0Z" fill="%23555"/></svg>'); /* Custom arrow icon */
    background-repeat: no-repeat;
    background-position: right 8px center; /* Position of the arrow icon */
    cursor: pointer; /* Pointer cursor on hover */
}

.select2-style:focus {
    outline: none;
    border-color: #66afe9; /* Highlight color when focused */
    box-shadow: 0 0 5px rgba(102, 175, 233, .6); /* Shadow for focused state */
}

/* Style for disabled state */
.select2-style:disabled {
    background-color: #eee;
    opacity: 0.5;
    cursor: not-allowed;
}

/* Optional: Style for option elements */
.select2-style option {
    padding: 0 8px; /* Padding inside options */
}

.drop-container {
    position: relative;
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80px;
    padding: 20px;
    border-radius: 10px;
    border: 2px dashed #555;
    color: #444;
    cursor: pointer;
    transition: background .2s ease-in-out, border .2s ease-in-out;
}

.drop-container:hover,
.drop-container.drag-active {
    background: #eee;
    border-color: #111;
}

.drop-container:hover .drop-title,
.drop-container.drag-active .drop-title {
    color: #222;
}

.drop-title {
    color: #444;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    transition: color .2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

input[type="checkbox"], input[type="radio"]{

    accent-color: #db7f00;
}

input[type="date"]{

    width: 100%;
}

.select2-selection--single, .select2-selection__rendered{

    border: 0 !important;
    border-radius: 5px;
}

.select2-selection__rendered, .select2-search__field, .select2-dropdown, .select2-search, .select2-results, .select2-selection__choice{

    background-color: var( --field-background) !important;
    color: var( --text-color ) !important;
}

.select2-selection--multiple{

    border: 0 !important;
    background-color: var( --field-background) !important;
}

.select2-results_option--highlighted{

    background-color: #db7f00 !important;
}

.select2-selection__placeholder{

    color: var( --text-color ) !important;
}

.accordion-section {

    margin-bottom: 10px;
    padding: 5px;

}

.accordion-header {

    display: flex;
    justify-content: space-between;
    align-items: center;

    background-color: var( --widget-background-color  );
    padding: 10px;
    border-radius: 4px;
    color: var( --text-color );
    font-size: 24px;
    font-weight: 700;
    padding-left: 1.5%;
    padding-right: 1.5%;
    width: 100%;
    transition: all ease 0.2s;


}

.accordion-header:hover {

    cursor: pointer;
    background-color: var( --grid-background );

}

.accordion-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.accordion-open-close-icon {

}

.accordion-content {

    display:none;
    padding:10px;

}

.edit-quick-tools {

    display: flex;
    justify-content: flex-end;
    gap: 10px;
    text-decoration: none !important;
    margin-bottom: 3%   ;

}

.edit-quick-tools a {

    text-decoration: none;
    color: var( --text-color ) !important;
}

.quick-tools-button {

    background-color: var( --widget-background-color );
    border-radius: 3px;
    font-size: 14px;
    padding: 5px;
    width: 32px;
    text-align: center;

}

.quick-tools-button.correct {

    background-color: rgba( 60, 159, 101, 0.4 );

}

.quick-tools-button.warning {

    background-color: rgba( 244, 255, 0, 0.4 );
    color: #454545;

}

.quick-tools-button.danger {

    background-color: rgba( 255, 0, 0, 0.4 );

}

.quick-tools-button:hover, .quick-tools-button.danger:hover {

    background-color: var( --grid-background );
    cursor: pointer;
    color: var( --text-color );

}

.edit_entry_title {

    float: left;
    width: 60%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-weight: 700;
    font-size: 24px;
color( --text-color );

}

#edit_entry_title_status {

    text-transform: capitalize;
}