body {
    font-size: small;
    background-color: white;
    margin: 0;
    padding: 0;
    color: black;
   /* overflow-x: hidden;*/
    font-family: Inter, Arial, sans-serif;
}

.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: white;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    border-right: 1px solid #CCC;
}

    .sidebar a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 14px;
        color: #FF3300;
        display: block;
        transition: 0.3s;
    }

        .sidebar a:hover {
            color: #f1f1f1;
        }

    .sidebar .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
        color: #CCC;
    }

.openbtn {
    cursor: pointer;
    padding: 5px;
    background-color: #FF3300;
    border: 0px solid #FF3300;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    color: white;
    font-size: 16pt;
}

    .openbtn:hover {
        background-color: #CCC;
    }

#main {
    transition: margin-left .5s;
    padding: 16px;
}

/* SHOW the menu icon on mobile screens */
#main {
    display: block;
}

#mySidebar {
    width: 0px;
}

#myCloseBtn {
    display: block;
}

.very-main-container {
    width: 100%;
}

.headerBanner {
    /*width: 300px;*/
    width: 100%;
}

.menuContainer {
    padding-left: 5px;
    padding-right: 5px;
    max-width: 150px;
    text-align: left;
    border: 0px solid black;
    display: none;
}

.contentContainer {
    padding-left: 5px;
    padding-right: 5px;
    width: auto;
}

.homeWelcome {
    font-size: medium;
    font-weight: bold;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 0px;
}

