@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600&display=swap');
:root{
    --clr-red: #FF0000;
    --clr-yellow: #ffe135;
    --clr-gray-800: #e0e0e0;
    --clr-white: #FFFFFF;
	--clr-black: #000000;
    --clr-blue-800: #000f23;
    --clr-blue-500: #1a5ce0;
    --clr-green-500: #28a745;
    /* --clr-primary: #ff451b; */
    --clr-primary: #e55455;
    --icon-font: "Font Awesome 6 Free";
	--body-ff: 'Poppins', sans-serif;
	--title-ff: 'Bree Serif', serif;
}
body{
    font-family: 'Poppins', sans-serif;
    font-size: 100%;
    font-weight: 400;
    background-color: #f2f6fc;
}
h1,h2,h3,h4,h5,h6{
	font-family: var(--body-ff);
	font-weight: 500;
}
/* .container{
	max-width: 1240px;
} */
/*================================================
	LOGIN WRAP
==================================================*/
.login-wrap{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*========== LOGIN FORM ============*/
.login-wrap .login-form{
    padding: 24px;
	text-align: center;
    border-radius: 8px;
    background-color: var(--clr-white);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .16);
}
.login-wrap .login-form .login-logo,.login-wrap .login-form-header{
    margin-bottom: 24px;
}
.login-wrap .login-form .login-logo img{
    height: 56px;
}
.login-wrap .login-form-header .title{
	color: #020202;
	font-size: 1.25rem;
	font-weight: 400;
}
.login-wrap .login-form .form-group{
	margin-bottom: 20px;
}
.login-wrap .login-form .form-control{
	padding: 8px 16px;
	font-size: .9rem;
	outline: 0;
	font-weight: 400;
	color: #717171;
	border-radius: 6px;
	border: 1px solid #dbdbdb;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .06);
}
.login-wrap .login-form .form-link{
	display: flex;
	margin-bottom: 15px;
}
.login-wrap .login-form .form-check label{
	font-size: 14px;
	color: #717171;
}
.login-wrap .login-form .forget-password{
	margin-left: auto;
}
.login-wrap .login-form .btn{
    width: 100%;
    color: #ffffff;
    background-color: var(--clr-primary);
}
.login-wrap .login-form .form-bottom{
	display: flex;
	justify-content: center;
	margin-top: 16px;
}
.login-wrap .login-form a{
	color: var(--clr-primary);
	font-size: 13px;
    font-weight: 500;
}
.login-wrap .login-form .form-bottom a{
	margin-left: 3px;
}
.login-wrap .login-form p{
    font-size: 13px;
    font-weight: 400;
    margin-top: 1rem;
    margin-bottom: 0;
}
/*========= Media Query =========*/
@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (max-width: 991.98px) {}
@media (max-width: 767.98px) {}
@media (max-width: 575.98px) {}
/*==================================================
    Sidebar Nav
====================================================*/
.sidebar .offcanvas{
    /* background-color: #edeef3; */
    background-color: #FFFFFF;
}
.sidebar .offcanvas-start{
    width: 100%;
}
.sidebar .offcanvas-header{
    justify-content: flex-start;
}
.sidebar .sidebar-logo{
    border-bottom: 1px solid #dadafb;
    margin-bottom: .25rem;
}
.sidebar .sidebar-logo a{
    display: block;
}
.sidebar .sidebar-logo img{
    height: 40px;
}
.sidebar .offcanvas-header .btn-close{
    width: 16px;
    height: 16px;
    background-size: 50%;
}
.sidebar .offcanvas-body{
    padding: 0 0 1rem;
}
.sidebar .offcanvas-footer{
    padding: 1rem .75rem;
}
.sidebar-logo{}
.sidebar-nav ul{}
.sidebar-nav ul li{}
.sidebar-nav .nav-caption{
    color: #777c83;
    display: block;
    padding: 1.75rem 1rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sidebar-nav ul li a,.campaign-anchor,.dashboard-known-user{
    display: block;
    color: #212832;
    font-size: .9rem;
    text-transform: capitalize;
    padding: .75rem 1rem;
    line-height: normal;
    transition: all 0.3s ease;
}
.sidebar-nav ul li a:hover,.sidebar-nav ul li a.active,.campaign-anchor,.dashboard-known-user{
    color: var(--clr-primary);
    /* background-color: #FFFFFF; */
}
.dashboard-known-user {
    padding: 0 !important;
}
.sidebar-nav ul li a.active{
    font-weight: 500;
}
.sidebar-nav ul li a .icon{
    font-size: .8rem;
}
.sidebar-nav ul li a .icon svg{
    width: 1rem;
    height: 1rem;
}
.sidebar-nav ul li a img{
    /* filter: invert(51%) sepia(0%) saturate(6882%) hue-rotate(195deg) brightness(100%) contrast(64%); */
}
.sidebar-nav ul li a:hover img,.sidebar-nav ul li a.active img{
    filter: invert(35%) sepia(99%) saturate(916%) hue-rotate(92deg) brightness(101%) contrast(103%);
}
.sidebar-nav ul li a span{
    margin-right: .375rem;
}
.sidebar-nav ul li .btn{
    color: #FFFFFF;
}
.sidebar-nav ul li .btn:hover,.sidebar-nav ul li .btn.active{
    color: #FFFFFF;
    background-color: var(--clr-primary);
}
.sidebar-nav ul li .btn:hover,.sidebar-nav ul li .btn.active{

}
.sidebar-nav ul li .btn .icon img{
    margin-left: .625rem;
}
/*========= Media Query =========*/
@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px){
    .page-wrapper .sidebar{
        /* position: fixed;
        width: 200px;
        height: 100%;
        padding: 1rem;
        background-color: #F1F3F4; */
    }
    .sidebar .offcanvas{
        visibility: visible;
        
    }
    .sidebar .offcanvas-start{
        width: 240px;
        transform: none;
        border-right: none;
    }
    .sidebar .offcanvas-header .btn-close{
        display: none;
    }
    .sidebar .offcanvas-body{
        border-right: 1px solid rgba(0, 0, 0, .06);
    }
    .sidebar-logo{
        /* margin: 1.25rem 0; */
    }
    .content{
        margin-left: 240px;
    }
}
@media (max-width: 991.98px){
    .header{
        margin-bottom: 1rem;
        border-bottom: 1px solid #D6DCD7;
    }
    .sidebar .offcanvas-header .sidebar-logo{
        margin-left: 1.25rem;
    }
    .sidebar .offcanvas-footer .btn{
        display: none;
    }
}
@media (max-width: 767.98px) {}
@media (max-width: 575.98px) {}
/*==================================================
    Header Section 
====================================================*/
.header{
    background-color: #FFFFFF;
    box-shadow: 0 0.15rem 1.75rem 0 rgb(33, 40, 50, .15);
    z-index: 1050;
}
.shadow{
    box-shadow: 0 0.15rem 1.75rem 0 rgb(33, 40, 50, .15) !important;
}
.header .navbar{
    padding: 0;
}
.header .navbar a{}
.header .navbar .btn:focus{
    box-shadow: none;
}
.header .navbar-end .navbar-nav {
    flex-direction: row;
}
.navbar-nav .nav-item{
    display: flex;
    position: relative;
}
.navbar-nav .nav-item + .nav-item{
    margin-left: 1rem;
}
.navbar-nav .nav-item .nav-link{
    display: flex;
    align-items: center;
    padding: .75rem 0;
}
.navbar-nav .nav-item .nav-link i{
    color: #1c252c;
    font-size: 1.5rem;
}
.navbar-nav .dropdown-menu{
    position: absolute;
    padding: 0;
    margin-top: 0;
    border-radius: 0 0 8px 8px;
}
.navbar-nav .dropdown-menu .dropdown-item{
    width: 100%;
    font-size: .875rem;
}
.navbar-nav .dropdown-toggle::after{
    display: none;
}
.navbar-nav .dropdown-menu .dropdown-menu-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #ebe9f1;
}
.navbar-nav .dropdown-menu .dropdown-menu-header .title{
    font-size: 1.125rem;
    margin-bottom: 0;
}
.navbar-nav .dropdown-menu .dropdown-menu-header span{
    display: block;
}
.navbar-nav .dropdown-menu .dropdown-menu-header .badge.rounded-pill{
    color: #03AD98;
    background-color: #cef7ee;
    padding: .3rem .5rem;
    font-weight: 500;
    /* background-color: #e9ecef; */
}
.navbar-nav .dropdown-menu .dropdown-item{
    padding: .5rem 1rem;
}
.navbar-nav .dropdown-menu .dropdown-item svg{
    width: 1rem;
    height: 1rem;
    margin-right: .5rem;
}
.navbar-nav .dropdown-menu .dropdown-item i{}
.navbar-nav .dropdown-menu.notification-menu .dropdown-item{
    padding: 0;
}
.dropdown-item.active, .dropdown-item:active {
    color: #1c252c;
    text-decoration: none;
    background-color: transparent;
}
.navbar-nav .dropdown-menu .media{
    display: flex;
    align-items: center;
    padding: .5rem 1rem;
    border-bottom: 1px solid #ebe9f1;
}
.navbar-nav .dropdown-menu .media .media-avatar{
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 50px;
    margin-right: 1rem;
    text-align: center;
    background-color: #cef7ee;
}
.navbar-nav .dropdown-menu .media .media-avatar img{
    width: 2rem;
    height: 2rem;
    border-radius: 50px;
    object-fit: cover;
}
.navbar-nav .dropdown-menu .media .media-avatar .avatar-text{
    color: #03AD98;
    font-size: .9rem;
    font-weight: 500;
}
.navbar-nav .dropdown-menu .media .media-body{}
.navbar-nav .dropdown-menu .media .media-body .notification-heading{
    font-size: .9rem;
    margin-bottom: 0;
}
.navbar-nav .dropdown-menu .media .media-body .notification-text{
    font-size: smaller;
    color: #b9b9c3;
}
.navbar-nav .dropdown-menu .notification-btn{
    text-align: center;
    padding: 1rem;
}
.navbar-nav .nav-item .user-img{
    margin-left: .25rem;
}
.navbar-nav .nav-item .user-img img{
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}
.navbar-nav .nav-item .notification-badge{
    position: absolute;
    transform: translate(50%,-50%);
    border-radius: 50rem;
    background-color: var(--clr-primary)
}
/*========= Media Query =========*/
@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px){
    /* .header .navbar{
        display: none;
    } */
}
@media (max-width: 991.98px) {}
@media (max-width: 767.98px) {}
@media (max-width: 575.98px) {}
/*==================================================
    Page Header Section 
====================================================*/
.page-header{
    background-color: #FFFFFF;
    padding: 1rem 0;
    border-bottom: 1px solid #ececf7;
}
.page-header .container-fluid{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.page-header .page-title,.custom-page-title{
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 0;
}
.page-header .page-title a{
    transition: all 0.4s ease-in;
}
.page-header .page-title a svg{
    margin-left: 6px;
    stroke: var(--clr-black);
}
.page-header .page-title a:hover svg{
    stroke: var(--clr-primary);
}
.page-header .card{
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}
.page-header .btn{
    font-size: .9rem;
    font-weight: 400;
    letter-spacing: .5px;
}
.page-header .btn:hover{
    color: var(--clr-white);
    background-color: var(--clr-black);
}
.page-header .back-btn{}
.page-header .back-btn img{
    margin-right: .375rem;
}
.page-header .add-btn svg{
    stroke: var(--clr-primary);
}
.page-header .add-btn svg:hover{
    stroke: var(--clr-black);
}
.page-title-wrap{
    display: flex;
    align-items: center;
}
.page-title-wrap .action-btn-group{}
.page-title-wrap .action-btn-group ul{
    display: flex;
    align-items: center;
}
.page-title-wrap .action-btn-group ul li{
    margin-left: .75rem;
}
.page-title-wrap .action-btn-group ul li a{
    display: block;
    color: #999595;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3rem;
    border: 1px solid #cbcbcc;
    transition: all 0.4s ease;
}
.page-title-wrap .action-btn-group ul li a:hover{
    border-color: var(--clr-primary);
    background-color: var(--clr-primary);
}
.page-title-wrap .action-btn-group ul li a:hover i{
    color: var(--clr-white);
}
.page-title-wrap .action-btn-group ul li a i{
    font-size: .875rem;
}
.page-header .meta-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.page-header .meta-item{
    margin-top: 1.25rem;
}
.page-header .meta-item span,.page-header .meta-item a{
    font-size: .75rem;
    font-weight: 500;
}
.page-header .meta-item .meta-title{
    color: #999595;
    text-transform: uppercase;
}
.page-header .meta-item .data{
    color: #020202;
    margin-left: .35rem;
}
.page-header .meta-item a{}
/*==================================================
    Filter Section 
====================================================*/
.filter-bar{
    margin-bottom: 1.5rem
}
.filter-bar .container-fluid{
    border-radius: 9px;
    background-color: #F9F9F9;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.filter-bar .input-group{
    border-color: #EAF0EB;
}
.filter-bar .input-group .input-group-text{
    background-color: #FFFFFF;
    border-right: none;
    border-radius: .5rem 0 0 .5rem;
}
.filter-bar .form-control:focus,.filter-bar .form-select:focus, .filter-bar .btn:focus{
    box-shadow: none;
    border-color: #EAF0EB;
}
.filter-bar .form-control,.filter-bar .form-select,.filter-bar .input-group .input-group-text{
    border-color: #EAF0EB;
}
.filter-bar .input-group .form-control,.filter-bar .form-select{
    font-size: 12px;
    font-weight: 400;
    height: 36px;
}
.filter-bar .input-group .form-control{
    padding-left: 0;
    border-left: none;
    border-radius: 0 .5rem .5rem 0;
}
.filter-bar .form-select{
    border-radius: .5rem;
}
.filter-bar .search-box{}
.filter-bar .search-box .input-group{
    position: relative;
}
.filter-bar .search-box .form-control{}
.filter-bar .search-box .input-group .input-group-text,.filter-bar .search-box .input-group .form-control{
    padding-top: .5rem;
    padding-bottom: .5rem;
    height: 36px;
}
/*========= Desktop Filter =========*/
.desktop-filter{}
.desktop-filter form{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: .75rem;
}
.desktop-filter .form-group{
    min-width: 120px;
}
.desktop-filter .form-group input{
    background-color: #FFFFFF;
}
.desktop-filter .form-group button{
    width: 100%;
    font-size: 12px;
    font-weight: 400;
    height: 36px;
}
.desktop-filter .form-group button img{
    margin-right: 6px;
}
.desktop-filter .form-group:first-child{
    width: 196px;
    /* display: flex; */
}
/*======= Media Query ========*/
@media (min-width: 992px) {
    .filter-bar .search-box{
        width: 206px;
    }
    /*======= Mobile Filter ========*/
    .mobile-filter{
        display: none;
    }
}
@media (max-width: 991.98px) {
    .filter-bar .search-box{
        margin-bottom: .75rem;
    }
    .filter-bar .search-box .input-group .input-group-text img{
        width: 14px;
    }
    /*======= Desktop Filter ========*/
    .desktop-filter{
        display: none;
    }
}
@media (max-width: 767.98px) {
    .filter-bar{
        background-color: #f9f9f9;
    }
}
@media (max-width: 575.98px) {}
/*==================================================
    Section 
====================================================*/
.card{
    border: none;
    border-radius: .5rem;
    box-shadow: 0 0.15rem 1.75rem 0 rgb(33, 40, 50, .15);
}
.card .card-header{
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-color: #ececf7;
    background-color: transparent;
}
.card .card-header .title{
    font-size: 1.125rem;
    margin-bottom: 0;
}
.card .card-header .form-check-label{
    color: #777c83;
    font-size: .75rem;
    font-weight: 600;
}
.card .card-header .card-header-end{
    width: 50%;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: flex-end;
}
.card .card-header .form-select{
    width: auto;
}
.card .card-header .form-select,.card .card-header .form-control{
    padding-block: .5rem;
    font-size: .75rem;
}
.card .card-header .form-select option{
    font-size: .875rem;
}
.card .card-body{
    padding: 1.25rem;
    border-radius: 0  0 .5rem .5rem;
    background-color: #FFFFFF;
}
.card .card-body .title{
    font-size: 1.125rem;
}
.search-box{
    flex-grow: 1;
}
.search-box svg{
    width: 1rem;
    height: 1rem;
}
.search-box .input-group-text{
    color: #999595;
    border-right: 0;
    background-color: transparent;
}
.search-box .form-control{
    font-size: .875rem;
    padding: .5rem;
    border-left: 0;
    padding-left: 0;
    box-shadow: none;
}
.card .nav-tabs{
    /* border-bottom:1px solid #ececf7; */
}

.card .tab-content{
    padding: 0;
    min-height: auto;
    background-color: transparent;
}
.card .tab-content thead th{
    padding: .75rem 1.25rem;
}
.card .tab-content tbody td{
    padding: 1rem 1.25rem;
}
.status{
    position: relative;
    display: inline-block;
    color: var(--clr-white);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .5px;
    padding: .35rem .75rem;
    text-transform: uppercase;
    border-radius: .3rem;
    border: 1px solid var(--clr-primary);
    background-color: var(--clr-primary);
}
.card .tab-content tbody td .status{
    font-size: .7rem;
    font-weight: 500;
    padding: .125rem .325rem;
    border-radius: .225rem;
}
.card table tbody td.action-btn{
    padding: .5rem 1rem;
}
.card .action-btn .btn{
    color: #9d9d9e;
    width: 36px;
    height: 36px;
    border-radius: 50rem;
}
.card table .action-btn .dropdown-menu.show{
    display: flex;
    min-width: auto;
    padding: 0;
}
.card table .action-btn .btn{
    padding: .5rem .75rem;
}
.card table .action-btn .dropdown-menu a{
    padding: .5rem .75rem;
}
.card .tab-content tbody td a:hover{
    color: var(--clr-primary);
}
.card .tab-content tbody td .fa-trash-can{
    color: var(--clr-primary);
}
.card .tab-content tbody td .fa-pen-to-square{
    color: var(--clr-black);
}
.dropdown-toggle::after{
    display: none;
}
/*==================================================
    Tab Section 
====================================================*/
.tab-section{
    background-color: #FFFFFF;
}
.nav-tabs{
    border-bottom: none;
}
.nav-tabs .nav-item{}
.nav-tabs .nav-item .nav-link{
    position: relative;
    color: #828282;
    font-size: .875rem;
    padding: 1rem 0;
    margin-right: 1.25rem;
    border: none;
    transition: all 0.5s ease;
}
.nav-tabs .nav-item:last-child .nav-link{
    margin-right: 0;
}
.nav-tabs .nav-item .nav-link:hover::before,.nav-tabs .nav-item .nav-link.active::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--clr-primary);
}
/* .nav-tabs .nav-item .nav-link + .nav-link{
    margin-left: 1rem;
} */
.nav-tabs .nav-item .nav-link:hover,.nav-tabs .nav-item .nav-link.active{
    color: var(--clr-primary);
}
.nav-tabs .nav-item .nav-link.active{
    font-weight: 500;
}
/*==================================================
    Tab Content
====================================================*/
#chart-container{
    height: 400px; 
}
.tab-content{
    min-height: 100vh;
    padding: 1.75rem 0;
    background-color:#f2f6fc;
}
.full-bleed{
    box-shadow: 0 0 0 100vmax #f2f6fc;
    clip-path: inset(0 -100vmax);
}
.tab-content .card{
    /* border-radius: .75rem; */
}
.tab-content .card-header .title{
    color: var(--clr-black);
    font-size: 1.125rem;
}
.tab-content .card-body .title{
    color: #777c83;
    font-size: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    padding-bottom: 10px;
}
.tab-content .card .number{
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: .5rem;
}
.tab-content .card .device span{
    display: block;
    font-size: .875rem;
    margin-bottom: .25rem;
}
.tab-content .card .card-body .form-label{
    color: #777c83;
    font-size: .8rem;
    font-weight: 500;
}
.tab-content .card .btn svg,.tab-content .card .search-box svg{
    width: 1rem;
    height: 1rem;
}
.tab-content .card .value{
    font-size: .875rem;
}
/*======== Accordion ==========*/
.tab-content .card .accordion{}
.tab-content .card .accordion .accordion-item{
    border: none;
}
.tab-content .card .accordion .accordion-item .accordion-button{
    color: #d6d3d6;
    font-size: .875rem;
    background-color: #f1f1f1;
    box-shadow: none;
}
.accordion-button:not(.collapsed) {
    color: var(--clr-black);
    background-color: #f1f1f1;
}
.tab-content .accordion .accordion-item .web-wrap{
    margin-bottom: .5rem;
    border-bottom: 1px solid #ececf7;
}
.tab-content .accordion .accordion-item .web-item{
    color: #777c83;
    font-size: .875rem;
    padding: .5rem 0;
}
.tab-content .accordion .accordion-item .web-item:first-of-type{
    padding-top: 0;
}
.tab-content .accordion .accordion-item .web-wrap:last-of-type{
    border-bottom: none;
}
/*======== Tab Table =============*/
.tab-content table{
    margin-bottom: 0;
}
.tab-content table svg{
    width: 1rem;
    height: 1rem;
}
.tab-content table .no svg circle{
    fill: var(--clr-red);
    stroke: var(--clr-red);
}
.tab-content table .yes svg path{
    fill: var(--clr-green-500);
    stroke:  var(--clr-green-500);
}
.tab-content table .yes svg polyline{
    stroke: #FFFFFF;
}
.tab-content table svg line{
    stroke: #FFFFFF;
}
.tab-content thead{
    border-radius: 0;
    background-color: #F9F9F9;
}
.tab-content thead tr{
    border-top: 0;
    border-bottom: none;
}
.tab-content thead th{
    padding: 1rem;
    color: #828282;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    border-color: rgba(0, 0, 0, .06);
}
.tab-content tbody th{
    padding: .75rem 1rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 28px;
}
.tab-content .table>:not(:first-child) {
    border-top: none;
}
.tab-content tbody td {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    color: #444845;
    padding: .75rem 1rem;
}
.tab-content tbody tr:last-child td,.tab-content tbody tr:last-child th{
    border-bottom: none;
}
.tab-content tbody td a{
    color: var(--clr-black);
    font-weight: 500;
    transition: all  0.4s ease;
}
.tab-content tbody td a:hover{
    color: var(--clr-primary);
}
.tab-content tbody td.action-td{
   text-align: center;
}
/*====== Table Pagination =======*/
.table-pagination{
    padding: 1rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.table-pagination p{
    font-size: .875rem;
    margin-bottom: 0;
}
.table-pagination .pagination{}
.table-pagination .pagination .page-item{}
.table-pagination .pagination .page-link{
    color: var(--clr-black);
    font-size: .875rem;
}
.table-pagination .pagination .page-item.active .page-link,.table-pagination .pagination .page-item:hover .page-link{
    color: #FFFFFF;
    border-color: var(--clr-primary);
    background-color: var(--clr-primary);
}
/*======= Media Query ========*/
@media (min-width: 992px) {}
@media (max-width: 991.98px) {}
@media (max-width: 767.98px) {
	.tab-content table, 
	.tab-content thead, 
	.tab-content tbody, 
	.tab-content th, 
	.tab-content td, 
	.tab-content tr { 
		display: block; 
	}
	/* Hide table headers (but not display: none;, for accessibility) */
	.tab-content thead tr { 
        display: none;
	}
	.tab-content tbody tr { 
        border: 1px solid #EAF0EB;
        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
        padding: 1rem;
        border-radius: .75rem;
        margin-bottom: 1rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
    }
	.tab-content tbody td { 
		border: none;
		border-bottom: 1px solid #EAF0EB; 
		position: relative;
		white-space: normal;
		text-align:left;
	}
	.tab-content tbody td:before { 
        display: block;
	}
    .tab-content tbody td.action-td{
        display: none;
    } 
    .tab-content tbody td:first-child{
        font-weight: 700;
        grid-column-start: span 2;
    }
    .tab-content tbody td:last-child{
        grid-column-end: span 2;
        border-bottom: none;
        padding-bottom: 0;
    }
	/*====== Label the data =========*/
	.tab-content tbody td:before { 
        content: attr(data-title);
        font-size: 12px;
        color: #828282;
    }
    
}
@media (max-width: 575.98px) {
    .nav-tabs .nav-item .nav-link{
        font-size: .75rem;
        margin: 0 .75rem 1rem 0;
    }
    .table-pagination{
        padding: 0 0 1rem;
        display: block;
        text-align: center;
    }
    .table-pagination .pagination{
        margin-top: .75rem;
        justify-content: center;
    }
}

.timeline-container{
    width: 100%;
    display: block;
    position: relative;
}
.timeline-container .timeline-list{
    display: inline-block;
}
.timeline-container .timeline-block{
    /*min-height:50px;
    background: rgba(255,255,0,0.1);*/
    border-left: 1px solid var(--clr-primary);
    padding: 0 0 26px 20px;
    position:relative;
}
.timeline-container .timeline-block:last-child{ 
    border-left:0;
    padding-bottom: 0;
}
.timeline-container .timeline-block::before{
    position: absolute;
    left: -6px;
    top: 0;
    content: " ";
    /* border: 8px solid rgba(255, 255, 255, 0.74); */
    border-radius: 50rem;
    background: #FFFFFF;
    border: 1px solid var(--clr-primary);
    height: 12px;
    width: 12px;
    transition: all 500ms ease-in-out;
}
.timeline-container .timeline-block:hover::before{
    border-color:  var(--clr-primary);
    background: var(--clr-primary);
}
.timeline-container .timeline-block .timeline-title{
    font-size: .9rem;
    line-height: normal;
}
.timeline-container .timeline-block .timeline-title a{
    color: var(--clr-black);
}
.timeline-container .timeline-block .timeline-description{
    color:rgba(0,0,0,1);
    font-size: 13px;
}
.timeline-container .timeline-block .timeline-date{
    color: #8D8D8D;
    position: relative;
    width: auto;
    left: 0;
    font-size: 12px;
}
.timeline-container .timeline-description .timeline-meta-title{
    display: inline-block;
    padding: 2px 6px;
    font-size: 13px;
    margin-bottom: 6px;
    background-color: #e7e5e5;
}
.timeline-container .timeline-description .timeline-meta-item{
    position: relative;
    color: #717171;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px 0 4px 24px;
    margin-bottom: 2px;
}
.timeline-container .timeline-description .timeline-meta-item::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #c1bdbd;
    border-top: transparent;
    border-right: transparent;
}
.timeline-container .timeline-description .timeline-meta-item:last-child{
    margin-bottom: 0;
}
/*======= Media Query ========*/
@media (min-width: 768px) {
    .timeline-container{
        width: 80%;
    }
    .timeline-container .timeline-block{
        margin-left: 220px;
        padding: 0 0 28px 24px;
    }
    .timeline-container .timeline-block .timeline-date{
        position: absolute;
        left: -50%;
        text-align: right;
    }
}
@media (min-width: 992px) {
    .timeline-container{
        width: 50%;
    }
    .timeline-container .timeline-block .timeline-date{
        left: -40%;
    }
}
@media (max-width: 991.98px) {
    .timeline-container .timeline-block .timeline-date{
        margin-bottom: 10px;
    }
}
@media (max-width: 767.98px) {
}
@media (max-width: 575.98px) {}

