body {
    font-family: 'Roboto', sans-serif;
    background-color: #e9e9e9;
    margin: 0;   /* Remove default margin */
    padding: 0;  /* Remove default padding */
}

h2 {
    font-size: 24px;
    color: #000000;
}
h1 {
    font-size: 16px;
    color: #000000;
}    

.no-scroll {
  overflow: hidden; /* Disables scrolling */
}



.status-popup {
  position: absolute;
  top: -40px;  
  left: 120px;  
  
  width: 200px;
  height: 100px;
  background-color: #000000;
  border: 1px solid black;
  border-radius: 8px;
  padding: 10px;
  color:#ffffff;
  font-size: 12px;
  font-style: italic;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
}















.info-icon {
    cursor: pointer;
    
margin-left:10px;
margin-bottom: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 18px; /* Adjust size as needed */
  height: 18px; /* Adjust size as needed */
  background-color: #ffffff; /* Blue background (or any color you prefer) */
  color: #75AFFA;
  border: 1px solid #ccc;
  border-radius: 50%; /* Makes it a circle */
  
  font-family: hoefler;
  font-weight: 600;
  font-style: italic;
  font-size: 17px; /* Adjust text size */
  cursor: pointer;
  text-align: center;
}

.info-popup {
  display: none; /* Hidden by default */
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Optional shadow */
  z-index: 1000; /* Ensures it appears above other elements */
}

/* Simple styling for the popup when visible */
.show {
  display: block;
}


.infoIcon {
    display: flex;
    position: relative;
    
    /*flex-direction: row;*/
    /*justify-content: left;*/
    /*background-color: red;*/
    /*margin-bottom: 10px;*/
}

.statusWrap {
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: left;
    min-width: 60%;
    background-color: red;
    /*margin-bottom: 10px;*/
}


.par1a-container {
  display: flex;
  align-items: center; /* Vertically centers the icon with the text */
}


.par1a {
  /*min-width: 50%;*/
  height: 20px;
  /*background-color: yellow;*/
  /*background-color: #007bff;*/
  
  font-size: 14px;
  font-weight: 800;
  color: #616161;
  text-align: left;
  display: block;
  margin: 0; /* Remove default margin if necessary */
}






.profile-infoxxxxx {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: left;
    /*background-color: red;*/
    margin-bottom: 10px;
}



























.profile-container {
    /*background-color: red;*/
  width: 85%;
  margin: 15px 5px 5px 25px ;  
  
  /*border: 1px solid #ccc;*/
  /*padding: 15px;*/
  /*box-sizing: border-box;*/
}






.profile-info {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: left;
    text-align: left;
    /*background-color: red;*/
    margin-bottom: 10px;
}




.par1 {
  width: 100%;
  height: 20px;
  /*background-color: yellow;*/
  /*background-color: #007bff;*/
  
  font-size: 14px;
  font-weight: 800;
  color: #616161;
  text-align: left;
  display: block;
  margin: 0 auto;
}




.span1 {
    font-size: 14px;
    font-weight: 400;
    color: #616161;
}









.toggle-button {
  width: 100%;
  background-color: #ececec;
 
  /*background-color: #007bff;*/
  font-size: 12px;
  color: #616161;
  padding: 4px;
  border: none;
  cursor: pointer;
  text-align: center;
  display: block;
  margin: 0 auto;
}

.toggle-button.active {
  background-color: #d1d1d1; /* Color when popup is open */
}






button, .toggle-button {
  outline: none; /* Removes the default outline when focused */
  -webkit-tap-highlight-color: transparent; /* Removes the blue highlight on tap for WebKit browsers */
}





.edit-form-container {
    /*background-color: tan;*/
    width: 90%;
    margin-left: 20px;
    /*display: none;*/
    margin-top: 15px;
    
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform-origin: top;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}

.edit-form-container.show {
  display: block;
  opacity: 1;
max-height: 500px; /* Set to a value that accommodates the maximum expected height */

}







label {
  display: block;
  margin-top: 10px;
}

input[type="text"] {
  width: calc(100% - 10px);
  padding: 5px;
  margin-top: 5px;
  box-sizing: border-box;
}


.custom-select {
  width: 95%;
  height: 30px;
  padding: 2px; /* Optional padding for inner spacing */
  box-sizing: border-box; /* Ensures padding is included in the width */
}














.clickPicMes-container {
    font-size: 14px;
    color:#86a8c2;
    /*font-style: italic;*/
  display: flex;
  justify-content: center;
  margin-top: 15px; /* Optional: add some margin to separate the buttons from inputs */
}


.button-container {
  display: flex;
  justify-content: center;
  margin-top: 15px; /* Optional: add some margin to separate the buttons from inputs */
}



#saveBtn, #cancelBtn {
  margin-top: 10px;
  padding: 8px 12px;
  cursor: pointer;
}

#saveBtn {
    border-style: solid;
    /*border-color: #d9d9d9;*/
    border-width: 1px;
    border-radius: 4px;
    
    
  background-color: #000000;
  /*background-color: #28a745;*/
  color: white;
  border: none;
  margin-right: 10px;
}

#cancelBtn {

    border-radius: 4px;
  background-color: #bbbcbd;
  color: white;
  border: none;
}




































.popup1 {    
    position: relative;
    /*background-color: pink;*/
    width: 100%;
    min-height: 20px;

}




