@import "icons.css";
@import "fontawesome.css";
:root {
  --white-border: #cecece;        
  --white-black: #2f2f2f;
  --white-font: #092433; 
  --white-font-light: #c9c9c9; 
  --white-red: #eb4247;      
  --white-grey: #5b5b5b;        
  --white-green: #369b2d;
  --white-lightgreen: #7bb350;
  --white-blue: #4ea9ff;
  --white-orange: #db8723;
  --white-gold: #c1af38;
  --white-turquoise: #08d7af;
  --white-darkblue: #1a83ff;
  --white-lightpurple: #5d73ff;
  --white-purple: #af45ed;    
  --white-pink: #df4ead;
  --white-darkred: #cf3737;    
  --white-darkgrey: #6f6f6f;  
  --white-folder: #dbc56f; 
  --white-silver-light: #e7e7e7; /*#cfcfcf;*/
  --white-white: #fff;
  --scrollbarBG: #CFD8DC;
  --thumbBG: #90A4AE;
}
@font-face {
	font-family: 'Manrope'; 
	src: url(../fonts/Manrope-VariableFont_wght.ttf); 
}

html,
body {   
  color: var(--white-font);
  /*
  font-family: system-ui;
  font-size: 14px;
  */
  font-family: 'Manrope';
  font-size: 14px;    
  font-feature-settings: normal;    
  font-variant-alternates: normal;
  font-variant-caps: normal;
  font-variant-east-asian: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-variant-position: normal;
  text-rendering: optimizespeed;    
}

