@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

* {
  font-family: 'sarabun', sans-serif;
}
.a-link {
  color: #002e5b;
  text-decoration: none;
  overflow-wrap: break-word;
}
.a-link:focus,
.a-link:hover {
  color: #fde428;
}
.tryit-btn {
  color: white;
  text-decoration: none;
  text-align: center;
  font-size: 1rem;
  font-family: 'sarabun', sans-serif;
  width: max-content;
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  background-color: #002e5b;
}
.tryit-btn:hover {
  color: #fde428;
}
.offcanvas {
  width: 280px !important;
  background-color: #002e5b;
}
.sidebar-header,
.offcanvas-header {
  justify-content: center;
}
.sidebar-title,
.offcanvas-title {
  color: #fff;
}
.offcanvas-body {
  scrollbar-width: none;
}
.navbar .btn:active {
  border: 1px solid #fff;
}
.sidebar {
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  z-index: 1045;
  display: flex;
  flex-direction: column;
  width: 300px;
  background-color: #002e5b;
  transform: translateX(-100%);
}
.sidebar-header {
  display: flex;
  padding: 1rem;
  align-items: center;
}
.sidebar-body {
  position: relative;
  padding: 1rem;
  flex-grow: 1;
  overflow-y: auto;
  scrollbar-width: none;
}
.navbar,
.main {
  padding: 1rem 0;
  margin-left: 0;
}
.navbar {
  margin-left: -12px;
  margin-right: -12px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}