/*==================================================
    Create Segment 
====================================================*/
.widget-area{
    height: 100%;
    border-left: 1px solid #f7f7f7;
    background-color: var(--clr-white);
}
.widget-area .widget{
    width: 100%;
}
.widget-area .widget-body{
    padding: 1.25rem;
}
.widget-area .widget-body p{
    margin-bottom: 0;
}
.widget-area .widget-header{
    background-color: #e6e4e4;
}
.widget-area .widget .widget-title{
    font-size: 1rem;
}
.create-segment .widget-area{
    position: relative;
}
.create-segment{
    min-height: 90vh;
    background-color: var(--clr-white);
}
.create-segment .segment-content{}
.create-segment .segment-header{}
.create-segment .segment-header .form-label{
    color: var(--clr-black);
    font-size: .9rem;
    font-weight: 500;
}
.create-segment .segment-header .btn{
    font-size: .8em;
    padding-right: 0;
}
.create-segment .btn {
    font-size: 13px;
}
.create-segment .segment-body{}
.create-segment .segment-body .accordion-item .accordion-body .title{
    font-size: .9rem;
    margin-bottom: 0;
}
.create-segment .segment-body .accordion-item .accordion-body .btn-link{
    color: var(--clr-primary);
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
}
.create-segment .segment-body .accordion-item .accordion-body .form-select,
.create-segment .segment-body .accordion-item .accordion-body .form-label{
    font-size: .8rem;
}
.create-segment .segment-body .accordion-item .accordion-body .form-label{
    margin-bottom: 0;
}
.create-segment .accordion .accordion-header{}
.create-segment .accordion .accordion-button{
    font-size: .9rem;
    /* background-color: #e6e4e4; */
    background-color: #f8f7f7;
    box-shadow: none;
}
.accordion .accordion-body svg{
    width: 1.125rem;
    height: 1.125rem;
}
.accordion .accordion-body .feather-trash-2,.accordion .accordion-body .feather-refresh-ccw{
    stroke: #a1a3a8;
}
.accordion .accordion-body .feather-trash-2:hover,.accordion .accordion-body .feather-refresh-ccw:hover{
    stroke: var(--clr-primary);
}
.accordion .accordion-body .feather-plus-circle{
    stroke: var(--clr-primary);
}
.add-filter-wrap{
    border: 1px solid rgba(0, 0, 0, .06);
    border-bottom: none;
    margin-bottom: 1.5rem;
}
.add-filter-wrap .add-filter-header{
    padding: .75rem;
    margin-bottom: 0;
    background-color:  #e6e4e4;
}
.add-filter-wrap .add-filter-header .title{
    margin-bottom: 0;
}
.add-filter-wrap .add-filter-data{
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.5rem .75rem;
    /* border: 1px solid rgba(0, 0, 0, .06);
    border-bottom: transparent; */
}
.add-filter-wrap .add-filter-data + .add-filter-data{
    padding-top: 0;
}
.add-filter-wrap .add-filter-data .condition-text{
    color: #020202;
    padding: 4px 11px;
    border-radius: 4px;
    background-color: #cecbcb;
}
.add-filter-wrap .add-filter-data .form-select{}
.add-filter-wrap .add-filter-data input{
    width: 60px;
}

