:root {
    /* Overrides warning pills/badges/text so that it isn't such a bright, unreadable, yellow */
    --bs-warning-rgb: 231,116,0;
    --bs-warning: #E77400;
    --bs-warning-hover-bg: #EE9C49;

    /* The green MyAccount uses for the active menu marker and the order summary
       subtitles. Not Bootstrap's success colour, which stays at its default
       below. Not a colour the public website uses either. */
    --zg-green: #4da42d;

    /* Styles for the LHS and Top Menu */
    --zg-menu-text-colour: #212529;
    --zg-menu-active-bg: #e5ede2;
    --zg-menu-hover-bg: #E8E8E8;
    --zg-menu-active-hover-bg: #bde4b7;

    /*  Incase we want to come back to override the success colours, this is what was previously used.

        --bs-success: #28A745;
        --bs-success-rgb: 40, 167, 69;
        --bs-success-hover-bg: #218838;
        --bs-success-hover-border:#1e7e34;

        success button classes are commented out below.

        Alternative darker Info (light blue) colour if required so that outline badges with info colour will work.
        --bs-info-rgb: 11,168,200
        --bs-info: #0BA8C8;
        --bs-info-hover-bg: #51C1D8;
    */
}

/*
.btn-success {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

.btn-success:hover {
    background-color: var(--bs-success-hover-bg);
    border-color: var(--bs-success-hover-border);
}
*/

body {
    font-family: Roboto, "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial;
}
/*Purpose is to make the entries per page selector line up with the datatable items*/
div.dt-container div.dt-length {
    padding-left: 8px;
}

/* Consolidate after MyAccount 2025 Update complete */
body.newstylepage {
    background-color: #f2f2f2;
}

/* Topbar custom class begin*/
.dropdown-option {
    padding: 3px;
    padding-left: 10px;
    display: flex;
    color: var(--zg-menu-text-colour);
    align-items: center;
    align-content: center;
}

a.dropdown-option:hover,
button.dropdown-option:hover {
    background: var(--zg-menu-hover-bg);
    color: inherit;
    text-decoration: none;
    transition: all 0.5s;
}

.dropdown-option.active{
    background: var(--zg-menu-active-bg);
    position:relative;
}

.dropdown-option.active:hover {
    background: var(--zg-menu-active-hover-bg);   
}

.dropdown-option.active::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background-color: #4da42d;
}

.dropdown-option .bi {
    font-size: 20px;
    padding: 5px;
}

.dropdown-option div {
    font-size: 14px;
    padding-left: 10px;
}

.dropdown-option div small {
    font-size: 10px;
    color:#808080;
}

@media (max-width: 992px) {
    .navbar-nav .dropdown-menu {
        position: absolute;
    }
}

/* Overrides BS class so that the line is dotted. */
.dropdown-divider {
    border-top: 2px dotted var(--bs-dropdown-divider-bg);
}

.topnav-label-group a {
    text-decoration: none;
    color: inherit;
}

.topnav-label-group a:not(:last-child)::after {
    content: "|";
    margin-left: 4px;
    margin-right: 4px;
}
/* Topbar custom class end*/

/* Manage Bar Custom class begin */
/* This is so that the divs in the manage menu bar on the service details pages do not take up space when they are empty */
#manage_card_body > div:empty {
    display: none;
}
/* Manage bar Custom class end */

.partner-discount-label {
    display: inline-flex;
    /* Baseline, not start: when the name wraps, the "(x%) ?" tag sits on the first line of the
       name rather than dropping below it. */
    align-items: baseline;
    column-gap: 0.25rem;
    max-width: 100%;
}

/* Only the name is squeezed - it wraps inside ~17 characters and shrinks further if the column is
   narrower than that. */
.partner-discount-label .partner-discount-name {
    max-width: 17ch; /* ~17 characters wide */
    word-break: break-word; /* break long words if needed */
    white-space: normal; /* allow wrapping */
}

/* The nominal percentage and the ? icon travel together as one unbreakable, non-shrinking unit.
   Without this the browser takes the break opportunity between the text and the icon's box and
   orphans the ? onto a line of its own. */
.partner-discount-label .partner-discount-rate {
    flex: none;
    white-space: nowrap;
}

/*Reqaccess Custom Styling Begin*/
.reqaccess.disabled {
    color: #aaa !important;
    text-decoration: none;
    cursor: default;
    pointer-events: none;
    opacity: 0.7;
}
/*Reqaccess Custom styling end*/

