.link, .link:active, .link:focus, .link:hover, .link:link, .link:visited {
	transition: color .15s ease-in;
}
.dib {
	display: inline-block;
}
.bw1 {
    border-width: .125rem;
}
.b--solid {
    border-style: solid;
}
.b--thick {
    border-width: thick;
}
.fw9 {
    font-weight: 900;
}
.ff-monospace{
    font-family: monospace;
    font-style:normal;
}
.fsxl {
    font-size: x-large ;
}
.fs30 {
    font-size: 30px ;
}
.fs35 {
    font-size: 35px ;
}
.fs18 {
    font-size: 18px;
}
.fs25 {
    font-size: 25px;
}
.fs22 {
    font-size: 22px;
}
.fs24 {
    font-size: 24px;
}
.pa1 {
    padding: 1px !important;
}
.pa3 {
    padding: 3rem;
}
.soc-button-dimension {
    width: 250px;
    height: 102px;
    text-align: center;
    padding-top: 25px
}
.padding-button {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.br3 {
    border-radius: .5rem;
}
.b--blue{
    border-color: #017dc5!important;
}
.b--green{
    border-color: #00ab4d!important;
}
.b--yellow{
    border-color: #ccce00!important;
}
.b--lightblue{
    border-color: #53B7E8!important;
}
.b--brown{
    border-color: #923011!important;
}
.b--darkyellow{
    border-color: #D3A809!important;
}
.b--select-green{
    border-color: #008000!important;
}
.b--select-red{
    border-color: #940707!important;
}
.f-red{
    color: #fe0000;
}
.bg-energized-red, .hover-bg-energized-red:focus, .hover-bg-energized-red:hover {
    background-color: #fe0000;
}
.bg-deenergized-green, .hover-bg-deenergized-green:focus, .hover-bg-deenergized-green:hover {
    background-color: #00ff00;
}
.bg-deenergized-green-new, .hover-bg-deenergized-green-new:focus, .hover-bg-deenergized-green-new:hover {
    background-color: green;
}
.bg-executed-gray, .hover-bg-executed-gray:focus, .hover-bg-executed-gray:hover {
    background-color: #6F6F6F;
}
.bg-executed-aqua, .hover-bg-executed-aqua:focus, .hover-bg-executed-aqua:hover {
    background-color: #89f7f8;
}
.bg-energized-orange, .hover-bg-energized-orange:focus, .hover-bg-energized-orange:hover {
    background-color: #e97031;
}
.bg-normal, .hover-bg-normal:focus, .hover-bg-normal:hover {
    background-color: #F0F0F0;
}

.bg-dark-green, .hover-bg-dark-green:focus, .hover-bg-dark-green:hover {
    background-color: #276b27;
}
.bg-deenergized-green-svg{
    fill: #00ff00;
}
.bg-energized-red-svg{
    fill: #fe0000;
}
.bg-executed-gray-svg{
    fill: #6F6F6F;
}
.bg-executed-aqua-svg{
    fill: #89f7f8;
}
.bg-normal-svg{
    fill: #F0F0F0;
}
.bg-dark-green-svg{
    fill: #276b27;
}
.bg-dark-pink-svg {
    fill: #fe0000;
    fill-opacity: 0.7
}
.bg-dark-blue-svg {
    fill: #00ff00;
    fill-opacity: 0.7
}
.bg-energized-orange-svg{
    fill: #e97031;
}
.blinking-energized-red{
    animation: blinkingRedButton 1.1s infinite;
}
.blinking-executed-gray{
    animation: blinkingGrayButton 1.1s infinite;
}
.blinking-dark-green{
    animation: blinkingDarkGreenButton 1.1s infinite;
}
.blinking-dark-green{
    animation: blinkingDarkGreenButton 1.1s infinite;
}
.blinking-energized-orange{
    animation: blinkingDarkOrangeButton 1.1s infinite;
}
.blinking-energized-orange-svg{
    animation: blinkingDarkOrangeButtonsvg 1.1s infinite;
}
.blinking-dark-green-svg{
    animation: blinkingDarkGreenButtonsvg 1.1s infinite;
}
.blinking-executed-gray-svg{
    animation: blinkingGrayButtonsvg 1.1s infinite;
}
.blinking-energized-red-svg{
    animation: blinkingRedButtonsvg 1.1s infinite;
}
@keyframes blinkingRedButtonsvg{
    0% {
    fill: #fe0000; /* 深橙色 */
    stroke: #fff; /* 白色边框 */
    }
    49% {
    fill: #F0F0F0; /* 浅灰色 */
    stroke: #fe0000; /* 橙色边框 */
    }
    100% {
    fill: #fe0000; /* 深橙色 */
    stroke: #fff; /* 白色边框 */
    }
}
@keyframes blinkingGrayButtonsvg{
    0% {
    fill: #6F6F6F; /* 深橙色 */
    stroke: #fff; /* 白色边框 */
    }
    49% {
    fill: #F0F0F0; /* 浅灰色 */
    stroke: #6F6F6F; /* 橙色边框 */
    }
    100% {
    fill: #6F6F6F; /* 深橙色 */
    stroke: #fff; /* 白色边框 */
    }
}
@keyframes blinkingDarkOrangeButtonsvg{
    0% {
    fill: #e97031; /* 深橙色 */
    stroke: #fff; /* 白色边框 */
    }
    49% {
    fill: #F0F0F0; /* 浅灰色 */
    stroke: #e97031; /* 橙色边框 */
    }
    100% {
    fill: #e97031; /* 深橙色 */
    stroke: #fff; /* 白色边框 */
    }
}
@keyframes blinkingDarkGreenButtonsvg{
    0% {
    fill: #276b27; /* 深绿色填充 */
    stroke: #fff; /* 白色边框 */
    }
    49% {
    fill: #F0F0F0; /* 浅灰色填充 */
    stroke: #276b27; /* 深绿色边框 */
    }
    100% {
    fill: #276b27; /* 深绿色填充 */
    stroke: #fff; /* 白色边框 */
    }
}
@keyframes blinkingDarkOrangeButton{
    0%{background-color: #e97031; color: #fff}
    49%{background-color: #F0F0F0; color: #e97031}
    100%{background-color: #e97031; color: #fff}
}

@keyframes blinkingDarkGreenButton{
    0%{background-color: #276b27; color: #fff}
    49%{background-color: #F0F0F0; color: #276b27}
    100%{background-color: #276b27; color: #fff}
}
@keyframes blinkingGrayButton{
    0%{background-color: #6F6F6F; color: #fff}
    49%{background-color: #F0F0F0; color: #6F6F6F}
    100%{background-color: #6F6F6F; color: #fff}
}
@keyframes blinkingRedButton{
    0%{background-color: #fe0000; color: #fff}
    49%{background-color: #F0F0F0; color: #fe0000}
    100%{background-color: #fe0000; color: #fff}
}
.blinking-deenergized-green-svg{
    animation: blinkingGreenButtonSVG 1.1s infinite;
}
@keyframes blinkingGreenButtonSVG{
    0% {
    fill: #00ff00; /* 深橙色 */
    stroke: #fff; /* 白色边框 */
    }
    49% {
    fill: #F0F0F0; /* 浅灰色 */
    stroke: #00ff00; /* 橙色边框 */
    }
    100% {
    fill: #00ff00; /* 深橙色 */
    stroke: #fff; /* 白色边框 */
    }
}
.blinking-deenergized-green{
    animation: blinkingGreenButton 1.1s infinite;
}
@keyframes blinkingGreenButton{
    0%{background-color: #00ff00; color: #fff}
    49%{background-color: #F0F0F0; color: black}
    100%{background-color: #00ff00; color: #fff}
}
@keyframes blinkingGreenButtonNew{
    0%{background-color: green; color: #fff}
    49%{background-color: #F0F0F0; color: green}
    100%{background-color: green; color: #fff}
}
.blinking-deenergized-green-new{
    animation: blinkingGreenButtonNew 1.1s infinite;
}

.b--purple{
    border-color: #7e489c!important;
}
.b--red{
    border-color: #ed1b24!important;
}
.b--darkgreen{
    border-color: #038888!important;
}
.black, .hover-black:focus, .hover-black:hover {
    color: #000 !important;
}
.white, .hover-white:focus, .hover-white:hover {
    color: #fff !important;
}
.hover-b--black:focus, .hover-b--black:hover {
    border-color: #000000;
}
.v-r {
    position: absolute;
    height: 100%;
    top: 0;
    border-left: 2px solid;
    display: inline-block;
    margin: 0 auto;
    margin-left: -1px;
}

.center{
	position: relative;
	left: 50%;
	-ms-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
}

.password-center{
    position: relative;
    top: 20px;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); 
}
.password-center1{
    width: 100%;
     -ms-transform: translate(-50%, -50%);
}
.pscAckMark {
    position: absolute;
    right: 8px;
    bottom: 0px;
    font-weight: bold;
    font-size: 27px;
    display: none;
}

.pscAckMarkTable {
    position: absolute;
    top: 3rem;
    right: 5px;
    font-size: 27px;
    font-weight: bold;
    display: none;
}
.pscAckMarkTable1 {
    position: absolute;
    top: 3rem;
    right: 25px;
    font-size: 27px;
    font-weight: bold;
    display: none;
}

.pscAckMarkBox {
    top: 2.7rem;
    right: 5px;
    font-size: 27px;
    font-weight: bold;
    float: right;
}
.pscAckMarkBox1 {
    top: 2.7rem;
    right: 20px;
    font-size: 27px;
    font-weight: bold;
    float: right;
}

.serif {
  font-family: "Times New Roman", Times, serif;
}

.socDescription{
    font-size: 24px;
}

.w3-modal .w3-button{
    width: 120px;
    font-size: 22px;
    margin-left:10px;
    margin-right:10px;
}

.button-text-white {
    fill: white;
}

.button-text-black {
    fill: black;
}

.strowidth {
    stroke-width: 0.1;
}

.trip-on{
    color: white !important;
    background-color: red;
}

.open-on{
    color: white !important;
    background-color: green;
}

.open{
    color: green;
}

.not-show {
    visibility: hidden;
}

.status-box-container {
    display: block; 
    padding: 20px; 
    width: fit-content; 
    margin-left: auto; 
    margin-right: auto;
}

.status-box {
    padding: 13px;
    margin-bottom: 2px;
    width: 490px;
}

.alert-box-container {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

.alert-box {
    padding: 15px;
    background-color: #f44336;
    color: white;
    opacity: 1;
    transition: opacity 0.6s;
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 10px;
}

.alert-box-closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.alert-box-closebtn:hover {
    color: black;
}