/*Fonts*/
@import "../fonts/Quicksand/quicksand.css";

/*Styles Pages*/
@import "Pages/Home.css";
@import "Pages/PrivacyPolicy.css";
@import "Pages/Support.css";
@import "Pages/Login.css";
@import "Pages/Register.css";
@import "Pages/LayoutApp.css";

/*Component APP*/
@import "Pages/ComponentOfApp/WhiteBoard.css";
@import "Pages/ComponentOfApp/Bookins.css";

@import "Pages/ComponentOfApp/Clients/Clients.css";
@import "Pages/ComponentOfApp/Clients/ListClients.css";
@import "Pages/ComponentOfApp/Clients/UpdateUser.css";
@import "Pages/ComponentOfApp/Clients/NewUser.css";

@import "Pages/ComponentOfApp/Feedbacks.css";
@import "Pages/ComponentOfApp/BulletinBoard.css";
@import "Pages/ComponentOfApp/MyBox/MyBox.css";
@import "Pages/ComponentOfApp/MyBox/MyDataBox.css";
@import "Pages/ComponentOfApp/MyBox/DaysLocked.css";
@import "Pages/ComponentOfApp/MyBox/TypeOfClass.css";
@import "Pages/ComponentOfApp/MyBox/Subscription.css";
@import "Pages/ComponentOfApp/MyBox/ClassOfWeek.css";
@import "Pages/ComponentOfApp/MyBox/Stadistics.css";
@import "Pages/ComponentOfApp/MyBox/BillSubscription.css";
/*Styles Shared Component*/
@import "Shared/Label.css";
@import "Shared/Input.css";
@import "Shared/Buttons.css";
@import "Shared/DisplayAlert.css";
@import "Shared/ModalCharge.css";
@import "Shared/Carousel.css";

/* Base styles */
:root {
    --dark_bronce: #866946;
    --mid_bronce: #B59B74;
    --ligth_bronce: #E7D5B7;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Quicksand','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    line-height: 1.6;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.page{
    height:100dvh;
}

/*Genericos*/


select {
    max-width: 350px;
    min-width:150px;
    border-radius: 10px;
    text-align: center;
    border: 2px solid var(--mid_bronce);
    display: block;
    height: 40px;
}
.active {
    transform: scale(1.1);
    transition: transform 0.5s ease;
    color:var(--dark_bronce);
}
h3{
    text-align:center
}

input, select, textarea {
    background-color: white !important;
    color: black !important;
    border: 1px solid var(--mid_bronce);
}

.validation-message {
    color: orangered !important;
}
.error{
    display:block;
    color:red;
    text-align:center;
}