/*!
 * CSS for Django Starter Demo App
 * Copyright The University of Edinburgh
 */
/* Add arrows to toggleable headers */
@font-face{font-family:Entypo;src:url(entypo/entypo-webfont.eot);src:url(entypo/entypo-webfont.eot?#iefix) format('embedded-opentype'),url(entypo/entypo-webfont.woff) format('woff'),url(entypo/entypo-webfont.ttf) format('truetype'),url(entypo/entypo-webfont.svg#EntypoRegular) format('svg');font-weight:400;font-style:normal}

/** General Uni-style information tables **/
.info-table {
    width: 100%;
    border-collapse: collapse;
}
.info-table > thead th {
    background-color: #00325F;
    color: #FFF;
}
.info-table > thead td {
    border: 1px solid #CCC;
    font-weight: bold;
}
.info-table th, .info-table td { padding: .5em .8em; }
.info-table th { text-align: left; }
.info-table > tbody th, .info-table > tbody td {
    border: 1px solid #CCC;
}
.info-table td.warning{
	color:#D85461;
}
.info-table td.warning::before{
	content:'\26A0';
	font-family:"Entypo";
	display:inline-block;
	padding-right:0.3em;
	font-size:1.1em;
	color:red;
}

.icon{
	-moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.icon::before {
    content: attr(data-icon);
    font-family: Entypo;
    font-style: normal;
}
.toggleData{
    cursor:pointer;
}
.toggleData::after{
    font-family:"Entypo";
    content:'\E766';
    display:inline-block;
    margin-left:0.5em;
}
.toggleData[aria-expanded="true"]::after{
    content:'\E764' !important;
}

td.outage, td.degraded, td.atrisk {
    font-family: sans-serif;
    text-align: center;
    vertical-align:middle;
    text-transform:uppercase;
}

td.outage {
    background-color: hsla(350, 100%, 70%, .3);
}

td.degraded {
    background-color: orange;
}

td.atrisk {
    background-color: hsla(85, 80%, 60%, .3);
}

table#current_alerts {
    width: 100%;
}

td.status span.completed, td.status span.cancelled {
    color: black;
    background-color: hsla(85, 80%, 60%, .3);
    padding: 2px 4px;
}

td.status span.ongoing {
    color: black;
    background-color: hsla(350, 100%, 70%, .3);
    padding: 2px 4px;
}


/** Noticeboard **/
table.noticeboard {
	border:none !important;
}
.noticeboard td {
    padding: .3em !important;
    font-size: 1.2em !important;
    vertical-align: top;
	border:none !important;
}
.noticeboard td[colspan="6"]{
	padding: 0.5em 0 0 0 !important;
}
.noticeboard td > h3{
	font-size:initial;
}
.noticeboard td:nth-child(2n+1) {
    width: 10px;
}
.noticeboard p {
    margin: 0;
    font-size: 0.8em !important;
}
.noticeboard [class^=traffic-] {
    font-size: 2em;
}


/** Traffic lights **/
.traffic {
    display: inline-block;
    width: .75em;
    height: .75em;
    border: 1px solid #AAA;
    border-radius: 50%;
    background-color: #BBB;
	background: linear-gradient( 135deg, #BBB, #777 );
    font-size: 1em;
    text-indent: 100%;
    box-shadow: inset 0 0 0 .1em #FFF;
    overflow: hidden;
	-moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
	cursor:default;
}
.traffic.unplanned, .traffic.outage { background-color: hsl(350, 100%, 50%); border-color: hsl(350, 100%, 50%); background: linear-gradient( 135deg, hsl(350, 100%, 80%), hsl(350, 100%, 50%) ); }
.traffic.short-notice-agreed, .traffic.degraded { background-color: hsl(40, 90%, 50%); border-color: hsl(40, 90%, 50%); background: linear-gradient( 135deg, hsl(40, 90%, 70%), hsl(40, 90%, 50%) ); }
.traffic.planned, .traffic.atrisk { background-color: hsl(85, 80%, 40%); border-color: hsl(85, 80%, 40%); background: linear-gradient( 135deg, hsl(85, 80%, 70%), hsl(85, 80%, 40%) ); }
.unplanned, .outage { color: hsl(350, 100%, 50%); }
.short-notice-agreed, .degraded { color: hsl(40, 90%, 50%); }
.planned, .atrisk { color: hsl(85, 80%, 40%); }

input:required:focus {
  border: 1px solid red;
  outline: none;
}
input:required:hover {
  opacity: 1;
}

textarea:required:focus {
  border: 1px solid red;
  outline: none;
}
textarea:required:hover {
  opacity: 1;
}

.requiredinput>label::before {
    content: "* ";
    color: red;
}

.required-indicator {
    color: red;
}

.invalid-feedback {
    color: red;
}

.right-align {
    float: right !important;
}

div#id_services.checkbox > div.form-check > label.form-check-label {
    font-weight: bold !important;
    margin: 10px 0;
}