.page-layout--content {
    min-width:320px;
}

/* SUMMARY */
.summary-row{
    display:flex;   
    justify-content:space-evenly;
    align-items:center;
    color:#fff;
}
.summary-row.first{
    background-color:#2c5697;
    border-radius:5px 5px 0px 0px;
    padding-top:10px;
    background:#2c5697;
}
.summary-row.first div{
    text-align:center;
    padding:10px;
    /*width:50%;*/
}
.toggle-row{
    background-color:#2c5697;
    border-top:1px solid #3f65a0;
    padding-top:5px;
    padding-bottom:5px;
    position:relative;
}
.toggle-row>div{
    display:flex;
    align-items:center;
}
.toggles{
    position:absolute;
    right:0;
}
#summary-data-updated-time{
    padding-right:10px;
}
.facebook-icon{
    width: 31px;
    padding: 0;
    margin: 0!important;
    margin-bottom: 4px!important;    
}

/* REFRESH BAR */
.refresh-bar{
    min-height:50px;
    background-color:#3f65a0;
    position:relative;
    cursor:pointer;
}
.refresh-bar:hover{
    background-color:#255090;
}
.refresh-bar:hover button{
    
}
.refresh-bar button{
    border-radius:20px;
    position:absolute;
    right:10px;
    background: #2c5697;
    color:#fff;
    border:0px;
    height:40px;
    width:40px;
}
.refresh-button{
    box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

/* SUMMARY TILES */
.summary-row.tiles{
    cursor:pointer;
    min-height:80px;
    border-bottom:1px solid #006ca7;
    background-color:#0084c9;
    flex-wrap:nowrap;
}
.summary-row.tiles:last-child{
    border-radius:0px 0px 5px 5px;
}
.summary-row.tiles .tile{
    border-right:1px solid #006ca7;
    text-align:center;
    width:50%;
    min-height:90px;
    align-items:center;
    display:flex;
    justify-content:center;
}
.summary-row.tiles .tile:last-child{
    border-right:none;
}
.summary-row.tiles .tile a{
    color:#fff;
    text-decoration:none;
}
.summary-row.tiles .tile a span{
    display:block;
    padding-left:7px;
    padding-right:7px;
}
.summary-row.tiles .tile a:visited{
    color:#fff;
}

/* TYPOGRAPHY */
.page-layout--content, .summary, .results {
    font-family: Montserrat,sans-serif!important;
    -webkit-font-smoothing: antialiased!important;
    -webkit-font-feature-settings: "kern";
    text-rendering: optimizeLegibility!important;
    text-shadow: 1px 1px 1px rgba(0,0,0,.004);
}    
.summary-label{
    font-size:14px;
    font-weight:300;
    text-shadow:1px 1px 1px #214984;
}
.summary-value{
    font-size:2.5em;
    font-weight:500;
    text-shadow:1px 1px 1px #214984;
    padding:10px;
}
.summary-value-2{
    font-size:1.4em;
    font-weight:500;
    text-shadow:1px 1px 1px #214984;
    padding:10px;
}    
.refresh-icon{
    font-weight:600 !important;
    padding-top:5px;
}
.summary-icon{
    font-size:2.2em !important;
}  

/* SEARCH */
.search{
    display:flex;
    flex-direction:column;
}
.outage-search-field-select, .outage-search-period-select{
    border:2px solid #009370;
    padding: .8em 40px .6em 16px;
    height:50px;
    border-radius:0px;
}
.search-label{
    font-size:16px;
    font-weight:600;
    padding-top:15px;
    padding-bottom:5px;
}
.search-type{
    display:flex;
    flex-direction:row;
}
.search-type > select {
    margin-right:2px;
}
.search-fields{
    display:flex;
    width:100%;
}
.search-input, .outage-search-council-select{
    border:2px solid #009370;
    width:calc(100% - 50px);
    padding: .8em 40px .6em 16px;
    height:50px;
    border-radius:0px;
}
.search-input:focus-visible, .outage-search-field-select:focus-visible,  .outage-search-council-select:focus-visible{
    outline:none !important;
}
.search-button{
    background:#009370;
    display:inline-block;
    width:50px;
    height:50px;
    padding:.8em;
    text-decoration:none;
    color:#fff;
    cursor:pointer;
}    
.searchicon-grey{
    background:#444;
}
.show-all-container{
    width: 100%;
    height: 45px;
    margin-top: 10px;    
}
.pill-button{
    display: flex;
    cursor: pointer;
    height: 43px;
    align-items: center;
    justify-content: center;
    margin: auto;
    border-radius: 30px;
    font-weight: 600;
    white-space: nowrap;
    background:#2c5697;
    color:#fff;
    border:.125rem solid #2c5697;
    transition:all .25s ease;
    width:140px;
    font-size:16px;
}
.clear-button{
    width: 230px;
}
.pill-button:hover{
    background:#fff;
    color: #2c5697;
    border: .125rem solid #bad80a;
    transition:all .25s ease;
}
.clear-button i {
    padding-right:5px;
}

/* ERRORS AND VALIDATION */
.outage-validation-msg-container, .outage-finder-heading{
    border-left: 6px solid #b00;
    padding: 10px 0 10px 0;
    margin: 10px 0 0 0;
    backgound:#f9f9f9;
}
.outage-validation-msg,.no-matching-outage-message, .no-result-msg, .no-result-suggestion{
    padding-left:15px;
    display:table-cell;
    color:#b00;
}

/* TOGGLE SWITCHES */
.outage-type{
    border:none;
    background:transparent;
    border-bottom: 2px dashed;
    text-align:center;
    text-align-last:center;
    cursor:pointer;
}
.toggle-bg{
    display: block;
    float: left;
    height: 40px;
    position: absolute;
    right:0px;
    width: 60px;
    box-shadow:inset 0 2px 2px 0 rgba(0, 0, 0, 0.2), inset 0 4px 20px 0 rgba(0, 0, 0, 0.19); 
    border-radius: 34px;
    border:4px solid #ddd;    
    margin-right:10px;
    background-color:#aaa;
}
.toggle-bg input{
    cursor:pointer;
    height: 30px;
    left: 0;
    margin: 0; /* Reset the margins and padding */
    opacity: 0; /* Invisible! */
    padding: 0;
    position: absolute;
    top: 0;
    width: 60px;
    z-index: 2; /* We want the input to be over the span.switch, which we'll give a z-index of 1 */
        /*IE*/
        zoom: 1;
        filter: alpha(opacity=0);
}
.switch{
    border-radius: 34px;
    background: #ffffff;
    display: block;
    float: left;
    height: 28px;
    left: 2px; /* This is the starting point. When adding a border radius, a small bit of the background is shown if we use left: 0;, so -1px is best.*/
    position: relative;
    top: 2px; /* ...To keep it centered vertically */
    transition: left .2s ease;    
    width: 30px;
    z-index: 1; /* Remember, it must be below the invisible inputs */
}
.toggle-bg input:checked~.switch{left: 2px;top:2px;} /* initial toggle position */
.toggle-bg input~:checked~.switch{left: 20px;top:2px;} /* final relative toggle position */
.toggle-bg input:checked{z-index: 0;}
.toggle-bg-unplanned{background-color:rgb(221,98,39);}
.toggle-bg-planned{background-color:rgb(89,158,67);}

.unplanned:before{
    content:'warning';
    color:rgb(221,98,39);
    font-size:24px;
    padding-left:3px;
}
.planned:before{
    content:'build';
    color:rgb(89,158,67);
    font-size:28px;
}    

/* COLLAPSIBLE PANELS */
.collapsible {
  color: white;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  padding:15px;
}

.active, .collapsible:hover {
  opacity:0.8;
}

/* OUTAGE LIST - HEADING */
.lga-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.lga-header h2{
    margin-bottom:0px;
    font-weight:500;
}
.lga-count{
    display:flex;
    align-items:center;
    margin-bottom:-23px;
    width:90px;
    justify-content:right;
    padding-right:5px;
}
.lga-count span:first-child{
    padding-right:8px;
    font-size:2.4em;
}
.lga-customers-label{
    font-weight:600;
    font-size:1.6em;
}
.lgaOptionValues{
    display:none;
}

/* OUTAGE LIST */
.results ul{
    padding:0;
}
.results{
    padding-left:15px;
    padding-right:15px;
    width:100%;
}    
.results li{
    list-style-type:none;
}
.results li ul li {
    border-bottom:1px solid rgba(0,0,0,.1);
}
.results li ul li:last-child{
    border-bottom:0;
}
.outage-heading-container-lhs{
    display:flex;
}
.outage-heading-container-lhs > * {
    padding-left:8px;
}
.outage-heading-container-lhs span span {
    padding-top:9px;
}
.outage-heading-container-lhs:last-child{
    padding:0;
}
.suburb-and-street{
    display:flex;
    flex-direction:row;
    border-bottom:1px dotted rgba(0,0,0,.1);
    padding:9px;
    padding-left:29px;
    padding-right:29px;
}
.suburb-and-street:last-child{
    border-bottom:none;
}
.suburb{
    width:100%;
}
.suburb-data{
    width:35%;
    text-transform:uppercase;
    font-weight:600;
    font-size:1.2em;
}
.street-data{
    width:65%;
    text-transform:capitalize;
    font-weight:600;
}
.outage-heading-container-rhs{
    display:none;
}
.UNPLN, .FORCD{
    background:#ca4f14;
    color:#fff;
}
.PLN{
    background:#40852a;
    color:#fff;
}
.collapsible .outage-heading-container-lhs .toggle-arrow .icon-arrow{
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    -ms-transition: all 0.25s;        
}
.collapsible.active .outage-heading-container-lhs .toggle-arrow .icon-arrow{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);        
}
.icon-arrow:before{
    content:'keyboard_arrow_right';
}
.UNPLN .outage-icon .material-symbols-rounded:before, .FORCD .outage-icon .material-symbols-rounded:before{
    content:'warning';
}
.PLN .outage-icon .material-symbols-rounded:before{
    content:'build';
}    

