@font-face {
    font-family: 'text-security-circle';
    src: url('../dist/text-security-circle.eot');
    src: url('../dist/text-security-circle.eot?#iefix') format('embedded-opentype'), url('../dist/text-security-circle.woff2') format('woff2'), url('../dist/text-security-circle.woff') format('woff'), url('../dist/text-security-circle.ttf') format('truetype'), url('../dist/text-security-circle.svg#text-security') format('svg');
}

@font-face {
    font-family: 'text-security-square';
    src: url('../dist/text-security-square.eot');
    src: url('../dist/text-security-square.eot?#iefix') format('embedded-opentype'), url('../dist/text-security-square.woff2') format('woff2'), url('../dist/text-security-square.woff') format('woff'), url('../dist/text-security-square.ttf') format('truetype'), url('../dist/text-security-square.svg#text-security') format('svg');
}

@font-face {
    font-family: 'text-security-disc';
    src: url('../dist/text-security-disc.eot');
    src: url('../dist/text-security-disc.eot?#iefix') format('embedded-opentype'), url('../dist/text-security-disc.woff2') format('woff2'), url('../dist/text-security-disc.woff') format('woff'), url('../dist/text-security-disc.ttf') format('truetype'), url('../dist/text-security-disc.svg#text-security') format('svg');
}


/* Clearfix */

.pwd_i {
    -webkit-text-security: disc;
    font-family: text-security-disc !important;
}

.pwd_i::placeholder {
    font-weight: 300;
    font-family: 'Open Sans', sans-serif !important;
    outline: none;
    text-align: center;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* Firefox */

input[type=number] {
    -moz-appearance: textfield;
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

 ::-webkit-scrollbar {
    width: 0.7vw;
    height: 0.7vw;
    border-radius: 10px;
}

 ::-webkit-scrollbar-track {
    background: #d0d0d0;
    opacity: 0;
    border-radius: 10px;
}

 ::-webkit-scrollbar-thumb {
    background: #333;
    opacity: 0.1 !important;
    border-radius: 10px;
}

 ::-webkit-scrollbar-thumb:hover {
    opacity: 0.8;
    border-radius: 10px;
}

body,
html {
    width: 100%;
    height: 100%;
    margin: 0px;
    left: 0px;
    font-family: 'Open Sans', sans-serif;
    background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(229, 229, 229));
    overflow-x: hidden;
}

input,
textarea,
button,
h1 {
    font-weight: 300;
    font-family: 'Open Sans', sans-serif !important;
    outline: none;
    text-align: center;
}

a {
    text-decoration: none !important;
}

hr {
    margin: 1vw 3vw;
    border: none;
    border-top: solid 1px lightgray;
}

input,
select,
textarea {
    margin: 1vw;
}

select {
    text-align-last: center;
    width: 15vw;
}

button {
    height: 3vw;
    color: #ffffff;
    text-align: center;
    border: 0px solid #fff;
    background: #1a57a8;
    box-shadow: 0px 0px 2px #ddd;
    width: calc(25vw + 4px);
    line-height: 3vw;
    border-radius: 1vw;
    font-size: 1vw;
    cursor: pointer;
}

.content a {
    color: #333 !important;
}

#header {
    position: relative;
    width: 100%;
    height: 20vw;
    background-repeat: none;
    background-size: 100% 100%;
    background-position: bottom center;
}

.box {
    z-index: 1;
    width: 100%;
    /* height: 100%; */
    margin: 40px auto;
    margin: 0;
    /* z-index: -1;*/
}

.effect2 {
    position: relative;
}

.effect2:before,
.effect2:after {
    top: -3vw;
    /* z-index: -1; */
    position: absolute;
    content: "";
    /* bottom: 15px; */
    left: -9px;
    width: 100vw;
    height: 3vw;
    /* top: -53%; */
    /* max-width: 300px; */
    /* background: #777; */
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 55px -2px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
    right: -1vw;
    left: -1vw;
}

.effect2:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: -1vw;
    left: auto;
}

.menu {
    position: fixed;
    height: 3vw;
    background: #1a57a8;
    width: 100%;
    line-height: 3vw;
    font-size: 1.5vw;
    color: #ffffff;
    text-align: right;
    padding: 0px 1vw;
    box-sizing: border-box !important;
    z-index: 100;
}

.menu span {
    float: left;
}

.menu .circle-header {
    margin: auto;
    position: absolute;
    left: calc(50% - 5vw);
    top: -3.5vw;
    cursor: pointer;
}

.menu-fill {
    position: fixed;
    top: 0;
    height: 1vw;
    width: 100%;
    background: white;
    z-index: 1;
}

