@import url("theme.css");

:root {
    /* BOOTSTRAP breakpoints */
    --sm            : 576px;
    --md            : 768px;
    --lg            : 992px;
    --xl            : 1200px;
    --xxl           : 1400px;

}

body {
    font-family     : Helvetica Neue, sans-serif, Droid Sans Fallback;
    /*font-size       : 0.9em;*/
    width           : 100%;
}
a {
    text-decoration : none;
    cursor          : pointer;
}
a[href^="tel"]::before {
    content: "📞 ";
}
a[href^="mailto"]::before {
    content: "📧 ";
}
a[href^="https"]::before, a[href^="http"]::before {
    --content: "🔗 ";
}
code {
    color           : var(--gray-600);
    font-style      : normal;
    font-family     : monospace, Droid Sans Fallback, Helvetica Neue, sans-serif;
    font-variant    : normal;
    font-size       : 1em;
}

input:not([type="submit"]):not([type=radio]), select {
    --tw-ring-color : var(--gray-400) !important
}

ul, ol {
    margin          : 0;
}
/* This tag is not a official html tag */
tab {
    padding-left    : 4ex;
}


/* Main page */
#index ul {
    -list-style-type : none;
}
#index li {
    position        : relative;
}
.page-icon {
    max-width       : 10rem;
}



/* Contextual styles */
.note,
.warning,
.example {
    position        : relative;
    margin          : 2em 0;
    padding         : 1em;
    border-radius   : .5rem;
}
.note,
.warning {
    font-style      : italic;
}
.note-title,
.warning-title,
.example-title {
    position        : absolute;
    top             : -1.2em;
    left            : -1em;
    padding         : 0.3em;
    -ms-transform   : rotate(-5deg); /* IE 9 */
    transform       : rotate(-5deg);
    font-style      : normal;
    font-size       : 0.75rem !important;
}

/* Megjegyzés */
/*.note {
    border          : 1px solid #DDFFDD;
}*/
/*.warning {
    background-color: #ffffca;
    color           : #f56565;
    border          : 1px solid #FFEEEE;
}*/

.note,
.example,
.warning {
    font-size       : 1rem !important;
}
.warning {
    font-weight     : bold;
}


.warning-title,
.note-title,
.example-title {
    font-weight     : bold;
}


.warning-title::before {
    content         : "Figyelem!";
}
.note-title::before{
    content         : "Megjegyzés";
}
.example-title::before {
    content         : "Példa";
}



/* Anchors */
.anchor-point {
    position        : relative;
}
.anchor-hook {
    position        : absolute;
    color           : var(--gray-500);
    text-decoration : none;
    left            : -1em;
    cursor          : pointer;
}
.anchor-hook::after {
    content         : "§";
}

/*
    Legördülő listanézet
    A content.js regisztrál minden .hidden-list-header osztályú elemre
    egy click eseményfigyelőt és, ha van utána .hidden-list-item
    osztályú elem, kezeli annak megjelenítését.
*/
.hidden-list-header {
    cursor          : pointer;
}
.hidden-list-item {
    display         : none;
    color           : var(--gray-700);
}
.hidden-list-header span,
.hidden-list-item span {
    font-size       : 0.8rem;
}

/* Mezei lista */
.tie-list * {
    text-overflow   : ellipsis;
    table-layout: fixed;
}
.tie-list-header {
    display         : block;
    text-decoration : none;
    color           : inherit;
}
.a.tie-list-header:hover::after {
    content         : " ▾";
}
.tie-list-item {
    list-style-type :  decimal;
}
.tie-list-item * {
    overflow        : hidden;
    text-overflow   : ellipsis;
}
.tie-list-item:hover {
    background-color: var(--orange-100);
}

