:root{
--FontSize: 12pt;
--TableFontSize: 10pt;
--AttachmentCaptionFontSize: 10pt;
}

body{
margin:0px;
background: #abb8c1;
font-family:sans-serif;
font-size:var(--FontSize);
}
* {
  box-sizing: border-box;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
  border-right:1px solid #bbb;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 8px 14px;
  text-decoration: none;

}
.Page{
margin-right:2px;
}
.outerTableFooter{
height:28px !Important;
}
.datecls{
width:77px;
}
li a:hover:not(.active) {
border-bottom:3px solid #0c275c;
}

navbar{
position:fixed;
width:100%;
left:0;
}
.navbar a:hover{
background:#fff;
}
.idprofile{
width: 27px;
    border: 1px solid #fff;
    height: 27px;
    float: left;
    border-radius: 19px;
    margin: 2px;
}
#List_UserProfile{
width: 200px;
    text-align: left;
overflow:hidden;
}
.active {
background:#2857b5;
}
.ActivePage{
background:#195c89 !Important;
}

.attachment_tile{
width: 210px;
    height: 200px;
    float: left;
border:1px solid #ccc;
}

div.SelectionblueTable, div.blueTable {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 974px;
  text-align: left;
  border-collapse: collapse;
margin:auto;
}
.SelectionBox, .SelectionBoxCell{
padding:4px;

}
div.SelectionblueTable{
width:800px;
}

.case_title{
font-size: 19pt;
    color: #fff;
    text-shadow: 1px 1px 1px #524b4b;
}

.active_button{
background: #0c275c;
    color: #fff;
    border: 0px;
    padding: 4px;
    width: 96px;
}

#search_client{
width:254px;
}
.HomeTable.blueTable .HomeTableCell, .HomeTable.blueTable .HomeTableHead {
  border: 1px solid #AAAAAA;
  padding: 2px 2px 2px 2px;
  font-size: var(--TableFontSize);
cursor:pointer;
}
.HomeTable.blueTable .HomeTableBody .HomeTableCell {
}
.HomeTable.blueTable .HomeTableRow:nth-child(even) {
  background: #D0E4F5;
}
.blueTable .tableFootStyle {
font-size:var(--TableFontSize);
}
.blueTable .tableFootStyle .links {
	 text-align: right;
}
.blueTable .tableFootStyle .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}
.blueTable.outerTableFooter {
  border-top: none;
}
.blueTable.outerTableFooter .tableFootStyle {
  padding: 3px 5px; 
}
/* HomeTable.com */
.HomeTable{ display: table; }
.HomeTableRow { display: table-row; }
.HomeTableHeading { display: table-header-group;}
.HomeTableCell, .HomeTableHead { display: table-cell;}
.HomeTableHeading { display: table-header-group;}
.HomeTableFoot { display: table-footer-group;}
.HomeTableBody { display: table-row-group;}




.TableTitleRow{
background: #0c275c;
    color: #fff;
    text-align: center;
}

table{width:100%;
max-width:2025px;
margin:auto;
}
/* Create three unequal columns that floats next to each other */
.column {
  float: left;
}

.left {
  width: 200px;
}
.right {
  width: 29%;
}

.middle {
  width: 576px;
min-width:430px;
}

.row{
height:fit-content;
min-height:600px;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.dtitle{
float:left;
width:200px;
}
.dval{
}
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 1px;
  padding: 1px;
overflow-y:scroll;
max-width:302px;
}

.grid-container > div {
  background-color: #fff;
  //border: 1px solid black;
  text-align: center;
font-size:var(--TableFontSize);
height:88px;
width:94px;
}

.ui-draggable, .ui-droppable {
	background-position: top;
}
.upload_status{
color:green;
font-weight:bold;
}
.cls_title, .cls_input {
min-width:400px;
min-height:25px;
border:1px solid #ebf0f5
}
.cls_input{
width:99.9%;
}
.address_table{
position: fixed;
    left: 0;
    z-index: 11;
    top: 0;
}
.spacer{
width: 100%;
    height: 38px;
}

