@import "Colors.css";
@import "Fonts.css";

* {
  padding: 0;
  margin: 0;
  font-family: Arial;
  font-size: 12px;
}

body {
  background-color: white;
}

button {
  height: 22px;
  width: max-content;
  padding: 0px 12px 0 12px;
  border: 1px solid gray;
  border-radius: 6px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  transition-duration: 0.2s;
  background-color: whitesmoke;
}

button:hover:enabled{
  background-color: var(--mitel-gray);
  /* Green */
  color: white;
}

button .disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* TODO remove all label classes references */
label,
.label {
  font-weight: normal;
}

/* Note: type selector is not supported in IE6
         it's needed to set class on each component in order to workaround
input[type="text"] { */
input.text,
input.pwd {
  width: 190px;
  height: 18px;
  border: 1px solid #b9b9b9;
  padding: 1px 1px 1px 3px;
}

input.textExt {
  width: 190px;
  height: 18px;
  border: 1px solid #b9b9b9;
  padding: 1px 1px 1px 3px;
}

input.wideText {
  width: 264px;
  height: 18px;
  border: 1px solid #b9b9b9;
  padding: 1px 1px 1px 3px;
}

.tundra .dijitSpinner {
  width: 150px;
  /*  height: 18px; Note: unable to set height due to a bug in IE: arrow buttons shown wrongly */
  margin: 0 5px 0 0;
}

.dj_iequirks .dijitProgressBarTile {
  width: 100%;
  height: 100%;
}

.dijitProgressBarFull {
  /* outer container for background of bar that is finished */
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  width: 100%;
  height: 100%;
}

input.checkbox,
input.radio {
  margin: 0 5px 0 0;
}

select {
  height: 18px;
  width: 155px;
  border: 1px solid #b9b9b9;
  padding: 1px 1px 1px 3px;
}

select.language {
  height: 18px;
  width: 100%;
}

option {
  /*  padding: 1px 1px 1px 8px;*/
  padding: 1px 1px 1px 4px;
  /*  border: none;*/
}

table.fieldTable {
  border-collapse: collapse;
}

table.fieldTable td {
  padding: 5px 6px 5px 0;
}

table.fieldTable td.btnCell {
  vertical-align: top;
}

table.fieldTable td.btnCell div.graphicalButton {
  padding: 0 10px 10px 5px;
}

table.btnTable {
  border-collapse: collapse;
}

table.btnTable td {
  padding: 0;
}

.dojoTooltip {
  font-weight: bold;
}

a {
  font-weight: bold;
  color: #123C8E;
  text-decoration: none;
}

a.aWhite {
  color: #FFF;
  font-weight: normal;
}

a:hover {
  color: red;
}

button.__disabled {
  color: #C2C2C2;
  border-color: #C2C2C2;
}

.link {
  cursor: pointer;
}

.label {
  cursor: default;
  font-size: 11px;
  color: #000000;
  vertical-align: middle;
  text-decoration: none;
}

.label-cut {
  cursor: help;
  font-size: 11px;
  color: #000000;
  vertical-align: middle;
  text-decoration: none;
}

.disabledTable {
  pointer-events: none;
  opacity: 0.4;
}

#startPageImage {
  height: 622px;
  width: 1000px;
  background-color: #edf1f3;
  background-image: url("../img/greeting.png");
  background-position: top left;
  background-repeat: no-repeat;
}

#greetingText {
  position: relative;
  width: auto;
  top: 67px;
  left: 38px;
  font-size: 30px;
}

#versionText {
  position: relative;
  width: auto;
  top: 32px;
  left: 430px;
  font-size: 11px;
}

#configFile,
#backupConfigList,
#restoreConfigList,
#configList,
#country {
  width: 260px;
}

#logicalId {
  width: 340px;
}

#logData {
  width: 170px;
}

#etherealInt {
  width: 220px;
}

#advlckId {
  background: #EBEBEB;
  color: #545454;
  width: 340px;
}

/**************************************
  * Resizing Elements                 *
  *************************************/
#contentView {
  z-index: 1;
  width: 100%;
  padding: 10px 10px 0px 10px;
  background-image: url("../img/background/bg_content.png");
  background-position: top center;
  background-repeat: repeat-x;
  background-color: #e9eff2;
  overflow: hidden;
}

