/******************************************************************************
* Fonts *
******************************************************************************/
/* Comment out what we don't need so we're not downloading unnecessarily     */
/*****************************************************************************/
/*@font-face { font-family: 'Poppins-Black'; src: url('../fonts/Poppins-Black.eot') format('embedded-opentype'); }*/
/*@font-face { font-family: 'Poppins-Black'; src: url('../fonts/Poppins-Black.otf') format('opentype'); }*/
/*@font-face { font-family: 'Poppins-BlackItalic'; src: url('../fonts/Poppins-BlackItalic.eot') format('embedded-opentype'); }*/
/*@font-face { font-family: 'Poppins-BlackItalic'; src: url('../fonts/Poppins-BlackItalic.otf') format('opentype'); }*/
/*@font-face { font-family: 'Poppins-Bold'; src: url('../fonts/Poppins-Bold.eot') format('embedded-opentype'); }*/
/*@font-face { font-family: 'Poppins-Bold'; src: url('../fonts/Poppins-Bold.otf') format('opentype'); }*/
/*@font-face { font-family: 'Poppins-BoldItalic'; src: url('../fonts/Poppins-BoldItalic.eot') format('embedded-opentype'); }*/
/*@font-face { font-family: 'Poppins-BoldItalic'; src: url('../fonts/Poppins-BoldItalic.otf') format('opentype'); }*/
/*@font-face { font-family: 'Poppins-ExtraBold'; src: url('../fonts/Poppins-ExtraBold.eot') format('embedded-opentype'); }*/
/*@font-face { font-family: 'Poppins-ExtraBold'; src: url('../fonts/Poppins-ExtraBold.otf') format('opentype'); }*/
/*@font-face { font-family: 'Poppins-ExtraBoldItalic'; src: url('../fonts/Poppins-ExtraBoldItalic.eot') format('embedded-opentype'); }*/
/*@font-face { font-family: 'Poppins-ExtraBoldItalic'; src: url('../fonts/Poppins-ExtraBoldItalic.otf') format('opentype'); }*/
/*@font-face { font-family: 'Poppins-ExtraLight'; src: url('../fonts/Poppins-ExtraLight.eot') format('embedded-opentype'); }*/
/*@font-face { font-family: 'Poppins-ExtraLight'; src: url('../fonts/Poppins-ExtraLight.otf') format('opentype'); }*/
/*@font-face { font-family: 'Poppins-ExtraLightItalic'; src: url('../fonts/Poppins-ExtraLightItalic.eot') format('embedded-opentype'); }*/
/*@font-face { font-family: 'Poppins-ExtraLightItalic'; src: url('../fonts/Poppins-ExtraLightItalic.otf') format('opentype'); }*/
/*@font-face { font-family: 'Poppins-Italic'; src: url('../fonts/Poppins-Italic.eot') format('embedded-opentype'); }*/
/*@font-face { font-family: 'Poppins-Italic'; src: url('../fonts/Poppins-Italic.otf') format('opentype'); }*/
@font-face { font-family: 'Poppins-Light'; src: url('../fonts/Poppins-Light.eot') format('embedded-opentype'); }
@font-face { font-family: 'Poppins-Light'; src: url('../fonts/Poppins-Light.otf') format('opentype'); }
@font-face {
    font-family: 'Poppins-LightItalic';
    src: url('../fonts/Poppins-LightItalic.eot') format('embedded-opentype');
}
@font-face {
    font-family: 'Poppins-LightItalic';
    src: url('../fonts/Poppins-LightItalic.otf') format('opentype');
}
@font-face { font-family: 'Poppins-Medium'; src: url('../fonts/Poppins-Medium.eot') format('embedded-opentype'); }
@font-face { font-family: 'Poppins-Medium'; src: url('../fonts/Poppins-Medium.otf') format('opentype'); }
/*@font-face { font-family: 'Poppins-MediumItalic'; src: url('../fonts/Poppins-MediumItalic.eot') format('embedded-opentype'); }*/
/*@font-face { font-family: 'Poppins-MediumItalic'; src: url('../fonts/Poppins-MediumItalic.otf') format('opentype'); }*/
@font-face { font-family: 'Poppins-Regular'; src: url('../fonts/Poppins-Regular.eot') format('embedded-opentype'); }
@font-face { font-family: 'Poppins-Regular'; src: url('../fonts/Poppins-Regular.otf') format('opentype'); }
/*@font-face { font-family: 'Poppins-SemiBold'; src: url('../fonts/Poppins-SemiBold.eot') format('embedded-opentype'); }*/
/*@font-face { font-family: 'Poppins-SemiBold'; src: url('../fonts/Poppins-SemiBold.otf') format('opentype'); }*/
/*@font-face { font-family: 'Poppins-SemiBoldItalic'; src: url('../fonts/Poppins-SemiBoldItalic.eot') format('embedded-opentype'); }*/
/*@font-face { font-family: 'Poppins-SemiBoldItalic'; src: url('../fonts/Poppins-SemiBoldItalic.otf') format('opentype'); }*/
/*@font-face { font-family: 'Poppins-Thin'; src: url('../fonts/Poppins-Thin.eot') format('embedded-opentype'); }*/
/*@font-face { font-family: 'Poppins-Thin'; src: url('../fonts/Poppins-Thin.otf') format('opentype'); }*/
/*@font-face { font-family: 'Poppins-ThinItalic'; src: url('../fonts/Poppins-ThinItalic.eot') format('embedded-opentype'); }*/
/*@font-face { font-family: 'Poppins-ThinItalic'; src: url('../fonts/Poppins-ThinItalic.otf') format('opentype'); }*/



