/*
Style Name:     ttab.css
Description:    Stili per tabelle responsive senza json per sito terna.it
Author:         NS12 - dream-team - rcs 
Version:        1.2
Date:           28.07.2020
Modified:      	18.12.2020
*/

/* =============================================================
>> TABLE OF CONTENTS:
================================================================

1.0 - Deck
2.0 - Box
3.0 - Table
4.0 - Header / Row
5.0 - Cell
6.0 - Text style
7.0 - Shame
--------------------------------------------------------------*/

/* 
>> 1.0 - Deck
   since: ver 1.0
==============================================================*/

/* .ttab-deck {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin-bottom: 1rem;
}

@media only screen and (min-width: 48em) {
    .ttab-deck {
        -ms-flex-direction: row;
        flex-direction: row;
    }
} */

/* 
>> 2.0 - Box
   since: ver 1.0
==============================================================*/

.ttab-box {
    /* -ms-flex: 1;
    flex: 1; */
    position: relative;
    margin-bottom: 1rem;
}

@media only screen and (min-width: 48em) {
    .ttab-box {
        -ms-flex: 1 0 auto;
        flex: 1 0;
        flex-basis: auto;
    }

    .ttab-box:first-child {
        -ms-flex: 1 0 auto;
        flex: 1 0;
        flex-basis: auto;
    }
}

/* 
>> 3.0 - Table
   since: ver 1.0
==============================================================*/

