a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}


/* THEME */

.theme-bg, legend, /*.hover-color:hover,*/ .navigation-advanced-menu-container *.active, .list .list-row.active-state.active, .list-row.heading,
.dialog-close, .input-prompt-icon {
    background-color: #48D927 /* #{{colour_feature}} */ !important;
}

.theme-bg-dark {
    background-color: #2ecc71 /* blue #{{colour_feature_dark}} */ ;
}

.theme-fa {
    --fa-secondary-color: #{{colour_feature_dark}};
    --fa-primary-color: #{{colour_feature}};
    width: 1em !important;
}

.theme-fa-red {
    --fa-secondary-color: red;
    --fa-primary-color: red;
}

.theme-fa-yellow {
    --fa-secondary-color: yellow;
    --fa-primary-color: gold;
}

.theme-fa-orange {
    --fa-secondary-color: orange;
    --fa-primary-color: orange;
}

.theme-fa-green, .theme-fa-green-hover:hover {
    --fa-secondary-color: green;
    --fa-primary-color: green;
}

.theme-fa-white {
    --fa-secondary-color: white;
    --fa-primary-color: white;
}

.grab {cursor: -webkit-grab; cursor: grab;}
.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.move {cursor: move;}

/* Generic Elements */
h1 {
    margin: 1rem;
    font-size: 1.5rem;
}

h2 {
    font-weight: 700;
    margin: 2rem 0px;
}

h3 {
    font-size: 1rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
    font-weight: 700;
}

body, html, input[type="date"], textarea {
    font-family: 'Roboto', sans-serif;
    font-size: 17px !important;
    color: #282828 !important;
    box-sizing: border-box;
    height: 100%;
}

input[type="search"] {
    background-position: 5px center;
    background-size: 22px;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMjAuNDQgMzIuODlhMTMgMTMgMCAwMDcuNDctMi40OUwzNyAzOS40N2ExLjc2IDEuNzYgMCAwMDEuMjQuNTMgMS43OSAxLjc5IDAgMDAxLjI1LS41MyAxLjcyIDEuNzIgMCAwMDAtMi40OWwtOS4wOS05LjA3YTEzIDEzIDAgMDAyLjQ5LTcuNDcgMTIuNDUgMTIuNDUgMCAxMC0xMi40NSAxMi40NXptMC0yMS4zM2E4Ljg5IDguODkgMCAxMS04Ljg4IDguODggOC45MSA4LjkxIDAgMDE4Ljg4LTguODh6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmZmYiLz48ZyBkYXRhLW5hbWU9IuKtlS1BY3Rpb24tLy1TZWFyY2giPjxwYXRoIGRhdGEtbmFtZT0icGF0aC0xIiBkPSJNMjAuNDQgMzIuODlhMTMgMTMgMCAwMDcuNDctMi40OUwzNyAzOS40N2ExLjc2IDEuNzYgMCAwMDEuMjQuNTMgMS43OSAxLjc5IDAgMDAxLjI1LS41MyAxLjcyIDEuNzIgMCAwMDAtMi40OWwtOS4wOS05LjA3YTEzIDEzIDAgMDAyLjQ5LTcuNDcgMTIuNDUgMTIuNDUgMCAxMC0xMi40NSAxMi40NXptMC0yMS4zM2E4Ljg5IDguODkgMCAxMS04Ljg4IDguODggOC45MSA4LjkxIDAgMDE4Ljg4LTguODh6IiBmaWxsPSIjN2Q3ZDdkIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L2c+PC9zdmc+);
    padding-left: 2rem;
    border: 1px solid silver;
    border-radius: 15px;
    margin-bottom: 0.5rem;
}


body {
    background: #f5fcf5 url("/assets/images/res/signin-background.jpg");
    background-size: cover;
}

b {
    font-weight: 700;
}

