@font-face {
  font-family: "Segoe UI"; 
  src: url("../fonts/623c7118249e082fe87a78e08506cb4b.eot") format("eot"),
  url("../fonts/623c7118249e082fe87a78e08506cb4b_2.eot") format("embedded-opentype"), 
  url("../fonts/623c7118249e082fe87a78e08506cb4b.woff2") format("woff2"), 
  url("../fonts/623c7118249e082fe87a78e08506cb4b.woff") format("woff"), 
  url("../fonts/623c7118249e082fe87a78e08506cb4b.ttf") format("truetype"), 
  url("../fonts/623c7118249e082fe87a78e08506cb4b.svg") format("svg"); 
}
/*

@font-face {
  font-family: "Segoe UI"; 
  src: url("//db.onlinewebfonts.com/t/623c7118249e082fe87a78e08506cb4b.eot"); 
  src: url("//db.onlinewebfonts.com/t/623c7118249e082fe87a78e08506cb4b.eot?#iefix") format("embedded-opentype"), 
  url("//db.onlinewebfonts.com/t/623c7118249e082fe87a78e08506cb4b.woff2") format("woff2"), 
  url("//db.onlinewebfonts.com/t/623c7118249e082fe87a78e08506cb4b.woff") format("woff"), 
  url("//db.onlinewebfonts.com/t/623c7118249e082fe87a78e08506cb4b.ttf") format("truetype"), 
  url("//db.onlinewebfonts.com/t/623c7118249e082fe87a78e08506cb4b.svg#Segoe UI") format("svg"); 
}


    @font-face {
    font-family: 'SegoeUIRegular';
    font-style: normal;
    font-weight: normal;
    src: local('SegoeUIRegular'), url('/fonts/SegoeUI.eot?') format('eot'),
    url('/fonts/SegoeUI.woff') format('woff'),
    url('/fonts/segoeui.ttf') format('truetype');
    }
    */


body{
    background-color: white;
    padding:0;
    margin:0;
    /*font-family: Arial, Helvetica, sans-serif;*/
    font-family: "Segoe UI";
}

.mainContentContainer {
    padding:88px 10px 50px 10px;
    text-align: center;
}

.loginMainContainer{
    background-color: #2c3e50;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

.logoContainer{
    width: 20vw;
    margin:0 auto;
    margin-top: 60px;
    margin-bottom:30px;
}

.fodcontrolTitle{
    color:#999999;
    font-size:2vw;
    text-align: center;
    margin-bottom:20px;
}

.loginboxContainer{
    width: 300px;
    border:2px solid #57626D;
    margin:0 auto;
    position:relative;
    padding:10px;
}

.loginboxContainer i{
    color:#999999;
    position:absolute;
    top:7px;
    left:5px;
    font-size:20px;
}

.loginboxContainer input[type="submit"]{
    height: 35px;
    padding: 5px 15px;
    background-color: #DF4129;
    color:rgb(255, 218, 218);
    outline:0;
    border:0;
    margin:0 auto;
    cursor:pointer;
    font-size: 17px;
}

.loginboxContainer input[type="submit"]:hover{
    border:1px solid #999999;
}

.loginformInputbox{
    height: 25px;
    width: 253px;
    outline: 0;
    margin-left: 37px;
    padding: 5px;
    background-color: #999999;
    color: #2c3e50;
    font-size: 17px;
    border: 0;
    margin-bottom: 5px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color:#2c3e50;
    opacity: 1; /* Firefox */
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:#2c3e50;
  }
  
  ::-ms-input-placeholder { /* Microsoft Edge */
    color:#2c3e50;
  }

  .login-row{
    position:relative;
  }

  .loginboxContainer input[type="checkbox"]{
    height: 20px;
    width:20px;
    background-color: #999999;
    color:black;
    outline:0;
    border:0;
    position:absolute;
    top:0px;
    left:35px;
}

.remembermeTitle{
    margin-left: 65px;
    padding: 5px;
    color: #999999;
    font-size: 17px;
    margin-bottom: 5px;
    cursor:pointer;
}

.messageBox{
    font-size: 17px;
    text-align: center;
    color: #999999;
}

.error{
    margin-bottom: 5px;
    padding-bottom: 10px;
    color: #DF4129;
}

.success{
    margin-bottom: 5px;
    padding-bottom: 10px;
    color: darkseagreen;
}

.mobileMenu {
    display:none;
}
.profileMenu {
    position: absolute;
    top: 5px;
    right: 5px;
    
}

.desktopMenu {
    position: absolute;
    top: 0px;
    left: 0px;
}

#hambiMenu {
    font-size: 30px;
    color: #fff;
}

