.svg-container
{
    text-align: center;
    padding: 1em;
    position: relative; /* svg print select position absolute miatt */
}

.svg-container svg
{
    opacity: 0;
}

/* fade-in animációk oldal betöltéskor */

.svg-container svg.fade-in
{
    opacity: 1;
}

.print-button, .reset-button
{
    opacity: 0;
    transition: 0.4s ease-in;
}

.print-button.fade-in, .reset-button.fade-in
{
    opacity: 1;
}

.fraction-details
{
    opacity: 0;
    transition: 0.4s ease-in;
}

.fraction-details.fade-in
{
    opacity: 1;
}

/* szektor beúszás szűréskor */
g.easeIn
{
    animation: 2s easeIn;
}

@keyframes easeIn
{
    from
    {
        opacity: 0;
    }
    to
    {
        opacity: 1;
    }
}

/* 2020.03.04 - eddig egy path volt, bekerült 2 új path a Vnév és Knév számára, így innentől meg kell különböztetni őket */
path[name]
{
    cursor: pointer;
/*     transition: 0.4s ease-out; */
    stroke: black;
    stroke-width: .5px;
}

svg a
{
    text-decoration: none !important;
    /*outline: 0!important;*/
}

/* Liferay 7 clay css stílusok lecserélése */

.svg-print .btn.btn-default
{
    box-shadow: none !important;
}

.name-select-container .dropdown-menu.open
{
    min-width: 0 !important;
    width: 100%;
}

.dropdown-menu.open li
{
    text-align: center;
}

.pair-proxy-portlet .svg-print .bootstrap-select.show .dropdown-menu a.active:hover
{
    color: white !important;
    background: #725537 !important;
}

/* Bootstrap tooltip módosítás */ 

.tooltip.patko-tooltip
{
    font-size: 11px;
    border-radius: 10px;
}

.tooltip.patko-tooltip .tooltip-inner
{
    background: linear-gradient(to bottom, #C7A078 0%, #F6F1E8 100%) !important;
    border-radius: 10px !important;
    font-weight: bold;
    color: black !important;
}

/* régi tooltip arrow használata */
.tooltip.bottom.patko-tooltip .tooltip-arrow
{
    position: absolute;
    top: -5px;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-bottom-color: #C7A078 !important;
    transform: rotate(0deg);
    background: transparent;
}

/* .aui img magassága auto a liferay-ben, így a tooltip alapértelmezett nagy méretben jelenik meg. Itt 75px-t használunk helyette */
.tooltip.patko-tooltip > .tooltip-inner > .tooltip-img
{
    width: 60px;
    height: 75px;
    display: block;
    margin: 20px auto 0 auto;
    box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.3);
    border-radius: 5px;
}

/* patko-tooltip saját class hozzáadása a js-ben a template-hez, az eredeti .aui.tooltip osztályra már vonatkozik opacity szabály, ezt írjuk felül */
.tooltip.patko-tooltip.in 
{
    opacity: 1;
}

/* Jelmagyarázat */

.fraction-details
{
    position: absolute;
    right: 0;
    top: 4em;
    font-size: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: .5em 1em 0 0;
}

/* liferay #main-content a : underline az alapértelmezett */

#main-content .fraction-details, #main-content .fraction-details a 
{
    text-decoration: none;
    color: dimgray;
}

/* jelmagyarázatban a frakció adatait tartalmazó div. 2 div-et tartalmaz: frakció színe + neve, ezeket flexszel rendezzük középre */
div[data-fraction] 
{
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 3px;
}

/* */
.description-item
{
    width: 30px;
    height: 5px;
    margin-right: 5px;
}

.fraction-uppercase
{
    font-weight: bold;
}

/* adott frakció ülőhelyeinek kiemelése addClass/removeClass */

