/* *****************************************************************************
//
//  Copyright (C) 2023 Alternativa per L'Arboç
//
//  areaPrivada.css is free software: you can redistribute it and/or modify
//  it under the terms of the GNU General Public License as published
//  by the Free Software Foundation, per version 3 of the License.
//
//  areaPrivada.css is distributed in the hope that it will be useful,
//  but WITHOUT ANY WARRANTY; without even the implied warranty of
//  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
//  GNU General Public License for more details.
//
//  You should see a copy of the GNU General Public License
//  at http://www.gnu.org/licenses/.
//
//  This file is based off work covered by the following copyright(s):  
//
//   Alternativa per L'Arboç
//   Copyright (C) 2023
//   Licensed under GNU GPL version 3, or later.
//
*******************************************************************************/
*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

html{
	font-size: 10px;
    color: black;
    font-family: Lora, sans-serif;
}

a{
	text-decoration: none;
}

li{
	list-style: none;
}

/*
Mobile devices – 320px—480px
iPads, Tablets – 481px—768px
*/

@media only screen
and (min-device-width: 320px)
and (max-device-width: 768px){

    header{
	    display: flex;
	    justify-content: space-between;
	    background-color: #a3185b;
	    height: 10vh;
        color: white;
        padding: 0vh 3vh;
    }

    header img{
	    height: 10vh;
	    align-self: center;
    }
    
    header h1{
        font-family: Ubuntu, sans-serif;
        align-self: center;
    }

    main{
        display: flex;
        height: 90vh;
        background-color: lightgray;
        justify-content: center;
    }

    main .containerEntrada{
        display: flex;
        flex-direction: column;
        box-shadow: black 0px 0px 5vh;
        background-color: white;
        border-radius: 1vh;
        margin: 20vh 0vh;
    }

    main .containerEntrada h1{
        font-size: 5vh;
        line-height: 1.2;
        text-align: center;
        font-family: "Ubuntu", sans-serif;
        padding: 2vh 2vh;
    }

    main .containerEntrada form{
        display: flex;
        flex-direction: column;
    }

    main .containerEntrada form label{
        font-size: 2.4vh;
	    line-height: 1.2;
        text-align: left;
        font-family: "Lora", sans-serif;
        padding: 2vh 2vh;
    }

    main .containerEntrada input{
        border: none;
        resize: none;
        outline: none;
        border-bottom: 0.2vh solid lightgrey;
        transition: all 500ms;
        margin: 0vh 2vh;
    }

    main .containerEntrada input:focus{
        border-bottom-color: #a3185b;
    }

    main .containerEntrada input[type="submit"]{
        margin-top: 4vh;
        border:0;
        color: white;
        font-size: 2.4vh;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d62078), color-stop(100%,#921551));
        -moz-border-radius: 1vh;
        -webkit-border-radius: 1vh;
        text-shadow: 0.3vh 0.3vh 0.3vh #5f0e35;
        text-transform: uppercase;
        font-family: "Lora", sans-serif;
        padding: 1.4vh 0vh;
    }
}

@media only screen
and (min-device-width: 320px)
and (max-device-width: 768px)
and (orientation: portrait){
    
}

@media only screen
and (min-device-width: 320px)
and (max-device-width: 768px)
and (orientation: landscape){

    main .containerEntrada{
        display: flex;
        flex-direction: column;
        box-shadow: black 0px 0px 5vh;
        background-color: white;
        border-radius: 1vh;
        margin: 20vh 0vh;
		padding: 0vh 15vh;
    }

}

/*
Small screens, laptops – 769px—1024px
Desktops, large screens – 1025px—1200px
Extra large screens, TV – 1201px-more
*/

