@charset "UTF-8";
/* global Css variables */
:root {
    --editor-bg                     : var(--tps-color2);
    --editor-color                  : black;
    --editor-font-size              : 1.2rem;
    --kiosk-background-color        : #c1b6b6;
    --kiosk-color                   : #060606;
    --kiosk-table-height            : 1440px;
    --mdb-black                     : var(--tps-black);
    --mdb-black-rgb                 : var(--tps-black_rgb);
    --mdb-blue                      : #2196f3;
    --mdb-body-bg                   : var(--tps-background);
    --mdb-body-bg-rgb               : var(--tps-background_rgb);
    --mdb-body-color                : var(--tps-black);
    --mdb-body-color-rgb            : var(--tps-black_rgb);
    --mdb-body-font-family          : var(--mdb-font-roboto);
    --mdb-body-font-size            : 1rem;
    --mdb-body-font-weight          : 400;
    --mdb-body-line-height          : 1.6;
    --mdb-border-color              : white ;
    --mdb-border-color-translucent  : rgba(0,0,0,0.175);
    --mdb-border-radius             : 0.25rem;
    --mdb-border-radius-lg          : 0.5rem;
    --mdb-border-radius-sm          : 0.25rem;
    --mdb-border-radius-xl          : 1rem;
    --mdb-border-radius-2xl         : 2rem;
    --mdb-border-radius-pill        : 50rem;
    --mdb-border-style              : solid;
    --mdb-border-width              : 1px;
    --mdb-code-color                : #e91e63;
    --mdb-cyan                      : #00bcd4;
    --mdb-danger                    : #dc4c64;
    --mdb-danger-rgb                : 220,76,100;    
    --mdb-dark                      : #332d2d;
    --mdb-dark-rgb                  : 51,45,45;
    --mdb-font-monospace            : SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --mdb-font-roboto               : Arial,sans-serif,system-ui;
    --mdb-font-sans-serif           : system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --mdb-gradient                  : linear-gradient(180deg,hsla(0,0%,100%,0.15),hsla(0,0%,100%,0));
    --mdb-gray                      : #757575;
    --mdb-gray-50                   : #fbfbfb;
    --mdb-gray-100                  : #f5f5f5;
    --mdb-gray-200                  : #eee;
    --mdb-gray-300                  : #e0e0e0;
    --mdb-gray-400                  : #bdbdbd;
    --mdb-gray-500                  : #9e9e9e;
    --mdb-gray-600                  : #757575;
    --mdb-gray-700                  : #616161;
    --mdb-gray-800                  : #4f4f4f;
    --mdb-gray-900                  : #262626;
    --mdb-gray-dark                 : #4f4f4f;
    --mdb-green                     : #4caf50;
    --mdb-highlight-bg              : #fff9c4;
    --mdb-indigo                    : #3f51b5;
    --mdb-info                      : #54b4d3;
    --mdb-info-rgb                  : 84,180,211;
    --mdb-light                     : var(--tps-color2);
    --mdb-light-rgb                 : var(--tps-color2_rgb);
    --mdb-link-color                : #3b71ca;
    --mdb-link-hover-color          : #386bc0;
    --mdb-orange                    : #ff9800;
    --mdb-pink                      : #e91e63;
    --mdb-primary                   : var(--tps-color2);
    --mdb-primary-rgb               : var(--tps-color2_rgb)  ;
    --mdb-primary-color             : var(--tps-black);
    --mdb-primary-color-rgb         : var(--tps-black_rgb);
    --mdb-purple                    : #9c27b0;
    --mdb-red                       : #f44336;
    --mdb-secondary                 : var(--tps-color3);
    --mdb-secondary-rgb             : var(--tps-color3_rgb);
    --mdb-success                   : var(--tps-color4);
    --mdb-success-rgb               : var(--tps-color34_rgb);
    --mdb-teal                      : #009688;
    --mdb-warning                   : #ffb350;
    --mdb-warning-rgb               : 255, 179, 80;
    --mdb-white                     : var(--tps-white);
    --mdb-white-rgb                 : var(--tps-white_rgb);
    --mdb-yellow                    : #ffeb3b;
    --tps-black                     : #000501;
    --tps-black_rgb                 : rgb(0, 5, 1);
    --tps-background                : #73AB84;              /*cambridge-blue*/
    --tps-background_rgb            : rgb(115, 171, 132);   /*cambridge-blue*/
    --tps-color2                    : #99D19C;              /*celadon*/
    --tps-color2_rgb                : rgb(153, 209, 156);   /*celadon*/
    --tps-color3                    : #79C7C5;              /*--tiffany-blue*/
    --tps-color3_rgb                : rgb(121, 199, 197);   /*--tiffany-blue*/
    --tps-color4                    : #ADE1E5;              /*--non-photo-blue*/
    --tps-color4_rgb                : rgb(173, 225, 229);   /*--non-photo-blue*/
    --tps-gray                      : #e0e0e0;
    --tps-white                     : #fff;
    --tps-white_rgb                 : rgb(255,255,255);}
