:root {
    --coll-red-alert: #ed4c78;
    --coll-border-color: #6777884a;
    --coll-bg-color: #dbdee382;
    --coll-bg-out-color: transparent;
    --coll-font-out-color: #464646;
    --coll-font-color: #464646;
    --coll-fill-bg: #ffffff;
    --coll-bg-color--white: #d6d6d624;
}

.coll-main-content {
    padding: 0 0 5px 0 !important
}

.coll-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 0 0 0 5px !important;
    user-select: none !important;
    -moz-user-selectelect: none !important;
    -ms-user-selectect: none !important;
    -webkit-user-selectct: none !important;
}

.coll-table-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    align-items: center !important;
    /*justify-content: center !important;*/
}

.coll-cansel-user-select {
    cursor: default !important;
    user-select: text !important;
    -moz-user-selectelect: text !important;
    -ms-user-selectect: text !important;
    -webkit-user-selectct: text !important;
}

.coll-click-area, .coll-click-area-select-all {
    position: absolute !important;
    z-index: 100 !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

.coll-container-body-no-animate {
    padding: 1px 4px !important;
    color: var(--coll-font-out-color);
    background-color: var(--coll-bg-color) !important;
    border-radius: 10px !important;
    border: 1px solid var(--coll-border-color);
    cursor: default !important;
    position: relative !important;
    font-weight: 500 !important;
}

.coll-container-body-no-animate--out {
    padding: 1px 4px !important;
    color: var(--coll-font-out-color);
    border-radius: 10px !important;
    border: 1px solid var(--coll-border-color);
    cursor: default !important;
    position: relative !important;
    font-weight: 500 !important;
}

.coll-container-body {
    padding: 3px 10px !important;
    color: var(--coll-font-out-color);
    background-color: var(--coll-bg-out-color);
    border-radius: 10px !important;
    border: 1px solid var(--coll-border-color);
    cursor: pointer !important;
    transition-duration: 150ms !important;
    position: relative !important;
    font-weight: 500 !important;
}

.coll-container-body:hover {
    /*transform: scale(1.03);*/
    /*transition-duration: 150ms;*/
    z-index: 1 !important;
}

.coll-container-body-select {
    background-color: var(--coll-bg-color);
    /*transition-duration: 150ms;*/
    color: var(--coll-font-color);
    border: 1px solid var(--coll-border-color);
}

.coll-container-content {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;

    text-overflow: clip;
    overflow: auto;
    overflow-wrap: anywhere;
}

.coll-select {
    /*display: none !important;*/
}

.invalid-feedback {
    display: block !important;
}

.coll-container-select-all {
    position: relative !important;
    display: flex !important;
    margin: 5px 0 3px 0 !important;
    width: fit-content !important;
    gap: 5px !important;
    cursor: pointer !important;
    align-items: center !important;
    user-select: none !important;
    -moz-user-selectelect: none !important;
    -ms-user-selectect: none !important;
    -webkit-user-selectct: none !important;
}

.coll-index-list {
    position: absolute !important;
    background-color: var(--coll-fill-bg);
    border: 1px solid var(--coll-border-color);
    top: 2rem !important;
    left: 0 !important;
    border-radius: 15px !important;
    color: var(--coll-font-color);
    z-index: 2 !important;
    width: max-content !important;
    cursor: context-menu !important;
    max-height: 300px !important;
    text-overflow: clip !important;
    overflow: scroll !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

.coll-index-list :hover {
    z-index: 2 !important;
}

.coll-index-item {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 5px 15px !important;
    position: relative !important;
    border-bottom: 1px solid gainsboro;
}

.coll-index-item:last-child {
    border-bottom: none;
}

.coll-index-item-area {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
}

.coll-index-item-area:hover {
    background-color: var(--coll-bg-color--white);
    border-radius: 7px !important;
    cursor: pointer !important;
}

.coll-index-label, .coll-index-select {
    margin: 0 15px !important;
    color: var(--coll-font-color);
}

.coll-index-title {
    padding-bottom: 5px !important;
    font-size: 15px !important;
}

.coll-index-select {
    font-size: 12px !important;
    gap:10px !important;
}

.coll-index-hide {
    display: none;
}