.menu a {
    color: #fff;
    margin: 0px 2vw;
}

.menu img {
    float: right;
    height: 1.5vw;
    margin: 0.8vw 1vw 0px -1vw;
}

.menu_logo {
    float: left !important;
    height: 2vw !important;
    margin: 0px 0px 0px 1.5vw !important;
    padding: 0.5vw !important;
    cursor: pointer;
}

.logo {
    position: absolute;
    top: 0vw;
    left: 2vw;
    height: 7vw;
    width: auto;
    z-index: 200;
}

.logo img {
    height: 100%;
}

.content {
    position: relative;
    top: 0px;
    left: 0px;
    width: 96vw;
    height: auto;
    margin: -10vw -2vw 2vw 2vw;
    min-height: 50vh;
    text-align: center;
}

.scroll-content {
    height: 70vh;
    overflow-y: scroll;
}

.scroll-content-b {
    /* Al20210107*/
    height: 75vh;
    /* Al20210107*/
    overflow-y: auto;
    /* Al20210107*/
    margin-top: -13vw;
    /* Al20210107*/
}

body {
    text-align: center;
}

.login {
    background: transparent;
    border: none;
    border-bottom: 1px solid black;
    width: 25vw;
}


/* The Modal (background) */

.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 100;
    /* Sit on top */
    padding-top: 20vh;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 30%;
    text-align: center;
    max-height: 80vh;
}

.modal-content input:focus {
    outline: none;
}

.modal-inner {
    overflow-y: scroll;
    max-height: 60vh;
    overflow-x: hidden;
}

#delModal .modal-content,
#activateModal .modal-content,
#unblockModal .modal-content,
#blockModal .modal-content,
#excelModal .modal-content,
.modal2 .modal-content {
    height: 20vh;
}

#delModal button,
#unblockModal button,
#blockModal button,
#excelModal button,
#pwdModal button,
#activateModal button,
.modal-label-button {
    width: 12vw !important;
    margin-top: 2vw !important;
}

.modal2 input {
    margin: 1.4vw;
    margin-left: 3vw;
    margin-right: 3vw;
    width: 80%;
    border-radius: 1vw;
    border: 1px solid #c8c8c8;
    padding: 0;
    padding-left: 2vw;
    padding-right: 2vw;
    font-size: 0.8vw;
    line-height: 2vw;
}

#kiadasModal button {
    width: 12vw;
    margin-top: 2vw;
    margin-right: 1vw;
}

#sztornoModal button {
    width: 12vw;
    margin-top: 2vw;
    margin-right: 1vw;
}

#logoutModal .modal-content {
    height: 20vh;
}

#logoutModal button {
    width: 12vw;
    margin-top: 2vw;
}


/* The Close Button */

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.footer {
    width: 100%;
    /*height: 20vw;*/
    margin-top: -5vw;
    z-index: 10;
    bottom: 0;
    position: absolute;
}

.organizer_logo {
    position: absolute;
    bottom: 1vw;
    left: 3vw;
    width: auto;
    z-index: 200;
}

.organizer_logo img {
    height: 4vw;
}

.footer_menu {
    position: absolute;
    bottom: 0;
    right: 3vw;
    height: 2vw;
    line-height: 2vw;
    font-size: 0.6vw;
    text-align: right;
    width: auto;
    color: #333;
}

.footer_menu a {
    color: #333;
}

#background-overlay {
    height: 100%;
    width: 100vw;
    background-image: url(../images/bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
    position: absolute;
    top: 0;
    right: 0;
}

.passcode {
    background: transparent;
    border: none;
    border-bottom: 1px solid black;
    width: 2.5vw;
    text-align: center;
    font-size: 1vw;
    margin: calc(1vw - 2px);
}

.circle {
    width: 7vw;
    height: auto;
}

.circle-header {
    width: 10vw;
    height: 10vw;
    background: white;
    border-radius: 25vw;
}

.circle-center {
    width: 9vw;
    height: 9vw;
    background: #1a57a8;
    border-radius: 25vw;
    position: absolute;
    left: calc(50% - 4.5vw);
    top: .5vw;
}

.circle-shadow {
    width: 10vw;
    height: 10vw;
    background: white;
    border-radius: 25vw;
    position: absolute;
    left: calc(50% - 4.5vw);
    top: .5vw;
    box-shadow: 0px 2px 3px #8c8c8c;
    margin: auto;
    position: absolute;
    left: calc(50% - 5vw);
    top: -3.5vw;
}

.circle-center img {
    height: 6vw;
    width: 6vw;
    margin: unset;
    margin: 0;
    float: unset;
    position: absolute;
    /* z-index: 100; */
    left: calc(50% - 3vw);
    top: 2.5vw;
}