.low_resolution #contentView {
  height: 462px;
}

.low_resolution #content,
.low_resolution #sideNavig {
  height: 452px;
}

.normal_resolution #contentView {
  height: 685px;
}

.normal_resolution #content,
.normal_resolution #sideNavig {
  height: 675px;
}

.content {
  background-color: #eee;
  height: calc(100% - 111px);
  overflow-y: auto;
  padding-top: 10px;
}

/* grid used for gateways, traps, etc. data */
#grid,
#agentGrid,
#gridDyn,
#grid {
  width: 100%;
  /*850px;*/
  height: 300px !important;
  /* height: 100%;*/
  /*auto; /*100%; /*TODO 100% DIDNT WORK;*/
  border: 1px
    /*solid silver*/
  ;
  overflow: auto;
  /* need overflow to bypass FireFox bug that do not resize grid when window is resized */
  /*padding: 0 10px 0 0; /*add padding to the grid breaks the layout */
}

#routeGrid,
#vpnGrid,
#ipsecGrid,
#networkInterfaceGrid,
#coreIpGrid,
#accessIpGrid,
#realmProfileGrid,
#bondGrid,
#loggingServerProfileGrid,
#loggingServerGroupGrid,
#emergencyNumberGrid {
  width: 100%;
  height: 200px !important;
  border: 1px;
  overflow: auto;
}

#redundancyGrid,
#admHostsGrid,
#codecsGrid,
#mediaProfilesGrid,
#userAgentsGrid,
#mediaOptRealmsGrid,
#mediaRealmSubnetGrid,
#evoRpmClientGrid,
#evoRpmServerGrid,
#evoRemoteSubsGrid,
#gtcRemEpGrid,
#securityPostureStatusGrid,
#elementStateStatusGrid,
#serviceStateStatusGrid {
  width: 100%;
  height: 150px !important;
  border: 1px;
  overflow: auto;
}

#localEsinetRegistryStatusGrid {
  width: 100%;
  height: 110px !important;
  border: 1px;
}

#gtcUserDNGrid,
#gtcDialinDataGrid {
  width: 25%;
  height: 150px !important;
  border: 1px;
  overflow: auto;
}

#gtcLatestAvailable {
  width: 90px;
  text-align: left;
}

#licensesGrid {
  height: auto !important;
  overflow: auto;
}

#queueViewerGrid,
#tcStatusGrid,
#gwGrid {
  width: 100%;
  height: 540px !important;
  border: 1px;
  overflow: auto;
}

#alarmGrid {
  width: 100%;
  height: 100% !important;
  border: 1px;
  overflow: auto;
}

#versionsGrid {
  width: 100%;
  height: 110px !important;
  border: 1px;
  overflow: auto;
}

#profileGrid,
#queueGrid,
#fxsGrid,
#briGrid,
#destGrid,
#menuGrid,
#digitsGrid,
#mediaRealmGrid,
#msGrid,
#providerGrid,
#remoteLocGrid,
#firewallGrid,
#vMBoxesGrid,
#serverGrid,
#clientCredentialsGrid,
#importGroupGrid,
#importFileGrid,
#exportGroupGrid,
#sessRecGrid {
  width: 100%;
  height: 200px !important;
  border: 1px;
  overflow: auto;
}

#firewallWhiteGrid,
#firewallBlackGrid,
#admHostsGrid,
#acceptedSrvListGrid {
  width: 100%;
  height: 150px !important;
  border: 1px;
  overflow: auto;
}

#certProfilesGrid,
#revocationGrid,
#tsGrid,
#qosGrid,
#sipRoutingGrid,
#sipManipulationGrid,
#officeCodeGrid,
#evoServersGrid,
#sshPkiFilesGrid,
#licensesGrid,
#trustedGrid,
#loadBalanceMapGrid,
#clusteredNodesGrid,
#srcDestGroupGrid,
#dREdptGrid,
#sourceManipulationGrid {
  width: 100%;
  height: 200px !important;
  border: 1px;
  overflow: auto;
}

#contentClustered {
  width: 100%;
  height: 100%;
  border: 1px;
  overflow: auto;
}

