/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/*datatables*/
.dataTables_wrapper > .row {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

    /*table*/
    .dataTables_wrapper > .row:nth-child(2)  {
        margin-left: -1rem !important;
        margin-right: -1rem !important;
    }

.page-item.active .page-link {
    background: #00aeef !important;
}

.contact-phone-holder {
    position: relative;
}
.contact-phone {
    text-align: center;
    position: relative;
}
.contact-phone img {
    width: 320px;
}

    .contact-phone textarea {
        width: 260px;
        height: 290px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff !important;
        border-color: #fff !important;
    }

.pricing:hover,
.pricing.active {
    background: rgba(0, 207, 232, 0.12) !important;
    border: 1px solid #00cfe8 !important;
    cursor: pointer;
}

.checkbox-holder {
    display: inline-block;
    position: relative;
}

    .checkbox-holder input[type="checkbox"] {
        opacity: 0;
        z-index: 9;
        position: relative;
        cursor: pointer;
    }

    .checkbox-holder i {
        position: absolute;
        font-size: 20px;
        color: #00aeef !important;
        left: 0px;
        z-index: 1;
    }

    .checkbox-holder input[type="checkbox"]:hover i {
        box-shadow: 0 8px 25px -8px #00cfe8;
    }

/* ── Sidebar grouped nav: hide open submenus in icon-only (collapsed) mode ──
   Vuexy sets overflow:visible on .navigation when menu-collapsed so icons can
   pop-out on hover. Without this rule, open ul.menu-content overflows the
   80px sidebar and sits on top of the content area.
   When the user hovers (.main-menu.expanded), this rule does not apply and
   the submenus show normally via the expand animation.                        */
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .menu-content {
    display: none !important;
}