/* id styling */
#header-intro{
	margin-top: 10px;}
#header-logo{
	margin-top: 10px;}
#keyboard {
	margin: 0;
	margin-top: 30px;
	padding: 0;
	list-style: none;
	width: 92%;}
#keyboard .capslock {width: 80px;}
#keyboard .left-shift {width: 95px;}
#keyboard .letter{
	background-color:var(--kiosk-background-color);
	color: var(--kiosk-color);}
#keyboard .letter2{
	clear: left;
	background-color:var(--kiosk-background-color);
	color: var(--kiosk-color);}
#keyboard li {
	float: left;
	margin: 0 2% 2% 0;
	width: 20%;
	height: 80px;
	line-height: 80px;
	text-align: center;
	border: 1px solid #f9f9f9;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	display:inline-block;
	border:solid 1px rgba(0, 0, 0, 0.4);
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-border-radius:5px;
	-ms-border-radius:5px;
	-khtml-border-radius:5px;
	border-radius:5px;
	overflow:hidden;
	cursor:pointer;
	color:#666;
	position:relative;
	text-align:center;
	font-size: 18px;}
#keyboard li:hover {
	position: relative;
	top: 1px;
	left: 1px;
	border-color: #e5e5e5;
	cursor: pointer;}
#keyboard .return {width: 50px;}
#keyboard .right-shift {width: 84px;}
#keyboard .space {
	clear: left;
	width: 87.2%;
	background-position:center;
	background-repeat:no-repeat;
	background-color: #FC3;
	background-image: none;}		
#keyboard .tab, #keyboard .delete {
	clear: left;
	background-color: #FC3;
	background-image: none;
	width: 20%;}
#keyboard .tab, #keyboard .deleteall {
	background-color: #FC3;
	background-image: none;
	width: 66%;}
#TableWrapper3{
	height:var(--kiosk-table-height);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 28px;
	line-height: 53px;
	margin-top: 25px;}
#write {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
    border-radius:5px;
	border: 1px solid var(--kiosk-color);
	color: var(--kiosk-color);
	cursor:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 32px;
	height: 54px;
	line-height: 53px;
	margin-bottom: 20px;
	margin-left: 0;
	margin-right: 0;
	margin-top: 15px;
	overflow: hidden;
	padding: 5px;
	width: 81%;}
/*class styling */
.a_TPS{
    color:rgb(var(--mdb-black-rgb));}
.align-right {
    float: right;
    padding-right: 3px;}

.bg_card {
    background-color: var(--tps-color2_rgb) ;
    color: rgb(var(--mdb-primary-color));
    }
.bg-info {
    opacity: 1;
    background-color: rgb(var(--mdb-info-rgb))!important}
.bg-light_TPS {
    background-color: var(--mdb-light-rgb);
    color:rgb(var(--mdb-black-rgb));}
.bg-primary_TPS {
    background-color: var(--tps-background_rgb);
    color:rgb(var(--mdb-primary-color-rgb));}
.bg-light_navbar {
    padding-left: 0.5%;
    padding-right: 0.5%;
    background-color: var(--tps-background)!important;
    color:var(--mdb-black);
    opacity: 0.8;
    z-index: 20;}
.body {
    background-color: var(--mdb-body-bg);
    color:var(--mdb-body-color);}
.border-color {
        border-color:var(--tps-black);}
/*
        .card{
    min-height:100%;
    margin-left: 8px;}
.card-body{
    padding-top: 0.5vh;
    background: var(--tps-color2_rgb);
    min-height: 40%;
    max-height: 80% ;
    overflow-y: auto;
    text-align: center}
.card-button{
    font-size:1.2rem;
    padding: unset;
    margin-top: 1%;
    margin-bottom: 1%;
    margin-left: 3%;
    margin-right: 3%;}
.card-footer{
    background: var(--tps-color2_rgb);
    max-height: 20% !important;
    min-height: 20%;
    padding-bottom:unset;
    padding-left: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    padding-right: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
    text-align: center !important;}
.card-form{
    padding: unset;
    padding-left:40px;
    margin-top: 1%;
    margin-bottom: 1%;
    margin-left: 3%;
    margin-right: 3%;}
.card-header{
    background: var(--tps-color2_rgb);
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
    padding:unset;
    padding-top:3px;
    padding-bottom: 3px;
    text-align: center !important;}
.card-small{
    font-size: 12px;}
.card-switch{
    padding: unset;
    margin-top: 1%;
    margin-bottom: 1%;
    margin-left: 3%;
    margin-right: 3%;}
.card-text{
    color:black;}
.container_TPS{
    display: flex;
    flex-direction: column;
    min-height: 100vh;}
*/
.copyright{
    font-size: 60%;
    height:30px;
    padding-right: 20px;}
