/*
Semantic UI: Font

Platformers overrides (body, h*, header, menu).

*/

body,
h1, h2, h3, h4, h5, h6,
.ui.header,
.ui.menu { font-family: 'Open Sans', Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; }


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

Platformers variations.

.transparant          -> Applies a transparant background color.

*/
.ui.button.transparent { background-color: transparent; }
.ui.button.fitted { padding:0; }


/*
Semantic UI: Modal

Platformers overrides.

- close          -> Fixes the close button positioning.

*/

.ui.modal > .close { top: 1.0535rem; right: 1rem; color: rgba(0,0,0,.87); }


/*
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 > .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.
.fluid.padded       -> 

*/

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

.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; }
}


/*
Semantic UI: Menu

Platformers variations.

.neutral        -> Strips away borders and margins.
.transparent    -> Adds a transparent background.
.boxed          -> Adds borders.
.bar            -> Styled as an app-bar.
.bar.top        -> Styled as a top app-bar.
.toc            -> Table of contents styled menu.

icon .left      -> icon appears on the left side in vertical menu's
*/

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

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

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

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

.ui.menu.bar.top > .item > i.icon,
.ui.menu.bar.top > .right > .item > i.icon { font-size: 1.5em; }
.ui.menu.bar.top > .item > span,
.ui.menu.bar.top > .right > .item > span { margin: 0 0.25em 0 0.25em; }

.ui.menu.bar.top > .item.logo,
.ui.menu.bar.top > .right > .item.logo { padding-left: 0.1em; padding-right: 0.1em; }
.ui.menu.bar.top .button.icon { padding: 0.9em 2em; }
.ui.menu.bar.top .ui.header { margin: 0 0.35em; font-size: 1.5em; }
.ui.menu.bar.top .floating.overlay.label { box-shadow: 0px 0px 0 1px #fff; }

.ui.menu.toc { }
.inverted > .ui.menu.toc > .item { color: rgba(255,255,255,.9); }
.inverted > .ui.menu.toc .active.item { background: rgba(255,255,255,.15); color: #fff !important; }
.inverted > .ui.menu.toc .dropdown.item:hover,
.inverted > .ui.menu.toc .link.item:hover,
.inverted > .ui.menu.toc a.item:hover { background: rgba(255,255,255,.08); color: #fff; }
.inverted > .ui.menu.toc .item:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 1px; background: rgba(34,36,38,.1); background: rgba(255,255,255,.08); }
.inverted > .ui.menu.toc .menu > .item { color: rgba(255,255,255,.5); }
.inverted > .ui.menu.toc .item .menu .link.item:hover,
.inverted > .ui.menu.toc .item .menu a.item:hover,
.inverted > .ui.menu.toc .item .menu .item.active { background: 0 0; color: #fff; }
.inverted > .ui.menu.toc .item > .title { color: inherit; }

/* override */
.ui.menu.vertical > .item > .right.aligned { width: 1.18em; float: right; margin: 0 0 0 .5em; }

.ui.vertical.menu .item > i.icon.left { float: none; margin: 0em 0.35714286em 0em 0em; }


/*
Semantic UI: Label

Platformers variations.

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

*/

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


/*
Semantic UI: message with icon ribbon

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


/*
Semantic UI: Form

Platformers variations.

.description      -> Field description.

*/

.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; }

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

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



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

/*
Semantic UI + DataTables: Scroller

Platformers fix.

*/

.dataTables_wrapper.dt-semanticUI > .dataTables_scroll .dataTables_scrollHead { background-color: #f9fafb; }
.dataTables_wrapper.dt-semanticUI > .dataTables_scroll table.dataTable,
.dataTables_wrapper.dt-semanticUI > .dataTables_scroll table.dataTable th,
.dataTables_wrapper.dt-semanticUI > .dataTables_scroll table.dataTable td { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }


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

/*
Semantic UI + NoUiSlider: (Range) slider

Platformers styling.

*/

.noUi-horizontal { width: 100%; margin-bottom: 2em }
.noUi-vertical { height: 150px; }

.noUi-connect { background: #2185d0 !important; } /* SUI: blue color (teal looks nicer, but checkbox toggle color (should also be teal) isn't supported yet */
.noUi-handle { cursor: pointer !important; outline: none !important; }
.noUi-horizontal .noUi-tooltip { top: 90% !important; }
.noUi-vertical .noUi-tooltip { left: 120% !important; }
.noUi-tooltip { border: none !important; background: transparent !important; font-size: 0.9em !important; }



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

/*
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; }
.sidebar .daterangepicker { max-width: 245px !important; } /* temporary fix for daterange in sidebar filter */


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

/*
Semantic UI: Tabs

Platformers variations.

*/

.pf-tab-menu .item.active { border-color: #21ba45 !important; }


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

/*
Semantic UI: Table

Platformers variations.

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