@charset "UTF-8";
/* Import variables */
/* Import subs */
@font-face {
  font-family: "iconified";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/icon.eot?5272677");
  src: url("../fonts/icon.eot?5272677#iefix") format("embedded-opentype"), url("../fonts/icon.woff2?5272677") format("woff2"), url("../fonts/icon.woff?5272677") format("woff"), url("../fonts/icon.ttf?5272677") format("truetype"), url("../fonts/icon.svg?5272677#icon") format("svg");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Montserrat_400.eot") format("eot"), url("../fonts/Montserrat_400.woff2") format("woff2"), url("../fonts/Montserrat_400.woff") format("woff"), url("../fonts/Montserrat_400.ttf") format("truetype"), url("../fonts/Montserrat_400.svg#Montserrat") format("svg");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Montserrat_600.eot") format("eot"), url("../fonts/Montserrat_600.woff2") format("woff2"), url("../fonts/Montserrat_600.woff") format("woff"), url("../fonts/Montserrat_600.ttf") format("truetype"), url("../fonts/Montserrat_600.svg#Montserrat") format("svg");
}
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.ttf") format("truetype");
}
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../fonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fa-solid-900.ttf") format("truetype");
}
.fa-regular {
  font-weight: 400;
}

.fa-solid {
  font-weight: 900;
}

.fa-regular,
.fa-solid {
  font-family: "Font Awesome 6 Free";
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
}

.fa-trash-can::before {
  content: "\f2ed";
}

html {
  padding: 0;
  margin: 0;
  background-color: #f2f2f2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
  background-color: #f2f2f2;
  min-width: 1000px;
  margin: 0 auto;
  line-height: 1.6em;
}

/* Main Layout */
#layout-grid {
  display: grid;
  grid-template-rows: auto auto 10px;
  grid-template-columns: 12.5% 250px auto 12.5%;
  grid-gap: 10px;
}

#head {
  grid-column-start: 1;
  grid-column-end: 5;
}

#menu {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 2;
}

#content {
  grid-column-start: 3;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 2;
}

#foot {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 3;
}

/* Main Style */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  text-transform: none;
}

form {
  margin: 0;
}

#content {
  p_adding: 0 2em 2em 2em;
  min-height: 500px;
  background-color: #f2f2f2;
}

#content .contentpart {
  background-color: #ffffff;
  color: #333333;
  padding: 1em;
  margin-bottom: 1em;
  border: 1px solid #cccccc;
}

.contentpart > .contentpart {
  background-color: #f2f2f2;
}

.contentpart > table {
  margin: 1em 0;
}

.contentpart caption,
.contentpart h2 {
  font-size: 1.1em;
  margin-top: 2em;
  padding: 0 0 0 1em;
  background: #eeeeee linear-gradient(to bottom, #f2f2f2 0%, #ddd 50%);
  color: #990000;
  border-top: 1px solid #990000;
  line-height: 1.6em;
}

.contentpart caption {
  text-align: left;
  padding: 0 0.2em;
}

.contentpart td,
.contentpart th {
  padding: 0.2em;
}

#content table,
#content > table,
#content > h2 {
  margin: auto;
}

.contentpart label {
  display: inline-block;
  width: 23%;
  text-indent: 3px;
  line-height: 1.75em;
  border-radius: 0.5em;
  border: 1px solid #cccccc;
  background: #f2f2f2;
  margin-right: 0.75em;
  vertical-align: top;
}

label.real {
  display: inline;
  border: 0;
  background: transparent;
}

.contentpart label:empty {
  border: 0;
  background: transparent;
}

.contentpart th,
.contentpart label {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  text-transform: none;
}

.contentpart p,
.contentpart div {
  margin-bottom: 0.75em;
}

#content h1 {
  text-align: center;
  font-size: 1.6em;
  line-height: 2em;
  padding: 0;
  margin: 0 0 0.3em 0;
  color: #333333;
  background: transparent;
  border-radius: 0.5em;
  border: 0;
}

#content h2 a {
  color: #990000;
}

#content h3 {
  font-size: 1.1em;
  margin: 0.4em 0;
  color: #990000;
  padding: 0 0 0 1em;
}

#content h4 {
  font-size: 1.05em;
  margin: 0.4em 0;
  padding-left: 1em;
  color: #333333;
  background-color: #eeeeee;
}

td,
th {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
}

