*
{
    box-sizing: border-box;}


.social-media-share {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

    .social-media-share:hover {
        filter: grayscale(0%);
    }


html, body, form 
{
    width:100%;
    margin: 0;
    height:auto;
    text-align: center;
    font-family:Segoe UI;
    margin-left:auto;
    margin-right:auto;
    background-color:#f6f6f6;
   
}


.article-body {
    max-width: 750px;
    margin: 0 auto;
    padding: 20px;
    line-height: 1.6;
    font-size: 16px;
}


.insights-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    padding: 10px;
}

.article-preview {
    flex: 0 1 calc(33.333% - 20px);
    box-sizing: border-box;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    transition: transform 0.2s ease;
}

    .article-preview:hover {
        transform: scale(1.02);
    }

    .article-preview img {
        width: 100%;
        height: auto;
        display: block;
    }

.article-title {
    font-size: 1.1rem;
    margin-top: 10px;
    text-align: center;
}

.article-date {
    color: #888;
    font-size: 14px;
    margin-bottom: 20px;
    display: inline-block;
}

.article-container {
    /*width: 100%;*/
    float:left;
    max-width: 800px;
    margin: 5%;
    padding: 20px;
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}





.article-content * {
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box;
}

.article-content {
    font-size: 17px;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

    .article-content img {
        max-width: 100% !important;
        height: auto !important;
    }

#wrapper {
    display: block;
    /*max-width: 450px;*/
    height: 350px;
    /*overflow-x:auto;*/
    overflow: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    padding-left: 5px;
    padding-right: 5px;
    border:0px solid yellow;
    
}

#wrapper::-webkit-scrollbar {
        width: 10px;

}

.tracking 
{

    width: 80%;
    margin-top:60px;
    margin-left:auto;
    margin-right:auto;
    padding: 15px;
    height: auto;
    border: 0px solid black;
    overflow-x: auto;
}



.tracking_btn 
{
    width: 380px;
    /*border-top:0px solid black;
    border-left:0px solid black;
    border-right:0px solid black;*/
    border: 1px solid #7fbb42;
    height: 40px;
    font-size: 18px;
    text-align: center;
    padding: 10px;
    background-color: #f6f6f6;
    border-radius: 20px;
    margin-bottom: 20px;
    margin-top: 10px;
    margin-right: 5px;
}




.post {
    display: inline-block;
    width: 420px;
    height: 300px;
    border: 0px solid red;
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 20px;
    text-align: left;
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    font-size:16px;
}

.btn_more_list {
    width: 240px;
    height: auto;
    padding: 15px;
    border-radius: 18px;
    color: black;
    background-color: transparent;
    border:1px solid black;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 20px;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-border-radius: 10px;
    font-size: 14px;
    font-weight:bold;
}

.btn_more_list:hover {
    background-color: black;
    color: White;
    }

.quote_btn {
    margin-top: 30px;
    font-size: 12px;
    border: 1px solid #7fbb42;
    background-color: #7fbb42;
    padding: 5px 15px 5px 15px;
    width: auto;
    height: auto;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    color:white;
    float:left;
    cursor:pointer;
}


.square_btn_1 {
    width: 130px;
    height: 130px;
    background-color: #7fbb42;
    color: white;
    border: 1px solid white;
    font-size: 20px;
    white-space: normal;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    margin-right: 15px;
    margin-bottom: 30px;
    margin-top: 15VH;
    margin-bottom:15VH;
    cursor: pointer;
}

.square_btn_2 {
    width: 130px;
    height: 130px;
    background-color: white;
    color: #7fbb42;
    border: 1px solid #7fbb42;
    font-size: 20px;
    white-space: normal;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    margin-bottom: 30px;
    cursor: pointer;
    margin-top: 15VH;
    margin-bottom:15VH
}



.load_analysis_header {
    width: 100%;
    max-width: 400px;
    border-bottom: 1px solid white;
    background-color: #9bbc79;
    height: auto;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    text-align: left;
    color: white;
}

.load_analysis_child {
    width: 100%;
    max-width: 400px;
    border: 1px solid #9bbc79;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding:10px 5px 10px 5px;
    color: black;
    text-align: left;
   
    
}



.load_sub_left
{
  
    text-decoration: none;
    font-size:large;
    font-weight:bold;
    color:white;

}

.load_analysis_sub_child_L {
    width: 28%;
    border: 0px solid red;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    color: black;
    text-align: left;
    font-size: small;
    
    display: inline-block;
}

.load_analysis_sub_child_R {
    width: 72%;
    border: 0px solid blue;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    color: black;
    text-align: left;
    font-size: small;
    
    display:inline-block;
 
}

.load_txtbox {
    width: 30px;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom: 1px solid #9bbc79;
    background-color:transparent;
    text-align:center;
    
   
}

.load_txtbox_long {
    width: 50px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #9bbc79;
    background-color: transparent;
    text-align: center;
}

.download_btn
{
    width:60%;
    height:auto;
    font-family:Calibri;
    font-size:14px;
    margin-bottom:30px;
    border-top:1px solid #7fbb42;
    border-bottom:1px solid #7fbb42;
    border-left:1px solid #7fbb42;
    border-right:1px solid #7fbb42;
    -webkit-appearance: none;
}
    
.download_btn::-webkit-file-upload-button {
    -webkit-appearance: none;
    background-color: #7fbb42;
    border: 1px solid #7fbb42;
    font-size: 14px; padding: 15px;
    font-family:Calibri;
}    

.wrapper 
{
   
    /*display: block;
    min-width:100%;*/
    height: 320px;
    /*overflow-x: auto;
    overflow-y: hidden;*/
    white-space: nowrap;
    padding-left:5px;
    padding-right:5px;
    border:1px solid green;
    
}
    
    
#wrapper::-webkit-scrollbar
{
    width:0;
}
    


