/*
** 배경색 유지보수
*/
.bassBgColor {
    background-color: #363640
    !important;
}
.bassWordColor {
    color: #fff
    !important;
}
.tagColor{
    background: linear-gradient(to bottom, hsl(0, 4%, 5%), hsl(0, 6%, 13%), #534B4B)
    !important;
}
.tableColor {
    background-color: #2d2d33
    !important;
    color: rgba(160, 159, 159, 0.836)
    !important
}
.valueColor {
    background-color: #35353b
    !important;
    color: rgba(255, 255, 255, 0.788);
    font-weight: bold;
}

/* .db1_tableRemSpace,.db3_tableRemSpace,.db4_tableRemSpace,.db6_tableRemSpace,
.db1_useSession,.db2_useSession,.db3_useSession,.db4_useSession,.db5_useSession,.db6_useSession{
    background-color: rgba(255, 255, 255, 0.747);
    color: rgb(0, 89, 255);
} */

/* .db6_tableName,.db4_tableName,.db1_tableName,.db3_tableName{
    background-color: rgba(255, 255, 255, 0.747);
    color: rgb(0, 177, 12);
} */

/* .VMS_TOTAL,.CCTV_TOTAL,.VDS_TOTAL,.RSE_TOTAL,.BIT_TOTAL{
    color: rgb(0, 177, 12);
}  */

.VMS_ERROR,.CCTV_ERROR,.VDS_ERROR,.RSE_ERROR,.BIT_ERROR{
    color: rgba(255, 0, 0, 0.856);
}


*{
    margin:0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    background-color: #18181d;
	max-width: 1920px;
}

.header{
    position: relative;
    display: flex;
    width: 100%;
    height: 60px;
    flex-direction: row;
    align-items: center;
    font-weight: bold;
    background-color: #18181d;
    z-index: 10;
}

.header > img:nth-child(1){
   width: 135px;
   height: 48px;
   margin-left: 27px;
   top: 0px !important;
}
.header > div:nth-child(2){
    cursor: pointer;
    width: 500px;
    min-width: 500px;
    height: 100%;
    display: flex;
    align-items: center;
    color:rgba(255, 255, 255, 0.747);
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    font-size: 27px;
    margin-left: 50px;
}
.header >:nth-child(2):hover{
    color: #9dafe0
    !important;
}
.header >:nth-child(2):active{
    /* left: 11px; */
    color: #6082e2
    !important;
}
.container {
    display: flex;
    flex-direction: column;
    height: calc(100% - 60px);
}

.firstBox{
    height: 59%;
    position: relative;
    background-color: #2a2a33;
}
#clock{
    position: relative;
    /* bottom: 3px; */
    margin-left: auto;
    height: 65px;
    display: flex;
    align-items: center;
    width: 420px;
    min-width: 420px;
    color:  rgba(255, 255, 255, 0.747);
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    font-weight: bold;
    font-size: 25px;
    border-radius: 7px;
}
.tag{
    display: flex;
    position: relative;
    width: 1877px;
    height: 25px;
    align-items: center;
    background: linear-gradient(to bottom, hsl(0, 0%, 0%), hsl(0, 0%, 0%), #534B4B);
    color: rgba(255, 255, 255, 0.747);
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    font-size: 17px;
    font-weight: bold;
    left: 12px;
    border-radius: 7px;
    box-shadow: 2px 2px 2px 2px black;
}
.tag2{
    border-radius: 7px;
    position: relative;
    width: 903px;
    height: 25px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, hsl(0, 0%, 0%), hsl(0, 0%, 0%), #534B4B);
    color: rgba(255, 255, 255, 0.747);
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    font-size: 17px;
    font-weight: bold;
    left: 14px;
    box-shadow: 2px 2px 2px 2px black;
}
.tag3{
    border-radius: 7px;
    position: relative;
    width: 905px;
    height: 25px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, hsl(0, 0%, 0%), hsl(0, 0%, 0%), #534B4B); 
    color: rgba(255, 255, 255, 0.747);
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    font-size: 17px;
    font-weight: bold;
    left: 79px;
    box-shadow: 2px 2px 2px 2px black;
}
.tag4{
    border-radius: 7px;
    display: flex;
    position: relative;
    width: 1875px;
    height: 25px;
    align-items: center;
    background: linear-gradient(to bottom, hsl(0, 0%, 0%), hsl(0, 0%, 0%), #534B4B);
    color: rgba(255, 255, 255, 0.747);
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    font-size: 17px;
    font-weight: bold;
    left: 12px;
    box-shadow: 2px 2px 2px 2px rgb(0, 0, 0);
}
.tag4-1{
    position: relative;
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: bold;
    height: 25px;
    color: rgba(255, 255, 255, 0.747);
}
.tag5{
    border-radius: 7px 0px 0px 7px;
    display: flex;
    position: relative;
    width: 1824px;
    height: 30px;
    line-height: 30px;
    background: linear-gradient(to bottom, hsl(0, 0%, 0%), hsl(0, 0%, 0%), #534B4B);
    color: rgba(255, 255, 255, 0.747);
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    font-size: 17px;
    font-weight: bold;
    left: 12px;
    box-shadow: 2px 2px 2px 2px rgb(0, 0, 0);
}

.xToggle{ 
    border-radius: 0px 7px 7px 0px;
    width: 63px;
    height: 30px;
    background: linear-gradient(to bottom, hsl(0, 0%, 0%), hsl(0, 0%, 0%), #534B4B);
    color: #ffffff;
    font-size: 17px;
    font-weight:bold;
    left: 12px;
    z-index: 2;
    box-shadow: 3px 2px 2px 2px rgb(0, 0, 0);
}
.xToggle:hover{
    cursor: pointer;
    border-radius: 0px 7px 7px 0px;
    width: 63px;
    height: 30px;
    background: linear-gradient(to bottom, hsl(0, 0%, 0%), hsl(0, 0%, 0%), #534B4B);
    color: #9dafe0
    !important;
    font-size: 17px;
    font-weight: bold;
}
.xToggle:active{
    color: #6082e2
    !important;
}
.facSttsInfo{
    position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
    width: 1900px;
    height: calc(60% - 9px);
    margin: 0px auto;
    padding-top : 5px;
    background-color: #2a2a33;
    border-bottom: 2px solid #515159;
    border-top: 2px solid #515159;
}
.communicationSatusToggle{
    color:  rgba(255, 255, 255, 0.747);
}
.communicationSatusToggle:hover{
    color: #9dafe0
    !important;
    cursor: pointer;
}
.communicationSatusToggle:active{
    color: #6082e2
    !important;
}

.Minitable{
    position: relative;
    width: 180px;
    height: 30%;
    background-color: #515159;
    border-spacing: 2px 2px;
    border-radius: 23px;
    box-shadow: 2px 2px 2px 2px;
}
.Minitable-empty{
    width: 180px;
    height: 30%;
}
.Minitable>:nth-child(1){
    background-color: #2a2a33;
    color:  rgba(255, 255, 255, 0.747);
    /*text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;*/
    text-align: center;
    font-size: 17px;
    font-weight: bold;
}

img{
    position: relative;
    top: 5px;
    width: 27px;
}
.VMSSttsInfo{
    top:0px;
    display: flex;
    width: 903px;
    position: relative;
    left: -10px;
    height: calc(33.3% - 20px);
    margin: 0px auto;
    box-shadow: 2px 2px 2px 2px;
}
.VMSSttsInfo>:nth-child(1){
    background-color: #515159;
    width: 100%;
    
}
.VMSSttsInfo>:nth-child(1)>:nth-child(1){
    background-color: #363640;
    color:  rgba(255, 255, 255, 0.747);
    text-align: center;
    font-size: 17px;
    font-weight: bold;
}
.VMS_TYPE>:nth-child(n),.CCTV_TYPE>:nth-child(n),.VDS_TYPE>:nth-child(n),.BIT_TYPE,.RSE_TYPE{
    background-color:  rgba(255, 255, 255, 0.747);
}
/* .VMS_NORMAL,.CCTV_NORMAL,.VDS_NORMAL,.RSE_NORMAL,.BIT_NORMAL{
    color: rgb(0, 0, 0);
} */
.CCTVSttsInfo{
    top:0px;
    display: flex;
    position: relative;
    margin: 0px auto;
    width: 903px;
    left: 10px;
    height: calc(33.3% - 20px);
    box-shadow: 2px 2px 2px 2px;
}
.CCTVSttsInfo>:nth-child(1){
    background-color: #515159;
    width: 100%;
    
}
.CCTVSttsInfo>:nth-child(1)>:nth-child(1){
    background-color: #363640;
    color:  rgba(255, 255, 255, 0.747);
    text-align: center;
    font-size: 17px;
    font-weight: bold;
}
.VDSSttsInfo{
    top:0px;
    display: flex;
    width: 903px;
    position: relative;
    left: -10px;
    height: calc(33.3% - 20px);
    margin: 0px auto;
    box-shadow: 2px 2px 2px 2px;
}
.VDSSttsInfo>:nth-child(1){
    background-color: #515159;
    width: 100%;
    
}
.VDSSttsInfo>:nth-child(1)>:nth-child(1){
    background-color: #363640;
    color:  rgba(255, 255, 255, 0.747);
    text-align: center;
    font-size: 17px;
    font-weight: bold;
}

#linkTraffic {
    z-index: 1;
    width: 638px;
    height: calc(200% + 5px);
    border: 2px solid #515159;
    box-shadow: 2px 2px 2px 2px;
}
#linkTrafficRate {
    z-index: 1;
    width: 251px;
    height: calc(200% + 5px);
    margin-left: 5px;
    border: 2px solid #515159;
    box-shadow: 2px 2px 2px 2px;
    position: relative;
}
.RSESttsInfo{
    top:0px;
    display: flex;
    position: relative;
   	margin: 0px auto;
    width: 903px;
    left: 10px;
    height: calc(33.3% - 20px);
}
/* .RSESttsInfo>:nth-child(1){
    background-color: #534B4B;
    width: 100%;
    height: 197px;
    box-shadow: 2px 2px 2px 2px;
} */
/* .RSESttsInfo>:nth-child(1)>:nth-child(1){
    background-color: #363640;
    color:  rgba(255, 255, 255, 0.747);
    text-align: center;
    font-size: 17px;
    font-weight: bold;
} */

.BITSttsInfo{
    top:0px;
    display: flex;
    width: 903px;
    position: relative;
    left: -10px;
    height: calc(33.3% - 20px);
    margin: 0px auto;
    box-shadow: 2px 2px 2px 2px;
}
.BITSttsInfo>:nth-child(1){
    background-color: #515159;
    width: 100%;
    
}
.BITSttsInfo>:nth-child(1)>:nth-child(1){
    background-color: #363640;
    color:  rgba(255, 255, 255, 0.747);
    text-align: center;
    font-size: 17px;
    font-weight: bold;
}

.blank{
    top:0px;
    display: flex;
    position: relative;
    margin: 0px auto;
    width: 903px;
    left: 10px;
    height: 110px;
    height: 90px;

}
.dbUsaInfo{
    position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
    width: 1900px;
    height: calc(40% - 7px);
    margin: 0px auto;
    padding-top: 5px;
    background-color: #2a2a33;
    border-bottom: 2px solid #515159;
}
.dbTableSpace{
    display: flex;
    position: relative;
    width: 903px;
    height: calc(100% - 40px);
    margin-left: 14px;
    box-shadow: 2px 2px 2px 2px;
}
.dbTableSpace>:nth-child(1){
    background-color: #515159;
    width: 100%;
}
.dbTableSpace>:nth-child(1)>:nth-child(1){
    background-color: #363640;
    color:  rgba(255, 255, 255, 0.747);
    text-align: center;
    font-size: 17px;
    font-weight: bold;
}
.dbSession{
    display: flex;
    position: relative;
    width: 907px;
    left: 64px;
    height: calc(100% - 44px);
    box-shadow: 2px 2px 2px 2px;
    border-top : 2px solid #515159;
    border-left : 2px solid #515159;
    border-bottom : 2px solid #515159;
}

.dbSession > div {
    width: calc(100%/4);
    height: 100%;
    border-right:2px solid #515159;
}
/* .dbSession>:nth-child(1){
    background-color: #534B4B;
    width: 100%;
}
.dbSession>:nth-child(1)>:nth-child(1){
    background-color: #363640;
    color:  rgba(255, 255, 255, 0.747);
    text-align: center;
    font-size: 17px;
    font-weight: bold;
} */

.dbSession2{
    display: flex;
    position: relative;
    width: 440px;
    left: -13px;
    height: 170px;
    box-shadow: 2px 2px 2px 2px;
}
.dbSession2>:nth-child(1){
    background-color: #534B4B;
    width: 100%;
}
.dbSession2>:nth-child(1)>:nth-child(1){
    background-color: #363640;
    color:  rgba(255, 255, 255, 0.747);
    text-align: center;
    font-size: 17px;
    font-weight: bold;
}
.secondBox{
    height: 40%;
    position: relative;
    padding-top: 5px;
    background-color: #2a2a33;
}
.centerPsSttsInfo{
    display: flex;
    position: relative;
	flex-direction: row;
	flex-wrap: wrap;
    width: 1900px;
    height: 100%;
    margin: 0px auto;
}
.comStts_UTP01,.comStts_MOCT01,.comStts_EXT01,.comStts_WEB01,.comStts_CTV01,
.comStts_VDS01,.comStts_VMS01,.comStts_90201,.comStts_90202,.comStts_90203,.comStts_90204,.comStts_90205,.comStts_90101,.comStts_90102,.comStts_90103,.comStts_90104,.comStts_90105,.comStts_80101,.comStts_80102,.comStts_110201,.comStts_160101,.comStts_110101,.comStts_10901,.comStts_11001,.comStts_11101,.comStts_11201,.comStts_80201{
    background-color: rgba(255, 255, 255, 0.747);
    border-radius : 0px 0px 0px 20px; 
    height: 27px;
}
.dbStts_UTP01,.dbStts_MOCT01,.dbStts_EXT01,.dbStts_WEB01,.dbStts_CTV01,
.dbStts_VDS01,.dbStts_VMS01,.dbStts_90201,.dbStts_90202,.dbStts_90203,.dbStts_90204,.dbStts_90205,.dbStts_90101,.dbStts_90102,.dbStts_90103,.dbStts_90104,.dbStts_90105,.dbStts_80101,.dbStts_80102,.dbStts_110201,.dbStts_110101,.dbStts_10901,.dbStts_11001,.dbStts_11101,.dbStts_11201,.dbStts_160101,.dbStts_80201{
    background-color: rgba(255, 255, 255, 0.747);
    border-radius : 0px 0px 20px 0px; 
    height: 27px;
}
.dbManu{
    display: flex;
    flex-direction: column;
    width: 410px;
    position: relative;
    height: calc(100% - 70px);
    margin: 0px auto;
    border-radius: 20px;
    border: 3px solid #515159;
    box-shadow: 2px 2px 2px 2px;
}
.fr{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    width: calc(100% - 20px);
    height: calc(32% - 20px);

}
.itsProcess{
    display: flex;
    flex-direction: column;
    width: 410px;
    position: relative;
    height: calc(100% - 70px);
    margin: 0px auto;
    border-radius: 20px;
    border: 3px solid #515159;
    box-shadow: 2px 2px 2px 2px;
}
.bisProcess{
    display: flex;
    flex-direction: column;
    width: 1000px;
    position: relative;
    height: calc(100% - 70px);
    margin: 0px auto;
    border: 3px solid #515159;
    border-radius: 20px;
    box-shadow: 2px 2px 2px 2px;
}
.VMSDisabilityListValues>:nth-child(2)>:nth-child(n),
.VDSDisabilityListValues>:nth-child(2)>:nth-child(n),
.RSEDisabilityListValues>:nth-child(2)>:nth-child(n),
.BITDisabilityListValues>:nth-child(2)>:nth-child(n),
.CCTVDisabilityListValues>:nth-child(2)>:nth-child(n){
    background-color:  #ffffff;
    color: rgb(0, 0, 0);
}

.VMSDisabilityListValuesHidden,.CCTVDisabilityListValuesHidden,.VDSDisabilityListValuesHidden,
.RSEDisabilityListValuesHidden,.BITDisabilityListValuesHidden {
    display: none;
}
.CCTVDisabilityStautsList,
.VMSDisabilityStautsList,
.RSEDisabilityStautsList,
.BITDisabilityStautsList,
.VDSDisabilityStautsList{
    display: none;
    position: relative;
	flex-direction: row;
	flex-wrap: wrap;
    width: 1900px;
    height: calc(100% - 5px);
    margin: 0px auto;
}

.CCTVDisabilityList,
.VMSDisabilityList,
.VDSDisabilityList,
.RSEDisabilityList,
.BITDisabilityList {
    margin: 0px auto;
    position: relative;
    top: 10px;
    width: 1870px;
    height: calc(100% - 35px);
}
.CCTVDisabilityListValues,
.VMSDisabilityListValues,
.VDSDisabilityListValues,
.RSEDisabilityListValues,
.BITDisabilityListValues
{
    border: 1px solid #534B4B;
    height: calc(100% - 50px);
    overflow: auto;
    width: 100%;
    box-shadow: 2px 2px 2px 2px;
}
.CCTVDisabilityListValues>:nth-child(1),
.VMSDisabilityListValues>:nth-child(1),
.VDSDisabilityListValues>:nth-child(1),
.RSEDisabilityListValues>:nth-child(1),
.BITDisabilityListValues>:nth-child(1){
    top:0px;
    position: sticky;
    width: 100%;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    background-color: #534B4B;
}
.CCTVDisabilityListValues>:nth-child(1)>:nth-child(1),
.VMSDisabilityListValues>:nth-child(1)>:nth-child(1),
.VDSDisabilityListValues>:nth-child(1)>:nth-child(1),
.RSEDisabilityListValues>:nth-child(1)>:nth-child(1),
.BITDisabilityListValues>:nth-child(1)>:nth-child(1) {
    background-color: #363640;
    color:  rgba(255, 255, 255, 0.747);
}
.CCTVDisabilityListValues>:nth-child(2),
.VMSDisabilityListValues>:nth-child(2),
.VDSDisabilityListValues>:nth-child(2),
.RSEDisabilityListValues>:nth-child(2),
.BITDisabilityListValues>:nth-child(2){
    width: 100%;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    background-color: #534B4B;
    height: calc(100% - 27px);
}

.footer {
    position: relative;
    top: 6px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: grid;
    grid-template-columns: 150px 100px 485px 100px 200px 100px 410px 150px 150px;
}
.footer_disNum{
    position: relative;
    left: 00px;
    color: #ffffff;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    width: 150px;
}
.footer_disNumBox{
    position: relative;
    top:4px;
    left: 00px;
    border-radius: 10px;
    border: 1px solid black;
    background-color:  rgba(255, 255, 255, 0.747);
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    width: 150px;
    height: 30px;
    line-height: 30px;
}
.footer_previous{
    visibility: hidden;
    position: relative;
    margin: 0px auto;
    color:  rgba(255, 255, 255, 0.747);
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    width: 80px;
    height: 30px;
}
.footer_previous:hover{
    cursor: pointer;
    color: #9dafe0
    !important;
}
.footer_previous:active{
    color: #6082e2
    !important;
}
.footer_previous10{
    visibility: hidden;
    position: relative;
    margin: 0px auto;
    color: #ffffff;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    width: 80px;
    height: 30px;
    left: 200px;
}
.footer_previous10:hover{
    cursor: pointer;
    color: #9dafe0
    !important;
}
.footer_previous10:active{
    color: #6082e2
    !important;
}
.fotter_page{
    position: relative;
    top:4px;
    border-radius: 10px;
    border: 1px solid black;
    background-color:  rgba(255, 255, 255, 0.747);
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    height: 30px;
    width: 199px;
    line-height: 30px;
}
.footer_next{
    position: relative;
    margin: 0px auto;
    color:  rgba(255, 255, 255, 0.747);
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    width: 80px;
    height: 30px;
}
.footer_next:hover{
    cursor: pointer;
    color: #9dafe0
    !important;
}
.footer_next:active{
    color: #6082e2
    !important;
}
.footer_next10{
    visibility: hidden;
    position: relative;
    margin: 0px auto;
    color: #ffffff;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    width: 80px;
    height: 30px;
    right: 164px;
}
.footer_next10:hover{
    cursor: pointer;
    color: #9dafe0
    !important;
}
.footer_next10:active{
    color: #6082e2
    !important;
}
.footer_excel{
    position: relative;
    top:4px;
    margin: 0px auto;
    border-radius: 10px;
    border: 1px solid black;
    background: linear-gradient(to bottom, hsl(0, 0%, 0%), hsl(0, 0%, 0%), #534B4B);
    color: rgba(255, 255, 255, 0.747);
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    width: 140px;
    height: 30px;
    line-height: 30px;
}
.footer_excel:hover{
    cursor: pointer;
    color: #9dafe0
    !important;
}
.footer_excel:active{
    color: #6082e2
    !important;
}
.footer_refresh{
    position: relative;
    top:4px;
    margin: 0px auto;
    border-radius: 10px;
    border: 1px solid black;
    background: linear-gradient(to bottom, hsl(0, 0%, 0%), hsl(0, 0%, 0%), #534B4B);
    color: rgba(255, 255, 255, 0.747);
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    width: 140px;
    height: 30px;
    line-height: 30px;
}
.footer_refresh:hover{
    cursor: pointer;
    color: #9dafe0
    !important;
}
.footer_refresh:active{
    color: #6082e2
    !important;
}

.jconfirm-title{
    font-weight: bold;
    font-size: 16px !important;
}
.jconfirm-content > div{
    color: black;
    font-weight: bold;
}
.blue{
    color: #4da5e0;
}
