/* home page */

.stagings {
    width: 100%;
    max-width: 20%;
    position: sticky;
    top: 167px;
}

section.section-form {
    padding: 0 0 0 50px;
}

.header{
    margin-bottom: 30px;
    padding: 0 30px 0 0px;
}

.main-logo {
    background: #fff;
    border-radius: 0 0 20px;
    position: relative;
}

.main-logo img{
    margin-right: 20px;
    width: 100%;
    max-width: 170px;
}

.main-logo:before {
    content: '';
    position: absolute;
    border: 1px solid #3d3d3c;
    top: 24%;
    bottom: 0;
    height: 50px;
    left: 46%;
    transform: translateX(-46%);
}

.map-img img {
    max-width: 261px;
    border: 3px solid #fff;
    border-radius: 12px;
}
#map {
    position: relative;
    right: 50px;
    border: 3px solid #fff;
    border-radius: 12px;
    top: 15%;
}

.map-image span{
    opacity: 0;
}

.map-img-report img {
    max-width: 261px;
    position: relative;
    right: 80px;
    border: 3px solid #fff;
    border-radius: 12px;
}

.map-img,
.map-img-report{
    position: relative;
}

/* section{
    column-gap:30px;
} */

.form{
    border-radius: 25px 0 0px 25px;
}

.stagings p {
    font-size: 26px;
    color: #fff;
    text-align: center;
    margin-bottom: 40px;
    font-family: 'Nunito';
}

 .stagings label {
    font-size: 18px;
    color: #fff;
    margin-bottom: 20px;
    margin-left: 10px;
    font-family: 'Nunito';
}

.navigation a,
.on span {
    color: #fff;
    /* font-size: 20px; */
    font-size: 19px;
    font-family: 'Nunito';
}

.navigation a:after {
    content: '';
    position: relative;
    border: 1px solid;
    margin: 10px;
    border-radius: 20px;
    font-size: 15px;
}

.navigation a:last-child:after {
    content: none;
}

.install-form {
    padding: 70px 0;
}

.install-form p {
    font-size: 24px;
    font-weight: 700;
    font-family: 'Nunito';
    padding: 0;
}

.install-form label,
.pass-content label,
.consommotion label{
    font-size: 16px;
    font-family: 'Nunito';
    font-weight: 700;
    padding: 0;
}

.economic label{
    font-size: 13px;
    font-family: 'Nunito';
    font-weight: 700;
    padding: 0;
}

.install-form input, 
.install-form select, 
.install-form button,
.pass-content input,
.general-form input,
.solar_production input,
.consommotion input[type='text'],
.economic input{
    border-radius: 20px;
    border: 1px solid #EDEDED;
    padding: 5px 10px;
    font-family: 'Nunito';
    font-weight: 700;
    line-height: 20px;
}

.install-form input:focus-visible,
select:focus-visible,
.pass-content input:focus-visible,
.general-form input:focus-visible,
.solar_production input:focus-visible,
.consommotion input:focus-visible,
input#search:focus-visible,
.economic input:focus-visible{
    box-shadow: 0px 1px 7px 4px rgba(212,233,194,1);
    border: none;
    outline: none;
}

.install-form button,
.install-form input[type="submit"],
.solar_production input[type="button"],
.solar_production input[type="submit"],
.consommotion input[type='submit'],
.economic input[type='submit'],
.period-date label.cta-btn{
    background: linear-gradient(90deg, rgba(76,137,51,1) 0%, rgba(94,159,53,1) 42%, rgba(112,180,55,1) 100%);
    font-size: 14px;
    font-family: 'Nunito';
    color: #fff;
}


::placeholder {
    color:#CFCFCE;
    font-family: 'Nunito';
}
.install-form select{
    /*color:#CFCFCE;*/
    color:#000;
    font-family: 'Nunito';
}

.install-form select option{
    color:#000;
}

.install-form div,
.general-form div {
    margin-bottom: 15px;
    align-items: center;
}