/* Nav Tabs custon styling begin*/
.nav-tabs .nav-item:first-child .nav-link {
    margin-left: 1rem; /* Same as nav-tabs padding-left */
}
/* Nav Tabs custom styling end*/

/*Nav bar class begin*/
.btn.disabled {
    color: inherit /* Disabled buttons look more disabled when the text is greyish */
}

.navbar-brand img{
    max-height: 35px;
}

#headbar .navbar-nav .nav-link {
    color: #bfbfbf;
    font-size: 14px;
}

#headbar .navbar-nav .other {
    color: #bfbfbf !important;
}

#headbar {
    background: #232323;
}

/* align dropdowns below headbar */
.dropdown-menu[data-bs-popper] {
    margin-top: 0.75rem;
}

/* Hide some navbar items while we are still in horizontal menu but getting smaller*/
@media screen and (max-width: 1300px) and (min-width: 1200px) {
    #headbar .hideifnarrowhorizontalmenu {
        display: none;
    }
}

.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar.active {
    min-width: 55px;
    max-width: 55px;
    margin-right: 0px !important;
}

#sidebar .side-nav-icon {
    color: var(--zg-menu-text-colour);
}

#sidebar .sidebar-header button {
    width: 100%;
    background: inherit;
    border: none;
}

#sidebar.active .sidebar-header button span {
    margin-left: 85%;
}

#sidebar .sidebar-header button span {
    margin-left: 90%;
}

/*Hide side bar dropdown text when side bar is active*/
#sidebar.active .dropdown-toggle .dropdown-text {
    display: none;
}

#sidebar a[data-bs-toggle="collapse"] {
    position: relative;
}

#sidebar.active .dropdown-toggle .trigger-icon {
    display: block;
    position: absolute;
    right: 10px;
    transform: translateY(-50%);
}

#sidebar .dropdown-toggle .trigger-icon {
    display: block;
    position: absolute;
    top: 55%;
    right: 20px;
    transform: translateY(-50%);
}

#sidebar ul li .dropdown-toggle::after {
    display: none;
}

/* The Catalog row keeps its chevron outside the anchor, as a button that owns
   the collapse, so the name can be a real link. Position it against the row and
   not the list item, because the list item also holds the expanded tree. */
#catalog_dropdown .zg-catalog-row {
    position: relative;
}

/* The chevron is a button, so it inherits neither the sidebar font size nor the
   row's click area. Both are set here. The box is 32 by 36 with the icon centred,
   which keeps the icon where it was while giving it a usable target. */
#catalog_dropdown .zg-catalog-row > .trigger-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2.25rem;
    position: absolute;
    top: 55%;
    right: 12px;
    transform: translateY(-50%);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
}

#sidebar.active #catalog_dropdown .zg-catalog-row > .trigger-icon {
    right: 2px;
}

/* Hovering the chevron highlights the row, as hovering the name does. The
   chevron sits beside the anchor, so the anchor's own hover rule cannot see it. */
#catalog_dropdown .zg-catalog-row:hover > a {
    background: var(--zg-menu-hover-bg);
}

#catalog_dropdown .zg-catalog-row:hover > a.active {
    background: var(--zg-menu-active-hover-bg);
}

#sidebar p {
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

#sidebar a, a:hover, a:focus {
    color: inherit;     
    text-decoration: none;
    transition: all 0.5s;
}

#sidebar {
    min-width: 256px;
    max-width: 256px;
    max-height: 100%;
    min-height: 100vh;
    background: #FFFFFF;
    transition: all 0.5s;
    position: relative;
    z-index: 0;
}

/* Consolidate after MyAccount 2025 Update complete */
#sidebar.oldstylepage {
        border-right: solid 1px rgba(0,0,0,0.175);
        margin-right: 35px;
    }

#sidebar.newstylepage {
    }


.sidebar_toggle_open {
    cursor: pointer;
    font-size: 30px;
    display: none;
    background: rgba(220, 220, 220, 0.5);
    z-index: 1;
    position: sticky;
    top: 0;
    left: 0;
}

.sidebar_toggle_close {
    cursor: pointer;
    font-size: 30px;
    display: none;
    background: rgba(220, 220, 220, 0.5);
    z-index: 1;
    position: sticky;
    top: 0;
    left: 100%
}

