@font-face {
    font-family: quan;
    src: url(../fonts/Quan/Quan.otf);
}

@font-face {
    font-family: quan-black;
    src: url(../fonts/Quan/Quan-Black.otf);
}

@font-face {
    font-family: quan-book;
    src: url(../fonts/Quan/Quan-Book.otf);
}

@font-face {
    font-family: quan-bold;
    src: url(../fonts/Quan/Quan-Bold.otf);
}

@font-face {
    font-family: nexa;
    src: url(../fonts/Nexa/NexaRegular.otf);
}

@font-face {
    font-family: nexa-black;
    src: url(../fonts/Nexa/NexaBlack.otf);
}

@font-face {
    font-family: nexa-light;
    src: url(../fonts/Nexa/NexaLight.otf);
}

@font-face {
    font-family: nexa-bold;
    src: url(../fonts/Nexa/NexaBold.otf);
}

@font-face {
    font-family: ibm-mono;
    src: url(../fonts/IBMPlex/IBMPlexMono-Regular.otf);
}

@font-face {
    font-family: ibm-bold;
    src: url(../fonts/IBMPlex/IBMPlexMono-Bold.otf);
}

@font-face {
    font-family: ibm-text;
    src: url(../fonts/IBMPlex/IBMPlexMono-Text.otf);
}

@font-face {
    font-family: ibm-medium;
    src: url(../fonts/IBMPlex/IBMPlexMono-Medium.otf);
}

@font-face {
    font-family: ibm-light;
    src: url(../fonts/IBMPlex/IBMPlexMono-Light.otf);
}

@font-face {
    font-family: ibm-bold;
    src: url(../fonts/IBMPlex/IBMPlexMono-Bold.otf);
}
@font-face {
    font-family: ibm-italic;
    src: url(../fonts/IBMPlex/IBMPlexMono-Italic.otf);
}

:root {
    --monitorTextColor: #CFE0EE;
    --monitorSelectionColor: #1397FF;
    --monitorBoxColor: #2B5EFF;
    --backgroundColor: rgb(15, 32, 49);
    --foreground-color: rgba(91, 158, 250, 0.2);
    --monitorBoxHeight: 30px ;
    --monitorBoxWidth: 125px;
    --monitorBoxHeightIcon: 30px;
    --monitorBoxWidthIcon: 30px;
    --monitorBoxPadding: 5px;
    --monitorBoxShadowMargin: 2px 0 0 3px; ;
    --gridLine-color: #8b8b8b;
    --gridCircle-color: #8b8b8b;
    --max27inchWidth: 2560px;
    --max27inchHeight: 1440px;
}

::-webkit-scrollbar {
    visibility: hidden;
    width: 0;
    height: 0;
}

img {
    height: 30px;
    width: auto;
}

button {
   all: unset;
}

button:hover {
    cursor: pointer;
}

body {
 background-color: #0c131a;
    padding: 0;
    margin: 0;
    font-family: ibm-mono, sans-serif;
    overflow-y: hidden;
    color: #ffff;
    transition: background-color 0.3s;
}

p {
    padding: 0;
    margin: 0;
}

input  {
    height: fit-content;
    width: 200px;
    background-color: rgb(15, 32, 49);
    border: none;
    outline: none;
    color: var(--monitorTextColor);
    font-family: ibm-mono, sans-serif;
    text-align: center;
    padding: 10px;
}


select {
    height: fit-content;
    width: 200px;
    background-color: rgb(15, 32, 49);
    border: none;
    outline: none;
    color: var(--monitorTextColor);
    font-family: ibm-mono, sans-serif;
    text-align: center;
    padding: 10px;
}

svg {
    height: 25px;
    width: 25px;

}
svg path {

    transition: fill 0.3s;
}



footer {
    margin: auto 0 20px 0;
    font-size: 12px;
    color: rgba(207, 224, 238, 0);
    opacity: 0.2;
    animation: fadeFooter 0.5s 1s forwards;
    transition: opacity 0.3s;
}

footer:hover {
    opacity: 1 !important;
    cursor: pointer;
}

italic {
    opacity: 0;
    font-family: ibm-italic , sans-serif;
    text-align: center;
    transition: opacity 0.3s , margin 0.3s;
    margin: -10px;
    cursor: default;
}

.squareGrid rect{
    fill: var(--monitorBoxColor);
}

#unlicensedInfo {
    display: none;

}

#unlicensedInfo img {
    height: fit-content;
    width: 300px;
    margin-bottom: 20px;
}

.info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info-container p:first-of-type {
    border: solid 1px white;
    padding: 10px;
    transition: color 0.3s, border 0.3s;
}

.info-container:hover > italic {
    margin: 20px;
    opacity: 1;
}

.info-container p:first-of-type:hover {
    color: var(--monitorTextColor);
    border: solid 1px var(--monitorTextColor);
    cursor: default;
}

.info-container p {
    margin: 10px;
    cursor: default;
}

#loadingOverlayLogin {
    display: none;
}



.loading-corners::before {
    position: absolute;
    content: "";
    display: inline-block;
    background-image: url("../icons/img-topLeft-corner.svg"), url("../icons/img-topRight-corner.svg"), url("../icons/img-bottomLeft-corner.svg"), url("../icons/img-bottomRight-corner.svg");
    background-position: left top, right top, left bottom, right bottom;
    background-size: 8px;
    background-color: rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
    animation: iris_hover_anim 0.4s infinite alternate-reverse;
}



.loading-overlay , .generic-overlay {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: filter 0.3s , background-color 0.3s , opacity 0.3s;
}
.loading-overlay img {
    height: 50px;
    width: 50px;
}

.loading-anim-container {
    margin: 20px 0;
    animation: fade 0.5s forwards;
}

.loading-square-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
}

.loading-square-container svg {
    height: 100%;
    width: 100%;
    position: absolute;
}
.loading-lock {
    animation: anim-lock 0.5s forwards infinite alternate-reverse;
}
.loading-lock-success {
    animation: anim-lock 0.3s forwards reverse;
}

.loading-lock-failure {
    animation: anim-lock 0.4s forwards;
}

