Introduction to Responsive Design in SAPUI5 and SAP Fiori

Introduction to Responsive Design in SAPUI5 and SAP Fiori

Reading time: 21 mins

Ameya Pimpalgaonkar shows how to design responsive SAPUI5 or SAP Fiori applications. SAP Fiori uses the SAPUI5 framework and therefore all responsive design techniques used in SAPUI5 can also be used while developing custom SAP Fiori applications. Key Concept Responsive Design is an approach that enables you to develop Web sites or applications independent of…

This content is for SAPinsider Monthly Subscription, SAPinsider Annual Subscription, and SAPinsider Premium Annual Subscription members only.
Log In Join Now

- SAP Application Maintenance
IT Operation Transformations Do Not Have to Be Complicated, and They Will Save You Money

Reading time: 10 mins
- SAP Application Maintenance
Is it Time to Break the Status Quo? Automated Retrofitting is the Answer

Reading time: 2 mins
- SAP Application Maintenance
Application Managed Services: We Manage Support While You Manage the Business

Reading time: 1 min
- SAP Application Maintenance
Mastering Application Management Support with Techwave

Reading time: 2 mins

img.wp-smiley,img.emoji{display:inline !important;border:none !important;box-shadow:none !important;height:1em !important;width:1em !important;margin:0 .07em !important;vertical-align:-.1em !important;background:none !important;padding:0 !important;}.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em;}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none;}:root{--wp--preset--aspect-ratio--square:1;--wp--preset--aspect-ratio--4-3:4/3;--wp--preset--aspect-ratio--3-4:3/4;--wp--preset--aspect-ratio--3-2:3/2;--wp--preset--aspect-ratio--2-3:2/3;--wp--preset--aspect-ratio--16-9:16/9;--wp--preset--aspect-ratio--9-16:9/16;--wp--preset--color--black:#000;--wp--preset--color--cyan-bluish-gray:#abb8c3;--wp--preset--color--white:#fff;--wp--preset--color--pale-pink:#f78da7;--wp--preset--color--vivid-red:#cf2e2e;--wp--preset--color--luminous-vivid-orange:#ff6900;--wp--preset--color--luminous-vivid-amber:#fcb900;--wp--preset--color--light-green-cyan:#7bdcb5;--wp--preset--color--vivid-green-cyan:#00d084;--wp--preset--color--pale-cyan-blue:#8ed1fc;--wp--preset--color--vivid-cyan-blue:#0693e3;--wp--preset--color--vivid-purple:#9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple:linear-gradient(135deg,rgba(6,147,227,1) 0%,#9b51e0 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan:linear-gradient(135deg,#7adcb4 0%,#00d082 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange:linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red:linear-gradient(135deg,rgba(255,105,0,1) 0%,#cf2e2e 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray:linear-gradient(135deg,#eee 0%,#a9b8c3 100%);--wp--preset--gradient--cool-to-warm-spectrum:linear-gradient(135deg,#4aeadc 0%,#9778d1 20%,#cf2aba 40%,#ee2c82 60%,#fb6962 80%,#fef84c 100%);--wp--preset--gradient--blush-light-purple:linear-gradient(135deg,#ffceec 0%,#9896f0 100%);--wp--preset--gradient--blush-bordeaux:linear-gradient(135deg,#fecda5 0%,#fe2d2d 50%,#6b003e 100%);--wp--preset--gradient--luminous-dusk:linear-gradient(135deg,#ffcb70 0%,#c751c0 50%,#4158d0 100%);--wp--preset--gradient--pale-ocean:linear-gradient(135deg,#fff5cb 0%,#b6e3d4 50%,#33a7b5 100%);--wp--preset--gradient--electric-grass:linear-gradient(135deg,#caf880 0%,#71ce7e 100%);--wp--preset--gradient--midnight:linear-gradient(135deg,#020381 0%,#2874fc 100%);--wp--preset--font-size--small:13px;--wp--preset--font-size--medium:20px;--wp--preset--font-size--large:36px;--wp--preset--font-size--x-large:42px;--wp--preset--spacing--20:.44rem;--wp--preset--spacing--30:.67rem;--wp--preset--spacing--40:1rem;--wp--preset--spacing--50:1.5rem;--wp--preset--spacing--60:2.25rem;--wp--preset--spacing--70:3.38rem;--wp--preset--spacing--80:5.06rem;--wp--preset--shadow--natural:6px 6px 9px rgba(0,0,0,.2);--wp--preset--shadow--deep:12px 12px 50px rgba(0,0,0,.4);--wp--preset--shadow--sharp:6px 6px 0px rgba(0,0,0,.2);--wp--preset--shadow--outlined:6px 6px 0px -3px rgba(255,255,255,1),6px 6px rgba(0,0,0,1);--wp--preset--shadow--crisp:6px 6px 0px rgba(0,0,0,1);}:where(.is-layout-flex){gap:.5em;}:where(.is-layout-grid){gap:.5em;}body .is-layout-flex{display:flex;}.is-layout-flex{flex-wrap:wrap;align-items:center;}.is-layout-flex > :is(*,div){margin:0;}body .is-layout-grid{display:grid;}.is-layout-grid > :is(*,div){margin:0;}:where(.wp-block-columns.is-layout-flex){gap:2em;}:where(.wp-block-columns.is-layout-grid){gap:2em;}:where(.wp-block-post-template.is-layout-flex){gap:1.25em;}:where(.wp-block-post-template.is-layout-grid){gap:1.25em;}.has-black-color{color:var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color:var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color:var(--wp--preset--color--white) !important;}.has-pale-pink-color{color:var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color:var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color:var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color:var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color:var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color:var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color:var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color:var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color:var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color:var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color:var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color:var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color:var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color:var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color:var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color:var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color:var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color:var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color:var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color:var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color:var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color:var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color:var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color:var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color:var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color:var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color:var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color:var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color:var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color:var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color:var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color:var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color:var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background:var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background:var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background:var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background:var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background:var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background:var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background:var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background:var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background:var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background:var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size:var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size:var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size:var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size:var(--wp--preset--font-size--x-large) !important;}:where(.wp-block-post-template.is-layout-flex){gap:1.25em;}:where(.wp-block-post-template.is-layout-grid){gap:1.25em;}:where(.wp-block-columns.is-layout-flex){gap:2em;}:where(.wp-block-columns.is-layout-grid){gap:2em;}:root :where(.wp-block-pullquote){font-size:1.5em;line-height:1.6;}.pmpro_checkout-field-username{display:none;}header.header .uk-container{width:100%;max-width:100%;padding-left:0;padding-right:0;}.pmpro_content_message a,.pmpro_content_message a:link{margin:0px 0px 0 0;}#mega-menu-wrap-tbex_menu.mega-stuck #mega-menu-tbex_menu>li.mega-menu-item>a.mega-menu-link{height:unset;}.sap-btn-yellow .mega-menu-link,.sap-btn-blue .mega-menu-link{display:flex !important;justify-content:center !important;align-items:center !important;}#mega-menu-wrap-tbex_menu #mega-menu-tbex_menu>li.mega-menu-megamenu>ul.mega-sub-menu{box-shadow:0px 10px 10px 0px rgba(0,0,0,.5);}.post-card-section{display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;width:100%;}.post-card-section .elementor-post__card{width:30.33%;margin:.75em;padding:.5em;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);}div.elementor-post__card div.elementor-post__text{text-align:center;}div.elementor-post__card div.elementor-post__text h6{font-size:1.1em !important;}div.elementor-post__card div.elementor-post__text h6.elementor-post__title{text-align:left;font-size:1.1em !important;font-weight:800;color:#1661be !important;height:95px !important;padding:.75em;overflow:hidden;text-overflow:ellipsis;}div.elementor-post__card div.elementor-post__text h6.elementor-post__title a{color:#000 !important;}div.elementor-post__card div.elementor-post__text div.elementor-post__excerpt{height:95px;overflow:hidden;text-overflow:ellipsis;}div.elementor-post__card div.elementor-post__text div.elementor-post__excerpt p{color:#777;font-size:.85em;padding:.5em;text-align:left !important;}div.elementor-post__card div.elementor-post__text a.elementor-size-sm{color:#000;background-color:#fff !important;text-align:center;margin-top:3rem;padding:.7em;font-weight:400;}div.elementor-post__card div.elementor-post__text a.elementor-size-sm:hover{transition:all .5s;background-color:#000 !important;text-decoration:none;color:#fff !important;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);}div.elementor-post__card div.elementor-post__meta-data{text-align:center;font-size:.75em;padding-top:1em;}@media screen and (max-width: 1060px){.post-card-section .elementor-post__card{width:40%;}}@media screen and (max-width: 545px){.post-card-section .elementor-post__card{width:90%;}}.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}div.nsl-container[data-align="left"]{text-align:left;}div.nsl-container[data-align="center"]{text-align:center;}div.nsl-container[data-align="right"]{text-align:right;}div.nsl-container div.nsl-container-buttons a[data-plugin="nsl"]{text-decoration:none;box-shadow:none;border:0;}div.nsl-container .nsl-container-buttons{display:flex;padding:5px 0;}div.nsl-container.nsl-container-block .nsl-container-buttons{display:inline-grid;grid-template-columns:minmax(145px,auto);}div.nsl-container-block-fullwidth .nsl-container-buttons{flex-flow:column;align-items:center;}div.nsl-container-block-fullwidth .nsl-container-buttons a,div.nsl-container-block .nsl-container-buttons a{flex:1 1 auto;display:block;margin:5px 0;width:100%;}div.nsl-container-inline{margin:-5px;text-align:left;}div.nsl-container-inline .nsl-container-buttons{justify-content:center;flex-wrap:wrap;}div.nsl-container-inline .nsl-container-buttons a{margin:5px;display:inline-block;}div.nsl-container-grid .nsl-container-buttons{flex-flow:row;align-items:center;flex-wrap:wrap;}div.nsl-container-grid .nsl-container-buttons a{flex:1 1 auto;display:block;margin:5px;max-width:280px;width:100%;}@media only screen and (min-width: 650px){div.nsl-container-grid .nsl-container-buttons a{width:auto;}}div.nsl-container .nsl-button{cursor:pointer;vertical-align:top;border-radius:4px;}div.nsl-container .nsl-button-default{color:#fff;display:flex;}div.nsl-container .nsl-button-icon{display:inline-block;}div.nsl-container .nsl-button-svg-container{flex:0 0 auto;padding:8px;display:flex;align-items:center;}div.nsl-container svg{height:24px;width:24px;vertical-align:top;}div.nsl-container .nsl-button-default div.nsl-button-label-container{margin:0 24px 0 12px;padding:10px 0;font-family:Helvetica,Arial,sans-serif;font-size:16px;line-height:20px;letter-spacing:.25px;overflow:hidden;text-align:center;text-overflow:clip;white-space:nowrap;flex:1 1 auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none;display:inline-block;}div.nsl-container .nsl-button-google[data-skin="dark"] .nsl-button-svg-container{margin:1px;padding:7px;border-radius:3px;background:#fff;}div.nsl-container .nsl-button-google[data-skin="light"]{border-radius:1px;box-shadow:0 1px 5px 0 rgba(0,0,0,.25);color:rgba(0,0,0,.54);}div.nsl-container .nsl-button-apple .nsl-button-svg-container{padding:0 6px;}div.nsl-container .nsl-button-apple .nsl-button-svg-container svg{height:40px;width:auto;}div.nsl-container .nsl-button-apple[data-skin="light"]{color:#000;box-shadow:0 0 0 1px #000;}div.nsl-container .nsl-button-facebook[data-skin="white"]{color:#000;box-shadow:inset 0 0 0 1px #000;}div.nsl-container .nsl-button-facebook[data-skin="light"]{color:#1877f2;box-shadow:inset 0 0 0 1px #1877f2;}div.nsl-container .nsl-button-spotify[data-skin="white"]{color:#191414;box-shadow:inset 0 0 0 1px #191414;}div.nsl-container .nsl-button-apple div.nsl-button-label-container{font-size:17px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}div.nsl-container .nsl-button-slack div.nsl-button-label-container{font-size:17px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}div.nsl-container .nsl-button-slack[data-skin="light"]{color:#000;box-shadow:inset 0 0 0 1px #ddd;}div.nsl-container .nsl-button-tiktok[data-skin="light"]{color:#161823;box-shadow:0 0 0 1px rgba(22,24,35,.12);}div.nsl-container .nsl-button-kakao{color:rgba(0,0,0,.85);}.nsl-clear{clear:both;}.nsl-container{clear:both;}.nsl-disabled-provider .nsl-button{filter:grayscale(1);opacity:.8;}div.nsl-container-inline[data-align="left"] .nsl-container-buttons{justify-content:flex-start;}div.nsl-container-inline[data-align="center"] .nsl-container-buttons{justify-content:center;}div.nsl-container-inline[data-align="right"] .nsl-container-buttons{justify-content:flex-end;}div.nsl-container-grid[data-align="left"] .nsl-container-buttons{justify-content:flex-start;}div.nsl-container-grid[data-align="center"] .nsl-container-buttons{justify-content:center;}div.nsl-container-grid[data-align="right"] .nsl-container-buttons{justify-content:flex-end;}div.nsl-container-grid[data-align="space-around"] .nsl-container-buttons{justify-content:space-around;}div.nsl-container-grid[data-align="space-between"] .nsl-container-buttons{justify-content:space-between;}#nsl-redirect-overlay{display:flex;flex-direction:column;justify-content:center;align-items:center;position:fixed;z-index:1000000;left:0;top:0;width:100%;height:100%;backdrop-filter:blur(1px);background-color:rgba(0,0,0,.32);}#nsl-redirect-overlay-container{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:white;padding:30px;border-radius:10px;}#nsl-redirect-overlay-spinner{content:"";display:block;margin:20px;border:9px solid rgba(0,0,0,.6);border-top:9px solid #fff;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.6);width:40px;height:40px;animation:nsl-loader-spin 2s linear infinite;}@keyframes nsl-loader-spin{0%{transform:rotate(0deg);}to{transform:rotate(360deg);}}#nsl-redirect-overlay-title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:18px;font-weight:bold;color:#3c434a;}#nsl-redirect-overlay-text{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;text-align:center;font-size:14px;color:#3c434a;}#nsl-notices-fallback{position:fixed;right:10px;top:10px;z-index:10000;}.admin-bar #nsl-notices-fallback{top:42px;}#nsl-notices-fallback > div{position:relative;background:#fff;border-left:4px solid #fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.1);margin:5px 15px 2px;padding:1px 20px;}#nsl-notices-fallback > div.error{display:block;border-left-color:#dc3232;}#nsl-notices-fallback > div.updated{display:block;border-left-color:#46b450;}#nsl-notices-fallback p{margin:.5em 0;padding:2px;}#nsl-notices-fallback > div:after{position:absolute;right:5px;top:5px;content:"×";display:block;height:16px;width:16px;line-height:16px;text-align:center;font-size:20px;cursor:pointer;}.banner-image::before{background-color:rgba(0,0,0,0);}.hero-section--vendor{padding:60px 0;}.big-tent-intro{padding-bottom:0 !important;}.eventContainer{width:100%;padding-right:15px;margin-right:auto;margin-left:auto;}.eventLeft{width:30%;float:left;padding-right:45px;display:inline-block;}.eventRight{width:70%;display:inline-block;}.eventCol{width:250px;height:250px;display:inline-block;padding-top:100px;margin:10px;border:1px #000 solid;text-align:center;color:#fff;}@media screen and (max-width: 600px){.eventLeft{width:100%;}}@media screen and (max-width: 600px){.eventRight{width:100%;}}.eventLink a:link{color:#fff;text-decoration:none;font-weight:bold;}.eventlink a:hover{color:#89cedd;}.eventNav a:link{font-size:.9em;text-transform:uppercase;font-weight:600;padding:5px;color:#2271b1;text-decoration:none;}.eventNav a:visited{font-size:.9em;text-transform:uppercase;font-weight:600;padding:5px;color:#2271b1;text-decoration:none;}.eventNav a:hover{color:#89cedd;text-decoration:none;font-weight:800;}.sessionType{color:#000;font-size:.8em;padding:5px;background-color:#ededed;border:1px #000 solid;text-transform:uppercase;font-weight:700;width:148px;text-align:center;}.eventProgram{color:#fff;font-size:.8em;padding:5px;background-color:#2271b1;border:1px #000 solid;text-transform:uppercase;font-weight:500;}.sessionBorder{border:1px #ccc solid;padding:20px;}.sessionHeader{font-size:1.6em;text-transform:uppercase;color:#343434;}.sessionTitle{padding-top:10px;text-transform:capitalize;font-weight:600;}.sessionHR{border-bottom:#ccc 1px solid;padding:5px;}.indentBullet{margin-left:50px;}.speakerImage{border-radius:100%;display:block;}.sessionPadding{padding-left:20px;}.sessionTable{background-color:#eff3f9;padding:20px;}.sessionBio{font-size:.8em;}.imgAppDev{background-image:url("https://cdn-ecdde.nitrocdn.com/GELvzvwrGxjomhTNxRaZxizPMPQqdXfY/assets/images/optimized/rev-61116f6/sapinsider.org/wp-content/uploads/2023/08/AppDev.png");background-repeat:no-repeat;}.imgAppDev.nitro-lazy{background-image:none !important;}.imgArt{background-image:url("https://cdn-ecdde.nitrocdn.com/GELvzvwrGxjomhTNxRaZxizPMPQqdXfY/assets/images/optimized/rev-61116f6/sapinsider.org/wp-content/uploads/2023/08/AppDev.png");background-repeat:no-repeat;}.imgArt.nitro-lazy{background-image:none !important;}.imgCyber{background-image:url("https://cdn-ecdde.nitrocdn.com/GELvzvwrGxjomhTNxRaZxizPMPQqdXfY/assets/images/optimized/rev-61116f6/sapinsider.org/wp-content/uploads/2023/08/Cyber.png");background-repeat:no-repeat;}.imgCyber.nitro-lazy{background-image:none !important;}.imgData{background-image:url("https://cdn-ecdde.nitrocdn.com/GELvzvwrGxjomhTNxRaZxizPMPQqdXfY/assets/images/optimized/rev-61116f6/sapinsider.org/wp-content/uploads/2023/08/Data.png");background-repeat:no-repeat;}.imgData.nitro-lazy{background-image:none !important;}.imgFinance{background-image:url("https://cdn-ecdde.nitrocdn.com/GELvzvwrGxjomhTNxRaZxizPMPQqdXfY/assets/images/optimized/rev-61116f6/sapinsider.org/wp-content/uploads/2023/08/Finance.png");background-repeat:no-repeat;}.imgFinance.nitro-lazy{background-image:none !important;}.imgGRC{background-image:url("https://cdn-ecdde.nitrocdn.com/GELvzvwrGxjomhTNxRaZxizPMPQqdXfY/assets/images/optimized/rev-61116f6/sapinsider.org/wp-content/uploads/2023/08/GRC.png");background-repeat:no-repeat;}.imgGRC.nitro-lazy{background-image:none !important;}.imgInt{background-image:url("https://cdn-ecdde.nitrocdn.com/GELvzvwrGxjomhTNxRaZxizPMPQqdXfY/assets/images/optimized/rev-61116f6/sapinsider.org/wp-content/uploads/2023/08/Enterprise.png");background-repeat:no-repeat;}.imgInt.nitro-lazy{background-image:none !important;}.imgInfra{background-image:url("https://cdn-ecdde.nitrocdn.com/GELvzvwrGxjomhTNxRaZxizPMPQqdXfY/assets/images/optimized/rev-61116f6/sapinsider.org/wp-content/uploads/2023/08/Infrastructure.png");background-repeat:no-repeat;}.imgInfra.nitro-lazy{background-image:none !important;}.imgCloud{background-image:url("https://cdn-ecdde.nitrocdn.com/GELvzvwrGxjomhTNxRaZxizPMPQqdXfY/assets/images/optimized/rev-61116f6/sapinsider.org/wp-content/uploads/2023/08/Cloud.png");background-repeat:no-repeat;}.imgCloud.nitro-lazy{background-image:none !important;}.imgBTP{background-image:url("https://cdn-ecdde.nitrocdn.com/GELvzvwrGxjomhTNxRaZxizPMPQqdXfY/assets/images/optimized/rev-61116f6/sapinsider.org/wp-content/uploads/2023/08/S4.png");background-repeat:no-repeat;}.imgBTP.nitro-lazy{background-image:none !important;}.imgS4{background-image:url("https://cdn-ecdde.nitrocdn.com/GELvzvwrGxjomhTNxRaZxizPMPQqdXfY/assets/images/optimized/rev-61116f6/sapinsider.org/wp-content/uploads/2023/08/BusTP.png");background-repeat:no-repeat;}.imgS4.nitro-lazy{background-image:none !important;}.top{--offset:50px;position:sticky;bottom:74%;margin-right:10px;place-self:end;margin-top:calc(50vh + var(--offset));text-decoration:none;padding:10px;font-family:sans-serif;color:#000;font-weight:600;background:#eee;white-space:nowrap;}.researchThumb{margin-right:15px !important;border:1px #000 solid;float:left;}.searchwp-live-search-results{opacity:0;transition:opacity .25s ease-in-out;-moz-transition:opacity .25s ease-in-out;-webkit-transition:opacity .25s ease-in-out;height:0;overflow:hidden;z-index:9999995;position:absolute;display:none;}.searchwp-live-search-results-showing{display:block;opacity:1;height:auto;overflow:auto;}.searchwp-live-search-no-results{padding:3em 2em 0;text-align:center;}.searchwp-live-search-no-min-chars:after{content:"Continue typing";display:block;text-align:center;padding:2em 2em 0;}