#notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    height: 40px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 1001;
  }

    .hidden {
        opacity: 0;
        visibility: hidden;
    }

    .fade-out {
        transition: opacity 0.5s ease; /* Transição de opacidade ao longo de 1 segundo */
        opacity: 0; /* Definindo opacidade inicial para 0 */
    }

    .draft_status {
        position: fixed;
        top: 20px;
        right: 70px;
        width: 150px;
        height: 20px;
        color: rgb(180, 180, 180);
        font-size: 14px;
        display: flex;
        justify-content: end;
        align-items: center;
        cursor: default;
        user-select: none;
    }

    .draft_div {
        position: fixed;
        left: 50%;
        top: 10px;
        transform: translateX(-50%);
        width: 50%;
        max-width: 550px;
        color: #b4b4b4;
        font-size: 14px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        cursor: default;
        user-select: none;
        padding: 15px 15px;
        background-color: #000000;
        border-radius: 12px;
        z-index: 999; 
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* Ajusta a sombra */
    }

    .draft_text_content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 5px;
    }

    .draft_title{
        font-size: 18px;
        color: #fff;
        font-weight: 1000;
    }

    .draft_buttons {
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: center;
    }

    .no_data_table {
        font-size: 15px;
        margin: auto;
    }

    table {
        width: 100%; 
        border-collapse: collapse;
    }
    
    th, td {
        padding: 3px 5px;
        text-align: center;
        border: 1px solid #f1f2f4;
        font-size: 14px;
    }


/* Estilizando o input */
.diff_name_input {
    width: 200px; /* Defina a largura desejada */
    padding: 10px; /* Espaçamento interno */
    border: 1px solid #ccc; /* Adiciona uma borda */
    border-radius: 5px; /* Borda arredondada */
    font-size: 16px; /* Tamanho da fonte */
    outline: none; /* Remove a borda ao clicar */
  }

.diff_link_div {
    height: 40px;
    background-color: #fff;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #848484;
}

.diff_link_output {
    padding: 0 0 0 15px;
}
  
  /* Estilizando o placeholder */
  .diff_name_input::placeholder {
    color: #999; /* Cor do texto do placeholder */
  }

/* DIFFCHECKER */

.diff-table {
    font-family: monospace;
    font-size: 13px;
    border-collapse: collapse;
    color: #000000;
  }
  .side-content-header {
    width: 50%;
  }
  .diff-row {
  }
  .diff-line-number {
    color: #aaaaaa;
    font-size: 11px;
    text-align: center;
    vertical-align: middle;
}
  .diff-line-number:before {
    content: attr(data-content);
  }
  .diff-line {
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: break-word;
    line-height: 1rem;
    padding-right: 20px;
    text-align: left;
  }
  .diff-line-inserted {
    background: #c8f0da;
    color: #000000;
  }
  .diff-line-removed {
    background: #ffcbbd;
  }
  .diff-line-empty {
    background: #EAEEF0;
  }
  .diff-line-modified.diff-line-with-inserts {
    background: #c8f0da;
  }
  .diff-line-modified.diff-line-with-removes {
    background: #ffcbbd;
  }
  .diff-chunk-inserted {
    background: #8ee0b6;
  }
  .diff-chunk-removed {
    background: #ff957e;
  }
  

