.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: scale(1) rotate(0deg);
    }

    to {
        transform: scale(1) rotate(360deg);
    }
}

.AjaxLoadingAnimate {
    position: absolute;
    top: auto;
}

.AjaxLoading,
.AjaxLoading:hover,
.AjaxLoading:active {
    opacity: 0.5;
    cursor: default;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.padding-small {
    padding: 2px;
}

.validation-error {
    color: red;
}

    .validation-error ul {
        margin-top: 1rem;
        display: inline-flex
    }

.inline {
    width: auto;
    display: inline;
}

.CustomMessages.alert {
    margin-bottom: 5px;
    white-space: pre-line;
    padding: 0px 15px;
}

    .CustomMessages.alert.alert-danger {
        color: #A94442;
        background-color: #F2DEDE;
        border-color: #EBCCD1;
    }

    .CustomMessages.alert.alert-warning {
        color: #8A6D3B;
        background-color: #FCF8E3;
        border-color: #FAEBCC;
    }

    .CustomMessages.alert.alert-info {
        color: #31708F;
        background-color: #D9EDF7;
        border-color: #BCE8F1;
    }

    .CustomMessages.alert.alert-success {
        color: #3C763D;
        background-color: #DFF0D8;
        border-color: #D6E9C6;
    }

.icheckbox {
    background: url('../images/checkbox.png') no-repeat 0 0;
    vertical-align: middle;
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 18px;
}

    .icheckbox.disable {
        background: url('../images/checkbox-disable.png') no-repeat 0 0;
    }

    .icheckbox.checked {
        background: url('../images/checkbox-checked.png') no-repeat 0 0;
    }

.bg-merck {
    background-color: var(--v-green);
}

.nav-link {
    color: var(--white);
    font-size: 1.28rem;
}

input, button, a.btn, table {
    border-radius: 6px !important
}

button {
    padding: 17px 25px 17px 25px;
}

.topMargin {
    margin-top: 3rem;
}

.menu-child {
    margin-left: 1rem;
}

.chartPlaceholder {
    width: 400px;
    height: 500px;
}


/*agency styles*/
@font-face {
    font-family: 'Merck';
    src: url('../fonts/merck-regular.ttf');
}

:root {
    --s-blue: rgb(16,33,139);
    --s-yellow: rgb(253,191,0);
    --s-green: rgb(96,187,70);
    --s-red: rgb(254,23,28);
    --v-green: rgb(165,205,80);
    --v-blue: rgb(15,105,175);
    --white: rgb(255,255,255);
    --v-magenta: rgb(235,60,150);
    --black: rgb(0,0,0);
    --h-green: #94B848;
    --m-height: 70px;
    --light-grey: #F7F7F7;
    --resp-pad: 30px;
    --ag-login-pad-l: 320px;
    --ag-layout-pad-y: 4.5rem;
    --ag-layout-pad-x: 4rem;
    --ag-app-layout-res-x: 2rem;
    --ag-secondary-black: #666666;
    --ag-eye-rep: -21px;
    --bs-modal-color: var(--black);
    --light-grey-2: #eee;
}

.ag-bckg-v-green {
    background-color: var(--v-green);
}

.ag-bckg-v-blue {
    background-color: var(--v-blue);
}

.ag-bckg-s-blue {
    background-color: var(--s-blue);
}

.ag-bckg-l-grey {
    background-color: var(--light-grey);
}

body {
    font-size: 14px;
    font-family: Verdana, Tahoma, sans-serif;
    line-height: 150%;
    color: var(--black);
    padding-top: var(--m-height);
    display: flex;
    flex-direction: column;
    min-height:100vh;
}

.row > * {
    padding-right: var(--bs-gutter-x);
    padding-left: var(--bs-gutter-x);
}

.ag-content {
    padding-left: var(--ag-layout-pad-x);
    padding-right: var(--ag-layout-pad-x);
    margin: 4.5rem 0;
}
.ag-main-content {
flex:1;
position:relative;
}
.ag-banner + .ag-content {
    margin-top: 0;
}

.ag-img-heading h2 {
    display: none;
}



/*menu*/
.ag-logo-con {
    border-bottom-right-radius: 13em 13em;
 
}

.ag-menu-con {
    border-top-left-radius: 3em 15em;
    border-bottom-left-radius: 20em 20em;
}

.ag-menu-con, .ag-logo-con {
    height: var(--m-height);
    padding-left: var(--ag-layout-pad-x);
    padding-right: var(--ag-layout-pad-x);
}

.navbar-brand, .navbar-brand:hover {
    font-family: Merck;
    font-size: 2rem;
    color: var(--v-magenta);
}

.nav-link:hover {
    color: var(--s-blue);
}

.ag-menu-con .nav-item a::before {
    content: "|";
    display: inline-block;
    color: var(--white);
    padding: 0 5px;
}

.ag-menu-con .nav-item a.ag-no-separator::before {
    display: none;
}

button.navbar-toggler i {
    color: var(--white);
    font-size: 30px;
}


/*end of menu*/
/*typography*/
.ag-highlighted {
    color: var(--s-blue);
}

h1, h2, h3, div.aka-h2 {
    line-height: 120%;
}

h1 {
    font-family: Merck;
    font-size: 2.7rem;
    color: var(--white);
}

    h2, h1.aka-h2, div.aka-h2 {
        font-size: 2rem;
        color: var(--s-blue);
        font-weight: bold;
        margin-bottom: 2rem;
        font-family: Verdana, Tahoma, sans-serif;
    }

h3, .aka-h3 {
    font-size: 1.3rem;
    color: var(--s-blue);
    font-weight: normal;
    margin-bottom: 0.5rem;
}

.display-6 {
color: var(--white);
}

a {
    text-decoration: underline;
    color: var(--s-blue);
}

    a:hover {
        text-decoration: none;
        color: var(--s-red);
    }



li::marker {
    color: var(--s-blue);
    font-size:17px;
}


.ag-content ul li {
    padding-bottom: 0.5rem;
}

.btn, .btn.btn-primary {
    text-transform: uppercase;
    padding: 1rem 2rem;
    font-weight: bold;
    margin: 1rem 0;
    border: 3px solid var(--s-blue) !important;
    background: var(--s-blue);
}

    .btn:hover, .btn.btn-primary:hover {
        background-color: var(--white);
        color: var(--s-blue);
    }

/*end of typography*/

/*banner*/
.ag-banner {
    background-color: var(--h-green);
    position: relative;
    top: -75px;
   /* z-index: -1;*/
    border-bottom-right-radius: 60% 15%;
    border-bottom-left-radius: 30px 30px;
    padding: 10rem 0 2.5rem 2rem;
}

    .ag-banner .row {
        margin: 0;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

.ag-pravitko {
    background-image: url(/Content/Images/pravitko_left.svg);
    background-repeat: no-repeat;
    background-size: auto 11rem;
    background-position: left calc(50% + 37px);
}

    .ag-pravitko.ag-linien {
        background-image: url(/Content/Images/pravitko_left.svg), url(/Content/Images/linien.png);
        background-repeat: no-repeat;
        background-size: auto 11rem, 45% auto;
        background-position: left calc(50% + 0.5 * var(--m-height)), calc(100% + 2rem) bottom;
    }

/*end of banner*/

/*stripe*/

.ag-hex {
    background-image: url(/Content/Images/hexagon_46.svg);
    background-repeat: no-repeat;
    background-size: 20%;
    background-position: 102% 25%;
}

.ag-sipka.ag-pravitko {
    background-image: url(/Content/Images/arrow_red_frame.svg), url(/Content/Images/pravitko_left.svg);
    background-repeat: no-repeat;
    background-size: 20%, 1.5%;
    background-position: -1% 106%, 0% 40%;
    transform: scaleX(-1);
}

.ag-stripe.ag-sipka.ag-pravitko .row {
    transform: scaleX(-1);
}






.ag-stripe {
    color: white;
    font-size: 1.12rem;
    line-height: 150%;
    margin: 2rem 0;
    padding-left: var(--ag-layout-pad-x);
    padding-right: var(--ag-layout-pad-x);
    border-radius: 10px;
}

    .ag-stripe h2 {
        font-family: Merck;
        font-size: 2.1rem;
        color: var(--white);
        margin-top: 2rem;
        margin-bottom: 1rem;
        letter-spacing: 1px;
        line-height:150%;
    }

    .ag-stripe p {
        font-size: 1.15rem;
        
    }

    .ag-stripe .btn, .ag-banner .btn {
        background-color: var(--white);
        color: var(--s-blue);
        border: 0 !important;
    }

        .ag-stripe .btn:hover, .ag-banner .btn:hover {
            background-color: var(--s-blue);
            color: var(--white);
        }

/*eńd of stripe*/

.ag-footer-teaser {
    position: relative;
    bottom: -170px;
    padding-bottom: 100px;
    padding-top: 3rem;
    border-radius: 10px;
}

.ag-hex.ag-footer-teaser {
    background-size: 27%;
}

/*footer*/
.ag-footer {
    color: var(--white);
    position: relative;
}

    .ag-footer::before {
        display: block;
        background-image: url(/Content/Images/footer_bckg.svg);
        background-repeat: no-repeat;
        background-size: 100% auto;
        min-height: 100px;
        content: "";
        z-index: 1;
        position: relative;
    }

    .ag-footer .panel-footer {
        display: flex;
    }

    .ag-footer .w-25 {
        display: flex;
        justify-content: end;
        align-items: end;
        padding-bottom: 1rem;
    }

        .ag-footer .w-25 img {
            max-width: 150px;
        }

    .ag-footer a {
        color: var(--white);
        text-decoration: underline;
    }

        .ag-footer a:hover {
            text-decoration: none;
        }
/*end of footer*/

/*forms*/

.ag-login-layout {
    padding-left: var(--ag-login-pad-l);
    padding-right: 3rem;
    padding-top: var(--ag-layout-pad-y);
    padding-bottom: var(--ag-layout-pad-y);
}

.ag-forms input, .ag-forms input:focus, .ag-forms input:active {
    background: white !important;
    border: 2px solid var(--s-blue) !important;
    color: var(--black) !important;
    box-shadow: none;
    max-width: 400px;
    font-size:14px;
}

    .ag-forms input::placeholder {
        color: var(ag-secondary-black);
        font-size: 14px;
    }

.ag-forms label {
    color: var(--black);
}

.ag-forms .row {
    margin: 0;
    align-items: center;
}

.ag-forms input[type="checkbox"] {
    width: 23px;
    height: 23px;
    margin-right:20px;
}

#togglePassword.fa-eye:before, #togglePassword.fa-eye-slash:before, #togglePassword2.fa-eye:before, #togglePassword2.fa-eye-slash:before, #toggleOldPassword.fa-eye:before, #toggleOldPassword.fa-eye-slash:before {
    position: absolute;
    left: 390px;
    top: 13px;
    color: var(--ag-secondary-black);
    cursor: pointer;
}

label.control-label[for="Password"], label.control-label[for="Password2"], label.control-label[for="OldPassword"] {
    padding-top: 8px;
}

.ag-required:after {
    content: "*";
    font-size: 80%;
    top: -2px;
    position: relative;
}

.ag-forms input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.ag-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-right: 16px;
}