/******************************************************************************
* Variables *
******************************************************************************/
:root {
    --BORDER_WIDTH_NORMAL: 2px;
    --BORDER_WIDTH_THICK: 4px;
    --BORDER_WIDTH_THIN: 1px;
    --COLOUR_ACTIVE: #4b5564;
    --COLOUR_BLACK: #000000;
    --COLOUR_BLUE: #2B5292;
    --COLOUR_BROWN: #A07843;
    --COLOUR_GREEN: #b0c633;
    --COLOUR_GREY_DARK: #666666;
    --COLOUR_GREY_LIGHT: #eeeeee;
    --COLOUR_GREY_MEDIUM: #cccccc;
    --COLOUR_RED: #FF0000;
    --COLOUR_TRANSPARENT: transparent;
    --COLOUR_WHITE: #FFFFFF;
    --COLOUR_YELLOW: #ffd42a;
    --CONTAINER_BOXES_MAXIMUM: 100%;
    --CONTAINER_CONTENT_MAXIMUM: 100%;
    --CONTAINER_PARAGRAPHS_MAXIMUM: 100%;
    --FONT_FAMILY_HEADING1: Poppins-Regular, Arial;
    --FONT_FAMILY_HEADING2: Poppins-Regular, Arial;
    --FONT_FAMILY_HEADING3: Poppins-Regular, Arial;
    --FONT_FAMILY_ITALIC: Poppins-LightItalic, Arial;
    --FONT_FAMILY_NORMAL: Poppins-Light,Arial;
    --FONT_FAMILY_BOLD: Poppins-Medium, Arial;
    --FONT_FAMILY_INPUT: Poppins-Medium, Arial;
    --FONT_FAMILY_BUTTON: Poppins-Medium, Arial;
    --FONT_SIZE_HEADING1: 20px;
    --FONT_SIZE_HEADING2: 18px;
    --FONT_SIZE_HEADING3: 16px;
    --FONT_SIZE_XXXHUGE: 48px;
    --FONT_SIZE_XHUGE:24px;
    --FONT_SIZE_HUGE: 18px;
    --FONT_SIZE_LARGE: 16px;
    --FONT_SIZE_NORMAL: 14px;
    --FONT_SIZE_SMALL: 11px;
    --FONT_SIZE_TINY: 10px;
    --LINE_HEIGHT_HEADING1: 24px;
    --LINE_HEIGHT_HEADING2: 22px;
    --LINE_HEIGHT_HEADING3: 20px;
    --LINE_HEIGHT_HUGE: 22px;
    --LINE_HEIGHT_LARGE: 20px;
    --LINE_HEIGHT_NORMAL: 18px;
    --LINE_HEIGHT_SMALL: 15px;
    --LINE_HEIGHT_TINY: 12px;
    --UNIT_01: 5px;
    --UNIT_02: 10px;
    --UNIT_03: 15px;
    --UNIT_04: 20px;
    --UNIT_05: 25px;
    --UNIT_06: 30px;
    --UNIT_07: 35px;
    --UNIT_08: 40px;
    --UNIT_09: 45px;
    --UNIT_10: 50px;
    --UNIT_11: 55px;
    --UNIT_12: 60px;
    --UNIT_13: 65px;
    --UNIT_14: 70px;
    --UNIT_15: 75px;
    --UNIT_16: 80px;
    --UNIT_17: 85px;
    --UNIT_18: 90px;
    --UNIT_19: 95px;
    --UNIT_20: 100px;
    --UNIT_21: 105px;
    --UNIT_22: 110px;
    --UNIT_23: 115px;
    --UNIT_24: 120px;
    --UNIT_25: 125px;
    --UNIT_26: 130px;
    --UNIT_27: 135px;
    --UNIT_28: 140px;
    --UNIT_29: 145px;
    --UNIT_30: 150px;
    --UNIT_31: 155px;
    --UNIT_32: 160px;
    --UNIT_33: 165px;
    --UNIT_34: 170px;
    --UNIT_35: 175px;
    --UNIT_36: 180px;
}


