/*!

* # Semantic UI 2.2.4 - Popup
* http://github.com/semantic-org/semantic-ui/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/

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

Popup

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

.ui.popup {

display: none;
position: absolute;
top: 0px;
right: 0px;

/* Fixes content being squished when inline (moz only) */

min-width: -webkit-min-content;
min-width: -moz-min-content;
min-width: min-content;
z-index: 1900;
border: 1px solid #D4D4D5;
line-height: 1.4285em;
max-width: 250px;
background: #FFFFFF;
padding: 0.833em 1em;
font-weight: normal;
font-style: normal;
color: rgba(0, 0, 0, 0.87);
border-radius: 0.28571429rem;
box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);

} .ui.popup > .header {

padding: 0em;
font-family: $font-family;
font-size: 1.14285714em;
line-height: 1.2;
font-weight: bold;

} .ui.popup > .header + .content {

padding-top: 0.5em;

} .ui.popup:before {

position: absolute;
content: '';
width: 0.71428571em;
height: 0.71428571em;
background: #FFFFFF;
-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);
z-index: 2;
box-shadow: 1px 1px 0px 0px #bababc;

}

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

Types

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

/*————–

Tooltip

—————*/

/* Content */

data-tooltip

{

position: relative;

}

/* Arrow */ [data-tooltip]:before {

pointer-events: none;
position: absolute;
content: '';
font-size: 1rem;
width: 0.71428571em;
height: 0.71428571em;
background: #FFFFFF;
-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);
z-index: 2;
box-shadow: 1px 1px 0px 0px #bababc;

}

/* Popup */ [data-tooltip]:after {

pointer-events: none;
content: attr(data-tooltip);
position: absolute;
text-transform: none;
text-align: left;
white-space: nowrap;
font-size: 1rem;
border: 1px solid #D4D4D5;
line-height: 1.4285em;
max-width: none;
background: #FFFFFF;
padding: 0.833em 1em;
font-weight: normal;
font-style: normal;
color: rgba(0, 0, 0, 0.87);
border-radius: 0.28571429rem;
box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
z-index: 1;

}

/* Default Position (Top Center) */ [data-tooltip]:not():before {

top: auto;
right: auto;
bottom: 100%;
left: 50%;
background: #FFFFFF;
margin-left: -0.07142857rem;
margin-bottom: 0.14285714rem;

} [data-tooltip]:not():after {

left: 50%;
-webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
bottom: 100%;
margin-bottom: 0.5em;

}

/* Animation */ [data-tooltip]:before, [data-tooltip]:after {

pointer-events: none;
visibility: hidden;

} [data-tooltip]:before {

opacity: 0;
-webkit-transform: rotate(45deg) scale(0) !important;
    -ms-transform: rotate(45deg) scale(0) !important;
        transform: rotate(45deg) scale(0) !important;
-webkit-transform-origin: center top;
    -ms-transform-origin: center top;
        transform-origin: center top;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;

} [data-tooltip]:after {

opacity: 1;
-webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
        transform-origin: center bottom;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;

} [data-tooltip]:hover:before, [data-tooltip]:hover:after {

visibility: visible;
pointer-events: auto;

} [data-tooltip]:hover:before {

-webkit-transform: rotate(45deg) scale(1) !important;
    -ms-transform: rotate(45deg) scale(1) !important;
        transform: rotate(45deg) scale(1) !important;
opacity: 1;

}

