:root{
    --header_backcolor: #76E41E
}

/************************************************************************************************************************************************************ 
*
######   ##        #######  ########     ###    ##          ######## ########     ###    ##     ## ######## ##      ##  #######  ########  ##    ##  ######  
##    ##  ##       ##     ## ##     ##   ## ##   ##          ##       ##     ##   ## ##   ###   ### ##       ##  ##  ## ##     ## ##     ## ##   ##  ##    ## 
##        ##       ##     ## ##     ##  ##   ##  ##          ##       ##     ##  ##   ##  #### #### ##       ##  ##  ## ##     ## ##     ## ##  ##   ##       
##   #### ##       ##     ## ########  ##     ## ##          ######   ########  ##     ## ## ### ## ######   ##  ##  ## ##     ## ########  #####     ######  
##    ##  ##       ##     ## ##     ## ######### ##          ##       ##   ##   ######### ##     ## ##       ##  ##  ## ##     ## ##   ##   ##  ##         ## 
##    ##  ##       ##     ## ##     ## ##     ## ##          ##       ##    ##  ##     ## ##     ## ##       ##  ##  ## ##     ## ##    ##  ##   ##  ##    ## 
 ######   ########  #######  ########  ##     ## ########    ##       ##     ## ##     ## ##     ## ########  ###  ###   #######  ##     ## ##    ##  ######
*
****************************************************************************************************************************************************  ********/

@media (max-width: 611px) { 
    #global{
        grid-template-columns: 0 100% 0;
    }
}

@media (min-width: 612px){
    #global{
        grid-template-columns: auto 612px auto;
    }
}

@media (min-width: 924px){
    #global{
        grid-template-columns: auto 924px auto;
    }
}


@media (min-width: 1236px){
    #global{
        grid-template-columns: auto 1236px auto;
    }
}

*{
    margin: 0;
    padding: 0;
}


body{
    margin: 0;
    padding: 0;
    background-image: url('../imgs/background/travel_pattern.jpg');
    background-repeat: repeat;
}



#global{
    /* height: calc(100vh - 5px); */
    display: grid;
    
    grid-template-areas: 'leftMargin contentColumn rightMargin';
    
}

#main{
    position: relative;
}




#leftMargin{
    grid-area: 'leftMargin';
}

#contentColumn{
    grid-area: 'contentColumn';
}

#rightMargin{
    grid-area: 'rightMargin';
}



/*END OF GLOBAL FRAMEWORKS*/

/***********************************************************
*
##     ## ########    ###    ########  ######## ########  
##     ## ##         ## ##   ##     ## ##       ##     ## 
##     ## ##        ##   ##  ##     ## ##       ##     ## 
######### ######   ##     ## ##     ## ######   ########  
##     ## ##       ######### ##     ## ##       ##   ##   
##     ## ##       ##     ## ##     ## ##       ##    ##  
##     ## ######## ##     ## ########  ######## ##     ##
*
***********************************************************/
.header{
    color: white;
    background-color: var(--header_backcolor);
    display: grid;
    
}

@media (max-width:600px){
    .header{
        grid-template-columns: 100%;
        grid-template-rows: auto auto auto;
        grid-template-areas: 
            "header_logo"
            "header_title"
            "header_client";

    }

    #header_logo{
        margin: 0 10%;
    }
}

@media (min-width: 600px){
    .header{
        grid-template-columns: 25% auto 25%;
        grid-template-areas: 'header_logo header_title header_client';
    }
}


#header_logo{
    grid-area: 'header_logo';
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#header_title{
    display: flex;
    grid-area: 'header_title';
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0px 25px;
}

#header_client{
    grid-area: header_client;
    display: flex;
    justify-content: right; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
}

#frm_clientarea *{
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */ 
}

#frm_clientarea div{
    margin: 8px;
}

#header_client .unloged{
    margin-right: 25px; 
}

#frm_clientarea{
    display: grid;
    grid-template-columns: min-content min-content;
    grid-template-rows: min-content min-content;
    grid-template-areas: "frm_clientarea_title frm_clientarea_title"
                         "frm_clientarea_buttons frm_clientarea_menu";
}