.ttab-table {
    position: relative;
    display: table;
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

.ttab-header,
.ttab-subheader,
.ttab-row {
    display: table-row;
}

.ttab-cell {
    display: table-cell;
}

/* 
>> 4.0 - Header / Row
   since: ver 1.0
==============================================================*/
 
/* .ttab-header {
    height: 40px;
    max-height: 40px;
} */

/* 
>> 5.0 - Cell
   since: ver 1.0
==============================================================*/

.ttab-cell {
    text-align: center;
    padding: 5px 5px;
}

.ttab-header .ttab-cell:first-child,
.ttab-subheader .ttab-cell:first-child,
.ttab-row .ttab-cell:first-child {
    min-width: 100px;
    text-align: left;    
}

.ttab-header .ttab-cell {
    padding: 5px;
}

@media only screen and (min-width: 48em) {
    .ttab-box:not(:first-child) .ttab-row .ttab-cell:first-child {
        display: none;
    }
}

/* 
>> 6.0 - Border
   since: ver 1.0
==============================================================*/

.ttab-table.brd-white .ttab-row {
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

/* .ttab-table                       { border-color: #d4dff1; } */
.ttab-table.no-brd .ttab-row         { border-color: transparent; }
.ttab-table.brd-blue .ttab-row       { border-color: #295eb9; }
.ttab-table.brd-light-blue .ttab-row { border-color: #8898ca; }
.ttab-table.brd-black .ttab-row      { border-color: #000000; }
.ttab-table.brd-navy .ttab-row       { border-color: #0A3C82; }
.ttab-table.brd-green .ttab-row      { border-color: #1E5A32; }
.ttab-table.brd-red .ttab-row        { border-color: #8C1432; }
.ttab-table.brd-orange .ttab-row     { border-color: #C85000; }
.ttab-table.brd-ocra .ttab-row       { border-color: #D78C00; }
.ttab-table.brd-white .ttab-row      { border-color: #ffffff; }

/* 
>> 7.0 - Striped tables
   since: ver 1.0
==============================================================*/

.ttab-striped .ttab-row:nth-child(even) {
    background-color: #fff;
}

.ttab-striped .ttab-row {
    border: none!important;
}

/* 
>> 8.0 - Dimensioni celle
   since: ver 1.0
==============================================================*/

.ttab-cell.col-10 { width: 10%; }
.ttab-cell.col-15 { width: 15%; }
.ttab-cell.col-20 { width: 20%; }
.ttab-cell.col-25 { width: 25%; }
.ttab-cell.col-30 { width: 30%; }
.ttab-cell.col-33 { width: 33%; }
.ttab-cell.col-35 { width: 35%; }
.ttab-cell.col-40 { width: 40%; }
.ttab-cell.col-50 { width: 50%; }
.ttab-cell.col-60 { width: 60%; }
.ttab-cell.col-70 { width: 70%; }

/* 
>> 9.0 - ColSpan
   since: ver 1.0
==============================================================*/

.tcolspan {
    position: relative;
}

.tcolspan span {
    position: absolute;
    /* bottom: 9px; */
    text-align: center;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 50%;
    transform: translateY(-50%);
}

/* 
>> 10.0 - Text style
   since: ver 1.0
==============================================================*/

.ttab-cell {
    font-family: Roboto,sans-serif;
    font-size: 0.875rem;
    text-align: center;
}

.ttab-header .ttab-cell,
.ttab-subheader .ttab-cell {
    font-family: Oswald,sans-serif;
    font-weight: 500;
}

@media only screen and (min-width: 48em) {
    .ttab-cell  { font-size: 1rem; } /* 16px default testo */
}

/* 
>> 11.0 - Decor
   since: ver 1.0
==============================================================*/

.decor-triangle {    
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    align-items: stretch;
    /* height: 100%; */
}

.decor-triangle .decor-txt-top {
    
    min-width: 0;
    max-width: 100%;
    /* height: 50%; */
    border: 1px solid #295eb9;
    padding: 5px 5px;
    line-height: 1.2;
}

.decor-triangle .decor-txt {
    flex: 1 0 auto;
    /* flex-shrink: 0; */
    min-width: 0;
    max-width: 100%;
    /* height: 50%; */
    border-left: 1px solid #295eb9;
    border-top: 1px solid #295eb9;
    border-right: 1px solid #295eb9;
    padding: 10px 5px;
    
    /* margin-bottom: 20px; */
}

.decor-triangle img {    
    width: 100%;
    max-width: 100%;
    height: 21px;
}

.decor-arrow-down {
    position: relative;
    width: 100%;
    height: 20px;
    top: -2px;
}

.decor-arrow-down:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 20px;
}

.decor-arrow-down:before {
    background: #295eb9;
    -webkit-clip-path: polygon(100% 2px, 50% 20px, 0 2px, 0 0, 50% 18px, 100% 0);
    clip-path: polygon(100% 2px, 50% 20px, 0 2px, 0 0, 50% 18px, 100% 0);
}



.decor-triangle .decor-arrow-a {
    position: absolute;
    bottom: -5px;
    height: 25px;
    width: 100%;
    content: '';
    background: #295eb9;
    -webkit-clip-path: polygon(50% 20px, 100% 10%, 100% 0, 0 0, 0 10%);
    clip-path: polygon(50% 20px, 100% 10%, 100% 0, 0 0, 0 10%);
}

.decor-triangle .decor-arrow-b {
    position: absolute;
    bottom: 4px;
    height: 17px;
    width: 100%;
    content: '';
    background: #fff;
    -webkit-clip-path: polygon(50% 17px, 0 0, 100% 0);
    clip-path: polygon(50% 17px, 0 0, 100% 0);
}

.decor-triangle .decor-triangle-down {
    line-height: 1;
    /* padding-top: 5px;
    margin-top: 8px; */
    width: 100%;
    height: 50%;
    -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.decor-triangle .no-brd         { border-color: transparent; }
.decor-triangle .brd-blue       { border-color: #295eb9; }
.decor-triangle .brd-light-blue { border-color: #8898ca; }
.decor-triangle .brd-black      { border-color: #000000; }
.decor-triangle .brd-navy       { border-color: #0A3C82; }
.decor-triangle .brd-green      { border-color: #1E5A32; }
.decor-triangle .brd-red        { border-color: #8C1432; }
.decor-triangle .brd-orange     { border-color: #C85000; }
.decor-triangle .brd-ocra       { border-color: #D78C00; }
.decor-triangle .brd-white      { border-color: #ffffff; }

.decor-dashed {
    position: absolute;
    border: 2px dashed transparent;
    height: 101%;
    top: 0;
}

.decor-dashed.col-10 { width: 10%; }
.decor-dashed.col-15 { width: 15%; }
.decor-dashed.col-20 { width: 20%; }
.decor-dashed.col-25 { width: 25%; }
.decor-dashed.col-30 { width: 30%; }
.decor-dashed.col-33 { width: 33%; }
.decor-dashed.col-35 { width: 35%; }
.decor-dashed.col-40 { width: 40%; }
.decor-dashed.col-50 { width: 50%; }
.decor-dashed.col-60 { width: 60%; }
.decor-dashed.col-70 { width: 70%; }

.decor-dashed.left-10 { left: 10%; }
.decor-dashed.left-15 { left: 15%; }
.decor-dashed.left-20 { left: 20%; }
.decor-dashed.left-25 { left: 25%; }
.decor-dashed.left-30 { left: 30%; }
.decor-dashed.left-33 { left: 33%; }
.decor-dashed.left-35 { left: 35%; }
.decor-dashed.left-40 { left: 40%; }
.decor-dashed.left-50 { left: 50%; }
.decor-dashed.left-60 { left: 60%; }
.decor-dashed.left-70 { left: 70%; }

.decor-dashed.no-brd         { border-color: transparent; }
.decor-dashed.brd-blue       { border-color: #295eb9; }
.decor-dashed.brd-light-blue { border-color: #8898ca; }
.decor-dashed.brd-black      { border-color: #000000; }
.decor-dashed.brd-navy       { border-color: #0A3C82; }
.decor-dashed.brd-green      { border-color: #1E5A32; }
.decor-dashed.brd-red        { border-color: #8C1432; }
.decor-dashed.brd-orange     { border-color: #C85000; }
.decor-dashed.brd-ocra       { border-color: #D78C00; }
.decor-dashed.brd-white      { border-color: #ffffff; }

/* 
>> 12.0 - Note
   since: ver 1.0
==============================================================*/

.ttab-note {
    
    border-top: 1px solid grey;
}

.ttab-note p {
    color: grey;
    line-height: 1.4;
}


/* 
>> 13.0 - Shame
   since: ver 1.0
==============================================================*/

.ttab-box {
    position: relative;
}

@media only screen and (min-width: 48em) {
    .ttab-box:not(:first-child) {
        left: -1px;
    }
}

/* 
>> 14.0 - Print
   since: ver 1.0
==============================================================*/

@media print {
    .ttab-table.brd-white .ttab-row  { border-color: grey; }
}