.power {
    background: linear-gradient(90deg, rgba(76,137,51,1) 0%, rgba(94,159,53,1) 42%, rgba(112,180,55,1) 100%);
    padding: 20px;
    text-align: center;
    border-radius: 7px;
    height: fit-content;
}



input[type='radio'] {
    accent-color: #569533;
}

.power p{
    background: #fff;
    border-radius: 30px;
    color: #3C3C3B;
    padding: 5px 0;
    font-size: 16px;
    font-family: 'nunito';
    font-weight: 700;
}

.power .calc-peak-p,
.pass-content label,
.inner-space a,
.economic .power label{
    color:#fff;
    font-family: 'nunito';
}


.power label{
    margin-bottom: 10px;
    font-family: 'Nunito';
}

hr:not([size]) {
    width: 90%;
    color:#4A8732;
}

input#close {
    accent-color: #4A8732;
}

.install-form select,
.period-date select {
    -webkit-appearance: none;
    background: transparent;
    background-image: url("../images/DD.png");
    background-repeat: no-repeat;
    background-position-x: 99%;
    background-position-y: 1px;
    padding-right: 2rem;
}

.graph p {
    font-size: 16px;
    font-family: 'nunito';
    font-weight: 600;
    line-height: 20px;
}
.graph p span {
    font-size: 14px;
    color: #3C3C3B;
    font-style: normal;
    font-family: 'nunito';
}

/* end */

/* login page */

.head{
    padding: 0 30px 0 0px;
    position: sticky;
    top: 0;
    z-index: 999999;
    background: linear-gradient(90deg, rgba(76,137,51,1) 0%, rgba(94,159,53,1) 0%, rgba(112,180,55,1) 176%);
    margin-bottom: 30px;
}