.add-filter-wrap .add-filter-data .action-btns{
    width: 90px;
}
.add-filter-wrap .add-filter-data .action-btns .btn{
    padding: 8px;
}
.add-filter-wrap .add-filter-data svg{
    width: 1rem;
    height: 1rem;
}
.add-filter-wrap .btn{
    margin-top: -1px;
    font-size: 13px;
}
.create-segment .btn svg{
    margin-right: 8px;
}
/*======= Media Query ========*/
@media (min-width: 768px) {

}
@media (min-width: 992px) {
    .ge-lg-0{
        margin-right: 0;
    }
    .widget-area .widget{
        top: 57px;
    }
    
}
@media (max-width: 991.98px) {

}
@media (max-width: 767.98px) {
}
@media (max-width: 575.98px) {}
/*==================================================
   Segment Details
====================================================*/
.atc-section .dropdown-toggle::after{
    display: none;
}
/*==================================================
   Campaign 
====================================================*/
.campaign-section{
    position: relative;
}
.campaign-nav{
    padding: 0 2rem;
    background-color: var(--clr-white);
}
.campaign-nav ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.campaign-nav li{
    position: relative;
}
.campaign-nav li a{
    position: relative;
    display: block;
    color: var(--clr-black);
    font-size: .875rem;
    padding: .875rem 0;
}
.campaign-nav li a::before{
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: transparent;
}
.campaign-nav li a.active::before,.campaign-nav li a:hover::before{
    background-color: var(--clr-primary);
}
.campaign-nav li a::after{
    content: '\f054';
    position: absolute;
    top: 50%;
    right: -50px;
    transform: translateY(-50%);
    font-family: var(--icon-font);
    font-weight: 900;
}
.campaign-nav li:last-child a:after{
    display: none;
}
.campaign-nav li{
    flex-grow: auto;
}
.campaign-nav li a.active{
    position: relative;
}
.campaign-nav li a.active .active-icon{
    display: inline-block;
    position: relative;
    top: -5px;
    margin-left: 14px;
}
.campaign-nav li a.active .active-icon::after{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: '\f058';
    font-family: var(--icon-font);
    font-weight: 900;
    z-index: 1;
    color: var(--clr-primary);
    font-size: 14px;
}


