:root {
    --transition-1: 0.25s ease-in-out;
    --sizzling-sunrise: hsl(51, 95%, 54%);
}

body.light_theme {
    --color-primary: black;
    --bg-primary: #F7F7F7;
    --bg-secondary: hsl(0, 0%, 100%);
    --bg-terciary: whitesmoke;
    --bg-quartenary: #EDEFEB;
    --bg-theme-btn: white;
    --bg-services: #125c7e;
    --bg-header: #F7F7F7;
    --color-crud-icons: black;
    --bg-hamburger: black;
}

body.dark_theme {
    --color-primary: white;
    --bg-primary: hsl(0, 0%, 12%);
    --bg-secondary: hsl(0, 0%, 19%);
    --bg-terciary: hsl(0, 0%, 19%);
    --bg-quartenary: hsl(0, 0%, 19%);
    --bg-theme-btn: hsl(0, 0%, 19%);
    --bg-services: hsl(0, 0%, 12%);
    --bg-header: hsl(0, 0%, 31%);
    --color-crud-icons: white;
    --bg-hamburger: white;
}

body {
    background: var(--bg-terciary);
    transition: var(--transition-1);
    color: var(--color-primary);
}

.icons {
    font-size: 30px;
    cursor: pointer;
}

.icons:hover {
    opacity: 80%;
}

.icon-box .icons {
    cursor: default;
}

.icon-box .icons:hover {
    opacity: 100%;
}

@media (max-width: 992px) {
    .cid-tJS6tZXiPa .icons {
        display: none;
    }
    .cid-tJS6tZXiPa .navbar-collapse {
        background-color: var(--bg-header);
    }
}

@media (max-width: 990px) {
    .copyicon{
        font-size: 6rem !important;
    }
    .desktop-profile {
        display: none !important;
    }
    .mobile-profile {
        display: block !important;
    }

    .carrossel-home{
        height: 20rem !important;
    }

    .img-carrossel{
        height: 20rem;
    }
}

@media (min-width: 991px) {
    .mobile-profile {
        display: none !important;
    }
    .copyicon {
        font-size: 3rem !important;
    }
    .carrossel-home{
        height: 60rem !important;
    }
    .img-carrossel{
        height: 60rem !important;
    }
}

@media (max-width: 767px) {
    .logo{
        height: 5rem !important;
    }
}

.theme-btn {
    padding: 4px;
    width: 48px;
    background: var(--bg-theme-btn) !important;
    border-radius: 100px;
    transition: var(--transition-1);
}

.theme-icon {
    position: relative;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    box-shadow: inset 9px -6px var(--color-primary);
    transition: var(--transition-1);
    display: block;
}

.theme-btn.active .theme-icon {
    left: 20px;
    box-shadow: inset 20px -20px var(--sizzling-sunrise);
}

.cid-tPQ9sLdeje {
    background-color: var(--bg-secondary);
}

.cid-tMlEXTHLbS {
    background-color: var(--bg-services);
    color: black;
}

.cid-tJS9pBcTSa {
    background-color: var(--bg-secondary);
}

.cid-tLdYHD757A {
    background-color: var(--bg-secondary);
}

.cid-tJS9NNcTLZ {
    background-color: var(--bg-services);
}

.btn-links{
    font-size: 1.5em;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .btn-links {
        font-size: 1.2em;
    }

    .user{
        font-size: 0.8em !important;
    }
    .logo{
        height: 4rem !important;
    }
}


@media (min-width: 1200px) {
    .btn-links {
        font-size: 1.6em;
    }
}

@media (min-width: 1400px) {
    .btn-links {
        font-size: 1.7em;
    }
}

label {
    margin-left: 20px;
}

.passwordinput {
    margin-bottom: 12px !important;
}

#hint_id_password1 {
    color: var(--color-primary) !important;
    opacity: 70%;
}

#hint_id_username {
    color: var(--color-primary) !important;
    margin-left: 20px;
    margin-top: 5px;
    opacity: 70%;
}

#hint_id_password2 {
    color: var(--color-primary) !important;
    opacity: 70%;
}

.cid-tJS9NNcTLZ {
    display: flex;
    bottom: 0 !important;
}

.form-login {
    background-color: var(--bg-terciary);
}

.card-txt {
    color: black;
}

.cid-tQcZ7TJGNn {
    background-color: var(--bg-secondary);
}

.cid-tQcXkuPmsA {
    background-color: var(--bg-secondary);
}

.cid-tQcYAUOhvJ {
    background-color: var(--bg-secondary);
}

.cid-tJS9NNcTLZ .social-row .soc-item a .mbr-iconfont {
    color: var(--bg-services);
}

.crud-icons {
    color: var(--color-crud-icons) !important;
}

.cid-tPVE67e4kU {
    background-color: var(--bg-services) !important;
}

.cid-tPVEG1qAg0 {
    background-color: var(--bg-secondary) !important;
}

.cid-tPVE67e4kU .topbg {
    background-color: var(--bg-secondary);
}

.cid-tQd3Fxn5iO {
    background-color: var(--bg-secondary);
}

.cid-tJS6tZXiPa .container {
    background-color: var(--bg-header);
}

.btn-header {
    color: var(--color-primary) !important;
}

.dropdown-shows {
    background-color: var(--bg-header) !important;
}

.hamburger span {
    background-color: var(--bg-hamburger);
}

.alert.alert-danger {
    background-color: #dc3545 !important;
    color: white !important;
}

.cid-tQiZwKdxH7 {
    background-color: var(--bg-quartenary) !important;
}

.cid-tQj1MWTTwS {
    background-color: var(--bg-quartenary) !important;
}

.cid-tQj5WmtEmK {
    background-color: var(--bg-header);
}

.cid-tQjeqrFqk1 {
    background-color: var(--bg-header);
}

.cid-tQcWxa789K{
    background-color: var(--bg-primary) !important;
}

.cid-tQd3laBEDC{
    background-color: var(--bg-secondary) !important;
}

.quantity-input {
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantity-btn {
    background-color: #f0f0f0;
    border: none;
    color: #333;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.quantity-btn:hover {
    background-color: #e0e0e0;
}

.inputquantity {
    -moz-appearance: textfield; /* Firefox */
    appearance: textfield;
    border: none;
    border-radius: 0;
    text-align: center;
    font-size: 1rem;
    width: 3rem;
    padding: 0.5rem;
}

input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.copyicon{
    margin-top: -8px;
    cursor: pointer !important;
}
.copyicon:hover{
    opacity: 70% !important;
}

.show-card{
    background-color: var(--bg-terciary);
    color: var(--color-primary);
}

.forms-input {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.styled-box {
    height: 300px;
    color: black;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    color: var(--color-primary);
    background-color: var(--bg-theme-btn) !important;
}

@media (min-width: 1201px) {
    .styled-box{
        flex-basis: 20%;
    }
}

.styled-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.icon-background {
    background-color: rgb(255, 219, 61);
    /* background-color: rgba(255, 217, 0, 0.479); */
    border-radius: 50%;
    width: 90px;
    height: 90px;
    padding: 15px;
    display: inline-block;
    margin-bottom: 15px;
}


.card-titles {
    font-size: 155%;
    color: rgb(255, 136, 0);
    /* color: rgb(69, 87, 255); */
    margin-bottom: 20px;
}