.table-ticket .width1,
.table-ticket .ticket-list .width1 {
    width: 5% !important;
}

.table-ticket .width2,
.table-ticket .ticket-list .width2 {
    width: 10% !important;
}

.table-ticket .width3,
.table-ticket .ticket-list .width3 {
    width: 20% !important;
}

.table-ticket .width4,
.table-ticket .ticket-list .width4 {
    width: 10% !important;
    text-align: center !important;
}

.table-ticket .width5,
.table-ticket .ticket-list .width5 {
    width: 25% !important;
    text-align: center !important;
}

.table-ticket .ticket-list .width4 .Rtable-cell--content,
.table-ticket .ticket-list .width5 .Rtable-cell--content {
    text-align: center;
    text-align: -webkit-center;
}

.table-ticket .width6,
.table-ticket .ticket-list .width6 {
    width: 15% !important;
}

.badget-inprogress {
    color: #ffffff;
    background-color: #EAB308;
    width: 60%;
    text-align: center;
    padding: 3px 6px;
    border-radius: 30px;
    display: inline-block;
}

.badget-open {
    color: #353535;
    background-color: #E2E8F0;
    width: 60%;
    text-align: center;
    padding: 3px 6px;
    border-radius: 30px;
    display: inline-block;
}

.badget-answer {
    color: #ffffff;
    background-color: #60A5FA;
    width: 60%;
    text-align: center;
    padding: 3px 6px;
    border-radius: 30px;
    display: inline-block;
}

.badget-closed {
    color: #ffffff;
    background-color: #84CC16;
    width: 60%;
    text-align: center;
    padding: 3px 6px;
    border-radius: 30px;
    display: inline-block;
}


.btn-ticket-detail {
    background: rgba(93, 209, 52, 0.3);
    border: 0.5px solid #FFFFFF;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    color: #ffffff;
    text-align: right;
    font-size: 11px;
    padding: 3px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
}

.btn-ticket-edit {
    background: rgba(52, 209, 209, 0.3);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    color: #009EE2;
    text-align: right;
    font-size: 11px;
    padding: 3px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
}

.btn-ticket-delete {
    background: rgba(209, 50, 50, 0.15);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    color: #BF3737;
    text-align: right;
    font-size: 11px;
    padding: 3px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
}

.btn-ticket-detail:hover {
    background: rgba(93, 209, 52, 0.4);
}

.btn-ticket-edit:hover {
    background: rgba(52, 209, 209, 0.5);
}

.btn-ticket-delete:hover {
    background: rgba(209, 50, 50, 0.3);
}


.btn-ticket-more {
    background: #C7F8F8;
    border: 1px solid #0B5959;
    border-radius: 7px;
    position: relative;
    overflow: hidden;
    color: #0B5959;
    text-align: right;
    font-size: 11px;
    padding: 3px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
}

.btn-ticket-more:hover {
    background: #ACD2D2;
}

.table-ticket .Rtable .Rtable-row .Rtable-cell .Rtable-cell--content > span {
    border-radius: 5px;
    background: rgba(87, 227, 227, 0.25);
    width: 32px;
    height: 32px;
    display: inline-block;
    padding: 0 10px;
    font-weight: 600;
  }

.operations-btns .span1 {
    color: #0B5959;
    font-size: 14px;
    font-weight: 500;
}
.operations-btns .span2 {
    color: #0B5959;
    font-size: 13px;
    font-weight: 500;
}