/* Animation Position */ [data-tooltip]:after, [data-tooltip][data-position=“top center”]:after, [data-tooltip][data-position=“bottom center”]:after {

-webkit-transform: translateX(-50%) scale(0) !important;
    -ms-transform: translateX(-50%) scale(0) !important;
        transform: translateX(-50%) scale(0) !important;

} [data-tooltip]:hover:after, [data-tooltip][data-position=“bottom center”]:hover:after {

-webkit-transform: translateX(-50%) scale(1) !important;
    -ms-transform: translateX(-50%) scale(1) !important;
        transform: translateX(-50%) scale(1) !important;

} [data-tooltip][data-position=“left center”]:after, [data-tooltip][data-position=“right center”]:after {

-webkit-transform: translateY(-50%) scale(0) !important;
    -ms-transform: translateY(-50%) scale(0) !important;
        transform: translateY(-50%) scale(0) !important;

} [data-tooltip][data-position=“left center”]:hover:after, [data-tooltip][data-position=“right center”]:hover:after {

-webkit-transform: translateY(-50%) scale(1) !important;
    -ms-transform: translateY(-50%) scale(1) !important;
        transform: translateY(-50%) scale(1) !important;

} [data-tooltip][data-position=“top left”]:after, [data-tooltip][data-position=“top right”]:after, [data-tooltip][data-position=“bottom left”]:after, [data-tooltip][data-position=“bottom right”]:after {

-webkit-transform: scale(0) !important;
    -ms-transform: scale(0) !important;
        transform: scale(0) !important;

} [data-tooltip][data-position=“top left”]:hover:after, [data-tooltip][data-position=“top right”]:hover:after, [data-tooltip][data-position=“bottom left”]:hover:after, [data-tooltip][data-position=“bottom right”]:hover:after {

-webkit-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
        transform: scale(1) !important;

}

/*————–

Inverted

—————*/

/* Arrow */ [data-tooltip]:before {

box-shadow: none !important;

}

/* Arrow Position */ [data-tooltip]:before {

background: #1B1C1D;

}

/* Popup */ [data-tooltip]:after {

background: #1B1C1D;
color: #FFFFFF;
border: none;
box-shadow: none;

} [data-tooltip]:after .header {

background-color: none;
color: #FFFFFF;

}

/*————–

Position

—————*/

/* Top Center */ [data-position=“top center”]:after {

top: auto;
right: auto;
left: 50%;
bottom: 100%;
-webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
margin-bottom: 0.5em;

} [data-position=“top center”]:before {

top: auto;
right: auto;
bottom: 100%;
left: 50%;
background: #FFFFFF;
margin-left: -0.07142857rem;
margin-bottom: 0.14285714rem;

}

/* Top Left */ [data-position=“top left”]:after {

top: auto;
right: auto;
left: 0;
bottom: 100%;
margin-bottom: 0.5em;

} [data-position=“top left”]:before {

top: auto;
right: auto;
bottom: 100%;
left: 1em;
margin-left: -0.07142857rem;
margin-bottom: 0.14285714rem;

}

/* Top Right */ [data-position=“top right”]:after {

top: auto;
left: auto;
right: 0;
bottom: 100%;
margin-bottom: 0.5em;

} [data-position=“top right”]:before {

top: auto;
left: auto;
bottom: 100%;
right: 1em;
margin-left: -0.07142857rem;
margin-bottom: 0.14285714rem;

}

/* Bottom Center */ [data-position=“bottom center”]:after {

bottom: auto;
right: auto;
left: 50%;
top: 100%;
-webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
margin-top: 0.5em;

} [data-position=“bottom center”]:before {

bottom: auto;
right: auto;
top: 100%;
left: 50%;
margin-left: -0.07142857rem;
margin-top: 0.14285714rem;

}

/* Bottom Left */ [data-position=“bottom left”]:after {

left: 0;
top: 100%;
margin-top: 0.5em;

} [data-position=“bottom left”]:before {

bottom: auto;
right: auto;
top: 100%;
left: 1em;
margin-left: -0.07142857rem;
margin-top: 0.14285714rem;

}

/* Bottom Right */ [data-position=“bottom right”]:after {

right: 0;
top: 100%;
margin-top: 0.5em;

} [data-position=“bottom right”]:before {

bottom: auto;
left: auto;
top: 100%;
right: 1em;
margin-left: -0.14285714rem;
margin-top: 0.07142857rem;

}

/* Left Center */ [data-position=“left center”]:after {

right: 100%;
top: 50%;
margin-right: 0.5em;
-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
        transform: translateY(-50%);

} [data-position=“left center”]:before {

right: 100%;
top: 50%;
margin-top: -0.14285714rem;
margin-right: -0.07142857rem;

}