.ag-custom-radio {
    position: relative;
}
span.ag-custom-radio:after {
    width: 15px;
    height: 15px;
    border: 2px solid var(--s-blue);
    display: inline-block;
    border-radius: 100%;
    margin-left: 30px;
    content: "";
    background: transparent;
    transition: background-color .15s ease;
}

span.ag-custom-radio:first-of-type:after {
    margin-left: 0px;
}




.ag-forms input[type="radio"]:checked + span.ag-custom-radio:after {
    background-color: var(--s-blue);
}

.ag-forms .datepicker thead {
    background: var(--s-blue);
    color: var(--white);
}

.ag-forms .bootstrap-datetimepicker-widget table td, .ag-forms .bootstrap-datetimepicker-widget table th {
    border-radius: 0;
}

.ag-forms .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background: transparent;
    color: var(--light-grey);
}

.ag-forms .bootstrap-datetimepicker-widget table td.day, .ag-forms .bootstrap-datetimepicker-widget table th {
    padding: 10px;
}

.ag-forms td.day.active.today, .ag-forms td.day.active{
    background-color: var(--s-blue);
    border-radius: 50%;
}

.ag-forms .bootstrap-datetimepicker-widget table td span.active {
    background-color: var(--s-blue);
}

.ag-forms .bootstrap-datetimepicker-widget table td.today:before {
    display: none;
}