/* ******************* */


    .discard_button{
        height: 40px;
        width: 90px;
        background-color: #585858;
        color:#ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 3px;
        border-radius: 12px;
        cursor: pointer;
    }

    .discard_button:hover {
        background-color: #454545;
    }

    .recover_button {
        height: 40px;
        width: 90px;
        background-color: #ffffff;
        color:#000;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 3px;
        border-radius: 12px;
        cursor: pointer;
    }

    .recover_button:hover {
        background-color: #dbdbdb;
    }

        /* Estilos para o fundo embaçado */
        #draft_overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* Ajuste o último valor para tornar o fundo mais escuro e embaçado */
            z-index: 10;
            backdrop-filter: blur(2px); /* Adiciona o efeito de embaçamento ao fundo */
        }
  
  .notification-content p {
    color: #2a2a2a;
    opacity: 100;
    user-select: none;
  }
  
  .bold {
    font-weight: bold;
  }
  
  /* DESKTOP */
  
  * {
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: 'Exo', sans-serif;
    background-color: #131313;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  /* Remover estilizações de links */
  a {
    text-decoration: none;
    color: inherit; /* Para herdar a cor do texto pai */
  }
  
  /* Adicionar sublinhado apenas ao passar o mouse (hover) */
  a:hover {
    text-decoration: underline;
  }
  
  /* TOP - START */
  .top {
    width: 100%;
    height: 60px;
    min-height: 60px;
    color: white;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #252525; /* Adiciona uma borda cinza fina na parte inferior */
  }
  
  .return {
    width: 70px;
    height: 100%;
    margin: auto;
    display: flex; /* Adiciona display flex para .return */
    align-items: center; /* Centraliza verticalmente os itens dentro de .return */
    justify-content: center; /* Centraliza horizontalmente os itens dentro de .return */
  }
  
  .return_arrow {
    width: 30%;
    height: 30%;
    background-size: cover;
    margin: auto;
    user-select: none;
    cursor: pointer;
  }
  
  .page_title {
    width: 84%;
    height: 100%;
    flex-grow: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    user-select: none;
  }
  
  .settings {
    width: 70px;
    height: 100%;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .options_dots {
    width: 50%;
    height: 50%;
    user-select: none;
    cursor: pointer;
  }
  
  /* Estilo para o mini menu */
  .mini-menu {
    user-select: none;
    display: none;
    position: absolute;
    background-color: #333333; 
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-shadow: 0 5px 11px rgba(0, 0, 0, 0.1); 
    width: 250px;
    z-index: 1;
    top: 66px; 
    right: 15px; 
    color: #ffffff;
  }
  
  .mini-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
  .mini-menu ul li {
    padding: 12px 15px;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.3s ease;
  }
  
  .mini-menu ul li:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Ajuste para destacar a cor do hover */
  }
  
  /* Spotify */
  
  .spotify_login {
    margin-left: 20px; /* Ajuste conforme necessário */
    height: 20%;
    display: flex;
    align-items: center;
  
  }
  
  .spotify_button {
    background-color: #ffffff;
    color: black;
    padding: 9px 14px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
}

  .spotify_button:hover {
    background-color: #d2d2d2;
  }
  
  .spotify_logo {
    position: relative;
    height: 20px;
    width: 20px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg width='20px' height='20px' viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3Espotify [%23000000]%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cpath d='M99.915,7327.865 C96.692,7325.951 91.375,7325.775 88.297,7326.709 C87.803,7326.858 87.281,7326.58 87.131,7326.085 C86.981,7325.591 87.26,7325.069 87.754,7324.919 C91.287,7323.846 97.159,7324.053 100.87,7326.256 C101.314,7326.52 101.46,7327.094 101.196,7327.538 C100.934,7327.982 100.358,7328.129 99.915,7327.865 L99.915,7327.865 Z M99.81,7330.7 C99.584,7331.067 99.104,7331.182 98.737,7330.957 C96.05,7329.305 91.952,7328.827 88.773,7329.792 C88.36,7329.916 87.925,7329.684 87.8,7329.272 C87.676,7328.86 87.908,7328.425 88.32,7328.3 C91.951,7327.198 96.466,7327.732 99.553,7329.629 C99.92,7329.854 100.035,7330.334 99.81,7330.7 L99.81,7330.7 Z M98.586,7333.423 C98.406,7333.717 98.023,7333.81 97.729,7333.63 C95.381,7332.195 92.425,7331.871 88.944,7332.666 C88.609,7332.743 88.274,7332.533 88.198,7332.197 C88.121,7331.862 88.33,7331.528 88.667,7331.451 C92.476,7330.58 95.743,7330.955 98.379,7332.566 C98.673,7332.746 98.766,7333.129 98.586,7333.423 L98.586,7333.423 Z M94,7319 C88.477,7319 84,7323.477 84,7329 C84,7334.523 88.477,7339 94,7339 C99.523,7339 104,7334.523 104,7329 C104,7323.478 99.523,7319.001 94,7319.001 L94,7319 Z' id='spotify-[#000000]'>%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
  
  /**/
  
  /* foto de usuario */
  
  .user-profile {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  
  .user-menu {
    position: absolute;
    top: 53px;
    right: 0;
    font-size: 12px;
    font-weight: bold;
    background-color: #434343;
    border-radius: 12px;
    display: none;
    text-align: center;
    width: 140px;
    z-index: 1;
}
  
  .user-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
  .user-menu ul li {
    padding: 10px;
    cursor: pointer;
  }
  
  .user-menu ul li:hover {
    background-color: #393939;
  }
  
  .user-photo {
    width: 50px; 
    height: 50px; 
    border-radius: 50%;
    margin-right: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
  
  .user-profile:hover .user-menu {
    display: block;
  }
  
  .sp_icon_prof_picture {
    position: absolute;
    bottom: 5px; /* Ajuste conforme necessário */
    right: 5px; /* Ajuste conforme necessário */
    width: 30px; /* Ajuste conforme necessário */
    height: 30px; /* Ajuste conforme necessário */
    z-index: 2; /* Para garantir que o ícone do Spotify esteja acima da imagem de perfil */
    margin: 5px; /* Ajuste conforme necessário para separar a imagem do usuário e o logotipo do Spotify */
  }
  
  /**/
  
  
  
  /* TOP - END */
  
  /* MAIN - START */
  
  .main {
    display: flex;
    width: 100%;
    height: calc(100% - 68px);
  }
  
  .main_content {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0px 5px 0 5px;
    box-sizing: border-box;
  }

  .draft_popup {
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.5); /* Cor de fundo com transparência */
    position: fixed; /* Posição fixa */
    top: 50%; /* Centraliza verticalmente */
    left: 50%; /* Centraliza horizontalmente */
    transform: translate(-50%, -50%); /* Move o quadrado para o centro */
    z-index: 99999; /* Coloca o quadrado por cima de tudo */
    border: 2px solid #fff; /* Borda branca de 2px */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Sombra */
    padding: 20px; /* Espaçamento interno */
    box-sizing: border-box;
}
  
  /* Estilos para o pop-up */
  .popup {
    width: 550px;
    border-radius: 20px;
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    padding: 10px;
    transform: translate(-50%, -50%);
    background-color: #282828;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    color: white;
    user-select: none;
  }

  .alt_popup {
    width: 80%;
    max-width: 1000px;
    border-radius: 20px;
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    padding: 10px;
    transform: translate(-50%, -50%);
    background-color: #282828;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    color: white;
    user-select: none;
  }

  .diff_popup {
    width: 80%;
    max-width: 1000px;
    border-radius: 20px;
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    padding: 10px;
    transform: translate(-50%, -50%);
    background-color: #f1f2f4;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    color: rgb(0, 0, 0);
    user-select: none;
  }

  .popup_bottom {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 10px;
    padding: 5px 10px;
    box-sizing: border-box;
  }

  
  .popup_content {
    max-height: 400px; /* Altura máxima do conteúdo com scroll */
    overflow-y: auto; /* Adiciona a barra lateral de rolagem quando necessário */
    min-height: 200px;
    position: relative;
  }
  
  /* Estilização da barra de rolagem */
  .popup_content::-webkit-scrollbar {
    width: 2px;
    border-radius: 5px; /* Bordas arredondadas */
  }
  
  .popup_content::-webkit-scrollbar-thumb {
    background-color: #686868;
    border-radius: 5px; /* Bordas arredondadas */
  }
  
  /* Para navegadores Firefox */
  .popup_content {
    scrollbar-width: thin;
    scrollbar-color: #383838 #282828; /* Cor da barra e do fundo */
  }
  
  .popup_content::-webkit-scrollbar-track {
    background: #131313;
    border-radius: 5px; /* Bordas arredondadas */
  }
  
  /* Estilizando o formulário dentro do popup */
  .popup_content form {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
  }
  
  .popup_content select {
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #444;
    color: #fff;
    outline: none;
    box-sizing: border-box;
    width: 60px;
    text-align: center;
  }

  .popup_content input {
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #444;
    color: #d1d1d1;
    outline: none;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    font-size: 18px;
  }

  .text_input_full {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
  
  .popup_details {
    max-width: 100%;
    height: 130px;
    vertical-align: top; 
    overflow-wrap: break-word; 
  }
  
  .popup_content select {
    /* Estilo adicional para o menu seletor */
    appearance: none;
  }
  
  .popup_content input[type="text"]::placeholder {
    color: #ccc; /* Cor do texto do espaço reservado */
  }
  
  #aboutContent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  
  .section {
    margin-bottom: 20px;
  }
  
  h3 {
    margin-bottom: 10px;
    text-align: left; /* Alinha o texto à esquerda */
    width: 100%;
  }
  
  hr {
    border: 1px solid #646464;
    width: 100%;
    margin: 20px 0;
  }
  
  .server_info {
    text-align: left;
    width: 100%;
  }
  
  .bold {
    font-weight: bold;
  }

  .select_list {
        width: 50px; /* Largura */
  }

  .popup_content_intern {
    width: 100%;
    padding: 3px 5px;
    box-sizing: border-box;
  }

  .popup_content_intern h3 {
    padding: 3px 5px;
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: bold;
  }

  .shortcut_option {
    font-size: 16px;
  }

    .shortcut_icon {
        width: 50px; /* Largura */
        height: 50px; /* Altura */
        border-radius: 10px; /* Borda arredondada */
        display: flex;
        justify-content: center; /* Centraliza horizontalmente */
        align-items: center; /* Centraliza verticalmente */
        font-size: 22px; /* Tamanho da fonte */
        margin: 0 0 0 5px;
    }

    .shortcut_icon[color="blue"] {
        background-color: #2196F3; /* Azul */
    }
    
    .shortcut_icon[color="green"] {
        background-color: #2faaa2; /* Verde */
    }
    
    .shortcut_icon[color="purple"] {
        background-color: #4f66ff; /* Vermelho */
    }

    .shortcut_icon[color="orange"] {
        background-color: #f6924c; /* Vermelho */
    }

    
    .shortcut_icon_larger {
        height: 40px; /* Altura */
        max-height: 40px; /* Altura */
        padding: 0 15px;
        border-radius: 10px; /* Borda arredondada */
        display: flex;
        justify-content: center; /* Centraliza horizontalmente */
        align-items: center; /* Centraliza verticalmente */
        font-size: 18px; /* Tamanho da fonte */
        margin: 0 0 0 5px;
        pointer-events: none;
    }

    .shortcut_icon_larger[color="blue"] {
        background-color: #2196F3; /* Azul */
    }
    
    .shortcut_icon_larger[color="green"] {
        background-color: #2faaa2; /* Verde */
    }
    
    .shortcut_icon_larger[color="purple"] {
        background-color: #4f66ff; /* Vermelho */
    }

    .shortcut_icon_larger[color="orange"] {
        background-color: #f6924c; /* Vermelho */
    }

    #closeButton {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
  
    #closeButton {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
  
    #closeButton:hover {
        background-color: #d2d2d2;
    }
    
    #closeButton:before,
    #closeButton:after {
        content: '';
        position: absolute;
        width: 3px;
        height: 20px;
        background-color: #282828;
        border-radius: 5px; /* Borda arredondada para os traços */
    }
    
    #closeButton:before {
        transform: rotate(45deg);
    }
    
    #closeButton:after {
        transform: rotate(-45deg);
    }
  
    /* Estilos para o fundo embaçado */
    #overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* Ajuste o último valor para tornar o fundo mais escuro e embaçado */
        z-index: 10;
        backdrop-filter: blur(2px); /* Adiciona o efeito de embaçamento ao fundo */
    }
  
  
  
            /* Swith */
  
        /* The switch - the box around the slider */
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
        
        /* Hide default HTML checkbox */
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        /* The slider */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }
        
        input:checked + .slider {
            background-color: #2196F3;
        }
        
        input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
        }
        
        input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }
        
        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }
        
        .slider.round:before {
            border-radius: 50%;
        }
  
        /* Swith end */
        
        .popup_title {
            width: 80%;
            padding: 10px;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
        }

        .popup_title_full {
            width: 100%;
            padding: 10px;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
        }
        
        .popup_option_title {
            font-weight: bold;
        }
        
        .popup_option_description {
            font-size: 12px;
            color: #ababab;
        }
  
    .popup_description {
        height: 10%;
        width: 100%;
        padding: 10px;
        display: flex;
        text-align: start;
        align-items: center;
        justify-content: flex-start;
        box-sizing: border-box;
    }

    .popup_submenu {
        height: 10%;
        width: 100%;
        padding: 10px;
        display: flex;
        text-align: start;
        align-items: center;
        justify-content: flex-start;
        box-sizing: border-box;
    }
  
    .popup_content {
        height: 90%;
        width: 100%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        text-align: start;
        align-items: center;
        justify-content: flex-start;
        box-sizing: border-box;
    }
  
    .settings_tab {
        width: 100%;
    }
  
    .popup_option {
        height: 20%;
        width: 100%;
        font-size: 18px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin: 5px 0 5px 0;
        position: relative;
    }

    .unavailable_overlay {
        position: absolute; /* Definindo a posição absoluta */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #28282899; /* Opacidade */
        z-index: 1;
    }

    .popup_option_column {
        height: 20%;
        width: 100%;
        font-size: 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin: 5px 0 5px 0;
    }
  
    .number_selector {
        display: flex;
        align-items: center;
    }
    
    .number_selector svg {
        width: 20px; /* Largura fixa para o SVG */
        height: 20px; /* Altura fixa para o SVG */
    }
    
    .number_selector span {
        width: 20px; /* Largura fixa para o número */
        text-align: center;
    }
  
    .loading, .error {
        text-align: center;
        margin-top: 50px;
    }
    
    .error {
        color: red;
    }

    .info_icon {
        margin-left: 5px;
        position: relative;
        cursor: pointer;
        font-weight: 300;
    }


    .popup_option_title .info_icon:hover::after {
        content: "do not share, may include sensitive data!";
        position: absolute;
        background-color: #f9f9f9;
        color: #333;
        padding: 5px 8px;
        border-radius: 6px;
        font-size: 12px;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        z-index: 1;
    }

    .right_side_text {
        width: 80px;
        height: 100%;
        font-size: 14px;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .black_button2 {
        width: 60px;
        padding: 10px;
        font-size: 16px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        background-color: #000000;
    } 

    .black_button2:hover {
        background-color: #090909;
    }

    .white_button2 {
        width: 60px;
        padding: 10px;
        font-size: 16px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000000;
        background-color: #ffffff;
        cursor: pointer;
    }

    .white_button2:hover {
        background-color: #dcdcdc;
    }

    .diff_get_link_button {
        background-color: #00c281;
        width: 60px;
        padding: 10px;
        font-size: 16px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .diff_get_link_button:hover {
        background-color: #096;
    }

    /* delete cache popup */

                /* Estilo para o popup de confirmação */
            .confirm_popup {
                width: 250px;
                font-size: 18px;
                font-weight: 500;
                user-select: none;
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: #0f0f0f;
                color:white;
                padding: 20px;
                border-radius: 10px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                z-index: 9999;
            }

            /* Estilos para os botões dentro do popup */
            .button_container {
                margin-top: 35px;
                display: flex;
                justify-content: flex-end;
            }

            .confirm_popup .confirm_button,
            .confirm_popup .cancel_button {
                padding: 10px 20px;
                cursor: pointer;
                border-radius: 5px;
            }

            .confirm_button {
                background-color: #575757;
                color: white;
                margin: 0 0 0 7px
            }

            .confirm_button:hover {
                background-color: #484848;
            }

            .cancel_button {
                background-color: #ffffff;
                color: rgb(0, 0, 0);
            }

            .cancel_button:hover {
                background-color: #d2d2d2;
            }

  
  
    /* Credits */
  
    .colaborator {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 10px; /* Ajuste conforme necessário */
        background-color: #333; /* Cor de fundo cinza escuro */
        border-radius: 8px; /* Border radius */
        padding: 10px;
        box-sizing: border-box;
        transition: background-color 0.3s; /* Transição suave de cor de fundo */
        text-decoration: none; /* Remove o sublinhado padrão */
        color: inherit; /* Mantém a cor do texto padrão */
    }
  
    .colaborator:hover {
        background-color: #444; /* Cor de fundo cinza mais escura no hover */
    }
  
    .colaborator_image {
        width: 50px;
        height: 50px;
        margin-right: 15px;
        border-radius: 50%;
        position: relative;
        pointer-events: none; /* Impede que o elemento receba eventos do ponteiro do mouse */
    }
    
    .colaborator_image img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Garante que a imagem cubra totalmente o contêiner redondo */
        border-radius: 50%; /* Mantém a imagem redonda */
        overflow: hidden; /* Permite que o conteúdo do colaborator_country fique visível fora dos limites da imagem */
    }
    
    .colaborator_country {
        position: absolute;
        bottom: -2px;
        right: -5px;
        font-size: 20px; /* Ajuste o tamanho do emoji conforme necessário */
        z-index: 9999;
    }
  
    .colaborator_info {
        flex-grow: 1; /* Ocupa todo o espaço disponível restante */
    }
  
    .colaborator_name {
        font-size: 18px; /* Ajuste o tamanho da fonte conforme necessário */
        font-weight: 525;
        color: #fff; /* Cor do texto branca */
        align-items:end;
    }
  
    .colaborator_role {
        font-size: 11px; /* Ajuste o tamanho da fonte conforme necessário */
        color: #000; /* Cor do texto preta */
        background-color: #fff; /* Cor de fundo branca */
        padding: 1px 3px; /* Espaçamento interno */
        border-radius: 4px; /* Border radius */
        display: inline-block; /* Para que o elemento não ocupe toda a largura */
        margin: 5px 1px; /* Espaçamento entre o nome e o papel (role) */
    }
  
    .colaborator_languages {
        font-size: 11px; /* Ajuste o tamanho da fonte conforme necessário */
        color: #fff; /* Cor do texto preto */
        background-color: #111; /* Cor de fundo cinza mais escuro */
        padding: 1px 3px; /* Espaçamento interno */
        border-radius: 4px; /* Border radius */
        display: inline-block; /* Para que o elemento não ocupe toda a largura */
        margin: 5px 1px; /* Espaçamento entre o papel (role) e as linguagens */
        box-sizing: border-box;
    }
  
  /* MAIN LEFT */
  
    .main_left {
        flex-grow: 1;
        box-sizing: border-box;
        border-right: 1px solid #252525; /* Adiciona uma borda cinza fina na lateral esquerda */
    }
  
    .lyrics_box {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background-color: #181818;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 21px;
        cursor: text;
    }
  
    .editor-container {
        width: 100%;
        height: 100%;
        display: inline-flex;
        gap: 10px;
        font-family: monospace;
        line-height: 21px;
        overflow: auto;
    }
  
    .character_counter {
        height: 100%;
        text-align: center;
        width: 3%;
        font-size: 12px;
        color: #8a8a8a;
        position: relative;
        pointer-events: none;
        line-height: 21px;
        overflow-y: scroll;
        height: 100%;
        user-select: none;
        /* Oculta a barra de rolagem, mas permite rolar */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    
    /* Estilização para navegadores que não suportam scrollbar-width */
    .character_counter::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
  
    .editor {
        line-height: 21px;
        padding: 0 5px 0 0;
        flex: 1;
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        background-color: transparent;
        color: white;
        font-size: 18px;
        font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        resize: none;
        overflow: auto; /* ou scroll */
        white-space: pre;
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
        position: relative;
    }

    .overlay-container {
        position: relative;
    }
    
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1; /* Garante que o overlay esteja acima do textarea */
        overflow: hidden; /* Esconde o overflow do overlay */
        white-space: pre-wrap; /* Permite quebras de linha no overlay */
    }
    
    .highlighted-text {
        background-color: rgba(255, 0, 0, 0.3);
    }
  
    .languagetool-suggestion {
        background-color: #ffff00;
        color: #000000;
        font-size: 12px;
        font-weight: bold;
        padding: 2px 4px;
        margin: 0;
      }

    .lt_redirect  {
        position: relative;
        text-align: center;
        color: rgb(195, 195, 195);
        font-size: 12px;
        background-color: #131313;
        padding: 6px 2px 0;
        right: 20px;
        bottom: 0;
    }
    
    #editor .selected-line {
        background-color: yellow; /* Altere para a cor desejada */
        position: absolute;
        width: 100%;
        height: 1.2em; /* Ajuste conforme necessário para o destaque desejado */
        pointer-events: none; /* Para permitir a interação com o textarea */
    }
  
    .editor::-webkit-scrollbar {
        width: 0; /* Largura da barra de rolagem WebKit (Chrome, Safari) */
    }
  
    .editor::-webkit-scrollbar-thumb {
        background-color: transparent; /* Cor da "thumb" da barra de rolagem WebKit */
    }
  
    .editor::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 20px; /* Largura do espaço recuado */
        height: 100%;
    }
  
    .line_issues {
        height: 100%;
        text-align: center;
        width: 1%;
        font-size: 12px;
        position: relative;
        pointer-events: none;
        line-height: 21px;
        overflow-y: scroll;
        height: 100%;
        user-select: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
        display: flex;
        flex-direction: column; /* Adicionado para empilhar as linhas verticalmente */
        align-items: center; /* Adicionado para centralizar as linhas horizontalmente */
    }
  
    /* Estilização para navegadores que não suportam scrollbar-width */
    .line_issues::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
  
    .status-1 {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
        align-items: right;
    }
    
    .status-gray {
        background-color: #393939;
    }
    
    .status-blue {
        background-color: #0077c2;
        box-shadow: 0 0 2px #0077c2;
    }
    
    .status-red {
        background-color: red;
        box-shadow: 0 0 2px red;
    }
    
    .status-yellow {
        background-color: #edb51a;
        box-shadow: 0 0 2px #edb51a;
    }
    
    .status-green {
        background-color: #4CAF50;
        box-shadow: 0 0 2px #4CAF50;
    }
  
  /* MAIN RIGHT */
  
    .main_right {
        padding: 0 0px 0 5px;
        display: flex;
        flex-direction: column;
        width: 25%;
        min-width: 260px;
        max-width: 350px;
        height: 100%;
        box-sizing: border-box;
    }
  
    .language_selector,
    .improvements_box,
    .sp_player_div {
        width: 100%;
    }
  
    .language_selector {
        height: 50px;
        background-color: #616161;
        border-radius: 18px;
        position: relative;
        cursor: pointer;
        user-select: none;
        margin: 5px 0 5px;
    }
  
    .lang_selector_div {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    
    .language_selector .selected_language {
        width: 85%;
        height: 100%;
        padding: 18px;
        color: white;
        font-size: 18px;
        font-weight: bold;
        font-family: Arial, sans-serif;
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }
  
    .language_selector:hover {
        background-color: #565656; /* Cor alterada no hover */
    }
  
    .lang_expand_arrow {
        width: 100%;
        height: 100%;
        transform: rotate(180deg);
    }

    .language_selector .language_list_div {
        padding: 8px 5px;
        margin: 5px 0 0 0;
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #383838;
        border-radius: 15px;
        box-sizing: border-box;
        z-index: 1;
    }
    
    .language_selector .language_list {
        list-style: none;
        height: 100%;
        width: 100%;
        max-height: 350px; 
        overflow-y: auto; /* Adiciona uma barra de rolagem vertical */
    }

    /* Estilo da barra de rolagem */
    .language_selector .language_list::-webkit-scrollbar {
        width: 6px;
    }

    .language_selector .language_list::-webkit-scrollbar-thumb {
        background-color: #686868;
        border-radius: 10px;
    }
    
    .language_selector .language_list li {
        border-radius: 10px;
        padding: 10px;
        color: #fff;
    }
  
    .language_selector .language_list p {
        padding: 12px 10px 12px 10px;
        color: #898989;
        cursor: auto;
        user-select: none;
        font-style: italic;
    }
    
    .language_selector .language_list li:hover {
        background-color: #2b2b2b;
    }
  
    /* Tag Beta */
    .language_selector .language_list .beta_tag {
        background-color: #ff5353;
        color: white;
        padding: 3px 6px;
        border-radius: 10px;
        margin-left: 12px;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
    }
    
    .language_selector .language_list .beta_tag:hover {
        background-color: #ff3333;
    }
  
    /* Tag New */
    .language_selector .language_list .new_tag {
        background-color: #3a8cff;
        color: white;
        padding: 3px 6px;
        border-radius: 10px;
        margin-left: 12px;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
    }
    
    .language_selector .language_list .new_tag:hover {
        background-color: #1b7aff;
    }
  
    .improvements_box {
        /* ALTURA PADRÃO E MÁXIMA DEFINIDA VIA JS COM BASE NA PRESENÇA DO PLAYER! */
        margin: 0 0 15px;
        background-color: #131313;
        box-sizing: border-box;
        user-select: none;
        box-sizing: border-box;
        padding: 0 5px;
        flex-grow: 1;
    }
  
    .improvements_box_top {
        display: flex;
        flex-direction: row;
        width: 100%;
        padding: 3px 3px 0 3px;
        box-sizing: border-box;
    }
  
    .improvements_box_text {
        display: flex;
        color: white;
        font-size: 18px;
        font-weight: bold;
        padding: 10px 8px;
        box-sizing: border-box;
        align-items: center;
        width: 60%;
        margin-top: 5px;
        overflow: hidden;
        white-space: nowrap;
        user-select: none;
    }
    
    .improvements_box_text p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        align-items: center;
    }
  
    .improvements_menu {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        margin: 8px 0 10px 0;
    }
  
    .improvements_option {
      align-items: center; /* Alinha os itens verticalmente ao centro */
      display: flex;
    }
  
    .improvement_buttons {
      align-items: center; /* Alinha os itens verticalmente ao centro */
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 10px;
    }

    .improv_buttons_left {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 30px;
    }

    .improv_buttons_right {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 30px;
    }
  
    .gray_buttons_div {
        display: flex;
        align-items: center; /* Alinha os itens verticalmente ao centro */
        justify-content: space-between;
        width: 30px;
        height: 100%;
        margin-right: 5px;
    }
  
    .refresh_div {
        display: flex;
        align-items: center; /* Alinha os itens verticalmente ao centro */
        justify-content: flex-end;
        width: 30px;
        height: 100%;
    }

    .return_black_arrow {
        position: relative;
        width: 30px;
        height: 30px;
        background-image: url("data:image/svg+xml,%3Csvg width='30px' height='30px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M5 12H19M5 12L11 6M5 12L11 18' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        cursor: pointer;
    }

    .return_white_arrow {
        position: relative;
        width: 30px;
        height: 30px;
        background-image: url("data:image/svg+xml,%3Csvg width='178px' height='178px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M5 12H19M5 12L11 6M5 12L11 18' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        cursor: pointer;
    }
  
    /* Refresh icon */
        .white_button {
            width: 30px;
            height: 30px;
            background-color: #ffffff;
            box-shadow: rgba(0, 0, 0, 0.494) 1px 3px 12px;
            display: flex;
            cursor: pointer;
            position: absolute;
            border-radius: 50%;
            border-width: 0.1px;
            border-style: solid;
            border-color: rgba(198, 197, 197, 0.475);
            border-image: initial;
            display: none;
        }
        
        .white_button:hover {
            background-color: #d2d2d2;
        }

        .undo_symbol {
            position: relative;
            left: 17%;
            width: 18px;
            height: 18px;
            background-image: url("data:image/svg+xml,%3Csvg width='64px' height='64px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.53033 3.46967C7.82322 3.76256 7.82322 4.23744 7.53033 4.53033L5.81066 6.25H15C18.1756 6.25 20.75 8.82436 20.75 12C20.75 15.1756 18.1756 17.75 15 17.75H8.00001C7.58579 17.75 7.25001 17.4142 7.25001 17C7.25001 16.5858 7.58579 16.25 8.00001 16.25H15C17.3472 16.25 19.25 14.3472 19.25 12C19.25 9.65279 17.3472 7.75 15 7.75H5.81066L7.53033 9.46967C7.82322 9.76256 7.82322 10.2374 7.53033 10.5303C7.23744 10.8232 6.76256 10.8232 6.46967 10.5303L3.46967 7.53033C3.17678 7.23744 3.17678 6.76256 3.46967 6.46967L6.46967 3.46967C6.76256 3.17678 7.23744 3.17678 7.53033 3.46967Z' fill='%23ffffff'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
        }

        /* Adicionando efeito de escala ao passar o mouse */
        .mxm_white_logo {
            position: relative;
            left: 17%;
            top: 4%;
            width: 18px;
            height: 18px;
            background-image: url("./images/mxm_white.png");
            background-size: contain;
            background-position: center center;
            cursor: pointer;
            transition: transform 0.3s ease;
            transform-origin: center center;
        }

        .mxm_white_logo:hover {
            transform: scale(1.1); /* Aumentando a escala em 8% */
            transform-origin: center center; /* Mantendo o ponto de transformação no centro */
        }

        .table_svg_icon {
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
        }

        .draft_import_symbol {
            position: relative;
            width: 30px;
            height: 30px;
            background-image: url("data:image/svg+xml,%3Csvg width='143px' height='143px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E %3Cpath d='M12.5 17L12.5 4M12.5 4L18 8.78947M12.5 4L7 8.78947' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E %3Cpath d='M6 21H19' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E %3C/g%3E %3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
        }

        .redo_symbol {
            position: relative;
            left: 17%;
            width: 18px;
            height: 18px;
            background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' transform='matrix(-1, 0, 0, 1, 0, 0)'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.53033 3.46967C7.82322 3.76256 7.82322 4.23744 7.53033 4.53033L5.81066 6.25H15C18.1756 6.25 20.75 8.82436 20.75 12C20.75 15.1756 18.1756 17.75 15 17.75H8.00001C7.58579 17.75 7.25001 17.4142 7.25001 17C7.25001 16.5858 7.58579 16.25 8.00001 16.25H15C17.3472 16.25 19.25 14.3472 19.25 12C19.25 9.65279 17.3472 7.75 15 7.75H5.81066L7.53033 9.46967C7.82322 9.76256 7.82322 10.2374 7.53033 10.5303C7.23744 10.8232 6.76256 10.8232 6.46967 10.5303L3.46967 7.53033C3.17678 7.23744 3.17678 6.76256 3.46967 6.46967L6.46967 3.46967C6.76256 3.17678 7.23744 3.17678 7.53033 3.46967Z' fill='%23ffffff'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
        }

        .save_symbol {
            position: relative;
            left: 25%;
            width: 14px;
            height: 14px;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:sketch='http://www.bohemiancoding.com/sketch/ns' fill='%23ffffff'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E %3Ctitle%3Esave-floppy%3C/title%3E %3Cdesc%3ECreated with Sketch Beta.%3C/desc%3E %3Cdefs%3E %3C/defs%3E %3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' sketch:type='MSPage'%3E %3Cg id='Icon-Set-Filled' sketch:type='MSLayerGroup' transform='translate(-154.000000, -517.000000)' fill='%23ffffff'%3E %3Cpath d='M172,522 C172,521.447 172.448,521 173,521 C173.552,521 174,521.447 174,522 L174,526 C174,526.553 173.552,527 173,527 C172.448,527 172,526.553 172,526 L172,522 L172,522 Z M163,529 L177,529 C177.552,529 178,528.553 178,528 L178,517 L162,517 L162,528 C162,528.553 162.448,529 163,529 L163,529 Z M182,517 L180,517 L180,529 C180,530.104 179.104,531 178,531 L162,531 C160.896,531 160,530.104 160,529 L160,517 L158,517 C155.791,517 154,518.791 154,521 L154,545 C154,547.209 155.791,549 158,549 L182,549 C184.209,549 186,547.209 186,545 L186,521 C186,518.791 184.209,517 182,517 L182,517 Z' id='save-floppy' sketch:type='MSShapeGroup'%3E %3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
            background-size: contain;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
        }
        

        .copy_symbol {
            position: relative;
            left: 25%;
            width: 14px;
            height: 14px;
            background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='64px' viewBox='0 0 974.9 974.9' xml:space='preserve'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E %3Cg%3E %3Cpath d='M974.572,292.3c0-16.6-13.399-30-30-30h-206.3c-16.6,0-30-13.4-30-30V30c0-16.6-13.4-30-30-30h-215.2 c-24.899,0-45,20.1-45,45v156.8c0.4,0.4,0.9,0.8,1.3,1.3l175.101,175.1c14.3,14.3,21.899,33.3,21.8,52.7h0.1v303.2h313.101 c24.899,0,45-20.101,45-45V292.3H974.572z'%3E%3C/path%3E %3Cpath d='M795.072,4.5c-9.399-9.4-25.6-2.8-25.6,10.6v175.1c0,8.3,6.7,15,15,15h175.1c13.4,0,20.101-16.2,10.601-25.6L795.072,4.5z'%3E%3C/path%3E %3Cpath d='M45.272,974.9L45.272,974.9h466.5l0,0c24.9,0,45-20.101,45-45v-195.8v-197c0-16.601-13.4-30-30-30h-108.7h-96.5 c-16.6,0-30-13.4-30-30V431V270.8c0-16.6-13.4-30-30-30h-216.3c-24.9,0-45,20.1-45,36v644.1c0,9,1.4,17,4,24 C11.373,964,27.072,974.9,45.272,974.9z'%3E%3C/path%3E %3Cpath d='M366.673,445.9h51.3h123.8c9,0,14.9-7.3,15-15c0-3.7-1.3-7.5-4.4-10.601L418.072,285.9l-40.7-40.7 c-3.1-3.1-6.8-4.4-10.5-4.4c-7.699,0-15.1,6-15.1,15v175.1l0,0C351.673,439.2,358.473,445.9,366.673,445.9z'%3E%3C/path%3E %3C/g%3E %3C/g%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
        }

        .paste_symbol {
            position: relative;
            left: 25%;
            width: 14px;
            height: 14px;
            background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 0C11.2347 0 10.6293 0.125708 10.1567 0.359214C9.9845 0.44429 9.82065 0.544674 9.68861 0.62717L9.59036 0.688808C9.49144 0.751003 9.4082 0.803334 9.32081 0.853848C9.09464 0.984584 9.00895 0.998492 9.00053 0.999859C8.99983 0.999973 9.00019 0.999859 9.00053 0.999859C7.89596 0.999859 7 1.89543 7 3H6C4.34315 3 3 4.34315 3 6V20C3 21.6569 4.34315 23 6 23H18C19.6569 23 21 21.6569 21 20V6C21 4.34315 19.6569 3 18 3H17C17 1.89543 16.1046 1 15 1C15.0003 1 15.0007 1.00011 15 1C14.9916 0.998633 14.9054 0.984584 14.6792 0.853848C14.5918 0.80333 14.5086 0.751004 14.4096 0.688804L14.3114 0.62717C14.1793 0.544674 14.0155 0.44429 13.8433 0.359214C13.3707 0.125708 12.7653 0 12 0ZM16.7324 5C16.3866 5.5978 15.7403 6 15 6H9C8.25972 6 7.61337 5.5978 7.26756 5H6C5.44772 5 5 5.44772 5 6V20C5 20.5523 5.44772 21 6 21H18C18.5523 21 19 20.5523 19 20V6C19 5.44772 18.5523 5 18 5H16.7324ZM11.0426 2.15229C11.1626 2.09301 11.4425 2 12 2C12.5575 2 12.8374 2.09301 12.9574 2.15229C13.0328 2.18953 13.1236 2.24334 13.2516 2.32333L13.3261 2.37008C13.43 2.43542 13.5553 2.51428 13.6783 2.58539C13.9712 2.75469 14.4433 3 15 3V4H9V3C9.55666 3 10.0288 2.75469 10.3217 2.58539C10.4447 2.51428 10.57 2.43543 10.6739 2.37008L10.7484 2.32333C10.8764 2.24334 10.9672 2.18953 11.0426 2.15229Z' fill='%23ffffff'%3E%3C/path%3E %3C/g%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
        }
        
        .refresh_symbol {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .refresh_symbol {
            width: 16px;
            height: 16px;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg' stroke-width='3' stroke='%23000000' fill='none'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M53.72,36.61A21.91,21.91,0,1,1,50.37,20.1'%3E%3C/path%3E%3Cpolyline points='51.72 7.85 50.85 20.78 37.92 19.9'%3E%3C/polyline%3E%3Cpath d='M53.72,36.61A21.91,21.91,0,1,1,50.37,20.1'%3E%3C/path%3E%3Cpolyline points='51.72 7.85 50.85 20.78 37.92 19.9'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
        }

        .add_to_dictionary_svg {
            width: 24px; /* Ajuste conforme necessário */
            height: 24px; /* Ajuste conforme necessário */
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23ffffff'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E %3Ctitle%3Eic_fluent_dictionary_add_24_filled%3C/title%3E %3Cdesc%3ECreated with Sketch.%3C/desc%3E %3Cg id='%F0%9F%94%8D-System-Icons' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='ic_fluent_dictionary_add_24_filled' fill='%23ffffff' fill-rule='nonzero'%3E %3Cpath d='M17.5,12 C20.5376,12 23,14.4624 23,17.5 C23,20.5376 20.5376,23 17.5,23 C14.4624,23 12,20.5376 12,17.5 C12,14.4624 14.4624,12 17.5,12 Z M17,2 C18.325472,2 19.4100378,3.03153766 19.4946823,4.33562452 L19.5,4.5 L19.5,11.3135 C18.8699,11.11 18.1978,11 17.5,11 C13.9101,11 11,13.9101 11,17.5 C11,18.0815 11.0763889,18.6451528 11.2196181,19.1815255 L11.3135,19.5 L4.5,19.5 C4.5,20.01285 4.88604429,20.4355092 5.38337975,20.4932725 L5.5,20.5 L11.7322,20.5 C11.9715333,20.9591667 12.2640611,21.3861806 12.6016815,21.7728819 L12.8096,22 L5.5,22 C4.1745184,22 3.08996147,20.9684531 3.00531769,19.6643744 L3,19.5 L3,4.5 C3,3.1745184 4.03153766,2.08996147 5.33562452,2.00531769 L5.5,2 L17,2 Z M17.5,13.9993 C17.2545778,13.9993 17.0504,14.1761296 17.0080571,14.4094092 L17,14.4993 L17.0005,17 L14.4961,17 C14.22,17 13.9961,17.2239 13.9961,17.5 C13.9961,17.7455111 14.1730086,17.9496198 14.4062355,17.9919462 L14.4961,18 L17.0006,18 L17.0011,20.5035 C17.0011,20.7797 17.225,21.0035 17.5011,21.0035 C17.7466111,21.0035 17.9507198,20.8266704 17.9930462,20.5933908 L18.0011,20.5035 L18.0006,18 L20.503,18 C20.7792,18 21.003,17.7762 21.003,17.5 C21.003,17.2545778 20.8261704,17.0504 20.5928908,17.0080571 L20.503,17 L18.0005,17 L18,14.4993 C18,14.2231 17.7761,13.9993 17.5,13.9993 Z M15,5 L7,5 C6.44772,5 6,5.44772 6,6 L6,7 C6,7.55228 6.44772,8 7,8 L15,8 C15.5523,8 16,7.55228 16,7 L16,6 C16,5.44772 15.5523,5 15,5 Z' id='%F0%9F%8E%A8-Color'%3E %3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
            background-repeat: no-repeat; /* Evita repetição */
            background-size: contain; /* Ajusta o tamanho do ícone */
            display: inline-block; /* Garante que o ícone se comporte como um elemento de linha */
            vertical-align: middle; /* Alinha o ícone verticalmente */
            padding: 0 5px;
        }
        
        
        @keyframes loading_spinner {
            0% {
                transform: translate(-50%,-50%) rotate(0deg);
            }
        
            100% {
                transform: translate(-50%,-50%) rotate(360deg);
            }
        }

    /* LOADING 2 */

                .lds-ring {
                    display: inline-block;
                    position: relative;
                    width: 100%;
                    height: 100%;
                }
                .lds-ring div {
                    box-sizing: border-box;
                    display: block;
                    position: absolute;
                    left: 27%;
                    top: 10%;
                    width: 14px;
                    height: 14px;
                    border: 2px solid #fff;
                    border-radius: 50%;
                    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
                    border-color: #fff transparent transparent transparent;
                }
                .lds-ring div:nth-child(1) {
                    animation-delay: -0.45s;
                }
                .lds-ring div:nth-child(2) {
                    animation-delay: -0.3s;
                }
                .lds-ring div:nth-child(3) {
                    animation-delay: -0.15s;
                }
                @keyframes lds-ring {
                    0% {
                    transform: rotate(0deg);
                    }
                    100% {
                    transform: rotate(360deg);
                    }
                }

    /* ********************************** */
  
        .loading_container { /* credits */
            position: absolute;
            top: -30px;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .loading_spinner div { 
            position: absolute;
            width: 14px;
            height: 14px;
            border: 3px solid #ffffff;
            border-top-color: transparent;
            border-radius: 50%;
        }
        
        .loading_spinner div {
            animation: loading_spinner 0.5291005291005291s linear infinite;
            top: 15px;
            left: 15px;
        }
        
        .loading_spinner_loop {
            width: 30px;
            height: 30px;
            display: inline-block;
            overflow: hidden;
        }
        
        .loading_spinner {
            width: 100%;
            height: 100%;
            position: relative;
            transform: translateZ(0) scale(1);
            backface-visibility: hidden;
            transform-origin: 0 0;
        }
        
        .loading_spinner div {
            box-sizing: content-box;
        }
        
        @keyframes loading_spinner_2 {
            0% {
                transform: translate(-50%,-50%) rotate(0deg);
            }
        
            100% {
                transform: translate(-50%,-50%) rotate(360deg);
            }
        }

    /* undo and redo buttons */

    .undo, .redo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 30px;
        height: 100%;
        margin-right: 5px;
    }
        
    /* Botão reset */
  
    .gray_button {
        width: 30px;
        height: 30px;
        background-color: #6c6c6c;
        box-shadow: rgba(0, 0, 0, 0.494) 1px 3px 12px;
        display: flex;
        cursor: pointer;
        position: absolute;
        border-radius: 50%;
        border-width: 0.1px;
        border-style: solid;
        border-color: #6c6c6c;
        border-image: initial;
        display: none;
    }
    
    .gray_button:hover {
        background-color: #898989;
    }
    
    .reset_symbol {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 16px;
        height: 16px;
        background-image: url(/images/reset.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }
  
    /* Menus */ 
  
    .improvements_box_menu {
          display: flex;
          flex-direction: row;
          width: 100%;
          height: 50px;
          padding: 3px;
          box-sizing: border-box;
      }
  
      .improvements_box_options {
          align-items: center; /* Alinha os itens verticalmente ao centro */
          display: flex;
          justify-content: space-between;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
      }
  
      .impr_menu_true {
          display: flex;
          background-color: #fff;
          padding: 0 8px;
          border-radius: 14px;
          font-size: 12px;
          height: 30px;
          text-align: center;
          align-items: center;
          margin: 0 5px 0 0;
          color: #000;
          cursor: pointer;
      }

    .impr_menu_true:hover {
        background-color: #d2d2d2;
    }

      .impr_menu_false {
        display: flex;
        background-color: #6c6c6c;
        padding: 0 8px;
        border-radius: 14px;
        font-size: 12px;
        height: 30px;
        text-align: center;
        align-items: center;
        margin: 0 5px 0 0;
        color: #ffffff;
        cursor: pointer;
    }

    .impr_menu_false:hover {
        background-color: #898989;
    }
  
    /**/
    
  
    .improvements_box_content {
        width: 100%;
        height: 88.5%;
        overflow: auto;
        margin: auto;
    }
  
    /* Barra de rolagem */
            /* Para navegadores Webkit (Chrome, Safari, etc.) */
            .improvements_box_content::-webkit-scrollbar {
                width: 6px;
            }
            
            .improvements_box_content::-webkit-scrollbar-thumb {
                background-color: #686868;
                border-radius: 10px;
            }
            
            /* Para navegadores Firefox */
            .improvements_box_content {
                scrollbar-width: thin;
                scrollbar-color: #383838 #131313; /* Cor da barra e do fundo */
            }
            
            .improvements_box_content::-webkit-scrollbar-track {
                background: #131313;
                border-radius: 10px;
            }
    /**/
  
    .improvements {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
  
    .improvements_placeholder_div {
        width: 100%;
        height: 100%;
        padding: 5px;
        color: white;
        box-sizing: border-box;
        margin-bottom: 10px;
    }
  
    .improvements_placeholder {
        width: 100%;
        height: 100%;
        border-radius: 15px;
        background-color: #4a4a4a;
        text-align: center;
        align-items: center;
        justify-content: center;
        padding: 25px;
        box-sizing: border-box;
        color: white;
    }
  
    .container_no_issues {
        width: 100%;
        box-sizing: border-box;
        color: #fff;
        background-color: #0077c2;
        margin-bottom: 10px;
        overflow: hidden;
        transition: max-height 0.3s;
        cursor: pointer;
        border-radius: 15px;
        padding: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
  
    .content_ok {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    
    .container {
        width: 100%;
        height: 15%;
        color: #fff;
        background-color: #282828;
        margin-bottom: 10px;
        overflow: hidden;
        transition: max-height 0.3s;
        cursor: pointer;
        border-radius: 15px;
    }
  
    .container:hover {
        background-color: #212121;
    }
    
    .container h2 {
        margin: 0;
        padding: 10px;
        font-size: 20px;
    }
  
    .container_no_issues h2 {
        margin: 0;
        padding: 10px;
        font-size: 16px;
        align-items: center;
        display: flex;
        pointer-events: none;
        transform: none;
        transition: none;
    }
    
    .container .content {
        display: none;
        padding: 10px;
    }
  
    .container .content_text {
        margin-bottom: 10px;
        color: #e4e4e4;
    }
  
    .highlight_text {
        font-weight: 750;
        color: #ffffff;
    }

    .highlight_text_black {
        font-weight: 750;
        color: #000000;
    }
  
    .selected-line {
        background-color: yellow;
        color: black;
    }
  
    .container .content_obs {
        font-size: 14px;
        font-style: italic;
        margin-bottom: 10px;
        color: #d6d6d6;
    }

    .grammar_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
  
    .container .content_options_grammar {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap; /* Esta linha é a chave para quebrar os itens para a próxima linha */
        margin-top: 20px;
    }

    .container .grammar_replace_btn {
        padding: 5px 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background-color: #0091ec;
        border: 1px solid #0075be;
        font-size: 12px;
        color: white;
        margin: 2px 3px 0 0;
    }

    .container .grammar_replace_btn:hover {
        background-color: #0578bf;
        border: 1px solid #0578bf;
    }

    .container .grammar_ignore_btn {
        padding: 5px 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background-color: #0c0c0c;
        font-size: 12px;
        color: white;
        margin: 2px 3px 0 0;
    }

    .container .grammar_ignore_btn:hover {
        background-color: #131313;
    }

    .container .grammar_export_btn {
        padding: 5px 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background-color: #ffffff;
        font-size: 12px;
        color: rgb(49, 49, 49);
        margin: 2px 5px 0 0;
    }

    .container .content_options {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 20px;
    }
  
    .container .content_learn_more {
        width: 25%;
        font-size: 14px;
        font-style: italic;
        text-decoration: underline;
        display: flex;
        align-items: center;
        color: inherit; /* ou color: transparent; ou color: initial; ou qualquer outra cor desejada */
    }
    
    .container .content_buttons {
        width: 50%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end; /* Para alinhar os itens à direita */
        font-size: 12px;
        color: red;
    }
  
    .container .content_ignore_btn {
        min-width: 80px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 25px;
        background-color: rgb(20, 20, 20);
        font-size: 14px;
        color: white;
    }
  
    .container .content_ignore_btn:hover {
        background-color: #060606;
    }
  
    .container .content_fix_btn {
        min-width: 50px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 25px;
        background-color: white;
        font-size: 14px;
        color: black;
        margin: 0 0 0 8px
    }
  
    .container .content_fix_btn:hover {
        background-color: #d2d2d2;
    }
  
    .content_copy_btn {
        min-width: 70px;
        max-width: 75px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 25px;
        background-color: white;
        font-size: 14px;
        color: black;
        margin: 0 5px 0 0;
    }
  
    .container_no_issues .content_copy_btn:hover {
        background-color: #d2d2d2;
    }
  
  
    .no_errors_found_div {
        width: 100%;
        height: 100%;
        background-color: #ff0000;
    }
  
    .sp_player_div {
        box-sizing: border-box;
        background-color: #131313;
    }
  
    .sp_player_div_content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        box-sizing: border-box;
        border-top: 2px solid #252525;
        margin: 5px 0 0 0;
    }
  
    .sp_search {
        width: 100%;
        height: 30%;
        box-sizing: border-box;
    }
  
  
    .sp_player {
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* Isso alinhará o item no final da div verticalmente */
        width: 100%;
    }


    #timer {
        position: absolute;
        bottom: 70px; /* ajuste conforme necessário */
        left: 14px; /* ajuste conforme necessário */
        padding: 8px 15px;
        background-color: #ffffff;
        border-radius: 10px;
        display: none;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        opacity: 0.9; /* Definindo a opacidade como 0 para ocultar inicialmente */
        transition: opacity 0.5s ease; /* Adicionando transição de opacidade */
    }
  
  
    /* SP PLAYER REAL */
  
    .spotify_player {
        width: 100%; 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
  
    }
  
  
      
    .sp_web_player {
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 5px 8px;
        position: relative;
    }
    
    .sp_main {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
    }
    
    .sp_left,
    .sp_right {
        display: flex;
        flex-direction: column;
    }
    
    .sp_left {
        margin-right: 10px;
        justify-content: center;
    }
    
    .sp_right {
        flex-grow: 1;
        width: calc(100% - 70px);
        box-sizing: border-box;
        height: 90%; /* Se você quiser que ele ocupe 90% da altura do pai */
        justify-content: flex-end;
    }
    
    .sp_up {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
  
  
    .button-container {
        display: flex;
        justify-content: flex-end;
        position: absolute;
    }
  
    .round-button {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
  
    .no_playback {
        color: #fff;
        user-select: none;
    }
  
    .playback_info {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        width: 100%;
        height: 100%;
    }
  
    .devices_options {
        position: fixed; /* Posiciona o menu em relação à janela de visualização */
        background-color: #282828;
        padding: 5px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        display: none; /* Inicia oculto */
        z-index: 999; /* Garante que o menu esteja acima de outros elementos */
        bottom: 105px;
        right: 20px;
    }
    
    .devices_options div {
        display: block;
        padding: 8px 12px;
        text-decoration: none;
        color: #ffffff;
        transition: background-color 0.3s ease;
    }

    .sp_device.current_device {
        display: block;
        padding: 8px 12px;
        text-decoration: none;
        color: #1ED760;
        transition: background-color 0.3s ease;
    }

    .sp_device {
        cursor: pointer;
    }
    
    .devices_options a:hover {
        background-color: #d2d2d2;
    }
  
  
    
    
    .sp_album_art, .sp_album_art img {
        width: 70px;
        height: 70px;
        background-color: #353535;
    }
  
    .sp_album_art:hover {
        filter: brightness(95%); /* Reduz o brilho para escurecer a imagem em hover */
    }
    
    .player-controls {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Adjustments for SVG icons */
    svg {
        fill: #ffffff;
        cursor: pointer;
        margin: 0 5px;
        transition: transform 0.3s ease;
    }
    
    svg:hover {
        transform: scale(1.1);
    }
  
    .sp_title,
    .sp_album,
    .sp_artist {
        max-height: 100%;
        overflow: hidden; 
        text-overflow: ellipsis;
        box-sizing: border-box;
        overflow: hidden;
        white-space: nowrap;
    }
    
    .sp_title {
        font-size: 15px;
        font-weight: bold;
        color: #fff;
        text-overflow: ellipsis;
    }
    
    .sp_album,
    .sp_artist {
        font-size: 11px;
        color: #cecece;
        text-overflow: ellipsis;
        
        width: 100%;
    }
  
  
    
  
    /**/
    
  
    /* Search container */
  
    .search-container {
        display: flex;
        align-items: center;
        justify-content: space-between; /* Distribui os elementos uniformemente */
        background-color: #282828;
        box-sizing: border-box;
        width: 100%;
        padding: 10px;
        border-radius: 12px;
        user-select: none;
    }
    
    .search-container input[type="text"] {
        flex: 1;
        border: none;
        background-color: transparent;
        font-size: 16px;
        color: #ffffff;
        max-width: calc(100% - 100px); /* ajuste conforme necessário */
        text-overflow: ellipsis; /* adiciona ... quando o texto ultrapassa a largura máxima */
        overflow: hidden; /* oculta o texto que ultrapassa a largura máxima */
        white-space: nowrap; /* impede que o texto seja quebrado em várias linhas */
    }
    
    input.search-container::-webkit-autofill {
        background-color: #282828;
    }
    
    .search-container input[type="text"]:focus {
        outline: none;
    }
    
    .search-container button[type="submit"] {
        background-color: transparent;
        border: none;
        color: #f0f0f0;
        font-size: 16px;
        cursor: pointer;
        white-space: nowrap; /* impede que o texto seja quebrado em várias linhas */
    }
    
    .search-container input[type="text"]::placeholder {
        color: #999;
    }
  
    /* mobile_expanded_content - DESKTOP */
  
    .mobile_expanded_content {
        display: none;
    }
  
  
  
  /* MAIN - END */
  
  .player {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 60px;
    width: 100%;
    background-color: #131313; /* você pode alterar a cor de fundo conforme desejado */
    border-top: 1px solid #252525;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    user-select: none;
  }
  
  .controls-left, .controls-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .control-container {
    margin: 0 4px;
    width: 40px; /* Largura e altura ajustáveis conforme necessário */
    height: 40px;
    border-radius: 50%; /* Torna a div redonda */
    overflow: hidden; /* Garante que a imagem dentro da div não ultrapasse os limites arredondados */
    transition: background-color 0.3s; /* Adiciona uma transição suave para a mudança de cor */
    display: flex; /* Ativa o modelo de flexbox */
    justify-content: center; /* Alinha os itens horizontalmente ao centro */
    align-items: center; /* Alinha os itens verticalmente ao centro */
    cursor: pointer;
  }
  

    .control-container svg:hover {
        transform: none; /* Remover a transformação de escala ao passar o mouse */
        transition: none; /* Remover a transição suave */
    }
  
  .control-container img {
    display: block;
    max-width: 50%;
    max-height: 50%; /* Adicionado para garantir que a imagem não ultrapasse os limites da div */
  }
  
  .control-container:hover {
    background-color: #3a3a3a;
  }
  
  .controls-center {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex: 1;
  }

  .tracker_container {
    position: relative;
    width: 100%; 
    align-items: center;
    display: flex;
  }

  .tracker {
    cursor: pointer; 
  }

  .hover_time_display {
    position: absolute;
    top: -35px; /* Posição ajustável conforme necessário */
    left: 0;
    background-color: white;
    color: black;
    padding: 5px 10px;
    border-radius: 5px;
    display: none; /* Inicialmente oculto */
  }

  .track_position, .track_duration {
    color: white;
    padding: 0 15px;
  }


  
  input[type="range"] {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    background: #555;
    outline: none;
    border-radius: 5px;
  }
  
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
  }
  
  
  
  #play-pause-button {
    position: relative;
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: none;
    cursor: pointer;
  }
  
  #play-pause-button::before,
  #play-pause-button::after {
    content: '';
    position: absolute;
    top: 0;
    width: 6px;
    height: 30px;
    background-color: white;
    border-radius: 10px;
  }
  
  #play-pause-button::before {
    left: 6px; /* Ajuste a distância da primeira barra para a direita */
  }
  
  #play-pause-button::after {
    right: 6px; /* Ajuste a distância da segunda barra para a esquerda */
  }
  
  /* FOOTER - START */
  
  .footer {
    width: 100%;
    border-top: 1px solid #252525;
  }
  
  .footer_message {
    width: 100%;
    flex-grow: 1;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60%;
    user-select: none;
  }
  
  .mobile_footer_div {
    display:none;
  }
  
  .development_message {
    position: fixed;
    padding: 10%;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #131313; /* Cor de fundo */
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Para garantir que a mensagem esteja na frente de outros elementos */
    overflow: hidden; /* Para esconder partes dos pseudo-elementos que saem da div */
}

.development_message h2, .development_message p {
    color: white; /* Cor do texto */
    text-align: center; /* Alinhamento do texto */
    user-select: none;
}

.development_message h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.development_message p {
    font-size: 18px;
    margin-bottom: 40px;
    color: #f1f1f1;
}

/* Desenhos de fundo */
.development_message::before, .development_message::after {
    content: '';
    position: absolute;
    background-color: #0077c2; /* Cor e opacidade das faixas */
    width: 120px; /* Largura das faixas */
    height: 20px; /* Altura das faixas */
    border-radius: 10px; /* Borda arredondada */
}

.development_message::before {
    top: 20%;
    left: 10%;
}

.development_message::after {
    bottom: 20%;
    right: 10%;
}

  .extended-options, #toggle_options {
    display: none; 
  }
  
  
  /* FOOTER - END */
  
  
  /* Estilos para celulares */
  @media (max-width: 768px) {
    * {
        margin: 0;
        padding: 0;
    }
  
    body {
        display: block;
        font-family: 'Exo', sans-serif;
        background-color: #181818;
        height: 100vh;
    }

    .development_message {
        display: flex;
    }
    
    .draft_div {
        position: fixed;
        left: 50%;
        top: 10px;
        transform: translateX(-50%);
        width: 80%;
        max-width: 350px;
        color: #b4b4b4;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        cursor: default;
        user-select: none;
        padding: 15px 15px;
        background-color: #000000;
        border-radius: 12px;
        z-index: 999;
    }

    .draft_text_content{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .draft_title{
        font-size: 18px;
        color: #fff;
        font-weight: 1000;
    }

    .draft_buttons {
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: center;
        width: 100%;
        margin-top: 20px;
    }

    .discard_button{
        height: 40px;
        width: 90px;
        background-color: #585858;
        color:#ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 3px;
        border-radius: 12px;
    }

    .recover_button {
        height: 40px;
        width: 90px;
        background-color: #ffffff;
        color:#000;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 3px;
        border-radius: 12px;
    }
    
  
    /* TOP - START */
  
    .top {
        width: 100%;
        height: 8%;
        color: white;
        display: flex;
        align-items: center;
        background-color: #282828;
    }
  
    .return {
        width: 20%;
        height: 100%;
        margin: auto;
        display: flex; /* Adiciona display flex para .return */
        align-items: center; /* Centraliza verticalmente os itens dentro de .return */
        justify-content: center; /* Centraliza horizontalmente os itens dentro de .return */
        cursor: pointer;
    }
  
    .return_arrow {
        width: 20%;
        height: 20%;
        background-size: cover;
        margin: auto;
        user-select: none;
        cursor: pointer;
    }
  
    .page_title {
        width: 60%;
        height: 100%;
        flex-grow: 1;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: bold;
        user-select: none;
    }
  
    .settings {
        width: 20%;
        height: 100%;
        background-size: cover;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .options_dots {
        display: inline;
        width: 50%;
        height: 50%;
        cursor: pointer;
    }
    
  
    /* TOP - END */
  
    /* MAIN - START */
  
  
    .main_content {
        display: flex;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 0;
    }
  
    /* MAIN LEFT */
  
        .main_left {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            background-color: purple;
            padding: 0;
        }
  
        .lyrics_box {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 0px;
            box-sizing: border-box;
            box-shadow: none;
            background-color: #181818;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            line-height: 21px;
            cursor: text;
        }
  
        .editor-container {
            width: 100%;
            height: 100%;
            display: inline-flex;
            gap: 10px;
            font-family: monospace;
            line-height: 21px;
            overflow: auto;
            touch-action: manipulation;
        }
  
        .character_counter {
            height: 100%;
            text-align: center;
            width: 5%;
            font-size: 12px;
            color: #8a8a8a;
            position: relative;
            pointer-events: none;
            line-height: 21px;
            overflow-y: scroll;
            height: 100%;
            user-select: none;
            /* Oculta a barra de rolagem, mas permite rolar */
            scrollbar-width: none; /* line_numbersFirefox */
            -ms-overflow-style: none; /* IE and Edge */
        }
        
        /* Estilização para navegadores que não suportam scrollbar-width */
        .character_counter::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }
  
        .editor {
            line-height: 21px;
            padding: 0 5px 0 0;
            flex: 1;
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            background-color: transparent;
            color: white;
            font-size: 18px;
            white-space: normal;
            resize: none; /* Impede o redimensionamento do textarea */
            overflow: auto; /* Permite a rolagem */
            scrollbar-width: thin; /* Firefox */
            scrollbar-color: transparent transparent; /* Firefox */
            position: relative;
        }
  
        .editor::-webkit-scrollbar {
            width: 0; /* Largura da barra de rolagem WebKit (Chrome, Safari) */
        }
  
        .editor::-webkit-scrollbar-thumb {
            background-color: transparent; /* Cor da "thumb" da barra de rolagem WebKit */
        }
  
        .editor::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 20px; /* Largura do espaço recuado */
            height: 100%;
        }
  
        .highlight {
            background-color: yellow; /* Selecionador de texto dos containers */
        }
  
    /* MAIN RIGHT */
  
        .main_right {
            display: none;
            flex-direction: column;
            justify-content: space-between;
            width: 25%;
            height: 100%;
        }
  
        .language_selector,
        .improvements_box,
        .sp_player_div {
            width: 100%;
        }
  
        .language_selector {
            height: 10%;
            background-color: #616161;
            border-radius: 20px;
        }
  
  
        .improvements_box {
            height: 63%;
            background-color: #131313;
            border-radius: 20px;
        }
  
        .mobile_expanded_content {
            display: block;
        }
  
    /* MAIN - END */
  
    /* FOOTER - START */
  
    .footer {
        width: 100%;
        background-color: #383838;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        box-sizing: border-box;
        position: fixed;
        bottom: 0; /* Inicialmente na parte inferior */
        transition: height 0.3s ease; /* Adiciona uma transição suave para a animação */
    }
  
    .mobile_footer_div {
        width: 100%;
        display: flex;
    }
  
    .status_light_div {
        width: 10%;
        height: 100%;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
  
    .status_light {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        align-items: center;
        max-width: 10px;
        background-color: #fff;
    }
  
    .status-gray {
        background-color: #7a7a7a;
    }
  
    .status-blue {
        background-color: #0077c2;
        box-shadow: 0 0 2px #0077c2;
    }
    
    .status-yellow {
        background-color: #edb51a;
        box-shadow: 0 0 2px #edb51a;
    }
  
    .mobile_footer_text {
        margin: 0 0 0 5px;
        width: 75%;
        height: 100%;
        color: white; /* Define a cor do texto como branca */
        font-size: 16px;
        display: flex; /* Utiliza flexbox */
        align-items: center; /* Centraliza verticalmente */
    }
  
    .mobile_footer_arrow {
        width: 15%;
        height: 100%;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .expand_arrow {
        width: 35%;
        height: 35%;
        background-size: cover;
        margin: auto;
        user-select: none;
    }
  
    .footer_message {
        display:none;
    }
    
    .footer.expanded {
        height: 80%; /* Ajuste a altura conforme necessário */
    }
  
    .footer_hided_content {
        height: 92%;
    }
  
    .hided_content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 0 2% 2%;
        box-sizing: border-box;
    }
  
    .improvements_box {
        height: 88%;
    }
  
    .language_selector {
        height: 10%;
        background-color: #616161;
        border-radius: 20px;
    }
  
    .lang_expand_arrow {
        width: 20%;
        height: 20%;
        transform: rotate(180deg);
    }
  
    
  
    /* FOOTER - END */

    .popup {
        width: 90%;
        max-width: 500px;
        border-radius: 20px;
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        padding: 10px;
        transform: translate(-50%, -50%);
        background-color: #282828;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        z-index: 1000;
        color: white;
        user-select: none;
    }

    .mini-menu {
        user-select: none;
        display: none;
        position: absolute;
        background-color: #333333;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        box-shadow: 0 5px 11px rgba(0, 0, 0, 0.1);
        width: 250px;
        z-index: 1;
        top: 65px;
        right: 10px;
        color: #ffffff;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(24px);
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 24px;
        width: 24px;
        left: 4px;
        bottom: 5px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 56px;
        height: 34px;
    }


    .extended-options {
        position: fixed;
        bottom: 60px; /* altura da barra do player */
        left: 0;
        width: 100%;
        background-color: #131313;
        border-top: 1px solid #252525;
        display: none; /* Inicialmente oculto */
        flex-direction: column;
        padding: 10px 20px; /* Ajuste conforme necessário */
        box-sizing: border-box;
    }

.option {
    color: white;
    padding: 10px 0;
    cursor: pointer;
}

/* Adicione isso ao seu CSS para o layout estendido no mobile */
#toggle_options {
    position: relative;
    display: block;
    cursor: pointer; /* Adiciona um cursor indicando que é clicável */
}

#toggle_options svg.arrow {
    width: 24px; /* Largura ajustável conforme necessário */
    height: 24px; /* Altura ajustável conforme necessário */
    fill: #ffffff; /* Cor ajustável conforme necessário */
    cursor: pointer;
    transition: transform 0.3s ease; /* Adiciona uma transição suave para a rotação da seta */
}

#toggle_options.active svg {
    transform: rotate(-90deg);
    transition: transform 0.3s ease; /* Adicione uma transição suave para a rotação */
}

.controls-right {
    display:none;
}



      
  }