.CustomColumns {
    .dropdown {
        border-radius: 20px;

        &.show,
        &:active,
        &:hover {
            background-color: var(--white);
        }

        .btn {
            outline: none;
        }
    }

    .dropdown-menu {
        width: 250px;
    }

    &-title {
        line-height: 20px;
        text-transform: uppercase;

        &-icon {
            float: right;
            height: 16px;
            margin: 1px 6px 0 3px;
            width: 16px;
            use {
                fill: var(--bluejay);
            }
        }
    }

    &-header {
        border-bottom: 1px solid var(--gray-200);
        padding: 8px 10px;

        &-title {
            display: inline-block;
            font-size: 14px;
        }
        &-reset {
            float: right;
        }
        &-reset-link {
            color: var(--bluejay);
            cursor: pointer;
            font-size: 12px;

            &:active,
            &:hover {
                text-decoration: underline;
            }
        }
    }

    &-columns {
        max-height: 250px;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0 10px 3px;
    }

    &-column {
        margin: 2px 0;
        padding-left: 5px;
        label {
            padding: 5px 0;
            width: 100%;
        }

        &-checked {
            background-color: var(--bluejay_light);
        }

        &-disabled {
            background-color: var(--gray-200);
        }

        &:hover {
            background-color: var(--gray-200);
        }
    }
}