.dropbtn, .dropbtn-mobile, .dropbtn-desktop, .dropbtn-profile {
    background-color: #DF4129;
    color: white;
    padding: 14px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn-desktop{
    height:60px;
    width: 60px;
    cursor: pointer;
}

.dropbtn-profile{
    height:50px;
    width:50px;
}

.dropdown, 
.dropdown-mobile, 
.dropdown-desktop, 
.dropdown-profile  {
    position: relative;
    display: inline-block;
    color: #d4defa;
}
.dropdown-mobile{
    position: absolute;
    top:0;
    left:0;

} 

.dropdown-content, 
.dropdown-content-mobile, 
.dropdown-content-desktop, 
.dropdown-content-profile {
    display: none;
    position: absolute;
    /*background-color: #f1f1f1;*/
    background-color: #d4defa;
    min-width: 160px;
    /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
    box-shadow: 0px 8px 16px 0px rgba(0,62,49,0.2);
    border: 1px solid white;
    z-index: 1;
    max-height: 500px;
    overflow-y: auto;
    text-transform: uppercase;
}
.dropdown-content-profile {
    right: 0;
}

.dropdown-container{
}

.dropdown-content-mobile::-webkit-scrollbar, .dropdown-content-desktop::-webkit-scrollbar {
    width: 5px;
  }
  
  /* Track */
  .dropdown-content-mobile::-webkit-scrollbar, .dropdown-content-desktop::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  /* Handle */
  .dropdown-content-mobile::-webkit-scrollbar, .dropdown-content-desktop::-webkit-scrollbar-thumb {
    background: #a8c0ff;
  }
  
  /* Handle on hover */
  .dropdown-content-mobile::-webkit-scrollbar, .dropdown-content-desktop::-webkit-scrollbar-thumb:hover {
    background: #5F8787;
  }

.dropdown-content a, 
.dropdown-content-mobile a, 
.dropdown-content-desktop a, 
.dropdown-content-profile a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size:4vw;
    border-bottom: 1px solid white;
}

.dropdown-content a:last-child, 
.dropdown-content-mobile a:last-child, 
.dropdown-content-desktop a:last-child, 
.dropdown-content-profile a:last-child {
    border-bottom: 0;
}

.dropdown-content a:hover, 
.dropdown-content-mobile a:hover, 
.dropdown-content-desktop a:hover, 
.dropdown-content-profile a:hover {
    /*background-color: #ddd;*/
    background-color: #5f878783;
}

.dropdown:hover .dropdown-content, 
.dropdown-mobile:hover .dropdown-content-mobile, 
.dropdown-desktop:hover .dropdown-content-desktop, 
.dropdown-profile:hover .dropdown-content-profile {
    display: block;
}

.dropdown:hover .dropbtn, 
.dropdown-mobile:hover .dropbtn-mobile, 
.dropdown-desktop:hover .dropbtn-desktop, 
.dropdown-profile:hover .dropbtn-profile {
    background-color: #DF4129;
}

.dropbtn-profile{
    border-radius:24px;
    background-size:100% 100%;
    background-position:center center;
    border: 2px solid #eef7e2;
}

.welcomeText {
    text-align: center;
    color: #ffffff;
    line-height: 60px;
}

.infoBar{
    background-color: #e3e3e3;
    padding: 5px;
    font-size: 4vw;
    color: gray;
    text-align: center;
}

