/*  controls component styles */

:root {
  --main-color: #004CAF;
  --back-color: #FFFDFF;
  --transparent-color: rgb(15 116 143 / 70%);
  --light-color: #777;
  --smallest-font: 1.2rem;
  --font-awesome: 'Font Awesome 6 Free';
  --select-color: rgb(13 110 253 / 80%);

  --backgroundColor: rgba(255, 255, 255);
  --squareColor: rgba(100, 100, 100, .5);
  --squareSize: 0.4em;

  --section-padding: 100px;
  --section-padding: 100px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --backgroundColor: rgb(0, 0, 0);
  }
}

.checkered {
  background-color: none !important;
  background-image: none !important;
}


.component,
.component.active-component {
    /* position: relative;
  display: block; */
    outline: none;
    /* width: 100%;
  height: auto; */
}

header-component {
  margin: 0;
}

main-container {
  padding: 0;
  /* padding-top: calc(var(--section-padding) / 4); */
  /* padding-bottom: calc(var(--section-padding) / 4);
  padding-left: calc(var(--section-padding) / 4);
  padding-right: calc(var(--section-padding) / 4); */
}



.app-container, main-container, .root-container {
    height: auto;
    min-height: auto !important;
    /* height: 100%;
  min-height: 200vh !important; */
}

.root {
  /* padding: 20px 10px; */
  /* padding-top: 20px; */
}

.active-component, .component.active-component {
  outline: none;
}

image-upload {
  display: none;
}




.controls-component {
  display: none;
}

.controls-component .control-button {
  display: none;
}


.controls-component .control-button:hover {
  display: none;

}

/* end  controls component styles */



/* main-controls-component */
.select-time-element {
  display: none;

}

.select-control {
  display: none;
}


/*.spinner-border {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}*/