@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


:root{
    
    /*main theme*/
    
    --nui-color-dark-0:rgba(11,11,11,1);
    --nui-color-dark-1:rgba(22,22,22,1);
    --nui-color-dark-2:rgba(44,44,44,1);
    --nui-color-dark-3:rgba(55,55,55,1);
    --nui-color-dark-4:rgba(77,77,77,1);
    --nui-color-dark-8:rgba(125,125,125,1);
    
    
    --nui-color-secondary-1:rgba(245,230,197,1);
    
    
    --nui-color-accent-1:rgba(255,110,31,1);
    --nui-color-accent-2:rgb(255 160 108);
    
    
    --nui-color-level-0:rgb(137 137 137);
    --nui-color-level-1:rgb(40 173 63);
    --nui-color-level-2:rgb(215 164 14);
    --nui-color-level-3:rgb(221 58 19);
    
    --login-side-width:60vw;
    
}

body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}


.xfLoginLeftSide {
    background-color:var(--nui-color-dark-2);
    position: fixed;
    top:0px;
    left:0px;
    bottom:0px;
    width:var(--login-side-width);
    transition:all 0.5s ease;
}

.xfLoginRightSide {
    background-color:var(--nui-color-dark-1);
    position: fixed;
    top:0px;
    right:0px;
    bottom:0px;
    width:calc(100% - var(--login-side-width));
    transition:all 0.5s ease;
    padding:35px;
    padding-top:100px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
}

.xfField {
        position: relative;
    padding: 5px 10px;
    height: 38px;
    color: white;
    background-color: unset;
    
}

.xfField:has(textarea) {
        position: relative;
    padding: 5px 10px;
    height: 78px;
    color: white;
    background-color: unset;
    
}

.xfField:has(input:focus) input {
    border-bottom: 1px solid var(--nui-color-accent-1);
}

.xfField:has(textarea:focus) textarea {
    border-bottom: 1px solid var(--nui-color-accent-1);
}

.xfField:has(input:focus) .xfFieldIcon .material-symbols-rounded {
    color: var(--nui-color-accent-1);
}

.xfField input {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: unset;
    border: none;
    outline: none;
    padding:0px 10px;
    padding-left:32px;
    color: white;
    border-bottom: 1px solid var(--nui-color-dark-4);
    
    transition: all 0.2s ease;
}

.xfField textarea {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: unset;
    border: none;
    outline: none;
    padding:7px 10px;
    padding-left:32px;
    color: white;
    border-bottom: 1px solid var(--nui-color-dark-4);
    
    transition: all 0.2s ease;
    resize: none;
}

.xfField select {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: unset;
    border: none;
    outline: none;
    padding:0px 10px;
    padding-left:32px;
    color: white;
    border-bottom: 1px solid var(--nui-color-dark-4);
    
    transition: all 0.2s ease;
}

.xfField select:has(option[value=""]:checked) {
    color: var(--nui-color-dark-8);
}

.xfField select::before {
    border-top:none;
}

.xfField select::before {
    border-bottom:none;
}

.xfField select option {
    background-color:var(--nui-color-dark-1);
    color:white;
    border:none;
}

.xfField input:-internal-autofill-selected {
    background-color: red;
    color:red !important;
}

.xfField input::placeholder {
    color:transparent;
}

.xfField textarea::placeholder {
    color:transparent;
}

.xfLeftLabel {
    position: absolute;
    top: 0px;
    background-color: unset;
    bottom: 0px;
    left: 32px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    color:var(--nui-color-dark-8); 
}

.xfField:has(textarea)  .xfLeftLabel {
    bottom: unset;
    height: 38px;
}

.xfField:has(input:focus) .xfLeftLabel, .xfField:has(input:not(:placeholder-shown)) .xfLeftLabel, .xfField:has(textarea:focus) .xfLeftLabel, .xfField:has(textarea:not(:placeholder-shown)) .xfLeftLabel {
    visibility: hidden;
}