.opacity-on
{
    opacity: 1;
    -moz-transition: opacity 0.4s;
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    -ms-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

.opacity-off
{
    opacity: 0.15;
    -moz-transition: opacity 0.4s;
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    -ms-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

/* media query */

@media only screen and (max-width: 767px)
{
    .svg-container svg
    {
        width: 100%;
        margin-top: 5vh;
    }

    .sector-select-container, .name-select-container
    {
        display: block;
    }

    .percentages
    {
        top: 0;
        right: 0;
    }

    .pair-content .print-button,.pair-content .reset-button
    {
        margin: 6px 0 0 15px;
    }
    

    div.page-wrapper-3 .pair-content .fraction-details
    {
        font-size: .6em;
        position: relative;
        top: 15px;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        font-size: .6em!important;
       /* grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));*/
    }

    div[data-fraction]
    {
        /*justify-content: space-between;*/
        margin: 0 1em;
    }
    
    .print-alert
    {
        max-width: 100%;
        text-align: center;
    }
}

@media only screen and (max-width: 576px)
{
    .fraction-data
    {
        font-size: .7em;
    }
    
    .print-alert
    {
        font-size: 10px;
    }
}

/* Az ülőhelyeken szereplő szektor/sor/szám csak nyomtatáskor jelenik majd meg */
.svg-container text
{
    visibility: hidden;
    pointer-events: none;
    will-change: visibility;
}

.time
{
    display: none;
}


/* 2019.06.05 - Bootstrap-select */

.filter-print-title, .name-select-title
{
    text-align: left;
    margin: .5em 0;
    font-weight: bold;
    font-size: 12px;
}

/* bootstrap-select beépített display: inline block felülírása, hogy egymás alatt jelenjen meg a 2 select */
.bootstrap-select:not(.input-group-btn).name-select
{
    display: block;
}

.bootstrap-select .dropdown-menu 
{
    max-width: 200px;
}

select.name-select li
{
    font-size: 10px;
}

.dropdown-menu li a
{
    -webkit-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Chrome-ban igen, Firefox-ban nem működik display:inline-block-ra a text-overflow: ellipsis; --> bootstrap display inline-block felülírása */
.bootstrap-select .dropdown-menu li a span.text 
{
    display: contents !important;
    text-overflow: ellipsis;
}

@media only screen and (max-width: 768px)
{
    .svg-print
    {
        display: flex;
        flex-direction: column;
        width: 100%;
        /* absolute helyett relative, így az ábra nem a div mögött jelenik meg + középre kerül */
        position: relative;
    }

    /* alapértelmezett bootstrap-select 220px érték felülírása */
    .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn)
    {
        width: 90%;
    }

    /* a dropdown szélességét hozzá kell igazítani a select szélességéhez */
    .dropdown-menu
    {
        min-width: 100% !important;
    }
}

.svg-container
{
    background-image: url('ulesterem_hatter.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

/* select elrendezés, ikonok */
.sector-select-container, .name-select-container
{
    display: flex;
}

.print-button
{
    background: url('./images/print.png') no-repeat;
}

.reset-button
{
    background: url('./images/refresh.png') no-repeat;
}

.print-button, .reset-button
{
    width: 20px;
    cursor: pointer;
    margin: 0 7px;
    transition: .4s;
}

/* % megoszlás link */
.percentages
{
    position: absolute;
    right: 1em;
    top: 1em;
    cursor: pointer;
    color: white;
    font-weight: bold;
    font-size: .8em;
}

.percentages a
{
    text-decoration: none !important;
    background: #ba8b5a;
    padding: 5px;
    border-radius: 5px;
    transition: .4s;
}

.percentages a:hover
{
    background:#a26a42;
}

.percentages a, .percentages a:visited
{
    color: white !important;
}

/* PRINT CSS */

/* alapértelmezett fekvő mód nyomtatáskor

Edge böngészőben a @page utasítás nem működik @media print alatt, ki kell emelni külön
https://stackoverflow.com/questions/26800397/cant-seem-to-overwrite-ie11-print-margin
*/

@page 
{
    orientation: landscape; 
    margin: 0;  /* 2.5mm default */
}

@media print
{
    * 
    {
       /*  border: none!important; */
        background-image: none!important;
    }

    html, body
    {
        /* alapértelmezetten +1 üres oldal került nyomtatásra, Firefox miatt szükséges a 100% height */
        overflow: hidden;
        height: 100%;
        /* Firefox nyomtatásban az inline background-color stílus nem jelenik meg a jelmagyarázatban. Ezekre nincs CSS definiálva, mert adatbázisból jönnek a frakció színek
        a color-adjust utasítás javítja a megjelenést, így a háttérszínek, grafikák is megjelennek nyomtatáskor https://developer.mozilla.org/en-US/docs/Web/CSS/color-adjust */
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
        background: white !important;
    }

    /* elemek elrejtése a nyomtatási lapon - Liferay menüsör, egyéb extra divek - lifeRay print CSS-ben definiálva volt néhány elem, melyek megjelentek */
    .print-button, .reset-button, .caret, .name-select-title, .filter-print-title, .name-select, .sector-select, .percentages,
    .site-title-top.hidden-desktop, #main-desktop-navigation, nav.navbar.site-navigation.visible-desktop, .pair-header,
    .pair-content h1, .pair-footer, .website-main #wrapper > header, .stripped-page-top
    {
        display: none !important;
    }

    /* 2019.09.25 */

    .fraction-details
    {
        top: 0;
        right: 0;
        font-size: 7px;
    }
    
    .description-item
    {
        height: 3px;
    }

    .svg-container svg
    {
       height: 150%;
    }

    .portlet-borderless-container .portlet-body, #wrapper #banner
    {
        border-bottom: 0;
    }

    /* a window.print az eredeti méretet nyomtatja ki, ezen növelünk */
    .svg-container svg
    {
        width: 80%;
    }
    
    .svg-container path
    {
        fill: none;
        /* 
        - js-ben 1px stroke szélesség lett beállítva megjelenéskor, ez  nyomtatáskor - jQuery(this).css('stroke-width', '1px'); ) */
        stroke-width: 3px !important;
    }

    .time
    {
        display: block;
        font-size: 10px;
        text-transform: uppercase;
    }

    .portlet-boundary:not(.portlet-no-background):not(.portlet-breadcrumb) .portlet .portlet-content
    {
        border-bottom: none !important;
    }

    .svg-container text
    {
        visibility: visible; /* eredetileg el vannak rejtve, csak nagyításkor / nyomtatáskor látszódjon */
        font-size: 5px;
    }
}

.print-disabled
{
    pointer-events: none;
}

/* eredeti, kijelentkezett állapotban */

@media screen and ( max-width: 968px)
{
    div.page-wrapper-3 .pair-content .percentages
    {
        font-size: .6em;
    }
}

/* 2020. 01.17 portalra bejelentkezve a jelmagyarázat alsó része belelógott az ábrába */
@media only screen and (max-width: 1126px)
{
    .fraction-details
    {
        font-size: .6em;
    }
}

@media only screen and (max-width: 968px)
{
    div.page-wrapper-3 .pair-content .fraction-details
    {
        font-size: .45em;
        margin-top: 15px;
    }


}

@media only screen and (max-width: 414px)
{
    div[data-fraction]
    {
        margin: 0;
    }
}

/* Ha be van jelentkezve a user, */

.fraction-details.logged-in-style
{
    font-size: 8px;
}

div[data-fraction].logged-in-style
{
    padding: 1px;
}

@media screen and ( max-width: 1130px)
{
    div.page-wrapper-3 .pair-content .fraction-details.logged-in-style
    {
        font-size: .5em;
        margin-top: 10px;
    }

    div.page-wrapper-3 .pair-content .percentages.logged-in-style
    {
        font-size: .6em;
        top: 2em;
    }
}

@media screen and ( max-width: 992px)
{
    div.page-wrapper-3 .pair-content .fraction-details.logged-in-style
    {
        font-size: .4em;
        margin-top: 10px;
    }
    
    div.page-wrapper-3 .pair-content .percentages.logged-in-style
    {
        font-size: .6em;
    }
}

@media screen and ( max-width: 960px)
{
    div.page-wrapper-3 .pair-content .fraction-details.logged-in-style
    {
        position: relative;
        top: 15px;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        font-size: .6em!important;
    }

    .description-item.logged-in-style
    {
        width: 20px;
    }

    div.page-wrapper-3 .pair-content .percentages.logged-in-style
    {
        font-size: .5em;
    }
}

@media screen and ( max-width: 992px) and ( min-width: 960px)
{
    div.page-wrapper-3 .pair-content .fraction-details.logged-in-style
    {
        margin-top: 20px;
    }
}

/* 992 és 768 px között a select és a dropdown-menu mérete is változzon */
@media screen and ( max-width: 992px) and ( min-width: 768px)
{
    .svg-container .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn)
    {
        width: 150px;
    }
    
    .print-alert.show
    {
        font-size: 12px;
    }
}

/* 2020. 02.20 */
.print-alert
{
    max-width: 330px;
    padding: 5px;
    border-radius: 5px;
    border-color: #ffeeba;
}

.print-alert.show
{
    background: #fff3cd;
    animation: fade-in;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    transform: translateZ(0); /* gpu hack Firefoxhoz */
}

@keyframes fade-in
{
    from
    {
        opacity: 0;
        -webkit-transform: translatex(-10px);
        -moz-transform: translatex(-10px);
        -o-transform: translatex(-10px);
        transform: translatex(-10px);
    }
    to
    {
        opacity: 1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

textPath
{
    font-size: 6px;
}

/* Álló helyzetben nem fér ki a jelmagyarázat a papírra, portrait elrendezésben az ábra alá kerülnek a frakciónevek */
@media print and (orientation: portrait)
{
    html, body
    {
        display: grid;
        align-content: center;
    }

    .fraction-details
    {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        font-size: 8px;
    }

    .svg-container svg
    {
        width: 100%;
    }
}

@media screen and (min-width: 768px)
{
    .print-button, .reset-button
    {
        height: 28px;
        background-position: center center;
    }
}