@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
    display: inline-flex;
    /*flex-wrap: nowrap;*/
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-color: rgba(50, 50, 50, 1);
    align-items: stretch;
    align-content: space-between;
    width: 100%;
    height: 100vh;
}
/* MENSAGENS DA PLATAFORMA (INFO) */
.mainInfo{
    width: 100%;
    /*max-height: 75px;*/
    background-color: rgb(0,0,100);
    text-align: start;
    color: white;
    margin-bottom: 5px;
}
/* MENSAGENS DA PLATAFORMA (ALERTA) */
.mainAlert{
    width: 100%;
    background-color: rgb(200,100,0);
    border-radius: 5px;
    text-align: start;
    color: white;
    margin-bottom: 5px;
}
/* MENSAGENS DA PLATAFORMA (ERRO)*/
.mainError{
    width: 100%;
    background-color: rgb(180,0,0);
    border-radius: 5px;
    text-align: start;
    color: white;
    margin-bottom: 5px;
    font-weight: bolder;
}
/* MENSAGENS DA PLATAFORMA (SUCESSO) */
.mainDone{
    width: 100%;
    background-color: rgb(0,180,0);
    border-radius: 5px;
    text-align: start;
    color: white;
    margin-bottom: 5px;
    font-weight: bolder;
}
/* OUTROS */
.horizontalDivider{
    width: 80%;
    height: 2px;
    background-color: white;
    margin-top: 1%;
    margin-bottom: 1%;
}
.verticalDivider{
    width: 1px;
    height: 45px;
    background-color: rgb(100,100,100);
    margin-left: 10px;
    margin-right: 10px;
}
/*--------PÁGINA DE ENTRADA (LOGIN)--------*/
#pageContent{
    display: grid;
    height: 100vh;
    justify-items: center;
    background-image: url("graphics/catbon_fiber_dark.jpg");
    background-repeat: repeat;
    background-size: 100px;
    background-position: center;
    min-height: 600px;
    align-content: center;
}
/*mensagem de ecrã pequeno só no mobile.css*/
#screenSizeWarning{
    display: none;
}
/*formulário login*/
#login {
    display: grid;
    padding: 25px;
    margin: 0;
    width: 30%;
    height: fit-content;
    justify-items: stretch;
    align-items: start;
    color: white;
    background-color: rgb(20, 20, 20);
    border-radius: 5px;
    box-shadow: 0 10px 20px black;
    gap: 10px; /* space between rows */
}
#login h2, #login h1{
    text-align: center;
    margin-top: 0;
    margin-bottom: 2px;
}
#loginIdentity{
    height: 200px;
    /*inserir imagem depois*/
}
#login label {
    display: flex;
    flex-direction: column;
    width: 100%;
}
/*Logo do site*/
#appfilesLogo{
    width: 100%;
    min-height: 100px;
    background-image: url("graphics/performance_bird_gray.png");
    background-size: 150px;
    background-repeat: no-repeat;
    background-position: bottom;
    /*background-color: white;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
     */
}
#userL, #passL, #submitLogin {
    width: 100%;
    box-sizing: border-box;
}
/* ERRO AO ENTRAR*/
#loginError{
    background-color: rgb(60,0,0);
    color: white;
    font-size: small;
}
/* RODAPÉ DA PÁGINA LANDING */
#loginFooter{
    display: flex;
    position: fixed;
    width: 100%;
    max-height: 60px;
    bottom: 0;
    background-color: rgb(20,20,20);
    align-items: center;
    justify-content: center;
    margin: 0;
}
#loginFooterLogo{
    width: 90px;
    height: 55px;
    background-image: url("graphics/log.png");
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
}
#loginFooterMenu{
    display: flex;
    width: fit-content;
}
/*.largerFooterIcons{
    width: 100px;
    height: 100px;
}*/
/*Botão para ver info de novos parceiros ao entrar*/
#howToMemberButton{
    display: flex;
    text-decoration: none;
    color: rgb(100,100,100);
    min-height:50px;
    align-items: center;
}
#howToMemberButton:hover{
    color: white;
	transition: 0.3s;
}
/*---------------PLATAFORMA-------------*/
/*HEADER (BARRA LATERAL)*/
header{
    display: grid;
    flex-shrink: 0; /* Evitar redução do tamanho (por causa do mainContent flex-grow)*/
    width: 200px;
    background-color: rgb(20,20,20);
    color: white;
    align-content:space-between;
    overflow-y: scroll;
}
/*Conteúdos do Header*/
.headerContainer{
    display: grid;
    align-content: center;
    justify-items: center;
   /* background-color: lightgoldenrodyellow;*/
    margin: 5px;
}
/* Nomes dos menus*/
.menuName{
    font-size: smaller;
}
/*PERFIL*/
#profileIcon, #adminIcon{
    width:75px;
    height:75px;
    border-radius: 40px;
    background-color: black;
    text-align: center; /* Se tiver texto*/
    margin-bottom: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 75px;
}
#adminIcon, .adminSupportIcon{
    background-image: url("graphics/performance_bird_gray.png");
}
/*conteúdos separados do Header*/
#userProfile, #navMenu, #testsMenu{
    display: grid;
    width: 100%;
    align-content: start;
   /* background-color: lightsteelblue;*/
    margin-bottom:15px;
}
/* Redes sociais*/
#socialMenu{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-content: space-between;
    align-items: center;
    justify-content: center;
}
.socialsIcon{
    display: flex;
    margin: 5px;
    padding: 2px;
    align-items: center;
    /*font-size: medium;*/
    /*color: rgb(100, 100, 100);*/
    /* text-decoration: none; */
}
.socialsIcon:hover .headerIcon{
    background-color: white;
	transition: 0.3s;
}
/*LOGO*/
#identity{
    width: 100%;
    height: 120px;
    /*background-color: lightgray;*/
    background-image: url("graphics/log.png");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}
