@charset "utf-8";
/* Mobile Responsive CSS */

/* ===== Global Mobile Overrides ===== */

/* Make all images responsive */
img { max-width: 100%; height: auto; }

/* Box-sizing for all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Override inline table widths for responsiveness */
table[width="1015"],
table[width="500"],
table[width="600"] {
    width: 100% !important;
}

/* Toggle & responsive layout defaults */
#toggle			{display: none;}
#head-control	{float: right;}
.row-fluid:before,
.row-fluid:after{content: none;}
.row-fluid		{display: inline-block;}
.tabing .tabing	{margin-left: auto;}
.tabing .tabing .floatLeft	{float: none;}
#tab li:first-child	{margin-left: 5px;}
.in-line		{display: inline-block;width: 100%;}
#tab {margin-bottom: -7px;}
#tab li{padding: 7px 5px;}

/* ===== Tablet Breakpoint (max-width: 1024px) ===== */

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

    /* Show hamburger toggle, hide sidebar controls */
    #controls		{display: none;}
    #toggle			{display: block !important;}
    #head-control	{display: none;}
    .tabing			{margin-left: 0;}
    #uvTab			{display: none;}

    #mainMenu		{text-align: center;border-bottom: solid 1px #e5e5e5;padding-bottom: 5px;}
    #mainMenu form	{float: initial!important;display: inline-block!important;}

    .wrapper {
        width: 100% !important;
        padding: 0 15px;
    }

    .display-area {
        width: 100% !important;
        float: none !important;
    }

    .control-panel {
        width: 100% !important;
        float: none !important;
        margin-bottom: 15px;
    }

    #controls li {
        padding: 8px 15px;
        height: auto;
        line-height: 1.4;
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #controls li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    #controls li a img {
        float: none !important;
        margin: 0 0 0 10px;
        width: 22px;
        height: 22px;
    }

    .tabing {
        width: 100% !important;
    }

    .display-table {
        width: 100% !important;
    }

    .display-table th,
    .display-table td {
        padding: 5px 3px;
        font-size: 12px;
    }

    .middle {
        width: 100%;
    }

    .container {
        width: 100%;
        float: none;
    }

    .sidebar {
        width: 100%;
        float: none;
        margin-top: 20px;
    }

    .login-form {
        width: 90% !important;
        margin: 40px auto 100px auto !important;
    }

    .login-table,
    .password-table {
        width: 100% !important;
    }

    .disclaimer {
        width: 100% !important;
    }

    #map_canvas {
        width: 100% !important;
    }

    .banner-content {
        width: 100%;
        float: none;
    }

    .banner-img {
        width: 100%;
        float: none;
    }

    .box {
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }

    .box-mid {
        margin: 0;
    }

    .header {
        height: auto;
        padding: 10px 0;
    }

    .textboxBig {
        width: 100% !important;
        max-width: 500px;
    }

    .help_content {
        max-width: 90%;
        margin: 50px auto;
    }
}

