
/*  'pucs.css' is the base style sheet for edurange3  */
    
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext');

/* reset specific predefined styles to start with blank slate */

html, body, div, span, applet, object, iframe,
a, abbr, acronym, address, big, cite, 
del, dfn, em, img, ins, kbd, q, s, samp,
b, u, i, center,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* END STYLE RESET */


:root {
    --green-muted: #b8e0d0 ;
    --aqua-muted: #E5F1F3;
    --orange-muted: #fff0c5;
    --blue-muted: rgb(192, 221, 255);;
    --purple-muted:#c2c2ff;

    --green-light: #80eeca ;
    --orange-light: #ffedb2;
    --aqua-light: #b0e7f1;
    --blue-light: rgb(73, 188, 255);
    --purple-light: #c0b9ff; 
    
    --green-normal: #4ed281 ;
    --aqua-normal: #61d8ed;
    --orange-normal: #deb14f;
    --blue-normal: rgb(0, 109, 233);;
    --purple-normal: #5249A3; 

    --green-strong: #3fe0b8;
    --aqua-strong: #35d0e4;
    --orange-strong: #e9b036;
    --blue-strong: #0009ae;
    --purple-strong: #2e009a;
    
    --green-extreme: #00ffbf;
    --aqua-extreme: #00e1ff;
    --orange-extreme: #ffae00;
    --blue-extreme: #0009ae;
    --purple-extreme: #4c00ff;

    --green-dim: #006330;
    --aqua-dim: #006375;
    --orange-dim: #6c4a00;
    --blue-dim: rgb(0, 55, 117);
    --purple-dim: #322c71;

    --green-dark: #003218;
    --aqua-dark: #003943;
    --orange-dark: #402c00;
    --blue-dark: #0A0C31;
    --purple-dark: #161240;

    --green-deep: #00180c;
    --aqua-deep: #001d22;
    --orange-deep:#291d00;
    --blue-deep: #00022d;
    --purple-deep: #030028;

    --success: rgb(0, 255, 0);
    --warning:  rgb(255, 217, 0);
    --danger: red;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Share Tech Mono', monospace;
    min-height: 100vh;
  }

  a, a:link, a:visited, a:hover, a:active {
    color: inherit;
    text-decoration: none;
}


.pucs-text-primary{color: var(--blue-deep);}
.pucs-text-primary-invert{color: var(--blue-muted);}
.pucs-text-alt{color: var(--orange-deep);}
.pucs-text-alt-invert{color: var(--orange-muted);}
.pucs-text-danger{color: var(--danger);}
.pucs-text-warning{color: var(--warning);}
.pucs-text-success{color: var(--success);}

.pucs-background-primary{background-color: var(--blue-muted);}
.pucs-background-primary-invert{background-color: var(--blue-deep);}
.pucs-background-black{background-color: black;}
.pucs-background-alt{background-color: var(--orange-muted);}
.pucs-background-alt-invert{background-color: var(--orange-deep);}
.pucs-background-warning{background-color: var(--warning);}
.pucs-background-success{background-color: var(--green-strong);}

.pucs-fill-primary{background-color: var(--blue-normal);}
.pucs-fill-primary-invert{background-color: var(--blue-deep);}
.pucs-fill-alt{background-color: var(--orange-muted);}
.pucs-fill-alt-invert{background-color: var(--orange-deep);}
.pucs-fill-warning-invert{background-color: black;}
.pucs-fill-warning{background-color: var(--warning);}

.pucs-trim-primary{border: solid 3px var(--blue)-deep;}
.pucs-trim-primary-invert{border: solid 3px var(--blue-normal);}
.pucs-trim-alt{border: solid 3px var(--orange)-deep;}
.pucs-trim-alt-invert{border: solid 3px var(--orange-muted);}
.pucs-trim-warning-invert{border: solid 3px var(--warning);}
.pucs-trim-warning{border: solid 3px black;}

.my-table{
    border-left: 2px solid var(--blue-deep);
    border-right: 1px solid var(--blue-deep);
    border-top: 2px solid var(--blue-deep);
    border-bottom: 1px solid var(--blue-deep);
}

