:root {
/* background: #000 !important; */
    --main-min-width: 22rem;
    --main-max-width: 44rem;
    --main-big-font-size: 1rem;
    --main-medium-font-size: 0.9rem;
    --main-small-font-size: 0.8rem;
    --main-base-color: 255, 255, 255;
    --main-accent-color: 0, 0, 255;
    --main-low-contrast-color: 246, 247, 251;
    --main-medium-contrast-color: 128, 128, 128;
    --main-high-contrast-color: 0, 30, 58;
    --main-radius:1.5rem 1.5rem 1.5rem 1.5rem; 
    --main-big-radius:1.5rem 1.5rem 0rem 0rem; 
    --main-font-bold-weight:bold;
    --main-font-medium-weight:medium;
    --main-font-weight:normal;
    --main-box-shadow: 0px 0px 10px 5px rgba(var(--main-high-contrast-color),0.04);
    --main-lines-thickness:0.125rem;
    --main-padding-size:1.5rem;
    --main-margin-size:1.5rem;

    --main-basic_unit:1.5rem; 

}
    

    body {
        font-family: 'Montserrat', sans-serif;
    }

    .bold{
        font-weight: var(--main-font-bold-weight);
          }
      
    .PathFinder-open {
        padding-bottom: var(--main-padding-size); 
        padding-top: var(--main-padding-size); 
        /* padding-bottom:calc(2*var(--main-padding-size));
        padding-top:calc(2*var(--main-padding-size)); */
        }
      


    .PathFinderModalWrapper {
        display: none;
        position: fixed;
        z-index: 1503;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .PathFinderModal {
        margin: auto;
        color: rgb(var(--main-high-contrast-color));
        background-color: rgb(var(--main-base-color));
        width:100%;
        height: 100%;
        min-width: var(--main-min-width);
        max-width: var(--main-max-width);;
        overflow-y: scroll;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    .PathFinderModal::-webkit-scrollbar {
        display: none !important;
        }

    .PathFinderDownloadModal {
      /* background-color: var(--main-base-color);
      width: 600px;
      height: 600px;
      z-index: 3;
      margin: auto;
      position: relative;
      top: 6rem;
      min-width: 300px;
      max-width: 700px;
      border-radius: var(--main-radius);
      box-shadow: var(--main-box-shadow); */
      background-color: rgb(var(--main-accent-color));
      width: 90%;
      height: 6.5rem;
      z-index: 1503;
      margin: auto;
      position: relative;
      top: 6.5rem;
      min-width: 300px;
      max-width: 700px;
      border-radius: var(--main-radius);
      box-shadow: var(--main-box-shadow);
      /* background-color: #007fff; */
      color: white;
      font-weight: bold;
      align-content: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      }

    .PathFinderItems{
        margin-top: calc(1.6*var(--main-margin-size));
        margin-bottom: calc(1.6*var(--main-margin-size));
        }
    
    .PathFinderItemSingle{
        height:calc(3*var(--main-padding-size));
        }

    .PathFinderPathDiv {
        background-color: rgb(var(--main-base-color));
        }
    
    .PathFinderItem {
        margin-top: calc(0.6*var(--main-margin-size));
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        box-shadow: var(--main-box-shadow);
        border-radius: var(--main-radius);
        z-index: 1501;
        background-color:rgb(var(--main-base-color));
        position: relative;
        }

    .PathFinderItemContent {
        padding: calc(1.6*var(--main-padding-size));
        }

    .PathFinderItemContentHeader {
        padding-top:calc(0.6*var(--main-padding-size));
        padding-bottom:calc(0.6*var(--main-padding-size));
    }

    .PathFinderItemContentSelection {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: row;
        }

    .PathFinderItemContentExtended {
        display: flex;
        align-items: center;
        justify-content: space-between;
        }
    
    .PathFinderItemContentLoader {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        }
    
        /* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap'); */

        .PathFinderLoaderMainContainer {
          width: 400px;
          height: 400px;
          position:absolute;
          top:-3rem;
          left:-3rem;
        /*   margin:auto; */
        /*   background-color:black; */
          display: flex;
          align-items: center;
          align-content: center;
          justify-content: center;
          
        /*   flex-wrap: nowrap; */
        /*   padding:auto; */
          /* Optional: You can customize the direction, alignment, and other properties here */
          
        }
        
        .PathFinderLoaderContainer {
        /*   width: 200px;
          height: 200px; */
        /*   margin:auto; */
          display: flex;
          align-items: center;
          align-content: center;
          justify-content: center;
          flex-wrap: nowrap;
        /*     background-color:pink; */
          /* Optional: You can customize the direction, alignment, and other properties here */
          
        }
        
        .PathFinderLoaderCanvasContainer1, .PathFinderLoaderCanvasContainer2 {
          /* Set both divs to have the same width and height */
        /*   width: 000px;
          height: 000px; */
        /*   background-color:blue; */
        /*   margin:auto; */
          scale:1.5;
          /* Add any additional styling you want for each box */
        }
        
        .PathFinderLoaderCanvasContainer2 {
          /* Add a negative margin to make it overlap with box1 */
          margin-left: -300px; /* Adjust this value as needed */
        /*   background-color:red; */
          scale:10;
          opacity:0.05;
        }
        
        .PathFinderLoaderMain{
          /* width: 400px;
          height:700px;
          margin:auto; */
        /*   display: flex;
          align-items: center;
          align-content: center;
          justify-content: center; */
          /* flex-wrap: nowrap;
          position:relative; */
          overflow:hidden;
          background-color: rgb(0, 147, 233);
          background-image: linear-gradient(36deg, rgb(0 11 255) 0%, rgb(129 193 230 / 0%) 100%);
          background-size: 300%, 300%;
          margin-top: calc(0.6*var(--main-margin-size));
          margin-left: auto;
          margin-right: auto;
          width: 90%;
          box-shadow: var(--main-box-shadow);
          border-radius: var(--main-radius);
          z-index: 1501;
          /* background-color:rgb(var(--main-base-color)); */
          position: relative;
          height:36rem;
        
        }
        
        .PathFinderLoader-text-block{
          position:absolute;
          bottom:0;
          left:0;
          padding:1.5rem;
          margin:1.5rem;
        /*   height:100%; */
          width:20rem;
        /*   background-color:yellow; */
          color:white;
          display: flex;
          flex-direction: column;
          align-content: center;
          justify-content: flex-start;
        }
    
        .PathFinderLoader-text {
            font-size: 0.875rem;
            font-weight: 500;
            letter-spacing: 0;
            padding:0.75rem;
            margin:0.75rem;
        }
        
        .PathFinderLoader-medium-text {
            font-size: 1.125rem;
            font-weight: 700;
            padding:0.75rem;
            margin:0.75rem;
        }
        
        .PathFinderLoader-header{
           font-size: 1.5rem;
           font-weight: 700;
            letter-spacing: 0.025rem;
            padding:0.75rem;
            margin:0.75rem;
        }

    .PathFinderSortingMenuSelectorTitle {
        font-size: var(--main-medium-font-size);
        }

    .PathFinderPathRelationship {
      font-size: var(--main-medium-font-size);
      overflow: hidden;
      max-height: calc(2*var(--main-padding-size));
      }
    
    .PathFinderMainMenuSelectorDescription {
        font-size: var(--main-small-font-size);
        line-height: 1.125rem;
        font-weight: var(--main-font-medium-weight);
        }

    .PathFinderIcon {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left:var(--main-margin-size);
        margin-right:var(--main-margin-size);
        height: 2.625rem;
        min-width:2.625rem;
        border-radius: var(--main-radius);
        fill: none;
        stroke: rgb(var(--main-accent-color));
        stroke-width: var(--main-lines-thickness); 
        stroke-linecap: round;
        stroke-linejoin: round;
        }

    .PathFinderIcon:hover {
        box-shadow: var(--main-box-shadow);
        cursor: pointer;
        }

    .PathFinderIcon.inactive:hover {
      box-shadow: none;
      cursor: auto;
      }

    .PathFinderConnectionLine{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left:var(--main-margin-size);
        margin-right:var(--main-margin-size);
        min-width:2.625rem;
        border-radius: var(--main-radius);
        fill: rgb(var(--main-base-color));
        stroke: rgb(var(--main-accent-color));
        stroke-width: var(--main-lines-thickness); 
        stroke-linecap: round;
        stroke-linejoin: round;
        }

    .PathFinderListContent{
        padding-left: 0rem;
        padding-right: var(--main-padding-size);
        padding-top: calc(0.6*var(--main-padding-size));
        padding-bottom: calc(0.6*var(--main-padding-size));
        }