:root { --paddingfoot:80px; --footerbg:#f8f9fa; --bg-color:#f4f4f4; --bg-colorgrad:#f4f4f412; --bg-colorelev:#f4f4f9; --text-color: #000; --h1text:#333; --datatext:#666; --codemphc:#d9d9d9; --dropdown:#fff; --ddhigh:#e0e0e0; --ddbor:#ddd; --ddhov:#f2f2f2; --appverfed:#00b48166; --appverfedcol:#005e43; --metaheaddiv: #00000036; --whatscolp: #8a8a8a; --whatsbtncol:#007bff; --whatsbtnbghov:#60adff1a; --whatsbtncolhov:#0066d3; --dataelev: rgba(0, 0, 0, 0.2); --svgdata: #000; --copyfoot:color(display-p3 0.379 0.392 0.421); --footopt:color(display-p3 0.379 0.392 0.421); --hovbgslate2:color(display-p3 0.92 0.92 0.92); --fotdiv:color(display-p3 0.88 0.881 0.901); } body[data-theme="dark"] { --footerbg:#1a1a1a; --bg-color: #161616; --bg-colorgrad:rgba(22,22,22,0.55); --bg-colorelev:#10101000; --text-color: #ffffff; --h1text:#fefefe; --datatext:#dedede; --codemphc:#252525; --dropdown:#1d1d1d; --ddhigh:#2c2c2c; --ddbor:#2c2c2c; --ddhov:#3d3d3d; --appverfed: #00674966; --appverfedcol: #00ab7a; --metaheaddiv: #ffffff36; --whatscolp: #afafaf; --whatsbtncol:#0066d3; --whatsbtnbghov:#007bff1a; --whatsbtncolhov:#0066d3; --dataelev: rgba(255, 255, 255, 0.2); --svgdata: #fff; --copyfoot:color(display-p3 0.692 0.704 0.728); --footopt:color(display-p3 0.692 0.704 0.728); --hovbgslate2:color(display-p3 0.19 0.19 0.19 / 0.31); --fotdiv:color(display-p3 0.183 0.191 0.206); } body { background-color: var(--footerbg); } * { margin: 0; padding: 0; box-sizing: border-box } body, html { height: 100%; margin: 0; display: flex; flex-direction: column } .footerexpoao { background-color: var(--footerbg); display: flex; padding: 140px; font-family: Arial, sans-serif; border-top: 1px solid var(--ddbor); justify-content: center } .cetnerfoot { width: 60% } .footer-columns { display: flex; justify-content: space-evenly; margin-bottom: 20px } .footer-column { width: 22% } .footer-column h4 { font-size: 16px; margin-bottom: 30px; color: var(--h1text) } .footer-column ul { list-style: none; padding: 0; margin: 0 } .footer-column ul li { margin-bottom: 10px } .footer-column ul li a { display: flex; width: 100%; margin-left: -15px; text-decoration: none; font-weight: 400; color: var(--footopt) !important; padding-left: .875rem; padding-right: .875rem; padding-bottom: .5rem; padding-top: .5rem; border-radius: 6px; font-size: 17px; transition: all .3s ease } .footer-column ul li a:hover { background: var(--hovbgslate2); opacity: .8 } .footer-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--fotdiv); padding-top: 20px; width: 100% } .hrdiv { border: none; position: relative; width: 1px; height: 30px; background: var(--fotdiv); margin: 0 17px 0 5px; top: 0 } .footer-left { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 15px } .footgroup { display: flex; align-items: center } p.footcpoy { color: var(--copyfoot); font-weight: 400; font-size: 14px } .footer-logo { width: 40px; height: auto; margin-right: 15px } .social-links a { text-decoration: none; font-weight: 400; font-size: 20px; color: var(--footopt); padding: .5rem 10px; border-radius: 6px; transition: all .3s ease } .social-links a:hover { background: var(--hovbgslate2); opacity: .8 } .footer-right { display: flex; align-items: center; justify-content: flex-end } .custom-select { position: relative; width: 40%; max-width: 100%; font-size: 1.15rem; margin-top: 5px; margin-bottom: 2em } .select-button { width: 100%; font-size: 1.15rem; background-color: #fff; padding: .675em 1em; border: 1px solid #caced1; border-radius: .25rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center } .selected-value { display: flex; text-align: left; gap: 10px } .arrow { border-left: 5px solid transparent; border-right: 5px solid transparent; transition: transform ease-in-out .3s } .select-dropdown { position: absolute; list-style: none; width: 100%; box-shadow: 0 10px 25px rgba(0, 0, 0, .2); background-color: #fff; border: 1px solid #caced1; border-radius: 4px; padding: 0; margin-top: 10px; max-height: 0; overflow-y: auto; transition: .2s ease; opacity: 0; visibility: hidden } .select-dropdown:focus-within { box-shadow: 0 10px 25px rgba(94, 108, 233, .6) } .select-dropdown li { position: relative; cursor: pointer; display: flex; gap: 1rem; align-items: center } .select-dropdown li label { width: 100%; padding: 12px 18px; cursor: pointer; display: flex; gap: 1rem; align-items: center } .select-dropdown::-webkit-scrollbar { width: 7px } .select-dropdown::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 25px } .select-dropdown::-webkit-scrollbar-thumb { background: #ccc; border-radius: 25px } .select-dropdown li.selected { background-color: var(--ddhigh); font-weight: 700 } .select-dropdown li:hover:not(.selected) { background-color: var(--ddhov) } .select-dropdown input:checked~label { background-color: var(--ddhigh); font-weight: 700 } .select-dropdown input:focus~label { background-color: var(--ddhov) } .select-dropdown input[type=radio] { position: absolute; left: 0; opacity: 0 } .custom-select.active .arrow { transform: rotate(180deg) } .custom-select.active .select-dropdown { opacity: 1; visibility: visible; max-height: 200px } .custom-select.theme { margin-left: auto; width: 100%; margin-bottom: 0; position: relative } .custom-select.theme .select-dropdown { margin-bottom: -53px } .custom-select .select-button { display: flex; align-items: center; padding: 10px 15px; border: 1px solid var(--ddbor); border-radius: 5px; color: var(--text-color); background-color: var(--dropdown); cursor: pointer } .custom-select .selected-value { display: flex; align-items: center } .custom-select .selected-icon { margin-right: 8px } .custom-select .arrow { margin-left: auto } .custom-select .select-dropdown { display: none; position: absolute; color: var(--text-color); background-color: var(--dropdown); border: 1px solid var(--ddbor); list-style: none; padding: 10px 0; margin-top: 5px; border-radius: 5px; z-index: 10 } .custom-select.active .select-dropdown { display: block } .kapwkfpakspf { font-family: Arial, sans-serif; background-color: var(--bg-color); display: flex; flex-grow: 1; flex-direction: column; justify-content: center; align-items: center; height: auto; margin: 0 } .article-container { padding: 20px; padding-top: 5%; padding-bottom: 5%; max-width: 800px; width: 100%; height: 100%; border-radius: 10px } .div-container { color: #0ff; display: flex; align-items: center } .div-line { flex: 1; border: 1px solid #989df7; margin: 0 10px } .div-text { color: #989df7; font-size: x-large; font-weight: 700 } .article-header { text-align: left; margin-bottom: 20px; margin-top: 10% } .article-header h1 { font-size: 36px; color: var(--h1text); text-align: left } .article-meta { font-size: 14px; color: var(--datatext); margin-top: 10px } .article-meta .akwpfkpsak { display: flex; flex-direction: row; align-items: center; margin-right: 10px } .article-content { font-size: 18px; line-height: 1.6; color: var(--text); margin-top: 50px } .article-content p { margin-bottom: 20px } a.a-llpwl { text-decoration: none; color: inherit } a.a-kwofkaop { text-decoration: none; color: inherit } a.a-kwofkaop:hover { text-decoration: underline } img.imagoek { width: 100% } i.material-icons.kaosdko { font-size: 20px; margin-right: 10px } h3.kapwkfptitle { margin-bottom: 10px } hr { border: none; height: 2px; background-color: #4a90e2; margin: 20px 0 } hr.gradient { border: none; height: 2px; background: linear-gradient(to right, #0b8eff, #0064d3); margin: 20px 0 } span.koakwofko { text-decoration: none; color: var(--text); border: 2px solid var(--text); font-weight: 700; padding: 15px; border-radius: 100px; transition: all .2s ease } span.koakwofko.fill { border: none; background-color: #333; color: #fff } span.koakwofko.fill:hover { background: var(--btnbot3); border: none; color: var(--btnbot2) } span.koakwofko:hover { border: 2px solid var(--btnbot); color: var(--btnbot) } .akwpfkpska { display: flex; gap: 5px; margin-top: 10%; margin-bottom: 10% } img.img-fgappmobile { width: auto; height: 480px } .image-row { display: flex; gap: 10%; justify-content: center } .image-col { display: flex; flex-direction: column; gap: 10px; justify-content: center; margin-top: 50px; margin-bottom: 50px } span.spanfigure { text-align: center } .ulmmpawf { margin-left: 50px; margin-bottom: 30px } .ulmmpawf li { margin-bottom: 10px } code.codemph { overflow-wrap: break-word; word-break: normal; padding: .2em .4em; margin: 0; font-size: 100%; white-space: nowrap; background-color: var(--codemphc); border-radius: 6px } img.fglogo { width: 156px; height: auto } .columndiv { display: flex; align-items: center; gap: 9px; margin-bottom: 20px } div.columndiv text { font-size: larger; font-weight: 700; font-family: sans-serif } .awpflpsa-video { flex: 1; width: 100%; height: auto; aspect-ratio: 16/9 } @media (max-width:700px) { .image-row { flex-direction: column; align-items: center; gap: 20px } img.img-fgappmobile { width: 70%; height: auto } .akwpfkpska { flex-direction: column; gap: 10px } span.koakwofko { display: flex; width: 100%; justify-content: center } .custom-select { width: 100% } .footer-columns { flex-direction: column; gap: 2em; font-size: 25px } .footer-column ul li a { font-size: 30px } .footer-bottom { flex-direction: column-reverse; gap: 25px } .footer-column { width: 100% } .footerexpoao { padding: 20px; padding-bottom: 20px; padding-top: 40px } .cetnerfoot { width: 100% } }