body {
    font-family: 'Roboto', sans-serif;
    background: #f2f3f5;
}

.second-body {
    background: #black;
}

p {
    margin-top: 2px;
    margin-bottom: 0;
    font-size: 14px;
    color: #333;
}

a {
    color: #51dfd4; /* Linkkien väri */
}

a:hover {
    color: #51dfd4; /* Linkkien väri kun hiiren osoitin on linkin päällä */
}

a:active {
    color: #51dfd4; /* Linkkien väri kun linkkiä klikataan */
}

.p-medal {
    font-size: 8px;
}

.p-medal-place {
    font-size: 12px;
}

.p-light{
    color: #71797E;
    font-size: 12px;
}

.email-font {
    font-size: 16px;
    margin-top; 1px;
}

.url-font {
    color: #71797E;
    font-size: 16px;
    margin-top; 1px;
}

.ln-icon {
    size: 20px;
}

.modal-header {
    background: #333;
    color: #f2f3f5;
    border-radius: 10px 10px 0 0;
}

.modal-footer {
    background: #333;
    color: #f2f3f5;
    border-radius: 0 0 10px 10px;
}

.modal-content {
    border-radius: 30px;
}

.close {
    color: #f2f3f5;
}
/* Existing styles */
.profile-picture {
    width: 150px;
    height: 150px; /* Korkeus samaksi kuin leveys */
    border-radius: 75px; /* Puolet leveydestä ja korkeudesta */
    object-fit: cover; /* Varmistaa, että kuva peittää koko alueen ilman venymistä */
    border: 3px solid #fff; /* Musta kehys, 5 pikseliä paksu */
    z-index: 10;
}

.background-image {
    border-radius: 10px 10px 0px 0px;
    position: absolute;
    overflow: hidden;
    height: 150px;
    width: 100%;
    object-fit: cover; /* Varmistaa, että kuva peittää koko alueen ilman venymistä */
    justify-content: center; /* Keskittää sisällön vaakasuunnassa */
    z-index: 1;
}

.container {
    max-width: 1100px;
    display: flex;
    justify-content: center; /* Keskittää lapsielementit vaakasuunnassa */
    align-items: center; /* Keskittää lapsielementit pystysuunnassa */
}

.container-marginless {
    max-width: 1100px;
    display: flex;
    justify-content: center; /* Keskittää lapsielementit vaakasuunnassa */
    align-items: center; /* Keskittää lapsielementit pystysuunnassa */
    margin-right: 0;
    margin-left: 0;
}

.margin-left-0 {
    margin-left: 0px !important;
}

.nav-icon-text {
    color: #71797E;
}

.profile-pic-area {
    position: relative;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    display: flex; /* Asettaa elementin flex-containeriksi */
    justify-content: center; /* Keskittää sisällön vaakasuunnassa */
    align-items: top; /* Keskittää sisällön pystysuunnassa */
    padding: 20px;
}

.profile-info-border{
    border: 3px solid #fff; /* Musta kehys, 5 pikseliä paksu */
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background: white;
    z-index: 10;
    padding: 20px;
    height: 100%;
}

.profile-info-border-2 {
    border: 3px solid #fff; /* Musta kehys, 5 pikseliä paksu */
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background: white;
    z-index: 10;
    padding: 20px;
}