.contents_row_c {
    position: relative;
    height: 14vw;
    width: 14vw !important;
    margin: 0vw 1vw 2vw 1vw;
    float: left;
    background: #8c8c8c;
    border-radius: 1.5vw;
    cursor: pointer;
}

.contents_row_c:hover {
    background: #1a57a8;
}

.contents_card {
    /* border: 1px solid #ddd; */
    /* padding: 0.5vw; */
    line-height: normal;
    text-align: center;
    margin-bottom: 3vw;
    height: 15vw;
    position: relative;
    color: white;
    font-size: 1vw;
}

.card_img {
    width: 100%;
    padding-bottom: 0.5vw;
    width: 75%;
}

.card_title {
    text-transform: uppercase;
    font-size: 1vw;
}

.rounded-square {
    position: relative;
    height: 6vw;
    width: 6vw !important;
    margin-left: 1vw;
    position: absolute;
    float: left;
    background: #1a57a8;
    border-radius: 1.5vw;
    cursor: pointer;
    text-align: center;
    z-index: 100;
}

.rounded-square img {
    width: 75%;
    margin-top: 0.5vw;
}

.search-bar {
    display: flex;
    height: 6vw;
    width: 100%;
}

.search-bar input {
    margin: 1.4vw;
    width: 130vw;
    border-radius: 1vw;
    border: 1px solid #c8c8c8;
    padding: 0;
    padding-left: 6vw;
    padding-right: 6vw;
}

.search-bar .search-button {
    position: absolute;
    right: 15vw;
    display: inline-block;
    width: calc(6vw - 1.4vw - 1.4vw);
}

.search-bar button {
    margin: 1.4vw;
    height: calc(6vw - 1.4vw - 1.4vw);
}

.search-bar button img {
    width: 90%;
}

.search-bar-n {
    /*Al20210107*/
    height: 3vw;
    height: 2.5vw;
    /*Al20210107*/
}


/*Al20210107*/

.search-bar-r {
    height: 3vw;
    display: inline-block;
    /*	padding:0 3vw;*/
    width: unset;
    font-size: 0.8vw;
}

.search-bar-r input {
    width: 21.1vw;
    margin: 0.4vw 0.4vw 0.4vw 2.4vw;
    height: 1.5vw;
    padding-left: 4vw;
    padding-right: 4vw;
}

.search-bar-r .search-button {
    display: inline-block;
    width: calc(6vw - 1.4vw - 1.4vw);
    right: unset;
    top: -0.5vw;
}

.search-bar-r label {
    /*margin: 0.4vw 0vw 1.4vw 0vw;
    line-height: 2vw;
	font-size: 1.5vw;*/
    margin: 0.4vw 0vw 0.4vw 0vw;
    white-space: nowrap;
    padding: 0.9vw 0.9vw 0.9vw 0vw;
    line-height: 0.5vw;
    font-size: 1vw;
    width: 13vw;
    text-align: left;
    height: 0.5vw;
}

.search-bar-r button {
    margin: 0.4vw;
    height: calc(6vw - 1.4vw - 1.4vw);
    position: relative;
}

.termektipus-csomagolo {
    padding: 0 3%;
    display: inline-block;
    text-align: justify;
    width: 94%;
}

.input-bar {
    display: flex;
    height: 6vw;
    width: 100%;
}

.input-bar input {
    margin: 1.4vw;
    margin-left: 3vw;
    margin-right: 3vw;
    width: 100%;
    border-radius: 1vw;
    border: 1px solid #c8c8c8;
    padding: 0;
    padding-left: 2vw;
    padding-right: 2vw;
    font-size: 0.8vw;
    /*al20210106*/
}

.input-bar select {
    margin: 1.4vw;
    margin-left: 3vw;
    margin-right: 3vw;
    width: 100%;
    border-radius: 1vw;
    border: 1px solid #c8c8c8;
    padding: 0;
    padding-left: 3vw;
    padding-right: 2vw;
}


/*al20210106*/

.input-bar-withlabel {
    /*Al20210107*/
    padding: 0vw 3%;
    /*Al20210107*/
    width: 94%;
    /*Al20210107*/
    height: 2.3vw;
    /*Al20210107*/
}


/*Al20210107*/

.input-bar-withlabel input:last-child {
    /*Al20210107*/
    margin-right: 0vw;
    /*Al20210107*/
}


/*Al20210107*/

.input-bar-withlabel input {
    margin: 0.4vw 1% 0.4vw 1%;
    /*Al20210107*/
    width: 71.5%;
    border-radius: 1vw;
    border: 1px solid #c8c8c8;
    padding: 0;
    padding-left: calc(2vw + 14px);
    padding-right: 2vw;
    height: 1.5vw;
    /*Al20210107*/
}