/******************************************************************************
* Body * 6
******************************************************************************/
* { -webkit-appearance:none; -webkit-tap-highlight-color: transparent; box-sizing: border-box; margin: 0; padding: 0;  box-sizing:border-box; scrollbar-width: thin;}
*:focus { outline: none; }
::placeholder {color: var(--COLOUR_GREY_MEDIUM); opacity:1; }

html {height:100%; overscroll-behavior: none!important; }

body {
    overscroll-behavior-y: contain;
    background-color: var(--COLOUR_GREY_MEDIUM);
    color: var(--COLOUR_BLACK);
    font-family: var(--FONT_FAMILY_NORMAL);
    font-size: var(--FONT_SIZE_NORMAL);
    height: 100vh;
    line-height: var(--LINE_HEIGHT_NORMAL);
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

/******************************************************************************
* Classes *
******************************************************************************/
.AppHasUpdatedTrickForServiceWorker {color: black;}
.bold { font-family:var(--FONT_FAMILY_BOLD); }
.button {
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
  align-items:center;
  border:none;
  background-color:var(--COLOUR_BLUE);
  border-radius:var(--UNIT_01);
	color:var(--COLOUR_WHITE);
  cursor:pointer;
  display:flex;
  font-family:var(--FONT_FAMILY_BUTTON);
  font-size:var(--FONT_SIZE_LARGE);
  line-height:var(--LINE_HEIGHT_LARGE);
  justify-content:center;
  text-transform: uppercase;
  padding:var(--UNIT_02) var(--UNIT_04);
  text-align:center;	
  width:100%;
 }

.centre {text-align:center;}
.huge {font-size:var(--FONT_SIZE_HUGE); line-height:var(--LINE_HEIGHT_HUGE); }
.italic {font-family:var(--FONT_FAMILY_ITALIC); }
.icon { display: block; height:var(--UNIT_04); width:var(--UNIT_04);}
.icon.small {height:var(--UNIT_03); width:var(--UNIT_03);}
.icon.large {height:var(--UNIT_06); width:var(--UNIT_06);}
.icon.huge {height:var(--UNIT_12); width:var(--UNIT_12);}
.icon.white {filter:brightness(0) invert(1); -webkit-transform: translateZ(0);}
.justify {text-align:justify;}
.large {font-size:var(--FONT_SIZE_LARGE); line-height:var(--LINE_HEIGHT_LARGE); }
.small {font-size:var(--FONT_SIZE_SMALL); line-height:var(--LINE_HEIGHT_SMALL); }
.spaced>* {margin-bottom:var(--UNIT_04); width:100%;}
.spaced>*:last-child{margin-bottom:0;}

.extra-content div:last-of-type { margin-bottom: 0 !important; }

.tiny {
    font-size: var(--FONT_SIZE_TINY);
    line-height: var(--LINE_HEIGHT_TINY);
}


/******************************************************************************
* Elements *
******************************************************************************/
a {color:inherit; text-decoration:none;}

article {width:100%;}

button {background-color:transparent; border:none; color:inherit; cursor:pointer; font-family:inherit; font-size:inherit; font-weight:inherit; outline:none; padding:0; text-align:center; width:auto;}

details summary::-webkit-details-marker {  display:none; }
details summary::marker { display:none; }
details>summary {cursor:pointer; list-style-type:none; list-style:none;}
details>summary ~ * {animation: Close 0.5s ease-in-out;}
details[open] > * {}
details[open]>summary ~ * {animation: Open 0.2s ease-in-out;}

footer {align-items:center; background-color:var(--COLOUR_GREY_LIGHT); box-shadow:0 -3px 3px var(--COLOUR_GREY_MEDIUM); display:flex; justify-content:space-between; font-size:var(--FONT_SIZE_TINY); line-height:var(--LINE_HEIGHT_TINY); height:var(--UNIT_08); padding:0 var(--UNIT_04); }

h1 {font-family:var(--FONT_FAMILY_HEADING1); font-size:var(--FONT_SIZE_HEADING1); line-height:var(--LINE_HEIGHT_HEADING1);}
h2 {font-family:var(--FONT_FAMILY_HEADING2); font-size:var(--FONT_SIZE_HEADING2); line-height:var(--LINE_HEIGHT_HEADING2);}
h3 {font-family:var(--FONT_FAMILY_HEADING3); font-size:var(--FONT_SIZE_HEADING3); line-height:var(--LINE_HEIGHT_HEADING3);}

header {align-items:center; background-color:var(--COLOUR_GREY_LIGHT); box-shadow:0 var(--BORDER_WIDTH_NORMAL) var(--BORDER_WIDTH_NORMAL) var(--COLOUR_GREY_MEDIUM); display:flex; flex-wrap:wrap; justify-content:space-between; height:var(--UNIT_08); padding:0 var(--UNIT_04); position:relative;}

hr {border-top:var(--BORDER_WIDTH_THIN) solid var(--COLOUR_GREY_MEDIUM); color: var(--COLOUR_BLACK); width:100%;}

img {max-width:100%;}

main {align-items:center; background-image:url(/images/backgrounds/dots.jpg); background-repeat:repeat; display:flex; flex-direction:column; justify-content:space-between; height:calc(100vh - var(--UNIT_16)); overflow:auto; padding:var(--UNIT_04) var(--UNIT_04); position:relative; }
main.bottom {justify-content:flex-end;}
main.middle:before {content:''; flex-grow:1;}
main.middle:after {content:''; flex-grow:1;}
main.top {justify-content:flex-start;}

table {border-radius:var(--UNIT_01); width:100%; border-collapse: collapse; }
table thead tr th {background-color:var(--COLOUR_GREY_MEDIUM); color:var(--COLOUR_GREY_DARK); font-family:var(--FONT_FAMILY_BOLD); font-size:var(--FONT_SIZE_SMALL); font-weight:normal; padding:var(--UNIT_01) var(--UNIT_02); text-align:left; vertical-align:middle; }
table thead tr th:first-child {border-top-left-radius:var(--UNIT_01);}
table thead tr th:last-child {border-top-right-radius:var(--UNIT_01);}
table tbody tr td {border:var(--BORDER_WIDTH_THIN) solid var(--COLOUR_GREY_MEDIUM); font-size:var(--FONT_SIZE_SMALL); padding:var(--UNIT_01) var(--UNIT_02); vertical-align:middle; }
table tbody tr:last-child td:first-child {border-bottom-left-radius:var(--UNIT_01);}
table tbody tr:last-child td:last-child {border-bottom-right-radius:var(--UNIT_01);}
table tbody tr td.bold {font-family:var(--FONT_FAMILY_BOLD); color: var(--COLOUR_FOREGROUND_CHARCOAL)}
table tbody tr td.centre {text-align:center;}
table tbody tr:nth-child(odd) { background-color: var(--COLOUR_WHITE); color: var(--COLOUR_BLACK);}
table tbody tr:nth-child(even) { background-color: var(--COLOUR_GREY_LIGHT); color: var(--COLOUR_BLACK);}
table tfoot tr td {background-color:var(--COLOUR_BLACK); color: var(--COLOUR_WHITE); font-family:var(--FONT_FAMILY_BOLD); font-size:var(--FONT_SIZE_SMALL); font-weight:normal; padding:var(--UNIT_01) var(--UNIT_02); text-align:left; }
table.blank {border:none;}
table.blank tbody tr:nth-child(odd) { background-color: transparent; color: var(--COLOUR_BLACK);}
table.blank tbody tr:nth-child(even) { background-color: transparent; color: var(--COLOUR_BLACK);}
table.blank tbody td {border:none; padding:var(--BORDER_WIDTH_NORMAL) 0;}

ul {list-style:none;}

#canvas {width:100%; height:250px;}
div.customDialog{height:unset !important;}

/******************************************************************************
* Features                                                                    *
******************************************************************************/
@media (hover:hover) {


}


/******************************************************************************
* Responsive *
******************************************************************************/

@media all and (orientation:landscape) {

}


@media all and (min-width: 600px) {
  /******************************************************************************
  * Variables *
  ******************************************************************************/
  :root {
    --BORDER_WIDTH_NORMAL:2px;
    --BORDER_WIDTH_THICK:6px;
    --BORDER_WIDTH_THIN:1px;

    --FONT_SIZE_HEADING1:24px;
    --FONT_SIZE_HEADING2:22px;
    --FONT_SIZE_HEADING3:20px;
    --FONT_SIZE_HUGE:22px;
    --FONT_SIZE_NORMAL:16px;
    --FONT_SIZE_LARGE:20px;
    --FONT_SIZE_SMALL:14px;
    --FONT_SIZE_TINY:11px;

    --LINE_HEIGHT_HEADING1:32px;
    --LINE_HEIGHT_HEADING2:28px;
    --LINE_HEIGHT_HUGE:28px;
    --LINE_HEIGHT_NORMAL:20px;
    --LINE_HEIGHT_LARGE:24px;
    --LINE_HEIGHT_SMALL:17px;
    --LINE_HEIGHT_TINY:15px;

    --UNIT_01:6px;
    --UNIT_02:12px;
    --UNIT_03:18px;
    --UNIT_04:24px;
    --UNIT_05:30px;
    --UNIT_06:36px;
    --UNIT_07:42px;
    --UNIT_08:48px;
    --UNIT_09:54px;
    --UNIT_10:60px;
    --UNIT_11:66px;
    --UNIT_12:72px;
    --UNIT_13:78px;
    --UNIT_14:84px;
    --UNIT_15:90px;
    --UNIT_16:96px;
    --UNIT_17:102px;
    --UNIT_18:108px;
    --UNIT_19:114px;
    --UNIT_20:120px;
    --UNIT_21:126px;
    --UNIT_22:132px;
    --UNIT_23:138px;
    --UNIT_24:144px;
    --UNIT_25:150px;
    --UNIT_26:156px;
    --UNIT_27:162px;
    --UNIT_28:168px;
    --UNIT_29:174px;
    --UNIT_30:180px;
    --UNIT_31:186px;
    --UNIT_32:192px;
    --UNIT_33:198px;
    --UNIT_34:204px;
    --UNIT_35:210px;
    --UNIT_36:216px;
  }

  /******************************************************************************
  * Elements *
  ******************************************************************************/
  article {}
  header {height:var(--UNIT_10); padding:0 var(--UNIT_06); }
  footer {height:var(--UNIT_10); padding:0 var(--UNIT_06); }
  main {height:calc(100vh - var(--UNIT_10) - var(--UNIT_10)); padding:var(--UNIT_06);}
}


@media all and (min-width: 1024px) {

}


/******************************************************************************         
* Keyframe Animations                                                         *
******************************************************************************/
@keyframes Breathe
{
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}

@keyframes Open {
    0% {opacity: 0; transform: translateY(-10px);}
    100% {opacity: 1; transform: translateY(0px);}
}

@keyframes Close {
  0% {opacity: 1; transform: translateY(0px);}
  100% {opacity: 0;  transform: translateY(-10px);}
}


@keyframes Pulse
{
     0% {box-shadow: 0 0 0 0px rgba(50, 50, 50, 1);}
     50% {box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);}
     100% {box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);}
}




