.frontDiv{
    height: 100%;
}

.frontDiv li {
    user-select: none; 
    list-style-type: none;
    font-weight: 400;
}

.frontDiv ul {
    padding-left: 0rem;
}

.frontDiv li.selectedValue a{
    background-color:#cdced13f;
    border-color: black;
}


.scc-box{
    max-height: 400px;
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-width: thin;
    list-style-type: none;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    }

/* .scc-box li {
    margin-bottom: 0.25rem;
} */

.tree li {
list-style-type: none;
    margin: 0px;
    position: relative;
    line-height: 24px;
}

.tree li::before {
content: "";
position: absolute;
top: -4px;
left: -27px;
border-left: 1px solid #ccc;
border-bottom:1px solid #ccc;
border-radius:0 0 0 0px;
width:20px;
height:15px;
}

.tree li::after {
position:absolute;
content:"";
top: 10px;
left: -27px;
border-left: 1px solid #ccc;
border-top:1px solid #ccc;
border-radius:0px 0 0 0;
width:20px;
height:100%;
}

.tree li:last-child::after  {
display:none;
}

.tree li:last-child:before{
border-radius:0;
}

ul.tree>li:first-child::before {
display:none;
}

ul.tree>li:first-child::after {
border-radius:0;
}

.tree li a {
padding:2px 5px;
position: relative;
bottom: 5px;
font-size: 13px;
}

label.checkBox-label{
display: block;
position: relative;
cursor: pointer;
font-size: 13px;
    margin-bottom: 0;
    position: relative;
    bottom: 3px;
    right: 5px;
}

label.checkBox-label:before {
background-color: transparent;
    /* color: #e40000; */
    color: #893168;
    content: " ";
    display: block;
    border-radius: 50%;
    position: absolute;
    top: -1px;
    left: -5px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 28px;
    transition-duration: 0.4s;
    transform: scale(7px);
    font-size: 2.5rem;
    font-weight: 900;
    transform:scale(0);
}

:checked + label.checkBox-label {
border-color: #ddd;
}

:checked + label.checkBox-label:before {
    content: "✓";
    background-color: transparent;
    transform: scale(1);
}

input.inputcheckbox[type="checkbox"]{
display: none;
}

.checkBox-label span {
    padding-right: 0.25rem;
}


.datepicker {
    z-index:1100 !important;
}

#modal-groups li.selectedValue{
    background-color:#EFF2F5;
}


#modal-groups .scc-box td {
    user-select: none; 
    border-bottom: thin solid rgb(137, 207, 240);
    list-style-type: none;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-weight: 400;
}

#modal-groups .scc-box tr {
    padding-left: 0rem;
}

#modal-groups .scc-box tr.selectedValue{
	background-color:#EFF2F5;
}

#modal-groups .card-body.scc-box{
    height: 320px;
}


.scc-box::-webkit-scrollbar {
    width: 10px;               /* width of the entire scrollbar */
  }
  .scc-box::-webkit-scrollbar-track {
    background: #f7f7f7;        /* color of the tracking area */
  }
  .scc-box::-webkit-scrollbar-thumb {
    background-color: #dcdcdc;    /* color of the scroll thumb */
  }

html, body {
height: 100%;
}
body {
    display: flex !important; 
    flex-direction: column !important;
}
.footer {
    flex-shrink: 0;
}

#scenarios-loader {
    border: 12px solid #f3f3f3; 
    border-radius: 50%; 
    border-top: 12px solid #1c2540; 
    width: 70px; 
    height: 70px; 
    animation: spin 1s linear infinite; 
}

@keyframes spin { 
    100% { 
        transform: rotate(360deg); 
    } 
} 

#data-loader { 
    border: 12px solid #f3f3f3; 
    border-radius: 50%; 
    border-top: 12px solid #1c2540; 
    width: 70px; 
    height: 70px; 
    animation: spin 1s linear infinite; 
} 

@keyframes spin { 
    100% { 
        transform: rotate(360deg); 
    } 
} 

.center { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 

.fa-carbon:before {
    content: "CO2";
    font-family: sans-serif;
    font-size: small;
    font-weight: 900;
    /* font-family: 'icomoon' !important; */
}


.btn-size{
    font-size: 20px;
}

.btn-style{
    box-shadow:none !important;
}

.card-title{
    color:#0a8afb;
    font-size:20px;
}

.card-text{
    color: rgb(99, 101, 102);
    font-size: 16px;
    font-weight: 500;
    word-wrap: break-word;
}
.title-text{
    color: rgb(62, 65, 68);
    font-size: 18px;
    font-weight: 500;
    word-wrap: break-word;
}

.list-style{
    list-style: none;
    display: flex;
    -moz-box-align: center;
    align-items: center;
    color: #4d5660;
}

.ul-style{
    flex-wrap: wrap; 
    -moz-box-align: center; 
    align-items: center; 
    margin-top: 4px; 
    font-size: 14px; 
    font-weight: 400; 
    padding-right: 80px; 
    bottom: 10px; 
    position: absolute;
}

.nav-tabs .nav-link {
    padding:0.5rem 2rem 0.5rem 2rem!important;
}

.nav-tabs{
    border-bottom: none !important;
}

.nav-item{
    border-bottom-width:2px !important;
    border-radius: 0 !important;
    text-align: left;
}

.nav-tabs .nav-link.active {
    background-color:transparent !important;
    border-bottom: #1c2540 solid !important;
}

#tag-container {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
  }
  
  #tag-container input {
    border: none;
    outline: none;
    flex: 1;
    margin: 5px 0;
  }
#update-container {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
  }
  
  #update-container input {
    border: none;
    outline: none;
    flex: 1;
    margin: 5px 0;
  }
  
  .tag {
    display: flex;
    align-items: center;
    background-color: #1c2540;
    color: white;
    border-radius: 15px !important;
    padding: 5px 10px;
    margin: 5px;
    font-size: 14px;
  }
  
  .tag .remove {
    cursor: pointer;
    margin-left: 8px;
    font-weight: bold;
  }

  .tag-pill{
    background-color: #1c2540;
    color: white !important;
    border-radius: 15px !important;
    padding: 5px 10px;
    margin: 5px;
    font-size: 14px;
  }

  /* .tag-pill a:hover{
    color:white !important;
  } */