/* Right Center */ [data-position=“right center”]:after {

left: 100%;
top: 50%;
margin-left: 0.5em;
-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
        transform: translateY(-50%);

} [data-position=“right center”]:before {

left: 100%;
top: 50%;
margin-top: -0.07142857rem;
margin-left: 0.14285714rem;

}

/* Arrow */ [data-position~=“bottom”]:before {

background: #FFFFFF;
box-shadow: -1px -1px 0px 0px #bababc;

} [data-position=“left center”]:before {

background: #FFFFFF;
box-shadow: 1px -1px 0px 0px #bababc;

} [data-position=“right center”]:before {

background: #FFFFFF;
box-shadow: -1px 1px 0px 0px #bababc;

} [data-position~=“top”]:before {

background: #FFFFFF;

}

/* Inverted Arrow Color */ [data-inverted][data-tooltip]:before {

background: #1B1C1D;
box-shadow: -1px -1px 0px 0px #bababc;

} [data-inverted][data-position=“left center”]:before {

background: #1B1C1D;
box-shadow: 1px -1px 0px 0px #bababc;

} [data-inverted][data-position=“right center”]:before {

background: #1B1C1D;
box-shadow: -1px 1px 0px 0px #bababc;

} [data-inverted][data-tooltip]:before {

background: #1B1C1D;

} [data-position~=“bottom”]:before {

-webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
        transform-origin: center bottom;

} [data-position~=“bottom”]:after {

-webkit-transform-origin: center top;
    -ms-transform-origin: center top;
        transform-origin: center top;

} [data-position=“left center”]:before {

-webkit-transform-origin: top center;
    -ms-transform-origin: top center;
        transform-origin: top center;

} [data-position=“left center”]:after {

-webkit-transform-origin: right center;
    -ms-transform-origin: right center;
        transform-origin: right center;

} [data-position=“right center”]:before {

-webkit-transform-origin: right center;
    -ms-transform-origin: right center;
        transform-origin: right center;

} [data-position=“right center”]:after {

-webkit-transform-origin: left center;
    -ms-transform-origin: left center;
        transform-origin: left center;

}

/*————–

Spacing

—————*/

.ui.popup {

margin: 0em;

}

/* Extending from Top */ .ui.top.popup {

margin: 0em 0em 0.71428571em;

} .ui.top.left.popup {

-webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
        transform-origin: left bottom;

} .ui.top.center.popup {

-webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
        transform-origin: center bottom;

} .ui.top.right.popup {

-webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
        transform-origin: right bottom;

}

/* Extending from Vertical Center */ .ui.left.center.popup {

margin: 0em 0.71428571em 0em 0em;
-webkit-transform-origin: right 50%;
    -ms-transform-origin: right 50%;
        transform-origin: right 50%;

} .ui.right.center.popup {

margin: 0em 0em 0em 0.71428571em;
-webkit-transform-origin: left 50%;
    -ms-transform-origin: left 50%;
        transform-origin: left 50%;

}

/* Extending from Bottom */ .ui.bottom.popup {

margin: 0.71428571em 0em 0em;

} .ui.bottom.left.popup {

-webkit-transform-origin: left top;
    -ms-transform-origin: left top;
        transform-origin: left top;

} .ui.bottom.center.popup {

-webkit-transform-origin: center top;
    -ms-transform-origin: center top;
        transform-origin: center top;

} .ui.bottom.right.popup {

-webkit-transform-origin: right top;
    -ms-transform-origin: right top;
        transform-origin: right top;

}

/*————–

Pointer

—————*/

/*— Below —*/

.ui.bottom.center.popup:before {

margin-left: -0.30714286em;
top: -0.30714286em;
left: 50%;
right: auto;
bottom: auto;
box-shadow: -1px -1px 0px 0px #bababc;

} .ui.bottom.left.popup {

margin-left: 0em;

} /rtl:rename/ .ui.bottom.left.popup:before {

top: -0.30714286em;
left: 1em;
right: auto;
bottom: auto;
margin-left: 0em;
box-shadow: -1px -1px 0px 0px #bababc;

} .ui.bottom.right.popup {

margin-right: 0em;

} /rtl:rename/ .ui.bottom.right.popup:before {

top: -0.30714286em;
right: 1em;
bottom: auto;
left: auto;
margin-left: 0em;
box-shadow: -1px -1px 0px 0px #bababc;

}