.ag-forms .bootstrap-datetimepicker-widget table td.day:hover, .ag-forms .bootstrap-datetimepicker-widget table td.hour:hover, .ag-forms .bootstrap-datetimepicker-widget table td.minute:hover, .ag-forms .bootstrap-datetimepicker-widget table td.second:hover {
    border-radius: 50%;
    background-color: var(--light-grey);
}

.ag-forms .bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour.top, .ag-forms .bootstrap-datetimepicker-widget .list-unstyled {
    border-radius: 10px;
}

    .ag-forms .bootstrap-datetimepicker-widget .list-unstyled thead th.prev {
        border-top-left-radius: 10px;
    }

    .ag-forms .bootstrap-datetimepicker-widget .list-unstyled thead th.next {
        border-top-right-radius: 10px;
    }

.ag-eye-cor {
    margin-top: var(--ag-eye-rep) !important;
}
/*end of forms*/
/*dialogs-modal*/
.modal-content {
    border-radius: 10px;
    border: 2px solid var(--s-blue);
    padding: 3rem 4rem;
    box-shadow: 10px 10px 50px 20px rgb(0 0 0 / 21%)
}

.modal-header {
    border-bottom: 0;
}

.modal-dialog {
    margin-top: 7rem;
    max-width: 900px;
}