#frm_clientarea_title{
    border-bottom: 2px solid white;
    grid-area: frm_clientarea_title;
    margin-bottom: 0 !important;
}

#frm_clientarea_buttons{
    grid-area: frm_clientarea_buttons;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    align-content: center;
}

#frm_clientarea_menu{
    grid-area: frm_clientarea_menu;
}

#frm_clientarea button{
    background: none;
    color: white;
    border: none;
}

#frm_clientarea #but_Signup{
    cursor: pointer;
}

#frm_clientarea #but_login{
   color: var(--header_backcolor);
   background-color: white;
   border: 2px solid white;
   border-radius: 20px;
   padding: 5px 10px;
   cursor: pointer;
}

#frm_clientarea_menu img{
    width: 40px;
}


.logged{
    min-width: 200px;
    display: none; /* grid; */
    grid-template-columns: 70% auto;
        grid-template-rows: auto auto ;
        grid-template-areas: 
            "header_client_control_user header_client_control_user"
            "header_client_control_form header_client_control_menu";
    padding: 5px;
}

#header_client_control_user{
    grid-area: header_client_control_user;
    border-bottom: 1px solid white;
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

#header_client_control_user img{
    width: 40px;
}

#header_client_control_form{
    grid-area: header_client_control_form;
    cursor: pointer;
}

#header_client_control_menu{
    grid-area: header_client_control_menu;
    cursor: pointer;
}

#header_client_control_form button{
    background-color: white;
    color: var(--header_backcolor);
    border: 2px solid white;
    border-radius: 20px;
    padding: 5px 10px;
    margin-left: 15px;
    margin-top: 10px;
}

#header_client_control_menu img{
    width: 50px;
}


/*END HEADER*/

/**********************************************************
*
########  #######   #######  ######## ######## ########  
##       ##     ## ##     ##    ##    ##       ##     ## 
##       ##     ## ##     ##    ##    ##       ##     ## 
######   ##     ## ##     ##    ##    ######   ########  
##       ##     ## ##     ##    ##    ##       ##   ##   
##       ##     ## ##     ##    ##    ##       ##    ##  
##        #######   #######     ##    ######## ##     ##
*
**********************************************************/

.footer {
    position: relative;
    display: grid;
    color: white;
    background-color: #004850; /* mantém só a cor */
    overflow: hidden; /* para garantir que o ::before não ultrapasse */
    z-index: 0;
}

.footer::before {
    content: "";
    position: absolute;
    inset: 0; /* shorthand para top:0; right:0; bottom:0; left:0 */
    background: url(../imgs/background/bg-footer.svg) no-repeat left bottom;
    background-size: auto 100%;
    opacity: 0.3; /* controla a opacidade da imagem */
    pointer-events: none; /* garante que clique e interação passem para a .footer */
    z-index: 0;
}

.footer > *{
    position: relative;
    z-index: 1;
}



@media (max-width:600px){
    .footer{
        grid-template-columns: 31% auto;
        grid-template-rows: auto auto auto;
        grid-template-areas: 
            "footer_ans footer_data"
            "footer_nav footer_nav"
            "footer_contact footer_contact";

    }

    #header_logo{
        margin: 0 10%;
    }
}

@media (min-width: 600px){
    .footer{
        grid-template-columns:23% 26% auto 13% ;
        grid-template-areas: 'footer_ans footer_data footer_nav footer_contact';
    }
}



#footer_ans{
    grid-area: footer_ans;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */ 
    gap: 15px;
}



#footer_ans img{
    width: 90%;
    max-width: 200px;
}

#footer_data{
    grid-area: footer_data;
    padding: 15px 5px;
}

#footer_nav{
    grid-area: footer_nav;

    padding: 8px;
}

#footer_nav #Nav_title{
    border-bottom: 2px solid white;
}

#footer_nav #Nav_title h1{
    margin-left: 8px;
}

#awardsDisplay{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

#awardsDisplay img{
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}



@media(max-width:600px){
    #footer_nav ul{
        column-count: 2;
        column-gap: 8px;
    }
    #footer_nav li{
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        margin-top: 5px;
    }
}

