@charset "utf-8";
/* CSS Document */


#cs_fullpage {
      width: 100%;
	  max-width: 900px;
	  margin:0 auto;
	  float:center;
      height: auto;
      box-sizing:border-box;
	  padding:1px 10px 10px 10px;
	 
		
    }

#cs_parent {
      width: 100%;
	  margin:0 auto;
	  float:center;
      height: auto;
      box-sizing:border-box;
	  background: white;
	border-radius:10px;
	border:1px solid grey;
	margin-bottom:20px;
	padding:0px 0px 10px 0px;
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2), 0px -2px 5px rgba(255, 255, 255, 0.5);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    background-color: white;
    background-image: none;
    
    }

.profile-container {
      position: relative;
      width: 100%;
      margin: auto;
	box-sizing:border-box;
	background-color:white;
	 border-radius:10px 10px 0px 0px;
	
	  
    }


@media(max-width:600px){
#cs_banner {
  width: 100%;
  height: 170px;
  overflow: hidden;
 border-radius:10px 10px 0px 0px;

}
}

@media(min-width:600px){
#cs_banner {
  width: 100%;
  height: 200px;
  overflow: hidden;
 border-radius:10px 10px 0px 0px;

}
}


#cs_banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
   
  
}

.edit-link {
    position: absolute;
    top: 1px;
    right: 1px;
    background-color: white; /* semi-transparent black */
    color: white;
    padding: 4px 4px;
    font-size: 14px;
    border-radius: 50%;
    text-decoration: none;
    transition: background 0.3s;
    z-index: 2;
	width: 35px;
	height: 35px;
	box-sizing:border-box;
	border:1px solid grey;
}

.edit-link:hover {
    background-color: red; /* semi-transparent black */
}

/* Edit link for profile pic (top-right of circle) */
.edit-profile-link {
    top: 50px;
    right: 0px;
	width: 32px;
	height: 32px;
   
}


/* Banner edit link position */
#cs_banner .edit-link {
    top: 5px;
    right: 5px;
}


#cs_profile {
  position: absolute;
  bottom: -50px;
  left: 20px;
  width: 150px;
  height: 150px;
  border: 4px solid white;
  border-radius: 50%;
  overflow: hidden;
  background: white;
  border:1px solid #bfbfbf;
  
}

#cs_profile img {
  width: calc(100% -2px);
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}



/* Optional: Add spacing below to avoid overlap with next content */
.spacer {
  height: 50px;
  background-color:white;
  clear:both;
}


#cs_name {
  width:100%;
  height:auto;
  min-height:30px; 
  background-color:white;
  padding:0px 5px 5px 15px;
  display: flex; 
  align-items:center;
   box-sizing:border-box;
   margin-bottom:1px;
   margin-top:0px;
   border:0px solid black;
   box-sizing:border-box;
  
}

#cs_name h1 {
  color:black;
  font-size:24px;
  font-family:arial;
  line-height:26px;
  font-weight:500;
}

#cs_name h2 {
  color:black;
  font-size:23px;
  font-family:arial;
  line-height:38px;
  font-weight:500;
}

#cs_headline {
   width:100%;
   height: auto;
  min-height: 25px;
  background-color:white;
  padding:0px 5px 0px 15px;
  box-sizing:border-box;
  border:0px solid black;
}


#cs_headline h2 {
  color:#272727;
  font-size:17px;
  font-family:arial;
  line-height:24px;
  margin:0;
  
}


#cs_state {
  width:100%;
  height: auto;
  min-height: 23px;
  background-color:white;
  padding:0px 5px 0px 15px;
  box-sizing:border-box;
  border-radius:10px;
  color:#272727;
  font-size:15px;
  font-family:arial;
  line-height:24px;
  box-sizing:border-box;
  border:0px solid black;
}

#cs_description {
  width:100%;
  height:auto;
  background-color:white;
  padding:10px 10px 10px 15px;
  box-sizing:border-box;
  border-radius:10px;
  color:#272727;
  font-size:16px;
  font-family:arial;
  line-height:24px;
}

#cs_description h1 {
  color:black;
  font-size:16px;
  font-family:arial;
  line-height:25px;
  font-weight:500;
}


#cs_description h2 {
  color:black;
  font-size:23px;
  font-family:arial;
  line-height:38px;
  font-weight:500;
}




    #popupModal {
      display: none;
      position: fixed;
      top: 10%;
      left: calc(50% - 250px);
      width: 500px;
      height: 400px;
      background: white;
      border: 1px solid #ccc;
      box-shadow: 0 0 10px #000;
      z-index: 1000;
      padding: 20px;
      overflow: auto;
	  border-radius:10px;
    }
    #popupOverlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 999;
    }
	
	
.image-container {
      display: inline-block;
      position: relative;
    }

.image-container img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%; /* optional: makes image circular */
}

.image-container::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 5px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2); /* semi-transparent black */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* allows hover to pass through to image */
}

.image-container:hover::after {
  opacity: 1;
}



#cnsbeta table {
    border-collapse: collapse;
	box-sizing: border-box;
	
}


