:root {
    --portal-shell-min-width: 1000px;
    --portal-shell-max-width: 1000px;
    --portal-content-min-width: 1000px;
    --portal-shell-width: var(--portal-shell-max-width);
    --portal-page-gutter: 0px;
    --portal-base-font-size: clamp(12px, 0.95vw, 13px);
    --portal-table-font-size: clamp(11px, 0.85vw, 12px);
    --portal-table-header-font-size: clamp(12px, 0.95vw, 13px);
    --portal-table-cell-padding: clamp(3px, 0.35vw, 5px);
}

html {
    min-height: 100%;
    overscroll-behavior-y: none;
}

body {
    background-color: #ffffff;
}

body {
    font-size: var(--portal-base-font-size);
}

#container_window_main,
#container_menu_top,
#container_window_menu,
#menu_table,
#container_window_padding_1,
#container_window_padding_2 {
    width: 100%;
    min-width: var(--portal-shell-min-width);
}

#container_page {
    width: var(--portal-shell-width);
    min-width: var(--portal-shell-min-width);
    margin-left: auto;
    margin-right: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#sticky,
.sticky-wrapper {
    position: relative;
    background-color: #330066;
    z-index: 100;
    overflow: visible;
}

#sticky::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background-color: #330066;
    z-index: -1;
}

#container_banner,
#container_window_menu {
    position: relative;
    background-color: transparent;
    z-index: 0;
    margin: 0;
}

#container_banner {
    height: auto;
    min-height: 50px;
    overflow: visible;
}

#container_window_menu {
    padding-bottom: 5px;
    overflow: visible;
}

#container_window_account_history,
#container_window_main {
    position: relative;
    z-index: 1;
}

#container_banner > table,
#container_banner .portal-banner-table {
    width: 100% !important;
    min-width: var(--portal-shell-min-width);
    border-collapse: collapse;
    border-spacing: 0;
}

#container_banner .portal-banner-table tr {
    height: 50px;
}

#container_banner td {
    padding: 0;
    border: 0;
    vertical-align: middle;
}

#menu_top_right,
#logouticon {
    padding-top: 0 !important;
}

.portal-banner-warning-hidden {
    display: none;
}

.portal-banner-warning-visible {
    display: block;
    text-align: center;
    margin: 0;
    padding: 5px;
    font-weight: bold;
    color: white;
    font-size: 10px;
    background-color: red;
}

#container_window_main {
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: visible;
    min-height: 0;
}

#container_menu_top {
    left: 50%;
    transform: translateX(-50%);
    width: var(--portal-shell-width);
}

#container_window_account_history {
    width: 100%;
    min-width: var(--portal-shell-min-width);
}

.simpage,
#simsearch-bulksearch,
#accountsearch-box,
.content-holder,
.footer-holder,
.applet-header-table,
.applet-header-text {
    margin-left: 0 !important;
    width: 100%;
}

#container_windows > div[id$="_window"],
.portal-window {
    width: 100% !important;
    min-width: var(--portal-shell-min-width);
    clear: both;
}

.portal-table,
.portal-content-table,
.portal-simdetail-table,
.portal-simtab-table,
.portal-search-form,
.portal-search-errors,
.portal-toolbar,
.portal-detail-table,
.simpage {
    width: 100% !important;
    min-width: var(--portal-content-min-width);
    margin-left: 0;
}

.portal-simdetail-table,
.portal-simtab-table,
.portal-detail-table {
    margin-left: 0;
}

.portal-simdetail-tabs,
.portal-simdetail-tabholder {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 0 !important;
    vertical-align: top;
}

.portal-simdetail-tabholder {
    padding: 0 !important;
}

/* SIM detail: keep legacy readability while containing the route to the shell. */
#simcard_window {
    max-width: 100%;
}

table.simpage {
    min-width: 0 !important;
    max-width: 100%;
}

.portal-simdetail-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
}

.portal-simdetail-table > tbody > tr > td[colspan] {
    min-width: 0;
    max-width: 100%;
}

.portal-simdetail-table .portal-detail-table {
    table-layout: fixed;
    width: 100% !important;
    min-width: 0 !important;
}

.portal-simdetail-tabholder .portal-simtab-table,
.portal-simdetail-tabholder .simtabtable,
#simcard_window .portal-simtab-table,
#simcard_window .simtabtable {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
}