body {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;        
}
.vline {   
	height: 100%;
  padding: 10px 0;
}
.unselected {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.link {
    color: var(--white-red)!important;
    text-decoration: underline;
    cursor: pointer;
}

span.alert {
    display: flex;
    font-weight: 600;
    color: #181818!important;
    border-radius: 6px;
    width: 300px;
}

.cursor-pointer {
    cursor: pointer;
}

a.mute:hover {
    color: unset;
}

a.mute {
    text-decoration: none;
    color: unset;
}

.opacity40 {
    opacity: .40;
}

.opacity50 {
    opacity: .50;
}

.w20 {
    width: 20px!important;
}

.w30 {
    width: 30px!important;
}

.w40 {
    width: 40px!important;
}

.w50 {
    width: 50px!important;
}

.w100 {
    width: 100px!important;
}

.w150 {
    width: 150px!important;
}

.w200 {
    width: 200px!important;
}

.w250 {
    width: 250px!important;
}

.wp10 {
    width: 10%!important;
}

.wp15 {
    width: 15%!important;
}

.wp20 {
    width: 20%!important;
}

.wp25 {
    width: 25%!important;
}

.wp30 {
    width: 30%!important;
}

.wp40 {
    width: 40%!important;
}

.wp50 {
    width: 50%!important;
}

.wp60 {
    width: 60%!important;
}

.wp70 {
    width: 70%!important;
}

.wp80 {
    width: 80%!important;
}

.wp90 {
    width: 90%!important;
}

.wp100 {
    width: 100%!important;
}

.p-0 {
    padding: 0px!important;
}

.p-1 {
    padding: 5px!important;
}

.p-2 {
    padding: 10px!important;
}

.p-3 {
    padding: 15px!important;
}

.pt-0 {
    padding: 0px!important;
}

.pt-1 {
    padding: 5px!important;
}

.pt-2 {
    padding: 10px!important;
}

.pt-3 {
    padding: 15px!important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pr-1 {
    padding-right: 0.25rem !important;
}

.pr-2 {
    padding-right: 0.5rem !important;
}

.pr-3 {
    padding-right: 0.75rem !important;
}

.pr-4 {
    padding-right: 1rem !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.pl-1 {
    padding-left: 0.25rem !important;
}

.pl-2 {
    padding-left: 0.5rem !important;
}

.pl-3 {
    padding-left: 0.75rem !important;
}

.pl-4 {
    padding-left: 1rem !important;
}

.m-0 {
    margin: 0 !important;
}

.ml-0 {
    margin-right: 0 !important;
}

.ml-1 {
    margin-right: 0.25rem !important;
}

.ml-2 {
    margin-right: 0.5rem !important;
}

.ml-3 {
    margin-right: 1rem !important;
}

.ml-4 {
    margin-right: 1.5rem !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-05 {
    margin-top: 0.15rem !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mt-6 {
    margin-top: 12px !important;
}

.mt-7 {
    margin-top: 30px !important;
}

.mt-8 {
    margin-top: 10px !important;
}

.mt-9 {
    margin-top: 20px !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mr-1 {
    margin-right: 0.25rem !important;
}

.mr-2 {
    margin-right: 0.5rem !important;
}

.mr-3 {
    margin-right: 1rem !important;
}

.mr-4 {
    margin-right: 1.5rem !important;
}

.mr-5 {
    margin-right: 3rem !important;
}

.mr-6 {
    margin-right: 12px !important;
}

.mr-7 {
    margin-right: 30px !important;
}

.mr-8 {
    margin-right: 10px !important;
}

.mr-9 {
    margin-right: 20px !important;
}

.mr-auto {
    margin-right: auto !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.mb-6 {
    margin-bottom: 12px !important;
}

.mb-7 {
    margin-bottom: 30px !important;
}

.mb-8 {
    margin-bottom: 10px !important;
}

.mb-9 {
    margin-bottom: 20px !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.ml-1 {
    margin-left: 0.25em !important;
}

.ml-2 {
    margin-left: 0.5rem !important;
}


.p-0 {
    padding: 0!important;
}

.row {    
    flex-direction: row;
}

.direction-column {    
    flex-direction: column;
}

.direction-row {    
    flex-direction:row;
}

.d-none {
    display: none!important;
}

.d-flex {
    display: flex!important;
}


.fs-1 {
    font-size: 0.625rem !important;
}

.fs-2 {
    font-size: 0.75rem !important;
}

.fs-3 {
    font-size: 0.875rem !important;
}

.fs-4 {
    font-size: 1rem !important;
}

.fs-5 {
    font-size: 1.125rem !important;
}

.fs-6 {
    font-size: 1.25rem !important;
}

.fs-7 {
    font-size: calc(1.275rem + 0.3vw) !important;
}

.fs-8 {
    font-size: calc(1.3125rem + 0.75vw) !important;
}

.fs-9 {
    font-size: calc(1.35rem + 1.2vw) !important;
}

.fs-10 {
    font-size: calc(1.375rem + 1.5vw) !important;
}

.fs-11 {
    font-size: calc(1.40625rem + 1.875vw) !important;
}

.fs-12 {
    font-size: calc(1.425rem + 2.1vw) !important;
}

.fst-italic {
    font-style: italic !important;
}

.fst-normal {
    font-style: normal !important;
}

.fw-lighter {
    font-weight: 300 !important;
}

.fw-light {
    font-weight: 300 !important;
}

.fw-normal {
    font-weight: 400 !important;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.fw-bold {
    font-weight: 500 !important;
}

.fw-bolder {
    font-weight: 700 !important;
}

.lh-1 {
    line-height: 1 !important;
}

.lh-sm {
    line-height: 1.25 !important;
}

.lh-base {
    line-height: 1.5 !important;
}

.lh-lg {
    line-height: 2 !important;
}

.content-center {
    justify-content: center!important;
}

.content-between {
    justify-content: space-between!important;
    width: 100%;
}

.vertical-center {
    align-items:center!important;
}

.content-left {
    justify-content: flex-start!important;
}

.content-right {
    justify-content: flex-end!important;
}

.text-start {
    text-align: left !important;
}

.text-end {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.text-decoration-none {
    text-decoration: none !important;
}

.text-decoration-underline {
    text-decoration: underline !important;
}

.text-decoration-line-through {
    text-decoration: line-through !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.text-capitalize {
    text-transform: capitalize !important;
}

.text-wrap {
    white-space: normal !important;
}

.text-nowrap {
    white-space: nowrap !important;
}

i.ti.squad {
    border-radius: 6px;
    background-color: #e1e1e1;
    padding: 3px;
    cursor: pointer;
}

.stripe {
    background: repeating-linear-gradient(45deg,#ffffff -5px,#ffffff 3px 0px,#d9d9d9 0px,#dfdfdf 16.2px);
}

input[type="submit"] {
    display: flex;
    justify-content: center;
    padding: 2px 20px;
}

.button.btn-sm{
    display: flex;
    justify-content: center;
    padding: 4px 20px;
    border-radius: 50px;
    border: 1px solid #cecece;
}

/* main-header */

.main-header {
    display: flex;
    flex-direction: row;  
    justify-content: space-between;
    align-items: center;
    width: 100%;    
    border-bottom: 1px solid #cecece;
}

.main-header > div {
    padding: 15px 10px;
}

.userblock {
    display: flex;
    flex-direction: row;
}

/* content__aside */

.main-content__aside {
    display: flex;
    flex-direction: row;
}

/*
position: fixed;
    z-index: 999;
    opacity: .9;
    top: 0;
    right: 0;
    height: 100%;
    background-color: white;
    padding: 10px 10px;
    width: 230px;
    border-left: 1px solid var(--white-border);
*/
.sidebar-help-column {
    padding: 10px 10px;
    width: 200px;
    border-left: 1px solid var(--white-border);
}

.sidebar-help-column > h4 {
    padding: 0 10px;
    margin: 0;
}

.sidebar-menu-icons {
    padding: 10px 5px;
    width: 50px;
    border-right: 8px solid var(--white-silver-light);
    display: flex;
    flex-direction: column;
}

.sidebar-menu-column {
    padding: 10px 10px; 
    min-width: 220px;  
    max-width: 250px;
}

.sidebar-menu-column > h4 {
    padding: 0 10px;
    margin: 0;
}

.sidebar-menu__subitems {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding-left: 0;
}

.sidebar-menu__subitem {
    display: flex;    
    flex-direction: row;
    padding: 5px 10px;    
}

.sidebar-menu__subitem > a {    
    text-decoration: none;        
    color: var(--white-font);
    transition: all .2s ease-in-out
}

.sidebar-menu__subitem > a.active {
    color: var(--white-red)!important;
}

.sidebar-menu__subitem > a:hover {    
    text-decoration: none;        
    color: var(--white-red);
}


/* content__body */

main.main-content {
    display: flex;    
    flex-direction: row;
    border-bottom: 1px solid var(--white-border);
    width: 100%;
}

.main-content__body {
    display: block;
    flex-direction: column;
    min-width: 500px;
    min-height: 80vh;
    width: 100%;
}

.main-content__body {
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

.main-content__body::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
}

.main-content__body::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG) ;
    border-radius: 6px;
    border: 3px solid var(--scrollbarBG);
}

input.form-control {
    display: flex;
    border: 1px solid #939393;
    border-radius: 2px;
    padding: 3px 2px;
    outline: 0px;
}

sup {
    display: contents;
    font-size: medium;
    color: red;
}

.content {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 10px 20px;
    min-width: 750px;
    margin: 0 auto 24px;
}

/* tab-menu */

.tab-menu {
    display: flex;
    justify-content: start;
    flex-direction: row;
    list-style: none;
    width: 100%;
    margin-top: 0;
    padding: 0; 
}

.tab-menu__subitem {
    display: flex;
    justify-content: center;
    padding: 8px 20px;  
}

.tab-menu__subitem:first-child {
    border-top-left-radius: 6px;
}

.tab-menu__subitem > a {
    text-decoration: none;
    color: var(--white-font);
    transition: all .2s ease-in-out
}

.tab-menu__subitem > a:hover {
   color: var(--white-red);
}

.tab-menu__subitem.active {
    border-bottom: 2px solid var(--white-red);
}

/* project */

.project {
    width: 100%;
}

.project-content__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 8px 10px;
    border-left: 1px solid var(--white-border);
    border-top: 1px solid var(--white-border);
    border-right: 1px solid var(--white-border);    
    border-bottom: 1px solid var(--white-border); 
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;   
    background-color: #f3f3f3;
}

.header-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: bold;
}

.header-tools {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: bold;
}

.project-content__body {   
    display: flex;
    border-left: 1px solid var(--white-border);    
    border-right: 1px solid var(--white-border);    
    border-bottom: 1px solid var(--white-border); 
}

/* project-models */

.header-density {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: bold;
    padding: 0 5px;
    border-radius: 4px;
}
.header-density.green {    
    background-color: #42c371;
    color: White;
}
.header-density.yellow {
    background-color: #beb30c;
    color: White;
}
.header-density.orange {
    background-color: #b9680a;
    color: White;
}
.header-density.red { 
    background-color: #db2a2a;
    color: White;
}
.project-model__items {
    display: flex;
    justify-content: center;
    flex-direction: column;
    list-style: none;    
    margin-top: 0;
    padding: 10px 10px 0 10px;
}
li.project-model__item {
    margin-bottom: 10px;
}

.project-model-item__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 8px 10px;
    background-color: unset;
    color: var(--white-font);
    font-weight: 600;
    border-top: 1px solid var(--white-border);    
    border-left: 1px solid var(--white-border);    
    border-right: 1px solid var(--white-border);
    border-bottom: 1px solid var(--white-border);    
}

.project-model-item__header .row {
    display: flex;
    flex-direction: row;
    align-items: center;  
}

.project-model-item__header .row > div {
    display: flex;    
}

.project-model-item .project-model-item__body {
    display: none;
    flex-direction: column;
    justify-content: start;
    padding: 8px 10px;    
    border-left: 1px solid var(--white-border);    
    border-right: 1px solid var(--white-border);     
    border-bottom: 1px solid var(--white-border);    
}

.project-model-item .project-model-item__body.show {
    display: flex!important; 
}

.project-model-item .project-model-item__body.hide {
    display: none!important; 
}

/* digests */

.project-content__items {
    list-style: none;
    padding: 10px;
    margin: 0;
}

.digest-row-add {
    display: flex!important;
    flex-direction: row;
    align-items: center;
}

table.digest>tbody>tr>th {
    padding: 2px 5px;
    font-weight: 400;
    color: #575757;
}

table.digest>tbody>tr:hover {
    background-color: whitesmoke;
}

table.digest>tbody>tr>td {
    padding: 4px 5px;
    border-bottom: 1px solid #f1f1f1;
}

table.digest>tbody>tr>td>a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333333;
    font-weight: 500;
}

table.digest>tbody>tr.mute {
    background-color: #ebebeb;
}

table.digest>tbody>tr.digest_header>th {
    color: #b9b9b9!important;
}

table.digest>table td, th {
    border: 0!important;
}


.form-add {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    list-style: none;    
    margin-top: 0;
    padding: 0;
}

.form-add > h4 {
    margin: 10px 0 0px;
    padding-left: 5px;
    border-left: 3px solid #c9c9ac;
    text-transform: uppercase;
}

.form-edit__title {
    display: flex;
    margin: 10px 0 0px;
    text-transform: uppercase; 
}

.form-edit__body {
    display: flex;
    flex-direction: column;
}

.form-edit__body > div.row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-flow: column;
}

.form-edit__body > div > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 5px;
}

.form-edit__body > div > div:last-child {
    grid-column: span 5;
}

.form-edit__body > div > div > select {    
    display: flex;
    height: 32px;
    border:0px;
    outline:0px;
    border-radius: 2px;
    background-color: var(--white-silver-light);
    -moz-box-sizing: content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}

.form-edit__body > div > div > select:focus {   
    background-color: var(--white-white);
}

.form-edit__body > div > div > textarea {    
    display: flex;   
    border:0px;
    outline:0px; 
    background-color: var(--white-silver-light);  
}

.form-edit__body > div > div > textarea:focus {   
    background-color: var(--white-white);
}

.form-edit__body > div > div > input[type="text"] {    
    display: flex;
    height: 26px;
    border:0px;
    outline:0px;
    background-color: var(--white-silver-light);
}

.form-edit__body > div > div > input[type="text"]:focus {   
    background-color: var(--white-white);
}

.border-light {
    border: 1px solid var(--white-silver-light)!important;
}

.form-edit__body > div > div >input[type="number"] {
    display: flex;
    height: 26px;
    border:0px;
    outline:0px;
    background-color: var(--white-silver-light);
}

.form-edit__body > div > div > input[type="number"]:focus {   
    background-color: var(--white-white);
}


.form-edit__body > div > div > label {    
    font-size: 12px;
    font-weight: normal;
    margin: 10px 0 5px;
    border:0px;
    outline:0px;
}

/* header colors  */

.project-model-item .project-model-item__header {
    display: flex;    
    border: 0;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.project-model-item .project-model-item__header.blue {   
    color: #fff!important;    
    background-color: var(--white-blue)!important; 
}

.project-model-item .project-model-item__header.green {    
    color: #fff!important;    
    background-color: var(--white-green)!important; 
}

.project-model-item .project-model-item__header.lightgreen {   
    color: #fff!important;    
    background-color: var(--white-lightgreen)!important; 
}

.project-model-item .project-model-item__header.purple {
    color: #fff!important;    
    background-color: var(--white-purple)!important; 
}

.project-model-item .project-model-item__header.lightpurple {
    color: #fff!important;    
    background-color: var(--white-lightpurple)!important; 
}

.project-model-item .project-model-item__header.pink {
    color: #fff!important;    
    background-color: var(--white-pink)!important; 
}

.project-model-item .project-model-item__header.orange {   
    color: #fff!important;    
    background-color: var(--white-orange)!important; 
}

.project-model-item .project-model-item__header.gold {
    color: #fff!important;    
    background-color: var(--white-gold)!important; 
}

.project-model-item .project-model-item__header.turquoise {
    color: #fff!important;    
    background-color: var(--white-turquoise)!important; 
}

.project-model-item .project-model-item__header.darkblue {
    color: #fff!important;    
    background-color: var(--white-darkblue)!important; 
}

.project-model-item .project-model-item__header.darkred {
    color: #fff!important;    
    background-color: var(--white-darkred)!important; 
}

.project-model-item .project-model-item__header.darkgrey {
    color: #fff!important;    
    background-color: var(--white-darkgrey)!important; 
}

.project-model-item .project-model-item__header.fire {
    color: #fff!important;    
    background: linear-gradient(290deg, #ffd400, #ff9900, #ff6000, #dd4444 );
}

.project-model-item .project-model-item__header.silver {
    font-family: inherit;
    font-weight: 600;
    color: #676767!important;
    background-color: #e1e1e1!important;
}

/* background-colog*/ 

.bg-blue {
    background-color: var(--white-blue)!important;
    color: #fff!important;
}

.bg-green {
    background-color: var(--white-green)!important; 
    color: #fff!important;
}

.bg-lightgreen {   
    background-color: var(--white-lightgreen)!important;
    color: #fff!important;
}

.bg-purple {      
    background-color: var(--white-purple)!important; 
    color: #fff!important;
}

.bg-lightpurple {  
    background-color: var(--white-lightpurple)!important; 
    color: #f7f7f7!important;
}

.bg-pink {   
    background-color: var(--white-pink)!important; 
    color: #fff!important;
}

.bg-orange {    
    background-color: var(--white-orange)!important; 
    color: #fff!important;
}

.bg-gold {    
    background-color: var(--white-gold)!important; 
    color: #fff!important;
}

.bg-turquoise {    
    background-color: var(--white-turquoise)!important; 
    color: #fff!important;
}

.bg-darkblue {    
    background-color: var(--white-darkblue)!important; 
    color: #fff!important;
}

.bg-darkred {    
    background-color: var(--white-darkred)!important; 
    color: #fff!important;
}

.bg-darkgrey {   
    background-color: var(--white-darkgrey)!important; 
    color: #fff!important;
}

.bg-fire {  
    background: linear-gradient(290deg, #ffd400, #ff9900, #ff6000, #dd4444 )!important;
    color: #fff!important;
}

.bg-mute {      
    background-color: var(--white-black)!important; 
    color: #fff!important;
}

.project-model-item .project-model-item__body {    
    background-color: var(--white-black)!important; 
    color: var(--white-font-light)!important;    
    border-bottom: 1px solid var(--white-black)!important;   
    border-left: 1px solid var(--white-black)!important; 
    border-right: 1px solid var(--white-black)!important; 
}

.project-model-item .project-model-item__body .table {
    border-collapse: collapse;
}

.project-model-item .project-model-item__body .table td, th {
    padding: 2px 5px;
    border-right: 1px solid var(--white-grey); 
    border-bottom: 1px solid var(--white-grey);
    color: var(--white-font-light);
}

.project-content__alert.danger {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    color: #fff!important;
    background-color: #c31f1f!important;
    border: 0px solid;
    outline: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.project-content__alert.success {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px; 
    color: #fff!important;
    background-color: #4cc334!important;
    border: 0px solid;
    outline: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.project-content__alert>span {
    font-size: smaller;
    font-weight: 600;
}

/* model-add */

.form-add {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    list-style: none;    
    margin-top: 0;
    padding: 0;
}

.form-add > h4 {
    margin: 10px 0 0px;
    padding-left: 5px;
    border-left: 3px solid #c9c9ac;
    text-transform: uppercase;
}

.form-add__title {
    display: flex;
    margin: 10px 0 0px;
    text-transform: uppercase; 
}

.form-add__body {
    display: flex;
    flex-direction: column;
}

.form-add__body > div.row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-flow: column;
}

.form-add__body > div > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 5px;
}

.form-add__body > div > div:last-child {
    grid-column: span 5;
}

.form-add__body > div > div > select {    
    display: flex;
    height: 32px;
    border:0px;
    outline:0px;
    border-radius: 2px;
    background-color: var(--white-silver-light);
    -moz-box-sizing: content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}

.form-add__body > div > div > select:focus {   
    background-color: var(--white-white);
}

.form-add__body > div > div > textarea {    
    display: flex;   
    border:0px;
    outline:0px; 
    background-color: var(--white-silver-light);  
}

.form-add__body > div > div > textarea:focus {   
    background-color: var(--white-white);
}

.form-add__body > div > div > input[type="text"] {    
    display: flex;
    height: 26px;
    border:0px;
    outline:0px;
    background-color: var(--white-silver-light);
}

.form-add__body > div > div > input[type="text"]:focus {   
    background-color: var(--white-white);
}

.border-light {
    border: 1px solid var(--white-silver-light)!important;
}

.form-add__body > div > div >input[type="number"] {
    display: flex;
    height: 26px;
    border:0px;
    outline:0px;
    background-color: var(--white-silver-light);
}

.form-add__body > div > div > input[type="number"]:focus {   
    background-color: var(--white-white);
}


.form-add__body > div > div > label {    
    font-size: 12px;
    font-weight: normal;
    margin: 10px 0 5px;
    border:0px;
    outline:0px;
}

.model-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.color_invert>td {
    color: #2f2f2f!important;
    background-color: #c4c9c4!important;
}

.color_invert>th {
    color: #2f2f2f!important;
    background-color: #c4c9c4!important;
}

.color_border {
    border-top: 5px solid var(--white-silver-light)!important;
    border-bottom: 5px solid var(--white-silver-light)!important;
}

/* setup index */

.log-memo {
    display: flex;
    border: 1px solid #cecece;
    background-color: whitesmoke;
    padding: 0px 10px;
    min-width: 300px;
}

.add-account {
    display: flex;
    flex-direction: column;
    padding: 0px 10px;
    min-width: 300px;
}

.form-account {
    display: flex;
    flex-direction: column;
}

form .input {
    display: flex;
    flex-direction: column;
}

/* console */

.console.open {   
    top: 0px!important;
} 

.console.open ~ .container {
    margin-top: 50%;
}

.console {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #181818;
    opacity: 0.90;
    color: #FFF;
    position: fixed;
    top: -50%;
    left: 0;
    width: 100%;
    height: 50%;
    transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);  
    box-sizing: border-box;
}  

.messages {   
    font-family: monospace;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 0 0 10px;
    overflow: hidden;
    overflow-y: scroll;
    color: #cfcfcf;
    line-height: 1.4;
} 

.messages::-webkit-scrollbar-thumb {	
	background-color: rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 1px rgba(255,255,255,0.5);
}

.messages::-webkit-scrollbar {
  width: 10px; height: 3px;
}

.command {
    padding: 10px 10px;
    margin-top: 5px;
    border-top: 1px solid #cecece;
    background-color: #292929;
    outline: unset;
} 

/* topmenu */

span.userblock-name {
    display: flex;
    align-items: center;
}

/* model_preview */

.btn-create {
    display: flex!important;
    flex-direction: row!important;
    justify-content: center!important;
    padding: 4px 10px!important;
    border: 1px solid #cecece;
    background-color: #efefef;
    border-radius: 2px;
    cursor: pointer;
    width: 100px;
}

ul.model_preview {
    display: inline-block;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    padding: 0;
    margin: 0 0 5px 0;
}

ul.model_preview>li {
    display: flex;
    flex-direction: column;
    width: 100%;
}

ul.model_preview>li>div.row-inline {
    display: flex;
    flex-direction: row;
}

.scroll-y {
    display: block;
    overflow: hidden;
    overflow-y: scroll;
    padding: 10px;
    margin: 0;
}

.scroll-x {
    display: block;
    overflow: hidden;
    overflow-x: scroll;
    padding: 10px;
}

.row-inline .input {
    width: 150px;
    padding: 2px 2px;
    border: 1px solid #b1b1b1;
    border-top: 0px;
    border-right: 0px;
    outline: 0;
    margin: 0;
}

.model_columns .mute {    
    background-color: var(--white-black)!important;
    color: #e5e5e5;
}

ul.model_columns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    list-style: none;
    padding: 0;
}

ul.model_columns>li {
    padding: 2px 2px;
    border-right: 1px solid #a5a5a5;
    border-bottom: 1px solid #a5a5a5;
    border-top: 0px;
    outline: 0;
    margin: 0;
}

ul.model_columns>li:last-child{    
    border-right: 0!important;
}

ul.model_columns.b-white>li {
   /* border: 1px solid #ffffff!important;*/
}

ul.model_columns>li.center {
   text-align: center!important;
}

ul.model_columns>li.sm {
    width: 80px!important;
}

ul.model_columns>li.md {
    width: 100px!important;
}

ul.model_columns>li.lg {
    width: 150px!important;
}

ul.model_columns>li.xl {
    width: 250px!important;
}

ul.model_columns>li.strong {
    font-weight: bolder;
}

ul.model_columns>li.syncfill {
    background-color: #bbe6b7;
}

li.bg-select {
    background-color: rgb(0, 0, 0, 0.2);
}

.shadow-scroll-x {
    background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white), linear-gradient(to right, rgb(185 185 185 / 50%), rgba(255, 255, 255, 0)), linear-gradient(to left, rgb(199 199 199 / 50%), rgba(255, 255, 255, 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* architect */

.architect-log {
    display: flex;
    flex-direction: column;
    list-style: none;
    height: 400px;
}

.architect-log>li {
    margin-bottom: 10px;
}

.architect-action {
    display: flex;
    justify-content: start;
    padding: 10px;
}

li.border-left-red { 
    border-left: 2px solid #d52929;
    padding: 1px 0 1px 10px;
}

li.border-left-silver {
    border-left: 2px solid #d9d9d9;
    padding: 1px 0 1px 10px;
}

li.border-left-green {
    border-left: 2px solid #91e535;
    padding: 1px 0 1px 10px;
}

/* projects */

.maker-name {
    display: flex!important;
    flex-direction: row!important;
    justify-content: flex-start!important;
    align-items: baseline!important;
    color: #383838;
}

.maker-status > span.free {
    color: #02c900;
    font-weight: 600;
}

.maker-status > span.busy {
    color: #9c1414;
    font-weight: 600;
}

.maker-icons-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 -2px -1px 0;
    list-style: none;
}

.maker-icons-list-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    text-align: center;
    padding: 0.5rem;
    border-right: 1px solid var(--white-border);
    border-bottom: 1px solid var(--white-border);
    color: inherit;
    cursor: pointer;
}

.maker-icons-list-item.active {    
    background-color: #dbdbdb;
}

/* panel */

.direction-column2 {
    display: flex;
    flex-direction: column;
    align-items: baseline;
}
.sidebar-menu__modules {
    display: flex;
    flex-direction: column;
}
.sidebar-menu__module:hover {   
    border: 2px solid var(--white-black)!important;
}
.sidebar-menu__module {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 2px solid #c1c1c1;
    border-radius: 2px;
    overflow: hidden;    
    margin-bottom: 10px;
    cursor: pointer;
}
.sidebar-menu__module.active {   
    /*box-shadow: 2px 2px rgb(0 0 0 / 20%);*/
    background: rgb(0 0 0 / 5%);
    cursor: default;
}
.sidebar-menu__module-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f3f3f3;
    text-transform: uppercase;
    border-bottom: 1px solid #c1c1c1;
    padding: 2px 6px 0 5px;
    font-weight: 700;
}
.sidebar-menu__module-title .build {
    color: #c1c1c1;
}
.sidebar-menu__module-body {    
    padding: 15px 10px;
}
.sidebar-menu__module-depend {
    display: flex;
    text-transform: uppercase;
    align-items: center;
    padding: 5px 0;
}
.sidebar-menu__module-desc {
    display: flex;
    font-weight: 300;
    color: #676767;
    text-transform: none;
    align-items: center;
    margin-bottom: 5px;
}
.sidebar-menu__module-bg {
    position: absolute;    
    text-transform: uppercase;
    font-size: 77px;
    font-weight: bolder;
    color: #ebebeb;
    z-index: -1;
}
.sidebar-menu__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 15px;
}
.sidebar-menu__header > div {
    display: flex;
    flex-direction: column;
}
.sidebar-menu__header > div.header > a {
    color: #0088ff;
}
.sidebar-menu__header > div.header > span {
    font-size: 18px;
    font-weight: 600;
}
.sidebar-menu__header > div.tool {
    padding-top: 4px;
}
.sidebar-menu__modules-tool-1 {
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: space-between;    
    margin-bottom: 5px;
}
.sidebar-menu__modules-tool-2 {
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: flex-start;
    margin-bottom: 5px;
}
.sidebar-menu__modules-tool-3 {
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: space-between;    
    margin-bottom: 5px;
}
.sidebar-menu__module-settings {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid #c1c1c1;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 10px;
    padding: 4px 4px 4px 10px;    
}
.sidebar-menu__module-depend > div {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.sidebar-menu__module-depend input {
    height: 26px!important;
    outline: 0px;
}
.sidebar-menu__module-depend select {
    text-transform: uppercase;
    height: 32px!important;
    outline: 0px;
}
.btn-setup-project {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: var(--white-black)!important;
    border: 0px solid #3d3d3d;
    width: 35px;
    height: 35px;
    border-radius: 50%!important;
    transition: 0s background-color;
}
.btn-setup-project.active {
    background-color: var(--white-red)!important;
}
.sidebar-menu-icons .ti.active {
    color: var(--white-red)!important;
}

/* module */

ul.module-settings__form {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.module-settings__form > li {
    justify-content: space-between;
    background-color: #efefef;
    border: 2px solid #efefef;
    margin-bottom: 10px;
    padding: 4px 10px;
}

ul.module-settings__form > li:hover {
    border: 2px solid #cfcfcf!important;
}

/* module-prints */

.module-prints {
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
    min-width: 750px;
}

.module-prints > thead > tr > th {
    color: #252525;
    list-style: none;
    font-weight: 300;
    border-radius: 4px;
    padding: 7px 10px;
    margin-bottom: 10px;
    border: 1px solid #cecece;
}

.module-prints > tbody > tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    padding: 7px 10px; 
    border-radius: 4px;
    border: 1px solid #cecece;
}

.module-prints > tbody > tr > td {
    display: flex;
    color: #252525;
    list-style: none;
    font-weight: 300;    
    font-size: small;
    line-height: 1.4;       
}

/* dev-board */

.dev-board {
    display: flex;
    flex-direction: row;  
    align-items: flex-start;
}

.dev-board > div > fieldset {
    color: #414141;
    list-style: none;
    font-weight: 300;
    border-radius: 4px;
    padding: 7px 10px;
    margin-bottom: 10px;
    border: 1px solid #cecece;
}

.dev-board > div > fieldset > legend {
    color: #1b1b1b;    
    font-weight: 700;
}

/* level inside 1 */

.dev-board > div > fieldset > ul {
    list-style: none;
    padding-left: 5px;
}

.dev-board > div > fieldset > ul > li {
    font-weight: 500;
}

.dev-board > div > fieldset > ul > li > span {
    color: var(--white-red)!important; 
}

/* level inside 2 */

.dev-board > div > fieldset > ul > li > ul {
    list-style: none;
    padding-left: 20px;
}

.dev-board > div > fieldset > ul > li > ul > li {
    font-weight: 500;
}

.dev-board > div > fieldset > ul > li > ul > li > span {
    color: #2e85d1;   
}

/* level inside 3 */

.dev-board > div > fieldset > ul > li > ul > li > ul {
    list-style: none;
    padding-left: 35px;
}

.dev-board > div > fieldset > ul > li > ul > li > ul > li {
    font-weight: 500;
}

.dev-board > div > fieldset > ul > li > ul > li > ul > li > span {
    color: #2e85d1;   
}

/* level inside 3 */

.dev-board > div > fieldset > ul > li > ul > li > ul > li > ul  {
    list-style: none;
    padding-left: 50px;
}

.dev-board > div > fieldset > ul > li > ul > li > ul > li > li > ul  {
    font-weight: 500;
}

.dev-board > div > fieldset > ul > li > ul > li > ul > li > li > ul > span {
    color: #2e85d1;   
}

/* catalog */

.body-title {
    font-size:18px;
    font-weight:600;
    padding: 15px 0 10px;
}
.body-title > span {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #979797;
}
ul.module-create__steps {  
    padding-left: 30px;
    min-width: 180px;
}
ul.module-create__steps > li {
    padding: 5px;
    list-style: decimal;
}
ul.module-create__form > li {  
    display: flex;
    align-items: flex-end;
    list-style: none;
    margin-bottom: 10px;    
}
ul.module-create__form {
    margin: 0;
    padding: 0;
}
.module-create-token {
    display: flex;
    width: 150px;
    height: 15px;
    justify-content: center;
    align-items: center;
    border: 2px solid #d7d7d7;
    color: #464646;
    font-weight: bolder;
    padding: 10px;
}
.module-create-token.active {   
    border: 2px solid #00cf53!important;
    color: #00cf53!important;
}
.module-create__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}
.module-create__content .footer {
    padding: 30px 5px;
}
.module-create__form > li > fieldset {
    margin: 0;
}
.manual-field > div {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.module-create__form > li > div > div.example {
    color: #a3a3a3;
}
ul.module-create__list {  
    padding: 0px 5px 0px 0px;
}
ul.module-create__list > li {
    justify-content: space-between;
    padding: 25px 20px;
    background-color: #efefef;
    margin-bottom: 10px;
}
.direction-tools {
    display: flex;
    align-items: center;
}
.module-create__step .active {
    color: var(--white-red)!important;
}
.module-create-identificator-status.busy {
    font-weight: bolder;
    color: var(--white-red)!important;
}
.module-create-identificator{
    border: 1px solid #767676;
    border-radius: 2px;  
    height:23px;
    width:250px;
}
.module-create-identificator.busy{   
    border: 1px solid var(--white-red)!important;    
}
ul.module-create__form > li > div > label {
    font-weight: 600;
}
.json-data {
    padding: 6px;
    margin: 0 15px 0;
    background-color: #ffffff;
    border-radius: 6px;
}
span.thin {
    font-weight: 400;
    color: #00b6ff; /*#7ac1ff;*/
}

/* catalog */
.project-module__items {
    display: flex;
    justify-content: center;
    flex-direction: column;
    list-style: none;    
    margin-top: 0;
    padding: 10px 10px 0 10px;
}
li.project-module__item {
    display: flex;
    font-weight: 500;
    padding: 15px 0px;
    margin-bottom: 10px;
    background-color: #f7f7f7;
    border-radius: 2px;
}
li.project-module__item:hover {
    background-color: aliceblue;
}
li.project-module__item > div > label {
    font-size: medium;
    font-weight: bolder;
    text-transform: uppercase;
}

/* actions editor */

.project-model-item .project-actions-item__body {    
    background-color: var(--white-black)!important; 
    color: var(--white-font-light)!important;    
    border-bottom: 1px solid var(--white-black)!important;   
    border-left: 1px solid var(--white-black)!important; 
    border-right: 1px solid var(--white-black)!important; 
}

.project-model-item .project-actions-item__body .table {
    border-collapse: collapse;
}

.project-model-item .project-actions-item__body .table td, th {
    padding: 2px 5px;
    color: var(--white-font-light);
}

.project-model-item .project-actions-item__body .table > tbody > tr {
    border-bottom: 1px solid var(--white-grey); 
    height: 50px;
}

.project-model-item .project-actions-item__body .table > tbody > tr:last-child {
    border-bottom: none;
}

.action-title {
    text-transform: none;
}

div.project-module-tabpages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
    padding: 0;
}

div.project-module-tabpages>a {
    display: flex;
    font-weight: 600;
    border-left: 2px solid #000000!important;
    background-color: #e1e1e1;
    color: #676767;
    padding: 2px 6px;
    margin-right: 10px;
    margin-bottom: 10px;
    text-decoration: none;
    cursor: pointer; 
}

div.project-module-tabpages>a.active {
    background-color: var(--white-red)!important;
    color: #fff;
}

a.module-mod {
    background-color: #616161;
    color: white;
    text-decoration: none;
    padding: 2px 2px;
    border-radius: 3px;
}

/* roles */

table.roles {
    border-collapse: collapse;   
}

table.roles > tbody > tr {
    height: 30px;
}

table.roles > tbody > tr:hover {
    background-color: whitesmoke;
}

/* hover */

.hover-background:hover {
    background-color: var(--white-red)!important;  
    transition-delay:0.1s;
    transition: 0.5s;
}  
.hover-background:not(:hover) {  
    transition: 0.5s;
}
.hover-color:hover {
    color: var(--white-red)!important;  
    transition-delay:0.1s;
    transition: 0.5s;
}  
.hover-color:not(:hover) {  
    transition: 0.5s;
}

/* animation :: show fadein */

.anim-show {
    animation: 1s show ease;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes show {
    from { opacity: 0; }
    to { opacity: 1; }
}

.block1 {
    animation-delay: 0.1s;
}

.block2 {
    animation-delay: 0.2s;
}

.block3 {
    animation-delay: 0.3s;
}

.block4 {
    animation-delay: 0.4s;
}

.block5 {
    animation-delay: 0.5s;
}

.block6 {
    animation-delay: 0.6s;
}

.block7 {
    animation-delay: 0.7s;
}

.block8 {
    animation-delay: 0.8s;
}

.block9 {
    animation-delay: 0.9s;
}

/* module :: tezaurus */

form.tezaurus-search {
    display: flex;
}

.tezaurus-search-input > input {
    border: none;
    background: transparent;
    margin: 0;
    width: 100%;
    padding: 7px 8px;
    font-size: 14px;
    color: inherit;
    border: 1px solid transparent;
    border-radius: inherit;
}

.tezaurus-search-input > button {
    text-indent: -999px;
    overflow: hidden;
    width: 40px;    
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: inherit;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
    cursor: pointer;
    opacity: 0.7;
}

.tezaurus-search-input > button:hover {
    opacity: 1;
}
  
.tezaurus-search-input > button:focus, input:focus {
    outline: none;
}
   
div.tezaurus-search-input {    
    border: 1px solid #cecece;
    width: 100%;
    padding: 0;
}

/* keywords add */

form.tezaurus-formadd {
    display: flex;
}
.tezaurus-formadd-input > input {
    border: none;
    background: transparent;
    margin: 0;
    width: 100%;
    padding: 7px 8px;
    font-size: 14px;
    color: inherit;
    border: 1px solid transparent;
    border-radius: inherit;
}

.tezaurus-formadd-input > button {
    text-indent: -999px;
    overflow: hidden;
    width: 40px;    
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: inherit;
    background: transparent url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-plus' width='24' height='24' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M12 5l0 14' /><path d='M5 12l14 0' /></svg>") no-repeat center;
    cursor: pointer;
    opacity: 0.7;
}

.tezaurus-formadd-input > button:hover {
    opacity: 1;
}
  
.tezaurus-formadd-input > button:focus, input:focus {
    outline: none;
}
   
div.tezaurus-formadd-input {    
    border: 1px solid #cecece;
    width: 100%;
    padding: 0;
}


ul.tezaurus-articles {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding-left: 0;
    list-style: none;
}

ul.tezaurus-articles > li {
    display: flex;
    margin: 0 0 10px 0;
}

ul.tezaurus-articles > li:hover {
    display: flex;
    background-color: whitesmoke;
    margin: 0 0 10px 0;
}

ul.tezaurus-articles > li:last-child {
    display: flex;
    margin: 0;
}

/* tezaurus-tags */

ul.tezaurus-tags {
    display: flex;
    flex-direction: row;
    padding-left: 0;
    list-style: none;
}

ul.tezaurus-tags > li {
    display: flex;
    flex-direction: column;
    padding: 0px 10px 10px 0;
}

/* tezaurus-article */

ul.tezaurus-article {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

ul.tezaurus-article > li {
    line-height: 1.6;
    font-weight: 400;
    position: relative;
    min-height: 15px;
    margin-bottom: 5px;
}

i.tezaurus-article-button-edit {
    position: absolute;
    background-color: #fff;
    border-radius: 50px;
    padding: 3px;
    opacity: .5;
    left: 0;
    top: 0;
}

.tezaurus-article-editor-types {
  display: flex;
  flex-direction: row;
  background-color: #efefef;
  margin-top: 20px;
  padding: 0 5px;
  border: 0;
}

.tezaurus-article-editor-types > div > div {
    display: flex;
    flex-direction: row;
}

.tezaurus-article-editor-types > div > div > div  {
    padding: 5px 0;
    margin-right: 10px;
    border-radius: 4px;
    cursor: pointer;
}

.tezaurus-article-editor-toolbar {
    padding: 5px 0 5px 0;
    border-bottom: 1px solid #cecece;
    border-top: 0;
}

.tezaurus-article-editor-toolbar > div {
    display: flex;
    flex-direction: row;
}

.tezaurus-article-editor-toolbar > div > div {
    display: flex;
    flex-direction: row;
}

.tezaurus-article-editor-toolbar > div > div > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: medium;
    margin: 0 5px;
    border: 0px;
    padding: 5px;
}

.tezaurus-article-editor-toolbar > div > div > div.select {
    border-radius: 4px;
    background-color: #e0e0e0; 
}

.tezaurus-article-editor-toolbar > div > div > div.active {
    border-radius: 4px;
    background-color: #c5dcff; 
}

.tezaurus-article-editor-input {
    display: flex;
    border: 1px solid #cecece;
    border-top: 0;
}

.tezaurus-article-editor-input .textarea:focus {    
    outline: 0;
}

.tezaurus-article-editor-input .textarea {   
    font-size: 12px;
    overflow: auto;
    padding: 5px;
    width: 99%;
    min-height: 150px;
}

.tezaurus-article-editor-input .files {
    font-size: medium;
    padding: 5px;
    width: 99%;
    
}

/* section files */

.tezaurus-article > li.files {
    padding: 20px 0;
}

.tezaurus-article > li.files > div > ul {
    list-style: none;
    padding: 0;
}

.tezaurus-article > li.files > div > ul > li {
    padding: 3px;
}

/* text style */

.tezaurus-article-editor-input .view-sun {
    background: #f4f4f4!important;
    border-left: 3px solid #f36d33;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
    font-weight: 300;
}

div.view-sun {
    padding: 50px;
    border-radius: 12px;
    background: #f4f4f4!important;
    border-left: 3px solid #f36d33;
    color: #666;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
    font-weight: 300;
}

.tezaurus-article-editor-input .view-moon {
    color: #c1c1c1!important;
    background: #252525!important;
    border-left: 3px solid #f36d33;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
    font-weight: 300;
}

div.view-moon {
    padding: 50px;
    border-radius: 12px;
    color: #c1c1c1!important;
    background: #252525!important;
    border: 1px solid #ddd;
    border-left: 3px solid #f36d33;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
    font-weight: 300;
}
.tezaurus-article-editor-toolbar > div > div > div.fontsize {
    display: flex;
    min-width: 90px;
    justify-content: center;
    background-color: aliceblue;
    border-radius: 4px;
    min-width:90px;
    padding: 0;
}

ul.tezaurus-section-gallery {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    list-style: none;
    padding: 0;
}

li.tezaurus-section-gallery-item {
    display: flex;
    padding: 1px;
}

ul.tezaurus-section-gallery > li > a {  
    padding: 0;
    margin: 0;
}

ul.tezaurus-section-gallery > li > a > img {  
    width: 150px;
    height: auto;
}

.font-size-10 {
    font-size: 10px!important;
}
.font-size-11 {
    font-size: 12px!important;
}
.font-size-12 {
    font-size: 14px!important;
}
.font-size-13 {
    font-size: 16px!important;
}
.font-size-14 {
    font-size: 18px!important;
}
.font-size-15 {
    font-size: 20px!important;
}
.font-size-16 {
    font-size: 22px!important;
}
.font-size-17 {
    font-size: 24px!important;
}
.font-size-18 {
    font-size: 26px!important;
}
.font-size-19 {
    font-size: 28px!important;
}
.font-size-20 {
    font-size: 30px!important;
}
.font-size-21 {
    font-size: 32px!important;
}
.font-size-22 {
    font-size: 34px!important;
}
.font-size-23 {
    font-size: 36px!important;
}
.font-size-24 {
    font-size: 38px!important;
}
.font-size-25 {
    font-size: 40px!important;
}
.font-italic {
    font-style: italic!important;
}
.font-bolder {
    font-weight: 700!important;
}

/* section uploder */

.tezaurus-uploder label {
    cursor: pointer;
}

.tezaurus-uploder #uploader {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

/* keywords */

ul.tezaurus-keywords-header {
    padding: 0;
    list-style: none;
}

ul.tezaurus-keywords-header > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

ul.tezaurus-keywords-items {
    padding: 0;
    list-style: none;
}

ul.tezaurus-keywords-items > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

ul.tezaurus-keywords-items > li:hover {
    background-color: whitesmoke;
}

ul.tezaurus-keywords-items > li > span {
    display: flex;
    font-weight: 400;    
    justify-content: center;
    background-color: #ebebeb;
    border-radius: 4px;
    padding: 3px 5px;
}

.tezaurus-article i.ti.active {
    color: #ffffff;
    background-color: #78e761;
    border-radius: 50px;
    padding: 2px;
}

.tezaurus-article u {
    background-color: #ffed4c;
    text-decoration: none;
}
/* animation :: show and hide */

.anim-fade {
    -webkit-animation: fadeinout 1s linear forwards;
    animation: fadeinout 1s linear forwards;
    opacity: 0;
}

@-webkit-keyframes fadeinout {
  50% { opacity: 1; }
}

@keyframes fadeinout {
  50% { opacity: 1; }
}

/* animation :: rotate */

.rotate:hover {   
    -moz-animation: spin 1.4s 1 linear;
    -o-animation: spin 1.4s 1 linear;
    -webkit-animation: spin 1.4s 1 linear;
    animation: spin 1.4s 1 linear;
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(359deg); }
}
@-moz-keyframes spin {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(359deg); }
}
@-o-keyframes spin {
    0% { -o-transform: rotate(0deg); }
    100% { -o-transform: rotate(359deg); }
}
@-ms-keyframes spin {
    0% { -ms-transform: rotate(0deg); }
    100% { -ms-transform: rotate(359deg); }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
}