.loading-square  , .loading-shield , .loading-deployment{
    height: 35px !important;
    width: 35px !important;
}
.loading-failure {
    height: 30px !important;
    width: 30px !important;
}
.loading-failure , .loading-shield , .loading-deployment{
    display: none;
}

.loading-square-container img {
    position: absolute;
}

.loading-status-text {
    opacity: 0;
    animation: fade-left 0.5s  forwards;
}

.loading-user-text , .loading-id-text{
    opacity: 0;
    animation: fade-left 0.5s  forwards;
    margin: 10px 0;
}

.authorization-success {
    color: #2B5EFF;
}

.authorization-failure {
    color: #ff0949;
}

    /* LOGIN PAGE */

#loginButton:disabled {
    color: rgba(255, 255, 255, 0.5);
    border: solid 1px rgba(255, 255, 255, 0.5);
}

#loginButton:disabled:hover {
    background-color: transparent;
}
.login-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-color: #1b2531;
    color: var(--monitorTextColor);
}

.login-wrapper .generic-container {
    animation: fade-down 0.5s 0.3s forwards;
}

.login-big-title {
    font-size: 40px;
    animation: fade-down 0.5s forwards;

}

.login-watermark {
    opacity: 0;
    margin: 30px 0 40px 0;
    animation: fade-down 0.5s 0.1s forwards;
}

.login-box-title {
    opacity: 0;
    margin-bottom: 50px;
    font-size: 25px;
    animation: fade-down 0.5s 0.1s forwards;
}

.login-logo-box {
    position: fixed;
    top: 0;
    left: 0;
    margin: 30px;
    opacity: 0;
    animation: fade 0.5s 0.8s forwards;
}

.login-logo-box img {
    height: 35px;
    width: auto;
}

.login-box-container {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login-box-container .generic-button {
    width: 200px;
    margin-top: 20px;
}



.login-input-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    opacity: 0;
    animation: fade-down 0.5s 0.2s forwards;
}

.login-input-container label {
    margin: 10px 0;
}

/* LOGIN PAGE */

/* PANEL MANAGEMENT */
.panel-sideNavBar-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    max-width: 275px;
    width: 100%;
    margin-right: 10px;

}

.panel-sideNavBar-inner-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 250px;
    margin-bottom: 100px;
    overflow-y: scroll;
    /*background-color: #1a2125;*/
    /*border-radius: 16px;*/
    /*-webkit-filter: drop-shadow(5px 5px 2px #000000);*/
}

.panel-sideNavBar-wrapper ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;

}

.panel-sideNavBar-wrapper ul li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border-radius: 6px;
    height: fit-content;
    width: 90%;
    margin: 10px 0;
    transition:  opacity 0.3s , color 0.3s , background-color 0.3s;
}

.panel-sideNavBar-wrapper svg {
    fill: rgba(255, 255, 255, 1);

}

.panel-sideNavBar-wrapper ul li:hover {
    color: #ffff;
    cursor: pointer;
    background-color: rgba(19, 151, 255, 0.1);

}


.panel-sideNavBar-wrapper ul li:hover .panel-mainText{
    color: var(--monitorSelectionColor)
}

.panel-sideNavBar-wrapper ul li:hover .panel-sideBarIconContainer{
    border: 2px solid  var(--monitorSelectionColor);

}


.panel-sideNavBar-wrapper ul li:hover svg {
    fill: var(--monitorSelectionColor);
    cursor: pointer;
}

.panel-sideBarIconContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    height: 40px;
    width: 40px;
    background-color: #1b2531;
    border: solid 2px transparent;
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
    transition: color 0.3s , opacity 0.3s , border 0.3s;
}
.panel-sideBarIconContainer svg {
    height: 20px;
    width: 20px;
}


.panel-textContainer {
    margin-left: 10px;
    width: 60%;
}
.panel-mainText{
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    transition: color 0.3s;
}

.panel-subText {
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
}


.panel-topBar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    height: 50px;
    width: 100%;
    opacity: 0;
    animation: fade 0.5s forwards;

}

.panel-topBar-user-container {
    margin: 0 50px 0 auto;
    color: var(--monitorTextColor);
}

.panel-user-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border: solid  1px transparent;
    transition: color 0.3s , border 0.3s , scale 0.1s;
}

.panel-user-container svg , .deployment-table-container tbody svg {
    fill: var(--monitorTextColor);
    margin: 0 5px;
}

.panel-user-container:hover {
    color: var(--monitorSelectionColor);
    border: solid 1px var(--monitorTextColor);
    cursor: pointer;

}

.panel-user-container:hover svg , .deployment-table-container tbody svg:hover{
fill: var(--monitorSelectionColor);
}

.panel-user-container:active , .deployment-table-container tbody svg:active{
    scale: 1.05;
}

.panel-topBar-container {
    display:flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    width: 98%;

    /*-webkit-filter: drop-shadow(2px 2px 2px black);*/
}

.panel-topBar-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    height: 40px;
    width: auto;
    margin-left: 10px;

}

.panel-topBar-logo-container img {
    max-height: 40px;
    height: 100%;
    width: auto;
}

.panel-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    padding: 10px;
    box-sizing: border-box;

}

.panel-inner-wrapper {
    display: flex;
    width: 100vw;
    height: 100vh;
    /*max-height: 100vh;*/
    max-height: var(--max27inchHeight);
    max-width: var(--max27inchWidth);
    padding: 25px;
    box-sizing: border-box;
    overflow: hidden;
}

.panel-table , .panel-table th , .panel-table td {
    border: solid 1px rgba(10, 137, 220, 0.2);
}

.panel-title-container {
    display: flex;
    flex-direction: row;
}

.panel-title-container p {
    opacity: 0;
    font-size: 12px;
    margin: 10px 10px 0 0;
    color: #8b8b8b;
}

.panel-title-container p:first-child {
    opacity: 0;
    animation: fade-left 0.5s forwards ;
}

.panel-title-container p:nth-child(2) {
    opacity: 0;
    animation: fade-left 0.5s 0.1s forwards ;
}

.panel-title-container p:last-child {
    color: var(--monitorSelectionColor);
    opacity: 0;
    animation: fade-left 0.5s 0.2s forwards ;
}

