@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

a.edit-link-btn {
    display: flex;
    color: #4F4F4D;
    text-align: center;
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    gap: 5px;
    border-radius: 24.5px;
    background: #FFF;
    padding: 8px 10px;
}

.upload-text {
    color: rgba(79, 79, 77, 0.75);
    text-align: center;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 15px;
}

.upload-text span {
    color: #333;
}

.choose-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #F5C80F;
    color: #4F4F4D;
    text-align: center;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 12px 24px;
    border: none;
    border-radius: 24.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.choose-button:hover {
    background-color: #e6b82e;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(244, 196, 48, 0.4);
}

.choose-button:active {
    transform: translateY(0);
}

.upload-icon {
    width: 20px;
    height: 20px;
}

#formFile {
    display: none;
}

.file-list {
    margin-top: 20px;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: #f8f8f8;
    border-radius: 6px;
    margin-bottom: 8px;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.file-icon {
    width: 32px;
    height: 32px;
    background-color: #f4c430;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #333;
    font-size: 12px;
}

.file-details {
    display: flex;
    flex-direction: column;
}

.file-name {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.file-size {
    font-size: 12px;
    color: #888;
}

.remove-button {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 20px;
    padding: 4px 8px;
    transition: color 0.2s ease;
}

.remove-button:hover {
    color: #f44336;
}

.talkgroup-form-control-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='12' viewBox='0 0 9 12' fill='none'%3E%3Cpath d='M4.05518 0C4.18766 0 4.3112 0.0268555 4.42578 0.0805664C4.54036 0.134277 4.65137 0.213053 4.75879 0.316895L7.79346 3.2334C7.88298 3.31934 7.95638 3.41602 8.01367 3.52344C8.07454 3.62728 8.10498 3.74186 8.10498 3.86719C8.10498 4.03548 8.0638 4.18408 7.98145 4.31299C7.89909 4.44189 7.79167 4.54395 7.65918 4.61914C7.53027 4.69076 7.39421 4.72656 7.25098 4.72656C7.14355 4.72656 7.03434 4.70866 6.92334 4.67285C6.81234 4.63346 6.71029 4.56901 6.61719 4.47949L4.05518 1.96582L1.48779 4.47949C1.39469 4.56901 1.29264 4.63346 1.18164 4.67285C1.07422 4.70866 0.965007 4.72656 0.854004 4.72656C0.707194 4.72656 0.569336 4.69076 0.44043 4.61914C0.311523 4.54395 0.205892 4.44189 0.123535 4.31299C0.0411784 4.18408 0 4.03548 0 3.86719C0 3.74186 0.0286458 3.62728 0.0859375 3.52344C0.143229 3.41602 0.218424 3.31934 0.311523 3.2334L3.34619 0.316895C3.45361 0.213053 3.56462 0.134277 3.6792 0.0805664C3.79736 0.0268555 3.92269 0 4.05518 0ZM4.05518 11.5156C3.92269 11.5156 3.79736 11.4888 3.6792 11.4351C3.56462 11.3813 3.45361 11.3008 3.34619 11.1934L0.311523 8.27686C0.218424 8.19092 0.143229 8.09424 0.0859375 7.98682C0.0286458 7.87939 0 7.76481 0 7.64307C0 7.47477 0.0411784 7.32617 0.123535 7.19727C0.205892 7.06836 0.311523 6.9681 0.44043 6.89648C0.569336 6.82129 0.707194 6.78369 0.854004 6.78369C0.965007 6.78369 1.07422 6.80339 1.18164 6.84277C1.29264 6.87858 1.39469 6.94303 1.48779 7.03613L4.05518 9.54443L6.61719 7.03613C6.71029 6.94661 6.81234 6.88216 6.92334 6.84277C7.03434 6.80339 7.14355 6.78369 7.25098 6.78369C7.39421 6.78369 7.53027 6.82129 7.65918 6.89648C7.79167 6.9681 7.89909 7.06836 7.98145 7.19727C8.0638 7.32617 8.10498 7.47477 8.10498 7.64307C8.10498 7.76481 8.07454 7.87939 8.01367 7.98682C7.95638 8.09424 7.88298 8.19092 7.79346 8.27686L4.75879 11.1934C4.65137 11.3008 4.54036 11.3813 4.42578 11.4351C4.3112 11.4888 4.18766 11.5156 4.05518 11.5156Z' fill='black' fill-opacity='0.85'/%3E%3C/svg%3E") !important;
    display: flex;
    padding-left: var(--Popup-Inset---Left, 12px);
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background-color: rgb(0 0 0 / 28%);
    width: fit-content;
    position: relative;
}

.talkgroup-type-dropdown .talkgroup-type-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    padding: 6px 12px;
    background: #FFFFFF;
    color: #4F4F4D;
    font-size: 14px;
}