.profile-info-area {
    max-width: 1100px;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

.profile-score-area {
    max-width: 1100px;
    align-items: center;
    position: relative;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

.main-user-area {
    max-width: 1100px;
    align-items: center;
    position: relative;
    height: 40px; /* Korkeus samaksi kuin leveys */
    background: white;
    color: #71797E;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

.other-profile-score-area {
    max-width: 1100px;
    position: relative;
    height: 400px; /* Korkeus samaksi kuin leveys */
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

.profile-trophy-area {
    max-width: 1100px;
    position: relative;
    height: 100%; /* Korkeus samaksi kuin leveys */
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

.profile-score-area-other {
    align-items: center;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    padding: 10px;
}

.chart-container {
    flex-grow: 1;
    padding: 10px;
}

.canvas-container {
    width: 100%;
    height: 250px; /* Pienennetty korkeus */
}

.score-circle-container {
    display: flex;
    justify-content: center;
    max-width: 40%;
    padding: 10px;
}

.score-circle-other {
    background: rgba(54, 162, 235, 0.2);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    padding: 10px;
    text-align: center;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.circle-other {
    background: rgba(81, 223, 212, 0.2);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    padding: 10px;
    text-align: center;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.circle-red {
    background: rgba(255, 99, 132, 1);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    padding: 10px;
    text-align: center;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.circle-blue {
    background: rgba(54, 162, 235, 1);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    padding: 10px;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.score-circle h5, .score-circle h2 {
    margin: 0;
}

#ScoreChart {
    max-width: 100%;
    height: auto;
}


.line-diagram {
    height: 100px;
    background: white;
    border-radius: 10px;
}

.line-container {
    heigt: 300px;
}

.other-line-diagram {
    background: white;
    border-radius: 10px;
}

.trophy-area {
    height: 25%
}

.border-line {
    background: linear-gradient(to right, #ffffff, #f3f3f3);
    border: 1px solid #f3f3f3; /* Musta kehys, 5 pikseliä paksu */
    border-radius: 10px;
}

.border-line-placeholder {
    /* Varjostus syvyyden luomiseksi */
    box-shadow: inset 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    background: #fff;
    border: 1px solid #f3f3f3; /* Musta kehys, 5 pikseliä paksu */
    border-radius: 10px;
    color: white;
}

.placeholder {
    /* Varjostus syvyyden luomiseksi */
    box-shadow: inset 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    border: 1px solid #f3f3f3; /* Musta kehys, 5 pikseliä paksu */
    border-radius: 10px;
}

.border-line-line {
    border: 1px solid #f3f3f3; /* Musta kehys, 5 pikseliä paksu */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Kevyt varjo navigointipalkin alle */
    border-radius: 10px;
}

.badge-repdek {
    background: linear-gradient(to bottom, #424242, #6b6b6b);
    padding: 5px;
    color: white;
    text-size: 18px;
}

.badge-repdek2 {
    background: linear-gradient(to bottom, #8c8c8c, #6b6b6b);
    padding: 5px 10px 5px 10px;
    border-radius: 50px;
    color: white;
    text-size: 18px;
}

.top {
    height: 100% !important;
}

.max-width {
    max-width: 1100px;
}

.center-align {
    display: flex; /* Asettaa elementin flex-containeriksi */
    justify-content: center; /* Keskittää sisällön vaakasuunnassa */
    align-items: center; /* Keskittää sisällön pystysuunnassa */
}

/* About Section */
.about-section {
    margin-top: 10px;
    margin-bottom: 10px;
}

.about-content {
  height: 120px; /* Aseta korkeus haluamaksesi */
  overflow-y: auto; /* Mahdollistaa pystysuunnan vierityksen */
  padding: 10px;
  border-radius: 5px; /* Pyöristetyt kulmat (valinnainen) */
}

.d-none {
  display: none;
}

#about-full {
  white-space: normal;
}

.score-circle {
    background: rgba(81, 223, 212, 0.2);
    width: 150px;
    height: 150px; /* Korkeus samaksi kuin leveys */
    display: inline-block;
    border-radius: 50%; /* pyöreät kulmat */
    padding: 10px 20px; /* sisäinen tyhjä tila */
    text-align: center; /* tekstin keskitys */
    color: black;
}
.point-margin {
    margin-bottom: 28px;
    margin-left: 20px;
}

.score-circle h1 {
    margin: 0; /* poistaa oletusmarginaalit */
    font-size: 4em; /* isompi fonttikoko */

}

.score-circle h2 {
    margin: 0; /* poistaa oletusmarginaalit */
    font-size: 0.6em; /* isompi fonttikoko */
}

.score-circle p {
    margin: 0; /* poistaa oletusmarginaalit */
    font-size: 0.4em; /* isompi fonttikoko */
}

.other-score-circle {
    border: 2px solid #000; /* Musta kehys, 5 pikseliä paksu */
    border-radius: 50%; /* pyöreät kulmat */
    width: 150px;
    height: 150px; /* Korkeus samaksi kuin leveys */
    display: inline-block;
    padding: 10px 20px; /* sisäinen tyhjä tila */
    text-align: center; /* tekstin keskitys */
}

.other-score-circle h1 {
    margin: 0; /* poistaa oletusmarginaalit */
    font-size: 3em; /* isompi fonttikoko */
}


/* You can add more styles as needed. Navs. */
.side-navbar {
    position: fixed;
    top: 0;          /* Alkaa sivun yläreunasta */
    left: 0;         /* Alkaa sivun vasemmasta reunasta */
    width: 200px;
    height: 100%;
    background-color: #333;
    color: #f2f3f5;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column; /* Asetetaan suunta pystysuunnassa */
    justify-content: space-between; /* Levittää lapsielementit tasaisesti */
    z-index: 1050;
}
@media (max-width: 767.98px) {
    .side-navbar {
        width: 0px; /* Pienempi leveys XS-näytöille */
        padding: 10px; /* Pienempi sisäinen tyhjä tila */
    }
}

@media (max-width: 767.98px) {
    .no-padding-sm {
        padding: 0px; /* Pienempi sisäinen tyhjä tila */
    }
}

@media (max-width: 1200px) {
    .no-padding-lg {
        padding: 0px; /* Pienempi sisäinen tyhjä tila */
    }
}

.page-margin {
        margin-right: 48px;
        margin-left: 48px;
}

@media (max-width: 767.98px) {
    .page-margin {
        margin-right: 0px !important;
        margin-left: 0px !important; /* Pienempi sisäinen tyhjä tila */
    }
}
@media (max-width: 1200px) {
    .page-margin-lg {
        margin-right: 0px !important;
        margin-left: 0px !important; /* Pienempi sisäinen tyhjä tila */
    }
}
@media (max-width: 1200px) {
    .margin-bottom-sm {
        margin-bottom: 16px;
    }
}

.nav-div {
    display: flex; /* Asetetaan flexbox */
    background: #f2f3f5;
    width: 200%;
    height: 30px;
    border-radius: 20px 0 0 20px; /* pyöreät kulmat */
    align-items: center;
}

.nav-div-secondary {
    display: flex; /* Asetetaan flexbox */
    width: 200%;
    height: 30px;
    align-items: center;
}

.paddiv-back {
    background-color: #f2f3f5; /* Ulomman divin taustaväri */
}

.paddiv-front-top {
    background-color: #333;
    border-radius: 0 0 20px 0; /* Pyöristetyt reunat */
}

.paddiv-front-top-full {
    background-color: #333;
}

.paddiv-front-bottom {
    background-color: #333;
    border-radius: 0 20px 0 0; /* Pyöristetyt reunat */
}

.paddiv-front-bottom-full {
    background-color: #333;
}

.navbar.bg-transparent {
    background: transparent;
}

.main-content {
    margin-left: 200px; /* Adjust the width of the side navbar */
    padding: 20px;
    justify-content: center; /* Keskittää sisällön vaakasuunnassa */
}
@media (max-width: 767.98px) {
    .main-content {
        margin-left: 0px; /* Adjust the width of the side navbar */
        padding: 20px;
        justify-content: center; /* Keskittää sisällön vaakasuunnassa */
    }
}

.navbar-nav {
    list-style: none;
    padding: 0;
}

.nav-item {
    height: 80px !important;
}

.navbar-nav .nav-item {
    padding: 10px 0;
}

.navbar-nav .nav-item a {
    color: white;
    text-decoration: none;
}

.navbar-nav .nav-item form .btn.custom-button {
    width: 100%;
    margin-top: 10px;
}


.navbar-brand img {
    height: 70px; /* Säädä maksimikorkeutta tarvittaessa */
}

/* Navigointipalkin tyyli */
.navbar {
    z-index: 1000; /* Lisätään korkea z-indeksi */
}

.navbar-web {
    color: white;
    z-index: 1000; /* Lisätään korkea z-indeksi */
}

.search-form {
    border: none;
    position: relative;
}

.search-input {
    border-radius: 50px; /* Pyöreät reunat hakukentälle */
    padding-right: 40px; /* Lisätila napille */
}

.search-btn {
    position: absolute;
    right: 0;
    border-radius: 50%; /* Pyöreä nappi */
    padding: 0 12px; /* Säädä tarvittaessa */
    height: 30px; /* Sama kuin input-kentän korkeus */
    width: 30px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff; /* Vaihda taustaväri haluamaksesi */
    border: 1px solid #ced4da; /* Sama kuin input-kentän border */
}

.search-btn .fas {
    color: #495057; /* Vaihda ikonin väri haluamaksesi */
}

/* Vaihda focus-tilan tyylejä tarvittaessa */
.search-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.search-btn:focus {
    box-shadow: none;
}


/* Painikkeen perustyyli */
.custom-button {
    background-color: #51dfd4; /* Painikkeen taustaväri */
    color: #fff; /* Painikkeen tekstin väri */
    border: none; /* Ei reunaa */
    border-radius: 30px; /* Pyöristetyt kulmat */
    transition: background-color 0.3s ease; /* Animaatio värin muuttumiselle */
    margin-left: 15px;
}

.logout-button {
    border-radius: 20px; /* Pyöristetyt kulmat */
}

/* Painikkeen tyyli, kun hiiri on sen päällä */
.custom-button:hover {
    background-color: #40b2a9; /* Taustaväri, kun hiiri on painikkeen päällä */
    color: #fff; /* Tekstin väri, kun hiiri on painikkeen päällä */
}

/* Painikkeen tyyli, kun se on aktiivinen (klikattu) */
.custom-button:active {
    background-color: #A9A9A9; /* Taustaväri, kun painiketta painetaan */
}

.custom-button-blue {
    color: #51dfd4; /* Painikkeen tekstin väri */
    border: 1px solid #51dfd4;
    border-radius: 30px; /* Pyöristetyt kulmat */
    transition: background-color 0.3s ease; /* Animaatio värin muuttumiselle */
    margin-left: 15px;
}

/* Painikkeen tyyli, kun hiiri on sen päällä */
.custom-button-blue:hover {
    background-color: #51dfd4; /* Taustaväri, kun hiiri on painikkeen päällä */
    color: white;
}

/* Painikkeen tyyli, kun se on aktiivinen (klikattu) */
.custom-button-blue:active {
    background-color: #A9A9A9; /* Taustaväri, kun painiketta painetaan */
}

.navbar-light .navbar-nav .nav-link {
    color: white; /* Aseta haluamasi väri */
    font-size: 14px; /* Aseta haluamasi fonttikoko */
    padding-right: 15px; /* Lisätään oikealle padding */
}

.navbar-light .navbar-nav .nav-link:hover {
  color: #51dfd4;
  text-decoration: none;
}

/* Painikkeen perustyyli */
.custom-button-language {
    background: none;
    color: #333; /* Painikkeen tekstin väri */
    border: none; /* Ei reunaa */
    border-radius: 30px; /* Pyöristetyt kulmat */
    transition: background-color 0.3s ease; /* Animaatio värin muuttumiselle */
    margin-left: 15px;
}

/* Painikkeen tyyli, kun hiiri on sen päällä */
.custom-button-language:hover {
    color: #333; /* Tekstin väri, kun hiiri on painikkeen päällä */
    border: none;
}

/* Painikkeen tyyli, kun se on aktiivinen (klikattu) */
.custom-button-language:active {
    border: none;
}

.user-info {
  text-align: center;
  padding: 20px;
}

.trophies-container {
    overflow-x: auto;  /* Mahdollistaa vaakasuuntaisen vierityksen */
    white-space: nowrap;  /* Pitää kaikki listaelementit samalla rivillä */
}

.trophies-row {
    display: flex;  /* Asettaa lapset vierekkäin */
    flex-direction: row;  /* Asettaa lapset vaakasuuntaan */
    list-style-type: none;  /* Poistaa listan oletustyylin */
    padding: 0;  /* Poistaa oletuspaddingin */
}

.trophies-row li {
    display: inline-block;  /* Asettaa listan lapset inline-blockiksi */
    margin-right: 10px;  /* Lisää väliä trofeeiden välille */
}

.user-info-small {
    display: flex;
    align-items: center;
    color: #f2f3f5;
}

.profile-picture-small {
    width: 30px; /* Säädä kokoa tarpeen mukaan */
    height: 30px; /* Säädä kokoa tarpeen mukaan */
    border-radius: 50%; /* Pyöristää kuvan */
    border: 2px solid #f2f3f5; /* Valkoinen reunus */
    object-fit: cover; /* Varmistaa, ettei kuva veny */
    margin-right: 10px; /* Väli kuvan ja tekstin välillä */
}

.username-small {
    margin: 0; /* Poistaa ylimääräiset marginaalit */
}



/* ------------------------- company stuff ---------------------------------------*/

.company-logo {
    width: 200px;
    height: 100px; /* Korkeus samaksi kuin leveys */
    border-radius: 10px;
    object-fit: contain; /* Varmistaa, että kuva peittää koko alueen ilman venymistä */
    border: 3px solid #fff; /* Musta kehys, 5 pikseliä paksu */
    z-index: 10;
}

.company-line-diagram {
    height: 150px;
}

.company-train-area {
    position: relative;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    display: flex; /* Asettaa elementin flex-containeriksi */
    justify-content: center; /* Keskittää sisällön vaakasuunnassa */
    align-items: top; /* Keskittää sisällön pystysuunnassa */
    z-index: 10;
    padding: 20px;
    margin-left: 15px;
    height: 370px;
}

.company-rep-area {
    background: rgba(81, 223, 212, 0.2);
    position: relative;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
    padding: 10px;
    margin: 10px;
    height: 60px;
    width: 250px;
}

.company-rep-area-white {
    background: white;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
    padding: 10px;
    margin: 10px;
}

.unlock-area {
    background: #333333;
    color: white;
    max-width: 1100px;
    height: 600px;
    position: relative;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
    padding: 10px;
    margin: 10px;
}

.company-reps-area {
    background: rgba(81, 223, 212, 0.2);
    position: relative;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
    padding: 20px;
    margin: 10px;
}

.scrollable-area {
    max-height: 300px; /* Voit säätää korkeutta tarpeen mukaan */
    overflow-y: auto; /* Sallii pystysuunnassa scrollauksen, kun sisältö ylittää max-heightin */
}

.how-to-area {
    position: relative;
    background: rgba(81, 223, 212, 0.2);
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    display: flex; /* Asettaa elementin flex-containeriksi */
    justify-content: center; /* Keskittää sisällön vaakasuunnassa */
    align-items: top; /* Keskittää sisällön pystysuunnassa */
    z-index: 10;
    padding: 20px;
    margin-left: 15px;
}

.how-to-area-white {
    position: relative;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    display: flex; /* Asettaa elementin flex-containeriksi */
    justify-content: center; /* Keskittää sisällön vaakasuunnassa */
    align-items: top; /* Keskittää sisällön pystysuunnassa */
    z-index: 10;
    padding: 20px;
    margin-left: 15px;
}

.icon-right {
    position: absolute; /* Asettaa elementin suhteessa sen ensimmäiseen position: relative; -määritettyyn yläelementtiin */
    right: 0; /* Asettaa elementin täysin oikeaan reunaan */
    padding-right: 10px;
}

.space-between {
    justify-content: space-between; /* Levittää lapsielementit tasaisesti */
}

.dropdown-menu {
    left: -30px!important;
}

.progress-bar-container {
    width: 85%;
    height: 25px;
    background-color: #ddd;
    border-radius: 10px;
    overflow: hidden; /* Varmistaa, että sisädivin kulmat pysyvät pyöreinä */
}
@media (max-width: 1200px) {
    .progress-bar-container {
        width: 60%;
    }
}

.progress-bar-container-2 {
    width: 98%;
    height: 25px;
    background-color: #ddd;
    border-radius: 10px;
    overflow: hidden; /* Varmistaa, että sisädivin kulmat pysyvät pyöreinä */
}

.progress-bar {
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease, background-color 0.5s ease;
}

/* Värin vaihtuminen arvon perusteella */
.progress-bar[style*="width: 0 "] {
    background-color: #cc0000; /* Oletusväri */
}
.progress-bar[style*="width: 1"] {
    background-color: #cc0000; /* Oletusväri */
}
.progress-bar[style*="width: 2"] {
    background-color: #cc3300;
}
.progress-bar[style*="width: 3"] {
    background-color: #cc6600;
}
.progress-bar[style*="width: 4"] {
    background-color: #cc9900;
}
.progress-bar[style*="width: 5"] {
    background-color: #cccc00;
}
.progress-bar[style*="width: 6"] {
    background-color: #a3cc00;
}
.progress-bar[style*="width: 7"] {
    background-color: #7acc00;
}
.progress-bar[style*="width: 8"] {
    background-color: #51cc00;
}
.progress-bar[style*="width: 9"] {
    background-color: #28cc00;
}
.progress-bar[style*="width: 100"] {
    background-color: #00cc00;
}

.notification-dot {
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
  margin-left: 5px;
  position: relative;
  top: -3px; /* Säädä sijaintia tarvittaessa */
}

.indiwork-progress-bar {
    background: white;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
    padding: 10px;
    padding-left: 20px;
    margin: 10px;
}

.settings-area {
    position: relative;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    display: flex; /* Asettaa elementin flex-containeriksi */
    justify-content: center; /* Keskittää sisällön vaakasuunnassa */
    align-items: top; /* Keskittää sisällön pystysuunnassa */
    z-index: 10;
    padding: 20px;
    margin-left: 15px;
}

.settings-area-green {
    position: relative;
    background: rgba(81, 223, 212, 0.2);
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    display: flex; /* Asettaa elementin flex-containeriksi */
    justify-content: center; /* Keskittää sisällön vaakasuunnassa */
    align-items: top; /* Keskittää sisällön pystysuunnassa */
    z-index: 10;
    padding: 20px;
    margin-left: 15px;
}

.settings-area-red {
    position: relative;
    background: #ffb2b2;
    border-radius: 10px;
    border: 3px solid red;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    display: flex; /* Asettaa elementin flex-containeriksi */
    justify-content: center; /* Keskittää sisällön vaakasuunnassa */
    align-items: top; /* Keskittää sisällön pystysuunnassa */
    z-index: 10;
    padding: 20px;
    margin-left: 15px;
}

.btn-secondary {
    border-radius: 30px; /* Pyöristetyt kulmat */
    transition: background-color 0.3s ease; /* Animaatio värin muuttumiselle */
    margin-left: 15px;
}
.btn-outline-secondary {
    border-radius: 30px; /* Pyöristetyt kulmat */
    transition: background-color 0.3s ease; /* Animaatio värin muuttumiselle */
    margin-left: 15px;
}
.btn-danger {
    border-radius: 30px; /* Pyöristetyt kulmat */
    transition: background-color 0.3s ease; /* Animaatio värin muuttumiselle */
    margin-left: 15px;
}
.btn-outline-danger {
    border-radius: 30px; /* Pyöristetyt kulmat */
    transition: background-color 0.3s ease; /* Animaatio värin muuttumiselle */
    margin-left: 15px;
}
.btn-success {
    border-radius: 30px; /* Pyöristetyt kulmat */
    transition: background-color 0.3s ease; /* Animaatio värin muuttumiselle */
    margin-left: 15px;
}
.btn-outline-success {
    border-radius: 30px; /* Pyöristetyt kulmat */
    transition: background-color 0.3s ease; /* Animaatio värin muuttumiselle */
    margin-left: 15px;
}
.btn-primary {
    border-radius: 30px; /* Pyöristetyt kulmat */
    transition: background-color 0.3s ease; /* Animaatio värin muuttumiselle */
    margin-left: 15px;
}
.btn-outline-warning {
    border-radius: 30px; /* Pyöristetyt kulmat */
    transition: background-color 0.3s ease; /* Animaatio värin muuttumiselle */
    margin-left: 15px;
}
.btn-outline-info {
    border-radius: 30px; /* Pyöristetyt kulmat */
    transition: background-color 0.3s ease; /* Animaatio värin muuttumiselle */
    margin-left: 15px;
}

.image-preview img {
    width: 120px;
    object-fit: contain;
    height: 120px;
    border-radius: 50%;
}

.search-image-preview img {
    width: 80px;
    object-fit: cover;
    height: 80px;
    border-radius: 50%;
}

.delete-image {
    cursor: pointer;
    width: 20px;
    height: 20px;
    background-color: red;
    color: white;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    display: inline-block;
    top: 5px;
    right: 5px;
    font-size: 16px;
}

.badge-primary {
    background: #51dfd4;
}

.all-comp-area {
    position: relative;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
    padding: 20px;
}

.competition-form .form-group label {
    display: block; /* Varmistaa, että label on omalla rivillään */
    margin-bottom: .5rem;
}
.competition-form .form-group input,
.competition-form .form-group select,
.competition-form .form-group textarea {
    width: 100%; /* Täyttää koko saatavilla olevan tilan */
    padding: .375rem .75rem; /* Pieni padding sisään */
}
.competition-form .alert-danger {
    margin-top: .5rem;
}

.massive-font {
    color: white;
    font-size: 60px;
    z-index: 100;
}
@media (max-width: 767.98px) {
    .massive-font {
        font-size: 40px;
    }
}

.massive-font-red {
    color: #51dfd4;
    font-size: 40px;
    z-index: 110;
}
@media (max-width: 767.98px) {
    .massive-font-red {
        font-size: 40px;
    }
}

.massive-font-indi {
    color: #51dfd4;
    font-size: 70px;
    margin-top: 0;
}

#animated-text {
    transition: all 0.5s ease;
}

.l-image {
    position: relative;
    height: 600px;
    width: 680px;
    z-index: 10;
    object-fit: cover;
}

.background-container {
    background-image: url("/static/profiles/images/sidenav_image.6a6e44815c49.png");
    background-size: cover; /* tai 'contain' riippuen haluamastasi ulkoasusta */
    background-position: center;
}

.login {
    border-radius: 10px; /* Pyöristetyt kulmat */
    padding: 20px;
}

.dropdown-menu {
    border: 3px solid #51dfd4;
    background: #333;
    color: #51dfd4;
}

.dropdown-item:hover {
    background-color: #51dfd4;
}

.unlock-item {
    font-size: 10rem;
}

.wt {
    color: white;
}

.terms-area {
    margin: 0 20% 0 20%;
}

.play-icon {
    position: absolute;
    font-size: 100px; /* Säädä koon tarpeen mukaan */
    color: white;
    opacity: 0.5; /* Tehdään ikonista haalea */
    pointer-events: none; /* Estetään ikoniin klikkaaminen */
}

video:hover + .play-icon,
video:focus + .play-icon {
    opacity: 0; /* Piilotetaan ikoni kun videota hoveroidaan tai se on fokuksessa */
}

.video-wrapper {
    position: relative;
    width: max-content;
}

.tablet-frame {
    padding: 5px; /* Kehyksen leveys */
    background: linear-gradient(to bottom, #c0c0c0, #525151); /* Kehyksen väri, voit säätää tummuutta */
    border-radius: 20px; /* Kehyksen pyöristetyt kulmat */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); /* Varjo kehyksen ympärillä */
}

.tablet-border {
    display: block;
    max-height: 50vw;
    border-radius: 20px; /* Videon pyöristetyt kulmat */
}

.final-card {
    border-radius: 20px; /* Pyöristetyt kulmat kortille */
    background: #333;
    padding: 30px;

}

.feature-card {
    border-radius: 20px; /* Pyöristetyt kulmat kortille */
    display: flex; /* Asettaa kortin sisällön vierekkäin */
    align-items: center; /* Keskittää sisällön vertikaalisesti */
    margin-bottom: 20px; /* Lisää väliä korttien välille */
    background: #333;
    height: 100%;
}

.feature-card .card-body {
    display: flex;
    align-items: center; /* Keskittää sisällön vertikaalisesti kortin sisällä */
}

.feature-text {
    flex: 1; /* Antaa tekstin osuudelle joustavuutta kasvaa */
}

.feature-image img {
    width: 200px; /* Määritä kuvan leveys */
    height: 200px; /* Määritä kuvan korkeus */
    border-radius: 20px; /* Pyöristää kuvan muotoon */
    object-fit: cover;
}


.option {
    color: white; /* Valkoinen teksti */
    background: linear-gradient(to bottom, #51dfd4, #333);
    border-radius: 10px;
    border: none;
    padding: 20px;
    width: 300px; /* Aseta leveys tarpeen mukaan */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); /* Varjo kehyksen ympärillä */
}

.option hr {
    border-color: #fff; /* Teeman väriin sopiva vaakaviiva */
    margin-bottom: 20px; /* Tilaa elementtien välille */
}

.option ul {
    list-style: none; /* Poista listamerkit */
    padding: 0;
}

.option li {
    padding: 5px 0; /* Lisää tilaa listaelementtien välille */
}

.price-info {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 5px; /* Pieni väli numeron ja valuuttasymbolin välille */
}

.button-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.refe-img img {
    width: 12vw; /* Määritä kuvan leveys */
    height: 8vw; /* Määritä kuvan korkeus */
    border-radius: 20px; /* Pyöristää kuvan muotoon */
    object-fit: contain;
}

.refe {
    display: flex;
    justify-content: center;
}


.site-footer {
  padding: 45px 0 20px;
  font-size: 15px;
  line-height: 24px;
  color: #333;
}

.site-footer hr {
  border-top-color: #bbb;
  opacity: 0.5
}

.site-footer h6 {
  color: #000;
  font-size: 16px;
  text-transform: uppercase;
  margin-top: 5px;
  letter-spacing: 2px;
}

.site-footer a {
  color: #000;
}

.site-footer a:hover {
  color: #51dfd4;
  text-decoration:none;
}

.footer-links {
  list-style: none;
  padding-left: 0;
}

.footer-links li {
  display: block;
}

.footer-links a {
  color: #333;
}

.footer-links a:active, .footer-links a:focus, .footer-links a:hover {
  color: #51dfd4;
  text-decoration: none;
}

.container-fluid2 {
    display: flex; /* Ota flexbox käyttöön */
    justify-content: center; /* Keskittää sisällön vaakasuunnassa */
    min-height: 100vh; /* Asettaa minimikorkeudeksi 100% viewportin korkeudesta */
}

.col-8.col-lg-4.mt-5.login {
    margin-top: 0 !important; /* Poistaa mahdollisen ylämarginaalin */
}

.how-it-works {
    margin: 40px 0;
}

.how-it-works h2 {
    margin-bottom: 30px;
}

.step h3 {
    color: #51dfd4; /* Vaihda tämä vastaamaan brändisi värejä */
}

.step p {
    font-size: 14px;
}

.feature-image2 img {
    width: 125px; /* Määritä kuvan leveys */
    height: 125px; /* Määritä kuvan korkeus */
    border-radius: 20px; /* Pyöristää kuvan muotoon */
    object-fit: cover;
}