/* -------------------------------------------------------------------------- */
/* Página pool designs — escopo principal */
/* -------------------------------------------------------------------------- */
.fiberglassPoolsAndSpas {
    color: var(--color-primary);

    & h1,
    & h2,
    & h3 {
        margin: 0;
    }

    & h2,
    #learnMore h3 {
        font-size: var(--font-size-heading-3);
    }

    & #text-secondary h2 {
        font-family: var(--font-family-book);
    }

    & .mt-titulo {
        margin-bottom: 2rem;
        margin-top: 2.5rem;

        & h2 {
            margin-bottom: 0;
            color: #494b4c;
        }

        & h3,
        #mt-titulo h3 {
            margin-bottom: 0;
        }
    }

    & .texto-topo {
        margin-top: 3rem;
        text-align: justify;
    }

    & .linha-icones {
        min-height: 165px;
    }

    & .banner {
        min-height: 385px;
    }

    & .bloco,
    & img {
        cursor: pointer;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

    & .titulo-bloco {
        margin-top: 2.5rem;
    }

    & .titulo-bloco-request-qoute {
        margin-top: 1.5rem;
    }

    & .tab-icones {
        & .nav-link {
            border: 1px solid #494b4c;
            color: #494b4c;
            text-align: center;
            cursor: pointer;
            background-color: #fff;
            font-size: 12px;
        }

        & .spa {
            margin: 0 20px;
        }

        & .active {
            background-color: #494b4c;
            color: #fbdbdb;
        }
    }

    & #icons {
        text-align: center;

        & img {
            width: 100%;
            margin-right: 20px;
            cursor: pointer;

            &:last-child {
                margin-right: 0;
            }
        }
    }

    & .linha-icones,
    & #icons,
    & .banner,
    & #models,
    & #form,
    & .linha-projetos,
    & .abaoutFiberPoos,
    & .melhore-tua-piscina,
    & .linha-selecao-cor {
        margin-top: 2rem;
    }

    & .textInfo {
        color: initial;
        text-align: center;
    }

    & .melhore-tua-piscina {
        & .blocoTanningLedge,
        & .blocoAmbosAcessorios,
        & .blocoSpaConnect {
            cursor: pointer;
        }

        & .bloco {
            padding: 20px;

            & p {
                margin: 0;
            }
        }

        & .ativo {
            background-color: #e4e7e8;
        }

        & .img {
            margin-bottom: 15px;
        }

        & .titulo {
            font-size: var(--font-size-medium-100);
            padding-left: 1.3rem;
        }

        & .nome-produto {
            padding-left: 0;
            text-align: center;
        }

        & .botao-check {
            padding-right: 20px;
        }
    }

    & .tres-opcoes .melhore-tua-piscina .titulo {
        font-size: 17px !important;
    }

    & .admin-form .block {
        text-align: right;
        margin-top: 1rem;
    }

    & input[type="radio"] {
        border-color: var(--color-primary);
        background-color: #fff;
        width: 1.5rem;
        height: 1.1rem;
        cursor: pointer;

        &::before {
            border-color: var(--color-primary);
            background-color: #fff;
            width: 1.5rem;
            height: 1.5rem;
        }

        &::after {
            background-image: none;
            background-color: var(--color-primary);
            border-radius: 50rem;
        }
    }
}

/* -------------------------------------------------------------------------- */
/* Banner — loading */
/* -------------------------------------------------------------------------- */
#bannerPhoto .loadingImg,
#bannerPhoto2 .loadingImg {
    background: #fff;
    opacity: 0.6;

    & .spinner-grow {
        margin-top: 25%;
    }
}

/* -------------------------------------------------------------------------- */
/* Escolha de cor (#choosecolor) */
/* -------------------------------------------------------------------------- */
#choosecolor {
    margin-top: 3rem;
}

@media (max-width: 767.98px) {
    #choosecolor .cores-produtos.row {
        justify-content: center;
    }
}

/* -------------------------------------------------------------------------- */
/* Cores / miniaturas (.cores-produtos) */
/* -------------------------------------------------------------------------- */
.coresproduto h3 {
    color: var(--color-primary);
    margin: 0;
    font-size: 1.5rem;
}

