@font-face {
     font-family: LexendDecaBold;
     src: url(/vendor/fonts/LexendDeca-Bold.ttf);
}
 @font-face {
     font-family: LexendDecaMedium;
     src: url(/vendor/fonts/LexendDeca-Medium.ttf);
}
 body {
     height: 100%;
     width: 100%;
     padding: 20px;
     margin: 0;
     box-sizing: border-box;
     font-family: LexendDecaBold;
     font-weight: light;
     color: #2e3436;
}
 div.main {
     width: 100%;
     max-width: 900px;
     height: auto;
     border-radius: 15px;
     overflow: hidden;
     margin: 0 auto;
     border: 5px solid #c3c3c3;
     position: relative;
}
 div.navigation {
     width: 250px;
     height: 600px;
     background-color: #ebebeb;
     float: left;
     display: inline-block;
     position: relative;
     z-index: 501;
}
 div.navigation.secondary {
     position: absolute;
     left: -250px;
     top: 0;
     overflow-y: auto;
     z-index: 500;
     transition-duration: .6s;
     width: 500px;
     backdrop-filter: blur(10px);
     background-color: #ebebeb8c;
}
 div.navigation.secondary img {
     width: 100px !important;
}
 div.navigation>div, div.save-button {
     padding: 5px;
     margin: 10px;
     line-height: 30px;
     transition-duration: .4s;
     cursor: pointer;
     border-radius: 10px;
}
 div.navigation>div:hover,div.navigation>div.active,div.navigation-footer,div.navigation-header,div.save-button:hover {
     background-color: #d2d2d2;
}
 div.navigation div.navigation-header {
     text-align: center;
}
 div.navigation div.navigation-header>div {
     background-color: #fff;
     border-radius: 0 0 7px 7px;
     color: grey;
     line-height: 20px;
     font-size: 12px;
}
 div.navigation>div>img:not(.infrago-logo),div.content div.save-button>img {
     width: 30px;
     max-height: 30px;
     margin-right:20px;
     vertical-align:middle;
     filter: contrast(0.3);
}
 div.navigation>div>img.infrago-logo {
     width: 100%;
     display:block;
     margin-top: 15px;
}
 div.content {
     width: calc(100% - 250px);
     float: right;
     display: inline-block;
     padding: 15px 20px;
     height: 600px;
     box-sizing: border-box;
     overflow-y: auto;
     text-align: center;
}
div.content>img.loader {
	position: absolute;
	height: 35%;
	width: 35%;
	left: 37.5%;
	top: 37.5%;
	display: none;
}
 div#content {
	transition-duration: .5s;
 }
 div#content.loading {
	filter: blur(4px);
 }
  div#content.loading>img.loader {
	  display: block;
  }
 div.content div.content-header {
     text-align: center;
     line-height: 30px;
     padding: 0;
     margin-bottom: 20px;
     display: block;
     font-size: 2em;
     margin-block-start: 0.67em;
     margin-block-end: 0.67em;
     margin-inline-start: 0px;
     margin-inline-end: 0px;
     font-weight: bold;
     unicode-bidi: isolate;
}
 div.content img {
     width: 100%;
     margin: 0 auto;
     display: block;
}
 div.navigation-footer {
     position: absolute;
     bottom:0;
     width: calc(100% - 40px);
     padding: 10px !important;
     cursor: auto !important;
}
 div.connection-indicator {
     height: 15px;
     width: 15px;
     border-radius: 100%;
     float: left;
     vertical-align:middle;
     margin: 7.5px;
}
 div.connection-indicator.true {
     background-color: #2ec27e;
}
 div.connection-indicator.unknown {
     background-color: #f6d32d;
}
 div.connection-indicator.false {
     background-color: #ed333b;
}
 div.pin-table {
     width: auto;
     display: block;
     margin: 0 auto;
}
 div.pin-table img {
     width: 30px;
     transform: rotate(90deg);
     padding-left: 17.5px;
}
 div.pin-table div.row {
     width: auto;
     display: block;
     height: 50px;
}
 div.pin-table div.row * {
     display: inline-block;
}
 div.pin-table div.row input {
     width: 100px;
     border: 0;
     background-color: #ebebeb;
     padding: 15px;
     font-family: inherit;
     border-radius: 20px;
     text-align: center;
     height: 50px;
}
 div.plug-table {
     width: 100%;
     margin-bottom: 50px;
}
 div.row {
     width: 100%;
     height: 70px;
     margin-bottom: 10px;
}
 div.inventory-table>div.row {
     height: 30px;
     text-align: left;
     display: block;
     top: calc(50% - 27.5px);
     position: relative;
     width: auto;
     background-color: #ebebeb;
     margin: 10px;
     padding: 5px;
     border-radius: 25px;
     height: auto;
     line-height: 25px;
}
 div.inventory-table>div.row div.plug-table {
     margin-bottom: 0;
}
 div.inventory-table>div.row div.plug-table div.label>span {
     background-color: #d2d2d2;
}
 div.inventory-table>div.row img,div.inventory-table>div.row img {
     max-height: 100%;
     width: auto;
     display: inline-block;
     filter: opacity(.5);
     position: absolute;
}
 div.inventory-table>div.row img.map,div.inventory-table>div.row img.down {
     left: 10px;
     top: 5px;
     bottom: 5px;
}
 div.inventory-table>div.row img.down {
     left: unset;
     cursor: pointer;
     right: 10px;
}
 div.inventory-table>div.row span {
     margin-left: 4px;
     line-height: 25px;
     display: block;
}
 div.label {
     display: inline-block;
     width: 20%;
     margin: 0 auto;
     text-align: center;
     line-height: 100%;
     float: left;
     height: 70px;
}
 div.label>span {
     display: block;
     top: calc(50% - 27.5px);
     position:relative;
     width: auto;
     background-color: #ebebeb;
     margin: 10px;
     padding: 5px;
     border-radius: 25px;
     height: 25px;
     line-height:25px;
}
 div.label>span span {
     padding: 2px;
     background-color: #fff;
     margin: 0px 3px;
     border-radius: 100%;
     display: block;
     float: left;
     width: 20px;
     height: 20px;
     line-height: 20px;
     text-align: center;
}
 img#bridge-editor-img {
     display: inline-block;
     width: 65%;
     max-height:70px;
}
 div.row div.options {
     display: inline-block;
     width: 15%;
     height: 70px;
     float: right;
}
 div.row div.options img {
     width: 40%;
     padding: 3px;
     box-sizing: border-box;
     display: inline-block;
     top: calc(50% - 25px);
     position: relative;
     filter: opacity(.5);
     cursor: pointer;
}
 div.action-menu {
     position: absolute;
     bottom: 10px;
     right: 10px;
     width: auto;
     height: 50px;
     z-index: 501;
}
 div.action-menu img {
     float: left;
     width: 50px;
     height: 50px;
     background-color: #ffffff7a;
     border-radius: 100%;
     cursor: pointer;
     filter: contrast(0.3);
}
 div.distinctly-input {
     display: flex;
     justify-content: space-between;
     gap: 10px;
     width:70%;
     margin: 0 auto;
     margin-top: 20px;
}
 .code-input, div.search-container input {
     width: 50px;
     height: 50px;
     font-size: 24px;
     text-align: center;
     background-color: #ebebeb;
     border-radius: 8px;
     outline: none;
     transition: border-color 0.3s ease;
     border: none;
}
 .code-input:focus {
     border-color: #007bff;
}
 textarea {
     width: 100%;
     max-width: 100%;
     height: 200px;
     max-height: 200px;
     font-size: 14px;
     text-align: center;
     background-color: #ebebeb;
     border-radius: 8px;
     outline: none;
     transition: border-color 0.3s ease;
     border: none;
}
 textarea:focus {
     border-color: #007bff;
}
 hr {
     border: 3px solid #ebebeb;
     margin: 20px 0;
}
 div.search-container {
     width: 100%;
     height: 50px;
     position: relative;
}
 div.search-container input {
     width: calc(100% - 60px);
     border-radius: inherit 0px;
     border-radius: 10px 0 0 10px;
}
 div.search-container div.save-button {
     width: 50px;
     display: inline-block;
     margin: 0;
     height: 40px;
     float: right;
     text-align: center;
     border-radius: 0 10px 10px 0 
}
 div.search-container div.save-button img {
     margin: 0;
     margin-top: 4px;
}
 div.search-container div.results {
     position: absolute;
     bottom: 50px;
     left: 0;
     right: 0;
     background-color: #d2d2d2;
     border-radius: 10px;
}
 div.program-field {
     padding: 20px;
     margin-top: 20px;
     border: 3px solid #ebebeb;
     border-radius: 25px;
}
 .checkbox-container {
     position: relative;
     display: inline-block;
}
 .checkbox-container input[type="checkbox"] {
     position: absolute;
     opacity: 0;
     pointer-events: none;
}
 .checkbox-container .checkbox-text {
     display: inline-block;
     text-align: center;
     cursor: pointer;
     border-radius: 25px;
     background-color: #ebebeb;
     padding: 5px 15px;
     border: 3px solid #ebebeb;
}
 .checkbox-container input[type="checkbox"]:checked + .checkbox-text {
     background-color: #d2d2d2;
     border: 3px solid #2e3436;
     color: #fff;
}
 div.save-button img {
     display: inline-block;
}
 div.save-button {
     background-color: #ebebeb 
}
 ::-webkit-scrollbar {
     width: 5px;
}
/* Track */
 ::-webkit-scrollbar-track {
     background: #ebebeb;
}
/* Handle */
 ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:hover {
     background: #d2d2d2;
}
 div.toggle-switch {
     width: 100%;
     height: 50px;
     margin-bottom: 10px;
     display: flex;
}
 div.toggle-switch div {
     display: inline-block;
}
 div.toggle-switch div:nth-child(1), div.toggle-switch div:nth-child(3) {
     width: 39%;
}
 div.toggle-switch div:nth-child(2) {
     width: 20%;
     padding: 10px;
}
 .switch {
     position: relative;
     display: inline-block;
     width: 100%;
     height: 34px;
}
 .switch input {
     opacity: 0;
     width: 0;
     height: 0;
}
 .slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #ccc;
     -webkit-transition: .4s;
     transition: .4s;
     border-radius: 25px;
}
 .slider:before {
     position: absolute;
     content: "";
     height: 26px;
     width: 26px;
     left: 4px;
     bottom: 4px;
     background-color: white;
     -webkit-transition: .4s;
     transition: .4s;
     border-radius: 100%;
}
 input:checked + .slider:before {
     -webkit-transform: translateX(86px);
     -ms-transform: translateX(86px);
     transform: translateX(86px);
}
/* Rounded sliders */
 .slider.round {
     border-radius: 34px;
}
 .slider.round:before {
     border-radius: 50%;
}
 table.simple-devider th,table.simple-devider td {
     padding: 15px;
}
 table.simple-devider * {
     margin: 0;
     vertical-align: top;
}
 canvas {
     cursor: crosshair;
     background-repeat: no-repeat;
}

 @media only screen and (max-width: 1200px) {
	  div.main {
         width: 100%;
         height: 100%;
         border: 0;
         border-radius: 0;
		 max-width: unset;
    }
     body {
         padding: 0;
         padding-right: 0;
         box-sizing: border-box;
    }
	 div.content {
         width: calc(100% - 250px);
         height: 100%;
         padding: 0;
    }
	div.navigation {
         height: 100%;
		 overflow-y: scroll;
    }
	div.navigation-footer {
         position: relative;
    }

 }

 @media only screen and (max-width: 800px) {
    
     div.navigation {
         width: 40px;
         height: 100%;
    }
     div.navigation > div > span {
         display: none;
    }
     div.navigation>div {
         padding: 5px;
         margin: 0;
    }
    
     div.navigation.secondary {
         left: -500px !important;
    }
	div.navigation-footer {
         display: none;
    }
	 div.content {
         width: calc(100% - 40px);
         height: 100%;
         padding: 0;
    }
    
}