/* ---------- Support Pages Modernization ---------- */

body.supportdialog {
   background: var(--color-bg);
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   margin: 0;
   padding: 0;
}

#dashboard {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-md);
   width: 100%;
}

ul.onethird,
ul.twothirds {
   border: 1px solid var(--color-border);
   background-color: var(--color-surface-raised);
   list-style: none;
   display: block;
   padding: var(--space-md);
   min-height: 460px;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
   box-sizing: border-box;
}

ul.onethird {
   flex: 0 0 420px;
   max-width: 100%;
}

ul.twothirds {
   flex: 1 1 480px;
   max-width: 100%;
}

ul.onethird li,
ul.twothirds li {
   padding: 6px 0;
   list-style: none;
}

ul.onethird li.hdr,
ul.twothirds li.hdr {
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-md);
   color: var(--color-text-heading);
   border-bottom: 2px solid var(--color-primary-muted);
   margin-bottom: var(--space-sm);
   padding-bottom: var(--space-xs);
}

.supportblocks {
   border: 1px solid var(--color-border);
   background-color: var(--color-surface-raised);
   list-style: none;
   float: left;
   padding: var(--space-sm);
   margin: 0 var(--space-sm) var(--space-sm) 0;
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-sm);
}

.news {
   border: 1px solid var(--color-border);
   background-color: var(--color-surface-raised);
   list-style: none;
   display: block;
   float: left;
   width: 925px;
   padding: var(--space-md);
   margin-bottom: var(--space-md);
   min-height: 50px;
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-sm);
}

.news-light {
   border: 1px solid var(--color-border-subtle);
   background-color: var(--color-surface);
   list-style: none;
   display: block;
   float: left;
   width: 925px;
   padding: var(--space-md);
   margin-bottom: var(--space-md);
   min-height: 50px;
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-sm);
}

.news p {
   padding-bottom: 4px;
}

#dashboard {
   margin-top: 15px;
}

/* ---------- Buttons & Links ---------- */

.javalink,
.javaimagelink {
   color: var(--color-text);
   cursor: pointer;
   font-weight: var(--font-weight-bold);
   text-decoration: none;
   padding: 6px 12px;
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   transition: all var(--transition-fast);
   display: inline-flex;
   align-items: center;
   font-size: var(--font-size-xs);
}
	
.javalink:hover,
.javaimagelink:hover {
   border-color: var(--color-primary);
   background-color: var(--color-primary-glow);
   color: var(--color-primary);
}

.javaimagelink img {	
   vertical-align: middle;
   padding-right: 6px;
}

.popupeditorcontainer {
   padding: var(--space-lg);
   font-size: 1.0em;
   margin: 10px auto 0;
   clear: both;
   background-color: var(--color-surface);
   overflow: auto;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
}

/* ---------- Calendar Facelift ---------- */

table.calendar {
   border: 1px solid var(--color-table-border);
   border-collapse: separate;
   border-spacing: 0;
   font-size: var(--font-size-sm);
   width: 100%;
   border-radius: var(--radius-md);
   overflow: hidden;
}

table.calendar th {
   background-color: var(--color-table-header);
   font-weight: var(--font-weight-bold);
   padding: var(--space-sm);
   font-size: var(--font-size-base);
   text-align: center;
   height: 36px;
   color: var(--color-text-heading);
   border-bottom: 2px solid var(--color-primary-muted);
}

table.calendar td {
   background-color: var(--color-surface);
   border: 1px solid var(--color-table-border);
   padding: var(--space-sm);
   height: 90px;
   vertical-align: top;
   transition: background var(--transition-fast);
}

table.calendar td:hover {
   background-color: var(--color-table-row-hover);
}

table.calendar td.othermonth {
   background-color: var(--color-surface-raised);
   color: var(--color-text-muted);
}

table.calendar td.busy {
   background-color: hsl(0, 80%, 95%);
   border-color: hsl(0, 60%, 85%);
   color: var(--color-error);
}

table.calendar td.day {
   height: 10px;
}

table.calendar td.today {
   background-color: hsl(152, 55%, 94%);
   border-color: hsl(152, 45%, 80%);
   color: var(--color-success);
   font-weight: var(--font-weight-bold);
}

#ctl00_dvContent_optQueue { margin-left: 0px; margin-right: auto; }
#ctl00_dvContent_optView { margin-left: 0px; margin-right: auto; }

/* ---------- Billing & Payments ---------- */

table.billing {
   width: 100%;
   border-spacing: 0px;
   font-weight: normal;
}

table.billing td {
   vertical-align: middle;
   padding-top: 10px;
}

table.billing td.c2 {
   vertical-align: middle;
   float: right;
   font-weight: bold;
   color: var(--color-text-heading);
}

table.billing td.sm {
   vertical-align: middle;
   padding-top: 10px;
   font-size: var(--font-size-xs);
   color: var(--color-text-secondary);
}

.ccerror {
   background-color: hsl(0, 70%, 93%);
   color: var(--color-error);
   font-weight: var(--font-weight-bold);
   border: 1px solid var(--color-error-border);
   border-radius: var(--radius-sm);
   padding: var(--space-sm) var(--space-md);
   margin: 30px 0 0 25px;
   display: inline-block;
}

.ccsuccess {
   background-color: hsl(152, 55%, 94%);
   color: var(--color-success);
   font-weight: var(--font-weight-bold);
   border: 1px solid hsl(152, 45%, 80%);
   border-radius: var(--radius-sm);
   padding: var(--space-sm) var(--space-md);
   margin: 30px 0 0 25px;
   display: inline-block;
}

.ccinfo {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   background-color: var(--color-surface-raised);
   padding: var(--space-md);
   width: 570px;
   max-width: 100%;
   box-shadow: var(--shadow-sm);
}