:root {
    --color-c1: #f1f0f2;
    --color-c2: #153e56;
    --color-c3: #979899;
    --color-c4: #536E7E;
    --color-c5: #f44336;
    --color-c6: #870E0E;
    --color-c7: #B9BABC;
    --color-c8: #3E5461;
    --color-c9: #737373;
    --color-c10: #515B68;
    --color-c11: #F9FAFB;
    --transparency: 0%;
}

@font-face {
  font-family: 'Inter';
  font-weight: 100 900; /* Supports all weights */
  font-style: normal;
  font-display: swap;
  src: url('../fonts/InterVariable.woff2') format('woff2-variations');
}

html, body {
    font-family: 'Inter' !important;
    font-size: 16px;
}
th {
    text-transform: lowercase;
}
th::first-letter {
    text-transform: uppercase;
}
.divBreak {
    margin: 0px !important;
}
a.f3-project-1, a.f3-project-2 {
    mask-image: url(images/FABER3D_TW.png);
    background-color: white;
    width: 142px !important;
    height: 24px;
    margin-top: 8px;
    margin-bottom: 8px;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    margin-left: 10px;
}
a.f3-project-1.w3-button:hover, a.f3-project-2.w3-button:hover {
    background-color: #febc20 !important;
}

.f3-table-head {
        color: var(--color-c8);
        background-color: var(--color-c11);
}
.f3-cardLabel {
        color: var(--color-c8);
        background-color: var(--color-c11);
        font-weight: 700;
        display: block;
        padding: 8px;
        width: 50%;
}
div.publish span.f3-cardLabel {
    display: inline-block;
    width: 42%;
}
.f3-cardData {
    color: var(--color-c10);
    /* background-color: hsl(270 0% 85% / 1); */
    padding: 8px;
    border: none;
    border-radius: 4px;
    display: block;
    /* width: 50%; */
}
.f3-company {
    color: var(--color-c1);
    background-color: var(--color-c2);
}
.f3-bold {
    font-weight: bold;
}

.f3-title {
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: 1em;
}
.f3-refresh, .f3-edit, .f3-measures, .f3-setCamera {
    font-weight: 400;
    font-size: 14px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: -0.1em;
}
#modelDiv div.panel div.f3-space-panel {
    margin-top: 4em;
}
#modelDiv div.panel .f3-title-panel {
    color: var(--color-c9);
    font-weight: 700;
    margin-bottom: 1em;
    margin-top: 6em;
}
#modelDiv div.panel .f3-title-panel i.fa.fa-info-circle{
    /* padding-left: 0.7em; */
    margin-left: -0.6em;
    margin-right: 0.2em;
}
#modelDiv div.panel .f3-title i.fa.fa-info-circle{
    /* margin-left: 1em; */
    margin-left: -0.6em;
    margin-right: 0.2em;
}
DIV.spanIcon {
    padding-left: .5em;
    margin-left: -.5em;
    display: inline;
}
DIV.spanIcon i.fa.fa-info-circle{
    margin-left: -0.6em;
    margin-right: 0.2em;
}

.f3-title i.fa.fa-info-circle, .spanIcon i.fa.fa-info-circle, .f3-title-panel i.fa.fa-info-circle, .mainTab i.fa.fa-info-circle {
    visibility: hidden;
}
.f3-title:hover i.fa.fa-info-circle, .spanIcon:hover i.fa.fa-info-circle, .f3-title-panel:hover i.fa.fa-info-circle, .mainTab:hover i.fa.fa-info-circle {
    visibility: initial;
}
i.fa.fa-info-circle.w3-tooltip.SectionInfoIcon {
    margin-left: -1.5em;
    margin-right: 0.6em;
}
.f3-form-head {
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: 1em;
    background-color: pink;
}
.f3-label {
    font-weight: bold;
    color: var(--color-c2);
    display: inline-block;
}
.f3-label::first-letter, .f3-cardLabel::first-letter {
  text-transform: uppercase;
}

.f3-input, .f3-input-block, .f3-input-color, .f3-check, .f3-radio, .f3-select {
    color: var(--color-c2);
    background-color: var(--color-c1);
    padding: 8px;
    border: none;
    border-radius: 4px;
}
.f3-select {
    max-width: 7em;
}
.f3-input.range {
    background-color: initial;
}
.f3-input-block {
    display: block;
    width: 100%;
}
.f3-color {
    padding: 6px;
    border: 0px;
    width: 36px;
    height: 36px;
    margin-top: 6px;
}
.f3-check, .f3-radio {
    width: 24px !important;
    height: 24px;
    position: relative;
    top: 6px;
    accent-color: var(--color-c1);
}