.console {
    position: fixed;
    font-family: monospace,monospace;
    color: #fff;
    width: calc(100% - 3em);
    max-width: 100%;
    max-height: calc(100% - 3em);
    overflow-y: auto;
    margin: 1em 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0.5em;
    box-shadow: 0 0.75em 3em rgba(50, 50, 50, 0.5);
    z-index: 100;
    line-height: 1.5;
  }
  
  .console-input {
    font-family: monospace,monospace;
    background-color: transparent;
    border: none;
    outline: none;
    color: #fff;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: calc(100% - 2em);
    resize: none;
  }
  
  .console-input:before {
    content: '> ';
    color: #FC3565;
    vertical-align: top;
  }
  
  .output-cmd:before {
    content: '> ';
    color: #FC3565;
    vertical-align: top;
  }
  .output-text:before {
    content: '> ';
    color: #5F8787;
    font-weight: 600 !important;
    vertical-align: top;
  }
  
  .output-text,
  .output-cmd {
    width: 100%;
    display: block;
  }
  
  .console-inner {
    padding: 0.3em 1.1em;
  }
  
  .output-text,
  .output-cmd {
    display: block;
    white-space: pre;
  }
  
  #outputs div {
    opacity: 0.85;
  }
  
  #outputs div div {
    color: #46f01d;
    opacity: 0.8;
    text-decoration: none;
  }
  
  #outputs a {
    color: #46f01d;
    opacity: 0.8;
    text-decoration: underline;
  }
  
  .console-inner .output-text#ready {
    color: #3df5b8;
    font-style: italic;
    opacity: 0.75;
  }
  
  .particles-js-canvas-el {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .siteHeaderContainer {
    height: 60px;
    background-color: #2c3e50;;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.dropbtn-desktop object, .dropbtn-mobile object{
    width:100%;
    position:relative;
    left:-3px;
    top:-3px;
    pointer-events: none;
}

.submitButton {
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    max-width: 270px;
    border-radius: 35px;
    display: block;
    margin: 20px auto;
    padding: 12px 20px;
    border: 0;
    outline: 0;
    cursor: pointer;
    background-color: #DF4129;
    height: auto;
    text-align: center;
    min-width:150px;
}

.tableContainer{
    text-align: center;
 }

.tableClass tr:nth-child(1){
  background-image: linear-gradient(#eeeeee, #b1b1b1ad);
  /*background-color:#eeeeee;*/
}

.tableClass tr:nth-child(1) td{
  color:gray;
  border:2px solid lightgray;
}

.tableClass th{
  color:gray;
  border:2px solid lightgray;
  padding:10px;
  font-weight: normal;
}

.userProfileImage{
    height:50px;
    width:50px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius:25px;
    text-align:center;
}

.switch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 25px;
}

.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;
}

.slider:before {
  position: absolute;
  content: "";
  height: 19px;
  width: 20px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 20px;
}

.slider.round:before {
  border-radius: 50%;
}

.tableTitle{
  margin: 15px;
  text-transform: uppercase;
  color: gray;
}

.tableClass{
    table-layout: auto;
    border-collapse: collapse;
    text-align: center;
    margin: 30px auto;
    background-color: white;
    table-layout: fixed; 
}

.tableClass td{
  border:2px solid lightgray;
  padding:5px;
  font-size:15px;
  color:gray;
  text-align: center;
  width:170px;
}

.tableClass td input{
    width:20px;
    height:20px;
}


.subTitle{
    font-size: 15px;
    text-transform: uppercase;
    color: gray;
    display: block;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
}

.formTitle{
    font-size: 15px;
    text-transform: uppercase;
    color: gray;
    display: block;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
    width: 200px;
    height: 30px;
    text-align: center;
}

.formInputBox {
    text-align: center;
    font-size: 18px;
    padding: 5px;
    border: 1px solid lightgray;
    /*height: 25px;*/
    height: 25px;
    max-width: 490px;
    margin: 10px auto;
    display: block;
    width:100%;
}