.campaign-container{
    padding: 0 2rem;
}
.campaign-container .card-header .title{
   
}
.campaign-container .card-header .title .icon{
    display: block;
    width: 30px;
    height: 30px;
    line-height: 24px;
    text-align: center;
    border-radius: 5rem;
    border: 1px solid #dee2e6;
}
.campaign-container .card-header .title .icon i{
    font-size: .8rem;
}
.campaign-container .row .form-control,.campaign-container .row .form-select{
    /* width: inherit; */
}
.campaign-container .row .form-label{
    text-align: end;
    padding-right: 1.75rem;
}
.campaign-container label,.campaign-container a i{
    color: var(--clr-black);
    opacity: .6;
    margin-bottom: 0;
}
.form-check-block label{
    opacity: 1;
}
.campaign-container label, .campaign-container .form-control,.campaign-container select,.campaign-container .text{
    font-size: .8rem;
    font-weight: 500;
}
.campaign-container .form-control,.campaign-container select{
    padding: .5rem .75rem;
}
.campaign-container .text{
    color: rgba(0, 0, 0, .7);
}
/* .campaign-container .btn{
    position: relative;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 5rem;
    margin-left: 6px;
} */
.campaign-container .icon-wrap a{
    color: var(--clr-black);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}
.campaign-container .icon-wrap a.active{
    color: var(--clr-primary);
}
.key-pair{
    display: none;
}
.campaign-container .form-switch .form-check-input{
    position: relative;
}
.campaign-container .form-switch .form-check-input:focus{
    box-shadow: none;
    border-color: #dee2e6;
}
.campaign-container .form-switch .form-check-input::before,
.campaign-container .form-switch .form-check-input::after {
    color: rgb(33, 40, 50, .5);
    text-align: center;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: capitalize;
    position: absolute;
    bottom: 0;
    transition: opacity 0.25s;
}
.campaign-container .form-switch .form-check-input::before {
    content: 'Off';
    right: -2rem;
}
.campaign-container .form-switch .form-check-input::after {
    content: 'On';
    right: -2rem;
    opacity: 0;
}
.campaign-container .form-switch .form-check-input:checked::before{
    opacity: 0;
}
.campaign-container .form-switch .form-check-input:checked:after {
    opacity: 1;
}