.menu{
padding: 2px;
    background: #5c78b1;
    color: #fff;
    padding-left: 5px;
    width: 281px;
    text-align: center;
    margin: auto;
    padding: 3px;
    margin-bottom: 5px;
    box-shadow: 3px 3px 3px #333;
    cursor: pointer;
}
.h1manage{
color: #333;
    text-align: center;

}
.navright{
right: 0;
    position: fixed;
}
.AppWindowName{
width: 100%;
    margin: auto;
    text-align: center;
    align-items: center;
    position: fixed;
    top: 0;
background:#0c275c;
height:34px;
z-index:2;
border-bottom: 3px solid #03a9f4;
}
.navcenter{
margin: auto;
    text-align: center;
    width: 297px;
    color: #fff;
    padding: 9px;
    text-shadow: 1px 0px #878279;
font-size:var(--TableFontSize);
}
.cls_title{

padding: 2px;
    margin: 1px;
    background: #d2dde9;
    border-radius: 4px;
    padding-left: 5px;
    font-weight: 600;
    color: #26404c;

}
.dynamic_search{
	min-width:10px;

    background: #eee;
    border: 1px #ccc solid;
    }
.th_ele_clk {
    height: 61px;
    text-align: center;
}
  .filter-input-container {
            position: relative;
            display: inline-block;
        }

        .filter-input {
            padding-left: 30px; /* Adjust based on icon size */
        }

        .filter-icon {
		cursor:pointer;
		cursor: pointer;
    background: #000733;
    color: #fff;
    padding: 2px;
    font-size: 10pt;
    margin-left: 1px;
    border-radius: 3px;
        }
.close-tooltip{
	position: absolute;
    top: 0;
    right: 0;
    padding: 3px;
    margin: 4px;
}
.section_div, .section_div2{
padding:3px;

}
.timelinecol_new{
	width: 17px;
    float: right;
    background: #373a53;
    padding: 5px;
    color: #fff;
    text-align: center;
    /* border-top: 1px solid #fff; */
    font-size: 9pt;
}
.casebox{
}

#noresultrow{
background: #000733;
    color: #fff;
    padding: 4px;
    border-radius: 4px;
    width: 212px;
    display: block;
    text-align: center;
    /* left: 100px; */
    position: relative;
    margin: auto;
}
#formdata{
margin-top:60px;
}

#dataframe_container{
    display:none;
}
#dataframe{
    display:none;
}

#dataframe_close{
background: #000733;
    width: 30px;
    text-align: center;
    border-radius: 4px;
    font-size: 15pt;
    font-weight: 700;
    color: #fff;
    cursor:pointer;
    float:right;
    }
    #dataframe_case{
background: #fff;
    min-height: 5vh;
}


.attachments{
width: 62px;
    display: block;
    text-align: center;
    background: #3a3aef;
    color: #fff;
    text-decoration: none;
    box-shadow: 1px 1px 1px #ccc;
    border-radius: 3px;
}

#ajax_status{
width: 500px;
    text-align: center;
    font-size: 12pt;
    background: #19305c;
    color: #fff;
    position: fixed;
    margin-bottom: 28px;
    top: 36px;
}

#divcls_main_Add_Client, #divcls_main_Add_Case{
top: 34px;
    position: fixed;
    z-index: 11;
    box-shadow: 0px 2px 2px #333;
    /* padding: 8px; */
    background: #abb8c1;
    margin: auto;
    width: 100%; 
    text-align: center;
}
#id_case_matter_type_text{
border: 1px solid #ccc;
    font-size: 10pt
}
.ClientData{
width: 300px;
    border: 1px solid #eee;
    float: left;
    height: 400px;
    overflow: scroll;
}
.altrow{
background-color:#6b7b82;
}

.ClientData_RowCol1, 
.ClientData_RowCol2{
    float: left;
    width: 50%;
    overflow: hidden;
    min-height: 40px;
background: #6b7b87;
    font-size: 10pt;
padding:3px;
}

#divcls_title_Add_Case{
display:none;
}
.clsrow{
width:300px;
}
.cls_case{
width: 130px;
}
#id_case_folder{
width: 400px;
}
.divclass, .divclass2{
margin-bottom:1px;
background:#ebf1f5;
padding:3px;
border-radius:3px;
}
.section_title{
background: #1b255c;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
}
.number{
text-align:right;
}
.loadclass{
display: none;
    position: absolute;
    width: 821px;
    border-radius: 5px;
    padding: 14px;
    top: 150px;
    /* right: 0px; */
    height: 400px;
    box-shadow: 4px 22px 22px 2px #ccc;
    border: 3px solid #8993a7;
    margin: auto;
    overflow: scroll;

}