/******************************************************************************         
* Blazor                                                                      *
******************************************************************************/
#app {background-color:var(--COLOUR_WHITE); margin:0 auto;  max-width:1080px;} /*Constrain to iPad landscape for time being!!*/
#app>p {background-color:var(--COLOUR_BLACK); height:100vh; position:relative; width:100%;}
#app>p>img {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
    #app .validation-message {
        background-color: var(--COLOUR_RED);
        border-bottom-left-radius: var(--UNIT_01);
        border-bottom-right-radius: var(--UNIT_17);
        color: var(--COLOUR_WHITE);
        font-size: var(--FONT_SIZE_TINY);
        font-weight: var(--FONT_FAMILY_BOLD);
        line-height: var(--LINE_HEIGHT_TINY);
        margin-left: var(--UNIT_01);
        padding: 0 var(--UNIT_02);
        position: absolute;
        width: auto;
    }


#blazor-error-ui {background-color:lightyellow; top:400px; box-shadow:0 -1px 2px rgba(0, 0, 0, 0.2); display:none; height:var(--UNIT_08); left:0; position:absolute; width:100%; z-index:1000;}
#blazor-error-ui>p {align-items:center; display:flex; flex-direction:row; height:100%; padding:0 var(--UNIT_04); }
#blazor-error-ui>p>a {margin-right:var(--UNIT_02);}
#blazor-error-ui>p>a.dismiss {cursor:pointer; text-align:right;}
#blazor-error-ui>p>a.reload {text-decoration:underline;}
#blazor-error-ui>p>span {flex-grow:2;}


