@font-face {
  font-family: "Magneto";
  src: url("/fonts/MAGNETOB.woff") format("woff");
}

:root {
    /** define global shared variables */
    /* note to self: case matters, only use lowercase */


    --coborns-brown: #604637;
    --coborns-green: #A1AE1F;
    --coborns-orange: #F26321;
}



/* company logo */

.logo {
  background-color: white;
}

.imageLogo {
  margin: 10px;
}

.vsi-left-side-bar-header-company-title {
  color: black;
}



/* general use */

.invisible {
    display: none;
}

.bigFont {
    font-size: 1.5em;
}

.mediumFont {
    font-size: 1.25em;
}

.smallFont {
    font-size: 0.75em;
}

.focusBackgroundColor {
    background-color: lightgray;
}


/* animations */

.spinAnimation {
    animation-name: spin;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}




/* margins */

.leftAlign {
    float: left;
}

.leftAlignSpaced {
    float: left;
    margin-left: 1em;
}

.leftAlignSpacedNarrow {
    float: left;
    margin-left: 0.25em;
}

.rightAlignSpaced {
    float: right;
    margin-right: 1em;
}

.leftRightMargin {
    margin-left: 1em;
    margin-right: 1em;
}

.leftRightMarginNarrow {
    margin-left: 0.5em;
    margin-right: 0.5em;
}



/* spacing */

.spaceUnder {
    padding-bottom: 1em;
}

.spaceAbove {
    padding-top: 1em;
}

.spaceAboveNarrow {
    padding-top: 0.5em;
}





/* progress bar */

.progressBarTitle {
    width: 500px; /* matches the upload dialog's width */
}

.progressBarContainer {
    background-color: gainsboro; /* very light gray */
    border-radius: 8px;
}

.progressBar {
    background-color: var(--primary-color);
    height: 2.4em;
    transition: width 0.5s;
    border-radius: 8px;
    padding: 2px;
    display: flex;
    align-items: center;
}
    .progressBar.green {
        background-color: var(--coborns-green);
    }
    .progressBar.orange {
        background-color: var(--coborns-orange);
    }
    .progressBar.brown {
        background-color: var(--coborns-brown);
    }

.progressText {
    font-size: 1em;
    color: white;
    margin-left: 4px;
    position: absolute;
}



/* file upload buttons */

.cobornUploadButton {
    display: flex;
    margin-top: 0.5em;
    padding: 0.5em;
    border-radius: 0.5em;
    
    background-color: var(--primary-color-very-light);
    color: black;
    text-decoration: none; /* remove the link underline from any included text */
    
    width: max-content;
    
    border-style: solid;
    border-color: black;
    border-width: 2px;
    
    box-shadow: 4px 4px 3px gray;
}
    .cobornUploadButton:hover {
        box-shadow: 2px 2px 3px gray;
    }

    /* text */
    .cobornUploadButton > div {
        margin-left: 0.5em;
    }



/* template preview button */

.templatePreviewButton {
    display: flex;
    padding: 0.5em;
    border-radius: 0.5em;
    background-color: white;
    color: black;
    text-decoration: none; /* remove the link underline from any included text */

    width: max-content;
    border-style: solid;
    border-color: black;
    border-width: 2px;
    box-shadow: 4px 4px 3px gray;
}

    .templatePreviewButton:hover {
        box-shadow: 2px 2px 3px gray;
    }

    /* text */
    .templatePreviewButton > div {
        margin-left: 0.5em;
    }