.main {
    background: url(../images/background.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 100vh;
}

.login-form{
    margin-top: 110px;
}

.login-form h1 {
    font-size: 60px;
    font-family: 'nunito';
    font-weight: 700;
    color: #fff;
}

.login-form p {
    font-size: 22px;
    font-family: 'nunito';
    color: #fff;
    font-weight: 300;
}

.cta-btn {
    padding: 6px 40px !important;
    color:#4A8732;
    border-radius: 20px;
    border: 1px solid #EDEDED;
    font-family: 'Nunito';
    font-weight: 700;
    line-height: 20px;
    min-width: 150px;
}

.login-form label,
.login-form a,
.general-form label,
.inner-profile label,
.inner-space label{
    color:#fff;
    font-family: 'nunito';
}

a.create {
    font-size: 16px;
    text-decoration: none;
    font-family: 'nunito';
    font-weight: 700;
}

a.forget {
    font-weight: 700;
}

.login-form input[type='checkbox'] {
    width: 20px;
    height: 20px;
    accent-color: #4A8732;
}

/* end */

/* recovery page */

.inner-section .inner-content{
    top: 20%;
    left: 0;
    right: 0;
    bottom: 0;
}

.inner-content p {
    font-size: 32px;
    line-height: 44px;
    color: #fff;
    font-family: 'nunito';
    font-weight: 600;
    margin-bottom: 50px;
}   

.pass-content {
    row-gap: 76px;
    left: 0;
    right: 0;
    top: 10%;
}

.pass-content h1,
.forgot-password h2,
.inner-profile h2,
.inner-space h2{
    font-size: 40px;
    color:#fff;
    font-family: 'nunito';
    font-weight: 700;
}

.pass-content p,
.forgot-password p{
    font-size: 22px;
    color:#fff;
    font-family: 'nunito';
    font-weight: 300;
    line-height: 30px;
}

p.right-reserved {
    font-size: 16px;
    font-weight: 300;
    line-height: 22px;
}

/* end */


/* forgot password */

.forgot-inner{
    top: 15%;
}

/* end */



/* my personal space */

.inner-space input[type='text'], 
.inner-space input[type='email'] {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border:none;
}

/* end */



/* solar production */

.solar_production {
    padding-right: 0 !important;
    width: 100%;
}

.solar_production h4,
.consommotion h4,
.economic h4 {
    font-size: 18px;
    font-family: 'nunito';
    font-weight: 700;
    line-height: 20px;
}

.sub-heading  p{
    font-size: 14px;
    font-family: 'nunito';
    font-weight: 700;
    line-height: 18px;
    /* min-height: 30vh; */
    min-height: 10vh;
}

.sub-heading span{
    font-size: 10px;
    font-family: 'nunito';
    font-weight: 700;
    line-height: 10px;
}

/* end */



/* consommotion */

.consommotion input[type='button']{
    background: linear-gradient(90deg, rgba(76,137,51,1) 0%, rgba(94,159,53,1) 42%, rgba(112,180,55,1) 100%);
    border: none;
    outline: none;
    color: #fff;  
    font-size: 12px;
    font-family: 'nunito';
    font-weight: 600;    
    padding: 8px 20px;
}

.sub-btn{
    border-bottom: 1px solid #72b337;
}

.calculation-text{
    font-size: 14px;
    font-family: 'nunito';
    font-weight: 600;
}



.consommotion span,
.economic span{
    font-size:12px ;
    font-style: italic;
    color:#72b337;
    font-family: 'nunito';
    font-weight: 500;
}

.instructions p {
    font-size: 14px;
    line-height: 20px;
    color: #3C3C3B;
    font-style: italic;
    margin-bottom: 0;
}

.consommotion img{
    width: 100%;
}

.consommotion table{
    font-family: 'nunito';
}

.consommotion table td {
    border: 5px solid #fff;
}

/* end */


/* economic study */

.main-heading label,
.heading label{
    color: #fff;
    background: linear-gradient(90deg, rgba(76,137,51,1) 0%, rgba(94,159,53,1) 42%, rgba(112,180,55,1) 100%);
    padding: 5px 20px;
}


.main-heading {
    border-bottom: 1px solid #569533;
}

label.consideration {
    border: 1px solid #569533;
    border-radius: 20px;
    padding: 5px 10px;
    background: #fff;
    color: #569533;
    position: absolute;
    top: -7%;
    left: 20%;
    transform: translateY(5%);
}


.economic input{
    font-size: 13px;
}

.loan-table {
    position: relative;
}

.maintain-sale{
    background: linear-gradient(90deg, rgba(76,137,51,1) 0%, rgba(94,159,53,1) 42%, rgba(112,180,55,1) 100%);
    border-radius: 7px;
}

.maintain-sale label{
    color: #FFF;
}

/* end */



/* topological defination */

.switch {
	position: relative;
	display: block;
	vertical-align: top;
	width: 70px;
	height: 30px;
	padding: 3px;
	/* margin: 0 10px 10px 0; */
	/* background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
	box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05); */
	border-radius: 18px;
	cursor: pointer;
	box-sizing:content-box;
}

.display-admin-edit .switch {
    width: 60px;
    height: 23px;
}


.switch-input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	box-sizing:content-box;
}
.switch-label {
	position: relative;
	display: block;
	height: inherit;
	font-size: 10px;
	text-transform: uppercase;
	background: #eceeef;
	border-radius: inherit;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
	box-sizing:content-box;
}

.display-admin-edit  .switch-label{
    border: 1px solid #fff;
}

.switch-label:before, .switch-label:after {
	position: absolute;
	top: 50%;
	margin-top: -.5em;
	line-height: 1;
	-webkit-transition: inherit;
	-moz-transition: inherit;
	-o-transition: inherit;
	transition: inherit;
	box-sizing:content-box;
}
.switch-label:before {
	content: attr(data-off);
	right: 11px;
	color: #aaaaaa;
	text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}