.input-bar-withlabel label {
    margin: 0.4vw 0vw 0.4vw 0vw;
    /*Al20210107*/
    white-space: nowrap;
    padding: 0.4vw 0.9vw 0.4vw 0vw;
    /*Al20210107*/
    line-height: 0.5vw;
    /*Al20210107*/
    font-size: 1vw;
    width: 13vw;
    text-align: left;
    height: 0.5vw;
    /*Al20210107*/
}

.input-bar-withlabel2 label {
    margin: 0.4vw 0vw 0.4vw 0vw;
    white-space: nowrap;
    padding: 0.4vw 0.9vw 0.4vw 0vw;
    line-height: 4vw;
    font-size: 1vw;
    width: 13vw;
    text-align: left;
    height: 4vw;
}

.input-bar-withlabel select {
    margin: 1.4vw;
    margin-left: 3vw;
    margin-right: 3vw;
    width: 100%;
    border-radius: 1vw;
    border: 1px solid #c8c8c8;
    padding: 0;
    padding-left: 3vw;
    padding-right: 2vw;
}

.input-bar-withlabel-s {
    /*Al20210107*/
    height: 3vw;
    /*Al20210107*/
}


/*Al20210107*/

.input-bar-withlabel-s input {
    margin: 0.4vw 1.4vw;
    /*Al20210107*/
    margin-right: 3vw;
    width: 80.5%;
    /*Al20210107*/
    border-radius: 1vw;
    border: 1px solid #c8c8c8;
    padding: 0;
    padding-left: calc(2vw + 14px);
    padding-right: 2vw;
}

.input-bar-withlabel-s label {
    margin: 0.4vw 0vw 0.4vw 3vw;
    /*Al20210107*/
    white-space: nowrap;
    padding: 0.8vw;
    line-height: 0.5vw;
    /*Al20210107*/
    font-size: 1vw;
    width: 5.5vw;
    text-align: left;
}

.input-bar-withlabel-s select {
    margin: 1.4vw;
    margin-left: 3vw;
    margin-right: 3vw;
    width: 100%;
    border-radius: 1vw;
    border: 1px solid #c8c8c8;
    padding: 0;
    padding-left: 3vw;
    padding-right: 2vw;
}

.input-bar-withlabel-col-1 input {
    width: 110vw;
}

.input-bar-2col input {
    width: 22%;
}

.input-bar-2col-s input {
    width: 30%;
}

.input-bar-withlabel-col-3b input {
    width: 23%
}

.input-bar-withlabel-col-3b label {
    width: 10%
}

.input-bar-withlabel-col-3 input {
    margin-left: 0vw;
    margin-right: 0vw;
}

.col-3-starter {
    margin-left: 8vw !important;
}

.col-3-end {
    margin-right: 3vw !important;
}


/*end al20210106*/

#datepicker-container {
    width: 100%;
    text-align: center;
    position: absolute;
    margin: auto;
    top: 30%;
}

#datepicker-center {
    display: inline-block;
    margin: 0 auto;
}

.input-err {
    border-bottom: 2px solid red;
}

.input-succ {
    border-bottom: 2px solid green;
}


/*LIST*/

.linelist {
    margin-left: 1vw;
    margin-right: calc(1vw - 0.7vw);
    margin-top: 0.5vw;
    text-align: left;
    font-size: 0.8vw;
    line-height: 1.5vw;
    height: 1.5vw;
    position: relative;
    background: #fff;
    color: #000;
    padding: 0px 1vw;
    cursor: pointer;
}

.open {
    border-bottom: none;
}

.linelist-dropdown {
    width: 80%;
    margin: 0px 10%;
    text-align: left;
    font-size: 1vw;
    line-height: 2.5vw;
    height: auto;
    position: relative;
    background: #fff;
    color: #000;
    padding: 0px 1vw;
    border-bottom: 1px solid #aaa;
}

.linelist-title {
    margin-left: 1vw;
    margin-right: 1vw;
    margin-top: 3vw;
    text-align: left;
    font-size: 1vw;
    /*font-weight: bold;*/
    line-height: 2vw;
    height: 2vw;
    position: relative;
    background: #1a57a8;
    color: white;
    padding: 0px 1vw;
    border-bottom: 1px solid #aaa;
}

.linelist-title-small {
    margin-top: 0.5vw;
    line-height: 1.5vw;
    height: 1.5vw;
}

.linelist-title.short,
.linelist.short {
    margin-left: 3vw;
    margin-right: 3vw;
}