.homeEventMainName {
    color: #FF3300;
    font-weight: bold;
    font-size: 26pt;
    padding-left: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.homeEventSubName {
    font-size: 11pt;
    padding-left: 10px;
    padding-top: 0px;
    padding-bottom: 10px;
}

.homeEventTagline {
    font-size: 14pt;
    color: #FF3300;
    font-weight: bold;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

* {
    box-sizing: border-box
}

/* Style the tab */
.tab {
    float: left;
    border: 0px solid #ccc;
    border-radius: 10px;
    background-color: #ffffff;
    width: 100%;
    /*height: 500px;*/
    padding: 10px;
}

    /* Style the buttons that are used to open the tab content */
    .tab button {
        display: block;
        background-color: inherit;
        background-size: 25px;
        background-repeat: no-repeat;
        background-position: 0px 16px;
        color: black;
        padding: 5px 5px 5px 5px;
        width: 100%;
        height: 60px;
        border: none;
        border-bottom: 1px solid #ccc;
        outline: none;
        text-align: left;
        cursor: pointer;
        transition: 0.3s;
        padding-left: 35px;
    }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #ddd;
        }

        /* Create an active/current "tab button" class */
        .tab button.active {
            background-color: #ccc;
        }

/* Style the tab content */
.tabcontent {
    float: left;
    padding: 0px 12px;
    border: 1px solid #ccc;
    width: 100%;
    /*border-left: none;*/
    /*height: 300px;*/
    border-radius: 10px;
}

.sectionSubject {
    height: 40px;
    font-size: xx-large;
}

.sectionPanel1 {
    float: left;
    border: 1px solid #ccc;
    background-color: #ffffff;
    width: 100%;
    padding: 5px;
    border-radius: 10px;
}

.sectionPanel2 {
    float: left;
    border: 1px solid #ccc;
    background-color: #ffffff;
    padding: 5px;
    border-radius: 10px;
    text-align: center;
}

.sectionHeader1 {
    height: 40px;
    min-width: 100%;
    background-color: white;
    padding: 10px;
    color: #FF3300;
    font-size: medium;
    font-weight: bold;
    text-align: left;
    border-left: 0px solid #ccc;
    border-right: 0px solid #ccc;
    border-top: 0px solid #ccc;
    border-bottom: 0px solid #ccc;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.sectionContent1 {
    border-top: 1px solid #ccc;
    padding: 10px;
}

.editMe {
    height: 40px;
    width: 140px;
    font-weight: bold;
    color: white;
    background-color: #FF3300;
    background-image: url(../../Content/Images/design2/Edit.png);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: 8px 8px;
    padding-left:20px;
}

.saveMe {
    height: 40px;
    width: 140px;
    font-weight: bold;
    color: white;
    border: 0px;
    background-color: #FF3300;
    background-image: url(../../Content/Images/design2/Save.png);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: 15px 8px;
    padding-left: 20px;
}

.cancelMe {
    height: 40px;
    width: 140px;
    font-weight: bold;
    color: white;
    background-color: #FF3300;
    background-image: url(../../Content/Images/design2/Cancel.png);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: 15px 8px;
    padding-left: 20px;
}

.tab_home_agenda {
    float: left;
    border-radius: 10px;
    background-color: #ffffff;
    width: 100%;
    padding-bottom: 10px;
    margin: 0;
    padding: 0px;
}

    .tab_home_agenda button {
        background-color: #ccc;
        background-repeat: no-repeat;
        background-position: 10px 12px;
        color: black;
        padding: 15px 15px;
        border-left: 0px solid #ccc;
        border-right: 0px solid #ccc;
        border-top: 0px solid #ccc;
        border-bottom: 0px solid #ccc;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        text-align: center;
        cursor: pointer;
        transition: 0.3s;
        padding-left: 7px;
        padding-right: 7px;
        padding-top: 5px;
        padding-bottom: 5px;
        width: 60px;
    }

.tab_home_agenda_content {
    float: left;
    padding: 0px 12px;
    border-top: 1px solid #ccc;
    width: 100%;
    margin: 0;
    padding: 0px;
}

.tab_home_agenda button.active {
    background-color: #FF3300;
    border-left: 0px solid #FF3300;
    border-right: 0px solid #FF3300;
    border-top: 0px solid #FF3300;
    border-bottom: 0px solid #FF3300;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: white;
}

.tab_agenda {
    float: left;
    border-radius: 10px;
    background-color: #ffffff;
    width: 100%;
    padding-bottom: 10px;
    margin: 0;
    padding: 0px;
}

    .tab_agenda button {
        background-color: #ccc;
        background-size: 30px;
        background-repeat: no-repeat;
        background-position: 10px 12px;
        color: black;
        padding: 15px 15px;
        border-left: 0px solid #ccc;
        border-right: 0px solid #ccc;
        border-top: 0px solid #ccc;
        border-bottom: 0px solid #ccc;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        /*outline: none;*/
        text-align: center;
        cursor: pointer;
        transition: 0.3s;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 5px;
        padding-bottom: 5px;
        width: 60px;
    }

.tab_agenda_content {
    float: left;
    padding: 0px 5px;
    border-top: 1px solid #ccc;
    width: 100%;
    margin: 0;
    padding: 0px;
}

.tab_agenda button.active {
    background-color: #FF3300;
    border-left: 0px solid #FF3300;
    border-right: 0px solid #FF3300;
    border-top: 0px solid #FF3300;
    border-bottom: 0px solid #FF3300;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: white;
}

.agenda-row {
    border-bottom: 1px solid #CCC; /* Thickness of the line */
}

.table-row {
    border-bottom: 1px solid #CCC; /* Thickness of the line */
}

.vertical-line-agenda-time {
    /*width: 200px;*/
    width: 100%;
    border-right: 0px solid #CCC !important;
    padding-top: 5px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 10px;
    text-align: left;
    border: 0px solid black;
}

    .vertical-line-agenda-time .time-from {
        color: #FF3300;
        font-weight: bold;
    }

.vertical-line-agenda-particular {
    /*width: 250px;*/
    width: 100%;
    border-right: 0px solid #CCC;
    padding-top: 2px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 10px;
    text-align: left;
    border: 0px solid black;
}

.vertical-line-agenda-location {
    /*width: 200px;*/
    width: 100%;
    border-right: 0px solid #CCC;
    padding-top: 2px;
    padding-bottom: 5px;
    padding-left: 0px;
    text-align: left;
    border: 0px solid black;
}

.fieldContactParticular {
    width: 100%;
    padding-top: 10px;
    padding-left: 0px;
    padding-right: 0px;
}

.fieldContactDetail {
    width: 100%;
    padding-left: 10px;
    padding-bottom: 0px;
    padding-top: 0px;
}

.fieldContactName {
    width: 100%;
    border: 0px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.fieldContactPhone {
    width: 100%;
    border: 0px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.fieldContactEmail {
    width: 100%;
    border: 0px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.fieldSubject {
    color: #FF3300;
    font-size: 12pt;
    text-align: left;
}

.fieldAttire {
    font-size: 10pt;
    color: #FF3300;
    border: 1px solid #CCC;
    border-radius: 10px;
    width: 300px;
    font-weight: bold;
    padding: 10px;
}

.fieldAttireImage {
    height: 80px !important;
}

.welcomeImageContainer {
    width: 180px;
    height: 280px;
    font-weight: bold;
    font-size: 10pt;
    border: 1px solid #CCC;
    border-radius: 20px;
    text-align: center;
    padding: 10px;
    margin: 10px;
}

.welcomeContainerCaption {
    height: 40px;
}

.welcomeImageW {
    width: 90%;
}

.welcomeImageH {
    height: 150px;
}

.signageImageContainer {
    width: 100%;
    height: 360px;
    font-weight: bold;
    font-size: 10pt;
    border: 1px solid #CCC;
    border-radius: 20px;
    text-align: center;
    padding: 10px;
    margin: 10px;
}

.signageContainerCaption {
    height: 40px;
}

.signageImageW {
    width: 100%;
}

.signageImageH {
    height: 200px;
}

.noticeDetail {
    width: 100%;
}

.fieldRow {
    height: 25px;
}

.fieldIcon {
    height: 20px;
}

.profileFieldIcon {
    width: 20px;
    padding-left: 10px;
}

.profileFieldLabel {
    padding-left: 5px;
    padding-top: 7px;
    padding-bottom: 0px;
    width: 250px;
    font-weight: bold;
    border: 0px solid black;
}

.profileFieldColon {
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 7px;
    padding-bottom: 7px;
    width: 10px;
    font-weight: bold;
    display: none;
    border: 0px solid black;
}

.profileFieldValue {
    padding-left: 5px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 7px;
    border: 0px solid black;
}

.vertical-line-icon_only {
    height: auto; /* Length of the line */
    width: 40px;
    border-right: 0px solid #CCC; /* Thickness of the line */
    background-color: inherit; /* Color of the line */
    padding-left: 5px;
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 10px;
    text-align: left;
}

.vertical-line-particular {
    height: auto; /* Length of the line */
    width: auto;
    background-color: inherit; /* Color of the line */
    padding-left: 0px;
    padding-right: 20px;
    padding-top: 0px;
    padding-bottom: 10px;
    text-align: left;
}

.videoPlayer {
    box-shadow: none;
    border: 1px solid #CCC;
    outline: none;
    width: 100%;
}

.mapControl {
    width: 100%;
    height: 350px;
    border: 1px solid #CCC;
    box-shadow: #CCC 3px 3px;
}

.mapLayout {
    width: 100%;
    /*height: 250px;*/
    border: 1px solid #CCC;
    box-shadow: #CCC 3px 3px;
}

.indexList {
    display: block;
    list-style-type: square;
    padding-left: 30px;
    gap: 60px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;
    border: 0px solid black;
}

.profileQR {
    border: 0px solid black;
    padding: 15px;
    background-color: white;
    width: 120px;
    height: 120px;
}

.profileQrTitle {
    width: 120px;
    padding-left: 10px;
    vertical-align: middle;
    color: #FF3300;
    font-size: 14pt;
}

.pdfViewer {
    width: 100%;
    height: 360px;
}

.transArrivalSubject {
    background-color: #CCC;
    font-weight: bold;
    border: 1px solid #CCC;
    padding: 8px;
}

.transArrivalHeader {
    background-color: white;
    border: 1px solid #CCC;
    font-weight: bold;
    padding: 8px;
}

.transTime {
    width: 80px;
}

.transArrivalDetail {
    background-color: white;
    border: 1px solid #CCC;
    padding: 8px;
}


/***************************************************************************************/
/********************************* QR CLICK TO ENLARGE *********************************/
/***************************************************************************************/
/* The Image Box */
div.img {
    border: 1px solid #ccc;
}

    div.img:hover {
        border: 1px solid #777;
    }

    /* The Image */
    div.img img {
        width: 100%;
        height: auto;
        cursor: pointer;
    }

/* Description of Image */
div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

/* Add Responsiveness */
.responsive {
    padding: 0 6px;
    float: left;
    /*width: 24.99999%;*/
    width: 100.99999%;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* 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.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@@-webkit-keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

@@keyframes zoom {
    from {
        transform: scale(0.1)
    }

    to {
        transform: scale(1)
    }
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

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

/* Responsive Columns */
@@media only screen and (max-width: 700px) {
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }

    .modal-content {
        width: 100%;
    }
}

@@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}

/* Clear Floats */
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}