legend {
    font-size: 1rem;
    padding: 0.5rem 0px;
    width: 100%;
    color: white;
    padding-left: 1rem;
    border-radius: 2px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

*:disabled {
    /*opacity: .5;*/
    /*background-color: silver !important;*/
}

*:focus {
    outline: none;
}

a {
    color: #2ECC71;
}

.hover {
    cursor: pointer;
}

/* .hover-color:hover {
    color: white !important;
    cursor: pointer;
} */

.hover-underline:hover {
    text-decoration: underline;
}

/* Loader */
.loader {
  border: 4px solid rgba(0,0,0,0);
  border-radius: 50%;
  border-top: 4px solid #808285;
  border-bottom: 4px solid #808285;
  margin: 0 auto;
  width: 1rem;
  height: 1rem;
  display: block;
  text-align: center;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.hover {
    cursor: pointer;
}

.loader.large {
    width: 2rem;
    height: 2rem;
    padding: 1rem;
    margin: 1rem auto;
}

/* Removed/Deleted Icon */
.removed {
  border: 4px solid rgba(0,0,0,0);
  border-radius: 50%;
  border-top: 4px solid #808285;
  border-bottom: 4px solid #808285;
  margin: 0 auto;
  width: 1rem;
  height: 1rem;
  display: block;
  text-align: center;
  /*
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  */
}
.removed.large {
    width: 2rem;
    height: 2rem;
    padding: 1rem;
    margin: 1rem auto;
}


.container-sm {
    max-width: 500px;
    margin: 0 auto;
}

label {
    color: #808285;
    line-height: 2rem;
}

input, select, textarea {
    border: none;
    border-bottom: 1px solid silver;
    padding: 0.25rem;
    font-size: 1rem;
    width: 100%;
    height: 2rem;
    background-color: white;
}

textarea {
    height: 6rem;
}

input.heading, span.heading {
    /*width: calc(100% - 2rem);*/
    font-size: 1.5rem;
    color: #808285;
    border-bottom: none;
    margin-top: 1rem;
    margin-bottom: 0px;
    display: block;
    margin-bottom: 1rem;
}

span.heading {
    line-height: 2rem;
}

input.heading:focus {
    border-bottom: 1px solid silver;
}

input.heading:disabled {
    background-color: initial !important;
}

input.heading + .input-prompt-icon {
    top: 1rem;
}

input.error, textarea.error {
    border-bottom: 2px solid red;
    color: red;
}

h1.heading {
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    margin-left: 0px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 1.5rem;
    margin-top: 0.25rem;
}

.switch input {
    display: none;
}

label.radio {
    position: relative;
    display: block;
    height: 2rem;
    text-align: left;
    padding-left: 2rem;
}

label.radio > .text:before {
    content: "-";
    display: inline-block;
    margin-right: 1rem;
}

.radio-label {
    padding-bottom: 0px !important;
}

label.radio > *:hover {
    cursor: pointer;
}

input[type=radio] {
    display: none;
}

input[type=radio] + .circle:before {
    content: "";
    height: 1.6rem;
    width: 1.6rem;
    /* left: 0.25rem; */
    /* bottom: 0.125rem; */
    border: 0.15rem solid grey;
    -webkit-transition: .1s;
    transition: .1s;
    border-radius: 100%;
    display: block;
    margin-right: 0.45rem;
}

input[type=radio]:checked + .circle:before {
    background-color: #2ecc71;
    border: none;
}

.slider-container {
    height: 1rem;
    padding-top: 0.5rem;
    line-height: 1rem;
}

input[type="radio"] + .text {
    cursor: pointer;
    border-radius: 2px;
    -webkit-transition: .1s;
    transition: .1s;
    z-index: 100;
    border: 1px solid silver;
    height: 1.5rem;
    line-height: 1.5rem;
    display: inline-block;
    padding: 0px 1rem;
}

/*
input[type="radio"] + .text:before {
    position: absolute;
    content: "";
    height: 1rem;
    width: 1rem;
    right: 0.5rem;
    bottom: 0.5rem;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 1px;
    border: 1px solid silver;
}*/

input[type="radio"]:disabled + .text {
    background-color: #ccc;
}

input[type="radio"]:checked + .text {
    background-color: #2ecc71;
    color: white;
}

input[type="radio"]:checked:disabled + .text {
    background-color: #7FCCA2;
}


input[type="checkbox"] + .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 2px;
    background-color: grey;
    -webkit-transition: .1s;
    transition: .1s;
    z-index: 100;
}

input[type="checkbox"] + .slider:before {
    position: absolute;
    content: "";
    height: 1.2rem;
    width: 1rem;
    left: 0.25rem;
    bottom: 0.125rem;
    background-color: white;
    -webkit-transition: .1s;
    transition: .1s;
    border-radius: 1px;
}

input[type="checkbox"]:checked + .slider {
    background-color: #2ecc71;
}

input[type="checkbox"]:disabled + .slider {
    background-color: #ccc;
}

input[type="checkbox"]:checked:disabled + .slider {
    background-color: #7FCCA2;
}

input[type="checkbox"]:checked + .slider:before {
    -webkit-transform: translateX(1.1rem);
    -ms-transform: translateX(1.1rem);
    transform: translateX(1.1rem);
}

#navigation-tab-container {
    width: calc(100% - 10rem);
    height: 100%;
    white-space: nowrap;
    overflow: hidden;
    overflow-x: auto;
    display: inline-block;
}

#navigation-tabs {
    height: 100%;
}

#navigation-quick-menu-container {
    width: 10rem;
    height: 100%;
    white-space: nowrap;
    display: inline-block;
    text-align: right;
    vertical-align: top;
    padding: 0 1rem 0 0;
}

.quick-status {
    display: inline-block;
    height: 1.25rem;
    /* padding: 0rem 0rem 0 0; */
    border-radius: 6px;
    margin-top: .5rem;
}

.quick-status.error {
    background-color: red;
    color: white;
    padding: .2rem 1rem;
}

.quick-status.error > span {
	animation: offline 2s linear infinite;
}

@keyframes offline {
    0%{opacity: 0;}
    50%{opacity: .5;}
    75%{opacity: 1;}
    100%{opacity: 1;}
}


.quick-menus {
    display: inline-block;
    height: 100%;
}

.quick-menu {
    height: 2.5rem;
    width: 2.5rem;
    display: inline-block;
    cursor: pointer;
    position: relative;
    vertical-align: top;
    text-align: center;
    line-height: 2.5rem;
}

.quick-menu:hover {
    background-color: rgba(0,0,0,0.2);
    /*background-color: rgba(0,0,0,0.2);*/
}

.quick-menu > span {
    color: white;
    padding-left: 0.255rem;
    font-size: 1.75rem;
}

.quick-menu > img {
    height: 1.25rem;
    margin-top: 0.125rem;
    margin-left: 0.125rem;
}

.quick-menu-item {
    width: 100%;
    padding: 0px 1.125rem;
    height: 50px;
    line-height: 50px;
    position: relative;
}

.quick-menu-item:hover, .quick-menu-item.active {
    cursor: pointer;
    background-color: rgba(0,0,0,0.2);
    color: white;
}

.quick-menu-item img {
    height: 1.5rem;
    width: 1.5rem;
    vertical-align: top;
    margin-right: 0.5rem; /*1.125rem;*/
    margin-top: 0.625rem;
}

.quick-menu-item span {
    padding-left: 0.5rem;
}