.dropdown-row-title {
    display: inline-block;
    width: 30%;
    vertical-align: top;
}

.dropdown-row-value {
    display: inline-block;
    width: 70%;
}

.linelist-details {
    width: 80%;
    margin: 0px 10%;
    text-align: left;
    font-size: 1vw;
    line-height: 2.5vw;
    height: auto;
    position: relative;
    background: rgb(150, 149, 149);
    color: #000;
    padding: 0px 1vw;
    border-bottom: 1px solid #aaa;
}

.linelist button {
    min-width: 5vw;
    font-size: 0.8vw;
    height: 1vw;
    float: right;
    margin: 0.25vw 1vw 0px 0px;
    line-height: 1vw;
    width: 8vw;
    font-weight: bold;
}

.linelist input,
.linelist-title input {
    width: auto !important;
    min-width: 5vw;
    font-size: 1vw;
    height: 1.5vw;
    float: right;
    margin: 0.5vw 1vw 0px 0px;
}

.linelist img {
    width: auto !important;
    font-size: 1vw;
    height: 1vw;
    float: right;
    margin: 0.25vw 1vw 0px 0px;
}

.linelist-title img {
    width: auto !important;
    font-size: 1vw;
    height: 1.5vw;
    float: right;
    margin: 0.5vw 1vw 0px 0px;
}

.sort-img {
    cursor: pointer;
}

.sort-img-asc {
    float: left;
    position: absolute;
    /*margin: 0.8vw 0.5vw 0px 0px !important;
    */
    margin: 0 !important;
    height: 0.75vw !important;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    top: 0.2vw;
    fill: white !important;
}

.sort-img-desc {
    float: left;
    position: absolute;
    /*margin: 0.8vw 0.5vw 0px 0px !important;
    */
    margin: 0 !important;
    height: 0.75vw !important;
    bottom: 0.2vw;
    fill: white !important;
}

.linelist-li {
    font-size: 1vw;
    line-height: 2.5vw;
    height: 2.5vw;
    position: relative;
    background: #fff;
    color: #000;
    padding: 0px 1vw;
    border-bottom: 1px solid #aaa;
    cursor: pointer;
    width: auto;
}

.linelist .checkmark {
    margin: 0vw 1vw 0px 0px;
    width: 1vw;
    height: 1vw;
    float: right;
    position: static !important;
}

.linelist-title .checkmark {
    margin: 0.25vw 1vw 0px 0px;
    width: 1vw;
    height: 1vw;
    float: right;
    position: static !important;
}

.linelist .container,
.linelist-title .container {
    line-height: 3vw;
    display: block;
    /* position: relative; */
    /* padding-left: 35px; */
    /* margin-bottom: 12px; */
    cursor: pointer;
    /* font-size: 22px; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-bottom: 0vw;
}

.linelist .container .checkmark:after,
.linelist-title .container .checkmark:after {
    /* left: 20px; */
    float: left;
    top: 2px;
    margin-left: 0.2vw;
    margin-top: 0vw;
    width: 0.2vw;
    height: 0.5vw;
    border: solid #1a57a8;
    border-width: 0 0.35vw 0.35vw 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: static !important;
}

.checkmark-small {
    margin: 0.5vw 1vw 0px 0px !important;
    width: 1vw !important;
    height: 1vw !important;
    top: -0.5vw !important;
    margin-left: 0vw !important;
    left: unset !important;
}

.container .checkmark-small:after,
.container .checkmark-small:after {
    /* left: 20px; */
    float: left;
    top: 2px !important;
    margin-left: 0.2vw !important;
    margin-top: 0vw !important;
    width: 0.2vw !important;
    height: 0.5vw !important;
    border: solid #1a57a8;
    border-width: 0 0.35vw 0.35vw 0 !important;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: static !important;
}

.day-container .checkmark-small {
    margin-top: 0.25vw !important;
}

.linelist-title .checkmark,
.linelist-title .checkmark:after {
    border: solid white;
}

.mrgray {
    background: #dddddd;
}

.scroll-list {
    overflow-y: scroll;
    height: 20vw;
}


/*LOADER*/

.loader {
    border: 10px solid #f3f3f3;
    /* Light grey */
    border-top: 10px solid #3498db;
    /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    margin: 0 auto;
}

.loader-small {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin-top: 1vw;
}


/*CHECKBOX*/

.container {
    line-height: 1.5vw;
    display: block;
    position: relative;
    /* padding-left: 35px; */
    /* margin-bottom: 12px; */
    cursor: pointer;
    /* font-size: 22px; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-bottom: 2vw;
}

.container-b {
    /* Al20210107 */
    margin-bottom: 0.5vw;
    /* Al20210107 */
    margin-top: 0.5vw;
    /* Al20210107 */
}