.talkgroup-type-dropdown .talkgroup-type-button:focus {
    box-shadow: none;
}

.talkgroup-type-dropdown .talkgroup-type-menu {
    border-radius: 10px;
    padding: 6px;
}

.talkgroup-type-dropdown .talkgroup-type-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
}

.talkgroup-type-dropdown .talkgroup-type-icon {
    display: inline-flex;
    align-items: center;
}

p.talk-table-content {
    color: #4F4F4D;
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.checkbox-div {
    display: flex;
    align-content: space-between !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.add-user-btn {
    position: absolute;
    right: 61px;
}

.add-user-btn a {
    border-radius: 24.5px;
    border: 1px solid #EECA46;
    background: #FFF;
    padding: 10px;
    color: #4F4F4D;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.table-header {
    background: #8e98a3;
    color: #fff;
}

.user-row {
    background: #fff;
}

.collapse-row {
    background: #f1f1f1;
}

.nested-table thead {
    background: #cfd4da;
    font-weight: 600;
}

.nested-table td,
.nested-table th {
    padding: 10px 14px;
}

.accordion-toggle {
    background: none;
    border: 1px solid #999;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    font-size: 18px;
    line-height: 1;
    position: relative;
}

.accordion-toggle .minus {
    display: none;
}

.accordion-toggle[aria-expanded="true"] .plus {
    display: none;
}

.accordion-toggle[aria-expanded="true"] .minus {
    display: inline;
}

.accordion-toggle {
    cursor: pointer;
}

p.Talks-Dev-Fruition-text {
    color: rgba(79, 79, 77, 0.5);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    font-style: italic;
}

.for-accordion-existing-user {
    border: 2px solid #4F4F4D !important;
}

#searchResultsDropdown {
    padding: 12px;
    position: absolute;
    border-radius: 12px;
    background: #FFF;
    top: 88px;
    border: 1px solid rgba(79, 79, 77, 0.50);
    filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.15));
    max-width: 700px !important;
    width: 100%;
}

#searchResultsDropdown th {
    color: #4F4F4D;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background: #F5F5F5;
}

#searchResultsDropdown tbody>tr:hover {
    background: #F5F5F5 !important;
}

#searchResultsDropdown h6 {
    color: #4F4F4D;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
}

a#see-all-results {
    color: #4F4F4D;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    text-decoration-line: underline !important;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-align: left;
    display: flex;
    justify-content: flex-end;
    margin: 10px 0px;
}

a#see-all-results:hover {
    background: transparent;
}

#search-layout th {
    background: #F8F9FA;
    color: #4F4F4D;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#search-layout td {
    color: #4F4F4D;
    font-family: "Open Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#search-layout tbody,
td,
tfoot,
th,
thead,
tr {
    border: none !important;
}

/* Highlight a searched destination item (e.g., a task row) */
/* Note: styles target cells because some browsers don't reliably render
           box-shadow/border-radius on <tr> elements. */
tr.search-result-highlight>td {
    background: rgba(245, 200, 15, 0.18) !important;
    transition: background 250ms ease;
}

/* Generic highlight for non-table elements (titles, badges, etc.) */
.search-result-highlight:not(tr) {
    background: rgba(245, 200, 15, 0.18) !important;
    box-shadow: 0 0 0 3px rgba(245, 200, 15, 0.25);
    border-radius: 10px;
    padding: 2px 6px;
    transition: background 250ms ease, box-shadow 250ms ease;
}

tr.search-result-highlight>td {
    border-top: 2px solid rgba(245, 200, 15, 0.45);
    border-bottom: 2px solid rgba(245, 200, 15, 0.45);
}

tr.search-result-highlight>td:first-child {
    border-left: 4px solid rgba(245, 200, 15, 0.85);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

tr.search-result-highlight>td:last-child {
    border-right: 2px solid rgba(245, 200, 15, 0.45);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

tr.search-result-highlight>td:first-child,
tr.search-result-highlight>td:last-child {
    animation: searchResultPulse 1.2s ease-in-out 0s 3;
}

@keyframes searchResultPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 200, 15, 0.45);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(245, 200, 15, 0.0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(245, 200, 15, 0.0);
    }
}

a.edit-button-e {
    color: #4F4F4D !important;
}