/* Töréspont függő eltüntetés */
/*
    Bootstrap
    sm >= 576px
    md >= 768px
    lg >= 992px
    xl >= 1200px
    xxl>= 1400px
*/
@media (max-width: 575px) {
    .hide-sm {
        display         : none;
    }
}
@media (max-width: 767px) {
    .hide-md {
        display         : none;
    }
}
@media (max-width: 991px) {
    .hide-lg {
        display         : none;
    }
}
@media (max-width: 1199px) {
    .hide-xl {
        display         : none;
    }
}
@media (max-width: 1399px) {
    .hide-xxl {
        display         : none;
    }
}


/* --- FORMS  --- */
.tie-form {
    width           : 100%;
}
.tie-form th,
.tie-form td {
    padding         : 0.5em 2em 0.5em 0;
}
.tie-form > th:first-child,
.tie-form > td:first-child,
.tie-form > td:last-child {
    width           : max-content;
}
.tie-form label {
    color           : var(--gray-600);
}
.tie-form input, select {
    width           : 100%;

    /*
    padding         : 0.5rem 1em;
    appearance      : menulist-button;
    -moz-appearance : menulist-button;
    -webkit-appearance: menulist-button;
    */
}
input, select {
    border          : none;
    outline         : 1px solid var(--gray-300);
}
.tie-form input:focus, select:focus {
    box-shadow      : 0 0 1px var(--gray-300);
}
input:focus, select:focus {
    border          : none;
    outline         : none;
    border-color    : var(--gray-400);
}
.tie-form ul,
.tie-form ol {
    color           : var(--red-600);
}
.errorlist {
    list-style-type : none;
    padding         : 0 1rem;
}

/* TEXT */
.truncate {
    overflow: hidden;
    white-space: nowrap;
}

.text-ellipsis, .truncate {
    text-overflow: ellipsis;
}

.text-clip {
    text-overflow: clip;
}


.border-t-1 {border-top-width: 1px;}
.border-t-2 {border-top-width: 2px;}
.border-t-3 {border-top-width: 3px;}
.border-t-4 {border-top-width: 4px;}
.border-t-5 {border-top-width: 5px;}
.border-t-6 {border-top-width: 6px;}
.border-t-7 {border-top-width: 7px;}
.border-t-8 {border-top-width: 8px;}
.border-t-9 {border-top-width: 9px;}

.border-r-1 {border-right-width: 1px;}
.border-r-2 {border-right-width: 2px;}
.border-r-3 {border-right-width: 3px;}
.border-r-4 {border-right-width: 4px;}
.border-r-5 {border-right-width: 5px;}
.border-r-6 {border-right-width: 6px;}
.border-r-7 {border-right-width: 7px;}
.border-r-8 {border-right-width: 8px;}
.border-r-9 {border-right-width: 9px;}

.border-b-1 {border-bottom-width: 1px;}
.border-b-2 {border-bottom-width: 2px;}
.border-b-3 {border-bottom-width: 3px;}
.border-b-4 {border-bottom-width: 4px;}
.border-b-5 {border-bottom-width: 5px;}
.border-6-6 {border-bottom-width: 6px;}
.border-b-7 {border-bottom-width: 7px;}
.border-b-8 {border-bottom-width: 8px;}
.border-b-9 {border-bottom-width: 9px;}

.border-l-1 {border-left-width: 1px;}
.border-l-2 {border-left-width: 2px;}
.border-l-3 {border-left-width: 3px;}
.border-l-4 {border-left-width: 4px;}
.border-l-5 {border-left-width: 5px;}
.border-l-6 {border-left-width: 6px;}
.border-l-7 {border-left-width: 7px;}
.border-l-8 {border-left-width: 8px;}
.border-l-9 {border-left-width: 9px;}


.pulse {
    box-shadow: 0 0 0 rgba(204,169,44, 0.4);
    animation: pulse 2s infinite;
}
.pulse:hover {
    animation: none;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
    }
}
@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
        box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
        box-shadow: 0 0 0 10px rgba(204,169,44, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
        box-shadow: 0 0 0 0 rgba(204,169,44, 0);
    }
}