﻿@media screen and (min-width: 640px ) {

    #profHome #header #headerText {
        font-size: 12pt;
    }

    /*#divPlanVisitInterviewFooter {
        display: none;
    }*/


    .addRemoveTicket .category {
        width: 70%;
    }

    .addRemoveTicket .commands {
        width: 30%;
    }


    .tabPaymentType {
        width: 98%;
        margin: 1%;
    }

        .tabPaymentType .TDPaymentTypeLabel {
            width: 70%;
        }

        .tabPaymentType .TDPaymentTypeLabel2 {
            width: 30%;
        }

        .tabPaymentType .TDPaymentTypeDescr {
            width: 30%;
        }

        .tabPaymentType .TDPaymentTypeCheck {
            width: 70%;
        }

    .divApps {
        display: none;
    }

    #divEventInfo .hrEval {
        display: block;
    }

    #divMap {
        width: 100%;
        height: 280px;
    }




    #divMenu2D .tdCatBody {
        height: 151px;
    }

        #divMenu2D .tdCatBody .cards {
            height: 168px;
        }

        #divMenu2D .tdCatBody .card {
            width: 168px;
            height: 168px;
            font-size: 14px;
            line-height: 22px;
        }

            #divMenu2D .tdCatBody .card img {
                height: 96px;
                width: 96px;
                border-radius: 48px;
            }


    #divMenu2D .subCards {
        height: 150px;
    }


    #divMenu2D .tdEvents {
        height: 304px;
    }

        #divMenu2D .tdEvents .cards {
            height: 321px;
        }

        #divMenu2D .tdEvents .card {
            width: 176px;
            height: 321px;
            font-size: 14px;
            line-height: 22px;
        }

            #divMenu2D .tdEvents .card img {
                width: 160px;
                height: 237px;
                border-radius: 8px;
            }


    #divMenu2D .card .menuItemExtraInfo {
        display: none;
    }


    /*#divMenu2D .card .title {
            background-color: var(--L100);
            height: 43px;
            margin-top: 4px;
            border: 1px solid #E5E5E5;
        }*/

    #divMenu2D .cards .headerCard {
        padding-left: 8px;
        padding-right: 8px;
        width: 168px;
        height: 152px;
        border-radius: 16px;
        margin-left: 8px;
    }

    #divMenu2D .SARight {
        opacity: 0.25;
    }

        #divMenu2D .SARight:hover {
            opacity: 0.80;
        }

    #divMenu2D .act {
        opacity: 0.8;
    }

        #divMenu2D .act:hover {
            opacity: 1;
        }

    .popupEventInfo {
        position: absolute;
        z-index: 101;
        background-color: var(--P100);
        background-color: var(--L100);
        height: auto;
        width: 176px;
        box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        border-radius: 8px;
        padding: 8px;
        color: white;
    }

        .popupEventInfo img {
            width: 160px;
            height: 237px;
            margin-top: 32px;
            border-radius: 8px;
        }

    .popupOrgInfo img {
        width: 96px;
        height: 96px;
        margin-top: 32px;
        margin-left: 32px;
        border-radius: 48px;
    }

    .popupEventInfo .date {
        position: absolute;
        left: 8px;
        top: 8px;
        width: 160px;
        height: 32px;
        text-align: center;
        background-color: var(--P100);
        background-color: var(--L100);
        padding: 4px;
        font-size: 16px;
        font-weight: bold;
        border-radius: 0px;
        color: Darkred;
        font-family: HeaderFont2;
    }

    .popupEventInfo .title {
        margin-top: 8px;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.87);
    }

    .popupEventInfo .org {
        margin-top: 4px;
        color: rgba(0, 0, 0, 0.54);
        font-weight: bold;
    }

    .popupEventInfo .status {
        margin-top: 4px;
        color: rgba(0, 0, 0, 0.54);
        font-size: 12px;
    }


    .popupEventInfo button {
        margin-top: 4px;
        margin-bottom: 0px;
        width: 160px;
        height: 32px;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 8px;
        padding-right: 8px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 12px;
        border: 2px solid var(--L200);
        background-color: white;
        background-color: var(--P500);
        color: rgba(0, 0, 0, 0.87);
        color: white;
    }

        .popupEventInfo button:hover {
            color: white;
            background-color: var(--P700);
        }

    #divFooter {
        margin-top: 32px;
        width: 100%;
        border-top: 4px solid rgba(255, 255, 255, 0.12);
        background-color: rgba(0, 0, 0, 0.18);
        padding-top: 32px;
        padding-left: 32px;
        font-size: 14px;
        height: 256px;
        display: block;
    }

        #divFooter a {
            color: rgba(255, 255, 255, 0.64);
        }

            #divFooter a:hover {
                color: rgba(255, 255, 255, 0.64);
                text-decoration: underline;
            }


        #divFooter div {
            float: left;
        }

        #divFooter #divFooterLogo img {
            border-radius: 8px;
            width: 120px;
            opacity: 0.32;
            filter: grayscale(0.5);
        }

        #divFooter .column {
            width: 140px;
            margin-left: 32px;
            font-size: 12px;
        }

            #divFooter .column div {
                line-height: 24px;
            }

            #divFooter .column .title {
                font-size: 14px;
                font-weight: bold;
                width: 100%;
            }

            #divFooter .column .item {
                width: 100%;
            }

        #divFooter img {
            margin-bottom: 8px;
        }

        #divFooter #para {
            margin-top: 8px;
            width: 100%;
            font-size: 12px;
            color: rgba(255, 255,255, 0.36);
        }

    #divFooterMob {
        display: none;
    }

      #skiCards .skiCard .cardNo img {
        height: 90px;
        float: right;
        margin-right: 4px;
        position: relative;
        border-radius: 8px;
        display:block
        }
}


