﻿.slb-modal {
    position:fixed;
    top:0; left:0;
    z-index:9999;
    width:100%;
    height:100%;
    overflow:auto;
    background: rgba(0,0,0,0.9);
}
.slb-modal::before,
.slb-modal::after{
    content:"";
    width:100%;
    height:0px;
    display:block;
}
.slb-modal .slb-modal-wrapper {
    width:100%;
    margin:auto;
    background:white;
    padding:10px;
}
.slb-modal .slb-modal-wrapper .close-modal{
    width:100%;
    text-align:right;
}
.slb-modal .slb-modal-wrapper .close-modal a{
    cursor:pointer;
}

.slb-modal .slb-modal-wrapper h1{
    font-size: 20px;
    font-weight:400;
    margin:0;
    padding-bottom:35px;
}
.slb-modal .slb-modal-wrapper h2{
    font-size: 16px;
    font-weight:400;
    margin:0;
    padding-bottom:10px;
    padding-left:20px;
}


/* TABLE (with slick) */
.slb-modal .slb-modal-wrapper .slb-modal-table{
    position:relative;
    width:100%;
    display:flex;
}
.slb-modal .slb-modal-wrapper .slb-modal-table .col-label,
.slb-modal .slb-modal-wrapper .slb-modal-table .col-data{
    height:65px;
    display:flex;
    align-items:center;
    border-bottom:1px solid #eee;
    padding:0px 20px;
    font-size:16px;
}
.slb-modal .slb-modal-wrapper .slb-modal-table .col-label{
    font-weight:600;
    text-align:left;
}
.slb-modal .slb-modal-wrapper .slb-modal-table .col-data{
    text-align:center;
}
.slb-modal .slb-modal-wrapper .slb-modal-table .col-data.col-important{
    font-weight:600;
    font-size:0.9em;
}
.slb-modal .slb-modal-wrapper .slb-modal-table .col-label:first-child,
.slb-modal .slb-modal-wrapper .slb-modal-table .col-data:first-child{
    height:40px;
}
.slb-modal .slb-modal-wrapper .slb-modal-table .col-label:nth-child(-n+2),
.slb-modal .slb-modal-wrapper .slb-modal-table .col-data:nth-child(-n+2){
    border-bottom:1px solid #ddd;
}
.slb-modal .slb-modal-wrapper .slb-modal-table .col-label:last-child,
.slb-modal .slb-modal-wrapper .slb-modal-table .col-data:last-child{
    border-bottom:1px solid #ddd;
}
.slb-modal .slb-modal-wrapper .slb-modal-table .col-data.col-data-img img{
    height:16px;
}

.slb-modal .slb-modal-wrapper .slb-modal-table > .slb-modal-table-slick{
    display:flex;
    flex-wrap:wrap;
    width:100%;
}
/* Breakpoints */
@media (max-width:991px){
    .slb-modal .slb-modal-wrapper .slb-modal-table > .slb-modal-table-col{ 
        position:absolute;
        top:0; left:0;
        z-index:1;
        background:white;
        pointer-events:none;
    }
    .slb-modal .slb-modal-wrapper .slb-modal-table > .slb-modal-table-slick .slb-modal-table-col > *{ 
        padding-left:60%;
        padding-right:0;
    }
}
@media (min-width:992px){
    .slb-modal::before,
    .slb-modal::after{
        height:150px;
    }

    /* Width is 1/(num of items + 1) because it accounts for the first col */
    .slb-modal .slb-modal-wrapper .slb-modal-table[items="4"] > .slb-modal-table-col{ width:20%; }
    .slb-modal .slb-modal-wrapper .slb-modal-table[items="4"] > .slb-modal-table-slick{ width:80%; }
    .slb-modal .slb-modal-wrapper .slb-modal-table[items="4"] > .slb-modal-table-slick .slb-modal-table-col{ width:25%; }
}

.slb-modal .slb-modal-wrapper .slb-modal-table-info{
    padding-top:30px;
}

.slb-modal .slb-modal-wrapper .slb-modal-table-info p{
    margin-bottom:10px;
    line-height:1.2em;
}
.slb-modal .slb-modal-wrapper .slb-modal-table-info ul{
    list-style:none;
    padding:0;
}
.slb-modal .slb-modal-wrapper .slb-modal-table-info ul li{
    padding-bottom:5px;
}



.slb-modal .slb-modal-wrapper .slb-modal-info ol{
    list-style:none;
    padding:0;
}

.slb-modal .slb-modal-wrapper .slb-modal-info ol li{
    padding:8px 0px;
}

@media (min-width:992px){
    .slb-modal .slb-modal-wrapper {
        width:70%;
        padding:15px 20px;
    }
}