/* botões do header (páginas)*/
.headerButton{
    display: flex;
    font-size: medium;
    margin: 5px;
    color: rgb(100,100,100);
    text-decoration: none;
    padding: 2px;
    align-items: center;
}
/* botão selecionado na respetiva página*/
.hBSelected{
    color: white;
    background-color: rgb(200, 20, 20);
}
/* estilo muda em caso de hover*/
.headerButton:hover{
    color: white;
	transition: 0.3s;
}
.headerButton:hover .headerIcon{
    background-color: white;
	transition: 0.3s;
}
/*----ICONS dos botões do header----*/
.headerIcon{
    width: 25px;
    height: 25px;
    margin: 2px;
    background-size: 25px;
    background-color: rgb(100,100,100); /*mesma cor do texto*/
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
/*Logotipo*/
#headerLogo{
    /*width: 75px;
    height: auto;*/
}
.iconSelected{
    background-color: white;
}
.mainIcons{
    width: 25px;
    height: 25px;
    margin: 2px;
    background-size: 25px;
    background-color: white;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
form h3{
    display: flex;
    align-items: center;
}
/*Título dos Termos e Condições*/
#tACTitle{
    width: 100%;
    text-align: center;
    color: white;
    background-color: rgb(20,20,20);
}
/*ICONS DA INTERFACE*/
/* GERIR CONTA*/
#hBAccount{-webkit-mask-image: url('graphics/user_icon.png'); mask-image: url('graphics/user_icon.png');}
/* CRÉDITOS */
#hBWallet{ -webkit-mask-image: url('graphics/coins.png'); mask-image: url('graphics/coins.png');}
/* SAIR/LOGOUT */
#hBExit{ -webkit-mask-image: url('graphics/logout.png'); mask-image: url('graphics/logout.png');}
/* INICIO */
#hBHome{ -webkit-mask-image: url('graphics/home.png'); mask-image: url('graphics/home.png');}
/* UPLOADS */
#hBUpload{-webkit-mask-image: url('graphics/upload_file.png'); mask-image: url('graphics/upload_file.png');}
/* DOWNLOADS */
#hBDownload{ -webkit-mask-image: url('graphics/download_file.png'); mask-image: url('graphics/download_file.png');}
/* LOJA */
#hBStore{ -webkit-mask-image: url('graphics/shop.png'); mask-image: url('graphics/shop.png');}
/* SUPORTE */
#hBSupport{ -webkit-mask-image: url('graphics/customer_support.png'); mask-image: url('graphics/customer_support.png');}
/* FACEBOOK */
#hBFacebook{ -webkit-mask-image: url('graphics/facebook.png'); mask-image: url('graphics/facebook.png');}
/* INSTAGRAM */
#hBInstagram{ -webkit-mask-image: url('graphics/instagram2.png'); mask-image: url('graphics/instagram2.png');}
/* YOUTUBE */
#hBYoutube{ -webkit-mask-image: url('graphics/youtube.png'); mask-image: url('graphics/youtube.png');}
/* NOTIFICAÇÕES */
#hBNotific{ -webkit-mask-image: url('graphics/notifications.png'); mask-image: url('graphics/notifications.png');}
/* ADMIN */
#hBUsers{-webkit-mask-image: url('graphics/people.png'); mask-image: url('graphics/people.png');}
#hBConect{-webkit-mask-image: url('graphics/worldwide.png'); mask-image: url('graphics/worldwide.png');}
#hBPlatform{-webkit-mask-image: url('graphics/monitor.png'); mask-image: url('graphics/monitor.png');}
/* Outros */
#reloadIcon{-webkit-mask-image: url('graphics/reload.png'); mask-image: url('graphics/reload.png');}
#toolsIcon {-webkit-mask-image: url('graphics/tools.png'); mask-image: url('graphics/tools.png');}
#settingsIcon {-webkit-mask-image: url('graphics/settings.png'); mask-image: url('graphics/settings.png');}
#chatIcon {-webkit-mask-image: url('graphics/chat.png'); mask-image: url('graphics/chat.png');}
#searchIcon {-webkit-mask-image: url('graphics/search.png'); mask-image: url('graphics/search.png');}
#dialIcon {-webkit-mask-image: url('graphics/dial.png'); mask-image: url('graphics/dial.png');}
#speedIcon {-webkit-mask-image: url('graphics/speedometer.png'); mask-image: url('graphics/speedometer.png');}
#processorIcon {-webkit-mask-image: url('graphics/processor.png'); mask-image: url('graphics/processor.png');}
#fileIcon {-webkit-mask-image: url('graphics/file.png'); mask-image: url('graphics/file.png');}
#clipboardIcon {-webkit-mask-image: url('graphics/clipboards.png'); mask-image: url('graphics/clipboards.png');}
/*mensagens*/
#infoIcon{-webkit-mask-image: url('graphics/information.png'); mask-image: url('graphics/information.png');}
#doneIcon{-webkit-mask-image: url('graphics/done.png'); mask-image: url('graphics/done.png');}
#alertIcon{-webkit-mask-image: url('graphics/alert.png'); mask-image: url('graphics/alert.png');}
#errorIcon{-webkit-mask-image: url('graphics/error.png'); mask-image: url('graphics/error.png');}
/*veiculos*/
#carIcon {-webkit-mask-image: url('graphics/car.png'); mask-image: url('graphics/car.png');}
#pickupIcon {-webkit-mask-image: url('graphics/pickup.png'); mask-image: url('graphics/pickup.png');}
#vanIcon {-webkit-mask-image: url('graphics/van.png'); mask-image: url('graphics/van.png');}
#motorhomeIcon {-webkit-mask-image: url('graphics/motorhome.png'); mask-image: url('graphics/motorhome.png');}
/*Logo APP*/
#logoImage {-webkit-mask-image: url('graphics/log.png'); mask-image: url('graphics/log.png');}
/*Logo APPFiles*/
#logoImage {-webkit-mask-image: url('graphics/performance_bird_smooth.png'); mask-image: url('graphics/performance_bird_smooth.png');}
/*botões personalizados para icons com um background diferente (semelhante ao socialIcon) */