#footer_nav li a:hover{
    color: #40E0D0;
}

#footer_contact{
    grid-area: footer_contact;
    display: flex;
    flex-direction: column; /* Organiza os itens em uma única coluna */
    justify-content: center; /* Centraliza verticalmente */
    align-items: center; /* Centraliza horizontalmente */    
    gap: 10px;
}

#footer_contact div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


@media (max-width:600px){
    #footer_contact{
        align-items: flex-end;
        padding-right: 30px;
    }
}


#footer_contact_icon, #footer_DPO_icon{
    width: 75px;
    cursor: pointer;
}

#footer_contact h1{
    margin: 5px 0px;
    text-align: center;

}

@media (max-width: 611px) { 
    .shield_f{
        width: 70px;
        border-radius: 10px;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    }
    #footer_contact{
        flex-direction: row;
        justify-content: flex-end;
        gap: 20px;
    }
}

@media (min-width: 612px) and (max-width:923px){
    #footer_nav{
        width: 180px;
    }

    #footer_contact{
        padding-right: 10px;
    }

    .shield_f{
        width: 50px;
        border-radius: 10px;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    }
}

@media (min-width: 924px) and (max-width:1235px){
    .shield_f{
        width: 70px;
        border-radius: 15px;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    }
}

@media (min-width: 1236px){
    .shield_f{
        width: 100px;
        border-radius: 30px;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    }
}

/*END FOOTER*/

/****************************************************
*
######  ####  ######   ##    ## ##     ## ########  
##    ##  ##  ##    ##  ###   ## ##     ## ##     ## 
##        ##  ##        ####  ## ##     ## ##     ## 
 ######   ##  ##   #### ## ## ## ##     ## ########  
      ##  ##  ##    ##  ##  #### ##     ## ##        
##    ##  ##  ##    ##  ##   ### ##     ## ##        
 ######  ####  ######   ##    ##  #######  ##
*
*****************************************************/

.signupOverlay{
    display: none;
    /*display: flex;*/
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    flex-direction: row;
    justify-content: center;
}

.signupOverlay.active{
    display: flex;
}

#signupContainner{
    width: 500px;
    height: auto;
    background-color: #FAFFF3;
}

#signupTitle{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align:  center;
}

#sigupIcon{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

#formSignup{
    display: flex;
    flex-direction: column;
    padding: 20px;
}

#formSignup label{
    color: #004850;
    font-weight: bolder;
    font-size: 0.9em;
    margin-bottom: 2px;
}

#formSignup input{
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid white;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    font-size: 1em;
    padding: 8px 10px;
}

#formSignupPassLineDiv{
    display: flex;
    flex-direction:  row;
}

#formSignupInfoPass{
    height: 15px;
    width: 15px;
}

#formPassword1, #formPassword2{
    font-size: 2em !important;
    padding: 0px 10px !important;
}

#formSignup_buttons{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;

}

#formSignup_buttons > img{
    width: 55px;
    align-self: center;
}

#formButtonSignup{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 3px;
    border-radius: 20px;
    width: 130px;
    align-self: flex-end;
    border: 1px solid white;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    background-color: white;

}

#formButtonSignup img{
    height: 30px;   
    margin: 0;
}

#formButtonSignup p{
    color: #004850;
    font-weight: bold;
    font-size: 19px;
    margin: 0;
    cursor: pointer;   
}

#alerts div{
    display: none;
    /* display: flex; */
    flex-direction: row;
    align-items: center;
    padding: 20px;
    gap: 15px;
}

#alerts div img{
    height: 50px;
}

#alerts div p{
    color: #004850;
    font-size: 1.1em;
    font-weight: bolder;
}

@media (max-width: 611px) { 
    #signupContainner{
        width: 380px;
    }

    #formSignup{
        padding: 20px 5px;
    }

    #formSignup_form{
        padding: 20px 0;
    }
}

@media (min-width: 612px) and (max-width:923px){
    
}

@media (min-width: 924px) and (max-width:1235px){
    
}