.divTitle{
background: #27437b;
    color: #fff;
    text-align: center;
    text-transform: uppercase;

}
.hide{
display:none;
}

.NewCaseBox{
    margin: auto;
    text-align: center;
    padding: 4px;
}
.TitleBox{
background:#1b255c;
}

.TitleBox_ClientData{
padding: 10px;
    background: #d2dde9;
    color: #333;
}
.TitleBox_ClientName{
font-size: 14pt;
    font-weight: bold;
    background: #ebf1f5;
color:#1b255c;
}
.TitleBox_Contacts{
color: #fff;
    background: #2e3f9d;
    padding: 3px;
    border-radius: 5px;
text-align:center;
}
.TitleBox_Contacts a{
color: #fff;

}
.select_attachment{
font-size: 14pt;
    height: 33px;
}
.TitleBox_SocialNumbers{
background: #0e1c68;
    color: #fff;
    padding: 3px;
    border-radius: 4px;
    margin: 1px;
}

#StatusBox{

display: none;
    background: #1d354a;
    color: #fff;
    width: 300px;
    z-index: 11;
    position: fixed;
    height: 54px;
    border-radius: 4px;
    padding: 14px;
    text-align: center;
    box-shadow: 3px 3px 3px #333;
    bottom: 35px;
    /* left: 5%; */
    margin: auto;
    /* z-index: 20; */
    margin: auto;
    right: 0;
    left: 0;
    border-bottom: 3px solid #2196f3;
    border-top: 3px solid #2196f3;
}
#imagepreview.img{
width:100%;
}

.attachment_row{
font-size:var(--TableFontSize);
}
#divclass_Add_Client{
    box-shadow: 3px 2px 3px #ccc;

}
.client_form{
float: left;
    width: 432px;
    margin: auto;
    padding-left: 20px;
}
.source_form{
    width: 432px;
    margin: auto;
    padding-left: 20px;
}

#cls_title_Add_Client{
display:none;
}

.notification_round{
float: right;
    background: red;
    padding: 2px 2px 0px 0px;
    min-width: 20px;
    max-width: 40px;
    border-radius: 9px;
    height: 20px;
    margin-left: 4px;
    text-align: center;
    font-size: 9pt;
}
div.attachments_list {
  font-family: "Times New Roman", Times, serif;
  width:500px;
  text-align: center;
  border-collapse: collapse;
}
.attachments_listdivTable.attachments_list .attachments_listdivTableCell, .attachments_listdivTable.attachments_list .attachments_listdivTableHead {
  border: 1px solid #FFFFFF;
  padding: 2px 2px;
}
.attachments_listdivTable.attachments_list .attachments_listdivTableBody .attachments_listdivTableCell {
  font-size: 13px;
}
.attachments_listdivTable.attachments_list .attachments_listdivTableRow:nth-child(even) {
  background: #D0E4F5;
}
.attachments_listdivTable.attachments_list .attachments_listdivTableHeading {
  background: #0B6FA4;
  border-bottom: 5px solid #FFFFFF;
}
.attachments_listdivTable.attachments_list .attachments_listdivTableHeading .attachments_listdivTableHead {
  font-size: 17px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #FFFFFF;
}
.attachments_listdivTable.attachments_list .attachments_listdivTableHeading .attachments_listdivTableHead:first-child {
  border-left: none;
}

.attachments_list .tableFootStyle {
  font-size: 15px;
}
/* DivTable.com */
.attachments_listdivTable{ display: table; }
.attachments_listdivTableRow { display: table-row; }
.attachments_listdivTableHeading { display: table-header-group;}
.attachments_listdivTableCell, .attachments_listdivTableHead { display: table-cell;}
.attachments_listdivTableHeading { display: table-header-group;}
.attachments_listdivTableFoot { display: table-footer-group;}
.attachments_listdivTableBody { display: table-row-group;}