#clusteredGridDiv {
  width: 100%;
  height: 80%;
  height: calc(100% - 44px);
  border: 1px;
  overflow: auto;
}

#clusteredGrid {
  width: 100%;
  height: 100%;
  border: 1px;
  overflow: auto;
}

.gridLayout {
  width: 100%;
  height: 200px !important;
  border: 1px;
  overflow: auto;
}

#localTollGrid,
#localTollUploadGrid,
#localTollViewGrid,
#blockedCallsGrid,
#SSPStatusGrid {
  width: 100%;
  height: 300px !important;
  border: 1px;
  overflow: auto;
}

#fxoGrid,
#priGrid,
#staticIPGrid,
#vlanGrid,
#dnsGrid,
#mlhgGrid,
#clientsGrid,
#blsRoutingGrid,
#emergencyGrid,
#linGrid,
#aliasListGrid,
#agentGrid,
#crlGrid,
#casProfileGrid {
  width: 100%;
  height: 320px !important;
  border: 1px;
  overflow: auto;
}

#errorCodeGrid,
#regSubsGrid,
#quarantineGrid,
#quarantineGrid2,
#trunkGroupsGrid,
#codecSelectionGrid,
#portMapGrid {
  width: 100%;
  height: 400px !important;
  border: 1px;
  overflow: auto;
}

#adminAccountsGrid,
#PIFDestGrid,
#transConfProfileGrid,
#dgtMapForDialedNumGrid {
  width: 100%;
  height: 350px !important;
  border: 1px;
  overflow: auto;
}

#channelGrid,
#blsStatusGrid {
  width: 573px;
  /*850px;*/
  height: 400px !important;
  border: 1px;
  overflow: auto;
}

#t1CasChannelsGrid,
#t1CasChannelGrid,
#e1CasChannelGrid,
#portForwardGrid {
  width: 100%;
  height: 500px !important;
  border: 1px;
  overflow: auto;
}

.dojoxGrid-rowbar-inner {
  /* Local style applied to fix auto-height of table cells when the rows are empty.
     The problem occurred on the profiles table. look at CQ00092435 for details. */
  height: 20px;
}

#srcBsdRoutingTbl{
  width: 80%;
  min-width: 400px;
  max-height: 500px;
  overflow: auto;
  margin-bottom: 45px;
}

#srcBsdRoutingTblBody{
  height: fit-content;
  min-height: 300px;
}

/* NEW GRID SECTION */

.new-table{
  text-align: right;
  height: fit-content;
  background-color: #efefef;
  border-left: 1px solid #ACA899;
}

.new-thead-large{
  height: 5em;
  background: rgb(217,217,217);
  background: linear-gradient(0deg, rgba(228,228,228,1) 56%, rgba(223,223,223,1) 63%, rgba(255,255,255,1) 90%);

}

.new-thead-slim{
  height: 2em;
  vertical-align: bottom;
  background: rgb(217,217,217);
  background: linear-gradient(0deg, rgba(228,228,228,1) 14%, rgba(223,223,223,1) 22%, rgba(255,255,255,1) 90%);
}

.new-th-large{
  padding: 1em;
  border: 1px solid gray;
  border-color: #ACA899 #919191 #919191 transparent;
}

.new-th-slim{
  padding-right: 6px;
  border: 1px solid gray;
  border-color: #ACA899 #919191 #919191 transparent;
}

.new-tbody{
  background-color: #efefef;
  min-height: 350px;
}

.new-td{
  padding: 6px;
}

.new-tr:nth-child(odd) {
  background-color: #fafafa;
}
.new-tr:nth-child(even) {
  background-color: #e3e5e9;
}

.new-input {
  width: 100%;
  text-align: right;
}

.new-row-button-fullWidth {
  width: 100%;
}

.new-row-button-delete {
  background-color: var(--delete-red);
  color: whitesmoke;
  font-size: 16px;
  width: 35px;
  padding: 2px 0 0 0;
  height: 100%;
}

.new-row-button-insert {
  font-size: 16px;
  width: 35px;
  padding: 0;
  height: 100%;
}

/* main containers */
#main,
#maintMain {
  width: 100%;
  height: 100%;
}

