/*
 * # Fomantic UI - 2.8.4
 *
 * # Platformers
 * Fixes
 * Extensions
 */


/* Elements
   ========================================================================== */


/* 
 * Button

 # Extensions

.transparant        -> Applies a transparant background color.
.link               -> Same style as a[href] 

*/
.ui.button.transparent { background-color: transparent; text-transform: initial !important; }
.ui.button.fitted,
.ui.icon.button.fitted:not(.animated):not(.compact),
.ui.icon.buttons .button.fitted { padding: 0; }
.ui.button.text { background: none; text-transform: initial !important; }
.ui.button.link { background: none; text-transform: initial !important; color: #4183c4; background-color: transparent; }

/* 
 * Divider

 # Extensions

.size

*/
.ui.divider.hidden.small { margin: 0.75rem 0; }
.ui.divider.hidden.tiny { margin: 0.5rem 0; }
.ui.divider.hidden.mini { margin: 0.25rem 0; }

/*
Semantic UI: Header

Platformers variations.

.shadow          -> Adds a text shadow.

*/
.ui.header.shadow { text-shadow: 2px 2px 4px #ffffff; }
.ui.header.inverted.shadow { text-shadow: 2px 2px 4px #000000; }


/*
Semantic UI: Step

Platformers variations.

.centered          -> Position center within parent

*/
.ui.steps.centered { width:100%; justify-content:center; }
.ui.steps.centered > .step { flex-grow:initial; }


/*
Semantic UI: Popup

Platformers variations.

.popup-menu         -> A menu styled popup.

*/
.ui.popup.popup-menu { padding: 0; min-width: 175px; }
.ui.popup.popup-menu.medium { min-width: 250px; }
.ui.popup.popup-menu.large { min-width: 380px; }
.ui.popup.popup-menu > .list { padding: 0; }
.ui.popup.popup-menu > .list > .item,
.ui.popup.popup-menu > .list > .item:first-child,
.ui.popup.popup-menu > .list > .item:last-child { padding: 1em; color: rgba(0,0,0,.8); display: flex; border-radius: 0; }
.ui.popup.popup-menu > .list > .item > .icon { width: 2rem; line-height: 1.1em; font-size: 1.3rem; }
.ui.popup.popup-menu > .list > .item.active { font-weight: bold; }
.ui.popup.popup-menu > .list > .divider { margin: 0; }


/*
Semantic UI: Container

Platformers variations.

.divided            -> Divides child items equally.
.padded             -> padding
.fluid
.fluid.padded       -> 

*/

.ui.container.divided { display: flex; justify-content: space-between; align-items: baseline; }
.ui.container.divided.left { }
.ui.container.divided.right { }

.ui.container.padded.horizontal { padding: 0 1rem; }
.ui.container.padded.vertical { padding: 0 1rem; }
.ui.container.fluid.padded { padding: 1rem; }
.ui.container.fluid.horizontal.padded { padding: 0 1rem; }
.ui.container.fluid.vertical.padded { padding: 1rem 0; }
.ui.container.fluid.padded > .ui.segment.basic { padding-left: 0; padding-right: 0; }

/* Mobile - below 768px*/
@media only screen and (max-width: 767px) {
    .ui.container.fluid.padded { padding: 1rem 0 1rem 0; margin-left: 0.2em!important; margin-right:0.2em!important; }
}


/*
 Segment

.fluid              -> No Margin, No Padding, Fluid segments are useful for setting text alignment, or other variations on unstyled content
.flat               -> not raised, no box shadow

*/

/* fixes */
.ui.segments .ui.segment.basic.secondary,
.ui.segment.basic.secondary { background: #f3f4f5; }

/* extensions */
.ui.segment.fluid { margin: 0; padding: 0; }
.ui.segment.flat { -webkit-box-shadow:none; box-shadow:none; }

/*
Semantic UI: Grid

Platformers variations.

.fluid              -> No Margin, No Padding, Fluid segments are useful for setting text alignment, or other variations on unstyled content

*/

.ui.grid.fluid { margin: 0; padding: 0; }
.ui.grid.fluid > .column { margin: 0; padding: 0; }


/*
Semantic UI: Menu

Platformers variations.

.basic          -> Strips away borders and margins.
.transparent    -> Adds a transparent background.
.boxed          -> Adds borders.
*/

.ui.menu.basic { border: none; border-radius: 0; box-shadow: none; margin: 0; }
.ui.menu.basic > .item { border: none; }
.ui.menu.basic .item:before { width: 0; }

.ui.menu.transparent,
.ui.menu.inverted.transparent { background-color: transparent; }

.ui.menu.boxed { /* borders */ }


/*
Semantic UI: List

Platformers variations.

.scrolling      -> Keeps the floating label closer to the center, causing the label to overlay.
.flex           -> base for list with flexibel positioning (and pusher).
.clean          -> no margin, no spacing
*/

.ui.list.horizontal.scrolling { white-space:nowrap; overflow-x:auto; }
.ui.list.horizontal.scrolling > .item:first-child,
.ui.list.horizontal.scrolling > .item:last-child, 
.ui.list.horizontal.scrolling:not(.celled) > .item:first-child,
.ui.list.horizontal.scrolling:not(.celled) > .item:last-child { padding: 0.5em 0.5em !important; }

.ui.list.flex { display: flex; }
.ui.list.flex.horizontal { flex-direction: row; flex-wrap:wrap; align-items:center; }
.ui.list.flex > .push:not(.item) { margin-left: auto; width: 0; }
.ui.list.flex > .push.item { margin-left: auto; }

.ui.list.clean { margin:0; padding:0; }
.ui.list.clean > .item,
.ui.list.clean > .item:first-child,
.ui.list.clean > .item:last-child { margin: 0; padding:0; }

/*
Semantic UI: Label

Platformers variations.

.floating.overlay      -> Keeps the floating label closer to the center, causing the label to overlay.

*/
/* deprecated */
/*.ui.label.floating.overlay { top: 1em; left: calc(50% + 1.25rem); }*/


/*
Semantic UI: Image

Platformers variations.

.clickable      -> Clickable (cursor).
.micro          -> Size (smaller than mini)

*/

.ui.image.clickable { cursor:pointer; }

.ui.micro.image,
.ui.micro.images .image,
.ui.micro.images img,
.ui.micro.images svg { width: 20px; height: auto; font-size: .78571429rem; /*calc(11 / 14) */ }

/*
Semantic UI: Message

*/

/* message with icon ribbon */
.ui.message > .ribbon { padding-left: 8px !important; padding-right: 8px !important; left: -1.2em !important; position: absolute !important; }

.ui.message.borderless,
.ui.message.blue.borderless { -webkit-box-shadow: none; box-shadow: none; }



/*********************************************/
/*
Semantic UI + Platformers: TOC

*/
/*.pf-page-toc > .ui.menu.vertical,
.pf-page-toc > .sticky > .ui.menu.vertical { width: inherit; }*/
.pf-section.ui.fixed.bottom.sticky { left: 0; right: 0; }

/*
Semantic UI + Platformers: Sideview

*/

.pf-sideview-container.ui.sidebar { width: 400px; }
.pf-sideview-container.inline.ui.sidebar { position: absolute; }
.pf-sideview-container.inline.ui.overlay.sidebar { z-index: 2; }

/* Mobile - below 768px*/
@media only screen and (max-width: 767px) {
    .pf-sideview-container.ui.sidebar { width: 100%; }
}



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

/*
Semantic UI + DateRangePicker: (Range) Calendar

Platformers styling.

*/

.daterangepicker .calendar-time select { display: inline-block !important; background: #fff !important; border: 1px solid rgba(34,36,38,.15) !important; border-radius: .28571429rem !important; max-height: 100px !important; overflow:auto !important; }
.daterangepicker { font-family: 'Open Sans', 'Lato','Helvetica Neue', 'Arial', 'Helvetica',sans-serif !important; }


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

/*
Semantic UI: Tabs

Platformers variations.

*/

.pf-tab-menu .item.active { border-color: #21ba45 !important; }
.pf-tab-menu.-v2.ui.menu.pointing.secondary { border-bottom-color: transparent; }
.pf-tab-menu.-v2.ui.menu.pointing.secondary .item { border-bottom-color: rgba(34,36,38,.15); }
.pf-tab-menu.-v2.ui.menu.pointing.secondary .fill { border-bottom: 2px solid rgba(34,36,38,.15); flex-grow: 1; margin: 0 0 -2px; }

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


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

/*
Semantic UI: Input

Platformers variations.

- canvas support.
- hotfix focus border

*/
.ui.input.canvas > canvas { margin: 0; max-width: 100%; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; outline: 0; -webkit-tap-highlight-color: rgba(255,255,255,0); text-align: left; line-height: 1.21428571em; font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; padding: .67857143em 1em; background: #fff; border: 1px solid rgba(34,36,38,.15); color: rgba(0,0,0,.87); border-radius: .28571429rem; -webkit-transition: border-color .1s ease,-webkit-box-shadow .1s ease; transition: border-color .1s ease,-webkit-box-shadow .1s ease; transition: box-shadow .1s ease,border-color .1s ease; transition: box-shadow .1s ease,border-color .1s ease,-webkit-box-shadow .1s ease; -webkit-box-shadow: none; box-shadow: none; }
.ui.input.canvas.focus > canvas,
.ui.input > canvas:focus { border-color: #85b7d9; background: #fff; color: rgba(0,0,0,.8); -webkit-box-shadow: none; box-shadow: none; }
.ui.form .ui.input.focus input:not([type]),
.ui.form .ui.input.focus input[type=date],
.ui.form .ui.input.focus input[type=datetime-local],
.ui.form .ui.input.focus input[type=email],
.ui.form .ui.input.focus input[type=file],
.ui.form .ui.input.focus input[type=number],
.ui.form .ui.input.focus input[type=password],
.ui.form .ui.input.focus input[type=search],
.ui.form .ui.input.focus input[type=tel],
.ui.form .ui.input.focus input[type=text],
.ui.form .ui.input.focus input[type=time],
.ui.form .ui.input.focus input[type=url] { border-color: #85b7d9; }



/* Collections
   ========================================================================== */

/* 
 * Form
 */

/*
.description      -> Field description.
.search           -> Fix input search width

*/

.ui.form .field > label > .info { color: rgba(0,0,0,.4); }
.ui.form .field > label > .info:hover { cursor: pointer; color: #2185d0; }
.ui.form .field > label > .info > i.icon { font-size: 1.1em; }
.ui.form .field > .description { display: block; margin: 0 0 0.3rem 0; /*margin: 0 0 .28571429rem 0;*/ /*color: rgba(0,0,0,.87);*/ font-size: 0.9em; /*font-size: .92857143em;*/ /*font-weight: 700;*/ text-transform: none; }
.ui.form .field .ui.search.dropdown:not(.multiple) > input.search { width: 100%; }


/* override */
.ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox { margin-top:0; }


/*
 * Message
 */

/* basic: removes the bottom box-shadow */
.ui.message.attached.bottom.basic { -webkit-box-shadow: 0 0 0 1px rgb(34 36 38 / 15%) inset; box-shadow: 0 0 0 1px rgb(34 36 38 / 15%) inset; }


/*
 * Table
 */

table td.fitted,
table.ui td.fitted,
table.ui.compact td.fitted,
.ui.compact.table > tbody > tr > td.fitted { padding: 0; }

.pf-borderless-table tr th,
.pf-borderless-table tr td,
.pf-borderless-table tr tf { border: 0px !important; }

.pf-td-label { text-align: right !important; color: #767676; }

/* border */
.ui.table.border { border-radius: .28571429rem; border: 1px solid rgba(34,36,38,.15); }
.ui.table.shadow { -webkit-box-shadow: 0 1px 2px 0 rgba(34,36,38,.15); box-shadow: 0 1px 2px 0 rgba(34,36,38,.15); }



/* Views
   ========================================================================== */ /*
 * Card
 * cursor consistency fix.
 * compact       -> Takes only necessary space
*/ .ui.card a > i, .ui.card a.ui.corner.label > i, .ui.card a.ui.corner.label > .icon, .ui.cards > .card a > i, .ui.cards > .card a.ui.corner.label > i, .ui.cards > .card a.ui.corner.label > .icon { cursor: pointer; }

.ui.card.compact { width: initial; }

/* fix: content (re-assign padding) */
.accordion .content .ui.card > .content,
.accordion .content .ui.cards > .card > .content { padding: 1em 1em; }
.accordion .content .ui.card > .extra,
.accordion .content .ui.cards > .card > .extra { padding: 0.75em 1em; }

/*fix: horizontal card consistency */
.ui.horizontal.card > .content, 
.ui.horizontal.cards > .card > .content { border:none; }

/* Modules
   ========================================================================== */

/* 
 * Accordion
 */
/*.ui.accordion*/

.ui.accordion .title:not(.ui) { font-family:inherit; }

/*
 * Checkbox
*/
.ui.checkbox .content { padding-left: 1.85714em; }


/* 
 * Dimmer
 */
/* fix: hide rounded white corners (eg inside modals) */
/*.animating.dimmable:not(body),*/
.dimmed.dimmable:not(body) { border-radius: 0; }

/*
 * Dropdown
*/

/* remove webkit 'X' icon for search when using a dropdown  */
/* 1. clears the ‘X’ from Internet Explorer */
.ui.dropdown input[type=search]::-ms-clear { display: none; width: 0; height: 0; }
.ui.dropdown input[type=search]::-ms-reveal { display: none; width: 0; height: 0; }
/* 2. clears the ‘X’ from Chrome */
.ui.dropdown input[type="search"]::-webkit-search-decoration,
.ui.dropdown input[type="search"]::-webkit-search-cancel-button,
.ui.dropdown input[type="search"]::-webkit-search-results-button,
.ui.dropdown input[type="search"]::-webkit-search-results-decoration { display: none; }

/* fix cursor when using inline additions */
.ui.form .two.fields .ui.multiple.search.dropdown > input.search { width: 2.2em; }

/* description block/paragraph */
.ui.dropdown .menu > .item > p.description, 
.ui.dropdown > .text > p.description { float:none;margin:0; }

/* checkable */
/* panel header > main filter sizing */
.ui.selection.dropdown .menu > .item.checkable { padding: 0.5em !important; }
/*.ui.selection.dropdown .menu > .item.checkable .ui.input.checkbox { padding-right: 0.5em; }*/
.ui.selection.dropdown .menu > .item.checkable .ui.input.checkbox > i { margin:0; }

/* ellipsis on description for small screens */
@media only screen and (max-width: 767.98px) {
    .ui.dropdown .menu > .item > .description,
    .ui.dropdown > .text > .description { white-space: nowrap; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; }
}



/*
 * Modal
*/

/* fix 'close' -> Fixes the close button positioning. */
.ui.modal > .close { top: 1.0535rem; right: 1rem; color: rgba(0,0,0,.87); }

/* extension 'fullscreen' -> force full height */
.ui.fullscreen.modal.with-header-footer > .content,
.ui.fullscreen-y.modal.with-header-footer > .content { height: calc(100vh - (65px + 65px + 2.5rem + 2.5rem)); max-height: calc(100vh - (65px + 65px + 2.5rem + 2.5rem)); }
.ui.fullscreen.modal.with-header > .content,
.ui.fullscreen-y.modal.with-header > .content { height: calc(100vh - (65px + 2.5rem + 2.5rem)); max-height: calc(100vh - (65px + 2.5rem + 2.5rem)); }
.ui.fullscreen.modal.with-footer > .content,
.ui.fullscreen-y.modal.with-footer > .content { height: calc(100vh - (65px + 2.5rem + 2.5rem)); max-height: calc(100vh - (65px + 2.5rem + 2.5rem)); }

/* extension 'fullscreen' -> full width */
.ui.fullscreen-x.modal { width: 95%; left: 2.5%; margin: 1em auto; }

/* fix 'actions menu' -> Fixes margins when using menu within actions. */
@media only screen and (max-width: 767.98px) {
    .ui.modal .actions > .menu .button { margin-bottom: 1rem; }
}