:root {
    --bg: #f8f7fa;
    --menutxtcl: 86, 84, 84;
    --menutxtweight: 600;
    --intlinear: 90, 99, 129;
    --txtall: 79, 82, 107;
    --cl1: 78, 98, 223;
    --pckdf: var(--cl1);
    --whydf: var(--cl1);
    --lbds: 255, 255, 255;
    --lsdb: 56, 58, 70;
    --text: 85, 85, 85;
    --fixedtel: #d581b4;
}
body.dark {
    --bg: #26272d;
    --menutxtcl: 226, 226, 228;
    --intlinear: 45, 45, 58;
    --txtall: 226, 226, 228;
    --cl1: 85, 218, 57;
    --lbds: 56, 58, 70;
    --lsdb: 255, 255, 255;
    --pckdf: var(--cl1);
    --text: 226, 226, 228;
}

 .float { position:fixed; width:60px; height:60px; bottom:11px; right:5px; background-color:#25d366; color:#FFF; border-radius:50px; text-align:center; font-size:30px; box-shadow: 2px 2px 3px #999; z-index:100; } .my-float { margin-top:16px; }body { font-family: sans-serif; font-size: 16px; line-height: 1.5; } /* Helpers */ .is-hidden { display: none !important; } .is-desktop { display: block; } @media (max-width: 768px) { .is-desktop { display: none !important; } } .is-mobile { display: none !important; } @media (max-width: 768px) { .is-mobile { display: block !important; } } .announcement { --base-font: inherit; --small-font: 0.75rem; --normal-font: 1rem; --medium-font: 1.25rem; --primary-color: #e86400; --secondary-color: #fff; --base-padding: 0.5rem; position: relative; display: flex; justify-content: center; align-items: center; background: var(--primary-color); font-family: var(--base-font-dev), sans-serif; padding: var(--base-padding); } @media (max-width: 768px) { .announcement { flex-direction: column-reverse; position: fixed; left: 0; bottom: 0; width: 100%; z-index: 4; } } /* Removes the announcement on Print */ @media print { .announcement { display: none; } } .announcement .text { padding: 0 1rem; color: var(--secondary-color); } @media (max-width: 768px) { .announcement .text { padding-bottom: var(--base-padding); } } .announcement input, .announcement button { font-family: var(--base-font); font-size: var(--small-font); letter-spacing: 1px; text-transform: uppercase; padding: var(--base-padding); border: 2px dashed var(--secondary-color); /* height: 36px; */ } .announcement input { background: var(--primary-color); color: var(--secondary-color); text-align: center; border-right: 0; font-size: 16px; } .announcement button { background: var(--secondary-color); color: var(--primary-color); cursor: pointer; box-shadow: none; border-radius: 0; font-size: 1rem; } .announcement #timer { /* font-weight: bold; */ background: var(--secondary-color); color: var(--primary-color); padding: var(--base-padding); margin-left: 1rem; width: 150px; text-align: center; border: 1px dashed var(--secondary-color); margin-right: 2.5rem; line-height: 1.3; } .announcement .coupon { display: flex; align-items: center; } @media (max-width: 768px) { .announcement .coupon { margin: 1rem auto; } } /* Style the close button (span) */ .announcement .close { cursor: pointer; position: absolute; top: -3rem; left: 50%; transform: translateX(-50%); padding: 0; background: var(--primary-color); color: var(--secondary-color); height: 35px; width: 35px; line-height: 35px; text-align: center; border-radius: 50%; } @media (min-width: 769px) { .announcement .close { top: 50%; transform: translateY(-50%); border-radius: 50%; left: inherit; right: 0.5rem; background: var(--secondary-color); color: var(--primary-color); } } .announcement .tooltip { position: relative; display: inline-block; color: var(--secondary-color); opacity: 1; line-height: inherit; font-size: inherit; z-index: inherit; } .announcement .tooltip .tooltiptext { visibility: hidden; position: absolute; bottom: 130%; left: 50%; background-color: #555; color: #fff; width: 170px; font-size: smaller; /* font-weight: bold; */ text-align: center; border-radius: 6px; padding: 5px; margin-left: -75px; opacity: 0; transition: opacity 0.3s; z-index: 1; } .announcement .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; bottom: -100%; } .announcement .tooltip .tooltiptext::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; top: -35%; transform: rotate(180deg); } @media (max-width: 768px) { .announcement .tooltip:hover .tooltiptext { bottom: 150%; } .announcement .tooltip .tooltiptext::after { top: 100%; transform: rotate(0deg); } }