/* OUTAGE DETAILS */
.outage-inside-container{
    padding:10px;
    background:#fafafa;
    color:#000;
    display:flex;
}
.outage-container-lhs{
    min-width:200px;
    padding-right:20px;
    background:rgb(252, 239, 233);
    padding:10px;
}
li.PLN .outage-container-lhs{
    padding-right:20px;
    background:rgb(238, 245, 237);
    padding:10px;
}    
.outage-container-rhs{
    padding:10px;
}
.outage-container-lhs, .outage-container-rhs{
    /*display:table-cell;*/
    display:flex;
    flex-direction:row;
    justify-content:space-between;
}
.outage-container-lhs div, .outage-container-rhs div{
    padding-right:20px;
}
.label{
    font-weight:bold;
    display:block;
}    

/* back to top */
#return-to-top{
    position: fixed;
    bottom: 20px;
    right: 30px;
    background: #009370;
    width: 50px;
    height: 50px;
    display: block!important;
    text-decoration: none;
    border-radius: 35px;
    transition: all .3s ease;
    z-index: 999;
    box-shadow: 0 4px 8px #0003, 0 6px 20px #00000030;
    cursor: pointer;        
}
#return-to-top i{
    color: #fff;
    margin: 0;
    position: relative;
    left: 10px;
    top: 8px;
    font-size: 2em;
    transition: all .3s ease;
}
#return-to-top:hover i{
    color: #fff;
    top: 5px;
}

