.bullet {
    --size        : 10px;
    border-radius : 50%;
    width         : var(--size);
    height        : var(--size);
    display       : inline-block;
}

.bullet.bigger {
    --size : 16px;
}

.bullet.big {
    --size : 20px;
}

.bullet.red {
    background-color : var(--red-color);
}

.bullet.green {
    background-color : var(--green-color);
}

.bullet.blue {
    background-color : var(--blue-color);
}

.bullet.orange {
    background-color : var(--orange-color);
}

.bullet.brown-pastel {
    background-color : var(--brown-pastel-color);
}

.bullet.gold {
    background-color : var(--main-gold-color);
}

.bullet.purple {
    background-color : var(--purple-color);
}

.bullet.turquoise {
    background-color : var(--turquoise-color);
}

.bullet.turquoise-light {
    background-color : var(--turquoise-light-color);
}

.bullet.corall {
    background-color : var(--corall-color);
}

.bullet.pink {
    background-color : var(--pink-color);
}


.bullet.black {
    background-color : #000;
}

/**
 * Drag & Drop File Upload
 */
.filedrop-area {
    display               : grid;
    border                : 3px dashed gray;
    margin                : 10px;
    align-items           : center;
    text-align            : center;
    transition            : background 0.4s ease;
    box-sizing            : border-box;
    grid-template-columns : 1fr;
    cursor                : pointer;
    
    &:hover {
        background : #ededed;
    }
}


.filedrop-area-dragover {
    background : #B8CEF0;
}

.filedrop-area span {
    font-size     : 1.2em;
    line-height   : normal;
    color         : gray;
    margin-bottom : 1rem;
}

.filedrop-area .button {
    margin-top : 1rem;
}

.filedrop-area input[type=file] {
    width    : 0.1px;
    height   : 0.1px;
    opacity  : 0;
    overflow : hidden;
    position : absolute;
    z-index  : -1;
}

.file-error-text {
    text-align  : left;
    color       : red;
    margin      : 1rem 0;
    font-weight : 600;
}


.filedrop-list {
    text-align : center;
}

.layout_v3 .filedrop-area svg {
    fill : gray;
}


.filedrop-list ul {
    padding : 0;
    margin  : 0 0 0 5px;
}

.filedrop-list ul li {
    list-style : none;
    margin     : 10px;
    width      : 190px;
    height     : 130px;
    float      : left;
    border     : 1px solid #bbb;
    background : #ddd;
    font-size  : 0.9rem;
}

.filedrop-list ul li .filedrop-list-name {
    display       : block;
    margin        : 0 10px;
    overflow      : hidden;
    white-space   : nowrap;
    text-overflow : ellipsis;
}

/**
 * Editable inputs which look like a text
 */
.inputEdit, .inputExit, .inputOk {
    display        : inline-block;
    width          : 16px;
    height         : 16px;
    vertical-align : middle;
    background     : url('/images/icomap.png') no-repeat 0 0;
}

.inputEdit {
    margin              : 3px 0 0 0;
    background-position : -128px -32px;
    opacity             : 0.6;
}

.inputExit {
    cursor              : pointer;
    margin              : 3px 0 0 0;
    background-position : -64px -16px;
    opacity             : 0.8;
}

.inputOk {
    cursor              : pointer;
    margin              : 3px 0 0 1px;
    background-position : -128px -48px;
    opacity             : 0.6;
}

/**
 * Clickable lists that has a selected row
 */
.clicklist tr td {
    cursor : pointer;
}

.clicklist tr.selected td {
    background : #FFFAC2;
}

.clicklist-row-marker {
    position      : absolute;
    top           : 20px;
    left          : -7px;
    border-left   : 4px solid gray;
    border-right  : none;
    border-top    : 4px solid transparent;
    border-bottom : 4px solid transparent;
    width         : 0;
    height        : 0;
    transition    : top 0.4s ease 0s;
}

/**
 * Tabs
 */
.tabbar {
    margin : 10px 0 0;
}

.tabbar:after {
    content : '';
    clear   : both;
    display : block;
}

