:root {
    --menu-w: 250px;
    --menu-item-h: 30px;

    --toolbar-h: 30px;
    --blk-toolbar-h:34px;

    --choice-item-h: 40px;
    --choice-pad: 15px;
    --choice-margin: 15px;

    --dblcol-title-h: 44px;
    --cols-tbname-h: 30px;
    --tabs-h: 50px;
    --bview-h: 30px;
}

.block-account {
    width: 100%;
    height: 100%;
    
    display: flex;
}

.block-account .menu {
    height: 100%;
    width: 300px;
    
    background-color: var(--c1);
}

.block-account .menu .menu-item.selected,
.block-account .menu .menu-item:hover{
    background-color: var(--c0);
}

.block-account .menu .menu-item {
    height: var(--menu-item-h);
    cursor:pointer;
    display: block;
    width: 100%;
    height: 30px;
    background-color: var(--c1);
    color: var(--text-color);
    text-decoration: none;
    line-height: 30px;
    margin: 0px;
    padding: 0px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid grey;
}

.block-account .content .toolbar .bdelacc:hover,
.block-account .content .toolbar .bsave:hover{
    background-color:grey;
}

.block-account .content .toolbar .bdelacc,
.block-account .content .toolbar .bsave{
    border:0;
    height:32px;
    background-color:#4b4b4b;
    color:white;
    border-radius:3px;
}

.block-account .content .toolbar{
    background-color: var(--c2);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: var(--blk-toolbar-h);
    align-items: center;
}

/* .block-account .content { */
/*     display: flex; */
/*     flex-direction: column; */
    
/*     height: 100%; */
/*     width: calc(100% - var(--menu-w)); */
    
/*     /\* background-color: darkgrey; *\/ */
/* } */

.block-account .databases-list .toolbar {
    height: var(--toolbar-h);
    width: 100%;

    display: flex;
}

.block-account .databases-list .databases {
    width: 100%;
    /* height: calc(100% - var(--toolbar-h)); */
    
    display: flex;
    /* flex-direction: column; */
    flex-wrap: wrap;
    
    /* padding: 5px; */
    box-sizing: border-box;
}

.block-account .databases .database-item {
    flex: 1;
    min-width: 250px;
    /* height: 20px; */
    
    display: flex;
    flex-direction: row;
    
    justify-content: flex-start;
    align-items: center;
}

.block-account .databases > * {
    margin: 2px;
}

.block-account .databases .database-item > * {
    height: 100%;
    
    display: flex;
    align-items: center;
}

.block-account .content .maincontent .preferences {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
}

.block-account .content .maincontent .preferences .databases-list {
    /* height: 250px; */
}

/* .block-account .content .maincontent .content { */
/*     width: 100%; */
/*     /\* height: calc(100% - 200px); *\/ */
/*     overflow: auto; */
/* } */

.block-account .content .maincontent {
    height: calc(100% - var(--blk-toolbar-h));
    width: 100%;
}

.block-account .content .maincontent .form-account{
	height:100%;
}

.block-account .content .maincontent .form-account .vgroup .bgroup{
	display:block;
}


.block-account .content .maincontent .form-account .vgroup .bgroup,
.block-account .content .maincontent .form-account .vgroup .hgroup{
	height:25%;
}


.block-account .maincontent .prefcontent {
    width: 100%;
    display: table;
    /* flex-direction: column; */
}

.block-account .maincontent .header {
    background-color: rgb(50,50,50);
    color: white;

    height: initial;
}

.block-account .maincontent .row,
.block-account .maincontent .header {
    display: table-row;
}

.block-account .maincontent .row > *,
.block-account .maincontent .header > *{
    display: table-cell;
    
    text-align: center;
}

.block-account .maincontent .prefcontent .hgroup {
    justify-content: center;
    align-items: center;
}

.block-account .maincontent .prefcontent .hgroup button,
.block-account .maincontent .prefcontent .hgroup .bcheckuncheck{
    margin-left:10px;
}

.block-account .maincontent .row input {
    width: 100px;
}

.block-account .maincontent .header > *:nth-child(1),
.block-account .maincontent .row > *:nth-child(1) {
    max-width: 100px;
}

.block-account .maincontent .row:nth-child(odd){
    background-color: rgba(0,0,0,0.2);
}

.block-account .maincontent .toolbar .views {
    display: flex;
    flex-direction: row;

    justify-content: center;
    align-items: center;
    
    width: 100%;
    height: 100%;

    background-color: grey;
}