/*imagens dos modos de estilo: clássico, claro, escuro, azul*/
#normalIcon {background-image: url('graphics/classicMode.png');}
#lightIcon {background-image: url('graphics/lightMode.png');}
#darkIcon {background-image: url('graphics/darkMode.png');}
#blueIcon {background-image: url('graphics/blueMode.png');}

.iconButton{
    display: flex;
    align-items: center;
    background-color: rgb(20,20,20);
    border-radius: 3px;
    margin: 5px;
    padding: 2px;
}
.iconButton:hover{
    background-color: rgb(40,40,40);
	transition: 0.3s;
}
.iconButton:hover .headerIcon{
    background-color: white;
	transition: 0.3s;
}
/*---Icons de estilo--*/
.styleIcon{
    display: flex;
    background-size: 100px;
    background-position: center;
    background-repeat: no-repeat;
    min-width: 120px;
    min-height: 85px;
}
/*-----------Conteúdo da página (excluíndo o header)------------*/
#mainContent{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-image: url("graphics/catbon_fiber_dark.jpg");
    background-repeat: repeat;
    background-size:100px;
    overflow: hidden;
}
/* barra do topo*/
#topBar{
    display: flex;
    background-color: rgb(20,20,20);
    justify-content: space-between;
    align-items: center;
    box-shadow:  0 10px 20px black;
    margin-bottom: 15px;
}
#topMenu{
    display: flex;
    margin: 10px;
    align-items: center;
}
/* Nome do utilizaodr na barra do topo */
#usernameDisplay{
    color: white;
}
/*Nome da página atual*/
#pageName{
    color: white;
    font-size: large;
    font-weight: bolder;
    margin-left: 2px;
}
/* FOOTER (esconder)*/
footer{
    display: none;
    /*position: absolute;*/
    width: 100%;
    min-height: 30px;
    color: white;
    background-color: black;
    margin-top: 12px;
    bottom: 0;
    text-align: center;
}
/* - Apresentação do número de créditos (na barra de topo)- */
.creditNumber{
    font-weight: bold;
    font-size: 1.1em;
    margin-left: 5px;
}
/*cores do estado dos créditos*/
.okCredit {
    color: lightgreen !important;
}
.lowCredit {
    color: orange !important;
}
.noCredit {
    color: red !important;
}
/*--------Animações--------*/
.noteA{
    animation-name: notification;
    animation-duration: 2s ;
    animation-iteration-count: infinite;
}
/*--animação de alerta--*/
@keyframes notification {
    0% {background-color: transparent}
    50%{ background-color: darkred}
    100% {background-color: transparent}
}
/*------Conteúdos-UPLOAD---------*/
#uploadOptions{
    display: flex;
    justify-content: space-evenly;
    width: 90%;
    max-height: 50px;
}
/* mudar o estado visual dos botões */
.contentButton{
    width: 20%;
    background-color: rgb(20,20,20);
    margin: 2px;
    padding: 0.5%;
    text-decoration: none;
    text-align: center;
    color: white;
    border-radius: 5px;
}
.contentButton:hover{
    background-color: rgb(50,50,50);
	transition: 0.3s;
}
.buttonOn{
    background-color: rgb(200, 20, 20);
}
.buttonOn:hover{
    background-color: rgb(200, 20, 20);
}
/*---outros butões da interface---*/
.contentButton2 {
    background-color: rgb(145,145,145);
    margin: 2px;
    padding: 0.5%;
    text-decoration: none;
    text-align: center;
    color: black;
    border-style: solid;
    border-color: white black black white;
}
.contentButton2:hover {
     background-color: rgb(100,100,100);
     border-color: black white white black;
 }
