﻿/* CLASS STYLES FOR DELYSUPER.COM - Current used styles for index.php, busqueda.php files */

/* a href */
a { text-decoration: none; /* Remove underline from links */ }

/* ALERT MESAGES */
.alert-message-error-red { border-radius: 15px; border: 4px solid #F5C6CB; background-color: #F8D7DA; text-align: center; padding: 40px; font-family: Arial; font-size: 28pt; color: #721C24; margin-left: 30px; margin-right: 30px; max-width: 790px; }
.alert-message-info-blu { border-radius: 15px; border: 4px solid #BEE5EB; background-color: #D1ECF1; text-align: center; padding: 40px; font-family: Arial; font-size: 28pt; color: #0C5460; margin-left: 30px; margin-right: 30px; max-width: 790px; }
.alert-message-success-grn { border-radius: 15px; border: 4px solid #C3E6CB; background-color: #D4EDDA; text-align: center; padding: 40px; font-family: Arial; font-size: 28pt; color: #155724; margin-left: 30px; margin-right: 30px; max-width: 790px; }

/* ALIGNMENT */
.alignment-1 { text-align: left; }
.alignment-2 { text-align: center; }
.alignment-3 { text-align: right; }

/* BACKGROUND COLORS */
.bg-color-1 { background-color: #EEEEEE; }

/* BODY */
.body { background-color: #ACB1B9; margin-top: 30px; margin-bottom: 30px; }

/* BUTTONS */
.button-xxsmall-1 { border-radius: 25px; background-color: #488C4C; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 43pt; color: #FFFFFF; cursor: pointer; height: 160px; width: 349px; }
.button-xxsmall-2 { border-radius: 25px; background-color: #F37735; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 43pt; color: #FFFFFF; cursor: pointer; height: 160px; width: 349px; }
.button-xxsmall-3 { border-radius: 25px; background-color: #ACB1B9; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 43pt; color: #FFFFFF; cursor: pointer; height: 160px; width: 349px; }
.button-xxsmall-4 { border-radius: 25px; background-color: #D32F2F; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 43pt; color: #FFFFFF; cursor: pointer; height: 160px; width: 349px; }

.button-xsmall-1 { border-radius: 25px; background-color: #488C4C; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 43pt; color: #FFFFFF; cursor: pointer; height: 160px; width: 386px; }
.button-xsmall-2 { border-radius: 25px; background-color: #F37735; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 43pt; color: #FFFFFF; cursor: pointer; height: 160px; width: 386px; }
.button-xsmall-3 { border-radius: 25px; background-color: #ACB1B9; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 43pt; color: #FFFFFF; cursor: pointer; height: 160px; width: 386px; }
.button-xsmall-4 { border-radius: 25px; background-color: #D32F2F; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 43pt; color: #FFFFFF; cursor: pointer; height: 160px; width: 386px; }

.button-small-1 { border-radius: 25px; background-color: #488C4C; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 44pt; color: #FFFFFF; cursor: pointer; height: 170px; width: 425px; }
.button-small-2 { border-radius: 25px; background-color: #F37735; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 44pt; color: #FFFFFF; cursor: pointer; height: 170px; width: 425px; }
.button-small-3 { border-radius: 25px; background-color: #ACB1B9; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 44pt; color: #FFFFFF; cursor: pointer; height: 170px; width: 425px; }
.button-small-4 { border-radius: 25px; background-color: #D32F2F; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 44pt; color: #FFFFFF; cursor: pointer; height: 170px; width: 425px; }

.button-medium-1 { border-radius: 25px; background-color: #488C4C; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 43pt; color: #FFFFFF; cursor: pointer; height: 180px; width: 790px; }
.button-medium-2 { border-radius: 25px; background-color: #F37735; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 43pt; color: #FFFFFF; cursor: pointer; height: 180px; width: 790px; }
.button-medium-3 { border-radius: 25px; background-color: #ACB1B9; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 43pt; color: #FFFFFF; cursor: pointer; height: 180px; width: 790px; }
.button-medium-4 { border-radius: 25px; background-color: #D32F2F; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 43pt; color: #FFFFFF; cursor: pointer; height: 180px; width: 790px; }

.button-large-1 { border-radius: 25px; background-color: #488C4C; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 45pt; color: #FFFFFF; cursor: pointer; height: 190px; width: 870px; }
.button-large-2 { border-radius: 25px; background-color: #F37735; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 45pt; color: #FFFFFF; cursor: pointer; height: 190px; width: 870px; }
.button-large-3 { border-radius: 25px; background-color: #ACB1B9; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 45pt; color: #FFFFFF; cursor: pointer; height: 190px; width: 870px; }
.button-large-4 { border-radius: 25px; background-color: #D32F2F; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 45pt; color: #FFFFFF; cursor: pointer; height: 190px; width: 870px; }

/* CHECK BOX */
.check-box { height: 70px; width: 70px; }

/* FLAG CONTAINER */
.flag-container { display: flex; flex-direction: column; align-items: center; width: 100%; }
.flag-font { text-align: center; font-family: Arial; font-weight: bold; font-size: 55pt; color: #818181; padding-left: 15px; padding-right: 15px; white-space: nowrap; }
.flag-table { width: 820px; margin: 0 auto; }

/* FONTS */
.bold { font-weight: bold; }

.font-help { padding-left: 35px; text-align: left; font-family: Arial; font-size: 32px !important; color: #818181; display: block; }

.font-xsmall-1 { font-family: Arial; font-size: 25pt; color: #999999; }
.font-xsmall-2 { font-family: Arial; font-size: 25pt; color: #000000; }
.font-xsmall-3 { font-family: Arial; font-size: 25pt; color: #009846; }
.font-xsmall-4 { font-family: Arial; font-size: 25pt; color: #FF8000; }
.font-xsmall-5 { font-family: Arial; font-size: 25pt; color: #FF0000; }

.font-small-1 { font-family: Arial; font-size: 30pt; color: #999999; }
.font-small-2 { font-family: Arial; font-size: 30pt; color: #000000; }
.font-small-3 { font-family: Arial; font-size: 30pt; color: #009846; }
.font-small-4 { font-family: Arial; font-size: 30pt; color: #FF8000; }
.font-small-5 { font-family: Arial; font-size: 30pt; color: #FF0000; }

.font-medium-1 { font-family: Arial; font-size: 35pt; color: #999999; }
.font-medium-2 { font-family: Arial; font-size: 35pt; color: #000000; }
.font-medium-3 { font-family: Arial; font-size: 35pt; color: #009846; }
.font-medium-4 { font-family: Arial; font-size: 35pt; color: #FF8000; }
.font-medium-5 { font-family: Arial; font-size: 35pt; color: #FF0000; }

.font-large-1 { font-family: Arial; font-weight: bold; font-size: 40pt; color: #999999; }
.font-large-2 { font-family: Arial; font-weight: bold; font-size: 40pt; color: #000000; }
.font-large-3 { font-family: Arial; font-weight: bold; font-size: 40pt; color: #009846; }
.font-large-4 { font-family: Arial; font-weight: bold; font-size: 40pt; color: #FF8000; }
.font-large-5 { font-family: Arial; font-weight: bold; font-size: 40pt; color: #FF0000; }

.font-title-1 { font-family: Arial; font-size: 50pt; color: #999999; }
.font-title-2 { font-family: Arial; font-size: 50pt; color: #000000; }
.font-title-3 { font-family: Arial; font-size: 50pt; color: #009846; }
.font-title-4 { font-family: Arial; font-size: 50pt; color: #FF8000; }
.font-title-5 { font-family: Arial; font-size: 50pt; color: #FF0000; }

/* FONT COLORS */
.font-color-4 { color: #009846; }
.font-color-5 { color: #FF8000; }

/* FORMS */
.form-input-sml { border-radius: 25px; border: 2px solid #ACB1B9; background-color: #F6F7F8; text-align: left; padding-left: 25px; font-family: Arial; font-size: 38pt; color: #818181; height: 150px; width: 351px; }
.form-select-sml { border-radius: 25px; border: 2px solid #ACB1B9; background-color: #F6F7F8; text-align: left; padding-left: 25px; font-family: Arial; font-size: 38pt; color: #818181; height: 155px; width: 381px; }

.form-input-med { border-radius: 25px; border: 2px solid #ACB1B9; background-color: #F6F7F8; text-align: left; padding-left: 25px; font-family: Arial; font-size: 38pt; color: #818181; height: 150px; width: 756px; }
.form-select-med { border-radius: 25px; border: 2px solid #ACB1B9; background-color: #F6F7F8; text-align: left; padding-left: 25px; font-family: Arial; font-size: 38pt; color: #818181; height: 155px; width: 786px; }
.form-textarea-med { border-radius: 25px; border: 2px solid #ACB1B9; background-color: #F6F7F8; text-align: left; padding-left: 25px; font-family: Arial; font-size: 35pt; color: #888888; height: 175px; width: 756px; }

/* IMAGES */
.image-index { height: 280px; width: 710px; }
.image-index-gif-es { height: 65px; width: 700px; }
.image-index-menu-icon {float: right; padding-right: 43px; height: 85px; width: 95px; }
.image-index-logo { height: 150px; width: 700px; }
.image-logo { height: 160px; width: 760px; }

/* MARGIN BOTTOM */
.margin-bottom { margin-bottom: 25px; }

/* MI_TIENDA.PHP */
.mitienda-button-delete { border-radius: 25px; background-color: #D32F2F; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 35pt; color: #FFFFFF; cursor: pointer; height: 100px; width: 790px; }
.mitienda-button-medium { border-radius: 25px; background-color: #488C4C; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 43pt; color: #FFFFFF; cursor: pointer; height: 165px; width: 790px; }
.mitienda-image-logo { display: block; margin: 0 auto; max-width: 400px; max-height: 400px; border-radius: 15px; border: 5px solid #EEEEEE; padding: 5px; background-color: #FFFFFF; }

/* POSTRES */
.products-button-p { border-radius: 15px; background-color: #488C4C; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 37pt; color: #FFFFFF; cursor: pointer; height: 120px; width: 820px; display: block; }
.products-image-p { border-radius: 15px; border: 8px solid #FFFFFF; }
.products-table-p { border-radius: 15px; border: 1px solid #C4C8CE; background-color: #EEEEEE; text-align: center; padding: 25px; height: auto; width: 870px; }
.products-table-title-p { border-radius: 15px; border: 1px solid #C4C8CE; background-color: #EEEEEE; text-align: center; padding: 25px; height: auto; width: 830px; }
.products-table-total-p { border-radius: 15px; border: 1px solid #C4C8CE; background-color: #EEEEEE; text-align: center; padding: 40px; height: auto; width: 865px; }

/* PRODUCT ITEMS */
.product-button-1 { border-radius: 25px; border: none; background-color: #488C4C; text-align: center; font-family: Arial; font-weight: 300; font-size: 45pt; color: #FFFFFF; cursor: pointer; height: 190px; width: 880px; display: block; }
.product-button-2 { border-radius: 25px; border: none; background-color: #F37735; text-align: center; font-family: Arial; font-weight: 300; font-size: 45pt; color: #FFFFFF; cursor: pointer; height: 190px; width: 880px; display: block; }
.product-button-4 { border-radius: 25px; border: none; background-color: #D32F2F; text-align: center; font-family: Arial; font-weight: 300; font-size: 45pt; color: #FFFFFF; cursor: pointer; height: 190px; width: 880px; display: block; }
.product-compliment { font-size: 25pt; color: #FF8000; font-weight: bold; margin-bottom: 15px; }
.product-details { font-family: Arial; font-size: 28pt; color: #818181; margin-bottom: 5px; }
.products-grid { display: grid; grid-template-columns: repeat(2, 0fr); gap: 20px; }
.product-item { border-radius: 25px; border: 10px solid #CCCCCC; background-color: #FFFFFF; padding: 25px; display: flex; flex-direction: column; align-items: center; width: 400px; box-sizing: border-box; }
.product-image { border-radius: 25px; text-align: center; height: 385px; width: 385px; object-fit: contain; display: block; margin-bottom: 20px; }
.product-info { width: 100%; text-align: center; margin-bottom: 15px; }
.product-name { font-family: Arial; font-weight: bold; font-size: 34pt; color: #000000; margin-bottom: 5px; }
.product-select { border-radius: 15px; background-color: #488C4C; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 32pt; color: #FFFFFF; cursor: pointer; height: 100px; width: 385px; display: block; }
.product-table { border-radius: 25px; border: 10px solid #C4C8CE; background-color: #FFFFFF; width: 440px; padding-top: 20px; padding-bottom: 20px;  }
.product-type { font-style: italic; font-size: 30pt; color: #818181; margin-bottom: 15px; }
.product-total-container { background-color: #EEEEEE; font-family: Arial; font-weight: bold; font-size: 45pt; color: #000000; height: 150px; margin: 30px 0; display: flex; justify-content: center; align-items: center; }
.unasigned-product-total-amount { border-radius: 25px; background-color: #CCCCCC; font-size: 40pt; padding: 0 20px; height: 80px;  width: 300px; text-align: right; }

/* SEARCH FILE CONTAINER */
.search-table { border-radius: 25px; border: 15px solid #C4C8CE; background-color: #EEEEEE; text-align: center; width: 880px; padding: 25px; }
.search-image { border-radius: 15px; border: 5px solid #FFFFFF; height: 275px; width: 275px; margin-right: 20px; margin-bottom: 20px; }
.search-button { border-radius: 15px; background-color: #488C4C; border: 0px solid #CCCCCC; text-align: center; font-family: Arial; font-size: 40pt; font-weight: 300; color: #FFFFFF; cursor: pointer; height: 140px; width: 800px; }

/* SEARCH BAR ITEMS */
.search-bar-input { border-radius: 25px; border: 2px solid #CCCCCC; background-color: #F6F7F8; text-align: left; padding-left: 25px; font-family: Arial; font-size: 40pt; color: #818181; margin-right: 10px; height: 120px; width: 655px; }
.search-bar-button { border-radius: 25px; border: none; background-color: #488C4C; font-family: Arial; font-size: 40pt; color: white; height: 125px; width: 125px; }

/* SEPARATOR */
.separator-0 { height: 15px; background-color: #D5D8DC; }
.separator-10 { height: 15px; background-color: #D5D8DC; margin-top: 10px; margin-bottom: 10px; }
.separator-15 { height: 15px; background-color: #D5D8DC; margin-top: 15px; margin-bottom: 15px; }
.separator-20 { height: 15px; background-color: #D5D8DC; margin-top: 20px; margin-bottom:20px; }
.separator-25 { height: 15px; background-color: #D5D8DC; margin-top: 25px; margin-bottom: 25px; }
.separator-30 { height: 15px; background-color: #D5D8DC; margin-top: 30px; margin-bottom: 30px; }
.separator-thin { height: 6px; background-color: #D5D8DC; }

/* SERVICE CONTAINERS */
.services-table { border-radius: 25px; border: 15px solid #C4C8CE; background-color: #EEEEEE; text-align: center; width: 880px; }
.services-cell { border-radius: 0px; border: 0px solid #000000; background-color: transparent; }
.services-name { font-family: Arial; font-weight: bold; color: #000000; font-size: 40pt; }
.services-type { font-family: Arial; font-weight: bold; color: #009846; font-size: 30pt; margin-bottom: 15px; }
.services-image { border-radius: 15px; border: 5px solid #FFFFFF; height: 275px; width: 275px; margin-right: 20px; margin-bottom: 20px; }
.services-compliment { font-family: Arial; font-weight: bold; color: #009846; font-size: 35pt; margin-bottom: 15px; }
.services-description { font-family: Arial; font-weight: bold; color: #000000; font-size: 30pt; margin-bottom: 15px; }
.services-details { font-family: Arial; font-weight: bold; color: #818181; font-size: 25pt; margin-bottom: 0px; }
.services-price { font-family: Arial; font-weight: bold; color: #818181; font-size: 35pt; }
.services-button { border-radius: 15px; background-color: #488C4C; border: 0px solid #CCCCCC; text-align: center; font-family: Arial; font-size: 40pt; font-weight: 300; color: #FFFFFF; cursor: pointer; height: 140px; width: 800px; }
.services-total-container { background-color: #EEEEEE; font-family: Arial; font-weight: bold; font-size: 45pt; color: #000000; height: 150px; display: flex; justify-content: center; align-items: center; }

/* STORES */
.stores-button { border-radius: 15px; background-color: #488C4C; border: 0px solid #CCCCCC; text-align: center; font-weight: 300; font-family: Arial; font-size: 40pt; color: #FFFFFF; cursor: pointer; display: block; margin-top: 25px; height: 120px; width: 100%; }
.stores-grid { display: grid; grid-template-columns: repeat(1, 1fr); text-align: center; }
.stores-image { border-radius: 15px; text-align: left; margin-left: 10px; display: block; height: 250px; width: 250px; }
.stores-logo{ height: 80px; width: 350px; margin-top: 50px; margin-bottom: 10px; }
.stores-table { border-radius:25px; border: 15px solid #ACB1B9; background-color: #EEEEEE; padding: 25px; }

/* TABLES */
.table-main { border-radius: 25px; background-color: #FFFFFF; width: 930px; }
.table-2nd { border-radius: 25px; border: 15px solid #ACB1B9; width: 870px; padding-top: 30px; padding-bottom: 30px; }
.table-3rd { border-radius: 25px; border: 15px solid #ACB1B9; width: 790px; padding-top: 20px; padding-bottom: 20px; }
.table-title-1 { border-radius: 15px; border: 0px solid #ACB1B9; background-color: #E6E7EA; height: 150px; width: 820px; }
.table-title-2 { border-radius: 15px; border: 0px solid #ACB1B9; background-color: #000000; height: 150px; width: 850px; }

/* UPPER CASES */
.only-mayus { text-transform: uppercase; }