.pucs-table-base{
    border-left: 2px solid var(--blue-deep);
    border-right: 1px solid var(--blue-deep);
    border-top: 2px solid var(--blue-deep);
    border-bottom: 1px solid var(--blue-deep);
}

.pucs-table-row{border-bottom: 1px solid var(--blue-deep);}
.pucs-table-col{border-right: 1px solid var(--blue-deep);}
.pucs-table-cell{
    padding: 5px 15px;
}
.highlighter-green{
    color: var(--green-strong);
    font-weight: 800;
}
.highlighter-orange{
    color: var(--orange-extreme);
    font-weight: 800;
}
.highlighter-aqua{
    color: var(--aqua-extreme);
    font-weight: 800;
}
.background-darken{
    background-color: rgba(0, 0, 0, 0.5);
}
#edurange-appframe {
    background-color: rgb(7, 0, 17);
    color: var(--blue-muted);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.universal-outer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-items: center;
    justify-content: center;
    align-items: center;
    contain: content;
}

.universal-mid {
    width: 100%;
    height: 100%;
    display: flex;
    justify-items: center;
    justify-content: center;
    align-items: center;
}

.universal-inner {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    justify-items: center;
    justify-content: center;
    align-items: center;
    display: flex;
    contain: content;
}

body, html {
    font-family: 'Share Tech Mono', monospace;
}

#edurange-content {
    position: absolute;
    top: 4.8dvh;
    left: 1.6dvh;
    right: 1.6dvh;
    bottom: 3.5dvh;
}

.col-xxsmall {
    flex: 0 0 auto;
    min-width: 40px;
    max-width: 50px;
}

.col-xsmall {
    flex: 0 0 auto;
    min-width: 50px;
    max-width: 70px;
}

.col-small {
    flex: 0 0 auto;
    min-width: 70px;
    max-width: 100px;
}

.col-medium {
    flex: 0 0 auto;
    min-width: 100px;
    max-width: 150px;
}

.col-large {
    flex: 0 0 auto;
    min-width: 150px;
    max-width: 220px;
}

.col-xlarge {
    flex: 0 0 auto;
    min-width: 220px;
    max-width: 280px;
}

.col-xxlarge {
    flex: 0 0 auto;
    min-width: 280px;
    max-width: 340px;
}

.col-content {
    flex: 1;
    overflow-wrap: break-word;
    height: auto;
    width: auto;
}
.status-standby{
    color: orange;
}
.status-success{
    color: var(--success);
}
.status-neutral{
    color: var(--green-light);
}
.status-failure{
    color: red;
}
.status-disabled{
    color: grey;
}
.gap-xxsmall{
    gap: 2px;
}
.gap-xsmall{
    gap: 4px;
}
.gap-small{
    gap: 6px;
}
.gap-medium{
    gap: 8px;
}
.gap-large{
    gap: 10px;
}
.gap-xlarge{
    gap: 12px;
}
.gap-xxlarge{
    gap: 14px;
}
.basic-row{
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.red-btn{
    display: flex;

    color: rgb(97, 22, 22);
    background-color: rgb(238, 205, 205);
    border-radius: 4px;
    border: 1px solid rgb(97, 22, 22);;
}
.red-btn:hover{
    color: rgb(255, 181, 181);
    background-color: rgb(97, 22, 22);;
    border: 1px solid rgb(255, 181, 181);
}
.green-btn{
    display: flex;
    height: 100%;
    color: rgb(22, 97, 22);
    background-color: rgb(209, 246, 209);
    border-radius: 4px;
    border: 1px solid rgb(22, 97, 22);;
}
.green-btn:hover{
    color: rgb(181, 255, 181);
    background-color: rgb(22, 97, 22);;
    border: 1px solid rgb(181, 255, 181);
}
.grey-btn{
    display: flex;

    color: rgb(45, 45, 45);
    background-color: rgb(254, 254, 254);
    border-radius: 4px;
    border: 1px solid rgb(50, 50, 50);;
}
.grey-btn:hover{
    color: rgb(255, 255, 255);
    background-color: rgb(61, 61, 61);;
    border: 1px solid rgb(251, 251, 251);
}