Added files with common css styles

src/main/resources/static/css/commons/r11form.css

@@ -0,0 +1,344 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');
+@import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
+@import url('fontello.css');
+
+
+.hyperlink, .hyperlink:visited, .hyperlink:active {
+    color: rgb(47, 125, 146);
+    cursor: pointer;
+}
+
+.hyperlink:hover {
+    filter: brightness(120%);
+}
+
+.tooltip-window {
+    position: fixed;
+    right: 0;
+    background: #8ab8c938;
+    padding: 15px 30px;
+    font-family: 'Nunito', sans-serif;
+    width: 40%;
+    height: 100%;
+    overflow: scroll;
+}
+
+.tooltip-window.lite {
+    width: 30%;
+}
+
+.bordered-field {
+    border: 2px solid rgba(93, 99, 96, 0.705);
+    border-radius: 5px;
+    padding: 8px;
+    
+}
+
+.bordered-field:focus {
+    outline: none;
+    box-shadow: 0 0 5px rgba(81, 203, 238);
+    border: 2px solid #00000070;
+}
+
+.bordered-field:disabled {
+    background: #eeeeeed2;
+}
+
+.vertically-resizeable {
+    resize: vertical;
+}
+
+.container {
+    font-family: 'Nunito', sans-serif;
+    display: flex;
+    justify-content: left;
+    width: 100%;
+}
+
+.tool {
+    width: 55%;
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.tool.extended {
+    width: 65%;
+}
+
+.tool .tool-context {
+    width: 90%;
+}
+
+.tool.extended .tool-context {
+    width: 75%;
+}
+
+.tool.extended .tool-extention {
+    width: 20%;
+    padding-top: 2%;
+    display: block;
+}
+
+.tool .tool-extention {
+    display: none;
+}
+
+.deletion-button {
+    padding: 0;
+    outline: none;
+    background: none;
+    border: none;
+    font-weight: 300;
+}
+
+.deletion-button.btn-tile:hover {
+    color: #ca1111;
+}
+
+.deletion-button.btn-hashmap {
+    font-size: 16px;
+    color: #00000030;
+    margin: auto 0 auto 0;
+}
+
+.deletion-button.btn-hashmap:hover {
+    color: #ca1111;
+}
+
+.deletion-button.btn-tile {
+    width: 10%;
+    margin: 20% 0 0 0;
+    font-size: 14px;
+    color: #00000020
+}
+
+.tile {
+    width: 90%;
+    padding-top: 40%;
+    border: 1px solid gray;
+    border-radius: 3px;
+    position: relative;
+    background: #f0f0f095;
+    margin-bottom: 10px;
+}
+
+.tile:hover {
+    filter: brightness(110%);
+}
+
+.tile.active {
+    background: #00000070;
+    color: white;
+    filter: none;
+}
+
+.tile .content {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    padding: 0 2% 0 7%;
+    display: flex;
+}
+
+.text-aligned-to-right {
+    text-align: right;
+}
+
+.centered-vertically {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.display-space-between {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.content p {
+    margin: 0;
+    padding: 0;
+}
+
+
+.headline {
+    display: flex;
+    justify-content: left;
+}
+
+.version-span {
+    font-size: 13px;
+    font-weight: 400;
+    color: rgba(85,85,85,0.555);
+}
+
+.tool-window {
+    display: block;
+}
+
+.block-label {
+    display: block;
+    margin: 0 0 0 5px;
+}
+
+.tabmenu {
+    display: flex;
+    flex-direction: row;
+    text-align: center;
+    border-bottom: 1px solid rgba(185, 185, 185, 0.3);
+}
+
+.tabitem {
+    flex-grow: 1;
+    cursor: pointer;
+    padding: 5px 0;
+}
+
+.tabitem:hover {
+    font-weight: 700;
+}
+
+.tabitem.active {
+    background: rgba(33, 34, 34, 0.705);
+    color: white;
+    font-weight: 700;
+    cursor:default;
+    flex-grow: 1;
+}
+
+.action-button.active {
+    background: #3bc4f1;
+    border: 1px solid #7ed0eb;
+    cursor: pointer;
+}
+
+.action-button.active:hover {
+    filter: brightness(110%);
+}
+
+.action-button {
+    background: rgba(155, 165, 160, 0.507);
+    border:1px solid rgba(186, 197, 191, 0.507);
+    color: white;
+    padding: 10px 20px;
+    font-weight: 700;
+    margin: 3px 0;
+}
+
+.medium-input {
+    width: 50%;
+}
+
+.small-input {
+    width: 30%;
+}
+
+.large-input {
+    width: 100%;
+}
+
+.large-button {
+    width: 100%;
+}
+
+.small-vertical-margin {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.medium-vertical-margin {
+    margin-top: 30px;
+    margin-bottom: 30px;
+}
+
+.large-vertical-margin {
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+.textarea-300 {
+    height: 300px;
+}
+
+.centered-content {
+    display: flex;
+    justify-content: center;
+}
+
+.table-map {
+    width: 60%;
+}
+
+.table-map input{
+    width: 100%;
+    font-size: 16px;
+    padding: 7px;
+    border: 1px solid rgba(145, 146, 146, 0.849);
+    border-radius: 5px;
+}
+
+.table-map input.key {
+    background: #f0f0f0;
+}
+
+.table-default {
+    width: 80%;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.table-default tr {
+    background: #f0f0f02d;
+}
+
+.table-default tr.bottom-border {
+    border-bottom: 1px solid black;
+}
+
+.table-default th {
+    background: #ffffff;
+}
+
+.table-default tr.even {
+    background: #f0f0f0;
+}
+
+.tip {
+    display: none;
+}
+
+.tip.active {
+    display: block;
+}
+
+.collapsible .section-button {
+    width: 100%;
+    padding: 15px 0;
+    font-size: 18px;
+    background: #00000012;
+    cursor: pointer;
+}
+
+.collapsible .section-button:hover {
+    filter: brightness(110%); 
+}
+
+.collapsible.active .section-button {
+    background: #00000030;
+}
+
+.collapsible.active .section {
+    display: block;
+}
+
+.collapsible .section {
+    display: none;
+    background: #ffffff50;
+}
+
+.section .content {
+    padding: 15px 15px 30px 15px ;
+    text-align: justify;
+}