@import '../../../../assets/scss/variables';
@import '../../../../assets/scss/mixins';

.ftm-table {

    table{
        th {

            background-color: #388ACC;
            color: white;
            border-style: none;
            padding: 1em 2em 1em 1em;
    
        }

        td{
            text-align: var(--txt-align);
            p{
                margin: unset;     
                width: 100%;
                box-sizing: border-box;           
            }        
        }
    
        tr:not(:first-child) td:nth-child(2) ul {
    
            @media (max-width: $breakpoint-sm) {
    
                padding-left: 0%;
    
            }
    
        }        
    }    

    &.scroll {

        @media (max-width: $breakpoint-sm) {
            width: 100%;
            box-sizing: border-box;
            overflow: hidden;
            overflow-x: scroll;
            display: block;
        }

        > table {
            min-width: 50%;

            @media (max-width: $breakpoint-sm) {
                td{
                    font-size: 16px;
                }
            }
        }  
    }

    &.vertical{
        >table{
            @media (max-width: $breakpoint-sm){                  
                thead {
                    display: none;

                    th{
                        text-align: center !important;
                    }
                }
                tr{
                  display:grid;
                  border-bottom:1px solid #000000;
                }
                

                td{        
                    /*text-align: center !important;*/
                    display: flex;
                    width: 100%;
                    min-width: 200px;
                    padding: 0px;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    align-content: center;
                    justify-content: flex-start;
                    align-items: center;       

                    &:before{
                        content: attr(data-header);
                        width: 100px;
                        min-width: 100px;
                        float: left;
                        background-color: var(--data-bg, #388ACC);
                        color: var(--data-txt-color, #ffffff);
                        padding: 10px 5px;
                        height: 100%;
                        text-align: center;
                    }


                    ul{
                        margin-left: 20px;
                        margin-bottom: 10px;
                        margin-top: 5px;
                        text-align: inherit;

                        li{
                            text-align: inherit;
                        }
                    }
                }
            }
        }
    }
}