.panel-big-title-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 32px;
    margin: 10px 0 30px 0;
    opacity: 0;
    animation: fade-left 0.5s 0.2s forwards ;

}

.panel-big-title{
    margin-right: auto;
}

.panel-table {
    color: #fff;
    text-align: left;
    table-layout: fixed;
    border-collapse: collapse;
    height: fit-content;
    width: 100%;
    opacity: 0;
    overflow-y: scroll;
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
    animation: fade-left 0.5s 0.4s forwards;

}



.panel-table thead {
    position: sticky;
    width: 100%;
    background-color: rgba(91, 158, 250, 0.2);
    font-family: ibm-light , sans-serif;
    color: #9ac5ff;
    top: 0;
    z-index: 1;
}

.panel-table tbody tr {
    transition: background-color 0.3s;
}

.panel-table tbody tr:hover {
    background-color: rgba(19, 151, 255, 0.1)!important;
}
.panel-table th , .panel-table td {
    padding: 5px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.panel-table th:first-child {
    min-width: 200px;
}


.panel-network-icon {
    height: 25px;
    width: 25px;
    fill: white;
}

/* PANEL MANAGEMENT */

/* MONITORING INFO PANEL */

.monitoring-panel{
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 75px;
    top: 70%;
    transform: translateY(-50%);
    width: fit-content;
    height: fit-content;
    padding: 20px;
    background-color: rgba(0,0,0,.5);
    z-index: 5;
}
.monitoring-panel-container{
    display: flex;
    flex-direction: row;
    height: fit-content;
    width: fit-content;
    margin: 10px;
}

.monitoring-table-container {
    max-height: 600px;
    overflow-y: scroll;
}

.monitoring-panel-container:hover .monitoring-box-icon-shadow,
.monitoring-panel-container:hover .monitoring-box-shadow {
    margin: var(--monitorBoxShadowMargin);
    border: #FFFFFF solid 1px;
    background-color: #0F1836;
}

.monitoring-panel-container:hover .monitoring-box-icon,
.monitoring-panel-container:hover .monitoring-box {
    transform: translateY(-1px);
}


.monitoring-box-container {
    position: relative;
    display: flex;
    margin-right: 10px;
    height: fit-content;
    width: fit-content;
    z-index: 1;
}


.monitoring-box-container:hover .monitoring-box-icon-shadow,
.monitoring-box-container:hover .monitoring-box-shadow {
    margin: var(--monitorBoxShadowMargin);
    border: #FFFFFF solid 1px;
    background-color: #0F1836;
}

.monitoring-box-container:hover .monitoring-box-icon,
.monitoring-box-container:hover .monitoring-box {
    transform: translateY(-1px);
}

.monitoring-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-left: auto;
}
.monitoring-container div {
    margin-left: 10px;
}

.monitoring-panel-container:hover #heartBeatIcon{
    animation: heartbeat 0.5s infinite alternate-reverse;
}

.monitoring-box , .monitoring-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--monitorTextColor);
    fill: var(--monitorTextColor);
    padding: var(--monitorBoxPadding);
    background-color: var(--monitorBoxColor);
    border: 0;

}

.monitoring-box-icon {
    height: var(--monitorBoxHeightIcon);
    width:  var(--monitorBoxWidthIcon);
    cursor: default;
    transition: margin 0.3s , transform 0.3s;
}

.monitoring-box-online {
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px rgba(0, 62, 255, 0.1);
    background-color: rgba(43, 94, 255, 0.1);
    color: #1f7fd2;
    fill: #2B5EFFFF;
    font-family: ibm-bold , sans-serif;
    height: fit-content;
    width:  fit-content;
    min-width: 80px;
    margin-left: 10px;
    padding: 5px;
    font-size: 12px;
    animation: flashing 2s forwards infinite alternate-reverse;
    transition: margin 0.3s , transform 0.3s,color 0.3s, scale 0.1s,  opacity 0.3s , background-color 0.3s;

}
.monitoring-box-offline {
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px rgba(255, 28, 88, 0.1);
    background-color: rgba(209, 44, 63, 0.1);
    color: #D12C3F;
    fill: #FF1C58;
    min-width: 80px;
    font-family: ibm-bold , sans-serif;
    height: fit-content;
    width:  fit-content;
    margin-left: 10px;
    padding: 5px;
    font-size: 12px;
    transition: margin 0.3s , transform 0.3s,color 0.3s, scale 0.1s,  opacity 0.3s , background-color 0.3s;

}


.monitoring-box-online svg ,.monitoring-box-offline svg {
    height: 15px;
    width: 15px;
    margin-right: 5px;
}

.monitoring-box-online svg path{
    animation: networkConnected 2s forwards infinite alternate-reverse;
}

.monitoring-client-box  {
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px rgba(255, 255, 255, 0.2);
    background-color: #292c33;
    color: #858585;
    fill: var(--monitorTextColor);
    height: var(--monitorBoxHeight);
    min-width:  var(--monitorBoxWidth);
    width:   fit-content;
    padding: var(--monitorBoxPadding);
    transition: margin 0.3s , transform 0.3s,color 0.3s, scale 0.1s,  opacity 0.3s , background-color 0.3s;
    font-size: 12px;
    margin-left: auto;
}

.monitoring-client-box:hover{
    color: var(--monitorTextColor);
    background-color: var(--monitorBoxColor);
    cursor: default;
}

.monitoring-text-link {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-left: auto;
    border: transparent solid 1px;
    color: #1397FF;
    height: var(--monitorBoxHeight);
    width: fit-content;
    min-width: var(--monitorBoxWidth);
    padding: var(--monitorBoxPadding);
    transition: margin 0.3s , transform 0.3s,color 0.3s, scale 0.1s,  opacity 0.3s , background-color 0.3s , border 0.3s;
}

.monitoring-text-link:hover{
    border:  var(--monitorBoxColor) solid 1px;
    color: var(--monitorTextColor);
    cursor: pointer;
}
.monitoring-text-link:active {
    scale: 1.05;
}

.monitoring-box {
    height: var(--monitorBoxHeight);
    width:  var(--monitorBoxWidth);
    cursor: default;
    font-size: 13px;
    transition: margin 0.3s , transform 0.3s,color 0.3s, scale 0.1s,  opacity 0.3s;
}

