/*
Example X

Description X (based on KSS styleguide).

:state1         - Highlight the button when hovered.
:state2         - Make the button change appearance to reflect it being disabled.
.variation1     - Alternating background color.

Styleguide 1.0.
*/



/*
Platformers Component: Interface

- Console   (work, manage, dashboard)
- Identity  (authentication)
- Site      (product, business, landing) 


Styleguide 1.0.
*/
html.pf-interface { }
html.pf-interface-console { font-size: 14px; }
html.pf-interface-identity { }
html.pf-interface-site { }

/*
Platformers Component: Page

- Page (full height, row layout)
- Page Viewport (allows for sticky header)
- Page Table of Contents (toc, sidebar like menu).
- Page Flow (indicates a page flow: horizontal or vertical)
- Page Scroll (scrollable page contents from top to bottom).


.alternate      - Alternate background color
.vertical       - Vertical orientation
pf-page-toc.hidden      - Offscreen

Styleguide 1.0.
*/
.pf-page { }

/* viewport */
.pf-page > .pf-viewport { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.pf-page > .pf-viewport { height: 100%; display: flex; flex-direction: column; }
.pf-page > .pf-viewport .pf-page-header { flex-grow: 0; }
.pf-page > .pf-viewport .pf-page-header.primary { z-index: 11; }
.pf-page > .pf-viewport .pf-page-header.secondary { z-index: 0; }
.pf-page > .pf-viewport > .pf-page-header.sticky { }
.pf-page > .pf-viewport .pf-page-flow { flex-grow: 1; overflow-y: hidden; }
.pf-page > .pf-viewport .pf-page-flow .pf-page-toc { width: 18rem; flex-shrink: 0; overflow-y: auto; overflow-x:hidden; }
.pf-page > .pf-viewport .pf-page-flow .pf-page-toc.vertical.hidden { margin-left: -18rem; }
.pf-page > .pf-viewport .pf-page-flow .pf-page-toc.vertical.overlay { position:absolute; z-index:3; height: calc(100%); }
.pf-page > .pf-viewport .pf-page-flow .pf-page-scroll { flex-grow: 1; overflow-y: auto; }
.pf-page > .pf-viewport .pf-page-flow .pf-page-content { }

/* fix: mobile horizontal scroll */
.pf-page > .pf-viewport .pf-page-flow .pf-page-scroll { max-width: 100%; overflow-x: hidden; }
.pf-page > .pf-viewport .pf-page-flow .pf-page-scroll::-webkit-scrollbar:horizontal { display: none; }


/* flow */
.pf-page-flow { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
.pf-page-flow.horizontal { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; }

/* scroll */
.pf-page .pf-page-scroll { flex: 1; }
.pf-page-scroll { display: flex; flex-direction: column; }
.pf-page-scroll > .pf-body { flex: 1 0 auto; }
.pf-page-scroll.alternate { background-color: #f5f5f5; }
.pf-page-scroll.full.height { min-height: 100vh; }

/* no scroll: disables the scroll, when using certain overlay components */
.pf-page > .pf-viewport .pf-page-flow .pf-page-scroll.noscroll, 
.pf-page-scroll.noscroll { overflow-y: hidden; }

/* header */
.pf-page .pf-page-header > * { height: inherit; }
.pf-page > .pf-page-header,
.pf-page > .pf-viewport > .pf-page-header,
.pf-page-flow > .pf-page-header,
.pf-page-scroll > .pf-page-header { padding: 0; z-index: 10; border-bottom: 1px solid #DDDDDD; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.04); }
.pf-page > .pf-viewport > .pf-page-header:last-of-type { -webkit-box-shadow: 0 1px 2px 0 rgba(34,36,38,.15); box-shadow: 0 1px 2px 0 rgba(34,36,38,.15); }

.pf-page > .pf-page-header.padded,
.pf-page-flow > .pf-page-header.padded,
.pf-page-scroll > .pf-page-header.padded { padding: 1rem 0 1rem 0; }

/* scroll > body */
.pf-page-scroll > .pf-body { }

/* scroll > footer */
.pf-page > .pf-footer, 
.pf-page-flow > .pf-footer,
.pf-page-scroll > .pf-footer {  }

/* footer */
.pf-page .pf-footer,
.pf-page .pf-footer .ui.horizontal.list > .item { font-size: 0.9rem; }
.pf-page .pf-footer .ui.grid > .column { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* banner */
.pf-page .pf-banner { width: 100%; height: auto; position: relative; }
.pf-page .pf-banner .pf-banner-content { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; }
.pf-page .pf-banner .grid { height: 100%; width: 100%; }
.pf-page .pf-banner .header { font-size: calc(25px + 3vw); }



/* toc */
.pf-page-toc.light { background-color: #f5f5f5; }
.pf-page-toc.light .ui.menu.vertical { border: none; border-radius: 0; box-shadow: none; }
.pf-page-toc.light .ui.menu > .item { color: rgba(0,0,0,.87); }
.pf-page-toc.light.left { border-right: 1px solid #DDDDDD; }
.pf-page-toc.responsive { }

/* toc (version 0) */
/*.pf-page .pf-page-toc.vertical { width: 20rem; min-height: 100vh; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; }
.pf-page .pf-page-toc.vertical + .pf-page-scroll { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0px; }
.pf-page .pf-page-toc.vertical.hidden { margin-left:-20rem; }
.pf-page .pf-page-toc.vertical > .sticky { position: fixed; z-index: 1; width: inherit; height: inherit; max-height: 100vh; min-height: calc(100% - 60px); overflow-y: auto; overflow-x: hidden; }*/


/*
Platformers Component: Inactive
    
Displays an item as inactive/ disabled without actually disabling it so it keeps full functionality.

Styleguide 1.0.
*/
.pf-inactive { color: rgba(40, 40, 40, 0.3); }


/*
Platformers Component: Borderless
    
Displays an item without border (border & shadow)

Styleguide 1.0.
*/
.pf-borderless { border: none !important; box-shadow: none !important; }


/*
Platformers Text: 
    
Meta - displays text as smaller meta data

Styleguide 1.0.
*/
.pf-meta { font-size: .9em; color: rgba(0,0,0,.6); }


/*
Platformers Text: 
    
Required - displays required asterix (like sui required field)

Styleguide 1.0.
*/
.pf-required::after { margin: -.2em 0 0 .2em; content: '*'; color: #db2828; }                    

                    
/*
Platformers Component: Alternate

General modifier to set the alternative mode.

Styleguide 1.0.
*/ 
.pf-alternate { }


/* 
Semantic UI Extention: Additional colors 

Adds extra default color options.

Styleguide 1.0.
*/
.lightgrey { color: lightgrey; }


/* 
Platformer Component: Stackable   

Adds margin to the bottom for e.g. buttons so it looks good when stacking (inline).

Styleguide 1.0.
*/
.pf-stackable { margin-bottom: 0.5em !important; }

/* 
Platformer Component: UnStackable   

Adds margin to the bottom for e.g. fieldgroups so it looks good when not stacking (inline).

Styleguide 1.0.
*/
.pf-unstackable { margin-bottom: 1em !important; }


/*
Platformers Component: Bar

A component for displaying an appbar or toolbar.

size        - Size: tiny, small, medium, large.
.top        - Top element within it's parent.
.nav        - Navigation purpose.

Styleguide 1.0.
*/
/* bar: size */
.pf-bar.tiny { height: 28px; }
.pf-bar.small { height: 44px; }
.pf-bar.medium { height: 60px; }
.pf-bar.large { height: 76px; }

/* bar: top */
.pf-bar.top { }
.pf-bar:not(.top) { border-top: 1px solid rgba(34,36,38,.15); }

/* bar: nav */
.pf-bar.nav { }
.pf-bar.nav.center.aligned,
.pf-bar.nav.center.aligned > .container { justify-content: center; }

/*
Platformers Component: Section

A contained section on the page in addition to the SUI container styling.

.alternate  - Alternating background color.
.small      - minimal padding.

Styleguide 1.0.
*/
.pf-section { border: none; padding: 0; background-color: transparent; }
.pf-section.alternate { background-color: #F8F8F8; }
.pf-section.tiny { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.pf-section.small { padding-top: 1rem; padding-bottom: 1rem; }
.pf-section.medium { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pf-section.relaxed { padding-top: 3rem; padding-bottom: 3rem; }
.pf-section.neutral { border: none; padding: 0 0; background-color: transparent; }


/*
Platformers Component: Circle [deprecated]

Provides a circle styled wrapper.
Can be used to display an icon.

.tiny       - Size: tiny.
.medium     - Size: medium.
.large      - Size: large.
.huge       - Size: huge.

.neutral    - Color: grey. 
.red        - Color: red. 
.blue       - Color: blue. 
.yellow     - Color: yellow. 
.green      - Color: green. 

Styleguide 1.0.
*/
.pf-circle { }
.pf-circle.tiny { height: 25px; width: 25px; border-radius: 50%; display: inline-block; }
.pf-circle.medium { height: 100px; width: 100px; border-radius: 50%; display: inline-block; }
.pf-circle.large { height: 200px; width: 200px; border-radius: 50%; display: inline-block; }
.pf-circle.huge { height: 300px; width: 300px; border-radius: 50%; display: inline-block; }
.pf-circle.neutral { background-color: #bbb; }
.pf-circle.shadow { box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1); }
.pf-circle.outline { background-color: transparent !important; border: 0.2em solid; }

.pf-circle.red { background-color: #DB2827 !important; border-color: #db2828 !important; color: #fff !important; }
.pf-circle.blue { background-color: #2185d0 !important; border-color: #2185d0 !important; color: #fff !important; }
.pf-circle.yellow { background-color: #fbbd08 !important; border-color: #fbbd08 !important; color: #fff !important; }
.pf-circle.green { background-color: #16ab39 !important; border-color: #16ab39 !important; color: #fff !important; }

.pf-circle > .icon { line-height: 1em; width: 100%; position: relative; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); }
.pf-circle.medium > .icon { font-size: 3.3em; }
.pf-circle.large > .icon { font-size: 7em; }
.pf-circle.huge > .icon { font-size: 12em; }





/*
Platformers Component: Corporate Logo

Wrapping element based on a svg image.

.small      - Size: small (60px).
.large      - Size: large (113px).
.scalable   - Allows for scaling based on the available width.
.pixalated  - Allows for crispy/pixelated images.

Styleguide 1.0.
*/
.pf-corporate-logo.svg > img { height: 100%; }
.pf-corporate-logo.svg.tiny { height: 40px; max-height: 40px; }
.pf-corporate-logo.svg.tiny > img { max-height: 40px; }
.pf-corporate-logo.svg.small { height: 50px; max-height: 50px; }
.pf-corporate-logo.svg.small > img { max-height: 50px; }
.pf-corporate-logo.svg.medium { height: 60px; max-height: 60px; }
.pf-corporate-logo.svg.medium > img { max-height: 60px; }
.pf-corporate-logo.svg.large { max-height: 113px; }
.pf-corporate-logo.svg.scalable > img { max-width: 100%; }
.pf-corporate-logo.svg.scalable.small { height: inherit; }
.pf-corporate-logo.svg.scalable.medium { height: inherit; }

.pf-corporate-logo.pixelated > img { -ms-interpolation-mode: nearest-neighbor; /* IE 7+ (non-standard property) */ image-rendering: -webkit-optimize-contrast; /* Safari 6, UC Browser 9.9 */ image-rendering: -webkit-crisp-edges; /* Safari 7+ */ image-rendering: -moz-crisp-edges; /* Firefox 3.6+ */ image-rendering: -o-crisp-edges; /* Opera 12 */ image-rendering: pixelated; /* Chrome 41+ and Opera 26+ */ }


/*
Platformers Component: Hidden

Helper to hide elements.

Styleguide 1.0.
*/

.pf-hidden { display:none !important; visibility: hidden !important; }


/*
Platformers Component: Template

Template tag compatibility.

Styleguide 1.0.
*/

template.hidden { display: none !important; visibility: hidden !important; }

/*
Platformers Component: Horizontal Scrolling

Invisible/mobile horizontal scrolling optimization.

Styleguide 1.0.
*/
.pf-horizontal-scrolling { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ }
.pf-horizontal-scrolling::-webkit-scrollbar { height: 0.5rem; width: 0px; /* Remove scrollbar space */ background: transparent; /* Optional: just make scrollbar invisible */ }
.pf-horizontal-scrolling::-webkit-scrollbar-thumb { /*background: #FF0000;*/ /* Optional: show position indicator in red */ }
.pf-device-touch .pf-horizontal-scrolling::-webkit-scrollbar { height: 0px; }

/*
Platformers Component: Message

Wrapper for semantic ui message.

Styleguide 1.0.
*/
.pf-notification { }
.pf-notification.fixed { position: fixed; }
.pf-notification.fixed.bottom { bottom: 1rem; }
.pf-notification.fixed.left { left: 1rem; }

/*.pf-notification [class^="fa-"], 
.pf-notification [class*=" fa-"] { font-size:6rem; }

.pf-notification .image { padding: 1em 0.5em; }*/

@media only screen and (min-width: 768px){
    .pf-notification { /*min-width: 450px;*/ min-width: 32rem; }
}
@media only screen and (max-width: 767px){
    .pf-notification { width: calc(100% - 2 * 1rem); }
    .pf-notification .ui.items > .item { margin: 0; }
}


/*
Platformers Component: Panel

A visible content block using a head/body/foot structure.

.mini           A min panel.
.tiny           A tiny panel.
.small          A small panel.
.medium         A medium panel.
.large          A large panel.
.big            A big panel.
.fluid          Takes all available width.

.fitted         Fits parent and child narrowly together

.transparent    Removes all borders and backgrounds.

Styleguide 1.0.
*/
.pf-panel { overflow-x: hidden; }

.pf-panels { display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-between; margin: -.875em -.5em; }
.pf-panels.center.aligned { justify-content: center; align-items: center; }
.pf-panels > .pf-panel { margin: .875em .5em; }

.pf-panel.fluid { width: 100%; }

.pf-panel.mini.fluid { width: 100%; }
.pf-panel.tiny.fluid { width: 100%; }
.pf-panel.small.fluid { width: 100%; }
.pf-panel.medium.fluid { width: 100%; }
.pf-panel.large.fluid { width: 100%; }
.pf-panel.big.fluid { width: 100%; }

.pf-panel.mini { width: 15rem; }    
.pf-panel.tiny { width: 20rem; height: 20rem; }
.pf-panel.small { width: 30rem; height: 30rem; }
.pf-panel.medium { width: 40rem; height: 40rem; }
.pf-panel.large { width: 50rem; height: 50rem; }
.pf-panel.big { width: 60rem; height: 60rem; }

.pf-panel.mini-width { width: 15rem; }
.pf-panel.tiny-width { width: 20rem; }
.pf-panel.small-width { width: 30rem; }
.pf-panel.medium-width { width: 40rem; }
.pf-panel.large-width { width: 50rem; }
.pf-panel.big-width { width: 60rem; }


.pf-panel-header { }
.pf-panel-header.fitted { padding: 0; }
.pf-panel-subheader { }
.pf-panel-subheader.fitted { padding: 0; }
.pf-panel-body { }
.pf-panel-body.fitted { padding: 0; }
.pf-panel.tiny .pf-panel-body,
.pf-panel.small .pf-panel-body,
.pf-panel.medium .pf-panel-body,
.pf-panel.large .pf-panel-body,
.pf-panel.big .pf-panel-body { overflow-y: auto; }

.pf-panel-footer { }

/* semantic */
.pf-panel-container { padding: 0px 0px 0px 0px !important; }
.pf-panel-container .pf-panel .segments { border: none; }
.pf-panel-container .pf-panel .pf-panel-header { border-bottom: 1px solid rgba(34,36,38,.15); }
.pf-panel-container .pf-panel .pf-panel-subheader { border-bottom: 1px solid rgba(34,36,38,.15); }
.pf-panel-container .pf-panel .pf-panel-body { border: none; }
.pf-panel-container .pf-panel .pf-panel-footer { border-top: 1px solid rgba(34,36,38,.15); }

.pf-panel { border-radius: .28571429rem; }
.pf-panel > .ui.segments { width: inherit; height: inherit; display: flex; /*overflow:hidden;*/ box-shadow: none; border-radius: .28571429rem; }
.pf-panel > .ui.segments .pf-panel-header { border-top-left-radius: .28571429rem; border-top-right-radius: .28571429rem; }
/*.pf-panel > .ui.segments .pf-panel-body { overflow:hidden; border-bottom-left-radius: .28571429rem; border-bottom-right-radius: .28571429rem; }*/
.pf-panel > .ui.segments > div:last-child table { /*overflow: hidden;*/ border-bottom-left-radius: .28571429rem; border-bottom-right-radius: .28571429rem; }
.pf-panel > .ui.segments > div:last-child table tr:last-child > td:first-child { border-bottom-left-radius: .28571429rem; }
.pf-panel > .ui.segments > div:last-child table tr:last-child > td:last-child { border-bottom-right-radius: .28571429rem; }
.pf-panel .pf-panel-header .ui.header { margin: 0; }
.pf-panel .pf-panel-header.fitted.ui.segment { padding: 0; min-height: 40px; border-top:none; }
.pf-panel .pf-panel-subheader.fitted.ui.segment { padding: 0; min-height: 40px; }
.pf-panel .pf-panel-body.ui.segment { flex-grow:1; }
.pf-panel .pf-panel-body.fitted.ui.segment { padding: 0;}
.pf-panel .pf-panel-body.fitted > table:not(.border),
.pf-panel .pf-panel-body.fitted .table:not(.border) { border: none; border-radius: unset; }

.pf-panel.transparent { }
.pf-panel.transparent > .ui.segments { border:none; }
.pf-panel.transparent .pf-panel-header { border: none; background-color: transparent; }
.pf-panel.transparent .pf-panel-subheader { border: none; background-color: transparent; }
.pf-panel.transparent .pf-panel-body { border: none; background-color: transparent; }
.pf-panel.transparent .pf-panel-footer { border: none; background-color: transparent; }
.pf-panel.transparent > .ui.segments > .segment.message { border: none; } 


.pf-panel.fitted { }
.pf-panel.fitted > .ui.segments { border: none; }

/* popup overflow fix */
.pf-panel { overflow: visible; -ms-overflow-style: none; /* IE 10+*/ scrollbar-width: none; /* Firefox  */ }
.pf-panel::-webkit-scrollbar { display: none; /* Safari and Chrome*/ }
/* popup overflow fix (in tables) */
.pf-panel > .ui.segments .pf-panel-body { overflow: visible; -ms-overflow-style: none; /* IE 10+*/ scrollbar-width: none; /* Firefox  */ }
.pf-panel > .ui.segments .pf-panel-body::-webkit-scrollbar { display: none; /* Safari and Chrome*/ }


/*
Platformers Component: Sidebar

A slide-in view on top of the (console) body content.
Component is built on top of semantic-ui sidebar.

Containment     -> Determines the positioning.
Container       -> The slide-in which contains the content.
Content         -> Wrapper, multiple content can be used.
Context         -> Sibling of the container within the containment, determines which part of the page the container relates to.

Styleguide 1.0.
*/
.pf-sideview-containment { position: relative; overflow-x: hidden; z-index:0; }
.pf-sideview-container { background-color: #fff; padding: 0; }
.pf-sideview-container.inline { position: absolute; }
.pf-sideview-container.halfscreen { width: 50% !important; }
.pf-sideview-container.three-quarter-screen { width: 75% !important; }
.pf-sideview-container.fullscreen { width: 100% !important; }

.pf-sideview-header { }
.pf-sideview-header > .pf-icon { padding: 1rem 0 1rem 1rem; display: inline-block;}
.pf-sideview-header > .pf-icon ~ .pf-title { padding-left: 0; }
.pf-sideview-header > .pf-title { padding: 1rem 1rem 1rem 1rem; display: inline-block; }
.pf-sideview-header > .pf-title > span { vertical-align:middle; }
.pf-sideview-header > .pf-close { padding: 1rem 1rem 1rem 1rem; float: right; cursor: pointer; }

.pf-sideview-context { }


/*
Platformers Component: Responsive

Helper for achieving common responsive scenarios.
Support for:
    - Mobile                -> .mobile
    - Tablet                -> .tablet
    - Small Monitor         -> .computer    / .small-screen
    - Large Monitor         -> .widescreen  / .large-screen

Uses ignore, only, min, max classes.

Styleguide 1.0.
*/
.pf-responsive { }
.pf-responsive-mobile { }
.pf-responsive-tablet { }
.pf-responsive-computer { }
.pf-responsive-widescreen { }

.pf-ignore-mobile { /* this element can not be shown on a mobile. */ }
.pf-ignore-tablet { /* this element can not be shown on a tablet. */ }
.pf-ignore-computer { /* this element can not be shown on a computer. */ }
.pf-ignore-widescreen { /* this element can not be shown on a widescreen. */ }

.pf-only-mobile { /* this element can only be shown on a mobile. */ }
.pf-only-tablet { /* this element can only be shown on a tablet. */ }
.pf-only-computer { /* this element can only be shown on a computer. */ }
.pf-only-widescreen { /* this element can only be shown on a widescreen. */ }

.pf-min-mobile { /* this element can only display on a mobile or bigger. */ }
.pf-min-tablet { /* this element can only display on a tablet or bigger. */ }
.pf-min-computer { /* this element can only display on a computer or bigger. */ }
.pf-min-widescreen { /* this element can only display on a widescreen or bigger. */ }

.pf-max-mobile { /* this elements can only display on a mobile or smaller. */ }
.pf-max-tablet { /* this elements can only display on a tablet or smaller. */ }
.pf-max-computer { /* this elements can only display on a computer or smaller. */ }
.pf-max-widescreen { /* this elements can only display on a widescreen or smaller. */ }


/* Mobile - below 768px*/
@media only screen and (max-width: 767px) {
    .pf-ignore-mobile { display: none !important; visibility: hidden !important; }
    .pf-ignore-tablet { }
    .pf-ignore-computer { }
    .pf-ignore-widescreen { }

    .pf-only-mobile { }
    .pf-only-tablet { display: none !important; visibility: hidden !important; }
    .pf-only-computer { display: none !important; visibility: hidden !important; }
    .pf-only-widescreen { display: none !important; visibility: hidden !important; }

    .pf-min-mobile { }
    .pf-min-tablet { display: none !important; visibility: hidden !important; }
    .pf-min-computer { display: none !important; visibility: hidden !important; }
    .pf-min-widescreen { display: none !important; visibility: hidden !important; }

    .pf-max-mobile { }
    .pf-max-tablet { }
    .pf-max-computer { }
    .pf-max-widescreen { }
}

/* Tablet - 768px - 991px*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pf-ignore-mobile { }
    .pf-ignore-tablet { display: none !important; visibility: hidden !important; }
    .pf-ignore-computer { }
    .pf-ignore-widescreen { }

    .pf-only-mobile { display: none !important; visibility: hidden !important; }
    .pf-only-tablet { }
    .pf-only-computer { display: none !important; visibility: hidden !important; }
    .pf-only-widescreen { display: none !important; visibility: hidden !important; }

    .pf-min-mobile { }
    .pf-min-tablet { }
    .pf-min-computer { display: none !important; visibility: hidden !important; }
    .pf-min-widescreen { display: none !important; visibility: hidden !important; }

    .pf-max-mobile { display: none !important; visibility: hidden !important; }
    .pf-max-tablet { }
    .pf-max-computer { }
    .pf-max-widescreen { }
}
/* Small Monitor - 992px - 1200px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .pf-ignore-mobile { }
    .pf-ignore-tablet { }
    .pf-ignore-computer { display: none !important; visibility: hidden !important; }
    .pf-ignore-widescreen { }

    .pf-only-mobile { display: none !important; visibility: hidden !important; }
    .pf-only-tablet { display: none !important; visibility: hidden !important; }
    .pf-only-computer { }
    .pf-only-widescreen { display: none !important; visibility: hidden !important; }

    .pf-min-mobile { }
    .pf-min-tablet { }
    .pf-min-computer { }
    .pf-min-widescreen { display: none !important; visibility: hidden !important; }

    .pf-max-mobile { display: none !important; visibility: hidden !important; }
    .pf-max-tablet { display: none !important; visibility: hidden !important; }
    .pf-max-computer { }
    .pf-max-widescreen { display: none !important; visibility: hidden !important; }
}
/* Large Monitor - above 1200px */
@media only screen and (min-width: 1200px) {
    .pf-ignore-mobile { }
    .pf-ignore-tablet { }
    .pf-ignore-computer { }
    .pf-ignore-widescreen { display: none !important; visibility: hidden !important; }

    .pf-only-mobile { display: none !important; visibility: hidden !important; }
    .pf-only-tablet { display: none !important; visibility: hidden !important; }
    .pf-only-computer { display: none !important; visibility: hidden !important; }
    .pf-only-widescreen { display: none !important; visibility: hidden !important; }

    .pf-min-mobile { }
    .pf-min-tablet { }
    .pf-min-computer { }
    .pf-min-widescreen { }

    .pf-max-mobile { display: none !important; visibility: hidden !important; }
    .pf-max-tablet { display: none !important; visibility: hidden !important; }
    .pf-max-computer { display: none !important; visibility: hidden !important; }
    .pf-max-widescreen { }
}

/*
Platformers Component: Print

Rendering mode for browser print.

.pf-print-view      The primary printable content view.
.pf-print-view      The (auto generated) primary printable content view.
.pf-print           Printable element. Also provides hook for precise styling.
.pf-print-only      Printable element, is hidden when not in print mode. Also provides hook for precise styling.
.pf-print-ignore    Ignore element when printing.
.pf-print-auto-ignore   Generated ignore flag, useful for cleanup

Styleguide 1.0.
*/

.pf-print-view { }
.pf-print-auto-view { }
.pf-print-ignore { }
.pf-print-auto-ignore { }
.pf-print-auto-parent { }
.pf-print-auto-ancestor { }
.pf-print { }
.pf-print-only { display: none; }

@media print{
    .pf-print-only { display: block; }
    body .pf-print-auto-ignore,
    body .pf-print-ignore { display: none !important; }
    .pf-print-auto-ancestor { margin: 0 !important; padding: 0 !important; overflow: initial !important; /* overflow reset important*/ height: initial !important; width: initial !important; border: none !important; background: none !important; }
    .pf-print-auto-view { border: none !important; }
}


/*********************************************/

/*
Platformers Operations

*/

/* operations-view */
.pf-operations-view {}
.pf-operations-view.padded { padding:1rem; }


/* mobile (below 768px)*/
.pf-responsive-mobile .pf-operations-view.padded { padding: 0; }
.pf-responsive-mobile .pf-operations-view .pf-operations-panel .ui.container.fluid { margin: 0 !important; }
/*.pf-responsive-mobile  .pf-operations-view.fluid .pf-panels { margin: -.875em; }*/
.pf-responsive-mobile .pf-operations.pf-panel.fluid { border-radius: 0; }
.pf-responsive-mobile .pf-operations.pf-panel.fluid > .ui { border-radius: inherit; }


.pf-operations.pf-panel .pf-panel-subheader > .ui.list { margin:0;padding:0; }
.pf-operations.pf-panel .pf-panel-subheader > .ui.list > .item { margin: 0.6rem; }

.pf-operations.pf-panel .pf-panel-footer { padding: 0.5rem 0; }
.pf-operations.pf-panel .pf-panel-footer > .ui.grid.flex { margin: 0.25rem 0; }
.pf-operations.pf-panel .pf-panel-footer > .ui.grid.flex > .column { padding:0.25rem; width:auto; }
.pf-responsive-mobile .pf-operations.pf-panel .pf-panel-footer > .ui.grid.flex > .column,
.pf-responsive-tablet .pf-operations.pf-panel .pf-panel-footer > .ui.grid.flex > .column { width: 100%; }

/* hidden */
.pf-operations.pf-panel .pf-hidden-lang { display: none !important; visibility: hidden !important; }
.pf-operations.pf-panel .pf-hidden-col { display: none !important; visibility: hidden !important; }

/* deprecated: #id */
/*.pf-operations.pf-panel #pf-table-wrapper { overflow-x: auto; display: inline; }
.pf-operations.pf-panel #pf-table-wrapper td.pf-entry-actions { white-space: nowrap; }
.pf-operations.pf-panel #pf-view-flex-wrapper > .ui.feed { margin: 0; }
.pf-operations.pf-panel .ui.feed > .event { padding: 1rem 1rem 0.5rem 1rem; border-top: 1px solid #ececec; }*/

.pf-operations.pf-panel .pf-operations--view-table { overflow-x: auto; display: inline; }
.pf-operations.pf-panel .pf-operations--view-table  td.pf-entry-actions { white-space: nowrap; }
.pf-operations.pf-panel .pf-operations--view-cards-small { }
.pf-operations.pf-panel .pf-operations--view-cards-large { }
.pf-operations.pf-panel .pf-operations--view-cards-horizontal { }
.pf-operations.pf-panel .pf-operations--view-cards-horizontal .card > .image { width:auto; }
.pf-operations.pf-panel .pf-operations--view-cards-horizontal .card > .image > .ui.segment { border-radius: .28571429rem; }
.pf-operations.pf-panel .pf-operations--view-flex { }
.pf-operations.pf-panel .pf-operations--view-flex > .ui.feed { margin: 0; }
.pf-operations.pf-panel .pf-operations--view-flex .ui.feed > .event { padding: 1rem 1rem 0.5rem 1rem; border-top: 1px solid #ececec; }

/* default style */
.pf-operations.pf-panel.ui-default { }


.pf-operations.pf-panel.ui-default .pf-operations--view-table { }
.pf-operations.pf-panel.ui-default .pf-operations--view-cards-small { }
.pf-operations.pf-panel.ui-default .pf-operations--view-cards-large { }
.pf-operations.pf-panel.ui-default .pf-operations--view-cards-horizontal { }
.pf-operations.pf-panel.ui-default .pf-operations--view-flex { }

/* fix: feed+message*/
.pf-operations.pf-panel.ui-default .pf-operations--view-flex .ui.feed > .event > .content .meta > .ui.message { margin-left: 0; }
.pf-operations.pf-panel.ui-default .pf-operations--view-flex .ui.feed > .event > .content .meta > .ui.message > .icon { margin-right: .6em; }
.pf-operations.pf-panel.ui-default .pf-operations--view-flex .ui.feed > .event > .content.column { flex: 0 0 auto; -webkit-box-flex: 0; -ms-flex: 0 0 auto; }
.pf-operations.pf-panel.ui-default .pf-operations--view-flex .ui.feed > .event > .content.column.right { text-align:right; }

/* filters */
.pf-operations--filter-tag-clear { cursor:pointer; }
.pf-operations--filter-tag-clear.ui.label.basic:hover { border-color: #db2828; color: #db2828; }

/* template: metaheader (deprecated) */
.pf-operations--display-metaheader.ui.icon.message { font-size: 1rem; }
.pf-operations--display-metaheader.ui.icon.message .header { font-size: 1em; }
.pf-operations--display-metaheader.ui.icon.message { background: none; padding: 0; border: none; box-shadow: none; align-items: baseline; margin-top: 0.5em; margin-bottom: 0.5em; color: rgba(0,0,0,.5); font-size: .92857143rem; }
.pf-operations--display-metaheader.ui.icon.message > i,
.pf-operations--display-metaheader.ui.icon.message > .icon:not(.close) { font-size:1rem; width:1rem;text-align:center; }

/* template: metatext */
.pf-operations--display-metatext.ui.icon.message.small { font-size: .92857143em; }
.pf-operations--display-metatext.ui.icon.message { background: none; padding: 0; border: none; box-shadow: none; align-items: baseline; margin-top: 0.5em; margin-bottom: 0.5em; color: rgba(0,0,0,.5); font-size: .92857143em; /*font-size: .92857143rem;*/ }
.pf-operations--display-metatext.ui.icon.message > i,
.pf-operations--display-metatext.ui.icon.message > .icon:not(.close) { font-size: 1rem; width: 1rem; text-align: center; }


/* responsive */
.pf-responsive-mobile .pf-panels { }

/* horizontal cards - mobile */
.pf-responsive-mobile .pf-operations.pf-panel.ui-default .pf-operations--view-cards-horizontal { padding:0; }
.pf-responsive-mobile .pf-operations.pf-panel.ui-default .pf-operations--view-cards-horizontal > .cards { margin:0;}

/* group */
.pf-operations.pf-panel.ui-default .pf-group .ui.segment { padding-top: 0.75em; padding-bottom: 0.75em; background-color: #eee; border-top: none; border-bottom: none; }
.pf-operations.pf-panel.ui-default .pf-group .ui.segment .sub.header { text-transform: none; font-weight: bold; }
.pf-operations.pf-panel.ui-default .pf-group.no-card { margin: 0 -0.5em; width: calc(100% + 1em); }

/* group mobile  */
.pf-responsive-mobile .pf-operations.pf-panel.ui-default .ui.table:not(.unstackable) > tbody > tr.pf-group { padding: 0; }
.pf-responsive-mobile .pf-operations.pf-panel.ui-default .ui.table:not(.unstackable) > tbody > tr.pf-group > td.fitted { padding: 0; }
.pf-responsive-mobile .pf-operations.pf-panel.ui-default .pf-group.no-card { border-top: 1px solid#d4d4d5; margin:0; width: 100%; }
.pf-responsive-mobile .pf-operations.pf-panel.ui-default .pf-group.no-card .ui.segment { padding-left: 1.5em; padding-right: 1.5em; }

/* 
Entry
Adds table row: hover effect (sui info message style)
Add selected effect (sui info message style)

.card       - Card specific styles.
.clickable  - Clickable elements within the entry.
*/
.pf-entry.card, .ui.cards > .pf-entry.card { font-size: 0.9em; }
.pf-responsive-mobile .pf-entry.card,
.pf-responsive-tablet .pf-entry.card,
.pf-responsive-mobile .ui.cards > .pf-entry.card,
.pf-responsive-tablet .ui.cards > .pf-entry.card { font-size: 0.8em; }
.ui.table .pf-entry:hover td { background-color: #f8ffff !important; }
.pf-entry.selected { background-color: #f8ffff !important; /*box-shadow: 0 0 0 1px #a9d5de inset, 0 0 0 0 transparent !important;*/ }
.pf-entry.clickable,
.pf-entry .clickable { cursor: pointer; }
.pf-entry td > .ui.accordion > .title.drilldown { padding: 0; }
.pf-entry .pf-moving-handle { cursor: pointer; /*opacity:0.7;*/ /*cursor: move;*/ /*cursor: -webkit-grabbing;*/ }
.pf-entry.pf-moving-chosen { /*background-color: #fbbd08;*/ background-color: rgba(33, 133, 208, 0.5); /*background-color: #2185d0; color: #2185d0;*/ }
.pf-entry.card.pf-moving-chosen > .content { background-color: rgba(33, 133, 208, 0.5); }
.pf-entry.pf-moving-ghost { }
.pf-entry.pf-moving-drag { }
.pf-entry.pf-moving-ignore { }
/*.pf-entry.pf-moving-glow { background-color: rgba(33, 133, 208, 0.5); }*/

/* entry card width */
.pf-operations.pf-panel.ui-default .pf-operations--view-cards-small .pf-entry.card.--width { width: 18rem; }
.pf-operations.pf-panel.ui-default .pf-operations--view-cards-large .pf-entry.card.--width { width: 18rem; }
.pf-operations.pf-panel.ui-default .ui.three.cards > .card { width: calc(33.33333333333333% - 1em); margin-left: 0.5em; margin-right: 0.5em; }
.pf-operations.pf-panel.ui-default .ui.two.cards { margin-left: -0.75em; margin-right: -0.75em; }
.pf-operations.pf-panel.ui-default .ui.two.cards > .card { width: calc(50% - 1em); margin-left: 0.5em; margin-right: 0.5em; }

/* entry card horizontal mobile */
.pf-responsive-mobile .pf-operations.pf-panel.ui-default .pf-operations--view-cards-horizontal .pf-entry.card > .image > .segment { font-size: 0.75em; }
.pf-responsive-mobile .pf-operations.pf-panel.ui-default .pf-operations--view-cards-horizontal .pf-entry.card { box-shadow: none; border-top: 1px solid#d4d4d5; border-radius: 0; margin: 0; width: 100%; }
.pf-responsive-mobile .pf-operations.pf-panel.ui-default .pf-operations--view-cards-horizontal .pf-entry.card > .content { border:none; }

/* entry card horizontal tablet */
.pf-responsive-tablet .pf-operations.pf-panel.ui-default .pf-operations--view-cards-horizontal .pf-entry.card > .image > .segment { font-size: 0.75em; }


/* fix: dropdown item alignment (fomantic) */
.pf-operations.pf-panel .pf-panel-header .ui.menu .right.dropdown.item .menu > .item { align-self:auto; }

/* main-filter (item) */
.pf-operations.pf-panel .item.pf-operations--main-filter { }
.pf-operations.pf-panel .item.pf-operations--main-filter .ui.form { /* small: font-size: .92857143rem; tiny: font-size: .85714286rem; mini: font-size: .78571429rem;*/ }
.pf-operations.pf-panel .item.pf-operations--main-filter .ui.form > .inline.fields { margin: 0; } 



/*********************************************/
/*
Platformers Form
*/
.ui-form-field { }
.ui-form-field.toggle-align-right { display: flex; justify-content: space-between; }
.ui-form-field.disabled { pointer-events: none; opacity: .45; }

/* grid */
.ui-form-field > .ui.grid > .column:not(.row) { padding-top:0.25rem; padding-bottom:0.25rem; }
.ui-form-field > .grid > .column.field { margin: 0; }
.ui-form-field > .grid > .column.field > label { padding-top: 0.75em; }

.ui-form-field > .grid > .column.--label {}
.ui-form-field > .grid > .column.--input {}
.ui-form-field > .grid > .column.--width-small { flex-basis: 40%; min-width: 10em; max-width: 20em; }
.ui-form-field > .grid > .column.--width-auto { flex-grow: 1; }

/* dropdown */
.ui-form-field .ui.dropdown > .menu > .item { display: flex; align-items: center; }
.ui-form-field .ui.dropdown > .menu > .item > *:not(:first-child) { margin-left:0.25em; } 
.ui-form-field .ui.dropdown > .menu > .item > div > .description { color: rgba(0,0,0,.4); padding-top: 0.25em; }
.ui-form-field .ui.dropdown > .menu > .item > .description { flex-grow:1; text-align:right; }
.ui-form-field .ui.dropdown > .menu > .item .description { font-size: 0.9em; }
.ui-form-field .ui.dropdown > .text > * { display:inline; }
.ui-form-field .ui.dropdown > .text .ui.label.circular { margin-right: 1em; }
.ui-form-field .ui.dropdown > .text p.description { display:none; }
.ui-form-field .ui.dropdown.multiple > a.ui.label > div { display: inline; }
.ui-form-field .ui.dropdown.multiple > a.ui.label .ui.label.circular { display: inline-block; margin-right:0.5em; }
/*.ui-form-field .ui.dropdown .menu .item.checkable.checked { background: 0 0; font-weight: 700; color: rgba(0,0,0,.95); -webkit-box-shadow: none; box-shadow: none; z-index: 12; }*/


/* checkbox */
.ui-form-field .ui.checkbox > label { font-size: .92857143em; }

/* items */
.ui-form-field-items.inline { flex-wrap:wrap; } 

/* item: tooltip */
.ui-form-field-item ops-tooltip { cursor: pointer; margin-left: 0.25em; }
.ui-form-field-item ops-tooltip.info { color: rgba(0,0,0,.4); }
.ui-form-field-item ops-tooltip.info:hover { cursor: pointer; color: #2185d0; }
.ui-form-field-item ops-tooltip.info > i.icon { font-size: 1.1em; }

/* item: description */
.ui-form-field-item .description { display: block; margin: 0 0 0.3rem 0; color: rgba(0,0,0,.4); font-size: 0.9em; text-transform: none; }
.ui-form-field-item .description.inline { display: inline-block; margin-left:0.25em; }
.ui-form-field-item .description.offset { margin-left: 1.8rem; }
/*enforce*/
.ui.form .ui-form-field-item.field > .description.inline { display: inline-block; margin-left: 0.25em; }
.ui.form .ui-form-field-item.field > .description.offset { margin-left: 1.8rem; }

/* type: fileupload */
.ui-form-field > .segment--fileupload { min-height: 3rem; margin: 0;}
.ui-form-field > .segment--fileupload > .filepond--root { /*margin: 0 calc(-1rem + 1px);*/ margin: calc(-1rem + 1px); }
.ui-form-field > .segment--fileupload.ui.segment.secondary .filepond--panel-root { /*background: #f3f4f5;*/ background-color: inherit; }

/* type: image */
.ui-form-field > .segment--image { min-height: 3rem; margin: 0; }
.ui-form-field.field .pf-image {  }
.ui-form-field.field .pf-image > .image-upload > div { /*margin: 0 calc(-1rem + 1px);*/ margin: calc(-1rem + 1px); }
.ui-form-field.field .pf-image > .pf-image-action-bar { padding-top: 0.5rem; }
.ui-form-field.field .pf-image.ui.segment.secondary .image-upload .filepond--panel-root { /*background: #f3f4f5;*/ background-color:inherit; }
.ui-form-field.field .pf-image > .image-multi.offset { margin-top: 1rem; }
/* sui: item */
.ui-form-field.field .pf-image .image-item.ui.segment.small { padding: 0.5rem; margin: 0.5rem 0; }
.ui-form-field.field .pf-image .image-item.ui.segment.inverted .inverted { color: #fff; }
.ui-form-field.field .pf-image .image-item .ui.image.rounded > img { border-radius: inherit; }
.ui-form-field.field .pf-image .image-item .header.empty { font-style: italic; }
.ui-form-field.field .pf-image .image-item .ui .image-actions.content { flex: 0 0 auto; padding-left: 1.5em; margin-left: auto; }
.ui-form-field.field .pf-image .image-item .button { -webkit-box-shadow: 0px 0px 0px 0.125em rgba(255,255,255,0); -moz-box-shadow: 0px 0px 0px 0.125em rgba(255,255,255,0); box-shadow: 0px 0px 0px 0.125em rgba(255,255,255,0); transition: box-shadow .25s ease-in; }
.ui-form-field.field .pf-image .image-item .button:hover { -webkit-box-shadow: 0px 0px 0px 0.125em rgba(255,255,255,1); -moz-box-shadow: 0px 0px 0px 0.125em rgba(255,255,255,1); box-shadow: 0px 0px 0px 0.125em rgba(255,255,255,1); }
.ui-form-field.field .pf-image > .image-multi .image-item .ui.image.tiny { height: 3rem; width: auto; max-width: 6rem; }
.ui-form-field.field .pf-image > .image-multi .image-item .ui.image.tiny > img { height: inherit; width: auto; }

/* field-segment */
.ui-form-field-segment.ui.default { /*padding-bottom: 1rem;*/ }
.ui-form-field-segment.ui.default .content.active { padding: 1rem 0 1rem 0; }
.ui-form-field-segment.ui.default .ui.accordion:not(.styled) .title ~ .content:not(.ui) { padding: 1rem 0 1rem 0; }
.ui-form-field-segment .ui.accordion > .item > .ui.title { display: flex; flex-direction: row; gap: 0.5rem; align-items: center; }
.ui-form-field-segment .ui.accordion > .item > .ui.title:not(.active) > .ui.header { margin-bottom: 0; }
.ui-form-field-segment .ui.accordion > .item > .ui.title .ui.header { font-size: 13px; flex-grow: 1; margin: 0; }
.ui-form-field-segment .ui.accordion > .item > .ui.title .label.active { background-color: #2185d0; border-color: #2185d0; color: #fff; }
.ui-form-field-segment.ui.default .ui.accordion > .item > .offset.active { margin-top: 1rem; }

/* tooltip */
.ui-form-field-tooltip.ui.popup { min-width: 250px; }


/*********************************************/
/*
Platformers UI

*/
.ui-pf { }

/*
Platformers UI: Steps
*/

.ui-steps { }
.ui-steps.ui.steps { }

.ui-steps .step { }
.ui-steps .step > .label { }
.ui-steps .step.completed > .number.label { background-color: rgba(33,186,69, 0.7); color: #fff; }
.ui-steps .step.active > .number.label { background-color: #21ba45; background-color: rgb(33,186,69); color: #fff; }
.ui-steps .step.disabled > .number.label { /*background-color: rgba(33,186,69, 0.5); color: #fff;*/ }
.ui-steps .step.clickable,
.ui-steps .step.clickable.active,
.ui-steps .step.clickable.disabled,
.ui-steps .step.clickable.completed { cursor: pointer; pointer-events: auto; }
.ui-steps.ui.steps.basic { border: none; }
.ui-steps.ui.steps.basic .step { border: none; background: none; }
.ui-steps.ui.steps.basic .step:after,
.ui-steps.ui.steps.basic .step:last-child:after { display: none; }
.ui-steps.ui.steps.compact .step { padding: 0.5em 0.75em; }
.ui-steps.ui.steps.compact.small .step { padding: 0.25em 0.75em; }
.ui-steps.ui.steps.compact.tiny .step { padding: 0.15em 0.75em; }
.ui-steps.ui.steps.compact.mini .step { padding: 0.15em 0.75em; }
.ui-steps.ui.steps.compact.vertical .step .title ~ .description { margin-top: 0; }
.ui-steps.ui.steps.compact.vertical .step { padding: 0 0.75em 1em 0.75em; }
.ui-steps.ui.steps.compact.vertical.small .step { padding: 0 0.75em 0.5em 0.75em; }
.ui-steps.ui.steps.compact.vertical.tiny .step { padding: 0 0.75em 0.3em 0.75em; }
.ui-steps.ui.steps.compact.vertical.mini .step { padding: 0 0.75em 0.3em 0.75em; }
.ui-steps.ui.steps.basic.fluid.vertical .step { align-items:flex-start; }

/* indicator */
.ui-steps .step > .indicator.ui.circular.label { margin: 1em 0.5em; min-width: 1em; min-height: 1em; display: block; border: 0.5em solid #767676; background-color: #fff; }
.ui-steps .step.completed > .indicator.ui.circular.label { background-color: #767676; }
.ui-steps .step.active > .indicator.ui.circular.label { background-color: #767676; }
.ui-steps .step.disabled > .indicator.ui.circular.label { }

.ui-steps .step > .indicator-icon { margin: 1em 0.5em; }

/* image */
.ui-steps .step.--image { gap: 1em; }
.ui-steps.vertical .step.--image { flex-direction: column; }
.ui-steps.vertical .step > .ui.image { max-width: 8rem; max-height: 8rem; }
.ui-steps.vertical .step > .ui.image > img { max-width: inherit; max-height:inherit; }


/* responsive */

/* Mobile/Tablet - 991px*/
@media only screen and (max-width: 991px) {
    .ui-steps.ui.steps .step { display: flex; flex-direction: column; justify-content: flex-start; text-align:center; }
}


    /*
Platformers UI: Scrollbox
*/

    /*.pf-scrollbox { }*/
    .pf-scrollbox.horizontal { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ }
        .pf-scrollbox.horizontal::-webkit-scrollbar { height: 0.5rem; width: 0px; /* Remove scrollbar space */ background: transparent; /* Optional: just make scrollbar invisible */ }
        .pf-scrollbox.horizontal::-webkit-scrollbar-thumb { /*background: #FF0000;*/ /* Optional: show position indicator in red */ }
    .pf-device-touch .pf-scrollbox.horizontal::-webkit-scrollbar { height: 0px; }

    /*
Platformers UI: Tabs
*/

    /*
Platformers UI: Toggle
*/
    .pf-toggle-shown { }
    .pf-toggle-hidden { display: none !important; visibility: hidden !important; }


    /*
Platformers UI: Dialog
*/

    /* actions.grid (left/center/right) */
    .ui.modal .actions.grid > .ui.grid { /*background: inherit;*/ }
        .ui.modal .actions.grid > .ui.grid .button { white-space: nowrap; }
        .ui.modal .actions.grid > .ui.grid > .column { display: inline-block; -webkit-box-flex: 1; width: initial; }
            .ui.modal .actions.grid > .ui.grid > .column.left { -ms-flex-positive: 1; flex-grow: 1; order: 2; }
            .ui.modal .actions.grid > .ui.grid > .column.center { -ms-flex-positive: 0; flex-grow: 0; display: flex; align-items: center; order: 3; }
            .ui.modal .actions.grid > .ui.grid > .column.right { -ms-flex-positive: 1; flex-grow: 1; order: 4; }
            .ui.modal .actions.grid > .ui.grid > .column.left .button { margin-right: 0.75rem; }
            .ui.modal .actions.grid > .ui.grid > .column.right .button { margin-left: 0.75rem; }
    .pf-responsive-mobile .ui.modal .actions.grid { padding: 1rem !important; }
        .pf-responsive-mobile .ui.modal .actions.grid > .ui.grid > .column,
        .pf-responsive-tablet .ui.modal .actions.grid > .ui.grid > .column { display: flex; flex-basis: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; }
            .pf-responsive-mobile .ui.modal .actions.grid > .ui.grid > .column.empty,
            .pf-responsive-tablet .ui.modal .actions.grid > .ui.grid > .column.empty { -ms-flex-positive: 0; flex-grow: 0; }
            .pf-responsive-mobile .ui.modal .actions.grid > .ui.grid > .column.center,
            .pf-responsive-tablet .ui.modal .actions.grid > .ui.grid > .column.center { flex-basis: 100%; justify-content: center; order: 1; }
                .pf-responsive-mobile .ui.modal .actions.grid > .ui.grid > .column.center.empty,
                .pf-responsive-tablet .ui.modal .actions.grid > .ui.grid > .column.center.empty { display: none; }
        .pf-responsive-mobile .ui.modal .actions.grid > .ui.grid .button,
        .pf-responsive-tablet .ui.modal .actions.grid > .ui.grid .button { margin-left: 1rem; margin-right: 1rem; width: calc(100% - 2rem); margin-bottom: 1rem; }
    .pf-responsive-computer .ui.modal .actions.grid > .ui.grid > .column,
    .pf-responsive-widescreen .ui.modal .actions.grid > .ui.grid > .column { display: flex; flex-basis: 0; }
        .pf-responsive-computer .ui.modal .actions.grid > .ui.grid > .column.center,
        .pf-responsive-widescreen .ui.modal .actions.grid > .ui.grid > .column.center { justify-content: center; -ms-flex-positive: 1; flex-grow: 1; }
        .pf-responsive-computer .ui.modal .actions.grid > .ui.grid > .column.right,
        .pf-responsive-widescreen .ui.modal .actions.grid > .ui.grid > .column.right { justify-content: flex-end; }

    /* compatability mode (supports left, center, right; center is not actual center, but a relative center) */
    .ui.modal .actions.segment.center { text-align: center; }

    /* mobile stacked actions fluid (disabled, not need yet) */
    /*.pf-responsive-mobile .ui.modal > .actions .ui.menu { flex-direction: column-reverse; }
.pf-responsive-mobile .ui.modal > .actions .ui.menu > .menu { margin: 0!important; }
.pf-responsive-mobile .ui.modal > .actions .ui.menu .button { margin: 0 0 1em 0; width: 100%; }*/