.modal-header button.btn-close:after {
    color: var(--s-blue);
    content: "X";
    display: block;
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    top: 20px;
    right: 20px;
}



button.btn-close {
    background-image: none;
    opacity: 1;
}

/*end of dialogs-modal*/
/*alerts*/
.CustomMessages.alert.alert-danger {
    background-color: rgb(254 23 28 / 10%);
    border-radius: 6px;
    margin: 20px 0;
    max-width: 400px;
}
.validation-error ul {
    flex-direction: column;
}

.validation-error li, .validation-error li::marker {
    color: var(--s-red);
}
/*end of alert*/

/*app layout*/
.ag-app-layout {
    padding-top: var(--ag-layout-pad-y);
    padding-bottom: var(--ag-layout-pad-y);
    padding-left: var(--ag-layout-pad-x);
    padding-right: var(--ag-layout-pad-x);
}


.ag-menu-app {
    border-radius: 10px;
    border: 2px solid var(--s-blue);
    max-width: 220px;
    padding: 1rem 1rem 1rem 1.7rem;
    background-image: url(/Content/Images/pravitko_left_blue.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 150px;
    min-height: 180px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.ag-menu-app-wrap {
padding-top:70px;}


.ag-menu-app a {
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    margin-left: 0;
}

    .ag-menu-app .row {
        padding-bottom: 1rem;
    }

        .ag-menu-app .row:last-child {
            padding-bottom: 0;
        }

.ag-menu-app a.menu-child {
    font-weight: normal;
}
.ag-app-submenu {
    padding-top: 0.5rem;
    padding-left: 1rem;
}
    .ag-app-submenu span {
        display: block;
    }

.ag-menu-app-bckg {
    background-image: url(/Content/Images/hex_app.svg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
    width: 200px;
    height: 150px;
    position: relative;
    top: -81px;
    left: -55px;
    z-index: -1;
}

.ag-app-layout:after {
    background-image: url(/Content/Images/linien.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom;
    width: 355px;
    height: 211px;
    position: absolute;
    bottom: -95px;
    right: 0;
    content: "";
    display: block;
    z-index: -1;
}

.ag-app-layout:before {
    background-image: url(/Content/Images/hex_app.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    width: 200px;
    height: 150px;
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    z-index: -1;
}

/*end of app-layout*/

/*tables*/

.ag-table {
    background-color: var(--white);
    color: var(--black);
}

    .ag-table [class*="col"] {
        padding: 10px 10px 10px 0;
    }

    .ag-table .row {
        padding: 20px 30px 0px 30px;
        align-items: center;
    }

    .ag-table .ag-table-header {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        font-weight: bold;
        padding-bottom: 20px;
        color: var(--white);
        background-color: var(--s-blue);
    }

.ag-table-emph {
    font-weight:bold;
    color:var(--s-blue);
}

.ag-table .text-secondary {
    color: var(--ag-secondary-black)!important;
    font-size:0.875rem; 
}
.ag-table-b-b {
border-bottom:1px solid var(--light-grey-2);

}

.ag-table a {
text-decoration:none;
}
.ag-stripe-table:nth-child(odd) {
    background-color: var(--light-grey);
}

    .ag-stripe-table:nth-child(odd):last-child {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
.ag-table-action [class*="col"]:nth-child(2) {
    text-align: right;
}
/*.ag-meranie .row {
    align-items: flex-end;
}
    */

img.changingIcon {
    float: right;
    margin-right: -10px;
}
    .ag-meranie [class*="col"] {
    padding: 0 10px;
}

.ag-meranie .ag-table-header [class*="col"] {
    padding: 10px;
}

.ag-meranie .row.ag-table-b-b {
    padding-bottom: 10px;
}
.ag-meranie .d-md-block .ag-table-action {
    padding: 10px 30px 20px 30px;
}

.ag-merania-table {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
    .ag-merania-table img {
        margin-left:1rem;
        float:none;
        margin-right:0;
    }

    .ag-merania-table .col.text-secondary {
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

.ag-meranie .ag-stripe-table {
    padding: 20px 30px 20px 30px;
}

.ag-meranie .ag-stripe-table {
    padding: 20px 30px 20px 30px;
}
.ag-meranie .ag-table-action {
    padding: 0px;
}

/*end of tables*/
/*nav*/
.ag-app-content ul.nav.nav-tabs {
    margin-left: 15px;
    margin-bottom: -5px;
    border: 0;
}

.ag-app-content li.nav-item {
    border-radius: 6px;
    border: 2px solid var(--s-blue);
    margin-right: 5px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 8px 10px;
    background: var(--white);
}

    .ag-app-content li.nav-item:last-child {
        margin-right: 0;
    }

    .ag-app-content li.nav-item a.nav-link {
        font-size: 14px;
        text-align:center;
        border:none;
    }

/*        .ag-app-content li.nav-item a.nav-link.active {
            border: 0;
        }*/

.ag-app-content .nav-link.active:after, .ag-app-content .nav-link:hover:after {
    content: "";
    width: 80%;
    height: 2px;
    background-color: var(--s-yellow);
    display: block;
}
.ag-app-content .d-md-none .nav-link.active:before {
    content: "";
    width: 2px;
    height: 38px;
    background-color: var(--s-yellow);
    float: left;
    margin-right: 5px;
    margin-left: -10px;
}

.ag-app-content .d-md-none .nav-link span {
    text-transform: none;
    font-weight: normal;
}

.ag-app-content .d-md-none .nav-link.active:after {
    display: none;
}

/*.ag-app-content .nav-tabs .nav-link:hover, .ag-app-content .nav-tabs .nav-link:focus {
    border: none;
}*/

.ag-app-content ul.nav.nav-tabs:after {
    content: "";
    display: inline;
    width: 635px;
    height: 5px;
    background: var(--s-blue);
    margin-top: -5px;
}
/*end of nav*/

/*graph*/
.chartPlaceholder {
    width: 100%;
    height: auto;
    margin-top: 3rem;
    max-width:800px;
}

.tab-pane canvas {
    background-color: white;
    padding: 1rem;
    border: 1px solid var(--light-grey);
    margin-bottom:2rem;
}

.ag-graph-vysvetlivky {
background-color:var(--s-blue);
border-radius:20px;
padding:1.5rem 2rem;
color:var(--white);
}

    .ag-graph-vysvetlivky span.col-auto:before {
        content: "";
        width: 16px;
        height: 14px;
        display: block;
        margin-right: 10px;
    }

    .ag-graph-vysvetlivky span.col-auto:first-child:before {
        background-image: url(/Content/Images/hex-s-green.svg);
    }

    .ag-graph-vysvetlivky span.col-auto:last-child:before {
        background-image: url(/Content/Images/hex-s-red.svg);
    }


    .ag-graph-vysvetlivky .col-auto.d-flex {
        align-items: center;
        padding-left: 12px;
    }

.ag-vyhodnotenie .OK {
    color: var(--s-green);
}

.ag-vyhodnotenie .Error {
    color: var(--s-red);
}

/*end of graph*/


.ag-tooltip:after {
    content: "xxx";
    display: block;
    position: absolute;
    right: -100px;
    top: -20px;
    font-size: 0.875rem;
    background: var(--light-grey);
    padding: 10px 10px;
    border-radius: 10px;
    line-height: 110%;
    color: var(--black);
    font-weight: normal;
    opacity: 0;
    text-align: center;
}

.ag-tooltip {
    position: relative;
}

    .ag-tooltip:hover:after {
        opacity: 1;
        transition: all 0.5s;
    }

    .ag-tooltip.ag-pridat-dieta:after {
        content: "Pridať dieťa";
    }

    .ag-tooltip.ag-pridat-meranie:after {
        content: "Pridať meranie";
    }


.cky-notice a, .cky-policy, button.cky-show-desc-btn:not(:hover):not(:active), .cky-preference-content-wrapper .cky-show-desc-btn {
    color: var(--s-blue) !important;
    text-decoration: underline;
}

    .cky-notice a:hover, button.cky-show-desc-btn:hover:not(:active), .cky-preference-content-wrapper .cky-show-desc-btn:hover {
        color: var(--s-red) !important;
        text-decoration: none;
    }

.cky-notice .cky-btn {
    border: 2px solid var(--s-blue) !important;
    background: var(--s-blue);
    color: var(--white);
}

    .cky-notice .cky-btn:hover, .cky-prefrence-btn-wrapper .cky-btn:hover {
        background-color: var(--white) !important;
        color: var(--s-blue) !important;
        opacity: 1;
    }

a.cky-banner-element {
    cursor: pointer;
}
ol[type="a"] li::marker {
font-size:14px;}

@media (min-width: 768px) {
    .ag-merania-table {
        grid-template-columns: repeat(4, 1fr);
    }
    .order-md-7 {
        order: 7 !important;
    }
    .order-md-6 {
        order: 6 !important;
    }
    .order-md-8 {
        order: 8 !important;
    }
}

@media (min-width:992px) {
    nav {
        background-color: var(--white) !important;
    }
    .navbar-expand-lg .navbar-nav.ml-auto {
        align-items: flex-end;
    }
}

@media only screen and (max-width:1399px) {
    .ag-app-layout {
    padding-right:var(--resp-pad);
    }
}

@media only screen and (max-width:1200px) {
    li.nav-item a {
        font-size: 1.15rem;
    }

    .ag-menu-con {
        padding-left: 2rem !important;
        padding-right: 2rem !important
    }
}

@media only screen and (max-width:1199px) {
    .ag-banner {
        border-bottom-left-radius: 0;
    }
    .ag-app-layout {
        padding-left: var(--resp-pad);
    }

        .ag-app-layout .ag-menu-app {
            margin-right: var(--resp-pad);
        }
}

@media only screen and (max-width:1024px) {
    .ag-menu-con .nav-item a:before {
        padding: 0px 3px;
    }
    .mr-auto .nav-item:last-child a:after {
        display: inline-block;
        color: var(--white);
        content: "|";
        padding: 0 3px;
    }
    .ag-menu-con {
        padding-left: 1.5rem !important;
    }
    .ag-menu-con .navbar-nav.mx-auto {
    display:none;}
    h1 {
        font-size: calc(2rem + 0.6vw) !important;
    }

    h2, .ag-stripe h2 {
        font-size: calc(1.7rem + 0.3vw) !important;
    }

    h3, .aka-h3 {
        font-size: calc(1.3rem + 0.3vw) !important;
    }

    
}



@media only screen and (max-width:991px) {
    .ag-logo-con {
        background-color: transparent;
        padding-left: var(--resp-pad) !important;
        padding-right: var(--resp-pad);
    }

    .navbar {
        background-color: var(--v-green) !important;
    }

    .ag-menu-burger {
        padding-right: var(--resp-pad) !important;
    }
    .ag-menu-con {
        width: 400px;
        position: absolute;
        right: var(--resp-pad);
        top: -100%;
        border-top: 2px solid var(--white);
        border-radius: 0;
        padding: 30px !important;
        background-image: url(/Content/Images/pravitko_right.svg);
        background-repeat: no-repeat;
        background-size: auto 200px;
        background-position: right calc(50% + 37px);
        background-color: var(--v-green);
        height: unset;
        max-width: 100%;
        display: block;
        z-index: -20;
        transition: all 0.5s;
        transform: scaleY(0);
    }

        .ag-menu-con.show {
            top: var(--m-height);
            transition: all 0.5s;
            transform: scaleY(100%);
            display: flex;
            flex-direction: column-reverse;
            align-items: flex-start;
        }



        .ag-menu-con .nav-item a:before, .mr-auto .nav-item:last-child a:after {
            display: none;
        }

    ul.navbar-nav.mx-auto {
        display: none;
    }

    .show ul.navbar-nav.ml-auto:after {
        display: block;
        width: 200px;
        height: 1px;
        content: "";
        background: white;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .show ul.navbar-nav.ml-auto {
        padding-top: 14px;
    }

    .ag-menu-con.show ul li {
        padding: 7px 0;
    }
    .ag-footer .w-25 img {
        max-width: 100px;
        width: 100%;
    }
    .ag-footer .panel-footer {
        padding: 2rem var(--resp-pad) 1rem var(--resp-pad) !important;
    }
    .ag-footer::before {
        display:none;
    }
    .ag-banner {
    padding-top:8rem;}
    .ag-img-heading img {
        max-width: 200px;
        margin-right: 3rem;
    }

    .ag-img-heading {
        display: flex;
        align-items: end;
        padding-bottom: 2rem;
    }
        .ag-img-heading h2 {
        display:block;}
    .ag-md-hide-h2 h2, .ag-md-hide-h2 .aka-h2 {
        display: none;
    }
    .ag-stripe, .ag-footer-teaser {
        border-radius: 0;
    }
    .ag-hex {
        background-position: calc(80vw + 20px) calc(100% + 5px);
    }

    .ag-sipka.ag-pravitko {
        background-size: 25%, 3%;
    }

    .ag-stripe h2 {
        font-size: 1.9rem;
    }

    .ag-hex.ag-footer-teaser {
        background-position: 102% 40%;
    }

    .ag-footer-teaser {
        bottom: -140px;
    }
    .ag-content, .ag-stripe {
        padding-left: var(--resp-pad) !important;
        padding-right: var(--resp-pad) !important;
    }
    :root {
        --ag-login-pad-l: var(--resp-pad);
        --ag-layout-pad-y: 3rem;
    }

    .ag-app-layout, .ag-login-layout {
        padding-left: var(--resp-pad);
        padding-right: var(--resp-pad);
    }

    .ag-mb-md-3 {
    margin-bottom:1rem;}

    .ag-app-layout:after {
        background-image: url(/Content/Images/hex_app.svg);
        top: 70%;
        left: -80px;
        width: 200px;
        height: 150px;
    }

    .ag-app-layout:before {

        content: "";
        top: 20%;
        background-position: 50px 0;
    }
    .modal-content {
        padding: 2rem 1.5rem;
    }

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

    .ag-banner + .ag-content {
        margin-top: -20px;
    }

    .ag-img-heading h2 {
        display: none;
    }

    .ag-md-hide-h2 h2, .ag-md-hide-h2 .aka-h2 {
        display: block;
    }

    h2, h1.aka-h2, div.aka-h2 {font-size:1.8rem;
    }
    .btn {
        padding: 0.75rem 1.6rem;
    }

    .ag-app-layout:after {
        height: 110px;
        width: 150px;
        top: 85%;
    }

    .ag-app-layout:before {
        height: 110px;
        width: 150px;
        top: 50px;
    }
    .modal-content {
        padding: 1rem 1.5rem;
    }
    #togglePassword.fa-eye:before, #togglePassword.fa-eye-slash:before, #togglePassword2.fa-eye:before, #togglePassword2.fa-eye-slash:before, #toggleOldPassword.fa-eye:before, #toggleOldPassword.fa-eye-slash:before {
        left: 370px;
    }

    .ag-app-content ul.nav.nav-tabs {
        margin-left: 0;
        
    }
    .ag-table .ag-table-header {
        display: none;
    }

    .ag-table .col-3 {
        width: 100%;
        padding: 15px 20px;
    }
    img.changingIcon {
        float: none;
        margin-right: 0px;
    }

    .ag-deti .col-3:nth-child(1), .ag-merania-overview .col-3:nth-child(1) {
        background-color: var(--s-blue);
        color: white;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        align-items: center;
        display: flex;
        justify-content: space-between;
    }

        .ag-merania-overview .col-3:nth-child(1) a, .ag-merania-overview .col-3:nth-child(1) a:link, .ag-merania-overview .col-3:nth-child(1) a:active, .ag-merania-overview .col-3:nth-child(1) a:visited, .ag-merania-overview .col-3:nth-child(1) a:hover {
            color: white;
        }



    .ag-table .ag-stripe-table {
        padding: 0px;
        border: 1px solid var(--light-grey-2);
        margin-bottom: var(--resp-pad);
        border-radius: 10px;
    }

        .ag-table .ag-stripe-table .row {
            padding: 0;
        }

    .ag-deti .col-3:nth-child(2):before {
        content: "Dátum narodenia:";
    }

    .ag-deti .col-3:nth-child(3):before {
        content: "Pohlavie:";
    }

    .ag-deti .col-3:nth-child(4):before {
        content: "Posledné meranie:";
    }

    .ag-deti .text-secondary br {
        display: none;
    }

    .ag-deti .ag-table-action [class*="col"], .ag-merania-overview .ag-table-action [class*="col"] {
        padding: 15px 20px;
    }

    .ag-meranie .ag-stripe-table {
        padding: 25px 20px;
        margin-top: 20px;
    }

    /*   .ag-meranie .col-3 {
        padding: 15px 0;
    }*/

    .ag-merania-table .order-md-1 {
        padding-bottom: 15px;
    }
    .ag-merania-table img {
        float: right;
    }
    .ag-app-content ul.nav.nav-tabs:after {
        width: 496px;
    }

    .ag-merania-overview .col-3:nth-child(2):before {
        content: "Počet meraní:";
    }

    .ag-merania-overview .col-3:nth-child(3):before {
        content: "Prvé meranie:";
    }

    .ag-merania-overview .col-3:nth-child(4):before {
        content: "Posledné meranie:";
    }


}

@media only screen and (max-width:575px) {
    .ag-banner.ag-pravitko.ag-linien {
        background-image: url(/Content/Images/pravitko_right.svg);
        background-size: auto 11rem;
        background-position: right calc(50% + 0.5 * var(--m-height));
    }
    .ag-banner .col-lg-6.col-sm-9.col-12, .ag-banner .row {
        padding-left: 0;
    }
    .ag-banner {
        border-radius: 0;
    }

    .ag-hex {
        background-position: 70vw calc(100% + 5px);
        background-size: 40%;
    }

    .ag-sipka.ag-pravitko {
        background-position: 0% 40%;
        background-image: url(/Content/Images/pravitko_left.svg);
        background-size: 5%;
    }

    .ag-hex.ag-footer-teaser {
        background-position: 102% 56%;
    }
    .ag-content .row > * {
        padding-right: 12px;
        padding-left: 12px;
    }
    .ag-app-layout:after {
        width: 85px;
        height: 65px;
        left: -15px;
    }

    .ag-app-layout:before {
        width: 85px;
        height: 65px;
        background-position: 15px;
    }

    .ag-app-content li.nav-item a.nav-link, .ag-app-content li.nav-item {
        padding: 5px 3px;
     
    }


    .ag-app-content .d-md-none .nav-link.active:after {
        content: "";
        width: 80%;
        height: 2px;
        background-color: var(--s-yellow);
        display: block;
        margin: 2px auto 0 auto;
    }

    .ag-app-content ul.nav.nav-tabs:after {
        width: 333px;
    }
    .ag-app-content .d-md-none .nav-link.active:before {
        display:none;
    }

    .ag-app-content li.nav-item a.nav-link span, .ag-app-content li.nav-item span {
        font-size: 13px;
    }
}



    .ag-graph-vysvetlivky {
 padding:1.5rem;   }



    @media only screen and (max-width:480px) {
        .ag-menu-con.show {
            width: 100%;
            position: fixed;
            right: 0;
        }


        .ag-footer .panel-footer {
            flex-direction: column;
        }

            .ag-footer .panel-footer img {
                margin-top: 1rem;
            }
        .ag-hex.ag-footer-teaser {
            background-position: 110% 0%;
        }
        .ag-footer .w-75, .ag-footer .w-25
        {
            width: 100% !important;
            justify-content: start;
        }

        .ag-forms input, .ag-forms input:focus, .ag-forms input:active {
            max-width: 100%;
        }
        #togglePassword.fa-eye:before, #togglePassword.fa-eye-slash:before, #togglePassword2.fa-eye:before, #togglePassword2.fa-eye-slash:before, #toggleOldPassword.fa-eye:before, #toggleOldPassword.fa-eye-slash:before {
            left: unset;
            right: 10px;
        }
        .ag-deti .text-secondary br {
            display: block;
        }
        .ag-table .ag-table-action [class*="col"] {
            text-align: left;
            width: 100%;
            padding: 0 0 10px 0;
        }
        .ag-table-action {
            padding: 15px 20px 5px 20px !important;
        }
        .ag-meranie .ag-table-action {
            padding: 0px 0px 0px 10px !important;
        }
        .ag-app-content li.nav-item {
            margin-right: 3px;
        }

            .ag-app-content li.nav-item a.nav-link, .ag-app-content li.nav-item {
                letter-spacing: -1px;
            }

                .ag-app-content li.nav-item a.nav-link span, .ag-app-content li.nav-item span {
                    letter-spacing: 0px;
                    
                }

        .ag-app-content ul.nav.nav-tabs:after {
            width: 307px;
        }

    }

@media print {
    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        
    }
    @page { 
        size: A4 portrait;  
    }
    .navbar, .ag-menu-app-wrap, .ag-footer:before, .ag-app-layout:after, button-expand-panel-element, .cky-btn-revisit-wrapper.cky-revisit-bottom-left {
        display: none !important;
    }

    .ag-app-layout, body {
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .ag-app-content {
        width: 100% !important;
        }


    .endOfThePage {
        page-break-after: always;
    }


    .ag-footer .w-75 p:first-of-type {
        visibility: hidden;
    }

    #tnv-widget,
    .tnv-widget,
    .tnv-container,
    [id^="tnv-"],
    [class*="tnv-"] {
        display: none !important;
        visibility: hidden !important;
    }

    img.img-fluid {
        max-width: 30%;
        margin-bottom:20px;
    }

    h1, .display-6 {
        font-size: calc(1.5rem + 0.6vw) !important;
    }

        h2, .ag-stripe h2, h1.aka-h2, div.aka-h2 {
            font-size: calc(1rem + 0.3vw) !important;
        }

    h3, .aka-h3 {
        font-size: calc(1rem + 0.1vw) !important;
    }

    .btn, .btn.btn-primary {
        padding: 0.5rem 1rem;
        font-size:14px;
    }

    .ag-stripe p {
        font-size: 14px;
    }

    .ag-banner p {
        font-size: 1rem;
    }

    .ag-banner {
        top: 0;
        padding-top: 70px !important;
    }

        .ag-banner + .ag-content {
            margin-top: 3rem;
        }

    .ag-content {
        margin: 3rem 0;
    }

    canvas {
        width: 600px !important;
        height: 750px !important;
    }

    .ag-app-content .nav-link span, .ag-app-content .nav-link br, .ag-ico {
        display: none;
    }
    .ag-app-content .d-md-none .nav-link.active:before {
        height: 20px;
    }

    .ag-app-content li.nav-item {
        padding: 0px 10px;
    }

}