/* ===== Mobile Breakpoint (max-width: 768px) ===== */

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

    .wrapper {
        width: 100% !important;
        padding: 0 10px;
    }

    h1 { font-size: 22px; }
    h2 { font-size: 16px; }
    h3 { font-size: 22px; }

    /* Header */
    .header, .header1 {
        height: auto !important;
        padding: 10px 0;
    }

    .logo {
        float: none;
        text-align: center;
        margin: 5px auto;
    }

    .top-right {
        float: none;
        text-align: center;
    }

    .menu {
        margin: 10px 0 0 0;
    }

    #nav li {
        margin: 0 5px;
        font-size: 14px;
    }

    /* Control Bar */
    .control-bar {
        height: auto !important;
        padding: 8px 0;
    }

    .user {
        float: none !important;
        font-size: 14px;
        line-height: 1.4;
        text-align: center;
    }

    .control-btn {
        float: none !important;
        text-align: center;
        margin: 8px 0 0 0;
    }

    .control-btn .btn {
        margin: 3px 5px;
        display: inline-block;
    }

    /* Control Panel - Stack vertically on mobile */
    .control-panel {
        width: 100% !important;
        float: none !important;
        margin-bottom: 15px;
    }

    #controls li {
        width: 50%;
        font-size: 14px;
        height: auto;
        line-height: 1.4;
        padding: 8px;
    }

    /* Display Area */
    .display-area {
        width: 100% !important;
        float: none !important;
        margin: 0;
    }

    .col-sm-6		{width: 100%;padding-left: 0;}

    .tabing {
        width: 100% !important;
        padding: 10px;
    }

    .tabing label {
        font-size: 15px;
    }

    /* Tables - Make responsive with horizontal scroll */
    .scroll-tab {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    .scroll-tab .display-table {
        min-width: 700px;
    }

    .display-table {
        width: 100% !important;
    }

    .display-table th,
    .display-table td {
        padding: 5px 3px;
        font-size: 11px;
        line-height: 16px;
        word-break: break-word;
    }

    /* Mail table horizontal scroll */
    .showMail,
    #row_deleted td,
    #row_deleted td>div		{width: auto!important;}

    .mail-table	{display:block; overflow-x: scroll;}
    .mail-table	tbody	{overflow-x: scroll;}

    /* Login Form */
    .login-form {
        width: 95% !important;
        margin: 30px auto 50px auto !important;
        text-align: center;
    }

    .login-table,
    .password-table {
        width: 100% !important;
        margin: 0 auto !important;
    }

    .login-table tr,
    .login-table td,
    .login-table th {
        display: block;
        width: 100% !important;
        text-align: center !important;
        padding: 3px 5px;
    }

    .login-table .textbox,
    .password-table .textbox {
        width: 90% !important;
        max-width: 100%;
        margin: 5px auto;
    }

    .login-table .btn {
        margin: 10px auto;
        display: block;
        width: 50%;
    }

    .textbox {
        width: 90% !important;
        max-width: 100%;
    }

    .textarea {
        width: 100% !important;
        max-width: 100%;
    }

    .textboxBig {
        width: 100% !important;
    }

    .text-box {
        width: 100% !important;
        max-width: 180px;
    }

    /* Photos & Live Panel */
    #photo li,
    #photolist li {
        margin: 5px;
        float: none !important;
        display: inline-block;
    }

    #photo li a img,
    #photolist li a img {
        width: 80px;
        height: 80px;
    }

    #photolist.gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
        margin-bottom: 20px;
    }

    #photolist.gallery li {
        width: auto;
        margin: 5px;
        text-align: center;
    }

    /* Dashboard tables - horizontal scroll */
    .item .display-table {
        min-width: 500px;
    }

    .item {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Map */
    #map_canvas {
        width: 100% !important;
        height: 250px !important;
    }

    /* Footer */
    .payment-wrapper .wrapper {
        padding: 0 10px;
    }

    .payment {
        float: none;
        margin: 0 0 10px 0;
    }

    .disclaimer {
        width: 100% !important;
        font-size: 11px;
    }

    .site-info {
        text-align: center;
    }

    .site-info span {
        float: none;
        display: block;
    }

    /* Sidebar */
    .container {
        width: 100% !important;
        float: none !important;
    }

    .sidebar {
        width: 100% !important;
        float: none !important;
        margin-top: 15px;
    }

    /* Items */
    .item {
        padding-bottom: 20px;
    }

    /* Help popup */
    .help_content {
        max-width: 95%;
        margin: 30px auto;
        max-height: none;
    }

    .help_content p {
        max-width: 100%;
        max-height: none;
    }

    .help_content h1{font-size: 20px;}

    /* Overlay/Popup */
    .white_content {
        left: 5% !important;
        width: 90% !important;
        top: 20% !important;
    }

    /* Paging */
    .paging li {
        padding: 5px 8px;
    }

    /* Tabs - Device name */
    #tab {
        margin-left: 0;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
    }

    #tab li {
        padding: 6px 10px;
        font-size: 12px;
        display: inline-block;
        margin-bottom: 3px;
    }

    #tab li a {
        word-break: break-word;
    }

    #tab li img {
        width: 16px;
        height: 16px;
        vertical-align: middle;
    }

    /* Result options */
    .result-option {
        overflow-x: auto;
    }

    .result-option td	{margin: 10px;}

    /* Contact form */
    .contact-table {
        width: 100%;
    }

    /* Banner */
    .banner-wrapper {
        height: auto;
        padding: 20px 0;
    }

    .banner-content {
        width: 100%;
        float: none;
        padding: 0 10px;
    }

    .banner-content h1 {
        font-size: 26px;
    }

    .banner-img {
        width: 100%;
        float: none;
        text-align: center;
    }

    #faded {
        height: auto;
    }

    .log {
        width: 100%;
    }

    /* Setting tables */
    .setting > tbody > tr > td {
        display: block;
        width: 100% !important;
        padding: 5px 0;
        position: relative;
        z-index: 1;
    }

    .setting .textbox {
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
        z-index: 2;
    }

    .setting input[type="text"],
    .setting input[type="checkbox"],
    .setting input[type="radio"],
    .setting select,
    .setting button {
        position: relative;
        z-index: 2;
    }

    .setting .daychoice {
        margin-bottom: 5px;
        display: block;
    }

    .setting table {
        width: 100% !important;
    }

    .setting table td {
        display: inline-block;
        padding: 3px 5px;
    }

    .setting img[src*="help-icon"] {
        display: none;
    }

    /* Pkglist table - all columns fit one page */
    #pkgData {
        width: 100% !important;
        table-layout: fixed;
    }

    #pkgData th,
    #pkgData td {
        font-size: 10px;
        padding: 5px 2px;
        word-break: break-word;
        overflow-wrap: break-word;
        overflow: hidden;
    }

    #pkgData th:nth-child(1),
    #pkgData td:nth-child(1) { width: 25px; }
    #pkgData th:nth-child(2),
    #pkgData td:nth-child(2) { width: 30%; }
    #pkgData th:nth-child(3),
    #pkgData td:nth-child(3) { width: 25%; }
    #pkgData th:nth-child(4),
    #pkgData td:nth-child(4) { width: 25%; }
    #pkgData th:nth-child(5),
    #pkgData td:nth-child(5) { width: 15%; }

    #pkgData td img { width: 16px; height: 16px; }

    /* Location table */

    /* Column hiding for responsive tables */
    .hide-first th:nth-child(1),
    .hide-first td:nth-child(1),
    .hide-third th:nth-child(3),
    .hide-third td:nth-child(3),
    .hide-sixth th:nth-child(6),
    .hide-sixth td:nth-child(6)	{display:none;}

    .floatLeft [name="sendDelete"] + button	{display: none;}

    /* Set event responsive */
    #setEvent td	{display: block;text-align: center;}
    .tabing			{padding: 5px;}

    /* Search form inputs wrap on mobile */
    .result-option {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        align-items: center;
    }

    .result-option .textbox,
    .result-option .btn,
    .result-option .select-box {
        margin-bottom: 5px;
    }

    /* Instagram/chat message responsive */
    .senderMessage .messageBody{padding-left: 20px;}
    .recipientMessage .messageBody{padding-right: 20px;}

    /* Popup responsive */
    #popup {
        width: 95%;
        padding: 10px 15px;
        margin-left: 0;
        left: 2.5%;
    }
    #popup #contains td {
        display: block;
        width: 100%;
        margin: 5px 0;
    }
}