.monitoring-box:active {
    scale: 1.05;
}

.monitoring-box-shadow{
    position: absolute;
    background-color: transparent;
    top: 0;
    left: 0;
    height: var(--monitorBoxHeight);
    width:  var(--monitorBoxWidth);
    padding: var(--monitorBoxPadding);
    margin: 0 0 0 0;
    z-index: -1;
    border: transparent solid 1px;
    transition: margin 0.3s , border 0.3s ;
}

.monitoring-box-icon-shadow{
    position: absolute;
    background-color: transparent;
    top: 0;
    left: 0;
    height: var(--monitorBoxHeightIcon);
    width:  var(--monitorBoxWidthIcon);
    padding: var(--monitorBoxPadding);
    margin: 0 0 0 0;
    z-index: -1;
    border: transparent solid 1px;
    transition: margin 0.3s , border 0.3s;
}

.monitoring-box-icon svg {
    height: 25px;
    width: 25px;
}



.monitoring-panel2{
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 75px;
    top: 50px;
    width: fit-content;
    height: fit-content;
    padding: 20px;
    background-color: rgba(0,0,0,.5);
    z-index: 5;
}

 .monitoring-panel2 input {
     background-color: #5931b9 !important;
 }
#titleDataBoxIcon , #titleDataBox , #messageDataBoxIcon , #messageDataBox , #timeOutDataBoxIcon , #timeOutDataBox   {
    background-color: #5931b9;
}


#sendNotificationIconBox , #sendNotificationBox {
    background-color: #d2762b;
    cursor: pointer;
}

#floorPlanIconBox , #floorPlanBox {
    background-color: #0d731e;
    cursor: pointer;
}

/* MONITORING INFO PANEL */

/* CLIENT PANEL */

.client-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--monitorTextColor);
    position: absolute;
    right: 75px;
    top: 50px;
    height: 125px;
    width: 200px;
    z-index: 5;
    background-color: rgba(0,0,0,0.5);
}

#getConnectedClientIconBox , #getConnectedClientBox {
    cursor: pointer;
}

/* CLIENT PANEL */

/* NOTIFICATIONS */

.notification-customMessage-box-container {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    border: solid 1px rgba(10, 137, 220, 0.2);
    background-color: rgba(91, 158, 250, 0.2);
    padding: 10px;
    opacity: 0;
    animation: fade-left 0.5s 0.3s forwards;
    -webkit-filter: drop-shadow(4px 4px 4px black);
    filter: drop-shadow(4px 4px 4px black);
}

.notification-customMessage-box {
    display: flex;
    width: fit-content;
    justify-content: left;
    align-items: flex-start;
    color: var(--monitorTextColor);
    margin: 10px 0;
}


.notification-customMessage-box label {
    display: flex;
    justify-content: flex-start;
    width: 100px;
}

.notification-customMessage-box select {
    background-color: rgba(43, 94, 255, 1);
    height: fit-content;
    min-width: 200px;
    max-width: 200px;
    padding: 5px;
}
.notification-customMessage-box select option {
    background-color: rgb(32, 49, 80);
}

.notification-customMessage-box-container .monitoring-box-container {
    margin: 20px 0;
    width: 90% ;
}

.notification-customMessage-box-container .monitoring-box ,.notification-customMessage-box-container .monitoring-box-shadow{
    width: 98% !important;
}

.notification-box-title {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    color: var(--monitorTextColor);
    margin: 20px 0;
}



/* NOTIFICATIONS */

/* SEND DATA */

#sendDataButton {
    transition: opacity 0.3s;
}

#sendDataButton:active {
    opacity: 0.5;
}

#sendDataButton .monitoring-box , #sendDataButton .monitoring-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #CFE0EE;
    fill: #CFE0EE;
    padding: var(--monitorBoxPadding);
    background-color: #D12C3F;
}



/* SEND DATA */


/* RECEIVE DATA */

#startConsumerButton ,  #changeQueueButton{
    transition: opacity 0.3s;
}

#receiveDataBox ,#receiveDataBoxIcon , #sendDataBox , #changeQueueBoxIcon , #changeQueueDataBox {
    cursor: pointer;
    overflow-y: hidden;
}

#startConsumerButton:active , #changeQueueButton:active {
    opacity: 0.5;
}


#startConsumerButton .monitoring-box , #startConsumerButton .monitoring-box-icon , #changeQueueButton .monitoring-box , #changeQueueButton .monitoring-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #153467;
    fill: #153467;
    padding: var(--monitorBoxPadding);
    background-color: #CFE0EE;
}


/* RECEIVE DATA */

/* QUEUE */

#queueDataButton .monitoring-box , #queueDataButton .monitoring-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #CFE0EEFF;
    fill: #CFE0EEFF;
    padding: var(--monitorBoxPadding);
    background-color: #1b2531;
}

.monitoring-box input {
    width: 100%;
    height: 100%;
    background-color: #1b2531;
    border: none;
    outline: none;
    color: var(--monitorTextColor);
    font-family: nexa-black, serif;
    text-align: center;
}
::placeholder {
    color: #CFE0EEFF;
    opacity: .5; /* Firefox */
}
/* QUEUE */


/* TEXT PANEL */

.textPanel {
    position: absolute;
    display: flex;
    flex-direction: column;
    left:500px;
    top: 50%;
    transform: translateY(-50%);
    width: 700px;
    height: 500px;
    padding: 30px;
    background-color: rgba(0,0,0,.5);
    z-index: 5;
}

.textPanel textarea{
    outline: none;
    border: none;
    width: 700px;
    height: 500px;
    background-color:#CFE0EEFF ;
    color: #153467;
    font-family: nexa-black, serif;
}

/* TEXT PANEL */


/* LOG PANEL */

.panel-logs {
    width: 100%;
    flex-direction: column;
}

.panel-logs-container {
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.panel-logs-container-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: left;
    gap: 10px;
    padding: 5px;
    box-sizing: border-box;
    width: 100%;
    opacity: 0;
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
    border: solid 1px rgba(0, 62, 255, 0.1);
    background-color: rgba(91, 158, 250, 0.2);
    color: #9ac5ff;
    font-weight: bold;
    animation: fade-left 0.5s 0.4s forwards;
}