.campaign-details .grid{}
.campaign-details .grid .card .title{
    font-size: 14px;
    text-transform: capitalize;
}
.campaign-details .grid .card-body{}
.campaign-details .grid .card-body small{
    color: #ada9a9;
    font-weight: 500;
}
.campaign-details .grid .card-footer{
    border-top: none;
    display: flex;
    align-items: center;
    background-color: transparent;
}
.campaign-details .grid .card-footer .footer-title{
    color: #777c83;
    font-size: 13px;
    margin-bottom: 0;
}
.campaign-details .grid .card-footer .sm-number{
    color: #020202;
    font-weight: 500;
    margin-left: 6px;
}
.info{}
.info.fa-stack{
    color: #777c83;
    font-size: 8px;
}
.status-dot{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3rem;
    margin-right: 4px;
}
.status-dot.red{
    background-color: #eb1e1e;
}
.status-dot.blue{
    background-color: #1e66eb;
}
.status-dot.cyan{
    background-color: #14e4c1;
}
.status-dot.green{
    background-color: #0b9942;
}
.status-dot.purple{
    background-color: #800080;
}
.campaign-details .grid .card-footer .info.fa-stack{
    color: #777c83;
    font-size: 6px;
    margin-left: 3px;
}
.table-bordered tbody tr:last-child{
    border-bottom: none;
}