.notification-badge {
    background-color : red;
    border-radius: 100px;
    padding: 2px;
    line-height: 1rem;
    font-size: 1rem;
    font-weight: bold;
    width: 1.25rem;
    text-align: center;
    color: #FFF;
    position: absolute;
    top: -5px;
    margin-left: 15px;
    z-index: 2000;
    cursor: pointer;
}

.document {
    min-width: 17rem;
    min-height: 17rem;
    /* max-height: calc(100% - 100px); */
    display: block;
    width: 30%;
    border-radius: 4px;
    position: fixed;
    background-color: white;
    color: white;
    padding-bottom: 0.25rem;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
}

.document.large {
    width: 90%;
}

#content.nav-show > .document.maximized {
    width: calc(100% - 3.75rem) !important;
    left: 3.75rem !important;
}

.document.maximized {
    z-index: 99;
    height: calc(100% - 2.25rem) !important;
    width: calc(100% - 200px) !important;
    top: 2.25rem !important;
    left: 200px !important;
    max-height: 100%;
    border-radius: 0px;
}

.document.maximized .document-content-container {
    height: calc(100% - 2rem) !important;
}

.document.maximized .document-content {
    height: 100%;
}

.document.active .document-head {
    background-color: #{{colour_feature_dark}};
}

.document-head {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    background-color: #2ecc71 /* #{{colour_feature_dark}} */;
    border-radius: 2px 2px 0px 0px;
}

.disabled-user-select * {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

.document-resize-up {
    width: 100%;
    height: 0.25rem;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    cursor: n-resize;
}

.document-resize-right {
    width: 0.25rem;
    height: calc(100% - 2rem);
    display: block;
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 100;
    cursor: w-resize;
}

.document-resize-left {
    width: 0.25rem;
    height: calc(100% - 2rem);
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 100;
    cursor: e-resize;
}

.document-resize-down {
    width: 100%;
    height: 0.25rem;
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 100;
    cursor: s-resize;
}

.document-resize-down-right {
    width: 0.25rem;
    height: 0.25rem;
    display: block;
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 100;
    cursor: se-resize;
}

.document-resize-down-left {
    width: 0.25rem;
    height: 0.25rem;
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 100;
    cursor: sw-resize;
}

.document-icon {
    position: absolute;
    left: 0.5rem;
    font-size: 22px;
}

.document-icon > img {
    width: 100%;
    height: 100%;
    display: block;
}

.document-content {
    position: relative;
}

.document-content-container {
    width: calc(100% - 0.5rem);
    height: calc(100% - 2.5rem);
    min-height: 14.5rem;
    display: block;
    background-color: white;
    /* position: absolute; */
    margin-left: 0.25rem;
    bottom: 0.25rem;
    right: 0.25rem;
    border-radius: 2px;
    cursor: default;
    color: #282828;
    overflow-x: hidden;
    overflow-y: auto;
}

.document-title {
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    padding-left: 2.5rem;
    width: calc(100% - 6rem);
}

.document-actions {
    position: absolute;
    top: 0px;
    height: 2.5rem;
    right: 0px;
    width: 7.5rem;
}

.document-actions > span {
    height: 2.5rem;
    display: block;
    line-height: 2.5rem;
    position: absolute;
    cursor: pointer;
    width: 2.5rem;
    text-align: center;
    font-size: 22px;
}


.document-actions > span > img {
    height: 100%;
    width: 100%;
    padding: 20%;
    border-radius: 4px;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
}

.document-close {
    right: 0rem;
}

.document-close:hover {
    /* background-color: red; */
    background-color: rgba(0, 0, 0, 0.1);
}

.document-minimize {
    right: 5rem;
}
.document-minimize:hover {
    /* background-color: orange; */
    background-color: rgba(0, 0, 0, 0.1);
}

.document-maximize {
    right: 2.5rem;
}

.document-maximize:hover {
    /* background-color: green; */
    background-color: rgba(0, 0, 0, 0.1);
}

.tab {
    height: 2.5rem;
    max-width: 200px;
    display: inline-block;
    background-color: #2ecc71 /* #{{colour_feature_dark}} */;
    padding: 0px 2.5rem;
    line-height: 2.5rem;
    color: white;
    cursor: pointer;
    position: relative;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
}

.tab.minimized {
    background-color: rgba(0,0,0,0.5);
}

.tab:hover, .tab.active {
    background-color: #2ecc71 /* #{{colour_feature_dark}} */;
}

.tab > .icon {
    display: inline-block;
    position: absolute;
    left: 0rem;
    top: 0px;
    font-size: 22px;
}

.tab > .icon > img {
    width: 100%;
    height: 100%;
    display: block;
}

.tab > .close {
    display: inline-block;
    width: 1rem;
    vertical-align: middle;
    margin-left: 0.5rem;
    top: 8px;
    right: 0.5rem;
    line-height: 1.5rem;
    position: absolute;
    font-size: 22px;
}

.tab > .close > img {
    height: 100%;
    width: 100%;
    display: block;
}

.map {
    width: 100%;
    height: 300px;
}

.map-header {
    display: none;
}

.map-header.active {
    display: block;
}

.btn-lg {
    width: 100%;
    min-height: 2rem;
}

.btn-default {
    background-color: white;
    border: 1px solid #808285;
    color: #808285;
}

.btn-feature {
    background-color: #808285;
    color: white !important;
}

.confirm-action {
    background-color: #c0392b !important;
    color: white !important;
}

.btn-square {
    height: 2rem;
    width: 2rem;
    font-size: 1.25rem;
}

.btn-small {
    height: 1rem;
    width: 1rem;
    font-size: 1rem;
    padding: 0px;
}

.btn-invis {
    background-color: initial;
    box-shadow: none;
}

.form-group {
    margin: 0.5rem 0rem;
    position: relative;
    padding: 0.5rem;
}

.pull-right {
    float: right;
}

.pull-left {
    float: left;
}

.text-left {
    text-align:left;
}

.text-right {
    text-align:right;
}

.text-center {
    text-align:center;
}

.font-small {
    font-size: 0.8rem;
}

.navigation-advanced-container {
    height: calc(2rem + 1px);
    width: 100%;
    display: block;
    margin-top: 0.5rem;
    position: relative;
    border-bottom: 1px solid grey;
    width: 100%;
}

.navigation-advanced-container > img {
    width: 100%;
    height: 100%;
}

.navigation-advanced-menu-container > *:hover {
    cursor: pointer;
    background-color: #EEF1F2;
}

.navigation-advanced-menu {
    background-color: white;
    overflow-x: auto;
    /* height: 2rem; */
}

.navigation-advanced-menu-container > * {
    padding: 0rem 0.5rem;
    display: inline-block;
    height: 100%;
    line-height: 2rem;
    border-radius: 2px 2px 0px 0px;
}

.navigation-advanced-menu-container {
    height: 100%;
    white-space: nowrap;
}

.navigation-advanced-menu-container > .right {
    float: right;
}

.navigation-advanced-menu-container > *.active {
    color: white;
}

.dropdown-options {
    position: absolute;
    display: none;
    right: 0px;
    top: calc(100%);
    /* width: 10rem; */
    background-color: #ffffff;
    color: #808285;
    z-index: 200;
    border: 1px solid silver;
    border-radius: 3px;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
    /* margin: .125rem 0 0 0; */
    text-align: left;
    border-top: 0px;
    font-size: initial;
}

.dropdown-options > span {
    display: block;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid silver;
    font-size: 1rem;
    font-weight: 300;
    text-align: left;
    line-height: 1rem;
    white-space: nowrap;;
}

.dropdown-options > span:hover {
    cursor: pointer;
    background-color: silver;
}

.dropdown-options > span:last-child {
    border: none;
}

.dropdown.active > .dropdown-options, .dropdown.active + .dropdown-options {
    display: block;
}

.dropdown > img {
    width: 1.3rem;
    vertical-align: middle;
}

.dropdown {
    position: relative;
}

.dropdown-container {
    position: relative;
}

.navigation-advanced-menu-container .dropdown {
    position: initial;
}

.gm-style button {
    box-shadow: none;
}

button {
    border: none;
    border-radius: 2px;
    font-size: 1rem;
    padding: 0px;
    font-weight: 700;
    color: #808285 !important;
    padding: 0.25rem;
    background-color: #DBDBDB;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);
}

button:hover {
    cursor: pointer;
}

button:hover:active {
    background-color: #49b652;
}

#form-logo-container {
    margin-bottom: 1rem;
    position: absolute;
    top: 0px;
    background-color: white;
    width: 100%;
    left: 0px;
    padding: 0.5rem;
    border-radius: 5px 5px 0px 0px;
    padding-left: 1.5rem;
    padding-top: 1rem;
    border-bottom: 1px solid silver;
    background-color: #f4f4f4;
}