.cores-produtos {
    & > .col {
        padding-top: 20px;
        padding-left: 12px;
        padding-right: 12px;
    }

    & .cores-produtos-thumb {
        max-width: 180px;
        max-height: 180px;
        width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        display: block;
        object-fit: contain;
    }

    & .bloco {
        position: relative;
        text-align: center;
        cursor: pointer;
        padding: 1vw;

        & img {
            margin-bottom: 15px;
            user-select: none;
            -moz-user-select: none;
            -webkit-user-drag: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            width: 160px;
            height: 160px;
        }

        & span {
            transform: translate(-50%, 1%);
            border-bottom: none;
            padding: 5px 0;
            font-family: "ClanOT-Book", sans-serif;
            color: #666;
            font-size: 22px;
        }
    }

    & .active {
        box-shadow: 1px 1px 10px #c3c3c3;
        background: #ddd;
    }
}

/* -------------------------------------------------------------------------- */
/* Ícones (#icons) */
/* -------------------------------------------------------------------------- */
#icons {
    & .bordaLateral span {
        width: 50%;
        height: 90%;
        display: flex;
        margin-top: 2rem;
        border-right: 1px solid #858c8b;
    }

    & .linha-icon {
        display: inline-block;
        width: 12%;

        & p {
            font-size: 11px;
            margin-bottom: 0;
            padding-bottom: 5px;
        }
    }
}

#iconsPools .active,
#iconsTanningLedge .active,
#iconsSpas .active {
    background-color: #ddd;
}

/* -------------------------------------------------------------------------- */
/* Tamanhos (#tableSize) */
/* -------------------------------------------------------------------------- */
#tableSize {
    margin-bottom: 0;

    & .em-breve {
        border-color: #f39c12;
        background-color: #f39c12;
        color: #fff;
        padding: 0.3rem 1rem;
        margin-left: 0.5rem;
    }
}

/* -------------------------------------------------------------------------- */
/* Spa / tanning / upgrades */
/* -------------------------------------------------------------------------- */
.blocoSpaConnect {
    margin-top: 2.5rem;
}

.blocoTanningLedge h3,
.blocoSpaConnect h3 {
    font-size: 1.3rem;

    & .admin-form {
        float: right;
        width: 120px;
    }
}

.marginsubtitle {
    margin-bottom: 2.5rem;
}

.tituloCarousel {
    font-size: 2rem;
    margin-left: 2.5rem;
}

.prevNext a {
    font-size: 5rem;
    color: #c2c2c2;
}

/* -------------------------------------------------------------------------- */
/* Carrossel (#carousel / #carouselManual) */
/* -------------------------------------------------------------------------- */
#carousel,
#carouselManual {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;

    & .carousel-indicators {
        display: none;
    }

    & .carousel-item {
        width: auto;
    }

    & .carousel-control-prev-icon {
        left: -45px;
        position: absolute;
    }

    & .carousel-control-next-icon {
        right: -45px;
        position: absolute;
    }

    & .titleProject {
        display: inline-block;
        padding: 0 15px;
        cursor: pointer;
        color: rgb(212, 212, 212);
        font-weight: 100;
    }

    & .enable {
        color: #a5a5a5 !important;
        font-weight: 700;
    }
}

.carousel-control-next,
.carousel-control-prev {
    width: 0 !important;
}

.titleBlue {
    color: #00568a;
}

.titleCinza {
    color: #494b4c;
}

/* -------------------------------------------------------------------------- */
/* Modelos (#models) */
/* -------------------------------------------------------------------------- */
#models {
    & .table {
        & th,
        & td {
            font-family: "ClanOT-Book", sans-serif !important;
            color: var(--color-primary);
        }

        & th {
            font-size: 1.575rem;
            padding-top: 0;
        }

        & td {
            font-size: 1.25rem;
            line-height: 2.3rem;
            padding: 0.5rem;
        }

        & tbody tr:nth-child(odd) td {
            background-color: #e4e7e8;
        }

        tr h3{
            text-align: center;
        }
    }

    & .custom-control-label {
        cursor: pointer;

        &::before {
            border-color: var(--color-primary);
            background-color: #fff;
            width: 1.5rem;
            height: 1.5rem;
        }

        &::after {
            top: 0.5rem;
            left: -1.25rem;
        }
    }

    & .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
        background-image: none;
        background-color: var(--color-primary);
        border-radius: 50rem;
    }
}

