/*
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 > .pf-page-header.sticky { height: 60px; }
.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-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; }

/* 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; }

/* 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 { -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 Text: 
    
    Meta - displays text as smaller meta data

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


/*
    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: Entry   

    Entry styling in operations panel
    Adds table row: hover effect (sui info message style)
    Add selected effect (sui info message style)

    Styleguide 1.0.
*/
.ui.table .pf-entry:hover { 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;*/ } 


/*
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: 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

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-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 > .ui.segments { width: inherit; height: inherit; display: flex; overflow:hidden;}
.pf-panel .pf-panel-header .ui.header { margin:0; }
.pf-panel .pf-panel-header.fitted.ui.segment { padding: 0; min-height: 50px; 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,
.pf-panel .pf-panel-body.fitted .table { border: none; border-radius: unset; }


/*
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; }
.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 { }
}