/* Card-Methology, this file should not be used to style cards and controls */ .ukiCardContainer, .ukiSubCardContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } /* .ukiCardContainer .ukiCardContainerElement {position: relative;min-height: 1px;overflow: auto;-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;} */ .ukiCardContainer .ukiCardContainerElement {position: relative;min-height: 1px;-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;} .ukiCardContainer .ukiCardContainerElement .ukiCardContent { -webkit-box-flex: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-direction: row; } .ukiCardContainer .ukiCardContainerElement.tiny { max-height: 15em; } .ukiCardContainer .ukiCardContainerElement.medium { max-height: 25em; } .ukiCardContainer .ukiCardContainerElement.large { max-height: 50em; } .ukiCardContainer .ukiCardContainerElement .ukiCardContent > DIV { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; position: relative; min-height: 1px; } .ukiCardContainer .ukiCardContainerElement .ukiControl, .ukiCardContainer .ukiCardContainerElement .ukiSubCardContainer .ukiCardContainerElement .ukiControl.w1, .ukiCardContainer .ukiCardContainerElement .ukiSubCardContainer .ukiCardContainerElement .ukiControl.w2, .ukiCardContainer .ukiCardContainerElement .ukiSubCardContainer .ukiCardContainerElement .ukiControl.w3, .ukiCardContainer .ukiCardContainerElement .ukiSubCardContainer .ukiCardContainerElement .ukiControl.w4, .ukiCardContainer .ukiCardContainerElement .ukiSubCardContainer .ukiCardContainerElement .ukiControl.w5, .ukiCardContainer .ukiCardContainerElement .ukiSubCardContainer .ukiCardContainerElement .ukiControl.w6, .ukiCardContainer .ukiCardContainerElement .ukiSubCardContainer .ukiCardContainerElement .ukiControl.w7, .ukiCardContainer .ukiCardContainerElement .ukiSubCardContainer .ukiCardContainerElement .ukiControl.w8 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; position: relative; min-height: 1px; } .box-md .ukiCardContainerElement.sm, .box-md .ukiCardContainerElement.w1 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .box-md .ukiCardContainerElement.md, .box-md .ukiCardContainerElement.lg, .box-md .ukiCardContainerElement.xl { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .box-md .ukiCardContainerElement.md.w2 .ukiColumn { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .box-md .ukiCardContainerElement.lg.w3 .ukiColumn:first-child { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .box-md .ukiCardContainerElement.lg.w3 .ukiColumn { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .box-md .ukiCardContainerElement.lg.w2 .ukiColumn { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .box-md .ukiCardContainerElement.xl.w4 .ukiColumn { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .box-md .ukiCardContainerElement.xl.w3 .ukiColumn:first-child { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .box-md .ukiCardContainerElement.xl.w3 .ukiColumn { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .box-lg .ukiCardContainerElement.sm, .box-lg .ukiCardContainerElement.w1 { -ms-flex: 0 0 33.3%; flex: 0 0 33.3%; max-width: 33.3%; } .box-lg .ukiCardContainerElement.w2 { -ms-flex: 0 0 66.6%; flex: 0 0 66.6%; max-width: 66.6%; } .box-lg .ukiCardContainerElement.md { -ms-flex: 0 0 66.6%; flex: 0 0 66.6%; max-width: 66.6%; } .box-lg .ukiCardContainerElement.lg { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .box-lg .ukiCardContainerElement.xl { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .box-lg .ukiCardContainerElement.md.w2 .ukiColumn { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .box-lg .ukiCardContainerElement.lg.w3 .ukiColumn { -ms-flex: 0 0 33.3%; flex: 0 0 33.3%; max-width: 33.3%; } .box-lg .ukiCardContainerElement.lg.w2 .ukiColumn { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .box-lg .ukiCardContainerElement.lg.w2 .ukiColumn.sm { -ms-flex: 0 0 33.3%; flex: 0 0 33.3%; max-width: 33.3%; } .box-lg .ukiCardContainerElement.lg.w2 .ukiColumn.md { -ms-flex: 0 0 66.6%; flex: 0 0 66.6%; max-width: 66.6%; } .box-lg .ukiCardContainerElement.xl.w4 .ukiColumn { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .box-lg .ukiCardContainerElement.xl.w3 .ukiColumn:first-child { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .box-lg .ukiCardContainerElement.xl.w3 .ukiColumn { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .box-xl .ukiCardContainerElement.sm, .box-xl .ukiCardContainerElement.w1 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .box-xl .ukiCardContainerElement.w2 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .box-xl .ukiCardContainerElement.w3 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .box-xl .ukiCardContainerElement.md { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .box-xl .ukiCardContainerElement.lg { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .box-xl .ukiCardContainerElement.xl { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .box-xl .ukiCardContainerElement.md.w2 .ukiColumn { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .box-xl .ukiCardContainerElement.lg.w3 .ukiColumn { -ms-flex: 0 0 33.3%; flex: 0 0 33.3%; max-width: 33.3%; } .box-xl .ukiCardContainerElement.lg.w2 .ukiColumn { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .box-xl .ukiCardContainerElement.lg.w2 .ukiColumn.sm { -ms-flex: 0 0 33.3%; flex: 0 0 33.3%; max-width: 33.3%; } .box-xl .ukiCardContainerElement.lg.w2 .ukiColumn.md { -ms-flex: 0 0 66.6%; flex: 0 0 66.6%; max-width: 66.6%; } .box-xl .ukiCardContainerElement.xl.w4 .ukiColumn { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .box-xl .ukiCardContainerElement.xl.w3 .ukiColumn { -ms-flex: 0 0 33.3%; flex: 0 0 33.3%; max-width: 33.3%; } .box-xl .ukiCardContainerElement.xl.w3 .ukiColumn.sm { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .box-xl .ukiCardContainerElement.xl.w3 .ukiColumn.md { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .box-xl .ukiCardContainerElement.xl.w2 .ukiColumn { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .box-xl .ukiCardContainerElement.xl.w2 .ukiColumn.sm { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .box-xl .ukiCardContainerElement.xl.w2 .ukiColumn.lg { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .box-sm .ukiCardTab .ukiCardContainerElement, .box-sm .ukiCardStaple .ukiCardContainerElement, .box-md .ukiCardTab .ukiCardContainerElement, .box-md .ukiCardStaple .ukiCardContainerElement, .box-lg .ukiCardTab .ukiCardContainerElement, .box-lg .ukiCardStaple .ukiCardContainerElement, .box-xl .ukiCardTab .ukiCardContainerElement, .box-xl .ukiCardStaple .ukiCardContainerElement { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .ukiCardContainerElement .box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-direction: row; align-content: flex-start; } .ukiCardContainerElement .box.w2 .ukiControl.w1, .ukiSubCardContainer .ukiCardContainerElement .box.w2 .ukiControl.w1 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .ukiCardContainerElement .box.w3 .ukiControl.w1, .ukiSubCardContainer .ukiCardContainerElement .box.w3 .ukiControl.w1 { -ms-flex: 0 0 33.3%; flex: 0 0 33.3%; max-width: 33.3%; } .ukiCardContainerElement .box.w3 .ukiControl.w2, .ukiSubCardContainer .ukiCardContainerElement .box.w3 .ukiControl.w2 { -ms-flex: 0 0 66.6%; flex: 0 0 66.6%; max-width: 66.6%; } .ukiCardContainerElement .box.w4 .ukiControl.w1, .ukiSubCardContainer .ukiCardContainerElement .box.w4 .ukiControl.w1 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .ukiCardContainerElement .box.w4 .ukiControl.w2, .ukiSubCardContainer .ukiCardContainerElement .box.w4 .ukiControl.w2 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .ukiCardContainerElement .box.w4 .ukiControl.w3, .ukiSubCardContainer .ukiCardContainerElement .box.w4 .ukiControl.w3 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .ukiCardContainerElement .box.w6 .ukiControl.w1, .ukiSubCardContainer .ukiCardContainerElement .box.w6 .ukiControl.w1 { -ms-flex: 0 0 16.6%; flex: 0 0 16.6%; max-width: 16.6%; } .ukiCardContainerElement .box.w6 .ukiControl.w2, .ukiSubCardContainer .ukiCardContainerElement .box.w6 .ukiControl.w2 { -ms-flex: 0 0 33.2%; flex: 0 0 33.2%; max-width: 33.2%; } .ukiCardContainerElement .box.w6 .ukiControl.w3, .ukiSubCardContainer .ukiCardContainerElement .box.w6 .ukiControl.w3 { -ms-flex: 0 0 49.8%; flex: 0 0 49.8%; max-width: 49.8%; } .ukiCardContainerElement .box.w6 .ukiControl.w4, .ukiSubCardContainer .ukiCardContainerElement .box.w6 .ukiControl.w4 { -ms-flex: 0 0 66.4%; flex: 0 0 66.4%; max-width: 66.4%; } .ukiCardContainerElement .box.w6 .ukiControl.w5, .ukiSubCardContainer .ukiCardContainerElement .box.w6 .ukiControl.w5 { -ms-flex: 0 0 83%; flex: 0 0 83%; max-width: 83%; } .ukiCardContainerElement .box.w8 .ukiControl.w1, .ukiSubCardContainer .ukiCardContainerElement .box.w8 .ukiControl.w1 { -ms-flex: 0 0 12.5%; flex: 0 0 12.5%; max-width: 12.5%; } .ukiCardContainerElement .box.w8 .ukiControl.w2, .ukiSubCardContainer .ukiCardContainerElement .box.w8 .ukiControl.w2 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .ukiCardContainerElement .box.w8 .ukiControl.w3, .ukiSubCardContainer .ukiCardContainerElement .box.w8 .ukiControl.w3 { -ms-flex: 0 0 37.5%; flex: 0 0 37.5%; max-width: 37.5%; } .ukiCardContainerElement .box.w8 .ukiControl.w4, .ukiSubCardContainer .ukiCardContainerElement .box.w8 .ukiControl.w4 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .ukiCardContainerElement .box.w8 .ukiControl.w5, .ukiSubCardContainer .ukiCardContainerElement .box.w8 .ukiControl.w5 { -ms-flex: 0 0 62.5%; flex: 0 0 62.5%; max-width: 62.5%; } .ukiCardContainerElement .box.w8 .ukiControl.w6, .ukiSubCardContainer .ukiCardContainerElement .box.w8 .ukiControl.w6 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .ukiCardContainerElement .box.w8 .ukiControl.w7, .ukiSubCardContainer .ukiCardContainerElement .box.w8 .ukiControl.w7 { -ms-flex: 0 0 87.5%; flex: 0 0 87.5%; max-width: 87.5%; } .ukiCardContainerElement .box .ukiControl.floatRight { margin-left: auto !important; } .ukiCardContainerElement .box .ukiControl.floatCenter { margin-left: auto !important; margin-right: auto !important; } .ukiCardContainerElement .box .ukiControl.ukiCompound, .ukiCardContainerElement .box .ukiControl .ukiCompound { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-direction: row; align-content: flex-start; } .ukiCardContainerElement .box .ukiCompound > LABEL { width: 100%; margin: 5px 0; padding: 5px; } .box.w2 .boxHide.w2 { display: none !important; } .box.w2 .boxHide.w4, .box.w4 .boxHide.w4 { display: none !important; } .box.w2 .boxHide.w6, .box.w4 .boxHide.w6, .box.w6 .boxHide.w6 { display: none !important; } /* Render ClassNames */ .ukiCardContainerElement .box .ukiCompound .ukiControl.p10 { -ms-flex: 0 0 10%; flex: 0 0 10%; max-width: 10%; } .ukiCardContainerElement .box .ukiCompound .ukiControl.p20 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } .ukiCardContainerElement .box .ukiCompound .ukiControl.p30 { -ms-flex: 0 0 30%; flex: 0 0 30%; max-width: 30%; } .ukiCardContainerElement .box .ukiCompound .ukiControl.p40 { -ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%; } .ukiCardContainerElement .box .ukiCompound .ukiControl.p50 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .ukiCardContainerElement .box .ukiCompound .ukiControl.p60 { -ms-flex: 0 0 60%; flex: 0 0 60%; max-width: 60%; } .ukiCardContainerElement .box .ukiCompound .ukiControl.p70 { -ms-flex: 0 0 70%; flex: 0 0 70%; max-width: 70%; } .ukiCardContainerElement .box .ukiCompound .ukiControl.p80 { -ms-flex: 0 0 80%; flex: 0 0 80%; max-width: 80%; } .ukiCardContainerElement .box .ukiCompound .ukiControl.p90 { -ms-flex: 0 0 90%; flex: 0 0 90%; max-width: 90%; } .ukiCardContainerElement .box .ukiCompound .ukiControl.p100 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .ukiCardContainerElement .box .ukiCompound .ukiControl.fit { -ms-flex: initial; flex: initial; } .ukiCardContainerElement .box .ukiCompound .ukiControl.fill { -ms-flex: auto; flex: auto; } .ukiCardContainerElement .box .ukiCompound .ukiControl.nolabel LABEL { display: none; } .ukiCardContainerElement .box .ukiCompound .ukiControl.connect { margin-top: 0; } .ukiCardContainerElement .box .ukiCompound .ukiControl.i50 .ukiInput { width: 50px; } .ukiCardContainerElement .box .ukiCompound .ukiControl.i60 .ukiInput { width: 60px; } .ukiCardContainerElement .box .ukiCompound .ukiControl.i75 .ukiInput { width: 75px; } .ukiCardContainerElement .box .ukiCompound .ukiControl.i100 .ukiInput { width: 100px; } .ukiCardContainerElement .box .ukiCompound .ukiControl.i125 .ukiInput { width: 125px; } .ukiCardContainerElement .box .ukiCompound .ukiControl.i150 .ukiInput { width: 150px; } .ukiCardContainerElement .box .ukiCompound .ukiControl.i200 .ukiInput { width: 200px; } .ukiCardContainerElement .box .ukiCompound .ukiControl.i250 .ukiInput { width: 250px; } .ukiCardContainerElement .box .ukiCompound .ukiControl.i300 .ukiInput { width: 300px; }