#mainCaresFooterHeight{
  width: 100%;
  height: calc(100vh - 44px);
}

#administratorLbl {
  font-weight: bold;
}

.foldergroup {
  background-color: var(--mitel-dark-blue);
  text-align: center;
  height: 27px;
}

.foldergroup .text {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: bold;
  padding: 7px 15px;
  text-align: left;
}

.titleBar {
  font-size: 13px;
  width: 100%;
  height: 27px;
  background: var(--mitel-gray);
  text-align: left;
  vertical-align: middle;
  padding-left: 10px;
}

.statusBar {
  width: 100%;
  height: 22px;
  background: #aaaaaa;
}

.tundra .dijittab {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  vertical-align: middle;
  font-weight: bold;
  font-size: 11px;
  height: 17px;
  border-color: #eee;
  background: #808080;
  color: #c7c9c7;
}

.tundra .dijitTabContainerTop .dijitTabHover {
  border-bottom-color: #eee;
}

.tundra .dijitTabChecked {
  background-color: #eee;
  color: #0066A1;
}

.tundra .dijitTabContainer .dijitTabCheckedHover {
  background: #eee;
  border: 1px solid #eee;
  color: #0066A1;
}

.tundra .dijitTabContainerTop-tabs .dijitTabChecked {
  border-bottom-color: #eee;
}

.tundra .dijitTabPaneWrapper {
  /*background: transparent;*/
  top: 22px;
  border: 0;
  margin: 0;
  padding: 0;
}

.tundra .dijitTabContainerTopNone {
  padding-top: 1px;
}

.tundra .dijittabcontainertop-tabs {
  background: url(../img/background/formTab.png) repeat-x;
  height: 22px;
  border: medium none;
  padding-top: 3px;
}

div.titleBar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
  width: auto;
}

div.titleBar img {
  height: 100%;
  padding-left: 8px;
  color: white;
  cursor: pointer;
}
div.titleBar div{
  display: flex;
  align-items: center;
}

.titleBar .titleIcon {
  width: 15px;
}

.titleBar .label, .titleBar label {
  font-size: 13px;
  font-weight: bold;
  color: white;
}

.titleBar .tableHeader {
  height: 13px;
  padding-top: 4px;
  position: absolute;
  text-align: center;
  border-right: 1px solid white;
  font-weight: bold;
}

.statusBar .label {
  padding-left: 10px;
}

div.statusBar label {
  /*  vertical-align: middle;*/
  padding-top: 5px;
}

.statusBar .refresh,
.titleBar .refresh {
  height: auto;
  width: 24px;
  background: url(../img/icon/sg_Reload_en_16x16_32.png) no-repeat center;
  cursor: pointer;
}

.statusBar .help,
.titleBar .help {
  height: auto;
  width: 24px;
  background: url(../img/icon/sg_Help_en_16x16_32.png) no-repeat center;
  cursor: pointer;
}

.header {
  overflow: hidden;
  /* workaround for Firefox, to avoid display of scrollbars due to margins */
  /*background: url(../img/background/header.png) repeat-x;*/
}

#header,
#maintHeader {
  overflow-y: hidden;
  /* for IE */
  background: url(../img/background/header.png) repeat-x;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 2;

  display: flex;
  align-items: center;
  background: #eee;
  border-top: 1px solid #C7C9C7;
  height: 44px;
  justify-content: flex-end;
  width: 100%;

  /* for old table footers*/
  vertical-align: middle;
}

.footer button{
  margin: 0 8px 0 8px;
  float: right;
}

.cmdArea {
  background: url(../img/background/bg_dialogControls.png) repeat-x;
  width: 100%;
  height: 44px;
  /* to fix bug in FireFox, otherwise background is not shown */
}

.smallCmdArea {
  background: url(../img/background/bg_dialogControls.png) repeat-x;
  width: 25%;
  height: 35px;
  /* to fix bug in FireFox, otherwise background is not shown */
}

/* field area */
.formGroup {
  height: 20px;
  background: var(--mitel-gray);
  padding: 3px 10px 0;
}

/* field area */
.formGroup label{
  font-size: 12px;
  color: white;
}

.groupData {
  padding: 1em;
}

.groupDataElement {
  margin-top: 1em;
}