.statusbar{
width:99%;
position:absolute;
margin:auto;
}
.add_image_preview{
width: 383px;
    border: 1px solid #ccc;
    padding: 4px;
    border-radius: 3px;
}
#close_attachments{
right: 27px;
    position: absolute;
}
.divCell_timestamp{
width:135px;
}
.divCell_case_status{
display:block;
width:176px;
}

.sticky-header {
	top: 102px;
    z-index: 10;
    position: sticky;
    background: #ccc;
    margin-top: 186px;
}

.fixed-header {
  position: fixed;
  top: 200px; /* Adjust this value as needed */
  width: 100%;
  z-index: 1000; /* Ensure the header appears above other content */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for a visual effect */
}

#ChangesBoxDiv, #AttachmentsBoxDiv{
display:none;
width: 95%;
    position: fixed;
    background: #fff;
    margin: auto;
    height: 100%;
padding: 20px;
    top: 87px;
left:10px;
color:#333;
overflow-y:scroll;
}
.close_button{
text-decoration: none;
    padding: 0px 0px 0px 0px;
    right: 0;
    position: absolute;
    top: 10px;
    background: #ffffff;
    color: #333;
    border: 0;
    box-shadow: none;
font-size: 10pt;
    margin: 10px;
}
.sectionclass_documents{
position: absolute;
    width: 412px;
    left: 579px;
    top: 96px;
    z-index: 0;
min-width: 335px;
}
.additional_attachment_file_input{
font-size:16.24pt;
}
.divTable{
	display: table;
font-size:var(--TableFontSize);
}
.divTableRow {
	display: table-row;
font-size:var(--TableFontSize);
cursor:pointer;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border-bottom: 1px solid #ccc;
	display: table-cell;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}


.divTable:hover{
background:#2d485c;
color:#fff;
}

.div_client_id{ width:51px; }
.div_first_name{ width:220px; }
.div_last_name{ width:155px; }
.div_select{ width:67px;text-align:center }
.div_account_reference{ width:90px; }

.div_client_id, .div_first_name,.div_last_name,.div_select,.div_account_reference{
height:22px;
padding:2px;
}


.AddNote_value{
width:80%;
height:90%;
}

.user_notice_banner{
right:0;
border: 11px solid #333;
margin:auto;
position: fixed;
    top: 129px;
    background: #cb3a3a;
    color: #fff;
    left: 0;
    width: 50%;
    box-shadow: 3px 3px 3px #333;
    height: 100px;
    text-align: center;
    z-index: 1;
    padding: 39px;
display:none;
}

#user_notice_banner_close{
position: absolute;
    right: 3%;
    cursor: pointer;
    border: 1px solid #db7676;
    border-radius: 6px;
    padding: 3px;
}

.AddNote{
width: 400px;
    background: #d0e4f5;
    box-shadow: 2px 3px 3px 3px #333;
    border-radius: 2px;
    padding: 3px;
    height: 213px;
    text-align: center;
    margin: auto;
}

#client_search_by_id{
}
#FindByName{
}
.SearchData{
width:83.9%;
margin:auto;
}
.alignbox{
width: 100%;
height:400px;
    position: absolute;
    top: 0;
    margin: auto;
    top: 179px;
    background: #333;
    opacity: .99;
    z-index: 1;
    padding: 44px;
}
#AddNote_CaseNote_val{
width: 360px;
    height: 124px;
}
#client_search_Close_BTN{position: absolute;
    right: 0;
    top:0;
}
div.SelectionBoxblueTable {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
.SelectionBox.SelectionBoxblueTable .SelectionBoxCell, .SelectionBox.SelectionBoxblueTable .SelectionBoxHead {
  padding: 3px 2px;
}
.SelectionBox.SelectionBoxblueTable .SelectionBoxBody .SelectionBoxCell {
font-size:var(--TableFontSize);
}
.SelectionBox.SelectionBoxblueTable .SelectionBoxCell:nth-child(even) {
  background: #D0E4F5;
}
.SelectionBoxblueTable .tableFootStyle {
font-size:var(--TableFontSize);
}
.SelectionBoxblueTable .tableFootStyle .links {
	 text-align: right;
}
.SelectionBoxblueTable .tableFootStyle .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}
.SelectionBoxblueTable.outerTableFooter {
  border-top: none;
}
.SelectionBoxblueTable.outerTableFooter .tableFootStyle {
  padding: 3px 5px; 
}
/* SelectionBox.com */
.SelectionBox{ display: table; }
.SelectionBoxRow { display: table-row; }
.SelectionBoxHeading { display: table-header-group;}
.SelectionBoxCell, .SelectionBoxHead { display: table-cell;}
.SelectionBoxHeading { display: table-header-group;}
.SelectionBoxFoot { display: table-footer-group;}
.SelectionBoxBody { display: table-row-group;}