@media screen and (max-width: 500px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    #sidebar.active {
        display: none;
    }

    /*Make aside nav animate overlay when window size datalist small*/
    #sidebar {
        position: fixed;
        z-index: 1;
        top: 0;
        margin-right: 0 !important;
        overflow-y: auto;
        min-height: 100% !important;
    }
}

#sidebar ul li a {
    padding: 10px;
    padding-left: 15px;
    font-size: 14px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    color: var(--zg-menu-text-colour);
}

#sidebar ul li a:hover {
    background: var(--zg-menu-hover-bg);
}

#sidebar ul ul li a {
    font-size: 14px;
    padding-left: 30px;
}

#sidebar ul ul a.active {
    background: #E8E8E8;
}

#sidebar ul li a.active {
    background: var(--zg-menu-active-bg);
    position:relative;
}

#sidebar ul li a.active:hover{
    background: var(--zg-menu-active-hover-bg);  
}

#sidebar ul li a.active::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background-color: #4da42d;
}

#sidebar ul li .dropdown-text {
    color: var(--zg-menu-text-colour);
    padding: 2px 0px 0px 5px;
}

#content {
    max-width: 95%;
}

#sidebar .nested-dropdown ul ul li a {
    font-size: 14px;
    padding-left: 50px;
}

/*Nav bar class end*/

/* New MyAccount 2025 heading font styling */
h5, .h5 {
    font-size: 1.1rem;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    font-weight: 600;
}

/*catalog class begin*/
div.summarysubtitle {
    color: #B1B1B1;
    font-size: 0.8rem;
    margin-top: 0.33rem;
    font-weight: bold;
}

.productsummary {
    border-radius: 4px;
    background: #fcfcfc;
    color: #313131;
    padding: 10px 18px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16),0 1px 1px 0 rgba(0,0,0,0.12) !important;
    margin: 0px 0px 0px 0px !important;
}

.productsummary h3 {
    color: #dadada;
    font-size: 34px;
    margin-top: 5px;
}

.well {
    background: #fcfcfc;
}

.well h3 {
    margin-top: 0px;
}

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    border: 1px solid #e3e3e3;
    border-radius: 0px;
    background: #ffffff;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16),0 1px 1px 0 rgba(0,0,0,0.12) !important;
}

.volume-link {
    color: #aaa;
    font-size: 12px;
}

.volume-link:hover {
    color: #E6EDB6;
    font-size: 12px;
}

.Approx-price {
    color: #aaa;
    font-size: 12px;
}

.border-shadow {
    box-shadow: 0px 0px 0px rgba(212,212,212,1);
}

.thin-border-dashed {
    height: 24px;
    border-bottom: dashed;
    border-width: thin;
}

span.summary_item small {
    float: right;
    color: #454545;
    font-size: 14px;
}

div.summary_item small {
    color: #454545;
    font-size: 14px;
}
.glyphicons-circle_question_mark{
    color: #c2c2c2 !important;
}

#purchase-title h1{
    margin-bottom: 0px !important;
}
#purchase-title .glyphicons-circle_question_mark, #purchase-title .glyphicons-circle_info {
    font-size: 20px;
    color: #c2c2c2 !important;
}

/*catalog class end*/
.well {
    background: #fcfcfc;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16),0 1px 1px 0 rgba(0,0,0,0.12) !important;
}


.alert-error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert-error hr {
  border-top-color: #e4b9c0;
}

.button-link {
    background: none !important;
    border: none;
    padding: 0 !important;
    color: #069;
    text-decoration: underline;
    cursor: pointer;
}

.hover-error {
    width: 25px;
    height: 20px;
}

.reserve-space-option {
    min-height: 63px;
}

.reserve-space-option-bar {
    min-height: 99px;
}

.big-checkbox {
    height: 22px;
    width: 22px;
    vertical-align: middle;
}

/*Service details section begin*/
#aliasedit_btn i{
    margin-top:46px;
}

#content #service_title{
    margin-left: auto;
}

#service_title h1 {
    margin-bottom: 0px !important;
}

.topbreadcrumb {
    padding: 0 0 10px 0;
    font-size: 80%;
}

.slidertitle {
    font-size: 15px;
    padding-left: 5px;
}

.sliderpaneltitle {
    font-size: 17px;
    padding: 0;
    margin-bottom: 0rem;
}


.majorstat {
    font-size: 34px;
    display: block;
}