/* Al20210107 */

.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    *height: 13px;
    *width: 13px;
}

.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.container input:checked~.checkmark:after {
    display: block;
}

.checkmark {
    position: absolute;
    left: 42vw;
    height: 2vw;
    width: 2vw;
    border: 0.2vw solid #1a57a8;
    background-color: #ffffff;
    border-radius: 2vw;
}

.container .checkmark:after {
    left: 0.5vw;
    top: 2.25px;
    width: 0.5vw;
    height: 1vw;
    border: solid #1a57a8;
    ;
    border-width: 0 0.4vw 0.4vw 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.container input:checked~.checkmark:after {
    display: block;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.container .title {
    margin-left: 4vw;
}


/*LOAD*/

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.empty-input {
    /*background-color: rgb(255, 133, 152) !important;*/
    border-color: #A81A1A !important;
}


/*    
    .inline-div {
        display: inline-block;
        width: 48%;
        vertical-align: top;
    }
    
    
    #termektipus input[type=text],
    input[type=number] {
        width: 50%;
    }
    
    #termektipus textarea {
        width: 40%;
    }
    
    .sortable {
        list-style: none;
        width: 49%;
        display: inline-block;
        padding-left: 0px;
        min-height: 30vw;
        vertical-align: top;
        border: 1px solid black;
    }*/


/*FILE UPLOAD*/

input[type="file"] {
    display: none;
}

.custom-file-upload {
    height: 3vw;
    color: #ffffff;
    text-align: center;
    border: 0px solid #fff;
    background: #1a57a8;
    box-shadow: 0px 0px 2px #ddd;
    width: calc(25vw + 4px);
    line-height: 3vw;
    border-radius: 1vw;
    font-size: 1vw;
    margin: auto;
    display: block;
    margin-bottom: 2vw;
}


/*TAJ*/

.taj-Z {
    color: green;
}

.taj-P {
    color: red;
}

.taj-K {
    color: blue;
}

.taj-B {
    color: brown;
}

.taj-S {
    color: darkorange;
}


/*CALENDAR*/

#cal,
#cal2 {
    /* width: 106vw; */
    width: 28vw;
    margin: auto;
    /*border: 1px solid #404040;*/
    -moz-box-shadow: 0 0 3px #404040;
    -webkit-box-shadow: 0 0 3px #404040;
    box-shadow: 0 0 3px #404040;
    position: absolute;
    margin-left: calc(50% - 14vw);
    top: 0;
    background: white;
    height: 29.5vw;
    z-index: 1000;
}


/*rog Calendar*/

#rog_calendar,
#rog_calendar2 {
    width: 100vw;
    height: 100vh;
    background-color: #f8f8f8;
    position: fixed;
    top: 0vw;
    z-index: 1001;
    display: none;
}

#rog_cal_head,
#rog_cal_head2 {
    width: 100%;
    padding: 1vw;
    box-sizing: border-box;
    display: inline-block;
    height: 3vw;
    position: relative;
    text-align: center;
    vertical-align: middle;
    background-color: #404040;
}

#rog_cal_day_item_list,
#rog_cal_day_item_list2 {
    position: absolute;
    left: 0vw;
    padding: 0px;
    position: relative;
    width: 100vw;
    padding: 0px;
    height: auto;
    max-height: 81vw;
    box-sizing: border-box;
    font-size: 4vw;
    text-align: center;
    overflow-y: scroll;
    color: #afafaf;
    font-weight: bold;
}

#rog_cal_bottombar,
#rog_cal_bottombar2 {
    position: fixed;
    bottom: 0vw;
    height: 25vw;
    width: 100vw;
    background-color: #fff;
}

#rog_cal_back_button,
#rog_cal_back_button2 {
    width: 40vw;
    border-radius: 0vw;
    margin: 6vw;
}

#rog_calt_month,
#rog_calt_month2 {
    font-size: 1vw;
    line-height: 1vw;
    position: relative;
    width: 23vw;
    /* height: 4vw; */
    font-weight: bold;
    color: white;
    display: inline-block;
    background-color: #404040;
}

#rog_daynames,
#rog_daynames2 {
    /* padding: 0vw 8vw; */
    width: 100%;
    height: 2vw;
    display: inline-block;
    background-color: #fff;
    /* margin: auto; */
    background: #404040;
    margin-bottom: 0.5vw;
    -webkit-box-shadow: 0 8px 6px -6px #404040;
    -moz-box-shadow: 0 8px 6px -6px #404040;
    box-shadow: 0 8px 6px -6px #404040;
}

