.blinking-word {
    font-size: 28px;
    background: linear-gradient(75deg, #FF9800, #2A8BEA, #27D07C);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: blink 5s infinite;
    -webkit-animation: blink 5s infinite;
    margin-bottom: 20px;
}
  .content_chat{
      -webkit-animation: blink 4s infinite;
      animation: blink 4s infinite;
     
}

.col-12.col-md-3.d-flex.flex-column div{
   background: #f8f9fa;
}
  .content_chate{
    opacity: .8;
    font-size: 11px;
}
  
  @keyframes blink {
    0%, 100% {
      opacity: 0.1;
    }
    25% {
      opacity: 0.3;
    }
    50% {
      opacity: 0.7;
    }
    75% {
      opacity: 0.3;
    }
  }
  
.nav-toggle-box{
border-bottom:.2px solid #5977f9 !important;
}
.text-right{
    text-align: right;
    padding-right: 10px;
}
#new-draggable-div table td {
    padding-bottom: 8px !important;
}
.list-group-item .dd-flex.justify-content-betweeniv small{
    font-size: 7px !important;
}

button[role=save]:hover{
    opacity:.5;
}
.login-as{
    display: none;
}
table thead, table tbody tr {

    table-layout: fixed !important;
}

.dropdown-large{
    cursor:pointer !important;
}

table {
    width: 100%;
    border-collapse: collapse; 
}

thead {
    display: table-header-group; 
}

tbody {
    display: table-row-group; 
}



:root {

    --border-color: #dee2e6;
}
.dataTable th,
.dataTable td {
    border: 1px solid var(--border-color);
    font-size: 11px; 
}







a[role="code"]{

    color:blue !important;
    font-weight:bold;
    display:none;
    cursor:pointer!important;


}

span.select2-selection__arrow{

border-left: .5px solid #7272725e !important;

}


a[role="code"]:hover{
    text-decoration:underline!important;


}
table#system_parameters th {
    position: sticky;
    top: 0;
    z-index: 10;

}
#php-content {
    position: relative;
    border: 1px solid hsla(216, 98%, 52%, 0.041);
    
  
}

.notif-app:hover{
    background-color:#d7d2fa!important;
    border-radius:50px;

}

#php-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0px;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    z-index: 19;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
}

#php-content::before:hover {
    cursor: pointer;
}

#php-content::after {
    content: '';
    position: absolute;
    top: 35%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 5px solid #1b39e455;
    border-top: 5px solid #162891;
    border-radius: 50%;
    z-index: 20;
    opacity: 0; 
    pointer-events: none;
    animation: spin 0.8s linear infinite; 
    transition: opacity 0.5s ease;
}


#php-content.show-overlay::before,
#php-content.show-overlay::after {
    opacity: 1; 
    pointer-events: auto; 
}


@keyframes spin {
    to { transform: rotate(360deg); }
}



input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number]{
    -moz-appearance: textfield;
    appearance: textfield;
}

.menubackground{
    background-color: #162891;
    height: 100%;
    width: 100px;
    position: fixed;
    transition: 0.3s;
    left: 0;
    top: 0;
    bottom: 0;
    right: auto;
    pointer-events: none;
    z-index: -2;

}
.shadow-none{
    box-shadow: none !important;
    box-shadow: 0px transparent!important;
    
    }
.menubackground div.nd{
    background-color: #fbf9f8;
    height: 100%;
    width: 90px;
    position: fixed;
    transition: 0.3s;
    left: 60px;
    top: 0;
    bottom: 0;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    right: auto;
    pointer-events: none;
    z-index: -1;

}


table#system_parameters {
    width: 100%;
    border-collapse: collapse;
}


table#system_parameters tbody {
    display: block;
    max-height: 70vh; /* Set the desired height for scrolling */
    overflow-y: auto; /* Enable vertical scrolling */
}

table#system_parameters thead, table#system_parameters tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed; /* Ensures the header and rows have the same width */
}

::-webkit-scrollbar {
    width: 4px !important;
    background: transparent !important;  
}

::-webkit-scrollbar-track {
    background: transparent !important; 
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0) !important;  
    border-radius: 10px; 
    border: 4px solid transparent !important;  
}

*{
	box-sizing:border-box;
	padding: 0;
	margin: 0;
	list-style: none
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, .2), rgba(0, 0, 0, .2), rgba(0, 0, 0, .2), rgba(0, 0, 0, 0.05));
    background-color: rgba(200, 200, 200, .15) !important;
    border-top: solid 2px rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px) !important;
    justify-content: center;
    align-items: center;
    z-index: 20000;
}
tr.padding-12 td{

    padding: 12px !important;
}
.popup-content {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 20px;
    width: 400px; /* Set a fixed width for consistency */
    border-radius: 10px;
 
    text-align: center;
  
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adds a deeper shadow for desktop-like feel */
    border: 1px solid rgba(0, 0, 0, 0.1); /* Adds a subtle border */
}

.popup-content p {
    margin-bottom: 20px;
}

.popup-content button {
    background-color: #162891;
    color: white;
    border: none;

    padding: 4px 10px;
    border-radius: 4px;
    cursor: default;
    font-size: 12px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    float: inline-end;
    gap: 10px;

}

.popup-content button:hover {
    background-color: #162891;
}


.popup-content .confirm {
    background-color: #ff5252;
    color: white;
    margin-right: 10px;
}

.popup-content .confirm:hover {
    background-color: #ff5252;
    color: white;
}

.popup-content .cancel {
    background-color: #ccc;
}





html{
    -webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
    -moz-text-size-adjust:none;
    -ms-text-size-adjust:none;
	-webkit-text-size-adjust: none;
    text-size-adjust:none;
}

/* start tr group */

tr.dtrg-group{

color: #162891 !important;



}

tr.dtrg-group:hover .groupp{
    color: #a97300 ;
    transition: color 0.5s ease, opacity 0.3s ease;
    -webkit-transition: color 0.5s ease, opacity 0.3s ease;
    -moz-transition: color 0.5s ease, opacity 0.3s ease;
    -ms-transition: color 0.5s ease, opacity 0.3s ease;
    -o-transition: color 0.5s ease, opacity 0.3s ease;
    opacity: 1;
}