.minorstat {
    display: block;
    padding: 5px 0 0 0;
}

.stattitle {
    display: block;
    font-size: 15px;
    color: #999;
    padding: 20px 0 3px 0;
    font-weight: bold;
}

    .stattitle.first {
        padding-top: 10px;
    }

.detailtitle {
    display: block;
    font-size: 15px;
    color: #999;
    padding: 10px 0 0 0;
    font-weight: bold;
}

.stattitle .first {
    display: block;
    font-size: 15px;
    color: #999;
    padding: 5px 0 10px 0;
    font-weight: bold;
}

.progress-bar {
        overflow:visible;
}

.vm_status_container {
    height: 300px;
    width: 300px;
    position: relative;
    margin: 15px auto auto;
}

.vm_status_container_legacy {
    height: 163px;
    width: 163px;
    position: relative;
    margin: 15px auto auto;
}

.vm_status {
    float: left;
    position: absolute;
    left: 200px;
    top: -15px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    border: 3px solid #f5f5f5;
}

.vm_status_legacy {
    float: left;
    position: absolute;
    left: 120px;
    top: -15px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    border: 3px solid #f5f5f5;
}

.vcc_status {
    float: left;
    position: absolute;
    left: 45px;
    top: 15px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    border: 3px solid #f5f5f5;
}

.vm_status_text {
    margin-top: 13px;
    color: white;
}

.vm_status.unknownvm {
    background-color: #333;
}

.vm_status_legacy.unknownvm {
    background-color: #333;
}

.vm_status.unknownvm .vm_status_text {
    font-size: 80%;
}

.vm_status_legacy.unknownvm .vm_status_text {
    font-size: 80%;
}

.vm_status .vm_status_text.pulse-spinner {
    margin-left: -3px;
    margin-top: -3px;
}

.vm_status_legacy .vm_status_text.pulse-spinner {
    margin-left: -3px;
    margin-top: -3px;
}

.pulse-spinner {
    width: 60px;
    height: 60px;
    background-color: #FFF;
    border-radius: 100%;
    -webkit-animation: scaleout 1.0s infinite ease-in-out;
    animation: scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes scaleout {
    0% {
        -webkit-transform: scale(0.0)
    }

    100% {
        -webkit-transform: scale(1.0);
        opacity: 0;
    }
}

@keyframes scaleout {
    0% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }

    100% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
        opacity: 0;
    }
}

.pulse-spinner2::after {
    width: 62px;
    height: 62px;
    border: 5px solid transparent;
    border-right-color: #333; /* #592109 - browny*/
    border-left-color: #333;
    animation: halfspin 0.75s ease infinite;
    -webkit-animation: halfspin 0.75s ease infinite;
    border-radius: 100%;
    content: "";
    display: block;
    position: absolute;
    top: -4px;
    left: -4px;
}


@keyframes halfspin {
    to {
        transform: rotate( 180deg );
        -webkit-transform: rotate( 180deg );
    }
}

@-webkit-keyframes halfspin {
    to {
        transform: rotate( 180deg );
        -webkit-transform: rotate( 180deg );
    }
}

.builder_spin {
    position: relative;
    float: left;
    width: 10px;
    height: 10px;
}

#builder_spin_main {
    animation: build_spin_main 8s 0s infinite ease-in;
    -webkit-animation: build_spin_main 8s 0s infinite ease-in;
    transform-origin: 45px;
    width: 60px;
    position: relative;
    left: -15px;
    margin-left: auto;
    margin-right: auto;
}

#builder_spin_1 {
    animation: build_spin_in 8s 0s infinite linear;
    -webkit-animation: build_spin_in 8s 0s infinite linear;
    background: #0a3b1e;
    top: 0;
}

#builder_spin_2 {
    background: #0d7231;
    top: 0;
    left: 50%;
}

#builder_spin_3 {
    background: #0DCC44;
    top: 0;
    left: 50%;
}

#builder_spin_4 {
    background: #10FF55;
    left: 50%;
}

#builder_spin_5 {
    animation: build_spin_in 8s 2s infinite linear;
    -webkit-animation: build_spin_in 8s 2s infinite linear;
    background: #ACFFC4;
    left: 50%;
}

#builder_spin_6 {
    background: #0a3b1e;
    left: 50%;
}