.content {
  margin: 0 0.5rem;
}
.nav-link-title {
  font-size: 1.25rem;
  margin: 0.5rem 0 0;
}
.sub-list .nav-link {
  padding: 0.2rem 0.5rem 0.2rem 2rem;
  margin: 0.2rem;
}
.nav-link.active {
  color: #002e5b !important;
  font-weight: 500;
  background-color: #fde428 !important;
}
li.head-topic {
  list-style: none;
  color: #fff;
  font-weight: 500;
  padding: 0.75rem 0.5rem 0.2rem 1.5rem;
}
.table-ref,
.table-color {
  margin-top: 2rem;
  overflow-x: auto;
}
.table-ref .table,
.table-color .table {
  width: 100%;
}
.table th {
  font-size: 1.25rem;
  color: #fff;
  border-color: #000;
  background-color: #002e5b;
  border-bottom: 3px solid;
}
.table td {
  font-size: 1.125rem;
  color: #000;
  align-content: center;
}
.table tbody tr td:first-child {
  font-size: 1.75rem;
}
.table.table-fs1 tbody tr td:first-child {
  font-size: 1.125rem;
}
.table-color table td {
  font-size: 1.125rem !important;
}
.table-color td a {
  color: #002e5b;
  text-decoration: none;
}
.table-color td a:hover,
.table-color td a:focus {
  color: #fde428;
}
.table-color-theory {
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}
.table-color-theory tr {
  border-bottom: 1px solid white;
}
.table-color-theory tr td {
  padding: 0.5rem;
}
.table-color-theory.secondary-color tr td:nth-child(even) {
  text-align: center;
}
.table-color-theory.table-borderless tr {
  border-bottom: none;
}
.table-color-wheel > .table-color-theory tr td {
  width: 16.66666667%;
}
.table-color-wheel {
  overflow-x: auto;
}
.table-color-wheel td p {
  font-size: 0.875rem;
  margin-bottom: 0;
}
ul.ul-color {
  list-style: none;
  width: fit-content;
  padding: 0;
  border: 1px solid #002e5b;
}
ul.ul-color li {
  padding: 0.5rem 1rem;
}
ul.ul-color li:not(:last-child) {
  border-bottom: 1px solid #002e5b;
}
.img-color {
  width: 100%;
  height: 100%;
}
.title-divider {
  width: 100%;
  border-top: 3px solid #002e5b;
  margin-top: 3rem;
}
.title-divider-thin {
  width: 100%;
  border-top: 1px solid #002e5b;
  margin-top: 2rem;
}
.related-lesson a {
  color: #002e5b;
  font-weight: 500;
  text-decoration: none;
}
.related-lesson a:hover,
.related-lesson a:focus {
  color: #fde428;
}
/* Colors */
.names-color .box,
.values-color .box {
  height: 9rem;
  text-align: center;
  align-content: center;
}
.names-color .box p,
.values-color .box p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  overflow-wrap: break-word;
  margin-bottom: 0;
}
.names-color .color-name,
.values-color .color-hex {
  font-size: 1.5rem;
}
.names-color .color-hex,
.values-color .color-name {
  font-size: 1.125rem;
}
/* Color Picker */
.color-spectrum {
  position: relative;
  width: 100%;
  height: 13.75rem;
  background: linear-gradient(
      to top,
      #000000,
      transparent,
      rgba(255, 255, 255, 1)
    ),
    linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red);
  background-size: 100% 100%, 100% 100%;
  /* background-blend-mode: normal; */
  border: 1px solid #ccc;
  cursor: crosshair;
  margin-bottom: 20px;
}
.picker-color-preview {
  /* width: 450px; */
  width: 100%;
  height: 15rem;
  border: 1px solid #ccc;
  margin-bottom: 1.5rem;
  justify-items: center;
  align-content: center;
}
.picker-color-preview p {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
}
.selected-color p {
  font-size: 1.25rem;
  font-family: 'Montserrat', sans-serif;
}
.selected-color input,
.selected-color .btn {
  font-family: 'Montserrat', sans-serif;
}
/* Lighter to Darker */
.shade {
  font-family: 'Montserrat', sans-serif;
  display: flex;
  gap: 1rem;
  align-items: center;
}
.shade p {
  font-weight: 600;
  margin: 0;
}
.shade-percentage {
  width: 10%;
  text-align: right;
}
.shade-hex {
  width: 20%;
}
.shade-color {
  width: 55%;
  height: 2.25rem;
  border: 1px solid #fff;
}
.shade-selected-color .shade-percentage,
.shade-selected-color .shade-hex {
  font-weight: 800;
}
.shade-selected-color .shade-color {
  height: 50px !important;
}
/* Mixer */
.shade-color-mixer {
  width: 65%;
  height: 2.125rem;
}
/* Converter */
.color-preview {
  width: 100%;
  height: 16rem;
  background-color: #000;
}
.color-preview-small {
  width: 25%;
  height: 5rem;
  background-color: #000;
}
.color-preview-alpha {
  /* width: 500px;
  height: 350px; */
  background-color: #fff;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
}
.converter-container label {
  font-size: 1.25rem;
  font-family: 'Bai Jamjuree', serif;
  font-weight: 500;
}
.converter-container p,
.color-preview-code p,
.range-container p {
  font-size: 1rem;
  font-family: 'Montserrat', sans-serif;
}
/* RGB */
.range-color .form-control[type='number'] {
  width: 30%;
}
.range-color .range-color-p-number {
  align-items: center;
  justify-content: center;
}
.range-color .p-range-color {
  margin: 0;
}
.range-color-half,
.hsla-range-color-half {
  margin-bottom: 1.5rem;
}
.range-color-half .p-range-color {
  width: 15%;
  margin: 0;
  align-content: center;
}
.hsla-range-color-half .p-range-color {
  width: 33%;
  margin: 0;
  align-content: center;
}
.range-color-half .form-control[type='number'],
.hsla-range-color-half .form-control[type='number'] {
  width: 25%;
}
.color-range-row {
  margin-left: 15%;
}
.hsla-range-color-half .color-range-row {
  margin-left: 0;
}
.card-color-gradient,
.card-theory,
.image-container {
  width: 100%;
}
.pre-display-code {
  background-color: #f4f4f4;
  border-radius: 0.375rem;
}
/* CSS property for range */
.color-range {
  -webkit-appearance: none;
  height: 20px;
  width: 100%;
  outline: none;
}
.color-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 26px;
  width: 8px;
  border: 3px solid #000;
  border-radius: 2px;
  cursor: pointer;
}
.color-range::-moz-range-thumb {
  -webkit-appearance: none;
  height: 26px;
  width: 8px;
  border: 3px solid #000;
  border-radius: 2px;
  cursor: pointer;
}
.color-range.red-color {
  background: linear-gradient(90deg, #000, #ff0000);
}
.color-range.green-color {
  background: linear-gradient(90deg, #000, #00ff00);
}
.color-range.blue-color {
  background: linear-gradient(90deg, #000, #0000ff);
}
.color-range.alpha-color {
  background: linear-gradient(90deg, #fff, #000);
}
.color-range.hue-color {
  background: linear-gradient(
    to right,
    hsl(0, 100%, 50%),
    hsl(30, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(150, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(210, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(330, 100%, 50%),
    hsl(360, 100%, 50%)
  );
}
.color-range.saturation-color {
  background: linear-gradient(90deg, hsl(58, 0%, 50%), hsl(0, 100%, 50%));
}
.color-range.lightness-color {
  background: linear-gradient(90deg, #000, hsl(0, 100%, 50%), #fff);
}
.color-range.whiteness-color {
  background: linear-gradient(90deg, #ff0000, #fff);
}
.color-range.blackness-color {
  background: linear-gradient(90deg, #ff0000, #000);
}
.content-percentage {
  padding: 2rem 0;
}
.content-percentage .number-input {
  width: 25%;
}
.color-percentage {
  position: relative;
  min-height: 40px;
}
.color-percentage .color-range {
  width: 100%;
  appearance: none;
  position: absolute;
  background: linear-gradient(90deg, #002e5b, #fde428);
  pointer-events: none;
}
.color-percentage .start-color {
  height: 0;
  z-index: 1;
  top: 10px;
}
.color-percentage .color-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
}
.color-percentage .color-range::-moz-range-thumb {
  -webkit-appearance: none;
  pointer-events: all;
}
.color-preview-direction .color-preview-small {
  cursor: pointer;
}
/* .color-hues {
  height: 8rem;
} */
.color-hues div {
  font-size: 0.85rem;
  font-family: 'Montserrat', sans-serif;
  height: 8rem;
}
.rgb-color-wheel {
  --num-colors: 12;
  --color-size: calc(100% / var(--num-colors));
  width: 180px;
  height: 180px;
  position: relative;
  border-radius: 50%;
  background: conic-gradient(
    #f22 calc(0 * var(--color-size)) calc(1 * var(--color-size)),
    #f06 calc(1 * var(--color-size)) calc(2 * var(--color-size)),
    #63b calc(2 * var(--color-size)) calc(3 * var(--color-size)),
    #44b calc(3 * var(--color-size)) calc(4 * var(--color-size)),
    #09f calc(4 * var(--color-size)) calc(5 * var(--color-size)),
    #0af calc(5 * var(--color-size)) calc(6 * var(--color-size)),
    #0bd calc(6 * var(--color-size)) calc(7 * var(--color-size)),
    #098 calc(7 * var(--color-size)) calc(8 * var(--color-size)),
    #0a4 calc(8 * var(--color-size)) calc(9 * var(--color-size)),
    #7c3 calc(9 * var(--color-size)) calc(10 * var(--color-size)),
    #fe0 calc(10 * var(--color-size)) calc(11 * var(--color-size)),
    #fb0 calc(11 * var(--color-size)) calc(12 * var(--color-size))
  );
  transform: rotate(calc(-180deg / var(--num-colors)));
}
.cmy-color-wheel {
  --num-colors: 12;
  --color-size: calc(100% / var(--num-colors));
  width: 180px;
  height: 180px;
  position: relative;
  border-radius: 50%;
  background: conic-gradient(
    #00ffff calc(0 * var(--color-size)) calc(1 * var(--color-size)),
    #0080ff calc(1 * var(--color-size)) calc(2 * var(--color-size)),
    #0000ff calc(2 * var(--color-size)) calc(3 * var(--color-size)),
    #8000ff calc(3 * var(--color-size)) calc(4 * var(--color-size)),
    #ff00ff calc(4 * var(--color-size)) calc(5 * var(--color-size)),
    #ff0080 calc(5 * var(--color-size)) calc(6 * var(--color-size)),
    #ff0000 calc(6 * var(--color-size)) calc(7 * var(--color-size)),
    #ff8000 calc(7 * var(--color-size)) calc(8 * var(--color-size)),
    #ffff00 calc(8 * var(--color-size)) calc(9 * var(--color-size)),
    #80ff00 calc(9 * var(--color-size)) calc(10 * var(--color-size)),
    #00ff00 calc(10 * var(--color-size)) calc(11 * var(--color-size)),
    #00ff80 calc(11 * var(--color-size)) calc(12 * var(--color-size))
  );
  transform: rotate(calc(-180deg / var(--num-colors)));
}
.ryb-color-wheel {
  --num-colors: 12;
  --color-size: calc(100% / var(--num-colors));
  width: 180px;
  height: 180px;
  position: relative;
  border-radius: 50%;
  background: conic-gradient(
    #fe2712 calc(0 * var(--color-size)) calc(1 * var(--color-size)),
    #fc600a calc(1 * var(--color-size)) calc(2 * var(--color-size)),
    #fb9902 calc(2 * var(--color-size)) calc(3 * var(--color-size)),
    #fccc1a calc(3 * var(--color-size)) calc(4 * var(--color-size)),
    #fefe33 calc(4 * var(--color-size)) calc(5 * var(--color-size)),
    #b2d732 calc(5 * var(--color-size)) calc(6 * var(--color-size)),
    #66b032 calc(6 * var(--color-size)) calc(7 * var(--color-size)),
    #347c98 calc(7 * var(--color-size)) calc(8 * var(--color-size)),
    #0247fe calc(8 * var(--color-size)) calc(9 * var(--color-size)),
    #4424d6 calc(9 * var(--color-size)) calc(10 * var(--color-size)),
    #8601af calc(10 * var(--color-size)) calc(11 * var(--color-size)),
    #c21460 calc(11 * var(--color-size)) calc(12 * var(--color-size))
  );
  transform: rotate(calc(-180deg / var(--num-colors)));
}
.rgb-color-wheel::after,
.cmy-color-wheel::after,
.ryb-color-wheel::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: white;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}
.col-wheel {
  justify-items: center;
}
.wheel-lg {
  width: 220px;
  height: 220px;
}
.col-wheel-lg {
  align-content: center;
  justify-items: center;
}
.img-color.img-ryb-color-wheel {
  width: 50%;
}
.boxshadow,
.achromatic-color {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}
.achromatic-color div {
  height: 4rem;
  align-content: center;
  text-align: center;
}
.color-schemes {
  text-align: center;
}
.color-schemes .img-color {
  width: 50%;
}
.color-pallette div.col {
  font-size: 0.65rem;
  font-family: 'Montserrat', sans-serif;
  padding: 0 0 1rem;
}
.color-pallette > .row .row {
  height: 15rem;
}
.image-brand {
  margin-bottom: 1rem;
}
.image-brand.logo-resize-1 {
  width: 100%;
  height: 100%;
}
.image-brand.logo-resize-2 {
  width: 50%;
  height: 100%;
}
.color-image-brand div {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  width: 100%;
  height: 3.75rem;
  align-content: center;
  padding-left: 1rem;
  margin-bottom: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}
.metro-color {
  font-weight: 500;
  width: 100%;
  padding: 1rem;
  margin-bottom: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}
.metro-color p {
  font-family: 'Montserrat', sans-serif;
}
.metro-color a {
  color: inherit;
  font-family: 'Montserrat', sans-serif;
}
.metro-color a:hover,
.metro-color a:focus {
  color: #fde428;
}
.list-style-none {
  list-style: none;
}
.color-psychology > div {
  width: 100%;
}
.color-psychology > div p {
  font-weight: 700;
  font-family: 'Bai Jamjuree', serif;
}
.color-psychology ul li {
  margin-bottom: 0.5rem;
}
.bg-black {
  color: white;
  background-color: #000;
}
.bg-red {
  color: white;
  background-color: red;
}
.bg-lime {
  background-color: lime;
}
.bg-blue {
  color: white;
  background-color: blue;
}
.bg-cyan {
  background-color: cyan;
}
.bg-magenta {
  color: white;
  background-color: magenta;
}
.bg-yellow {
  background-color: yellow;
}
.bg-orange {
  color: white;
  background-color: orange;
}
.bg-fern-green {
  color: white;
  background-color: #417f32;
}
.bg-green {
  color: white;
  background-color: green;
}
.bg-purple {
  color: white;
  background-color: purple;
}
.bg-FE2712 {
  color: white;
  background-color: #fe2712;
}
.bg-FB9902 {
  color: white;
  background-color: #fb9902;
}
.bg-FC600A {
  color: white;
  background-color: #fc600a;
}
.bg-FF8000 {
  color: white;
  background-color: #ff8000;
}
.bg-FCCC1A {
  background-color: #fccc1a;
}
.bg-FEFE33 {
  background-color: #fefe33;
}
.bg-B2D732 {
  background-color: #b2d732;
}
.bg-66B032 {
  color: white;
  background-color: #66b032;
}
.bg-80FF00 {
  background-color: #80ff00;
}
.bg-00FF80 {
  background-color: #00ff80;
}
.bg-347C98 {
  color: white;
  background-color: #347c98;
}
.bg-0080FF {
  color: white;
  background-color: #0080ff;
}
.bg-0037C7 {
  color: white;
  background-color: #0037c7;
}
.bg-0247FE {
  color: white;
  background-color: #0247fe;
}
.bg-4424D6 {
  color: white;
  background-color: #4424d6;
}
.bg-8000FF {
  color: white;
  background-color: #8000ff;
}
.bg-8601AF {
  color: white;
  background-color: #8601af;
}
.bg-C21460 {
  color: white;
  background-color: #c21460;
}
.bg-FF0080 {
  color: white;
  background-color: #ff0080;
}
.bg-CC3333 {
  color: white;
  background-color: #cc3333;
}
.bg-996666 {
  color: white;
  background-color: #996666;
}
.bg-CC8033 {
  background-color: #cc8033;
}
.bg-998066 {
  color: white;
  background-color: #998066;
}
.bg-CCCC33 {
  background-color: #cccc33;
}
.bg-999966 {
  background-color: #999966;
}
.bg-EA4335,
.bg-google-red {
  color: white;
  background-color: #ea4335;
}
.bg-4285F4,
.bg-google-blue {
  color: white;
  background-color: #4285f4;
}
.bg-FBBC04,
.bg-google-yellow {
  color: white;
  background-color: #fbbc04;
}
.bg-34A853,
.bg-google-green {
  color: white;
  background-color: #34a853;
}
.bg-facebook-blue {
  color: white;
  background-color: #0866ff;
}
.bg-ms-orange {
  color: white;
  background-color: #f25022;
}
.bg-ms-green {
  color: white;
  background-color: #7fba00;
}
.bg-ms-blue {
  color: white;
  background-color: #00a4ef;
}
.bg-ms-yellow {
  background-color: #ffb900;
}
.bg-amazon-black {
  color: white;
  background-color: #221f1f;
}
.bg-amazon-orange {
  background-color: #ff9900;
}
.bg-android {
  background-color: #a4c639;
}
.bg-coca-cola {
  color: white;
  background-color: #f40000;
}
.bg-pepsi-red {
  color: white;
  background-color: #ff1400;
}
.bg-pepsi-blue {
  color: white;
  background-color: #0e0e96;
}
.bg-ibm {
  color: white;
  background-color: #006699;
}
.bg-metro-ligthgreen {
  color: white;
  background-color: #99b433;
}
.bg-metro-green {
  color: white;
  background-color: #00a300;
}
.bg-metro-darkgreen {
  color: white;
  background-color: #1e7145;
}
.bg-metro-magenta {
  color: white;
  background-color: #ff0097;
}
.bg-metro-lightpurple {
  color: white;
  background-color: #9f00a7;
}
.bg-metro-purple {
  color: white;
  background-color: #7e3878;
}
.bg-metro-darkpurple {
  color: white;
  background-color: #603cba;
}
.bg-metro-darken {
  color: white;
  background-color: #1d1d1d;
}
.bg-metro-teal {
  color: white;
  background-color: #00aba9;
}
.bg-metro-lightblue {
  background-color: #eff4ff;
}
.bg-metro-blue {
  color: white;
  background-color: #2d89ef;
}
.bg-metro-darkblue {
  color: white;
  background-color: #2b5797;
}
.bg-metro-yellow {
  background-color: #ffc40d;
}
.bg-metro-orange {
  background-color: #e3a21a;
}
.bg-metro-darkorange {
  color: white;
  background-color: #da532c;
}
.bg-metro-red {
  color: white;
  background-color: #ee1111;
}
.bg-metro-darkred {
  color: white;
  background-color: #b91d47;
}
.bg-win8-lime {
  background-color: #a4c400;
}
.bg-win8-green {
  color: white;
  background-color: #60a917;
}
.bg-win8-emerald {
  color: white;
  background-color: #008a00;
}
.bg-win8-teal {
  color: white;
  background-color: #00aba9;
}
.bg-win8-cyan {
  color: white;
  background-color: #1ba1e2;
}
.bg-win8-blue {
  color: white;
  background-color: #3e65ff;
}
.bg-win8-cobalt {
  color: white;
  background-color: #0050ef;
}
.bg-win8-indigo {
  color: white;
  background-color: #6a00ff;
}
.bg-win8-violet {
  color: white;
  background-color: #aa00ff;
}
.bg-win8-pink {
  color: white;
  background-color: #f472d0;
}
.bg-win8-magenta {
  color: white;
  background-color: #d80073;
}
.bg-win8-crimson {
  color: white;
  background-color: #a20025;
}
.bg-win8-red {
  color: white;
  background-color: #e51400;
}
.bg-win8-orange {
  color: white;
  background-color: #fa6800;
}
.bg-win8-amber {
  background-color: #f0a30a;
}
.bg-win8-yellow {
  background-color: #e3c800;
}
.bg-win8-brown {
  color: white;
  background-color: #825a2c;
}
.bg-win8-olive {
  color: white;
  background-color: #6d8764;
}
.bg-win8-steel {
  color: white;
  background-color: #647687;
}
.bg-win8-mauve {
  color: white;
  background-color: #76608a;
}
.bg-win8-taupe {
  color: white;
  background-color: #87794e;
}
.bg-win8-sienna {
  color: white;
  background-color: #a0522d;
}
.bg-flatui-turquoise {
  background-color: #1abc9c;
}
.bg-flatui-greensea {
  color: white;
  background-color: #16a085;
}
.bg-flatui-emerald {
  background-color: #2ecc71;
}
.bg-flatui-nephritis {
  color: white;
  background-color: #27ae60;
}
.bg-flatui-peterriver {
  color: white;
  background-color: #3498db;
}
.bg-flatui-belizehole {
  color: white;
  background-color: #2980b9;
}
.bg-flatui-amethyst {
  color: white;
  background-color: #9b59b6;
}
.bg-flatui-wisteria {
  color: white;
  background-color: #8e44ad;
}
.bg-flatui-wetasphalt {
  color: white;
  background-color: #34495e;
}
.bg-flatui-midnightblue {
  color: white;
  background-color: #2c3e50;
}
.bg-flatui-sunflower {
  background-color: #f1c40f;
}
.bg-flatui-orange {
  background-color: #f39c12;
}
.bg-flatui-carrot {
  color: white;
  background-color: #e67e22;
}
.bg-flatui-pumpkin {
  color: white;
  background-color: #d35400;
}
.bg-flatui-alizarin {
  color: white;
  background-color: #e74c3c;
}
.bg-flatui-pomegranate {
  color: white;
  background-color: #c0392b;
}
.bg-flatui-clouds {
  background-color: #ecf0f1;
}
.bg-flatui-silver {
  background-color: #bdc3c7;
}
.bg-flatui-concrete {
  background-color: #95a5a6;
}
.bg-flatui-asbestos {
  color: white;
  background-color: #7f8c8d;
}
.border-solid-3 {
  border-width: 3px;
  border-style: solid;
}
.border-white {
  border-color: #ffffff;
}
.border-black {
  border-color: #000000;
}
.border-red {
  border-color: red;
}
.border-0037C7 {
  border-color: #0037c7;
}
.border-8000FF {
  border-color: #8000ff;
}
.border-FC600A {
  border-color: #fc600a;
}
.border-34A853 {
  border-color: #34a853;
}
.border-FBBC04 {
  border-color: #fbbc04;
}
.border-F472D0 {
  border-color: #f472d0;
}
.ff-Montserrat {
  font-family: 'Montserrat', sans-serif;
}
.fs-small {
  font-size: 0.875rem;
}
.h-3rem {
  height: 3rem;
}
.w-3 {
  width: 3% !important;
}
.w-5 {
  width: 5% !important;
}
.w-6 {
  width: 6% !important;
}
.w-10 {
  width: 10% !important;
}
.w-15 {
  width: 15% !important;
}
.w-20 {
  width: 20% !important;
}
.w-30 {
  width: 30% !important;
}
.w-40 {
  width: 40% !important;
}
.w-45 {
  width: 45% !important;
}
.w-65 {
  width: 65% !important;
}
.w-70 {
  width: 70% !important;
}
.w-fit-content {
  width: fit-content;
}
/* @media (max-width: 340px) {
} */
@media (min-width: 340px) {
  .range-color .form-control[type='number'] {
    width: 25%;
  }
}
@media (min-width: 430px) {
  .color-spectrum {
    width: 350px;
    height: 15.625rem;
  }
  .content-percentage .number-input {
    width: 20%;
  }
  .range-color .form-control[type='number'] {
    width: 20%;
  }
  .range-color-half .p-range-color {
    width: 10%;
  }
  .color-range-row {
    margin-left: 10%;
  }
  .color-schemes .img-color {
    width: 40%;
  }
  .image-brand.logo-resize-1 {
    width: 50%;
  }
  .image-brand.logo-resize-2 {
    width: 40%;
  }
}
@media (min-width: 455px) {
  .shade-color-mixer {
    width: 55%;
  }
  .range-color-half .form-control[type='number'],
  .hsla-range-color-half .form-control[type='number'] {
    width: 15%;
  }
  .hsla-range-color-half .p-range-color {
    width: 25%;
  }
  .image-container {
    width: 80%;
  }
  .color-hues div {
    font-size: 1.25rem;
  }
  .color-pallette div.col {
    font-size: 0.75rem;
  }
  .w-ssm-20 {
    width: 20% !important;
  }
}
/* sm */
@media (min-width: 576px) {
  .names-color .color-name,
  .values-color .color-hex {
    font-size: 1.125rem;
  }
  .names-color .color-hex,
  .values-color .color-name {
    font-size: 1rem;
  }
  .color-preview {
    /* width: 80%; */
    height: 20rem;
  }
  .color-preview-small {
    height: 6rem;
  }
  .content-percentage .number-input {
    width: 15%;
  }
  .shade-color-mixer {
    width: 50%;
  }
  .converter-container input {
    width: 80%;
  }
  .range-color .range-color-p-number {
    justify-content: left;
  }
  .range-color .form-control[type='number'] {
    width: 100%;
  }
  /* .color-range {
    width: 70%;
  } */
  .range-color-half .form-control[type='number'],
  .hsla-range-color-half .form-control[type='number'] {
    width: 25%;
  }
  .hsl-range-container .range-color-p-number {
    width: 36%;
  }
  .hsl-range-container .range-color-p-number .form-control[type='number'] {
    width: 33%;
  }
  .hsla-range-color-half .p-range-color {
    width: 40%;
  }
  .image-container {
    width: 60%;
  }
  .img-color.img-ryb-color-wheel {
    width: 40%;
  }
  .color-schemes .img-color {
    width: 60%;
  }
  .color-pallette div.col {
    font-size: 1rem;
  }
  .image-brand.logo-resize-2 {
    width: 35%;
  }
  .w-sm-15 {
    width: 15% !important;
  }
  .w-sm-fit-content {
    width: fit-content;
  }
  .w-sm-auto {
    width: auto;
  }
}
@media (min-width: 650px) {
  .image-brand.logo-resize-2 {
    width: 30%;
  }
}
/* md */
@media (min-width: 768px) {
  .table-ref .table,
  .table-color .table {
    width: 75%;
  }
  .content-percentage {
    width: 80%;
  }
  .content-percentage .number-input {
    width: 15%;
  }
  .shade-color {
    width: 65%;
  }
  .shade-color-mixer {
    width: 40%;
  }
  .converter-container input {
    width: 100%;
  }
  .converter-container p,
  .color-preview-code p,
  .range-container p {
    font-size: 1.25rem;
  }
  .color-preview {
    width: 100%;
  }
  .range-color-half .form-control[type='number'],
  .hsla-range-color-half .form-control[type='number'] {
    width: 20%;
  }
  .hsl-range-container .range-color-p-number {
    width: 28%;
  }
  .hsla-range-color-half .p-range-color {
    width: 35%;
  }
  .image-container {
    width: 45%;
  }
  .img-color.img-ryb-color-wheel {
    width: 90%;
    height: auto;
  }
  .color-wheel {
    width: 200px;
    height: 200px;
  }
  .color-schemes .img-color {
    width: 65%;
  }
  .color-pallette div.col {
    font-size: 0.75rem;
  }
  .color-pallette > .row .row {
    height: 20rem;
  }
  .image-brand.logo-resize-1 {
    width: 40%;
  }
  .image-brand.logo-resize-2 {
    width: 20%;
  }
  .w-md-10 {
    width: 10% !important;
  }
  .w-md-75 {
    width: 75%;
  }
  .ps-md-12 {
    padding-left: 0.75rem !important;
  }
  .pe-md-12 {
    padding-right: 0.75rem !important;
  }
}
/* lg */
@media (min-width: 992px) {
  .names-color .color-name,
  .values-color .color-hex {
    font-size: 1.25rem;
  }
  .range-color-half .form-control[type='number'],
  .hsla-range-color-half .form-control[type='number'] {
    width: 15%;
  }
  .hsl-range-container .range-color-p-number {
    width: 23%;
  }
  .hsla-range-color-half .p-range-color {
    width: 25%;
  }
}
/*  */
@media (min-width: 1024px) {
  .sidebar {
    transform: none;
  }
  .navbar,
  .main {
    margin-left: 288px;
  }
  .btn[data-bs-toggle='offcanvas'] {
    visibility: hidden;
  }
  .content {
    margin-left: 1rem;
  }
  .color-preview {
    height: 25rem;
  }
  .color-preview-small {
    height: 7rem;
  }
  .shade-color {
    width: 60%;
  }
  .hsl-range-container .range-color-p-number {
    width: 30%;
  }
  .hsla-range-color-half .p-range-color {
    width: 35%;
  }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .range-color-half .form-control[type='number'],
  .hsla-range-color-half .form-control[type='number'] {
    width: 20%;
  }
}
/* xl */
@media (min-width: 1200px) {
  .content-percentage {
    width: 100%;
    padding: 2rem 1rem;
  }
  .shade-color-mixer {
    width: 65%;
  }
  .range-color-half .form-control[type='number'],
  .hsla-range-color-half .form-control[type='number'] {
    width: 20%;
  }
  .hsl-range-container .range-color-p-number {
    width: 25%;
  }
  .card-color-gradient,
  .card-theory {
    width: 80%;
  }
  .image-container {
    width: 40%;
  }
  .color-pallette div.col {
    font-size: 1rem;
  }
  .image-brand.logo-resize-1 {
    width: 30%;
  }
  .w-xl-75 {
    width: 75%;
  }
}
/* xxl */
@media (min-width: 1400px) {
  .table-color-theory {
    width: 90%;
  }
  .names-color .color-name,
  .values-color .color-hex {
    font-size: 1.5rem;
  }
  .names-color .color-hex,
  .values-color .color-name {
    font-size: 1.125rem;
  }
  .shade-color {
    width: 70%;
  }
  .shade-color-mixer {
    width: 50%;
  }
  .converter-container input {
    width: 65%;
  }
  .range-color-half .p-range-color {
    width: 8%;
  }
  .color-range {
    width: 80%;
  }
  .color-range-row {
    margin-left: 8%;
  }
  .range-color-half .form-control[type='number'],
  .hsla-range-color-half .form-control[type='number'] {
    width: 15%;
  }
  .hsl-range-container .range-color-p-number {
    width: 20%;
  }
  .hsl-range-container .color-range {
    width: 75%;
  }
  .hsla-range-color-half .p-range-color {
    width: 30%;
  }
  .card-color-gradient,
  .card-theory {
    width: 65%;
  }
  .image-container {
    width: 30%;
  }
  .title-divider,
  .title-divider-thin {
    width: 90%;
  }
  .color-schemes .img-color {
    width: 75%;
  }
  .color-image-brand div,
  .metro-color,
  .color-psychology > div {
    width: 80%;
  }
  .image-brand.logo-resize-2 {
    width: 15%;
  }
  .w-alert {
    width: 90%;
  }
  .w-xxl-90 {
    width: 90%;
  }
}
/* xxxl */
@media (min-width: 1600px) {
  .content-percentage {
    padding: 2rem 1.5rem;
  }
  .hsl-range-container .range-color-p-number {
    width: 15%;
  }
  .hsla-range-color-half .p-range-color {
    width: 22%;
  }
  .color-schemes .img-color {
    width: 67%;
  }
  .image-brand.logo-resize-1 {
    width: 25%;
  }
  .image-brand.logo-resize-2 {
    width: 11%;
  }
  .col-xxxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 1700px) {
  .color-schemes .img-color {
    width: 55%;
  }
  .col-1700-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-1700-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-1700-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-1700-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-1700-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-1700-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-1700-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-1700-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-1700-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-1700-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-1700-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-1700-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}