.tabbar a {
    float                   : left;
    height                  : 20px;
    background              : #e6e6e6;
    margin                  : 2px 2px 0 2px;
    padding                 : 5px 10px;
    vertical-align          : baseline;
    text-decoration         : none;
    border                  : 1px solid #bbb;
    border-bottom           : 0;
    border-top-left-radius  : 5px;
    border-top-right-radius : 5px;
}

.tabbar a:first-child {
    margin-left : 10px;
}

.tabbar a:hover,
.tabbar a.selected {
    color          : #000;
    padding-bottom : 7px;
    margin-top     : 0;
    border-bottom  : 0 !important;
}

.tabbar a.selected {
    background    : linear-gradient(to bottom, #eee 0%, #fff 100%);
    margin-bottom : -1px;
    border-color  : #d5d5d5;
    border-bottom : 1px solid white !important;
}

/**
 * Cookie policy warning
 */
.cookie_policy {
    position   : fixed;
    left       : 0;
    bottom     : 0;
    transform  : translateY(100%);
    transition : all 0.4s ease 0s;
    width      : 100%;
    height     : 80px;
    background : rgba(0, 0, 0, 0.95);
    box-shadow : 0 0 6px black;
    z-index    : 999;
    box-sizing : content-box;
}

.cookie_policy.open {
    transform  : translateY(0);
    transition : unset;
}

.cookie_policy.open.no-anim {
    transition : unset;
}

.cookie_policy div {
    box-sizing : content-box;
}

.cookie_policy > div {
    width     : 980px;
    max-width : 100vw;
    margin    : 0 auto;
    color     : white;
    padding   : 10px;
}

.cookie_policy .cookie_text {
    line-height : 28px;
    font-size   : 17px;
    width       : 720px;
    float       : left;
}

.cookie_policy .cookie_buttons {
    width        : 245px;
    float        : right;
    margin-top   : 12px;
    padding-left : 15px;
    text-align   : right;
}

.cookie_policy button {
    color         : white;
    border        : 0;
    border-radius : 4px;
    padding       : 5px 15px;
    margin        : 0 3px;
}

.cookie_policy button.cookie_accept {
    background  : linear-gradient(to bottom, #FFD756, #D4A401) #FFD756;
    text-shadow : 1px 1px 2px #000;
    font-size   : 18px;
}

.cookie_policy button.cookie_accept:hover {
    background : linear-gradient(to bottom, #EEC949, #BB9000) #EEC949;
}

.cookie_policy button.cookie_read {
    background  : #666;
    text-shadow : 1px 1px 2px black;
    font-size   : 16px;
}

.cookie_policy button.cookie_read:hover {
    background : #555;
}

@media (max-width : 979px) {
    .cookie_policy > div {
        width : 90vw;
    }
    
    .cookie_policy .cookie_text {
        width       : calc(100vw - 120px);
        font-size   : 14px;
        line-height : 18px;
    }
    
    .cookie_policy button.cookie_read {
        display : none;
    }
    
    .cookie_policy .cookie_buttons {
        position : absolute;
        right    : 20px;
        width    : 100px;
    }
    
    .cookie_policy button.cookie_accept {
        font-size : 12px;
    }
}

@media (max-width : 400px) {
    .cookie_policy .cookie_text {
        width       : calc(100vw - 100px);
        font-size   : 11px;
        line-height : 16px;
    }
}

/**
 * Password strength indicator
 */
#pwdstrength {
    position   : relative;
    width      : 270px;
    height     : 30px;
    background : linear-gradient(to right, #6eb732 0%, #a1e34e 25%, #cbfe63 50%, #edfd69 65%, #ff0200 100%); /* W3C */
}

#pwdcontainer {
    right      : 0;
    top        : 0;
    font-size  : 1px;
    height     : 30px;
    position   : absolute;
    overflow   : hidden;
    transition : width 0.8s ease-out 0s;
    background : #E5E5E3;
}


#pwdtext {
    position    : absolute;
    left        : 0;
    top         : 4px;
    float       : left;
    width       : 100%;
    height      : 16px;
    padding     : 2px 0;
    line-height : 18px;
    text-align  : center;
    font-weight : bold;
}

/**
 * Pager
 */
.pager {
    margin-top      : 1rem;
    display         : flex;
    width           : auto;
    justify-content : right;
}

.pager td {
    padding : 0 5px;
}

.pager a {
    border-bottom : 0;
}

.pager td:not(.row) a:not(.pageCount),
.pager td:not(.row) span:not(.pageCount) {
    color         : inherit;
    display       : inline-block;
    padding       : 2px 10px;
    border        : 1px solid #DBDBDB;
    border-radius : 5px;
    background    : #F2F2F2;
    font-weight   : normal;
}

.pager .pageCount {
    color : #323130;
}

.pager td .number:first-child {
    margin-left : 0;
}

.pager td a.number,
.pager td span.number {
    margin-left : 5px;
    width       : 0.8rem;
    text-align  : center;
}

.pager td span {
    color : #cecece;
}

.pager td span.active {
    color  : #000;
    border : 1px solid #A8A8A8;
}

/**
 * Több lépéses űrlapok fejléce
 */
.wizard-steps {
    border        : 1px solid #d5d5d5;
    padding       : 3px;
    margin-bottom : 8px;
}

.wizard-steps table {
    width  : 100%;
    height : 83px;
}

.wizard-steps table td.done {
    background : url('../../images/wizard_title.png') right 0 no-repeat #f9ebc6;
}

.wizard-steps table td.prev {
    background : url('../../images/wizard_title.png') right -83px no-repeat #f9ebc6;
}

.wizard-steps table td.current {
    background : url('../../images/wizard_title.png') right -166px no-repeat #dfd0a9;
}

.wizard-steps table td.current:last-child {
    background : #dfd0a9;
}

.wizard-steps table td.next {
    background : url('../../images/wizard_title.png') right -166px no-repeat #efefef;
}

.wizard-steps table td.next:last-child {
    background : #efefef;
}

.wizard-steps table td {
    padding        : 2px 0 0 8px;
    vertical-align : top;
}

.wizard-steps table td[data-link] {
    cursor : pointer;
}

.wizard-steps table td div.bullet {
    color         : white;
    width         : 36px;
    height        : 27px;
    margin        : 22px 0 0 0;
    border-radius : 19px;
    font-size     : 26px;
    font-weight   : bold;
    text-align    : center;
    padding-top   : 9px;
    float         : left;
}

.wizard-steps table td.done:hover div.bullet,
.wizard-steps table td.prev:hover div.bullet {
    background-color : #855312;
}

.wizard-steps table td.done div.bullet,
.wizard-steps table td.prev div.bullet {
    background : #463f2d;
}

.wizard-steps table td.current div.bullet {
    background : #855312;
}

.wizard-steps table td.next div.bullet {
    background : #dad9d7;
}

.wizard-steps table td div.label,
.wizard-steps table td div.desc {
    float    : left;
    width    : 70%;
    width    : calc(100% - 65px);
    overflow : hidden;
}

.wizard-steps table td:last-child div.label,
.wizard-steps table td:last-child div.desc {
    width : 73%;
    width : calc(100% - 48px);
}

.wizard-steps table td div.label {
    font-size   : 18px;
    margin      : 9px 0 5px 8px;
    white-space : nowrap;
    line-height : 22px;
}

.wizard-steps table td div.desc {
    font-size   : 11px;
    margin-left : 8px;
    line-height : 13px;
    height      : 39px;
}

.wizard-steps table td.done div.label,
.wizard-steps table td.prev div.label,
.wizard-steps table td.done div.desc,
.wizard-steps table td.prev div.desc {
    color : black;
}

.wizard-steps table td.current div.label,
.wizard-steps table td.current div.desc {
    color : #655324;
}

.wizard-steps table td.next div.label,
.wizard-steps table td.next div.desc {
    color : #b9b9b9;
}

/**
 * iPhone-style slider for a two-state switcher
 */
.switcher {
    float         : right;
    position      : relative;
    width         : 60px;
    height        : 20px;
    border-radius : 10px;
    border        : 1px solid #999;
    background    : linear-gradient(to bottom, #ccc 0%, #eee 40%, #eee 100%);
    box-shadow    : 1px 1px 1px #999 inset;
    margin-bottom : 10px;
    cursor        : pointer;
}

.switcher div {
    position      : absolute;
    left          : 1px;
    top           : 1px;
    width         : 16px;
    height        : 16px;
    border-radius : 8px;
    border        : 1px solid #999;
    box-shadow    : 1px 1px 0 #999;
    background    : linear-gradient(to bottom, #a8d1f7 0%, #cfe6fc 50%, #99c1e8 51%, #6296c9 100%);
    transition    : left 0.3s linear 0s;
}

.switcher .switcherRight {
    left : 41px;
}


/**
 * Becsukható boxok
 */
.toggleBox {
    border        : 1px solid #D5D5D5;
    margin-bottom : 10px;
    /*box-shadow: 2px 2px 2px #e0e0e0;*/
}

.toggleBox-loading {
    position : relative;
}

.toggleBox-loading::after {
    position   : absolute;
    inset      : 0;
    background : #aaaaaa45;
    content    : ''
}

.toggleBox .toggleBoxTitle {
    padding        : 8px;
    margin         : 0;
    background     : linear-gradient(to bottom, rgba(252, 252, 252, 1) 0%, rgba(237, 237, 237, 1) 49%, rgba(232, 232, 232, 1) 51%, rgba(214, 214, 214, 1) 100%);
    color          : #303030;
    font-weight    : normal;
    text-transform : none;
    font-size      : 18px;
    line-height    : 18px;
    height         : 19px;
}

.toggleBox.clickable .toggleBoxTitle {
    cursor: pointer;
}

.toggleBox[data-openable='1'] .toggleBoxTitle {
    cursor : pointer;
}

.toggleBox .boxToggleState {
    position   : relative;
    top        : -1px;
    opacity    : 0.6;
    transition : transform ease 0.4s;
}

.toggleBox .boxTogglePartRadio > table {
    width      : 100%;
    min-height : 100px;
}

.toggleBox .boxTogglePartRadio table tr td {
    /*width:50%;*/
    vertical-align : top;
    border-right   : 1px solid #d5d5d5;
    cursor         : pointer;
    position       : relative;
}

.toggleBox .boxTogglePartRadio table tr td:hover {
    box-shadow : 0 0 24px rgba(0, 0, 0, 0.08) inset;
}

.toggleBox .boxTogglePartRadio table tbody tr td:last-child {
    border-right : none;
}

.toggleBox .boxTogglePartRadio table tr td div:first-child {
    position : absolute;
    top      : calc(50% - 37px);
    left     : 31px;
}


.toggleBox .boxTogglePartRadio table tr td div:last-child {
    margin : 30px 30px 30px 110px;
}

.toggleBox .boxTogglePartRadio > table > tbody > tr > td div:last-child h3 {
    font-size   : 1.7em;
    color       : #262626;
    margin      : 0 0 20px 0;
    font-weight : 600;
}

.toggleBox .boxTogglePartRadio > table > tbody > tr > td div:last-child h3:before {
    display : none;
}


/**
 * Nagy méretű checkboxok
 */
label.modernRadio {
    font-size : 1.65em;
    cursor    : pointer;
}

label.modernRadio input[type=radio],
label.modernRadio input[type=checkbox] {
    opacity : 0;
}

label.modernRadio input[type=radio] + span,
label.modernRadio input[type=checkbox] + span {
    background     : url('../../images/layout_v3/modern_tick.png') no-repeat 0 -64px;
    display        : inline-block;
    width          : 64px;
    height         : 64px;
    vertical-align : middle;
    margin-left    : -26px;
    margin-top     : 5px;
    position       : relative;
    top            : -8px;
}

label.modernRadio input.error[type=radio] + span,
label.modernRadio input.error[type=checkbox] + span {
    background-position : -64px -64px;
}

label.modernRadio input[type=radio]:checked + span,
label.modernRadio input[type=checkbox]:checked + span {
    background-position : 0 0;
}

label.modernRadio input.error[type=radio]:checked + span,
label.modernRadio input.error[type=checkbox]:checked + span {
    background-position : -64px 0;
}


.ui-menu-item-wrapper {
    display : block;
}