@media (min-width: 1236px){
    
}

/* END SIGNUP */


/******************************************
*
##        #######   ######   #### ##    ## 
##       ##     ## ##    ##   ##  ###   ## 
##       ##     ## ##         ##  ####  ## 
##       ##     ## ##   ####  ##  ## ## ## 
##       ##     ## ##    ##   ##  ##  #### 
##       ##     ## ##    ##   ##  ##   ### 
########  #######   ######   #### ##    ##
*
*******************************************/

.loginOverlay{
    display: none;
    /*display: flex;*/
    position: absolute;
    top:0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    flex-direction: row;
    justify-content: center;
}

.loginOverlay.active{
    display: flex;
}

#loginContainner{
    width: 500px;
    background-color: #FAFFF3;
}

#loginTitle{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#loginIcon{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

#formLogin, #formLogin_form{
    display: flex;
    flex-direction: column;
    padding: 20px;
}

#formLogin label{
    color: #004850;
    font-weight: bolder;
    font-size: 0.9em;
    margin-bottom: 2px;
}

#formLogin input{
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid white;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    font-size: 1em;
    padding: 8px 10px;
}

#formPassword{
    font-size: 2em !important;
    padding: 0px 10px !important;
}

#formLogin_buttons{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;

}

#formLogin_buttons > img{
    width: 55px;
    align-self: center;
}

#formButtonLogin{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 3px;
    border-radius: 20px;
    width: 130px;
    align-self: flex-end;
    border: 1px solid white;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    background-color: white;
    cursor: pointer;
}

#formButtonLogin img{
    height: 30px;   
    margin: 0;
}

#formButtonLogin p{
    color: #004850;
    font-weight: bold;
    font-size: 19px;
    margin: 0;   
}

#loginAlerts div{
    display: none;
    /* display: flex; */
    flex-direction: row;
    align-items: center;
    padding: 20px;
    gap: 15px;
}

#loginAlerts div img{
    height: 50px;
}

#loginAlerts div p{
    color: #004850;
    font-size: 1.1em;
    font-weight: bolder;
}


@media (max-width: 611px) { 
    #loginContainner{
        width: 380px;
    }

    #formLogin{
        padding: 20px 5px;
    }

    #formLogin_form{
        padding: 20px 0;
    }
}

@media (min-width: 612px) and (max-width:923px){
    
}

@media (min-width: 924px) and (max-width:1235px){
    
}


@media (min-width: 1236px){
    
}


/* END LOGIN */



/************************************************************************************
*
#######  ##      ## ##    ## ######## ########   ######  ##     ## #### ########  
##     ## ##  ##  ## ###   ## ##       ##     ## ##    ## ##     ##  ##  ##     ## 
##     ## ##  ##  ## ####  ## ##       ##     ## ##       ##     ##  ##  ##     ## 
##     ## ##  ##  ## ## ## ## ######   ########   ######  #########  ##  ########  
##     ## ##  ##  ## ##  #### ##       ##   ##         ## ##     ##  ##  ##        
##     ## ##  ##  ## ##   ### ##       ##    ##  ##    ## ##     ##  ##  ##        
 #######   ###  ###  ##    ## ######## ##     ##  ######  ##     ## #### ##
*
**********************************************************************************/

.ownershipOverlay{
    display: none;
    /*display: flex;*/
    position: absolute;
    top:0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    flex-direction: row;
    justify-content: center;
}

.ownershipOverlay.active{
    display: flex;
}

#ownershipContainer{
    width: 900px;
    background-color: #FAFFF3;
}

#ownershipTitle{
    display: grid;
    padding: 10px;
    gap: 15px;
}

#ownershipTitle_logo{
    grid-area: ownershipTitle_logo;
    justify-self: center;
    align-self: center;
}

#ownershipTitle_p1{
    grid-area: ownershipTitle_p1;
    justify-self: center;
    align-self: center;
    text-align: center;
}

#ownershipTitle_p2{
    grid-area: ownershipTitle_p2;

    justify-self: center;
    align-self: center;
    text-align: center;
}

