@media only screen and (max-width: 1000px){

    #tblcode { width: 100% !important; }
    #tblcode .span_codebox { font-size: 15px !important; margin-left: -23px !important; }

    .table-reponsive table,.table-reponsive thead,.table-reponsive tbody,.table-reponsive tr,.table-reponsive th,.table-reponsive td{
        display:block;
    }
    .table-reponsive .tblhead{
        display:none;
    }
    .table-reponsive td{padding-left:42%!important;
        position:relative;
        margin-top: -1px;
        min-height: 70px;
        width:100%;
    }
    
    .table-reponsive .codebox{
        padding-left:51%!important;
    }
    
    .table-reponsive td::before{
        padding: 10px;
        content: attr(data-label);
        position: absolute;
        top:0;
        left:0;
        bottom:0;
        width:40%;
        background-color: #f8f8f8;
        color:#6d6d6d;
        display: flex;
        align-items:center;
        font-size:16px;
        border-left: 2px solid #DDD;
        line-height: 1em;
        margin-left: -1px;
        letter-spacing: normal;
    }
    .table-reponsive .listcodesbox .codebox .span_codebox{
        margin: 0px!important;
    }
    .table-reponsive .listcodesbox .codebox .span_codebox:nth-child(1){
        margin-top:4px!important;
    }
    .listcodesbox .codebox .span_codebox:nth-child(2){
        margin-top:4px!important;
    }
    
    .table-reponsive .listcodesbox{
        margin-bottom: 30px;
    }

    .table-reponsive .listcodesbox td{
         font-size: 16px!important;
    }
    
    .table-reponsive .listcodesbox td:not(.codebox){
        padding: 0px;
        align-items: center!important;
        display: flex!important;
        justify-content: center;
    }
}

    #tblcode th.tblhead { font-size: 0.8em !important; }
    #tblcode .listcodesbox td { font-size: 1em !important; }

.activite_dispo{
    color:#f49f6e;
    font-size:14px;
    cursor: pointer;
    text-decoration: none;
    display:block;
    padding-bottom:6px;
}

.listcodesbox .codebox .span_codebox:nth-child(1){
    margin-top: 4px;
    margin-bottom: 6px;
    display: inline-block;
}

.listcodesbox .codebox .span_codebox:nth-child(2){
    margin-bottom: 6px;
    display: inline-block;
}

.dashicons-tbl{
    font-size:30px !important;
    width: 30px !important;
    height:30px !important;
    color:#00FF00 !important;
}

.tablecodesbox{
    border-collapse: collapse;
    margin: 20px 1%;
    background-color: #fff;
}

.tablecodesbox.striped > tbody > :nth-child(2n+1){
    background-color: #f2f2f2;
}

#titlecodesbox{
    font-size: 24px;
    font-weight: 400;
    margin: 24px 1.5%;
    border-collapse: collapse;
}

.statut_code #namebox{
    width: 120px;
}

.tblhead{
	font-size:1em;
	padding: 0.6em 0.6em;
	text-align: center;
	vertical-align: middle;
    border:none;
	border-top: 2px solid #ddd;
}

.tblhead:not(:last-child){
    border-right: 2px solid #EEE;
}

.tblhead:first-child{
     border-left: 2px solid #DDD;
}

.tblhead:last-child{
     border-right: 2px solid #DDD;
}

.listcodesbox td{
    font-size: 16px;
    padding: 0.4em 1em;
    text-align: center;
    vertical-align: middle;
    color: #34495e;
    font-weight: 600;
    border: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
    line-height: 1.4em;
}

.listcodesbox .activate_code{
    background-color: #f49f6e;
    border-color: #f49f6e;
    color: #FFF;
    padding: 0.4em 0.8em;
}

.listcodesbox .codebox{
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    letter-spacing: .1rem;
    padding-left: 14px;
    color: #283593;
}

/* loader bars */
.loader-bars:before,
.loader-bars:after,
.loader-bars span{
    content:"";
    display:block;
    position:absolute;
    left:0;
    top:0;
    width:6px;
    height:14px;
    background-color:#f49f6e;
    -webkit-animation: grow 1s linear infinite;
    animation:grow 1s linear infinite;
}
.loader-bars:after{
    left:10px;
    -webkit-animation-delay: -0.6666s;
    animation-delay: -0.3333s;
}
.loader-bars span{
    left:20px;
    top:0;
    -webkit-animation-delay: -0.3333s;
    animation-delay: -0.6666s;
}

@keyframes grow{
    0% {transform: scaleY(0); opacity:0;}
    50% {transform: scaleY(1); opacity:1;}
    100% {transform: scaleY(0); opacity:0;}
}
.displayloader{
    bottom:40px;
    position:relative;
    left:17%;
    margin:6px;
    display: block;
    margin: 20px 0px;
}