@charset "UTF-8";

: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);}

#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%;}

.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: rgb(var(--mdb-primary-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);
    height: 100%;
    margin:0px;
    overflow-x:hidden;
    overflow-y:auto;}
.copyright{
    font-size: 60%;
    height:30px;}
.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);}
.no-left-right-padding {
    padding-left : unset;
    padding-right: unset; }
.padding_left_2op100_TPS{
    padding-left: 2%;}
.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;}
.line-through{
    text-decoration-line: line-through
}
.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;}

@media (min-width: 1200px){
        .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
            max-height: 700px;
            max-width : 1200px;
            min-width : 1200px;
            min-height: 700px;
            z-index   : 10;
            /*border    : 1px;
            border-color: yellow;
            border-style: solid;*/
            }
        .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;
            }}
@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;
        /*border    : 1px;
        border-color: yellow;
        border-style: solid;*/
        }
    .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;
        }}