#Tiedostot {
    border: none !important;
}

#Playerit {
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 1px solid #0073ff !important;
    margin-top: -1px;
    padding-top: 38px;
}

/* Ikoni-kontti vasemmalla */
.icon-container {
    display: flex;
    align-items: center;
    flex: 1; /* Ottaa käytettävissä olevan tilan */
}

.custom-item:hover {
    background-color: #333333; /* Hieman vaaleampi musta, näyttää harmahtavalta mustalla taustalla */
    transition: background-color 0.2s ease; /* Pehmeä siirtymä */
}

.custom-item {
    justify-content: space-between;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: black;
    color: white;
    padding: 5px;
    border: 1px solid #0073ff;
    margin-bottom: 2px;
    border-radius: 3px;
}
/* Poistetaan Syncfusion-komponenttien hover-efektit */
.e-listbox-wrapper .e-list-item:hover,
.e-listbox-wrapper .e-list-item.e-hover,
.fiscal-listbox .e-list-item:hover,
.e-listbox .e-list-item:hover,
#Tiedostot .e-list-item:hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: transparent !important;
}

/* Poistetaan valittujen itemien korostus */
.e-listbox-wrapper .e-list-item.e-active,
.e-listbox-wrapper .e-list-item.e-active.e-hover,
.e-listbox-wrapper .e-list-item.e-selected,
.fiscal-listbox .e-list-item.e-active,
.fiscal-listbox .e-list-item.e-selected,
#Tiedostot .e-list-item.e-active,
#Tiedostot .e-list-item.e-selected,
.e-list-item.e-active,
.e-list-item.e-selected {
    background-color: transparent !important;
    color: inherit !important;
    border-color: transparent !important;
}

/* Varmistetaan, että komponenttien tausta pysyy vakaana */
.e-listbox-wrapper .e-list-item,
.e-listbox-wrapper .e-list-parent,
.e-listbox-container,
.e-listbox-wrapper {
    background-color: transparent !important;
}