#builder_spin_7 {
    animation: build_spin_in 8s 4s infinite linear;
    -webkit-animation: build_spin_in 8s 4s infinite linear;
    background: #0d7231;
    left: 50%;
}

#builder_spin_8 {
    background: #0DCC44;
    left: 50%;
}

#builder_spin_9 {
    animation: build_spin_in 8s 6s infinite linear;
    -webkit-animation: build_spin_in 8s 6s infinite linear;
    background: #0DCC44;
    left: 50%;
}

@keyframes build_spin_main {
    20% {
        transform: rotate( 0deg );
        -webkit-transform: rotate( 00deg );
    }

    25% {
        transform: rotate( 90deg );
        -webkit-transform: rotate( 90deg );
    }

    45% {
        transform: rotate( 90deg );
        -webkit-transform: rotate( 90deg );
    }

    50% {
        transform: rotate( 180deg );
        -webkit-transform: rotate( 180deg );
        transform-origin: center;
    }

    70% {
        transform: rotate( 180deg );
        -webkit-transform: rotate( 180deg );
        transform-origin: center;
    }

    75% {
        transform: rotate( 270deg );
        -webkit-transform: rotate( 270deg );
        transform-origin: center;
    }

    95% {
        transform: rotate( 270deg );
        -webkit-transform: rotate( 270deg );
        transform-origin: center;
    }

    100% {
        transform: rotate( 360deg );
        -webkit-transform: rotate( 360deg );
        transform-origin: center;
    }
}

@keyframes build_spin_in {
    0% {
        left: 0;
        opacity: 0;
    }

    5% {
        left: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
        left: 50%;
    }

    60% {
        opacity: 0;
        left: 50%;
    }

    100% {
        left: 50%;
        opacity: 0;
    }
}

@-webkit-keyframes build_spin_in {
    0% {
        left: 0;
        opacity: 0;
    }

    25% {
        opacity: 1;
        left: 100%;
    }
}

.vm_status.buildingvm {
    background-color: rgb(255,128,0); /* #D94F17 */
    font-size: 14px;
}

.vm_status_legacy.buildingvm {
    background-color: rgb(255,128,0); /* #D94F17 */
    font-size: 14px;
}

.vm_status.statusfailed {
    background-color: rgb(217,0,0);
}

.vm_status_legacy.statusfailed {
    background-color: rgb(217,0,0);
}

.vm_status.poweredoffvm {
    background-color: rgb(217,0,0);
    font-size: 20px;
}

.vm_status_legacy.poweredoffvm {
    background-color: rgb(217,0,0);
    font-size: 20px;
}

.vm_status.poweredonvm {
    background-color: rgb(45,177,52);
    font-size: 20px;
}

.vm_status_legacy.poweredonvm {
    background-color: rgb(45,177,52);
    font-size: 20px;
}

.vm_status.suspendedvm {
    background-color: rgb(0,109,217);
}

.vm_status_legacy.suspendedvm {
    background-color: rgb(0,109,217);
}

.vm_status.schedule_enabled {
    background-color: rgb(45,177,52);
    font-size: 12px;
}

.vm_status_legacy.schedule_enabled {
    background-color: rgb(45,177,52);
    font-size: 12px;
}

.vm_status.schedule_disabled {
    background-color: rgb(217,0,0);
    font-size: 12px;
}

.vm_status_legacy.schedule_disabled {
    background-color: rgb(217,0,0);
    font-size: 12px;
}

.vcc_status.enabled {
    background-color: rgb(45,177,52);
    font-size: 12px;
}

.vcc_status.disabled {
    background-color: rgb(217,0,0);
    font-size: 12px;
}

.summary-body {
    padding-right: 0px;
}

.summary.summary-body-gray > .summary-body {
    background: #f2f2f2;
    color: black;
}

.summary.summary-body-gray > .summary-body h3 {
    text-align: center;
    color: white;
}

.summary.summary-body-gray > .summary-body a {
    text-align: center;
    color: rgb(30, 181, 58);
    font-size: 12px;
}

.summary_item {
    display: block;
    margin-bottom: 0px;
}

.summary_item small {
    float: right;
    color: #fff;
    font-size: 14px;
}

.fine_print {
    color: #aaa;
    font-size: 12px;
}

span.summarysubtitle {
    color: #4DA42D;
    font-size: 15px;
    display: block;
    padding: 8px 0 0 0;
}

.separator-sm {
    padding: 5px 0;
    display: block;
}