h2 {
  font-size: 1.2em;
  margin: 0 auto;
  padding: 0 0 0 1em;
  background: #eeeeee linear-gradient(to bottom, #f2f2f2 0%, #ddd 50%);
  color: #990000;
  border-top: 1px solid #990000;
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  text-align: left;
  line-height: 2.4em;
}

/* Collapsible contentparts */
h2.collapsible {
  background-image: url("../images/options.png") linear-gradient(to bottom, #f2f2f2 0%, #ddd 50%);
  background-repeat: no-repeat, repeat-y;
  background-position: center right;
  cursor: pointer;
}

div.contentpart.collapse {
  height: 0;
  border: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  transition: all 0.2s ease;
}

div.contentpart.expand {
  transition: all 0.2s ease;
}

/* Tabbed contentparts */
div.tab-content {
  display: none;
  transition: all 0.2s ease;
}

div.tab-content.active {
  display: inherit;
  transition: all 0.2s ease;
}

div.contentmenu a.tab.selected {
  color: #990000 !important;
  background-color: #FFFFFF !important;
}

#content .contentmenu {
  margin-bottom: 0.8em;
  line-height: 2em;
}

acronym,
abbr {
  cursor: help;
  white-space: nowrap;
}

acronym.icon,
abbr.icon {
  font-size: 1.2em;
  font-weight: normal;
  text-decoration: none;
}

a,
a:link {
  color: #990000;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a[href^="https:"]:after,
a[href^="http:"]:after,
a[target=_blank]:after {
  content: " " url("../images/blockblock_trans.gif");
}

.infocenter div {
  border-top: 1px solid #cccccc;
}

.infocenter {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #cccccc;
  background: #fefefe;
}

.infocenter:before {
  font-family: iconified;
  content: "\e831";
  padding-right: 0.3em;
  font-size: 1.7em;
  color: #333333;
}

.infocenter.outage div,
.infocenter.error div {
  border-top: 1px solid #990000;
}

.outage,
.error {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #990000;
  background: #fff2f2;
}

.outage:before,
.error:before {
  font-family: iconified;
  content: "\e808";
  padding-right: 0.3em;
  font-size: 1.7em;
  color: #990000;
}

.infocenter.warning div {
  border-top: 1px solid #ffbe00;
}

.warning {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ffbe00;
  background: #ffd;
}

.warning:before {
  font-family: iconified;
  content: "\e808";
  padding-right: 0.3em;
  font-size: 1.7em;
  color: #ffbe00;
}

.infocenter.ok div {
  border-top: 1px solid #070;
}

.ok,
.ticked {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #070;
  background: #efe;
}

.ok:before,
.ticked:before {
  font-family: iconified;
  content: "\e800";
  padding-right: 0.3em;
  font-size: 1.7em;
  color: #070;
}

.unticked {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #990000;
  background: #fff2f2;
}

.unticked:before {
  font-family: iconified;
  content: "\e821";
  padding-right: 0.3em;
  font-size: 1.7em;
  color: #990000;
}

.infocenter.maintenance div,
.infocenter.info div {
  border-top: 1px solid #67f;
}

.maintenance,
.info {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #67f;
  background: #eef5ff;
}

.maintenance:before,
.info:before {
  font-family: iconified;
  content: "\e807";
  padding-right: 0.3em;
  font-size: 1.7em;
  color: #67f;
}

input.error,
select.error,
textarea.error,
input.warning,
select.warning,
textarea.warning,
input.ok,
select.ok,
textarea.ok {
  padding: 0 0.2em;
  margin: 0;
}

textarea.code {
  font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
  width: 100%;
  min-height: 350px;
  margin: 15px 0 0 0;
  font-size: 13px;
  line-height: 19px;
  font-weight: 200;
}

input[type=checkbox]:focus,
input[type=radio]:focus,
input[type=text]:focus,
textarea:focus,
select:focus {
  background-color: #ffe !important;
}

input[type=checkbox],
input[type=radio] {
  vertical-align: text-bottom;
  margin: 0px;
}

input {
  padding: 0;
  margin: 0;
  height: auto;
}

input[type=submit],
input[type=button],
button.button,
a.button {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  text-transform: none;
  background-color: #990000;
  color: #ffffff;
  cursor: pointer;
  border: 0;
  border-radius: 3px;
  padding: 0.4em 1.6em;
  line-height: 1.13em;
}

input[type=submit].cancel,
input[type=button].cancel,
button.button.cancel,
a.button.cancel,
a.cancel {
  background-color: #666666 !important;
  color: #ffffff !important;
}

button.button.inactive,
button.button:disabled,
button:disabled,
a.button.inactive {
  background-color: #666666;
  color: #cccccc;
  cursor: default;
}

#content .contentmenu a,
#content .contentmenu input[type=submit],
button.button,
a.button {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  text-transform: none;
  font-size: 1em;
  background-color: #990000;
  color: #ffffff;
  cursor: pointer;
  border: 0;
  border-radius: 3px;
  padding: 0.3em 1em;
  line-height: 1.13em;
  white-space: nowrap;
}

input[type=submit]:hover:enabled,
input[type=button]:hover:enabled,
button.button:hover:enabled,
a.button:hover:enabled,
#content .contentmenu a:hover:enabled {
  background-color: #ae0a25;
  transition: all 0.2s;
  text-decoration: none;
  cursor: pointer;
}