.item-text {
    margin-left: 10px; /* Pienennetty tila ikonin ja tekstin välillä */
    max-width: 120px; /* Pienennetty leveyttä oikean ikonin takia */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* Status-ikonin perustyyli */
.status-icon {
    margin-left: 3px; /* Pienennetty tila ikonin ja tekstin välillä */
    max-width: 120px; /* Pienennetty leveyttä oikean ikonin takia */
    min-width: 20px;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Vihreä ikoni (valintamerkki) */
.icon-green {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M4.707 12.293a1 1 0 1 0-1.414 1.414l5 5a1 1 0 0 0 1.414 0l11-11a1 1 0 1 0-1.414-1.414L9 16.586l-4.293-4.293z' id='a'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cuse fill='%23000' fill-rule='nonzero' xlink:href='%23a'/%3E%3Cg mask='url(%23b)' fill='%236AC137'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Oranssi ikoni (x-merkki) */
.icon-orange {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M5.293 5.293a1 1 0 0 1 1.414 0L12 10.585l5.293-5.292a1 1 0 0 1 1.32-.083l.094.083a1 1 0 0 1 0 1.414L13.415 12l5.292 5.293a1 1 0 0 1 .083 1.32l-.083.094a1 1 0 0 1-1.414 0L12 13.415l-5.293 5.292a1 1 0 0 1-1.32.083l-.094-.083a1 1 0 0 1 0-1.414L10.585 12 5.293 6.707a1 1 0 0 1-.083-1.32z' id='a'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cuse fill='%23000' fill-rule='nonzero' xlink:href='%23a'/%3E%3Cg mask='url(%23b)' fill='%23EA8A45'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Punainen ikoni (x-merkki) */
.icon-red {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M5.293 5.293a1 1 0 0 1 1.414 0L12 10.585l5.293-5.292a1 1 0 0 1 1.32-.083l.094.083a1 1 0 0 1 0 1.414L13.415 12l5.292 5.293a1 1 0 0 1 .083 1.32l-.083.094a1 1 0 0 1-1.414 0L12 13.415l-5.293 5.292a1 1 0 0 1-1.32.083l-.094-.083a1 1 0 0 1 0-1.414L10.585 12 5.293 6.707a1 1 0 0 1-.083-1.32z' id='a'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cuse fill='%23000' fill-rule='nonzero' xlink:href='%23a'/%3E%3Cg mask='url(%23b)' fill='%23C33053'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Sininen ikoni (huutomerkki) */
.icon-blue {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M16.14 1a1 1 0 0 1 .707.293l5.86 5.86A1 1 0 0 1 23 7.86v8.28a1 1 0 0 1-.293.707l-5.86 5.86a1 1 0 0 1-.707.293H7.86a1 1 0 0 1-.707-.293l-5.86-5.86A1 1 0 0 1 1 16.14V7.86a1 1 0 0 1 .293-.707l5.86-5.86A1 1 0 0 1 7.86 1h8.28zm-.414 2H8.274L3 8.274v7.452L8.274 21h7.452L21 15.726V8.274L15.726 3zm-4.433 11.293a1 1 0 1 1 1.414 1.414 1 1 0 0 1-1.414-1.414zM12 7a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V8a1 1 0 0 1 1-1z' id='a'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cuse fill='%23000' xlink:href='%23a'/%3E%3Cg mask='url(%23b)' fill='%230073ff'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Musta/harmaa ikoni (huutomerkki) */
.icon-black {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M16.14 1a1 1 0 0 1 .707.293l5.86 5.86A1 1 0 0 1 23 7.86v8.28a1 1 0 0 1-.293.707l-5.86 5.86a1 1 0 0 1-.707.293H7.86a1 1 0 0 1-.707-.293l-5.86-5.86A1 1 0 0 1 1 16.14V7.86a1 1 0 0 1 .293-.707l5.86-5.86A1 1 0 0 1 7.86 1h8.28zm-.414 2H8.274L3 8.274v7.452L8.274 21h7.452L21 15.726V8.274L15.726 3zm-4.433 11.293a1 1 0 1 1 1.414 1.414 1 1 0 0 1-1.414-1.414zM12 7a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V8a1 1 0 0 1 1-1z' id='a'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cuse fill='%23000' xlink:href='%23a'/%3E%3Cg mask='url(%23b)' fill='%23b0bfc9'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Oletusikoni varmuuden vuoksi */
.icon-default {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M8 22a1 1 0 0 1 0-2h3v-2H4a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h16a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3h-7v2h3a1 1 0 0 1 .993.883L17 21a1 1 0 0 1-1 1zM20 4H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z' id='a'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cuse fill='%23000' fill-rule='nonzero' xlink:href='%23a'/%3E%3Cg mask='url(%23b)' fill='%23FFF'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}


/* styles.css tai App.css */
.custom-listbox2 {
    background-color: black !important;
}

.custom-listbox2 .e-list-item {
    color: white !important;
}


/* Muuttaa valintaruudun taustavärin */
.e-listbox .e-checkbox-wrapper .e-frame {
    background-color: red !important; /* Vaihda tämä haluamaasi väriin */
    border-color: #c0c0c0 !important;
}
/* Tämä varmistaa, että painike ja valintaruutu eivät mene päällekkäin */
.custom-item-container {
    width: 100%;
}

.checkbox-placeholder {
    width: 24px; /* Valintaruudun koon mukaan */
}

/* Lisää tyylit tarpeen mukaan */
/* index-styles.css -tiedostossa */
.tiedostot-otsikko {
    color: white !important; /* Tai mikä tahansa muu haluamasi väri */
    font-weight: bold;
}
/* Muuta hover-väriä */
/*#Tiedostot .e-list-item:hover .e-list-text {
    background-color: red;*/ /* Tummempi sininen hover-tilassa */
    /*color: aqua;
}*/
/* Estä alkuperäisen hover-tilan näkyminen */
/*#Tiedostot .e-list-item:hover {
    background-color: #122938 !important;
}*/
/* Tyylimäärittelyt ListBox-komponentille */
#Tiedostot .e-list-item {
    padding: 4px 8px;
    margin-right: 10px;
}

#Tiedostot .custom-item-container {
    display: flex;
    align-items: center;
    width: 100%;
}

#Tiedostot .file-button {
     background-color: #122938; /*tiedostolistalla oleav buttonin taustaväri*/
    width: 410px !important;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10px;
}

/* Varmistetaan että checkbox näkyy oikealla */
#Tiedostot .e-checkbox-wrapper {
    float: right;
    margin-left: auto;
}

/* Korjataan listbox-elementtien leveys */
#Tiedostot .e-list-item.e-list-box-item {
    width: 100%;
}

.button {
    width: 95%; /* Tai määritä haluamasi kiinteä leveys, esim. 200px */
    padding: 10px; /* Lisää tarvittaessa täytettä */
    box-sizing: border-box; /* Varmistaa, että padding sisältyy leveyteen */
}

.button-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.e-file-drop {
    display: none !important;
}

.e-upload .e-btn {
    background-color: #0078D4;
    color: white;
    border-radius: 6px;
    padding: 10px 20px;
    /*font-weight: bold;*/
}

.e-uploader,
.e-upload,
.e-upload .e-file-select {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

    .e-upload .e-upload-browse-btn {
        background: var(--color-accent) !important;
        border: 1px solid #0073ff !important;
        border-radius: 0 !important;
        color: #fff !important;
        height: unset !important;
        padding: 10px !important;
        width: calc(100% + 29px) !important; /* Muutetaan auto -> 100% */
        margin-left: -20px !important;
        box-sizing: border-box !important; /* Lisätään tämä varmuuden vuoksi */
        margin-bottom: -20px !important;
    }

        .e-upload .e-upload-browse-btn:hover {
            /* Voit halutessasi lisätä hover-efektin, esim.: */
            color: white !important;
            background: transparent !important;
            cursor: pointer;
        }

.add-files-buttons #UploadDefault { /* Käytä ID:tä kohdistamiseen */
    margin-bottom: 0 !important; /* Poistetaan alareunan marginaali */
}

.add-files-buttons {
    display: flex !important;
    flex-direction: column !important;
    width: 150px !important;
    gap: 5px; /* Määritetään rako painikkeiden väliin */
}

    .add-files-buttons > * {
        /*margin-bottom: 0 !important;*/
    }

    .add-files-buttons .e-upload {
        display: block; /* Varmistetaan, että SfUploader vie koko leveyden */
    }

        .add-files-buttons .e-upload .e-upload-browse-btn {
            width: 100%; /* Varmistetaan, että SfUploaderin painike vie koko leveyden */
            box-sizing: border-box;
        }