.separator-sm.bottom {
    padding: 0 0 5px;
}

.separator-sm.top {
    padding: 10px 0 0;
}

.service_image {
    display: block;
    margin: 0px auto;
    text-align: center;
}

.service_image_legacy {
    display: block;
    margin: 10px auto 30px auto;
}

.service_btn_centered {
    display: table;
    text-align: center;
    margin: 0 auto 10px;
}

.bs-callout{
	padding:20px;
	margin-bottom:10px;
	border:1px solid #eee;
	border-left-width:5px;
	border-radius:3px
}

.bs-callout h4{
	margin-top:0;
	margin-bottom:5px
}


.bs-callout p:last-child{
	margin-bottom:0
}

.bs-callout code{
	border-radius:3px
}

.bs-callout+.bs-callout{
	margin-top:-5px
}

.bs-callout-danger{
	border-left-color:#d9534f
}

.bs-callout-danger h4{
	color:#d9534f
}

.bs-callout-warning{
	border-left-color:#f0ad4e
}

.bs-callout-warning h4{
	color:#f0ad4e
}

.bs-callout-info{
	border-left-color:#5bc0de
}

.bs-callout-success{
	border-left-color:rgb(45,177,52)
}

.bs-callout-success h4{
	color:rgb(45,177,52)
}

.bs-callout-info {
    background: #F5F8FA;
    color: #31708f;
    border-color: #bce8f1;
}

.bs-callout-danger {
    background: #FFEFEF;
    border-color: #d9534f;
}

.nav {
    margin: 20px 0 20px 0;
}

.navheader {
    border: none;
    display: block;
    height: 80px;
    background: #454545;
}
/*Service details section end*/

.icon-2x {
    font-size: 2em;
}

.icon-3x {
    font-size: 3em;
}

.icon-4x {
    font-size: 4em;
}

.icon-5x {
    font-size: 5em;
}

.icon-btn-sm {
    font-size: 16px;
    padding: 0 4px;
}

.auto-width-table-display {
    display: table;
}
.auto-width-table-display > .row {
    display: table-row;
    notgrid-template-columns: auto auto;
    not-padding: 5px;
    notborder: 1px solid black;
}
.auto-width-table-display > .row > * {
    notborder: 1px solid black;
    display: table-cell;
}

.auto-width-table-display > .row .col {
    width: 100%
}

.accordion div.card:only-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: calc(0.25rem - 1px);
}

.popover{
    width: max-content;
}

.popover-header {
    background-color: white;
    border-bottom: none;
    padding-bottom:0;
    padding-top: 16px;
}


.btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.btn-info:hover {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
}

a, .btn-link {
    text-decoration: none;
}

.btn-delete-details {
    margin-right: 0.4rem;
}

.btn-right {
    margin-right: 0.1rem !important;
}

.bd-highlight {
    background-color: rgba(86,61,124,0.15);
    border: 1px solid rgba(86,61,124,0.15);
}

.flex-servicecontainer {
    border-radius: 1.5rem;
    border: 1px solid #dee2e6;
    padding: 20px;
    margin: 20px;
}

.action-button {
    color: #fff;
    background-color: #0D6EFD;
    border-color: #0D6EFD;
}

.action-button:hover {
    border-color: black;
}

.action-button .disabled {
    color: #888;
    background-color: #f8f9fa;
    border-color: #888;
}

.change-history-table {
    border: none;
    margin: 0px;
    margin-top: 8px;
}


.change-history-table-row {
    border-bottom: 1px;
    border-bottom-color: #dee2e6;
    border-bottom-style: solid;
}

.change-history-table-row:last-child {
    border-bottom: none;
}

.change-history-table-data {
    border: none;
    vertical-align: text-top;
    padding: 0.5rem;
}

#more_history_button {
    background-color: #fff;
    color: #212529;
}

#more_history_button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.service-text {
    color: #000;
    font-weight:bold;
}

.modal-table {
    border: none;
    margin: 0px;
    table-layout: auto;
    width: 100%;
}

.modal-table-header {
    border: none;
    table-layout: auto;
    width: 100%;
}

.modal-table-row {
    border: none;
}

.table thead > tr > th.modal-table-col-header {
    border: none;
}

.modal-table-body {
    table-layout: auto;
    width: 100%;
}

.modal-usage-table {
    border: none;
    margin: 0px;
    table-layout: auto;
    width: 100%;
    display: none;
}