tr.dtrg-group .groupp{
 
    float: inline-end;
    font-size: xx-small;
    color: #ffffff ;
    opacity: .7;
}

/* end tr group */

 @font-face{font-family:"Segoeuil";src:url("../fonts/segoeuil.ttf")format("truetype");} 
/* @font-face{font-family:"Ember";src:url("../fonts/ember.ttf")format("truetype");}  */

body{

    font-family:'Segoe UI', Tahoma, Geneva, Verdana, "Source Sans Pro", system-ui, "Helvetica Neue", "Helvetica", Arial, sans-serif;
	font-size: 13px;
   	color: #4c5258;
	letter-spacing: .5px;
    overflow-x: hidden !important;
    -ms-overflow-style: none !important; 
    scrollbar-width: none !important; 
    background-color: #f0f0f0!important;
    /* background-color: #f3f2f2!important; */
   
}
main{
    overflow: hidden;
}

.page-content{
    /* margin: 0 auto; */
    height: 100%;
    width: auto;
    /* position: fixed; */
    overflow: hidden;
    right: 0;
    /*margin-bottom: 70px;*/
    padding-top: 0px !important;
    /* background-color: #fff; */
  
}

.noclick {
    pointer-events: none;
}

.content,.wrapper{
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden !important;
    left: 0;
    /* padding-bottom: 6vh; */
    transition: left 1s ease;
    height: 100vh;
    -webkit-transition: left 1s ease;
    -moz-transition: left 1s ease;
    -ms-transition: left 1s ease;
    -o-transition: left 1s ease;
}

.page-content .card{
    min-height: 350px;
}
.progressor{
    border-top: 1px solid #fff;

}
.card {
    padding: 24px;
    height: 100%;
    overflow: scroll;
    box-sizing: border-box;
    border: 1px solid #f1f1f1;
    box-shadow: none !important;
    -moz-border-radius:0px !important;
    -ms-border-radius:0px !important;
    -o-border-radius:0px !important;
    -webkit-border-radius:0px !important;
    border-radius:0px !important;
}

.card.withtable {
    overflow: hidden !important;
}


table {
	border-collapse: collapse;
	font-size: 12px;
}
.hidden {
    display: none;
}
.small-icon{

    font-size: 9px;
}
.displace {
    visibility: hidden;
    z-index: -10;
    position: absolute;
    top: -100px;
    right: -100px;
}
.b-ts-span{
    border:1px solid #cccc; 
    border-radius:20px;
}

.disable {
    pointer-events: none;
    opacity: 0.3;
}

button.disable {
    color: #b3b3b3;
    background: #676a6e34;
    opacity: 0.1!important;
    pointer-events: none;
}

.error {
    color: #da2a2a !important;
    font-size: 9px !important;
}
.input-error {
    border: #da2a2a solid 2px;
    box-shadow: 0 0 5px red;
}
.input-valid {
    border: 1px solid #ccc;
    box-shadow: none;
    transition: border-color 0.3s;
}

body.loading {
    cursor: progress !important;
}



.form-loader {
    position: relative;
    pointer-events: none;
    opacity: 0.5;
  }
  
  .form-loader::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 8px solid transparent;
    border-top-color: #162891;
    border-radius: 50%;
    width: 58px;
    height: 58px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  
  
  



.home_body{
   visibility: hidden;
   position: absolute;
   z-index: -112;
   left: -100%;
}
@keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  #context-menu{

    min-width: 200px;
  }
  #context-menu{
    position: absolute;
    border: 1px solid rgb(113, 113, 113) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

    z-index: 100;
    padding: 0px;
}
    div#new-content table tr td:first-child {
    text-align: end;
    padding-right: 6px;
    
    }
#new-draggable-div {
    position: absolute;
    min-width: 35% !important;
    background-color: rgba(255, 255, 255, 0.8);   
    overflow: hidden;
    width: fit-content;
    max-width: 80%;
    z-index: 100;
    padding: 0px; 
    border: 1px solid rgb(113, 113, 113) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    display: none;
}

#new-draggable-div .draggable {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 8px;
    background: #f0f0f0;
    border-bottom: 1px solid #ddd;
    color: #333;
    cursor: move;
}

.draggable span {
    font-weight: 600;
    font-size: 12px;
    margin-left: 20px;
}

#closor {
    cursor: pointer;
}

#closor i {
    font-size: 20px;
    margin-right: 12px;
    color:  #162891;
}

.sortable-placeholder {
    background-color: #f0f0f0;
    height: 50px;
    border: 1px dashed #ddd;
}

#new-content {
    padding: 20px;
    color: #333333;
}

#new-content table {
    width: 100%;
}

#new-content table input, 
#new-content table select, 
#new-content table textarea {
    min-width: 80% !important;
}

#new-content table tr td:nth-child(1) {
    text-align: end;
}

#new-content table tr td:nth-child(2) {
    text-align: start;
}

#new-draggable-footer {
    display: flex;
    justify-content: flex-end;
    padding: 8px;
    background-color: #fff;
    border-top: 1px solid #ddd;
}

#new-draggable-footer button {
    background-color: transparent;
    color: #162891 !important;
    padding: 4px 10px !important;
    cursor: pointer !important;
    border-radius: 5px;
    border: 1px solid #eee;
    margin: auto 8px;
    -webkit-transition: opacity 1.2s ease;
    -moz-transition: opacity 1.2s ease;
    -ms-transition: opacity 1.2s ease;
    -o-transition: opacity 1.2s ease;
    transition: opacity 1.2s ease;
}
#new-draggable-footer button:hover{
    opacity: 0.8;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

#new-draggable-footer button[role="save"],#new-draggable-footer button[role="close"] {
    background-color: transparent;
    color: #162891 !important;
    padding: 4px 8px;
    border: none;
    cursor: pointer !important;
    border-radius: 5px;
    /* margin-top: 10px; */
    border: 1px solid #eee;
    transition: opacity 1.2s ease;
}



#new-content {
    background-color: #fff !important;
    padding: 20px auto !important;
}

  
#context-menu .draggable{
    cursor: grab;
    padding: 8px 16px;
    /* background-color: #fff; */
    border-bottom: .5px solid #e5e5e5;
    position: relative;
}

