.form-errors {
    color: red;
    font-weight: bold;
}

footer {
    margin-top: 30px;
    color: rgb(190, 190, 190);
    font-size: 8pt;
}

.hr_style_gradient {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 40%, rgba(0, 0, 0, 0.75) 60%, rgba(0, 0, 0, 0));
}

.opacity30 {
    opacity:0.3;
}

.entity {
    padding: 5px;
    margin-bottom: 5px;
    background-color:hsl(10, 10%, 95%);
    border-radius:4px;
    border: solid 2px;
    border-color:hsl(10, 0%, 80%);
}

.entity pre {
    font-size: 8pt;
}

.entity img {
    display: block;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;

    box-shadow:4px -3px 17px 7px rgba(0,0,0,0.12);
    border-radius:2%;
}

/*style the result of check-solution (success or fail)*/
.result {

    font-size: 10pt;
    padding-left:3px;
    padding-right:3px;
    background-color:hsl(10, 10%, 90%);

    border-radius:2px;
    border: solid 1px;
    border-color:rgb(77, 62, 62);
}

.inaccurate {
    color:hsl(34, 90%, 45%);
}

.unknown {
    color:hsl(0, 0%, 57%);
}

.success {
    color:hsl(120, 60%, 30%);
}

.fail {
    color:hsl(0, 90%, 45%);
}


.errorbox {
    background-color:hsl(0, 90%, 75%);
    padding:5px
}


.debug_output {
    padding: 5px;
    font-size: 8pt;
    font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
    background-color: hsl(0, 15%, 95%);;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.footer_link_menu {

    margin-top: 2em;
    float:right;
    position:relative;
    bottom: 5px;
}

.styled_form {
    /* Center the form on the page */
    margin: 0 auto;
    width: 100%;
    /* Form outline */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 4px;

    display: grid;
    grid-template-columns: 1fr 4fr;
    column-gap: 20px;
}

.styled_form label {
    grid-column: 1;
    justify-self: right;
}

.styled_form input, textarea {
    grid-column: 2;
}

.styled_form textarea {
    resize: none;
    height: 12em;
}

.styled_form button {
    grid-column: 2;
    width: min-content;
    justify-self: right;
    margin-top: 20px;
    padding-left: 50px;
    padding-right: 50px;
}

.layout_horizontal {
    display: flex;
    align-items: center;
}

.layout_horizontal > * {
    flex: 1 1 auto;
}

.mr_description {
    display: block;
    width: 90%;
    resize: none;
    height: 10em;
    margin: auto;
}

.mr_info {
    border: 1px solid #CCC;
    border-radius: 4px;
    padding: 5px;
}

.mr_info > * {
    margin-top: 10px;
    margin-bottom: 10px;
}

#btn_delete_mr {
    color: red;
}

form ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

form li + li {
    margin-top: 1em;
}

.button {
/* Align buttons with the text fields */
padding-left: 90px; /* same size as the label elements */
}


.pseudocol {
    display: inline-block;

}
.pseudocol button {
    width: 100%;
    margin-left:0;
    margin-right:0;
    padding-left:0;
    padding-right:0;
    display:block;
    text-align:center;

}

.w69 {
    width: 69%;
}

.w30 {
    width: 30%;
}

.styled_form button {
/* This extra margin represent roughly the same space as the space
    between the labels and their text fields */
margin-left: .5em;
}

input {
    display:none;
}

span#content {
    display:none;
}
input#show:checked ~ span#content {
    display:block;
}

input#hide:checked ~ span#content {
    display:none;
}

.fake_button{
    color:hsl(236, 100%, 50%);
}

.javascript_prompt{
    font-size: large;
    color:hsl(0, 98%, 35%);
}

.collapsible {
    background-color: #FFF;
    color: black;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: outset;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.active, .collapsible:hover {
    background-color: #aaa;
}

.content {
    display: block;
}

#navbar {
    overflow: hidden;
    background-color: #FFF;
    border: solid;
    color: black;
    border-width: 2px;
    position: sticky;
    top: 0;
}

#navbar a {
    float: left;
    font-size: 16px;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#navbar a:hover {
    background-color: #aaa;
}

.last_passing {
    padding-left: 1cm;
}

.notebook_html embed {
    width:100%;
    height:500pt;
}
.notebook_html {
    width:100%;
    height: 500pt;
}


