html,body {
	font-family: roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	height: 100%;
}

td {
	font-family: roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 15px;
	left: auto;
	letter-spacing: normal;
	word-spacing: normal;
	white-space: normal;
}

th {
	font-family: roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 15px;
   
	left: auto;
}


th.footer {
        font-family: roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 15px;
      
        left: auto;
}
thead th {
        background-color: #a8a6a1;
        border: none;
        background-size: cover;
}

tfoot th {
        background-color: #ffffff;
        border: none;
        background-size: cover;
}

.cell22  {
        background-color: #f9eac3;
        border: none;
}


form {
	font-family: roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-style: normal;
	left: auto;
	}

input[type=text] {
        font-family: roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: darkgrey;
  	border: none;
 	padding: 12px 20px;
  	margin: 2px 0;
        border-radius: 8px;
        border-bottom: 2px solid lightgrey;
  }


input {
	font-family: roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

input,label{
       vertical-align: top;
}

textarea {
	font-family: roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

select {
	font-family: roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

ul {
	font-family: roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	list-style-type: disc;
	list-style-position: outside;
}

li {
	font-family: roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

ol {
	font-family: roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	list-style-type: upper-roman;
	list-style-position: outside;
}

.main_heading {
	font-family: Roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 56px;
	font-weight: bold;
	color: #333333;
	font-style: normal;
          }

.heading1 {
	font-family: Roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #333333;
	font-weight: bold;
          }

.heading2 {
            font-family: Roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
            font-size: 24px;
            font-weight: normal;
            color: #333333;
          }
.small {
	font-family: roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 9px;
}

.big {
	font-family: roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 18px;
}

.bodystyle {
	font-family: roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.box1 {
	padding: 3px;
	border-width: thin;
	border-style: solid;
	border-color: #CCCCCC #666666 #666666 #CCCCCC;
}

.box2 {
	border-width: 3px;
	border-style: solid;
	padding: 5px;
}
.dropbtn {
  font-family: roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
  background-color: #ebfbe2;
  color: black;
  padding: 16px;
  font-size: 16px;
  border: none;
  valign="middle"
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  font-family: roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  font-size: 10px;
}

.dropdown-content a {
  font-family: roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #ffffff;}

.box_shadow {
	box-shadow:
  	1.7px 1.9px 2.2px rgba(0, 0, 0, 0.02),
  	4.1px 4.6px 5.3px rgba(0, 0, 0, 0.028),
  	7.6px 8.6px 10px rgba(0, 0, 0, 0.035),
  	13.6px 15.4px 17.9px rgba(0, 0, 0, 0.042),
  	25.5px 28.8px 33.4px rgba(0, 0, 0, 0.05),
  	61px 69px 80px rgba(0, 0, 0, 0.07);
        border-radius: 15px;
	width: 305px;
	text-align: center;
	margin: auto;
	padding: 10px;
	top: 50%;
	left: 50%;
        background-color: #a8a6a1;     
			  }
.box_shadow_main {
        box-shadow:
        1.7px 1.9px 2.2px rgba(0, 0, 0, 0.02),
        4.1px 4.6px 5.3px rgba(0, 0, 0, 0.028),
        7.6px 8.6px 10px rgba(0, 0, 0, 0.035),
        13.6px 15.4px 17.9px rgba(0, 0, 0, 0.042),
        25.5px 28.8px 33.4px rgba(0, 0, 0, 0.05),
        61px 69px 80px rgba(0, 0, 0, 0.07);
        border-radius: 15px;
        border-left: 2px #D3D3D3;
        width: 305px;
        text-align: center;
        margin: auto;
        padding: 10px;
        top: 50%;
        left: 50%;
                          }



.box_shadow_small {
        box-shadow:
        1.7px 1.9px 2.2px rgba(0, 0, 0, 0.02),
        4.1px 4.6px 5.3px rgba(0, 0, 0, 0.028),
        7.6px 8.6px 10px rgba(0, 0, 0, 0.035),
        13.6px 15.4px 17.9px rgba(0, 0, 0, 0.042),
        25.5px 28.8px 33.4px rgba(0, 0, 0, 0.05),
        61px 69px 80px rgba(0, 0, 0, 0.07);
        border-radius: 15px;
        border-left: 2px #D3D3D3;
        width: 255px;
        text-align: center;
        margin: auto;
        padding: 10px;
        top: 50%;
        left: 50%;
                          }







.box_shadow_wide {
        box-shadow:
        1.7px 1.9px 2.2px rgba(0, 0, 0, 0.02),
        4.1px 4.6px 5.3px rgba(0, 0, 0, 0.028),
        7.6px 8.6px 10px rgba(0, 0, 0, 0.035),
        13.6px 15.4px 17.9px rgba(0, 0, 0, 0.042),
        25.5px 28.8px 33.4px rgba(0, 0, 0, 0.05),
        61px 69px 80px rgba(0, 0, 0, 0.07);
        border-radius: 15px;
        width: 600px;
        text-align: center;
        margin: auto;
        padding: 10px;
        top: 50%;
        left: 50%;
        background-color: #a8a6a1;
                          }






.cell2 {float: left; 
        margin: 0; 
	padding: 0;
    	background-color: #FF9182;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: normal;
    	padding-top: 20px;
    	padding-bottom: 20px;
    	padding-left: 20px;
	height: 120px
   }
.threecolm {width: 70px;}	

input[type=text] {
  color: black;
  border: none;
  padding: 10px 10px;
  margin: 5px 0;
}

input[type=password]
{
  color: black;
  border: none;
  padding: 10px 10px;
  margin: 5px 0;
  border-radius: 8px;

}


input[type=submit] {
  border-radius: 8px;
  border:0 none;
  font-size: 12px; 
  color: black;
  padding: 10px 24px;
  border: 2px solid #e7e7e7;
}

input[type=submit]:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.20), 0 17px 50px 0 rgba(0,0,0,0.15);
  border-radius: 8px;
  border:0 none;
  font-size: 12px;
  color: black;
  padding: 10px 24px;
  border: 2px solid #e7e7e7;
}
.red {color: #FF0000}
.tenpx{
     font-family: roboto, Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-style: italic;
      }
.12px {font-size: 12px}
.fifteenpx {font-size: 15px}
table {
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
}
form.example input[type=text] {
  padding: 10px;
  margin: 5px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 70%;
  background: #f1f1f1;
}

2form.example button {
  float: left;
  margin 2px
  width: 10%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}

form.example button {
  margin: 2;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}



form.example button:hover {
  background: #0b7dda;
}

form.example::after {
  content: "";
  clear: both;
  display: table;
}
.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.templatingSelect2 {
  -webkit-appearance: none;
  appearance: none;
        width: 260px;
        border-radius: 5px;
        text-align: center;
        margin: auto;
        padding: 5px;
        margin: 0;
        border: 1px solid darkgrey;
        background-color: #fff;
        background: #fff url("http://192.168.0.180/reports/images/dropdown_select2_7x5.png") no-repeat 97% 50%;
        font-family: Georgia;
        color: #36454F;
        font-size: 15px;
        font-weight: bold;
}


.templatingSelect2 select {
        color: #36454F;
        font-size: 15px;
        font-family:Georgia;
        font-weight: bold;
}

.templatingSelect2 option:checked {
    background: #ffff;
}


.templatingSelect2 option:not(:checked) {
    background: #ffff;
}



.button {
    text-decoration: none;
    color: initial;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

.float-left {
    float:left;
    width:20%; // or 33% for equal width independent of parent width
}

.float-middle {
    float:center;
    width:60%; // or 33% for equal width independent of parent width
}

.float-right {
    float:right;
    width:20%; // or 33% for equal width independent of parent width
}


.edit-icon2 {
        width: 24px;
        height: 24px;
        background-image: url('../images/edit_35.png'); /* Replace 'edit_icon.png' with your icon image */
        background-size: cover;
    }

        .button-container {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }


        .button-container-2 {
            display: flex;
            margin-top: 20px;
            margin-left: 10px;
        }



        .submit-button {
            background-color: transparent;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: filter 0.3s ease;
        }
        .submit-button img {
            width: auto; /* Adjust the width as needed */
            height: 35px;
            margin-right: 10px;
            transition: filter 0.3s ease;
        }
        .submit-button span {
            transition: color 0.3s ease;
        }
        .submit-button:hover img,
        .submit-button:hover span {
            filter: grayscale(100%);
            color: gray;
        }


.content {
    display: none;
    text-align: center;
}

 .edit_footer_text {
            flex: 1;
            text-align: center;
            margin: 0;
        }

       .spinner {
            display: none;
            position: fixed;
            z-index: 1000;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: conic-gradient(
                from 0deg,
                lightgrey 0%,
                lightgrey 25%,
                red 25%,
                red 50%,
                lightgrey 50%,
                lightgrey 75%,
                red 75%,
                red 100%
            );
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

        .spinner::before, .spinner::after {
            content: '';
            position: absolute;
            border-radius: 50%;
        }

        .spinner::before {
            inset: 5px;
            background: lightgrey;
        }

        .spinner::after {
            inset: 8px;
            background: rgba(255, 255, 255, 0.4); /* 20% opaque center */
        }

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

    input[type="image"]:hover {
        opacity: 0.8; /* Slightly reduce opacity */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* Add a shadow */
        transform: scale(1.05); /* Slightly enlarge the image */

    }
.custom-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.custom-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

.custom-menu-item .custom-menu-icon {
    width: 50px;
    height: auto;
    margin: 0 3px; /* Reduced outer margin */
}

.custom-menu-item .custom-menu-title {
    font-size: 1.2em;
    font-weight: normal; /* Removed bold formatting */
    margin: 0 10px; /* Added 10px space between elements */
}

.custom-menu-item .custom-menu-checkbox {
    transform: scale(1.2);
    margin: 0 3px; /* Reduced outer margin */
}

.custom-menu-divider {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.custom-menu-divider .custom-divider-icon {
    width: 60%;
    margin: 0 50px; /* Centered with 50px margins on both sides */
}

.custom-enable-label {
    font-size: 0.75em; /* Made "Enable" text smaller */
    margin-right: 5px;
}