body {
    /*margin: 0px;*/
    height: 100%;
    overflow: hidden;
    margin: auto;
/*    min-width: 340px;
    max-width: 480px;
    max-height: 720px;
    min-height: 480px;    */
    /*background-color: var(--surface-a);*/
    background-color: var(--surface-b);
    font-family: var(--font-family);
    font-weight: normal;
    font-style: 2em;
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a{
	text-decoration:none;
}
.card {
    background: var(--surface-e);
    padding: 2rem;
    box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}
.content-section.implementation {
    background-color: var(--surface-b);
    color: var(--text-color);
    margin: auto;
    min-width: 340px;
    max-width: 480px;
}

.content-section {
    padding: 2rem;
}

* {
    box-sizing: border-box;
}

div {
    display: block;
}

:root {
    --blue-50: #f4fafe;
    --blue-100: #cae6fc;
    --blue-200: #a0d2fa;
    --blue-300: #75bef8;
    --blue-400: #4baaf5;
    --blue-500: #2196f3;
    --blue-600: #1c80cf;
    --blue-700: #1769aa;
    --blue-800: #125386;
    --blue-900: #0d3c61;
    --green-50: #f6fbf6;
    --green-100: #d4ecd5;
    --green-200: #b2ddb4;
    --green-300: #90cd93;
    --green-400: #6ebe71;
    --green-500: #4caf50;
    --green-600: #419544;
    --green-700: #357b38;
    --green-800: #2a602c;
    --green-900: #1e4620;
    --yellow-50: #fffcf5;
    --yellow-100: #fef0cd;
    --yellow-200: #fde4a5;
    --yellow-300: #fdd87d;
    --yellow-400: #fccc55;
    --yellow-500: #fbc02d;
    --yellow-600: #d5a326;
    --yellow-700: #b08620;
    --yellow-800: #8a6a19;
    --yellow-900: #644d12;
    --cyan-50: #f2fcfd;
    --cyan-100: #c2eff5;
    --cyan-200: #91e2ed;
    --cyan-300: #61d5e4;
    --cyan-400: #30c9dc;
    --cyan-500: #00bcd4;
    --cyan-600: #00a0b4;
    --cyan-700: #008494;
    --cyan-800: #006775;
    --cyan-900: #004b55;
    --pink-50: #fef4f7;
    --pink-100: #fac9da;
    --pink-200: #f69ebc;
    --pink-300: #f1749e;
    --pink-400: #ed4981;
    --pink-500: #e91e63;
    --pink-600: #c61a54;
    --pink-700: #a31545;
    --pink-800: #801136;
    --pink-900: #5d0c28;
    --surface-a: #ffffff;
    --surface-b: #f4f4f4;
    --surface-c: #eaeaea;
    --surface-d: #c8c8c8;
    --surface-e: #ffffff;
    --surface-f: #ffffff;
    --text-color: #333333;
    --text-color-secondary: #848484;
    --primary-color: #007ad9;
    --primary-color-text: #ffffff;
    --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}
.field.grid, .formgrid.grid {
    margin-top: 0;
}

.field {
    margin-bottom: 1rem;
}
.grid {
    /*display: flex;*/
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
    margin-top: -0.5rem;
}
.col {
    flex-grow: 1;
    flex-basis: 0;
    padding: 0.5rem;
}
.subImage {
	top: 0px;
	float: right;
}
.subImage > image {
	opacity: 20%;width: 20%;
}
@media screen and (max-width : 720px) {
  #CuerpoLogin {
     font-size: 18px;
  }
  #CuerpoLogin > div {
     padding: 4px;      
  }
    .smalltext{
     padding-top: 2px;
     font-size: 12px;
    }
}
body .ui-widget {    
    font-size: 1.8rem;
}