@font-face {
  font-family: 'Roboto';
  src: url('/css/fonts/Roboto-BoldItalic.woff2') format('woff2'),
    url('/css/fonts/Roboto-BoldItalic.woff') format('woff'),
    url('/css/fonts/Roboto-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/css/fonts/Roboto-Italic.woff2') format('woff2'),
    url('/css/fonts/Roboto-Italic.woff') format('woff'),
    url('/css/fonts/Roboto-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/css/fonts/Roboto-Bold.woff2') format('woff2'),
    url('/css/fonts/Roboto-Bold.woff') format('woff'),
    url('/css/fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/css/fonts/Roboto-Regular.woff2') format('woff2'),
    url('/css/fonts/Roboto-Regular.woff') format('woff'),
    url('/css/fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/css/fonts/Roboto-Light.woff2') format('woff2'),
    url('/css/fonts/Roboto-Light.woff') format('woff'),
    url('/css/fonts/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/css/fonts/Roboto-LightItalic.woff2') format('woff2'),
    url('/css/fonts/Roboto-LightItalic.woff') format('woff'),
    url('/css/fonts/Roboto-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
html,
body {
  height: 100%;
}
.overlay {
  background: #e9e9e9;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.5;
}

#loader {
  animation: spin 2s linear infinite;
  border-color: #3498db #f3f3f3 #f3f3f3;
  border-image: none;
  border-radius: 50%;
  border-style: solid;
  border-width: 16px;
  height: 120px;
  left: 50%;
  margin: -75px 0 0 -75px;
  position: absolute;
  top: 50%;
  width: 120px;
  z-index: 1;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.outer__wrapper{
  width: 100vw;
  height: 90vh;
}
/* .preview__canvasWrapper{
  border:2px dashed darkgray;
} */
.preview__canvas{
  border:2px solid #ccc;
  width:40vw;
  height:40vh;
}
/* .gray_background{
  background-color: #E6E6E5;
} */

.btn i, .btn span {
  pointer-events: none;
}
.bg-dark a {
  color: #00fdff;
}