.portal-simdetail-tabholder .simtabtable [class*="portal-min-col-"],
#simcard_window .simtabtable [class*="portal-min-col-"] {
    min-width: 0 !important;
    width: auto;
}

.portal-sms-history-table {
    table-layout: fixed;
}

.portal-sms-history-table td {
    box-sizing: border-box;
}

.portal-sms-date-column {
    width: 15%;
}

.portal-sms-direction-column {
    width: 4%;
}

.portal-sms-user-column {
    width: 5%;
}

.portal-sms-encoding-column {
    width: 7%;
}

.portal-sms-message-column {
    width: 57%;
}

.portal-sms-status-column {
    width: 12%;
}

.portal-sms-message-content {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    background-color: white;
}

.portal-sms-history-table td:first-child,
.portal-sms-user,
.portal-sms-encoding {
    white-space: nowrap;
}

.portal-sms-user span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-usage-summary-table {
    table-layout: fixed;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
}

.portal-usage-summary-table .portal-usage-col-bearer { width: 8%; }
.portal-usage-summary-table .portal-usage-col-direction { width: 7%; }
.portal-usage-summary-table .portal-usage-col-outcome { width: 10%; }
.portal-usage-summary-table .portal-usage-col-view { width: 8%; }
.portal-usage-summary-table .portal-usage-col-month { width: 5%; }
.portal-usage-summary-table .portal-usage-col-event { width: 15%; }
.portal-usage-summary-table .portal-usage-col-updated { width: 17%; }

.portal-usage-summary-table td,
.portal-usage-summary-table th,
.portal-usage-summary-table .table-header {
    box-sizing: border-box;
    font-size: var(--portal-table-font-size);
    line-height: 14px;
    min-width: 0 !important;
    overflow-wrap: anywhere;
    padding: 2px 3px;
    white-space: normal;
}

.customerlist,
.userlist,
.addaccount,
.tariffsummarylist,
.simlist,
.simlist_header,
.pagedtable-no-offset,
.searcheslist,
.simwildcardsearchtable,
.userdetailtable,
.bulkoptions,
.columndisplay,
.accountsearch-box-header,
.simsearcherrors,
.content-holder,
.footer-holder,
.applet-header-table,
.applet-header-text,
.table-list-default {
    margin-left: 0;
    width: 100%;
    min-width: var(--portal-content-min-width);
    max-width: none;
}

.customerlist,
.userlist,
.addaccount,
.tariffsummarylist,
.simlist,
.simlist_header,
.pagedtable-no-offset,
.searcheslist,
.simwildcardsearchtable,
.userdetailtable,
.table-list-default {
    border-collapse: collapse;
}

.simtabtable {
    width: 100% !important;
    min-width: var(--portal-content-min-width);
}

.simtabtable[width] {
    width: 100% !important;
}

#simViewHistory .sim-view-history-table {
    width: 600px !important;
    min-width: 0 !important;
    max-width: 600px;
}

.portal-table-fill,
.portal-table-fill > tbody,
.portal-table-fill > tbody > tr,
.portal-table-fill > tbody > tr > td {
    width: 100%;
}

.customerlist td,
.userlist td,
.addaccount td,
.tariffsummarylist td,
.simlist td,
.simlist_header td,
.pagedtable-no-offset td,
.searcheslist td,
.simwildcardsearchtable td,
.userdetailtable td,
.table-list-default td {
    font-size: var(--portal-table-font-size);
    padding: var(--portal-table-cell-padding);
}

.simlist td a,
.simlist_header td a {
    font-size: inherit;
}

#simsearch-list {
    max-width: 100%;
    overflow-x: hidden;
}

#simsearch-list .simlist,
#simsearch-list .simlist_header {
    table-layout: fixed;
    min-width: 0;
    max-width: 100%;
}

#simsearch-list .simlist_header td {
    width: auto !important;
}

#simsearch-list .simlist td,
#simsearch-list .simlist_header td {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

#simsearch-list .simlist [class*="portal-min-col-"] {
    min-width: 0 !important;
}

