/* Copyright 2022 Kostja Lohmann */
.colorpicker {
    color: #c8d6cc;
    }

/* SETUP */

@font-face {
    font-family: NotoColorEmojiLimited;
    unicode-range: U+1F1E6-1F1FF;
    src: url("/static/media/fonts/NotoColorEmoji_WindowsCompatible.ttf") format('truetype');
  }

  @font-face {
    font-family: Quicksand;
    src: url("/static/media/fonts/Quicksand-VariableFont_wght.ttf") format('truetype');
  }

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
::-webkit-scrollbar-track {
    border-radius: 10px;
  }
::-webkit-scrollbar-thumb {
    background-color: #b4b4b4;
    border-radius: 10px;
  }




  .PermalinkOverlay {
    background: rgba(0,0,0,0.5);
    bottom: 0;
    left: 0;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1010;
}



body {
    background-color: #ededed;
    font-family: 'Quicksand', sans-serif;
}

.win {
    background-color: #ededed;
    font-family: 'NotoColorEmojiLimited','Quicksand', sans-serif;
}

.shadow-box {
    box-shadow: 2px 2px 5px #c9c9c9;
}

.standard-padding {
    padding: 0 20px;
}

.upper-button {
    text-align: right;
    margin-bottom: 20px;
}



/* NAV BAR */

.navbar-toggler {
    border: 0;
}

.dropdown-item:active {
background-color: #616161;

}




.navbutton {
    display: inline-block; 
    position: relative; 
    padding: 0 5px 0 5px;; 
    margin-left: 200px;
  }
  

  .navbutton__badge {
    background-color: #fa3e3e;
    border-radius: 2px;
    color: white;
   
    padding: 1px 3px;
    margin: 2px;
    font-size: 10px;
    
    position: absolute;
    top: 0;
    right: 0;
  }


  .messages{
    overflow-x: auto;
    overflow-y: auto;
    height: 600px;
    width: 400px;
  }


/* CARDS (so-called dashboard is used in all content areas) */

.dashboard-content {
    text-align: justify;
    margin-top: 10px;
}

.dashboard-card {
    margin: 10px 0;
    overflow-x: auto;
    }


.half-screen {
    width: 50%;
}

@media only screen 
  and (max-device-width: 568px)
  {
    .half-screen {
        width: 90%;
    }
}



.fixed-height {
    
    overflow-y: auto;
}

.thirty-height {
    height: 23vh;
}

.fifty-height {
    height: 43vh;
}

.seventy-height {
    height: 63vh;
}
.full-height {
    height: 87vh;
}

.mobile-height {
    height: 77vh;
}

/* FORMS */

.error-msg {
    color: red;
}

.form-group {
    margin-top: 20px;
}


#editor{
    height: 60vh;
  }



/* TABLES */


.large-table {
    font-size: 0.8rem;
}


.secondary-info {
    border-color: #fff;
}

.gridjs-wrapper {
    box-shadow: none;
}



.plan-position {
 display: inline-block;
 padding: 1px 5px;
 margin: 3px 5px;
 border-radius: 5%;
 background-color: #f9ce3e;
 font-weight: bolder;
 box-shadow: 1px 1px 2px #c9c9c9;
}

.plan-position-edit:hover {
    cursor: move;
}

.plan-amount-edit:hover {
    cursor:text;
}

.plan-amount {
    display: inline-block;
 padding: 0 5px;
 margin: 1px 5px 1px 1px;
 color: #000;
 border-radius: 5%;
 background-color: #fff5d2;
 box-shadow: 1px 1px 2px #c9c9c9;
}


.final-position {
    display: inline-block;
    padding: 1px 5px;
    margin: 3px 5px;
    border-radius: 5%;
    background-color: #84b7fa;
    font-weight: bolder;
    box-shadow: 1px 1px 2px #c9c9c9;
   }
   
   .final-position:hover {
       cursor: move;
   }
   
   .final-amount:hover {
       cursor:text;
   }
   
   .final-amount {
       display: inline-block;
    padding: 0 5px;
    margin: 1px 5px 1px 1px;
    color: #000;
    border-radius: 5%;
    background-color: #d2efff;
    box-shadow: 1px 1px 2px #c9c9c9;
   }

   .final-hts-position {
    display: inline-block;
    padding: 1px 5px;
    margin: 3px 5px;
    border-radius: 5%;
    background-color: #d184fa;
    font-weight: bolder;
    box-shadow: 1px 1px 2px #c9c9c9;
   }
   
   .final-hts-position:hover {
       cursor: move;
   }
   
   .final-hts-amount:hover {
       cursor:text;
   }
   
   .final-hts-amount {
       display: inline-block;
    padding: 0 5px;
    margin: 1px 5px 1px 1px;
    color: #000;
    border-radius: 5%;
    background-color: #ded2ff;
    box-shadow: 1px 1px 2px #c9c9c9;
   }