#form-logo-container > img {
    height: 2rem;
}


#form-container {
    padding: 1rem;
    border-radius: 5px;
    position: relative;
    z-index: 2;
    display: block;
    background-color: white;
    position: fixed;
    top: 15%;
    left: 50%;
    margin-left: -200px;
    max-width: 400px;
    box-shadow: 1px 2px 10px #888888;
    width: 500px;
    padding-top: 4rem;
}

#content {
    height: calc(100% - 2.5rem);
    width: 100%;
    overflow: hidden;
}

#signin-background-image {
    height: 100%;
    width: 100%;
    background: #48D927 url("/assets/images/res/signin-background.jpg");
    background-size: cover;
    background-position: center;
    position: fixed;
    opacity: 0.3;
    z-index: 1;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#snackbars {
    position: fixed;
    bottom: 0px;
    right: 0px;
    max-width: calc(100% - 1rem);
    text-align: right;
    z-index: 1100;
}

.snackbar {
    padding: 0.75rem;
    display: inline-block;
    margin-bottom: 1rem;
    float: right;
    border-radius: 2px 0px 0px 2px;
    clear: both;
}

.snackbar.error {
    background-color: #e74c3c;
    color: white;
}

.snackbar.success {
    background-color: #2ecc71;
    color: white;
}

.snackbar.neutral {
    background-color: silver;
}

.content-container {
    padding: 1rem;
    width: 100%;
}

.container-small {
    /*width: 700px;*/
    margin: 0 auto;
    max-width: 100%;
    padding-top: 0px !important;
}

.lh-2 {
    line-height: 2rem;
}

.fs-1 {
    font-size: 1rem;
}

.icon {
    height: 1rem;
    margin: 0rem 0.5rem;
}

.icon-single-container {
    width: 2rem;
    display: inline-block;
    min-height: 1px;
}

.icon-double-container {
    width: 3rem;
    display: inline-block;
    min-height: 1px;
}

.badge {
    height: 0.8rem;
    width: 0.8rem;
    display: block;
    background-color: white;
    position: absolute;
    top: 0px;
    right: 0.25rem;
    border-radius: 100%;
    border: 1px solid grey;
    font-size: 0.8rem;
    line-height: 0.7rem;
    text-align: center;
    color: #808582;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
}

.badge-container {
    position: relative;
}

.link {
    background-color: #{{colour_feature}};
    height: 1.3rem;
    width: 1.3rem;
    display: inline-block;
    padding: 0.25rem;
    border-radius: 0.5rem;
    position: absolute;
    top: 50%;
    margin-top: -0.65rem;
    right: -1rem;
}

.link:hover {
    cursor: pointer;
    background-color: #2ecc71 /* #{{colour_feature_dark}} */;
}