.SelectionBox select{
width:176px;
}


.SearchData{
display:none;
position: fixed;
    top: 61px;
    background: #fff;
    width: 587px;
    box-shadow: 3px 3px 3px #333;
    overflow: scroll;
    padding: 8px;
}

.devCell_id{ width:40px;}
.devCell_id_case_matter_type{ width:71px; }
.devCell_case_description{width:100px;}
.devCell_clientid_1{}
.devCell_clientid_2{}
.devCell_created_time{}

table{
	border:0px;
	
}
td
	{
	border:0px;
	
	border-style: none;
	border-color: inherit;
	border-width: medium;
	padding: 0px;
	color:black;
	font-size:11.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:Calibri, sans-serif;
	text-align:general;
	vertical-align:bottom;
	white-space:nowrap;
	}
.auto-style1,
.auto-style2 ,
.auto-style3 ,
.auto-style4,
.auto-style5,
.auto-style6,
.auto-style7,
.auto-style8,
.auto-style9,
.auto-style10,
.auto-style11,
.auto-style12,
.auto-style13,
.auto-style14,
.auto-style15,
.auto-style16
 {

	background: #27437B;
color:#D9D9D9;
	text-align: left;
}
.auto-style4 {
	border-left: .5pt solid #cccc;
	border-right-style: none;
	border-right-color: inherit;
	border-right-width: medium;
	border-top-style: none;
	border-top-color: inherit;
	border-top-width: medium;
	border-bottom-style: none;
	border-bottom-color: inherit;
	border-bottom-width: medium;
	padding: 0px;
}

.auto-style7 {
	font-size: 14.0pt;
	font-weight: 700;
	font-style: normal;
	vertical-align: middle;
	white-space: nowrap;
}
.auto-style8 {
	border-left: .5pt solid #D9E1F2;
	border-right-style: none;
	border-right-color: inherit;
	border-right-width: medium;
	border-top-style: none;
	border-top-color: inherit;
	border-top-width: medium;
	border-bottom-style: none;
	border-bottom-color: inherit;
	border-bottom-width: medium;
	padding: 0px;
}
.auto-style9 {
	vertical-align: middle;
	white-space: nowrap;
	border-style: none;
	border-color: inherit;
	border-width: medium;
	padding: 0px;

}
.auto-style10 {
	text-align: general;
	vertical-align: middle;
	white-space: nowrap;
}
.auto-style11 {
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}
.auto-style12 {
	text-align: left;
	vertical-align: middle;
}
.auto-style13 {
	text-align: general;
	vertical-align: middle;
	white-space: nowrap;
}
.auto-style14 {
	text-align: left;
	vertical-align: middle;
	white-space: normal;
}
.auto-style15 {
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}
.auto-style16 {
	border-collapse: collapse;
}

#box_other_clients{
display:none;
}

#client_mainbox{
width:99%;
}

#client_leftbox{
    float: left;
margin-bottom:100px;
margin-top:40px;
}
#client_rightbox{
width: 168px;
    float: left;
    margin: 3px;
}
.upload_status{
color:green;
font-weight:bold;
}
#Close_Client{
    background: #446487a3;
}

.master{
width:50%;
float:left;
}

.attachment_box_main_notes_m{
width: 439px;
    top: 99px;
    position: fixed;
    left: 998px;
    padding: 11px;
    background: #47698f;
    color: #fff;
    border-radius: 4px;
height:100%;
overflow-y:scroll;

}

.attachment_box_main_notes{
height:400px;
overflow-y:scroll;
height: 400px;
    overflow-y: scroll;
    background: #79899b78;
    border-radius: 5px;
    padding: 5px;
}


