/******************************************************************************
*                       T R I N I X   M E D I A 
*       F R O N T E N D    F R A M E W O R K    L I B R A R Y
*       T A B B E D   V I E W S   M O D U L E    S T Y L E S
*                      Development Version 0.0.1
*                        (c) Trinix Media 2023
*
*   Created by: Brandon Reilly on:    2023-09-15 @ 7:36AM
*   Updated by Brandon Reilly on:   2023-09-15 @7:37AM            
* 
******************************************************************************/

:root {
    --tabbed-view-max-horizontal-containers: 3;
    
}
#tabbed-view-background-container-id,
.TM-lib.tabbed-view-background-container {
    display: block;
    height: 100%;
    max-height: calc(100% - 5rem);
    max-width: 100vw;
    width: 100%;
    padding: 1.25rem 0;
    position: relative;
    margin: 0;
    /* overflow-y: auto; */
    /* overflow-x: hidden; */
    /* margin: 0 auto; */
    /* text-align: center; */
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    flex-direction: column;
    background: var(--TS_L-header__background--color);
}


.TM-lib.tabbed-view-background-container .tabbed-view {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 7rem minmax(10rem, 20rem);
    grid-gap: 1rem 0;
    position: absolute;
    height: calc(100% - 1rem);
    width: calc(100% - 1.5rem);
    overflow: auto;
    flex-direction: column;
    padding: 1.5rem.25rem;
    border-radius: .5rem;
    margin: 0;
    background: rgba(150, 150, 150, .95);
}


.TM-lib.tabbed-view-background-container .tabbed-view {
    display: grid;
    grid-template-columns: repeat(var(--tabbed-view-max-horizontal-containers), minmax(0, 1fr));
    grid-template-rows: 7rem minmax(10rem, 20rem);
    grid-gap: 1rem 0;
    position: absolute;
    /* overflow: auto; */
    /* padding: 1.5rem .25rem; */
    border-radius: .5rem;
    margin: 0;
    background: rgba(150, 150, 150, .95);
}


.TM-lib.tabbed-view-tab-button-container {
    display: block;
    height: 2.75rem;
    width: 100vw;
    height: 2.75rem;
    top: 3rem;
    /* margin-left: 2rem; */
    z-index: 1;
    position: sticky;
    max-width: 98vw;
    /* left: 1rem; */
    /* margin: auto; */
    margin: 0;
    padding-top: 1rem;
    /* padding: 0; */
    /* padding: .25rem 0 0 1rem; */
    /* transform: translate3d(-50%, 0, 0); */
    background: rgb(200, 200, 200);
}





div#tabbed-view-container-id {
    top: 0;
    margin: 0;
    padding: 0;
    margin-left: 0rem;
    z-index: 2;
}

/*div#form-container-id {
    display: inline-flex;
    height: 90%;
    width: 100%;
    position: relative;
    max-width:  85vw;
    top: 0;
    left: 50%;
    margin: auto;
    padding: .25rem 0 0 1rem;
    transform: translate3d(-50%, 0, 0);
    background: rgba(130, 130, 130, .666);
    flex-direction: column;
}*/

/*#tabbed-view-background-container-id,
.tabbed-view-background-container {
    max-width: 50rem;
    height: 56vh;
    left: 50%;
    top: 3.25rem;
    width: calc(100% - 0rem);
    background: none;
    border-radius: 0.25rem;
    border: .25rem rgba(6, 6, 6, .85);
    margin: 0 auto;
    padding: .25rem 0 0 1rem;
    display: grid;
    position: absolute;
    transform: translate3d(-50%, 0, 0);
    
}*/


#tabbed-view-background-container-id,
.TM-lib.tabbed-view-background-container {
    max-width: calc(100vw - 4rem);
    height: calc(100vh - 13.5rem);
    left: 50%;
    min-height: 30rem;
    /* top: 3.75rem; */
    /* overflow: auto; */
    width: 100%;
    background: none;
    border-radius: 0.25rem;
    border: .25rem rgba(6, 6, 6, .85);
    margin: 0 .25rem;
    /* padding: .25rem 0 0 1rem; */
    padding: 0;
    display: block;
    position: relative;
    transform: translate3d(-50%, 0, 0);
}



.tabbed-view-header {
    grid-column: 1 / span var(--tabbed-view-max-horizontal-containers);
}


.tabbed-view-full-width {
    grid-column: 1 / span var(--tabbed-view-max-horizontal-containers); 
}



/*.form-field-container {
    display: flex;
    height: 76vh;
    max-height: 76vh;
    position: relative;
    overflow-y: auto;
}*/

  
.TM-lib.tabbed-view.tabbed-view-focused {
/*     z-index: 1; */
    opacity: 1;
    transition: opacity 1s ease-in-out;
}
  
.TM-lib.tabbed-view.tabbed-view-hidden {
/*     z-index: -1; */
    opacity: 0;
    z-index: -1;
    transition: opacity 1s ease-in-out;
}

.tabbed-view h4 {
        margin: .25rem .25rem .5rem .25rem;
    }

button.tabbed-view-button {
    border-radius: .335rem;
    margin-right: .125rem;
    width: 8rem;
    height: 2.75rem;
    /* margin-left: .25rem; */
    border: .075rem solid rgba(6, 6, 6, .666);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: none;
    outline: none;
    z-index: -1;
    color: rgb(48, 48, 48);
    background: rgb(180, 180, 180);
}


button.tabbed-view-button.tab-focused {
    
    background: rgba(0, 175, 250, .666);
    background: rgba(150, 150, 150,1);
    border: .1rem solid rgb(6, 6, 6);
    border-bottom: none;
    color: rgb(0, 50, 0);
    font-weight: 700;
    transform: scale(1.1);
        
}
 

@media (max-width: 720px) {
    
    :root {
        /*     --summary-max-horizontal-containers: 3; */
        --tabbed-view-max-horizontal-containers: 1;
    }
    
    .TM-lib.tabbed-view-background-container {
      
        height: calc(100vh - 17.5rem);
        min-height: 15rem;

    }
    
    button.tabbed-view-button {
        width: 4.5rem;
        height:  2.0rem;
        padding: .075rem;
    /*     margin-left: .25rem; */
    }


    #tabbed-view-background-container-id, .TM-lib.tabbed-view-background-container {
        max-width: calc(100vw - 0rem);
        margin: 0;
        padding: 0;
    }

    .TM-lib.tabbed-view-background-container .tabbed-view {
        margin-left: .25rem;
        
        width: calc(100% - 1rem);
    }

    .TM-lib.tabbed-view-tab-button-container {
        top: 1rem;
        height: 2rem;
    }
    



}