/* -------------------------------------------------------------------------- */
/* Formulário (#form) */
/* -------------------------------------------------------------------------- */
#form {
    & input,
    & textarea,
    & select {
        box-shadow: none;
        border-radius: 0;
        border: none;
        background-color: var(--color-input-bg);
        color: var(--color-primary);
        padding: 9px 10px;
    }

    & textarea {
        height: 7rem;
    }

    & button.button-submit {
        background-color: #28a745;
        color: #fff;
    }

    & .baixarCatalogo {
        border-color: #f39c12;
        background-color: #f39c12;
        color: #fff;

        & img {
            margin-right: 10px;
            height: 20px;
        }
    }

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

.abaoutFiberPoos {
    color: initial;

    & h3 {
        font-size: 1.2rem;
    }

    & div {
        line-height: 1.8rem;
    }
}

.linha {
    top: 1rem;
}

/* -------------------------------------------------------------------------- */
/* Download / manual */
/* -------------------------------------------------------------------------- */
#download {
    align-items: center;
    min-height: 200px;

    & .nameModel {
        font-size: 0.8rem;
        min-height: 1.6rem;
    }

    & .title {
        font-size: 2rem;
        color: #494b4c;
    }
}

#download img,
#downloadMobile img {
    max-width: 190px;
    max-height: 105px;
}

#download .img-manual,
#downloadMobile .img-manual {
    max-width: 70px;
    max-height: 105px;
}

#downloadMobile img.img-fluid {
    margin-bottom: 20px;
    margin-top: 20px;
}

.mt-3-desk {
    margin-top: 1rem !important;
}

/* -------------------------------------------------------------------------- */
/* Media: até 1199px */
/* -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .tituloCarousel {
        margin-left: auto;
    }
}

/* -------------------------------------------------------------------------- */
/* Media: até 810px */
/* -------------------------------------------------------------------------- */
@media (max-width: 810px) {
    .cores-produtos .bloco {
        height: auto;
    }
}

/* -------------------------------------------------------------------------- */
/* Media: até 768px */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .mt-3-desk {
        margin-top: 0 !important;
    }

    .mt-titulo-primario {
        margin-top: 20px !important;
    }

    #models .custom-control-label {
        &::before {
            left: 0;
        }

        &::after {
            left: 0.25rem;
        }
    }

    #download .nameModel {
        min-height: 2.4rem;
    }

    #carousel .carousel-indicators,
    #carouselManual .carousel-indicators {
        display: flex;

        & li {
            border-radius: 50%;
            height: 0.65rem;
            width: 0.65rem;
            background-color: initial;
            border: 1px solid #fff;

            &.active {
                background-color: #fff;
            }
        }
    }

    #models .table td {
        font-size: 0.8rem;
        line-height: 2.3rem;
        padding: 0.5rem;
    }

    .custom-control {
        padding: 0 !important;
    }

    .fiberglassPoolsAndSpas {
        & .blocoSpaConnect {
            margin-top: 2rem;
        }

        & .tres-opcoes .blocoSpaConnect {
            margin-top: 0 !important;
        }

        & .tres-opcoes .melhore-tua-piscina .titulo {
            font-size: 11px !important;
        }

        & .admin-form .block {
            text-align: center;
        }

        & .melhore-tua-piscina .titulo {
            font-size: 15px;
        }
    }

    .updateThePoll .switch {
        margin: 0 auto;
    }

    .linha-projetos {
        & .carousel-control-next-icon {
            right: 0 !important;
        }

        & .carousel-control-prev-icon {
            left: 0 !important;
        }
    }
}

