/* ============= Simul Area start ================  */



/* ======== Data Table section Start ==========  */

/* .dt-button {

  background-color: #f34e4e !important;

  color: #fff !important;

  padding-left: 20px !important;

  padding-right: 20px !important;

  border: none !important;

} */



:root {

    --instagram: #df237b;

    --facebook: #39579b;

    --twitter: #049ff6;

    --linkedin: #0075aa;

    --twitch: #923cff;

    --whatsapp: #0ad561;

    --title_head: #fafafa;

    --red: red;

    --white: #fff;

    --black: #000;

    --dark: #343a40;

    --primary:

}



table>tbody>tr>td {

    text-align: center !important;

}



table>thead>tr>th {

    text-align: center !important;

}



table>tfoot>tr>th {

    text-align: center !important;

    font-size: 12px !important;

}



/* ======== Data Table section end ==========  */



/* =========== modal design ==================== */



.modal-header {

    background-color: #74788d !important;

}



.modal-header i {

    font-size: 13px !important;

}



.modal-title {

    color: white !important;

}



/* =========== client list ============  */

#refresh-icon:hover {

    transition: 0.6s;

    border-radius: 40%;

    background-color: rgb(239, 235, 225);

    cursor: pointer;

}



/*====== new client request section === */

.wizard-nav .active .step-icon {

    color: white !important;

    background-color: black !important;

}



/* Add new client section =========  */

#new-user-card-header {

    background-color: var(--instagram) !important;

}







.photo-frame {

    cursor: pointer;

    border: 1px solid var(--black);

    border-radius: 5px;

    width: 50% !important;

    position: relative;

}



.photo-frame img {

    height: 100% !important;

}



.photo-frame i {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    display: none;

    transition: 0.7s ease;

    font-size: 25px;

}





.photo-frame:hover i {

    display: block !important;

}



.photo-frame1 {

    cursor: pointer;

    border: 1px solid var(--black);

    border-radius: 5px;

    width: 50% !important;

    position: relative;

}



.photo-frame1 img {

    height: 100% !important;

}



.photo-frame1 i {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    display: none;

    transition: 0.7s ease;

    font-size: 25px;

}





.photo-frame1:hover i {

    display: block !important;

}



.photo-frame2 {

    cursor: pointer;

    border: 1px solid var(--black);

    border-radius: 5px;

    width: 50% !important;

    position: relative;

}



.photo-frame2 img {

    height: 100% !important;

}



.photo-frame2 i {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    display: none;

    transition: 0.7s ease;

    font-size: 25px;

}





.photo-frame2:hover i {

    display: block !important;

}









.edit-profile-image {

    position: absolute;

    left: 45%;

    top: 5.4%;

}



.edit-profile-image i,

.edit-profile-photo i {

    cursor: pointer;

}



/* HR Payroll section ============ */



.accordion-button {

    background-color: #343a40 !important;

}



.accordion-button::after {

    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);

}



/* --------- Select2 Custom Design =============  */

.select2-container .select2-selection--single {

    padding-bottom: 34px !important;

}



.select2-container .select2-selection--single .select2-selection__rendered {

    padding-top: 3px !important;

}



.select2-container--default .select2-selection--single .select2-selection__arrow b {

    top: 75% !important;

}



.select2-search__field,

.select2-selection--single {

    display: block !important;

    width: 100% !important;

    font-size: 0.9rem !important;

    font-weight: 400 !important;

    line-height: 20px !important;

    color: #495057 !important;

    background-color: #fff !important;

    background-clip: padding-box !important;

    border: 1px solid #e2e5e8 !important;

    border-bottom-color: rgb(226, 229, 232) !important;

    border-bottom-style: solid !important;

    border-bottom-width: 1px !important;

    -webkit-appearance: none !important;

    -moz-appearance: none !important;

    appearance: none !important;

    border-radius: 0.25rem !important;

    -webkit-transition: border-color 0.15s ease-in-out,

        -webkit-box-shadow 0.15s ease-in-out;

    transition: border-color 0.15s ease-in-out,

        -webkit-box-shadow 0.15s ease-in-out;

    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,

        -webkit-box-shadow 0.15s ease-in-out;

}