#simsearch-list .simlist .portal-simlist-account-col { width: 70px; }
#simsearch-list .simlist .portal-simlist-iccid-col { width: 160px; }
#simsearch-list .simlist .portal-simlist-msisdn-col { width: 110px; }
#simsearch-list .simlist .portal-simlist-tariff-col { width: 185px; }
#simsearch-list .simlist .portal-simlist-status-col { width: 75px; }

#simsearch-list .simlist.portal-simlist-view-settings .portal-simlist-tariff-col {
    width: 345px;
}

#simsearch-list .simlist .portal-simlist-account-cell {
    width: 70px;
}

#simsearch-list .simlist .portal-simlist-iccid-cell {
    max-width: none;
    min-width: 160px !important;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    width: 160px;
}

#simsearch-list .simlist .portal-simlist-msisdn-cell {
    max-width: none;
    min-width: 110px !important;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    width: 110px;
}

#simsearch-list .simlist .portal-simlist-iccid-cell > div,
#simsearch-list .simlist .portal-simlist-msisdn-cell > div,
#simsearch-list .simlist .portal-simlist-iccid-cell a,
#simsearch-list .simlist .portal-simlist-msisdn-cell a {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    width: auto;
}

#simsearch-list .simlist .portal-simlist-tariff-cell {
    overflow: hidden;
}

#simsearch-list .simlist .portal-simlist-tariff-cell .portal-truncate {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#simsearch-list .simlist .portal-simlist-status-cell {
    width: 75px;
}

#simsearch-list .simlist.portal-simlist-view-settings .portal-simlist-tariff-cell {
    width: 345px;
}

#simsearch-list .simlist .portal-simlist-lanip-col,
#simsearch-list .simlist .portal-simlist-wanip-col,
#simsearch-list .simlist .portal-simlist-lanip-cell,
#simsearch-list .simlist .portal-simlist-wanip-cell {
    max-width: none;
    min-width: 95px !important;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    width: 95px;
}

#simsearch-list .simlist .portal-simlist-profile-col,
#simsearch-list .simlist .portal-simlist-profile-cell {
    width: 45px;
}

#tariffsummary_window .tariffsummarylist {
    table-layout: fixed;
    min-width: 0;
    max-width: 100%;
}

#tariffsummary_window .tariffsummarylist td {
    box-sizing: border-box;
}

#tariffsummary_window .tariffsummarylist [class*="portal-min-col-"] {
    min-width: 0 !important;
}

#tariffsummary_window .tariffsummarylist td:nth-child(1) { width: 13%; }
#tariffsummary_window .tariffsummarylist td:nth-child(2) { width: 6%; }
#tariffsummary_window .tariffsummarylist td:nth-child(3) { width: 33%; }
#tariffsummary_window .tariffsummarylist td:nth-child(4),
#tariffsummary_window .tariffsummarylist td:nth-child(5),
#tariffsummary_window .tariffsummarylist td:nth-child(6),
#tariffsummary_window .tariffsummarylist td:nth-child(7),
#tariffsummary_window .tariffsummarylist td:nth-child(8) { width: 7%; }
#tariffsummary_window .tariffsummarylist td:nth-child(9) {
    overflow: visible;
    white-space: nowrap;
    width: 13%;
}

#tariffsummary_window .tariffsummarylist td:nth-child(3) a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customerlist th,
.userlist th,
.addaccount th,
.tariffsummarylist th,
.simlist th,
.simlist_header th,
.pagedtable-no-offset th,
.searcheslist th,
.simwildcardsearchtable th,
.userdetailtable th,
.table-list-default th {
    font-size: var(--portal-table-header-font-size);
    padding: var(--portal-table-cell-padding);
}

.portal-field-value,
.portal-detail-value {
    font-weight: bold;
    min-width: 110px;
    overflow-wrap: anywhere;
}

.portal-detail-label {
    min-width: 82px;
    background-color: white;
    color: black;
}

.portal-detail-value-ip {
    white-space: nowrap;
    overflow-wrap: normal;
}

.portal-detail-value-long {
    white-space: normal;
    overflow-wrap: anywhere;
}

.portal-simdetail-table .portal-sim-settings-table {
    table-layout: auto;
    width: 100% !important;
    min-width: 0 !important;
}