/* pyirk autocomplete */
.autoComplete_wrapper input {
    height: 4rem;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 2rem 0 3.2rem;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-size: 2rem;
    text-overflow: ellipsis;
    color: rgba(255,122,122,.3);
    outline: 0;
    border-radius: 10rem;
    border: .05rem solid rgba(255,122,122,.5);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAB3UlEQVRIS+WWQVbCMBCGkw1svQF6AssJ1BvoCcQTWJbtqhtgCZxAPIF4g3oCOQLcwC2r+E9Ia9OSZBD74D3zXhdt0/nmn5nORIoTLXkirjhvsErTASJzgysyFwVqpS8pl3I0ej80cl7FKknuYXAK45dew0qt8X4oJ5Ml1wEnGCpnMPJsDG2EUjM4kMvxmJQKvI/w7BbPYtz29D7sAXzIge8FW1ClSAk54VyITAwHpmbDHM6RM97VAOvwSvlmvuoXCkOGdASE+DTKH0Jhb4LTlPLVQ9iCSuvOlMqRc4CvfM5aYFO9L/hgA6X+gnJYhY3Cca9qG5wkC4T58TdqCz8qql+heuBSXQfTf3mNzezcNsL9k+sVotbngdNU0UZ8cFRHQ7iDduo5Dn4Qqm56fzg4Sf4y1N4CPZvi2jUPxn/oCnn5OwnxhFpZsIrL5Of4BsLoA+fTMo3q6mSKEbK5r5qtIUEjstvtyyz7YrfM6sbahFoj9+TMhzUW6XCgFE2mor1udJ+nA0Knc+eDhw8CO+Bu3roXzesYSnOx3eam+3nhrA5lTiJ0GomMUXKBYAShw0FZvSrLLjhwFpjTraw0MeCtgHWBBuCtgffBq9OqVbAFxw3mMx2P9God7KqP/wf+BhqQES7IkWzfAAAAAElFTkSuQmCC);
    background-size: 1.4rem;
    background-position: left 1.05rem top .8rem;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-color: #fff;
    transition: all .4s ease;
    -webkit-transition: all -webkit-transform .4s ease;
}


.autoComplete_wrapper input:hover, .autoComplete_wrapper input:focus {
    color: rgba(255,122,122,.8);
    transition: all .3s ease;
}


.autoComplete_wrapper {
    display: block;
    position: relative;
}
.autoComplete_wrapper > ul {
    position: absolute;
    padding-left: 10px;
    max-height: 40vh;
    overflow-y: auto;
    box-sizing: border-box;
    left: 0;
    right: 0;
    margin: .5rem 0 0 0;
    padding: 0 1rem 0 1rem;
    z-index: 1;
    list-style: none;
    border-radius: .6rem;
    background-color: #fff;
    border: 1px solid rgba(33,33,33,.07);
    box-shadow: 0 3px 6px rgba(149,157,165,.15);
    outline: 0;
    transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -webkit-transition: opacity .15s ease-in-out;

    transition: all .3s ease;

    width: 80%;
    margin: auto;
}

.autoComplete_wrapper > ul > p {

    padding: 0.3rem;

}
.autoComplete_wrapper > ul > li {

    margin: 0.0rem 0 0 0;
    padding: 0.3rem;
    border-radius: .2rem;
}

.autoComplete_wrapper > ul > li:hover {

    /*https://www.computerhope.com/htmcolor.htm#color-codes*/
    background-color: #736AFF10;

}

.ac_input_wrapper {

    width: 80%;
    margin-left:auto;
    margin-right:auto;

}

.autoComplete_wrapper {

    margin-top: 10px;

}

li.selected {
    background-color: linen !important;
    text-decoration: underline;
}

li.copied {
    background: linen !important;
    color: maroon !important;
    text-decoration: italic;
}

.res_table {
    border-bottom: 1px Solid Black;
    border-right: 1px Solid Black;
    border-collapse : collapse;
    padding: 5px;
}
.res_table td, .res_table th {
    border-left: 1px Solid Black;
    border-top: 1px Solid Black;
    border-bottom:none;
    border-right:none;
    max-width: 400px;
    word-wrap: break-word;
    padding: 5px;
    background-clip: padding-box; /* fixes issue with disappearing borders due to background color*/
}
/* .res_table thead {
    position: sticky;
    top: 54;
    z-index: 2;
} */
.res_table  th,
.res_table  tr td {
    background-color: #FFF;
    border: 1px solid black;
    padding: 5px;
}