.preview-screen{
    text-align: center;
}
.preview-screen .card-body{
    text-align: center;
}
.preview-screen img{
   height: 450px;

}

.campaign-container .fa-stack{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    line-height: inherit;
}
.campaign-container .fa-stack .fa-plus{
    position: absolute;
    font-size: 1rem;
}
.campaign-container .fa-stack .fa-circle{
    position: absolute;
    font-size: 1.75rem;
}
.campaign-container svg{
    stroke: var(--clr-black);
}
.add-segment-wrap .btn-ol-solid{
    font-size: .7rem;
    font-weight: 600;
    padding: .3rem 1rem;
    text-transform: uppercase;
    border-width: 1px;
}
.campaign-container .record-table{}
.campaign-container .record-table thead th{
    font-size: .9rem;
    padding: .5rem 1rem;
}
.campaign-container .record-table thead th,.campaign-container .record-table tbody td{
    color: rgba(0, 0, 0, .6);
    font-weight: 500;
    
    border: none;
}
.campaign-container .record-table thead th:first-child,.campaign-container .record-table tbody td:first-child{
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
}
.campaign-container .record-table thead th:last-child,.campaign-container .record-table tbody td:last-child{
    border-right: 1px solid #dee2e6;
}
.campaign-container .record-table tbody td{
    font-size: .8rem;
    padding: 1rem 1rem;
}

.campaign-footer{
    position: fixed;
    bottom: 0;
    left: 240px;
    right: 0;
    padding: 1rem 2rem;
    background-color: var(--clr-white);
}
.campaign-footer .btn-ol-solid{
    font-size: .8rem;
    font-weight: 600;
    padding: .375rem 1.25rem;
    text-transform: uppercase;
    border-width: 1px;
}

.campaign-nav-tab{
    width: 100%;
    padding-inline: 2rem;
    border-top: 1px solid #e8e8e8;
    background-color: var(--clr-white);
}

.campaign-tabContent{}
.campaign-container .card-header .icon-wrap{}
.campaign-container .card-header .icon-wrap a{
    color: #a1a1a1;
    font-size: 1.25rem;
}
.campaign-container .card-header .icon-wrap a.active{
    color: var(--clr-primary);
}
.campaign-container .card-header .icon-wrap img{
    width: 20px;
}
.campaign-container .form-icon-group{
    position: relative;
}
.campaign-container .form-icon-group small{
    color: #989595;
    font-size: .7rem;
}
.campaign-container .form-icon-group .input-group-text-wrap{}
.campaign-container .form-icon-group .input-group-text{
    border: none;
    display: block;
    position: absolute;
    bottom: 24px;
    right: 0;
}
.campaign-container .form-icon-group .input-group-text:first-child{
    margin-right: 20px;
}
.campaign-container .input-group{}
.campaign-container .input-group .form-control{
    border-right: none;
}
.campaign-container .input-group-text{
    color: #a1a1a1;
    border-left: none;
    background-color: transparent;
}
.campaign-container .campaign-footer .btn-text{
    font-size: .8rem;
}
/*==================================================
    Widget Area
====================================================*/
.segment-widget{}
.segment-widget .box{
    position: relative;
    padding: 30px;
    margin-bottom: 30px;
}
#circle_chart {
    width: 150px;
    height: 150px;
    margin-bottom: 10px;
}
.segment-widget .box .progress-text-wrap{
    position: absolute;
    right: 30px;
}
.segment-widget .box .progress-text-wrap span{
    position: relative;
    font-size: .8rem;
    font-weight: 500;
    padding-left: 16px;
}
.segment-widget .box .progress-text-wrap span::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 20px;
    background-color: #8D8D8D;
}
.segment-widget .box .progress-text-wrap span:nth-child(1)::before{
    background-color: #28a745;
}
.segment-widget p{
    font-size: 15px;
}
.segment-widget .segment-data-wrap{}
.segment-widget .segment-data-wrap .data-wrap{
    margin-bottom: 3px;
    padding: 8px 12px;
    background-color: #e6e4e4;
}
.segment-widget .segment-data-wrap span{
    font-size: 14px;
}
.segment-widget .segment-data-wrap .data-title{
    font-weight: 500;
}
.segment-widget .segment-data-wrap .data-value{
    font-weight: 600;
}
/*==================================================
    SMS Section 
====================================================*/
.sms-section{}
.sms-section .card-header{}
.sms-section .card-header .btn-link{
    padding:  .5rem .5rem;
    color: #bbbbbb;
}
.sms-section table{
    margin-bottom: 0;
}
.sms-section .tab-content tbody tr:last-child td,.sms-section .tab-content tbody tr:last-child th {
    padding-bottom: 1rem;
}
.sms-section .tab-content thead tr,.sms-section .tab-content tbody tr{
    vertical-align: middle;
}
.sms-section .tab-content thead th{
    width: 15%;
}
.sms-section .tab-content thead th:nth-child(4){
    width: 25%;
}
.sms-section .tab-content thead th:first-child,.sms-section .tab-content tbody tr th{
    width: 25%;
    border-right: 1px solid #e6e6eb;
}
.sms-section .tab-content tbody td,.sms-section .tab-content tbody td span{
    color: #9c9c9c;
    font-size: .75rem;
    font-weight: 500;
}
.sms-section .tab-content tbody td .status{
    color: #868686;
    font-weight: 600;
    background-color: #e4dede;
    border-color: #e4dede;
    padding: 5px 12px 5px 12px;
}
.sms-section .tab-content tbody td .status.launch {
    background-color: #106d10;
    border-color: #106d10;
    color: white;
}
.sms-section .tab-content tbody td .status.draft {
    background-color: #e55455;
    border-color: #e55455;
    color: white;
}
.sms-section .tab-content tbody td:nth-child(3){
    padding: .9rem 1.25rem;
}
.sms-section .tab-content tbody .dropdown .dropdown-toggle{
    color: #9c9c9c;
}
.sms-section .tab-content tbody .dropdown .btn:active,.sms-section .tab-content tbody .dropdown .btn:focus{
    border-color: none;
    box-shadow: none;
}
/*==================================================
   Modal
====================================================*/
.modal{}
.modal .modal-header,.modal .modal-body{
    padding: 1.25rem;
}
.modal .card{
    box-shadow: none;
}
.modal .card .title{
    font-weight: 500;
}
.modal .card .form-check{
    margin-bottom: .25rem;
}
.modal .card .form-check .form-check-input{
    width: 1.125rem;
    height: 1.125rem;
}
.modal .card .form-check .form-check-label{
    font-size: .8rem;
}
#create_sms_campaign .card {
    text-align: center;
}
#create_sms_campaign .card .btn{
    /* border: none; */
    padding: 2rem 1.25rem 1.25rem;
    background: transparent;
}
#create_sms_campaign .card a{
    display: block;
    color: #000f23;
}
.modal .card .title,#create_sms_campaign .card .title{
    font-size: .9rem;
}
#create_sms_campaign .card .i-box{
    margin: 1.5rem 0;
    text-align: center;
}
#create_sms_campaign .card .i-box img{
    width: 50px;
}
#create_sms_campaign .card p{
    color: #020202;
    font-size: .8rem;
    font-weight: 400;
}
#create_sms_campaign .card .btn-link{
    color: var(--clr-primary);
    font-size: .8rem;
    font-weight: 400;
    text-decoration: none;
}

