html{
    touch-action: none;
    user-select: none;
}

::-webkit-scrollbar {
    height: 7px;
    width: 4px
}

::-webkit-scrollbar-track {
    background: #f6f5f5;
    border-radius: 10px;
    margin: 0 20px
}

::-webkit-scrollbar-thumb {
    background: #d9d9d9;
    border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
    background: #bdbdbd;
}

.kanban-board-container {
    background-color: transparent;
    height: 82vh;
    border-radius: 8px;
    /*padding: 20px 30px 5px;*/
    /*box-shadow: 1px 1px 20px 1px rgba(142,142,142,.2);*/
}

.kanban-board-container .board-header {
    color: #2f3953;
    font-size: 22px;
    margin-bottom: 10px;
    text-align: center
}

.kanban-board-container .kanban-board {
    display: flex;
    height: 100%;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 17px;
    /*padding-top: 20px;*/
}

.kanban-column {
    margin-right: 5px;
    max-width: 300px;
    min-width: 300px;
    padding: 0 12px 10px 10px;
    border-radius: 12px;
    background-color: #ffffff;
    height: 100%;
    overflow-y: hidden;
    transition: all 0.3s ease;
}

.kanban-column.collapsed {
    min-width: 50px;
    max-width: 50px;
    padding: 0 5px !important;
    transition: all 0.3s ease;
}

.kanban-column.collapsed .kanban-column-title-inner {
    display: none;
}

.kanban-column.collapsed .kanban-column-tickets-list {
    display: none;
}

.kanban-column.collapsed .kanban-column-title {
    justify-content: center;
    padding: 20px 0 !important;
}

.kanban-column.collapsed .toggle-collapse {
    margin-right: 0;
}

.kanban-column .kanban-column-title {
    color: #7786ab;
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    padding-top: 20px;
}

.kanban-column .kanban-column-title a {
    display: inline-block;
    color: #7786ab;
    margin-right: 15px
}

.kanban-column .kanban-column-tickets-list {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 10px;
    padding-left: 10px;
    height: 100%;
}

.kanban-ticket {
    background-color: #fff;
    padding: 7px 12px;
    border-radius: 12px;
    font-size: 13px;
    box-shadow: 0 0 13px rgba(203, 203, 203, .69);
    margin-bottom: 12px;
    margin-top: 12px;
}

.kanban-ticket.card-progress {
    display: flex;
    align-items: center;
    margin-bottom: 15px
}

.kanban-ticket.card-progress .progress-line {
    position: relative;
    background-color: #e0e5eb;
    padding: 3px 0px;
    flex-grow: 1;
    margin-right: 10px;
    border-radius: 24px
}

.kanban-ticket.card-progress .progress-line::before {
    content: "";
    background-color: #2a4fd7;
    padding: 3px 0px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border-radius: 24px
}

.kanban-ticket.card-progress .progress-line.w-95::before {
    width: 95%
}

.kanban-ticket.card-progress .progress-line.w-90::before {
    width: 90%
}

.kanban-ticket.card-progress .progress-line.w-80::before {
    width: 80%
}

.kanban-ticket.card-progress .progress-line.w-70::before {
    width: 70%
}

.kanban-ticket.card-progress .progress-line.w-75::before {
    width: 75%
}

.kanban-ticket.card-progress .progress-line.w-60::before {
    width: 60%
}

.kanban-ticket.card-progress .progress-line.w-50::before {
    width: 50%
}

.kanban-ticket.card-progress .progress-line.w-40::before {
    width: 40%
}

.kanban-ticket.card-progress .progress-line.w-30::before {
    width: 30%
}

.kanban-ticket.card-progress .progress-line.w-20::before {
    width: 20%
}

.kanban-ticket.card-progress .progress-line.w-10::before {
    width: 10%
}

.kanban-ticket.card-progress .progress-line.w-0::before {
    width: 0%
}

.priority-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.priority-1 { background: #4CAF50; }
.priority-2 { background: #FFC107; }
.priority-3 { background: #F44336; }

.ticket-loader {
    width: 100%;
    height: 150px;
    display: block;
    margin: auto;
    position: relative;
    background: #FFF;
    box-sizing: border-box;
}

.ticket-loader::after {
    content: '';
    width: 100%;
    height: calc(100% - 30px);
    position: absolute;
    background-repeat: no-repeat;
    background-image: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 80%),
        radial-gradient( circle 11.5px at 11.5px 11.5px, #aaaaaa 100%, transparent 0 ),
        linear-gradient(#DDD 11px, transparent 0),
        linear-gradient(#DDD 7px, transparent 0),
      linear-gradient(#ffffff 100%, transparent 0);
    background-size: 129px 100%, 23px 23px, 117px 11px, 139px 7px, 100% 100%;
    background-position: 0 0 , 212px 83px, 12px 13px, 12px 34px, 0 0;
    box-sizing: border-box;
    animation: animloader 1s linear infinite;
    border-radius: 10px;
    box-shadow: 0 0 13px rgb(203 203 203 / 69%);
}

@keyframes animloader {
    to {
      background-position: 100% 0, 212px 83px, 12px 13px, 12px 34px, 0 0;
    }
}