.contentButton[disabled], .contentButton2[disabled], .iconButton[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #ccc;
    color: #666;
    border-color: #aaa;
}
/* mudar fonte de texto para cada input */
input, textarea, select option{
   font-family: 'Poppins', sans-serif;
}
/* conteúdos das págias da plataforma */

/*---------Conteúdos das páginas---------*/
#homeStructure{
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    /*background-color: lightgray;*/
    justify-content: center;
    flex-grow: 1; /* ocupar o resto da página */
    overflow-y: auto;
}
#mainStructure .uploadContent,
/*--esconder conteúdos--*/
#mainStructure .upContFalse{
    display: none;
}
/*--mostrar conteúdos--*/
#mainStructure .upContTrue{
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    /*background-color: lightblue;*/
    text-align: center;
    align-content: center;
    border-radius: 5px;
    /*overflow-y: scroll;*/
}
#mainStructure h2{
    color: white;
    width: 100%;
    max-height: 80px;
    background-color: rgb(20,20,20);
    border-radius: 5px;
    margin-top: 0;
    margin-bottom: 10px;

}
/*---------Conteúdos da PÁGINA PRINCIPAL------------*/
/* caixas dos conteúdos principais*/
.infoBox{
    display: grid;
    width: 90%;
    background-color: rgb(20,20,20);
    border-radius: 5px;
    align-items: center;
    color: white;
    padding: 5px;
    text-align: start;
    box-shadow: 0 10px 20px black;
    margin-bottom: 2%;
}
.infoBox h2{
    width: 100%;
    text-align: start;
}
.infoBox div{
    /*width: 100%;*/
    /*background-color: lightgray;*/
    margin: 2px;
}
.infoBoxOptions{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
}
.infoBoxOptions a{
    background-color: gray;
    color: white;
    border: black 1px solid;
    text-decoration: none;
}
.infoBoxOptions a:hover{
    background-color: lightgray;
    color: black;
	transition: 0.3s;
}
/*PERFIL DO UTILIZADOR*/
#userDataBox{
    display: flex;
    align-items: start;
}
.accoutBlock{
    background-color: transparent;
}
#accountImage{
    display: block;
    width: 200px;
    height: 200px;
    background-color: rgb(50,0,0);
    background-size: 200px;
    background-repeat: no-repeat;
    background-position: center;
}
/* avisos na página principal*/
#noticeInfo{
    background-color: rgb(100,10,10);
}
#noticeInfo span{
width: fit-content;
    padding: 5px;
}
/*info ao lado das tabelas*/
.extraInfo{
    min-width: 50%;
    align-items: start;
    background-color: rgba(255,255,255, .5);
}
/*-Visualização de pedidos*/
#pendingList, #redoRequest{
    display:flex;
    width: 100%;
    max-height: 60vh;
    overflow-y: scroll;
}
#requestDetails, #redoForm, #revertReqF{
    width: 100%;
}
/*-Novos pedidos-*/
#newReqF, #revertReqF{
    /*display: grid;*/
    width: 100%;
    justify-content: center;
    height: 60vh;
    /*max-height: 650px;*/
    overflow-x: hidden;
    overflow-y: scroll;

}
/*editar Scroll bars*/
/* Chrome, Edge, Safari (WebKit-based) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: darkred;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: darkred transparent;
}
/* Cada secção do formulário (div)*/
.formField{
    display: block;
    background-color: rgb(20,20,20);
    border-radius: 8px;
    align-content: center;
    width: 100%;
    /*margin-right: 20px;*/
    margin-bottom: 5px;

}
.formField h3{
    color: white;
}
/*.formField label{
    color: white;
    background-color: rgb(20,20,20);
    border-radius: 5px;
}*/
.formField:last-child{
    margin-bottom: 20px;
}
/* alterar todos os inputs de ficheiros */
/*input[type="file"]{

}*/
/* alterar todos os menus select */
select, input{
    background-color: rgb(20,20,20);
    border-radius: 10px;
    border: 1px white solid;
    color: white;
    width: 50%;
    font-size: larger;
    padding: 5px;
    margin: 2px;
}
.yesNo{
    width: fit-content;
}
/* áreas de checkboxes*/
.checkboxArea {
    display: flex;
    color: white;
    background-color: rgb(20,20,20);
    min-height: 30px;
    justify-content: space-between;
    align-items: center;
    border-style: solid;
    border-radius: 3px;
    border-color: rgb(30,30,30);
    font-size: larger;
    margin: 4px;

}
.checkboxArea input[type="checkbox"]{
    /*display: flex;*/
    margin: 2px;
    width: 25px;
    height: 25px;
}
input[type="submit"]:hover{
    background-color: rgb(50,50,50);
	transition: 0.3s;
}
#termsAndCon{
    display: grid;
    background-color: lightcoral;
    align-items: center;
}
.formTextItens{
    color: white;
}
/*Seletores de icons*/
 .icon-select {
     display: flex;
     width: 100%;
     gap: 1rem;
     margin: 1rem 0;
     justify-content: space-between;
 }
