/* 
File: UoP Utlilties CSS
Author: James Lenthall
Desciption: Set of styles to apply standardised visual elements
Version: 1.0.0
*/
/* --- CALLOUTS --- */
.uop-callout {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ccc;
  border-left-width: 5px;
  border-radius: 3px;
  margin: 20px 0;
}
.uop-callout h1,
.uop-callout h2,
.uop-callout h3,
.uop-callout h4,
.uop-callout h5,
.uop-callout h6,
.uop-callout .uop-callout-header {
  margin-top: 0;
  margin-bottom: 5px;
}
.uop-callout .uop-callout-header {
  font-size: 17px;
  font-weight: bold;
}
.uop-callout a {
  font-weight: bold;
}
.uop-callout p:last-child {
  margin-bottom: 0;
}
.uop-callout-default {
  border-left-color: #999;
}
.uop-callout-default a {
  color: #621360;
}
.uop-callout-primary {
  border-left-color: #621360;
}
.uop-callout-primary h1,
.uop-callout-primary h2,
.uop-callout-primary h3,
.uop-callout-primary h4,
.uop-callout-primary h5,
.uop-callout-primary h6,
.uop-callout-primary .uop-callout-header,
.uop-callout-primary a {
  color: #621360;
}
.uop-callout-success {
  border-left-color: #33cc33;
}
.uop-callout-success h1,
.uop-callout-success h2,
.uop-callout-success h3,
.uop-callout-success h4,
.uop-callout-success h5,
.uop-callout-success h6,
.uop-callout-success .uop-callout-header,
.uop-callout-success a {
  color: #33cc33;
}
.uop-callout-info {
  border-left-color: #00A0FF;
}
.uop-callout-info h1,
.uop-callout-info h2,
.uop-callout-info h3,
.uop-callout-info h4,
.uop-callout-info h5,
.uop-callout-info h6,
.uop-callout-info .uop-callout-header,
.uop-callout-info a {
  color: #00A0FF;
}
.uop-callout-warning {
  border-left-color: #F0DD00;
}
.uop-callout-warning h1,
.uop-callout-warning h2,
.uop-callout-warning h3,
.uop-callout-warning h4,
.uop-callout-warning h5,
.uop-callout-warning h6,
.uop-callout-warning .uop-callout-header,
.uop-callout-warning a {
  color: #F0DD00;
}
.uop-callout-danger {
  border-left-color: #CC3333;
}
.uop-callout-danger h1,
.uop-callout-danger h2,
.uop-callout-danger h3,
.uop-callout-danger h4,
.uop-callout-danger h5,
.uop-callout-danger h6,
.uop-callout-danger .uop-callout-header,
.uop-callout-danger a {
  color: #CC3333;
}
/* --- DIALOG --- */
/* --- CONTENT WRAPPERS--- */
/* --- DEPRECATED - USE SV-ALERT or UOP-CALLOUT INSTEAD --- */
.uop-wrapper {
  position: relative;
  display: block;
  width: 100%;
  min-height: 45px;
  font-size: 15px;
  background-color: #eee;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.uop-wrapper::before,
.uop-wrapper::after {
  content: ' ';
  position: absolute;
  display: block;
}
.uop-wrapper::before {
  top: 5px;
  left: -5px;
  width: 25px;
  height: 25px;
  border-radius: 0 100% 100% 0;
}
.uop-wrapper::after {
  top: 30px;
  left: -5px;
  width: 0;
  height: 0;
  border: 3.2px solid transparent;
}
.uop-wrapper-info,
.uop-wrapper-warn {
  padding-left: 30px;
}
.uop-wrapper-info::before,
.uop-wrapper-warn::before,
.uop-wrapper-info::after,
.uop-wrapper-warn::after {
  mask-composite: exclude;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.uop-wrapper-info {
  color: #31708f;
  background-color: #BCE8f1;
}
.uop-wrapper-info::before {
  /*padding-left: 30px;*/
  background-color: #31708f;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 30'%3E%3Cpath d='M4.1,14.3C4,14,4,13.8,4,13.6c0,0,0.1-0.1,0.1-0.1c0.4-0.2,0.8-0.4,1.1-0.6c0.9-0.4,1.9-0.7,2.9-0.9C8.6,12,9,11.9,9.5,12c0.8,0.1,1.1,0.6,0.9,1.3c-0.2,0.8-0.4,1.6-0.6,2.4c-0.4,1.3-0.7,2.7-1,4c-0.1,0.6,0.1,0.9,0.7,1.1c0.2,0,0.3,0,0.5,0c0.7,0,1.4-0.2,2-0.5c0,0,0,0,0.1,0c0,0.3,0,0.5,0.1,0.8c0,0-0.1,0.1-0.1,0.1c-0.4,0.2-0.8,0.4-1.2,0.6c-0.9,0.4-1.9,0.7-2.9,0.8c-0.4,0.1-0.8,0-1.2,0c-0.1,0-0.3,0-0.4-0.1c-0.4-0.1-0.6-0.4-0.6-0.8c0-0.2,0-0.3,0.1-0.5c0.5-2,1.1-4,1.6-6c0.1-0.3,0.1-0.5,0.1-0.8c-0.1-0.3-0.2-0.4-0.4-0.5c-0.5-0.2-0.9-0.1-1.4-0.1C5,13.9,4.5,14,4.1,14.3z'/%3E%3Cpath d='M9.5,7.5c1,0,1.9,0.8,1.9,1.9c0,1-0.8,1.9-1.9,1.9c-1,0-1.9-0.8-1.9-1.9C7.6,8.3,8.5,7.5,9.5,7.5z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
}
.uop-wrapper-info::after {
  border-top-color: #1e4457;
  border-right-color: #1e4457;
}
.uop-wrapper-warn {
  color: #886500;
  background-color: #FFFAC8;
}
.uop-wrapper-warn::before {
  /*padding-left: 30px;*/
  background-color: #886500;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 30'%3E%3Cellipse cx='8' cy='20.9' rx='1.5' ry='1.6'/%3E%3Cpath d='M10,9.6c0,1.8-1.5,8.8-1.5,8.8c-0.2-0.1-0.3-0.1-0.5-0.1c-0.2,0-0.4,0-0.5,0.1c0,0-1.5-7.1-1.5-8.8c0-1.2,0.9-2.1,2-2.1	C9.1,7.5,10,8.4,10,9.6z'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
}
.uop-wrapper-warn::after {
  border-top-color: #765818;
  border-right-color: #765818;
}
/* --- MEDIA QUERIES --- */
/* for sm and <  */
/* start large & xl breakpoint */