.ipList,
.dnList,
#whiteList,
#optionalParametersList,
#emergencyNumberList,
#incRoutingPrefixList,
#dnNumberList,
#dnsServerList,
#ntpServerList,
#dhcpDnsServerList,
#portList,
#msnList,
#snRangeList,
#evoEmergencyNumberList,
#uaWhiteList,
#cscManualLogsList,
#frgnTrustedPeerList {
  width: 190px;
  height: 100px;
  /* Note: IE needs selection size in pixels */
}

#uaWhiteList,
#uaWhiteItem {
  width: 300px;
}

.certList {
  width: 250px;
  height: 150px;
  /* Note: IE needs selection size in pixels */
  min-height: auto;
}

.cipherList {
  width: 350px;
  height: 150px;
  min-height: auto;
  box-sizing: border-box;
}

#channelList,
#selectChannelList {
  width: 170px;
  height: 200px;
  /* Note: IE needs selection size in pixels */
}

#filterChannel {
  width: 145px;
}

#cmdTbl {
  /*  padding: 3px 5px;*/
  /*  margin: 3px 5px;*/
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

#footerTbl {
  /*  padding: 3px 5px;*/
  /*  margin: 3px 5px;*/
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

#mainFooterTbl {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  float: right;
}

#infoBlock, .infoBlock {
  background: #eee;
  padding-left: 7px;
  height: 30px;
}

#infoText, .infoText {
  background-image: url(../img/icon/message_information_16_a.gif);
  background-repeat: no-repeat;
  background-position: 0px 7px;
  text-indent: 26px;
  height: 100%;
  padding-top: 8px;
}

.errorBlock {
  background: url(../img/background/infoBar.png) repeat-x;
  padding: 0 0 0 7px;
  height: 30px;
  display: none;
}

.errorText {
  background: url(../img/icon/message_system_error_16_a.gif) no-repeat;
  background-position: 0px 0px;
  text-indent: 26px;
  height: 100%;
  padding-top: 0px;
  color: red;
}

label.error {
  color: red;
  font-weight: bold;
}

input.text.error,
input.pwd.error,
input.wideText.error {
  border-color: red;
}

.statusCell {
  width: 100%;
  text-align: left;
  padding-left: 5px;
  vertical-align: middle;
}

.smallStatusCell {
  width: 30%;
  text-align: left;
  padding-left: 0px;
  vertical-align: middle;
}

.buttonsCell {
  text-align: right;
  padding-right: 5px;
  vertical-align: middle;
}

textarea.logText {
  width: 99%;
  height: 99%;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  resize: none;
}

/* Fix for flashing border in progress bar */
dialog {
  border: none !important;
}

dialog::backdrop {
  background-color: black;
  opacity: .4;
}

#progressBar {
  display: none;
  top: 45%;
  left: 50%;
  margin-left: -175px;
  background-color: var(--light-gray);
  min-width: 310px;
  max-width: 360px;
  padding: 14px;
  text-align: center;
  overflow-y: hidden;
}

#progressBar #pleaseWaitAlertMsg{
  font-family: MuseoSans500;
  font-size: 14px;
}

#progressBar #loader {
  background-color: white;
  border-radius: 9999px;
  height: 0.5rem;
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
}

#loaderProgress {
  background-color: var(--mitel-mid-blue);
  border-radius: 9999px;
  position: absolute;
  bottom: 0;
  top: 0;
  width: 50%;

  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: indeterminate-progress-bar;
}

@keyframes indeterminate-progress-bar {
  from {
      left: -50%;
  }
  to {
      left: 100%;
  }
}

#installProgressBar {
  display: none;
  position: absolute;
  z-index: 999;
  top: 40%;
  /* slide to 40% to avoid bug in IE6, where the combobox is shown behind the loader */
  left: 50%;
  background-color: #DAE8FA;
  width: 240px;
  height: 100px;
  border: 1px solid #b3b6b8;
  padding: 15px;
  margin-left: -120px;
  margin-top: 50px;
  text-align: center;
}

#infoPane {
  width: 300px;
  height: 150px;
}

#overPatternGrid {
  width: 300px;
  height: 300px;
}