.separator {
    border-top: .5px solid #e5e5e5;
    margin: 4px 0;
}

#context-menu.dragging{
    cursor: grabbing;
}
select{
    max-width: 250px!important;
}
#context-menu #closor2{
  position: absolute;
  top: 0;
  right: 0;
  cursor: default;
  padding: 10px;
  transform: translateY(-10px);
  visibility: hidden;
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
}

#context-menu .draggable:hover #closor2 {
    visibility: visible;
}

#closor:hover i{
    color: red !important;
}

#context-menu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

#context-menu li{
    width: 100%;
    background-color: transparent ;
}

#context-menu li a{
    display: block;
    padding: 8px 16px;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-size: 12px;
    color: #333;
    background-color: transparent;
    text-decoration: none;
}

#context-menu li:hover a {
    background-color: #f3f3f3;
    color: #000;
}

.hidden {
    display: none;
}
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
            max-height: 500px;
            overflow: auto;
        }
.dataTable thead th {
            position: sticky;
            top: 0;
            /* background: white; */
            /* z-index: 100; */
        }

        ul.pagination,.paginate_button,a.page-link{

            /* padding: auto 6px !important; */
            height: 30px;
            font-size: 12px;
            line-height: normal;

            


        }

.paginate_button.page-item a{
    color: #162891;
    background-color: #fff;

}
.paginate_button.page-item.disabled a{
    color: #979795;
    background-color: #fff;

}
.paginate_button.page-item.active a,.paginate_button.page-item.active{
    background-color: #162891;
    color: #fff;
    border: 1px solid #162891;
   

}





.dhtmlx_skin_dhx_skyblue div.dhxcont_sb_container {
    position: relative;
    height: 24px;

}
.small-text,.small-text * {
    font-size: 10px !important;
  
}
  /* Apply the animation to the .lni-spinner class */
  .lni-spinner {
    display: inline-block;
    animation: spin 2s linear infinite;
  }
  .border-top.p-2.text-center,.small-text{
    background: #f0f0f0 !important;
    background-position: center;
    background-repeat: repeat-x;
    background-size: cover;
    position: absolute !important;
    visibility: hidden !important;
    left: -100%;
}


form[role="hsfk"] > td, form[role="hsfk"] > tfoot,form[role="hsfk"] >  th, form[role="hsfk"] > thead, form[role="hsfk"] >  tr {
    border-color: inherit;
    border-style: none !important;;
    border-width: 0;
}
  .form-body.table.form td:nth-child(1) {
    text-align: right;
    padding-right: 10px; /* Adjust padding as needed */
    vertical-align: middle;
   
}
tr.number,td.number{

    text-align: right;
}

button[role=save],
form button,
a[head=save],
a[head=saved],
a[role=save],
button[name=es],
form input[type=submit],
form input[type=button] {
    background-color: transparent;
    color: #162891 !important;
    padding: 4px 8px;
    border: none;
    cursor: pointer !important;
    border-radius: 5px;
    /* margin-top: 10px; */
    border: 1px solid #eee;
    transition: opacity 1.2s ease;
}


[head=popup],.btn {
     
    padding: 3px 8px !important;
    border-radius: 2px !important;
    color: #ffffff !important;
    -webkit-border-radius: 2px !important;
    -moz-border-radius: 2px !important;
    -ms-border-radius: 2px !important;
    -o-border-radius: 2px !important;
    cursor: default !important;;
}

.ms-auto table tr td{

    padding: 10px 10px 10px 10px!important;
}

.form-body.table.form td:nth-child(2) {
    text-align: left;
    padding-left: 10px; /* Adjust padding as needed */
    vertical-align: middle;
}

.form-body.table.form td:nth-child(2) select {
    width: 100%; /* Ensure the select elements fill the available space */
}
table thead {

    transition: all .2s;
    background:#fbf9f8 !important;
    background-position: center;
    /* background-attachment: fixed; */
    background-repeat: repeat-x;
    background-size: cover;


}
  form[name=signin],
  form[name=recover]{
      padding-top: 20px
  }
  form input[type=text]:hover,
  form input[type=text]:focus{
      box-shadow: 0px 1px 12px rgba(0,0,0,.3);
      transition: box-shadow 0.9s, border 0.5s;
  }
  form input:focus, select:focus, textarea:focus{
      border: .5px solid #FAB4BE;
      box-shadow: 0px 1px 12px rgba(0,0,0,.3);
  }

  input,
  select,
  textarea{
      position: relative;
      padding: 4px;
      margin: 2px 5px 2px 0;
      border: .5px solid #d4d4d4;
      resize: none;
      box-shadow: 0 0 10px rgba(0,0,0,0.02);
      transition: box-shadow 0.5s, border 0.5s;
  }
  form[name=signin] input,
  form[name=recover] input,
  form[name=signin] table,
  form[name=recover] table,
  form[name=signin] textarea,
  form[name=recover] textarea{
      width: 100%
  }
  form[name=signin] input,
  form[name=recover] input{
      padding: 8px
  }
.form-label{
    text-align: left !important;
    float: left !important;
}
  .cover-all {
    -webkit-text-size-adjust: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    height: 100vh;
    height: 100dvh;
    text-align: center;
    background: #f3f2f2;
    /* background: #f1f1f1; */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);

}



.lobibox-notify-msg{
    z-index: 100;
}
.more {
    position: absolute;
    background-color: white;
    border: 1px solid black;
    padding: 5px;
    z-index: 100;  
}



table.enter tr td:nth-child(1){
float: inline-end;
padding-inline-end: 20px;


}

button[role=save]{
    float: inline-end;
}



input[type=text],
input[type=number],
input[type=email],
input:not([type=checkbox]):not([type=radio]),
textarea,
select {
    border: .5px solid #e4e4e4e8 !important;
    
    
    box-shadow: none !important;
    background-color: transparent !important;
   
}

#new-draggable-div input[type=text],
#new-draggable-div input[type=number],
#new-draggable-div input[type=email],
#new-draggable-div input:not([type=checkbox]):not([type=radio]),
#new-draggable-div textarea,
#new-draggable-div select {
    border: .5px solid #aaa !important;    
    box-shadow: none !important;
    background-color: transparent !important;
   
}