.dropdown.custom-dropdown-for-postion {
    position: absolute !important;
    right: 37px;
    margin-top: -13px;
}

/* Talk Lists page: dots stay inside the table cell */
.dropdown.talk-list-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown.talk-list-dropdown .dropdown-menu {
    z-index: 1050;
}

.channel-actions-menu {
    height: 174px;
    overflow-y: scroll;
}

p#deleteTalkGroupMessage {
    color: rgba(79, 79, 77, 0.50);
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 13px;
}

.dropdown.custom-dropdown-for-postion .dropdown-item.active,
.dropdown-item:active {
    background-color: #fff !important;
}

.table-active {
    background-color: #F9F9F9 !important;
    /* Light grey background for active rows */
}

#search-layout td a {
    color: #4F4F4D !important;
}

.hide-delete-dropdown {
    height: fit-content !important;
}

.for-scroll-bar {
    background-color: #FCFCFD;
    max-height: 500px;
    overflow-y: auto;
    margin-bottom: 100px;
}

#deleteTalkMessage {
    color: rgba(79, 79, 77, 0.50);
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.btnarea.video-audio-btn{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.btnarea.video-audio-btn .save-btn{
    display: flex;
    align-items: center;
    gap: 2px;
}
.btnarea.video-audio-btn .cancel-btn{
    display: flex;
    align-items: center;
    gap: 2px;
}

a.edit-link-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

form.Slack-form input {
    border-radius: 8px;
    border: 1px solid #D9D9D9 !important;
    background: #FFF !important;
    color: #4F4F4D !important;
    font-family: Inter !important;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: normal;
    padding: 11px 16px;
}

.Slack-form input::placeholder {
    color: rgba(79, 79, 77, 0.50);
}

.Slack-form label {
    color: #4F4F4D;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

a.btn.linkbtn-slack {
    color: rgba(79, 79, 77, 0.50);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.linkbtn {
    display: flex;
    justify-content: space-between;
}

.integration-title {
    color: #4F4F4D;
    font-family: Inter;
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.cancel-btn {
    border-radius: 24.5px !important;
    border: 1px solid #4F4F4D;
    background: #FFF;
    height: 40px;
    color: #4F4F4D !important;
    text-align: center;
    font-family: Inter;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.save-btn {
    border-radius: 24.5px !important;
    border: 1px solid #EECA46;
    background: #F5C80F;
    height: 40px;
    color: #4F4F4D !important;
    text-align: center;
    font-family: Inter;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.cancel-btn:hover {
    border-radius: 24.5px;
    border: 1px solid #4F4F4D !important;
    background: #FFF !important;
    height: 40px;
    color: #4F4F4D;
    text-align: center;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.save-btn:hover {
    border-radius: 24.5px;
    border: 1px solid #EECA46 !important;
    background: #F5C80F !important;
    height: 40px;
    color: #4F4F4D;
    text-align: center;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #F5C80F !important;
}

/* Talk Details: hidden task row should be nearly invisible (no big blank gap) */
tr.hidden-task-row {
    height: 22px;
    background: transparent !important;
    opacity: 0.65;
}

tr.hidden-task-row td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    border-top: none !important;
    border-bottom: none !important;
}

.hidden-task-show-btn {
    line-height: 1 !important;
    font-size: 12px !important;
    color: #4F4F4D !important;
}

.hidden-task-show-btn i {
    font-size: 14px;
}

.cancel-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.talkgroup-2 {
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    border-radius: 7px;
}

.otherdata-2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

form.Slack-form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.register-box.integration-box {
    display: flex;
    gap: 22px;
    align-items: center;
    align-content: center;
    margin-bottom: 22px;
}

.register-heading {
    color: #4F4F4D;
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.talkgroup-modal-header {
    border-radius: 12px 12px 0px 0px;
    background: #F5C80F;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
    gap: 11px;
}

.talkgroup-modal-content {
    border-radius: 12px !important;
    background: #FCFCFD;
}

h1#exampleModalTalkgroupLabel {
    color: #4F4F4D;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#talkgroupTabs .nav-link {
    color: rgba(79, 79, 77, 0.50);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border: none;

}



.talkgroup-modal-content .modal-body {
    padding: 0px 21px;
    border-radius: 12px;
}

ul#talkgroupTabs {
    border: none;
}

.new-userdata {
    position: relative;
}


.new-userdata.active::after {
    content: "";
    position: absolute;
    top: 0;
    /* right: 1px; */
    width: 100%;
    height: 100%;
    background-color: #fff;
}




/* .nav-link.talkgroup-model.active::before {
    content: "";
    position: absolute;
    background-color: #fff;
    top: 0;
    left: 156px;
    width: 100%;
    height: 100%;
} */


.nav-link.new-userdata {
    background-color: #ffff;
    border-radius: 0px 0px 0px 12px;
}

.nav-link.new-userdata::after {
    content: "";
    position: absolute;
    top: 0;
    left: 156px;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
}

.nav-link.new-userdata.active {
    background-color: #FCFCFD;
}

.nav-link.new-userdata.active::after {
    content: "";
    position: absolute;
    top: 0;
    left: 156px;
    width: 100%;
    height: 100%;
    background-color: #FCFCFD;
}

.nav-link.talkgroup-model {
    background-color: #ffff;
    position: relative;
    border-radius: 0px 0px 12px 0px;
}

.nav-link.talkgroup-model::before {
    width: 40px;
    height: 100%;
    background-color: #fff;
    content: "";
    position: absolute;
    top: 0;
    left: -29px;
}

.nav-link.talkgroup-model.active::before {
    width: 40px;
    height: 100%;
    background-color: #FCFCFD;
    content: "";
    position: absolute;
    top: 0;
    left: -29px;
}

.nav-link.talkgroup-model.active {
    background-color: #FCFCFD;
    position: relative;
}

.nav-link.nav-link.talkgroup-model::before {
    content: '';
    position: absolute;
}




ul.list-group {
    border-radius: 12px;
    border: 1px solid rgba(79, 79, 77, 0.50);
    background: #FFF;
    padding: 11px;
    height: 152px;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

span.checkbox-label-text {
    color: rgba(79, 79, 77, 0.50);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

p.texttalkgroup-box {
    color: rgba(79, 79, 77, 0.50);
    font-family: Inter;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
    margin-top: 7px;
}

p.add-member-text {
    color: rgba(79, 79, 77, 0.50);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 15px;
}

form.add-user-box label {
    color: rgba(79, 79, 77, 0.75);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

form.add-user-box input {
    border-radius: 8px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    color: rgb(79 79 77);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

form.add-user-box input::placeholder {
    color: rgba(79, 79, 77, 0.50);
}

select.form-select.talkgroup-form-control {
    border-radius: 8px;
    border: none;
    background: transparent;
    color: rgba(79, 79, 77, 0.50);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    margin-left: 40px;
    line-height: normal;
}

select.form-select.talkgroup-form-control:focus {
    box-shadow: none;
    outline: none;
    border: none;
}

div.talkgroup-form-label {
    border-radius: 8px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    color: rgba(79, 79, 77, 0.50);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: relative;
    padding: 3px;

}

form.Slack-form input:focus,
.form-control:focus,
form.Slack-form input:focus-visible {
    border-radius: 8px;
    border: 1px solid #D9D9D9 !important;
    background: #FFF !important;
    color: #4F4F4D !important;
    font-family: Inter !important;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: normal;
    padding: 11px 16px;
    outline: none !important;
    box-shadow: none !important;
}

.modal {
    background-color: #4F4F4D80 !important;
}

.nav-link.talkgroup-model.active svg path {
    stroke: #4F4F4D !important;
}

.nav-link.talkgroup-model svg path {
    stroke: #4F4F4D80 !important;
}

.nav-link.new-userdata.active svg path {
    stroke: #4F4F4D !important;
}

.nav-link.new-userdata svg path {
    stroke: #4F4F4D80 !important;
}

.nav-link.talkgroup-model.active {
    color: #4F4F4D !important;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border: none;
}

.nav-link.new-userdata.active {
    color: #4F4F4D !important;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border: none;
}

.password-reset p {
    color: rgba(79, 79, 77, 0.75);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

.password-reset {
    display: flex;
    gap: 6px;
    margin-top: 26px;
    align-items: center;
}

.password-reset a {
    color: rgba(79, 79, 77, 0.50);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    text-decoration-line: underline !important;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}


.upload-header {
    margin-bottom: 20px;
}

.upload-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.upload-header p {
    color: rgba(79, 79, 77, 0.75);
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.upload-area {
    position: relative;
    border-radius: 8px;
    border: 4px dashed #D9D9D9;
    background: #FFF;
    padding: 60px 40px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-area:hover {
    border-color: #a0a0a0;
    background-color: #f5f5f5;
}

.upload-area.dragover {
    border-color: #f4c430;
    background-color: #fffbf0;
    border-style: solid;
}

.upload-content {
    pointer-events: none;
}