.panel-log-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: left;
    gap: 10px;
    padding: 10px;
    margin: 20px 0;
    box-sizing: border-box;
    width: 100%;
    opacity: 0;
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
    border: solid 1px rgba(0, 62, 255, 0.1);
    background-color: rgba(23, 55, 103, 0.2);
    color: var(--monitorTextColor);
    font-weight: bold;
    animation: fade-left 0.5s 0.4s forwards;
}

.log-entry {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    padding: 5px;
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
    border: solid 1px rgba(0, 62, 255, 0.1);
    background-color: rgba(23, 55, 103, 0.5);
    margin-top: 10px;
    opacity: 0;
    transition: background-color 0.3s;
    animation: fade-left 0.5s 0.4s forwards;
}


.log-entry:hover {
    background-color: rgba(23, 55, 103, 0.9);
}


/* LOG PANEL */


.background-overlay{
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 3;
}

#grid {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s , color 0.3s;
}


/* NAVIGATION */



#panelSettings  ,#panelMonitoring, #panelDeployments, #panelConfigurations, #panelLab , #panelPushNotification ,#panelLogs , #panelDatabases , #panelSupport ,#panelGlacial, #panelTerminal , #panelSepulcher , #cmdPlazaConfiguration ,#cmdWorldConfiguration{
    display: none;
    flex-direction: column;
}

.panel-active {
    display: flex !important;
    flex-direction: column;

}

.nav-selected {
    background-color: rgba(31, 127, 210, 0.2) !important;

}

/*.nav-selected .panel-mainText {*/
/*    color: #1397FF !important;*/
/*}*/


.nav-selected svg {
    fill: #1397FF !important;
}


/* NAVIGATION */

/* SUPPORT */

.support-panel .generic-container {
    animation: fade-left 0.5s 0.4s forwards;
}

.support-table-container {
    /*display: flex;*/
    /*flex-direction: column;*/
    /*align-items: center;*/
    max-height: 600px;
    border: solid 1px rgba(10, 137, 220, 0.2);
    background-color: rgba(91, 158, 250, 0.2);
    padding: 10px;
    opacity: 0;
    -webkit-filter: drop-shadow(4px 4px 4px black);
    filter: drop-shadow(4px 4px 4px black);
    overflow-y: scroll;
    animation: fade-left 0.5s 0.4s forwards;
}

.support-table-container .panel-table {
    border: transparent;
}


.support-table-container .panel-table thead {
    background-color: #1b2531;
}

.support-table-container .panel-table tbody tr td {
    border: transparent;
}

.support-table-container .panel-table tbody tr td div , .support-table-container .panel-table tbody tr td div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 50px;
    margin: 20px 10px 20px 0;
    text-overflow: ellipsis;
    overflow: hidden;
}

#supportCenter ,#deploymentCenter {
    display: none;
}