#cnsbeta td {
    border-top: 0px solid #ddd;
	border-bottom: 0px solid #ddd;
    border-radius:0px;
	padding:5px 3px 5px 3px;
    font-size: 16px;
    color: grey;
	box-sizing: border-box;
	padding-left:5px;
	font-family:arial;
	font-weight:normal;
}

#cnsbeta th {
    border: 1px solid #ddd !important;
    border-radius:5px;
	padding:3px 3px 3px 3px;
    font-size: 17px;
    font-family:times new roman,times,serif;
    color: black;
	box-sizing: border-box;
	background-color:#E4E4E4;

}

#cnsbeta .col1 {
width: 100px;
max-width: 100px;
}

#cnsbeta .col2 {
width: auto;
}

#cnsbeta a:hover {
    color: blue;
    cursor: pointer; /* Optional: changes cursor to pointer */
}

.cnsform1{ width: 100%; max-width:800px; height:auto; border:0px solid #e2e2e2; padding:10px; margin-top:20px; font-size:13px; font-weight:bold; box-sizing:border-box;}


@media(min-width:600px){
#cns_left {
  width:160px;
  height:150px;
  float:left;
  background-color:white;
  padding:5px 5px 0px 10px;
  box-sizing:border-box;
  border:0px solid black;
  margin-top:5px;
  border-radius:20px;
}

#cns_left img{
  width:100%;
  height:100%;
  
}


#cns_right {
  width:calc(100% - 162px);
  height:auto;
  float:right;
  background-color:white;
  padding:5px 5px 0px 0px !important;
  box-sizing:border-box;
  border:0px solid black;
   margin-top:5px;
   border-radius:20px;
}

}


@media(max-width:600px){
#cns_left {
  width:160px;
  height:150px;
  float:center;
  background-color:white;
  padding:5px 5px 0px 10px;
  box-sizing:border-box;
  border:0px solid black;
  margin:0 auto;
  clear:both;
}

#cns_left img{
  width:100%;
  height:100%;
  
}


#cns_right {
  width:calc(100% - 0px);
  height:auto;
  float:right;
  background-color:white;
  padding:5px 5px 0px 0px !important;
  box-sizing:border-box;
  border:0px solid black;
   margin-top:5px;
   border-radius:20px;
}

}

#cns_bottom {
  width:calc(100% - 1px);
  height:auto;
  float:left;
  background-color:white;
  padding:5px 5px 0px 0px !important;
  box-sizing:border-box;
  border:0px solid black;
   margin-top:5px;
}


.cnsstyled1, .cnsstyled1:hover, .cnsstyled1:focus{
   height: 30px;
   width: 100px;
   border: 1px solid grey;
   border-radius:6px;
   font-size: 15px;
   color:black;
   padding-left:3px;
   background-color:white;
  font-family:arial sans-serif;
}


 .cnsstyled1 option{
   height: 40px !important;
   width: 170px;
   border-top: 0px solid grey;
   border-right: 0px solid grey;
	border-left: 0px solid grey;
   border-bottom: 0px solid grey;
   border-radius:0px;
   font-size: 15px;
   color:#A70000;
   padding:10px 5px 10px 0;
   background-color:white;
  font-family:arial sans-serif;
}


.cns_styled1 {
   height: 35px;
   width: 95%;
   max-width: 220px;
   border: 1px solid grey;
   font-size: 15px;
   color:black;
  

}


.cns_styled1 option{
   color:black;
 
}

#cs_workexp {
  width:100%;
  height:auto;
  min-height:30px; 
  background-color:white;
  padding:0px 0px 0px 0px;
  display: flex; 
  align-items:center;
   box-sizing:border-box;
   margin-bottom:1px;
   margin-top:0px;
   border:0px solid black;
   box-sizing:border-box;
  
}

#cs_workexp h1 {
  color:black;
  font-size:21px;
  font-family:arial;
  line-height:24px;
  font-weight:500;
}

#cs_workexp h2 {
  color:black;
  font-size:18px;
  font-family:arial;
  line-height:24px;
  font-weight:500;
}

.cns_button1 {
   height: 35px;
   width: calc(100% - 0px);
   max-width:150px;
   border:0px #0070ba solid;
   font-size: 16px;
   border-radius: 5px;
   margin-top:5px;
   background-color:red;
   color:white;
   
 

}


.cns_button1:hover{
    background-color:#911800;
    color:white;
    cursor: pointer;
	border:0px #015389 solid;
}

.cns_button2 {
   height: 35px;
   width: calc(100% - 0px);
   max-width:150px;
   border:0px #0070ba solid;
   font-size: 16px;
   border-radius: 5px;
   margin-top:5px;
   background-color:red;
   color:white;
   padding-top:7px;
   font-family:arial;
 box-sizing:border-box;

}


.cns_button2:hover{
    background-color:#911800;
    color:white;
    cursor: pointer;
	border:0px #015389 solid;
}


.circle {
      width: 12px;       /* size */
      height: 12px;      
      background-color: green; /* green color */
      border-radius: 50%; /* makes it round */
      display: inline-block;
    }