#agentList {
  width: 180px;
  height: 300px;
  /* Note: IE needs selection size in pixels */
}

#agentPane {
  width: 215px;
  height: 400px;
}

.dijitDialog#assignedAgentsDlg {
  border: 1px solid;
}

.tundra .dijitDialog .dijitDialogPaneContent {
  background: #F3F6F9;
  padding: 0;
}

/****************************************************************
 * 3) GRAPHICAL BUTTON - graphicalButton                        *
 ****************************************************************/

/* The styles for the graphical button and the Control bar */

/* The different behaviore states of the button. */
.graphicalButton .disabled,
.graphicalButton .active,
.graphicalButton .focus {
  width: auto;
}

.graphicalButton .active-hover,
.graphicalButton .active-hover button,
.graphicalButton .focus-hover button,
.graphicalButton .focus-hover {
  cursor: pointer;
  width: auto;
}

.graphicalButton .image_right {
  width: 6px;
  height: 21px;
  background-repeat: no-repeat;
  background-position: left;
}

.graphicalButton .image_left {
  width: 6px;
  height: 21px;
}

.graphicalButton button,
.graphicalButton input {
  height: 21px;
  width: auto;
  background-position: center;
  background-repeat: repeat-x;
  border: 0px;
  padding: 0px 5px 2px 5px;
  /* Fixes some issues on buttons with Chinese Characters */
  margin: 0px;
  font-size: 11px;
  font-weight: bold;
}

/* The look & feel of the buttons accourding to their state */
/* DISABLED & ACTIVE BOTTONS */
.graphicalButton .disabled .image_left,
.graphicalButton .active .image_left {
  background-image: url("../img/button/graphicalButton_L.png");
}

.graphicalButton .disabled button,
.graphicalButton .active button,
.graphicalButton .disabled input,
.graphicalButton .active input {
  background-image: url("../img/button/graphicalButton_M.png");
}

/* Text style for active button */
.graphicalButton .active .label,
.graphicalButton .active input {
  background-color: transparent;
  /* color: #394349; */

}

.graphicalButton .disabled .image_right,
.graphicalButton .active .image_right {
  background-image: url("../img/button/graphicalButton_R.png");
}

/* ACTIVE BOTTON + MOUSE OVER */
.graphicalButton .active-hover .image_left {
  background-image: url("../img/button/graphicalButton_hover_L.png");
}

.graphicalButton .active-hover button,
.graphicalButton .active-hover input {
  background-image: url("../img/button/graphicalButton_hover_M.png");
}

.graphicalButton .active-hover button,
.graphicalButton .active-hover input {
  background-color: transparent;
  color: #114060;
}

.graphicalButton .active-hover .image_right {
  background-image: url("../img/button/graphicalButton_hover_R.png");
}

/* FOCUSED BOTTON */
.graphicalButton .focus .image_left {
  background-image: url("../img/button/graphicalButton_focus_L.png");
}

.graphicalButton .focus button,
.graphicalButton .focus input {
  background-image: url("../img/button/graphicalButton_focus_M.png");
}

.graphicalButton .focus .label,
.graphicalButton .focus input {
  color: #114060;
}

.graphicalButton .focus .image_right {
  background-image: url("../img/button/graphicalButton_focus_R.png");
}

/* FOCUSED BOTTON + MOUSE OVER */
.graphicalButton .focus-hover .image_left {
  background-image: url("../img/button/graphicalButton_focus_hover_L.png");
}

.graphicalButton .focus-hover button,
.graphicalButton .focus-hover input {
  background-image: url("../img/button/graphicalButton_focus_hover_M.png");
}

.graphicalButton .focus-hover .label,
.graphicalButton .focus-hover input {
  color: #114060;
}

.graphicalButton .focus-hover .image_right {
  background-image: url("../img/button/graphicalButton_focus_hover_R.png");
}

#pwdStrengthBorder {
  width: 100%;
  max-width: 200px;
  height: 5px;
  border: 1px solid #737373;
  border-radius: 5px;
  overflow: hidden;
}

#pwdStrength {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  transition: width 0.3s ease, background-color 0.3s ease;
}

#pwdStrengthText {
  font-size: 11px;
  font-weight: normal;
  margin-bottom: 3px;
  height: 16px;
}