.icon-option {
    display: flex;
    width: 20%;
    flex-direction: column;
    align-items: center;
    padding: 1px;
    border: 2px solid white;
    background-color: rgb(10,10,10);
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
}
.icon-option.selected {
    border-color: rgb(200,20,20);
    color: rgb(200,20,20);
}
.icon-option.selected .headerIcon{
    background-color: rgb(200,20,20);
}
.icon-option .headerIcon {
    width: 40px;
    height: 40px;
    background-color: white;
}
.icon-option span {
    margin-top: 0.5rem;
    font-size: 0.9rem;
}
.icon-option:hover{
    background-color: rgb(50,50,50);
	transition: 0.3s;
}
#styleForm{
    width: 100%;
}
/*áreas de menus select */
.selectArea{
    display: flex;
    /*width: 50%;*/
    color: white;
    background-color: rgb(20,20,20);
    align-items: center;
    justify-content: space-between;
}
/*esconder elemento*/
.hide{
   display:none;
}
#termAndConCheck{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: transparent;/* anular o default 20,20,20 */
}
#termAndConCheck input{
    width: 25px;
    height: 25px;
}
.commentSpace{
    width: 100%;
    min-width: 400px;
    min-height: 50px;
    text-align: start;
    margin: 8px;
}
/* COMENTÁRIOS*/
.textInput{
    width: 80%;
    resize: none;
    background-color: rgb(30,30,30);
    color: white;
    border: white 1px solid;
    border-radius: 5px;
    margin: 2px;
}
/*Confirmação de final do formulário*/
.finalCheckArea{
    display: flex;
    justify-content: center;
    align-items: center;
}
/* botão da confirmação final*/
.finalCheck{
    width: 25px;
    height: 25px;
}
/*botões de submissão dos formulários*/
/* Opção 1: Ativo */
.sendRequestTrue{
    text-align: center;
    align-items: center;
    width: 45%;
    min-height: 32px;
    color: rgb(150,255,150);
    background-color: rgb(20,20,20);
    border-radius: 5px;
    border: white 1px solid;
}
.sendRequestTrue:hover{
    background-color: rgb(45,45,45);
	transition: 0.3s;
}
/* Opção 2: Não ativo */
.sendRequestFalse{
    text-align: center;
    align-items: center;
    width: 45%;
    min-height: 32px;
    color: rgb(100,10,10);
    background-color: rgb(20,20,20);
    border: darkgray 1px solid;
    opacity: 50%;
}
.sendRequestFalse:hover{
    background-color: rgb(20,20,20);
	transition: 0.3s;
}
/*---------Wallet(CRÉDITOS)--------*/
#walletOptions{
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    font-size: larger;
    justify-content: space-evenly;
    margin-bottom: 8px;
}
.wOption{
    display: grid;
    width: 15%;
    min-width: 100px;
    min-height: 255px;
    color: white;
    background-color: rgb(20,20,20);
    text-align: center;
    padding: 20px;
    margin: 3px;
    font-size: large;
    border-radius: 5px;
}
.wOSpecial{
    background-color: rgb(10,10,50);
    border-color: rgb(20,20,70);
}
.creditAmount{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: xx-large;
    font-weight: bolder;
    margin: 10px;
    /*border-style: solid;*/
    /*border-color: transparent transparent black transparent;*/
}
#walletInfoBox{
    background-color: rgb(0,0,50);
}
/*-----------------TABELAS------------------*/
table{
    width: 100%;
    background-color: white;
    /*border-style: solid;*/
    text-align: center;
    border-radius: 5px;
    margin: 3px;
    overflow-x: auto;
}
table th{
    /*border-style: solid;*/
    height: 12px;
    background-color: rgb(20,20,20);
    color: white;
    border-radius: 2px;
}
table tr {
    height: 30px;
}