.repeater_col_string_config
{
    display:inline-block;
    width:200px;
    height:100px;
    border:1px solid red;
    text-align:center;
  
    
}



.container
{
    width:100%;
    height:auto;
    float:left;
    border:0px solid red;
       
}

.container_about
{
    width:100%;
    height:auto;
    float:left;
    background:transparent;
    padding-top:10px;
    padding-bottom:30px;
    border:0px solid red;
    font-size:18px;
       
}

.container_white
{
    width:100%;
    height:auto;
    float:left;
    background:white;
    padding-top:10px;
    padding-bottom:30px;
    border:0px solid red;
    font-size:22px;
       
}

.container_gray {
    width: 100%;
    height: auto;
    /*float: left;*/
    background-color: #f6f6f6;
    padding-top: 10px;
    padding-bottom: 30px;
    border: 0px solid red;
    font-size: 18px;
}

.container_blogger {
    width: 90%;
    margin-top: 45px;
    margin-left: 5%;
    margin-right: 5%;
    height: auto;
    float: left;
    border: 0px solid black;
    text-align: left;
    background-color:#f6f6f6;
    
}

.container_subscriber
{
    width:100%;
    margin-top:15px;
    height:150px;
    font-size:12px;
    float:left;
    border:0px solid black;
    text-align:center;
   
       
}

.blogger_box
{
    width:33.33%;
    height:auto;
    float:left;
    border:0px solid blue;
    font-size:12px;
    padding-right:10px;
    margin-bottom:20px;
    

}


.directory_div
{
    width:40%;
    height:auto;
    margin-left:30%;
    border: 0px solid red;
}

.directory_box
{
    width:50%;
    height:auto;
    border: 0px solid black;
    float:left;
    text-align:center;
    color:#7fbb42;
    
}



.icon_img
{
    width:50%;
    height:auto;
    margin-right:0px;
    
}


.config_alert_label
{
    text-align:center;
    color:Red;
}

.blogger_img
{
    width:100%;
    height:auto;
    margin-bottom:10px;
}


.analysis_report_div
{
    width:100%;
    padding:15px;
    height:auto;
    float:left;
    border:0px solid black;
    overflow-x:auto; 
       
}

.analysis_report_content_div
{
    width:100%;
    min-width:900px;
    padding:15px;
    height:auto;
    float:left;
    border:0px solid black;
    text-align:left;
      
}

.string_configuration_div
{
    width:100%;
    padding:15px;
    height:auto;
    float:left;
    border:0px solid black;
    text-align:center;
      
}

.string_config_box
{
    width:250px;
    height:auto;
    padding:5px;
    border:0px solid red;
    display:inline-block;
    text-align:left;
}



.image_btn_design
{
    width:70px;
    height:auto;
    margin-top:15px;
    margin-right:10px;
    margin-bottom:50px;
}

.image_btn_design_last
{
    width:70px;
    height:auto;
    margin-top:15px;
    margin-bottom:50px;
}

.bgdiv
{
    width:100%;
    height:auto;
    position:relative;    
}

.bghead_text
{
    width:60%;
    height:auto;
    position:absolute;
    top:150px;
    left:30px;
    color:White;
    font-size:20px;
    text-align:justify;
    border:0px solid red;
}


.solar_exprt
{
    width:100%;
    height:60px;
    padding:15px;
    position:absolute;
    text-align:center;
    top:0px;
    left:0px;
    color:white;
    background-color:transparent;
    font-size:20px;
    border:0px solid red;
}

.solar_expert_transparent

{
    padding:15px;
    background-color:Black;
    Opacity: 0.4;
    text-align:center;
    width:100%;
    height:60px;
    position:absolute;
    top:0px;
    left:0px;
    color:white;
    font-size:20px;
    border:0px solid red;
}



.bghead_text2
{
    width:70%;
    height:auto;
    position:absolute;
    top:200px;
    left:0px;
    color:#FFF600;
    font-size:20px;
    text-align:justify;
    border:0px solid red;
}

.btnholder
{
    width:50%;
    height:auto;
    position:absolute;
    bottom:180px;
    left:30px;
}

.bgimage
{
    width:100%;
    height:auto;
}

.container_footer
{
    width:100%;
    height:auto;
    float:left;
    border:0px solid black;
    /*margin-bottom:300px;*/
     margin-top:30px;   
}

.normal_row_tab
{
    width:90%;
    margin-left:5%;
    margin-right:5%;
    border:1px solid black;
    margin-top:30px;
    padding:15px 0 30px 0;
    font-size:20PX;
    float:left;
    border-bottom:4px solid black;
    border-top:none;
    border-left:none;
    border-right:none;
    
}

.normal_row
{
    width:90%;
    margin-left:5%;
    margin-right:5%;
    border:0px solid black;
    margin-top:10px;
    padding:15px 0 30px 0;
    font-size:20px;
    float:left;
  
    
}


.normal_row_expert
{
    width:90%;
    margin-left:5%;
    margin-right:5%;
    border:0px solid black;
    margin-top:10px;
    padding:15px 0 30px 0;
    font-size:20px;
    float:left;
    font-size:24px;
   
  
    
}


.start_button
{
    width:65px;
    height:20px;
    font-size:12px;
    padding:3px 8px 3px 8px;
    cursor:pointer;
    background-color:green;
    border-radius:10px;
    color:White;
    margin-bottom:5px;
    margin-top:5px;
    -webkit-border-radius:10px;
     -webkit-appearance: none;
    
}