.support-center-overlay , .deployments-center-overlay{
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-color: rgba(27, 37, 49, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 100;
}

.support-box-panel , .deployment-box-panel{
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    max-height: 700px;
    height: fit-content;
    width: 100%;
    max-width: 700px;
    overflow-y: scroll;
    color: var(--monitorTextColor);
    border: solid 1px rgb(21, 52, 103);
    background-color: rgb(32, 49, 80);
    padding: 20px;
    box-sizing: border-box;

}


/* SUPPORT */

/* DEPLOYMENTS */

.panel-deployments  {
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.deployment-box-panel .generic-box {
    box-sizing: border-box;
    margin-bottom: 30px ;
}

.generic-wrapper {
    flex-direction: row;
}

.panel-deployments .generic-wrapper .generic-container button {
    margin-right: 20px;
}
.deployment-container-options {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;

}

.deployment-container-options li , .deployment-host-config div {
    margin: 10px 0;
}

.deployment-container-options li {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.deployment-container-options li label {
    width: 150px;
}

.panel-deployments .generic-container {
    animation: fade-left 0.5s 0.3s forwards;
}



.deployment-table-container {
    /*display: flex;*/
    /*flex-direction: column;*/
    /*align-items: center;*/
    max-height: 600px;
    border: solid 1px rgba(10, 137, 220, 0.2);
    background-color: rgba(91, 158, 250, 0.2);
    padding: 10px;
    opacity: 0;
    -webkit-filter: drop-shadow(4px 4px 4px black);
    filter: drop-shadow(4px 4px 4px black);
    overflow-y: scroll;
    animation: fade-left 0.5s 0.4s forwards;
}

.deployment-table-container .panel-table {
    border: transparent;
}


.deployment-table-container .panel-table thead {
    background-color: #1b2531;
}

.deployment-table-container .panel-table tbody tr td {
    border: transparent;
}

.deployment-table-container .panel-table tbody tr td div , .deployment-table-container .panel-table tbody tr td div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 50px;
    margin: 20px 10px 20px 0;
    text-overflow: ellipsis;
    overflow: hidden;
}

.deployment-state-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.deployment-row {
    transition: opacity 0.3s;
}

.disable {
    opacity: 0.2 !important;
    pointer-events: none !important;
}

.panel-deployments .panel-big-title-container .generic-button  {
    margin: 0 10px;
}

/* DEPLOYMENTS */


/* CONFIGURATIONS */
.panel-configurations {
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.panel-configurations svg {
    height: 20px;
    width: 20px;
}

.panel-configurations svg path {
    fill: var(--backgroundColor);
}

.panel-configurations-download-button {
    text-align: center;
}
.panel-configurations-download-button:hover {
    cursor: pointer;
}
.panel-configurations-download-button:hover path {
    fill: var(--monitorBoxColor);
}

.server-configuration {
    display: flex;
    flex-direction: column;
}

.nginx-custom-html-table {
    display: grid;
    box-sizing: border-box;
    padding: 10px;
    background-color: var(--backgroundColor);
    max-width: 750px;
    width:fit-content;
    text-align: left;
    max-height: 700px;
    height: fit-content;
    opacity: 0;
    animation: fade-left 0.5s 0.4s forwards;
}

.nginx-custom-html-table-header {
    display: grid;
    grid-template-columns: 50px 150px 100px 100px 120px 60px;
    box-sizing: border-box;
    padding: 10px;
    height: fit-content;
    font-weight: bold;
    color: #9ac5ff;
    border: solid 1px rgba(10, 137, 220, 0.2);
    background-color: #1b2531;
    -webkit-filter: drop-shadow(2px 2px 2px black);
    filter: drop-shadow(2px 2px 2px black);
    opacity: 0;
    animation: fade-left 0.5s 0.4s forwards;
}



.nginx-custom-html-table-body {
    display: grid;
    max-height: 400px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    overflow-y: scroll;
    background-color: var(--foreground-color);
}

.nginx-custom-html-table-row {
    display: grid;
    height: fit-content;
    grid-template-columns: 50px 150px 100px 100px 120px 60px;
    transition: background-color 0.3s;
}

.nginx-custom-html-table-row input {
    width: fit-content;
}


.nginx-custom-html-table-row div {
    overflow-x: hidden;
    margin: 10px 5px;
    white-space: nowrap;
}

.nginx-custom-html-table-row:hover {
    background-color: rgba(14, 35, 66, 0.65);

}


.panel-buttons-configurations {
    opacity: 0;
    animation: fade-left 0.5s 0.3s forwards;
}

.configuration-panel , .lab-panel{
    display: flex;
    flex-direction: column;
    margin: 20px 0;
}

.lab-panel {
    animation: fade-left 0.5s 0.4s forwards;
}

.panel-action-bar {
    margin: 10px 0;
    animation: fade-left 0.5s 0.3s forwards; opacity: 0
}

/* CONFIGURATIONS */



/* SERVER STATS */
/*#serverStat {*/
/*    display: none;*/
/*}*/

.server-stat-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: solid 1px rgba(10, 137, 220, 0.2);
    background-color: rgba(91, 158, 250, 0.2);
    height:fit-content;
    width:fit-content;
    padding: 10px;
    margin-top: 20px;
    opacity: 0;
    animation: fade-left 0.5s 0.4s forwards;
}


.memory-stats-bar-container {
    position: relative;
    min-width: 100px;
    max-width: 100px;
    height: 10px;
    border: solid 1px var(--monitorTextColor);
    margin: 10px 20px;
}


.memory-stats-bar {
    position: absolute;
    height: 100%;
    background-color: var(--monitorBoxColor);
    z-index: 10;
    transition: width 0.3s;
    /*animation: flashing-memory 1s infinite alternate-reverse;*/
}

.memory-stats-bar-background {
    position: absolute;
    background-color: #153467;
    height: 100%;
    width: 100%;
    z-index: 9;
}



/* SERVER STATS */

/* TERMINAL */

.panel-terminal {

    height: 100%;
    width: 100%;
}

.terminal-panel-container , .glacial-panel-container{
    display: flex;
    flex-direction: column;
    position: relative;
    background-color:  rgb(15, 32, 49);
    color: var(--monitorTextColor);
    height: 100vh;
    max-height: 100vh;
    width: 100%;

    box-sizing: border-box;
    padding: 20px;
    opacity: 0;
    animation: fade-left 0.5s 0.4s forwards;
}

.terminal-output-container , .glacial-output-container {
    max-height: 700px;
    overflow-y: scroll;
    height: 100%;
    width: 100%;
}

.terminal-output {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: fit-content;
    padding: 10px;
    box-sizing: border-box;
    opacity: 0;
    transition: color 0.3s, background-color 0.3s , opacity 0.3s , height 0.3s , max-height 0.3s , width 0.3s , max-width 0.3s;
    animation: fade-left 0.5s forwards;
}

#terminalPanelInformation {
    display: none;
}

.terminal-panel-information{
    position: absolute;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100px;
    height: fit-content;
    max-height: 400px;
    width: fit-content;
    color: var(--monitorTextColor);
    background-color: #1b2531;
    filter: drop-shadow(4px 4px 2px rgba(0, 0, 0, 0.44));
    z-index: 200;
    padding: 20px;
    box-sizing: border-box;
    animation: fade 0.5s forwards;
}

.terminal-panel-information-container {
    display: flex;
    flex-direction: row;
    position: sticky;
    box-sizing: border-box;
    top: 0;
}


.terminal-panel-information-inner-container {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

.terminal-panel-information-inner-container ul li div {
    display: flex;
    flex-direction: row;
}

.terminal-panel-information-inner-container p {
    display: flex;
    align-items: center;
    margin: 10px;
    width: 100px;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.terminal-panel-os {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    animation: fade-left 0.5s forwards;
}

.terminal-panel-information-button {
    position: absolute;
    top: 20px;
    right: 20px;
    fill: var(--monitorTextColor);
    opacity: 0.5;
    transition: opacity 0.3s  , background-color 0.3s , scale 0.3s ;
    z-index: 100;
}

.terminal-panel-information-button:hover  {
    opacity: 1;
    cursor: pointer;
}

.terminal-panel-information-button:active  {
    scale: 1.1;
}

.terminal-output:hover {
    background-color: rgba(19, 151, 255, 0.1)!important;
}

.terminal-input-container , .glacial-input-container{
    display: flex;
    flex-direction: row;
    background-color:  rgb(15, 32, 49);
    width: fit-content;
}

.terminal-input-wrapper , .logs-input-wrapper , .glacial-input-wrapper {
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
    opacity: 0;
    animation: fade-left 0.5s 0.3s forwards;
}

.panel-terminal .generic-button {
    margin-left: auto;
}

.terminal-information-system {
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px rgba(255, 255, 255, 0.2);
    background-color: #292c33;
    color: #858585;
    fill: var(--monitorTextColor);
    height: var(--monitorBoxHeight);
    min-width:  var(--monitorBoxWidth);
    width:   fit-content;
    box-sizing: border-box;
    padding: var(--monitorBoxPadding);
    transition: margin 0.3s , transform 0.3s,color 0.3s, scale 0.1s,  opacity 0.3s , background-color 0.3s;
    font-size: 12px;
    margin: 0 10px;
}

.terminal-information-system:hover ,.terminal-information-system:focus  {
    color: var(--monitorTextColor);
    background-color: #153467;
    /*background-color: var(--monitorBoxColor);*/
    cursor: pointer;
}

.terminal-information-system svg {
    margin: 0 10px;
}

.terminal-information-system svg path {
    fill: var(--gridCircle-color);
}

.terminal-information-system:hover path {
    fill: var(--monitorTextColor);
}

.terminal-active {
    color: var(--monitorTextColor) !important;
    background-color: var(--monitorBoxColor) !important;
}

#terminalWindowsInfoPanel , #terminalLinuxInfoPanel {
    display: none;
}

/* TERMINAL */


/* GLACIAL */

.panel-glacial {
    height: 100%;
    width: 100%;
}



.panel-glacial .generic-button {
    margin-left: auto;
}

.glacial-output {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: fit-content;
    padding: 10px;
    box-sizing: border-box;
    opacity: 0;
    transition: color 0.3s, background-color 0.3s , opacity 0.3s , height 0.3s , max-height 0.3s , width 0.3s , max-width 0.3s;
    animation: fade-left 0.5s forwards;
    white-space: pre-wrap;

}

.glacial-output.typing::after {
    content: "|";
    animation: blink 1s infinite;
    opacity: 0.5;
    margin-left: 2px;
}

@keyframes blink {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0; }
}


/* GLACIAL */

/* PROCESS UI */

#processDisplay , #popDisplay {
    display: flex;
    opacity: 0;
    width: 100%;
    max-height: 200px;
    min-height: 50px;
    overflow-y: scroll;
    max-width: 600px;
    transition: opacity 0.3s , width 0.3s , height 0.3s , min-width 0.3s , max-height 0.3s , min-height 0.3s;
}