.modal-usage-table-body {
    table-layout: auto;
    width: 100%;
}

.service-container {
    margin: 3px;
    padding: 0px;
}

.service-modal-container {
    max-width: 100%;
}

.service-vm-container {
    max-width: 100%;
    padding-top: 0.5rem;
}

.service-history-container {
    table-layout: auto;
}

.service-col {
    padding-right: 0px;
    padding-left: 0px;
}

.title-h5 {
    margin: 0px;
}

.change-history-title-h5 {
    white-space: nowrap;
    margin: 0px;
}

.period-usage-title-h5 {
    margin: 0px;
    display:none;
}

.disk-and-os-table-header {
    white-space: nowrap;
}

.vm-table {
    text-align: center;
    border: none;
    margin: 0px;
    table-layout: auto;
    width: 100%;
    display: none;
}

.vm-table-header {
    border: none;
    table-layout: auto;
    width: 100%;
}

.vm-table-body {
    table-layout: auto;
    width: 100%;
}

.provision-success-colour {
    color: #28a745;
}

.provision-in-progress-colour {
    color: #ffc107;
}

.provision-failed-colour {
    color: #dc3545;
}

.change-in-progress-colour {
    color: #0dcaf0;
}

.low-usage-colour {
    color: black;
}

.high-usage-colour {
    color: orange;
}

.extreme-usage-colour {
    color: red;
}

.messages-align-center {
    text-align: center;
}

.service-errors {
    width: 100%;
    margin-top: 0.25em;
}

.icon-overlay {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    color:#AFAFAF;
}

.icon-overlay .icon-bg {
    position: absolute;
    top: -0.2em;
    left: 0;
    font-size: 1.2em;
}

.icon-overlay .icon-top {
    position: absolute;
    top: -0.1em;
    left: 0;
    font-size:1.1em;
}

.icon-overlay .icon-strike {
    position: absolute;
    top: -0.4em;
    left: -0.2em;
    font-size: 2em;
    transform: rotate(25deg);
}

/* start of icon classes*/

.icon-shadow {
    --default-width: 30px;
    --default-height: 30px;
    --default-box-shadow-colour: #cccaca;
    --default-bg-colour: white;
    --default-box-shadow-thickness: 1px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--default-width);
    height: var(--default-height);
    border-radius: 50%;
    box-shadow: 0 0 0 var(--default-box-shadow-thickness) var(--default-box-shadow-colour);
    background: var(--default-bg-colour);
}

.icon-shadow .bi {
    --default-size: 1em;

    font-size: var(--default-size);
}

/* end of icon classes*/


/* override BS table classes */

.table tbody tr {
    border-top: 2px solid #dee2e6;
}
.table tbody tr:last-child {
    border-bottom: 2px solid #dee2e6;
}

/* Discount rate card (partner program): use 1px row separators instead of the
   global 2px above. ID specificity wins, so only the width is overridden -
   the solid #dee2e6 style/colour is inherited from the global rule. */
#discount_rate_card_container .table tbody tr {
    border-top-width: 1px;
}
#discount_rate_card_container .table tbody tr:last-child {
    border-bottom-width: 1px;
}

#service_details_table tfoot td {
    border-bottom: 0px;
}
/* end */

.indent-manage-items {
    text-indent: 1rem;
}

td.details-control {
    cursor: pointer;
}


.order-complete-accordion-body {
    padding: 0;
}

.order-complete-accordion-button {
    padding: 0;
}

.order-complete-accordion-button::after {
    margin-left:1rem!important;
    margin-right:auto;
}

.order-complete-accordion-button:not(.collapsed) {
    background-color: white;
    box-shadow: none;
}

.span-to-href {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
}

.width-management {
    min-width: 600px;
}

@media (min-width: 1200px){
    .width-management {
        min-width: 800px;
    }
}

@media (min-width: 2560px) {
    .width-management {
        min-width: 1000px;
    }
}

.zg-percentage-text {
    color: #E5811F;
    font-weight: bold;
}

.zg-small-grey-font {
    color: #B1B1B1;
    font-size: 0.8rem;
}

.service-detail-label-headings {
    color: #B1B1B1;
    font-size: 0.8rem;
    margin-top: 0.33rem;
    font-weight:bold;
}

.zg-col-43 {
    flex: 0 0 auto;
    width: 43%;
}

