/*** dateRangePicker ***/
.daterangepicker {
    background-color: var(--background-S360) !important;
    color: var(--color-text-S360)  !important;;
    border: 0.5px solid var(--color-border-secundary-S360)  !important;;
    border-radius: var(--border-radius-S360)  !important;;

    &::before{
    border-bottom: 7px solid var(--color-border-secundary-S360)  !important;;
    }

    & .drp-calendar{
    background-color: var(--background-S360);
    border-left: none !important;


    & .calendar-table{
    border: none;
        background-color: var(--background-S360);

        & .table-condensed{
        & .prev, .next{
            &:hover{
            background-color: var(--item-hover-S360);
            }
            & span{
            border: solid var(--color-text-S360);
            border-width: 0 2px 2px 0;
            }
        }

        & td{
            &.off, &.off.start-date, &.off.end-date{
            background-color: var(--color-disabled-secundary-S360);
            }

            &.off.disabled{
            background-color: var(--background-S360);
            }


            &.available:hover{
            background-color: var(--color-date-hover-S360);
            }

            &.in-range{
            background-color: var(--color-date-in-range-S360);
            color: var(--color-text-S360);
            }

            &.end-date, &.start-date{
            background-color: var(--suite-primary-S360);
            color: var(--color-text-contraste-S360);
            }

            &.off.in-range{
            background-color: var(--color-date-in-range-S360);
            }

            &.off.available{
            background-color: var(--background-S360);
            &:hover{
                background-color: var(--color-date-hover-S360);
            }
            }

            &.active{
            background-color: var(--suite-primary-S360) !important;
            &:hover{
                background-color: var(--suite-primary-S360) !important;
            }
            }
        }

        }
    }
    }

    & .ranges{
    border-right: 0.5px solid var(--color-border-secundary-S360);
    margin: 0px !important;
    padding-top: 8px;
    padding-bottom: 4px;
    & ul{
        & li{
        margin-right: 3px;
        margin-left: 3px;
        border-radius: var(--border-radius-S360)  !important;;
        &:hover{
            background-color: var(--item-hover-S360)  !important;;
        }
        }
        & .active{
        background-color: var(--color-item-select-S360)  !important;;
        color: var(--color-text-S360);
        }

        & li:hover.active{
        background-color: var(--color-item-select-S360)  !important;;
        }
    }
    }


    & select{

    background-color: var(--background-S360) !important;
    border-radius: var(--border-radius-S360) !important;
    border-color: var(--color-border-S360) !important;
    color: var(--color-text-S360) !important;

    &:focus > option:checked {
        background: var(--color-item-select-S360) !important;
        color: var(--color-text-S360)  !important;
    }

    &::-webkit-scrollbar-track{
        background-color: transparent;
    }

    &::-webkit-scrollbar{
        height: 6px;
        width: 6px;
    }

    &::-webkit-scrollbar-thumb{
        border-radius: 300px;
        background-color: #999;
    }
    }

    & .drp-buttons{
    border-top: 1px solid var(--color-border-secundary-S360) !important;
    & .drp-selected{
        font-size:var(--font-size-large-S360);
        font-weight: var(--font-weight-large-S360);
    }
    & button{
        border: none;
        border-radius: var(--border-radius-S360);
        font-weight: var(--font-size-normal-S360) !important;

        &.btn-default{
        background-color: var(--color-error-S360);
        color: white;
        &:hover{
            background-color: var(--color-error-hover-S360);
        }
        &:active{
            background-color: var(--color-error-active-S360);
        }
        }

        &.btn-primary{
        background-color: var(--color-bnt-suscess-S360);
        color: white;
        &:hover{
            background-color: var(--color-bnt-suscess-hover-S360);
        }
        &:active{
            background-color: var(--color-bnt-suscess-active-S360);
        }
        }
    }

  }
}


/*** tooltip ***/

.tooltip-opc{
	position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: .875rem;
  word-wrap: break-word;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;

	&.show {
		opacity: .9;
	}

	&.bs-tooltip-auto[x-placement^=top] {
		padding: .4rem 0;
	}

	&.bs-tooltip-top {
		padding: .4rem 0;
	}

	& .arrow {
		position: absolute;
		display: block;
		width: .8rem;
		height: .4rem;
	}

	.tooltip-inner {
		max-width: 200px;
		padding: .25rem .5rem;
		color: var(--color-textPhantom-tooltip);
		text-align: center;
		background-color: var(--color-phantom-tooltip);
		border-radius: .25rem;
	}

}

.tooltip-opc .arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.bs-tooltip-top .arrow {
  bottom: 2px;  /* Adjust as needed to fit the tooltip */
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 5px 0 5px;
  border-color: var(--color-phantom-tooltip) transparent transparent transparent;
}

.bs-tooltip-bottom .arrow {
  top: -5px;  /* Adjust as needed to fit the tooltip */
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent var(--color-phantom-tooltip) transparent;
}

.bs-tooltip-right .arrow {
  left: -5px;  /* Adjust as needed to fit the tooltip */
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px 5px 5px 0;
  border-color: transparent var(--color-phantom-tooltip) transparent transparent;
}

.bs-tooltip-left .arrow {
  right: -5px;  /* Adjust as needed to fit the tooltip */
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent var(--color-phantom-tooltip);
}