.alert-icon > img {
    height: 1rem;
    display: inline-block;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.alert-icon {
    display: inline-block;
    position: relative;
}

/* Needs to be changed slightly to match up with text/inputs */
.alert-icon.lh-2 {
    line-height: 2.5rem;
    height: 2rem;
}

.alert-icon > .bubble {
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    height: 1rem;
    background-color: grey;
    color: white;
    border-radius: 100%;
    font-size: 0.6rem;
    width: 1rem;
    line-height: 1rem;
    text-align: center;
    border: 1px solid white;
}


.success-text {
    color: white;
    background-color: #69d176;
    border-radius: 4px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.warning-text {
    color: white;
    background-color: #FBB040;
    border-radius: 4px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.alert-text {
    color: white;
    background-color: #ED1C24;
    border-radius: 4px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}


.bubble {
    border-radius: 20px;
    padding: 0 0.5rem;
    /*min-width: 2rem;*/
    display: inline-block;
    text-align: center;
    height: 1.5rem;
    line-height: 1.5rem;
    box-sizing: content-box;
    /* border: 1px solid silver; */
    margin-top: -0.3rem;
    cursor: pointer;
}
    .bubble.active {
        font-weight: bold;
    }

.bubble-circle {
    border-radius: 100%;
    width: 0.5rem;
    height: 0.5rem;
    display: block;
    position: relative;
    /* top: 0%; */
    /* line-height: 2rem; */
    transform: translateY(75%);
    margin-right: 0.25rem;
}

.bubble-container {
    height: 1rem;
    display: inline-block;
}

.bubble-success, .badge-success {
    background-color: #2ecc71;
    color: white;
}
    .bubble-success svg {
        color: darkgreen;
    }

.bubble-success-2, .badge-success-2 {
    border:1px solid  #2ecc71;
    background-color: white !important;
}

.bubble-acknowledged {
    border: 1px solid silver;
    background-color: white;
    color: silver;
}
    .bubble-acknowledged.active {
        color: black;
    }
    .filter-acknowledged .bubble-acknowledged {
        padding: 0 0.3rem;
    }

.bubble-absent, .bubble-yellow, .badge-yellow {
    background-color: #e3df24;
    color: darkgoldenrod;
}

.bubble-escalate, .bubble-orange, .badge-orange {
    background-color: #e67e22;
    color: white;
}
    .bubble-escalate svg {
        color: #BF3313;
    }


.bubble-warning, .bubble-grey, .badge-grey {
    background-color: grey;
    color: white;
}

.bubble-error, .bubble-red, .badge-red {
    background-color: #c0392b;
    color: white;
}

.bubble-ignored {
    background-color: #f8ada6;
    color: white;
}

.bubble-not-active, .badge-not-active {
    border: 1px solid silver;
    background-color: white;
}

.bubble svg, .bubble i {
    font-size: 15px;
}

.list-actions {
    width: 100%;
    position: relative;
    height: 2.25rem;
}

.list-actions > .search-container input {
    padding: 1rem;
    width: 20rem;
    height: 2rem;
    margin: 1rem;
    border: 2px solid silver;
    border-radius: 5px;
}

.list-actions > * {
    vertical-align: middle;
    display: inline-block;
    display: relative;
}

.list-order-btn {
    font-weight: 700;
}

.list-order {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid silver;
    /* margin-bottom: 0.5rem; */
    margin-top: 1rem;
    line-height: 2rem;
}

.list .list-header {
    color: grey;
    background-color: #EEF1F2;
    font-size: 0.85rem;
}

.list .list-row:nth-child(odd) {
    background-color: #EEF1F2;
}

.list .list-row.active-state.active, .list-row.heading {
    color: white;
    cursor: pointer;
}
.list .list-row:hover {
    background-color: #D9D9D9;
    cursor: pointer;
}

.list-row.active-state.not-active {
    color: silver;
    cursor: pointer;
}

.list-search-input {
    border: none;
}

.sub-container {
    width: 350px;
    margin: 0px;
    display: inline-block;
    border-right: 2px solid silver;
    height: 100%;
    overflow-y: auto;
}

.sub-container-content {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 350px);
    padding: 1rem;
    height: 100%;
    overflow-y: auto;
}

.container-content {
    vertical-align: top;
    padding: 1rem;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

.dialog {
    position: fixed;
    right: 100%;
    z-index: 998;
    right: 110%;
    -webkit-transition: .1s all ease-out;
    -moz-transition: .1s all ease-out;
    -o-transition: .1s all ease-out;
    transition: .1s all ease-out;
    border-radius: 2px;
}

.dialog-heading {
    height: 3rem;
    line-height: 3rem;
    padding-left: 1rem;
    border: 2px solid grey;
    border-bottom: 1px solid silver;
    background-color: white;
    border-radius: 2px 2px 0px 0px;
}

.dialog-content-container, .dialog-container {
    max-height: calc(100% - 3rem); /* 3 rem is the height of the dialog title */
    overflow-y: auto;
    background-color: white;
    border-radius: 0px 0px 2px 2px;
    border: 2px solid grey;
    border-top: none;
}

.dialog-content {
    padding: 1rem;
    padding-bottom: 2rem;
    height: calc(100% - 3rem); /* 3 rem is the height of the dialog title */
    overflow-y: auto;
}

.dialog-close {
    height: 4rem;
    width: 4rem;
    position: absolute;
    border-radius: 100%;
    top: -1.5rem;
    right: -1.5rem;
    /*box-shadow: 1px 1px 1px #888888;*/
    /* border: 2px solid white; */
    border-right: 2px solid grey;
    border-top: 2px solid grey;
    z-index: 999;
}

.dialog-close > img {
    margin: 0 auto;
    display: block;
    height: 100%;
    width: 40%;
}

.dialog.active {
    left: 50%;
    margin-left: -200px;
    right: initial;
}

.dialog-close:hover {
    cursor: pointer;
}

.dialog {
    width: 400px;
    height: 80%;
    top: 5%;
}

.dialog.large {
    width: 90%;
    height: 90%;
}

.dialog.large.active {
    left: 5%;
    margin-left: 0px;
}

/* This will give a overlapping effect (similar to windows) */
#dialog-1 {
    margin-top: 1rem;
    margin-left: 1rem;
}

#dialog-2 {
    margin-top: 2rem;
    margin-left: 2rem;
}

#confirmation {
    position: fixed;
    z-index: 999;
    background-color: white;
    padding: 0.5rem;
    border-radius: 4px;
    min-width: 300px;
    max-width: 600px;
    border: 1px solid grey;
    display: inline-block;
}