.zg-col-45 {
    flex: 0 0 auto;
    width: 45%;
}

/* Max/min width sizing mainly used for wrapping zg cards*/
.max-w-2000 {
    max-width: 2000px;
}

.max-w-1500 {
    max-width: 1500px;
}

.max-w-1250 {
    max-width: 1250px;
}

.max-w-1000 {
    max-width: 1000px;
}

.max-w-900 {
    max-width: 900px;
}

.max-w-800 {
    max-width: 800px;
}
.max-w-600 {
    max-width: 600px;
}

.max-w-500 {
    max-width: 500px;
}

.max-w-400 {
    max-width: 400px;
}

.min-w-1000 {
    min-width: 1000px;
}

/* Max/min width sizing End */

.form-switch .form-check-input[type="radio"]:checked,
.form-switch .form-check-input[type="checkbox"]:checked {
    background-color: var(--bs-success); /* Bootstrap's btn-success green */
    border-color: var(--bs-success);
    box-shadow: 0 0 0 0;
}
.form-switch .form-check-input[type="checkbox"]:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236c757d'/%3e%3c/svg%3e"); /* to change the colour replace the part after '%23' with any hexcode in fill attribute */
    border-color: var(--bs-secondary);
    box-shadow: 0 0 0 0;
}

/*modal positioning*/
/*e.g. Global Popup Spinner*/

.modal-dialog.modal-dialog-second-quarter {
    margin-top: 25vh;
}

/*modal poistioning end*/

/* Custom ZG accordion start*/
.zg-accordion .accordion-header {
    max-height: 40px;
}

.zg-accordion .accordion-button {
    padding: 0.5rem 1rem;
    min-height: 40px;
    font-weight: bold;
}

.zg-accordion .accordion-button:not(.collapsed) {
    background-color: #fff;
    box-shadow: none;
    color: #000;
}

.zg-accordion .accordion-item .accordion-button.collapsed::after {
    background-image: url("../../bootstrap-icons-1.11.3/chevron-down.svg");
    transform: rotate(0deg);
}

.zg-accordion .accordion-item .accordion-button:not(.collapsed)::after {
    background-image: url("../../bootstrap-icons-1.11.3/chevron-up.svg");
    transform: rotate(0deg);
}


.zg-accordion .accordion-button:hover {
    background-color: #f8f9fa;
    color: #6c757d;
}

.zg-accordion .accordion-button:hover::after {
    filter: opacity(0.6);
}

.zg-accordion .accordion-button:focus {
    border-color: #dee2e6;
    box-shadow: none;
}
/* Custom ZG accordion end*/

/* Custom Column Class for account profile pages*/
:root {
    --zg-input-width: 8;
    --zg-label-width: 4;
}

#account_details_container .form-group.row {
    min-height: 51px;
    align-items: center;
}

.details-page .input-col {
    flex: 0 0 calc(var(--zg-input-width) / 12 * 100%);
    max-width: calc(var(--zg-input-width) / 12 * 100%);
}
.details-page .label-col {
    flex: 0 0 calc(var(--zg-label-width) / 12 * 100%);
    max-width: calc(var(--zg-label-width) / 12 * 100%);
}

/* Custom Column Class end*/

@keyframes zgGlowPulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0); }
    25%  { box-shadow: 0 0 10px 6px rgba(var(--bs-primary-rgb), 0.45); }
    100% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0); }
}
.zg-glow-pulse { animation: zgGlowPulse 1000ms ease-out; }

/* Catalog landing page */
/* The headings are labels, not text to select. Show the plain pointer. */
#catalog_landing > h5,
.zg-catalog-section-title {
    cursor: default;
}
.zg-catalog-section-title {
    /* Green group headings, the same green as the active menu marker. */
    color: var(--zg-green);
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 0.4rem;
    margin-bottom: 1rem;
}
.zg-catalog-card {
    border: 1px solid var(--bs-border-color);
    color: inherit;
    transition: box-shadow 150ms ease-out;
}
.zg-catalog-card:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}
.zg-catalog-card-name {
    color: var(--bs-body-color);
}
/* The trailing arrow on each card, and the external link arrow. */
.zg-catalog-card-arrow {
    color: var(--zg-green);
}
/* No line clamp. The grid stretches every card in a row to the tallest one, so
   the whole description always shows and the row stays even. */
.zg-catalog-card-desc {
    color: var(--bs-secondary-color);
}