input[type=submit]:hover:disabled,
input[type=button]:hover:disabled,
button.button:hover:disabled,
a.button:hover:disabled,
#content .contentmenu a:hover:disabled {
  cursor: default;
}

#content .contentmenu .selected {
  font-weight: 700;
  padding: 0 1em;
  white-space: nowrap;
}

#content .contentmenu .selected:before {
  font-family: iconified;
  content: "\e813 ";
  color: #990000;
}

.order_button {
  font-weight: bold;
}

input[disabled],
input[readonly],
select[disabled],
select[readonly],
textarea[disabled],
textarea[readonly] {
  color: #999;
  background-color: #dddddd;
}

#content .contentmenu a.disabled {
  pointer-events: none;
  color: #999;
  background-color: #dddddd;
}

.loopOn,
.loopon,
.striped tr:nth-child(even) {
  background-color: #dddddd;
}

.striped tr:nth-child(odd):hover {
  background-color: #fefefe;
}

input,
select,
textarea {
  color: #333333;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 14px;
  background-color: #ffffff;
  border-radius: 3px;
  border: 1px solid #A1A1A1;
  line-height: 1.6em;
  padding: 0 0.2em;
}

textarea {
  border: 1px solid #cccccc;
  font-size: 14px;
  line-height: 1.1em;
}

select {
  padding: 0.2em;
}

#domainlist {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #A1A1A1;
  box-sizing: border-box;
  background-color: #ffffff;
}

#domainlist em {
  font-size: 0.85em;
  font-style: normal;
}

#domainlist a {
  color: #333333;
  display: block;
  width: 100%;
  text-decoration: none;
}

#domainlist h2 {
  font-size: 1.2em;
  line-height: 2em;
  font-weight: 600;
  margin: 0 auto;
  background: #eeeeee linear-gradient(to bottom, #f2f2f2 0%, #ddd 50%);
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-indent: 35px;
  border-left: 1px solid #A1A1A1;
  border-right: 1px solid #A1A1A1;
  border-top: 1px solid #A1A1A1;
  border-bottom: 0;
  color: #333333;
  border-radius: 0;
}

#domainlist h2 a {
  color: #333333;
}

div#domainlist .ui-accordion-content {
  padding: 0;
  border-left: 1px solid #A1A1A1;
  border-right: 1px solid #A1A1A1;
}

div#domainlist .ui-accordion-header-icon {
  left: 1em;
}

#domainlist dl {
  clear: right;
  margin: 0;
}

#domainlist h2 .ui-icon {
  display: none;
}

#domainlist dt {
  width: 70%;
  float: left;
  text-indent: 0;
}

#domainlist h2.ready a:after,
#domainlist h2.neutral a:after {
  content: "\e816";
  color: #333333;
}

#domainlist h2.ready.ui-state-active a:after,
#domainlist h2.neutral.ui-state-active a:after {
  content: "\e817";
  color: #990000;
}

#domainlist dt.neutral {
  background-image: url("../images/domain_neutral.png");
  background-repeat: repeat-y;
  background-position: -5px center, center center;
}

#domainlist h2.neutral {
  background-image: url("../images/domain_neutral.png"), linear-gradient(to bottom, #f2f2f2 0%, #ddd 50%);
  background-repeat: repeat-y, repeat-y;
  background-position: -5px center, center center;
}

#domainlist dt.ready,
#domainlist dt.dedicated {
  background-image: url("../images/domain_ready.png");
  background-repeat: repeat-y;
  background-position: -5px center, center center;
}

#domainlist h2.ready {
  background-image: url("../images/domain_ready.png"), linear-gradient(to bottom, #f2f2f2 0%, #ddd 50%);
  background-repeat: repeat-y, repeat-y;
  background-position: -5px center, center center;
}