/*— Above —*/

.ui.top.center.popup:before {

top: auto;
right: auto;
bottom: -0.30714286em;
left: 50%;
margin-left: -0.30714286em;

} .ui.top.left.popup {

margin-left: 0em;

} /rtl:rename/ .ui.top.left.popup:before {

bottom: -0.30714286em;
left: 1em;
top: auto;
right: auto;
margin-left: 0em;

} .ui.top.right.popup {

margin-right: 0em;

} /rtl:rename/ .ui.top.right.popup:before {

bottom: -0.30714286em;
right: 1em;
top: auto;
left: auto;
margin-left: 0em;

}

/*— Left Center —*/

/rtl:rename/ .ui.left.center.popup:before {

top: 50%;
right: -0.30714286em;
bottom: auto;
left: auto;
margin-top: -0.30714286em;
box-shadow: 1px -1px 0px 0px #bababc;

}

/*— Right Center —*/

/rtl:rename/ .ui.right.center.popup:before {

top: 50%;
left: -0.30714286em;
bottom: auto;
right: auto;
margin-top: -0.30714286em;
box-shadow: -1px 1px 0px 0px #bababc;

}

/* Arrow Color By Location */ .ui.bottom.popup:before {

background: #FFFFFF;

} .ui.right.center.popup:before, .ui.left.center.popup:before {

background: #FFFFFF;

} .ui.top.popup:before {

background: #FFFFFF;

}

/* Inverted Arrow Color */ .ui.inverted.bottom.popup:before {

background: #1B1C1D;

} .ui.inverted.right.center.popup:before, .ui.inverted.left.center.popup:before {

background: #1B1C1D;

} .ui.inverted.top.popup:before {

background: #1B1C1D;

}

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

Coupling

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

/* Immediate Nested Grid */ .ui.popup > .ui.grid:not(.padded) {

width: calc(100% + 1.75rem);
margin: -0.7rem -0.875rem;

}

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

States

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

.ui.loading.popup {

display: block;
visibility: hidden;
z-index: -1;

} .ui.animating.popup, .ui.visible.popup {

display: block;

} .ui.visible.popup {

-webkit-transform: translateZ(0px);
        transform: translateZ(0px);
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;

}

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

Variations

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

/*————–

Basic

—————*/

.ui.basic.popup:before {

display: none;

}

/*————–

Wide

—————*/

.ui.wide.popup {

max-width: 350px;

} .ui[class*=“very wide”].popup {

max-width: 550px;

} @media only screen and (max-width: 767px) {

.ui.wide.popup,
.ui[class*="very wide"].popup {
  max-width: 250px;
}

}

/*————–

Fluid

—————*/

.ui.fluid.popup {

width: 100%;
max-width: none;

}

/*————–

Colors

—————*/

/* Inverted colors */ .ui.inverted.popup {

background: #1B1C1D;
color: #FFFFFF;
border: none;
box-shadow: none;

} .ui.inverted.popup .header {

background-color: none;
color: #FFFFFF;

} .ui.inverted.popup:before {

background-color: #1B1C1D;
box-shadow: none !important;

}

/*————–

Flowing

—————*/

.ui.flowing.popup {

max-width: none;

}

/*————–

Sizes

—————*/

.ui.mini.popup {

font-size: 0.78571429rem;

} .ui.tiny.popup {

font-size: 0.85714286rem;

} .ui.small.popup {

font-size: 0.92857143rem;

} .ui.popup {

font-size: 1rem;

} .ui.large.popup {

font-size: 1.14285714rem;

} .ui.huge.popup {

font-size: 1.42857143rem;

}

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

Theme Overrides

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

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

User Overrides

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