/*.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}
*/

@media all and (min-width: 600px) {
    #blazor-error-ui {
        height: var(--UNIT_17);
    }


    main.Faults .gridSection fieldset {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-gap: var(--UNIT_04);
        margin:0 auto !important;
        padding:var(--UNIT_04)!important;
    }
        main.Faults .gridSection fieldset form {
            margin: 0 auto !important;
        }

    main.Faults {
        padding: var(--UNIT_06) var(--UNIT_06) !important;
    }

}

@media all and (max-width:600px){
    .customDialog { width: 100% !important; height:100%!important; border-radius:unset!important;}
}

.customcheck { margin-left: var(--UNIT_01)!important;}

.customcheck:focus, .customcheck:checked:focus {
    box-shadow: 0 0 0 0.25rem rgb(176 198 51 / 25%)!important;
}

.customcheck:checked {
    background-color: #b0c633 !important;
    border-color:#b0c633 !important;
}

main.Faults .gridSection {
    overflow: hidden;
}

.nozzleWrapper {
    display: flex;
    justify-content:space-between;
    width: 100%;
}
.nozzleWrapper strong { margin:0 var(--UNIT_02);}

    .nozzleWrapper .token{
        width: 20px;
        height: 20px;
        border-radius: 6px;
    }

    .nozzleWrapper > div:first-child { display:flex; width:100%; align-items:center;}