#domainlist dt.processing {
  background-image: url("../images/domain_processing.png");
  background-repeat: repeat-y;
  background-position: -5px center, center center;
}

#domainlist h2.processing {
  background-image: url("../images/domain_processing.png"), linear-gradient(to bottom, #f2f2f2 0%, #ddd 50%);
  background-repeat: repeat-y, repeat-y;
  background-position: -5px center, center center;
}

#domainlist dt.termination-period {
  background-image: url("../images/domain_termination-period.png");
  background-repeat: repeat-y;
  background-position: -5px center, center center;
}

#domainlist h2.termination-period {
  background-image: url("../images/domain_termination-period.png"), linear-gradient(to bottom, #f2f2f2 0%, #ddd 50%);
  background-repeat: repeat-y, repeat-y;
  background-position: -5px center, center center;
}

#domainlist dt.deleted {
  background-image: url("../images/domain_deleted.png");
  background-repeat: repeat-y;
  background-position: -5px center, center center;
}

#domainlist h2.deleted {
  background-image: url("../images/domain_deleted.png"), linear-gradient(to bottom, #f2f2f2 0%, #ddd 50%);
  background-repeat: repeat-y, repeat-y;
  background-position: -5px center, center center;
}

#domainlist dt.host-locked {
  background-image: url("../images/domain_host-locked.png");
  background-repeat: repeat-y;
  background-position: -5px center, center center;
}

#domainlist h2.host-locked {
  background-image: url("../images/domain_host-locked.png"), linear-gradient(to bottom, #f2f2f2 0%, #ddd 50%);
  background-repeat: repeat-y, repeat-y;
  background-position: -5px center, center center;
}

#domainlist h2 a:before,
#domainlist dt a:before,
#domainlist h2 abbr:before,
#domainlist dt abbr:before,
#domainlist h2 acronym:before,
#domainlist dt acronym:before,
.certlist td.status:before,
#domainlist h2 a:after,
#foot li:before {
  font-family: iconified !important;
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.3em;
  text-align: center;
  opacity: 0.4;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.1em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

#domainlist dt.ready a:before,
#domainlist dt.dedicated a:before,
#domainlist dt.ready abbr:before,
#domainlist dt.dedicated abbr:before,
#domainlist dt.ready acronym:before,
#domainlist dt.dedicated acronym:before {
  content: "\e800";
}

#domainlist dt.deleted a:before,
#domainlist dt.deleted abbr:before,
#domainlist dt.deleted acronym:before,
.certlist td.deleted:before {
  content: "\e804";
}

#domainlist dt.processing a:before,
#domainlist dt.processing abbr:before,
#domainlist dt.processing acronym:before,
.certlist td.processing:before {
  content: "\e802";
}

#domainlist dt.termination-period a:before,
#domainlist dt.termination-period abbr:before,
#domainlist dt.termination-period acronym:before,
.certlist td.expired:before {
  content: "\e803";
}

#domainlist dt.host-locked a:before,
#domainlist dt.host-locked abbr:before,
#domainlist dt.host-locked acronym:before,
#domainlist dt abbr.host-locked:before,
#domainlist dt acronym.host-locked:before {
  content: "\e801" !important;
}

#domainlist .ui-state-active {
  border: 1px solid #990000;
}

#domainlist .ui-state-active,
#domainlist .ui-state-active a {
  color: #990000;
}

#domainlist dl #active,
#domainlist dl #active a,
#domainlist dl #active + dd {
  color: #990000;
  font-weight: bold;
}

#domainlist h2.termination-period:hover a,
#domainlist h2.ready:hover a,
#domainlist h2.neutral:hover a {
  color: #990000;
}

#domainlist dd {
  margin-left: 70%;
  text-indent: 1%;
}

#domainlist dl a:hover,
#domainlist dl #active a:hover,
#domainlist dl #active + dd.hovered,
#domainlist dl dd.hovered {
  background-color: #333333;
  color: #f2f2f2;
}

#domainlistsearch {
  background: #fefefe;
  color: #333333;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  text-indent: 1em;
  text-transform: none;
  border-radius: 0.5em;
  border: 1px solid #A1A1A1;
  margin-bottom: 1em;
  padding: 0.2em 0;
}

option {
  background-color: #ffffff;
}

#foot,
#foot td,
#foot th {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  text-transform: none;
}