.block-account .maincontent .toolbar .views label input{
    /* display:none; */
}

/* .block-account .content .maincontent .form-personal-infos{ */
/*     padding:5px;  */
/*     box-sizing:border-box; */
/* } */

.block-account .content .maincontent .form-personal-infos {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.block-account .content .maincontent .form-personal-infos .tabs {
    display: flex;
    flex-direction: row;
    height: 50px;
}

.block-account .content .maincontent .form-personal-infos .tabs .tab-item {
    flex: 1;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: #333;
    
    box-sizing: border-box;
    
    cursor: pointer;
}

.block-account .content .maincontent .form-personal-infos .tabs .tab-item.selected {
    background-color: #ddd;
    color: var(--text-bcolor);
}

.block-account .content .maincontent .form-personal-infos .tab-contents {
    height: calc(100% - 50px);
    width: 100%;
    
    padding: 10px;

    background-color: #ddd;
    color: black;
    
    box-sizing: border-box;
}

.block-account .content .maincontent .form-personal-infos .tab-contents .tab-content-item.selected {
    display: block;
}

.block-account .content .maincontent .form-personal-infos .tab-contents .tab-content-item {
    display: none;
    
    height: 100%;

    overflow: auto;
}

.block-account .content .maincontent .form-personal-infos .tab-contents .ptop {
    display: flex;
    justify-content: row;
}

.block-account .content .maincontent .form-personal-infos .tab-contents .ptop .visual {
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: #333;

    padding: 15px;
    margin: 10px;
    
    box-sizing: border-box;
}

.block-account .content .maincontent .form-personal-infos .tab-contents .rows {
    width: 100%;
}

.block-account .content .maincontent .form-personal-infos .tab-contents .rows .row-item {
    margin: 10px;
}

.block-account .content .maincontent .form-personal-infos .tab-contents .rows .row-item label {
    display: flex;
    flex-direction: column;
}

.block-account .content .maincontent .form-personal-infos .tab-contents .rows .row-item label > span {
    text-transform: capitalize;
    font-weight: bold;
}

.block-account .content .maincontent .form-personal-infos .tab-contents .rows .row-item label > * {
    flex: 1;
}

/* .block-account .content .maincontent .form-personal-infos fieldset .rows{ */
/*     width:100%; */
/* } */

/* .block-account .content .maincontent .form-personal-infos fieldset .rows .row-item label{ */
/*     width: 100%; */
/*     display: flex; */
/*     flex-direction: column; */
/* } */

/* .block-account .content .maincontent .form-personal-infos fieldset{ */
/*     padding: 5px; */
/*     margin: 0; */
/*     border: 0px; */
/*     width:100%; */
/*     box-sizing:border-box; */
/*     color:black; */
/* } */

/* .block-account .content .maincontent .form-personal-infos fieldset .row-item{ */
/*     width:100%; */
/* } */

/* .block-account .content .maincontent .form-personal-infos fieldset .row-item label span{ */
/*     width: 100px; */
/*     display: block; */
/* } */

/* .block-account .content .maincontent .form-personal-infos fieldset .row-item label input{ */
/*     padding: 3px 5px; */
/*     box-shadow: inset 0 0 2px 1px #000000a3; */
/*     border: 0; */
/*     box-sizing:border-box; */
/* } */

.block-account .maincontent .toolbar .views > * {
    flex: 1;
    text-align: center;
}

.block-account .content .maincontent .form-account .vgroup .vgroup .hgroup .form-label{
    width:100%;
    color: var(--text-color);
    box-sizing:border-box;
    padding-left:5px;
}

.block-account .content .maincontent .form-account .vgroup .vgroup .hgroup .form-label .form-value{
    width: 100%;
    background-color: var(--c0);
    color: var(--text-color);
    padding: 3px 5px;
    display: flex;
    align-items: center;
    height: 50%;
    box-sizing: border-box;
}

.block-account .content .maincontent .form-account .vgroup .bgroup{
    padding: 10px 5px;
    width: 100%;
    border-bottom: 1px solid white;
    box-sizing:border-box;
}

.block-account .content .maincontent .form-account .vgroup .vgroup .hgroup{
    padding: 5px;
    width: 100%;
    border-bottom: 1px solid white;
    box-sizing:border-box;
}

.block-account .content .maincontent .form-account .bresetpassword:hover{
    background-color:#6b6a6a;
}

.block-account .content .maincontent .form-account .bresetpassword{
    padding: 5px 10px;
    width: max-content;
    text-decoration: none;
    background-color: var(--c3);
    box-sizing:border-box;
}

/* PREFERENCES */

.block-account fieldset caption {
    display: block;
    width: 100%;
    background-color: var(--c2);
    color: white;
    font-weight: bold;
}

.block-account .preferences .content .toolbar {
    display: none;
}

.block-account .content {
    width: 100%;
}

.block-account .maincontent {
    width: 100%;
    background-color: var(--c0);
}

.block-account .maincontent .choices {
    height: inherit;
    max-height: -webkit-fill-available;
    width: 100%;
}

.block-account .maincontent .choices > p {
    padding: 0;
    margin: 0;
}

.block-account .maincontent .choices > * {
    padding: var(--choice-pad) !important;
}

.block-account .maincontent .choices .choice-item {
    margin: 0;
    width: 100%;
    height: var(--choice-item-h);
    
    display: flex;
    align-items: center;
    
    border: 5px solid var(--c0);
    font-weight: bold;
}

.block-account .maincontent .choices .choice-item button {
    margin-left: auto;
    background-color: var(--red) !important;
    color: var(--text-color) !important;
}

.block-account .maincontent .choices .choice-item:hover {
    background-color: var(--cimportant);
    color: var(--text-important);
    cursor: pointer;
}

.block-account .maincontent .choices .choice-item.selected:before {
    content: var(--arrow-down); /* "\25BC"; */
}

.block-account .maincontent .choices .choice-item-content {
    height: 0;
    width: 0;
    max-height: 0px;
    
    box-sizing: border-box;
    
    transition: all 0.665s ease-in-out;
    
    background-color: var(--c1);
    
    overflow: hidden;
    opacity: 0;
    
    margin: 0px !important;
    padding: 0px !important;

    border-radius: 3px;
    box-shadow: 0px 0px 2px black;
}

.block-account .maincontent .choices .choice-item-content .tbnames,
.block-account .maincontent .choices .choice-item-content .cols {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    
    /* margin: var(--choice-pad) !important; */
}

.block-account .maincontent .choices .choice-item-content .tbnames > *,
.block-account .maincontent .choices .choice-item-content .cols > * {
    height: 100%;
    /* width: 75%; */
    width: 60%
}

.block-account .maincontent .choices .choice-item-content .cols > .col-selected {
    /* width: 25%; */
    width: 40%;
}

.block-account .maincontent .choices .choice-item-content.selected {
    height: 100%;
    width: calc(100% - var(--choice-margin) * 2) !important;
    opacity: 1;
    max-height: 800px;
    
    margin: var(--choice-margin) !important;
}

.block-account .maincontent .choices .choice-item:before {
    content: var(--arrow-right); /* "\27A4"; */
    padding: 5px;
}

.block-account .maincontent .choices h3 {
    height: var(--dblcol-title-h);
    
    display: flex;
    align-items: center;
    
    padding: 10px;
    margin: 0px;
    
    background-color: var(--cimportant);
    color: var(--text-important) !important;
    box-sizing: border-box;
    
    word-break: break-all;
}

.block-account .maincontent .choices .content {
    height: calc(100% - var(--dblcol-title-h));

    flex-direction: column;
    
    padding: 10px;
    margin: 0;
    box-sizing: border-box;
    overflow: auto;
}

.block-account .maincontent .choices .cols .content {
    height: calc(100% - var(--dblcol-title-h) - var(--tabs-h));
}

.block-account .maincontent .choices .cols .col-selected .content {
    height: calc(100% - var(--dblcol-title-h));
}

.block-account .maincontent .choices .tabs {
    height: var(--tabs-h);
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    
    justify-content: flex-start;
    align-items: center;
}

.block-account .maincontent .tabs .tab-item {
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    height: var(--choice-item-h) !important;
    
    background-color: var(--c1) !important;
    padding: 0 5px !important;
    margin: 5px !important;
}

.block-account .maincontent .choices .tab-col-content {
    height: 100%;
    flex-wrap: wrap;
    flex-direction: column;

    padding: 0;
}

.block-account .maincontent .choices .tbname-item,
.block-account .maincontent .choices .col-item {
    cursor: pointer;
    
    padding: 2px;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.block-account .maincontent .choices .col-all {
    background-color: var(--c0);
}

.block-account .maincontent .choices .col-all .col-item {
    list-style-type: none;
}

.block-account .maincontent .choices ol > li {
    list-style-position: inside;
}

.block-account .maincontent .choices .tbname-item:hover,
.block-account .maincontent .choices .col-item:hover {
    background-color: var(--cimportant);
    color: var(--text-important);
}

.block-account .content .toolbar > * {
    color: var(--text-important);
    background-color: var(--cimportant);
    
    box-shadow: 0px 0px 2px black;
}

.block-account .content .toolbar > .breinit {
    background-color: var(--cimportant);
    color: var(--text-important);
}

.block-account .content .choices .vgroup {
    height: 100%;
}

.block-account .content .choices .others > .vgroup {
    gap: 15px;
}

.block-account .content .choices .others > .vgroup > .vgroup > div {
    padding: 10px;
}

.block-account .content .choices .others > .vgroup > .vgroup > .otherprefs {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.block-account .content .choices .others .otherprefs label {
    display: flex;
    gap: 5px;
}

.block-account .content .choices .others .otherprefs label > span {
    display : flex;
    flex-direction : row;
    align-items : center;
}

.block-account .content .choices .vgroup > .hgroup {
    height: calc(100% - var(--cols-tbname-h) - var(--bview-h));
}

.block-account .content .choices .vgroup .tbnames {
    height: var(--cols-tbname-h);
}

.block-account .content .choices .hgroup .tabnames {
    display: flex;
    flex-direction: column;
    
    background-color: rgba(0,0,0,0.1);
}

.block-account .content .choices .hgroup .tabnames .tabname-item {
    height: var(--cols-tbname-h);

    display: flex;
    justify-content: center;
    align-items: center;

    width: 100px;
}

.block-account .content .choices .hgroup .tabnames .tabname-item.selected {
    background-color: var(--cimportantdark);
    color: var(--text-important);
}

.block-account .content .choices .hgroup .tabnames .tabname-item:hover {
    background-color: var(--cimportant);
    color: var(--text-important);

    cursor: pointer;
}

.block-account .content .choices .vgroup .tbnames > .tbname-item {
    display: flex;
    justify-content: center;
    align-items: center;

    font-style: italic;
    height: var(--cols-tbname-h);
}

.block-account .content .choices .vgroup .tbnames > .tbname-item.selected {
    background-color: var(--cimportantdark);
    color: var(--text-important);

    font-weight: bold;
}

.block-account .tab-col-content {
    display: none;
}

.block-account .tab-col-content.selected {
    display: flex;
}

.block-account .tabs .tab-item:hover {
    background-color: var(--cimportantdark) !important;
    color: var(--text-important);
}

.block-account .tabs .tab-item.selected {
    background-color: var(--cimportantdark) !important;
    color: var(--text-important);
    
    font-weight: bold;
}

.block-account .tabs-contents .tab-item-content {
    display: none;
}

.block-account .tabs-contents .tab-item-content.selected {
    display: block;
}

.block-account .col-selected > .hgroup {
    justify-content: space-between;
    background-color: var(--cimportant);
    color: var(--text-important);
}

.block-account .col-selected .tools {
    height: var(--dblcol-title-h);
}

.block-account .col-selected .tools button {
    color: var(--text-important) !important;
    background-color: var(--cimportant);
}

.block-account .choose_view {
    height: var(--bview-h);
    color: var(--text-important);
    background-color: var(--cimportant);
}

.block-account .cols .swappers {
    display: flex;
}

.block-account .choices p {
    transition: all 0.365s ease-in-out;
    height: auto;
    max-height: 400px;

    overflow: hidden;
    
    opacity: 1.0;
}

.block-account .choices p.fold {
    height: 0px !important;
    max-height: 0px !important;
    opacity: 0 !important;
    
    padding: 0 !important;
}

.block-account .themes {
    display: flex;
    flex-direction: row;
    
    justify-content: center;
    align-items: center;

    height: 130px;
    gap: 10px;
    /* padding: 10px; */
    
    box-sizing: border-box;
}

.block-account .themes label {
    display: flex;
    flex-direction: row;
    
    height: 30px;
    font-size: 22px;
    text-transform: capitalize;

    align-items: center;
    
    gap: 5px;
}

.block-account .themes .theme-item {
    display: flex;
    
    flex-direction: column;
    
    height: 100%;
    flex: 1;
    
    background-color: var(--c5);
    color: var(--text-color);
    
    border: 1px solid white;
}

.block-account .themes .theme-item .palet {
    display: flex;
    flex-direction: row;
    
    height: 50%;
    width: 100%;
}

.block-account .themes .theme-item .palet .color {
    flex: 1;
    min-height: 100%;
}