/*CSS Loader*/
.loader {
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 20px;
  height: 20px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

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

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

@font-face {
  font-family: Roboto-Light;
  src: url(/ttf/Roboto-Light.ttf);
}
@font-face {
  font-family: Roboto-Regular;
  src: url(/ttf/Roboto-Regular.ttf);
}
@font-face {
  font-family: Roboto-Medium;
  src: url(/ttf/Roboto-Medium.ttf);
}
@font-face {
  font-family: Roboto-Bold;
  src: url(/ttf/Roboto-Bold.ttf);
}

:root {
  --dark: #000000;
  --dark-05: rgba(0, 0, 0, 0.05);
  --dark-11: rgba(0, 0, 0, 0.11);
  --dark-15: rgba(0, 0, 0, 0.15);
  --dark-25: rgba(0, 0, 0, 0.25);
  --dark-26: rgba(0, 0, 0, 0.26); /* #00000042 */
  --dark-35: rgba(0, 0, 0, 0.35);
  --dark-40: rgba(0, 0, 0, 0.4);
  --dark-50: rgba(0, 0, 0, 0.5);
  --dark-60: rgba(0, 0, 0, 0.6);
  --dark-70: rgba(0, 0, 0, 0.7);
  --dark-80: rgba(0, 0, 0, 0.8);
  --dark-87: rgba(0, 0, 0, 0.87);

  --light: #ffffff;
  --accent: #1f6acc;

  --success: #0dd688;
  --success-15: rgba(13, 214, 136 0.15);

  --fail: #d62652;
  --fail-15: rgba(214, 38, 82, 0.15);

  --accent-1: #f8f9fb;
  --accent-2: #eaecef;
  --accent-3: #eceff0;
  --accent-4: #e4e7e8;
  --accent-5: rgba(178, 178, 178, 0.4);
  --accent-6: #cccccc;
  --accent-7: #999999;
  --accent-8: #888888;
  --accent-9: #7d7d7d;
  --accent-10: #707070;
  --accent-11: #4c4c4c;
  --accent-12: #424242;
  --accent-13: #20272b;
  --accent-14: #263238;
  --accent-15: #b2b2b2;
  --accent-16: #6e6e6e;
  --accent-17: #bdbdbd;
  --accent-18: #dedede;
  --accent-19: #333333;
  --accent-20: #626262;
  --accent-21: #757575;
  --accent-22: #eeeeee;
  --accent-23: #c30707;
  --accent-24: #e9e9e9;
  --accent-25: #969696;
  --accent-26: #363636;
  --accent-27: #f1f1f1;
  --accent-28: #231f20;
  --accent-29: #43425d;
  --accent-30: #8b8b8b;
  --accent-31: #dddddd;
  --accent-32: #f8f2f2;
  --accent-33: #efefef;
  --accent-34: #e8e8e8;
  --accent-35: #f2f2f2;
  --accent-36: #4285f4;
  --accent-37: #fdfdfd;
  --accent-38: #ececec;
  --accent-39: #c5c5c5;
  --accent-40: #6d6d6d;
  --accent-41: #f9fafb;
  --accent-42: #3c3c3c;
  --accent-43: rgba(31, 106, 204, 0.1);
  --accent-44: rgba(31, 106, 204, 0.25);
  --accent-45: #1c5fb8;
  --accent-46: #f7f8fa;
  --accent-47: #b0b1b3;
  --accent-48: #4985d5;
  --accent-49: rgba(247, 248, 250, 0.75);
  --accent-50: rgba(234, 236, 239, 0.1);
  --accent-51: rgba(255, 255, 255, 0.1);
  --accent-52: rgba(255, 255, 255, 0.75);
  --accent-53: #444444;
  --accent-54: #393939;
  --accent-55: #9f9f9f;
  --accent-56: rgba(159, 159, 159, 0.3);
  --accent-57: #c1d9f2;
  --accent-58: #d2d2d2;
  --accent-59: #49576b;
  --accent-60: #0079d2;
  --accent-61: #5d5d5d;
  --accent-62: #2684ff;
  --accent-63: rgba(239, 239, 239, 0.5);
  --accent-64: #7e7e7e;
  --accent-65: #c30a12;
  --accent-66: #e3e3e3;
  --accent-67: rgba(204, 204, 204, 0.5);
  --accent-68: rgba(31, 106, 204, 0.5);
  --accent-69: #6996d0;

  --fontf-light: "Roboto-Light";
  --fontf-regular: "Roboto-Regular";
  --fontf-medium: "Roboto-Medium";
  --fontf-bold: "Roboto-Bold";

  --font-xxl: 48px;
  --font-xl: 24px;
  --font-l: 20px;
  --font-m: 16px;
  --font-s: 14px;
  --font-xs: 12px;

  --button-active: var(--accent-62);
  --button-disabled: var(--accent-25);

  --button-shadow: 0 3px 6px 0 var(--accent);

  --input-fg-default: var(--dark);
  --input-bg-default: var(--light);
  --input-bg-hover: rgba(31, 106, 204, 0.1);
  --input-bg-active: var(--blue);

  --overlayColor: var(--dark-70);
  --top-bar-height: 64px;
}