/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/
html {scroll-behavior: smooth; margin:0; padding:0; height: 100%;}
body {margin:0 auto; padding:0; font-family: Tahoma,sans-serif; color: #000; width: 96%; max-width: 1400px; background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2H0v-2h20v-2H0V8h20V6H0V4h20V2H0V0h22v20h2V0h2v20h2V0h2v20h2V0h2v20h2V0h2v20h2v2H20v-1.5zM0 20h2v20H0V20zm4 0h2v20H4V20zm4 0h2v20H8V20zm4 0h2v20h-2V20zm4 0h2v20h-2V20zm4 4h20v2H20v-2zm0 4h20v2H20v-2zm0 4h20v2H20v-2zm0 4h20v2H20v-2z' fill='%23708cbd' fill-opacity='0.11' fill-rule='evenodd'/%3E%3C/svg%3E");}.smallonly {display: none;}
.clear {clear: both;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
h1 {
  color: #5171aa;
  font-size: 1.2em;
  font-weight: bold;
}
h1.top_title {font-size: 2.3em; margin: 0 0 0.5em 0.5em; display: inline-flex; color:#241c1c; font-weight: normal; }
h1.top_title a {color:#241c1c; }
h1.top_title a:hover {color: #fff; background-color: #708cbd; transition: all .2s ease-out; }
h2 {font-size: 1.5em; padding: 0.5em 0 0 0; margin: 0;}
.headline h2 {padding: 0 0 0.2em 0;}
.text h2 {padding: 0;}
h2.news {background: url('images/news.svg') no-repeat; background-size: 1.2em auto; background-position: top 3px left; padding: 0 0 0 1.5em;}
h2.links {background: url('images/links.svg') no-repeat; background-size: 1.2em auto; background-position: top 3px left; padding: 0 0 0 1.5em;}
h2.tfp {background: url('images/tfp.svg') no-repeat; background-size: 1.2em auto; background-position: top 3px left; padding: 0 0 0 1.5em;}
h2.translators {background: url('images/user.svg') no-repeat; background-size: 1.2em auto; background-position: top 3px left; padding: 0 0 0 1.5em;}
h2.organizations {background: url('images/users.svg') no-repeat; background-size: 1.2em auto; background-position: top 3px left; padding: 0 0 0 1.5em;}
h3 {font-size: 1.5em; padding: 0.5em 0 0 0; margin: 0; color:#5171aa;}
a {text-decoration: none; transition: all .2s ease-out;}
a:hover, a:focus, a:active {transition: all .2s ease-out;}
.footer a {color: #fff; border-bottom: #fff 1px solid; }
.footer a:hover, .footer a:focus, .footer a:active {border-bottom: #fff 0.3rem solid;}
.column_login a {color: #5171aa; border-bottom: #5171aa 1px dotted; font-weight: bold;}
.column_login a:hover, .column_login a:focus, .column_login a:active {border-bottom: none; background-color: #708cbd; color: #fff;}
p {margin: 0.5em 0;}
/*********************************************************************************/
/* Header                                                                         */
/*********************************************************************************/
#header {color: #000; margin: 2em auto 0 auto; text-align: center;}
#header_content{ position: relative; display: inline-flex;}
#logo {height: 3em; line-height: 3em; display: inline-flex;}
#logo img{height: 3em;}
#languages {text-align: center; margin: 0 0 1.5em 0;}
#languages input.bttn{color: #5171aa; background-color: #fff; font-size: 1.2em; border-color: #5171aa; margin: 0 0.2em; cursor: pointer; padding: 4px; border-radius: 0; transition: all 0.2s;}
#languages input.bttn:hover { color: #fff; background-color: #708cbd; transition: all .2s ease-out;}
#languages input.bttn.current-bttn {background-color: #5171aa; color: white; font-weight: bold;}
#languages input.bttn.current-bttn:hover {background-color: #708cbd;}
#languages ul {list-style-type: none; margin: 0; padding:0;}
#languages ul li {display: inline-flex;}
/*********************************************************************************/
/* Main                                                                          */
/*********************************************************************************/
main {margin: 0 auto; background-color:rgba(256, 256, 256, 0.7);}
main.main.main_main, main.main.main_index {background-color:transparent;}
main a {color: #000; border-bottom: #000 1px dotted; }
main a:hover, main a:focus, main a:active {background-color: #708cbd; color: #fff;}
.headline {color: #fff; padding: 2em 5.5em 2em 2em; text-align: left; background: url('images/earth.svg'), #5171aa; background-size: 4em; background-repeat: no-repeat; background-position: top 1em right 1em;}
.headline_index {font-size: 1.5em;}
.headline_main {font-size: 1.2em; padding-bottom: 1em;}
.stats {font-weight: bold; margin: 2em auto 0 auto; padding: 2em; text-align: center; }
.stats_main {color: #5171aa; }
.databases_container {font-weight: bold; margin: 1em auto 0 auto; padding: 0.5em 0.75em 0.5em 2.2em; text-align: center; color: #5171aa; display: inline-block; background: #fff url('images/search.svg') no-repeat left 0.65em center; background-size: 1em 1em; border: #5171aa solid 2px; transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out;}
.databases_container:hover {color: #fff; background: #708cbd url('images/search2.svg') no-repeat left 0.65em center; background-size: 1em 1em; border: #fff solid 2px; cursor: pointer;}
.databases {text-align: center;}
.main_menu_container {font-weight: bold; margin: 1em auto 1em auto; padding: 0.5em 0.75em 0.5em 2.3em; text-align: center; color: #5171aa; display: inline-block; background: #fff url('images/home.svg') no-repeat left 0.65em center; background-size: 1em 1em; border: #5171aa solid 2px; transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out;}
.main_menu_container:hover {color: #fff; background: #708cbd url('images/home2.svg') no-repeat left 0.65em center; background-size: 1em 1em; border: #fff solid 2px; cursor: pointer;}
.main_menu {text-align: center;}
.cards3column {display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2em; width: 100%; margin: 2em auto;}
.card3column {align-items: start; justify-content: start; background-color: rgba(255, 255, 255, 0.9); border: 2px solid #5171aa; padding: 1.5em; display: flex; flex-direction: column;}
.card3column h2 {margin-bottom: 1em; padding-bottom: 0.5em; border-bottom: 2px solid #5171aa;}
.guide_translators, .guide_organizations {margin: 0.5em 0 0 0; padding: 0.5em 0;}
.guide_translators a, .guide_organizations a {display: block; color: #5171aa; text-decoration: none; border-bottom: 1px dotted #708cbd; padding: 0.5em 0;}
.guide_translators a:hover, .guide_organizations a:hover {background: rgba(81, 113, 170, 0.1);}
.column_login {align-items: start; justify-content: start; background-color: rgba(255, 255, 255, 0.9); border: 2px solid #5171aa; padding: 1.5em; display: flex; flex-direction: column;}
.column_dashboard {align-items: start; justify-content: start; background-color: rgba(255, 255, 255, 0.9); border: 2px solid #5171aa; padding: 1.5em; display: flex; flex-direction: column;}
.column_contributor {align-items: start; justify-content: start; background-color: rgba(255, 255, 255, 0.9); border: 2px solid #5171aa; padding: 1.5em; display: flex; flex-direction: column;}
.column_info {align-items: start; justify-content: start; background-color: rgba(255, 255, 255, 0.9); border: 2px solid #5171aa; padding: 1.5em; display: flex; flex-direction: column;}
.dashboard_welcome {font-size: 0.95em; color: #333; margin: 0 0 1em 0;}
.dashboard_search {margin: 0 0 1em 0;}
.dashboard_search_btn {display: block; padding: 0.7em 1em; background: #708cbd; color: white; text-align: center; text-decoration: none; transition: all 0.2s; border: 1px solid #5171aa;}
.dashboard_search_btn:hover {background: #5171aa;}
.dashboard_actions {display: flex; flex-direction: column;}
.dashboard_actions a {display: block; padding: 0.5em 0; color: #5171aa; text-decoration: none; border-bottom: 1px dotted #708cbd;}
.dashboard_actions a:hover {background: rgba(81, 113, 170, 0.1);}
.dashboard_admin {margin-top: 1em; padding-top: 0.5em; border-top: 1px solid #ddd;}
.dashboard_admin a {display: block; padding: 0.5em; background: #5171aa; color: white; text-align: center; text-decoration: none;}
.dashboard_admin a:hover {background: #708cbd;}
.contributor_actions {display: flex; flex-direction: column;}
.contributor_actions a {display: block; padding: 0.5em 0; color: #5171aa; text-decoration: none; border-bottom: 1px dotted #708cbd;}
.contributor_actions a:hover {background: rgba(81, 113, 170, 0.1);}
.info_links {display: flex; flex-direction: column;}
.info_links a {display: block; padding: 0.5em 0; color: #5171aa; text-decoration: none; border-bottom: 1px dotted #708cbd;}
.info_links a:hover {background: rgba(81, 113, 170, 0.1);}
.logout_link {color: #c05050 !important; border-bottom-color: #c05050 !important;}
.logout_link:hover {background: rgba(192, 80, 80, 0.1) !important;}
.column_translators_loggedin {align-items: start; justify-content: start; background-color: rgba(255, 255, 255, 0.9); border: 2px solid #5171aa; padding: 1.5em; display: flex; flex-direction: column;}
.column_organizations_loggedin {align-items: start; justify-content: start; background-color: rgba(255, 255, 255, 0.9); border: 2px solid #5171aa; padding: 1.5em; display: flex; flex-direction: column;}
.column_admin {border: 2px solid #5171aa; padding: 1.5em; align-items: start; display: flex; flex-direction: column; background: rgba(255,255,255,0.9); color:#333; }
.column_admin h2 {color: #5171aa; border-bottom: 2px solid #5171aa; margin-bottom: 1em; padding-bottom: 0.5em;}
.column_admin a {color: #5171aa; border-bottom: 1px dotted #708cbd;}
.column_admin a:hover {background: rgba(81, 113, 170, 0.1);}
.column_user_actions {border: 2px solid #5171aa; padding: 1.5em; align-items: start; display: flex; flex-direction: column; background: rgba(255,255,255,0.9); }
.login {padding: 0.5em 0; margin: 0 0 0.5em 0;}
.login a {display: block; color: #5171aa; text-decoration: none; border-bottom: 1px dotted #708cbd; padding: 0.5em 0;}
.login a:hover {background: rgba(81, 113, 170, 0.1);}
.registration_translators {padding: 0.5em 0; margin: 0 0 0.5em 0;}
.registration_translators a {display: block; color: #5171aa; text-decoration: none; border-bottom: 1px dotted #708cbd; padding: 0.5em 0;}
.registration_translators a:hover {background: rgba(81, 113, 170, 0.1);}
.registration_organizations {padding: 0.5em 0;}
.registration_organizations a {display: block; color: #5171aa; text-decoration: none; border-bottom: 1px dotted #708cbd; padding: 0.5em 0;}
.registration_organizations a:hover {background: rgba(81, 113, 170, 0.1);}
.text {padding: 1em 1.5em 1.5em 1.5em;}
/*********************************************************************************/
/* Table                                                                        */
/*********************************************************************************/
table {border: 1px solid #5171aa; margin: 1em 0;}
table th {text-align: left; color: #fff; background-color: #708cbd; padding: 0 0.3em;}
td {vertical-align: top;  border-bottom: 1px dotted #708cbd;}
.addnews td, .addlinks td {border-bottom: none;}
.lang-table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.lang-table th, .lang-table td { padding: 0.6em; text-align: left; border-bottom: 1px solid #ddd; font-size: 0.9em; color: #666; }
.lang-table th { background: #f5f5f5; font-weight: bold; color: #5171aa; }
.lang-table tr:hover { background: rgba(81, 113, 170, 0.05); }
/*********************************************************************************/
/* Forms                                                                        */
/*********************************************************************************/
.contact_form input.bttn.erase{color: #5171aa; font-weight: bold; padding: 0.5em; border: #5171aa solid 2px; transition: all .2s ease-out; background-color: #fff;}
.contact_form input.bttn.erase:hover {color: #fff; background: #708cbd; transition: all .2s ease-out; border: #fff solid 2px; cursor: pointer;}
.contact_form input.bttn.send{color: #fff; font-weight: bold; padding: 0.5em; border: #3d5a8a solid 2px; transition: all .2s ease-out; background-color: #3d5a8a;}
.contact_form input.bttn.send:hover {color: #fff; background: #708cbd; transition: all .2s ease-out; border: #fff solid 2px; cursor: pointer;}
.contact_form input.bttn {font-size: 1.1em;}
.add-form { background: white; padding: 2em; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-top: 2em; }
.add-form h3 { color: #5171aa; margin-top: 0; }
.form-row { margin: 0.8em 0; }
.form-row label { display: inline-block; width: 150px; font-weight: bold; }
.form-row input[type="text"] { padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 300px; }
.form-row input[type="text"]:focus { border-color: #5171aa; outline: none; }
.alert-box { border: 4px solid #ff9900; padding: 1em; border-radius: 6px; margin: 1em 0; background: #fff8e8; }
.registration-form .form-row { margin: 1em 0; display: flex; align-items: center; }
.registration-form .form-row label { width: 200px; text-align: right; padding-right: 1em; font-weight: bold; color: #5171aa; }
.registration-form .form-row input[type="text"],
.registration-form .form-row input[type="password"] { flex: 1; padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; }
.registration-form .radio-group { display: flex; gap: 2em; }
.registration-form .radio-group label { font-weight: normal; }
.terms-frame { border: 1px solid #ddd; border-radius: 4px; margin: 1em 0; }
.terms-frame iframe { width: 100%; height: 300px; border: none; }
.checkbox-row { margin: 1.5em 0; }
.checkbox-row label { margin-left: 0.5em; }
.error-message { color: #c00; margin: 1em 0; padding: 0.5em; background: #fee; border-radius: 4px; }
.registration_form .radio-group { display: inline; }
.registration-form .form-row textarea { flex: 1; padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; }
.registration-form .form-row input:focus,
.registration-form .form-row textarea:focus { border-color: #5171aa; outline: none; }
.registration-form textarea { width: 100%; min-height: 200px; resize: vertical; }
.char-count { text-align: left; color: #c00; font-size: 0.9em; margin-top: 0.3em; }
/*********************************************************************************/
/* trl-cert folder                                                                */
/*********************************************************************************/
.cardscert {display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 0.5em; width: 100%; margin: 2em auto;}
.cardcert {align-items: start; justify-content: center; background-color: rgba(256, 256, 256, 0.7); padding: 0.5em; display: grid;}
/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/
.bottom_links {font-size: 1.2em; color: #fff; padding: 0.5em; background: #5171aa; margin-bottom:2em;}
.footer {margin: 2em auto 0 auto; text-align: center; padding-bottom: 2em;}
span.support {background: url('images/coins.svg') no-repeat; background-size: 1.2em auto; background-position: top 3px left; padding-left: 1.5em;}
/*********************************************************************************/
/* Smartphone                                                                    */
/*********************************************************************************/
/* largeur maximum 1800px */
@media (max-width: 1800px) {
}
/* largeur maximum 1400px */
@media (max-width: 1400px) {
.cardscert {display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 0.5em; width: 100%; margin: 2em auto;}
}

/* largeur maximum 1200px */
@media (max-width: 1200px) {
.cardscert {display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 0.5em; width: 100%; margin: 2em auto;}	
table {border: 0; margin: 1em auto; text-align:center;}
table thead {border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
table th {display: block; text-align:center;}
table tr {border-bottom: 3px solid #ddd; display: block; margin-bottom: .625em;}
table td {border-bottom: 1px solid #ddd; display: block; text-align:right; max-width: 400px;}
/* aria-label has no advantage, it won't be read inside a table content: attr(aria-label); */
table td::before {content: attr(data-label); float: left; font-weight: bold;}
table td:last-child { border-bottom: 0;}
}

/* largeur maximum 960px */
@media (max-width: 960px) {
.cardscert {display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 0.5em; width: 100%; margin: 2em auto;}	
.cards3column {display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 1em; width: 100%; margin: 2em auto;}
.column_login {order: 1; grid-column: span 4; }
.column_translators {order: 2; grid-column: span 2; }
.column_translators_loggedin {order: 2; grid-column: span 2; }
.column_organizations {order: 3; grid-column: span 2; }
.column_organizations_loggedin {order: 3; grid-column: span 2; }
.column_admin {order: 3; grid-column: span 2; }
.column_user_actions {order: 3; grid-column: span 2; }
.column_dashboard {order: 1; grid-column: span 2; }
.column_contributor {order: 2; grid-column: span 2; }
.column_info {order: 3; grid-column: span 2; }
.column_news {grid-column: span 2; }
.column_links {grid-column: span 2; }
.column_tfp {grid-column: span 4; }
}
/* largeur maximum 760px */
@media (max-width: 760px){
	#header, #intro , .footer {width: auto; margin:0; }
	#header, #intro {padding: 0;}
	.headline {padding: 1em;}
	.footer {padding: 1em 1em 2em 1em;}
	.headline {background: #5171aa; margin:0;}
	.no_small {display: none;}
	.smallonly {display: inline;}  
	h1, h2, h3, h4, h5, h6  {font-size: 1.1em;}
	h1.top_title {font-size: 1.5em; margin: 0 0 0 0.5em; display: inline-flex; color:#241c1c; }
	#logo img {height: 2em;}
	#languages input.bttn {margin: 0.5em 0.1em;}
	.cardscert {display: grid; grid-template-columns: repeat(1,1fr); grid-gap: 0.5em; width: 100%; margin: 2em auto;}	
	.cards3column {display: grid; grid-template-columns: repeat(1,1fr); grid-gap: 1em; width: 100%; margin: 2em auto;}
	.column_login {order: 1; grid-column: span 1; }
	.column_translators {order: 2; grid-column: span 1; }
	.column_translators_loggedin {order: 2; grid-column: span 1; }
	.column_organizations {order: 3; grid-column: span 1; }
	.column_organizations_loggedin {order: 3; grid-column: span 1; }
	.column_admin {order: 3; grid-column: span 1; }
	.column_user_actions {order: 3; grid-column: span 1; }
	.column_dashboard {order: 1; grid-column: span 1; }
	.column_contributor {order: 2; grid-column: span 1; }
	.column_info {order: 3; grid-column: span 1; }
	.column_news {grid-column: span 1; }
	.column_links {grid-column: span 1; }
	.column_tfp {grid-column: span 1; }
	}