body { width:100%; overflow:hidden; margin:0; padding:0 }
    html, body { margin: 0; padding: 0; height: 100%; }

    /* Estilos para teléfonos */
    @media only screen and (max-width: 767px) {
        #content { width: 100%; }
        #work-site { width: 100%; background: #FFF; height: 100vh; }
    }

    /* Estilos para tabletas */
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
        #content { width: 100%; }
        #work-site { width: 80%; background: #FFF; height: 100%; }
    }

    /* Estilos para computadoras */
    @media only screen and (min-width: 1025px) {
        body { background-color: #EFEFEF; }
        #content { width: 100%; }
        #work-site { width: 30%; background: #FFF; }
    }

    input[type="text"] { border: none; font-size: 18pt; padding:10px; border-radius:0 !important; outline:none; }
    input[type="email"] { border:none; font-size: 18pt; padding:10px; border-radius:0 !important; outline:none; }
    input[type="password"] { border:none; font-size: 18pt; padding:10px; border-radius:0 !important; outline:none; }

    textarea { border:none; font-size: 18pt; padding:10px; border-radius:0 !important; }
    textarea:focus { outline: none; box-shadow: none; border-color: inherit; }

    input.lower-input { text-transform: lowercase; }
    input.lower-input::placeholder { text-transform: none; }

    input.upper-input { text-transform: uppercase; }
    input.upper-input::placeholder { text-transform: none; }

    label { font-size:13pt; }

    .pointer { cursor: pointer; }

    .normal-input { border:none; font-size:14pt !important; width:100%; }

    .carousel-indicators { bottom: -50px }
    .carousel-indicators [data-bs-target] { background-color: #ccc; width: 10px; height: 10px; border-radius: 50%; }    
    .carousel-indicators .active { background-color: #000; }

    .wd-10 { width: 10%; }
    .wd-20 { width: 20%; } 
    .wd-30 { width: 30%; } 
    .wd-35 { width: 35%; } 
    .wd-40 { width: 40%; } 
    .wd-60 { width: 60%; } 
    .wd-70 { width: 70%; }    
    .wd-80 { width: 80%; }    
    .wd-90 { width: 90%; }
    .wd-95 { width: 95%; }

    .wp-50 { width: 50px !important; }
    .hp-50 { height: 50px !important; }
    .hd-100 { height: 100%; }

    .borderTop { border-top: 1px solid #CCC !important; }
    .borderBottom { border-bottom: 1px solid #CCC !important; }
    .borderLeft { border-left: 1px solid #CCC !important; }
    .borderRight { border-right: 1px solid #CCC !important; } 

    .title-section { background-color:#000; font-size:18pt; width:95%; padding:10px; color:white; border-radius:5px; padding-left:20px; }
    .disclaimer-section { font-size:12pt; width:95%; padding:10px; padding-left:20px; }
    .text-line { font-size:16pt; padding:15px; width:95%; }
    .text-line-18 { font-size:18pt; padding:15px; width:95%; }
    .text-line-14 { font-size:14pt; width:95%; }
    
    .mdt-8 { margin-top: 80px; }
    .mdt-9 { margin-top: 90px; }
    .mdt-10 { margin-top: 100px; }
    .mdt-13 { margin-top: 130px; }
    .mdt-14 { margin-top: 140px; }
    .mdt-15 { margin-top: 150px; }
    .mdt-20 { margin-top: 200px; }

    .font-8 { font-size:8pt; }
    .font-10 { font-size:10pt; }
    .font-12 { font-size:12pt; }
    .font-14 { font-size:14pt; }
    .font-16 { font-size:16pt; }
    .font-18 { font-size:18pt; }
    .font-20 { font-size:20pt; }
    .font-22 { font-size:22pt; }
    .font-24 { font-size:24pt; }
    .font-26 { font-size:26pt; }
    .font-28 { font-size:28pt; }
    .font-30 { font-size:30pt; }

    .line-1   { line-height: normal !important; };
    .line-1-5 { line-height: 1.5 !important; };
    .line-2   { line-height: 2 !important; };
    .line-2-5 { line-height: 2.5 !important; };
    .line-3   { line-height: 3 !important; };
    .line-3-5 { line-height: 3.5 !important; };
    .line-4   { line-height: 4 !important; };
    .line-4-5 { line-height: 4.5 !important; };
    .line-5   { line-height: 5 !important; };

    .line-12 { line-height:1.2 }

    .border-dashed { border-style: dashed !important; }

    .text-line-16 { font-size:14pt; }
    .text-line-18-0 { font-size:18pt; }
    .text-line-24 { font-size:24pt; }
    .text-input { font-size:20pt; width:100%; }
    .text-input-50 { font-size:20pt; width:50%; }
    .detail-section { width:95%; padding-top:15px; font-size:16pt; } 
    .swiped { transform: translateX(-100%); opacity: 0; }

    .order-page { height: 100vh; overflow:hidden; background-size:cover; background-image:url(image/fondo-order.png); background-repeat:no-repeat; background-position:top right; }
    .card { border:none; padding:20; color:#000; border-radius:10px; font-size:18pt; width:90%; }

    .buttons { background-color: #F4AB17; border-radius: 10px; }
    .btn-card { border:none; padding:20; color:#000; background:#F4AB17 !important; border-radius:10px; font-size:18pt; width:300px; height:70px; }

    .btn-login { border:none; padding:15; color:#000; background:#F4AB17 !important; border-radius:10px; font-size:14pt; width:200px; height:50px; }
    .btn-guest { border:none; padding:15; color:#FFF; background:#000 !important; border-radius:10px; font-size:14pt; height:50px; }

    .btn-spinner { border:none; padding:20; color:#000; background:#DADADA !important; border-radius:10px; font-size:18pt; width:300px; height:70px; }
    .btn-acct { border:none; padding:20; color:#000; background:#F4AB17 !important; border-radius:10px; font-size:16pt; width:150px; height:50px; }
    .btn-card-disable { color: #919191; border:none; padding:20; background:#D3D3D3 !important; border-radius:10px; font-size:18pt; width:300px; height:70px; }

    .top-image { width:100%; background-size:contain; border-top-left-radius:15px; border-top-right-radius:15px; }
    .icon-image { width:100%; background-size:contain; margin-bottom: 20px; }
    .border-icon { border-color: #EFDAAE !important; }
    .background-icon { background-color: #F9F4EA !important; }
    .height-icon { height: 160px; }
    .icon-rounded { border-radius:20px;}
    .image_top { border-top-right-radius:15px;  border-top-left-radius:15px; background-size:cover; }
    .image-size { background-size:cover; }
    .top-bar { height:70px !important; }
    .fixed-div { position: sticky; top: 0; left: 0; width: 100%; background-color: #FFBF00; color: #fff; z-index: 1050; }    
    .btn-acct { border:none; padding:20; color:#000; background:#F4AB17 !important; border-radius:10px; font-size:16pt; width:220px; height:50px; }
    .centers { display:flex; align-items:center; justify-content:center; }
    .bg-gray { background: #CECECE; }

    .menu-content { height: 100vh; background-image: url(image/center.png); background-repeat: no-repeat; background-size:cover; }
    .menu-section { height: 100vh; }

    #total-badge {
        position: fixed;
        top: 20px;
        right: 160px;
        background-color: #FFBF00;
        color: black;
        /* width: 150px; */
        height: 60px;
        border-radius: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        z-index: 1000;
        user-select: none;
    } 

    #cart-badge {
        position: fixed;
        top: 20px;
        right: 90px;
        background-color: #FFBF00;
        color: black;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        z-index: 1000;
        user-select: none;
    }    

    #hamb-badge {
        position: fixed;
        top: 20px;
        right: 20px;
        background-color: #FFBF00;
        color: black;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        z-index: 1000;
        user-select: none;
    }       

    #chat-window {
        flex: 1;
        padding: 10px;
        overflow-y: auto;
        background-color: #fff;
        height: calc(100% - 130px);
    }

    .message {
        margin-bottom: 10px;
        padding: 8px 12px;
        background-color: white;
        border-radius: 10px;
        max-width: 70%;
    }

    .user {
        align-self: flex-end;
        background-color: #9EDB6D;
    }

    .operator {
        align-self: flex-start;
        background-color: #FFED9E;
    }

    #chat-form {
        display: flex;
        padding: 10px;
        background-color: #ddd;
        height: 60px;
        width:100%;
    }

    #chat-input {
        flex: 1;
        padding: 10px;
        font-size: 16px;
        border: none;
        border-radius: 5px;
    }

    #send-button {
        margin-left: 10px;
        padding: 10px 20px;
        font-size: 16px;
        background-color: #000;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    #send-button:hover {
        background-color: #000;
    }