.attachment_box_main{
    /* position: fixed; */
    float: right;
    top: 0;
    background: #8b9ba7;
    padding: 6px;
    box-shadow: 1px 1px 1px 2px #333;
    margin-top: 83px;
    border-radius: 2px;
    color: #feffff;
    text-shadow: 1px 2px 3px #333;

}
#Undertaking_Case{
background:#cb3a3a;
}
.button{

background: #47698f;
    color: #fff;
   min-width: 86px;
    height: 27px;
    border: 1px solid #47698f;
    cursor: pointer;
    text-align: center;
    box-shadow: 1px 1px 2px 2px #333;
    border-radius: 5px;
    font-size: 9pt;
margin-left:6px;
}
#save{
display:none;
}
.image_preview{
width:300px;
}

.divCell_id,.divCell_case_id{Width:53px ;}
.divCell_id_case_matter_type{width:100px}
.divCell_case_description{width:200px}
.divCell_status_text{width:200px}
.divCell_clientid_1{width:200px; overflow:hidden;}
.divCell_clientid_2{width:200px; overflow:hidden}
.divCell_created_time{width:100px}

.attachment_tile{
width: 205px;
    height: 150px;
    float: left;
    margin: auto;
    padding: 2px;
    text-align: center;
border:1px solid #ccc;

}
.attachment_tile_imgbox_atimage{
max-width:100%;
max-height:100%;
}
.attachment_tile_imgbox_atimage_pdf{
width:100%;
height:100%;
}
.attachment_tile_imgbox{
width:100%;
height:76%;
background:#748795;
}
.attachment_tile_imgbox_filename{
text-align:center;
    background: #1b4c70;
    color: #fff;
font-size:var(--AttachmentCaptionFontSize);
height:32px;
}

.attachment_preview{
width:100%;
height:100%;
}
div.undertaking_list {
  font-family: "Times New Roman", Times, serif;
  width: 500px;
  text-align: center;
  border-collapse: collapse;
}
.UnderTakingTable.undertaking_list .UnderTakingSl, .UnderTakingTable.undertaking_list .UnderTakingTableHead {
  border: 1px solid #FFFFFF;
  padding: 2px 2px;
}
.UnderTakingTable.undertaking_list .divUndertakingBody .UnderTakingSl {
  font-size: 13px;
}
.UnderTakingTable.undertaking_list .divUndertakingRow:nth-child(even) {
  background: #D0E4F5;
}
.UnderTakingTable.undertaking_list .UnderTakingTableHeading {
  background: #0B6FA4;
  border-bottom: 5px solid #FFFFFF;
}
.UnderTakingTable.undertaking_list .UnderTakingTableHeading .UnderTakingTableHead {
  font-size: 17px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #FFFFFF;
}
.UnderTakingTable.undertaking_list .UnderTakingTableHeading .UnderTakingTableHead:first-child {
  border-left: none;
}

#UndertakingBoxDiv{
display:none;
position: fixed;
    top: 86px;
    z-index: 11;
    background: #fff;
    width: 50%;
    opacity: 0.98;
    border: 5px solid #333;
    box-shadow: 3px 33px 33px #333;
    min-height: 300px;
    padding: 39px;
left:10px;
color:#333;
}

.undertaking_list .tableFootStyle {
  font-size: 15px;
}

.undertaking_input{
height: 33px;
    width: 100%;
}
/* DivTable.com */
.UnderTakingTable{ display: table; }
.divUndertakingRow { display: table-row; }
.UnderTakingTableHeading { display: table-header-group;}
.UnderTakingSl, .UnderTakingTableHead { display: table-cell;}
.UnderTakingTableHeading { display: table-header-group;}
.UnderTakingTableFoot { display: table-footer-group;}
.divUndertakingBody { display: table-row-group;}

.Notes_container {
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
color:#333;
text-align:left;
}

.Notes_darker {
  border-color: #ccc;
  background-color: #ddd;

}

.Notes_container::after {
  content: "";
  clear: both;
  display: table;
}

.Notes_container img {
  float: left;
  max-width: 60px;
  width: 100%;
  margin-right: 20px;
  border-radius: 50%;
}

.Notes_container img.right {
  float: right;
  margin-left: 20px;
  margin-right:0;

}

.Notes_time-right {
  float: right;
  color: #aaa;
text-align:left;
font-size:9pt;
}