.formTextarea {
    text-align: center;
    font-size: 15px;
    padding: 5px;
    border: 1px solid lightgray;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    max-width: 490px;
    margin: 10px auto;
    display: block;
    width: 500px;
    min-width: 500px;
    max-width: 500px;
    flex-wrap: wrap;
    text-align: justify;
    white-space: normal;
}

.formDropdownBox {
    text-align: center;
    line-height: 35px;
    font-size: 18px;
    padding: 5px 0;
    border: 1px solid lightgray;
    height: 35px;
    max-width: 500px;
    display: block;
    margin: 0 auto;
    text-align-last: center;
    width:100%;
}

.cancelButton {
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    max-width: 110px;
    border-radius: 35px;
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    border: 0;
    outline: 0;
    cursor: pointer;
    background-color: #5F8787;
    height: auto;
    text-align: center;
}

#fodProcedureContainer{
    margin-top: 15px;
    border: 0;
}

.mainTitle{
  font-size: 20px;
  text-transform: uppercase;
  color:#2c3e50;
  text-align: center;
  margin: 40px auto;
}

.largeGridmap{
  position:relative;
  width: 87vw;
  height: 32.9875vw;
  margin:0 auto;
  border:10px solid #2c3e50
}

.largeGridmap img{
  width:100%;
  height:100%;
  object-fit: fill;
}

.largemapGridItem{
  width:10%;
  height:10%;
}

.gridContainer{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-collapse: collapse;
  border:0;
  z-index: 100;

}

.gridContainer td{
  border:1px solid yellow;
  cursor:pointer;
}

.gridContainer td:hover{
  background-color: #df412982;
}

.subGridContainer{
    width: 26.125394vw;
    height: 19.77326vw;
    border: 10px solid #57626D;
    margin: 0 auto;
    position:relative;
}

  .zoomedMap{
    background-image: url('../asserts/large-map.jpg');
    background-size: 261.25394vw 98.8663vw;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
  }

.verticalNavigatorContainer{
  width:2vw;
  height:18.5123vw;
  position:absolute;
  right:-3vw;
  top:0;
}

.verticalNavigatorContainer .fas{
  font-size: 2vw;
  color:#5f878782;
  cursor:pointer;
}

.verticalNavigatorContainer .fas:hover{
  color:#5F8787;
}

.verticalNavigatorContainer .fa-arrow-circle-up{
  position:absolute;
  top:0;
  left:0;
}

.verticalNavigatorContainer .fa-arrow-circle-down{
  position:absolute;
  bottom:0;
  left:0;
}

.horizontalNavigatorContainer{
  width: 24.834vw;
  height:2vw;
  position:absolute;
  bottom:-3vw;
}

.horizontalNavigatorContainer .fas{
  font-size: 2vw;
  color:#5f878782;
  cursor:pointer;
}

.horizontalNavigatorContainer .fas:hover{
  color:#5F8787;
}

.horizontalNavigatorContainer .fa-arrow-circle-left{
  position:absolute;
  left:0;
  bottom:0;
}

.horizontalNavigatorContainer .fa-arrow-circle-right{
  position:absolute;
  right:0;
  bottom:0;
}

.minimizedMap{
  border-collapse: collapse;
  border: 0;
  width:8.278vw;
  height:3.85vw;
  /*width:24.834vw;
  height:11.55vw;*/
  margin:0 auto;
  margin-bottom:20px;
}

.minimizedMap td{
  border:1px solid white;
  background-color: #99999960;
}

.selectedMapGrid{
  background-color:#DF4129!important;
}

#sendFODBtn:disabled{
  background-color: #5f878742;
}

.fodInputForm{
  display: none;
  margin-bottom:30px;
}

#sendFODBtn{
  height: 35px;
  padding: 5px 15px;
  font-size: 17px;
}

.operationTools{
  text-align: center;
  min-width:60px;
}

.operationTools i{
  font-size: 20px;
  text-decoration: none;
  color: #2c3e50;
  cursor: pointer;
}

.tableClass td{
  text-align: center;
}

::-webkit-input-placeholder { /* Edge */
  color: #b5b5b5;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #b5b5b5;
}