.display-admin-edit .switch-label:before{
    color: #000;
}
.switch-label:after {
	content: attr(data-on);
	left: 11px;
	color: #FFFFFF;
	text-shadow: 0 1px rgba(0, 0, 0, 0.2);
	opacity: 0;
}
.switch-input:checked ~ .switch-label {
    background: linear-gradient(90deg, rgba(76,137,51,1) 0%, rgba(94,159,53,1) 42%, rgba(112,180,55,1) 100%);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
	opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
	opacity: 1;
}
.switch-handle {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 22px;
	height: 22px;
	background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
	background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
	border-radius: 100%;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.display-admin-edit .switch-handle {
    top: 7px;
    left: 7px;
    width: 15px;
    height: 15px;
}

.switch-input:checked ~ .switch-handle {
	left: 44px;
	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
 
/* Transition
========================== */
.switch-label, .switch-handle {
	transition: All 0.3s ease;
	-webkit-transition: All 0.3s ease;
	-moz-transition: All 0.3s ease;
	-o-transition: All 0.3s ease;
}

.switch-input{
    display: none;
}

img.tile-img {
    width: 100%;
    max-width: 50px;
    min-height: 60px;
}

.tiles label {
    min-height: 39px;
}


textarea {
    border-radius: 10px;
}

.red-label {
    color: #E50051;
}

/* end */


/* report */

.report-check-list p {
    position: relative;
    padding-left: 25px;
    font-size: 14px;
    font-family: 'nunito';
    font-weight: 500;
    display: table;
}

.report-check-list p:before {
    content: '';
    position: absolute;
    background: url(../images/marker.png);
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
    top: 12%;
    left: 0;
}

/* .report-check-list p:after {
    content: '';
    position: absolute;
    background: url(../images/upload.png);
    background-repeat: no-repeat;
    width: 27px;
    height: 27px;
    top: -2px;
    right: -40px;
} */



/* end */


/* update user */


.update-user .switch-handle {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    background: #000;
    border-radius: 100%;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.update-user .switch-label:before,
.update-user .switch-label:after {
    color: #000;
}

.update-user .switch-input:checked ~ .switch-label {
    background: #fff;
}

/* end */


.add-data img {
    width: 40px;
}

.add-data a{
    color: #3C3C3B;
    font-size: 20px;
    font-family: 'nunito';
    font-weight: 500;
}


/* Styles for document list */
#document-list {
    width: 500px;
    margin: 20px auto;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  #document-input {
    width: calc(100% - 80px);
    padding: 5px;
    margin-right: 5px;
  }
  
  #list-container {
    list-style-type: none;
    padding: 0;
    margin: 10px 0;
    max-height: 200px;
    overflow-y: auto;
  }
  
  #list-container li {
    display: flex;
    align-items: flex-start;
    column-gap: 20px;
    margin-right: 20px;
  }
  
  .document-name {
    flex-grow: 1;
    font-size: 16px;
    font-family: 'nunito';

  }
  
  .delete-icon,
  .add-data a {
    cursor: pointer;
  }

  #list-container::-webkit-scrollbar,
  .popup-body::-webkit-scrollbar {
    width: 10px;
  }
  
  #list-container::-webkit-scrollbar-track,
  .popup-body::-webkit-scrollbar-track{
    background-color: #F0F0F2;
    border-radius: 5px;
  }
  
  #list-container::-webkit-scrollbar-thumb,
  .popup-body::-webkit-scrollbar-thumb{
    background-color: #4A8732;
    border-radius: 5px;
  }
  
  #list-container::-webkit-scrollbar-thumb:hover,
  .popup-body::-webkit-scrollbar-thumb:hover {
    background: #72B737;
  }



  /* popup window */

  .popup-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    /* height: 100%; */
    z-index: 9999999;
    /* overflow: auto; */
    transform: translate(-50%, -50%);
    background-color: rgba(60, 60, 59, 0.9);
    box-shadow: 1px 1px 100px -15px rgba(0,0,0,0.88);
}

/* Popup content */
.popup-content {
    margin: 0 auto;
    padding: 20px;
    width: 100%;
    max-width: 60%;
    position: relative;
    z-index: 1;
}