.space1 {    
    position: relative;
    /*background-color: pink;*/
    width: 100%;
    min-height: 20px;
    border-style: solid;
    border-color: #d9d9d9;
    border-width: 1px;
}

.position2{
    position: fixed;
    z-index: 8;
    background-color: red; 
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 45px; /* Prevent collapsing */
    opacity: 50%;
}

.MainTable {
    /*background-color: pink; */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 45px; /* Prevent collapsing */
}
.InnerMainContainer {
    display: flex;
    justify-content: center;
    align-items: flex-start;  
    background-color: green; 
    max-width: 500px;
    width: 100%; /* Ensure it can shrink to fit the parent container */
    margin: 0 auto; /* Center horizontally within the parent */
    min-height: 1500px; /* Prevent collapsing */
}

.InnerMainTable {
    background-color: white; 
    max-width: 500px;
    width: 100%; /* Ensure it can shrink to fit the parent container */
    margin: 0 auto; /* Center horizontally within the parent */
    min-height: 1500px; /* Prevent collapsing */
}

.DivBlocking2 {    
    display:flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin: 0 auto;
    margin-top: 20px;
    background-color: white;
    max-width: 480px;
    width: 96%;
    min-height: 200px;
    border-style: solid;
    border-color: #d9d9d9;
    border-width: 1px;
    border-radius: 10px;
    -moz-box-shadow:    1px 2px 6px -2px #ccc;
    -webkit-box-shadow: 1px 2px 6px -2px #ccc;
    box-shadow:         1px 2px 6px -2px #ccc;   
}

.DivBlocking2x {
    position: relative;
    background-color: blue; 
    max-width: 480px;
    width: 94%; /* Adjusted to match DivBlocking1 and ensure it shrinks properly */
    margin: 0 auto; /* Center horizontally within the parent */
    min-height: 200px; /* Prevent collapsing */
    margin-top: 10px; /* Adds spacing between multiple DivBlocking2 elements */
}

/*Above is the standard template css section*/




















.subjectCaption {
    position: relative;
    /*background-color: #ffffff;*/
    width: 100%;
    /*margin-left: 5px;*/
}

.captionText {
    position: relative;
    /* display:flex; */
    margin: auto;
    /* margin-top: -25px; */
    color: #000000;
    font-size: 24px;
    font-weight: bold;
    text-align: left;
    /* justify-content: left; */
    /* height: 30px; */
    /* background-color: red; */
    width: 100%;
}

    .captionText .grey{
                    font-size: 19px;
                    font-weight: 400;
                    color: #A09E9E ;
                }
                
.subTitle{
    display: flex;
    align-items: flex-end; /* Align items to the bottom */
    /*background-color: pink;*/
    min-height: 65px;
    font-family: 'Roboto', sans-serif;
    /*font-family:  Arial, sans-serif;*/
    color: #000000;
    font-size: 30px;
    font-weight: 600;
}                 
                
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
                
                
                
                
                
 .img-cell {
    position: relative;
    margin: auto;
    /*background-color: purple; */
}               
                
.boxA {
    position: relative;
    margin: auto;
    /*background-color: green;*/
    width: 100%;
    min-height: 205px;
}

.profilePicCell {
    position: relative;
    margin: auto;
    margin-top: 5px;
    text-align: left;
    width: 98%;
    min-height: 15px;
    font-family: arial, sans-serif;
    font-size: 13px;
    color: #000000;
    /*background-color: pink;*/
}
.profilePicCellImage {
            /*margin-top: 5px;*/
            border-radius: 50%;
            width: 100px;
        } 

                
.boxC {
    position: relative;
    margin: auto;
    margin-top: 5px;
    text-align: left;
    width: 98%;
    min-height: 15px;
    font-family: arial, sans-serif;
    font-size: 13px;
    color: #000000;
    /*background-color: pink;*/
}
               
                
.subjectBox {
    position: relative;
    /*margin-top: 1px;*/
    /*background-color: tan;*/
    width: 95%;
    min-height: 100px;
}               
                
 .TopMargin20 {
    margin-top: 20px;
}

.TopMargin10 {
    margin-top: 10px;
}

.TopMargin5 {
    margin-top: 5px;
}                
                
                
.paragraphA{
            /*display: flex;*/
            /*background-color: green;*/
            margin-top: 10px;
            width: 100%;
            align-items: center;
            color: #000000;
            font-size: 18px;
            font-weight: 400;
        }
.paragraphA .paragraphB{
            color: #000000;
            font-size: 15px;
            font-weight: 400;
        }
                        
.img-cell {
    position: relative;
    margin: auto;
    /*background-color: purple; */
}


        .img-cell-heading-1 {
            line-height: 1.1;
            position: absolute;
            padding: 5px;
            bottom: 10px;
            left: 16px;
            color: #ffffff;
            font-size: 18px;
            font-weight: 400;
            text-align: left;
            background-color: black; 
            /*width: 100%;*/
            /*height: 100%;*/
        }
        .img-cell-heading-1 .text5{
            color: #ffffff;
            font-size: 15px;
            font-weight: 400;
        }



.img-cell-heading-3 {
    position: absolute;
    top: 8px;
    padding: 5px;
    left: 16px;
    color: goldenrod;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    background-color: #000000; 
    /*width: 100%;*/
    /*height: 100%;*/
}

.img-cell-heading-3 .text5{
    color: #ffffff;
    font-size: 15px;
    font-weight: 400;
}