#foot {
  clear: both;
  background-color: #eeeeee;
  color: #333333;
  padding: 1.5em 0 0 0;
  text-align: center;
  display: none;
}

#foot table {
  width: 100%;
  margin: 1em 0 0 0;
  border-spacing: 0;
  border-top: 2px solid white;
}

#foot th {
  background-color: #fefefe;
  color: #333333;
  padding: 3em 1em 0 1em;
  margin: 0;
}

#foot td {
  background-color: #fefefe;
  color: #333333;
  padding: 0 1em 5em 1em;
  margin: 0;
}

#foot table a.icon {
  color: #333333;
  font-size: 4em;
}

a.icon:hover {
  color: #333333;
  text-decoration: none;
}

#foot ul {
  list-style: none;
  list-style-position: inside;
  margin: 1em auto;
  padding: 0;
  text-align: center;
  font-size: 0.95em;
}

#foot ul:last-of-type {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
  background-color: #ffffff;
  color: #990000;
}

#foot ul:last-of-type li {
  display: inline;
  margin: 0;
}

#foot ul:last-of-type img {
  height: 4rem;
}

#foot ul:first-of-type li {
  background-color: #eeeeee;
  color: #333333;
  margin: 0 6em;
  display: inline;
}

#foot ul:first-of-type li:before {
  content: "\e818";
  font-size: 1.2em;
  opacity: 1;
}

/* Tooltips */
.infobox {
  width: 300px;
}

/* Tables in Tooltips */
table.tooltip {
  border-collapse: collapse;
  font-size: 90%;
  display: inline-block;
}

table.tooltip td,
table.tooltip th {
  border: 1px solid #cccccc;
  padding: 0 2px;
}

table.tooltip th {
  text-align: right;
  vertical-align: top;
  background: #dddddd;
}

table.tooltip caption {
  margin: auto;
  padding: 0 0 0 1em;
  font-size: 120%;
  font-weight: bold;
  text-align: center;
  background: #dddddd;
  color: #333333;
}

table.tooltip b {
  color: #990000;
}

table .overusage {
  background: #fff2f2 !important;
}

.infobox a {
  font-size: 89%;
  font-weight: bolder;
}

.placeholder {
  cursor: help;
  vertical-align: middle;
}

.domaininfo {
  margin: 0.5em auto;
}

.domaininfo td {
  border-bottom: 1px solid #ffffff;
}

.domaininfo th {
  padding-top: 1em;
}

.icon {
  font-family: iconified !important;
  speak: none;
  text-decoration: inherit;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

button.button.icon,
button.button.icon:enabled,
a.button.icon {
  padding: 2px;
  background: transparent;
  color: #990000;
}

button.button.icon:hover,
button.button.icon:hover:enabled,
a.button.icon:hover {
  border: none;
  scale: 1.2;
  transition: 0.1s;
}

table.sortable th {
  cursor: ns-resize;
}

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
  content: " ▴▾";
}

table.nosorticons th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
  content: "" !important;
}

#DirList {
  text-align: left !important;
  background: #fff;
  margin: auto;
  border: 1px solid #cccccc;
  width: 100%;
}

#DirList table {
  width: 100%;
}

#DirList div {
  margin: 0;
}

.supplement-container {
  width: 40%;
  margin: 0 auto;
  display: none;
}

.supplement {
  position: relative;
  top: -11px;
  z-index: 10;
  box-sizing: border-box;
}

.supplement-left {
  position: absolute;
  width: 2%;
  height: 0;
  display: inline-block;
  box-sizing: border-box;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-right: 14px solid #f2f2f2;
}

.supplement-middle {
  position: absolute;
  height: 22px;
  left: 2%;
  width: 96%;
  display: inline-block;
  box-sizing: border-box;
  background-color: #f2f2f2;
}

.supplement-right {
  position: absolute;
  width: 2%;
  right: 0;
  height: 0;
  display: inline-block;
  box-sizing: border-box;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 14px solid #f2f2f2;
}

div.pagination {
  padding: 2em 0.5em 2em 0.5em;
}

#sslaccountlist td.status {
  text-align: center;
}

#sslaccountlist td.status.installed {
  color: #070;
  text-align: center;
}

ol.sslAuthTokens {
  text-align: left;
  list-style-type: lower-alpha;
}

ol.sslAuthTokens ul {
  list-style-type: none;
  margin-left: 0px;
  padding-left: 0px;
  margin-right: 10%;
  margin-bottom: 20px;
}