@media screen and (min-width: 1024px ) {

    #divOrderEurobusTickets .HTMLForm select {
        width: 100%;
        margin-left: 10%;
    }

    #divExtraInfo {
        width: 30%;
    }
}

@media screen and (min-width: 1200px) {

    #divOrderEurobusTickets .HTMLForm select {
        width: 100%;
        margin-left: 6%;
    }

    .btnNewTrainSearch {
        float: left;
    }

    #divCartDetails .col1 {
        width: 400px;
    }

    #divCartDetails .col2 {
        width: 100px;
    }

    #divCartDetails .col3 {
        width: 100px;
    }

    #divCartDetails .col4 {
        width: 100%;
        display: table-cell;
    }


    #divEventInfo {
        padding-right: 308px;
    }

        #divEventInfo iframe {
            display: block;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.7);
            box-shadow: 0px 0px 5px 3px rgb(255 255 255 / 15%);
            max-width: 100%;
        }


    #divExtraInfo #divEventInfo {
        padding-right: initial;
    }



    #divEventInfo #schedule {
        width: 300px;
        position: absolute;
        right: 0;
        bottom: 0;
        top: 0;
        overflow: visible;
        /*border-left: 1px solid rgba(0,0,0,0.06);
        border-bottom: 1px solid rgba(0,0,0,0.06);*/
        /*background-color: #F5F5F5;*/
    }

        #divEventInfo #schedule table {
            border-collapse: collapse;
        }

        #divEventInfo #schedule .searchResult .date {
            padding-left: 8px;
        }

        #divEventInfo #schedule .searchResult .price {
            width: 35%;
        }

        #divEventInfo #schedule .searchResult .buttons {
            width: 35%;
        }

    /*#divEventInfo .searchResult .buttons input {
        background-image: none;
        background-color: transparent;
        height: 28px;
        text-indent: 0;
        margin-top: 4px;
        width: 96%;
        color: #1976D2;
        color: var(--A100);
        border: 2px solid var(--A200);
        border-radius: 14px;
    }*/

    #divExtraInfo {
        width: 35%;
    }
}
/*#divEvaluatePersonnel label {
    line-height: 38px;
}*/





@media screen and (min-width: 1025px) {

    #hamburger {
        display: none
    }

    #divCartBadge {
        right: 54px
    }

    #divLang {
        right: 8px
    }

    body {
        position: relative;
    }

    #mm-blocker {
        display: none !important;
    }


    .mm-page {
        background: inherit;
        box-sizing: border-box;
    }

    .mm-menu.mm-widescreen {
        border-right-width: 1px;
        border-right-style: solid;
        display: block !important;
        width: 35% !important;
        min-width: none !important;
        max-width: none !important;
        top: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 100 !important;
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
    }

    .mm-slideout {
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        width: 65% !important;
        margin-left: 35% !important;
    }


    .mm-menu.mm-widescreen.mm-pageshadow:after {
        content: none;
        display: none;
    }

    .dialog {
        margin-left: auto !important
    }
}



@media screen and (min-width: 1200px) {

    .mm-menu.mm-widescreen {
        width: 27% !important;
        min-width: none !important;
        max-width: none !important;
    }

    .mm-slideout {
        width: 73% !important;
        margin-left: 27% !important;
    }

    .dialog {
        margin-left: auto !important
    }
}


@media screen and (min-width: 1600px) {

    .mm-menu.mm-widescreen {
        width: 20% !important;
        min-width: none !important;
        max-width: none !important;
    }

    .mm-slideout {
        width: 80% !important;
        margin-left: 20% !important;
    }

    .dialog {
        margin-left: auto !important
    }
}

.categories {
    width: auto !important;
}