body{ background-color: #eeeeee; color: #212121; }

header{ background-color: #212121; height: 70px; overflow: hidden; }
header nav, header nav ul{ width: 100%; height: 100%; }
header nav ul li{ align-items: center; display: flex; height: 100%; justify-content: center; }
header nav ul li img{ height: 45px; width: auto; }

.list-products{ height: calc( 100vh - 160px ); overflow-y: auto; overflow-x: hidden; }

.modal-details{ background-color: #eeeeee; height: 100vh; padding-bottom: 50px; position: absolute; top: 0; left: 0; overflow-y: auto; position: fixed; width: 0%; z-index: 999; }
.modal-details.show{ width: 100%; }
.modal-details .header{ height: 40px; align-items: center; display: flex; margin-bottom: 10px; padding-left: 15px; padding-right: 15px; }
.modal-details .body{ padding: 0px 15px; width: 100%; }
.modal-details .btn-add-cart{ align-items: center; background-color: #f3bf16; bottom: 0; color: #000; display: flex; justify-content: center; font-size: 16px; font-weight: bold;  height: 60px; left: 0; width: 100%; }
.modal-details.show .btn-add-cart{ position: fixed; }
.modal-details .btn-add-cart img{ height: 100px; width: auto; position: absolute; right: 10px; top: -50%; }

.def-number-input{ align-items: stretch; display: flex; justify-content: center; }
.def-number-input button{ border: 1px solid #999; border-radius: 5px 0px 0px 5px; padding: 10px 25px; }
.def-number-input button:last-child{ border-radius: 0px 5px 5px 0px ; }
.def-number-input input{ border: 0; border-bottom: 1px solid #999;  border-top: 1px solid #999; padding: 10px 25px; text-align: center; width: 70px; }

.def-number-input.small input, .def-number-input.small button{ padding: 3px 10px; height: 25px; }
.def-number-input.small input{ width: 40px; }

.btn-show-checkout{ align-items: center; background-color: #f3bf16; bottom: 0; color: #000; display: flex; font-size: 16px; font-weight: bold; height: 60px; left: 0; position: fixed; width: 100%; }
.btn-show-checkout img, .btn-pay-cart img{ height: 100px; width: auto; position: absolute; right: 10px; top: -50%; }

.pay-zone{ bottom: 0; left: 0; position: fixed; width: 100%; }
.pay-zone .total{ background-color: #fff; border-radius: 20px 20px 0 0; box-shadow: 0px -4px 10px #e2e2e2; padding-top: 10px !important; }
.pay-zone a{ align-items: center; background-color: #f3bf16; color: #000; display: flex; font-size: 16px; justify-content: center; font-weight: bold; height: 60px; width: 100%; }


.list-orders > .row{ margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed #999; }
.list-orders > .row:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

/* estilos para el icono del preload de opciones con precarga */
.fa-spinner{ -webkit-animation:spin 1.8s linear infinite; -moz-animation:spin 1.8s linear infinite; animation:spin 1.8s linear infinite; }
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }