/* NO MOBILE SUPPORT /////////////////////////////////////////////////////////////////////////////////// */
.nomobile_page {padding: 150px; box-sizing: border-box}
.nomobile_content {width: 80%; margin: auto auto; text-align: center; padding: 50px; border: 3px solid #db4437; box-sizing: border-box}
.nomobile_img {display: block; margin-left: auto; margin-right: auto; margin-bottom: 25px}
.nomobile_title {display: block; margin-bottom: 15px; color: #db4437; font: bold 2em Arial, sans-serif}
.nomobile_text {display: block; color: #000000; font: normal 1.5em Arial, sans-serif}


/* DATABASE //////////////////////////////////////////////////////////////////////////////////////////// */
body {width: 100%; padding: 0; margin: 0; font-family: Arial, sans-serif}
#page_wrapper {width: 100%; padding: 0; margin: 0}
#header_wrapper {width: 100%; height: 180px; padding: 0; margin: 0; background-color: #0f6baa; background-color: #3966aa}
.header_table {width: 100%; height: 200px}
.header_logo {text-align: left; padding-left: 45px}
.header_spacer {width: 100%}
.header_logofirma {text-align: right; padding-right: 39px; vertical-align: middle}
#header_bg {width: 100%; height: 11px; padding: 0; margin: 0; background: url(images/header_bg.png) repeat-x top; background-color: #1592e5}
#menu_wrapper {width: 100%; text-align: center; padding: 17px 0 17px 0; margin: 0; background-color: #1592e5; color: #0f6baa; color: #3966aa; font: 1.25em Arial, sans-serif}
#menu_wrapper a {text-decoration: none}
#menu_wrapper a:link {color: #ffffff; padding: 5px} 
#menu_wrapper a:visited {color: #ffffff} 
#menu_wrapper a:hover {text-decoration: none; background-color: #fed602; color: #000000; padding: 5px; border-radius: 5px}
#menu_wrapper a:active {color: #000000}
#menu_wrapper .menu_item_on {text-decoration: none; background-color: #ffbb00; color: #000000; padding: 5px; border-radius: 5px; cursor: default}
.warning {width: 100%}
#contents_wrapper {width: 100%}
#contents_title {width: 100%; text-align: left; padding: 8px 0 8px 50px; margin: 0; background-color: #69d2ff; box-sizing: border-box}
#contents_title .text {color: #0f6baa; font: bold 1.25em Arial, sans-serif; padding-left: 10px}
#contents {width: 100%; text-align: left; padding: 50px; margin: 0; background-color: #f3f3f3; box-sizing: border-box}
#contents .marked_text {font: 1em bold Arial; color: #000000}
#contents .text {font: 1em normal Arial; color: #000000}
#contents_bottom {width: 100%; height: 10px; padding: 0; margin: 0; background-color: #69d2ff}
#footer_wrapper {width: 100%}
#footer {width: 100%; text-align: left; padding: 20px 50px 20px 50px; margin-bottom: 15px; background-color: #37afe3; color: #000000; font: 0.85em normal Arial, sans-serif; box-sizing: border-box}
#footer .marked {font-weight: bold}
#footer .date {color: #fed602; color: #ffff00}
#footer a {text-decoration: none}
#footer a:link {color: #000000} 
#footer a:visited {color: #000000} 
#footer a:hover {text-decoration: underline; color: #ffff00}
#footer a:active {color: #ffff00}
#logo {width: 100%; padding: 0 50px 0 50px; margin-bottom: 15px; box-sizing: border-box}
#logo img {vertical-align: middle; margin-right: 20px}


/* CONTENTS - HOMEPAGE ///////////////////////////////////////////////////////////////////////////////// */
.icon_query {padding: 0; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #0f6baa; --svg: url('https://api.iconify.design/material-symbols/database-outline.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
#contents #intro_text {text-align: left; font: normal 0.9em Arial, sans-serif; padding: 0; margin: 0 0 50px 0; box-sizing: border-box}
#contents #intro_text .species {font-style: italic}
#queryForm_wrapper {width: 100%; text-align: left; padding: 0; margin: 0; _border: #000000 1px solid; box-sizing: border-box}
#queryForm_wrapper #message {width: 50%; text-align: justify; font: normal 0.9em Arial, sans-serif; padding: 0; margin-top: 50px; box-sizing: border-box}
.queryTable {width: 100%; margin-bottom: 30px}
.queryTable_marked {font: bold 0.9em Arial, sans-serif; padding-bottom: 13px}
.queryTable_radio {width: 1%; vertical-align: middle; padding-right: 0; padding-left: 0}
.queryTable_radio input[type="radio"] {margin-right: 5px; padding-top: 2px; cursor: pointer}
.queryTable_radio_text {width: 99%; font: 0.9em normal Arial, sans-serif; padding-top: 1px}
.queryTable_radio_note {color: #0075ff; color: #888888; font: 0.9em normal Arial, sans-serif; padding-left: 10px}
/* search box old style*/
/* .querySearch {background-color: #eaf8fc; background-image: linear-gradient(#dddddd, #aaaaaa); border-radius: 35px; border-width: 1px; border-style: solid; border-color: #eeeeee; width: 500px; height: 35px; padding: 10px; margin: 20px 0 25px 0; overflow: hidden}
.textInput {padding: 5px 29px; height: 23px; width: 340px; border: 1px solid #a4c3ca; font: normal 13px Arial; background: #FFFFFF; border-radius: 50px 3px 3px 50px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); float: left; outline: none; background-image: url(images/icon_search.png); background-repeat: no-repeat; background-position: left} */
/* .submitButton {background-color: #6cbb6b; background-image: linear-gradient(#90deff, #37c2fc); border-radius: 3px 50px 50px 3px; border-width: 1px; border-style: solid; border-color: #37c2fc; box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; height: 35px; margin: 0 0 0 10px; padding: 0; width: 90px; cursor: pointer; font: bold 14px Arial, Helvetica; color: #056188; text-shadow: 0 1px 0 rgba(255,255,255,0.5); outline: none}
.submitButton {background-color: #6cbb6b; background-image: linear-gradient(#ffe559, #fed602); border-radius: 3px 50px 50px 3px; border-width: 1px; border-style: solid; border-color: #fed602; box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; height: 35px; margin: 0 0 0 10px; padding: 0; width: 90px; cursor: pointer; font: bold 14px Arial, Helvetica; color: #000000; text-shadow: 0 1px 0 rgba(255,255,255,0.5); outline: none} */
/* search box new style*/
.querySearch input[type="text"] {width: 450px; height: 30px; font: normal 0.9em Arial, sans-serif; box-sizing: border-box; background-image: url(images/icon_search.png); background-repeat: no-repeat; background-position: left; padding-left: 30px; border: 1px solid #000000}
.querySearch input[type="text"]:focus {border: 2px solid #1592e5; border-radius: 3px; background-color: #d9eaf7; color: #0f6baa; outline-color: #1592e5}
.querySearch input[type="submit"] {height: 30px; font: bold 0.9em Arial, sans-serif; text-transform: uppercase; outline: 0; background-color: #fed602; padding: 0 20px 0 20px; margin: 0; border: 0; color: #000000; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer}
.querySearch input[type="submit"]:hover,#loginForm input[type="submit"]:active,#loginForm input[type="submit"]:focus {background-color: #ffbb00}
#logout_info_wrapper {width: 100%}
.logout_info_text {width: 100%; text-align: right; padding: 5px 50px 5px 50px; margin: 0; background-color: #f8fcb1; color: #000000; font: normal 0.9em Courier, monospace; box-sizing: border-box}


/* CONTENTS - QUERY RESULT ///////////////////////////////////////////////////////////////////////////// */
.icon_query_result {padding: 0; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #0f6baa; --svg: url('https://api.iconify.design/material-symbols/list-alt-outline-rounded.svg'); -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
#queryResult_wrapper {width: 100%; text-align: left; padding: 0; margin: 0; _border: #000000 1px solid; box-sizing: border-box}
.search_result {width: 50%; display: block; padding: 10px; margin: 0 0 50px 0; text-align: left; background-color: #128976; background-color: #17b399; color: #ffffff; font: 1em Arial, sans-serif; box-sizing: border-box}
.search_noresult {width: 50%; display: block; padding: 10px; margin: 0; text-align: left; background-color: #f25a59; color: #ffffff; font: 1em Arial, sans-serif; box-sizing: border-box}
.result_table_wrapper {width: 60%; _border: #ff0000 1px solid; box-sizing: border-box}
.result_table {width: 100%; _border: 2px solid #69d2ff}
.result_title {padding: 10px; margin: 0 0 20px 0; text-align: left; background-color: #69d2ff; color: #000000; font: bold 1em Arial, sans-serif}
.result_title .search_param {padding: 3px 5px 3px 5px; background-color: #baeaff; border-radius: 3px}
.result_title .search_query {padding: 3px 5px 3px 5px; background-color: #baeaff; border-radius: 3px}
.result_text {padding-left: 10px; color: #000000; font: normal 0.9em Arial, sans-serif}
.result_item {width: 20%; padding-left: 10px; vertical-align: middle; color: #000000; font: bold 0.9em Arial, sans-serif}
.result_checkbox {width: 2%; padding-right: 5px; vertical-align: middle}
.result_data {width: 78%; vertical-align: middle; color: #000000; font: normal 0.9em Arial, sans-serif}
.result_data .species {font-style: italic}
#queryResult_wrapper input[type="checkbox"] {cursor: pointer}
.result_data a {text-decoration: none}
.result_data a:link {color: #000000; padding-left: 10px; padding-right: 10px}
.result_data a:visited {color: #000000} 
.result_data a:hover {text-decoration: none; background-color: #fed602; color: #000000; padding-left: 10px; padding-right: 10px; border-radius: 3px}
.result_data a:active {color: #000000}
.result_spacer1 {height: 10px}
.result_spacer2 {height: 20px}
#queryResult_wrapper input[type="submit"] {font: bold 0.9em Arial, sans-serif; text-transform: uppercase; outline: 0; background-color: #fed602; border: 0; padding: 15px; color: #000000; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer}
#queryResult_wrapper input[type="submit"]:hover,#loginForm input[type="submit"]:active,#loginForm input[type="submit"]:focus {background-color: #ffbb00}


/* CONTENTS - EXPLORE ENTRY //////////////////////////////////////////////////////////////////////////// */
.icon_explore_entry {padding: 0; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #0f6baa; --svg: url('https://api.iconify.design/material-symbols/article-outline-rounded.svg'); -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
.icon_fs_functional {padding: 0 15px 0 0; vertical-align: middle; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #00bb00; --svg: url('https://api.iconify.design/material-symbols/bookmark-check-rounded.svg'); -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
.icon_fs_warning {padding: 0 15px 0 0; vertical-align: middle; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #ffa800; --svg: url('https://api.iconify.design/material-symbols/warning-rounded.svg'); -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
.icon_fs_unknown {padding: 0 15px 0 0; vertical-align: middle; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #777777; --svg: url('https://api.iconify.design/material-symbols/unknown-document-rounded.svg'); -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
#exploreEntry_wrapper {width: 100%; text-align: left; padding: 0; margin: 0; _border: #000000 1px solid; box-sizing: border-box}
.report_table_wrapper {width: 85%; _border: #ff0000 1px solid; box-sizing: border-box}
.report_table {width: 100%; _border: 2px solid #69d2ff}
.report_title {padding: 10px; margin: 0 0 20px 0; text-align: left; background-color: #69d2ff; color: #000000; font: bold 1em Arial, sans-serif}
.report_section {padding: 10px; margin: 0 0 20px 0; text-align: left; background-color: #bae8fc; color: #000000; font: bold 1em Arial, sans-serif}
.report_item {width: 30%; padding: 5px 5px 5px 10px; font: bold 0.9em Arial, sans-serif}
.report_item_textarea {width: 30%; padding: 3px 0 0 10px; vertical-align: top; font: bold 0.9em Arial, sans-serif}
.report_checkbox {width: 2%; padding: 5px 5px 5px 0; vertical-align: middle}
.report_data {width: 68%; padding: 5px 5px 5px 0; vertical-align: middle; font: normal 0.9em Arial, sans-serif}
.report_data_fs_functional {width: 68%; padding: 5px 5px 5px 0; vertical-align: middle; font: normal 0.9em Arial, sans-serif; background-color: #aaffaa}
.report_data_fs_warning {width: 68%; padding: 5px 5px 5px 0; vertical-align: middle; font: normal 0.9em Arial, sans-serif; background-color: #ffffaa}
.report_data_fs_unknown {width: 68%; padding: 5px 5px 5px 0; vertical-align: middle; font: normal 0.9em Arial, sans-serif; background-color: #dddddd}
.report_data_textarea {width: 68%}
.species {font-style: italic}
.report_text {padding: 5px 5px 5px 10px; font: normal 0.9em Arial, sans-serif}
.report_text_check {padding: 5px 5px 5px 0; vertical-align: middle; font: normal 0.9em Arial, sans-serif}
#exploreEntry_wrapper input[type="checkbox"] {cursor: pointer}
textarea {resize: none; font: normal 0.8em Courier, monospace; overflow-y: scroll}
textarea:focus {border; 5px solid #1592e5; border-radius: 3px; background-color: #d9eaf7; color: #0f6baa; outline-color: #1592e5}
.report_spacer1 {height: 10px}
.report_spacer2 {height: 20px}
.report_tree {width: 100%}
.report_tree_warning {padding: 10px; margin: 0 0 20px 0; text-align: left; background-color: #ff7e7e; color: #000000; font: bold 1em Arial, sans-serif}
.report_title_precursor {padding: 5px 0 5px 10px; margin: 0; text-align: left; background-color: #d6f0fb; color: #000000; font: bold 0.9em Arial, sans-serif}
#exploreEntry_wrapper a {text-decoration: none}
#exploreEntry_wrapper a:link {color: #000000} 
#exploreEntry_wrapper a:visited {color: #000000} 
#exploreEntry_wrapper a:hover {text-decoration: none; background-color: #fed602; color: #000000}
#exploreEntry_wrapper a:active {color: #000000}
#exploreEntry_wrapper input[type="button"] {font: bold 0.9em Arial, sans-serif; text-transform: uppercase; outline: 0; background-color: #fed602; border: 0; padding: 15px; color: #000000; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer}
#exploreEntry_wrapper input[type="button"]:hover,#loginForm input[type="submit"]:active,#loginForm input[type="submit"]:focus {background-color: #ffbb00}
#exploreEntry_wrapper input[type="submit"] {font: bold 0.9em Arial, sans-serif; text-transform: uppercase; outline: 0; background-color: #fed602; border: 0; padding: 15px; color: #000000; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer}
#exploreEntry_wrapper input[type="submit"]:hover,#loginForm input[type="submit"]:active,#loginForm input[type="submit"]:focus {background-color: #ffbb00}


/* CONTENTS - EXPLORE ENTRIES ////////////////////////////////////////////////////////////////////////// */
#exploreEntries_wrapper {width: 100%; text-align: left; padding: 0; margin: 0; _border: #000000 1px solid; box-sizing: border-box}
.report_table2 {width: 100%; margin-bottom: 75px; border: 2px solid #69d2ff}
#exploreEntries_wrapper input[type="checkbox"] {cursor: pointer}
#exploreEntries_wrapper a {text-decoration: none}
#exploreEntries_wrapper a:link {color: #000000} 
#exploreEntries_wrapper a:visited {color: #000000} 
#exploreEntries_wrapper a:hover {text-decoration: none; background-color: #fed602; color: #000000}
#exploreEntries_wrapper a:active {color: #000000}
#exploreEntries_wrapper input[type="button"] {font: bold 0.9em Arial, sans-serif; text-transform: uppercase; outline: 0; background-color: #fed602; border: 0; padding: 15px; color: #000000; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer}
#exploreEntries_wrapper input[type="button"]:hover,#loginForm input[type="submit"]:active,#loginForm input[type="submit"]:focus {background-color: #ffbb00}
#exploreEntries_wrapper input[type="submit"] {font: bold 0.9em Arial, sans-serif; text-transform: uppercase; outline: 0; background-color: #fed602; border: 0; padding: 15px; color: #000000; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer}
#exploreEntries_wrapper input[type="submit"]:hover,#loginForm input[type="submit"]:active,#loginForm input[type="submit"]:focus {background-color: #ffbb00}


/* CONTENTS - EXPLORE PRECURSORS /////////////////////////////////////////////////////////////////////// */
#explorePrecursors_wrapper {width: 100%; text-align: left; padding: 0; margin: 0; _border: #000000 1px solid; box-sizing: border-box}
.report_table_precursors_wrapper {width: 60%; _border: #ff0000 1px solid; box-sizing: border-box}
.report_table_precursors {width: 100%; _border: 2px solid #69d2ff}
#explorePrecursors_wrapper input[type="checkbox"] {cursor: pointer}
#explorePrecursors_wrapper input[type="button"] {font: bold 0.9em Arial, sans-serif; text-transform: uppercase; outline: 0; background-color: #fed602; border: 0; padding: 15px; color: #000000; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer}
#explorePrecursors_wrapper input[type="button"]:hover,#loginForm input[type="submit"]:active,#loginForm input[type="submit"]:focus {background-color: #ffbb00}
#explorePrecursors_wrapper input[type="submit"] {font: bold 0.9em Arial, sans-serif; text-transform: uppercase; outline: 0; background-color: #fed602; border: 0; padding: 15px; color: #000000; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer}
#explorePrecursors_wrapper input[type="submit"]:hover,#loginForm input[type="submit"]:active,#loginForm input[type="submit"]:focus {background-color: #ffbb00}
.report_multiFASTA {text-align: right}


/* CONTENTS - BACKGROUND /////////////////////////////////////////////////////////////////////////////// */
.icon_history {padding: 0; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #0f6baa; --svg: url('https://api.iconify.design/material-symbols/menu-book-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
#background_wrapper {width: 100%; text-align: left; padding: 0; margin: 0; box-sizing: border-box}
#background_wrapper .title {font: bold 1em Arial, sans-serif; padding: 0; margin-bottom: 15px}
#background_wrapper .text {font: normal 0.9em Arial, sans-serif; padding: 0; margin-bottom: 65px}
#background_wrapper .text p {margin-bottom: 15px}
#background_wrapper .text p span.paper_title {font-weight: bold}
#background_wrapper .text p span.paper_title span.italic {font-style: italic}
#background_wrapper .image {width: 100%; text-align: center; padding: 0; margin-bottom: 100px}
#background_wrapper .image .image_title {width: 100%; font: bold 0.9em Arial, sans-serif; padding: 0; margin-bottom: 20px}
#background_wrapper .logo {text-align: left; padding: 0; margin: 0}


/* CONTENTS - GENOMES AND SAMPLING LOCATIONS /////////////////////////////////////////////////////////// */
.icon_globe {padding: 0; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #0f6baa; --svg: url('https://api.iconify.design/material-symbols/map-search-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
#genomes_wrapper {width: 100%; text-align: left; padding: 0; margin: 0; box-sizing: border-box}
#genomes_wrapper .title {font: bold 1em Arial, sans-serif; padding: 0; margin-bottom: 15px}
#genomes_wrapper .text {font: normal 0.9em Arial, sans-serif; padding: 0; margin-bottom: 50px}
#genomes_wrapper .text p {margin-bottom: 15px}
#gemomes_wrapper .text .species {font-style: italic}
#genomes_wrapper .ref_title {font: bold 0.9em Arial, sans-serif; padding: 0; margin-bottom: 10px}
#genomes_wrapper .ref {font: normal 0.9em Arial, sans-serif; padding: 0; margin-bottom: 75px}
.genomes_table_wrapper {width: 100%; text-align: center; margin-bottom: 75px}
.genomes_table_wrapper .table_title {width: 100%; font: bold 0.9em Arial, sans-serif; padding: 0; margin-bottom: 20px}
.genomes_table {width: 70%; text-align: left; margin: auto; border: 2px solid #000000}
.genomes_table .title_code {width: 7%; padding: 3px 0 3px 5px; font: bold 0.9em Arial, sans-serif}
.genomes_table .title_sl {width: 40%; padding-left: 5px; font: bold 0.9em Arial, sans-serif}
.genomes_table .title_genomes {width: 53%; padding-left: 10px; font: bold 0.9em Arial, sans-serif}
.genomes_table .spacer1 {height: 2px; background-color: #000000}
.genomes_table .spacer2 {height: 10px}
.genomes_table .data_code {width: 7%; padding-left: 5px; font: normal 0.9em Arial, sans-serif}
.genomes_table .data_sl {width: 40%; padding-left: 5px; font: normal 0.9em Arial, sans-serif}
.genomes_table .data_sl_red {width: 40%; padding-left: 5px; font: normal 0.9em Arial, sans-serif; background-color: #ffaaaa}
.genomes_table .data_sl_yellow {width: 40%; padding-left: 5px; font: normal 0.9em Arial, sans-serif; background-color: #ffe24b}
.genomes_table .data_genomes {width: 53%; padding-left: 10px; font: normal 0.9em Arial, sans-serif; vertical-align: top}
#genomes_wrapper .image {width: 100%; text-align: center; padding: 0; margin-bottom: 50px}
#genomes_wrapper .image .image_title {width: 100%; font: bold 0.9em Arial, sans-serif; padding: 0; margin-bottom: 20px}


/* CONTENTS - TREE ///////////////////////////////////////////////////////////////////////////////////// */
.icon_tree {padding: 0; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #0f6baa; --svg: url('https://api.iconify.design/material-symbols/account-tree-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
#tree_wrapper {width: 100%; text-align: left; padding: 0 0 50px 0; margin: 0; _border: #000000 1px solid; box-sizing: border-box}
#phylogram {width: 100%}
#tree_wrapper .title {font: bold 0.9em Arial, sans-serif; margin-bottom: 15px}
#tree_wrapper .text {font: normal 0.9em Arial, sans-serif; margin-bottom: 50px}
#tree_wrapper .text a {text-decoration: none}
#tree_wrapper .text a:link {color: #000000; background-color: #69d2ff}
#tree_wrapper .text a:visited {color: #000000} 
#tree_wrapper .text a:hover {text-decoration: none; background-color: #fed602; color: #000000}
#tree_wrapper .text a:active {color: #000000}


/* CONTENTS - ALIGN & DISPLAY ALIGNMENT //////////////////////////////////////////////////////////////// */
.icon_align {padding: 0; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #0f6baa; --svg: url('https://api.iconify.design/material-symbols/format-align-left-rounded.svg'); -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
#align_wrapper {width: 100%; text-align: left; padding: 0; margin: 0; _border: #000000 1px solid; box-sizing: border-box}
.align_table_wrapper {width: 50%}
.align_table {width: 100%; margin-top: 50px}
.align_table_label {width: 21%; text-align: left; padding: 0; margin: 0; color: #000000; font: bold 0.9em Arial, sans-serif}
.align_table_label_img {width: 21%; text-align: left; padding-top: 20px; margin: 0; vertical-align: top; color: #000000; font: bold 0.9em Arial, sans-serif}
.align_table_radio {width: 4%; padding-right: 10px; vertical-align: middle}
.align_table_data {width: 75%}
.align_table_data_select {width: 75%; padding-left: 1px}
.align_table_spacer1 {height: 10px}
.align_table_spacer2 {height: 30px}
.align_table_wrapper input[type="radio"] {cursor: pointer}
#align_wrapper select {width: 250px; height: 30px; font: normal 0.9em Arial, sans-serif; box-sizing: border-box}
#align_wrapper select:focus {border; 3px solid #1592e5; border-radius: 3px; background-color: #d9eaf7; color: #0f6baa; outline-color: #1592e5}
#align_wrapper input[type="submit"] {font: bold 0.9em Arial, sans-serif; text-transform: uppercase; outline: 0; background-color: #fed602; border: 0; padding: 15px; color: #000000; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer}
#align_wrapper input[type="submit"]:hover,#loginForm input[type="submit"]:active,#loginForm input[type="submit"]:focus {background-color: #ffbb00}
#display_label {display: none}
#display_radio {display: none}
#display_data {display: none}
#display_alignment_wrapper {width: 100%; text-align: left; padding: 0; margin: 0; box-sizing: border-box}
.display_alignment_title {text-align: left; padding: 0; margin: 0 0 30px 0; color: #000000; font: bold 0.9em Arial, sans-serif}
.display_alignment_table_wrapper {width: 95%; padding: 50px; margin: 0; border: 2px solid #69d2ff; box-sizing: border-box; overflow: auto; scrollbar-color: #69d2ff #f3f3f3}
.display_alignment_table {width: 100%; margin: 0}
.display_alignment_ruler {text-align: left}
.display_alignment_sequences {text-align: left}
.display_alignment_table_title {min-width: 75px; text-align: left; padding-left: 3px; font: bold 0.8em "Courier New", monospace; color: #000000; box-sizing: border-box}
.display_alignment_sepline {min-width: 2px; background-color: #000000; box-sizing: border-box}
.display_alignment_coordinate {min-width: 118px; text-align:left; padding: 5px 0 2px 1px; font: bold 0.7em "Courier New", monospace; color: #000000; box-sizing: border-box}
.display_alignment_bottomline {height: 2px; background-color: #000000}
.display_alignment_name {min-width: 75px; text-align: left; padding-left: 3px; padding-right: 30px; font: bold 0.8em "Courier New", monospace; color: #000000; background-color: #dddddd; box-sizing: border-box}
.display_alignment_name_sep {min-width: 2px; background-color: #000000; box-sizing: border-box}
.display_alignment_aa {min-width: 12px; text-align: center; font: bold 0.9em "Courier New", monospace; color: #000000}
.blank {background-color: #ffffff}
.Gly {background-color: #f7f7f7}
.Pro {background-color: #e2a796}
.Ala {background-color: #d5d5d5}
.Leu {background-color: #2f932f}
.Ile {background-color: #2f932f}
.Val {background-color: #2f932f}
.Met {background-color: #ecec41}
.Cys {background-color: #ecec41}
.Phe {background-color: #4b4bb5}
.Tyr {background-color: #4b4bb5}
.Trp {background-color: #bf72bf}
.Lys {background-color: #3c76ff}
.Arg {background-color: #3c76ff}
.His {background-color: #9595d9}
.Asp {background-color: #ea3535}
.Glu {background-color: #ea3535}
.Asn {background-color: #3be4e4}
.Gln {background-color: #3be4e4}
.Ser {background-color: #fbac34}
.Thr {background-color: #fbac34}


/* CONTENTS - ADMIN LOGIN ////////////////////////////////////////////////////////////////////////////// */
.icon_admin_login {padding: 0; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #0f6baa; --svg: url('https://api.iconify.design/material-symbols/login-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
#loginForm_wrapper {width: 100%; text-align: left; padding: 0; margin: 0; box-sizing: border-box}
#loginForm {width: 320px; background: #FFFFFF; padding: 50px; margin: 0; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24)}
.loginForm_markedtext {display: inline-block; padding-bottom: 25px; width: 100%; text-align: left; color: #000000; font: 1.25em Arial, sans-serif}
.loginForm_note {display: inline-block; text-transform: uppercase; padding: 0; margin: 0; text-align: left; color: #000000; font: 0.7em bold Arial, sans-serif}
#loginForm input {font: normal Arial, sans-serif; outline: 0; background-color: #e8f0fe; color: #0f6baa; border: 1px solid #cccccc; margin: 0 0 15px; padding: 15px; box-sizing: border-box}
#loginForm input:focus {border: 1px solid #0f6baa; -webkit-transition: 0.4s ease; box-sizing: border-box}
#loginForm input[type="text"], input[type="password"] {width: 100%}
#loginForm input[type="checkbox"] {cursor: pointer; padding: 0; margin: 0 0 30px 0; color: #0f6baa; border: 1px solid #cccccc; background-color: #ffdddd}
#loginForm .loginForm_text {padding: 0 0 0 5px; margin: 0; font: normal 0.7em Arial, sans-serif}
#loginForm input[type="submit"] {font: normal Arial, sans-serif; text-transform: uppercase; outline: 0; background-color: #fed602; border: 0; width: 100%; padding: 15px; color: #000000; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer}
#loginForm input[type="submit"]:hover,#loginForm input[type="submit"]:active,#loginForm input[type="submit"]:focus {background-color: #ffbb00}
.login_error {width: 50%; padding: 10px; margin: 0 0 50px 0; text-align: left; background-color: #f25a59; color: #ffffff; font: 1em Arial, sans-serif; box-sizing: border-box}


/* CONTENTS - ADMIN PANEL ////////////////////////////////////////////////////////////////////////////// */
.icon_admin_panel {padding: 0; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #0f6baa; --svg: url('https://api.iconify.design/material-symbols/admin-panel-settings-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
#login_info_wrapper {width: 100%}
.login_info_text {width: 100%; text-align: right; padding: 5px 50px 5px 50px; margin: 0; background-color: #bbffbb; font: normal 0.9em Courier, monospace; box-sizing: border-box}
.login_info_text_marked {font: bold 1em Courier, monospace; color: #dd0000}
.login_info_text_data {font: normal 1em Courier, monospace; color: #000000}
.login_info_text a {text-decoration: none}
.login_info_text a:link {color: #0000ff} 
.login_info_text a:visited {color: #0000ff} 
.login_info_text a:hover {text-decoration: none; background-color: #fed602; color: #000000}
.login_info_text a:active {color: #000000}
#admin_panel_wrapper {width: 100%; text-align: left; padding: 0; margin: 0; box-sizing: border-box}
/* multitab system //////////////////////// */
.tabsTitle {font: bold 1.25em Arial, sans-serif; color: #000000; padding: 0; margin-bottom: 15px}
.tabs {display: flex; flex-wrap: wrap}
.tabs label {order: 1; display: block; padding: 0.75rem 1rem; margin-right: 0.4rem; cursor: pointer; background-color: #69d2ff; font: bold 1em Arial, sans-serif; transition: background ease 0.2s}
.tabs .tab {order: 99; flex-grow: 1; width: 100%; display: none; padding: 1rem; border-top: solid 5px #fed602}
.tabs input[type="radio"] {display: none}
.tabs input[type="radio"]:checked + label {background-color: #ffffff; background-color: #fed602}
.tabs input[type="radio"]:checked + label + .tab {display: block}
@media (max-width: 45em) {.tabs .tab, .tabs label {order: initial} .tabs label {width: 100%; margin-right: 0; margin-top: 0.2rem}}
/* multitab system (table) //////////////// */
.adminpanel_table {border: 0; border-collapse: collapse; margin-top: 30px; margin-bottom: 60px}
.adminpanel_table_img {width: 64px; align: left; vertical-align: top}
.adminpanel_table_block {align: left; vertical-align: top; padding-left: 30px}
.adminpanel_table_title {display: block; text-align: left; font: bold 1em Arial, sans-serif; color: #1769aa; padding: 0; margin-bottom: 15px}
.adminpanel_table_text {text-align: left; font: bold 0.9em Arial, sans-serif; color: #000000; padding: 0; margin: 0}
.adminpanel_table_link {font: normal 0.9em Arial, sans-serif; color: #000000; padding: 0; margin: 0}
.adminpanel_table_link a {text-decoration: none}
.adminpanel_table_link a:link {color: #000000} 
.adminpanel_table_link a:visited {color: #000000} 
.adminpanel_table_link a:hover {text-decoration: none; padding: 5px; border-bottom: 3px solid #ffbb00; background-color: #fed602; color: #000000}
.adminpanel_table_link a:active {color: #000000}
/* Database Management //////////////////// */
.icon_db_data_add {padding: 0; margin: 0; display: inline-block; width: 64px; height: 64px; background-color: #1769aa; --svg: url('https://api.iconify.design/material-symbols/add-circle-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
.icon_db_data_edit {padding: 0; margin: 0; display: inline-block; width: 64px; height: 64px; background-color: #1769aa; --svg: url('https://api.iconify.design/material-symbols/edit-document-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
.icon_db_data_remove {padding: 0; margin: 0; display: inline-block; width: 64px; height: 64px; background-color: #1769aa; --svg: url('https://api.iconify.design/material-symbols/delete-forever-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
/* Login Profile Management /////////////// */
.icon_login_profile_add {padding: 0; margin: 0; display: inline-block; width: 64px; height: 64px; background-color: #1769aa; --svg: url('https://api.iconify.design/material-symbols/person-add-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
.icon_login_profile_edit {padding: 0; margin: 0; display: inline-block; width: 64px; height: 64px; background-color: #1769aa; --svg: url('https://api.iconify.design/material-symbols/person-edit-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
/* System Administrator Tools ///////////// */
.icon_sysadmin_log_display {padding: 0; margin: 0; display: inline-block; width: 64px; height: 64px; background-color: #1769aa; --svg: url('https://api.iconify.design/material-symbols/screenshot-monitor-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
.icon_sysadmin_log_email {padding: 0; margin: 0; display: inline-block; width: 64px; height: 64px; background-color: #1769aa; --svg: url('https://api.iconify.design/material-symbols/attach-email-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
.icon_sysadmin_log_clear {padding: 0; margin: 0; display: inline-block; width: 64px; height: 64px; background-color: #1769aa; --svg: url('https://api.iconify.design/material-symbols/scan-delete-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}


/* CONTENTS - ADMIN PANEL ZONE ///////////////////////////////////////////////////////////////////////// */
#admin_panel_zone_wrapper {width: 100%; text-align: left; padding: 0; margin: 0 0 50px 0; box-sizing: border-box}
.text_marked {text-align: left; padding: 0; margin: 0; color: #000000; font: bold 0.9em Arial, sans-serif}
.text {text-align: left; padding: 0; margin: 0; color: #000000; font: normal 0.9em Arial, sans-serif}
.form_table {width: 50%; margin: 40px 0 0 0}
.form_table_spacer {width: 100%; height: 10px}
.form_label {width: 25%; text-align: left; padding: 0; margin: 0; color: #000000; font: bold 0.9em Arial, sans-serif}
.form_label_blank {width: 25%}
.form_input {width: 75%; text-align: left}
.form_input input {width: 450px; height: 30px; padding-left: 3px; font: normal 0.9em Arial, sans-serif; box-sizing: border-box}
.form_input input:focus {border; 5px solid #1592e5; border-radius: 3px; background-color: #d9eaf7; color: #0f6baa; outline-color: #1592e5}
.form_input_readonly input {width: 450px; height: 30px; padding-left: 3px; font: normal 0.9em Arial, sans-serif; background-color: #fbdbdb; border: 0; box-sizing: border-box}
.form_input_readonly input:focus {border; 5px solid #1592e5; border-radius: 3px; background-color: #fbdbdb; color: #000000; outline-color: #ff0000}
.form_input select {width: 250px; height: 30px; font: normal 0.9em Arial, sans-serif; box-sizing: border-box}
.form_input select:focus {border; 3px solid #1592e5; border-radius: 3px; background-color: #d9eaf7; color: #0f6baa; outline-color: #1592e5}
.form_input_submit {width: 75%; text-align: left; padding: 30px 0 0 0}
.form_input_submit input[type="submit"] {font: bold 0.9em Arial, sans-serif; text-transform: uppercase; outline: 0; background-color: #fed602; border: 0; padding: 15px; color: #000000; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer}
.form_input_submit input[type="submit"]:hover, .form_table input[type="submit"]:active, .form_table input[type="submit"]:focus {background-color: #ffbb00}
.form_input_submit input[type="button"] {font: bold 0.9em Arial, sans-serif; text-transform: uppercase; outline: 0; background-color: #fed602; border: 0; padding: 15px; margin-left: 30px; color: #000000; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer}
.form_input_submit input[type="button"]:hover, .form_input_submit input[type="button"]:active, .form_input_submit input[type="button"]:focus {background-color: #ffbb00}
.form_error {width: 50%; padding: 10px; margin: 50px 0 50px 0; text-align: left; background-color: #f25a59; color: #ffffff; font: 1em Arial, sans-serif; box-sizing: border-box}
.summary_title {text-align: left; padding: 0 0 0 10px; margin: 0; color: #000000; font: bold 0.9em Arial, sans-serif}
.summary_table {width: 50%; margin: 30px 0 30px 0; background-color: #eaeaea}
.summary_label {width: 35%; padding: 2px 0 2px 10px; text-align: left; font: bold 0.8em Arial, sans-serif}
.summary_data {width: 65%; text-align: left; font: normal 0.8em Arial, sans-serif}
.operation_success {width: 50%; display: block; padding: 10px; margin-bottom: 20px; text-align: left; background-color: #128976; background-color: #17b399; color: #ffffff; font: 1em Arial, sans-serif; box-sizing: border-box}
.operation_success_sub {width: 50%; display: block; padding: 5px 10px 5px 10px; margin-bottom: 20px; text-align: left; background-color: #128976; background-color: #17b399; color: #ffffff; font: 1em Arial, sans-serif; box-sizing: border-box}
.operation_error {width: 50%; display: block; padding: 10px; margin-bottom: 20px; text-align: left; background-color: #f25a59; color: #ffffff; font: 1em Arial, sans-serif; box-sizing: border-box}
.operation_note {width: 50%; display: block; padding: 10px; margin: 10px 0 20px 0; text-align: left; background-color: #dddddd; color: #000000; font: 1em Arial, sans-serif; box-sizing: border-box}}
.operation_text {text-align: left; padding: 0; margin: 20px 0 0 0; color: #000000; font: normal 0.9em Arial, sans-serif}
.operation_text a {text-decoration: none}
.operation_text a:link {color: #000000} 
.operation_text a:visited {color: #000000} 
.operation_text a:hover {text-decoration: none; padding: 5px; border-bottom: 3px solid #ffbb00; background-color: #fed602; color: #000000}
.operation_text a:active {color: #000000}


/* Add new data (myticalin data & precursor data) */
.icon_data_add {padding: 0; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #0f6baa; --svg: url('https://api.iconify.design/material-symbols/add-circle-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
.add_data_text_marked {display: block; text-align: left; padding: 0; margin-bottom: 50px; color: #000000; font: bold 0.9em Arial, sans-serif}
.add_data_error {width: 60%; padding: 10px; margin: 25px 0 5px 0; text-align: left; background-color: #f25a59; color: #ffffff; font: 0.9em Arial, sans-serif; box-sizing: border-box}
.add_data_table_wrapper {width: 60%; box-sizing: border-box}
.add_data_table {width: 100%}
.add_data_section {padding: 10px; margin: 0; text-align: left; background-color: #bae8fc; color: #000000; font: bold 1em Arial, sans-serif}
.add_data_item {width: 30%; padding: 0 0 0 10px; vertical-align: middle; color: #000000; font: bold 0.9em Arial, sans-serif}
.add_data_item_textarea {width: 30%; padding: 3px 0 0 10px; vertical-align: top; font: bold 0.9em Arial, sans-serif}
.add_data_value {width: 70%; vertical-align: middle}
.add_data_value .note {margin-left: 10px; color: #0f6baa; font: normal 0.8em Arial, sans-serif}
.add_data_value textarea.sequence {text-transform: uppercase}
.add_data_note {font: normal 0.9em Arial, sans-serif; padding: 0 10px 0 10px}
.add_data_spacer1 {height: 10px}
.add_data_spacer2 {height: 20px}
.add_data_value input {width: 450px; height: 30px; padding-left: 3px; font: normal 0.9em Arial, sans-serif; box-sizing: border-box}
.add_data_value input.small {width: 225px; height: 30px; padding-left: 3px; font: normal 0.9em Arial, sans-serif; box-sizing: border-box}
.add_data_value input:focus {border; 5px solid #1592e5; border-radius: 3px; background-color: #d9eaf7; color: #0f6baa; outline-color: #1592e5}
.add_data_value_readonly input {width: 450px; height: 30px; padding-left: 3px; font: normal 0.9em Arial, sans-serif; background-color: #fbdbdb; border: 0; box-sizing: border-box}
.add_data_value_readonly input:focus {border; 5px solid #1592e5; border-radius: 3px; background-color: #fbdbdb; color: #000000; outline-color: #ff0000}
.add_data_value select {width: 225px; height: 30px; font: normal 0.9em Arial, sans-serif; box-sizing: border-box}
.add_data_value select:focus {border; 3px solid #1592e5; border-radius: 3px; background-color: #d9eaf7; color: #0f6baa; outline-color: #1592e5}
.add_data_table_wrapper input[type="file"] {width: 35%; font: normal 0.9em Arial, sans-serif; outline: 0; background-color: #dddddd; border: 0; padding: 4px 0 0 4px; color: #000000; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer}
.add_data_table_wrapper input[type="submit"] {font: bold 0.9em Arial, sans-serif; text-transform: uppercase; outline: 0; background-color: #fed602; border: 0; padding: 15px; color: #000000; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer}
.add_data_table_wrapper input[type="submit"]:hover,#loginForm input[type="submit"]:active,#loginForm input[type="submit"]:focus {background-color: #ffbb00}
#admin_panel_zone_wrapper .grammar_error_wrapper {width: 50%; text-align: left; border: 2px solid #f25a59; border-left: 5px solid #f25a59; padding: 5px; margin: 0 0 5px 0; box-sizing: border-box}
#admin_panel_zone_wrapper .grammar_error_title {display: block; text-align: left; font: bold 0.9em Arial, sans-serif; color: #000000}
#admin_panel_zone_wrapper .grammar_amino_error_title {width: 50%; display: block; text-align: left; font: bold 0.9em Arial, sans-serif; color: #000000; border: 2px solid #f25a59; border-left: 5px solid #f25a59; padding: 5px; margin: 0 0 5px 0; box-sizing: border-box}
#admin_panel_zone_wrapper .grammar_error_subtitle {display: block; text-align: left; font: bold 0.8em Arial, sans-serif; color: #dd0000}
#admin_panel_zone_wrapper .grammar_error_text {display: block; text-align: left; font: normal 0.8em Arial, sans-serif; color: #dd0000}
#admin_panel_zone_wrapper .sequence_wrapper {width: 50%; overflow: auto; padding: 20px; border: 1px solid #000000; box-sizing: border-box}
#admin_panel_zone_wrapper .sequence_standard {font: normal 0.9em Courier; background-color: #e9e9e9}
#admin_panel_zone_wrapper .seq_aa {font: normal 0.9em Courier; background-color: #e9e9e9}
#admin_panel_zone_wrapper .nt_ok {font: normal 0.9em Courier; background-color: #ccffcc}
#admin_panel_zone_wrapper .nt_error {font: normal 0.9em Courier; background-color: #ffcccc}
#admin_panel_zone_wrapper .aa_ok {font: normal 0.9em Courier; background-color: #ccffcc}
#admin_panel_zone_wrapper .aa_error {font: normal 0.9em Courier; background-color: #ffcccc}
#admin_panel_zone_wrapper .grammar_error_report {width: 50%; display: block; padding: 10px; margin-bottom: 20px; text-align: left; background-color: #f25a59; color: #ffffff; font: 1em Arial, sans-serif; box-sizing: border-box}


/* Select-Edit-Remove myticalin and precursor data */
.icon_data_edit {padding: 0; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #0f6baa; --svg: url('https://api.iconify.design/material-symbols/edit-document-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
.icon_data_remove {padding: 0; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #0f6baa; --svg: url('https://api.iconify.design/material-symbols/delete-forever-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
.edit_data_table_wrapper {width: 60%; box-sizing: border-box}
.edit_data_table {width: 100%}
.edit_data_error {width: 60%; padding: 10px; margin: 25px 0 5px 0; text-align: left; background-color: #f25a59; color: #ffffff; font: 0.9em Arial, sans-serif; box-sizing: border-box}
.edit_data_table_wrapper input[type="file"] {width: 35%; font: normal 0.9em Arial, sans-serif; outline: 0; background-color: #dddddd; border: 0; padding: 4px 0 0 4px; color: #000000; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer}
/*
.edit_data_table_wrapper input[type="submit"] {font: bold 0.9em Arial, sans-serif; text-transform: uppercase; outline: 0; background-color: #fed602; border: 0; padding: 15px; color: #000000; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer}
.edit_data_table_wrapper input[type="submit"]:hover,#loginForm input[type="submit"]:active,#loginForm input[type="submit"]:focus {background-color: #ffbb00}
*/


/* Add login profile */
.icon_profile_add {padding: 0; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #0f6baa; --svg: url('https://api.iconify.design/material-symbols/person-add-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}

/* Select-Edit-Remove login profile */
.icon_profile_edit {padding: 0; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #0f6baa; --svg: url('https://api.iconify.design/material-symbols/person-edit-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
.icon_profile_remove {padding: 0; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #0f6baa; --svg: url('https://api.iconify.design/material-symbols/person-cancel-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
.form_table_select {width: 50%; margin: 30px 0 0 0}
.form_table_select select {width: 250px; height: 30px; font: normal 0.9em Arial, sans-serif; box-sizing: border-box}
.form_table_select select:focus {border; 3px solid #1592e5; border-radius: 3px; background-color: #d9eaf7; color: #0f6baa; outline-color: #1592e5}
.form_table_select input[type="submit"] {font: bold 0.9em Arial, sans-serif; text-transform: uppercase; outline: 0; background-color: #fed602; border: 0; padding: 7px 15px 7px 15px; color: #000000; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer}
.form_table_select input[type="submit"]:hover, .form_table input[type="submit"]:active, .form_table input[type="submit"]:focus {background-color: #ffbb00}
.edit_profile_value input {width: 450px; height: 30px; padding-left: 3px; font: normal 0.9em Arial, sans-serif; box-sizing: border-box}
.edit_profile_value input.small {width: 225px; height: 30px; padding-left: 3px; font: normal 0.9em Arial, sans-serif; box-sizing: border-box}
.edit_profile_value input:focus {border; 5px solid #1592e5; border-radius: 3px; background-color: #d9eaf7; color: #0f6baa; outline-color: #1592e5}
.edit_profile_value select {width: 225px; height: 30px; font: normal 0.9em Arial, sans-serif; box-sizing: border-box}
.edit_profile_value select:focus {border; 3px solid #1592e5; border-radius: 3px; background-color: #d9eaf7; color: #0f6baa; outline-color: #1592e5}
.edit_profile_table_wrapper {width: 50%; margin: 40px 0 0 0}
.edit_profile_table {width: 100%; margin: 40px 0 0 0}
.edit_profile_label {width: 25%; text-align: left; padding: 0; margin: 0; color: #000000; font: bold 0.9em Arial, sans-serif}
.edit_profile_value {width: 75%; text-align: left}
.edit_profile_value .note {margin-left: 10px; color: #0f6baa; font: normal 0.8em Arial, sans-serif}
.edit_profile_spacer {width: 100%; height: 10px}
.edit_profile_blank {width: 25%}
.edit_profile_submit {width: 75%; text-align: left; padding: 30px 0 0 0}
.edit_profile_submit input[type="submit"] {font: bold 0.9em Arial, sans-serif; text-transform: uppercase; outline: 0; background-color: #fed602; border: 0; padding: 15px; color: #000000; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer}
.edit_profile_submit input[type="submit"]:hover, .form_table input[type="submit"]:active, .form_table input[type="submit"]:focus {background-color: #ffbb00}
.edit_profile_submit input[type="button"] {font: bold 0.9em Arial, sans-serif; text-transform: uppercase; outline: 0; background-color: #fed602; border: 0; padding: 15px; margin-left: 30px; color: #000000; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer}
.edit_profile_submit input[type="button"]:hover, .form_input_submit input[type="button"]:active, .form_input_submit input[type="button"]:focus {background-color: #ffbb00}


/* Display log */
.icon_log_display {padding: 0; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #0f6baa; --svg: url('https://api.iconify.design/material-symbols/screenshot-monitor-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}
.log_standard {text-align: left; padding: 0; margin: 0; color: #000000; font: normal 0.8em Courier, monospace}
.log_login {text-align: left; padding: 0; margin: 0; color: #000000; background-color: #d9eaf7; font: normal 0.8em Courier, monospace}
.log_newdata {text-align: left; padding: 0; margin: 0; color: #000000;  background-color: #c4ffc4; font: normal 0.8em Courier, monospace}
.log_newprofile {text-align: left; padding: 0; margin: 0; color: #000000;  background-color: #ffed8c; font: normal 0.8em Courier, monospace}
.log_clear {text-align: left; padding: 0; margin: 0; color: #000000;  background-color: #ffffdd; border: 1px dashed #cc0000; font: normal 0.8em Courier, monospace}
.log_error {text-align: left; padding: 0; margin: 0; color: #000000; background-color: #ffb595; font: normal 0.8em Courier, monospace}
.log_security {text-align: left; padding: 0; margin: 0; color: #000000; background-color: #ffb595; font: normal 0.8em Courier, monospace; border: 1px dashed #ff0000}

/* Send log */
.icon_log_email {padding: 0; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #0f6baa; --svg: url('https://api.iconify.design/material-symbols/attach-email-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}

/* Clear log */
.icon_log_clear {padding: 0; margin: -5px; display: inline-block; width: 32px; height: 32px; background-color: #0f6baa; --svg: url('https://api.iconify.design/material-symbols/scan-delete-outline-rounded.svg');
-webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%}

/* Error (unauthorized access, bad request, invalid token) ///////////////////////////////////////////// */
#error {width: 100%; height: 100%; padding: 0; margin: 0}
.error_text {width: 100%; padding: 50px; margin: 0; text-align: left; background-color: #f25a59; color: #ffffff; font: 1.25em Arial, sans-serif; box-sizing: border-box}
.error_link {width: 100%; padding: 20px 50px 20px 50px; margin: 0; text-align: left; background-color: #eeeeee; color: #000000; font: 0.9em Arial, sans-serif; box-sizing: border-box}
.error_link a {text-decoration: none}
.error_link a:link {color: #000000} 
.error_link a:visited {color: #000000} 
.error_link a:hover {background-color: #fed602; color: #000000}
.error_link a:active {color: #000000}

/* Database connection error /////////////////////////////////////////////////////////////////////////// */
#dbconn_error {width: 100%; height: 100%; padding: 0; margin: 0}
.dbconn_error_text {width: 100%; padding: 50px; margin: 0; text-align: left; background-color: #f25a59; color: #ffffff; font: 1.25em Arial, sans-serif; box-sizing: border-box}