#confirmation-text {
    margin: 0.5rem 0px;
    line-height: 1.5rem;
}

#confirmation-actions {
    margin-top: 1rem;
}

#confirmation-confirm {
    padding: 0.5rem;
    float: right;
    background-color: #2ecc71;
    border-radius: 4px;
    color: white;
    margin-left: 1rem;
}

#confirmation-deny {
    padding: 0.5rem;
    float: left;
    background-color: #c0392b;
    border-radius: 4px;
    color: white;
}


#system-message {
    position: fixed;
    bottom: 0px;
    left: 0px;
    padding: 0.5rem;
    line-height: 1.4rem;
    display:none;
    z-index:999;
    width: 100%;
    text-align:center;
}

#system-message.error {
    background-color: #e74c3c;
    color: white;
}

.noUi-connect {
  background: #48D927 /* #{{colour_feature}} */ !important;
}


.input-prompt-icon {
    position: absolute;
    right: -1rem;
    top: 0.4rem;
    width: 2rem;
    height: 2rem;
    border: 2px solid white;
    border-radius: 100%;
}

.input-prompt-icon.send {
    background-image: url('/images/icons/icon-arrow-send.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30%;
}

.input-prompt-icon.sending > span {
    position: absolute;
    border-top-color: white;
    border-bottom-color: white;
    margin-left: 0.4rem;
    margin-top: 0.4rem;

}

.list-order-container {
    position: relative;
}

/* Arrows */

.arrow {
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
}

.arrow-up {
  border-bottom: 5px solid #{{colour_feature}};
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  margin-top: -2.5px;
}

.arrow-down {
  border-top: 5px solid #{{colour_feature}};
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  margin-top: -2.5px;
}

.arrow-right {
    border-left: 5px solid #{{colour_feature}};
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    margin-top: -5px;
}

.arrow-left {
    border-right: 5px solid #{{colour_feature}};
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    margin-top: -5px;
}

.black-ground {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 997;
    background-color: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    display: block;
    -webkit-transition: .1s all ease-out;
    -moz-transition: .1s all ease-out;
    -o-transition: .1s all ease-out;
    transition: .1s all ease-out;
}

/* Grid */

.row:after, fieldset:after {
    content: '';
    display: table;
    clear: both;
}

.col {
    float:left;
    min-height: 1px;
    position: relative;
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-12 {
    width: 100%;
}

.pad-0 {
    padding: 0px;
}

.pad-1 {
    padding: 1rem;
}

.pad-0_5 {
    padding: 0.5rem;
}

.pad-vert-1 {
    padding: 1rem 0px;
}

.pad-vert-0_5 {
    padding: 0.5rem 0px;
}

.pad-hori-1 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.pad-left-1 {
    padding-left: 1rem;
}

.pad-left-0_5 {
    padding-left: 0.5rem;
}

.pad-right-1 {
    padding-right: 1rem;
}

.pad-right-0_5 {
    padding-right: 0.5rem;
}

.pad-top-1 {
    padding-top: 1rem;
}

.pad-top-0_5 {
    padding-top: 0.5rem;
}

.pad-bottom-1 {
    padding-bottom: 1rem;
}

.pad-bottom-0_5 {
    padding-bottom: 0.5rem;
}


.max-w-10 {
    max-width: 10rem;
}

.mg-0 {
    margin: 0px;
}

.mg-1 {
    margin: 1rem;
}

.mg-top-1 {
    margin-top: 1rem;
}

.mg-bot-1 {
    margin-bottom: 1rem;
}

.mg-bot-1_5 {
    margin-bottom: 1.5rem;
}

.mg-right-1 {
    margin-right: 1rem;
}

.mg-right-0_5 {
    margin-right: 0.5rem;
}

.mg-left-0_5 {
    margin-left: 0.5rem;
}

.mg-left-0_25 {
    margin-left: 0.25rem;
}

.mg-hori-1 {
    margin-left: 1rem;
    margin-right: 1rem;
}

.mg-vert-1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.hide {
    display: none;
}

/* Width Styles */

.wd-minimum .wd-min-hide,
.wd-small .wd-sml-hide,
.wd-medium .wd-med-hide,
.wd-large .wd-lg-hide,
.wd-extralarge .wd-xlg-hide {
    display: none !important;
}

.wd-minimum .wd-sml-1, .wd-minimum .wd-sml-2, .wd-minimum .wd-sml-3, .wd-minimum .wd-sml-4, .wd-minimum .wd-sml-5, .wd-minimum .wd-sml-6, .wd-minimum .wd-sml-7, .wd-minimum .wd-sml-8, .wd-minimum .wd-sml-9, .wd-minimum .wd-sml-10, .wd-minimum .wd-sml-11, .wd-minimum .wd-sml-12,
.wd-minimum .wd-med-1, .wd-minimum .wd-med-2, .wd-minimum .wd-med-3, .wd-minimum .wd-med-4, .wd-minimum .wd-med-5, .wd-minimum .wd-med-6, .wd-minimum .wd-med-7, .wd-minimum .wd-med-8, .wd-minimum .wd-med-9, .wd-minimum .wd-med-10, .wd-minimum .wd-med-11, .wd-minimum .wd-med-12,
.wd-minimum .wd-lg-1, .wd-minimum .wd-lg-2, .wd-minimum .wd-lg-3, .wd-minimum .wd-lg-4, .wd-minimum .wd-lg-5, .wd-minimum .wd-lg-6, .wd-minimum .wd-lg-7, .wd-minimum .wd-lg-8, .wd-minimum .wd-lg-9, .wd-minimum .wd-lg-10, .wd-minimum .wd-lg-11, .wd-minimum .wd-lg-12,
.wd-minimum .wd-xlg-1, .wd-minimum .wd-xlg-2, .wd-minimum .wd-xlg-3, .wd-minimum .wd-xlg-4, .wd-minimum .wd-xlg-5, .wd-minimum .wd-xlg-6, .wd-minimum .wd-xlg-7, .wd-minimum .wd-xlg-8, .wd-minimum .wd-xlg-9, .wd-minimum .wd-xlg-10, .wd-minimum .wd-xlg-11, .wd-minimum .wd-xlg-12  {
    display: none;
}

.wd-small .wd-med-1, .wd-small .wd-med-2, .wd-small .wd-med-3, .wd-small .wd-med-4, .wd-small .wd-med-5, .wd-small .wd-med-6, .wd-small .wd-med-7, .wd-small .wd-med-8, .wd-small .wd-med-9, .wd-small .wd-med-10, .wd-small .wd-med-11, .wd-small .wd-med-12,
.wd-small .wd-lg-1, .wd-small .wd-lg-2, .wd-small .wd-lg-3, .wd-small .wd-lg-4, .wd-small .wd-lg-5, .wd-small .wd-lg-6, .wd-small .wd-lg-7, .wd-small .wd-lg-8, .wd-small .wd-lg-9, .wd-small .wd-lg-10, .wd-small .wd-lg-11, .wd-small .wd-lg-12,
.wd-small .wd-xlg-1, .wd-small .wd-xlg-2, .wd-small .wd-xlg-3, .wd-small .wd-xlg-4, .wd-small .wd-xlg-5, .wd-small .wd-xlg-6, .wd-small .wd-xlg-7, .wd-small .wd-xlg-8, .wd-small .wd-xlg-9, .wd-small .wd-xlg-10, .wd-small .wd-xlg-11, .wd-small .wd-xlg-12  {
    display: none;
}

.wd-medium .wd-lg-1, .wd-medium .wd-lg-2, .wd-medium .wd-lg-3, .wd-medium .wd-lg-4, .wd-medium .wd-lg-5, .wd-medium .wd-lg-6, .wd-medium .wd-lg-7, .wd-medium .wd-lg-8, .wd-medium .wd-lg-9, .wd-medium .wd-lg-10, .wd-medium .wd-lg-11, .wd-medium .wd-lg-12,
.wd-medium .wd-xlg-1, .wd-medium .wd-xlg-2, .wd-medium .wd-xlg-3, .wd-medium .wd-xlg-4, .wd-medium .wd-xlg-5, .wd-medium .wd-xlg-6, .wd-medium .wd-xlg-7, .wd-medium .wd-xlg-8, .wd-medium .wd-xlg-9, .wd-medium .wd-xlg-10, .wd-medium .wd-xlg-11, .wd-medium .wd-xlg-12  {
    display: none;
}

.wd-large .wd-xlg-1, .wd-large .wd-xlg-2, .wd-large .wd-xlg-3, .wd-large .wd-xlg-4, .wd-large .wd-xlg-5, .wd-large .wd-xlg-6, .wd-large .wd-xlg-7, .wd-large .wd-xlg-8, .wd-large .wd-xlg-9, .wd-large .wd-xlg-10, .wd-large .wd-xlg-11, .wd-large .wd-xlg-12  {
    display: none;
}

.wd-minimum .wd-min-1, .wd-minimum .wd-min-2, .wd-minimum .wd-min-3, .wd-minimum .wd-min-4, .wd-minimum .wd-min-5, .wd-minimum .wd-min-6, .wd-minimum .wd-min-7, .wd-minimum .wd-min-8, .wd-minimum .wd-min-9, .wd-minimum .wd-min-10, .wd-minimum .wd-min-11, .wd-minimum .wd-min-12 {
    display: initial;
}

.wd-small .wd-sml-1, .wd-small .wd-sml-2, .wd-small .wd-sml-3, .wd-small .wd-sml-4, .wd-small .wd-sml-5, .wd-small .wd-sml-6, .wd-small .wd-sml-7, .wd-small .wd-sml-8, .wd-small .wd-sml-9, .wd-small .wd-sml-10, .wd-small .wd-sml-11, .wd-small .wd-sml-12 {
    display: initial;
}

.wd-medium .wd-med-1, .wd-medium .wd-med-2, .wd-medium .wd-med-3, .wd-medium .wd-med-4, .wd-medium .wd-med-5, .wd-medium .wd-med-6, .wd-medium .wd-med-7, .wd-medium .wd-med-8, .wd-medium .wd-med-9, .wd-medium .wd-med-10, .wd-medium .wd-med-11, .wd-medium .wd-med-12 {
    display: initial;
}

.wd-large .wd-lg-1, .wd-large .wd-lg-2, .wd-large .wd-lg-3, .wd-large .wd-lg-4, .wd-large .wd-lg-5, .wd-large .wd-lg-6, .wd-large .wd-lg-7, .wd-large .wd-lg-8, .wd-large .wd-lg-9, .wd-large .wd-lg-10, .wd-large .wd-lg-11, .wd-large .wd-lg-12 {
    display: initial;
}

.wd-extralarge .wd-xlg-1, .wd-extralarge .wd-xlg-2, .wd-extralarge .wd-xlg-3, .wd-extralarge .wd-xlg-4, .wd-extralarge .wd-xlg-5, .wd-extralarge .wd-xlg-6, .wd-extralarge .wd-xlg-7, .wd-extralarge .wd-xlg-8, .wd-extralarge .wd-xlg-9, .wd-extralarge .wd-xlg-10, .wd-extralarge .wd-xlg-11, .wd-extralarge .wd-xlg-12 {
    display: initial;
}



.wd-minimum .wd-min-1 {width: 8.33%;}
.wd-minimum .wd-min-2 {width: 16.66%;}
.wd-minimum .wd-min-3 {width: 25%;}
.wd-minimum .wd-min-4 {width: 33.33%;}
.wd-minimum .wd-min-5 {width: 41.66%}
.wd-minimum .wd-min-6 {width: 50%;}
.wd-minimum .wd-min-7 {width: 58.33%}
.wd-minimum .wd-min-8 {width: 66.66%;}
.wd-minimum .wd-min-9 {width: 75%;}
.wd-minimum .wd-min-10 {width: 80.33%;}
.wd-minimum .wd-min-11 {width: 91.66%;}
.wd-minimum .wd-min-12 {width: 100%;}

.wd-small .wd-sml-1 {width: 8.33%;}
.wd-small .wd-sml-2 {width: 16.66%;}
.wd-small .wd-sml-3 {width: 25%;}
.wd-small .wd-sml-4 {width: 33.33%;}
.wd-small .wd-sml-5 {width: 41.66%}
.wd-small .wd-sml-6 {width: 50%;}
.wd-small .wd-sml-7 {width: 58.33%}
.wd-small .wd-sml-8 {width: 66.66%;}
.wd-small .wd-sml-9 {width: 75%;}
.wd-small .wd-sml-10 {width: 80.33%;}
.wd-small .wd-sml-11 {width: 91.66%;}
.wd-small .wd-sml-12 {width: 100%;}

.wd-medium .wd-med-1 {width: 8.33%;}
.wd-medium .wd-med-2 {width: 16.66%;}
.wd-medium .wd-med-3 {width: 25%;}
.wd-medium .wd-med-4 {width: 33.33%;}
.wd-medium .wd-med-5 {width: 41.66%}
.wd-medium .wd-med-6 {width: 50%;}
.wd-medium .wd-med-7 {width: 58.33%}
.wd-medium .wd-med-8 {width: 66.66%;}
.wd-medium .wd-med-9 {width: 75%;}
.wd-medium .wd-med-10 {width: 80.33%;}
.wd-medium .wd-med-11 {width: 91.66%;}
.wd-medium .wd-med-12 {width: 100%;}

.wd-large .wd-lg-1 {width: 8.33%;}
.wd-large .wd-lg-2 {width: 16.66%;}
.wd-large .wd-lg-3 {width: 25%;}
.wd-large .wd-lg-4 {width: 33.33%;}
.wd-large .wd-lg-5 {width: 41.66%}
.wd-large .wd-lg-6 {width: 50%;}
.wd-large .wd-lg-7 {width: 58.33%}
.wd-large .wd-lg-8 {width: 66.66%;}
.wd-large .wd-lg-9 {width: 75%;}
.wd-large .wd-lg-10 {width: 80.33%;}
.wd-large .wd-lg-11 {width: 91.66%;}
.wd-large .wd-lg-12 {width: 100%;}

.wd-extralarge .wd-xlg-1 {width: 8.33%;}
.wd-extralarge .wd-xlg-2 {width: 16.66%;}
.wd-extralarge .wd-xlg-3 {width: 25%;}
.wd-extralarge .wd-xlg-4 {width: 33.33%;}
.wd-extralarge .wd-xlg-5 {width: 41.66%}
.wd-extralarge .wd-xlg-6 {width: 50%;}
.wd-extralarge .wd-xlg-7 {width: 58.33%}
.wd-extralarge .wd-xlg-8 {width: 66.66%;}
.wd-extralarge .wd-xlg-9 {width: 75%;}
.wd-extralarge .wd-xlg-10 {width: 80.33%;}
.wd-extralarge .wd-xlg-11 {width: 91.66%;}
.wd-extralarge .wd-xlg-12 {width: 100%;}



/* Helps with printing */
@media print {
    body {
        -webkit-print-color-adjust: exact;
        margin: 0px;
        padding: 0px;
        font-size: 9pt !important; /* Need it smaller so more elements can fit on a page */
    }

    body * {
        visibility: hidden;
    }

    .print, .print * {
        visibility: visible;
    }

    .print {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
    }

    .pr-col-1 {
        width: 8.33%;
    }

    .pr-col-2 {
        width: 16.66%;
    }

    .pr-col-3 {
        width: 25%;
    }

    .pr-col-4 {
        width: 33.33%;
    }

    .pr-col-5 {
        width: 41.66%
    }

    .pr-col-6 {
        width: 50%;
    }

    .pr-col-7 {
        width: 58.33%
    }

    .pr-col-8 {
        width: 66.66%;
    }

    .pr-col-9 {
        width: 75%;
    }

    .pr-col-12 {
        width: 100%;
    }

    .pr-col-hide {
        display: none;
    }

    .pr-col-show {
        display: block;
    }

}