/* ===== Small Mobile Breakpoint (max-width: 480px) ===== */

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

    h1 { font-size: 18px; }
    h2 { font-size: 14px; }
    h3 { font-size: 18px; }

    .user {
        font-size: 12px;
    }

    #controls li {
        width: 100%;
        font-size: 13px;
        height: 40px;
    }

    /* Stack login table rows */
    .login-table td {
        display: block;
        width: 100% !important;
        text-align: left !important;
        padding: 3px 0;
    }

    .login-table .textbox,
    .password-table .textbox {
        width: 100% !important;
        max-width: 100%;
    }

    .textbox,
    .textarea {
        max-width: 100%;
        width: auto!important;
        margin-bottom: 10px;
    }

    .password-table .send-btn {
        padding-left: 0;
    }

    .password-table	{width: 100%;}
    .password-table td	{display: block;text-align: -webkit-auto;}

    .display-table th,
    .display-table td {
        font-size: 10px;
        padding: 4px 2px;
    }

    #photo li a img,
    #photolist li a img {
        width: 60px;
        height: 60px;
    }

    #map_canvas {
        height: 200px !important;
    }

    .btn {
        padding: 5px 12px;
        font-size: 13px;
    }

    .control-btn .btn {
        display: block;
        margin: 5px auto;
        text-align: center;
    }

    .banner-content h1 {
        font-size: 20px;
    }

    .help_content {
        margin: 15px auto;
        padding: 5px;
        border-width: 4px;
    }

    .help_content p		{max-height: 400px;}

    /* Modal */
    .white_content {
        left: 2% !important;
        width: 96% !important;
    }

    /* Hamburger menu toggle for controls */
    .control-panel {
        position: relative;
    }

    /* Row fluid full width */
    .row-fluid .span3,
    .row-fluid .span2	{width: 100%!important;margin-left: 0!important;}
    .floatRight {display: block;}

    #deviceInfo .col-sm-6	{width: 100%;}

    /* Scroll tab for small screens */
    .scroll-tab	{display:block; overflow-x: scroll;}
    .scroll-tab	tbody	{overflow-x: scroll;}
    .responsive-tab td	{display: block;text-align: center;}

    /* Setting responsive */
    .setting td		{display: block;}
    .setting td:last-child{float: none;}
    .setting tr:last-child>td{float: none; text-align: center;}
    .setting td td:last-child{float: none;}
    .setting td tr:last-child td{text-align: inherit;}

    .scroll-tab .width100{width: 200px!important;}
}