#processWrapper , #popWrapper{
    display: none;
    opacity: 0;
    transition: opacity 0.3s , width 0.3s , min-width 0.3s;
}

.processWrapper {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;

    border-radius: 16px;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    height: fit-content;
    width: fit-content;
    padding: 10px;
    margin: 20px 0;
    background-color: rgba(59, 64, 74, 0.8);
    -webkit-backdrop-filter: blur(5px) ;
    backdrop-filter: blur(5px);
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.3)) !important;
    cursor: default;
    transition: opacity 0.3s;
    z-index: 500;
}

.process-info-container {
    display: flex;
    margin: 20px 0;
    opacity: 0;
}
.processWrapper ul{
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
}

.processWrapper ul li {
    margin: 0 10px;
}

.processWrapper:hover .processContainer {
    opacity: 1;
}

.processContainer {
    display: flex;
    position: absolute;
    max-height: 400px;
    height: fit-content;
    padding: 10px;
    width: 420px;
    left: 50%;
    bottom: 100px;
    overflow: hidden;
    transform: translateX(-50%);
    background-color: rgba(59, 64, 74, 0.8);
    -webkit-backdrop-filter: blur(5px) ;
    backdrop-filter: blur(5px);
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.3)) !important;
    border-radius: 16px;
    opacity: 0;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    transition: opacity 0.3s;
}

.processContainer:hover {
    opacity: 0 !important;
    display: none;
}

.processText {
    animation: processing 1s infinite alternate-reverse;
}

#processCompleteIcon , #processErrorText {
    display: none;
}

/* PROCESS UI */

/* GENERIC ITEMS */

.generic-wrapper {
    display: flex;
}

.generic-top-title {
    position: sticky;
    top: 0;
}

.generic-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px var(--monitorTextColor);
    color: var(--monitorTextColor);
    fill: var(--monitorTextColor);
    height: fit-content;
    width:  fit-content;
    padding: 10px;
    font-size: 16px;
    margin: 10px 0;
    transition: margin 0.3s , transform 0.3s,color 0.3s, scale 0.1s,  opacity 0.3s , background-color 0.3s;
}

.generic-container-fade {
    display: flex;
    flex-direction: row;
    animation: fade 0.5s forwards;
}

.generic-container {
    display: flex;
    flex-direction: row;
    opacity: 0;
}
.generic-container ul {
    margin: 0 10px;
}

.generic-container:disabled {

}

.generic-info-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px rgba(255, 255, 255, 0.2);
    background-color: #292c33;
    color: #858585;
    fill: var(--monitorTextColor);
    height: var(--monitorBoxHeight);
    min-width:  var(--monitorBoxWidth);
    width:   fit-content;
    padding: var(--monitorBoxPadding);
    transition: margin 0.3s , transform 0.3s,color 0.3s, scale 0.1s,  opacity 0.3s , background-color 0.3s;
    font-size: 12px;
    margin: 0 0 10px 10px;
}
 .generic-info-box:hover{
    color: var(--monitorTextColor);
    background-color: var(--monitorBoxColor);
    cursor: default;
}

 .generic-sizing-box {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 20px;
     width: 20px;
     padding: 10px;
     margin-left: 10px;
     border: solid 1px rgba(255, 255, 255, 0.2);
     background-color: #292c33;
     color: #858585;
     transition: margin 0.3s , transform 0.3s,color 0.3s, scale 0.1s,  opacity 0.3s , background-color 0.3s ;
 }


.generic-sizing-box svg {
    height: 20px;
    width: 20px;
}

.generic-sizing-box:hover{
    color: var(--monitorTextColor);
    background-color: var(--monitorBoxColor);
    cursor: pointer;
}

.generic-sizing-box path {
    fill:  #858585 !important;
}

.generic-sizing-box:hover path {
    fill: var(--monitorTextColor) !important;
}

.generic-sizing-box:active {
    scale: 1.05;
}

.generic-sizing-box:disabled {
    opacity: 0.5;
}

.generic-sizing-box:hover:disabled {
    opacity: 0.8;
    color: #858585;
    fill: #858585;
    background-color: #292c33!important;
}

.generic-button {
     display: flex;
     align-items: center;
     justify-content: center;
     height: var(--monitorBoxHeight);
     width:  var(--monitorBoxWidth);
     cursor: default;
     color: #1397FF;
     border: solid 1px var(--monitorTextColor);
     padding: var(--monitorBoxPadding);
     font-size: 16px;
     background-color: transparent;
     transition: background-color 0.3s , border 0.3s , color 0.3s , scale 0.3s;
 }

