.NewFolder__divider___Hz_XZ{border-top:1px solid #d9dcde;margin-top:.625rem}.NewFolder__verticalDivider___pnbN0{border-left:1px solid #69717a;height:100%;margin:0 1rem;width:1px}.NewFolder__container___rD8gt{border:1px solid #d9dcde;margin:1.25rem 1.25rem 0;padding:.875rem;width:auto}.NewFolder__txtBoxLabel___f5gAP{color:#69717a;display:block;font-size:.8125rem;margin-bottom:.313rem}.NewFolder__createText___zpjik{color:#69717a;display:inline-block;font-weight:500}.NewFolder__errorIcon___J47Ij{margin-right:.25rem;vertical-align:middle}.NewFolder__errorIcon___J47Ij svg{fill:#db2c00}.NewFolder__folderButtons___RwEdm{display:flex;justify-content:flex-end;margin-top:.875rem;text-align:right}.NewFolder__folderButtons___RwEdm button{margin-right:.5rem}.NewFolder__errorMsg___dAyf2{color:#db2c00;font-size:.75rem}.NewFolder__newFolderForm___TRhIz{display:inline;margin:0} .SimpleFolderList__listItem___jqszP button{background:0;border:none;color:#006ae1;cursor:pointer;display:block;height:3.5rem;padding:.75rem 1.5rem;text-align:left;width:100%}.SimpleFolderList__listItem___jqszP button>*{display:inline-block;vertical-align:middle}.SimpleFolderList__listItem___jqszP button:hover{background-color:#f2f8fe}.SimpleFolderList__listItem___jqszP button:active{background-color:#cfe4fc}.SimpleFolderList__listItem___jqszP button:focus{box-shadow:inset 0 0 0 2px #006ae1;outline:none}.SimpleFolderList__listItem___jqszP span:nth-child(2){font-size:.875rem;margin-left:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SimpleFolderList__selected___naDDv button{background:#f2f8fe}.SimpleFolderList__selected___naDDv span:nth-child(2){font-size:.875rem;margin-left:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SimpleFolderList__selected___naDDv:hover{background:#f2f8fe} .UploadDialog__divider___fqtVq{border-top:1px solid #d9dcde;margin-top:.625rem}.UploadDialog__verticalDivider___F814B{border-left:1px solid #69717a;height:100%;margin:0 1rem;width:1px}.UploadDialog__coverScreen___G_vmx{bottom:0;left:0;position:absolute;right:0;top:0}.UploadDialog__dialogContainer___FvLh7{border:0;outline:none;z-index:1000}.UploadDialog__overlay___NeR9l{background:rgba(247,248,249,.8);display:block;z-index:999}.UploadDialog__fullScreenWrapper___a0Y9q{border-radius:0!important;box-shadow:none;height:100%;left:0!important;top:0!important;width:100%}.UploadDialog__dragContainer___M_PZP{background:#fff;border-radius:10px;box-shadow:0 .5rem 1.25rem 0 rgba(0,0,0,.06);box-sizing:border-box;max-height:100vh;outline:none;overflow-x:hidden;overflow-y:auto;width:50rem}@media only screen and (max-width:48em){.UploadDialog__dragContainer___M_PZP{border-radius:0!important;box-shadow:none;height:100%;left:0!important;top:0!important;width:100%}}.UploadDialog__dragContainer___M_PZP.UploadDialog__fullScreen___lkZMM{border-radius:0!important;box-shadow:none;height:100%;left:0!important;top:0!important;width:100%}.UploadDialog__dragContainer___M_PZP>:last-child:not(.UploadDialog__content___iObQN){padding:1rem}.UploadDialog__headerFont___sDtER{color:#1a2026;font-family:Rubik,Helvetica,Arial;font-size:1.3125rem;font-weight:400;line-height:1.25}.UploadDialog__header___E2uak{box-sizing:border-box;margin:0;min-height:3.5rem;padding:1rem 4rem 1rem 1rem;position:relative}.UploadDialog__exit___hvR4b{background-color:transparent;border-radius:4px;box-shadow:0 .5rem 1.25rem 0 transparent;box-sizing:border-box;color:#69717a;cursor:pointer;font-size:2rem;height:2.5rem;margin:0 .5rem;padding:.5rem;position:absolute;right:.5rem;top:50%;transform:translateY(-50%);transition:background-color .3s,box-shadow .3s}.UploadDialog__exit___hvR4b:hover{background-color:#fff;box-shadow:0 .5rem 1.25rem 0 rgba(0,0,0,.06)}.UploadDialog__content___iObQN{color:#1a2026;font-family:Rubik,Helvetica,Arial;font-size:1rem;height:auto;overflow-x:hidden;overflow-y:auto;padding:1rem}@media only screen and (min-width:62em){.UploadDialog__dragContainer___M_PZP{width:33.75rem}}.UploadDialog__exit___hvR4b{font-size:1.5rem}.UploadDialog__header___E2uak{box-shadow:0 .25rem .5rem -.125rem rgba(0,0,0,.25);z-index:1}.UploadDialog__content___iObQN{height:25rem;position:relative}@media only screen and (max-width:48em){.UploadDialog__content___iObQN{height:92%}}.UploadDialog__scrollContainer___RmPkH{bottom:4.25rem;left:0;overflow:auto;padding:0 1rem;position:absolute;right:0;top:0}.UploadDialog__scrollContainer___RmPkH>div:first-of-type{margin-top:1rem}.UploadDialog__scrollContainer___RmPkH>div:last-of-type{margin-bottom:1rem}.UploadDialog__actionsContainer___QfzFS{background:#fff;bottom:0;box-shadow:0 -.25rem .5rem -.125rem rgba(0,0,0,.25);left:0;padding:1rem;position:absolute;right:0;text-align:right}.UploadDialog__actionsContainer___QfzFS .UploadDialog__newFolderButton___VvHaI{float:left}.UploadDialog__actionsContainer___QfzFS .UploadDialog__continueButton___Lirhj,.UploadDialog__actionsContainer___QfzFS .UploadDialog__uploadButton___QWFeL{float:right;margin-left:.5rem}.UploadDialog__iconBase___EYchZ{display:inline-flex;font-size:2rem;justify-content:center;width:2rem}.UploadDialog__spinnerContainer___JEYlw{padding:2rem 0}.UploadDialog__errorMessage___bY6A1,.UploadDialog__successMessage___UMw6w{padding:1rem}.UploadDialog__errorMessage___bY6A1>*,.UploadDialog__successMessage___UMw6w>*{vertical-align:middle}.UploadDialog__successMessage___UMw6w{color:#1a2026}.UploadDialog__errorMessage___bY6A1{color:#db2c00}.UploadDialog__successIcon___pZKD2{margin-right:1rem}.UploadDialog__successIcon___pZKD2 svg{fill:#008600}.UploadDialog__errorIcon___KypHG{margin-right:1rem}.UploadDialog__errorIcon___KypHG svg{fill:#db2c00}.UploadDialog__uploadContainer___AV0kH{background-color:#f7f8f9;margin:0 -1rem;padding:1.5rem 1rem;text-align:center}.UploadDialog__uploadBar___iKVqx{color:#1a2026;font-size:1rem}.UploadDialog__fileList___cf2CL{padding:.5rem 1rem;position:relative}.UploadDialog__fileContainer___NYxMy{padding:.625rem 1rem}.UploadDialog__fileIcon___xPGdf{position:absolute}.UploadDialog__iconError___RDXUZ svg{fill:#db2c00}.UploadDialog__iconPending___zB58E svg{fill:#69717a}.UploadDialog__iconSuccessful___g94zI svg{fill:#008600}.UploadDialog__inprogressText___uLgpt,.UploadDialog__pendingText___tUGJK{color:#69717a}.UploadDialog__successText___uXuav{color:#008600}.UploadDialog__errorText___YcKXZ{color:#db2c00}.UploadDialog__fileRight___bNgvS{word-wrap:break-word;color:#1a2026;display:inline-block;padding-left:3rem;width:100%}.UploadDialog__newFolderWrapper___wX2Af>div:first-of-type{margin:0}.UploadDialog__openedBox___znVky+.UploadDialog__scrollContainer___RmPkH{padding-top:0;top:11.0625rem}.UploadDialog__creatingFolder___yg2T4+.UploadDialog__scrollContainer___RmPkH{top:5.125rem}.UploadDialog__hideExit___rZ5gd{display:none} .BlockAlert__blockAlert___LVKOw{background:#fff;height:100%;padding:.625rem;text-align:center}.BlockAlert__blockAlert___LVKOw h2{color:#1a2026;font-size:1.5em;font-weight:900;margin:.125em 0}.BlockAlert__blockAlert___LVKOw p{margin:0 0 .625rem}.BlockAlert__blockAlertSpotIllustration___Yc3Gi{background-position:50%;background-repeat:no-repeat;background-size:contain;height:9.625rem}.BlockAlert__search___G4GrU{background-image:url(../images/search__[hash:base64:5].png)}.BlockAlert__lock___L5mkQ{background-image:url(../images/lock__[hash:base64:5].svg)}.BlockAlert__error___KA_GO{background-image:url(../images/fatal-error__[hash:base64:5].png)} @media only screen and (min-width:62em){.AlertDialog__dragContainer___Q96gC{width:33.75rem}} .AlertDialog__content___CG4CO{padding:0} .AlertDialog__contentContainer___ivp8t{display:flex} .AlertDialog__successIcon___VaM0k{padding-right:1rem} .AlertDialog__successIcon___VaM0k svg{fill:#008600} .AlertDialog__errorIcon___bqWey{padding-right:1rem} .AlertDialog__errorIcon___bqWey svg{fill:#db2c00} .AlertDialog__footerButton___P3TuL button{margin-left:1rem} .AlertDialog__errorText___rVFKY{color:#1a2026;font-size:1rem} .AssetDetail__divider___yGM7F{border-top:1px solid #d9dcde;margin-top:.625rem}.AssetDetail__verticalDivider___ryyz1{border-left:1px solid #69717a;height:100%;margin:0 1rem;width:1px}.AssetDetail__container___iBpfi{background:#fff;font-family:inherit;font-size:1rem;overflow:auto}.AssetDetail__contextualPanelMode___upaHI{bottom:0;left:0;position:absolute;right:0;top:0}.AssetDetail__containerExpandedMode___z0R7V{position:relative}.AssetDetail__containerExpandedMode___z0R7V .AssetDetail__divider___yGM7F{margin:0}.AssetDetail__leftPane___Rrey8{display:inline-block;vertical-align:top;width:31%}.AssetDetail__rightPane___oNJFY{display:inline-block;margin-top:.625rem;vertical-align:top;width:69%}.AssetDetail__headerFont___dWcdG{color:#1a2026;font-family:Rubik,Helvetica,Arial;font-size:1.3125rem;font-weight:400;line-height:1.25}.AssetDetail__exitContainer____Fk2H{height:3.5rem;position:relative}.AssetDetail__exitContainer____Fk2H button{margin:0 .5rem;padding:.5rem;position:absolute;right:.5rem;top:20%}.AssetDetail__container___iBpfi{height:4.75rem;padding:1.25rem;position:relative}.AssetDetail__sectionLeft___em3t5{position:absolute}.AssetDetail__sectionLeft___em3t5 .AssetDetail__dropDown___LwNyU button{padding:.5rem 1rem}.AssetDetail__sectionLeft___em3t5 .AssetDetail__dropDown___LwNyU button span:first-child{color:#1a2026}.AssetDetail__sectionLeft___em3t5 .AssetDetail__dropDown___LwNyU button span:nth-child(2) svg{fill:#69717a}.AssetDetail__sectionMiddle___biife .AssetDetail__title___RcGgs{float:left;max-width:15rem;padding:.5rem}.AssetDetail__sectionMiddle___biife .AssetDetail__leftMargin___eZwXo{margin-left:2.5rem}.AssetDetail__pageTitle____qe9H{color:#1a2026;font-size:2.25rem;line-height:1.25}.AssetDetail__iconButton___qA3GW{padding:.3125rem}.AssetDetail__iconButton___qA3GW svg{fill:#006ae1}.AssetDetail__iconButton___qA3GW:active svg,.AssetDetail__iconButton___qA3GW:hover svg{fill:#fff}.AssetDetail__title___RcGgs{color:#1a2026;font-size:1rem;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.AssetDetail__iconDisabled___Rxhrq{color:#cad0d3}.AssetDetail__headerContainer___HFV1Y{padding:0 1.25rem}.AssetDetail__upperCase___YPYl1{text-transform:uppercase}.AssetDetail__titleWrapper___AANEP{color:#1a2026;font-size:1.3125rem;line-height:1.5;margin-left:1rem;margin-top:.3rem;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;width:94%}.AssetDetail__imageWrapper___xvoS1{background:#fff;border:2px solid transparent;height:26.25rem;margin-top:1rem;overflow:hidden;position:relative;text-align:center;width:99%}.AssetDetail__bigImage___orRQz{bottom:0;height:auto;left:0;margin:auto;max-height:100%;max-width:100%;position:absolute;right:0;top:0;width:auto}.AssetDetail__mainPart___MzLmn{display:flex;padding-bottom:.5rem}.AssetDetail__leftPart___Bb0ke,.AssetDetail__thumbImageWrapper___e0_lw{display:inline-block;margin-right:1.5rem;text-align:right;width:6.5rem}.AssetDetail__thumbImageWrapper___e0_lw{background:#fff;border:2px solid transparent;height:3.75rem;overflow:hidden;position:relative}.AssetDetail__thumbImage___Qfjxe{bottom:0;height:auto;left:0;margin:auto;max-height:100%;max-width:100%;position:absolute;right:0;top:0;width:auto}.AssetDetail__thumbIconWrapper___ToDGp .AssetDetail__icon___zdl55{font-size:2rem}.AssetDetail__rightPart___Ew1VZ{display:inline-block;vertical-align:top;width:70%}.AssetDetail__rightPart___Ew1VZ button{display:inline;font-size:.875rem;margin-left:1rem;width:auto}.AssetDetail__metaWrapper___PUbvg{display:flex;padding-bottom:.5rem}.AssetDetail__metaTitle___B3OyG{color:#1a2026;font-size:1rem;line-height:1.5;word-break:break-word}.AssetDetail__metaText___BovJm{color:#1a2026;font-size:.875rem;word-break:break-word}.AssetDetail__metaInfo___OSbko{margin-top:1rem}.AssetDetail__actionLink___k16qZ{margin-left:1rem}.AssetDetail__otherDetails___QUZq2{padding:1rem 0}.AssetDetail__label___ArX_S{color:#1a2026;font-size:.875rem;font-weight:400;line-height:1.5}.AssetDetail__statusLabel___XNYYh{color:#69717a;display:block;font-size:.8125rem;margin-bottom:.313rem}.AssetDetail__actionItems___VTFbp{display:inline-flex;vertical-align:middle}.AssetDetail__actionButton___JLO2O{margin-right:1rem}.AssetDetail__uri___FZ5TY{color:#006ae1;font-size:.875rem;text-decoration:none}.AssetDetail__uri___FZ5TY:hover{color:#004cd6;text-decoration:underline}.AssetDetail__uri___FZ5TY:active{color:#0025bd}.AssetDetail__uri___FZ5TY:focus{outline:2px solid #006ae1;outline-offset:.25rem}.AssetDetail__statusInfo___VZyKL{margin-top:1rem}.AssetDetail__statusInfo___VZyKL .AssetDetail__rightPart___Ew1VZ{margin-left:8rem}.AssetDetail__hideLabel___RGcjk{display:none} .Assets__divider___qvDsB{border-top:1px solid #d9dcde;margin-top:.625rem}.Assets__verticalDivider___SUq2w{border-left:1px solid #69717a;height:100%;margin:0 1rem;width:1px}.Assets__container___LGmTh{padding:.625rem 1.25rem}.Assets__expandedMode___ru6h5{max-height:30rem;overflow-x:hidden}.Assets__expandedMode___ru6h5.Assets__assetSearchResult___Io3Qp,.Assets__expandedMode___ru6h5.Assets__folderSearchResult___EAvWq{max-height:12.8rem}.Assets__expandedMode___ru6h5 .Assets__listItem___V4Wog{margin-top:1rem;width:20%}.Assets__expandedMode___ru6h5 .Assets__folder___vslKs{height:8rem}.Assets__listItem___V4Wog{display:inline-block;height:8rem;text-align:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;width:33%}.Assets__folderListItemContainer___Xkrcm>button,.Assets__listItem___V4Wog>button{background:none;border:none;cursor:pointer;height:auto;padding:0;width:100%}.Assets__folderListItemContainer___Xkrcm>button .Assets__newFolder___vM631,.Assets__folderListItemContainer___Xkrcm>button.Assets__selected___jKwaY,.Assets__folderListItemContainer___Xkrcm>button:focus,.Assets__listItem___V4Wog>button .Assets__newFolder___vM631,.Assets__listItem___V4Wog>button.Assets__selected___jKwaY,.Assets__listItem___V4Wog>button:focus{background:#f2f8fe;cursor:default;outline:none}.Assets__folderListItemContainer___Xkrcm>button .Assets__newFolder___vM631 .Assets__folderName___ff3jH,.Assets__folderListItemContainer___Xkrcm>button.Assets__selected___jKwaY .Assets__folderName___ff3jH,.Assets__folderListItemContainer___Xkrcm>button:focus .Assets__folderName___ff3jH,.Assets__listItem___V4Wog>button .Assets__newFolder___vM631 .Assets__folderName___ff3jH,.Assets__listItem___V4Wog>button.Assets__selected___jKwaY .Assets__folderName___ff3jH,.Assets__listItem___V4Wog>button:focus .Assets__folderName___ff3jH{color:#fff}.Assets__folderListItemContainer___Xkrcm>button .Assets__newFolder___vM631 .Assets__folderIcon___DfmYx svg,.Assets__folderListItemContainer___Xkrcm>button.Assets__selected___jKwaY .Assets__folderIcon___DfmYx svg,.Assets__folderListItemContainer___Xkrcm>button:focus .Assets__folderIcon___DfmYx svg,.Assets__listItem___V4Wog>button .Assets__newFolder___vM631 .Assets__folderIcon___DfmYx svg,.Assets__listItem___V4Wog>button.Assets__selected___jKwaY .Assets__folderIcon___DfmYx svg,.Assets__listItem___V4Wog>button:focus .Assets__folderIcon___DfmYx svg{fill:#fff}.Assets__folderListItemContainer___Xkrcm>button span:first-child svg,.Assets__listItem___V4Wog>button span:first-child svg{fill:#69717a}.Assets__folderListItemContainer___Xkrcm>button span:nth-child(2),.Assets__listItem___V4Wog>button span:nth-child(2){color:#1a2026}.Assets__folderListItemContainer___Xkrcm>button:active span:first-child svg,.Assets__folderListItemContainer___Xkrcm>button:focus span:first-child svg,.Assets__folderListItemContainer___Xkrcm>button:hover span:first-child svg,.Assets__listItem___V4Wog>button:active span:first-child svg,.Assets__listItem___V4Wog>button:focus span:first-child svg,.Assets__listItem___V4Wog>button:hover span:first-child svg{fill:unset}.Assets__folderListItemContainer___Xkrcm>button:active span:nth-child(2),.Assets__folderListItemContainer___Xkrcm>button:focus span:nth-child(2),.Assets__folderListItemContainer___Xkrcm>button:hover span:nth-child(2),.Assets__listItem___V4Wog>button:active span:nth-child(2),.Assets__listItem___V4Wog>button:focus span:nth-child(2),.Assets__listItem___V4Wog>button:hover span:nth-child(2){color:unset}.Assets__listItem___V4Wog>button{align-items:center;display:flex;flex-direction:column;padding:2rem 0}.Assets__listItem___V4Wog>button span:first-child{margin-right:0}.Assets__listItem___V4Wog>button span:nth-child(2){font-size:.875rem;overflow:hidden;padding:0 1rem;text-overflow:ellipsis;white-space:unset;word-break:break-all}.Assets__truncate___F8GI9{word-break:break-all}.Assets__folderName___ff3jH{background:none;border:none;color:#1a2026;display:flex;font-size:.875rem;justify-content:center;max-width:100%;padding:0 1rem}.Assets__folderName___ff3jH:hover{cursor:pointer}.Assets__folderName___ff3jH:focus{outline:none}.Assets__listView___oqnyz{margin:0 -1.25rem;padding:0}.Assets__listView___oqnyz .Assets__listItem___V4Wog{height:3em;margin-top:.5em;text-align:left;width:100%}.Assets__listView___oqnyz button{border-radius:0;cursor:pointer;height:5rem;justify-content:left;padding-left:1.25rem;text-align:left;width:100%}.Assets__listView___oqnyz button span:nth-child(2){font-size:.875rem;margin-left:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Assets__listView___oqnyz button:active .Assets__folderName___ff3jH,.Assets__listView___oqnyz button:focus .Assets__folderName___ff3jH,.Assets__listView___oqnyz button:hover .Assets__folderName___ff3jH{color:unset}.Assets__listView___oqnyz .Assets__folderName___ff3jH{display:inline-block;text-align:left;vertical-align:middle;width:auto}.Assets__listView___oqnyz .Assets__listHeader___Bp_Ah{border:none;border-collapse:collapse;padding:0;width:100%}.Assets__headerText___OesLx{color:#69717a;font-size:.875rem;font-weight:500;padding:.25rem 1.25rem;text-align:left;text-transform:uppercase}@media only screen and (max-device-width:64em){.Assets__mediaLarge___hpg6E{display:none}}@media only screen and (min-device-width:64.063em){.Assets__mediaSmall___BCCgH{display:none}}.Assets__folderListItemContainer___Xkrcm{height:5rem;position:relative}.Assets__spinner___oogRn{padding:2rem 0}.Assets__assetIconContainer___DMAYw{display:block;max-width:100%;text-align:center}.Assets__assetIconImage___arfFH{display:inline-block;height:5.25rem;position:relative;width:5.25rem}.Assets__assetIconImage___arfFH img{bottom:0;left:0;margin:auto;max-height:100%;max-width:100%;position:absolute;right:0;top:0}.Assets__gridItem___csyDU{display:inline-block;height:8rem;text-align:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;width:33%}.Assets__gridItem___csyDU button{align-items:center;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;height:auto;padding:2rem 0;width:100%}.Assets__gridItem___csyDU button:focus{background:#f2f8fe;cursor:default;outline:none}.Assets__gridItem___csyDU button span:first-child{margin-right:0}.Assets__gridItem___csyDU button span:nth-child(2){font-size:.875rem;overflow:hidden;padding:0 1rem;text-overflow:ellipsis;white-space:pre-wrap;word-break:break-all}.Assets__gridItem___csyDU button:active span:nth-child(2),.Assets__gridItem___csyDU button:focus span:nth-child(2),.Assets__gridItem___csyDU button:hover span:nth-child(2){color:unset}.Assets__gridItem___csyDU>button{padding:.375rem 0}.Assets__newAssetGrid___Bv8dY,.Assets__newAsset___CliRv .Assets__folder___vslKs{background-color:#d1ead1}.Assets__center___nO_x5{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)} .AssetListView__divider___iwuRg{border-top:1px solid #d9dcde;margin-top:.625rem}.AssetListView__verticalDivider___T9QV2{border-left:1px solid #69717a;height:100%;margin:0 1rem;width:1px}.AssetListView__container___hE6N3{padding:.625rem 1.25rem}.AssetListView__expandedMode___VR74T{max-height:30rem;overflow-x:hidden}.AssetListView__expandedMode___VR74T.AssetListView__assetSearchResult___d8Ozo,.AssetListView__expandedMode___VR74T.AssetListView__folderSearchResult___fMpSj{max-height:12.8rem}.AssetListView__expandedMode___VR74T .AssetListView__listItem____bm6t{margin-top:1rem;width:20%}.AssetListView__expandedMode___VR74T .AssetListView__folder___JXQNZ{height:8rem}.AssetListView__listItem____bm6t{display:inline-block;height:8rem;text-align:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;width:33%}.AssetListView__folderListItemContainer___AfUAA>button,.AssetListView__listItem____bm6t>button{background:none;border:none;cursor:pointer;height:auto;padding:0;width:100%}.AssetListView__folderListItemContainer___AfUAA>button .AssetListView__newFolder___ZUYjE,.AssetListView__folderListItemContainer___AfUAA>button.AssetListView__selected___rp0Xp,.AssetListView__folderListItemContainer___AfUAA>button:focus,.AssetListView__listItem____bm6t>button .AssetListView__newFolder___ZUYjE,.AssetListView__listItem____bm6t>button.AssetListView__selected___rp0Xp,.AssetListView__listItem____bm6t>button:focus{background:#f2f8fe;cursor:default;outline:none}.AssetListView__folderListItemContainer___AfUAA>button .AssetListView__newFolder___ZUYjE .AssetListView__folderName___xGQCc,.AssetListView__folderListItemContainer___AfUAA>button.AssetListView__selected___rp0Xp .AssetListView__folderName___xGQCc,.AssetListView__folderListItemContainer___AfUAA>button:focus .AssetListView__folderName___xGQCc,.AssetListView__listItem____bm6t>button .AssetListView__newFolder___ZUYjE .AssetListView__folderName___xGQCc,.AssetListView__listItem____bm6t>button.AssetListView__selected___rp0Xp .AssetListView__folderName___xGQCc,.AssetListView__listItem____bm6t>button:focus .AssetListView__folderName___xGQCc{color:#fff}.AssetListView__folderListItemContainer___AfUAA>button .AssetListView__newFolder___ZUYjE .AssetListView__folderIcon___sDBuD svg,.AssetListView__folderListItemContainer___AfUAA>button.AssetListView__selected___rp0Xp .AssetListView__folderIcon___sDBuD svg,.AssetListView__folderListItemContainer___AfUAA>button:focus .AssetListView__folderIcon___sDBuD svg,.AssetListView__listItem____bm6t>button .AssetListView__newFolder___ZUYjE .AssetListView__folderIcon___sDBuD svg,.AssetListView__listItem____bm6t>button.AssetListView__selected___rp0Xp .AssetListView__folderIcon___sDBuD svg,.AssetListView__listItem____bm6t>button:focus .AssetListView__folderIcon___sDBuD svg{fill:#fff}.AssetListView__folderListItemContainer___AfUAA>button span:first-child svg,.AssetListView__listItem____bm6t>button span:first-child svg{fill:#69717a}.AssetListView__folderListItemContainer___AfUAA>button span:nth-child(2),.AssetListView__listItem____bm6t>button span:nth-child(2){color:#1a2026}.AssetListView__folderListItemContainer___AfUAA>button:active span:first-child svg,.AssetListView__folderListItemContainer___AfUAA>button:focus span:first-child svg,.AssetListView__folderListItemContainer___AfUAA>button:hover span:first-child svg,.AssetListView__listItem____bm6t>button:active span:first-child svg,.AssetListView__listItem____bm6t>button:focus span:first-child svg,.AssetListView__listItem____bm6t>button:hover span:first-child svg{fill:unset}.AssetListView__folderListItemContainer___AfUAA>button:active span:nth-child(2),.AssetListView__folderListItemContainer___AfUAA>button:focus span:nth-child(2),.AssetListView__folderListItemContainer___AfUAA>button:hover span:nth-child(2),.AssetListView__listItem____bm6t>button:active span:nth-child(2),.AssetListView__listItem____bm6t>button:focus span:nth-child(2),.AssetListView__listItem____bm6t>button:hover span:nth-child(2){color:unset}.AssetListView__listItem____bm6t>button{align-items:center;display:flex;flex-direction:column;padding:2rem 0}.AssetListView__listItem____bm6t>button span:first-child{margin-right:0}.AssetListView__listItem____bm6t>button span:nth-child(2){font-size:.875rem;overflow:hidden;padding:0 1rem;text-overflow:ellipsis;white-space:unset;word-break:break-all}.AssetListView__truncate___DgZIr{word-break:break-all}.AssetListView__folderName___xGQCc{background:none;border:none;color:#1a2026;display:flex;font-size:.875rem;justify-content:center;max-width:100%;padding:0 1rem}.AssetListView__folderName___xGQCc:hover{cursor:pointer}.AssetListView__folderName___xGQCc:focus{outline:none}.AssetListView__listView___Ns7EA{margin:0 -1.25rem;padding:0}.AssetListView__listView___Ns7EA .AssetListView__listItem____bm6t{height:3em;margin-top:.5em;text-align:left;width:100%}.AssetListView__listView___Ns7EA button{border-radius:0;cursor:pointer;height:5rem;justify-content:left;padding-left:1.25rem;text-align:left;width:100%}.AssetListView__listView___Ns7EA button span:nth-child(2){font-size:.875rem;margin-left:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.AssetListView__listView___Ns7EA button:active .AssetListView__folderName___xGQCc,.AssetListView__listView___Ns7EA button:focus .AssetListView__folderName___xGQCc,.AssetListView__listView___Ns7EA button:hover .AssetListView__folderName___xGQCc{color:unset}.AssetListView__listView___Ns7EA .AssetListView__folderName___xGQCc{display:inline-block;text-align:left;vertical-align:middle;width:auto}.AssetListView__listView___Ns7EA .AssetListView__listHeader___mgaMz{border:none;border-collapse:collapse;padding:0;width:100%}.AssetListView__headerText___e96FA{color:#69717a;font-size:.875rem;font-weight:500;padding:.25rem 1.25rem;text-align:left;text-transform:uppercase}@media only screen and (max-device-width:64em){.AssetListView__mediaLarge___ooTar{display:none}}@media only screen and (min-device-width:64.063em){.AssetListView__mediaSmall___yOSGe{display:none}}.AssetListView__folderListItemContainer___AfUAA{height:5rem;position:relative}.AssetListView__spinner___D6DjJ{padding:2rem 0}.AssetListView__assetIconContainer___dUhJu{display:block;max-width:100%;text-align:center}.AssetListView__assetIconImage___S6wKa{display:inline-block;height:5.25rem;position:relative;width:5.25rem}.AssetListView__assetIconImage___S6wKa img{bottom:0;left:0;margin:auto;max-height:100%;max-width:100%;position:absolute;right:0;top:0}.AssetListView__gridItem___lgoR3{display:inline-block;height:8rem;text-align:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;width:33%}.AssetListView__gridItem___lgoR3 button{align-items:center;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;height:auto;padding:2rem 0;width:100%}.AssetListView__gridItem___lgoR3 button:focus{background:#f2f8fe;cursor:default;outline:none}.AssetListView__gridItem___lgoR3 button span:first-child{margin-right:0}.AssetListView__gridItem___lgoR3 button span:nth-child(2){font-size:.875rem;overflow:hidden;padding:0 1rem;text-overflow:ellipsis;white-space:pre-wrap;word-break:break-all}.AssetListView__gridItem___lgoR3 button:active span:nth-child(2),.AssetListView__gridItem___lgoR3 button:focus span:nth-child(2),.AssetListView__gridItem___lgoR3 button:hover span:nth-child(2){color:unset}.AssetListView__gridItem___lgoR3>button{padding:.375rem 0}.AssetListView__newAssetGrid___EY0c8,.AssetListView__newAsset____uPcB .AssetListView__folder___JXQNZ{background-color:#d1ead1}.AssetListView__center___IjnKF{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.AssetListView__leftSide___ZRzlo{float:left;width:100%}.AssetListView__listViewItemContainer___ABMf9{display:flex;height:5rem;position:relative}.AssetListView__listView___Ns7EA{overflow:hidden}.AssetListView__listView___Ns7EA .AssetListView__folder___JXQNZ{color:#1a2026;max-height:5rem;padding:.25rem 0 .25rem 1.25rem}.AssetListView__previewContainer___DUPup{display:inline-flex;height:4.5rem;justify-content:center;width:3.5rem}.AssetListView__leftSide___ZRzlo>button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.AssetListView__leftSide___ZRzlo>button:focus{background:#f2f8fe;cursor:default;outline:none}.AssetListView__leftSide___ZRzlo>button img{bottom:0;left:1.25rem;margin:auto;max-height:100%;max-width:3.5rem;top:0}.AssetListView__assetName___CVtrl{left:4.75rem;position:absolute;top:50%;transform:translateY(-50%)}.AssetListView__nameHeader___NcNnM{width:65%}.AssetListView__assetListDetail___ZS1D9.AssetListView__assetListDetail___ZS1D9{color:#1a2026;font-size:.875rem;font-weight:400;padding:0 1rem}.AssetListView__otherFileType___ttX1U{align-items:center;display:inline-flex} .ActionMenu__container___yrSs7{display:flex;height:100%;padding:0 1.25rem}.ActionMenu__container___yrSs7>*{display:inline-block;width:50%}.ActionMenu__expandedMode___zEJpL .ActionMenu__iconText___kQWa4{color:#006ae1;display:inline-block;font-family:inherit;font-size:1rem;font-weight:400;line-height:1.5}.ActionMenu__sectionRight___ZV_8v{align-items:center;display:inline-flex;gap:1rem;justify-content:flex-end;text-align:right}.ActionMenu__icon___McvpS{display:inline-flex;padding:0 0 0 .25rem}.ActionMenu__icon___McvpS svg{fill:#006ae1}.ActionMenu__iconText___kQWa4{color:#006ae1;font-size:.875rem;font-weight:400}@media only screen and (min-width:62em){.ActionMenu__iconText___kQWa4{display:none}}.ActionMenu__sectionLeft___BfkRL{align-items:center;display:inline-flex}.ActionMenu__sectionLeft___BfkRL button{padding:.5rem .8rem}.ActionMenu__divider____grK6{border-top:1px solid #d9dcde;margin:.5rem 0} .Menu__menuItem___HlmQq{align-items:center;display:inline-flex;justify-content:space-between;width:100%}.Menu__menu___wwjC2 button{font-size:.875rem;height:auto}.Menu__expandedMenu___J29EA button{font-size:1rem;height:auto} .DropZoneUpload__container___t6QQr{font-weight:400;padding:1.25rem}.DropZoneUpload__dropZone___1HJdO,.DropZoneUpload__footer___gl60O{align-items:center;display:flex;justify-content:center}.DropZoneUpload__dropZone___1HJdO{background:#fff;border:2px dashed #d9dcde;cursor:pointer;flex-direction:column;height:17.5rem;margin-bottom:1rem;text-align:center}.DropZoneUpload__dropZone___1HJdO .DropZoneUpload__dragging___WuL4S,.DropZoneUpload__dropZone___1HJdO:hover{background-color:#f2f8fe}.DropZoneUpload__uploadIcon___cnSaI{display:inline-flex;font-size:2rem}.DropZoneUpload__uploadIcon___cnSaI svg{fill:#006ae1}.DropZoneUpload__title___nmy8y{color:#006ae1;font-size:1.25rem;font-weight:400}.DropZoneUpload__description___eRiG4{color:#006ae1;font-size:1rem;margin:.625rem 0}.DropZoneUpload__cancelButton___dgGXp>button{flex:0 1 auto;-ms-flex:0 0 auto;margin-left:1rem;min-width:0}.DropZoneUpload__message___gSVx6{color:#69717a;font-size:.875rem;padding:.5rem 0} .FolderListPane__divider___lYGH9{border-top:1px solid #d9dcde;margin-top:.625rem}.FolderListPane__verticalDivider___mm6tF{border-left:1px solid #69717a;height:100%;margin:0 1rem;width:1px}.FolderListPane__container___UOrHb{padding:.625rem 1.25rem}.FolderListPane__expandedMode___EkpWc{max-height:30rem;overflow-x:hidden}.FolderListPane__expandedMode___EkpWc.FolderListPane__assetSearchResult___Oll8z,.FolderListPane__expandedMode___EkpWc.FolderListPane__folderSearchResult___ctlF4{max-height:12.8rem}.FolderListPane__expandedMode___EkpWc .FolderListPane__listItem___PhLzn{margin-top:1rem;width:20%}.FolderListPane__expandedMode___EkpWc .FolderListPane__folder___Re5lY{height:8rem}.FolderListPane__listItem___PhLzn{display:inline-block;height:8rem;text-align:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;width:33%}.FolderListPane__folderListItemContainer___sxMG1>button,.FolderListPane__listItem___PhLzn>button{background:none;border:none;cursor:pointer;height:auto;padding:0;width:100%}.FolderListPane__folderListItemContainer___sxMG1>button .FolderListPane__newFolder___ffnC9,.FolderListPane__folderListItemContainer___sxMG1>button.FolderListPane__selected___riiGq,.FolderListPane__folderListItemContainer___sxMG1>button:focus,.FolderListPane__listItem___PhLzn>button .FolderListPane__newFolder___ffnC9,.FolderListPane__listItem___PhLzn>button.FolderListPane__selected___riiGq,.FolderListPane__listItem___PhLzn>button:focus{background:#f2f8fe;cursor:default;outline:none}.FolderListPane__folderListItemContainer___sxMG1>button .FolderListPane__newFolder___ffnC9 .FolderListPane__folderName___Q6yh8,.FolderListPane__folderListItemContainer___sxMG1>button.FolderListPane__selected___riiGq .FolderListPane__folderName___Q6yh8,.FolderListPane__folderListItemContainer___sxMG1>button:focus .FolderListPane__folderName___Q6yh8,.FolderListPane__listItem___PhLzn>button .FolderListPane__newFolder___ffnC9 .FolderListPane__folderName___Q6yh8,.FolderListPane__listItem___PhLzn>button.FolderListPane__selected___riiGq .FolderListPane__folderName___Q6yh8,.FolderListPane__listItem___PhLzn>button:focus .FolderListPane__folderName___Q6yh8{color:#fff}.FolderListPane__folderListItemContainer___sxMG1>button .FolderListPane__newFolder___ffnC9 .FolderListPane__folderIcon___fml30 svg,.FolderListPane__folderListItemContainer___sxMG1>button.FolderListPane__selected___riiGq .FolderListPane__folderIcon___fml30 svg,.FolderListPane__folderListItemContainer___sxMG1>button:focus .FolderListPane__folderIcon___fml30 svg,.FolderListPane__listItem___PhLzn>button .FolderListPane__newFolder___ffnC9 .FolderListPane__folderIcon___fml30 svg,.FolderListPane__listItem___PhLzn>button.FolderListPane__selected___riiGq .FolderListPane__folderIcon___fml30 svg,.FolderListPane__listItem___PhLzn>button:focus .FolderListPane__folderIcon___fml30 svg{fill:#fff}.FolderListPane__folderListItemContainer___sxMG1>button span:first-child svg,.FolderListPane__listItem___PhLzn>button span:first-child svg{fill:#69717a}.FolderListPane__folderListItemContainer___sxMG1>button span:nth-child(2),.FolderListPane__listItem___PhLzn>button span:nth-child(2){color:#1a2026}.FolderListPane__folderListItemContainer___sxMG1>button:active span:first-child svg,.FolderListPane__folderListItemContainer___sxMG1>button:focus span:first-child svg,.FolderListPane__folderListItemContainer___sxMG1>button:hover span:first-child svg,.FolderListPane__listItem___PhLzn>button:active span:first-child svg,.FolderListPane__listItem___PhLzn>button:focus span:first-child svg,.FolderListPane__listItem___PhLzn>button:hover span:first-child svg{fill:unset}.FolderListPane__folderListItemContainer___sxMG1>button:active span:nth-child(2),.FolderListPane__folderListItemContainer___sxMG1>button:focus span:nth-child(2),.FolderListPane__folderListItemContainer___sxMG1>button:hover span:nth-child(2),.FolderListPane__listItem___PhLzn>button:active span:nth-child(2),.FolderListPane__listItem___PhLzn>button:focus span:nth-child(2),.FolderListPane__listItem___PhLzn>button:hover span:nth-child(2){color:unset}.FolderListPane__listItem___PhLzn>button{align-items:center;display:flex;flex-direction:column;padding:2rem 0}.FolderListPane__listItem___PhLzn>button span:first-child{margin-right:0}.FolderListPane__listItem___PhLzn>button span:nth-child(2){font-size:.875rem;overflow:hidden;padding:0 1rem;text-overflow:ellipsis;white-space:unset;word-break:break-all}.FolderListPane__truncate___JkIEi{word-break:break-all}.FolderListPane__folderName___Q6yh8{background:none;border:none;color:#1a2026;display:flex;font-size:.875rem;justify-content:center;max-width:100%;padding:0 1rem}.FolderListPane__folderName___Q6yh8:hover{cursor:pointer}.FolderListPane__folderName___Q6yh8:focus{outline:none}.FolderListPane__listView___wK9az{margin:0 -1.25rem;padding:0}.FolderListPane__listView___wK9az .FolderListPane__listItem___PhLzn{height:3em;margin-top:.5em;text-align:left;width:100%}.FolderListPane__listView___wK9az button{border-radius:0;cursor:pointer;height:5rem;justify-content:left;padding-left:1.25rem;text-align:left;width:100%}.FolderListPane__listView___wK9az button span:nth-child(2){font-size:.875rem;margin-left:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.FolderListPane__listView___wK9az button:active .FolderListPane__folderName___Q6yh8,.FolderListPane__listView___wK9az button:focus .FolderListPane__folderName___Q6yh8,.FolderListPane__listView___wK9az button:hover .FolderListPane__folderName___Q6yh8{color:unset}.FolderListPane__listView___wK9az .FolderListPane__folderName___Q6yh8{display:inline-block;text-align:left;vertical-align:middle;width:auto}.FolderListPane__listView___wK9az .FolderListPane__listHeader___QdjFN{border:none;border-collapse:collapse;padding:0;width:100%}.FolderListPane__headerText___d7Nui{color:#69717a;font-size:.875rem;font-weight:500;padding:.25rem 1.25rem;text-align:left;text-transform:uppercase}@media only screen and (max-device-width:64em){.FolderListPane__mediaLarge___TPwij{display:none}}@media only screen and (min-device-width:64.063em){.FolderListPane__mediaSmall___YMB0z{display:none}}.FolderListPane__folderListItemContainer___sxMG1{height:5rem;position:relative}.FolderListPane__container___UOrHb{background-color:#fff;border-right:1px solid #d9dcde;padding:0}.FolderListPane__divider___lYGH9{margin:0}.FolderListPane__folderPanel___p26zQ{max-height:30rem;overflow-x:hidden}.FolderListPane__rootFolder___VQyjY{background:0;border:none;color:#1a2026;cursor:pointer;display:block;font-size:1.125rem;text-align:left;width:100%}.FolderListPane__rootFolder___VQyjY button{gap:1rem;justify-content:flex-start;padding:1.8rem 1.25rem}.FolderListPane__rootFolder___VQyjY:focus{box-shadow:inset 0 0 0 2px #006ae1;outline:none}.FolderListPane__rootFolder___VQyjY:hover{background:#f2f8fe}.FolderListPane__rootFolder___VQyjY:active{background:#cfe4fc}.FolderListPane__selected___riiGq{background-color:#f2f8fe;color:#1a2026;cursor:default}.FolderListPane__rootIcon___IUvX9{color:#69717a;font-size:2rem;vertical-align:middle}.FolderListPane__rootTitle___kieqS{display:inline-block;line-height:1.5;margin-left:1rem} .Folders__divider___rP_5c{border-top:1px solid #d9dcde;margin-top:.625rem}.Folders__verticalDivider___Ugta4{border-left:1px solid #69717a;height:100%;margin:0 1rem;width:1px}.Folders__container___tQMWz{padding:.625rem 1.25rem}.Folders__expandedMode___Rzz7n{max-height:30rem;overflow-x:hidden}.Folders__expandedMode___Rzz7n.Folders__assetSearchResult___xBX2d,.Folders__expandedMode___Rzz7n.Folders__folderSearchResult___JITUh{max-height:12.8rem}.Folders__expandedMode___Rzz7n .Folders__listItem___ynNln{margin-top:1rem;width:20%}.Folders__expandedMode___Rzz7n .Folders__folder___jT8P3{height:8rem}.Folders__listItem___ynNln{display:inline-block;height:8rem;text-align:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;width:33%}.Folders__folderListItemContainer___QE9Ju>button,.Folders__listItem___ynNln>button{background:none;border:none;cursor:pointer;height:auto;padding:0;width:100%}.Folders__folderListItemContainer___QE9Ju>button .Folders__newFolder___Nz8Me,.Folders__folderListItemContainer___QE9Ju>button.Folders__selected___SK5Ep,.Folders__folderListItemContainer___QE9Ju>button:focus,.Folders__listItem___ynNln>button .Folders__newFolder___Nz8Me,.Folders__listItem___ynNln>button.Folders__selected___SK5Ep,.Folders__listItem___ynNln>button:focus{background:#f2f8fe;cursor:default;outline:none}.Folders__folderListItemContainer___QE9Ju>button .Folders__newFolder___Nz8Me .Folders__folderName___Tz5pK,.Folders__folderListItemContainer___QE9Ju>button.Folders__selected___SK5Ep .Folders__folderName___Tz5pK,.Folders__folderListItemContainer___QE9Ju>button:focus .Folders__folderName___Tz5pK,.Folders__listItem___ynNln>button .Folders__newFolder___Nz8Me .Folders__folderName___Tz5pK,.Folders__listItem___ynNln>button.Folders__selected___SK5Ep .Folders__folderName___Tz5pK,.Folders__listItem___ynNln>button:focus .Folders__folderName___Tz5pK{color:#fff}.Folders__folderListItemContainer___QE9Ju>button .Folders__newFolder___Nz8Me .Folders__folderIcon___JhYRs svg,.Folders__folderListItemContainer___QE9Ju>button.Folders__selected___SK5Ep .Folders__folderIcon___JhYRs svg,.Folders__folderListItemContainer___QE9Ju>button:focus .Folders__folderIcon___JhYRs svg,.Folders__listItem___ynNln>button .Folders__newFolder___Nz8Me .Folders__folderIcon___JhYRs svg,.Folders__listItem___ynNln>button.Folders__selected___SK5Ep .Folders__folderIcon___JhYRs svg,.Folders__listItem___ynNln>button:focus .Folders__folderIcon___JhYRs svg{fill:#fff}.Folders__folderListItemContainer___QE9Ju>button span:first-child svg,.Folders__listItem___ynNln>button span:first-child svg{fill:#69717a}.Folders__folderListItemContainer___QE9Ju>button span:nth-child(2),.Folders__listItem___ynNln>button span:nth-child(2){color:#1a2026}.Folders__folderListItemContainer___QE9Ju>button:active span:first-child svg,.Folders__folderListItemContainer___QE9Ju>button:focus span:first-child svg,.Folders__folderListItemContainer___QE9Ju>button:hover span:first-child svg,.Folders__listItem___ynNln>button:active span:first-child svg,.Folders__listItem___ynNln>button:focus span:first-child svg,.Folders__listItem___ynNln>button:hover span:first-child svg{fill:unset}.Folders__folderListItemContainer___QE9Ju>button:active span:nth-child(2),.Folders__folderListItemContainer___QE9Ju>button:focus span:nth-child(2),.Folders__folderListItemContainer___QE9Ju>button:hover span:nth-child(2),.Folders__listItem___ynNln>button:active span:nth-child(2),.Folders__listItem___ynNln>button:focus span:nth-child(2),.Folders__listItem___ynNln>button:hover span:nth-child(2){color:unset}.Folders__listItem___ynNln>button{align-items:center;display:flex;flex-direction:column;padding:2rem 0}.Folders__listItem___ynNln>button span:first-child{margin-right:0}.Folders__listItem___ynNln>button span:nth-child(2){font-size:.875rem;overflow:hidden;padding:0 1rem;text-overflow:ellipsis;white-space:unset;word-break:break-all}.Folders__truncate___IBD2t{word-break:break-all}.Folders__folderName___Tz5pK{background:none;border:none;color:#1a2026;display:flex;font-size:.875rem;justify-content:center;max-width:100%;padding:0 1rem}.Folders__folderName___Tz5pK:hover{cursor:pointer}.Folders__folderName___Tz5pK:focus{outline:none}.Folders__listView___t5cD3{margin:0 -1.25rem;padding:0}.Folders__listView___t5cD3 .Folders__listItem___ynNln{height:3em;margin-top:.5em;text-align:left;width:100%}.Folders__listView___t5cD3 button{border-radius:0;cursor:pointer;height:5rem;justify-content:left;padding-left:1.25rem;text-align:left;width:100%}.Folders__listView___t5cD3 button span:nth-child(2){font-size:.875rem;margin-left:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Folders__listView___t5cD3 button:active .Folders__folderName___Tz5pK,.Folders__listView___t5cD3 button:focus .Folders__folderName___Tz5pK,.Folders__listView___t5cD3 button:hover .Folders__folderName___Tz5pK{color:unset}.Folders__listView___t5cD3 .Folders__folderName___Tz5pK{display:inline-block;text-align:left;vertical-align:middle;width:auto}.Folders__listView___t5cD3 .Folders__listHeader___QKEVd{border:none;border-collapse:collapse;padding:0;width:100%}.Folders__headerText___ieLGE{color:#69717a;font-size:.875rem;font-weight:500;padding:.25rem 1.25rem;text-align:left;text-transform:uppercase}@media only screen and (max-device-width:64em){.Folders__mediaLarge___GmGNZ{display:none}}@media only screen and (min-device-width:64.063em){.Folders__mediaSmall___VvZ_4{display:none}}.Folders__folderListItemContainer___QE9Ju{height:5rem;position:relative} .NavigationBar__container___If6fS{height:4.75rem;padding:1.25rem;position:relative}.NavigationBar__sectionLeft___tUOR3{position:absolute}.NavigationBar__sectionLeft___tUOR3 .NavigationBar__dropDown___hIViR button{padding:.5rem 1rem}.NavigationBar__sectionLeft___tUOR3 .NavigationBar__dropDown___hIViR button span:first-child{color:#1a2026}.NavigationBar__sectionLeft___tUOR3 .NavigationBar__dropDown___hIViR button span:nth-child(2) svg{fill:#69717a}.NavigationBar__sectionMiddle___l04Sm .NavigationBar__title___pmDji{float:left;max-width:15rem;padding:.5rem}.NavigationBar__sectionMiddle___l04Sm .NavigationBar__leftMargin___iJ7gz{margin-left:2.5rem}.NavigationBar__pageTitle___XTZnp{color:#1a2026;font-size:2.25rem;line-height:1.25}.NavigationBar__iconButton___lhnI_{padding:.3125rem}.NavigationBar__iconButton___lhnI_ svg{fill:#006ae1}.NavigationBar__iconButton___lhnI_:active svg,.NavigationBar__iconButton___lhnI_:hover svg{fill:#fff}.NavigationBar__title___pmDji{color:#1a2026;font-size:1rem;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.NavigationBar__iconDisabled___bGos3{color:#cad0d3} .SearchBar__container___yyPBH{height:4.75rem;padding:1.25rem;position:relative}.SearchBar__sectionLeft___A2gGM{position:absolute}.SearchBar__sectionLeft___A2gGM .SearchBar__dropDown___zF56j button{padding:.5rem 1rem}.SearchBar__sectionLeft___A2gGM .SearchBar__dropDown___zF56j button span:first-child{color:#1a2026}.SearchBar__sectionLeft___A2gGM .SearchBar__dropDown___zF56j button span:nth-child(2) svg{fill:#69717a}.SearchBar__sectionMiddle___Gzpxz .SearchBar__title___rndqC{float:left;max-width:15rem;padding:.5rem}.SearchBar__sectionMiddle___Gzpxz .SearchBar__leftMargin___LJ5rZ{margin-left:2.5rem}.SearchBar__pageTitle___GkhYb{color:#1a2026;font-size:2.25rem;line-height:1.25}.SearchBar__iconButton___uAkmr{padding:.3125rem}.SearchBar__iconButton___uAkmr svg{fill:#006ae1}.SearchBar__iconButton___uAkmr:active svg,.SearchBar__iconButton___uAkmr:hover svg{fill:#fff}.SearchBar__title___rndqC{color:#1a2026;font-size:1rem;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SearchBar__iconDisabled___mdqmI{color:#cad0d3}.SearchBar__searchContainer___dJMPY{background:#fff;overflow:hidden;position:absolute;right:1.25rem;white-space:nowrap;z-index:1}.SearchBar__expanded___WAN7K{box-sizing:border-box;display:flex;flex-direction:row;height:inherit;padding:1.25rem;position:absolute;right:0;top:0;width:100%}.SearchBar__expandedMode___nWsQv.SearchBar__expanded___WAN7K,.SearchBar__expandedMode___nWsQv.SearchBar__searchContainer___dJMPY{top:50%;transform:translateY(-50%)}.SearchBar__element___aLHL0{display:flex;flex:1;position:relative}.SearchBar__cancelButton___KqCsl>button{flex:0 1 auto;-ms-flex:0 0 auto;font-size:.875rem;margin-left:.5rem;padding:.4375rem .875rem}.SearchBar__inputIcon___sijz3,.SearchBar__vertical___npaxf{position:absolute;top:50%;transform:translateY(-50%)}.SearchBar__inputIcon___sijz3{color:#69717a;display:inline-flex;font-size:1.5rem;line-height:1;right:1rem;z-index:1}.SearchBar__inputIcon___sijz3 svg{fill:#69717a}.SearchBar__clearButton___bX5fE{position:absolute;top:-5%}.SearchBar__clearButton___bX5fE svg{fill:#69717a}.SearchBar__iconHidden___CHCQG{cursor:default;opacity:0}.SearchBar__searchInputGroup___BfFW8{display:flex;width:100%}.SearchBar__searchInputGroup___BfFW8 input{font-size:.9rem}.SearchBar__searchInputIcon___GHqb5{color:#69717a;cursor:text;display:inline-flex;font-size:1.5rem;line-height:1;position:absolute;right:.1rem;top:70%;transform:translateY(-50%);z-index:1}.SearchBar__searchInputIcon___GHqb5 svg{fill:#69717a} .MediaLibrary__divider___FJdia{border-top:1px solid #d9dcde;margin-top:.625rem}.MediaLibrary__verticalDivider___Z2EcF{border-left:1px solid #69717a;height:100%;margin:0 1rem;width:1px}.MediaLibrary__container___QHcSt{background:#fff;font-family:inherit;font-size:1rem;overflow:auto}.MediaLibrary__contextualPanelMode____372k{bottom:0;left:0;position:absolute;right:0;top:0}.MediaLibrary__containerExpandedMode___NVdq9{position:relative}.MediaLibrary__containerExpandedMode___NVdq9 .MediaLibrary__divider___FJdia{margin:0}.MediaLibrary__leftPane___qAA6S{display:inline-block;vertical-align:top;width:31%}.MediaLibrary__rightPane___SfTcN{display:inline-block;margin-top:.625rem;vertical-align:top;width:69%}.MediaLibrary__headerFont___ourif{color:#1a2026;font-family:Rubik,Helvetica,Arial;font-size:1.3125rem;font-weight:400;line-height:1.25}.MediaLibrary__exitContainer___B2Ocm{height:3.5rem;position:relative}.MediaLibrary__exitContainer___B2Ocm button{margin:0 .5rem;padding:.5rem;position:absolute;right:.5rem;top:20%} .Toastify__toast-container { z-index: 9999; position: fixed; padding: 4px; width: 320px; box-sizing: border-box; color: #fff; } .Toastify__toast-container--top-left { top: 1em; left: 1em; } .Toastify__toast-container--top-center { top: 1em; left: 50%; margin-left: -160px; } .Toastify__toast-container--top-right { top: 1em; right: 1em; } .Toastify__toast-container--bottom-left { bottom: 1em; left: 1em; } .Toastify__toast-container--bottom-center { bottom: 1em; left: 50%; margin-left: -160px; } .Toastify__toast-container--bottom-right { bottom: 1em; right: 1em; } @media only screen and (max-width: 480px) { .Toastify__toast-container { width: 100vw; padding: 0; left: 0; margin: 0; } .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right { top: 0; } .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right { bottom: 0; } .Toastify__toast-container--rtl { right: 0; left: initial; } } .Toastify__toast { position: relative; min-height: 64px; box-sizing: border-box; margin-bottom: 1rem; padding: 8px; border-radius: 1px; box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05); display: flex; justify-content: space-between; max-height: 800px; overflow: hidden; font-family: sans-serif; cursor: pointer; direction: ltr; } .Toastify__toast--rtl { direction: rtl; } .Toastify__toast--default { background: #fff; color: #aaa; } .Toastify__toast--info { background: #3498db; } .Toastify__toast--success { background: #07bc0c; } .Toastify__toast--warning { background: #f1c40f; } .Toastify__toast--error { background: #e74c3c; } .Toastify__toast-body { margin: auto 0; flex: 1; } @media only screen and (max-width: 480px) { .Toastify__toast { margin-bottom: 0; } } .Toastify__close-button { color: #fff; font-weight: bold; font-size: 14px; background: transparent; outline: none; border: none; padding: 0; cursor: pointer; opacity: 0.7; transition: 0.3s ease; align-self: flex-start; } .Toastify__close-button--default { color: #000; opacity: 0.3; } .Toastify__close-button:hover, .Toastify__close-button:focus { opacity: 1; } @keyframes Toastify__trackProgress { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } } .Toastify__progress-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; z-index: 9999; opacity: 0.7; background-color: rgba(255, 255, 255, 0.7); transform-origin: left; } .Toastify__progress-bar--animated { animation: Toastify__trackProgress linear 1 forwards; } .Toastify__progress-bar--controlled { transition: transform .2s; } .Toastify__progress-bar--rtl { right: 0; left: initial; transform-origin: right; } .Toastify__progress-bar--default { background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55); } @keyframes Toastify__bounceInRight { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0); } 75% { transform: translate3d(10px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } to { transform: none; } } @keyframes Toastify__bounceOutRight { 20% { opacity: 1; transform: translate3d(-20px, 0, 0); } to { opacity: 0; transform: translate3d(2000px, 0, 0); } } @keyframes Toastify__bounceInLeft { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(25px, 0, 0); } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } to { transform: none; } } @keyframes Toastify__bounceOutLeft { 20% { opacity: 1; transform: translate3d(20px, 0, 0); } to { opacity: 0; transform: translate3d(-2000px, 0, 0); } } @keyframes Toastify__bounceInUp { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes Toastify__bounceOutUp { 20% { transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0); } to { opacity: 0; transform: translate3d(0, -2000px, 0); } } @keyframes Toastify__bounceInDown { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } to { transform: none; } } @keyframes Toastify__bounceOutDown { 20% { transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); } to { opacity: 0; transform: translate3d(0, 2000px, 0); } } .Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left { animation-name: Toastify__bounceInLeft; } .Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right { animation-name: Toastify__bounceInRight; } .Toastify__bounce-enter--top-center { animation-name: Toastify__bounceInDown; } .Toastify__bounce-enter--bottom-center { animation-name: Toastify__bounceInUp; } .Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left { animation-name: Toastify__bounceOutLeft; } .Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right { animation-name: Toastify__bounceOutRight; } .Toastify__bounce-exit--top-center { animation-name: Toastify__bounceOutUp; } .Toastify__bounce-exit--bottom-center { animation-name: Toastify__bounceOutDown; } @keyframes Toastify__zoomIn { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes Toastify__zoomOut { from { opacity: 1; } 50% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .Toastify__zoom-enter { animation-name: Toastify__zoomIn; } .Toastify__zoom-exit { animation-name: Toastify__zoomOut; } @keyframes Toastify__flipIn { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } @keyframes Toastify__flipOut { from { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .Toastify__flip-enter { animation-name: Toastify__flipIn; } .Toastify__flip-exit { animation-name: Toastify__flipOut; } @keyframes Toastify__slideInRight { from { transform: translate3d(110%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } @keyframes Toastify__slideInLeft { from { transform: translate3d(-110%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } @keyframes Toastify__slideInUp { from { transform: translate3d(0, 110%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } @keyframes Toastify__slideInDown { from { transform: translate3d(0, -110%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } @keyframes Toastify__slideOutRight { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(110%, 0, 0); } } @keyframes Toastify__slideOutLeft { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(-110%, 0, 0); } } @keyframes Toastify__slideOutDown { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, 500px, 0); } } @keyframes Toastify__slideOutUp { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, -500px, 0); } } .Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left { animation-name: Toastify__slideInLeft; } .Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right { animation-name: Toastify__slideInRight; } .Toastify__slide-enter--top-center { animation-name: Toastify__slideInDown; } .Toastify__slide-enter--bottom-center { animation-name: Toastify__slideInUp; } .Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left { animation-name: Toastify__slideOutLeft; } .Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right { animation-name: Toastify__slideOutRight; } .Toastify__slide-exit--top-center { animation-name: Toastify__slideOutUp; } .Toastify__slide-exit--bottom-center { animation-name: Toastify__slideOutDown; } /*# sourceMappingURL=ReactToastify.css.map */ @font-face { font-display: swap; font-family: Rubik; font-style: normal; font-weight: 400; src: url('https://www.cvent-assets.com/@cvent/fonts/assets/Rubik-latin-regular.woff2') format('woff2'), url('https://www.cvent-assets.com/@cvent/fonts/assets/Rubik-latin-regular.woff') format('woff'); } @font-face { font-display: swap; font-family: Rubik; font-style: italic; font-weight: 400; src: url('https://www.cvent-assets.com/@cvent/fonts/assets/Rubik-latin-italic.woff2') format('woff2'), url('https://www.cvent-assets.com/@cvent/fonts/assets/Rubik-latin-italic.woff') format('woff'); } @font-face { font-display: swap; font-family: Rubik; font-style: normal; font-weight: 600; src: url('https://www.cvent-assets.com/@cvent/fonts/assets/Rubik-latin-600.woff2') format('woff2'), url('https://www.cvent-assets.com/@cvent/fonts/assets/Rubik-latin-600.woff') format('woff'); } @font-face { font-display: swap; font-family: Rubik; font-style: italic; font-weight: 600; src: url('https://www.cvent-assets.com/@cvent/fonts/assets/Rubik-latin-600-italic.woff2') format('woff2'), url('https://www.cvent-assets.com/@cvent/fonts/assets/Rubik-latin-600-italic.woff') format('woff'); } @font-face { font-display: swap; font-family: Rubik; font-style: normal; font-weight: 400; src: url('https://www.cvent-assets.com/@cvent/fonts/assets/Rubik-latin-regular.woff2') format('woff2'), url('https://www.cvent-assets.com/@cvent/fonts/assets/Rubik-latin-regular.woff') format('woff'); } @font-face { font-display: swap; font-family: Rubik; font-style: italic; font-weight: 400; src: url('https://www.cvent-assets.com/@cvent/fonts/assets/Rubik-latin-italic.woff2') format('woff2'), url('https://www.cvent-assets.com/@cvent/fonts/assets/Rubik-latin-italic.woff') format('woff'); } @font-face { font-display: swap; font-family: Rubik; font-style: normal; font-weight: 600; src: url('https://www.cvent-assets.com/@cvent/fonts/assets/Rubik-latin-600.woff2') format('woff2'), url('https://www.cvent-assets.com/@cvent/fonts/assets/Rubik-latin-600.woff') format('woff'); } @font-face { font-display: swap; font-family: Rubik; font-style: italic; font-weight: 600; src: url('https://www.cvent-assets.com/@cvent/fonts/assets/Rubik-latin-600-italic.woff2') format('woff2'), url('https://www.cvent-assets.com/@cvent/fonts/assets/Rubik-latin-600-italic.woff') format('woff'); } @font-face { font-display: swap; font-family: 'Roboto Mono'; font-style: normal; font-weight: 400; src: url('https://www.cvent-assets.com/@cvent/fonts/assets/Roboto-Mono-latin-regular.woff2') format('woff2'), url('https://www.cvent-assets.com/@cvent/fonts/assets/Roboto-Mono-latin-regular.woff') format('woff'); } .carina { --carina-border-radius-none: 0px; --carina-border-radius-xs: 0.125rem; --carina-border-radius-sm: 0.25rem; --carina-border-radius-md: 0.375rem; --carina-border-radius-lg: 0.5rem; --carina-border-radius-xl: 0.625rem; --carina-border-radius-2xl: 1rem; --carina-border-radius-3xl: 1.5rem; --carina-border-radius-full: 9999px; --carina-border-width-0: 0px; --carina-border-width-1: 1px; --carina-border-width-2: 2px; --carina-border-width-4: 4px; --carina-border-width-8: 8px; --carina-box-shadow-none: 0 0 #0000; --carina-box-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --carina-box-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 0 6px -2px rgb(0 0 0 / 0.1); --carina-box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.12), 0 0 10px -4px rgb(0 0 0 / 0.1); --carina-box-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.14), 0 2px 12px -6px rgb(0 0 0 / 0.12); --carina-box-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --carina-box-shadow-reverse-sm: 0 -1px 2px 0 rgb(0 0 0 / 0.05); --carina-box-shadow-reverse-md: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 0 6px -2px rgb(0 0 0 / 0.1); --carina-box-shadow-reverse-lg: 0 -10px 15px -3px rgb(0 0 0 / 0.12), 0 0 10px -4px rgb(0 0 0 / 0.1); --carina-box-shadow-reverse-xl: 0 -20px 25px -5px rgb(0 0 0 / 0.14), 0 -2px 12px -6px rgb(0 0 0 / 0.12); --carina-box-shadow-reverse-2xl: 0 -25px 50px -12px rgb(0 0 0 / 0.25); --carina-breakpoint-sm: 640px; --carina-breakpoint-md: 768px; --carina-breakpoint-lg: 1024px; --carina-breakpoint-xl: 1280px; --carina-breakpoint-2xl: 1536px; --carina-icon-xs: 1rem; --carina-icon-sm: 1.25rem; --carina-icon-md: 1.5rem; --carina-icon-lg: 2rem; --carina-opacity-0: 0; --carina-opacity-5: 0.05; --carina-opacity-10: 0.1; --carina-opacity-20: 0.2; --carina-opacity-25: 0.25; --carina-opacity-30: 0.3; --carina-opacity-40: 0.4; --carina-opacity-50: 0.5; --carina-opacity-60: 0.6; --carina-opacity-70: 0.7; --carina-opacity-75: 0.75; --carina-opacity-80: 0.8; --carina-opacity-90: 0.9; --carina-opacity-95: 0.95; --carina-opacity-100: 1; --carina-ring-width-0: var(--carina-border-width-0); --carina-ring-width-1: var(--carina-border-width-1); --carina-ring-width-2: var(--carina-border-width-2); --carina-ring-width-4: var(--carina-border-width-4); --carina-ring-width-8: var(--carina-border-width-8); --carina-rotate-0: 0deg; --carina-rotate-1: 1deg; --carina-rotate-2: 2deg; --carina-rotate-3: 3deg; --carina-rotate-6: 6deg; --carina-rotate-12: 12deg; --carina-rotate-45: 45deg; --carina-rotate-90: 90deg; --carina-rotate-180: 180deg; --carina-rotate-270: 270deg; --carina-rotate-360: 360deg; --carina-rotate-negative-1: -1deg; --carina-rotate-negative-2: -2deg; --carina-rotate-negative-3: -3deg; --carina-rotate-negative-6: -6deg; --carina-rotate-negative-12: -12deg; --carina-rotate-negative-45: -45deg; --carina-rotate-negative-90: -90deg; --carina-rotate-negative-180: -180deg; --carina-rotate-negative-270: -270deg; --carina-rotate-negative-360: -360deg; --carina-scale-0: 0; --carina-scale-50: .50; --carina-scale-75: .75; --carina-scale-90: .90; --carina-scale-95: .95; --carina-scale-100: 1; --carina-scale-105: 1.05; --carina-scale-110: 1.1; --carina-scale-125: 1.25; --carina-scale-150: 1.5; --carina-scale-shrink: var(--carina-scale-95); --carina-scale-grow: var(--carina-scale-105); --carina-spacing-0: 0px; --carina-spacing-1: 0.25rem; --carina-spacing-2: 0.5rem; --carina-spacing-3: 0.75rem; --carina-spacing-4: 1rem; --carina-spacing-5: 1.25rem; --carina-spacing-6: 1.5rem; --carina-spacing-7: 1.75rem; --carina-spacing-8: 2rem; --carina-spacing-9: 2.25rem; --carina-spacing-10: 2.5rem; --carina-spacing-11: 2.75rem; --carina-spacing-12: 3rem; --carina-spacing-14: 3.5rem; --carina-spacing-16: 4rem; --carina-spacing-20: 5rem; --carina-spacing-24: 6rem; --carina-spacing-28: 7rem; --carina-spacing-32: 8rem; --carina-spacing-36: 9rem; --carina-spacing-40: 10rem; --carina-spacing-44: 11rem; --carina-spacing-48: 12rem; --carina-spacing-52: 13rem; --carina-spacing-56: 14rem; --carina-spacing-60: 15rem; --carina-spacing-64: 16rem; --carina-spacing-72: 18rem; --carina-spacing-80: 20rem; --carina-spacing-96: 24rem; --carina-spacing-px: 1px; --carina-spacing-0-5: 0.125rem; --carina-spacing-1-5: 0.375rem; --carina-spacing-2-5: 0.625rem; --carina-spacing-3-5: 0.875rem; --carina-transition-delay-50: 50ms; --carina-transition-delay-100: 100ms; --carina-transition-delay-200: 200ms; --carina-transition-delay-300: 300ms; --carina-transition-delay-400: 400ms; --carina-transition-delay-550: 550ms; --carina-transition-delay-700: 700ms; --carina-transition-delay-800: 800ms; --carina-transition-delay-1200: 1200ms; --carina-transition-delay-reduced-motion: 100ms; --carina-transition-duration-50: 50ms; --carina-transition-duration-100: 100ms; --carina-transition-duration-200: 200ms; --carina-transition-duration-300: 300ms; --carina-transition-duration-400: 400ms; --carina-transition-duration-550: 550ms; --carina-transition-duration-700: 700ms; --carina-transition-duration-800: 800ms; --carina-transition-duration-1200: 1200ms; --carina-transition-duration-reduced-motion: 100ms; --carina-transition-timing-function-expressive-ease-in: cubic-bezier(0.4, 0.14, 1, 1); --carina-transition-timing-function-expressive-ease-out: cubic-bezier(0, 0, 0.39, 1); --carina-transition-timing-function-expressive-ease-in-out: cubic-bezier(0.4, 0.15, 0.3, 1); --carina-transition-timing-function-productive-ease-in: cubic-bezier(0.2, 0, 1, 0.9); --carina-transition-timing-function-productive-ease-out: cubic-bezier(0, 0, 0.4, 0.9); --carina-transition-timing-function-productive-ease-in-out: cubic-bezier(0.2, 0, 0.4, 0.9); --carina-transition-timing-function-linear: cubic-bezier(0,0,1,1); --carina-z-index-0: 0; --carina-z-index-10: 10; --carina-z-index-20: 20; --carina-z-index-30: 30; --carina-z-index-40: 40; --carina-z-index-50: 50; --carina-z-index-auto: auto; --carina-z-index-current: 0; --carina-z-index-popper: 100; --carina-z-index-scrim: 300; --carina-z-index-panel: 400; --carina-z-index-fullscreen-modal: 800; --carina-z-index-modal: 1200; --carina-z-index-alert: 1600; --carina-z-index-popper-diff: 100; --carina-z-index-scrim-diff: -100; --carina-font-size-3xs: 10px; --carina-font-size-2xs: 12px; --carina-font-size-xs: 13px; --carina-font-size-sm: 14px; --carina-font-size-md: 16px; --carina-font-size-lg: 18px; --carina-font-size-xl: 21px; --carina-font-size-2xl: 24px; --carina-font-size-3xl: 28px; --carina-font-size-4xl: 32px; --carina-font-size-5xl: 36px; --carina-font-size-6xl: 40px; --carina-font-size-7xl: 48px; --carina-font-size-8xl: 56px; --carina-font-size-body-3xs: var(--carina-font-size-3xs); --carina-font-size-body-2xs: var(--carina-font-size-2xs); --carina-font-size-body-xs: var(--carina-font-size-xs); --carina-font-size-body-sm: var(--carina-font-size-sm); --carina-font-size-body-md: var(--carina-font-size-md); --carina-font-size-body-lg: var(--carina-font-size-lg); --carina-font-size-body-xl: var(--carina-font-size-xl); --carina-font-size-display-2xs: var(--carina-font-size-xl); --carina-font-size-display-xs: var(--carina-font-size-2xl); --carina-font-size-display-sm: var(--carina-font-size-3xl); --carina-font-size-display-md: var(--carina-font-size-4xl); --carina-font-size-display-lg: var(--carina-font-size-5xl); --carina-font-size-display-xl: var(--carina-font-size-6xl); --carina-font-size-display-2xl: var(--carina-font-size-7xl); --carina-font-size-display-3xl: var(--carina-font-size-8xl); --carina-font-size-header-6: var(--carina-font-size-lg); --carina-font-size-header-5: var(--carina-font-size-xl); --carina-font-size-header-4: var(--carina-font-size-2xl); --carina-font-size-header-3: var(--carina-font-size-3xl); --carina-font-size-header-2: var(--carina-font-size-4xl); --carina-font-size-header-1: var(--carina-font-size-5xl); --carina-font-size-m-display-2xs: var(--carina-font-size-xl); --carina-font-size-m-display-xs: var(--carina-font-size-xl); --carina-font-size-m-display-sm: var(--carina-font-size-xl); --carina-font-size-m-display-md: var(--carina-font-size-2xl); --carina-font-size-m-display-lg: var(--carina-font-size-3xl); --carina-font-size-m-display-xl: var(--carina-font-size-4xl); --carina-font-size-m-display-2xl: var(--carina-font-size-5xl); --carina-font-size-m-display-3xl: var(--carina-font-size-6xl); --carina-font-size-m-header-6: var(--carina-font-size-sm); --carina-font-size-m-header-5: var(--carina-font-size-md); --carina-font-size-m-header-4: var(--carina-font-size-lg); --carina-font-size-m-header-3: var(--carina-font-size-xl); --carina-font-size-m-header-2: var(--carina-font-size-2xl); --carina-font-size-m-header-1: var(--carina-font-size-3xl); --carina-font-weight-thin: 100; --carina-font-weight-extra-light: 200; --carina-font-weight-light: 300; --carina-font-weight-normal: 400; --carina-font-weight-medium: 500; --carina-font-weight-semi-bold: 600; --carina-font-weight-bold: 700; --carina-font-weight-extra-bold: 800; --carina-font-weight-black: 900; --carina-font-weight-body: var(--carina-font-weight-normal); --carina-font-weight-display: var(--carina-font-weight-semi-bold); --carina-line-height-1: 12px; --carina-line-height-2: 16px; --carina-line-height-3: 20px; --carina-line-height-4: 24px; --carina-line-height-5: 28px; --carina-line-height-6: 32px; --carina-line-height-7: 36px; --carina-line-height-8: 40px; --carina-line-height-9: 44px; --carina-line-height-10: 48px; --carina-line-height-11: 52px; --carina-line-height-12: 56px; --carina-line-height-13: 60px; --carina-line-height-14: 72px; --carina-line-height-none: 1; --carina-line-height-tight: 1.25; --carina-line-height-snug: 1.375; --carina-line-height-normal: 1.5; --carina-line-height-relaxed: 1.625; --carina-line-height-loose: 2; --carina-line-height-body-3xs: var(--carina-line-height-2); --carina-line-height-body-2xs: var(--carina-line-height-2); --carina-line-height-body-xs: var(--carina-line-height-3); --carina-line-height-body-sm: var(--carina-line-height-3); --carina-line-height-body-md: var(--carina-line-height-4); --carina-line-height-body-lg: var(--carina-line-height-4); --carina-line-height-body-xl: var(--carina-line-height-5); --carina-line-height-display-2xs: var(--carina-line-height-5); --carina-line-height-display-xs: var(--carina-line-height-6); --carina-line-height-display-sm: var(--carina-line-height-7); --carina-line-height-display-md: var(--carina-line-height-8); --carina-line-height-display-lg: var(--carina-line-height-10); --carina-line-height-display-xl: var(--carina-line-height-11); --carina-line-height-display-2xl: var(--carina-line-height-13); --carina-line-height-display-3xl: var(--carina-line-height-14); --carina-line-height-m-display-2xs: var(--carina-line-height-5); --carina-line-height-m-display-xs: var(--carina-line-height-5); --carina-line-height-m-display-sm: var(--carina-line-height-5); --carina-line-height-m-display-md: var(--carina-line-height-6); --carina-line-height-m-display-lg: var(--carina-line-height-7); --carina-line-height-m-display-xl: var(--carina-line-height-8); --carina-line-height-m-display-2xl: var(--carina-line-height-10); --carina-line-height-m-display-3xl: var(--carina-line-height-11); --carina-line-height-header-6: var(--carina-line-height-4); --carina-line-height-header-5: var(--carina-line-height-5); --carina-line-height-header-4: var(--carina-line-height-6); --carina-line-height-header-3: var(--carina-line-height-7); --carina-line-height-header-2: var(--carina-line-height-8); --carina-line-height-header-1: var(--carina-line-height-10); --carina-line-height-m-header-6: var(--carina-line-height-3); --carina-line-height-m-header-5: var(--carina-line-height-3); --carina-line-height-m-header-4: var(--carina-line-height-4); --carina-line-height-m-header-3: var(--carina-line-height-5); --carina-line-height-m-header-2: var(--carina-line-height-5); --carina-line-height-m-header-1: var(--carina-line-height-5); --carina-font-family-primary: Rubik, Helvetica, Arial; --carina-font-family-secondary: Rubik, Helvetica, Arial; --carina-font-family-mono: 'Roboto Mono', monospace; --carina-font-family-body: var(--carina-font-family-primary); --carina-font-family-display: var(--carina-font-family-secondary); } @media not all and (min-width: 640px) { .carina:not(:where([class~='not-carina-responsive-typography'])) { --carina-font-size-display-2xs: var(--carina-font-size-m-display-2xs); --carina-font-size-display-xs: var(--carina-font-size-m-display-xs); --carina-font-size-display-sm: var(--carina-font-size-m-display-sm); --carina-font-size-display-md: var(--carina-font-size-m-display-md); --carina-font-size-display-lg: var(--carina-font-size-m-display-lg); --carina-font-size-display-xl: var(--carina-font-size-m-display-xl); --carina-font-size-display-2xl: var(--carina-font-size-m-display-2xl); --carina-font-size-display-3xl: var(--carina-font-size-m-display-3xl); --carina-font-size-header-6: var(--carina-font-size-m-header-6); --carina-font-size-header-5: var(--carina-font-size-m-header-5); --carina-font-size-header-4: var(--carina-font-size-m-header-4); --carina-font-size-header-3: var(--carina-font-size-m-header-3); --carina-font-size-header-2: var(--carina-font-size-m-header-2); --carina-font-size-header-1: var(--carina-font-size-m-header-1); --carina-line-height-display-2xs: var(--carina-line-height-m-display-2xs); --carina-line-height-display-xs: var(--carina-line-height-m-display-xs); --carina-line-height-display-sm: var(--carina-line-height-m-display-sm); --carina-line-height-display-md: var(--carina-line-height-m-display-md); --carina-line-height-display-lg: var(--carina-line-height-m-display-lg); --carina-line-height-display-xl: var(--carina-line-height-m-display-xl); --carina-line-height-display-2xl: var(--carina-line-height-m-display-2xl); --carina-line-height-display-3xl: var(--carina-line-height-m-display-3xl); --carina-line-height-header-6: var(--carina-line-height-m-header-6); --carina-line-height-header-5: var(--carina-line-height-m-header-5); --carina-line-height-header-4: var(--carina-line-height-m-header-4); --carina-line-height-header-3: var(--carina-line-height-m-header-3); --carina-line-height-header-2: var(--carina-line-height-m-header-2); --carina-line-height-header-1: var(--carina-line-height-m-header-1); } } [data-carina-theme="white"] { --carina-colors-inherit: inherit; --carina-colors-current: currentColor; --carina-colors-transparent: transparent; --carina-colors-body-background: #efefef; --carina-colors-accessory-0-10: #fdd1f6; --carina-colors-accessory-0-20: #f1aef3; --carina-colors-accessory-0-30: #d490f1; --carina-colors-accessory-0-40: #b473e9; --carina-colors-accessory-0-50: #8457d9; --carina-colors-accessory-0-60: #4d31ba; --carina-colors-accessory-0-70: #1c1386; --carina-colors-accessory-1-10: #a6f6e0; --carina-colors-accessory-1-20: #64e4e8; --carina-colors-accessory-1-30: #2fc7f0; --carina-colors-accessory-1-40: #17a6f8; --carina-colors-accessory-1-50: #0781da; --carina-colors-accessory-1-60: #1c4eb4; --carina-colors-accessory-1-70: #192887; --carina-colors-accessory-2-10: #b7f4ac; --carina-colors-accessory-2-20: #77e9a1; --carina-colors-accessory-2-30: #07d7a8; --carina-colors-accessory-2-40: #05baa5; --carina-colors-accessory-2-50: #059a9a; --carina-colors-accessory-2-60: #047885; --carina-colors-accessory-2-70: #02516c; --carina-colors-accessory-3-10: #ffe982; --carina-colors-accessory-3-20: #ffcc66; --carina-colors-accessory-3-30: #ffab00; --carina-colors-accessory-3-40: #ff7830; --carina-colors-accessory-3-50: #df4e0f; --carina-colors-accessory-3-60: #b22205; --carina-colors-accessory-3-70: #790c03; --carina-colors-accessory-4-10: #ffcca1; --carina-colors-accessory-4-20: #ffb2a3; --carina-colors-accessory-4-30: #ff8888; --carina-colors-accessory-4-40: #f05887; --carina-colors-accessory-4-50: #c2386c; --carina-colors-accessory-4-60: #891150; --carina-colors-accessory-4-70: #5d074a; --carina-colors-body-seed: #242424; --carina-colors-danger-0: #FFFFFF; --carina-colors-danger-5: #ffebe8; --carina-colors-danger-10: #ffe0dd; --carina-colors-danger-20: #fecec9; --carina-colors-danger-30: #fbb2aa; --carina-colors-danger-40: #f6978e; --carina-colors-danger-50: #eb645c; --carina-colors-danger-60: #dc222a; --carina-colors-danger-70: #c30002; --carina-colors-danger-80: #a90000; --carina-colors-danger-90: #820000; --carina-colors-danger-95: #470000; --carina-colors-danger-100: #000000; --carina-colors-danger-seed: #D9021F; --carina-colors-grayscale-0: #FFFFFF; --carina-colors-grayscale-5: #f8f8f8; --carina-colors-grayscale-10: #eeeeee; --carina-colors-grayscale-20: #dfdfdf; --carina-colors-grayscale-30: #cbcbcb; --carina-colors-grayscale-40: #b7b7b7; --carina-colors-grayscale-50: #959595; --carina-colors-grayscale-60: #757575; --carina-colors-grayscale-70: #646464; --carina-colors-grayscale-80: #575757; --carina-colors-grayscale-90: #424242; --carina-colors-grayscale-95: #242424; --carina-colors-grayscale-100: #000000; --carina-colors-grayscale-seed: #777777; --carina-colors-heading-seed: #242424; --carina-colors-info-0: #FFFFFF; --carina-colors-info-5: #e9f1fe; --carina-colors-info-10: #dbe9fd; --carina-colors-info-20: #c3dafb; --carina-colors-info-30: #a5c7f8; --carina-colors-info-40: #86b3f4; --carina-colors-info-50: #5090eb; --carina-colors-info-60: #0e6de2; --carina-colors-info-70: #0059ce; --carina-colors-info-80: #0048bd; --carina-colors-info-90: #0030a4; --carina-colors-info-95: #000078; --carina-colors-info-100: #000000; --carina-colors-info-seed: #006AE1; --carina-colors-neutral-0: #FFFFFF; --carina-colors-neutral-5: #eff0f1; --carina-colors-neutral-10: #e5e7e9; --carina-colors-neutral-20: #d6d8db; --carina-colors-neutral-30: #c1c4c8; --carina-colors-neutral-40: #adb1b7; --carina-colors-neutral-50: #8a9097; --carina-colors-neutral-60: #6a727b; --carina-colors-neutral-70: #596069; --carina-colors-neutral-80: #4b525b; --carina-colors-neutral-90: #373e47; --carina-colors-neutral-95: #191f27; --carina-colors-neutral-100: #000000; --carina-colors-neutral-seed: #69717A; --carina-colors-primary-0: #FFFFFF; --carina-colors-primary-5: #e9f1fe; --carina-colors-primary-10: #dbe9fd; --carina-colors-primary-20: #c3dafb; --carina-colors-primary-30: #a5c7f8; --carina-colors-primary-40: #86b3f4; --carina-colors-primary-50: #5090eb; --carina-colors-primary-60: #0e6de2; --carina-colors-primary-70: #0059ce; --carina-colors-primary-80: #0048bd; --carina-colors-primary-90: #0030a4; --carina-colors-primary-95: #000078; --carina-colors-primary-100: #000000; --carina-colors-primary-seed: #006AE1; --carina-colors-secondary-0: #FFFFFF; --carina-colors-secondary-5: #e4f3ee; --carina-colors-secondary-10: #d6ece5; --carina-colors-secondary-20: #bce0d5; --carina-colors-secondary-30: #98cfbf; --carina-colors-secondary-40: #73bfaa; --carina-colors-secondary-50: #01a286; --carina-colors-secondary-60: #008066; --carina-colors-secondary-70: #006d54; --carina-colors-secondary-80: #005d46; --carina-colors-secondary-90: #004732; --carina-colors-secondary-95: #002413; --carina-colors-secondary-100: #000000; --carina-colors-secondary-seed: #00A286; --carina-colors-success-0: #FFFFFF; --carina-colors-success-5: #e9f3e8; --carina-colors-success-10: #dcecda; --carina-colors-success-20: #c7e0c4; --carina-colors-success-30: #a7cea3; --carina-colors-success-40: #89be84; --carina-colors-success-50: #51a04c; --carina-colors-success-60: #008400; --carina-colors-success-70: #007000; --carina-colors-success-80: #006000; --carina-colors-success-90: #004900; --carina-colors-success-95: #002500; --carina-colors-success-100: #000000; --carina-colors-success-seed: #008600; --carina-colors-surface-0: #FFFFFF; --carina-colors-surface-5: #f7f7f7; --carina-colors-surface-10: #efefef; --carina-colors-surface-20: #e0e0e0; --carina-colors-surface-30: #cbcbcb; --carina-colors-surface-40: #b7b7b7; --carina-colors-surface-50: #959595; --carina-colors-surface-60: #757575; --carina-colors-surface-70: #646464; --carina-colors-surface-80: #565656; --carina-colors-surface-90: #424242; --carina-colors-surface-95: #242424; --carina-colors-surface-100: #000000; --carina-colors-surface-seed: #FFFFFF; --carina-colors-surface-alt: #f7f7f7; --carina-colors-tertiary-0: #FFFFFF; --carina-colors-tertiary-5: #f1eefd; --carina-colors-tertiary-10: #e9e4fb; --carina-colors-tertiary-20: #dcd4f8; --carina-colors-tertiary-30: #cabdf3; --carina-colors-tertiary-40: #b9a6ee; --carina-colors-tertiary-50: #9c7ee4; --carina-colors-tertiary-60: #8456d8; --carina-colors-tertiary-70: #7243c4; --carina-colors-tertiary-80: #6533b4; --carina-colors-tertiary-90: #52179b; --carina-colors-tertiary-95: #280063; --carina-colors-tertiary-100: #000000; --carina-colors-tertiary-seed: #8457D9; --carina-colors-warning-0: #FFFFFF; --carina-colors-warning-5: #ffefc1; --carina-colors-warning-10: #ffe59c; --carina-colors-warning-20: #ffd554; --carina-colors-warning-30: #f1be00; --carina-colors-warning-40: #dcaa00; --carina-colors-warning-50: #b88700; --carina-colors-warning-60: #986700; --carina-colors-warning-70: #855500; --carina-colors-warning-80: #774700; --carina-colors-warning-90: #613100; --carina-colors-warning-95: #3e0e00; --carina-colors-warning-100: #000000; --carina-colors-warning-seed: #FFCC00; --carina-background-color-background: var(--carina-colors-surface-alt); --carina-background-color-danger: var(--carina-colors-danger-60); --carina-background-color-danger-active: var(--carina-colors-danger-80); --carina-background-color-danger-hover: var(--carina-colors-danger-70); --carina-background-color-danger-pale: var(--carina-colors-danger-10); --carina-background-color-danger-pale-active: var(--carina-colors-danger-30); --carina-background-color-danger-pale-hover: var(--carina-colors-danger-20); --carina-background-color-illustration-neutral-light: var(--carina-colors-grayscale-40); --carina-background-color-illustration-neutral-medium: var(--carina-colors-grayscale-60); --carina-background-color-illustration-neutral-strong: var(--carina-colors-grayscale-90); --carina-background-color-illustration-neutral-x-light: var(--carina-colors-grayscale-10); --carina-background-color-illustration-neutral-x-strong: var(--carina-colors-grayscale-100); --carina-background-color-illustration-neutral-zero: var(--carina-colors-grayscale-0); --carina-background-color-illustration-primary-light: var(--carina-colors-primary-40); --carina-background-color-illustration-primary-medium: var(--carina-colors-primary-60); --carina-background-color-illustration-primary-strong: var(--carina-colors-primary-90); --carina-background-color-illustration-primary-x-light: var(--carina-colors-primary-10); --carina-background-color-illustration-primary-x-strong: var(--carina-colors-primary-100); --carina-background-color-illustration-primary-zero: var(--carina-colors-primary-0); --carina-background-color-illustration-secondary-light: var(--carina-colors-secondary-40); --carina-background-color-illustration-secondary-medium: var(--carina-colors-secondary-60); --carina-background-color-illustration-secondary-strong: var(--carina-colors-secondary-90); --carina-background-color-illustration-secondary-x-light: var(--carina-colors-secondary-10); --carina-background-color-illustration-secondary-x-strong: var(--carina-colors-secondary-100); --carina-background-color-illustration-secondary-zero: var(--carina-colors-secondary-0); --carina-background-color-illustration-tertiary-light: var(--carina-colors-tertiary-40); --carina-background-color-illustration-tertiary-medium: var(--carina-colors-tertiary-60); --carina-background-color-illustration-tertiary-strong: var(--carina-colors-tertiary-90); --carina-background-color-illustration-tertiary-x-light: var(--carina-colors-tertiary-10); --carina-background-color-illustration-tertiary-x-strong: var(--carina-colors-tertiary-100); --carina-background-color-illustration-tertiary-zero: var(--carina-colors-tertiary-0); --carina-background-color-info: var(--carina-colors-info-60); --carina-background-color-info-active: var(--carina-colors-info-80); --carina-background-color-info-hover: var(--carina-colors-info-70); --carina-background-color-info-pale: var(--carina-colors-info-10); --carina-background-color-info-pale-active: var(--carina-colors-info-30); --carina-background-color-info-pale-hover: var(--carina-colors-info-20); --carina-background-color-neutral: var(--carina-colors-grayscale-60); --carina-background-color-neutral-active: color-mix(in srgb, var(--carina-colors-grayscale-100) calc(var(--carina-opacity-20) * 100%), transparent); --carina-background-color-neutral-hover: color-mix(in srgb, var(--carina-colors-grayscale-100) calc(var(--carina-opacity-10) * 100%), transparent); --carina-background-color-neutral-inactive: var(--carina-colors-grayscale-20); --carina-background-color-neutral-inverse: var(--carina-colors-grayscale-0); --carina-background-color-neutral-inverse-active: var(--carina-colors-grayscale-20); --carina-background-color-neutral-inverse-hover: var(--carina-colors-grayscale-10); --carina-background-color-popper: var(--carina-colors-surface-seed); --carina-background-color-primary: var(--carina-colors-primary-seed); --carina-background-color-primary-active: var(--carina-colors-primary-80); --carina-background-color-primary-hover: var(--carina-colors-primary-70); --carina-background-color-primary-pale: var(--carina-colors-primary-10); --carina-background-color-primary-pale-active: var(--carina-colors-primary-30); --carina-background-color-primary-pale-hover: var(--carina-colors-primary-20); --carina-background-color-scrim: color-mix(in srgb, var(--carina-colors-grayscale-10) calc(var(--carina-opacity-80) * 100%), transparent); --carina-background-color-scrim-inverse: color-mix(in srgb, var(--carina-colors-grayscale-95) calc(var(--carina-opacity-80) * 100%), transparent); --carina-background-color-secondary: var(--carina-colors-secondary-seed); --carina-background-color-secondary-active: var(--carina-colors-secondary-30); --carina-background-color-secondary-hover: var(--carina-colors-secondary-40); --carina-background-color-secondary-pale: var(--carina-colors-secondary-10); --carina-background-color-secondary-pale-active: var(--carina-colors-secondary-30); --carina-background-color-secondary-pale-hover: var(--carina-colors-secondary-20); --carina-background-color-success: var(--carina-colors-success-60); --carina-background-color-success-active: var(--carina-colors-success-80); --carina-background-color-success-hover: var(--carina-colors-success-70); --carina-background-color-success-pale: var(--carina-colors-success-10); --carina-background-color-success-pale-active: var(--carina-colors-success-30); --carina-background-color-success-pale-hover: var(--carina-colors-success-20); --carina-background-color-surface: var(--carina-colors-surface-seed); --carina-background-color-surface-active: var(--carina-colors-primary-20); --carina-background-color-surface-alt: var(--carina-colors-surface-alt); --carina-background-color-surface-hover: var(--carina-colors-surface-10); --carina-background-color-surface-inverse: var(--carina-colors-surface-80); --carina-background-color-surface-selected: var(--carina-colors-primary-20); --carina-background-color-tertiary: var(--carina-colors-tertiary-seed); --carina-background-color-tertiary-active: var(--carina-colors-tertiary-80); --carina-background-color-tertiary-hover: var(--carina-colors-tertiary-70); --carina-background-color-tertiary-pale: var(--carina-colors-tertiary-10); --carina-background-color-tertiary-pale-active: var(--carina-colors-tertiary-30); --carina-background-color-tertiary-pale-hover: var(--carina-colors-tertiary-20); --carina-background-color-warning: var(--carina-colors-warning-30); --carina-background-color-warning-active: var(--carina-colors-warning-50); --carina-background-color-warning-hover: var(--carina-colors-warning-40); --carina-background-color-warning-pale: var(--carina-colors-warning-5); --carina-background-color-warning-pale-active: var(--carina-colors-warning-20); --carina-background-color-warning-pale-hover: var(--carina-colors-warning-10); --carina-border-color-base: var(--carina-colors-grayscale-60); --carina-border-color-danger: var(--carina-colors-danger-60); --carina-border-color-danger-focus: var(--carina-colors-danger-50); --carina-border-color-hard: var(--carina-colors-grayscale-100); --carina-border-color-info: var(--carina-colors-info-60); --carina-border-color-inverse: var(--carina-colors-grayscale-0); --carina-border-color-primary: var(--carina-colors-primary-seed); --carina-border-color-primary-focus: var(--carina-colors-primary-seed); --carina-border-color-secondary: var(--carina-colors-secondary-seed); --carina-border-color-secondary-focus: var(--carina-colors-secondary-seed); --carina-border-color-soft: var(--carina-colors-grayscale-20); --carina-border-color-success: var(--carina-colors-success-60); --carina-border-color-tertiary: var(--carina-colors-tertiary-seed); --carina-border-color-tertiary-focus: var(--carina-colors-tertiary-seed); --carina-border-color-warning: var(--carina-colors-warning-60); --carina-text-color-base: var(--carina-colors-grayscale-95); --carina-text-color-base-inverse: var(--carina-colors-grayscale-0); --carina-text-color-body: var(--carina-colors-body-seed); --carina-text-color-danger: var(--carina-colors-danger-60); --carina-text-color-danger-active: var(--carina-colors-danger-80); --carina-text-color-danger-hover: var(--carina-colors-danger-70); --carina-text-color-danger-visited: var(--carina-colors-danger-80); --carina-text-color-disabled: var(--carina-colors-grayscale-40); --carina-text-color-disabled-inverse: var(--carina-colors-grayscale-50); --carina-text-color-heading: var(--carina-colors-heading-seed); --carina-text-color-info: var(--carina-colors-info-60); --carina-text-color-info-active: var(--carina-colors-info-80); --carina-text-color-info-hover: var(--carina-colors-info-70); --carina-text-color-info-visited: var(--carina-colors-info-80); --carina-text-color-on-danger: var(--carina-colors-grayscale-0); --carina-text-color-on-danger-pale: var(--carina-colors-grayscale-100); --carina-text-color-on-danger-pale-soft: var(--carina-colors-danger-70); --carina-text-color-on-info: var(--carina-colors-grayscale-0); --carina-text-color-on-info-pale: var(--carina-colors-grayscale-100); --carina-text-color-on-info-pale-soft: var(--carina-colors-info-70); --carina-text-color-on-neutral: var(--carina-colors-grayscale-0); --carina-text-color-on-primary: var(--carina-colors-grayscale-0); --carina-text-color-on-primary-pale: var(--carina-colors-grayscale-100); --carina-text-color-on-primary-pale-soft: var(--carina-colors-primary-70); --carina-text-color-on-secondary: var(--carina-colors-grayscale-100); --carina-text-color-on-secondary-pale: var(--carina-colors-grayscale-100); --carina-text-color-on-secondary-pale-soft: var(--carina-colors-secondary-70); --carina-text-color-on-success: var(--carina-colors-grayscale-0); --carina-text-color-on-success-pale: var(--carina-colors-grayscale-100); --carina-text-color-on-success-pale-soft: var(--carina-colors-success-70); --carina-text-color-on-tertiary: var(--carina-colors-grayscale-0); --carina-text-color-on-tertiary-pale: var(--carina-colors-grayscale-100); --carina-text-color-on-tertiary-pale-soft: var(--carina-colors-tertiary-70); --carina-text-color-on-warning: var(--carina-colors-grayscale-100); --carina-text-color-on-warning-pale: var(--carina-colors-grayscale-100); --carina-text-color-on-warning-pale-soft: var(--carina-colors-warning-70); --carina-text-color-primary: var(--carina-colors-primary-seed); --carina-text-color-primary-active: var(--carina-colors-primary-80); --carina-text-color-primary-hover: var(--carina-colors-primary-70); --carina-text-color-primary-visited: var(--carina-colors-primary-80); --carina-text-color-secondary: var(--carina-colors-grayscale-95); --carina-text-color-secondary-active: var(--carina-colors-grayscale-95); --carina-text-color-secondary-hover: var(--carina-colors-grayscale-95); --carina-text-color-secondary-visited: var(--carina-colors-grayscale-95); --carina-text-color-soft: var(--carina-colors-surface-70); --carina-text-color-soft-inverse: var(--carina-colors-grayscale-30); --carina-text-color-success: var(--carina-colors-success-60); --carina-text-color-success-active: var(--carina-colors-success-80); --carina-text-color-success-hover: var(--carina-colors-success-70); --carina-text-color-success-visited: var(--carina-colors-success-80); --carina-text-color-tertiary: var(--carina-colors-tertiary-seed); --carina-text-color-tertiary-active: var(--carina-colors-tertiary-80); --carina-text-color-tertiary-hover: var(--carina-colors-tertiary-70); --carina-text-color-tertiary-visited: var(--carina-colors-tertiary-80); --carina-text-color-warning: var(--carina-colors-warning-60); --carina-text-color-warning-active: var(--carina-colors-warning-80); --carina-text-color-warning-hover: var(--carina-colors-warning-70); --carina-text-color-warning-visited: var(--carina-colors-warning-80); --carina-ring-base: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-primary-focus); --carina-ring-white: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-inverse); --carina-ring-black: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-hard); --carina-ring-danger: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-danger-focus); --carina-ring-color-base: var(--carina-border-color-primary-focus); --carina-ring-color-white: var(--carina-border-color-inverse); --carina-ring-color-black: var(--carina-border-color-hard); --carina-ring-color-danger: var(--carina-border-color-danger-focus); } [data-carina-theme="dark"] { --carina-colors-inherit: inherit; --carina-colors-current: currentColor; --carina-colors-transparent: transparent; --carina-colors-body-background: #efefef; --carina-colors-accessory-0-10: #1c1386; --carina-colors-accessory-0-20: #4d31ba; --carina-colors-accessory-0-30: #8457d9; --carina-colors-accessory-0-40: #b473e9; --carina-colors-accessory-0-50: #d490f1; --carina-colors-accessory-0-60: #f1aef3; --carina-colors-accessory-0-70: #fdd1f6; --carina-colors-accessory-1-10: #192887; --carina-colors-accessory-1-20: #1c4eb4; --carina-colors-accessory-1-30: #0781da; --carina-colors-accessory-1-40: #17a6f8; --carina-colors-accessory-1-50: #2fc7f0; --carina-colors-accessory-1-60: #64e4e8; --carina-colors-accessory-1-70: #a6f6e0; --carina-colors-accessory-2-10: #02516c; --carina-colors-accessory-2-20: #047885; --carina-colors-accessory-2-30: #059a9a; --carina-colors-accessory-2-40: #05baa5; --carina-colors-accessory-2-50: #07d7a8; --carina-colors-accessory-2-60: #77e9a1; --carina-colors-accessory-2-70: #b7f4ac; --carina-colors-accessory-3-10: #790c03; --carina-colors-accessory-3-20: #b22205; --carina-colors-accessory-3-30: #df4e0f; --carina-colors-accessory-3-40: #ff7830; --carina-colors-accessory-3-50: #ffab00; --carina-colors-accessory-3-60: #ffcc66; --carina-colors-accessory-3-70: #ffe982; --carina-colors-accessory-4-10: #5d074a; --carina-colors-accessory-4-20: #891150; --carina-colors-accessory-4-30: #c2386c; --carina-colors-accessory-4-40: #f05887; --carina-colors-accessory-4-50: #ff8888; --carina-colors-accessory-4-60: #ffb2a3; --carina-colors-accessory-4-70: #ffcca1; --carina-colors-body-seed: #F8F8F8; --carina-colors-danger-0: #000000; --carina-colors-danger-5: #910000; --carina-colors-danger-10: #9b0000; --carina-colors-danger-20: #ac0000; --carina-colors-danger-30: #c50005; --carina-colors-danger-40: #db1826; --carina-colors-danger-50: #e95f58; --carina-colors-danger-60: #f6938a; --carina-colors-danger-70: #fbb4ad; --carina-colors-danger-80: #fed1cb; --carina-colors-danger-90: #fffdfd; --carina-colors-danger-95: #ffffff; --carina-colors-danger-100: #FFFFFF; --carina-colors-danger-seed: #D9021F; --carina-colors-grayscale-0: #FFFFFF; --carina-colors-grayscale-5: #f8f8f8; --carina-colors-grayscale-10: #eeeeee; --carina-colors-grayscale-20: #dfdfdf; --carina-colors-grayscale-30: #cbcbcb; --carina-colors-grayscale-40: #b7b7b7; --carina-colors-grayscale-50: #959595; --carina-colors-grayscale-60: #757575; --carina-colors-grayscale-70: #646464; --carina-colors-grayscale-80: #575757; --carina-colors-grayscale-90: #424242; --carina-colors-grayscale-95: #242424; --carina-colors-grayscale-100: #000000; --carina-colors-grayscale-seed: #777777; --carina-colors-heading-seed: #F8F8F8; --carina-colors-info-0: #000000; --carina-colors-info-5: #003aae; --carina-colors-info-10: #0040b5; --carina-colors-info-20: #004bc0; --carina-colors-info-30: #005ad0; --carina-colors-info-40: #026ae1; --carina-colors-info-50: #4a8cea; --carina-colors-info-60: #82b0f3; --carina-colors-info-70: #a8c8f8; --carina-colors-info-80: #c8ddfb; --carina-colors-info-90: #fdfeff; --carina-colors-info-95: #ffffff; --carina-colors-info-100: #FFFFFF; --carina-colors-info-seed: #006AE1; --carina-colors-neutral-0: #000000; --carina-colors-neutral-5: #3f474f; --carina-colors-neutral-10: #444b54; --carina-colors-neutral-20: #4d555d; --carina-colors-neutral-30: #5a626b; --carina-colors-neutral-40: #687079; --carina-colors-neutral-50: #868d94; --carina-colors-neutral-60: #aaaeb4; --carina-colors-neutral-70: #c3c6ca; --carina-colors-neutral-80: #d9dbde; --carina-colors-neutral-90: #fdfefe; --carina-colors-neutral-95: #ffffff; --carina-colors-neutral-100: #FFFFFF; --carina-colors-neutral-seed: #69717A; --carina-colors-primary-0: #000000; --carina-colors-primary-5: #184584; --carina-colors-primary-10: #1d4a89; --carina-colors-primary-20: #265392; --carina-colors-primary-30: #3461a2; --carina-colors-primary-40: #426fb2; --carina-colors-primary-50: #5e8dd2; --carina-colors-primary-60: #7fb0f7; --carina-colors-primary-70: #a6c8fb; --carina-colors-primary-80: #c7ddfd; --carina-colors-primary-90: #fdfeff; --carina-colors-primary-95: #ffffff; --carina-colors-primary-100: #FFFFFF; --carina-colors-primary-seed: #7FB0F7; --carina-colors-secondary-0: #000000; --carina-colors-secondary-5: #00512e; --carina-colors-secondary-10: #005733; --carina-colors-secondary-20: #00603b; --carina-colors-secondary-30: #006f49; --carina-colors-secondary-40: #007f57; --carina-colors-secondary-50: #009f75; --carina-colors-secondary-60: #00c599; --carina-colors-secondary-70: #70d8b6; --carina-colors-secondary-80: #abe8d1; --carina-colors-secondary-90: #fdfefe; --carina-colors-secondary-95: #ffffff; --carina-colors-secondary-100: #FFFFFF; --carina-colors-secondary-seed: #00CA9D; --carina-colors-success-0: #000000; --carina-colors-success-5: #005200; --carina-colors-success-10: #005800; --carina-colors-success-20: #006200; --carina-colors-success-30: #007100; --carina-colors-success-40: #008100; --carina-colors-success-50: #4b9e46; --carina-colors-success-60: #84bc7f; --carina-colors-success-70: #a9d0a5; --carina-colors-success-80: #c9e2c7; --carina-colors-success-90: #fdfefd; --carina-colors-success-95: #ffffff; --carina-colors-success-100: #FFFFFF; --carina-colors-success-seed: #008600; --carina-colors-surface-0: #FFFFFF; --carina-colors-surface-5: #f7f7f8; --carina-colors-surface-10: #edeeee; --carina-colors-surface-20: #dedfe0; --carina-colors-surface-30: #cacbcd; --carina-colors-surface-40: #b5b7b9; --carina-colors-surface-50: #929598; --carina-colors-surface-60: #73767b; --carina-colors-surface-70: #616469; --carina-colors-surface-80: #52575c; --carina-colors-surface-90: #3e4248; --carina-colors-surface-95: #20252b; --carina-colors-surface-100: #000000; --carina-colors-surface-seed: #21262C; --carina-colors-surface-alt: #3e4248; --carina-colors-tertiary-0: #000000; --carina-colors-tertiary-5: #503a7a; --carina-colors-tertiary-10: #563f80; --carina-colors-tertiary-20: #5e4889; --carina-colors-tertiary-30: #6b5597; --carina-colors-tertiary-40: #7963a7; --carina-colors-tertiary-50: #9681c7; --carina-colors-tertiary-60: #b8a2eb; --carina-colors-tertiary-70: #cdbef3; --carina-colors-tertiary-80: #dfd6f8; --carina-colors-tertiary-90: #fefdff; --carina-colors-tertiary-95: #ffffff; --carina-colors-tertiary-100: #FFFFFF; --carina-colors-tertiary-seed: #B9A3EC; --carina-colors-warning-0: #000000; --carina-colors-warning-5: #6a3a00; --carina-colors-warning-10: #6f3f00; --carina-colors-warning-20: #794900; --carina-colors-warning-30: #875700; --carina-colors-warning-40: #966500; --carina-colors-warning-50: #b58300; --carina-colors-warning-60: #d9a700; --carina-colors-warning-70: #f2bf00; --carina-colors-warning-80: #ffd763; --carina-colors-warning-90: #fffef9; --carina-colors-warning-95: #ffffff; --carina-colors-warning-100: #FFFFFF; --carina-colors-warning-seed: #FFCC00; --carina-background-color-background: var(--carina-colors-surface-alt); --carina-background-color-danger: var(--carina-colors-danger-70); --carina-background-color-danger-active: var(--carina-colors-danger-50); --carina-background-color-danger-hover: var(--carina-colors-danger-60); --carina-background-color-danger-pale: var(--carina-colors-danger-5); --carina-background-color-danger-pale-active: var(--carina-colors-danger-20); --carina-background-color-danger-pale-hover: var(--carina-colors-danger-10); --carina-background-color-illustration-neutral-light: var(--carina-colors-grayscale-60); --carina-background-color-illustration-neutral-medium: var(--carina-colors-grayscale-40); --carina-background-color-illustration-neutral-strong: var(--carina-colors-grayscale-10); --carina-background-color-illustration-neutral-x-light: var(--carina-colors-grayscale-90); --carina-background-color-illustration-neutral-x-strong: var(--carina-colors-grayscale-0); --carina-background-color-illustration-neutral-zero: var(--carina-colors-grayscale-100); --carina-background-color-illustration-primary-light: var(--carina-colors-primary-50); --carina-background-color-illustration-primary-medium: var(--carina-colors-primary-60); --carina-background-color-illustration-primary-strong: var(--carina-colors-primary-80); --carina-background-color-illustration-primary-x-light: var(--carina-colors-primary-5); --carina-background-color-illustration-primary-x-strong: var(--carina-colors-primary-100); --carina-background-color-illustration-primary-zero: var(--carina-colors-primary-0); --carina-background-color-illustration-secondary-light: var(--carina-colors-secondary-60); --carina-background-color-illustration-secondary-medium: var(--carina-colors-secondary-70); --carina-background-color-illustration-secondary-strong: var(--carina-colors-secondary-80); --carina-background-color-illustration-secondary-x-light: var(--carina-colors-secondary-5); --carina-background-color-illustration-secondary-x-strong: var(--carina-colors-secondary-100); --carina-background-color-illustration-secondary-zero: var(--carina-colors-secondary-0); --carina-background-color-illustration-tertiary-light: var(--carina-colors-tertiary-50); --carina-background-color-illustration-tertiary-medium: var(--carina-colors-tertiary-60); --carina-background-color-illustration-tertiary-strong: var(--carina-colors-tertiary-80); --carina-background-color-illustration-tertiary-x-light: var(--carina-colors-tertiary-5); --carina-background-color-illustration-tertiary-x-strong: var(--carina-colors-tertiary-100); --carina-background-color-illustration-tertiary-zero: var(--carina-colors-tertiary-0); --carina-background-color-info: var(--carina-colors-info-70); --carina-background-color-info-active: var(--carina-colors-info-50); --carina-background-color-info-hover: var(--carina-colors-info-60); --carina-background-color-info-pale: var(--carina-colors-info-5); --carina-background-color-info-pale-active: var(--carina-colors-info-20); --carina-background-color-info-pale-hover: var(--carina-colors-info-10); --carina-background-color-neutral: color-mix(in srgb, var(--carina-colors-grayscale-0) calc(var(--carina-opacity-80) * 100%), transparent); --carina-background-color-neutral-active: color-mix(in srgb, var(--carina-colors-grayscale-0) calc(var(--carina-opacity-30) * 100%), transparent); --carina-background-color-neutral-hover: color-mix(in srgb, var(--carina-colors-grayscale-0) calc(var(--carina-opacity-20) * 100%), transparent); --carina-background-color-neutral-inactive: var(--carina-background-color-surface-hover); --carina-background-color-neutral-inverse: var(--carina-colors-grayscale-95); --carina-background-color-neutral-inverse-active: var(--carina-colors-grayscale-80); --carina-background-color-neutral-inverse-hover: var(--carina-colors-grayscale-90); --carina-background-color-popper: var(--carina-colors-surface-alt); --carina-background-color-primary: var(--carina-colors-primary-seed); --carina-background-color-primary-active: var(--carina-colors-primary-80); --carina-background-color-primary-hover: var(--carina-colors-primary-70); --carina-background-color-primary-pale: var(--carina-colors-primary-10); --carina-background-color-primary-pale-active: var(--carina-colors-primary-30); --carina-background-color-primary-pale-hover: var(--carina-colors-primary-20); --carina-background-color-scrim: color-mix(in srgb, var(--carina-colors-grayscale-95) calc(var(--carina-opacity-80) * 100%), transparent); --carina-background-color-scrim-inverse: color-mix(in srgb, var(--carina-colors-grayscale-10) calc(var(--carina-opacity-80) * 100%), transparent); --carina-background-color-secondary: var(--carina-colors-secondary-seed); --carina-background-color-secondary-active: var(--carina-colors-secondary-80); --carina-background-color-secondary-hover: var(--carina-colors-secondary-70); --carina-background-color-secondary-pale: var(--carina-colors-secondary-10); --carina-background-color-secondary-pale-active: var(--carina-colors-secondary-30); --carina-background-color-secondary-pale-hover: var(--carina-colors-secondary-20); --carina-background-color-success: var(--carina-colors-success-70); --carina-background-color-success-active: var(--carina-colors-success-50); --carina-background-color-success-hover: var(--carina-colors-success-60); --carina-background-color-success-pale: var(--carina-colors-success-5); --carina-background-color-success-pale-active: var(--carina-colors-success-20); --carina-background-color-success-pale-hover: var(--carina-colors-success-10); --carina-background-color-surface: var(--carina-colors-surface-seed); --carina-background-color-surface-active: var(--carina-colors-surface-70); --carina-background-color-surface-alt: var(--carina-colors-surface-alt); --carina-background-color-surface-hover: var(--carina-colors-surface-80); --carina-background-color-surface-inverse: var(--carina-colors-surface-20); --carina-background-color-surface-selected: var(--carina-colors-surface-70); --carina-background-color-tertiary: var(--carina-colors-tertiary-seed); --carina-background-color-tertiary-active: var(--carina-colors-tertiary-80); --carina-background-color-tertiary-hover: var(--carina-colors-tertiary-70); --carina-background-color-tertiary-pale: var(--carina-colors-tertiary-10); --carina-background-color-tertiary-pale-active: var(--carina-colors-tertiary-30); --carina-background-color-tertiary-pale-hover: var(--carina-colors-tertiary-20); --carina-background-color-warning: var(--carina-colors-warning-60); --carina-background-color-warning-active: var(--carina-colors-warning-80); --carina-background-color-warning-hover: var(--carina-colors-warning-70); --carina-background-color-warning-pale: var(--carina-colors-warning-5); --carina-background-color-warning-pale-active: var(--carina-colors-warning-20); --carina-background-color-warning-pale-hover: var(--carina-colors-warning-10); --carina-border-color-base: var(--carina-colors-surface-50); --carina-border-color-danger: var(--carina-colors-danger-70); --carina-border-color-danger-focus: var(--carina-colors-danger-50); --carina-border-color-hard: var(--carina-colors-grayscale-0); --carina-border-color-info: var(--carina-colors-info-70); --carina-border-color-inverse: var(--carina-colors-grayscale-95); --carina-border-color-primary: var(--carina-colors-primary-seed); --carina-border-color-primary-focus: var(--carina-colors-primary-seed); --carina-border-color-secondary: var(--carina-colors-secondary-seed); --carina-border-color-secondary-focus: var(--carina-colors-secondary-seed); --carina-border-color-soft: var(--carina-colors-surface-70); --carina-border-color-success: var(--carina-colors-success-70); --carina-border-color-tertiary: var(--carina-colors-tertiary-seed); --carina-border-color-tertiary-focus: var(--carina-colors-tertiary-seed); --carina-border-color-warning: var(--carina-colors-warning-60); --carina-text-color-base: var(--carina-colors-grayscale-5); --carina-text-color-base-inverse: var(--carina-colors-grayscale-100); --carina-text-color-body: var(--carina-colors-body-seed); --carina-text-color-danger: var(--carina-colors-danger-70); --carina-text-color-danger-active: var(--carina-colors-danger-90); --carina-text-color-danger-hover: var(--carina-colors-danger-80); --carina-text-color-danger-visited: var(--carina-colors-danger-90); --carina-text-color-disabled: var(--carina-colors-surface-60); --carina-text-color-disabled-inverse: var(--carina-colors-surface-50); --carina-text-color-heading: var(--carina-colors-heading-seed); --carina-text-color-info: var(--carina-colors-info-70); --carina-text-color-info-active: var(--carina-colors-info-90); --carina-text-color-info-hover: var(--carina-colors-info-80); --carina-text-color-info-visited: var(--carina-colors-info-90); --carina-text-color-on-danger: var(--carina-colors-grayscale-100); --carina-text-color-on-danger-pale: var(--carina-colors-grayscale-0); --carina-text-color-on-danger-pale-soft: var(--carina-colors-danger-70); --carina-text-color-on-info: var(--carina-colors-grayscale-100); --carina-text-color-on-info-pale: var(--carina-colors-grayscale-0); --carina-text-color-on-info-pale-soft: var(--carina-colors-info-70); --carina-text-color-on-neutral: var(--carina-colors-grayscale-100); --carina-text-color-on-primary: var(--carina-colors-grayscale-100); --carina-text-color-on-primary-pale: var(--carina-colors-grayscale-0); --carina-text-color-on-primary-pale-soft: var(--carina-colors-primary-70); --carina-text-color-on-secondary: var(--carina-colors-grayscale-100); --carina-text-color-on-secondary-pale: var(--carina-colors-grayscale-0); --carina-text-color-on-secondary-pale-soft: var(--carina-colors-secondary-70); --carina-text-color-on-success: var(--carina-colors-grayscale-100); --carina-text-color-on-success-pale: var(--carina-colors-grayscale-0); --carina-text-color-on-success-pale-soft: var(--carina-colors-success-70); --carina-text-color-on-tertiary: var(--carina-colors-grayscale-100); --carina-text-color-on-tertiary-pale: var(--carina-colors-grayscale-0); --carina-text-color-on-tertiary-pale-soft: var(--carina-colors-tertiary-70); --carina-text-color-on-warning: var(--carina-colors-grayscale-100); --carina-text-color-on-warning-pale: var(--carina-colors-grayscale-0); --carina-text-color-on-warning-pale-soft: var(--carina-colors-warning-70); --carina-text-color-primary: var(--carina-colors-primary-seed); --carina-text-color-primary-active: var(--carina-colors-primary-80); --carina-text-color-primary-hover: var(--carina-colors-primary-70); --carina-text-color-primary-visited: var(--carina-colors-primary-80); --carina-text-color-secondary: var(--carina-colors-secondary-seed); --carina-text-color-secondary-active: var(--carina-colors-secondary-80); --carina-text-color-secondary-hover: var(--carina-colors-secondary-70); --carina-text-color-secondary-visited: var(--carina-colors-secondary-80); --carina-text-color-soft: var(--carina-colors-surface-40); --carina-text-color-soft-inverse: var(--carina-colors-surface-80); --carina-text-color-success: var(--carina-colors-success-70); --carina-text-color-success-active: var(--carina-colors-success-90); --carina-text-color-success-hover: var(--carina-colors-success-80); --carina-text-color-success-visited: var(--carina-colors-success-90); --carina-text-color-tertiary: var(--carina-colors-tertiary-seed); --carina-text-color-tertiary-active: var(--carina-colors-tertiary-80); --carina-text-color-tertiary-hover: var(--carina-colors-tertiary-70); --carina-text-color-tertiary-visited: var(--carina-colors-tertiary-80); --carina-text-color-warning: var(--carina-colors-warning-60); --carina-text-color-warning-active: var(--carina-colors-warning-80); --carina-text-color-warning-hover: var(--carina-colors-warning-70); --carina-text-color-warning-visited: var(--carina-colors-warning-80); --carina-ring-base: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-primary-focus); --carina-ring-white: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-inverse); --carina-ring-black: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-hard); --carina-ring-danger: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-danger-focus); --carina-ring-color-base: var(--carina-border-color-primary-focus); --carina-ring-color-white: var(--carina-border-color-inverse); --carina-ring-color-black: var(--carina-border-color-hard); --carina-ring-color-danger: var(--carina-border-color-danger-focus); } *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: var(--carina-ring-color-base); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::-ms-backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: var(--carina-ring-color-base); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: var(--carina-ring-color-base); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com *//* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: currentColor; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */ tab-size: 4; /* 3 */ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: var(--carina-font-family-mono); /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input:-ms-input-placeholder, textarea:-ms-input-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden]:where(:not([hidden="until-found"])) { display: none; } .container { width: 100%; } @media (min-width: 640px) { .container { max-width: 640px; } } @media (min-width: 768px) { .container { max-width: 768px; } } @media (min-width: 1024px) { .container { max-width: 1024px; } } @media (min-width: 1280px) { .container { max-width: 1280px; } } @media (min-width: 1536px) { .container { max-width: 1536px; } } .container { width: 100%; } .carina-advanced-transition--loop-indefinitely { animation-iteration-count: infinite; } .carina-advanced-transition--linear { animation-timing-function: var(--carina-transition-timing-function-linear); } .carina-advanced-transition--productive-ease-in-out { animation-timing-function: var( --carina-transition-timing-function-productive-ease-in-out ); } .carina-advanced-transition--productive-ease-in { animation-timing-function: var( --carina-transition-timing-function-productive-ease-in ); } .carina-advanced-transition--productive-ease-out { animation-timing-function: var( --carina-transition-timing-function-productive-ease-out ); } .carina-advanced-transition--expressive-ease-in-out { animation-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); } .carina-advanced-transition--expressive-ease-in { animation-timing-function: var( --carina-transition-timing-function-expressive-ease-in ); } .carina-advanced-transition--expressive-ease-out { animation-timing-function: var( --carina-transition-timing-function-expressive-ease-out ); } .carina-advanced-transition--50 { animation-duration: var(--carina-transition-duration-50); } .carina-advanced-transition--100 { animation-duration: var(--carina-transition-duration-100); } .carina-advanced-transition--200 { animation-duration: var(--carina-transition-duration-200); } .carina-advanced-transition--300 { animation-duration: var(--carina-transition-duration-300); } .carina-advanced-transition--400 { animation-duration: var(--carina-transition-duration-400); } .carina-advanced-transition--550 { animation-duration: var(--carina-transition-duration-550); } .carina-advanced-transition--700 { animation-duration: var(--carina-transition-duration-700); } .carina-advanced-transition--800 { animation-duration: var(--carina-transition-duration-800); } .carina-advanced-transition--1200 { animation-duration: var(--carina-transition-duration-1200); } .carina-transition--appear-start, .carina-transition--enter-start, .carina-transition--exit-start { transition-property: none; } .carina-transition--linear { transition-timing-function: var(--carina-transition-timing-function-linear); } .carina-transition--productive-ease-in-out { transition-timing-function: var( --carina-transition-timing-function-productive-ease-in-out ); } .carina-transition--productive-ease-in { transition-timing-function: var( --carina-transition-timing-function-productive-ease-in ); } .carina-transition--productive-ease-out { transition-timing-function: var( --carina-transition-timing-function-productive-ease-out ); } .carina-transition--expressive-ease-in-out { transition-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); } .carina-transition--expressive-ease-in { transition-timing-function: var( --carina-transition-timing-function-expressive-ease-in ); } .carina-transition--expressive-ease-out { transition-timing-function: var( --carina-transition-timing-function-expressive-ease-out ); } .carina-transition--appear-50, .carina-transition--enter-50, .carina-transition--exit-50 { transition-duration: var(--carina-transition-duration-50); } .carina-transition--appear-100, .carina-transition--enter-100, .carina-transition--exit-100 { transition-duration: var(--carina-transition-duration-100); } .carina-transition--appear-200, .carina-transition--enter-200, .carina-transition--exit-200 { transition-duration: var(--carina-transition-duration-200); } .carina-transition--appear-300, .carina-transition--enter-300, .carina-transition--exit-300 { transition-duration: var(--carina-transition-duration-300); } .carina-transition--appear-400, .carina-transition--enter-400, .carina-transition--exit-400 { transition-duration: var(--carina-transition-duration-400); } .carina-transition--appear-550, .carina-transition--enter-550, .carina-transition--exit-550 { transition-duration: var(--carina-transition-duration-550); } .carina-transition--appear-700, .carina-transition--enter-700, .carina-transition--exit-700 { transition-duration: var(--carina-transition-duration-700); } .carina-transition--appear-800, .carina-transition--enter-800, .carina-transition--exit-800 { transition-duration: var(--carina-transition-duration-800); } .carina-transition--appear-1200, .carina-transition--enter-1200, .carina-transition--exit-1200 { transition-duration: var(--carina-transition-duration-1200); } .carina-transition { --carina-transition-opacity: 1; --carina-transition-scale: 1; --carina-transition-scale-x: var(--carina-transition-scale); --carina-transition-scale-y: var(--carina-transition-scale); --carina-transition-translate-x: 0; --carina-transition-translate-y: 0; --carina-transition-rotate: 0; --carina-transition-skew-x: 0; --carina-transition-skew-y: 0; transform: translate( var(--carina-transition-translate-x), var(--carina-transition-translate-y) ) rotate(var(--carina-transition-rotate)) skewX(var(--carina-transition-skew-x)) skewY(var(--carina-transition-skew-y)) scaleX(var(--carina-transition-scale-x)) scaleY(var(--carina-transition-scale-y)); opacity: var(--carina-transition-opacity); } .carina-transition--fade-in { --carina-transition-opacity: 1; } .carina-transition--fade-out { --carina-transition-opacity: 0; } .carina-accordion > * { border-top: var(--carina-border-width-1) solid var(--carina-border-color-soft); border-bottom: var(--carina-border-width-0); } .carina-accordion > *:last-of-type { border-bottom: var(--carina-border-width-1) solid var(--carina-border-color-soft); } .carina-accordion--inside-only > * { border-top: var(--carina-border-width-1) solid var(--carina-border-color-soft); border-bottom: var(--carina-border-width-0); } .carina-accordion--inside-only > *:first-of-type { border-top: var(--carina-border-width-0); } .carina-accordion-header { display: flex; align-items: baseline; padding-top: var(--carina-spacing-2); padding-bottom: var(--carina-spacing-2); cursor: pointer; opacity: var(--carina-opacity-100); padding-inline-end: var(--carina-spacing-4); padding-inline-start: var(--carina-spacing-2); } .carina-accordion-header:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); box-shadow: inset var(--carina-ring-base); } .carina-accordion-header:hover { background-color: var(--carina-background-color-surface-hover); } .carina-accordion-header__header { display: flex; flex: 1 0 0; overflow: hidden; color: var(--carina-text-color-heading, var(--carina-text-color-base)); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-sm); font-family: var(--carina-font-family-primary); line-height: var(--carina-line-height-normal); white-space: nowrap; } .carina-accordion-header__header--open { overflow: auto; white-space: normal; text-overflow: clip; } .carina-accordion-header__header--chevron-start { margin-inline-start: var(--carina-spacing-2); } .carina-accordion-header--disabled { cursor: not-allowed; opacity: var(--carina-opacity-40); } .carina-accordion-header--padding-mode-roomy { padding-top: var(--carina-spacing-4); padding-bottom: var(--carina-spacing-4); } .carina-accordion-header__chevron { display: flex; flex: initial; align-items: flex-start; align-self: flex-start; color: var(--carina-text-color-soft); } .carina-accordion-header__chevron svg { transition-delay: var(--carina-transition-duration-100); transition-timing-function: var( --carina-transition-timing-function-expressive-ease-in ); transition-duration: var(--carina-transition-duration-200); transition-property: transform; } .carina-accordion-header__chevron--open--chevron-placement-end > svg { transform: rotate(-180deg); transition-delay: 0ms; } .carina-accordion-header__chevron--not-open--chevron-placement-start > svg { transform: rotate(-90deg); transition-delay: 0ms; } [dir='rtl'] .carina-accordion-header__chevron--not-open--chevron-placement-start > svg { transform: rotate(90deg); transition-delay: 0ms; } .carina-accordion-header__chevron--reduce-motion > svg { transition-property: none; } .carina-accordion-icon { flex: initial; overflow: hidden; color: var(--carina-text-color-soft); } .carina-accordion-section { padding-right: var(--carina-spacing-2); padding-bottom: var(--carina-spacing-2); padding-left: var(--carina-spacing-2); overflow: hidden; color: var(--carina-text-color-body, var(--carina-text-color-base)); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-sm); font-family: var(--carina-font-family-primary); visibility: hidden; } .carina-accordion-section--open, .carina-accordion-section__collapse.carina-transition--exit-active .carina-accordion-section, .carina-accordion-section__collapse.carina-transition--exit-start .carina-accordion-section { visibility: visible; } .carina-accordion-section__collapse { transition-duration: var(--carina-transition-duration-100); } .carina-accordion-section__collapse.carina-transition--exit-done { max-height: 0; overflow: hidden; } .carina-detailed-accordion-header { display: flex; flex: 1 0 0; align-items: flex-start; overflow: hidden; font-family: var(--carina-font-family-primary); line-height: var(--carina-line-height-normal); text-overflow: ellipsis; } .carina-detailed-accordion-header--open { overflow: auto; white-space: normal; text-overflow: clip; } .carina-detailed-accordion-header__label-and-description { display: flex; flex-basis: 0%; flex-direction: column; flex-grow: 1; flex-shrink: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-inline-end: var(--carina-spacing-2); padding-inline-start: var(--carina-spacing-0); } .carina-detailed-accordion-header__label-and-description--icon-at-start { margin-inline-start: var(--carina-spacing-2); margin-inline-end: var(--carina-spacing-0); } .carina-detailed-accordion-header__label-and-description--open { overflow: auto; white-space: normal; text-overflow: clip; } .carina-detailed-accordion-header__label-text { overflow: hidden; color: var(--carina-text-color-heading, var(--carina-text-color-base)); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-sm); white-space: nowrap; text-overflow: ellipsis; } .carina-detailed-accordion-header__description-text { overflow: hidden; color: var(--carina-text-color-soft); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-sm); white-space: nowrap; text-overflow: ellipsis; } .carina-detailed-accordion-header__description-text--open { overflow: auto; white-space: normal; text-overflow: clip; } .carina-button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; margin-right: 0; margin-left: 0; padding-top: 0; padding-right: var(--carina-spacing-1); padding-bottom: 0; padding-left: var(--carina-spacing-1); border: var(--carina-border-width-1) solid transparent; border-radius: var(--carina-border-radius-xl); text-decoration: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; font-family: inherit; line-height: inherit; cursor: pointer; transition-timing-function: var( --carina-transition-timing-function-expressive-ease-out ); transition-duration: var(--carina-transition-duration-100); transition-property: background-color, color, border-color, box-shadow; } .carina-button:focus-visible { outline: none; box-shadow: var(--carina-ring-base); } .carina-button:active:not(.carina-button--disabled) { transform: scale(var(--carina-scale-shrink)); } .carina-button--disabled { transform: none; cursor: default; opacity: var(--carina-opacity-40); } .carina-button--disabled .carina-button__icon-start, .carina-button--disabled .carina-button__icon-end { transform: none; } .carina-button--brand.carina-button--filled, .carina-button--primary.carina-button--filled { color: var(--carina-text-color-on-primary); background-color: var(--carina-background-color-primary); } .carina-button--brand.carina-button--filled:hover:not(.carina-button--disabled), .carina-button--primary.carina-button--filled:hover:not(.carina-button--disabled) { background-color: var(--carina-background-color-primary-hover); } .carina-button--brand.carina-button--filled:active:not(.carina-button--disabled), .carina-button--brand.carina-button--filled.carina-button--active:not(.carina-button--disabled), .carina-button--primary.carina-button--filled:active:not(.carina-button--disabled), .carina-button--primary.carina-button--filled.carina-button--active:not(.carina-button--disabled) { background-color: var(--carina-background-color-primary-active); } .carina-button--brand.carina-button--lined, .carina-button--primary.carina-button--lined { border-color: var(--carina-border-color-primary); border-width: var(--carina-border-width-1); color: var(--carina-text-color-primary); background-color: var(--carina-colors-transparent); } .carina-button--brand.carina-button--lined:hover:not(.carina-button--disabled), .carina-button--primary.carina-button--lined:hover:not(.carina-button--disabled) { color: var(--carina-text-color-on-primary); background-color: var(--carina-background-color-primary); } .carina-button--brand.carina-button--lined:active:not(.carina-button--disabled), .carina-button--brand.carina-button--lined.carina-button--active:not(.carina-button--disabled), .carina-button--primary.carina-button--lined:active:not(.carina-button--disabled), .carina-button--primary.carina-button--lined.carina-button--active:not(.carina-button--disabled) { border-color: var(--carina-background-color-primary-hover); color: var(--carina-text-color-on-primary); background-color: var(--carina-background-color-primary-hover); } .carina-button--brand.carina-button--ghost, .carina-button--primary.carina-button--ghost { color: var(--carina-text-color-primary); background-color: var(--carina-colors-transparent); } .carina-button--brand.carina-button--ghost:hover:not(.carina-button--disabled), .carina-button--primary.carina-button--ghost:hover:not(.carina-button--disabled) { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-hover); } .carina-button--brand.carina-button--ghost:active:not(.carina-button--disabled), .carina-button--brand.carina-button--ghost.carina-button--active:not(.carina-button--disabled), .carina-button--primary.carina-button--ghost:active:not(.carina-button--disabled), .carina-button--primary.carina-button--ghost.carina-button--active:not(.carina-button--disabled) { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-active); outline: none; } .carina-button--secondary.carina-button--filled { color: var(--carina-text-color-on-secondary); background-color: var(--carina-background-color-secondary); } .carina-button--secondary.carina-button--filled:hover:not(.carina-button--disabled) { background-color: var(--carina-background-color-secondary-hover); } .carina-button--secondary.carina-button--filled:active:not(.carina-button--disabled), .carina-button--secondary.carina-button--filled.carina-button--active:not(.carina-button--disabled) { background-color: var(--carina-background-color-secondary-active); } .carina-button--secondary.carina-button--lined { border-color: var(--carina-border-color-secondary); border-width: var(--carina-border-width-1); color: var(--carina-text-color-secondary); background-color: var(--carina-colors-transparent); } .carina-button--secondary.carina-button--lined:hover:not(.carina-button--disabled) { color: var(--carina-text-color-on-secondary); background-color: var(--carina-background-color-secondary); } .carina-button--secondary.carina-button--lined:active:not(.carina-button--disabled), .carina-button--secondary.carina-button--lined.carina-button--active:not(.carina-button--disabled) { border-color: var(--carina-background-color-secondary-hover); color: var(--carina-text-color-on-secondary); background-color: var(--carina-background-color-secondary-hover); } .carina-button--secondary.carina-button--ghost { color: var(--carina-text-color-secondary); background-color: var(--carina-colors-transparent); } .carina-button--secondary.carina-button--ghost:hover:not(.carina-button--disabled) { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-hover); } .carina-button--secondary.carina-button--ghost:active:not(.carina-button--disabled), .carina-button--secondary.carina-button--ghost.carina-button--active:not(.carina-button--disabled) { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-active); outline: none; } .carina-button--tertiary.carina-button--filled { color: var(--carina-text-color-on-tertiary); background-color: var(--carina-background-color-tertiary); } .carina-button--tertiary.carina-button--filled:hover:not(.carina-button--disabled) { background-color: var(--carina-background-color-tertiary-hover); } .carina-button--tertiary.carina-button--filled:active:not(.carina-button--disabled), .carina-button--tertiary.carina-button--filled.carina-button--active:not(.carina-button--disabled) { background-color: var(--carina-background-color-tertiary-active); } .carina-button--tertiary.carina-button--lined { border-color: var(--carina-border-color-tertiary); border-width: var(--carina-border-width-1); color: var(--carina-text-color-tertiary); background-color: var(--carina-colors-transparent); } .carina-button--tertiary.carina-button--lined:hover:not(.carina-button--disabled) { color: var(--carina-text-color-on-tertiary); background-color: var(--carina-background-color-tertiary); } .carina-button--tertiary.carina-button--lined:active:not(.carina-button--disabled), .carina-button--tertiary.carina-button--lined.carina-button--active:not(.carina-button--disabled) { border-color: var(--carina-background-color-tertiary-hover); color: var(--carina-text-color-on-tertiary); background-color: var(--carina-background-color-tertiary-hover); } .carina-button--tertiary.carina-button--ghost { color: var(--carina-text-color-tertiary); background-color: var(--carina-colors-transparent); } .carina-button--tertiary.carina-button--ghost:hover:not(.carina-button--disabled) { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-hover); } .carina-button--tertiary.carina-button--ghost:active:not(.carina-button--disabled), .carina-button--tertiary.carina-button--ghost.carina-button--active:not(.carina-button--disabled) { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-active); outline: none; } .carina-button--neutral-inverse:focus-visible { outline: var(--carina-border-color-soft) var(--carina-border-width-1); box-shadow: var(--carina-ring-white); } .carina-button--neutral-inverse.carina-button--filled:not(.carina-button--elevated) { color: var(--carina-text-color-base); background-color: var(--carina-background-color-neutral-inverse); } .carina-button--neutral-inverse.carina-button--filled:not(.carina-button--elevated):hover:not(.carina-button--disabled) { background-color: var(--carina-background-color-neutral-inverse-hover); } .carina-button--neutral-inverse.carina-button--filled:not(.carina-button--elevated):active:not(.carina-button--disabled), .carina-button--neutral-inverse.carina-button--filled:not(.carina-button--elevated).carina-button--active:not(.carina-button--disabled) { background-color: var(--carina-background-color-neutral-inverse-active); } .carina-button--neutral-inverse.carina-button--lined:not(.carina-button--elevated) { border-color: var(--carina-border-color-inverse); border-width: var(--carina-border-width-1); color: var(--carina-text-color-base-inverse); background-color: var(--carina-colors-transparent); } .carina-button--neutral-inverse.carina-button--lined:not(.carina-button--elevated):hover:not(.carina-button--disabled) { background-color: var(--carina-background-color-neutral-hover); } .carina-button--neutral-inverse.carina-button--lined:not(.carina-button--elevated):active:not(.carina-button--disabled), .carina-button--neutral-inverse.carina-button--lined:not(.carina-button--elevated).carina-button--active:not(.carina-button--disabled) { background-color: var(--carina-background-color-neutral-active); } .carina-button--neutral-inverse.carina-button--ghost { color: var(--carina-text-color-base-inverse); background-color: var(--carina-colors-transparent); } .carina-button--neutral-inverse.carina-button--ghost:hover:not(.carina-button--disabled) { background-color: var(--carina-background-color-neutral-hover); } .carina-button--neutral-inverse.carina-button--ghost:active:not(.carina-button--disabled), .carina-button--neutral-inverse.carina-button--ghost.carina-button--active:not(.carina-button--disabled) { background-color: var(--carina-background-color-neutral-active); } .carina-button--neutral:focus-visible { outline: var(--carina-border-color-hard) var(--carina-border-width-1); box-shadow: var(--carina-ring-black); } .carina-button--neutral.carina-button--filled:not(.carina-button--elevated), .carina-button--neutral.carina-button--lined:not(.carina-button--elevated) { border-color: var(--carina-border-color-hard); border-width: var(--carina-border-width-1); color: var(--carina-text-color-base); background-color: var(--carina-colors-transparent); } .carina-button--neutral.carina-button--filled:not(.carina-button--elevated):hover:not(.carina-button--disabled), .carina-button--neutral.carina-button--lined:not(.carina-button--elevated):hover:not(.carina-button--disabled) { background-color: var(--carina-background-color-neutral-hover); } .carina-button--neutral.carina-button--filled:not(.carina-button--elevated):active:not(.carina-button--disabled), .carina-button--neutral.carina-button--filled:not(.carina-button--elevated).carina-button--active:not(.carina-button--disabled), .carina-button--neutral.carina-button--lined:not(.carina-button--elevated):active:not(.carina-button--disabled), .carina-button--neutral.carina-button--lined:not(.carina-button--elevated).carina-button--active:not(.carina-button--disabled) { background-color: var(--carina-background-color-neutral-active); } .carina-button--neutral.carina-button--ghost { color: var(--carina-text-color-base); background-color: var(--carina-colors-transparent); } .carina-button--neutral.carina-button--ghost:hover:not(.carina-button--disabled) { background-color: var(--carina-background-color-surface-hover); } .carina-button--neutral.carina-button--ghost:active:not(.carina-button--disabled) { background-color: var(--carina-background-color-surface-selected); } .carina-button--neutral.carina-button--ghost.carina-button--active:not(.carina-button--disabled) { color: var(--carina-text-color-on-neutral); background-color: var(--carina-background-color-neutral); } .carina-button--menu { border-radius: var(--carina-border-radius-full); color: var(--carina-text-color-soft); background-color: var(--carina-colors-transparent); } .carina-button--menu:hover:not(.carina-button--disabled) { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-hover); } .carina-button--menu:active:not(.carina-button--disabled), .carina-button--menu.carina-button--active:not(.carina-button--disabled) { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-active); } .carina-button--danger:focus-visible { box-shadow: var(--carina-ring-danger); } .carina-button--danger.carina-button--filled:not(.carina-button--elevated) { border-color: var(--carina-border-color-danger); color: var(--carina-text-color-on-danger); background-color: var(--carina-background-color-danger); } .carina-button--danger.carina-button--filled:not(.carina-button--elevated):hover:not(.carina-button--disabled) { border-color: var(--carina-background-color-danger-hover); background-color: var(--carina-background-color-danger-hover); } .carina-button--danger.carina-button--filled:not(.carina-button--elevated):active:not(.carina-button--disabled), .carina-button--danger.carina-button--filled:not(.carina-button--elevated).carina-button--active:not(.carina-button--disabled) { border-color: var(--carina-background-color-danger-active); background-color: var(--carina-background-color-danger-active); } .carina-button--danger.carina-button--filled.carina-button--disabled { border-color: transparent; color: var(--carina-text-color-on-danger); background-color: var(--carina-background-color-neutral); } .carina-button--danger.carina-button--lined:not(.carina-button--elevated) { border-color: var(--carina-border-color-danger); border-width: var(--carina-border-width-1); color: var(--carina-text-color-danger); background-color: var(--carina-colors-transparent); } .carina-button--danger.carina-button--lined:not(.carina-button--elevated):hover:not(.carina-button--disabled) { color: var(--carina-text-color-on-danger); background-color: var(--carina-background-color-danger); } .carina-button--danger.carina-button--lined:not(.carina-button--elevated):active:not(.carina-button--disabled), .carina-button--danger.carina-button--lined:not(.carina-button--elevated).carina-button--active:not(.carina-button--disabled) { border-color: var(--carina-background-color-danger-hover); color: var(--carina-text-color-on-danger); background-color: var(--carina-background-color-danger-hover); } .carina-button--danger.carina-button--lined.carina-button--disabled { border-color: var(--carina-border-color-base); color: var(--carina-text-color-base); background-color: var(--carina-colors-transparent); } .carina-button--danger.carina-button--ghost { color: var(--carina-text-color-danger); background-color: var(--carina-colors-transparent); outline: none; } .carina-button--danger.carina-button--ghost:hover:not(.carina-button--disabled) { color: var(--carina-text-color-on-danger-pale); background-color: var(--carina-background-color-danger-pale); } .carina-button--danger.carina-button--ghost:active:not(.carina-button--disabled), .carina-button--danger.carina-button--ghost.carina-button--active:not(.carina-button--disabled) { color: var(--carina-text-color-on-danger-pale); background-color: var(--carina-background-color-danger-pale-hover); } .carina-button--danger.carina-button--ghost.carina-button--disabled { color: var(--carina-text-color-base); background-color: var(--carina-colors-transparent); } .carina-button--sm { min-width: 80px; min-height: 36px; padding-right: var(--carina-spacing-4); padding-left: var(--carina-spacing-4); font-size: var(--carina-font-size-body-sm); } .carina-button--md { min-width: 96px; min-height: 40px; padding-right: var(--carina-spacing-6); padding-left: var(--carina-spacing-6); font-size: var(--carina-font-size-body-md); } .carina-button--lg { min-width: 112px; min-height: 44px; padding-right: var(--carina-spacing-6); padding-left: var(--carina-spacing-6); font-size: var(--carina-font-size-body-md); } .carina-button--pill { border-radius: var(--carina-border-radius-full); } .carina-button--block { width: 100%; } .carina-button.carina-button--elevated { color: var(--carina-text-color-on-primary); background-color: var(--carina-background-color-primary); } .carina-button.carina-button--elevated:hover:not(.carina-button--disabled) { background-color: var(--carina-background-color-primary-hover); box-shadow: var(--carina-box-shadow-2xl); transform: scale(var(--carina-scale-grow)); } .carina-button.carina-button--elevated:active:not(.carina-button--disabled), .carina-button.carina-button--elevated.carina-button--active:not(.carina-button--disabled) { background-color: var(--carina-background-color-primary-active); transform: none; } .carina-button--icon-only, .carina-button--icons-only { min-width: 0; margin: 0; padding: var(--carina-spacing-1); } .carina-button--icons-only { justify-content: space-evenly; } .carina-button--icon-only.carina-button--sm { width: var(--carina-spacing-9); height: var(--carina-spacing-9); } .carina-button--icon-only.carina-button--md { width: var(--carina-spacing-10); height: var(--carina-spacing-10); } .carina-button--icon-only.carina-button--lg { width: var(--carina-spacing-11); height: var(--carina-spacing-11); } .carina-button--icons-only.carina-button--sm { width: var(--carina-spacing-15); height: var(--carina-spacing-9); } .carina-button--icons-only.carina-button--md { width: var(--carina-spacing-16); height: var(--carina-spacing-10); } .carina-button--icons-only.carina-button--lg { width: var(--carina-spacing-17); height: var(--carina-spacing-11); } .carina-button--icons-only.carina-button--fab { width: var(--carina-spacing-20); height: var(--carina-spacing-16); } .carina-button--icon-only.carina-button--fab, .carina-button--icons-only.carina-button--fab { padding: var(--carina-spacing-3); border-radius: var(--carina-border-radius-full); color: var(--carina-text-color-on-primary); background-color: var(--carina-background-color-primary); box-shadow: var(--carina-box-shadow-2xl); } .carina-button--icon-only.carina-button--fab:hover:not(.carina-button--disabled), .carina-button--icons-only.carina-button--fab:hover:not(.carina-button--disabled) { background-color: var(--carina-background-color-primary-hover); } .carina-button--icon-only.carina-button--fab:active:not(.carina-button--disabled), .carina-button--icons-only.carina-button--fab:active:not(.carina-button--disabled) { background-color: var(--carina-background-color-primary-active); } .carina-button--icon-only.carina-button--fab:focus-visible:not(.carina-button--disabled), .carina-button--icons-only.carina-button--fab:focus-visible:not(.carina-button--disabled) { outline: var(--carina-border-color-primary-focus) auto var(--carina-border-width-2); } .carina-button--icon-only.carina-button--fab svg, .carina-button--icons-only.carina-button--fab svg { width: var(--carina-spacing-7); height: var(--carina-spacing-7); } .carina-button__icon-start, .carina-button__icon-end { display: flex; align-items: center; margin: 0; padding-inline-end: 0; padding-inline-start: 0; } .carina-button__icon-start { margin-inline-end: var(--carina-spacing-2); margin-inline-start: 0; } .carina-button__icon-end { margin-inline-end: 0; margin-inline-start: var(--carina-spacing-2); } .carina-button--icon-only .carina-button__icon-start, .carina-button--icons-only .carina-button__icon-start, .carina-button--icon-only .carina-button__icon-end, .carina-button--icons-only .carina-button__icon-end { margin: 0; margin-inline: 0; } .carina-alerts { display: flex; flex-direction: column; justify-content: flex-start; } .carina-alerts--fixed { position: fixed; top: var(--carina-spacing-6); right: var(--carina-spacing-6); left: var(--carina-spacing-6); z-index: var(--carina-z-index-alert); align-items: center; width: calc(100% - var(--carina-spacing-12)); pointer-events: none; } .carina-alerts__container { display: flex; justify-content: center; box-sizing: border-box; width: 100%; } .carina-alerts__collapse { width: 100%; transition-timing-function: var( --carina-transition-timing-function-productive-ease-out ); } .carina-alerts__collapse-container { padding-bottom: var(--carina-spacing-3); } .carina-alerts__collapse-container--last { padding-bottom: var(--carina-spacing-0); } .carina-alerts--page .carina-alerts__collapse { transition-duration: var(--carina-transition-duration-200); } .carina-alerts--user .carina-alerts__collapse { transition-duration: var(--carina-transition-duration-400); } .carina-alerts__collapse.carina-transition--out { --carina-transition-opacity: var(--carina-opacity-0); } .carina-alerts__collapse.carina-transition--appear-active { height: auto; overflow: visible; } .carina-app-alert { display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 100%; min-height: 50px; padding-right: var(--carina-spacing-3); padding-left: var(--carina-spacing-3); border-style: solid; border-width: var(--carina-border-width-1); line-height: var(--carina-line-height-tight); box-shadow: none; pointer-events: auto; } .carina-app-alert--info { color: var(--carina-text-color-on-info); border-color: var(--carina-background-color-info); background-color: var(--carina-background-color-info); } .carina-app-alert--warning { color: var(--carina-text-color-on-warning); border-color: var(--carina-background-color-warning); background-color: var(--carina-background-color-warning); } .carina-app-alert--danger { color: var(--carina-text-color-on-danger); border-color: var(--carina-background-color-danger); background-color: var(--carina-background-color-danger); } .carina-app-alert--success { color: var(--carina-text-color-on-success); border-color: var(--carina-background-color-success); background-color: var(--carina-background-color-success); } .carina-app-alert__action-container { display: flex; flex-grow: 2; align-items: center; justify-content: center; } .carina-app-alert__action-container .carina-app-alert__action { margin-top: var(--carina-spacing-2); margin-bottom: var(--carina-spacing-2); font-weight: var(--carina-font-weight-body); background-color: transparent; } .carina-app-alert__action-container .carina-app-alert__action a { border-color: transparent; border-style: solid; border-width: var(--carina-border-width-4); text-decoration: underline; background-color: transparent; transition-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow; } .carina-app-alert__action-container .carina-app-alert__action a:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); box-shadow: var(--carina-ring-black); } .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--info a { color: var(--carina-text-color-on-info); } .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--success a { color: var(--carina-text-color-on-success); } .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--danger a { color: var(--carina-text-color-on-danger); } .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--warning a { color: var(--carina-text-color-on-warning); } .carina-app-alert__action--dismissible { margin-inline-end: 0; } .carina-app-alert__content-container { display: flex; flex-wrap: nowrap; } .carina-app-alert__content { margin-top: var(--carina-spacing-4); margin-inline-start: var(--carina-spacing-3); margin-bottom: var(--carina-spacing-4); margin-inline-end: var(--carina-spacing-4); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-sm); font-family: var(--carina-font-family-primary); font-style: normal; letter-spacing: normal; text-transform: none; text-indent: 0; text-shadow: none; } .carina-app-alert .carina-app-alert__dismiss-container { display: flex; align-items: center; align-self: flex-start; height: 36px; margin: auto; cursor: pointer; } [dir='rtl'] .carina-app-alert .carina-app-alert__dismiss-container { margin-right: var(--carina-spacing-4); margin-left: 0; } .carina-app-alert .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button span { justify-content: center; width: 100%; height: 100%; border-radius: var(--carina-border-radius-full); } .carina-app-alert .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button { width: 36px; height: 36px; min-height: 0; margin: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; border-color: transparent; border-style: solid; border-width: var(--carina-border-width-2); border-radius: var(--carina-border-radius-full); background-color: transparent; transition-timing-function: var(--carina-transition-duration-100); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow; } .carina-app-alert .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button:focus-visible { box-shadow: var(--carina-ring-black); } .carina-app-alert .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--info { color: var(--carina-text-color-on-info); } .carina-app-alert .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--info:hover { background-color: var(--carina-background-color-info-hover); } .carina-app-alert .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--info:active { background-color: var(--carina-background-color-info-active); } .carina-app-alert .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--danger { color: var(--carina-text-color-on-info); } .carina-app-alert .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--danger:hover { background-color: var(--carina-background-color-danger-hover); } .carina-app-alert .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--danger:active { background-color: var(--carina-background-color-danger-active); } .carina-app-alert .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--success { color: var(--carina-text-color-on-info); } .carina-app-alert .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--success:hover { background-color: var(--carina-background-color-success-hover); } .carina-app-alert .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--success:active { background-color: var(--carina-background-color-success-active); } .carina-app-alert .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--warning { color: var(--carina-text-color-on-info); } .carina-app-alert .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--warning:hover { background-color: var(--carina-background-color-warning-hover); } .carina-app-alert .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--warning:active { background-color: var(--carina-background-color-warning-active); } .carina-app-alert__icon { align-self: flex-start; height: 24px; margin-top: var(--carina-spacing-3); margin-bottom: var(--carina-spacing-3); background-color: transparent; } .carina-app-alert__icon--info { color: var(--carina-text-color-on-info); } .carina-app-alert__icon--warning { color: var(--carina-text-color-on-warning); } .carina-app-alert__icon--danger { color: var(--carina-text-color-on-danger); } .carina-app-alert__icon--success { color: var(--carina-text-color-on-success); } .carina-page-alert { display: flex; align-items: center; box-sizing: border-box; width: 100%; min-height: 50px; padding-right: var(--carina-spacing-3); border-style: solid; border-width: var(--carina-border-width-1); border-radius: 10px; line-height: var(--carina-line-height-tight); box-shadow: none; pointer-events: auto; } [dir='rtl'] .carina-page-alert { padding-left: var(--carina-spacing-4); } .carina-page-alert--info { border-color: var(--carina-border-color-info); color: var(--carina-text-color-on-info-pale); background-color: var(--carina-background-color-info-pale); } .carina-page-alert--warning { border-color: var(--carina-border-color-warning); color: var(--carina-text-color-on-warning-pale); background-color: var(--carina-background-color-warning-pale); } .carina-page-alert--danger { border-color: var(--carina-border-color-danger); color: var(--carina-text-color-on-danger-pale); background-color: var(--carina-background-color-danger-pale); } .carina-page-alert--success { border-color: var(--carina-border-color-success); color: var(--carina-text-color-on-success-pale); background-color: var(--carina-background-color-success-pale); } .carina-page-alert__title { margin-bottom: var(--carina-spacing-2); font-weight: var(--carina-font-weight-display); } .carina-page-alert__action-container { display: flex; align-items: flex-start; width: 100%; } .carina-page-alert__action-container--bottom { flex-wrap: wrap; } .carina-page-alert__action { margin-top: var(--carina-spacing-4); margin-inline-end: var(--carina-spacing-4); margin-bottom: var(--carina-spacing-4); margin-inline-start: auto; font-weight: var(--carina-font-weight-display); font-size: var(--carina-font-size-body-sm); } .carina-page-alert__action a { padding: var(--carina-spacing-0-5); text-decoration: underline; } .carina-page-alert__action a:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); box-shadow: var(--carina-ring-black); } .carina-page-alert__action--bottom { flex: 0 0 100%; margin-top: 0; margin-bottom: var(--carina-spacing-4); } .carina-page-alert__action.carina-page-alert__action--info a { color: var(--carina-text-color-on-info-pale); } .carina-page-alert__action.carina-page-alert__action--info a:hover { color: var(--carina-text-color-on-info-pale); } .carina-page-alert__action.carina-page-alert__action--info a:active { color: var(--carina-text-color-on-info-pale); } .carina-page-alert__action.carina-page-alert__action--success a { color: var(--carina-text-color-on-success-pale); } .carina-page-alert__action.carina-page-alert__action--success a:hover { color: var(--carina-text-color-on-success-pale); } .carina-page-alert__action.carina-page-alert__action--success a:active { color: var(--carina-text-color-on-success-pale); } .carina-page-alert__action.carina-page-alert__action--danger a { color: var(--carina-text-color-on-danger-pale); } .carina-page-alert__action.carina-page-alert__action--danger a:hover { color: var(--carina-text-color-on-danger-pale); } .carina-page-alert__action.carina-page-alert__action--danger a:active { color: var(--carina-text-color-on-danger-pale); } .carina-page-alert__action.carina-page-alert__action--warning a { color: var(--carina-text-color-on-warning-pale); } .carina-page-alert__action.carina-page-alert__action--warning a:hover { color: var(--carina-text-color-on-warning-pale); } .carina-page-alert__action.carina-page-alert__action--warning a:active { color: var(--carina-text-color-on-warning-pale); } .carina-page-alert__action--dismissible { margin-inline-end: 0; } .carina-page-alert__action--dismissible a, .carina-page-alert__action--dismissible button { border-color: transparent; } .carina-page-alert__content-container { margin-top: var(--carina-spacing-4); margin-inline-end: var(--carina-spacing-6); margin-bottom: var(--carina-spacing-4); margin-inline-start: 0; font-size: var(--carina-font-size-body-sm); font-family: var(--carina-font-family-primary); font-style: normal; letter-spacing: normal; text-transform: none; text-indent: 0; text-shadow: none; } .carina-page-alert__content-container--bottom { margin-bottom: var(--carina-spacing-3); } .carina-page-alert .carina-page-alert__dismiss-container { align-self: flex-start; height: 36px; margin-top: var(--carina-spacing-1-5); margin-right: 0; margin-left: var(--carina-spacing-0-5); cursor: pointer; } [dir='rtl'] .carina-page-alert .carina-page-alert__dismiss-container { margin-right: var(--carina-spacing-2); margin-left: 0; } .carina-page-alert .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: var(--carina-border-radius-full); transition-timing-function: var(--carina-transition-duration-100); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow; } .carina-page-alert .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button span { justify-content: center; width: 100%; height: 100%; border-radius: var(--carina-border-radius-full); } .carina-page-alert .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button:focus-visible { box-shadow: var(--carina-ring-black); } .carina-page-alert .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--info { color: var(--carina-text-color-on-info-pale); } .carina-page-alert .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--info:hover { color: var(--carina-text-color-on-info-pale); background-color: var(--carina-background-color-info-pale-hover); } .carina-page-alert .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--info:active { color: var(--carina-text-color-on-info-pale); background-color: var(--carina-background-color-info-pale-active); } .carina-page-alert .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--danger { color: var(--carina-text-color-on-danger-pale); } .carina-page-alert .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--danger:hover { color: var(--carina-text-color-on-danger-pale); background-color: var(--carina-background-color-danger-pale-hover); } .carina-page-alert .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--danger:active { color: var(--carina-text-color-on-danger-pale); background-color: var(--carina-background-color-danger-pale-active); } .carina-page-alert .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--success { color: var(--carina-text-color-on-success-pale); } .carina-page-alert .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--success:hover { color: var(--carina-text-color-on-success-pale); background-color: var(--carina-background-color-success-pale-hover); } .carina-page-alert .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--success:active { color: var(--carina-text-color-on-success-pale); background-color: var(--carina-background-color-success-pale-active); } .carina-page-alert .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--warning { color: var(--carina-text-color-on-warning-pale); } .carina-page-alert .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--warning:hover { color: var(--carina-text-color-on-warning-pale); background-color: var(--carina-background-color-warning-pale-hover); } .carina-page-alert .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--warning:active { color: var(--carina-text-color-on-warning-pale); background-color: var(--carina-background-color-warning-pale-active); } .carina-page-alert__icon { display: flex; align-items: center; align-self: flex-start; padding-top: var(--carina-spacing-3); padding-inline-start: var(--carina-spacing-4); padding-bottom: var(--carina-spacing-3); padding-inline-end: var(--carina-spacing-3); border-radius: 10px; } .carina-page-alert__icon--info { color: var(--carina-text-color-on-info-pale-soft); } .carina-page-alert__icon--warning { color: var(--carina-text-color-on-warning-pale-soft); } .carina-page-alert__icon--danger { color: var(--carina-text-color-on-danger-pale-soft); } .carina-page-alert__icon--success { color: var(--carina-text-color-on-success-pale-soft); } .carina-user-alert { display: flex; align-items: flex-start; justify-content: center; box-sizing: border-box; width: 100%; max-width: 560px; min-height: 50px; border-style: solid; border-width: var(--carina-border-width-1); border-radius: 10px; line-height: var(--carina-line-height-body-sm); box-shadow: var(--carina-box-shadow-lg); pointer-events: auto; } .carina-user-alert--info { border-color: var(--carina-border-color-info); color: var(--carina-text-color-on-info-pale); background-color: var(--carina-background-color-info-pale); } .carina-user-alert--warning { border-color: var(--carina-border-color-warning); color: var(--carina-text-color-on-warning-pale); background-color: var(--carina-background-color-warning-pale); } .carina-user-alert--danger { border-color: var(--carina-border-color-danger); color: var(--carina-text-color-on-danger-pale); background-color: var(--carina-background-color-danger-pale); } .carina-user-alert--success { border-color: var(--carina-border-color-success); color: var(--carina-text-color-on-success-pale); background-color: var(--carina-background-color-success-pale); } .carina-user-alert--fixed { position: fixed; top: 20px; left: 50%; z-index: var(--carina-z-index-alert); width: calc(100% - 40px); transform: translateX(-50%); } .carina-user-alert__title { margin-bottom: var(--carina-spacing-2); font-weight: var(--carina-font-weight-display); } .carina-user-alert__action-container { display: flex; align-items: flex-start; width: 100%; } .carina-user-alert__action { margin-top: var(--carina-spacing-5); margin-inline-end: var(--carina-spacing-5); margin-bottom: var(--carina-spacing-5); margin-inline-start: auto; font-weight: var(--carina-font-weight-display); font-size: var(--carina-font-size-body-sm); max-height: 20px; } .carina-user-alert__action a { padding: var(--carina-spacing-0-5); text-decoration: underline; } .carina-user-alert__action a:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); box-shadow: var(--carina-ring-black); } .carina-user-alert__action button { margin-top: calc(-1 * var(--carina-spacing-2)); margin-bottom: calc(-1 * var(--carina-spacing-2)); font-weight: var(--carina-font-weight-body); } .carina-user-alert__action.carina-user-alert__action--info a { color: var(--carina-text-color-on-info-pale); } .carina-user-alert__action.carina-user-alert__action--info a:hover { color: var(--carina-text-color-on-info-pale); } .carina-user-alert__action.carina-user-alert__action--info a:active { color: var(--carina-text-color-on-info-pale); } .carina-user-alert__action.carina-user-alert__action--success a { color: var(--carina-text-color-on-success-pale); } .carina-user-alert__action.carina-user-alert__action--success a:hover { color: var(--carina-text-color-on-success-pale); } .carina-user-alert__action.carina-user-alert__action--success a:active { color: var(--carina-text-color-on-success-pale); } .carina-user-alert__action.carina-user-alert__action--danger a { color: var(--carina-text-color-on-danger-pale); } .carina-user-alert__action.carina-user-alert__action--danger a:hover { color: var(--carina-text-color-on-danger-pale); } .carina-user-alert__action.carina-user-alert__action--danger a:active { color: var(--carina-text-color-on-danger-pale); } .carina-user-alert__action.carina-user-alert__action--warning a { color: var(--carina-text-color-on-warning-pale); } .carina-user-alert__action.carina-user-alert__action--warning a:hover { color: var(--carina-text-color-on-warning-pale); } .carina-user-alert__action.carina-user-alert__action--warning a:active { color: var(--carina-text-color-on-warning-pale); } .carina-user-alert__action--dismissible { margin-inline-end: 0; } .carina-user-alert__action--dismissible a, .carina-user-alert__action--dismissible button { border-color: transparent; border-style: solid; border-width: var(--carina-border-width-4); } .carina-user-alert__content-container { margin-top: var(--carina-spacing-5); margin-inline-end: var(--carina-spacing-2); margin-bottom: var(--carina-spacing-5); margin-inline-start: 0; font-size: var(--carina-font-size-body-sm); font-family: var(--carina-font-family-primary); font-style: normal; letter-spacing: normal; text-transform: none; text-indent: 0; text-shadow: none; } .carina-user-alert .carina-user-alert__dismiss-container { align-self: flex-start; height: 36px; margin-top: var(--carina-spacing-3); margin-bottom: var(--carina-spacing-3); margin-right: var(--carina-spacing-3); margin-left: var(--carina-spacing-2); cursor: pointer; } [dir='rtl'] .carina-user-alert .carina-user-alert__dismiss-container { margin-right: var(--carina-spacing-2); margin-left: 0; } .carina-user-alert .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-height: 0; margin: 0; padding: 0; border-radius: var(--carina-border-radius-full); cursor: pointer; transition-timing-function: var( --carina-transition-timing-function-expressive-ease-out ); transition-duration: var(--carina-transition-duration-100); transition-property: color, box-shadow; } .carina-user-alert .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button span { justify-content: center; width: 100%; height: 100%; border-radius: var(--carina-border-radius-full); } .carina-user-alert .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button:focus-visible { box-shadow: var(--carina-ring-black); } .carina-user-alert .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--info { color: var(--carina-text-color-on-info-pale); } .carina-user-alert .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--info:hover { color: var(--carina-text-color-on-info-pale); background-color: var(--carina-background-color-info-pale-hover); } .carina-user-alert .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--info:active { color: var(--carina-text-color-on-info-pale); background-color: var(--carina-background-color-info-pale-active); } .carina-user-alert .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--danger { color: var(--carina-text-color-on-danger-pale); } .carina-user-alert .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--danger:hover { color: var(--carina-text-color-on-danger-pale); background-color: var(--carina-background-color-danger-pale-hover); } .carina-user-alert .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--danger:active { color: var(--carina-text-color-on-danger-pale); background-color: var(--carina-background-color-danger-pale-active); } .carina-user-alert .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--success { color: var(--carina-text-color-on-success-pale); } .carina-user-alert .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--success:hover { color: var(--carina-text-color-on-success-pale); background-color: var(--carina-background-color-success-pale-hover); } .carina-user-alert .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--success:active { color: var(--carina-text-color-on-success-pale); background-color: var(--carina-background-color-success-pale-active); } .carina-user-alert .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--warning { color: var(--carina-text-color-on-warning-pale); } .carina-user-alert .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--warning:hover { color: var(--carina-text-color-on-warning-pale); background-color: var(--carina-background-color-warning-pale-hover); } .carina-user-alert .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--warning:active { color: var(--carina-text-color-on-warning-pale); background-color: var(--carina-background-color-warning-pale-active); } .carina-user-alert__icon { display: flex; align-items: flex-start; align-self: stretch; padding-top: calc(var(--carina-spacing-4) + var(--carina-spacing-0-5)); padding-inline-end: var(--carina-spacing-4); padding-bottom: calc(var(--carina-spacing-4) + var(--carina-spacing-0-5)); padding-inline-start: var(--carina-spacing-3); } .carina-user-alert__icon--info { color: var(--carina-text-color-on-info-pale-soft); } .carina-user-alert__icon--warning { color: var(--carina-text-color-on-warning-pale-soft); } .carina-user-alert__icon--danger { color: var(--carina-text-color-on-danger-pale-soft); } .carina-user-alert__icon--success { color: var(--carina-text-color-on-success-pale-soft); } .carina-avatar { --indicator-height: 25%; --indicator-offset: -3.125%; --indicator-vertical-offset: 12.5%; --indicator-horizontal-offset: 12.5%; position: relative; width: 100%; height: 100%; border-radius: var(--carina-border-radius-full); cursor: default; } .carina-avatar:focus-within { outline: none; box-shadow: var(--carina-ring-base); } .carina-avatar__main { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: 100%; background-color: var(--carina-avatar-bg); border-color: var(--carina-border-color-soft); border-style: none; color: var(--carina-avatar-fg); border-radius: var(--carina-border-radius-full); overflow: hidden; font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-md); font-family: var(--carina-font-family-primary); } .carina-avatar__main--background-0 { --carina-avatar-fg: var(--carina-text-color-base-inverse); --carina-avatar-bg: var(--carina-colors-accessory-1-50); } .carina-avatar__main--background-1 { --carina-avatar-fg: var(--carina-text-color-base); --carina-avatar-bg: var(--carina-colors-accessory-2-30); } .carina-avatar__main--background-2 { --carina-avatar-fg: var(--carina-text-color-base); --carina-avatar-bg: var(--carina-colors-accessory-3-30); } .carina-avatar__main--background-3 { --carina-avatar-fg: var(--carina-text-color-base-inverse); --carina-avatar-bg: var(--carina-colors-accessory-4-50); } .carina-avatar__main--background-4 { --carina-avatar-fg: var(--carina-text-color-base); --carina-avatar-bg: var(--carina-colors-accessory-0-40); } .carina-avatar__main--background-5 { --carina-avatar-fg: var(--carina-text-color-base-inverse); --carina-avatar-bg: var(--carina-colors-accessory-2-50); } .carina-avatar__main--background-6 { --carina-avatar-fg: var(--carina-text-color-base); --carina-avatar-bg: var(--carina-colors-accessory-1-20); } .carina-avatar__main--background-7 { --carina-avatar-fg: var(--carina-text-color-base); --carina-avatar-bg: var(--carina-colors-accessory-3-10); } .carina-avatar__main--background-8 { --carina-avatar-fg: var(--carina-text-color-base); --carina-avatar-bg: var(--carina-colors-accessory-4-30); } .carina-avatar__main--background-9 { --carina-avatar-fg: var(--carina-text-color-base); --carina-avatar-bg: var(--carina-colors-accessory-0-10); } .carina-avatar__main--border { border-style: solid; } .carina-avatar__main--square { border-radius: var(--carina-border-radius-2xl); } .carina-avatar__main--edit-scrim { cursor: pointer; } .carina-avatar__main--hover-scrim.carina-avatar__main--hover-shadow:hover { box-shadow: var(--carina-box-shadow-lg); } .carina-avatar__main--hover-scrim.carina-avatar__main--hover-shadow:hover div { opacity: var(--carina-opacity-50); } .carina-avatar__main--hover-scrim.carina-avatar__main--hover-shadow:hover span { opacity: var(--carina-opacity-100); } .carina-avatar__main--hover-scrim:hover { box-shadow: none; } .carina-avatar__main--hover-scrim:hover div { opacity: var(--carina-opacity-50); } .carina-avatar__main--hover-scrim:hover span { opacity: var(--carina-opacity-100); } .carina-avatar__main--hover-scrim div, .carina-avatar__main--hover-scrim span { opacity: var(--carina-opacity-0); } .carina-avatar__main--hover-shadow:hover { box-shadow: var(--carina-box-shadow-lg); } .carina-avatar__main--image { background-color: transparent; } .carina-avatar__main--interactive { cursor: pointer; } .carina-avatar__image { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; margin: 0; object-fit: cover; transform: translate(-50%, -50%); } .carina-avatar__loading-image { position: absolute; top: 50%; left: 50%; height: 100%; transform: translate(-50%, -50%); visibility: hidden; } .carina-avatar__action, .carina-avatar__action-icon { position: absolute; bottom: 0; inset-inline-start: 0; width: 100%; height: calc(100% * 42 / 128); } .carina-avatar__action { background-color: var(--carina-background-color-surface); opacity: var(--carina-opacity-50); } .carina-avatar__action-icon { display: flex; align-items: center; justify-content: center; opacity: var(--carina-opacity-100); fill: var(--carina-text-color-base); } .carina-avatar__action--border, .carina-avatar__action-icon--border { height: calc(100% * 48 / 128); } .carina-avatar__indicator { position: absolute; bottom: var(--indicator-offset); box-sizing: border-box; width: var(--indicator-height); height: var(--indicator-height); border-color: var(--carina-background-color-surface); border-style: solid; border-radius: var(--carina-border-radius-full); color: var(--carina-text-color-on-neutral); background-color: var(--carina-background-color-neutral); inset-inline-end: var(--indicator-offset); } .carina-avatar__indicator--accent { color: var(--carina-text-color-on-secondary); background-color: var(--carina-background-color-secondary); } .carina-avatar__indicator--brand, .carina-avatar__indicator--primary { color: var(--carina-text-color-on-primary); background-color: var(--carina-background-color-primary); } .carina-avatar__indicator--secondary { color: var(--carina-text-color-on-secondary); background-color: var(--carina-background-color-secondary); } .carina-avatar__indicator--danger { color: var(--carina-text-color-on-danger); background-color: var(--carina-background-color-danger); } .carina-avatar__indicator--interactive { color: var(--carina-text-color-on-primary); background-color: var(--carina-background-color-primary); } .carina-avatar__indicator--neutral { color: var(--carina-text-color-on-neutral); background-color: var(--carina-background-color-neutral); } .carina-avatar__indicator--success { color: var(--carina-text-color-on-success); background-color: var(--carina-background-color-success); } .carina-avatar__indicator--tertiary { color: var(--carina-text-color-on-tertiary); background-color: var(--carina-background-color-tertiary); } .carina-avatar__indicator--warning { color: var(--carina-text-color-on-warning); background-color: var(--carina-background-color-warning); } .carina-avatar__indicator--square { --indicator-offset: -6.25%; } .carina-avatar__indicator--top-end { top: var(--indicator-offset); inset-inline-end: var(--indicator-offset); } .carina-avatar__indicator--top-start { top: var(--indicator-offset); inset-inline-start: var(--indicator-offset); } .carina-avatar__indicator--bottom-end { bottom: var(--indicator-offset); inset-inline-end: var(--indicator-offset); } .carina-avatar__indicator--bottom-start { bottom: var(--indicator-offset); inset-inline-start: var(--indicator-offset); } .carina-avatar__indicator-top-end, .carina-avatar__indicator-top-start, .carina-avatar__indicator-bottom-end, .carina-avatar__indicator-bottom-start { position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .carina-avatar__indicator-top-end { top: var(--indicator-vertical-offset); inset-inline-end: var(--indicator-horizontal-offset); transform: translate(50%, -50%); } [dir='rtl'] .carina-avatar__indicator-top-end { transform: translate(-50%, -50%); } .carina-avatar__indicator-top-start { top: var(--indicator-vertical-offset); inset-inline-start: var(--indicator-horizontal-offset); transform: translate(-50%, -50%); } [dir='rtl'] .carina-avatar__indicator-top-start { transform: translate(50%, -50%); } .carina-avatar__indicator-bottom-end { bottom: var(--indicator-vertical-offset); inset-inline-end: var(--indicator-horizontal-offset); transform: translate(50%, 50%); } [dir='rtl'] .carina-avatar__indicator-bottom-end { transform: translate(-50%, 50%); } .carina-avatar__indicator-bottom-start { bottom: var(--indicator-vertical-offset); inset-inline-start: var(--indicator-horizontal-offset); transform: translate(-50%, 50%); } [dir='rtl'] .carina-avatar__indicator-bottom-start { transform: translate(50%, 50%); } .carina-avatar-group { position: relative; margin: var(--carina-spacing-0); padding: var(--carina-spacing-0); } .carina-avatar-group--grid { display: flex; flex-wrap: wrap; } .carina-avatar-group--stacked { display: flex; width: auto; } .carina-avatar-group__avatar-container { padding: var(--carina-spacing-0); } .carina-avatar-group__avatar-container--grid { margin: var(--carina-spacing-0-5); } .carina-avatar-group__front-avatar { position: absolute; bottom: 0; left: 0; } .carina-avatar-group__back-avatar { position: absolute; top: 0; right: 0; } .carina-badge { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: var(--carina-spacing-5); height: var(--carina-spacing-5); padding: 0 var(--carina-spacing-1-5); border-radius: var(--carina-border-radius-full); font-size: var(--carina-font-size-body-sm); font-family: var(--carina-font-family-primary); line-height: var(--carina-line-height-normal); } .carina-badge__indicator { display: inline-block; width: var(--carina-spacing-2-5); height: var(--carina-spacing-2-5); border-radius: var(--carina-border-radius-full); transform: translateY(-4px); } .carina-badge--danger { color: var(--carina-text-color-on-danger); background-color: var(--carina-background-color-danger); } .carina-badge--tertiary { color: var(--carina-text-color-on-tertiary); background-color: var(--carina-background-color-tertiary); } @keyframes carina-bounce { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(var(--carina-bounce-distance)); } } .carina-text-link { box-sizing: border-box; width: auto; margin: 0; padding: 0; border: none; border-radius: 0; overflow: visible; color: var(--carina-text-color-primary); font-weight: var(--carina-font-weight-body); font-size: inherit; font-family: var(--carina-font-family-primary); font-style: normal; line-height: var(--carina-line-height-normal); letter-spacing: normal; text-transform: none; text-decoration: underline; text-indent: 0; text-shadow: none; background: none; outline: 0; cursor: pointer; transition-timing-function: var( --carina-transition-timing-function-productive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: outline; appearance: none; } .carina-text-link svg { position: relative; top: -1px; display: inline-block; margin-inline-end: var(--carina-spacing-1); vertical-align: middle; } .carina-text-link:hover { color: var(--carina-text-color-primary-hover); } .carina-text-link:focus { outline-width: var(--carina-border-width-2); outline-style: solid; outline-color: var(--carina-border-color-primary-focus); } .carina-text-link:active { color: var(--carina-text-color-primary-active); } .carina-text-link--block { top: 0; display: inline-flex; } .carina-text-link--bold { font-weight: var(--carina-font-weight-display); } .carina-text-link--sm { font-size: var(--carina-font-size-body-2xs); } .carina-text-link--md { font-size: var(--carina-font-size-body-sm); } .carina-text-link--lg { font-size: var(--carina-font-size-body-md); } .carina-text-link--neutral { color: var(--carina-text-color-base); } .carina-text-link--neutral:hover { color: var(--carina-text-color-base); } .carina-text-link--neutral:active { color: var(--carina-text-color-base); } .carina-text-link--neutral:visited { color: var(--carina-text-color-primary-visited); } .carina-text-link--brand, .carina-text-link--interactive { color: var(--carina-text-color-primary); } .carina-text-link--brand:hover, .carina-text-link--interactive:hover { color: var(--carina-text-color-primary-hover); } .carina-text-link--brand:active, .carina-text-link--interactive:active { color: var(--carina-text-color-primary-active); } .carina-text-link--brand:visited, .carina-text-link--interactive:visited { color: var(--carina-text-color-primary-visited); } .carina-text-link--warning { color: var(--carina-text-color-warning); } .carina-text-link--warning:hover { color: var(--carina-text-color-warning-hover); } .carina-text-link--warning:active { color: var(--carina-text-color-warning-active); } .carina-text-link--warning:visited { color: var(--carina-text-color-warning-visited); } .carina-text-link--danger { color: var(--carina-text-color-danger); } .carina-text-link--danger:hover { color: var(--carina-text-color-danger-hover); } .carina-text-link--danger:active { color: var(--carina-text-color-danger-active); } .carina-text-link--danger:visited { color: var(--carina-text-color-danger-visited); } .carina-text-link--accent { color: var(--carina-text-color-secondary); } .carina-text-link--accent:hover { color: var(--carina-text-color-secondary-hover); } .carina-text-link--accent:active { color: var(--carina-text-color-secondary-active); } .carina-text-link--accent:visited { color: var(--carina-text-color-secondary-visited); } .carina-text-link--tertiary { color: var(--carina-text-color-tertiary); } .carina-text-link--tertiary:hover { color: var(--carina-text-color-tertiary-hover); } .carina-text-link--tertiary:active { color: var(--carina-text-color-tertiary-active); } .carina-text-link--tertiary:visited { color: var(--carina-text-color-tertiary-visited); } .carina-text-link--success { color: var(--carina-text-color-success); } .carina-text-link--success:hover { color: var(--carina-text-color-success-hover); } .carina-text-link--success:active { color: var(--carina-text-color-success-active); } .carina-text-link--success:visited { color: var(--carina-text-color-success-visited); } .carina-text-link--icon-sm svg { width: var(--carina-icon-xs); height: var(--carina-icon-xs); } .carina-text-link--icon-md svg { width: var(--carina-icon-md); height: var(--carina-icon-md); } .carina-text-link--icon-lg svg { width: var(--carina-icon-lg); height: var(--carina-icon-lg); } .carina-text-link.carina-text-link--icon-end { text-align: right; } .carina-text-link.carina-text-link--icon-end svg { margin-inline-end: 0; margin-inline-start: var(--carina-spacing-1); } .carina-text-link--disabled { color: var(--carina-text-color-disabled); text-decoration: none; cursor: not-allowed; } .carina-text-link--disabled[aria-disabled]:focus { outline-color: var(--carina-text-color-disabled); } .carina-text-link--disabled:hover, .carina-text-link--disabled:focus, .carina-text-link--disabled:active { color: var(--carina-text-color-disabled); text-decoration: none; cursor: not-allowed; } .carina-truncating-list { display: flex; } .carina-truncating-list__item--truncated { position: absolute; visibility: hidden; } .carina-breadcrumbs__breadcrumb { display: none; align-items: center; box-sizing: border-box; height: var(--carina-spacing-5); margin: var(--carina-spacing-0); padding: var(--carina-spacing-0); color: var(--carina-text-color-soft); font-family: var(--carina-font-family-primary); } .carina-breadcrumbs__breadcrumb--expanded { display: inline-flex; } .carina-breadcrumbs__breadcrumb--mobile { display: inline-flex; } .carina-breadcrumbs__breadcrumb--hidden-mobile { display: none; } .carina-breadcrumbs__breadcrumb-content { display: flex; box-sizing: border-box; max-width: 200px; margin: var(--carina-spacing-0-5); border: var(--carina-border-width-2) solid transparent; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: default; transition-timing-function: var( --carina-transition-timing-function-productive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: border-color, -webkit-text-decoration; transition-property: border-color, text-decoration; transition-property: border-color, text-decoration, -webkit-text-decoration; } .carina-breadcrumbs__breadcrumb-content:focus-within { border-color: var(--carina-border-color-primary-focus); text-decoration: underline; outline: none; } .carina-breadcrumbs__breadcrumb-content a:focus { outline: 0; } .carina-breadcrumbs__breadcrumb-content > * { vertical-align: baseline; } .carina-breadcrumbs__breadcrumb-icon { width: 16px; height: 16px; margin-top: 0; margin-right: var(--carina-spacing-0-5); margin-bottom: 0; margin-left: var(--carina-spacing-0-5); color: var(--carina-text-color-soft); } [dir='rtl'] .carina-breadcrumbs__breadcrumb-icon { transform: rotate(var(--carina-rotate-180)); } .carina-breadcrumbs__breadcrumb--current { color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-2xs); text-decoration: none; } .carina-breadcrumbs__breadcrumb--collapsed { margin: 0; transform: translateY(4px); } .carina-breadcrumbs__breadcrumb-content--collapsed { width: 16px; height: 16px; margin-top: 0; margin-right: var(--carina-spacing-0-5); margin-bottom: 0; margin-left: var(--carina-spacing-0-5); border: none; color: var(--carina-text-color-primary); cursor: pointer; } .carina-breadcrumbs__breadcrumb-content--collapsed:active { color: var(--carina-text-color-primary-active); } .carina-breadcrumbs__breadcrumb-content--collapsed:focus { border: var(--carina-border-width-2) solid var(--carina-border-color-primary-focus); color: var(--carina-text-color-primary); text-decoration: underline; outline: none; } .carina-breadcrumbs__breadcrumb-content--collapsed:hover { color: var(--carina-text-color-primary-hover); } .carina-breadcrumbs { text-wrap: nowrap; margin-top: var(--carina-spacing-1); margin-bottom: var(--carina-spacing-1); padding: 0; line-height: var(--carina-line-height-normal); font-size: var(--carina-font-size-body-2xs); list-style-type: none; background: transparent; } .carina-breadcrumbs--user_expanded { width: 100%; text-wrap: wrap; } .carina-popper { border-radius: var(--carina-border-radius-md); color: var(--carina-text-color-body, var(--carina-text-color-base)); background-color: var(--carina-background-color-popper); } .carina-popper__container { z-index: var(--carina-z-index-popper); } .carina-popper--shadow { box-shadow: var(--carina-box-shadow-lg); } .carina-popper__arrow::before { position: absolute; top: 0; left: 0; border: solid; border-color: var(--carina-background-color-popper) var(--carina-background-color-popper) transparent transparent; border-width: var(--carina-border-width-4); transform: rotate(var(--carina-rotate-negative-45)) translate(-50%, -50%); transform-origin: 0 0; content: ''; } .carina-popper__arrow--top { bottom: 0; } .carina-popper__arrow--top::before { border-color: transparent transparent var(--carina-background-color-popper) var(--carina-background-color-popper); } .carina-popper__arrow--end { left: 0; } .carina-popper__arrow--end::before { border-color: var(--carina-background-color-popper) transparent transparent var(--carina-background-color-popper); } .carina-popper__arrow--bottom { top: 0; } .carina-popper__arrow--bottom::before { border-color: var(--carina-background-color-popper) var(--carina-background-color-popper) transparent transparent; } .carina-popper__arrow--start { right: 0; } .carina-popper__arrow--start::before { border-color: transparent var(--carina-background-color-popper) var(--carina-background-color-popper) transparent; } .carina-popper__arrow--top.carina-popper__arrow--shadow::before { box-shadow: -6px 6px 6px 0 rgb(0 0 0 / 4%); } .carina-popper__arrow--end.carina-popper__arrow--shadow::before { box-shadow: -6px -6px 6px 0 rgb(0 0 0 / 4%); } .carina-popper__arrow--bottom.carina-popper__arrow--shadow::before { box-shadow: 6px -6px 6px 0 rgb(0 0 0 / 4%); } .carina-popper__arrow--start.carina-popper__arrow--shadow::before { box-shadow: 6px 6px 6px 0 rgb(0 0 0 / 4%); } .carina-popper__arrow--medium::before { border-width: 7px; } .carina-popper__arrow--large::before { border-width: 11px; } .carina-popper__backup-arrow { position: absolute; visibility: hidden; } .carina-popper__transition { transform: translate( var(--carina-transition-translate-x), var(--carina-transition-translate-y) ); transition-delay: var(--carina-transition-delay-50); } .carina-popper__transition.carina-transition--out { --carina-transition-opacity: 0; } .carina-popper__transition--disabled { --carina-transition-opacity: 0; transition-property: none; } .carina-visually-hidden-element { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .carina-visually-hidden-element--focus:focus, .carina-visually-hidden-element--focus:active { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; } .carina-tooltip__popper { max-width: 282px; padding: var(--carina-spacing-2); color: var(--carina-text-color-base-inverse); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-2xs); font-family: var(--carina-font-family-primary); line-height: var(--carina-line-height-body-3xs); box-shadow: var(--carina-box-shadow-lg); pointer-events: none; word-break: break-word; } .carina-tooltip__container { --carina-background-color-popper: var( --carina-background-color-surface-inverse ); } .carina-tooltip__arrow::before { border-color: var(--carina-background-color-popper); } .carina-magazine { position: absolute; z-index: calc( var(--carina-z-index-current) + var(--carina-z-index-popper-diff) ); display: block; box-sizing: border-box; width: max-content; margin: var(--carina-spacing-0); padding: var(--carina-spacing-2) var(--carina-spacing-0); border-radius: var(--carina-border-radius-md); overflow: auto; text-align: left; color: var(--carina-text-color-base); background-color: var(--carina-background-color-popper); outline: none; box-shadow: var(--carina-box-shadow-lg); } [dir='rtl'] .carina-magazine { text-align: right; } .carina-magazine-option__label-row { display: flex; justify-content: space-between; width: 100%; } .carina-magazine-option__label-row svg { margin: auto; } .carina-magazine-option__label-container { display: flex; align-items: flex-start; } .carina-magazine-option__label-check { display: flex; align-items: center; } .carina-magazine-option__label-check-icon { color: var(--carina-text-color-base); } .carina-magazine-option__list-item { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .carina-magazine-option__line-break { width: 100%; margin-top: var(--carina-spacing-2); margin-bottom: var(--carina-spacing-2); border-top: var(--carina-border-width-1) solid var(--carina-border-color-soft); } .carina-magazine-option__tooltip-container { z-index: calc(var(--carina-z-index-popper) + var(--carina-z-index-10)); } .carina-magazine-option { position: relative; display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; box-sizing: border-box; margin: var(--carina-spacing-0) var(--carina-spacing-2); padding: var(--carina-spacing-2); border: var(--carina-border-width-0); border-radius: var(--carina-border-radius-md); color: var(--carina-text-color-base); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-sm); font-family: var(--carina-font-family-primary); font-style: normal; line-height: var(--carina-line-height-normal); letter-spacing: normal; text-align: left; text-transform: none; text-indent: var(--carina-spacing-0); text-shadow: none; outline: var(--carina-spacing-0); cursor: pointer; appearance: none; word-break: break-word; } [dir='rtl'] .carina-magazine-option { text-align: right; } .carina-magazine-option:-moz-focus-inner { border: var(--carina-border-width-0); } .carina-magazine-option:focus-visible.carina-magazine-option--focused:not(.carina-magazine-option--selected):not( .carina-magazine-option--disabled ):not(.carina-magazine-option--heading):not(.carina-magazine-option--destructive):not( .carina-magazine-option__secondary-label-container ) { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-hover); box-shadow: var(--carina-ring-black) inset; } .carina-magazine-option:focus-visible.carina-magazine-option--focused:not(.carina-magazine-option--selected):not( .carina-magazine-option--disabled ):not(.carina-magazine-option--heading):not(.carina-magazine-option--destructive):not( .carina-magazine-option__secondary-label-container ) li { color: var(--carina-text-color-base); } .carina-magazine-option li { color: var(--carina-text-color-base); } .carina-magazine-option div span { color: var(--carina-text-color-base); } .carina-magazine-option:hover:not(.carina-magazine-option--selected):not(.carina-magazine-option--disabled):not( .carina-magazine-option--destructive ):not(.carina-magazine-option--heading):not(.carina-magazine-option__secondary-label-container) { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-hover); } .carina-magazine-option:hover:not(.carina-magazine-option--selected):not(.carina-magazine-option--disabled):not( .carina-magazine-option--destructive ):not(.carina-magazine-option--heading):not(.carina-magazine-option__secondary-label-container) li { color: var(--carina-text-color-base); outline: none; } .carina-magazine-option:hover:not(.carina-magazine-option--selected):not(.carina-magazine-option--disabled):not( .carina-magazine-option--destructive ):not(.carina-magazine-option--heading):not(.carina-magazine-option__secondary-label-container) div span { color: var(--carina-text-color-base); } .carina-magazine-option:active { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-active); } .carina-magazine-option.carina-magazine-option--heading { min-height: 20px; margin-top: var(--carina-spacing-2-5); margin-bottom: var(--carina-spacing-1-5); padding-top: var(--carina-spacing-0); padding-bottom: var(--carina-spacing-0); border-top: var(--carina-border-width-1) solid var(--carina-border-color-soft); border-radius: var(--carina-border-radius-none); color: var(--carina-text-color-soft); font-weight: var(--carina-font-weight-display); font-size: var(--carina-font-size-body-2xs); text-transform: uppercase; cursor: default; } .carina-magazine-option.carina-magazine-option--heading[role='separator']:not(:first-of-type) { width: 100%; height: 100%; margin-top: var(--carina-spacing-3); margin-inline: var(--carina-spacing-0); padding: var(--carina-spacing-2-5) var(--carina-spacing-4) var(--carina-spacing-0); } .carina-magazine-option--heading:hover, .carina-magazine-option--heading:focus, .carina-magazine-option--heading:active, .carina-magazine-option--disabled:hover, .carina-magazine-option--disabled:focus, .carina-magazine-option--disabled:active { background-color: unset; } .carina-magazine-option__secondary-label-container { padding-inline-start: var(--carina-spacing-0); } .carina-magazine-option__secondary-label-container li { float: left; margin-top: var(--carina-spacing-2); color: var(--carina-text-color-soft); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-2xs); font-family: var(--carina-font-family-primary); line-height: var(--carina-line-height-normal); list-style: none; list-style-type: disc; margin-inline-start: var(--carina-spacing-2); } .carina-magazine-option__secondary-label-container li::before { margin-inline-end: var(--carina-spacing-2); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-2xs); font-family: var(--carina-font-family-primary); line-height: var(--carina-line-height-normal); vertical-align: middle; content: '\00b7'; } .carina-magazine-option__secondary-label-container li:first-of-type { margin-inline-start: var(--carina-spacing-0); } .carina-magazine-option__secondary-label-container li:first-of-type::before { content: none; } [dir='rtl'] .carina-magazine-option__secondary-label-container li { float: right; } .carina-magazine-option.carina-magazine-option--selected { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-selected); } .carina-magazine-option.carina-magazine-option--selected:focus-visible { box-shadow: var(--carina-ring-black) inset; } .carina-magazine-option.carina-magazine-option--focused:not(.carina-magazine-option--heading):not(.carina-magazine-option--disabled):not( .carina-magazine-option--destructive ):not(.carina-magazine-option--selected) li { color: var(--carina-text-color-base); outline: none; } .carina-magazine-option.carina-magazine-option--focused:not(.carina-magazine-option--heading):not(.carina-magazine-option--disabled):not( .carina-magazine-option--destructive ):not(.carina-magazine-option--selected) div span { color: var(--carina-text-color-base); } .carina-magazine-option.carina-magazine-option--focused:not(.carina-magazine-option--heading):not(.carina-magazine-option--disabled):not( .carina-magazine-option--destructive ):not(.carina-magazine-option--selected):focus-visible { box-shadow: var(--carina-ring-black) inset; } .carina-magazine-option--destructive { color: var(--carina-text-color-danger); } .carina-magazine-option--destructive:focus-visible.carina-magazine-option--focused { color: var(--carina-text-color-on-danger-pale); background-color: var(--carina-background-color-danger-pale); } .carina-magazine-option--destructive:focus-visible { box-shadow: var(--carina-ring-danger) inset; } .carina-magazine-option--destructive:focus, .carina-magazine-option--destructive:hover { color: var(--carina-text-color-on-danger-pale); background-color: var(--carina-background-color-danger-pale); } .carina-magazine-option--destructive:active { color: var(--carina-text-color-on-danger-pale); background-color: var(--carina-background-color-danger-pale-hover); } .carina-magazine-option--disabled { color: var(--carina-text-color-disabled); cursor: not-allowed; opacity: var(--carina-opacity-50); } .carina-magazine-option--disabled:hover, .carina-magazine-option--disabled:focus { background-color: var(--carina-background-color-surface); } .carina-magazine-option.carina-magazine-option--first-option { border-top: var(--carina-border-width-0); } .carina-magazine-option--selected:not(.carina-magazine-option--focused) { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-active); } .carina-menu__magazine { position: relative; width: max-content; min-width: 176px; max-width: 18rem; padding: var(--carina-spacing-2) var(--carina-spacing-0); } .carina-bulk-action-bar { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: 100%; max-width: 100%; height: 56px; border-radius: var(--carina-border-radius-xl); container-type: inline-size; color: var(--carina-text-color-base-inverse); font-family: var(--carina-font-family-primary); background-color: var(--carina-background-color-surface-inverse); box-shadow: var(--carina-box-shadow-none); } .carina-bulk-action-bar__label { box-sizing: border-box; width: fit-content; padding: var(--carina-spacing-4) var(--carina-spacing-3) var(--carina-spacing-4) var(--carina-spacing-6); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } [dir='rtl'] .carina-bulk-action-bar__label { padding-right: var(--carina-spacing-6); padding-left: var(--carina-spacing-3); } .carina-bulk-action-bar__dismiss { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 56px; height: 100%; border-inline-start: var(--carina-spacing-px) solid var(--carina-border-color-inverse); } .carina-bulk-action-bar__dismiss :hover { cursor: pointer; } .carina-bulk-action-bar__actions { display: none; flex-grow: 1; flex-shrink: 100; flex-wrap: wrap; align-items: center; justify-content: flex-end; box-sizing: border-box; height: 100%; margin: 0 var(--carina-spacing-2); padding: var(--carina-spacing-2) 0; } .carina-bulk-action-bar__actions--small { display: flex; } .carina-bulk-action-bar__menu { position: absolute; padding: 0 var(--carina-spacing-1); visibility: hidden; } .carina-bulk-action-bar__menu--visible { position: static; visibility: visible; } .carina-bulk-action-bar__menu-action { display: flex; align-items: center; justify-content: flex-start; } .carina-bulk-action-bar__action-value { margin-inline-start: var(--carina-spacing-4); } .carina-button-group { display: flex; } .carina-button-group__item { display: flex; position: relative; align-items: center; justify-content: center; min-width: 112px; height: 40px; margin: var(--carina-spacing-0); padding: var(--carina-spacing-2) var(--carina-spacing-4); border: var(--carina-border-width-1) solid var(--carina-border-color-soft); color: var(--carina-text-color-soft); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-md); font-family: var(--carina-font-family-primary); background-color: var(--carina-background-color-surface); cursor: pointer; transition: all var(--carina-transition-duration-100) var(--carina-transition-timing-function-productive-ease-in-out); margin-inline-start: calc(-1 * var(--carina-spacing-px)); } .carina-button-group__item svg { transition: all var(--carina-transition-duration-100) var(--carina-transition-timing-function-productive-ease-in-out); } .carina-button-group__item:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); box-shadow: var(--carina-ring-base); z-index: calc(var(--carina-z-index-current) + 2); } .carina-button-group__item--small { min-width: 96px; height: 32px; font-size: var(--carina-font-size-body-sm); } .carina-button-group__item--large { min-width: 128px; height: 44px; } .carina-button-group__item--disabled { cursor: default; opacity: var(--carina-opacity-40); } .carina-button-group__item:not(.carina-button-group__item--disabled):not(.carina-button-group__item--selected):not( .carina-button-group__item:active ):hover { color: var(--carina-text-color-base); background: var(--carina-background-color-surface-hover); } .carina-button-group__item:active:not(.carina-button-group__item--disabled), .carina-button-group__item--selected, .carina-button-group__item--selected:focus, .carina-button-group__item--selected:hover { color: var(--carina-text-color-on-primary); background: var(--carina-background-color-primary); cursor: default; } .carina-button-group__item--selected { border: var(--carina-border-width-1) solid var(--carina-border-color-primary-focus); z-index: calc(var(--carina-z-index-current) + 1); } .carina-button-group__item--first { margin-inline-start: var(--carina-spacing-0); border-start-start-radius: var(--carina-spacing-2-5); border-end-start-radius: var(--carina-spacing-2-5); } .carina-button-group__item--last { border-start-end-radius: var(--carina-spacing-2-5); border-end-end-radius: var(--carina-spacing-2-5); } .carina-button-group__item--auto-width, .carina-button-group__item--icon-only { min-width: unset; } .carina-button-group__item--icon-only { padding: var(--carina-spacing-2); } .carina-button-group__item-icon { display: flex; align-content: center; justify-content: center; } .carina-button-group__item-icon--start { padding-inline-end: var(--carina-spacing-2); } .carina-button-group__item-icon--end { padding-inline-start: var(--carina-spacing-2); } .carina-button-group__item-icon--icon-only { padding: var(--carina-spacing-0); } .carina-card__body { display: flex; align-items: flex-start; justify-content: center; min-width: 0; } .carina-card__body--horizontal { flex: 1 0 50%; } .carina-card__body--vertical { flex: 1 0 40%; min-height: calc(var(--card-height, 500px) * 0.4); } .carina-card__container { display: flex; width: var(--card-width, 500px); max-height: var(--card-height, 500px); border-radius: var(--carina-border-radius-xl); overflow: hidden; color: var(--carina-text-color-body, var(--carina-text-color-base)); font-family: var(--carina-font-family-primary); direction: ltr; background-color: var(--carina-background-color-surface); } [dir='rtl'] .carina-card__container { direction: rtl; } .carina-card__container--border { border-color: var(--carina-border-color-soft); border-style: solid; border-width: var(--carina-border-width-1); } .carina-card__container--horizontal { flex-direction: row; } [dir='rtl'] .carina-card__container--horizontal { direction: rtl; } .carina-card__container--horizontal.carina-card__container--responsive { width: 100%; } .carina-card__container--vertical { flex-wrap: wrap; } .carina-card__container--vertical.carina-card__container--responsive { width: 100%; height: 100%; } .carina-card__container--vertical.carina-card__container--fixed-width { height: 100%; } .carina-card__container--shadow-none { box-shadow: var(--carina-box-shadow-none); } .carina-card__container--shadow-md { box-shadow: var(--carina-box-shadow-md); } .carina-card__container--shadow-lg { box-shadow: var(--carina-box-shadow-lg); } .carina-card__container--shadow-xl { box-shadow: var(--carina-box-shadow-xl); } .carina-card__container--shadow-2xl { box-shadow: var(--carina-box-shadow-2xl); } .carina-card__endcap { display: flex; } .carina-card__endcap--header { align-items: center; justify-content: center; } .carina-card__endcap--header.carina-card__endcap--horizontal { flex: 0 0 20%; } .carina-card__endcap--header.carina-card__endcap--vertical { width: 100%; min-height: calc(var(--card-height, 500px) * 0.4); } .carina-card__endcap--footer.carina-card__endcap--horizontal { align-items: flex-start; justify-content: center; } .carina-card__endcap--footer.carina-card__endcap--vertical { align-items: center; justify-content: flex-end; width: 100%; min-height: 10%; } .carina-card__image { position: relative; padding: 0; overflow: hidden; } .carina-card__image--full { width: 100%; height: 100%; } .carina-card__image--padded { width: 80%; height: 80%; } .carina-card__image-canvas { position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); } .carina-carousel { display: flex; flex-direction: column-reverse; box-sizing: border-box; width: 100%; font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-2xs); font-family: var(--carina-font-family-primary); } .carina-carousel--show-overhang { padding: var(--carina-spacing-0) calc(var(--carina-spacing-4) + (0.5 * var(--carina-spacing-1))); } .carina-carousel__container { position: relative; padding: var(--carina-spacing-0) 0.4rem; } .carina-carousel__container--inset-controls { padding: var(--carina-spacing-0); } .carina-carousel--lg-dots { --carina-carousel-dot-size: 16px; --carina-carousel-dot-padding: 24px; } .carina-carousel--md-dots { --carina-carousel-dot-size: 12px; --carina-carousel-dot-padding: 20px; } .carina-carousel__control { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 36px; height: 36px; padding: var(--carina-spacing-0-5); border: 0; border-radius: var(--carina-border-radius-full); color: var(--carina-text-color-soft); line-height: 36px; text-align: center; background: var(--carina-background-color-surface); box-shadow: color-mix( in srgb, #000 calc(var(--carina-opacity-25) * 100%), transparent ) 0 var(--carina-spacing-1) var(--carina-spacing-2) calc(-1 * var(--carina-spacing-1)); transform: translateY(-50%); transform-origin: 50% 50%; cursor: pointer; opacity: var(--carina-opacity-0); transition: transform var(--carina-transition-delay-100) var(--carina-transition-timing-function-productive-ease-in-out), box-shadow var(--carina-transition-delay-100) var(--carina-transition-timing-function-productive-ease-in-out); } .carina-carousel__control:focus { outline: none; } .carina-carousel__control:focus-visible { outline: var(--carina-border-color-primary-focus) auto 1px; } .carina-carousel__control:active { transform: translateY(-50%) scale(1.03); } .carina-carousel__control--previous { inset-inline-start: 0; } [dir='rtl'] .carina-carousel__control--previous { box-shadow: color-mix( in srgb, #000 calc(var(--carina-opacity-25) * 100%), transparent ) 0 calc(-1 * var(--carina-spacing-1)) var(--carina-spacing-2) calc(-1 * var(--carina-spacing-1)); transform: rotate(180deg) translateY(50%); transform-origin: 50% 50%; } .carina-carousel__control--next { inset-inline-end: 0; } [dir='rtl'] .carina-carousel__control--next { box-shadow: color-mix( in srgb, #000 calc(var(--carina-opacity-25) * 100%), transparent ) 0 calc(-1 * var(--carina-spacing-1)) var(--carina-spacing-2) calc(-1 * var(--carina-spacing-1)); transform: rotate(180deg) translateY(50%); transform-origin: 50% 50%; } .carina-carousel__control--inset { width: 24px; height: 24px; } .carina-carousel__control--previous.carina-carousel__control--inset { inset-inline-start: calc(var(--carina-spacing-1)); } .carina-carousel__control--next.carina-carousel__control--inset { inset-inline-end: calc(var(--carina-spacing-1)); } .carina-carousel__dot { position: absolute; width: var(--carina-carousel-dot-size); height: var(--carina-carousel-dot-size); margin: var(--carina-spacing-0); padding: var(--carina-spacing-0); border: 0; border-radius: var(--carina-border-radius-full); text-decoration: none; background: var(--carina-background-color-neutral); transform-origin: 50% 50%; cursor: pointer; transition: transform var(--carina-transition-duration-400) var(--carina-transition-timing-function-productive-ease-in-out), opacity var(--carina-transition-duration-400) var(--carina-transition-timing-function-productive-ease-in-out), box-shadow var(--carina-transition-duration-100) var(--carina-transition-timing-function-productive-ease-in-out); } .carina-carousel__dot--active { background: var(--carina-background-color-surface-inverse); cursor: default; } .carina-carousel__dot--hidden { opacity: var(--carina-opacity-0); } .carina-carousel__dots { position: relative; margin: var(--carina-spacing-4) auto 0; background: var(--carina-background-color-surface); padding: var(--carina-spacing-2); border-radius: var(--carina-border-radius-2xl); width: calc( var(--carina-carousel-dot-padding) * var(--carina-carousel-visible-dots) + 16px ); height: calc(var(--carina-carousel-dot-size) + 2 * var(--carina-spacing-2)); box-sizing: border-box; display: flex; justify-content: center; } .carina-carousel__dots:focus-visible { box-shadow: inset var(--carina-ring-base); outline: none; } .carina-carousel__dots--hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%); } .carina-carousel__dots--1 { --carina-carousel-visible-dots: 1; } .carina-carousel__dots--2 { --carina-carousel-visible-dots: 2; } .carina-carousel__dots--3 { --carina-carousel-visible-dots: 3; } .carina-carousel__dots--4 { --carina-carousel-visible-dots: 4; } .carina-carousel__dots--5 { --carina-carousel-visible-dots: 5; } .carina-carousel__numbers { position: absolute; top: var(--carina-spacing-4); inset-inline-start: var(--carina-spacing-8); padding: calc(2 * var(--carina-spacing-px)) var(--carina-spacing-2); border-radius: calc( var(--carina-border-radius-sm) + var(--carina-border-radius-lg) ); color: var(--carina-text-color-base-inverse); background: color-mix( in srgb, var(--carina-background-color-surface-inverse) calc(var(--carina-opacity-80) * 100%), transparent ); pointer-events: none; } .carina-carousel__numbers--inset { top: var(--carina-spacing-2); inset-inline-start: var(--carina-spacing-2); } .carina-carousel__slide { flex: 0 0 100%; box-sizing: border-box; padding: var(--carina-spacing-0) calc(6 * var(--carina-spacing-px)); overflow: hidden; } .carina-carousel__slide > * { border-radius: var(--carina-border-radius-xl); } .carina-carousel__slide > * > img { border-radius: var(--carina-border-radius-xl); } .carina-carousel__slide--inset { padding: var(--carina-spacing-0); } .carina-carousel__slide--hidden { -webkit-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; } .carina-carousel__slide--1-cols { flex-basis: calc(100% / 1); width: calc(100% / 1); max-width: calc(100% / 1); } .carina-carousel__slide--2-cols { flex-basis: calc(100% / 2); width: calc(100% / 2); max-width: calc(100% / 2); } .carina-carousel__slide--3-cols { flex-basis: calc(100% / 3); width: calc(100% / 3); max-width: calc(100% / 3); } .carina-carousel__slide--4-cols { flex-basis: calc(100% / 4); width: calc(100% / 4); max-width: calc(100% / 4); } .carina-carousel__slide--5-cols { flex-basis: calc(100% / 5); width: calc(100% / 5); max-width: calc(100% / 5); } .carina-carousel__slide--6-cols { flex-basis: calc(100% / 6); width: calc(100% / 6); max-width: calc(100% / 6); } .carina-carousel__slide--7-cols { flex-basis: calc(100% / 7); width: calc(100% / 7); max-width: calc(100% / 7); } .carina-carousel__slide--8-cols { flex-basis: calc(100% / 8); width: calc(100% / 8); max-width: calc(100% / 8); } .carina-carousel__slide--9-cols { flex-basis: calc(100% / 9); width: calc(100% / 9); max-width: calc(100% / 9); } .carina-carousel__slide--10-cols { flex-basis: calc(100% / 10); width: calc(100% / 10); max-width: calc(100% / 10); } .carina-carousel__slide--11-cols { flex-basis: calc(100% / 11); width: calc(100% / 11); max-width: calc(100% / 11); } .carina-carousel__slide--12-cols { flex-basis: calc(100% / 12); width: calc(100% / 12); max-width: calc(100% / 12); } .carina-carousel__slider-wrapper { box-sizing: border-box; width: 100%; overflow: hidden; } .carina-carousel__slider-wrapper--show-overhang { padding: var(--carina-spacing-0) calc(50 * var(--carina-spacing-px)); } .carina-carousel__slider { display: flex; align-items: stretch; box-sizing: border-box; width: 100%; height: auto; margin: var(--carina-spacing-0); padding: var(--carina-spacing-0); list-style: none; transition-timing-function: var( --carina-transition-timing-function-productive-ease-in-out ); transition-duration: var(--carina-transition-duration-400); transition-property: transform; } .carina-carousel__slider--touching { transition-duration: calc(0 * var(--carina-transition-duration-50)); } .carina-checkbox { position: absolute; margin: var(--carina-spacing-0); cursor: pointer; opacity: var(--carina-opacity-0); } .carina-checkbox:focus-visible + div { border-color: var(--carina-border-color-primary); box-shadow: var(--carina-ring-base); } .carina-checkbox--error:focus-visible + div { border-color: var(--carina-border-color-danger); box-shadow: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-danger-focus); } .carina-checkbox__box { position: relative; display: flex; flex-shrink: 0; align-items: center; align-self: flex-start; justify-content: center; width: var(--carina-spacing-4); height: var(--carina-spacing-4); box-sizing: border-box; margin-right: var(--carina-spacing-2); border-color: var(--carina-border-color-base); border-style: solid; border-width: var(--carina-border-width-1); border-radius: var(--carina-border-radius-sm); background-color: var(--carina-colors-transparent); transition-timing-function: var( --carina-transition-timing-function-productive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: border-color, box-shadow; } [dir='rtl'] .carina-checkbox__box { margin-right: var(--carina-spacing-0); margin-left: var(--carina-spacing-2); } .carina-checkbox__box--read-only { color: var(--carina-text-color-base); border-color: var(--carina-border-color-soft); background-color: var(--carina-background-color-surface-alt); -webkit-user-select: text; -ms-user-select: text; user-select: text; } .carina-checkbox__box--read-only:focus { border-color: var(--carina-border-color-primary-focus); } .carina-checkbox__box--read-only:hover { cursor: not-allowed; } .carina-checkbox__box--checked { border-color: var(--carina-border-color-primary); background-color: var(--carina-background-color-primary); } .carina-checkbox__box--error { border-color: var(--carina-border-color-danger); } .carina-checkbox__box--checked.carina-checkbox__box--error { background-color: var(--carina-background-color-danger); } .carina-checkbox__box--disabled, .carina-checkbox__box--disabled.carina-checkbox__box--error { border-color: var(--carina-border-color-soft); background-color: var(--carina-background-color-neutral-inactive); cursor: not-allowed; } .carina-checkbox__icon { position: absolute; top: 50%; left: 50%; width: var(--carina-spacing-4); height: var(--carina-spacing-4); box-sizing: border-box; transform: translate(-50%, -50%); pointer-events: none; fill: var(--carina-text-color-on-primary); } .carina-checkbox__box--error.carina-checkbox__icon { fill: var(--carina-text-color-on-danger); } .carina-checkbox__icon--disabled { fill: var(--carina-text-color-disabled); } .carina-checkbox__indeterminate-icon { position: absolute; top: 50%; left: 50%; width: var(--carina-spacing-4); height: var(--carina-spacing-4); box-sizing: border-box; transform: translate(-50%, -50%); fill: var(--carina-text-color-on-primary); } .carina-checkbox__indeterminate-icon--disabled { fill: var(--carina-text-color-disabled); } .carina-checkbox__label { display: flex; align-items: center; min-height: var(--carina-spacing-4); padding: var(--carina-spacing-2) var(--carina-spacing-0); padding-right: var(--carina-spacing-4); font-size: var(--carina-font-size-body-sm); font-family: var(--carina-font-family-primary); line-height: var(--carina-line-height-tight); text-indent: 0; text-shadow: none; cursor: pointer; } [dir='rtl'] .carina-checkbox__label { padding-right: var(--carina-spacing-0); padding-left: var(--carina-spacing-4); } .carina-checkbox__label--disabled { color: var(--carina-text-color-disabled); cursor: not-allowed; } .carina-label { position: relative; display: block; margin: var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-1); padding: var(--carina-spacing-0); color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-sm); vertical-align: top; } .carina-label, .carina-label__abbr { font-weight: var(--carina-font-weight-body); font-family: var(--carina-font-family-primary); font-style: normal; line-height: var(--carina-line-height-normal); letter-spacing: normal; text-transform: none; text-indent: 0; text-shadow: none; } .carina-label--hidden { position: absolute; width: var(--carina-spacing-px); height: var(--carina-spacing-px); overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%); } .carina-label--underline, .carina-label--outline { overflow: hidden; left: var(--carina-spacing-0); } .carina-label--underline, .carina-label--outline, .carina-label--grid { position: absolute; max-width: calc(100% - var(--carina-spacing-8)); font-size: var(--carina-font-size-body-md); white-space: nowrap; text-overflow: ellipsis; transition: top var(--carina-transition-duration-100) ease calc(0 * var(--carina-transition-duration-100)), font-size var(--carina-transition-duration-100) ease calc(0 * var(--carina-transition-duration-100)), padding-left var(--carina-transition-duration-100) ease calc(0 * var(--carina-transition-duration-100)); padding-inline-start: var(--carina-spacing-4); } [dir='rtl'] .carina-label--underline, [dir='rtl'] .carina-label--outline, [dir='rtl'] .carina-label--grid { right: var(--carina-spacing-0); left: unset; transition: top var(--carina-transition-duration-100) ease calc(0 * var(--carina-transition-duration-100)), font-size var(--carina-transition-duration-100) ease calc(0 * var(--carina-transition-duration-100)), padding-right var(--carina-transition-duration-100) ease calc(0 * var(--carina-transition-duration-100)); } .carina-label--grid { top: var(--carina-spacing-0-5); padding-inline-start: var(--carina-spacing-2); } .carina-label--outline, .carina-label--underline { top: calc(var(--carina-spacing-2-5) - var(--carina-spacing-px)); } .carina-label--animated { font-size: var(--carina-font-size-body-sm); } .carina-label--animated.carina-label--underline, .carina-label--animated.carina-label--outline { top: calc(-1 * var(--carina-spacing-2-5)); } .carina-label--icon.carina-label--underline, .carina-label--icon.carina-label--outline { padding-inline-start: var(--carina-spacing-11); } .carina-label--icon.carina-label--required.carina-label--underline, .carina-label--icon.carina-label--required.carina-label--outline { padding-inline-start: calc( var(--carina-spacing-12) + var(--carina-spacing-1) ); } .carina-label--end-icon.carina-label--underline, .carina-label--end-icon.carina-label--outline { max-width: calc(100% - var(--carina-spacing-8) - var(--carina-spacing-5)); } .carina-label--disabled { color: var(--carina-text-color-disabled); } .carina-label__abbr { position: absolute; inset-inline-start: calc(-1 * var(--carina-spacing-2-5)); color: var(--carina-text-color-danger); font-size: var(--carina-font-size-body-xl); text-decoration: none; top: calc(-1 * var(--carina-spacing-0-5)); transition: left var(--carina-transition-duration-100) ease calc(0 * var(--carina-transition-duration-100)); } [dir='rtl'] .carina-label__abbr { transition: right var(--carina-transition-duration-100) ease calc(0 * var(--carina-transition-duration-100)); } .carina-label__abbr--grid { line-height: var(--carina-line-height-none); left: calc(-1 * var(--carina-spacing-2)); } .carina-label__abbr--underline, .carina-label__abbr--outline { inset-inline-start: var(--carina-spacing-2); font-size: var(--carina-font-size-body-sm); } .carina-label__abbr--icon.carina-label__abbr--underline, .carina-label__abbr--icon.carina-label__abbr--outline { inset-inline-start: var(--carina-spacing-11); } .carina-helper-text { display: block; margin: var(--carina-spacing-1) var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-0); padding: var(--carina-spacing-0); color: var(--carina-text-color-soft); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-xs); font-family: var(--carina-font-family-primary); font-style: normal; line-height: var(--carina-line-height-normal); letter-spacing: normal; text-transform: none; text-indent: 0; text-shadow: none; vertical-align: top; } .carina-helper-text > svg { position: relative; top: -1px; display: inline; vertical-align: middle; margin-inline-end: var(--carina-spacing-1); } .carina-helper-text--error { color: var(--carina-text-color-danger); } .carina-checkbox-group { clear: both; box-sizing: border-box; margin: 0; padding: 0; border: 0; color: var(--carina-text-color-base); text-align: left; list-style-type: none; outline: 0; } [dir='rtl'] .carina-checkbox-group { text-align: right; } .carina-checkbox-group--horizontal > label { display: inline-flex; padding-right: var(--carina-spacing-6); } [dir='rtl'] .carina-checkbox-group--horizontal > label { padding-right: var(--carina-spacing-0); padding-left: var(--carina-spacing-6); } .carina-checkbox-group__container { display: inline-block; } .carina-color-picker__picker { box-sizing: initial; width: 200px; padding: var(--carina-spacing-2-5) var(--carina-spacing-2-5) 0; border-radius: var(--carina-border-radius-sm); font-family: var(--carina-font-family-primary); background: var(--carina-background-color-popper); box-shadow: var(--carina-box-shadow-xl); } .carina-color-picker__picker-controls { display: flex; } .carina-color-picker__picker-sliders { flex: 1; padding: var(--carina-spacing-1) 0; } .carina-color-picker__picker-color { position: relative; width: 1.5rem; height: 1.5rem; margin: var(--carina-spacing-1) 0 0 var(--carina-spacing-1); border-radius: calc(1.5 * var(--carina-border-radius-xs)); } .carina-color-picker__picker-active-color { position: absolute; border-radius: var(--carina-border-radius-xs); background: rgb( var(--carina-color-picker-picker-rgb-r) var(--carina-color-picker-picker-rgb-g) var(--carina-color-picker-picker-rgb-b) / var(--carina-color-picker-picker-rgb-a) ); box-shadow: inset var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-px) rgb(0 0 0 / calc(var(--carina-opacity-5) + var(--carina-opacity-10))), inset var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-1) rgb(0 0 0 / var(--carina-opacity-25)); inset: var(--carina-spacing-0); } .carina-color-picker__picker-hue { position: relative; box-sizing: content-box; height: 0.625rem; border-radius: var(--carina-border-radius-xs); overflow: hidden; box-shadow: inset var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-px) rgb(0 0 0 / calc(var(--carina-opacity-5) + var(--carina-opacity-10))), inset var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-1) rgb(0 0 0 / var(--carina-opacity-25)); } .carina-color-picker__picker--disable-alpha.carina-color-picker__picker-hue { height: 1.5rem; } .carina-color-picker__picker-alpha { position: relative; box-sizing: content-box; height: 0.625rem; margin-top: var(--carina-spacing-1); border-radius: var(--carina-border-radius-xs); overflow: hidden; box-shadow: inset var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-px) rgb(0 0 0 / calc(var(--carina-opacity-5) + var(--carina-opacity-10))), inset var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-1) rgb(0 0 0 / var(--carina-opacity-25)); } .carina-color-picker__picker-saturation { position: relative; box-sizing: content-box; width: 100%; margin: calc(-1 * var(--carina-spacing-px)); padding-bottom: 75%; border: 1px solid rgb(0 0 0 / var(--carina-opacity-25)); border-radius: var(--carina-border-radius-xs); overflow: hidden; } .carina-color-picker__picker--sketch-field-container input { color: var(--carina-text-color-base); background-color: var(--carina-background-color-popper); } .carina-color-picker__picker--sketch-field-container label { color: var(--carina-text-color-base) !important; } .carina-color-picker__pointer { width: var(--carina-border-width-4); height: var(--carina-spacing-2); margin-top: var(--carina-spacing-px); border-radius: var(--carina-border-width-1); background: var(--carina-colors-grayscale-5); box-shadow: var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-0-5) rgb(0 0 0 / var(--carina-opacity-60)); transform: translateX(-2px); } .carina-color-picker__pointer--disable-alpha { height: 22px; } .carina-color-picker__presets-container { margin: var(--carina-spacing-0) calc(-1 * var(--carina-spacing-2-5)); padding: calc(var(--carina-spacing-2-5) / 2) var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-2-5); border-top: var(--carina-spacing-px) solid var(--carina-border-color-soft); } .carina-color-picker__presets-label { margin: var(--carina-spacing-0); color: var(--carina-text-color-base); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-sm); line-height: var(--carina-line-height-normal); } .carina-color-picker__presets-colors { position: relative; display: flex; flex-wrap: wrap; padding-top: calc(var(--carina-spacing-2-5) / 2); } .carina-color-picker__presets-swatch { width: 16px; height: 16px; margin: var(--carina-spacing-0) var(--carina-spacing-2-5) var(--carina-spacing-2-5) var(--carina-spacing-0); border-radius: 3px; } .carina-color-picker__presets-swatch:focus-within { box-shadow: var(--carina-ring-base); } .carina-color-picker__presets-swatch.carina-color-picker__presets-swatch--selected { box-shadow: var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-0-5) #0099e0; } .carina-color-picker__presets-swatch.carina-color-picker__presets-swatch--selected:focus-within { box-shadow: var(--carina-ring-base); } .carina-input-fieldset { position: absolute; box-sizing: border-box; width: 100%; height: 100%; margin: var(--carina-spacing-0); padding: var(--carina-spacing-0); border-color: var(--carina-border-color-base); border-style: solid; border-width: var(--carina-border-width-1); border-radius: var(--carina-border-radius-md); overflow: hidden; background: transparent; pointer-events: none; } .carina-input-fieldset--default.carina-input-fieldset--label { bottom: 0; } .carina-input-fieldset--grid { top: 0; inset-inline-start: 0; border-style: dashed; border-width: var(--carina-border-width-0) var(--carina-border-width-0) var(--carina-border-width-1) var(--carina-border-width-0); border-radius: var(--carina-border-radius-none); } .carina-input-fieldset--outline { top: calc(-1 * var(--carina-spacing-2-5)); } .carina-input-fieldset--underline { top: calc(-1 * var(--carina-spacing-2-5)); border-width: var(--carina-border-width-0) var(--carina-border-width-0) var(--carina-border-width-1) var(--carina-border-width-0); border-radius: var(--carina-border-radius-none); } .carina-input-fieldset--error { border-color: var(--carina-border-color-danger); } .carina-input-fieldset--disabled { border-color: var(--carina-border-color-soft); } .carina-input-fieldset__legend { display: block; width: 0; height: 19.5px; padding: 0; margin: var(--carina-spacing-0) var(--carina-spacing-3); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-sm); font-family: var(--carina-font-family-primary); font-style: normal; line-height: 19.5px; letter-spacing: normal; visibility: hidden; transition-duration: var(--carina-animation-duration-100); transition-property: width; } .carina-input-fieldset--default .carina-input-fieldset__legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .carina-input-fieldset__legend--animated { width: unset; padding: var(--carina-spacing-0) var(--carina-spacing-1); } .carina-input-fieldset__legend--animated:empty { padding: var(--carina-spacing-0); } .carina-input-fieldset__legend--animated.carina-input-fieldset__legend--hiddenlabel { width: 0; padding: var(--carina-spacing-0); } .carina-input-fieldset__legend--required { margin: var(--carina-spacing-0); padding: var(--carina-spacing-0); } .carina-input-fieldset__legend--animated.carina-input-fieldset__legend--required.carina-input-fieldset__legend--label { margin: var(--carina-spacing-0) var(--carina-spacing-1); padding: var(--carina-spacing-0) var(--carina-spacing-1) var(--carina-spacing-0) var(--carina-spacing-3); } [dir='rtl'] .carina-input-fieldset__legend--animated.carina-input-fieldset__legend--required.carina-input-fieldset__legend--label { padding: var(--carina-spacing-0) var(--carina-spacing-3) var(--carina-spacing-0) var(--carina-spacing-1); } @keyframes carina-loading-icon--circle { 0% { transform: rotateZ(var(--carina-rotate-0)); } 66% { transform: rotateZ(220deg); } 100% { transform: rotateZ(var(--carina-rotate-360)); } } @keyframes carina-loading-icon--tail-chase-xs { 0% { stroke-dashoffset: 26; transform: rotateZ(var(--carina-rotate-0)); } 50% { stroke-dashoffset: 6; transform: rotateZ(var(--carina-rotate-45)); } 100% { stroke-dashoffset: 26; transform: rotateZ(var(--carina-rotate-360)); } } @keyframes carina-loading-icon--tail-chase-sm { 0% { stroke-dashoffset: 32; transform: rotateZ(var(--carina-rotate-0)); } 50% { stroke-dashoffset: 5; transform: rotateZ(var(--carina-rotate-45)); } 100% { stroke-dashoffset: 32; transform: rotateZ(var(--carina-rotate-360)); } } @keyframes carina-loading-icon--tail-chase-md { 0% { stroke-dashoffset: 40; transform: rotateZ(var(--carina-rotate-0)); } 50% { stroke-dashoffset: 3; transform: rotateZ(var(--carina-rotate-45)); } 100% { stroke-dashoffset: 40; transform: rotateZ(var(--carina-rotate-360)); } } @keyframes carina-loading-icon--tail-chase-lg { 0% { stroke-dashoffset: 48; transform: rotateZ(var(--carina-rotate-0)); } 50% { stroke-dashoffset: 2; transform: rotateZ(var(--carina-rotate-45)); } 100% { stroke-dashoffset: 48; transform: rotateZ(var(--carina-rotate-360)); } } .carina-loading-icon { position: relative; display: flex; flex-direction: column; flex-grow: 0; flex-shrink: 0; align-items: center; justify-content: center; overflow: visible; font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-xl); font-family: var(--carina-font-family-primary); transform-origin: 50% 50%; } .carina-loading-icon__circle { margin-bottom: var(--carina-spacing-0-5); overflow: visible; transform-origin: 50% 50%; animation: carina-loading-icon--circle 3770ms linear infinite; fill: transparent; stroke: var(--carina-background-color-neutral-inactive); stroke-dasharray: 400; stroke-linecap: round; stroke-width: 2px; } .carina-loading-icon__circle--xs { width: var(--carina-icon-xs); height: var(--carina-icon-xs); } .carina-loading-icon__circle--sm { width: var(--carina-icon-sm); height: var(--carina-icon-sm); } .carina-loading-icon__circle--md { width: var(--carina-icon-md); height: var(--carina-icon-md); } .carina-loading-icon__circle--lg { width: var(--carina-icon-lg); height: var(--carina-icon-lg); } .carina-loading-icon__tail-chaser { transform-origin: 50% 50%; fill: transparent; stroke-linecap: round; stroke-width: 2px; } .carina-loading-icon__tail-chaser--xs { animation: carina-loading-icon--tail-chase-xs 2450ms linear infinite; stroke-dasharray: 33; } .carina-loading-icon__tail-chaser--sm { animation: carina-loading-icon--tail-chase-sm 2450ms linear infinite; stroke-dasharray: 40; } .carina-loading-icon__tail-chaser--md { animation: carina-loading-icon--tail-chase-md 2450ms linear infinite; stroke-dasharray: 50; } .carina-loading-icon__tail-chaser--lg { animation: carina-loading-icon--tail-chase-lg 2450ms linear infinite; stroke-dasharray: 66; } .carina-loading-icon__gradient-color-1 { stop-color: var(--carina-background-color-tertiary); } .carina-loading-icon__gradient-color-2 { stop-color: var(--carina-background-color-primary); } .carina-loading-icon__gradient-color-3 { stop-color: var(--carina-background-color-secondary); } .carina-loading-icon__rail { stroke: var(--carina-background-color-neutral-inactive); } .carina-combobox { position: relative; box-sizing: border-box; width: 100%; font-size: var(--carina-font-size-body-md); line-height: var(--carina-line-height-normal); cursor: text; } .carina-combobox__input { display: flex; align-items: flex-start; min-height: 40px; border-radius: var(--carina-border-radius-md); color: var(--carina-text-color-base); background-color: transparent; } .carina-combobox__input--outline, .carina-combobox__input--underline { min-height: 42px; } .carina-combobox__input--grid, .carina-combobox__input--outline, .carina-combobox__input--underline { background-color: transparent; } .carina-combobox__input__element { flex: 1 0 auto; width: 80px; height: 24px; margin: var(--carina-spacing-0); padding: var(--carina-spacing-0); border: var(--carina-border-width-0) none; color: var(--carina-text-color-base); font-size: var(--carina-font-size-body-md); font-family: var(--carina-font-family-primary); background: var(--carina-colors-transparent); outline: none; } .carina-combobox__input__element:-ms-input-placeholder { color: var(--carina-text-color-soft); } .carina-combobox__input__element::placeholder { color: var(--carina-text-color-soft); } .carina-combobox__input__multiselect { display: flex; flex-wrap: wrap; width: 100%; padding-top: var(--carina-spacing-2); padding-inline-end: var(--carina-spacing-px); column-gap: var(--carina-spacing-2); padding-bottom: var(--carina-spacing-2); padding-inline-start: var(--carina-spacing-4); } .carina-combobox__input__multiselect__option { height: 24px; } .carina-combobox__input__multiselect__option__tag { display: flex; align-items: center; } .carina-combobox__input__multiselect__option__input { display: flex; flex: 1 0 auto; width: 80px; padding-inline-end: var(--carina-spacing-3); padding-inline-start: var(--carina-spacing-0); } .carina-combobox__input__multiselect__option__placeholder { position: relative; top: 1px; display: flex; flex: 1 0 auto; align-items: center; width: 80px; padding-inline-end: var(--carina-spacing-3); overflow: hidden; color: var(--carina-text-color-soft); white-space: nowrap; text-overflow: ellipsis; pointer-events: none; } .carina-combobox__input__button-group { display: flex; align-items: center; padding-top: var(--carina-spacing-0-5); padding-inline-start: var(--carina-spacing-2); padding-inline-end: var(--carina-spacing-2); } .carina-combobox__input__button-group--grid { transform: translateY(var(--carina-spacing-1-5)); } .carina-combobox__input__button-group--outline, .carina-combobox__input__button-group--underline { padding-top: calc(var(--carina-spacing-0-5) + var(--carina-spacing-px)); } .carina-combobox--grid .carina-combobox__input__button-group__item > .carina-button--icon-only { padding: var(--carina-spacing-0); min-height: unset; width: 24px; height: 24px; margin-inline-end: var(--carina-spacing-2); } .carina-combobox__input--read-only { color: var(--carina-text-color-base); border-color: var(--carina-border-color-soft); background-color: var(--carina-background-color-surface-alt); -webkit-user-select: text; -ms-user-select: text; user-select: text; } .carina-combobox__input--read-only:focus { border-color: var(--carina-border-color-primary-focus); } .carina-combobox__input--read-only:hover { cursor: not-allowed; } .carina-combobox__input--read-only .carina-button { -webkit-user-select: text; -ms-user-select: text; user-select: text; } .carina-combobox__input--read-only .carina-button:hover { cursor: not-allowed; background-color: var(--carina-colors-transparent); } .carina-combobox__input--read-only .carina-combobox__input__element { -webkit-user-select: none; -ms-user-select: none; user-select: none; } .carina-combobox__input--read-only .carina-combobox__input__element:hover { cursor: not-allowed; } .carina-combobox--grid > .carina-combobox__input--read-only, .carina-combobox--underline > .carina-combobox__input--read-only { border-radius: var(--carina-border-radius-none); } .carina-combobox__input__loader { position: relative; top: 1px; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; margin-inline-end: var(--carina-spacing-0-5); margin-inline-start: var(--carina-spacing-0-5); } .carina-combobox__virtualized__list__option { margin-inline-start: var(--carina-spacing-2); margin-inline-end: var(--carina-spacing-2); width: calc(100% - 16px); } .carina-combobox--focus .carina-combobox__input__element, .carina-combobox--focus .carina-combobox__input__multiselect__option__input { flex: 1 0 auto; width: 80px; } .carina-combobox--focus .carina-input-fieldset { border-color: var(--carina-border-color-primary); border-style: solid; border-width: var(--carina-border-width-1); outline: 0; box-shadow: var(--carina-ring-base); transition-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: border-color, box-shadow; } .carina-combobox--empty .carina-combobox__input__element, .carina-combobox--empty .carina-combobox__input__multiselect__option__input { flex: 0 0 auto; width: var(--carina-spacing-px); } .carina-combobox--error {} .carina-combobox--disabled { border-color: var(--carina-border-color-soft); color: var(--carina-text-color-disabled); cursor: default; } .carina-combobox--disabled .carina-combobox__input__element { color: var(--carina-text-color-disabled); -webkit-text-fill-color: var(--carina-text-color-disabled); cursor: default; } .carina-combobox--disabled .carina-combobox__input__button-group__item button { cursor: default; } .carina-combobox--disabled .carina-combobox__input__button { color: var(--carina-text-color-disabled); cursor: default; } .carina-combobox--disabled .carina-combobox__input__button svg, .carina-combobox--disabled .carina-combobox__input__button svg path, .carina-combobox--disabled .carina-combobox__input__button svg group { fill: currentcolor; } .carina-combobox--disabled .carina-combobox__input__multiselect__option__placeholder { color: color-mix( in srgb, var(--carina-text-color-disabled) calc(var(--carina-opacity-40) * 100%), transparent ); } .carina-combobox__input__multiselect__option:not( .carina-combobox__input__multiselect__option__input ):not(.carina-combobox__input__multiselect__option__placeholder) + .carina-combobox__input__multiselect__option__input, .carina-combobox__input__multiselect__option:not( .carina-combobox__input__multiselect__option__input ):not(.carina-combobox__input__multiselect__option__placeholder) + .carina-combobox__input__multiselect__option__placeholder { padding-inline-start: var(--carina-spacing-0-5); padding-inline-end: var(--carina-spacing-0-5); } .carina-combobox--grid.carina-combobox--focus fieldset { border-width: var(--carina-border-width-0) var(--carina-border-width-0) var(--carina-border-width-2) var(--carina-border-width-0); box-shadow: none; } .carina-combobox--grid .carina-combobox__input__multiselect { padding-top: var(--carina-spacing-0); padding-bottom: var(--carina-spacing-0); padding-inline-start: var(--carina-spacing-1); } .carina-combobox--grid .carina-combobox__input__multiselect__option { padding-top: var(--carina-spacing-0); padding-bottom: var(--carina-spacing-0); } .carina-combobox--grid .carina-combobox__input { min-height: 24px; align-items: flex-end; } .carina-combobox--grid .carina-combobox__input__button-group { padding-top: var(--carina-spacing-0); padding-inline-end: var(--carina-spacing-0); padding-bottom: var(--carina-spacing-0); } .carina-combobox--outline.carina-combobox--focus fieldset { border-width: var(--carina-border-width-2); box-shadow: none; } .carina-combobox--underline.carina-combobox--focus fieldset { border-width: var(--carina-border-width-0) var(--carina-border-width-0) var(--carina-border-width-2) var(--carina-border-width-0); box-shadow: none; } .carina-combobox__popover { color: var(--carina-text-color-base); font-size: var(--carina-font-size-body-sm); } .carina-combobox__popover * { box-sizing: border-box; } .carina-combobox__popover .carina-combobox__scrollview { padding: var(--carina-spacing-2); overflow-y: auto; } .carina-combobox__popover .carina-combobox__list__option__text { display: flex; justify-content: space-between; width: 100%; } .carina-combobox__popover .carina-combobox__list__option__check-container { display: flex; align-items: center; visibility: hidden; } .carina-combobox__popover .carina-combobox__list__option__check-icon { color: var(--carina-text-color-base); } .carina-combobox__popover .carina-combobox__list { margin: var(--carina-spacing-0); padding: var(--carina-spacing-0); line-height: var(--carina-line-height-tight); list-style-type: none; } .carina-combobox__popover .carina-combobox__list__subtext { color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-sm); } .carina-combobox__popover .carina-combobox__list__option { margin-top: var(--carina-spacing-0); margin-bottom: var(--carina-spacing-0); line-height: var(--carina-line-height-normal); padding: var(--carina-spacing-2); font-size: var(--carina-font-size-body-sm); border-radius: var(--carina-border-radius-md); color: var(--carina-text-color-base); transition-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow; } .carina-combobox__popover .carina-combobox__list__option:hover { background-color: var(--carina-background-color-surface-hover); cursor: pointer; } .carina-combobox__popover .carina-combobox__list__option:active { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-active); } .carina-combobox__popover .carina-combobox__list__option--selected, .carina-combobox__popover .carina-combobox__list__option--selected:hover, .carina-combobox__popover .carina-combobox__list__option--selected --focus { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-selected); } .carina-combobox__popover .carina-combobox__list__option--selected .carina-combobox__list__subtext, .carina-combobox__popover .carina-combobox__list__option--selected:hover .carina-combobox__list__subtext, .carina-combobox__popover .carina-combobox__list__option--selected --focus .carina-combobox__list__subtext { color: var(--carina-text-color-base); } .carina-combobox__popover .carina-combobox__list__option--selected .carina-combobox__list__option__check-icon, .carina-combobox__popover .carina-combobox__list__option--selected:hover .carina-combobox__list__option__check-icon, .carina-combobox__popover .carina-combobox__list__option--selected --focus .carina-combobox__list__option__check-icon { visibility: visible; } .carina-combobox__popover .carina-combobox__list__option--focus:not(.carina-combobox__popover .carina-combobox__list__option--selected) { background-color: var(--carina-background-color-surface-hover); } .carina-combobox__popover .carina-combobox__list__option--disabled { color: var(--carina-text-color-disabled); background-color: var(--carina-background-color-surface); } .carina-combobox__popover .carina-combobox__list__option--disabled.carina-combobox__popover .carina-combobox__list__option:hover { background-color: var(--carina-background-color-surface); } .carina-combobox__popover .carina-combobox__list__option--disabled > .carina-combobox__list__subtext { color: var(--carina-text-color-disabled); } .carina-combobox__popover .carina-combobox__list__option--disabled:hover { cursor: default; } .carina-combobox__popover .carina-combobox__list__option__create { color: var(--carina-text-color-primary); } .carina-combobox__popover .carina-combobox__list__heading { margin-top: var(--carina-spacing-1); margin-bottom: var(--carina-spacing-0-5); padding-top: var(--carina-spacing-1); padding-inline-start: var(--carina-spacing-2); padding-bottom: var(--carina-spacing-1); padding-inline-end: var(--carina-spacing-2); color: var(--carina-text-color-soft); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-2xs); font-family: var(--carina-font-family-primary); line-height: var(--carina-line-height-tight); text-transform: uppercase; } .carina-combobox__popover .carina-combobox__list__divider { margin-top: var(--carina-spacing-1); margin-bottom: var(--carina-spacing-1); border: var(--carina-border-width-0) none; border-top: var(--carina-border-width-1) solid; border-top-color: var(--carina-border-color-soft); } .carina-combobox__popover .carina-combobox__list--empty { padding-top: var(--carina-spacing-2); padding-inline-end: var(--carina-spacing-4); padding-bottom: var(--carina-spacing-2); padding-inline-start: var(--carina-spacing-4); color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-sm); font-style: italic; } .carina-combobox > .carina-comboboxinput-input-fieldset { height: calc(var(--carina-combobox-fieldset-height) + 10px); } .carina-comboboxinput-input-fieldset.carina-comboboxinput-input-fieldset--default { height: var(--carina-combobox-fieldset-height); bottom: 0px; } .carina-comboboxinput-input-fieldset.carina-comboboxinput-input-fieldset--grid { height: 24px; top: unset; bottom: 0; } .carina-comboboxinput-input-fieldset--default.carina-comboboxinput-input-fieldset--label { top: 15px; } .carina-scrim { position: fixed; top: 0; left: 0; z-index: var(--carina-z-index-scrim); display: flex; box-sizing: border-box; width: 100%; height: 100%; background-color: var(--carina-background-color-scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: var(--carina-transition-opacity); } .carina-dropdown { position: relative; display: block; box-sizing: border-box; width: 100%; font-weight: var(--carina-font-weight-body); font-family: var(--carina-font-family-primary); font-style: normal; line-height: var(--carina-line-height-normal); letter-spacing: normal; text-align: start; text-transform: none; text-indent: 0; text-shadow: none; } .carina-dropdown:focus-within > .carina-input-fieldset, .carina-dropdown.focus-in-portal > .carina-input-fieldset { border-color: var(--carina-border-color-primary-focus); border-style: solid; } .carina-dropdown--default:focus-within > .carina-input-fieldset, .carina-dropdown--default.focus-in-portal > .carina-input-fieldset { border-width: 1px; box-shadow: var(--carina-ring-base); transition-timing-function: var( --carina-transition-timing-function-productive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: border-color; } .carina-dropdown--grid { height: 24px; } .carina-dropdown--grid:focus-within > .carina-input-fieldset, .carina-dropdown--grid.focus-in-portal > .carina-input-fieldset { border-width: var(--carina-border-width-0) var(--carina-border-width-0) var(--carina-border-width-2); } .carina-dropdown--outline:focus-within > .carina-input-fieldset, .carina-dropdown--outline.focus-in-portal > .carina-input-fieldset { border-width: var(--carina-border-width-2); } .carina-dropdown--underline:focus-within > .carina-input-fieldset, .carina-dropdown--underline.focus-in-portal > .carina-input-fieldset { border-width: var(--carina-border-width-0) var(--carina-border-width-0) var(--carina-border-width-2); } .carina-dropdown--error:focus-within > .carina-input-fieldset, .carina-dropdown--error.focus-in-portal > .carina-input-fieldset { border-color: var(--carina-border-color-danger-focus); } .carina-dropdown--default.carina-dropdown--open:focus-within > .carina-input-fieldset, .carina-dropdown--default.carina-dropdown--open.focus-in-portal > .carina-input-fieldset { border-style: solid; border-width: var(--carina-border-width-1); box-shadow: var(--carina-ring-base); transition-timing-function: var( --carina-transition-timing-function-productive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: border-color; } .carina-dropdown--default.carina-dropdown--error:focus-within > .carina-input-fieldset, .carina-dropdown--default.carina-dropdown--error.focus-in-portal > .carina-input-fieldset { box-shadow: var(--carina-ring-danger); } .carina-dropdown__button { display: flex; justify-content: space-between; box-sizing: border-box; width: 100%; margin: var(--carina-spacing-0); padding: var(--carina-spacing-2) var(--carina-spacing-4); border: 0; border-radius: var(--carina-border-radius-md); color: var(--carina-text-color-base); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-md); font-family: var(--carina-font-family-primary); font-style: normal; line-height: var(--carina-line-height-normal); letter-spacing: normal; text-align: start; text-transform: none; text-indent: 0; text-shadow: none; outline: 0; cursor: pointer; appearance: none; } .carina-dropdown__button:focus, .carina-dropdown__button:active { outline: 0; } .carina-dropdown__button:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); } .carina-dropdown__button ::-moz-focus-inner { border: 0; } .carina-dropdown__button.carina-dropdown__button--read-only { color: var(--carina-text-color-base); border-color: var(--carina-border-color-soft); background-color: var(--carina-background-color-surface-alt); -webkit-user-select: text; -ms-user-select: text; user-select: text; } .carina-dropdown__button.carina-dropdown__button--read-only:focus { border-color: var(--carina-border-color-primary-focus); } .carina-dropdown__button.carina-dropdown__button--read-only:hover { cursor: not-allowed; } .carina-dropdown__button--default { height: 40px; background-color: transparent; } .carina-dropdown__button--grid { padding: var(--carina-spacing-0); border-radius: var(--carina-border-radius-none); background-color: transparent; } .carina-dropdown__button--outline { margin-top: var(--carina-spacing-2-5); background-color: transparent; } .carina-dropdown__button--underline { margin-top: var(--carina-spacing-2-5); border-radius: var(--carina-border-radius-none); background-color: transparent; } .carina-dropdown__button--disabled { color: var(--carina-text-color-disabled); pointer-events: none; } .carina-dropdown__icon { display: flex; align-items: center; justify-content: center; width: var(--carina-spacing-6); height: var(--carina-spacing-6); color: var(--carina-text-color-soft); pointer-events: none; } .carina-dropdown__placeholder { overflow: hidden; color: var(--carina-text-color-soft); white-space: nowrap; text-align: start; text-overflow: ellipsis; } .carina-dropdown__placeholder--disabled { color: color-mix( in srgb, var(--carina-text-color-soft) calc(var(--carina-opacity-40) * 100%), transparent ); pointer-events: none; } .carina-dropdown__text--grid { padding-inline-start: var(--carina-spacing-1); } .carina-dropdown__text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .carina-dropdown__text--disabled { color: var(--carina-text-color-disabled); } .carina-dropdown--default > .carina-input-fieldset { height: 40px; bottom: 0px; } .carina-dropdown--default .carina-dropdown__label { height: 20px; } .carina-dropdown--outline > .carina-input-fieldset, .carina-dropdown--underline > .carina-input-fieldset { height: calc(100% + var(--carina-spacing-2-5)); } .carina-dropdown--grid > .carina-input-fieldset { height: 100%; } .carina-dropdown__magazine { position: static; width: 100%; max-height: 192px; padding: var(--carina-spacing-2) var(--carina-spacing-0); box-shadow: none; } .carina-textbox-icon { position: absolute; bottom: 8.5px; display: block; width: var(--carina-icon-md); height: var(--carina-icon-md); color: var(--carina-text-color-soft); } .carina-textbox-icon svg { display: block; vertical-align: middle; } .carina-textbox-icon--readonly:hover { cursor: not-allowed; } .carina-textbox-icon--small { bottom: var(--carina-spacing-1-5); } .carina-textbox-icon--grid { bottom: var(--carina-spacing-1); width: var(--carina-icon-xs); height: var(--carina-icon-xs); } .carina-textbox-icon--start { inset-inline-start: var(--carina-spacing-4); } .carina-textbox-icon--start.carina-textbox-icon--grid { inset-inline-start: var(--carina-spacing-1); } .carina-textbox-icon--end { inset-inline-end: var(--carina-spacing-4); } .carina-textbox-icon--end.carina-textbox-icon--grid { inset-inline-end: var(--carina-spacing-1); } .carina-textbox__container { position: relative; box-sizing: border-box; width: 100%; } .carina-textbox__container:focus-within > fieldset { border-color: var(--carina-border-color-primary-focus); border-style: solid; border-width: var(--carina-border-width-2); transition-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: border-color; } .carina-textbox__container--default:focus-within > fieldset { border-color: var(--carina-border-color-primary-focus); outline: 0; box-shadow: var(--carina-ring-base); } .carina-textbox__container--underline { border-radius: var(--carina-border-radius-md) var(--carina-border-radius-md) 0 0; background-color: transparent; } .carina-textbox__container--underline:focus-within > fieldset { border-width: 0 0 var(--carina-border-width-2); } .carina-textbox__container--grid { border-radius: var(--carina-border-radius-md) var(--carina-border-radius-md) 0 0; background-color: transparent; } .carina-textbox__container--grid:focus-within > fieldset { border-width: 0 0 var(--carina-border-width-2); } .carina-textbox__container--outline { margin-top: var(--carina-spacing-2-5); background-color: transparent; } .carina-textbox__container--error { transition-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: border-color; } .carina-textbox__input { display: block; box-sizing: border-box; width: 100%; height: 36px; padding: 0 var(--carina-spacing-4); border: 0; border-radius: var(--carina-border-radius-md); color: var(--carina-text-color-base); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-md); font-family: var(--carina-font-family-primary); line-height: var(--carina-line-height-normal); letter-spacing: normal; text-align: start; text-transform: none; text-indent: 0; text-shadow: none; vertical-align: middle; appearance: none; } .carina-textbox__input:-ms-input-placeholder { color: var(--carina-text-color-soft); } .carina-textbox__input::placeholder { color: var(--carina-text-color-soft); } .carina-textbox__input:focus { outline: 0; } .carina-textbox__input:-ms-clear { display: none; } .carina-textbox__input:disabled { border-color: var(--carina-border-color-soft); color: var(--carina-text-color-disabled); pointer-events: none; } .carina-textbox__input:disabled:-ms-input-placeholder { color: color-mix( in srgb, var(--carina-text-color-disabled) calc(var(--carina-opacity-40) * 100%), transparent ); opacity: var(--carina-opacity-40); } .carina-textbox__input:disabled::placeholder { color: color-mix( in srgb, var(--carina-text-color-disabled) calc(var(--carina-opacity-40) * 100%), transparent ); opacity: var(--carina-opacity-40); } .carina-textbox__input--grid { height: 24px; padding-inline-start: var(--carina-spacing-1); padding-inline-end: var(--carina-spacing-1); border-radius: var(--carina-border-radius-none); background-color: transparent; } .carina-textbox__input--underline, .carina-textbox__input--outline { height: 42px; } .carina-textbox__input--default { height: 40px; margin: 0; background-color: transparent; } .carina-textbox__input--default.carina-textbox__input--small { height: 36px; padding: 0 var(--carina-spacing-3); font-size: var(--carina-font-size-xs); } .carina-textbox__input--underline { border-radius: var(--carina-border-radius-none); background-color: transparent; } .carina-textbox__input--outline { margin: var(--carina-spacing-2-5) 0 0; background-color: transparent; } .carina-textbox__input--default.carina-textbox__input--icon-end { padding-inline-end: calc(var(--carina-spacing-10) + var(--carina-spacing-1)); } .carina-textbox__input--default.carina-textbox__input--icon-start { padding-inline-start: calc( var(--carina-spacing-10) + var(--carina-spacing-1) ); } .carina-textbox__input--underline.carina-textbox__input--icon-end { padding-inline-end: calc(var(--carina-spacing-10) + var(--carina-spacing-1)); } .carina-textbox__input--underline.carina-textbox__input--icon-end:required { padding-inline-end: calc(var(--carina-spacing-9) + var(--carina-spacing-2)); } .carina-textbox__input--underline.carina-textbox__input--icon-start { padding-inline-start: calc( var(--carina-spacing-12) + var(--carina-spacing-1) ); } .carina-textbox__input--grid.carina-textbox__input--icon-end { padding-inline-end: var(--carina-spacing-6); } .carina-textbox__input--grid.carina-textbox__input--icon-start { padding-inline-start: var(--carina-spacing-6); } .carina-textbox__input--outline.carina-textbox__input--icon-end { padding-inline-end: calc(var(--carina-spacing-10) + var(--carina-spacing-1)); } .carina-textbox__input--outline.carina-textbox__input--icon-start { padding-inline-start: calc( var(--carina-spacing-10) + var(--carina-spacing-2) ); } .carina-textbox__input.carina-textbox__input--read-only { color: var(--carina-text-color-base); border-color: var(--carina-border-color-soft); background-color: var(--carina-background-color-surface-alt); -webkit-user-select: text; -ms-user-select: text; user-select: text; } .carina-textbox__input.carina-textbox__input--read-only:focus { border-color: var(--carina-border-color-primary-focus); } .carina-textbox__input.carina-textbox__input--read-only:hover { cursor: not-allowed; } .carina-textbox__container--default > .carina-input-fieldset { height: 40px; bottom: 0px; } .carina-textbox__container--grid > .carina-input-fieldset { height: 100%; } .carina-textbox__container--outline > .carina-input-fieldset, .carina-textbox__container--underline > .carina-input-fieldset { height: calc(100% + var(--carina-spacing-2-5)); } .carina-date-picker-modal__buttons { display: inline-flex; justify-content: flex-end; box-sizing: border-box; width: 100%; margin-bottom: var(--carina-spacing-4); padding-inline-end: var(--carina-spacing-4); } .carina-date-picker-modal__buttons button:first-of-type { margin-inline-end: var(--carina-spacing-4); } .carina-date-picker-popper { background-color: var(--carina-background-color-popper); color: var(--carina-text-color-body, var(--carina-text-color-base)); box-shadow: var(--carina-box-shadow-lg); } .carina-date-picker-toggle-button { position: absolute; inset-inline-end: var(--carina-spacing-0); top: 50%; transform: translate(var(--carina-spacing-1-5), -50%); } .carina-date-picker-toggle-button .carina-button--disabled { color: var(--carina-text-color-soft); opacity: unset; } .carina-date-picker-toggle-button.carina-date-picker-toggle-button--outline, .carina-date-picker-toggle-button.carina-date-picker-toggle-button--underline { transform: translate( var(--carina-spacing-1-5), calc(-50% - var(--carina-spacing-px)) ); } .carina-textbox-icon--grid > .carina-date-picker-toggle-button { transform: translateY(-50%); } .carina-textbox-icon--readonly > .carina-date-picker-toggle-button > .carina-button--disabled { color: var(--carina-text-color-soft); opacity: unset; } .carina-day-picker__nav-button-left { position: absolute; left: 0; } .carina-day-picker__nav-button-right { position: absolute; right: 0; } .carina-day-picker { --rdp-cell-size: 40px; --rdp-accent-color: var(--carina-background-color-primary); --rdp-background-color: transparent; --rdp-accent-color-dark: var(--carina-background-color-primary); --rdp-background-color-dark: transparent; --rdp-outline: none; --rdp-outline-selected: none; padding: var(--carina-spacing-4); color: var(--carina-text-color-base); font-family: var(--carina-font-family-primary); } .carina-day-picker__vhidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .carina-day-picker__button-reset { position: relative; margin: 0; padding: 0; color: inherit; font: inherit; background: none; outline: none; cursor: default; appearance: none; } .carina-day-picker__button { border: 2px solid transparent; } .carina-day-picker__button[aria-disabled='true'] { opacity: 0.25; pointer-events: none; } .carina-day-picker__button:not([aria-disabled='true'], .carina-day-picker__day--disabled) { cursor: pointer; } .carina-day-picker__button:hover:not([aria-disabled='true'], .carina-day-picker__day--disabled) { border: var(--carina-border-width-2) solid var(--carina-border-color-primary-focus); border-radius: var(--carina-border-radius-xl); } .carina-day-picker__months { display: flex; } .carina-day-picker__month { margin: 0 1rem; } .carina-day-picker__month .carina-day-picker__caption-start { margin-left: 0; } .carina-day-picker__month .carina-day-picker__caption-end { margin-right: 0; } .carina-day-picker__table { max-width: calc(var(--rdp-cell-size) * 7); margin: 0; border-collapse: collapse; } .carina-day-picker__with-week-number .carina-day-picker__table { max-width: calc(var(--rdp-cell-size) * 8); border-collapse: collapse; } .carina-day-picker__caption { position: relative; display: flex; align-items: center; justify-content: center; padding: 0; text-align: left; } .carina-day-picker__multiple-months .carina-day-picker__caption { position: relative; display: block; text-align: center; } .carina-day-picker__caption-dropdowns { position: relative; display: inline-flex; gap: var(--carina-spacing-2); width: 100%; } .carina-day-picker__caption-label { position: relative; z-index: calc(var(--carina-z-index-current, 1) + 10); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; margin: 0; padding: 0 0.25rem; border: 0; border: 2px solid transparent; color: var(--carina-text-color-heading, var(--carina-text-color-base)); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-lg); line-height: var(--carina-line-height-display-sm); font-family: inherit; white-space: nowrap; } .carina-day-picker__nav { white-space: nowrap; } .carina-day-picker__multiple-months .carina-day-picker__caption-start .carina-day-picker__nav { position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .carina-day-picker__multiple-months .carina-day-picker__caption-end .carina-day-picker__nav { position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .carina-day-picker__nav-button { display: none; } .carina-day-picker__dropdown-year, .carina-day-picker__dropdown-month { position: relative; display: inline-flex; align-items: center; } .carina-day-picker__dropdown-month { flex-grow: 1; } .carina-day-picker__dropdown { position: absolute; top: 0; bottom: 0; left: 0; z-index: calc(var(--carina-z-index-current, 1) + 20); width: 100%; margin: 0; padding: 0; border: 0; font-size: inherit; font-family: inherit; line-height: inherit; background-color: transparent; cursor: inherit; opacity: 0; appearance: none; } .carina-day-picker__dropdown:focus-visible:not([disabled]) + .carina-day-picker__caption-label { outline: none; box-shadow: var(--carina-ring-base); } .carina-day-picker__dropdown[disabled] { color: unset; opacity: unset; } .carina-day-picker__dropdown:focus:not([disabled]) + .carina-day-picker__caption-label, .carina-day-picker__dropdown:active:not([disabled]) + .carina-day-picker__caption-label { border-radius: 6px; background-color: var(--rdp-background-color); } .carina-day-picker__dropdown-icon { margin: 0 0 0 5px; } .carina-day-picker__head { border: 0; } .carina-day-picker__head-row, .carina-day-picker__row { height: 100%; } tbody tr.carina-day-picker__row { border-bottom: 0; } .carina-day-picker__head-cell { height: 100%; height: var(--rdp-cell-size); padding: 0; color: var(--carina-text-color-soft); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-sm); text-align: center; text-transform: none; vertical-align: middle; } .carina-day-picker__tbody { border: 0; } .carina-day-picker__tfoot { margin: 0.5rem; } .carina-day-picker__cell { width: var(--rdp-cell-size); height: 100%; height: var(--rdp-cell-size); padding: 0; position: relative; text-align: center; } .carina-day-picker__week-number { font-size: var(--carina-font-size-body-2xs); } .carina-day-picker__week-number, .carina-day-picker__day { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--rdp-cell-size); max-width: var(--rdp-cell-size); height: var(--rdp-cell-size); margin: 0; padding: 1px; border: 2px solid transparent; border-radius: var(--carina-border-radius-xl); overflow: hidden; } .carina-day-picker__week-number:focus-visible, .carina-day-picker__day:focus-visible { outline-width: 3px; outline-style: solid; outline-color: var(--carina-text-color-on-primary); outline-offset: -6px; } .carina-day-picker__week-number:not(.carina-day-picker__week-number--selected):focus-visible, .carina-day-picker__day:not(.carina-day-picker__day--selected):focus-visible { outline-width: 0px; border-color: var(--carina-border-color-primary-focus); } .carina-day-picker__week-number--selected:focus-visible, .carina-day-picker__day--selected:focus-visible { outline-color: var(--carina-text-color-on-primary); } .carina-day-picker__day--today { position: relative; } .carina-day-picker__day--today:not(.carina-day-picker__day--outside) { font-weight: var(--carina-font-weight-display); } .carina-day-picker__cell:has(.carina-day-picker__day--today)::after { position: absolute; top: 75%; left: 30%; width: 40%; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: var(--carina-border-color-secondary-focus); border-radius: var(--carina-border-radius-full); content: ''; pointer-events: none; } .carina-day-picker__cell:has(.carina-day-picker__day--selected.carina-day-picker__day--today)::after { border-bottom-color: var(--carina-text-color-on-primary); } .carina-day-picker__day--selected { border-radius: var(--carina-border-radius-xl); border-width: var(--carina-border-width-1); border-style: solid; border-color: var(--carina-border-color-primary-focus); } .carina-day-picker__day--selected, .carina-day-picker__day--selected:focus, .carina-day-picker__day--selected:active, .carina-day-picker__day--selected:hover:not(.carina-day-picker__day--range-middle) { border: 1px solid var(--carina-border-color-primary-focus); color: var(--carina-text-color-on-primary); background-color: var(--rdp-accent-color); } .carina-day-picker__day--disabled { color: var(--carina-text-color-disabled); } .carina-day-picker__day--selected.carina-day-picker__day--disabled { color: var(--carina-text-color-on-primary); opacity: var(--carina-opacity-40); } .carina-day-picker__day--range-start:not(.carina-day-picker__day--range-end) { border-start-end-radius: var(--carina-border-radius-none); border-end-end-radius: var(--carina-border-radius-none); } .carina-day-picker__day--range-start:not(.carina-day-picker__day--range-end):hover { border-start-end-radius: var(--carina-border-radius-none); border-end-end-radius: var(--carina-border-radius-none); } .carina-day-picker__day--range-end:not(.carina-day-picker__day--range-start) { border-start-start-radius: var(--carina-border-radius-none); border-end-start-radius: var(--carina-border-radius-none); } .carina-day-picker__day--range-end:not(.carina-day-picker__day--range-start):hover { border-start-start-radius: var(--carina-border-radius-none); border-end-start-radius: var(--carina-border-radius-none); } .carina-day-picker__day--range-middle.carina-day-picker__day--selected { border-radius: var(--carina-border-radius-none); color: var(--carina-text-color-on-primary-pale); background-color: var(--carina-background-color-primary-pale); border-color: var(--carina-colors-transparent); } .carina-day-picker__day--range-middle.carina-day-picker__day--selected:hover { border-radius: var(--carina-border-radius-none); border-color: var(--carina-border-color-primary-focus); } .carina-day-picker__day--range-middle.carina-day-picker__day--selected:focus-visible { outline-width: var(--carina-border-width-2); outline-color: var(--carina-border-color-hard); outline-offset: calc(-1 * var(--carina-border-width-2)); } .carina-day-picker__day--range-middle.carina-day-picker__day--selected.carina-day-picker__day--disabled { opacity: var(--carina-opacity-40); } .carina-date-range-picker { position: relative; box-sizing: border-box; width: 100%; border: 0; margin-inline: var(--carina-spacing-0); padding-block: var(--carina-spacing-0); padding-inline: var(--carina-spacing-0); min-inline-size: var(--carina-spacing-0); } .carina-date-range-picker--outline input { margin-top: var(--carina-spacing-0); } .carina-date-range-picker--all-labels.carina-date-range-picker--outline { margin-top: 29.5px; } .carina-date-range-picker--all-labels.carina-date-range-picker--outline legend { top: -29.5px; } .carina-date-range-picker--all-labels.carina-date-range-picker--underline { margin-top: 29.5px; } .carina-date-range-picker--all-labels.carina-date-range-picker--underline legend { top: -29.5px; } .carina-date-range-picker--only-top-label.carina-date-range-picker--outline { margin-top: 10px; } .carina-date-range-picker__textbox-wrapper { display: flex; align-items: flex-end; } .carina-date-range-picker__separator { display: flex; color: var(--carina-text-color-base); align-items: center; align-self: flex-end; padding-right: var(--carina-spacing-2); padding-left: var(--carina-spacing-2); } .carina-date-range-picker__separator--default { height: 40px; } .carina-date-range-picker__separator--outline { height: 42px; margin-top: 10px; } .carina-date-range-picker__separator--underline { height: 42px; } .carina-date-range-picker__separator--grid { height: 24px; } .block { display: block; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .carina-file-upload__dropzone { display: flex; align-items: center; justify-content: center; margin-bottom: var(--carina-spacing-2); border-color: var(--carina-border-color-base); border-style: dashed; border-width: var(--carina-border-width-2); border-radius: var(--carina-border-radius-xl); cursor: pointer; transition-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: border-color; } .carina-file-upload__dropzone:focus, .carina-file-upload__dropzone:focus-within { border-color: var(--carina-border-color-primary-focus); border-style: solid; outline: none; } .carina-file-upload__dropzone--disabled { cursor: default; border-color: var(--carina-border-color-soft); } .carina-file-upload__dropzone--list-first { margin-top: var(--carina-spacing-6); } .carina-file-upload { position: relative; width: 100%; max-width: 400px; font-family: var(--carina-font-family-primary); line-height: var(--carina-line-height-normal); } .carina-file-upload--large { max-width: 992px; } .carina-file-upload--block { max-width: none; } .carina-file-upload__drop-area { padding: var(--carina-spacing-0) var(--carina-spacing-4); } .carina-file-upload__drop-area--large { padding-bottom: var(--carina-spacing-8); text-align: center; } .carina-file-upload__header { margin: var(--carina-spacing-6) var(--carina-spacing-0); color: var(--carina-text-color-heading, var(--carina-text-color-base)); font-size: var(--carina-font-size-display-xs); } .carina-file-upload__header--disabled { color: var(--carina-text-color-disabled); } .carina-file-upload__upload { margin: 31px 0; color: var(--carina-text-color-primary); font-size: var(--carina-font-size-body-sm); } .carina-file-upload__upload > * { margin-inline-end: var(--carina-spacing-2); } .carina-file-upload__upload > svg { position: relative; top: var(--carina-spacing-0-5); display: inline; color: var(--carina-text-color-base); vertical-align: unset; } .carina-file-upload__upload--large { margin-bottom: var(--carina-spacing-2); color: var(--carina-text-color-base); } .carina-file-upload__upload--disabled { color: var(--carina-text-color-disabled); } .carina-file-upload__upload--disabled > svg { color: var(--carina-text-color-soft); } .carina-file-upload__upload--large.carina-file-upload__upload--disabled { color: var(--carina-text-color-disabled); } .carina-file-upload__drop-area-labels-container { margin: var(--carina-spacing-2) var(--carina-spacing-0) var(--carina-spacing-4); } .carina-file-upload__accepted-files { color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-2xs); padding-bottom: var(--carina-spacing-1); } .carina-file-upload__file-limit { color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-2xs); } .carina-file-upload__button-container { display: flex; justify-content: center; width: 100%; margin-top: var(--carina-spacing-4); } .carina-file-upload__action-bar { display: flex; justify-content: space-between; max-width: 400px; margin-top: var(--carina-spacing-4); font-size: var(--carina-font-size-body-sm); } .carina-file-upload__action-bar--list-first { margin-top: var(--carina-spacing-0); } .carina-file-upload__remove-all { box-sizing: border-box; padding: 0; border: 0; color: var(--carina-text-color-primary); font-family: inherit; font-size: var(--carina-font-size-body-2xs); line-height: inherit; background-color: var(--carina-colors-transparent); cursor: pointer; transition-timing-function: var( --carina-transition-timing-function-productive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow; appearance: none; } .carina-file-upload__remove-all:hover { text-decoration: underline; } .carina-file-upload__remove-all:focus { outline: 0; } .carina-file-upload__remove-all:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); } .carina-file-upload__remove-all:focus, .carina-file-upload__remove-all:focus-visible { box-shadow: var(--carina-ring-base); } .carina-file-upload__file-list { max-width: 400px; max-height: calc( 42px * 10 + 8px ); margin: var(--carina-spacing-0); padding: var(--carina-spacing-0); padding-top: var(--carina-spacing-2); overflow-y: auto; list-style: none; } .carina-file-upload__file { position: relative; display: flex; align-items: center; min-width: 296px; height: 42px; box-sizing: border-box; border-color: var(--carina-border-color-soft); border-width: var(--carina-border-width-1); border-radius: var(--carina-border-radius-xl); border-style: solid; color: var(--carina-text-color-primary); font-size: var(--carina-font-size-body-sm); line-height: 32px; padding-inline-start: var(--carina-spacing-3); padding-inline-end: var(--carina-spacing-2); } .carina-file-upload__file:not(:last-of-type) { margin-bottom: var(--carina-spacing-2); } .carina-file-upload__name { display: flex; flex-grow: 1; justify-content: flex-start; max-width: 100%; overflow: hidden; color: var(--carina-text-color-primary); font-weight: var(--carina-font-weight-body); direction: ltr; text-align: start; text-decoration: none; } .carina-file-upload__name-start { overflow: hidden; white-space: pre; text-overflow: ellipsis; } .carina-file-upload__name-end { white-space: pre; } .carina-file-upload-read-only { width: 100%; font-family: var(--carina-font-family-primary); line-height: var(--carina-line-height-normal); text-align: start; } .carina-file-upload-read-only__content { position: relative; display: flex; flex-direction: column; font-weight: 300; } .carina-file-upload-read-only__content--1-cols { max-width: calc(400px * 1); } .carina-file-upload-read-only__content--2-cols { max-width: calc(400px * 2); } .carina-file-upload-read-only__content--3-cols { max-width: calc(400px * 3); } .carina-file-upload-read-only__content--4-cols { max-width: calc(400px * 4); } .carina-file-upload-read-only__content--5-cols { max-width: calc(400px * 5); } .carina-file-upload-read-only__content--6-cols { max-width: calc(400px * 6); } .carina-file-upload-read-only__content--7-cols { max-width: calc(400px * 7); } .carina-file-upload-read-only__content--8-cols { max-width: calc(400px * 8); } .carina-file-upload-read-only__content--9-cols { max-width: calc(400px * 9); } .carina-file-upload-read-only__content--10-cols { max-width: calc(400px * 10); } .carina-file-upload-read-only__attachment-count { color: var(--carina-text-color-body, var(--carina-text-color-base)); font-size: var(--carina-font-size-body-md); } .carina-file-upload-read-only__download-all { align-self: flex-end; box-sizing: border-box; padding: var(--carina-spacing-0); border: 0; color: var(--carina-text-color-primary); font-family: inherit; font-weight: revert; font-size: var(--carina-font-size-body-2xs); line-height: revert; background-color: transparent; cursor: pointer; transition-timing-function: var( --carina-transition-timing-function-productive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow; appearance: none; } .carina-file-upload-read-only__download-all:hover { text-decoration: underline; } .carina-file-upload-read-only__download-all:focus { outline: 0; } .carina-file-upload-read-only__download-all:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); } .carina-file-upload-read-only__download-all:focus, .carina-file-upload-read-only__download-all:focus-visible { box-shadow: var(--carina-ring-base); } .carina-file-upload-read-only__header { display: flex; justify-content: space-between; box-sizing: border-box; width: 100%; margin-bottom: var(--carina-spacing-4); padding-inline-end: var(--carina-spacing-3); } .carina-file-upload-read-only__show-all { align-self: flex-end; box-sizing: border-box; border: var(--carina-border-width-2) solid var(--carina-colors-transparent); color: var(--carina-text-color-primary); font-family: inherit; font-weight: revert; font-size: var(--carina-font-size-body-2xs); line-height: revert; background-color: transparent; cursor: pointer; transition-timing-function: var( --carina-transition-timing-function-productive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow; appearance: none; padding-inline: var(--carina-spacing-2-5); } .carina-file-upload-read-only__show-all:hover { text-decoration: underline; } .carina-file-upload-read-only__show-all:focus { outline: 0; } .carina-file-upload-read-only__show-all:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); } .carina-file-upload-read-only__show-all:focus, .carina-file-upload-read-only__show-all:focus-visible { box-shadow: var(--carina-ring-base); } .carina-file-upload-read-only__wrapper { max-height: calc(6 * (56px + 12px)); } .carina-file-upload-read-only__file-list { display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; height: 100%; max-height: calc(6 * (56px + 12px)); } .carina-file-upload-read-only__wrapper-remaining { max-height: none; } .carina-file-upload-read-only__file-list-remaining { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; height: 100%; max-height: none; } .carina-file-upload-read-only__file-item { box-sizing: border-box; min-width: 266px; max-width: 400px; padding-top: var(--carina-spacing-2-5); padding-inline-end: var(--carina-spacing-3); padding-bottom: 12px; padding-inline-start: var(--carina-spacing-0); font-family: var(--carina-font-family-primary); } .carina-file-upload-read-only__file-item--1-cols { width: calc(100% / 1); } .carina-file-upload-read-only__file-item--2-cols { width: calc(100% / 2); } .carina-file-upload-read-only__file-item--3-cols { width: calc(100% / 3); } .carina-file-upload-read-only__file-item--4-cols { width: calc(100% / 4); } .carina-file-upload-read-only__file-item--5-cols { width: calc(100% / 5); } .carina-file-upload-read-only__file-item--6-cols { width: calc(100% / 6); } .carina-file-upload-read-only__file-item--7-cols { width: calc(100% / 7); } .carina-file-upload-read-only__file-item--8-cols { width: calc(100% / 8); } .carina-file-upload-read-only__file-item--9-cols { width: calc(100% / 9); } .carina-file-upload-read-only__file-item--10-cols { width: calc(100% / 10); } .carina-file-upload-read-only__paper-container { position: relative; box-sizing: border-box; border-color: var(--carina-border-color-soft); border-style: solid; border-width: var(--carina-border-width-1); border-radius: var(--carina-border-radius-xl); color: var(--carina-text-color-body, var(--carina-text-color-base)); background-color: var(--carina-background-color-surface); } .carina-file-upload-read-only__file-content { position: relative; display: flex; align-items: center; box-sizing: border-box; height: 56px; padding: var(--carina-spacing-2); } .carina-file-upload-read-only__thumbnail { flex-shrink: 0; width: calc(56px - 1rem); height: calc(56px - 1rem); } .carina-file-upload-read-only__details { display: flex; flex-direction: column; flex-grow: 1; align-items: flex-start; margin-top: calc(-1 * var(--carina-spacing-4)); padding: var(--carina-spacing-4) var(--carina-spacing-2) var(--carina-spacing-0); overflow-x: hidden; } .carina-file-upload-read-only__name { display: flex; justify-content: flex-start; max-width: 100%; margin-bottom: var(--carina-spacing-1); overflow-x: hidden; color: var(--carina-text-color-primary); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-md); direction: ltr; text-decoration: none; transition-timing-function: var( --carina-transition-timing-function-productive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow; } .carina-file-upload-read-only__name:focus, .carina-file-upload-read-only__name:focus-visible { outline: 0; box-shadow: var(--carina-ring-base); } .carina-file-upload-read-only__name-start { overflow: hidden; white-space: pre; text-overflow: ellipsis; } .carina-file-upload-read-only__name-end { white-space: pre; } .carina-file-upload-read-only__date-and-size { display: flex; flex-direction: row; margin: var(--carina-spacing-0) calc(-1 * var(--carina-spacing-2)); } .carina-file-upload-read-only__date-and-size div:not(:first-of-type) { border-style: solid; border-inline-start-width: var(--carina-border-width-1); border-inline-start-color: var(--carina-border-color-soft); font-weight: var(--carina-font-weight-body); } .carina-file-upload-read-only__date { padding: var(--carina-spacing-0) var(--carina-spacing-2); color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-2xs); } .carina-file-upload-read-only__size { padding: var(--carina-spacing-0) var(--carina-spacing-2); color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-2xs); } .carina-file-upload-read-only__menu:hover { background-color: var(--carina-background-color-surface); } .carina-file-upload-read-only__menu:focus { box-shadow: 0 0.5rem 1.25rem 0 rgb(0 0 0 / 6%), var(--carina-ring-base); } .carina-tag { display: inline-flex; align-items: center; box-sizing: border-box; padding: var(--carina-spacing-1); border-color: var(--carina-tag-border-color, var(--carina-border-color-soft)); border-style: solid; border-width: var(--carina-border-width-1); border-radius: var(--carina-border-radius-full); color: var(--carina-text-color-base); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-2xs); font-family: var(--carina-font-family-primary); line-height: var(--carina-line-height-normal); background-color: var( --carina-tag-background-color, var(--carina-background-color-surface-alt) ); transition: background-color var(--carina-transition-timing-function-productive-ease-in) var(--carina-transition-duration-100), border-color var(--carina-transition-timing-function-productive-ease-in) var(--carina-transition-duration-100), color var(--carina-transition-timing-function-productive-ease-in) var(--carina-transition-duration-100), box-shadow var(--carina-transition-timing-function-productive-ease-in) var(--carina-transition-duration-100); } .carina-tag--clickable { border-color: var(--carina-tag-border-color, var(--carina-border-color-base)); cursor: pointer; } .carina-tag--clickable:hover { background-color: var( --carina-tag-background-hover, var(--carina-background-color-surface-hover) ); } .carina-tag--clickable:active { background-color: var( --carina-tag-background-active, var(--carina-background-color-surface-active) ); color: var(--carina-text-color-base); } .carina-tag--clickable:focus { outline: none; } .carina-tag--clickable:focus-visible { box-shadow: var(--carina-tag-focus-ring, var(--carina-ring-base)); } .carina-tag--dismissible { border-color: var(--carina-tag-border-color, var(--carina-border-color-base)); } .carina-tag--dismissible.carina-tag--small { padding-inline-start: var(--carina-spacing-1); padding-inline-end: var(--carina-spacing-0); } .carina-tag--small { height: 20px; } .carina-tag--medium { height: 28px; } .carina-tag--large { height: 32px; } .carina-tag--disabled { opacity: var(--carina-opacity-40); pointer-events: none; } .carina-tag--outline.carina-tag--clickable, .carina-tag--outline.carina-tag--dismissible { border-color: var( --carina-tag-border-color, var(--carina-border-color-primary) ); color: var(--carina-tag-text-inverse, var(--carina-text-color-primary)); background-color: transparent; } .carina-tag--clickable.carina-tag--outline:hover { color: var(--carina-tag-text-hover, var(--carina-text-color-on-primary)); background-color: var( --carina-tag-background-hover, var(--carina-background-color-primary-hover) ); } .carina-tag--clickable.carina-tag--outline:active { color: var(--carina-tag-text-active, var(--carina-text-color-on-primary)); background-color: var( --carina-tag-background-active, var(--carina-background-color-primary-active) ); } .carina-tag__dismiss-button { display: flex; align-items: center; justify-content: center; padding: var(--carina-spacing-0); border-width: 0; border-radius: var(--carina-border-radius-full); color: var(--carina-text-color-base); background-color: var(--carina-colors-transparent); cursor: pointer; transition: background-color var(--carina-transition-timing-function-productive-ease-in) var(--carina-transition-duration-100), border-color var(--carina-transition-timing-function-productive-ease-in) var(--carina-transition-duration-100), color var(--carina-transition-timing-function-productive-ease-in) var(--carina-transition-duration-100), box-shadow var(--carina-transition-timing-function-productive-ease-in) var(--carina-transition-duration-100); } .carina-tag__dismiss-button:hover { background-color: var( --carina-tag-background-hover, var(--carina-background-color-surface-hover) ); } .carina-tag__dismiss-button:active { background-color: var( --carina-tag-background-active, var(--carina-background-color-surface-active) ); } .carina-tag__dismiss-button:focus { outline: 0; } .carina-tag__dismiss-button:focus-visible { box-shadow: var(--carina-tag-focus-ring, var(--carina-ring-base)); } .carina-tag__dismiss-button--disabled { pointer-events: none; } .carina-tag__dismiss-button--small { width: 18px; height: 18px; margin-inline-start: -1px; } .carina-tag__dismiss-button--medium { width: 20px; height: 20px; } .carina-tag__dismiss-button--large { width: 24px; height: 24px; } .carina-tag__dismiss-button--outline { color: var(--carina-tag-text-inverse, var(--carina-text-color-primary)); } .carina-tag__dismiss-button--outline:hover { color: var(--carina-tag-text-hover, var(--carina-text-color-on-primary)); background-color: var( --carina-tag-background-hover, var(--carina-background-color-primary-hover) ); } .carina-tag__dismiss-button--outline:active { color: var(--carina-tag-text-active, var(--carina-text-color-on-primary)); background-color: var( --carina-tag-background-active, var(--carina-background-color-primary-active) ); } .carina-tag__indicator { width: 10px; height: 10px; border-radius: var(--carina-border-radius-full); } .carina-tag__indicator--brand, .carina-tag__indicator--primary { background-color: var(--carina-background-color-primary); } .carina-tag__indicator--accent, .carina-tag__indicator--secondary { background-color: var(--carina-background-color-secondary); } .carina-tag__indicator--danger { background-color: var(--carina-background-color-danger); } .carina-tag__indicator--interactive { background-color: var(--carina-background-color-primary); } .carina-tag__indicator--success { background-color: var(--carina-background-color-success); } .carina-tag__indicator--tertiary { background-color: var(--carina-background-color-tertiary); } .carina-tag__indicator--warning { background-color: var(--carina-background-color-warning); } .carina-tag__label { padding: var(--carina-spacing-0) var(--carina-spacing-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .carina-tag__offset { display: flex; align-items: center; justify-content: center; margin-inline-start: var(--carina-spacing-2); } .carina-tag--clickable.carina-tag--outline.carina-tag--color-1, .carina-tag--dismissible.carina-tag--outline.carina-tag--color-1 { background-color: var(--carina-colors-transparent); } .carina-tag--clickable.carina-tag--color-1, .carina-tag--dismissible.carina-tag--color-1 { border-color: var(--carina-colors-accessory-0-20); color: var(--carina-text-color-base); background-color: var(--carina-colors-accessory-0-20); } .carina-tag--clickable.carina-tag--color-1, .carina-tag--color-1 .carina-tag__dismiss-button { color: var(--carina-text-color-base); } .carina-tag--clickable.carina-tag--color-1:hover, .carina-tag--clickable.carina-tag--color-1:active, .carina-tag--color-1 .carina-tag__dismiss-button:hover, .carina-tag--color-1 .carina-tag__dismiss-button:active { border-color: var(--carina-colors-accessory-0-30); color: var(--carina-text-color-base); background-color: var(--carina-colors-accessory-0-30); } .carina-tag--clickable.carina-tag--outline.carina-tag--color-2, .carina-tag--dismissible.carina-tag--outline.carina-tag--color-2 { background-color: var(--carina-colors-transparent); } .carina-tag--clickable.carina-tag--color-2, .carina-tag--dismissible.carina-tag--color-2 { border-color: var(--carina-colors-accessory-1-20); color: var(--carina-text-color-base); background-color: var(--carina-colors-accessory-1-20); } .carina-tag--clickable.carina-tag--color-2, .carina-tag--color-2 .carina-tag__dismiss-button { color: var(--carina-text-color-base); } .carina-tag--clickable.carina-tag--color-2:hover, .carina-tag--clickable.carina-tag--color-2:active, .carina-tag--color-2 .carina-tag__dismiss-button:hover, .carina-tag--color-2 .carina-tag__dismiss-button:active { border-color: var(--carina-colors-accessory-1-30); color: var(--carina-text-color-base); background-color: var(--carina-colors-accessory-1-30); } .carina-tag--clickable.carina-tag--outline.carina-tag--color-3, .carina-tag--dismissible.carina-tag--outline.carina-tag--color-3 { background-color: var(--carina-colors-transparent); } .carina-tag--clickable.carina-tag--color-3, .carina-tag--dismissible.carina-tag--color-3 { border-color: var(--carina-colors-accessory-2-20); color: var(--carina-text-color-base); background-color: var(--carina-colors-accessory-2-20); } .carina-tag--clickable.carina-tag--color-3, .carina-tag--color-3 .carina-tag__dismiss-button { color: var(--carina-text-color-base); } .carina-tag--clickable.carina-tag--color-3:hover, .carina-tag--clickable.carina-tag--color-3:active, .carina-tag--color-3 .carina-tag__dismiss-button:hover, .carina-tag--color-3 .carina-tag__dismiss-button:active { border-color: var(--carina-colors-accessory-2-30); color: var(--carina-text-color-base); background-color: var(--carina-colors-accessory-2-30); } .carina-tag--clickable.carina-tag--outline.carina-tag--color-4, .carina-tag--dismissible.carina-tag--outline.carina-tag--color-4 { background-color: var(--carina-colors-transparent); } .carina-tag--clickable.carina-tag--color-4, .carina-tag--dismissible.carina-tag--color-4 { border-color: var(--carina-colors-accessory-3-20); color: var(--carina-text-color-base); background-color: var(--carina-colors-accessory-3-20); } .carina-tag--clickable.carina-tag--color-4, .carina-tag--color-4 .carina-tag__dismiss-button { color: var(--carina-text-color-base); } .carina-tag--clickable.carina-tag--color-4:hover, .carina-tag--clickable.carina-tag--color-4:active, .carina-tag--color-4 .carina-tag__dismiss-button:hover, .carina-tag--color-4 .carina-tag__dismiss-button:active { border-color: var(--carina-colors-accessory-3-30); color: var(--carina-text-color-base); background-color: var(--carina-colors-accessory-3-30); } .carina-tag--clickable.carina-tag--outline.carina-tag--color-5, .carina-tag--dismissible.carina-tag--outline.carina-tag--color-5 { background-color: var(--carina-colors-transparent); } .carina-tag--clickable.carina-tag--color-5, .carina-tag--dismissible.carina-tag--color-5 { border-color: var(--carina-colors-accessory-4-20); color: var(--carina-text-color-base); background-color: var(--carina-colors-accessory-4-20); } .carina-tag--clickable.carina-tag--color-5, .carina-tag--color-5 .carina-tag__dismiss-button { color: var(--carina-text-color-base); } .carina-tag--clickable.carina-tag--color-5:hover, .carina-tag--clickable.carina-tag--color-5:active, .carina-tag--color-5 .carina-tag__dismiss-button:hover, .carina-tag--color-5 .carina-tag__dismiss-button:active { border-color: var(--carina-colors-accessory-4-30); color: var(--carina-text-color-base); background-color: var(--carina-colors-accessory-4-30); } .carina-multi-select__filter-area { padding: var(--carina-spacing-4); border-bottom: var(--carina-border-width-1) solid var(--carina-border-color-soft); } .carina-multi-select__filter-area-button { box-sizing: border-box; border: var(--carina-border-width-2) solid var(--carina-colors-transparent); color: var(--carina-text-color-primary); font-size: var(--carina-font-size-body-xs); font-family: var(--carina-font-family-primary); line-height: inherit; background-color: var(--carina-colors-transparent); cursor: pointer; transition-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow; appearance: none; padding-inline-start: var(--carina-spacing-2-5); padding-inline-end: var(--carina-spacing-2-5); } .carina-multi-select__filter-area-button:hover { text-decoration: underline; } .carina-multi-select__filter-area-button:focus { outline: 0; } .carina-multi-select__filter-area-button:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); } .carina-multi-select__filter-area-button:focus, .carina-multi-select__filter-area-button:focus-visible { box-shadow: var(--carina-ring-base); } .carina-multi-select__filter-area-button-container { display: flex; flex-grow: 0; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding-top: var(--carina-spacing-4); color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-xs); font-family: var(--carina-font-family-primary); margin-inline-start: calc(-1 * var(--carina-spacing-2-5)); margin-inline-end: calc(-1 * var(--carina-spacing-2-5)); } .carina-multi-select__item-renderer { position: relative; left: var(--carina-spacing-2); display: flex; align-items: center; box-sizing: border-box; padding: var(--carina-spacing-0-5) var(--carina-spacing-2); border: 0; border-radius: var(--carina-border-radius-md); color: var(--carina-text-color-base); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-sm); font-family: var(--carina-font-family-primary); line-height: inherit; background-color: var(--carina-background-color-popper); outline: none; cursor: pointer; appearance: none; } .carina-multi-select__item-renderer:hover { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-hover); } .carina-multi-select__item-renderer:active { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-selected); } .carina-multi-select__item-renderer--selected { border: 0; color: var(--carina-text-color-base); } .carina-multi-select__item-renderer--selected:hover { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-hover); } .carina-multi-select__item-renderer--heading { padding: var(--carina-spacing-2); color: var(--carina-text-color-soft); font-weight: var(--carina-font-weight-display); font-size: var(--carina-font-size-body-2xs); text-transform: uppercase; -webkit-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; } .carina-multi-select__item-renderer--focus { background-color: var(--carina-background-color-surface-hover); } .carina-multi-select__item-renderer--keyboard-focus { box-shadow: inset 0 0 0 var(--carina-border-width-2) var(--carina-border-color-base); } .carina-multi-select__item-renderer--disabled { color: var(--carina-text-color-disabled); pointer-events: none; } .carina-multi-select__item-renderer-icon-space { display: flex; flex-grow: 0; flex-shrink: 0; align-items: center; justify-content: center; height: 16px; pointer-events: none; } .carina-multi-select__item-renderer-highlight-label { flex-grow: 0; flex-shrink: 0; color: var(--carina-background-color-primary); font-weight: var(--carina-font-weight-display); letter-spacing: -0.3px; } .carina-multi-select__item-renderer-highlight-label--focus { color: var(--carina-background-color-primary); } .carina-multi-select__item-renderer-label-container { width: 100%; overflow: hidden; font-size: var(--carina-font-size-body-sm); white-space: nowrap; text-align: left; text-overflow: ellipsis; background-color: var(--carina-colors-transparent); pointer-events: none; padding-inline-start: var(--carina-spacing-2); padding-inline-end: var(--carina-spacing-2); } [dir='rtl'] .carina-multi-select__item-renderer-label-container { text-align: right; } .carina-multi-select__selected-indicator { flex-grow: 0; flex-shrink: 0; box-sizing: border-box; width: 16px; height: 16px; border-color: var(--carina-border-color-base); border-style: solid; border-width: var(--carina-border-width-1); border-radius: var(--carina-border-radius-sm); } .carina-multi-select__selected-indicator--disabled { border-color: var(--carina-border-color-soft); } .carina-multi-select__selected-indicator--selected { border-color: var(--carina-colors-transparent); background-color: var(--carina-background-color-primary); } .carina-multi-select__selected-indicator--selected--disabled { background-color: var(--carina-background-color-primary); } .carina-multi-select__selected-indicator-check { fill: var(--carina-text-color-base-inverse); } .carina-multi-select .carina-popper { border-radius: var(--carina-border-radius-xl); } .carina-pseudo-focus { display: flex; flex-direction: column; width: 300px; min-width: 296px; max-width: 100vw; height: 400px; max-height: calc(100vh - 10px); border-radius: var(--carina-border-radius-xl); overflow: hidden; background-color: var(--carina-background-color-popper); outline: none; } .carina-pseudo-focus__auto-sizer-inner-element { padding-top: var(--carina-spacing-2); padding-bottom: var(--carina-spacing-2); } .carina-pseudo-focus__auto-sizer-container { height: 100%; } .carina-container { box-sizing: border-box; width: 100%; margin-right: auto; margin-left: auto; } .carina-container--normal { container-type: normal; } .carina-container--size { container-type: size; } .carina-container--inline-size { container-type: inline-size; } .carina-container--sm { max-width: var(--carina-breakpoint-sm); } .carina-container--md { max-width: var(--carina-breakpoint-md); } .carina-container--lg { max-width: var(--carina-breakpoint-lg); } .carina-container--xl { max-width: var(--carina-breakpoint-xl); } .carina-container--2xl { max-width: var(--carina-breakpoint-2xl); } .carina-row { --carina-row-gutter-x: var(--carina-spacing-4); --carina-row-gutter-y: var(--carina-spacing-0); display: flex; flex-wrap: wrap; margin-top: calc(var(--carina-row-gutter-y) * -1); margin-inline-start: calc(var(--carina-row-gutter-x) * -0.5); margin-inline-end: calc(var(--carina-row-gutter-x) * -0.5); } .carina-row > * { flex-shrink: 0; box-sizing: border-box; width: 100%; max-width: 100%; margin-top: var(--carina-row-gutter-y); padding-right: calc(var(--carina-row-gutter-x) * 0.5); padding-left: calc(var(--carina-row-gutter-x) * 0.5); } .carina-column { flex: 1 0 0%; } .carina-row--cols-auto > * { flex: 0 0 auto; width: auto; } .carina-row--cols-1 > * { flex: 0 0 auto; width: calc(100% / 1); } .carina-row--cols-2 > * { flex: 0 0 auto; width: calc(100% / 2); } .carina-row--cols-3 > * { flex: 0 0 auto; width: calc(100% / 3); } .carina-row--cols-4 > * { flex: 0 0 auto; width: calc(100% / 4); } .carina-row--cols-5 > * { flex: 0 0 auto; width: calc(100% / 5); } .carina-row--cols-6 > * { flex: 0 0 auto; width: calc(100% / 6); } .carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } .carina-column--fill { flex: 1 0 0%; width: 0; } .carina-column--auto { flex: 0 0 auto; width: auto; } .carina-column--span-1 { flex: 0 0 auto; width: calc(100% * 1 / 12); } .carina-column--span-2 { flex: 0 0 auto; width: calc(100% * 2 / 12); } .carina-column--span-3 { flex: 0 0 auto; width: calc(100% * 3 / 12); } .carina-column--span-4 { flex: 0 0 auto; width: calc(100% * 4 / 12); } .carina-column--span-5 { flex: 0 0 auto; width: calc(100% * 5 / 12); } .carina-column--span-6 { flex: 0 0 auto; width: calc(100% * 6 / 12); } .carina-column--span-7 { flex: 0 0 auto; width: calc(100% * 7 / 12); } .carina-column--span-8 { flex: 0 0 auto; width: calc(100% * 8 / 12); } .carina-column--span-9 { flex: 0 0 auto; width: calc(100% * 9 / 12); } .carina-column--span-10 { flex: 0 0 auto; width: calc(100% * 10 / 12); } .carina-column--span-11 { flex: 0 0 auto; width: calc(100% * 11 / 12); } .carina-column--span-12 { flex: 0 0 auto; width: calc(100% * 12 / 12); } .carina-column--offset-1 { margin-right: 0; margin-left: calc(100% * 1 / 12); } [dir='rtl'] .carina-column--offset-1 { margin-right: calc(100% * 1 / 12); margin-left: 0; } .carina-column--offset-2 { margin-right: 0; margin-left: calc(100% * 2 / 12); } [dir='rtl'] .carina-column--offset-2 { margin-right: calc(100% * 2 / 12); margin-left: 0; } .carina-column--offset-3 { margin-right: 0; margin-left: calc(100% * 3 / 12); } [dir='rtl'] .carina-column--offset-3 { margin-right: calc(100% * 3 / 12); margin-left: 0; } .carina-column--offset-4 { margin-right: 0; margin-left: calc(100% * 4 / 12); } [dir='rtl'] .carina-column--offset-4 { margin-right: calc(100% * 4 / 12); margin-left: 0; } .carina-column--offset-5 { margin-right: 0; margin-left: calc(100% * 5 / 12); } [dir='rtl'] .carina-column--offset-5 { margin-right: calc(100% * 5 / 12); margin-left: 0; } .carina-column--offset-6 { margin-right: 0; margin-left: calc(100% * 6 / 12); } [dir='rtl'] .carina-column--offset-6 { margin-right: calc(100% * 6 / 12); margin-left: 0; } .carina-column--offset-7 { margin-right: 0; margin-left: calc(100% * 7 / 12); } [dir='rtl'] .carina-column--offset-7 { margin-right: calc(100% * 7 / 12); margin-left: 0; } .carina-column--offset-8 { margin-right: 0; margin-left: calc(100% * 8 / 12); } [dir='rtl'] .carina-column--offset-8 { margin-right: calc(100% * 8 / 12); margin-left: 0; } .carina-column--offset-9 { margin-right: 0; margin-left: calc(100% * 9 / 12); } [dir='rtl'] .carina-column--offset-9 { margin-right: calc(100% * 9 / 12); margin-left: 0; } .carina-column--offset-10 { margin-right: 0; margin-left: calc(100% * 10 / 12); } [dir='rtl'] .carina-column--offset-10 { margin-right: calc(100% * 10 / 12); margin-left: 0; } .carina-column--offset-11 { margin-right: 0; margin-left: calc(100% * 11 / 12); } [dir='rtl'] .carina-column--offset-11 { margin-right: calc(100% * 11 / 12); margin-left: 0; } .carina-filter-control-bar__tag-list { display: none; gap: var(--carina-spacing-2); margin-top: var(--carina-spacing-2); margin-bottom: var(--carina-spacing-2); } .carina-filter-button { padding: var(--carina-spacing-2) 0; white-space: nowrap; } .carina-filter-control-bar { display: flex; flex-direction: column; width: 100%; } .carina-filter-control-bar__button { margin-left: var(--carina-spacing-2); margin-top: var(--carina-spacing-2); } .carina-filter-control-bar__empty-container { padding: var(--carina-spacing-4); padding-top: 0; } .carina-filter-control-bar__filters-wrapper { display: flex; flex-wrap: wrap; gap: var(--carina-spacing-3); align-items: center; max-width: 100%; } .carina-filter-control-bar__tags-list-wrapper { display: flex; flex-wrap: wrap; align-items: baseline; } .carina-filter-control-bar__visually-hidden-message { height: 0; overflow: hidden; width: 0; } .carina-filter-select { flex-grow: 1; box-sizing: border-box; height: 56px; overflow: hidden; -ms-overflow-style: none; } .carina-filter-select__inner { display: none; gap: var(--carina-spacing-2); } .carina-search-bar.carina-textbox__container .carina-input-fieldset { border-radius: var(--carina-border-radius-full); } .carina-search-bar.carina-textbox__container:focus-within > .carina-input-fieldset { border-color: var(--carina-border-color-primary); border-style: solid; border-width: var(--carina-border-width-1); box-shadow: none; } .carina-search-bar.carina-textbox__container:focus-within > .carina-input-fieldset.carina-input-fieldset--disabled { border-color: var(--carina-border-color-soft); } .carina-search-bar .carina-textbox-icon { bottom: 14px; inset-inline-end: var(--carina-spacing-2); } .carina-search-bar > .carina-textbox__input { border-radius: var(--carina-border-radius-full); padding-inline-end: 84px; transition-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow; } .carina-search-bar > .carina-textbox__input:focus-visible { border-color: var(--carina-border-color-primary); border-style: solid; border-width: var(--carina-border-width-1); outline: none; box-shadow: var(--carina-ring-base); transition-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: border-color; } .carina-search-bar > .carina-textbox__input:disabled { color: color-mix( in srgb, var(--carina-text-color-soft) calc(var(--carina-opacity-40) * 100%), transparent ); } .carina-search-bar .carina-button { display: flex; margin: var(--carina-spacing-0); padding: var(--carina-spacing-0); border-radius: var(--carina-border-radius-full); color: var(--carina-text-color-soft); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-md); text-decoration: none; } .carina-search-bar .carina-button:hover:not(.carina-button--disabled) { color: var(--carina-text-color-base); } .carina-search-bar .carina-button:focus { outline: none; box-shadow: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-base); } .carina-search-bar__button-icons { position: absolute; display: flex; inset-inline-end: 0; } .carina-single-dimension-filters { position: relative; box-sizing: border-box; max-width: 100%; height: 56px; overflow: hidden; -ms-overflow-y: hidden; } .carina-single-dimension-filters__inner-container { display: flex; gap: var(--carina-spacing-2); overflow: auto; -ms-overflow-y: auto; margin-inline: var(--carina-spacing-0); -ms-overflow-style: none; scrollbar-width: none; } .carina-single-dimension-filters__inner-container::-webkit-scrollbar { display: none; width: 0; height: 0; background-color: var(--carina-colors-transparent); } .carina-single-dimension-filters__inner-container--scroll { margin-inline: 36px; padding-inline: var(--carina-spacing-1); scroll-behavior: smooth; } .carina-single-dimension-filters__inner-container--scroll:focus-visible { outline: none; box-shadow: var(--carina-ring-base) inset; } .carina-single-dimension-filters__scroll-arrow { position: absolute; top: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 56px; border-radius: 0; background-color: var(--carina-background-color-surface); box-shadow: var(--carina-box-shadow-md); cursor: pointer; inset-inline-end: auto; inset-inline-start: 0; } .carina-single-dimension-filters__scroll-arrow:hover { color: var(--carina-text-color-soft); background-color: var(--carina-background-color-surface-hover); } .carina-single-dimension-filters__scroll-arrow:active { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-active); } .carina-single-dimension-filters__end-scroll-arrow { inset-inline-end: 0; inset-inline-start: unset; } .carina-single-dimension-filters__scroll-arrow > .carina-button.carina-button--icon-only { width: 24px; min-width: 24px; height: 24px; min-height: 24px; border: 0; color: var(--carina-text-color-soft); } .carina-single-dimension-filters__scroll-arrow > .carina-button.carina-button--icon-only:focus { border-radius: var(--carina-border-radius-sm); box-shadow: var(--carina-ring-base); } .carina-single-dimension-filters__scroll-arrow > .carina-button.carina-button--icon-only:hover:not(.carina-button--disabled) { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-hover); } .carina-single-dimension-filters__scroll-arrow > .carina-button.carina-button--icon-only:active:not(.carina-button--disabled) { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-active); } .carina-flyout__container { display: inline-block; } .carina-flyout__trigger { cursor: pointer; } .carina-flyout__popper { padding: var(--carina-spacing-4); border-radius: var(--carina-border-radius-xl); color: var(--carina-text-color-body, var(--carina-text-color-base)); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-2xs); font-family: var(--carina-font-family-primary); background-color: var(--carina-background-color-popper); } .carina-flyout-icon__button { padding: 0; border: 0; background: transparent; cursor: pointer; color: inherit; } .carina-flyout-icon__button--disabled { color: var(--carina-text-color-disabled); cursor: default; } .carina-flyout-icon--xs { width: var(--carina-icon-xs); height: var(--carina-icon-xs); } .carina-flyout-icon--sm { width: var(--carina-icon-sm); height: var(--carina-icon-sm); } .carina-flyout-icon--md { width: var(--carina-icon-md); height: var(--carina-icon-md); } .carina-flyout-icon--lg { width: var(--carina-icon-lg); height: var(--carina-icon-lg); } .carina-form-element { display: block; box-sizing: border-box; width: 100%; margin: var(--carina-spacing-0); padding: var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-4) var(--carina-spacing-0); vertical-align: top; appearance: none; } .carina-form-element__form-label { position: relative; } .carina-form-element__form-label--visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .carina-form-element__form-label-container { display: block; margin-bottom: var(--carina-spacing-1); padding: var(--carina-spacing-0); color: var(--carina-text-color-soft); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-sm); font-family: var(--carina-font-family-primary); font-style: normal; line-height: var(--carina-line-height-normal); letter-spacing: normal; text-transform: none; text-indent: 0; text-shadow: none; vertical-align: top; } .carina-form-element__form-label-required-indicator-container { position: absolute; inset-inline-start: -11px; top: -2px; color: var(--carina-text-color-danger); font-size: var(--carina-font-size-body-xl); font-family: var(--carina-font-family-primary); font-style: normal; line-height: var(--carina-line-height-normal); letter-spacing: normal; text-transform: none; text-indent: 0; text-shadow: none; } .carina-form-element__form-message { display: block; margin: var(--carina-spacing-1) var(--carina-spacing-0) var(--carina-spacing-0); padding: var(--carina-spacing-0); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-xs); font-family: var(--carina-font-family-primary); font-style: normal; line-height: var(--carina-line-height-normal); letter-spacing: normal; text-transform: none; text-indent: var(--carina-spacing-0); text-shadow: none; vertical-align: top; } .carina-form-element__form-message-error-icon-container { position: relative; vertical-align: middle; padding-inline: 0 calc(var(--carina-spacing-px) * 5); } .carina-form-element__form-message-error-icon-container svg { display: inline-block; vertical-align: text-bottom; } .carina-form-element__form-message.carina-form-element__form-message--info { color: var(--carina-text-color-soft); } .carina-form-element__form-message.carina-form-element__form-message--error { color: var(--carina-text-color-danger); } .carina-formlayout { position: relative; width: 100%; } .carina-formsection { display: flex; flex-direction: column; } .carina-formsection__content { flex: 1 0 0%; padding-top: var(--carina-spacing-4); padding-bottom: var(--carina-spacing-4); } .carina-formsection__content--stack { flex: 1 0 auto; } .carina-formsection__header { color: var(--carina-text-color-heading, var(--carina-text-color-base)); font-weight: var(--carina-font-weight-body); font-family: var(--carina-font-family-primary); font-style: normal; line-height: var(--carina-line-height-normal); direction: ltr; letter-spacing: normal; text-transform: none; text-indent: 0; text-shadow: none; } [dir='rtl'] .carina-formsection__header { direction: rtl; } .carina-formsection__header h3 { margin: calc(var(--carina-spacing-5) + var(--carina-spacing-px)) 0; color: var(--carina-text-color-heading, var(--carina-text-color-base)); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-display-2xs); font-family: var(--carina-font-family-primary); line-height: var(--carina-line-height-tight); } .carina-formsection__header--stack { color: var(--carina-text-color-heading, var(--carina-text-color-base)); direction: ltr; } [dir='rtl'] .carina-formsection__header--stack { direction: rtl; } .carina-numeric-selector { display: flex; flex-direction: row; } .carina-numeric-selector input { text-align: center; } [dir='rtl'] .carina-numeric-selector input { text-align: center; } .carina-numeric-selector__textbox { padding: 0 var(--carina-spacing-1); width: 56px; box-sizing: border-box; border: 0; font-size: 100%; font-family: inherit; } .carina-numeric-selector__textbox input { padding: 0; } .carina-numeric-selector .carina-input-fieldset--default { top: 0px; bottom: unset; } .carina-numeric-selector--grid input { --moz-appearance: textfield; padding: 0; text-align: center; } .carina-numeric-selector--grid button { width: var(--carina-spacing-6); height: var(--carina-spacing-6); } .carina-numeric-selector--underline input { --moz-appearance: textfield; text-align: center; } .carina-numeric-selector--outline { height: calc(40px + 2 * var(--carina-border-width-1)); } .carina-numeric-selector--outline input { --moz-appearance: textfield; text-align: center; } .carina-numeric-selector__buttons { width: 40px; height: 40px; } .carina-numeric-selector__buttons > button { color: var(--carina-text-color-soft); } .carina-numeric-selector__buttons .carina-button { color: var(--carina-text-color-soft); } .carina-numeric-selector__buttons.carina-numeric-selector__buttons--grid { width: var(--carina-spacing-6); height: var(--carina-spacing-6); } .carina-numeric-selector__buttons.carina-numeric-selector__buttons--grid button { width: var(--carina-spacing-6); height: var(--carina-spacing-6); } .carina-numeric-selector__buttons.carina-numeric-selector__buttons--grid .carina-button { min-height: unset; } .carina-numeric-selector__textbox.carina-numeric-selector__textbox--underline, .carina-numeric-selector__textbox.carina-numeric-selector__textbox--outline { position: relative; top: calc(-1 * var(--carina-spacing-2-5)); height: calc(40px + 2 * var(--carina-border-width-1)); } .carina-numeric-selector__buttons.carina-numeric-selector__buttons--underline, .carina-numeric-selector__buttons.carina-numeric-selector__buttons--outline { margin: var(--carina-border-width-1); } .carina-numeric-selector__text { align-self: center; margin: var(--carina-border-width-1) 0; padding: 0 var(--carina-spacing-1); } .carina-radiogroup__button { position: relative; display: inherit; padding: var(--carina-spacing-2) 0; outline: none; } .carina-radiogroup__button--inline { display: inline-block; } .carina-radiogroup__button-input { position: absolute; left: -9999px; } [dir='rtl'] .carina-radiogroup__button-input { right: -9999px; left: unset; } .carina-radiogroup__button-label { position: relative; display: inline-block; margin-inline-start: var(--carina-spacing-4); padding-inline-start: var(--carina-spacing-2); font-size: var(--carina-font-size-body-sm); } .carina-radiogroup__button-label::before { position: absolute; top: 0; left: calc(-1 * var(--carina-spacing-4)); display: block; box-sizing: border-box; width: var(--carina-spacing-4); height: var(--carina-spacing-4); padding-inline-start: var(--carina-spacing-2); border-color: var(--carina-border-color-base); border-style: solid; border-width: var(--carina-border-width-1); border-radius: var(--carina-border-radius-xl); color: var(--carina-text-color-base); font-size: var(--carina-font-size-body-md); background-color: transparent; cursor: pointer; transition-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow; content: ''; } [dir='rtl'] .carina-radiogroup__button-label::before { right: calc(-1 * var(--carina-spacing-4)); left: auto; } .carina-radiogroup__button-label.carina-radiogroup__button-label--read-only:not(.carina-radiogroup__button-label--checked):not( .carina-radiogroup__button-label--disabled )::before { color: var(--carina-text-color-base); border-color: var(--carina-border-color-soft); background-color: var(--carina-background-color-surface-alt); -webkit-user-select: text; -ms-user-select: text; user-select: text; cursor: not-allowed; } .carina-radiogroup__button-label.carina-radiogroup__button-label--read-only:not(.carina-radiogroup__button-label--checked):not( .carina-radiogroup__button-label--disabled )::before:focus { border-color: var(--carina-border-color-primary-focus); } .carina-radiogroup__button-label--error::before { border-color: var(--carina-border-color-danger); border-style: solid; border-width: var(--carina-border-width-1); } .carina-radiogroup__button-label--inline { padding-inline-end: var(--carina-spacing-4); } .carina-radiogroup__button-label--checked::before { border-color: var(--carina-border-color-primary); border-style: solid; border-width: var(--carina-border-width-1); background: var(--carina-background-color-primary); } .carina-radiogroup__button-label--checked::after { position: absolute; top: 0.3125rem; left: -0.6875rem; display: block; box-sizing: border-box; width: 0.375rem; height: 0.375rem; border-radius: var(--carina-border-radius-xl); font-size: var(--carina-spacing-4); background: var(--carina-text-color-on-primary); cursor: pointer; content: ''; } [dir='rtl'] .carina-radiogroup__button-label--checked::after { right: -0.6875rem; left: auto; } .carina-radiogroup__button-label--checked.carina-radiogroup__button-label--error::before { border-color: var(--carina-border-color-danger); border-style: solid; border-width: var(--carina-border-width-1); background-color: var(--carina-background-color-danger); } .carina-radiogroup__button-label--focused::before { box-shadow: var(--carina-ring-base); } .carina-radiogroup__button-label--focused.carina-radiogroup__button-label--checked::before { border-color: var(--carina-border-color-primary); border-style: solid; border-width: var(--carina-border-width-1); background: var(--carina-background-color-primary); box-shadow: var(--carina-ring-base); } .carina-radiogroup__button-label--focused.carina-radiogroup__button-label--checked::after { position: absolute; top: 0.3125rem; left: -0.6875rem; display: block; box-sizing: border-box; width: 0.375rem; height: 0.375rem; border-radius: var(--carina-border-radius-xl); font-size: var(--carina-spacing-4); background: var(--carina-text-color-on-primary); cursor: pointer; content: ''; } [dir='rtl'] .carina-radiogroup__button-label--focused.carina-radiogroup__button-label--checked::after { right: -0.6875rem; left: auto; } .carina-radiogroup__button-label--focused.carina-radiogroup__button-label--checked.carina-radiogroup__button-label--error::before { border-color: var(--carina-border-color-danger); border-style: solid; border-width: var(--carina-border-width-1); background: var(--carina-background-color-danger); box-shadow: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-danger-focus); } .carina-radiogroup__button-label--focused.carina-radiogroup__button-label--error::before { box-shadow: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-danger-focus); } .carina-radiogroup__button-label--disabled { color: var(--carina-text-color-disabled); cursor: not-allowed; } .carina-radiogroup__button-label--disabled::before { border-width: 0; color: var(--carina-text-color-disabled); background-color: var(--carina-background-color-neutral-inactive); cursor: not-allowed; } .carina-radiogroup__button-label--disabled.carina-radiogroup__button-label--checked::before { border-color: var(--carina-border-color-soft); border-style: solid; border-width: var(--carina-border-width-1); background-color: var(--carina-background-color-neutral-inactive); } .carina-radiogroup { display: block; clear: both; box-sizing: border-box; margin: 0; padding: 0; color: var(--carina-text-color-base); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-sm); font-family: var(--carina-font-family-primary); font-style: normal; line-height: var(--carina-line-height-tight); direction: ltr; letter-spacing: normal; text-align: left; text-transform: none; text-indent: 0; text-shadow: none; list-style-type: none; outline: 0; } [dir='rtl'] .carina-radiogroup { direction: rtl; text-align: right; } .carina-switch { display: inline-block; } .carina-switch__track { position: relative; display: block; box-sizing: border-box; width: 40px; height: 24px; border-color: var(--carina-border-color-base); border-style: solid; border-width: var(--carina-border-width-2); border-radius: var(--carina-border-radius-full); background-color: transparent; outline: none; cursor: pointer; transition: background-color var(--carina-transition-duration-400), box-shadow var(--carina-transition-timing-function-expressive-ease-in-out) var(--carina-transition-duration-100); appearance: none; } .carina-switch__track:focus { box-shadow: 0 0 0 2px var(--carina-border-color-primary-focus); } .carina-switch__thumb { position: absolute; top: 3px; inset-inline-start: 3px; width: 14px; height: 14px; border-radius: var(--carina-border-radius-xl); background-color: var(--carina-background-color-neutral); transform: translateX(0); transition: transform var(--carina-transition-duration-200) var(--carina-transition-timing-function-productive-ease-in); } .carina-switch__track.carina-switch__track--read-only { border-color: var(--carina-border-color-soft); background-color: var(--carina-background-color-surface-alt); -webkit-user-select: none; -ms-user-select: none; user-select: none; } .carina-switch__track.carina-switch__track--read-only:hover { cursor: not-allowed; } .carina-switch__thumb.carina-switch__thumb--read-only { background-color: var(--carina-border-color-soft); -webkit-user-select: none; -ms-user-select: none; user-select: none; } .carina-switch__thumb.carina-switch__thumb--read-only:hover { cursor: not-allowed; } .carina-switch--on .carina-switch__track { border: 0; background-color: var(--carina-text-color-primary); } .carina-switch--on .carina-switch__thumb { top: 2px; inset-inline-start: -2px; width: 20px; height: 20px; box-sizing: border-box; padding: var(--carina-spacing-0-5); color: var(--carina-text-color-primary); background-color: var(--carina-background-color-surface); transform: translateX(100%); } [dir='rtl'] .carina-switch--on .carina-switch__thumb { transform: translateX(-100%); } .carina-switch--disabled .carina-switch__track { cursor: not-allowed; opacity: var(--carina-opacity-40); } .carina-switch--disabled .carina-switch--on .carina-switch__track { background-color: var(--carina-text-color-primary); cursor: not-allowed; opacity: var(--carina-opacity-40); } .carina-textarea-icon { position: absolute; bottom: var(--carina-spacing-4); padding: var(--carina-spacing-0-5); } .carina-textarea-icon svg { display: block; vertical-align: middle; } .carina-textarea-icon--start { inset-inline-start: var(--carina-spacing-4); } .carina-textarea-icon--start.carina-textarea-icon--grid { inset-inline-start: var(--carina-spacing-1); } .carina-textarea-icon--end { inset-inline-end: var(--carina-spacing-4); } .carina-textarea { position: relative; box-sizing: border-box; width: 100%; } .carina-textarea:focus-within > fieldset { border-color: var(--carina-border-color-primary-focus); border-style: solid; transition-timing-function: var( --carina-transition-timing-function-productive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: border-color; } .carina-textarea.carina-textarea--default:focus-within > fieldset { border-width: var(--carina-border-width-1); box-shadow: var(--carina-ring-base); } .carina-textarea.carina-textarea--default .carina-input-fieldset:not(.carina-input-fieldset--hiddenlabel) { bottom: 3px; } @supports (height: -moz-available) { .carina-textarea.carina-textarea--default .carina-input-fieldset:not(.carina-input-fieldset--hiddenlabel) { bottom: unset; top: calc(var(--carina-textarea-label-height) + 4px); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) { height: 100%; } } .carina-textarea.carina-textarea--default .carina-input-fieldset--hiddenlabel { top: 0px; } .carina-textarea--grid { margin-top: var(--carina-spacing-0); } .carina-textarea--grid:focus-within > fieldset { border-width: var(--carina-border-width-0) var(--carina-border-width-0) var(--carina-border-width-2); } .carina-textarea--outline { margin-top: 10px; } .carina-textarea--outline:focus-within > fieldset { border-width: var(--carina-border-width-2); } .carina-textarea--underline { margin-top: 10px; } .carina-textarea--underline:focus-within > fieldset { border-width: var(--carina-border-width-0) var(--carina-border-width-0) var(--carina-border-width-2); } .carina-textarea--error { border-color: var(--carina-border-color-danger); } .carina-textarea--error:focus-within > fieldset { border-color: var(--carina-border-color-danger-focus); } .carina-textarea__textarea { box-sizing: border-box; width: 100%; height: 100%; margin: var(--carina-spacing-0) var(--carina-spacing-0) calc(-1 * var(--carina-spacing-1)) var(--carina-spacing-0); padding: var(--carina-spacing-2) var(--carina-spacing-4) var(--carina-spacing-2) var(--carina-spacing-4); border-color: transparent; border-radius: var(--carina-border-radius-md); border-style: solid; border-width: var(--carina-border-width-0) var(--carina-spacing-0-5) var(--carina-spacing-0-5) var(--carina-spacing-0-5); overflow: auto; color: var(--carina-text-color-base); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-md); font-family: var(--carina-font-family-primary); font-style: normal; line-height: var(--carina-line-height-normal); letter-spacing: 0; text-transform: none; text-indent: 0; text-shadow: none; background-color: transparent; appearance: none; resize: vertical; } .carina-textarea__textarea:-ms-input-placeholder { color: var(--carina-text-color-soft); } .carina-textarea__textarea::placeholder { color: var(--carina-text-color-soft); } [dir='rtl'] .carina-textarea__textarea { direction: rtl; text-align: right; } .carina-textarea__textarea:focus { outline: 0; } .carina-textarea__textarea:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); } .carina-textarea__textarea:disabled { border-color: transparent; color: var(--carina-text-color-disabled); pointer-events: none; } .carina-textarea__textarea:disabled:-ms-input-placeholder { color: color-mix( in srgb, var(--carina-text-color-soft) calc(var(--carina-opacity-40) * 100%), transparent ); } .carina-textarea__textarea:disabled::placeholder { color: color-mix( in srgb, var(--carina-text-color-soft) calc(var(--carina-opacity-40) * 100%), transparent ); } .carina-textarea__textarea svg { vertical-align: middle; } .carina-textarea__textarea.carina-textarea__textarea--read-only { color: var(--carina-text-color-base); border-color: var(--carina-border-color-soft); background-color: var(--carina-background-color-surface-alt); -webkit-user-select: text; -ms-user-select: text; user-select: text; } .carina-textarea__textarea.carina-textarea__textarea--read-only:hover { cursor: not-allowed; } .carina-textarea__textarea.carina-textarea__input--icon-end { padding-inline-end: calc(var(--carina-textarea-icon-width) + 16px); } .carina-textarea__textarea.carina-textarea__input--icon-start { padding-inline-start: calc(var(--carina-textarea-icon-width) + 16px); } .carina-textarea__textarea--fixed-size { resize: none; } .carina-textarea__textarea--s.carina-textarea__textarea--default { min-height: 4rem; } .carina-textarea__textarea--m.carina-textarea__textarea--default { min-height: 6rem; } .carina-textarea__textarea--l.carina-textarea__textarea--default { min-height: 8rem; } .carina-textarea__textarea--xl.carina-textarea__textarea--default { min-height: 16rem; } .carina-textarea__textarea--s { min-height: 3.5rem; } .carina-textarea__textarea--m { min-height: 5.5rem; } .carina-textarea__textarea--l { min-height: 7.5rem; } .carina-textarea__textarea--xl { min-height: 15.5rem; } .carina-textarea__textarea--grid { margin: var(--carina-spacing-0); padding: var(--carina-spacing-0) var(--carina-spacing-0-5) var(--carina-spacing-0) var(--carina-spacing-1); border-width: var(--carina-border-width-0) var(--carina-border-width-0) var(--carina-spacing-0-5) var(--carina-border-width-0); border-radius: var(--carina-border-radius-none); background-color: transparent; } .carina-textarea__textarea--grid.carina-textarea__textarea--s { min-height: 0; } .carina-textarea__textarea--grid.carina-textarea__textarea--m { min-height: 0; } .carina-textarea__textarea--grid.carina-textarea__textarea--l { min-height: 0; } .carina-textarea__textarea--grid.carina-textarea__textarea--xl { min-height: 0; } .carina-textarea__textarea--outline { margin-top: var(--carina-spacing-2); padding: var(--carina-spacing-0-5) calc(var(--carina-spacing-4) - var(--carina-border-width-2)) calc(var(--carina-spacing-2) - var(--carina-spacing-0-5)) calc(var(--carina-spacing-4) - var(--carina-border-width-2)); background-color: transparent; } .carina-textarea__textarea--underline { margin-top: var(--carina-spacing-2); padding: var(--carina-spacing-0-5) var(--carina-spacing-4) calc(var(--carina-spacing-2) - var(--carina-spacing-0-5)) var(--carina-spacing-4); border-width: var(--carina-border-width-0) var(--carina-border-width-0) var(--carina-spacing-0-5) var(--carina-border-width-0); border-radius: var(--carina-border-radius-none); background-color: transparent; } .carina-time-range-picker__label--hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .carina-time-range-picker__outer-container { box-sizing: border-box; width: 100%; margin-inline: var(--carina-spacing-0); padding-block: var(--carina-spacing-0); padding-inline: var(--carina-spacing-0); min-inline-size: var(--carina-spacing-0); border: 0; } .carina-time-range-picker__outer-container input { margin-top: var(--carina-spacing-0); } .carina-time-range-picker--outline .carina-time-range-picker__outer-container.carina-time-range-picker__outer-container--all { margin-top: 29.5px; } .carina-time-range-picker--outline .carina-time-range-picker__outer-container.carina-time-range-picker__label--only-top, .carina-time-range-picker--underline .carina-time-range-picker__outer-container.carina-time-range-picker__label--only-top { margin-top: 10px; } .carina-time-range-picker--underline .carina-time-range-picker__outer-container.carina-time-range-picker__outer-container--all { margin-top: 39.5px; } .carina-time-range-picker__inner-container { display: flex; flex-wrap: nowrap; align-items: flex-end; } .carina-time-range-picker__separator { color: var(--carina-text-color-base); display: flex; align-items: center; align-self: flex-end; height: 40px; padding-right: var(--carina-spacing-2); padding-left: var(--carina-spacing-2); } .carina-time-range-picker--outline, .carina-time-range-picker--underline { position: relative; } .carina-time-range-picker--outline .carina-time-range-picker__label.carina-time-range-picker__label--all { top: -29.5px; } .carina-time-range-picker--outline .carina-time-range-picker__separator { height: 42px; margin-top: 10px; } .carina-time-range-picker--underline .carina-time-range-picker__label.carina-time-range-picker__label--all { top: -39.5px; } .carina-time-range-picker--underline .carina-time-range-picker__label--only-top { top: -10px; } .carina-time-range-picker--underline .carina-time-range-picker__separator { height: 42px; } .carina-array-field__button-container { margin-bottom: var(--carina-spacing-6); } .carina-forms__read-only-text { width: 100%; padding-top: var(--carina-spacing-1); padding-bottom: var(--carina-spacing-0-5); color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-md); font-family: var(--carina-font-family-primary); line-height: var(--carina-line-height-normal); white-space: pre-wrap; word-wrap: break-word; } .carina-forms__read-only-text__no-entry { color: var(--carina-text-color-soft); -webkit-user-select: none; -ms-user-select: none; user-select: none; } .carina-link-list-item__heading { font-size: var(--carina-font-size-body-xl); line-height: var(--carina-line-height-tight); } .carina-link-list-item__heading--block { font-weight: var(--carina-font-weight-display); font-size: var(--carina-font-size-body-2xs); text-transform: uppercase; } .carina-link-list-item__link { display: inline-block; border: 0; font-size: var(--carina-font-size-body-sm); line-height: var(--carina-line-height-normal); text-align: left; text-decoration: none; background: none; appearance: none; } .carina-link-list-item__heading-subtext, .carina-link-list-item__subtext { display: block; margin-top: var(--carina-spacing-0-5); color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-2xs); line-height: var(--carina-line-height-normal); } .carina-link-list-item--interactive { color: var(--carina-text-color-primary); cursor: pointer; } .carina-link-list-item--interactive .carina-link-list-item__link:hover { color: var(--carina-text-color-primary-hover); text-decoration: underline; } .carina-link-list-item--interactive .carina-link-list-item__link:active { color: var(--carina-text-color-primary-active); } .carina-link-list-item__li { width: fit-content; margin: 0 0 var(--carina-spacing-2) 0; font-family: var(--carina-font-family-primary); letter-spacing: normal; text-transform: none; text-indent: 0; text-shadow: none; list-style: none; transition-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: outline; } .carina-link-list-item__li:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-border-color-primary-focus); } .carina-link-list { margin: 0 0 var(--carina-spacing-4) 0; padding: 0; font-family: var(--carina-font-family-primary); letter-spacing: normal; text-indent: 0; text-shadow: none; list-style: none; } .carina-link-list .carina-link-list-item__heading-subtext, .carina-link-list .carina-link-list-item__subtext { display: none; } .carina-link-list--block { display: block; padding: 0; text-decoration: none; } .carina-link-list--block .carina-link-list-item__heading-subtext, .carina-link-list--block .carina-link-list-item__subtext { display: block; } .carina-link-list--block .carina-link-list-item--interactive:hover { background-color: var(--carina-background-color-surface-hover); cursor: pointer; } .carina-link-list--block .carina-link-list-item--interactive:hover .carina-link-list-item__link { color: var(--carina-text-color-primary-hover); text-decoration: underline; } .carina-link-list--block .carina-link-list-item__li { box-sizing: border-box; width: 100%; margin: 0; padding: var(--carina-spacing-4); border-top-width: 1px; border-top-style: solid; } .carina-link-list--block .carina-link-list-item__li .carina-link-list-item__heading { font-weight: var(--carina-font-weight-display); font-size: var(--carina-font-size-body-2xs); line-height: var(--carina-line-height-tight); text-transform: uppercase; } .carina-link-list--block .carina-link-list-item__li .carina-link-list-item__heading-subtext { line-height: var(--carina-line-height-tight); text-transform: uppercase; } .carina-link-list--block .carina-link-list-item__li:last-child { border-bottom-width: 1px; border-bottom-style: solid; } .carina-link-list--block .carina-link-list-item--inert, .carina-link-list--block .carina-link-list-item--interactive { border-color: var(--carina-border-color-soft); } .carina-link-list--block.carina-link-list--small .carina-link-list-item__li { padding: var(--carina-spacing-2); } .carina-link-list--block.carina-link-list--clean .carina-link-list-item__li { border: initial; } .carina-link-list--block.carina-link-list--clean .carina-link-list-item__li:last-child { border: initial; } @keyframes carina-loading-spinner--circle { 0% { transform: rotateZ(var(--carina-rotate-0)); } 66% { transform: rotateZ(220deg); } 100% { transform: rotateZ(var(--carina-rotate-360)); } } @keyframes carina-loading-spinner--tail-chase-md { 0% { stroke-dashoffset: 100; transform: rotateZ(var(--carina-rotate-0)); } 50% { stroke-dashoffset: 0; transform: rotateZ(var(--carina-rotate-45)); } 100% { stroke-dashoffset: 100; transform: rotateZ(var(--carina-rotate-360)); } } @keyframes carina-loading-spinner--tail-chase-lg { 0% { stroke-dashoffset: 240; transform: rotateZ(var(--carina-rotate-0)); } 50% { stroke-dashoffset: 0; transform: rotateZ(var(--carina-rotate-45)); } 100% { stroke-dashoffset: 240; transform: rotateZ(var(--carina-rotate-360)); } } .carina-loading-spinner { position: relative; display: flex; flex-direction: column; flex-grow: 0; flex-shrink: 0; align-items: center; justify-content: center; margin-bottom: var(--carina-spacing-8); overflow: visible; font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-lg); font-family: var(--carina-font-family-primary); transform-origin: 50% 50%; } .carina-loading-spinner--textinline { flex-direction: row; margin-right: var(--carina-spacing-2); margin-bottom: var(--carina-spacing-8); } .carina-loading-spinner__circle { width: 78px; height: 78px; margin: 33px; overflow: visible; transform-origin: 50% 50%; animation: carina-loading-spinner--circle 3773ms linear infinite; fill: transparent; stroke: var(--carina-background-color-neutral-inactive); stroke-linecap: round; stroke-width: 6px; stroke-dasharray: 600; } .carina-loading-spinner__circle--lg { stroke-dasharray: 900; width: 178px; height: 178px; } .carina-loading-spinner__tail-chaser { transform-origin: 50% 50%; animation: carina-loading-spinner--tail-chase-md 2450ms linear infinite; stroke-dasharray: 175; stroke-width: 6px; fill: transparent; } .carina-loading-spinner__tail-chaser--lg { transform-origin: 50% 50%; animation: carina-loading-spinner--tail-chase-lg 2450ms linear infinite; stroke-dasharray: 400; stroke-width: 6px; fill: transparent; } .carina-loading-spinner__text { position: relative; justify-content: center; height: auto; margin: 0; color: var(--carina-text-color-body, var(--carina-text-color-base)); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-lg); font-family: var(--carina-font-family-primary); line-height: var(--carina-line-height-display-2xs); text-align: center; word-wrap: break-word; overflow-wrap: break-word; } .carina-loading-spinner__text--textinline { display: inline-block; margin-left: var(--carina-spacing-2); } .carina-loading-spinner__gradient-color-1 { stop-color: var(--carina-background-color-secondary); } .carina-loading-spinner__gradient-color-2 { stop-color: var(--carina-background-color-primary); } .carina-loading-spinner__gradient-color-3 { stop-color: var(--carina-background-color-tertiary); } .carina-modal { --carina-z-index-current: var(--carina-z-index-modal); --carina-z-index-popper: calc( var(--carina-z-index-modal) + var(--carina-z-index-popper-diff) ); --carina-z-index-scrim: calc( var(--carina-z-index-modal) + var(--carina-z-index-scrim-diff) ); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--carina-z-index-modal); display: flex; align-items: center; justify-content: center; } .carina-modal--fullscreen { --carina-z-index-current: var(--carina-z-index-fullscreen-modal); --carina-z-index-popper: calc( var(--carina-z-index-fullscreen-modal) + var(--carina-z-index-popper-diff) ); --carina-z-index-scrim: calc( var(--carina-z-index-fullscreen-modal) + var(--carina-z-index-scrim-diff) ); } .carina-modal--fluid { --carina-z-index-current: var(--carina-z-index-fullscreen-modal); --carina-z-index-popper: calc( var(--carina-z-index-fullscreen-modal) + var(--carina-z-index-popper-diff) ); --carina-z-index-scrim: calc( var(--carina-z-index-fullscreen-modal) + var(--carina-z-index-scrim-diff) ); } .carina-modal__dialog { z-index: var(--carina-z-index-modal); box-sizing: border-box; max-width: 100%; max-height: 100%; border: 0; overflow: hidden; color: var(--carina-text-color-body, var(--carina-text-color-base)); background-color: var(--carina-background-color-surface-alt); outline: none; box-shadow: var(--carina-box-shadow-2xl); } .carina-modal__dialog--center { max-width: calc(100% - 16px); max-height: 100%; border-radius: var(--carina-border-radius-xl); } .carina-modal__dialog--sm { width: 420px; } .carina-modal__dialog--md { width: 560px; } .carina-modal__dialog--lg { width: 800px; } .carina-modal__dialog--xl { width: 1240px; } .carina-modal__dialog--fluid { z-index: var(--carina-z-index-modal); width: 100%; height: 100%; } .carina-modal__dialog--fullscreen { z-index: var(--carina-z-index-fullscreen-modal); width: 100%; height: 100%; } .carina-modal__dialog--side { position: fixed; top: 0; bottom: 0; width: 480px; max-width: 100%; } .carina-modal__dialog--start { left: 0; } [dir='rtl'] .carina-modal__dialog--start { right: 0; left: auto; } .carina-modal__dialog--end { right: 0; } [dir='rtl'] .carina-modal__dialog--end { right: auto; left: 0; } .carina-modal__dialog--bottom { position: fixed; right: 0; bottom: 0; left: 0; max-height: 100%; border-top-left-radius: var(--carina-border-radius-xl); border-top-right-radius: var(--carina-border-radius-xl); } .carina-modal__scrim { width: 100%; height: 100%; transition-property: opacity; } .carina-modal__content { box-sizing: border-box; width: 100%; height: 100%; max-height: 100vh; overflow: hidden; } .carina-modal__dialog--productive, .carina-modal__scrim--productive, .carina-modal__content--productive { transition-duration: var(--carina-transition-duration-200); } .carina-modal__dialog--expressive, .carina-modal__scrim--expressive, .carina-modal__content--expressive { transition-duration: var(--carina-transition-duration-400); } .carina-modal__dialog.carina-transition--out { --carina-transition-opacity: 0; } .carina-modal__scrim.carina-transition--out { --carina-transition-opacity: 0; } .carina-modal__content--productive { transition-delay: var(--carina-transition-delay-200); } .carina-modal__content--expressive { transition-delay: var(--carina-transition-delay-400); } .carina-modal__content.carina-transition--out { --carina-transition-opacity: 0; } .carina-panel { --carina-z-index-current: var(--carina-z-index-panel); --carina-z-index-popper: calc( var(--carina-z-index-panel) + var(--carina-z-index-popper-diff) ); --carina-z-index-scrim: calc( var(--carina-z-index-panel) + var(--carina-z-index-scrim-diff) ); --carina-panel-width: 480px; height: 100%; transform: none; opacity: 1; } .carina-panel--inline { border-color: var(--carina-border-color-soft); border-style: solid; border-width: 0; overflow: visible; } .carina-panel__outer-container { --carina-collapse-size: var(--carina-panel-width); position: fixed; top: var(--carina-spacing-0); bottom: var(--carina-spacing-0); z-index: var(--carina-z-index-panel); box-sizing: border-box; width: var(--carina-collapse-size); max-width: 100vw; max-height: 100vh; border: var(--carina-border-width-0); overflow: hidden; color: var(--carina-text-color-body, var(--carina-text-color-base)); background-color: var(--carina-background-color-surface); outline: none; box-shadow: var(--carina-box-shadow-2xl); transform: translateX(var(--carina-transition-translate-x)); } .carina-panel--start .carina-panel__outer-container { inset-inline-start: var(--carina-spacing-0); } .carina-panel--end .carina-panel__outer-container { inset-inline-end: var(--carina-spacing-0); } .carina-panel__content-container { box-sizing: border-box; width: var(--carina-panel-width); max-width: 100vw; height: 100%; overflow: hidden; opacity: var(--carina-transition-opacity); transition-duration: var(--carina-transition-duration-200); } .carina-panel--expressive .carina-panel__outer-container, .carina-panel--expressive .carina-scrim { transition-duration: var(--carina-transition-duration-400); } .carina-panel--productive .carina-panel__outer-container, .carina-panel--productive .carina-scrim, .carina-transition--out .carina-panel__outer-container, .carina-transition--out .carina-scrim { transition-duration: var(--carina-transition-duration-200); } .carina-panel--productive.carina-panel--scrim.carina-transition--in .carina-panel__outer-container, .carina-panel--productive .carina-panel__content-container, .carina-panel--expressive.carina-transition--out .carina-panel__content-container { transition-delay: var(--carina-transition-delay-200); } .carina-panel--expressive.carina-panel--scrim.carina-transition--in .carina-panel__outer-container, .carina-panel--expressive.carina-transition--in .carina-panel__content-container, .carina-panel--productive.carina-panel--scrim.carina-transition--in .carina-panel__content-container { transition-delay: var(--carina-transition-delay-400); } .carina-panel--expressive.carina-panel--scrim.carina-transition--in .carina-panel__content-container { transition-delay: var(--carina-transition-delay-800); } .carina-scroll-view-with-bars { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; box-sizing: border-box; width: 100%; max-width: inherit; height: 100%; max-height: inherit; overflow: hidden; } .carina-scroll-view-with-bars__header { flex-grow: 0; flex-shrink: 0; overflow: visible; transition: box-shadow var(--carina-transition-duration-200) var(--carina-transition-timing-function-productive-ease-in-out); } .carina-scroll-view-with-bars__header--shadow { z-index: calc(var(--carina-z-index-current) + 1); box-shadow: var(--carina-box-shadow-lg); } .carina-scroll-view-with-bars__footer { flex-grow: 0; flex-shrink: 0; overflow: visible; transition: box-shadow var(--carina-transition-duration-200) var(--carina-transition-timing-function-productive-ease-in-out); } .carina-scroll-view-with-bars__footer--shadow { z-index: calc(var(--carina-z-index-current) + 1); box-shadow: var(--carina-box-shadow-reverse-lg); } .carina-scroll-view-with-bars__scroll-view { position: relative; flex-grow: 1; flex-shrink: 1; width: 100%; height: 100%; max-height: 100vh; overflow-y: auto; } .carina-skip-link { position: absolute; top: 2px; left: 2px; z-index: var(--carina-z-index-modal); min-width: 112px; padding-top: var(--carina-spacing-3) var(--carina-spacing-6); border: 0; color: var(--carina-text-color-primary); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-md); text-align: center; text-decoration: none; background-color: var(--carina-background-color-surface); cursor: pointer; } .carina-navigation-next__app-switcher-button { position: relative; display: flex; align-items: center; justify-content: space-between; width: 3.5rem; height: 3.5rem; border-radius: var(--carina-border-radius-xl); background-image: linear-gradient( 85deg, #004cd6 0%, #005cc6 36.46%, #00a882 91.76% ); cursor: pointer; } .carina-navigation-next__app-switcher-button::before { position: absolute; z-index: -1; display: block; border-radius: var(--carina-border-radius-xl); background-image: linear-gradient( 85deg, #006ae1 1.08%, #006ae1 51.03%, #00a286 91.85% ); opacity: 0; content: ''; inset: 0; } .carina-navigation-next__app-switcher-button:hover::before { z-index: 0; opacity: 1; width: 100%; transition: opacity var(--carina-transition-duration-300) var(--carina-transition-timing-function-productive-ease-out); } .carina-navigation-next__app-switcher-button:focus-within { border-radius: var(--carina-border-radius-md); box-shadow: var(--carina-ring-base); outline: 0; } .carina-navigation-next__app-switcher-button-icon-container { z-index: 1; display: flex; align-items: center; justify-content: left; padding: var(--carina-spacing-3); } .carina-navigation-next__app-switcher-button-text-container { display: none; } .carina-navigation-next__app-switcher-button-text { font-size: var(--carina-font-size-md); } .carina-navigation-next__app-switcher-button-secondary-text { margin-top: var(--carina-spacing-1); font-size: var(--carina-font-size-2xs); } .carina-navigation-next__app-switcher-button-chevron { display: none; } .carina-navigation-next__app-switcher-menu { background-color: var(--carina-background-color-surface); color: var(--carina-text-color-base); height: 100vh; width: 100%; margin-inline-end: var(--carina-spacing-0-5); position: relative; padding: var(--carina-spacing-4); overflow-y: auto; } .carina-navigation-next__app-switcher-menu-heading { display: flex; flex-direction: row; align-items: center; } .carina-navigation-next__app-switcher-menu-heading-button { height: 2.75rem; width: 2.75rem; } .carina-navigation-next__app-switcher-menu-heading-text { font-size: var(--carina-font-size-display-xs); margin: var(--carina-spacing-6) var(--carina-spacing-2); width: calc(100% - 3.75rem); word-wrap: break-word; } .carina-navigation-next__app-switcher-menu-list { margin: var(--carina-spacing-4) var(--carina-spacing-2) var(--carina-spacing-0) var(--carina-spacing-2); padding: var(--carina-spacing-0); } .carina-navigation-next__app-switcher-menu-card { position: relative; display: flex; width: 17rem; height: 100%; margin: var(--carina-spacing-2) var(--carina-spacing-0); padding: var(--carina-spacing-2) var(--carina-spacing-4) var(--carina-spacing-2) var(--carina-spacing-2); border-radius: var(--carina-border-radius-xl); cursor: pointer; } .carina-navigation-next__app-switcher-menu-card:hover { background-color: var(--carina-background-color-surface-hover); } .carina-navigation-next__app-switcher-menu-card:focus-within { box-shadow: var(--carina-ring-base); outline: 0; } .carina-navigation-next__app-switcher-menu-card-icon-container { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--carina-border-radius-2xl); } .carina-navigation-next__app-switcher-menu-card-icon-container--background-0 { background-image: linear-gradient(#179aeb, #015fb5); } .carina-navigation-next__app-switcher-menu-card-icon-container--background-1 { background-image: linear-gradient(#05a5a5, #047885); } .carina-navigation-next__app-switcher-menu-card-icon-container--background-2 { background-image: linear-gradient(#00a882, #008265); } .carina-navigation-next__app-switcher-menu-card-icon-container--background-3 { background-image: linear-gradient(#ed7118, #e71063); } .carina-navigation-next__app-switcher-menu-card-icon-container--background-4 { background-image: linear-gradient(#ff558a, #c538b7); } .carina-navigation-next__app-switcher-menu-card-icon-container--background-5 { background-image: linear-gradient(#cc3dbe, #772adb); } .carina-navigation-next__app-switcher-menu-card-icon-container--background-6 { background-image: linear-gradient(#179aeb, #772adb); } .carina-navigation-next__app-switcher-menu-card-icon-container--background-7 { background-image: linear-gradient(#77a11e, #009070); } .carina-navigation-next__app-switcher-menu-card-icon-container--background-8 { background-image: linear-gradient(#ed7118, #c538b7); } .carina-navigation-next__app-switcher-menu-card-icon-container--background-9 { background-image: linear-gradient(#179aeb, #00a882); } .carina-navigation-next__app-switcher-menu-card-icon-container--current { outline: var(--carina-spacing-0-5) solid var(--carina-border-color-primary); outline-offset: calc(1.5 * var(--carina-spacing-0-5)); } .carina-navigation-next__app-switcher-menu-card-text-container { display: flex; flex-direction: column; margin-inline-start: var(--carina-spacing-4); width: 11.5rem; } .carina-navigation-next__app-switcher-menu-card-heading { display: flex; align-items: center; margin: var(--carina-spacing-0); font-size: var(--carina-font-size-body-lg); line-height: var(--carina-line-height-header-5); } .carina-navigation-next__app-switcher-menu-card-link { text-decoration: none; color: var(--carina-text-color-base); } .carina-navigation-next__app-switcher-menu-card-link:focus-within { outline: 0; } .carina-navigation-next__app-switcher-menu-card-link::after { content: ''; inset: 0; position: absolute; } .carina-navigation-next__app-switcher-menu-card-description { margin: var(--carina-spacing-0-5) var(--carina-spacing-0); line-height: var(--carina-line-height-normal); font-size: var(--carina-font-size-body-sm); color: var(--carina-text-color-base); word-wrap: break-word; } .carina-navigation-next__mega-menu { display: flex; flex-direction: column; height: 100%; min-width: 400px; max-width: 100vw; overflow-x: scroll; padding: var(--carina-spacing-6); color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface); border-start-end-radius: var(--carina-border-radius-xl); border-end-end-radius: var(--carina-border-radius-xl); border-inline-start: var(--carina-border-width-1) solid var(--carina-border-color-soft); } .carina-navigation-next__mega-menu-list { height: calc(100% - 2.5rem); margin: var(--carina-spacing-0); padding: var(--carina-spacing-0); column-fill: auto; column-width: 200px; column-gap: var(--carina-spacing-4); } .carina-navigation-next__mega-menu-list > * { margin-bottom: var(--carina-spacing-2); margin-inline-end: var(--carina-spacing-4); width: 200px; } .carina-navigation-next__mega-menu-list > *:last-child { margin-bottom: var(--carina-spacing-0); } .carina-navigation-next__mega-menu-buttons { height: 40px; display: flex; flex-direction: row; justify-content: space-between; } .carina-navigation-next__mega-menu-link { display: flex; margin: var(--carina-spacing-0-5) var(--carina-spacing-0); padding: var(--carina-spacing-0); border-radius: var(--carina-border-radius-xl); font-size: var(--carina-font-size-body-sm); cursor: pointer; flex-direction: row; align-items: center; } .carina-navigation-next__mega-menu-link:hover { background-color: var(--carina-background-color-surface-hover); } .carina-navigation-next__mega-menu-link:hover a { color: var(--carina-text-color-base); } .carina-navigation-next__mega-menu-link:focus-within { box-shadow: var(--carina-ring-base); background-color: var(--carina-background-color-surface-hover); } .carina-navigation-next__mega-menu-link a { display: flex; border-radius: var(--carina-border-radius-xl); align-items: center; color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-sm); text-decoration: none; } .carina-navigation-next__mega-menu-link a:hover { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-hover); } .carina-navigation-next__mega-menu-link a:focus-visible { outline: 0; } .carina-navigation-next__mega-menu-link--header { font-weight: var(--carina-font-weight-display); margin: var(--carina-spacing-0-5) var(--carina-spacing-0); } .carina-navigation-next__mega-menu-link--header a { color: var(--carina-text-color-base); font-size: var(--carina-font-size-md); padding: var(--carina-spacing-1) var(--carina-spacing-0); } .carina-navigation-next__mega-menu-link--current { background-color: var(--carina-background-color-surface-hover); } .carina-navigation-next__mega-menu-link--current a { color: var(--carina-text-color-base); font-weight: var(--carina-font-weight-semi-bold); } .carina-navigation-next__mega-menu-link--disabled { background-color: transparent; cursor: not-allowed; } .carina-navigation-next__mega-menu-link--disabled:hover { background-color: transparent; } .carina-navigation-next__mega-menu-link--disabled:hover a { color: var(--carina-text-color-disabled); } .carina-navigation-next__mega-menu-link--disabled:focus-within { outline: 0; background-color: transparent; } .carina-navigation-next__mega-menu-link--disabled a { cursor: not-allowed; color: var(--carina-text-color-disabled); } .carina-navigation-next__mega-menu-link--disabled a:hover { color: var(--carina-text-color-disabled); background-color: transparent; } .carina-navigation-next__mega-menu-link--disabled a:focus-visible { outline: 0; } .carina-navigation-next__mega-menu-link--disabled svg { color: var(--carina-text-color-disabled); } .carina-navigation-next__mega-menu-link__indicator { align-self: stretch; background-color: var(--carina-border-color-secondary-focus); border-radius: var(--carina-border-radius-xl); margin: var(--carina-spacing-0-5) var(--carina-spacing-1); visibility: hidden; width: 0.25rem; } .carina-navigation-next__mega-menu-link__indicator--current { visibility: visible; } .carina-navigation-next__mega-menu-link__link { margin: var(--carina-spacing-0-5) var(--carina-spacing-0); word-break: break-word; width: 100%; } .carina-navigation-next__mega-menu-link__link--header { margin: var(--carina-spacing-0); } .carina-navigation-next__mega-menu-link__icon { visibility: hidden; margin-inline-end: var(--carina-spacing-2); } .carina-navigation-next__mega-menu-link__icon--header { visibility: visible; } .carina-navigation-next__mega-menu-link:not(.carina-navigation-next__mega-menu-link--header) .carina-navigation-next__mega-menu-link__indicator { margin: var(--carina-spacing-1) var(--carina-spacing-0) var(--carina-spacing-1) var(--carina-spacing-3); } .carina-navigation-next__mega-menu-link:not(.carina-navigation-next__mega-menu-link--header) .carina-navigation-next__mega-menu-link__link { margin-inline-start: var(--carina-spacing-5); } .carina-navigation-next__mega-menu-section { height: min-content; break-inside: avoid; } .carina-navigation-next__mega-menu-section__list { margin: var(--carina-spacing-0-5) var(--carina-spacing-0); padding: var(--carina-spacing-0-5) var(--carina-spacing-0); } .carina-navigation-next__mobile-navigation-container { --carina-navigation-mobile-header-height: 56px; --carina-navigation-mobile-z-index: 100; display: flex; flex-direction: column; overflow: hidden; position: relative; } .carina-navigation-next__mobile-navigation-container__header { display: flex; background-color: var(--carina-background-color-surface); color: var(--carina-text-color-base); position: sticky; top: 0; width: 100%; height: var(--carina-navigation-mobile-header-height); justify-content: space-between; align-items: center; } .carina-navigation-next__mobile-navigation-container__logo-container { flex-shrink: 2; } .carina-navigation-next__mobile-navigation-container__logo { margin: var(--carina-spacing-0); padding: var(--carina-spacing-2) var(--carina-spacing-4); } .carina-navigation-next__mobile-navigation-container__logo:focus-within { border-radius: var(--carina-border-radius-lg); box-shadow: var(--carina-ring-base); outline: 0; } .carina-navigation-next__mobile-navigation-container__end-button { margin: var(--carina-spacing-2) var(--carina-spacing-4) var(--carina-spacing-2) var(--carina-spacing-0); } .carina-navigation-next__mobile-navigation-container__end-button:focus-within { border-radius: var(--carina-border-radius-lg); box-shadow: var(--carina-ring-base); outline: 0; } .carina-navigation-next__mobile-navigation-container__solution-bar { display: flex; margin: var(--carina-spacing-4); width: calc(100vw - 2 * var(--carina-spacing-4)); align-items: center; cursor: pointer; } .carina-navigation-next__mobile-navigation-container__solution-bar:focus-within { border-radius: var(--carina-border-radius-lg); box-shadow: var(--carina-ring-base); outline: 0; } .carina-navigation-next__mobile-navigation-container__solution-bar-icon { margin-inline-end: var(--carina-spacing-2); } .carina-navigation-next__mobile-navigation-container__solution-bar-text { display: flex; margin: var(--carina-spacing-0); } .carina-navigation-next__mobile-navigation-container__object-header-container { border-top-left-radius: var(--carina-border-radius-lg); border-top-right-radius: var(--carina-border-radius-lg); margin: var(--carina-spacing-0) var(--carina-spacing-4); } .carina-navigation-next__mobile-navigation-container__object-layer { --carina-background-color-surface-hover: #f6f7f7; position: absolute; width: 100%; top: var(--carina-navigation-mobile-header-height); z-index: var(--carina-navigation-mobile-z-index); height: calc(100vh - var(--carina-navigation-mobile-header-height)); overflow: hidden; background-color: var(--carina-background-color-surface); color: var(--carina-text-color-base); display: flex; flex-direction: column; } .carina-navigation-next__mobile-navigation-container__object-layer .carina-navigation-next__object-sidebar-dropdown { margin-bottom: var(--carina-spacing-2); } .carina-navigation-next__mobile-navigation-container__object-layer-scroll { display: flex; margin: auto; flex-direction: column; width: calc(100% - 2 * var(--carina-spacing-4)); background-color: var(--carina-background-color-surface-alt); padding: var(--carina-spacing-2) var(--carina-spacing-1-5); } .carina-navigation-next__mobile-navigation-container__solution-layer { width: 100%; top: var(--carina-navigation-mobile-header-height); z-index: var(--carina-navigation-mobile-z-index) + 1; height: calc(100vh - var(--carina-navigation-mobile-header-height)); overflow: hidden; } .carina-navigation-next__mobile-navigation-container__solution-layer-container { padding: var(--carina-spacing-2) var(--carina-spacing-0); } .carina-navigation-next__solution-sidebar-container-scroll { height: calc(100% - 60px); } .carina-navigation-next__mobile-navigation-container__solution-layer-scroll { padding: var(--carina-spacing-1) var(--carina-spacing-0); } .carina-navigation-next__mobile-navigation-container__main { position: absolute; top: var(--carina-navigation-mobile-header-height); } .carina-navigation-next__mobile-navigation-container__community-panel { display: flex; height: 100vh; flex-direction: column; justify-content: center; align-items: center; background-color: var(--carina-background-color-surface); } .carina-navigation-next__mobile-navigation-container__user-profile-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: var(--carina-background-color-surface); } .carina-navigation-next__mobile-navigation-container__user-profile-panel-button { margin: var(--carina-spacing-4) var(--carina-spacing-6) var(--carina-spacing-0) var(--carina-spacing-0); align-self: end; padding: var(--carina-spacing-1); } .carina-navigation-next__mobile-navigation-container__skip-link { display: flex; border-radius: var(--carina-border-radius-xl); border-width: var(--carina-border-width-2); box-shadow: var(--carina-ring-base); justify-content: center; outline: 0; } .carina-navigation-next__mobile-navigation-container__skip-link:focus + .carina-navigation-next__mobile-navigation-container__header { position: absolute; left: -9999px; } .carina-navigation-next__navigation-community { display: flex; flex-direction: column; align-items: center; height: 800px; width: 420px; padding: var(--carina-spacing-6); border-start-end-radius: var(--carina-border-radius-xl); border-end-end-radius: var(--carina-border-radius-xl); color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface); } .carina-navigation-next__navigation-community-header { color: var(--carina-text-color-base); font-size: var(--carina-font-size-body-lg); margin: var(--carina-spacing-0); } .carina-navigation-next__navigation-community-description { color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-sm); line-height: var(--carina-line-height-body-sm); margin: var(--carina-spacing-4) var(--carina-spacing-0); text-align: center; } .carina-navigation-next__navigation-community-image { height: 224px; width: 224px; margin-top: var(--carina-spacing-12); } .carina-navigation-next__search-box { display: inline-flex; align-items: center; margin-bottom: var(--carina-spacing-2); } .carina-navigation-next__search-box__header { margin: var(--carina-spacing-2-5); font-size: var(--carina-font-size-header-4); } .carina-navigation-next__search-item { display: flex; padding: var(--carina-spacing-0) var(--carina-spacing-2); border-radius: var(--carina-border-radius-xl); font-size: var(--carina-font-size-body-sm); align-items: center; height: 100%; cursor: pointer; } .carina-navigation-next__search-item:hover { background-color: var(--carina-background-color-surface-alt); } .carina-navigation-next__search-item:focus-within { box-shadow: var(--carina-ring-base); outline: 0; } .carina-navigation-next__search-item a { display: flex; min-height: 1.5rem; width: 100%; border-radius: var(--carina-border-radius-xl); align-items: center; color: var(--carina-text-color-base); font-size: var(--carina-font-size-body-sm); line-height: normal; text-decoration: none; } .carina-navigation-next__search-item a:focus-visible { outline: 0; } .carina-navigation-next__search-item__start-icon { align-self: flex-start; margin-top: var(--carina-spacing-1); margin-inline-end: var(--carina-spacing-2); } .carina-navigation-next__search-item__link { margin: var(--carina-spacing-1) var(--carina-spacing-0); flex: 1 1 100%; word-break: break-word; } .carina-navigation-next__search-list__header { margin: var(--carina-spacing-2) var(--carina-spacing-0); font-size: var(--carina-font-size-display-2xs); } .carina-navigation-next__search-list__list { padding: var(--carina-spacing-0); margin-bottom: var(--carina-spacing-5); } .carina-navigation-next__navigation-user-profile { display: flex; flex-direction: column; align-items: center; min-width: 15.5rem; padding: var(--carina-spacing-6); border-start-end-radius: var(--carina-border-radius-xl); border-end-end-radius: var(--carina-border-radius-xl); color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface); } .carina-navigation-next__navigation-user-profile::before { content: ''; height: 2.5rem; width: 2rem; position: absolute; bottom: 0.125rem; left: -2rem; z-index: 1; } .carina-navigation-next__navigation-user-profile__name { color: var(--carina-text-color-base); font-size: var(--carina-font-size-body-lg); margin: var(--carina-spacing-3) var(--carina-spacing-0); } .carina-navigation-next__navigation-user-profile__email, .carina-navigation-next__navigation-user-profile__id { color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-xs); line-height: var(--carina-line-height-3); } .carina-navigation-next__navigation-user-profile__list { display: flex; flex-direction: column; margin: var(--carina-spacing-3) var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-0); width: 100%; list-style-type: none; } .carina-navigation-next__navigation-user-profile__list, .carina-navigation-next__navigation-user-profile__account-list, .carina-navigation-next__navigation-user-profile__list-item { padding: var(--carina-spacing-0); } .carina-navigation-next__navigation-user-profile__account-list, .carina-navigation-next__navigation-user-profile__list-item { margin: var(--carina-spacing-0); } .carina-navigation-next__navigation-user-profile__account-list > * { margin-bottom: var(--carina-spacing-1); } .carina-navigation-next__navigation-user-profile__account-list > *:last-child { margin-bottom: var(--carina-spacing-0); } .carina-navigation-next__navigation-user-profile__link, .carina-navigation-next__navigation-user-profile__account-link { display: flex; border-radius: var(--carina-border-radius-xl); color: var(--carina-text-color-base); font-size: var(--carina-font-size-body-sm); margin: var(--carina-spacing-0); padding: var(--carina-spacing-1-5) var(--carina-spacing-2); text-decoration: none; align-items: center; } .carina-navigation-next__navigation-user-profile__link:hover, .carina-navigation-next__navigation-user-profile__account-link:hover { background-color: var(--carina-background-color-surface-hover); } .carina-navigation-next__navigation-user-profile__link:focus-within, .carina-navigation-next__navigation-user-profile__account-link:focus-within { box-shadow: var(--carina-ring-base); outline: 0; } .carina-navigation-next__navigation-user-profile--expanded { display: flex; flex-direction: column; min-width: 304px; align-items: unset; } .carina-navigation-next__navigation-user-profile__name--expanded { line-height: var(--carina-line-height-header-6); margin: var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-3) var(--carina-spacing-0); } .carina-navigation-next__navigation-user-profile__avatar--expanded { margin-right: var(--carina-spacing-4); } .carina-navigation-next__navigation-user-profile__container--expanded { display: flex; flex-direction: row; } .carina-navigation-next__navigation-user-profile__list-item--expanded { display: flex; flex-direction: row; align-items: center; } .carina-navigation-next__navigation-user-profile__link--expanded { width: 100%; } .carina-navigation-next__navigation-user-profile__accounts-header { color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-2xs); text-transform: uppercase; } .carina-navigation-next__navigation-user-profile__link-icon { margin-inline-end: var(--carina-spacing-2); } .carina-navigation-next__navigation-user-profile__account-link { display: flex; width: 100%; justify-content: space-between; } .carina-navigation-next__navigation-user-profile__account-link:hover .carina-navigation-next__navigation-user-profile__account-link-end { color: var(--carina-text-color-base); } .carina-navigation-next__navigation-user-profile__account-link-start { display: flex; flex-direction: row; align-items: center; width: 100%; } .carina-navigation-next__navigation-user-profile__account-link-end { color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-2xs); } .carina-navigation-next__object-header-container { --carina-navigation-object-header-full-height: 80px; --carina-navigation-object-header-border-height: var(--carina-spacing-px); background-color: var(--carina-background-color-surface-alt); color: var(--carina-text-color-base); padding: var(--carina-spacing-4); } .carina-navigation-next__object-header-container__top { display: flex; width: 100%; align-items: center; margin: 0; padding-bottom: var(--carina-spacing-2); } .carina-navigation-next__object-header-container__top * { color: var(--carina-text-color-base); } .carina-navigation-next__object-header-container__top-breadcrumbs { width: calc(100% - 4rem); } .carina-navigation-next__object-header-container__top-chevron-container { display: none; } .carina-navigation-next__object-header-container__top-icon-container { display: none; } .carina-navigation-next__object-header-container__top-breadcrumbs-root { font-size: var(--carina-font-size-sm); white-space: nowrap; } .carina-navigation-next__object-header-container__top-breadcrumbs-object { display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: var(--carina-font-weight-bold); font-size: var(--carina-font-size-lg); } .carina-navigation-next__object-header-container__top-breadcrumbs-root, .carina-navigation-next__object-header-container__top-chevron { display: none; } .carina-navigation-next__object-header-container__top-chevron { margin: var(--carina-spacing-0) var(--carina-spacing-1); } .carina-navigation-next__object-header-container__top-end-content { inset-inline-end: 0; margin: var(--carina-spacing-0) var(--carina-spacing-6); position: absolute; } .carina-navigation-next__object-header-container__top-end-content > * { display: none; font-size: var(--carina-font-size-sm); } .carina-navigation-next__object-header-container__lower-container { display: flex; flex-direction: column; font-size: var(--carina-font-size-sm); } .carina-navigation-next__object-navigation-link { display: flex; padding: var(--carina-spacing-0); border-radius: var(--carina-border-radius-xl); font-size: var(--carina-font-size-body-sm); align-items: center; min-height: 2rem; cursor: pointer; } .carina-navigation-next__object-navigation-link:hover, .carina-navigation-next__object-navigation-link:focus-within { background-color: var(--carina-background-color-surface-hover); } .carina-navigation-next__object-navigation-link:focus-within { box-shadow: var(--carina-ring-base); outline: 0; } .carina-navigation-next__object-navigation-link a { display: flex; min-height: 1.5rem; width: 100%; border-radius: var(--carina-border-radius-xl); align-items: center; color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-sm); line-height: var(--carina-line-height-body-md); text-decoration: none; } .carina-navigation-next__object-navigation-link a:hover, .carina-navigation-next__object-navigation-link a:focus-within { color: var(--carina-text-color-base); outline: 0; } .carina-navigation-next__object-navigation-link--current { background-color: var(--carina-background-color-surface-selected); } .carina-navigation-next__object-navigation-link--current a { color: var(--carina-text-color-base); font-weight: bold; } .carina-navigation-next__object-navigation-link--disabled { background-color: transparent; cursor: not-allowed; } .carina-navigation-next__object-navigation-link--disabled:hover, .carina-navigation-next__object-navigation-link--disabled:focus-within { background-color: transparent; } .carina-navigation-next__object-navigation-link--disabled:focus-within { outline: 0; } .carina-navigation-next__object-navigation-link--disabled a { color: var(--carina-text-color-disabled); pointer-events: none; } .carina-navigation-next__object-navigation-link--disabled a:focus-visible { outline: 0; } .carina-navigation-next__object-navigation-link__indicator { align-self: stretch; background-color: var(--carina-border-color-secondary-focus); border-radius: var(--carina-border-radius-xl); margin: var(--carina-spacing-1-5) var(--carina-spacing-1); visibility: hidden; width: 0.25rem; } .carina-navigation-next__object-navigation-link__indicator--current { visibility: visible; } .carina-navigation-next__object-navigation-menu { --carina-background-color-surface: #eeeff0; --carina-background-color-surface-active: #f6f7f7; --carina-background-color-surface-hover: #f6f7f7; --carina-background-color-surface-selected: #f6f7f7; max-width: 15.5rem; padding: var(--carina-spacing-6); background: var(--carina-background-color-surface); color: var(--carina-text-color-base); box-shadow: var(--carina-box-shadow-lg); border-start-end-radius: var(--carina-border-radius-xl); border-end-end-radius: var(--carina-border-radius-xl); } .carina-navigation-next__object-navigation-menu::before { content: ''; height: 2.5rem; width: 2rem; position: absolute; top: calc(50% - 1.25rem); left: -2rem; z-index: 1; } .carina-popper:has(> .carina-navigation-next__object-navigation-menu) { border-start-end-radius: var(--carina-border-radius-xl); border-end-end-radius: var(--carina-border-radius-xl); } .carina-navigation-next__object-navigation-menu-heading { display: flex; flex-direction: row; align-items: center; margin-bottom: var(--carina-spacing-2); } .carina-navigation-next__object-navigation-menu-heading-text { margin: var(--carina-spacing-0); font-size: var(--carina-font-size-header-6); } .carina-navigation-next__object-navigation-menu-description { color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-xs); } .carina-navigation-next__object-navigation-menu-list { margin: var(--carina-spacing-3) var(--carina-spacing-2) var(--carina-spacing-0) var(--carina-spacing-0); padding: var(--carina-spacing-0); } .carina-navigation-next__object-navigation-menu-heading-icon { margin-inline-end: var(--carina-spacing-2); } .carina-navigation-next__object-sidebar-collapse { width: 100%; min-width: 64px; } .carina-navigation-next__object-sidebar-container { --carina-background-color-surface-active: #f6f7f7; --carina-background-color-surface-hover: #f6f7f7; --carina-background-color-surface-selected: #f6f7f7; --carina-navigation-object-sidebar-full-width: 224px; --carina-navigation-object-sidebar-compact-width: 64px; container-type: inline-size; container-name: object; height: calc(100vh - 80px); color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface); position: relative; } .carina-navigation-object-sidebar-container-scroll .carina-navigation-next__object-sidebar-link, .carina-navigation-object-sidebar-container-scroll .carina-navigation-next__object-sidebar-dropdown { margin-bottom: var(--carina-spacing-2); padding-inline-end: var(--carina-spacing-2); } .carina-navigation-object-sidebar-container-scroll .carina-scroll-view-with-bars__footer { margin: var(--carina-spacing-0); padding: var(--carina-spacing-2); padding-inline-end: var(--carina-spacing-3); } .carina-navigation-object-sidebar-container-scroll .carina-scroll-view-with-bars__scroll-view { position: static; } .carina-navigation-next__object-sidebar-container-container { display: flex; flex-direction: column; align-items: center; background-color: var(--carina-background-color-surface); width: 100%; margin: var(--carina-spacing-0); padding: var(--carina-spacing-3) var(--carina-spacing-2); padding-inline-end: var(--carina-spacing-3); } .carina-navigation-next__object-sidebar-container-container > div { width: 100%; } .carina-navigation-next__object-sidebar-dropdown { display: flex; width: 100%; padding: var(--carina-spacing-0); border-radius: var(--carina-border-radius-xl); font-size: var(--carina-font-size-body-sm); justify-content: center; min-height: 2rem; cursor: pointer; flex-direction: column; } .carina-navigation-next__object-sidebar-dropdown a { padding: var(--carina-spacing-0) var(--carina-spacing-2); border-radius: var(--carina-border-radius-xl); color: var(--carina-text-color-base); font-size: var(--carina-font-size-body-md); text-decoration: none; } .carina-navigation-next__object-sidebar-dropdown:hover .carina-navigation-next__object-sidebar-dropdown-start-icon, .carina-navigation-next__object-sidebar-dropdown:hover .carina-navigation-next__object-sidebar-dropdown-title, .carina-navigation-next__object-sidebar-dropdown:hover .carina-navigation-next__object-sidebar-dropdown-chevron { color: var(--carina-text-color-base); } .carina-navigation-next__object-sidebar-dropdown-row { display: flex; flex-direction: row; align-items: center; padding: var(--carina-spacing-1) var(--carina-spacing-3); } .carina-navigation-next__object-sidebar-dropdown-row:active { background-color: var(--carina-background-color-surface-active); } .carina-navigation-next__object-sidebar-dropdown-row:hover { background-color: var(--carina-background-color-surface); border-radius: var(--carina-border-radius-xl); } .carina-navigation-next__object-sidebar-dropdown-row:focus-within { border-radius: var(--carina-border-radius-xl); box-shadow: var(--carina-ring-base); outline: 0; } .carina-navigation-next__object-sidebar-dropdown--disabled { background-color: transparent; pointer-events: none; } .carina-navigation-next__object-sidebar-dropdown--disabled a { color: var(--carina-text-color-disabled); } .carina-navigation-next__object-sidebar-dropdown--disabled a:focus-visible { box-shadow: var(--carina-ring-base); outline: 0; } .carina-navigation-next__object-sidebar-dropdown--disabled svg { color: var(--carina-text-color-disabled); } .carina-navigation-next__object-sidebar-dropdown-link__indicator { border-radius: var(--carina-border-radius-xl); height: 1.25rem; width: 0.25rem; background-color: var(--carina-border-color-secondary-focus); margin: var(--carina-spacing-0) var(--carina-spacing-2) var(--carina-spacing-0) var(--carina-spacing-1-5); } .carina-navigation-next__object-sidebar-dropdown-start-icon { color: var(--carina-text-color-base); } .carina-navigation-next__object-sidebar-dropdown-start-icon--current { color: var(--carina-text-color-base); } .carina-navigation-next__object-sidebar-dropdown-title { padding-inline-start: var(--carina-spacing-2); color: var(--carina-text-color-base); } .carina-navigation-next__object-sidebar-dropdown-title:hover { color: var(--carina-text-color-base); } .carina-navigation-next__object-sidebar-dropdown-title:focus-within { outline: 0; } .carina-navigation-next__object-sidebar-dropdown-chevron { color: var(--carina-text-color-base); margin-inline-start: auto; } .carina-navigation-next__object-sidebar-dropdown-dropdown { display: flex; flex-direction: column; align-items: center; list-style: none; border-radius: var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-border-radius-xl) var(--carina-border-radius-xl); margin: var(--carina-spacing-1) var(--carina-spacing-0); padding-inline-start: var(--carina-spacing-0); } .carina-navigation-next__object-sidebar-dropdown-dropdown * { color: var(--carina-text-color-base); } .carina-navigation-next__object-sidebar-dropdown--expanded, .carina-navigation-next__object-sidebar-dropdown-title--expanded, .carina-navigation-next__object-sidebar-dropdown-start-icon--expanded, .carina-navigation-next__object-sidebar-dropdown-dropdown--expanded { background-color: var(--carina-background-color-surface); color: var(--carina-text-color-base); } .carina-navigation-next__object-sidebar-dropdown-title--disabled { color: var(--carina-text-color-disabled); } .carina-navigation-next__object-sidebar-dropdown-list-item { display: flex; align-items: center; text-align: start; width: 100%; padding: var(--carina-spacing-0) var(--carina-spacing-1); } .carina-navigation-next__object-sidebar-dropdown-list-item .carina-navigation-next__object-sidebar-dropdown-link { font-size: var(--carina-font-size-body-sm); display: flex; align-items: center; padding-inline-start: var(--carina-spacing-9); padding-top: var(--carina-spacing-1); padding-bottom: var(--carina-spacing-1); width: 100%; border-radius: var(--carina-border-radius-xl); } .carina-navigation-next__object-sidebar-dropdown-list-item .carina-navigation-next__object-sidebar-dropdown-link:hover { background-color: var(--carina-background-color-surface-hover); color: var(--carina-text-color-base); } .carina-navigation-next__object-sidebar-dropdown-list-item .carina-navigation-next__object-sidebar-dropdown-link:focus-within { box-shadow: var(--carina-ring-base); outline: 0; width: 100%; } .carina-navigation-next__object-sidebar-dropdown-list-item .carina-navigation-next__object-sidebar-dropdown-link:has(.carina-navigation-next__object-sidebar-dropdown-link__indicator) { padding-inline-start: var(--carina-spacing-5); } .carina-navigation-next__object-sidebar-dropdown-list-item .carina-navigation-next__object-sidebar-dropdown-link--disabled { background-color: transparent; pointer-events: none; color: var(--carina-text-color-disabled); } .carina-navigation-next__object-sidebar-dropdown-list-item .carina-navigation-next__object-sidebar-dropdown-link--disabled:focus-visible { box-shadow: var(--carina-ring-base); outline: 0; } .carina-navigation-next__object-sidebar-link { width: 100%; width: min-content; display: flex; border-radius: var(--carina-border-radius-xl); font-size: var(--carina-font-size-body-sm); align-items: center; min-height: 2rem; cursor: pointer; padding-inline-start: 0; } .carina-navigation-next__object-sidebar-link:active { background-color: var(--carina-background-color-surface-active); } .carina-navigation-next__object-sidebar-link:focus-within { box-shadow: var(--carina-ring-base); outline: 0; } .carina-navigation-next__object-sidebar-link:hover { background-color: var(--carina-background-color-surface-hover); } .carina-navigation-next__object-sidebar-link a, .carina-navigation-next__object-sidebar-link button { display: flex; width: 100%; border-radius: var(--carina-border-radius-xl); align-items: center; color: var(--carina-text-color-base); font-size: var(--carina-font-size-body-sm); line-height: normal; text-decoration: none; } .carina-navigation-next__object-sidebar-link a:focus-visible, .carina-navigation-next__object-sidebar-link button:focus-visible { outline: 0; } .carina-navigation-next__object-sidebar-link--current { background-color: var(--carina-background-color-surface-selected); } .carina-navigation-next__object-sidebar-link--current a { font-weight: var(--carina-font-weight-semi-bold); } .carina-navigation-next__object-sidebar-link--disabled, .carina-navigation-next__object-sidebar-link--disabled-style-only { background-color: transparent; } .carina-navigation-next__object-sidebar-link--disabled:hover, .carina-navigation-next__object-sidebar-link--disabled-style-only:hover { background-color: transparent; } .carina-navigation-next__object-sidebar-link--disabled:focus-within, .carina-navigation-next__object-sidebar-link--disabled-style-only:focus-within { outline: 0; } .carina-navigation-next__object-sidebar-link--disabled a, .carina-navigation-next__object-sidebar-link--disabled button, .carina-navigation-next__object-sidebar-link--disabled-style-only a, .carina-navigation-next__object-sidebar-link--disabled-style-only button { color: var(--carina-text-color-disabled); } .carina-navigation-next__object-sidebar-link--disabled a:focus-visible, .carina-navigation-next__object-sidebar-link--disabled button:focus-visible, .carina-navigation-next__object-sidebar-link--disabled-style-only a:focus-visible, .carina-navigation-next__object-sidebar-link--disabled-style-only button:focus-visible { outline: 0; } .carina-navigation-next__object-sidebar-link--disabled svg, .carina-navigation-next__object-sidebar-link--disabled-style-only svg { color: var(--carina-text-color-disabled); } .carina-navigation-next__object-sidebar-link--disabled { pointer-events: none; } .carina-navigation-next__object-sidebar-link__indicator { align-self: stretch; background-color: var(--carina-border-color-secondary-focus); border-radius: var(--carina-border-radius-xl); margin: var(--carina-spacing-1-5) var(--carina-spacing-1); margin: 0 var(--carina-spacing-1) 0 var(--carina-spacing-0-5); visibility: hidden; width: 0.25rem; } .carina-navigation-next__object-sidebar-link__indicator--current { visibility: visible; } .carina-navigation-next__object-sidebar-link__spacer { min-width: var(--carina-spacing-5); height: var(--carina-spacing-5); width: var(--carina-spacing-5); } .carina-navigation-next__object-sidebar-link__start-icon { min-width: 20px; } .carina-navigation-next__object-sidebar-link__link { display: inline-flex; width: 100%; margin: var(--carina-spacing-1) var(--carina-spacing-0); word-break: break-word; transition: max-height var(--carina-transition-duration-300) var(--carina-transition-timing-function-productive-ease-out); } .carina-navigation-next__object-sidebar-link__chevron { display: none; } .carina-navigation-next__object-sidebar-link__chevron--flyout { margin-inline-start: var(--carina-spacing-2-5); } [dir='rtl'] .carina-navigation-next__object-sidebar-link__chevron--flyout { transform: rotate(180deg); } .carina-navigation-next__object-sidebar-link__children-wrapper { flex-grow: 2; text-align: justify; margin-inline-start: var(--carina-spacing-2); opacity: 0; clip: rect(0, 0, 0, 0); height: 0px; width: unset; position: absolute; } .carina-navigation-next__solution-navigation-link { display: flex; padding: var(--carina-spacing-0); border-radius: var(--carina-border-radius-xl); font-size: var(--carina-font-size-body-sm); align-items: center; min-height: 2rem; cursor: pointer; } .carina-navigation-next__solution-navigation-link:hover { background-color: var(--carina-background-color-surface-hover); } .carina-navigation-next__solution-navigation-link:focus-within { box-shadow: var(--carina-ring-base); outline: 0; } .carina-navigation-next__solution-navigation-link a { display: flex; min-height: 1.5rem; width: 100%; border-radius: var(--carina-border-radius-xl); align-items: center; color: var(--carina-text-color-base); font-size: var(--carina-font-size-body-sm); line-height: normal; text-decoration: none; } .carina-navigation-next__solution-navigation-link a:focus-visible { outline: 0; } .carina-navigation-next__solution-navigation-link--current { background-color: var(--carina-background-color-surface-hover); } .carina-navigation-next__solution-navigation-link--current a { font-weight: bold; } .carina-navigation-next__solution-navigation-link--disabled { background-color: transparent; cursor: not-allowed; } .carina-navigation-next__solution-navigation-link--disabled:hover { background-color: transparent; } .carina-navigation-next__solution-navigation-link--disabled:focus-within { outline: 0; } .carina-navigation-next__solution-navigation-link--disabled a { color: var(--carina-text-color-disabled); pointer-events: none; } .carina-navigation-next__solution-navigation-link--disabled a:focus-visible { outline: 0; } .carina-navigation-next__solution-navigation-link__indicator { align-self: stretch; background-color: var(--carina-border-color-secondary-focus); border-radius: var(--carina-border-radius-xl); margin: var(--carina-spacing-1-5) var(--carina-spacing-1); visibility: hidden; width: 0.25rem; } .carina-navigation-next__solution-navigation-link__indicator--current { visibility: visible; } .carina-navigation-next__solution-navigation-logo { --carina-navigation-logo-height: 80px; background-color: color-mix( in srgb, var(--carina-background-color-primary) 50%, transparent ); display: flex; width: 100%; height: calc(var(--carina-navigation-logo-height) - var(--carina-spacing-px)); align-items: center; justify-content: center; } .carina-navigation-next__solution-navigation-logo a { position: relative; width: 100%; text-decoration: none; outline: none; } .carina-navigation-next__solution-navigation-logo a:focus-within img { outline: var(--carina-border-width-2) var(--carina-border-color-hard) solid; outline-offset: var(--carina-border-width-8); border-radius: var(--carina-border-radius-lg); } .carina-navigation-next__solution-navigation-logo img { margin: auto; padding: var(--carina-spacing-0) var(--carina-spacing-2); } .carina-navigation-next__solution-navigation-logo:focus-within { outline: 0; } .carina-navigation-next__solution-navigation-logo__compact { display: none; opacity: 0%; transition-property: opacity; transition-duration: var(--carina-transition-duration-200); transition-timing-function: var(--carina-transition-timing-function-linear); } .carina-navigation-next__solution-navigation-logo__compact--compact:hover { display: flex; opacity: 0%; } .carina-navigation-next__solution-navigation-logo__full { display: flex; opacity: 100%; transform: translateX(0%); transition-property: transform; transition-duration: var(--carina-transition-duration-200); transition-timing-function: var(--carina-transition-timing-function-linear); } .carina-navigation-next__solution-navigation-logo__full--compact { display: flex; opacity: 0%; } .carina-navigation-next__solution-navigation-menu { --carina-background-color-surface-active: #003673; --carina-background-color-surface-alt: #183f6d; --carina-background-color-surface-hover: #003673; --carina-background-color-surface-selected: #003673; max-width: 15.5rem; padding: var(--carina-spacing-6); box-shadow: var(--carina-box-shadow-lg); border-start-end-radius: var(--carina-border-radius-xl); border-end-end-radius: var(--carina-border-radius-xl); background-color: var(--carina-background-color-surface); } .carina-navigation-next__solution-navigation-menu::before { content: ''; height: 2.5rem; width: 2rem; position: absolute; top: calc(50% - 1.5625rem); left: -2rem; z-index: 1; } .carina-popper:has(> .carina-navigation-next__solution-navigation-menu) { border-start-end-radius: var(--carina-border-radius-xl); border-end-end-radius: var(--carina-border-radius-xl); } .carina-navigation-next__solution-navigation-menu-heading { display: flex; flex-direction: row; align-items: center; margin-bottom: var(--carina-spacing-2); } .carina-navigation-next__solution-navigation-menu-heading-text { margin: var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-2); font-size: var(--carina-font-size-header-5); color: var(--carina-text-color-base); } .carina-navigation-next__solution-navigation-menu-description { color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-xs); } .carina-navigation-next__solution-navigation-menu-list { margin: var(--carina-spacing-4) var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-0); padding: var(--carina-spacing-0); } .carina-navigation-next__solution-sidebar-collapse { width: 100%; min-width: 80px; } .carina-navigation-next__solution-sidebar-container { --carina-background-color-surface-active: #003673; --carina-background-color-surface-alt: #183f6d; --carina-background-color-surface-hover: #003673; --carina-background-color-surface-selected: #003673; --carina-navigation-solution-sidebar-full-width: 304px; --carina-navigation-solution-sidebar-compact-width: 80px; --carina-navigation-solution-sidebar-mobile-width: 100%; container-type: inline-size; container-name: solution; height: 100vh; background-color: var(--carina-background-color-surface); position: relative; } .carina-navigation-next__solution-sidebar-container-scroll .carina-navigation-next__solution-navigation-logo { margin: var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-5) var(--carina-spacing-0); } .carina-navigation-next__solution-sidebar-container-scroll .carina-navigation-next__solution-sidebar-link, .carina-navigation-next__solution-sidebar-container-scroll .carina-navigation-next__solution-sidebar-dropdown, .carina-navigation-next__solution-sidebar-container-scroll .carina-navigation-next__app-switcher-button { margin: var(--carina-spacing-0-5) var(--carina-spacing-3) var(--carina-spacing-5) var(--carina-spacing-3); } .carina-navigation-next__solution-sidebar-container-scroll .carina-scroll-view-with-bars__scroll-view { position: static; scrollbar-color: var(--carina-border-color-primary) var(--carina-background-color-surface); scrollbar-width: thin; } .carina-navigation-next__solution-sidebar-container-scroll .carina-scroll-view-with-bars__header--shadow { box-shadow: var(--carina-box-shadow-xl); } .carina-navigation-next__solution-sidebar-container-scroll .carina-scroll-view-with-bars__footer > div:first-child { margin-top: var(--carina-spacing-5); } .carina-navigation-next__solution-sidebar-container-scroll .carina-scroll-view-with-bars__footer--shadow { box-shadow: var(--carina-box-shadow-reverse-xl); } .carina-navigation-next__solution-sidebar-container-skip-link { display: flex; background-color: var(--carina-background-color-primary); border-radius: var(--carina-border-radius-xl); border-width: var(--carina-border-width-2); box-shadow: var(--carina-ring-base); justify-content: center; outline: 0; } .carina-navigation-next__solution-sidebar-container-skip-link:focus { position: absolute; width: 17.25rem; } .carina-navigation-next__solution-sidebar-container-container { display: flex; flex-direction: column; width: 100%; margin: var(--carina-spacing-0); padding: var(--carina-spacing-0); } .carina-navigation-next__solution-sidebar-dropdown { display: flex; padding-top: var(--carina-spacing-0); padding-bottom: var(--carina-spacing-0); padding-inline-end: var(--carina-spacing-2); padding-inline-start: var(--carina-spacing-0); border-radius: var(--carina-border-radius-xl); font-size: var(--carina-font-size-body-md); justify-content: center; min-height: 2.5rem; cursor: pointer; width: min-content; flex-direction: column; } .carina-navigation-next__solution-sidebar-dropdown .carina-collapse--vertical { display: none; } .carina-navigation-next__solution-sidebar-dropdown .carina-collapse__wrapper { width: 100%; } .carina-navigation-next__solution-sidebar-dropdown a { padding: var(--carina-spacing-0) var(--carina-spacing-2); border-radius: var(--carina-border-radius-xl); color: var(--carina-text-color-soft); text-decoration: none; } .carina-navigation-next__solution-sidebar-dropdown:active { background-color: var(--carina-background-color-surface-active); } .carina-navigation-next__solution-sidebar-dropdown:hover { background-color: var(--carina-background-color-surface-hover); } .carina-navigation-next__solution-sidebar-dropdown:hover .carina-navigation-next__solution-sidebar-dropdown-start-icon, .carina-navigation-next__solution-sidebar-dropdown:hover .carina-navigation-next__solution-sidebar-dropdown-title, .carina-navigation-next__solution-sidebar-dropdown:hover .carina-navigation-next__solution-sidebar-dropdown-chevron { color: var(--carina-text-color-base); } .carina-navigation-next__solution-sidebar-dropdown:focus-within { border-radius: var(--carina-border-radius-xl); box-shadow: var(--carina-ring-base); outline: 0; } .carina-navigation-next__solution-sidebar-dropdown--current { background-color: var(--carina-background-color-surface-active); } .carina-navigation-next__solution-sidebar-dropdown--current a, .carina-navigation-next__solution-sidebar-dropdown--current svg, .carina-navigation-next__solution-sidebar-dropdown--current .carina-navigation-next__solution-sidebar-dropdown-chevron { color: var(--carina-text-color-base); } .carina-navigation-next__solution-sidebar-dropdown--disabled { background-color: transparent; pointer-events: none; } .carina-navigation-next__solution-sidebar-dropdown--disabled a, .carina-navigation-next__solution-sidebar-dropdown--disabled svg { color: var(--carina-text-color-disabled); } .carina-navigation-next__solution-sidebar-dropdown--disabled a:focus-visible, .carina-navigation-next__solution-sidebar-dropdown--disabled svg:focus-visible { box-shadow: var(--carina-ring-base); outline: 0; } .carina-navigation-next__solution-sidebar-dropdown-indicator { border-radius: var(--carina-border-radius-xl); height: 1.5rem; width: 0.25rem; background-color: var(--carina-border-color-secondary-focus); visibility: hidden; margin: var(--carina-spacing-0) var(--carina-spacing-0-5) var(--carina-spacing-0) var(--carina-spacing-1-5); } .carina-navigation-next__solution-sidebar-dropdown-indicator--current { visibility: visible; } .carina-navigation-next__solution-sidebar-dropdown-start-icon { color: var(--carina-text-color-soft); flex-shrink: 0; } .carina-navigation-next__solution-sidebar-dropdown-title { display: none; color: var(--carina-text-color-soft); } .carina-navigation-next__solution-sidebar-dropdown-title:hover { color: var(--carina-text-color-base); } .carina-navigation-next__solution-sidebar-dropdown-title:focus-within { outline: 0; } .carina-navigation-next__solution-sidebar-dropdown-start-icon--current, .carina-navigation-next__solution-sidebar-dropdown-title--current { color: var(--carina-text-color-base); } .carina-navigation-next__solution-sidebar-dropdown-chevron { display: none; color: var(--carina-text-color-soft); margin-inline-end: var(--carina-spacing-1); } [dir='rtl'] .carina-navigation-next__solution-sidebar-dropdown-chevron { transform: rotate(180deg); } .carina-navigation-next__solution-sidebar-dropdown-row { display: flex; flex-direction: row; align-items: center; padding: var(--carina-spacing-1) var(--carina-spacing-0); } .carina-navigation-next__solution-sidebar-dropdown-row:focus-within { outline: 0; } .carina-navigation-next__solution-sidebar-dropdown-dropdown { display: flex; flex-direction: column; align-items: center; list-style: none; border-radius: var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-border-radius-xl) var(--carina-border-radius-xl); margin: var(--carina-spacing-1) var(--carina-spacing-0); padding-inline-start: var(--carina-spacing-0); } .carina-navigation-next__solution-sidebar-dropdown-dropdown * { color: var(--carina-text-color-soft); } .carina-navigation-next__solution-sidebar-dropdown--expanded, .carina-navigation-next__solution-sidebar-dropdown-title--expanded, .carina-navigation-next__solution-sidebar-dropdown-start-icon--expanded, .carina-navigation-next__solution-sidebar-dropdown-dropdown--expanded, .carina-navigation-next__solution-sidebar-dropdown-chevron--expanded { background-color: var(--carina-background-color-surface-active); color: var(--carina-text-color-base); } .carina-navigation-next__solution-sidebar-dropdown-title--disabled { color: var(--carina-text-color-disabled); } .carina-navigation-next__solution-sidebar-dropdown-dropdown-list-item { text-align: start; width: 100%; padding-inline-start: var(--carina-spacing-11); } .carina-navigation-next__solution-sidebar-dropdown-dropdown-list-item:hover { background-color: var(--carina-background-color-surface); } .carina-navigation-next__solution-sidebar-dropdown-dropdown-list-item:hover .carina-navigation-next__solution-sidebar-dropdown-dropdown-link { color: var(--carina-text-color-base); } .carina-navigation-next__solution-sidebar-dropdown-dropdown-list-item a { font-size: var(--carina-font-size-body-sm); } .carina-navigation-next__solution-sidebar-dropdown-dropdown-list-item a:focus-within { box-shadow: var(--carina-ring-base); margin-inline-end: var(--carina-spacing-8); outline: 0; width: 100%; } .carina-navigation-next__solution-sidebar-link { display: flex; padding: var(--carina-spacing-0) var(--carina-spacing-3) var(--carina-spacing-0) var(--carina-spacing-0); border-radius: var(--carina-border-radius-xl); font-size: var(--carina-font-size-body-md); align-items: center; min-height: 2.5rem; cursor: pointer; width: min-content; } .carina-navigation-next__solution-sidebar-link:active { background-color: var(--carina-background-color-surface-active); } .carina-navigation-next__solution-sidebar-link:focus-within { box-shadow: var(--carina-ring-base); outline: 0; } .carina-navigation-next__solution-sidebar-link:hover:not(.carina-navigation-next__solution-sidebar-link--disabled):not(.carina-navigation-next__solution-sidebar-link--disabled-style-only) { background-color: var(--carina-background-color-surface-hover); } .carina-navigation-next__solution-sidebar-link:hover:not(.carina-navigation-next__solution-sidebar-link--disabled):not(.carina-navigation-next__solution-sidebar-link--disabled-style-only) a, .carina-navigation-next__solution-sidebar-link:hover:not(.carina-navigation-next__solution-sidebar-link--disabled):not(.carina-navigation-next__solution-sidebar-link--disabled-style-only) svg { color: var(--carina-text-color-base); } .carina-navigation-next__solution-sidebar-link a, .carina-navigation-next__solution-sidebar-link button { padding-inline-start: var(--carina-spacing-2); border-radius: var(--carina-border-radius-xl); color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-md); text-decoration: none; } .carina-navigation-next__solution-sidebar-link--current { background-color: var(--carina-background-color-surface-active); } .carina-navigation-next__solution-sidebar-link--current a, .carina-navigation-next__solution-sidebar-link--current svg { color: var(--carina-text-color-base); } .carina-navigation-next__solution-sidebar-link--disabled, .carina-navigation-next__solution-sidebar-link--disabled-style-only { background-color: transparent; } .carina-navigation-next__solution-sidebar-link--disabled:hover, .carina-navigation-next__solution-sidebar-link--disabled-style-only:hover { background-color: transparent; } .carina-navigation-next__solution-sidebar-link--disabled:focus-within, .carina-navigation-next__solution-sidebar-link--disabled-style-only:focus-within { outline: 0; } .carina-navigation-next__solution-sidebar-link--disabled a, .carina-navigation-next__solution-sidebar-link--disabled button, .carina-navigation-next__solution-sidebar-link--disabled-style-only a, .carina-navigation-next__solution-sidebar-link--disabled-style-only button { color: var(--carina-text-color-disabled); } .carina-navigation-next__solution-sidebar-link--disabled a:focus-visible, .carina-navigation-next__solution-sidebar-link--disabled button:focus-visible, .carina-navigation-next__solution-sidebar-link--disabled-style-only a:focus-visible, .carina-navigation-next__solution-sidebar-link--disabled-style-only button:focus-visible { outline: 0; } .carina-navigation-next__solution-sidebar-link--disabled svg, .carina-navigation-next__solution-sidebar-link--disabled-style-only svg { color: var(--carina-text-color-disabled); } .carina-navigation-next__solution-sidebar-link--disabled { pointer-events: none; } .carina-navigation-next__solution-sidebar-link--mobile { background-color: var(--carina-background-color-surface-alt); width: 100%; } .carina-navigation-next__solution-sidebar-link--mobile a, .carina-navigation-next__solution-sidebar-link--mobile svg { color: var(--carina-text-color-base); } .carina-navigation-next__solution-sidebar-link__indicator { border-radius: var(--carina-border-radius-xl); height: 1.5rem; width: 0.25rem; background-color: var(--carina-border-color-secondary-focus); visibility: hidden; margin: var(--carina-spacing-0) var(--carina-spacing-0-5) var(--carina-spacing-0) var(--carina-spacing-1-5); } .carina-navigation-next__solution-sidebar-link__indicator--current { visibility: visible; } .carina-navigation-next__solution-sidebar-link__spacer { min-width: var(--carina-spacing-8); height: var(--carina-spacing-8); width: var(--carina-spacing-8); } .carina-navigation-next__solution-sidebar-link__start-icon { color: var(--carina-text-color-soft); flex-shrink: 0; } .carina-navigation-next__solution-sidebar-link__start-icon--current { color: var(--carina-text-color-base); } .carina-navigation-next__solution-sidebar-link__link { display: none; word-break: break-word; } .carina-navigation-next__solution-sidebar-link__link:focus-within { outline: 0; } .carina-navigation-next__solution-sidebar-link__link > * { display: none; align-items: center; } .carina-navigation-next__solution-sidebar-link__link > *:focus-within { outline: 0; } .carina-navigation-next__solution-sidebar-link__link--mobile-top { width: calc(100% - var(--carina-spacing-10)); } .carina-navigation-next__solution-sidebar-link__chevron { display: none; } .carina-navigation-next__solution-sidebar-link__chevron--flyout { color: var(--carina-text-color-soft); margin-inline-end: var(--carina-spacing-2); } [dir='rtl'] .carina-navigation-next__solution-sidebar-link__chevron--flyout { transform: rotate(180deg); } .carina-navigation__app-switcher { display: flex; align-items: center; justify-content: center; box-sizing: content-box; width: 45px; height: 56px; padding: var(--carina-spacing-0) var(--carina-spacing-1-5); background: var(--carina-background-color-primary); margin-inline-start: var(--carina-spacing-3-5); } .carina-navigation__app-switcher .carina-button--brand { background-color: var(--carina-background-color-primary); } .carina-navigation__app-switcher .carina-button--brand:focus-visible { outline: var(--carina-border-color-soft) var(--carina-border-width-1); box-shadow: var(--carina-ring-white); } .carina-navigation__app-switcher-menu { box-sizing: border-box; width: 360px; padding: var(--carina-spacing-2) var(--carina-spacing-0); overflow: auto; font-family: var(--carina-font-family-primary); background-color: var(--carina-background-color-primary); box-shadow: var(--carina-box-shadow-lg); } .carina-navigation__app-switcher-menu ul { margin: var(--carina-spacing-0); padding: var(--carina-spacing-0); list-style: none; } .carina-navigation__app-switcher-menu-item { margin: var(--carina-spacing-0) var(--carina-spacing-2); border-radius: var(--carina-border-radius-xl); } .carina-navigation__app-switcher-menu-item:hover { background-color: var(--carina-background-color-primary-hover); } .carina-navigation__app-switcher-menu-item:active { background-color: var(--carina-background-color-primary-active); } .carina-navigation__app-switcher-menu-item a { display: flex; align-items: center; box-sizing: border-box; min-height: 40px; padding: var(--carina-spacing-1) var(--carina-spacing-4); border-radius: var(--carina-border-radius-xl); color: var(--carina-text-color-on-primary); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-md); text-decoration: none; cursor: pointer; } .carina-navigation__app-switcher-menu-item a:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); box-shadow: var(--carina-ring-white); } .carina-navigation__app-switcher-menu-item a span { margin-inline-end: var(--carina-spacing-4); display: flex; align-items: center; color: var(--carina-text-color-on-primary); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-md); } .carina-navigation__app-switcher-menu-item a span div { min-width: 75%; overflow-wrap: break-word; } .carina-navigation__app-switcher-menu-item a span > span { display: flex; align-items: center; width: 1.25rem; height: 1.5rem; margin-inline-end: var(--carina-spacing-4); } .carina-navigation__app-switcher-menu-item a span > span svg { width: 1.25rem; height: 1.25rem; } .carina-navigation__divider { width: 1px; height: 32px; background-color: var(--carina-background-color-neutral); } .carina-navigation__flyout-menu { box-sizing: border-box; width: 360px; margin: var(--carina-spacing-0); padding: var(--carina-spacing-2) var(--carina-spacing-0); border-radius: var(--carina-border-radius-xl); overflow: hidden; font-family: var(--carina-font-family-primary); list-style: none; background-color: var(--carina-background-color-surface); } .carina-navigation__flyout-menu-popper { padding: var(--carina-spacing-0); } .carina-navigation__flyout-menu-item { display: flex; box-sizing: border-box; width: 100%; min-height: 36px; } .carina-navigation__flyout-menu-item a { display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; width: 100%; height: 100%; min-height: 36px; border-radius: var(--carina-border-radius-md); color: var(--carina-text-color-base); font-weight: 300; font-size: var(--carina-font-size-body-sm); text-decoration: none; margin-inline: var(--carina-spacing-2); padding-inline: var(--carina-spacing-4); } .carina-navigation__flyout-menu-item a span { margin-inline-end: var(--carina-spacing-4); display: flex; align-items: center; } .carina-navigation__flyout-menu-item a div { min-width: 75%; overflow-wrap: break-word; } .carina-navigation__flyout-menu-item a:focus-visible { outline: none; box-shadow: var(--carina-ring-base); } .carina-navigation__flyout-menu-item:hover a { background-color: var(--carina-background-color-surface-hover); } .carina-navigation__flyout-menu-item:active a { background-color: var(--carina-background-color-surface-active); } .carina-navigation__global-navigation-link { display: flex; align-items: center; justify-content: center; height: 56px; color: var(--carina-text-color-base); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-md); font-family: var(--carina-font-family-primary); text-decoration: none; cursor: pointer; } .carina-navigation__global-navigation-link a, .carina-navigation__global-navigation-link div { display: flex; align-items: center; justify-content: center; width: 100%; height: calc(100% - 0.5rem); border-radius: var(--carina-border-radius-xl); color: var(--carina-text-color-base); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-md); font-family: var(--carina-font-family-primary); white-space: nowrap; text-decoration: none; cursor: pointer; transition-timing-function: var( --carina-transition-timing-function-productive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow; margin-inline-end: var(--carina-spacing-1-5); } .carina-navigation__global-navigation-link a { padding-inline: var(--carina-spacing-5); } .carina-navigation__global-navigation-link div { padding-inline: var(--carina-spacing-4); margin-inline-start: var(--carina-spacing-0); margin-top: var(--carina-spacing-1); margin-bottom: var(--carina-spacing-1); } .carina-navigation__global-navigation-link div svg { padding-inline-start: var(--carina-spacing-2); box-sizing: border-box; } .carina-navigation__global-navigation-link:hover a, .carina-navigation__global-navigation-link:hover div { background-color: var(--carina-background-color-surface-hover); } .carina-navigation__global-navigation-link:active a, .carina-navigation__global-navigation-link:active div { background-color: var(--carina-background-color-surface-active); } .carina-navigation__global-navigation-link:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); box-shadow: var(--carina-ring-base); } .carina-navigation__global-navigation-link--selected:hover a, .carina-navigation__global-navigation-link--selected:hover div, .carina-navigation__global-navigation-link--selected:active a, .carina-navigation__global-navigation-link--selected:active div { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-selected); } .carina-navigation__global-navigation-link--selected span, .carina-navigation__global-navigation-link--selected svg { color: var(--carina-text-color-primary); } .carina-navigation__global-navigation-menu { position: relative; display: inline-block; height: 100%; } .carina-navigation__global-navigation-menu-container { position: absolute; bottom: var(--carina-spacing-0); z-index: var(--carina-z-index-panel); display: none; width: 220px; height: auto; margin: var(--carina-spacing-0); padding: var(--carina-spacing-2) var(--carina-spacing-0); border-radius: var(--carina-border-radius-xl); color: var(--carina-text-color-base); background: var(--carina-background-color-popper); box-shadow: var(--carina-box-shadow-lg); transform: translateY(100%); inset-inline-start: var(--carina-spacing-0); } .carina-navigation__global-navigation-menu-container--selected { display: block; } .carina-navigation__global-navigation-menu-item { display: inline-block; width: 100%; color: var(--carina-text-color-base); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-sm); font-family: var(--carina-font-family-primary); white-space: nowrap; padding-inline: var(--carina-spacing-2); } .carina-navigation__global-navigation-menu-item a { display: block; box-sizing: border-box; padding: var(--carina-spacing-2); border-radius: var(--carina-border-radius-md); color: var(--carina-text-color-base); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-sm); font-family: var(--carina-font-family-primary); white-space: normal; text-align: start; text-decoration: none; transition-timing-function: var( --carina-transition-timing-function-productive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow; } .carina-navigation__global-navigation-menu-item a:hover { background-color: var(--carina-background-color-surface-hover); } .carina-navigation__global-navigation-menu-item a:active { background-color: var(--carina-background-color-surface-active); } .carina-navigation__global-navigation-menu-item a:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); box-shadow: var(--carina-ring-base); } .carina-navigation__logo { display: flex; align-items: center; height: 18px; padding: var(--carina-spacing-0) var(--carina-spacing-6); } .carina-navigation__logo a { text-decoration: none; } .carina-navigation__logo-image { width: 93px; height: 18px; object-fit: contain; vertical-align: middle; } .carina-navigation__page-title { color: var(--carina-text-color-base); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-xl); line-height: var(--carina-line-height-display-2xs); margin-inline-start: var(--carina-spacing-2); margin-block-end: 1rem; margin-block-start: 1rem; font-family: var(--carina-font-family-primary); } .carina-navigation__product-title { overflow: hidden; color: var(--carina-text-color-primary); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-xl); font-family: var(--carina-font-family-primary); line-height: var(--carina-line-height-tight); letter-spacing: 1; white-space: nowrap; text-transform: uppercase; text-overflow: ellipsis; padding-inline-start: var(--carina-spacing-4); } .carina-navigation__search { display: flex; align-items: center; width: 40px; height: 40px; margin-inline: var(--carina-spacing-1); } .carina-navigation__search-collapse { position: absolute; z-index: calc(var(--carina-z-index-current, 0) + 1); display: flex; align-items: center; height: 100%; inset-inline-end: var(--carina-spacing-0); } .carina-navigation__search-collapse-wrapper { display: flex; align-items: center; } .carina-navigation__search-button { margin-inline: var(--carina-spacing-0); } .carina-navigation__search-button, .carina-navigation__search-small-screen-button { display: flex; align-items: center; padding-inline: var(--carina-spacing-2); inset-inline-end: var(--carina-spacing-4); } .carina-navigation__search-filters-container { position: absolute; top: 38px; box-sizing: border-box; width: 100%; padding: var(--carina-spacing-4); border-radius: var(--carina-border-radius-sm); color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface); box-shadow: var(--carina-box-shadow-lg); } .carina-navigation__search-sub-container { position: relative; z-index: var(--carina-z-index-panel); display: flex; width: 560px; height: 100%; opacity: var(--carina-opacity-100); } .carina-navigation__search-button-wrapper { min-width: 24px; margin-inline-start: var(--carina-spacing-1); } .carina-navigation__search-button-wrapper .carina-button--icon-only.carina-button--m { position: relative; z-index: 0; box-sizing: border-box; width: 1.5rem; height: 1.5rem; min-height: 0; margin: var(--carina-spacing-0); padding: var(--carina-spacing-0); background-color: transparent; } .carina-navigation__search-button-wrapper .carina-button--icon-only.carina-button--m:hover { background-color: var(--carina-background-color-surface-hover); } .carina-navigation__search-button-wrapper .carina-button--icon-only.carina-button--m:active { background-color: var(--carina-background-color-surface-active); transform: var(scale(var(--carina-scale-shrink))); } .carina-navigation__search-button-wrapper .carina-button--icon-only.carina-button--m:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); box-shadow: var(--carina-ring-black); } .carina-navigation__search-button-wrapper .carina-button--icon-only.carina-button--m:disabled, .carina-navigation__search-button-wrapper .carina-button--icon-only.carina-button--m:disabled:hover, .carina-navigation__search-button-wrapper .carina-button--icon-only.carina-button--m:disabled:active { cursor: default; opacity: var(--carina-opacity-40); } .carina-navigation__search-container { position: relative; display: flex; flex-grow: 1; flex-wrap: wrap; align-items: center; } .carina-navigation__search-container .carina-textbox-icon { position: absolute; top: 50%; inset-inline-start: var(--carina-spacing-2-5); transform: translateY(-50%); } .carina-navigation__search-container .carina-textbox__container .carina-input-fieldset { height: 36px; } .carina-navigation__search-container .carina-textbox__input { height: 36px; border-radius: var(--carina-border-radius-sm); font-size: var(--carina-font-size-sm); padding-inline-end: var(--carina-spacing-16); } .carina-navigation__search-container .carina-button__icon, .carina-navigation__search-container .carina-textbox-icon { display: flex; align-items: center; justify-content: center; color: var(--carina-text-color-base); } .carina-navigation__search-container-icons { position: absolute; top: 50%; inset-inline-end: var(--carina-spacing-2-5); display: flex; transform: translateY(-50%); } @keyframes carina-navigation__side-navigation--outer-container-in { from { width: 0; opacity: var(--carina-opacity-0); } to { width: 320px; opacity: var(--carina-opacity-100); } } @keyframes carina-navigation__side-navigation--outer-container-out { from { width: 320px; opacity: var(--carina-opacity-100); } to { width: 0; opacity: var(--carina-opacity-0); } } @keyframes carina-navigation__side-navigation--outer-container-in-small { from { width: 0; opacity: var(--carina-opacity-0); } to { width: 100vw; opacity: var(--carina-opacity-100); } } @keyframes carina-navigation__side-navigation--outer-container-out-small { from { width: 100vw; opacity: var(--carina-opacity-100); } to { width: 0; opacity: var(--carina-opacity-0); } } @keyframes carina-navigation__side-navigation--outer-container-in-fade { from { opacity: var(--carina-opacity-0); } to { opacity: var(--carina-opacity-100); } } @keyframes carina-navigation__side-navigation--outer-container-out-fade { from { opacity: 1; } to { opacity: 0; } } .carina-navigation__side-navigation { flex-grow: 0; flex-shrink: 0; width: 0; height: 100%; overflow: auto; color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface); opacity: 0; } .carina-navigation__side-navigation--open { border-inline-end: var(--carina-border-width-1) solid var(--carina-border-color-soft); width: 320px; opacity: 1; } .carina-navigation__side-navigation--animate { animation: carina-navigation__side-navigation--outer-container-in var(--carina-transition-duration-400) var(--carina-transition-timing-function-expressive-ease-out); animation-fill-mode: forwards; } .carina-navigation__side-navigation--animate:not(.carina-navigation__side-navigation--open) { animation: carina-navigation__side-navigation--outer-container-out var(--carina-transition-duration-200) var(--carina-transition-timing-function-expressive-ease-out); animation-fill-mode: both; } .carina-navigation__side-navigation-list { margin: var(--carina-spacing-2) var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-0); padding: var(--carina-spacing-0); list-style: none; } .carina-navigation__side-navigation-header { display: flex; padding: var(--carina-spacing-3) var(--carina-spacing-6); overflow: hidden; color: var(--carina-text-color-soft); font-weight: var(--carina-font-weight-display); font-size: var(--carina-font-size-body-sm); font-family: var(--carina-font-family-primary); white-space: nowrap; text-transform: uppercase; text-overflow: ellipsis; } .carina-navigation__side-navigation-link { display: flex; align-items: center; justify-content: space-between; width: calc(100% - var(--carina-spacing-4)); margin: var(--carina-spacing-0) auto; padding: var(--carina-spacing-0); border-radius: var(--carina-border-radius-md); cursor: pointer; } .carina-navigation__side-navigation-link:hover { background-color: var(--carina-background-color-surface-hover); } .carina-navigation__side-navigation-link:hover a { color: var(--carina-text-color-base); } .carina-navigation__side-navigation-link:active { background-color: var(--carina-background-color-surface-active); } .carina-navigation__side-navigation-link:active a { color: var(--carina-text-color-base); } .carina-navigation__side-navigation-link:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); box-shadow: var(--carina-ring-base); } .carina-navigation__side-navigation-link a { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 100%; min-height: 24px; padding: var(--carina-spacing-2) var(--carina-spacing-4); border-radius: var(--carina-border-radius-md); color: var(--carina-text-color-soft); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-md); font-family: var(--carina-font-family-primary); text-align: start; text-decoration: none; transition-timing-function: var( --carina-transition-timing-function-productive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow; } .carina-navigation__side-navigation-link a:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); box-shadow: var(--carina-ring-base); } .carina-navigation__side-navigation-link--current { position: relative; background-color: var(--carina-background-color-surface-selected); cursor: default; } .carina-navigation__side-navigation-link--current::before { position: absolute; top: 0; width: var(--carina-spacing-1); height: 100%; background-color: var(--carina-border-color-secondary-focus); content: ''; inset-inline-start: 0; border-start-start-radius: var(--carina-border-radius-md); border-end-start-radius: var(--carina-border-radius-md); } .carina-navigation__side-navigation-link--current a { color: var(--carina-text-color-base); } .carina-navigation__side-navigation-link--disabled > div > a > svg { flex-shrink: 0; padding-inline-end: var(--carina-spacing-1); } .carina-navigation__side-navigation-link--disabled { position: relative; justify-content: flex-start; box-sizing: border-box; min-height: 40px; cursor: not-allowed; } .carina-navigation__side-navigation-link--disabled:hover, .carina-navigation__side-navigation-link--disabled:active { background-color: transparent; } .carina-navigation__side-navigation-link--disabled:hover a, .carina-navigation__side-navigation-link--disabled:active a { color: var(--carina-text-color-disabled); } .carina-navigation__side-navigation-menu { list-style: none; } .carina-navigation__side-navigation-menu:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); box-shadow: var(--carina-ring-base); } .carina-navigation__side-navigation-menu-list { padding-inline-start: var(--carina-spacing-6); margin-block: var(--carina-spacing-4); } .carina-navigation__side-navigation-menu-trigger { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: calc(100% - var(--carina-spacing-4)); min-height: 40px; margin: var(--carina-spacing-0) auto var(--carina-spacing-0-5); padding: var(--carina-spacing-2) var(--carina-spacing-4); border-radius: var(--carina-border-radius-md); color: var(--carina-text-color-soft); font-family: var(--carina-font-family-primary); white-space: nowrap; cursor: pointer; transition-timing-function: var( --carina-transition-timing-function-productive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow; } .carina-navigation__side-navigation-menu-trigger span { font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-md); white-space: normal; } .carina-navigation__side-navigation-menu-trigger svg { min-width: 24px; min-height: 24px; } .carina-navigation__side-navigation-menu-trigger:hover { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-hover); } .carina-navigation__side-navigation-menu-trigger:active { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-active); } .carina-navigation__side-navigation-menu-trigger:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); box-shadow: var(--carina-ring-base); } .carina-navigation__title-bar { display: flex; align-items: center; justify-content: space-between; height: 56px; border-bottom: var(--carina-border-width-1) solid var(--carina-border-color-soft); background: var(--carina-background-color-surface); color: var(--carina-text-color-base); } .carina-navigation__top-navigation { position: relative; width: 100%; } .carina-navigation__top-navigation-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 56px; background: var(--carina-background-color-surface); color: var(--carina-text-color-base); } .carina-navigation__top-navigation-border { width: 100%; height: 0.25rem; background: linear-gradient( 90deg, var(--carina-background-color-primary) 0%, var(--carina-background-color-secondary) 95% ); } @keyframes carina-navigation__top-navigation--outer-container-in { from { opacity: 0; } to { opacity: var(--carina-opacity-80); } } .carina-navigation__top-navigation-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 56px; background: var(--carina-background-color-surface); opacity: var(--carina-opacity-80); animation: carina-navigation__top-navigation--outer-container-in var(--carina-transition-duration-200) var(--carina-transition-timing-function-productive-ease-in-out); } .carina-navigation__user-profile { display: flex; flex-direction: column; align-items: center; margin-bottom: var(--carina-spacing-2); padding: var(--carina-spacing-3) var(--carina-spacing-6) var(--carina-spacing-6); border-bottom: var(--carina-border-width-1) solid var(--carina-border-color-soft); font-family: var(--carina-font-family-primary); } .carina-navigation__user-profile a { display: block; box-sizing: border-box; min-width: 112px; margin: var(--carina-spacing-4) auto; padding: var(--carina-spacing-2); border: var(--carina-border-width-1) solid var(--carina-border-color-hard); border-radius: var(--carina-border-radius-sm); color: var(--carina-text-color-base); font-size: var(--carina-font-size-body-md); text-align: center; text-decoration: none; } .carina-navigation__user-profile a:hover { background-color: var(--carina-background-color-surface-hover); } .carina-navigation__user-profile a:active { background-color: var(--carina-background-color-surface-active); } .carina-navigation__user-profile a:focus-visible { outline: none; box-shadow: var(--carina-ring-black); } .carina-navigation__user-profile-name { margin-top: var(--carina-spacing-4); font-size: var(--carina-font-size-body-md); text-align: center; cursor: default; } .carina-navigation__user-profile-email { color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-sm); text-align: center; cursor: default; } .carina-navigation__user-profile-description { margin-top: var(--carina-spacing-1); margin-bottom: var(--carina-spacing-4); font-size: var(--carina-font-size-body-xs); text-align: center; cursor: default; } .carina-pagination__item { position: relative; min-width: var(--carina-spacing-4); margin: var(--carina-spacing-0); padding: var(--carina-spacing-2); border-color: transparent; border-style: solid; border-width: var(--carina-border-width-1); border-radius: var(--carina-border-radius-full); color: var(--carina-text-color-soft); font-size: var(--carina-font-size-body-sm); font-family: inherit; line-height: 0; white-space: nowrap; text-align: center; text-transform: none; background: none; outline: none; cursor: pointer; transition-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow; appearance: none; } .carina-pagination__item::-moz-focus-inner { padding: var(--carina-spacing-0); border: 0; } .carina-pagination__item svg { margin: -8px -5px; } [dir='rtl'] .carina-pagination__item svg { transform: rotate(var(--carina-rotate-negative-180)); } .carina-pagination__item:hover { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-hover); } .carina-pagination__item:active { color: var(--carina-text-color-base); background-color: var(--carina-background-color-surface-active); } .carina-pagination__item:focus-visible { box-shadow: var(--carina-ring-base); } .carina-pagination__item--disabled { color: var(--carina-text-color-disabled); pointer-events: none; } .carina-pagination__item--selected { border-radius: 0; color: var(--carina-text-color-base); pointer-events: none; } .carina-pagination__item--selected::before { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; border-radius: var(--carina-border-radius-full); background-color: var(--carina-border-color-secondary-focus); content: ''; } .carina-pagination__item--selected:hover { background-color: transparent; } .carina-pagination__item--selected:focus { outline: none; } .carina-pagination { display: inline-flex; padding: var(--carina-spacing-0) var(--carina-border-width-2); } @keyframes carina-progress-bar--outer-container-in { 0% { left: 0; width: 30%; background-position-x: 0%; } 50% { left: 70%; width: 30%; background-position-x: 100%; } 100% { left: 0; width: 30%; background-position-x: 0%; } } @keyframes carina-progress-bar--determinate-animation { 0% { background: var( --carina-progress-bar-background, var( --carina-progress-bar-background-stop-1, var(--carina-background-color-tertiary) ) ); } 50% { background: var( --carina-progress-bar-background, var( --carina-progress-bar-background-stop-2, var(--carina-background-color-primary) ) ); } 100% { background: var( --carina-progress-bar-background, var( --carina-progress-bar-background-stop-3, var(--carina-background-color-secondary) ) ); } } .carina-progress-bar { position: relative; justify-content: center; width: 100%; color: var(--carina-text-color-body, var(--carina-text-color-base)); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-lg); font-family: var(--carina-font-family-primary); text-align: center; } .carina-progress-bar__bar-container { position: relative; width: 100%; height: 5px; margin: var(--carina-spacing-6) auto; border-radius: var(--carina-border-radius-full); overflow: visible; background: var(--carina-background-color-neutral-inactive); } .carina-progress-bar__bar-progress-bar { position: relative; display: block; height: 5px; border-radius: var(--carina-border-radius-full); background-size: 100% 5px; opacity: var(--carina-opacity-100); transition: clip-path var(--carina-transition-duration-300) linear, width var(--carina-transition-duration-300) linear, background 2000ms linear, left 2000ms linear, background-image 2000ms linear, background-color 2000ms linear, opacity 2000ms linear; } .carina-progress-bar__determinate { background-image: linear-gradient( to right, var( --carina-progress-bar-background, var( --carina-progress-bar-background-stop-1, var(--carina-background-color-tertiary) ) ), var( --carina-progress-bar-background, var( --carina-progress-bar-background-stop-2, var(--carina-background-color-primary) ) ), var( --carina-progress-bar-background, var( --carina-progress-bar-background-stop-3, var(--carina-background-color-secondary) ) ) ); clip-path: inset( 0% var(--carina-progress-bar-percentage-remaining) 0% 0% round 6px ); } .carina-progress-bar__indeterminate { background-image: linear-gradient( to right, var(--carina-background-color-secondary), var(--carina-background-color-tertiary), var(--carina-background-color-primary) ); background-size: 333%; animation: carina-progress-bar--outer-container-in 3500ms ease-in-out infinite; } @keyframes carina-pulse { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: var(--carina-pulse-opacity); } } .carina-pulse { --carina-pulse-opacity: 0; animation-name: carina-pulse; } @keyframes carina-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(calc(-1 * var(--carina-shake-distance))); } 40%, 80% { transform: translateX(var(--carina-shake-distance)); } } .carina-shell__aside:not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside) { position: sticky; top: calc( var(--carina-shell-banner-offset) + var(--carina-shell-header-offset) + var(--carina-shell-title-offset) + var(--carina-shell-breadcrumbs-offset) ); z-index: 30; max-height: calc( 100vh - var(--carina-shell-banner-offset) - var(--carina-shell-header-offset) - var(--carina-shell-title-offset) - var(--carina-shell-breadcrumbs-offset) ); overflow-x: hidden; overflow-y: auto; color: var(--carina-text-color-body, var(--carina-text-color-base)); background-color: var(--carina-background-color-surface); visibility: hidden; } @media (min-width: 1024px) { .carina-shell__aside--start:not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside--start) { --carina-shell-aside-start-width: 224px; translate: calc(var(--carina-shell-aside-start-width) * -1); grid-area: aside-start; width: var(--carina-shell-aside-start-width); transition: visibility 0ms ease-in-out 300ms, translate 300ms ease-in-out; } [dir='rtl'] .carina-shell__aside--start:not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside--start) { translate: var(--carina-shell-aside-start-width); } } @media (max-width: 1023.98px) { .carina-shell__aside--start:not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside--start) { --carina-shell-aside-start-width: 80px; position: absolute; right: unset; left: calc(var(--carina-shell-aside-start-width) * -1); z-index: 80; width: 0; box-shadow: var(--carina-box-shadow-2xl); transition: left 300ms ease-in-out, right 300ms ease-in-out, width 0ms ease-in-out 300ms, visibility 0ms ease-in-out 300ms; } [dir='rtl'] .carina-shell__aside--start:not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside--start) { right: calc(var(--carina-shell-aside-start-width) * -1); left: unset; } } .carina-shell[data-shell-enabled*='aside-start'] .carina-shell__aside--start:not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside.carina-shell__aside--start) { visibility: inherit; } @media (min-width: 1024px) { .carina-shell[data-shell-enabled*='aside-start'] .carina-shell__aside--start:not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside.carina-shell__aside--start) { translate: 0; transition: max-height 300ms ease-in-out, top 300ms ease-in-out, translate 300ms ease-in-out; } [dir='rtl'] .carina-shell[data-shell-enabled*='aside-start'] .carina-shell__aside--start:not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside.carina-shell__aside--start) { translate: 0; } } @media (max-width: 1023.98px) { .carina-shell[data-shell-enabled*='aside-start'] .carina-shell__aside--start:not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside.carina-shell__aside--start) { right: unset; left: var(--carina-shell-dock-start-width); width: var(--carina-shell-aside-start-width); transition: max-height 300ms ease-in-out, top 300ms ease-in-out, left 300ms ease-in-out, right 300ms ease-in-out; } [dir='rtl'] .carina-shell[data-shell-enabled*='aside-start'] .carina-shell__aside--start:not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside.carina-shell__aside--start) { right: var(--carina-shell-dock-start-width); left: unset; } } .carina-shell__stacked-aside[data-stack-asides='false'] { display: contents; } .carina-shell__banner { height: 100%; max-height: var(--carina-shell-banner-current-height); overflow: hidden; visibility: hidden; transition: max-height 300ms ease-in-out, visibility 0ms ease-in-out 300ms, height 0ms ease-in-out 300ms; } .carina-shell[data-shell-sticky*='banner'] .carina-shell__banner { position: sticky; top: 0; z-index: 60; } .carina-shell[data-shell-enabled*='banner'] .carina-shell__banner { visibility: inherit; transition: max-height 300ms ease-in-out; } .carina-shell__breadcrumbs { grid-area: breadcrumbs; height: var(--carina-shell-breadcrumbs-current-height); max-height: var(--carina-shell-breadcrumbs-current-height); overflow: hidden; visibility: hidden; } .carina-shell[data-shell-enabled*='breadcrumbs'] .carina-shell__breadcrumbs { visibility: inherit; } .carina-shell__dock { position: sticky; top: calc( var(--carina-shell-banner-offset) + var(--carina-shell-header-offset) + var(--carina-shell-title-offset) ); z-index: 1000; display: flex; background-color: rgb(255 255 255); visibility: hidden; } .carina-shell__dock--start { grid-area: dock-start; } .carina-shell[data-shell-enabled*='dock-start'] .carina-shell__dock--start { visibility: inherit; } .carina-shell__dock--end { grid-area: dock-end; } .carina-shell[data-shell-enabled*='dock-end'] .carina-shell__dock--end { visibility: inherit; } .carina-shell__dock-items { display: flex; } .carina-shell__dock-item { position: relative; display: flex; flex-direction: column; flex-shrink: 0; align-items: center; justify-content: center; box-sizing: border-box; min-height: 5.5rem; margin: 0.25rem; padding: 0.5rem; border-width: 0; border-radius: 10px; color: rgb(26 32 38); text-decoration: none; background-color: transparent; cursor: pointer; transition: background-color 300ms ease 0ms; } .carina-shell__dock-item:hover { background-color: rgb(247 247 247); } .carina-shell__dock-item__text { display: -webkit-box; overflow: hidden; font-size: var(--carina-font-size-xs); white-space: initial; text-align: center; text-overflow: ellipsis; word-break: break-word; overflow-wrap: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .carina-shell__footer { position: relative; grid-area: footer; height: 0; overflow-x: hidden; visibility: hidden; } .carina-shell[data-shell-enabled*='footer'] .carina-shell__footer { height: fit-content; visibility: inherit; } .carina-shell__header { height: 100%; max-height: var(--carina-shell-header-current-height); overflow: hidden; visibility: hidden; transition: max-height 300ms ease-in-out, visibility 0ms ease-in-out 300ms; } .carina-shell[data-shell-sticky*='header'] .carina-shell__header { position: sticky; top: var(--carina-shell-banner-offset); z-index: 60; transition: max-height 300ms ease-in-out, top 300ms ease-in-out, visibility 0ms ease-in-out 300ms; } .carina-shell[data-shell-enabled*='header'] .carina-shell__header { visibility: inherit; transition: max-height 300ms ease-in-out, top 300ms ease-in-out; } .carina-shell__main { grid-area: main; overflow-x: auto; } .carina-shell__page { display: grid; grid-template-areas: 'dock-start breadcrumbs breadcrumbs breadcrumbs dock-end' 'dock-start aside-start page-title aside-end dock-end' 'dock-start aside-start page-actions aside-end dock-end' 'dock-start aside-start main aside-end dock-end'; grid-template-rows: auto auto auto 1fr; grid-template-columns: var(--carina-shell-dock-start-current-width) var( --carina-shell-aside-start-current-width ) 1fr var(--carina-shell-aside-end-current-width) var(--carina-shell-dock-end-current-width); min-height: calc( 100vh - var(--carina-shell-banner-current-height) - var(--carina-shell-header-current-height) - var(--carina-shell-title-current-height) ); transition: grid-template-columns 300ms ease-in-out, grid-template-rows 300ms ease-in-out; transition: grid-template-columns 300ms ease-in-out, grid-template-rows 300ms ease-in-out, -ms-grid-columns 300ms ease-in-out, -ms-grid-rows 300ms ease-in-out; } .carina-shell__page-actions { grid-area: page-actions; height: 0; overflow-x: hidden; visibility: hidden; } .carina-shell[data-shell-enabled*='page-actions'] .carina-shell__page-actions { height: fit-content; visibility: inherit; } .carina-shell__page-title { grid-area: page-title; height: 0; overflow-x: hidden; visibility: hidden; } .carina-shell[data-shell-enabled*='page-title'] .carina-shell__page-title { height: fit-content; visibility: inherit; } .carina-shell__panel { position: fixed; top: 0; z-index: 1000; width: var(--carina-shell-panel-width); height: 100vh; overflow-x: hidden; overflow-y: auto; visibility: hidden; transition: left 300ms ease-in-out, right 300ms ease-in-out, visibility 0ms ease-in-out 300ms; } .carina-shell__panel--start { right: unset; left: calc(-1 * var(--carina-shell-panel-width)); } [dir='rtl'] .carina-shell__panel--start { right: calc(-1 * var(--carina-shell-panel-width)); left: unset; } .carina-shell[data-shell-enabled*='panel-start'] .carina-shell__panel--start { right: unset; left: 0; visibility: inherit; transition: left 300ms ease-in-out, right 300ms ease-in-out; } [dir='rtl'] .carina-shell[data-shell-enabled*='panel-start'] .carina-shell__panel--start { right: 0; left: unset; } .carina-shell__panel--end { right: calc(-1 * var(--carina-shell-panel-width)); left: unset; } [dir='rtl'] .carina-shell__panel--end { right: unset; left: calc(-1 * var(--carina-shell-panel-width)); } .carina-shell[data-shell-enabled*='panel-end'] .carina-shell__panel--end { right: 0; left: unset; visibility: inherit; transition: left 300ms ease-in-out, right 300ms ease-in-out; } [dir='rtl'] .carina-shell[data-shell-enabled*='panel-end'] .carina-shell__panel--end { right: unset; left: 0; } .carina-shell__title-bar { height: 100%; max-height: var(--carina-shell-title-current-height); overflow: hidden; visibility: hidden; transition: max-height 300ms ease-in-out, visibility 0ms ease-in-out 300ms; } .carina-shell[data-shell-sticky*='title-bar'] .carina-shell__title-bar { position: sticky; top: calc( var(--carina-shell-banner-offset) + var(--carina-shell-header-offset) ); z-index: 60; transition: max-height 300ms ease-in-out, top 300ms ease-in-out, visibility 0ms ease-in-out 300ms; } .carina-shell[data-shell-enabled*='title-bar'] .carina-shell__title-bar { visibility: inherit; transition: max-height 300ms ease-in-out, top 300ms ease-in-out; } .carina-shell__xl-panel { position: fixed; top: 0; z-index: 1000; width: auto; min-width: var(--carina-shell-xl-panel-width); height: 100vh; overflow-x: hidden; overflow-y: auto; visibility: hidden; transition: left 300ms ease-in-out, right 300ms ease-in-out, visibility 0ms ease-in-out 300ms; } .carina-shell__xl-panel--start { right: unset; left: -100%; } [dir='rtl'] .carina-shell__xl-panel--start { right: -100%; left: unset; } .carina-shell[data-shell-enabled*='xl-panel-start'] .carina-shell__xl-panel--start { right: unset; left: 0; visibility: inherit; transition: left 300ms ease-in-out, right 300ms ease-in-out; } [dir='rtl'] .carina-shell[data-shell-enabled*='xl-panel-start'] .carina-shell__xl-panel--start { right: 0; left: unset; } .carina-shell__xl-panel--end { right: calc(-1 * var(--carina-shell-xl-panel-width)); left: unset; } [dir='rtl'] .carina-shell__xl-panel--end { right: unset; left: calc(-1 * var(--carina-shell-xl-panel-width)); } .carina-shell[data-shell-enabled*='xl-panel-end'] .carina-shell__xl-panel--end { right: 0; left: unset; visibility: inherit; transition: left 300ms ease-in-out, right 300ms ease-in-out; } [dir='rtl'] .carina-shell[data-shell-enabled*='xl-panel-end'] .carina-shell__xl-panel--end { right: unset; left: 0; } .carina-shell { --carina-shell-aside-end-current-width: 0px; --carina-shell-aside-end-width: 5rem; --carina-shell-aside-start-current-width: 0px; --carina-shell-aside-start-width: 5rem; --carina-shell-banner-current-height: 0px; --carina-shell-banner-height: 60px; --carina-shell-banner-offset: 0px; --carina-shell-breadcrumbs-current-height: 0px; --carina-shell-breadcrumbs-height: 80px; --carina-shell-breadcrumbs-offset: 0px; --carina-shell-dock-end-current-width: 0px; --carina-shell-dock-end-max-height: 8.5rem; --carina-shell-dock-end-width: 5rem; --carina-shell-dock-end-expanded-width: 20rem; --carina-shell-dock-start-current-width: 0px; --carina-shell-dock-start-max-height: 8.5rem; --carina-shell-dock-start-width: 5rem; --carina-shell-dock-start-expanded-width: 19rem; --carina-shell-header-current-height: 0px; --carina-shell-header-height: 60px; --carina-shell-header-offset: 0px; --carina-shell-panel-width: 20rem; --carina-shell-xl-panel-width: 43.75rem; --carina-shell-title-current-height: 0px; --carina-shell-title-height: 60px; --carina-shell-title-offset: 0px; position: relative; top: 0; min-width: 100%; height: 100vh; overflow-x: hidden; overflow-y: auto; } .carina-shell[data-shell-enabled*='banner'] { --carina-shell-banner-current-height: var(--carina-shell-banner-height); } .carina-shell[data-shell-sticky*='banner'] { --carina-shell-banner-offset: var(--carina-shell-banner-current-height); } .carina-shell[data-shell-enabled*='header'] { --carina-shell-header-current-height: var(--carina-shell-header-height); } .carina-shell[data-shell-sticky*='header'] { --carina-shell-header-offset: var(--carina-shell-header-current-height); } .carina-shell[data-shell-enabled*='title-bar'] { --carina-shell-title-current-height: var(--carina-shell-title-height); } .carina-shell[data-shell-sticky*='title-bar'] { --carina-shell-title-offset: var(--carina-shell-title-current-height); } .carina-shell[data-shell-enabled*='breadcrumbs'] { --carina-shell-breadcrumbs-current-height: var( --carina-shell-breadcrumbs-height ); } .carina-shell[data-shell-sticky*='breadcrumbs'] { --carina-shell-breadcrumbs-offset: var( --carina-shell-breadcrumbs-current-height ); } .carina-shell[data-shell-enabled*='dock-start'] { --carina-shell-dock-start-current-width: var( --carina-shell-dock-start-width ); } .carina-shell[data-shell-enabled*='dock-end'] { --carina-shell-dock-end-current-width: var(--carina-shell-dock-end-width); } .carina-shell[data-shell-enabled*='aside-start'] { --carina-shell-aside-start-current-width: var( --carina-shell-aside-start-width ); } .carina-shell[data-shell-enabled*='aside-end'] { --carina-shell-aside-end-current-width: var(--carina-shell-aside-end-width); } @keyframes carina-skeleton--pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } @keyframes carina-skeleton--shimmer { 60%, 100% { transform: translateX(100%) skewX(173deg); } } .carina-skeleton { position: relative; display: inline-block; width: 100%; height: 1rem; border-radius: 0; border-radius: var(--carina-border-radius-sm); overflow: hidden; background-color: var(--carina-background-color-surface-alt); } .carina-skeleton--filled { background-color: var(--carina-background-color-neutral-inactive); } .carina-skeleton--pulse, .carina-skeleton--shimmer { animation-name: carina-skeleton--pulse; animation-duration: 2000ms; animation-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); animation-delay: var(--carina-transition-delay-100); animation-iteration-count: infinite; } [dir='rtl'] .carina-skeleton--pulse, [dir='rtl'] .carina-skeleton--shimmer { animation-direction: 'reverse'; } .carina-skeleton--has-children { height: inherit; padding: var(--carina-spacing-4); } .carina-slider { margin-top: var(--carina-spacing-0); margin-right: var(--carina-spacing-0); margin-bottom: var(--carina-spacing-4); margin-left: var(--carina-spacing-0); color: var(--carina-text-color-body, var(--carina-text-color-base)); direction: ltr; } .carina-slider--carina-font-reset { color: var(--carina-text-color-soft); font-weight: var(--carina-font-weight-body); font-family: var(--carina-font-family-primary); font-style: normal; letter-spacing: normal; text-align: center; text-transform: none; text-indent: 0; text-shadow: none; } .carina-slider__rheostat > div { position: relative; box-sizing: border-box; height: 2.25rem; margin: var(--carina-spacing-0) var(--carina-spacing-3); overflow: visible; cursor: pointer; } .carina-slider__rheostat--disabled > div { position: relative; box-sizing: border-box; height: 2.25rem; margin: var(--carina-spacing-0) var(--carina-spacing-3); overflow: visible; cursor: default; } .carina-slider__label { font-size: var(--carina-font-size-body-sm); line-height: var(--carina-line-height-normal); } .carina-slider__row { display: flex; align-items: center; margin-top: var(--carina-spacing-0); margin-right: var(--carina-spacing-0); margin-bottom: var(--carina-spacing-2); margin-left: var(--carina-spacing-0); } .carina-slider__row > div { flex: 1 0 auto; padding-left: var(--carina-spacing-2); line-height: 0; } .carina-slider__row > div:first-of-type { padding-left: var(--carina-spacing-0); text-align: left; } .carina-slider__row > div:last-of-type { text-align: right; } .carina-slider__row > div:not(first-of-type, last-of-type) { text-align: center; } .carina-slider__row > div:only-child { padding: var(--carina-spacing-0); text-align: center; } .carina-slider__row svg { display: inline; width: var(--carina-icon-md); height: var(--carina-icon-md); } .carina-slider__row input { width: 65px; } .carina-slider__row .carina-slider__row-cell { flex: 0 1 auto; } .carina-slider__progress-bar { position: absolute; top: calc(50% - 0.125rem); left: 0; z-index: calc(var(--carina-z-index-current) + 40); box-sizing: border-box; height: 0.25rem; border-radius: var(--carina-border-radius-full); background-color: var(--carina-text-color-primary); } .carina-slider__progress-bar--disabled { background-color: var(--carina-background-color-neutral-inactive); } .carina-slider__pit { top: calc(50% - 0.4375rem); z-index: calc(var(--carina-z-index-current) + 10); box-sizing: border-box; width: 2px; height: 0.875rem; border-radius: var(--carina-border-radius-sm); background-color: var(--carina-background-color-neutral-inactive); } .carina-slider__background { position: absolute; top: calc(50% - 0.125rem); left: 0; z-index: calc(var(--carina-z-index-current) + 20); box-sizing: border-box; width: 100%; height: 0.25rem; border-radius: var(--carina-border-radius-full); background-color: var(--carina-background-color-neutral-inactive); } .carina-slider__handle { position: absolute; top: calc(50% - 1.125rem); z-index: calc(var(--carina-z-index-current) + 50); display: flex; justify-content: center; box-sizing: border-box; width: 2.25rem; height: 2.25rem; margin-left: -1.125rem; border: none; border-radius: var(--carina-border-radius-full); overflow: visible; background-color: transparent; outline: 0; cursor: ew-resize; pointer-events: auto; } .carina-slider__handle::before { position: absolute; top: calc(50% - var(--carina-spacing-3)); z-index: calc(var(--carina-z-index-current) + 20); display: block; box-sizing: border-box; width: 1.5rem; height: 1.5rem; border: none; border-radius: var(--carina-border-radius-full); background-color: var(--carina-text-color-primary); transition-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow; content: ' '; } .carina-slider__handle:focus::before { box-shadow: var(--carina-ring-base); } .carina-slider__handle:hover::before { z-index: calc(var(--carina-z-index-current) + 70); background-color: var(--carina-text-color-primary-hover); } .carina-slider__handle:active::before { z-index: calc(var(--carina-z-index-current) + 30); background-color: var(--carina-text-color-primary); box-shadow: 0 0 0 1rem var(--carina-background-color-primary-pale); } .carina-slider__handle--disabled { pointer-events: none; } .carina-slider__handle--disabled::before { background-color: var(--carina-background-color-neutral-inactive); } .carina-slider__handle--floating-label::after { bottom: 100%; z-index: calc(var(--carina-z-index-current) + 60); display: none; box-sizing: border-box; height: 1.5rem; margin-top: -2.75rem; padding: var(--carina-spacing-1) var(--carina-spacing-2); border-radius: var(--carina-border-radius-full); color: var(--carina-text-color-primary); font-size: var(--carina-font-size-body-sm); line-height: var(--carina-line-height-normal); white-space: nowrap; text-align: center; background-color: var(--carina-background-color-surface); transform: translate3d(0, 0, 0); content: attr(aria-valuenow); } .carina-slider__handle--floating-label:hover.carina-slider__handle--floating-label::after, .carina-slider__handle--floating-label:focus.carina-slider__handle--floating-label::after, .carina-slider__handle--floating-label:active.carina-slider__handle--floating-label::after { display: block; } .carina-slider__handle--persistent-floating-label::after { display: block; } .carina-split-button { display: inline-flex; } .carina-split-button__text-button { border-start-end-radius: var(--carina-border-radius-none); border-end-end-radius: var(--carina-border-radius-none); } .carina-split-button__menu-button { margin-left: calc(-1 * var(--carina-spacing-px)); border-start-start-radius: var(--carina-border-radius-none); border-end-start-radius: var(--carina-border-radius-none); } .carina-status-label { display: inline-flex; box-sizing: border-box; max-width: 100%; padding: var(--carina-spacing-0) var(--carina-spacing-2); border-width: var(--carina-border-width-0); border-radius: var(--carina-border-radius-md); color: var(--carina-text-color-base); } .carina-status-label--positive { background-color: var(--carina-background-color-success-pale); } .carina-status-label--positive .carina-status-label__icon-start-container, .carina-status-label--positive .carina-status-label__icon-end-container { color: var(--carina-text-color-on-success-pale-soft); } .carina-status-label--negative { background-color: var(--carina-background-color-danger-pale); } .carina-status-label--negative .carina-status-label__icon-start-container, .carina-status-label--negative .carina-status-label__icon-end-container { color: var(--carina-text-color-on-danger-pale-soft); } .carina-status-label--transitional { background-color: var(--carina-background-color-warning-pale); } .carina-status-label--transitional .carina-status-label__icon-start-container, .carina-status-label--transitional .carina-status-label__icon-end-container { color: var(--carina-text-color-on-warning-pale-soft); } .carina-status-label--neutral { background-color: var(--carina-background-color-info-pale); } .carina-status-label--neutral .carina-status-label__icon-start-container, .carina-status-label--neutral .carina-status-label__icon-end-container { color: var(--carina-text-color-on-info-pale-soft); } .carina-status-label--priority:not(.carina-status-label--ghost) { background-color: var(--carina-background-color-danger); } .carina-status-label--priority:not(.carina-status-label--ghost) .carina-status-label__icon-start-container, .carina-status-label--priority:not(.carina-status-label--ghost) .carina-status-label__icon-end-container { color: var(--carina-text-color-on-danger); } .carina-status-label--inactive { background-color: var(--carina-colors-neutral-10); } .carina-status-label--inactive .carina-status-label__icon-start-container, .carina-status-label--inactive .carina-status-label__icon-end-container { color: var(--carina-colors-neutral-95); } .carina-status-label__inner-container { position: relative; display: flex; align-items: center; box-sizing: border-box; border: var(--carina-border-width-0); overflow: hidden; font-family: var(--carina-font-family-primary); white-space: nowrap; text-overflow: ellipsis; vertical-align: baseline; } .carina-status-label__inner-container--positive { color: var(--carina-text-color-on-success-pale-soft); } .carina-status-label__inner-container--negative { color: var(--carina-text-color-on-danger-pale-soft); } .carina-status-label__inner-container--transitional { color: var(--carina-text-color-on-warning-pale-soft); } .carina-status-label__inner-container--neutral { color: var(--carina-text-color-on-info-pale-soft); } .carina-status-label__inner-container--priority:not(.carina-status-label--ghost) { color: var(--carina-text-color-on-danger); } .carina-status-label__inner-container--inactive { color: var(--carina-colors-neutral-95); } .carina-status-label--pill { border-radius: var(--carina-border-radius-full); padding: var(--carina-spacing-0) var(--carina-spacing-3); } .carina-status-label.carina-status-label--ghost { background-color: var(--carina-colors-transparent); } .carina-status-label.carina-status-label--ghost.carina-status-label--priority .carina-status-label__inner-container--priority { color: var(--carina-text-color-on-danger-pale-soft); } .carina-status-label.carina-status-label--ghost.carina-status-label--priority .carina-status-label__icon-start-container, .carina-status-label.carina-status-label--ghost.carina-status-label--priority .carina-status-label__icon-end-container { color: var(--carina-text-color-on-danger-pale-soft); } .carina-status-label__icon-start-container, .carina-status-label__icon-end-container { display: flex; align-items: center; margin: 0; padding-inline-end: 0; padding-inline-start: 0; } .carina-status-label__icon-start-container { margin-inline-end: var(--carina-spacing-2); margin-inline-start: 0; } .carina-status-label__icon-end-container { margin-inline-end: 0; margin-inline-start: var(--carina-spacing-2); } .carina-status-label--xs { line-height: var(--carina-line-height-body-xs); } .carina-status-label--xs .carina-status-label__inner-container { font-size: var(--carina-font-size-body-2xs); padding: var(--carina-spacing-0); } .carina-status-label--sm { line-height: var(--carina-line-height-body-sm); } .carina-status-label--sm .carina-status-label__inner-container { font-size: var(--carina-font-size-body-sm); padding: var(--carina-spacing-1) var(--carina-spacing-0); } .carina-status-label--md { line-height: var(--carina-line-height-body-md); } .carina-status-label--md .carina-status-label__inner-container { font-size: var(--carina-font-size-body-md); padding: var(--carina-spacing-1-5) var(--carina-spacing-0); } .carina-stepper__horizontal-step { width: 100%; text-align: center; height: 100%; padding: var(--carina-spacing-0); border: none; background: transparent; max-height: 104px; cursor: pointer; color: var(--carina-text-color-soft); } .carina-stepper__horizontal-step:disabled, .carina-stepper__horizontal-step--inert { cursor: default; } .carina-stepper__horizontal-step__container { padding: var(--carina-spacing-7) var(--carina-spacing-0); width: 100%; max-width: 174px; flex-grow: 1; flex-shrink: 1; } .carina-stepper__horizontal-step__container--first .carina-stepper__horizontal-step__progress-bar-left, .carina-stepper__horizontal-step__container--last .carina-stepper__horizontal-step__progress-bar-right { opacity: var(--carina-opacity-0); } .carina-stepper__horizontal-step__name { pointer-events: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; font-size: var(--carina-font-size-md); line-height: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-top: var(--carina-spacing-3); margin-bottom: var(--carina-spacing-0); } .carina-stepper__horizontal-step__name--error { color: var(--carina-text-color-danger); } .carina-stepper__horizontal-step__name--disabled { color: var(--carina-text-color-disabled); } .carina-stepper__horizontal-step__name--active, .carina-stepper__horizontal-step__name--partial { color: var(--carina-text-color-base); } .carina-stepper__horizontal-step__progress-bar-container { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; position: relative; padding: var(--carina-spacing-0); margin: var(--carina-spacing-0); } .carina-stepper__horizontal-step__progress-bar-left, .carina-stepper__horizontal-step__progress-bar-right { width: 100%; height: 2px; display: flex; flex-grow: 2; background-color: var(--carina-border-color-secondary-focus); } .carina-stepper__horizontal-step__progress-bar-left { border-start-end-radius: var(--carina-border-radius-full); border-end-end-radius: var(--carina-border-radius-full); margin-inline-end: var(--carina-spacing-1); } .carina-stepper__horizontal-step__progress-bar-left--incomplete, .carina-stepper__horizontal-step__progress-bar-left--disabled, .carina-stepper__horizontal-step__progress-bar-left--optional, .carina-stepper__horizontal-step__progress-bar-left--processing { background-color: var(--carina-background-color-neutral-inactive); } .carina-stepper__horizontal-step__progress-bar-left--error { background-color: var(--carina-background-color-danger); } .carina-stepper__horizontal-step__progress-bar-right { border-start-start-radius: var(--carina-border-radius-full); border-end-start-radius: var(--carina-border-radius-full); margin-inline-start: var(--carina-spacing-1); } .carina-stepper__horizontal-step__progress-bar-right--incomplete, .carina-stepper__horizontal-step__progress-bar-right--disabled, .carina-stepper__horizontal-step__progress-bar-right--optional, .carina-stepper__horizontal-step__progress-bar-right--processing { background-color: var(--carina-background-color-neutral-inactive); } .carina-stepper__horizontal-step__progress-bar-right--error { background-color: var(--carina-background-color-danger); } .carina-stepper__horizontal-step__icon { height: 24px; width: 24px; font-size: var(--carina-font-size-2xs); box-sizing: border-box; border-radius: var(--carina-border-radius-full); display: flex; justify-content: center; align-items: center; pointer-events: none; background-color: var(--carina-background-color-surface); } .carina-stepper__horizontal-step__icon--processing { background-color: var(--carina-background-color-surface); } .carina-stepper__horizontal-step__icon--completed { border: 4px solid var(--carina-background-color-secondary); color: var(--carina-background-color-secondary); } .carina-stepper__horizontal-step__icon--completed svg { margin-top: 1px; } .carina-stepper__horizontal-step__icon--incomplete, .carina-stepper__horizontal-step__icon--optional { background-color: var(--carina-background-color-surface); border: var(--carina-border-width-1) solid var(--carina-border-color-base); } .carina-stepper__horizontal-step__icon--incomplete:hover, .carina-stepper__horizontal-step__icon--optional:hover { border: 1px solid var(--carina-text-color-soft); } .carina-stepper__horizontal-step__icon--disabled { border: var(--carina-border-width-1) solid var(--carina-border-color-soft); background-color: var(--carina-background-color-surface); color: var(--carina-text-color-disabled); } .carina-stepper__horizontal-step__icon--disabled:hover { background-color: var(--carina-text-color-soft); } .carina-stepper__horizontal-step__icon--active, .carina-stepper__horizontal-step__icon--partial { border: var(--carina-border-width-1) solid var(--carina-border-color-secondary-focus); background-color: var(--carina-background-color-secondary); color: var(--carina-text-color-on-secondary); } .carina-stepper__horizontal-step__icon--error { color: var(--carina-background-color-danger); background-color: var(--carina-colors-transparent); } .carina-stepper__horizontal-step__icon--error svg { margin-bottom: 2px; } .carina-stepper__mobile { margin-top: 8px; padding-inline: 16px; width: 100%; box-sizing: border-box; display: block; } .carina-stepper__mobile__circular-progress-bar { fill: transparent; } .carina-stepper__mobile__circular-progress-bar circle { stroke: var(--carina-border-color-secondary-focus); transform: rotate(-90deg); transform-origin: 50% 50%; } .carina-stepper__mobile__progress-bar { display: flex; position: relative; top: calc(-1 * var(--carina-spacing-6)); } .carina-stepper__mobile__step { display: flex; flex-direction: column; } .carina-stepper__step { display: flex; width: 100%; margin: var(--carina-spacing-0); padding: var(--carina-spacing-0); } .carina-stepper__step > div { width: 100%; } .carina-stepper__step__button { margin: var(--carina-spacing-0); border: none; width: 100%; background: transparent; padding: var(--carina-spacing-0); color: var(--carina-text-color-soft); text-align: left; flex-grow: 1; display: flex; flex-direction: row; box-sizing: border-box; font-family: inherit; line-height: inherit; font-size: 100%; cursor: pointer; } .carina-stepper__step__button > div { width: unset; } .carina-stepper__step__button:disabled, .carina-stepper__step__button--inert { cursor: default; } .carina-stepper__step__step-container { padding: var(--carina-spacing-4) var(--carina-spacing-0); display: flex; align-items: center; position: relative; z-index: 100; margin: var(--carina-spacing-1) var(--carina-spacing-0); width: 100%; box-sizing: border-box; } .carina-stepper__step__step-container--collapsed { padding: var(--carina-spacing-2) var(--carina-spacing-0); } .carina-stepper__step__name-wrapper { margin: var(--carina-spacing-0) var(--carina-spacing-2); font-size: var(--carina-font-size-md); font-weight: var(--carina-font-weight-body); pointer-events: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .carina-stepper__step__name-wrapper:hover { color: var(--carina-font-color-hover); } .carina-stepper__step__name-wrapper--error { color: var(--carina-text-color-danger); } .carina-stepper__step__name-wrapper--current:not(.carina-stepper__step__name-wrapper--error) { color: var(--carina-text-color-base); } .carina-stepper__step__name-wrapper--disabled, .carina-stepper__step__name-wrapper--current.carina-stepper__step__name-wrapper--disabled { color: var(--carina-text-color-disabled); } .carina-stepper__step__top-spacer { margin: 0 10px -16px 10px; pointer-events: none; background-color: var(--carina-border-color-secondary-focus); } .carina-stepper__step__top-spacer--incomplete, .carina-stepper__step__top-spacer--disabled, .carina-stepper__step__top-spacer--optional, .carina-stepper__step__top-spacer--processing { background-color: var(--carina-background-color-neutral-inactive); } .carina-stepper__step__top-spacer--error { background-color: var(--carina-background-color-danger); } .carina-stepper__step__bottom-spacer, .carina-stepper__step__top-spacer { width: 4px; height: 16px; } .carina-stepper__step__bottom-spacer { margin: -16px 10px 0 10px; pointer-events: none; background-color: var(--carina-border-color-secondary-focus); } .carina-stepper__step__bottom-spacer--incomplete, .carina-stepper__step__bottom-spacer--disabled, .carina-stepper__step__bottom-spacer--optional, .carina-stepper__step__bottom-spacer--processing { background-color: var(--carina-background-color-neutral-inactive); } .carina-stepper__step__bottom-spacer--error { background-color: var(--carina-background-color-danger); } .carina-stepper__step__completed-spacer { background-color: var(--carina-border-color-secondary-focus); } .carina-stepper__step__sub-heading-wrapper { font-size: var(--carina-text-base-size-xs); color: var(--carina-text-color-soft); position: absolute; top: 40px; left: 48px; } .carina-stepper__step__chevron { margin: var(--carina-spacing-2) 0 var(--carina-spacing-2) auto; padding-top: 4; cursor: pointer; } .carina-stepper__step__icon { height: 24px; width: 24px; font-size: var(--carina-font-size-2xs); box-sizing: border-box; border-radius: var(--carina-border-radius-full); display: flex; justify-content: center; align-items: center; pointer-events: none; background-color: var(--carina-background-color-surface); } .carina-stepper__step__icon svg { margin-top: 2px; display: block; vertical-align: middle; } .carina-stepper__step__icon--processing { background-color: var(--carina-background-color-surface); } .carina-stepper__step__icon--completed { border: 4px solid var(--carina-border-color-secondary-focus); color: var(--carina-text-color-secondary); } .carina-stepper__step__icon--error { border: none; color: var(--carina-background-color-danger); background-color: var(--carina-colors-transparent); } .carina-stepper__step__icon--incomplete, .carina-stepper__step__icon--optional { border: var(--carina-border-width-1) solid var(--carina-border-color-base); background-color: var(--carina-background-color-surface); } .carina-stepper__step__icon--incomplete:hover, .carina-stepper__step__icon--optional:hover { border: 1px solid var(--carina-text-color-soft); } .carina-stepper__step__icon--disabled { border: var(--carina-border-width-1) solid var(--carina-border-color-soft); background-color: var(--carina-background-color-surface); color: var(--carina-text-color-disabled); } .carina-stepper__step__icon--disabled:hover { background-color: var(--carina-text-color-soft); } .carina-stepper__step__icon--active:not(.carina-stepper__step__icon--error), .carina-stepper__step__icon--partial:not(.carina-stepper__step__icon--error) { border: var(--carina-border-width-1) solid var(--carina-border-color-secondary-focus); background-color: var(--carina-background-color-secondary); color: var(--carina-text-color-on-secondary); } .carina-stepper__step__icon--collapsed {} .carina-stepper__progress-bar { position: relative; top: calc(-1 * var(--carina-spacing-6)); } .carina-stepper__progress-bar__label { text-align: left; } .carina-stepper__progress-bar__status-wrapper { display: flex; justify-content: space-between; font-size: var(--carina-font-size-xs); color: var(--carina-text-color-soft); border-top: 2px solid var(--carina-border-color-soft); padding: var(--carina-spacing-1-5) var(--carina-spacing-0); } .carina-stepper__progress-bar__percentage { text-align: right; } .carina-stepper__sub-step { border: none; background: transparent; padding: var(--carina-spacing-0); text-align: left; display: flex; flex-grow: 1; position: relative; align-items: flex-end; font-size: var(--carina-font-size-xs); margin-inline-start: 16px; line-height: inherit; font-family: inherit; cursor: pointer; } .carina-stepper__sub-step:disabled, .carina-stepper__sub-step--inert { cursor: default; } .carina-stepper__sub-step--wrapper { display: flex; } .carina-stepper__sub-step__name { flex-grow: 1; pointer-events: none; color: var(--carina-text-color-soft); } .carina-stepper__sub-step__icon-wrapper { pointer-events: none; color: var(--carina-text-color-danger); } .carina-stepper__sub-step__icon-wrapper--error { margin-bottom: 4px; } .carina-stepper__sub-step__spacer { width: var(--carina-spacing-1); height: 36px; margin-inline: 10px; background-color: var(--carina-background-color-neutral-inactive); } .carina-stepper__sub-step__spacer--completed, .carina-stepper__sub-step__spacer--skipped, .carina-stepper__sub-step__spacer--partial { background-color: var(--carina-border-color-secondary-focus); } .carina-stepper__sub-step__spacer--error { background-color: var(--carina-background-color-danger); } .carina-stepper__sub-step__spacer--complete::after, .carina-stepper__sub-step__spacer--active::after { content: ' '; height: var(--carina-spacing-4); width: var(--carina-spacing-4); margin-top: -1px; display: block; position: relative; top: 100%; border-bottom-left-radius: var(--carina-border-radius-full); border-bottom-right-radius: var(--carina-border-radius-full); } .carina-stepper, .carina-stepper__wrapper { display: flex; flex-direction: column; } .carina-stepper.carina-stepper--vertical { display: none; margin: calc(-1 * var(--carina-spacing-2)) var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-0); width: 100%; } .carina-stepper.carina-stepper--horizontal { display: none; width: 100%; margin: var(--carina-spacing-0); } .carina-stepper__progress-bar-wrapper { display: none; } .carina-tan-table { --carina-tan-table-border-color: var(--carina-border-color-soft); --carina-tan-table-border-radius: var(--carina-border-radius-xl); --carina-tan-table-border-width: var(--carina-border-width-1); --carina-tan-table-line-height: var(--carina-line-height-body-sm); --carina-tan-table-padding-horizontal: var(--carina-spacing-4); --carina-tan-table-padding-vertical: 18px; --carina-tan-table-row-height: 56px; --carina-tan-table-on-background-color: var( --carina-background-color-surface ); --carina-tan-table-background-color: var(--carina-background-color-surface); --carina-tan-table-background-color-alt: var( --carina-background-color-surface-alt ); table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; margin-top: var(--carina-spacing-0); margin-bottom: var(--carina-spacing-0); word-break: break-word; text-wrap: stable; font-size: var(--carina-font-size-body-sm); line-height: var(--carina-tan-table-line-height); font-weight: var(--carina-font-weight-body); color: var(--carina-text-color-base); } .carina-tan-table--auto { table-layout: auto; } .carina-tan-table--condensed { --carina-tan-table-row-height: 48px; --carina-tan-table-padding-vertical: var(--carina-spacing-3-5); } .carina-tan-table--roomy { --carina-tan-table-row-height: 68px; --carina-tan-table-padding-vertical: var(--carina-spacing-6); } .carina-tan-table--rounded .carina-tan-table-head > tr:first-of-type > :first-child:is(th, td), .carina-tan-table--rounded:not(:has(thead)) .carina-tan-table-body > tr:first-of-type > :first-child:is(th, td) { border-start-start-radius: var(--carina-tan-table-border-radius); transform-style: preserve-3d; } .carina-tan-table--rounded .carina-tan-table-head > tr:first-of-type > :first-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded:not(:has(thead)) .carina-tan-table-body > tr:first-of-type > :first-child:is(th, td):not([data-dragging='true'])::after { width: var(--carina-tan-table-border-radius); height: var(--carina-tan-table-border-radius); background: var(--carina-tan-table-on-background-color); content: ''; display: block; position: absolute; top: -1px; inset-inline-start: -1px; transform: translateZ(-1px); } .carina-tan-table--rounded .carina-tan-table-head > tr:first-of-type :last-child:is(th, td), .carina-tan-table--rounded:not(:has(thead)) .carina-tan-table-body > tr:first-of-type > :last-child:is(th, td) { border-start-end-radius: var(--carina-tan-table-border-radius); transform-style: preserve-3d; } .carina-tan-table--rounded .carina-tan-table-head > tr:first-of-type :last-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded:not(:has(thead)) .carina-tan-table-body > tr:first-of-type > :last-child:is(th, td):not([data-dragging='true'])::after { width: var(--carina-tan-table-border-radius); height: var(--carina-tan-table-border-radius); background: var(--carina-tan-table-on-background-color); content: ''; display: block; position: absolute; top: -1px; inset-inline-end: -1px; transform: translateZ(-1px); } .carina-tan-table--rounded .carina-tan-table-footer > tr:only-child > :first-child:is(th, td), .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(2):has( :first-child:is([rowspan='0'], [rowspan='1'], :not(rowspan)) ) + tr:last-of-type > :first-child:is(th, td), .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(3):has(:first-child:is([rowspan='2'])) + tr:last-of-type > :first-child:is(th, td), .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(4):has(:first-child:is([rowspan='3'])) + tr:last-of-type > :first-child:is(th, td), .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(2):has(:first-child:is([rowspan='2'])) > :first-child:is(th, td), .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(3):has(:first-child:is([rowspan='3'])) > :first-child:is(th, td), .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(4):has(:first-child:is([rowspan='4'])) > :first-child:is(th, td), .carina-tan-table--rounded:not(:has(tfoot)) .carina-tan-table-body > tr:last-of-type > :first-child:is(th, td) { border-end-start-radius: var(--carina-tan-table-border-radius); transform-style: preserve-3d; } .carina-tan-table--rounded .carina-tan-table-footer > tr:only-child > :first-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(2):has( :first-child:is([rowspan='0'], [rowspan='1'], :not(rowspan)) ) + tr:last-of-type > :first-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(3):has(:first-child:is([rowspan='2'])) + tr:last-of-type > :first-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(4):has(:first-child:is([rowspan='3'])) + tr:last-of-type > :first-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(2):has(:first-child:is([rowspan='2'])) > :first-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(3):has(:first-child:is([rowspan='3'])) > :first-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(4):has(:first-child:is([rowspan='4'])) > :first-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded:not(:has(tfoot)) .carina-tan-table-body > tr:last-of-type > :first-child:is(th, td):not([data-dragging='true'])::after { width: var(--carina-tan-table-border-radius); height: var(--carina-tan-table-border-radius); background: var(--carina-tan-table-on-background-color); content: ''; display: block; position: absolute; bottom: -1px; inset-inline-start: -1px; transform: translateZ(-1px); } .carina-tan-table--rounded .carina-tan-table-footer > tr:only-child > :last-child:is(th, td), .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(2):has( :last-child:is([rowspan='0'], [rowspan='1'], :not(rowspan)) ) + tr:last-of-type > :last-child:is(th, td), .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(3):has(:last-child:is([rowspan='2'])) + tr:nth-last-of-type(2) > :last-child:is(th, td), .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(4):has(:last-child:is([rowspan='3'])) + tr:nth-last-of-type(3) > :last-child:is(th, td), .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(2):has(:last-child:is([rowspan='2'])) > :last-child:is(th, td), .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(3):has(:last-child:is([rowspan='3'])) > :last-child:is(th, td), .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(4):has(:last-child:is([rowspan='4'])) > :last-child:is(th, td), .carina-tan-table--rounded:not(:has(tfoot)) .carina-tan-table-body > tr:last-of-type > :last-child:is(th, td) { border-end-end-radius: var(--carina-tan-table-border-radius); transform-style: preserve-3d; } .carina-tan-table--rounded .carina-tan-table-footer > tr:only-child > :last-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(2):has( :last-child:is([rowspan='0'], [rowspan='1'], :not(rowspan)) ) + tr:last-of-type > :last-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(3):has(:last-child:is([rowspan='2'])) + tr:nth-last-of-type(2) > :last-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(4):has(:last-child:is([rowspan='3'])) + tr:nth-last-of-type(3) > :last-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(2):has(:last-child:is([rowspan='2'])) > :last-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(3):has(:last-child:is([rowspan='3'])) > :last-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded .carina-tan-table-footer > tr:nth-last-of-type(4):has(:last-child:is([rowspan='4'])) > :last-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded:not(:has(tfoot)) .carina-tan-table-body > tr:last-of-type > :last-child:is(th, td):not([data-dragging='true'])::after { width: var(--carina-tan-table-border-radius); height: var(--carina-tan-table-border-radius); background: var(--carina-tan-table-on-background-color); content: ''; display: block; position: absolute; bottom: -1px; inset-inline-end: -1px; transform: translateZ(-1px); } .carina-tan-table:not(:has(thead)) .carina-tan-table-body > tr:first-of-type :is(th, td) { border-top-width: var(--carina-tan-table-border-width); border-top-style: solid; border-top-color: var(--carina-tan-table-border-color); } .carina-tan-table:has(tfoot) .carina-tan-table-body > tr:last-of-type > :is(th, td) { border-bottom-width: var(--carina-border-width-0); } .carina-tan-table--striped .carina-tan-table-body > tr:nth-child( 2n + 1 of [data-carina-tan-table-row-depth='0'], :not([data-carina-tan-table-row-depth]) ) :is(.carina-tan-table-header, .carina-tan-table-cell), .carina-tan-table--striped .carina-tan-table-body .carina-tan-table-row--striped .carina-tan-table-cell { background-color: var(--carina-tan-table-background-color-alt); } .carina-tan-table--no-dividers :is(.carina-tan-table-header, .carina-tan-table-cell):not(:last-child):not(.carina-tan-table--pinned-start) { border-inline-end-width: var(--carina-border-width-0); } .carina-tan-table [data-carina-tan-table-expand-button] span.carina-button__icon-start { transition: transform var(--carina-transition-duration-200) var(--carina-transition-timing-function-expressive-ease-in) var(--carina-transition-duration-100); } .carina-tan-table [data-carina-tan-table-expand-button][data-expanded='false'] span.carina-button__icon-start { transform: rotate(0deg); } .carina-tan-table [data-carina-tan-table-expand-button][data-expanded='true'] span.carina-button__icon-start { transform: rotate(-180deg); } [dir='rtl'] .carina-tan-table [data-carina-tan-table-expand-button][data-expanded='true'] span.carina-button__icon-start { transform: rotate(180deg); } .carina-tan-table-body > tr td { border-top-width: var(--carina-border-width-0); } .carina-tan-table-body > tr th { border-top-width: var(--carina-border-width-0); border-bottom-width: var(--carina-tan-table-border-width); border-bottom-style: solid; border-bottom-color: var(--carina-tan-table-border-color); } .carina-tan-table-caption { caption-side: bottom; } .carina-tan-table-cell { border-width: var(--carina-tan-table-border-width); border-style: solid; border-color: var(--carina-tan-table-border-color); border-inline-start-width: var(--carina-border-width-0); padding: var(--carina-tan-table-padding-vertical) var(--carina-tan-table-padding-horizontal); vertical-align: middle; background-color: var(--carina-tan-table-background-color); height: inherit; } .carina-tan-table-row[data-dragging='true'] .carina-tan-table-cell, .carina-tan-table-row[data-add-border-top='true'] .carina-tan-table-cell { border-top-width: var(--carina-tan-table-border-width); border-top-style: solid; border-top-color: var(--carina-tan-table-border-color); } .carina-tan-table-cell[data-dragging='true']:not(.carina-tan-table--no-dividers td) { border-inline-start-width: var(--carina-tan-table-border-width); border-inline-start-style: solid; border-inline-style-color: var(--carina-tan-table-border-color); } .carina-tan-table-cell:has(> :is(.carina-tan-table-reorder-handle, .carina-tan-table-row-actions, .carina-tan-table-expandable-container)) { padding: var(--carina-spacing-0) var(--carina-tan-table-padding-horizontal); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) { padding: var(--carina-spacing-0); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]):focus-within { box-shadow: inset 0 0 0 3px var(--carina-border-color-primary-focus); outline: none; } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]):focus-within .carina-tan-table-fieldset { border: none; } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]):has([aria-invalid='true']) { box-shadow: inset 0 0 0 1px var(--carina-border-color-danger); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]):has([aria-invalid='true']):focus-within { box-shadow: inset 0 0 0 3px var(--carina-border-color-danger-focus); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-fieldset { border: none; } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textbox__container, .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textarea--grid { width: 100%; height: 100%; display: flex; flex-wrap: wrap; align-content: center; cursor: text; } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-dropdown--grid { width: 100%; height: 100%; } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textbox__input { font-size: inherit; font-weight: inherit; line-height: inherit; height: 100%; padding: var(--carina-tan-table-padding-vertical) var(--carina-tan-table-padding-horizontal); min-height: calc( (var(--carina-tan-table-padding-vertical) * 2) + var(--carina-line-height-body-sm) ); border-bottom-width: var(--carina-tan-table-border-width); border-bottom-style: solid; border-bottom-color: transparent; } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textbox__input--icon-end { padding-inline-end: calc( (2 * var(--carina-tan-table-padding-horizontal)) + var(--carina-icon-xs) ); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textbox__input--icon-start { padding-inline-start: calc( (2 * var(--carina-tan-table-padding-horizontal)) + var(--carina-icon-xs) ); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textbox-icon--grid { bottom: calc(50% - (var(--carina-icon-xs) / 2)); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textbox-icon--end { inset-inline-end: var(--carina-tan-table-padding-horizontal); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textbox-icon--start { inset-inline-start: var(--carina-tan-table-padding-horizontal); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textarea__textarea--grid { font-size: inherit; font-weight: inherit; line-height: inherit; min-height: calc(var(--carina-tan-table-line-height) * 2); align-content: center; overflow: hidden; border-width: var(--carina-border-width-0); padding: var(--carina-tan-table-padding-vertical) var(--carina-tan-table-padding-horizontal); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-dropdown__button--grid { font-size: inherit; font-weight: inherit; line-height: var(--carina-tan-table-line-height); height: 100%; padding: var(--carina-tan-table-padding-vertical) var(--carina-tan-table-padding-horizontal); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-dropdown__text--grid, .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-dropdown__icon { height: 100%; align-content: center; padding-inline-start: var(--carina-spacing-0); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-numeric-selector--grid { justify-content: center; height: 100%; position: relative; align-content: center; flex-wrap: wrap; } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-numeric-selector__buttons--grid { justify-content: center; align-content: center; display: flex; flex-wrap: wrap; position: absolute; top: calc(50% - (var(--carina-spacing-6) / 2)); z-index: calc(var(--carina-z-index-current) + 1); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-numeric-selector__buttons--grid:nth-last-child(2) { inset-inline-end: calc( var(--carina-spacing-6) + (2 * var(--carina-tan-table-padding-horizontal)) ); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-numeric-selector__buttons--grid:last-child { inset-inline-end: var(--carina-tan-table-padding-horizontal); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-numeric-selector__textbox--grid { width: 100%; height: 100%; padding: var(--carina-spacing-0); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-numeric-selector__textbox--grid .carina-tan-table-textbox__input { padding-inline-end: calc( (2 * var(--carina-spacing-6)) + (3 * var(--carina-tan-table-padding-horizontal)) ); padding-inline-start: var(--carina-tan-table-padding-horizontal); text-align: start; } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-picker__container { height: 100%; } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-picker-toggle-button--neutral:focus-visible { box-shadow: inset var(--carina-ring-black); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-range-picker--grid { height: 100%; align-content: center; container-type: inline-size; container-name: carina-tan-table-date-range-picker-responsive; min-width: 150px; } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-range-picker__separator--grid { display: none; } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-range-picker__textbox-wrapper--grid { height: 100%; } .carina-tan-table-checkbox { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .carina-tan-table-checkbox__box { height: 16px; width: 16px; border-width: var(--carina-border-width-1); border-style: solid; border-color: var(--carina-border-color-base); box-sizing: border-box; border-radius: var(--carina-border-radius-sm); } .carina-tan-table-checkbox:hover ~ .carina-tan-table-checkbox__box { cursor: pointer; } .carina-tan-table-checkbox:focus ~ .carina-tan-table-checkbox__box { box-shadow: var(--carina-ring-base); outline: none; border-color: var(--carina-text-color-primary); } .carina-tan-table-checkbox--checked ~ .carina-tan-table-checkbox__box, .carina-tan-table-checkbox--indeterminate ~ .carina-tan-table-checkbox__box { background-color: var(--carina-background-color-primary); border-color: var(--carina-background-color-primary); color: var(--carina-text-color-on-primary); } .carina-tan-table-checkbox--disabled ~ .carina-tan-table-checkbox__box { color: var(--carina-text-color-disabled); border-width: var(--carina-border-width-0); background-color: var(--carina-background-color-neutral-inactive); cursor: not-allowed; } .carina-tan-table-checkbox__label-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .carina-tan-table-column--actions, .carina-tan-table-column--actions-1, .carina-tan-table-column--reordering, .carina-tan-table-column--expandable, .carina-tan-table-column--expandable-1 { width: calc( 36px + (2 * var(--carina-tan-table-padding-horizontal)) + var(--carina-tan-table-border-width) ); } col:first-child.carina-tan-table-column--actions:not(.carina-tan-table--no-dividers col), col:first-child.carina-tan-table-column--actions-1:not(.carina-tan-table--no-dividers col), col:first-child.carina-tan-table-column--reordering:not(.carina-tan-table--no-dividers col), col:first-child.carina-tan-table-column--expandable:not(.carina-tan-table--no-dividers col), col:first-child.carina-tan-table-column--expandable-1:not(.carina-tan-table--no-dividers col) { width: calc( 36px + (2 * var(--carina-tan-table-padding-horizontal)) + (2 * var(--carina-tan-table-border-width)) ); } .carina-tan-table-column--actions-2 { width: calc( 72px + (2 * var(--carina-tan-table-padding-horizontal)) + (2 * var(--carina-spacing-1)) + var(--carina-tan-table-border-width) ); } col:first-child.carina-tan-table-column--actions-2:not(.carina-tan-table--no-dividers col) { width: calc( 72px + (2 * var(--carina-tan-table-padding-horizontal)) + (2 * var(--carina-spacing-1)) + (2 * var(--carina-tan-table-border-width)) ); } .carina-tan-table-column--actions-3 { width: calc( 108px + (2 * var(--carina-tan-table-padding-horizontal)) + (4 * var(--carina-spacing-1)) + var(--carina-tan-table-border-width) ); } col:first-child.carina-tan-table-column--actions-3:not(.carina-tan-table--no-dividers col) { width: calc( 108px + (2 * var(--carina-tan-table-padding-horizontal)) + (4 * var(--carina-spacing-1)) + (2 * var(--carina-tan-table-border-width)) ); } .carina-tan-table-column--actions-4 { width: calc( 144px + (2 * var(--carina-tan-table-padding-horizontal)) + (6 * var(--carina-spacing-1)) + var(--carina-tan-table-border-width) ); } col:first-child.carina-tan-table-column--actions-4:not(.carina-tan-table--no-dividers col) { width: calc( 144px + (2 * var(--carina-tan-table-padding-horizontal)) + (6 * var(--carina-spacing-1)) + (2 * var(--carina-tan-table-border-width)) ); } .carina-tan-table-column--actions-5 { width: calc( 180px + (2 * var(--carina-tan-table-padding-horizontal)) + (8 * var(--carina-spacing-1)) + var(--carina-tan-table-border-width) ); } col:first-child.carina-tan-table-column--actions-5:not(.carina-tan-table--no-dividers col) { width: calc( 180px + (2 * var(--carina-tan-table-padding-horizontal)) + (8 * var(--carina-spacing-1)) + (2 * var(--carina-tan-table-border-width)) ); } .carina-tan-table-column--checkbox, .carina-tan-table-column--radio { width: calc( 16px + (2 * var(--carina-tan-table-padding-horizontal)) + var(--carina-tan-table-border-width) ); } col:first-child.carina-tan-table-column--checkbox:not(.carina-tan-table--no-dividers col), col:first-child.carina-tan-table-column--radio:not(.carina-tan-table--no-dividers col) { width: calc( 16px + (2 * var(--carina-tan-table-padding-horizontal)) + (2 * var(--carina-tan-table-border-width)) ); } .carina-tan-table-column--expandable.carina-tan-table-column--checkbox, .carina-tan-table-column--expandable-1.carina-tan-table-column--checkbox { width: calc( 52px + (2 * var(--carina-tan-table-padding-horizontal)) + var(--carina-spacing-4) + var(--carina-tan-table-border-width) ); } col:first-child.carina-tan-table-column--expandable.carina-tan-table-column--checkbox:not(.carina-tan-table--no-dividers col), col:first-child.carina-tan-table-column--expandable-1.carina-tan-table-column--checkbox:not(.carina-tan-table--no-dividers col) { width: calc( 52px + (2 * var(--carina-tan-table-padding-horizontal)) + var(--carina-spacing-4) + (2 * var(--carina-tan-table-border-width)) ); } .carina-tan-table-column--expandable-2 { width: calc( 72px + (2 * var(--carina-tan-table-padding-horizontal)) + var(--carina-tan-table-border-width) ); } col:first-child.carina-tan-table-column--expandable-2:not(.carina-tan-table--no-dividers col) { width: calc( 72px + (2 * var(--carina-tan-table-padding-horizontal)) + (2 * var(--carina-tan-table-border-width)) ); } .carina-tan-table-column--expandable-2.carina-tan-table-column--checkbox { width: calc( 88px + (2 * var(--carina-tan-table-padding-horizontal)) + var(--carina-spacing-4) + var(--carina-tan-table-border-width) ); } col:first-child.carina-tan-table-column--expandable-2.carina-tan-table-column--checkbox:not(.carina-tan-table--no-dividers col) { width: calc( 88px + (2 * var(--carina-tan-table-padding-horizontal)) + var(--carina-spacing-4) + (2 * var(--carina-tan-table-border-width)) ); } .carina-tan-table-column--expandable-3 { width: calc( 108px + (2 * var(--carina-tan-table-padding-horizontal)) + var(--carina-tan-table-border-width) ); } col:first-child.carina-tan-table-column--expandable-3:not(.carina-tan-table--no-dividers col) { width: calc( 108px + (2 * var(--carina-tan-table-padding-horizontal)) + (2 * var(--carina-tan-table-border-width)) ); } .carina-tan-table-column--expandable-3.carina-tan-table-column--checkbox { width: calc( 124px + (2 * var(--carina-tan-table-padding-horizontal)) + var(--carina-spacing-4) + var(--carina-tan-table-border-width) ); } col:first-child.carina-tan-table-column--expandable-3.carina-tan-table-column--checkbox:not(.carina-tan-table--no-dividers col) { width: calc( 124px + (2 * var(--carina-tan-table-padding-horizontal)) + var(--carina-spacing-4) + (2 * var(--carina-tan-table-border-width)) ); } .carina-tan-table-column--expandable-4 { width: calc( 144px + (2 * var(--carina-tan-table-padding-horizontal)) + var(--carina-tan-table-border-width) ); } col:first-child.carina-tan-table-column--expandable-4:not(.carina-tan-table--no-dividers col) { width: calc( 144px + (2 * var(--carina-tan-table-padding-horizontal)) + (2 * var(--carina-tan-table-border-width)) ); } .carina-tan-table-column--expandable-4.carina-tan-table-column--checkbox { width: calc( 160px + (2 * var(--carina-tan-table-padding-horizontal)) + var(--carina-spacing-4) + var(--carina-tan-table-border-width) ); } col:first-child.carina-tan-table-column--expandable-4.carina-tan-table-column--checkbox:not(.carina-tan-table--no-dividers col) { width: calc( 160px + (2 * var(--carina-tan-table-padding-horizontal)) + var(--carina-spacing-4) + (2 * var(--carina-tan-table-border-width)) ); } .carina-tan-table-column--expandable-5 { width: calc( 180px + (2 * var(--carina-tan-table-padding-horizontal)) + var(--carina-tan-table-border-width) ); } col:first-child.carina-tan-table-column--expandable-5:not(.carina-tan-table--no-dividers col) { width: calc( 180px + (2 * var(--carina-tan-table-padding-horizontal)) + (2 * var(--carina-tan-table-border-width)) ); } .carina-tan-table-column--expandable-5.carina-tan-table-column--checkbox { width: calc( 196px + (2 * var(--carina-tan-table-padding-horizontal)) + var(--carina-spacing-4) + var(--carina-tan-table-border-width) ); } col:first-child.carina-tan-table-column--expandable-5.carina-tan-table-column--checkbox:not(.carina-tan-table--no-dividers col) { width: calc( 196px + (2 * var(--carina-tan-table-padding-horizontal)) + var(--carina-spacing-4) + (2 * var(--carina-tan-table-border-width)) ); } .carina-tan-table-responsive { container-type: inline-size; container-name: carina-table-responsive; } .carina-tan-table-container { overflow: auto; } .carina-tan-table-container[tabindex]:focus { outline: calc(var(--carina-tan-table-border-width) * 2) solid var(--carina-border-color-interactive-focus); } .carina-tan-table-container:not(.carina-tan-table-container--horizontal-overflow,.carina-tan-table-container--vertical-overflow):has( .carina-tan-table--pinned-top, .carina-tan-table--pinned-bottom ) { overflow: visible; } .carina-tan-table-empty__cell, .carina-tan-table-no-results__cell { border-width: var(--carina-tan-table-border-width); border-style: solid; border-color: var(--carina-tan-table-border-color); } .carina-tan-table-empty__container, .carina-tan-table-no-results__container { align-items: center; display: flex; flex-direction: column; min-height: 580px; justify-content: center; } .carina-tan-table-empty__illustration, .carina-tan-table-no-results__illustration { height: 240px; width: 240px; } .carina-tan-table-empty__text, .carina-tan-table-no-results__text { font-weight: var(--carina-font-weight-display); font-size: var(--carina-font-size-display-xs); line-height: var(--carina-line-height-display-xs); max-width: 450px; text-align: center; padding-bottom: var(--carina-spacing-6); } .carina-tan-table-expandable-container { display: flex; align-items: center; gap: var(--carina-spacing-4); } .carina-tan-table-row[data-carina-tan-table-row-depth='1'] .carina-tan-table-expandable-container { margin-inline-start: 36px; } .carina-tan-table-row[data-carina-tan-table-row-depth='2'] .carina-tan-table-expandable-container { margin-inline-start: 72px; } .carina-tan-table-row[data-carina-tan-table-row-depth='3'] .carina-tan-table-expandable-container { margin-inline-start: 108px; } .carina-tan-table-row[data-carina-tan-table-row-depth='4'] .carina-tan-table-expandable-container { margin-inline-start: 144px; } .carina-tan-table-head { background-color: var(--carina-tan-table-background-color); } .carina-tan-table-head > tr:last-child > :is(th, td) { border-bottom-width: calc(var(--carina-tan-table-border-width) * 2); border-bottom-style: solid; border-bottom-color: var(--carina-tan-table-border-color); } .carina-tan-table-head > tr > :is(th, td):not(:is([rowspan='0'], [rowspan='1'])) { border-bottom-width: calc(var(--carina-tan-table-border-width) * 2); border-bottom-style: solid; border-bottom-color: var(--carina-tan-table-border-color); } .carina-tan-table-head:has(> :nth-child(2)) tr:first-child > :is(th, td) { background-color: var(--carina-tan-table-background-color-alt); font-size: var(--carina-font-size-body-md); } .carina-tan-table-container--horizontal-overflow .carina-tan-table-head :is(th, td):not(.carina-tan-table--pinned-end):has(+ :is(th, td).carina-tan-table--pinned-end), .carina-tan-table-container--horizontal-overflow .carina-tan-table-head:has(:is(th, td).carina-tan-table--pinned-end) :is(th, td):is(:is(th, td):last-child:not(.carina-tan-table--pinned-end)) { border-inline-end-width: var(--carina-border-width-0); } .carina-tan-table-header { box-sizing: content-box; padding: var(--carina-tan-table-padding-vertical) var(--carina-tan-table-padding-horizontal); color: var(--carina-text-color-base); font-weight: var(--carina-font-weight-display); text-align: start; vertical-align: middle; border-width: var(--carina-tan-table-border-width); border-style: solid; border-color: var(--carina-tan-table-border-color); border-inline-start-width: var(--carina-border-width-0); border-bottom-width: var(--carina-border-width-0); background-color: var(--carina-tan-table-background-color); position: relative; } .carina-tan-table-header:not( .carina-tan-table-header--hide-shadow, :has(.carina-tan-table-checkbox:focus, [data-carina-tan-table-expand-button]:focus) ):focus-within { box-shadow: inset 0 0 0 3px var(--carina-border-color-primary-focus); } .carina-tan-table-header:focus-within { outline: none; } .carina-tan-table-header--sortable { padding: var(--carina-spacing-0); } .carina-tan-table-header__button { width: 100%; height: 100%; display: flex; justify-content: space-between; padding: var(--carina-spacing-0) var(--carina-tan-table-padding-horizontal); color: var(--carina-text-color-base); font-weight: var(--carina-font-weight-display); text-align: start; vertical-align: middle; background-color: var(--carina-colors-transparent); cursor: pointer; } .carina-tan-table-header__button:focus { outline: none; } .carina-tan-table-header__button-content { align-self: center; padding: var(--carina-tan-table-padding-vertical) var(--carina-spacing-0); } .carina-tan-table-header__button--reorderable { cursor: grab; position: absolute; top: 0; } .carina-tan-table-header__button--reorderable:active { cursor: grabbing; } .carina-tan-table-header__icon { align-self: center; } .carina-tan-table-header[data-dragging='true']:not(.carina-tan-table--no-dividers th) { border-inline-start-width: var(--carina-tan-table-border-width) !important; border-inline-start-style: solid !important; border-inline-start-color: var(--carina-tan-table-border-color) !important; } .carina-tan-table-header:has(> :is(.carina-tan-table-reorder-handle, .carina-tan-table-row-actions, .carina-tan-table-expandable-container)) { padding: var(--carina-spacing-0) var(--carina-tan-table-padding-horizontal); } .carina-tan-table-pagination { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 72px; } .carina-tan-table-pagination__page-container { display: flex; gap: var(--carina-spacing-4); padding-inline-start: var(--carina-spacing-4); font-size: var(--carina-font-size-body-sm); line-height: var(--carina-line-height-body-sm); font-weight: var(--carina-font-weight-body); color: var(--carina-text-color-base); } .carina-tan-table-pagination__page { padding: var(--carina-spacing-0); margin: var(--carina-spacing-0); min-width: 36px; position: relative; } .carina-tan-table-pagination__page-size-dropdown { width: fit-content; min-width: 96px; } .carina-tan-table-pagination__page-count { display: flex; gap: var(--carina-spacing-2); align-items: center; color: var(--carina-text-color-soft); } .carina-tan-table-pagination__page-size { display: flex; gap: var(--carina-spacing-2); align-items: center; } .carina-tan-table-pagination__navigation { align-self: center; display: flex; justify-content: center; } .carina-tan-table-pagination__list { list-style: none; display: flex; padding: var(--carina-spacing-0); margin: var(--carina-spacing-0); } .carina-tan-table-pagination__item { padding: var(--carina-spacing-0); margin: var(--carina-spacing-0); position: relative; } .carina-tan-table-pagination__item .carina-tan-table-pagination__button { color: var(--carina-text-color-soft); } .carina-tan-table-pagination__item .carina-tan-table-pagination__button[aria-current='true'] { color: var(--carina-text-color-base); opacity: 1; } .carina-tan-table-pagination__item:has(> [aria-current='true'])::after { position: absolute; right: 0; bottom: 0; left: 0; height: var(--carina-border-width-4); width: 30px; margin: auto; border-radius: var(--carina-border-radius-full); background-color: var(--carina-border-color-secondary-focus); content: ''; } .carina-tan-table-radio-button { appearance: none; border-radius: var(--carina-border-radius-full); width: 16px; height: 16px; border-width: var(--carina-border-width-1); border-style: solid; border-color: var(--carina-border-color-base); display: block; transition-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow; } .carina-tan-table-radio-button:checked { background-color: var(--carina-text-color-primary); border-color: var(--carina-text-color-primary); } .carina-tan-table-radio-button:checked::after { position: relative; top: 4px; margin: auto; display: block; width: 6px; height: 6px; border-radius: var(--carina-tan-table-border-radius); background: var(--carina-text-color-on-primary); content: ''; } .carina-tan-table-radio-button:hover { cursor: pointer; } .carina-tan-table-radio-button:focus { box-shadow: var(--carina-ring-base); outline: none; border-color: var(--carina-text-color-primary); } .carina-tan-table-radio-button:disabled { border-width: var(--carina-border-width-0); background-color: var(--carina-background-color-neutral-inactive); cursor: not-allowed; } .carina-tan-table-radio-button__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .carina-tan-table-row { width: 100%; height: var(--carina-tan-table-row-height); } .carina-tan-table-row > th:first-child, .carina-tan-table-row > td:first-child { border-inline-start-width: var(--carina-tan-table-border-width); border-inline-start-style: solid; border-inline-start-color: var(--carina-tan-table-border-color); } .carina-tan-table-container--horizontal-overflow .carina-tan-table-row .carina-tan-table-cell:not(.carina-tan-table--pinned):has(+ .carina-tan-table-cell.carina-tan-table--pinned) { border-inline-end-width: var(--carina-border-width-0); } .carina-tan-table-skeleton { height: var(--carina-tan-table-line-height); } .carina-tan-table-skeleton__container { height: var(--carina-tan-table-line-height); } .carina-tan-table-reorder-handle { cursor: grab; } .carina-tan-table-reorder-handle:active { cursor: grabbing; } .carina-tan-table-reorder-handle.carina-button--disabled { cursor: not-allowed; } .carina-tan-table-resize-handle { position: absolute; top: 0; height: 100%; inset-inline-end: 0; width: var(--carina-border-width-4); background: var(--carina-border-color-base); cursor: col-resize; -webkit-user-select: none; -ms-user-select: none; user-select: none; touch-action: none; opacity: var(--carina-opacity-0); } .carina-tan-table-resize-handle:hover { opacity: var(--carina-opacity-100); } .carina-tan-table-resize-handle:active { background: var(--carina-border-color-primary-focus); opacity: var(--carina-opacity-100); z-index: calc(var(--carina-z-index-current) + 5); } .carina-tan-table-row-actions { display: flex; gap: var(--carina-spacing-1); } .carina-tan-table-footer { font-weight: var(--carina-font-weight-display); } .carina-tan-table-footer > tr > th, .carina-tan-table-footer > tr > td { border-top-width: var(--carina-border-width-0); } .carina-tan-table-footer > tr:first-child > :is(th, td) { border-top-width: calc(var(--carina-tan-table-border-width) * 2); border-top-style: solid; border-top-color: var(--carina-tan-table-border-color); } .carina-tan-table-container--horizontal-overflow .carina-tan-table-footer :not(.carina-tan-table--pinned-end):has(+ .carina-tan-table--pinned-end), .carina-tan-table-container--horizontal-overflow .carina-tan-table-footer :not(.carina-tan-table--pinned-end):has(+ .carina-tan-table--pinned-end) { border-inline-end-width: var(--carina-border-width-0); } .carina-tan-table-footer:has(> :nth-child(2)) tr:first-child > :is(th, td) { background-color: var(--carina-tan-table-background-color-alt); font-size: var(--carina-font-size-body-md); } .carina-tan-table--pinned { position: sticky; } .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-start { inset-inline-start: 0px; border-inline-end-width: calc(var(--carina-tan-table-border-width) * 2); border-inline-end-style: solid; border-inline-end-color: var(--carina-tan-table-border-color); box-shadow: 10px 0 15px -3px rgb(0 0 0 / 0.1), 4px 0 6px -4px rgb(0 0 0 / 0.1); z-index: calc(var(--carina-z-index-current) + 20); } .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-start::before { content: ''; clip-path: inset(0px -15px 0px 0px); } [dir='rtl'] .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-start { box-shadow: -10px 0 15px -3px rgb(0 0 0 / 0.1), -4px 0 6px -4px rgb(0 0 0 / 0.1); } [dir='rtl'] .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-start::before { clip-path: inset(0px 0px 0px -15px); } .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-end { inset-inline-end: 0px; border-inline-start-width: calc(var(--carina-tan-table-border-width) * 2); border-inline-start-style: solid; border-inline-start-color: var(--carina-tan-table-border-color); box-shadow: -10px 0 15px -3px rgb(0 0 0 / 0.1), -4px 0 6px -4px rgb(0 0 0 / 0.1); z-index: calc(var(--carina-z-index-current) + 20); } .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-end::before { content: ''; clip-path: inset(0px 0px 0px -15px); } [dir='rtl'] .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-end { box-shadow: 10px 0 15px -3px rgb(0 0 0 / 0.1), 4px 0 6px -4px rgb(0 0 0 / 0.1); } [dir='rtl'] .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-end::before { clip-path: inset(0px -15px 0px 0px); } .carina-tan-table--pinned-top { top: 0; z-index: calc(var(--carina-z-index-current) + 30); } .carina-tan-table--pinned-bottom { bottom: 0; z-index: calc(var(--carina-z-index-current) + 30); } .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-start.carina-tan-table--pinned-top, .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-end.carina-tan-table--pinned-top, .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-start.carina-tan-table--pinned-bottom, .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-end.carina-tan-table--pinned-bottom { z-index: calc(var(--carina-z-index-current) + 40); } .carina-table-basic-cell-renderer--default { max-width: 100%; overflow: visible; overflow-wrap: anywhere; } .carina-table-basic-cell-renderer--sticky { overflow: hidden; } .carina-table-basic-collapsed-cell-renderer { width: 100%; overflow: hidden; overflow-wrap: anywhere; } .carina-table-basic-heading-renderer { position: relative; display: flex; align-items: center; padding: 0; border: 0; color: var(--carina-text-color-base); font-size: var(--carina-font-size-body-sm); background-color: transparent; outline: none; box-shadow: none; appearance: none; } .carina-table-basic-heading-renderer:focus > .carina-table-basic-heading-renderer__heading::after { position: absolute; top: calc(100% + 1px); bottom: -2px; background-color: var(--carina-background-color-surface); content: ''; pointer-events: none; inset-inline-start: 0; inset-inline-end: 0; } .carina-table-basic-heading-renderer--sortable { width: 100%; height: 100%; margin: calc(-1 * var(--carina-spacing-3)) calc(-1 * var(--carina-spacing-2)); padding: var(--carina-spacing-3) var(--carina-spacing-2); cursor: pointer; } .carina-table-basic-heading-renderer--sortable:focus-visible { outline: none; box-shadow: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-primary-focus); } .carina-table-basic-heading-renderer__heading { position: relative; overflow: hidden; font-weight: var(--carina-font-weight-body); font-family: var(--carina-font-family-display); } .carina-table-basic-heading-renderer__heading--sorted { font-weight: var(--carina-font-weight-display); } .carina-table-checkbox-heading-renderer { position: absolute; top: 50%; padding: 0; border: 0; background-color: transparent; outline: none; box-shadow: none; transform: translate(-50%, -50%); appearance: none; inset-inline-start: 50%; } .carina-table-checkbox-heading-renderer:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); box-shadow: var(--carina-ring-black); } .carina-table-start-column-renderer--drag { display: flex; align-items: center; justify-content: center; cursor: grab; } .carina-table-start-column-renderer--multiselect { display: flex; align-items: center; justify-content: center; } .carina-column-heading { position: relative; flex-grow: 1; flex-shrink: 1; box-sizing: border-box; width: 100%; padding-right: var(--carina-spacing-2); padding-left: var(--carina-spacing-2); font-size: var(--carina-font-size-body-sm); font-family: var(--carina-font-family-primary); background-color: var(--carina-background-color-surface); color: var(--carina-text-color-base); align-content: center; display: flex; } .carina-column-heading--edge { flex-grow: 0; flex-shrink: 0; word-wrap: break-word; } .carina-column-heading--sticky { position: sticky; z-index: calc(var(--carina-z-index-current) + 10); inset-inline-start: 0; } .carina-empty-state-container { box-sizing: border-box; width: 100%; border-color: var(--carina-border-color-soft); border-style: solid; border-width: var(--carina-border-width-1); } .carina-empty-state-container--top-borders { border-width: var(--carina-border-width-1) var(--carina-border-width-0); } .carina-table-page-controls { display: flex; gap: var(--carina-spacing-4); align-items: center; padding-top: var(--carina-spacing-2); padding-bottom: var(--carina-spacing-2); } .carina-table-page-controls__message { margin-inline-end: var(--carina-spacing-2); } .carina-table-page-controls__nav { display: flex; gap: var(--carina-spacing-4); } .carina-selected-indicator { flex-grow: 0; flex-shrink: 0; box-sizing: border-box; width: 16px; height: 16px; border-color: var(--carina-border-color-base); border-style: solid; border-width: var(--carina-border-width-1); border-radius: var(--carina-border-radius-sm); } .carina-selected-indicator--disabled { border-color: var(--carina-border-color-soft); color: var(--carina-text-color-disabled); background-color: var(--carina-background-color-neutral-inverse); pointer-events: none; } .carina-selected-indicator--focused { border-color: var(--carina-border-color-primary-focus); } .carina-selected-indicator--selected, .carina-selected-indicator--indeterminate { border-color: transparent; background-color: var(--carina-background-color-primary); } .carina-selected-indicator--selected.carina-selected-indicator--focused { background-color: transparent; } .carina-selected-indicator--selected.carina-selected-indicator--disabled { border-color: var(--carina-border-color-soft); color: var(--carina-text-color-disabled); background-color: var(--carina-background-color-neutral-inactive); pointer-events: none; } .carina-selected-indicator__check { fill: var(--carina-background-color-neutral-inverse); vertical-align: middle; display: block; } .carina-selected-indicator__check--disabled { fill: var(--carina-text-color-disabled); } .carina-table-body { display: flex; flex-direction: column; width: 100%; border-top: var(--carina-border-width-1) solid var(--carina-border-color-soft); border-bottom: var(--carina-border-width-1) solid var(--carina-border-color-soft); background-color: var(--carina-background-color-surface); color: var(--carina-text-color-base); } .carina-table-cell { flex-grow: 1; flex-shrink: 1; align-self: center; box-sizing: border-box; width: 100%; padding-right: var(--carina-spacing-2); padding-left: var(--carina-spacing-2); color: var(--carina-text-color-base); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-sm); font-family: var(--carina-font-family-primary); } .carina-table-cell--collapsed { font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-sm); } .carina-table-cell--disabled { color: var(--carina-text-color-disabled); } .carina-table-cell--edge { flex-grow: 0; flex-shrink: 0; } .carina-table-cell--sticky { position: sticky; inset-inline-start: 0; } .carina-table-cell__collapsed { width: 100%; overflow: hidden; color: var(--carina-text-color-soft); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-body-xs); } .carina-table-element { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; padding: var(--carina-spacing-px); } .carina-table-element--scrollable { width: fit-content; min-width: 100%; } .carina-table-header { box-sizing: border-box; width: 100%; } .carina-table-header__group { display: flex; align-items: center; box-sizing: border-box; width: 100%; min-height: 56px; padding: var(--carina-spacing-3) var(--carina-spacing-2); overflow: hidden; background-color: var(--carina-background-color-surface); color: var(--carina-text-color-base); outline-width: var(--carina-border-width-1); outline-style: solid; outline-color: var(--carina-border-color-soft); outline-offset: calc(-1 * var(--carina-spacing-px)); } .carina-table-header__group--sticky { overflow: visible; display: flex; align-items: stretch; } .carina-table-row { position: relative; display: flex; box-sizing: border-box; width: 100%; overflow-x: hidden; background-color: var(--carina-background-color-surface); color: var(--carina-text-color-base); } .carina-table-row::before { position: absolute; z-index: calc(var(--carina-z-index-current) + 30); content: ''; pointer-events: none; inset: 0; } .carina-table-row:hover .carina-action-button__x-ray { opacity: var(--carina-opacity-100); } .carina-table-row .carina-table-row__actions-end-container:not( .carina-table-row__actions-end-container--always-visible ):focus-within .carina-action-button svg { color: var(--carina-text-color-base-inverse); } .carina-table-row .carina-table-row__actions-end-container:not( .carina-table-row__actions-end-container--always-visible ):hover .carina-action-button svg { color: var(--carina-text-color-base-inverse); } .carina-table-row:hover .carina-table-row__actions-start-container .carina-action-button:not(.carina-action-button--static-select-indicator) .carina-selected-indicator, .carina-table-row .carina-table-row__actions-start-container .carina-action-button:not( .carina-action-button--static-select-indicator ):focus-visible .carina-selected-indicator { border-color: var(--carina-text-color-base-inverse); background-color: transparent; } .carina-table-row .carina-table-row__actions-start-container:not(:hover) .carina-action-button:not(.carina-action-button--static-select-indicator) .carina-selected-indicator--selected { background-color: transparent; } .carina-table-row:hover .carina-table-row__actions-start-container:not(:hover) .carina-action-button:not(.carina-action-button--static-select-indicator) .carina-selected-indicator--selected { z-index: calc(var(--carina-z-index-current) + 20); border-color: var(--carina-text-color-disabled); background-color: var(--carina-text-color-disabled); } .carina-table-row:hover .carina-table-row__actions-start-container:not(:hover) .carina-action-button:not(.carina-action-button--static-select-indicator) .carina-selected-indicator { z-index: calc(var(--carina-z-index-current) + 20); border-color: var(--carina-text-color-disabled); } .carina-table-row--sticky { overflow-x: visible; } .carina-table-row--sticky div[role='cell']:first-of-type:first-of-type { background-color: inherit; } .carina-table-row--side-borders { border-right: var(--carina-border-width-1) solid var(--carina-border-color-soft); border-left: var(--carina-border-width-1) solid var(--carina-border-color-soft); } .carina-table-row--striped:nth-of-type(odd) > div { background-color: var(--carina-background-color-surface-alt); } .carina-table-row--focus-within::after { position: absolute; z-index: calc(var(--carina-z-index-current) + 30); outline: var(--carina-border-width-2) solid var(--carina-border-color-primary-focus); content: ''; inset: var(--carina-spacing-0-5); pointer-events: none; } .carina-table-row__actions-start-container--x-ray { border-top: var(--carina-border-width-1) solid var(--carina-border-color-soft); } .carina-table-row__sliding { position: relative; z-index: calc(var(--carina-z-index-current) + 10); display: flex; align-items: center; box-sizing: border-box; width: 100%; min-height: 56px; padding: var(--carina-spacing-2) var(--carina-spacing-2); background-color: var(--carina-background-color-surface); } .carina-table-row__sliding::after { position: absolute; content: ''; inset: 0 var(--carina-spacing-px) var(--carina-spacing-px); pointer-events: none; } .carina-table-row__sliding:focus { outline: none; } .carina-table-row__sliding--basic-outline { border-top: var(--carina-border-width-1) solid var(--carina-border-color-soft); outline: var(--carina-border-width-1) solid var(--carina-border-color-soft); } .carina-table-row--sticky .carina-table-row__sliding--basic-outline { outline: none; } .carina-table-row__sliding--top-outline { border-top: var(--carina-border-width-1) solid var(--carina-border-color-soft); } .carina-table-row__sliding--dragging { outline: var(--carina-border-width-1) solid var(--carina-border-color-soft); outline-offset: calc(-1 * var(carina-spacing-px)); } .carina-table-row__sliding--condensed { min-height: 52px; padding-top: var(--carina-spacing-2); padding-bottom: var(--carina-spacing-2); } .carina-table-row__sliding--roomy { min-height: 68px; padding-top: var(--carina-spacing-4); padding-bottom: var(--carina-spacing-4); } .carina-table-row__actions-end-container { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; display: flex; align-items: center; min-width: 60px; background-color: var(--carina-background-color-neutral); padding-inline-start: var(--carina-spacing-2); padding-inline-end: var(--carina-spacing-2); } .carina-table-row__actions-start-container { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; display: flex; align-items: center; min-width: 60px; padding-inline-start: var(--carina-spacing-2); padding-inline-end: var(--carina-spacing-2); background-color: var(--carina-background-color-neutral); } .carina-table-row__actions-start-container--reveal, .carina-table-row__actions-end-container--reveal { opacity: var(--carina-opacity-100); } .carina-table-row__actions-start-container--reveal:hover .carina-action-button__x-ray, .carina-table-row__actions-end-container--reveal:hover .carina-action-button__x-ray { opacity: var(--carina-opacity-0); } .carina-table-row__actions-start-container--hide, .carina-table-row__actions-end-container--hide { opacity: var(--carina-opacity-0); } .carina-table-row__actions-start-container--always-visible { z-index: calc(var(--carina-z-index-current) + 20); min-width: 0; background-color: unset; } .carina-table-row__actions-end-container--always-visible { z-index: calc(var(--carina-z-index-current) + 20); min-width: 0; background-color: unset; } .carina-table-row__actions-start-trigger { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 54px; } .carina-table-row__actions-start-trigger--hidden { display: none; } .carina-table-row__actions-end-trigger { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 54px; } .carina-table-row__actions-end-trigger--hidden { display: none; } .carina-table-row__contents { display: flex; width: 100%; } .carina-action-button { --carina-table-action-button-size: 38px; display: flex; align-items: center; justify-content: center; width: var(--carina-table-action-button-size); height: var(--carina-table-action-button-size); margin-right: var(--carina-spacing-2); margin-left: var(--carina-spacing-2); border: 0; border-radius: calc(var(--carina-table-action-button-size) / 2); background-color: transparent; outline: none; box-shadow: none; cursor: pointer; appearance: none; } [dir='rtl'] .carina-action-button { transform: scaleX(-1); } .carina-action-button:active:not(.carina-action-button--disabled) { background-color: var(--carina-background-color-neutral-hover); } .carina-action-button:focus { border: var(--carina-border-width-1) solid var(--carina-border-color-inverse); } .carina-action-button--disabled { opacity: var(--carina-opacity-40); cursor: default; } .carina-action-button--disabled:hover, .carina-action-button--disabled:active { opacity: var(--carina-opacity-40); cursor: default; } .carina-action-button--static-select-indicator:focus-visible { outline: 2px solid transparent; box-shadow: var(--carina-ring-base); } .carina-action-button--static-actions-menu:active { background-color: var(--carina-background-color-neutral-active); } .carina-action-button--static-actions-menu:focus-visible { outline: 2px solid transparent; box-shadow: var(--carina-ring-base); } .carina-action-button__x-ray { position: absolute; z-index: calc(var(--carina-z-index-current) + 50); opacity: var(--carina-opacity-0); transition: opacity var(--carina-transition-duration-200); pointer-events: none; } .carina-item-label { display: flex; align-items: center; } .carina-item-label__spacer { height: var(--carina-spacing-4); width: var(--carina-spacing-4); } .carina-item-label__text { padding-left: calc(2 * var(--carina-spacing-px)); } .carina-tabs__wrapper { position: relative; display: inline-flex; flex: 1 0 0%; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; box-sizing: border-box; min-width: 100%; max-width: 100%; overflow: auto; white-space: nowrap; vertical-align: middle; table-layout: fixed; background-color: transparent; scrollbar-width: none; } .carina-tabs__wrapper::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; } .carina-tabs { position: relative; display: table; flex: 1 1 0%; align-content: start; align-items: center; box-sizing: border-box; width: 100%; max-width: 100%; border-bottom: var(--carina-border-width-1) solid var(--carina-border-color-soft); overflow: hidden; white-space: nowrap; vertical-align: top; table-layout: fixed; } .carina-tabs__arrow-right, .carina-tabs__arrow-left { position: absolute; min-width: 40px; max-width: 100%; max-height: 72px; font-size: var(--carina-font-size-body-md); background-color: var(--carina-background-color-surface); color: var(--carina-text-color-soft); min-height: 48px; border-bottom-style: solid; border-bottom-width: var(--carina-border-width-1); border-color: var(--carina-border-color-soft); cursor: pointer; } .carina-tabs__arrow-right:focus, .carina-tabs__arrow-left:focus { outline: none; } .carina-tabs__arrow-right:hover, .carina-tabs__arrow-left:hover { background-color: var(--carina-background-color-surface-hover); color: var(--carina-text-color-base); } .carina-tabs__arrow-right:active, .carina-tabs__arrow-left:active { background-color: var(--carina-background-color-surface-selected); } .carina-tabs__arrow-right svg, .carina-tabs__arrow-left svg { display: unset; } .carina-tabs__arrow-right { right: 0; border-inline-end: var(--carina-border-width-1) solid var(--carina-border-color-soft); min-height: 48px; border-bottom-style: solid; border-bottom-width: var(--carina-border-width-1); border-color: var(--carina-border-color-soft); } .carina-tabs__arrow-left { left: 0; margin-inline-start: 0; border-inline-start: var(--carina-border-width-1) solid var(--carina-border-color-soft); min-height: 48px; border-bottom-style: solid; border-bottom-width: var(--carina-border-width-1); border-color: var(--carina-border-color-soft); } [data-scroll-position='0'] .carina-tabs__arrow-left { display: none; visibility: hidden; } [data-scroll-position='0'] .carina-tabs__arrow-right { display: none; visibility: hidden; } [data-scroll-position='1'] .carina-tabs__arrow-left { display: none; visibility: hidden; } [data-scroll-position='1'] .carina-tabs__arrow-right { display: unset; visibility: unset; } [data-scroll-position='2'] .carina-tabs__arrow-left { display: unset; visibility: unset; } [data-scroll-position='2'] .carina-tabs__arrow-right { display: none; visibility: hidden; } [data-scroll-position='3'] .carina-tabs__arrow-left { display: unset; visibility: unset; } [data-scroll-position='3'] .carina-tabs__arrow-right { display: unset; visibility: unset; } [dir='rtl'] [data-scroll-position='2'] .carina-tabs__arrow-left { display: none; visibility: hidden; } [dir='rtl'] [data-scroll-position='2'] .carina-tabs__arrow-right { display: unset; visibility: unset; } [dir='rtl'] [data-scroll-position='1'] .carina-tabs__arrow-left { display: unset; visibility: unset; } [dir='rtl'] [data-scroll-position='1'] .carina-tabs__arrow-right { display: none; visibility: hidden; } .carina-tabs.carina-tabs--bottomless, .carina-tabs.carina-tabs--secondary { border-bottom-width: 0; } .carina-tabs__list { display: flex; gap: var(--carina-spacing-0-5); padding: var(--carina-spacing-0) var(--carina-spacing-0-5); } .carina-tabs__tab { position: relative; display: flex; flex: 1 0 auto; align-items: center; justify-content: center; box-sizing: border-box; min-width: 5rem; min-height: 47px; margin: 0 auto; padding-top: 1px; padding-right: var(--carina-spacing-4); padding-left: var(--carina-spacing-4); border: 0; border-radius: var(--carina-border-radius-md); background: transparent; color: var(--carina-text-color-soft); font-family: inherit; line-height: inherit; font-size: var(--carina-font-size-body-md); white-space: nowrap; text-align: center; text-decoration: none; vertical-align: middle; transition-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow; cursor: pointer; } .carina-tabs__tab::after { content: ''; } .carina-tabs__tab .carina-tabs__tab::-moz-focus-inner { padding: 0; border: 0; outline: none; } .carina-tabs__tab:focus-visible { outline: var(--carina-border-width-2) solid var(--carina-colors-transparent); box-shadow: inset var(--carina-ring-base); } .carina-tabs__tab:hover { color: var(--carina-text-color-base); vertical-align: middle; } .carina-tabs__tab:hover::after { position: absolute; right: 0; bottom: 0; left: 0; height: var(--carina-border-width-4); border-top-left-radius: var(--carina-border-radius-md); border-top-right-radius: var(--carina-border-radius-md); background-color: var(--carina-border-color-soft); } .carina-tabs__tab--selected { color: var(--carina-text-color-base); cursor: auto; } .carina-tabs__tab--selected::after { position: absolute; right: 0; bottom: 0; left: 0; height: var(--carina-border-width-4); border-top-left-radius: 6px; border-top-right-radius: 6px; content: ''; } .carina-tabs__tab--pri.carina-tabs__tab--selected::after { background-color: var(--carina-border-color-primary-focus); } .carina-tabs__tab--sec.carina-tabs__tab--selected::after { background-color: var(--carina-border-color-secondary-focus); } .carina-tabs__tab--ter.carina-tabs__tab--selected::after { background-color: var(--carina-border-color-tertiary-focus); } .carina-tabs__tab--secondary { border: var(--carina-border-width-1) solid var(--carina-colors-transparent); } .carina-tabs__tab--secondary::after { content: none; } .carina-tabs__tab--secondary:hover { background-color: var(--carina-background-color-surface-hover); } .carina-tabs__tab--secondary.carina-tabs__tab--selected, .carina-tabs__tab--secondary:active { border-width: var(--carina-border-width-1); border-style: solid; border-color: var(--carina-border-color-primary-focus); } .carina-tabs__tab--pri.carina-tabs__tab--secondary.carina-tabs__tab--selected, .carina-tabs__tab--pri.carina-tabs__tab--secondary:active { color: var(--carina-text-color-on-primary); background-color: var(--carina-background-color-primary); border-color: var(--carina-border-color-primary-focus); } .carina-tabs__tab--sec.carina-tabs__tab--secondary.carina-tabs__tab--selected, .carina-tabs__tab--sec.carina-tabs__tab--secondary:active { color: var(--carina-text-color-on-secondary); background-color: var(--carina-background-color-secondary); border-color: var(--carina-border-color-secondary-focus); } .carina-tabs__tab--ter.carina-tabs__tab--secondary.carina-tabs__tab--selected, .carina-tabs__tab--ter.carina-tabs__tab--secondary:active { color: var(--carina-text-color-on-tertiary-); background-color: var(--carina-background-color-tertiary); border-color: var(--carina-border-color-tertiary-focus); } .carina-tag-group { display: flex; flex-wrap: wrap; justify-content: flex-start; box-sizing: border-box; width: 100%; max-width: 100%; margin: var(--carina-spacing-0); line-height: var(--carina-line-height-normal); list-style: none; padding-inline-start: 0; } .carina-tag-group > li { margin-bottom: var(--carina-spacing-2); margin-inline-end: var(--carina-spacing-2); } .carina-templates-body { display: flex; flex-shrink: 1; height: 100%; overflow-y: auto; } .carina-templates-default-actions { flex-shrink: 0; } .carina-templates-content-area { display: flex; flex-direction: column; flex-shrink: 1; width: 100%; height: 100%; overflow: hidden; background-color: var(--carina-background-color-surface); color: var(--carina-text-color-body, var(--carina-text-color-base)); } .carina-templates-content-container { box-sizing: border-box; max-width: 1920px; margin: var(--carina-spacing-4); padding: var(--carina-spacing-6); border: var(--carina-border-width-1) solid var(--carina-border-color-soft); border-radius: var(--carina-border-radius-sm); overflow: auto; font-weight: var(--carina-font-weight-body); font-family: var(--carina-font-family-primary); line-height: var(--carina-line-height-normal); background-color: var(--carina-background-color-surface); color: var(--carina-text-color-body, var(--carina-text-color-base)); } .carina-templates-dock { flex-shrink: 0; } .carina-template-header { flex-shrink: 1; width: 100%; } .carina-template-hero-header { display: flex; flex-direction: column; flex-wrap: wrap; padding: var(--carina-spacing-6) var(--carina-spacing-6) var(--carina-spacing-0); border-bottom: var(--carina-spacing-px) solid var(--carina-border-color-soft); font-weight: var(--carina-font-weight-body); font-family: var(--carina-font-family-primary); background-color: var(--carina-background-color-surface); color: var(--carina-text-color-body, var(--carina-text-color-base)); } .carina-template-hero-header header { position: relative; display: flex; flex: 1 0 auto; width: 100%; margin: var(--carina-spacing-4) var(--carina-spacing-0) var(--carina-spacing-8) var(--carina-spacing-0); } .carina-template-hero-header__title { -webkit-box-orient: vertical; display: -webkit-box; flex: 1 0 auto; margin: var(--carina-spacing-0); overflow: hidden; -webkit-line-clamp: 2; } .carina-template-hero-header__logo { display: flex; margin: var(--carina-spacing-0); margin-inline-end: calc(var(--carina-spacing-8) + var(--carina-spacing-1)); } .carina-template-hero-header__content-block { flex: 1 1 0%; margin: var(--carina-spacing-0); padding: var(--carina-spacing-0); } .carina-template-hero-header__content-wrapper { display: flex; flex: 1; } .carina-template-illustration { max-height: 100vh; padding: var(--carina-spacing-6) var(--carina-spacing-10); } .carina-template-illustration__wrapper { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; padding-top: var(--carina-spacing-8); font-weight: var(--carina-font-weight-body); font-family: var(--carina-font-family-primary); } .carina-template-illustration__illustration-container { max-width: 100%; margin: var(--carina-spacing-0) auto; text-align: center; } .carina-template-illustration__illustration-container svg { width: auto; height: auto; margin: auto; } .carina-template-illustration__image { width: 70%; max-width: 375px; } .carina-template-illustration__wrapper--compact, .carina-template-illustration__illustration-container--compact { margin-bottom: 26px; } .carina-template-illustration__error { margin: var(--carina-spacing-4) auto var(--carina-spacing-8); color: var(--carina-text-color-danger); font-size: var(--carina-font-size-sm); font-family: var(--carina-font-family-primary); text-align: center; } .carina-template-illustration__error-details { color: var(--carina-text-color-soft); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-xs); font-family: var(--carina-font-family-primary); line-height: var(--carina-line-height-tight); text-align: center; } .carina-template-illustration__error-details-heading { margin-top: var(--carina-spacing-12); margin-bottom: var(--carina-spacing-4); } .carina-template-illustration__error-details-date-heading { margin-top: var(--carina-spacing-4); } .carina-template-illustration__header-wrapper { display: block; max-width: 375px; margin: 0 auto var(--carina-spacing-4); color: var(--carina-text-color-body, var(--carina-text-color-base)); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-2xl); line-height: var(--carina-line-height-9); font-family: var(--carina-font-family-primary); text-align: center; } .carina-template-illustration__body-wrapper { display: block; max-width: 375px; margin: var(--carina-spacing-4) auto var(--carina-spacing-8); color: var(--carina-text-color-soft); font-weight: var(--carina-font-weight-body); font-size: var(--carina-font-size-md); font-family: var(--carina-font-family-primary); text-align: center; } .carina-templates-main { display: flex; flex-direction: column; flex-shrink: 1; width: 100%; } .carina-templates-page { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; } .carina-templates-scroll-view { flex-grow: 1; overflow-y: auto; color: var(--carina-text-color-body, var(--carina-text-color-base)); background: var(--carina-background-color-surface-alt); } .carina-templates-template-action-bar { flex-shrink: 0; } .carina-templates-template-actions { display: flex; flex: 0 0 30%; align-items: center; max-height: 48px; } .carina-templates-template-actions button { margin: var(--carina-spacing-2); } .carina-templates-template-actions__small { position: relative; right: 0; min-height: 100%; } .carina-templates-template-actions--stacked { flex-direction: column-reverse; } .carina-templates-template-actions--position-flex-end { justify-content: flex-end; } .carina-templates-template-actions--position-flex-start { justify-content: flex-start; } .carina-templates-template-actions--position-center { justify-content: center; } .carina-templates-template-panel { flex-shrink: 0; height: 100%; } .carina-tile { position: relative; box-sizing: border-box; width: 100%; height: 100%; padding: var(--carina-tile-padding, var(--carina-spacing-6)); border-color: var(--carina-border-color-soft); border-style: solid; border-width: var(--carina-border-width-1); border-radius: var(--carina-border-radius-xl); color: var(--carina-text-color-body, var(--carina-text-color-base)); font-weight: var(--carina-font-weight-body); font-family: var(--carina-font-family-primary); line-height: var(--carina-line-height-normal); background-color: var(--carina-background-color-surface); cursor: default; transition-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); transition-duration: var(--carina-transition-duration-100); transition-property: box-shadow, border-color; pointer-events: none; } .carina-tile--interactive { cursor: pointer; pointer-events: auto; } .carina-tile--interactive:hover { border-color: var(--carina-border-color-primary-focus); } .carina-tile--interactive:focus-visible { border-color: var(--carina-border-color-primary-focus); outline: none; box-shadow: var(--carina-ring-base); } .carina-tile--selected:not(.carina-tile--error):not(.carina-tile--disabled), .carina-tile--selected:not(.carina-tile--error):not(.carina-tile--disabled):hover { border-color: var(--carina-border-color-primary); box-shadow: 0 0 0 1px var(--carina-border-color-primary); } .carina-tile--selected:not(.carina-tile--error):not(.carina-tile--disabled):focus-visible { border-color: var(--carina-border-color-primary-focus); outline: none; box-shadow: 0 0 0 1px var(--carina-border-color-primary), 0 0 0 3px var(--carina-border-color-primary-focus); } .carina-tile--error { box-shadow: none; } .carina-tile--error, .carina-tile--error:hover, .carina-tile--error:focus { border-color: var(--carina-border-color-danger); } .carina-tile--error:focus-visible { outline: none; box-shadow: var(--carina-ring-danger); } .carina-tile--disabled { border-color: var(--carina-border-color-soft); background-color: var(--carina-background-color-surface); box-shadow: none; cursor: default; } .carina-tile--disabled:hover { border-color: var(--carina-border-color-soft); } .carina-tile--disabled:focus, .carina-tile--disabled:focus-visible { border-color: var(--carina-border-color-soft); outline: none; } .carina-tile__content { display: flex; flex-direction: column; width: 100%; height: 100%; } .carina-tile__arrange-icon { position: absolute; top: var(--carina-tile-padding, var(--carina-spacing-6)); left: var(--carina-tile-padding, var(--carina-spacing-6)); background-color: var(--carina-background-color-surface); cursor: pointer; } .carina-tile__selected-icon { position: absolute; top: auto; right: auto; bottom: auto; left: auto; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--carina-border-radius-full); color: var(--carina-text-color-on-primary); background-color: var(--carina-background-color-primary); box-shadow: 0 4px 20px -4px var(--carina-border-color-primary-focus); } .carina-tile__selected-icon--top-start { top: var( --carina-tile-selected-indicator-offset, var(--carina-tile-padding, var(--carina-spacing-6)) ); left: var( --carina-tile-selected-indicator-offset, var(--carina-tile-padding, var(--carina-spacing-6)) ); } [dir='rtl'] .carina-tile__selected-icon--top-start { right: var( --carina-tile-selected-indicator-offset, var(--carina-tile-padding, var(--carina-spacing-6)) ); left: auto; } .carina-tile__selected-icon--top-end { top: var( --carina-tile-selected-indicator-offset, var(--carina-tile-padding, var(--carina-spacing-6)) ); right: var( --carina-tile-selected-indicator-offset, var(--carina-tile-padding, var(--carina-spacing-6)) ); } [dir='rtl'] .carina-tile__selected-icon--top-end { right: auto; left: var( --carina-tile-selected-indicator-offset, var(--carina-tile-padding, var(--carina-spacing-6)) ); } .carina-tile__selected-icon--bottom-start { bottom: var( --carina-tile-selected-indicator-offset, var(--carina-tile-padding, var(--carina-spacing-6)) ); left: var( --carina-tile-selected-indicator-offset, var(--carina-tile-padding, var(--carina-spacing-6)) ); } [dir='rtl'] .carina-tile__selected-icon--bottom-start { right: var( --carina-tile-selected-indicator-offset, var(--carina-tile-padding, var(--carina-spacing-6)) ); left: auto; } .carina-tile__selected-icon--bottom-end { right: var( --carina-tile-selected-indicator-offset, var(--carina-tile-padding, var(--carina-spacing-6)) ); bottom: var( --carina-tile-selected-indicator-offset, var(--carina-tile-padding, var(--carina-spacing-6)) ); } [dir='rtl'] .carina-tile__selected-icon--bottom-end { right: auto; left: var( --carina-tile-selected-indicator-offset, var(--carina-tile-padding, var(--carina-spacing-6)) ); } .carina-tile__body { flex: 1 1 auto; min-height: 75%; padding: inherit; } .carina-tile__footer { flex: 1 1 auto; padding: inherit; } .carina-wizard__footer, .carina-wizard__footer-end-container, .carina-wizard__footer-start-container { display: flex; } .carina-wizard__footer { justify-content: center; } .carina-wizard__footer-end-container { margin-inline-start: 12px; } .carina-wizard__footer-start-container { margin-inline-end: 12px; } .visible { visibility: visible; } .collapse { visibility: collapse; } .static { position: static; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .sticky { position: sticky; } .-left-2 { left: calc(var(--carina-spacing-2) * -1); } .-left-5 { left: calc(var(--carina-spacing-5) * -1); } .-left-px { left: calc(var(--carina-spacing-px) * -1); } .-top-6 { top: calc(var(--carina-spacing-6) * -1); } .left-0 { left: var(--carina-spacing-0); } .start-0 { inset-inline-start: var(--carina-spacing-0); } .top-0 { top: var(--carina-spacing-0); } .z-\[101\] { z-index: 101; } .z-\[9999\] { z-index: 9999; } .z-\[calc\(var\(--carina-z-index-current\)\+1\)\] { z-index: calc(var(--carina-z-index-current) + 1); } .m-8 { margin: var(--carina-spacing-8); } .mx-3 { margin-left: var(--carina-spacing-3); margin-right: var(--carina-spacing-3); } .my-4 { margin-top: var(--carina-spacing-4); margin-bottom: var(--carina-spacing-4); } .-me-px { margin-inline-end: calc(var(--carina-spacing-px) * -1); } .mb-4 { margin-bottom: var(--carina-spacing-4); } .ms-0 { margin-inline-start: var(--carina-spacing-0); } .ms-3 { margin-inline-start: var(--carina-spacing-3); } .mt-6 { margin-top: var(--carina-spacing-6); } .inline { display: inline; } .\!table { display: table !important; } .table { display: table; } .contents { display: contents; } .list-item { display: list-item; } .h-0 { height: var(--carina-spacing-0); } .h-\[16px\] { height: 16px; } .h-\[24px\] { height: 24px; } .h-\[36px\] { height: 36px; } .h-\[40px\] { height: 40px; } .h-full { height: 100%; } .h-screen { height: 100vh; } .min-h-\[36px\] { min-height: 36px; } .w-0 { width: var(--carina-spacing-0); } .w-\[16px\] { width: 16px; } .w-\[36px\] { width: 36px; } .w-full { width: 100%; } .min-w-0 { min-width: var(--carina-spacing-0); } .min-w-\[160px\] { min-width: 160px; } .max-w-\[calc\(100\%_-_85px\)\] { max-width: calc(100% - 85px); } .max-w-full { max-width: 100%; } .grow { flex-grow: 1; } .-translate-x-\[calc\(100\%\+16px\)\] { --tw-translate-x: calc(calc(100% + 16px) * -1); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform-none { transform: none; } @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } .cursor-not-allowed { cursor: not-allowed; } .select-none { -webkit-user-select: none; -ms-user-select: none; user-select: none; } .select-text { -webkit-user-select: text; -ms-user-select: text; user-select: text; } .select-all { -webkit-user-select: all; user-select: all; } .resize { resize: both; } .items-center { align-items: center; } .self-start { align-self: flex-start; } .overflow-hidden { overflow: hidden; } .overflow-visible { overflow: visible; } .overflow-x-hidden { overflow-x: hidden; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-ellipsis { text-overflow: ellipsis; } .whitespace-nowrap { white-space: nowrap; } .rounded { border-radius: var(--carina-border-radius-sm); } .rounded-md { border-radius: var(--carina-border-radius-md); } .rounded-none { border-radius: var(--carina-border-radius-none); } .rounded-e-md { border-start-end-radius: var(--carina-border-radius-md); border-end-end-radius: var(--carina-border-radius-md); } .rounded-e-none { border-start-end-radius: var(--carina-border-radius-none); border-end-end-radius: var(--carina-border-radius-none); } .rounded-s-md { border-start-start-radius: var(--carina-border-radius-md); border-end-start-radius: var(--carina-border-radius-md); } .rounded-s-none { border-start-start-radius: var(--carina-border-radius-none); border-end-start-radius: var(--carina-border-radius-none); } .rounded-ss-md { border-start-start-radius: var(--carina-border-radius-md); } .border { border-width: var(--carina-border-width-1); } .border-0 { border-width: var(--carina-border-width-0); } .border-b { border-bottom-width: var(--carina-border-width-1); } .border-b-0 { border-bottom-width: var(--carina-border-width-0); } .border-e-0 { border-inline-end-width: var(--carina-border-width-0); } .border-solid { border-style: solid; } .border-dashed { border-style: dashed; } .border-\[transparent\] { border-color: transparent; } .border-base { --tw-border-opacity: 1; border-color: color-mix(in srgb, var(--carina-border-color-base) calc(var(--tw-border-opacity, 1) * 100%), transparent); } .border-danger { --tw-border-opacity: 1; border-color: color-mix(in srgb, var(--carina-border-color-danger) calc(var(--tw-border-opacity, 1) * 100%), transparent); } .border-soft { --tw-border-opacity: 1; border-color: color-mix(in srgb, var(--carina-border-color-soft) calc(var(--tw-border-opacity, 1) * 100%), transparent); } .border-y-soft { --tw-border-opacity: 1; border-top-color: color-mix(in srgb, var(--carina-border-color-soft) calc(var(--tw-border-opacity, 1) * 100%), transparent); border-bottom-color: color-mix(in srgb, var(--carina-border-color-soft) calc(var(--tw-border-opacity, 1) * 100%), transparent); } .border-e-soft { --tw-border-opacity: 1; border-inline-end-color: color-mix(in srgb, var(--carina-border-color-soft) calc(var(--tw-border-opacity, 1) * 100%), transparent); } .border-s-\[transparent\] { border-inline-start-color: transparent; } .bg-\[transparent\] { background-color: transparent; } .bg-surface { --tw-bg-opacity: 1; background-color: color-mix(in srgb, var(--carina-background-color-surface) calc(var(--tw-bg-opacity, 1) * 100%), transparent); } .bg-surface-alt { --tw-bg-opacity: 1; background-color: color-mix(in srgb, var(--carina-background-color-surface-alt) calc(var(--tw-bg-opacity, 1) * 100%), transparent); } .p-0 { padding: var(--carina-spacing-0); } .p-2 { padding: var(--carina-spacing-2); } .p-4 { padding: var(--carina-spacing-4); } .px-0 { padding-left: var(--carina-spacing-0); padding-right: var(--carina-spacing-0); } .px-1 { padding-left: var(--carina-spacing-1); padding-right: var(--carina-spacing-1); } .px-4 { padding-left: var(--carina-spacing-4); padding-right: var(--carina-spacing-4); } .py-\[var\(--carina-tan-table-padding-vertical\)\] { padding-top: var(--carina-tan-table-padding-vertical); padding-bottom: var(--carina-tan-table-padding-vertical); } .pb-0 { padding-bottom: var(--carina-spacing-0); } .pb-1 { padding-bottom: var(--carina-spacing-1); } .pb-4 { padding-bottom: var(--carina-spacing-4); } .pe-1 { padding-inline-end: var(--carina-spacing-1); } .pe-3 { padding-inline-end: var(--carina-spacing-3); } .pe-4 { padding-inline-end: var(--carina-spacing-4); } .ps-0 { padding-inline-start: var(--carina-spacing-0); } .ps-1 { padding-inline-start: var(--carina-spacing-1); } .ps-2 { padding-inline-start: var(--carina-spacing-2); } .ps-4 { padding-inline-start: var(--carina-spacing-4); } .ps-\[var\(--carina-tan-table-padding-horizontal\)\] { padding-inline-start: var(--carina-tan-table-padding-horizontal); } .text-base { --tw-text-opacity: 1; color: color-mix(in srgb, var(--carina-text-color-base) calc(var(--tw-text-opacity, 1) * 100%), transparent); } .text-disabled { --tw-text-opacity: 1; color: color-mix(in srgb, var(--carina-text-color-disabled) calc(var(--tw-text-opacity, 1) * 100%), transparent); } .underline { text-decoration-line: underline; } .opacity-100 { opacity: var(--carina-opacity-100); } .shadow { --tw-shadow: var(--carina-box-shadow-md); --tw-shadow-colored: var(--carina-box-shadow-md); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-xl { --tw-shadow: var(--carina-box-shadow-xl); --tw-shadow-colored: var(--carina-box-shadow-xl); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .outline { outline-style: solid; } .ring { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--carina-ring-width-2) + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .blur { --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; } .transition-none { transition-property: none; } .transition-transform { transition-property: transform; } .duration-300 { transition-duration: var(--carina-transition-duration-300); } .\[--carina-avatar-bg\:var\(--carina-avatar-group-overflow-bg\2c \#c2c2c2\)\] { --carina-avatar-bg: var(--carina-avatar-group-overflow-bg,#c2c2c2); } .\[--carina-avatar-fg\:var\(--carina-avatar-group-overflow-fg\2c \#000\)\] { --carina-avatar-fg: var(--carina-avatar-group-overflow-fg,#000); } .peer:focus-visible ~ .peer-focus-visible\:-left-\[2px\] { left: -2px; } .peer:focus-visible ~ .peer-focus-visible\:-top-\[2px\] { top: -2px; } .peer:focus-visible ~ .peer-focus-visible\:z-\[calc\(var\(--carina-z-index-current\)\+1\)\] { z-index: calc(var(--carina-z-index-current) + 1); } .peer:focus-visible ~ .peer-focus-visible\:h-\[calc\(100\%\+4px\)\] { height: calc(100% + 4px); } .peer:focus-visible ~ .peer-focus-visible\:w-\[calc\(100\%\+4px\)\] { width: calc(100% + 4px); } .peer:focus-visible ~ .peer-focus-visible\:border-0 { border-width: var(--carina-border-width-0); } .peer:focus-visible ~ .peer-focus-visible\:border-2 { border-width: var(--carina-border-width-2); } .peer:focus-visible ~ .peer-focus-visible\:border-b-0 { border-bottom-width: var(--carina-border-width-0); } .peer:focus-visible ~ .peer-focus-visible\:border-b-2 { border-bottom-width: var(--carina-border-width-2); } .peer:focus-visible ~ .peer-focus-visible\:border-solid { border-style: solid; } .peer:focus-visible ~ .peer-focus-visible\:border-\[var\(--carina-border-color-danger-focus\)\] { border-color: var(--carina-border-color-danger-focus); } .peer:focus-visible ~ .peer-focus-visible\:border-danger { --tw-border-opacity: 1; border-color: color-mix(in srgb, var(--carina-border-color-danger) calc(var(--tw-border-opacity, 1) * 100%), transparent); } .peer:focus-visible ~ .peer-focus-visible\:border-primary { --tw-border-opacity: 1; border-color: color-mix(in srgb, var(--carina-border-color-primary) calc(var(--tw-border-opacity, 1) * 100%), transparent); } .peer\/decrement:focus-visible ~ .peer-focus-visible\/decrement\:border-s-\[transparent\] { border-inline-start-color: transparent; } .peer:focus-visible ~ .peer-focus-visible\:ring-0 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--carina-ring-width-0) + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .peer:focus-visible ~ .peer-focus-visible\:ring-danger { --tw-ring-color: var(--carina-ring-color-danger); } @media (min-width: 640px) { .container { max-width: 640px; } .carina-breadcrumbs__breadcrumb { display: inline-flex; } .carina-breadcrumbs__breadcrumb--mobile { display: none; } .carina-container--fixed { max-width: var(--carina-breakpoint-sm); } .carina-filter-control-bar__tag-list { display: flex; } .carina-filter-control-bar__button { margin-top: var(--carina-spacing-0); } .carina-filter-control-bar .carina-search-bar { flex-shrink: 0; width: 300px; } .carina-filter-select__inner { display: flex; } .carina-formsection.carina-formsection--stack-breakpoint-sm { flex-direction: row; border-bottom-color: var(--carina-border-color-base); border-bottom-width: var(--carina-border-width-1); border-bottom-style: solid; } .carina-formsection.carina-formsection--stack-breakpoint-sm:last-child { border-color: transparent; } .carina-formsection--stack.carina-formsection--stack-breakpoint-sm { flex-direction: column; } .carina-formsection__content--stack-breakpoint-sm { padding-left: var(--carina-spacing-6); } [dir='rtl'] .carina-formsection__content--stack-breakpoint-sm { padding-right: var(--carina-spacing-6); padding-left: 0; } .carina-formsection__content--stack.carina-formsection__content--stack-breakpoint-sm { padding-left: 0; } [dir='rtl'] .carina-formsection__content--stack.carina-formsection__content--stack-breakpoint-sm { padding-right: 0; } .carina-formsection__header.carina-formsection__header--stack-breakpoint-sm { width: 200px; } .carina-formsection__header--stack.carina-formsection__header--stack-breakpoint-sm { width: unset; } .carina-modal--fluid { --carina-z-index-current: var(--carina-z-index-modal); --carina-z-index-popper: calc( var(--carina-z-index-modal) + var(--carina-z-index-popper-diff) ); --carina-z-index-scrim: calc( var(--carina-z-index-modal) + var(--carina-z-index-scrim-diff) ); } .carina-modal__dialog--fluid { min-width: 512px; width: 80vw; } .carina-navigation-next__object-header-container { min-height: 54px; } .carina-navigation-next__object-header-container__top-breadcrumbs-root, .carina-navigation-next__object-header-container__top-chevron { display: none; } .carina-navigation-next__object-header-container__lower-container { flex-direction: row; } .carina-navigation-next__object-header-container__lower-start-text { margin-bottom: var(--carina-spacing-1); } .carina-navigation-next__object-header-container__lower-end-text { margin-inline-start: var(--carina-spacing-6); } .carina-template-illustration__wrapper svg, .carina-template-illustration__illustration-container svg { width: 375px; height: 375px; } .carina-template-illustration__wrapper--compact, .carina-template-illustration__illustration-container--compact { margin-bottom: 32px; } .carina-template-illustration__wrapper--compact svg, .carina-template-illustration__illustration-container--compact svg { width: 250px; height: 250px; } } @media (min-width: 768px) { .container { max-width: 768px; } .carina-container--fixed { max-width: var(--carina-breakpoint-md); } .carina-formsection.carina-formsection--stack-breakpoint-md { flex-direction: row; border-bottom-color: var(--carina-border-color-base); border-bottom-width: var(--carina-border-width-1); border-bottom-style: solid; } .carina-formsection.carina-formsection--stack-breakpoint-md:last-child { border-color: transparent; } .carina-formsection--stack.carina-formsection--stack-breakpoint-md { flex-direction: column; } .carina-formsection__content--stack-breakpoint-md { padding-left: var(--carina-spacing-6); } [dir='rtl'] .carina-formsection__content--stack-breakpoint-md { padding-right: var(--carina-spacing-6); padding-left: 0; } .carina-formsection__content--stack.carina-formsection__content--stack-breakpoint-md { padding-left: 0; } [dir='rtl'] .carina-formsection__content--stack.carina-formsection__content--stack-breakpoint-md { padding-right: 0; } .carina-formsection__header.carina-formsection__header--stack-breakpoint-md { width: 200px; } .carina-formsection__header--stack.carina-formsection__header--stack-breakpoint-md { width: unset; } .carina-navigation-next__mobile-navigation-container { display: none; } .carina-navigation-next__mobile-navigation-container__header { display: none; } .carina-navigation-next__solution-sidebar-container-scroll { height: 100%; } .carina-navigation-next__object-header-container { height: calc(var(--carina-navigation-object-header-full-height)); background-color: var(--carina-background-color-surface); border-bottom: var(--carina-navigation-object-header-border-height) solid var(--carina-border-color-soft); } .carina-navigation-next__object-header-container__top-chevron-container { display: flex; width: 24px; } .carina-navigation-next__object-header-container__top-icon-container { display: flex; width: 32px; margin-inline-end: var(--carina-spacing-2); } .carina-navigation-next__object-header-container__top-breadcrumbs-root, .carina-navigation-next__object-header-container__top-chevron { display: flex; } .carina-navigation-next__object-header-container__lower-start-text { margin-bottom: var(--carina-spacing-0); } .carina-navigation__search { position: relative; } .carina-navigation__top-navigation-overlay { opacity: 1; } .carina-shell[data-shell-sticky*='breadcrumbs'] .carina-shell__breadcrumbs { position: sticky; top: calc( var(--carina-shell-banner-offset) + var(--carina-shell-header-offset) + var(--carina-shell-title-offset) ); z-index: 20; transition: top 300ms ease-in-out; } .carina-shell[data-shell-enabled*='dock-start'] .carina-shell__dock--start { translate: 0; transition: max-height 300ms ease-in-out, top 300ms ease-in-out, translate 300ms ease-in-out; } .carina-shell__dock--start { translate: calc(var(--carina-shell-dock-start-width) * -1); width: var(--carina-shell-dock-start-width); transition: visibility 0ms ease-in-out 300ms, translate 300ms ease-in-out; } .carina-shell__dock--start:hover, .carina-shell__dock--start:focus-within { width: var(--carina-shell-dock-start-expanded-width); } [dir='rtl'] .carina-shell__dock--start { translate: var(--carina-shell-dock-start-width); } .carina-shell[data-shell-enabled*='dock-end'] .carina-shell__dock--end { transition: max-height 300ms ease-in-out, top 300ms ease-in-out; } .carina-shell__dock--end { width: var(--carina-shell-dock-end-current-width); transition: visibility 0ms ease-in-out 300ms, width 0ms ease-in-out 300ms; } .carina-shell__dock-items { flex-direction: column; min-width: var(--carina-shell-dock-end-width); overflow-x: hidden; overflow-y: auto; } .carina-shell__dock { max-height: calc( 100vh - var(--carina-shell-banner-offset) - var(--carina-shell-header-offset) - var(--carina-shell-title-offset) ); overflow-x: hidden; overflow-y: auto; } .carina-shell[data-shell-sticky*='page-actions'] .carina-shell__page-actions { position: sticky; top: calc( var(--carina-shell-banner-offset) + var(--carina-shell-header-offset) + var(--carina-shell-title-offset) + var(--carina-shell-breadcrumbs-offset) ); z-index: 20; transition: top 300ms ease-in-out; } .carina-stepper__mobile { display: none; } .carina-stepper__mobile__progress-bar { display: none; } .carina-stepper.carina-stepper--vertical { display: flex; flex-direction: column; } .carina-stepper.carina-stepper--horizontal { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; } .carina-stepper__progress-bar-wrapper { display: flex; flex-direction: column; } } @media (min-width: 1024px) { .container { max-width: 1024px; } .carina-container--fixed { max-width: var(--carina-breakpoint-lg); } .carina-row { --carina-row-gutter-x: var(--carina-spacing-6); } .carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } .carina-formsection.carina-formsection--stack-breakpoint-lg { flex-direction: row; border-bottom-color: var(--carina-border-color-base); border-bottom-width: var(--carina-border-width-1); border-bottom-style: solid; } .carina-formsection.carina-formsection--stack-breakpoint-lg:last-child { border-color: transparent; } .carina-formsection--stack.carina-formsection--stack-breakpoint-lg { flex-direction: column; } .carina-formsection__content--stack-breakpoint-lg { padding-left: var(--carina-spacing-6); } [dir='rtl'] .carina-formsection__content--stack-breakpoint-lg { padding-right: var(--carina-spacing-6); padding-left: 0; } .carina-formsection__content--stack.carina-formsection__content--stack-breakpoint-lg { padding-right: 0; padding-left: 0; } .carina-formsection__header.carina-formsection__header--stack-breakpoint-lg { width: 200px; } .carina-formsection__header--stack.carina-formsection__header--stack-breakpoint-lg { width: unset; } .carina-panel--inline.carina-panel--start { border-inline-end-width: var(--carina-border-width-1); } .carina-panel--inline.carina-panel--end { border-inline-start-width: var(--carina-border-width-1); } .carina-panel--inline .carina-panel__outer-container { position: static; height: 100%; box-shadow: none; } .carina-panel--productive.carina-panel--inline.carina-panel--scrim .carina-panel__outer-container, .carina-panel--expressive.carina-panel--inline.carina-panel--scrim .carina-panel__outer-container { transition-delay: 0ms; } .carina-panel--inline .carina-scrim { display: none; } .carina-panel--productive .carina-panel__content-container, .carina-panel--expressive.carina-transition--out .carina-panel__content-container { transition-delay: 0ms; } .carina-panel--productive.carina-transition--in .carina-panel__content-container, .carina-panel--productive.carina-panel--scrim.carina-transition--in .carina-panel__content-container { transition-delay: var(--carina-transition-delay-200); } .carina-panel--expressive.carina-transition--in .carina-panel__content-container, .carina-panel--expressive.carina-panel--scrim.carina-transition--in .carina-panel__content-container { transition-delay: var(--carina-transition-delay-400); } @media not (prefers-reduced-motion) { .carina-panel--inline.carina-transition--out .carina-panel__outer-container, [dir='rtl'] .carina-panel--inline.carina-transition--out .carina-panel__outer-container { --carina-transition-translate-x: 0; } .carina-panel--inline.carina-transition--out .carina-panel__outer-container { --carina-collapse-size: 0px; } } .carina-navigation-next__object-sidebar-collapse { min-width: 224px; } .carina-navigation-object-sidebar-container-scroll .carina-navigation-next__object-sidebar-link, .carina-navigation-object-sidebar-container-scroll .carina-navigation-next__object-sidebar-dropdown { padding-inline-end: 0; } .carina-navigation-next__solution-navigation-logo--compact { width: 5rem; } .carina-shell { --carina-shell-aside-start-width: 14.5rem; --carina-shell-aside-end-width: 14.5rem; } } @media (min-width: 1280px) { .container { max-width: 1280px; } .carina-container--fixed { max-width: var(--carina-breakpoint-xl); } .carina-formsection.carina-formsection--stack-breakpoint-xl { flex-direction: row; border-bottom-color: var(--carina-border-color-base); border-bottom-width: var(--carina-border-width-1); border-bottom-style: solid; } .carina-formsection.carina-formsection--stack-breakpoint-xl:last-child { border-color: transparent; } .carina-formsection--stack.carina-formsection--stack-breakpoint-xl { flex-direction: column; } .carina-formsection__content--stack-breakpoint-xl { padding-left: var(--carina-spacing-6); } [dir='rtl'] .carina-formsection__content--stack-breakpoint-xl { padding-right: var(--carina-spacing-6); padding-left: 0; } .carina-formsection__content--stack.carina-formsection__content--stack-breakpoint-xl { padding-left: 0; } [dir='rtl'] .carina-formsection__content--stack.carina-formsection__content--stack-breakpoint-xl { padding-right: 0; } .carina-formsection__header.carina-formsection__header--stack-breakpoint-xl { width: 200px; } .carina-formsection__header--stack.carina-formsection__header--stack-breakpoint-xl { width: unset; } .carina-navigation-next__object-header-container__top-end-content > * { display: flex; } } @media (min-width: 1536px) { .container { max-width: 1536px; } .carina-container--fixed { max-width: var(--carina-breakpoint-2xl); } .carina-formsection.carina-formsection--stack-breakpoint-2xl { flex-direction: row; border-bottom-color: var(--carina-border-color-base); border-bottom-width: var(--carina-border-width-1); border-bottom-style: solid; } .carina-formsection.carina-formsection--stack-breakpoint-2xl:last-child { border-color: transparent; } .carina-formsection--stack.carina-formsection--stack-breakpoint-2xl { flex-direction: column; } .carina-formsection__content--stack-breakpoint-2xl { padding-left: var(--carina-spacing-6); } [dir='rtl'] .carina-formsection__content--stack-breakpoint-2xl { padding-right: var(--carina-spacing-6); padding-left: 0; } .carina-formsection__content--stack.carina-formsection__content--stack-breakpoint-2xl { padding-left: 0; } [dir='rtl'] .carina-formsection__content--stack.carina-formsection__content--stack-breakpoint-2xl { padding-right: 0; } .carina-formsection__header.carina-formsection__header--stack-breakpoint-2xl { width: 200px; } .carina-formsection__header--stack.carina-formsection__header--stack-breakpoint-2xl { width: unset; } .carina-navigation-next__solution-navigation-logo--compact { width: 5rem; } .carina-shell[data-shell-enabled*='aside-start'] .carina-shell__aside--start { visibility: inherit; } @media (min-width: 1024px) { .carina-shell[data-shell-enabled*='aside-start'] .carina-shell__aside--start { translate: 0; transition: max-height 300ms ease-in-out, top 300ms ease-in-out, translate 300ms ease-in-out; } [dir='rtl'] .carina-shell[data-shell-enabled*='aside-start'] .carina-shell__aside--start { translate: 0; } } @media (max-width: 1023.98px) { .carina-shell[data-shell-enabled*='aside-start'] .carina-shell__aside--start { right: unset; left: var(--carina-shell-dock-start-width); width: var(--carina-shell-aside-start-width); transition: max-height 300ms ease-in-out, top 300ms ease-in-out, left 300ms ease-in-out, right 300ms ease-in-out; } [dir='rtl'] .carina-shell[data-shell-enabled*='aside-start'] .carina-shell__aside--start { right: var(--carina-shell-dock-start-width); left: unset; } } @media (min-width: 1024px) { .carina-shell__aside--start { --carina-shell-aside-start-width: 224px; translate: calc(var(--carina-shell-aside-start-width) * -1); grid-area: aside-start; width: var(--carina-shell-aside-start-width); transition: visibility 0ms ease-in-out 300ms, translate 300ms ease-in-out; } [dir='rtl'] .carina-shell__aside--start { translate: var(--carina-shell-aside-start-width); } } @media (max-width: 1023.98px) { .carina-shell__aside--start { --carina-shell-aside-start-width: 80px; position: absolute; right: unset; left: calc(var(--carina-shell-aside-start-width) * -1); z-index: 80; width: 0; box-shadow: var(--carina-box-shadow-2xl); transition: left 300ms ease-in-out, right 300ms ease-in-out, width 0ms ease-in-out 300ms, visibility 0ms ease-in-out 300ms; } [dir='rtl'] .carina-shell__aside--start { right: calc(var(--carina-shell-aside-start-width) * -1); left: unset; } } .carina-shell[data-shell-enabled*='aside-end'] .carina-shell__aside--end:is(.carina-shell__aside.carina-shell__aside--end) { visibility: inherit; transition: max-height 300ms ease-in-out, top 300ms ease-in-out; } .carina-shell__aside--end { grid-area: aside-end; width: var(--carina-shell-aside-end-current-width); transition: width 0ms ease-in-out 300ms, visibility 0ms ease-in-out 300ms; } .carina-shell__aside { position: sticky; top: calc( var(--carina-shell-banner-offset) + var(--carina-shell-header-offset) + var(--carina-shell-title-offset) + var(--carina-shell-breadcrumbs-offset) ); z-index: 30; max-height: calc( 100vh - var(--carina-shell-banner-offset) - var(--carina-shell-header-offset) - var(--carina-shell-title-offset) - var(--carina-shell-breadcrumbs-offset) ); overflow-x: hidden; overflow-y: auto; color: var(--carina-text-color-body, var(--carina-text-color-base)); background-color: var(--carina-background-color-surface); visibility: hidden; } .carina-shell__stacked-aside { display: contents; } } @media not (prefers-reduced-motion) { .carina-transition--scale-in { --carina-transition-scale: 1; } .carina-transition--scale-out { --carina-transition-scale: 0; } .carina-transition--slide-up-in, .carina-transition--slide-left-in, .carina-transition--slide-right-in, .carina-transition--slide-down-in { --carina-transition-translate-x: 0; --carina-transition-translate-y: 0; } .carina-transition--slide-up-out { --carina-transition-translate-y: 100%; } .carina-transition--slide-right-out { --carina-transition-translate-x: -100%; } .carina-transition--slide-down-out { --carina-transition-translate-y: -100%; } .carina-transition--slide-left-out { --carina-transition-translate-x: 100%; } .carina-collapse { --carina-collapse-size: auto; } .carina-collapse.carina-transition--enter-active:not(.carina-collapse--disabled), .carina-collapse.carina-transition--appear-active:not(.carina-collapse--disabled), .carina-collapse.carina-transition--exit-active:not(.carina-collapse--disabled), .carina-collapse.carina-transition--exit-done:not(.carina-collapse--disabled) { overflow: hidden; } .carina-collapse.carina-transition--enter-done:not(.carina-collapse--disabled), .carina-collapse.carina-transition--appear-done:not(.carina-collapse--disabled) { overflow: visible; } .carina-collapse--horizontal { width: var(--carina-collapse-size); } .carina-collapse--vertical { height: var(--carina-collapse-size); } .carina-collapse--horizontal.carina-transition--out:not(.carina-collapse--disabled) { --carina-collapse-size: 0; } .carina-collapse--vertical.carina-transition--out:not(.carina-collapse--disabled) { --carina-collapse-size: 0; } .carina-alerts__collapse.carina-transition--appear-start { --carina-transition-translate-y: -100%; } .carina-alerts__collapse.carina-transition--exit-done { position: absolute; } .carina-bounce { --carina-bounce-distance: -33%; animation-name: carina-bounce; } .carina-popper__transition--slide-top.carina-transition--out, .carina-popper__transition--slide-top.carina-popper__transition--disabled { --carina-transition-translate-y: var(--carina-spacing-1); } .carina-popper__transition--slide-bottom.carina-transition--out, .carina-popper__transition--slide-bottom.carina-popper__transition--disabled { --carina-transition-translate-y: calc(-1 * var(--carina-spacing-1)); } .carina-popper__transition--slide-left.carina-transition--out, .carina-popper__transition--slide-left.carina-popper__transition--disabled { --carina-transition-translate-x: var(--carina-spacing-1); } .carina-popper__transition--slide-right.carina-transition--out, .carina-popper__transition--slide-right.carina-popper__transition--disabled { --carina-transition-translate-x: calc(-1 * var(--carina-spacing-1)); } [dir='rtl'] .carina-popper__transition--slide-left.carina-transition--out, [dir='rtl'] .carina-popper__transition--slide-left.carina-popper__transition--disabled { --carina-transition-translate-x: var(--carina-spacing-1); } [dir='rtl'] .carina-popper__transition--slide-right.carina-transition--out, [dir='rtl'] .carina-popper__transition--slide-right.carina-popper__transition--disabled { --carina-transition-translate-x: calc(-1 * var(--carina-spacing-1)); } [dir='rtl'] .carina-modal__dialog--start.carina-transition--out, .carina-modal__dialog--end.carina-transition--out { --carina-transition-translate-x: 100%; } [dir='rtl'] .carina-modal__dialog--end.carina-transition--out, .carina-modal__dialog--start.carina-transition--out { --carina-transition-translate-x: -100%; } .carina-modal__dialog--bottom.carina-transition--out { --carina-transition-translate-y: 100%; } .carina-modal__dialog--center.carina-transition--out, .carina-modal__dialog--fullscreen.carina-transition--out { --carina-transition-scale-x: 0.5; --carina-transition-scale-y: 0.5; } .carina-modal__dialog--center.carina-transition--exit-active, .carina-modal__dialog--fullscreen.carina-transition--exit-active { --carina-transition-scale-x: 1; --carina-transition-scale-y: 1; } .carina-transition--out .carina-panel__outer-container { --carina-transition-translate-x: 100%; box-shadow: none; } [dir='rtl'] .carina-transition--out .carina-panel__outer-container, .carina-panel--start.carina-transition--out .carina-panel__outer-container { --carina-transition-translate-x: -100%; } [dir='rtl'] .carina-panel--start.carina-transition--out .carina-panel__outer-container { --carina-transition-translate-x: 100%; } .carina-navigation-next__app-switcher-button { transition: opacity var(--carina-transition-duration-300) var(--carina-transition-timing-function-productive-ease-out), height var(--carina-transition-duration-200) var(--carina-transition-timing-function-linear); } .carina-navigation-next__solution-sidebar-collapse { width: 100%; } .carina-shake { --carina-shake-distance: 33%; animation-name: carina-shake; } .carina-skeleton--shimmer::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient( 83deg, var(--carina-background-color-surface-alt) 0%, var(--carina-background-color-neutral-inactive) 40%, var(--carina-background-color-neutral-inactive) 60%, var(--carina-background-color-surface-alt) 100% ); transform: translateX(-100%) skewX(173deg); animation-name: carina-skeleton--shimmer; animation-duration: 2000ms; animation-timing-function: var( --carina-transition-timing-function-expressive-ease-in-out ); animation-delay: var(--carina-transition-delay-100); animation-iteration-count: infinite; content: ''; } [dir='rtl'] .carina-skeleton--shimmer::after { animation-direction: 'reverse'; } .carina-skeleton--carina-skeleton--shimmer.carina-skeleton--filled::after { background: linear-gradient( 83deg, var(--carina-background-color-neutral-inactive) 0%, var(--carina-background-color-surface-alt) 40%, var(--carina-background-color-surface-alt) 60%, var(--carina-background-color-neutral-inactive) 100% ); } } @media (prefers-reduced-motion) { .carina-transition { transition-timing-function: var(--carina-transition-timing-function-linear); transition-duration: var(--carina-transition-duration-reduced-motion); } .carina-alerts--page .carina-alerts__collapse, .carina-alerts--user .carina-alerts__collapse { transition-timing-function: var(--carina-transition-timing-function-linear); transition-duration: var(--carina-transition-duration-reduced-motion); } .carina-carousel__dot { transition-property: none; } .carina-carousel__slider { transition-duration: calc(0 * var(--carina-transition-duration-50)); } .carina-modal__content--productive { transition-delay: 0ms; } .carina-modal__content--expressive { transition-delay: 0ms; } .carina-panel .carina-scrim, .carina-panel .carina-panel__content-container, .carina-panel .carina-panel__outer-container { transition-timing-function: var(--carina-transition-timing-function-linear); transition-duration: var(--carina-transition-duration-reduced-motion); } .carina-panel__outer-container { opacity: var(--carina-transition-opacity); } .carina-panel.carina-panel--expressive.carina-panel--scrim .carina-panel__content-container, .carina-panel.carina-panel--productive.carina-panel--scrim .carina-panel__content-container, .carina-panel.carina-panel--expressive .carina-panel__content-container, .carina-panel.carina-panel--productive .carina-panel__content-container { transition-delay: 0ms; } .carina-navigation-next__app-switcher-button { transition: all var(--carina-transition-timing-function-linear) var(--carina-transition-duration-reduced-motion); } .carina-navigation-next__solution-navigation-logo__compact { transition-duration: var(--carina-transition-duration-reduced-motion); } .carina-navigation-next__solution-navigation-logo__full { transition-duration: var(--carina-transition-duration-reduced-motion); } .carina-navigation__side-navigation--animate { animation: carina-navigation__side-navigation--outer-container-in-fade var(--carina-transition-duration-reduced-motion) var(--carina-transition-timing-function-linear); } .carina-navigation__side-navigation--animate:not(.carina-navigation__side-navigation--open) { animation: carina-navigation__side-navigation--outer-container-out-fade var(--carina-transition-duration-reduced-motion) var(--carina-transition-timing-function-linear); } } @container (min-width: 640px) { .carina-bulk-action-bar__actions { display: flex; justify-content: flex-start; } .carina-bulk-action-bar__actions--small { display: none; } .\@carina-container--fixed { max-width: var(--carina-breakpoint-sm); } .carina-filter-control-bar__filters-wrapper { flex-wrap: nowrap; } } @media (hover) { .carina-carousel__control {} div:hover > .carina-carousel__control, .carina-carousel__control:focus { opacity: var(--carina-opacity-100); } } @media (max-width: 639.98px) { .carina-day-picker__months { flex-direction: column; } .carina-formsection__content--stack-breakpoint-sm { flex: 1 0 auto; } .carina-stepper__step__icon--error svg { margin-top: unset; margin-bottom: 2px; } .carina-template-illustration__header-wrapper { font-size: var(--carina-font-size-xl); } .carina-template-illustration__body-wrapper { max-width: 100%; font-size: var(--carina-font-size-sm); } } @container (min-width: 768px) { .\@carina-container--fixed { max-width: var(--carina-breakpoint-md); } } @container (min-width: 1024px) { .\@carina-container--fixed { max-width: var(--carina-breakpoint-lg); } } @container (min-width: 1280px) { .\@carina-container--fixed { max-width: var(--carina-breakpoint-xl); } } @container (min-width: 1536px) { .\@carina-container--fixed { max-width: var(--carina-breakpoint-2xl); } } @media (max-width: 767.98px) { .carina-formsection__content--stack-breakpoint-md { flex: 1 0 auto; } .carina-navigation-next__solution-sidebar-dropdown-chevron { display: block; } .carina-navigation__app-switcher-menu { width: 100vw; } .carina-navigation__search-sub-container { width: calc(100vw - 32px); } .carina-navigation__side-navigation--open { width: 100vw; } .carina-navigation__side-navigation--animate { animation: carina-navigation__side-navigation--outer-container-in-small var(--carina-transition-duration-400) var(--carina-transition-timing-function-expressive-ease-out); } .carina-navigation__side-navigation--animate:not(.carina-navigation__side-navigation--open) { animation: carina-navigation__side-navigation--outer-container-out-small var(--carina-transition-duration-200) var(--carina-transition-timing-function-expressive-ease-out); } .carina-shell[data-shell-enabled*='dock-start'] .carina-shell__dock--start { max-width: 100%; height: 100%; max-height: var(--carina-shell-dock-start-max-height); transition: max-height 300ms ease-in-out, top 300ms ease-in-out; } .carina-shell__dock--start { width: 100%; transition: max-height 300ms ease-in-out, height 0ms ease-in-out 300ms, visibility 0ms ease-in-out 300ms; } .carina-shell[data-shell-enabled*='dock-end'] .carina-shell__dock--end { max-width: 100%; height: 100%; max-height: var(--carina-shell-dock-end-max-height); transition: max-height 300ms ease-in-out, top 300ms ease-in-out; } .carina-shell__dock--end { bottom: 0; width: 100%; transition: max-height 300ms ease-in-out, height 0ms ease-in-out 300ms, visibility 0ms ease-in-out 300ms; } .carina-shell__dock-items { flex-direction: row; justify-content: space-between; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; } .carina-shell__dock-items::before, .carina-shell__dock-items::after { content: ''; } .carina-shell__dock { height: 0; max-height: 0; overflow: hidden; } .carina-shell__dock-item { min-width: 5.5rem; max-width: 6rem; } .carina-shell__page { grid-template-areas: 'dock-start' 'breadcrumbs' 'page-title' 'page-actions' 'main' 'dock-end'; grid-template-rows: auto auto auto auto 1fr auto; grid-template-columns: 1fr; } .carina-tan-table-pagination__page-container { flex-direction: column; justify-content: center; align-items: center; } .carina-tan-table-pagination { flex-direction: column; align-items: center; padding-top: var(--carina-spacing-4); gap: var(--carina-spacing-2); } .carina-template-hero-header header { margin: var(--carina-spacing-4) var(--carina-spacing-0) var(--carina-spacing-0) var(--carina-spacing-0); } .carina-template-hero-header__logo { align-self: center; margin-inline-end: var(--carina-spacing-0); } .carina-template-hero-header__content-block { margin: var(--carina-spacing-4) var(--carina-spacing-0) var(--carina-spacing-8) var(--carina-spacing-0); } .carina-template-hero-header__content-wrapper { flex-direction: column; align-items: flex-start; } } @media (max-width: 1023.98px) { .carina-formsection__content--stack-breakpoint-lg { flex: 1 0 auto; } .carina-shell__page { grid-template-areas: 'dock-start breadcrumbs dock-end' 'dock-start page-title dock-end' 'dock-start page-actions dock-end' 'dock-start main dock-end'; grid-template-rows: auto auto auto 1fr; grid-template-columns: var(--carina-shell-dock-start-current-width) 1fr var( --carina-shell-dock-end-current-width ); } .carina-tan-table-pagination__page-container { padding-inline-start: var(--carina-spacing-0); } .carina-tan-table-pagination { display: flex; flex-wrap: wrap; justify-content: center; } .carina-template-hero-header__action-wrapper { position: absolute; top: -33px; right: 0; } [dir='rtl'] .carina-template-hero-header__action-wrapper { right: unset; left: 0; } } @media (max-width: 1279.98px) { .carina-formsection__content--stack-breakpoint-xl { flex: 1 0 auto; } } @media (max-width: 1535.98px) { .carina-formsection__content--stack-breakpoint-2xl { flex: 1 0 auto; } .carina-shell__aside.carina-shell__aside--end:not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside--end) { position: fixed; right: calc(var(--carina-shell-aside-end-width) * -1); left: unset; z-index: 80; width: var(--carina-shell-aside-end-current-width); height: 100%; box-shadow: var(--carina-box-shadow-2xl); transition: left 300ms ease-in-out, right 300ms ease-in-out, width 0ms ease-in-out 300ms, visibility 0ms ease-in-out 300ms; } [dir='rtl'] .carina-shell__aside.carina-shell__aside--end:not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside--end) { right: unset; left: calc(var(--carina-shell-aside-end-width) * -1); } .carina-shell[data-shell-enabled*='aside-end'] .carina-shell__aside--end:is(.carina-shell__aside.carina-shell__aside--end):not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside.carina-shell__aside--end) { right: 0; left: unset; visibility: inherit; transition: max-height 300ms ease-in-out, top 300ms ease-in-out, left 300ms ease-in-out, right 300ms ease-in-out; } [dir='rtl'] .carina-shell[data-shell-enabled*='aside-end'] .carina-shell__aside--end:is(.carina-shell__aside.carina-shell__aside--end):not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside.carina-shell__aside--end) { right: unset; left: 0; } .carina-shell__stacked-aside[data-stack-asides='true'] { position: sticky; top: calc( var(--carina-shell-banner-offset) + var(--carina-shell-header-offset) + var(--carina-shell-title-offset) + var(--carina-shell-breadcrumbs-offset) ); z-index: 30; max-height: calc( 100vh - var(--carina-shell-banner-offset) - var(--carina-shell-header-offset) - var(--carina-shell-title-offset) - var(--carina-shell-breadcrumbs-offset) ); overflow-x: hidden; overflow-y: auto; color: var(--carina-text-color-body, var(--carina-text-color-base)); background-color: var(--carina-background-color-surface); visibility: hidden; } @media (min-width: 1024px) { .carina-shell__stacked-aside[data-stack-asides='true'] { --carina-shell-aside-start-width: 224px; translate: calc(var(--carina-shell-aside-start-width) * -1); grid-area: aside-start; width: var(--carina-shell-aside-start-width); transition: visibility 0ms ease-in-out 300ms, translate 300ms ease-in-out; } [dir='rtl'] .carina-shell__stacked-aside[data-stack-asides='true'] { translate: var(--carina-shell-aside-start-width); } } @media (max-width: 1023.98px) { .carina-shell__stacked-aside[data-stack-asides='true'] { --carina-shell-aside-start-width: 80px; position: absolute; right: unset; left: calc(var(--carina-shell-aside-start-width) * -1); z-index: 80; width: 0; box-shadow: var(--carina-box-shadow-2xl); transition: left 300ms ease-in-out, right 300ms ease-in-out, width 0ms ease-in-out 300ms, visibility 0ms ease-in-out 300ms; } [dir='rtl'] .carina-shell__stacked-aside[data-stack-asides='true'] { right: calc(var(--carina-shell-aside-start-width) * -1); left: unset; } } .carina-shell__stacked-aside[data-stack-asides='true'] { display: flex; flex-direction: column; } .carina-shell[data-shell-enabled*='aside-start'] .carina-shell__stacked-aside[data-stack-asides='true'] { visibility: inherit; } @media (min-width: 1024px) { .carina-shell[data-shell-enabled*='aside-start'] .carina-shell__stacked-aside[data-stack-asides='true'] { translate: 0; transition: max-height 300ms ease-in-out, top 300ms ease-in-out, translate 300ms ease-in-out; } [dir='rtl'] .carina-shell[data-shell-enabled*='aside-start'] .carina-shell__stacked-aside[data-stack-asides='true'] { translate: 0; } } @media (max-width: 1023.98px) { .carina-shell[data-shell-enabled*='aside-start'] .carina-shell__stacked-aside[data-stack-asides='true'] { right: unset; left: var(--carina-shell-dock-start-width); width: var(--carina-shell-aside-start-width); transition: max-height 300ms ease-in-out, top 300ms ease-in-out, left 300ms ease-in-out, right 300ms ease-in-out; } [dir='rtl'] .carina-shell[data-shell-enabled*='aside-start'] .carina-shell__stacked-aside[data-stack-asides='true'] { right: var(--carina-shell-dock-start-width); left: unset; } } .carina-shell__page { grid-template-areas: 'dock-start breadcrumbs breadcrumbs dock-end' 'dock-start aside-start page-title dock-end' 'dock-start aside-start page-actions dock-end' 'dock-start aside-start main dock-end'; grid-template-rows: auto auto auto 1fr; grid-template-columns: var(--carina-shell-dock-start-current-width) var(--carina-shell-aside-start-current-width) 1fr var( --carina-shell-dock-end-current-width ); } } @media (max-width: 560px) { .carina-modal__dialog--md { height: 100%; border-radius: 0; } } @media (max-width: 800px) { .carina-modal__dialog--lg { height: 100%; border-radius: 0; } } @media (max-width: 1240px) { .carina-modal__dialog--xl { height: 100%; border-radius: 0; } } @container (min-width: 16.5rem) { .carina-navigation-next__app-switcher-button::before { width: calc(100% - 2 * var(--carina-spacing-3)); height: calc(3.5rem + 10px); } .carina-navigation-next__app-switcher-button { width: calc(100% - 2 * var(--carina-spacing-3)); height: calc(3.5rem + 10px); } .carina-navigation-next__app-switcher-button-text-container { z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding-inline-start: var(--carina-spacing-2); color: var(--carina-text-color-base); line-height: normal; } .carina-navigation-next__app-switcher-button-chevron { z-index: 1; display: flex; margin-inline-end: var(--carina-spacing-2); } .carina-navigation-next__solution-sidebar-dropdown { padding: var(--carina-spacing-0) var(--carina-spacing-1) var(--carina-spacing-0) var(--carina-spacing-0); width: calc(100% - 2 * var(--carina-spacing-3)); } .carina-navigation-next__solution-sidebar-dropdown .carina-collapse--vertical { display: flex; } .carina-navigation-next__solution-sidebar-dropdown-title { padding-inline-start: var(--carina-spacing-2); display: flex; width: calc(100% - (2 * var(--carina-spacing-9))); } .carina-navigation-next__solution-sidebar-dropdown-dropdown-list-item { display: flex; } .carina-navigation-next__solution-sidebar-link { padding: var(--carina-spacing-0); width: calc(100% - 2 * var(--carina-spacing-3) - 2px); } .carina-navigation-next__solution-sidebar-link__link { display: flex; width: 100%; } @media (min-width: 768px) { .carina-navigation-next__solution-sidebar-link__link { width: 220px; } } .carina-navigation-next__solution-sidebar-link__link > * { display: flex; width: 160px; } } @container (width: 16.5rem) { .carina-navigation-next__app-switcher-button-icon { justify-content: center; } } @container object (min-width: 14rem) { .carina-navigation-next__object-sidebar-link { width: 100%; } .carina-navigation-next__object-sidebar-link__children-wrapper { height: unset; width: unset; clip: unset; opacity: 1; position: static; } } @container (min-width: 14rem) { .carina-navigation-next__object-sidebar-link__link { display: flex; width: 100%; } .carina-navigation-next__object-sidebar-link__link:focus-within { outline: 0; } .carina-navigation-next__object-sidebar-link__chevron--flyout { display: block; } } @container (min-width: 264px) { .carina-navigation-next__solution-navigation-logo { width: 100%; } .carina-navigation-next__solution-navigation-logo__full--compact { opacity: 100%; } } @container (max-width: 5.01rem) { .carina-navigation-next__solution-navigation-logo__compact { display: flex; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; opacity: 100%; } .carina-navigation-next__solution-navigation-logo__full { opacity: 0%; transform: translateX(-50%); } } @container (min-width: 19rem) { .carina-navigation-next__solution-sidebar-dropdown-chevron { display: block; } .carina-navigation-next__solution-sidebar-link__chevron--flyout { display: block; } } @container carina-table-responsive (max-width: 639.98px) { .carina-tan-table { border-collapse: collapse; } .carina-tan-table--rounded .carina-tan-table-body .carina-tan-table-row:first-of-type .carina-tan-table-cell:first-of-type { border-radius: var(--carina-tan-table-border-radius) var(--carina-tan-table-border-radius) var(--carina-border-radius-none) var(--carina-border-radius-none); } .carina-tan-table--rounded .carina-tan-table-body .carina-tan-table-row:last-of-type .carina-tan-table-cell:last-of-type { border-radius: var(--carina-border-radius-none) var(--carina-border-radius-none) var(--carina-tan-table-border-radius) var(--carina-tan-table-border-radius); } .carina-tan-table:has(tfoot) .carina-tan-table-body > tr:last-of-type > :is(th, td) { border-bottom-width: var(--carina-tan-table-border-width); border-bottom-style: solid; border-bottom-color: var(--carina-tan-table-border-color); } .carina-tan-table-body { display: block; } .carina-tan-table .carina-tan-table-body .carina-tan-table-row .carina-tan-table-cell { border-radius: var(--carina-border-radius-none); border-inline-end-width: var(--carina-tan-table-border-width); border-inline-end-style: solid; border-inline-end-color: var(--carina-tan-table-border-color); } .carina-tan-table .carina-tan-table-body .carina-tan-table-row .carina-tan-table-cell:first-child { border-top-width: var(--carina-tan-table-border-width); border-top-style: solid; border-top-color: var(--carina-tan-table-border-color); } .carina-tan-table .carina-tan-table-body .carina-tan-table-row:not([data-carina-tan-table-row-depth]) .carina-tan-table-cell:last-child { margin-bottom: var(--carina-spacing-4); } .carina-tan-table .carina-tan-table-body .carina-tan-table-row:has(+ [data-carina-tan-table-row-depth='0']) .carina-tan-table-cell:last-child { margin-bottom: var(--carina-spacing-4); } .carina-tan-table--rounded .carina-tan-table-body .carina-tan-table-row:not([data-carina-tan-table-row-depth]) .carina-tan-table-cell:first-child { border-radius: var(--carina-tan-table-border-radius) var(--carina-tan-table-border-radius) var(--carina-border-radius-none) var(--carina-border-radius-none); } .carina-tan-table--rounded .carina-tan-table-body .carina-tan-table-row:not([data-carina-tan-table-row-depth]) .carina-tan-table-cell:last-child { border-radius: var(--carina-border-radius-none) var(--carina-border-radius-none) var(--carina-tan-table-border-radius) var(--carina-tan-table-border-radius); } .carina-tan-table--rounded .carina-tan-table-body .carina-tan-table-row[data-carina-tan-table-row-depth='0'] .carina-tan-table-cell:first-child { border-radius: var(--carina-tan-table-border-radius) var(--carina-tan-table-border-radius) var(--carina-border-radius-none) var(--carina-border-radius-none); } .carina-tan-table--rounded .carina-tan-table-body .carina-tan-table-row:has(+ [data-carina-tan-table-row-depth='0']) .carina-tan-table-cell:last-child { border-radius: var(--carina-border-radius-none) var(--carina-border-radius-none) var(--carina-tan-table-border-radius) var(--carina-tan-table-border-radius); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-numeric-selector-tw__input--grid { padding-inline-start: calc( 50% + 36px + var(--carina-tan-table-border-width) ) !important; } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textbox__input:not(.carina-tan-table-date-range-picker__textbox-wrapper--grid *) { padding-inline-start: calc( 50% + var(--carina-tan-table-border-width) ); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textbox-icon--start { inset-inline-start: calc( 50% - var(--carina-icon-xs) - var(--carina-tan-table-padding-horizontal) ); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textarea__textarea--grid { padding-inline-start: calc(50% + var(--carina-tan-table-border-width)); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-dropdown__button--grid { padding-inline-start: calc(50% + var(--carina-tan-table-border-width)); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-numeric-selector__textbox--grid .carina-tan-table-textbox__input { padding-inline-start: calc( 50% + var(--carina-tan-table-border-width) ); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-range-picker--grid { padding-inline-start: calc( 50% - var(--carina-tan-table-padding-horizontal) ); } .carina-tan-table-cell { display: block; border-width: var(--carina-tan-table-border-width); border-style: solid; border-color: var(--carina-tan-table-border-color); position: relative; padding-inline-start: 50%; width: 100cqw; align-content: center; min-height: var(--carina-tan-table-row-height); } .carina-tan-table .carina-tan-table-body .carina-tan-table-row .carina-tan-table-cell:before { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 0; width: 45%; white-space: nowrap; content: attr(data-label); font-weight: var(--carina-font-weight-display); background: transparent; padding: var(--carina-tan-table-padding-vertical) var(--carina-tan-table-padding-horizontal); } .carina-tan-table-cell:has(.carina-tan-table-skeleton) { padding-inline-start: var(--carina-tan-table-padding-horizontal); } .carina-tan-table-cell:has(.carina-tan-table-expandable-container:empty) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .carina-tan-table .carina-tan-table-body .carina-tan-table-row[data-carina-tan-table-row-depth='1'] .carina-tan-table-cell { padding-inline-start: calc( 50% + var(--carina-tan-table-padding-horizontal) ); } .carina-tan-table .carina-tan-table-body .carina-tan-table-row[data-carina-tan-table-row-depth='1'] .carina-tan-table-cell:before { padding-inline-start: calc( 2 * var(--carina-tan-table-padding-horizontal) ); } .carina-tan-table .carina-tan-table-body .carina-tan-table-row[data-carina-tan-table-row-depth='2'] .carina-tan-table-cell { padding-inline-start: calc( 50% + (2 * var(--carina-tan-table-padding-horizontal)) ); } .carina-tan-table .carina-tan-table-body .carina-tan-table-row[data-carina-tan-table-row-depth='2'] .carina-tan-table-cell:before { padding-inline-start: calc( 3 * var(--carina-tan-table-padding-horizontal) ); } .carina-tan-table .carina-tan-table-body .carina-tan-table-row[data-carina-tan-table-row-depth='3'] .carina-tan-table-cell { padding-inline-start: calc( 50% + (3 * var(--carina-tan-table-padding-horizontal)) ); } .carina-tan-table .carina-tan-table-body .carina-tan-table-row[data-carina-tan-table-row-depth='3'] .carina-tan-table-cell:before { padding-inline-start: calc( 4 * var(--carina-tan-table-padding-horizontal) ); } .carina-tan-table .carina-tan-table-body .carina-tan-table-row[data-carina-tan-table-row-depth='4'] .carina-tan-table-cell { padding-inline-start: calc( 50% + (4 * var(--carina-tan-table-padding-horizontal)) ); } .carina-tan-table .carina-tan-table-body .carina-tan-table-row[data-carina-tan-table-row-depth='4'] .carina-tan-table-cell:before { padding-inline-start: calc( 5 * var(--carina-tan-table-padding-horizontal) ); } .carina-tan-table .carina-tan-table-head .carina-tan-table-row .carina-tan-table-cell { width: 0; padding: var(--carina-spacing-0); margin: var(--carina-spacing-0); border-width: var(--carina-border-width-0); } .carina-tan-table-cell:has(> .carina-tan-table-reorder-handle) { display: flex; justify-content: end; align-items: center; } .carina-tan-table-checkbox__box { margin-inline-start: auto; } .carina-tan-table-container { overflow-x: hidden; } .carina-tan-table-empty .carina-tan-table-empty__cell, .carina-tan-table-no-results .carina-tan-table-empty__cell, .carina-tan-table-empty .carina-tan-table-no-results__cell, .carina-tan-table-no-results .carina-tan-table-no-results__cell { width: 100cqw; border-top-width: var(--carina-tan-table-border-width); border-top-style: solid; border-top-color: var(--carina-tan-table-border-color); padding-inline-start: var(--carina-tan-table-padding-horizontal); } .carina-tan-table-empty__text, .carina-tan-table-no-results__text { max-width: calc(100cqw - var(--carina-spacing-8)); } .carina-tan-table-expandable-container { justify-content: end; } .carina-tan-table-head { display: block; border-width: var(--carina-border-width-0); } .carina-tan-table-head .carina-tan-table-row { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .carina-tan-table-header { display: block; } .carina-tan-table .carina-tan-table-head .carina-tan-table-row .carina-tan-table-header { width: 0; padding: var(--carina-spacing-0); margin: var(--carina-spacing-0); border-width: var(--carina-border-width-0); } .carina-tan-table .carina-tan-table-body .carina-tan-table-row .carina-tan-table-header { border-top-width: var(--carina-tan-table-border-width); border-top-style: solid; border-top-color: var(--carina-tan-table-border-color); padding: var(--carina-tan-table-padding-vertical) var(--carina-tan-table-padding-horizontal); } .carina-tan-table-radio-button { margin-inline-start: auto; } .carina-tan-table-container--horizontal-overflow .carina-tan-table-row .carina-tan-table-cell:not(.carina-tan-table--pinned):has(+ .carina-tan-table-cell.carina-tan-table--pinned) { border-inline-end-width: var(--carina-tan-table-border-width); border-inline-end-style: solid; border-inline-end-color: var(--carina-tan-table-border-color); } .carina-tan-table-row { height: unset; border-width: var(--carina-border-width-0); } .carina-tan-table-row-actions { justify-content: end; } .carina-tan-table-footer { display: block; border-width: var(--carina-border-width-0); } .carina-tan-table-footer .carina-tan-table-row { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } [dir='rtl'] .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-start { box-shadow: none; } .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-start { box-shadow: none; } [dir='rtl'] .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-end { box-shadow: none; } .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-end { box-shadow: none; } } @container carina-tan-table-date-range-picker-responsive (max-width: 299.9px) { .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-range-picker__textbox-wrapper--grid { flex-direction: column; min-height: calc(2 * var(--carina-tan-table-row-height)); } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-range-picker__textbox-wrapper--grid .carina-tan-table-textbox__container { height: 50%; } .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-range-picker__textbox-wrapper--grid .carina-tan-table-textbox__container:first-child::after { content: ''; position: absolute; border-bottom-width: var(--carina-tan-table-border-width); border-bottom-style: solid; border-bottom-color: var(--carina-tan-table-border-color); width: calc( 100% - (2 * var(--carina-tan-table-padding-horizontal)) ); bottom: 0; margin: var(--carina-spacing-0) var(--carina-tan-table-padding-horizontal); } } @container carina-tan-table-date-range-picker-responsive (min-width: 300px) { .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-range-picker__textbox-wrapper--grid .carina-tan-table-textbox__container:first-child::after { content: ''; position: absolute; border-left-width: var(--carina-tan-table-border-width); border-left-style: solid; border-left-color: var(--carina-tan-table-border-color); height: calc(100% - (2 * var(--carina-tan-table-padding-horizontal))); right: 0; margin: var(--carina-tan-table-padding-horizontal) 0; } } @container carina-table-responsive (min-width: 640px) { .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-start { inset-inline-start: var(--carina-tan-table-pinned-start-offset, 0px); } .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-end { inset-inline-end: var(--carina-tan-table-pinned-end-offset, 0px); } } @media (hover: hover) and (pointer: fine) { .carina-table-row--striped:nth-of-type(odd) > div:hover { background-color: var(--carina-background-color-surface-hover); } .carina-table-row__actions-start-container--x-ray, .carina-table-row__actions-end-container--x-ray { opacity: var(--carina-opacity-100); } .carina-table-row__sliding:hover { background-color: var(--carina-background-color-surface-hover); } .carina-table-row__sliding--disabled:hover { background-color: var(--carina-background-color-surface); cursor: not-allowed; } .carina-action-button:hover { background-color: var(--carina-text-color-base); } .carina-action-button--disabled:hover { background-color: transparent; } .carina-action-button--static-select-indicator:hover { background-color: var(--carina-background-color-neutral-hover); } .carina-action-button--static-actions-menu:hover { background-color: var(--carina-background-color-neutral-hover); } } .visible { visibility: visible !important; } .collapse { visibility: collapse !important; } .static { position: static !important; } .fixed { position: fixed !important; } .absolute { position: absolute !important; } .relative { position: relative !important; } .sticky { position: sticky !important; } .-left-2 { left: calc(var(--carina-spacing-2) * -1) !important; } .-left-5 { left: calc(var(--carina-spacing-5) * -1) !important; } .-left-px { left: calc(var(--carina-spacing-px) * -1) !important; } .-top-6 { top: calc(var(--carina-spacing-6) * -1) !important; } .left-0 { left: var(--carina-spacing-0) !important; } .start-0 { inset-inline-start: var(--carina-spacing-0) !important; } .top-0 { top: var(--carina-spacing-0) !important; } .z-\[101\] { z-index: 101 !important; } .z-\[9999\] { z-index: 9999 !important; } .z-\[calc\(var\(--carina-z-index-current\)\+1\)\] { z-index: calc(var(--carina-z-index-current) + 1) !important; } .m-8 { margin: var(--carina-spacing-8) !important; } .mx-3 { margin-left: var(--carina-spacing-3) !important; margin-right: var(--carina-spacing-3) !important; } .my-4 { margin-top: var(--carina-spacing-4) !important; margin-bottom: var(--carina-spacing-4) !important; } .-me-px { margin-inline-end: calc(var(--carina-spacing-px) * -1) !important; } .mb-4 { margin-bottom: var(--carina-spacing-4) !important; } .ms-0 { margin-inline-start: var(--carina-spacing-0) !important; } .ms-3 { margin-inline-start: var(--carina-spacing-3) !important; } .mt-6 { margin-top: var(--carina-spacing-6) !important; } .block { display: block !important; } .inline { display: inline !important; } .flex { display: flex !important; } .\!table { display: table !important; } .table { display: table !important; } .grid { display: grid !important; } .contents { display: contents !important; } .list-item { display: list-item !important; } .hidden { display: none !important; } .h-0 { height: var(--carina-spacing-0) !important; } .h-\[16px\] { height: 16px !important; } .h-\[24px\] { height: 24px !important; } .h-\[36px\] { height: 36px !important; } .h-\[40px\] { height: 40px !important; } .h-\[5\.130rem\] { height: 5.130rem !important; } .h-full { height: 100% !important; } .h-screen { height: 100vh !important; } .min-h-\[36px\] { min-height: 36px !important; } .w-0 { width: var(--carina-spacing-0) !important; } .w-\[16px\] { width: 16px !important; } .w-\[36px\] { width: 36px !important; } .w-full { width: 100% !important; } .min-w-0 { min-width: var(--carina-spacing-0) !important; } .min-w-\[160px\] { min-width: 160px !important; } .max-w-\[calc\(100\%_-_85px\)\] { max-width: calc(100% - 85px) !important; } .max-w-full { max-width: 100% !important; } .grow { flex-grow: 1 !important; } .-translate-x-\[calc\(100\%\+16px\)\] { --tw-translate-x: calc(calc(100% + 16px) * -1) !important; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; } .transform-none { transform: none !important; } @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite !important; } .cursor-not-allowed { cursor: not-allowed !important; } .select-none { -webkit-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } .select-text { -webkit-user-select: text !important; -ms-user-select: text !important; user-select: text !important; } .select-all { -webkit-user-select: all !important; user-select: all !important; } .resize { resize: both !important; } .items-center { align-items: center !important; } .space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0 !important; margin-top: calc(var(--carina-spacing-4) * calc(1 - var(--tw-space-y-reverse))) !important; margin-bottom: calc(var(--carina-spacing-4) * var(--tw-space-y-reverse)) !important; } .self-start { align-self: flex-start !important; } .overflow-hidden { overflow: hidden !important; } .overflow-visible { overflow: visible !important; } .overflow-x-hidden { overflow-x: hidden !important; } .truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .text-ellipsis { text-overflow: ellipsis !important; } .whitespace-nowrap { white-space: nowrap !important; } .rounded { border-radius: var(--carina-border-radius-sm) !important; } .rounded-md { border-radius: var(--carina-border-radius-md) !important; } .rounded-none { border-radius: var(--carina-border-radius-none) !important; } .rounded-e-md { border-start-end-radius: var(--carina-border-radius-md) !important; border-end-end-radius: var(--carina-border-radius-md) !important; } .rounded-e-none { border-start-end-radius: var(--carina-border-radius-none) !important; border-end-end-radius: var(--carina-border-radius-none) !important; } .rounded-s-md { border-start-start-radius: var(--carina-border-radius-md) !important; border-end-start-radius: var(--carina-border-radius-md) !important; } .rounded-s-none { border-start-start-radius: var(--carina-border-radius-none) !important; border-end-start-radius: var(--carina-border-radius-none) !important; } .rounded-ss-md { border-start-start-radius: var(--carina-border-radius-md) !important; } .border { border-width: var(--carina-border-width-1) !important; } .border-0 { border-width: var(--carina-border-width-0) !important; } .border-b { border-bottom-width: var(--carina-border-width-1) !important; } .border-b-0 { border-bottom-width: var(--carina-border-width-0) !important; } .border-e-0 { border-inline-end-width: var(--carina-border-width-0) !important; } .border-solid { border-style: solid !important; } .border-dashed { border-style: dashed !important; } .border-\[transparent\] { border-color: transparent !important; } .border-base { --tw-border-opacity: 1 !important; border-color: color-mix(in srgb, var(--carina-border-color-base) calc(var(--tw-border-opacity, 1) * 100%), transparent) !important; } .border-danger { --tw-border-opacity: 1 !important; border-color: color-mix(in srgb, var(--carina-border-color-danger) calc(var(--tw-border-opacity, 1) * 100%), transparent) !important; } .border-soft { --tw-border-opacity: 1 !important; border-color: color-mix(in srgb, var(--carina-border-color-soft) calc(var(--tw-border-opacity, 1) * 100%), transparent) !important; } .border-y-soft { --tw-border-opacity: 1 !important; border-top-color: color-mix(in srgb, var(--carina-border-color-soft) calc(var(--tw-border-opacity, 1) * 100%), transparent) !important; border-bottom-color: color-mix(in srgb, var(--carina-border-color-soft) calc(var(--tw-border-opacity, 1) * 100%), transparent) !important; } .border-e-soft { --tw-border-opacity: 1 !important; border-inline-end-color: color-mix(in srgb, var(--carina-border-color-soft) calc(var(--tw-border-opacity, 1) * 100%), transparent) !important; } .border-s-\[transparent\] { border-inline-start-color: transparent !important; } .bg-\[transparent\] { background-color: transparent !important; } .bg-surface { --tw-bg-opacity: 1 !important; background-color: color-mix(in srgb, var(--carina-background-color-surface) calc(var(--tw-bg-opacity, 1) * 100%), transparent) !important; } .bg-surface-alt { --tw-bg-opacity: 1 !important; background-color: color-mix(in srgb, var(--carina-background-color-surface-alt) calc(var(--tw-bg-opacity, 1) * 100%), transparent) !important; } .p-0 { padding: var(--carina-spacing-0) !important; } .p-2 { padding: var(--carina-spacing-2) !important; } .p-4 { padding: var(--carina-spacing-4) !important; } .p-\[0\] { padding: 0 !important; } .px-0 { padding-left: var(--carina-spacing-0) !important; padding-right: var(--carina-spacing-0) !important; } .px-1 { padding-left: var(--carina-spacing-1) !important; padding-right: var(--carina-spacing-1) !important; } .px-4 { padding-left: var(--carina-spacing-4) !important; padding-right: var(--carina-spacing-4) !important; } .py-\[var\(--carina-tan-table-padding-vertical\)\] { padding-top: var(--carina-tan-table-padding-vertical) !important; padding-bottom: var(--carina-tan-table-padding-vertical) !important; } .pb-0 { padding-bottom: var(--carina-spacing-0) !important; } .pb-1 { padding-bottom: var(--carina-spacing-1) !important; } .pb-4 { padding-bottom: var(--carina-spacing-4) !important; } .pe-1 { padding-inline-end: var(--carina-spacing-1) !important; } .pe-3 { padding-inline-end: var(--carina-spacing-3) !important; } .pe-4 { padding-inline-end: var(--carina-spacing-4) !important; } .ps-0 { padding-inline-start: var(--carina-spacing-0) !important; } .ps-1 { padding-inline-start: var(--carina-spacing-1) !important; } .ps-2 { padding-inline-start: var(--carina-spacing-2) !important; } .ps-4 { padding-inline-start: var(--carina-spacing-4) !important; } .ps-\[var\(--carina-tan-table-padding-horizontal\)\] { padding-inline-start: var(--carina-tan-table-padding-horizontal) !important; } .text-base { --tw-text-opacity: 1 !important; color: color-mix(in srgb, var(--carina-text-color-base) calc(var(--tw-text-opacity, 1) * 100%), transparent) !important; } .text-disabled { --tw-text-opacity: 1 !important; color: color-mix(in srgb, var(--carina-text-color-disabled) calc(var(--tw-text-opacity, 1) * 100%), transparent) !important; } .underline { text-decoration-line: underline !important; } .opacity-100 { opacity: var(--carina-opacity-100) !important; } .shadow { --tw-shadow: var(--carina-box-shadow-md) !important; --tw-shadow-colored: var(--carina-box-shadow-md) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; } .shadow-xl { --tw-shadow: var(--carina-box-shadow-xl) !important; --tw-shadow-colored: var(--carina-box-shadow-xl) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; } .outline { outline-style: solid !important; } .ring { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important; --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--carina-ring-width-2) + var(--tw-ring-offset-width)) var(--tw-ring-color) !important; box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important; } .blur { --tw-blur: blur(8px) !important; filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; } .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter !important; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter !important; } .transition-none { transition-property: none !important; } .transition-transform { transition-property: transform !important; } .duration-300 { transition-duration: var(--carina-transition-duration-300) !important; } .\[--carina-avatar-bg\:var\(--carina-avatar-group-overflow-bg\2c \#c2c2c2\)\] { --carina-avatar-bg: var(--carina-avatar-group-overflow-bg,#c2c2c2) !important; } .\[--carina-avatar-fg\:var\(--carina-avatar-group-overflow-fg\2c \#000\)\] { --carina-avatar-fg: var(--carina-avatar-group-overflow-fg,#000) !important; } /* Re-applies the default font-size and weight for headings */ h1, h2, h3, h4, h5, h6 { font-size: revert; font-weight: revert; margin: revert; } .focus-visible\:z-\[calc\(var\(--carina-z-index-current\)\+1\)\]:focus-visible { z-index: calc(var(--carina-z-index-current) + 1); } .focus-visible\:rounded-e-none:focus-visible { border-start-end-radius: var(--carina-border-radius-none); border-end-end-radius: var(--carina-border-radius-none); } .focus-visible\:border-0:focus-visible { border-width: var(--carina-border-width-0); } .focus-visible\:border-b-0:focus-visible { border-bottom-width: var(--carina-border-width-0); } .focus-visible\:border-base:focus-visible { --tw-border-opacity: 1; border-color: color-mix(in srgb, var(--carina-border-color-base) calc(var(--tw-border-opacity, 1) * 100%), transparent); } .focus-visible\:border-danger:focus-visible { --tw-border-opacity: 1; border-color: color-mix(in srgb, var(--carina-border-color-danger) calc(var(--tw-border-opacity, 1) * 100%), transparent); } .focus-visible\:outline:focus-visible { outline-style: solid; } .focus-visible\:ring:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--carina-ring-width-2) + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .peer:focus-visible ~ .peer-focus-visible\:z-\[calc\(var\(--carina-z-index-current\)\+1\)\] { z-index: calc(var(--carina-z-index-current) + 1); } .peer:focus-visible ~ .peer-focus-visible\:border-0 { border-width: var(--carina-border-width-0); } .peer:focus-visible ~ .peer-focus-visible\:border-b-0 { border-bottom-width: var(--carina-border-width-0); } .peer:focus-visible ~ .peer-focus-visible\:border-solid { border-style: solid; } .peer:focus-visible ~ .peer-focus-visible\:border-danger { --tw-border-opacity: 1; border-color: color-mix(in srgb, var(--carina-border-color-danger) calc(var(--tw-border-opacity, 1) * 100%), transparent); } .peer\/decrement:focus-visible ~ .peer-focus-visible\/decrement\:border-s-\[transparent\] { border-inline-start-color: transparent; } @container (min-width: 640px) { .\@sm\:hidden { display: none; } .\@sm\:carina-row--cols-auto > * { flex: 0 0 auto; width: auto; } .\@sm\:carina-row--cols-1 > * { flex: 0 0 auto; width: calc(100% / 1); } .\@sm\:carina-row--cols-2 > * { flex: 0 0 auto; width: calc(100% / 2); } .\@sm\:carina-row--cols-3 > * { flex: 0 0 auto; width: calc(100% / 3); } .\@sm\:carina-row--cols-4 > * { flex: 0 0 auto; width: calc(100% / 4); } .\@sm\:carina-row--cols-5 > * { flex: 0 0 auto; width: calc(100% / 5); } .\@sm\:carina-row--cols-6 > * { flex: 0 0 auto; width: calc(100% / 6); } .\@sm\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .\@sm\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .\@sm\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .\@sm\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .\@sm\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .\@sm\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .\@sm\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .\@sm\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .\@sm\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .\@sm\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .\@sm\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .\@sm\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .\@sm\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .\@sm\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .\@sm\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .\@sm\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .\@sm\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .\@sm\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } .\@sm\:carina-column--fill { flex: 1 0 0%; width: 0; } .\@sm\:carina-column--auto { flex: 0 0 auto; width: auto; } .\@sm\:carina-column--span-1 { flex: 0 0 auto; width: calc(100% * 1 / 12); } .\@sm\:carina-column--span-2 { flex: 0 0 auto; width: calc(100% * 2 / 12); } .\@sm\:carina-column--span-3 { flex: 0 0 auto; width: calc(100% * 3 / 12); } .\@sm\:carina-column--span-4 { flex: 0 0 auto; width: calc(100% * 4 / 12); } .\@sm\:carina-column--span-5 { flex: 0 0 auto; width: calc(100% * 5 / 12); } .\@sm\:carina-column--span-6 { flex: 0 0 auto; width: calc(100% * 6 / 12); } .\@sm\:carina-column--span-7 { flex: 0 0 auto; width: calc(100% * 7 / 12); } .\@sm\:carina-column--span-8 { flex: 0 0 auto; width: calc(100% * 8 / 12); } .\@sm\:carina-column--span-9 { flex: 0 0 auto; width: calc(100% * 9 / 12); } .\@sm\:carina-column--span-10 { flex: 0 0 auto; width: calc(100% * 10 / 12); } .\@sm\:carina-column--span-11 { flex: 0 0 auto; width: calc(100% * 11 / 12); } .\@sm\:carina-column--span-12 { flex: 0 0 auto; width: calc(100% * 12 / 12); } .\@sm\:carina-column--offset-1 { margin-right: 0; margin-left: calc(100% * 1 / 12); } [dir='rtl'] .\@sm\:carina-column--offset-1 { margin-right: calc(100% * 1 / 12); margin-left: 0; } .\@sm\:carina-column--offset-2 { margin-right: 0; margin-left: calc(100% * 2 / 12); } [dir='rtl'] .\@sm\:carina-column--offset-2 { margin-right: calc(100% * 2 / 12); margin-left: 0; } .\@sm\:carina-column--offset-3 { margin-right: 0; margin-left: calc(100% * 3 / 12); } [dir='rtl'] .\@sm\:carina-column--offset-3 { margin-right: calc(100% * 3 / 12); margin-left: 0; } .\@sm\:carina-column--offset-4 { margin-right: 0; margin-left: calc(100% * 4 / 12); } [dir='rtl'] .\@sm\:carina-column--offset-4 { margin-right: calc(100% * 4 / 12); margin-left: 0; } .\@sm\:carina-column--offset-5 { margin-right: 0; margin-left: calc(100% * 5 / 12); } [dir='rtl'] .\@sm\:carina-column--offset-5 { margin-right: calc(100% * 5 / 12); margin-left: 0; } .\@sm\:carina-column--offset-6 { margin-right: 0; margin-left: calc(100% * 6 / 12); } [dir='rtl'] .\@sm\:carina-column--offset-6 { margin-right: calc(100% * 6 / 12); margin-left: 0; } .\@sm\:carina-column--offset-7 { margin-right: 0; margin-left: calc(100% * 7 / 12); } [dir='rtl'] .\@sm\:carina-column--offset-7 { margin-right: calc(100% * 7 / 12); margin-left: 0; } .\@sm\:carina-column--offset-8 { margin-right: 0; margin-left: calc(100% * 8 / 12); } [dir='rtl'] .\@sm\:carina-column--offset-8 { margin-right: calc(100% * 8 / 12); margin-left: 0; } .\@sm\:carina-column--offset-9 { margin-right: 0; margin-left: calc(100% * 9 / 12); } [dir='rtl'] .\@sm\:carina-column--offset-9 { margin-right: calc(100% * 9 / 12); margin-left: 0; } .\@sm\:carina-column--offset-10 { margin-right: 0; margin-left: calc(100% * 10 / 12); } [dir='rtl'] .\@sm\:carina-column--offset-10 { margin-right: calc(100% * 10 / 12); margin-left: 0; } .\@sm\:carina-column--offset-11 { margin-right: 0; margin-left: calc(100% * 11 / 12); } [dir='rtl'] .\@sm\:carina-column--offset-11 { margin-right: calc(100% * 11 / 12); margin-left: 0; } .\@sm\:inline { display: inline; } @media (min-width: 1024px) { .\@sm\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .\@sm\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .\@sm\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .\@sm\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .\@sm\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .\@sm\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .\@sm\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .\@sm\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .\@sm\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .\@sm\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .\@sm\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .\@sm\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .\@sm\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .\@sm\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .\@sm\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .\@sm\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .\@sm\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .\@sm\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } } } @container (min-width: 768px) { .\@md\:carina-row--cols-auto > * { flex: 0 0 auto; width: auto; } .\@md\:carina-row--cols-1 > * { flex: 0 0 auto; width: calc(100% / 1); } .\@md\:carina-row--cols-2 > * { flex: 0 0 auto; width: calc(100% / 2); } .\@md\:carina-row--cols-3 > * { flex: 0 0 auto; width: calc(100% / 3); } .\@md\:carina-row--cols-4 > * { flex: 0 0 auto; width: calc(100% / 4); } .\@md\:carina-row--cols-5 > * { flex: 0 0 auto; width: calc(100% / 5); } .\@md\:carina-row--cols-6 > * { flex: 0 0 auto; width: calc(100% / 6); } .\@md\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .\@md\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .\@md\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .\@md\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .\@md\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .\@md\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .\@md\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .\@md\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .\@md\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .\@md\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .\@md\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .\@md\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .\@md\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .\@md\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .\@md\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .\@md\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .\@md\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .\@md\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } .\@md\:carina-column--fill { flex: 1 0 0%; width: 0; } .\@md\:carina-column--auto { flex: 0 0 auto; width: auto; } .\@md\:carina-column--span-1 { flex: 0 0 auto; width: calc(100% * 1 / 12); } .\@md\:carina-column--span-2 { flex: 0 0 auto; width: calc(100% * 2 / 12); } .\@md\:carina-column--span-3 { flex: 0 0 auto; width: calc(100% * 3 / 12); } .\@md\:carina-column--span-4 { flex: 0 0 auto; width: calc(100% * 4 / 12); } .\@md\:carina-column--span-5 { flex: 0 0 auto; width: calc(100% * 5 / 12); } .\@md\:carina-column--span-6 { flex: 0 0 auto; width: calc(100% * 6 / 12); } .\@md\:carina-column--span-7 { flex: 0 0 auto; width: calc(100% * 7 / 12); } .\@md\:carina-column--span-8 { flex: 0 0 auto; width: calc(100% * 8 / 12); } .\@md\:carina-column--span-9 { flex: 0 0 auto; width: calc(100% * 9 / 12); } .\@md\:carina-column--span-10 { flex: 0 0 auto; width: calc(100% * 10 / 12); } .\@md\:carina-column--span-11 { flex: 0 0 auto; width: calc(100% * 11 / 12); } .\@md\:carina-column--span-12 { flex: 0 0 auto; width: calc(100% * 12 / 12); } .\@md\:carina-column--offset-1 { margin-right: 0; margin-left: calc(100% * 1 / 12); } [dir='rtl'] .\@md\:carina-column--offset-1 { margin-right: calc(100% * 1 / 12); margin-left: 0; } .\@md\:carina-column--offset-2 { margin-right: 0; margin-left: calc(100% * 2 / 12); } [dir='rtl'] .\@md\:carina-column--offset-2 { margin-right: calc(100% * 2 / 12); margin-left: 0; } .\@md\:carina-column--offset-3 { margin-right: 0; margin-left: calc(100% * 3 / 12); } [dir='rtl'] .\@md\:carina-column--offset-3 { margin-right: calc(100% * 3 / 12); margin-left: 0; } .\@md\:carina-column--offset-4 { margin-right: 0; margin-left: calc(100% * 4 / 12); } [dir='rtl'] .\@md\:carina-column--offset-4 { margin-right: calc(100% * 4 / 12); margin-left: 0; } .\@md\:carina-column--offset-5 { margin-right: 0; margin-left: calc(100% * 5 / 12); } [dir='rtl'] .\@md\:carina-column--offset-5 { margin-right: calc(100% * 5 / 12); margin-left: 0; } .\@md\:carina-column--offset-6 { margin-right: 0; margin-left: calc(100% * 6 / 12); } [dir='rtl'] .\@md\:carina-column--offset-6 { margin-right: calc(100% * 6 / 12); margin-left: 0; } .\@md\:carina-column--offset-7 { margin-right: 0; margin-left: calc(100% * 7 / 12); } [dir='rtl'] .\@md\:carina-column--offset-7 { margin-right: calc(100% * 7 / 12); margin-left: 0; } .\@md\:carina-column--offset-8 { margin-right: 0; margin-left: calc(100% * 8 / 12); } [dir='rtl'] .\@md\:carina-column--offset-8 { margin-right: calc(100% * 8 / 12); margin-left: 0; } .\@md\:carina-column--offset-9 { margin-right: 0; margin-left: calc(100% * 9 / 12); } [dir='rtl'] .\@md\:carina-column--offset-9 { margin-right: calc(100% * 9 / 12); margin-left: 0; } .\@md\:carina-column--offset-10 { margin-right: 0; margin-left: calc(100% * 10 / 12); } [dir='rtl'] .\@md\:carina-column--offset-10 { margin-right: calc(100% * 10 / 12); margin-left: 0; } .\@md\:carina-column--offset-11 { margin-right: 0; margin-left: calc(100% * 11 / 12); } [dir='rtl'] .\@md\:carina-column--offset-11 { margin-right: calc(100% * 11 / 12); margin-left: 0; } @media (min-width: 1024px) { .\@md\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .\@md\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .\@md\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .\@md\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .\@md\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .\@md\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .\@md\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .\@md\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .\@md\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .\@md\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .\@md\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .\@md\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .\@md\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .\@md\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .\@md\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .\@md\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .\@md\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .\@md\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } } } @container (min-width: 1024px) { .\@lg\:carina-row--cols-auto > * { flex: 0 0 auto; width: auto; } .\@lg\:carina-row--cols-1 > * { flex: 0 0 auto; width: calc(100% / 1); } .\@lg\:carina-row--cols-2 > * { flex: 0 0 auto; width: calc(100% / 2); } .\@lg\:carina-row--cols-3 > * { flex: 0 0 auto; width: calc(100% / 3); } .\@lg\:carina-row--cols-4 > * { flex: 0 0 auto; width: calc(100% / 4); } .\@lg\:carina-row--cols-5 > * { flex: 0 0 auto; width: calc(100% / 5); } .\@lg\:carina-row--cols-6 > * { flex: 0 0 auto; width: calc(100% / 6); } .\@lg\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .\@lg\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .\@lg\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .\@lg\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .\@lg\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .\@lg\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .\@lg\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .\@lg\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .\@lg\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .\@lg\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .\@lg\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .\@lg\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .\@lg\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .\@lg\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .\@lg\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .\@lg\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .\@lg\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .\@lg\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } .\@lg\:carina-column--fill { flex: 1 0 0%; width: 0; } .\@lg\:carina-column--auto { flex: 0 0 auto; width: auto; } .\@lg\:carina-column--span-1 { flex: 0 0 auto; width: calc(100% * 1 / 12); } .\@lg\:carina-column--span-2 { flex: 0 0 auto; width: calc(100% * 2 / 12); } .\@lg\:carina-column--span-3 { flex: 0 0 auto; width: calc(100% * 3 / 12); } .\@lg\:carina-column--span-4 { flex: 0 0 auto; width: calc(100% * 4 / 12); } .\@lg\:carina-column--span-5 { flex: 0 0 auto; width: calc(100% * 5 / 12); } .\@lg\:carina-column--span-6 { flex: 0 0 auto; width: calc(100% * 6 / 12); } .\@lg\:carina-column--span-7 { flex: 0 0 auto; width: calc(100% * 7 / 12); } .\@lg\:carina-column--span-8 { flex: 0 0 auto; width: calc(100% * 8 / 12); } .\@lg\:carina-column--span-9 { flex: 0 0 auto; width: calc(100% * 9 / 12); } .\@lg\:carina-column--span-10 { flex: 0 0 auto; width: calc(100% * 10 / 12); } .\@lg\:carina-column--span-11 { flex: 0 0 auto; width: calc(100% * 11 / 12); } .\@lg\:carina-column--span-12 { flex: 0 0 auto; width: calc(100% * 12 / 12); } .\@lg\:carina-column--offset-1 { margin-right: 0; margin-left: calc(100% * 1 / 12); } [dir='rtl'] .\@lg\:carina-column--offset-1 { margin-right: calc(100% * 1 / 12); margin-left: 0; } .\@lg\:carina-column--offset-2 { margin-right: 0; margin-left: calc(100% * 2 / 12); } [dir='rtl'] .\@lg\:carina-column--offset-2 { margin-right: calc(100% * 2 / 12); margin-left: 0; } .\@lg\:carina-column--offset-3 { margin-right: 0; margin-left: calc(100% * 3 / 12); } [dir='rtl'] .\@lg\:carina-column--offset-3 { margin-right: calc(100% * 3 / 12); margin-left: 0; } .\@lg\:carina-column--offset-4 { margin-right: 0; margin-left: calc(100% * 4 / 12); } [dir='rtl'] .\@lg\:carina-column--offset-4 { margin-right: calc(100% * 4 / 12); margin-left: 0; } .\@lg\:carina-column--offset-5 { margin-right: 0; margin-left: calc(100% * 5 / 12); } [dir='rtl'] .\@lg\:carina-column--offset-5 { margin-right: calc(100% * 5 / 12); margin-left: 0; } .\@lg\:carina-column--offset-6 { margin-right: 0; margin-left: calc(100% * 6 / 12); } [dir='rtl'] .\@lg\:carina-column--offset-6 { margin-right: calc(100% * 6 / 12); margin-left: 0; } .\@lg\:carina-column--offset-7 { margin-right: 0; margin-left: calc(100% * 7 / 12); } [dir='rtl'] .\@lg\:carina-column--offset-7 { margin-right: calc(100% * 7 / 12); margin-left: 0; } .\@lg\:carina-column--offset-8 { margin-right: 0; margin-left: calc(100% * 8 / 12); } [dir='rtl'] .\@lg\:carina-column--offset-8 { margin-right: calc(100% * 8 / 12); margin-left: 0; } .\@lg\:carina-column--offset-9 { margin-right: 0; margin-left: calc(100% * 9 / 12); } [dir='rtl'] .\@lg\:carina-column--offset-9 { margin-right: calc(100% * 9 / 12); margin-left: 0; } .\@lg\:carina-column--offset-10 { margin-right: 0; margin-left: calc(100% * 10 / 12); } [dir='rtl'] .\@lg\:carina-column--offset-10 { margin-right: calc(100% * 10 / 12); margin-left: 0; } .\@lg\:carina-column--offset-11 { margin-right: 0; margin-left: calc(100% * 11 / 12); } [dir='rtl'] .\@lg\:carina-column--offset-11 { margin-right: calc(100% * 11 / 12); margin-left: 0; } @media (min-width: 1024px) { .\@lg\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .\@lg\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .\@lg\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .\@lg\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .\@lg\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .\@lg\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .\@lg\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .\@lg\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .\@lg\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .\@lg\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .\@lg\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .\@lg\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .\@lg\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .\@lg\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .\@lg\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .\@lg\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .\@lg\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .\@lg\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } } } @container (min-width: 1280px) { .\@xl\:carina-row--cols-auto > * { flex: 0 0 auto; width: auto; } .\@xl\:carina-row--cols-1 > * { flex: 0 0 auto; width: calc(100% / 1); } .\@xl\:carina-row--cols-2 > * { flex: 0 0 auto; width: calc(100% / 2); } .\@xl\:carina-row--cols-3 > * { flex: 0 0 auto; width: calc(100% / 3); } .\@xl\:carina-row--cols-4 > * { flex: 0 0 auto; width: calc(100% / 4); } .\@xl\:carina-row--cols-5 > * { flex: 0 0 auto; width: calc(100% / 5); } .\@xl\:carina-row--cols-6 > * { flex: 0 0 auto; width: calc(100% / 6); } .\@xl\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .\@xl\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .\@xl\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .\@xl\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .\@xl\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .\@xl\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .\@xl\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .\@xl\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .\@xl\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .\@xl\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .\@xl\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .\@xl\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .\@xl\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .\@xl\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .\@xl\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .\@xl\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .\@xl\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .\@xl\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } .\@xl\:carina-column--fill { flex: 1 0 0%; width: 0; } .\@xl\:carina-column--auto { flex: 0 0 auto; width: auto; } .\@xl\:carina-column--span-1 { flex: 0 0 auto; width: calc(100% * 1 / 12); } .\@xl\:carina-column--span-2 { flex: 0 0 auto; width: calc(100% * 2 / 12); } .\@xl\:carina-column--span-3 { flex: 0 0 auto; width: calc(100% * 3 / 12); } .\@xl\:carina-column--span-4 { flex: 0 0 auto; width: calc(100% * 4 / 12); } .\@xl\:carina-column--span-5 { flex: 0 0 auto; width: calc(100% * 5 / 12); } .\@xl\:carina-column--span-6 { flex: 0 0 auto; width: calc(100% * 6 / 12); } .\@xl\:carina-column--span-7 { flex: 0 0 auto; width: calc(100% * 7 / 12); } .\@xl\:carina-column--span-8 { flex: 0 0 auto; width: calc(100% * 8 / 12); } .\@xl\:carina-column--span-9 { flex: 0 0 auto; width: calc(100% * 9 / 12); } .\@xl\:carina-column--span-10 { flex: 0 0 auto; width: calc(100% * 10 / 12); } .\@xl\:carina-column--span-11 { flex: 0 0 auto; width: calc(100% * 11 / 12); } .\@xl\:carina-column--span-12 { flex: 0 0 auto; width: calc(100% * 12 / 12); } .\@xl\:carina-column--offset-1 { margin-right: 0; margin-left: calc(100% * 1 / 12); } [dir='rtl'] .\@xl\:carina-column--offset-1 { margin-right: calc(100% * 1 / 12); margin-left: 0; } .\@xl\:carina-column--offset-2 { margin-right: 0; margin-left: calc(100% * 2 / 12); } [dir='rtl'] .\@xl\:carina-column--offset-2 { margin-right: calc(100% * 2 / 12); margin-left: 0; } .\@xl\:carina-column--offset-3 { margin-right: 0; margin-left: calc(100% * 3 / 12); } [dir='rtl'] .\@xl\:carina-column--offset-3 { margin-right: calc(100% * 3 / 12); margin-left: 0; } .\@xl\:carina-column--offset-4 { margin-right: 0; margin-left: calc(100% * 4 / 12); } [dir='rtl'] .\@xl\:carina-column--offset-4 { margin-right: calc(100% * 4 / 12); margin-left: 0; } .\@xl\:carina-column--offset-5 { margin-right: 0; margin-left: calc(100% * 5 / 12); } [dir='rtl'] .\@xl\:carina-column--offset-5 { margin-right: calc(100% * 5 / 12); margin-left: 0; } .\@xl\:carina-column--offset-6 { margin-right: 0; margin-left: calc(100% * 6 / 12); } [dir='rtl'] .\@xl\:carina-column--offset-6 { margin-right: calc(100% * 6 / 12); margin-left: 0; } .\@xl\:carina-column--offset-7 { margin-right: 0; margin-left: calc(100% * 7 / 12); } [dir='rtl'] .\@xl\:carina-column--offset-7 { margin-right: calc(100% * 7 / 12); margin-left: 0; } .\@xl\:carina-column--offset-8 { margin-right: 0; margin-left: calc(100% * 8 / 12); } [dir='rtl'] .\@xl\:carina-column--offset-8 { margin-right: calc(100% * 8 / 12); margin-left: 0; } .\@xl\:carina-column--offset-9 { margin-right: 0; margin-left: calc(100% * 9 / 12); } [dir='rtl'] .\@xl\:carina-column--offset-9 { margin-right: calc(100% * 9 / 12); margin-left: 0; } .\@xl\:carina-column--offset-10 { margin-right: 0; margin-left: calc(100% * 10 / 12); } [dir='rtl'] .\@xl\:carina-column--offset-10 { margin-right: calc(100% * 10 / 12); margin-left: 0; } .\@xl\:carina-column--offset-11 { margin-right: 0; margin-left: calc(100% * 11 / 12); } [dir='rtl'] .\@xl\:carina-column--offset-11 { margin-right: calc(100% * 11 / 12); margin-left: 0; } @media (min-width: 1024px) { .\@xl\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .\@xl\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .\@xl\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .\@xl\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .\@xl\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .\@xl\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .\@xl\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .\@xl\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .\@xl\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .\@xl\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .\@xl\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .\@xl\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .\@xl\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .\@xl\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .\@xl\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .\@xl\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .\@xl\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .\@xl\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } } } @container (min-width: 1536px) { .\@2xl\:carina-row--cols-auto > * { flex: 0 0 auto; width: auto; } .\@2xl\:carina-row--cols-1 > * { flex: 0 0 auto; width: calc(100% / 1); } .\@2xl\:carina-row--cols-2 > * { flex: 0 0 auto; width: calc(100% / 2); } .\@2xl\:carina-row--cols-3 > * { flex: 0 0 auto; width: calc(100% / 3); } .\@2xl\:carina-row--cols-4 > * { flex: 0 0 auto; width: calc(100% / 4); } .\@2xl\:carina-row--cols-5 > * { flex: 0 0 auto; width: calc(100% / 5); } .\@2xl\:carina-row--cols-6 > * { flex: 0 0 auto; width: calc(100% / 6); } .\@2xl\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .\@2xl\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .\@2xl\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .\@2xl\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .\@2xl\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .\@2xl\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .\@2xl\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .\@2xl\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .\@2xl\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .\@2xl\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .\@2xl\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .\@2xl\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .\@2xl\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .\@2xl\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .\@2xl\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .\@2xl\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .\@2xl\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .\@2xl\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } .\@2xl\:carina-column--fill { flex: 1 0 0%; width: 0; } .\@2xl\:carina-column--auto { flex: 0 0 auto; width: auto; } .\@2xl\:carina-column--span-1 { flex: 0 0 auto; width: calc(100% * 1 / 12); } .\@2xl\:carina-column--span-2 { flex: 0 0 auto; width: calc(100% * 2 / 12); } .\@2xl\:carina-column--span-3 { flex: 0 0 auto; width: calc(100% * 3 / 12); } .\@2xl\:carina-column--span-4 { flex: 0 0 auto; width: calc(100% * 4 / 12); } .\@2xl\:carina-column--span-5 { flex: 0 0 auto; width: calc(100% * 5 / 12); } .\@2xl\:carina-column--span-6 { flex: 0 0 auto; width: calc(100% * 6 / 12); } .\@2xl\:carina-column--span-7 { flex: 0 0 auto; width: calc(100% * 7 / 12); } .\@2xl\:carina-column--span-8 { flex: 0 0 auto; width: calc(100% * 8 / 12); } .\@2xl\:carina-column--span-9 { flex: 0 0 auto; width: calc(100% * 9 / 12); } .\@2xl\:carina-column--span-10 { flex: 0 0 auto; width: calc(100% * 10 / 12); } .\@2xl\:carina-column--span-11 { flex: 0 0 auto; width: calc(100% * 11 / 12); } .\@2xl\:carina-column--span-12 { flex: 0 0 auto; width: calc(100% * 12 / 12); } .\@2xl\:carina-column--offset-1 { margin-right: 0; margin-left: calc(100% * 1 / 12); } [dir='rtl'] .\@2xl\:carina-column--offset-1 { margin-right: calc(100% * 1 / 12); margin-left: 0; } .\@2xl\:carina-column--offset-2 { margin-right: 0; margin-left: calc(100% * 2 / 12); } [dir='rtl'] .\@2xl\:carina-column--offset-2 { margin-right: calc(100% * 2 / 12); margin-left: 0; } .\@2xl\:carina-column--offset-3 { margin-right: 0; margin-left: calc(100% * 3 / 12); } [dir='rtl'] .\@2xl\:carina-column--offset-3 { margin-right: calc(100% * 3 / 12); margin-left: 0; } .\@2xl\:carina-column--offset-4 { margin-right: 0; margin-left: calc(100% * 4 / 12); } [dir='rtl'] .\@2xl\:carina-column--offset-4 { margin-right: calc(100% * 4 / 12); margin-left: 0; } .\@2xl\:carina-column--offset-5 { margin-right: 0; margin-left: calc(100% * 5 / 12); } [dir='rtl'] .\@2xl\:carina-column--offset-5 { margin-right: calc(100% * 5 / 12); margin-left: 0; } .\@2xl\:carina-column--offset-6 { margin-right: 0; margin-left: calc(100% * 6 / 12); } [dir='rtl'] .\@2xl\:carina-column--offset-6 { margin-right: calc(100% * 6 / 12); margin-left: 0; } .\@2xl\:carina-column--offset-7 { margin-right: 0; margin-left: calc(100% * 7 / 12); } [dir='rtl'] .\@2xl\:carina-column--offset-7 { margin-right: calc(100% * 7 / 12); margin-left: 0; } .\@2xl\:carina-column--offset-8 { margin-right: 0; margin-left: calc(100% * 8 / 12); } [dir='rtl'] .\@2xl\:carina-column--offset-8 { margin-right: calc(100% * 8 / 12); margin-left: 0; } .\@2xl\:carina-column--offset-9 { margin-right: 0; margin-left: calc(100% * 9 / 12); } [dir='rtl'] .\@2xl\:carina-column--offset-9 { margin-right: calc(100% * 9 / 12); margin-left: 0; } .\@2xl\:carina-column--offset-10 { margin-right: 0; margin-left: calc(100% * 10 / 12); } [dir='rtl'] .\@2xl\:carina-column--offset-10 { margin-right: calc(100% * 10 / 12); margin-left: 0; } .\@2xl\:carina-column--offset-11 { margin-right: 0; margin-left: calc(100% * 11 / 12); } [dir='rtl'] .\@2xl\:carina-column--offset-11 { margin-right: calc(100% * 11 / 12); margin-left: 0; } @media (min-width: 1024px) { .\@2xl\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .\@2xl\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .\@2xl\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .\@2xl\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .\@2xl\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .\@2xl\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .\@2xl\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .\@2xl\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .\@2xl\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .\@2xl\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .\@2xl\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .\@2xl\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .\@2xl\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .\@2xl\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .\@2xl\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .\@2xl\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .\@2xl\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .\@2xl\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } } } @media (min-width: 640px) { .sm\:hidden { display: none; } .sm\:carina-row--cols-auto > * { flex: 0 0 auto; width: auto; } .sm\:carina-row--cols-1 > * { flex: 0 0 auto; width: calc(100% / 1); } .sm\:carina-row--cols-2 > * { flex: 0 0 auto; width: calc(100% / 2); } .sm\:carina-row--cols-3 > * { flex: 0 0 auto; width: calc(100% / 3); } .sm\:carina-row--cols-4 > * { flex: 0 0 auto; width: calc(100% / 4); } .sm\:carina-row--cols-5 > * { flex: 0 0 auto; width: calc(100% / 5); } .sm\:carina-row--cols-6 > * { flex: 0 0 auto; width: calc(100% / 6); } .sm\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .sm\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .sm\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .sm\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .sm\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .sm\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .sm\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .sm\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .sm\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .sm\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .sm\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .sm\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .sm\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .sm\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .sm\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .sm\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .sm\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .sm\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } .sm\:carina-column--fill { flex: 1 0 0%; width: 0; } .sm\:carina-column--auto { flex: 0 0 auto; width: auto; } .sm\:carina-column--span-1 { flex: 0 0 auto; width: calc(100% * 1 / 12); } .sm\:carina-column--span-2 { flex: 0 0 auto; width: calc(100% * 2 / 12); } .sm\:carina-column--span-3 { flex: 0 0 auto; width: calc(100% * 3 / 12); } .sm\:carina-column--span-4 { flex: 0 0 auto; width: calc(100% * 4 / 12); } .sm\:carina-column--span-5 { flex: 0 0 auto; width: calc(100% * 5 / 12); } .sm\:carina-column--span-6 { flex: 0 0 auto; width: calc(100% * 6 / 12); } .sm\:carina-column--span-7 { flex: 0 0 auto; width: calc(100% * 7 / 12); } .sm\:carina-column--span-8 { flex: 0 0 auto; width: calc(100% * 8 / 12); } .sm\:carina-column--span-9 { flex: 0 0 auto; width: calc(100% * 9 / 12); } .sm\:carina-column--span-10 { flex: 0 0 auto; width: calc(100% * 10 / 12); } .sm\:carina-column--span-11 { flex: 0 0 auto; width: calc(100% * 11 / 12); } .sm\:carina-column--span-12 { flex: 0 0 auto; width: calc(100% * 12 / 12); } .sm\:carina-column--offset-1 { margin-right: 0; margin-left: calc(100% * 1 / 12); } [dir='rtl'] .sm\:carina-column--offset-1 { margin-right: calc(100% * 1 / 12); margin-left: 0; } .sm\:carina-column--offset-2 { margin-right: 0; margin-left: calc(100% * 2 / 12); } [dir='rtl'] .sm\:carina-column--offset-2 { margin-right: calc(100% * 2 / 12); margin-left: 0; } .sm\:carina-column--offset-3 { margin-right: 0; margin-left: calc(100% * 3 / 12); } [dir='rtl'] .sm\:carina-column--offset-3 { margin-right: calc(100% * 3 / 12); margin-left: 0; } .sm\:carina-column--offset-4 { margin-right: 0; margin-left: calc(100% * 4 / 12); } [dir='rtl'] .sm\:carina-column--offset-4 { margin-right: calc(100% * 4 / 12); margin-left: 0; } .sm\:carina-column--offset-5 { margin-right: 0; margin-left: calc(100% * 5 / 12); } [dir='rtl'] .sm\:carina-column--offset-5 { margin-right: calc(100% * 5 / 12); margin-left: 0; } .sm\:carina-column--offset-6 { margin-right: 0; margin-left: calc(100% * 6 / 12); } [dir='rtl'] .sm\:carina-column--offset-6 { margin-right: calc(100% * 6 / 12); margin-left: 0; } .sm\:carina-column--offset-7 { margin-right: 0; margin-left: calc(100% * 7 / 12); } [dir='rtl'] .sm\:carina-column--offset-7 { margin-right: calc(100% * 7 / 12); margin-left: 0; } .sm\:carina-column--offset-8 { margin-right: 0; margin-left: calc(100% * 8 / 12); } [dir='rtl'] .sm\:carina-column--offset-8 { margin-right: calc(100% * 8 / 12); margin-left: 0; } .sm\:carina-column--offset-9 { margin-right: 0; margin-left: calc(100% * 9 / 12); } [dir='rtl'] .sm\:carina-column--offset-9 { margin-right: calc(100% * 9 / 12); margin-left: 0; } .sm\:carina-column--offset-10 { margin-right: 0; margin-left: calc(100% * 10 / 12); } [dir='rtl'] .sm\:carina-column--offset-10 { margin-right: calc(100% * 10 / 12); margin-left: 0; } .sm\:carina-column--offset-11 { margin-right: 0; margin-left: calc(100% * 11 / 12); } [dir='rtl'] .sm\:carina-column--offset-11 { margin-right: calc(100% * 11 / 12); margin-left: 0; } @media (min-width: 1024px) { .sm\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .sm\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .sm\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .sm\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .sm\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .sm\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .sm\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .sm\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .sm\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .sm\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .sm\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .sm\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .sm\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .sm\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .sm\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .sm\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .sm\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .sm\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } } } @media (min-width: 768px) { .md\:hidden { display: none; } .md\:carina-row--cols-auto > * { flex: 0 0 auto; width: auto; } .md\:carina-row--cols-1 > * { flex: 0 0 auto; width: calc(100% / 1); } .md\:carina-row--cols-2 > * { flex: 0 0 auto; width: calc(100% / 2); } .md\:carina-row--cols-3 > * { flex: 0 0 auto; width: calc(100% / 3); } .md\:carina-row--cols-4 > * { flex: 0 0 auto; width: calc(100% / 4); } .md\:carina-row--cols-5 > * { flex: 0 0 auto; width: calc(100% / 5); } .md\:carina-row--cols-6 > * { flex: 0 0 auto; width: calc(100% / 6); } .md\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .md\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .md\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .md\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .md\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .md\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .md\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .md\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .md\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .md\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .md\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .md\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .md\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .md\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .md\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .md\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .md\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .md\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } .md\:carina-column--fill { flex: 1 0 0%; width: 0; } .md\:carina-column--auto { flex: 0 0 auto; width: auto; } .md\:carina-column--span-1 { flex: 0 0 auto; width: calc(100% * 1 / 12); } .md\:carina-column--span-2 { flex: 0 0 auto; width: calc(100% * 2 / 12); } .md\:carina-column--span-3 { flex: 0 0 auto; width: calc(100% * 3 / 12); } .md\:carina-column--span-4 { flex: 0 0 auto; width: calc(100% * 4 / 12); } .md\:carina-column--span-5 { flex: 0 0 auto; width: calc(100% * 5 / 12); } .md\:carina-column--span-6 { flex: 0 0 auto; width: calc(100% * 6 / 12); } .md\:carina-column--span-7 { flex: 0 0 auto; width: calc(100% * 7 / 12); } .md\:carina-column--span-8 { flex: 0 0 auto; width: calc(100% * 8 / 12); } .md\:carina-column--span-9 { flex: 0 0 auto; width: calc(100% * 9 / 12); } .md\:carina-column--span-10 { flex: 0 0 auto; width: calc(100% * 10 / 12); } .md\:carina-column--span-11 { flex: 0 0 auto; width: calc(100% * 11 / 12); } .md\:carina-column--span-12 { flex: 0 0 auto; width: calc(100% * 12 / 12); } .md\:carina-column--offset-1 { margin-right: 0; margin-left: calc(100% * 1 / 12); } [dir='rtl'] .md\:carina-column--offset-1 { margin-right: calc(100% * 1 / 12); margin-left: 0; } .md\:carina-column--offset-2 { margin-right: 0; margin-left: calc(100% * 2 / 12); } [dir='rtl'] .md\:carina-column--offset-2 { margin-right: calc(100% * 2 / 12); margin-left: 0; } .md\:carina-column--offset-3 { margin-right: 0; margin-left: calc(100% * 3 / 12); } [dir='rtl'] .md\:carina-column--offset-3 { margin-right: calc(100% * 3 / 12); margin-left: 0; } .md\:carina-column--offset-4 { margin-right: 0; margin-left: calc(100% * 4 / 12); } [dir='rtl'] .md\:carina-column--offset-4 { margin-right: calc(100% * 4 / 12); margin-left: 0; } .md\:carina-column--offset-5 { margin-right: 0; margin-left: calc(100% * 5 / 12); } [dir='rtl'] .md\:carina-column--offset-5 { margin-right: calc(100% * 5 / 12); margin-left: 0; } .md\:carina-column--offset-6 { margin-right: 0; margin-left: calc(100% * 6 / 12); } [dir='rtl'] .md\:carina-column--offset-6 { margin-right: calc(100% * 6 / 12); margin-left: 0; } .md\:carina-column--offset-7 { margin-right: 0; margin-left: calc(100% * 7 / 12); } [dir='rtl'] .md\:carina-column--offset-7 { margin-right: calc(100% * 7 / 12); margin-left: 0; } .md\:carina-column--offset-8 { margin-right: 0; margin-left: calc(100% * 8 / 12); } [dir='rtl'] .md\:carina-column--offset-8 { margin-right: calc(100% * 8 / 12); margin-left: 0; } .md\:carina-column--offset-9 { margin-right: 0; margin-left: calc(100% * 9 / 12); } [dir='rtl'] .md\:carina-column--offset-9 { margin-right: calc(100% * 9 / 12); margin-left: 0; } .md\:carina-column--offset-10 { margin-right: 0; margin-left: calc(100% * 10 / 12); } [dir='rtl'] .md\:carina-column--offset-10 { margin-right: calc(100% * 10 / 12); margin-left: 0; } .md\:carina-column--offset-11 { margin-right: 0; margin-left: calc(100% * 11 / 12); } [dir='rtl'] .md\:carina-column--offset-11 { margin-right: calc(100% * 11 / 12); margin-left: 0; } @media (min-width: 1024px) { .md\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .md\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .md\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .md\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .md\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .md\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .md\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .md\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .md\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .md\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .md\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .md\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .md\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .md\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .md\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .md\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .md\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .md\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } } } @media (min-width: 1024px) { .lg\:carina-row--cols-auto > * { flex: 0 0 auto; width: auto; } .lg\:carina-row--cols-1 > * { flex: 0 0 auto; width: calc(100% / 1); } .lg\:carina-row--cols-2 > * { flex: 0 0 auto; width: calc(100% / 2); } .lg\:carina-row--cols-3 > * { flex: 0 0 auto; width: calc(100% / 3); } .lg\:carina-row--cols-4 > * { flex: 0 0 auto; width: calc(100% / 4); } .lg\:carina-row--cols-5 > * { flex: 0 0 auto; width: calc(100% / 5); } .lg\:carina-row--cols-6 > * { flex: 0 0 auto; width: calc(100% / 6); } .lg\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .lg\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .lg\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .lg\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .lg\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .lg\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .lg\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .lg\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .lg\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .lg\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .lg\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .lg\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .lg\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .lg\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .lg\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .lg\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .lg\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .lg\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } .lg\:carina-column--fill { flex: 1 0 0%; width: 0; } .lg\:carina-column--auto { flex: 0 0 auto; width: auto; } .lg\:carina-column--span-1 { flex: 0 0 auto; width: calc(100% * 1 / 12); } .lg\:carina-column--span-2 { flex: 0 0 auto; width: calc(100% * 2 / 12); } .lg\:carina-column--span-3 { flex: 0 0 auto; width: calc(100% * 3 / 12); } .lg\:carina-column--span-4 { flex: 0 0 auto; width: calc(100% * 4 / 12); } .lg\:carina-column--span-5 { flex: 0 0 auto; width: calc(100% * 5 / 12); } .lg\:carina-column--span-6 { flex: 0 0 auto; width: calc(100% * 6 / 12); } .lg\:carina-column--span-7 { flex: 0 0 auto; width: calc(100% * 7 / 12); } .lg\:carina-column--span-8 { flex: 0 0 auto; width: calc(100% * 8 / 12); } .lg\:carina-column--span-9 { flex: 0 0 auto; width: calc(100% * 9 / 12); } .lg\:carina-column--span-10 { flex: 0 0 auto; width: calc(100% * 10 / 12); } .lg\:carina-column--span-11 { flex: 0 0 auto; width: calc(100% * 11 / 12); } .lg\:carina-column--span-12 { flex: 0 0 auto; width: calc(100% * 12 / 12); } .lg\:carina-column--offset-1 { margin-right: 0; margin-left: calc(100% * 1 / 12); } [dir='rtl'] .lg\:carina-column--offset-1 { margin-right: calc(100% * 1 / 12); margin-left: 0; } .lg\:carina-column--offset-2 { margin-right: 0; margin-left: calc(100% * 2 / 12); } [dir='rtl'] .lg\:carina-column--offset-2 { margin-right: calc(100% * 2 / 12); margin-left: 0; } .lg\:carina-column--offset-3 { margin-right: 0; margin-left: calc(100% * 3 / 12); } [dir='rtl'] .lg\:carina-column--offset-3 { margin-right: calc(100% * 3 / 12); margin-left: 0; } .lg\:carina-column--offset-4 { margin-right: 0; margin-left: calc(100% * 4 / 12); } [dir='rtl'] .lg\:carina-column--offset-4 { margin-right: calc(100% * 4 / 12); margin-left: 0; } .lg\:carina-column--offset-5 { margin-right: 0; margin-left: calc(100% * 5 / 12); } [dir='rtl'] .lg\:carina-column--offset-5 { margin-right: calc(100% * 5 / 12); margin-left: 0; } .lg\:carina-column--offset-6 { margin-right: 0; margin-left: calc(100% * 6 / 12); } [dir='rtl'] .lg\:carina-column--offset-6 { margin-right: calc(100% * 6 / 12); margin-left: 0; } .lg\:carina-column--offset-7 { margin-right: 0; margin-left: calc(100% * 7 / 12); } [dir='rtl'] .lg\:carina-column--offset-7 { margin-right: calc(100% * 7 / 12); margin-left: 0; } .lg\:carina-column--offset-8 { margin-right: 0; margin-left: calc(100% * 8 / 12); } [dir='rtl'] .lg\:carina-column--offset-8 { margin-right: calc(100% * 8 / 12); margin-left: 0; } .lg\:carina-column--offset-9 { margin-right: 0; margin-left: calc(100% * 9 / 12); } [dir='rtl'] .lg\:carina-column--offset-9 { margin-right: calc(100% * 9 / 12); margin-left: 0; } .lg\:carina-column--offset-10 { margin-right: 0; margin-left: calc(100% * 10 / 12); } [dir='rtl'] .lg\:carina-column--offset-10 { margin-right: calc(100% * 10 / 12); margin-left: 0; } .lg\:carina-column--offset-11 { margin-right: 0; margin-left: calc(100% * 11 / 12); } [dir='rtl'] .lg\:carina-column--offset-11 { margin-right: calc(100% * 11 / 12); margin-left: 0; } @media (min-width: 1024px) { .lg\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .lg\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .lg\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .lg\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .lg\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .lg\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .lg\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .lg\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .lg\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .lg\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .lg\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .lg\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .lg\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .lg\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .lg\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .lg\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .lg\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .lg\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } } } @media (min-width: 1280px) { .xl\:carina-row--cols-auto > * { flex: 0 0 auto; width: auto; } .xl\:carina-row--cols-1 > * { flex: 0 0 auto; width: calc(100% / 1); } .xl\:carina-row--cols-2 > * { flex: 0 0 auto; width: calc(100% / 2); } .xl\:carina-row--cols-3 > * { flex: 0 0 auto; width: calc(100% / 3); } .xl\:carina-row--cols-4 > * { flex: 0 0 auto; width: calc(100% / 4); } .xl\:carina-row--cols-5 > * { flex: 0 0 auto; width: calc(100% / 5); } .xl\:carina-row--cols-6 > * { flex: 0 0 auto; width: calc(100% / 6); } .xl\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .xl\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .xl\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .xl\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .xl\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .xl\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .xl\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .xl\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .xl\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .xl\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .xl\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .xl\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .xl\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .xl\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .xl\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .xl\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .xl\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .xl\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } .xl\:carina-column--fill { flex: 1 0 0%; width: 0; } .xl\:carina-column--auto { flex: 0 0 auto; width: auto; } .xl\:carina-column--span-1 { flex: 0 0 auto; width: calc(100% * 1 / 12); } .xl\:carina-column--span-2 { flex: 0 0 auto; width: calc(100% * 2 / 12); } .xl\:carina-column--span-3 { flex: 0 0 auto; width: calc(100% * 3 / 12); } .xl\:carina-column--span-4 { flex: 0 0 auto; width: calc(100% * 4 / 12); } .xl\:carina-column--span-5 { flex: 0 0 auto; width: calc(100% * 5 / 12); } .xl\:carina-column--span-6 { flex: 0 0 auto; width: calc(100% * 6 / 12); } .xl\:carina-column--span-7 { flex: 0 0 auto; width: calc(100% * 7 / 12); } .xl\:carina-column--span-8 { flex: 0 0 auto; width: calc(100% * 8 / 12); } .xl\:carina-column--span-9 { flex: 0 0 auto; width: calc(100% * 9 / 12); } .xl\:carina-column--span-10 { flex: 0 0 auto; width: calc(100% * 10 / 12); } .xl\:carina-column--span-11 { flex: 0 0 auto; width: calc(100% * 11 / 12); } .xl\:carina-column--span-12 { flex: 0 0 auto; width: calc(100% * 12 / 12); } .xl\:carina-column--offset-1 { margin-right: 0; margin-left: calc(100% * 1 / 12); } [dir='rtl'] .xl\:carina-column--offset-1 { margin-right: calc(100% * 1 / 12); margin-left: 0; } .xl\:carina-column--offset-2 { margin-right: 0; margin-left: calc(100% * 2 / 12); } [dir='rtl'] .xl\:carina-column--offset-2 { margin-right: calc(100% * 2 / 12); margin-left: 0; } .xl\:carina-column--offset-3 { margin-right: 0; margin-left: calc(100% * 3 / 12); } [dir='rtl'] .xl\:carina-column--offset-3 { margin-right: calc(100% * 3 / 12); margin-left: 0; } .xl\:carina-column--offset-4 { margin-right: 0; margin-left: calc(100% * 4 / 12); } [dir='rtl'] .xl\:carina-column--offset-4 { margin-right: calc(100% * 4 / 12); margin-left: 0; } .xl\:carina-column--offset-5 { margin-right: 0; margin-left: calc(100% * 5 / 12); } [dir='rtl'] .xl\:carina-column--offset-5 { margin-right: calc(100% * 5 / 12); margin-left: 0; } .xl\:carina-column--offset-6 { margin-right: 0; margin-left: calc(100% * 6 / 12); } [dir='rtl'] .xl\:carina-column--offset-6 { margin-right: calc(100% * 6 / 12); margin-left: 0; } .xl\:carina-column--offset-7 { margin-right: 0; margin-left: calc(100% * 7 / 12); } [dir='rtl'] .xl\:carina-column--offset-7 { margin-right: calc(100% * 7 / 12); margin-left: 0; } .xl\:carina-column--offset-8 { margin-right: 0; margin-left: calc(100% * 8 / 12); } [dir='rtl'] .xl\:carina-column--offset-8 { margin-right: calc(100% * 8 / 12); margin-left: 0; } .xl\:carina-column--offset-9 { margin-right: 0; margin-left: calc(100% * 9 / 12); } [dir='rtl'] .xl\:carina-column--offset-9 { margin-right: calc(100% * 9 / 12); margin-left: 0; } .xl\:carina-column--offset-10 { margin-right: 0; margin-left: calc(100% * 10 / 12); } [dir='rtl'] .xl\:carina-column--offset-10 { margin-right: calc(100% * 10 / 12); margin-left: 0; } .xl\:carina-column--offset-11 { margin-right: 0; margin-left: calc(100% * 11 / 12); } [dir='rtl'] .xl\:carina-column--offset-11 { margin-right: calc(100% * 11 / 12); margin-left: 0; } @media (min-width: 1024px) { .xl\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .xl\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .xl\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .xl\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .xl\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .xl\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .xl\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .xl\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .xl\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .xl\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .xl\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .xl\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .xl\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .xl\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .xl\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .xl\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .xl\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .xl\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } } } @media (min-width: 1536px) { .\32xl\:carina-row--cols-auto > * { flex: 0 0 auto; width: auto; } .\32xl\:carina-row--cols-1 > * { flex: 0 0 auto; width: calc(100% / 1); } .\32xl\:carina-row--cols-2 > * { flex: 0 0 auto; width: calc(100% / 2); } .\32xl\:carina-row--cols-3 > * { flex: 0 0 auto; width: calc(100% / 3); } .\32xl\:carina-row--cols-4 > * { flex: 0 0 auto; width: calc(100% / 4); } .\32xl\:carina-row--cols-5 > * { flex: 0 0 auto; width: calc(100% / 5); } .\32xl\:carina-row--cols-6 > * { flex: 0 0 auto; width: calc(100% / 6); } .\32xl\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .\32xl\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .\32xl\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .\32xl\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .\32xl\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .\32xl\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .\32xl\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .\32xl\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .\32xl\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .\32xl\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .\32xl\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .\32xl\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .\32xl\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .\32xl\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .\32xl\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .\32xl\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .\32xl\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .\32xl\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } .\32xl\:carina-column--fill { flex: 1 0 0%; width: 0; } .\32xl\:carina-column--auto { flex: 0 0 auto; width: auto; } .\32xl\:carina-column--span-1 { flex: 0 0 auto; width: calc(100% * 1 / 12); } .\32xl\:carina-column--span-2 { flex: 0 0 auto; width: calc(100% * 2 / 12); } .\32xl\:carina-column--span-3 { flex: 0 0 auto; width: calc(100% * 3 / 12); } .\32xl\:carina-column--span-4 { flex: 0 0 auto; width: calc(100% * 4 / 12); } .\32xl\:carina-column--span-5 { flex: 0 0 auto; width: calc(100% * 5 / 12); } .\32xl\:carina-column--span-6 { flex: 0 0 auto; width: calc(100% * 6 / 12); } .\32xl\:carina-column--span-7 { flex: 0 0 auto; width: calc(100% * 7 / 12); } .\32xl\:carina-column--span-8 { flex: 0 0 auto; width: calc(100% * 8 / 12); } .\32xl\:carina-column--span-9 { flex: 0 0 auto; width: calc(100% * 9 / 12); } .\32xl\:carina-column--span-10 { flex: 0 0 auto; width: calc(100% * 10 / 12); } .\32xl\:carina-column--span-11 { flex: 0 0 auto; width: calc(100% * 11 / 12); } .\32xl\:carina-column--span-12 { flex: 0 0 auto; width: calc(100% * 12 / 12); } .\32xl\:carina-column--offset-1 { margin-right: 0; margin-left: calc(100% * 1 / 12); } [dir='rtl'] .\32xl\:carina-column--offset-1 { margin-right: calc(100% * 1 / 12); margin-left: 0; } .\32xl\:carina-column--offset-2 { margin-right: 0; margin-left: calc(100% * 2 / 12); } [dir='rtl'] .\32xl\:carina-column--offset-2 { margin-right: calc(100% * 2 / 12); margin-left: 0; } .\32xl\:carina-column--offset-3 { margin-right: 0; margin-left: calc(100% * 3 / 12); } [dir='rtl'] .\32xl\:carina-column--offset-3 { margin-right: calc(100% * 3 / 12); margin-left: 0; } .\32xl\:carina-column--offset-4 { margin-right: 0; margin-left: calc(100% * 4 / 12); } [dir='rtl'] .\32xl\:carina-column--offset-4 { margin-right: calc(100% * 4 / 12); margin-left: 0; } .\32xl\:carina-column--offset-5 { margin-right: 0; margin-left: calc(100% * 5 / 12); } [dir='rtl'] .\32xl\:carina-column--offset-5 { margin-right: calc(100% * 5 / 12); margin-left: 0; } .\32xl\:carina-column--offset-6 { margin-right: 0; margin-left: calc(100% * 6 / 12); } [dir='rtl'] .\32xl\:carina-column--offset-6 { margin-right: calc(100% * 6 / 12); margin-left: 0; } .\32xl\:carina-column--offset-7 { margin-right: 0; margin-left: calc(100% * 7 / 12); } [dir='rtl'] .\32xl\:carina-column--offset-7 { margin-right: calc(100% * 7 / 12); margin-left: 0; } .\32xl\:carina-column--offset-8 { margin-right: 0; margin-left: calc(100% * 8 / 12); } [dir='rtl'] .\32xl\:carina-column--offset-8 { margin-right: calc(100% * 8 / 12); margin-left: 0; } .\32xl\:carina-column--offset-9 { margin-right: 0; margin-left: calc(100% * 9 / 12); } [dir='rtl'] .\32xl\:carina-column--offset-9 { margin-right: calc(100% * 9 / 12); margin-left: 0; } .\32xl\:carina-column--offset-10 { margin-right: 0; margin-left: calc(100% * 10 / 12); } [dir='rtl'] .\32xl\:carina-column--offset-10 { margin-right: calc(100% * 10 / 12); margin-left: 0; } .\32xl\:carina-column--offset-11 { margin-right: 0; margin-left: calc(100% * 11 / 12); } [dir='rtl'] .\32xl\:carina-column--offset-11 { margin-right: calc(100% * 11 / 12); margin-left: 0; } @media (min-width: 1024px) { .\32xl\:carina-row--gutter-x-compact { --carina-row-gutter-x: var(--carina-spacing-4); } .\32xl\:carina-row--gutter-y-compact { --carina-row-gutter-y: var(--carina-spacing-4); } .\32xl\:carina-row--gutter-x-default { --carina-row-gutter-x: var(--carina-spacing-6); } .\32xl\:carina-row--gutter-y-default { --carina-row-gutter-y: var(--carina-spacing-6); } .\32xl\:carina-row--gutter-x-roomy { --carina-row-gutter-x: var(--carina-spacing-8); } .\32xl\:carina-row--gutter-y-roomy { --carina-row-gutter-y: var(--carina-spacing-8); } .\32xl\:carina-row--gutter-x-0 { --carina-row-gutter-x: var(--carina-spacing-0); } .\32xl\:carina-row--gutter-y-0 { --carina-row-gutter-y: var(--carina-spacing-0); } .\32xl\:carina-row--gutter-x-2 { --carina-row-gutter-x: var(--carina-spacing-2); } .\32xl\:carina-row--gutter-y-2 { --carina-row-gutter-y: var(--carina-spacing-2); } .\32xl\:carina-row--gutter-x-4 { --carina-row-gutter-x: var(--carina-spacing-4); } .\32xl\:carina-row--gutter-y-4 { --carina-row-gutter-y: var(--carina-spacing-4); } .\32xl\:carina-row--gutter-x-6 { --carina-row-gutter-x: var(--carina-spacing-6); } .\32xl\:carina-row--gutter-y-6 { --carina-row-gutter-y: var(--carina-spacing-6); } .\32xl\:carina-row--gutter-x-8 { --carina-row-gutter-x: var(--carina-spacing-8); } .\32xl\:carina-row--gutter-y-8 { --carina-row-gutter-y: var(--carina-spacing-8); } .\32xl\:carina-row--gutter-x-10 { --carina-row-gutter-x: var(--carina-spacing-10); } .\32xl\:carina-row--gutter-y-10 { --carina-row-gutter-y: var(--carina-spacing-10); } } } .focus-visible\:z-\[calc\(var\(--carina-z-index-current\)\+1\)\]:focus-visible { z-index: calc(var(--carina-z-index-current) + 1) !important; } .focus-visible\:rounded-sm:focus-visible { border-radius: var(--carina-border-radius-sm) !important; } .focus-visible\:rounded-e-none:focus-visible { border-start-end-radius: var(--carina-border-radius-none) !important; border-end-end-radius: var(--carina-border-radius-none) !important; } .focus-visible\:border-0:focus-visible { border-width: var(--carina-border-width-0) !important; } .focus-visible\:border-b-0:focus-visible { border-bottom-width: var(--carina-border-width-0) !important; } .focus-visible\:border-e:focus-visible { border-inline-end-width: var(--carina-border-width-1) !important; } .focus-visible\:border-base:focus-visible { --tw-border-opacity: 1 !important; border-color: color-mix(in srgb, var(--carina-border-color-base) calc(var(--tw-border-opacity, 1) * 100%), transparent) !important; } .focus-visible\:border-danger:focus-visible { --tw-border-opacity: 1 !important; border-color: color-mix(in srgb, var(--carina-border-color-danger) calc(var(--tw-border-opacity, 1) * 100%), transparent) !important; } .focus-visible\:outline:focus-visible { outline-style: solid !important; } .focus-visible\:outline-0:focus-visible { outline-width: 0px !important; } .focus-visible\:outline-2:focus-visible { outline-width: 2px !important; } .focus-visible\:outline-\[var\(--carina-border-color-danger-focus\)\]:focus-visible { outline-color: var(--carina-border-color-danger-focus) !important; } .focus-visible\:ring:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important; --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--carina-ring-width-2) + var(--tw-ring-offset-width)) var(--tw-ring-color) !important; box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important; } .focus-visible\:ring-danger:focus-visible { --tw-ring-color: var(--carina-ring-color-danger) !important; } .peer:focus-visible ~ .peer-focus-visible\:-left-\[2px\] { left: -2px !important; } .peer:focus-visible ~ .peer-focus-visible\:-top-\[2px\] { top: -2px !important; } .peer:focus-visible ~ .peer-focus-visible\:z-\[calc\(var\(--carina-z-index-current\)\+1\)\] { z-index: calc(var(--carina-z-index-current) + 1) !important; } .peer:focus-visible ~ .peer-focus-visible\:h-\[calc\(100\%\+4px\)\] { height: calc(100% + 4px) !important; } .peer:focus-visible ~ .peer-focus-visible\:w-\[calc\(100\%\+4px\)\] { width: calc(100% + 4px) !important; } .peer:focus-visible ~ .peer-focus-visible\:border-0 { border-width: var(--carina-border-width-0) !important; } .peer:focus-visible ~ .peer-focus-visible\:border-2 { border-width: var(--carina-border-width-2) !important; } .peer:focus-visible ~ .peer-focus-visible\:border-b-0 { border-bottom-width: var(--carina-border-width-0) !important; } .peer:focus-visible ~ .peer-focus-visible\:border-b-2 { border-bottom-width: var(--carina-border-width-2) !important; } .peer:focus-visible ~ .peer-focus-visible\:border-solid { border-style: solid !important; } .peer:focus-visible ~ .peer-focus-visible\:border-\[var\(--carina-border-color-danger-focus\)\] { border-color: var(--carina-border-color-danger-focus) !important; } .peer:focus-visible ~ .peer-focus-visible\:border-danger { --tw-border-opacity: 1 !important; border-color: color-mix(in srgb, var(--carina-border-color-danger) calc(var(--tw-border-opacity, 1) * 100%), transparent) !important; } .peer:focus-visible ~ .peer-focus-visible\:border-primary { --tw-border-opacity: 1 !important; border-color: color-mix(in srgb, var(--carina-border-color-primary) calc(var(--tw-border-opacity, 1) * 100%), transparent) !important; } .peer\/decrement:focus-visible ~ .peer-focus-visible\/decrement\:border-s-\[transparent\] { border-inline-start-color: transparent !important; } .peer:focus-visible ~ .peer-focus-visible\:ring-0 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important; --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--carina-ring-width-0) + var(--tw-ring-offset-width)) var(--tw-ring-color) !important; box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important; } .peer:focus-visible ~ .peer-focus-visible\:ring-danger { --tw-ring-color: var(--carina-ring-color-danger) !important; } .has-\[\+\:focus-visible\]\:border-e-\[transparent\]:has(+:focus-visible) { border-inline-end-color: transparent !important; } @container (min-width: 640px) { .\@sm\:inline { display: inline !important; } .\@sm\:hidden { display: none !important; } } @media (min-width: 640px) { .sm\:hidden { display: none !important; } } @media (min-width: 768px) { .md\:hidden { display: none !important; } .md\:\!w-\[224px\] { width: 224px !important; } .md\:\!w-\[304px\] { width: 304px !important; } } /*# sourceMappingURL=sourcemaps/main.31babf071980030da356.css.map*/