input:focus, textarea:focus,select:focus {
    
    border: .5px solid #d4d4d4;
    outline: none;
    box-shadow: none !important;
}

.page-breadcrumb{
    position: sticky;
    top: 0;
    padding: 8px;
    z-index: 1;
    background: rgb(255, 255, 255);
    /* border-top: #b8d6f8 1px solid; */
    height:40px;
    margin-left: -8px;
    margin-right: -8px;
    /* margin-bottom: 6px; */
    /* box-shadow: 0 1px 3px 1px #403c433d; */
}
.page-breadcrumb>div{
    height:50px;
    display: block;
    unicode-bidi: isolate;

}
.page-breadcrumb>div table input{
    display: block;
    white-space: nowrap;
    padding: 2px 3px;
    margin-left: 3px;
    font-size: 13px;
    transition: background .08s ease-out;
}


a {
    text-decoration: none;
}
.holder{
    display: none;
}
::placeholder {
    opacity: 0.7 !important;
}

.fixedHeader-locked{
        visibility: hidden !important;
        position: absolute !important;

}

.buttons-c{
width: 100%;
position: inherit;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;

gap: 8px;
}

.buttons-c button{
    background: #ffffff60;; 
    color:#fff; 
    padding:2px  10px; 
    border: 1px solid #ffffff00;
    justify-content: flex-end;
    border-radius:2px;
   
}


.top-header .navbar{
    position: fixed;
    top: 0;
    left: 270px;
    right: 0;
    background-color: #f0f0f0 !important;
    /* border-bottom: 1px solid #e4e4e4e8;
    border-top: 1px solid #e4e4e4e8; */
    background-clip: padding-box;
    height: 60px;
    z-index: 10;
    padding: 0 1.5rem;
    transition: all .2s;
    background-position: center;
    /* background-attachment: fixed; */
    background-repeat: repeat-x;
    background-size: cover;
}

.top-header .navbar .top-navbar .nav-link {

    color: #293445;
    font-size: 12px;
    text-transform: capitalize;
    font-weight: 500;

}

.nav-item .nav-link i{


    font-size: 18px;

}
.nav-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
}

.top-header .navbar .searchbar {
   position: relative;
   /* width: 30%; */

}

.top-header .navbar .searchbar .search-close-icon{
    right: 2rem;
    opacity: 0.5;
    cursor: default;
 
 }

.top-header .navbar .searchbar .form-control {
    border-radius: 30px;
    border: 1px solid rgb(206 212 218 / 0%);
    /* box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); */
    padding-left: 2.5rem;
    padding-right: 2.5rem;

}

.top-header .navbar .dropdown-searchbar .form-control {
    border-radius: 30px;
    border: 1px solid rgb(206 212 218 / 0%);
    padding-left: 3rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}


.top-header .navbar .searchbar .form-control:focus,
.top-header .navbar .dropdown-searchbar .form-control:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25)
}

.top-header .navbar .searchbar .search-icon,
.top-header .navbar .dropdown-searchbar .search-icon {
  
    opacity: 0.5;

}


.top-header .navbar .user-setting{

    height: 40px;
    border-radius: 30px;
    background-color: #fff;
  

}
#new-draggable-div fieldset {
    border: 1px solid rgb(183, 217, 255);
    padding: 8px;
    border-radius: 4px;
}

.dropdown-toggle-nocaret:after {
	display: none
}

.top-header .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
	}
}


.top-header .navbar .dropdown-large {
	position: relative
}


.dropdown-large .dropdown-menu {
	width: 360px;
	border: 0;
	padding: 0.5rem;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

}

.top-header .navbar .dropdown-large .dropdown-menu::after {
	content: '';
	width: 13px;
	height: 13px;
	background: #fff;
	position: absolute;
	top: -6px;
	right: 16px;
	transform: rotate(45deg);
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd
}

.top-header .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
}

.top-header .navbar .dropdown-item {
    padding: .5rem;
}

.top-header .navbar .dropdown-large .dropdown-item:hover {

    border-radius: 10px;
    color: #1e2125;
	background-color: #f5f5f5
}

.top-header .navbar .dropdown-item .setting-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    background-color: #2747D0;
}

.top-header .navbar .dropdown-item .setting-text {
     
    font-size: 13px;
    font-weight: 500;
    /* color:#2747D0; */
}

.top-header .navbar .user-img {
    width: 40px;
    height: 40px;
    padding: 4px;
    border-radius: 50%;
}

.top-header .navbar .user-name{
    font-size: 12px;
    color:#162891;;
    font-weight: 500;
    padding-right: 10px;
}


.top-header .navbar .dropdown-menu .apps:hover {

    background-color: transparent;
    transition: all 0.2;

}

.large-radio {
    width: 14px; 
    height: 14px;
    margin-right: 10px;
}

.large-label {
    font-size: 12px; 
    margin-right: 20px; 
    cursor: pointer; 
}

.top-header .navbar .dropdown-menu .apps .apps-icon-box {

    color: #34383f;
    width: 52px;
    height: 52px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    margin: auto;
    border-radius: 50%;
}

.top-header .navbar .dropdown-menu .apps .apps-name {

    color: #34383f;
    font-size: 12px;

}

.top-header .navbar .dropdown-menu .msg-time {
    font-size: 12px;
}


.top-header .navbar .dropdown-menu .dropdown-msg-user {
    font-size: 12px;
}

.top-header .navbar .dropdown-menu .dropdown-msg-text {
    font-size: 12px;
}


.header-message-list {
	position: relative;
	height: 420px
}


.header-notifications-list {
	position: relative;
	height: 420px
}



.top-header .navbar .dropdown-menu .notification-box {

    width: 52px;
    height: 52px;
    font-size: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e1e6eb;

}


.top-header .navbar .nav-link .notify-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    color: #fff;
    font-size: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #162891;
    animation: pulseColor 1.5s infinite ease-in-out; 
}