/* Close button */
.close-btn {
    position: absolute;
    top: -30px;
    cursor: pointer;
    border-radius: 30px;
    font-size: 30px;
    width: 20px;
    height: 20px;
    right: -30px;
    color: #fff;
}

/* Popup title */
.popup-title {
    margin-top: 0;
    color: #fff;
    font-size: 22px;
    text-align: center;
    font-family: 'Nunito';
}

/* Popup content */
.popup-body {
    text-align: center;
    max-height: 450px;
    overflow-y: auto;
}

.popup-body-content label,
.popup-body-content p{
    color: #fff;
    font-family: 'nunito';
}

.popup-body-content label{
    font-size: 16px;
}

.popup-body-content p{
    font-size: 14px;
}

.popup-body-content{
    max-width: 660px;
}

.popup-body-content input[type='checkbox']{
    width: 20px;
    height: 20px;
}


input[type='checkbox']{
    accent-color: #4A8732;
}


  /* end */


  /* report page */

.download-btn{
    background: linear-gradient(90deg, rgba(76,137,51,1) 0%, rgba(94,159,53,1) 42%, rgba(112,180,55,1) 100%);
    font-size: 14px;
    font-family: 'Nunito';
    color: #fff;
    text-decoration: none;
}

.download-btn:hover{
    color: #fff;
}

.pie-chart p {
    font-size: 18px;
    font-weight: 600;
    font-style: italic;
    line-height: 25px;
    margin-bottom: 0;
    font-family: 'nunito';
}

.pie-chart-list p, .pie-chart-list ul li {
    font-size: 16px;
    font-weight: 400;
    font-style: italic;
    font-family: 'nunito';
    margin-bottom: 0;
}

/* end */

.display-admin-edit input[type='radio']{
    width: 20px;
    height: 20px;
}

.period-date select {
    border: none;
}

.display-admin-edit label {
    color: #fff;
}


@media screen and (max-width:1301px){
    #map{
        right: 35px;
    }
}

@media screen and (max-width:1024px){
    a.create{
        font-size: 20px;
    }
    .login-form h1{
        font-size:46px;
    }
    .login-form p{
        font-size:18px;
        line-height:20px;
    }
    .inner-content p {
        font-size: 22px;
        line-height: 30px;
     }
}

@media screen and (max-width:768px){
    .login-form p{
        font-size:16px;
        line-height:20px;
    }
    .login-form h1,
    .inner-profile h2 {
        font-size: 36px;
    }
    .inner-content p {
        font-size: 20px;
    }
     .pass-content h1,
     .forgot-password h2 {
        font-size: 30px;
    }
    .pass-content p,
    .forgot-password p {
        font-size: 16px;
        line-height: 24px;
    }
    p.right-reserved{
        font-size: 14px;
    }
}

@media screen and (max-width:575px) {
    .login-form p {
        font-size: 14px;
        line-height: normal;
    }
    a.create {
        font-size: 18px;
    }
    .inner-content p {
        font-size: 18px;
        line-height: 25px;
        margin-bottom: 30px;
    }
    .pass-content h1,
    .inner-profile h2 {
        font-size: 24px;
    }
    .pass-content p {
        font-size: 14px;
        line-height: 20px;
    }
    p.right-reserved{
        font-size: 12px;
        line-height: 17px;
    }
}




/* table css */

.dataTables_length label,
.dataTables_info {
    display: none;
}


 .display,
 .display-admin ,
 .display-admin-edit{
    border-spacing: 5px !important;
 }

 table.dataTable thead th, table.dataTable thead td,
 table.dataTable.no-footer{
    border-bottom: none !important;
}


table.dataTable tbody tr {
    font-family: 'Nunito';
    font-size: 14px;
    font-weight: 700;
}


table.display-admin-edit td:nth-child(4),
table.display-admin-edit td:nth-child(5),
table.display-admin-edit td:nth-child(6){
    background: none ;
    text-align: center;
}