table td {
    background-color: rgb(50,50,50);
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 2px;
    vertical-align: top;
    padding: 8px;
}
/* Para elementos da tabela maiores do que a altura restrita */
.scrollableCell {
    max-height: 75px;
    overflow: auto;
    display: block;
}
table a{
    /*text-decoration: none;*/
    font-weight: bold;
    color: green;
}
/*TABELA DOS DOWNLOADS*/
#downloads{
    width: 100%;
    font-size: small;
    overflow-x: auto;
}
#downloads td {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 200px; /* adjust as needed */
}
/* TIMER: Prazo para os ficheiros de download*/
.countdown {
    font-weight: bold;
    color: #007bff; /* blue */
    font-size: 0.9rem;
    padding: 4px 6px;
    /*border-radius: 6px;*/
    background-color: #f0f8ff;
    display: inline-block;
}
.expired {
    color: rgb(100,0,0);
    font-weight: bold;
}
/*TABELAS DO ADMIM*/
#userList{
    max-height: 750px;
    overflow-y: scroll;
}
#userList tr{
    height: 70px;
}
/*IMAGENS PARA A TABELA DO ADMIN*/
.tableProfileIcon{
    display: block;
    width:40px;
    height:40px;
    border-radius: 20px;
    background-color: black;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40px;
    margin-right: 5px;
}
.tableUsernameTD{
    display: flex;
    align-items: center;
    height: 100%;
}
/* Estrutura principal (conteúdo das páginas)*/
#mainStructure{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-items: center;
    overflow-y: scroll;
}
#formSection{
    display: grid;
}
/*tabelas ADMIN */
#requestInbox{
    width: 100%;
}
#requestInbox td{
    font-size: smaller;
    max-width: 50px;
}
/* colunas de largura fixa */
.fixedCol{
    max-width: 50px;
    font-size: x-small;
}
/* tipos depedido */
.reqNew td{ /*NOVO*/
    background-color: rgb(200,200,140);
}
.reqRedo td{ /*REFAZER*/
    background-color: rgb(120,100,140);
}
.reqOri td{ /*ORIGINAL*/
    background-color: rgb(120,200,120);
}
/* SIM E NÃO*/
.rFieldFalse{
    font-style: italic !important;
    color: rgb(50,50,50) !important;
}
.rFieldFalse1{
    font-style: italic !important;
    color: rgb(0,0,0) !important;
}
.rFieldTrue1{
    color: darkgreen !important;
    font-weight: bolder;
}
.rFieldTrue2{
    color: darkblue !important;
    font-weight: bolder;
}
/*TABELAS GRANDES*/
.largeTableCont {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}
.largeTableCont table {
    width: max-content; /* Or a fixed width if you prefer */
    min-width: 100%; /* Ensures it doesn't shrink smaller than container */
    border-collapse: separate;
    border-spacing: 2px;
}
/* LINKS PARA O DOWNLOAD DE PASTAS */
.downloadFileLink{
	background-color: rgb(30,30,30);
	color: lightblue;
	text-decoration:none;
	padding: 2px;
	border-radius: 5px;
}
.downloadFileLink:hover{
	background-color: rgb(100,100,100);
	transition: 0.3s;
}
/*BOTÕES DE ANULAR E REMOVER PEDIDOS */
.undoReq, .removeReq{
	min-width: 25px;
	min-height: 25px;
	border-radius: 3px;
	/*border: 1px solid black;*/
	margin:2px;
}
.undoReq{
	background-color: rgb(200,100,0);
}
.removeReq{
	background-color:rgb(200,0,0);
}
.undoReq:hover{
	background-color: rgb(200,150,50);
	transition: 0.3s;
}
.removeReq:hover{
	background-color:rgb(200,50,50);
	transition: 0.3s;
}
.removeReq .headerIcon, .undoReq .headerIcon{
	background-color: rgb(100,100,100)
}
.removeReq:hover .headerIcon, .undoReq:hover .headerIcon{
	background-color: rgb(50,50,50)
}
/*Mensages a editar pelo admin*/
.displayedMessage{
    border-radius: 5px;
    background-color: rgb(30,30,30);
    color: white;
}
/* ADICIONAR CAMINHO COMPLETO POR CAUSA DO AJAX*/
/* rel = 0 */
#mainStructure .infoBox.normalMsg,
#homeStructure .infoBox.normalMsg {
    background-color: rgb(40,40,40);
}

