/* 1024 - 1366 (e.g. Nexus 7 landscape) */
@media only screen
and (max-width : 1366px) {
    .content {
        max-width: none;
        margin-left:25px;
        margin-right:25px;
    }
    ul.breadcrumbs {
        max-width: none;
        margin-left:10px;
        margin-right: 10px;
    }
    .header-content-wrapper {
        max-width: none;
        margin-left:10px;
        margin-right: 10px;
    }
    .triage-totals .totals-block:last-child .title {
        max-width: 100px;
        line-height: 30px;
        padding-top: 8px;
    }
    .chart-wrapper .head .legend {
        float:left;
    }
    .table-title .availability {
        margin-right: 10px;
    }
    .chart-item .chart-item-name span {
        display: inline-block;
        padding-top: 2px;
        margin-right: 10px;
    }
    .chart-item .chart-item-name {
        line-height: normal;
    }
}

@media only screen and (max-width: 1024px) {
    .value-block .title {
        font-size: 18px;
    }
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 801px) {
    .triage-status-wrapper {
        width:50%;
    }
    .five .triage-status-wrapper {
        width: 50%;
    }
    .six .triage-status-wrapper {
        width: 50%;
    }
    .triage-status-wrapper .triage-status {
        margin-left:0;
        margin-right:0;
    }
    .triage-status-wrapper:nth-child(2n+1) .triage-status {
        margin-right: 10px;
    }
    .triage-status-wrapper:nth-child(2n+2) .triage-status{
        margin-left:10px;
    }
    .six .triage-status-wrapper:nth-child(3) .triage-status {
        margin-right: 10px;
    }
    .six .triage-status-wrapper:nth-child(4) .triage-status {
        margin-left: 10px;
    }
    .header .title {
        display: none;
    }
    .header .title.small-title{
        display:inline-block;
    }
    .triage-totals .six-columns-layout .two-columns {
        width:50%;
    }
    .triage-totals .six-columns-layout .four-columns {
        width:50%;
    }
    .triage-totals .totals-block {
        height: 255px!important;
        line-height: 255px;
    }

    .triage-totals .eight .totals-block {
        height: 341px!important;
        line-height: 341px;
    }

    .totals-block .separate-value,
    .totals-block .separate-value:first-child,
    .totals-block .separate-value:last-child,
    .five .totals-block .separate-value,
    .five .totals-block .separate-value:first-child,
    .five .totals-block .separate-value:last-child,
    .six .totals-block .separate-value,
    .six .totals-block .separate-value:first-child,
    .six .totals-block .separate-value:last-child {
        margin-left:0;
        margin-right: 0;
        height: 80px;
        width: 48%;
        line-height: 80px;
        margin-bottom: 2%;
    }
    .eight .totals-block .separate-value,
    .eight .totals-block .separate-value,
    .eight .totals-block .separate-value:first-child,
    .eight .totals-block .separate-value:last-child{
        margin-left: 1%;
        margin-right: 1%;
        height: 80px;
        width: 48%;
        line-height: 80px;
        margin-bottom: 2%;
    }
    .totals-block .separate-value:nth-child(2n+1) {
        margin-right: 1%;
    }
    .totals-block .separate-value:nth-child(2n+2) {
        margin-left:1%;
    }
    .six .totals-block .separate-value:nth-child(2n+1) {
        margin-right: 1%!important;
    }
    .six .totals-block .separate-value:nth-child(2n+2) {
        margin-left:1%!important;
    }
    .triage-totals .totals-block:last-child .title {
        padding:25% 0;
    }
    .four-columns-layout .column{
        width: 100%;
    }
    .four-columns-layout .three-columns {
        width: 100%;
    }
    .chart-wrapper {
        margin-left:0;
    }
    .triage-status-wrapper.fill-column .triage-status{
        margin-left:0!important;
        margin-right: 0!important;
    }
    .table-wrapper {
        margin-left:0;
    }
    .chart-wrapper .head .title {
        float:none;
        text-align: left;
    }
    .chart-wrapper .head .legend {
        float:left;
    }
    .table-title .availability {
        margin-right: 10px;
    }
    .chart-item .chart-item-name span {
        display: inline-block;
        padding-top: 2px;
        margin-right: 10px;
    }
    .chart-item .chart-item-name {
        line-height: normal;
    }
    .chart-item-values .values {
        margin-right: 50px;
    }
    #esriMapArea {
        margin-left:0;
        margin-top:20px;
    }
    .table span {
        display: inline-block;
    }
    .table .w25 span {
        display: inline-block;
        margin-right: 10px;
    }
    .patient-details-page.two-columns-layout > .column {
        width:100%;
        float:none;
    }
    .ml30 {
        margin-left:0;
    }
    .patient-details-page .triage-status {
        margin-right:0!important;
    }
    .preview-block {
        margin-top:20px;
    }
    .word-long {
        display: none;
    }
    .word-abbrivated {
        display: inline;
    }
}

