/* --- Base Styles & Font Awesome Link Reminder --- */ /* Ensure you link Font Awesome in your for icons to work! */ :root { --dark-type-color: #5B0C29; /* 002d62 */ --light-type-color: #D01A33; --accent-color: #40e0d0; /* Your bright teal */ --max-content-width: 1200px; --spacing-large: 30px; --callstrap-bgcolor: #D01A33; --callstrap-offline-color: #D01A33; } body { margin: 0; font-family: Arial, sans-serif; } ul { list-style: none; padding: 0; margin: 0; } a { text-decoration: none; color: inherit; } /* --- 1. Top Bar Styles (Desktop Only) --- */ .top-bar { background-color: var(--dark-type-color); /* Dark Navy/Black color */ color: #b0c4de; /* Light text color */ font-size: 0.8rem; padding: 8px 0; display: none; /* Hidden by default, shown only on desktop */ } .top-bar-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; } .top-contact .contact-item { margin-right: 20px; } .top-contact i { color: var(light-type-color); /* Bright Teal color */ margin-right: 5px; } .top-social a { color: #b0c4de; margin-left: 15px; transition: color 0.3s; } .top-social a:hover { color: #40e0d0; /* Bright Teal hover */ } /* --- 2. Main Navigation Bar Styles --- */ .navbar-primary { background-color: #fff; border-bottom: 1px solid #eee; padding: 10px 0; } .navbar-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; } /* Logo Styling */ .logo a { display: flex; align-items: center; color: #002d62; /* Dark blue/Navy */ position: relative; /* Styles to match the logo image */ } .logo-img { height: 50px; /* Adjust height as needed */ width: auto; } .logo-text, .logo-tagline { display: none; /* Hide text for a cleaner look next to the logo image */ } /* --- Desktop Menu Styles --- */ .desktop-menu { display: none; /* Hidden on mobile */ } .nav-links { display: flex; align-items: center; gap: 20px; font-size: 0.9rem; font-weight: 600; } .nav-links a { color: var(--dark-type-color); /*color: #002d62;*/ padding: 10px 0; display: block; position: relative; transition: color 0.3s; } .nav-links a:hover, .nav-links a.active { /*color: #40e0d0;*/ color: var(--light-type-color); text-decoration: none; } .nav-links a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; /*background-color: #40e0d0;*/ background-color: var(--light-type-color); } .flag-icon { width: 20px; margin-right: 5px; vertical-align: middle; } .search-icon { margin-left: 20px; cursor: pointer; font-size: 1.1rem; color: #002d62; padding: 8px; background-color: #f0f0f0; border-radius: 50%; } /* Desktop Submenu (CÔNG CỤ) */ .has-submenu { position: relative; } .submenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background-color: white; border: 1px solid #ddd; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); z-index: 100; min-width: 250px; padding: 10px 0; display: none; /* Hidden by default */ } .has-submenu:hover .submenu { display: block; /* Show on hover */ } .submenu li a { padding: 8px 15px; white-space: nowrap; color: #333; } .submenu li a:hover { background-color: #f7f7f7; color: #40e0d0; } /* --- 3. Mobile Menu Toggle (Hamburger) --- */ .mobile-menu-toggle { display: flex; /* Shown on mobile */ flex-direction: column; justify-content: space-around; width: 30px; height: 25px; cursor: pointer; z-index: 200; /* Above all content */ } .mobile-menu-toggle span { display: block; height: 3px; width: 100%; /*background: #40e0d0;*/ background-color: var(--dark-type-color); border-radius: 5px; transition: all 0.3s ease-in-out; } /* Hamburger animation */ .mobile-menu-toggle.active span:nth-child(1) { transform: translateY(11px) rotate(45deg); } .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; } .mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); } /* --- 4. Mobile Off-Canvas Menu --- */ .mobile-menu { position: fixed; top: 0; right: -100%; /* Initially off-screen to the right */ width: 100%; max-width: 300px; /* Optional max width */ height: 100%; /*background-color: #002d62;*/ background-color: var(--dark-type-color); box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2); z-index: 190; transition: right 0.4s ease-in-out; padding-top: 60px; /* Space for the fixed header */ } .mobile-menu.open { right: 0; /* Slide in */ } .mobile-menu-inner { height: 100%; overflow-y: auto; padding-bottom: 20px; } .mobile-nav-links li a { color: white; padding: 15px 20px; display: block; border-bottom: 1px solid #1a2a3b; /* Divider */ transition: background-color 0.3s; text-decoration: none; } .mobile-nav-links li a:hover, .mobile-nav-links li.active-mobile a { background-color: #40e0d0; color: #002d62; font-weight: 700; } .mobile-menu .dropdown-menu a { color: var(--dark-type-color); } /* Mobile Submenu */ .has-mobile-submenu a { display: flex; justify-content: space-between; align-items: center; } .mobile-submenu { background-color: #1a2a3b; /* Slightly darker background for submenu */ max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; } .mobile-submenu.open { max-height: 200px; /* Set max-height large enough to hold all items */ } .mobile-submenu li a { padding-left: 40px; font-size: 0.95rem; border-bottom: none; } /* Mobile Search */ .mobile-search { display: flex; padding: 20px; background-color: #f7f7f7; margin: 20px 20px 0; border-radius: 8px; } .mobile-search .search-input { flex-grow: 1; border: none; padding: 10px; font-size: 1rem; background-color: transparent; } .mobile-search .search-btn { color: #002d62; font-size: 1.2rem; align-self: center; cursor: pointer; } /* Basic Reset and Layout (Adjust to your page's styling) */ .language-selector { position: relative; /* Crucial for positioning the absolute dropdown */ display: inline-block; cursor: pointer; font-family: "Montserrat", sans-serif; z-index: 10; /* Ensure it stays on top of other content */ } /* Style for the visible language display */ .selected-language { background-color: #f0f0f0; padding: 8px 15px; border-radius: 5px; display: flex; align-items: center; font-weight: bold; color: var(--dark-type-color); } .flag-icon { margin-right: 8px; font-size: 1.2em; /* Adjust flag size */ } /* Style for the dropdown menu */ .dropdown-menu { position: absolute; top: 100%; /* Position it right below the selected language */ right: 0; /* Align to the right side of the selected-language element */ min-width: 200px; background-color: #ffffff; border: 1px solid #ccc; border-top: none; /* Optional: to make it look continuous */ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); display: none; /* **Default state: HIDDEN** */ padding: 5px 0; border-radius: 0 0 5px 5px; font-size: .8em; } /* Style for individual language links */ .dropdown-item { color: #333; padding: 10px 15px; text-decoration: none; display: flex; align-items: center; } .dropdown-item:hover { background-color: #e0e0e0; } /* **The Hover Magic** */ .language-selector:hover .dropdown-menu { display: block; /* **Show the menu when the main container is hovered** */ } /* --- 5. Media Queries (Responsiveness) --- */ @media (min-width: 992px) { /* Show Top Bar and Desktop Menu on large screens */ .top-bar { display: block; } .desktop-menu { display: flex; } /* Hide mobile elements on large screens */ .mobile-menu-toggle, .mobile-menu { display: none; } /* Adjust logo area on desktop */ .logo a { flex-direction: row; } /* Basic Reset and Layout (Adjust to your page's styling) */ .language-selector { position: relative; /* Crucial for positioning the absolute dropdown */ display: inline-block; cursor: pointer; font-family: "Montserrat", sans-serif; z-index: 10; /* Ensure it stays on top of other content */ font-size: .8em; } /* Style for the visible language display */ .selected-language { background-color: #f0f0f0; padding: 8px 15px; border-radius: 5px; display: flex; align-items: center; font-weight: bold; color: var(--dark-type-color); } .flag-icon { margin-right: 8px; font-size: 1em; /* Adjust flag size */ } /* Style for the dropdown menu */ .dropdown-menu { position: absolute; top: 100%; /* Position it right below the selected language */ right: 0; /* Align to the right side of the selected-language element */ min-width: 200px; background-color: #ffffff; border: 1px solid #ccc; border-top: none; /* Optional: to make it look continuous */ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); display: none; /* **Default state: HIDDEN** */ padding: 5px 0; border-radius: 0 0 5px 5px; font-size: 1em; } /* Style for individual language links */ .dropdown-item { color: #333; padding: 10px 15px; text-decoration: none; display: flex; align-items: center; } } @media (max-width: 991px) { /* Hide Top Bar and Desktop Menu on small screens */ .top-bar, .desktop-menu { display: none; } /* Show mobile menu toggle on small screens */ .mobile-menu-toggle { display: flex; } .navbar-primary { position: sticky; top: 0; left: 0; width: 100%; z-index: 200; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } } /*CALL BUTTON*/ #calltrap-btn { background-color: var(--callstrap-bgcolor); -webkit-border-radius: 50%; border-radius: 50%; display: block; height: 60px; line-height: 100px; opacity: 0.7; position: fixed; right: 22px; /*top: 155px;*/ bottom: 50px; text-align: center; width: 60px; z-index: 9999; -webkit-animation: calltrap_opacity 3s infinite linear; -moz-animation: calltrap_opacity 3s infinite linear; -o-animation: calltrap_opacity 3s infinite linear; animation: calltrap_opacity 3s infinite linear } #calltrap-btn.calltrap_offline { background-color: var(--callstrap-offline-color); } #calltrap-ico { width: 32px; height: 32px; position: absolute; margin: auto; top: 0px; right: 0px; bottom: 0px; left: 0px; border: 0; -webkit-border-radius: 50% !important; border-radius: 50% !important; -o-background-clip: padding-box; background-clip: padding-box; -webkit-animation: uptocallmini 1.5s 0s ease-out infinite; -moz-animation: uptocallmini 1.5s 0s ease-out infinite; -o-animation: uptocallmini 1.5s 0s ease-out infinite; animation: uptocallmini 1.5s 0s ease-out infinite } .calltrap_offline #calltrap-ico { -webkit-animation: uptocallmini_offline 1.5s 0s ease-out infinite; -moz-animation: uptocallmini_offline 1.5s 0s ease-out infinite; -o-animation: uptocallmini_offline 1.5s 0s ease-out infinite; animation: uptocallmini_offline 1.5s 0s ease-out infinite } #calltrap-overlay { background-color: #191919; background-color: rgba(25, 25, 25, 0.9); position: fixed; z-index: 9998; width: 100%; height: 100%; left: 0; top: 0; text-align: center; display: none } #calltrap-overlay .b-calltrap-overlay { display: table; width: 100%; height: 100% } #calltrap-overlay .b-calltrap-overlay__header, #calltrap-overlay .b-calltrap-overlay__body, #calltrap-overlay .b-calltrap-overlay__footer { display: table-row; padding: 0; margin: 0 } #calltrap-overlay .b-calltrap-overlay__header-block, #calltrap-overlay .b-calltrap-overlay__body-block, #calltrap-overlay .b-calltrap-overlay__footer-block { display: table-cell; vertical-align: middle; text-align: center } #calltrap-overlay .b-calltrap-overlay__body-block { padding: 0 7px } #calltrap-overlay .b-calltrap-overlay__header, #calltrap-overlay .b-calltrap-overlay__footer { height: 1px } #calltrap-overlay .b-calltrap__container { background-color: white; border: 5px solid var(--callstrap-bgcolor); -webkit-border-radius: 3px; border-radius: 3px; margin: 0; padding: 0; max-width: 500px; display: block; margin: 0 auto; font-size: 16px; line-height: 1.3; position: relative; font-family: Tahoma, Arial, self-serif !important } @media screen and (min-width: 1px) and (max-width: 500px) { #calltrap-overlay .b-calltrap__container { width: 290px } } #calltrap-overlay .b-calltrap__close { display: block; position: absolute; right: 20px; top: 20px; width: 20px; height: 20px; opacity: 0.5; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease } #calltrap-overlay .b-calltrap__close:hover { opacity: 1 } #calltrap-success, #calltrap-form { display: block } #calltrap-success .b-calltrap_form__fields, #calltrap-form .b-calltrap_form__fields { margin: 20px 25px 35px } #calltrap-success .b-calltrap_form__title, #calltrap-form .b-calltrap_form__title { font-size: 20px; margin: 0 0 17px; text-align: left } @media screen and (min-width: 1px) and (max-width: 500px) { #calltrap-success .b-calltrap_form__title, #calltrap-form .b-calltrap_form__title { padding-right: 20px } } #calltrap-success .b-calltrap_form__text, #calltrap-form .b-calltrap_form__text { text-align: left } #calltrap-success .b-calltrap_form__text p, #calltrap-form .b-calltrap_form__text p { margin: 0 0 0.55em } #calltrap-success .b-calltrap_form__input, #calltrap-form .b-calltrap_form__input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 16px; padding: 0 15px 0; height: 44px; line-height: 40px; background-color: white; border: 2px solid #ccc; -webkit-border-radius: 3px; border-radius: 3px; display: block; width: 100%; outline: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease } @media screen and (min-width: 1px) and (max-width: 500px) { #calltrap-success .b-calltrap_form__input, #calltrap-form .b-calltrap_form__input { margin-bottom: 13px } } #calltrap-success .b-calltrap_form__input.error, #calltrap-form .b-calltrap_form__input.error { background-color: #ffc0c0; color: red; border-color: red } #calltrap-success .b-calltrap_form__input:disabled, #calltrap-form .b-calltrap_form__input:disabled { background-color: #eee; border-color: #bdbdbd; cursor: default } #calltrap-success .b-calltrap_form__input:focus, #calltrap-form .b-calltrap_form__input:focus { border: 2px solid var(--callstrap-bgcolor) } #calltrap-success .b-calltrap_form__submit, #calltrap-form .b-calltrap_form__submit { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: var(--callstrap-bgcolor); border: 2px solid var(--callstrap-bgcolor); -webkit-border-radius: 3px; border-radius: 3px; border: medium none; color: #fff; cursor: pointer; font-size: 16px; padding: 0; height: 44px; line-height: 40px; outline: medium none; display: inline-block; width: 180px; text-align: center; outline: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease } @media screen and (min-width: 1px) and (max-width: 500px) { #calltrap-success .b-calltrap_form__submit, #calltrap-form .b-calltrap_form__submit { width: 100% } } #calltrap-success .b-calltrap_form__submit:hover, #calltrap-form .b-calltrap_form__submit:hover { background-color: #1c658c } #calltrap-success .b-calltrap_form__submit:disabled, #calltrap-form .b-calltrap_form__submit:disabled { background-color: #bdbdbd !important; cursor: default } #calltrap-success .b-calltrap_form__controls, #calltrap-form .b-calltrap_form__controls { margin: 20px 0 0; padding: 0; padding: 0 200px 0 0 } @media screen and (min-width: 1px) and (max-width: 500px) { #calltrap-success .b-calltrap_form__controls, #calltrap-form .b-calltrap_form__controls { padding: 0 } } #calltrap-success .b-calltrap_form__controls-item, #calltrap-form .b-calltrap_form__controls-item { position: relative; float: right } @media screen and (min-width: 1px) and (max-width: 500px) { #calltrap-success .b-calltrap_form__controls-item, #calltrap-form .b-calltrap_form__controls-item { float: none } } #calltrap-success .b-calltrap_form__controls-left, #calltrap-form .b-calltrap_form__controls-left { margin-left: -100%; width: 100% } @media screen and (min-width: 1px) and (max-width: 500px) { #calltrap-success .b-calltrap_form__controls-left, #calltrap-form .b-calltrap_form__controls-left { margin-left: 0 } } #calltrap-success .b-calltrap_form__controls-right, #calltrap-form .b-calltrap_form__controls-right { margin-right: -200px; overflow: visible; width: 200px; text-align: right } @media screen and (min-width: 1px) and (max-width: 500px) { #calltrap-success .b-calltrap_form__controls-right, #calltrap-form .b-calltrap_form__controls-right { margin-right: 0; width: auto; text-align: left } } #calltrap-success .b-calltrap_form__controls-clear, #calltrap-form .b-calltrap_form__controls-clear { clear: both } #calltrap-success { display: none } #calltrap-overlay.calltrap_offline .b-calltrap_form__submit { background-color: 1CB2ED } #calltrap-overlay.calltrap_offline .b-calltrap_form__submit:hover { background-color: #2e8c1c } #calltrap-overlay.calltrap_offline .b-calltrap_form__input:focus { border-color: var(--callstrap-offline-color); } #calltrap-overlay.calltrap_offline .b-calltrap__container { border-color: var(--callstrap-offline-color); } @-webkit-keyframes calltrap_opacity { 0% { opacity: 1 } 57% { opacity: 0.75 } 75% { opacity: 0.95 } 100% { opacity: 1 } } @-moz-keyframes calltrap_opacity { 0% { opacity: 1 } 57% { opacity: 0.75 } 75% { opacity: 0.95 } 100% { opacity: 1 } } @-o-keyframes calltrap_opacity { 0% { opacity: 1 } 57% { opacity: 0.75 } 75% { opacity: 0.95 } 100% { opacity: 1 } } @keyframes calltrap_opacity { 0% { opacity: 1 } 57% { opacity: 0.75 } 75% { opacity: 0.95 } 100% { opacity: 1 } } @-webkit-keyframes calltrap_spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 30% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 33% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 36% { -webkit-transform: rotate(10deg); transform: rotate(10deg) } 39% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 42% { -webkit-transform: rotate(10deg); transform: rotate(10deg) } 45% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 48% { -webkit-transform: rotate(10deg); transform: rotate(10deg); opacity: 1 } 51% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 54% { -webkit-transform: rotate(10deg); transform: rotate(10deg) } 57% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } @-moz-keyframes calltrap_spin { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg) } 30% { -moz-transform: rotate(0deg); transform: rotate(0deg) } 33% { -moz-transform: rotate(-10deg); transform: rotate(-10deg) } 36% { -moz-transform: rotate(10deg); transform: rotate(10deg) } 39% { -moz-transform: rotate(-10deg); transform: rotate(-10deg) } 42% { -moz-transform: rotate(10deg); transform: rotate(10deg) } 45% { -moz-transform: rotate(-10deg); transform: rotate(-10deg) } 48% { -moz-transform: rotate(10deg); transform: rotate(10deg); opacity: 1 } 51% { -moz-transform: rotate(-10deg); transform: rotate(-10deg) } 54% { -moz-transform: rotate(10deg); transform: rotate(10deg) } 57% { -moz-transform: rotate(0deg); transform: rotate(0deg) } } @-o-keyframes calltrap_spin { 0% { -o-transform: rotate(0deg); transform: rotate(0deg) } 30% { -o-transform: rotate(0deg); transform: rotate(0deg) } 33% { -o-transform: rotate(-10deg); transform: rotate(-10deg) } 36% { -o-transform: rotate(10deg); transform: rotate(10deg) } 39% { -o-transform: rotate(-10deg); transform: rotate(-10deg) } 42% { -o-transform: rotate(10deg); transform: rotate(10deg) } 45% { -o-transform: rotate(-10deg); transform: rotate(-10deg) } 48% { -o-transform: rotate(10deg); transform: rotate(10deg); opacity: 1 } 51% { -o-transform: rotate(-10deg); transform: rotate(-10deg) } 54% { -o-transform: rotate(10deg); transform: rotate(10deg) } 57% { -o-transform: rotate(0deg); transform: rotate(0deg) } } @keyframes calltrap_spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg) } 30% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg) } 33% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg) } 36% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg) } 39% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg) } 42% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg) } 45% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg) } 48% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); opacity: 1 } 51% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg) } 54% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg) } 57% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg) } } @-webkit-keyframes uptocallmini { 0% { -webkit-box-shadow: 0 0 8px 6px rgba(32, 116, 161, 0), 0 0 0px 0px transparent, 0 0 0px 0px rgba(32, 116, 161, 0); box-shadow: 0 0 8px 6px rgba(32, 116, 161, 0), 0 0 0px 0px transparent, 0 0 0px 0px rgba(32, 116, 161, 0) } 10% { -webkit-box-shadow: 0 0 8px 6px var(--callstrap-bgcolor), 0 0 12px 10px transparent, 0 0 12px 14px var(--callstrap-bgcolor); box-shadow: 0 0 8px 6px var(--callstrap-bgcolor), 0 0 12px 10px transparent, 0 0 12px 14px var(--callstrap-bgcolor) } 100% { -webkit-box-shadow: 0 0 8px 6px rgba(32, 116, 161, 0), 0 0 0px 40px transparent, 0 0 0px 40px rgba(32, 116, 161, 0); box-shadow: 0 0 8px 6px rgba(32, 116, 161, 0), 0 0 0px 40px transparent, 0 0 0px 40px rgba(32, 116, 161, 0) } } @-moz-keyframes uptocallmini { 0% { box-shadow: 0 0 8px 6px rgba(32, 116, 161, 0), 0 0 0px 0px transparent, 0 0 0px 0px rgba(32, 116, 161, 0) } 10% { box-shadow: 0 0 8px 6px var(--callstrap-bgcolor), 0 0 12px 10px transparent, 0 0 12px 14px var(--callstrap-bgcolor) } 100% { box-shadow: 0 0 8px 6px rgba(32, 116, 161, 0), 0 0 0px 40px transparent, 0 0 0px 40px rgba(32, 116, 161, 0) } } @-o-keyframes uptocallmini { 0% { box-shadow: 0 0 8px 6px rgba(32, 116, 161, 0), 0 0 0px 0px transparent, 0 0 0px 0px rgba(32, 116, 161, 0) } 10% { box-shadow: 0 0 8px 6px var(--callstrap-bgcolor), 0 0 12px 10px transparent, 0 0 12px 14px var(--callstrap-bgcolor) } 100% { box-shadow: 0 0 8px 6px rgba(32, 116, 161, 0), 0 0 0px 40px transparent, 0 0 0px 40px rgba(32, 116, 161, 0) } } @keyframes uptocallmini { 0% { -webkit-box-shadow: 0 0 8px 6px rgba(32, 116, 161, 0), 0 0 0px 0px transparent, 0 0 0px 0px rgba(32, 116, 161, 0); box-shadow: 0 0 8px 6px rgba(32, 116, 161, 0), 0 0 0px 0px transparent, 0 0 0px 0px rgba(32, 116, 161, 0) } 10% { -webkit-box-shadow: 0 0 8px 6px var(--callstrap-bgcolor), 0 0 12px 10px transparent, 0 0 12px 14px var(--callstrap-bgcolor); box-shadow: 0 0 8px 6px var(--callstrap-bgcolor), 0 0 12px 10px transparent, 0 0 12px 14px var(--callstrap-bgcolor) } 100% { -webkit-box-shadow: 0 0 8px 6px rgba(32, 116, 161, 0), 0 0 0px 40px transparent, 0 0 0px 40px rgba(32, 116, 161, 0); box-shadow: 0 0 8px 6px rgba(32, 116, 161, 0), 0 0 0px 40px transparent, 0 0 0px 40px rgba(32, 116, 161, 0) } } @-webkit-keyframes uptocallmini_offline { 0% { -webkit-box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0px 0px transparent, 0 0 0px 0px rgba(53, 161, 32, 0); box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0px 0px transparent, 0 0 0px 0px rgba(53, 161, 32, 0) } 10% { -webkit-box-shadow: 0 0 8px 6px #35A120, 0 0 12px 10px transparent, 0 0 12px 14px #35A120; box-shadow: 0 0 8px 6px #35A120, 0 0 12px 10px transparent, 0 0 12px 14px #35A120 } 100% { -webkit-box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0px 40px transparent, 0 0 0px 40px rgba(53, 161, 32, 0); box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0px 40px transparent, 0 0 0px 40px rgba(53, 161, 32, 0) } } @-moz-keyframes uptocallmini_offline { 0% { box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0px 0px transparent, 0 0 0px 0px rgba(53, 161, 32, 0) } 10% { box-shadow: 0 0 8px 6px #35A120, 0 0 12px 10px transparent, 0 0 12px 14px #35A120 } 100% { box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0px 40px transparent, 0 0 0px 40px rgba(53, 161, 32, 0) } } @-o-keyframes uptocallmini_offline { 0% { box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0px 0px transparent, 0 0 0px 0px rgba(53, 161, 32, 0) } 10% { box-shadow: 0 0 8px 6px #35A120, 0 0 12px 10px transparent, 0 0 12px 14px #35A120 } 100% { box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0px 40px transparent, 0 0 0px 40px rgba(53, 161, 32, 0) } } @keyframes uptocallmini_offline { 0% { -webkit-box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0px 0px transparent, 0 0 0px 0px rgba(53, 161, 32, 0); box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0px 0px transparent, 0 0 0px 0px rgba(53, 161, 32, 0) } 10% { -webkit-box-shadow: 0 0 8px 6px var(--callstrap-offline-color), 0 0 12px 10px transparent, 0 0 12px 14px var(--callstrap-offline-color);; box-shadow: 0 0 8px 6px var(--callstrap-offline-color), 0 0 12px 10px transparent, 0 0 12px 14px var(--callstrap-offline-color); } 100% { -webkit-box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0px 40px transparent, 0 0 0px 40px rgba(53, 161, 32, 0); box-shadow: 0 0 8px 6px rgba(53, 161, 32, 0), 0 0 0px 40px transparent, 0 0 0px 40px rgba(53, 161, 32, 0) } }