/* Button Hover Effect  */

.add-effect {

    position: relative;

    overflow: hidden;

    border: 1px solid transparent;

    font-weight: bold;

    transition: all 0.5s ease;

    /* background-color: var(--instagram); */

    /* text-transform: uppercase; */

    background: linear-gradient(to right top, #493240, #f09) !important;

    color: #fff;

    padding: 9px;

}



.add-effect::before {

    position: absolute;

    transition: 1.7s ease;

    left: -25%;

    top: 0;

    bottom: 0;

    content: '';

    width: 30px;

    height: 50px;

    transform: skew(50deg);

}



.add-effect::after {

    position: absolute;

    transition: 1.7s ease;

    right: -55%;

    top: 0;

    bottom: 0;

    content: '';

    width: 350px;

    height: 50px;

    transform: skew(50deg);

}



.add-effect:hover::before {

    left: 150%;

    background-color: #024166;

}



.add-effect:hover::after {

    right: 150%;

    background-color: #e2e5e8;

}



.add-effect:hover {

    transition: 1.9s ease;

    background: linear-gradient(to right top, #024166, #1d2e38) !important;

    border: 1px solid white !important;

    color: white !important;

    font-weight: 700 !important;

}





.export_btn {

    position: relative;

    overflow: hidden;

    border: 1px solid transparent;

    font-weight: bold;

    transition: all 0.5s ease;

    /* background-color: var(--instagram); */

    /* text-transform: uppercase; */

    background: linear-gradient(to right top, #493240, #f09) !important;

    color: #fff;

    padding: 9px;

}



.export_btn::before {

    position: absolute;

    transition: 1.1s ease;

    left: -25%;

    top: 0;

    bottom: 0;

    content: '';

    width: 30px;

    height: 50px;

    transform: skew(50deg);

}



.export_btn::after {

    position: absolute;

    transition: 1.1s ease;

    right: -55%;

    top: 0;

    bottom: 0;

    content: '';

    width: 350px;

    height: 50px;

    transform: skew(50deg);

}



.export_btn:hover::before {

    left: 150%;

    background-color: #024166;

}



.export_btn:hover::after {

    right: 150%;

    background-color: #e2e5e8;

}



.export_btn:hover {

    /* background-color: #fff !important; */

    border: 1px solid #343a40 !important;

    color: #fff !important;

    font-weight: 700 !important;

    background: linear-gradient(to right top, #024166, #1d2e38) !important;

    transition: 1.9s ease;

}



/* Edit Effect  */

i,

.edit-effect,

.delete-effect {

    transition: 0.5s ease;

    border-radius: 50%;

}



/* div > i:hover, */

.edit-effect:hover,

.delete-effect:hover {

    box-shadow: 0px 0px 0px 0px rgba(60, 49, 49, 0.2), 0 0 1px 7px rgba(71, 68, 68, 0.19);

    /* color: #000 !important; */



}



.icon_youtube:hover {

    color: red !important;

}



.common-save-update-btn {

    /* background: #229539; */

    background: linear-gradient(to right bottom, #3ab106, #229539, #3ab106) !important;

    color: #fff !important;

    position: relative;

    overflow: hidden;

    border: 1px solid transparent;

    font-weight: bold;

    transition: all 0.5s ease;

    padding: 9px;

}



.common-save-update-btn::before {

    position: absolute;

    transition: 1.7s ease;

    left: -45%;

    top: 0;

    bottom: 0;

    content: '';

    width: 30px;

    height: 50px;

    transform: skew(50deg);

}



.common-save-update-btn::after {

    position: absolute;

    transition: 1.7s ease;

    right: -55%;

    top: 0;

    bottom: 0;

    content: '';

    width: 100%;

    height: 50px;

    transform: skew(50deg);

}



.common-save-update-btn:hover::before {

    left: 150%;

    background-color: #024166;

}



.common-save-update-btn:hover::after {

    right: 150%;

    background-color: #e2e5e8;

}



.navBtn li button {

    color: white !important;

    padding: 13px 0px;

}



.navBtn li a {

    color: white !important;

    padding: 13px 0px;

}



.navBtn li .active {

    background: linear-gradient(to right bottom, #3ab106, #229539, #3ab106) !important;

    /* background: #03273c !important; */

    color: #fff !important;

}



/* .common-save-update-btn:hover {

    background: linear-gradient(to right bottom, red, blue) !important;

    color: #fff !important;

} */



/* .common-save-update-btn:hover {

    background: linear-gradient((to right bottom, red, #229539);

            color: #fff;

    } */

.common-cancle-btn {

    position: relative !important;

    background: linear-gradient(to right bottom, #ad125b, #df237b, #ad125b) !important;

    color: #fff !important;

    overflow: hidden;

    border: 1px solid transparent;

    font-weight: bold;

    transition: all 0.5s ease;

    padding: 9px;





    /* background: #df237b; */

    /* background: linear-gradient(to right bottom, #df237b, #da1212) !important; */

    /* color: #fff !important; */

}



.common-cancle-btn::before {

    position: absolute;

    transition: 1.7s ease;

    left: -45%;

    top: 0;

    bottom: 0;

    content: '';

    width: 30px;

    height: 50px;

    transform: skew(50deg);

}



.common-cancle-btn::after {

    position: absolute;

    transition: 1.7s ease;

    right: -55%;

    top: 0;

    bottom: 0;

    content: '';

    width: 350px;

    height: 50px;

    transform: skew(50deg);

}



.common-cancle-btn:hover::before {

    left: 150%;

    background-color: #e2e5e8;

}



.common-cancle-btn:hover::after {

    right: 150%;

    background-color: #e2e5e8;

}



/* ============= Simul Area end ================  */



/* ============= shakib Area start ================  */

.portal-nav .active {

    background-color: rgb(5, 68, 104) !important;

    color: white !important;

}



.nabpadding {

    font-size: 16px;

    font-weight: 500;

    /* color: #000; */

    opacity: 0.8;

}



/* ============= shakib Area End ================  */



/* ================ Hemel area start =================== */

.img-man {

    width: 170px;

    height: 170px;

}



.img-card {

    width: 70px;

    height: 70px;

}



.img-From {

    width: 70px;

    height: 70px;

}



.income-profile {

    position: relative;

    text-align: center;

    height: 250px;

}



.income-profile img {

    padding: 3px;

    border: 2px solid;

}



.profile-set {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.profile-left {

    position: absolute;

    top: 70%;

    left: 65%;

}



.profile-right {

    position: absolute;

    top: 70%;

    right: 65%;

}



@media (max-width: 1037px) {

    .income-profile {

        position: relative;

        text-align: center;

        height: 250px;

    }



    .income-profile img {

        padding: 3px;

        border: 2px solid;

    }



    .profile-set {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

    }



    .profile-left {

        position: absolute;

        top: 67%;

        left: 60%;

    }



    .profile-right {

        position: absolute;

        top: 67%;

        right: 60%;

    }

}



@media (max-width: 824px) {

    .income-profile {

        position: relative;

        text-align: center;

        height: 250px;

    }



    .income-profile img {

        padding: 3px;

        border: 2px solid;

    }



    .profile-set {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

    }



    .profile-left {

        position: absolute;

        top: 50%;

        left: 40%;

    }



    .profile-right {

        position: absolute;

        top: 50%;

        right: 40%;

    }

}



@media (max-width: 970px) {

    .income-profile {

        position: relative;

        text-align: center;

        height: 250px;

    }



    .income-profile img {

        padding: 3px;

        border: 2px solid;

    }



    .profile-set {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

    }



    .profile-left {

        position: absolute;

        top: 72%;

        left: 58%;

    }



    .profile-right {

        position: absolute;

        top: 72%;

        right: 58%;

    }

}



@media (max-width: 1028px) {

    .income-profile {

        position: relative;

        text-align: center;

        height: 250px;

    }



    .income-profile img {

        padding: 3px;

        border: 2px solid;

    }



    .profile-set {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

    }



    .profile-left {

        position: absolute;

        top: 72%;

        left: 58%;

    }



    .profile-right {

        position: absolute;

        top: 72%;

        right: 58%;

    }

}



@media (max-width: 3840px) {

    .income-profile {

        position: relative;

        text-align: center;

        height: 300px;

    }



    .income-profile img {

        padding: 3px;

        border: 2px solid;

    }



    .profile-set {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

    }



    .profile-left {

        position: absolute;

        top: 70%;

        left: 53%;

    }



    .profile-right {

        position: absolute;

        top: 70%;

        right: 53%;

    }

}



/* ================ Hemel area end =================== */













.bg-facebook {

    background: var(--facebook) !important;

}



.bg-twitter {

    background: var(twitter) !important;

}



.bg-instagram {

    background-color: var(--instagram);

}





.bg-linkedin {

    background: var(--linkedin) !important;

}







.bg-twitch {

    background: var(--twitch) !important;

}



.bg-whatsapp {

    background: var(--whatsapp) !important;

}



.title-head {

    background-color: var(--title_head);

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}



/* Custom Button Class  */

.btn-instagram {

    background-color: var(--instagram);

    color: var(--white) !important;

}



.btn-linkedin {

    background: var(--linkedin) !important;

    color: var(--white) !important;

}



.border-instagram {

    border-color: var(--instagram) !important;

}



.border-linkedin {

    border-color: var(--linkedin) !important;

}



.tbl_head {

    background-color: var(--instagram);

}



.card {

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;

}









/* Export Arrow animation 

 */

.i_rotate {

    transform: rotate(180deg);

}



/* All Button Outline Remove */



/* Page header title  */

.page-head {

    height: 60px;

    width: 100%;

    border: 2px solid #74788d;

}



.page-icon {

    position: absolute;

    top: -5%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.page-icon span,

.page-icon i {

    font-size: 20px;

}



.tutorial_icon {

    position: absolute;

    bottom: -55%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.tutorial_icon i {

    transition: 0.5s ease;

}



.tutorial_icon:hover i {

    transform: scale(1.1);

}



@media only screen and (max-width: 600px) {



    .page-icon span,

    .page-icon i {

        font-size: 14px;

    }

}



.simplebar-content-wrapper {

    overflow: auto !important;

}



.Datatable thead {

    background-color: var(--instagram) !important;

}





/* Hover Effect */

/* #new-user-card-header:hover{

  background-color: red !important;

} */



/* #new-user-card-header {

  background: linear-gradient(#1095c1 0 0) var(--p, 0) / var(--p, 0) no-repeat;

  transition: 0.4s, background-position 0s;

}

#new-user-card-header:hover {

  --p: 100%;

  color: #fff;

} */



#new-user-card-header {

    --c: no-repeat linear-gradient(#ff3996eb 0 0);

    background: var(--c) calc(-101% + var(--i, 0)*101%) 100% / 50.1% calc(100%*var(--i, 0) + .08em),

        var(--c) calc(201% - var(--i, 0)*101%) 0 / 50.1% calc(100%*var(--i, 0) + .08em);

    transition: .4s calc(var(--i, 0)*.3s), background-position .3s calc(.3s - var(--i, 0)*.3s);

    cursor: pointer;

}



#new-user-card-header:hover {

    --i: 1;

}























.progress-sm {

    height: 5px

}



.progress-md {

    height: 8px

}



.progress-lg {

    height: 12px

}



.progress-xl {

    height: 16px

}



.animated-progess {

    position: relative

}



.animated-progess .progress-bar {

    position: relative;

    border-radius: 30px;

    -webkit-animation: animate-positive 2s;

    animation: animate-positive 2s

}



@-webkit-keyframes animate-positive {

    0% {

        width: 0

    }

}



@keyframes animate-positive {

    0% {

        width: 0

    }

}



.custom-progress {

    height: 15px;

    padding: 4px;

    border-radius: 30px

}



.custom-progress .progress-bar {

    position: relative;

    border-radius: 30px

}



.custom-progress .progress-bar::before {

    content: "";

    position: absolute;

    width: 4px;

    height: 4px;

    background-color: #fff;

    border-radius: 7px;

    right: 2px;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%)

}



body[data-layout-mode=dark] .progress {

    background-color: #043a5a

}



.popover {

    -webkit-box-shadow: 0 5px 6px rgba(52, 58, 64, .1);

    box-shadow: 0 5px 6px rgba(52, 58, 64, .1)

}



/* thead>tr>th {

  width: auto !important;

} */



/* th,

td {

    white-space: nowrap;

} */



div.dataTables_wrapper {

    margin: 0 auto;

}



div.container {

    width: 92%;

}



/* .mikrotik_import {

  border: 2px solid transparent;

  transition: 0.5s ease;

}



.mikrotik_import:hover {

  border: 2px solid var(--facebook);

} */





/* Side Bar Parent Icon & Name Hover */

#sidebar-menu ul li a:hover {

    background: #03273c;

}



/* ==========Table Style========= */

table thead {

    background-color: var(--instagram) !important;

    color: white !important;

    font-weight: bold !important;

}



table thead tr th {

    border: 1px solid #c6c6c6 !important;

    border-right: none !important;

    border-bottom: none !important;

}



table thead tr th:last-child {

    border-right: 1px solid #c6c6c6 !important;

}



table tbody tr td {

    border: 1px solid #c6c6c6 !important;

    border-right: none !important;

    border-bottom: none !important;

}



table tbody tr td:last-child {

    border-right: 1px solid #c6c6c6 !important;

}



table tfoot {

    border-bottom: 1px solid #c6c6c6 !important;

}



table tfoot tr:last-child td {

    border-bottom: 1px solid #c6c6c6 !important;

}



#example_wrapper {

    margin-bottom: 10px !important;

}





/* Action Drop Down Button Hover Effect */



.dropdown_menu_hover button,

.dropdown_menu_hover a,

.dropdown_menu_hover li {

    width: 100% !important;

    display: flex;

    justify-content: start;

    align-items: center;

    cursor: pointer;

}



.dropdown_menu_hover button:hover,

.dropdown_menu_hover a:hover,

.dropdown_menu_hover li:hover {

    background-color: #f23e92;

    border-radius: 0px;

}



.dropdown_menu_hover button i,

.dropdown_menu_hover a i,

.dropdown_menu_hover li i {

    padding-right: 5px;

}







/* ================================Tree View================================= */

/* #tree_view ul {

        list-style: none;

        line-height: 2em;

        margin: 0px;

    }



    #tree_view summary {

        cursor: pointer;

    }



    #tree_view summary::marker {

        display: none;

    }



    #tree_view details {

        display: inline;

    }



    details summary::-webkit-details-marker,

    details summary::marker {

        display: none;

        content: "";

    }



    #tree_view ul li {

        position: relative;

    }



    #tree_view ul li::before {

        content: '';

        position: absolute;

        left: -25px;

        top: 0px;

        width: 20px;

        height: 1em;

        border-left: 2px solid gray;

        border-bottom: 2px solid gray;

    }



    #tree_view ul li::after {

        content: '';

        position: absolute;

        left: -25px;

        top: 0px;

        width: 20px;

        height: 100%;

        border-left: 2px solid gray;

    }



    #tree_view ul li:last-child::after {

        display: none;

    }



    #tree_view ul .summary::before {

        content: '+';

        position: absolute;

        top: .55em;

        left: -2.3em;

        background-color: orange;

        display: block;

        width: 15px;

        height: 15px;

        border-radius: 50em;

        z-index: 999;

        line-height: .8em;

        text-align: center;

    }



    #tree_view ul details[open]>.summary::before {

        content: '-';

    } */





.btn_hover:hover {

    background-color: var(--twitter) !important;

    color: var(--white) !important;

}