/******** base color css ********/
.btn_1 {
    background-color: $base_color;
    border: 1px solid $base_color;
    color: $white;
    display: inline-block;
    padding: 11px 23px;
    text-transform: none;
    line-height: 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 5px;
    white-space: nowrap;
    @include transform_time(.5s);

    i {
        font-size: 15px;
        padding-right: 7px;
    }

    &:hover {
        background-color: $white;
        border: 1px solid $base_color;
        color: $base_color;
    }

    &.light {
        background-color: rgba($color: $base_color, $alpha: .1);
        border: 1px solid transparent;
        color: $base_color;
    }

    &.green {
        background-color: rgba($color: #2EC9B8, $alpha: .1);
        border: 1px solid transparent;
        color: #2EC9B8;
    }

    &.sm {
        font-size: 12px;
        padding: 6px 15px;
    }

    &.big_btn {
        padding: 11px 36px;
    }

    &.form_big_btn_1 {
        padding: 16px 62px !important;

        @media #{$small_mobile} {
            padding: 16px 30px !important;
        }
    }

    &.big_btn2 {
        padding: 11px 37px;
    }
}

.btn_2 {
    color: $base_color;
    border: 1px solid $base_color;
    display: inline-block;
    padding: 11px 23px;
    text-transform: none;
    line-height: 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 5px;
    background-color: $white;
    white-space: nowrap;
    @include transform_time(.5s);

    &:hover {
        background-color: $base_color;
        border: 1px solid $base_color;
        color: $white;
    }
}
//<<:::::::::::::::::: CRM_btn_list:::::::::::::::::::>>
.primary_btn {
    color: $base_color;
    border: 1px solid #008FD4;
    display: inline-block;
    padding: 7px 23px;
    text-transform: uppercase;
    line-height: 16px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 30px;
    background-color: transparent;
    white-space: nowrap;
    @include transform_time(.3s);

    &:hover {
        @extend %gradient_1;
        border: 1px solid transparent;
        color: $white;
    }
}

.primary_btn_large {
    display: inline-block;
    padding: 17px 23px;
    text-transform: uppercase;
    line-height: 16px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
    white-space: nowrap;
    @include transform_time(.3s);
    @extend %gradient_1;
    color: $white;
    border: 0;
    cursor: pointer;
    letter-spacing: 0.1em;

    i {
        font-size: 12px;
        padding-right: 6px;
    }

    &:hover {
        @extend %gradient_1;
        color: $white;
        box-shadow: 0px 5px 10px rgba(108, 39, 255, 0.25);
    }
}

//<<:::::::::::::::::: CRM_btn_list end:::::::::::::::::::>>


table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child::before,
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child::before {
    // background-color:#222;
    z-index: 9;
    top: 50%;
    transform: translateY(-50%);
    content: "\e61a";
    font-family: 'themify';
    font-size: 8px;
    line-height: 14px;
    font-weight: 600;
    background-color: #fef1f2;
    box-shadow: 6px 6px 12px rgba(0, 0, 0, .08),
        -6px -6px 12px rgba(255, 255, 255, 1);

}

table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child::before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child::before {

    content: "\e622";
    // background: #fe1724;
    box-shadow: inset 6px 6px 12px rgba(0, 0, 0, .08),
        inset -6px -6px 12px rgba(255, 255, 255, 1);

}



// CRM_dropdown 
.CRM_dropdown.dropdown {
    .dropdown-toggle {
        background: transparent;
        color: #008FD4;
        font-size: 12px;
        font-weight: 500;
        border: 1px solid #008FD4;
        border-radius: 32px;
        padding: 2px 40px 5px 23px;
        text-transform: uppercase;
        overflow: hidden;
        transition: .3s;
        height: 32px;

        @media #{'only screen and (min-width: 992px) and (max-width: 1400px)'} {
            padding: 2px 30px 5px 23px;
        }

        &:after {
            content: "\e62a";
            font-family: "themify";
            border: none;
            border-top-color: currentcolor;
            border-top-style: none;
            border-top-width: medium;
            border-top: 0px;
            font-size: 12px;
            position: relative;
            top: 3px;
            left: 0;
            font-weight: 400;
            transition: .3s;
        }

        &:hover,
        &:focus {
            color: #fff;
            @extend %gradient_1;
            border: 1px solid transparent;
            box-shadow: none !important;
        }
    }

    &.show {
        .dropdown-toggle {

            &::after {}
        }
    }

    .dropdown-menu {
        border-radius: 5px 5px 10px 10px;
        border: 0px;
        padding: 15px 0px;
        box-shadow: var(--box_shadow);
        margin-top: 5px;

        &.full_width {
            min-width: 110px;
        }

        .dropdown-item {
            color: #828bb2;
            text-align: right;
            font-size: 12px;
            padding: 4px 1.5rem;
            text-transform: uppercase;
            cursor: pointer;

            &:hover {
                color: $base_color;
            }

            .active,
            &:active {
                color: $base_color;
                background-color: #f8f9fa;
            }
        }
    }

    &.CRM_dropdown_default {
        button {
            padding: 0 !important;
            border: 0 !important;
            text-transform: none;
            font-size: 13px;
            text-align: left;
            overflow: visible;

            &:hover {
                background: transparent;
                color: #008FD4;
            }

            &:hover,
            &:focus {
                border: 0;
                box-shadow: none !important;
                background: transparent;
                color: #008FD4;
            }

            &:after {
                content: "\f0d7";
                font-family: "Font Awesome 5 free";
                border: none;
                border-top-color: currentcolor;
                border-top-style: none;
                border-top-width: medium;
                border-top: 0px;
                font-size: 12px;
                position: relative;
                top: 3px;
                left: 0;
                font-weight: 900;
                transition: .3s;
                position: absolute;
                right: 0;
                left: auto;
                top: 4px;
            }
        }

        .dropdown-item {
            text-transform: capitalize !important;
            text-align: left;
        }
    }
}

.dropdown-menu.option_width_8 {
    min-width: 150px;
}