.ddl_nurse_task
{
    
    width:100%;
    height:40px;
    padding:5px 15px 5px 15px;
    background-color:#edd9da;
    text-align:center;
    border-radius:20px 20px 20px 20px;
    cursor:pointer;
    font-size:20px;
   
    
}

 
.row_head
{
    width:100%;
    height:75px;
    background-color:#7fbb42;
    float:left;
    text-align:center;
    color:White;
    position:relative;
    
    
}

.row_head_holder
{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    height:75px;
    position:fixed;
    
}

.empty_div
{
    width:100%;
    height:75px;
}

.empty_div_menu
{
    width:100%;
    height:40px;
}



.row_head_text
{
    width:100%;
    position:absolute;
    right:0px;
    top:0px;
    text-align:right;
    padding:8px;
    font-size:14px;
   
    
}

.row_head_text a:link {
  text-decoration: none;
  color:White;
}

.logo_image
{
    width:auto;
    height:70px;
    float:left;
    margin:5px;
}

.menu_bar_img
{
    width:50px;
    height:auto;
    float:right;
    position:absolute;
    top:15%;
    right:0;
    cursor:pointer;
}


.login_bar_img
{
    width:65px;
    height:auto;
    float:right;
    position:absolute;
    top:15%;
    /*right:40px;*/
    right:0;
    cursor:pointer;
}


.dashboard_text
{
    width:100%;
    height:auto;
    position:absolute;
    top:35%;
    left:0;
}

.klinik_logo
{
    width:100%;
    height:auto;
}

.que_appointment_box
{
    width:50%;
    height:auto;
    border:0px solid black;
    float:left;
    padding:0px;
    margin-bottom:20px;
}

.que_btn
{
    width:95%;
    height:auto;
    background-color:#30043f;
    color:White;
    padding-top:15px;
    padding-bottom:15px;
    float:left;
    border-radius:8px;
    -webkit-border-radius:8px;
    cursor:pointer;
    -webkit-appearance: none;
}

.que_btn_not_allow
{
    width:95%;
    height:auto;
    background-color:#30043f;
    color:White;
    padding-top:15px;
    padding-bottom:15px;
    float:left;
    border-radius:8px;
    -webkit-border-radius:8px;
    cursor:not-allowed;
    -webkit-appearance: none;
}

    
.appointment_btn
{
    width:95%;
    height:auto;
    background-color:#30043f;
    color:White;
    padding-top:15px;
    padding-bottom:15px;
    float:right;
    border-radius:8px;
    -webkit-border-radius:8px;
    cursor:pointer;
    -webkit-appearance: none;
}    



.adsense_box
{
    width:100%;
    height:100px;
    border:1px solid black;
    margin-bottom:20px;
}

.status_header
{
    width:90%;
    margin-left:5%;
    margin-right:5%;
    border:0px solid black;
    padding:5px;
    font-size:20PX;
    float:left;
    background-color:#c375d2;
    color:White;
}

.status_body
{
    width:90%;
    height:auto;
    margin-left:5%;
    margin-right:5%;
    border:0px solid black;
    padding:5px;
    float:left;
    background-color:#edd9da;
    color:black;
    margin-bottom:20px;
}

.gridview_style
{
    width:100%;
    float:left;
    height:auto;
    border-style:none;
    margin-right: 0px;
}

.grid_view_div
{
    width:100%;
    height:auto;
    overflow-x:auto;
    border:0px solid black;
    
    float:left;
    background-color:#edd9da;
    color:black;
    margin-bottom:20px;

}


