@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    color: #424242;
}
.header {background: #fff; box-shadow: 0 3px 3px #0000000f; position: sticky; top: 0; z-index: 3; padding: 6px 0; min-height: 50px; display: flex;}
.header .container-fluid, .header .row {min-height: 100%;}
.header .row {align-items: center;}
.header .header-left {display: flex; align-items: center; flex-wrap: wrap;}
.header .logo  {margin: 0 0 0 15px;}
.header .logo img { max-width: 200px;}
.header .header-menu { margin: 0; padding: 0; display: flex; align-items: center; list-style: none; } 
.header .header-menu li { margin: 0 10px; } 
.header .header-menu li a { font-size: 16px; font-weight: normal; color: #0D6EFD; }
.header .header-menu li a.active {color: #e4615f;}
.header .header-menu li a:hover{color: #0a58ca;}
.header .menu-title {position: relative; font-size: 18px; color: #000000; margin: 0 0 0 10px; padding-left: 10px; padding-right: 5px;}
.header .menu-title:before {content: "";width: 1.4px;height: 18px;background: #000;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
.header .menu-title:after {content: ""; width: 10px; height: 10px; border: solid #424242; border-width: 2px 2px 0 0; rotate: 43deg; display: inline-block; margin-left: 3px;}
.notification-sec svg { width: 14px; height: 16px; }
.notification-sec svg path {fill: #2d73f5;}
.header .header-right {display: flex; justify-content: flex-end; flex-wrap: wrap; align-items: center;}
.header .logout-btn { background: #f5f5f5; border-color: rgba(0, 0, 0, 0.08); border-width: 1px; font-size: 14px; padding: 3px 6px; display: flex; align-items: center; justify-content: center; border-radius: 4px; line-height: 14px;}
.menu-wrap  {display: flex; align-items: center; position: relative;}
.header .logout-btn img { width: 20px; }
.color-theme-setting  {margin: 0 10px;}
.dropdown-menu {font-size: 14px;}
.color-theme-setting .dropdown-toggle {background: #f5f5f5; border-color: rgba(0, 0, 0, 0.08); color: #424242; font-size: 14px; padding: 3px 8px; min-width: 200px; text-align: left;}
.color-theme-setting .dropdown-toggle:after {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; width: 16px; height: 16px; background-image: url('../assets/icon-down.svg');}
.color-theme-setting .dropdown-toggle:hover {background: #ebebeb;}
.color-theme-setting .dropdown-toggle:focus {box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);}
.search-wraper {position: relative;}
.search-wraper .input-box { position: relative; min-width: 200px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 4px; }
.search-wraper .input-box .dropdown-toggle  { background: white; border: 0; padding: 3px 8px; font-size: 14px; border-radius: 4px; width: 100%; color: #424242; font-size: 14px; font-weight: normal; text-align: left;}
.search-wraper .input-box .dropdown-toggle:focus,
.search-wraper .input-box .sarch-btn:focus {box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08); outline: none;}
.search-wraper .input-box .sarch-btn { position: absolute; right: 0; padding: 0; border: 0; width: 28px; height: 100%; border-left: 1px solid rgba(0, 0, 0, 0.08); top: 0;}
.search-wraper .input-box .sarch-btn img {width: 16px; }
.search-wraper .icon-clear img { width: 16px; }
.search-wraper .icon-clear { position: absolute; top: 0; right: 35px; opacity: 0.5; cursor: pointer;}
.search-wraper .icon-clear:hover {opacity: 1;}
.search-wraper .search-icon {position: relative;}
.search-wraper .search-icon img {width: 20px; height: 20px;}
.notification-sec {margin-right: 10px;}
.color-circle { display: inline-block; width: 18px; height: 18px; border-radius: 100%; background: #333; float: left;}
.color-circle.color-circle-1 {background: #fff;}
.color-circle.color-circle-2, .color-circle.color-circle-3 {margin-left: -6px;}
.header .theme-name {display: inline-block; padding: 0 5px;}
.color-theme-setting .dropdown-menu {width: 100%;}
.color-theme-setting .dropdown-menu .dropdown-item {padding: 4px; font-size: 14px; color: #424242;}
.color-theme-setting .dropdown-menu .dropdown-item:hover {background: #f5f5f5;}
.main-wrap { display: flex; flex-wrap: wrap; }
.sidebar-drawer { width: 240px; height: calc(100vh - 51px); box-shadow: 0 0 10px #0003; position: fixed; left: 0; top: 50px; background: #FFF; overflow: hidden; transition: width 0.3s ease-in-out;}
.sidebar-drawer .icon {min-width: 21px;}
.sidebar-collapse .sidebar-drawer{width: 50px;}
.sidebar-collapse .sidebar-drawer .title {display: none;}
.content-wraper {padding: 20px 20px 0; width: calc(100% - 240px); margin-left: 240px; transition: all 0.4s;}
.sidebar-collapse .content-wraper {width: calc(100% - 50px); margin-left: 50px;}
.sidebar-drawer ul { margin: 16px 0 0; padding: 0; list-style: none; }
.sidebar-drawer ul li a { padding: 8px 16px; display: flex; align-items: center; flex-flow: row nowrap; gap: 16px; font-size: 16px; color: #424242; text-decoration: none; transition: all 0.5s; white-space: nowrap;}
.sidebar-drawer ul li.active a, .sidebar-drawer ul li a:hover { background: #0072ce; color: white; }


/*-------------- Static Page----------------*/
.content-wraper h2 {color: #0072ce; font-weight: 500; font-size: 24px; margin-bottom: 30px;}
.builder-cont-man-search-sec {display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 0;}
.builder-cont-man-search-sec .dropdown {position: relative; width: 200px;}
.builder-cont-man-search-sec .dropdown-toggle { width: 100%; text-align: left; background: transparent; border-color: rgba(0, 0, 0, 0.08); color: #424242; border-radius: 4px; padding: 4px 8px; font-size: 14px; position: relative; }
.text-input input { border: 1px solid  rgba(0, 0, 0, 0.08); color: #424242; border-radius: 4px; padding: 4px 8px; font-size: 14px; min-width: 250px; }
.text-input input:focus { outline: none; }
.builder-cont-man-search-sec .dropdown-toggle:focus { box-shadow: none; }
.builder-cont-man-search-sec .dropdown-toggle:after { position: absolute; right: 8px; top: 11px; }
.builder-cont-man-search-sec .dropdown-toggle:before { content: ''; width: 24px; height: 100%; position: absolute; right: 0; top: 0; background: rgba(0, 0, 0, 0.08); }
.builder-cont-man-search-sec .dropdown-menu { width: 100%; margin: 0; }
.builder-cont-man-search-sec .actions .btn { border-color: rgba(0, 0, 0, 0.08); color: #424242; background-color: #f5f5f5; background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)); font-size: 13px; padding: 3px 8px; margin-right: 8px; }
.builder-cont-man-search-sec .actions .btn:focus { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08); }
.btn-theme { display: inline-block; border: 0; color: white; background-color: #0072ce; background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)); font-size: 13px; padding: 4px 8px; border-radius: 4px; }
.top-right-btn { text-align: right; }
.contacts-table  {margin-top: 10px;}
.contacts-table th { background: rgba(0, 0, 0, 0.08); font-weight: normal; font-size: 13px; padding: 4px; color: #000; }
.contacts-table td { padding: 4px; }
.contacts-table .table>:not(:first-child) {border-width: 0;}
/*---------- Page Not Found---------------*/
.no-page-wrap { position: relative; height: calc(100vh - 75px); display: flex; background: #eae9e9; }
.no-page-wrap .text-wraper { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 400px; max-width: 96%; z-index: 1; background: #ffffff; padding: 15px; margin: auto; box-shadow: #64646f33 0 7px 29px; height: auto; min-width: auto; }
.no-page-wrap .title { color: #0a3243; line-height: 33px; font-size: 35px; text-align: center; font-weight: bolder; margin-bottom: 10px; }
.no-page-wrap p { margin: 0; text-align: center;}
.pop-btn { background: #f5f5f5; border-color: rgba(0, 0, 0, 0.08); border-width: 1px; font-size: 13px; padding: 6px 8px; display: flex; align-items: center; justify-content: center; border-radius: 4px; line-height: 14px; color: #424242; text-decoration: none; margin: 0 5px; }





@media (max-width: 1793px) {
    .color-theme-setting .dropdown-toggle, .search-wraper .input-box {min-width: 170px;}
}
@media (max-width: 1640px) {
    .search-wraper .input-box, .color-theme-setting .dropdown-toggle {min-width: 160px;}
    .header .logo {margin-right: 0;}
    .header .header-menu li a {font-size: 15px;}
    .header .header-menu li {margin: 0 7px;}
    .search-wraper .input-box input, .color-theme-setting .dropdown-toggle, .search-wraper .input-box,
    .header .logout-btn {font-size: 13px;}
}
@media (max-width: 1562px) {
    .search-wraper .input-box, .color-theme-setting .dropdown-toggle {min-width: 110px;}
    .header .row>div:last-child {padding-left: 0;}
}
@media (max-width: 1499px) and (min-width: 1300px) {
    .header .logo img {max-width: 160px;}
    .header .menu-title {font-size: 14px;}
    .header .header-menu li a {font-size: 14px;}
    .header .header-menu li {margin: 0 5px;}
    .header .logo {margin-left: 5px;}
}
@media (max-width: 1499px) {
    .search-wraper .input-box, .color-theme-setting .dropdown-toggle {min-width: 120px;}
    .search-wraper .input-box input, .header .theme-name, .header .logout-btn {font-size: 13px;}
    .color-theme-setting {margin: 0 5px;}
}
@media (max-width: 1376px) and (min-width: 1301px) {
    .search-wraper .input-box input, .header .theme-name, .header .logout-btn {font-size: 11px;}
}
@media (max-width: 1299px) {
    .header .header-menu { flex-direction: column; justify-content: flex-start; align-items: flex-start; position: absolute; top: 30px; background: #FFF; padding: 10px; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; z-index: 999; min-width: 200px; left: 0; display: none;}
    .header .header-menu li {margin: 0 10px 5px;}
    .header .header-menu.show {display: block;}
    .color-theme-setting {margin: 0 5px;}
    .search-wraper .input-box input, .header .theme-name, .header .logout-btn {font-size: 11px;}
    .header .menu-title:after {    margin-left: 8px; top: -3px; position: relative; rotate: 135deg;}
}
@media (max-width: 1287px) and (min-width: 1200px) {
    .pop-btn {
        font-size: 11px;
        padding: 4px 3px;
    }
    .notification-sec {margin-right: 5px;}
    .search-wraper .input-box, .color-theme-setting .dropdown-toggle {min-width: 100px;}
}
@media (max-width: 1199px) {
    .search-wraper .input-box input, .header .theme-name, .header .logout-btn {font-size: 12px;}
}
@media (max-width: 1020px) {
    .header .menu-title {font-size: 15px;}
    .header .logo img {max-width: 125px;}
    .sidebar-drawer {top: 41px;}
}
@media (max-width: 991px) {
    .header .menu-title {font-size: 14px;}
    .top-right-btn {text-align: left; margin-top: 10px;}
}
@media (max-width: 889px) {
    .notification-sec {margin-right: 5px;}
    .color-circle {width: 15px; height: 15px;}
    .pop-btn {font-size: 11px; padding: 6px 4px;}
    .search-wraper .input-box input, .header .theme-name, .header .logout-btn {font-size: 10px;}
    .search-wraper .input-box, .color-theme-setting .dropdown-toggle {min-width: 100px;}
}
@media (max-width: 767px) {
    .header .logout-btn span {display: none;}
    .header .logout-btn {width: 25px; display: flex; justify-content: flex-end; padding: 0;}  
    .search-wraper .input-box {position: absolute; right: 0; top: 100%; min-width: 180px;}
    .search-wraper .input-box:not(.show) {display: none;}
    .color-theme-setting .dropdown-toggle img {width: 16px; height: 16px;}
    .color-theme-setting .dropdown-toggle span {display: none;}
    .color-theme-setting .dropdown-toggle {min-width: inherit; width: 35px;}
    .color-theme-setting .dropdown-toggle:after {opacity: 0;}
    .color-theme-setting .dropdown-toggle, .header .logout-btn {background: transparent; border: 0;}
    .color-theme-setting .dropdown-toggle {width: 30px; padding: 0; display: flex; justify-content: center;}
    .color-theme-setting {margin: 0;}
    .search-wraper {width: 30px; display: flex; justify-content: center;}
    .notification-sec {
        margin: 0 8px 0 0;
    }
    .header .header-right>div:not(:first-child), .header .header-right .logout-btn {position: relative;}
    .header .header-right>div:not(:first-child):before, .header .header-right .logout-btn:before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 20px;
        background: #ddd;
    }
    .header {padding: 10px 0;}
    .sidebar-drawer {width: 0;}
    .content-wraper, .sidebar-collapse .content-wraper {width: 100%; margin: 0;}
    .sidebar-collapse .sidebar-drawer {width: 200px; top: 44px; height: calc(100vh - 44px)}
    .sidebar-collapse .sidebar-drawer .title {display: inline-block;}
    .notification-sec svg path {fill: #424242;}
    .sidebar-drawer ul li a {font-size: 14px;}
    .pop-btn {margin-left: 0; padding: 6px; font-size: 11px;}
}
@media (max-width: 540px) {
    .header .menu-title {margin: 5px 0 0; padding: 0;}
    .header .menu-title:before {opacity: 0;}
    .menu-wrap {width: 100%;}
    .header {padding: 5px 0;}
    .sidebar-drawer, .sidebar-collapse .sidebar-drawer {height: calc(100vh - 61px); top: 61px;}
}
@media (max-width: 369px) {
    .header .logo img {max-width: 105px;}
    .header .logo {margin-left: 10px;}
}