table.dataTable tbody td{
    background-color: #ffffff;
}

input#search {
    background: transparent;
    border: 2px solid #fff;
    border-left: 0;
    border-top: 0;
    border-right: 0;
    margin: 10px;
    color: #fff;
}

.search {
    font-size: 16px;
    font-family: 'nunito';
    color: #fff;
    background: linear-gradient(90deg, rgba(76,137,51,1) 0%, rgba(94,159,53,1) 42%, rgba(112,180,55,1) 100%);
    border: 2px solid;
    border-radius: 20px;
    padding: 3px 40px;
}


.search-list{
    font-size: 16px;
    font-family: 'nunito';
    color: #fff;
    background: linear-gradient(90deg, rgba(76,137,51,1) 0%, rgba(94,159,53,1) 42%, rgba(112,180,55,1) 100%);
    border: 2px solid;
    border-radius: 20px;
}

.dataTables_wrapper .dataTables_filter {
   display: none;
}


.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: #fff !important;
 }


input#search::placeholder {
    color: #FFF;
}

.studies-list h3 {
    font-size: 40px;
    font-family: 'Nunito';
    font-weight: 700;
    color: #fff;
}

/* end */


.display-admin-edit input[type="search"] {
    background: none;
    border: none;
    border-bottom: 2px solid #fff;
    color:#fff;
}

.display-admin-edit input[type="search"]::placeholder{
    color:#fff;
}



/* pagination css */

.page-link{
    border: none !important;
}


.pagination-lg .page-item:first-child .page-link,
.pagination-lg .page-item:last-child .page-link {
    color: #fff;
    border-radius: 20px;
    font-size: 12px;
    font-family: 'Nunito';
    font-weight: 700;
    background: linear-gradient(90deg, rgba(76,137,51,1) 0%, rgba(94,159,53,1) 42%, rgba(112,180,55,1) 100%);
    position: relative;
}

.pagination-lg .page-item:first-child .page-link{
    padding: 10px 20px 10px 30px !important;
}

.pagination-lg .page-item:last-child .page-link{
    padding: 10px 30px 10px 20px !important;
}

.pagination>li>a, .pagination>li>span{
    background-color: unset !important;
}

.pagination li.page-item.active a{
    background: linear-gradient(90deg, rgba(76,137,51,1) 0%, rgba(94,159,53,1) 42%, rgba(112,180,55,1) 100%);
    border-radius: 20px;
}

.pagination-lg .page-link {
    color: #198754;
    font-weight: 700;
    font-size: 12px;
    padding: 10px 20px;
}

.pagination {
    column-gap: 5px;
}


.pagination-lg .page-item:first-child .page-link:before {
    content: '';
    background: url(../images/previous.png);
    width: 10px;
    height: 15px;
    position: absolute;
    top: 13px;
    left: 15px;
    background-repeat: no-repeat;
}

.pagination-lg .page-item:last-child .page-link:after {
    content: '';
    background: url(../images/next.png);
    width: 10px;
    height: 15px;
    position: absolute;
    top: 13px;
    right: 13px;
    background-repeat: no-repeat;
}
/* end */


/* tooltip css */


.tooltip {
    position: relative;
    display: inline-block;
    opacity: 1;
    border-bottom: 0;
}
  
.tooltip .tooltiptext {
    visibility: hidden;
    width: 160px;
    background-color: white;
    color: black;
    border-radius: 6px;
    padding: 5px 10px;
    font-family: 'Nunito';
    font-weight: 700;

    /* tooltip position */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: -60%;
    margin-bottom: 5px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* end */



.pswd a{
    position: absolute;
    right: 20px;
    top: 28px;
}


.ignore-checkbox input[type="radio"] {
    display: none;
}

.ignore-checkbox input[type="radio"] + label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    vertical-align: middle;
}

