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

input {
    box-sizing: border-box;
}

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

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

.bordered-field {
    background-color: #FFFFFF;
    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;
}

body {
    font-family: 'Nunito', sans-serif;
}

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

.clickable-text.switch {
    font-size: 18px;
    font-weight: 300;
}

.clickable-text.switch span.toggleIndicator:before {
    content: '>';
}

.clickable-text.switch span.toggleIndicator.active:before {
    content: 'v';
}

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

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

.display-space-evenly {
    display: flex;
    justify-content: space-evenly;
}

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

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

.action-button {
    background: #CCD1CF;
    border:1px solid rgba(186, 197, 191, 0.507);
    border-radius: 5px;
    color: white;
    padding: 10px 20px;
    font-weight: 700;
    margin: 3px 0;
}

.quater-width {
    width: 25%;
}

.half-width {
    width: 50%;
}

.tree-fourth-width {
    width: 75%;
}

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

.max-width {
    width: 100%;
}

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

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


.tabcontent {
    display: none;
}

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

.hiddable {
    display: none;
}

.hiddable.active {
    display: inherit;
}

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

h1 {
    font-weight: 400;
}

h2 {
    font-weight: 400;
}

h3 {
    font-weight: 400;
}



/* TODO: Add proper class */
/* textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
} */

/* TODO: Add proper class */
/* code{
    line-height: 150%;
} */