@media only screen
and (min-width: 769px)
{
	
    header{
	    display: flex;
	    justify-content: space-between;
	    background-color: #a3185b;
	    height: 15vh;
        color: white;
        padding: 0vh 3vh;
    }

    header img{
	    height: 15vh;
	    align-self: center;
    }
    
    header h1{
        font-family: Ubuntu, sans-serif;
        align-self: center;
        font-size: 6vh;
    }

    main{
        display: flex;
        min-height: 85vh;
        background-color: lightgray;
        justify-content: center;
        padding: 15vh 0vh;
    }
    
    main .containerEntrada{
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: black 0px 0px 5vh;
        background-color: white;
        border-radius: 1vh;
        padding: 2vh 15vh;
    }

    main .containerEntrada h1{
        font-size: 5vh;
        line-height: 1.2;
        text-align: center;
        font-family: "Ubuntu", sans-serif;
        padding-bottom: 2vh;
    }

    main .containerEntrada form{
        display: flex;
        flex-direction: column;
    }

    main .containerEntrada form label{
        font-size: 2.4vh;
	    line-height: 1.2;
        text-align: left;
        font-family: "Lora", sans-serif;
        padding: 2vh 0vh;
    }

    main .containerEntrada input{
        border: none;
        resize: none;
        outline: none;
        border-bottom: 0.2vh solid lightgrey;
        transition: all 500ms;
    }

    main .containerEntrada input:focus{
        border-bottom-color: #a3185b;
    }

    main .containerEntrada input[type="submit"]{
        cursor: pointer;
        margin: 4vh 0vh;
        border:0;
        color: white;
        font-size: 2.4vh;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d62078), color-stop(100%,#921551));
        -moz-border-radius: 1vh;
        -webkit-border-radius: 1vh;
        text-shadow: 0.3vh 0.3vh 0.3vh #5f0e35;
        text-transform: uppercase;
        font-family: "Lora", sans-serif;
        padding: 1.4vh 0vh;
    }

    .mensajeError {
        display: flex;
        flex-direction: row;
        color: red;
        padding: 1.5vh 1.5vh;
        font-weight: 600; 
        font-size: 1.6vh;
    }

    .mensajeError i {
        font-size: 1.5vh;
        padding-right: 1.5vh;
        display: inline;
        vertical-align:middle;
    }

    .mensajeOk {
        display: flex;
        flex-direction: row;
        color: green;
        padding: 1.5vh 1.5vh;
        font-weight: 600; 
        font-size: 1.6vh;
    }

    .mensajeOk i {
        font-size: 1.5vh;
        padding-right: 1.5vh;
        display: inline;
        vertical-align:middle;
    }

    .box-menu-navegacion {
        width: 50%;
        align-self: center;
    }

    .menu-navegacion {  
        margin: 0;
        list-style: none;
        padding: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .item-menu-link {
        text-transform: uppercase;
        font-weight: 600;
        font-size: 1.8vh;
        color: white;
        transition: .3s linear;
        padding: 1.8vh 1vh;
        display: inline-block;
    }

    .item-menu-sub-menu {
        position: relative;
    }

    .sub-menu {
        position: absolute;
        top: 10.5vh;
        left: 0;
        width: 20vh;
        background-color: #a3185b;
        transform: scaley(0);
        transform-origin: top;
        transition: transform .3s linear;
    }

    .sub-menu .item-menu-link {
        padding: .8vh;
    }

    .item-menu-sub-menu:hover .sub-menu {
        transform: scaley(1);
    }

    .boto-menu {
        display: none;
    }

    .item-menu-link i {
        padding-right: 1vh;
    }

    main .containerPrincipal{
        display: flex;
        flex-direction: column;
		align-items: stretch;
        box-shadow: black 0px 0px 5vh;
        background-color: white;
		margin: 0vh 5vh;
		min-width: 30vh;
    }

    main .containerPrincipal h1{
        font-size: 2.5vh;
        line-height: 1.2;
        text-align: left;
        font-family: "Ubuntu", sans-serif;
        padding: 2vh 1vh;
    }

    main .containerPrincipal i{
        padding: 0vh 1vh;
    }

    main .containerPrincipal p{
        font-size: 1.8vh;
	    line-height: 1.2;
        text-align: left;
        font-family: "Lora", sans-serif;
        padding: 2vh;
    }

    main .containerPrincipal .user-icon{
        font-size: 1.5vh;
	    line-height: 1.2;
        text-align: center;
        font-family: "Lora", sans-serif;
        padding: 1vh;
		color: #00ef81;
    }

    main .containerEntrada .grid{
        font-size: 1.8vh;
        font-weight: normal;
        border: none;
        border-collapse: collapse;
        width: 100%;
        max-width: 100%;
        white-space: nowrap;
    }

    main .containerEntrada .grid td, .main .containerEntrada .grid th {
        text-align: center;
        padding: 0.5vh;
    }

    main .containerEntrada .grid td {
        border: 0.1vh solid #5f0e35;
        font-size: 1.5vh;
    }

    main .containerEntrada .grid thead th {
        color: white;
        background: #a3185b;
        border: 0.1vh solid #5f0e35;
    }


    main .containerEntrada .grid thead th:nth-child(odd) {
        color: white;
        background: #a3185b;
        border: 0.1vh solid #5f0e35;
    }

    main .containerEntrada .grid tr:nth-child(even) {
        background: #F8F8F8;
    }

}
/*border: 0.1rem solid red;*/