.ignore-checkbox input[type="radio"]:checked + label::before {
    background-color: #fff;
    border-color: #fff;
}
.tooltip-icon {
    cursor: pointer;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: white;
    color: #000;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%; /* Position the tooltip text above the tooltip icon */
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/*AMA*/


/* Custom styles */
.custom-tooltip .tooltip-inner {
    background-color: #efefef; /* Change the background color */
    color: black; /* Change the text color */
    border-radius: 5px; /* Add border radius */
    padding: 10px; /* Add padding */
    font-size: 14px; /* Change font size */
    text-align: left;
    max-width: 300px;
    width: 250px;

    
    
}

.custom-tooltip .tooltip-arrow {
    color: white; /* Match arrow color with background */
}




/*------------------------------------------------------------*/
/*------------------------------------------------------------*/
/*------------------------------------------------------------*/




body{
    font-family: 'Nunito'!important;
    letter-spacing: 0;
}
.page_head h3 {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 24.55px;
    margin-bottom: 50px;
}
.consumption_select_head,
.profile_head {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 36px;
    border-bottom: 1px solid #72b337;;
}
.consumption_select {
    display: flex;
    align-items: center;
    gap: 25px;
}
.consumption_select_head p,
.profile_head p {
    margin-bottom: 0px;
    font-weight: 700;
    font-size: 12px;
    line-height: 16.37px;
    letter-spacing: 0;
    min-width: 128px;
    padding: 7px 22px;
    background: linear-gradient(90deg, #4A8732 0%, #72B737 100%);
    color: #FFF;
}
.consumption_select label {
    font-weight: 700;
    font-size: 12px;
    line-height: 16.37px;
    letter-spacing: 0;
}
.consumption_select .form_field {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.consumption_select input[type="radio"] {
    display: none; 
}
.consumption_select .form_field label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #3C3C3B;
    font-weight: 400;
    font-size: 12px;
    line-height: 16.37px;
}

.consumption_select .form_field label::before {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    display: inline-block;
    transition: all 0.2s ease-in-out;
    background-color: white;
    box-shadow: 0px 0px 5.66px 0px #00000040;
}

.consumption_select .form_field input[type="radio"]:checked + label::before {
    background-color: #76B947;
    box-shadow:  0px 0px 5.66px 0px #00000040;
}
.rate_selection_area {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    margin: 30px 0px;
}

.custom-select {
    position: relative;
    display: inline-block;
    width: 100%;
}
.custom-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffffff;
    border: none;
    color: #4A8732;
    outline: none;
    padding: 0px 12px;
    cursor: pointer;
    position: relative;
    z-index: 2;
    width: calc(100% - 2px);
    height: calc(28px - 2px);
    border-radius: 2px;
    font-weight: 600;
    font-size: 12px;
    line-height: 16.37px;
    letter-spacing: 0;
}
.custom-select::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 28px;
    padding: 0px;
    border-radius: 2px;
    z-index: 1;
    background: linear-gradient(90deg, #4A8732 0%, #72B737 100%);
}
.custom-select select {
    background-clip: padding-box;
}
.custom-select::after {
    content: "🞃";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #4A8732;
    pointer-events: none;
    z-index: 2;
}
.all_months_rate {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-auto-flow: column;
    gap: 12px 12px;
}
.all_months_rate .form_field label {
    font-family: Nunito;
    font-weight: 600;
    font-size: 12px;
    line-height: 16.37px;
    color: #3C3C3B;
    text-align: right;
}
.monthly_data,
.upload_data{
    margin: 28px 0px 50px;
    padding-top: 28px;
}
.upload_data {
    display: grid;
    grid-template-columns: 1fr 5fr;
    gap: 80px;
    align-items: self-start;
}
.monthly_data p {
    font-weight: 700;
    font-size: 12px;
    line-height: 16.37px;
    color: #3C3C3B;
}
.monthly_rate {
    display: grid;
    grid-template-columns: 1fr 5fr 0.2fr;
    gap: 45px;
}
.monthly_rate .rate_input,
.rate_info input {
    box-shadow: 0px 0px 1.64px 0px #1D1D1B40;
    width: 100%;
    border-radius: 100px;
    font-weight: 600;
    font-style: italic;
    font-size: 12px!important;
    line-height: 16.37px;
    letter-spacing: 0;
    color: #3C3C3B;
    height: 22px;
    display: flex;
    align-items: center;
    padding: 0px 10px!important;
    border: unset!important;
    max-width: 140px!important;
}
#upload_tarif_hc_hp .upload_data,
#upload_tarif_ete_hiver .upload_data {
    grid-template-columns: 1fr 1.5fr;
}
#upload_tarif_ete_hiver .upload_data{
    align-items: center;
}
.all_months_rate .form_field {
    display: grid;
    grid-template-columns: 62px 2fr;
    justify-content: left;
    gap: 12px;
}
.all_months_rate input {
    width: 140px;
    box-shadow: 0px 0px 1.64px 0px #1D1D1B40;
    border: unset;
    border-radius: 20px;
    padding: 0px 15px;
    height: 22px;
    color: #3C3C3B;
    font-family: Nunito;
    font-weight: 600;
    font-style: italic;
    font-size: 12px;
    line-height: 16.37px;
}
.profile_info {
    margin: 40px 0px;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 40px;
}
.profile_info img {
    max-width: 112px;
    opacity: 50%;
}
.profile_info .profile.active img {
    opacity: 100%;
}
.interval_selection_area {
    display: grid;
    gap: 8px;
    width: fit-content;
}
.interval_block {
    display: flex;
    gap: 30px;
}
.interval_block .form_group {
    display: flex;
    align-items: center;
    gap: 60px;
}
.interval_block .form_group .form_field {
    display: flex;
    align-items: center;
    gap: 12px;
}
.interval_block .custom-select {
    width: 52px;
}
.interval_block .custom-select::after {
    right: 10px;
    font-size: 11px;
}
.interval_block .custom-select select {
    font-weight: 600;
    font-style: italic;
    font-size: 12px;
    line-height: 16.37px;
    color: #3C3C3B;
}
.interval_block label {
    font-weight: 600;
    font-size: 12px;
    line-height: 16.37px;
}
.delete_interval,
.add_interval {
    width: 24px;
    height: 24px;
    box-shadow: 0px 0px 1.64px 0px #1d1d1b69;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.delete_interval img,
.add_interval img {
    width: 10px;
}
.add_new_interval {
    display: flex;
    gap: 30px;
    justify-content: right;
    align-items: center;
    margin-top: 8px;
}
.add_new_interval p{
    font-weight: 400;
    font-style: italic;
    font-size: 12px;
    line-height: 16.37px;
    margin-bottom: 0px;
}
.interval_bar {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 28px;
}
.interval_track {
    height: 15px;
    text-align: center;
    font-weight: 600;
    font-size: 8px;
    line-height: normal;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    justify-content: center;
}
.interval_track.hc{
    background-color: #95C11F;
}
.interval_track.hp{
    background-color: #E30613;
}
.interval_track.empty{
    background-color: #d6d6d5;
}
#tarif_hc_hp .monthly_data, 
#tarif_ete_hiver .monthly_data{
    border-top: solid 1px #70B536;
}
.rate_info {
    display: grid;
    gap: 30px;
}
.rate_info .form_field {
    display: grid;
    gap: 18px;
}
.rate_info .form_field label {
    font-size: 12px!important;
    line-height: 16.37px;
    color: #3C3C3B;
}
.file_upload label {
    font-size: 15px;
    margin-bottom: 8px;
}
.profile.active  {
    border: 2px solid;
    padding: 5px;
    color:#6baf36;
}

/* Hide increment and decrement buttons in Chrome, Safari, Edge, and Opera */
.no-spinner::-webkit-inner-spin-button, 
.no-spinner::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}
/* Hide increment and decrement buttons in Firefox */
.no-spinner {
    -moz-appearance: textfield !important;
}


@media(max-width:1300px){
    .monthly_rate {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 45px;
    }
}