#ownershipTitle_close{
    grid-area: ownershipTitle_close;
    width: 30px;
    cursor: pointer;
}

#ownershipBox{
    background-color: white;
    border-radius: 25px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    margin: 20px;
    padding: 15px;
}

#ownershipColumnsTitles{
    display: grid;    
}

#ownershipColumnsTitles p{
    text-align: center;
}

#ownershipColumnsTitlesSpace{
    grid-area: ownershipColumnsTitlesSpace;
}

#ownershipColumnsTitlesWhen{
    grid-area: ownershipColumnsTitlesWhen;
}

#ownershipColumnsTitlesWhere{
    grid-area: ownershipColumnsTitlesWhere;
}

#ownershipColumnsTitlesWho{
    grid-area: ownershipColumnsTitlesWho;
}

#ownershipColumnsTitlesPlan{
    grid-area: ownershipColumnsTitlesPlan;
}

#ownershipColumnsTitlesStatus{
    grid-area: ownershipColumnsTitlesStatus;
}


#ownershipOthersTitle{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.ownershipTable{
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
}

.ownershipTable input{
    appearance: none;
    width: 30px;
    height: 30px;
    border: 2px solid darkgreen;
    border-radius: 4px;
    cursor: pointer;
}

.ownershipTable input[type="checkbox"]:checked::before{
    content: "✔";
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--color_green2);
    font-size: 1.8em;
}

.ownershipItem{
    display: grid;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color_green2);
}

.ownershipCheck{
    grid-area: ownershipCheck;
    cursor: pointer;
}

.ownershipWhen{
    grid-area: ownershipWhen;
}

.ownershipWhere{
    grid-area: ownershipWhere;
}

.ownershipWho{
    grid-area: ownershipWho;
}

.ownershipPlan{
    grid-area: ownershipPlan;
}

.ownershipStatus{
    grid-area: ownershipStatus;
}


.date{
    white-space: nowrap;
}



#ownershipButtons{
    display: grid;
    padding: 20px 10px;
    margin-top: 10px;
    border-top: 2px solid var(--color_green2);
    gap: 10px;
}

#ownershipButtons button{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
}

#ownershipButtons button img{
    width: 32px;
}

#ownershipButtonUnselect{
    grid-area: ownershipButtonUnselect;
}

#ownershipButtonSelect{
    grid-area: ownershipButtonSelect;
}

#ownershipButtonTake{
    grid-area: ownershipButtonTake;
    
}

.ownershipButtonContainer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

@media (max-width: 611px) { 
    #ownershipTitle{
        grid-template-columns: auto min-content;
        grid-template-rows: min-content auto auto;
        grid-template-areas: "ownershipTitle_logo ownershipTitle_logo ownershipTitle_close"
                             "ownershipTitle_p1 ownershipTitle_p1 ownershipTitle_close"
                             "ownershipTitle_p2 ownershipTitle_p2 ownershipTitle_close";
    }

    #ownershipColumnsTitles{
        grid-template-columns:  40px auto;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas: "ownershipColumnsTitlesSpace ownershipColumnsTitlesWhen"
                             "ownershipColumnsTitlesSpace ownershipColumnsTitlesWhere"
                             "ownershipColumnsTitlesSpace ownershipColumnsTitlesWho"
                             "ownershipColumnsTitlesSpace ownershipColumnsTitlesPlan"
                             "ownershipColumnsTitlesSpace ownershipColumnsTitlesStatus";
    }

    #ownershipColumnsTitles p{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    .ownershipItem{
        grid-template-columns:  40px auto ;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas: "ownershipCheck ownershipWhen"
                             "ownershipCheck ownershipWhere"
                             "ownershipCheck ownershipWho"
                             "ownershipCheck ownershipPlan"
                             "ownershipCheck ownershipStatus";
    }

    #ownershipButtons{
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
        grid-template-areas: "ownershipButtonUnselect"
                             "ownershipButtonSelect"
                             "ownershipButtonTake";
    }
}