.generic-button:hover {
    color: var(--monitorTextColor);
    border: solid 1px transparent;
    background-color: var(--monitorBoxColor);
}

.generic-button:active {
    scale: 1.05;
}

.generic-button:disabled {
    color: #8b8b8b;
    border: solid 1px #8b8b8b;
    background-color: #292c33;
    opacity: 0.5;

}


.generic-action-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    padding: 20px;
    width: fit-content;
    height: fit-content;
    margin: 20px 20px 20px 0;
    background-color: #1b2531;
}

.generic-action-container input , .generic-action-container select {
    margin: 10px 0;
}

.bigger-loading-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.bigger-loading-icons img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    animation: fade 0.3s linear forwards;
}

.loading-icons {
    height: 25px;
    width:25px;
    animation: fade 0.3s linear forwards;
}
.error-loading-icons {
    height: 25px;
    width:25px;
    animation: fade 0.3s linear forwards;
}

/* GENERIC ITEMS */

/* QUICK MENU */
.quick-menu {
    display: none;
    position: fixed;
    /*overflow: auto;*/
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    align-items: center;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: opacity 0.3s , backdrop-filter 0.3s;
    text-align: left;
    opacity: 0;
    z-index: 1000;
}

.quick-menu-title {
margin-top: 50px;
}

.quick-menu ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;


}

.quick-menu li {
    padding: 10px;
    margin: 20px;
    border: solid 1px transparent;

    transition: color 0.3s , background-color 0.3s , border 0.3s;

}

.quick-menu li:hover {
    border: solid 1px white;
    cursor: pointer;
}
/* QUICK MENU */

/* ANIMATION */

.anim-lock {
    animation: anim-lock 0.5s forwards infinite alternate-reverse ;
}

@keyframes anim-lock  {
    from {transform: scale(1)}

    to {transform: scale(1.1)}
}


.rotate {
    animation: rotate 0.5s forwards ;
}

@keyframes rotate {
    from {transform: rotate(0deg)}

    to {transform: rotate(-360deg)}
}

.fadeFooter {
    opacity: 0;
    animation: fadeFooter 0.5s forwards;
}

@keyframes fadeFooter {
    from {
        color: rgba(207, 224, 238, 0);
        transform: translateY(5px);
    }

    to {
        color:  var(--monitorTextColor);
        transform: translateY(0);
    }
}


.fade {
    opacity: 0;
    animation: fade 0.5s forwards;
}

@keyframes fade {
    from {
        opacity: 0
    }

    to {
        opacity: 1;}
}

.fade-left {
    opacity: 0;
    animation: fade-left 0.5s forwards;
}

@keyframes fade-left {
    from {
        transform: translateX(-5px);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1;}
}

.fade-right {
    opacity: 0;
    animation: fade-right 0.5s forwards;
}

@keyframes fade-right {
    from {
        transform: translateX(5px);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1;}
}

.fade-up {
    opacity: 0;
    animation: fade-up 0.5s forwards;
}

@keyframes fade-up {
    from {
        transform: translateY(5px);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1;}
}
.fade-down {
    opacity: 0;
    animation: fade-down 0.5s forwards;
}

@keyframes fade-down {
    from {
        transform: translateY(-5px);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1;}
}



.fadeOut {
    opacity: 1;
    animation: fadeOut 0.5s forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0;}
}


.fadeOut-left {
    opacity: 1;
    animation: fadeOut-left 0.5s forwards;
}

@keyframes fadeOut-left {
    from {
        transform: translateX(0);
        opacity: 1
    }

    to {
        transform: translateX(-5px);
        opacity: 0;}
}

.fadeOut-right {
    opacity: 1;
    animation: fadeOut-right 0.5s forwards;
}

@keyframes fadeOut-right {
    from {
        transform: translateX(0);
        opacity: 1
    }

    to {
        transform: translateX(5px);
        opacity: 0;}
}

.fadeOut-up {
    opacity: 1;
    animation: fadeOut-up 0.5s forwards;
}

@keyframes fadeOut-up {
    from {
        transform: translateY(0);
        opacity: 1
    }

    to {
        transform: translateY(-5px);
        opacity: 0;}
}

.fadeOut-down {
    opacity: 1;
    animation: fadeOut-down 0.5s forwards;
}

@keyframes fadeOut-down {
    from {
        transform: translateY(0);
        opacity: 1
    }

    to {
        transform: translateY(5px);
        opacity: 0;}
}

.networkConnected , .networkDisconnected {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box; /* Ensure padding and borders are included in the element's total width and height */

}

.networkConnected svg path {
    animation: networkConnected 1s infinite alternate-reverse;
    margin: 0 10px;
}

@keyframes networkConnected {
    from {
        fill: var(--monitorTextColor);
    }
    to {
        fill: #1f7fd2;
    }
}

.networkDisconnected svg path{
    animation: networkDisconnected 1s infinite alternate-reverse;
    margin: 0 10px;
}

@keyframes networkDisconnected {
    from {
        fill: var(--monitorTextColor);
    }

    to {
        fill: #FF1C58;
    }
}

.flashing {
    animation: flashing 1s infinite alternate-reverse;
}

@keyframes flashing {
    from {
        color: var(--monitorTextColor);
    }

    to {
        color: #1f7fd2;
    }
}

@keyframes flashing-memory {
    from {
        background-color: var(--monitorBoxColor);
    }

    to {
        background-color: #003fff;
    }
}

.download-anim {
    animation: download 0.7s forwards;
}

.heartbeat {
    animation: heartbeat 0.7s infinite;
}

@keyframes download {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    25% {
        transform: translateY(50px);
        opacity: 0;
    }


    50% {
        transform: translateY(-50px);
        opacity: 0;
    }

    75% {
        transform: translateY(0px);
        opacity: 1;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes heartbeat {
    from {scale: 1}
    to {scale: 1.1}

}

.processing {
    animation: processing 1s infinite alternate;
}


@keyframes processing {
    0% {
        color: #fff;
    }

    100% {
        color: var(--monitorBoxColor);
    }
}

/* ANIMATION */



LINE-SEPARATOR {
    width: 90%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
}