body {



     font-size: 14px !important;

     color: #525f7f !important;

     background-color: #f8f9fe;

     letter-spacing: 0.5px;


     overflow-x: hidden;

     font-family: 'Nunito', sans-serif !important;


 }

 .d-flex-al {
     display: flex !important;
     flex-wrap: wrap;
     align-items: center;
 }

 .d-flex-al-jc {
     display: flex !important;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
 }

 .d-flex-al-jb {
     display: flex !important;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
 }

 .d-flex-al-je {
     display: flex !important;
     flex-wrap: wrap;
     align-items: center;
     justify-content: end;
 }

 .d-flex-wrap {
     display: flex;
     flex-wrap: wrap;
 }

 a {

     text-decoration: none !important;
     color: #3d78e3;
 }

 ul {
     list-style: none;
     padding: 0;
 }

 .wrapper {


     width: 100%;


     position: relative;


 }


 /* Sidebar */


 .sidebar-wrapper {


     width: 250px;


     height: 100%;


     position: fixed;


     top: 0px;


     bottom: 0;


     left: 0px;


     background: #223145;



     border-right: 0px solid rgb(4, 6, 8);


     z-index: 11;


     box-shadow: 0 0 2rem 0 rgb(151 20 77 / 16%);


     transition: all .2s ease-out;


 }


 .sidebar-header {


     width: 250px;


     height: 60px;


     display: flex;


     align-items: center;


     position: absolute;


     top: 0px;


     bottom: 0;


     padding: 0 15px;


     z-index: 5;


     background: #223145;



     background-clip: border-box;


     border-bottom: 1px solid rgba(13, 5, 5, 0.691);


 }


 .logo-icon {


     width: 45px;


 }

 .border-right {
     border-right: 1px solid #e2e8f0;
 }

 .logo-text {


     font-size: 22px;


     margin-left: 5px;


     margin-bottom: 0;


     letter-spacing: 1px;


     color: #8833ff;


 }


 .toggle-icon {


     font-size: 22px;


     cursor: pointer;


     color: rgb(68, 94, 135)
 }


 /* Header */


 .topbar {


     position: fixed;


     top: 0;


     left: 250px;


     right: 0;


     height: 60px;


     background: #223145;


     border-bottom: 1px solid rgb(11, 4, 4);


     background-clip: border-box;


     z-index: 10;


     box-shadow: 0 0.125rem 0.25rem rgb(136 152 170 / 15%);


 }


 .topbar .navbar {


     width: 100%;


     height: 60px;


     padding-left: 30px;


     padding-right: 30px;


 }


 .page-wrapper {


     height: 100%;


     margin-top: 60px;


     margin-bottom: 30px;


     margin-left: 250px;


 }


 .page-content {


     padding: 1.5rem;


 }





 .page-footer {


     background: #ffffff;


     left: 250px;


     right: 0;


     bottom: 0;


     position: fixed;


     text-align: center;


     padding: 7px;


     font-size: 14px;


     border-top: 1px solid #e4e4e4;


     z-index: 3;


 }


 .wrapper.toggled .topbar {


     left: 70px;


 }


 .wrapper.toggled .page-wrapper {


     margin-left: 70px;


 }


 .wrapper.toggled .page-footer {


     left: 70px;


 }




 /*Metismenu*/


 .sidebar-wrapper ul {


     padding: 0;


     margin: 0;


     list-style: none;


     background: transparent;


 }


 .sidebar-wrapper .metismenu {


     background: transparent;


     display: -webkit-box;


     display: -ms-flexbox;


     display: flex;


     padding: 10px;


     margin-top: 60px;


     -webkit-box-orient: vertical;


     -webkit-box-direction: normal;


     -ms-flex-direction: column;


     flex-direction: column;


 }


 .sidebar-wrapper .metismenu li+li {


     margin-top: 5px;


 }


 .sidebar-wrapper .metismenu li:first-child {


     margin-top: 5px;


 }


 .sidebar-wrapper .metismenu li:last-child {


     margin-bottom: 5px;


 }


 .sidebar-wrapper .metismenu>li {


     /*-webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;*/


     display: -webkit-box;


     display: -ms-flexbox;


     display: flex;


     -webkit-box-orient: vertical;


     -webkit-box-direction: normal;


     -ms-flex-direction: column;


     flex-direction: column;


     position: relative;


 }


 .sidebar-wrapper .metismenu a {


     position: relative;


     display: flex;


     align-items: center;


     justify-content: left;


     padding: 8px 15px;


     font-size: 15px;


     color: #89929b;


     outline-width: 0;


     text-overflow: ellipsis;


     overflow: hidden;


     letter-spacing: .5px;


     border: 1px solid #ffffff00;


     transition: all .3s ease-out;


 }


 .sidebar-wrapper .metismenu a .parent-icon {


     font-size: 24px;


     line-height: 1;


 }


 .sidebar-wrapper .metismenu a .menu-title {

     font-size: 13px;
     font-weight: normal;
     margin-left: 10px;


 }


 .sidebar-wrapper .metismenu ul a {


     padding: 6px 15px 6px 15px;


     font-size: 15px;


     border: 0;


 }


 .sidebar-wrapper .metismenu ul a i {


     margin-right: 10px;


 }


 .sidebar-wrapper .metismenu ul {


     border: 0px solid rgb(250, 250, 250);


     background: #4c83cb3a;


 }


 .sidebar-wrapper .metismenu ul ul a {


     padding: 8px 15px 8px 30px;


 }


 .sidebar-wrapper .metismenu ul ul ul a {


     padding: 8px 15px 8px 45px;


 }


 .sidebar-wrapper .metismenu a:hover,


 .sidebar-wrapper .metismenu a:focus,


 .sidebar-wrapper .metismenu a:active,


 .sidebar-wrapper .metismenu .mm-active>a {


     color: #fff;

     text-decoration: none;

     background: rgba(180, 198, 229, 0.37)
 }

 label {
     /* padding-top: 2%; */
     display: inline-block;
     max-width: 100%;
     margin-bottom: 5px;
     /* font-size: 13.5px; */
     padding-left: 3px;
     color: #000;
 }

 .custom-checkbox label {
     /* padding-top: 2%; */
     display: inline-block;
     max-width: 100%;
     /* margin-bottom: 5px; */
     /* font-weight: 700; */
     padding-left: 3px;
 }

 .menu-label {


     padding: 20px 15px 5px 5px;


     color: #b0afaf;


     text-transform: uppercase;


     font-size: 12px;


     letter-spacing: 0.5px;


 }


 .metismenu .has-arrow:after {


     position: absolute;


     content: "";


     width: .50em;


     height: .50em;


     border-style: solid;


     border-width: 1.2px 0 0 1.2px;


     border-color: initial;


     right: 15px;


     transform: rotate(-45deg) translateY(-50%);


     transform-origin: top;


     top: 50%;


     transition: all .3s ease-out;


 }


 @media screen and (min-width: 1025px) {


     .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .logo-text {


         display: none;


     }


     .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper {


         width: 70px;


     }


     .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {


         width: 70px;


     }


     .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .toggle-icon {


         display: none;


     }


     .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {


         justify-content: center;


     }


     .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {


         width: 70px;


     }


     .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu a {


         justify-content: center;


     }


     .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .menu-title {


         display: none;


     }


     .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu li ul {


         display: none;


     }


     .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu li.menu-label {


         display: none;


     }


     .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .has-arrow:after {


         display: none;


     }


     .email-toggle-btn {


         display: none !important;


     }


     .chat-toggle-btn {


         display: none !important;


     }


 }


 /* Ecommerce Product */

 .product-show {
     font-size: 18px;
     left: 15px;
 }

 .product-discount {
     width: 2.5rem;
     height: 2.5rem;
     font-size: 14px;
     background-color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
 }

 .color-indigator-item {
     width: 1.2rem;
     height: 1.2rem;
     background-color: rgb(230, 224, 224);
     border-radius: 50%;
     cursor: pointer;
 }

 .product-grid .card {


     -webkit-transition: all 0.2s;


     -o-transition: all 0.2s;


     transition: all 0.2s;


 }



 @media (min-width: 992px) {


     .product-grid .card:hover {


         margin-top: -.25rem;


         margin-bottom: .25rem;


         -webkit-box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);


         box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);


     }


 }


 .dash-wrapper {

     margin: -1.5rem -1.5rem -5.5rem -1.5rem;

     padding: 1.5rem 1.5rem 6.5rem 1.5rem;

 }



 /* Extra CSS */


 .back-to-top {


     display: none;


     width: 40px;


     height: 40px;


     line-height: 40px;


     text-align: center;


     font-size: 26px;


     color: white;


     position: fixed;


     border-radius: 10px;


     bottom: 20px;


     right: 12px;


     background-color: #8833ff;


     z-index: 5;


 }


 .back-to-top:hover {


     color: white;


     background-color: #000;


     transition: all .5s;


 }


 .breadcrumb-title {


     font-size: 20px;


     border-right: 1.5px solid #aaa4a4;


 }


 .page-breadcrumb .breadcrumb li.breadcrumb-item {


     font-size: 16px;


 }


 .page-breadcrumb .breadcrumb-item+.breadcrumb-item::before {


     display: inline-block;


     padding-right: .5rem;


     color: #6c757d;


     font-family: 'LineIcons';


     content: "\ea5c";


 }


 .icon-badge {


     width: 45px;


     height: 45px;


     background: #f2f2f2;


     display: flex;


     align-items: center;


     justify-content: center;


     border-radius: 50%;


 }


 .widgets-icons {


     width: 50px;


     height: 50px;


     display: flex;


     align-items: center;


     justify-content: center;


     background-color: #ededed;


     font-size: 26px;


     border-radius: 10px;


 }


 #geographic-map {


     width: 100%;


     height: 350px;


 }


 .product-img {


     width: 45px;


     height: 45px;


     background-color: white;


     display: flex;


     align-items: center;


     justify-content: center;


     border-radius: 10px;


     border: 1px solid #e6e6e6;


 }


 .product-img img {


     width: 45px;


     height: 45px;


     padding: 1px;


 }

 hr {
     margin: 12px 0;
     border: 0;
     border-top: 1px solid #000;
     opacity: .1;

     -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
     box-sizing: content-box;
     height: 0;
 }

 .product-list {


     position: relative;


     height: 450px;


 }




 .dashboard-top-countries {


     position: relative;


     height: 330px;


 }


 .customers-list {


     position: relative;


     height: 450px;


 }

 .store-metrics {


     position: relative;


     height: 450px;


 }


 .best-selling-products {


     position: relative;


     height: 450px;

 }

 .recent-reviews {


     position: relative;


     height: 450px;


 }

 .support-list {


     position: relative;


     height: 450px;


 }

 .product-list .row {


     background-color: #f8f9fa;


     -webkit-transition: all 0.2s;


     -o-transition: all 0.2s;


     transition: all 0.2s;


 }


 @media (min-width: 992px) {


     .product-list .row:hover {


         background-color: #fff;


         margin-top: -.25rem;


         margin-bottom: .25rem;


         -webkit-box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2);


         box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2);


     }


 }


 .recent-product-img {


     width: 40px;


     height: 40px;


     background-color: #ffffff;


     display: flex;


     align-items: center;


     justify-content: center;


     border-radius: 10px;


     border: 1px solid #e6e6e6;


 }


 .recent-product-img img {


     width: 40px;


     height: 40px;


     padding: 6px;


 }


 .theme-icons {


     background-color: #FFF;


 }


 .lead-table .table {


     border-collapse: separate;


     border-spacing: 0 10px;


 }


 .fm-menu .list-group a {


     font-size: 16px;


     color: #5f5f5f;


     display: flex;


     align-items: center;


 }


 .fm-menu .list-group a i {


     font-size: 23px;


 }


 .fm-menu .list-group a:hover {


     background: #8833ff;


     color: #ffffff;


     transition: all .2s ease-out;


 }


 .fm-file-box {


     font-size: 25px;


     background: #e9ecef;


     width: 44px;


     height: 44px;


     display: flex;


     align-items: center;


     justify-content: center;


     border-radius: .25rem;


 }


 .fm-icon-box {


     font-size: 32px;


     background: #ffffff;


     width: 52px;


     height: 52px;


     display: flex;


     align-items: center;


     justify-content: center;


     border-radius: .25rem;


 }


 .user-plus {


     width: 33px;


     height: 33px;


     margin-left: -14px;


     line-height: 33px;


     background: #ffffff;


     border-radius: 50%;


     text-align: center;


     font-size: 22px;


     cursor: pointer;


     border: 1px dotted #a9b2bb;


     color: #404142;


 }


 .user-groups img {


     margin-left: -14px;


     border: 1px solid #e4e4e4;


     padding: 2px;


     cursor: pointer;


 }


 .contacts-social a {


     font-size: 16px;


     width: 36px;


     height: 36px;


     line-height: 36px;


     background: #ffffff;


     border: 1px solid #eeecec;


     text-align: center;


     border-radius: 50%;


     color: #2b2a2a;


 }


 .customers-contacts a {


     font-size: 16px;


     width: 34px;


     height: 34px;


     display: flex;


     align-items: center;


     justify-content: center;


     background: #ffffff;


     border: 1px solid #eeecec;


     text-align: center;


     border-radius: 50%;


     color: #2b2a2a;


 }


 .order-actions a {


     font-size: 18px;


     width: 34px;


     height: 34px;


     display: flex;


     align-items: center;


     justify-content: center;


     background: #f1f1f1;


     border: 1px solid #eeecec;


     text-align: center;


     border-radius: 20%;


     color: #2b2a2a;


 }


 .customers-list .customers-list-item {


     -webkit-transition: all 0.2s;


     -o-transition: all 0.2s;


     transition: all 0.2s;


 }


 @media (min-width: 992px) {


     .customers-list .customers-list-item:hover {


         background-color: #f8f9fa;


         border-radius: 10px;


         margin-top: -.25rem;


         margin-bottom: .25rem;


         -webkit-box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2);


         box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2);


     }


 }


 .right-15 {


     right: 15px !important;


 }


 .font-13 {


     font-size: 13px;


 }


 .font-14 {


     font-size: 14px;


 }


 .font-18 {


     font-size: 18px !important;


 }


 .font-20 {


     font-size: 20px;


 }


 .font-22 {


     font-size: 22px;


 }


 .font-24 {


     font-size: 24px;


 }


 .font-30 {


     font-size: 30px;


 }


 .font-35 {


     font-size: 35px;


 }


 .font-50 {


     font-size: 50px;


 }


 .font-60 {


     font-size: 60px;


 }


 .radius-30 {


     border-radius: 30px;


 }


 .radius-10 {


     border-radius: 10px;


 }


 .radius-15 {


     border-radius: 15px;


 }


 .cursor-pointer {


     cursor: pointer;


 }


 .border-light-2 {

     border-color: rgb(255 255 255 / 12%) !important;

 }

 .chip {


     display: inline-block;


     height: 32px;


     padding: 0 12px;


     margin-right: 1rem;


     margin-bottom: 1rem;


     font-size: 14px;


     font-weight: 500;


     line-height: 32px;


     color: rgba(0, 0, 0, 0.70);


     cursor: pointer;


     background-color: #f1f1f1;


     border: 1px solid rgba(0, 0, 0, 0.15);


     border-radius: 16px;


     -webkit-transition: all .3s linear;


     transition: all .3s linear;


     box-shadow: none;


 }


 .chip img {


     float: left;


     width: 32px;


     height: 32px;


     margin: 0 8px 0 -12px;


     border-radius: 50%;


 }


 .chip .closebtn {


     padding-left: 10px;


     font-weight: bold;


     float: right;


     font-size: 16px;


     cursor: pointer;


 }


 .chip.chip-md {


     height: 42px;


     line-height: 42px;


     border-radius: 21px;


 }


 .chip.chip-md img {


     height: 42px;


     width: 42px;


 }


 /*Invoice Page*/


 #invoice {


     padding: 0px;


 }


 .invoice {


     position: relative;


     background-color: #FFF;


     min-height: 680px;


     padding: 15px
 }


 .invoice header {


     padding: 10px 0;


     margin-bottom: 20px;


     border-bottom: 1px solid #8833ff
 }


 .invoice .company-details {


     text-align: right
 }


 .invoice .company-details .name {


     margin-top: 0;


     margin-bottom: 0
 }


 .invoice .contacts {


     margin-bottom: 20px
 }


 .invoice .invoice-to {


     text-align: left
 }


 .invoice .invoice-to .to {


     margin-top: 0;


     margin-bottom: 0
 }


 .invoice .invoice-details {


     text-align: right
 }


 .invoice .invoice-details .invoice-id {


     margin-top: 0;


     color: #8833ff
 }


 .invoice main {


     padding-bottom: 50px
 }


 .invoice main .thanks {


     margin-top: -100px;


     font-size: 2em;


     margin-bottom: 50px
 }


 .invoice main .notices {


     padding-left: 6px;


     border-left: 6px solid #8833ff;


     background: #e7f2ff;


     padding: 10px;


 }


 .invoice main .notices .notice {


     font-size: 1.2em
 }


 .invoice table {


     width: 100%;


     border-collapse: collapse;


     border-spacing: 0;


     margin-bottom: 20px
 }


 .invoice table td,


 .invoice table th {


     padding: 15px;


     background: #eee;


     border-bottom: 1px solid #fff
 }


 .invoice table th {


     white-space: nowrap;


     font-weight: 400;


     font-size: 16px
 }


 .invoice table td h3 {


     margin: 0;


     font-weight: 400;


     color: #8833ff;


     font-size: 1.2em
 }


 .invoice table .qty,


 .invoice table .total,


 .invoice table .unit {


     text-align: right;


     font-size: 1.2em
 }


 .invoice table .no {


     color: #fff;


     font-size: 1.6em;


     background: #8833ff
 }


 .invoice table .unit {


     background: #ddd
 }


 .invoice table .total {


     background: #8833ff;


     color: #fff
 }


 .invoice table tbody tr:last-child td {


     border: none
 }


 .invoice table tfoot td {


     background: 0 0;


     border-bottom: none;


     white-space: nowrap;


     text-align: right;


     padding: 10px 20px;


     font-size: 1.2em;


     border-top: 1px solid #aaa
 }


 .invoice table tfoot tr:first-child td {


     border-top: none
 }


 .invoice table tfoot tr:last-child td {


     color: #8833ff;


     font-size: 1.4em;


     border-top: 1px solid #8833ff
 }


 .invoice table tfoot tr td:first-child {


     border: none
 }


 .invoice footer {


     width: 100%;


     text-align: center;


     color: #777;


     border-top: 1px solid #aaa;


     padding: 8px 0
 }


 @media print {


     .invoice {


         font-size: 11px !important;


         overflow: hidden !important
     }


     .invoice footer {


         position: absolute;


         bottom: 10px;


         page-break-after: always
     }


     .invoice>div:last-child {


         page-break-before: always
     }


 }


 .main-row {


     height: 100vh;


 }


 .main-col {


     max-width: 500px;


     min-height: 300px;


 }

 .fadeInLeft {
     -webkit-animation-name: fadeInLeft;
     animation-name: fadeInLeft
 }

 .sidebar {
     width: 230px !important;
     background: #e8e8e8;
     position: absolute;
     padding-left: 6px;
     padding-right: 7px;
     bottom: 0;
     left: 0;
     top: 0
 }

 .sidebar>ul>li:nth-child(2) a {
     margin-top: 8px
 }

 .sidebar li a {
     color: #f1f5f9;
     padding: 8px 13px;
     font-size: 13.9px;
     margin-top: .25rem;
     font-weight: 400
 }

 .sidebar li a i.menu-icon {
     margin-right: 13px;
     display: block;
     float: left;
     width: 18px;
     font-size: 17px;
     opacity: .65
 }

 .sidebar .nav>li>a:focus,
 .sidebar .nav>li>a:hover,
 .sidebar li.active>a {
     color: #f1f5f9;
     background: #8cb9f9;
     border-radius: 5px;
     transition: ease-in-out .2s
 }

 .sidebar .nav>li>a:focus .menu-icon,
 .sidebar .nav>li>a:hover .menu-icon,
 .sidebar li.active>a .menu-icon {
     opacity: .99
 }

 .sidebar li .nav-second-level li a {
     padding: 7px 10px 7px 43px;
     color: #cbd5e1;
     font-size: 14px;
     margin-top: 0
 }

 .sidebar li .nav-second-level a .menu-icon {
     margin-right: 8px
 }

 .sidebar li .nav-second-level li.active a {
     color: #fff !important;
     border-radius: 15px;
     background-color: #2b65e8;
     display: inline-block;
     padding: 5px 15px;
     margin: 8px 0 8px 30px
 }

 .sidebar li .nav-second-level li.active a .menu-icon {
     color: #fff
 }

 .sidebar li .nav-second-level a:focus .menu-icon,
 .sidebar li .nav-second-level a:hover .menu-icon {
     color: #cbd5e1
 }

 .sidebar .nav>li .nav-second-level>li:not(.active)>a:focus,
 .sidebar .nav>li .nav-second-level>li:not(.active)>a:hover {
     background-color: #1e293b;
     color: #f1f5f9
 }

 .animated {
     animation-duration: 1s;
     animation-fill-mode: both
 }

 #setup-menu-wrapper {
     /* overflow:auto; */
     display: none;
     z-index: 9;
     min-height: 100%
 }

 .todo-done {


     text-decoration: line-through;


 }


 /*Chat box*/


 .chat-wrapper {


     width: auto;


     height: 600px;


     border-radius: 0.25rem;


     position: relative;


     background: #ffffff;


     box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, .10);


 }


 .chat-sidebar {


     width: 340px;


     height: 100%;


     position: absolute;


     background: #ffffff;


     left: 0;


     top: 0;


     bottom: 0;


     z-index: 2;


     overflow: hidden;


     border-right: 1px solid rgba(0, 0, 0, .125);


     border-top-left-radius: 0.25rem;


     border-bottom-left-radius: 0.25rem;


 }


 .chat-sidebar-header {


     width: auto;


     height: auto;


     position: relative;


     background: #ffffff;


     border-bottom: 1px solid rgba(0, 0, 0, .125);


     border-right: 0px solid rgba(0, 0, 0, .125);


     border-top-left-radius: 0.25rem;


     padding: 15px;


 }


 .chat-sidebar-content {


     padding: 0px;


 }


 .chat-user-online {


     position: relative;


 }


 .chat-sidebar-header .chat-user-online:before {


     content: '';


     position: absolute;


     bottom: 7px;


     left: 40px;


     width: 8px;


     height: 8px;


     border-radius: 50%;


     box-shadow: 0 0 0 2px #fff;


     background: #16e15e;


 }


 .chat-list .chat-user-online:before {


     content: '';


     position: absolute;


     bottom: 7px;


     left: 36px;


     width: 8px;


     height: 8px;


     border-radius: 50%;


     box-shadow: 0 0 0 2px #fff;


     background: #16e15e;


 }


 .chat-content {


     margin-left: 340px;


     padding: 85px 15px 15px 15px;


 }


 .chat-header {


     position: absolute;


     height: 70px;


     left: 340px;


     right: 0;


     top: 0;


     padding: 15px;


     background: #ffffff;


     border-bottom: 1px solid rgba(0, 0, 0, .125);


     border-top-right-radius: 0.25rem;


     z-index: 1;


 }


 .chat-footer {


     position: absolute;


     height: 70px;


     left: 340px;


     right: 0;


     bottom: 0;


     padding: 15px;


     background: #f8f9fa;


     border-top: 1px solid rgba(0, 0, 0, .125);


     border-bottom-right-radius: 0.25rem;


 }


 .chat-footer-menu a {


     display: inline-block;


     width: 40px;


     height: 40px;


     line-height: 40px;


     font-size: 18px;


     color: #6c757d;


     text-align: center;


     border-radius: 50%;


     margin: 3px;


     background-color: white;


     border: 1px solid rgb(0 0 0 / 15%);


 }


 .chat-tab-menu li a.nav-link {


     padding: .3rem 0.2rem;


     line-height: 1.2;


     color: #4a4b4c;


 }


 .chat-tab-menu .nav-pills .nav-link.active,


 .chat-tab-menu .nav-pills .show>.nav-link {


     color: #8833ff;


     background-color: rgb(0 123 255 / 0%);


 }


 .chat-title {


     font-size: 14px;


     color: #272b2f;


 }


 .chat-msg {


     font-size: 13px;


     color: #6c757d;


 }


 .chat-time {


     font-size: 13px;


     color: #6c757d;


 }


 .chat-list {


     position: relative;


     height: 300px;


 }


 .chat-list .list-group-item {


     border: 1px solid rgb(0 0 0 / 0%);


     background-color: transparent;


 }


 .chat-list .list-group-item:hover {


     border: 1px solid rgb(0 0 0 / 0%);


     background-color: rgb(13 110 253 / 0.12)
 }


 .chat-list .list-group-item.active {


     background-color: rgb(13 110 253 / 0.12)
 }


 .chart-online {


     color: #16e15e;


 }


 .chat-top-header-menu a {


     display: inline-block;


     width: 40px;


     height: 40px;


     line-height: 40px;


     font-size: 18px;


     color: #6c757d;


     text-align: center;


     border-radius: 50%;


     margin: 3px;


     background-color: white;


     border: 1px solid rgb(0 0 0 / 15%);


 }


 .chat-content {


     position: relative;


     width: auto;


     height: 520px;


 }


 .chat-content-leftside .chat-left-msg {


     width: fit-content;


     background-color: #eff2f5;


     padding: 0.80rem;


     border-radius: 12px;


     max-width: 480px;


     text-align: left;


     border-top-left-radius: 0;


 }


 .chat-content-rightside .chat-right-msg {


     width: fit-content;


     background-color: #dcedff;


     padding: 0.80rem;


     border-radius: 12px;


     float: right;


     max-width: 480px;


     text-align: left;


     border-bottom-right-radius: 0;


 }


 .chat-toggle-btn {


     width: 40px;


     height: 40px;


     line-height: 40px;


     margin-right: 15px;


     text-align: center;


     font-size: 24px;


     color: #6c757d;


     border-radius: 50%;


     cursor: pointer;


     background-color: white;


     border: 1px solid rgb(0 0 0 / 15%);


 }


 /*Email box*/


 .email-wrapper {


     width: auto;


     height: 600px;


     overflow: hidden;


     border-radius: 0.25rem;


     position: relative;


     background: #ffffff;


     box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, .10);


 }


 .email-sidebar {


     width: 250px;


     height: 100%;


     position: absolute;


     background: #fff;


     left: 0;


     top: 0;


     bottom: 0;


     z-index: 2;


     overflow: hidden;


     border-right: 1px solid rgba(0, 0, 0, .125);


     border-top-left-radius: 0.25rem;


     border-bottom-left-radius: 0.25rem;


 }


 .email-sidebar-header {


     width: auto;


     height: auto;


     position: relative;


     background: #ffffff;


     border-bottom: 1px solid rgba(0, 0, 0, .125);


     border-right: 0px solid rgba(0, 0, 0, .125);


     border-top-left-radius: 0.25rem;


     padding: 15px;


 }


 .email-navigation {


     position: relative;


     padding: 0px;


     height: 345px;


     border-bottom: 1px solid rgba(0, 0, 0, .125);


 }


 .email-header {


     position: absolute;


     height: 70px;


     left: 250px;


     right: 0;


     top: 0;


     padding: 15px;


     background: #ffffff;


     border-bottom: 1px solid rgba(0, 0, 0, .125);


     border-top-right-radius: 0.25rem;


     z-index: 1;


 }


 .email-content {


     position: absolute;


     left: 0;


     right: 0;


     width: auto;


     top: 70px;


     height: auto;


     margin-left: 250px;


     padding: 0;


     background: #ffffff;


     border-top-left-radius: 0.25rem;


     border-top-right-radius: 0.25rem;


 }


 .email-navigation a.list-group-item {


     color: #404142;


     padding: .35rem 1.25rem;


     background-color: white;


     border-bottom: 1px solid rgb(0 0 0 / 0%);


     transition: all .3s ease-out;


 }


 .email-navigation a.list-group-item:hover {


     background-color: rgb(136 51 255 / 15%)
 }


 .email-navigation a.list-group-item.active {


     color: #8833ff;


     font-weight: 600;


     background-color: rgb(136 51 255 / 15%)
 }


 .email-meeting {


     position: absolute;


     left: 0;


     right: 0;


     bottom: 0;


 }


 .email-meeting a.list-group-item {


     color: #404142;


     padding: .35rem 1.25rem;


     background-color: white;


     border-bottom: 1px solid rgb(0 0 0 / 0%);


 }


 .email-meeting a.list-group-item:hover {


     background-color: rgb(136 51 255 / 15%);


     transition: all .3s ease-out;


 }


 .email-hangout .chat-user-online:before {


     content: '';


     position: absolute;


     bottom: 8px;


     left: 45px;


     width: 8px;


     height: 8px;


     border-radius: 50%;


     box-shadow: 0 0 0 2px #fff;


     background: #16e15e;


 }


 .email-toggle-btn {


     width: auto;


     height: auto;


     margin-right: 10px;


     text-align: center;


     font-size: 24px;


     color: #404142;


     border-radius: 0;


     cursor: pointer;


     background-color: white;


     border: 0px solid rgb(0 0 0 / 15%);


 }


 .email-actions {


     width: 230px;


     ;


 }


 .email-time {


     font-size: 13px;


     color: #6c757d;


 }


 .email-list div.email-message {


     background: #ffffff;


     border-bottom: 1px solid rgb(0 0 0 / 8%);


     color: #383a3c;


 }


 .email-list div.email-message:hover {


     transition: all .2s ease-out;


     background-color: #eceef1;


 }


 .email-list {


     position: relative;


     height: 530px;


 }


 .email-star {


     color: #6c757d;


 }


 .email-read-box {


     position: relative;


     height: 530px;


 }


 /*Compose Mail*/


 .compose-mail-popup {


     width: 42%;


     position: fixed;


     bottom: -30px;


     right: 30px;


     z-index: 15;


     display: none;


 }


 .compose-mail-toggled {


     display: block;


 }


 .compose-mail-title {


     font-size: 16px;


 }


 .compose-mail-close {


     width: 25px;


     height: 25px;


     line-height: 25px;


     text-align: center;


     font-size: 14px;


     border-radius: 2px;


     background-color: rgb(255 255 255 / 0%);


 }


 .compose-mail-close:hover {


     background-color: rgb(255 255 255 / 20%);


 }


 /* Navs and Tabs */


 .nav-primary.nav-tabs .nav-link.active {


     color: #8833ff;


     border-color: #8833ff #8833ff #fff;


 }


 .nav-danger.nav-tabs .nav-link.active {


     color: #e62e2e;


     border-color: #e62e2e #e62e2e #fff;


 }


 .nav-success.nav-tabs .nav-link.active {


     color: #29cc39;


     border-color: #29cc39 #29cc39 #fff;


 }


 .nav-warning.nav-tabs .nav-link.active {


     color: #ffc107;


     border-color: #ffc107 #ffc107 #fff;


 }


 .nav-pills-danger.nav-pills .nav-link.active {


     color: #fff;


     background-color: #e62e2e;


 }


 .nav-pills-success.nav-pills .nav-link.active {


     color: #fff;


     background-color: #29cc39;


 }


 .nav-pills-warning.nav-pills .nav-link.active {


     color: #000;


     background-color: #ffc107;


 }


 .nav-search input.form-control {


     background-color: rgb(255 255 255 / 20%);


     border: 1px solid rgb(255 255 255 / 45%);


     color: #fff;


 }


 .nav-search button[type='submit'] {


     background-color: rgb(255 255 255 / 20%);


     border: 1px solid rgb(255 255 255 / 32%);


     color: #fff;


 }


 .nav-search input.form-control::placeholder {


     opacity: 0.5 !important;


     color: #fff !important;


 }

 .form-control {

     display: block;
     width: 100%;
     padding: 0.375rem 0.75rem;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
     color: #212529;
     background-color: #fff;
     background-clip: padding-box;
     border: 1px solid #ced4da;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     border-radius: 3px;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #bc000000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }

 .modal-header {
     /* background: #223145; */
     color: #fff;
     /* border: 0; */
 }

 .modal-title {
     color: #223145;
     font-size: 16px;
 }

 .card {
     /* box-shadow: 0 0 0; */
     margin: 16px 0;
     border-color: #0000001a;
 }

 .form-control-list {
     display: block;
     padding: 0.375rem 0.75rem;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
     color: #212529;
     background-color: #fff;
     background-clip: padding-box;
     border: 1px solid #ced4da;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     border-radius: 0.50rem;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #bc000000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }

 .form-control-list:focus {

     /* -webkit-box-shadow: none !important; */
     outline: 2px ridge rgba(12, 100, 252, 0.789);

 }

 .btn {

     display: inline-block;
     font-weight: 500;
     line-height: 1.5;

     text-align: center;
     text-decoration: none;
     vertical-align: middle;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     /* border: 1px solid transparent !important; */
     font-size: 13px !important;

 }

 .btn-danger {
     color: #fff !important;
     background-color: #f17171 !important;
     border-color: #f17171 !important;
 }

 .btn:focus {

     box-shadow: 0 0 0 !important;
 }

 .btn-success {
     color: #fff !important;
     background-color: #67b173 !important;
     border-color: #67b173 !important;
 }

 .btn-info {
     color: #fff !important;
     background-color: #29badb !important;
     border-color: #29badb !important;
 }

 .btn-warning {
     color: #fff;
     background-color: #ffc84b !important;
     border-color: #ffc84b !important;
 }

 .btn-soft-primary {
     color: #3d78e3 !important;
     background-color: rgb(61 120 227 / 21%) !important;
     border-color: transparent;
 }

 .btn-soft-secondary {
     color: #fff;
     background-color: #5b71b9;
     border-color: #5b71b9;
 }

 .btn.pull-right.btn-primary {
     padding: 3px 5px;
 }

 .form-control:focus {
     border-color: #d1d1d1;
     box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 0%) !important;
     outline: 2px ridge rgb(12 100 252 / 0%);

 }

 .nav-search input.form-control::-ms-input-placeholder {


     color: #fff !important;


 }


 .round-pagination.pagination .page-item:first-child .page-link {


     border-top-left-radius: 30px;


     border-bottom-left-radius: 30px;


 }


 .round-pagination.pagination .page-item:last-child .page-link {


     border-top-right-radius: 30px;


     border-bottom-right-radius: 30px;


 }


 /* Background Colors */

 .bg-white-2 {


     background-color: rgb(255 255 255 / 12%) !important;


 }


 .bg-light-primary {


     background-color: rgb(136 51 255 / 15%) !important;


 }


 .bg-light-success {


     background-color: rgb(41 204 57 / 15%) !important;


 }


 .bg-light-danger {


     background-color: rgb(230 46 46 / 15%) !important;


 }


 .bg-light-warning {


     background-color: rgb(255 193 7 / 0.11) !important;


 }


 .bg-light-info {


     background-color: rgb(13 202 240 / 18%) !important;


 }


 .bg-gradient-cosmic {


     background: linear-gradient(to right, rgb(142, 45, 226), rgb(74, 0, 224)) !important;


 }


 .bg-gradient-burning {


     background: linear-gradient(to right, rgb(255, 65, 108), rgb(255, 75, 43)) !important;


 }


 .bg-gradient-lush {


     background: linear-gradient(to right, rgb(86, 171, 47), rgb(168, 224, 99)) !important;


 }


 .bg-gradient-Ohhappiness {

     background: linear-gradient(to right, rgb(0, 176, 155), rgb(150, 201, 61)) !important;


 }


 .bg-gradient-kyoto {


     background: linear-gradient(to right, rgb(247, 151, 30), rgb(255, 210, 0)) !important;


 }


 .bg-gradient-blues {


     background: linear-gradient(to right, rgb(86, 204, 242), rgb(47, 128, 237)) !important;


 }


 .bg-gradient-moonlit {


     background: linear-gradient(to right, rgb(15, 32, 39), rgb(32, 58, 67), rgb(44, 83, 100)) !important;


 }


 .split-bg-primary {


     background-color: #7122e0;


     border-color: #7122e0;


 }


 .split-bg-secondary {


     background-color: #515a62;


     border-color: #515a62;


 }


 .split-bg-success {


     background-color: #1db52c;


     border-color: #1db52c;


 }


 .split-bg-info {


     background-color: #0bb2d3;


     border-color: #0bb2d3;


 }


 .split-bg-warning {


     background-color: #e4ad07;


     border-color: #e4ad07;


 }


 .split-bg-danger {


     background-color: #e20e22;


     border-color: #e20e22;


 }


 .bg-facebook {


     background-color: #3b5998 !important;


 }


 .bg-twitter {


     background-color: #55acee !important;


 }


 .bg-google {


     background-color: #e52d27 !important;


 }


 .bg-linkedin {


     background-color: #0976b4 !important;


 }


 .text-sky-light {

     color: #cba6ff;

 }

 /* circle chart */


 .circles {
     margin-bottom: -10px;
 }

 .circle {
     width: 100px;
     margin: 0;
     display: inline-block;
     position: relative;
     text-align: center;
     line-height: 1.2;
 }

 .circle canvas {
     vertical-align: middle;
 }

 .circle strong {
     position: absolute;
     top: 30px;
     left: 0;
     width: 100%;
     text-align: center;
     line-height: 40px;
     font-size: 24px;
 }

 .circle strong i {
     font-style: normal;
     font-size: 0.6em;
     font-weight: normal;
 }

 .circle span {
     display: block;
     color: #aaa;
     margin-top: 12px;
 }



 /* Authentication */


 .section-authentication-signin {


     height: 100vh;


 }


 .authentication-forgot {


     height: 100vh;


     padding: 0 1rem;


 }


 .authentication-reset-password {


     height: 100vh;


     padding: 0 1rem;


 }


 .authentication-lock-screen {


     height: 100vh;


     padding: 0 1rem;


 }


 .error-404 {


     height: 100vh;


     padding: 0 1rem;


 }


 .error-social a {


     display: inline-block;


     width: 40px;


     height: 40px;


     line-height: 40px;


     font-size: 18px;


     color: #fff;


     text-align: center;


     border-radius: 50%;


     margin: 5px;


     box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;


 }


 .authentication-header {
     position: absolute;
     background: #8833ff;
     top: 0;
     left: 0;
     right: 0;
     height: 50%;
 }

 .bg-login {


     background-image: url(../images/login-images/bg-login-img.jpg);


     background-size: cover;


     background-position: center;


     background-repeat: no-repeat;


     background-attachment: fixed;


 }


 .bg-forgot {


     background-image: url(../images/login-images/bg-forgot-password.jpg);


     background-size: cover;


     background-position: center;


     background-repeat: no-repeat;


     background-attachment: fixed;


 }


 .bg-lock-screen {


     background-image: url(../images/login-images/bg-lock-screen.jpg);


     background-size: cover;


     background-position: center;


     background-repeat: no-repeat;


     background-attachment: fixed;


 }


 .login-separater span {


     position: relative;


     top: 26px;


     margin-top: -10px;


     background: #ffffff;


     padding: 5px;


     font-size: 12px;


     color: #cbcbcb;


     z-index: 1;


 }


 /* Buttons */


 /* .btn i {


	vertical-align: middle;


	font-size: 1.3rem;


	margin-top: -1em;


	margin-bottom: -1em;


	margin-right: 5px;


} */

 .btn-group-round button:first-child {

     border-top-left-radius: 10px;

     border-bottom-left-radius: 10px;

 }

 .btn-group-round button:last-child {

     border-top-right-radius: 10px;

     border-bottom-right-radius: 10px;

 }

 .btn-facebook {


     box-shadow: 0 2px 2px 0 rgba(59, 89, 152, 0.14), 0 3px 1px -2px rgba(59, 89, 152, 0.2), 0 1px 5px 0 rgba(59, 89, 152, 0.12);


     background-color: #3b5998;


     border-color: #3b5998;


     color: #fff;


 }


 .btn-facebook:hover {


     color: #fff;


 }


 .btn-white {
     background-color: #fff;
     /* padding: 0px 10px; */
     border-color: #e7eaf3 !important;
 }

 .btn-group .btn-white {
     padding: 0px 10px;
 }


 .chart-container1 {


     position: relative;


     height: 340px;


 }


 .gmaps,


 .gmaps-panaroma {


     height: 400px;


     background: #eeeeee;


     border-radius: 3px;


 }


 /* Pricing Table*/


 .pricing-table .card {


     -webkit-transition: all 0.2s;


     -o-transition: all 0.2s;


     transition: all 0.2s;


     -webkit-border-radius: 15px;


     border-radius: 15px;


 }


 .pricing-table .card .card-header {


     border-top-left-radius: 15px;


     border-top-right-radius: 15px;


 }


 @media (min-width: 992px) {


     .pricing-table .card:hover {


         margin-top: -.25rem;


         margin-bottom: .25rem;


         -webkit-box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);


         box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);


     }


 }


 .pricing-table .card .card-title {


     font-size: 1rem;


     letter-spacing: .2rem;


     font-weight: 500;


 }


 .pricing-table .card .card-price {


     font-size: 2.7rem;


 }


 .pricing-table .card .card-price .term {


     font-size: .875rem;


 }


 .pricing-table .card ul li.list-group-item {


     border-bottom: 1px solid rgb(0 0 0 / 0%);


     color: #3b3b3b;


     font-size: 16px;


 }


 /*Forms */


 input::placeholder {


     color: #000 !important;


     opacity: .3 !important
 }


 .card-group {


     margin-bottom: 1.5rem;


 }



 .search-bar {


     display: none;


 }


 .full-search-bar {


     display: flex;


     align-items: center;


     width: auto;


     position: absolute;


     left: 0;


     right: 0;


     z-index: 100;


     background: #ffffff;


     border-bottom: 1px solid rgb(228 228 228 / 0%);


     background-clip: border-box;


     height: 61px;


     padding: 0rem 1.4rem;


 }


 .search-bar-box {


     width: 100%;


 }


 .search-close {

     font-size: 24px;


     right: 10px;


     cursor: pointer;


 }



 .search-control {


     background-color: #fff;


     border: 1px solid #f2efef00;


     padding-left: 2.5rem;


 }

 .search-control:focus {

     border: 1px solid #ffffff;

     box-shadow: none;


 }



 .search-show {


     font-size: 18px;


     left: 15px;


 }


 .topbar .top-menu-left .nav-item .nav-link {


     padding-right: 0.5rem;


     padding-left: 0.5rem;


     color: #252323;


     font-size: 22px;


 }




 .topbar .navbar .navbar-nav .nav-link {


     padding-right: 0.8rem;


     padding-left: 0.8rem;


     color: #252323;


     font-size: 22px;


 }


 .dropdown-toggle-nocaret:after {


     display: none !important;
 }


 .alert-count {


     position: absolute;


     top: 5px;


     left: 22px;


     width: 18px;


     height: 18px;


     display: flex;


     align-items: center;


     justify-content: center;


     border-radius: 50%;


     font-size: 12px;


     font-weight: 500;


     color: #fff;


     background: #f62718;


 }


 .user-img {


     width: 42px;


     height: 42px;


     border-radius: 50%;


     border: 0px solid #e5e5e5;


     padding: 0px;


 }


 .user-info .user-name {


     font-size: 15px;


     font-weight: 500;


     color: #413c3c;


 }


 .user-info .designattion {


     font-size: 13px;


     color: #a9a8a8;


 }


 .user-box {


     display: flex;


     align-items: center;


     height: 60px;


     border-left: 1px solid #f0f0f0;


     margin-left: 1rem;


 }


 .dropdown-large {


     position: relative;


 }


 .dropdown-large .dropdown-menu {


     width: 360px;


     border: 0;


     padding: 0rem 0;


     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);


 }


 .topbar .navbar .dropdown-large .dropdown-menu::after {


     content: '';


     width: 13px;


     height: 13px;


     background: #ffffff;


     position: absolute;


     top: -6px;


     right: 16px;


     transform: rotate(45deg);


     border-top: 1px solid #ddd;


     border-left: 1px solid #ddd;


 }


 .topbar .navbar .dropdown-menu::after {


     content: '';


     width: 13px;


     height: 13px;


     background: #ffff;


     position: absolute;


     top: -6px;


     right: 16px;


     transform: rotate(45deg);


     border-top: 1px solid #ddd;


     border-left: 1px solid #ddd;


 }


 .dropdown-large .msg-header {


     padding: 0.8rem 1rem;


     border-bottom: 1px solid #ededed;


     background-clip: border-box;


     background: #ffffff;


     text-align: left;


     display: flex;


     align-items: center;


     border-top-left-radius: .25rem;


     border-top-right-radius: .25rem;


 }


 .dropdown-large .msg-header .msg-header-title {


     font-size: 15px;


     color: #1c1b1b;


     margin-bottom: 0;


     font-weight: 500;


 }


 .dropdown-large .msg-header .msg-header-clear {


     font-size: 12px;


     color: #585858;


     margin-bottom: 0;


 }


 .dropdown-large .msg-footer {


     padding: 0.8rem 1rem;


     color: #1c1b1b;


     border-top: 1px solid #ededed;


     background-clip: border-box;


     background: transparent;


     font-size: 14px;


     font-weight: 500;


     border-bottom-left-radius: .25rem;


     border-bottom-right-radius: .25rem;


 }


 .dropdown-large .user-online {


     position: relative;


 }


 .dropdown-large .msg-name {


     font-size: 14px;


     margin-bottom: 0;


 }


 .dropdown-large .msg-info {


     font-size: 13px;


     margin-bottom: 0;


 }


 .dropdown-large .msg-avatar {


     width: 45px;


     height: 45px;


     border-radius: 50%;


     margin-right: 15px;


 }


 .dropdown-large .msg-time {


     font-size: 12px;


     margin-bottom: 0;


     color: #919191;


 }


 .dropdown-large .user-online:after {


     content: '';


     position: absolute;


     bottom: 1px;


     right: 17px;


     width: 8px;


     height: 8px;


     border-radius: 50%;


     box-shadow: 0 0 0 2px #fff;


     background: #16e15e;


 }


 .dropdown-large .dropdown-menu .dropdown-item {


     padding: .50rem 1.3rem;


     border-bottom: 1px solid #ededed;


 }


 .header-message-list {


     position: relative;


     height: 360px;


 }


 .header-notifications-list {


     position: relative;


     height: 360px;


 }


 .dropdown-large .notify {


     width: 45px;


     height: 45px;


     line-height: 45px;


     font-size: 22px;


     text-align: center;


     border-radius: 50%;


     background-color: #f1f1f1;


     margin-right: 15px;


 }


 .app-box {


     width: 45px;


     height: 45px;


     display: flex;


     align-items: center;


     font-size: 26px;


     justify-content: center;


     cursor: pointer;


     border-radius: 10px;


     background-color: #f6f6f6;


 }


 .app-title {


     font-size: 14px;


 }


 .user-box .dropdown-menu i {


     vertical-align: middle;


     margin-right: 10px;


 }


 .dropdown-menu {


     -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);


     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);


     border: 0px solid #e9ecef;


     font-size: 14px;


 }


 .topbar .navbar .dropdown-menu {


     -webkit-animation: .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown;


     animation: .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown;


 }


 @-webkit-keyframes animdropdown {


     from {


         -webkit-transform: translate3d(0, 6px, 0);


         transform: translate3d(0, 6px, 0);


         opacity: 0
     }


     to {


         -webkit-transform: translate3d(0, 0, 0);


         transform: translate3d(0, 0, 0);


         opacity: 1
     }


 }


 @keyframes animdropdown {


     from {


         -webkit-transform: translate3d(0, 6px, 0);


         transform: translate3d(0, 6px, 0);


         opacity: 0
     }


     to {


         -webkit-transform: translate3d(0, 0, 0);


         transform: translate3d(0, 0, 0);


         opacity: 1
     }


 }


 .mobile-search-icon {


     display: block;


 }


 .mobile-toggle-menu {


     display: none;


     font-size: 26px;


     color: #404142;


     cursor: pointer;


 }


 /*Switcher*/


 .switcher-wrapper {


     width: 280px;


     height: 100%;


     position: fixed;


     right: -280px;


     top: 0;


     bottom: 0;


     z-index: 16;


     background: #fff;


     border-left: 0px solid #d2d2d2;


     box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, .13);


     transition: all .2s ease-out;


 }


 .switcher-btn {


     width: 40px;


     height: 40px;


     line-height: 40px;


     font-size: 24px;


     background: #8833ff;


     box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, .13);


     color: #fff;


     text-align: center;


     border-top-left-radius: 10px;


     border-bottom-left-radius: 10px;


     position: absolute;


     top: 40%;


     right: 100%;


     cursor: pointer;


 }


 .switcher-wrapper.switcher-toggled {


     right: 0px;


 }


 .switcher-body {


     padding: 1.25rem;


 }

 .btn-default {

     color: #333;
     background-color: #fff;
     border-color: #ccc;
     padding: 4px 4px;
     font-size: small;
 }

 .btn-default:hover {


     transition: all .2s ease-out;


     background-color: #eceef1;


 }


 .custom-checkbox .custom-control-input:checked~.custom-control-label::before {
     background-color: green !important;
 }

 .custom-checkbox .custom-control-input:checked:focus~.custom-control-label::before {
     box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 255, 0, 0.25)
 }

 .custom-checkbox .custom-control-input:focus~.custom-control-label::before {
     box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 0, 0, 0.25)
 }

 .custom-checkbox .custom-control-input:active~.custom-control-label::before {
     background-color: #C8FFC8;
 }

 .switcher-body .form-check .form-check-input,


 .switcher-body .form-check .form-check-label {


     cursor: pointer;


 }


 .header-colors-indigators .indigator {


     width: 45px;


     height: 45px;


     background: #f4f2f2;


     border-radius: 10px;


     cursor: pointer;


 }










 /* Responsive */


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


     .email-header {


         height: auto;


     }


     .email-content {


         padding: 100px 0px 0px 0px;


     }


 }


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


     .topbar {


         left: 0px !important;


     }


     .mobile-search-icon {


         display: block;


     }


     .mobile-toggle-menu {


         display: block;


     }


     .sidebar-wrapper {


         left: -300px;


         box-shadow: none;


     }


     .page-wrapper {


         margin-left: 0px;


     }



     .page-footer {


         left: 0px;


     }





     .wrapper.toggled .sidebar-wrapper {


         left: 0px;


     }


     .wrapper.toggled .page-wrapper {


         margin-left: 0px;


     }


     .wrapper.toggled .overlay {


         position: fixed;


         top: 0;


         right: 0;


         bottom: 0;


         left: 0;


         background: #000;


         opacity: 0.6;


         z-index: 10;


         display: block;


         cursor: move;


         transition: all .2s ease-out;


     }


     .error-404 {


         height: auto;


         padding: 6.0rem 1rem;


     }


     .chat-header {


         border-top-left-radius: 0.25rem;


     }


     .chat-footer {


         border-bottom-left-radius: 0.25rem;


     }


     .chat-sidebar {


         left: -370px;


     }


     .chat-content {


         margin-left: 0px;


     }


     .chat-header {


         left: 0px;


     }


     .chat-footer {


         left: 0px;


     }


     /* chat toggled css */


     .chat-toggled .chat-sidebar {


         left: 0px;


     }


     .chat-toggled .overlay {


         position: absolute;


         top: 0;


         right: 0;


         bottom: 0;


         left: 340px;


         background: #000;


         opacity: 0.5;


         z-index: 11;


         display: block;


         cursor: move;


         transition: all .3s ease-out;


     }


     .email-header {


         border-top-left-radius: 0.25rem;


     }


     .email-sidebar {


         left: -280px;


     }


     .email-content {


         margin-left: 0px;


     }


     .email-header {


         left: 0px;


     }


     /* email toggled */


     .email-toggled .email-sidebar {


         left: 0px;


     }


     .email-toggled .overlay {


         position: absolute;


         top: 0;


         right: 0;


         bottom: 0;


         left: 250px;


         background: #000;


         opacity: 0.5;


         z-index: 9;


         display: block;


         cursor: move;


         transition: all .3s ease-out;


     }


 }


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


     .section-authentication-signin {


         height: 100%;


         margin-top: 6rem;


         margin-bottom: 2rem;


     }


     .authentication-reset-password {


         height: auto;


         padding: 2.0rem 1rem;


     }


     .authentication-lock-screen {


         height: auto;


         padding: 2.0rem 1rem;


     }


     .compose-mail-popup {


         width: auto;


         position: fixed;


         bottom: -30px;


         right: 0;


         left: 0;


     }


 }


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


     .user-box .user-info {


         display: none;


     }


     .authentication-forgot {


         height: auto;


         padding: 2.5rem 1rem;


     }


 }


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


     .topbar .navbar .dropdown-menu::after {


         display: none;


     }


     .topbar .navbar .dropdown {


         position: static !important;


     }


     .topbar .navbar .dropdown-menu {


         width: 100% !important;


     }


 }


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


     .chat-footer-menu,


     .chat-top-header-menu {


         display: none;


     }


 }

 .owl-thumbs .owl-thumb-item {
     width: 80px;
     height: 80px;
     margin: 0 4px;
     padding: 2px;
     background-color: transparent;
     border: 1px solid rgb(0 0 0 / 12%);
     border-radius: 0%;
 }

 .owl-thumbs .owl-thumb-item:focus {
     border-radius: 0%;
 }

 .owl-thumbs .owl-thumb-item img {
     width: 100%;
 }

 .tags-box .tag-link {
     padding: .3rem;
     background-color: #f8f9fa;
     border: 1px solid #d2d2d2;
     color: #41464b;
     font-size: 13px;
     margin: 4px;
     display: inline-block;
 }

 .w-95 {
     width: 95%;
     margin: auto;
 }

 .modal-header .btn-close {
     padding: 0.5rem 0.5rem;
     margin: -0.5rem -0.5rem -0.5rem auto;
     color: #fff;
     /* filter: invert(1);  */

 }

 table thead {
     background: #f3f6f9;
     border: 1px solid #e9ebec;
     padding: 0.75rem 0.6rem;
 }

 table thead th {
     padding: 0.75rem 0.6rem !important;
 }

 .card h6 {
     /* text-transform: uppercase; */
     color: #223145;
 }

 .bx-rotate-right {
     font-size: 20px;
 }

 .posi-rel {
     position: relative;
 }

 .posi-rel .form-control {
     padding-left: 40px;
 }

 .posi-rel i {
     font-size: 14px;
     position: absolute;
     left: 34px;
     top: 2px;
     height: 100%;
     display: flex;
     align-items: center;
     color: #878a99;
 }

 ::placeholder {
     font-size: 14px;
     color: #878a99;
 }

 .head-title {
     font-size: 15px;
     color: #3d78e3;
 }

 .upload-btn-wrapper {
     position: relative;
     overflow: hidden;
     display: inline-block;
 }



 .upload-btn-wrapper input[type=file] {
     font-size: 100px;
     position: absolute;
     left: 0;
     top: 0;
     opacity: 0;
 }

 /* .modal-footer {
     border: 0px solid;
 } */

 .nav-pills .nav-link {
     color: #000;
     background: #e0f3ff94;
     margin-right: 7px;
     font-size: 13px;

 }

 .w-90 {
     width: 90%;
     margin: auto;
 }

 .invoice-card {
     padding: 14px;
     margin: 0;
 }

 .invoice-card h6 {
     margin: 0;
     color: blue;
 }

 .remain-der h6 {
     font-size: 13px;
 }

 .remain-der p {
     display: flex;
     align-items: center;
 }

 .remain-der p i {
     padding-right: 5px;
     font-size: 20px;
 }


 #attachements label {
     background-color: white;
     color: #007fff;
     padding: 1rem 2rem;
     border-radius: 0.3rem;
     cursor: pointer;
     text-transform: uppercase;
     text-align: center;
     font-weight: bold;
     line-height: 1.5rem;
     box-shadow: 4px 4px 16px 0 rgba(100, 100, 100, 0.15),
         -2px -2px 12px 0 rgba(200, 200, 200, 0.1);
     transition: all 0.3s ease-in-out;


 }

 /* kanban */
 .card.draggable {
     margin: 3px;
     cursor: move;
 }

 .droppable {
     background: #0080001a;
     border: 1px dashed #8BC34A;
     border-radius: 2px;
     min-height: 120px;
     margin-bottom: 1rem;
 }

 .lead {
     font-size: 14px;
 }

 .kanban-style .design-boxs .card.draggable {
     border-left: 2px solid #9C27B0;
 }

 .kanban-style .design-boxs:nth-child(4n+2) .card.draggable {
     border-left: 2px solid #007fff;
 }

 .kanban-style .design-boxs:nth-child(4n+3) .card.draggable {
     border-left: 2px solid #e4ad07;
 }

 .kanban-style .design-boxs:nth-child(4n+4) .card.draggable {
     border-left: 2px solid #1db52c;
 }

 .kanban-style .design-boxs .card-body .card-do {
     background: linear-gradient(#d343eb, #540d60);
     color: #fff;
     padding: 0 10px;
     border-radius: 3px;
     text-align: center;
     font-size: 14px;
 }

 .kanban-style .design-boxs:nth-child(4n + 2) .card-body .card-title {
     background: linear-gradient(#2196F3, #3F51B5);
     color: #fff;
 }

 .kanban-style .design-boxs:nth-child(4n + 3) .card-body .card-title {
     background: linear-gradient(#FFEB3B, #FFC107);
     color: #000;
 }

 .kanban-style .design-boxs:nth-child(4n + 4) .card-body .card-title {
     background: linear-gradient(#80ded59c, #29998e);
     color: #000;
 }

 .kanban-style .design-boxs:nth-child(4n + 5) .card-body .card-title {
     background: linear-gradient(#46ce4b, #137017);
     color: #fff;
 }

 .kanban-style p {
     font-size: 12px;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
     color: #1d1a1a !important;
     display: -webkit-box;
     line-height: 1.8;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .kanban-style p i {
     font-size: 15px;

 }

 .kanban-style img {
     width: 20px;
     height: 20px;
     margin-right: 5px;
 }

 .kanban-style .icon-box p {
     display: flex;
     margin: 2px 0;
     align-items: center;
 }

 .kanban-style .icon-box p span {
     font-size: 13px;
     margin: 0 2px;
 }

 #kambam,
 #project-task {
     display: none;
 }

 .over-scrolls {
     max-height: 400px;
     overflow-y: auto;
 }

 #kambam .bg-light,
 #project-kambam .bg-light {
     height: 100%;
 }

 /* kanban end */
 .fc-event {
     border: 1px solid #ff6600;
     background-color: #ff6600;
 }

 .form-check label {
     padding: 0;
 }

 .line-form {
     width: 100%;
     height: 1px;
     background: #a1a1a145;
 }

 .form-botom .form-check {
     padding-top: 8px;
     padding-bottom: 8px;
     border-bottom: 1px solid #a1a1a145;
 }

 .project-icon img,
 .img-projec img {
     width: 28px;
     height: 28px;
     border-radius: 100%;
 }

 .hover-project .row-options {
     opacity: 0;
 }

 .hover-project:hover .row-options {
     opacity: 1;
     color: #000;
 }
 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: static !important;
}
.taxes{
    width: auto !important;
}
td .row-options a{
    color: #000 !important;
}

 .dropdown-menu a {
     font-size: 13px;
 }

 .project-details .dropdown-menu {
     /* width: 131px; */
     overflow-y: scroll;
     left: -79px !important;
 }

 .project-details .dropdown-menu a {
     font-size: 13px;
     white-space: break-spaces;
 }

 .project-details h6 {
     margin: 0;
 }

 .form-select:focus {
     border-color: #000;
     outline: 0;
     box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 0%);
 }

 /* scroll tab */
 .wrapper-design {
     position: relative;
     /* margin: 0 auto; */
     overflow-x: clip;
     /* padding: 5px; */
     height: 35px;
 }

 .list {
     position: absolute;
     left: 0px;
     top: 0px;
     min-width: 3000px;
     margin-left: 12px;
     margin-top: 0px;
 }

 .list li {
     display: table-cell;
     position: relative;
     text-align: center;
     cursor: grab;
     color: #efefef;
     vertical-align: middle;
 }

 .scroller {
     cursor: pointer;
     display: none;
     padding: 7px;

     white-space: nowrap;
     vertical-align: middle;
     background-color: #fff;
 }

 .scroller-right {
     text-align: end;
     position: absolute;
     right: 0;
     z-index: 1;
     height: 100%;
     top: 0;
 }

 .scroller-left {
     text-align: start;
     position: absolute;
     left: 0;
     z-index: 1;
     height: 100%;
     top: 0;
 }

 .disp-flexed {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     width: 100%;
 }

 .wrapper-design .nav-pills .nav-link.active {
     color: #2563eb;
     background-color: #0d6efd00;
     border-bottom: 2px solid;

 }

 .wrapper-design .nav-pills .nav-link {
     color: #837f7f;
     background-color: #0d6efd00;
     border-bottom: 0px solid;
     border-radius: 0;
     padding: 4px 13px;
     display: flex;
     align-items: center;
     font-size: 14px !important;
 }

 .wrapper-design .nav-pills .nav-link:hover {
     border-bottom: 2px solid;
 }

 .wrapper-design .nav-pills .nav-link i {
     margin-right: 4px;
 }

 .wrapper-design .nav-pills .nav-link .bx {

     font-size: 16px;
 }

 .border-bot {
     background: #d6e2f94d;
     padding: 15px 12px 20px 12px;
     border-radius: 4px;
 }

 .border-bot h6 {
     font-size: 14px;
 }

 .over-design h5 {
     font-size: 16px;
     font-weight: 700;
 }

 .prod-muted h6,
 .task-bar h6 {
     color: #535252;
     font-size: 13px;
 }

 .prod-muted p {
     margin-bottom: 0;
     color: #000;
 }

 .task-bar p {
     color: #000;
 }

 .project-cardss .text-design h4 {
     font-size: 13px;
     color: red;
 }



 .project-cardss .child-prt:nth-child(4n-1) h4,
 .child-invoce:nth-child(5n-1) h6 {
     color: green;
 }

 .project-cardss .child-prt:nth-child(4n-2) h4,
 .child-invoce:nth-child(5n-2) h6 {
     color: blue;
 }

 .project-cardss .child-prt:nth-child(4n-3) h4,
 .child-invoce h6 {
     color: gray;
 }

 .child-invoce:nth-child(5n-3) h6 {
     color: red;
 }

 .child-invoce:nth-child(5n-4) h6 {
     color: #9C27B0;
 }


 .project-cardss .text-design p {
     font-weight: bold;
     color: #000;
 }

 .task-sumary h5 {
     font-size: 17px;
 }

 /* scroll tab end */

 /* task custom class */
 .gantt-target .bar-milestone .bar {
     fill: tomato;
 }

 /* bar collapsed */
 .parent>.bar-group>.bar {
     outline: outset 1px #a3a3ff;
     border-radius: 2px;
     outline-offset: 2px;
 }

 .gantt-target .details-container {
     padding: 0px 12px;
 }

 .wrapper-design .dropdown-menu li {
     display: flex;
     width: 100%;
     text-align: start;
 }

 /* scrollbar */

 /* scrollbar end */
 /* contract */
 .cust-box button {
     font-size: 14px;
     text-overflow: ellipsis;
 }

 .cust-box .nav-link {
     margin: 3px 0;
     border: 1px solid #e7e7e7;
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: transparent;
     color: #827e7e;
 }



 .nav-profile .nav-pills .nav-link {
     color: #837f7f;
     background-color: #0d6efd00;
     border-bottom: 0px solid;
     border-radius: 0;
     /* margin-right: 0; */
     padding: 5px 9px;
     display: flex;
     align-items: center;
     font-size: 12.5px;
 }

 .nav-profile .nav-pills .nav-link i {
     padding: 0 5px;
 }

 .nav-profile .nav-pills .nav-link:hover,
 .nav-profile .nav-pills .nav-link.active {
     border-bottom: 2px solid #007fff;
     /* color: #007fff; */
 }

 .input-group a {
     color: #000;
 }

 #note-description {
     display: none;
 }

 .border-box {
     border: 1px solid #9e9e9e38;
     padding: 10px;
     border-radius: 5px;
     text-align: center;
     height: 100%;
     font-size: 14px;
     /* box-shadow: 0 0 5px #00000029; */
 }

 .border-box h6 {

     font-size: 14px;
 }

 .border-box p {
     margin: 0;
 }

 .check-box label {
     font-size: 13px;
 }

 .permissions-table td,
 .staff-view table td {
     opacity: .7;
 }

 .staff-view h6 {
     font-weight: bold;
 }

 .fil-drop .dropdown-toggle::after,
 .conts-viw .dropdown-toggle::after,
 .export-drop .dropdown-toggle::after {
     display: none !important;
 }

 .fil-drop .dropdown-item.active,
 .fil-drop .dropdown-item:active {
     color: #000;
     text-decoration: none;
     background-color: #d9ecfc78;

 }

 .fil-drop .dropdown-item {
     padding: 6px 17px;
 }

 .fil-drop hr {
     height: 0;
     margin: 7px;
 }

 .dropdown-menu li {
     position: relative;
 }

 .dropdown-menu .dropdown-submenu {
     display: none;
     position: absolute;
     /* right: 100%;
     top: -100px; */
     float:left;
 }

 .dropdown-menu>.hover-des:hover>.dropdown-submenu {
     display: block;
 }

 .task-over .font-wg {

     font-size: 13px !important;
     width: 100%;
     height: 92%;

 }

 .page-design td img {
     width: 28px;
     height: 28px;
     border-radius: 100%;
 }

 .relate-bod .bx {
     font-size: 17px;
 }

 .task-imfo ul li {
     margin: 12px 0;
 }

 .task-imfo {
     background: #ddf0ff4a;
     padding: 10px;
     height: 100%;
 }

 .tages input {
     border: 0;
     background: 0 0;
     border-left: 1px dashed #b3b3b3;
     height: 20px;
     padding-left: 5px;
     border-radius: 0;
 }

 .remain-task a {
     color: #007fff;
 }

 .modal-body h6 {
     color: #000;
 }

 .dropzones {
     width: 100%;
     height: 100%;
     padding: 0px;
     margin: 0px;
     min-height: 70px;
     border: 2px dashed #ccc;
 }

 .dz-message {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* contract end */
 /* drop down */
 .customerList {
     background: #0d6efd14;
     padding: 10px;
     overflow: scroll;
 }

 .left-design .btn {
     margin: 0 4px;
 }

 .left-design .btn .bx {
     font-size: 18px;
 }

 .left-design .btn-white {
     padding: 2px 10px;
 }

 .bord-top {
     /* border: 1px solid #0000002e; */
     padding: 15px;
     border-radius: 5px;
     box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%);
 }


 .invoice-card #proposal a,
 .estimated-draft a {
     color: #2563eb;
 }

 .invoice-card h5 {
     font-size: 14px;
 }

 .noted-design h6 {
     margin: 3px 0;
 }

 .bont-design .bx {
     font-size: 17px;
 }

 .bont-design {
     padding: 2px 9px;
 }

 .bg-draft a {
     font-weight: bold;
 }

 .bg-draft .box-bgs {
     border-radius: 5px;
     padding: 7px 10px;
     text-align: center;
     border: 1px solid #2196f32e;
     background: #2196f30a;
 }

 .box-bgs p {
     margin-bottom: 5px;
 }

 .box-bgs a {
     color: #000;
 }

 .bg-primary {
     background-color: #0d6efd !important;
     color: #fff;
 }

 .bord-primd {
     border: 1px solid #2196f34a;
     padding: 10px;
     border-radius: 5px;
 }

 .bord-primd ul li {
     margin: 5px 0;
 }

 /* drop down emd */
 .remaid-for {
     font-size: 14px;
     white-space: initial;
 }

 .buts-design i {
     font-size: 15px;
 }

 .buts-design button {
     margin: 0 5px;
 }

 .pay-details a {
     color: #2196F3;
 }

 .pay-details h6 {
     font-size: 18px;
     font-weight: 700;
 }

 .table-prgess .progress {
     display: flex;
     height: 10px;
     overflow: hidden;
     font-size: 9px;
     background-color: #00000024;
     border-radius: 10px;
 }

 .table-prgess .progress-bar {
     background-color: #00BCD4;
 }

 .goals-details h4 {
     font-weight: bold;
 }

 .goal-prs .progress {
     width: 200px;
     height: 200px;
     font-size: 30px;
     color: #000;
     border-radius: 50%;
     overflow: hidden;
     position: relative;
     background: #fff;
     text-align: center;
     margin: auto;
     box-shadow: 0px 0px 12px 3px #00000024;
     justify-content: center;
     align-items: center;
 }

 .goal-prs .progress::after {
     content: "%";
 }

 .goal-prs .progress .title {
     position: relative;
     z-index: 100;
 }

 .goal-prs .progress .overlay {
     width: 50%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1;
     background-color: #fff
 }

 .goal-prs .progress .left,
 .goal-prs .progress .right {
     width: 50%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     border: 20px solid #FF9800;
     border-radius: 100px 0px 0px 100px;
     border-right: 0;
     transform-origin: right;
 }

 .goal-prs .progress .left {
     animation: load1 1s linear forwards;
 }

 .goal-prs .progress:nth-of-type(2) .right,
 .goal-prs .progress:nth-of-type(3) .right {
     animation: load2 .5s linear forwards 1s;
 }

 .goal-prs .progress:last-of-type .right,
 .goal-prs .progress:first-of-type .right {
     animation: load3 .8s linear forwards 1s;
 }

 @keyframes load1 {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(180deg);
     }
 }

 @keyframes load2 {
     0% {
         z-index: 100;
         transform: rotate(180deg);
     }

     100% {
         z-index: 100;
         transform: rotate(270deg);
     }
 }

 @keyframes load3 {
     0% {
         z-index: 100;
         transform: rotate(180deg);
     }

     100% {
         z-index: 100;
         transform: rotate(315deg);
     }
 }

 .progress-pro h6 {
     font-size: 13px;
 }

 .progress-pro .progress {
     display: flex;
     height: 10px;
 }

 .progress-pro .progress-bar {
     background-color: #4CAF50;
 }

 .form-select,
 .form-control {

     font-size: 13px;
 }

 .borde-left {
     border-right: 1px solid #ccc;
 }

 .bg-gray {
     background: #e9ecef;
     padding: 10px;
 }

 .bg-grayp {
     margin: 5px 0 0 0;
 }

 .remaid-fors img {
     width: 20px;
     height: 20px;
     border-radius: 100%;
     margin-right: 9px;
 }

 .remaid-fors h6 {
     font-size: 14px;
     opacity: .5;
 }

 .img-desi img {
     width: 30px;
     height: 30px;
     border-radius: 100%;
     margin-right: 10px;
 }

 /* project */
 .feed-items .text-design h6 {
     color: #838383;
     font-size: 14px;
 }

 .feed-items .text-design h6 span {
     color: #000;
 }

 .date-des h6 {
     font-size: 14px;
 }

 /* Basic Rules */
 .switch input {
     display: none;
 }

 .switch {
     display: inline-block;
     width: 50px;
     height: 20px;
     transform: translateY(50%);
     position: relative;
 }

 .design-togle p {
     margin: 0;
 }

 .feed-items {
     position: relative;
     padding-bottom: 10px;
     padding-left: 30px;
     border-left: 2px solid #22c55e;
 }

 .feed-items:after {
     content: "";
     display: block;
     position: absolute;
     top: 0;
     left: -6px;
     width: 10px;
     height: 10px;
     border-radius: 6px;
     background: #fff;
     border: 1px solid #4b5158;
 }

 .feed-items:last-child {
     border-color: transparent;
 }

 /* project */
 /* contractd */
 .conts-viw button {
     font-size: 14px !important;
 }

 .conta-view .btn-outline-primary {
     color: #0d6efd !important;
     border-color: #0d6efd !important;
     font-size: 12px !important;
     background: #3d78e31c;
     width: 100%;
     text-align: start;
     padding: 13px;

 }

 .btn-outline-danger {
     font-size: 12px !important;
     background: #fef2f2;
     /* width: 100%; */
     text-align: start;
     padding: 13px;

 }

 .conta-view ul li {
     border: 1px solid #ddd;
     padding: 10px;
     display: flex;
     justify-content: space-between;
 }

 .text-renew h6 {
     font-size: 14px;
 }

 .text-renew ul li {
     margin: 5px 0;
 }

 .contract-vieww h6 {
     color: #2196F3;
 }

 /* .contract-vieww .wrapper-design .nav-pills .nav-link {
     color: #837f7f;
     background-color: #0d6efd00;
     border-bottom: 0px solid;
     border-radius: 0;
     padding: 4px 5px;
     display: flex;
     align-items: center;
     font-size: 13px !important;
 } */
 .contract-vieww label {
     color: #5c5c5c;
 }

 /* contracts end */
 /* items */
 .item-nul img {
     width: 100%;
 }

 .table-striped>tbody>tr:nth-of-type(odd) {
     --bs-table-accent-bg: #f8fafc;
 }



 table th {
     color: #64748b !important;
     /* font-size: 13px; */
     font-weight: 500;
 }

 table td {
     color: #230c0c !important;
     font-size: 13px;
 }

 .img-wid img {
     width: 30px;
     height: 30px;
     border-radius: 100%;
 }

 .btn-outline-success {

     font-size: 12px !important;
     background: #15ca2021;
     padding: 4px 10px;
     ;
     margin: 0 5px;
 }

 .img-wid .btn-outline-primary {

     font-size: 12px !important;
     background: #2196f314;
     padding: 4px;
     margin: 0 5px;
 }

 .img-wid h6 {
     margin: 0 5px;
 }

 .profile-discrib p {
     margin: 0 0 4px 7px;
     font-size: 13px;
 }


 .bord-box {
     border-bottom: 1px solid #00000021;
     padding: 0 0 9px 0;

 }

 .bord-box:last-child {
     border-bottom: 0px solid #00000021;
 }

 /* items end */
 .bg-blues {
     border-radius: 5px;
     box-shadow: 0 0 5px #0000002b;
     padding: 10px;
 }

 .draft-bnt .btn {
     padding: 1px 8px;
 }

 .btn-outline-primary {
     color: #0d6efd !important;
     border-color: #0d6efd !important;
     font-size: 12px !important;
     background-color: #3d78e31c !important;

     text-align: start;
     padding: 13px;
 }

 .on-function {
     display: none;
 }

 .nav-profile .nav {
     border-bottom: 1px solid #e2e8f0;
 }

 /* delivery-voucher */
 .delivery-vouch h6 {
     color: #673AB7;
 }

 .approvals-design h6 {
     background: #007fff17;
     padding: 10px;
     margin: 0;
     font-size: 14px;
     text-align: center;
 }

 .approvals-design ul li {
     border-bottom: 1px solid #ccc;
     margin: 10px 0;
     padding: 10px 0;
 }

 .approvals-design ul li:last-child {
     border-bottom: 0px solid #ccc;
 }

 /* delivery-voucher end*/
 /* appr-design  */
 .appr-design h6 {
     color: #673AB7;
 }

 .appr-design img {
     width: 50%;
 }

 .appr-design {
     text-align: center;
 }

 .lang-ages {
     background: #f5f2f0;
     padding: 20px;
     border-radius: 5px;
 }

 .pay-invoice h6,
 .genral-can h6 {


     border-bottom: 1px solid #3F51B5;
     padding: 10px 0;
     color: #3F51B5;
     /* display: inline-block; */
     font-weight: bold;
 }

 .input-group-text {
     background-color: #f5f5f5e6;
     border: 1px solid #ced4da;
     color: #3F51B5;
     font-size: 14px;
 }

 .table-des h6 {
     text-align: center;
 }

 .table-des h4 {
     text-align: center;
     font-size: 30px;
 }

 .bor-designs {
     border-top: 2px solid #bdbfc3;
     position: relative;
 }

 .bor-designs::after {
     position: absolute;
     content: "";
     width: 2px;
     height: 20px;
     background: #bdbfc3;
     right: 0;
     top: 0;
 }

 .bor-designs::before {
     position: absolute;
     content: "";
     width: 2px;
     height: 20px;
     background: #bdbfc3;
     left: 0;
     top: 0;

 }

 .bord-bot {
     position: relative;
 }

 .bord-bot::before {
     position: absolute;
     content: "";
     width: 2px;
     height: 20px;
     background: #bdbfc3;
     right: 20%;
     bottom: -16px;

 }

 .border-bottpms {
     display: inline-block;
     border-bottom: 2px dashed #bdbfc3;
 }

 .image-abs {
     position: relative;
 }

 .image-abs img {
     width: 100px;
 }

 .image-abs input {
     position: absolute;
     opacity: 0;
     top: 0;
     width: 100%;
     height: 100%;
 }

 .img-size img {
     width: 200px;
     box-shadow: 0 0 5px #2196f369;
     border-radius: 5px;
 }

 .boxs-cand {
     box-shadow: 0 0 6px #00000036;
     padding: 10px;
     color: #3e3f3f;
     border-radius: 5px;
 }

 .boxs-cand ul li {
     margin: 8px 0;
 }

 /* appr-design end */
 .form-info p {
     margin: 0;
 }

 .search-desing .form-control {
     border-radius: 3px 0 0 3px;
 }

 .search-desing button {
     border-radius: 0 3px 3px 0;
 }

 .job-skill h5 {
     color: #2196F3;
     font-weight: bold;
 }

 .job-skill {
     border: 1px solid #9e9e9e59;
     border-radius: 5px;
     padding: 15px;
 }

 .describe-job li {
     text-align: justify;
     font-size: 13px;

 }

 .describe-skill ul li {
     margin: 5px;
     background: #F0F8FD;
     padding: 3px 11px;
     border-radius: 12px;
     font-size: 12px;
 }

 .job-duration span i {
     color: #FF5722;
 }

 .recuit-ments h4 {
     text-align: center;
 }

 .job-view h4 {
     color: #007fff;
 }

 .tic-inform .btn {
     padding: 4px 9px !important;
 }

 .password-container {
     position: relative;
 }

 .password-container i {
     position: absolute;
     bottom: 14%;
     right: 3%;
     cursor: pointer;
     color: #008DD2;
 }

 /* support design */

 .tickets-types {
     display: flex;
     flex-wrap: wrap;
 }

 .tickets-types button {
     padding: 2px 4px;
     margin: 0 4px;
 }

 /* support design end */
 /* report */



 .sale-nav .nav-link {
     font-size: 16px;
 }

 .sale-nav .nav-link {
     color: #837f7f;
     background-color: #0d6efd00;
     border-bottom: 0px solid;
     border-radius: 0;
     /* margin-right: 0; */
     padding: 5px 9px;
     display: flex;
     align-items: center;
 }

 .sale-nav.nav-pills .nav-link:hover,
 .sale-nav.nav-pills .nav-link.active {
     border-bottom: 2px solid #007fff;
     color: #007fff;
     background: transparent;
 }

 .sale-nav {
     border-bottom: 1px solid #00000021;
 }

 .expan-bar p {
     color: red;
 }


 .w-80 {
     width: 80%;
     margin: auto;
 }

 .setting-design .nav-item {
     width: 100%;
 }

 .setting-design .nav-link {
     background-color: transparent;
     border-bottom: 1px solid #ddd;
     border-radius: 0;
     margin: 0;
     padding: 10px 15px;
     font-size: 14px;
     color: #223145b8;
 }

 .setting-design .nav-link.active {
     background-color: transparent;
     color: #007fff;
 }

 .setting-pages .card-body {
     padding: 0;
 }

 .setting-design .nav-link i {
     margin-right: 8px;
     font-size: 18px;
 }

 .setting-right .logo-img img {
     max-width: 180px;
 }

 .fixed-back {
     box-shadow: 0 -4px 5px -3px rgb(0 0 0 / 10%);
     background: #fff;
     width: calc(100% - 230px);
     z-index: 5;
     margin: 0 0 0 auto;
     padding: 10px;
 }

 small {
     font-size: 13px;
 }

 .setting-right .bor-less button {
     border-radius: 0 3px 3px 0;
 }

 .setting-right .bor-less input {
     border-radius: 3px 0 0 3px;
 }

 #payment-authorize p {
     font-size: 13px;
 }

 .depar-design a {
     color: #000;
     font-size: 18px;
 }

 .bord-edit {
     border: 1px solid hsl(53deg 98% 77% / 60%);
     background: #fefce8;
     padding: 10px;
 }

 .modal-box {
     padding: 10px;
     box-shadow: 0 0 6px #00000029;
 }

 /* report end */

 /* drap  */

 .ui-accordion .ui-accordion-content {
     height: 100% !important;
     padding: 0 !important;
 }

 .ui-accordion .ui-accordion-header {
     display: flex !important;
     align-items: center;
 }

 .main-menupage .accordion-button:not(.collapsed) {
     color: #000 !important;
     background-color: #ffffff;
     box-shadow: inset 0 0 0 rgba(0, 0, 0, .125);
 }

 .accordion-button:focus {
     z-index: 3;
     border-color: #dceaff;
     outline: 0;
     box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 0%);
 }

 .ui-icon,
 .ui-widget-content .ui-icon {
     background-image: url(../images/img/menu.png) !important;
     background-position: center !important;
     margin: 0 10px 0 0;
     background-size: cover;
 }

 .main-menupage .accordion-button::after {
     background-image: url(../images/img/settings.png);
     width: 15px;
     height: 15px;
     background-size: contain;
     position: absolute;
     right: 10px;
 }
 .accordion-button{
    width: 10px !important;
 }

 .main-menupage .accordion-button {
     padding: 0;
     font-size: 13px;
     background: transparent;
 }

 .main-menupage .accordion-item {
     margin: 10px 0;
 }

 .main-menupage .ui-widget-content {
     border: 1px solid #d0cccc;
     background: #f8f8f8;
     color: #222222;
 }

 .main-menupage .accordion-body {
     padding: 10px;
 }

 .main-menupage .accordion-item {
     background-color: #fff;
     border: 1px solid rgba(0, 0, 0, 0);
 }

 .gener-alre h6 {
     color: #007fff;
     position: relative;
 }

 .gener-alre h6::after {
     position: absolute;
     content: "";
     bottom: -10px;
     width: 100%;
     left: 0;
     border-bottom: 2px solid #2196F3;

 }

 .manufacture-des h6 {
     color: #673AB7;
 }

 .card-general {
     border: 1px solid silver;
     padding: 15px;
     margin-bottom: 10px;
 }

 .account-box h6 {
     color: #007fff;
 }

 .account-box .accordion-header button {
     font-size: 14px;
 }

 .account-box .accordion-button:not(.collapsed) {
     color: #000000;
 }

 .sms-mark li {
     margin: 8px 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .log-imgs {
     text-align: center;
 }

 .log-imgs img {
     width: 200px;
     margin: auto;
 }

 .hr-record img {
     width: 100%;
     height: 100%;
 }

 .hr-record .pos-ret {
     position: relative;
     width: 150px;
     height: 150px;
     background-color: #999999;
     border: 4px solid #3f51b55e;
     color: #FFFFFF;
     border-radius: 100%;
     overflow: hidden;
     transition: all 0.2s;

 }

 .hr-record .pos-ret input[type="file"] {
     display: block;
     height: 100%;
     left: 0;
     opacity: 0 !important;
     position: absolute;
     top: 0;
     width: 100%;
 }

 .pro-memeber img {
     width: 100px;
     height: 100px;
     background-color: #999999;
     border: 4px solid #3f51b55e;
     color: #FFFFFF;
     border-radius: 100%;
 }

 .conten-mem ul {

     display: flex;
     justify-content: space-between;
     font-size: 20px;
 }

 .pro-memeber {
     text-align: center;
     border: 1px solid #00000021;
     padding: 12px;
 }

 .right-designas .list-group li {
     display: flex;
     align-items: center;
     padding: 10px;

 }

 .right-designas .list-group li i {
     margin-right: 5px;
 }

 .record-setting h6 {
     color: #007fff;
 }

 .nav-status .nav-item:first-child .nav-link {
     border-radius: 20px 0 0 20px;
 }

 .nav-status .nav-item:last-child .nav-link {
     border-radius: 0 20px 20px 0;
 }

 .nav-status .nav-link {
     position: relative;
     margin: 0;
     border: 1px solid #ffffff;
     background: #ddd;
     border-radius: 0;
     color: #bbb;
 }

 .nav-status .nav-link:hover {
     background-color: #FF9800;
     color: #fff;
 }

 .nav-status .nav-link.active {
     background-color: #4CAF50;
 }


 /* client design */
 /* nav-menu */
 /* .nav-menu .nav-link {
     font-size: 13px;
 } */

 .nav-menu .navbar-brand img {
     width: 60px;
 }

 .invoice-logo img {
     width: 100px;
 }

 .nav-menu .navbar-toggler {
     font-size: 25px;
     background: #fff;
     padding: 2px 6px;
 }

 .nav-menu {
     box-shadow: 0 0 16px 1px #0000001a;
 }

 .client-login {
     height: 100vh;
     position: fixed;
     left: 0;
     right: 0;
 }

 .submit-butt .btn {
     width: 100%;
 }

 .client-login h5,
 .vendor-login h5,
 .vendor-login h6 {
     font-weight: bold;
     text-align: center;
     color: #000;
 }

 .client-main footer {
     background: #f1f5f9;
     padding: 15px;
     width: 100%;
     text-align: center;
     border-top: 1px solid #e2e8f0;
 }

 .client-main footer a {
     color: #000;
     text-align: center;
 }

 .footer-design {
     position: fixed;
     bottom: 0;
     background: #f1f5f9;
     padding: 15px;
     width: 100%;
     text-align: center;
     border-top: 1px solid #e2e8f0;
 }

 .footer-design p {
     margin: 0;
 }

 .nav-menu .navbar-toggler:focus {
     box-shadow: 0 0 0 !important;
 }

 /* client design */
 .cly-dash li,
 .cly-dash li i {
     padding: 0 5px;
 }

 .cly-dash li a {
     color: #6d6d70;
     font-size: 17px;
 }

 .file-client .bord-client {
     height: 120px;
     border: 1px dashed #795548;
     background: #2196f31a;
     border-radius: 5px;
     position: relative;
 }

 .file-client input[type=file] {
     height: 100%;
     opacity: 0;
     position: relative;
     z-index: 111;
 }

 .bord-client p {
     position: absolute;
     top: 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 100%;
 }

 /* nav-menu */
 /* client knowledge */
 .cly-know h4 {
     color: #1c1b1b;
     text-align: center;
     font-weight: bold;
 }

 .cly-know .form-control {
     padding: 15px;
     border-radius: 3px 0 0 3px;
 }

 .cly-know button {
     padding: 15px;
     border-radius: 0 3px 3px 0;
 }

 .cly-know {

     height: 50vh;

 }

 .cly-project h5 {
     color: #000;
     font-size: 20px;
 }

 .cly-project .bg-draft .box-bgs {
     border-radius: 5px;
     padding: 14px 10px;
     text-align: center;
     border: 1px solid #2196f32e;
     background: #ffffff;
 }

 .cly-dash h4 {
     font-weight: bold;
     font-size: 22px;
 }

 .cly-info .progress-bar {
     background-color: #4CAF50;
 }

 .cly-inview p {
     color: #000;
     font-weight: 600;
 }

 .cly-inview ul li {
     margin: 10px 0;
     color: #000;
 }

 .cly-inview ul li span {
     color: #7e7e7e;
 }

 .sub-total td {
     text-align: end;
 }

 .cly-infos .card-body {
     padding: 20px 30px;
 }

 .cly-info h6 {
     font-size: 20px;
 }

 .cly-title h6 {
     color: #000;
 }

 .proposal-info li {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .cly-project h6,
 .ticket-left h5,
 .ticket-left h6,
 .annos-ment h5 {
     color: #000;
 }

 .ticket-left ul li span {
     font-weight: 600;
     color: #000000b5;
 }

 .ticket-left ul li {
     color: #6d6d70;
     margin: 10px 0;
 }

 .ticket-left .card-body {
     padding: 15px 20px;
 }

 .gdpr-design .card-body {
     padding: 32px 20px;
     text-align: center;
 }

 .gdpr-design h5 {
     color: #000;
     font-weight: bold;
     font-size: 18px;
 }

 .gdpr-design h6 {
     color: #000;
     font-size: 20px;
 }

 /* client knowledge end */
 /* client design */

 /* vendor */
 .vendor-btn .btn {
     width: 50%;
 }

 .login-footer .footer-design {
     display: none;
 }

 /* vendor end */

 /* knowledge base start */

 .know_form {
     padding: 45px 0px;
 }

 .know_form h2 {
     font-size: 24px;
     font-weight: 600;
     margin-bottom: 30px;
 }

 .know_form .form-control {
     height: 50px;
 }

 .input_form_new {
     position: relative;
 }

 .input_form_new .search_btnn {
     position: absolute;
     top: 0;
     right: 0;
     height: 100%;
     display: flex;
     align-items: center;

 }

 .search_btnn button {
     background: #22c55e;
     color: #fff;
     border-radius: 0px 5px 5px 0px;
     border: none;
     height: 50px;
     padding-left: 20px;
     padding-right: 20px;
     font-size: 17px;
 }

 .wi-90 {
     width: 90%;
     margin: auto;
 }

 /* knowledge base ends */

 /* Quotation starts */

 .quota_card h4 {
     font-weight: 600;
     font-size: 20px;
     color: #334155 !important;
 }
 .quota_card a{
    color: #007fff !important;
    font-size: 16px;
 }
 .quota_card p{
    font-size: 14px;
    font-weight: 600;
    color: #14205b !important;
    margin-bottom: 5px;
 }
 .quota_card .edi_ic{
    font-size: 20px;
 }

 /* Quotation ends */

 /* Start :  DashBoard Style */
 .dashBoard{
    background: #f1f5f9;
 }
 .dashBoard .page-content{
    margin: 15px;
    @media (min-width:768px) {
        margin: 25px;
    }
 }

.progress_bar{
    width: 100%;
    margin-bottom: 10px;
    @media (min-width:768px) {
        width: 23%;
        padding: 15px 20px;
        margin-right: 20px;
    }
}
.dash_table_head{
    font-size: 20px;
    font-weight: 500;
    color:inherit;
}
.pull-right{
    @media (min-width:768px) {
        float :right;
    }
}

.btn-view{
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(2 132 199/var(--tw-bg-opacity));
    border-color: rgb(2 132 199/var(--tw-border-opacity));
    color: rgb(255 255 255/var(--tw-text-opacity))
}
.label-danger{
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background-color: rgb(254 242 242/var(--tw-bg-opacity));
    border-color: rgb(254 226 226/var(--tw-border-opacity));
    border-style: solid;
    border-width: 1px;
    color: rgb(220 38 38/var(--tw-text-opacity));
}
.section-content{
    margin-bottom: 20px;
    @media (min-width:768px) {
        margin-bottom: 30px;
    }
}
.text-stats-wrapper {
    z-index: 2;
}

.progress {
    height: 18px;
}
.text-stats-wrapper{
    margin-bottom: 10px;
}
.dashboard_currency{
    width: 20%;
}
.tw-font-medium {
    font-size: 12px;
}
.tw-font-medium .text-warning{
    --tw-text-opacity: 1;
    color: rgb(202 138 4/var(--tw-text-opacity)) !important;
}
.currency_container{
    padding: 5px 10px;
    @media (min-width:768px) {
        width: 32%;
    }
}
.filter_wid{
    @media (min-width:768px) {
        width: 160px;
        padding: 0px;
    }
}
.todo-title{
    font-size: 16px;
}
.todohead{
    font-size: 18px;
}
.progress-bar {
    width: 84.72%;
    height:15px;
    --tw-bg-opacity: 1;
    border-radius: 6px;
}
.progress-bar-danger{
    background-color: rgb(220 38 38/var(--tw-bg-opacity));
}
.progress-bar-success{
    background-color: rgb(34 197 94/var(--tw-bg-opacity));
}
.progress-bar-primary{
    background: rgb(37, 99, 235);
}
.progress-bar-dark{
    background-color: rgb(71 85 105/var(--tw-bg-opacity));
}

.dash_board_content table {
    overflow: auto ;
}
.font-weight-bold{
    font-weight: 500;
}
.latest_to_do {
    font-size: 12px;
}
.fc .fc-toolbar{
    display: block;
    @media (min-width:768px) {
        display: flex;
    }
}
.font-medium, .text-right {
    font-size: 13px!important;
}
.div_right{
    display: flex;
    justify-content: end;
}
.div_between{
    display: flex;
    justify-content: space-between;
}
.goals_head{
    font-size: 13px;
    margin: 0%;
}

.hr_record_dash{
    background-color: #fff;
    margin: 5px ;
    padding: 15px;
}
.top_stats_wrapper{
    padding: 12px 22px 20px 22px;
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 1px 7px 1px rgb(90 90 90 / 5%);
    border: 1px solid #dce1ef;
}
.changeLeadStatus{
    width: auto;
}