.planpos-input {
    height: 18px;
    border: 0;
    margin: 1px 0;
    box-shadow: 1px 1px 2px #c9c9c9;
}

.plan-x {
    width: 5px;
}

.order-position:hover {
    cursor: move;

   }



   .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
    background-color: #40a9ff;
  }

.small-logo {
    width: 8px;
}

/* BUTTONS */

.edit-btn-outline {
    filter: invert(48%) sepia(14%) saturate(277%) hue-rotate(167deg) brightness(90%) contrast(91%);
}

.btn-outline-secondary:hover .edit-btn-outline {
    filter: invert(99%) sepia(44%) saturate(608%) hue-rotate(236deg) brightness(118%) contrast(100%);
}
.btn-outline-secondary:focus .edit-btn-outline {
    filter: invert(99%) sepia(44%) saturate(608%) hue-rotate(236deg) brightness(118%) contrast(100%);
}







/* OVERLAY */

.overlay {
    position: fixed;
    bottom: 0;
    right: 10px;
    z-index: 2;
}

.overlay-bin {
    position: fixed;
    bottom: 15px;
    left: 5px;
    filter: brightness(0) saturate(100%) invert(28%) sepia(90%) saturate(7250%) hue-rotate(356deg) brightness(101%) contrast(119%);
    z-index: 2;
}

.accordion-button:not(.collapsed) {
    color: #000;
    background-color: #ffffff;
    box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0 var(--bs-accordion-border-color);
}

.overlay_header.accordion-button.collapsed {
    color: #000;
    background-color: #ffffff;
    box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0 var(--bs-accordion-border-color);
}

.overlay_header.blinkingbutton.collapsed {
    color: #000;
    box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0 var(--bs-accordion-border-color);
    animation: blinkingBackground 2s infinite;
}

@keyframes blinkingBackground{
    0%		{ background-color: #ffffff;}
    50%		{ background-color: #fee080;}
    100%	{ background-color: #ffffff;}
}


.central-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 4;
}

#page-mask {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
  }



  /* INITIALS */

  .circle {
    display: inline-block;
      background-color: #549acc;
      margin: 3px;
      border-radius: 50%;
      vertical-align: middle; 
      text-align: center;
  }
  
  .circle-inner {
    color: white;
    display: table-cell;
    vertical-align: middle; 
    text-align: center;
    text-decoration: none;
    height: 25px;
    width: 25px;  
    font-size: 9px;
  }




  /* TOOLIP */


  .tooltip1 {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; 
  }
  

  .tooltip1 .tooltiptext {
    visibility: hidden;
    padding: 20px;
    width: max-content; 
    max-width: 1000px;
    background-color: #fff;
    color: #000;
    text-align: left;
    border-radius: 6px;
    box-shadow: 2px 2px 5px #c9c9c9;
    overflow-y: auto;
    max-height: 400px;

    position: absolute;
    z-index: 1;
  }
  
 
  .tooltip1:hover .tooltiptext {
    visibility: visible;
  }

  .tooltip1 .tooltiptext table,  .tooltip1 .tooltiptext tbody,  .tooltip1 .tooltiptext tr,  .tooltip1 .tooltiptext th,  .tooltip1 .tooltiptext td{
    background-color: rgba(0, 0, 0, 0.0) !important;
}



/* FSS MEASUREMENT */

#fss-measurer {
    width: 100px;
    height: 100px;
    overflow: auto;
    resize: both;
    border: 1px solid #00ff22;
    position:fixed;
    z-index: 9;
 
      }


      #fss-mover {
        cursor: move;
        z-index: 10;
        width: 100%;
        height: 100%;
        
      }