/* Phone Modal */
.phoneModal {
  display: none;
  position: fixed;
  z-index: 10;
  top:0;
  left: 0;
  width: 100%; 
  height: 100%; 
  /*overflow: auto;*/
  background:rgba(0,0,0,0.4);
  letter-spacing:0.5px;
}
.modal-content {
  box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  width: 320px;
}
.modal-heading{
  background:#2C5697;
  color:#fff;
  font-size:1.6em;
  text-align:center;
  padding: 15px;
  font-weight:500;
}
.modal-item{
  font-size:1.2em;
  text-align:center;
  font-weight:400;
  color:#555;
  padding: 15px;
}
.modal-item span{
    font-size:0.9em;
    display:block;
    font-weight:500;
    padding:5px;
}
.modal-item a{
    text-decoration:none;
}
.modal-footer{
    border-top:1px solid #cdcdcd;
    padding: 15px;
  text-align:center;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}

/* RESPONSIVE */
@media (max-width: 767px){    
    .summary-value{
        display:block;
    }
    .summary-row.tiles{
        flex-wrap:wrap;
    }
    .summary-row.tiles .tile{
        min-height:97px;
    }
    .summary-row.tiles .tile:nth-child(n){
        border-top:1px solid #006ca7;;
    }
    .toggle-row{
        font-size:12px;   
    }    
    .summary-value-2{
        font-size:1.5em;
        padding:5px;
    }           
    .outage-icon{
        display:none;
    }
    .label{
        display: table-cell;
        min-width: 130px;
        max-width: 130px;
        text-align: right;
        padding-right: 10px;            
    }           
    .label:after{
        content:':';
    }
    .value{
        display: table-cell;
        vertical-align:middle;
    }
    .suburb-data{
        width:100%;
    }
    .street-data{
        width:100%;
    }
    .suburb-and-street{
        padding:9px;
        flex-direction:column;
    }
    .outage-container-lhs, .outage-container-rhs{
        flex-direction:column;
    }      
    .outage-container-lhs div, .outage-container-rhs div{
        padding-bottom:10px;
    }
    .search-type{
       display:flex;
       flex-direction:column;
    }        
    .search-type > select {
        margin-right:0;
        margin-bottom:3px;
    }        
}        

.screen-small{
    display:none;
}
.screen-rest{
    display:inherit;
}

@media (max-width: 540px){
    .toggle-row{
        line-height:15px;
    }
    .toggle-bg{
        position:relative;
        margin-left:10px;
        min-width:60px;
    }
    .toggle-row>div{
        flex-direction:column;
        /*padding:15px;*/
        width:33%;
    }
    .toggles{
        position:relative;
    }
    .summary-label-2{
        text-align:center;
    }
    .screen-small{
        display:inherit;
    }
    .screen-rest{
        display:none;
    }
}     

@media (max-width: 400px){
    .refresh-bar{
        font-size:13px;
        padding-right:40px;
    }         
}