/* Small devices (landscape phones, 320px and up) */
@media (min-width: 320px) {
    .loginboxContainer {
        width: 260px;
    }

    .loginformInputbox {
        width: 212px;
    }

    .logoContainer {
        width: 60vw;
    }

    .fodcontrolTitle {
        font-size: 6vw;
    }

    .subGridContainer {
      width: 52.250788vw;
      height: 39.54652vw;
    }

    .zoomedMap{
      background-size: 522.50788vw 197.7326vw;
    }

    .minimizedMap {
        width: 24.834vw;
        height: 11.55vw;
    }

    .horizontalNavigatorContainer{
        width: 52.250788vw;
        height:8vw;
        bottom:-12vw;
      }
      
      .horizontalNavigatorContainer .fas{
        font-size: 8vw;
      }

      .verticalNavigatorContainer{
        width:8vw;
        height:39.54652vw;
        right:-12vw;
      }
      
      .verticalNavigatorContainer .fas{
        font-size: 8vw;
      }

      .welcomeText {
        font-size: 5vw;
      }

      .infoBar{
        font-size: 4vw;
      }

      .desktopView{
        display:none;
      }

      .mobileView{
        display:block;
      }

      .SubTitle{
        font-size: 20px;
      }
      
      .cardTitle{
        font-size: 5.5vw;
      }
      
      .cardId{
        font-size:13px;
      }
      
      .cardDate, 
      .cardTime,
      .cardPriority,
      .cardCoordinates,
      .cardUsername,
      .cardAttachments{
        font-size: 5vw;
      }

      .categoryCardItem {
        border: 1px solid gray;
      }
      
      .categoryCardItem .cardDescription {
        min-height: 50px;
        padding:10px;
      }

      .categoryCardItem .cardCategoryTitle {
        padding: 10px;
      }

}