/* Display and style ON/OFF Switch labels in Bootstrap */

.k-switch-label-on, .k-switch-label-off {
    display: inline!important;
}

.k-switch-label-on {
    left: 10px;
    color: #ffffff;
    text-transform: uppercase;
}

.k-switch-label-off {
    right: 10px;
    color: #666;
    text-transform: uppercase;
}

/*.k-window, .k-dialog, .k-alert {max-width:80%;}*/

.customDropDown {
    border: var(--BORDER_WIDTH_NORMAL) solid #dddddd !important;
}

    .customDropDown > span {
        font-family: var(--FONT_FAMILY_INPUT);
        font-size: var(--FONT_SIZE_NORMAL);
        line-height: var(--LINE_HEIGHT_NORMAL) !important;
        padding: var(--UNIT_03) var(--UNIT_02) var(--UNIT_01) var(--UNIT_02) !important;
    }

    .customDropDown > button {
        background-color: var(--COLOUR_GREY_DARK) !important;
        color: white !important;
        min-width: var(--UNIT_07);
    }

    .customDropDown:hover > button {
        background-color: var(--COLOUR_GREY_DARK) !important;
    }

    .customDropDown > * {
        height: var(--UNIT_08);
        background-color: white !important;
    }

    .customDropDown .k-input-value-text::before{ content:none!important;}

    .k-list-filter {
        position: relative;
    }

.k-list-filter > .k-searchbox input {
    border: none!important;
    outline: none;
    height:var(--UNIT_08);
}


.HardnessDialog { width: 90%; }

/*.k-dialog-content {
    white-space: pre-line;
}*/

@media all and (min-width:600px){

    .customDialog {
        max-height: 70vh !important;
    }
    .HardnessDialog { width:75%; max-width: 550px!important;}
}

@media all and (min-width:860px){

    main.Faults .gridSection fieldset {
        padding: var(--UNIT_06) var(--UNIT_16)!important;
    }
}

.hardnessTestGrid { display:grid; grid-template-columns: repeat(2, 1fr); grid-gap:var(--UNIT_03);}