.rog_calday_name {
    width: 4vw;
    height: 2vw;
    float: left;
    text-align: center;
    font-size: 1vw;
    /* line-height: 6vw; */
    box-sizing: border-box;
    color: white;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    /* background: black; */
    /* margin-bottom: 0.5vw;*/
}

#rog_cal_days,
#rog_cal_days2 {
    position: relative;
    width: 28vw;
    /* padding: 0vw 8vw 5vw; */
    height: auto;
    background-color: #fff;
    margin-top: 0vw;
    display: inline-block;
    /* padding-bottom: 5vw;*/
}

.rog_calday {
    width: 2vw;
    height: 2vw;
    float: left;
    text-align: center;
    font-size: 1vw;
    box-sizing: border-box;
    color: #383435;
    cursor: pointer;
    overflow: visible;
    position: relative;
    line-height: 2vw;
    margin: 1vw;
}

.rog_firstDayOfWeek {
    clear: left;
}

.rog_cal_select {
    background: #ff7750;
    border-radius: 4vw;
    color: #fff !important;
    height: 2vw;
    width: 2vw;
    margin: 1vw;
    /*font-weight: bold;*/
}

.rog_caltoday {
    /*font-weight: bold;*/
    font-size: 1vw;
    border-radius: 4vw;
    height: 2vw;
    width: 2vw;
    /* margin: 0vw 2vw 0vw; */
    line-height: 1.8vw;
    border: 0.2vw solid #ff7750;
    /*top: -0.2vw;*/
    margin: 1vw;
}

#prebtn,
#prebtn2 {
    width: 0.75vw;
}

#nxtbtn,
#nxtbtn2 {
    width: 0.75vw;
}

.ugyfelNap {
    font-weight: bold !important;
    color: #ff7750 !important;
}

.tab button {
    width: calc(100% / 3) !important;
    text-align: center;
    box-shadow: none;
    border-radius: 0 !important;
    font-size: 1vw;
    height: 2vw;
    line-height: 2vw;
    background: white;
    color: black;
    /*background: #1a57a8;*/
}

.tab .half-width {
    width: 50% !important;
}

.tab .fifth-width {
    width: calc(100% / 5) !important;
}

.tab .fourth-width {
    width: calc(100% / 4) !important;
}

.tab {
    height: 2vw;
}


/* Style the tab */

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    margin-left: 1vw;
    margin-right: 1vw;
    margin-top: 1vw;
}

.tab-container {
    /* border: 1px solid; */
    margin-left: calc(3vw + 2px);
    margin-right: calc(3vw + 2px);
    /* box-shadow: 0 0 black; */
    box-shadow: 0px 0px 4px #8c8c8c;
    padding-bottom: 1vw;
    padding-top: 1vw;
    margin-bottom: 1vw;
    /*Al20210107*/
}

.tab-container .checkmark {
    left: 39vw;
}


/* Style the buttons inside the tab */


/* Change background color of buttons on hover */

.tab button:hover {
    background: #1a57a8;
    color: white;
    /*   background-color: #144381;*/
}


/* Create an active/current tablink class */

.tab button.active {
    background-color: #1a57a8;
    color: white;
}


/* Style the tab content */

.tabcontent {
    display: none;
}

.red-button {
    background-color: #a81b24;
}

.green-button {
    background-color: #1ba825;
}

.right-button {
    float: right;
    width: 15vw;
    margin-left: 1vw;
    font-size: 1.6vw;
    font-weight: bold;
    margin-top: 1.4vw;
    margin-bottom: 1.4vw;
    position: absolute;
    height: calc(3vw + 2px);
    margin-right: 3vw;
}

.right-button img {
    vertical-align: middle;
    bottom: 4px;
    position: relative;
}


/*SELECT*/

.arrow-down {
    width: 0;
    height: 0;
    border-left: 1vw solid transparent;
    border-right: 1vw solid transparent;
    border-top: 1vw solid #1a57a8;
    position: absolute;
    right: 3vw;
    top: 1.2vw;
    display: inline-block;
    margin: 1.4vw;
}

.select-arrow-active {
    top: 0vw;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 1vw solid transparent;
    border-right: 1vw solid transparent;
    border-top: 1vw solid #1a57a8;
    position: absolute;
    right: 3vw;
    top: 1.2vw;
    display: inline-block;
    margin: 1.4vw;
    cursor: pointer;
}


/*the container must be positioned relative:*/

.custom-select {
    position: relative;
    margin: 1.4vw;
    width: 130vw;
    border-radius: 1vw;
    border: 1px solid #c8c8c8;
    padding: 0;
    background: white;
    margin-left: 3vw;
    margin-right: 3vw;
}