#create_test_campaign{}
#create_test_campaign {}
/*========================================================
    Form Page
=========================================================*/
.form-section{}
.form-section form{}
.form-section .card .progress {
    height: 3px !important;
    border-radius: 0px !important;
}
.form-section .card .progress-bar{
    background-color: #03AD98;
}
@media (max-width: 560px) {}
.form-section form .title{
    font-size: .9rem;
    margin: 1rem 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #c2c9db;
}
.form-section form .title:first-child{
    margin-top: 0;
}
.form-section form .form-group{
    margin-bottom: 1rem;
}
.form-section form label{
    display: block;
    font-size: .9rem;
}
.form-section form .form-control{
    font-size: .9rem;
}
.form-section form textarea.form-control{
    min-height: 90px;
}
.form-check-input:focus{
    box-shadow: none;
}
.form-check-input:checked{
    background-color: var(--clr-primary);
    border-color: var(--clr-primary);
}
.form-section form .form-switch{
    padding-left: 0;
}
.form-section form .form-switch label{
    display: block;
    margin-bottom: .5rem;
}
.form-section form .form-switch input{
    margin-left: 0;
}
.form-section form .form-check-inline{
    margin-top: .375rem;
}
.form-section form .form-btn{
    width: 100%;
    text-align: right !important;
}
.form-section form .form-btn .btn{
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    padding: .5rem 1.25rem .475rem;
}
.form-section form .form-btn .btn i{
    margin-left: .375rem;
}
/*==================================================
    Custom Attributes
====================================================*/
.custom-field-section{}
.custom-field-section .form-row{
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #dadada;
}
.custom-field-section .form-row + .form-row{
    margin-top: 1.125rem;
}
.custom-field-section form label{
    font-size: .8rem;
    font-weight: 500;
}
.custom-field-section .form-row .form-control,.custom-field-section .form-row .form-select{
    font-size: .8rem;
}
.custom-field-section .form-row .form-control::placeholder{
    font-size: .8rem;
}
.custom-field-section form .btn{
    font-weight: 500;
}
.custom-field-section  .card p{
    font-size: .9rem;
    margin-bottom: .75rem;
}
.custom-field-section .card  a{
    color: var(--clr-primary);
    font-size: .9rem;
}
.custom-field-section form input[type="file"]{
    font-size: .9rem;
}