.footer_box
{
    width:100%;
    height:200px;
    background-image: linear-gradient(#f6f6f6, #8dc641, #478c40,   #125b2f);
    position:relative;
    float:left;
    border:0px solid black;
    
}


.other_header
{
    width:100%;
    height:auto;
    padding:30px 0px 30px 0px;
    font-size:30px;
    margin-top:10px;
    color:#30043f;
    
}

.fill_up_header
{
    width:100%;
    height:auto;
    font-size:25px;
    text-align:center;
    margin-top:20px;
    margin-bottom:10px;
    
}

.fill_up_form
{
    width:100%;
    height:auto;
    font-size:25px;
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:10px;
    
}

.txtbox
{
    width:300px;
    /*border-top:0px solid black;
    border-left:0px solid black;
    border-right:0px solid black;*/
    border:1px solid #7fbb42;
    height:40px;
    font-size:18px;
    text-align:center;
    padding:10px;
    background-color:#f6f6f6;
    border-radius:20px;
    margin-bottom:20px;
    margin-top:10px;
    margin-right:5px;
}

.question_box {
    width: 300px;
    /*border-top:0px solid black;
    border-left:0px solid black;
    border-right:0px solid black;*/
    border: 1px solid #7fbb42;
    height: 400px;
    font-size: 13px;
    text-align: justify;
    padding: 10px;
    background-color: #f6f6f6;
    border-radius: 5px;
    margin-bottom: 20px;
    margin-top: -30px;
    margin-right: 5px;
}


input::-webkit-input-placeholder { /* WebKit browsers */
        color:lightgray;
    }
    
    
    

.select_doc_btn
{
    width:95%;
    height:auto;
    background-color:#f6f6f6;
    color:black;
    padding-top:15px;
    padding-bottom:15px;
    float:right;
    border:1px solid #30043f;
    border-radius:8px;
    cursor:pointer;
    margin-top:20px;
    -webkit-appearance: none;
    -webkit-border-radius:8px;
    
}    


.select_doc_btn_click
{
    width:95%;
    height:auto;
    background-color:#30043f;
    color:white;
    padding-top:15px;
    padding-bottom:15px;
    float:right;
    border:1px solid #30043f;
    border-radius:8px;
    cursor:pointer;
    margin-top:20px;
    -webkit-appearance: none;
    -webkit-border-radius:8px;
}    

.select_doc_btn_not_allowed
{
    width:95%;
    height:auto;
    background-color:gray;
    color:black;
    padding-top:15px;
    padding-bottom:15px;
    float:right;
    border:1px solid #30043f;
    border-radius:8px;
    cursor:not-allowed;
    margin-top:20px;
    -webkit-appearance: none;
    -webkit-border-radius:8px;
}    

.submit_btn
{
    width:50%;
    height:auto;
    background-color:#30043f;
    color:White;
    padding-top:15px;
    padding-bottom:15px;
    border-radius:8px;
    cursor:pointer;
    padding:15px 25px 15px 25px;
    margin-top:20px;
    -webkit-appearance: none;
    -webkit-border-radius:8px;
}

.submit_btn_not_allow
{
    width:50%;
    height:auto;
    background-color:#30043f;
    color:White;
    padding-top:15px;
    padding-bottom:15px;
    border-radius:8px;
    cursor:not-allowed;
    padding:15px 25px 15px 25px;
    margin-top:20px;
    -webkit-appearance: none;
    -webkit-border-radius:8px;
}

.submit_row
{
    width:90%;
    margin-left:5%;
    margin-right:5%;
    border:0px solid black;
    padding:5px;
    font-size:20PX;
    float:left;
    text-align:center;
    
}

.close_div
{
    width:90%;
    margin-left:5%;
    margin-right:5%;
    border:0px solid black;
    padding:5px;
    font-size:60px;
    font-family:Calibri;
    font-weight:lighter;
    float:left;
    text-align:center;
    margin-top:30px;
    font-weight:lighter;
    
}

.close_div a:link {
  text-decoration: none;
  color:gray;
  
}



.pop_out_box {
   /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


.pop_out_alert

{
  background-color: white;
  margin-top:20%;
  margin-left:30%;
  margin-right:30%; /* 15% from the top and centered */
  margin-bottom:200px;
  padding: 30px;
  border: 0px solid #888;
  width: 40%; /* Could be more or less, depending on screen size */
  height:auto;
  overflow:auto;
  min-height:100px;
  font-family:Calibri;
  font-size:25px;
  
}



.pop_out_content {
  background-color: white;
  margin-top:20%;
  margin-left:10%;
  margin-right:10%; /* 15% from the top and centered */
  margin-bottom:200px;
  padding: 0px;
  border: 0px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  height:auto;
  overflow:auto;
  min-height:100px;
  font-family:Calibri;
  font-size:25px;
  
}


.pop_out_content_panel_spec {
  background-color: white;
  margin-top:10%;
  margin-left:10%;
  margin-right:10%; /* 15% from the top and centered */
  margin-bottom:200px;
  padding: 10px;
  border: 0px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  height:auto;
  overflow:auto;
  min-height:100px;
  font-family:Calibri;
  font-size:18px;
  text-align:left;
  
}


.spec_main_box_div
{
    width:100%;
    margin-top:10px;
    border:0px solid red;
    float:left;
    height:auto;
    
}

.spec_secondory_box
{
    width:50%;
    margin-bottom:20px;
    border:0px solid green;
    height:auto;
    float:left;
    
}

.btn_close_spec

{
    width:20%;
    height:auto;
    margin-left:40%;
    margin-right:40%;
    float:right;
    padding:10px;
    border-radius:5px;
    border:2px solid #7fbb42;
    margin-top:10px;
    margin-bottom:10px;
    background-color:#7fbb42;
    cursor:pointer;
    color:White;
    font-size:20px;
    -webkit-appearance: none;
    -webkit-border-radius:5px;
}


.btn_inverter_config

{
    width:300px;
    height:40px;
    padding:5px 15px 5px 15px;
    background-color:#f6f6f6;
    text-align:center;
    border-radius:20px;
    cursor:pointer;
    font-size:16px;
    margin-top:20px;
    margin-bottom:20px;
    border:1px solid #7fbb42;
}

.btn_inverter_config:hover
{
    background-color:#7fbb42;
    color:White;
    
}


.btn_view_inv_tab_active

{
    width:80px;
    height:30px;
    float:left;
    padding:5px 10px 5px 10px;
    background-color:#7fbb42;
    text-align:center;
    cursor:pointer;
    font-size:14px;
    margin-top:20px;
    margin-bottom:20px;
    margin-right:0px;
    color:White;
    border:0px solid #7fbb42;
}

.btn_view_inv_tab_inactive

{
    width:80px;
    height:30px;
    float:left;
    padding:5px 10px 5px 10px;
    background-color:white;
    text-align:center;
    cursor:pointer;
    font-size:14px;
    margin-top:20px;
    margin-bottom:20px;
    margin-right:0px;
    border:1px solid #7fbb42;
}

.x_overflow_div
{
    width:100%;
    height:auto;
    overflow-x:auto;
    text-align:center;
}



.bill_of_inv_table
{
    min-width:100%;
    width:500px;
    height:auto;
    margin-bottom:50px;
}




.btn_add_spec

{
    width:20%;
    height:auto;
    margin-left:40%;
    margin-right:40%;
    float:right;
    padding:10px;
    border-radius:5px;
    border:2px solid #7fbb42;
    margin-top:10px;
    margin-bottom:10px;
    background-color:white;
    cursor:pointer;
    color:#7fbb42;
    font-size:20px;
    -webkit-appearance: none;
    -webkit-border-radius:5px;
}

.btn_add_spec:hover
{
    background-color:#7fbb42;
    color:White;
}


.spec_txtbox
{
    width:250px;
    border-top:0px solid black;
    border-left:0px solid black;
    border-right:0px solid black;
    border-bottom:1px solid #7fbb42;
    height:30px;
    font-size:14px;
    text-align:left;
    padding:5px 5px 0px 5px;
    /*background-color:#f6f6f6;*/
    margin-bottom:5px;
    margin-top:5px;
    margin-right:5px;
}


.spec_txtbox_2
{
    width:80px;
    border-top:0px solid black;
    border-left:0px solid black;
    border-right:0px solid black;
    border-bottom:1px solid #7fbb42;
    height:30px;
    font-size:14px;
    text-align:left;
    padding:5px 5px 0px 5px;
    /*background-color:#f6f6f6;*/
    margin-bottom:5px;
    margin-top:5px;
    margin-right:5px;
}

.spec_txtbox_string_config
{
    width:40px;
    border-top:0px solid black;
    border-left:0px solid black;
    border-right:0px solid black;
    border-bottom:1px solid #7fbb42;
    height:30px;
    font-size:14px;
    text-align:left;
    padding:5px 5px 0px 5px;
    /*background-color:#f6f6f6;*/
    margin-bottom:5px;
    margin-top:5px;
    margin-right:5px;
}

.work_hr_notice
{
    width:100%;
    padding:20px;
    font-size:18px;
    text-align:center;
}

.btn_box_at_pop_content_L
{
    width:50%;
    height:50px;
    border: 1px solid lightgray;
    border-right:0px;
    float:left;
   
    
}

.btn_box_at_pop_content_r
{
    width:50%;
    height:50px;
    border: 1px solid lightgray;
    border-right:0px;
    float:left;
    font-size:12px;
   
}

.clear_btn
{
    width:auto;
    height:50px;
    text-align:center;
    padding:15px;
    background-color:transparent;
    overflow:auto;
    cursor:pointer;
    -webkit-appearance: none;
}


.submenu_btn
{
    width:100%;
    height:auto;
    text-align:left;
    padding:10px;
    background-color:transparent;
    border-top:0px solid black;
    border-bottom:1px solid #7fbb42;
    border-left:0px solid black; 
    border-right:0px solid black;
    font-size:14px;
    cursor:pointer;
    color:Black;
    -webkit-appearance: none;
}

.submenu_btn_empty
{
    width:100%;
    height:auto;
    text-align:left;
    padding:10px;
    background-color:#7fbb42;
    border-top:0px solid black;
    border-bottom:1px solid #7fbb42;
    border-left:0px solid black; 
    border-right:0px solid black;
    font-size:14px;
    -webkit-appearance: none;
}


.calender_style 
{
    margin-left:auto;
    margin-right:auto;
    border-radius:20px;
    border:0px solid black;
}


.greentick_img
{
    width:150px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
}




.copyright
{
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    font-size:12px;
    color:White;
    padding:10px;
}

.summary_box
{
    width:50%;
    float:left;
    height:180px;
    border:0px solid green;
    padding:15px;
    background-color:white;
    
}

.summary_box img
{
    width:100%;
    height:60px;
    position:absolute;
    top:90px;
    left:0px;
    
}

.summary_img_blur
{
    width:100%;
    position:absolute;
    top:0;
    left:0;
    height:150px;
    background-color:White;
    opacity:0.4;
}

.summary_holder
{
    width:100%;
    position:relative;
    background-color:White;
}

.summary_text_box
{
    width:100%;
    position:absolute;
    text-align:left;
    padding-left:10px;
    font-size:14px;
    top:0px;
    left:0px;
}

.login_holder
{
    width:90%;
    height:auto;
    padding:0px;
    margin-left:5%;
    margin-right:5%;
    border-bottom:1px solid #7fbb42;
    border-top:0px solid black;
    border-left:0px solid black;
    border-right:0px solid black;
    float:left;
    font-size:20px;
}

.login_box1
{
    width:30%;
    height:60px;
    float:left;
    padding:20px 15px 20px 0;
    text-align:left;
    margin-bottom:0px;
    border:0px solid black;
    margin-top:30px;
   
}


.login_box2
{
    width:70%;
    height:60px;
    float:left;
    margin-top:30px;
    margin-bottom:0px;
    text-align:left;
    border:0px solid black;
    
    
}


.login_txtbox
{
    width:100%;
    height:60px;
    padding-top:10px;
    float:left;
    background-color:transparent;
    font-size:20px;
   
}

.login_ddl
{
    width:100%;
    height:60px;
    padding-top:10px;
    float:left;
    background-color:transparent;
    border:none;
    font-size:20px;
   
}

.btn_left

{
    width:40%;
    height:auto;
    float:left;
    padding:20px;
    border:2px solid #7fbb42;
    border-radius:10px;
    color:White;
    background-color:#7fbb42;
    border:none;
    margin-top:60px;
    margin-bottom:10px;
    cursor:pointer;
    -webkit-appearance: none;
    -webkit-border-radius:10px;
    font-size:18px;
}

.btn_right

{
    width:40%;
    height:auto;
    float:right;
    padding:20px;
    border-radius:10px;
    border:2px solid #7fbb42;
    margin-top:60px;
    margin-bottom:10px;
    background-color:White;
    color:#7fbb42;
    cursor:pointer;
    -webkit-appearance: none;
    -webkit-border-radius:10px;
    font-size:18px;
}


.btn_left_small_font

{
    width:45%;
    height:auto;
    float:left;
    padding:20px;
    border-radius:18px;
    color:White;
    background-color:#7fbb42;
    opacity:0.9;
    margin-top:60px;
    margin-bottom:10px;
    cursor:pointer;
    -webkit-appearance: none;
    -webkit-border-radius:10px;
    font-size:18px;
}

    .btn_left_small_font:hover {
        width: 45%;
        height: auto;
        float: left;
        padding: 20px;
        border-radius: 18px;
        color: White;
        background-color: #7fbb42;
        opacity: 1;
        margin-top: 60px;
        margin-bottom: 10px;
        cursor: pointer;
        -webkit-appearance: none;
        -webkit-border-radius: 10px;
        font-size: 18px;
    }

.btn_get_start {
    width: 220px;
    height: auto;
    padding: 15px;
    border-radius: 18px;
    color: #7fbb42;
    background-color: transparent;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 10px;
    border: 2px solid #7fbb42;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
}

.list_img {
    width: 100%;
    height: 600px;
}

.btn_get_start:hover 
{
    background-color: #7fbb42;
    color:white;
}

    .btn_right_small_font {
        width: 40%;
        height: auto;
        float: right;
        padding: 20px;
        border-radius: 10px;
        border: 2px solid #7fbb42;
        margin-top: 60px;
        margin-bottom: 10px;
        background-color: White;
        color: #7fbb42;
        cursor: pointer;
        -webkit-appearance: none;
        -webkit-border-radius: 10px;
        font-size: 18px;
    }

.float_left_Chk
{
    width:45%;
    height:60px;
    float:left;
    text-align:left;
    padding-top:15px;
    margin-top:30px;
}

.float_right_forgpt_pass
{
    width:55%;
    height:60px;
    float:right;
    text-align:right;
    padding-top:15px;
    margin-top:30px;
}


.forgot_pass_email
{
    width:100%;
    height:60px;
    padding-top:10px;
    background-color:transparent;
    font-size:20px;
}

.btn_send_forgot_email

{
    width:50%;
    height:auto;
    margin-left:25%;
    margin-right:25%;
    float:right;
    padding:20px;
    border-radius:5px;
    border:2px solid #7fbb42;
    margin-top:60px;
    margin-bottom:10px;
    background-color:#7fbb42;
    cursor:pointer;
    color:White;
    -webkit-appearance: none;
    -webkit-border-radius:5px;
}

.intro
{
    margin-top:10px;
    margin-bottom:40px;
    width:800px;
    margin-left:auto;
    margin-right:auto;
    font-family:Segoe UI;
    border:0px solid red;
    font-size:22px;
    text-align:center;
    background-color:white;
}

.intro_two_div {
    margin: 60px auto 40px auto;
    width: 100%;
    max-width: 1000px;
    font-family: Segoe UI;
    font-size: 22px;
    text-align: center;
    background-color: white;
    overflow: hidden; /* Prevents float overflow */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.intro_gray {
    margin-top: 10px;
    margin-bottom: 40px;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-family: Segoe UI;
    border: 0px solid red;
    font-size: 22px;
    text-align: center;
    background-color: #f6f6f6;
}

.two_div_in_one
{
    width:49%;
    height:auto;
    float:left;
    padding-left:20px;
}

.two_div_in_one_image{
    width: 100%;
    height: auto;
}

.list_of_project {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* spacing between boxes */
    justify-content: flex-start;
    margin-left: 20px;
   
}

.post {
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 12px;
    width: 100%;
    width: calc(33.333% - 20px); /* 3 boxes per row with 20px gap */
    box-sizing: border-box;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    padding-bottom:20px;
    height:auto;
}

    .post:hover {
        transform: scale(1.02);
    }


.solar-estimator-form {
    max-width: 600px;
    margin: auto;
    padding: 20px;
    font-family: 'Segoe UI', sans-serif;
    background: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

    .solar-estimator-form label {
        display: block;
        margin-top: 15px;
        font-weight: bold;
        margin-bottom: 10px;
    }


.solar-estimator-form-dropdown {
    -webkit-appearance: none; /* Remove Safari’s default dropdown style */
    -moz-appearance: none; /* Remove Firefox default */
    appearance: none; /* Standard way */
    width: 100%;
    height:auto;
    padding: 10px;
    margin-top: 5px;
    border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.solar-estimator-form-btn {
    -webkit-appearance: none; /* Remove Safari’s default dropdown style */
    -moz-appearance: none; /* Remove Firefox default */
    appearance: none; /* Standard way */
    margin-top: 25px;
    width: 100%;
    height: auto;
    padding: 12px;
    background-color: #7fbb42;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    cursor: pointer;
}

    .solar-estimator-form-btn:hover {
        background-color: #6aa834;
    }

/* Each row of label + value */
.lead-row {
    text-align: left;
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.5;
}

/* Left-side label (bold) */
.lead-label {
    font-weight: bold;
    display: inline-block;
    width: 140px;
}

/* Green Quote button */
.quote-button {
    -webkit-appearance: none; /* Remove Safari’s default dropdown style */
    -moz-appearance: none; /* Remove Firefox default */
    appearance: none; /* Standard way */
    background-color: #7fbb42;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

    .quote-button:hover {
        background-color: #689f38;
    }


.intro_white
{
    margin-top:10px;
    margin-bottom:40px;
    width:80%;
    height:auto;
    margin-left:10%;
    margin-right:10%;
    font-family:Segoe UI;
    font-size:18px;
    text-align:center;
}


@media only screen and (min-width: 1200px) 
{
    
    .pop_out_content {
  background-color: white;
  margin-top:5%;
  
 
  
}

}

@media only screen and (max-width: 768px) 
{
    
  .pop_out_content {
  background-color: white;
  margin-top:3%;
   
} 


.btnholder
{
    width:50%;
    height:auto;
    position:absolute;
    bottom:30px;
    left:30px;
}
   
   
.bghead_text
{
    width:55%;
    height:auto;
    position:absolute;
    top:50px;
    left:30px;
    color:White;
    font-size:14px;
    text-align:left;
    border:0px solid red;
}
   

.bghead_text2
{
    width:70%;
    height:auto;
    position:absolute;
    top:200px;
    left:0px;
    color:#FFF600;
    font-size:20px;
    text-align:justify;
    border:0px solid red;
}

   
   
    
}


.content-wrapper {
    max-width: 900px;
    float:left;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
}




@media only screen and (min-width: 1024px) 
{
    
 
    
    
  .pop_out_content {
  background-color: white;
  margin-top:3%;
  margin-left:20%;
  margin-right:20%;
  width:60%;
  
  
}

.btnholder
{
    width:50%;
    height:auto;
    position:absolute;
    bottom:100px;
    left:30px;
}
   
   
.bghead_text
{
    width:55%;
    height:auto;
    position:absolute;
    top:70px;
    left:35px;
    color:White;
    font-size:20px;
    text-align:left;
    border:0px solid red;
}
  
  
.bghead_text2
{
    width:70%;
    height:auto;
    position:absolute;
    top:200px;
    left:0px;
    color:#FFF600;
    font-size:20px;
    text-align:justify;
    border:0px solid red;
}        
    
}

@media only screen and (min-width: 700px) 
{

.directory_div
{
    width:60%;
    height:auto;
    margin-left:20%;
    border: 0px solid red;
}

.directory_box
{
    width:50%;
    height:auto;
    border: 0px solid black;
    float:left;
    text-align:center;
    color:#7fbb42;
    
}



.icon_img
{
    width:60%;
    height:auto;
    margin-right:0px;
    
}


    
.btn_close_spec

{
    width:30%;
    height:auto;
    margin-left:35%;
    margin-right:35%;
    float:right;
    padding:10px;
    border-radius:5px;
    border:2px solid #7fbb42;
    margin-top:10px;
    margin-bottom:10px;
    background-color:#7fbb42;
    cursor:pointer;
    color:White;
    font-size:20px;
    -webkit-appearance: none;
    -webkit-border-radius:5px;
}
    
    
    
    .blogger_box
{
    width:33.33%;
    height:auto;
    min-height:300px;
    float:left;
    border:0px solid blue;
    font-size:12px;
    padding-right:10px;

}
   
   

.bghead_text
{
    width:60%;
    height:auto;
    position:absolute;
    top:50px;
    left:30px;
    color:White;
    font-size:14px;
    text-align:justify;
    border:0px solid red;
}
   
   
    
}

@media only screen and (min-width: 1000px) 
{
    
    .blogger_box
{
    width:33.33%;
    height:auto;
    min-height:330px;
    float:left;
    border:0px solid blue;
    font-size:12px;
    padding-right:10px;

}


    
}



  
@media only screen and (min-width: 1200px) 
{
    
  .pop_out_content {
  background-color: white;
  margin-top:3%;
  margin-left:20%;
  margin-right:20%;
  width:60%;
  
  
}

.blogger_box
{
    width:33.33%;
    height:auto;
    min-height:500px;
    float:left;
    border:0px solid blue;
    font-size:12px;
    padding-right:10px;

}

.btnholder
{
    width:50%;
    height:auto;
    position:absolute;
    bottom:180px;
    left:30px;
}
   
   
.bghead_text
{
    width:55%;
    height:auto;
    position:absolute;
    top:100px;
    left:35px;
    color:White;
    font-size:26px;
    text-align:left;
    border:0px solid red;
}
 
 
.bghead_text2
{
    width:80%;
    height:auto;
    position:absolute;
    top:200px;
    left:0px;
    color:#FFF600;
    font-size:20px;
    text-align:justify;
    border:0px solid red;
}        
    
}





@media only screen and (max-width:430px)

{


.directory_div
{
    width:90%;
    height:auto;
    margin-left:5%;
    border: 0px solid red;
}

.directory_box
{
    width:100%;
    height:auto;
    border: 0px solid black;
    float:left;
    text-align:center;
    color:#7fbb42;
    margin-bottom:40px;
    
}



.pop_out_alert

{
  background-color: white;
  margin-top:20%;
  margin-left:10%;
  margin-right:10%; /* 15% from the top and centered */
  margin-bottom:200px;
  padding: 30px;
  border: 0px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  height:auto;
  overflow:auto;
  min-height:100px;
  font-family:Calibri;
  font-size:25px;
  
}

.blogger_box
{
    width:33.33%;
    height:auto;
    float:left;
    border:0px solid blue;
    font-size:12px;
    padding-right:10px;

}
    
.btn_add_spec
{
    width:70%;
    margin-left:15%;
    margin-right:15%;
}    
    
.btn_close_spec
{
    width:70%;
    margin-left:15%;
    margin-right:15%;
    
}

    

.intro
{
    margin-top:30px;
    width:80%;
    margin-left:10%;
    margin-right:10%;
    font-family:Segoe UI;
    font-size:16px;
    text-align:center;
}



.bghead_text
{
    width:55%;
    height:auto;
    position:absolute;
    top:10px;
    left:12px;
    color:White;
    font-size:10px;
    text-align:left;
    border:0px solid red;
}

.bghead_text2
{
    width:80%;
    height:auto;
    position:absolute;
    top:70px;
    left:0px;
    color:#FFF600;
    font-size:10px;
    text-align:justify;
    border:0px solid red;
}

.btnholder
{
    width:50%;
    height:auto;
    position:absolute;
    bottom:10px;
    left:10px;
}


.btn_left

{
    width:45%;
    height:auto;
    float:left;
    padding:5px;
    border-radius:10px;
    border:2px solid #7fbb42;
    margin-top:90px;
    margin-bottom:0px;
    background-color:#7fbb42;
    color:white;
    cursor:pointer;
    -webkit-appearance: none;
    -webkit-border-radius:10px;
    font-size:15px;
}

.btn_right

{
    width:45%;
    height:auto;
    float:right;
    padding:5px;
    border-radius:10px;
    border:2px solid #7fbb42;
    margin-top:90px;
    margin-bottom:0px;
    background-color:White;
    color:#7fbb42;
    cursor:pointer;
    -webkit-appearance: none;
    -webkit-border-radius:10px;
    font-size:15px;
}


.btn_left_small_font

{
    width:45%;
    height:auto;
    float:left;
    padding:5px;
    border-radius:10px;
    border:2px solid #7fbb42;
    margin-top:20px;
    margin-bottom:10px;
    background-color:#7fbb42;
    opacity:0.9;
    color:white;    
    cursor:pointer;
    -webkit-appearance: none;
    -webkit-border-radius:10px;
    font-size:12px;
}


    .btn_left_small_font:hover {
        width: 45%;
        height: auto;
        float: left;
        padding: 5px;
        border-radius: 18px;
        color: White;
        background-color: #7fbb42;
        opacity: 1;
        margin-top: 60px;
        margin-bottom: 10px;
        cursor: pointer;
        -webkit-appearance: none;
        -webkit-border-radius: 10px;
        font-size: 12px;
    }


.btn_right_small_font

{
    width:45%;
    height:auto;
    float:right;
    padding:5px;
    border-radius:10px;
    border:2px solid #7fbb42;
    margin-top:90px;
    margin-bottom:0px;
    background-color:White;
    color:#7fbb42;
    cursor:pointer;
    -webkit-appearance: none;
    -webkit-border-radius:10px;
    font-size:12px;
}
    
 .login_holder
{
    width:90%;
    height:auto;
    padding:0px;
    margin-left:5%;
    margin-right:5%;
    border-bottom:1px solid #7fbb42;
    border-top:0px solid black;
    border-left:0px solid black;
    border-right:0px solid black;
    float:left;
    font-size:14px;
}   
    

    
    .login_txtbox
{
    width:90%;
    margin-left:5%;
    height:60px;
    padding-top:10px;
    float:left;
    background-color:transparent;
    font-size:14px;
   
}


.spec_secondory_box
{
    width:100%;
    margin-bottom:10px;
}

   

}

@media (max-width: 768px) {
    .article-preview {
        flex: 0 1 100%;
    }

    .article-title {
        font-size: 1rem;
    }
}

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


.directory_div
{
    width:90%;
    height:auto;
    margin-left:5%;
    border: 0px solid red;
}

.directory_box
{
    width:100%;
    height:auto;
    border: 0px solid black;
    float:left;
    text-align:center;
    color:#7fbb42;
    margin-bottom:40px;
    
}


.blogger_box
{
    width:100%;
    height:auto;
    float:left;
    border:0px solid blue;
    font-size:12px;
    padding-right:0px;

}

.pop_out_alert

{
  background-color: white;
  margin-top:20%;
  margin-left:10%;
  margin-right:10%; /* 15% from the top and centered */
  margin-bottom:200px;
  padding: 30px;
  border: 0px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  height:auto;
  overflow:auto;
  min-height:100px;
  font-family:Calibri;
  font-size:25px;
  
}

    
.btn_add_spec
{
    width:70%;
    margin-left:15%;
    margin-right:15%;
}    
    
.btn_close_spec
{
    width:70%;
    margin-left:15%;
    margin-right:15%;
    
}

.spec_secondory_box
{
    width:100%;
    margin-bottom:10px;
}

   

.disallow_allow_que_div
{
    width:80%;
    height:40px;
    margin-left:10%;
    margin-right:10%;
    margin-top:30px;
    border:0px solid black;
    padding-bottom:5px;
  
    
   
}


.download_btn
{
    width:80%;
    height:auto;
    font-family:Calibri;
    font-size:18px;
    margin-bottom:30px;
    border-top:1px solid #7fbb42;
    border-bottom:1px solid #7fbb42;
    border-left:1px solid #7fbb42;
    border-right:1px solid #7fbb42;
    -webkit-appearance: none;
}

.normal_row_expert
{
    width:90%;
    margin-left:5%;
    margin-right:5%;
    border:0px solid black;
    margin-top:10px;
    padding:15px 0 30px 0;
    font-size:20px;
    float:left;
    font-size:15px;
   
  
    
}

    .post {
        display: inline-block;
        width: 90%;
        height: 300px;
        border: 0px solid red;
        margin-right: 5px;
        margin-left: 5px;
        margin-top: 20px;
        text-align: left;
        padding: 10px;
        background-color: white;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        font-size: 12px;
    }


    .intro {
        margin-top: 10px;
        margin-bottom: 40px;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        font-family: Segoe UI;
        border: 0px solid red;
        font-size: 18px;
        text-align: center;
        background-color: white;
    }

    .list_img {
        width: 100%;
        height: auto;
    }

    .two_div_in_one {
        width: 100%;
        height: auto;
        float: left;
        padding-left: 0px;

    }


    .intro_two_div {
        margin-top: 60px;
        margin-bottom: 40px;
        width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        font-family: Segoe UI;
        border: 0px solid red;
        font-size: 18px;
        text-align: center;
        background-color: white;
    }

    .intro_gray {
        margin-top: 10px;
        margin-bottom: 40px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        font-family: Segoe UI;
        border: 0px solid red;
        font-size: 18px;
        text-align: center;
        background-color: #f6f6f6;
        padding:10px;
    }

}

@media (max-width: 768px) {
    .list_of_project {
       
        margin-left: 0px;
        
    }


    .post {
        width: 100%;
        padding-bottom: 30px;
        height:auto;
    }

    .two_div_in_one {
        width: 100%;
        height: auto;
        float: left;
        padding: 0px;
    }

    .solar-estimator-form {
        font-size:14px;
        width:100%;
        padding:5px;
    }
}