/* Small devices (landscape phones, 375px and up) */
@media (min-width: 375px) {
    .loginboxContainer {
        width: 300px;
    }

    .loginformInputbox {
        width: 253px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .horizontalNavigatorContainer{
        width: 53.502vw;
        height:7vw;
        bottom:-9vw;
      }
      
      .horizontalNavigatorContainer .fas{
        font-size: 7vw;
      }

      .verticalNavigatorContainer{
        width:7vw;
        height:40.5369vw;
        right:-9vw;
      }
      
      .verticalNavigatorContainer .fas{
        font-size: 7vw;
      }

      .welcomeText {
        font-size: 3vw;
      }

      .infoBar{
        font-size: 2.1vw;
      }

      .dropdown-content a, 
      .dropdown-content-mobile a, 
      .dropdown-content-desktop a, 
      .dropdown-content-profile a {
          font-size:2vw;
      }

      .mobileView {
        text-align: left;
      }
  
      .cardItem {
        display: inline-block;
        width: 30.7%;
        text-align: center;
        float:left;
        min-height: 62vw;
      }

      .categoryCardItem {
        display: inline-block;
        width: 30.7%;
        text-align: center;
        float: left;
        min-height: 35vw;
        border: 1px solid gray;
      }
  
    .categoryCardItem .cardDescription {
      min-height: 104px;
    }

    .cardCol{
      min-height: 15vw;
    }

    .cardTitle {
      font-size: 1.85vw;
  }

  .cardDate, .cardTime, .cardPriority, .cardCoordinates, .cardUsername, .cardAttachments {
    font-size: 1.8vw;
  }

  .cardHeader {
    min-height: 73px;
  }

  .cardStatus {
    font-size: 13px;
  }

  .cardSubtitle {
    font-size: 11px;
  }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .logoContainer {
        width: 40vw;
    }

    .fodcontrolTitle {
        font-size: 4vw;
    }

    .welcomeText {
      font-size: 2.5vw;
    }

    .infoBar{
      font-size: 2vw;
    }

    .dropdown-content a, 
    .dropdown-content-mobile a, 
    .dropdown-content-desktop a, 
    .dropdown-content-profile a {
        font-size:1.8vw;
    }

    .SubTitle{
      font-size: 20px;
    }
    
    .cardTitle{
      font-size: 2.5vw;
      min-height: 90px;
      min-height: 32px;
    }
    
    .cardId{
      font-size:13px;
    }
    
    .cardDate, 
    .cardTime,
    .cardPriority,
    .cardCoordinates,
    .cardUsername,
    .cardAttachments{
      font-size: 1.7vw;
    }

    .tableClass{
      /*width:100%;*/
    }

    .cardItem {
      width: 31%;
  }

  .cardTitle {
    font-size: 1.5vw;
  }

  .cardCol {
    min-height: 13.5vw;
  }
    
  .cardItem {
    min-height: 56vw;
  }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .welcomeText {
      font-size: 2vw;
    }

    .infoBar{
      font-size: 1.3vw;
    }

    .dropdown-content a, 
    .dropdown-content-mobile a, 
    .dropdown-content-desktop a, 
    .dropdown-content-profile a {
        font-size:1.7vw;
    }

    .desktopView{
      display:block;
    }
    
    .mobileView{
      display:none;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .logoContainer {
        width: 20vw;
    }

    .fodcontrolTitle {
        font-size: 2vw;
    }

    .subGridContainer{
        width: 24.834vw;
        height: 18.5123vw;
    }

    .minimizedMap{
        width:8.278vw;
        height:3.85vw;
    }

    .horizontalNavigatorContainer{
        width: 24.834vw;
        height:2vw;
        bottom:-3vw;
      }
      
      .horizontalNavigatorContainer .fas{
        font-size: 2vw;
      }

      .verticalNavigatorContainer{
        width:2vw;
        height:18.5123vw;
        right:-3vw;
      }
      
      .verticalNavigatorContainer .fas{
        font-size: 2vw;
      }

      .welcomeText {
        font-size: 1.3vw;
      }
  
      .infoBar{
        font-size: 0.8vw;
      }
  
      .dropdown-content a, 
      .dropdown-content-mobile a, 
      .dropdown-content-desktop a, 
      .dropdown-content-profile a {
          font-size:0.8vw;
      }

      .subGridContainer {
          width: 26.125394vw;
          height: 19.77326vw;
      }

      .zoomedMap{
        background-size: 261.25394vw 98.8663vw;
      }

    .minimizedMap {
      width:8.278vw;
      height:3.85vw;
    }      
      
}

/* Extra large devices (large desktops, 2000px and up) */
@media (min-width: 2000px) {

  .welcomeText {
    font-size: 1.1vw;
  }

  .infoBar{
    font-size: 0.8vw;
  }

  .dropdown-content a, 
  .dropdown-content-mobile a, 
  .dropdown-content-desktop a, 
  .dropdown-content-profile a {
      font-size:0.6vw;
  }


}

/* Extra large devices (large desktops, 2500px and up) */
@media (min-width: 2500px) {
  .welcomeText {
    font-size: 1.1vw;
  }

  .infoBar{
    font-size: 0.8vw;
  }

  .dropdown-content a, 
  .dropdown-content-mobile a, 
  .dropdown-content-desktop a, 
  .dropdown-content-profile a {
      font-size:0.6vw;
  }
}

/* Extra large devices (large desktops, 3000px and up) */
@media (min-width: 3500px) {

}

/* Extra large devices (large desktops, 4500px and up) */
@media (min-width: 4500px) {

}

/* Extra large devices (large desktops, 5000px and up) */
@media (min-width: 5000px) {
  .welcomeText {
    font-size: 1vw;
  }

  .infoBar{
    font-size: 0.8vw;
  }

  .dropdown-content a, 
  .dropdown-content-mobile a, 
  .dropdown-content-desktop a, 
  .dropdown-content-profile a {
      font-size:0.8vw;
  }
}