/* STYLE SPECIFIQUE */

/*****************
	   1024px
******************/
@media (max-width: 1024px) {
    /**** TABLEAU DE BORD ****/
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* scroll fluide mobile */
    }
    /*.table-responsive table {*/
    /*    min-width: 700px; !* largeur mini pour forcer le scroll *!*/
    /*}*/
    /*.table-responsive-small {*/
    /*    overflow-x: auto;*/
    /*    -webkit-overflow-scrolling: touch; !* scroll fluide mobile *!*/
    /*}*/
    /*.table-responsive-small table {*/
    /*    min-width: 600px; !* largeur mini pour forcer le scroll *!*/
    /*}*/

    body .card-body {
        padding: 1.25rem;
    }
    body .lstick {
        margin-left: -20px;
    }

    body .btn_edit,
    body .btn_delete {
        height: 40px;
        width: 40px;
        min-height: 40px;
        min-width: 40px;
    }
    body .list-reponse__item .btn_delete {
        height: auto;
        width: 48px;
        min-height: 48px;
        min-width: 48px;
    }
}

/*****************
	   1023px
******************/
@media (max-width: 1023px) {
    /**** TABLEAU DE BORD ****/
    .d-flex {
        display: flex !important;
    }
}


/*****************
	   768px
******************/
@media (min-width: 768px) {
    /***** NAVIGATION *****/
    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a {
        background: var(--color-purple);
    }
    .mini-sidebar .sidebar-nav #sidebarnav > li > ul {
        background: var(--color-purple);
    }
}

/*****************
	   768px
******************/
@media (max-width: 768px) {
    /**** CONNECTED ****/
    body .login-sidebar {
        background-position: left center;
    }
}


/*****************
	   800px
******************/
@media (max-width: 800px) {
    /*** TABLE RESPONSIVE ****/
    table.table thead {
        display: none;
    }
    table.table,
    table.table tbody,
    table.table tr,
    table.table td {
        display: block;
        width: 100%;
    }
    table.table tr {
        margin-bottom: 15px;
        padding: 15px;
        border: 1px solid #dad9d9;
        background: #fff;
    }
    table.table td {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        border: none;
        padding: 15px 0;
        border-bottom: 1px solid var(--color-mention);
    }
    table.table td:first-of-type {
        padding-top: 0;
    }
    table.table td:last-of-type {
        border-bottom: none;
        padding-bottom: 0;
    }
    table.table .row-responsive-data {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        column-gap: 5px;
        padding: 15px 0;
        align-items: center;
        border-bottom: 1px solid var(--color-mention);
    }
    table.table .row-responsive-data:first-of-type {
        padding-top: 0;
    }
    table.table .row-responsive-data:last-of-type {
        border-bottom: none;
        padding-bottom: 0;
    }
    table.table .td-label {
        display: block;
        font-weight: var(--font-bold);
        color: var(--color-secondary);
        padding-bottom: 3px;
    }
    table.table .row-responsive-data .td-label {
        min-width: 100px;
    }

    table.table tr.shown {
        border-bottom: none;
        margin-bottom: 0;
    }
    table.table tr.historique-child {
        border-top: none;
    }
    table.table tr.historique-child table.table tr{
        border: none;
        background: transparent;
        /*border-bottom: 1px solid var(--color-secondary);*/
    }
    table.accordeon-historique thead {
        display: initial;
    }
    table.accordeon-historique thead th {
        border: none;
        border-bottom: 1px solid #d7dbe5;
    }
    table.table tr.historique-child table.table thead tr {
        border-bottom: 1px solid #d7dbe5;
        margin-bottom: 0;
        padding: 0;
    }
    table.accordeon-historique tbody tr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border-bottom: 1px solid #d7dbe5 !important;
        padding: 10px 15px;
        margin-bottom: 0;
        /*flex-wrap: wrap;*/
    }
    table.accordeon-historique tbody tr:last-of-type {
        border-bottom: none !important;
    }
    table.accordeon-historique tbody td {
        display: initial;
        padding: 0;
        border: none;
        font-size: 0.9rem;
    }
    .btn_cta_correction {
        font-size: 0;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        gap: 0;
    }
    .btn_cta_correction::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.3em' height='1.3em' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.5'%3E%3Cpath d='M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z'/%3E%3Cpath d='M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z'/%3E%3C/g%3E%3C/svg%3E");
        display: block;
        line-height: 1;
    }
}


/*****************
	   620px
******************/
@media (max-width: 620px) {
    /***** MODAL *****/
    body .modal-title-wrap,
    body .modal-body,
    body .modal-footer {
        padding: 1.5rem;
    }
    body .modal-footer {
        flex-wrap: wrap;
        justify-content: center;
    }
}


/*****************
	   +576px
******************/
@media (min-width: 576px) {
    /***** MODAL *****/
    .modal-dialog {
        max-width: 600px;
    }
}

/*****************
	   540px
******************/
@media (max-width: 540px) {
    /***** GENERAL *****/
    body .d-flex {
        flex-wrap: wrap;
    }
    .btns-wrapper {
        justify-content: center;
    }


    /**** CORRECTION MEMBRES ****/
    body .score-nb {
        font-size: 2.5rem;
        margin-top: 20px;
    }
}

/*****************
	   500px
******************/
@media (max-width: 500px) {
    table.table .row-responsive-data {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
}


/*****************
	   480px
******************/
@media (max-width: 480px) {
    body .title-card {
        flex-direction: column;
        align-items: flex-start;
    }
    body .title-card .ml-auto {
        margin-left: 0 !important;
    }
}