ol.sslAuthTokens ul li {
  margin-top: 10px;
  margin-left: 0px;
  text-align: left;
  background-color: #F2F2F2;
}

#modalScreen {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  display: none;
  z-index: 100;
}

.modalDim {
  display: table;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modalPos {
  display: table-cell;
  vertical-align: middle;
}

#modalBox {
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  background-color: #FFF;
  text-align: center;
  padding: 20px;
}

#modalBox .dlgIndicator {
  font-size: 2.5em;
}

#modalBox .dlgCloseBtn {
  margin-top: 2em;
}

#modalBox .dlgIndicator.success {
  font-size: 200%;
  color: #070;
}

#modalBox .dlgIndicator.failed {
  font-size: 200%;
  color: #990000;
}

.modal {
  width: 700px;
  background-color: #FFF;
  z-index: 120;
  border-radius: 4px;
}

#modalOverlay {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
}

#modalContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.modalHeader {
  display: flex;
  background-color: #dddddd;
  align-items: stretch;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

p.modalTitle {
  color: #990000;
  font-size: 1.2em;
  font-weight: 600;
}

.modalTab {
  justify-content: center;
  flex-grow: 1;
  width: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  cursor: pointer;
}

.modalTab p {
  width: 100%;
  text-align: center;
  margin: 0;
}

.modalTab.selected {
  color: #990000;
  background-color: white;
  border-bottom: 4px solid #990000;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.modalBody {
  padding: 16px;
  height: 300px;
}

.modalBody .tabContent {
  display: none;
  height: 100%;
}

.modalBody .tabContent:first-of-type {
  display: block;
}

.modalFooter {
  display: flex;
  gap: 8px;
  padding: 0 16px 16px;
  justify-content: right;
}

button.modalButtonCancel {
  border: none;
  color: #fff;
  background-color: #666;
  border-radius: 4px;
  padding: 4px 16px;
}

button.modalButtonOk {
  border: none;
  color: #fff;
  background-color: #900;
  border-radius: 4px;
  padding: 4px 16px;
}

#orderform h2 small {
  padding-left: 2em;
  color: #333333;
  font-size: 0.8em;
}

#orderform .contentpart > div {
  float: left;
  min-width: 230px;
  max-width: 300px;
  width: 30%;
  min-height: 150px;
  margin-left: 2%;
  border-radius: 0.5em;
  border: 1px solid #cccccc;
  background-color: #f2f2f2;
  text-align: center;
  overflow: hidden;
}

#orderform .contentpart th.new,
#orderform .contentpart td.new {
  color: green;
}

#orderform .contentpart span.new {
  display: inline-block;
  background: #59a219;
  color: white;
  width: 100%;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  font-weight: bold;
  font-size: 0.85em;
}

#orderform .contentpart > div label {
  display: inline-block;
  width: 100%;
  margin-left: -1px;
  margin-top: -1px;
  white-space: nowrap;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  font-size: 1.2em;
}

#orderform .contentpart > div label.new {
  border-radius: 0;
}

#orderform .contentpart > div label a {
  display: inline-block;
  width: 90%;
}

#orderform .contentpart > div div.desc {
  padding: 0.5em 0;
}

#orderform .contentpart > div p.desc {
  padding: 0.5em 0.3em;
}

#orderform .contentpart > div table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

#orderform .contentpart > div table td {
  text-align: right;
}

#orderform .contentpart > div table th {
  text-align: left;
}

#orderform .contentpart > div em {
  font-size: 2em;
  font-style: normal;
  font-weight: bold;
}

#orderform .contentpart > div strong {
  line-height: 1em;
  color: green;
}

#orderform .contentpart br {
  clear: both;
}

#orderform .desc {
  margin: 0;
  background-color: #fefefe;
  border-bottom: 1px solid #cccccc;
  line-height: 1.2em;
}

#orderform .setup {
  font-size: smaller;
  line-height: 1em;
}