::placeholder {
  color: #b5b5b5;
}

.tabcontainer{
  max-width:468px;
  height:50px;
  text-align: center;
    margin: 0 auto;
}

.tab{
  width: 46%;
  max-width: 222px;
  height:35px;
  margin-right:2px;
  background-image: linear-gradient(#eeeeee, #b1b1b1ad);
  color:#222260;
  position:relative;
  float: left;
  padding:5px;
  cursor:pointer;
}

.tab > object{
  height: 35px;
  position:absolute;
  top: 5px;
  left: 5px;
}

.activeTab{
  background-color:#4864ad;
  color:#222260;
  box-shadow: 0px 5px 5px rgb(0 0 0 / 20%);
}

.tabTitle{
  line-height: 35px;
}

#processingTab{
  display:block;
}

#completedTab{
  display:none;
}

#row1 td, 
#row2 td,
#row3 td,
#row4 td,
#row5 td{
  position:relative;
}

.colID{
  position:absolute;
  top:2px;
  display:block;
  text-align: center;
  width: 100%;
  color: white;
}

.rowID{
  position:absolute;
  left:3px;
  top:37%;
  color: white;
}

.fodAttachments{
  display:block;
  text-decoration: none;
  cursor: pointer;
}

.gridContainerView{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-collapse: collapse;
  border:0;
  z-index: 100;
  border:1px solid #7c4949;
}

.gridContainerView td{
  border: 2px solid yellow;
  padding: 0;
}

.gridContainerSmall{
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

.gridContainerSmall td{
    border:1px solid #818181;
}

.main11, 
.main21,
.main31,
.main41,
.main51,
.main61,
.main71,
.main81,
.main91,
.main101{
  position:relative;
}

.main12,
.main13,
.main14,
.main15{
  position:relative;
}

.fodtableUsername{
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 100%; 
  height: 100%; 
  white-space: nowrap;
  display:block;
}

.SubTitle{
  margin-bottom: 20px;
}

.fodDate{
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}

.cardItem{
  box-shadow: 3px 3px 3px rgb(0 0 0 / 10%);
  border-radius: 10px;
  margin:5px;
  margin-bottom:20px;
}

.cardTitle{
  text-transform: uppercase;
  padding-bottom:10px;
  color:white;
}

.cardCategoryTitle{
  text-transform: uppercase;
  padding-bottom:10px;
  color:#DF4129;
  border-bottom:1px solid lightgray;
  margin:0 10px;
}


.cardDescription{
  color:gray;
  padding-top:10px;
  padding-bottom:10px;
  min-height:30px;
}

.cardNotification{
  border-top:1px solid lightgray;
  padding-top:10px;
  min-height:20px;
  margin:0 10px;
}

.notResultMessage{

}

.mobile{
  padding-top:10px;
}

.mobile i{
  padding:0 10px;
}

.cardStatus{
  padding:5px;
  color:white;
  background:green;
  margin:10px 0;
  text-transform: uppercase;
}

.cardNotes{
  color:gray;
  padding:5px;
}

.cardSubtitle{
  text-transform: uppercase;
  text-align: center;
  padding:5px 0;
  font-size:13px;
  color:gray;
}

.cardHeader{
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  color:white;
  padding:5px;
}

.cardId{
  margin-top:10px;
  margin-bottom:10px;
}

.cardCol{
  
}

.fodCompleted{
  background-color:#2e8626;
}

.fodInProcess{
  background-color:#df8a29;
}

.cardItemFrameCompleted{
  border: 2px solid #2e8626;
}

.cardItemFrameInProcess{
  border: 2px solid #df8a29;
}

.highPriority{
  background-color:#DF4129;
}

.highPriorityFrame{
  border: 2px solid #DF4129;
}

.categoryCardItem {
  box-shadow: 3px 3px 3px rgb(0 0 0 / 10%);
  border-radius: 10px;
  margin: 5px;
  margin-bottom: 20px;
}

.notificationTitle{
  text-transform: uppercase;
  color: gray;
  font-size: 12px;
}