.xfMainMenu {
    background-color:var(--nui-color-dark-2);
    position: fixed;
    top:0px;
    left:0px;
    bottom:0px;
    width:100px;
    transition:all 0.5s ease;
    color:white;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.xfMainContainer {
    background-color:var(--nui-color-dark-1);
    position: fixed;
    top:0px;
    right:0px;
    bottom:0px;
    width:calc(100% - 100px);
    transition:all 0.5s ease;
    color:white;
    padding: 25px;
    padding-top: 100px;
    padding-left: 35px; 
    
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    grid-auto-rows: minmax(100px, auto);
}

.material-symbols-rounded {
    color:var(--nui-color-secondary-1);
    margin-top: 7px;
}

.xfToolButton {
    position: relative;
    padding: 10px 0px;
    width: 100%;
    text-align: center;
    transition: all 0.2s ease; 
}

.xfToolButton:hover {
    background-color:var(--nui-color-dark-3);
}

.xfFavTool {
    width: 100%;
}

.xfBotTool {
    width: 100%;
    padding-bottom:20px;
}

.xfTopTool {
    padding-top:20px;
    width: 100%;
}

.xfAppIcon {
    padding-top: 5px;
}

.xfAppIcon .material-symbols-rounded {
    font-size: 35px;
}

.xfAppName {
    position: absolute;
    bottom: -25px;
    width: 100%;
    text-align: center;
    font-size: 0.85em;
}

.xfApp {
    background-color: var(--nui-color-dark-2);
    width: 80px;
    height: 80px;
    border-radius: 20px;
    margin: 25px;
    margin-bottom: 50px;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.xfAppContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.xfAddFav {
    display: none;
}

.xfToolBtnMark {
    display: none;
    position: absolute;
    background-color: var(--nui-color-accent-1);
    width: 3px;
    height: calc(100% - 14px);
    top: 7px;
    border-radius: 0px 20px 20px 0px;
}

.xfMainBanner {    
    top: 0px;
    position: fixed;
    right: 0px;
    left: 100px;
    height: 97px;
    z-index: 10;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.xfUserBubble {
    border: solid 2px var(--nui-color-dark-8);
    height: 55px;
    width: 55px;
    border-radius: 55px;
    position: relative; 
}

.xfUserPicture {
    background-color: var(--nui-color-accent-1);
    position: absolute;
    top: 3px;
    left: 3px;
    bottom: 3px;
    right: 3px;
    border-radius: 55px;
}

.xfRightBanner {
    padding-right:20px;
}

.xfModuleName {
    color:var(--nui-color-secondary-1);
    font-size: 1.8em;
    font-weight: 500;
}

.xfLeftBanner {
    padding-left:35px; 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.xfUserMenu {
    display: none;
    background-color: var(--nui-color-dark-3);
    z-index: 2;
    position: fixed;
    top: 97px;
    right: 20px;
    width: 300px;
    border-radius: 25px;
    padding: 10px 0px;
    overflow: hidden;
}
}

.xfUmeIcon {
    
}

.xfUmeIcon .material-symbols-rounded{
     color: var(--nui-color-dark-8);
}

.xfUmeLabel {
    color: var(--nui-color-dark-8);
}

.xfUserMenuElement {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    padding: 7px 20px;
    gap: 15px;
    transition: all 0.2s ease;
}

.xfUserMenuElement:hover {
    background-color: var(--nui-color-dark-4);
}

tr {
    height:70px;
    background-color:var(--nui-color-dark-2);
    border-bottom: 2px solid var(--nui-color-dark-4);   
    position: relative;
}

tr:hover {
    background-color:var(--nui-color-dark-3);
}

table {
    width:100%;
    border-spacing: 0;
  border-collapse: separate;
  border-radius: 20px;
      overflow: hidden;
}

td, th {
    padding: 13px 17px;
    border-bottom: 1px solid var(--nui-color-dark-4); 
}

tbody tr:last-child td {
    border-bottom: none;
}

.xfCustomerBubble {
    height: 35px;
    width: 35px;
    display: inline-block;
    vertical-align: -10px;
    border-radius: 35px;
    margin-right: 10px;
}

.xfCustomerName {
    display: inline;
}

.xfTableSearchField {
    background-color: unset;
    border: none;
    outline: none;
    color: white;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 50px;
    padding: 13px 17px;
    padding-left: 45px;
}

.xfTableSearchField::placeholder {
    color:rgba(0,0,0,0);
    opacity:0;
}

th .xfTableSearchField:focus ~ label, th .xfTableSearchField:not(:placeholder-shown) ~ label {
    visibility: hidden;
}

th .xfTableSearchField:focus ~ .material-symbols-rounded, th .xfTableSearchField:not(:placeholder-shown) ~ .material-symbols-rounded {
    color:var(--nui-color-accent-1);
}

th {
    position: relative; 
}

th .material-symbols-rounded {
    vertical-align: baseline;
}

th label {
    vertical-align: super;
}

.xfPhoneContainer {
    width:302px;
    aspect-ratio:6.4/13.9;
    border:var(--nui-color-dark-4) 10px solid;
    border-radius:50px;
    position: relative;
    box-sizing: content-box;
    overflow: hidden;
}

.xfPhoneNotch {
    background-color:var(--nui-color-dark-4);  
    width:122px;
    aspect-ratio:2.6/0.6;
    border-radius: 0px 0px 15px 15px;
    left:89px;
    top:0px;
    position: absolute;
}

.xfPhoneAsset {
    position: absolute;
    width:100%;
}

.xfScrollableContent::-webkit-scrollbar {
    display: none;
} 

.xfScrollableContent {
    position: absolute;
    top:72px;
    left:0px;
    right:0px;
    bottom:0px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.xfPhoneAsset2 {
    position: sticky;
    top:0px;
}

.xfPhoneAsset3 {
    top:0px;
}

.xfBlankSpace {
    position: relative;
    height:140px;
    width:100%;
}

.xfPostsContainer {
    background-color:white;
    min-height:300px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1px;
}

.xfPhoneGridPost {
    background-color:rgba(200,200,200,1);
    width:100px;
    height:100px;
    background-size: cover;
    background-position: center;
    color: transparent;
    position: relative;
}

.xfModuleRightPanel {
    grid-column: 3;
    grid-row: 1;
    position: relative;
}

.xfModuleLeftPanel {
    display: flex;
    flex-direction: column;
    
    grid-column: 1/3;
    grid-row: 1;
    position: relative;
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    grid-auto-rows: minmax(100px, auto);
}

.xfTile {
    position: relative;
    background-color:var(--nui-color-dark-2);
    border-radius:20px;
    padding:20px;
    padding-top:65px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.xfUiButton {
    background-color: var(--nui-color-accent-1);
    border: none;
    color: white;
    padding: 5px 14px;
    border-radius: 20px;
        display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    min-height: 34px;
    min-width: 68px;
    transition: all 0.3s ease;
}

.xfUiInput[type="file"]::file-selector-button {
    background-color: var(--nui-color-dark-4); 
    color: white;
    border: none;
    padding: 5px 14px;
    border-radius: 20px;
    margin-right: 15px;
}

.xfTileTitle {
    position: absolute;
    top:20px;
    left:20px;
    color:var(--nui-color-secondary-1);
    font-size: 1.2em;
    font-weight: 500;
}

.xfTileTitle2 {
    left:90px;
}

.xfGaleryItem {
    position: relative;
    width:125px;
    height:125px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius:10px;
    overflow: hidden;
}

.xfGalery {
    flex: 1 0 auto;
}

.xfItemName {
    background-color: var(--nui-color-dark-1);
    font-size: 0.65em;
    padding: 2px 8px;
    position: absolute;
    border-radius: 20px;
    bottom: 3px;
    right: 3px;
}

.xfArianeSep {
    color:var(--nui-color-secondary-1);
    font-size: 1.8em;
    font-weight: 500;
    margin: 0px 10px;
    margin-top: 8px;
}

.xfModuleSub {
    color:var(--nui-color-secondary-1);
    font-size: 1.8em;
    font-weight: 500;
    text-transform: lowercase;
}

.xfModuleTools {
        display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    background-color: var(--nui-color-dark-2);
    padding: 5px;
    border-radius: 100px;
    margin-left: 25px;
}

.xfModuleToolsBtn {
    width: 45px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding-bottom: 6px;
    border-radius: 30px;
}

.xfGaleryBox {
    position: absolute;
    top:75px;
    left:15px;
    bottom:15px;
    right:15px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1 0 auto;
    align-content: flex-start;
    overflow-y: scroll;
    padding:5px;
}

.xfGaleryItemSelected {
    border: solid 2px var(--nui-color-accent-1);
    outline: rgb(255 110 31 / 56%);
    outline-style: solid;
    outline-width: 3px;
}

.xfUsed {
    background-color:rgba(0,0,0,0.7);
    position: absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    display: none;
}

.xfTableOrderCol {
    position: absolute;
    right:10px;
    display: inline;
}

.xfFieldIcon {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.xfField:has(textarea) .xfFieldIcon {
    bottom: unset;
    height: 38px;
}

.xfFieldIcon .material-symbols-rounded {
    margin-top:0px;
    transition: all 0.2s ease;
}

.xfFieldPredict {
    position: absolute;
    top: 0px;
    background-color: unset;
    bottom: 0px;
    left: 32px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    color:var(--nui-color-dark-8); 
    visibility: hidden;
}

.xfField:has(input:focus) .xfFieldPredict {
    visibility: visible;
}

.xfForm {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    width: 100%;
    gap:20px;
}

.xfFormBlock {
    flex:1 0 48%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    background-color: var(--nui-color-dark-2);
    border-radius: 20px;
    padding: 20px;
    padding-top: 75px;
}

.xfFlexFieldFull {
    flex:0 0 100%;
}

.xfFlexFieldXSmall {
    flex:0 0 100px;
}

.xfFlexFieldXSAdjust {
    flex: 1 1 calc(100% - 150px);
}

.xfFlexFieldSmall {
    flex:0 0 200px;
}

.xfFlexFieldSAdjust {
    flex: 1 1 calc(100% - 250px);
}

.xfFieldError {
    color: red;
    position: absolute;
    bottom: -18px;
    font-size: 0.7em;
    left: 0px;
    display: none;
}

.xfMap {
    width:300px;
    position: relative;
}

.xfPoint {
    background-color:red;
    height:5px;
    width:5px;
    border-radius:10px;
    position:absolute;
}

.xfMatHorAxis {
    position: absolute;
    height:2px;
    background-color:var(--nui-color-dark-8);
    width:calc(100% + 90px);
    left:-45px;
    top:calc(50% - 1px);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    

}

.xfMatHorAxis .material-symbols-rounded{
    margin-top: 0px;
    margin-right: -7px;
    color:var(--nui-color-dark-8);
}

.xfMatVertAxis {
    position: absolute;
    width:2px;
    background-color:var(--nui-color-dark-8);
    height:calc(100% + 90px);
    top:-45px;
    left:calc(50% - 1px);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
}
.xfMatVertAxis .material-symbols-rounded{
    margin-top: -7px;
    color:var(--nui-color-dark-8);
}

.xfEisenMatrix {
    position:relative;
    width:100%;
    aspect-ratio:3/2;
    margin:45px;
}

.xfMatElement {
    position: absolute; 
    height: 20px;
    width: 20px;
    background-color: var(--nui-color-accent-1);
    border-radius: 20px;
    box-shadow: var(--nui-color-accent-1) 0px 0px 32px 8px;
    transition:all 0.5s ease;
    top:calc(50% - 10px);
    left:calc(50% - 10px);
}

.xfMatLabel {
    position: absolute;
    width:50%;
    height:50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    font-weight: 200;
    color: var(--nui-color-dark-8);
}

.xfMatLabel1 {
    top:0%;
    left:0%;
}

.xfMatLabel2 {
    top:0%;
    left:50%;
}

.xfMatLabel3 {
    top:50%;
    left:0%;
}

.xfMatLabel4 {
    top:50%;
    left:50%;
}

.xfDisplayNone {
    display: none;
}

.xfConfirmButton {
    background-color: green;
    position: relative;
    border-radius: 20px;
    padding: 6px 12px;
    width: 104px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

.xfPhoneToolBox {
        position: absolute;
    background-color: var(--nui-color-dark-3);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 50px;
    left: 15px;
    right: 15px;
    bottom: -70px;
    transition: all 0.2s ease;
}

.xfPhoneContainer:hover .xfPhoneToolBox {
    bottom: 15px;
}

.xfPhoneToolBox .xfModuleToolsBtn:hover {
    background-color: var(--nui-color-dark-4);  
}

.xfInsertMarkLeft {
    display:none;
    position:absolute;
    visibility: hidden;
    background-color: var(--nui-color-accent-1);
    width: 10px;
    top: 10px;
    bottom: 10px;
    height: unset;
    border-radius: 20px;
    left: -5px;
    box-shadow: var(--nui-color-accent-1) 0px 0px 20px 
}

.xfInsertMarkRight {
    display:none;
    position:absolute;
    visibility: hidden;
    background-color: var(--nui-color-accent-1);
    width: 10px;
    top: 10px;
    bottom: 10px;
    height: unset;
    border-radius: 20px;
    right: -5px;
    box-shadow: var(--nui-color-accent-1) 0px 0px 20px 
}

.xfPhoneGridPost:hover .xfInsertMarkRight {
    visibility: visible;
}

.xfPhoneGridPost:hover + .xfPhoneGridPost .xfInsertMarkLeft, .xfPhoneGridPost:hover + style + .xfPhoneGridPost .xfInsertMarkLeft {
    visibility: visible;
}

.xfDelThis {
    position: absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color:var(--nui-color-accent-1);
    opacity: 0.3;
    visibility: hidden;
    display:none;
}

.xfPhoneGridPost:hover .xfDelThis {
    visibility: visible;
}

.xfCalendar {
    width:100%;
}

.xfCalendar td, .xfCalendar th{
    border-bottom: none;
    border-radius: 50px;
    width: 50px;
    padding:0px;
    text-align: center;
}

.xfCalendar tr {
    background-color: unset;
    height: 50px;
}

.xfCalendar tr:hover {
    background-color: unset;
}

.xfCalSelDay:hover {
    background-color:var(--nui-color-dark-4);
}

.xfCalDateSel {
    border: solid 3px var(--nui-color-accent-1);
}
.xfLoginRightSide .xfField {
    width:100%;
    margin-bottom:10px;
}

.xfLoginRightSide .xfUiButton {
    margin-top:20px;
}


.xfUiLoader {
      width: 20px;
    padding: 3px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ffffff;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}


.xfCalSelector {
    
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    width: 350px;
}

.xfUiButton .material-symbols-rounded {
    color: white;
    margin-top: 0px;
}

.xfUiButtonDisabled {
    background-color: var(--nui-color-dark-4);
    cursor: not-allowed;
}

.xfCalendarContainer {
    position: relative;
    width:350px;
}

.xfUiLoaderContainer {
    position: absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.xfPlanThis {
    position: absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color:var(--nui-color-dark-2);
    opacity: 0.6;
}

.xfPlanThisAdd:hover {
    background-color:green;
}

.xfPlanThisDel {
    position: absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color:red;
    opacity: 0;
    
}
.xfPlanThisDel:hover {
    opacity: 0.6;
}

.xfDescPost {
    width:150px;
    height:150px;
    background-size:cover;
    background-position: center center;
}

.xfGlobalView {
    position: absolute;
    top:100px;
    left:35px;
    right:25px;
    bottom:0px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.xfFieldDesc {
    flex: 1 0 calc(100% - 200px);
}

.xfTileDesc {
    gap:20px;
        
}
.xfTileDesc .xfField:has(textarea) {
    height: 150px;
}


.xfField:has(input[type=checkbox]) .xfLeftLabel {
    visibility: visible; 
}

.xfField input[type="checkbox"] {
    position: relative;
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: var(--nui-color-dark-4);
  /* Not removed via appearance */
  margin: 0;

  font: inherit;
  color: currentColor;
  aspect-ratio:1/1;
  top: 5px;
    height: 70%;
    left: -9px;
  border-radius: 0.15em;
  transform: translateY(-0.075em);

  display: grid;
  place-content: center;
    padding:0px;
    border-bottom: none;
}

.xfField input[type="checkbox"]:checked {
    background-color: var(--nui-color-accent-1);
}


.xfField input[type="checkbox"]:disabled {
    background-color: var(--nui-color-dark-8);
}
.xfField input[type="checkbox"]::before {
  content: "";
   aspect-ratio:1/1;
  height: 10px;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: center center;
  /*transition: 120ms transform ease-in-out;*/
  box-shadow: inset 1em 1em white;
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}

.xfField input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.xfField input[type="checkbox"]:focus {
    border-bottom: none;
}

.xfGridDisp1 {
    grid-row: 1;
    grid-column: 1;
}

.xfGridDisp2 {
    grid-column: 2;
    grid-row-start: 1;
    grid-row-end: auto;
}

.xfGridDisp3 {
    grid-column: 1;
}

.xfPostDetails {
    display: none;
}

.xfPostSponso {
    display: none;
}

.xfTest table tr{
   background-color: unset;
    height: unset;
}

.xfMainPanel {
    grid-row: 1;
    grid-column: 1 / 3;
    position: relative;
}

.xfMainTools {
    grid-column: 3;
    grid-row:1;
        display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
}

.xfUiLogoButton {
    background-color: var(--nui-color-dark-3);
    width: 50px;
    aspect-ratio: 1 / 1;
    border-radius: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.xfUiLogoButton .material-symbols-rounded {
    margin-top:0px;
}

.xfGridTile {
    position: relative;
    background-color:var(--nui-color-dark-2);
    border-radius:20px;
    padding: 20px;
    padding-top: 60px;
}

.xfGridTile2 {
    padding-top: 95px;
}

.xfGridTile1 {
    grid-column: 2/4;
}

.xfPolyGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:20px;
}

.xfPolyGrid2 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap:20px;
    grid-template-rows: minmax(100px, 150px);
}

.xfTileScrollContainer {
    position:absolute;
    top:55px;
    left:20px;
    right:20px;
    bottom:0px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.xfEventsAriane {
    position: absolute;
    top:25px;
    width:6px;
    background-color:var(--nui-color-accent-2);
    height:100%;
    margin-bottom:50px;
    left:52px;
}

.xfEventElement {
        position: relative;
    width: 100%;
    min-height:90px;
    padding-top: 75px;
    padding-left: 100px;
    padding-right: 25px;
    padding-bottom: 25px;
}

.xfEventIcon {
        width: 60px;
    aspect-ratio: 1 / 1;
    background-color: var(--nui-color-dark-4);
    border-radius: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    left: 25px;
    top: 16px;
    position: absolute;
    border: var(--nui-color-dark-2) 5px solid;
    z-index: 1;
}

.xfEventIcon .material-symbols-rounded {
    margin-top:0px;
}

.xfEventTitle {
    position: absolute;
    left: 90px;
    top: 41px;
    
    font-size: 1.15em;
    font-weight: 600;
}

.xfEventDate {
    position: absolute;
    top: 25px;
    color: var(--nui-color-level-0);
    font-size: 0.85em;
    font-weight: 600;
    left: 90px;
}

.xfEventIconNow {
    background-color: var(--nui-color-accent-1);
}

.xfEventUser {
    background-color:red;
    width: 35px;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    background-size: cover;
    background-position: center center;
    top: 27px;
    position: absolute;
    left: 4px;
    border: 5px solid var(--nui-color-dark-2);
    z-index: 2;
}

.xfEventForm {
    display: none;
    position: relative; 
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px; 
    justify-content: flex-end;
    margin-top: -50px;
}

.xfEditEventForm {
    display: none;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px; 
    justify-content: flex-end;
    margin-top: -50px;
}

.xfProcessingTasks {
        grid-row: 2;
}

.xfMainProcessing {
    display:none;
}

.xfMainScript {
    display:none;
}

.xfEventDetails {
    position: relative;
    font-size: 0.95em;
}

.xfEventDetails *{
    
all:unset;
}

.xfTilePartIcon {
        position: absolute;
    top: 0px;
    left: 0px;
}

.xfContactTag {
    color:var(--nui-color-dark-8); 
    font-size: 0.85em;
    font-weight: 600;
}

.xfTilePartIcon .material-symbols-rounded {
    margin-top:0px;
}

.xfTilePart {
        padding-left: 30px;
    position: relative;
    margin-bottom:15px;
}

.xfContactBlock {
    flex:0 0 100%;
        display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
}

.xfContactReferer {
    display: none;
}

.xfMainScreenBlocker {
    
        position: fixed;
    z-index: 2000;
    background-color: rgb(59 59 59 / 70%);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    color: white;
        display: none;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* HTML:  */
.xfLoader2 {
  width: 60px;
  aspect-ratio: 4;
  --_g: no-repeat radial-gradient(circle closest-side,var(--nui-color-accent-1) 90%,#0000);
  background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 100%;
  animation: l7 1s infinite linear;
}

@keyframes l7 {
    33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 100%,calc(100%/3) 100%}
    50%{background-size:calc(100%/3) 100%,calc(100%/3) 0%  ,calc(100%/3) 100%}
    66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%  }
} 

.xfMainScreenBlockerStep {
    text-align: center;
}

.xfUiLogoButtonMain {
    background-color: var(--nui-color-accent-1);
}

.xfPartPicture {
    background-color:var(--nui-color-accent-2);
    position: absolute;
    height: 55px;
    aspect-ratio: 1 / 1;
    border-radius: 50px;
    background-position: center;
    background-size: cover;
    top: 20px;
    left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.xfPartPicture .material-symbols-rounded {
    margin-top:0px;
    color:rgb(169 83 36);
    font-size:1.3em;
}


.xfTileTitleName {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    font-size: 1.6em;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    padding-top: 41px;
    padding-left: 90px;
    width: 100%;
    padding-bottom: 20px;
}

.xfContactContainer {
        position: absolute;
    top: 60px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.xfTileTools {
    position: absolute;
    top: 15px;
    right: 15px;
}

.xfEditButton .material-symbols-rounded{
    margin-top:0px;
}

.xfEditButton {
    font-size: 1.0em;
    margin-left:8px;
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.xfTileTitleName:hover .xfEditButton {
    display: flex;
}

.xfEventDetailsViewMore {
    position: absolute;
    font-weight: 600;
        bottom: -23px;
    left: 0px;
}

.xfEventDetailsContent {
    color: var(--nui-color-dark-8);
}

.xfEventDetailsMore {
    position: relative;
    font-size: 0.95em;
}

.xfEventDetailsViewLess {
    position: absolute;
    font-weight: 600;
        bottom: -23px;
    left: 0px;
}

.xfGlobalMap {
    background-color:red;
    width:600px;
    aspect-ratio:1/1;
    overflow: hidden; 
    position:relative;
}

#xfProspectMap {
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px; 
}

.xfMapOptions {
    grid-row: 1;
    grid-column: 1/3;
    
}

.xfMapOptionsDeployed {
    grid-row: 1/7; 
}

#xfProspectMapContainer {
    grid-row: 2/7;
    grid-column: 1/3;
    border-radius:20px;
    background-color:var(--nui-color-dark-2); 
    position: relative;
    overflow: hidden;
}

.xfProspectMapAriane {
    position: relative;
    grid-row: 1 / 7;
    grid-column: 4 / 6;
    border-radius:20px;
    background-color:var(--nui-color-dark-2); 
}

.xfFieldComp {
    display: none;
}

.xfCompFieldGroup {
    flex:0 0 100%;
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
}

.xfProspectMapInfos {
    position: relative;
    grid-row: 1 / 7;
    grid-column: 3;
    padding-top:95px; 
}



.xfPeopleContainer {
     position: absolute;
    top: 60px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.xfPeopleBlock {
    flex:0 0 100%;
        display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
}

.xfPeopleReferer {
    display: none;
}

.xfTilePartLine {
        line-height: 1.2em;     
    padding-top: 4px;
    
}

.xfSubField {
    margin-left: 20px; 
}

.xfMoreFilters {
    display: none;
}

.xfMapFiltersDeployed {
    grid-row: 1 / 7 !important;
    grid-column: 3 / 7 !important;
    z-index: 20;
}

.xfEventDelButton {
    position: absolute;
    top: 58px;
    left: -66px;
    background-color: var(--nui-color-level-3);
    height: 42px;
    aspect-ratio: 1 / 1;
    border-radius: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    border: var(--nui-color-dark-2) solid 5px;
}

.xfEventDelButton .material-symbols-rounded{
    margin-top:0px;
    font-size: 1.2em;
}

.xfDisplayFilters {
    position: absolute;
    bottom: 15px;
    right: 20px;
    font-weight: 600;
}

.xfProspectMapWait {
    position: relative;
    grid-row: 1 / 7;
    grid-column: 3 / 6;
}

.xfFillContentText {
    position: absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.xfDayLine {
    width:100%;
    height:10px;
    background-color:var(--nui-color-dark-8);
    border-radius:20px;
    position: relative;
}

.xfDayLineAbsent {
    background-image: linear-gradient(to right, rgba(187,0,63,0), rgba(187,0,63,1), rgba(187,0,63,0));
    height:100%;
    position: absolute;
    width:26px;
    margin-left:-13px;
}