.custom-select select {
    display: none;
    /*hide original SELECT element:*/
}


/*al20210106*/

.custom-select-withlabel {
    margin: 0.4vw 1.4vw;
    /* Al20210107*/
    margin-right: 3vw;
    width: 71.5%;
    border-radius: 1vw;
    border: 1px solid #c8c8c8;
    padding: 0;
    padding-left: 2vw;
    padding-right: 2vw;
}

.custom-select-3-col {
    width: 100%;
    height: 2vw;
    /* Al20210107*/
    line-height: 2.5vw;
    /* Al20210107*/
}


/*end al20210106*/

.select-selected {
    background-color: white;
    color: black;
    border-radius: 1vw;
    height: 2.9vw;
    background: transparent;
    padding-right: 3vw;
    padding-left: 3vw
}


/*style the arrow inside the select element:*/

.select-selected:after {
    position: absolute;
    content: "";
    top: 1.1vw;
    right: 1.5vw;
    width: 0;
    height: 0;
    border: 1vw solid transparent;
    border-color: #1a57a8 transparent transparent transparent;
    top: 1.2vw;
    right: 1vw;
}


/*point the arrow upwards when the select box is open (active):*/

.select-selected.select-arrow-active:after {
    border-color: transparent transparent #1a57a8 transparent;
    top: 0vw;
}


/*style the items (options), including the selected item:*/

.select-items div,
.select-selected,
.select-items2 div {
    /* padding: 8px 16px; */
    /* padding: 1vw; */
    height: 100%;
    cursor: pointer;
    user-select: none;
    line-height: 3.2vw;
    text-align: center;
}


/*style items (options):*/

.select-items,
.select-items2 {
    position: absolute;
    background-color: white;
    left: 0;
    right: 0;
    z-index: 99;
    max-height: 9.6vw;
    overflow-y: scroll;
    box-shadow: 0px 0px 4px #8c8c8c;
    top: 3.2vw;
}


/*hide the items when the select box is closed:*/

.select-hide {
    display: none;
}

.select-items div:hover,
.same-as-selected,
.select-items2 div:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.arrow-up {
    border-bottom: 1vw solid #1a57a8;
    border-top: transparent;
    top: 1vw;
    cursor: pointer;
}

.short-select .select-selected {
    padding-left: 0vw
}

.disabled {
    color: grey;
    pointer-events: none;
}

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

.disabled .checkmark,
.disabled .checkmark:after {
    border-color: grey !important;
}

.disabled button {
    color: #c8c8c8;
}


/*Al20210107-*/

.select-selected-n {
    line-height: 1.5vw;
}

.select-selected-n:after {
    top: 0.5vw;
}

.select-selected-n.select-arrow-active:after {
    top: -0.5vw;
}

.select-items-n {
    top: 2.2vw;
}


/*-Al20210107*/


/*RENDELES*/

.csomagolo-neak-r {
    /*display: inline;*/
    display: inline-block;
    width: 8vw;
    margin-bottom: 1vw;
}

.add-button {
    margin: 1.4vw;
    height: calc(6vw - 1.4vw - 1.4vw);
    width: calc(6vw - 1.4vw - 1.4vw);
}

.add-button img {
    width: 90%;
}

.remove-button {
    position: relative;
    margin: 0.4vw;
    height: 2vw;
    width: 3vw;
}

.remove-button img {
    width: 100%;
}

.termektipus_darab {
    width: 50% !important;
    margin-left: 0.3% !important;
}

.termektipus_megjegyzes {
    margin-left: 1.5% !important;
}

input[type=number] {
    padding-left: calc(2vw + 14px);
}

#year_picker {
    background: white;
    width: 7vw;
    height: 10vw;
    position: absolute;
    top: 3vw;
    margin-left: 42vw;
    z-index: 10000;
    overflow-y: scroll;
    box-shadow: 0px 0px 4px #8c8c8c;
    text-align: center;
}

.year-listitem {
    cursor: pointer;
    padding: 0.2vw;
    font-size: 1vw;
}

.year-listitem:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.small-search-button {
    top: -0.5vw !important;
    width: calc(5vw - 1.4vw - 1.4vw) !important;
    height: calc(5vw - 1.4vw - 1.4vw) !important;
}

.details-input {
    margin: 0 !important;
    float: none !important;
}

.gyogyszer-vemy-btn {
    display: inline-block !important;
}

.gyogyszer-vemy-save-btn {
    display: inline-block !important;
}

.kapcsolatos {
    text-align: center;
    font-size: 1.2vw;
    line-height: 2vw;
}