/*
** Filename: style.css
** Author: Aldair Cajicua
** Year: 2023
** Description: Ficheiro de estilo para o website S7 Design
*/

:root {
    --bg-opacity: 1;
    --s7-vermelho: 203 0 0;
    --dark-s7-orange: 130 28 23;
    --s7-yellow: 255 163 0;
    --s7-pink: 255 46 81;

    --drawer-width: 30vw;
    --white: rgb(255 255 255 / var(--bg-opacity));
    --mdb-light-rgb:rgb(216 216 216 / 50%);
    --bs-nav-link-color: black;
}

.bg-main{ background-color: rgb(var(--s7-vermelho) / var(--bg-opacity));}
.bg-main:hover{ background-color: rgb(var(--dark-s7-orange) / var(--bg-opacity));}
.bg-yellow{ background-color: rgb(var(--s7-yellow) / var(--bg-opacity));}
.bg-pink{ background-color: rgb(var(--s7-pink) / var(--bg-opacity));}

.s7-text-small-1 { font-size: .6em; }
.s7-text-small-2 { font-size: .8em; }
.s7-text-small-3 { font-size: 1em; }

.border-transparent {
    border-color: transparent !important;
}

main.active {
    background-color: rgb(var(--mdb-light-rgb)/ var(--bg-opacity));
}

div#cabucado .carousel-indicators li {
    height: 0.5em !important;
    width: .5em;
    border-radius: 50%;
}

a, a.nav-link {
    color: var(--bs-nav-link-color) !important;
}

.load td div {
    width: 7em;
    height: 7em;
    border-width: 1em !important;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: rgb(239, 239, 239) !important;
    color:black !important
}

.nav-pills .nav-link {
    color: #777777 !important;
}

.header.title {
    background-color: rgb(88 85 85);
}
.title {
    display: block;
    font-size: 1.2em;
    width: 100%;
}
.slide-control {
    height: 1.5em;
    width: 3em;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    border: 1px solid;
    border-color: rgb(0 0 0 / 50%);
}

.slide-control:before {
    --bg-opacity: .5;
    content: '';
    left: 3px;
    margin: auto 0;
    width: 1em;
    height: 1em;
    cursor: pointer;
    border-radius: 50%;
    position: absolute;
    background-color: rgb(0 0 0 / var(--bg-opacity));
    transition: 400ms linear;
}

.switch-toggle {
    z-index: 99;

}

.switch-toggle:checked+.slide-control:before {
    transition: all 700ms ease;
    transform: translateX(25px);
    -webkit-transform: translateX(25px)
}

.switch-toggle:checked+.slide-control {
    background-color: rgb(var(--s7-pink) / var(--bg-opacity));
    border: 1px solid;
    border-color: rgb(var(--s7-pink) / var(--bg-opacity)) !important;
}

.switch-toggle:checked+.slide-control:before {
    background-color: white;
}

/**
**/

.lists {
    display: inherit;
    /* flex-direction: column!important; */
    /* flex-grow: 1; */
}

.lists>.col-lg-4 {
    width: 50% !important;
}

.lists>.col-lg-4>.card>.img-cover {
    /* height: 195px; */
    width: 195px;
}

.lists>.col-lg-4>.card {
    flex-direction: row !important;
}

.lists>.col-lg-4>.card>.img-cover>a>img {
    height: 100%;
}

.lists>.col-lg-4>.card>.header {
    width: 100%;
}

.lists>.col-lg-4>.card>.img-cover>a {
    display: block;
    width: 195px;
}

.lists>.col-lg-4>.card>.pd-container { display: inherit; }

.lists>.col-lg-4>.card>.pd-container>.s7-text-small-2 {
    padding-bottom: 0 !important;
}
.scrollTop {
    bottom: 1.6em !important;
    right: 1.5em !important;
    opacity: .4;
    transition: all 1s ease-in-out;
}

.scrollTop:hover {
    opacity: 1;
    transition: all 1s ease-in-out;
}

.drawer {
    --drawer-width: 30vw;
    position: fixed;
    top: 0 !important;
    left: 0;
    animation: slideWidth 150ms ease-in;
    height: 100%;
    background-color: var(--white);
    box-shadow: 3px 0px 12px 0px rgb(0 0 0 / 25%);
    transition: Width 2s cubic-bezier(0.19, 1, 0.22, 1);
    width: var(--drawer-width);
    &.ocultar {
        width: 0vw;
        transition: Width 2s cubic-bezier(0.19, 1, 0.22, 1);
        animation: reverseSlideWidth 2s ease-out;
    }
}

.attr {
    align-items: center;
    justify-content: center;
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, 10%);
    backdrop-filter: blur(5px);
    z-index: 3;
}

.attr.active {
    background-color: rgba(0, 0, 0, 0.55);
    display: flex;
    overflow: hidden;
}

@keyframes slideWidth {
     0% { width:0vw;}
   100% { width:var(--drawer-width)}

}
@keyframes reverseSlideWidth {
    0% { width:var(--drawer-width)}
    100% { width:0vw;}

}

@media only screen and (max-width:575.36px) {
    .drawer {
        --drawer-width: 100vw;
        /*width: 100vw*/
    }
    
    a.navbar-brand {
        width: 130px !important;
        display: flex;
        padding-top: 2rem;
        text-align: center;
        justify-content: center;
        margin: auto;
    }
    .this.row>* {
        width: unset !important;
        font-size: 9pt;
        padding:0;
    }
}