#info-container
{
    padding-bottom: 2rem;
}

#confirmation-popup-card
{
    height: auto; 
    width: auto; 
    padding-bottom: 30px; 
    padding-top: 30px; 
    padding-right: 60px; 
    padding-left: 60px;
}

#toolarge-popup-card
{
    height: auto; 
    width: auto; 
    padding-bottom: 30px; 
    padding-top: 30px; 
    padding-right: 60px; 
    padding-left: 60px;
}

#movable-settings {
    position: absolute;
    z-index: 1;
    border: 1px solid var(--button-secondary-solid);
    border-radius: 8px;
    text-align: center;
}

#movable-settings-card
{
    border-radius: 8px;
}

@media (max-width: 1000px) {
    #movable-settings {
        position: static;
    }
}

@media (min-width: 1000px) {
    .card {
        width: 35vw;
    }
}

#controls-tooltip
{
    color: var(--secondary-lighter);
    font-size: 1.5rem;
    
}

#map-image-warning
{
    color: var(--primary) !important;
}

#paper_size .dropdown-content
{
    overflow: auto;
    height: 100px;
}

#safety_margin .dropdown-content
{
    overflow: auto;
    height: 75px;
}

#piece_margin .dropdown-content
{
    overflow: auto;
    height: 75px;
}

#scale_accuracy .dropdown-content
{
    overflow: auto;
    height: 75px;
}


.tippy-box[data-theme~='left-align'] 
{
    text-align: left;
}

.not-clickable
{
    cursor: not-allowed;
    color: var(--secondary-lighter) !important;
}

.not_supported
{
    cursor: not-allowed;
    color: var(--secondary-lighter) !important;
}

 /* touch hold down progress  */
 #touchprogress
 {
    position:absolute;
    transform:translate(-50%,-50%);
    height:100px;
    width:100px;
    z-index: 1;
}

/* Loadingbar */

@keyframes animate-stripes {
    0% {
        background-position: 0 0;
    }
  
    100% {
        background-position: 60px 0;
    }
}
  
.progress-bar {
    background-color: #1a1a1a;
    height: 15px;
    /* width: 450px; */
    /* margin: 50px auto; */
    border-radius: 5px;
    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}

.stripes {
    background-size: 30px 30px;
    background-image: linear-gradient(
        135deg,
        #34364A 25%,
        transparent 25%,
        transparent 50%,
        #34364A 50%,
        #34364A 75%,
        transparent 75%,
        transparent
    );
}

.stripes.animated {
    animation: animate-stripes 0.6s linear infinite;
}

.stripes.animated.slower {
    animation-duration: 1.25s;
}

.stripes.reverse {
    animation-direction: reverse;
}

.progress-bar-inner {
    display: block;
    height: 15px;
    width: 0%;
    background-color: #DF2D2D;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    position: relative;
    animation: auto-progress 10s infinite linear;
}

/* BULMA CHANGES */
.modal-content
{
    width: 50%;
    height:90%;
}

.movable-settings-header
{
    margin-bottom: 0px !important;
}

.columns
{
    margin-bottom: 0px !important;
}

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

.divider
{
    margin-left: 10px;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.center-text
{
    display: flex;
    align-items: center;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

.center-content
{
    display: flex;
    align-items: center;
    justify-content:center;
    text-align: center;
}

.right-text
{
    display: flex; 
    align-items: center;
    justify-content: right;
}

.right-text :first-child 
{
    margin-right: 5px !important;
}

.right-content
{
    display: flex; 
    align-items: center;
    justify-content: right;
}

.bulma-loader-mixin 
{
    -webkit-animation: spinAround .5s infinite linear;
    animation: spinAround .5s infinite linear;
    border: 2px solid #dbdbdb;
      border-top-color: rgb(219, 219, 219);
      border-right-color: rgb(219, 219, 219);
    border-radius: 9999px;
    border-right-color: transparent;
    border-top-color: transparent;
    content: "";
    display: block;
    height: 1em;
    position: relative;
    width: 1em;
}

.left-text
{
    display: flex; 
    justify-content: left;
}

#settings-pop 
{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.select select 
{
    font-size: 12px;
}