/* Status Button */
.ticketButtons {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.ticketButtons .cardTicket {
    background-color: #ffffff;
    padding: 13px;
    border-radius: 10px;
    border: 1px solid #DDDDDD;
    cursor: pointer;
    transition: all .3s ease-in;
}

.ticketButtons .cardTicket:hover {
    background-color: #F0FFFF;
    border: 1px solid #2EBFBF;
}

.ticketButtons .cardTicket.ticketActive {
    background-color: #F0FFFF;
    border: 1px solid #2EBFBF;
}

.ticketButtons .ticketButtonsTxt {
    font-size: 13px;
    font-weight: 600;
    color: #1C1C1C;
}

.ticketButtons .ticketCount {
    width: 40px;
    height: 40px;
    padding: 6px;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ticketButtons .ticketCount.gray {
    background-color: #2EBFBF;
}

.ticketButtons .ticketCount.blue {
    background-color: #60A5FA;
}

.ticketButtons .ticketCount.yellow {
    background-color: #EAB308;
}

.ticketButtons .ticketCount.lightGray {
    background-color: #E2E8F0;
    color: #1C1C1C;
}

.ticketButtons .ticketCount.green {
    background-color: #84CC16;
}

/* Status Button */

@media (max-width: 1380px) {
    .badget-inprogress,
    .badget-answer,
    .badget-closed,
    .badget-open {
        width: 110px;
        font-size: 10px;
    }

    .Rtable .Rtable-row .Rtable-cell .Rtable-cell--content {
        font-size: 10px;
    }

    .table-ticket .Rtable-cell.column-heading {
        font-size: 12px !important;
    }

    .table-ticket .width1,
    .table-ticket .ticket-list .width1 {
        width: 5% !important;
    }

    .table-ticket .width2,
    .table-ticket .ticket-list .width2 {
        width: 8% !important;
    }

    .table-ticket .width3,
    .table-ticket .ticket-list .width3 {
        width: 17% !important;
        text-align: center !important;
    }

    .table-ticket .width4,
    .table-ticket .ticket-list .width4 {
        width: 15% !important;
    }

    .table-ticket .width5,
    .table-ticket .ticket-list .width5 {
        width: 15% !important;
        /*text-align: center !important;*/
    }

    .table-ticket .ticket-list .width3 .Rtable-cell--content {
        text-align: center;
        text-align: -webkit-center;
    }

    .table-ticket .ticket-list .Rtable-cell--content {
        font-size: 11px;
    }

    .table-ticket .width6,
    .table-ticket .ticket-list .width6 {
        width: 10% !important;
    }

    .table-ticket .width7,
    .table-ticket .ticket-list .width7 {
        width: 15% !important;
    }

    .table-ticket .width8,
    .table-ticket .ticket-list .width8 {
        width: 10% !important;
    }

    .ticketButtons {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .ticketButtons .cardTicket {
        padding: 7px;
        border-radius: 9px;
    }

    .ticketButtons .ticketButtonsTxt {
        font-size: 12px;
    }

    .ticketButtons .ticketCount {
        width: 36px;
        height: 36px;
        font-size: 14px;
        border-radius: 6px;
    }
}


@media (max-width: 767px) {
    .Rtable--collapse .Rtable-row {
        outline: 0;
        border: 1px solid #ECFFFF;
        padding: 0;
    }
    
    .Rtable--collapse .Rtable-row .Rtable-cell.width3 .Rtable-cell--content {
        justify-content: right;
        display: flex;
    }

    .Rtable--collapse .Rtable-row .Rtable-cell.width6 {
        justify-content: end;
    }

    .Rtable--collapse .Rtable-row .Rtable-cell.width6 .Rtable-cell--content {
        justify-content: end;
        display: flex;
    }

    .Rtable--collapse .Rtable-row .Rtable-cell {
        border-bottom: 0;
    }

    .badget-inprogress,
    .badget-answer,
    .badget-closed {
        border-radius: 0;        
    }

    .btn-ticket-detail {
        border: 1px solid #248826;
        border-radius: 8px;
        color: #248826;
        background-color: #B7EABA;
    }

    .ticketButtons {
        padding: 0;
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }


    
    .ticketButtons .cardTicket:nth-child(1),
    .ticketButtons .cardTicket:nth-child(2) {
        grid-column: span 6 / span 6;
    }

    .ticketButtons .cardTicket:nth-child(3),
    .ticketButtons .cardTicket:nth-child(4),
    .ticketButtons .cardTicket:nth-child(5) {
        grid-column: span 4 / span 4;
    }

    .ticketButtons .ticketButtonsTxt {
        font-size: 10px;
    }

    .ticketButtons .ticketCount {
        width: 27px;
        height: 27px;
        font-size: 11px;
        border-radius: 6px;
    }
}