release11-tools/Frontend/assets/css/tools/r11form.css

@import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
@import url('fontello.css');

@font-face {
    font-family: "Nunito";
    src: url('../../fonts/Nunito-VariableFont_wght.ttf') format('truetype');
}

body {
    font-weight: 300;
}

.hyperlink, .hyperlink:visited, .hyperlink:active {
    color: rgb(47, 125, 146);
    cursor: pointer;
}

.hyperlink:hover {
    filter: brightness(120%);
}

.tooltip-window {
    position: fixed;
    right: 0;
    /* filter: drop-shadow(-2px 0px 2px black); */
    background: #FFFFFF;
    padding: 15px 30px;
    font-family: 'Nunito', sans-serif;
    width: 30%;
    height: calc(100% - 25px);
    overflow: scroll;
}

.tooltip-window.lite {
    width: 30%;
}
/* .hyperlink.collapseTrigger::before{
    content: "▼";
} */

.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: 65%;
    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;
}

.tool-extention {
    opacity: 0;
    pointer-events: none;
}

.tool-extention.active {
    opacity: 100%;
    pointer-events: all;
}

.clickable-text {
    padding: 0;
    outline: none;
    background: none;
    border: none;
    font-weight: 300;
    cursor: pointer;
}

.clickable-text.highlight:hover {
    color: #3bc4f1;
}

.modification-button {
    padding: 0;
    outline: none;
    background: none;
    border: none;
    font-weight: 300;
}

.modification-button.btn-add {
    font-size: 16px;
    color: #00000030;
    margin: auto 0 auto 0;
}

.modification-button.btn-add:hover {
    color:#58ac43;
}

.modification-button.btn-tile:hover {
    color: #ca1111;
}

.modification-button.btn-hashmap {
    font-size: 16px;
    color: #00000030;
    margin: auto 0 auto 0;
}

.modification-button.btn-hashmap:hover {
    color: #ca1111;
}

.modification-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;
    cursor: default;
}

.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;
}


.float-left {
    display: flex;
    justify-content: left;
    width: 100%;
}

.version-span {
    font-size: 13px;
    font-weight: 400;
    color: rgba(85,85,85,0.555);
}

.block-display {
    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.5);
}

.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;
}

.big-font {
    font-size: 20px;
}

.action-button.active {
    background: #2A93B0;
    border: 1px solid #7ed0eb;
    cursor: pointer;
    border-radius: 5px;
}

.action-button.active:hover {
    filter: brightness(110%);
    transition-duration: 0.3s;
}

.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;
}

.quater-width {
    width: 25%;
}

.half-width {
    width: 50%;
}

.half-width.with-padding {
    width: 45%;
}

.max-width {
    width: 100%;
}

.half-width {
    width: 50%;
}

.max-width.with-padding {
    width: 94%;
}

.max-height {
    height: 100%;
}

.height-300 {
    height: 300px;
}

.max-height.with-padding {
    height: 90%;
}

.small-margins {
    margin: 3%;
}

.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;
}

.textarea-700 {
    height: 700px;
}

.centered-content {
    display: flex;
    justify-content: center;
}

.table-map {
    width: 60%;
}

.table-map input{
    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;
}

.tabcontent {
    display: none;
}

.tabcontent.active {
    display: flex;
    justify-content: center;
}

.section-button {
    width: 100%;
    padding: 15px 0;
    margin: 5px 0px;
    font-size: 18px;
    background: #D5D7E6;
    cursor: pointer;
    border-bottom: darkgray 2px solid !important;
    border-radius: 5px;
}

.section-button:hover {
    /* border-bottom: #3bc4f1 2px solid; */
    backdrop-filter: brightness(100%); 
    transition-duration: 0.3s;
}

.section-button .active {
    background: #00000030;
}

.List .collapsibleContent {
    /* display: none; */
    border-left: #bdc5c9 2px solid;
    
    /* max-height: 0px; */
    /* border-left: #ededed solid 1px; */
    overflow: hidden;
    background: #ffffff50;
}

.section{
    padding: 10px 0px 20px 0px ;
}

.content {
    padding: 0px 15px 0px 15px ;
    text-align: left;
    overflow: hidden;
    transition: max-height .2s ease-out;
    max-height: 0px;
    border-left: #c0c2c3 2px solid;
}

.collapsibleMini::before{
    content: "►";
}

.collapsibleMini.active::before{
    content: "▼";
}

.hiddable {
    display: none;
}

.hiddable.active {
    display: inherit;
}

/* In case of collision with classes that use 'active' */
.hidden {
    display: none;
}

button:hover{
    filter: brightness(110%);
}

.table-doc td, .table-doc th{
    border-spacing: 0px;
    padding: 0px 10px;
}

.table-doc td {
    background-color: rgba(155, 165, 160, 0.342);
}

.table-doc th {
    background-color: #3bc4f1;
    text-align: left;
    color: white;
}

textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

code {
    line-height: 150%;
}

h1 {
    font-weight: 400;
}

h2 {
    font-weight: 300;
}

pre {
    margin: 0px;
}

@media only screen and (max-width: 1024px) {
    .rwd-hideable {
        display: none;
    }

    .rwd-expandable {
        width: 100%;
    }
}