input[type=range] {
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

input[type=range][min="0"][max="1"] {
  width: 3em;
  vertical-align: middle;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 15px;
  cursor: pointer;
  background: #eeeeee;
  border: 1px solid #cccccc;
}

input[type=range]::-webkit-slider-thumb {
  border: 0;
  border-radius: 2px;
  height: 15px;
  width: 18px;
  background: #990000;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -1px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ffffff;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 15px;
  cursor: pointer;
  background: #eeeeee;
  border: 1px solid #cccccc;
}

input[type=range]::-moz-range-thumb {
  border: 0;
  border-radius: 2px;
  height: 15px;
  width: 18px;
  background: #990000;
  cursor: pointer;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 15px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #c5c5c5;
  border: 1px solid #cccccc;
}

input[type=range]::-ms-fill-upper {
  background: #eeeeee;
  border: 1px solid #cccccc;
}

input[type=range]::-ms-thumb {
  border: 0;
  border-radius: 2px;
  width: 18px;
  background: #990000;
  cursor: pointer;
  height: 15px;
}

input[type=range]:focus::-ms-fill-lower {
  background: #eeeeee;
}

input[type=range]:focus::-ms-fill-upper {
  background: #ffffff;
}

table.modlist tbody tr td:nth-child(n+2),
table.modlist tfoot tr td:nth-child(n+2) {
  text-align: center;
}

table.modlist tr.main td:first-child {
  font-weight: bold;
}

table.modlist tr.sub td:first-child {
  padding-left: 20px;
}

table.modlist tr.changed td,
table.phplist tr.changed td {
  background-color: rgba(250, 225, 0, 0.4);
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-success {
  color: #59a219 !important;
}

.text-danger {
  color: #d50c2d !important;
}

.text-primary-gray {
  color: #999 !important;
}

.notification-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.notification-box > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  justify-content: space-between;
}

.notification-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  margin: 10px 2px 10px;
  padding: 0 10px 10px 10px;
  text-align: center;
  border: 1px solid #67f;
  background: #eef5ff;
  width: 30%;
}

/* Support form categories */
.support__category-wrapper {
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

.support__category {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.support__category input[type=radio]:checked + label {
  background-color: #990000;
  color: #ffffff;
  border-color: #990000;
}

.support__category input[type=radio] {
  display: none;
}

#id_support_form [type=checkbox],
#id_support_form [type=radio] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}

.support__category label {
  -webkit-transition: background-color 0.15s;
  -o-transition: background-color 0.15s;
  transition: background-color 0.15s;
  display: block;
  padding-bottom: 10px;
  background-color: #cccccc;
  border: 1px solid #cccccc;
  border-radius: 4px;
  color: #333333;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.333;
  white-space: nowrap;
  cursor: pointer;
  min-width: 40%;
  width: auto;
}

.support__category label:hover {
  background-color: #f2f2f2;
}

.support__category span {
  display: block;
  font-size: 2em;
}

#id_support_form {
  border: 1px solid #cccccc;
  padding: inherit;
}

/* click-to-copy button */
button.clickToCopy {
  background-color: #990000;
  border-radius: 3px;
  border: none;
  color: #FFFFFF;
  vertical-align: top;
  width: 120px;
  transition: 0.25s;
  display: none;
}

button.clickToCopy:hover {
  cursor: pointer;
  background-color: #b80000;
}

button.clickToCopyCopiedSuccessfully {
  color: #008000;
  background-color: #90EE90 !important;
  cursor: default !important;
  transition: 0.25s;
}

button.clickToCopySmall {
  background: none;
  color: #990000;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

button.clickToCopySmall:hover {
  cursor: pointer;
  background: none !important;
}

button.clickToCopyCopiedSuccessfullySmall {
  background: none !important;
  color: #006400 !important;
}

span.errormsg {
  font-weight: bold;
  color: #990000;
  padding-left: 50px;
}

span.valueLabel {
  display: inline-block;
  width: 5%;
  font-size: 110%;
}

.screen-reader-only,
label.screen-reader-only {
  display: none;
}

.modal-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.modal-form * {
  box-sizing: border-box;
}

.modal-form label {
  margin-top: 16px;
  color: #990000;
  font-size: 0.9em;
}

.modal-form label > span {
  display: block;
}

.modal-form label > input[type=password],
.modal-form label > input[type=text] {
  width: 100%;
}

.modal-form input[type=password],
.modal-form input[type=text] {
  border: 3px solid #d8d8d8;
  border-radius: 4px;
  padding: 4px;
}

.modal-form input[type=password]:focus,
.modal-form input[type=text]:focus {
  border-color: #d50c2d;
}

.modal-form input[type=password]:focus-visible,
.modal-form input[type=text]:focus-visible {
  outline: none;
}

.modal-form input[readonly] {
  color: #444;
}

.modal-form .button-inside {
  position: relative;
}

.modal-form .button-inside input {
  width: 100%;
}

.modal-form .button-inside button {
  position: absolute;
  top: 8px;
  right: 8px;
}

.input-pin {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.input-pin input[type=number] {
  border: 3px solid #d8d8d8;
  border-radius: 4px;
  padding: 4px;
  font-size: 1.5em;
  width: 1.5em;
  margin: 4px;
  text-align: center;
}

.input-pin input[type=number]:focus {
  border-color: #d50c2d;
}

.input-pin input[type=number]:focus-visible {
  outline: none;
}

.input-pin input::-webkit-outer-spin-button,
.input-pin input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-pin input[type=number] {
  -moz-appearance: textfield;
}

.nav-container {
  background-color: #FFFFFF;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  display: inline-flex;
  font-size: 16px;
  left: 0;
  padding: 25px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}

.nav-dropdown-btn {
  cursor: pointer;
}

.nav-dropdown-content {
  background-color: #FFFFFF;
  border: 1px solid #E9E9E9;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0 rgba(0, 0, 0, 0.16);
  display: none;
  margin: 12px 5px 5px;
  min-width: 180px;
  position: absolute;
  text-align: left;
}

.nav-dropdown-content a {
  display: block;
  padding: 12px 16px;
}

.nav-dropdown-icon {
  font-size: 12px !important;
  vertical-align: middle;
}

.nav-logo {
  height: 21px;
  vertical-align: middle;
}

.nav-link {
  color: #383838 !important;
  padding: 10px 20px;
  text-decoration: none !important;
}

.nav-link:hover {
  background-color: #F5F5F5;
}

.nav-link-logo {
  color: #000000 !important;
  text-decoration: none !important;
}

.nav-text {
  vertical-align: middle;
}

html {
  background-color: #f2f2f2;
}

body {
  margin: 150px auto 0 auto;
  padding: 4em 0 0.2em 0;
  border: 1px solid #cccccc;
  border-radius: 0.5em;
  background-color: #ffffff;
  width: 60%;
}

.form-login {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.heading-login {
  font-size: 1.3rem;
  text-align: center;
}

form {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 10px;
  width: 40%;
  min-width: 450px;
  margin: 2em auto;
  padding: 3em;
}

#logo {
  float: left;
  margin-left: 2em;
  margin-top: -4em;
}

#login_data {
  padding: 0.5em;
}

#login_data label {
  border: 0;
  padding: 0;
  width: 20% !important;
  margin: 0;
  line-height: normal;
}

#login_data h3 {
  margin: 1em 0 0 0;
  padding-top: 0.5em;
  text-align: left;
  font-weight: bold;
  font-size: 0.9em;
  background-color: transparent;
  border-top: 1px solid #990000;
  color: #990000;
}