/* iPhone 2-4 landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 640px)
and (orientation : landscape) {

}

/* iPhone 2-4 portrait */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 640px)
and (orientation : portrait) {

}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {

}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {

}

/* Large screens ----------- */
@media only screen
and (min-width : 1366px) {

}

/* Small screens portrait */
@media (min-width: 320px) and (max-width: 480px) {
    .wrapper-settings-button {
        width:69px;
    }
    .triage-status-wrapper,
    .five .triage-status-wrapper,
    .six .triage-status-wrapper{
        width:100%;
    }
    .triage-status-wrapper .triage-status {
        margin-left:0!important;
        margin-right:0!important;
    }
    .login-box {
        width:auto;
    }
    .login-box h1 {
        padding: 20px 0px;
        font-size:24px;
    }
    .login-box h2 {
        font-size: 18px;
        padding-bottom: 0;
    }
    .login-box input {
        padding:10px 0px;
        padding-left: 5%;
    }
    .top-login-logo {
        height: 155px;
        background-size:80%;
        width:100%
    }
    .login-box .padding-box {
        padding: 20px;
    }
    .bottom-login-logo {
        display: none;
    }
    .ics .field:nth-of-type(1) {
        margin-top:20px;
    }
    .wrapper-header-select {
        width:25px;
        border-right: none;
        background: none;
        border-left: none;
    }
    .title.larger {
        font-size: 24px;
    }
    .header .title.small-title {
        text-indent: -9999px;
    }
    .filter-button {
        padding-left:0;
    }
    .filter-button span {
        text-indent: -9999px;
        display: inline-block;
        height: 100%;
        width:100%;
        background: url(../images/filters-icon.png) no-repeat center center;
    }
    .filter-button .toggle-arrow {
        display: none;
    }
    .no-triage-status-warn {
        font-size: 12px;
        margin-top:7px;
    }
    .filter-group {
        padding-top: 0;
    }
    .filter-group-name {
        text-align: left;
        padding:10px 0px;
        background: #556270;
    }
    .filter-name-arrow-wrapper {
        background: none;
    }
    .wrapper-header-select.active {
        background: #556270;
    }
    .six-columns-layout .four-columns {
        width:25%!important;
    }
    .six-columns-layout .two-columns {
        width:75%!important;
    }
    .totals-block .separate-value {
        width:100%!important;
        margin-left:0!important;
        margin-right:0!important;
    }
    .triage-totals .totals-block  {
        height:490px!important;
        line-height: 486px;
    }
    .triage-totals .eight .totals-block {
        height: 652px!important;
        line-height: 652px;
    }
    .triage-totals .totals-block:last-child .title {
        padding-top:208px;
    }
    .chart-item .chart-item-name {
        font-size:14px;
    }
    .separate-values .value {
        font-size: 12px;
    }
    .chart-item-values .values {
        margin-right: 40px!important;
    }
    table.transport-resources .jd {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    table.transport-resources .jd span {
        display: inline;
    }
    .patients-table-header th span {
        font-size:13px;
    }
    .patients-list td{
        font-size:11px;
    }
    .triage-totals .totals-block .value {
        font-size: 26px;
    }
}

/* Small screens landscape */
@media (min-width: 481px) and (max-width: 767px)/*(max-width: 568px)*/ {
    .login-box {
        width:auto;
    }
    .login-box h1 {
        padding: 20px 0px;
        font-size:24px;
    }
    .login-box h2 {
        font-size: 18px;
        padding-bottom: 0;
    }
    .login-box input {
        padding:10px 0px;
        padding-left: 5%;
    }
    .top-login-logo {
        margin-top:20px;
    }
    .login-box .padding-box {
        padding: 20px;
    }
    .bottom-login-logo {
        display: none;
    }
    .ics .field:nth-of-type(1) {
        margin-top:20px;
    }
}