@media (min-width: 612px) and (max-width:923px){
    #ownershipTitle{
        grid-template-columns: auto min-content;
        grid-template-rows: min-content auto auto;
        grid-template-areas: "ownershipTitle_logo ownershipTitle_logo ownershipTitle_close"
                             "ownershipTitle_p1 ownershipTitle_p1 ownershipTitle_close"
                             "ownershipTitle_p2 ownershipTitle_p2 ownershipTitle_close";
    }

    #ownershipColumnsTitles{
        grid-template-columns:  7% auto auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: "ownershipColumnsTitlesSpace ownershipColumnsTitlesWhen ownershipColumnsTitlesStatus"
                             "ownershipColumnsTitlesSpace ownershipColumnsTitlesWhere ownershipColumnsTitlesStatus"
                             "ownershipColumnsTitlesSpace ownershipColumnsTitlesWho ownershipColumnsTitlesStatus"
                             "ownershipColumnsTitlesSpace ownershipColumnsTitlesPlan ownershipColumnsTitlesStatus";
    }

    #ownershipColumnsTitles p{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    #ownershipColumnsTitlesStatus{
        justify-self: center;
        align-items: flex-end;
    }

    .ownershipItem{
        grid-template-columns:  7% auto auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: "ownershipCheck ownershipWhen ownershipStatus"
                             "ownershipCheck ownershipWhere ownershipStatus"
                             "ownershipCheck ownershipWho ownershipStatus"
                             "ownershipCheck ownershipPlan ownershipStatus";
    }

    .ownershipStatus{
        justify-self: flex-start;
        align-self: flex-end;
    }

    #ownershipButtons{
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
        grid-template-areas: "ownershipButtonUnselect"
                             "ownershipButtonSelect"
                             "ownershipButtonTake";
    }
}

@media (min-width: 924px) and (max-width:1235px){
    #ownershipTitle{
        grid-template-columns: min-content auto min-content;
        grid-template-rows: auto auto;
        grid-template-areas: "ownershipTitle_logo ownershipTitle_p1 ownershipTitle_close"
                             "ownershipTitle_logo ownershipTitle_p2 ownershipTitle_close";
    }

    #ownershipColumnsTitles{
        grid-template-columns:  4% 20% 24% 23% 15% 12%;
        grid-template-rows: auto;
        grid-template-areas: "ownershipColumnsTitlesSpace ownershipColumnsTitlesWhen ownershipColumnsTitlesWhere ownershipColumnsTitlesWho ownershipColumnsTitlesPlan ownershipColumnsTitlesStatus";
    }

    .ownershipItem{
        grid-template-columns: 4% 20% 24% 20% 15% 10%;
        grid-template-rows: auto;
        grid-template-areas: "ownershipCheck ownershipWhen ownershipWhere ownershipWho ownershipPlan ownershipStatus";
    }

    #ownershipButtons{
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        grid-template-areas: "ownershipButtonUnselect ownershipButtonTake"
                             "ownershipButtonSelect ownershipButtonTake";
    }
}


@media (min-width: 1236px){
    #ownershipTitle{
        grid-template-columns: min-content auto min-content;
        grid-template-rows: auto auto;
        grid-template-areas: "ownershipTitle_logo ownershipTitle_p1 ownershipTitle_close"
                             "ownershipTitle_logo ownershipTitle_p2 ownershipTitle_close";
    }

    #ownershipColumnsTitles{
        grid-template-columns:  4% 20% 24% 23% 15% 12%;
        grid-template-rows: auto;
        grid-template-areas: "ownershipColumnsTitlesSpace ownershipColumnsTitlesWhen ownershipColumnsTitlesWhere ownershipColumnsTitlesWho ownershipColumnsTitlesPlan ownershipColumnsTitlesStatus";
    }

    .ownershipItem{
        grid-template-columns: 4% 20% 24% 20% 15% 10%;
        grid-template-rows: auto;
        grid-template-areas: "ownershipCheck ownershipWhen ownershipWhere ownershipWho ownershipPlan ownershipStatus";
    }

    #ownershipButtons{
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        grid-template-areas: "ownershipButtonUnselect ownershipButtonTake"
                             "ownershipButtonSelect ownershipButtonTake";
    }
}