#login_data p,
#login_data div {
  text-align: left;
  margin: 0;
  padding: 0;
}

#login_data p {
  margin-bottom: 0.5em;
}

footer {
  margin: 1em;
  text-align: right;
  color: #999;
  margin-top: 2em;
}

.more {
  text-align: center;
  margin: 2em 3em;
  background-color: #f2f2f2;
  border: 1px solid #cccccc;
  border-radius: 0.5em;
  line-height: 1.7em;
}

.more a {
  display: inline-block;
  margin-right: 2em;
}

.more a:before {
  content: "[ ";
  color: #333333;
  text-decoration: none;
}

.more a:after {
  content: " ]";
  color: #333333;
  text-decoration: none;
}

.login-option-menu {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.login-option input[type=radio] {
  display: none;
}

.login-option {
  display: flex;
  flex-direction: column;
  color: #444;
  padding: 0.5em;
  border-radius: 1em;
  background-color: #eee;
  text-align: center;
  width: 8.3em;
  height: 8.3em;
  transition: 0.1s;
}

.login-option:hover,
.login-option:has(input[type=radio]:checked) {
  color: #fff;
  background-color: #990000;
  text-decoration: none;
  cursor: pointer;
}

.login-option:hover {
  scale: 1.05;
  transition: 0.1s;
}

.login-option span {
  font: normal 4em/1.3em iconified;
  color: #990000;
}

.login-option:hover span,
.login-option:has(input[type=radio]:checked) span {
  color: #fff;
}

.login-option:has(input[type=radio]:checked) {
  position: relative;
  background: #990000;
  border: 0;
}

.login-option:has(input[type=radio]:checked):before {
  top: 99%;
  left: 30px;
  position: absolute;
  border: 10px solid transparent;
  border-top-color: #990000;
  margin-left: -10px;
  content: "";
  pointer-events: none;
}

/*# sourceMappingURL=login.css.map */