/* rel = 1 */
#mainStructure .infoBox.impMsg,
#homeStructure .infoBox.impMsg {
    background-color: rgb(50,40,20);
}

/* rel = 2 */
#mainStructure .infoBox.vImpMsg,
#homeStructure .infoBox.vImpMsg {
    background-color: rgb(50,20,20);
}
/*Estado das mensagens (ADMIN):*/
.messageStatus{
    background-color: rgb(65,65,65);
    border-radius: 4px;
    padding: 3px;
}
.statusActive {
    color: #0f0; /* green */
    font-weight: bold;
}
.statusInactive {
    color: #f00; /* red */
    font-weight: bold;
}
.statusPermanent {
    color: #888; /* gray */
    font-style: italic;
}
/*-------PÁGINA DO SUPORTE-------*/
#chatBox{
    width: 98%;
    background-color: rgb(30,30,30);
}
/* CONTEÚDO A GERAR POR AJAX */
#chatBox .displayedChatMsg{
    display: grid; /* Empilhar, tipo lista*/
    /*align-items: flex-start;*/
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    margin: 10px 0;
    padding: 10px;
    clear: both;
}
.messageSubspace{
    display: grid;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
/*Para as mensagens do utilizador (alterar a estutura com is icons)*/
#chatBox .displayedChatMsg.iconMsgStruc{
    display: flex;
    align-items: start;
}
/*balão de texto*/
.chatContent {
    /*max-width: 90%;*/ /*Está a bugar quando há imagens*/
    padding: 8px;
    border-radius: 10px;
}
/*mudar a cor do balão dependendo do lado*/
.textRight{
    background-color: rgb(50,30,30);
    text-align: right;
}
.textLeft{
    background-color: rgb(50,50,50);
    text-align: left;
}
/*Imagens na mensagem (dentro do balão) */
.displayedChatMsg img {
    margin-top: 5px;
    border-radius: 4px;
}
/* tamanhos dos icons dos utilizadores */
.chatUserIcon, .adminSupportIcon{
    min-width: 40px;
    min-height: 40px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: black;
    background-position: center;
    border-radius: 50%;
    display: inline-block;
    margin: 0 10px;
}
/* ALINHAR ADMIN NO LADO DO USER */
.adminMsg{
    text-align: start;
    align-items: start;
    justify-content: start;
}
/* ALINHAR USER NO LADO DO USER */
.userMsg{
    text-align: end;
    align-items: start;
    justify-content: end;
}
.messageUsername, .messageDatetime{
    /*display: flex;*/ /*está a bugar?*/
    width: 100%;
    font-size: 9pt;
    color: rgb(100,100,100);
}
.messageTextStyle{
    color: white;
    font-size: 12pt;
}
/*----SUPORTE ADMIN----*/