.Notes_time-left {
  float: left;
  color: #999;
}
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #0c275c;
  border-radius: 5px;
}
.profile{
width: 500px;
    margin: auto;
    text-align: center;
}
.user_label{
font-size:14pt;
height:33px;
    text-align: center;

}
.user_label input{
height: 32px;
    font-size: 14pt;
}

#first_login{
margin: auto;
    width: 600px;
    text-align: center;
    font-size: 14pt;
    background: #fff;
    padding: 3px;
    border-bottom: 3px solid #2196f3;
}


.magnifying-glass {
  width: 50px; /* Adjust size as needed */
  height: 50px;
  position: relative;
}

.glass {
  width: 30px;
  height: 30px;
  border: 2px solid #000;
  border-radius: 50%;
  position: relative;
  background-color: white;
}

.circle {
  width: 10px;
  height: 10px;
  background-color: transparent;
  border: 2px solid #000;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.handle {
  width: 2px;
  height: 10px;
  background-color: #000;
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
}

.handle-circle {
  width: 5px;
  height: 5px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.messagenotes {
    max-height: calc(100vh - 100px); /* Adjust the value (100px) as needed to leave space for other elements */
    overflow-y: auto; /* Enable vertical scrolling */
    border: 1px solid #ccc; /* Optional: Add a border for visual clarity */
    padding: 10px; /* Optional: Add padding for better readability */
}
.greycls{
font-weight: 700;
    background: #c4ccd5 !Important;
}

.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.notification {
    background-color: #f1f1f1;
    border-left: 6px solid #4CAF50;
    border-radius: 5px;
    color: #333;
    margin-bottom: 15px;
    padding: 10px;
    width: 300px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.notification i {
    margin-right: 5px;
}

.notification.success {
    border-color: #4CAF50;
}

.notification.error {
    border-color: #f44336;
}

.notification.info {
    border-color: #2196F3;
}

.notification.warning {
    border-color: #ff9800;
}

.notification.hide {
    transform: translateX(400px);
}
/* Styles for the Case Notes module */
.case-notes-container {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow-y:scroll;
    height:68vh;
}
.note_time{
background: #fff;
    float: right;
    font-size: 10pt;
    position: relative;
    bottom: 0px;
    right: 0;
}
.case-notes-container h2 {
    margin-top: 0;
}

.case-notes-container textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.case-notes-container button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.case-notes-container button:hover {
    background-color: #0056b3;
}

.case-notes-container .note {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#downloadform{
}
#sel_column_name{
	display:none;
}

#home_page_allcases, #home_page, #completed_cases, #pending_accept{
background: #ad9279;
    display: block;
    width: 70px;
    border-radius: 3px;
    color: #fff;
    padding: 3px;
    text-align: center;
    float: right;
    cursor:pointer;
    font-size:8pt;
    margin-left:1px;
    margin-right:1px;
}
#download_btn_s{
background: #ad9279;
    display: block;
    width: 105px;
    border-radius: 3px;
    color: #fff;
    padding: 3px;
    text-align: center;
    float: right; 
    cursor: pointer;
    font-size: 8pt;
    margin: 0;
    border: 0;
    margin-right:2px;
}
#title_name{
display: block;
    text-align: center;
    /* background: #000733; */
    padding: 3px;
    color: #32363f;
    width: 300px;
    /* margin: auto; */
    border-radius: 3px;
    font-weight: 700;
    margin: auto;
}
#dataframe_container{display:none;}
.accepted_cases{
background: #1c6ea4;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    width: 100px;
    text-align: center;
    font-size: 10pt;
}

#sel_column_text{

text-align: center;
    font-size: 10pt;
    margin: auto;
    display: block;
    font-weight: 700;
}
        /* Styling for the popup */
        .date-popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
            padding: 20px;
            z-index: 1000;
            max-width: 300px;
            width: 100%;
        }

        .date-popup h3 {
            margin-top: 0;
            text-align: center;
        }

        .date-popup input[type='date'] {
            width: 100%;
            padding: 8px;
            margin: 10px 0;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .date-popup button {
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            border: none;
            border-radius: 4px;
            color: white;
            font-size: 16px;
            cursor: pointer;
        }

        .date-popup button:hover {
            background-color: #0056b3;
        }

        /* Overlay */
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 999;
        }