@import "https://fonts.googleapis.com/css?family=Montserrat:100";
@import "https://fonts.googleapis.com/css?family=Montserrat:300";
@import "https://fonts.googleapis.com/css?family=Montserrat:400";
@import "https://fonts.googleapis.com/css?family=Montserrat:600";
@import "https://fonts.googleapis.com/css?family=Montserrat:700";
@font-face{font-family:Mark for MC;font-weight:300;src:url(https://raw.githubusercontent.com/Mastercard/made/e9fdbad3f289d890e189d79c0d72c3fa4825f185/storybook/stories/assets/fonts/MarkWebPro-ExtraLightW01Rg.woff)format("woff");src:url(https://raw.githubusercontent.com/Mastercard/made/e9fdbad3f289d890e189d79c0d72c3fa4825f185/storybook/stories/assets/fonts/MarkWebPro-ExtraLightW01Rg.woff2)format("woff2");src:url(https://raw.githubusercontent.com/Mastercard/made/e9fdbad3f289d890e189d79c0d72c3fa4825f185/storybook/stories/assets/fonts/MarkWebPro-ExtraLightW01Rg.ttf)format("truetype");font-display:swap}@font-face{font-family:Mark for MC;font-weight:400;src:url(https://raw.githubusercontent.com/Mastercard/made/e9fdbad3f289d890e189d79c0d72c3fa4825f185/storybook/stories/assets/fonts/MarkWebPro-LightW01Regular.woff)format("woff");src:url(https://raw.githubusercontent.com/Mastercard/made/e9fdbad3f289d890e189d79c0d72c3fa4825f185/storybook/stories/assets/fonts/MarkWebPro-LightW01Regular.woff2)format("woff2");src:url(https://raw.githubusercontent.com/Mastercard/made/e9fdbad3f289d890e189d79c0d72c3fa4825f185/storybook/stories/assets/fonts/MarkWebPro-LightW01Regular.ttf)format("truetype");font-display:swap}@font-face{font-family:Mark for MC;font-weight:500;src:url(https://raw.githubusercontent.com/Mastercard/made/e9fdbad3f289d890e189d79c0d72c3fa4825f185/storybook/stories/assets/fonts/MarkWebW01Regular.woff)format("woff");src:url(https://raw.githubusercontent.com/Mastercard/made/e9fdbad3f289d890e189d79c0d72c3fa4825f185/storybook/stories/assets/fonts/MarkWebW01Regular.woff2)format("woff2");src:url(https://raw.githubusercontent.com/Mastercard/made/e9fdbad3f289d890e189d79c0d72c3fa4825f185/storybook/stories/assets/fonts/MarkWebW01Regular.ttf)format("truetype");font-display:swap}@font-face{font-family:Mark for MC;font-weight:600;src:url(https://raw.githubusercontent.com/Mastercard/made/e9fdbad3f289d890e189d79c0d72c3fa4825f185/storybook/stories/assets/fonts/MarkForMCNarrowW00-Medium.woff)format("woff");src:url(https://raw.githubusercontent.com/Mastercard/made/e9fdbad3f289d890e189d79c0d72c3fa4825f185/storybook/stories/assets/fonts/MarkForMCNarrowW00-Medium.woff2)format("woff2");src:url(https://raw.githubusercontent.com/Mastercard/made/e9fdbad3f289d890e189d79c0d72c3fa4825f185/storybook/stories/assets/fonts/MarkForMCNarrowW00-Medium.ttf)format("truetype");font-display:swap}@font-face{font-family:Mark for MC;font-weight:700;src:url(https://raw.githubusercontent.com/Mastercard/made/e9fdbad3f289d890e189d79c0d72c3fa4825f185/storybook/stories/assets/fonts/MarkWebPro-BoldW01Regular.woff)format("woff");src:url(https://raw.githubusercontent.com/Mastercard/made/e9fdbad3f289d890e189d79c0d72c3fa4825f185/storybook/stories/assets/fonts/MarkWebPro-BoldW01Regular.woff2)format("woff2");src:url(https://raw.githubusercontent.com/Mastercard/made/e9fdbad3f289d890e189d79c0d72c3fa4825f185/storybook/stories/assets/fonts/MarkWebPro-BoldW01Regular.ttf)format("truetype");font-display:swap}
body{margin:0}.app-container{display:flex}.app{color:#333;max-width:100%;margin:0 auto;padding:0;font-family:Mark For MC}.section-box-api-client-result{background:#3c77e408 3%;border:1px solid #3c77e4;border-radius:8px;margin-top:24px;padding:8px}.section-box-api-client-result .close-icon{float:right;cursor:pointer;color:#14141380;background:0 0;border:none;width:20px;height:20px;margin-top:0;font-size:24px;position:relative;top:-9px;right:0}.generate-key-form{align-items:center;margin-top:5px;display:flex}.api-client-form{margin-top:13px}.form-label{margin-right:10px;font-size:12px;font-weight:300}.api-client-name{border:1px solid #ccc;border-radius:5px;width:393px;margin-right:10px;padding:8px;font-size:12px;font-weight:300;display:block}.api-client-name::placeholder{color:#bbb}.api-client-response-value{align-items:center;margin-top:5px;display:flex}.generate-key-subtitle{font-size:12px;font-weight:600}.api-client-response{margin-top:10px}.tooltip{display:inline-block;position:relative}.tooltip .tooltiptext{visibility:hidden;color:#000;text-align:center;z-index:1;background-color:#fff;border-radius:6px;width:46px;padding:8px 16px;font-size:12px;font-weight:300;position:absolute;top:-3px;left:120%;box-shadow:0 2px 10px #14141326}.tooltip .tooltiptext:after{content:"";border:5px solid #0000;border-right-color:#fff;margin-top:-5px;position:absolute;top:50%;right:100%}.tooltip .tooltiptext,.tooltip:hover .tooltiptextPermission{visibility:visible}.noVisibleTooltip{visibility:hidden;display:none}.tooltip .tooltiptextPermission{visibility:hidden;color:#000;text-align:center;z-index:1;background-color:#fff;border-radius:6px;width:70px;padding:8px 16px;font-size:12px;font-weight:300;position:absolute;top:-3px;right:110%;box-shadow:0 2px 10px #14141326}.tooltip .tooltiptextPermission:after{content:"";border:5px solid #0000;border-right-color:#fff;margin-top:-5px;position:absolute;top:50%;left:100%}.badge{color:#5c5c5c;text-transform:uppercase;text-align:center;background-color:#ebebeb;border-radius:4px;width:75px;margin-left:8px;padding:2px 6px;font-size:7px;font-weight:700;display:inline-block}.icon-hidden{display:none}.icon-visible{display:block}.option-button-section label:hover,.option-button-section input:hover{cursor:pointer}.content{flex-direction:column;flex:1;justify-content:flex-start;align-items:stretch;min-width:0;display:flex}.content section{width:100%;max-width:720px;margin:0 auto}@media (max-width:900px){.app-container{flex-direction:column}.sidebar{width:100%;height:auto;min-height:64px;box-shadow:none;border-bottom:1px solid #ebebeb;border-right:none;padding:16px 8px}.content{width:100%;min-width:0;padding:0}}
.primary-button{cursor:pointer;color:#fff;text-align:center;background:#3c77e4;border:none;border-radius:4px;gap:6px;width:74px;height:27px;font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;line-height:14.63px;transition:background-color .3s}.primary-button:enabled:hover{background:#3160b8}.primary-button:enabled:active:hover{background:#2d57a7}.primary-button:enabled:focus-visible{background:#3c77e4;outline:none;box-shadow:0 0 0 4px #fff,0 0 0 6px #2f80ed}button:disabled{cursor:default;background:#bdbdbd}.back-button{cursor:pointer;color:#3c77e4;text-align:center;background:0 0;border:none;border-radius:4px;gap:6px;width:74px;height:27px;font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;line-height:14.63px;transition:background-color .3s}.back-button:enabled:hover,.back-button:enabled:active:hover{background:#3c77e412}.back-button:enabled:focus-visible{background:#3c77e412;outline:none;box-shadow:0 0 0 4px #fff,0 0 0 6px #3c77e412}
.secondary-button{cursor:pointer;color:#000;text-align:center;background:#cacaca33;border:none;border-radius:4px;gap:6px;width:74px;height:27px;font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;line-height:14.63px;transition:background-color .3s}.secondary-button:enabled:hover,.secondary-button:enabled:active:hover{background:#cacaca66}.secondary-button:enabled:focus-visible{background:#cacaca66;outline:none;box-shadow:0 0 0 4px #fff,0 0 0 6px #2f80ed}.secondary-button:disabled{cursor:default;color:#fff;background:#bdbdbd}
.outline-button{cursor:pointer;color:#3c77e4;text-align:center;background-color:#fff;border:2px solid #3c77e4;border-radius:4px;width:88px;height:27px;padding:6px 20px;font-family:Montserrat;font-size:12px;font-weight:600;transition:background-color .3s}.outline-button:enabled:hover{background:#ebf1fc}.outline-button:enabled:active:hover{color:#2d57a7;border:2px solid #2d57a7}.outline-button:enabled:focus-visible{outline:none;box-shadow:0 0 0 4px #fff,0 0 0 6px #3c77e4}.outline-button:disabled{color:#bdbdbd;cursor:default;border:2px solid #bdbdbd}
.delete-button{cursor:pointer;color:#fff;text-align:center;background:#dc2b3d;border:none;border-radius:4px;gap:6px;width:74px;height:27px;font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;line-height:14.63px;transition:background-color .3s}.delete-button:enabled:hover,.delete-button:enabled:active:hover{background:#a82226}.delete-button:enabled:focus-visible{background:#a82226;outline:none;box-shadow:0 0 0 4px #fff,0 0 0 6px #2f80ed}button:disabled{cursor:default;background:#bdbdbd}
.text-button{cursor:pointer;color:#3c77e4;text-align:center;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;gap:10px;width:60px;height:23px;font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;line-height:14.63px;transition:background-color .3s;display:flex}.text-button:enabled:hover{background:#ebf1fc;border-radius:4px}.text-button:enabled:focus{background:0 0;outline:none;box-shadow:0 0 #fff,0 0 0 2px #3c77e4}.text-button:enabled:active:hover{background:#3c77e433}.text-button:disabled{color:#bdbdbd;background:0 0}.text-button:disabled svg path{fill:#bdbdbd;cursor:default}