/*alinhamentos no admin*/
.adminMsg2{
    justify-content: end;
    text-align: end;
}
.userMsg2{
    justify-content: start;
    text-align: start;
}
/*Cores no admin*/
.textRight2{
    background-color: rgb(30,30,60);
    text-align: right;
}
.textLeft2{
    background-color: rgb(50,50,50);
    text-align: left;
}
/*cada link de utilizador no suporte*/
#userList .userLink{
    display: flex;
    align-items: center;
    max-width: 256px;
    width: 100%;
    min-height: 45px;
    padding: 2px;
    text-decoration: none;
    color: white;
    background-color: rgb(20,20,20);
    border: 1px solid transparent;
    border-radius: 4px;
    margin: 2px;
}
#userList .userLink:hover{
    background-color: rgb(40,40,40);
    border: 1px solid white;
}
/* ADICIONAR o # ACIMA TAMBÉM EM CASO DE ERRO*/
#userListContainer .userLink.selected {
    background-color: rgb(50,10,10) !important;
    border: 1px solid red; !important;
    color: white !important;
    font-weight: bold;
    cursor: default;
}
/*CORRIGIR bug de scroll (x)*/
#userList a,
#chatBox {
    word-break: break-word;
    overflow-wrap: break-word;
}
/*ABRIR IMAGENS NO SUPORTE*/
#imagePopupOverlay {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}
#imagePopupOverlay img {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 20px #000;
    border-radius: 10px;
    transition: transform 0.2s;
    cursor: zoom-out;
}