/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
 .carousel {
        height: 700px;
    }
    .carousel-indicators{
      display: none;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    .body-width-responsive{
      width: 100%;
      margin-top: 10px;
    }
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    .body-width-responsive{
      width: 40%;
      margin-top: 10px;
      margin-left: 10px;
    }
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
 .carousel {
        height: 700px;
    }
    .carousel-indicators{
      display: none;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    .body-width-responsive{
      width: 100%;
      margin-top: 10px;
    }
        /*dashboard setting pages*/
    .Actions {    
      margin-left: unset !important;
      display: grid;
      grid-template-columns: auto auto;
    }
    .action{
      width: 95%!important;
      margin: 0 auto !important;
    }
    label.left{
      display: block;
      width: 100%!important;
      text-align: left!important;
    }
    .middleColumn input, .middleColumn span {
      width: 100%!important;
    }
    .dropdown select {
      width: 100%!important;
    }
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    .body-width-responsive{
      width: 40%;
      margin-top: 10px;
      margin-left: 10px;
    }
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
 .carousel {
        height: 700px;
    }
    .carousel-indicators{
      display: none;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
    .body-width-responsive{
      width: 100%;
      margin-top: 10px;
    }

  /*dashboard setting pages*/
   .Actions {    
    margin-left: unset !important;
    display: grid;
    grid-template-columns: auto auto;
  }
  .action{
    width: 95%!important;
    margin: 0 auto !important;
  }
  label.left{
    display: block;
    width: 100%!important;
    text-align: left!important;
  }
  .middleColumn input, .middleColumn span {
    width: 100%!important;
  }
  .dropdown select {
    width: 100%!important;
  }
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
    .navbar-nav > li{
      padding-left:0px;
      padding-right:0px;
    }
    .body-width-responsive{
      width: 40%;
      margin-top: 10px;
      margin-left: 10px;
    }
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
 .carousel {
        height: 700px;
    }
    .carousel-indicators{
      display: none;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
    .body-width-responsive{
      width: 100%;
      margin-top: 10px;
    }
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
    .navbar-nav > li{
      padding-left:5px;
      padding-right:5px;
    }
    .body-width-responsive{
      width: 40%;
      margin-top: 10px;
      margin-left: 10px;
    }
}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
        /*dashboard setting pages*/
    .Actions {    
      margin-left: unset !important;
      display: grid;
      grid-template-columns: auto auto;
    }
    input.action{
      width: 95%!important;
      margin: 0 auto !important;
    }
    button.action{
      width: 100%!important;
    }
    label.left{
      display: block;
      width: 100%!important;
      text-align: left!important;
    }
    .middleColumn input, .middleColumn span {
      width: 100%!important;
    }
    
    .dropdown select {
      width: 100%!important;
    }
    .checkbox {
      margin-left: unset!important;
    }
    #ESM_SystemsPage_PresetsForm_PresetsForm>.Actions{
      display: block!important;
    }
    #ESM_SystemsPage_CloneSystemForm_CloneSystemForm>.Actions{
      display: block!important;
    }
    #ESM_SystemsPage_PermissionsForm_PermissionsForm>.Actions{
      display: block!important;
    }
    #ESM_SystemsPage_PresetsForm_PresetsForm_action_doSavePreset, 
    #ESM_SystemsPage_CloneSystemForm_CloneSystemForm_action_doFind, 
    #ESM_SystemsPage_PermissionsForm_PermissionsForm_action_OwnerDoSubmit{
      width: 100%!important;
    }
    .carousel {
        height: 700px;
    }
    .carousel-indicators{
      display: none;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
    .carousel-item {
      /* height: 32rem; */
      /* height: 500px; */
    }
    .caption{
      font-size: 20px;
      font-weight: 400;
    }
    .under-caption{
      font-size: 10px;
      font-weight: 200;
    }
    .body-width-responsive{
      width: 100%;
      margin-top: 10px;
    }

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
    .carousel-item {
      /* height: 32rem; */
      /* height: 300px; */
    }
    .caption{
      font-size: 20px;
      font-weight: 400;
    }
    .under-caption{
      font-size: 10px;
      font-weight: 200;
    }
    .text-size{
      font-size: 12px;
    }
    .body-width-responsive{
      width: 40%;
      margin-top: 10px;
      margin-left: 10px;
    }
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
    .carousel-item {
      /* height: 32rem; */
      /* height: 300px; */
    }
    .caption{
      font-size: 20px;
      font-weight: 400;
    }
    .under-caption{
      font-size: 10px;
      font-weight: 200;
    }
    .text-size{
      font-size: 12px;
    }
    .body-width-responsive{
      width: 40%;
      margin-top: 10px;
      margin-left: 10px;
    }
}