.editorjs{
    height:unset;}
.input_3_TPS{
    font-size: 0.50rem;
    width: 31%;
    padding-left: 1%;
    padding-right: 1%;}
.kiosk {
    background-color:var(--kiosk-background-color);}
.line-through{
        text-decoration-line: line-through}
.main-TPS{
    min-height: 75%;
    max-width:100%;
    overflow: auto;}
.marginTopBottom10{
    margin-top: 10px;
    margin-bottom:10px;}
.p_TPS {
    padding-left : 2px;
    padding-right: 2px; 
    margin-left:unset;
    margin-right:unset;
    margin-bottom: 0.6rem; }
.padding_left_2op100_TPS{
    padding-left: 2%;}
.padding_top_2op100{
    padding-top: 2%;}
/*
    .row_card{
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    margin-top: calc(-1* var(--bs-gutter-y));
    margin-left: unset;
    margin-right: unset;
    max-height:33% ;
    min-height:33% !important;
    max-width: 100%;
    padding-left : unset;
    padding-right: unset;
}
.row_card>* {
    flex:0 0 auto;
    max-height:33% ;
    min-height:33% !important;}
    */
.screenSaver_TPS{
    background-color:var(--tps-white);
    margin:0px;
    overflow-y:auto;
    overflow-x:hidden;
    height:100%;
    width:100%;
    opacity: 0.7;
    position:fixed;
    z-index:9999;}
.screensaver_iframe_TPS{
    display:inherit;
    opacity: 0.7;
    position:fixed; 
    top:0; 
    left:0; 
    bottom:0; 
    right:0; 
    width:100%; 
    height:100%; 
    border:none; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
    z-index:9999;}
.small-font{
        font-size : 0.8rem;}
.table {
    --mdb-table-divider-color: rgba(18, 3, 3, 0.406);}
.table th {
    padding-left: 2px;
    padding-right: 2px;}
.table th button{
    padding-left: 2px;
    padding-right: 2px;}
.transparent{
    background-color:transparent;}
.TPS_py{
    padding-top   : 3% !important;
    padding-bottom: 3% !important;
    margin-left   : 3% !important;}
/* media styling */
@media (min-width: 768px){
    .small-font{
        font-size : 0.5rem;}}
@media (min-width: 1200px){
        .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
            /*max-height: 700px;*/
            max-width : 1200px;
            min-width : 1200px;
            z-index   : 10;}
        .h1, h1{
            font-size: 2.3rem;
            font-weight: 575;
            text-decoration: underline;}
        .h2, h2{
            font-size: 2.3rem;
            font-weight: 575;
            text-decoration: unset;}
        .h3, h3{
            font-size: 2.0rem;
            font-weight: 575;
            text-decoration: unset;}
        .h4, h4 {
            font-size: 1.5rem;
            font-weight: 550;
            text-decoration: underline;}
        .h5, h5{
            font-size: 1.5rem;
            font-weight: 550;
            text-decoration: unset;}
        .h6, h6{
            font-size: 1.2rem;
            font-weight: 500;
            text-decoration: unset;}
        .small-font{
                font-size : 0.8rem;}}
@media (min-width: 1920px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        /*max-height: 1080px;*/
        max-width : 1920px;
        min-width : 1920px;
        min-height: 1080px;
        z-index   : 10;}
    .h1, h1{
        font-size: 2.3rem;
        font-weight: 575;
        text-decoration: underline;}
    .h2, h2{
        font-size: 2.3rem;
        font-weight: 575;
        text-decoration: unset;}
    .h3, h3{
        font-size: 2.0rem;
        font-weight: 575;
        text-decoration: unset;}
    .h4, h4 {
        font-size: 1.5rem;
        font-weight: 550;
        text-decoration: underline;}
    .h5, h5{
        font-size: 1.5rem;
        font-weight: 550;
        text-decoration: unset;}
    .h6, h6{
        font-size: 1.2rem;
        font-weight: 500;
        text-decoration: unset;}
    .small-font{
            font-size : 0.8rem;}}