@keyframes pulseColor {
    0%, 100% {
        transform: scale(1);
        background-color: #f09000;
    }
    25% {
        transform: scale(1.2);
        background-color: #ff9801;
    }
    50% {
        transform: scale(1.3);
        background-color: #f09000;
    }
    75% {
        transform: scale(1.5);
        background-color: #ff9801;
    }
}

/* Vendor prefixes (if necessary) */
@-webkit-keyframes pulseColor {
    0%, 100% {
        -webkit-transform: scale(1);
        background-color: #162891;
    }
    25% {
        -webkit-transform: scale(1.2);
        background-color: #ff4081;
    }
    50% {
        -webkit-transform: scale(1.3);
        background-color: #f240ff;
    }
    75% {
        -webkit-transform: scale(1.5);
        background-color: #9000ff;
    }
}



.mobile-toggle-icon, .search-toggle-icon, .projects, .notifications, .messages {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* background-color: #fff; */
    color: #162891;
    font-size: 16px;
    cursor: default;
    border-radius: 50%;
    /* border: 1px solid rgb(255 255 255 / 0%); */
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */

}





/* Sidebar */

.sidebar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 270px;
    height: 100%;
    background-color: transparent;
    background-clip: padding-box;
   
    transition: all .2s;
  
}



.sidebar-wrapper .iconmenu {
    position: fixed;
    top: 0px;
    left: 0;
    bottom: 0;
    width: 60px;
    height: calc(100% - 0px);
    background-clip: padding-box;
    /* border-right: 1px solid #e4e4e4e8 ; */
    display: flex;
    align-items: start;
    justify-content: center;

    transition: all .2s;
    background:#162891 !important;
    background-position: center;
     background-attachment: fixed;
     background-size: cover;
}


.sidebar-wrapper .iconmenu .nav-toggle-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #162891;
    background-clip: padding-box;
    /* border-right: 1px solid rgb(226 227 228 / 0%);
    border-bottom: 1px solid #e2e3e4; */
    transition: all .2s;
    z-index: 1;
}




.sidebar-wrapper .iconmenu .nav-toggle-box .nav-toggle-icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    font-size: 20px;
    color: #fff;
    /* background: #D5DEE6; */
    cursor: default;
}





.sidebar-wrapper .iconmenu ul.nav {
    margin-top: 60px;
    padding-top: 1rem;
}
 

.sidebar-wrapper .textmenu {
    position: fixed;
    top: 0px;
    left: 60px;
    bottom: 0;
    width: 210px;
    height: calc(100% - 0px);
    /* background-color: hsla(216, 98%, 52%, 0.041); */
    background-clip: padding-box;
    /* border-right: 1px solid #fff; */
    transition: all .2s;
    /* z-index: 1; */
}


