.accordion .card .btn {
            color: #333;
            font-weight: 700;
            text-transform: capitalize;
        }

        .accordion .card .btn .icon {
            width: 32px;
            height: 32px;
            border: 1px solid blueviolet;
            border-radius: 5px;
        }


        .accordion .card .card-body .nav-pills .nav-link {
            background: blueviolet;
            margin-bottom: 10px;
            text-transform: capitalize;
            color: #fff;
            font-weight: 700;
        }

        .accordion .card .card-body .nav-pills .nav-link:last-child {
            margin-bottom: 0px;
        }

        /* text box */
        #form-one-out h3 {
            text-transform: capitalize;
            color: #e74c3c;
        }

        /* web tables */
        .table {
            text-transform: capitalize;
            user-select: none;
        }

        input[placeholder] {
            text-transform: capitalize;
        }

        .actions {
            display: flex;
            justify-content: space-evenly;
        }

        .feedback {
            display: none;
            color: red;
        }

        .fa-edit img {
            width: 16px;
            height: 16px;
        }

        .fa-trash-alt img {
            width: 16px;
            height: 16px;
        }

        /* slider */
        .range-slider {
            width: 100%;
        }

        .range-slider__range {
            -webkit-appearance: none;
            width: calc(100% - (73px));
            height: 10px;
            border-radius: 5px;
            background: #d7dcdf;
            outline: none;
            padding: 0;
            margin: 0;
        }

        .range-slider__range::-webkit-slider-thumb {
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #007bff;
            cursor: pointer;
            transition: background 0.15s ease-in-out;
        }

        .range-slider__range::-webkit-slider-thumb:hover {
            background: #1abc9c;
        }

        .range-slider__range:active::-webkit-slider-thumb {
            background: #1abc9c;
        }

        .range-slider__range::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border: 0;
            border-radius: 50%;
            background: #007bff;
            cursor: pointer;
            transition: background 0.15s ease-in-out;
        }

        .range-slider__range::-moz-range-thumb:hover {
            background: #1abc9c;
        }

        .range-slider__range:active::-moz-range-thumb {
            background: #1abc9c;
        }

        .range-slider__range:focus::-webkit-slider-thumb {
            box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
        }

        .range-slider__value {
            display: inline-block;
            position: relative;
            width: 60px;
            color: #fff;
            line-height: 20px;
            text-align: center;
            border-radius: 3px;
            background: #007bff;
            padding: 5px 10px;
            margin-left: 8px;
        }

        .range-slider__value:after {
            position: absolute;
            top: 8px;
            left: -7px;
            width: 0;
            height: 0;
            border-top: 7px solid transparent;
            border-right: 7px solid #007bff;
            border-bottom: 7px solid transparent;
            content: '';
        }

        ::-moz-range-track {
            background: #d7dcdf;
            border: 0;
        }

        input::-moz-focus-inner,
        input::-moz-focus-outer {
            border: 0;
        }

        /* auto complete */

        /* menu */

        #navbar ul {
            background: #e7e7e7;
            list-style: none;
        }

        #navbar ul li {
            position: relative;
            display: inline-block;
            padding: 1rem;
            color: #333;
        }

        #navbar ul li a {
            color: #333;
            text-decoration: none;
        }

        /* Hide nested ul by default */
        #navbar ul li ul {
            display: none;
            padding: 0;
            margin: 0;
        }

        #navbar ul li:hover {
            background: coral;
            color: #fff;
            cursor: pointer;
        }

        #navbar ul li:hover a {
            color: #fff;
        }

        /* Nested dropdown show */
        #navbar ul li:hover ul {
            position: absolute;
            left: 0;
            display: block;
            width: 200px;
            margin-top: 1rem;
        }

        #navbar ul li:hover ul li {
            display: block;
            background: #e7e7e7;
        }

        #navbar ul li:hover ul li a {
            color: #333;
        }

        #navbar ul li:hover ul li:hover {
            background: #e0e0e0;
            color: inherit;
        }

        #navbar ul li:hover ul li span {
            float: right;
            padding: 0.2rem 0.5rem;
            background: coral;
            color: #fff;
            font-size: 0.8rem;
            text-align: center;
            border-radius: 5px;
        }

        #navbar ul li:hover ul li:hover span {
            background: chocolate;
        }

        #showcase {
            display: flex;
            flex-direction: column;
            height: 300px;
            padding: 0 2rem;
            background: coral;
            text-align: center;
            align-items: center;
            justify-content: center;
        }

        #showcase h1 {
            color: #fff;
            font-size: 4rem;
        }

        @media(max-width: 600px) {
            #navbar ul li {
                display: block;
            }

            #navbar ul li:hover ul {
                position: relative;
                width: 100%;
            }
        }

        /* select menu */
        select[data-multi-select-plugin] {
            display: none !important;
        }

        .multi-select-component {
            position: relative;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            height: auto;
            width: 100%;
            padding: 10px 15px;
            font-size: 14px;
            line-height: 1.42857143;
            padding-bottom: 0px;
            color: #555;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
            -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
            transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
        }

        .autocomplete-list {
            border-radius: 4px 0px 0px 4px;
        }

        .multi-select-component:focus-within {
            box-shadow: inset 0px 0px 0px 2px #78ABFE;
        }

        .multi-select-component .btn-group {
            display: none !important;
        }

        .multiselect-native-select .multiselect-container {
            width: 100%;
        }

        .selected-wrapper {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            display: inline-block;
            border: 1px solid #d9d9d9;
            background-color: #ededed;
            white-space: nowrap;
            margin: 0px 5px 10px 0;
            height: 22px;
            vertical-align: top;
            cursor: default;
        }

        .selected-wrapper .selected-label {
            max-width: 514px;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-left: 4px;
            vertical-align: top;
        }

        .selected-wrapper .selected-close {
            display: inline-block;
            text-decoration: none;
            font-size: 14px;
            line-height: 1.49em;
            margin-left: 5px;
            padding-bottom: 10px;
            height: 100%;
            vertical-align: top;
            padding-right: 4px;
            color: #000;
            text-shadow: 0 1px 0 #fff;
            font-weight: 700;
        }

        .selected-wrapper .selected-close:hover {
            color: red;
        }

        .search-container {
            display: flex;
            flex-direction: row;
        }

        .search-container .selected-input {
            background: none;
            border: 0;
            height: 20px;
            width: 60px;
            padding: 0;
            margin-bottom: 6px;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        .search-container .selected-input:focus {
            outline: none;
        }

        .dropdown-icon.active {
            transform: rotateX(180deg)
        }

        .search-container .dropdown-icon {
            display: inline-block;
            padding: 10px 5px 10px;
            position: absolute;
            top: 10px;
            right: 5px;
            width: 10px;
            height: 10px;
            border: 0 !important;
            /* needed */
            -webkit-appearance: none;
            -moz-appearance: none;
            /* SVG background image */
            background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23818181%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23818181%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
            background-position: center;
            background-size: 10px;
            background-repeat: no-repeat;
        }

        .search-container ul {
            position: absolute;
            list-style: none;
            padding: 0;
            z-index: 3;
            margin-top: 29px;
            width: 100%;
            right: 0px;
            background: #fff;
            border: 1px solid #ccc;
            border-top: none;
            border-bottom: none;
            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
            box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
        }

        .search-container ul :focus {
            outline: none;
        }

        .search-container ul li {
            display: block;
            text-align: left;
            padding: 8px 29px 2px 12px;
            border-bottom: 1px solid #ccc;
            font-size: 14px;
            min-height: 31px;
        }

        .search-container ul li:first-child {
            border-top: 1px solid #ccc;
            border-radius: 4px 0px 0 0;
        }

        .search-container ul li:last-child {
            border-radius: 4px 0px 0 0;
        }


        .search-container ul li:hover.not-cursor {
            cursor: default;
        }

        .search-container ul li:hover {
            color: #ffffff;
            background-color: #007bff;
            border-color: #adadad;
            cursor: pointer;
        }

        /* selectable */
        .list-select .list-group-item {
            margin-bottom: 5px;
            cursor: pointer;
            color: black;
        }

        .grid-select .row .col-4 {
            margin-bottom: 20px;
            text-transform: capitalize;
            color: black;
        }

        .grid-select .row .card {
            text-align: center;
            padding: 30px;
            cursor: pointer;
        }

        @media (min-width:992px) {
            .list-select .list-group-item {
                width: 50%;
            }

            .grid-select .row {
                width: 50%;
            }
        }

        @media (max-width:992px) {
            .list-select .list-group-item {
                width: 50%;
            }

            .grid-select .row {
                width: 100%;
            }
        }

        /* resizable */
        .resize-box {
            resize: both;
            overflow: auto;
            border: 2px solid #0661c2;
            background: #007bff;
            color: white;
            width: 200px;
            height: 200px;
            font-size: 30px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 10px;
        }