@font-face { font-family: "Digital"; src: url("fonts/digital-7.ttf"); } /* thanks to https://stackoverflow.com/questions/1144805/scroll-to-the-top-of-the-page-using-javascript */ body, html { font-family: 'Ubuntu', Arial, Tahoma; font-size: 14.5px; margin: 0px; background-color: #E5E5E5; overflow-x: hidden; color: #111; scroll-behavior: smooth; } .pctext { font-family: 'Ubuntu', Arial, Tahoma; font-size: 14.5px; margin: 0px; } .mobiletext { font-family: 'Ubuntu', Arial, Tahoma; font-size: 14.5px; margin: 0px; } .pctext2 { font-family: 'Ubuntu', Arial, Tahoma; font-size: 14.5px; margin: 0px; } .mobiletext2 { font-family: 'Ubuntu', Arial, Tahoma; font-size: 14.5px; margin: 0px; } .pctext3 { font-family: 'Ubuntu', Arial, Tahoma; font-size: 14.5px; margin: 0px; } .mobiletext3 { font-family: 'Ubuntu', Arial, Tahoma; font-size: 14.5px; margin: 0px; } a:link { text-decoration: none; color: #008000; } a:active { text-decoration: none; color: red; } a:visited { text-decoration: none; color: #008000; } .adminsidebarlink { color: white; font-weight: normal; } .adminsidebarlink:hover { color: #57AEDA; font-weight: normal; } h1 { font-size: 30px; color: #00137F; margin: 0px; padding: 0px; } h1_white { font-size: 30px; color: white; margin: 0px; padding: 0px; } h2 { font-size: 23px; color: #00137F; margin: 0px; padding: 0px; } h3 { font-size: 18px; color: #00137F; margin: 0px; padding: 0px; } .graytext { color: #888888; } .offer_price { color: #bbbbbb; text-decoration: line-through; } .cat-item { padding: 0px; margin: 0px; padding-top: 5px; padding-bottom: 5px; font-size: 14.5px; color: #008000; } .mobilecat-item { padding: 0px; margin: 0px; padding-top: 5px; padding-bottom: 5px; font-size: 14.5px; color: #008000; } .count { background-color: yellow; color: black; } .separator { width: 100%; height: 10px; border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: #111; } .pcseparatordiv { width: 100%; max-width: 867px; height: 68px; font-size: 26px; font-weight: bold; color: white; background-color: red; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; padding-left: 8px; padding-right: 8px; } .mobileseparatordiv { width: 100%; max-width: 867px; height: 78px; font-size: 20px; font-weight: bold; color: white; background-color: red; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; padding-left: 8px; padding-right: 8px; } .warning { color: red; } .warning2 { color: #0000aa; } /* pagination */ .first-last-page { border: 2.5px solid #000F66; background-color: white; text-align: center; display: flex; align-items: center; justify-content: center; width: auto; min-width: 49px; max-width: 60px; height: 30px; padding: 4px; cursor: pointer; } .first-last-page:hover { background-color: #BB362A; color: white; } .currentpage { border: 2.5px solid #dddddd; border-bottom: 3.5px solid #006600; background-color: white; text-align: center; display: flex; align-items: center; justify-content: center; width: auto; min-width: 49px; max-width: 60px; height: 30px; padding: 4px; cursor: pointer; } .currentpage:hover { border-bottom: 3.5px solid #BB362A; background-color: #CCA456; color: white; } .ellipses { border: 2.5px solid #dddddd; background-color: white; text-align: center; display: flex; align-items: center; justify-content: center; width: auto; min-width: 49px; max-width: 60px; height: 30px; padding: 4px; } .page { border: 2.5px solid #dddddd; background-color: white; text-align: center; display: flex; align-items: center; justify-content: center; width: auto; min-width: 49px; max-width: 60px; height: 30px; padding: 4px; cursor: pointer; } .page:hover { background-color: #006600; color: white; } /* pagination */ /* thanks to chatGPT */ .marquee-container { width: 100%; overflow: hidden; } .marquee { display: inline-block; white-space: nowrap; animation: marqueeAnimation 10s linear infinite alternate; } @keyframes marqueeAnimation { 0% { transform: translateX(130%); } 100% { transform: translateX(0%); } } .marquee-container2 { width: 100%; overflow: hidden; } .marquee2 { display: inline-block; white-space: nowrap; animation: marqueeAnimation2 10s linear infinite alternate; } @keyframes marqueeAnimation2 { 0% { transform: translateX(105%); } 100% { transform: translateX(0%); } } /* thanks to chatGPT */ /* breadcrumbs thanks to https://www.geeksforgeeks.org/how-to-create-breadcrumbs-using-html-and-css/ thanks to https://codepen.io/jensgro/pen/kQBzmN thanks to chatGPT */ /* body */ .addressLink { list-style: none; overflow: hidden; margin: 0px; padding: 0px; } .addressLink li { float: left; } /* body */ /* first item */ .addressLink li a { background: #E7E9E9; color: #606161; text-decoration: none; padding: 10px 0px 10px 45px; position: relative; float: left; font: 24px; } .addressLink li a:after { content: " "; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid #E7E9E9; margin-top: -50px; position: absolute; top: 50%; left: 100%; z-index: 2; } .addressLink li a:before { content: " "; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid white; position: absolute; top: 50%; left: 100%; z-index: 1; } .addressLink li a:hover:after { border-left-color: #00137F !important; } .addressLink li:first-child a { padding-left: 10px; } .addressLink li:first-child a:hover { color: white; background: #00137F; } /* first item */ /* second item */ .addressLink li:nth-child(2) a { background: #D5D7D7; } .addressLink li:nth-child(2) a:after { border-left-color: #D5D7D7; } .addressLink li:nth-child(2) a:hover:after { color: #606161; border-left-color: #D5D7D7 !important; } /* second item */ /* last item */ .addressLink li:last-child a { background: #008000; color: white; font-weight: bold; } .addressLink li:last-child a:after { border: 0; content: " "; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid #008000; margin-top: -50px; position: absolute; top: 50%; left: 100%; z-index: 2; } .addressLink li:last-child a:hover { color: #C6C6C6; background: #404141; } .addressLink li:last-child a:hover:after { border-left-color: #404141 !important; } /* last item */ /* breadcrumbs thanks to https://www.geeksforgeeks.org/how-to-create-breadcrumbs-using-html-and-css/ thanks to https://codepen.io/jensgro/pen/kQBzmN thanks to chatGPT */ /* share social buttons, thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_social_media_buttons */ .fa { padding: 10px; font-size: 20px; width: 20px; height: 20px; text-align: center; text-decoration: none; margin: 5px 2px; } .fa:hover { opacity: 0.7; } .fa-facebook { background: #3B5998; color: white; cursor: pointer; } .fa-twitter { background: #55ACEE; color: white; cursor: pointer; } .fa-twitter-x { background: black; color: white; width: 40px; height: 40px; min-width: 40px; min-height: 40px; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 22px; margin-top: -20px; } .fa-whatsapp { background: #128C7E; color: white; cursor: pointer; } .fa-telegram { background: #125688; color: white; cursor: pointer; } .fa-envelope { background: #eb4924; color: white; cursor: pointer; } /* thanks to https://www.enriquejros.com/efectos-imagenes-css/ */ .fa-twitter-x:hover { filter: opacity(.5); } .fa-facebook-mobile { background: #3B5998; color: white; width: 55px; height: 50px; min-width: 55px; min-height: 50px; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 10px; padding-top: 5px; } .fa-facebook-mobile:hover { filter: opacity(.5); } .fa-whatsapp-mobile { background: #128C7E; color: white; width: 55px; height: 50px; min-width: 55px; min-height: 50px; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 10px; padding-top: 5px; } .fa-whatsapp-mobile:hover { filter: opacity(.5); } .fa-envelope-mobile { background: #eb4924; color: white; width: 55px; height: 50px; min-width: 55px; min-height: 50px; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 10px; padding-top: 5px; } .fa-envelope-mobile:hover { filter: opacity(.5); } .fa-twitter-x-mobile { background: black; color: white; width: 55px; height: 55px; min-width: 55px; min-height: 55px; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 34px; } /* thanks to https://www.enriquejros.com/efectos-imagenes-css/ */ .fa-twitter-x-mobile:hover { filter: opacity(.5); } .fa-shopping-cart { padding: 0px; margin: 0px; margin-left: -20px; margin-top: -5px; font-size: 36px; color: white; cursor: pointer; } .fa-shopping-cart-total { padding: 0px; margin: 0px; padding-right: 16px; margin-top: -5px; font-family: "Digital"; font-size: 33px; color: white; cursor: pointer; } /* share social buttons, thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_social_media_buttons */ .form { display: inline; } .textfield { font-family: 'Ubuntu', Arial, Tahoma; font-size: 14.5px; height: 44px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; padding: 5px; border-width: 1.5px; border-color: #dddddd; border-style: solid; border-radius: 2px; } .textfield:focus { outline: none !important; border:1px solid #007ACC; box-shadow: 0 0 10px #007ACC; } /* thanks to https://doodlenerd.com/html-control/css-textbox-generator */ .mobiletextfield { font-family: 'Ubuntu', Arial, Tahoma; height: 44px; font-size: 14.5px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; padding: 5px; border-width: 1.5px; border-color: #dddddd; border-style: solid; border-radius: 2px; } /* thanks to https://www.folkstalk.com/2022/09/how-to-change-border-color-of-textarea-input-on-focus-with-code-examples.html */ .mobiletextfield:focus { outline: none !important; border:1px solid #007ACC; box-shadow: 0 0 10px #007ACC; } .disabledtextfield { font-family: 'Ubuntu', Arial, Tahoma; background-color: #E5E5E5; color: #4C4C4A; font-size: 14.5px; height: 44px; border: 1.5px solid #555555; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; padding: 5px; border-width: 2px; border-color: #CCCCCC; border-style: solid; border-radius: 2px; } .mobiledisabledtextfield { font-family: 'Ubuntu', Arial, Tahoma; background-color: #E5E5E5; color: #4C4C4A; height: 44px; font-size: 14.5px; vertical-align: middle; border: 2px solid #555555; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; padding: 5px; border-width: 1.5px; border-color: #CCCCCC; border-style: solid; border-radius: 2px; } .button { cursor: pointer; height: 44px; font-weight: normal; } .mobilebutton { cursor: pointer; height: 44px; font-size: 22px; font-weight: normal; } .simplebutton { font-family: 'Ubuntu', Arial, Tahoma; border-radius: 6px; border: 1px solid #aaaaaa; //display: inline-block; cursor: pointer; //font-size: 14.5px; height: 34px; width: 78px; } .simpleokbutton { background-color: #00ff00; border-radius: 2px; border: 1px solid #00ff00; cursor: pointer; color: black; font-weight: bold; height: 34px; width: 108px; } .simplecancelbutton { background-color: red; border-radius: 6px; cursor: pointer; color: white; font-weight: bold; height: 34px; width: 108px; } .simplemobilebutton { font-family: 'Ubuntu', Arial, Tahoma; border-radius: 6px; border: 1px solid #aaaaaa; //display: inline-block; cursor: pointer; //font-size: 14.5px; font-size: 18px; height: 44px; width: 120px; } .simpleokmobilebutton { background-color: #00ff00; border-radius: 2px; border: 1px solid #00ff00; cursor: pointer; color: black; //font-weight: bold; font-size: 14.5px; height: 44px; width: 98px; } .simplecancelmobilebutton { font-family: 'Ubuntu', Arial, Tahoma; //box-shadow: inset 0px 1px 0px 0px #000000; //background: linear-gradient(to bottom, #2552828 5%, #ff0000 100%); background-color: red; border-radius: 6px; border: 2px solid #555555; //display: inline-block; cursor: pointer; color: white; font-family: Arial; //font-size: 14.5px; text-decoration: none; font-weight: bold; //text-shadow: 0px 1px 0px #154682; font-size: 18px; height: 44px; width: 120px; } .simpletransparentbutton { background-color: black; border-radius: 2px; border: 1px solid red; cursor: pointer; color: white; font-weight: bold; height: 34px; width: 108px; } .simpletransparentmobilebutton { background-color: black; border-radius: 2px; border: 1px solid red; cursor: pointer; color: white; //font-weight: bold; font-size: 14.5px; height: 44px; width: 98px; } .callbutton { font-family: 'Ubuntu', Arial, Tahoma; box-shadow: inset 0px 1px 0px 0px #00910E; //background: linear-gradient(to bottom, #00910E 5%, #00A50D 100%); background-color: #00910E; border-radius: 2px; border: 1px solid #00ff00; display: inline-block; cursor: pointer; color: #ffffff; font-family: Arial; font-size: 14.5px; height: 34px; text-decoration: none; text-shadow: 0px 1px 0px #154682; } .callmobilebutton { font-family: 'Ubuntu', Arial, Tahoma; box-shadow: inset 0px 1px 0px 0px #00910E; //background: linear-gradient(to bottom, #00910E 5%, #00A50D 100%); background-color: #00910E; border-radius: 2px; border: 1px solid #00ff00; display: inline-block; cursor: pointer; color: #ffffff; font-family: Arial; font-size: 18px; height: 44px; text-decoration: none; text-shadow: 0px 1px 0px #154682; } .disabledbutton { font-family: 'Ubuntu', Arial, Tahoma; background-color: #005500; border-radius: 2px; border: 1px solid #124d77; display: inline-block; cursor: pointer; color: #bbbbbb; font-family: Arial; font-size: 14.5px; height: 34px; text-decoration: none; } .disabledmobilebutton { font-family: 'Ubuntu', Arial, Tahoma; background-color: #005500; border-radius: 2px; border: 1px solid #124d77; display: inline-block; cursor: pointer; color: #bbbbbb; font-family: Arial; font-size: 14.5px; height: 44px; text-decoration: none; } .cart_shopbutton { cursor: pointer; height: 44px; font-weight: normal; background-color: #89d07e; color: white; font-weight: bold; } .cart_clearbutton { cursor: pointer; height: 44px; font-weight: normal; background-color: red; color: white; font-weight: bold; } .header { background-color: white; } .topheader { background-color: #008000; } .topheader2 { background-color: #008000; position: fixed; display: none; visibility: hidden; left: 0px; top: 0px; width: 100%; height: 52px; z-index: 110; } .totopbutton { background-color: #00137F; position: fixed; display: none; visibility: hidden; right: 0px; bottom: 0px; width: 35px; height: 35px; z-index: 110; padding: 4px; display: flex; /* Usa flexbox para el layout */ justify-content: center; /* Centra horizontalmente */ align-items: center; padding-left: 13px; padding-top: 13px; margin-right: 0px; margin-bottom: 0px; } .totopbutton-img { } /* thanks to https://www.enriquejros.com/efectos-imagenes-css/ */ .totopbutton-img:hover { filter: opacity(.5); } /* thanks to chatGPT */ .topbaricons { width: 52px; height: 52px; padding-right: 6px; padding-left: 6px; } .topbaricons:hover { background-color: #006000; } .phonearea { width: 100%; height: 52px; display: flex; text-align: left; padding-left: 6px; padding-right: 6px; padding-top: 10px; visibility: hidden; display: none; } .document { background-color: white; } .document2 { background-color: #cccccc; } .menubar { background-color: #00137F; color: white; text-transform: uppercase; font-weight: bold; height: 61px; font-size: 14.5px; } .menubar2 { background-color: black; color: white; text-transform: uppercase; font-weight: bold; height: 61px; font-size: 14.5px; } .mobilemenubaritems { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 61px; color: white; background-color: #00137F; padding-left: 25px; border-top: 3px solid white; } .menubaritems { display: flex; justify-content: center; align-items: center; width: auto; height: 61px; color: white; cursor: pointer; padding-left: 25px; padding-right: 25px; } .menubaritems:hover { background-color: #008000; } .menubaritemstext { color: white; text-transform: uppercase; font-weight: bold; font-size: 14.5px; white-space: nowrap; } .mobilemenubaritemstext { color: white; text-transform: uppercase; font-weight: bold; font-size: 14.5px; white-space: nowrap; } .footerbg { background-color: black; padding: 8px; border-top: 3px solid black; } .footer { color: white; font-size: 14.5px; } .footer a { color: #fefda6; font-weight: bold; } .footer a:hover { color: yellow; } .mobilefooter { color: white; font-size: 14.5px; } .mobilefooter a { color: #fefda6; font-weight: bold; } .mobilefooter a:hover { color: yellow; } .footerlnk { color: #fefda6; font-weight: bold; } .footerlnk:hover { color: yellow; } .footerlnk2 { color: #007ACC; font-weight: bold; } .footerlnk2:hover { color: red; } .mobilefooterlnk { color: #007ACC; } /* thanks to dynamic news lite wordpress theme */ .widget { margin-bottom: 1.5em; box-shadow: 0 0 4px #ddd; border: 1px solid #ddd; padding: 1.5em; background: #fff; -ms-word-wrap: break-word; word-wrap: break-word; } .widget_empty { margin-bottom: 1.5em; padding: 1.5em; background: #fff; -ms-word-wrap: break-word; word-wrap: break-word; } /* thanks to https://www.w3schools.com/cssref/tryit.php?filename=trycss_list-style-type_ex */ .widget_list { list-style-type: circle; } .widget_list>li { margin-bottom : 8px; } .wait { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 120; background:rgba(0,0,0,0.72); display: none; visibility: hidden; } .wait2 { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 120; background:rgba(0,0,0,0.82); display: none; visibility: hidden; } .IEwarning { display: block; visibility: visible; position: absolute; left: 0px; top: 0px; width: 100%; height: auto; background-color: #FFF6A8; color: black; padding: 3px; margin-bottom: 3px; } .dwarning { width: 100%; height: auto; background-color: #FFF6A8; color: black; padding: 3px; margin: 0px; } .cart_button { cursor: pointer; height: 44px; font-weight: normal; width: 109px; background-color: #FDFD96; border: 2px solid #ccc; color: #555; } .cart_button:hover { background-color: #F9F952; } .cart_button_remove { cursor: pointer; height: 44px; font-weight: normal; width: 109px; background-color: #ff7514; border: 2px solid #ccc; color: white; } .cart_button_remove:hover { background-color: #c65f16; } .cart_table { display: table; border-collapse: collapse; border: 1.5px solid #dddddd; width: 100%; margin-left: auto; margin-right: auto; background-color: white; } .cart_row { display: table-row; } .cart_title { display: table-cell; border: 1.5px solid #dddddd; padding: 5px; padding-top: 0px; padding-bottom: 0px; font-weight: bold; text-align: center; height: 34px; vertical-align: middle; font-family: 'Ubuntu', Arial, Tahoma; font-size: 14.5px; color: #555; background-color: #FDFD96; } .cart_cell { display: table-cell; border: 1.5px solid #dddddd; padding: 5px; height: 24px; vertical-align: middle; font-family: 'Ubuntu', Arial, Tahoma; font-size: 14.5px; background-color: white; } .cart_cell2 { display: table-cell; padding: 2px; height: 24px; vertical-align: middle; font-family: 'Ubuntu', Arial, Tahoma; font-size: 14.5px; background-color: white; } .cart_sidebar { position: fixed; top: 0px; right: 0; width: 100%; max-width: 551px; height: 100%; background-color: white; z-index: 100; border-left: 1.5px solid #DDDDDD; display: none; visibility: hidden; overflow-y: auto; overflow-x: hidden; } .the_sidebar { position: fixed; top: 0px; right: 0; width: 100%; max-width: 335px; height: 100%; background-color: white; z-index: 100; border-left: 1.5px solid #DDDDDD; display: none; visibility: hidden; overflow-y: auto; overflow-x: hidden; } /* thanks to https://stackoverflow.com/questions/74617963/making-horizontal-scroll-with-images-infinite-with-no-break-css */ .scroll { position: relative; width: 100%; max-width: 834px; overflow: hidden; z-index: 1; } .m-scroll { overflow: hidden; height: 100%; white-space: nowrap; animation: scrollText 45s infinite linear; font-size: 10; display: flex; justify-content: space-between; width: fit-content; display: flex; align-items: center; justify-content: center; } span { display: inline-block; margin-right: 10; } @keyframes scrollText { from { transform: translateX(0%); } to { transform: translateX(-50%); } } .mySlides {display: none;} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { max-width: 1070px; position: relative; margin: auto; min-width: 100%; height: auto; } /* Caption text */ .text { color: #f2f2f2; font-size: 14.5px; padding: 8px; position: absolute; bottom: 0px; max-width: 1070px; width: 100%; background-color: rgba(0, 0, 0, 0.85); /* Fondo negro semitransparente */ border-top-style: solid; border-top-width: 1.5px; border-top-color: red; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { height: 11px; width: 11px; margin: 0 2px; background-color: #579E38; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; border-style: solid; border-width: 1.5px; border-color: #F8DB00; } .active { background-color: white; border-style: solid; border-width: 1.5px; border-color: red; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .text {font-size: 11px} } .country { display: inline-block; padding: 5px; border: 2px solid #007ACC; } .country:hover { display: inline-block; padding: 5px; border: 2px solid red; background-color: #dddddd; } /* thanks to https://unused-css.com/blog/css-half-circle/ */ .semi-circle { width: 100%; height: 100%; background-color: black; border-radius: 0rem 0rem 50% 50%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .caps { padding: 6px; margin: 0px; background-color: #FFF6A8; } .ok-notification { background-color: #E5EFE5; color: #555555; width: 98%; height: 35px; margin: 0px; padding: 0px; padding-left: 16px; padding-right: 0px; margin-bottom: 10px; display: flex; align-items: center; } .warning-notification { background-color: #FDFD96; color: #555555; width: 98%; height: 35px; margin: 0px; padding: 0px; padding-left: 16px; padding-right: 0px; margin-bottom: 10px; display: flex; align-items: center; } .error-notification { background-color: #ff0000; color: white; width: 98%; height: 35px; margin: 0px; padding: 0px; padding-left: 16px; padding-right: 0px; margin-bottom: 10px; display: flex; align-items: center; } /* thanks to https://www.adosa.com.mx/ for the css styles */ .btnQty { background-color:transparent; box-shadow:none; border:0;top:0px; position:relative; height:100%; color:#00137F; font-size:15px; padding:0 1em; } .btnQty:hover { color:#008000; } button.btnMinus { border:2px solid #ccc; border-right:0; border-top-left-radius:50%; border-bottom-left-radius:50%; width: 40px; height: 44px; } button.btnPlus { border:2px solid #ccc; border-left:0; border-top-right-radius:50%; border-bottom-right-radius:50%; width: 40px; height: 44px; } .input-text.qty { height:38px; margin-top:0px; text-align:center; width:60px; font-size:15px; border: none; border-top:2px solid #ccc; border-bottom:2px solid #ccc; } /* Chrome, Safari, Edge y Opera, thanks to chatGPT */ #qty::-webkit-inner-spin-button, #qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ #qty { -moz-appearance: textfield; } #qty:focus { outline: none; border: none; border-top:2px solid #ccc; border-bottom:2px solid #ccc; } /* thanks to https://www.adosa.com.mx/ for the css styles */ @media only screen and (max-device-width: 699px) { .alertify { position: fixed; z-index: 99999; top: 50px; left: 10%; max-width: 80%; opacity: 1; } } /* Modern browsers */ /* thanks to https://www.browserstack.com/guide/create-browser-specific-css */ @media screen and (-webkit-min-device-pixel-ratio:0) { .IEwarning { display: none; visibility: hidden; } } @media only screen and (max-device-width: 299px) { .mobilefooter { font-size: 16.5px; } } @media only screen and (min-device-width: 390px and max-device-width: 699px) { .mobilefooter { font-size: 18.5px; } } @media only screen and (min-device-width: 700px and max-device-width: 1023px) { .mobilefooter { font-size: 21px; } }