.sidebar-wrapper .textmenu .brand-logo {
    
    position: fixed;
    /* top: 0; */
opacity: 0.5;
    left: 60px;
    width: 90px;
    height: auto;
    padding:1rem;
    align-self: center!important;
    display: flex;
    align-items: center;
    justify-content: start;
    background-clip: padding-box;
  
    transition: all .2s;
  
    
    background-position: center;
    background-repeat: repeat-x;
    background-size: cover;

}
.brand-logo{
    /* background-color: #fbf9f8e0; */
    border-top-left-radius: 30px;
    z-index: 2;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition: cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.sidebar-wrapper .textmenu div.tab-content {
    margin-top: 60px;
    
    padding-top: 1rem;

}


.sidebar-wrapper .iconmenu .nav-pills .nav-link {
    /* border: 1px solid #c6c4c497; */
    border-radius: 50%;
    padding: 0;
    margin-bottom: 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    /* background: #D5DEE6; */
    /* box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; */
}

.sidebar-wrapper .iconmenu .nav-pills .nav-link.active, .iconmenu .nav-pills .show>.nav-link {
    /* color: #162891; */
    /* background-color: #27d07b21; */
    background-color: #2747D0;
    /* border-color: rgb(52 97 255 / 12%); */

}

.sidebar-wrapper .textmenu .list-group .list-group-item {
   background-color: transparent;
   margin-left: 6px;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
}

.sidebar-wrapper .textmenu .list-group .list-group-item i {
    margin-right: 10px;
}
.sidebar-wrapper .textmenu .list-group .list-group-item:hover {
 
  
    transition: all 0.2s;
 
}
/* Hover effect for all list-group items */
.sidebar-wrapper .textmenu .list-group a.list-group-item:hover {
    background-color: hsla(216, 98%, 52%, 0.041); /* Light blue background on hover */
}

/* Special styling for the first item in the list on hover */
.sidebar-wrapper .textmenu .list-group a.list-group-item:nth-child(2):hover {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

/* Special styling for the last item in the list on hover */
.sidebar-wrapper .textmenu .list-group a.list-group-item:nth-last-child(1):hover {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}



.sidebar-wrapper .textmenu .list-group-item+.list-group-item.active {
    color: #162891;
    background-color: hsla(216, 98%, 52%, 0.041);
    /* border-color: rgb(52 97 255 / 12%); */
}

.sidebar-wrapper .textmenu .list-group .list-group-item {
    background-color: transparent;
    /* border-bottom: 1px solid #e2e3e4; */
}

.wrapper.toggled .sidebar-wrapper {
    left: -300px;
    
}
.wrapper.toggled .sidebar-wrapper .textmenu .brand-logo{
    left: -300px;
}
.wrapper.toggled .sidebar-wrapper .textmenu{
    left: -300px;
}

.wrapper.toggled .page-content{
    margin-left: 60px;
}

.wrapper.toggled .top-header .navbar {
    left: 60px;
}


/* Page Content */

.page-content {
    margin-left: 270px;
    margin-top: 60px;
    padding: 1.5rem 0;
    transition: all .2s;
  
}



/* Utilities */

.radius-10 {
    border-radius: 10px;
}
.radius-15 {
    border-radius: 15px;
}
.radius-30 {
    border-radius: 30px;
}


.font-13 {
    font-size: 12px;
}

.font-14 {
    font-size: 12px;
}

.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;
}

.text-justify {
    text-align: justify;
}
.pace{
    visibility: hidden;
}
.withtable .table-responsive {
  overflow: auto !important;
  height:max-content;
}

.fm-menu .list-group a {
    font-size: 12px;
    color: #5f5f5f;
    display: flex;
    align-items: center;
}

.fm-menu .list-group a i {
    font-size: 23px;
}

.fm-menu .list-group a:hover {
	background-color: rgb(52 97 255 / 15%);
	color: #162891;
	transition: all .2s ease-out;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-ms-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
}
.textmenu * a:hover {
    color: #4c5258;
  
    transition: all .2s ease-out;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-ms-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
 
}

.add-post {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
}

.fm-icon-box {
    font-size: 32px;
    background: #fff;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.back-to-top {
	display: none;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 26px;
	color: #fff;
	position: fixed;
	border-radius: 50%;
	bottom: 20px;
	right: 12px;
	background-color: #402500;
	z-index: 5
}

.back-to-top:hover {
	color: #fff;
	background-color: #000;
	transition: all .5s
}

a,button{
    cursor: default!important;
    transition: color .2s ease-out;
    -webkit-transition: color .2s ease-out;
}

.project-user-groups img {
    margin-right: -14px;
    border: 1px solid #e4e4e4;
    padding: 2px;
    cursor: default;
}

.project-user-plus {
    width: 33px;
    height: 33px;
    margin-right: 0px;
    line-height: 33px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 22px;
    cursor: default;
    border: 1px dotted #a9b2bb;
    color: #404142;
}

.user-groups img {
    margin-left: -14px;
    border: 1px solid #e4e4e4;
    padding: 2px;
    cursor: default;
}
.user-plus {
    width: 33px;
    height: 33px;
    margin-left: -14px;
    line-height: 33px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 22px;
    cursor: default;
    border: 1px dotted #a9b2bb;
    color: #404142;
}

.icon-box {
    width: 60px;
    height: 60px;
    background-color: #ffffff;
    border-radius: 50%;
    border: 1px solid #c7c8cb;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}


.product-box {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: default;
    background-color: #ffffff;
 }
 
 .best-product-item {
     background-color: #ffffff;
     cursor: default;
     border-radius: 10px;
     padding: .5rem;
 }
 
 .best-product-item:hover {
     background-color: #f5f5f5;
 }
 
 .product-box img {
     width: 100%;
 }
 
 .best-product {
     position: relative;
     height: 460px;
 }

.chart-container1 {
    position: relative;
    height: 340px;
}

.gmaps, .gmaps-panaroma {
    height: 400px;
    background: #eee;
    border-radius: 3px;
}

.theme-icons {
    background-color: #fff;
    color: #434547;
}

.cursor-pointer {
    cursor: default;
}

.icon-badge {
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.product-img-2 {
    width: 45px;
    height: 45px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #e6e6e6;
}

.error-social a {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 12px;
	color: #fff;
	text-align: center;
	border-radius: 50%;
	margin: 5px;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075)!important
}


.productlist .product-box{
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    border: 1px solid #e2e3e4;
    background-color: #ffffff;

}

.productlist .product-box img{
    width: 100%

}

.productlist .product-title {
    
    color: rgb(25, 27, 34);

}


.orderlist .product-box{
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    border: 1px solid #e2e3e4;
    background-color: #ffffff;

}

.orderlist .product-box img{
    width: 100%

}

.orderlist .product-title {
    
    color: rgb(25, 27, 34);

}

.breadcrumb-title {
    font-size: 12px;
    border-right: 1.5px solid #aaa4a4;
}

.page-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding-right: .5rem;
    color: #6c757d;
    font-family: LineIcons;
    content: "\ea5c";
}

.page-breadcrumb .breadcrumb li.breadcrumb-item {
    font-size: 12px;
}


.iconmenu .ps__rail-x {
	
	height: 0px;
}

.iconmenu .ps__rail-y {

	width: 0px;

}

.iconmenu .ps__rail-x.ps--clicking .ps__thumb-x, .iconmenu .ps__rail-x:focus>.ps__thumb-x, .iconmenu .ps__rail-x:hover>.ps__thumb-x {
	height: 5px
}

.iconmenu .ps__rail-y.ps--clicking .ps__thumb-y, .iconmenu .ps__rail-y:focus>.ps__thumb-y, .iconmenu .ps__rail-y:hover>.ps__thumb-y {
	width: 5px
    
}


.w_chart {
    position: relative;
    display: inline-block;
    width: 80px !important;
    height: 80px !important;
    text-align: center;
    font-size: 1.4em;
}

.w_percent {
    display: inline-block;
    line-height: 80px !important;
    z-index: 2;
    color: #0a0808;
}

.w_percent:after {
    content: '%';
    margin-left: 0.1em;
}

.w_chart canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px !important;
    height: 80px !important;
}


#geographic-map {
    width: 100%;
    height: 400px;
}

.new-customer-list {
	position: relative;
	height: 500px
}

.new-customer-list .customer-list-item {
	padding: 0.5rem;
    border-radius: 10px;
}

.new-customer-list .customer-list-item:hover {
	background-color: #f0f0f0;
}

.top-sellers-list {
	position: relative;
	height: 460px
}

.top-sellers-list .sellers-list-item {
	padding: 0.5rem;
    border-radius: 10px;
}

.top-sellers-list .sellers-list-item:hover {
	background-color: #f0f0f0;
}

.client-message {
	position: relative;
	height: 565px
}

.client-message .client-messages-list {
	padding: 0.5rem;
}

.client-message .client-messages-list:hover {
	background-color: #f0f0f0;
}

/* Widgets */

.widget-icon {
    width: 48px;
    height: 48px;
    background-color: #fafafa;
    border-radius: 50%;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}


.widget-icon-large {
    width: 54px;
    height: 54px;
    background-color: #fafafa;
    border-radius: 10px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

/* Chips */

.chip {
    display: inline-block;
    height: 32px;
    padding: 0 12px;
    margin-right: 1rem;
    margin-bottom: 1rem;
    font-size: 12px;
    font-weight: 500;
    line-height: 32px;
    color: rgba(0, 0, 0, .7);
    cursor: default;
    background-color: #f1f1f1;
    border: 1px solid rgba(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%;
}


.profile-cover {
    background:  #f0f0f0!important;
    background-size: contain;
    height: 24rem;
    background-position: top;
    margin: -8.0rem -3.5rem -10.5rem -3.5rem;
    padding: 1.5rem 1.5rem 6.5rem 1.5rem;

}

/* Email */


.email-wrapper {
	width: auto;
	height: 600px;
	overflow: hidden;
	border-radius: .25rem;
	position: relative;
	background: #fff;
	box-shadow: 0 .1rem .7rem rgba(0, 0, 0, .1)
}

.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: .25rem;
	border-bottom-left-radius: .25rem
}

.email-sidebar-header {
	width: auto;
	height: auto;
	position: relative;
	background: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, .125);
	border-right: 0 solid rgba(0, 0, 0, .125);
	border-top-left-radius: .25rem;
	padding: 15px
}

.email-navigation {
	position: relative;
	padding: 0;
	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: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, .125);
	border-top-right-radius: .25rem;
	z-index: 1
}

.email-content {
	position: absolute;
	left: 0;
	right: 0;
	width: auto;
	top: 70px;
	height: auto;
	margin-left: 250px;
	padding: 0;
	background: #fff;
	border-top-left-radius: .25rem;
	border-top-right-radius: .25rem
}

.email-navigation a.list-group-item {
	color: #404142;
	padding: .35rem 1.25rem;
	background-color: #fff;
	/* border-bottom: 1px solid rgb(0 0 0 / 0%); */
	transition: all .3s ease-out
}
.list-group *{

border: none;

}
.email-navigation a.list-group-item:hover {
	background-color: rgb(13 110 253 / .12)
}

.email-navigation a.list-group-item.active {
	color: #162891;
	font-weight: 600;
	background-color: rgb(13 110 253 / .12)
}

.email-meeting {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0
}

.email-meeting a.list-group-item {
	color: #404142;
	padding: .35rem 1.15rem;
	background-color: #fff;
	/* border-bottom: 1px solid rgb(0 0 0 / 0%) */
}

.email-meeting a.list-group-item:hover {
	background-color: rgb(0 123 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: #162891;
}

.email-toggle-btn {
	width: auto;
	height: auto;
	margin-right: 10px;
	text-align: center;
	font-size: 24px;
	color: #404142;
	border-radius: 0;
	cursor: default;
	background-color: #fff;
	border: 0 solid rgb(0 0 0 / 15%)
}

.email-actions {
	width: 230px
}

.email-time {
	font-size: 12px;
	color: #6c757d
}

.email-list div.email-message {
	background: #fff;
	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-popup {
	width: 42%;
	position: fixed;
	bottom: -30px;
	right: 30px;
	z-index: 15;
	display: none
}

.compose-mail-toggled {
	display: block
}

.compose-mail-title {
	font-size: 12px;
}

.compose-mail-close {
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	font-size: 12px;
	border-radius: 2px;
	background-color: rgb(255 255 255 / 0%)
}

.compose-mail-close:hover {
	background-color: rgb(255 255 255 / 20%)
}

/* chat box */


.chat-wrapper {
	width: 100%;
	height: calc(100% - 35px);
	border-radius: .25rem;
	position: relative;
	background: #fff;
    /* position: fixed; */
   
	box-shadow: 0 .1rem .7rem rgba(0, 0, 0, .1)
}

.chat-sidebar {
	width: 340px;
	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: .25rem;
	border-bottom-left-radius: .25rem
}

.chat-sidebar-header {
	width: auto;
	height: auto;
	position: relative;
	background: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, .125);
	border-right: 0 solid rgba(0, 0, 0, .125);
	border-top-left-radius: .25rem;
	padding: 15px
}
.chat-sidebar-content,.tab-content,.tab-pane.fade.show.active{
    height: 100%;
    max-height: 560px;
}


.chat-list {
    min-height: 100%; /* Ensures a minimum height */
    max-height: 100%; /* Ensures it doesn't exceed the full height */
    overflow-y: auto; /* Enables vertical scrolling */
    padding: 0;
}


.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: #162891;
}

.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: #162891;
}

.chat-content {
	margin-left: 340px;
	padding: 85px 15px 15px 15px;
    background: #fff;
    overflow-y: auto;
    height: 100%;
}

.chat-header {
	position: absolute;
	height: 70px;
	left: 340px;
	right: 0;
	top: 0;
	padding: 15px;
	background: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, .125);
	border-top-right-radius: .25rem;
	z-index: 1
}

.chat-footer {
	position: absolute;
	height: 70px;
	left: 340px;
	right: 0;
	bottom: 0;
	padding: 15px;
	background: #f0f0f0;
	border-top: 1px solid rgba(0, 0, 0, .125);
	border-bottom-right-radius: .25rem
}

.chat-footer-menu a {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 12px;
	color: #6c757d;
	text-align: center;
	border-radius: 50%;
	margin: 3px;
	background-color: #fff;
	border: 1px solid rgb(0 0 0 / 15%)
}

.chat-tab-menu li a.nav-link {
	padding: .3rem .2rem;
	line-height: 1.2;
	color: #4a4b4c
}
.list-group.list-group-flush{
    margin-bottom: 0;
    border-bottom: 0;
    overflow-y: auto;
    max-height: 100%;
}

.chat-tab-menu .nav-pills .nav-link.active,
.chat-tab-menu .nav-pills .show>.nav-link {
	color: #008cff;
	background-color: rgb(0 123 255 / 0%)
}

.chat-title {
	font-size: 12px;
	color: #272b2f
}

.chat-msg {
	font-size: 12px;
	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 / .12)
}

.chat-list .list-group-item.active {
	background-color: rgb(13 110 253 / .12)
}

.chart-online {
	color: #162891;
}

.chat-top-header-menu a {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 12px;
	color: #162891;
	text-align: center;
	border-radius: 50%;
	margin: 3px;
	background-color: #fff;

}

.chat-content {
	position: relative;
	width: auto;
	height: 600px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column-reverse;
}

.chat-content-leftside .chat-left-msg {
	width: fit-content;
	background-color: #eff2f5;
	padding: .8rem;
	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: .8rem;
	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: default;
	background-color: #fff;
	border: 1px solid rgb(0 0 0 / 15%)
}

  @media screen and (min-width:767px) {
    .email-toggle-btn {
		display: none!important
	}
	.chat-toggle-btn {
		display: none!important
	}

  }



  /* Authentication */