/*===================================================
    Profile Page
=====================================================*/
.profile-section .card{}
.profile-section .card .card-body{}
.profile-section .card-body .card-title{
    font-size: 1rem;
}
.profile-photo-container .card-body img{
    width: 160px;
    height: 160px;
    border-radius: 50%;
}
/*======= Upload Button ========*/
.upload-btn{
    margin-top: 1.5rem;
}
.upload-btn label{
    font-size: 1rem;
    cursor: pointer;
    color: var(--clr-primary);
    padding: 8px 24px 7px;
    border: 1px solid var(--clr-primary);
    /* background-color: #0b5ed7; */
    border-radius: 6px;
    transition: all 0.3s ease;
}
.upload-btn > input[type='file'] {
    display: none;
}
/*================================================
    Login 
=================================================*/
.account-section{
    position: relative;
    background: #FFF3F0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }
  .account-section::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(239, 86, 86, 0.21) 0%, rgba(239, 86, 86, 0) 100%);
    z-index: -2;
  }
  /*========= Media Query ===========*/
  @media (min-width: 576px){}
  @media (min-width: 768px){}
  @media (min-width: 992px){}
  @media (max-width: 991.98px){}
  @media (max-width: 767.98px){}
  @media (max-width: 575.98px){}
  /*================================================
    Account Form Wrap 
  =================================================*/
  .account-form-wrap{
    /* display: flex;
    align-items: center;
    justify-content: center; */
    
  }
  /*==== Company Logo ==========*/
  .account-logo-wrap{
    text-align: center;
    margin-bottom: 1.25rem;
  }
  .account-logo-wrap img{
    width: 150px;
  }
  /*==== Welcome ==========*/
  .welcome-content{
    text-align: center;
    margin-bottom: 1.25rem;
  }
  .welcome-content .welcome-title{
    font-size: 1.25rem;
  }
  /*==== Form ==========*/
  .account-form{
    /* background: radial-gradient(50% 50% at 50% 50%, rgba(239, 86, 86, 0.21) 0%, rgba(239, 86, 86, 0) 100%); */
  }
  .account-form .form-group{
    margin-bottom: 1.25rem;
  }
  .account-form .form-control{
    font-size: 1rem;
    padding: .5rem 1.25rem;
    border: 1px solid #8D8D8D;
    box-shadow: 0px 4px 6px 1px rgba(0, 0, 0, 0.04);
    border-radius: 3rem;
    background-color: transparent;
  }
  .account-form .form-control::placeholder{
    color: #8D8D8D;
  }
  .account-form  .form-control-lg{
    min-height: auto;
    font-size: inherit;
  }
  .account-form form .btn-link{
    display: block;
    color: var(--clr-primary);
    padding: 0;
    margin-bottom: 1rem;
    text-align: end;
    text-decoration: none;
  }
  .account-form form .btn-submit{
    display: block;
    width: 100%;
    font-size: 1rem;
    font-weight: 500;
    padding: .5rem 1.25rem;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
  }
  .account-form .divider-wrap{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.25rem 0;
  }
  .account-form .divider-wrap::before,.account-form .divider-wrap::after{
    content: '';
    position: absolute;
    width: 15%;
    height: 1px;
    background-color: #8D8D8D;
    /* border: 1px solid #8D8D8D; */
  }
  .account-form .divider-wrap::before{
    left: 0;
  }
  .account-form .divider-wrap::after{
    right: 0;
  }
  .account-form .divider-wrap span{
    display: block;
    font-size: .875rem;
    text-transform: capitalize;
  }
  .optional-wrap ul{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }
  .optional-wrap ul li a{
    display: block;
    padding: .75rem 2rem;
    background: #FFEAE8;
    box-shadow: 1px 3px 11px 0px rgba(232, 80, 91, 0.18);
    /* box-shadow: 1px 3px 11px rgba(232, 80, 91, 0.18); */
    border-radius: 8px;
  }
  .optional-wrap ul li:first-child a{
    border: 1px solid rgba(0, 0, 0, 0.15);
  }
  .optional-wrap ul li:last-child a{
    border: 1px solid rgba(61, 106, 214, 0.25);
  }
  .optional-wrap ul li a img{ 
    height: 1.25rem;
    object-fit: cover;
  }
  /*========= Media Query ===========*/
  @media (min-width: 576px){}
  @media (min-width: 768px){
    .account-form .divider-wrap::before,.account-form .divider-wrap::after{
        width: 25%;
    }
    .account-form .divider-wrap span{
        font-size: 1rem;
    }
    .optional-wrap ul{
        justify-content: space-between;
    }
  }
  @media (min-width: 992px){
    .account-section::before{
        right: auto;
        width: 50%;
    }
    .account-logo-wrap{
        margin-bottom: 2rem;
    }
    .welcome-content .welcome-title{
        font-size: 1.75rem;
    }
    .account-form{
        width: 90%;
        margin: auto;
    }
    .account-form  .form-control-lg {
        min-height: calc(1.5em + 1rem + 2px);
        padding: 0.75rem 1rem;
    }
    .account-form .divider-wrap{
        margin: 2.5rem 0;
    }
    .optional-wrap{
        width: 70%;
        margin: auto;
    }
    .optional-wrap ul li a{
        padding: .75rem 2.5rem;
    }
  }
  @media (max-width: 991.98px){}
  @media (max-width: 767.98px){}
  @media (max-width: 575.98px){}
  /*================================================
    Account Content 
  =================================================*/
  .account-content{
    text-align: end;
  }
  .account-content .account-img img{
    width: 600px;
  }
  /*========= Media Query ===========*/
  @media (min-width: 576px){}
  @media (min-width: 768px){}
  @media (min-width: 992px){}
  @media (max-width: 991.98px){}
  @media (max-width: 767.98px){}
  @media (max-width: 575.98px){}
  :root {
    --clr-red: #FF0000;
    --clr-yellow: #ffe135;
    --clr-gray-800: #e0e0e0;
    --clr-white: #FFFFFF;
    --clr-black: #000000;
    --clr-blue-800: #000f23;
    --clr-blue-500: #1a5ce0;
    --clr-green-500: #28a745;
    --clr-primary: #EF5656;
    --clr-primary-light: #FFF2EF;
    --clr-secondary: #f5f6ce;
    --icon-font: "Font Awesome 6 Free";
    --body-ff: 'Prompt', sans-serif;
    --title-ff: 'Rubik', sans-serif;
    --navabr-ff: 'Montserrat', sans-serif;
    --primary-gradient: linear-gradient(107.56deg, #FCF3F4 0%, #FFF2EF 100%);
  }
  .btn-solid, .btn-ol-solid {
    border-color: var(--clr-primary);
    border-width: 2px;
  }
  .btn-solid {
    color: var(--clr-white);
    background-color: var(--clr-primary);
  }
  .account-form form .btn-link{
    display: block;
    color: var(--clr-primary);
    padding: 0;
    margin-bottom: 1rem;
    text-align: end;
    text-decoration: none;
  }
  .account-form form .btn-submit{
    display: block;
    width: 100%;
    font-size: 1rem;
    font-weight: 500;
    padding: .5rem 1.25rem;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
  }
  .btn-solid,.btn-ol-solid{
    border-color: var(--clr-primary);
    border-width: 2px;
  }
  .btn-solid:hover,.btn-ol-solid:hover{
    color: var(--clr-white) !important;
    border-color: var(--clr-primary) !important;
    background-color: var(--clr-primary) !important;
  }
  .campaign-custom-anchor:hover {
    color: #e55455 !important;
  }
 .pagination .page-item.disabled:hover .page-link {
    background-color: white !important;
    border-color: #dee2e6;
    color: var(--clr-black);
}
/* Notification channel css start */
.box {
	position: relative;
	width: 300px;
	padding: 30px;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 10px;
	box-shadow: 0px 5px 5px 3px rgba(0, 0, 0, 0.12);;

	transition: 0.5s;
}

.menu {
	position: relative;

	margin-top: 20px;
	padding-top: 10px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.menu li {
	list-style: none;
	margin: 8px 0;
}
.menu li label {
	position: relative;
	display: flex;
	justify-content: space-between;
}
.menu li label span {
	display: flex;
	justify-items: center;
	align-items: center;
	user-select: none;
	cursor: pointer;
	color: #333; /*menu text*/
}

.menu li label span ion-icon {
	margin-right: 10px;
}
.menu li label .action {
	position: relative;
}
.menu li label .action input {
	appearance: none;
}
.menu li label .action i /*bars*/ {
	position: relative;
	width: 30px;
	height: 15px;
	background: #ddd;
	border-radius: 15px;
}

.menu li label .action i::before {
	content: ""; /*circle dot*/
	position: absolute;
	top: 2.5px;
	left: 2.5px;
	width: 10px;
	height: 10px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: 0.5s;
}

.menu li label .action input:checked ~ i::before {
	left: calc(16px);
}
.menu li label .action input:checked ~ i {
	background: #e45354;
}
/* Notification channel css end */
.tab-content table svg.read-icons {
    width: 1.2rem !important;
    height: 1.2rem !important;
}
/*==================================================
    SMS Section 
====================================================*/
.channel-tracking-section .card-header .btn-link{
    padding:  .5rem .5rem;
    color: #bbbbbb;
}
.channel-tracking-section table{
    margin-bottom: 0;
}
.channel-tracking-section .tab-content tbody tr:last-child td,.channel-tracking-section .tab-content tbody tr:last-child th {
    padding-bottom: 1rem;
}
.channel-tracking-section .tab-content thead tr,.channel-tracking-section .tab-content tbody tr{
    vertical-align: middle;
}
.channel-tracking-section .tab-content thead th{
    width: 15%;
    color: #0e0d0d;
}
.channel-tracking-section .tab-content thead th:nth-child(4){
    width: 25%;
}
.channel-tracking-section .tab-content thead th:first-child,.channel-tracking-section .tab-content tbody tr th{
    width: 25%;
    border-right: 1px solid #e6e6eb;
}

.channel-tracking-section .tab-content tbody td .status{
    color: #868686;
    font-weight: 600;
    background-color: #e4dede;
    border-color: #e4dede;
    padding: 5px 12px 5px 12px;
}
.channel-tracking-section .tab-content tbody td .status.launch {
    background-color: #106d10;
    border-color: #106d10;
    color: white;
}
.channel-tracking-section .tab-content tbody td .status.draft {
    background-color: #e55455;
    border-color: #e55455;
    color: white;
}
.channel-tracking-section .tab-content tbody td:nth-child(3){
    padding: .9rem 1.25rem;
}
.channel-tracking-section .tab-content tbody .dropdown .dropdown-toggle{
    color: #9c9c9c;
}
.channel-tracking-section .tab-content tbody .dropdown .btn:active,.channel-tracking-section .tab-content tbody .dropdown .btn:focus{
    border-color: none;
    box-shadow: none;
}
.channel-tracking-section .tab-content thead th:nth-child(4) {
    width: 15%;
}