.f3-right {
    float: right;
}
.formButtons {
    display: inline-block;
    width: 23em;
}
.f3-button-new-main {
    border: 2px solid var(--color-c2);
    padding: 4px 16px;
    text-decoration: none;
    border-radius: 9px;
    background: initial;
    cursor: pointer;
}
.f3-button-new-main:hover {
    background-color: #ccc;
}
.f3-red {
    color: #870e0e;
}
.f3-green {
    color: #107b21;
}
div.formButtons .f3-button-new-main.save::before {
  content: "\2713 ";
}

div.formButtons .f3-button-new-main.cancel::before {
  content: "\2717 ";
}
#modelDiv div.panel div.formButtons button {
    float: right;
}
#modelDiv div.panel div.formButtons {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}
#modelDiv div.panel div.formButtons button{
    margin-left: 1em;
}
div#mainTabs {
    position: fixed;
    background: white;
    width: 100%;
    margin-left: 18px;
    z-index: 1;
}

div.f3-buttons-panel {
    font-size: 0px; /* to remove space between buttons when created in html*/
}
div.f3-buttons-panel button {
    font-size: initial; /* restore size removed in f3-buttons-panel */
    color: var(--color-c3);
    border-bottom: 1px solid var(--color-c3);
    padding-bottom: 7px;
    font-weight: 700;
    padding-top: 24px;
    position: relative;
    overflow: visible;
    margin: 0px;
    border-radius: 0px;
}
div.f3-buttons-panel button.active, div.f3-buttons-panel button:hover {
    color: var(--color-c2) !important;
}    
div.f3-buttons-panel button.active:after {
    content: '';
    position: absolute;
    bottom: -1.5px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-c8);
    border-radius: 1.5px;
}


th.Actions.i18n {
    width: 9.5em;
}
table#obj_object_Objects th.Actions.i18n {
    width: 11em;
}
table.obj_configuration th:nth-child(2),
table.obj_configuration td:nth-child(2) {
    max-width: 3em;
    overflow: hidden;
}

th.texture_image, th.normalMap_image, th.roughnessMap_image {
    max-width: 40px;
    overflow: hidden;
}
td.materialImage {
    background-position: center;
    background: content-box;
    padding: 4px;
}

#navbar span#companyName {
    color: #febc20;
    background-color: #536e7e;
    border-radius: 5px;
    padding: 3px 22px;
    margin-top: 5px;
    font-weight: bold;
}

#main .w3-tooltip .f3-tooltip-text {
    position: absolute;
    padding: 0.8em;
    left: 0;
    z-index: 1;
}

span.w3-text.w3-tag.f3-tooltip-text {
    position: absolute;
    width: 300px;
    left: 0px;
}
#main .w3-tooltip .f3-tooltip-text {
    top: 14px;
    width: 40em;
}

#modelDiv .w3-tooltip span.w3-text.w3-tag.f3-tooltip-text, #refObject .w3-tooltip span.w3-text.w3-tag.f3-tooltip-text {
    left: 0px;
    bottom: 14px;
    width: 300px;
    white-space: unset;
    z-index: 4;
}

span.f3-tooltip-text a.w3-bar-item.w3-button {
    display: block;
    background-color: #153e56;
    margin: 0px 5em;
}
span.f3-tooltip-text a.w3-bar-item.w3-button::first-letter {
    text-transform: capitalize;
}

.w3-hoverable tbody tr:hover, .w3-ul.w3-hoverable li:hover {
    background-color: #ededed;
    cursor: pointer;
}
tr:hover td.f3-blue-grey a.w3-button.w3-border.w3-round-xlarge.w3-hover-blue-grey:first-of-type {
    color: #fff !important;
    background-color: #879fab; /* a little lighter that #607d8b (w3-blue-grey) */
}
.w3-hoverable tbody tr.draggable-item td.drag-handle:active {
    background-color: #ededed;
    cursor: grabbing !important;
}
#main .w3-table td, #main .w3-table th, #main .w3-table th:first-child {
    padding: 8px 8px 2px 8px;
}
#main i.fa.fa-edit {
    font-size: 24px;
}
div.f3-sidebar i.fa  {
    width: 26px;
    margin-left: 1em;
}
.f3-active {
    color: #fff !important;
    background-color: var(--color-c4) !important;
    border-left: 8px solid var(--color-c3) !important;
    padding-left: 8px !important;
}
span#loginName {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 140px;
    white-space: nowrap;
}

div.f3-user {
    display: flex;
    bottom: 2em;
    position: absolute;
}

.f3-user #companyName {
    color: var(--color-c7);
}
.f3-user div.w3-bar-item {
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px 8px;
    margin-right: 2em;
}
.f3-user .f3-logout {
    position: absolute;
    right: 0em;
}