@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

/* width */
::-webkit-scrollbar {
    height: 0.6rem;
    width: 0.6rem;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #88cbbe;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

span,
select,
input,
label,
.swal2-title,
.swal2-html-container {
    font-family: 'Roboto', sans-serif;
}

.hide {
    display: none !important;
}

.modal-footer {
    justify-content: space-between;
}

.activeTr {
    background-color: #198754;
    color: white;
    font-weight: bold;
}

#sendCRM {
    /* margin: 5px auto; */
    margin: 0px 20px;
    display: block;
    color: white;
    font-weight: bold;
    width: 25%;
    background: #2D9F88;
    border-color: #2D9F88;
}

.invalid {
    border-color: #dc3545;
}

.form-select:focus,
.form-control:focus {
    border-color: #198754;
    outline: 0;
    box-shadow: 0 0 0 0.25rem #2D9F8859;
}

.form-control#validationData :focus {
    border-color: var(--bs-modal-border-color);
    box-shadow: 0 0 0 0.25rem var(--bs-modal-border-color);
    outline: 0;
}

.btn-primary {
    border-color: #006cca;
    background-color: #2D9F88;
}

.btn-primary:hover {
    border-color: #006ac7;
    background-color: #269aff;
}

.swal2-confirm.swal2-styled {
    background-color: #2D9F88;
}

.no-scroll {
    overflow: hidden;
}

.currentStep {
    text-align: center;
    font-weight: bold;
    font-size: 1.6rem;
    color: #2D9F88;
}

.message {
    color: #58595b;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    margin: 5vh;
}

.message #ending_google {
    display: none;
}

.message #final_acknowledgment {
    display: none;
}

.message #final_acknowledgment_cloud {
    display: none;
}

.btn-holder {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

#back-button {
    display: none;
    color: #2D9F88;
    font-weight: bold;
    width: 25%;
    background: #dfdfdf;
    border-color: #2D9F88;
}

.apply-after {
    &::after {
        content: '';
        flex: 0.5;
    }
}

.select2-container {
    max-width: 100%;
    min-width: 100%;
}

#progressSphere {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    margin-top: 2%;

}

.step {
    height: 45px;
    opacity: 0.1;
}

.spacer {
    width: 100px;
}

.currentStep::after {
    content: '';
    border-bottom: 2px solid #2D9F88;
    width: 10%;
    display: block;
    margin: 0 auto;
}

.track-button button {
    /* color: black; */
    width: 12%;
    margin: 0 10px 0 10px;
}

.track-button button:last-child {
    background-color: #2D9F88;
}

.form-check-input:checked {
    background-color: #2D9F88;
    border-color: #2D9F88;
}

table select.form-select.mt-2 {
    width: 100px;
}

td div:has(select.form-select) {
    display: flex;
    justify-content: left;
    align-items: center;
}

#securityPath td{
    border-bottom: 1px solid;
    border-color: #a7a7a7;
}

#pre_sales,
#post_sales {
    text-align: center;
    font-weight: normal;

    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-color: #a7a7a7;
    padding: 2px;
}

#pre_sales {
    color: #57595b;
    background-color: #95dad0;
}

#post_sales {
    color: #fff;
    background-color: #00a088;
}

#securityPath td:nth-child(4){
    border-left: 1px solid;
    border-color: #a7a7a7;
}

#securityPath td:nth-child(9){
    border-left: 1px solid;
    border-color: #a7a7a7;
}

.green-text{
    color: #2D9F88;
    font-weight: bold;
    font-size: 1.2rem;
}

.accent::after {
    content: '';
    border-bottom: 2px solid #2D9F88;
    padding-top: 10px;
    width: 10%;
    display: block;
    margin: 0 auto;
}

.rate-guide-flex{
    display: flex;
    align-content: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

td[scope="row"] {
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-color: #a7a7a7;
    padding: 2px;
    padding-right: 0.7rem;
}

th[scope="col"] {
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-color: #a7a7a7;

    text-align: center;
    font-weight: normal;

    background-color: #eeefee;
    padding: 2px;
}

@media (min-width:768px) {
    div.header-green.p-2{
        margin-top: -45px;
    }
}

.header-green.p-2{
    background-color: #2D9F88;
}

.tooltip-icon:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="17" width="17" viewBox="0 0 512 512"><path fill="%232D9F88" d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>');
    padding-left: 7px;
}