.portal-simdetail-table .portal-sim-settings-table td,
.portal-simdetail-table .portal-sim-settings-table .portal-detail-label,
.portal-simdetail-table .portal-sim-settings-table .portal-detail-value {
    box-sizing: border-box;
}

.portal-simdetail-table .portal-sim-settings-table .portal-detail-label {
    min-width: 82px;
    white-space: nowrap;
}

.portal-simdetail-table .portal-sim-settings-table .portal-detail-value {
    min-width: 110px;
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: normal;
}

.portal-simdetail-table .portal-sim-settings-table .portal-detail-value-long {
    white-space: normal;
    overflow-wrap: anywhere;
}

.portal-min-col-30 { min-width: 30px; }
.portal-min-col-40 { min-width: 40px; }
.portal-min-col-50 { min-width: 50px; }
.portal-min-col-60 { min-width: 60px; }
.portal-min-col-65 { min-width: 65px; }
.portal-min-col-70 { min-width: 70px; }
.portal-min-col-75 { min-width: 75px; }
.portal-min-col-80 { min-width: 80px; }
.portal-min-col-82 { min-width: 82px; }
.portal-min-col-85 { min-width: 85px; }
.portal-min-col-90 { min-width: 90px; }
.portal-min-col-95 { min-width: 95px; }
.portal-min-col-100 { min-width: 100px; }
.portal-min-col-110 { min-width: 110px; }
.portal-min-col-115 { min-width: 115px; }
.portal-min-col-120 { min-width: 120px; }
.portal-min-col-125 { min-width: 125px; }
.portal-min-col-128 { min-width: 128px; }
.portal-min-col-130 { min-width: 130px; }
.portal-min-col-145 { min-width: 145px; }
.portal-min-col-150 { min-width: 150px; }
.portal-min-col-160 { min-width: 160px; }
.portal-min-col-170 { min-width: 170px; }
.portal-min-col-190 { min-width: 190px; }
.portal-min-col-245 { min-width: 245px; }
.portal-min-col-250 { min-width: 250px; }
.portal-min-col-300 { min-width: 300px; }
.portal-min-col-350 { min-width: 350px; }
.portal-min-col-365 { min-width: 365px; }
.portal-min-col-397 { min-width: 397px; }
.portal-min-col-419 { min-width: 419px; }
.portal-min-col-460 { min-width: 460px; }
.portal-min-col-530 { min-width: 530px; }
.portal-min-col-800 { min-width: 800px; }
.portal-min-col-880 { min-width: 880px; }

.portal-fill-col {
    width: 100%;
}

.portal-search-main-input,
.portal-search-side-input {
    box-sizing: border-box;
    max-width: calc(100% - 60px);
}

.portal-search-main-input {
    width: calc(100% - 60px);
}

.portal-search-side-input {
    width: calc(100% - 60px);
}

.portal-truncate {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-wrap {
    white-space: normal;
    overflow-wrap: anywhere;
}

#login,
#loginfailed,
#noservice,
#kickedout {
    font-size: 11px;
}

#login input,
#login button,
#loginfailed input,
#loginfailed button,
#noservice button,
#kickedout button {
    font-size: 11px;
}

#login > table > tbody > tr > td,
#loginfailed > table > tbody > tr > td,
#noservice > table > tbody > tr > td,
#kickedout > table > tbody > tr > td {
    height: clamp(260px, calc(100vh - 170px), 450px);
}

@media (max-width: 999px) {
    #container_page {
        min-width: var(--portal-shell-min-width);
    }

    #menu_top_left {
        width: auto;
        max-width: 48%;
        padding-left: 12px;
    }

    #menu_top_right {
        font-size: 10px;
    }
}

@media (max-height: 500px) {
    #container_window_main {
        min-height: 0;
        height: auto !important;
    }

    #login > table > tbody > tr > td,
    #loginfailed > table > tbody > tr > td,
    #noservice > table > tbody > tr > td,
    #kickedout > table > tbody > tr > td {
        height: clamp(180px, calc(100vh - 150px), 320px);
    }

    #container_footer {
        margin-top: 8px;
        height: 28px;
    }
}

/* Wide desktop: match user browser zoom (~120%) without affecting narrow viewports. */
@media (min-width: 1400px) {
    html {
        zoom: 1.2;
    }

    #container_page {
        min-height: calc(100vh / 1.2);
    }
}