/* -------------------------------------------------------------------------- */
/* Media: até 512px */
/* -------------------------------------------------------------------------- */
@media (max-width: 512px) {
    .linhaEsquerda,
    .linhaDireita {
        display: none;
    }

    #carousel .carousel-control-prev-icon,
    #carouselManual .carousel-control-prev-icon {
        left: 0;
    }

    #carousel .carousel-control-next-icon,
    #carouselManual .carousel-control-next-icon {
        right: 0;
    }

    #carousel .carousel-item .isMobile,
    #carouselManual .carousel-item .isMobile {
        width: 80%;
        margin: auto;
    }

    #icons h3 {
        text-align: left;
    }

    #iconsPools .linha-icon,
    #iconsSpas .linha-icon,
    #iconsTanningLedge .linha-icon {
        width: calc(33% - 10px);
    }

    #iconsPools .linha-icon {
        margin-bottom: 1rem;
    }

    .fiberglassPoolsAndSpas {
        & h2{
            font-size: 18px !important;
        }
        & .banner {
            min-height: auto;
        }
        & #icons {
            text-align: left;

            & img {
                max-width: 100%;
                margin-right: 0;
            }
        }

        & .titulo-bloco-request-qoute {
            margin-top: 1.5rem;
        }

        & .abaoutFiberPoos h3 {
            text-align: center;
        }

        & .blocoTanningLedge,
        & .blocoAmbosAcessorios,
        & .blocoSpaConnect {
            position: relative;
        }

        & .tres-opcoes .melhore-tua-piscina .titulo {
            font-size: 20px !important;
        }

        & .updateThePoll {
            min-height: initial;
        }

        & .linha-icones,
        & #icons,
        & .banner,
        & #models,
        & #form,
        & .linha-projetos,
        & .abaoutFiberPoos,
        & .melhore-tua-piscina,
        & .linha-selecao-cor {
            margin-top: 1.5rem;
        }

        & .cores-produtos {
            margin-top: 1rem;
        }

        & .banner {
            margin-top: 1rem;
        }
    }

    #icons .linha-icon p {
        text-align: center;
    }

    #iconsSpas img {
        max-width: 120px;
    }

    .iconesPiscinas img {
        max-height: 66px !important;
        max-width: 100%;
        margin-bottom: 0;
    }

    .fiberglassPoolsAndSpas .cores-produtos .bloco img,
    .cores-produtos .bloco img {
        padding: 1rem 1rem 0.4rem;
        margin: 0;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

    .cores-produtos {
        & .col {
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 0px;
        }

        & .bloco {
            height: auto;
            padding: 0;
            & span {
                padding: 0;
                font-size: 14px;
            }

            & img{
                width: 105%;
                height: auto;
            }
        }
    }

    .coresproduto h3 {
        margin-bottom: 20px;
    }

    .cores-solidas {
        margin-bottom: 0;
    }

    .cores-granitadas .col-6:nth-child(3),
    .cores-granitadas .col-6:nth-child(4) {
        margin-bottom: 0;
    }

    .opcoesTanning .titulo-tanningladge,
    .blocoSpaConnect .titulo-spaconnect {
        margin-top: 10px;
        font-size: 18px;
    }

    .blocoTanningLedge h3,
    .blocoSpaConnect h3 {
        position: relative;

        & .admin-form {
            width: auto;
        }
    }

    .inputCheck {
        width: auto;
        position: absolute;
        right: 6px;
        top: 3px;
    }

    #tableSize .em-breve {
        font-size: 0.6rem;
    }

    .questions-pools h3 {
        font-size: 1rem;
    }

    #models thead h3 {
        font-size: 1.2rem;
    }

    .learnMoreGranitaTechnology {
        text-align: center;
    }
}

/* -------------------------------------------------------------------------- */
/* Media: 922px–1060px — carrossel projetos */
/* -------------------------------------------------------------------------- */
@media (min-width: 922px) and (max-width: 1060px) {
    .linha-projetos .carousel-control-next-icon {
        right: 0 !important;
    }

    .linha-projetos .carousel-control-prev-icon {
        left: 0 !important;
    }
}