.authentication-card {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    max-width: 60rem;
    /* height: 100vh; */
}

.login-separater span {
    position: relative;
    top: 26px;
    margin-top: -10px;
    background: #fff;
    padding: 5px;
    font-size: 12px;
    color: #cbcbcb;
    z-index: 1;
}


/* swicther */

.btn-switcher {
    position: fixed;
    right: 0px;
    top: 40%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}


.header-colors-indigators .indigator {
	width: 50px;
    height: 50px;
    background-color: #fbf9f8;
    border-radius: 10px;
    cursor: default;
}


/* Responsive */

  @media screen and (max-width:767px) {
	.email-header {
		height: auto
	}
	.email-content {
		padding: 100px 0 0 0
	}
}



  @media screen and (max-width:767px) {
      
    
    .sidebar-wrapper {
    
        left: -300px;
    }

    .sidebar-wrapper .textmenu .brand-logo {
      
        position: fixed;
        left: -300px;

    }

    .sidebar-wrapper .iconmenu {

        position: absolute;
        
    }

    .sidebar-wrapper .iconmenu .nav-toggle-box {
        position: fixed;
        left: -60px;
    }



    .sidebar-wrapper .textmenu {
        
        position: absolute;
    }
.dataTables_paginate,.paging_simple_numbers{

    opacity: 0.1 !important;
}

    .page-content {

        margin-left: 0px;

    }

    .top-header .navbar{
      
        left: 0px;
    }

    /* Toggeled */


   .wrapper.toggled .sidebar-wrapper{
    
        left: 0px;
    }

    .wrapper.toggled .sidebar-wrapper .textmenu .brand-logo {
        
        left: 60px;

    }

    .wrapper.toggled .sidebar-wrapper .iconmenu .nav-toggle-box {
        left: 0px;
    }


    .wrapper.toggled .sidebar-wrapper .textmenu {
        
        left: 60px;
    }


    .wrapper.toggled .page-content {

        margin-left: 0px;

    }

    .wrapper.toggled .top-header .navbar{
      
        left: 0px;
    }


    .wrapper.toggled .overlay {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: #000;
		opacity: .6;
		z-index: 12;
		display: block;
		cursor: move;
		transition: all .2s ease-out
	}
    

    
.top-header .navbar .full-searchbar {

    position: absolute;
    top: 0%;
    left: 0;
    right: 0%;
    width: 100%;
    height: 60px;
   
    /* border-bottom: 1px solid rgb(0 0 0 / 0%); */
    background-clip: padding-box;
    display: flex !important;
    z-index: 1;
    align-items: center;
    justify-content: start;
    padding: 0 1rem;
    -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
 
  }

.email-header {
    border-top-left-radius: .25rem
}
.email-sidebar {
    left: -280px
}
.email-content {
    margin-left: 0
}
.email-header {
    left: 0
}
.email-toggled .email-sidebar {
    left: 0
}
.email-toggled .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 250px;
    background: #000;
    opacity: .5;
    z-index: 9;
    display: block;
    cursor: move;
    transition: all .3s ease-out
}
   
.compose-mail-popup {
    width: auto;
    position: fixed;
    bottom: -30px;
    right: 0;
    left: 0
}

.chat-header {
    border-top-left-radius: .25rem
}
.chat-footer {
    border-bottom-left-radius: .25rem
}
.chat-sidebar {
    left: -370px
}
.chat-content {
    margin-left: 0
}
.chat-header {
    left: 0
}
.chat-footer {
    left: 0
}
.chat-toggled .chat-sidebar {
    left: 0
}
.chat-toggled .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 340px;
    background: #000;
    opacity: .5;
    z-index: 11;
    display: block;
    cursor: move;
    transition: all .3s ease-out
}



  
}


@media screen and (max-width:767px) {
    .authentication-card {
        padding: 1.5rem 0;
        height: auto;
    }
}


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

	.top-header .navbar .dropdown-menu::after,.mobile-toggle-icon{
		display: none;
	}

	.top-header .navbar .dropdown {
		position: static!important
	}

	.top-header .navbar .dropdown-menu {
		width: 100%!important;
	}



}


@media screen and (max-width:520px) {
	.chat-footer-menu,
	.chat-top-header-menu {
		display: none
	}
}



.dtrg-group td,.dtrg-group th{
    color:#28a745 !important;
 

}
.open-menu-btn {
    padding: 10px 20px;
    background-color: #27D07C;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    font-size: 11px; /* Adjust button text size */
}

/* Overlaya for the menu */
.overlaya {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    z-index: 99;
}

/* Right Side Menu (hidden by default) */
.side-mena {
    width: 350px;
    background-color: #ffffff;
    border-left: 1px solid #16299183;
    transition: right 0.3s ease;    
    position: fixed;
    right: -350px;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 20px;
    overflow-y: auto;
    z-index: 100;
    transition: right 0.3s ease;
}

.side-mena h2, .side-mena p, .side-mena h4 {
    font-size: 11px;
    
}

.sectiona {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;;
}

.sectiona h4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: bold;
    margin: 0;
    font-size: 11px;
}

.sectiona-content {
    display: none;
    padding-top: 10px;
}

/* Activity sectiona styling */
.activity-item {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
    font-size: 11px; /* Ensure text size for the activity items */
}

/* Dot for each activity */
.activity-item .status-dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #162891 ;
    position: absolute;
    left: 0;
    top: 0;
}

/* The vertical connecting line */
.activity-item::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 15px; 
    bottom: -20px;
    width: 2px;
    background-color: #ccc;
    z-index: -1;
}
.activity-item:last-child::before {
    display: none;
}

/* Buttons */
.btn-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.side-mena .btn {
    padding: 10px;
    background-color: #162891;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 11px; /* Adjust button text size */
}

.side-mena .btn:hover {
    background-color: #162891;
}

.side-mena .btn-gray {
    background-color: #ccc;
    color: #333;
}

.side-mena.btn-gray:hover {
    background-color: #aaa;
}

/* Show the side menu when active */
.side-mena.active {
    right: 0;
}