/*!*************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/react-toastify/dist/ReactToastify.css ***!
  \*************************************************************************************************************************************************************************/
:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: #e74c3c;
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;
  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  padding: 4px;
  width: var(--toastify-toast-width);
  box-sizing: border-box;
  color: #fff;
}

.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}

.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
}

.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
}

.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}

.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
}

.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
}
.Toastify__toast {
  --y: 0;
  position: relative;
  -ms-touch-action: none;
  touch-action: none;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  cursor: default;
  direction: ltr;
  /* webkit only issue #791 */
  z-index: 0;
  overflow: hidden;
}

.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}

.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body, .Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}

.Toastify__toast--stacked[data-collapsed=false] {
  overflow: visible;
}

.Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > * {
  opacity: 0;
}

.Toastify__toast--stacked:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}

.Toastify__toast--stacked[data-pos=top] {
  top: 0;
}

.Toastify__toast--stacked[data-pos=bot] {
  bottom: 0;
}

.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before {
  transform-origin: top;
}

.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before {
  transform-origin: bottom;
}

.Toastify__toast--stacked:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}

.Toastify__toast--rtl {
  direction: rtl;
}

.Toastify__toast--close-on-click {
  cursor: pointer;
}

.Toastify__toast-body {
  margin: auto 0;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 6px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

.Toastify__toast-body > div:last-child {
  word-break: break-word;
  -ms-flex: 1;
  flex: 1;
}

.Toastify__toast-icon {
  -webkit-margin-end: 10px;
  margin-inline-end: 10px;
  width: 20px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -ms-flexbox;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast {
    margin-bottom: 0;
    border-radius: 0;
  }
}
.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}

.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}

.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}

.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}

.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}

.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}

.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  -ms-flex-item-align: start;
  align-self: flex-start;
  z-index: 1;
}

.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}

.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}

.Toastify__close-button:hover, .Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--toastify-z-index);
  opacity: 0.7;
  transform-origin: left;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}

.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}

.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}

.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}

.Toastify__progress-bar--wrp {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}

.Toastify__progress-bar--wrp[data-hidden=true] {
  opacity: 0;
}

.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}

.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}

.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}

.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*!*********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/resources/assets/styles/frame/notice.scss ***!
  \*********************************************************************************************************************************************************************/
@charset "UTF-8";
.csms-studio-box-shadow-xsm {
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.csms-studio-box-shadow-sm {
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.csms-studio-box-shadow-md {
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}

.csms-studio-box-shadow-lg {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.csms-studio-box-shadow-xl {
  box-shadow: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-2xl {
  box-shadow: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-3xl {
  box-shadow: 0 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
}

/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

.csms-studio-heading-2xlg {
  --csms-studio-heading-font-weight: 700;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-xlg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 40px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 56px;
  margin-bottom: 0;
}

.csms-studio-heading-lg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 32px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 45px;
  margin-bottom: 0;
}

.csms-studio-heading-md {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 28px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-sm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm-semibold {
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-label-xlg-bold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-semibold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-medium {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-normal {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-bold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-semibold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-medium {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-normal {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-bold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-semibold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-medium {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-normal {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-bold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-semibold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-medium {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-normal {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-bold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-semibold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-medium {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-normal {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-bold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-semibold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-medium {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-normal {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-caption-lg {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-md {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-sm {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 10px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 12px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-csms-studio-icon {
  --csms-studio-btn-icon-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-svg-color: --csms-studio-fg-hierarchy-secondary;
  --csms-studio-btn-icon-svg-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--csms-studio-btn-icon-border-color);
  border-radius: var(--csms-studio-btn-icon-border-radius);
  background-color: var(--csms-studio-btn-icon-background-color);
  color: var(--csms-studio-btn-icon-svg-color);
  width: var(--csms-studio-btn-icon-size);
  height: var(--csms-studio-btn-icon-size);
  padding: 0;
}
.btn-csms-studio-icon.hover, .btn-csms-studio-icon:hover {
  background-color: var(--csms-studio-btn-icon-hover-background-color);
}
.btn-csms-studio-icon.focus, .btn-csms-studio-icon:focus {
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-icon.active, .btn-csms-studio-icon:active {
  background-color: var(--csms-studio-btn-icon-active-background-color);
}
.btn-csms-studio-icon:disabled, .btn-csms-studio-icon.disabled, .btn-csms-studio-icon[disabled=disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-csms-studio-icon:disabled:hover, .btn-csms-studio-icon:disabled.hover, .btn-csms-studio-icon.disabled:hover, .btn-csms-studio-icon.disabled.hover, .btn-csms-studio-icon[disabled=disabled]:hover, .btn-csms-studio-icon[disabled=disabled].hover {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.btn-csms-studio-icon:disabled:active, .btn-csms-studio-icon:disabled.active, .btn-csms-studio-icon.disabled:active, .btn-csms-studio-icon.disabled.active, .btn-csms-studio-icon[disabled=disabled]:active, .btn-csms-studio-icon[disabled=disabled].active {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.btn-csms-studio-icon svg {
  width: var(--csms-studio-btn-icon-svg-size);
  height: var(--csms-studio-btn-icon-svg-size);
}
.btn-csms-studio-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-svg-color);
}
.btn-csms-studio-icon svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-svg-color);
}

.btn-csms-studio-icon-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-primary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-neutral-white-solid);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-primary.focus, .btn-csms-studio-icon-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-icon-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-outline-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-coursemos-primary);
}

.btn-csms-studio-icon-outline-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}

.btn-csms-studio-icon-outline-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-coursemos-primary);
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.btn-csms-studio-icon-outline-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.btn-csms-studio-icon-nospace-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-nospace-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-neutral-b10p);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-quinary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-neutral-white-solid);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-senary-subtle);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-primary.disabled, .btn-csms-studio-icon-gray-primary:disabled {
  background-color: var(--csms-studio-bg-hierarchy-senary);
}
.btn-csms-studio-icon-gray-primary.focus, .btn-csms-studio-icon-gray-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-icon-gray-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bo-coursemos-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-quaternary.focus, .btn-csms-studio-icon-gray-quaternary:focus {
  background-color: var(--csms-studio-bg-coursemos-quinary);
}

.btn-csms-studio-icon-gray-outline-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}

.btn-csms-studio-icon-gray-outline-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover, .btn-csms-studio-icon-gray-outline-secondary:hover {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-secondary:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-secondary:hover svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.active, .btn-csms-studio-icon-gray-outline-secondary:active {
  color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-secondary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-secondary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-icon-gray-outline-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.btn-csms-studio-icon-gray-outline-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover, .btn-csms-studio-icon-gray-outline-quaternary:hover {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-quaternary:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-quaternary:hover svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active, .btn-csms-studio-icon-gray-outline-quaternary:active {
  color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-quaternary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-quaternary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-icon-gray-nospace-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-neutral-b6p-hovered);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-neutral-b15p);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-nospace-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover, .btn-csms-studio-icon-gray-nospace-secondary:hover, .btn-csms-studio-icon-gray-nospace-secondary.active, .btn-csms-studio-icon-gray-nospace-secondary:active {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary:hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary:hover svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-csms-studio-icon-gray-nospace-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-info-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-2xsm {
  --csms-studio-btn-icon-size: 20px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 12px;
}

.btn-csms-studio-icon-xsm {
  --csms-studio-btn-icon-size: 24px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 14px;
}

.btn-csms-studio-icon-sm {
  --csms-studio-btn-icon-size: 28px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 16px;
}

.btn-csms-studio-icon-md {
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 18px;
}

.btn-csms-studio-icon-lg {
  --csms-studio-btn-icon-size: 36px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 18px;
}

.btn-csms-studio-icon-xlg {
  --csms-studio-btn-icon-size: 40px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 20px;
}

.btn-csms-studio-icon-2xlg {
  --csms-studio-btn-icon-size: 48px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 24px;
}

.btn-csms-studio-svgicon {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-bg-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-svgicon-size-md: 16px;
  --csms-studio-btn-svgicon-size-lg: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon.hover, .btn-csms-studio-svgicon:hover {
  color: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.hover svg .svg-color[stroke], .btn-csms-studio-svgicon:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.hover svg .svg-color[fill], .btn-csms-studio-svgicon:hover svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.focus, .btn-csms-studio-svgicon:focus {
  color: var(--csms-studio-btn-svgicon-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon.active, .btn-csms-studio-svgicon:active {
  color: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon.active svg .svg-color[stroke], .btn-csms-studio-svgicon:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon.active svg .svg-color[fill], .btn-csms-studio-svgicon:active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon:disabled, .btn-csms-studio-svgicon.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-csms-studio-svgicon svg {
  width: var(--csms-studio-btn-svgicon-size-md);
  height: var(--csms-studio-btn-svgicon-size-md);
}

.btn-csms-studio-svgicon {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-tertiary);
}

.btn-csms-studio-svgicon-help {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active svg .svg-color[stroke], .btn-csms-studio-svgicon-help:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active svg .svg-color[fill], .btn-csms-studio-svgicon-help:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active, .btn-csms-studio-svgicon-help:active {
  background-color: var(--csms-studio-btn-svgicon-bg-color);
}

.btn-csms-studio-svgicon-eye {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-svgicon-eye.active svg .svg-color[stroke], .btn-csms-studio-svgicon-eye:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-svgicon-eye.active svg .svg-color[fill], .btn-csms-studio-svgicon-eye:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-svgicon-home {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home.active svg .svg-color[stroke], .btn-csms-studio-svgicon-home:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home.active svg .svg-color[fill], .btn-csms-studio-svgicon-home:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home svg {
  width: --csms-studio-btn-svgicon-size-lg;
  height: --csms-studio-btn-svgicon-size-lg;
}
.btn-csms-studio-svgicon-home {
  border-radius: 0 !important;
}

.btn-csms-studio-svgicon-circle {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle.hover, .btn-csms-studio-svgicon-circle:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle.focus, .btn-csms-studio-svgicon-circle:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle.active, .btn-csms-studio-svgicon-circle:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle:disabled, .btn-csms-studio-svgicon-circle.disabled {
  opacity: 0.4;
}

.btn-csms-studio-svgicon-circle-arrow {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle-arrow svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-arrow svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-arrow svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle-arrow.hover, .btn-csms-studio-svgicon-circle-arrow:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle-arrow.focus, .btn-csms-studio-svgicon-circle-arrow:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle-arrow.active, .btn-csms-studio-svgicon-circle-arrow:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle-arrow:disabled, .btn-csms-studio-svgicon-circle-arrow.disabled {
  opacity: 0.4;
}
.btn-csms-studio-svgicon-circle-arrow {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-circle-size: 36px;
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.btn-csms-studio-svgicon-circle-help {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle-help svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-help svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-help svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle-help.hover, .btn-csms-studio-svgicon-circle-help:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle-help.focus, .btn-csms-studio-svgicon-circle-help:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle-help.active, .btn-csms-studio-svgicon-circle-help:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle-help:disabled, .btn-csms-studio-svgicon-circle-help.disabled {
  opacity: 0.4;
}
.btn-csms-studio-svgicon-circle-help {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-size: 40px;
}

.btn-csms-studio-like {
  --csms-studio-btn-icon-like-padding-y: 10px;
  --csms-studio-btn-icon-like-padding-x: 16px;
  --csms-studio-btn-icon-like-padding-x-round: 20px;
  --csms-studio-btn-icon-like-background: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-icon-like-hover-background: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-icon-like-active-svg-color: #fd6d6d;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-btn-icon-like-background);
  padding: var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x) var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x-round);
  border-radius: var(--csms-studio-border-radius-full) 0 0 var(--csms-studio-border-radius-full);
}
.btn-csms-studio-like svg {
  width: 20px;
  height: 20px;
}
.btn-csms-studio-like svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-like svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-like {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-csms-studio-like.hover, .btn-csms-studio-like:hover {
  background: var(--csms-studio-btn-icon-like-hover-background);
}
.btn-csms-studio-like.focus, .btn-csms-studio-like:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-like.is-active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-like.is-active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-like.is-active svg .svg-thumb-bg {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}

.btn-csms-studio-dislike {
  --csms-studio-btn-icon-like-padding-y: 10px;
  --csms-studio-btn-icon-like-padding-x: 16px;
  --csms-studio-btn-icon-like-padding-x-round: 20px;
  --csms-studio-btn-icon-like-background: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-icon-like-hover-background: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-icon-like-active-svg-color: #fd6d6d;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-btn-icon-like-background);
  padding: var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x-round) var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x);
  border-radius: 0 var(--csms-studio-border-radius-full) var(--csms-studio-border-radius-full) 0;
}
.btn-csms-studio-dislike svg {
  width: 20px;
  height: 20px;
}
.btn-csms-studio-dislike svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-dislike svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-dislike {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-csms-studio-dislike.hover, .btn-csms-studio-dislike:hover {
  background: var(--csms-studio-btn-icon-like-hover-background);
}
.btn-csms-studio-dislike.focus, .btn-csms-studio-dislike:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-dislike.is-active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-dislike.is-active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-dislike.is-active svg .svg-thumb-bg {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}

.btn-csms-studio-like-container {
  display: flex;
  align-items: center;
}
.btn-csms-studio-like-container .btn-csms-studio-like + .btn-csms-studio-dislike {
  margin-left: -1px;
}

.csms-studio-box-shadow-xsm {
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.csms-studio-box-shadow-sm {
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.csms-studio-box-shadow-md {
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}

.csms-studio-box-shadow-lg {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.csms-studio-box-shadow-xl {
  box-shadow: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-2xl {
  box-shadow: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-3xl {
  box-shadow: 0 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
}

.alert {
  --csms-studio-alert-padding-y: 12px;
  --csms-studio-alert-padding-x: 16px;
  --csms-studio-alert-border-radius: var(--csms-studio-border-radius-8);
}
.alert .btn-close {
  margin-left: auto;
  flex-shrink: 0;
  --csms-studio-btn-icon-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-svg-color: --csms-studio-fg-hierarchy-secondary;
  --csms-studio-btn-icon-svg-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--csms-studio-btn-icon-border-color);
  border-radius: var(--csms-studio-btn-icon-border-radius);
  background-color: var(--csms-studio-btn-icon-background-color);
  color: var(--csms-studio-btn-icon-svg-color);
  width: var(--csms-studio-btn-icon-size);
  height: var(--csms-studio-btn-icon-size);
  padding: 0;
}
.alert .btn-close.hover, .alert .btn-close:hover {
  background-color: var(--csms-studio-btn-icon-hover-background-color);
}
.alert .btn-close.focus, .alert .btn-close:focus {
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.alert .btn-close.active, .alert .btn-close:active {
  background-color: var(--csms-studio-btn-icon-active-background-color);
}
.alert .btn-close:disabled, .alert .btn-close.disabled, .alert .btn-close[disabled=disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.alert .btn-close:disabled:hover, .alert .btn-close:disabled.hover, .alert .btn-close.disabled:hover, .alert .btn-close.disabled.hover, .alert .btn-close[disabled=disabled]:hover, .alert .btn-close[disabled=disabled].hover {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.alert .btn-close:disabled:active, .alert .btn-close:disabled.active, .alert .btn-close.disabled:active, .alert .btn-close.disabled.active, .alert .btn-close[disabled=disabled]:active, .alert .btn-close[disabled=disabled].active {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.alert .btn-close svg {
  width: var(--csms-studio-btn-icon-svg-size);
  height: var(--csms-studio-btn-icon-svg-size);
}
.alert .btn-close svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-svg-color);
}
.alert .btn-close svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-svg-color);
}
.alert .btn-close {
  --csms-studio-btn-icon-size: 28px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 16px;
  margin-top: 7px;
  margin-right: 7px;
}
.alert svg {
  width: 16px;
  height: 16px;
}
.alert {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.alert .description {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.alert.alert-warning {
  background-color: var(--csms-studio-bg-semantic-nega-senary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .btn-close {
  opacity: inherit;
}
.alert.alert-warning .btn-close.focus, .alert.alert-warning .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.alert.alert-warning .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.alert.alert-info, .alert.alert-guide {
  background-color: var(--csms-studio-bg-semantic-info-senary);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.alert.alert-info .svg-icon svg .svg-color[stroke], .alert.alert-guide .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-info);
}
.alert.alert-info .svg-icon svg .svg-color[fill], .alert.alert-guide .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-info);
}
.alert.alert-info .btn-close, .alert.alert-guide .btn-close {
  opacity: inherit;
}
.alert.alert-info .btn-close.focus, .alert.alert-info .btn-close:focus, .alert.alert-guide .btn-close.focus, .alert.alert-guide .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.alert.alert-info .btn-close, .alert.alert-guide .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.alert.alert-warning, .alert.alert-caution {
  background-color: var(--csms-studio-bg-semantic-warn-quinary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .svg-icon svg .svg-color[stroke], .alert.alert-caution .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-prog);
}
.alert.alert-warning .svg-icon svg .svg-color[fill], .alert.alert-caution .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-prog);
}
.alert.alert-warning .btn-close, .alert.alert-caution .btn-close {
  opacity: inherit;
}
.alert.alert-warning .btn-close.focus, .alert.alert-warning .btn-close:focus, .alert.alert-caution .btn-close.focus, .alert.alert-caution .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.alert.alert-warning .btn-close, .alert.alert-caution .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.alert.alert-danger {
  background-color: var(--csms-studio-bg-semantic-nega-senary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-danger .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-nega-quinary);
}
.alert.alert-danger .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-nega-quinary);
}
.alert.alert-danger .btn-close {
  opacity: inherit;
}
.alert.alert-danger .btn-close.focus, .alert.alert-danger .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}

.csms-studio-alert {
  --csms-studio-alert-gap: 4px;
  --csms-studio-alert-svg-color: var(--csms-studio-fg-semantic-info);
}
.csms-studio-alert .alert-content {
  display: flex;
  align-items: flex-start;
  gap: var(--csms-studio-alert-gap);
  min-height: 28px;
}
.csms-studio-alert .alert-content .svg-icon {
  margin-top: 4px;
  display: flex;
  align-self: flex-start;
  padding: 2px 0;
}
.csms-studio-alert .alert-content .svg-icon svg {
  width: 16px;
  height: 16px;
}
.csms-studio-alert .alert-content .alert-text {
  margin-top: 3.5px;
}
.csms-studio-alert .alert-content .btn-close {
  box-sizing: border-box;
  margin-top: 0;
  margin-right: 0;
}

.csms-studio-alert-header {
  --csms-studio-alert-gap: 8px;
  --bs-alert-padding-x: 24px;
  --bs-alert-bg: var(--csms-studio-bg-semantic-info-senary-subtle);
  --bs-alert-color: var(--csms-studio-tx-hierarchy-tertiary);
  margin-bottom: 24px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csms-studio-alert-header .alert-content {
  flex-wrap: wrap;
}
.csms-studio-alert-header .alert-content .svg-icon {
  margin-top: 6px;
}
.csms-studio-alert-header .alert-content .svg-icon svg {
  width: 18px;
  height: 18px;
}
.csms-studio-alert-header .alert-content .alert-text {
  margin-top: 5.5px;
}
.csms-studio-alert-header .alert-content .alert-button {
  margin-left: auto;
}
.csms-studio-alert-header .alert-content .btn-ghost {
  margin-top: 4px;
  color: var(--csms-studio-btn-color);
  font-weight: var(--csms-studio-caption-font-weight);
}
@media (max-width: 575.98px) {
  .csms-studio-alert-header .alert-content form {
    width: 100%;
    justify-content: flex-end;
  }
  .csms-studio-alert-header .alert-content .alert-button {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .csms-studio-alert-header .alert-content .btn-ghost {
    width: auto;
    margin: 0;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.csms-studio-toast-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.csms-studio-toast-container .toast {
  margin-bottom: 0;
}

.csms-studio-toast {
  --bs-toast-padding-x: 16px;
  --bs-toast-padding-y: 14px;
  --bs-toast-box-shadow: none;
  --bs-toast-max-width: 100%;
  --csms-studio-toast-border-top-left-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-border-top-right-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-border-bottom-left-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-border-bottom-right-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-body-min-height: 28px;
  --csms-studio-toast-icon-margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
  border: 0;
  border-radius: var(--csms-studio-toast-border-top-left-radius) var(--csms-studio-toast-border-top-right-radius) var(--csms-studio-toast-border-bottom-right-radius) var(--csms-studio-toast-border-bottom-left-radius);
  padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
}
.csms-studio-toast .toast-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  min-height: var(--csms-studio-toast-body-min-height);
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-toast .toast-body .svg-icon {
  align-self: flex-start;
}
.csms-studio-toast .toast-body .svg-icon svg {
  width: 20px;
  height: 20px;
}
.csms-studio-toast .toast-body .svg-icon {
  margin-top: var(--csms-studio-toast-icon-margin-top);
}
.csms-studio-toast .toast-body .toast-text {
  display: flex;
  align-items: center;
  gap: 4px 8px;
  flex-wrap: wrap;
}
.csms-studio-toast .btn-close {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: var(--csms-studio-toast-icon-margin-top);
}
.csms-studio-toast.csms-studio-toast-warning {
  background-color: var(--csms-studio-bg-semantic-nega-senary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-warning .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-warning .btn-close.focus, .csms-studio-toast.csms-studio-toast-warning .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-warning .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-nega);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-nega);
}
.csms-studio-toast.csms-studio-toast-guide {
  background-color: var(--csms-studio-bg-semantic-info-senary);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csms-studio-toast.csms-studio-toast-guide .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-info);
}
.csms-studio-toast.csms-studio-toast-guide .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-info);
}
.csms-studio-toast.csms-studio-toast-guide .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-guide .btn-close.focus, .csms-studio-toast.csms-studio-toast-guide .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-guide .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.csms-studio-toast.csms-studio-toast-caution {
  background-color: var(--csms-studio-bg-semantic-warn-quinary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-caution .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-prog);
}
.csms-studio-toast.csms-studio-toast-caution .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-prog);
}
.csms-studio-toast.csms-studio-toast-caution .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-caution .btn-close.focus, .csms-studio-toast.csms-studio-toast-caution .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-caution .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.csms-studio-toast.csms-studio-toast-success {
  background-color: var(--csms-studio-bg-semantic-posi-senary);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csms-studio-toast.csms-studio-toast-success .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-posi);
}
.csms-studio-toast.csms-studio-toast-success .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-posi);
}
.csms-studio-toast.csms-studio-toast-success .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-success .btn-close.focus, .csms-studio-toast.csms-studio-toast-success .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-success .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-posi-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-posi-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.csms-studio-toast-button {
  --csms-studio-toast-body-min-height: 44px;
  --csms-studio-toast-icon-margin-top: 10px;
}

.csms-studio-toast-slide-down {
  --csms-studio-toast-border-top-left-radius: 0;
  --csms-studio-toast-border-top-right-radius: 0;
  animation: slideDown 0.5s ease-in-out;
  margin-bottom: 1px;
}

.csms-studio-toast-slide-up {
  --csms-studio-toast-border-bottom-left-radius: 0;
  --csms-studio-toast-border-bottom-right-radius: 0;
  animation: slideUp 0.5s ease-in-out;
  margin-top: 1px;
}

.csms-studio-toast-default-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 760px;
  height: auto;
  padding: 14px 16px;
  box-sizing: border-box;
  border-bottom-right-radius: var(--csms-studio-border-radius-16);
  border-bottom-left-radius: var(--csms-studio-border-radius-16);
  z-index: 1000;
  margin: 0 auto;
}
/*!****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/resources/assets/styles/_header.scss ***!
  \****************************************************************************************************************************************************************/
@charset "UTF-8";
/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

.csms-studio-heading-2xlg {
  --csms-studio-heading-font-weight: 700;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-xlg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 40px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 56px;
  margin-bottom: 0;
}

.csms-studio-heading-lg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 32px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 45px;
  margin-bottom: 0;
}

.csms-studio-heading-md {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 28px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-sm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm-semibold {
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-label-xlg-bold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-semibold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-medium {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-normal {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-bold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-semibold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-medium {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-normal {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-bold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-semibold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-medium {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-normal {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-bold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-semibold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-medium {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-normal {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-bold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-semibold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-medium {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-normal {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-bold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-semibold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-medium {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-normal {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-caption-lg {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-md {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-sm {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 10px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 12px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

#csms-studio .header-menu-slider,
.csmsmedia-studio-modal-content .header-menu-slider {
  width: 200px;
  display: flex;
  transition: transform 0.3s ease-in-out;
}
#csms-studio .header-menu-slider.header-menu-slider--submenu,
.csmsmedia-studio-modal-content .header-menu-slider.header-menu-slider--submenu {
  transform: translateX(-200px);
}
#csms-studio .header-menu-slider,
.csmsmedia-studio-modal-content .header-menu-slider {
  width: 200px;
  display: flex;
  transition: transform 0.3s ease-in-out;
}
#csms-studio .header-menu-slider.header-menu-slider--submenu,
.csmsmedia-studio-modal-content .header-menu-slider.header-menu-slider--submenu {
  transform: translateX(-200px);
}
#csms-studio .header-menu-main,
.csmsmedia-studio-modal-content .header-menu-main {
  flex: 0 0 200px;
}
#csms-studio .header-menu-main .header-menu-main-lang,
.csmsmedia-studio-modal-content .header-menu-main .header-menu-main-lang {
  display: flex;
  justify-content: space-between;
}
#csms-studio .header-menu-main .header-menu-main-lang-arrow,
.csmsmedia-studio-modal-content .header-menu-main .header-menu-main-lang-arrow {
  display: flex;
  align-items: center;
}
#csms-studio .header-menu-main .header-menu-main-lang-arrow .MuiSvgIcon-root,
.csmsmedia-studio-modal-content .header-menu-main .header-menu-main-lang-arrow .MuiSvgIcon-root {
  font-size: 14px;
}
#csms-studio .header-menu-lang-back,
.csmsmedia-studio-modal-content .header-menu-lang-back {
  width: 200px;
  display: flex;
  align-items: center;
}
#csms-studio .header-menu-lang-back-arrow,
.csmsmedia-studio-modal-content .header-menu-lang-back-arrow {
  display: flex;
  align-items: center;
  margin-right: 10px;
}
#csms-studio .header-menu-lang-back-arrow .MuiSvgIcon-root,
.csmsmedia-studio-modal-content .header-menu-lang-back-arrow .MuiSvgIcon-root {
  font-size: 14px;
}
#csms-studio .header-menu-lang-select,
.csmsmedia-studio-modal-content .header-menu-lang-select {
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#csms-studio .header-menu-lang-localized,
.csmsmedia-studio-modal-content .header-menu-lang-localized {
  font-size: 10px;
}
#csms-studio #header-root,
.csmsmedia-studio-modal-content #header-root {
  flex-grow: 1;
}
#csms-studio #wrapper-header,
.csmsmedia-studio-modal-content #wrapper-header {
  background-color: var(--theme-primary);
  color: var(--theme-primary-text);
  border-bottom: 1px solid var(--header-border-color);
}
#csms-studio .header-appbar,
.csmsmedia-studio-modal-content .header-appbar {
  height: 66px;
}
#csms-studio .header-appbar .MuiToolbar-root,
.csmsmedia-studio-modal-content .header-appbar .MuiToolbar-root {
  min-height: 66px;
  padding: 0 16px;
}
#csms-studio .header-menu-btn,
.csmsmedia-studio-modal-content .header-menu-btn {
  margin-right: 16px;
  display: block;
}
#csms-studio .header-menu-btn:hover,
.csmsmedia-studio-modal-content .header-menu-btn:hover {
  background-color: transparent;
}
#csms-studio .header-search-button,
.csmsmedia-studio-modal-content .header-search-button {
  display: flex;
  align-items: center;
  color: rgba(54, 54, 54, 0.5098039216);
  margin-left: 10px;
  border-radius: 20px;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 4px 16px;
  cursor: pointer;
  width: 130px;
}
#csms-studio .header-search-icon,
.csmsmedia-studio-modal-content .header-search-icon {
  margin-right: 8px;
  color: rgba(54, 54, 54, 0.5098039216);
}
#csms-studio .header-search-text,
.csmsmedia-studio-modal-content .header-search-text {
  font-size: 0.875rem;
  color: rgba(54, 54, 54, 0.5098039216);
}
#csms-studio .header-grow,
.csmsmedia-studio-modal-content .header-grow {
  flex-grow: 1;
}
#csms-studio .header-avatar-box,
.csmsmedia-studio-modal-content .header-avatar-box {
  flex-grow: 0;
  align-items: center;
  margin-left: 20px;
  display: flex;
}
#csms-studio .header-avatar-btn,
.csmsmedia-studio-modal-content .header-avatar-btn {
  padding: 0;
  display: flex;
  align-items: center;
}
#csms-studio .header-avatar-img,
.csmsmedia-studio-modal-content .header-avatar-img {
  width: 32px;
  height: 32px;
}
#csms-studio #header-search-modal,
.csmsmedia-studio-modal-content #header-search-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  padding: 32px;
  border-radius: 5px;
  background: #fff;
}
#csms-studio .header-search-input,
.csmsmedia-studio-modal-content .header-search-input {
  margin-bottom: 16px;
  background: white;
}
#csms-studio .header-search-adornment,
.csmsmedia-studio-modal-content .header-search-adornment {
  cursor: pointer;
}
#csms-studio .custom-header,
.csmsmedia-studio-modal-content .custom-header {
  margin-bottom: 0px !important;
}
#csms-studio .profileDropdown .dropdown-toggle,
.csmsmedia-studio-modal-content .profileDropdown .dropdown-toggle {
  background-color: transparent;
}
#csms-studio .profileDropdown .dropdown-menu,
.csmsmedia-studio-modal-content .profileDropdown .dropdown-menu {
  width: 100%;
  text-align: center;
}
#csms-studio .dropdown-toggle,
.csmsmedia-studio-modal-content .dropdown-toggle {
  padding-right: 0;
  width: 160px;
}
#csms-studio .profileDropdown:hover,
.csmsmedia-studio-modal-content .profileDropdown:hover {
  background-color: #fff;
  color: black;
}
#csms-studio .profileDropdown:hover .icon-container,
.csmsmedia-studio-modal-content .profileDropdown:hover .icon-container {
  color: black;
  background-color: transparent;
}
#csms-studio .profileDropdown:hover .dropdown-toggle::after,
.csmsmedia-studio-modal-content .profileDropdown:hover .dropdown-toggle::after {
  color: black;
}
#csms-studio .profileDropdown:hover .fl,
.csmsmedia-studio-modal-content .profileDropdown:hover .fl {
  color: black;
}
#csms-studio .dropdown-toggle::after,
.csmsmedia-studio-modal-content .dropdown-toggle::after {
  margin-top: 15px;
}
#csms-studio .search-button .fa-search,
.csmsmedia-studio-modal-content .search-button .fa-search {
  margin-right: 0.5rem;
}
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
#csms-studio .upload-status,
.csmsmedia-studio-modal-content .upload-status {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
}
#csms-studio .upload-status .upload-status-cell,
.csmsmedia-studio-modal-content .upload-status .upload-status-cell {
  width: 30%;
  color: rgb(99, 87, 87);
}
#csms-studio .upload-status .upload-info,
.csmsmedia-studio-modal-content .upload-status .upload-info {
  font-size: 1rem;
  color: #333;
  line-height: 35px;
}
#csms-studio .upload-status .upload-info .file-size,
.csmsmedia-studio-modal-content .upload-status .upload-info .file-size {
  font-weight: bold;
  color: #666;
}
#csms-studio .upload-status .upload-actions,
.csmsmedia-studio-modal-content .upload-status .upload-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
#csms-studio .upload-status .upload-actions .reset-button,
.csmsmedia-studio-modal-content .upload-status .upload-actions .reset-button {
  min-width: 100px;
  border-color: #f44336;
  color: #f44336;
  font-weight: 600;
  transition: all 0.3s ease;
}
#csms-studio .upload-status .upload-actions .reset-button:hover:not(:disabled),
.csmsmedia-studio-modal-content .upload-status .upload-actions .reset-button:hover:not(:disabled) {
  background-color: #f44336;
  color: white;
  border-color: #f44336;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}
#csms-studio .upload-status .upload-actions .reset-button:active:not(:disabled),
.csmsmedia-studio-modal-content .upload-status .upload-actions .reset-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(244, 67, 54, 0.2);
}
#csms-studio .upload-status .upload-actions .reset-button:disabled,
.csmsmedia-studio-modal-content .upload-status .upload-actions .reset-button:disabled {
  opacity: 0.5;
  border-color: #ccc;
  color: #ccc;
}
#csms-studio .upload-status .upload-actions .upload-button,
.csmsmedia-studio-modal-content .upload-status .upload-actions .upload-button {
  min-width: 100px;
  background: linear-gradient(135deg, #2196f3, #1976d2);
  border: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}
#csms-studio .upload-status .upload-actions .upload-button:hover:not(:disabled),
.csmsmedia-studio-modal-content .upload-status .upload-actions .upload-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #1976d2, #1565c0);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
}
#csms-studio .upload-status .upload-actions .upload-button:active:not(:disabled),
.csmsmedia-studio-modal-content .upload-status .upload-actions .upload-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
}
#csms-studio .upload-status .upload-actions .upload-button:disabled,
.csmsmedia-studio-modal-content .upload-status .upload-actions .upload-button:disabled {
  opacity: 0.5;
  background: #ccc;
  transform: none;
  box-shadow: none;
}
#csms-studio .table-header,
.csmsmedia-studio-modal-content .table-header {
  background-color: #E2E2E2;
}
#csms-studio .table-header-row,
.csmsmedia-studio-modal-content .table-header-row {
  background-color: #E2E2E2;
}
#csms-studio .table-header-cell,
.csmsmedia-studio-modal-content .table-header-cell {
  border-bottom: none;
}
#csms-studio .file-info-cell,
.csmsmedia-studio-modal-content .file-info-cell {
  width: 70%;
  padding-right: 50px;
}
#csms-studio .file-name,
.csmsmedia-studio-modal-content .file-name {
  font-weight: bold;
}
#csms-studio .file-size-text,
.csmsmedia-studio-modal-content .file-size-text {
  color: rgb(131, 119, 119);
}
#csms-studio .video-preview-cell,
.csmsmedia-studio-modal-content .video-preview-cell {
  width: 30%;
}
#csms-studio .video-preview-cell .video-preview,
.csmsmedia-studio-modal-content .video-preview-cell .video-preview {
  width: 100%;
}
#csms-studio .video-preview-cell .video-preview video,
.csmsmedia-studio-modal-content .video-preview-cell .video-preview video {
  width: 100%;
}
#csms-studio .upload-icon,
.csmsmedia-studio-modal-content .upload-icon {
  margin-right: 8px;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* LangSelectModal styles */
}
#csms-studio .lang-modal-root,
.csmsmedia-studio-modal-content .lang-modal-root {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
#csms-studio .lang-modal-box,
.csmsmedia-studio-modal-content .lang-modal-box {
  width: 100%;
  max-width: 500px;
  height: 80%;
  background: #fff;
  color: #050505;
  border-radius: 8px;
  outline: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
#csms-studio .lang-modal-header,
.csmsmedia-studio-modal-content .lang-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #E4E6EB;
}
#csms-studio .lang-modal-title,
.csmsmedia-studio-modal-content .lang-modal-title {
  flex-grow: 1;
  color: #050505;
  font-weight: bold;
}
#csms-studio .lang-modal-close,
.csmsmedia-studio-modal-content .lang-modal-close {
  color: #65676B;
  margin-right: 8px;
}
#csms-studio .lang-modal-current-selected,
.csmsmedia-studio-modal-content .lang-modal-current-selected {
  border: 1px solid #e0e0e0;
}
#csms-studio .lang-modal-current-selected-inner,
.csmsmedia-studio-modal-content .lang-modal-current-selected-inner {
  padding: 16px;
  border-bottom: 1px solid #E4E6EB;
  display: flex;
  align-items: center;
  gap: 16px;
}
#csms-studio .lang-modal-current-selected-label,
.csmsmedia-studio-modal-content .lang-modal-current-selected-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
#csms-studio .lang-modal-current-selected-title,
.csmsmedia-studio-modal-content .lang-modal-current-selected-title {
  font-weight: bold;
  color: #050505;
}
#csms-studio .lang-modal-current-selected-chip,
.csmsmedia-studio-modal-content .lang-modal-current-selected-chip {
  margin-left: auto;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
}
#csms-studio .lang-modal-current-selected-chip-label,
.csmsmedia-studio-modal-content .lang-modal-current-selected-chip-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
#csms-studio .lang-modal-current-selected-chip-text,
.csmsmedia-studio-modal-content .lang-modal-current-selected-chip-text {
  font-weight: 500;
}
#csms-studio .lang-modal-search-box,
.csmsmedia-studio-modal-content .lang-modal-search-box {
  padding: 16px;
  border-bottom: 1px solid #E4E6EB;
}
#csms-studio .lang-modal-search-inner,
.csmsmedia-studio-modal-content .lang-modal-search-inner {
  display: flex;
  align-items: center;
  background: #F0F2F5;
  border-radius: 20px;
  padding: 0 5px;
}
#csms-studio .lang-modal-search-icon,
.csmsmedia-studio-modal-content .lang-modal-search-icon {
  color: #65676B;
  margin-right: 8px;
}
#csms-studio .lang-modal-search-input,
.csmsmedia-studio-modal-content .lang-modal-search-input {
  flex: 1;
}
#csms-studio .lang-modal-list-box,
.csmsmedia-studio-modal-content .lang-modal-list-box {
  overflow: auto;
  flex-grow: 1;
  position: relative;
}
#csms-studio .lang-modal-list,
.csmsmedia-studio-modal-content .lang-modal-list {
  padding: 0;
}
#csms-studio .lang-modal-list-item,
.csmsmedia-studio-modal-content .lang-modal-list-item {
  border-bottom: 1px solid #E4E6EB;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 16px;
  background: transparent;
  align-items: center;
  transition: background 0.2s;
}
#csms-studio .lang-modal-list-item:hover,
.csmsmedia-studio-modal-content .lang-modal-list-item:hover {
  background: rgba(0, 0, 0, 0.05);
}
#csms-studio .lang-modal-list-item--selected,
.csmsmedia-studio-modal-content .lang-modal-list-item--selected {
  background: rgba(24, 119, 242, 0.05);
}
#csms-studio .lang-modal-list-item-label,
.csmsmedia-studio-modal-content .lang-modal-list-item-label {
  display: flex;
  flex-direction: column;
}
#csms-studio .lang-modal-list-item-endonym,
.csmsmedia-studio-modal-content .lang-modal-list-item-endonym {
  font-weight: 500;
  color: #050505;
}
#csms-studio .lang-modal-list-item-localized,
.csmsmedia-studio-modal-content .lang-modal-list-item-localized {
  color: #65676B;
  font-size: 0.9rem;
}
#csms-studio .lang-modal-list-item-check,
.csmsmedia-studio-modal-content .lang-modal-list-item-check {
  color: #1877F2;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes pulse {
  0% {
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-50%) scale(1.5);
    opacity: 0.7;
  }
  100% {
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
}
@media (min-width: 900px) {
  #csms-studio .header-menu-btn {
    display: none;
  }
}
@media (min-width: 600px) {
  #csms-studio .header-appbar {
    height: 55px;
  }
  #csms-studio .header-appbar .MuiToolbar-root {
    min-height: 55px;
    padding: 0 24px;
  }
}
@media (max-width: 768px) {
  .studio-video-upload-modal .modal-container {
    width: 95%;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .studio-video-upload-modal .modal-body {
    padding: 16px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .studio-video-upload-modal .upload-actions .reset-button,
  .studio-video-upload-modal .upload-actions .upload-button {
    flex: 1;
  }
  .studio-video-upload-modal .file-info-cell {
    padding: 12px;
  }
  .studio-video-upload-modal .upload-vod-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: auto;
    margin-bottom: 8px;
  }
  .studio-video-upload-modal .upload-vod-container .video-preview-cell {
    display: none;
  }
  .studio-video-upload-modal .upload-vod-container .file-info-cell {
    width: 70%;
    padding-right: 16px;
  }
  .studio-video-upload-modal .upload-vod-container .upload-status-cell {
    width: 30%;
  }
  .studio-video-upload-modal .upload-vod-container table td.video-preview-cell {
    display: none;
  }
  .studio-video-upload-modal .upload-vod-container table .table-header-cell {
    display: none;
  }
  .studio-video-upload-modal .upload-vod-container-body {
    flex: 1;
    min-height: 0;
    height: auto;
    overflow-y: auto;
  }
  .studio-video-upload-modal .modal-body-footer {
    flex-shrink: 0;
  }
}
@media screen and (max-height: 990.5px) {
  .studio-video-upload-modal {
    height: 100%;
    border-radius: 0;
  }
}
.studio-video-upload-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.studio-video-upload-modal .modal-container {
  width: 1072px;
  height: 489px;
  border-radius: var(--csms-studio-border-radius-12);
  padding-right: 24px;
  padding-left: 24px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.studio-video-upload-modal .modal-container .toast-wrapper-modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  width: 760px;
  height: 56px;
  padding: 14px 16px;
  align-items: center;
  box-sizing: border-box;
  border-bottom-right-radius: var(--csms-studio-border-radius-16);
  border-bottom-left-radius: var(--csms-studio-border-radius-16);
  z-index: 1000;
}
.studio-video-upload-modal .modal-container .toast-wrapper-modal .toast-body {
  position: relative;
  width: 100%;
  justify-content: center;
}
.studio-video-upload-modal .modal-container .toast-wrapper-modal .toast-text {
  display: flex;
  align-items: center;
  justify-content: center;
}
.studio-video-upload-modal .modal-container .toast-wrapper-modal .btn-close-toast {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 0;
  margin: 0px;
  cursor: pointer;
}
.studio-video-upload-modal .modal-container .upload-vod-container-header {
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 4px 8px;
  background-color: var(--csms-studio-bg-hierarchy-primary);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.studio-video-upload-modal .modal-container .upload-vod-container-header .upload-vod-container-header-text {
  height: 20px;
  gap: 4px;
  color: var(--csms-studio-tx-hierarchy-quinary);
}
.studio-video-upload-modal .modal-container .upload-vod-container-body {
  width: 100%;
  height: 287px;
  min-height: 56px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}
.studio-video-upload-modal .modal-header {
  width: 100%;
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0 !important;
}
.studio-video-upload-modal .modal-header.modal-header-relative {
  position: relative;
}
.studio-video-upload-modal .modal-header .modal-header-title {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-primary);
}
.studio-video-upload-modal .modal-header .modal-header-buttons {
  display: flex;
  align-items: center;
}
.studio-video-upload-modal .modal-header .modal-header-buttons .file-add-button {
  width: 96px;
  height: 36px;
  margin-right: 16px;
  cursor: pointer;
}
.studio-video-upload-modal .modal-header .modal-header-buttons .file-add-button .file-add-button-text {
  width: 48;
  height: 20px;
  color: var(--csms-studio-tx-hierarchy-secondary);
  margin-right: 4px;
  cursor: pointer;
}
.studio-video-upload-modal .modal-header .modal-header-buttons .reset-button {
  width: 96px;
  height: 36px;
  margin-right: 4px;
  cursor: pointer;
}
.studio-video-upload-modal .modal-header .modal-header-buttons .reset-button .file-add-button-text {
  width: 48;
  height: 20px;
  color: var(--csms-studio-tx-hierarchy-secondary);
  margin-right: 4px;
}
.studio-video-upload-modal .modal-header .modal-header-buttons .upload-button {
  width: 82px;
  height: 36px;
  margin-right: 4px;
  cursor: pointer;
}
.studio-video-upload-modal .modal-header .modal-header-buttons .upload-button .file-add-button-text {
  width: 48;
  height: 20px;
  color: var(--csms-studio-tx-hierarchy-secondary);
  margin-right: 4px;
}
.studio-video-upload-modal .modal-header .modal-header-buttons .file-add-button:focus:not(:focus-visible),
.studio-video-upload-modal .modal-header .modal-header-buttons .reset-button:focus:not(:focus-visible),
.studio-video-upload-modal .modal-header .modal-header-buttons .upload-button:focus:not(:focus-visible) {
  box-shadow: none !important;
}
.studio-video-upload-modal .modal-header .modal-header-buttons .file-add-button:disabled,
.studio-video-upload-modal .modal-header .modal-header-buttons .reset-button:disabled,
.studio-video-upload-modal .modal-header .modal-header-buttons .upload-button:disabled {
  pointer-events: none;
  cursor: not-allowed;
}
.studio-video-upload-modal .modal-header .modal-header-buttons .upload-confirm-button {
  width: 72px;
  height: 36px;
  border: 0;
  border-radius: var(--csms-studio-border-radius-8);
  background-color: var(--csms-studio-bg-coursemos-primary);
  color: var(--csms-studio-tx-neutral-white-solid);
  cursor: pointer;
  padding: 0px 16px;
  border-radius: 8px;
}
.studio-video-upload-modal .modal-header .modal-header-buttons .upload-confirm-button:hover {
  background-color: #0066E0;
  box-shadow: none;
}
.studio-video-upload-modal .modal-header .modal-header-buttons .close-button {
  width: 32px;
  height: 32px;
  margin-left: 16px;
}
.studio-video-upload-modal .modal-body {
  width: 100%;
  height: 356px;
  gap: 16px;
  padding: 0;
}
.studio-video-upload-modal .modal-body .modal-body-footer {
  width: 100%;
  height: auto;
  min-height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
@media (max-width: 768px) {
  .studio-video-upload-modal .modal-body .modal-body-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
.studio-video-upload-modal .modal-body .modal-body-footer .modal-body-footer-text {
  display: flex;
  align-items: flex-start;
  height: auto;
  min-height: 20px;
  padding-left: 4px;
  gap: 4px;
  color: var(--csms-studio-tx-semantic-nega-primary);
  flex-shrink: 1;
  min-width: 0;
}
@media (max-width: 768px) {
  .studio-video-upload-modal .modal-body .modal-body-footer .modal-body-footer-text {
    width: 100%;
  }
}
.studio-video-upload-modal .modal-body .modal-body-footer .modal-body-footer-text .modal-body-footer-text-icon {
  width: 16px;
  height: 16px;
  margin-right: 2px;
  flex-shrink: 0;
  margin-top: 2px;
}
.studio-video-upload-modal .modal-body .modal-body-footer .modal-body-footer-text .modal-body-footer-text-icon svg {
  width: 15.86px;
  height: 13.86px;
  top: 0.73px;
  left: 0.07px;
}
.studio-video-upload-modal .modal-body .modal-body-footer .modal-body-footer-text span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.4;
}
.studio-video-upload-modal .modal-body .modal-body-footer .file-total-count {
  height: 20px;
  color: var(--csms-studio-tx-hierarchy-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .studio-video-upload-modal .modal-body .modal-body-footer .file-total-count {
    width: 100%;
  }
}
.studio-video-upload-modal .file-info-cell {
  padding: 16px;
  vertical-align: middle;
}
.studio-video-upload-modal .file-info-cell .file-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.studio-video-upload-modal .file-info-cell .file-header .file-info-content {
  flex: 1;
  min-width: 0;
}
.studio-video-upload-modal .file-info-cell .file-header .remove-file-button {
  flex-shrink: 0;
  margin-left: 8px;
  padding: 4px;
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: all 0.2s ease;
}
.studio-video-upload-modal .file-info-cell .file-header .remove-file-button:hover {
  transform: scale(1.1);
}
.studio-video-upload-modal .file-info-cell .file-header .remove-file-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.studio-video-upload-modal .file-info-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.studio-video-upload-modal .file-name {
  font-weight: 500;
  color: #333;
  word-break: break-all;
}
.studio-video-upload-modal .file-size {
  margin-left: 10px;
  color: #666;
  font-size: 0.875rem;
}
.studio-video-upload-modal .progress-container {
  margin-top: 8px;
}
.studio-video-upload-modal .dropzone-area {
  position: relative;
  width: 100%;
  height: 284px;
  min-height: 56px;
  border-radius: 8px;
  padding: 10px 8px;
  gap: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px dashed var(--csms-studio-bo-hierarchy-secondary, #E0E3E5);
}
.studio-video-upload-modal .dropzone-area.drag-active {
  background-color: var(--csms-studio-bg-semantic-info-senary-subtle);
  border: 1px dashed var(--csms-studio-bo-semantic-info-primary);
}
.studio-video-upload-modal .dropzone-area.drag-reject {
  background-color: var(--csms-studio-bg-semantic-nega-senary);
  border: 1px dashed var(--csms-studio-bo-semantic-nega-primary);
}
.studio-video-upload-modal .dropzone-active-content,
.studio-video-upload-modal .dropzone-reject-content,
.studio-video-upload-modal .dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.studio-video-upload-modal .dropzone-active-content .dropzone-icon,
.studio-video-upload-modal .dropzone-reject-content .dropzone-icon,
.studio-video-upload-modal .dropzone-content .dropzone-icon {
  margin-bottom: 8px;
}
.studio-video-upload-modal .dropzone-active-content .dropzone-content-text,
.studio-video-upload-modal .dropzone-reject-content .dropzone-content-text,
.studio-video-upload-modal .dropzone-content .dropzone-content-text {
  width: 100%;
  height: 21px;
  text-align: center;
  color: var(--csms-studio-tx-hierarchy-quinary);
  margin-bottom: 16px;
}
.studio-video-upload-modal .dropzone-active-content .dropzone-content-text-description,
.studio-video-upload-modal .dropzone-reject-content .dropzone-content-text-description,
.studio-video-upload-modal .dropzone-content .dropzone-content-text-description {
  color: var(--csms-studio-tx-hierarchy-quaternary);
}
.studio-video-upload-modal .dropzone-active-content .dropzone-content-text-description {
  color: var(--csms-studio-tx-coursemos-secondary);
}
.studio-video-upload-modal .dropzone-reject-content .dropzone-content-text-description {
  color: var(--csms-studio-tx-semantic-nega-quaternary);
}
.studio-video-upload-modal .dropzone-icon {
  color: var(--csms-studio-tx-hierarchy-senary);
}
.studio-video-upload-modal .upload-info {
  flex: 1;
  font-size: 1rem;
  color: #333;
  line-height: 35px;
}
.studio-video-upload-modal .upload-info .file-size {
  font-weight: bold;
  color: #666;
}
.studio-video-upload-modal .upload-info .upload-status-text {
  margin-top: 10px;
}
.studio-video-upload-modal .upload-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.studio-video-upload-modal .upload-actions .reset-button {
  min-width: 100px;
  border-color: #f44336;
  color: #f44336;
  font-weight: 600;
  transition: all 0.3s ease;
}
.studio-video-upload-modal .upload-actions .reset-button:hover:not(:disabled) {
  background-color: #f44336;
  color: white;
  border-color: #f44336;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}
.studio-video-upload-modal .upload-actions .reset-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(244, 67, 54, 0.2);
}
.studio-video-upload-modal .upload-actions .reset-button:disabled {
  opacity: 0.5;
  border-color: #ccc;
  color: #ccc;
}
.studio-video-upload-modal .upload-actions .upload-button {
  min-width: 120px;
  background: linear-gradient(135deg, #2196f3, #1976d2);
  border: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}
.studio-video-upload-modal .upload-actions .upload-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #1976d2, #1565c0);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
}
.studio-video-upload-modal .upload-actions .upload-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
}
.studio-video-upload-modal .upload-actions .upload-button:disabled {
  opacity: 0.5;
  background: #ccc;
  transform: none;
  box-shadow: none;
}
.studio-video-upload-modal .progress-bar-container {
  width: 100%;
  height: 24px;
  background-color: #f5f5f5;
  border-radius: 12px;
  overflow: visible;
  position: relative;
  border: 1px solid #e0e0e0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.studio-video-upload-modal .upload-vod-container {
  width: 100%;
  height: 328px;
  margin-bottom: 8px;
}
.studio-video-upload-modal .upload-vod-table-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.studio-video-upload-modal .file-upload-row {
  display: flex;
  width: 100%;
  height: 56px;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px;
  gap: 32px;
  border-bottom: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  box-sizing: border-box;
}
.studio-video-upload-modal .file-upload-row-left {
  display: flex;
  align-items: baseline;
  flex: 0 0 auto;
  min-width: 0;
}
.studio-video-upload-modal .file-upload-row-left .file-upload-name {
  color: var(--csms-studio-tx-hierarchy-secondary);
  margin-right: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-video-upload-modal .file-upload-row-left .file-upload-size {
  color: var(--csms-studio-tx-hierarchy-quaternary);
  white-space: nowrap;
}
.studio-video-upload-modal .file-upload-row-right {
  display: flex;
  align-items: center;
}
.studio-video-upload-modal .file-upload-row-right .file-upload-status {
  width: 31px;
  height: 18px;
  white-space: nowrap;
  margin-right: 4px;
  color: var(--csms-studio-tx-hierarchy-quinary);
}
.studio-video-upload-modal .file-upload-row-right .file-upload-progress-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.studio-video-upload-modal .file-upload-row-right .file-upload-progress-percentage {
  margin-right: 4px;
}
.studio-video-upload-modal .file-upload-row-right .file-upload-progress-bar-container {
  width: 173px;
  flex: 1;
  height: 8px;
  background-color: var(--csms-studio-bg-hierarchy-secondary);
  border-radius: var(--csms-studio-border-radius-full);
  overflow: hidden;
}
.studio-video-upload-modal .file-upload-row-right .file-upload-progress-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
  min-width: 0;
}
.studio-video-upload-modal .file-upload-row-right .file-upload-progress-status {
  min-width: 31px;
  text-align: right;
  margin-right: 8px;
}
.studio-video-upload-modal .file-upload-row-right .file-upload-progress-container {
  height: 8px;
}
.studio-video-upload-modal .file-upload-row-right .file-upload-progress-container .file-upload-progress {
  width: 173px;
  height: 8px;
  background-color: var(--csms-studio-bg-hierarchy-secondary);
}
.studio-video-upload-modal .file-upload-row-right .file-upload-delete-button {
  color: var(--csms-studio-fg-hierarchy-secondary);
  cursor: pointer;
  flex-shrink: 0;
}
.studio-video-upload-modal .file-upload-row-right .file-upload-size-warning-icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  color: var(--csms-studio-tx-semantic-nega-primary);
}
.studio-video-upload-modal .file-upload-row-right .file-upload-size-warning {
  color: var(--csms-studio-tx-semantic-nega-primary);
  margin-right: 24px;
}
.studio-video-upload-modal .progress-bar-background {
  width: 100%;
  height: 100%;
  background-color: #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.studio-video-upload-modal .progress-bar-fill {
  height: 100%;
  min-width: 20px;
  border-radius: 12px 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-weight: bold;
  font-size: 12px;
  transition: all 0.3s ease-in-out;
}
.studio-video-upload-modal .progress-bar-fill::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
  animation: shimmer 2s infinite;
}
.studio-video-upload-modal .progress-bar-text {
  position: relative;
  z-index: 2;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.studio-video-upload-modal .progress-glow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  z-index: 3;
}
.studio-video-upload-modal .progress-pulse {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  z-index: 4;
  animation: pulse 1.5s infinite;
}
.studio-video-upload-modal .progress-percentage {
  position: absolute;
  top: -25px;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.3s ease-in-out;
}
.studio-video-upload-modal .progress-percentage .percentage-text {
  color: white;
}
.studio-video-upload-modal .progress-bar-container:hover .progress-percentage {
  opacity: 1;
  transform: translateY(0);
}
.studio-video-upload-modal .progress-status {
  position: absolute;
  bottom: -25px;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.3s ease-in-out;
}
.studio-video-upload-modal .progress-status .status-text {
  color: white;
}
.studio-video-upload-modal .progress-bar-container:hover .progress-status {
  opacity: 1;
  transform: translateY(0);
}
/*!******************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/resources/assets/styles/dashboard.scss ***!
  \******************************************************************************************************************************************************************/
#csms-studio .dashboard-container {
  width: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;
}
#csms-studio .dashboard-container .dashboard-header {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#csms-studio .dashboard-container .dashboard-buttons {
  display: flex;
  position: absolute;
  right: 40px;
  top: 18px;
  align-items: center;
  justify-content: space-between;
}
#csms-studio .dashboard-container .widget-list {
  width: 30%;
  height: 100%;
}
#csms-studio .dashboard-container .widget-list .toolbox-items {
  padding: 0 30px;
}
#csms-studio .dashboard-container .widget-list .toolbox-items .toolbox-item {
  padding: 5px;
  cursor: pointer;
  border-radius: 7px;
  border: 1px solid #ddd;
  background-color: #fff;
  margin-bottom: 20px;
}
#csms-studio .dashboard-container .widgetGrid-container {
  display: grid;
  grid-template-rows: auto;
  width: 100%;
  padding-top: 20px;
  position: relative;
}
#csms-studio .dashboard-container .widgetGrid-container .widgetGrid-background-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  grid-row: 1;
  grid-column: 1;
  z-index: 1;
  padding: 0 30px;
}
#csms-studio .dashboard-container .widgetGrid-container .widgetGrid-content-container {
  width: 100%;
  grid-row: 1;
  grid-column: 1;
  position: relative;
  z-index: 2;
  padding: 0 30px;
}
#csms-studio .dashboard-container .react-grid-item {
  border: 1px #ddd solid;
  border-radius: 10px !important;
  background-color: #fff;
  padding: 10px;
}
#csms-studio .dashboard-container .react-grid-item .box_widget_menu {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#csms-studio .dashboard-container .react-grid-item .box_widget_menu .box_widget_menu_title {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: move;
}
#csms-studio .dashboard-container .react-grid-item .box_widget_menu .icon_widget_menu {
  cursor: pointer;
}
#csms-studio .dashboard-container .react-grid-item .dragItem-content-outer {
  width: 100%;
  height: calc(100% - 45px);
  padding: 10px 20px;
  overflow-y: auto;
}
#csms-studio .dashboard-container .react-grid-placeholder {
  background-color: #0073e6;
}
#csms-studio .dashboard-container .grid-layout {
  width: 100%;
  height: 1070px;
  padding: 0 30px;
  position: absolute;
  top: 0;
  left: 0;
}
#csms-studio .dashboard-container .grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 115, 230, 0.9);
  border: 1px solid #0073e6;
  font-size: 16px;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#csms-studio .dashboard-container .draggable-container {
  width: 100%;
  height: 100%;
  padding: 0 30px;
  position: absolute;
  top: 0;
  left: 0;
}
#csms-studio .dashboard-container .resizable-box {
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  z-index: 1000;
  background-color: #fff;
  border: 1px #ddd solid;
  border-radius: 10px !important;
}
#csms-studio .container-dashboard {
  width: 100%;
  height: calc(100% - 65.33px);
  overflow: auto;
}
#csms-studio .container-dashboard .wrapper-dashboard {
  width: 100%;
  padding: 30px 0;
}
#csms-studio .container-dashboard .dashboardCard {
  position: relative;
  background-color: #f7f7f7;
  border: 1px #ddd solid;
  border-radius: 10px;
  height: 100%;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#csms-studio .container-dashboard .dashboardCard .dashboardCardChart {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60%;
  height: 100%;
}
#csms-studio .container-dashboard .dashboardCard .dashboardCardChart svg {
  width: 100%;
  height: 100%;
}
#csms-studio .container-dashboard .dashboardCard .dashboardCardChart .MuiChartsAxis-directionY,
#csms-studio .container-dashboard .dashboardCard .dashboardCardChart .MuiChartsAxis-directionX,
#csms-studio .container-dashboard .dashboardCard .dashboardCardChart .MuiChartsLegend-root {
  display: none;
}
#csms-studio .container-dashboard .dashboardBox {
  width: 100%;
  height: 100%;
  font-weight: bold;
  background-color: #f7f7f7;
  border: 1px #ddd solid;
  border-radius: 10px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#csms-studio .container-dashboard .dashboardBox .dashboardBoxTitle {
  font-size: 20px;
}
#csms-studio .container-dashboard .dashboardBox .dashboardBoxContent {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
}
#csms-studio .container-dashboard .dashboardBox .usedServiceTable thead th {
  text-align: center;
  font-weight: bold;
  color: #333;
}
#csms-studio .container-dashboard .dashboardBox .usedServiceTable tbody tr td {
  text-align: center;
  padding: 12px;
  border-bottom: 1px solid #ddd;
}
#csms-studio .container-dashboard .dashboardBox .usedServiceTable tbody tr:hover {
  background-color: #f9f9f9;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}
#csms-studio .container-dashboard .dashboardBox .dashboardBoxContent.usedOSChart svg,
#csms-studio .container-dashboard .dashboardBox .dashboardBoxContent.usedDeviceChart svg {
  width: 100%;
  height: 100%;
}
#csms-studio .container-dashboard .dashboardBox .dashboardBoxContent.usagePerCountryChart svg {
  width: 100%;
  height: 100%;
}
#csms-studio .container-dashboard .dashboardBox .dashboardBoxContent.usagePerCountryChart svg g {
  width: 100%;
  height: 100%;
}
#csms-studio .container-dashboard .dashboardBox .numberUsersChart .MuiChartsLegend-root {
  display: none;
}
#csms-studio #apexchartschartNumberUser-area,
#csms-studio #apexchartschartNumberUser-line {
  margin: 0 auto;
}
#csms-studio .container-widget-grid {
  width: 100%;
  position: relative;
  display: grid;
  grid-template-rows: auto;
  padding-top: 20px;
}
#csms-studio .container-widget-grid-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  padding: 0 30px;
}
#csms-studio .container-widget-grid-content,
#csms-studio .container-widget-grid-content-absolute {
  width: 100%;
  position: relative;
  z-index: 2;
  padding: 0 30px;
}
#csms-studio .layout-widget-grid {
  width: 100%;
}
#csms-studio .container-draggable-content {
  border: 1px #ddd solid;
  border-radius: 10px !important;
  background-color: #fff;
  margin-bottom: 10px;
}
#csms-studio .box-widget-menu {
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#csms-studio .box-drag-handle {
  width: 25px;
  height: 25px;
  cursor: move;
}
#csms-studio .icon-widget-menu {
  cursor: pointer;
}
#csms-studio .box-drag-item-content-outer {
  width: 100%;
  height: calc(100% - 45px);
  padding: 10px 20px;
  overflow-y: auto;
}
#csms-studio .box-drag-item-content-position,
#csms-studio .box-drag-item-content-size {
  font-size: 12px;
  color: #888;
}
#csms-studio .box-drag-item-content-inner {
  width: 100%;
  height: 100%;
}
#csms-studio .menu-drag-item {
  width: 100px;
  border-radius: 8px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
  padding: 0 5px;
}
#csms-studio .menu-item-delete {
  box-shadow: none;
  background-color: transparent;
}
#csms-studio .container-dashboard-top-row {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: space-between;
  padding: 0 2%;
  margin-bottom: 30px;
}
#csms-studio .container-dashboard-middle-row {
  width: 100%;
  height: 800px;
  display: flex;
  justify-content: space-between;
  padding: 0 2%;
  margin-bottom: 30px;
}
#csms-studio .container-dashboard-left-column {
  width: calc(70% - 30px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#csms-studio .container-dashboard-top-left {
  width: 100%;
  height: calc(50% - 15px);
  display: flex;
  justify-content: space-between;
}
#csms-studio .container-dashboard-bottom-left {
  width: 100%;
  height: calc(50% - 15px);
  display: flex;
  justify-content: space-between;
}
#csms-studio .container-dashboard-right-column {
  width: 30%;
  height: 100%;
}
#csms-studio .container-dashboard-bottom-row {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: space-between;
  padding: 0 2%;
  margin-bottom: 30px;
}
#csms-studio .container-dashboard-map-row {
  width: 100%;
  height: 700px;
  display: flex;
  justify-content: space-between;
  padding: 0 2%;
}
/*!********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/react-grid-layout/css/styles.css ***!
  \********************************************************************************************************************************************************************/
.react-grid-layout {
  position: relative;
  transition: height 200ms ease;
}

.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top, width, height;
}

.react-grid-item img {
  pointer-events: none;
  user-select: none;
}

.react-grid-item.cssTransforms {
  transition-property: transform, width, height;
}

.react-grid-item.resizing {
  transition: none;
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.react-grid-item.react-grid-placeholder.placeholder-resizing {
  transition: none;
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
}

.react-grid-item > .react-resizable-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.react-resizable-hide > .react-resizable-handle {
  display: none;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}
/*!******************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/react-resizable/css/styles.css ***!
  \******************************************************************************************************************************************************************/
.react-resizable {
  position: relative;
}

.react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);
  background-position: bottom right;
  padding: 0 3px 3px 0;
}

.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}

.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}

.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}

.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}

.react-resizable-handle-w,
.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}

.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}

.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}

.react-resizable-handle-n,
.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}

.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}

.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}
/*!****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/resources/assets/styles/loading.scss ***!
  \****************************************************************************************************************************************************************/
#wrapper-pre-loading {
  position: absolute;
  top: 30%;
  width: 100%;
  min-height: 500px;
}

#component-pre-loading {
  padding-top: 20%;
  width: 100%;
  min-height: 500px;
}

#text-pre-loading {
  top: calc(50% + 30px);
  text-align: center;
  width: 100%;
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color: black;
  animation: fade 3s infinite;
}

#pre-loading {
  height: 20px;
  width: 20px;
  margin: 0px auto;
  -webkit-animation: rotation 0.6s infinite linear;
  -moz-animation: rotation 0.6s infinite linear;
  -o-animation: rotation 0.6s infinite linear;
  animation: rotation 0.6s infinite linear;
  border-left: 6px solid rgba(0, 117, 248, 0.15);
  border-right: 6px solid rgba(0, 117, 248, 0.15);
  border-bottom: 6px solid rgba(0, 117, 248, 0.15);
  border-top: 6px solid rgba(0, 117, 248, 0.8);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes fade {
  0%, 100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.7;
  }
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}
@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
/*!********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/resources/assets/styles/bulkDeleter.scss ***!
  \********************************************************************************************************************************************************************/
#csms-studio .MuiTablePagination-selectLabel {
  margin-bottom: 0;
}
#csms-studio .MuiTablePagination-displayedRows {
  margin-bottom: 0;
}
#csms-studio .bulkdeleter-btn-row {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 16px;
}
#csms-studio .bulkdeleter-btn-text {
  color: var(--theme-text-color);
}
#csms-studio .bulkdeleter-table-paper {
  border: 1px solid #ddd;
}
#csms-studio .bulkdeleter-table-header {
  color: var(--theme-text-color);
}
#csms-studio #table-batch-remover .MuiTableCell-root {
  color: var(--theme-text-color);
}
#csms-studio .bulkdeleter-edit-btn {
  margin-right: 8px;
  background-color: rgb(243, 187, 0) !important;
}
#csms-studio .bulkdeleter-pagination-row {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
#csms-studio .bulkdeleter-action-cell {
  width: 80px;
}
#csms-studio .bulkdeleter-no-data-container {
  width: 100%;
  padding-top: 30%;
  text-align: center;
}
#csms-studio .bulkdeleter-modal-root {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
#csms-studio .bulkdeleter-modal-container {
  width: 90%;
  max-width: 1200px;
  height: 80%;
  background: #fff;
  color: #050505;
  border-radius: 8px;
  outline: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
#csms-studio .bulkdeleter-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
#csms-studio .bulkdeleter-modal-header .bulkdeleter-modal-title {
  flex-grow: 1;
  color: #050505;
  font-weight: bold;
}
#csms-studio .bulkdeleter-modal-content {
  padding: 0 20px;
}
#csms-studio .bulkdeleter-modal-timezone-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 20px;
}
#csms-studio .bulkdeleter-modal-timezone-text {
  font-size: 18px;
}
#csms-studio .bulkdeleter-modal-timezone-caption {
  font-size: 12px;
}
#csms-studio .bulkdeleter-modal-date-section {
  display: flex;
  align-items: center;
}
#csms-studio .bulkdeleter-modal-date-picker {
  flex-grow: 1;
}
#csms-studio .bulkdeleter-modal-date-picker .MuiInputBase-root {
  font-size: 15px;
  margin-right: 20px;
}
#csms-studio .bulkdeleter-modal-fetch-btn {
  height: 40px;
}
#csms-studio .bulkdeleter-modal-table-section {
  padding: 20px;
  min-height: 500px;
  height: 100%;
}
#csms-studio .bulkdeleter-modal-loading-container {
  display: flex;
  justify-content: center;
  padding-top: 20%;
}
#csms-studio .bulkdeleter-modal-loading-spinner {
  margin-right: 10px;
}
#csms-studio .bulkdeleter-modal-select-message {
  padding-top: 20%;
}
#csms-studio .bulkdeleter-modal-button-section {
  text-align: right;
  padding: 20px;
}
#csms-studio .bulkdeleter-modal-cancel-btn {
  margin-right: 8px;
}
#csms-studio .bulkdeleter-modal-table-container {
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
}
#csms-studio .bulkdeleter-modal-table-fixed-header {
  flex-shrink: 0;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  z-index: 2;
  position: sticky;
  top: 0;
}
#csms-studio .bulkdeleter-modal-table-fixed-header .table-bulkDeleter-list {
  margin-bottom: 0;
}
#csms-studio .bulkdeleter-modal-table-scrollable-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
#csms-studio .bulkdeleter-modal-table-scrollable-content .table-bulkDeleter-list {
  margin-top: 0;
}
#csms-studio .bulkdeleter-modal-table-header {
  background-color: #d5e5f5;
}
#csms-studio .bulkdeleter-modal-table-header .MuiTableCell-root {
  background-color: #d5e5f5 !important;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}
#csms-studio .bulkdeleter-modal-table-id-cell {
  min-width: 100px;
  width: 100px;
}
#csms-studio .bulkdeleter-modal-table-thumbnail-cell {
  min-width: 200px;
  width: 200px;
}
#csms-studio .bulkdeleter-modal-table-filename-cell {
  text-align: left !important;
  min-width: 200px;
  word-break: break-all;
}
#csms-studio .bulkdeleter-modal-table-playtime-cell {
  min-width: 100px;
  width: 100px;
}
#csms-studio .bulkdeleter-modal-table-created-cell {
  min-width: 150px;
  width: 150px;
}
#csms-studio .bulkdeleter-modal-table-updated-cell {
  min-width: 150px;
  width: 150px;
}
#csms-studio .bulkdeleter-modal-table-scroll-container {
  max-height: 1000px;
  overflow-y: auto;
}
#csms-studio .bulkdeleter-modal-pagination-container {
  display: flex;
  justify-content: center;
  padding: 16px;
  flex-shrink: 0;
  border-top: 1px solid #ddd;
  background-color: #fff;
  z-index: 2;
  position: sticky;
  bottom: 0;
}
#csms-studio .bulkdeleter-modal-no-content-container {
  padding: 20% 20px 20px 20px;
  text-align: center;
}
#csms-studio .bulkdeleter-delete-modal-content {
  padding: 30px 0;
  text-align: center;
}
#csms-studio .bulkdeleter-delete-modal-loading {
  display: flex;
  justify-content: center;
}
#csms-studio .bulkdeleter-delete-modal-spinner {
  margin-right: 10px;
}
#csms-studio .bulkdeleter-delete-modal-actions {
  padding: 20px;
}
#csms-studio .container-video-batchRemover-wrapper {
  padding: 30px;
}
#csms-studio #table-batch-remover .MuiTableCell-root {
  text-align: center !important;
}
#csms-studio #table-batch-remover .MuiSvgIcon-root {
  opacity: 0.7;
}
#csms-studio #table-batch-remover .MuiButtonBase-root {
  margin-right: 0 !important;
}
#csms-studio #box-table-batch-remover #component-pre-loading {
  padding-top: 250px;
  height: 500px;
}
#csms-studio .table-bulkDeleter-list .MuiSvgIcon-root {
  opacity: 0.7;
}
#csms-studio .table-bulkDeleter-list thead tr th {
  text-align: center;
  background-color: #d5e5f5;
}
#csms-studio .table-bulkDeleter-list td {
  text-align: center;
}
#csms-studio .table-bulkDeleter-list tr:hover td {
  background-color: #eee;
}
#csms-studio .table-bulkDeleter-list .tc-content-list-thumbnail {
  vertical-align: middle;
  padding: 0 15px;
  min-width: 200px;
  width: 200px;
}
#csms-studio .table-bulkDeleter-list .tc-content-list-thumbnail .img-content-list-thumnail {
  max-width: 250px;
  max-height: 150px;
  padding: 15px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto;
}
#csms-studio .table-bulkDeleter-list .tc-content-list-thumbnail .img-content-list-thumnail img {
  width: 100%;
  object-fit: cover;
}
#csms-studio .table-bulkDeleter-list #component-pre-loading {
  padding: 30% 0;
  height: 100%;
}
#csms-studio .table-bulkDeleter-list #tableCell-loading {
  background-color: #fff;
}
#csms-studio .table-bulkDeleter-list .MuiTableCell-root {
  padding: 8px 16px;
  border-bottom: 1px solid #e0e0e0;
}
#csms-studio .table-bulkDeleter-list .bulkdeleter-modal-table-fixed-header .table-bulkDeleter-list,
#csms-studio .table-bulkDeleter-list .bulkdeleter-modal-table-scrollable-content .table-bulkDeleter-list {
  table-layout: fixed;
  width: 100%;
}
/*!**************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/video.js/dist/video-js.css ***!
  \**************************************************************************************************************************************************************/
.vjs-svg-icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  fill: currentColor;
  height: 1.8em;
  width: 1.8em;
}

.vjs-svg-icon:before {
  content: none !important;
}

.vjs-svg-icon:hover,
.vjs-control:focus .vjs-svg-icon {
  filter: drop-shadow(0 0 0.25em #fff);
}

.vjs-modal-dialog .vjs-modal-dialog-content, .video-js .vjs-modal-dialog, .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  text-align: center;
}

@font-face {
  font-family: VideoJS;
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABTsAAsAAAAAIpAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV32Y21hcAAAAYQAAAEJAAAD5p42+VxnbHlmAAACkAAADtIAABckI4l972hlYWQAABFkAAAAKwAAADYsvIjpaGhlYQAAEZAAAAAdAAAAJA+RCL1obXR4AAARsAAAABcAAAC8Q2YAAGxvY2EAABHIAAAAYAAAAGB7CIGGbWF4cAAAEigAAAAfAAAAIAFAAI9uYW1lAAASSAAAASUAAAIK1cf1oHBvc3QAABNwAAABfAAAAnXdFqh1eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGR7yDiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGPHcRdyA4RZgQRADaGCyYAAHic7dPXbcMwAEXRK1vuvffem749XAbKV3bjBA6fXsaIgMMLEWoQJaAEFKNnlELyQ4K27zib5PNF6vl8yld+TKr5kH0+cUw0xv00Hwvx2DResUyFKrV4XoMmLdp06NKjz4AhI8ZMmDJjzoIlK9Zs2LJjz4EjJ85cuHLjziPe/0UWL17mf2tqKLz/9jK9f8tXpGCoRdPKhtS0RqFkWvVQNtSKoVYNtWaoddPXEBqG2jQ9XWgZattQO4baNdSeofYNdWCoQ0MdGerYUCeGOjXUmaHODXVhqEtDXRnq2lA3hro11J2h7g31YKhHQz0Z6tlQL4Z6NdSbod4N9WGoT9MfHF6GmhnZLxyDcRMAAAB4nJ1YC1hU17U+a5/HMA4iA3NmVBDmoQwP5TFnHlFeA4gYiUFRQINoSCBAyK3G2yi+0aipYtFcHYo2xsb4NiY3+VrNxSaX5uvt495ozNdoYoxmem2/L8HGpLc+InB279pnhlGr5mvL4eyz99nrrL32eu1/DQcc/okdYgdHOA6MQKp4r9gx0EcMHMezOalVasW5BM7NcXoSb9fFgE6KtSSBxWz1FYDPG+vMBGcKb9cebu2VS5s2aaTkCvRSf6C7Y+Ppibm5E09v7IDs2/3uZQtbD0zIyppwoHXh/93ukmyYgdePNRp65p5v+3v/9otQl2O7wP34cT88p8Md2YxpYLQZoRcy6FlSBRnwnGAe6BPMSCZo+7NJVqS0cE4uHendzhSnbPH6TDqL1+Nme5LZXkCHnGyoH0kne30WH+gswhm3q+pt/mTas9NLS64GnjmSlTPw0wVQT/ewRaBgxtydy3cuUB9/6SW+vb5yRvr+t0eOfPKJZ/9t3+4tL7xj32Xd3thCxi+ge6ifdsAN+l5+wi5HQ/cCoeull1AszS7CUfEcJzK7sKWJAdJhCd0sPM4+EY7QDm5ov08hXRQXE5bf6PV5Q5+IjW7X7Nku92Ask4l2hCRRD6TPqISiCJeQna3SCFwrhrNzXHzo4yFevBwxpzxk8WCIIfkvVEKVy32SbT8n68gzgaslpaiO2zIGIyuSb7RNf9HSuN26y/7OC1tgEmpiyA6aD4qcgTOiLThwGG0eB694FI8NHLLN6OBlRVaMxNAFS4JdXUG6mW8PwpKuYLCLXKGbu8iwYNdgO06Sn3Th+/vyZAxs8Ro30DjHe9gy8Fywi24OMm7Qyzh3MTZVOMYhLBnoC+J79lpTUyQmorjhnMwlcQ5uPEYGpDjsOkkH49BjQLQBqs3jFtFdJNlksYmoQFDArLh8Xh+Qd6Ghcsb6FUuehDi+U/lqD71K/qiegeV1imcwjl7ExwiSrf4BZyCujV6cVcFo6VX+G9IcPyFjJnUufbU/jzrL1X99as36reXl8K32nFaOr+E8jWJEcJ55DpMVfSMe95/AJaOsGBH2GJCNpiRQbK4C8BjdmQA22QY2j03Em13i2YHqtNLU1NI04Yj2HJgA6fQc6VPNpA/D+Ryks554NnVy2mB72uRUfPLsqR4N0LOBQKArwJYO+5W2fgZX8oC1HR6HjNaQTVIG2FPwnTcXXGZZfNB7TE6pTKZUwaw91XWLAoFFGcnB5PHjsckgBjbWutrL+0h5Y1xw3DRGDumsnXb3MJwXrJIN5U7m0rgJ3yG5w4he5ckFG4pmNEkOm0/xOO4r4yL87wqtQM+hiJIVp+6iG2wPBKD35ElGkDx+UfC2v1mFG1o+M3AjNFty8biKMXwzyxnZLds8wYD2BxmCPHAldPOeLsy/0BugftYhVYFAhO8SqQ0j3oK7dHJZnI/jxmUS4onlxskSF8thmvNZjIrRZwEPxr0lBuLRuz3oy/FOHCsxwOPYh2M+e9u3J5pgPYz9gp6G7C9m0A11F9ddqKMfV+4sbq45/YspOysXvT+3pdFdYNg2fHbW8Dz301MqDVuGrz0Fuh0YMW8mddrpqzST7rV9BcvqPoNvadRndWp0p8HvbiqrFj5yFQ/vNFSXDpxpLEFWp+DcrF3FT1afWshFcmCfeAMjEvO65i0Y6XijQfSRPWx3TV/Df7Km3E1l+kLt56s/rwVzuRusNMhudznkwdLaS+QNdeal2jDPP4l9qHc98vTYZOSkxzD+njBWVWjFPKgipx6DkWvXQiW8OYcewVHE5yukinDMcfGgc0opDltYKDxIGBedkzc6jSfE7tlvESCDFUw0Hx0opS+U0lHCxNottbNWSxX9zZVvEhKWUSyBpaXwBc2a98M6UqPeXAs/GDon8Ax7hsthO8cM5HU7Ad0UvRR9lHmtyQKZ4MAe814X5h9MSUkQmhf96eVJ6p90OjIiqSIjvykvr2l5U55O/fPQKD+jIomYpNyGJQ25uQ2kIikRfAmuBHCPsWqkSDEqgZ5KDI2sifS/R43MbZg0idFHbCPNxXxZws1ACVE6hAhOdJwRkJLFBLPZpRGYJ50pko6XzMkgmSx40ljik6AQcKhFnLcQE6rF7PXFe1Ocoj0T3AXgSgJTDIhHRfHlYZKuSzc6uievOJGXY+i5GJkkTp7UM3y0LqATDbtFcbdBxO7o4T25JYlEjoH0uynUh8rapkxp62QN70svSF+hT4gGPlovlmcm/ComLi7mV4kTykV9NFWjE/QrwgQ4uIcAP0rQF4VZYRP2o3PhHHzfPMJj9Ir+uzKUlrH49ntT18AVvj1sc3YGjUT/Mt2Dxawa8ArcA7bCQIpvfwAYu22vEG/No/5RvPdA7g+AelLrPwzy+LtkLPhnpIxH14m4EYq8eeMHbPEPNm6G7Nv9B4jcFPZ8bJj0SEjP3MPgQdKTqqEoy2v6G32P/Y6dxOv04AxnoAeq+GILvUavtYCBXm+BaIhuodcfrN5B/V2EYMCPh+SxavjGyPwV0x4CJgUPGT0mQaODGBACIJZGsMXwAD0LGXx7l3CdAcKMIKI+f5CepWeD0BvyU/GcdBxPF8SwejC6LGZmAURFdsSWKR5HyHld2kbdIZO1Ixx+bnnzU7n5+blPNV9jnUDWhP2tC68tbN3PVIldsQPxSAcSpjOav7Q05uXn5zW2LLvDXn9B6syscPy9iDLEMmSrJz6nYuWMipukjM0AH8JkGS+XFyMRkzSCH7KD/hwm172SAyZYumHlefr5AddrtA0O0TnwaVZxcRY9Bfukn9Gf05N1r9DV9MoBsJ1f+ZrqUvtPHizJAntWybv7hmqLt6QLuK6ZS9Fqi1jO5rDoWPZXXII5Tgajg53cIXCjDCGIcYrRIY2n6+mXOa/W0bdhau3ryiEYe2FV/5oeaIYK/5w5frCyll6/cYO8DiNhw6t1MBWmznt91QX62UF1N7l0eHBZTRGpKaqpKVIPF9UcIzmReud9TSY75+K899GHbBu6wjoR7RKKZVYiYxSPf5/2wJT5e3NAhmUbVn5KLx1Ujg0+BGvpAIh0DezInTkzF37KVocxrKU3r1+XLtAe2lO3l66kfQfB/unKY+q8N375Ru8bc4pJXfEcESU95q+p8ZNZRTWH1d9FzvUdYXk5rLkcdkEisoKKVHQW/b3GEx6tPaYcoJfOr9wAbSBnv1IHpep0OExr4LPMkpJM+j7sly7UHkOzXjoAZljHCGiyegtNlwljM0v+c19ET9Pvst09a2Mtgcf5/ZSzYO5h1156+eyydfAsxGa9XAuF6vzjh6CssLq6ECysperXX0sX5h5ZdpZe3guxsGIPEtHk/aqXX1hVqP5HYVVVISkrrNqvXorIc+5Ou91Hnr/LcD2afi6eX7UBloOcs7cOpqgGaNfs1g7bNbs9z6wASaylN69d0/TFTIz6Ws8+oGV3mE2612wRTHKcVUbhjKadebloMc+dyXgMVtVK6BwMB/+mVW09igdRBWaRtNQX59d/VD//xdQ0TCiYNj1KT9sq6Wdu5WTbqk3qDXyDaLa1fv621LS01G3z61sD6lH8lAxDLicV921s6Bf92JOYvzNYCL1khbqBXEFUzC521N5NyzNaQIWhjyFyDoBIVrAjmv2UEaLlI+c6zw1jmVIPLLLZZUTj6GxGHW+mq1tgHXR2D85p4Q934+jLbtjVLcyCdS10NVzpHqxp4Q/hK7WopY/NRGx9HGsPGdFjOjcpjBnGYMVqY/4eqT5khWEHWUup2A/pTw7pdWgsWft7ETUERL96nRg0HNFPmCYba6pylECaExX89A9WLUOVB4oKLu/o1oqSYHCgLzBUlAz8hNFDRpeSU1XT+LRmDUgPaKbYdHDn9suF/tu13nHJij0N97LfS0QmqONuyONk7zvUI6Qa0pF9f2+oABL92AT6e0U//z9YqAiWtJLU1JK0gS+1aacwamiNqK067u9ZQ8f1d4qLodMzz3uL89Z68V/Hnr++hXWUuHgw8dfi972PeTyPefu3aNNucemQ74qFuIaJnVkOu4Q+yjuwmmC1FqZpl1i4uzoPxjkpPf3Xv545tl26Rr+dOvUd+omqJzch9dOeU7f10Y64nMcKK137DccIZq2WdXtdZjbEoLSzHwiMtrjYLDxpHQW8gjMX6XFYAE2zSWVD04EGYSs9MbO6sEo20BMEAB4mpvSypsKjZ4Stgzb+c3A9/MQT2+vrBy+qvyFxLUtLlSRF/Ri2wjfZ2dus2Q8lXx4608/jnqK5OOap6NY2PSjYYnECCjiEeLJll/pbmqfeIK+ps3+MxrlEhqmTPipVP7kqlF4VhpEb6r+Q7YOJg38kJ9SHBf3NBl6+9YchfbUjb5ahLSzUM3kPHmwFAsZ5rpai0S7E5xWzZ1j+fW7zsUWP2g5NXTw52ySCTrgG0+lbw60l2Y/CB185CoA8NK+tbRKxfjy6pm5hzQRRR+cMqv1Jbiw6STivtEvt3DRcy0QEh92JlUGo2PG4tSKHl00YD6xc8CK+YPYyy3io2lN8BcSjKRzrIV6ypOAobqxViJPaT9M9Hy5szY33mp7OX/Zu89L/7Ww5vqY2Y8b0pKgoiUhG5cPDPzq8qTV/WkzUOIvXVVA96kmjcBrr3HrYC/Wn+fYP6Z7T1rqy3zknbvqma/FvVk96fNXGkuaXrdHW5JGSxZT/2I/O73v+yNWafMdzc5NdxYurHs6h86e01sLKLz9EBrg+x36rxAaED7hRnAMx7Vzu+9wabh3zG8XLQjx0ablUJzmxdErxYT3kzQSd0SSafVqF5PXgpp0OyYJ1EyNHpGUZmvK575ySzd85JSqF7IBzSAbMM04+MbE58xF3/njXOGecSaermlw2y9PsSQdytLJVr8t+wg+rR8cZYoeNxVIzNdk3Bngi8U5LAlgTFoQnzJCa5EsCgYhCaGL+qPj7TdhG31p9tej3R04N//PXxNwJvyUqwaJqRPJY98TJ5TPndmflRAkAhBfe46sfKW5wizSge08Xb7Ca/GUVs55trngkKkrUS2WPzKttaaqq+idmahugkY+W6fN0I6i3gPt/x88U4wAAeJxjYGRgYADiGU9YXsXz23xl4GZnAIFH7fO+IdMc/WBxDgYmEAUASbMKwAB4nGNgZGBgZwABjj4Ghv//OfoZGBlQgT4ARicDZAAAAHicY2BgYGAfxJijD8Fmu4EqBwCSpgKpAAAAAAAADgBoAH4AzADgAQIBQgFsAZgB7gIuAooC0AL8A2IDjAOoA+AEMASwBNoFCAVaBcAGCAYuBnAGrAb2B04HigfSCCoIcAiGCJwIyAkkCVYJiAmsCfIKIApWCsQLknicY2BkYGDQZ2hmYGcAASYg5gJCBob/YD4DABqrAdAAeJxdkE1qg0AYhl8Tk9AIoVDaVSmzahcF87PMARLIMoFAl0ZHY1BHdBJIT9AT9AQ9RQ9Qeqy+yteNMzDzfM+88w0K4BY/cNAMB6N2bUaPPBLukybCLvleeAAPj8JD+hfhMV7hC3u4wxs7OO4NzQSZcI/8Ltwnfwi75E/hAR7wJTyk/xYeY49fYQ/PztM+jbTZ7LY6OWdBJdX/pqs6NYWa+zMxa13oKrA6Uoerqi/JwtpYxZXJ1coUVmeZUWVlTjq0/tHacjmdxuL90OR8O0UEDYMNdtiSEpz5XQGqzlm30kzUdAYFFOb8R7NOZk0q2lwAyz1i7oAr1xoXvrOgtYhZx8wY5KRV269JZ5yGpmzPTjQhvY9je6vEElPOuJP3mWKnP5M3V+YAAAB4nG2ReVPbMBDF/ULi2EkDBFqO3gdHLxUzDB9IkdexBllydRD49ihO3Ckz7B/a31utZnafkkGyiXnyclxhgB0MMUKKMTLkmGCKV5hhF3vYxxwHOMRrvMERjnGCU7zFO7zHB3zEJ3zGF3zFN5zhHBe4xHf8wE/8wm8w/MEVimTYKv44XR9MSCsUjVoeHE3vjQoNsSZ4mmxZmVWPjSz7jlou6/0qKOWEJdKMtCe793/hQfqxa6XWZHMXFl56RS4TvPXSaDeoy0zUUZB109KstDK8lHo5q6Qi1hcOnqkImubPS6aqRq7mlnaEWabub4iYblba3SRmgldS0+FWdhNtt04F14JUaqkl7tcpOpJtErvNt3Bd9HRT5JWxK25Ldjvp6br4hzfFiIdSmlzTg2fSUzNrLd1LE1ynxq4OVaVoKLjzJ60UPtj1RKzHzsbjly6inVnFBS2MucviPncU7Rr7lfTxRepDs1A2j3ZHRc7PuzFYSfE3ZOd4kjwBy227hA==) format("woff");
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-play, .video-js .vjs-play-control .vjs-icon-placeholder, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-play:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  content: "\f101";
}

.vjs-icon-play-circle {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-play-circle:before {
  content: "\f102";
}

.vjs-icon-pause, .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-pause:before, .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before {
  content: "\f103";
}

.vjs-icon-volume-mute, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-volume-mute:before, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before {
  content: "\f104";
}

.vjs-icon-volume-low, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-volume-low:before, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before {
  content: "\f105";
}

.vjs-icon-volume-mid, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-volume-mid:before, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before {
  content: "\f106";
}

.vjs-icon-volume-high, .video-js .vjs-mute-control .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-volume-high:before, .video-js .vjs-mute-control .vjs-icon-placeholder:before {
  content: "\f107";
}

.vjs-icon-fullscreen-enter, .video-js .vjs-fullscreen-control .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
  content: "\f108";
}

.vjs-icon-fullscreen-exit, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-fullscreen-exit:before, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before {
  content: "\f109";
}

.vjs-icon-spinner {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-spinner:before {
  content: "\f10a";
}

.vjs-icon-subtitles, .video-js .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js .vjs-subtitles-button .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-subtitles:before, .video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js .vjs-subtitles-button .vjs-icon-placeholder:before {
  content: "\f10b";
}

.vjs-icon-captions, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js .vjs-captions-button .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-captions:before, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js .vjs-captions-button .vjs-icon-placeholder:before {
  content: "\f10c";
}

.vjs-icon-hd {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-hd:before {
  content: "\f10d";
}

.vjs-icon-chapters, .video-js .vjs-chapters-button .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-chapters:before, .video-js .vjs-chapters-button .vjs-icon-placeholder:before {
  content: "\f10e";
}

.vjs-icon-downloading {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-downloading:before {
  content: "\f10f";
}

.vjs-icon-file-download {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-file-download:before {
  content: "\f110";
}

.vjs-icon-file-download-done {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-file-download-done:before {
  content: "\f111";
}

.vjs-icon-file-download-off {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-file-download-off:before {
  content: "\f112";
}

.vjs-icon-share {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-share:before {
  content: "\f113";
}

.vjs-icon-cog {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-cog:before {
  content: "\f114";
}

.vjs-icon-square {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-square:before {
  content: "\f115";
}

.vjs-icon-circle, .vjs-seek-to-live-control .vjs-icon-placeholder, .video-js .vjs-volume-level, .video-js .vjs-play-progress {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-circle:before, .vjs-seek-to-live-control .vjs-icon-placeholder:before, .video-js .vjs-volume-level:before, .video-js .vjs-play-progress:before {
  content: "\f116";
}

.vjs-icon-circle-outline {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-circle-outline:before {
  content: "\f117";
}

.vjs-icon-circle-inner-circle {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-circle-inner-circle:before {
  content: "\f118";
}

.vjs-icon-cancel, .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-cancel:before, .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before {
  content: "\f119";
}

.vjs-icon-repeat {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-repeat:before {
  content: "\f11a";
}

.vjs-icon-replay, .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-replay:before, .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before {
  content: "\f11b";
}

.vjs-icon-replay-5, .video-js .vjs-skip-backward-5 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-replay-5:before, .video-js .vjs-skip-backward-5 .vjs-icon-placeholder:before {
  content: "\f11c";
}

.vjs-icon-replay-10, .video-js .vjs-skip-backward-10 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-replay-10:before, .video-js .vjs-skip-backward-10 .vjs-icon-placeholder:before {
  content: "\f11d";
}

.vjs-icon-replay-30, .video-js .vjs-skip-backward-30 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-replay-30:before, .video-js .vjs-skip-backward-30 .vjs-icon-placeholder:before {
  content: "\f11e";
}

.vjs-icon-forward-5, .video-js .vjs-skip-forward-5 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-forward-5:before, .video-js .vjs-skip-forward-5 .vjs-icon-placeholder:before {
  content: "\f11f";
}

.vjs-icon-forward-10, .video-js .vjs-skip-forward-10 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-forward-10:before, .video-js .vjs-skip-forward-10 .vjs-icon-placeholder:before {
  content: "\f120";
}

.vjs-icon-forward-30, .video-js .vjs-skip-forward-30 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-forward-30:before, .video-js .vjs-skip-forward-30 .vjs-icon-placeholder:before {
  content: "\f121";
}

.vjs-icon-audio, .video-js .vjs-audio-button .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-audio:before, .video-js .vjs-audio-button .vjs-icon-placeholder:before {
  content: "\f122";
}

.vjs-icon-next-item {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-next-item:before {
  content: "\f123";
}

.vjs-icon-previous-item {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-previous-item:before {
  content: "\f124";
}

.vjs-icon-shuffle {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-shuffle:before {
  content: "\f125";
}

.vjs-icon-cast {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-cast:before {
  content: "\f126";
}

.vjs-icon-picture-in-picture-enter, .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-picture-in-picture-enter:before, .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before {
  content: "\f127";
}

.vjs-icon-picture-in-picture-exit, .video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-picture-in-picture-exit:before, .video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder:before {
  content: "\f128";
}

.vjs-icon-facebook {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-facebook:before {
  content: "\f129";
}

.vjs-icon-linkedin {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-linkedin:before {
  content: "\f12a";
}

.vjs-icon-twitter {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-twitter:before {
  content: "\f12b";
}

.vjs-icon-tumblr {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-tumblr:before {
  content: "\f12c";
}

.vjs-icon-pinterest {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-pinterest:before {
  content: "\f12d";
}

.vjs-icon-audio-description, .video-js .vjs-descriptions-button .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}

.vjs-icon-audio-description:before, .video-js .vjs-descriptions-button .vjs-icon-placeholder:before {
  content: "\f12e";
}

.video-js {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  color: #fff;
  background-color: #000;
  position: relative;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
  font-family: Arial, Helvetica, sans-serif;
  word-break: initial;
}

.video-js:-moz-full-screen {
  position: absolute;
}

.video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}

.video-js[tabindex="-1"] {
  outline: none;
}

.video-js *,
.video-js *:before,
.video-js *:after {
  box-sizing: inherit;
}

.video-js ul {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  list-style-position: outside;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3,
.video-js.vjs-9-16,
.video-js.vjs-1-1 {
  width: 100%;
  max-width: 100%;
}

.video-js.vjs-fluid:not(.vjs-audio-only-mode),
.video-js.vjs-16-9:not(.vjs-audio-only-mode),
.video-js.vjs-4-3:not(.vjs-audio-only-mode),
.video-js.vjs-9-16:not(.vjs-audio-only-mode),
.video-js.vjs-1-1:not(.vjs-audio-only-mode) {
  height: 0;
}

.video-js.vjs-16-9:not(.vjs-audio-only-mode) {
  padding-top: 56.25%;
}

.video-js.vjs-4-3:not(.vjs-audio-only-mode) {
  padding-top: 75%;
}

.video-js.vjs-9-16:not(.vjs-audio-only-mode) {
  padding-top: 177.7777777778%;
}

.video-js.vjs-1-1:not(.vjs-audio-only-mode) {
  padding-top: 100%;
}

.video-js.vjs-fill:not(.vjs-audio-only-mode) {
  width: 100%;
  height: 100%;
}

.video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-js.vjs-audio-only-mode .vjs-tech {
  display: none;
}

body.vjs-full-window,
body.vjs-pip-window {
  padding: 0;
  margin: 0;
  height: 100%;
}

.vjs-full-window .video-js.vjs-fullscreen,
body.vjs-pip-window .video-js {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.video-js.vjs-fullscreen:not(.vjs-ios-native-fs),
body.vjs-pip-window .video-js {
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
  display: block;
}

.video-js.vjs-fullscreen.vjs-user-inactive {
  cursor: none;
}

.vjs-pip-container .vjs-pip-text {
  position: absolute;
  bottom: 10%;
  font-size: 2em;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 0.5em;
  text-align: center;
  width: 100%;
}

.vjs-layout-tiny.vjs-pip-container .vjs-pip-text,
.vjs-layout-x-small.vjs-pip-container .vjs-pip-text,
.vjs-layout-small.vjs-pip-container .vjs-pip-text {
  bottom: 0;
  font-size: 1.4em;
}

.vjs-hidden {
  display: none !important;
}

.vjs-disabled {
  opacity: 0.5;
  cursor: default;
}

.video-js .vjs-offscreen {
  height: 1px;
  left: -9999px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vjs-lock-showing {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.vjs-no-js {
  padding: 20px;
  color: #fff;
  background-color: #000;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  width: 300px;
  height: 150px;
  margin: 0px auto;
}

.vjs-no-js a,
.vjs-no-js a:visited {
  color: #66A8CC;
}

.video-js .vjs-big-play-button {
  font-size: 3em;
  line-height: 1.5em;
  height: 1.63332em;
  width: 3em;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0;
  margin-top: -0.81666em;
  margin-left: -1.5em;
  cursor: pointer;
  opacity: 1;
  border: 0.06666em solid #fff;
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
  border-radius: 0.3em;
  transition: all 0.4s;
}

.vjs-big-play-button .vjs-svg-icon {
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
  border-color: #fff;
  background-color: rgb(114.9141509434, 132.7028301887, 159.3858490566);
  background-color: rgba(114.9141509434, 132.7028301887, 159.3858490566, 0.5);
  transition: all 0s;
}

.vjs-controls-disabled .vjs-big-play-button,
.vjs-has-started .vjs-big-play-button,
.vjs-using-native-controls .vjs-big-play-button,
.vjs-error .vjs-big-play-button {
  display: none;
}

.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause:not(.vjs-seeking, .vjs-scrubbing, .vjs-error) .vjs-big-play-button {
  display: block;
}

.video-js button {
  background: none;
  border: none;
  color: inherit;
  display: inline-block;
  font-size: inherit;
  line-height: inherit;
  text-transform: none;
  text-decoration: none;
  transition: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.video-js.vjs-spatial-navigation-enabled .vjs-button:focus {
  outline: 0.0625em solid white;
  box-shadow: none;
}

.vjs-control .vjs-button {
  width: 100%;
  height: 100%;
}

.video-js .vjs-control.vjs-close-button {
  cursor: pointer;
  height: 3em;
  position: absolute;
  right: 0;
  top: 0.5em;
  z-index: 2;
}

.video-js .vjs-modal-dialog {
  background: rgba(0, 0, 0, 0.8);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
  overflow: auto;
}

.video-js .vjs-modal-dialog > * {
  box-sizing: border-box;
}

.vjs-modal-dialog .vjs-modal-dialog-content {
  font-size: 1.2em;
  line-height: 1.5;
  padding: 20px 24px;
  z-index: 1;
}

.vjs-menu-button {
  cursor: pointer;
}

.vjs-menu-button.vjs-disabled {
  cursor: default;
}

.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu {
  display: none;
}

.vjs-menu .vjs-menu-content {
  display: block;
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  overflow: auto;
}

.vjs-menu .vjs-menu-content > * {
  box-sizing: border-box;
}

.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu {
  display: none;
}

.vjs-menu li {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0.2em 0;
  line-height: 1.4em;
  font-size: 1.2em;
  text-align: center;
  text-transform: lowercase;
}

.vjs-menu li.vjs-menu-item:focus,
.vjs-menu li.vjs-menu-item:hover,
.js-focus-visible .vjs-menu li.vjs-menu-item:hover {
  background-color: rgb(114.9141509434, 132.7028301887, 159.3858490566);
  background-color: rgba(114.9141509434, 132.7028301887, 159.3858490566, 0.5);
}

.vjs-menu li.vjs-selected,
.vjs-menu li.vjs-selected:focus,
.vjs-menu li.vjs-selected:hover,
.js-focus-visible .vjs-menu li.vjs-selected:hover {
  background-color: #fff;
  color: #2B333F;
}

.vjs-menu li.vjs-selected .vjs-svg-icon,
.vjs-menu li.vjs-selected:focus .vjs-svg-icon,
.vjs-menu li.vjs-selected:hover .vjs-svg-icon,
.js-focus-visible .vjs-menu li.vjs-selected:hover .vjs-svg-icon {
  fill: #000000;
}

.video-js .vjs-menu *:not(.vjs-selected):focus:not(:focus-visible),
.js-focus-visible .vjs-menu *:not(.vjs-selected):focus:not(.focus-visible) {
  background: none;
}

.vjs-menu li.vjs-menu-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 1em;
  line-height: 2em;
  padding: 0;
  margin: 0 0 0.3em 0;
  font-weight: bold;
  cursor: default;
}

.vjs-menu-button-popup .vjs-menu {
  display: none;
  position: absolute;
  bottom: 0;
  width: 10em;
  left: -3em;
  height: 0em;
  margin-bottom: 1.5em;
  border-top-color: rgba(43, 51, 63, 0.7);
}

.vjs-pip-window .vjs-menu-button-popup .vjs-menu {
  left: unset;
  right: 1em;
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
  position: absolute;
  width: 100%;
  bottom: 1.5em;
  max-height: 15em;
}

.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
.vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  max-height: 5em;
}

.vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  max-height: 10em;
}

.vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  max-height: 14em;
}

.vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
.vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
.vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  max-height: 25em;
}

.vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu,
.vjs-menu-button-popup .vjs-menu.vjs-lock-showing {
  display: block;
}

.video-js .vjs-menu-button-inline {
  transition: all 0.4s;
  overflow: hidden;
}

.video-js .vjs-menu-button-inline:before {
  width: 2.222222222em;
}

.video-js .vjs-menu-button-inline:hover,
.video-js .vjs-menu-button-inline:focus,
.video-js .vjs-menu-button-inline.vjs-slider-active {
  width: 12em;
}

.vjs-menu-button-inline .vjs-menu {
  opacity: 0;
  height: 100%;
  width: auto;
  position: absolute;
  left: 4em;
  top: 0;
  padding: 0;
  margin: 0;
  transition: all 0.4s;
}

.vjs-menu-button-inline:hover .vjs-menu,
.vjs-menu-button-inline:focus .vjs-menu,
.vjs-menu-button-inline.vjs-slider-active .vjs-menu {
  display: block;
  opacity: 1;
}

.vjs-menu-button-inline .vjs-menu-content {
  width: auto;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.video-js .vjs-control-bar {
  display: none;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3em;
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
}

.video-js.vjs-spatial-navigation-enabled .vjs-control-bar {
  gap: 1px;
}

.video-js:not(.vjs-controls-disabled, .vjs-using-native-controls, .vjs-error) .vjs-control-bar.vjs-lock-showing {
  display: flex !important;
}

.vjs-has-started .vjs-control-bar,
.vjs-audio-only-mode .vjs-control-bar {
  display: flex;
  visibility: visible;
  opacity: 1;
  transition: visibility 0.1s, opacity 0.1s;
}

.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  visibility: visible;
  opacity: 0;
  pointer-events: none;
  transition: visibility 1s, opacity 1s;
}

.vjs-controls-disabled .vjs-control-bar,
.vjs-using-native-controls .vjs-control-bar,
.vjs-error .vjs-control-bar {
  display: none !important;
}

.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar,
.vjs-audio-only-mode.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.video-js .vjs-control {
  position: relative;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 4em;
  flex: none;
}

.video-js .vjs-control.vjs-visible-text {
  width: auto;
  padding-left: 1em;
  padding-right: 1em;
}

.vjs-button > .vjs-icon-placeholder:before {
  font-size: 1.8em;
  line-height: 1.67;
}

.vjs-button > .vjs-icon-placeholder {
  display: block;
}

.vjs-button > .vjs-svg-icon {
  display: inline-block;
}

.video-js .vjs-control:focus:before,
.video-js .vjs-control:hover:before,
.video-js .vjs-control:focus {
  text-shadow: 0em 0em 1em white;
}

.video-js *:not(.vjs-visible-text) > .vjs-control-text {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.video-js .vjs-custom-control-spacer {
  display: none;
}

.video-js .vjs-progress-control {
  cursor: pointer;
  flex: auto;
  display: flex;
  align-items: center;
  min-width: 4em;
  touch-action: none;
}

.video-js .vjs-progress-control.disabled {
  cursor: default;
}

.vjs-live .vjs-progress-control {
  display: none;
}

.vjs-liveui .vjs-progress-control {
  display: flex;
  align-items: center;
}

.video-js .vjs-progress-holder {
  flex: auto;
  transition: all 0.2s;
  height: 0.3em;
}

.video-js .vjs-progress-control .vjs-progress-holder {
  margin: 0 10px;
}

.video-js .vjs-progress-control:hover .vjs-progress-holder,
.video-js.vjs-scrubbing.vjs-touch-enabled .vjs-progress-control .vjs-progress-holder {
  font-size: 1.6666666667em;
}

.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled {
  font-size: 1em;
}

.video-js .vjs-progress-holder .vjs-play-progress,
.video-js .vjs-progress-holder .vjs-load-progress,
.video-js .vjs-progress-holder .vjs-load-progress div {
  position: absolute;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 0;
}

.video-js .vjs-play-progress {
  background-color: #fff;
}

.video-js .vjs-play-progress:before {
  font-size: 0.9em;
  position: absolute;
  right: -0.5em;
  line-height: 0.35em;
  z-index: 1;
}

.vjs-svg-icons-enabled .vjs-play-progress:before {
  content: none !important;
}

.vjs-play-progress .vjs-svg-icon {
  position: absolute;
  top: -0.35em;
  right: -0.4em;
  width: 0.9em;
  height: 0.9em;
  pointer-events: none;
  line-height: 0.15em;
  z-index: 1;
}

.video-js .vjs-load-progress {
  background: rgba(114.9141509434, 132.7028301887, 159.3858490566, 0.5);
}

.video-js .vjs-load-progress div {
  background: rgba(114.9141509434, 132.7028301887, 159.3858490566, 0.75);
}

.video-js .vjs-time-tooltip {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.3em;
  color: #000;
  float: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  padding: 6px 8px 8px 8px;
  pointer-events: none;
  position: absolute;
  top: -3.4em;
  visibility: hidden;
  z-index: 1;
}

.video-js .vjs-progress-holder:focus .vjs-time-tooltip {
  display: none;
}

.video-js .vjs-progress-control:hover .vjs-time-tooltip,
.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip,
.video-js.vjs-scrubbing.vjs-touch-enabled .vjs-progress-control .vjs-time-tooltip {
  display: block;
  font-size: 0.6em;
  visibility: visible;
}

.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip {
  font-size: 1em;
}

.video-js .vjs-progress-control .vjs-mouse-display {
  display: none;
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #000;
  z-index: 1;
}

.video-js .vjs-progress-control:hover .vjs-mouse-display {
  display: block;
}

.video-js.vjs-scrubbing.vjs-touch-enabled .vjs-progress-control .vjs-mouse-display {
  display: block;
}

.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display,
.video-js.vjs-touch-enabled:not(.vjs-scrubbing) .vjs-progress-control .vjs-mouse-display {
  visibility: hidden;
  opacity: 0;
  transition: visibility 1s, opacity 1s;
}

.vjs-mouse-display .vjs-time-tooltip {
  color: #fff;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.8);
}

.video-js .vjs-slider {
  position: relative;
  cursor: pointer;
  padding: 0;
  margin: 0 0.45em 0 0.45em;
  /* iOS Safari */
  -webkit-touch-callout: none;
  /* Safari, and Chrome 53 */
  -webkit-user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */
  -moz-user-select: none;
  user-select: none;
  background-color: rgb(114.9141509434, 132.7028301887, 159.3858490566);
  background-color: rgba(114.9141509434, 132.7028301887, 159.3858490566, 0.5);
}

.video-js .vjs-slider.disabled {
  cursor: default;
}

.video-js .vjs-slider:focus {
  text-shadow: 0em 0em 1em white;
  box-shadow: 0 0 1em #fff;
}

.video-js.vjs-spatial-navigation-enabled .vjs-slider:focus {
  outline: 0.0625em solid white;
}

.video-js .vjs-mute-control {
  cursor: pointer;
  flex: none;
}

.video-js .vjs-volume-control {
  cursor: pointer;
  margin-right: 1em;
  display: flex;
}

.video-js .vjs-volume-control.vjs-volume-horizontal {
  width: 5em;
}

.video-js .vjs-volume-panel .vjs-volume-control {
  visibility: visible;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin-left: -1px;
}

.video-js .vjs-volume-panel {
  transition: width 1s;
}

.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control, .video-js .vjs-volume-panel:active .vjs-volume-control, .video-js .vjs-volume-panel:focus .vjs-volume-control, .video-js .vjs-volume-panel .vjs-volume-control:active, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active {
  visibility: visible;
  opacity: 1;
  position: relative;
  transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
}

.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
  width: 5em;
  height: 3em;
  margin-right: 0;
}

.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical {
  left: -3.5em;
  transition: left 0s;
}

.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
  width: 10em;
  transition: width 0.1s;
}

.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only {
  width: 4em;
}

.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
  height: 8em;
  width: 3em;
  left: -3000em;
  transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
}

.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
  transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
}

.video-js .vjs-volume-panel {
  display: flex;
}

.video-js .vjs-volume-bar {
  margin: 1.35em 0.45em;
}

.vjs-volume-bar.vjs-slider-horizontal {
  width: 5em;
  height: 0.3em;
}

.vjs-volume-bar.vjs-slider-vertical {
  width: 0.3em;
  height: 5em;
  margin: 1.35em auto;
}

.video-js .vjs-volume-level {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
}

.video-js .vjs-volume-level:before {
  position: absolute;
  font-size: 0.9em;
  z-index: 1;
}

.vjs-slider-vertical .vjs-volume-level {
  width: 0.3em;
}

.vjs-slider-vertical .vjs-volume-level:before {
  top: -0.5em;
  left: -0.3em;
  z-index: 1;
}

.vjs-svg-icons-enabled .vjs-volume-level:before {
  content: none;
}

.vjs-volume-level .vjs-svg-icon {
  position: absolute;
  width: 0.9em;
  height: 0.9em;
  pointer-events: none;
  z-index: 1;
}

.vjs-slider-horizontal .vjs-volume-level {
  height: 0.3em;
}

.vjs-slider-horizontal .vjs-volume-level:before {
  line-height: 0.35em;
  right: -0.5em;
}

.vjs-slider-horizontal .vjs-volume-level .vjs-svg-icon {
  right: -0.3em;
  transform: translateY(-50%);
}

.vjs-slider-vertical .vjs-volume-level .vjs-svg-icon {
  top: -0.55em;
  transform: translateX(-50%);
}

.video-js .vjs-volume-panel.vjs-volume-panel-vertical {
  width: 4em;
}

.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
  height: 100%;
}

.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
  width: 100%;
}

.video-js .vjs-volume-vertical {
  width: 3em;
  height: 8em;
  bottom: 8em;
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
}

.video-js .vjs-volume-horizontal .vjs-menu {
  left: -2em;
}

.video-js .vjs-volume-tooltip {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.3em;
  color: #000;
  float: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  padding: 6px 8px 8px 8px;
  pointer-events: none;
  position: absolute;
  top: -3.4em;
  visibility: hidden;
  z-index: 1;
}

.video-js .vjs-volume-control:hover .vjs-volume-tooltip,
.video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
  display: block;
  font-size: 1em;
  visibility: visible;
}

.video-js .vjs-volume-vertical:hover .vjs-volume-tooltip,
.video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
  left: 1em;
  top: -12px;
}

.video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip {
  font-size: 1em;
}

.video-js .vjs-volume-control .vjs-mouse-display {
  display: none;
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #000;
  z-index: 1;
}

.video-js .vjs-volume-horizontal .vjs-mouse-display {
  width: 1px;
  height: 100%;
}

.video-js .vjs-volume-control:hover .vjs-mouse-display {
  display: block;
}

.video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display {
  visibility: hidden;
  opacity: 0;
  transition: visibility 1s, opacity 1s;
}

.vjs-mouse-display .vjs-volume-tooltip {
  color: #fff;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.8);
}

.vjs-poster {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
}

.vjs-has-started .vjs-poster,
.vjs-using-native-controls .vjs-poster {
  display: none;
}

.vjs-audio.vjs-has-started .vjs-poster,
.vjs-has-started.vjs-audio-poster-mode .vjs-poster,
.vjs-pip-container.vjs-has-started .vjs-poster {
  display: block;
}

.vjs-poster img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-js .vjs-live-control {
  display: flex;
  align-items: flex-start;
  flex: auto;
  font-size: 1em;
  line-height: 3em;
}

.video-js:not(.vjs-live) .vjs-live-control,
.video-js.vjs-liveui .vjs-live-control {
  display: none;
}

.video-js .vjs-seek-to-live-control {
  align-items: center;
  cursor: pointer;
  flex: none;
  display: inline-flex;
  height: 100%;
  padding-left: 0.5em;
  padding-right: 0.5em;
  font-size: 1em;
  line-height: 3em;
  width: auto;
  min-width: 4em;
}

.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,
.video-js:not(.vjs-live) .vjs-seek-to-live-control {
  display: none;
}

.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge {
  cursor: auto;
}

.vjs-seek-to-live-control .vjs-icon-placeholder {
  margin-right: 0.5em;
  color: #888;
}

.vjs-svg-icons-enabled .vjs-seek-to-live-control {
  line-height: 0;
}

.vjs-seek-to-live-control .vjs-svg-icon {
  width: 1em;
  height: 1em;
  pointer-events: none;
  fill: #888888;
}

.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder {
  color: red;
}

.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-svg-icon {
  fill: red;
}

.video-js .vjs-time-control {
  flex: none;
  font-size: 1em;
  line-height: 3em;
  min-width: 2em;
  width: auto;
  padding-left: 1em;
  padding-right: 1em;
}

.vjs-live .vjs-time-control,
.vjs-live .vjs-time-divider,
.video-js .vjs-current-time,
.video-js .vjs-duration {
  display: none;
}

.vjs-time-divider {
  display: none;
  line-height: 3em;
}

.vjs-normalise-time-controls:not(.vjs-live) .vjs-time-control {
  display: flex;
}

.video-js .vjs-play-control {
  cursor: pointer;
}

.video-js .vjs-play-control .vjs-icon-placeholder {
  flex: none;
}

.vjs-text-track-display {
  position: absolute;
  bottom: 3em;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
}

.vjs-error .vjs-text-track-display {
  display: none;
}

.video-js.vjs-controls-disabled .vjs-text-track-display,
.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
  bottom: 1em;
}

.video-js .vjs-text-track {
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 0.1em;
}

.vjs-subtitles {
  color: #fff;
}

.vjs-captions {
  color: #fc6;
}

.vjs-tt-cue {
  display: block;
}

video::-webkit-media-text-track-display {
  transform: translateY(-3em);
}

.video-js.vjs-controls-disabled video::-webkit-media-text-track-display,
.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
  transform: translateY(-1.5em);
}

.video-js.vjs-force-center-align-cues .vjs-text-track-cue {
  text-align: center !important;
  width: 80% !important;
}

@supports not (inset: 10px) {
  .video-js .vjs-text-track-display > div {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
.video-js .vjs-picture-in-picture-control {
  cursor: pointer;
  flex: none;
}

.video-js.vjs-audio-only-mode .vjs-picture-in-picture-control,
.vjs-pip-window .vjs-picture-in-picture-control {
  display: none;
}

.video-js .vjs-fullscreen-control {
  cursor: pointer;
  flex: none;
}

.video-js.vjs-audio-only-mode .vjs-fullscreen-control,
.vjs-pip-window .vjs-fullscreen-control {
  display: none;
}

.vjs-playback-rate > .vjs-menu-button,
.vjs-playback-rate .vjs-playback-rate-value {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.vjs-playback-rate .vjs-playback-rate-value {
  pointer-events: none;
  font-size: 1.5em;
  line-height: 2;
  text-align: center;
}

.vjs-playback-rate .vjs-menu {
  width: 4em;
  left: 0em;
}

.vjs-error .vjs-error-display .vjs-modal-dialog-content {
  font-size: 1.4em;
  text-align: center;
}

.vjs-loading-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.85;
  text-align: left;
  border: 0.6em solid rgba(43, 51, 63, 0.7);
  box-sizing: border-box;
  background-clip: padding-box;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  visibility: hidden;
}

.vjs-seeking .vjs-loading-spinner,
.vjs-waiting .vjs-loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: vjs-spinner-show 0s linear 0.3s forwards;
}

.vjs-error .vjs-loading-spinner {
  display: none;
}

.vjs-loading-spinner:before,
.vjs-loading-spinner:after {
  content: "";
  position: absolute;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: 1;
  border: inherit;
  border-color: transparent;
  border-top-color: white;
}

.vjs-seeking .vjs-loading-spinner:before,
.vjs-seeking .vjs-loading-spinner:after,
.vjs-waiting .vjs-loading-spinner:before,
.vjs-waiting .vjs-loading-spinner:after {
  animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
}

.vjs-seeking .vjs-loading-spinner:before,
.vjs-waiting .vjs-loading-spinner:before {
  border-top-color: rgb(255, 255, 255);
}

.vjs-seeking .vjs-loading-spinner:after,
.vjs-waiting .vjs-loading-spinner:after {
  border-top-color: rgb(255, 255, 255);
  animation-delay: 0.44s;
}

@keyframes vjs-spinner-show {
  to {
    visibility: visible;
  }
}
@keyframes vjs-spinner-spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes vjs-spinner-fade {
  0% {
    border-top-color: rgb(114.9141509434, 132.7028301887, 159.3858490566);
  }
  20% {
    border-top-color: rgb(114.9141509434, 132.7028301887, 159.3858490566);
  }
  35% {
    border-top-color: white;
  }
  60% {
    border-top-color: rgb(114.9141509434, 132.7028301887, 159.3858490566);
  }
  100% {
    border-top-color: rgb(114.9141509434, 132.7028301887, 159.3858490566);
  }
}
.video-js.vjs-audio-only-mode .vjs-captions-button {
  display: none;
}

.vjs-chapters-button .vjs-menu ul {
  width: 24em;
}

.video-js.vjs-audio-only-mode .vjs-descriptions-button {
  display: none;
}

.vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-svg-icon {
  width: 1.5em;
  height: 1.5em;
}

.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
  vertical-align: middle;
  display: inline-block;
  margin-bottom: -0.1em;
}

.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
  font-family: VideoJS;
  content: "\f10c";
  font-size: 1.5em;
  line-height: inherit;
}

.video-js.vjs-audio-only-mode .vjs-subs-caps-button {
  display: none;
}

.video-js .vjs-audio-button + .vjs-menu .vjs-descriptions-menu-item .vjs-menu-item-text .vjs-icon-placeholder,
.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
  vertical-align: middle;
  display: inline-block;
  margin-bottom: -0.1em;
}

.video-js .vjs-audio-button + .vjs-menu .vjs-descriptions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before,
.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
  font-family: VideoJS;
  content: " \f12e";
  font-size: 1.5em;
  line-height: inherit;
}

.video-js.vjs-layout-small .vjs-current-time,
.video-js.vjs-layout-small .vjs-time-divider,
.video-js.vjs-layout-small .vjs-duration,
.video-js.vjs-layout-small .vjs-remaining-time,
.video-js.vjs-layout-small .vjs-playback-rate,
.video-js.vjs-layout-small .vjs-volume-control, .video-js.vjs-layout-x-small .vjs-current-time,
.video-js.vjs-layout-x-small .vjs-time-divider,
.video-js.vjs-layout-x-small .vjs-duration,
.video-js.vjs-layout-x-small .vjs-remaining-time,
.video-js.vjs-layout-x-small .vjs-playback-rate,
.video-js.vjs-layout-x-small .vjs-volume-control, .video-js.vjs-layout-tiny .vjs-current-time,
.video-js.vjs-layout-tiny .vjs-time-divider,
.video-js.vjs-layout-tiny .vjs-duration,
.video-js.vjs-layout-tiny .vjs-remaining-time,
.video-js.vjs-layout-tiny .vjs-playback-rate,
.video-js.vjs-layout-tiny .vjs-volume-control {
  display: none;
}

.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover {
  width: auto;
  width: initial;
}

.video-js.vjs-layout-x-small .vjs-progress-control, .video-js.vjs-layout-tiny .vjs-progress-control {
  display: none;
}

.video-js.vjs-layout-x-small .vjs-custom-control-spacer {
  flex: auto;
  display: block;
}

.vjs-modal-dialog.vjs-text-track-settings {
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.75);
  color: #fff;
  height: 70%;
}

.vjs-spatial-navigation-enabled .vjs-modal-dialog.vjs-text-track-settings {
  height: 80%;
}

.vjs-error .vjs-text-track-settings {
  display: none;
}

.vjs-text-track-settings .vjs-modal-dialog-content {
  display: table;
}

.vjs-text-track-settings .vjs-track-settings-colors,
.vjs-text-track-settings .vjs-track-settings-font,
.vjs-text-track-settings .vjs-track-settings-controls {
  display: table-cell;
}

.vjs-text-track-settings .vjs-track-settings-controls {
  text-align: right;
  vertical-align: bottom;
}

@supports (display: grid) {
  .vjs-text-track-settings .vjs-modal-dialog-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    padding: 20px 24px 0px 24px;
  }
  .vjs-track-settings-controls .vjs-default-button {
    margin-bottom: 20px;
  }
  .vjs-text-track-settings .vjs-track-settings-controls {
    grid-column: 1/-1;
  }
  .vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,
  .vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content,
  .vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content {
    grid-template-columns: 1fr;
  }
}
.vjs-text-track-settings select {
  font-size: inherit;
}

.vjs-track-setting > select {
  margin-right: 1em;
  margin-bottom: 0.5em;
}

.vjs-text-track-settings fieldset {
  margin: 10px;
  border: none;
}

.vjs-text-track-settings fieldset span {
  display: inline-block;
  padding: 0 0.6em 0.8em;
}

.vjs-text-track-settings fieldset span > select {
  max-width: 7.3em;
}

.vjs-text-track-settings legend {
  color: #fff;
  font-weight: bold;
  font-size: 1.2em;
}

.vjs-text-track-settings .vjs-label {
  margin: 0 0.5em 0.5em 0;
}

.vjs-track-settings-controls button:focus,
.vjs-track-settings-controls button:active {
  outline-style: solid;
  outline-width: medium;
  background-image: linear-gradient(0deg, #fff 88%, rgb(114.9141509434, 132.7028301887, 159.3858490566) 100%);
}

.vjs-track-settings-controls button:hover {
  color: rgba(43, 51, 63, 0.75);
}

.vjs-track-settings-controls button {
  background-color: #fff;
  background-image: linear-gradient(-180deg, #fff 88%, rgb(114.9141509434, 132.7028301887, 159.3858490566) 100%);
  color: #2B333F;
  cursor: pointer;
  border-radius: 2px;
}

.vjs-track-settings-controls .vjs-default-button {
  margin-right: 1em;
}

.vjs-title-bar {
  background: rgba(0, 0, 0, 0.9);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0) 100%);
  font-size: 1.2em;
  line-height: 1.5;
  transition: opacity 0.1s;
  padding: 0.666em 1.333em 4em;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.vjs-error .vjs-title-bar {
  display: none;
}

.vjs-title-bar-title,
.vjs-title-bar-description {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vjs-title-bar-title {
  font-weight: bold;
  margin-bottom: 0.333em;
}

.vjs-playing.vjs-user-inactive .vjs-title-bar {
  opacity: 0;
  transition: opacity 1s;
}

.video-js .vjs-skip-forward-5 {
  cursor: pointer;
}

.video-js .vjs-skip-forward-10 {
  cursor: pointer;
}

.video-js .vjs-skip-forward-30 {
  cursor: pointer;
}

.video-js .vjs-skip-backward-5 {
  cursor: pointer;
}

.video-js .vjs-skip-backward-10 {
  cursor: pointer;
}

.video-js .vjs-skip-backward-30 {
  cursor: pointer;
}

.video-js .vjs-transient-button {
  position: absolute;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(50, 50, 50, 0.5);
  cursor: pointer;
  opacity: 1;
  transition: opacity 1s;
}

.video-js:not(.vjs-has-started) .vjs-transient-button {
  display: none;
}

.video-js.not-hover .vjs-transient-button:not(.force-display),
.video-js.vjs-user-inactive .vjs-transient-button:not(.force-display) {
  opacity: 0;
}

.video-js .vjs-transient-button span {
  padding: 0 0.5em;
}

.video-js .vjs-transient-button.vjs-left {
  left: 1em;
}

.video-js .vjs-transient-button.vjs-right {
  right: 1em;
}

.video-js .vjs-transient-button.vjs-top {
  top: 1em;
}

.video-js .vjs-transient-button.vjs-near-top {
  top: 4em;
}

.video-js .vjs-transient-button.vjs-bottom {
  bottom: 4em;
}

.video-js .vjs-transient-button:hover {
  background-color: rgba(50, 50, 50, 0.9);
}

@media print {
  .video-js > *:not(.vjs-tech):not(.vjs-poster) {
    visibility: hidden;
  }
}
.vjs-resize-manager {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: -1000;
}

.js-focus-visible .video-js *:focus:not(.focus-visible) {
  outline: none;
}

.video-js *:focus:not(:focus-visible) {
  outline: none;
}
/*!**************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/videojs-chapters-extension/dist/videojs-chapters-extension.css ***!
  \**************************************************************************************************************************************************************************************************/
/*! @name videojs-chapters-extension @version 0.0.1 @license MIT */
.video-js.vjs-chapters-more {
  display: block;
}

.video-js.vjs-chapters-more .remove-me, .video-js.vjs-chapters-more .remove-me-too, .video-js.vjs-chapters-more.finally-remove-me {
  color: red;
  font-size: 504px;
}

.video-js .vjs-chapters-more-list {
  width: 35%;
  height: 100%;
  position: absolute;
  right: 0;
  background-color: #2b333f;
  opacity: 0.7;
  overflow-y: auto;
  padding: 0;
}

.video-js .vjs-chapters-more-list .box-chapter {
  height: 100px;
  color: #fff;
  padding: 8px 0;
  border-bottom: 1px solid gray;
  cursor: pointer;
}

.video-js .vjs-chapters-more-list .box-chapter:hover {
  background-color: #000;
}

.video-js .vjs-chapters-more-list .box-chapter .chapter-label {
  padding-top: 20px;
  font-size: 15px;
}

.video-js .vjs-chapters-more-list .box-chapter .chapter-desc {
  padding-top: 8px;
  font-size: 10px;
}

.video-js .vjs-chapters-more-list .box-chapter .chapter-thumbnail {
  width: 25%;
  margin: 0 4%;
  background-size: contain;
  height: 80px;
  background-repeat: no-repeat;
  background-position: center;
}

.video-js .vjs-chapters-more-list .fl {
  float: left;
}

.video-js .vjs-chapters-more-list .fr {
  float: right;
}

.video-js .vjs-chapters-more-list .cr {
  clear: both;
}
/*!*******************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/videojs-chapters-extension/src/css/fade.css ***!
  \*******************************************************************************************************************************************************************************/
.fade-in-box {
  display: inline-block;
  background: yellow;
  padding: 10px;
  animation: fadein 0.5s;
  -moz-animation: fadein 0.5s; /* Firefox */
  -webkit-animation: fadein 0.5s; /* Safari and Chrome */
  -o-animation: fadein 0.5s; /* Opera */
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.7;
  }
}
@-moz-keyframes fadein { /* Firefox */
  from {
    opacity: 0;
  }
  to {
    opacity: 0.7;
  }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
  from {
    opacity: 0;
  }
  to {
    opacity: 0.7;
  }
}
@-o-keyframes fadein { /* Opera */
  from {
    opacity: 0;
  }
  to {
    opacity: 0.7;
  }
}
.fade-out-box {
  display: inline-block;
  background: yellow;
  padding: 10px;
  animation: fadeout 0.5s;
  -moz-animation: fadeout 0.5s; /* Firefox */
  -webkit-animation: fadeout 0.5s; /* Safari and Chrome */
  -o-animation: fadeout 0.5s; /* Opera */
  animation-fill-mode: forwards;
}

@keyframes fadeout {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 0;
  }
}
@-moz-keyframes fadeout { /* Firefox */
  from {
    opacity: 0.7;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes fadeout { /* Safari and Chrome */
  from {
    opacity: 0.7;
  }
  to {
    opacity: 0;
  }
}
@-o-keyframes fadeout { /* Opera */
  from {
    opacity: 0.7;
  }
  to {
    opacity: 0;
  }
}
/*!**************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/resources/assets/styles/video.scss ***!
  \**************************************************************************************************************************************************************/
@charset "UTF-8";
/* =====================
   Video Module Styles (통합)
   ===================== */
/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

:root,
[data-bs-theme=light] {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-transparent: transparent;
  --csms-studio-tx-hierarchy-primary: #161819;
  --csms-studio-tx-hierarchy-secondary: #2c2f32;
  --csms-studio-tx-hierarchy-tertiary: #575e64;
  --csms-studio-tx-hierarchy-quaternary: #6d767e;
  --csms-studio-tx-hierarchy-quinary: #899199;
  --csms-studio-tx-hierarchy-senary: #c4c8cc;
  --csms-studio-tx-hierarchy-senary-subtle: #e0e3e5;
  --csms-studio-tx-neutral-white: #ffffff;
  --csms-studio-tx-neutral-black: #000000;
  --csms-studio-tx-neutral-black-solid: #000000;
  --csms-studio-tx-neutral-white-solid: #ffffff;
  --csms-studio-tx-neutral-b20p-disabled: rgba(0, 0, 0, 0.2);
  --csms-studio-tx-neutral-w80p-disabled: rgba(255, 255, 255, 0.8);
  --csms-studio-tx-coursemos-primary: #0075F8;
  --csms-studio-tx-coursemos-secondary: #005DC8;
  --csms-studio-tx-coursemos-tertiary: #0052AF;
  --csms-studio-tx-coursemos-quaternary: #97C8FF;
  --csms-studio-tx-coursemos-quinary: #CBE3FF;
  --csms-studio-tx-coursemos-quinary-subtle: #D9EAFF;
  --csms-studio-tx-coursemos-senary: #E5F1FF;
  --csms-studio-tx-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-tx-semantic-nega-primary: #f04438;
  --csms-studio-tx-semantic-nega-secondary: #dc1e11;
  --csms-studio-tx-semantic-nega-tertiary: #c11a0e;
  --csms-studio-tx-semantic-nega-quaternary: #8a130a;
  --csms-studio-tx-semantic-nega-quinary: #530b06;
  --csms-studio-tx-semantic-nega-senary: #fbebed;
  --csms-studio-tx-semantic-info-primary: #1181f9;
  --csms-studio-tx-semantic-info-secondary: #0673e7;
  --csms-studio-tx-semantic-info-tertiary: #0564ca;
  --csms-studio-tx-semantic-info-quaternary: #c0defd;
  --csms-studio-tx-semantic-info-quinary: #d5e9fe;
  --csms-studio-tx-semantic-info-senary: #e0eefe;
  --csms-studio-tx-semantic-posi-primary: #1ea465;
  --csms-studio-tx-semantic-posi-secondary: #188351;
  --csms-studio-tx-semantic-posi-tertiary: #157347;
  --csms-studio-tx-semantic-posi-quaternary: #0f5233;
  --csms-studio-tx-semantic-posi-quinary: #09311e;
  --csms-studio-tx-semantic-posi-senary: #e4faf0;
  --csms-studio-tx-semantic-noti-primary: #ffc107;
  --csms-studio-tx-semantic-prog-primary: #fd7e14;
  --csms-studio-tx-semantic-etc-primary: #6f42c1;
  --csms-studio-bo-hierarchy-primary: #eeeff0;
  --csms-studio-bo-hierarchy-secondary: #e0e3e5;
  --csms-studio-bo-hierarchy-tertiary: #d3d6d9;
  --csms-studio-bo-hierarchy-quaternary: #c4c8cc;
  --csms-studio-bo-hierarchy-quaternary-subtle: #6d767e;
  --csms-studio-bo-hierarchy-quinary: #41474b;
  --csms-studio-bo-hierarchy-senary: #161819;
  --csms-studio-bo-neutral-white: #ffffff;
  --csms-studio-bo-neutral-black: #000000;
  --csms-studio-bo-neutral-white-solid: #ffffff;
  --csms-studio-bo-neutral-black-solid: #000000;
  --csms-studio-bo-neutral-b30p: rgba(0, 0, 0, 0.3);
  --csms-studio-bo-coursemos-primary: #0075F8;
  --csms-studio-bo-coursemos-secondary: #005DC8;
  --csms-studio-bo-coursemos-tertiary: #0052AF;
  --csms-studio-bo-coursemos-quaternary: #97C8FF;
  --csms-studio-bo-coursemos-quinary: #CBE3FF;
  --csms-studio-bo-coursemos-senary: #E5F1FF;
  --csms-studio-bo-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bo-semantic-nega-primary: #f04438;
  --csms-studio-bo-semantic-nega-secondary: #dc1e11;
  --csms-studio-bo-semantic-nega-tertiary: #c11a0e;
  --csms-studio-bo-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bo-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-bo-semantic-info-primary: #1181f9;
  --csms-studio-bo-semantic-info-secondary: #0673e7;
  --csms-studio-bo-semantic-info-tertiary: #0564ca;
  --csms-studio-bo-semantic-info-quaternary: #c0defd;
  --csms-studio-bo-semantic-info-quinary: #d5e9fe;
  --csms-studio-bo-semantic-info-senary: #e0eefe;
  --csms-studio-bo-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bo-semantic-info-40p: rgba(17, 129, 249, 0.4);
  --csms-studio-bo-semantic-posi-primary: #1ea465;
  --csms-studio-bo-semantic-posi-secondary: #188351;
  --csms-studio-bo-semantic-posi-tertiary: #157347;
  --csms-studio-bo-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bo-semantic-warn-primary: #ffc107;
  --csms-studio-bo-semantic-noti-primary: #ffc107;
  --csms-studio-bo-semantic-prog-primary: #fd7e14;
  --csms-studio-bo-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-hierarchy-primary: #fcfcfc;
  --csms-studio-bg-hierarchy-primary-subtle: #f5f5f5;
  --csms-studio-bg-hierarchy-secondary: #f0f1f2;
  --csms-studio-bg-hierarchy-secondary-subtle: #eeeff0;
  --csms-studio-bg-hierarchy-tertiary: #e0e3e5;
  --csms-studio-bg-hierarchy-quaternary: #d3d6d9;
  --csms-studio-bg-hierarchy-quinary: #899199;
  --csms-studio-bg-hierarchy-senary: #6d767e;
  --csms-studio-bg-hierarchy-senary-subtle: #575e64;
  --csms-studio-bg-neutral-white: #ffffff;
  --csms-studio-bg-neutral-black: #000000;
  --csms-studio-bg-neutral-white-solid: #ffffff;
  --csms-studio-bg-neutral-black-solid: #000000;
  --csms-studio-bg-neutral-b6p-hovered: rgba(0, 0, 0, 0.06);
  --csms-studio-bg-neutral-b10p: rgba(0, 0, 0, 0.1);
  --csms-studio-bg-neutral-b15p: rgba(0, 0, 0, 0.15);
  --csms-studio-bg-neutral-b60p: rgba(0, 0, 0, 0.6);
  --csms-studio-bg-neutral-b80p: rgba(0, 0, 0, 0.8);
  --csms-studio-bg-neutral-w90p: rgba(255, 255, 255, 0.9);
  --csms-studio-bg-neutral-w50p: rgba(255, 255, 255, 0.5);
  --csms-studio-bg-neutral-w30p: rgba(255, 255, 255, 0.3);
  --csms-studio-bg-neutral-w20p: rgba(255, 255, 255, 0.2);
  --csms-studio-bg-neutral-w5p: rgba(255, 255, 255, 0.05);
  --csms-studio-bg-neutral-w1p: rgba(255, 255, 255, 0.01);
  --csms-studio-bg-coursemos-primary: #0075F8;
  --csms-studio-bg-coursemos-secondary: #0069E1;
  --csms-studio-bg-coursemos-tertiary: #005DC8;
  --csms-studio-bg-coursemos-quaternary: #97C8FF;
  --csms-studio-bg-coursemos-quinary: #CBE3FF;
  --csms-studio-bg-coursemos-quinary-subtle: #D9EAFF;
  --csms-studio-bg-coursemos-senary: #E5F1FF;
  --csms-studio-bg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bg-semantic-nega-primary: #f04438;
  --csms-studio-bg-semantic-nega-secondary: #dc1e11;
  --csms-studio-bg-semantic-nega-tertiary: #c11a0e;
  --csms-studio-bg-semantic-nega-quaternary: #ea8791;
  --csms-studio-bg-semantic-nega-quinary: #f8d7da;
  --csms-studio-bg-semantic-nega-senary: #fbebed;
  --csms-studio-bg-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bg-semantic-info-primary: #1181f9;
  --csms-studio-bg-semantic-info-secondary: #0564ca;
  --csms-studio-bg-semantic-info-tertiary: #0456ad;
  --csms-studio-bg-semantic-info-quaternary: #c0defd;
  --csms-studio-bg-semantic-info-quinary: #d5e9fe;
  --csms-studio-bg-semantic-info-senary: #e0eefe;
  --csms-studio-bg-semantic-info-senary-subtle: #eaf4fe;
  --csms-studio-bg-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bg-semantic-posi-primary: #1ea465;
  --csms-studio-bg-semantic-posi-secondary: #188351;
  --csms-studio-bg-semantic-posi-tertiary: #157347;
  --csms-studio-bg-semantic-posi-quaternary: #5fe2a5;
  --csms-studio-bg-semantic-posi-quinary: #caf5e1;
  --csms-studio-bg-semantic-posi-senary: #e4faf0;
  --csms-studio-bg-semantic-posi-30p: rgba(30, 164, 101, 0.3);
  --csms-studio-bg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-posi-50p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-warn-primary: #ffc107;
  --csms-studio-bg-semantic-warn-secondary: #d09c00;
  --csms-studio-bg-semantic-warn-tertiary: #9c7500;
  --csms-studio-bg-semantic-warn-quaternary: #ffda69;
  --csms-studio-bg-semantic-warn-quinary: #fff3cd;
  --csms-studio-bg-semantic-warn-quinary-subtle: #ffecb4;
  --csms-studio-bg-semantic-warn-senary: #fff9e6;
  --csms-studio-bg-semantic-prog-primary: #fd7e14;
  --csms-studio-bg-semantic-prog-secondary: #d54d03;
  --csms-studio-bg-semantic-prog-tertiary: #ba4303;
  --csms-studio-bg-semantic-prog-quaternary: #fda271;
  --csms-studio-bg-semantic-prog-quinary: #fee0d0;
  --csms-studio-bg-semantic-prog-senary: #fff0e7;
  --csms-studio-bg-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-semantic-etc-secondary: #58339d;
  --csms-studio-bg-semantic-etc-tertiary: #4d2d89;
  --csms-studio-bg-semantic-etc-quaternary: #a98eda;
  --csms-studio-bg-semantic-etc-quinary: #e2d9f3;
  --csms-studio-bg-semantic-etc-senary: #f1ecf9;
  --csms-studio-fg-hierarchy-primary: #161819;
  --csms-studio-fg-hierarchy-secondary: #2c2f32;
  --csms-studio-fg-hierarchy-tertiary: #575e64;
  --csms-studio-fg-hierarchy-quaternary: #6d767e;
  --csms-studio-fg-hierarchy-quinary: #899199;
  --csms-studio-fg-hierarchy-senary: #c4c8cc;
  --csms-studio-fg-hierarchy-senary-subtle: #e0e3e5;
  --csms-studio-fg-neutral-white: #ffffff;
  --csms-studio-fg-neutral-black: #000000;
  --csms-studio-fg-neutral-white-solid: #ffffff;
  --csms-studio-fg-neutral-black-solid: #000000;
  --csms-studio-fg-neutral-w50p-solid: rgba(255, 255, 255, 0.5);
  --csms-studio-fg-neutral-w80p-solid: rgba(255, 255, 255, 0.8);
  --csms-studio-fg-coursemos-primary: #0075F8;
  --csms-studio-fg-coursemos-secondary: #005DC8;
  --csms-studio-fg-coursemos-tertiary: #0052AF;
  --csms-studio-fg-coursemos-quaternary: #2F90FF;
  --csms-studio-fg-coursemos-quinary: #CBE3FF;
  --csms-studio-fg-coursemos-senary: #E5F1FF;
  --csms-studio-fg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-fg-coursemos-primary-50p: rgba(0, 117, 248, 0.5);
  --csms-studio-fg-semantic-nega: #f04438;
  --csms-studio-fg-semantic-nega-quinary: #530b06;
  --csms-studio-fg-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-warn-primary: #ffc107;
  --csms-studio-fg-semantic-warn-senary: #ffda69;
  --csms-studio-fg-semantic-posi: #1ea465;
  --csms-studio-fg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-fg-semantic-info: #1181f9;
  --csms-studio-fg-semantic-prog: #fd7e14;
  --csms-studio-fg-semantic-etc: #6f42c1;
  --csms-studio-ut-school-primary: #0075F8;
  --csms-studio-ut-school-secondary: #2F90FF;
  --csms-studio-ut-graph-gray-primary: #a7adb2;
  --csms-studio-ut-graph-gray-secondary: #eeeff0;
  --csms-studio-ut-graph-blue-primary: #0673e7;
  --csms-studio-ut-graph-blue-secondary: #6db2fb;
  --csms-studio-ut-graph-blue-tertiary: #7DBAFF;
  --csms-studio-ut-graph-blue-quaternary: #CBE3FF;
  --csms-studio-ut-graph-blue-quinary: #D9EAFF;
  --csms-studio-ut-graph-green-primary: #57ae00;
  --csms-studio-ut-graph-green-secondary: #cbea00;
  --csms-studio-ut-graph-green-quaternary: #d7f0ac;
  --csms-studio-ut-graph-violet-primary: #7d55c8;
  --csms-studio-ut-graph-yellow-secondary: #ffe082;
  --csms-studio-border-radius-4: 4px;
  --csms-studio-border-radius-6: 6px;
  --csms-studio-border-radius-8: 8px;
  --csms-studio-border-radius-10: 10px;
  --csms-studio-border-radius-12: 12px;
  --csms-studio-border-radius-16: 16px;
  --csms-studio-border-radius-32: 32px;
  --csms-studio-border-radius-full: 999px;
  --csms-studio-space-2: 2px;
  --csms-studio-space-4: 4px;
  --csms-studio-space-6: 6px;
  --csms-studio-space-8: 8px;
  --csms-studio-space-10: 10px;
  --csms-studio-space-12: 12px;
  --csms-studio-space-16: 16px;
  --csms-studio-space-18: 18px;
  --csms-studio-space-20: 20px;
  --csms-studio-space-24: 24px;
  --csms-studio-space-28: 28px;
  --csms-studio-space-32: 32px;
  --csms-studio-space-40: 40px;
  --csms-studio-space-80: 80px;
  --csms-studio-gap-2: 2px;
  --csms-studio-gap-4: 4px;
  --csms-studio-gap-6: 6px;
  --csms-studio-gap-8: 8px;
  --csms-studio-gap-10: 10px;
  --csms-studio-gap-12: 12px;
  --csms-studio-gap-16: 16px;
  --csms-studio-gap-18: 18px;
  --csms-studio-gap-20: 20px;
  --csms-studio-gap-24: 24px;
  --csms-studio-gap-28: 28px;
  --csms-studio-gap-32: 32px;
  --csms-studio-gap-40: 40px;
  --csms-studio-gap-80: 80px;
}

.csms-studio-box-shadow-xsm {
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.csms-studio-box-shadow-sm {
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.csms-studio-box-shadow-md {
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}

.csms-studio-box-shadow-lg {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.csms-studio-box-shadow-xl {
  box-shadow: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-2xl {
  box-shadow: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-3xl {
  box-shadow: 0 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
}

/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

.csms-studio-heading-2xlg {
  --csms-studio-heading-font-weight: 700;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-xlg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 40px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 56px;
  margin-bottom: 0;
}

.csms-studio-heading-lg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 32px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 45px;
  margin-bottom: 0;
}

.csms-studio-heading-md {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 28px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-sm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm-semibold {
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-label-xlg-bold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-semibold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-medium {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-normal {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-bold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-semibold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-medium {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-normal {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-bold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-semibold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-medium {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-normal {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-bold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-semibold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-medium {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-normal {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-bold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-semibold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-medium {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-normal {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-bold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-semibold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-medium {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-normal {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-caption-lg {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-md {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-sm {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 10px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 12px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  padding: 20px;
  border-radius: var(--csms-studio-border-radius-8);
}
.csms-studio-search-container .search-title {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csms-studio-search-container .search-box {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.csms-studio-search-container .search-box .search-box-select-input {
  display: flex;
  align-items: center;
  gap: 4px;
}

.csms-studio-flex-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.csms-studio-flex-box.csms-studio-flex-box-sm {
  gap: 4px;
}

.csms-studio-user-picture {
  display: flex;
  align-items: center;
  gap: 8px;
}
.csms-studio-user-picture img {
  border-radius: 50%;
}
.csms-studio-user-picture.csms-studio-user-picture-sm {
  gap: 4px;
}

.csms-studio-box .csms-studio-box-header .button-container .bar, .csms-studio-bar {
  --csms-studio-bar-height: 32px;
  width: 1px;
  height: var(--csms-studio-bar-height);
  background-color: var(--csms-studio-bo-hierarchy-secondary);
}

.csms-studio-bar-10 {
  --csms-studio-bar-height: 10px;
}

.csms-studio-bar-32 {
  --csms-studio-bar-height: 32px;
}

.csms-studio-horizontal-bar {
  width: 100%;
  height: 1px;
  background-color: var(--csms-studio-bo-hierarchy-secondary);
}

.card {
  --bs-card-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --bs-card-color: var(--csms-studio-tx-hierarchy-secondary);
}

.card-csms {
  --bs-card-spacer-y: 16px;
  --bs-card-spacer-x: 16px;
  --bs-card-border-radius: 16px;
  --bs-card-inner-border-radius: 16px 16px 0 0;
  /*
  .card-body {
      padding: 16px;
  }
  */
}
.card-csms .card-body {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-title-xlg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
}

.csms-studio-title-lg {
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
}

.csms-studio-title-md {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
  margin: 0;
}

.csms-studio-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
}
.csms-studio-box.csms-studio-box-gap-none {
  gap: 0;
}
.csms-studio-box .csms-studio-box-header {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 36px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
  margin: 0;
}
.csms-studio-box .csms-studio-box-header .csms-studio-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
  margin: 0;
  margin-bottom: 0;
}
.csms-studio-box .csms-studio-box-header .totalcount {
  display: flex;
  align-items: center;
  gap: 2px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-box .csms-studio-box-header .totalcount span {
  color: var(--csms-studio-tx-coursemos-primary);
}
.csms-studio-box .csms-studio-box-header .button-container {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.csms-studio-box .csms-studio-box-header .button-container .button-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.csms-studio-box .csms-studio-box-content {
  width: 100%;
}

.csms-studio-box-lg .csms-studio-box-header {
  gap: 4px;
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
}
.csms-studio-box-lg .csms-studio-box-header .btn-csms-studio-icon {
  flex-shrink: 0;
}
.csms-studio-box-lg .csms-studio-box-header .csms-studio-title {
  display: flex;
  align-items: center;
  gap: 4px;
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
  margin-bottom: 0;
}
.csms-studio-box-lg .csms-studio-box-header .csms-studio-title span {
  color: var(--csms-studio-tx-coursemos-primary);
}

.csms-studio-box-xlg .csms-studio-box-header {
  gap: 8px;
  padding-left: 8px;
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
}
.csms-studio-box-xlg .csms-studio-box-header .title-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
.csms-studio-box-xlg .csms-studio-box-header .title-badge .csms-studio-title {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
  margin-bottom: 0;
}
.csms-studio-box-xlg .csms-studio-box-header .title-badge .badge {
  flex-shrink: 0;
  display: flex;
  padding: 2px 8px;
  justify-content: center;
  align-items: center;
  border-radius: var(--csms-studio-border-radius-6);
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-bg-neutral-white);
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-semantic-info-primary);
}
.csms-studio-box-xlg .csms-studio-box-header .date {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}

.csms-studio-container {
  --csms-studio-container-gap: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--csms-studio-container-gap);
}
.csms-studio-container > * {
  width: 100%;
}

.csms-studio-container-lg {
  --csms-studio-container-gap: 40px;
}

.csms-studio-container-xlg {
  --csms-studio-container-gap: 56px;
}

.btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn.focus, .btn:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn.focus.hover, .btn:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn:disabled, .btn.disabled {
  opacity: 0.4;
}
.btn.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}

.btn-primary,
.btn-csms-studio-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-primary.hover,
.btn-csms-studio-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-primary.focus, .btn-primary:focus,
.btn-csms-studio-primary.focus,
.btn-csms-studio-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-primary.focus.hover, .btn-primary:focus:hover,
.btn-csms-studio-primary.focus.hover,
.btn-csms-studio-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-primary:disabled, .btn-primary.disabled,
.btn-csms-studio-primary:disabled,
.btn-csms-studio-primary.disabled {
  opacity: 0.4;
}
.btn-primary.btn-csms-studio-svg,
.btn-csms-studio-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-primary.btn-csms-studio-svg-right,
.btn-csms-studio-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-primary svg,
.btn-csms-studio-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-primary svg .svg-color[stroke],
.btn-csms-studio-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-primary svg .svg-color[fill],
.btn-csms-studio-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-primary,
.btn-csms-studio-primary {
  --bs-btn-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-bg: var(--csms-studio-bg-coursemos-primary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-hover-bg: var(--csms-studio-bg-coursemos-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-active-bg: var(--csms-studio-bg-coursemos-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-disabled-bg: var(--csms-studio-bg-coursemos-primary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-coursemos-primary);
}
.btn-primary svg .svg-color[stroke],
.btn-csms-studio-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-neutral-white-solid);
}
.btn-primary svg .svg-color[fill],
.btn-csms-studio-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-neutral-white-solid);
}
.btn-primary.focus, .btn-primary:focus,
.btn-csms-studio-primary.focus,
.btn-csms-studio-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-secondary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-secondary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-secondary.focus, .btn-csms-studio-secondary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-secondary.focus.hover, .btn-csms-studio-secondary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-secondary:disabled, .btn-csms-studio-secondary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-secondary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-secondary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-secondary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-secondary {
  --bs-btn-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-coursemos-quinary-subtle);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-coursemos-quinary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-coursemos-quaternary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-coursemos-quinary-subtle);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-coursemos-quinary-subtle);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-coursemos-senary);
}

.btn-csms-studio-tertiary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-tertiary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-tertiary.focus, .btn-csms-studio-tertiary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-tertiary.focus.hover, .btn-csms-studio-tertiary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-tertiary:disabled, .btn-csms-studio-tertiary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-tertiary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-tertiary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-tertiary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-tertiary {
  --bs-btn-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-quaternary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-hierarchy-secondary);
}

.btn-csms-studio-nega-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-nega-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-nega-primary.focus, .btn-csms-studio-nega-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-nega-primary.focus.hover, .btn-csms-studio-nega-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-nega-primary:disabled, .btn-csms-studio-nega-primary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-nega-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-nega-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-nega-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-nega-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-nega-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-nega-primary {
  --bs-btn-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-bg: var(--csms-studio-bg-semantic-nega-primary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-hover-bg: var(--csms-studio-bg-semantic-nega-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-active-bg: var(--csms-studio-bg-semantic-nega-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-disabled-bg: var(--csms-studio-bg-semantic-nega-primary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-semantic-nega-primary);
}
.btn-csms-studio-nega-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-neutral-white-solid);
}
.btn-csms-studio-nega-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-neutral-white-solid);
}
.btn-csms-studio-nega-primary.focus, .btn-csms-studio-nega-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-outline-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-outline-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-outline-primary.focus, .btn-csms-studio-outline-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-outline-primary.focus.hover, .btn-csms-studio-outline-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-outline-primary:disabled, .btn-csms-studio-outline-primary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-outline-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-outline-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-primary {
  --bs-btn-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-hover-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-coursemos-senary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-active-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-coursemos-quinary);
  --bs-btn-active-border-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-disabled-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-coursemos-primary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}

.btn-csms-studio-outline-secondary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-outline-secondary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-outline-secondary.focus, .btn-csms-studio-outline-secondary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-outline-secondary.focus.hover, .btn-csms-studio-outline-secondary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-outline-secondary:disabled, .btn-csms-studio-outline-secondary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-outline-secondary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-secondary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-secondary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-outline-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-secondary {
  --bs-btn-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-coursemos-quaternary);
  --bs-btn-hover-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-coursemos-senary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-coursemos-quaternary);
  --bs-btn-active-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-coursemos-quinary);
  --bs-btn-active-border-color: var(--csms-studio-bo-coursemos-quaternary);
  --bs-btn-disabled-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-coursemos-quaternary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}

.btn-csms-studio-outline-tertiary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-outline-tertiary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-outline-tertiary.focus, .btn-csms-studio-outline-tertiary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-outline-tertiary.focus.hover, .btn-csms-studio-outline-tertiary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-outline-tertiary:disabled, .btn-csms-studio-outline-tertiary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-outline-tertiary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-tertiary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-tertiary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-outline-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-tertiary {
  --bs-btn-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-hover-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-active-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-disabled-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}

.btn-csms-studio-gray-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-primary.focus, .btn-csms-studio-gray-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-primary.focus.hover, .btn-csms-studio-gray-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-primary:disabled, .btn-csms-studio-gray-primary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-primary {
  --bs-btn-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-bg: var(--csms-studio-bg-hierarchy-quinary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-senary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-senary-subtle);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-disabled-bg: var(--csms-studio-bg-hierarchy-quinary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-hierarchy-quinary);
}
.btn-csms-studio-gray-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-neutral-white-solid);
}
.btn-csms-studio-gray-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-neutral-white-solid);
}
.btn-csms-studio-gray-primary.focus, .btn-csms-studio-gray-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-gray-secondary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-secondary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-secondary.focus, .btn-csms-studio-gray-secondary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-secondary.focus.hover, .btn-csms-studio-gray-secondary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-secondary:disabled, .btn-csms-studio-gray-secondary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-secondary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-secondary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-secondary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-secondary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-quaternary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-hierarchy-secondary);
}

.btn-csms-studio-gray-tertiary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-tertiary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-tertiary.focus, .btn-csms-studio-gray-tertiary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-tertiary.focus.hover, .btn-csms-studio-gray-tertiary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-tertiary:disabled, .btn-csms-studio-gray-tertiary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-tertiary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-tertiary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-tertiary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-tertiary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-quaternary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-hierarchy-secondary);
}
.btn-csms-studio-gray-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-gray-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-csms-studio-gray-outline-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-outline-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-outline-primary.focus, .btn-csms-studio-gray-outline-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-outline-primary.focus.hover, .btn-csms-studio-gray-outline-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-outline-primary:disabled, .btn-csms-studio-gray-outline-primary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-outline-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-outline-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-outline-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-outline-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-outline-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-outline-primary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}

.btn-default,
.btn-secondary,
.btn-csms-studio-gray-outline-secondary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-default.hover,
.btn-secondary.hover,
.btn-csms-studio-gray-outline-secondary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-default.focus, .btn-default:focus,
.btn-secondary.focus,
.btn-secondary:focus,
.btn-csms-studio-gray-outline-secondary.focus,
.btn-csms-studio-gray-outline-secondary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-default.focus.hover, .btn-default:focus:hover,
.btn-secondary.focus.hover,
.btn-secondary:focus:hover,
.btn-csms-studio-gray-outline-secondary.focus.hover,
.btn-csms-studio-gray-outline-secondary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-default:disabled, .btn-default.disabled,
.btn-secondary:disabled,
.btn-secondary.disabled,
.btn-csms-studio-gray-outline-secondary:disabled,
.btn-csms-studio-gray-outline-secondary.disabled {
  opacity: 0.4;
}
.btn-default.btn-csms-studio-svg,
.btn-secondary.btn-csms-studio-svg,
.btn-csms-studio-gray-outline-secondary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-default.btn-csms-studio-svg-right,
.btn-secondary.btn-csms-studio-svg-right,
.btn-csms-studio-gray-outline-secondary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-default svg,
.btn-secondary svg,
.btn-csms-studio-gray-outline-secondary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-default svg .svg-color[stroke],
.btn-secondary svg .svg-color[stroke],
.btn-csms-studio-gray-outline-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-default svg .svg-color[fill],
.btn-secondary svg .svg-color[fill],
.btn-csms-studio-gray-outline-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-default,
.btn-secondary,
.btn-csms-studio-gray-outline-secondary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}
.btn-default svg .svg-color[stroke],
.btn-secondary svg .svg-color[stroke],
.btn-csms-studio-gray-outline-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-default svg .svg-color[fill],
.btn-secondary svg .svg-color[fill],
.btn-csms-studio-gray-outline-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-csms-studio-gray-outline-tertiary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-outline-tertiary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-outline-tertiary.focus, .btn-csms-studio-gray-outline-tertiary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-outline-tertiary.focus.hover, .btn-csms-studio-gray-outline-tertiary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-outline-tertiary:disabled, .btn-csms-studio-gray-outline-tertiary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-outline-tertiary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-outline-tertiary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-outline-tertiary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-outline-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-outline-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-outline-tertiary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-quaternary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-quaternary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-quaternary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-quaternary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}
.btn-csms-studio-gray-outline-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-gray-outline-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}

.btn-xlg {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 52px;
  --csms-studio-btn-padding-y: 13px;
  --csms-studio-btn-padding-left: 24px;
  --csms-studio-btn-padding-right: 24px;
  --csms-studio-btn-padding-svg: 22px;
  --csms-studio-btn-svg-size: 18px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-lg {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 48px;
  --csms-studio-btn-padding-y: 11px;
  --csms-studio-btn-padding-left: 20px;
  --csms-studio-btn-padding-right: 20px;
  --csms-studio-btn-padding-svg: 18px;
  --csms-studio-btn-svg-size: 18px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-md {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-sm {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 40px;
  --csms-studio-btn-padding-y: 8px;
  --csms-studio-btn-padding-left: 16px;
  --csms-studio-btn-padding-right: 16px;
  --csms-studio-btn-padding-svg: 14px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-xsm {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 36px;
  --csms-studio-btn-padding-y: 7px;
  --csms-studio-btn-padding-left: 16px;
  --csms-studio-btn-padding-right: 16px;
  --csms-studio-btn-padding-svg: 14px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-2xsm {
  --bs-btn-border-radius: 6px;
  --csms-studio-btn-height: 32px;
  --csms-studio-btn-padding-y: 5px;
  --csms-studio-btn-padding-left: 12px;
  --csms-studio-btn-padding-right: 12px;
  --csms-studio-btn-padding-svg: 10px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-3xsm {
  --bs-btn-border-radius: 6px;
  --csms-studio-btn-height: 28px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 12px;
  --csms-studio-btn-padding-right: 12px;
  --csms-studio-btn-padding-svg: 10px;
  --csms-studio-btn-svg-size: 12px;
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-4xsm {
  --bs-btn-border-radius: 6px;
  --csms-studio-btn-height: 24px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 10px;
  --csms-studio-btn-padding-right: 10px;
  --csms-studio-btn-padding-svg: 8px;
  --csms-studio-btn-svg-size: 12px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-5xsm {
  --bs-btn-border-radius: 6px;
  --csms-studio-btn-height: 22px;
  --csms-studio-btn-padding-y: 3px;
  --csms-studio-btn-padding-left: 10px;
  --csms-studio-btn-padding-right: 10px;
  --csms-studio-btn-padding-svg: 8px;
  --csms-studio-btn-svg-size: 12px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-ghost {
  --csms-studio-btn-gap: 2px;
  --csms-studio-btn-border-radius: 8px;
  --csms-studio-btn-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-height: 28px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 6px;
  --csms-studio-btn-padding-right: 6px;
  --csms-studio-btn-padding-svg: 4px;
  --csms-studio-btn-svg-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--csms-studio-btn-gap);
  border: 1px solid var(--csms-studio-btn-border-color);
  border-radius: var(--csms-studio-btn-border-radius);
  background-color: var(--csms-studio-btn-background-color);
  color: var(--csms-studio-btn-color);
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-ghost.hover, .btn-ghost:hover {
  background-color: var(--csms-studio-btn-hover-background-color);
}
.btn-ghost.focus, .btn-ghost:focus {
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-ghost.active, .btn-ghost:active {
  background-color: var(--csms-studio-btn-active-background-color);
}
.btn-ghost:disabled, .btn-ghost.disabled {
  opacity: 0.4;
}
.btn-ghost.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-ghost.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-ghost svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-ghost svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-info);
}
.btn-ghost svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-info);
}

.btn-ghost-primary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
}

.btn-ghost-secondary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bg-coursemos-quinary);
}

.btn-ghost-gray-primary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
}
.btn-ghost-gray-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-ghost-gray-secondary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
}
.btn-ghost-gray-secondary.hover, .btn-ghost-gray-secondary:hover, .btn-ghost-gray-secondary.active, .btn-ghost-gray-secondary:active {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-ghost-gray-secondary.hover svg .svg-color[stroke], .btn-ghost-gray-secondary:hover svg .svg-color[stroke], .btn-ghost-gray-secondary.active svg .svg-color[stroke], .btn-ghost-gray-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-secondary.hover svg .svg-color[fill], .btn-ghost-gray-secondary:hover svg .svg-color[fill], .btn-ghost-gray-secondary.active svg .svg-color[fill], .btn-ghost-gray-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-ghost-gray-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}

.btn-ghost-gray-tertiary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bo-semantic-info-senary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bo-semantic-info-quinary);
}
.btn-ghost-gray-tertiary.hover, .btn-ghost-gray-tertiary:hover, .btn-ghost-gray-tertiary.active, .btn-ghost-gray-tertiary:active, .btn-ghost-gray-tertiary.focus, .btn-ghost-gray-tertiary:focus {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-ghost-gray-tertiary.hover svg .svg-color[stroke], .btn-ghost-gray-tertiary:hover svg .svg-color[stroke], .btn-ghost-gray-tertiary.active svg .svg-color[stroke], .btn-ghost-gray-tertiary:active svg .svg-color[stroke], .btn-ghost-gray-tertiary.focus svg .svg-color[stroke], .btn-ghost-gray-tertiary:focus svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-tertiary.hover svg .svg-color[fill], .btn-ghost-gray-tertiary:hover svg .svg-color[fill], .btn-ghost-gray-tertiary.active svg .svg-color[fill], .btn-ghost-gray-tertiary:active svg .svg-color[fill], .btn-ghost-gray-tertiary.focus svg .svg-color[fill], .btn-ghost-gray-tertiary:focus svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-ghost-gray-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}

.btn-ghost-xlg {
  --csms-studio-btn-gap: 4px;
  --csms-studio-btn-border-radius: 8px;
  --csms-studio-btn-height: 32px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 8px;
  --csms-studio-btn-padding-right: 8px;
  --csms-studio-btn-padding-svg: 6px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-ghost-lg {
  --csms-studio-btn-gap: 4px;
  --csms-studio-btn-border-radius: 8px;
  --csms-studio-btn-height: 32px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 8px;
  --csms-studio-btn-padding-right: 8px;
  --csms-studio-btn-padding-svg: 6px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-ghost-sm {
  --csms-studio-btn-gap: 2px;
  --csms-studio-btn-border-radius: 6px;
  --csms-studio-btn-height: 24px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 6px;
  --csms-studio-btn-padding-right: 6px;
  --csms-studio-btn-padding-svg: 4px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-ghost-xsm {
  --csms-studio-btn-gap: 2px;
  --csms-studio-btn-border-radius: 6px;
  --csms-studio-btn-height: 20px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 4px;
  --csms-studio-btn-padding-right: 4px;
  --csms-studio-btn-padding-svg: 2px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-csms-studio-link {
  --csms-studio-btn-gap: 4px;
  --csms-studio-btn-border-radius: 0;
  --csms-studio-btn-border-width: 0;
  --csms-studio-btn-border-color: var(--csms-studio-transpa rent);
  --csms-studio-btn-color: var(--csms-studio-transparent);
  --csms-studio-btn-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-height: 20px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--csms-studio-btn-gap);
  border: var(--csms-studio-btn-border-width) solid var(--csms-studio-btn-border-color);
  border-radius: var(--csms-studio-btn-border-radius);
  background-color: var(--csms-studio-btn-background-color);
  color: var(--csms-studio-btn-color);
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding);
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  text-decoration: var(--csms-studio-text-decoration);
  color: var(--csms-studio-btn-color);
}
.btn-csms-studio-link .text {
  text-decoration: var(--csms-studio-text-decoration);
  color: var(--csms-studio-btn-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-csms-studio-link.hover, .btn-csms-studio-link:hover {
  background-color: var(--csms-studio-btn-hover-background-color);
}
.btn-csms-studio-link.focus, .btn-csms-studio-link:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-link.active, .btn-csms-studio-link:active {
  background-color: var(--csms-studio-btn-active-background-color);
}
.btn-csms-studio-link:disabled, .btn-csms-studio-link.disabled {
  opacity: 0.4;
}
.btn-csms-studio-link.btn-csms-studio-svg-right {
  --csms-studio-btn-gap: 2px;
}
.btn-csms-studio-link.hover, .btn-csms-studio-link:hover {
  color: var(--csms-studio-btn-hover-color);
}
.btn-csms-studio-link.hover .text, .btn-csms-studio-link:hover .text {
  --csms-studio-text-decoration: underline;
  color: var(--csms-studio-btn-hover-color);
}
.btn-csms-studio-link.active, .btn-csms-studio-link:active {
  color: var(--csms-studio-btn-active-color);
}
.btn-csms-studio-link.active .text, .btn-csms-studio-link:active .text {
  --csms-studio-text-decoration: none;
  color: var(--csms-studio-btn-active-color);
}
.btn-csms-studio-link.btn-csms-studio-underline {
  text-decoration: underline !important;
}
.btn-csms-studio-link svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-info);
}
.btn-csms-studio-link svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-info);
}
.btn-csms-studio-link svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}

.btn-csms-studio-link-gray {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
}

.btn-csms-studio-link-gray-secondary {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-hover-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
}

.btn-csms-studio-link-tertiary {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-tertiary);
  --csms-studio-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
}

.btn-csms-studio-link-xlg {
  --csms-studio-btn-height: 23px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-csms-studio-link-lg {
  --csms-studio-btn-height: 21px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-csms-studio-link-sm {
  --csms-studio-btn-height: 18px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-csms-studio-link-xsm {
  --csms-studio-btn-height: 13px;
  --csms-studio-btn-svg-size: 12px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-csms-studio-link {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-hover-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
}

.csms-studio-box-shadow-xsm {
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.csms-studio-box-shadow-sm {
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.csms-studio-box-shadow-md {
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}

.csms-studio-box-shadow-lg {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.csms-studio-box-shadow-xl {
  box-shadow: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-2xl {
  box-shadow: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-3xl {
  box-shadow: 0 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
}

/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

.csms-studio-heading-2xlg {
  --csms-studio-heading-font-weight: 700;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-xlg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 40px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 56px;
  margin-bottom: 0;
}

.csms-studio-heading-lg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 32px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 45px;
  margin-bottom: 0;
}

.csms-studio-heading-md {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 28px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-sm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm-semibold {
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-label-xlg-bold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-semibold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-medium {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-normal {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-bold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-semibold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-medium {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-normal {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-bold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-semibold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-medium {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-normal {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-bold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-semibold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-medium {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-normal {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-bold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-semibold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-medium {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-normal {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-bold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-semibold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-medium {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-normal {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-caption-lg {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-md {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-sm {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 10px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 12px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-csms-studio-icon {
  --csms-studio-btn-icon-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-svg-color: --csms-studio-fg-hierarchy-secondary;
  --csms-studio-btn-icon-svg-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--csms-studio-btn-icon-border-color);
  border-radius: var(--csms-studio-btn-icon-border-radius);
  background-color: var(--csms-studio-btn-icon-background-color);
  color: var(--csms-studio-btn-icon-svg-color);
  width: var(--csms-studio-btn-icon-size);
  height: var(--csms-studio-btn-icon-size);
  padding: 0;
}
.btn-csms-studio-icon.hover, .btn-csms-studio-icon:hover {
  background-color: var(--csms-studio-btn-icon-hover-background-color);
}
.btn-csms-studio-icon.focus, .btn-csms-studio-icon:focus {
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-icon.active, .btn-csms-studio-icon:active {
  background-color: var(--csms-studio-btn-icon-active-background-color);
}
.btn-csms-studio-icon:disabled, .btn-csms-studio-icon.disabled, .btn-csms-studio-icon[disabled=disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-csms-studio-icon:disabled:hover, .btn-csms-studio-icon:disabled.hover, .btn-csms-studio-icon.disabled:hover, .btn-csms-studio-icon.disabled.hover, .btn-csms-studio-icon[disabled=disabled]:hover, .btn-csms-studio-icon[disabled=disabled].hover {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.btn-csms-studio-icon:disabled:active, .btn-csms-studio-icon:disabled.active, .btn-csms-studio-icon.disabled:active, .btn-csms-studio-icon.disabled.active, .btn-csms-studio-icon[disabled=disabled]:active, .btn-csms-studio-icon[disabled=disabled].active {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.btn-csms-studio-icon svg {
  width: var(--csms-studio-btn-icon-svg-size);
  height: var(--csms-studio-btn-icon-svg-size);
}
.btn-csms-studio-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-svg-color);
}
.btn-csms-studio-icon svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-svg-color);
}

.btn-csms-studio-icon-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-primary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-neutral-white-solid);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-primary.focus, .btn-csms-studio-icon-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-icon-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-outline-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-coursemos-primary);
}

.btn-csms-studio-icon-outline-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}

.btn-csms-studio-icon-outline-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-coursemos-primary);
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.btn-csms-studio-icon-outline-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.btn-csms-studio-icon-nospace-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-nospace-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-neutral-b10p);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-quinary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-neutral-white-solid);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-senary-subtle);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-primary.disabled, .btn-csms-studio-icon-gray-primary:disabled {
  background-color: var(--csms-studio-bg-hierarchy-senary);
}
.btn-csms-studio-icon-gray-primary.focus, .btn-csms-studio-icon-gray-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-icon-gray-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bo-coursemos-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-quaternary.focus, .btn-csms-studio-icon-gray-quaternary:focus {
  background-color: var(--csms-studio-bg-coursemos-quinary);
}

.btn-csms-studio-icon-gray-outline-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}

.btn-csms-studio-icon-gray-outline-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover, .btn-csms-studio-icon-gray-outline-secondary:hover {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-secondary:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-secondary:hover svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.active, .btn-csms-studio-icon-gray-outline-secondary:active {
  color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-secondary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-secondary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-icon-gray-outline-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.btn-csms-studio-icon-gray-outline-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover, .btn-csms-studio-icon-gray-outline-quaternary:hover {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-quaternary:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-quaternary:hover svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active, .btn-csms-studio-icon-gray-outline-quaternary:active {
  color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-quaternary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-quaternary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-icon-gray-nospace-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-neutral-b6p-hovered);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-neutral-b15p);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-nospace-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover, .btn-csms-studio-icon-gray-nospace-secondary:hover, .btn-csms-studio-icon-gray-nospace-secondary.active, .btn-csms-studio-icon-gray-nospace-secondary:active {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary:hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary:hover svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-csms-studio-icon-gray-nospace-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-info-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-2xsm {
  --csms-studio-btn-icon-size: 20px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 12px;
}

.btn-csms-studio-icon-xsm {
  --csms-studio-btn-icon-size: 24px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 14px;
}

.btn-csms-studio-icon-sm {
  --csms-studio-btn-icon-size: 28px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 16px;
}

.btn-csms-studio-icon-md {
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 18px;
}

.btn-csms-studio-icon-lg {
  --csms-studio-btn-icon-size: 36px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 18px;
}

.btn-csms-studio-icon-xlg {
  --csms-studio-btn-icon-size: 40px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 20px;
}

.btn-csms-studio-icon-2xlg {
  --csms-studio-btn-icon-size: 48px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 24px;
}

.btn-csms-studio-svgicon {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-bg-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-svgicon-size-md: 16px;
  --csms-studio-btn-svgicon-size-lg: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon.hover, .btn-csms-studio-svgicon:hover {
  color: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.hover svg .svg-color[stroke], .btn-csms-studio-svgicon:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.hover svg .svg-color[fill], .btn-csms-studio-svgicon:hover svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.focus, .btn-csms-studio-svgicon:focus {
  color: var(--csms-studio-btn-svgicon-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon.active, .btn-csms-studio-svgicon:active {
  color: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon.active svg .svg-color[stroke], .btn-csms-studio-svgicon:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon.active svg .svg-color[fill], .btn-csms-studio-svgicon:active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon:disabled, .btn-csms-studio-svgicon.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-csms-studio-svgicon svg {
  width: var(--csms-studio-btn-svgicon-size-md);
  height: var(--csms-studio-btn-svgicon-size-md);
}

.btn-csms-studio-svgicon {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-tertiary);
}

.btn-csms-studio-svgicon-help {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active svg .svg-color[stroke], .btn-csms-studio-svgicon-help:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active svg .svg-color[fill], .btn-csms-studio-svgicon-help:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active, .btn-csms-studio-svgicon-help:active {
  background-color: var(--csms-studio-btn-svgicon-bg-color);
}

.btn-csms-studio-svgicon-eye {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-svgicon-eye.active svg .svg-color[stroke], .btn-csms-studio-svgicon-eye:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-svgicon-eye.active svg .svg-color[fill], .btn-csms-studio-svgicon-eye:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-svgicon-home {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home.active svg .svg-color[stroke], .btn-csms-studio-svgicon-home:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home.active svg .svg-color[fill], .btn-csms-studio-svgicon-home:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home svg {
  width: --csms-studio-btn-svgicon-size-lg;
  height: --csms-studio-btn-svgicon-size-lg;
}
.btn-csms-studio-svgicon-home {
  border-radius: 0 !important;
}

.btn-csms-studio-svgicon-circle {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle.hover, .btn-csms-studio-svgicon-circle:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle.focus, .btn-csms-studio-svgicon-circle:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle.active, .btn-csms-studio-svgicon-circle:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle:disabled, .btn-csms-studio-svgicon-circle.disabled {
  opacity: 0.4;
}

.btn-csms-studio-svgicon-circle-arrow {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle-arrow svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-arrow svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-arrow svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle-arrow.hover, .btn-csms-studio-svgicon-circle-arrow:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle-arrow.focus, .btn-csms-studio-svgicon-circle-arrow:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle-arrow.active, .btn-csms-studio-svgicon-circle-arrow:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle-arrow:disabled, .btn-csms-studio-svgicon-circle-arrow.disabled {
  opacity: 0.4;
}
.btn-csms-studio-svgicon-circle-arrow {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-circle-size: 36px;
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.btn-csms-studio-svgicon-circle-help {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle-help svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-help svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-help svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle-help.hover, .btn-csms-studio-svgicon-circle-help:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle-help.focus, .btn-csms-studio-svgicon-circle-help:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle-help.active, .btn-csms-studio-svgicon-circle-help:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle-help:disabled, .btn-csms-studio-svgicon-circle-help.disabled {
  opacity: 0.4;
}
.btn-csms-studio-svgicon-circle-help {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-size: 40px;
}

.btn-csms-studio-like {
  --csms-studio-btn-icon-like-padding-y: 10px;
  --csms-studio-btn-icon-like-padding-x: 16px;
  --csms-studio-btn-icon-like-padding-x-round: 20px;
  --csms-studio-btn-icon-like-background: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-icon-like-hover-background: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-icon-like-active-svg-color: #fd6d6d;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-btn-icon-like-background);
  padding: var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x) var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x-round);
  border-radius: var(--csms-studio-border-radius-full) 0 0 var(--csms-studio-border-radius-full);
}
.btn-csms-studio-like svg {
  width: 20px;
  height: 20px;
}
.btn-csms-studio-like svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-like svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-like {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-csms-studio-like.hover, .btn-csms-studio-like:hover {
  background: var(--csms-studio-btn-icon-like-hover-background);
}
.btn-csms-studio-like.focus, .btn-csms-studio-like:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-like.is-active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-like.is-active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-like.is-active svg .svg-thumb-bg {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}

.btn-csms-studio-dislike {
  --csms-studio-btn-icon-like-padding-y: 10px;
  --csms-studio-btn-icon-like-padding-x: 16px;
  --csms-studio-btn-icon-like-padding-x-round: 20px;
  --csms-studio-btn-icon-like-background: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-icon-like-hover-background: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-icon-like-active-svg-color: #fd6d6d;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-btn-icon-like-background);
  padding: var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x-round) var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x);
  border-radius: 0 var(--csms-studio-border-radius-full) var(--csms-studio-border-radius-full) 0;
}
.btn-csms-studio-dislike svg {
  width: 20px;
  height: 20px;
}
.btn-csms-studio-dislike svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-dislike svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-dislike {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-csms-studio-dislike.hover, .btn-csms-studio-dislike:hover {
  background: var(--csms-studio-btn-icon-like-hover-background);
}
.btn-csms-studio-dislike.focus, .btn-csms-studio-dislike:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-dislike.is-active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-dislike.is-active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-dislike.is-active svg .svg-thumb-bg {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}

.btn-csms-studio-like-container {
  display: flex;
  align-items: center;
}
.btn-csms-studio-like-container .btn-csms-studio-like + .btn-csms-studio-dislike {
  margin-left: -1px;
}

.csms-studio-cons {
  --csms-studio-cons-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-cons-border-radius: 99px;
  --csms-studio-cons-border-color: var(--csms-studio-bo-semantic-info-quaternary);
  --csms-studio-cons-background-color: var(--csms-studio-bg-semantic-info-senary-subtle);
  --csms-studio-cons-background-active-color: var(--csms-studio-bg-semantic-info-primary);
  --csms-studio-cons-background-hover-color: var(--csms-studio-bg-semantic-info-senary);
  --csms-studio-cons-svg-size: 16px;
  --csms-studio-cons-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-cons-padding-x: 20px;
  --csms-studio-cons-padding-y: 8px;
  --csms-studio-cons-height: 44px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--csms-studio-cons-border-color);
  border-radius: var(--csms-studio-cons-border-radius);
  background-color: var(--csms-studio-cons-background-color);
  color: var(--csms-studio-cons-color);
  padding: var(--csms-studio-cons-padding-y) var(--csms-studio-cons-padding-x);
  height: var(--csms-studio-cons-height);
}
.csms-studio-cons.hover, .csms-studio-cons:hover {
  background-color: var(--csms-studio-cons-background-hover-color);
}
.csms-studio-cons.focus, .csms-studio-cons:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.csms-studio-cons.active, .csms-studio-cons:active {
  background-color: var(--csms-studio-cons-background-active-color);
}
.csms-studio-cons:disabled, .csms-studio-cons.disabled {
  opacity: 0.4;
}
.csms-studio-cons svg {
  width: var(--csms-studio-cons-svg-size);
  height: var(--csms-studio-cons-svg-size);
}
.csms-studio-cons svg .svg-color[stroke] {
  stroke: var(--csms-studio-cons-svg-color);
}
.csms-studio-cons svg .svg-color[fill] {
  fill: var(--csms-studio-cons-svg-color);
}

.csms-studio-cons-gray {
  --csms-studio-cons-color: var(--csms-studio-tx-hierarchy-quaternary);
  --csms-studio-cons-background-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-cons-background-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-cons-background-active-color: var(--csms-studio-bg-semantic-info-senary-subtle);
  --csms-studio-cons-border-color: var(--csms-studio-bo-hierarchy-secondary);
}

.vd-error-message {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-semantic-nega-primary);
  text-align: left;
  margin-top: 6px;
}

.form-text {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-secondary-color: var(--csms-studio-tx-hierarchy-tertiary);
  margin-top: 6px;
}
.form-text.form-text-sm {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quinary);
  margin-top: 0;
}

.form-control {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-body-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --bs-background-image: transparent;
  --csms-studio-form-control-height: 40px;
  --csms-studio-form-control-padding-y: 10px;
  --csms-studio-form-control-padding-x: 14px;
  --csms-studio-form-control-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-form-control-placeholder-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-hierarchy-quaternary);
  --csms-studio-form-control-hover-background-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-info-primary);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-form-control-disabled-placeholder-color: var(--csms-studio-tx-hierarchy-senary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-info-30p);
  height: var(--csms-studio-form-control-height);
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
  background-color: var(--csms-studio-form-control-background-color);
}
.form-control::placeholder {
  color: var(--csms-studio-form-control-placeholder-color);
}
.form-control.hover:not(.disabled, :disabled, .read-only, :read-only, .focus, :focus), .form-control:hover:not(.disabled, :disabled, .read-only, :read-only, .focus, :focus) {
  --bs-border-color: var(--csms-studio-form-control-hover-border-color);
  background-color: var(--csms-studio-form-control-hover-background-color);
}
.form-control.focus, .form-control:focus {
  --bs-border-color: var(--csms-studio-form-control-focus-border-color);
  border-color: var(--bs-border-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.form-control.read-only, .form-control:read-only, .form-control.disabled, .form-control:disabled {
  --bs-border-color: var(--csms-studio-form-control-disabled-border-color);
  background-color: var(--csms-studio-form-control-disabled-background-color);
}
.form-control.read-only::placeholder, .form-control:read-only::placeholder, .form-control.disabled::placeholder, .form-control:disabled::placeholder {
  color: var(--csms-studio-form-control-disabled-placeholder-color);
}
.form-control.is-invalid, .form-control.vd-error {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-nega-secondary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-nega-30p);
}
.form-control.is-invalid.disabled, .form-control.is-invalid:disabled, .form-control.vd-error.disabled, .form-control.vd-error:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.form-control.is-invalid + .form-text, .form-control.vd-error + .form-text {
  color: var(--csms-studio-tx-semantic-nega-primary);
}
.form-control.is-valid, .form-control.vd-success {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-posi-secondary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-posi-30p);
}
.form-control.is-valid.disabled, .form-control.is-valid:disabled, .form-control.vd-success.disabled, .form-control.vd-success:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-30p);
}
.form-control + .vd-error-message,
.form-control + .form-text {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.form-control + .vd-error-message.form-text-sm,
.form-control + .form-text.form-text-sm {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quinary);
  margin-top: 0;
}

.form-select {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-body-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --bs-form-select-bg-img: url("data:image/svg+xml,<svg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M5.36321 8.36321C5.71469 8.01174 6.28453 8.01174 6.63601 8.36321L11.9996 13.7268L17.3632 8.36321C17.7147 8.01174 18.2845 8.01174 18.636 8.36321C18.9875 8.71469 18.9875 9.28453 18.636 9.63601L12.636 15.636C12.2845 15.9875 11.7147 15.9875 11.3632 15.636L5.36321 9.63601C5.01174 9.28453 5.01174 8.71469 5.36321 8.36321Z%27 fill=%27#2c2f32%27/%3E%3C/svg%3E");
  --bs-form-select-bg-img-disabled: url("data:image/svg+xml,<svg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M5.36321 8.36321C5.71469 8.01174 6.28453 8.01174 6.63601 8.36321L11.9996 13.7268L17.3632 8.36321C17.7147 8.01174 18.2845 8.01174 18.636 8.36321C18.9875 8.71469 18.9875 9.28453 18.636 9.63601L12.636 15.636C12.2845 15.9875 11.7147 15.9875 11.3632 15.636L5.36321 9.63601C5.01174 9.28453 5.01174 8.71469 5.36321 8.36321Z%27 fill=%27rgba%2844, 47, 50, 0.4%29%27/></svg>");
  --csms-studio-form-select-bg-size: 18px;
  --csms-studio-form-control-height: 40px;
  --csms-studio-form-control-padding-y: 10px;
  --csms-studio-form-control-padding-x: 14px;
  --csms-studio-form-control-padding-x-right: calc(var(--csms-studio-form-select-bg-size) + 14px);
  --csms-studio-form-control-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-form-control-placeholder-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-hover-background-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-background-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-form-control-disabled-placeholder-color: var(--csms-studio-tx-hierarchy-senary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-info-30p);
}
.form-select:not([multiple]) {
  height: var(--csms-studio-form-control-height);
}
.form-select {
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x-right) var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
  background-color: var(--csms-studio-form-control-background-color);
  background-size: var(--csms-studio-form-select-bg-size) var(--csms-studio-form-select-bg-size);
  background-position: right var(--csms-studio-form-control-padding-x) center;
}
.form-select.hover:not(.disabled, :disabled, .ss-disabled, .focus, :focus), .form-select:hover:not(.disabled, :disabled, .ss-disabled, .focus, :focus) {
  --bs-border-color: var(--csms-studio-form-control-hover-border-color);
  background-color: var(--csms-studio-form-control-hover-background-color);
}
.form-select.focus, .form-select:focus {
  --bs-border-color: var(--csms-studio-form-control-focus-border-color);
  border-color: var(--bs-border-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.form-select.disabled, .form-select:disabled {
  --bs-border-color: var(--csms-studio-form-control-disabled-border-color);
  background-color: var(--csms-studio-form-control-disabled-background-color);
  background-image: var(--bs-form-select-bg-img-disabled);
}
.form-select.is-invalid, .form-select.vd-error {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-nega-30p);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.form-select.is-invalid.disabled, .form-select.is-invalid:disabled, .form-select.vd-error.disabled, .form-select.vd-error:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.form-select.is-valid, .form-select.vd-success {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-posi-30p);
}
.form-select.is-valid.disabled, .form-select.is-valid:disabled, .form-select.vd-success.disabled, .form-select.vd-success:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-30p);
}
.form-select:invalid {
  color: var(--csms-studio-tx-hierarchy-quinary);
}

.form-select-3xsm,
.form-control-3xsm {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 16px;
  --csms-studio-form-control-height: 28px;
  --csms-studio-form-control-padding-y: 6px;
  --bs-border-radius: 6px;
}
.form-select-3xsm + .vd-error-message,
.form-select-3xsm + .form-text,
.form-control-3xsm + .vd-error-message,
.form-control-3xsm + .form-text {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.form-select-2xsm,
.form-control-2xsm {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 16px;
  --csms-studio-form-control-height: 32px;
  --csms-studio-form-control-padding-y: 6px;
  --bs-border-radius: 6px;
}
.form-select-2xsm + .vd-error-message,
.form-select-2xsm + .form-text,
.form-control-2xsm + .vd-error-message,
.form-control-2xsm + .form-text {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.form-select-xsm,
.form-control-xsm {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 16px;
  --csms-studio-form-control-height: 36px;
  --csms-studio-form-control-padding-y: 6px;
}

.form-select-md,
.form-control-md {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 44px;
}

.form-select-lg,
.form-control-lg {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 20px;
  --csms-studio-form-control-height: 48px;
}

.form-select-xlg,
.form-control-xlg {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 22px;
  --csms-studio-form-control-height: 52px;
}

.input-group > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 40px;
  --csms-studio-btn-padding-y: 8px;
  --csms-studio-btn-padding-left: 16px;
  --csms-studio-btn-padding-right: 16px;
  --csms-studio-btn-padding-svg: 14px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --csms-studio-input-group-btn-svg-gap: 4px;
  --csms-studio-input-group-btn-svg-size: 16px;
  --csms-studio-input-group-btn-padding-left: 14px;
  --csms-studio-input-group-btn-padding-right: 12px;
  --csms-studio-input-group-btn-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-input-group-btn-border-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-input-group-btn-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-input-group-btn-focus-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-input-group-btn-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  gap: var(--csms-studio-input-group-btn-svg-gap);
  padding: 0 var(--csms-studio-input-group-btn-padding-right) 0 var(--csms-studio-input-group-btn-padding-left);
  background-color: var(--csms-studio-input-group-btn-background-color);
  border-color: var(--csms-studio-input-group-btn-border-color);
}
.input-group > .btn svg {
  width: var(--csms-studio-input-group-btn-svg-size);
  height: var(--csms-studio-input-group-btn-svg-size);
}
.input-group > .btn svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.input-group > .btn svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.input-group > .btn.hover, .input-group > .btn:hover {
  background-color: var(--csms-studio-input-group-btn-hover-background-color);
  border-color: var(--csms-studio-input-group-btn-border-color);
}
.input-group > .btn.focus, .input-group > .btn:focus {
  background-color: var(--csms-studio-input-group-btn-focus-background-color);
  border-color: var(--csms-studio-input-group-btn-border-color);
}
.input-group > .btn.active, .input-group > .btn:active {
  background-color: var(--csms-studio-input-group-btn-active-background-color);
  border-color: var(--csms-studio-input-group-btn-border-color);
}
.input-group > .input-group-text {
  --bs-body-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-tertiary-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --csms-studio-form-control-height: 40px;
  --csms-studio-input-group-text-padding-left: 14px;
  --csms-studio-input-group-text-padding-right: 12px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  padding: 0 var(--csms-studio-input-group-text-padding-right) 0 var(--csms-studio-input-group-text-padding-left);
  height: var(--csms-studio-form-control-height);
}
.input-group > .form-control,
.input-group > .form-select {
  --csms-studio-form-control-padding-y: 6px;
  --csms-studio-form-control-padding-x: 14px;
}
.input-group + .vd-error-message,
.input-group + .form-text {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.input-group-xsm > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 36px;
  --csms-studio-btn-padding-y: 7px;
  --csms-studio-btn-padding-left: 16px;
  --csms-studio-btn-padding-right: 16px;
  --csms-studio-btn-padding-svg: 14px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-input-group-btn-svg-size: 16px;
}
.input-group-xsm > .form-control,
.input-group-xsm > .form-select {
  --csms-studio-form-control-padding-y: 6px;
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
}
.input-group-xsm > .form-control,
.input-group-xsm > .form-select,
.input-group-xsm > .input-group-text {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 36px;
}
.input-group-xsm + .form-text,
.input-group-xsm + .vd-error-message {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.input-group-md > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-input-group-btn-svg-size: 18px;
  --csms-studio-input-group-btn-padding-left: 16px;
  --csms-studio-input-group-btn-padding-right: 14px;
}
.input-group-md > .input-group-text {
  --csms-studio-input-group-text-padding-left: 16px;
  --csms-studio-input-group-text-padding-right: 14px;
}
.input-group-md > .form-control,
.input-group-md > .form-select {
  --csms-studio-form-control-padding-y: 10px;
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
}
.input-group-md > .form-control,
.input-group-md > .form-select,
.input-group-md > .input-group-text {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 44px;
}

.input-group-lg > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 48px;
  --csms-studio-btn-padding-y: 11px;
  --csms-studio-btn-padding-left: 20px;
  --csms-studio-btn-padding-right: 20px;
  --csms-studio-btn-padding-svg: 18px;
  --csms-studio-btn-svg-size: 18px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-input-group-btn-svg-size: 20px;
  --csms-studio-input-group-btn-padding-left: 16px;
  --csms-studio-input-group-btn-padding-right: 14px;
}
.input-group-lg > .input-group-text {
  --csms-studio-input-group-text-padding-left: 16px;
  --csms-studio-input-group-text-padding-right: 14px;
}
.input-group-lg > .form-control,
.input-group-lg > .form-select {
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
}
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 48px;
}

.input-group-xlg > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 52px;
  --csms-studio-btn-padding-y: 13px;
  --csms-studio-btn-padding-left: 24px;
  --csms-studio-btn-padding-right: 24px;
  --csms-studio-btn-padding-svg: 22px;
  --csms-studio-btn-svg-size: 18px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  font-weight: 400;
  --csms-studio-input-group-btn-svg-size: 22px;
  --csms-studio-input-group-btn-padding-left: 16px;
  --csms-studio-input-group-btn-padding-right: 14px;
}
.input-group-xlg > .input-group-text {
  --csms-studio-input-group-text-padding-left: 16px;
  --csms-studio-input-group-text-padding-right: 14px;
}
.input-group-xlg > .form-control,
.input-group-xlg > .form-select {
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
}
.input-group-xlg > .form-control,
.input-group-xlg > .form-select,
.input-group-xlg > .input-group-text {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 52px;
}

.vd-error-message {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-semantic-nega-primary);
}

.form-floating > label {
  color: var(--csms-studio-tx-hierarchy-quinary);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
  color: var(--csms-studio-tx-hierarchy-quinary);
}

.csms-studio-form-floating > .form-control,
.csms-studio-form-floating > .form-control-plaintext,
.csms-studio-form-floating > .form-select {
  height: 56px;
  min-height: 56px;
  line-height: 1.5;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-form-floating > label {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quinary);
  padding: 15px 14px;
}
.csms-studio-form-floating > .form-control,
.csms-studio-form-floating > .form-control-plaintext {
  padding: 15px 14px;
}
.csms-studio-form-floating > .form-control::placeholder,
.csms-studio-form-floating > .form-control-plaintext::placeholder {
  color: transparent;
}
.csms-studio-form-floating > .form-control:focus, .csms-studio-form-floating > .form-control:not(:placeholder-shown),
.csms-studio-form-floating > .form-control-plaintext:focus,
.csms-studio-form-floating > .form-control-plaintext:not(:placeholder-shown) {
  padding-top: 25px;
  padding-bottom: 5px;
}
.csms-studio-form-floating > .form-control:-webkit-autofill,
.csms-studio-form-floating > .form-control-plaintext:-webkit-autofill {
  padding-top: 25px;
  padding-bottom: 5px;
}
.csms-studio-form-floating > .form-select {
  padding-top: 25px;
  padding-bottom: 5px;
}
.csms-studio-form-floating > .form-control:focus ~ label,
.csms-studio-form-floating > .form-control:not(:placeholder-shown) ~ label,
.csms-studio-form-floating > .form-control-plaintext ~ label,
.csms-studio-form-floating > .form-select ~ label {
  color: var(--csms-studio-tx-hierarchy-quinary);
  transform: scale(0.75) translateY(-7.5px) translateX(5px);
}
.csms-studio-form-floating > .form-control:focus ~ label::after,
.csms-studio-form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.csms-studio-form-floating > .form-control-plaintext ~ label::after,
.csms-studio-form-floating > .form-select ~ label::after {
  position: absolute;
  inset: inherit;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: transparent;
  border-radius: 8px;
}
.csms-studio-form-floating > .form-control:-webkit-autofill ~ label {
  color: var(--csms-studio-tx-hierarchy-quinary);
  transform: scale(0.75) translateY(-7.5px) translateX(5px);
}
.csms-studio-form-floating > .form-control-plaintext ~ label {
  border-width: 1px 0;
}
.csms-studio-form-floating > :disabled ~ label,
.csms-studio-form-floating > .form-control:disabled ~ label {
  color: rgba(0, 0, 0, 0.38);
}
.csms-studio-form-floating > :disabled ~ label::after,
.csms-studio-form-floating > .form-control:disabled ~ label::after {
  background-color: #e9ecef;
}

textarea.form-control {
  --csms-studio-form-control-height: inherit;
}

input[type=number].form-control-spin-hide::-webkit-inner-spin-button, input[type=number].form-control-spin-hide::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number].form-control-spin-hide {
  -moz-appearance: textfield;
}

.dropdown-item-icon, .csms-studio-dropdown .dropdown-toggle-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dropdown-item-icon img, .csms-studio-dropdown .dropdown-toggle-icon img {
  width: var(--csms-studio-dropdown-item-icon-image-size);
  height: var(--csms-studio-dropdown-item-icon-image-size);
  border-radius: 50%;
}
.dropdown-item-icon .svg-icon, .csms-studio-dropdown .dropdown-toggle-icon .svg-icon {
  flex: 0 0 auto;
}
.dropdown-item-icon .svg-icon svg, .csms-studio-dropdown .dropdown-toggle-icon .svg-icon svg {
  width: var(--csms-studio-dropdown-item-icon-svg-size);
  height: var(--csms-studio-dropdown-item-icon-svg-size);
}
.dropdown-item-icon .svg-icon svg .svg-color[stroke], .csms-studio-dropdown .dropdown-toggle-icon .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-dropdown-item-icon-svg-color);
}
.dropdown-item-icon .svg-icon svg .svg-color[fill], .csms-studio-dropdown .dropdown-toggle-icon .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-dropdown-item-icon-svg-color);
}
.dropdown-item-icon .svg-select, .csms-studio-dropdown .dropdown-toggle-icon .svg-select {
  margin-left: auto;
  flex: 0 0 auto;
  display: none;
}
.dropdown-item-icon .svg-select svg, .csms-studio-dropdown .dropdown-toggle-icon .svg-select svg {
  width: var(--csms-studio-dropdown-item-icon-svg-select-size);
  height: var(--csms-studio-dropdown-item-icon-svg-select-size);
}
.dropdown-item-icon .svg-select svg .svg-color[stroke], .csms-studio-dropdown .dropdown-toggle-icon .svg-select svg .svg-color[stroke] {
  stroke: var(--csms-studio-dropdown-item-icon-svg-select-color);
}
.dropdown-item-icon .svg-select svg .svg-color[fill], .csms-studio-dropdown .dropdown-toggle-icon .svg-select svg .svg-color[fill] {
  fill: var(--csms-studio-dropdown-item-icon-svg-select-color);
}
.dropdown-item-icon .svg-caret, .csms-studio-dropdown .dropdown-toggle-icon .svg-caret {
  margin-left: auto;
  flex: 0 0 auto;
}
.dropdown-item-icon .svg-caret svg, .csms-studio-dropdown .dropdown-toggle-icon .svg-caret svg {
  width: var(--csms-studio-dropdown-item-icon-svg-select-size);
  height: var(--csms-studio-dropdown-item-icon-svg-select-size);
}
.dropdown-item-icon .svg-caret svg .svg-color[stroke], .csms-studio-dropdown .dropdown-toggle-icon .svg-caret svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.dropdown-item-icon .svg-caret svg .svg-color[fill], .csms-studio-dropdown .dropdown-toggle-icon .svg-caret svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.csms-studio-dropdown {
  --csms-studio-dropdown-item-icon-image-size: 24px;
  --csms-studio-dropdown-item-icon-svg-size: 20px;
  --csms-studio-dropdown-item-icon-svg-select-size: 18px;
  --csms-studio-dropdown-item-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-dropdown-item-icon-svg-select-color: var(--csms-studio-fg-semantic-info);
  --csms-studio-dropdown-item-icon-svg-menu-color: var(--csms-studio-fg-hierarchy-secondary);
}
.csms-studio-dropdown .dropdown-toggle {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-body-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --bs-form-select-bg-img: url("data:image/svg+xml,<svg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M5.36321 8.36321C5.71469 8.01174 6.28453 8.01174 6.63601 8.36321L11.9996 13.7268L17.3632 8.36321C17.7147 8.01174 18.2845 8.01174 18.636 8.36321C18.9875 8.71469 18.9875 9.28453 18.636 9.63601L12.636 15.636C12.2845 15.9875 11.7147 15.9875 11.3632 15.636L5.36321 9.63601C5.01174 9.28453 5.01174 8.71469 5.36321 8.36321Z%27 fill=%27#2c2f32%27/%3E%3C/svg%3E");
  --bs-form-select-bg-img-disabled: url("data:image/svg+xml,<svg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M5.36321 8.36321C5.71469 8.01174 6.28453 8.01174 6.63601 8.36321L11.9996 13.7268L17.3632 8.36321C17.7147 8.01174 18.2845 8.01174 18.636 8.36321C18.9875 8.71469 18.9875 9.28453 18.636 9.63601L12.636 15.636C12.2845 15.9875 11.7147 15.9875 11.3632 15.636L5.36321 9.63601C5.01174 9.28453 5.01174 8.71469 5.36321 8.36321Z%27 fill=%27rgba%2844, 47, 50, 0.4%29%27/></svg>");
  --csms-studio-form-select-bg-size: 18px;
  --csms-studio-form-control-height: 40px;
  --csms-studio-form-control-padding-y: 10px;
  --csms-studio-form-control-padding-x: 14px;
  --csms-studio-form-control-padding-x-right: calc(var(--csms-studio-form-select-bg-size) + 14px);
  --csms-studio-form-control-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-form-control-placeholder-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-hover-background-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-background-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-form-control-disabled-placeholder-color: var(--csms-studio-tx-hierarchy-senary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-info-30p);
}
.csms-studio-dropdown .dropdown-toggle:not([multiple]) {
  height: var(--csms-studio-form-control-height);
}
.csms-studio-dropdown .dropdown-toggle {
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x-right) var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
  background-color: var(--csms-studio-form-control-background-color);
  background-size: var(--csms-studio-form-select-bg-size) var(--csms-studio-form-select-bg-size);
  background-position: right var(--csms-studio-form-control-padding-x) center;
}
.csms-studio-dropdown .dropdown-toggle.hover:not(.disabled, :disabled, .ss-disabled, .focus, :focus), .csms-studio-dropdown .dropdown-toggle:hover:not(.disabled, :disabled, .ss-disabled, .focus, :focus) {
  --bs-border-color: var(--csms-studio-form-control-hover-border-color);
  background-color: var(--csms-studio-form-control-hover-background-color);
}
.csms-studio-dropdown .dropdown-toggle.focus, .csms-studio-dropdown .dropdown-toggle:focus {
  --bs-border-color: var(--csms-studio-form-control-focus-border-color);
  border-color: var(--bs-border-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.csms-studio-dropdown .dropdown-toggle.disabled, .csms-studio-dropdown .dropdown-toggle:disabled {
  --bs-border-color: var(--csms-studio-form-control-disabled-border-color);
  background-color: var(--csms-studio-form-control-disabled-background-color);
  background-image: var(--bs-form-select-bg-img-disabled);
}
.csms-studio-dropdown .dropdown-toggle.is-invalid, .csms-studio-dropdown .dropdown-toggle.vd-error {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-nega-30p);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.csms-studio-dropdown .dropdown-toggle.is-invalid.disabled, .csms-studio-dropdown .dropdown-toggle.is-invalid:disabled, .csms-studio-dropdown .dropdown-toggle.vd-error.disabled, .csms-studio-dropdown .dropdown-toggle.vd-error:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.csms-studio-dropdown .dropdown-toggle.is-valid, .csms-studio-dropdown .dropdown-toggle.vd-success {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-posi-30p);
}
.csms-studio-dropdown .dropdown-toggle.is-valid.disabled, .csms-studio-dropdown .dropdown-toggle.is-valid:disabled, .csms-studio-dropdown .dropdown-toggle.vd-success.disabled, .csms-studio-dropdown .dropdown-toggle.vd-success:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-30p);
}
.csms-studio-dropdown .dropdown-toggle {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-form-control-padding-x-right: var(--csms-studio-form-control-padding-x);
}
.csms-studio-dropdown .dropdown-toggle-icon::after {
  content: "";
  display: none;
}
.csms-studio-dropdown hr {
  border-color: var(--csms-studio-bo-hierarchy-primary);
  margin: 1px 0;
  opacity: 1;
}

.dropdown-item {
  display: flex;
  align-items: center;
  --bs-dropdown-item-border-radius: 6px;
  --bs-dropdown-item-padding-y: 10px;
  --bs-dropdown-item-padding-x: 14px;
  --bs-dropdown-item-padding-x-right: 8px;
  --bs-dropdown-link-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-dropdown-link-hover-color: var(--csms-studio-tx-hierarchy-primary-subtle);
  --bs-dropdown-link-hover-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --bs-dropdown-link-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-dropdown-link-active-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --bs-dropdown-link-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-dropdown-link-negative-color: var(--csms-studio-tx-semantic-nega-primary);
  --csms-studio-dropdown-link-focus-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-dropdown-link-disabled-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-dropdown-link-bg: var(--csms-studio-bg-neutral-white);
  --csms-studio-dropdown-link-height: 40px;
  background-color: var(--csms-studio-dropdown-link-bg);
  min-height: var(--csms-studio-dropdown-link-height);
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x-right) var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.dropdown-item.hover, .dropdown-item:hover, .dropdown-item:focus-within {
  color: var(--bs-dropdown-link-hover-color);
  background-color: var(--bs-dropdown-link-hover-bg);
}
.dropdown-item.focus, .dropdown-item:focus {
  background-color: var(--csms-studio-dropdown-link-bg);
  color: var(--bs-dropdown-link-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-item.disabled, .dropdown-item:disabled {
  opacity: 0.4;
  font-style: inherit;
}
.dropdown-item.negative {
  color: var(--csms-studio-dropdown-link-negative-color);
}

.dropdown-item-icon .svg-menu {
  margin-left: auto;
  flex: 0 0 auto;
}
.dropdown-item-icon .svg-menu svg {
  width: var(--csms-studio-dropdown-item-icon-svg-select-size);
  height: var(--csms-studio-dropdown-item-icon-svg-select-size);
}
.dropdown-item-icon .svg-menu svg .svg-color[stroke] {
  stroke: var(--csms-studio-dropdown-item-icon-svg-menu-color);
}
.dropdown-item-icon .svg-menu svg .svg-color[fill] {
  fill: var(--csms-studio-dropdown-item-icon-svg-menu-color);
}
.dropdown-item-icon.focus, .dropdown-item-icon:focus {
  background-color: var(--csms-studio-dropdown-link-focus-bg);
}
.dropdown-item-icon.disabled, .dropdown-item-icon:disabled {
  background-color: var(--csms-studio-dropdown-link-disabled-bg);
}
.dropdown-item-icon.selected .svg-select {
  display: block;
}
.dropdown-item-icon .dropdown-item::after {
  display: none;
}

.dropdown-menu {
  --bs-dropdown-bg: var(--csms-studio-bg-neutral-white);
  --bs-dropdown-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --bs-dropdown-padding-x: 8px;
  --bs-dropdown-padding-y: 8px;
  --bs-dropdown-border-radius: 8px;
  --csms-studio-dropdown-item-title-padding-y: 4px;
  --csms-studio-dropdown-item-title-padding-x: 10px;
  --csms-studio-dropdown-item-title-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-dropdown-item-width: 100%;
  width: var(--csms-studio-dropdown-item-width);
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}
.dropdown-menu .dropdown-item-title {
  padding: var(--csms-studio-dropdown-item-title-padding-y) var(--csms-studio-dropdown-item-title-padding-x);
  color: var(--csms-studio-dropdown-item-title-color);
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}
.dropdown-menu > li + li,
.dropdown-menu > .dropdown-item + .dropdown-item {
  margin-top: 1px;
}
.dropdown-menu.dropdown-menu-160 {
  width: 160px;
}
.dropdown-menu.dropdown-menu-padding-lg {
  --bs-dropdown-padding-y: 12px;
}

.csms-studio-dropdown-xsm {
  --csms-studio-dropdown-item-icon-image-size: 24px;
  --csms-studio-dropdown-item-icon-svg-size: 18px;
  --csms-studio-dropdown-item-icon-svg-select-size: 16px;
}
.csms-studio-dropdown-xsm .dropdown-toggle {
  --csms-studio-form-control-height: 36px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  padding-top: 6px;
  padding-bottom: 6px;
}
.csms-studio-dropdown-xsm .dropdown-item {
  --bs-dropdown-item-padding-x: 10px;
  --bs-dropdown-item-padding-x-right: 8px;
  --bs-dropdown-item-padding-y: 6px;
  --csms-studio-dropdown-link-height: 36px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-dropdown-sm {
  --csms-studio-dropdown-item-icon-image-size: 24px;
  --csms-studio-dropdown-item-icon-svg-size: 18px;
  --csms-studio-dropdown-item-icon-svg-select-size: 16px;
}
.csms-studio-dropdown-sm .dropdown-toggle {
  --csms-studio-form-control-height: 40px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-dropdown-sm .dropdown-item {
  --bs-dropdown-item-padding-x: 10px;
  --bs-dropdown-item-padding-x-right: 8px;
  --bs-dropdown-item-padding-y: 6px;
  --csms-studio-dropdown-link-height: 40px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-dropdown-lg {
  --csms-studio-dropdown-item-icon-image-size: 28px;
  --csms-studio-dropdown-item-icon-svg-size: 22px;
  --csms-studio-dropdown-item-icon-svg-select-size: 20px;
}
.csms-studio-dropdown-lg .dropdown-toggle {
  --csms-studio-form-control-height: 48px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-dropdown-lg .dropdown-item {
  --csms-studio-dropdown-link-height: 48px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-dropdown-xlg {
  --csms-studio-dropdown-item-icon-image-size: 28px;
  --csms-studio-dropdown-item-icon-svg-size: 24px;
  --csms-studio-dropdown-item-icon-svg-select-size: 22px;
}
.csms-studio-dropdown-xlg .dropdown-toggle {
  --csms-studio-form-control-height: 52px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-dropdown-xlg .dropdown-item {
  --csms-studio-dropdown-link-height: 52px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

/*
.dropdown-submenu {
    .dropdown-menu > li:hover > .dropdown-submenu {
        display: block;
    }
}
*/
/* 2차 드롭다운 위치 조정 */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  bottom: 0;
  left: calc(100% + 5px);
  margin-top: -1px;
  display: none;
}
@media (max-width: 575.98px) {
  .dropdown-submenu > .dropdown-menu {
    left: 50px;
  }
}

/* hover 시 2차 메뉴 표시 */
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.csms-studio-chips {
  --csms-studio-chips-gap: 4px;
  --csms-studio-chips-svg-size: 16px;
  --csms-studio-chips-svg-color: transparent;
  --csms-studio-chips-font-weight: "medium";
  --csms-studio-chips-color: var(--csms-studio-tx-hierarchy-secondary);
  display: flex;
  align-items: center;
  gap: var(--csms-studio-chips-gap);
  flex-shrink: 0;
  color: var(--csms-studio-chips-color);
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-chips svg {
  width: var(--csms-studio-chips-svg-size);
  height: var(--csms-studio-chips-svg-size);
}
.csms-studio-chips svg .svg-color[stroke] {
  stroke: var(--csms-studio-chips-svg-color);
}
.csms-studio-chips svg .svg-color[fill] {
  fill: var(--csms-studio-chips-svg-color);
}
.csms-studio-chips.csms-studio-chips-dot {
  --csms-studio-chips-gap: 2px;
}

.csms-studio-chips-bg {
  display: flex;
  height: 24px;
  padding: 0 4px 0 2px;
  justify-content: center;
  align-items: center;
  gap: 2px;
  border-radius: var(--csms-studio-border-radius-8);
  background: var(--csms-studio-bg-neutral-w50p);
}

.csms-studio-chips-red {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-nega);
}

.csms-studio-chips-orange {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-prog);
}

.csms-studio-chips-yellow {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-warn-primary);
}

.csms-studio-chips-blue {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-info);
}

.csms-studio-chips-green {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-posi);
}

.csms-studio-chips-purple {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-etc);
}

.csms-studio-chips-gray-dark {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-tertiary);
}

.csms-studio-chips-gray-deep {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-quaternary);
}

.csms-studio-chips-gray {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-quinary);
}

.csms-studio-chips-gray-light {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-senary);
}

.csms-studio-chips-sm {
  --csms-studio-chips-svg-size: 14px;
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-chips-date.csms-studio-chips-sm {
  --csms-studio-chips-svg-size: 12px;
}

.csms-studio-chips-md {
  --csms-studio-chips-svg-size: 16px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-chips-date.csms-studio-chips-md {
  --csms-studio-chips-svg-size: 14px;
}

.csms-studio-chips-lg {
  --csms-studio-chips-svg-size: 20px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-chips-date.csms-studio-chips-lg {
  --csms-studio-chips-svg-size: 16px;
}

.csms-studio-chips-activity {
  --csms-studio-chips-activity-gap: 4px;
  --csms-studio-chips-activity-background: transparent;
  --csms-studio-chips-activity-padding: 4px 6px;
  --csms-studio-chips-activity-height: 24px;
  --csms-studio-chips-activity-border-radius: 4px;
  display: flex;
  align-items: center;
  gap: var(--csms-studio-chips-activity-gap);
  flex-shrink: 0;
  color: var(--csms-studio-tx-hierarchy-secondary);
  padding: var(--csms-studio-chips-activity-padding);
  height: var(--csms-studio-chips-activity-height);
  border-radius: var(--csms-studio-chips-activity-border-radius);
}
.csms-studio-chips-activity img {
  width: var(--csms-studio-chips-svg-size);
  height: var(--csms-studio-chips-svg-size);
}
.csms-studio-chips-activity.csms-studio-chips-activity-bg {
  background-color: var(--csms-studio-chips-activity-background);
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-chips-activity-forum {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-warn-quinary);
}

.csms-studio-chips-activity-quiz {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-nega-senary);
}

.csms-studio-chips-activity-assign {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-posi-senary);
}

.csms-studio-chips-activity-url {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-info-senary);
}

.csms-studio-chips-activity-ubfile {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-posi-senary);
}

.csms-studio-chips-activity-resource {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-posi-senary);
}

.csms-studio-chips-activity-vod {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-nega-senary);
}

.csms-studio-chips-activity-econtents {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-hierarchy-secondary);
}

.csms-studio-chips-activity-xncommons {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-info-senary);
}

.csms-studio-chips-activity-ubboard {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-prog-senary);
}

.csms-studio-chips-activity-feedback {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-etc-senary);
}

.csms-studio-chips-activity-zoom {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-info-senary);
}

.csms-studio-chips-activity-webexactivity {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-info-senary);
}

.csms-studio-chips-tag {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-chips-tag-gap: 4px;
  --csms-studio-chips-tag-background: transparent;
  --csms-studio-chips-tag-padding: 4px 8px;
  --csms-studio-chips-tag-border-radius: var(--csms-studio-border-radius-4);
  --csms-studio-chips-tag-height: 24px;
  --csms-studio-chips-tag-svg-color: var(--csms-studio-fg-semantic-posi);
  display: inline-flex;
  align-items: center;
  color: var(--csms-studio-tx-hierarchy-secondary);
  gap: var(--csms-studio-chips-tag-gap);
  background-color: var(--csms-studio-chips-tag-background);
  padding: var(--csms-studio-chips-tag-padding);
  border-radius: var(--csms-studio-chips-tag-border-radius);
  height: var(--csms-studio-chips-tag-height);
}
.csms-studio-chips-tag svg .svg-color[stroke] {
  stroke: var(--csms-studio-chips-tag-svg-color);
}
.csms-studio-chips-tag svg .svg-color[fill] {
  fill: var(--csms-studio-chips-tag-svg-color);
}
.csms-studio-chips-tag.csms-studio-chips-tag-red {
  --csms-studio-chips-tag-svg-color: var(--csms-studio-fg-semantic-nega);
}
.csms-studio-chips-tag.csms-studio-chips-tag-hyflex {
  color: var(--csms-studio-tx-semantic-info-tertiary);
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-info-quinary);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 5%; /* 0.6px */
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.csms-studio-chips-tag.csms-studio-chips-hyflex {
  --csms-studio-chips-tag-padding: 0;
  --csms-studio-chips-tag-background: none;
}

.csms-studio-chips-tag-blue {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-info-quinary);
}

.csms-studio-chips-tag-red {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-nega-quinary);
}

.csms-studio-chips-tag-green {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-posi-quinary);
}

.csms-studio-chips-tag-yellow {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-warn-quinary);
}

.csms-studio-chips-tag-purple {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-etc-quinary);
}

.csms-studio-chips-tag-gray {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-hierarchy-tertiary);
}

.csms-studio-chips-tag-time-1 {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-info-quinary);
}

.csms-studio-chips-tag-time-2 {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-posi-quinary);
}

.csms-studio-chips-tag-time-3 {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-warn-quinary);
}

.csms-studio-chips-tag-time-4 {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-etc-quinary);
}

.csms-studio-chips-date {
  --csms-studio-chips-svg-size: 14px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 5%; /* 0.6px */
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.csms-studio-chips-date-dday {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-chips-color: var(--csms-studio-tx-semantic-nega-primary);
  --csms-studio-label-font-weight: 700;
}

.csms-studio-chips-date-before {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-chips-color: var(--csms-studio-tx-hierarchy-quaternary);
}

.csms-studio-chips-date-ing {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-info);
  --csms-studio-chips-color: var(--csms-studio-tx-semantic-info-primary);
  text-decoration: none;
}

.csms-studio-chips-date-lateness {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-prog);
  --csms-studio-chips-color: var(--csms-studio-tx-semantic-prog-primary);
}

.csms-studio-chips-date-end {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-chips-color: var(--csms-studio-tx-hierarchy-secondary);
  text-decoration: none;
}

.pagination {
  --bs-pagination-padding-x: 0;
  --bs-pagination-padding-y: 0;
  --bs-pagination-color: var(--csms-studio-tx-hierarchy-quinary);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-width: 0;
  --bs-pagination-border-color: transparent;
  --bs-pagination-border-radius: 8px;
  --bs-pagination-hover-color: var(--csms-studio-tx-hierarchy-quinary);
  --bs-pagination-hover-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --bs-pagination-focus-color: var(--csms-studio-tx-hierarchy-quinary);
  --bs-pagination-focus-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --bs-pagination-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-pagination-active-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-pagination-disabled-color: var(--csms-studio-tx-hierarchy-senary);
  --bs-pagination-disabled-bg: transparent;
  --csms-studio-pagination-page-link-width: 32px;
  --csms-studio-pagination-page-link-height: 32px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0;
}
.pagination .page-link {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  width: var(--csms-studio-pagination-page-link-width);
  height: var(--csms-studio-pagination-page-link-height);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bs-pagination-border-radius);
}
.pagination .page-link:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.pagination .page-item:not(:first-child) .page-link {
  margin-left: 0;
}
.pagination .page-item-prev {
  margin-right: 4px;
}
.pagination .page-item-next {
  margin-left: 4px;
}

.short-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}
.short-pagination .page-info {
  display: flex;
  align-items: center;
  gap: 2px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quinary);
}
.short-pagination .page-info .current {
  color: var(--csms-studio-tx-hierarchy-tertiary);
}
.short-pagination .page-link:hover {
  border-color: var(--csms-studio-btn-icon-border-color);
}

.csms-studio-box-shadow-xsm {
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.csms-studio-box-shadow-sm {
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.csms-studio-box-shadow-md {
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}

.csms-studio-box-shadow-lg {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.csms-studio-box-shadow-xl {
  box-shadow: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-2xl {
  box-shadow: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-3xl {
  box-shadow: 0 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
}

/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

.csms-studio-heading-2xlg {
  --csms-studio-heading-font-weight: 700;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-xlg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 40px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 56px;
  margin-bottom: 0;
}

.csms-studio-heading-lg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 32px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 45px;
  margin-bottom: 0;
}

.csms-studio-heading-md {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 28px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-sm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm-semibold {
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-label-xlg-bold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-semibold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-medium {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-normal {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-bold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-semibold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-medium {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-normal {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-bold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-semibold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-medium {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-normal {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-bold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-semibold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-medium {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-normal {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-bold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-semibold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-medium {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-normal {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-bold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-semibold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-medium {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-normal {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-caption-lg {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-md {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-sm {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 10px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 12px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-csms-studio-icon {
  --csms-studio-btn-icon-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-svg-color: --csms-studio-fg-hierarchy-secondary;
  --csms-studio-btn-icon-svg-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--csms-studio-btn-icon-border-color);
  border-radius: var(--csms-studio-btn-icon-border-radius);
  background-color: var(--csms-studio-btn-icon-background-color);
  color: var(--csms-studio-btn-icon-svg-color);
  width: var(--csms-studio-btn-icon-size);
  height: var(--csms-studio-btn-icon-size);
  padding: 0;
}
.btn-csms-studio-icon.hover, .btn-csms-studio-icon:hover {
  background-color: var(--csms-studio-btn-icon-hover-background-color);
}
.btn-csms-studio-icon.focus, .btn-csms-studio-icon:focus {
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-icon.active, .btn-csms-studio-icon:active {
  background-color: var(--csms-studio-btn-icon-active-background-color);
}
.btn-csms-studio-icon:disabled, .btn-csms-studio-icon.disabled, .btn-csms-studio-icon[disabled=disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-csms-studio-icon:disabled:hover, .btn-csms-studio-icon:disabled.hover, .btn-csms-studio-icon.disabled:hover, .btn-csms-studio-icon.disabled.hover, .btn-csms-studio-icon[disabled=disabled]:hover, .btn-csms-studio-icon[disabled=disabled].hover {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.btn-csms-studio-icon:disabled:active, .btn-csms-studio-icon:disabled.active, .btn-csms-studio-icon.disabled:active, .btn-csms-studio-icon.disabled.active, .btn-csms-studio-icon[disabled=disabled]:active, .btn-csms-studio-icon[disabled=disabled].active {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.btn-csms-studio-icon svg {
  width: var(--csms-studio-btn-icon-svg-size);
  height: var(--csms-studio-btn-icon-svg-size);
}
.btn-csms-studio-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-svg-color);
}
.btn-csms-studio-icon svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-svg-color);
}

.btn-csms-studio-icon-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-primary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-neutral-white-solid);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-primary.focus, .btn-csms-studio-icon-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-icon-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-outline-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-coursemos-primary);
}

.btn-csms-studio-icon-outline-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}

.btn-csms-studio-icon-outline-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-coursemos-primary);
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.btn-csms-studio-icon-outline-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.btn-csms-studio-icon-nospace-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-nospace-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-neutral-b10p);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-quinary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-neutral-white-solid);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-senary-subtle);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-primary.disabled, .btn-csms-studio-icon-gray-primary:disabled {
  background-color: var(--csms-studio-bg-hierarchy-senary);
}
.btn-csms-studio-icon-gray-primary.focus, .btn-csms-studio-icon-gray-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-icon-gray-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bo-coursemos-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-quaternary.focus, .btn-csms-studio-icon-gray-quaternary:focus {
  background-color: var(--csms-studio-bg-coursemos-quinary);
}

.btn-csms-studio-icon-gray-outline-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}

.btn-csms-studio-icon-gray-outline-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover, .btn-csms-studio-icon-gray-outline-secondary:hover {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-secondary:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-secondary:hover svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.active, .btn-csms-studio-icon-gray-outline-secondary:active {
  color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-secondary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-secondary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-icon-gray-outline-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.btn-csms-studio-icon-gray-outline-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover, .btn-csms-studio-icon-gray-outline-quaternary:hover {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-quaternary:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-quaternary:hover svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active, .btn-csms-studio-icon-gray-outline-quaternary:active {
  color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-quaternary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-quaternary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-icon-gray-nospace-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-neutral-b6p-hovered);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-neutral-b15p);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-nospace-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover, .btn-csms-studio-icon-gray-nospace-secondary:hover, .btn-csms-studio-icon-gray-nospace-secondary.active, .btn-csms-studio-icon-gray-nospace-secondary:active {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary:hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary:hover svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-csms-studio-icon-gray-nospace-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-info-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-2xsm {
  --csms-studio-btn-icon-size: 20px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 12px;
}

.btn-csms-studio-icon-xsm {
  --csms-studio-btn-icon-size: 24px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 14px;
}

.btn-csms-studio-icon-sm {
  --csms-studio-btn-icon-size: 28px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 16px;
}

.btn-csms-studio-icon-md {
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 18px;
}

.btn-csms-studio-icon-lg {
  --csms-studio-btn-icon-size: 36px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 18px;
}

.btn-csms-studio-icon-xlg {
  --csms-studio-btn-icon-size: 40px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 20px;
}

.btn-csms-studio-icon-2xlg {
  --csms-studio-btn-icon-size: 48px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 24px;
}

.btn-csms-studio-svgicon {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-bg-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-svgicon-size-md: 16px;
  --csms-studio-btn-svgicon-size-lg: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon.hover, .btn-csms-studio-svgicon:hover {
  color: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.hover svg .svg-color[stroke], .btn-csms-studio-svgicon:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.hover svg .svg-color[fill], .btn-csms-studio-svgicon:hover svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.focus, .btn-csms-studio-svgicon:focus {
  color: var(--csms-studio-btn-svgicon-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon.active, .btn-csms-studio-svgicon:active {
  color: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon.active svg .svg-color[stroke], .btn-csms-studio-svgicon:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon.active svg .svg-color[fill], .btn-csms-studio-svgicon:active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon:disabled, .btn-csms-studio-svgicon.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-csms-studio-svgicon svg {
  width: var(--csms-studio-btn-svgicon-size-md);
  height: var(--csms-studio-btn-svgicon-size-md);
}

.btn-csms-studio-svgicon {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-tertiary);
}

.btn-csms-studio-svgicon-help {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active svg .svg-color[stroke], .btn-csms-studio-svgicon-help:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active svg .svg-color[fill], .btn-csms-studio-svgicon-help:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active, .btn-csms-studio-svgicon-help:active {
  background-color: var(--csms-studio-btn-svgicon-bg-color);
}

.btn-csms-studio-svgicon-eye {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-svgicon-eye.active svg .svg-color[stroke], .btn-csms-studio-svgicon-eye:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-svgicon-eye.active svg .svg-color[fill], .btn-csms-studio-svgicon-eye:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-svgicon-home {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home.active svg .svg-color[stroke], .btn-csms-studio-svgicon-home:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home.active svg .svg-color[fill], .btn-csms-studio-svgicon-home:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home svg {
  width: --csms-studio-btn-svgicon-size-lg;
  height: --csms-studio-btn-svgicon-size-lg;
}
.btn-csms-studio-svgicon-home {
  border-radius: 0 !important;
}

.btn-csms-studio-svgicon-circle {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle.hover, .btn-csms-studio-svgicon-circle:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle.focus, .btn-csms-studio-svgicon-circle:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle.active, .btn-csms-studio-svgicon-circle:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle:disabled, .btn-csms-studio-svgicon-circle.disabled {
  opacity: 0.4;
}

.btn-csms-studio-svgicon-circle-arrow {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle-arrow svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-arrow svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-arrow svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle-arrow.hover, .btn-csms-studio-svgicon-circle-arrow:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle-arrow.focus, .btn-csms-studio-svgicon-circle-arrow:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle-arrow.active, .btn-csms-studio-svgicon-circle-arrow:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle-arrow:disabled, .btn-csms-studio-svgicon-circle-arrow.disabled {
  opacity: 0.4;
}
.btn-csms-studio-svgicon-circle-arrow {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-circle-size: 36px;
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.btn-csms-studio-svgicon-circle-help {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle-help svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-help svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-help svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle-help.hover, .btn-csms-studio-svgicon-circle-help:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle-help.focus, .btn-csms-studio-svgicon-circle-help:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle-help.active, .btn-csms-studio-svgicon-circle-help:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle-help:disabled, .btn-csms-studio-svgicon-circle-help.disabled {
  opacity: 0.4;
}
.btn-csms-studio-svgicon-circle-help {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-size: 40px;
}

.btn-csms-studio-like {
  --csms-studio-btn-icon-like-padding-y: 10px;
  --csms-studio-btn-icon-like-padding-x: 16px;
  --csms-studio-btn-icon-like-padding-x-round: 20px;
  --csms-studio-btn-icon-like-background: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-icon-like-hover-background: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-icon-like-active-svg-color: #fd6d6d;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-btn-icon-like-background);
  padding: var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x) var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x-round);
  border-radius: var(--csms-studio-border-radius-full) 0 0 var(--csms-studio-border-radius-full);
}
.btn-csms-studio-like svg {
  width: 20px;
  height: 20px;
}
.btn-csms-studio-like svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-like svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-like {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-csms-studio-like.hover, .btn-csms-studio-like:hover {
  background: var(--csms-studio-btn-icon-like-hover-background);
}
.btn-csms-studio-like.focus, .btn-csms-studio-like:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-like.is-active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-like.is-active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-like.is-active svg .svg-thumb-bg {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}

.btn-csms-studio-dislike {
  --csms-studio-btn-icon-like-padding-y: 10px;
  --csms-studio-btn-icon-like-padding-x: 16px;
  --csms-studio-btn-icon-like-padding-x-round: 20px;
  --csms-studio-btn-icon-like-background: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-icon-like-hover-background: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-icon-like-active-svg-color: #fd6d6d;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-btn-icon-like-background);
  padding: var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x-round) var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x);
  border-radius: 0 var(--csms-studio-border-radius-full) var(--csms-studio-border-radius-full) 0;
}
.btn-csms-studio-dislike svg {
  width: 20px;
  height: 20px;
}
.btn-csms-studio-dislike svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-dislike svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-dislike {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-csms-studio-dislike.hover, .btn-csms-studio-dislike:hover {
  background: var(--csms-studio-btn-icon-like-hover-background);
}
.btn-csms-studio-dislike.focus, .btn-csms-studio-dislike:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-dislike.is-active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-dislike.is-active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-dislike.is-active svg .svg-thumb-bg {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}

.btn-csms-studio-like-container {
  display: flex;
  align-items: center;
}
.btn-csms-studio-like-container .btn-csms-studio-like + .btn-csms-studio-dislike {
  margin-left: -1px;
}

.csms-studio-box-shadow-xsm {
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.csms-studio-box-shadow-sm {
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.csms-studio-box-shadow-md {
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}

.csms-studio-box-shadow-lg {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.csms-studio-box-shadow-xl {
  box-shadow: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-2xl {
  box-shadow: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-3xl {
  box-shadow: 0 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
}

.alert {
  --csms-studio-alert-padding-y: 12px;
  --csms-studio-alert-padding-x: 16px;
  --csms-studio-alert-border-radius: var(--csms-studio-border-radius-8);
}
.alert .btn-close {
  margin-left: auto;
  flex-shrink: 0;
  --csms-studio-btn-icon-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-svg-color: --csms-studio-fg-hierarchy-secondary;
  --csms-studio-btn-icon-svg-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--csms-studio-btn-icon-border-color);
  border-radius: var(--csms-studio-btn-icon-border-radius);
  background-color: var(--csms-studio-btn-icon-background-color);
  color: var(--csms-studio-btn-icon-svg-color);
  width: var(--csms-studio-btn-icon-size);
  height: var(--csms-studio-btn-icon-size);
  padding: 0;
}
.alert .btn-close.hover, .alert .btn-close:hover {
  background-color: var(--csms-studio-btn-icon-hover-background-color);
}
.alert .btn-close.focus, .alert .btn-close:focus {
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.alert .btn-close.active, .alert .btn-close:active {
  background-color: var(--csms-studio-btn-icon-active-background-color);
}
.alert .btn-close:disabled, .alert .btn-close.disabled, .alert .btn-close[disabled=disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.alert .btn-close:disabled:hover, .alert .btn-close:disabled.hover, .alert .btn-close.disabled:hover, .alert .btn-close.disabled.hover, .alert .btn-close[disabled=disabled]:hover, .alert .btn-close[disabled=disabled].hover {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.alert .btn-close:disabled:active, .alert .btn-close:disabled.active, .alert .btn-close.disabled:active, .alert .btn-close.disabled.active, .alert .btn-close[disabled=disabled]:active, .alert .btn-close[disabled=disabled].active {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.alert .btn-close svg {
  width: var(--csms-studio-btn-icon-svg-size);
  height: var(--csms-studio-btn-icon-svg-size);
}
.alert .btn-close svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-svg-color);
}
.alert .btn-close svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-svg-color);
}
.alert .btn-close {
  --csms-studio-btn-icon-size: 28px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 16px;
  margin-top: 7px;
  margin-right: 7px;
}
.alert svg {
  width: 16px;
  height: 16px;
}
.alert {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.alert .description {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.alert.alert-warning {
  background-color: var(--csms-studio-bg-semantic-nega-senary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .btn-close {
  opacity: inherit;
}
.alert.alert-warning .btn-close.focus, .alert.alert-warning .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.alert.alert-warning .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.alert.alert-info, .alert.alert-guide {
  background-color: var(--csms-studio-bg-semantic-info-senary);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.alert.alert-info .svg-icon svg .svg-color[stroke], .alert.alert-guide .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-info);
}
.alert.alert-info .svg-icon svg .svg-color[fill], .alert.alert-guide .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-info);
}
.alert.alert-info .btn-close, .alert.alert-guide .btn-close {
  opacity: inherit;
}
.alert.alert-info .btn-close.focus, .alert.alert-info .btn-close:focus, .alert.alert-guide .btn-close.focus, .alert.alert-guide .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.alert.alert-info .btn-close, .alert.alert-guide .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.alert.alert-warning, .alert.alert-caution {
  background-color: var(--csms-studio-bg-semantic-warn-quinary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .svg-icon svg .svg-color[stroke], .alert.alert-caution .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-prog);
}
.alert.alert-warning .svg-icon svg .svg-color[fill], .alert.alert-caution .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-prog);
}
.alert.alert-warning .btn-close, .alert.alert-caution .btn-close {
  opacity: inherit;
}
.alert.alert-warning .btn-close.focus, .alert.alert-warning .btn-close:focus, .alert.alert-caution .btn-close.focus, .alert.alert-caution .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.alert.alert-warning .btn-close, .alert.alert-caution .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.alert.alert-danger {
  background-color: var(--csms-studio-bg-semantic-nega-senary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-danger .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-nega-quinary);
}
.alert.alert-danger .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-nega-quinary);
}
.alert.alert-danger .btn-close {
  opacity: inherit;
}
.alert.alert-danger .btn-close.focus, .alert.alert-danger .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}

.csms-studio-alert {
  --csms-studio-alert-gap: 4px;
  --csms-studio-alert-svg-color: var(--csms-studio-fg-semantic-info);
}
.csms-studio-alert .alert-content {
  display: flex;
  align-items: flex-start;
  gap: var(--csms-studio-alert-gap);
  min-height: 28px;
}
.csms-studio-alert .alert-content .svg-icon {
  margin-top: 4px;
  display: flex;
  align-self: flex-start;
  padding: 2px 0;
}
.csms-studio-alert .alert-content .svg-icon svg {
  width: 16px;
  height: 16px;
}
.csms-studio-alert .alert-content .alert-text {
  margin-top: 3.5px;
}
.csms-studio-alert .alert-content .btn-close {
  box-sizing: border-box;
  margin-top: 0;
  margin-right: 0;
}

.csms-studio-alert-header {
  --csms-studio-alert-gap: 8px;
  --bs-alert-padding-x: 24px;
  --bs-alert-bg: var(--csms-studio-bg-semantic-info-senary-subtle);
  --bs-alert-color: var(--csms-studio-tx-hierarchy-tertiary);
  margin-bottom: 24px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csms-studio-alert-header .alert-content {
  flex-wrap: wrap;
}
.csms-studio-alert-header .alert-content .svg-icon {
  margin-top: 6px;
}
.csms-studio-alert-header .alert-content .svg-icon svg {
  width: 18px;
  height: 18px;
}
.csms-studio-alert-header .alert-content .alert-text {
  margin-top: 5.5px;
}
.csms-studio-alert-header .alert-content .alert-button {
  margin-left: auto;
}
.csms-studio-alert-header .alert-content .btn-ghost {
  margin-top: 4px;
  color: var(--csms-studio-btn-color);
  font-weight: var(--csms-studio-caption-font-weight);
}
@media (max-width: 575.98px) {
  .csms-studio-alert-header .alert-content form {
    width: 100%;
    justify-content: flex-end;
  }
  .csms-studio-alert-header .alert-content .alert-button {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .csms-studio-alert-header .alert-content .btn-ghost {
    width: auto;
    margin: 0;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.csms-studio-toast-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.csms-studio-toast-container .toast {
  margin-bottom: 0;
}

.csms-studio-toast {
  --bs-toast-padding-x: 16px;
  --bs-toast-padding-y: 14px;
  --bs-toast-box-shadow: none;
  --bs-toast-max-width: 100%;
  --csms-studio-toast-border-top-left-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-border-top-right-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-border-bottom-left-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-border-bottom-right-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-body-min-height: 28px;
  --csms-studio-toast-icon-margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
  border: 0;
  border-radius: var(--csms-studio-toast-border-top-left-radius) var(--csms-studio-toast-border-top-right-radius) var(--csms-studio-toast-border-bottom-right-radius) var(--csms-studio-toast-border-bottom-left-radius);
  padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
}
.csms-studio-toast .toast-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  min-height: var(--csms-studio-toast-body-min-height);
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-toast .toast-body .svg-icon {
  align-self: flex-start;
}
.csms-studio-toast .toast-body .svg-icon svg {
  width: 20px;
  height: 20px;
}
.csms-studio-toast .toast-body .svg-icon {
  margin-top: var(--csms-studio-toast-icon-margin-top);
}
.csms-studio-toast .toast-body .toast-text {
  display: flex;
  align-items: center;
  gap: 4px 8px;
  flex-wrap: wrap;
}
.csms-studio-toast .btn-close {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: var(--csms-studio-toast-icon-margin-top);
}
.csms-studio-toast.csms-studio-toast-warning {
  background-color: var(--csms-studio-bg-semantic-nega-senary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-warning .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-warning .btn-close.focus, .csms-studio-toast.csms-studio-toast-warning .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-warning .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-nega);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-nega);
}
.csms-studio-toast.csms-studio-toast-guide {
  background-color: var(--csms-studio-bg-semantic-info-senary);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csms-studio-toast.csms-studio-toast-guide .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-info);
}
.csms-studio-toast.csms-studio-toast-guide .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-info);
}
.csms-studio-toast.csms-studio-toast-guide .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-guide .btn-close.focus, .csms-studio-toast.csms-studio-toast-guide .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-guide .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.csms-studio-toast.csms-studio-toast-caution {
  background-color: var(--csms-studio-bg-semantic-warn-quinary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-caution .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-prog);
}
.csms-studio-toast.csms-studio-toast-caution .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-prog);
}
.csms-studio-toast.csms-studio-toast-caution .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-caution .btn-close.focus, .csms-studio-toast.csms-studio-toast-caution .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-caution .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.csms-studio-toast.csms-studio-toast-success {
  background-color: var(--csms-studio-bg-semantic-posi-senary);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csms-studio-toast.csms-studio-toast-success .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-posi);
}
.csms-studio-toast.csms-studio-toast-success .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-posi);
}
.csms-studio-toast.csms-studio-toast-success .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-success .btn-close.focus, .csms-studio-toast.csms-studio-toast-success .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-success .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-posi-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-posi-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.csms-studio-toast-button {
  --csms-studio-toast-body-min-height: 44px;
  --csms-studio-toast-icon-margin-top: 10px;
}

.csms-studio-toast-slide-down {
  --csms-studio-toast-border-top-left-radius: 0;
  --csms-studio-toast-border-top-right-radius: 0;
  animation: slideDown 0.5s ease-in-out;
  margin-bottom: 1px;
}

.csms-studio-toast-slide-up {
  --csms-studio-toast-border-bottom-left-radius: 0;
  --csms-studio-toast-border-bottom-right-radius: 0;
  animation: slideUp 0.5s ease-in-out;
  margin-top: 1px;
}

.csms-studio-toast-default-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 760px;
  height: auto;
  padding: 14px 16px;
  box-sizing: border-box;
  border-bottom-right-radius: var(--csms-studio-border-radius-16);
  border-bottom-left-radius: var(--csms-studio-border-radius-16);
  z-index: 1000;
  margin: 0 auto;
}

.progress {
  --bs-progress-height: 8px;
  --bs-progress-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-progress-border-radius: var(--csms-studio-border-radius-full);
  --bs-progress-box-shadow: none;
  --bs-progress-bar-color: #fff;
  --bs-progress-bar-bg: var(--csms-studio-bg-semantic-prog-primary);
  --bs-progress-bar-transition: width 0.6s ease;
}
.progress .progress-bar {
  --bs-progress-bar-bg: var(--csms-studio-tx-semantic-prog-primary);
  border-radius: var(--csms-studio-border-radius-full);
  transition: width 0.3s ease-in-out;
  animation: animateBar 1.2s 1;
}
.progress .progress-striped {
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.progress-wrap span {
  flex: 0 0 auto;
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-semantic-prog-primary);
}
.progress-wrap .progress {
  flex: 1;
}

@keyframes animateBar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.form-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
  margin-bottom: 0;
  min-height: 24px;
}
.form-check .form-check-input {
  --bs-form-check-bg: var(--csms-studio-bg-neutral-white);
  --bs-border-width: 2px;
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-check-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-form-check-hover-border-color: var(--csms-studio-bo-hierarchy-quaternary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-info-primary);
  --csms-studio-form-check-checked-border-color: transparent;
  --csms-studio-form-check-checekd-hover-background-color: var(--csms-studio-bg-semantic-info-secondary);
  --csms-studio-form-check-checked-hover-border-color: transparent;
  --csms-studio-form-check-disabled-background-color: var(--csms-studio-bg-neutral-b10p);
  --csms-studio-form-check-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-check-background-size: auto;
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-info-30p);
  --bs-form-valid-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --bs-form-invalid-border-color: var(--csms-studio-bo-semantic-nega-primary);
  width: 20px;
  height: 20px;
  float: none;
  margin: 0;
  vertical-align: middle;
  filter: none;
}
.form-check .form-check-input[type=checkbox] {
  border-radius: 6px;
}
.form-check .form-check-input.hover, .form-check .form-check-input:hover, .form-check .form-check-input.active, .form-check .form-check-input:active {
  background-color: var(--csms-studio-form-check-hover-background-color);
  border-color: var(--csms-studio-form-check-hover-border-color);
}
.form-check .form-check-input.focus, .form-check .form-check-input:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.form-check .form-check-input.active, .form-check .form-check-input:active {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.form-check .form-check-input:checked {
  background-color: var(--csms-studio-form-check-checked-background-color);
  border-color: var(--csms-studio-form-check-checked-border-color);
  background-size: var(--csms-studio-form-check-background-size);
}
.form-check .form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,<svg width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path d=%27M5.06052 7.98144L5.04203 7.99994L0.423828 3.38174L1.92761 1.87796L5.06058 5.01094L10.0715 0L11.5753 1.50378L5.07908 8L5.06052 7.98144Z%27 fill=%27white%27/></svg>");
}
.form-check .form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,<svg width=%278%27 height=%278%27 viewBox=%270 0 8 8%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><rect width=%278%27 height=%278%27 rx=%274%27 fill=%27white%27/></svg>");
}
.form-check .form-check-input:checked.hover, .form-check .form-check-input:checked:hover, .form-check .form-check-input:checked.active, .form-check .form-check-input:checked:active {
  background-color: var(--csms-studio-form-check-checekd-hover-background-color);
  border-color: var(--csms-studio-form-check-checked-hover-border-color);
}
.form-check .form-check-input[disabled], .form-check .form-check-input:disabled {
  background-color: var(--csms-studio-form-check-disabled-background-color) !important;
  border-color: var(--csms-studio-form-check-disabled-border-color) !important;
  opacity: 50% !important;
}
.form-check .form-check-input[disabled]:checked, .form-check .form-check-input:disabled:checked {
  background-color: var(--csms-studio-form-check-checked-background-color) !important;
  border-color: var(--csms-studio-form-check-checked-border-color) !important;
}
.form-check .form-check-input[disabled] ~ .form-check-label, .form-check .form-check-input:disabled ~ .form-check-label {
  cursor: default;
  opacity: 50%;
}
.form-check .form-check-input[type=checkbox]:indeterminate {
  background-color: var(--csms-studio-form-check-checked-background-color);
  border-color: var(--csms-studio-form-check-checked-border-color);
  --bs-form-check-bg-image: url("data:image/svg+xml,<svg width=%2710%27 height=%273%27 viewBox=%270 0 10 3%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><rect y=%270.25%27 width=%2710%27 height=%272.4%27 fill=%27white%27/></svg>");
  background-size: auto;
}
.form-check .form-check-input[type=checkbox]:indeterminate.hover, .form-check .form-check-input[type=checkbox]:indeterminate:hover, .form-check .form-check-input[type=checkbox]:indeterminate.active, .form-check .form-check-input[type=checkbox]:indeterminate:active {
  --csms-studio-form-check-checekd-hover-background-color: var(--csms-studio-bg-semantic-info-secondary);
  --csms-studio-form-check-checked-hover-border-color: transparent;
}
.form-check .form-check-input.is-valid {
  --bs-border-color: var(--bs-form-valid-border-color);
  --csms-studio-form-check-hover-border-color: var(--csms-studio-bo-semantic-posi-secondary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-posi-primary);
  --csms-studio-form-check-checekd-hover-background-color: var(--csms-studio-bg-semantic-posi-secondary);
  --csms-studio-form-check-disabled-border-color: var(--bs-form-valid-border-color);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-posi-30p);
}
.form-check .form-check-input.is-invalid, .form-check .form-check-input.vd-error {
  --bs-border-color: var(--bs-form-invalid-border-color);
  --csms-studio-form-check-hover-border-color: var(--csms-studio-bo-semantic-nega-secondary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-nega-primary);
  --csms-studio-form-check-checekd-hover-background-color: var(--csms-studio-bg-semantic-nega-secondary);
  --csms-studio-form-check-disabled-border-color: var(--bs-form-invalid-border-color);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-nega-30p);
}
.form-check .form-check-label {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}

.form-switch {
  padding-left: 0;
}
.form-switch .form-check-input {
  --csms-studio-form-check-svg-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-form-check-hover-border-color: transparent;
  --csms-studio-form-check-hover-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-info-primary);
  --bs-border-width: 1px;
  --bs-border-color: transparent;
  --bs-form-valid-border-color: transparent;
  --bs-form-invalid-border-color: transparent;
  --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27><circle cx=%278%27 cy=%278%27 r=%278%27 fill=%27white%27/></svg>");
  background-position: 2px center;
  background-size: auto;
  background-color: var(--csms-studio-form-check-svg-background-color);
}
.form-switch .form-check-input::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  --csms-studio-input-switch-box-shadow-x: 1px;
  box-shadow: var(--csms-studio-input-switch-box-shadow-x) 0px 2px 1px var(--csms-studio-bg-neutral-b6p-hovered);
}
.form-switch .form-check-input {
  width: 36px;
  padding: 2px;
  margin-left: 0;
}
.form-switch .form-check-input[type=checkbox] {
  border-radius: 10px;
}
.form-switch .form-check-input.hover, .form-switch .form-check-input:hover, .form-switch .form-check-input.focus, .form-switch .form-check-input:focus, .form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27><circle cx=%278%27 cy=%278%27 r=%278%27 fill=%27white%27/></svg>");
}
.form-switch .form-check-input.focus, .form-switch .form-check-input:focus {
  border-color: var(--csms-studio-form-check-hover-border-color);
}
.form-switch .form-check-input.active, .form-switch .form-check-input:active {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.form-switch .form-check-input.active, .form-switch .form-check-input:active {
  background-color: var(--csms-studio-form-check-svg-background-color);
}
.form-switch .form-check-input:checked {
  background-position: right 2px center;
}
.form-switch .form-check-input:checked::after {
  position: relative;
  left: 16px;
  --csms-studio-input-switch-box-shadow-x: -1px;
}
.form-switch .form-check-input:checked[type=checkbox] {
  background-size: auto;
}
.form-switch .form-check-input.disabled, .form-switch .form-check-input:disabled {
  background-color: var(--csms-studio-form-check-svg-background-color) !important;
}
.form-switch .form-check-input.is-valid {
  --bs-border-color: transparent;
  --csms-studio-form-check-svg-background-color: var(--csms-studio-bg-semantic-posi-quinary);
  --csms-studio-form-check-hover-border-color: transparent;
  --csms-studio-form-check-hover-background-color: var(--csms-studio-bg-semantic-posi-quaternary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-posi-primary);
  --csms-studio-form-check-disabled-background-color: var(--csms-studio-bg-semantic-posi-primary);
}
.form-switch .form-check-input.is-invalid, .form-switch .form-check-input.vd-error {
  --bs-border-color: transparent;
  --csms-studio-form-check-svg-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-form-check-hover-border-color: transparent;
  --csms-studio-form-check-hover-background-color: var(--csms-studio-bg-semantic-nega-quaternary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-nega-primary);
  --csms-studio-form-check-disabled-background-color: var(--csms-studio-bg-semantic-nega-primary);
}

.form-switch-svg {
  position: relative;
}
.form-switch-svg .form-check-input {
  border-width: 0;
  background-image: none;
  transition: none;
}
.form-switch-svg .form-check-input::after {
  display: none;
}
.form-switch-svg .svg {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 4px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  transition: transform 0.15s ease-in-out;
  transform: translate(0, 0);
  --csms-studio-form-switch-svg-svg-color: transparent;
}
.form-switch-svg .svg .svg-color {
  fill: var(--csms-studio-form-switch-svg-svg-color);
}
.form-switch-svg .svg svg {
  position: static;
  width: inherit;
  height: inherit;
  border-radius: 0;
  transition: none;
  transform: none;
}
.form-switch-svg .form-check-input:checked ~ .svg {
  transform: translate(16px, 0);
  --csms-studio-form-switch-svg-svg-color: var(--csms-studio-fg-semantic-info);
}
.form-switch-svg .form-check-input:checked.is-valid ~ .svg {
  --csms-studio-form-switch-svg-svg-color: var(--csms-studio-fg-semantic-posi);
}
.form-switch-svg .form-check-input:checked.is-invalid ~ .svg, .form-switch-svg .form-check-input:checked.vd-error ~ .svg {
  --csms-studio-form-switch-svg-svg-color: var(--csms-studio-fg-semantic-nega);
}

.form-switch-editmode {
  --csms-studio-form-switch-editmode-width: 68px;
  --csms-studio-form-switch-editmode-height: 36px;
  --csms-studio-form-switch-svg-size: 40px;
}
.form-switch-editmode .form-check-input {
  --csms-studio-form-check-svg-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  width: var(--csms-studio-form-switch-editmode-width);
  height: var(--csms-studio-form-switch-editmode-height);
  padding: 0;
}
.form-switch-editmode .form-check-input[type=checkbox] {
  border-radius: 99px;
}
.form-switch-editmode .form-check-input:checked {
  background-color: var(--csms-studio-bg-coursemos-primary);
}
.form-switch-editmode .form-check-input:checked::after {
  left: 28px;
}
.form-switch-editmode .svg {
  width: var(--csms-studio-form-switch-svg-size);
  height: var(--csms-studio-form-switch-svg-size);
  border-radius: 999px;
  background-color: var(--csms-studio-bg-hierarchy-secondary);
  border: 1px solid var(--csms-studio-bo-hierarchy-tertiary);
  top: -2px;
  left: 0;
}
.form-switch-editmode .svg svg {
  width: 16px;
  height: 16px;
}
.form-switch-editmode .form-check-input:checked ~ .svg {
  transform: translate(28px, 0);
}
.form-switch-editmode svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.form-switch-editmode svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.form-switch-editmode.form-switch-editmode-sm {
  --csms-studio-form-switch-editmode-width: 64px;
  --csms-studio-form-switch-editmode-height: 32px;
  --csms-studio-form-switch-svg-size: 36px;
}

[data-bs-theme=light-red] {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-primary {
  color: #161819;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-quinary {
  color: #899199;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-white {
  color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-black {
  color: #000000;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-black-solid {
  color: #000000;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-primary {
  color: #8a130a;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-secondary {
  color: #6e0f08;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-tertiary {
  color: #530b06;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-quaternary {
  color: #f1afb6;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-quinary {
  color: #f8d7da;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-senary {
  color: #fbebed;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-primary-30p {
  color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-quaternary {
  color: #044890;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-quinary {
  color: #033973;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-white {
  border-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-black {
  border-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-primary {
  border-color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-secondary {
  border-color: #a5170c;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-tertiary {
  border-color: #8a130a;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-quaternary {
  border-color: #f1afb6;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-quinary {
  border-color: #f8d7da;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-senary {
  border-color: #f7e8ea;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-secondary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-tertiary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-quaternary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-quinary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-senary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-white {
  background-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-black {
  background-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-secondary {
  background-color: #1582FF;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-tertiary {
  background-color: #2F90FF;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-quaternary {
  background-color: #004696;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-quinary {
  background-color: #002F64;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-quinary-subtle {
  background-color: #001732;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-senary {
  background-color: #00234B;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-white {
  background-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-black {
  background-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-primary {
  background-color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-secondary {
  background-color: #dc1e11;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-tertiary {
  background-color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-quaternary {
  background-color: #e35f6d;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-quinary {
  background-color: #f8d7da;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-senary {
  background-color: #fbebed;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-nega {
  background-color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-info {
  background-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}
[data-bs-theme=light-red] .csms-studio-ut-school-primary {
  background-color: #a5170c;
}
[data-bs-theme=light-red] .csms-studio-ut-school-secondary {
  background-color: #ea8791;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}
[data-bs-theme=light-red] {
  --csms-studio-tx-hierarchy-primary: #161819;
  --csms-studio-tx-hierarchy-secondary: #2c2f32;
  --csms-studio-tx-hierarchy-tertiary: #575e64;
  --csms-studio-tx-hierarchy-quaternary: #6d767e;
  --csms-studio-tx-hierarchy-quinary: #899199;
  --csms-studio-tx-hierarchy-senary: #c4c8cc;
  --csms-studio-tx-hierarchy-senary-subtle: #e0e3e5;
  --csms-studio-tx-neutral-white: #ffffff;
  --csms-studio-tx-neutral-black: #000000;
  --csms-studio-tx-neutral-black-solid: #000000;
  --csms-studio-tx-neutral-white-solid: #ffffff;
  --csms-studio-tx-neutral-b20p-disabled: rgba(0, 0, 0, 0.2);
  --csms-studio-tx-neutral-w80p-disabled: rgba(255, 255, 255, 0.8);
  --csms-studio-tx-coursemos-primary: #8a130a;
  --csms-studio-tx-coursemos-secondary: #6e0f08;
  --csms-studio-tx-coursemos-tertiary: #530b06;
  --csms-studio-tx-coursemos-quaternary: #f1afb6;
  --csms-studio-tx-coursemos-quinary: #f8d7da;
  --csms-studio-tx-coursemos-senary: #fbebed;
  --csms-studio-tx-coursemos-primary-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-tx-semantic-nega-primary: #f04438;
  --csms-studio-tx-semantic-nega-secondary: #dc1e11;
  --csms-studio-tx-semantic-nega-tertiary: #c11a0e;
  --csms-studio-tx-semantic-nega-quaternary: #8a130a;
  --csms-studio-tx-semantic-nega-quinary: #530b06;
  --csms-studio-tx-semantic-nega-senary: #fbebed;
  --csms-studio-tx-semantic-info-primary: #1181f9;
  --csms-studio-tx-semantic-info-secondary: #0673e7;
  --csms-studio-tx-semantic-info-tertiary: #0564ca;
  --csms-studio-tx-semantic-info-quaternary: #044890;
  --csms-studio-tx-semantic-info-quinary: #033973;
  --csms-studio-tx-semantic-info-senary: #e0eefe;
  --csms-studio-tx-semantic-posi-primary: #1ea465;
  --csms-studio-tx-semantic-posi-secondary: #188351;
  --csms-studio-tx-semantic-posi-tertiary: #157347;
  --csms-studio-tx-semantic-posi-quaternary: #0f5233;
  --csms-studio-tx-semantic-posi-quinary: #09311e;
  --csms-studio-tx-semantic-posi-senary: #e4faf0;
  --csms-studio-tx-semantic-noti-primary: #ffc107;
  --csms-studio-tx-semantic-prog-primary: #fd7e14;
  --csms-studio-tx-semantic-etc-primary: #6f42c1;
  --csms-studio-bo-hierarchy-primary: #eeeff0;
  --csms-studio-bo-hierarchy-secondary: #e0e3e5;
  --csms-studio-bo-hierarchy-tertiary: #d3d6d9;
  --csms-studio-bo-hierarchy-quaternary: #c4c8cc;
  --csms-studio-bo-hierarchy-quaternary-subtle: #6d767e;
  --csms-studio-bo-hierarchy-quinary: #41474b;
  --csms-studio-bo-hierarchy-senary: #161819;
  --csms-studio-bo-neutral-white: #ffffff;
  --csms-studio-bo-neutral-black: #000000;
  --csms-studio-bo-neutral-white-solid: #ffffff;
  --csms-studio-bo-neutral-black-solid: #000000;
  --csms-studio-bo-neutral-b30p: rgba(0, 0, 0, 0.3);
  --csms-studio-bo-coursemos-primary: #c11a0e;
  --csms-studio-bo-coursemos-secondary: #a5170c;
  --csms-studio-bo-coursemos-tertiary: #8a130a;
  --csms-studio-bo-coursemos-quaternary: #f1afb6;
  --csms-studio-bo-coursemos-quinary: #f8d7da;
  --csms-studio-bo-coursemos-senary: #f7e8ea;
  --csms-studio-bo-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bo-semantic-nega-primary: #f04438;
  --csms-studio-bo-semantic-nega-secondary: #dc1e11;
  --csms-studio-bo-semantic-nega-tertiary: #c11a0e;
  --csms-studio-bo-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bo-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-bo-semantic-info-primary: #1181f9;
  --csms-studio-bo-semantic-info-secondary: #1181f9;
  --csms-studio-bo-semantic-info-tertiary: #1181f9;
  --csms-studio-bo-semantic-info-quaternary: #1181f9;
  --csms-studio-bo-semantic-info-quinary: #1181f9;
  --csms-studio-bo-semantic-info-senary: #1181f9;
  --csms-studio-bo-semantic-info-40p: rgba(17, 129, 249, 0.4);
  --csms-studio-bo-semantic-posi-primary: #1ea465;
  --csms-studio-bo-semantic-posi-secondary: #188351;
  --csms-studio-bo-semantic-posi-tertiary: #157347;
  --csms-studio-bo-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bo-semantic-warn-primary: #ffc107;
  --csms-studio-bo-semantic-noti-primary: #ffc107;
  --csms-studio-bo-semantic-prog-primary: #fd7e14;
  --csms-studio-bo-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-hierarchy-primary: #fcfcfc;
  --csms-studio-bg-hierarchy-primary-subtle: #f5f5f5;
  --csms-studio-bg-hierarchy-secondary: #f0f1f2;
  --csms-studio-bg-hierarchy-secondary-subtle: #eeeff0;
  --csms-studio-bg-hierarchy-tertiary: #e0e3e5;
  --csms-studio-bg-hierarchy-quaternary: #d3d6d9;
  --csms-studio-bg-hierarchy-quinary: #899199;
  --csms-studio-bg-hierarchy-senary: #6d767e;
  --csms-studio-bg-hierarchy-senary-subtle: #575e64;
  --csms-studio-bg-neutral-white: #ffffff;
  --csms-studio-bg-neutral-black: #000000;
  --csms-studio-bg-neutral-white-solid: #ffffff;
  --csms-studio-bg-neutral-black-solid: #000000;
  --csms-studio-bg-neutral-b6p-hovered: rgba(0, 0, 0, 0.06);
  --csms-studio-bg-neutral-b10p: rgba(0, 0, 0, 0.1);
  --csms-studio-bg-neutral-b15p: rgba(0, 0, 0, 0.15);
  --csms-studio-bg-neutral-b60p: rgba(0, 0, 0, 0.6);
  --csms-studio-bg-neutral-b80p: rgba(0, 0, 0, 0.8);
  --csms-studio-bg-neutral-w90p: rgba(255, 255, 255, 0.9);
  --csms-studio-bg-neutral-w50p: rgba(255, 255, 255, 0.5);
  --csms-studio-bg-neutral-w30p: rgba(255, 255, 255, 0.3);
  --csms-studio-bg-neutral-w20p: rgba(255, 255, 255, 0.2);
  --csms-studio-bg-neutral-w5p: rgba(255, 255, 255, 0.05);
  --csms-studio-bg-neutral-w1p: rgba(255, 255, 255, 0.01);
  --csms-studio-bg-coursemos-primary: #0075F8;
  --csms-studio-bg-coursemos-secondary: #1582FF;
  --csms-studio-bg-coursemos-tertiary: #2F90FF;
  --csms-studio-bg-coursemos-quaternary: #004696;
  --csms-studio-bg-coursemos-quinary: #002F64;
  --csms-studio-bg-coursemos-quinary-subtle: #001732;
  --csms-studio-bg-coursemos-senary: #00234B;
  --csms-studio-bg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bg-semantic-nega-primary: #f04438;
  --csms-studio-bg-semantic-nega-secondary: #dc1e11;
  --csms-studio-bg-semantic-nega-tertiary: #c11a0e;
  --csms-studio-bg-semantic-nega-quaternary: #ea8791;
  --csms-studio-bg-semantic-nega-quinary: #f8d7da;
  --csms-studio-bg-semantic-nega-senary: #fbebed;
  --csms-studio-bg-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bg-semantic-info-primary: #1181f9;
  --csms-studio-bg-semantic-info-secondary: #0564ca;
  --csms-studio-bg-semantic-info-tertiary: #0456ad;
  --csms-studio-bg-semantic-info-quaternary: #c0defd;
  --csms-studio-bg-semantic-info-quinary: #d5e9fe;
  --csms-studio-bg-semantic-info-senary: #e0eefe;
  --csms-studio-bg-semantic-info-senary-subtle: #eaf4fe;
  --csms-studio-bg-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bg-semantic-posi-primary: #1ea465;
  --csms-studio-bg-semantic-posi-secondary: #188351;
  --csms-studio-bg-semantic-posi-tertiary: #157347;
  --csms-studio-bg-semantic-posi-quaternary: #5fe2a5;
  --csms-studio-bg-semantic-posi-quinary: #caf5e1;
  --csms-studio-bg-semantic-posi-senary: #e4faf0;
  --csms-studio-bg-semantic-posi-30p: rgba(30, 164, 101, 0.3);
  --csms-studio-bg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-posi-50p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-warn-primary: #ffc107;
  --csms-studio-bg-semantic-warn-secondary: #d09c00;
  --csms-studio-bg-semantic-warn-tertiary: #9c7500;
  --csms-studio-bg-semantic-warn-quaternary: #ffda69;
  --csms-studio-bg-semantic-warn-quinary: #fff3cd;
  --csms-studio-bg-semantic-warn-senary: #fff9e6;
  --csms-studio-bg-semantic-prog-primary: #fd7e14;
  --csms-studio-bg-semantic-prog-secondary: #d54d03;
  --csms-studio-bg-semantic-prog-tertiary: #ba4303;
  --csms-studio-bg-semantic-prog-quaternary: #fda271;
  --csms-studio-bg-semantic-prog-quinary: #fee0d0;
  --csms-studio-bg-semantic-prog-senary: #fff0e7;
  --csms-studio-bg-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-semantic-etc-secondary: #58339d;
  --csms-studio-bg-semantic-etc-tertiary: #4d2d89;
  --csms-studio-bg-semantic-etc-quaternary: #a98eda;
  --csms-studio-bg-semantic-etc-quinary: #e2d9f3;
  --csms-studio-bg-semantic-etc-senary: #f1ecf9;
  --csms-studio-fg-hierarchy-primary: #161819;
  --csms-studio-fg-hierarchy-secondary: #2c2f32;
  --csms-studio-fg-hierarchy-tertiary: #575e64;
  --csms-studio-fg-hierarchy-quaternary: #6d767e;
  --csms-studio-fg-hierarchy-quinary: #899199;
  --csms-studio-fg-hierarchy-senary: #c4c8cc;
  --csms-studio-fg-hierarchy-senary-subtle: #e0e3e5;
  --csms-studio-fg-neutral-white: #ffffff;
  --csms-studio-fg-neutral-black: #000000;
  --csms-studio-fg-neutral-white-solid: #ffffff;
  --csms-studio-fg-neutral-black-solid: #000000;
  --csms-studio-fg-neutral-w50p-solid: rgba(255, 255, 255, 0.5);
  --csms-studio-fg-neutral-w80p-solid: rgba(255, 255, 255, 0.8);
  --csms-studio-fg-coursemos-primary: #f04438;
  --csms-studio-fg-coursemos-secondary: #dc1e11;
  --csms-studio-fg-coursemos-tertiary: #c11a0e;
  --csms-studio-fg-coursemos-quaternary: #e35f6d;
  --csms-studio-fg-coursemos-quinary: #f8d7da;
  --csms-studio-fg-coursemos-senary: #fbebed;
  --csms-studio-fg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-fg-coursemos-primary-50p: rgba(0, 117, 248, 0.5);
  --csms-studio-fg-semantic-nega: #f04438;
  --csms-studio-fg-semantic-nega-quinary: #530b06;
  --csms-studio-fg-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-warn-primary: #ffc107;
  --csms-studio-fg-semantic-warn-senary: #ffda69;
  --csms-studio-fg-semantic-posi: #1ea465;
  --csms-studio-fg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-fg-semantic-info: #1181f9;
  --csms-studio-fg-semantic-prog: #fd7e14;
  --csms-studio-fg-semantic-etc: #6f42c1;
  --csms-studio-ut-school-primary: #a5170c;
  --csms-studio-ut-school-secondary: #ea8791;
}

[data-bs-theme=dark] {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-primary {
  color: #e0e3e5;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-secondary {
  color: #c4c8cc;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-tertiary {
  color: #899199;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-quinary {
  color: #575e64;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-senary {
  color: #41474b;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-senary-subtle {
  color: #2c2f32;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-white {
  color: #000000;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-black {
  color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-black-solid {
  color: #000000;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-b20p-disabled {
  color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark] .csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-primary {
  color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-secondary {
  color: #2F90FF;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-tertiary {
  color: #499EFF;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-quaternary {
  color: #004696;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-quinary {
  color: #002F64;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-senary {
  color: #00234B;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 93, 200, 0.4);
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-secondary {
  color: #e35f6d;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-tertiary {
  color: #e6737f;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-quaternary {
  color: #c11a0e;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-quinary {
  color: #8a130a;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-senary {
  color: #530b06;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-primary {
  color: #439cfa;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-secondary {
  color: #58a7fb;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-tertiary {
  color: #6db2fb;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-quaternary {
  color: #044890;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-quinary {
  color: #033973;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-senary {
  color: #022b57;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-secondary {
  color: #29d886;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-tertiary {
  color: #44dd95;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-quaternary {
  color: #157347;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-quinary {
  color: #0f5233;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-senary {
  color: #09311e;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-primary {
  border-color: #1f2124;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-secondary {
  border-color: #2c2f32;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-tertiary {
  border-color: #373b3f;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-quaternary {
  border-color: #41474b;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-quinary {
  border-color: #a7adb2;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-senary {
  border-color: #e0e3e5;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-white {
  border-color: #000000;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-black {
  border-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-b30p {
  border-color: rgba(255, 255, 255, 0.3);
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-secondary {
  border-color: #2F90FF;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-tertiary {
  border-color: #499EFF;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-quaternary {
  border-color: #003A7D;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-quinary {
  border-color: #00234B;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-senary {
  border-color: #001732;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-secondary {
  border-color: #e35f6d;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-tertiary {
  border-color: #e6737f;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-primary {
  border-color: #439cfa;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-secondary {
  border-color: #58a7fb;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-tertiary {
  border-color: #6db2fb;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-quaternary {
  border-color: #044890;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-quinary {
  border-color: #033973;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-senary {
  border-color: #022b57;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-posi-secondary {
  border-color: #29d886;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-posi-tertiary {
  border-color: #44dd95;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-primary {
  background-color: #0b0c0d;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-primary-subtle {
  background-color: #1f2124;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-secondary {
  background-color: #212326;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #232629;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-tertiary {
  background-color: #2c2f32;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-quaternary {
  background-color: #373b3f;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-quinary {
  background-color: #575e64;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-senary-subtle {
  background-color: #899199;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-white {
  background-color: #000000;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-black {
  background-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(255, 255, 255, 0.06);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b10p {
  background-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b15p {
  background-color: rgba(255, 255, 255, 0.15);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b60p {
  background-color: rgba(255, 255, 255, 0.6);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b80p {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w90p {
  background-color: rgba(0, 0, 0, 0.85);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w50p {
  background-color: rgba(0, 0, 0, 0.5);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w30p {
  background-color: rgba(0, 0, 0, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w20p {
  background-color: rgba(0, 0, 0, 0.2);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w5p {
  background-color: rgba(0, 0, 0, 0.05);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w1p {
  background-color: rgba(0, 0, 0, 0.01);
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-secondary {
  background-color: #1582FF;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-tertiary {
  background-color: #2F90FF;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-quaternary {
  background-color: #004696;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-quinary {
  background-color: #002F64;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-quinary-subtle {
  background-color: #001732;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-senary {
  background-color: #00234B;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-secondary {
  background-color: #e35f6d;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-tertiary {
  background-color: #e6737f;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-quaternary {
  background-color: #a5170c;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-quinary {
  background-color: #6e0f08;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-senary {
  background-color: #530b06;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-tertiary {
  background-color: #82bdfc;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-quaternary {
  background-color: #044890;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-quinary {
  background-color: #022b57;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-senary {
  background-color: #011d3a;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-senary-subtle {
  background-color: #010e1d;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-secondary {
  background-color: #29d886;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-tertiary {
  background-color: #44dd95;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-quaternary {
  background-color: #12623d;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-quinary {
  background-color: #0c4229;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-senary {
  background-color: #09311e;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.5);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-secondary {
  background-color: #ffcd37;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-tertiary {
  background-color: #ffda69;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-quaternary {
  background-color: #9c7500;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-quinary {
  background-color: #684e00;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #826200;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-senary {
  background-color: #4e3b00;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-secondary {
  background-color: #fc8342;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-tertiary {
  background-color: #fc935a;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-quaternary {
  background-color: #a03902;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-quinary {
  background-color: #6a2602;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-senary {
  background-color: #501d01;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-secondary {
  background-color: #8c68ce;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-tertiary {
  background-color: #9a7bd4;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-quaternary {
  background-color: #422676;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-quinary {
  background-color: #2c194f;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-senary {
  background-color: #21133b;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-primary {
  background-color: #e0e3e5;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-secondary {
  background-color: #c4c8cc;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-tertiary {
  background-color: #899199;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-quinary {
  background-color: #575e64;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-senary {
  background-color: #2c2f32;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-senary-subtle {
  background-color: #161819;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-white {
  background-color: #000000;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-black {
  background-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}
[data-bs-theme=dark] .csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-secondary {
  background-color: #2F90FF;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-tertiary {
  background-color: #499EFF;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-quaternary {
  background-color: #005DC8;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-quinary {
  background-color: #002F64;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-senary {
  background-color: #00234B;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}
[data-bs-theme=dark] .csms-studio-fg-semantic-nega {
  background-color: #f04438;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-nega-quinary {
  background-color: #8a130a;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark] .csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-warn-senary {
  background-color: #9c7500;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark] .csms-studio-fg-semantic-info {
  background-color: #1181f9;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}
[data-bs-theme=dark] .csms-studio-ut-school-primary {
  background-color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-ut-school-secondary {
  background-color: #005DC8;
}
[data-bs-theme=dark] .csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}
[data-bs-theme=dark] .csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}
[data-bs-theme=dark] .csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}
[data-bs-theme=dark] .csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}
[data-bs-theme=dark] .csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}
[data-bs-theme=dark] .csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}
[data-bs-theme=dark] .csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}
[data-bs-theme=dark] {
  --csms-studio-tx-hierarchy-primary: #e0e3e5;
  --csms-studio-tx-hierarchy-secondary: #c4c8cc;
  --csms-studio-tx-hierarchy-tertiary: #899199;
  --csms-studio-tx-hierarchy-quaternary: #6d767e;
  --csms-studio-tx-hierarchy-quinary: #575e64;
  --csms-studio-tx-hierarchy-senary: #41474b;
  --csms-studio-tx-hierarchy-senary-subtle: #2c2f32;
  --csms-studio-tx-neutral-white: #000000;
  --csms-studio-tx-neutral-black: #ffffff;
  --csms-studio-tx-neutral-black-solid: #000000;
  --csms-studio-tx-neutral-white-solid: #ffffff;
  --csms-studio-tx-neutral-b20p-disabled: rgba(255, 255, 255, 0.2);
  --csms-studio-tx-neutral-w80p-disabled: rgba(255, 255, 255, 0.2);
  --csms-studio-tx-coursemos-primary: #0075F8;
  --csms-studio-tx-coursemos-secondary: #2F90FF;
  --csms-studio-tx-coursemos-tertiary: #499EFF;
  --csms-studio-tx-coursemos-quaternary: #004696;
  --csms-studio-tx-coursemos-quinary: #002F64;
  --csms-studio-tx-coursemos-senary: #00234B;
  --csms-studio-tx-coursemos-primary-30p: rgba(0, 93, 200, 0.4);
  --csms-studio-tx-semantic-nega-primary: #f04438;
  --csms-studio-tx-semantic-nega-secondary: #e35f6d;
  --csms-studio-tx-semantic-nega-tertiary: #e6737f;
  --csms-studio-tx-semantic-nega-quaternary: #c11a0e;
  --csms-studio-tx-semantic-nega-quinary: #8a130a;
  --csms-studio-tx-semantic-nega-senary: #530b06;
  --csms-studio-tx-semantic-info-primary: #439cfa;
  --csms-studio-tx-semantic-info-secondary: #58a7fb;
  --csms-studio-tx-semantic-info-tertiary: #6db2fb;
  --csms-studio-tx-semantic-info-quaternary: #044890;
  --csms-studio-tx-semantic-info-quinary: #033973;
  --csms-studio-tx-semantic-info-senary: #022b57;
  --csms-studio-tx-semantic-posi-primary: #1ea465;
  --csms-studio-tx-semantic-posi-secondary: #29d886;
  --csms-studio-tx-semantic-posi-tertiary: #44dd95;
  --csms-studio-tx-semantic-posi-quaternary: #157347;
  --csms-studio-tx-semantic-posi-quinary: #0f5233;
  --csms-studio-tx-semantic-posi-senary: #09311e;
  --csms-studio-tx-semantic-noti-primary: #ffc107;
  --csms-studio-tx-semantic-prog-primary: #fd7e14;
  --csms-studio-tx-semantic-etc-primary: #6f42c1;
  --csms-studio-bo-hierarchy-primary: #1f2124;
  --csms-studio-bo-hierarchy-secondary: #2c2f32;
  --csms-studio-bo-hierarchy-tertiary: #373b3f;
  --csms-studio-bo-hierarchy-quaternary: #41474b;
  --csms-studio-bo-hierarchy-quaternary-subtle: #6d767e;
  --csms-studio-bo-hierarchy-quinary: #a7adb2;
  --csms-studio-bo-hierarchy-senary: #e0e3e5;
  --csms-studio-bo-neutral-white: #000000;
  --csms-studio-bo-neutral-black: #ffffff;
  --csms-studio-bo-neutral-white-solid: #ffffff;
  --csms-studio-bo-neutral-black-solid: #000000;
  --csms-studio-bo-neutral-b30p: rgba(255, 255, 255, 0.3);
  --csms-studio-bo-coursemos-primary: #0075F8;
  --csms-studio-bo-coursemos-secondary: #2F90FF;
  --csms-studio-bo-coursemos-tertiary: #499EFF;
  --csms-studio-bo-coursemos-quaternary: #003A7D;
  --csms-studio-bo-coursemos-quinary: #00234B;
  --csms-studio-bo-coursemos-senary: #001732;
  --csms-studio-bo-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bo-semantic-nega-primary: #f04438;
  --csms-studio-bo-semantic-nega-secondary: #e35f6d;
  --csms-studio-bo-semantic-nega-tertiary: #e6737f;
  --csms-studio-bo-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bo-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-bo-semantic-info-primary: #439cfa;
  --csms-studio-bo-semantic-info-secondary: #58a7fb;
  --csms-studio-bo-semantic-info-tertiary: #6db2fb;
  --csms-studio-bo-semantic-info-quaternary: #044890;
  --csms-studio-bo-semantic-info-quinary: #033973;
  --csms-studio-bo-semantic-info-senary: #022b57;
  --csms-studio-bo-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bo-semantic-info-40p: rgba(17, 129, 249, 0.4);
  --csms-studio-bo-semantic-posi-primary: #1ea465;
  --csms-studio-bo-semantic-posi-secondary: #29d886;
  --csms-studio-bo-semantic-posi-tertiary: #44dd95;
  --csms-studio-bo-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bo-semantic-warn-primary: #ffc107;
  --csms-studio-bo-semantic-noti-primary: #ffc107;
  --csms-studio-bo-semantic-prog-primary: #fd7e14;
  --csms-studio-bo-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-hierarchy-primary: #0b0c0d;
  --csms-studio-bg-hierarchy-primary-subtle: #1f2124;
  --csms-studio-bg-hierarchy-secondary: #212326;
  --csms-studio-bg-hierarchy-secondary-subtle: #232629;
  --csms-studio-bg-hierarchy-tertiary: #2c2f32;
  --csms-studio-bg-hierarchy-quaternary: #373b3f;
  --csms-studio-bg-hierarchy-quinary: #575e64;
  --csms-studio-bg-hierarchy-senary: #6d767e;
  --csms-studio-bg-hierarchy-senary-subtle: #899199;
  --csms-studio-bg-neutral-white: #000000;
  --csms-studio-bg-neutral-black: #ffffff;
  --csms-studio-bg-neutral-white-solid: #ffffff;
  --csms-studio-bg-neutral-black-solid: #000000;
  --csms-studio-bg-neutral-b6p-hovered: rgba(255, 255, 255, 0.06);
  --csms-studio-bg-neutral-b10p: rgba(255, 255, 255, 0.1);
  --csms-studio-bg-neutral-b15p: rgba(255, 255, 255, 0.15);
  --csms-studio-bg-neutral-b60p: rgba(255, 255, 255, 0.6);
  --csms-studio-bg-neutral-b80p: rgba(255, 255, 255, 0.8);
  --csms-studio-bg-neutral-w90p: rgba(0, 0, 0, 0.85);
  --csms-studio-bg-neutral-w50p: rgba(0, 0, 0, 0.5);
  --csms-studio-bg-neutral-w30p: rgba(0, 0, 0, 0.3);
  --csms-studio-bg-neutral-w20p: rgba(0, 0, 0, 0.2);
  --csms-studio-bg-neutral-w5p: rgba(0, 0, 0, 0.05);
  --csms-studio-bg-neutral-w1p: rgba(0, 0, 0, 0.01);
  --csms-studio-bg-coursemos-primary: #0075F8;
  --csms-studio-bg-coursemos-secondary: #1582FF;
  --csms-studio-bg-coursemos-tertiary: #2F90FF;
  --csms-studio-bg-coursemos-quaternary: #004696;
  --csms-studio-bg-coursemos-quinary: #002F64;
  --csms-studio-bg-coursemos-quinary-subtle: #001732;
  --csms-studio-bg-coursemos-senary: #00234B;
  --csms-studio-bg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bg-semantic-nega-primary: #f04438;
  --csms-studio-bg-semantic-nega-secondary: #e35f6d;
  --csms-studio-bg-semantic-nega-tertiary: #e6737f;
  --csms-studio-bg-semantic-nega-quaternary: #a5170c;
  --csms-studio-bg-semantic-nega-quinary: #6e0f08;
  --csms-studio-bg-semantic-nega-senary: #530b06;
  --csms-studio-bg-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bg-semantic-info-primary: #1181f9;
  --csms-studio-bg-semantic-info-secondary: #6db2fb;
  --csms-studio-bg-semantic-info-tertiary: #82bdfc;
  --csms-studio-bg-semantic-info-quaternary: #044890;
  --csms-studio-bg-semantic-info-quinary: #022b57;
  --csms-studio-bg-semantic-info-senary: #011d3a;
  --csms-studio-bg-semantic-info-senary-subtle: #010e1d;
  --csms-studio-bg-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bg-semantic-posi-primary: #1ea465;
  --csms-studio-bg-semantic-posi-secondary: #29d886;
  --csms-studio-bg-semantic-posi-tertiary: #44dd95;
  --csms-studio-bg-semantic-posi-quaternary: #12623d;
  --csms-studio-bg-semantic-posi-quinary: #0c4229;
  --csms-studio-bg-semantic-posi-senary: #09311e;
  --csms-studio-bg-semantic-posi-30p: rgba(30, 164, 101, 0.3);
  --csms-studio-bg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-posi-50p: rgba(30, 164, 101, 0.5);
  --csms-studio-bg-semantic-warn-primary: #ffc107;
  --csms-studio-bg-semantic-warn-secondary: #ffcd37;
  --csms-studio-bg-semantic-warn-tertiary: #ffda69;
  --csms-studio-bg-semantic-warn-quaternary: #9c7500;
  --csms-studio-bg-semantic-warn-quinary: #684e00;
  --csms-studio-bg-semantic-warn-quinary-subtle: #826200;
  --csms-studio-bg-semantic-warn-senary: #4e3b00;
  --csms-studio-bg-semantic-prog-primary: #fd7e14;
  --csms-studio-bg-semantic-prog-secondary: #fc8342;
  --csms-studio-bg-semantic-prog-tertiary: #fc935a;
  --csms-studio-bg-semantic-prog-quaternary: #a03902;
  --csms-studio-bg-semantic-prog-quinary: #6a2602;
  --csms-studio-bg-semantic-prog-senary: #501d01;
  --csms-studio-bg-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-semantic-etc-secondary: #8c68ce;
  --csms-studio-bg-semantic-etc-tertiary: #9a7bd4;
  --csms-studio-bg-semantic-etc-quaternary: #422676;
  --csms-studio-bg-semantic-etc-quinary: #2c194f;
  --csms-studio-bg-semantic-etc-senary: #21133b;
  --csms-studio-fg-hierarchy-primary: #e0e3e5;
  --csms-studio-fg-hierarchy-secondary: #c4c8cc;
  --csms-studio-fg-hierarchy-tertiary: #899199;
  --csms-studio-fg-hierarchy-quaternary: #6d767e;
  --csms-studio-fg-hierarchy-quinary: #575e64;
  --csms-studio-fg-hierarchy-senary: #2c2f32;
  --csms-studio-fg-hierarchy-senary-subtle: #161819;
  --csms-studio-fg-neutral-white: #000000;
  --csms-studio-fg-neutral-black: #ffffff;
  --csms-studio-fg-neutral-white-solid: #ffffff;
  --csms-studio-fg-neutral-black-solid: #000000;
  --csms-studio-fg-neutral-w50p-solid: rgba(255, 255, 255, 0.5);
  --csms-studio-fg-neutral-w80p-solid: rgba(255, 255, 255, 0.8);
  --csms-studio-fg-coursemos-primary: #0075F8;
  --csms-studio-fg-coursemos-secondary: #2F90FF;
  --csms-studio-fg-coursemos-tertiary: #499EFF;
  --csms-studio-fg-coursemos-quaternary: #005DC8;
  --csms-studio-fg-coursemos-quinary: #002F64;
  --csms-studio-fg-coursemos-senary: #00234B;
  --csms-studio-fg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-fg-coursemos-primary-50p: rgba(0, 117, 248, 0.5);
  --csms-studio-fg-semantic-nega: #f04438;
  --csms-studio-fg-semantic-nega-quinary: #8a130a;
  --csms-studio-fg-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-warn-primary: #ffc107;
  --csms-studio-fg-semantic-warn-senary: #9c7500;
  --csms-studio-fg-semantic-posi: #1ea465;
  --csms-studio-fg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-fg-semantic-info: #1181f9;
  --csms-studio-fg-semantic-prog: #fd7e14;
  --csms-studio-fg-semantic-etc: #6f42c1;
  --csms-studio-ut-school-primary: #0075F8;
  --csms-studio-ut-school-secondary: #005DC8;
}

[data-bs-theme=dark-red] {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  --bs-body-color: #adb5bd;
  --bs-body-color-rgb: 173, 181, 189;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(255, 255, 255, 0.75);
  --bs-secondary-color-rgb: 255, 255, 255;
  --bs-secondary-bg: rgba(255, 255, 255, 0.15);
  --bs-secondary-bg-rgb: 255, 255, 255;
  --bs-tertiary-color: rgba(255, 255, 255, 0.5);
  --bs-tertiary-color-rgb: 255, 255, 255;
  --bs-tertiary-bg: rgba(255, 255, 255, 0.1);
  --bs-tertiary-bg-rgb: 255, 255, 255;
  --bs-heading-color: #fff;
  --bs-link-color: #86b7fe;
  --bs-link-hover-color: #9ec5fe;
  --bs-link-color-rgb: 134, 183, 254;
  --bs-link-hover-color-rgb: 158, 197, 254;
  --bs-code-color: #e685b5;
  --bs-highlight-color: #fff;
  --bs-highlight-bg: #664d03;
  --bs-border-color: rgba(255, 255, 255, 0.2);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-primary {
  color: #e0e3e5;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-secondary {
  color: #c4c8cc;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-tertiary {
  color: #899199;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-quinary {
  color: #575e64;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-senary {
  color: #41474b;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-senary-subtle {
  color: #2c2f32;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-white {
  color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-black {
  color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-black-solid {
  color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-b20p-disabled {
  color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-primary {
  color: #ed9ba4;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-secondary {
  color: #f1afb6;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-tertiary {
  color: #f4c3c8;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-quaternary {
  color: #6e0f08;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-quinary {
  color: #370804;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-senary {
  color: #290603;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-primary-30p {
  color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-secondary {
  color: #e35f6d;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-tertiary {
  color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-quaternary {
  color: #c11a0e;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-quinary {
  color: #8a130a;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-senary {
  color: #530b06;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-primary {
  color: #439cfa;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-secondary {
  color: #58a7fb;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-tertiary {
  color: #6db2fb;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-quaternary {
  color: #044890;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-quinary {
  color: #033973;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-senary {
  color: #022b57;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-secondary {
  color: #29d886;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-tertiary {
  color: #44dd95;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-quaternary {
  color: #157347;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-quinary {
  color: #0f5233;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-senary {
  color: #09311e;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-primary {
  border-color: #1f2124;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-secondary {
  border-color: #2c2f32;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-tertiary {
  border-color: #373b3f;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-quaternary {
  border-color: #41474b;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-quinary {
  border-color: #a7adb2;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-senary {
  border-color: #e0e3e5;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-white {
  border-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-black {
  border-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-b30p {
  border-color: rgba(255, 255, 255, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-primary {
  border-color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-secondary {
  border-color: #ea8791;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-tertiary {
  border-color: #ed9ba4;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-quaternary {
  border-color: #6e0f08;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-quinary {
  border-color: #370804;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-senary {
  border-color: #290603;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-secondary {
  border-color: #e35f6d;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-tertiary {
  border-color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-primary {
  border-color: #439cfa;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-secondary {
  border-color: #58a7fb;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-tertiary {
  border-color: #6db2fb;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-quaternary {
  border-color: #044890;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-quinary {
  border-color: #033973;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-senary {
  border-color: #022b57;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-posi-secondary {
  border-color: #29d886;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-posi-tertiary {
  border-color: #44dd95;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-primary {
  background-color: #0b0c0d;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-primary-subtle {
  background-color: #1f2124;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-secondary {
  background-color: #212326;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #232629;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-tertiary {
  background-color: #2c2f32;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-quaternary {
  background-color: #373b3f;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-quinary {
  background-color: #575e64;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-senary-subtle {
  background-color: #899199;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-white {
  background-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-black {
  background-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(255, 255, 255, 0.06);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b10p {
  background-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b15p {
  background-color: rgba(255, 255, 255, 0.15);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b60p {
  background-color: rgba(255, 255, 255, 0.6);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b80p {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w90p {
  background-color: rgba(0, 0, 0, 0.85);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w50p {
  background-color: rgba(0, 0, 0, 0.5);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w30p {
  background-color: rgba(0, 0, 0, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w20p {
  background-color: rgba(0, 0, 0, 0.2);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w5p {
  background-color: rgba(0, 0, 0, 0.05);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w1p {
  background-color: rgba(0, 0, 0, 0.01);
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-secondary {
  background-color: #1582FF;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-tertiary {
  background-color: #2F90FF;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-quaternary {
  background-color: #004696;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-quinary {
  background-color: #002F64;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-quinary-subtle {
  background-color: #001732;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-senary {
  background-color: #00234B;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-secondary {
  background-color: #e35f6d;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-tertiary {
  background-color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-quaternary {
  background-color: #a5170c;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-quinary {
  background-color: #6e0f08;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-senary {
  background-color: #530b06;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-primary {
  background-color: #2e91fa;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-tertiary {
  background-color: #82bdfc;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-quaternary {
  background-color: #033973;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-quinary {
  background-color: #022b57;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-senary {
  background-color: #011d3a;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-senary-subtle {
  background-color: #010e1d;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-secondary {
  background-color: #29d886;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-tertiary {
  background-color: #44dd95;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-quaternary {
  background-color: #12623d;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-quinary {
  background-color: #0c4229;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-senary {
  background-color: #09311e;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.5);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-secondary {
  background-color: #ffcd37;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-tertiary {
  background-color: #ffda69;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-quaternary {
  background-color: #9c7500;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-quinary {
  background-color: #684e00;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-senary {
  background-color: #4e3b00;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-secondary {
  background-color: #fc8342;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-tertiary {
  background-color: #fc935a;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-quaternary {
  background-color: #a03902;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-quinary {
  background-color: #6a2602;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-senary {
  background-color: #501d01;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-secondary {
  background-color: #8c68ce;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-tertiary {
  background-color: #9a7bd4;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-quaternary {
  background-color: #422676;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-quinary {
  background-color: #2c194f;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-senary {
  background-color: #21133b;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-primary {
  background-color: #e0e3e5;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-secondary {
  background-color: #c4c8cc;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-tertiary {
  background-color: #899199;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-quinary {
  background-color: #575e64;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-senary {
  background-color: #2c2f32;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-senary-subtle {
  background-color: #161819;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-white {
  background-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-black {
  background-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-primary {
  background-color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-secondary {
  background-color: #e35f6d;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-tertiary {
  background-color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-quaternary {
  background-color: #dc1e11;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-quinary {
  background-color: #6e0f08;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-senary {
  background-color: #530b06;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-nega {
  background-color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-nega-quinary {
  background-color: #8a130a;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-warn-senary {
  background-color: #9c7500;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.6);
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-info {
  background-color: #1181f9;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}
[data-bs-theme=dark-red] .csms-studio-ut-school-primary {
  background-color: #a5170c;
}
[data-bs-theme=dark-red] .csms-studio-ut-school-secondary {
  background-color: #a5170c;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}
[data-bs-theme=dark-red] {
  --csms-studio-tx-hierarchy-primary: #e0e3e5;
  --csms-studio-tx-hierarchy-secondary: #c4c8cc;
  --csms-studio-tx-hierarchy-tertiary: #899199;
  --csms-studio-tx-hierarchy-quaternary: #6d767e;
  --csms-studio-tx-hierarchy-quinary: #575e64;
  --csms-studio-tx-hierarchy-senary: #41474b;
  --csms-studio-tx-hierarchy-senary-subtle: #2c2f32;
  --csms-studio-tx-neutral-white: #000000;
  --csms-studio-tx-neutral-black: #ffffff;
  --csms-studio-tx-neutral-black-solid: #000000;
  --csms-studio-tx-neutral-white-solid: #ffffff;
  --csms-studio-tx-neutral-b20p-disabled: rgba(255, 255, 255, 0.2);
  --csms-studio-tx-neutral-w80p-disabled: rgba(255, 255, 255, 0.2);
  --csms-studio-tx-coursemos-primary: #ed9ba4;
  --csms-studio-tx-coursemos-secondary: #f1afb6;
  --csms-studio-tx-coursemos-tertiary: #f4c3c8;
  --csms-studio-tx-coursemos-quaternary: #6e0f08;
  --csms-studio-tx-coursemos-quinary: #370804;
  --csms-studio-tx-coursemos-senary: #290603;
  --csms-studio-tx-coursemos-primary-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-tx-semantic-nega-primary: #f04438;
  --csms-studio-tx-semantic-nega-secondary: #e35f6d;
  --csms-studio-tx-semantic-nega-tertiary: #e6737f;
  --csms-studio-tx-semantic-nega-quaternary: #c11a0e;
  --csms-studio-tx-semantic-nega-quinary: #8a130a;
  --csms-studio-tx-semantic-nega-senary: #530b06;
  --csms-studio-tx-semantic-info-primary: #439cfa;
  --csms-studio-tx-semantic-info-secondary: #58a7fb;
  --csms-studio-tx-semantic-info-tertiary: #6db2fb;
  --csms-studio-tx-semantic-info-quaternary: #044890;
  --csms-studio-tx-semantic-info-quinary: #033973;
  --csms-studio-tx-semantic-info-senary: #022b57;
  --csms-studio-tx-semantic-posi-primary: #1ea465;
  --csms-studio-tx-semantic-posi-secondary: #29d886;
  --csms-studio-tx-semantic-posi-tertiary: #44dd95;
  --csms-studio-tx-semantic-posi-quaternary: #157347;
  --csms-studio-tx-semantic-posi-quinary: #0f5233;
  --csms-studio-tx-semantic-posi-senary: #09311e;
  --csms-studio-tx-semantic-noti-primary: #ffc107;
  --csms-studio-tx-semantic-prog-primary: #fd7e14;
  --csms-studio-tx-semantic-etc-primary: #6f42c1;
  --csms-studio-bo-hierarchy-primary: #1f2124;
  --csms-studio-bo-hierarchy-secondary: #2c2f32;
  --csms-studio-bo-hierarchy-tertiary: #373b3f;
  --csms-studio-bo-hierarchy-quaternary: #41474b;
  --csms-studio-bo-hierarchy-quaternary-subtle: #6d767e;
  --csms-studio-bo-hierarchy-quinary: #a7adb2;
  --csms-studio-bo-hierarchy-senary: #e0e3e5;
  --csms-studio-bo-neutral-white: #000000;
  --csms-studio-bo-neutral-black: #ffffff;
  --csms-studio-bo-neutral-white-solid: #ffffff;
  --csms-studio-bo-neutral-black-solid: #000000;
  --csms-studio-bo-neutral-b30p: rgba(255, 255, 255, 0.3);
  --csms-studio-bo-coursemos-primary: #e6737f;
  --csms-studio-bo-coursemos-secondary: #ea8791;
  --csms-studio-bo-coursemos-tertiary: #ed9ba4;
  --csms-studio-bo-coursemos-quaternary: #6e0f08;
  --csms-studio-bo-coursemos-quinary: #370804;
  --csms-studio-bo-coursemos-senary: #290603;
  --csms-studio-bo-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bo-semantic-nega-primary: #f04438;
  --csms-studio-bo-semantic-nega-secondary: #e35f6d;
  --csms-studio-bo-semantic-nega-tertiary: #e6737f;
  --csms-studio-bo-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bo-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-bo-semantic-info-primary: #439cfa;
  --csms-studio-bo-semantic-info-secondary: #58a7fb;
  --csms-studio-bo-semantic-info-tertiary: #6db2fb;
  --csms-studio-bo-semantic-info-quaternary: #044890;
  --csms-studio-bo-semantic-info-quinary: #033973;
  --csms-studio-bo-semantic-info-senary: #022b57;
  --csms-studio-bo-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bo-semantic-info-40p: rgba(17, 129, 249, 0.4);
  --csms-studio-bo-semantic-posi-primary: #1ea465;
  --csms-studio-bo-semantic-posi-secondary: #29d886;
  --csms-studio-bo-semantic-posi-tertiary: #44dd95;
  --csms-studio-bo-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bo-semantic-warn-primary: #ffc107;
  --csms-studio-bo-semantic-noti-primary: #ffc107;
  --csms-studio-bo-semantic-prog-primary: #fd7e14;
  --csms-studio-bo-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-hierarchy-primary: #0b0c0d;
  --csms-studio-bg-hierarchy-primary-subtle: #1f2124;
  --csms-studio-bg-hierarchy-secondary: #212326;
  --csms-studio-bg-hierarchy-secondary-subtle: #232629;
  --csms-studio-bg-hierarchy-tertiary: #2c2f32;
  --csms-studio-bg-hierarchy-quaternary: #373b3f;
  --csms-studio-bg-hierarchy-quinary: #575e64;
  --csms-studio-bg-hierarchy-senary: #6d767e;
  --csms-studio-bg-hierarchy-senary-subtle: #899199;
  --csms-studio-bg-neutral-white: #000000;
  --csms-studio-bg-neutral-black: #ffffff;
  --csms-studio-bg-neutral-white-solid: #ffffff;
  --csms-studio-bg-neutral-black-solid: #000000;
  --csms-studio-bg-neutral-b6p-hovered: rgba(255, 255, 255, 0.06);
  --csms-studio-bg-neutral-b10p: rgba(255, 255, 255, 0.1);
  --csms-studio-bg-neutral-b15p: rgba(255, 255, 255, 0.15);
  --csms-studio-bg-neutral-b60p: rgba(255, 255, 255, 0.6);
  --csms-studio-bg-neutral-b80p: rgba(255, 255, 255, 0.8);
  --csms-studio-bg-neutral-w90p: rgba(0, 0, 0, 0.85);
  --csms-studio-bg-neutral-w50p: rgba(0, 0, 0, 0.5);
  --csms-studio-bg-neutral-w30p: rgba(0, 0, 0, 0.3);
  --csms-studio-bg-neutral-w20p: rgba(0, 0, 0, 0.2);
  --csms-studio-bg-neutral-w5p: rgba(0, 0, 0, 0.05);
  --csms-studio-bg-neutral-w1p: rgba(0, 0, 0, 0.01);
  --csms-studio-bg-coursemos-primary: #0075F8;
  --csms-studio-bg-coursemos-secondary: #1582FF;
  --csms-studio-bg-coursemos-tertiary: #2F90FF;
  --csms-studio-bg-coursemos-quaternary: #004696;
  --csms-studio-bg-coursemos-quinary: #002F64;
  --csms-studio-bg-coursemos-quinary-subtle: #001732;
  --csms-studio-bg-coursemos-senary: #00234B;
  --csms-studio-bg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bg-semantic-nega-primary: #f04438;
  --csms-studio-bg-semantic-nega-secondary: #e35f6d;
  --csms-studio-bg-semantic-nega-tertiary: #e6737f;
  --csms-studio-bg-semantic-nega-quaternary: #a5170c;
  --csms-studio-bg-semantic-nega-quinary: #6e0f08;
  --csms-studio-bg-semantic-nega-senary: #530b06;
  --csms-studio-bg-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bg-semantic-info-primary: #2e91fa;
  --csms-studio-bg-semantic-info-secondary: #6db2fb;
  --csms-studio-bg-semantic-info-tertiary: #82bdfc;
  --csms-studio-bg-semantic-info-quaternary: #033973;
  --csms-studio-bg-semantic-info-quinary: #022b57;
  --csms-studio-bg-semantic-info-senary: #011d3a;
  --csms-studio-bg-semantic-info-senary-subtle: #010e1d;
  --csms-studio-bg-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bg-semantic-posi-primary: #1ea465;
  --csms-studio-bg-semantic-posi-secondary: #29d886;
  --csms-studio-bg-semantic-posi-tertiary: #44dd95;
  --csms-studio-bg-semantic-posi-quaternary: #12623d;
  --csms-studio-bg-semantic-posi-quinary: #0c4229;
  --csms-studio-bg-semantic-posi-senary: #09311e;
  --csms-studio-bg-semantic-posi-30p: rgba(30, 164, 101, 0.3);
  --csms-studio-bg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-posi-50p: rgba(30, 164, 101, 0.5);
  --csms-studio-bg-semantic-warn-primary: #ffc107;
  --csms-studio-bg-semantic-warn-secondary: #ffcd37;
  --csms-studio-bg-semantic-warn-tertiary: #ffda69;
  --csms-studio-bg-semantic-warn-quaternary: #9c7500;
  --csms-studio-bg-semantic-warn-quinary: #684e00;
  --csms-studio-bg-semantic-warn-senary: #4e3b00;
  --csms-studio-bg-semantic-prog-primary: #fd7e14;
  --csms-studio-bg-semantic-prog-secondary: #fc8342;
  --csms-studio-bg-semantic-prog-tertiary: #fc935a;
  --csms-studio-bg-semantic-prog-quaternary: #a03902;
  --csms-studio-bg-semantic-prog-quinary: #6a2602;
  --csms-studio-bg-semantic-prog-senary: #501d01;
  --csms-studio-bg-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-semantic-etc-secondary: #8c68ce;
  --csms-studio-bg-semantic-etc-tertiary: #9a7bd4;
  --csms-studio-bg-semantic-etc-quaternary: #422676;
  --csms-studio-bg-semantic-etc-quinary: #2c194f;
  --csms-studio-bg-semantic-etc-senary: #21133b;
  --csms-studio-fg-hierarchy-primary: #e0e3e5;
  --csms-studio-fg-hierarchy-secondary: #c4c8cc;
  --csms-studio-fg-hierarchy-tertiary: #899199;
  --csms-studio-fg-hierarchy-quaternary: #6d767e;
  --csms-studio-fg-hierarchy-quinary: #575e64;
  --csms-studio-fg-hierarchy-senary: #2c2f32;
  --csms-studio-fg-hierarchy-senary-subtle: #161819;
  --csms-studio-fg-neutral-white: #000000;
  --csms-studio-fg-neutral-black: #ffffff;
  --csms-studio-fg-neutral-white-solid: #ffffff;
  --csms-studio-fg-neutral-black-solid: #000000;
  --csms-studio-fg-neutral-w50p-solid: rgba(255, 255, 255, 0.5);
  --csms-studio-fg-neutral-w80p-solid: rgba(255, 255, 255, 0.8);
  --csms-studio-fg-coursemos-primary: #f04438;
  --csms-studio-fg-coursemos-secondary: #e35f6d;
  --csms-studio-fg-coursemos-tertiary: #e6737f;
  --csms-studio-fg-coursemos-quaternary: #dc1e11;
  --csms-studio-fg-coursemos-quinary: #6e0f08;
  --csms-studio-fg-coursemos-senary: #530b06;
  --csms-studio-fg-coursemos-primary-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-fg-coursemos-primary-50p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-nega: #f04438;
  --csms-studio-fg-semantic-nega-quinary: #8a130a;
  --csms-studio-fg-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-warn-primary: #ffc107;
  --csms-studio-fg-semantic-warn-senary: #9c7500;
  --csms-studio-fg-semantic-posi: #1ea465;
  --csms-studio-fg-semantic-posi-40p: rgba(30, 164, 101, 0.6);
  --csms-studio-fg-semantic-info: #1181f9;
  --csms-studio-fg-semantic-prog: #fd7e14;
  --csms-studio-fg-semantic-etc: #6f42c1;
  --csms-studio-ut-school-primary: #a5170c;
  --csms-studio-ut-school-secondary: #a5170c;
}

/**
 * 작업시 유의 사항
 * Figma에서 2xlg 같이 이름을 지정한 경우 xxlg로 치환을 시켜서 사용해야 합니다.
 * 이유는 class 이름 규칙에 숫자로 시작되면 안되도록 되어 있습니다.
 */
.btn-noborder {
  border: 0;
  background: transparent;
}

.row .col-form-check,
.row .col-form-label {
  text-align: right;
  font-weight: 700;
}
@media (max-width: 575.98px) {
  .row .col-form-check,
  .row .col-form-label {
    text-align: left;
  }
}

.row-csms {
  margin-bottom: 8px;
}
.row-csms:last-child {
  margin-bottom: 0;
}
.row-csms .col-form-label {
  text-align: left;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quaternary);
}

.form-switch.form-switch-right {
  padding-left: 0;
}
.form-switch.form-switch-right .form-check-input {
  margin-left: 0;
  float: right;
}
.form-switch.form-switch-right .form-check-label {
  margin-right: 0.5em;
}

.badge.badge-sm {
  padding: 0.35em 0.45em;
}

.text-bg-default {
  background-color: transparent;
  color: var(--bs-body-color);
}

.cursor-move {
  cursor: move;
}

.bd-mode-toggle {
  z-index: 9999;
}
.bd-mode-toggle .btn-bd-primary {
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #6528e0;
  --bs-btn-hover-border-color: #6528e0;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #5a23c8;
  --bs-btn-active-border-color: #5a23c8;
}
.bd-mode-toggle .btn-bd-primary .bi {
  vertical-align: -0.125em;
  fill: currentColor;
}

/*
.form-check {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: inherit;
    margin-bottom: 0;
    padding-left: 24px;

    .form-check-input {
        width: 24px;
        height: 24px;
        margin-top: 0;
        vertical-align: middle;
    }

    .form-check-label {
        font-weight: $font-weight-medium;
        font-size: 14px;
        line-height: 150%;
    }
}
*/
.visibility-hidden {
  visibility: hidden;
}

/* --- General Styles --- */
#csms-studio .tab-panel-full-height,
.csmsmedia-studio-modal-content .tab-panel-full-height {
  height: calc(100% - 50px);
}
#csms-studio .tab-panel-full-height .tab-panel-box,
.csmsmedia-studio-modal-content .tab-panel-full-height .tab-panel-box {
  height: 100%;
}
#csms-studio .container-video .wrapper-video,
.csmsmedia-studio-modal-content .container-video .wrapper-video {
  overflow-y: auto;
}
#csms-studio .container-video .wrapper-video tbody tr:hover,
.csmsmedia-studio-modal-content .container-video .wrapper-video tbody tr:hover {
  background-color: #e5e5e5;
  cursor: pointer;
}
#csms-studio .container-video .container-pagination,
.csmsmedia-studio-modal-content .container-video .container-pagination {
  padding: 20px 0 30px;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- Video Tabs Container --- */
}
#csms-studio .container-video-tabs,
.csmsmedia-studio-modal-content .container-video-tabs {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
}
#csms-studio .container-video-wrapper,
.csmsmedia-studio-modal-content .container-video-wrapper {
  width: 100%;
  height: 100%;
}
#csms-studio .container-video-wrapper #btn-back-to-list,
.csmsmedia-studio-modal-content .container-video-wrapper #btn-back-to-list {
  display: flex;
  font-size: 16px;
  font-weight: 500;
  float: left;
  height: 29px;
  padding: 8px 0;
  margin-top: 9px;
  background-color: var(--csms-studio-bg-neutral-white);
  color: var(--csms-studio-tx-hierarchy-secondary);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border: none;
  border-bottom: 3px solid rgb(44, 47, 50);
}
#csms-studio .container-video-wrapper #btn-select-vod,
.csmsmedia-studio-modal-content .container-video-wrapper #btn-select-vod {
  display: flex;
  font-size: 16px;
  font-weight: 500;
  float: right;
  height: 29px;
  padding: 8px 0;
  margin-top: 9px;
  background-color: var(--csms-studio-bg-neutral-white);
  color: #0075F8;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border: none;
  border-bottom: 3px solid #0075F8;
}
#csms-studio .container-video-wrapper,
.csmsmedia-studio-modal-content .container-video-wrapper {
  /* Video Tabs Border Box */
}
#csms-studio .container-video-wrapper .video-tabs-border-box,
.csmsmedia-studio-modal-content .container-video-wrapper .video-tabs-border-box {
  width: 100%;
  height: 56px;
  padding: 8px 0;
}
#csms-studio .container-video-wrapper .video-tabs-border-box .MuiTabs-root,
.csmsmedia-studio-modal-content .container-video-wrapper .video-tabs-border-box .MuiTabs-root {
  min-height: auto;
  box-sizing: border-box;
  border-bottom: 1px solid var(--csms-studio-bo-hierarchy-secondary);
}
#csms-studio .container-video-wrapper .container-video-wrapper-content,
.csmsmedia-studio-modal-content .container-video-wrapper .container-video-wrapper-content {
  width: 100%;
  height: calc(100% - 56px);
  padding-bottom: 20px;
  box-sizing: border-box;
  overflow: auto;
}
#csms-studio .container-video-wrapper .container-video-wrapper-content div[role=tabpanel],
.csmsmedia-studio-modal-content .container-video-wrapper .container-video-wrapper-content div[role=tabpanel] {
  height: 100%;
  box-sizing: border-box;
}
#csms-studio .container-video-wrapper .container-video-wrapper-content div[role=tabpanel] .tab-panel-box,
.csmsmedia-studio-modal-content .container-video-wrapper .container-video-wrapper-content div[role=tabpanel] .tab-panel-box {
  height: 100%;
  box-sizing: border-box;
}
#csms-studio .container-video-wrapper .container-video-wrapper-content .video-info-tab__metadata-info-item-text,
.csmsmedia-studio-modal-content .container-video-wrapper .container-video-wrapper-content .video-info-tab__metadata-info-item-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#csms-studio .container-video-wrapper .MuiTabs-scroller .MuiTabs-list,
.csmsmedia-studio-modal-content .container-video-wrapper .MuiTabs-scroller .MuiTabs-list {
  width: 100%;
  gap: 4px;
  display: flex;
  align-items: flex-end;
}
#csms-studio .container-video-wrapper .MuiTabs-scroller .MuiTabs-list button,
.csmsmedia-studio-modal-content .container-video-wrapper .MuiTabs-scroller .MuiTabs-list button {
  width: 83px;
  height: 40px;
  min-width: 60px;
  gap: 4px;
  opacity: 1;
  padding-right: 12px;
  padding-left: 12px;
  border-top-left-radius: var(--csms-studio-border-radius-8);
  border-top-right-radius: var(--csms-studio-border-radius-8);
  color: var(--csms-studio-tx-hierarchy-quinary);
  overflow: hidden;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
#csms-studio .container-video-wrapper .MuiTabs-scroller .MuiTabs-list button.Mui-selected,
.csmsmedia-studio-modal-content .container-video-wrapper .MuiTabs-scroller .MuiTabs-list button.Mui-selected {
  color: var(--csms-studio-tx-hierarchy-secondary);
}
#csms-studio .container-video-wrapper .MuiTabs-scroller .MuiTabs-indicator,
.csmsmedia-studio-modal-content .container-video-wrapper .MuiTabs-scroller .MuiTabs-indicator {
  background-color: var(--csms-studio-bo-hierarchy-quinary) !important;
}
#csms-studio .container-video-wrapper .video-tab,
.csmsmedia-studio-modal-content .container-video-wrapper .video-tab {
  width: 83px;
  height: 40px;
  gap: 4px;
  opacity: 1;
  padding-right: 12px;
  padding-left: 12px;
  border-bottom-width: 2px;
  border-top-left-radius: var(--csms-studio-border-radius-8);
  border-top-right-radius: var(--csms-studio-border-radius-8);
}
#csms-studio .container-video-wrapper #tab-panel-subtitle,
#csms-studio .container-video-wrapper #tab-panel-editor,
#csms-studio .container-video-wrapper #tab-panel-info,
#csms-studio .container-video-wrapper #tab-panel-chapter,
.csmsmedia-studio-modal-content .container-video-wrapper #tab-panel-subtitle,
.csmsmedia-studio-modal-content .container-video-wrapper #tab-panel-editor,
.csmsmedia-studio-modal-content .container-video-wrapper #tab-panel-info,
.csmsmedia-studio-modal-content .container-video-wrapper #tab-panel-chapter {
  padding: 0;
  height: calc(100% - 49px);
  overflow: auto;
}
#csms-studio .container-video-wrapper #tab-panel-subtitle .tab-panel-box,
#csms-studio .container-video-wrapper #tab-panel-editor .tab-panel-box,
#csms-studio .container-video-wrapper #tab-panel-info .tab-panel-box,
#csms-studio .container-video-wrapper #tab-panel-chapter .tab-panel-box,
.csmsmedia-studio-modal-content .container-video-wrapper #tab-panel-subtitle .tab-panel-box,
.csmsmedia-studio-modal-content .container-video-wrapper #tab-panel-editor .tab-panel-box,
.csmsmedia-studio-modal-content .container-video-wrapper #tab-panel-info .tab-panel-box,
.csmsmedia-studio-modal-content .container-video-wrapper #tab-panel-chapter .tab-panel-box {
  padding: 0;
  height: 100%;
}
#csms-studio .box-video-info,
.csmsmedia-studio-modal-content .box-video-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
#csms-studio .title-video-info,
.csmsmedia-studio-modal-content .title-video-info {
  width: 100%;
  margin-bottom: 20px;
  word-break: break-all;
  font-weight: bold;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- Video List Table --- */
}
#csms-studio .studio-container-video-list .table-video-list,
.csmsmedia-studio-modal-content .studio-container-video-list .table-video-list {
  color: var(--theme-text-color);
}
#csms-studio .studio-container-video-list .table-video-list thead,
.csmsmedia-studio-modal-content .studio-container-video-list .table-video-list thead {
  background-color: var(--theme-secondary);
  color: var(--theme-primary-text);
}
#csms-studio .studio-container-video-list .table-video-list thead tr,
.csmsmedia-studio-modal-content .studio-container-video-list .table-video-list thead tr {
  height: 40px;
}
#csms-studio .studio-container-video-list .table-video-list thead tr th,
.csmsmedia-studio-modal-content .studio-container-video-list .table-video-list thead tr th {
  text-align: center;
  color: var(--theme-primary-text);
}
#csms-studio .studio-container-video-list .table-video-list tbody,
.csmsmedia-studio-modal-content .studio-container-video-list .table-video-list tbody {
  width: 100%;
}
#csms-studio .studio-container-video-list .table-video-list tr,
.csmsmedia-studio-modal-content .studio-container-video-list .table-video-list tr {
  height: 100px;
}
#csms-studio .studio-container-video-list .table-video-list tr td,
.csmsmedia-studio-modal-content .studio-container-video-list .table-video-list tr td {
  vertical-align: middle;
  padding: 0 16px;
  font-size: 13px;
  background-color: var(--theme-background-color);
  border-bottom: 1px solid var(--theme-line-color);
  color: var(--theme-text-color);
  height: 100px;
  max-height: 100px;
}
#csms-studio .studio-container-video-list .table-video-list .tr-video-list:hover td,
.csmsmedia-studio-modal-content .studio-container-video-list .table-video-list .tr-video-list:hover td {
  cursor: pointer;
  background-color: var(--theme-background-color);
  border-bottom: 1px solid var(--theme-line-color);
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}
#csms-studio .studio-container-video-list .table-video-list .td-video-list-thumbnail,
.csmsmedia-studio-modal-content .studio-container-video-list .table-video-list .td-video-list-thumbnail {
  padding-left: 15px;
  width: 30%;
}
#csms-studio .studio-container-video-list .table-video-list .img-video-list-thumbnail,
.csmsmedia-studio-modal-content .studio-container-video-list .table-video-list .img-video-list-thumbnail {
  max-width: 250px;
  max-height: 150px;
  padding: 10px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto;
}
#csms-studio .studio-container-video-list .table-video-list .img-video-list-thumbnail img,
.csmsmedia-studio-modal-content .studio-container-video-list .table-video-list .img-video-list-thumbnail img {
  width: 100%;
  object-fit: cover;
}
#csms-studio .studio-container-video-list .table-video-list .td-video-list-createAt,
#csms-studio .studio-container-video-list .table-video-list .td-video-list-playTime,
.csmsmedia-studio-modal-content .studio-container-video-list .table-video-list .td-video-list-createAt,
.csmsmedia-studio-modal-content .studio-container-video-list .table-video-list .td-video-list-playTime {
  text-align: center;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- Video Player and Controls --- */
}
#csms-studio .video-container,
.csmsmedia-studio-modal-content .video-container {
  width: 100%;
  height: 100%;
  position: relative;
  transition: all ease-out 0.5s;
}
#csms-studio .video-container .box-video,
.csmsmedia-studio-modal-content .video-container .box-video {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  position: relative;
}
#csms-studio .video-container .box-video #videoEl,
.csmsmedia-studio-modal-content .video-container .box-video #videoEl {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#csms-studio .player-subtitle,
.csmsmedia-studio-modal-content .player-subtitle {
  white-space: pre-line;
  position: absolute;
  width: 100%;
  inset: 221.543px 0px 0px;
  height: 13.75px;
  background-color: rgba(153, 153, 153, 0.5);
}
#csms-studio #videoEl,
.csmsmedia-studio-modal-content #videoEl {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
}
#csms-studio #videoEl .vjs-control-bar,
.csmsmedia-studio-modal-content #videoEl .vjs-control-bar {
  border-radius: 0 0 16px 16px;
  height: 52px;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
}
#csms-studio #videoEl .vjs-control-bar .vjs-button .vjs-icon-placeholder:before,
.csmsmedia-studio-modal-content #videoEl .vjs-control-bar .vjs-button .vjs-icon-placeholder:before {
  line-height: 52px;
}
#csms-studio #videoEl .vjs-control-bar .vjs-progress-control .vjs-play-progress:before,
.csmsmedia-studio-modal-content #videoEl .vjs-control-bar .vjs-progress-control .vjs-play-progress:before {
  top: 50%;
  transform: translateY(-50%);
}
#csms-studio #videoEl .vjs-control-bar .vjs-playback-rate .vjs-playback-rate-value,
.csmsmedia-studio-modal-content #videoEl .vjs-control-bar .vjs-playback-rate .vjs-playback-rate-value {
  line-height: 52px;
}
#csms-studio #videoEl .vjs-control-bar .vjs-playback-rate .vjs-menu,
.csmsmedia-studio-modal-content #videoEl .vjs-control-bar .vjs-playback-rate .vjs-menu {
  width: 4em;
  bottom: 36px;
}
#csms-studio #videoEl .vjs-control-bar .vjs-playback-rate .vjs-menu .vjs-menu-content,
.csmsmedia-studio-modal-content #videoEl .vjs-control-bar .vjs-playback-rate .vjs-menu .vjs-menu-content {
  bottom: 1.5em;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  padding-bottom: 0.5em;
}
#csms-studio #videoEl .vjs-control-bar .vjs-playback-rate .vjs-menu .vjs-menu-content .vjs-menu-item,
.csmsmedia-studio-modal-content #videoEl .vjs-control-bar .vjs-playback-rate .vjs-menu .vjs-menu-content .vjs-menu-item {
  line-height: 2em;
}
#csms-studio #videoEl .vjs-control-bar .vjs-playback-rate .vjs-menu .vjs-menu-content .vjs-menu-item:hover, #csms-studio #videoEl .vjs-control-bar .vjs-playback-rate .vjs-menu .vjs-menu-content .vjs-menu-item.vjs-selected,
.csmsmedia-studio-modal-content #videoEl .vjs-control-bar .vjs-playback-rate .vjs-menu .vjs-menu-content .vjs-menu-item:hover,
.csmsmedia-studio-modal-content #videoEl .vjs-control-bar .vjs-playback-rate .vjs-menu .vjs-menu-content .vjs-menu-item.vjs-selected {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}
#csms-studio #videoEl .vjs-control-bar .vjs-remaining-time,
#csms-studio #videoEl .vjs-control-bar .vjs-current-time,
#csms-studio #videoEl .vjs-control-bar .vjs-duration,
#csms-studio #videoEl .vjs-control-bar .vjs-time-divider,
#csms-studio #videoEl .vjs-control-bar .vjs-time-control,
.csmsmedia-studio-modal-content #videoEl .vjs-control-bar .vjs-remaining-time,
.csmsmedia-studio-modal-content #videoEl .vjs-control-bar .vjs-current-time,
.csmsmedia-studio-modal-content #videoEl .vjs-control-bar .vjs-duration,
.csmsmedia-studio-modal-content #videoEl .vjs-control-bar .vjs-time-divider,
.csmsmedia-studio-modal-content #videoEl .vjs-control-bar .vjs-time-control {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;
  line-height: normal !important;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* Common styles for all video-js instances (including LocalizedPlayer) */
}
#csms-studio .video-js .vjs-control-bar,
.csmsmedia-studio-modal-content .video-js .vjs-control-bar {
  height: 52px;
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.75);
}
#csms-studio .video-js .vjs-control-bar .vjs-button .vjs-icon-placeholder:before,
.csmsmedia-studio-modal-content .video-js .vjs-control-bar .vjs-button .vjs-icon-placeholder:before {
  line-height: 52px;
}
#csms-studio .video-js .vjs-control-bar .vjs-progress-control .vjs-play-progress:before,
.csmsmedia-studio-modal-content .video-js .vjs-control-bar .vjs-progress-control .vjs-play-progress:before {
  top: 50%;
  transform: translateY(-50%);
}
#csms-studio .video-js .vjs-control-bar .vjs-playback-rate .vjs-playback-rate-value,
.csmsmedia-studio-modal-content .video-js .vjs-control-bar .vjs-playback-rate .vjs-playback-rate-value {
  line-height: 52px;
}
#csms-studio .video-js .vjs-control-bar .vjs-playback-rate .vjs-menu,
.csmsmedia-studio-modal-content .video-js .vjs-control-bar .vjs-playback-rate .vjs-menu {
  width: 4em;
  bottom: 36px;
}
#csms-studio .video-js .vjs-control-bar .vjs-playback-rate .vjs-menu .vjs-menu-content,
.csmsmedia-studio-modal-content .video-js .vjs-control-bar .vjs-playback-rate .vjs-menu .vjs-menu-content {
  bottom: 1.5em;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  padding-bottom: 0.5em;
}
#csms-studio .video-js .vjs-control-bar .vjs-playback-rate .vjs-menu .vjs-menu-content .vjs-menu-item,
.csmsmedia-studio-modal-content .video-js .vjs-control-bar .vjs-playback-rate .vjs-menu .vjs-menu-content .vjs-menu-item {
  line-height: 2em;
}
#csms-studio .video-js .vjs-control-bar .vjs-playback-rate .vjs-menu .vjs-menu-content .vjs-menu-item:hover, #csms-studio .video-js .vjs-control-bar .vjs-playback-rate .vjs-menu .vjs-menu-content .vjs-menu-item.vjs-selected,
.csmsmedia-studio-modal-content .video-js .vjs-control-bar .vjs-playback-rate .vjs-menu .vjs-menu-content .vjs-menu-item:hover,
.csmsmedia-studio-modal-content .video-js .vjs-control-bar .vjs-playback-rate .vjs-menu .vjs-menu-content .vjs-menu-item.vjs-selected {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}
#csms-studio .video-js .vjs-control-bar .vjs-remaining-time,
#csms-studio .video-js .vjs-control-bar .vjs-current-time,
#csms-studio .video-js .vjs-control-bar .vjs-duration,
#csms-studio .video-js .vjs-control-bar .vjs-time-divider,
#csms-studio .video-js .vjs-control-bar .vjs-time-control,
.csmsmedia-studio-modal-content .video-js .vjs-control-bar .vjs-remaining-time,
.csmsmedia-studio-modal-content .video-js .vjs-control-bar .vjs-current-time,
.csmsmedia-studio-modal-content .video-js .vjs-control-bar .vjs-duration,
.csmsmedia-studio-modal-content .video-js .vjs-control-bar .vjs-time-divider,
.csmsmedia-studio-modal-content .video-js .vjs-control-bar .vjs-time-control {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;
  line-height: normal !important;
}
#csms-studio .video-control-box,
.csmsmedia-studio-modal-content .video-control-box {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgb(204, 204, 204);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 13px;
  gap: 6px;
  transition: transform 0.2s ease 0s;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px;
  transform: scale(1);
}
#csms-studio .video-control-box--disabled,
.csmsmedia-studio-modal-content .video-control-box--disabled {
  opacity: 0.5;
  pointer-events: none;
}
#csms-studio .video-control-box .row,
.csmsmedia-studio-modal-content .video-control-box .row {
  width: 100%;
}
#csms-studio .video-control-box .row button,
.csmsmedia-studio-modal-content .video-control-box .row button {
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  margin: 5px;
  color: rgb(56, 114, 223);
}
#csms-studio .iconDiv,
#csms-studio .icon-div,
.csmsmedia-studio-modal-content .iconDiv,
.csmsmedia-studio-modal-content .icon-div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#csms-studio .iconDiv div,
#csms-studio .icon-div div,
.csmsmedia-studio-modal-content .iconDiv div,
.csmsmedia-studio-modal-content .icon-div div {
  display: flex;
  align-items: center;
}
#csms-studio .iconDiv .play-button,
#csms-studio .icon-div .play-button,
.csmsmedia-studio-modal-content .iconDiv .play-button,
.csmsmedia-studio-modal-content .icon-div .play-button {
  height: 35px;
  width: 35px;
  display: block;
  margin: 15px;
  overflow: hidden;
  position: relative;
}
#csms-studio .iconDiv .media-player-time,
#csms-studio .icon-div .media-player-time,
.csmsmedia-studio-modal-content .iconDiv .media-player-time,
.csmsmedia-studio-modal-content .icon-div .media-player-time {
  display: flex;
  align-items: center;
  margin-left: 20px;
}
#csms-studio .iconDiv .media-player-time .box-play-time,
#csms-studio .icon-div .media-player-time .box-play-time,
.csmsmedia-studio-modal-content .iconDiv .media-player-time .box-play-time,
.csmsmedia-studio-modal-content .icon-div .media-player-time .box-play-time {
  margin-right: 5px;
}
#csms-studio .iconDiv .media-player-time .time-separator,
#csms-studio .icon-div .media-player-time .time-separator,
.csmsmedia-studio-modal-content .iconDiv .media-player-time .time-separator,
.csmsmedia-studio-modal-content .icon-div .media-player-time .time-separator {
  margin: 0 5px;
}
#csms-studio .iconDiv .media-player-time .box-duration-time,
#csms-studio .icon-div .media-player-time .box-duration-time,
.csmsmedia-studio-modal-content .iconDiv .media-player-time .box-duration-time,
.csmsmedia-studio-modal-content .icon-div .media-player-time .box-duration-time {
  color: gray;
  margin-left: 5px;
}
#csms-studio .multi-lang-player-skeleton-container,
.csmsmedia-studio-modal-content .multi-lang-player-skeleton-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
}
#csms-studio .multi-lang-player-skeleton-icon,
.csmsmedia-studio-modal-content .multi-lang-player-skeleton-icon {
  position: absolute;
  z-index: 1;
  font-size: 40px;
  color: lightgray;
  cursor: pointer;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.delete-vod-modal .MuiPaper-root {
  width: 320px;
  height: 166px;
  background: var(--bg-neutral-white, #FFF);
  box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.04), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
  border-radius: 12px;
}
.delete-vod-modal .delete-vod-modal-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px 0 20px;
  margin: 0;
}

/* --- LocalizedPlayer Specific Styles --- */
.localized-player #csms-studio__play-icon {
  position: absolute;
  z-index: 1;
  font-size: 40px;
  color: lightgray;
  cursor: pointer;
}
.localized-player #csms-studio__alert {
  font-size: 14px;
}
.localized-player #csms-studio__skeleton-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 4px;
}

/* --- Timeline Zoom Control Styles --- */
#csms-studio .timeline-zoom-control {
  width: 100%;
  margin-bottom: 16px;
}
#csms-studio .timeline-zoom-slider .MuiSlider-thumb {
  background-color: #4b89dc;
}
#csms-studio .timeline-zoom-slider .MuiSlider-track {
  background-color: #99ccff;
}
#csms-studio .timeline-zoom-slider .MuiSlider-rail {
  background-color: #e0e0e0;
}
#csms-studio .timeline-zoom-slider .MuiSlider-valueLabel {
  background-color: #4b89dc;
  color: white;
}
#csms-studio .timeline-zoom-slider .MuiSlider-mark {
  background-color: #e0e0e0;
}
#csms-studio .timeline-zoom-slider .MuiSlider-markActive {
  background-color: #99ccff;
}
#csms-studio {
  /* Hover effects */
}
#csms-studio .timeline-zoom-slider .MuiSlider-thumb:hover {
  background-color: #3a6bb8;
  box-shadow: 0 0 0 8px rgba(75, 137, 220, 0.16);
}
#csms-studio .timeline-zoom-slider .MuiSlider-thumb:active {
  background-color: #2d5a9e;
  box-shadow: 0 0 0 12px rgba(75, 137, 220, 0.24);
}
#csms-studio {
  /* Focus styles for accessibility */
}
#csms-studio .timeline-zoom-slider .MuiSlider-thumb:focus {
  outline: none;
  box-shadow: 0 0 0 8px rgba(75, 137, 220, 0.16);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #csms-studio .timeline-zoom-control {
    margin-bottom: 12px;
  }
  #csms-studio .timeline-zoom-slider {
    margin: 0 8px;
  }
}
/* Hide 3rd and 4th columns when screen width is less than 500px */
/* --- Converting Progress Container Styles --- */
#csms-studio .container-video-wrapper .video-converting__wrapper,
.csmsmedia-studio-modal-content .container-video-wrapper .video-converting__wrapper {
  width: 100%;
  height: 764px;
  padding-bottom: 20px;
}
#csms-studio .container-video-wrapper .video-converting__content,
.csmsmedia-studio-modal-content .container-video-wrapper .video-converting__content {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#csms-studio .container-video-wrapper .video-converting__content .content-title,
.csmsmedia-studio-modal-content .container-video-wrapper .video-converting__content .content-title {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
#csms-studio .container-video-wrapper .video-converting__content .content-wrapper,
.csmsmedia-studio-modal-content .container-video-wrapper .video-converting__content .content-wrapper {
  width: 100%;
  height: calc(100% - 36px - 56px);
  min-height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#csms-studio .container-video-wrapper .video-converting__content .content-wrapper .content-spinner-area,
.csmsmedia-studio-modal-content .container-video-wrapper .video-converting__content .content-wrapper .content-spinner-area {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
}
#csms-studio .container-video-wrapper .video-converting__content .content-wrapper .content-spinner-area .converting-spinner,
.csmsmedia-studio-modal-content .container-video-wrapper .video-converting__content .content-wrapper .content-spinner-area .converting-spinner {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  position: relative;
  background: rgba(0, 117, 248, 0.5);
}
#csms-studio .container-video-wrapper .video-converting__content .content-wrapper .content-spinner-area .converting-spinner:before,
#csms-studio .container-video-wrapper .video-converting__content .content-wrapper .content-spinner-area .converting-spinner:after,
.csmsmedia-studio-modal-content .container-video-wrapper .video-converting__content .content-wrapper .content-spinner-area .converting-spinner:before,
.csmsmedia-studio-modal-content .container-video-wrapper .video-converting__content .content-wrapper .content-spinner-area .converting-spinner:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 117, 248, 0.25);
  animation: slide 1s infinite linear alternate;
}
#csms-studio .container-video-wrapper .video-converting__content .content-wrapper .content-spinner-area .converting-spinner:after,
.csmsmedia-studio-modal-content .container-video-wrapper .video-converting__content .content-wrapper .content-spinner-area .converting-spinner:after {
  background: var(--csms-studio-bg-coursemos-primary);
  animation: slide2 1s infinite linear alternate;
}
@keyframes slide {
  0%, 20% {
    transform: translate(0, 0);
  }
  80%, 100% {
    transform: translate(15px, 15px);
  }
}
@keyframes slide2 {
  0%, 20% {
    transform: translate(0, 0);
  }
  80%, 100% {
    transform: translate(-15px, -15px);
  }
}
#csms-studio .container-video-wrapper .video-converting__content .content-wrapper .content-progress-area-wrapper,
.csmsmedia-studio-modal-content .container-video-wrapper .video-converting__content .content-wrapper .content-progress-area-wrapper {
  width: 640px;
  height: 78px;
  padding: 10px 8px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#csms-studio .container-video-wrapper .video-converting__content .content-wrapper .content-progress-area-wrapper .file-name-area,
.csmsmedia-studio-modal-content .container-video-wrapper .video-converting__content .content-wrapper .content-progress-area-wrapper .file-name-area {
  margin-bottom: 16px;
}
#csms-studio .container-video-wrapper .video-converting__content .content-wrapper .content-progress-area-wrapper .content-progress-area,
.csmsmedia-studio-modal-content .container-video-wrapper .video-converting__content .content-wrapper .content-progress-area-wrapper .content-progress-area {
  width: 624px;
  height: 18px;
}
#csms-studio .container-video-wrapper .video-converting__content .content-wrapper .content-progress-area-text,
.csmsmedia-studio-modal-content .container-video-wrapper .video-converting__content .content-wrapper .content-progress-area-text {
  width: 640px;
  padding: 16px 12px;
  color: var(--csms-studio-tx-hierarchy-secondary);
  background-color: var(--csms-studio-bg-semantic-info-senary);
  border-radius: var(--csms-studio-border-radius-8);
}
#csms-studio .container-video-wrapper .video-converting__content .content-wrapper .content-progress-area-text__list,
.csmsmedia-studio-modal-content .container-video-wrapper .video-converting__content .content-wrapper .content-progress-area-text__list {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: 12px;
}
#csms-studio .container-video-wrapper .video-converting__content .content-wrapper .content-progress-area-text__list li,
.csmsmedia-studio-modal-content .container-video-wrapper .video-converting__content .content-wrapper .content-progress-area-text__list li {
  padding-left: 12px;
  position: relative;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
#csms-studio .container-video-wrapper .video-converting__content .content-wrapper .content-progress-area-text__list li::before,
.csmsmedia-studio-modal-content .container-video-wrapper .video-converting__content .content-wrapper .content-progress-area-text__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
#csms-studio .container-video-wrapper .video-converting__actions,
.csmsmedia-studio-modal-content .container-video-wrapper .video-converting__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 36px;
  gap: 4px;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
#csms-studio .container-video-wrapper .video-converting__actions .list-button,
.csmsmedia-studio-modal-content .container-video-wrapper .video-converting__actions .list-button {
  width: 77px;
  height: 36px;
  padding: 0 16px;
  background-color: var(--csms-studio-bg-neutral-white);
  border-radius: 8px;
  border: 1px solid var(--csms-studio-bo-hierarchy-quaternary);
  color: var(--csms-studio-tx-hierarchy-secondary);
  cursor: pointer;
}
#csms-studio .container-video-wrapper .video-converting__actions .select-button,
.csmsmedia-studio-modal-content .container-video-wrapper .video-converting__actions .select-button {
  width: 77px;
  height: 36px;
  border-radius: 8px;
  padding: 0 16px;
  background-color: #0075F8;
  color: var(--csms-studio-tx-neutral-white-solid);
  cursor: pointer;
}
/*!***************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/resources/assets/styles/editor.scss ***!
  \***************************************************************************************************************************************************************/
@charset "UTF-8";
/* =====================
   Video Editor Module Styles
   ===================== */
/* --- Layout Containers --- */
#csms-studio .container-editor {
  width: 100%;
  height: 100%;
}
#csms-studio .container-editor .box-editor-content {
  width: 100%;
  display: flex;
}
#csms-studio .container-editor .container-editor-player {
  height: 100%;
  position: relative;
  flex: 1;
  background-color: rgba(238, 238, 238, 0.46);
  border-left: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}
#csms-studio .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2rem;
  background-color: rgba(0, 0, 0, 0.3);
}
#csms-studio .footer-editor {
  z-index: 1;
  height: 300px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#csms-studio .footer-editor .timeline-container .timeline-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
#csms-studio .footer-editor .timeline-container .timeline-layout .col-play-time {
  display: flex;
  align-items: center;
  padding-top: 20px;
  padding-left: 20px;
}
#csms-studio .footer-editor .timeline-container .timeline-layout .col-play-time div {
  line-height: 35px;
  border: 1px solid lightgray;
  border-radius: 4px;
  text-align: center;
}
#csms-studio .footer-editor .timeline-container .timeline-layout .col-play-time .timeline-history {
  margin-right: 30px;
}
#csms-studio .footer-editor .timeline-container .timeline-layout .spacer {
  flex-grow: 1;
}
#csms-studio .footer-editor .timeline-container .timeline-layout .col-zoom-slider {
  padding: 0;
  padding-right: 20px;
}
#csms-studio .footer-editor .timeline-container .timeline-layout .col-zoom-slider .box-zoom-slider {
  display: flex;
  align-items: center;
  padding: 10px 0;
}
#csms-studio {
  /* --- Waveform Container --- */
}
#csms-studio .editor-timeline-wrapper {
  width: 100%;
  position: relative;
  padding: 0;
}
#csms-studio .editor-timeline-wrapper #waveform {
  width: 100%;
  margin: 0;
  padding: 0;
}
#csms-studio .editor-timeline-wrapper #waveform canvas {
  z-index: 99;
}
#csms-studio .editor-timeline-wrapper input {
  margin-top: 5px;
  width: 90%;
}
#csms-studio .editor-timeline-wrapper .waveform-controls {
  padding: 30px;
}
#csms-studio .editor-timeline-wrapper #waveform ::part(wrapper) {
  overflow: hidden;
  --box-size: 10px;
}
#csms-studio .editor-timeline-wrapper #waveform ::part(region) {
  height: 170px !important;
  font-size: 15px;
  display: flex;
  align-items: center;
}
#csms-studio .editor-timeline-wrapper #waveform ::part(activeRegion) {
  height: 170px !important;
  padding: 10px;
  font-size: 15px;
  display: flex;
  align-items: center;
}
#csms-studio .editor-timeline-wrapper #waveform ::part(region-content) {
  width: 100%;
  text-align: center;
}
#csms-studio .editor-timeline-wrapper #waveform ::part(region-handle) {
  border: 0;
  width: 12px !important;
  background-color: rgba(0, 0, 0, 0.2);
  height: 30%;
  border-radius: 5px;
  top: 55px;
}
#csms-studio .editor-timeline-wrapper #waveform ::part(region-handle)::before {
  content: "⠿";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(0, 0, 0, 0.7);
  font-size: 16px;
  line-height: 1;
}
#csms-studio .editor-timeline-wrapper #waveform ::part(region-handle):hover {
  background-color: rgba(0, 0, 0, 0.3);
}
#csms-studio .editor-timeline-wrapper .zoom-slider {
  display: flex;
  justify-content: right;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 12px;
  z-index: 900;
}
#csms-studio .editor-timeline-wrapper #zoom-level-slider {
  width: 100px;
}
#csms-studio .container-editor-project {
  width: 100%;
}
#csms-studio {
  /* --- Table Styles --- */
}
#csms-studio .table-edit-project td,
#csms-studio .table-edit-project th {
  text-align: center;
  vertical-align: middle !important;
}
#csms-studio .table-edit-project .tr-edit-project {
  line-height: 66.6666666667px;
}
#csms-studio .tr-edit-project-plus {
  width: 100%;
  height: 66.6666666667px;
  position: relative;
  font-size: 14px;
}
#csms-studio .tr-edit-project-plus :hover {
  background-color: rgb(244, 243, 243);
}
#csms-studio .tr-edit-project-plus .btn-edit-project-plus {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#csms-studio .wrapper-edit-tools-btns {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  align-items: center;
  width: 100%;
  padding: 20px !important;
}
#csms-studio .list-edit-tool {
  height: 66.6666666667px;
  border-bottom: 1px solid #ddd;
  border-width: 1px 0px;
  text-align: center;
  margin: 0;
}
#csms-studio .list-edit-tool div {
  display: flex;
  align-items: center;
}
#csms-studio .list-edit-tool .col-icon {
  display: flex;
  justify-content: center;
}
#csms-studio .row-edit-action {
  width: 100%;
  height: 80px;
  position: relative;
  border-top: 1px solid #dee2e6;
  font-size: 14px;
  margin: 0;
  padding: 0;
  align-items: center;
}
#csms-studio .row-edit-action:hover {
  background-color: rgb(244, 243, 243);
}
#csms-studio .box-edit-action .editable-text {
  width: 40%;
  height: 20px;
  text-align: center;
  font-size: 14px;
  overflow: hidden;
  outline: 0px solid transparent;
  border-bottom: 1px solid #ddd;
}
#csms-studio .btn-plus-cut-list {
  display: flex;
  align-items: center;
  height: 80px;
  padding-left: 6%;
  color: blue;
}
#csms-studio .btn-plus-cut-list:hover {
  cursor: pointer;
}
#csms-studio .table-video-list-concat {
  width: 100%;
  table-layout: fixed;
}
#csms-studio .table-video-list-concat .cell-video {
  width: 20%;
}
#csms-studio .table-video-list-concat .cell-filename {
  width: 40%;
}
#csms-studio .table-video-list-concat .cell-date,
#csms-studio .table-video-list-concat .cell-duration {
  width: 20%;
}
#csms-studio .table-video-list-concat .cell-video .video-thumbnail {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  overflow: hidden;
}
#csms-studio .table-video-list-concat .cell-video .video-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#csms-studio .table-video-list-concat .cell-filename .video-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#csms-studio {
  /* --- Concat Menu --- */
}
#csms-studio .concat-menu {
  height: calc(100% - 77.73px - 66.66px);
  overflow-y: auto;
}
#csms-studio .concat-menu--content {
  height: 100%;
  border-bottom: 1px solid #ddd;
}
#csms-studio .concat-menu--row {
  height: 50%;
  display: flex;
  align-items: center;
  border-radius: 4px;
  padding: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
#csms-studio .concat-menu--label {
  width: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  margin-right: 15px;
}
#csms-studio .concat-menu--position {
  width: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
  border-radius: 4px;
  margin-right: 15px;
}
#csms-studio .concat-menu--video-info {
  width: 65%;
  padding: 0 20px;
  flex: 1;
}
#csms-studio .concat-menu--detail-label {
  margin-right: 5px;
}
#csms-studio .concat-menu--detail-value {
  font-size: 14px;
}
#csms-studio .concat-menu--find-video {
  cursor: pointer;
  color: #1976d2;
}
#csms-studio .concat-menu--find-video:hover {
  text-decoration: underline;
}
#csms-studio .concat-menu--refresh {
  width: 5%;
  cursor: pointer;
  color: #757575;
}
#csms-studio .concat-menu--refresh:hover {
  color: #1976d2;
}
#csms-studio .concat-menu--clear {
  width: 5%;
  cursor: pointer;
  color: #757575;
}
#csms-studio .concat-menu--clear:hover {
  color: #1976d2;
}
#csms-studio .concat-menu--modal {
  position: absolute;
  width: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background-color: #fff;
  border: 2px solid #000;
  box-shadow: 24px;
  padding: 16px;
}
#csms-studio .concat-menu--modal-title {
  padding: 30px;
}
#csms-studio .concat-menu--modal-content {
  margin-top: 16px;
  max-height: 70vh;
  min-height: 50vh;
  overflow: auto;
  padding: 30px;
}
#csms-studio .concat-menu--modal-content table {
  border-top: 1px solid #ddd;
}
#csms-studio .concat-menu--modal-content table thead th {
  text-align: center;
}
#csms-studio .concat-menu--modal-content table tbody tr .cell-video {
  width: 20%;
}
#csms-studio .concat-menu--modal-content table tbody tr .cell-filename {
  width: 50%;
}
#csms-studio .concat-menu--modal-content table tbody tr .cell-date {
  width: 20%;
  text-align: center;
}
#csms-studio .concat-menu--modal-content table tbody tr .cell-duration {
  width: 10%;
  text-align: center;
}
#csms-studio {
  /* --- Cut Menu --- */
}
#csms-studio .cut-menu .cut-item {
  display: flex;
  align-items: center;
  height: 66.6666666667px;
  border-bottom: 1px solid #ddd;
}
#csms-studio .cut-menu .cut-item button:hover {
  background-color: transparent;
}
#csms-studio .cut-menu .cut-label {
  width: 20%;
  font-size: 14px;
  text-align: center;
}
#csms-studio .cut-menu .cut-row-container {
  width: 70%;
  color: gray;
}
#csms-studio .cut-menu .delete-button {
  width: 10%;
  margin-left: 10px;
}
#csms-studio .cut-menu .add-cut-button {
  margin: 20px 0 0 40px;
}
#csms-studio .row-editable-time {
  height: 100%;
  display: flex;
  font-size: 14px;
}
#csms-studio .info-card-menu .menu-box-row {
  display: flex;
  align-items: center;
}
#csms-studio .info-card-menu .menu-box-row .column {
  display: flex;
  align-items: center;
}
#csms-studio .info-card-menu .menu-box-row .video-column {
  width: 16.66%;
  justify-content: center;
}
#csms-studio .info-card-menu .menu-box-row .video-column .video-text {
  font-size: 20px;
}
#csms-studio .info-card-menu .menu-box-row .new-window-column {
  width: 16.66%;
}
#csms-studio .info-card-menu .menu-box-row .title-column {
  width: 25%;
}
#csms-studio .info-card-menu .menu-box-row .time-column {
  width: 33.33%;
  display: flex;
  align-items: center;
}
#csms-studio .info-card-menu .menu-box-row .time-column .editable-text {
  margin-right: 8px;
}
#csms-studio .info-card-menu .menu-box-row .time-column .time-separator {
  margin: 0 8px;
}
#csms-studio .info-card-menu .menu-box-row .trash-column {
  width: 8.33%;
  display: flex;
  justify-content: center;
}
#csms-studio .info-card-menu .plus-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
#csms-studio .watermark-row,
#csms-studio .crop-row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
  width: 100%;
  height: 66.6666666667px;
}
#csms-studio .watermark-label {
  width: 20%;
  text-align: center;
}
#csms-studio .watermark-label p {
  font-size: 14px;
}
#csms-studio .watermark-type {
  width: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#csms-studio .watermark-type p {
  font-size: 14px;
}
#csms-studio .watermark-type .watermark-select {
  width: 80px;
  margin-left: 10px;
  font-size: 14px;
}
#csms-studio .watermark-type .watermark-select .MuiSelect-select {
  padding: 8px 10px;
}
#csms-studio .watermark-content {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
#csms-studio .watermark-content .editable-text {
  width: 100%;
  min-height: 24px;
  line-height: 1.5;
  padding: 2px 4px;
  height: auto;
  overflow: hidden;
  border-bottom: 1px solid #ddd;
}
#csms-studio .watermark-image {
  max-width: 100%;
}
#csms-studio .watermark-image-upload {
  cursor: pointer;
}
#csms-studio .watermark-position-size {
  flex: 1;
  display: flex;
  width: 45%;
}
#csms-studio .watermark-position-size .watermark-position,
#csms-studio .watermark-position-size .watermark-size {
  width: 50%;
  display: flex;
  align-items: center;
}
#csms-studio .watermark-position-size .watermark-position p,
#csms-studio .watermark-position-size .watermark-size p {
  width: 40%;
  font-size: 14px;
  text-align: center;
}
#csms-studio .watermark-position-size .watermark-position .watermark-coordinates,
#csms-studio .watermark-position-size .watermark-position .watermark-dimensions,
#csms-studio .watermark-position-size .watermark-size .watermark-coordinates,
#csms-studio .watermark-position-size .watermark-size .watermark-dimensions {
  width: 60%;
}
#csms-studio .watermark-position-size .watermark-position .watermark-coordinates .is-editable,
#csms-studio .watermark-position-size .watermark-position .watermark-dimensions .is-editable,
#csms-studio .watermark-position-size .watermark-size .watermark-coordinates .is-editable,
#csms-studio .watermark-position-size .watermark-size .watermark-dimensions .is-editable {
  cursor: text;
  border-bottom: 1px solid #ccc;
}
#csms-studio .watermark-position-size .watermark-position {
  justify-content: center;
}
#csms-studio .watermark-btns {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#csms-studio .watermark-text-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
#csms-studio .color-picker-container {
  position: relative;
}
#csms-studio .color-picker-button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #ccc;
  cursor: pointer;
}
#csms-studio .color-picker-dropdown {
  position: absolute;
  z-index: 2;
}
#csms-studio .color-picker-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#csms-studio .color-picker-content {
  position: relative;
}
#csms-studio .error-field {
  color: red;
}
#csms-studio .edit-button {
  cursor: pointer;
  margin-right: 8px;
}
#csms-studio .watermark-coordinate,
#csms-studio .watermark-dimension,
#csms-studio .crop-coordinate,
#csms-studio .crop-dimension {
  display: flex;
  align-items: center;
  width: 100%;
}
#csms-studio .watermark-coordinate p,
#csms-studio .watermark-dimension p,
#csms-studio .crop-coordinate p,
#csms-studio .crop-dimension p {
  width: 50%;
  font-size: 14px;
  text-align: center;
}
#csms-studio .watermark-coordinate .editable-text,
#csms-studio .watermark-dimension .editable-text,
#csms-studio .crop-coordinate .editable-text,
#csms-studio .crop-dimension .editable-text {
  width: 50%;
  font-size: 14px;
  min-height: 24px;
  line-height: 1.5;
  padding: 2px 4px;
  height: auto;
  overflow: hidden;
  cursor: text;
}
#csms-studio .cut-menu .add-button,
#csms-studio .watermark-menu .add-button,
#csms-studio .crop-menu .add-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  cursor: pointer;
  font-size: 14px;
}
#csms-studio .cut-menu .add-button:hover,
#csms-studio .watermark-menu .add-button:hover,
#csms-studio .crop-menu .add-button:hover {
  background-color: transparent;
}
#csms-studio .cut-menu .add-button span,
#csms-studio .watermark-menu .add-button span,
#csms-studio .crop-menu .add-button span {
  margin-left: 8px;
}
#csms-studio {
  /* Crop specific styles */
}
#csms-studio .crop-label {
  width: 15%;
  text-align: center;
}
#csms-studio .crop-label p {
  font-size: 14px;
}
#csms-studio .crop-position-size {
  flex: 1;
  display: flex;
  width: 65%;
}
#csms-studio .crop-position-size .crop-position,
#csms-studio .crop-position-size .crop-size {
  width: 50%;
  display: flex;
  align-items: center;
}
#csms-studio .crop-position-size .crop-position p,
#csms-studio .crop-position-size .crop-size p {
  width: 40%;
  font-size: 14px;
  text-align: center;
}
#csms-studio .crop-position-size .crop-position .crop-coordinates,
#csms-studio .crop-position-size .crop-position .crop-dimensions,
#csms-studio .crop-position-size .crop-size .crop-coordinates,
#csms-studio .crop-position-size .crop-size .crop-dimensions {
  width: 60%;
}
#csms-studio .crop-position-size .crop-position .crop-coordinates .is-editable,
#csms-studio .crop-position-size .crop-position .crop-dimensions .is-editable,
#csms-studio .crop-position-size .crop-size .crop-coordinates .is-editable,
#csms-studio .crop-position-size .crop-size .crop-dimensions .is-editable {
  cursor: text;
  border-bottom: 1px solid #ccc;
}
#csms-studio .crop-position-size .crop-position {
  justify-content: center;
}
#csms-studio .crop-actions {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#csms-studio .crop-actions .crop-edit-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
}
#csms-studio .crop-actions .crop-edit-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
#csms-studio .crop-coordinates,
#csms-studio .crop-dimensions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 600px) {
  #csms-studio .timeline-history {
    display: none;
  }
}
#csms-studio {
  /* --- Edit Tool Menu List Styles --- */
}
#csms-studio .edit-tool-menu-list__icon-container {
  width: 16.66%;
  display: flex;
  justify-content: center;
}
#csms-studio .edit-tool-menu-list__label-container {
  width: 20%;
}
#csms-studio .edit-tool-menu-list__content-container {
  flex-grow: 1;
}
#csms-studio .edit-tool-menu-list__arrow-container {
  width: 8.33%;
  display: flex;
  justify-content: center;
}
#csms-studio .edit-tool-menu-list__arrow-icon {
  font-size: 20px;
  color: gray;
}
#csms-studio .edit-tool-menu-list__saved-label {
  color: #856404;
}
#csms-studio .edit-tool-menu-list__edited-text {
  font-style: italic;
}
#csms-studio {
  /* --- Edit Tool Action Buttons Styles --- */
}
#csms-studio .edit-tool-action-buttons__back-button {
  font-size: 16px;
  color: #666666;
  text-transform: none;
}
#csms-studio .edit-tool-action-buttons__back-button:hover {
  background-color: transparent;
}
#csms-studio .edit-tool-action-buttons__discard-button {
  color: #212121;
  box-shadow: none;
  background-color: #eee;
  text-transform: none;
  border-radius: 20px;
}
#csms-studio .edit-tool-action-buttons__discard-button:hover {
  background-color: #eeeeee;
}
#csms-studio .edit-tool-action-buttons__save-button {
  background-color: #181a1c;
  color: #fff;
  box-shadow: none;
  margin-left: 10px;
  text-transform: none;
  border-radius: 20px;
}
#csms-studio .edit-tool-action-buttons__save-button:hover {
  background-color: #333333;
  border-color: #333333;
}
#csms-studio .edit-tool-action-buttons__action-container {
  width: 100%;
  display: flex;
  justify-content: end;
}
#csms-studio {
  /* --- Editor Tab Styles --- */
}
#csms-studio .editor-tab__content-box {
  width: 50%;
  padding: 0;
}
#csms-studio .editor-tab__player-box {
  width: 50%;
  padding: 0;
}
#csms-studio .editor-tab__loading-container {
  width: 100%;
}
#csms-studio .editor-tab__loading-row {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding: 10px 30px;
}
#csms-studio .editor-tab__loading-back-button {
  font-size: 16px;
  color: #666666;
  text-transform: none;
}
#csms-studio .editor-tab__loading-back-button:hover {
  background-color: transparent;
}
#csms-studio .editor-tab__loading-skeleton-icon {
  margin-right: 20px;
  margin-top: 0;
  width: 30px;
  height: 30px;
}
#csms-studio .editor-tab__loading-skeleton-text {
  width: 120px;
  height: 30px;
}
#csms-studio .editor-tab__zoom-slider {
  width: 150px;
  margin: 0 8px;
}
#csms-studio .editor-tab__skeleton-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  width: 100%;
  border-top: 1px solid #ddd;
}
#csms-studio .editor-tab__skeleton-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#csms-studio .editor-tab__skeleton-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#csms-studio .editor-tab__skeleton-item {
  flex: 1;
  margin: 0 1px;
}
#csms-studio {
  /* --- Timeline History Button Styles --- */
}
#csms-studio .timeline-history-button {
  border-radius: 30px;
  margin-right: 5px;
  color: #706868;
  box-shadow: none;
  background-color: rgb(214, 213, 211);
}
#csms-studio .timeline-history-button--disabled {
  opacity: 0.5;
}
#csms-studio {
  /* --- Menu List Icon Styles --- */
}
#csms-studio .edit-tool-menu-list__arrow-icon {
  font-size: 20px;
  color: gray;
}
#csms-studio {
  /* --- Crop Canvas Styles --- */
}
#csms-studio .crop-canvas__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#csms-studio .crop-canvas__label {
  font-size: 10px;
  margin-top: 2px;
}
#csms-studio {
  /* --- Concat Menu Styles --- */
}
#csms-studio .concat-menu__container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}
#csms-studio .concat-menu__card {
  border-radius: 8px;
  transition: all 0.3s ease;
}
#csms-studio .concat-menu__card--selected {
  border: 2px solid #ddd;
}
#csms-studio .concat-menu__card--empty {
  border: 2px dashed #e0e0e0;
}
#csms-studio .concat-menu__card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
#csms-studio .concat-menu__card-content {
  padding: 24px;
}
#csms-studio .concat-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
#csms-studio .concat-menu__header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
#csms-studio .concat-menu__chip {
  border: 1px solid #ddd;
  color: #757575;
  background-color: transparent;
  font-weight: 600;
}
#csms-studio .concat-menu__header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
#csms-studio .concat-menu__icon-button {
  color: #9e9e9e;
}
#csms-studio .concat-menu__video-info {
  padding: 16px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  background-color: #fafafa;
}
#csms-studio .concat-menu__video-title {
  color: #2c3e50;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 1rem;
}
#csms-studio .concat-menu__video-uuid {
  color: #7f8c8d;
  font-size: 0.75rem;
  font-family: monospace;
  background-color: #f5f5f5;
  padding: 4px;
  border-radius: 4px;
  display: inline-block;
}
#csms-studio .concat-menu__add-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 2px dashed #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}
#csms-studio .concat-menu__add-button:hover {
  border-color: #9e9e9e;
  background-color: #f8f9fa;
}
#csms-studio .concat-menu__add-icon {
  margin-right: 8px;
  color: #9e9e9e;
}
#csms-studio .concat-menu__add-text {
  color: #757575;
  font-weight: 600;
}
#csms-studio .concat-menu__summary-card {
  border: 2px solid #ddd;
  border-radius: 8px;
}
#csms-studio .concat-menu__summary-title {
  font-weight: 600;
  color: #3e3e3e;
}
#csms-studio .concat-menu__section-title {
  font-weight: 600;
  margin-bottom: 16px;
  color: #2c3e50;
}
#csms-studio .concat-menu__video-sequence {
  margin-bottom: 24px;
}
#csms-studio .concat-menu__video-grid {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
#csms-studio .concat-menu__video-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#csms-studio .concat-menu__video-thumbnail {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid #e0e0e0;
  width: 120px;
  height: 68px;
}
#csms-studio .concat-menu__video-thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#csms-studio .concat-menu__video-type-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
}
#csms-studio .concat-menu__video-name {
  font-size: 0.75rem;
  color: #7f8c8d;
  margin-top: 8px;
  text-align: center;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#csms-studio .concat-menu__project-info {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
#csms-studio .concat-menu__info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
#csms-studio .concat-menu__info-label {
  font-weight: 600;
  color: #2c3e50;
}
#csms-studio .concat-menu__info-value {
  color: #757575;
  font-weight: 600;
}
#csms-studio {
  /* --- Cut Menu Styles --- */
}
#csms-studio .cut-menu__add-icon {
  font-size: 14px;
}
#csms-studio {
  /* --- Edit Project Container Styles --- */
}
#csms-studio .edit-project-container {
  height: 100%;
}
#csms-studio {
  /* --- Edit Project List Styles --- */
}
#csms-studio .edit-project-list__delete-icon {
  font-size: 20px;
}
#csms-studio {
  /* --- Concat Menu Divider --- */
}
#csms-studio .concat-menu__divider {
  margin-bottom: 24px;
}
#csms-studio {
  /* =====================
     Video Selection Modal
     ===================== */
}
#csms-studio .video-selection-modal__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1200px;
  height: 85vh;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
#csms-studio .video-selection-modal__header {
  padding: 24px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#csms-studio .video-selection-modal__header-title {
  font-weight: 600;
  color: #2c3e50;
}
#csms-studio .video-selection-modal__header-close-button {
  color: #7f8c8d;
}
#csms-studio .video-selection-modal__header-close-button:hover {
  background-color: #f5f5f5;
}
#csms-studio .video-selection-modal__content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#csms-studio .video-selection-modal__table-header {
  background-color: #fff;
  padding: 0 16px;
}
#csms-studio .video-selection-modal__table-header-container {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid #e0e0e0;
}
#csms-studio .video-selection-modal__table-header-row {
  background-color: #34495e;
}
#csms-studio .video-selection-modal__table-header-cell {
  color: white;
  font-weight: 600;
  border-bottom: none;
  padding: 16px 0;
  text-align: center;
}
#csms-studio .video-selection-modal__table-content {
  flex: 1;
  overflow: auto;
  padding: 0 16px;
}
#csms-studio .video-selection-modal__table-content-container {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid #e0e0e0;
  border-top: none;
}
#csms-studio .video-selection-modal__table-content-row {
  cursor: pointer;
  height: 140px;
}
#csms-studio .video-selection-modal__table-content-row:hover {
  background-color: #ecf0f1;
}
#csms-studio .video-selection-modal__table-content-thumbnail {
  text-align: center;
  padding: 20px;
}
#csms-studio .video-selection-modal__table-content-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#csms-studio .video-selection-modal__table-content-title {
  font-weight: 500;
  font-size: 0.9rem;
}
#csms-studio .video-selection-modal__table-content-date, #csms-studio .video-selection-modal__table-content-duration {
  text-align: center;
  color: #7f8c8d;
  font-size: 0.85rem;
}
#csms-studio .video-selection-modal__skeleton-row {
  height: 140px;
}
#csms-studio .video-selection-modal__skeleton-thumbnail {
  width: 70%;
  height: 100px;
  margin: 0 auto;
}
#csms-studio .video-selection-modal__skeleton-title {
  width: 80%;
  margin: 0 auto;
}
#csms-studio .video-selection-modal__skeleton-date {
  width: 60%;
  margin: 0 auto;
}
#csms-studio .video-selection-modal__skeleton-duration {
  width: 40%;
  margin: 0 auto;
}
#csms-studio .video-selection-modal__empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #fff;
}
#csms-studio .video-selection-modal__pagination {
  padding: 16px;
  background-color: #fff;
  display: flex;
  justify-content: center;
}
#csms-studio .video-selection-modal .video-list-table-concat,
#csms-studio .video-selection-modal .videoListTable.concat {
  table-layout: fixed;
  width: 100%;
}
#csms-studio .video-selection-modal .video-list-table-concat .cell-video .box-thumbnail,
#csms-studio .video-selection-modal .videoListTable.concat .cell-video .box-thumbnail {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#csms-studio .video-selection-modal .video-list-table-concat .cell-video .box-thumbnail img,
#csms-studio .video-selection-modal .videoListTable.concat .cell-video .box-thumbnail img {
  width: 100%;
  height: 108px;
  object-fit: cover;
}
#csms-studio .video-selection-modal .video-list-table-concat .cell-date,
#csms-studio .video-selection-modal .videoListTable.concat .cell-date {
  text-align: center;
}
#csms-studio .video-selection-modal .video-list-table-concat .cell-duration,
#csms-studio .video-selection-modal .videoListTable.concat .cell-duration {
  text-align: center;
}
#csms-studio .video-selection-modal .video-list-table-concat thead th {
  text-align: center;
  vertical-align: middle;
}
#csms-studio .video-selection-modal .videoListTable.concat tbody td {
  text-align: center;
  vertical-align: middle;
}
#csms-studio .video-selection-modal__table-header-container .MuiTable-root, #csms-studio .video-selection-modal__table-content-container .MuiTable-root {
  table-layout: fixed;
  width: 100%;
}
#csms-studio .video-selection-modal__table-header-container .MuiTableCell-root:last-child, #csms-studio .video-selection-modal__table-content-container .MuiTableCell-root:last-child {
  border-right: none;
}
#csms-studio .editor-header {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem 2rem;
}
#csms-studio .editor-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#csms-studio .editor-header__left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
#csms-studio .editor-header__title-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 150px;
}
#csms-studio .editor-header__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
}
#csms-studio .editor-header__version {
  font-size: 0.875rem;
  color: #6b7280;
}
#csms-studio .editor-header__meta-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
  color: #4b5563;
}
#csms-studio .editor-header__meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
#csms-studio .editor-header__icon {
  width: 1rem;
  height: 1rem;
}
#csms-studio .editor-header__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
#csms-studio .editor-header__publish-btn {
  background: #2563eb;
  color: #fff;
  font-weight: 500;
}
#csms-studio .editor-header__publish-btn:hover {
  background: #1d4ed8;
}
#csms-studio .editor-header__project-name-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
#csms-studio .editor-header__project-name-input {
  font-size: 1.5rem;
  font-weight: 700;
  height: auto;
  flex: 1;
  min-width: 0;
  border-radius: 0.375rem;
  background-color: #fff;
  color: #111827;
  line-height: 1.2;
}
#csms-studio .editor-header__project-name-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
#csms-studio .editor-header__project-name-display {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
}
#csms-studio .editor-header__edit-button {
  height: 1.5rem;
  width: 1.5rem;
  padding: 0;
  min-width: unset;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: #6b7280;
}
#csms-studio .editor-header__edit-button:hover {
  color: #374151;
  background-color: #f3f4f6;
}
#csms-studio .editor-header__save-button {
  height: 1.5rem;
  width: 1.5rem;
  padding: 0;
  min-width: unset;
  color: #059669;
}
#csms-studio .editor-header__save-button:hover {
  color: #047857;
  background-color: #ecfdf5;
}
#csms-studio .editor-header__cancel-button {
  height: 1.5rem;
  width: 1.5rem;
  padding: 0;
  min-width: unset;
  color: #dc2626;
}
#csms-studio .editor-header__cancel-button:hover {
  color: #b91c1c;
  background-color: #fef2f2;
}
#csms-studio .editor-header__button-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
#csms-studio .editor-header__project-name-wrapper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
#csms-studio .editor-header__project-name-wrapper:hover .editor-header__edit-button {
  opacity: 1;
}
/*!******************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/resources/assets/styles/videoInfo.scss ***!
  \******************************************************************************************************************************************************************/
@charset "UTF-8";
#csms-studio .fl {
  float: left;
}
#csms-studio .fr {
  float: right;
}
#csms-studio .cr {
  clear: both;
}
#csms-studio .mr-1 {
  margin-right: 4px;
}
#csms-studio .mr-2 {
  margin-right: 8px;
}
#csms-studio .mr-3 {
  margin-right: 12px;
}
#csms-studio .mr-4 {
  margin-right: 16px;
}
#csms-studio .mr-5 {
  margin-right: 20px;
}
#csms-studio .ml-1 {
  margin-left: 4px;
}
#csms-studio .ml-2 {
  margin-left: 8px;
}
#csms-studio .ml-3 {
  margin-left: 12px;
}
#csms-studio .ml-4 {
  margin-left: 16px;
}
#csms-studio .ml-5 {
  margin-left: 20px;
}
#csms-studio .pl-1 {
  padding-left: 4px;
}
#csms-studio .pl-2 {
  padding-left: 8px;
}
#csms-studio .pl-3 {
  padding-left: 12px;
}
#csms-studio .pl-4 {
  padding-left: 16px;
}
#csms-studio .pl-5 {
  padding-left: 20px;
}
#csms-studio .pr-1 {
  padding-right: 4px;
}
#csms-studio .pr-2 {
  padding-right: 8px;
}
#csms-studio .pr-3 {
  padding-right: 12px;
}
#csms-studio .pr-4 {
  padding-right: 16px;
}
#csms-studio .pr-5 {
  padding-right: 20px;
}
#csms-studio .pt-1 {
  padding-top: 4px;
}
#csms-studio .pt-2 {
  padding-top: 8px;
}
#csms-studio .pt-3 {
  padding-top: 12px;
}
#csms-studio .pt-4 {
  padding-top: 16px;
}
#csms-studio .pt-5 {
  padding-top: 20px;
}
#csms-studio .pb-1 {
  padding-bottom: 4px;
}
#csms-studio .pb-2 {
  padding-bottom: 8px;
}
#csms-studio .pb-3 {
  padding-bottom: 12px;
}
#csms-studio .pb-4 {
  padding-bottom: 16px;
}
#csms-studio .pb-5 {
  padding-bottom: 20px;
}
#csms-studio .fs-0 {
  font-size: 14px;
}
#csms-studio .fs-1 {
  font-size: 16px;
}
#csms-studio .fs-2 {
  font-size: 20px;
}
#csms-studio .fs-3 {
  font-size: 24px;
}
#csms-studio .fs-4 {
  font-size: 28px;
}
#csms-studio .fs-5 {
  font-size: 32px;
}
#csms-studio .fw-bold {
  font-weight: bold;
}
#csms-studio .text-align-right {
  text-align: right;
}
#csms-studio .text-align-left {
  text-align: left;
}
#csms-studio .text-align-center {
  text-align: center;
}
#csms-studio .btn-border-1 {
  border-radius: 4px;
}
#csms-studio .btn-border-2 {
  border-radius: 8px;
}
#csms-studio .cursor-pointer {
  cursor: pointer;
}

/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

.csms-studio-heading-2xlg {
  --csms-studio-heading-font-weight: 700;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-xlg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 40px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 56px;
  margin-bottom: 0;
}

.csms-studio-heading-lg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 32px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 45px;
  margin-bottom: 0;
}

.csms-studio-heading-md {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 28px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-sm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm-semibold {
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-label-xlg-bold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-semibold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-medium {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-normal {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-bold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-semibold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-medium {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-normal {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-bold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-semibold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-medium {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-normal {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-bold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-semibold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-medium {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-normal {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-bold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-semibold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-medium {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-normal {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-bold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-semibold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-medium {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-normal {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-caption-lg {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-md {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-sm {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 10px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 12px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

/* Video Info Section */
#csms-studio .video-info-container,
.csmsmedia-studio-modal-content .video-info-container {
  padding: 30px;
  margin: 0 auto;
  background-color: #ffffff;
}
#csms-studio .video-info-container .video-js .vjs-chapters-more-list,
.csmsmedia-studio-modal-content .video-info-container .video-js .vjs-chapters-more-list {
  height: calc(100% - 30px);
}
#csms-studio .video-info-container .video-info-row,
.csmsmedia-studio-modal-content .video-info-container .video-info-row {
  display: flex;
  height: 300px;
  margin-bottom: 20px;
}
#csms-studio .video-info-container .video-player-column,
.csmsmedia-studio-modal-content .video-info-container .video-player-column {
  width: 60%;
  height: 100%;
  padding-right: 30px;
  box-sizing: border-box;
}
#csms-studio .video-info-container .video-details-column,
.csmsmedia-studio-modal-content .video-info-container .video-details-column {
  width: 40%;
  height: 100%;
}
#csms-studio .video-info-container .video-details-column .video-title,
.csmsmedia-studio-modal-content .video-info-container .video-details-column .video-title {
  padding-bottom: 20px;
  margin-bottom: 16px !important;
  color: #333;
  font-weight: bold;
  font-size: 1.2rem;
}
#csms-studio .video-info-container .video-details-column .video-info-box,
.csmsmedia-studio-modal-content .video-info-container .video-details-column .video-info-box {
  padding: 10px;
  font-size: 13px;
  border: 1px lightgray solid;
  background-color: #ddd;
  height: calc(100% - 52px);
}
#csms-studio .video-info-container .video-thumbnail-row,
.csmsmedia-studio-modal-content .video-info-container .video-thumbnail-row {
  width: calc(60% - 30px);
}
#csms-studio .video-info-container .video-thumbnail-row .detail-thumbnail-table,
.csmsmedia-studio-modal-content .video-info-container .video-thumbnail-row .detail-thumbnail-table {
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;
}
#csms-studio .video-info-container .video-thumbnail-row .detail-thumbnail-table .detail-video-thumbnail,
.csmsmedia-studio-modal-content .video-info-container .video-thumbnail-row .detail-thumbnail-table .detail-video-thumbnail {
  width: calc(33.3333333333% - 10px);
  margin: 5px;
  cursor: pointer;
}
#csms-studio .video-info-container .video-thumbnail-row .detail-thumbnail-table .detail-video-thumbnail img,
.csmsmedia-studio-modal-content .video-info-container .video-thumbnail-row .detail-thumbnail-table .detail-video-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* Info Card Tab */
}
#csms-studio .info-card-tab .content-body .info-card-container,
.csmsmedia-studio-modal-content .info-card-tab .content-body .info-card-container {
  display: flex;
  font-size: 14px;
}
#csms-studio .info-card-tab .content-body .info-card-container .info-card-left,
#csms-studio .info-card-tab .content-body .info-card-container .info-card-right,
.csmsmedia-studio-modal-content .info-card-tab .content-body .info-card-container .info-card-left,
.csmsmedia-studio-modal-content .info-card-tab .content-body .info-card-container .info-card-right {
  width: 50%;
  padding: 0;
}
#csms-studio .info-card-tab .content-body .info-card-container .info-card-header,
.csmsmedia-studio-modal-content .info-card-tab .content-body .info-card-container .info-card-header {
  display: flex;
  align-items: center;
  height: 80px;
  border-bottom: 1px solid #ddd;
  text-align: center;
  cursor: pointer;
}
#csms-studio .info-card-tab .content-body .info-card-container .info-card-header .icon-col,
.csmsmedia-studio-modal-content .info-card-tab .content-body .info-card-container .info-card-header .icon-col {
  width: 8.33%;
}
#csms-studio .info-card-tab .content-body .info-card-container .info-card-header .title-col,
.csmsmedia-studio-modal-content .info-card-tab .content-body .info-card-container .info-card-header .title-col {
  width: 16.67%;
  font-size: 18px;
}
#csms-studio .info-card-tab .content-body .info-card-container .info-card-header .spacer,
.csmsmedia-studio-modal-content .info-card-tab .content-body .info-card-container .info-card-header .spacer {
  width: 58.33%;
}
#csms-studio .info-card-tab .content-body .info-card-container .info-card-header .add-icon-col,
.csmsmedia-studio-modal-content .info-card-tab .content-body .info-card-container .info-card-header .add-icon-col {
  width: 16.67%;
}
#csms-studio .info-card-tab .content-body .info-card-container .info-card-item,
.csmsmedia-studio-modal-content .info-card-tab .content-body .info-card-container .info-card-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
#csms-studio .info-card-tab .content-body .info-card-container .info-card-item .item-type,
.csmsmedia-studio-modal-content .info-card-tab .content-body .info-card-container .info-card-item .item-type {
  width: 16.67%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 0;
}
#csms-studio .info-card-tab .content-body .info-card-container .info-card-item .item-title,
.csmsmedia-studio-modal-content .info-card-tab .content-body .info-card-container .info-card-item .item-title {
  width: 25%;
  padding-right: 0;
}
#csms-studio .info-card-tab .content-body .info-card-container .info-card-item .item-target,
#csms-studio .info-card-tab .content-body .info-card-container .info-card-item .item-time,
.csmsmedia-studio-modal-content .info-card-tab .content-body .info-card-container .info-card-item .item-target,
.csmsmedia-studio-modal-content .info-card-tab .content-body .info-card-container .info-card-item .item-time {
  width: 16.67%;
}
#csms-studio .info-card-tab .content-body .info-card-container .info-card-item .item-link,
#csms-studio .info-card-tab .content-body .info-card-container .info-card-item .item-spacer,
.csmsmedia-studio-modal-content .info-card-tab .content-body .info-card-container .info-card-item .item-link,
.csmsmedia-studio-modal-content .info-card-tab .content-body .info-card-container .info-card-item .item-spacer {
  width: 33.33%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#csms-studio .info-card-tab .content-body .info-card-container .info-card-item .item-delete,
.csmsmedia-studio-modal-content .info-card-tab .content-body .info-card-container .info-card-item .item-delete {
  width: 8.33%;
  display: flex;
  justify-content: center;
  cursor: pointer;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* Thumbnail Modal */
}
#csms-studio .thumbnail-modal,
.csmsmedia-studio-modal-content .thumbnail-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}
#csms-studio .thumbnail-modal .modal-container,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container {
  background-color: white;
  border-radius: 8px;
  padding: 32px;
  width: 95%;
  max-width: 800px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}
#csms-studio .thumbnail-modal .modal-container .modal-header,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
#csms-studio .thumbnail-modal .modal-container .modal-header h2,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-header h2 {
  margin: 0;
  font-size: 28px;
  color: #333;
  font-weight: 600;
}
#csms-studio .thumbnail-modal .modal-container .modal-header .close-button,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-header .close-button {
  color: #666;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
#csms-studio .thumbnail-modal .modal-container .modal-header .close-button:hover,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-header .close-button:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
#csms-studio .thumbnail-modal .modal-container .modal-body,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  height: calc(100% - 64px);
  overflow-y: auto;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .thumbnail-container,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .thumbnail-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 70vh;
  overflow: auto;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .thumbnail-container .thumbnail-image,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .thumbnail-container .thumbnail-image {
  height: 100%;
  overflow-y: auto;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .thumbnail-container .thumbnail-image.active,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .thumbnail-container .thumbnail-image.active {
  border: 2px solid #1976d2;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .thumbnail-container .drag-reject-icon,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .thumbnail-container .drag-reject-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f44336;
  font-size: 48px;
  z-index: 10;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .thumbnail-container .drag-active-icon,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .thumbnail-container .drag-active-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #1976d2;
  font-size: 48px;
  z-index: 10;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .thumbnail-container .drag-active-icon .loading-spinner,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .thumbnail-container .drag-active-icon .loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e3f2fd;
  border-top: 4px solid #1976d2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .button-container,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .button-container {
  width: 100%;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: end;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .button-container .button-wrapper,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .button-container .button-wrapper {
  display: flex;
  align-items: center;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .dropzone-area,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .dropzone-area {
  width: 100%;
  height: 500px;
  border: 2px dashed #ddd;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #f9f9f9;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .dropzone-area:hover,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .dropzone-area:hover {
  border-color: #1976d2;
  background-color: #f3f8ff;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .dropzone-area .drag-reject-content,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .dropzone-area .drag-reject-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .dropzone-area .drag-reject-content .drag-reject-text,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .dropzone-area .drag-reject-content .drag-reject-text {
  color: #f44336;
  font-size: 16px;
  font-weight: 500;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .dropzone-area .drag-reject-button,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .dropzone-area .drag-reject-button {
  margin-top: 16px;
  cursor: pointer;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .dropzone-area .drag-active-content,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .dropzone-area .drag-active-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: #1976d2;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .dropzone-area .drag-active-content svg,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .dropzone-area .drag-active-content svg {
  font-size: 48px;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .dropzone-area .drag-active-content .MuiTypography-root,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .dropzone-area .drag-active-content .MuiTypography-root {
  font-size: 18px;
  font-weight: 500;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .dropzone-area .dropzone-content,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .dropzone-area .dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: #666;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .dropzone-area .dropzone-content svg,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .dropzone-area .dropzone-content svg {
  font-size: 48px;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .dropzone-area .dropzone-content .MuiTypography-root,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .dropzone-area .dropzone-content .MuiTypography-root {
  font-size: 16px;
}
#csms-studio .thumbnail-modal .modal-container .modal-body .dropzone-area .dropzone-content .MuiButton-root,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .dropzone-area .dropzone-content .MuiButton-root {
  margin-top: 8px;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#csms-studio .video-content,
.csmsmedia-studio-modal-content .video-content {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
#csms-studio .video-info-wrapper,
.csmsmedia-studio-modal-content .video-info-wrapper {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
}
#csms-studio .video-details,
.csmsmedia-studio-modal-content .video-details {
  padding: 20px;
  border-radius: 12px;
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
#csms-studio .video-metadata-wrapper,
.csmsmedia-studio-modal-content .video-metadata-wrapper {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 12px;
  height: auto;
}
#csms-studio .video-metadata,
.csmsmedia-studio-modal-content .video-metadata {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#csms-studio .thumbnails-wrapper,
.csmsmedia-studio-modal-content .thumbnails-wrapper {
  padding: 20px;
  margin-top: 20px;
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
}
#csms-studio .thumbnails-container,
.csmsmedia-studio-modal-content .thumbnails-container {
  padding: 0 0 8px 24px;
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
#csms-studio .thumbnails-container .thumbnail-item,
.csmsmedia-studio-modal-content .thumbnails-container .thumbnail-item {
  position: relative;
  min-width: 132px;
  height: 91px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease-in-out, border-color 0.2s ease;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 21px -5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 21px -5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 21px -5px rgba(0, 0, 0, 0.1);
  border: 2px solid transparent;
}
#csms-studio .thumbnails-container .thumbnail-item .thumbnail-image,
.csmsmedia-studio-modal-content .thumbnails-container .thumbnail-item .thumbnail-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
#csms-studio .thumbnails-container .thumbnail-item .thumbnail-upload-icon-wrapper,
.csmsmedia-studio-modal-content .thumbnails-container .thumbnail-item .thumbnail-upload-icon-wrapper {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background-color: #0075F8;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
  z-index: 10;
}
#csms-studio .thumbnails-container .thumbnail-item.thumbnail-item--selected,
.csmsmedia-studio-modal-content .thumbnails-container .thumbnail-item.thumbnail-item--selected {
  border-color: #1181F9;
}
#csms-studio .thumbnails-container .thumbnail-item img,
.csmsmedia-studio-modal-content .thumbnails-container .thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
#csms-studio .vod-subtitle-chip,
.csmsmedia-studio-modal-content .vod-subtitle-chip {
  background-color: #E3F2FD !important;
  color: #1565C0 !important;
}
#csms-studio .video-metadata-header,
.csmsmedia-studio-modal-content .video-metadata-header {
  flex-grow: 1;
  margin-bottom: 16px;
}
#csms-studio .video-metadata-title-row,
.csmsmedia-studio-modal-content .video-metadata-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-direction: column;
}
#csms-studio .video-metadata-section,
.csmsmedia-studio-modal-content .video-metadata-section {
  border-top: 1px solid #e0e0e0;
  padding-top: 16px;
  margin-top: 16px;
}
#csms-studio .video-metadata-duration,
.csmsmedia-studio-modal-content .video-metadata-duration {
  min-width: 50%;
}
#csms-studio .video-metadata-flexgrow,
.csmsmedia-studio-modal-content .video-metadata-flexgrow {
  flex-grow: 1;
}
#csms-studio .video-info-loading,
.csmsmedia-studio-modal-content .video-info-loading {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px;
  width: 100%;
  border-top: 1px solid #ddd;
}
#csms-studio .video-info-loading-header,
.csmsmedia-studio-modal-content .video-info-loading-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#csms-studio .video-info-loading-bars,
.csmsmedia-studio-modal-content .video-info-loading-bars {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* Video Info Tab Component Styles */
}
#csms-studio .video-info-tab__container,
.csmsmedia-studio-modal-content .video-info-tab__container {
  height: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
  box-sizing: border-box;
}
#csms-studio .video-info-tab__wrapper,
.csmsmedia-studio-modal-content .video-info-tab__wrapper {
  display: flex;
  padding-top: 8px;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  height: auto;
  min-height: 100%;
  box-sizing: border-box;
  transition: all 0.5s ease-in-out;
}
#csms-studio .video-info-tab__video-description__title,
.csmsmedia-studio-modal-content .video-info-tab__video-description__title {
  margin-bottom: 10px;
}
#csms-studio .video-info-tab__player-wrapper,
.csmsmedia-studio-modal-content .video-info-tab__player-wrapper {
  width: 100%;
  max-width: 1120px;
  margin-bottom: 24px;
}
#csms-studio .video-info-tab__metadata-wrapper-container,
.csmsmedia-studio-modal-content .video-info-tab__metadata-wrapper-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}
#csms-studio .video-info-tab__metadata-wrapper,
.csmsmedia-studio-modal-content .video-info-tab__metadata-wrapper {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  height: auto;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--csms-studio-bo-hierarchy-secondary);
}
#csms-studio .video-info-tab__metadata-section,
.csmsmedia-studio-modal-content .video-info-tab__metadata-section {
  padding-left: 24px;
}
#csms-studio .video-info-tab__metadata-header,
.csmsmedia-studio-modal-content .video-info-tab__metadata-header {
  width: 100%;
  margin-bottom: 16px;
}
#csms-studio .video-info-tab__metadata-title-row,
.csmsmedia-studio-modal-content .video-info-tab__metadata-title-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 20px;
}
#csms-studio .video-info-tab__metadata-section-title,
.csmsmedia-studio-modal-content .video-info-tab__metadata-section-title {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
#csms-studio .video-info-tab__metadata-info-item,
.csmsmedia-studio-modal-content .video-info-tab__metadata-info-item {
  height: 24px;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
#csms-studio .video-info-tab__metadata-info-item-title,
.csmsmedia-studio-modal-content .video-info-tab__metadata-info-item-title {
  width: 120px;
  margin-right: 8px;
  color: var(--csms-studio-tx-hierarchy-quaternary);
}
#csms-studio .video-info-tab__metadata-info-item-text,
.csmsmedia-studio-modal-content .video-info-tab__metadata-info-item-text {
  color: var(--csms-studio-tx-hierarchy-secondary);
  padding-left: 12px;
}
#csms-studio .video-info-tab__metadata-info-item:last-child,
.csmsmedia-studio-modal-content .video-info-tab__metadata-info-item:last-child {
  margin-bottom: 0;
}
#csms-studio .video-info-tab__tabs-wrapper,
.csmsmedia-studio-modal-content .video-info-tab__tabs-wrapper {
  padding-top: 10px;
}
#csms-studio .video-info-tab__metadata-thumbnail-row,
.csmsmedia-studio-modal-content .video-info-tab__metadata-thumbnail-row {
  width: 100%;
  height: 159px;
}
#csms-studio .video-info-tab__metadata-thumbnail-row-title,
.csmsmedia-studio-modal-content .video-info-tab__metadata-thumbnail-row-title {
  padding: 0 20px;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
#csms-studio .video-info-tab__metadata-thumbnail-row > .form-check:not(.thumbnail-checkbox),
#csms-studio .video-info-tab__metadata-thumbnail-row .form-check:not(.thumbnail-checkbox):not(.thumbnails-container .thumbnail-checkbox),
.csmsmedia-studio-modal-content .video-info-tab__metadata-thumbnail-row > .form-check:not(.thumbnail-checkbox),
.csmsmedia-studio-modal-content .video-info-tab__metadata-thumbnail-row .form-check:not(.thumbnail-checkbox):not(.thumbnails-container .thumbnail-checkbox) {
  width: 20px;
  height: 20px;
}
#csms-studio .video-info-tab__metadata-thumbnail-row > .form-check:not(.thumbnail-checkbox) .form-check-input,
#csms-studio .video-info-tab__metadata-thumbnail-row .form-check:not(.thumbnail-checkbox):not(.thumbnails-container .thumbnail-checkbox) .form-check-input,
.csmsmedia-studio-modal-content .video-info-tab__metadata-thumbnail-row > .form-check:not(.thumbnail-checkbox) .form-check-input,
.csmsmedia-studio-modal-content .video-info-tab__metadata-thumbnail-row .form-check:not(.thumbnail-checkbox):not(.thumbnails-container .thumbnail-checkbox) .form-check-input {
  width: 20px;
  height: 20px;
  border: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width=%2720%27 height=%2720%27 viewBox=%270 0 20 20%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M9.59961 1H10.4004C12.0968 1 13.3095 1.00048 14.2598 1.07812C15.198 1.15481 15.7924 1.30188 16.2695 1.54492C17.2103 2.02429 17.9757 2.78966 18.4551 3.73047C18.6981 4.20761 18.8452 4.80201 18.9219 5.74023C18.9995 6.69051 19 7.90316 19 9.59961V10.4004C19 12.0968 18.9995 13.3095 18.9219 14.2598C18.8452 15.198 18.6981 15.7924 18.4551 16.2695C17.9757 17.2103 17.2103 17.9757 16.2695 18.4551C15.7924 18.6981 15.198 18.8452 14.2598 18.9219C13.3095 18.9995 12.0968 19 10.4004 19H9.59961C7.90316 19 6.69051 18.9995 5.74023 18.9219C4.80201 18.8452 4.20761 18.6981 3.73047 18.4551C2.78966 17.9757 2.02429 17.2103 1.54492 16.2695C1.30188 15.7924 1.15481 15.198 1.07812 14.2598C1.00048 13.3095 1 12.0968 1 10.4004V9.59961C1 7.90316 1.00048 6.69051 1.07812 5.74023C1.15481 4.80201 1.30188 4.20761 1.54492 3.73047C2.02429 2.78966 2.78966 2.02429 3.73047 1.54492C4.20761 1.30188 4.80201 1.15481 5.74023 1.07812C6.69051 1.00048 7.90316 1 9.59961 1Z%27 fill=%27white%27 stroke=%27%23D3D6D9%27 stroke-width=%272%27/%3E%3C/svg%3E");
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}
#csms-studio .video-info-tab__metadata-thumbnail-row > .form-check:not(.thumbnail-checkbox) .form-check-input:checked,
#csms-studio .video-info-tab__metadata-thumbnail-row .form-check:not(.thumbnail-checkbox):not(.thumbnails-container .thumbnail-checkbox) .form-check-input:checked,
.csmsmedia-studio-modal-content .video-info-tab__metadata-thumbnail-row > .form-check:not(.thumbnail-checkbox) .form-check-input:checked,
.csmsmedia-studio-modal-content .video-info-tab__metadata-thumbnail-row .form-check:not(.thumbnail-checkbox):not(.thumbnails-container .thumbnail-checkbox) .form-check-input:checked {
  background-color: var(--csms-studio-bg-semantic-info-primary);
  background-image: url("data:image/svg+xml,%3Csvg width=%2720%27 height=%2720%27 viewBox=%270 0 20 20%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M9.59961 1H10.4004C12.0968 1 13.3095 1.00048 14.2598 1.07812C15.198 1.15481 15.7924 1.30188 16.2695 1.54492C17.2103 2.02429 17.9757 2.78966 18.4551 3.73047C18.6981 4.20761 18.8452 4.80201 18.9219 5.74023C18.9995 6.69051 19 7.90316 19 9.59961V10.4004C19 12.0968 18.9995 13.3095 18.9219 14.2598C18.8452 15.198 18.6981 15.7924 18.4551 16.2695C17.9757 17.2103 17.2103 17.9757 16.2695 18.4551C15.7924 18.6981 15.198 18.8452 14.2598 18.9219C13.3095 18.9995 12.0968 19 10.4004 19H9.59961C7.90316 19 6.69051 18.9995 5.74023 18.9219C4.80201 18.8452 4.20761 18.6981 3.73047 18.4551C2.78966 17.9757 2.02429 17.2103 1.54492 16.2695C1.30188 15.7924 1.15481 15.198 1.07812 14.2598C1.00048 13.3095 1 12.0968 1 10.4004V9.59961C1 7.90316 1.00048 6.69051 1.07812 5.74023C1.15481 4.80201 1.30188 4.20761 1.54492 3.73047C2.02429 2.78966 2.78966 2.02429 3.73047 1.54492C4.20761 1.30188 4.80201 1.15481 5.74023 1.07812C6.69051 1.00048 7.90316 1 9.59961 1Z%27 fill=%27%230066E0%27 stroke=%27transparent%27 stroke-width=%272%27/%3E%3Cpath d=%27M6.5 10L9 12.5L13.5 8%27 stroke=%27white%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
}
#csms-studio .video-info-tab__metadata-thumbnail-row > .form-check:not(.thumbnail-checkbox) .form-check-input:indeterminate,
#csms-studio .video-info-tab__metadata-thumbnail-row .form-check:not(.thumbnail-checkbox):not(.thumbnails-container .thumbnail-checkbox) .form-check-input:indeterminate,
.csmsmedia-studio-modal-content .video-info-tab__metadata-thumbnail-row > .form-check:not(.thumbnail-checkbox) .form-check-input:indeterminate,
.csmsmedia-studio-modal-content .video-info-tab__metadata-thumbnail-row .form-check:not(.thumbnail-checkbox):not(.thumbnails-container .thumbnail-checkbox) .form-check-input:indeterminate {
  background-color: var(--csms-studio-bg-semantic-info-primary);
  background-image: url("data:image/svg+xml,<svg width=%2720%27 height=%2720%27 viewBox=%270 0 20 20%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path d=%27M9.59961 1H10.4004C12.0968 1 13.3095 1.00048 14.2598 1.07812C15.198 1.15481 15.7924 1.30188 16.2695 1.54492C17.2103 2.02429 17.9757 2.78966 18.4551 3.73047C18.6981 4.20761 18.8452 4.80201 18.9219 5.74023C18.9995 6.69051 19 7.90316 19 9.59961V10.4004C19 12.0968 18.9995 13.3095 18.9219 14.2598C18.8452 15.198 18.6981 15.7924 18.4551 16.2695C17.9757 17.2103 17.2103 17.9757 16.2695 18.4551C15.7924 18.6981 15.198 18.8452 14.2598 18.9219C13.3095 18.9995 12.0968 19 10.4004 19H9.59961C7.90316 19 6.69051 18.9995 5.74023 18.9219C4.80201 18.8452 4.20761 18.6981 3.73047 18.4551C2.78966 17.9757 2.02429 17.2103 1.54492 16.2695C1.30188 15.7924 1.15481 15.198 1.07812 14.2598C1.00048 13.3095 1 12.0968 1 10.4004V9.59961C1 7.90316 1.00048 6.69051 1.07812 5.74023C1.15481 4.80201 1.30188 4.20761 1.54492 3.73047C2.02429 2.78966 2.78966 2.02429 3.73047 1.54492C4.20761 1.30188 4.80201 1.15481 5.74023 1.07812C6.69051 1.00048 7.90316 1 9.59961 1Z%27 fill=%27%230066E0%27 stroke=%27transparent%27 stroke-width=%272%27/><rect x=%275%27 y=%278.5%27 width=%2710%27 height=%273%27 fill=%27white%27/></svg>");
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
}
#csms-studio .video-info-tab__metadata-thumbnail-row > .form-check:not(.thumbnail-checkbox) .form-check-input:hover:not(:checked):not(:disabled),
#csms-studio .video-info-tab__metadata-thumbnail-row .form-check:not(.thumbnail-checkbox):not(.thumbnails-container .thumbnail-checkbox) .form-check-input:hover:not(:checked):not(:disabled),
.csmsmedia-studio-modal-content .video-info-tab__metadata-thumbnail-row > .form-check:not(.thumbnail-checkbox) .form-check-input:hover:not(:checked):not(:disabled),
.csmsmedia-studio-modal-content .video-info-tab__metadata-thumbnail-row .form-check:not(.thumbnail-checkbox):not(.thumbnails-container .thumbnail-checkbox) .form-check-input:hover:not(:checked):not(:disabled) {
  opacity: 0.8;
}
#csms-studio .video-info-tab__metadata-thumbnail-row > .form-check:not(.thumbnail-checkbox) .form-check-input:disabled,
#csms-studio .video-info-tab__metadata-thumbnail-row .form-check:not(.thumbnail-checkbox):not(.thumbnails-container .thumbnail-checkbox) .form-check-input:disabled,
.csmsmedia-studio-modal-content .video-info-tab__metadata-thumbnail-row > .form-check:not(.thumbnail-checkbox) .form-check-input:disabled,
.csmsmedia-studio-modal-content .video-info-tab__metadata-thumbnail-row .form-check:not(.thumbnail-checkbox):not(.thumbnails-container .thumbnail-checkbox) .form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#csms-studio .video-info-tab__metadata-thumbnail-row-button,
.csmsmedia-studio-modal-content .video-info-tab__metadata-thumbnail-row-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
#csms-studio .video-info-tab__metadata-thumbnail-row-button .list-button,
.csmsmedia-studio-modal-content .video-info-tab__metadata-thumbnail-row-button .list-button {
  width: 77px;
  height: 36px;
  padding: 0 16px;
  background-color: var(--csms-studio-bg-neutral-white);
  border-radius: 8px;
  border: 1px solid var(--csms-studio-bo-hierarchy-quaternary);
  color: var(--csms-studio-tx-hierarchy-secondary);
  cursor: pointer;
}
#csms-studio .video-info-tab__metadata-thumbnail-row-button .select-button,
.csmsmedia-studio-modal-content .video-info-tab__metadata-thumbnail-row-button .select-button {
  width: 77px;
  height: 36px;
  border-radius: 8px;
  padding: 0 16px;
  background-color: #0075F8;
  color: var(--csms-studio-tx-neutral-white-solid);
  cursor: pointer;
}
#csms-studio .video-info-tab__metadata-title-text,
.csmsmedia-studio-modal-content .video-info-tab__metadata-title-text {
  overflow: break-all;
  word-break: break-all;
}
#csms-studio .video-info-tab__metadata-flexgrow,
.csmsmedia-studio-modal-content .video-info-tab__metadata-flexgrow {
  flex-grow: 1;
}
#csms-studio .video-info-tab__metadata-duration,
.csmsmedia-studio-modal-content .video-info-tab__metadata-duration {
  min-width: 50%;
}
#csms-studio .video-info-tab__thumbnails-wrapper,
.csmsmedia-studio-modal-content .video-info-tab__thumbnails-wrapper {
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
}
#csms-studio .video-info-tab__loading-container,
.csmsmedia-studio-modal-content .video-info-tab__loading-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px;
  width: 100%;
  border-top: 1px solid #ddd;
}
#csms-studio .video-info-tab__loading-header,
.csmsmedia-studio-modal-content .video-info-tab__loading-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#csms-studio .video-info-tab__loading-bars,
.csmsmedia-studio-modal-content .video-info-tab__loading-bars {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#csms-studio .video-info-tab__loading-item,
.csmsmedia-studio-modal-content .video-info-tab__loading-item {
  flex: 1;
  margin: 0 1px;
}
#csms-studio .video-info-tab__loading-skeleton--thumbnail,
.csmsmedia-studio-modal-content .video-info-tab__loading-skeleton--thumbnail {
  width: 70%;
  height: 100px;
  margin: 0 auto;
}
#csms-studio .video-info-tab__loading-skeleton--title,
.csmsmedia-studio-modal-content .video-info-tab__loading-skeleton--title {
  width: 80%;
  margin: 0 auto;
}
#csms-studio .video-info-tab__loading-skeleton--date,
.csmsmedia-studio-modal-content .video-info-tab__loading-skeleton--date {
  width: 60%;
  margin: 0 auto;
}
#csms-studio .video-info-tab__loading-skeleton--duration,
.csmsmedia-studio-modal-content .video-info-tab__loading-skeleton--duration {
  width: 40%;
  margin: 0 auto;
}
#csms-studio .video-info-tab__timeline-container,
.csmsmedia-studio-modal-content .video-info-tab__timeline-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* Video Description Component Styles */
}
#csms-studio .video-description__clickable-box,
.csmsmedia-studio-modal-content .video-description__clickable-box {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}
#csms-studio .video-description__clickable-box:hover,
.csmsmedia-studio-modal-content .video-description__clickable-box:hover {
  padding: 8px;
  margin: -8px;
}
#csms-studio .video-description__clickable-box:hover .edit-icon,
.csmsmedia-studio-modal-content .video-description__clickable-box:hover .edit-icon {
  opacity: 1;
  visibility: visible;
}
#csms-studio .video-description__clickable-box .edit-icon,
.csmsmedia-studio-modal-content .video-description__clickable-box .edit-icon {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
#csms-studio .video-description__clickable-box .edit-icon:hover,
.csmsmedia-studio-modal-content .video-description__clickable-box .edit-icon:hover {
  background-color: rgba(25, 118, 210, 0.04);
}
#csms-studio .video-description__text,
.csmsmedia-studio-modal-content .video-description__text {
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-height: 2.8em;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* Video Title Component Styles */
}
#csms-studio .video-title__text-field,
.csmsmedia-studio-modal-content .video-title__text-field {
  border: none;
  outline: none;
  padding: 8px 12px 8px 4px;
  background: transparent;
  color: var(--csms-studio-tx-hierarchy-secondary);
  font-size: inherit;
  min-width: 200px;
  width: auto;
}
#csms-studio .video-title__editing-box,
.csmsmedia-studio-modal-content .video-title__editing-box {
  display: inline-flex;
  align-items: center;
  background-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  border-radius: 8px;
  gap: 8px;
  padding: 4px 8px;
}
#csms-studio .video-title__check-button,
.csmsmedia-studio-modal-content .video-title__check-button {
  color: #1976d2 !important;
  padding: 4px !important;
}
#csms-studio .video-title__check-button:hover,
.csmsmedia-studio-modal-content .video-title__check-button:hover {
  background-color: var(fg/hierarchy/quinary) !important;
}
#csms-studio .video-title__clickable-box,
.csmsmedia-studio-modal-content .video-title__clickable-box {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 12px;
}
#csms-studio .video-title__clickable-box:hover .edit-icon,
.csmsmedia-studio-modal-content .video-title__clickable-box:hover .edit-icon {
  opacity: 1;
  visibility: visible;
}
#csms-studio .video-title__clickable-box .edit-icon,
.csmsmedia-studio-modal-content .video-title__clickable-box .edit-icon {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
#csms-studio .video-title__text,
.csmsmedia-studio-modal-content .video-title__text {
  white-space: nowrap;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#csms-studio .video-title__video-real-file-name,
.csmsmedia-studio-modal-content .video-title__video-real-file-name {
  width: 100%;
  margin-top: 10px;
  font-size: 14px;
  color: #aaa;
  white-space: nowrap;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* Box Component Styles */
}
#csms-studio .box__flexgrow,
.csmsmedia-studio-modal-content .box__flexgrow {
  flex-grow: 1;
}
#csms-studio .box__video-description,
.csmsmedia-studio-modal-content .box__video-description {
  width: 100%;
  margin-bottom: 20px;
}
#csms-studio .box__flex-center,
.csmsmedia-studio-modal-content .box__flex-center {
  display: flex;
  align-items: center;
}
#csms-studio .box__flex-column,
.csmsmedia-studio-modal-content .box__flex-column {
  display: flex;
  flex-direction: column;
}
#csms-studio .box__flex-between,
.csmsmedia-studio-modal-content .box__flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#csms-studio .box__width-30,
.csmsmedia-studio-modal-content .box__width-30 {
  width: 30%;
}
#csms-studio .box__width-50,
.csmsmedia-studio-modal-content .box__width-50 {
  width: 50%;
}
#csms-studio .box__width-100,
.csmsmedia-studio-modal-content .box__width-100 {
  width: 100%;
}
#csms-studio .box__border-top,
.csmsmedia-studio-modal-content .box__border-top {
  border-top: 1px solid #e0e0e0;
  padding-top: 16px;
  margin-top: 16px;
}
#csms-studio .box__margin-bottom-2,
.csmsmedia-studio-modal-content .box__margin-bottom-2 {
  margin-bottom: 16px;
}
#csms-studio .box__flex-grow-1,
.csmsmedia-studio-modal-content .box__flex-grow-1 {
  flex-grow: 1;
}
#csms-studio .timeline-container .timeline-layout .col-play-time,
.csmsmedia-studio-modal-content .timeline-container .timeline-layout .col-play-time {
  display: flex;
  align-items: center;
  padding-top: 20px;
  padding-left: 20px;
}
#csms-studio .timeline-container .timeline-layout .col-play-time div,
.csmsmedia-studio-modal-content .timeline-container .timeline-layout .col-play-time div {
  line-height: 35px;
  border: 1px solid lightgray;
  border-radius: 4px;
  text-align: center;
}
#csms-studio .timeline-container .timeline-layout .col-play-time .timeline-history,
.csmsmedia-studio-modal-content .timeline-container .timeline-layout .col-play-time .timeline-history {
  margin-right: 30px;
}
#csms-studio .timeline-container .timeline-layout .spacer,
.csmsmedia-studio-modal-content .timeline-container .timeline-layout .spacer {
  flex-grow: 1;
}
#csms-studio .timeline-container .timeline-layout .col-zoom-slider,
.csmsmedia-studio-modal-content .timeline-container .timeline-layout .col-zoom-slider {
  padding: 0;
  padding-right: 20px;
}
#csms-studio .timeline-container .timeline-layout .col-zoom-slider .box-zoom-slider,
.csmsmedia-studio-modal-content .timeline-container .timeline-layout .col-zoom-slider .box-zoom-slider {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

/* Responsive Design */
/* 예전 버전 */
/* 모바일 대응 스타일 */
@media (max-width: 768px) {
  #csms-studio .video-info-tab__metadata-section-title,
  .csmsmedia-studio-modal-content .video-info-tab__metadata-section-title {
    padding-left: 24px;
    white-space: nowrap;
    justify-content: flex-start;
  }
  #csms-studio .video-info-tab__metadata-section,
  .csmsmedia-studio-modal-content .video-info-tab__metadata-section {
    padding-left: 24px;
  }
  #csms-studio .video-info-tab__metadata-info-item,
  .csmsmedia-studio-modal-content .video-info-tab__metadata-info-item {
    justify-content: flex-start;
  }
  #csms-studio .video-info-tab__metadata-info-item-title,
  .csmsmedia-studio-modal-content .video-info-tab__metadata-info-item-title {
    width: auto;
    white-space: nowrap;
    text-align: left;
  }
  #csms-studio .video-info-tab__metadata-info-item-text,
  .csmsmedia-studio-modal-content .video-info-tab__metadata-info-item-text {
    text-align: left;
    padding-left: 12px;
  }
  #csms-studio .video-info-tab__metadata-thumbnail-row .video-info-tab__metadata-section-title,
  .csmsmedia-studio-modal-content .video-info-tab__metadata-thumbnail-row .video-info-tab__metadata-section-title {
    padding-left: 24px;
  }
  #csms-studio .thumbnails-container,
  .csmsmedia-studio-modal-content .thumbnails-container {
    padding: 0 0 8px 12px;
  }
  #csms-studio .thumbnail-modal .modal-container,
  .csmsmedia-studio-modal-content .thumbnail-modal .modal-container {
    padding: 20px;
    width: 100%;
    margin: 0;
  }
  #csms-studio .thumbnail-modal .modal-container .modal-header,
  .csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-header {
    margin-bottom: 16px;
  }
  #csms-studio .thumbnail-modal .modal-container .modal-header h2,
  .csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-header h2 {
    font-size: 20px;
  }
  #csms-studio .thumbnail-modal .modal-container .modal-body .dropzone-area,
  .csmsmedia-studio-modal-content .thumbnail-modal .modal-container .modal-body .dropzone-area {
    height: 400px;
  }
  #csms-studio .thumbnail-modal .modal-container .button-container,
  .csmsmedia-studio-modal-content .thumbnail-modal .modal-container .button-container {
    justify-content: center;
  }
  #csms-studio .video-info-tab__metadata-thumbnail-row-button,
  .csmsmedia-studio-modal-content .video-info-tab__metadata-thumbnail-row-button {
    justify-content: center;
  }
}
/*!***************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/resources/assets/styles/moodle.scss ***!
  \***************************************************************************************************************************************************************/
@charset "UTF-8";
/*
 moodle styles
 */
/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

:root,
[data-bs-theme=light] {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-transparent: transparent;
  --csms-studio-tx-hierarchy-primary: #161819;
  --csms-studio-tx-hierarchy-secondary: #2c2f32;
  --csms-studio-tx-hierarchy-tertiary: #575e64;
  --csms-studio-tx-hierarchy-quaternary: #6d767e;
  --csms-studio-tx-hierarchy-quinary: #899199;
  --csms-studio-tx-hierarchy-senary: #c4c8cc;
  --csms-studio-tx-hierarchy-senary-subtle: #e0e3e5;
  --csms-studio-tx-neutral-white: #ffffff;
  --csms-studio-tx-neutral-black: #000000;
  --csms-studio-tx-neutral-black-solid: #000000;
  --csms-studio-tx-neutral-white-solid: #ffffff;
  --csms-studio-tx-neutral-b20p-disabled: rgba(0, 0, 0, 0.2);
  --csms-studio-tx-neutral-w80p-disabled: rgba(255, 255, 255, 0.8);
  --csms-studio-tx-coursemos-primary: #0075F8;
  --csms-studio-tx-coursemos-secondary: #005DC8;
  --csms-studio-tx-coursemos-tertiary: #0052AF;
  --csms-studio-tx-coursemos-quaternary: #97C8FF;
  --csms-studio-tx-coursemos-quinary: #CBE3FF;
  --csms-studio-tx-coursemos-quinary-subtle: #D9EAFF;
  --csms-studio-tx-coursemos-senary: #E5F1FF;
  --csms-studio-tx-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-tx-semantic-nega-primary: #f04438;
  --csms-studio-tx-semantic-nega-secondary: #dc1e11;
  --csms-studio-tx-semantic-nega-tertiary: #c11a0e;
  --csms-studio-tx-semantic-nega-quaternary: #8a130a;
  --csms-studio-tx-semantic-nega-quinary: #530b06;
  --csms-studio-tx-semantic-nega-senary: #fbebed;
  --csms-studio-tx-semantic-info-primary: #1181f9;
  --csms-studio-tx-semantic-info-secondary: #0673e7;
  --csms-studio-tx-semantic-info-tertiary: #0564ca;
  --csms-studio-tx-semantic-info-quaternary: #c0defd;
  --csms-studio-tx-semantic-info-quinary: #d5e9fe;
  --csms-studio-tx-semantic-info-senary: #e0eefe;
  --csms-studio-tx-semantic-posi-primary: #1ea465;
  --csms-studio-tx-semantic-posi-secondary: #188351;
  --csms-studio-tx-semantic-posi-tertiary: #157347;
  --csms-studio-tx-semantic-posi-quaternary: #0f5233;
  --csms-studio-tx-semantic-posi-quinary: #09311e;
  --csms-studio-tx-semantic-posi-senary: #e4faf0;
  --csms-studio-tx-semantic-noti-primary: #ffc107;
  --csms-studio-tx-semantic-prog-primary: #fd7e14;
  --csms-studio-tx-semantic-etc-primary: #6f42c1;
  --csms-studio-bo-hierarchy-primary: #eeeff0;
  --csms-studio-bo-hierarchy-secondary: #e0e3e5;
  --csms-studio-bo-hierarchy-tertiary: #d3d6d9;
  --csms-studio-bo-hierarchy-quaternary: #c4c8cc;
  --csms-studio-bo-hierarchy-quaternary-subtle: #6d767e;
  --csms-studio-bo-hierarchy-quinary: #41474b;
  --csms-studio-bo-hierarchy-senary: #161819;
  --csms-studio-bo-neutral-white: #ffffff;
  --csms-studio-bo-neutral-black: #000000;
  --csms-studio-bo-neutral-white-solid: #ffffff;
  --csms-studio-bo-neutral-black-solid: #000000;
  --csms-studio-bo-neutral-b30p: rgba(0, 0, 0, 0.3);
  --csms-studio-bo-coursemos-primary: #0075F8;
  --csms-studio-bo-coursemos-secondary: #005DC8;
  --csms-studio-bo-coursemos-tertiary: #0052AF;
  --csms-studio-bo-coursemos-quaternary: #97C8FF;
  --csms-studio-bo-coursemos-quinary: #CBE3FF;
  --csms-studio-bo-coursemos-senary: #E5F1FF;
  --csms-studio-bo-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bo-semantic-nega-primary: #f04438;
  --csms-studio-bo-semantic-nega-secondary: #dc1e11;
  --csms-studio-bo-semantic-nega-tertiary: #c11a0e;
  --csms-studio-bo-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bo-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-bo-semantic-info-primary: #1181f9;
  --csms-studio-bo-semantic-info-secondary: #0673e7;
  --csms-studio-bo-semantic-info-tertiary: #0564ca;
  --csms-studio-bo-semantic-info-quaternary: #c0defd;
  --csms-studio-bo-semantic-info-quinary: #d5e9fe;
  --csms-studio-bo-semantic-info-senary: #e0eefe;
  --csms-studio-bo-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bo-semantic-info-40p: rgba(17, 129, 249, 0.4);
  --csms-studio-bo-semantic-posi-primary: #1ea465;
  --csms-studio-bo-semantic-posi-secondary: #188351;
  --csms-studio-bo-semantic-posi-tertiary: #157347;
  --csms-studio-bo-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bo-semantic-warn-primary: #ffc107;
  --csms-studio-bo-semantic-noti-primary: #ffc107;
  --csms-studio-bo-semantic-prog-primary: #fd7e14;
  --csms-studio-bo-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-hierarchy-primary: #fcfcfc;
  --csms-studio-bg-hierarchy-primary-subtle: #f5f5f5;
  --csms-studio-bg-hierarchy-secondary: #f0f1f2;
  --csms-studio-bg-hierarchy-secondary-subtle: #eeeff0;
  --csms-studio-bg-hierarchy-tertiary: #e0e3e5;
  --csms-studio-bg-hierarchy-quaternary: #d3d6d9;
  --csms-studio-bg-hierarchy-quinary: #899199;
  --csms-studio-bg-hierarchy-senary: #6d767e;
  --csms-studio-bg-hierarchy-senary-subtle: #575e64;
  --csms-studio-bg-neutral-white: #ffffff;
  --csms-studio-bg-neutral-black: #000000;
  --csms-studio-bg-neutral-white-solid: #ffffff;
  --csms-studio-bg-neutral-black-solid: #000000;
  --csms-studio-bg-neutral-b6p-hovered: rgba(0, 0, 0, 0.06);
  --csms-studio-bg-neutral-b10p: rgba(0, 0, 0, 0.1);
  --csms-studio-bg-neutral-b15p: rgba(0, 0, 0, 0.15);
  --csms-studio-bg-neutral-b60p: rgba(0, 0, 0, 0.6);
  --csms-studio-bg-neutral-b80p: rgba(0, 0, 0, 0.8);
  --csms-studio-bg-neutral-w90p: rgba(255, 255, 255, 0.9);
  --csms-studio-bg-neutral-w50p: rgba(255, 255, 255, 0.5);
  --csms-studio-bg-neutral-w30p: rgba(255, 255, 255, 0.3);
  --csms-studio-bg-neutral-w20p: rgba(255, 255, 255, 0.2);
  --csms-studio-bg-neutral-w5p: rgba(255, 255, 255, 0.05);
  --csms-studio-bg-neutral-w1p: rgba(255, 255, 255, 0.01);
  --csms-studio-bg-coursemos-primary: #0075F8;
  --csms-studio-bg-coursemos-secondary: #0069E1;
  --csms-studio-bg-coursemos-tertiary: #005DC8;
  --csms-studio-bg-coursemos-quaternary: #97C8FF;
  --csms-studio-bg-coursemos-quinary: #CBE3FF;
  --csms-studio-bg-coursemos-quinary-subtle: #D9EAFF;
  --csms-studio-bg-coursemos-senary: #E5F1FF;
  --csms-studio-bg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bg-semantic-nega-primary: #f04438;
  --csms-studio-bg-semantic-nega-secondary: #dc1e11;
  --csms-studio-bg-semantic-nega-tertiary: #c11a0e;
  --csms-studio-bg-semantic-nega-quaternary: #ea8791;
  --csms-studio-bg-semantic-nega-quinary: #f8d7da;
  --csms-studio-bg-semantic-nega-senary: #fbebed;
  --csms-studio-bg-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bg-semantic-info-primary: #1181f9;
  --csms-studio-bg-semantic-info-secondary: #0564ca;
  --csms-studio-bg-semantic-info-tertiary: #0456ad;
  --csms-studio-bg-semantic-info-quaternary: #c0defd;
  --csms-studio-bg-semantic-info-quinary: #d5e9fe;
  --csms-studio-bg-semantic-info-senary: #e0eefe;
  --csms-studio-bg-semantic-info-senary-subtle: #eaf4fe;
  --csms-studio-bg-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bg-semantic-posi-primary: #1ea465;
  --csms-studio-bg-semantic-posi-secondary: #188351;
  --csms-studio-bg-semantic-posi-tertiary: #157347;
  --csms-studio-bg-semantic-posi-quaternary: #5fe2a5;
  --csms-studio-bg-semantic-posi-quinary: #caf5e1;
  --csms-studio-bg-semantic-posi-senary: #e4faf0;
  --csms-studio-bg-semantic-posi-30p: rgba(30, 164, 101, 0.3);
  --csms-studio-bg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-posi-50p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-warn-primary: #ffc107;
  --csms-studio-bg-semantic-warn-secondary: #d09c00;
  --csms-studio-bg-semantic-warn-tertiary: #9c7500;
  --csms-studio-bg-semantic-warn-quaternary: #ffda69;
  --csms-studio-bg-semantic-warn-quinary: #fff3cd;
  --csms-studio-bg-semantic-warn-quinary-subtle: #ffecb4;
  --csms-studio-bg-semantic-warn-senary: #fff9e6;
  --csms-studio-bg-semantic-prog-primary: #fd7e14;
  --csms-studio-bg-semantic-prog-secondary: #d54d03;
  --csms-studio-bg-semantic-prog-tertiary: #ba4303;
  --csms-studio-bg-semantic-prog-quaternary: #fda271;
  --csms-studio-bg-semantic-prog-quinary: #fee0d0;
  --csms-studio-bg-semantic-prog-senary: #fff0e7;
  --csms-studio-bg-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-semantic-etc-secondary: #58339d;
  --csms-studio-bg-semantic-etc-tertiary: #4d2d89;
  --csms-studio-bg-semantic-etc-quaternary: #a98eda;
  --csms-studio-bg-semantic-etc-quinary: #e2d9f3;
  --csms-studio-bg-semantic-etc-senary: #f1ecf9;
  --csms-studio-fg-hierarchy-primary: #161819;
  --csms-studio-fg-hierarchy-secondary: #2c2f32;
  --csms-studio-fg-hierarchy-tertiary: #575e64;
  --csms-studio-fg-hierarchy-quaternary: #6d767e;
  --csms-studio-fg-hierarchy-quinary: #899199;
  --csms-studio-fg-hierarchy-senary: #c4c8cc;
  --csms-studio-fg-hierarchy-senary-subtle: #e0e3e5;
  --csms-studio-fg-neutral-white: #ffffff;
  --csms-studio-fg-neutral-black: #000000;
  --csms-studio-fg-neutral-white-solid: #ffffff;
  --csms-studio-fg-neutral-black-solid: #000000;
  --csms-studio-fg-neutral-w50p-solid: rgba(255, 255, 255, 0.5);
  --csms-studio-fg-neutral-w80p-solid: rgba(255, 255, 255, 0.8);
  --csms-studio-fg-coursemos-primary: #0075F8;
  --csms-studio-fg-coursemos-secondary: #005DC8;
  --csms-studio-fg-coursemos-tertiary: #0052AF;
  --csms-studio-fg-coursemos-quaternary: #2F90FF;
  --csms-studio-fg-coursemos-quinary: #CBE3FF;
  --csms-studio-fg-coursemos-senary: #E5F1FF;
  --csms-studio-fg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-fg-coursemos-primary-50p: rgba(0, 117, 248, 0.5);
  --csms-studio-fg-semantic-nega: #f04438;
  --csms-studio-fg-semantic-nega-quinary: #530b06;
  --csms-studio-fg-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-warn-primary: #ffc107;
  --csms-studio-fg-semantic-warn-senary: #ffda69;
  --csms-studio-fg-semantic-posi: #1ea465;
  --csms-studio-fg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-fg-semantic-info: #1181f9;
  --csms-studio-fg-semantic-prog: #fd7e14;
  --csms-studio-fg-semantic-etc: #6f42c1;
  --csms-studio-ut-school-primary: #0075F8;
  --csms-studio-ut-school-secondary: #2F90FF;
  --csms-studio-ut-graph-gray-primary: #a7adb2;
  --csms-studio-ut-graph-gray-secondary: #eeeff0;
  --csms-studio-ut-graph-blue-primary: #0673e7;
  --csms-studio-ut-graph-blue-secondary: #6db2fb;
  --csms-studio-ut-graph-blue-tertiary: #7DBAFF;
  --csms-studio-ut-graph-blue-quaternary: #CBE3FF;
  --csms-studio-ut-graph-blue-quinary: #D9EAFF;
  --csms-studio-ut-graph-green-primary: #57ae00;
  --csms-studio-ut-graph-green-secondary: #cbea00;
  --csms-studio-ut-graph-green-quaternary: #d7f0ac;
  --csms-studio-ut-graph-violet-primary: #7d55c8;
  --csms-studio-ut-graph-yellow-secondary: #ffe082;
  --csms-studio-border-radius-4: 4px;
  --csms-studio-border-radius-6: 6px;
  --csms-studio-border-radius-8: 8px;
  --csms-studio-border-radius-10: 10px;
  --csms-studio-border-radius-12: 12px;
  --csms-studio-border-radius-16: 16px;
  --csms-studio-border-radius-32: 32px;
  --csms-studio-border-radius-full: 999px;
  --csms-studio-space-2: 2px;
  --csms-studio-space-4: 4px;
  --csms-studio-space-6: 6px;
  --csms-studio-space-8: 8px;
  --csms-studio-space-10: 10px;
  --csms-studio-space-12: 12px;
  --csms-studio-space-16: 16px;
  --csms-studio-space-18: 18px;
  --csms-studio-space-20: 20px;
  --csms-studio-space-24: 24px;
  --csms-studio-space-28: 28px;
  --csms-studio-space-32: 32px;
  --csms-studio-space-40: 40px;
  --csms-studio-space-80: 80px;
  --csms-studio-gap-2: 2px;
  --csms-studio-gap-4: 4px;
  --csms-studio-gap-6: 6px;
  --csms-studio-gap-8: 8px;
  --csms-studio-gap-10: 10px;
  --csms-studio-gap-12: 12px;
  --csms-studio-gap-16: 16px;
  --csms-studio-gap-18: 18px;
  --csms-studio-gap-20: 20px;
  --csms-studio-gap-24: 24px;
  --csms-studio-gap-28: 28px;
  --csms-studio-gap-32: 32px;
  --csms-studio-gap-40: 40px;
  --csms-studio-gap-80: 80px;
}

.csms-studio-box-shadow-xsm {
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.csms-studio-box-shadow-sm {
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.csms-studio-box-shadow-md {
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}

.csms-studio-box-shadow-lg {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.csms-studio-box-shadow-xl {
  box-shadow: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-2xl {
  box-shadow: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-3xl {
  box-shadow: 0 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
}

/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

.csms-studio-heading-2xlg {
  --csms-studio-heading-font-weight: 700;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-xlg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 40px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 56px;
  margin-bottom: 0;
}

.csms-studio-heading-lg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 32px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 45px;
  margin-bottom: 0;
}

.csms-studio-heading-md {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 28px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-sm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm-semibold {
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-label-xlg-bold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-semibold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-medium {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-normal {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-bold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-semibold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-medium {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-normal {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-bold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-semibold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-medium {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-normal {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-bold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-semibold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-medium {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-normal {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-bold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-semibold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-medium {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-normal {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-bold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-semibold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-medium {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-normal {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-caption-lg {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-md {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-sm {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 10px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 12px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  padding: 20px;
  border-radius: var(--csms-studio-border-radius-8);
}
.csms-studio-search-container .search-title {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csms-studio-search-container .search-box {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.csms-studio-search-container .search-box .search-box-select-input {
  display: flex;
  align-items: center;
  gap: 4px;
}

.csms-studio-flex-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.csms-studio-flex-box.csms-studio-flex-box-sm {
  gap: 4px;
}

.csms-studio-user-picture {
  display: flex;
  align-items: center;
  gap: 8px;
}
.csms-studio-user-picture img {
  border-radius: 50%;
}
.csms-studio-user-picture.csms-studio-user-picture-sm {
  gap: 4px;
}

.csms-studio-box .csms-studio-box-header .button-container .bar, .csms-studio-bar {
  --csms-studio-bar-height: 32px;
  width: 1px;
  height: var(--csms-studio-bar-height);
  background-color: var(--csms-studio-bo-hierarchy-secondary);
}

.csms-studio-bar-10 {
  --csms-studio-bar-height: 10px;
}

.csms-studio-bar-32 {
  --csms-studio-bar-height: 32px;
}

.csms-studio-horizontal-bar {
  width: 100%;
  height: 1px;
  background-color: var(--csms-studio-bo-hierarchy-secondary);
}

.card {
  --bs-card-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --bs-card-color: var(--csms-studio-tx-hierarchy-secondary);
}

.card-csms {
  --bs-card-spacer-y: 16px;
  --bs-card-spacer-x: 16px;
  --bs-card-border-radius: 16px;
  --bs-card-inner-border-radius: 16px 16px 0 0;
  /*
  .card-body {
      padding: 16px;
  }
  */
}
.card-csms .card-body {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-title-xlg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
}

.csms-studio-title-lg {
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
}

.csms-studio-title-md {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
  margin: 0;
}

.csms-studio-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
}
.csms-studio-box.csms-studio-box-gap-none {
  gap: 0;
}
.csms-studio-box .csms-studio-box-header {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 36px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
  margin: 0;
}
.csms-studio-box .csms-studio-box-header .csms-studio-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
  margin: 0;
  margin-bottom: 0;
}
.csms-studio-box .csms-studio-box-header .totalcount {
  display: flex;
  align-items: center;
  gap: 2px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-box .csms-studio-box-header .totalcount span {
  color: var(--csms-studio-tx-coursemos-primary);
}
.csms-studio-box .csms-studio-box-header .button-container {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.csms-studio-box .csms-studio-box-header .button-container .button-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.csms-studio-box .csms-studio-box-content {
  width: 100%;
}

.csms-studio-box-lg .csms-studio-box-header {
  gap: 4px;
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
}
.csms-studio-box-lg .csms-studio-box-header .btn-csms-studio-icon {
  flex-shrink: 0;
}
.csms-studio-box-lg .csms-studio-box-header .csms-studio-title {
  display: flex;
  align-items: center;
  gap: 4px;
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
  margin-bottom: 0;
}
.csms-studio-box-lg .csms-studio-box-header .csms-studio-title span {
  color: var(--csms-studio-tx-coursemos-primary);
}

.csms-studio-box-xlg .csms-studio-box-header {
  gap: 8px;
  padding-left: 8px;
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
}
.csms-studio-box-xlg .csms-studio-box-header .title-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
.csms-studio-box-xlg .csms-studio-box-header .title-badge .csms-studio-title {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
  margin-bottom: 0;
}
.csms-studio-box-xlg .csms-studio-box-header .title-badge .badge {
  flex-shrink: 0;
  display: flex;
  padding: 2px 8px;
  justify-content: center;
  align-items: center;
  border-radius: var(--csms-studio-border-radius-6);
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-bg-neutral-white);
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-semantic-info-primary);
}
.csms-studio-box-xlg .csms-studio-box-header .date {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}

.csms-studio-container {
  --csms-studio-container-gap: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--csms-studio-container-gap);
}
.csms-studio-container > * {
  width: 100%;
}

.csms-studio-container-lg {
  --csms-studio-container-gap: 40px;
}

.csms-studio-container-xlg {
  --csms-studio-container-gap: 56px;
}

.btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn.focus, .btn:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn.focus.hover, .btn:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn:disabled, .btn.disabled {
  opacity: 0.4;
}
.btn.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}

.btn-primary,
.btn-csms-studio-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-primary.hover,
.btn-csms-studio-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-primary.focus, .btn-primary:focus,
.btn-csms-studio-primary.focus,
.btn-csms-studio-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-primary.focus.hover, .btn-primary:focus:hover,
.btn-csms-studio-primary.focus.hover,
.btn-csms-studio-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-primary:disabled, .btn-primary.disabled,
.btn-csms-studio-primary:disabled,
.btn-csms-studio-primary.disabled {
  opacity: 0.4;
}
.btn-primary.btn-csms-studio-svg,
.btn-csms-studio-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-primary.btn-csms-studio-svg-right,
.btn-csms-studio-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-primary svg,
.btn-csms-studio-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-primary svg .svg-color[stroke],
.btn-csms-studio-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-primary svg .svg-color[fill],
.btn-csms-studio-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-primary,
.btn-csms-studio-primary {
  --bs-btn-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-bg: var(--csms-studio-bg-coursemos-primary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-hover-bg: var(--csms-studio-bg-coursemos-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-active-bg: var(--csms-studio-bg-coursemos-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-disabled-bg: var(--csms-studio-bg-coursemos-primary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-coursemos-primary);
}
.btn-primary svg .svg-color[stroke],
.btn-csms-studio-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-neutral-white-solid);
}
.btn-primary svg .svg-color[fill],
.btn-csms-studio-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-neutral-white-solid);
}
.btn-primary.focus, .btn-primary:focus,
.btn-csms-studio-primary.focus,
.btn-csms-studio-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-secondary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-secondary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-secondary.focus, .btn-csms-studio-secondary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-secondary.focus.hover, .btn-csms-studio-secondary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-secondary:disabled, .btn-csms-studio-secondary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-secondary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-secondary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-secondary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-secondary {
  --bs-btn-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-coursemos-quinary-subtle);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-coursemos-quinary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-coursemos-quaternary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-coursemos-quinary-subtle);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-coursemos-quinary-subtle);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-coursemos-senary);
}

.btn-csms-studio-tertiary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-tertiary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-tertiary.focus, .btn-csms-studio-tertiary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-tertiary.focus.hover, .btn-csms-studio-tertiary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-tertiary:disabled, .btn-csms-studio-tertiary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-tertiary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-tertiary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-tertiary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-tertiary {
  --bs-btn-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-quaternary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-hierarchy-secondary);
}

.btn-csms-studio-nega-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-nega-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-nega-primary.focus, .btn-csms-studio-nega-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-nega-primary.focus.hover, .btn-csms-studio-nega-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-nega-primary:disabled, .btn-csms-studio-nega-primary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-nega-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-nega-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-nega-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-nega-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-nega-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-nega-primary {
  --bs-btn-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-bg: var(--csms-studio-bg-semantic-nega-primary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-hover-bg: var(--csms-studio-bg-semantic-nega-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-active-bg: var(--csms-studio-bg-semantic-nega-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-disabled-bg: var(--csms-studio-bg-semantic-nega-primary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-semantic-nega-primary);
}
.btn-csms-studio-nega-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-neutral-white-solid);
}
.btn-csms-studio-nega-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-neutral-white-solid);
}
.btn-csms-studio-nega-primary.focus, .btn-csms-studio-nega-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-outline-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-outline-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-outline-primary.focus, .btn-csms-studio-outline-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-outline-primary.focus.hover, .btn-csms-studio-outline-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-outline-primary:disabled, .btn-csms-studio-outline-primary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-outline-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-outline-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-primary {
  --bs-btn-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-hover-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-coursemos-senary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-active-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-coursemos-quinary);
  --bs-btn-active-border-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-disabled-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-coursemos-primary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}

.btn-csms-studio-outline-secondary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-outline-secondary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-outline-secondary.focus, .btn-csms-studio-outline-secondary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-outline-secondary.focus.hover, .btn-csms-studio-outline-secondary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-outline-secondary:disabled, .btn-csms-studio-outline-secondary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-outline-secondary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-secondary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-secondary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-outline-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-secondary {
  --bs-btn-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-coursemos-quaternary);
  --bs-btn-hover-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-coursemos-senary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-coursemos-quaternary);
  --bs-btn-active-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-coursemos-quinary);
  --bs-btn-active-border-color: var(--csms-studio-bo-coursemos-quaternary);
  --bs-btn-disabled-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-coursemos-quaternary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}

.btn-csms-studio-outline-tertiary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-outline-tertiary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-outline-tertiary.focus, .btn-csms-studio-outline-tertiary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-outline-tertiary.focus.hover, .btn-csms-studio-outline-tertiary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-outline-tertiary:disabled, .btn-csms-studio-outline-tertiary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-outline-tertiary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-tertiary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-tertiary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-outline-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-tertiary {
  --bs-btn-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-hover-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-active-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-disabled-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}

.btn-csms-studio-gray-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-primary.focus, .btn-csms-studio-gray-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-primary.focus.hover, .btn-csms-studio-gray-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-primary:disabled, .btn-csms-studio-gray-primary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-primary {
  --bs-btn-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-bg: var(--csms-studio-bg-hierarchy-quinary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-senary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-senary-subtle);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-disabled-bg: var(--csms-studio-bg-hierarchy-quinary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-hierarchy-quinary);
}
.btn-csms-studio-gray-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-neutral-white-solid);
}
.btn-csms-studio-gray-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-neutral-white-solid);
}
.btn-csms-studio-gray-primary.focus, .btn-csms-studio-gray-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-gray-secondary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-secondary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-secondary.focus, .btn-csms-studio-gray-secondary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-secondary.focus.hover, .btn-csms-studio-gray-secondary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-secondary:disabled, .btn-csms-studio-gray-secondary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-secondary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-secondary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-secondary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-secondary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-quaternary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-hierarchy-secondary);
}

.btn-csms-studio-gray-tertiary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-tertiary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-tertiary.focus, .btn-csms-studio-gray-tertiary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-tertiary.focus.hover, .btn-csms-studio-gray-tertiary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-tertiary:disabled, .btn-csms-studio-gray-tertiary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-tertiary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-tertiary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-tertiary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-tertiary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-quaternary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-hierarchy-secondary);
}
.btn-csms-studio-gray-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-gray-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-csms-studio-gray-outline-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-outline-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-outline-primary.focus, .btn-csms-studio-gray-outline-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-outline-primary.focus.hover, .btn-csms-studio-gray-outline-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-outline-primary:disabled, .btn-csms-studio-gray-outline-primary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-outline-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-outline-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-outline-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-outline-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-outline-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-outline-primary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}

.btn-default,
.btn-secondary,
.btn-csms-studio-gray-outline-secondary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-default.hover,
.btn-secondary.hover,
.btn-csms-studio-gray-outline-secondary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-default.focus, .btn-default:focus,
.btn-secondary.focus,
.btn-secondary:focus,
.btn-csms-studio-gray-outline-secondary.focus,
.btn-csms-studio-gray-outline-secondary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-default.focus.hover, .btn-default:focus:hover,
.btn-secondary.focus.hover,
.btn-secondary:focus:hover,
.btn-csms-studio-gray-outline-secondary.focus.hover,
.btn-csms-studio-gray-outline-secondary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-default:disabled, .btn-default.disabled,
.btn-secondary:disabled,
.btn-secondary.disabled,
.btn-csms-studio-gray-outline-secondary:disabled,
.btn-csms-studio-gray-outline-secondary.disabled {
  opacity: 0.4;
}
.btn-default.btn-csms-studio-svg,
.btn-secondary.btn-csms-studio-svg,
.btn-csms-studio-gray-outline-secondary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-default.btn-csms-studio-svg-right,
.btn-secondary.btn-csms-studio-svg-right,
.btn-csms-studio-gray-outline-secondary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-default svg,
.btn-secondary svg,
.btn-csms-studio-gray-outline-secondary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-default svg .svg-color[stroke],
.btn-secondary svg .svg-color[stroke],
.btn-csms-studio-gray-outline-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-default svg .svg-color[fill],
.btn-secondary svg .svg-color[fill],
.btn-csms-studio-gray-outline-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-default,
.btn-secondary,
.btn-csms-studio-gray-outline-secondary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}
.btn-default svg .svg-color[stroke],
.btn-secondary svg .svg-color[stroke],
.btn-csms-studio-gray-outline-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-default svg .svg-color[fill],
.btn-secondary svg .svg-color[fill],
.btn-csms-studio-gray-outline-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-csms-studio-gray-outline-tertiary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-outline-tertiary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-outline-tertiary.focus, .btn-csms-studio-gray-outline-tertiary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-outline-tertiary.focus.hover, .btn-csms-studio-gray-outline-tertiary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-outline-tertiary:disabled, .btn-csms-studio-gray-outline-tertiary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-outline-tertiary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-outline-tertiary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-outline-tertiary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-outline-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-outline-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-outline-tertiary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-quaternary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-quaternary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-quaternary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-quaternary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}
.btn-csms-studio-gray-outline-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-gray-outline-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}

.btn-xlg {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 52px;
  --csms-studio-btn-padding-y: 13px;
  --csms-studio-btn-padding-left: 24px;
  --csms-studio-btn-padding-right: 24px;
  --csms-studio-btn-padding-svg: 22px;
  --csms-studio-btn-svg-size: 18px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-lg {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 48px;
  --csms-studio-btn-padding-y: 11px;
  --csms-studio-btn-padding-left: 20px;
  --csms-studio-btn-padding-right: 20px;
  --csms-studio-btn-padding-svg: 18px;
  --csms-studio-btn-svg-size: 18px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-md {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-sm {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 40px;
  --csms-studio-btn-padding-y: 8px;
  --csms-studio-btn-padding-left: 16px;
  --csms-studio-btn-padding-right: 16px;
  --csms-studio-btn-padding-svg: 14px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-xsm {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 36px;
  --csms-studio-btn-padding-y: 7px;
  --csms-studio-btn-padding-left: 16px;
  --csms-studio-btn-padding-right: 16px;
  --csms-studio-btn-padding-svg: 14px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-2xsm {
  --bs-btn-border-radius: 6px;
  --csms-studio-btn-height: 32px;
  --csms-studio-btn-padding-y: 5px;
  --csms-studio-btn-padding-left: 12px;
  --csms-studio-btn-padding-right: 12px;
  --csms-studio-btn-padding-svg: 10px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-3xsm {
  --bs-btn-border-radius: 6px;
  --csms-studio-btn-height: 28px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 12px;
  --csms-studio-btn-padding-right: 12px;
  --csms-studio-btn-padding-svg: 10px;
  --csms-studio-btn-svg-size: 12px;
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-4xsm {
  --bs-btn-border-radius: 6px;
  --csms-studio-btn-height: 24px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 10px;
  --csms-studio-btn-padding-right: 10px;
  --csms-studio-btn-padding-svg: 8px;
  --csms-studio-btn-svg-size: 12px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-5xsm {
  --bs-btn-border-radius: 6px;
  --csms-studio-btn-height: 22px;
  --csms-studio-btn-padding-y: 3px;
  --csms-studio-btn-padding-left: 10px;
  --csms-studio-btn-padding-right: 10px;
  --csms-studio-btn-padding-svg: 8px;
  --csms-studio-btn-svg-size: 12px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-ghost {
  --csms-studio-btn-gap: 2px;
  --csms-studio-btn-border-radius: 8px;
  --csms-studio-btn-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-height: 28px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 6px;
  --csms-studio-btn-padding-right: 6px;
  --csms-studio-btn-padding-svg: 4px;
  --csms-studio-btn-svg-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--csms-studio-btn-gap);
  border: 1px solid var(--csms-studio-btn-border-color);
  border-radius: var(--csms-studio-btn-border-radius);
  background-color: var(--csms-studio-btn-background-color);
  color: var(--csms-studio-btn-color);
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-ghost.hover, .btn-ghost:hover {
  background-color: var(--csms-studio-btn-hover-background-color);
}
.btn-ghost.focus, .btn-ghost:focus {
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-ghost.active, .btn-ghost:active {
  background-color: var(--csms-studio-btn-active-background-color);
}
.btn-ghost:disabled, .btn-ghost.disabled {
  opacity: 0.4;
}
.btn-ghost.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-ghost.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-ghost svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-ghost svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-info);
}
.btn-ghost svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-info);
}

.btn-ghost-primary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
}

.btn-ghost-secondary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bg-coursemos-quinary);
}

.btn-ghost-gray-primary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
}
.btn-ghost-gray-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-ghost-gray-secondary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
}
.btn-ghost-gray-secondary.hover, .btn-ghost-gray-secondary:hover, .btn-ghost-gray-secondary.active, .btn-ghost-gray-secondary:active {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-ghost-gray-secondary.hover svg .svg-color[stroke], .btn-ghost-gray-secondary:hover svg .svg-color[stroke], .btn-ghost-gray-secondary.active svg .svg-color[stroke], .btn-ghost-gray-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-secondary.hover svg .svg-color[fill], .btn-ghost-gray-secondary:hover svg .svg-color[fill], .btn-ghost-gray-secondary.active svg .svg-color[fill], .btn-ghost-gray-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-ghost-gray-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}

.btn-ghost-gray-tertiary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bo-semantic-info-senary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bo-semantic-info-quinary);
}
.btn-ghost-gray-tertiary.hover, .btn-ghost-gray-tertiary:hover, .btn-ghost-gray-tertiary.active, .btn-ghost-gray-tertiary:active, .btn-ghost-gray-tertiary.focus, .btn-ghost-gray-tertiary:focus {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-ghost-gray-tertiary.hover svg .svg-color[stroke], .btn-ghost-gray-tertiary:hover svg .svg-color[stroke], .btn-ghost-gray-tertiary.active svg .svg-color[stroke], .btn-ghost-gray-tertiary:active svg .svg-color[stroke], .btn-ghost-gray-tertiary.focus svg .svg-color[stroke], .btn-ghost-gray-tertiary:focus svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-tertiary.hover svg .svg-color[fill], .btn-ghost-gray-tertiary:hover svg .svg-color[fill], .btn-ghost-gray-tertiary.active svg .svg-color[fill], .btn-ghost-gray-tertiary:active svg .svg-color[fill], .btn-ghost-gray-tertiary.focus svg .svg-color[fill], .btn-ghost-gray-tertiary:focus svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-ghost-gray-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}

.btn-ghost-xlg {
  --csms-studio-btn-gap: 4px;
  --csms-studio-btn-border-radius: 8px;
  --csms-studio-btn-height: 32px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 8px;
  --csms-studio-btn-padding-right: 8px;
  --csms-studio-btn-padding-svg: 6px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-ghost-lg {
  --csms-studio-btn-gap: 4px;
  --csms-studio-btn-border-radius: 8px;
  --csms-studio-btn-height: 32px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 8px;
  --csms-studio-btn-padding-right: 8px;
  --csms-studio-btn-padding-svg: 6px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-ghost-sm {
  --csms-studio-btn-gap: 2px;
  --csms-studio-btn-border-radius: 6px;
  --csms-studio-btn-height: 24px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 6px;
  --csms-studio-btn-padding-right: 6px;
  --csms-studio-btn-padding-svg: 4px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-ghost-xsm {
  --csms-studio-btn-gap: 2px;
  --csms-studio-btn-border-radius: 6px;
  --csms-studio-btn-height: 20px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 4px;
  --csms-studio-btn-padding-right: 4px;
  --csms-studio-btn-padding-svg: 2px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-csms-studio-link {
  --csms-studio-btn-gap: 4px;
  --csms-studio-btn-border-radius: 0;
  --csms-studio-btn-border-width: 0;
  --csms-studio-btn-border-color: var(--csms-studio-transpa rent);
  --csms-studio-btn-color: var(--csms-studio-transparent);
  --csms-studio-btn-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-height: 20px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--csms-studio-btn-gap);
  border: var(--csms-studio-btn-border-width) solid var(--csms-studio-btn-border-color);
  border-radius: var(--csms-studio-btn-border-radius);
  background-color: var(--csms-studio-btn-background-color);
  color: var(--csms-studio-btn-color);
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding);
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  text-decoration: var(--csms-studio-text-decoration);
  color: var(--csms-studio-btn-color);
}
.btn-csms-studio-link .text {
  text-decoration: var(--csms-studio-text-decoration);
  color: var(--csms-studio-btn-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-csms-studio-link.hover, .btn-csms-studio-link:hover {
  background-color: var(--csms-studio-btn-hover-background-color);
}
.btn-csms-studio-link.focus, .btn-csms-studio-link:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-link.active, .btn-csms-studio-link:active {
  background-color: var(--csms-studio-btn-active-background-color);
}
.btn-csms-studio-link:disabled, .btn-csms-studio-link.disabled {
  opacity: 0.4;
}
.btn-csms-studio-link.btn-csms-studio-svg-right {
  --csms-studio-btn-gap: 2px;
}
.btn-csms-studio-link.hover, .btn-csms-studio-link:hover {
  color: var(--csms-studio-btn-hover-color);
}
.btn-csms-studio-link.hover .text, .btn-csms-studio-link:hover .text {
  --csms-studio-text-decoration: underline;
  color: var(--csms-studio-btn-hover-color);
}
.btn-csms-studio-link.active, .btn-csms-studio-link:active {
  color: var(--csms-studio-btn-active-color);
}
.btn-csms-studio-link.active .text, .btn-csms-studio-link:active .text {
  --csms-studio-text-decoration: none;
  color: var(--csms-studio-btn-active-color);
}
.btn-csms-studio-link.btn-csms-studio-underline {
  text-decoration: underline !important;
}
.btn-csms-studio-link svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-info);
}
.btn-csms-studio-link svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-info);
}
.btn-csms-studio-link svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}

.btn-csms-studio-link-gray {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
}

.btn-csms-studio-link-gray-secondary {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-hover-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
}

.btn-csms-studio-link-tertiary {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-tertiary);
  --csms-studio-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
}

.btn-csms-studio-link-xlg {
  --csms-studio-btn-height: 23px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-csms-studio-link-lg {
  --csms-studio-btn-height: 21px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-csms-studio-link-sm {
  --csms-studio-btn-height: 18px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-csms-studio-link-xsm {
  --csms-studio-btn-height: 13px;
  --csms-studio-btn-svg-size: 12px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-csms-studio-link {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-hover-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
}

.csms-studio-box-shadow-xsm {
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.csms-studio-box-shadow-sm {
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.csms-studio-box-shadow-md {
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}

.csms-studio-box-shadow-lg {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.csms-studio-box-shadow-xl {
  box-shadow: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-2xl {
  box-shadow: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-3xl {
  box-shadow: 0 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
}

/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

.csms-studio-heading-2xlg {
  --csms-studio-heading-font-weight: 700;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-xlg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 40px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 56px;
  margin-bottom: 0;
}

.csms-studio-heading-lg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 32px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 45px;
  margin-bottom: 0;
}

.csms-studio-heading-md {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 28px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-sm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm-semibold {
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-label-xlg-bold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-semibold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-medium {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-normal {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-bold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-semibold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-medium {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-normal {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-bold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-semibold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-medium {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-normal {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-bold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-semibold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-medium {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-normal {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-bold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-semibold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-medium {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-normal {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-bold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-semibold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-medium {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-normal {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-caption-lg {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-md {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-sm {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 10px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 12px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-csms-studio-icon {
  --csms-studio-btn-icon-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-svg-color: --csms-studio-fg-hierarchy-secondary;
  --csms-studio-btn-icon-svg-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--csms-studio-btn-icon-border-color);
  border-radius: var(--csms-studio-btn-icon-border-radius);
  background-color: var(--csms-studio-btn-icon-background-color);
  color: var(--csms-studio-btn-icon-svg-color);
  width: var(--csms-studio-btn-icon-size);
  height: var(--csms-studio-btn-icon-size);
  padding: 0;
}
.btn-csms-studio-icon.hover, .btn-csms-studio-icon:hover {
  background-color: var(--csms-studio-btn-icon-hover-background-color);
}
.btn-csms-studio-icon.focus, .btn-csms-studio-icon:focus {
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-icon.active, .btn-csms-studio-icon:active {
  background-color: var(--csms-studio-btn-icon-active-background-color);
}
.btn-csms-studio-icon:disabled, .btn-csms-studio-icon.disabled, .btn-csms-studio-icon[disabled=disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-csms-studio-icon:disabled:hover, .btn-csms-studio-icon:disabled.hover, .btn-csms-studio-icon.disabled:hover, .btn-csms-studio-icon.disabled.hover, .btn-csms-studio-icon[disabled=disabled]:hover, .btn-csms-studio-icon[disabled=disabled].hover {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.btn-csms-studio-icon:disabled:active, .btn-csms-studio-icon:disabled.active, .btn-csms-studio-icon.disabled:active, .btn-csms-studio-icon.disabled.active, .btn-csms-studio-icon[disabled=disabled]:active, .btn-csms-studio-icon[disabled=disabled].active {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.btn-csms-studio-icon svg {
  width: var(--csms-studio-btn-icon-svg-size);
  height: var(--csms-studio-btn-icon-svg-size);
}
.btn-csms-studio-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-svg-color);
}
.btn-csms-studio-icon svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-svg-color);
}

.btn-csms-studio-icon-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-primary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-neutral-white-solid);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-primary.focus, .btn-csms-studio-icon-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-icon-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-outline-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-coursemos-primary);
}

.btn-csms-studio-icon-outline-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}

.btn-csms-studio-icon-outline-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-coursemos-primary);
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.btn-csms-studio-icon-outline-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.btn-csms-studio-icon-nospace-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-nospace-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-neutral-b10p);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-quinary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-neutral-white-solid);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-senary-subtle);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-primary.disabled, .btn-csms-studio-icon-gray-primary:disabled {
  background-color: var(--csms-studio-bg-hierarchy-senary);
}
.btn-csms-studio-icon-gray-primary.focus, .btn-csms-studio-icon-gray-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-icon-gray-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bo-coursemos-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-quaternary.focus, .btn-csms-studio-icon-gray-quaternary:focus {
  background-color: var(--csms-studio-bg-coursemos-quinary);
}

.btn-csms-studio-icon-gray-outline-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}

.btn-csms-studio-icon-gray-outline-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover, .btn-csms-studio-icon-gray-outline-secondary:hover {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-secondary:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-secondary:hover svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.active, .btn-csms-studio-icon-gray-outline-secondary:active {
  color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-secondary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-secondary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-icon-gray-outline-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.btn-csms-studio-icon-gray-outline-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover, .btn-csms-studio-icon-gray-outline-quaternary:hover {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-quaternary:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-quaternary:hover svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active, .btn-csms-studio-icon-gray-outline-quaternary:active {
  color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-quaternary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-quaternary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-icon-gray-nospace-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-neutral-b6p-hovered);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-neutral-b15p);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-nospace-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover, .btn-csms-studio-icon-gray-nospace-secondary:hover, .btn-csms-studio-icon-gray-nospace-secondary.active, .btn-csms-studio-icon-gray-nospace-secondary:active {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary:hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary:hover svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-csms-studio-icon-gray-nospace-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-info-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-2xsm {
  --csms-studio-btn-icon-size: 20px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 12px;
}

.btn-csms-studio-icon-xsm {
  --csms-studio-btn-icon-size: 24px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 14px;
}

.btn-csms-studio-icon-sm {
  --csms-studio-btn-icon-size: 28px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 16px;
}

.btn-csms-studio-icon-md {
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 18px;
}

.btn-csms-studio-icon-lg {
  --csms-studio-btn-icon-size: 36px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 18px;
}

.btn-csms-studio-icon-xlg {
  --csms-studio-btn-icon-size: 40px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 20px;
}

.btn-csms-studio-icon-2xlg {
  --csms-studio-btn-icon-size: 48px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 24px;
}

.btn-csms-studio-svgicon {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-bg-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-svgicon-size-md: 16px;
  --csms-studio-btn-svgicon-size-lg: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon.hover, .btn-csms-studio-svgicon:hover {
  color: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.hover svg .svg-color[stroke], .btn-csms-studio-svgicon:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.hover svg .svg-color[fill], .btn-csms-studio-svgicon:hover svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.focus, .btn-csms-studio-svgicon:focus {
  color: var(--csms-studio-btn-svgicon-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon.active, .btn-csms-studio-svgicon:active {
  color: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon.active svg .svg-color[stroke], .btn-csms-studio-svgicon:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon.active svg .svg-color[fill], .btn-csms-studio-svgicon:active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon:disabled, .btn-csms-studio-svgicon.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-csms-studio-svgicon svg {
  width: var(--csms-studio-btn-svgicon-size-md);
  height: var(--csms-studio-btn-svgicon-size-md);
}

.btn-csms-studio-svgicon {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-tertiary);
}

.btn-csms-studio-svgicon-help {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active svg .svg-color[stroke], .btn-csms-studio-svgicon-help:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active svg .svg-color[fill], .btn-csms-studio-svgicon-help:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active, .btn-csms-studio-svgicon-help:active {
  background-color: var(--csms-studio-btn-svgicon-bg-color);
}

.btn-csms-studio-svgicon-eye {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-svgicon-eye.active svg .svg-color[stroke], .btn-csms-studio-svgicon-eye:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-svgicon-eye.active svg .svg-color[fill], .btn-csms-studio-svgicon-eye:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-svgicon-home {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home.active svg .svg-color[stroke], .btn-csms-studio-svgicon-home:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home.active svg .svg-color[fill], .btn-csms-studio-svgicon-home:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home svg {
  width: --csms-studio-btn-svgicon-size-lg;
  height: --csms-studio-btn-svgicon-size-lg;
}
.btn-csms-studio-svgicon-home {
  border-radius: 0 !important;
}

.btn-csms-studio-svgicon-circle {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle.hover, .btn-csms-studio-svgicon-circle:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle.focus, .btn-csms-studio-svgicon-circle:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle.active, .btn-csms-studio-svgicon-circle:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle:disabled, .btn-csms-studio-svgicon-circle.disabled {
  opacity: 0.4;
}

.btn-csms-studio-svgicon-circle-arrow {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle-arrow svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-arrow svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-arrow svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle-arrow.hover, .btn-csms-studio-svgicon-circle-arrow:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle-arrow.focus, .btn-csms-studio-svgicon-circle-arrow:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle-arrow.active, .btn-csms-studio-svgicon-circle-arrow:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle-arrow:disabled, .btn-csms-studio-svgicon-circle-arrow.disabled {
  opacity: 0.4;
}
.btn-csms-studio-svgicon-circle-arrow {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-circle-size: 36px;
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.btn-csms-studio-svgicon-circle-help {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle-help svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-help svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-help svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle-help.hover, .btn-csms-studio-svgicon-circle-help:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle-help.focus, .btn-csms-studio-svgicon-circle-help:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle-help.active, .btn-csms-studio-svgicon-circle-help:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle-help:disabled, .btn-csms-studio-svgicon-circle-help.disabled {
  opacity: 0.4;
}
.btn-csms-studio-svgicon-circle-help {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-size: 40px;
}

.btn-csms-studio-like {
  --csms-studio-btn-icon-like-padding-y: 10px;
  --csms-studio-btn-icon-like-padding-x: 16px;
  --csms-studio-btn-icon-like-padding-x-round: 20px;
  --csms-studio-btn-icon-like-background: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-icon-like-hover-background: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-icon-like-active-svg-color: #fd6d6d;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-btn-icon-like-background);
  padding: var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x) var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x-round);
  border-radius: var(--csms-studio-border-radius-full) 0 0 var(--csms-studio-border-radius-full);
}
.btn-csms-studio-like svg {
  width: 20px;
  height: 20px;
}
.btn-csms-studio-like svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-like svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-like {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-csms-studio-like.hover, .btn-csms-studio-like:hover {
  background: var(--csms-studio-btn-icon-like-hover-background);
}
.btn-csms-studio-like.focus, .btn-csms-studio-like:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-like.is-active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-like.is-active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-like.is-active svg .svg-thumb-bg {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}

.btn-csms-studio-dislike {
  --csms-studio-btn-icon-like-padding-y: 10px;
  --csms-studio-btn-icon-like-padding-x: 16px;
  --csms-studio-btn-icon-like-padding-x-round: 20px;
  --csms-studio-btn-icon-like-background: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-icon-like-hover-background: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-icon-like-active-svg-color: #fd6d6d;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-btn-icon-like-background);
  padding: var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x-round) var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x);
  border-radius: 0 var(--csms-studio-border-radius-full) var(--csms-studio-border-radius-full) 0;
}
.btn-csms-studio-dislike svg {
  width: 20px;
  height: 20px;
}
.btn-csms-studio-dislike svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-dislike svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-dislike {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-csms-studio-dislike.hover, .btn-csms-studio-dislike:hover {
  background: var(--csms-studio-btn-icon-like-hover-background);
}
.btn-csms-studio-dislike.focus, .btn-csms-studio-dislike:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-dislike.is-active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-dislike.is-active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-dislike.is-active svg .svg-thumb-bg {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}

.btn-csms-studio-like-container {
  display: flex;
  align-items: center;
}
.btn-csms-studio-like-container .btn-csms-studio-like + .btn-csms-studio-dislike {
  margin-left: -1px;
}

.csms-studio-cons {
  --csms-studio-cons-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-cons-border-radius: 99px;
  --csms-studio-cons-border-color: var(--csms-studio-bo-semantic-info-quaternary);
  --csms-studio-cons-background-color: var(--csms-studio-bg-semantic-info-senary-subtle);
  --csms-studio-cons-background-active-color: var(--csms-studio-bg-semantic-info-primary);
  --csms-studio-cons-background-hover-color: var(--csms-studio-bg-semantic-info-senary);
  --csms-studio-cons-svg-size: 16px;
  --csms-studio-cons-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-cons-padding-x: 20px;
  --csms-studio-cons-padding-y: 8px;
  --csms-studio-cons-height: 44px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--csms-studio-cons-border-color);
  border-radius: var(--csms-studio-cons-border-radius);
  background-color: var(--csms-studio-cons-background-color);
  color: var(--csms-studio-cons-color);
  padding: var(--csms-studio-cons-padding-y) var(--csms-studio-cons-padding-x);
  height: var(--csms-studio-cons-height);
}
.csms-studio-cons.hover, .csms-studio-cons:hover {
  background-color: var(--csms-studio-cons-background-hover-color);
}
.csms-studio-cons.focus, .csms-studio-cons:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.csms-studio-cons.active, .csms-studio-cons:active {
  background-color: var(--csms-studio-cons-background-active-color);
}
.csms-studio-cons:disabled, .csms-studio-cons.disabled {
  opacity: 0.4;
}
.csms-studio-cons svg {
  width: var(--csms-studio-cons-svg-size);
  height: var(--csms-studio-cons-svg-size);
}
.csms-studio-cons svg .svg-color[stroke] {
  stroke: var(--csms-studio-cons-svg-color);
}
.csms-studio-cons svg .svg-color[fill] {
  fill: var(--csms-studio-cons-svg-color);
}

.csms-studio-cons-gray {
  --csms-studio-cons-color: var(--csms-studio-tx-hierarchy-quaternary);
  --csms-studio-cons-background-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-cons-background-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-cons-background-active-color: var(--csms-studio-bg-semantic-info-senary-subtle);
  --csms-studio-cons-border-color: var(--csms-studio-bo-hierarchy-secondary);
}

.vd-error-message {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-semantic-nega-primary);
  text-align: left;
  margin-top: 6px;
}

.form-text {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-secondary-color: var(--csms-studio-tx-hierarchy-tertiary);
  margin-top: 6px;
}
.form-text.form-text-sm {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quinary);
  margin-top: 0;
}

.form-control {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-body-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --bs-background-image: transparent;
  --csms-studio-form-control-height: 40px;
  --csms-studio-form-control-padding-y: 10px;
  --csms-studio-form-control-padding-x: 14px;
  --csms-studio-form-control-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-form-control-placeholder-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-hierarchy-quaternary);
  --csms-studio-form-control-hover-background-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-info-primary);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-form-control-disabled-placeholder-color: var(--csms-studio-tx-hierarchy-senary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-info-30p);
  height: var(--csms-studio-form-control-height);
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
  background-color: var(--csms-studio-form-control-background-color);
}
.form-control::placeholder {
  color: var(--csms-studio-form-control-placeholder-color);
}
.form-control.hover:not(.disabled, :disabled, .read-only, :read-only, .focus, :focus), .form-control:hover:not(.disabled, :disabled, .read-only, :read-only, .focus, :focus) {
  --bs-border-color: var(--csms-studio-form-control-hover-border-color);
  background-color: var(--csms-studio-form-control-hover-background-color);
}
.form-control.focus, .form-control:focus {
  --bs-border-color: var(--csms-studio-form-control-focus-border-color);
  border-color: var(--bs-border-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.form-control.read-only, .form-control:read-only, .form-control.disabled, .form-control:disabled {
  --bs-border-color: var(--csms-studio-form-control-disabled-border-color);
  background-color: var(--csms-studio-form-control-disabled-background-color);
}
.form-control.read-only::placeholder, .form-control:read-only::placeholder, .form-control.disabled::placeholder, .form-control:disabled::placeholder {
  color: var(--csms-studio-form-control-disabled-placeholder-color);
}
.form-control.is-invalid, .form-control.vd-error {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-nega-secondary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-nega-30p);
}
.form-control.is-invalid.disabled, .form-control.is-invalid:disabled, .form-control.vd-error.disabled, .form-control.vd-error:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.form-control.is-invalid + .form-text, .form-control.vd-error + .form-text {
  color: var(--csms-studio-tx-semantic-nega-primary);
}
.form-control.is-valid, .form-control.vd-success {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-posi-secondary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-posi-30p);
}
.form-control.is-valid.disabled, .form-control.is-valid:disabled, .form-control.vd-success.disabled, .form-control.vd-success:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-30p);
}
.form-control + .vd-error-message,
.form-control + .form-text {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.form-control + .vd-error-message.form-text-sm,
.form-control + .form-text.form-text-sm {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quinary);
  margin-top: 0;
}

.form-select {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-body-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --bs-form-select-bg-img: url("data:image/svg+xml,<svg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M5.36321 8.36321C5.71469 8.01174 6.28453 8.01174 6.63601 8.36321L11.9996 13.7268L17.3632 8.36321C17.7147 8.01174 18.2845 8.01174 18.636 8.36321C18.9875 8.71469 18.9875 9.28453 18.636 9.63601L12.636 15.636C12.2845 15.9875 11.7147 15.9875 11.3632 15.636L5.36321 9.63601C5.01174 9.28453 5.01174 8.71469 5.36321 8.36321Z%27 fill=%27#2c2f32%27/%3E%3C/svg%3E");
  --bs-form-select-bg-img-disabled: url("data:image/svg+xml,<svg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M5.36321 8.36321C5.71469 8.01174 6.28453 8.01174 6.63601 8.36321L11.9996 13.7268L17.3632 8.36321C17.7147 8.01174 18.2845 8.01174 18.636 8.36321C18.9875 8.71469 18.9875 9.28453 18.636 9.63601L12.636 15.636C12.2845 15.9875 11.7147 15.9875 11.3632 15.636L5.36321 9.63601C5.01174 9.28453 5.01174 8.71469 5.36321 8.36321Z%27 fill=%27rgba%2844, 47, 50, 0.4%29%27/></svg>");
  --csms-studio-form-select-bg-size: 18px;
  --csms-studio-form-control-height: 40px;
  --csms-studio-form-control-padding-y: 10px;
  --csms-studio-form-control-padding-x: 14px;
  --csms-studio-form-control-padding-x-right: calc(var(--csms-studio-form-select-bg-size) + 14px);
  --csms-studio-form-control-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-form-control-placeholder-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-hover-background-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-background-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-form-control-disabled-placeholder-color: var(--csms-studio-tx-hierarchy-senary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-info-30p);
}
.form-select:not([multiple]) {
  height: var(--csms-studio-form-control-height);
}
.form-select {
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x-right) var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
  background-color: var(--csms-studio-form-control-background-color);
  background-size: var(--csms-studio-form-select-bg-size) var(--csms-studio-form-select-bg-size);
  background-position: right var(--csms-studio-form-control-padding-x) center;
}
.form-select.hover:not(.disabled, :disabled, .ss-disabled, .focus, :focus), .form-select:hover:not(.disabled, :disabled, .ss-disabled, .focus, :focus) {
  --bs-border-color: var(--csms-studio-form-control-hover-border-color);
  background-color: var(--csms-studio-form-control-hover-background-color);
}
.form-select.focus, .form-select:focus {
  --bs-border-color: var(--csms-studio-form-control-focus-border-color);
  border-color: var(--bs-border-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.form-select.disabled, .form-select:disabled {
  --bs-border-color: var(--csms-studio-form-control-disabled-border-color);
  background-color: var(--csms-studio-form-control-disabled-background-color);
  background-image: var(--bs-form-select-bg-img-disabled);
}
.form-select.is-invalid, .form-select.vd-error {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-nega-30p);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.form-select.is-invalid.disabled, .form-select.is-invalid:disabled, .form-select.vd-error.disabled, .form-select.vd-error:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.form-select.is-valid, .form-select.vd-success {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-posi-30p);
}
.form-select.is-valid.disabled, .form-select.is-valid:disabled, .form-select.vd-success.disabled, .form-select.vd-success:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-30p);
}
.form-select:invalid {
  color: var(--csms-studio-tx-hierarchy-quinary);
}

.form-select-3xsm,
.form-control-3xsm {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 16px;
  --csms-studio-form-control-height: 28px;
  --csms-studio-form-control-padding-y: 6px;
  --bs-border-radius: 6px;
}
.form-select-3xsm + .vd-error-message,
.form-select-3xsm + .form-text,
.form-control-3xsm + .vd-error-message,
.form-control-3xsm + .form-text {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.form-select-2xsm,
.form-control-2xsm {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 16px;
  --csms-studio-form-control-height: 32px;
  --csms-studio-form-control-padding-y: 6px;
  --bs-border-radius: 6px;
}
.form-select-2xsm + .vd-error-message,
.form-select-2xsm + .form-text,
.form-control-2xsm + .vd-error-message,
.form-control-2xsm + .form-text {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.form-select-xsm,
.form-control-xsm {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 16px;
  --csms-studio-form-control-height: 36px;
  --csms-studio-form-control-padding-y: 6px;
}

.form-select-md,
.form-control-md {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 44px;
}

.form-select-lg,
.form-control-lg {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 20px;
  --csms-studio-form-control-height: 48px;
}

.form-select-xlg,
.form-control-xlg {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 22px;
  --csms-studio-form-control-height: 52px;
}

.input-group > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 40px;
  --csms-studio-btn-padding-y: 8px;
  --csms-studio-btn-padding-left: 16px;
  --csms-studio-btn-padding-right: 16px;
  --csms-studio-btn-padding-svg: 14px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --csms-studio-input-group-btn-svg-gap: 4px;
  --csms-studio-input-group-btn-svg-size: 16px;
  --csms-studio-input-group-btn-padding-left: 14px;
  --csms-studio-input-group-btn-padding-right: 12px;
  --csms-studio-input-group-btn-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-input-group-btn-border-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-input-group-btn-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-input-group-btn-focus-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-input-group-btn-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  gap: var(--csms-studio-input-group-btn-svg-gap);
  padding: 0 var(--csms-studio-input-group-btn-padding-right) 0 var(--csms-studio-input-group-btn-padding-left);
  background-color: var(--csms-studio-input-group-btn-background-color);
  border-color: var(--csms-studio-input-group-btn-border-color);
}
.input-group > .btn svg {
  width: var(--csms-studio-input-group-btn-svg-size);
  height: var(--csms-studio-input-group-btn-svg-size);
}
.input-group > .btn svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.input-group > .btn svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.input-group > .btn.hover, .input-group > .btn:hover {
  background-color: var(--csms-studio-input-group-btn-hover-background-color);
  border-color: var(--csms-studio-input-group-btn-border-color);
}
.input-group > .btn.focus, .input-group > .btn:focus {
  background-color: var(--csms-studio-input-group-btn-focus-background-color);
  border-color: var(--csms-studio-input-group-btn-border-color);
}
.input-group > .btn.active, .input-group > .btn:active {
  background-color: var(--csms-studio-input-group-btn-active-background-color);
  border-color: var(--csms-studio-input-group-btn-border-color);
}
.input-group > .input-group-text {
  --bs-body-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-tertiary-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --csms-studio-form-control-height: 40px;
  --csms-studio-input-group-text-padding-left: 14px;
  --csms-studio-input-group-text-padding-right: 12px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  padding: 0 var(--csms-studio-input-group-text-padding-right) 0 var(--csms-studio-input-group-text-padding-left);
  height: var(--csms-studio-form-control-height);
}
.input-group > .form-control,
.input-group > .form-select {
  --csms-studio-form-control-padding-y: 6px;
  --csms-studio-form-control-padding-x: 14px;
}
.input-group + .vd-error-message,
.input-group + .form-text {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.input-group-xsm > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 36px;
  --csms-studio-btn-padding-y: 7px;
  --csms-studio-btn-padding-left: 16px;
  --csms-studio-btn-padding-right: 16px;
  --csms-studio-btn-padding-svg: 14px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-input-group-btn-svg-size: 16px;
}
.input-group-xsm > .form-control,
.input-group-xsm > .form-select {
  --csms-studio-form-control-padding-y: 6px;
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
}
.input-group-xsm > .form-control,
.input-group-xsm > .form-select,
.input-group-xsm > .input-group-text {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 36px;
}
.input-group-xsm + .form-text,
.input-group-xsm + .vd-error-message {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.input-group-md > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-input-group-btn-svg-size: 18px;
  --csms-studio-input-group-btn-padding-left: 16px;
  --csms-studio-input-group-btn-padding-right: 14px;
}
.input-group-md > .input-group-text {
  --csms-studio-input-group-text-padding-left: 16px;
  --csms-studio-input-group-text-padding-right: 14px;
}
.input-group-md > .form-control,
.input-group-md > .form-select {
  --csms-studio-form-control-padding-y: 10px;
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
}
.input-group-md > .form-control,
.input-group-md > .form-select,
.input-group-md > .input-group-text {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 44px;
}

.input-group-lg > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 48px;
  --csms-studio-btn-padding-y: 11px;
  --csms-studio-btn-padding-left: 20px;
  --csms-studio-btn-padding-right: 20px;
  --csms-studio-btn-padding-svg: 18px;
  --csms-studio-btn-svg-size: 18px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-input-group-btn-svg-size: 20px;
  --csms-studio-input-group-btn-padding-left: 16px;
  --csms-studio-input-group-btn-padding-right: 14px;
}
.input-group-lg > .input-group-text {
  --csms-studio-input-group-text-padding-left: 16px;
  --csms-studio-input-group-text-padding-right: 14px;
}
.input-group-lg > .form-control,
.input-group-lg > .form-select {
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
}
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 48px;
}

.input-group-xlg > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 52px;
  --csms-studio-btn-padding-y: 13px;
  --csms-studio-btn-padding-left: 24px;
  --csms-studio-btn-padding-right: 24px;
  --csms-studio-btn-padding-svg: 22px;
  --csms-studio-btn-svg-size: 18px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  font-weight: 400;
  --csms-studio-input-group-btn-svg-size: 22px;
  --csms-studio-input-group-btn-padding-left: 16px;
  --csms-studio-input-group-btn-padding-right: 14px;
}
.input-group-xlg > .input-group-text {
  --csms-studio-input-group-text-padding-left: 16px;
  --csms-studio-input-group-text-padding-right: 14px;
}
.input-group-xlg > .form-control,
.input-group-xlg > .form-select {
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
}
.input-group-xlg > .form-control,
.input-group-xlg > .form-select,
.input-group-xlg > .input-group-text {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 52px;
}

.vd-error-message {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-semantic-nega-primary);
}

.form-floating > label {
  color: var(--csms-studio-tx-hierarchy-quinary);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
  color: var(--csms-studio-tx-hierarchy-quinary);
}

.csms-studio-form-floating > .form-control,
.csms-studio-form-floating > .form-control-plaintext,
.csms-studio-form-floating > .form-select {
  height: 56px;
  min-height: 56px;
  line-height: 1.5;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-form-floating > label {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quinary);
  padding: 15px 14px;
}
.csms-studio-form-floating > .form-control,
.csms-studio-form-floating > .form-control-plaintext {
  padding: 15px 14px;
}
.csms-studio-form-floating > .form-control::placeholder,
.csms-studio-form-floating > .form-control-plaintext::placeholder {
  color: transparent;
}
.csms-studio-form-floating > .form-control:focus, .csms-studio-form-floating > .form-control:not(:placeholder-shown),
.csms-studio-form-floating > .form-control-plaintext:focus,
.csms-studio-form-floating > .form-control-plaintext:not(:placeholder-shown) {
  padding-top: 25px;
  padding-bottom: 5px;
}
.csms-studio-form-floating > .form-control:-webkit-autofill,
.csms-studio-form-floating > .form-control-plaintext:-webkit-autofill {
  padding-top: 25px;
  padding-bottom: 5px;
}
.csms-studio-form-floating > .form-select {
  padding-top: 25px;
  padding-bottom: 5px;
}
.csms-studio-form-floating > .form-control:focus ~ label,
.csms-studio-form-floating > .form-control:not(:placeholder-shown) ~ label,
.csms-studio-form-floating > .form-control-plaintext ~ label,
.csms-studio-form-floating > .form-select ~ label {
  color: var(--csms-studio-tx-hierarchy-quinary);
  transform: scale(0.75) translateY(-7.5px) translateX(5px);
}
.csms-studio-form-floating > .form-control:focus ~ label::after,
.csms-studio-form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.csms-studio-form-floating > .form-control-plaintext ~ label::after,
.csms-studio-form-floating > .form-select ~ label::after {
  position: absolute;
  inset: inherit;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: transparent;
  border-radius: 8px;
}
.csms-studio-form-floating > .form-control:-webkit-autofill ~ label {
  color: var(--csms-studio-tx-hierarchy-quinary);
  transform: scale(0.75) translateY(-7.5px) translateX(5px);
}
.csms-studio-form-floating > .form-control-plaintext ~ label {
  border-width: 1px 0;
}
.csms-studio-form-floating > :disabled ~ label,
.csms-studio-form-floating > .form-control:disabled ~ label {
  color: rgba(0, 0, 0, 0.38);
}
.csms-studio-form-floating > :disabled ~ label::after,
.csms-studio-form-floating > .form-control:disabled ~ label::after {
  background-color: #e9ecef;
}

textarea.form-control {
  --csms-studio-form-control-height: inherit;
}

input[type=number].form-control-spin-hide::-webkit-inner-spin-button, input[type=number].form-control-spin-hide::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number].form-control-spin-hide {
  -moz-appearance: textfield;
}

.dropdown-item-icon, .csms-studio-dropdown .dropdown-toggle-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dropdown-item-icon img, .csms-studio-dropdown .dropdown-toggle-icon img {
  width: var(--csms-studio-dropdown-item-icon-image-size);
  height: var(--csms-studio-dropdown-item-icon-image-size);
  border-radius: 50%;
}
.dropdown-item-icon .svg-icon, .csms-studio-dropdown .dropdown-toggle-icon .svg-icon {
  flex: 0 0 auto;
}
.dropdown-item-icon .svg-icon svg, .csms-studio-dropdown .dropdown-toggle-icon .svg-icon svg {
  width: var(--csms-studio-dropdown-item-icon-svg-size);
  height: var(--csms-studio-dropdown-item-icon-svg-size);
}
.dropdown-item-icon .svg-icon svg .svg-color[stroke], .csms-studio-dropdown .dropdown-toggle-icon .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-dropdown-item-icon-svg-color);
}
.dropdown-item-icon .svg-icon svg .svg-color[fill], .csms-studio-dropdown .dropdown-toggle-icon .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-dropdown-item-icon-svg-color);
}
.dropdown-item-icon .svg-select, .csms-studio-dropdown .dropdown-toggle-icon .svg-select {
  margin-left: auto;
  flex: 0 0 auto;
  display: none;
}
.dropdown-item-icon .svg-select svg, .csms-studio-dropdown .dropdown-toggle-icon .svg-select svg {
  width: var(--csms-studio-dropdown-item-icon-svg-select-size);
  height: var(--csms-studio-dropdown-item-icon-svg-select-size);
}
.dropdown-item-icon .svg-select svg .svg-color[stroke], .csms-studio-dropdown .dropdown-toggle-icon .svg-select svg .svg-color[stroke] {
  stroke: var(--csms-studio-dropdown-item-icon-svg-select-color);
}
.dropdown-item-icon .svg-select svg .svg-color[fill], .csms-studio-dropdown .dropdown-toggle-icon .svg-select svg .svg-color[fill] {
  fill: var(--csms-studio-dropdown-item-icon-svg-select-color);
}
.dropdown-item-icon .svg-caret, .csms-studio-dropdown .dropdown-toggle-icon .svg-caret {
  margin-left: auto;
  flex: 0 0 auto;
}
.dropdown-item-icon .svg-caret svg, .csms-studio-dropdown .dropdown-toggle-icon .svg-caret svg {
  width: var(--csms-studio-dropdown-item-icon-svg-select-size);
  height: var(--csms-studio-dropdown-item-icon-svg-select-size);
}
.dropdown-item-icon .svg-caret svg .svg-color[stroke], .csms-studio-dropdown .dropdown-toggle-icon .svg-caret svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.dropdown-item-icon .svg-caret svg .svg-color[fill], .csms-studio-dropdown .dropdown-toggle-icon .svg-caret svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.csms-studio-dropdown {
  --csms-studio-dropdown-item-icon-image-size: 24px;
  --csms-studio-dropdown-item-icon-svg-size: 20px;
  --csms-studio-dropdown-item-icon-svg-select-size: 18px;
  --csms-studio-dropdown-item-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-dropdown-item-icon-svg-select-color: var(--csms-studio-fg-semantic-info);
  --csms-studio-dropdown-item-icon-svg-menu-color: var(--csms-studio-fg-hierarchy-secondary);
}
.csms-studio-dropdown .dropdown-toggle {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-body-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --bs-form-select-bg-img: url("data:image/svg+xml,<svg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M5.36321 8.36321C5.71469 8.01174 6.28453 8.01174 6.63601 8.36321L11.9996 13.7268L17.3632 8.36321C17.7147 8.01174 18.2845 8.01174 18.636 8.36321C18.9875 8.71469 18.9875 9.28453 18.636 9.63601L12.636 15.636C12.2845 15.9875 11.7147 15.9875 11.3632 15.636L5.36321 9.63601C5.01174 9.28453 5.01174 8.71469 5.36321 8.36321Z%27 fill=%27#2c2f32%27/%3E%3C/svg%3E");
  --bs-form-select-bg-img-disabled: url("data:image/svg+xml,<svg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M5.36321 8.36321C5.71469 8.01174 6.28453 8.01174 6.63601 8.36321L11.9996 13.7268L17.3632 8.36321C17.7147 8.01174 18.2845 8.01174 18.636 8.36321C18.9875 8.71469 18.9875 9.28453 18.636 9.63601L12.636 15.636C12.2845 15.9875 11.7147 15.9875 11.3632 15.636L5.36321 9.63601C5.01174 9.28453 5.01174 8.71469 5.36321 8.36321Z%27 fill=%27rgba%2844, 47, 50, 0.4%29%27/></svg>");
  --csms-studio-form-select-bg-size: 18px;
  --csms-studio-form-control-height: 40px;
  --csms-studio-form-control-padding-y: 10px;
  --csms-studio-form-control-padding-x: 14px;
  --csms-studio-form-control-padding-x-right: calc(var(--csms-studio-form-select-bg-size) + 14px);
  --csms-studio-form-control-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-form-control-placeholder-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-hover-background-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-background-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-form-control-disabled-placeholder-color: var(--csms-studio-tx-hierarchy-senary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-info-30p);
}
.csms-studio-dropdown .dropdown-toggle:not([multiple]) {
  height: var(--csms-studio-form-control-height);
}
.csms-studio-dropdown .dropdown-toggle {
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x-right) var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
  background-color: var(--csms-studio-form-control-background-color);
  background-size: var(--csms-studio-form-select-bg-size) var(--csms-studio-form-select-bg-size);
  background-position: right var(--csms-studio-form-control-padding-x) center;
}
.csms-studio-dropdown .dropdown-toggle.hover:not(.disabled, :disabled, .ss-disabled, .focus, :focus), .csms-studio-dropdown .dropdown-toggle:hover:not(.disabled, :disabled, .ss-disabled, .focus, :focus) {
  --bs-border-color: var(--csms-studio-form-control-hover-border-color);
  background-color: var(--csms-studio-form-control-hover-background-color);
}
.csms-studio-dropdown .dropdown-toggle.focus, .csms-studio-dropdown .dropdown-toggle:focus {
  --bs-border-color: var(--csms-studio-form-control-focus-border-color);
  border-color: var(--bs-border-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.csms-studio-dropdown .dropdown-toggle.disabled, .csms-studio-dropdown .dropdown-toggle:disabled {
  --bs-border-color: var(--csms-studio-form-control-disabled-border-color);
  background-color: var(--csms-studio-form-control-disabled-background-color);
  background-image: var(--bs-form-select-bg-img-disabled);
}
.csms-studio-dropdown .dropdown-toggle.is-invalid, .csms-studio-dropdown .dropdown-toggle.vd-error {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-nega-30p);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.csms-studio-dropdown .dropdown-toggle.is-invalid.disabled, .csms-studio-dropdown .dropdown-toggle.is-invalid:disabled, .csms-studio-dropdown .dropdown-toggle.vd-error.disabled, .csms-studio-dropdown .dropdown-toggle.vd-error:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.csms-studio-dropdown .dropdown-toggle.is-valid, .csms-studio-dropdown .dropdown-toggle.vd-success {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-posi-30p);
}
.csms-studio-dropdown .dropdown-toggle.is-valid.disabled, .csms-studio-dropdown .dropdown-toggle.is-valid:disabled, .csms-studio-dropdown .dropdown-toggle.vd-success.disabled, .csms-studio-dropdown .dropdown-toggle.vd-success:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-30p);
}
.csms-studio-dropdown .dropdown-toggle {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-form-control-padding-x-right: var(--csms-studio-form-control-padding-x);
}
.csms-studio-dropdown .dropdown-toggle-icon::after {
  content: "";
  display: none;
}
.csms-studio-dropdown hr {
  border-color: var(--csms-studio-bo-hierarchy-primary);
  margin: 1px 0;
  opacity: 1;
}

.dropdown-item {
  display: flex;
  align-items: center;
  --bs-dropdown-item-border-radius: 6px;
  --bs-dropdown-item-padding-y: 10px;
  --bs-dropdown-item-padding-x: 14px;
  --bs-dropdown-item-padding-x-right: 8px;
  --bs-dropdown-link-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-dropdown-link-hover-color: var(--csms-studio-tx-hierarchy-primary-subtle);
  --bs-dropdown-link-hover-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --bs-dropdown-link-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-dropdown-link-active-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --bs-dropdown-link-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-dropdown-link-negative-color: var(--csms-studio-tx-semantic-nega-primary);
  --csms-studio-dropdown-link-focus-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-dropdown-link-disabled-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-dropdown-link-bg: var(--csms-studio-bg-neutral-white);
  --csms-studio-dropdown-link-height: 40px;
  background-color: var(--csms-studio-dropdown-link-bg);
  min-height: var(--csms-studio-dropdown-link-height);
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x-right) var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.dropdown-item.hover, .dropdown-item:hover, .dropdown-item:focus-within {
  color: var(--bs-dropdown-link-hover-color);
  background-color: var(--bs-dropdown-link-hover-bg);
}
.dropdown-item.focus, .dropdown-item:focus {
  background-color: var(--csms-studio-dropdown-link-bg);
  color: var(--bs-dropdown-link-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-item.disabled, .dropdown-item:disabled {
  opacity: 0.4;
  font-style: inherit;
}
.dropdown-item.negative {
  color: var(--csms-studio-dropdown-link-negative-color);
}

.dropdown-item-icon .svg-menu {
  margin-left: auto;
  flex: 0 0 auto;
}
.dropdown-item-icon .svg-menu svg {
  width: var(--csms-studio-dropdown-item-icon-svg-select-size);
  height: var(--csms-studio-dropdown-item-icon-svg-select-size);
}
.dropdown-item-icon .svg-menu svg .svg-color[stroke] {
  stroke: var(--csms-studio-dropdown-item-icon-svg-menu-color);
}
.dropdown-item-icon .svg-menu svg .svg-color[fill] {
  fill: var(--csms-studio-dropdown-item-icon-svg-menu-color);
}
.dropdown-item-icon.focus, .dropdown-item-icon:focus {
  background-color: var(--csms-studio-dropdown-link-focus-bg);
}
.dropdown-item-icon.disabled, .dropdown-item-icon:disabled {
  background-color: var(--csms-studio-dropdown-link-disabled-bg);
}
.dropdown-item-icon.selected .svg-select {
  display: block;
}
.dropdown-item-icon .dropdown-item::after {
  display: none;
}

.dropdown-menu {
  --bs-dropdown-bg: var(--csms-studio-bg-neutral-white);
  --bs-dropdown-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --bs-dropdown-padding-x: 8px;
  --bs-dropdown-padding-y: 8px;
  --bs-dropdown-border-radius: 8px;
  --csms-studio-dropdown-item-title-padding-y: 4px;
  --csms-studio-dropdown-item-title-padding-x: 10px;
  --csms-studio-dropdown-item-title-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-dropdown-item-width: 100%;
  width: var(--csms-studio-dropdown-item-width);
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}
.dropdown-menu .dropdown-item-title {
  padding: var(--csms-studio-dropdown-item-title-padding-y) var(--csms-studio-dropdown-item-title-padding-x);
  color: var(--csms-studio-dropdown-item-title-color);
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}
.dropdown-menu > li + li,
.dropdown-menu > .dropdown-item + .dropdown-item {
  margin-top: 1px;
}
.dropdown-menu.dropdown-menu-160 {
  width: 160px;
}
.dropdown-menu.dropdown-menu-padding-lg {
  --bs-dropdown-padding-y: 12px;
}

.csms-studio-dropdown-xsm {
  --csms-studio-dropdown-item-icon-image-size: 24px;
  --csms-studio-dropdown-item-icon-svg-size: 18px;
  --csms-studio-dropdown-item-icon-svg-select-size: 16px;
}
.csms-studio-dropdown-xsm .dropdown-toggle {
  --csms-studio-form-control-height: 36px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  padding-top: 6px;
  padding-bottom: 6px;
}
.csms-studio-dropdown-xsm .dropdown-item {
  --bs-dropdown-item-padding-x: 10px;
  --bs-dropdown-item-padding-x-right: 8px;
  --bs-dropdown-item-padding-y: 6px;
  --csms-studio-dropdown-link-height: 36px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-dropdown-sm {
  --csms-studio-dropdown-item-icon-image-size: 24px;
  --csms-studio-dropdown-item-icon-svg-size: 18px;
  --csms-studio-dropdown-item-icon-svg-select-size: 16px;
}
.csms-studio-dropdown-sm .dropdown-toggle {
  --csms-studio-form-control-height: 40px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-dropdown-sm .dropdown-item {
  --bs-dropdown-item-padding-x: 10px;
  --bs-dropdown-item-padding-x-right: 8px;
  --bs-dropdown-item-padding-y: 6px;
  --csms-studio-dropdown-link-height: 40px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-dropdown-lg {
  --csms-studio-dropdown-item-icon-image-size: 28px;
  --csms-studio-dropdown-item-icon-svg-size: 22px;
  --csms-studio-dropdown-item-icon-svg-select-size: 20px;
}
.csms-studio-dropdown-lg .dropdown-toggle {
  --csms-studio-form-control-height: 48px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-dropdown-lg .dropdown-item {
  --csms-studio-dropdown-link-height: 48px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-dropdown-xlg {
  --csms-studio-dropdown-item-icon-image-size: 28px;
  --csms-studio-dropdown-item-icon-svg-size: 24px;
  --csms-studio-dropdown-item-icon-svg-select-size: 22px;
}
.csms-studio-dropdown-xlg .dropdown-toggle {
  --csms-studio-form-control-height: 52px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-dropdown-xlg .dropdown-item {
  --csms-studio-dropdown-link-height: 52px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

/*
.dropdown-submenu {
    .dropdown-menu > li:hover > .dropdown-submenu {
        display: block;
    }
}
*/
/* 2차 드롭다운 위치 조정 */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  bottom: 0;
  left: calc(100% + 5px);
  margin-top: -1px;
  display: none;
}
@media (max-width: 575.98px) {
  .dropdown-submenu > .dropdown-menu {
    left: 50px;
  }
}

/* hover 시 2차 메뉴 표시 */
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.csms-studio-chips {
  --csms-studio-chips-gap: 4px;
  --csms-studio-chips-svg-size: 16px;
  --csms-studio-chips-svg-color: transparent;
  --csms-studio-chips-font-weight: "medium";
  --csms-studio-chips-color: var(--csms-studio-tx-hierarchy-secondary);
  display: flex;
  align-items: center;
  gap: var(--csms-studio-chips-gap);
  flex-shrink: 0;
  color: var(--csms-studio-chips-color);
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-chips svg {
  width: var(--csms-studio-chips-svg-size);
  height: var(--csms-studio-chips-svg-size);
}
.csms-studio-chips svg .svg-color[stroke] {
  stroke: var(--csms-studio-chips-svg-color);
}
.csms-studio-chips svg .svg-color[fill] {
  fill: var(--csms-studio-chips-svg-color);
}
.csms-studio-chips.csms-studio-chips-dot {
  --csms-studio-chips-gap: 2px;
}

.csms-studio-chips-bg {
  display: flex;
  height: 24px;
  padding: 0 4px 0 2px;
  justify-content: center;
  align-items: center;
  gap: 2px;
  border-radius: var(--csms-studio-border-radius-8);
  background: var(--csms-studio-bg-neutral-w50p);
}

.csms-studio-chips-red {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-nega);
}

.csms-studio-chips-orange {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-prog);
}

.csms-studio-chips-yellow {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-warn-primary);
}

.csms-studio-chips-blue {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-info);
}

.csms-studio-chips-green {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-posi);
}

.csms-studio-chips-purple {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-etc);
}

.csms-studio-chips-gray-dark {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-tertiary);
}

.csms-studio-chips-gray-deep {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-quaternary);
}

.csms-studio-chips-gray {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-quinary);
}

.csms-studio-chips-gray-light {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-senary);
}

.csms-studio-chips-sm {
  --csms-studio-chips-svg-size: 14px;
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-chips-date.csms-studio-chips-sm {
  --csms-studio-chips-svg-size: 12px;
}

.csms-studio-chips-md {
  --csms-studio-chips-svg-size: 16px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-chips-date.csms-studio-chips-md {
  --csms-studio-chips-svg-size: 14px;
}

.csms-studio-chips-lg {
  --csms-studio-chips-svg-size: 20px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-chips-date.csms-studio-chips-lg {
  --csms-studio-chips-svg-size: 16px;
}

.csms-studio-chips-activity {
  --csms-studio-chips-activity-gap: 4px;
  --csms-studio-chips-activity-background: transparent;
  --csms-studio-chips-activity-padding: 4px 6px;
  --csms-studio-chips-activity-height: 24px;
  --csms-studio-chips-activity-border-radius: 4px;
  display: flex;
  align-items: center;
  gap: var(--csms-studio-chips-activity-gap);
  flex-shrink: 0;
  color: var(--csms-studio-tx-hierarchy-secondary);
  padding: var(--csms-studio-chips-activity-padding);
  height: var(--csms-studio-chips-activity-height);
  border-radius: var(--csms-studio-chips-activity-border-radius);
}
.csms-studio-chips-activity img {
  width: var(--csms-studio-chips-svg-size);
  height: var(--csms-studio-chips-svg-size);
}
.csms-studio-chips-activity.csms-studio-chips-activity-bg {
  background-color: var(--csms-studio-chips-activity-background);
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-chips-activity-forum {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-warn-quinary);
}

.csms-studio-chips-activity-quiz {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-nega-senary);
}

.csms-studio-chips-activity-assign {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-posi-senary);
}

.csms-studio-chips-activity-url {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-info-senary);
}

.csms-studio-chips-activity-ubfile {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-posi-senary);
}

.csms-studio-chips-activity-resource {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-posi-senary);
}

.csms-studio-chips-activity-vod {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-nega-senary);
}

.csms-studio-chips-activity-econtents {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-hierarchy-secondary);
}

.csms-studio-chips-activity-xncommons {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-info-senary);
}

.csms-studio-chips-activity-ubboard {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-prog-senary);
}

.csms-studio-chips-activity-feedback {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-etc-senary);
}

.csms-studio-chips-activity-zoom {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-info-senary);
}

.csms-studio-chips-activity-webexactivity {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-info-senary);
}

.csms-studio-chips-tag {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-chips-tag-gap: 4px;
  --csms-studio-chips-tag-background: transparent;
  --csms-studio-chips-tag-padding: 4px 8px;
  --csms-studio-chips-tag-border-radius: var(--csms-studio-border-radius-4);
  --csms-studio-chips-tag-height: 24px;
  --csms-studio-chips-tag-svg-color: var(--csms-studio-fg-semantic-posi);
  display: inline-flex;
  align-items: center;
  color: var(--csms-studio-tx-hierarchy-secondary);
  gap: var(--csms-studio-chips-tag-gap);
  background-color: var(--csms-studio-chips-tag-background);
  padding: var(--csms-studio-chips-tag-padding);
  border-radius: var(--csms-studio-chips-tag-border-radius);
  height: var(--csms-studio-chips-tag-height);
}
.csms-studio-chips-tag svg .svg-color[stroke] {
  stroke: var(--csms-studio-chips-tag-svg-color);
}
.csms-studio-chips-tag svg .svg-color[fill] {
  fill: var(--csms-studio-chips-tag-svg-color);
}
.csms-studio-chips-tag.csms-studio-chips-tag-red {
  --csms-studio-chips-tag-svg-color: var(--csms-studio-fg-semantic-nega);
}
.csms-studio-chips-tag.csms-studio-chips-tag-hyflex {
  color: var(--csms-studio-tx-semantic-info-tertiary);
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-info-quinary);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 5%; /* 0.6px */
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.csms-studio-chips-tag.csms-studio-chips-hyflex {
  --csms-studio-chips-tag-padding: 0;
  --csms-studio-chips-tag-background: none;
}

.csms-studio-chips-tag-blue {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-info-quinary);
}

.csms-studio-chips-tag-red {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-nega-quinary);
}

.csms-studio-chips-tag-green {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-posi-quinary);
}

.csms-studio-chips-tag-yellow {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-warn-quinary);
}

.csms-studio-chips-tag-purple {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-etc-quinary);
}

.csms-studio-chips-tag-gray {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-hierarchy-tertiary);
}

.csms-studio-chips-tag-time-1 {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-info-quinary);
}

.csms-studio-chips-tag-time-2 {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-posi-quinary);
}

.csms-studio-chips-tag-time-3 {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-warn-quinary);
}

.csms-studio-chips-tag-time-4 {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-etc-quinary);
}

.csms-studio-chips-date {
  --csms-studio-chips-svg-size: 14px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 5%; /* 0.6px */
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.csms-studio-chips-date-dday {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-chips-color: var(--csms-studio-tx-semantic-nega-primary);
  --csms-studio-label-font-weight: 700;
}

.csms-studio-chips-date-before {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-chips-color: var(--csms-studio-tx-hierarchy-quaternary);
}

.csms-studio-chips-date-ing {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-info);
  --csms-studio-chips-color: var(--csms-studio-tx-semantic-info-primary);
  text-decoration: none;
}

.csms-studio-chips-date-lateness {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-prog);
  --csms-studio-chips-color: var(--csms-studio-tx-semantic-prog-primary);
}

.csms-studio-chips-date-end {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-chips-color: var(--csms-studio-tx-hierarchy-secondary);
  text-decoration: none;
}

.pagination {
  --bs-pagination-padding-x: 0;
  --bs-pagination-padding-y: 0;
  --bs-pagination-color: var(--csms-studio-tx-hierarchy-quinary);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-width: 0;
  --bs-pagination-border-color: transparent;
  --bs-pagination-border-radius: 8px;
  --bs-pagination-hover-color: var(--csms-studio-tx-hierarchy-quinary);
  --bs-pagination-hover-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --bs-pagination-focus-color: var(--csms-studio-tx-hierarchy-quinary);
  --bs-pagination-focus-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --bs-pagination-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-pagination-active-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-pagination-disabled-color: var(--csms-studio-tx-hierarchy-senary);
  --bs-pagination-disabled-bg: transparent;
  --csms-studio-pagination-page-link-width: 32px;
  --csms-studio-pagination-page-link-height: 32px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0;
}
.pagination .page-link {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  width: var(--csms-studio-pagination-page-link-width);
  height: var(--csms-studio-pagination-page-link-height);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bs-pagination-border-radius);
}
.pagination .page-link:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.pagination .page-item:not(:first-child) .page-link {
  margin-left: 0;
}
.pagination .page-item-prev {
  margin-right: 4px;
}
.pagination .page-item-next {
  margin-left: 4px;
}

.short-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}
.short-pagination .page-info {
  display: flex;
  align-items: center;
  gap: 2px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quinary);
}
.short-pagination .page-info .current {
  color: var(--csms-studio-tx-hierarchy-tertiary);
}
.short-pagination .page-link:hover {
  border-color: var(--csms-studio-btn-icon-border-color);
}

.csms-studio-box-shadow-xsm {
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.csms-studio-box-shadow-sm {
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.csms-studio-box-shadow-md {
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}

.csms-studio-box-shadow-lg {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.csms-studio-box-shadow-xl {
  box-shadow: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-2xl {
  box-shadow: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-3xl {
  box-shadow: 0 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
}

/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

.csms-studio-heading-2xlg {
  --csms-studio-heading-font-weight: 700;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-xlg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 40px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 56px;
  margin-bottom: 0;
}

.csms-studio-heading-lg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 32px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 45px;
  margin-bottom: 0;
}

.csms-studio-heading-md {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 28px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-sm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm-semibold {
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-label-xlg-bold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-semibold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-medium {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-normal {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-bold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-semibold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-medium {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-normal {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-bold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-semibold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-medium {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-normal {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-bold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-semibold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-medium {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-normal {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-bold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-semibold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-medium {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-normal {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-bold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-semibold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-medium {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-normal {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-caption-lg {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-md {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-sm {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 10px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 12px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-csms-studio-icon {
  --csms-studio-btn-icon-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-svg-color: --csms-studio-fg-hierarchy-secondary;
  --csms-studio-btn-icon-svg-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--csms-studio-btn-icon-border-color);
  border-radius: var(--csms-studio-btn-icon-border-radius);
  background-color: var(--csms-studio-btn-icon-background-color);
  color: var(--csms-studio-btn-icon-svg-color);
  width: var(--csms-studio-btn-icon-size);
  height: var(--csms-studio-btn-icon-size);
  padding: 0;
}
.btn-csms-studio-icon.hover, .btn-csms-studio-icon:hover {
  background-color: var(--csms-studio-btn-icon-hover-background-color);
}
.btn-csms-studio-icon.focus, .btn-csms-studio-icon:focus {
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-icon.active, .btn-csms-studio-icon:active {
  background-color: var(--csms-studio-btn-icon-active-background-color);
}
.btn-csms-studio-icon:disabled, .btn-csms-studio-icon.disabled, .btn-csms-studio-icon[disabled=disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-csms-studio-icon:disabled:hover, .btn-csms-studio-icon:disabled.hover, .btn-csms-studio-icon.disabled:hover, .btn-csms-studio-icon.disabled.hover, .btn-csms-studio-icon[disabled=disabled]:hover, .btn-csms-studio-icon[disabled=disabled].hover {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.btn-csms-studio-icon:disabled:active, .btn-csms-studio-icon:disabled.active, .btn-csms-studio-icon.disabled:active, .btn-csms-studio-icon.disabled.active, .btn-csms-studio-icon[disabled=disabled]:active, .btn-csms-studio-icon[disabled=disabled].active {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.btn-csms-studio-icon svg {
  width: var(--csms-studio-btn-icon-svg-size);
  height: var(--csms-studio-btn-icon-svg-size);
}
.btn-csms-studio-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-svg-color);
}
.btn-csms-studio-icon svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-svg-color);
}

.btn-csms-studio-icon-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-primary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-neutral-white-solid);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-primary.focus, .btn-csms-studio-icon-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-icon-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-outline-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-coursemos-primary);
}

.btn-csms-studio-icon-outline-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}

.btn-csms-studio-icon-outline-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-coursemos-primary);
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.btn-csms-studio-icon-outline-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.btn-csms-studio-icon-nospace-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-nospace-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-neutral-b10p);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-quinary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-neutral-white-solid);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-senary-subtle);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-primary.disabled, .btn-csms-studio-icon-gray-primary:disabled {
  background-color: var(--csms-studio-bg-hierarchy-senary);
}
.btn-csms-studio-icon-gray-primary.focus, .btn-csms-studio-icon-gray-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-icon-gray-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bo-coursemos-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-quaternary.focus, .btn-csms-studio-icon-gray-quaternary:focus {
  background-color: var(--csms-studio-bg-coursemos-quinary);
}

.btn-csms-studio-icon-gray-outline-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}

.btn-csms-studio-icon-gray-outline-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover, .btn-csms-studio-icon-gray-outline-secondary:hover {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-secondary:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-secondary:hover svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.active, .btn-csms-studio-icon-gray-outline-secondary:active {
  color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-secondary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-secondary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-icon-gray-outline-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.btn-csms-studio-icon-gray-outline-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover, .btn-csms-studio-icon-gray-outline-quaternary:hover {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-quaternary:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-quaternary:hover svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active, .btn-csms-studio-icon-gray-outline-quaternary:active {
  color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-quaternary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-quaternary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-icon-gray-nospace-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-neutral-b6p-hovered);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-neutral-b15p);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-nospace-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover, .btn-csms-studio-icon-gray-nospace-secondary:hover, .btn-csms-studio-icon-gray-nospace-secondary.active, .btn-csms-studio-icon-gray-nospace-secondary:active {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary:hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary:hover svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-csms-studio-icon-gray-nospace-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-info-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-2xsm {
  --csms-studio-btn-icon-size: 20px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 12px;
}

.btn-csms-studio-icon-xsm {
  --csms-studio-btn-icon-size: 24px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 14px;
}

.btn-csms-studio-icon-sm {
  --csms-studio-btn-icon-size: 28px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 16px;
}

.btn-csms-studio-icon-md {
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 18px;
}

.btn-csms-studio-icon-lg {
  --csms-studio-btn-icon-size: 36px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 18px;
}

.btn-csms-studio-icon-xlg {
  --csms-studio-btn-icon-size: 40px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 20px;
}

.btn-csms-studio-icon-2xlg {
  --csms-studio-btn-icon-size: 48px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 24px;
}

.btn-csms-studio-svgicon {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-bg-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-svgicon-size-md: 16px;
  --csms-studio-btn-svgicon-size-lg: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon.hover, .btn-csms-studio-svgicon:hover {
  color: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.hover svg .svg-color[stroke], .btn-csms-studio-svgicon:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.hover svg .svg-color[fill], .btn-csms-studio-svgicon:hover svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.focus, .btn-csms-studio-svgicon:focus {
  color: var(--csms-studio-btn-svgicon-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon.active, .btn-csms-studio-svgicon:active {
  color: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon.active svg .svg-color[stroke], .btn-csms-studio-svgicon:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon.active svg .svg-color[fill], .btn-csms-studio-svgicon:active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon:disabled, .btn-csms-studio-svgicon.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-csms-studio-svgicon svg {
  width: var(--csms-studio-btn-svgicon-size-md);
  height: var(--csms-studio-btn-svgicon-size-md);
}

.btn-csms-studio-svgicon {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-tertiary);
}

.btn-csms-studio-svgicon-help {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active svg .svg-color[stroke], .btn-csms-studio-svgicon-help:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active svg .svg-color[fill], .btn-csms-studio-svgicon-help:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active, .btn-csms-studio-svgicon-help:active {
  background-color: var(--csms-studio-btn-svgicon-bg-color);
}

.btn-csms-studio-svgicon-eye {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-svgicon-eye.active svg .svg-color[stroke], .btn-csms-studio-svgicon-eye:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-svgicon-eye.active svg .svg-color[fill], .btn-csms-studio-svgicon-eye:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-svgicon-home {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home.active svg .svg-color[stroke], .btn-csms-studio-svgicon-home:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home.active svg .svg-color[fill], .btn-csms-studio-svgicon-home:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home svg {
  width: --csms-studio-btn-svgicon-size-lg;
  height: --csms-studio-btn-svgicon-size-lg;
}
.btn-csms-studio-svgicon-home {
  border-radius: 0 !important;
}

.btn-csms-studio-svgicon-circle {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle.hover, .btn-csms-studio-svgicon-circle:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle.focus, .btn-csms-studio-svgicon-circle:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle.active, .btn-csms-studio-svgicon-circle:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle:disabled, .btn-csms-studio-svgicon-circle.disabled {
  opacity: 0.4;
}

.btn-csms-studio-svgicon-circle-arrow {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle-arrow svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-arrow svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-arrow svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle-arrow.hover, .btn-csms-studio-svgicon-circle-arrow:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle-arrow.focus, .btn-csms-studio-svgicon-circle-arrow:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle-arrow.active, .btn-csms-studio-svgicon-circle-arrow:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle-arrow:disabled, .btn-csms-studio-svgicon-circle-arrow.disabled {
  opacity: 0.4;
}
.btn-csms-studio-svgicon-circle-arrow {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-circle-size: 36px;
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.btn-csms-studio-svgicon-circle-help {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle-help svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-help svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-help svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle-help.hover, .btn-csms-studio-svgicon-circle-help:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle-help.focus, .btn-csms-studio-svgicon-circle-help:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle-help.active, .btn-csms-studio-svgicon-circle-help:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle-help:disabled, .btn-csms-studio-svgicon-circle-help.disabled {
  opacity: 0.4;
}
.btn-csms-studio-svgicon-circle-help {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-size: 40px;
}

.btn-csms-studio-like {
  --csms-studio-btn-icon-like-padding-y: 10px;
  --csms-studio-btn-icon-like-padding-x: 16px;
  --csms-studio-btn-icon-like-padding-x-round: 20px;
  --csms-studio-btn-icon-like-background: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-icon-like-hover-background: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-icon-like-active-svg-color: #fd6d6d;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-btn-icon-like-background);
  padding: var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x) var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x-round);
  border-radius: var(--csms-studio-border-radius-full) 0 0 var(--csms-studio-border-radius-full);
}
.btn-csms-studio-like svg {
  width: 20px;
  height: 20px;
}
.btn-csms-studio-like svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-like svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-like {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-csms-studio-like.hover, .btn-csms-studio-like:hover {
  background: var(--csms-studio-btn-icon-like-hover-background);
}
.btn-csms-studio-like.focus, .btn-csms-studio-like:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-like.is-active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-like.is-active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-like.is-active svg .svg-thumb-bg {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}

.btn-csms-studio-dislike {
  --csms-studio-btn-icon-like-padding-y: 10px;
  --csms-studio-btn-icon-like-padding-x: 16px;
  --csms-studio-btn-icon-like-padding-x-round: 20px;
  --csms-studio-btn-icon-like-background: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-icon-like-hover-background: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-icon-like-active-svg-color: #fd6d6d;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-btn-icon-like-background);
  padding: var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x-round) var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x);
  border-radius: 0 var(--csms-studio-border-radius-full) var(--csms-studio-border-radius-full) 0;
}
.btn-csms-studio-dislike svg {
  width: 20px;
  height: 20px;
}
.btn-csms-studio-dislike svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-dislike svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-dislike {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-csms-studio-dislike.hover, .btn-csms-studio-dislike:hover {
  background: var(--csms-studio-btn-icon-like-hover-background);
}
.btn-csms-studio-dislike.focus, .btn-csms-studio-dislike:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-dislike.is-active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-dislike.is-active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-dislike.is-active svg .svg-thumb-bg {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}

.btn-csms-studio-like-container {
  display: flex;
  align-items: center;
}
.btn-csms-studio-like-container .btn-csms-studio-like + .btn-csms-studio-dislike {
  margin-left: -1px;
}

.csms-studio-box-shadow-xsm {
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.csms-studio-box-shadow-sm {
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.csms-studio-box-shadow-md {
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}

.csms-studio-box-shadow-lg {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.csms-studio-box-shadow-xl {
  box-shadow: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-2xl {
  box-shadow: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-3xl {
  box-shadow: 0 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
}

.alert {
  --csms-studio-alert-padding-y: 12px;
  --csms-studio-alert-padding-x: 16px;
  --csms-studio-alert-border-radius: var(--csms-studio-border-radius-8);
}
.alert .btn-close {
  margin-left: auto;
  flex-shrink: 0;
  --csms-studio-btn-icon-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-svg-color: --csms-studio-fg-hierarchy-secondary;
  --csms-studio-btn-icon-svg-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--csms-studio-btn-icon-border-color);
  border-radius: var(--csms-studio-btn-icon-border-radius);
  background-color: var(--csms-studio-btn-icon-background-color);
  color: var(--csms-studio-btn-icon-svg-color);
  width: var(--csms-studio-btn-icon-size);
  height: var(--csms-studio-btn-icon-size);
  padding: 0;
}
.alert .btn-close.hover, .alert .btn-close:hover {
  background-color: var(--csms-studio-btn-icon-hover-background-color);
}
.alert .btn-close.focus, .alert .btn-close:focus {
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.alert .btn-close.active, .alert .btn-close:active {
  background-color: var(--csms-studio-btn-icon-active-background-color);
}
.alert .btn-close:disabled, .alert .btn-close.disabled, .alert .btn-close[disabled=disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.alert .btn-close:disabled:hover, .alert .btn-close:disabled.hover, .alert .btn-close.disabled:hover, .alert .btn-close.disabled.hover, .alert .btn-close[disabled=disabled]:hover, .alert .btn-close[disabled=disabled].hover {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.alert .btn-close:disabled:active, .alert .btn-close:disabled.active, .alert .btn-close.disabled:active, .alert .btn-close.disabled.active, .alert .btn-close[disabled=disabled]:active, .alert .btn-close[disabled=disabled].active {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.alert .btn-close svg {
  width: var(--csms-studio-btn-icon-svg-size);
  height: var(--csms-studio-btn-icon-svg-size);
}
.alert .btn-close svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-svg-color);
}
.alert .btn-close svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-svg-color);
}
.alert .btn-close {
  --csms-studio-btn-icon-size: 28px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 16px;
  margin-top: 7px;
  margin-right: 7px;
}
.alert svg {
  width: 16px;
  height: 16px;
}
.alert {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.alert .description {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.alert.alert-warning {
  background-color: var(--csms-studio-bg-semantic-nega-senary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .btn-close {
  opacity: inherit;
}
.alert.alert-warning .btn-close.focus, .alert.alert-warning .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.alert.alert-warning .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.alert.alert-info, .alert.alert-guide {
  background-color: var(--csms-studio-bg-semantic-info-senary);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.alert.alert-info .svg-icon svg .svg-color[stroke], .alert.alert-guide .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-info);
}
.alert.alert-info .svg-icon svg .svg-color[fill], .alert.alert-guide .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-info);
}
.alert.alert-info .btn-close, .alert.alert-guide .btn-close {
  opacity: inherit;
}
.alert.alert-info .btn-close.focus, .alert.alert-info .btn-close:focus, .alert.alert-guide .btn-close.focus, .alert.alert-guide .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.alert.alert-info .btn-close, .alert.alert-guide .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.alert.alert-warning, .alert.alert-caution {
  background-color: var(--csms-studio-bg-semantic-warn-quinary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .svg-icon svg .svg-color[stroke], .alert.alert-caution .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-prog);
}
.alert.alert-warning .svg-icon svg .svg-color[fill], .alert.alert-caution .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-prog);
}
.alert.alert-warning .btn-close, .alert.alert-caution .btn-close {
  opacity: inherit;
}
.alert.alert-warning .btn-close.focus, .alert.alert-warning .btn-close:focus, .alert.alert-caution .btn-close.focus, .alert.alert-caution .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.alert.alert-warning .btn-close, .alert.alert-caution .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.alert.alert-danger {
  background-color: var(--csms-studio-bg-semantic-nega-senary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-danger .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-nega-quinary);
}
.alert.alert-danger .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-nega-quinary);
}
.alert.alert-danger .btn-close {
  opacity: inherit;
}
.alert.alert-danger .btn-close.focus, .alert.alert-danger .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}

.csms-studio-alert {
  --csms-studio-alert-gap: 4px;
  --csms-studio-alert-svg-color: var(--csms-studio-fg-semantic-info);
}
.csms-studio-alert .alert-content {
  display: flex;
  align-items: flex-start;
  gap: var(--csms-studio-alert-gap);
  min-height: 28px;
}
.csms-studio-alert .alert-content .svg-icon {
  margin-top: 4px;
  display: flex;
  align-self: flex-start;
  padding: 2px 0;
}
.csms-studio-alert .alert-content .svg-icon svg {
  width: 16px;
  height: 16px;
}
.csms-studio-alert .alert-content .alert-text {
  margin-top: 3.5px;
}
.csms-studio-alert .alert-content .btn-close {
  box-sizing: border-box;
  margin-top: 0;
  margin-right: 0;
}

.csms-studio-alert-header {
  --csms-studio-alert-gap: 8px;
  --bs-alert-padding-x: 24px;
  --bs-alert-bg: var(--csms-studio-bg-semantic-info-senary-subtle);
  --bs-alert-color: var(--csms-studio-tx-hierarchy-tertiary);
  margin-bottom: 24px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csms-studio-alert-header .alert-content {
  flex-wrap: wrap;
}
.csms-studio-alert-header .alert-content .svg-icon {
  margin-top: 6px;
}
.csms-studio-alert-header .alert-content .svg-icon svg {
  width: 18px;
  height: 18px;
}
.csms-studio-alert-header .alert-content .alert-text {
  margin-top: 5.5px;
}
.csms-studio-alert-header .alert-content .alert-button {
  margin-left: auto;
}
.csms-studio-alert-header .alert-content .btn-ghost {
  margin-top: 4px;
  color: var(--csms-studio-btn-color);
  font-weight: var(--csms-studio-caption-font-weight);
}
@media (max-width: 575.98px) {
  .csms-studio-alert-header .alert-content form {
    width: 100%;
    justify-content: flex-end;
  }
  .csms-studio-alert-header .alert-content .alert-button {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .csms-studio-alert-header .alert-content .btn-ghost {
    width: auto;
    margin: 0;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.csms-studio-toast-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.csms-studio-toast-container .toast {
  margin-bottom: 0;
}

.csms-studio-toast {
  --bs-toast-padding-x: 16px;
  --bs-toast-padding-y: 14px;
  --bs-toast-box-shadow: none;
  --bs-toast-max-width: 100%;
  --csms-studio-toast-border-top-left-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-border-top-right-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-border-bottom-left-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-border-bottom-right-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-body-min-height: 28px;
  --csms-studio-toast-icon-margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
  border: 0;
  border-radius: var(--csms-studio-toast-border-top-left-radius) var(--csms-studio-toast-border-top-right-radius) var(--csms-studio-toast-border-bottom-right-radius) var(--csms-studio-toast-border-bottom-left-radius);
  padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
}
.csms-studio-toast .toast-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  min-height: var(--csms-studio-toast-body-min-height);
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-toast .toast-body .svg-icon {
  align-self: flex-start;
}
.csms-studio-toast .toast-body .svg-icon svg {
  width: 20px;
  height: 20px;
}
.csms-studio-toast .toast-body .svg-icon {
  margin-top: var(--csms-studio-toast-icon-margin-top);
}
.csms-studio-toast .toast-body .toast-text {
  display: flex;
  align-items: center;
  gap: 4px 8px;
  flex-wrap: wrap;
}
.csms-studio-toast .btn-close {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: var(--csms-studio-toast-icon-margin-top);
}
.csms-studio-toast.csms-studio-toast-warning {
  background-color: var(--csms-studio-bg-semantic-nega-senary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-warning .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-warning .btn-close.focus, .csms-studio-toast.csms-studio-toast-warning .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-warning .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-nega);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-nega);
}
.csms-studio-toast.csms-studio-toast-guide {
  background-color: var(--csms-studio-bg-semantic-info-senary);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csms-studio-toast.csms-studio-toast-guide .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-info);
}
.csms-studio-toast.csms-studio-toast-guide .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-info);
}
.csms-studio-toast.csms-studio-toast-guide .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-guide .btn-close.focus, .csms-studio-toast.csms-studio-toast-guide .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-guide .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.csms-studio-toast.csms-studio-toast-caution {
  background-color: var(--csms-studio-bg-semantic-warn-quinary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-caution .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-prog);
}
.csms-studio-toast.csms-studio-toast-caution .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-prog);
}
.csms-studio-toast.csms-studio-toast-caution .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-caution .btn-close.focus, .csms-studio-toast.csms-studio-toast-caution .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-caution .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.csms-studio-toast.csms-studio-toast-success {
  background-color: var(--csms-studio-bg-semantic-posi-senary);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csms-studio-toast.csms-studio-toast-success .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-posi);
}
.csms-studio-toast.csms-studio-toast-success .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-posi);
}
.csms-studio-toast.csms-studio-toast-success .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-success .btn-close.focus, .csms-studio-toast.csms-studio-toast-success .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-success .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-posi-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-posi-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.csms-studio-toast-button {
  --csms-studio-toast-body-min-height: 44px;
  --csms-studio-toast-icon-margin-top: 10px;
}

.csms-studio-toast-slide-down {
  --csms-studio-toast-border-top-left-radius: 0;
  --csms-studio-toast-border-top-right-radius: 0;
  animation: slideDown 0.5s ease-in-out;
  margin-bottom: 1px;
}

.csms-studio-toast-slide-up {
  --csms-studio-toast-border-bottom-left-radius: 0;
  --csms-studio-toast-border-bottom-right-radius: 0;
  animation: slideUp 0.5s ease-in-out;
  margin-top: 1px;
}

.csms-studio-toast-default-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 760px;
  height: auto;
  padding: 14px 16px;
  box-sizing: border-box;
  border-bottom-right-radius: var(--csms-studio-border-radius-16);
  border-bottom-left-radius: var(--csms-studio-border-radius-16);
  z-index: 1000;
  margin: 0 auto;
}

.progress {
  --bs-progress-height: 8px;
  --bs-progress-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-progress-border-radius: var(--csms-studio-border-radius-full);
  --bs-progress-box-shadow: none;
  --bs-progress-bar-color: #fff;
  --bs-progress-bar-bg: var(--csms-studio-bg-semantic-prog-primary);
  --bs-progress-bar-transition: width 0.6s ease;
}
.progress .progress-bar {
  --bs-progress-bar-bg: var(--csms-studio-tx-semantic-prog-primary);
  border-radius: var(--csms-studio-border-radius-full);
  transition: width 0.3s ease-in-out;
  animation: animateBar 1.2s 1;
}
.progress .progress-striped {
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.progress-wrap span {
  flex: 0 0 auto;
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-semantic-prog-primary);
}
.progress-wrap .progress {
  flex: 1;
}

@keyframes animateBar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.form-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
  margin-bottom: 0;
  min-height: 24px;
}
.form-check .form-check-input {
  --bs-form-check-bg: var(--csms-studio-bg-neutral-white);
  --bs-border-width: 2px;
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-check-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-form-check-hover-border-color: var(--csms-studio-bo-hierarchy-quaternary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-info-primary);
  --csms-studio-form-check-checked-border-color: transparent;
  --csms-studio-form-check-checekd-hover-background-color: var(--csms-studio-bg-semantic-info-secondary);
  --csms-studio-form-check-checked-hover-border-color: transparent;
  --csms-studio-form-check-disabled-background-color: var(--csms-studio-bg-neutral-b10p);
  --csms-studio-form-check-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-check-background-size: auto;
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-info-30p);
  --bs-form-valid-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --bs-form-invalid-border-color: var(--csms-studio-bo-semantic-nega-primary);
  width: 20px;
  height: 20px;
  float: none;
  margin: 0;
  vertical-align: middle;
  filter: none;
}
.form-check .form-check-input[type=checkbox] {
  border-radius: 6px;
}
.form-check .form-check-input.hover, .form-check .form-check-input:hover, .form-check .form-check-input.active, .form-check .form-check-input:active {
  background-color: var(--csms-studio-form-check-hover-background-color);
  border-color: var(--csms-studio-form-check-hover-border-color);
}
.form-check .form-check-input.focus, .form-check .form-check-input:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.form-check .form-check-input.active, .form-check .form-check-input:active {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.form-check .form-check-input:checked {
  background-color: var(--csms-studio-form-check-checked-background-color);
  border-color: var(--csms-studio-form-check-checked-border-color);
  background-size: var(--csms-studio-form-check-background-size);
}
.form-check .form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,<svg width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path d=%27M5.06052 7.98144L5.04203 7.99994L0.423828 3.38174L1.92761 1.87796L5.06058 5.01094L10.0715 0L11.5753 1.50378L5.07908 8L5.06052 7.98144Z%27 fill=%27white%27/></svg>");
}
.form-check .form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,<svg width=%278%27 height=%278%27 viewBox=%270 0 8 8%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><rect width=%278%27 height=%278%27 rx=%274%27 fill=%27white%27/></svg>");
}
.form-check .form-check-input:checked.hover, .form-check .form-check-input:checked:hover, .form-check .form-check-input:checked.active, .form-check .form-check-input:checked:active {
  background-color: var(--csms-studio-form-check-checekd-hover-background-color);
  border-color: var(--csms-studio-form-check-checked-hover-border-color);
}
.form-check .form-check-input[disabled], .form-check .form-check-input:disabled {
  background-color: var(--csms-studio-form-check-disabled-background-color) !important;
  border-color: var(--csms-studio-form-check-disabled-border-color) !important;
  opacity: 50% !important;
}
.form-check .form-check-input[disabled]:checked, .form-check .form-check-input:disabled:checked {
  background-color: var(--csms-studio-form-check-checked-background-color) !important;
  border-color: var(--csms-studio-form-check-checked-border-color) !important;
}
.form-check .form-check-input[disabled] ~ .form-check-label, .form-check .form-check-input:disabled ~ .form-check-label {
  cursor: default;
  opacity: 50%;
}
.form-check .form-check-input[type=checkbox]:indeterminate {
  background-color: var(--csms-studio-form-check-checked-background-color);
  border-color: var(--csms-studio-form-check-checked-border-color);
  --bs-form-check-bg-image: url("data:image/svg+xml,<svg width=%2710%27 height=%273%27 viewBox=%270 0 10 3%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><rect y=%270.25%27 width=%2710%27 height=%272.4%27 fill=%27white%27/></svg>");
  background-size: auto;
}
.form-check .form-check-input[type=checkbox]:indeterminate.hover, .form-check .form-check-input[type=checkbox]:indeterminate:hover, .form-check .form-check-input[type=checkbox]:indeterminate.active, .form-check .form-check-input[type=checkbox]:indeterminate:active {
  --csms-studio-form-check-checekd-hover-background-color: var(--csms-studio-bg-semantic-info-secondary);
  --csms-studio-form-check-checked-hover-border-color: transparent;
}
.form-check .form-check-input.is-valid {
  --bs-border-color: var(--bs-form-valid-border-color);
  --csms-studio-form-check-hover-border-color: var(--csms-studio-bo-semantic-posi-secondary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-posi-primary);
  --csms-studio-form-check-checekd-hover-background-color: var(--csms-studio-bg-semantic-posi-secondary);
  --csms-studio-form-check-disabled-border-color: var(--bs-form-valid-border-color);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-posi-30p);
}
.form-check .form-check-input.is-invalid, .form-check .form-check-input.vd-error {
  --bs-border-color: var(--bs-form-invalid-border-color);
  --csms-studio-form-check-hover-border-color: var(--csms-studio-bo-semantic-nega-secondary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-nega-primary);
  --csms-studio-form-check-checekd-hover-background-color: var(--csms-studio-bg-semantic-nega-secondary);
  --csms-studio-form-check-disabled-border-color: var(--bs-form-invalid-border-color);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-nega-30p);
}
.form-check .form-check-label {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}

.form-switch {
  padding-left: 0;
}
.form-switch .form-check-input {
  --csms-studio-form-check-svg-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-form-check-hover-border-color: transparent;
  --csms-studio-form-check-hover-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-info-primary);
  --bs-border-width: 1px;
  --bs-border-color: transparent;
  --bs-form-valid-border-color: transparent;
  --bs-form-invalid-border-color: transparent;
  --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27><circle cx=%278%27 cy=%278%27 r=%278%27 fill=%27white%27/></svg>");
  background-position: 2px center;
  background-size: auto;
  background-color: var(--csms-studio-form-check-svg-background-color);
}
.form-switch .form-check-input::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  --csms-studio-input-switch-box-shadow-x: 1px;
  box-shadow: var(--csms-studio-input-switch-box-shadow-x) 0px 2px 1px var(--csms-studio-bg-neutral-b6p-hovered);
}
.form-switch .form-check-input {
  width: 36px;
  padding: 2px;
  margin-left: 0;
}
.form-switch .form-check-input[type=checkbox] {
  border-radius: 10px;
}
.form-switch .form-check-input.hover, .form-switch .form-check-input:hover, .form-switch .form-check-input.focus, .form-switch .form-check-input:focus, .form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27><circle cx=%278%27 cy=%278%27 r=%278%27 fill=%27white%27/></svg>");
}
.form-switch .form-check-input.focus, .form-switch .form-check-input:focus {
  border-color: var(--csms-studio-form-check-hover-border-color);
}
.form-switch .form-check-input.active, .form-switch .form-check-input:active {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.form-switch .form-check-input.active, .form-switch .form-check-input:active {
  background-color: var(--csms-studio-form-check-svg-background-color);
}
.form-switch .form-check-input:checked {
  background-position: right 2px center;
}
.form-switch .form-check-input:checked::after {
  position: relative;
  left: 16px;
  --csms-studio-input-switch-box-shadow-x: -1px;
}
.form-switch .form-check-input:checked[type=checkbox] {
  background-size: auto;
}
.form-switch .form-check-input.disabled, .form-switch .form-check-input:disabled {
  background-color: var(--csms-studio-form-check-svg-background-color) !important;
}
.form-switch .form-check-input.is-valid {
  --bs-border-color: transparent;
  --csms-studio-form-check-svg-background-color: var(--csms-studio-bg-semantic-posi-quinary);
  --csms-studio-form-check-hover-border-color: transparent;
  --csms-studio-form-check-hover-background-color: var(--csms-studio-bg-semantic-posi-quaternary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-posi-primary);
  --csms-studio-form-check-disabled-background-color: var(--csms-studio-bg-semantic-posi-primary);
}
.form-switch .form-check-input.is-invalid, .form-switch .form-check-input.vd-error {
  --bs-border-color: transparent;
  --csms-studio-form-check-svg-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-form-check-hover-border-color: transparent;
  --csms-studio-form-check-hover-background-color: var(--csms-studio-bg-semantic-nega-quaternary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-nega-primary);
  --csms-studio-form-check-disabled-background-color: var(--csms-studio-bg-semantic-nega-primary);
}

.form-switch-svg {
  position: relative;
}
.form-switch-svg .form-check-input {
  border-width: 0;
  background-image: none;
  transition: none;
}
.form-switch-svg .form-check-input::after {
  display: none;
}
.form-switch-svg .svg {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 4px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  transition: transform 0.15s ease-in-out;
  transform: translate(0, 0);
  --csms-studio-form-switch-svg-svg-color: transparent;
}
.form-switch-svg .svg .svg-color {
  fill: var(--csms-studio-form-switch-svg-svg-color);
}
.form-switch-svg .svg svg {
  position: static;
  width: inherit;
  height: inherit;
  border-radius: 0;
  transition: none;
  transform: none;
}
.form-switch-svg .form-check-input:checked ~ .svg {
  transform: translate(16px, 0);
  --csms-studio-form-switch-svg-svg-color: var(--csms-studio-fg-semantic-info);
}
.form-switch-svg .form-check-input:checked.is-valid ~ .svg {
  --csms-studio-form-switch-svg-svg-color: var(--csms-studio-fg-semantic-posi);
}
.form-switch-svg .form-check-input:checked.is-invalid ~ .svg, .form-switch-svg .form-check-input:checked.vd-error ~ .svg {
  --csms-studio-form-switch-svg-svg-color: var(--csms-studio-fg-semantic-nega);
}

.form-switch-editmode {
  --csms-studio-form-switch-editmode-width: 68px;
  --csms-studio-form-switch-editmode-height: 36px;
  --csms-studio-form-switch-svg-size: 40px;
}
.form-switch-editmode .form-check-input {
  --csms-studio-form-check-svg-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  width: var(--csms-studio-form-switch-editmode-width);
  height: var(--csms-studio-form-switch-editmode-height);
  padding: 0;
}
.form-switch-editmode .form-check-input[type=checkbox] {
  border-radius: 99px;
}
.form-switch-editmode .form-check-input:checked {
  background-color: var(--csms-studio-bg-coursemos-primary);
}
.form-switch-editmode .form-check-input:checked::after {
  left: 28px;
}
.form-switch-editmode .svg {
  width: var(--csms-studio-form-switch-svg-size);
  height: var(--csms-studio-form-switch-svg-size);
  border-radius: 999px;
  background-color: var(--csms-studio-bg-hierarchy-secondary);
  border: 1px solid var(--csms-studio-bo-hierarchy-tertiary);
  top: -2px;
  left: 0;
}
.form-switch-editmode .svg svg {
  width: 16px;
  height: 16px;
}
.form-switch-editmode .form-check-input:checked ~ .svg {
  transform: translate(28px, 0);
}
.form-switch-editmode svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.form-switch-editmode svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.form-switch-editmode.form-switch-editmode-sm {
  --csms-studio-form-switch-editmode-width: 64px;
  --csms-studio-form-switch-editmode-height: 32px;
  --csms-studio-form-switch-svg-size: 36px;
}

[data-bs-theme=light-red] {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-primary {
  color: #161819;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-quinary {
  color: #899199;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-white {
  color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-black {
  color: #000000;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-black-solid {
  color: #000000;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-primary {
  color: #8a130a;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-secondary {
  color: #6e0f08;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-tertiary {
  color: #530b06;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-quaternary {
  color: #f1afb6;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-quinary {
  color: #f8d7da;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-senary {
  color: #fbebed;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-primary-30p {
  color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-quaternary {
  color: #044890;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-quinary {
  color: #033973;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-white {
  border-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-black {
  border-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-primary {
  border-color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-secondary {
  border-color: #a5170c;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-tertiary {
  border-color: #8a130a;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-quaternary {
  border-color: #f1afb6;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-quinary {
  border-color: #f8d7da;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-senary {
  border-color: #f7e8ea;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-secondary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-tertiary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-quaternary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-quinary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-senary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-white {
  background-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-black {
  background-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-secondary {
  background-color: #1582FF;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-tertiary {
  background-color: #2F90FF;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-quaternary {
  background-color: #004696;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-quinary {
  background-color: #002F64;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-quinary-subtle {
  background-color: #001732;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-senary {
  background-color: #00234B;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-white {
  background-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-black {
  background-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-primary {
  background-color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-secondary {
  background-color: #dc1e11;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-tertiary {
  background-color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-quaternary {
  background-color: #e35f6d;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-quinary {
  background-color: #f8d7da;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-senary {
  background-color: #fbebed;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-nega {
  background-color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-info {
  background-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}
[data-bs-theme=light-red] .csms-studio-ut-school-primary {
  background-color: #a5170c;
}
[data-bs-theme=light-red] .csms-studio-ut-school-secondary {
  background-color: #ea8791;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}
[data-bs-theme=light-red] {
  --csms-studio-tx-hierarchy-primary: #161819;
  --csms-studio-tx-hierarchy-secondary: #2c2f32;
  --csms-studio-tx-hierarchy-tertiary: #575e64;
  --csms-studio-tx-hierarchy-quaternary: #6d767e;
  --csms-studio-tx-hierarchy-quinary: #899199;
  --csms-studio-tx-hierarchy-senary: #c4c8cc;
  --csms-studio-tx-hierarchy-senary-subtle: #e0e3e5;
  --csms-studio-tx-neutral-white: #ffffff;
  --csms-studio-tx-neutral-black: #000000;
  --csms-studio-tx-neutral-black-solid: #000000;
  --csms-studio-tx-neutral-white-solid: #ffffff;
  --csms-studio-tx-neutral-b20p-disabled: rgba(0, 0, 0, 0.2);
  --csms-studio-tx-neutral-w80p-disabled: rgba(255, 255, 255, 0.8);
  --csms-studio-tx-coursemos-primary: #8a130a;
  --csms-studio-tx-coursemos-secondary: #6e0f08;
  --csms-studio-tx-coursemos-tertiary: #530b06;
  --csms-studio-tx-coursemos-quaternary: #f1afb6;
  --csms-studio-tx-coursemos-quinary: #f8d7da;
  --csms-studio-tx-coursemos-senary: #fbebed;
  --csms-studio-tx-coursemos-primary-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-tx-semantic-nega-primary: #f04438;
  --csms-studio-tx-semantic-nega-secondary: #dc1e11;
  --csms-studio-tx-semantic-nega-tertiary: #c11a0e;
  --csms-studio-tx-semantic-nega-quaternary: #8a130a;
  --csms-studio-tx-semantic-nega-quinary: #530b06;
  --csms-studio-tx-semantic-nega-senary: #fbebed;
  --csms-studio-tx-semantic-info-primary: #1181f9;
  --csms-studio-tx-semantic-info-secondary: #0673e7;
  --csms-studio-tx-semantic-info-tertiary: #0564ca;
  --csms-studio-tx-semantic-info-quaternary: #044890;
  --csms-studio-tx-semantic-info-quinary: #033973;
  --csms-studio-tx-semantic-info-senary: #e0eefe;
  --csms-studio-tx-semantic-posi-primary: #1ea465;
  --csms-studio-tx-semantic-posi-secondary: #188351;
  --csms-studio-tx-semantic-posi-tertiary: #157347;
  --csms-studio-tx-semantic-posi-quaternary: #0f5233;
  --csms-studio-tx-semantic-posi-quinary: #09311e;
  --csms-studio-tx-semantic-posi-senary: #e4faf0;
  --csms-studio-tx-semantic-noti-primary: #ffc107;
  --csms-studio-tx-semantic-prog-primary: #fd7e14;
  --csms-studio-tx-semantic-etc-primary: #6f42c1;
  --csms-studio-bo-hierarchy-primary: #eeeff0;
  --csms-studio-bo-hierarchy-secondary: #e0e3e5;
  --csms-studio-bo-hierarchy-tertiary: #d3d6d9;
  --csms-studio-bo-hierarchy-quaternary: #c4c8cc;
  --csms-studio-bo-hierarchy-quaternary-subtle: #6d767e;
  --csms-studio-bo-hierarchy-quinary: #41474b;
  --csms-studio-bo-hierarchy-senary: #161819;
  --csms-studio-bo-neutral-white: #ffffff;
  --csms-studio-bo-neutral-black: #000000;
  --csms-studio-bo-neutral-white-solid: #ffffff;
  --csms-studio-bo-neutral-black-solid: #000000;
  --csms-studio-bo-neutral-b30p: rgba(0, 0, 0, 0.3);
  --csms-studio-bo-coursemos-primary: #c11a0e;
  --csms-studio-bo-coursemos-secondary: #a5170c;
  --csms-studio-bo-coursemos-tertiary: #8a130a;
  --csms-studio-bo-coursemos-quaternary: #f1afb6;
  --csms-studio-bo-coursemos-quinary: #f8d7da;
  --csms-studio-bo-coursemos-senary: #f7e8ea;
  --csms-studio-bo-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bo-semantic-nega-primary: #f04438;
  --csms-studio-bo-semantic-nega-secondary: #dc1e11;
  --csms-studio-bo-semantic-nega-tertiary: #c11a0e;
  --csms-studio-bo-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bo-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-bo-semantic-info-primary: #1181f9;
  --csms-studio-bo-semantic-info-secondary: #1181f9;
  --csms-studio-bo-semantic-info-tertiary: #1181f9;
  --csms-studio-bo-semantic-info-quaternary: #1181f9;
  --csms-studio-bo-semantic-info-quinary: #1181f9;
  --csms-studio-bo-semantic-info-senary: #1181f9;
  --csms-studio-bo-semantic-info-40p: rgba(17, 129, 249, 0.4);
  --csms-studio-bo-semantic-posi-primary: #1ea465;
  --csms-studio-bo-semantic-posi-secondary: #188351;
  --csms-studio-bo-semantic-posi-tertiary: #157347;
  --csms-studio-bo-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bo-semantic-warn-primary: #ffc107;
  --csms-studio-bo-semantic-noti-primary: #ffc107;
  --csms-studio-bo-semantic-prog-primary: #fd7e14;
  --csms-studio-bo-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-hierarchy-primary: #fcfcfc;
  --csms-studio-bg-hierarchy-primary-subtle: #f5f5f5;
  --csms-studio-bg-hierarchy-secondary: #f0f1f2;
  --csms-studio-bg-hierarchy-secondary-subtle: #eeeff0;
  --csms-studio-bg-hierarchy-tertiary: #e0e3e5;
  --csms-studio-bg-hierarchy-quaternary: #d3d6d9;
  --csms-studio-bg-hierarchy-quinary: #899199;
  --csms-studio-bg-hierarchy-senary: #6d767e;
  --csms-studio-bg-hierarchy-senary-subtle: #575e64;
  --csms-studio-bg-neutral-white: #ffffff;
  --csms-studio-bg-neutral-black: #000000;
  --csms-studio-bg-neutral-white-solid: #ffffff;
  --csms-studio-bg-neutral-black-solid: #000000;
  --csms-studio-bg-neutral-b6p-hovered: rgba(0, 0, 0, 0.06);
  --csms-studio-bg-neutral-b10p: rgba(0, 0, 0, 0.1);
  --csms-studio-bg-neutral-b15p: rgba(0, 0, 0, 0.15);
  --csms-studio-bg-neutral-b60p: rgba(0, 0, 0, 0.6);
  --csms-studio-bg-neutral-b80p: rgba(0, 0, 0, 0.8);
  --csms-studio-bg-neutral-w90p: rgba(255, 255, 255, 0.9);
  --csms-studio-bg-neutral-w50p: rgba(255, 255, 255, 0.5);
  --csms-studio-bg-neutral-w30p: rgba(255, 255, 255, 0.3);
  --csms-studio-bg-neutral-w20p: rgba(255, 255, 255, 0.2);
  --csms-studio-bg-neutral-w5p: rgba(255, 255, 255, 0.05);
  --csms-studio-bg-neutral-w1p: rgba(255, 255, 255, 0.01);
  --csms-studio-bg-coursemos-primary: #0075F8;
  --csms-studio-bg-coursemos-secondary: #1582FF;
  --csms-studio-bg-coursemos-tertiary: #2F90FF;
  --csms-studio-bg-coursemos-quaternary: #004696;
  --csms-studio-bg-coursemos-quinary: #002F64;
  --csms-studio-bg-coursemos-quinary-subtle: #001732;
  --csms-studio-bg-coursemos-senary: #00234B;
  --csms-studio-bg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bg-semantic-nega-primary: #f04438;
  --csms-studio-bg-semantic-nega-secondary: #dc1e11;
  --csms-studio-bg-semantic-nega-tertiary: #c11a0e;
  --csms-studio-bg-semantic-nega-quaternary: #ea8791;
  --csms-studio-bg-semantic-nega-quinary: #f8d7da;
  --csms-studio-bg-semantic-nega-senary: #fbebed;
  --csms-studio-bg-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bg-semantic-info-primary: #1181f9;
  --csms-studio-bg-semantic-info-secondary: #0564ca;
  --csms-studio-bg-semantic-info-tertiary: #0456ad;
  --csms-studio-bg-semantic-info-quaternary: #c0defd;
  --csms-studio-bg-semantic-info-quinary: #d5e9fe;
  --csms-studio-bg-semantic-info-senary: #e0eefe;
  --csms-studio-bg-semantic-info-senary-subtle: #eaf4fe;
  --csms-studio-bg-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bg-semantic-posi-primary: #1ea465;
  --csms-studio-bg-semantic-posi-secondary: #188351;
  --csms-studio-bg-semantic-posi-tertiary: #157347;
  --csms-studio-bg-semantic-posi-quaternary: #5fe2a5;
  --csms-studio-bg-semantic-posi-quinary: #caf5e1;
  --csms-studio-bg-semantic-posi-senary: #e4faf0;
  --csms-studio-bg-semantic-posi-30p: rgba(30, 164, 101, 0.3);
  --csms-studio-bg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-posi-50p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-warn-primary: #ffc107;
  --csms-studio-bg-semantic-warn-secondary: #d09c00;
  --csms-studio-bg-semantic-warn-tertiary: #9c7500;
  --csms-studio-bg-semantic-warn-quaternary: #ffda69;
  --csms-studio-bg-semantic-warn-quinary: #fff3cd;
  --csms-studio-bg-semantic-warn-senary: #fff9e6;
  --csms-studio-bg-semantic-prog-primary: #fd7e14;
  --csms-studio-bg-semantic-prog-secondary: #d54d03;
  --csms-studio-bg-semantic-prog-tertiary: #ba4303;
  --csms-studio-bg-semantic-prog-quaternary: #fda271;
  --csms-studio-bg-semantic-prog-quinary: #fee0d0;
  --csms-studio-bg-semantic-prog-senary: #fff0e7;
  --csms-studio-bg-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-semantic-etc-secondary: #58339d;
  --csms-studio-bg-semantic-etc-tertiary: #4d2d89;
  --csms-studio-bg-semantic-etc-quaternary: #a98eda;
  --csms-studio-bg-semantic-etc-quinary: #e2d9f3;
  --csms-studio-bg-semantic-etc-senary: #f1ecf9;
  --csms-studio-fg-hierarchy-primary: #161819;
  --csms-studio-fg-hierarchy-secondary: #2c2f32;
  --csms-studio-fg-hierarchy-tertiary: #575e64;
  --csms-studio-fg-hierarchy-quaternary: #6d767e;
  --csms-studio-fg-hierarchy-quinary: #899199;
  --csms-studio-fg-hierarchy-senary: #c4c8cc;
  --csms-studio-fg-hierarchy-senary-subtle: #e0e3e5;
  --csms-studio-fg-neutral-white: #ffffff;
  --csms-studio-fg-neutral-black: #000000;
  --csms-studio-fg-neutral-white-solid: #ffffff;
  --csms-studio-fg-neutral-black-solid: #000000;
  --csms-studio-fg-neutral-w50p-solid: rgba(255, 255, 255, 0.5);
  --csms-studio-fg-neutral-w80p-solid: rgba(255, 255, 255, 0.8);
  --csms-studio-fg-coursemos-primary: #f04438;
  --csms-studio-fg-coursemos-secondary: #dc1e11;
  --csms-studio-fg-coursemos-tertiary: #c11a0e;
  --csms-studio-fg-coursemos-quaternary: #e35f6d;
  --csms-studio-fg-coursemos-quinary: #f8d7da;
  --csms-studio-fg-coursemos-senary: #fbebed;
  --csms-studio-fg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-fg-coursemos-primary-50p: rgba(0, 117, 248, 0.5);
  --csms-studio-fg-semantic-nega: #f04438;
  --csms-studio-fg-semantic-nega-quinary: #530b06;
  --csms-studio-fg-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-warn-primary: #ffc107;
  --csms-studio-fg-semantic-warn-senary: #ffda69;
  --csms-studio-fg-semantic-posi: #1ea465;
  --csms-studio-fg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-fg-semantic-info: #1181f9;
  --csms-studio-fg-semantic-prog: #fd7e14;
  --csms-studio-fg-semantic-etc: #6f42c1;
  --csms-studio-ut-school-primary: #a5170c;
  --csms-studio-ut-school-secondary: #ea8791;
}

[data-bs-theme=dark] {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-primary {
  color: #e0e3e5;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-secondary {
  color: #c4c8cc;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-tertiary {
  color: #899199;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-quinary {
  color: #575e64;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-senary {
  color: #41474b;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-senary-subtle {
  color: #2c2f32;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-white {
  color: #000000;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-black {
  color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-black-solid {
  color: #000000;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-b20p-disabled {
  color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark] .csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-primary {
  color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-secondary {
  color: #2F90FF;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-tertiary {
  color: #499EFF;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-quaternary {
  color: #004696;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-quinary {
  color: #002F64;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-senary {
  color: #00234B;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 93, 200, 0.4);
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-secondary {
  color: #e35f6d;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-tertiary {
  color: #e6737f;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-quaternary {
  color: #c11a0e;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-quinary {
  color: #8a130a;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-senary {
  color: #530b06;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-primary {
  color: #439cfa;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-secondary {
  color: #58a7fb;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-tertiary {
  color: #6db2fb;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-quaternary {
  color: #044890;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-quinary {
  color: #033973;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-senary {
  color: #022b57;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-secondary {
  color: #29d886;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-tertiary {
  color: #44dd95;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-quaternary {
  color: #157347;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-quinary {
  color: #0f5233;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-senary {
  color: #09311e;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-primary {
  border-color: #1f2124;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-secondary {
  border-color: #2c2f32;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-tertiary {
  border-color: #373b3f;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-quaternary {
  border-color: #41474b;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-quinary {
  border-color: #a7adb2;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-senary {
  border-color: #e0e3e5;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-white {
  border-color: #000000;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-black {
  border-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-b30p {
  border-color: rgba(255, 255, 255, 0.3);
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-secondary {
  border-color: #2F90FF;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-tertiary {
  border-color: #499EFF;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-quaternary {
  border-color: #003A7D;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-quinary {
  border-color: #00234B;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-senary {
  border-color: #001732;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-secondary {
  border-color: #e35f6d;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-tertiary {
  border-color: #e6737f;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-primary {
  border-color: #439cfa;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-secondary {
  border-color: #58a7fb;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-tertiary {
  border-color: #6db2fb;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-quaternary {
  border-color: #044890;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-quinary {
  border-color: #033973;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-senary {
  border-color: #022b57;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-posi-secondary {
  border-color: #29d886;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-posi-tertiary {
  border-color: #44dd95;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-primary {
  background-color: #0b0c0d;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-primary-subtle {
  background-color: #1f2124;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-secondary {
  background-color: #212326;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #232629;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-tertiary {
  background-color: #2c2f32;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-quaternary {
  background-color: #373b3f;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-quinary {
  background-color: #575e64;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-senary-subtle {
  background-color: #899199;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-white {
  background-color: #000000;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-black {
  background-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(255, 255, 255, 0.06);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b10p {
  background-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b15p {
  background-color: rgba(255, 255, 255, 0.15);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b60p {
  background-color: rgba(255, 255, 255, 0.6);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b80p {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w90p {
  background-color: rgba(0, 0, 0, 0.85);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w50p {
  background-color: rgba(0, 0, 0, 0.5);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w30p {
  background-color: rgba(0, 0, 0, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w20p {
  background-color: rgba(0, 0, 0, 0.2);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w5p {
  background-color: rgba(0, 0, 0, 0.05);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w1p {
  background-color: rgba(0, 0, 0, 0.01);
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-secondary {
  background-color: #1582FF;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-tertiary {
  background-color: #2F90FF;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-quaternary {
  background-color: #004696;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-quinary {
  background-color: #002F64;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-quinary-subtle {
  background-color: #001732;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-senary {
  background-color: #00234B;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-secondary {
  background-color: #e35f6d;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-tertiary {
  background-color: #e6737f;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-quaternary {
  background-color: #a5170c;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-quinary {
  background-color: #6e0f08;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-senary {
  background-color: #530b06;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-tertiary {
  background-color: #82bdfc;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-quaternary {
  background-color: #044890;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-quinary {
  background-color: #022b57;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-senary {
  background-color: #011d3a;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-senary-subtle {
  background-color: #010e1d;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-secondary {
  background-color: #29d886;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-tertiary {
  background-color: #44dd95;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-quaternary {
  background-color: #12623d;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-quinary {
  background-color: #0c4229;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-senary {
  background-color: #09311e;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.5);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-secondary {
  background-color: #ffcd37;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-tertiary {
  background-color: #ffda69;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-quaternary {
  background-color: #9c7500;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-quinary {
  background-color: #684e00;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #826200;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-senary {
  background-color: #4e3b00;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-secondary {
  background-color: #fc8342;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-tertiary {
  background-color: #fc935a;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-quaternary {
  background-color: #a03902;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-quinary {
  background-color: #6a2602;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-senary {
  background-color: #501d01;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-secondary {
  background-color: #8c68ce;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-tertiary {
  background-color: #9a7bd4;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-quaternary {
  background-color: #422676;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-quinary {
  background-color: #2c194f;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-senary {
  background-color: #21133b;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-primary {
  background-color: #e0e3e5;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-secondary {
  background-color: #c4c8cc;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-tertiary {
  background-color: #899199;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-quinary {
  background-color: #575e64;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-senary {
  background-color: #2c2f32;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-senary-subtle {
  background-color: #161819;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-white {
  background-color: #000000;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-black {
  background-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}
[data-bs-theme=dark] .csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-secondary {
  background-color: #2F90FF;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-tertiary {
  background-color: #499EFF;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-quaternary {
  background-color: #005DC8;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-quinary {
  background-color: #002F64;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-senary {
  background-color: #00234B;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}
[data-bs-theme=dark] .csms-studio-fg-semantic-nega {
  background-color: #f04438;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-nega-quinary {
  background-color: #8a130a;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark] .csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-warn-senary {
  background-color: #9c7500;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark] .csms-studio-fg-semantic-info {
  background-color: #1181f9;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}
[data-bs-theme=dark] .csms-studio-ut-school-primary {
  background-color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-ut-school-secondary {
  background-color: #005DC8;
}
[data-bs-theme=dark] .csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}
[data-bs-theme=dark] .csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}
[data-bs-theme=dark] .csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}
[data-bs-theme=dark] .csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}
[data-bs-theme=dark] .csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}
[data-bs-theme=dark] .csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}
[data-bs-theme=dark] .csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}
[data-bs-theme=dark] {
  --csms-studio-tx-hierarchy-primary: #e0e3e5;
  --csms-studio-tx-hierarchy-secondary: #c4c8cc;
  --csms-studio-tx-hierarchy-tertiary: #899199;
  --csms-studio-tx-hierarchy-quaternary: #6d767e;
  --csms-studio-tx-hierarchy-quinary: #575e64;
  --csms-studio-tx-hierarchy-senary: #41474b;
  --csms-studio-tx-hierarchy-senary-subtle: #2c2f32;
  --csms-studio-tx-neutral-white: #000000;
  --csms-studio-tx-neutral-black: #ffffff;
  --csms-studio-tx-neutral-black-solid: #000000;
  --csms-studio-tx-neutral-white-solid: #ffffff;
  --csms-studio-tx-neutral-b20p-disabled: rgba(255, 255, 255, 0.2);
  --csms-studio-tx-neutral-w80p-disabled: rgba(255, 255, 255, 0.2);
  --csms-studio-tx-coursemos-primary: #0075F8;
  --csms-studio-tx-coursemos-secondary: #2F90FF;
  --csms-studio-tx-coursemos-tertiary: #499EFF;
  --csms-studio-tx-coursemos-quaternary: #004696;
  --csms-studio-tx-coursemos-quinary: #002F64;
  --csms-studio-tx-coursemos-senary: #00234B;
  --csms-studio-tx-coursemos-primary-30p: rgba(0, 93, 200, 0.4);
  --csms-studio-tx-semantic-nega-primary: #f04438;
  --csms-studio-tx-semantic-nega-secondary: #e35f6d;
  --csms-studio-tx-semantic-nega-tertiary: #e6737f;
  --csms-studio-tx-semantic-nega-quaternary: #c11a0e;
  --csms-studio-tx-semantic-nega-quinary: #8a130a;
  --csms-studio-tx-semantic-nega-senary: #530b06;
  --csms-studio-tx-semantic-info-primary: #439cfa;
  --csms-studio-tx-semantic-info-secondary: #58a7fb;
  --csms-studio-tx-semantic-info-tertiary: #6db2fb;
  --csms-studio-tx-semantic-info-quaternary: #044890;
  --csms-studio-tx-semantic-info-quinary: #033973;
  --csms-studio-tx-semantic-info-senary: #022b57;
  --csms-studio-tx-semantic-posi-primary: #1ea465;
  --csms-studio-tx-semantic-posi-secondary: #29d886;
  --csms-studio-tx-semantic-posi-tertiary: #44dd95;
  --csms-studio-tx-semantic-posi-quaternary: #157347;
  --csms-studio-tx-semantic-posi-quinary: #0f5233;
  --csms-studio-tx-semantic-posi-senary: #09311e;
  --csms-studio-tx-semantic-noti-primary: #ffc107;
  --csms-studio-tx-semantic-prog-primary: #fd7e14;
  --csms-studio-tx-semantic-etc-primary: #6f42c1;
  --csms-studio-bo-hierarchy-primary: #1f2124;
  --csms-studio-bo-hierarchy-secondary: #2c2f32;
  --csms-studio-bo-hierarchy-tertiary: #373b3f;
  --csms-studio-bo-hierarchy-quaternary: #41474b;
  --csms-studio-bo-hierarchy-quaternary-subtle: #6d767e;
  --csms-studio-bo-hierarchy-quinary: #a7adb2;
  --csms-studio-bo-hierarchy-senary: #e0e3e5;
  --csms-studio-bo-neutral-white: #000000;
  --csms-studio-bo-neutral-black: #ffffff;
  --csms-studio-bo-neutral-white-solid: #ffffff;
  --csms-studio-bo-neutral-black-solid: #000000;
  --csms-studio-bo-neutral-b30p: rgba(255, 255, 255, 0.3);
  --csms-studio-bo-coursemos-primary: #0075F8;
  --csms-studio-bo-coursemos-secondary: #2F90FF;
  --csms-studio-bo-coursemos-tertiary: #499EFF;
  --csms-studio-bo-coursemos-quaternary: #003A7D;
  --csms-studio-bo-coursemos-quinary: #00234B;
  --csms-studio-bo-coursemos-senary: #001732;
  --csms-studio-bo-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bo-semantic-nega-primary: #f04438;
  --csms-studio-bo-semantic-nega-secondary: #e35f6d;
  --csms-studio-bo-semantic-nega-tertiary: #e6737f;
  --csms-studio-bo-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bo-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-bo-semantic-info-primary: #439cfa;
  --csms-studio-bo-semantic-info-secondary: #58a7fb;
  --csms-studio-bo-semantic-info-tertiary: #6db2fb;
  --csms-studio-bo-semantic-info-quaternary: #044890;
  --csms-studio-bo-semantic-info-quinary: #033973;
  --csms-studio-bo-semantic-info-senary: #022b57;
  --csms-studio-bo-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bo-semantic-info-40p: rgba(17, 129, 249, 0.4);
  --csms-studio-bo-semantic-posi-primary: #1ea465;
  --csms-studio-bo-semantic-posi-secondary: #29d886;
  --csms-studio-bo-semantic-posi-tertiary: #44dd95;
  --csms-studio-bo-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bo-semantic-warn-primary: #ffc107;
  --csms-studio-bo-semantic-noti-primary: #ffc107;
  --csms-studio-bo-semantic-prog-primary: #fd7e14;
  --csms-studio-bo-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-hierarchy-primary: #0b0c0d;
  --csms-studio-bg-hierarchy-primary-subtle: #1f2124;
  --csms-studio-bg-hierarchy-secondary: #212326;
  --csms-studio-bg-hierarchy-secondary-subtle: #232629;
  --csms-studio-bg-hierarchy-tertiary: #2c2f32;
  --csms-studio-bg-hierarchy-quaternary: #373b3f;
  --csms-studio-bg-hierarchy-quinary: #575e64;
  --csms-studio-bg-hierarchy-senary: #6d767e;
  --csms-studio-bg-hierarchy-senary-subtle: #899199;
  --csms-studio-bg-neutral-white: #000000;
  --csms-studio-bg-neutral-black: #ffffff;
  --csms-studio-bg-neutral-white-solid: #ffffff;
  --csms-studio-bg-neutral-black-solid: #000000;
  --csms-studio-bg-neutral-b6p-hovered: rgba(255, 255, 255, 0.06);
  --csms-studio-bg-neutral-b10p: rgba(255, 255, 255, 0.1);
  --csms-studio-bg-neutral-b15p: rgba(255, 255, 255, 0.15);
  --csms-studio-bg-neutral-b60p: rgba(255, 255, 255, 0.6);
  --csms-studio-bg-neutral-b80p: rgba(255, 255, 255, 0.8);
  --csms-studio-bg-neutral-w90p: rgba(0, 0, 0, 0.85);
  --csms-studio-bg-neutral-w50p: rgba(0, 0, 0, 0.5);
  --csms-studio-bg-neutral-w30p: rgba(0, 0, 0, 0.3);
  --csms-studio-bg-neutral-w20p: rgba(0, 0, 0, 0.2);
  --csms-studio-bg-neutral-w5p: rgba(0, 0, 0, 0.05);
  --csms-studio-bg-neutral-w1p: rgba(0, 0, 0, 0.01);
  --csms-studio-bg-coursemos-primary: #0075F8;
  --csms-studio-bg-coursemos-secondary: #1582FF;
  --csms-studio-bg-coursemos-tertiary: #2F90FF;
  --csms-studio-bg-coursemos-quaternary: #004696;
  --csms-studio-bg-coursemos-quinary: #002F64;
  --csms-studio-bg-coursemos-quinary-subtle: #001732;
  --csms-studio-bg-coursemos-senary: #00234B;
  --csms-studio-bg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bg-semantic-nega-primary: #f04438;
  --csms-studio-bg-semantic-nega-secondary: #e35f6d;
  --csms-studio-bg-semantic-nega-tertiary: #e6737f;
  --csms-studio-bg-semantic-nega-quaternary: #a5170c;
  --csms-studio-bg-semantic-nega-quinary: #6e0f08;
  --csms-studio-bg-semantic-nega-senary: #530b06;
  --csms-studio-bg-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bg-semantic-info-primary: #1181f9;
  --csms-studio-bg-semantic-info-secondary: #6db2fb;
  --csms-studio-bg-semantic-info-tertiary: #82bdfc;
  --csms-studio-bg-semantic-info-quaternary: #044890;
  --csms-studio-bg-semantic-info-quinary: #022b57;
  --csms-studio-bg-semantic-info-senary: #011d3a;
  --csms-studio-bg-semantic-info-senary-subtle: #010e1d;
  --csms-studio-bg-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bg-semantic-posi-primary: #1ea465;
  --csms-studio-bg-semantic-posi-secondary: #29d886;
  --csms-studio-bg-semantic-posi-tertiary: #44dd95;
  --csms-studio-bg-semantic-posi-quaternary: #12623d;
  --csms-studio-bg-semantic-posi-quinary: #0c4229;
  --csms-studio-bg-semantic-posi-senary: #09311e;
  --csms-studio-bg-semantic-posi-30p: rgba(30, 164, 101, 0.3);
  --csms-studio-bg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-posi-50p: rgba(30, 164, 101, 0.5);
  --csms-studio-bg-semantic-warn-primary: #ffc107;
  --csms-studio-bg-semantic-warn-secondary: #ffcd37;
  --csms-studio-bg-semantic-warn-tertiary: #ffda69;
  --csms-studio-bg-semantic-warn-quaternary: #9c7500;
  --csms-studio-bg-semantic-warn-quinary: #684e00;
  --csms-studio-bg-semantic-warn-quinary-subtle: #826200;
  --csms-studio-bg-semantic-warn-senary: #4e3b00;
  --csms-studio-bg-semantic-prog-primary: #fd7e14;
  --csms-studio-bg-semantic-prog-secondary: #fc8342;
  --csms-studio-bg-semantic-prog-tertiary: #fc935a;
  --csms-studio-bg-semantic-prog-quaternary: #a03902;
  --csms-studio-bg-semantic-prog-quinary: #6a2602;
  --csms-studio-bg-semantic-prog-senary: #501d01;
  --csms-studio-bg-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-semantic-etc-secondary: #8c68ce;
  --csms-studio-bg-semantic-etc-tertiary: #9a7bd4;
  --csms-studio-bg-semantic-etc-quaternary: #422676;
  --csms-studio-bg-semantic-etc-quinary: #2c194f;
  --csms-studio-bg-semantic-etc-senary: #21133b;
  --csms-studio-fg-hierarchy-primary: #e0e3e5;
  --csms-studio-fg-hierarchy-secondary: #c4c8cc;
  --csms-studio-fg-hierarchy-tertiary: #899199;
  --csms-studio-fg-hierarchy-quaternary: #6d767e;
  --csms-studio-fg-hierarchy-quinary: #575e64;
  --csms-studio-fg-hierarchy-senary: #2c2f32;
  --csms-studio-fg-hierarchy-senary-subtle: #161819;
  --csms-studio-fg-neutral-white: #000000;
  --csms-studio-fg-neutral-black: #ffffff;
  --csms-studio-fg-neutral-white-solid: #ffffff;
  --csms-studio-fg-neutral-black-solid: #000000;
  --csms-studio-fg-neutral-w50p-solid: rgba(255, 255, 255, 0.5);
  --csms-studio-fg-neutral-w80p-solid: rgba(255, 255, 255, 0.8);
  --csms-studio-fg-coursemos-primary: #0075F8;
  --csms-studio-fg-coursemos-secondary: #2F90FF;
  --csms-studio-fg-coursemos-tertiary: #499EFF;
  --csms-studio-fg-coursemos-quaternary: #005DC8;
  --csms-studio-fg-coursemos-quinary: #002F64;
  --csms-studio-fg-coursemos-senary: #00234B;
  --csms-studio-fg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-fg-coursemos-primary-50p: rgba(0, 117, 248, 0.5);
  --csms-studio-fg-semantic-nega: #f04438;
  --csms-studio-fg-semantic-nega-quinary: #8a130a;
  --csms-studio-fg-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-warn-primary: #ffc107;
  --csms-studio-fg-semantic-warn-senary: #9c7500;
  --csms-studio-fg-semantic-posi: #1ea465;
  --csms-studio-fg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-fg-semantic-info: #1181f9;
  --csms-studio-fg-semantic-prog: #fd7e14;
  --csms-studio-fg-semantic-etc: #6f42c1;
  --csms-studio-ut-school-primary: #0075F8;
  --csms-studio-ut-school-secondary: #005DC8;
}

[data-bs-theme=dark-red] {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  --bs-body-color: #adb5bd;
  --bs-body-color-rgb: 173, 181, 189;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(255, 255, 255, 0.75);
  --bs-secondary-color-rgb: 255, 255, 255;
  --bs-secondary-bg: rgba(255, 255, 255, 0.15);
  --bs-secondary-bg-rgb: 255, 255, 255;
  --bs-tertiary-color: rgba(255, 255, 255, 0.5);
  --bs-tertiary-color-rgb: 255, 255, 255;
  --bs-tertiary-bg: rgba(255, 255, 255, 0.1);
  --bs-tertiary-bg-rgb: 255, 255, 255;
  --bs-heading-color: #fff;
  --bs-link-color: #86b7fe;
  --bs-link-hover-color: #9ec5fe;
  --bs-link-color-rgb: 134, 183, 254;
  --bs-link-hover-color-rgb: 158, 197, 254;
  --bs-code-color: #e685b5;
  --bs-highlight-color: #fff;
  --bs-highlight-bg: #664d03;
  --bs-border-color: rgba(255, 255, 255, 0.2);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-primary {
  color: #e0e3e5;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-secondary {
  color: #c4c8cc;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-tertiary {
  color: #899199;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-quinary {
  color: #575e64;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-senary {
  color: #41474b;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-senary-subtle {
  color: #2c2f32;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-white {
  color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-black {
  color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-black-solid {
  color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-b20p-disabled {
  color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-primary {
  color: #ed9ba4;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-secondary {
  color: #f1afb6;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-tertiary {
  color: #f4c3c8;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-quaternary {
  color: #6e0f08;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-quinary {
  color: #370804;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-senary {
  color: #290603;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-primary-30p {
  color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-secondary {
  color: #e35f6d;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-tertiary {
  color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-quaternary {
  color: #c11a0e;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-quinary {
  color: #8a130a;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-senary {
  color: #530b06;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-primary {
  color: #439cfa;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-secondary {
  color: #58a7fb;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-tertiary {
  color: #6db2fb;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-quaternary {
  color: #044890;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-quinary {
  color: #033973;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-senary {
  color: #022b57;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-secondary {
  color: #29d886;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-tertiary {
  color: #44dd95;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-quaternary {
  color: #157347;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-quinary {
  color: #0f5233;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-senary {
  color: #09311e;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-primary {
  border-color: #1f2124;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-secondary {
  border-color: #2c2f32;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-tertiary {
  border-color: #373b3f;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-quaternary {
  border-color: #41474b;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-quinary {
  border-color: #a7adb2;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-senary {
  border-color: #e0e3e5;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-white {
  border-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-black {
  border-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-b30p {
  border-color: rgba(255, 255, 255, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-primary {
  border-color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-secondary {
  border-color: #ea8791;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-tertiary {
  border-color: #ed9ba4;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-quaternary {
  border-color: #6e0f08;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-quinary {
  border-color: #370804;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-senary {
  border-color: #290603;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-secondary {
  border-color: #e35f6d;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-tertiary {
  border-color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-primary {
  border-color: #439cfa;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-secondary {
  border-color: #58a7fb;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-tertiary {
  border-color: #6db2fb;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-quaternary {
  border-color: #044890;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-quinary {
  border-color: #033973;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-senary {
  border-color: #022b57;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-posi-secondary {
  border-color: #29d886;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-posi-tertiary {
  border-color: #44dd95;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-primary {
  background-color: #0b0c0d;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-primary-subtle {
  background-color: #1f2124;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-secondary {
  background-color: #212326;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #232629;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-tertiary {
  background-color: #2c2f32;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-quaternary {
  background-color: #373b3f;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-quinary {
  background-color: #575e64;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-senary-subtle {
  background-color: #899199;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-white {
  background-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-black {
  background-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(255, 255, 255, 0.06);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b10p {
  background-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b15p {
  background-color: rgba(255, 255, 255, 0.15);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b60p {
  background-color: rgba(255, 255, 255, 0.6);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b80p {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w90p {
  background-color: rgba(0, 0, 0, 0.85);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w50p {
  background-color: rgba(0, 0, 0, 0.5);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w30p {
  background-color: rgba(0, 0, 0, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w20p {
  background-color: rgba(0, 0, 0, 0.2);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w5p {
  background-color: rgba(0, 0, 0, 0.05);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w1p {
  background-color: rgba(0, 0, 0, 0.01);
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-secondary {
  background-color: #1582FF;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-tertiary {
  background-color: #2F90FF;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-quaternary {
  background-color: #004696;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-quinary {
  background-color: #002F64;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-quinary-subtle {
  background-color: #001732;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-senary {
  background-color: #00234B;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-secondary {
  background-color: #e35f6d;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-tertiary {
  background-color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-quaternary {
  background-color: #a5170c;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-quinary {
  background-color: #6e0f08;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-senary {
  background-color: #530b06;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-primary {
  background-color: #2e91fa;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-tertiary {
  background-color: #82bdfc;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-quaternary {
  background-color: #033973;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-quinary {
  background-color: #022b57;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-senary {
  background-color: #011d3a;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-senary-subtle {
  background-color: #010e1d;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-secondary {
  background-color: #29d886;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-tertiary {
  background-color: #44dd95;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-quaternary {
  background-color: #12623d;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-quinary {
  background-color: #0c4229;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-senary {
  background-color: #09311e;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.5);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-secondary {
  background-color: #ffcd37;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-tertiary {
  background-color: #ffda69;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-quaternary {
  background-color: #9c7500;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-quinary {
  background-color: #684e00;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-senary {
  background-color: #4e3b00;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-secondary {
  background-color: #fc8342;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-tertiary {
  background-color: #fc935a;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-quaternary {
  background-color: #a03902;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-quinary {
  background-color: #6a2602;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-senary {
  background-color: #501d01;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-secondary {
  background-color: #8c68ce;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-tertiary {
  background-color: #9a7bd4;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-quaternary {
  background-color: #422676;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-quinary {
  background-color: #2c194f;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-senary {
  background-color: #21133b;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-primary {
  background-color: #e0e3e5;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-secondary {
  background-color: #c4c8cc;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-tertiary {
  background-color: #899199;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-quinary {
  background-color: #575e64;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-senary {
  background-color: #2c2f32;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-senary-subtle {
  background-color: #161819;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-white {
  background-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-black {
  background-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-primary {
  background-color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-secondary {
  background-color: #e35f6d;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-tertiary {
  background-color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-quaternary {
  background-color: #dc1e11;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-quinary {
  background-color: #6e0f08;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-senary {
  background-color: #530b06;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-nega {
  background-color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-nega-quinary {
  background-color: #8a130a;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-warn-senary {
  background-color: #9c7500;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.6);
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-info {
  background-color: #1181f9;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}
[data-bs-theme=dark-red] .csms-studio-ut-school-primary {
  background-color: #a5170c;
}
[data-bs-theme=dark-red] .csms-studio-ut-school-secondary {
  background-color: #a5170c;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}
[data-bs-theme=dark-red] {
  --csms-studio-tx-hierarchy-primary: #e0e3e5;
  --csms-studio-tx-hierarchy-secondary: #c4c8cc;
  --csms-studio-tx-hierarchy-tertiary: #899199;
  --csms-studio-tx-hierarchy-quaternary: #6d767e;
  --csms-studio-tx-hierarchy-quinary: #575e64;
  --csms-studio-tx-hierarchy-senary: #41474b;
  --csms-studio-tx-hierarchy-senary-subtle: #2c2f32;
  --csms-studio-tx-neutral-white: #000000;
  --csms-studio-tx-neutral-black: #ffffff;
  --csms-studio-tx-neutral-black-solid: #000000;
  --csms-studio-tx-neutral-white-solid: #ffffff;
  --csms-studio-tx-neutral-b20p-disabled: rgba(255, 255, 255, 0.2);
  --csms-studio-tx-neutral-w80p-disabled: rgba(255, 255, 255, 0.2);
  --csms-studio-tx-coursemos-primary: #ed9ba4;
  --csms-studio-tx-coursemos-secondary: #f1afb6;
  --csms-studio-tx-coursemos-tertiary: #f4c3c8;
  --csms-studio-tx-coursemos-quaternary: #6e0f08;
  --csms-studio-tx-coursemos-quinary: #370804;
  --csms-studio-tx-coursemos-senary: #290603;
  --csms-studio-tx-coursemos-primary-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-tx-semantic-nega-primary: #f04438;
  --csms-studio-tx-semantic-nega-secondary: #e35f6d;
  --csms-studio-tx-semantic-nega-tertiary: #e6737f;
  --csms-studio-tx-semantic-nega-quaternary: #c11a0e;
  --csms-studio-tx-semantic-nega-quinary: #8a130a;
  --csms-studio-tx-semantic-nega-senary: #530b06;
  --csms-studio-tx-semantic-info-primary: #439cfa;
  --csms-studio-tx-semantic-info-secondary: #58a7fb;
  --csms-studio-tx-semantic-info-tertiary: #6db2fb;
  --csms-studio-tx-semantic-info-quaternary: #044890;
  --csms-studio-tx-semantic-info-quinary: #033973;
  --csms-studio-tx-semantic-info-senary: #022b57;
  --csms-studio-tx-semantic-posi-primary: #1ea465;
  --csms-studio-tx-semantic-posi-secondary: #29d886;
  --csms-studio-tx-semantic-posi-tertiary: #44dd95;
  --csms-studio-tx-semantic-posi-quaternary: #157347;
  --csms-studio-tx-semantic-posi-quinary: #0f5233;
  --csms-studio-tx-semantic-posi-senary: #09311e;
  --csms-studio-tx-semantic-noti-primary: #ffc107;
  --csms-studio-tx-semantic-prog-primary: #fd7e14;
  --csms-studio-tx-semantic-etc-primary: #6f42c1;
  --csms-studio-bo-hierarchy-primary: #1f2124;
  --csms-studio-bo-hierarchy-secondary: #2c2f32;
  --csms-studio-bo-hierarchy-tertiary: #373b3f;
  --csms-studio-bo-hierarchy-quaternary: #41474b;
  --csms-studio-bo-hierarchy-quaternary-subtle: #6d767e;
  --csms-studio-bo-hierarchy-quinary: #a7adb2;
  --csms-studio-bo-hierarchy-senary: #e0e3e5;
  --csms-studio-bo-neutral-white: #000000;
  --csms-studio-bo-neutral-black: #ffffff;
  --csms-studio-bo-neutral-white-solid: #ffffff;
  --csms-studio-bo-neutral-black-solid: #000000;
  --csms-studio-bo-neutral-b30p: rgba(255, 255, 255, 0.3);
  --csms-studio-bo-coursemos-primary: #e6737f;
  --csms-studio-bo-coursemos-secondary: #ea8791;
  --csms-studio-bo-coursemos-tertiary: #ed9ba4;
  --csms-studio-bo-coursemos-quaternary: #6e0f08;
  --csms-studio-bo-coursemos-quinary: #370804;
  --csms-studio-bo-coursemos-senary: #290603;
  --csms-studio-bo-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bo-semantic-nega-primary: #f04438;
  --csms-studio-bo-semantic-nega-secondary: #e35f6d;
  --csms-studio-bo-semantic-nega-tertiary: #e6737f;
  --csms-studio-bo-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bo-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-bo-semantic-info-primary: #439cfa;
  --csms-studio-bo-semantic-info-secondary: #58a7fb;
  --csms-studio-bo-semantic-info-tertiary: #6db2fb;
  --csms-studio-bo-semantic-info-quaternary: #044890;
  --csms-studio-bo-semantic-info-quinary: #033973;
  --csms-studio-bo-semantic-info-senary: #022b57;
  --csms-studio-bo-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bo-semantic-info-40p: rgba(17, 129, 249, 0.4);
  --csms-studio-bo-semantic-posi-primary: #1ea465;
  --csms-studio-bo-semantic-posi-secondary: #29d886;
  --csms-studio-bo-semantic-posi-tertiary: #44dd95;
  --csms-studio-bo-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bo-semantic-warn-primary: #ffc107;
  --csms-studio-bo-semantic-noti-primary: #ffc107;
  --csms-studio-bo-semantic-prog-primary: #fd7e14;
  --csms-studio-bo-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-hierarchy-primary: #0b0c0d;
  --csms-studio-bg-hierarchy-primary-subtle: #1f2124;
  --csms-studio-bg-hierarchy-secondary: #212326;
  --csms-studio-bg-hierarchy-secondary-subtle: #232629;
  --csms-studio-bg-hierarchy-tertiary: #2c2f32;
  --csms-studio-bg-hierarchy-quaternary: #373b3f;
  --csms-studio-bg-hierarchy-quinary: #575e64;
  --csms-studio-bg-hierarchy-senary: #6d767e;
  --csms-studio-bg-hierarchy-senary-subtle: #899199;
  --csms-studio-bg-neutral-white: #000000;
  --csms-studio-bg-neutral-black: #ffffff;
  --csms-studio-bg-neutral-white-solid: #ffffff;
  --csms-studio-bg-neutral-black-solid: #000000;
  --csms-studio-bg-neutral-b6p-hovered: rgba(255, 255, 255, 0.06);
  --csms-studio-bg-neutral-b10p: rgba(255, 255, 255, 0.1);
  --csms-studio-bg-neutral-b15p: rgba(255, 255, 255, 0.15);
  --csms-studio-bg-neutral-b60p: rgba(255, 255, 255, 0.6);
  --csms-studio-bg-neutral-b80p: rgba(255, 255, 255, 0.8);
  --csms-studio-bg-neutral-w90p: rgba(0, 0, 0, 0.85);
  --csms-studio-bg-neutral-w50p: rgba(0, 0, 0, 0.5);
  --csms-studio-bg-neutral-w30p: rgba(0, 0, 0, 0.3);
  --csms-studio-bg-neutral-w20p: rgba(0, 0, 0, 0.2);
  --csms-studio-bg-neutral-w5p: rgba(0, 0, 0, 0.05);
  --csms-studio-bg-neutral-w1p: rgba(0, 0, 0, 0.01);
  --csms-studio-bg-coursemos-primary: #0075F8;
  --csms-studio-bg-coursemos-secondary: #1582FF;
  --csms-studio-bg-coursemos-tertiary: #2F90FF;
  --csms-studio-bg-coursemos-quaternary: #004696;
  --csms-studio-bg-coursemos-quinary: #002F64;
  --csms-studio-bg-coursemos-quinary-subtle: #001732;
  --csms-studio-bg-coursemos-senary: #00234B;
  --csms-studio-bg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bg-semantic-nega-primary: #f04438;
  --csms-studio-bg-semantic-nega-secondary: #e35f6d;
  --csms-studio-bg-semantic-nega-tertiary: #e6737f;
  --csms-studio-bg-semantic-nega-quaternary: #a5170c;
  --csms-studio-bg-semantic-nega-quinary: #6e0f08;
  --csms-studio-bg-semantic-nega-senary: #530b06;
  --csms-studio-bg-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bg-semantic-info-primary: #2e91fa;
  --csms-studio-bg-semantic-info-secondary: #6db2fb;
  --csms-studio-bg-semantic-info-tertiary: #82bdfc;
  --csms-studio-bg-semantic-info-quaternary: #033973;
  --csms-studio-bg-semantic-info-quinary: #022b57;
  --csms-studio-bg-semantic-info-senary: #011d3a;
  --csms-studio-bg-semantic-info-senary-subtle: #010e1d;
  --csms-studio-bg-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bg-semantic-posi-primary: #1ea465;
  --csms-studio-bg-semantic-posi-secondary: #29d886;
  --csms-studio-bg-semantic-posi-tertiary: #44dd95;
  --csms-studio-bg-semantic-posi-quaternary: #12623d;
  --csms-studio-bg-semantic-posi-quinary: #0c4229;
  --csms-studio-bg-semantic-posi-senary: #09311e;
  --csms-studio-bg-semantic-posi-30p: rgba(30, 164, 101, 0.3);
  --csms-studio-bg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-posi-50p: rgba(30, 164, 101, 0.5);
  --csms-studio-bg-semantic-warn-primary: #ffc107;
  --csms-studio-bg-semantic-warn-secondary: #ffcd37;
  --csms-studio-bg-semantic-warn-tertiary: #ffda69;
  --csms-studio-bg-semantic-warn-quaternary: #9c7500;
  --csms-studio-bg-semantic-warn-quinary: #684e00;
  --csms-studio-bg-semantic-warn-senary: #4e3b00;
  --csms-studio-bg-semantic-prog-primary: #fd7e14;
  --csms-studio-bg-semantic-prog-secondary: #fc8342;
  --csms-studio-bg-semantic-prog-tertiary: #fc935a;
  --csms-studio-bg-semantic-prog-quaternary: #a03902;
  --csms-studio-bg-semantic-prog-quinary: #6a2602;
  --csms-studio-bg-semantic-prog-senary: #501d01;
  --csms-studio-bg-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-semantic-etc-secondary: #8c68ce;
  --csms-studio-bg-semantic-etc-tertiary: #9a7bd4;
  --csms-studio-bg-semantic-etc-quaternary: #422676;
  --csms-studio-bg-semantic-etc-quinary: #2c194f;
  --csms-studio-bg-semantic-etc-senary: #21133b;
  --csms-studio-fg-hierarchy-primary: #e0e3e5;
  --csms-studio-fg-hierarchy-secondary: #c4c8cc;
  --csms-studio-fg-hierarchy-tertiary: #899199;
  --csms-studio-fg-hierarchy-quaternary: #6d767e;
  --csms-studio-fg-hierarchy-quinary: #575e64;
  --csms-studio-fg-hierarchy-senary: #2c2f32;
  --csms-studio-fg-hierarchy-senary-subtle: #161819;
  --csms-studio-fg-neutral-white: #000000;
  --csms-studio-fg-neutral-black: #ffffff;
  --csms-studio-fg-neutral-white-solid: #ffffff;
  --csms-studio-fg-neutral-black-solid: #000000;
  --csms-studio-fg-neutral-w50p-solid: rgba(255, 255, 255, 0.5);
  --csms-studio-fg-neutral-w80p-solid: rgba(255, 255, 255, 0.8);
  --csms-studio-fg-coursemos-primary: #f04438;
  --csms-studio-fg-coursemos-secondary: #e35f6d;
  --csms-studio-fg-coursemos-tertiary: #e6737f;
  --csms-studio-fg-coursemos-quaternary: #dc1e11;
  --csms-studio-fg-coursemos-quinary: #6e0f08;
  --csms-studio-fg-coursemos-senary: #530b06;
  --csms-studio-fg-coursemos-primary-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-fg-coursemos-primary-50p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-nega: #f04438;
  --csms-studio-fg-semantic-nega-quinary: #8a130a;
  --csms-studio-fg-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-warn-primary: #ffc107;
  --csms-studio-fg-semantic-warn-senary: #9c7500;
  --csms-studio-fg-semantic-posi: #1ea465;
  --csms-studio-fg-semantic-posi-40p: rgba(30, 164, 101, 0.6);
  --csms-studio-fg-semantic-info: #1181f9;
  --csms-studio-fg-semantic-prog: #fd7e14;
  --csms-studio-fg-semantic-etc: #6f42c1;
  --csms-studio-ut-school-primary: #a5170c;
  --csms-studio-ut-school-secondary: #a5170c;
}

/**
 * 작업시 유의 사항
 * Figma에서 2xlg 같이 이름을 지정한 경우 xxlg로 치환을 시켜서 사용해야 합니다.
 * 이유는 class 이름 규칙에 숫자로 시작되면 안되도록 되어 있습니다.
 */
.btn-noborder {
  border: 0;
  background: transparent;
}

.row .col-form-check,
.row .col-form-label {
  text-align: right;
  font-weight: 700;
}
@media (max-width: 575.98px) {
  .row .col-form-check,
  .row .col-form-label {
    text-align: left;
  }
}

.row-csms {
  margin-bottom: 8px;
}
.row-csms:last-child {
  margin-bottom: 0;
}
.row-csms .col-form-label {
  text-align: left;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quaternary);
}

.form-switch.form-switch-right {
  padding-left: 0;
}
.form-switch.form-switch-right .form-check-input {
  margin-left: 0;
  float: right;
}
.form-switch.form-switch-right .form-check-label {
  margin-right: 0.5em;
}

.badge.badge-sm {
  padding: 0.35em 0.45em;
}

.text-bg-default {
  background-color: transparent;
  color: var(--bs-body-color);
}

.cursor-move {
  cursor: move;
}

.bd-mode-toggle {
  z-index: 9999;
}
.bd-mode-toggle .btn-bd-primary {
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #6528e0;
  --bs-btn-hover-border-color: #6528e0;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #5a23c8;
  --bs-btn-active-border-color: #5a23c8;
}
.bd-mode-toggle .btn-bd-primary .bi {
  vertical-align: -0.125em;
  fill: currentColor;
}

/*
.form-check {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: inherit;
    margin-bottom: 0;
    padding-left: 24px;

    .form-check-input {
        width: 24px;
        height: 24px;
        margin-top: 0;
        vertical-align: middle;
    }

    .form-check-label {
        font-weight: $font-weight-medium;
        font-size: 14px;
        line-height: 150%;
    }
}
*/
.visibility-hidden {
  visibility: hidden;
}

/*
 moodle variables
 */
/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

:root,
[data-bs-theme=light] {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-transparent: transparent;
  --csms-studio-tx-hierarchy-primary: #161819;
  --csms-studio-tx-hierarchy-secondary: #2c2f32;
  --csms-studio-tx-hierarchy-tertiary: #575e64;
  --csms-studio-tx-hierarchy-quaternary: #6d767e;
  --csms-studio-tx-hierarchy-quinary: #899199;
  --csms-studio-tx-hierarchy-senary: #c4c8cc;
  --csms-studio-tx-hierarchy-senary-subtle: #e0e3e5;
  --csms-studio-tx-neutral-white: #ffffff;
  --csms-studio-tx-neutral-black: #000000;
  --csms-studio-tx-neutral-black-solid: #000000;
  --csms-studio-tx-neutral-white-solid: #ffffff;
  --csms-studio-tx-neutral-b20p-disabled: rgba(0, 0, 0, 0.2);
  --csms-studio-tx-neutral-w80p-disabled: rgba(255, 255, 255, 0.8);
  --csms-studio-tx-coursemos-primary: #0075F8;
  --csms-studio-tx-coursemos-secondary: #005DC8;
  --csms-studio-tx-coursemos-tertiary: #0052AF;
  --csms-studio-tx-coursemos-quaternary: #97C8FF;
  --csms-studio-tx-coursemos-quinary: #CBE3FF;
  --csms-studio-tx-coursemos-quinary-subtle: #D9EAFF;
  --csms-studio-tx-coursemos-senary: #E5F1FF;
  --csms-studio-tx-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-tx-semantic-nega-primary: #f04438;
  --csms-studio-tx-semantic-nega-secondary: #dc1e11;
  --csms-studio-tx-semantic-nega-tertiary: #c11a0e;
  --csms-studio-tx-semantic-nega-quaternary: #8a130a;
  --csms-studio-tx-semantic-nega-quinary: #530b06;
  --csms-studio-tx-semantic-nega-senary: #fbebed;
  --csms-studio-tx-semantic-info-primary: #1181f9;
  --csms-studio-tx-semantic-info-secondary: #0673e7;
  --csms-studio-tx-semantic-info-tertiary: #0564ca;
  --csms-studio-tx-semantic-info-quaternary: #c0defd;
  --csms-studio-tx-semantic-info-quinary: #d5e9fe;
  --csms-studio-tx-semantic-info-senary: #e0eefe;
  --csms-studio-tx-semantic-posi-primary: #1ea465;
  --csms-studio-tx-semantic-posi-secondary: #188351;
  --csms-studio-tx-semantic-posi-tertiary: #157347;
  --csms-studio-tx-semantic-posi-quaternary: #0f5233;
  --csms-studio-tx-semantic-posi-quinary: #09311e;
  --csms-studio-tx-semantic-posi-senary: #e4faf0;
  --csms-studio-tx-semantic-noti-primary: #ffc107;
  --csms-studio-tx-semantic-prog-primary: #fd7e14;
  --csms-studio-tx-semantic-etc-primary: #6f42c1;
  --csms-studio-bo-hierarchy-primary: #eeeff0;
  --csms-studio-bo-hierarchy-secondary: #e0e3e5;
  --csms-studio-bo-hierarchy-tertiary: #d3d6d9;
  --csms-studio-bo-hierarchy-quaternary: #c4c8cc;
  --csms-studio-bo-hierarchy-quaternary-subtle: #6d767e;
  --csms-studio-bo-hierarchy-quinary: #41474b;
  --csms-studio-bo-hierarchy-senary: #161819;
  --csms-studio-bo-neutral-white: #ffffff;
  --csms-studio-bo-neutral-black: #000000;
  --csms-studio-bo-neutral-white-solid: #ffffff;
  --csms-studio-bo-neutral-black-solid: #000000;
  --csms-studio-bo-neutral-b30p: rgba(0, 0, 0, 0.3);
  --csms-studio-bo-coursemos-primary: #0075F8;
  --csms-studio-bo-coursemos-secondary: #005DC8;
  --csms-studio-bo-coursemos-tertiary: #0052AF;
  --csms-studio-bo-coursemos-quaternary: #97C8FF;
  --csms-studio-bo-coursemos-quinary: #CBE3FF;
  --csms-studio-bo-coursemos-senary: #E5F1FF;
  --csms-studio-bo-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bo-semantic-nega-primary: #f04438;
  --csms-studio-bo-semantic-nega-secondary: #dc1e11;
  --csms-studio-bo-semantic-nega-tertiary: #c11a0e;
  --csms-studio-bo-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bo-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-bo-semantic-info-primary: #1181f9;
  --csms-studio-bo-semantic-info-secondary: #0673e7;
  --csms-studio-bo-semantic-info-tertiary: #0564ca;
  --csms-studio-bo-semantic-info-quaternary: #c0defd;
  --csms-studio-bo-semantic-info-quinary: #d5e9fe;
  --csms-studio-bo-semantic-info-senary: #e0eefe;
  --csms-studio-bo-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bo-semantic-info-40p: rgba(17, 129, 249, 0.4);
  --csms-studio-bo-semantic-posi-primary: #1ea465;
  --csms-studio-bo-semantic-posi-secondary: #188351;
  --csms-studio-bo-semantic-posi-tertiary: #157347;
  --csms-studio-bo-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bo-semantic-warn-primary: #ffc107;
  --csms-studio-bo-semantic-noti-primary: #ffc107;
  --csms-studio-bo-semantic-prog-primary: #fd7e14;
  --csms-studio-bo-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-hierarchy-primary: #fcfcfc;
  --csms-studio-bg-hierarchy-primary-subtle: #f5f5f5;
  --csms-studio-bg-hierarchy-secondary: #f0f1f2;
  --csms-studio-bg-hierarchy-secondary-subtle: #eeeff0;
  --csms-studio-bg-hierarchy-tertiary: #e0e3e5;
  --csms-studio-bg-hierarchy-quaternary: #d3d6d9;
  --csms-studio-bg-hierarchy-quinary: #899199;
  --csms-studio-bg-hierarchy-senary: #6d767e;
  --csms-studio-bg-hierarchy-senary-subtle: #575e64;
  --csms-studio-bg-neutral-white: #ffffff;
  --csms-studio-bg-neutral-black: #000000;
  --csms-studio-bg-neutral-white-solid: #ffffff;
  --csms-studio-bg-neutral-black-solid: #000000;
  --csms-studio-bg-neutral-b6p-hovered: rgba(0, 0, 0, 0.06);
  --csms-studio-bg-neutral-b10p: rgba(0, 0, 0, 0.1);
  --csms-studio-bg-neutral-b15p: rgba(0, 0, 0, 0.15);
  --csms-studio-bg-neutral-b60p: rgba(0, 0, 0, 0.6);
  --csms-studio-bg-neutral-b80p: rgba(0, 0, 0, 0.8);
  --csms-studio-bg-neutral-w90p: rgba(255, 255, 255, 0.9);
  --csms-studio-bg-neutral-w50p: rgba(255, 255, 255, 0.5);
  --csms-studio-bg-neutral-w30p: rgba(255, 255, 255, 0.3);
  --csms-studio-bg-neutral-w20p: rgba(255, 255, 255, 0.2);
  --csms-studio-bg-neutral-w5p: rgba(255, 255, 255, 0.05);
  --csms-studio-bg-neutral-w1p: rgba(255, 255, 255, 0.01);
  --csms-studio-bg-coursemos-primary: #0075F8;
  --csms-studio-bg-coursemos-secondary: #0069E1;
  --csms-studio-bg-coursemos-tertiary: #005DC8;
  --csms-studio-bg-coursemos-quaternary: #97C8FF;
  --csms-studio-bg-coursemos-quinary: #CBE3FF;
  --csms-studio-bg-coursemos-quinary-subtle: #D9EAFF;
  --csms-studio-bg-coursemos-senary: #E5F1FF;
  --csms-studio-bg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bg-semantic-nega-primary: #f04438;
  --csms-studio-bg-semantic-nega-secondary: #dc1e11;
  --csms-studio-bg-semantic-nega-tertiary: #c11a0e;
  --csms-studio-bg-semantic-nega-quaternary: #ea8791;
  --csms-studio-bg-semantic-nega-quinary: #f8d7da;
  --csms-studio-bg-semantic-nega-senary: #fbebed;
  --csms-studio-bg-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bg-semantic-info-primary: #1181f9;
  --csms-studio-bg-semantic-info-secondary: #0564ca;
  --csms-studio-bg-semantic-info-tertiary: #0456ad;
  --csms-studio-bg-semantic-info-quaternary: #c0defd;
  --csms-studio-bg-semantic-info-quinary: #d5e9fe;
  --csms-studio-bg-semantic-info-senary: #e0eefe;
  --csms-studio-bg-semantic-info-senary-subtle: #eaf4fe;
  --csms-studio-bg-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bg-semantic-posi-primary: #1ea465;
  --csms-studio-bg-semantic-posi-secondary: #188351;
  --csms-studio-bg-semantic-posi-tertiary: #157347;
  --csms-studio-bg-semantic-posi-quaternary: #5fe2a5;
  --csms-studio-bg-semantic-posi-quinary: #caf5e1;
  --csms-studio-bg-semantic-posi-senary: #e4faf0;
  --csms-studio-bg-semantic-posi-30p: rgba(30, 164, 101, 0.3);
  --csms-studio-bg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-posi-50p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-warn-primary: #ffc107;
  --csms-studio-bg-semantic-warn-secondary: #d09c00;
  --csms-studio-bg-semantic-warn-tertiary: #9c7500;
  --csms-studio-bg-semantic-warn-quaternary: #ffda69;
  --csms-studio-bg-semantic-warn-quinary: #fff3cd;
  --csms-studio-bg-semantic-warn-quinary-subtle: #ffecb4;
  --csms-studio-bg-semantic-warn-senary: #fff9e6;
  --csms-studio-bg-semantic-prog-primary: #fd7e14;
  --csms-studio-bg-semantic-prog-secondary: #d54d03;
  --csms-studio-bg-semantic-prog-tertiary: #ba4303;
  --csms-studio-bg-semantic-prog-quaternary: #fda271;
  --csms-studio-bg-semantic-prog-quinary: #fee0d0;
  --csms-studio-bg-semantic-prog-senary: #fff0e7;
  --csms-studio-bg-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-semantic-etc-secondary: #58339d;
  --csms-studio-bg-semantic-etc-tertiary: #4d2d89;
  --csms-studio-bg-semantic-etc-quaternary: #a98eda;
  --csms-studio-bg-semantic-etc-quinary: #e2d9f3;
  --csms-studio-bg-semantic-etc-senary: #f1ecf9;
  --csms-studio-fg-hierarchy-primary: #161819;
  --csms-studio-fg-hierarchy-secondary: #2c2f32;
  --csms-studio-fg-hierarchy-tertiary: #575e64;
  --csms-studio-fg-hierarchy-quaternary: #6d767e;
  --csms-studio-fg-hierarchy-quinary: #899199;
  --csms-studio-fg-hierarchy-senary: #c4c8cc;
  --csms-studio-fg-hierarchy-senary-subtle: #e0e3e5;
  --csms-studio-fg-neutral-white: #ffffff;
  --csms-studio-fg-neutral-black: #000000;
  --csms-studio-fg-neutral-white-solid: #ffffff;
  --csms-studio-fg-neutral-black-solid: #000000;
  --csms-studio-fg-neutral-w50p-solid: rgba(255, 255, 255, 0.5);
  --csms-studio-fg-neutral-w80p-solid: rgba(255, 255, 255, 0.8);
  --csms-studio-fg-coursemos-primary: #0075F8;
  --csms-studio-fg-coursemos-secondary: #005DC8;
  --csms-studio-fg-coursemos-tertiary: #0052AF;
  --csms-studio-fg-coursemos-quaternary: #2F90FF;
  --csms-studio-fg-coursemos-quinary: #CBE3FF;
  --csms-studio-fg-coursemos-senary: #E5F1FF;
  --csms-studio-fg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-fg-coursemos-primary-50p: rgba(0, 117, 248, 0.5);
  --csms-studio-fg-semantic-nega: #f04438;
  --csms-studio-fg-semantic-nega-quinary: #530b06;
  --csms-studio-fg-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-warn-primary: #ffc107;
  --csms-studio-fg-semantic-warn-senary: #ffda69;
  --csms-studio-fg-semantic-posi: #1ea465;
  --csms-studio-fg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-fg-semantic-info: #1181f9;
  --csms-studio-fg-semantic-prog: #fd7e14;
  --csms-studio-fg-semantic-etc: #6f42c1;
  --csms-studio-ut-school-primary: #0075F8;
  --csms-studio-ut-school-secondary: #2F90FF;
  --csms-studio-ut-graph-gray-primary: #a7adb2;
  --csms-studio-ut-graph-gray-secondary: #eeeff0;
  --csms-studio-ut-graph-blue-primary: #0673e7;
  --csms-studio-ut-graph-blue-secondary: #6db2fb;
  --csms-studio-ut-graph-blue-tertiary: #7DBAFF;
  --csms-studio-ut-graph-blue-quaternary: #CBE3FF;
  --csms-studio-ut-graph-blue-quinary: #D9EAFF;
  --csms-studio-ut-graph-green-primary: #57ae00;
  --csms-studio-ut-graph-green-secondary: #cbea00;
  --csms-studio-ut-graph-green-quaternary: #d7f0ac;
  --csms-studio-ut-graph-violet-primary: #7d55c8;
  --csms-studio-ut-graph-yellow-secondary: #ffe082;
  --csms-studio-border-radius-4: 4px;
  --csms-studio-border-radius-6: 6px;
  --csms-studio-border-radius-8: 8px;
  --csms-studio-border-radius-10: 10px;
  --csms-studio-border-radius-12: 12px;
  --csms-studio-border-radius-16: 16px;
  --csms-studio-border-radius-32: 32px;
  --csms-studio-border-radius-full: 999px;
  --csms-studio-space-2: 2px;
  --csms-studio-space-4: 4px;
  --csms-studio-space-6: 6px;
  --csms-studio-space-8: 8px;
  --csms-studio-space-10: 10px;
  --csms-studio-space-12: 12px;
  --csms-studio-space-16: 16px;
  --csms-studio-space-18: 18px;
  --csms-studio-space-20: 20px;
  --csms-studio-space-24: 24px;
  --csms-studio-space-28: 28px;
  --csms-studio-space-32: 32px;
  --csms-studio-space-40: 40px;
  --csms-studio-space-80: 80px;
  --csms-studio-gap-2: 2px;
  --csms-studio-gap-4: 4px;
  --csms-studio-gap-6: 6px;
  --csms-studio-gap-8: 8px;
  --csms-studio-gap-10: 10px;
  --csms-studio-gap-12: 12px;
  --csms-studio-gap-16: 16px;
  --csms-studio-gap-18: 18px;
  --csms-studio-gap-20: 20px;
  --csms-studio-gap-24: 24px;
  --csms-studio-gap-28: 28px;
  --csms-studio-gap-32: 32px;
  --csms-studio-gap-40: 40px;
  --csms-studio-gap-80: 80px;
}

.csms-studio-box-shadow-xsm {
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.csms-studio-box-shadow-sm {
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.csms-studio-box-shadow-md {
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}

.csms-studio-box-shadow-lg {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.csms-studio-box-shadow-xl {
  box-shadow: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-2xl {
  box-shadow: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-3xl {
  box-shadow: 0 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
}

/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

.csms-studio-heading-2xlg {
  --csms-studio-heading-font-weight: 700;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-xlg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 40px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 56px;
  margin-bottom: 0;
}

.csms-studio-heading-lg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 32px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 45px;
  margin-bottom: 0;
}

.csms-studio-heading-md {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 28px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-sm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm-semibold {
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-label-xlg-bold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-semibold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-medium {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-normal {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-bold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-semibold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-medium {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-normal {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-bold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-semibold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-medium {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-normal {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-bold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-semibold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-medium {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-normal {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-bold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-semibold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-medium {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-normal {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-bold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-semibold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-medium {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-normal {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-caption-lg {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-md {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-sm {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 10px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 12px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  padding: 20px;
  border-radius: var(--csms-studio-border-radius-8);
}
.csms-studio-search-container .search-title {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csms-studio-search-container .search-box {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.csms-studio-search-container .search-box .search-box-select-input {
  display: flex;
  align-items: center;
  gap: 4px;
}

.csms-studio-flex-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.csms-studio-flex-box.csms-studio-flex-box-sm {
  gap: 4px;
}

.csms-studio-user-picture {
  display: flex;
  align-items: center;
  gap: 8px;
}
.csms-studio-user-picture img {
  border-radius: 50%;
}
.csms-studio-user-picture.csms-studio-user-picture-sm {
  gap: 4px;
}

.csms-studio-bar, .csms-studio-box .csms-studio-box-header .button-container .bar {
  --csms-studio-bar-height: 32px;
  width: 1px;
  height: var(--csms-studio-bar-height);
  background-color: var(--csms-studio-bo-hierarchy-secondary);
}

.csms-studio-bar-10 {
  --csms-studio-bar-height: 10px;
}

.csms-studio-bar-32 {
  --csms-studio-bar-height: 32px;
}

.csms-studio-horizontal-bar {
  width: 100%;
  height: 1px;
  background-color: var(--csms-studio-bo-hierarchy-secondary);
}

.card {
  --bs-card-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --bs-card-color: var(--csms-studio-tx-hierarchy-secondary);
}

.card-csms {
  --bs-card-spacer-y: 16px;
  --bs-card-spacer-x: 16px;
  --bs-card-border-radius: 16px;
  --bs-card-inner-border-radius: 16px 16px 0 0;
  /*
  .card-body {
      padding: 16px;
  }
  */
}
.card-csms .card-body {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-title-xlg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
}

.csms-studio-title-lg {
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
}

.csms-studio-title-md {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
  margin: 0;
}

.csms-studio-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
}
.csms-studio-box.csms-studio-box-gap-none {
  gap: 0;
}
.csms-studio-box .csms-studio-box-header {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 36px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
  margin: 0;
}
.csms-studio-box .csms-studio-box-header .csms-studio-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
  margin: 0;
  margin-bottom: 0;
}
.csms-studio-box .csms-studio-box-header .totalcount {
  display: flex;
  align-items: center;
  gap: 2px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-box .csms-studio-box-header .totalcount span {
  color: var(--csms-studio-tx-coursemos-primary);
}
.csms-studio-box .csms-studio-box-header .button-container {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.csms-studio-box .csms-studio-box-header .button-container .button-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.csms-studio-box .csms-studio-box-content {
  width: 100%;
}

.csms-studio-box-lg .csms-studio-box-header {
  gap: 4px;
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
}
.csms-studio-box-lg .csms-studio-box-header .btn-csms-studio-icon {
  flex-shrink: 0;
}
.csms-studio-box-lg .csms-studio-box-header .csms-studio-title {
  display: flex;
  align-items: center;
  gap: 4px;
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
  margin-bottom: 0;
}
.csms-studio-box-lg .csms-studio-box-header .csms-studio-title span {
  color: var(--csms-studio-tx-coursemos-primary);
}

.csms-studio-box-xlg .csms-studio-box-header {
  gap: 8px;
  padding-left: 8px;
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
}
.csms-studio-box-xlg .csms-studio-box-header .title-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
.csms-studio-box-xlg .csms-studio-box-header .title-badge .csms-studio-title {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
  margin-bottom: 0;
}
.csms-studio-box-xlg .csms-studio-box-header .title-badge .badge {
  flex-shrink: 0;
  display: flex;
  padding: 2px 8px;
  justify-content: center;
  align-items: center;
  border-radius: var(--csms-studio-border-radius-6);
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-bg-neutral-white);
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-semantic-info-primary);
}
.csms-studio-box-xlg .csms-studio-box-header .date {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}

.csms-studio-container {
  --csms-studio-container-gap: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--csms-studio-container-gap);
}
.csms-studio-container > * {
  width: 100%;
}

.csms-studio-container-lg {
  --csms-studio-container-gap: 40px;
}

.csms-studio-container-xlg {
  --csms-studio-container-gap: 56px;
}

.btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn.focus, .btn:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn.focus.hover, .btn:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn:disabled, .btn.disabled {
  opacity: 0.4;
}
.btn.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}

.btn-primary,
.btn-csms-studio-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-primary.hover,
.btn-csms-studio-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-primary.focus, .btn-primary:focus,
.btn-csms-studio-primary.focus,
.btn-csms-studio-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-primary.focus.hover, .btn-primary:focus:hover,
.btn-csms-studio-primary.focus.hover,
.btn-csms-studio-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-primary:disabled, .btn-primary.disabled,
.btn-csms-studio-primary:disabled,
.btn-csms-studio-primary.disabled {
  opacity: 0.4;
}
.btn-primary.btn-csms-studio-svg,
.btn-csms-studio-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-primary.btn-csms-studio-svg-right,
.btn-csms-studio-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-primary svg,
.btn-csms-studio-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-primary svg .svg-color[stroke],
.btn-csms-studio-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-primary svg .svg-color[fill],
.btn-csms-studio-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-primary,
.btn-csms-studio-primary {
  --bs-btn-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-bg: var(--csms-studio-bg-coursemos-primary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-hover-bg: var(--csms-studio-bg-coursemos-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-active-bg: var(--csms-studio-bg-coursemos-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-disabled-bg: var(--csms-studio-bg-coursemos-primary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-coursemos-primary);
}
.btn-primary svg .svg-color[stroke],
.btn-csms-studio-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-neutral-white-solid);
}
.btn-primary svg .svg-color[fill],
.btn-csms-studio-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-neutral-white-solid);
}
.btn-primary.focus, .btn-primary:focus,
.btn-csms-studio-primary.focus,
.btn-csms-studio-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-secondary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-secondary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-secondary.focus, .btn-csms-studio-secondary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-secondary.focus.hover, .btn-csms-studio-secondary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-secondary:disabled, .btn-csms-studio-secondary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-secondary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-secondary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-secondary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-secondary {
  --bs-btn-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-coursemos-quinary-subtle);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-coursemos-quinary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-coursemos-quaternary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-coursemos-quinary-subtle);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-coursemos-quinary-subtle);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-coursemos-senary);
}

.btn-csms-studio-tertiary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-tertiary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-tertiary.focus, .btn-csms-studio-tertiary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-tertiary.focus.hover, .btn-csms-studio-tertiary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-tertiary:disabled, .btn-csms-studio-tertiary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-tertiary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-tertiary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-tertiary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-tertiary {
  --bs-btn-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-quaternary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-hierarchy-secondary);
}

.btn-csms-studio-nega-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-nega-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-nega-primary.focus, .btn-csms-studio-nega-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-nega-primary.focus.hover, .btn-csms-studio-nega-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-nega-primary:disabled, .btn-csms-studio-nega-primary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-nega-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-nega-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-nega-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-nega-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-nega-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-nega-primary {
  --bs-btn-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-bg: var(--csms-studio-bg-semantic-nega-primary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-hover-bg: var(--csms-studio-bg-semantic-nega-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-active-bg: var(--csms-studio-bg-semantic-nega-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-disabled-bg: var(--csms-studio-bg-semantic-nega-primary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-semantic-nega-primary);
}
.btn-csms-studio-nega-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-neutral-white-solid);
}
.btn-csms-studio-nega-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-neutral-white-solid);
}
.btn-csms-studio-nega-primary.focus, .btn-csms-studio-nega-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-outline-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-outline-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-outline-primary.focus, .btn-csms-studio-outline-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-outline-primary.focus.hover, .btn-csms-studio-outline-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-outline-primary:disabled, .btn-csms-studio-outline-primary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-outline-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-outline-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-primary {
  --bs-btn-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-hover-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-coursemos-senary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-active-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-coursemos-quinary);
  --bs-btn-active-border-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-disabled-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-coursemos-primary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}

.btn-csms-studio-outline-secondary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-outline-secondary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-outline-secondary.focus, .btn-csms-studio-outline-secondary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-outline-secondary.focus.hover, .btn-csms-studio-outline-secondary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-outline-secondary:disabled, .btn-csms-studio-outline-secondary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-outline-secondary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-secondary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-secondary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-outline-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-secondary {
  --bs-btn-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-coursemos-quaternary);
  --bs-btn-hover-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-coursemos-senary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-coursemos-quaternary);
  --bs-btn-active-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-coursemos-quinary);
  --bs-btn-active-border-color: var(--csms-studio-bo-coursemos-quaternary);
  --bs-btn-disabled-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-coursemos-quaternary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}

.btn-csms-studio-outline-tertiary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-outline-tertiary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-outline-tertiary.focus, .btn-csms-studio-outline-tertiary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-outline-tertiary.focus.hover, .btn-csms-studio-outline-tertiary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-outline-tertiary:disabled, .btn-csms-studio-outline-tertiary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-outline-tertiary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-tertiary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-tertiary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-outline-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-tertiary {
  --bs-btn-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-hover-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-active-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-disabled-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}

.btn-csms-studio-gray-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-primary.focus, .btn-csms-studio-gray-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-primary.focus.hover, .btn-csms-studio-gray-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-primary:disabled, .btn-csms-studio-gray-primary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-primary {
  --bs-btn-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-bg: var(--csms-studio-bg-hierarchy-quinary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-senary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-senary-subtle);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-disabled-bg: var(--csms-studio-bg-hierarchy-quinary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-hierarchy-quinary);
}
.btn-csms-studio-gray-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-neutral-white-solid);
}
.btn-csms-studio-gray-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-neutral-white-solid);
}
.btn-csms-studio-gray-primary.focus, .btn-csms-studio-gray-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-gray-secondary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-secondary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-secondary.focus, .btn-csms-studio-gray-secondary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-secondary.focus.hover, .btn-csms-studio-gray-secondary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-secondary:disabled, .btn-csms-studio-gray-secondary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-secondary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-secondary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-secondary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-secondary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-quaternary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-hierarchy-secondary);
}

.btn-csms-studio-gray-tertiary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-tertiary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-tertiary.focus, .btn-csms-studio-gray-tertiary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-tertiary.focus.hover, .btn-csms-studio-gray-tertiary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-tertiary:disabled, .btn-csms-studio-gray-tertiary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-tertiary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-tertiary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-tertiary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-tertiary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-quaternary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-hierarchy-secondary);
}
.btn-csms-studio-gray-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-gray-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-csms-studio-gray-outline-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-outline-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-outline-primary.focus, .btn-csms-studio-gray-outline-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-outline-primary.focus.hover, .btn-csms-studio-gray-outline-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-outline-primary:disabled, .btn-csms-studio-gray-outline-primary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-outline-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-outline-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-outline-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-outline-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-outline-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-outline-primary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}

.btn-default,
.btn-secondary,
.btn-csms-studio-gray-outline-secondary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-default.hover,
.btn-secondary.hover,
.btn-csms-studio-gray-outline-secondary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-default.focus, .btn-default:focus,
.btn-secondary.focus,
.btn-secondary:focus,
.btn-csms-studio-gray-outline-secondary.focus,
.btn-csms-studio-gray-outline-secondary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-default.focus.hover, .btn-default:focus:hover,
.btn-secondary.focus.hover,
.btn-secondary:focus:hover,
.btn-csms-studio-gray-outline-secondary.focus.hover,
.btn-csms-studio-gray-outline-secondary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-default:disabled, .btn-default.disabled,
.btn-secondary:disabled,
.btn-secondary.disabled,
.btn-csms-studio-gray-outline-secondary:disabled,
.btn-csms-studio-gray-outline-secondary.disabled {
  opacity: 0.4;
}
.btn-default.btn-csms-studio-svg,
.btn-secondary.btn-csms-studio-svg,
.btn-csms-studio-gray-outline-secondary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-default.btn-csms-studio-svg-right,
.btn-secondary.btn-csms-studio-svg-right,
.btn-csms-studio-gray-outline-secondary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-default svg,
.btn-secondary svg,
.btn-csms-studio-gray-outline-secondary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-default svg .svg-color[stroke],
.btn-secondary svg .svg-color[stroke],
.btn-csms-studio-gray-outline-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-default svg .svg-color[fill],
.btn-secondary svg .svg-color[fill],
.btn-csms-studio-gray-outline-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-default,
.btn-secondary,
.btn-csms-studio-gray-outline-secondary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}
.btn-default svg .svg-color[stroke],
.btn-secondary svg .svg-color[stroke],
.btn-csms-studio-gray-outline-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-default svg .svg-color[fill],
.btn-secondary svg .svg-color[fill],
.btn-csms-studio-gray-outline-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-csms-studio-gray-outline-tertiary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-outline-tertiary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-outline-tertiary.focus, .btn-csms-studio-gray-outline-tertiary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-outline-tertiary.focus.hover, .btn-csms-studio-gray-outline-tertiary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-outline-tertiary:disabled, .btn-csms-studio-gray-outline-tertiary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-outline-tertiary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-outline-tertiary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-outline-tertiary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-outline-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-outline-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-outline-tertiary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-quaternary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-quaternary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-quaternary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-quaternary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}
.btn-csms-studio-gray-outline-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-gray-outline-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}

.btn-xlg {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 52px;
  --csms-studio-btn-padding-y: 13px;
  --csms-studio-btn-padding-left: 24px;
  --csms-studio-btn-padding-right: 24px;
  --csms-studio-btn-padding-svg: 22px;
  --csms-studio-btn-svg-size: 18px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-lg {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 48px;
  --csms-studio-btn-padding-y: 11px;
  --csms-studio-btn-padding-left: 20px;
  --csms-studio-btn-padding-right: 20px;
  --csms-studio-btn-padding-svg: 18px;
  --csms-studio-btn-svg-size: 18px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-md {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-sm {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 40px;
  --csms-studio-btn-padding-y: 8px;
  --csms-studio-btn-padding-left: 16px;
  --csms-studio-btn-padding-right: 16px;
  --csms-studio-btn-padding-svg: 14px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-xsm {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 36px;
  --csms-studio-btn-padding-y: 7px;
  --csms-studio-btn-padding-left: 16px;
  --csms-studio-btn-padding-right: 16px;
  --csms-studio-btn-padding-svg: 14px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-2xsm {
  --bs-btn-border-radius: 6px;
  --csms-studio-btn-height: 32px;
  --csms-studio-btn-padding-y: 5px;
  --csms-studio-btn-padding-left: 12px;
  --csms-studio-btn-padding-right: 12px;
  --csms-studio-btn-padding-svg: 10px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-3xsm {
  --bs-btn-border-radius: 6px;
  --csms-studio-btn-height: 28px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 12px;
  --csms-studio-btn-padding-right: 12px;
  --csms-studio-btn-padding-svg: 10px;
  --csms-studio-btn-svg-size: 12px;
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-4xsm {
  --bs-btn-border-radius: 6px;
  --csms-studio-btn-height: 24px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 10px;
  --csms-studio-btn-padding-right: 10px;
  --csms-studio-btn-padding-svg: 8px;
  --csms-studio-btn-svg-size: 12px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-5xsm {
  --bs-btn-border-radius: 6px;
  --csms-studio-btn-height: 22px;
  --csms-studio-btn-padding-y: 3px;
  --csms-studio-btn-padding-left: 10px;
  --csms-studio-btn-padding-right: 10px;
  --csms-studio-btn-padding-svg: 8px;
  --csms-studio-btn-svg-size: 12px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-ghost {
  --csms-studio-btn-gap: 2px;
  --csms-studio-btn-border-radius: 8px;
  --csms-studio-btn-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-height: 28px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 6px;
  --csms-studio-btn-padding-right: 6px;
  --csms-studio-btn-padding-svg: 4px;
  --csms-studio-btn-svg-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--csms-studio-btn-gap);
  border: 1px solid var(--csms-studio-btn-border-color);
  border-radius: var(--csms-studio-btn-border-radius);
  background-color: var(--csms-studio-btn-background-color);
  color: var(--csms-studio-btn-color);
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-ghost.hover, .btn-ghost:hover {
  background-color: var(--csms-studio-btn-hover-background-color);
}
.btn-ghost.focus, .btn-ghost:focus {
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-ghost.active, .btn-ghost:active {
  background-color: var(--csms-studio-btn-active-background-color);
}
.btn-ghost:disabled, .btn-ghost.disabled {
  opacity: 0.4;
}
.btn-ghost.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-ghost.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-ghost svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-ghost svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-info);
}
.btn-ghost svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-info);
}

.btn-ghost-primary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
}

.btn-ghost-secondary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bg-coursemos-quinary);
}

.btn-ghost-gray-primary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
}
.btn-ghost-gray-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-ghost-gray-secondary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
}
.btn-ghost-gray-secondary.hover, .btn-ghost-gray-secondary:hover, .btn-ghost-gray-secondary.active, .btn-ghost-gray-secondary:active {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-ghost-gray-secondary.hover svg .svg-color[stroke], .btn-ghost-gray-secondary:hover svg .svg-color[stroke], .btn-ghost-gray-secondary.active svg .svg-color[stroke], .btn-ghost-gray-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-secondary.hover svg .svg-color[fill], .btn-ghost-gray-secondary:hover svg .svg-color[fill], .btn-ghost-gray-secondary.active svg .svg-color[fill], .btn-ghost-gray-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-ghost-gray-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}

.btn-ghost-gray-tertiary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bo-semantic-info-senary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bo-semantic-info-quinary);
}
.btn-ghost-gray-tertiary.hover, .btn-ghost-gray-tertiary:hover, .btn-ghost-gray-tertiary.active, .btn-ghost-gray-tertiary:active, .btn-ghost-gray-tertiary.focus, .btn-ghost-gray-tertiary:focus {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-ghost-gray-tertiary.hover svg .svg-color[stroke], .btn-ghost-gray-tertiary:hover svg .svg-color[stroke], .btn-ghost-gray-tertiary.active svg .svg-color[stroke], .btn-ghost-gray-tertiary:active svg .svg-color[stroke], .btn-ghost-gray-tertiary.focus svg .svg-color[stroke], .btn-ghost-gray-tertiary:focus svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-tertiary.hover svg .svg-color[fill], .btn-ghost-gray-tertiary:hover svg .svg-color[fill], .btn-ghost-gray-tertiary.active svg .svg-color[fill], .btn-ghost-gray-tertiary:active svg .svg-color[fill], .btn-ghost-gray-tertiary.focus svg .svg-color[fill], .btn-ghost-gray-tertiary:focus svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-ghost-gray-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}

.btn-ghost-xlg {
  --csms-studio-btn-gap: 4px;
  --csms-studio-btn-border-radius: 8px;
  --csms-studio-btn-height: 32px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 8px;
  --csms-studio-btn-padding-right: 8px;
  --csms-studio-btn-padding-svg: 6px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-ghost-lg {
  --csms-studio-btn-gap: 4px;
  --csms-studio-btn-border-radius: 8px;
  --csms-studio-btn-height: 32px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 8px;
  --csms-studio-btn-padding-right: 8px;
  --csms-studio-btn-padding-svg: 6px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-ghost-sm {
  --csms-studio-btn-gap: 2px;
  --csms-studio-btn-border-radius: 6px;
  --csms-studio-btn-height: 24px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 6px;
  --csms-studio-btn-padding-right: 6px;
  --csms-studio-btn-padding-svg: 4px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-ghost-xsm {
  --csms-studio-btn-gap: 2px;
  --csms-studio-btn-border-radius: 6px;
  --csms-studio-btn-height: 20px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 4px;
  --csms-studio-btn-padding-right: 4px;
  --csms-studio-btn-padding-svg: 2px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-csms-studio-link {
  --csms-studio-btn-gap: 4px;
  --csms-studio-btn-border-radius: 0;
  --csms-studio-btn-border-width: 0;
  --csms-studio-btn-border-color: var(--csms-studio-transpa rent);
  --csms-studio-btn-color: var(--csms-studio-transparent);
  --csms-studio-btn-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-height: 20px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--csms-studio-btn-gap);
  border: var(--csms-studio-btn-border-width) solid var(--csms-studio-btn-border-color);
  border-radius: var(--csms-studio-btn-border-radius);
  background-color: var(--csms-studio-btn-background-color);
  color: var(--csms-studio-btn-color);
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding);
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  text-decoration: var(--csms-studio-text-decoration);
  color: var(--csms-studio-btn-color);
}
.btn-csms-studio-link .text {
  text-decoration: var(--csms-studio-text-decoration);
  color: var(--csms-studio-btn-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-csms-studio-link.hover, .btn-csms-studio-link:hover {
  background-color: var(--csms-studio-btn-hover-background-color);
}
.btn-csms-studio-link.focus, .btn-csms-studio-link:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-link.active, .btn-csms-studio-link:active {
  background-color: var(--csms-studio-btn-active-background-color);
}
.btn-csms-studio-link:disabled, .btn-csms-studio-link.disabled {
  opacity: 0.4;
}
.btn-csms-studio-link.btn-csms-studio-svg-right {
  --csms-studio-btn-gap: 2px;
}
.btn-csms-studio-link.hover, .btn-csms-studio-link:hover {
  color: var(--csms-studio-btn-hover-color);
}
.btn-csms-studio-link.hover .text, .btn-csms-studio-link:hover .text {
  --csms-studio-text-decoration: underline;
  color: var(--csms-studio-btn-hover-color);
}
.btn-csms-studio-link.active, .btn-csms-studio-link:active {
  color: var(--csms-studio-btn-active-color);
}
.btn-csms-studio-link.active .text, .btn-csms-studio-link:active .text {
  --csms-studio-text-decoration: none;
  color: var(--csms-studio-btn-active-color);
}
.btn-csms-studio-link.btn-csms-studio-underline {
  text-decoration: underline !important;
}
.btn-csms-studio-link svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-info);
}
.btn-csms-studio-link svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-info);
}
.btn-csms-studio-link svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}

.btn-csms-studio-link-gray {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
}

.btn-csms-studio-link-gray-secondary {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-hover-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
}

.btn-csms-studio-link-tertiary {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-tertiary);
  --csms-studio-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
}

.btn-csms-studio-link-xlg {
  --csms-studio-btn-height: 23px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-csms-studio-link-lg {
  --csms-studio-btn-height: 21px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-csms-studio-link-sm {
  --csms-studio-btn-height: 18px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-csms-studio-link-xsm {
  --csms-studio-btn-height: 13px;
  --csms-studio-btn-svg-size: 12px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-csms-studio-link {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-hover-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
}

.csms-studio-box-shadow-xsm {
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.csms-studio-box-shadow-sm {
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.csms-studio-box-shadow-md {
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}

.csms-studio-box-shadow-lg {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.csms-studio-box-shadow-xl {
  box-shadow: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-2xl {
  box-shadow: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-3xl {
  box-shadow: 0 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
}

/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

.csms-studio-heading-2xlg {
  --csms-studio-heading-font-weight: 700;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-xlg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 40px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 56px;
  margin-bottom: 0;
}

.csms-studio-heading-lg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 32px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 45px;
  margin-bottom: 0;
}

.csms-studio-heading-md {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 28px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-sm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm-semibold {
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-label-xlg-bold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-semibold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-medium {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-normal {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-bold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-semibold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-medium {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-normal {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-bold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-semibold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-medium {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-normal {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-bold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-semibold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-medium {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-normal {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-bold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-semibold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-medium {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-normal {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-bold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-semibold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-medium {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-normal {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-caption-lg {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-md {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-sm {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 10px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 12px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-csms-studio-icon {
  --csms-studio-btn-icon-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-svg-color: --csms-studio-fg-hierarchy-secondary;
  --csms-studio-btn-icon-svg-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--csms-studio-btn-icon-border-color);
  border-radius: var(--csms-studio-btn-icon-border-radius);
  background-color: var(--csms-studio-btn-icon-background-color);
  color: var(--csms-studio-btn-icon-svg-color);
  width: var(--csms-studio-btn-icon-size);
  height: var(--csms-studio-btn-icon-size);
  padding: 0;
}
.btn-csms-studio-icon.hover, .btn-csms-studio-icon:hover {
  background-color: var(--csms-studio-btn-icon-hover-background-color);
}
.btn-csms-studio-icon.focus, .btn-csms-studio-icon:focus {
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-icon.active, .btn-csms-studio-icon:active {
  background-color: var(--csms-studio-btn-icon-active-background-color);
}
.btn-csms-studio-icon:disabled, .btn-csms-studio-icon.disabled, .btn-csms-studio-icon[disabled=disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-csms-studio-icon:disabled:hover, .btn-csms-studio-icon:disabled.hover, .btn-csms-studio-icon.disabled:hover, .btn-csms-studio-icon.disabled.hover, .btn-csms-studio-icon[disabled=disabled]:hover, .btn-csms-studio-icon[disabled=disabled].hover {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.btn-csms-studio-icon:disabled:active, .btn-csms-studio-icon:disabled.active, .btn-csms-studio-icon.disabled:active, .btn-csms-studio-icon.disabled.active, .btn-csms-studio-icon[disabled=disabled]:active, .btn-csms-studio-icon[disabled=disabled].active {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.btn-csms-studio-icon svg {
  width: var(--csms-studio-btn-icon-svg-size);
  height: var(--csms-studio-btn-icon-svg-size);
}
.btn-csms-studio-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-svg-color);
}
.btn-csms-studio-icon svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-svg-color);
}

.btn-csms-studio-icon-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-primary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-neutral-white-solid);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-primary.focus, .btn-csms-studio-icon-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-icon-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-outline-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-coursemos-primary);
}

.btn-csms-studio-icon-outline-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}

.btn-csms-studio-icon-outline-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-coursemos-primary);
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.btn-csms-studio-icon-outline-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.btn-csms-studio-icon-nospace-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-nospace-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-neutral-b10p);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-quinary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-neutral-white-solid);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-senary-subtle);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-primary.disabled, .btn-csms-studio-icon-gray-primary:disabled {
  background-color: var(--csms-studio-bg-hierarchy-senary);
}
.btn-csms-studio-icon-gray-primary.focus, .btn-csms-studio-icon-gray-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-icon-gray-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bo-coursemos-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-quaternary.focus, .btn-csms-studio-icon-gray-quaternary:focus {
  background-color: var(--csms-studio-bg-coursemos-quinary);
}

.btn-csms-studio-icon-gray-outline-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}

.btn-csms-studio-icon-gray-outline-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover, .btn-csms-studio-icon-gray-outline-secondary:hover {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-secondary:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-secondary:hover svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.active, .btn-csms-studio-icon-gray-outline-secondary:active {
  color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-secondary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-secondary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-icon-gray-outline-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.btn-csms-studio-icon-gray-outline-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover, .btn-csms-studio-icon-gray-outline-quaternary:hover {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-quaternary:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-quaternary:hover svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active, .btn-csms-studio-icon-gray-outline-quaternary:active {
  color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-quaternary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-quaternary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-icon-gray-nospace-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-neutral-b6p-hovered);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-neutral-b15p);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-nospace-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover, .btn-csms-studio-icon-gray-nospace-secondary:hover, .btn-csms-studio-icon-gray-nospace-secondary.active, .btn-csms-studio-icon-gray-nospace-secondary:active {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary:hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary:hover svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-csms-studio-icon-gray-nospace-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-info-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-2xsm {
  --csms-studio-btn-icon-size: 20px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 12px;
}

.btn-csms-studio-icon-xsm {
  --csms-studio-btn-icon-size: 24px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 14px;
}

.btn-csms-studio-icon-sm {
  --csms-studio-btn-icon-size: 28px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 16px;
}

.btn-csms-studio-icon-md {
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 18px;
}

.btn-csms-studio-icon-lg {
  --csms-studio-btn-icon-size: 36px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 18px;
}

.btn-csms-studio-icon-xlg {
  --csms-studio-btn-icon-size: 40px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 20px;
}

.btn-csms-studio-icon-2xlg {
  --csms-studio-btn-icon-size: 48px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 24px;
}

.btn-csms-studio-svgicon {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-bg-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-svgicon-size-md: 16px;
  --csms-studio-btn-svgicon-size-lg: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon.hover, .btn-csms-studio-svgicon:hover {
  color: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.hover svg .svg-color[stroke], .btn-csms-studio-svgicon:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.hover svg .svg-color[fill], .btn-csms-studio-svgicon:hover svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.focus, .btn-csms-studio-svgicon:focus {
  color: var(--csms-studio-btn-svgicon-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon.active, .btn-csms-studio-svgicon:active {
  color: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon.active svg .svg-color[stroke], .btn-csms-studio-svgicon:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon.active svg .svg-color[fill], .btn-csms-studio-svgicon:active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon:disabled, .btn-csms-studio-svgicon.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-csms-studio-svgicon svg {
  width: var(--csms-studio-btn-svgicon-size-md);
  height: var(--csms-studio-btn-svgicon-size-md);
}

.btn-csms-studio-svgicon {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-tertiary);
}

.btn-csms-studio-svgicon-help {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active svg .svg-color[stroke], .btn-csms-studio-svgicon-help:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active svg .svg-color[fill], .btn-csms-studio-svgicon-help:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active, .btn-csms-studio-svgicon-help:active {
  background-color: var(--csms-studio-btn-svgicon-bg-color);
}

.btn-csms-studio-svgicon-eye {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-svgicon-eye.active svg .svg-color[stroke], .btn-csms-studio-svgicon-eye:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-svgicon-eye.active svg .svg-color[fill], .btn-csms-studio-svgicon-eye:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-svgicon-home {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home.active svg .svg-color[stroke], .btn-csms-studio-svgicon-home:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home.active svg .svg-color[fill], .btn-csms-studio-svgicon-home:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home svg {
  width: --csms-studio-btn-svgicon-size-lg;
  height: --csms-studio-btn-svgicon-size-lg;
}
.btn-csms-studio-svgicon-home {
  border-radius: 0 !important;
}

.btn-csms-studio-svgicon-circle {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle.hover, .btn-csms-studio-svgicon-circle:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle.focus, .btn-csms-studio-svgicon-circle:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle.active, .btn-csms-studio-svgicon-circle:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle:disabled, .btn-csms-studio-svgicon-circle.disabled {
  opacity: 0.4;
}

.btn-csms-studio-svgicon-circle-arrow {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle-arrow svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-arrow svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-arrow svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle-arrow.hover, .btn-csms-studio-svgicon-circle-arrow:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle-arrow.focus, .btn-csms-studio-svgicon-circle-arrow:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle-arrow.active, .btn-csms-studio-svgicon-circle-arrow:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle-arrow:disabled, .btn-csms-studio-svgicon-circle-arrow.disabled {
  opacity: 0.4;
}
.btn-csms-studio-svgicon-circle-arrow {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-circle-size: 36px;
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.btn-csms-studio-svgicon-circle-help {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle-help svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-help svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-help svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle-help.hover, .btn-csms-studio-svgicon-circle-help:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle-help.focus, .btn-csms-studio-svgicon-circle-help:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle-help.active, .btn-csms-studio-svgicon-circle-help:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle-help:disabled, .btn-csms-studio-svgicon-circle-help.disabled {
  opacity: 0.4;
}
.btn-csms-studio-svgicon-circle-help {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-size: 40px;
}

.btn-csms-studio-like {
  --csms-studio-btn-icon-like-padding-y: 10px;
  --csms-studio-btn-icon-like-padding-x: 16px;
  --csms-studio-btn-icon-like-padding-x-round: 20px;
  --csms-studio-btn-icon-like-background: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-icon-like-hover-background: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-icon-like-active-svg-color: #fd6d6d;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-btn-icon-like-background);
  padding: var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x) var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x-round);
  border-radius: var(--csms-studio-border-radius-full) 0 0 var(--csms-studio-border-radius-full);
}
.btn-csms-studio-like svg {
  width: 20px;
  height: 20px;
}
.btn-csms-studio-like svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-like svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-like {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-csms-studio-like.hover, .btn-csms-studio-like:hover {
  background: var(--csms-studio-btn-icon-like-hover-background);
}
.btn-csms-studio-like.focus, .btn-csms-studio-like:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-like.is-active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-like.is-active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-like.is-active svg .svg-thumb-bg {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}

.btn-csms-studio-dislike {
  --csms-studio-btn-icon-like-padding-y: 10px;
  --csms-studio-btn-icon-like-padding-x: 16px;
  --csms-studio-btn-icon-like-padding-x-round: 20px;
  --csms-studio-btn-icon-like-background: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-icon-like-hover-background: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-icon-like-active-svg-color: #fd6d6d;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-btn-icon-like-background);
  padding: var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x-round) var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x);
  border-radius: 0 var(--csms-studio-border-radius-full) var(--csms-studio-border-radius-full) 0;
}
.btn-csms-studio-dislike svg {
  width: 20px;
  height: 20px;
}
.btn-csms-studio-dislike svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-dislike svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-dislike {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-csms-studio-dislike.hover, .btn-csms-studio-dislike:hover {
  background: var(--csms-studio-btn-icon-like-hover-background);
}
.btn-csms-studio-dislike.focus, .btn-csms-studio-dislike:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-dislike.is-active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-dislike.is-active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-dislike.is-active svg .svg-thumb-bg {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}

.btn-csms-studio-like-container {
  display: flex;
  align-items: center;
}
.btn-csms-studio-like-container .btn-csms-studio-like + .btn-csms-studio-dislike {
  margin-left: -1px;
}

.csms-studio-cons {
  --csms-studio-cons-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-cons-border-radius: 99px;
  --csms-studio-cons-border-color: var(--csms-studio-bo-semantic-info-quaternary);
  --csms-studio-cons-background-color: var(--csms-studio-bg-semantic-info-senary-subtle);
  --csms-studio-cons-background-active-color: var(--csms-studio-bg-semantic-info-primary);
  --csms-studio-cons-background-hover-color: var(--csms-studio-bg-semantic-info-senary);
  --csms-studio-cons-svg-size: 16px;
  --csms-studio-cons-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-cons-padding-x: 20px;
  --csms-studio-cons-padding-y: 8px;
  --csms-studio-cons-height: 44px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--csms-studio-cons-border-color);
  border-radius: var(--csms-studio-cons-border-radius);
  background-color: var(--csms-studio-cons-background-color);
  color: var(--csms-studio-cons-color);
  padding: var(--csms-studio-cons-padding-y) var(--csms-studio-cons-padding-x);
  height: var(--csms-studio-cons-height);
}
.csms-studio-cons.hover, .csms-studio-cons:hover {
  background-color: var(--csms-studio-cons-background-hover-color);
}
.csms-studio-cons.focus, .csms-studio-cons:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.csms-studio-cons.active, .csms-studio-cons:active {
  background-color: var(--csms-studio-cons-background-active-color);
}
.csms-studio-cons:disabled, .csms-studio-cons.disabled {
  opacity: 0.4;
}
.csms-studio-cons svg {
  width: var(--csms-studio-cons-svg-size);
  height: var(--csms-studio-cons-svg-size);
}
.csms-studio-cons svg .svg-color[stroke] {
  stroke: var(--csms-studio-cons-svg-color);
}
.csms-studio-cons svg .svg-color[fill] {
  fill: var(--csms-studio-cons-svg-color);
}

.csms-studio-cons-gray {
  --csms-studio-cons-color: var(--csms-studio-tx-hierarchy-quaternary);
  --csms-studio-cons-background-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-cons-background-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-cons-background-active-color: var(--csms-studio-bg-semantic-info-senary-subtle);
  --csms-studio-cons-border-color: var(--csms-studio-bo-hierarchy-secondary);
}

.vd-error-message {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-semantic-nega-primary);
  text-align: left;
  margin-top: 6px;
}

.form-text {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-secondary-color: var(--csms-studio-tx-hierarchy-tertiary);
  margin-top: 6px;
}
.form-text.form-text-sm {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quinary);
  margin-top: 0;
}

.form-control {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-body-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --bs-background-image: transparent;
  --csms-studio-form-control-height: 40px;
  --csms-studio-form-control-padding-y: 10px;
  --csms-studio-form-control-padding-x: 14px;
  --csms-studio-form-control-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-form-control-placeholder-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-hierarchy-quaternary);
  --csms-studio-form-control-hover-background-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-info-primary);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-form-control-disabled-placeholder-color: var(--csms-studio-tx-hierarchy-senary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-info-30p);
  height: var(--csms-studio-form-control-height);
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
  background-color: var(--csms-studio-form-control-background-color);
}
.form-control::placeholder {
  color: var(--csms-studio-form-control-placeholder-color);
}
.form-control.hover:not(.disabled, :disabled, .read-only, :read-only, .focus, :focus), .form-control:hover:not(.disabled, :disabled, .read-only, :read-only, .focus, :focus) {
  --bs-border-color: var(--csms-studio-form-control-hover-border-color);
  background-color: var(--csms-studio-form-control-hover-background-color);
}
.form-control.focus, .form-control:focus {
  --bs-border-color: var(--csms-studio-form-control-focus-border-color);
  border-color: var(--bs-border-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.form-control.read-only, .form-control:read-only, .form-control.disabled, .form-control:disabled {
  --bs-border-color: var(--csms-studio-form-control-disabled-border-color);
  background-color: var(--csms-studio-form-control-disabled-background-color);
}
.form-control.read-only::placeholder, .form-control:read-only::placeholder, .form-control.disabled::placeholder, .form-control:disabled::placeholder {
  color: var(--csms-studio-form-control-disabled-placeholder-color);
}
.form-control.is-invalid, .form-control.vd-error {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-nega-secondary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-nega-30p);
}
.form-control.is-invalid.disabled, .form-control.is-invalid:disabled, .form-control.vd-error.disabled, .form-control.vd-error:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.form-control.is-invalid + .form-text, .form-control.vd-error + .form-text {
  color: var(--csms-studio-tx-semantic-nega-primary);
}
.form-control.is-valid, .form-control.vd-success {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-posi-secondary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-posi-30p);
}
.form-control.is-valid.disabled, .form-control.is-valid:disabled, .form-control.vd-success.disabled, .form-control.vd-success:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-30p);
}
.form-control + .vd-error-message,
.form-control + .form-text {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.form-control + .vd-error-message.form-text-sm,
.form-control + .form-text.form-text-sm {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quinary);
  margin-top: 0;
}

.form-select {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-body-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --bs-form-select-bg-img: url("data:image/svg+xml,<svg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M5.36321 8.36321C5.71469 8.01174 6.28453 8.01174 6.63601 8.36321L11.9996 13.7268L17.3632 8.36321C17.7147 8.01174 18.2845 8.01174 18.636 8.36321C18.9875 8.71469 18.9875 9.28453 18.636 9.63601L12.636 15.636C12.2845 15.9875 11.7147 15.9875 11.3632 15.636L5.36321 9.63601C5.01174 9.28453 5.01174 8.71469 5.36321 8.36321Z%27 fill=%27#2c2f32%27/%3E%3C/svg%3E");
  --bs-form-select-bg-img-disabled: url("data:image/svg+xml,<svg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M5.36321 8.36321C5.71469 8.01174 6.28453 8.01174 6.63601 8.36321L11.9996 13.7268L17.3632 8.36321C17.7147 8.01174 18.2845 8.01174 18.636 8.36321C18.9875 8.71469 18.9875 9.28453 18.636 9.63601L12.636 15.636C12.2845 15.9875 11.7147 15.9875 11.3632 15.636L5.36321 9.63601C5.01174 9.28453 5.01174 8.71469 5.36321 8.36321Z%27 fill=%27rgba%2844, 47, 50, 0.4%29%27/></svg>");
  --csms-studio-form-select-bg-size: 18px;
  --csms-studio-form-control-height: 40px;
  --csms-studio-form-control-padding-y: 10px;
  --csms-studio-form-control-padding-x: 14px;
  --csms-studio-form-control-padding-x-right: calc(var(--csms-studio-form-select-bg-size) + 14px);
  --csms-studio-form-control-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-form-control-placeholder-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-hover-background-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-background-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-form-control-disabled-placeholder-color: var(--csms-studio-tx-hierarchy-senary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-info-30p);
}
.form-select:not([multiple]) {
  height: var(--csms-studio-form-control-height);
}
.form-select {
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x-right) var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
  background-color: var(--csms-studio-form-control-background-color);
  background-size: var(--csms-studio-form-select-bg-size) var(--csms-studio-form-select-bg-size);
  background-position: right var(--csms-studio-form-control-padding-x) center;
}
.form-select.hover:not(.disabled, :disabled, .ss-disabled, .focus, :focus), .form-select:hover:not(.disabled, :disabled, .ss-disabled, .focus, :focus) {
  --bs-border-color: var(--csms-studio-form-control-hover-border-color);
  background-color: var(--csms-studio-form-control-hover-background-color);
}
.form-select.focus, .form-select:focus {
  --bs-border-color: var(--csms-studio-form-control-focus-border-color);
  border-color: var(--bs-border-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.form-select.disabled, .form-select:disabled {
  --bs-border-color: var(--csms-studio-form-control-disabled-border-color);
  background-color: var(--csms-studio-form-control-disabled-background-color);
  background-image: var(--bs-form-select-bg-img-disabled);
}
.form-select.is-invalid, .form-select.vd-error {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-nega-30p);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.form-select.is-invalid.disabled, .form-select.is-invalid:disabled, .form-select.vd-error.disabled, .form-select.vd-error:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.form-select.is-valid, .form-select.vd-success {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-posi-30p);
}
.form-select.is-valid.disabled, .form-select.is-valid:disabled, .form-select.vd-success.disabled, .form-select.vd-success:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-30p);
}
.form-select:invalid {
  color: var(--csms-studio-tx-hierarchy-quinary);
}

.form-select-3xsm,
.form-control-3xsm {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 16px;
  --csms-studio-form-control-height: 28px;
  --csms-studio-form-control-padding-y: 6px;
  --bs-border-radius: 6px;
}
.form-select-3xsm + .vd-error-message,
.form-select-3xsm + .form-text,
.form-control-3xsm + .vd-error-message,
.form-control-3xsm + .form-text {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.form-select-2xsm,
.form-control-2xsm {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 16px;
  --csms-studio-form-control-height: 32px;
  --csms-studio-form-control-padding-y: 6px;
  --bs-border-radius: 6px;
}
.form-select-2xsm + .vd-error-message,
.form-select-2xsm + .form-text,
.form-control-2xsm + .vd-error-message,
.form-control-2xsm + .form-text {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.form-select-xsm,
.form-control-xsm {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 16px;
  --csms-studio-form-control-height: 36px;
  --csms-studio-form-control-padding-y: 6px;
}

.form-select-md,
.form-control-md {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 44px;
}

.form-select-lg,
.form-control-lg {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 20px;
  --csms-studio-form-control-height: 48px;
}

.form-select-xlg,
.form-control-xlg {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 22px;
  --csms-studio-form-control-height: 52px;
}

.input-group > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 40px;
  --csms-studio-btn-padding-y: 8px;
  --csms-studio-btn-padding-left: 16px;
  --csms-studio-btn-padding-right: 16px;
  --csms-studio-btn-padding-svg: 14px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --csms-studio-input-group-btn-svg-gap: 4px;
  --csms-studio-input-group-btn-svg-size: 16px;
  --csms-studio-input-group-btn-padding-left: 14px;
  --csms-studio-input-group-btn-padding-right: 12px;
  --csms-studio-input-group-btn-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-input-group-btn-border-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-input-group-btn-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-input-group-btn-focus-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-input-group-btn-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  gap: var(--csms-studio-input-group-btn-svg-gap);
  padding: 0 var(--csms-studio-input-group-btn-padding-right) 0 var(--csms-studio-input-group-btn-padding-left);
  background-color: var(--csms-studio-input-group-btn-background-color);
  border-color: var(--csms-studio-input-group-btn-border-color);
}
.input-group > .btn svg {
  width: var(--csms-studio-input-group-btn-svg-size);
  height: var(--csms-studio-input-group-btn-svg-size);
}
.input-group > .btn svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.input-group > .btn svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.input-group > .btn.hover, .input-group > .btn:hover {
  background-color: var(--csms-studio-input-group-btn-hover-background-color);
  border-color: var(--csms-studio-input-group-btn-border-color);
}
.input-group > .btn.focus, .input-group > .btn:focus {
  background-color: var(--csms-studio-input-group-btn-focus-background-color);
  border-color: var(--csms-studio-input-group-btn-border-color);
}
.input-group > .btn.active, .input-group > .btn:active {
  background-color: var(--csms-studio-input-group-btn-active-background-color);
  border-color: var(--csms-studio-input-group-btn-border-color);
}
.input-group > .input-group-text {
  --bs-body-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-tertiary-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --csms-studio-form-control-height: 40px;
  --csms-studio-input-group-text-padding-left: 14px;
  --csms-studio-input-group-text-padding-right: 12px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  padding: 0 var(--csms-studio-input-group-text-padding-right) 0 var(--csms-studio-input-group-text-padding-left);
  height: var(--csms-studio-form-control-height);
}
.input-group > .form-control,
.input-group > .form-select {
  --csms-studio-form-control-padding-y: 6px;
  --csms-studio-form-control-padding-x: 14px;
}
.input-group + .vd-error-message,
.input-group + .form-text {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.input-group-xsm > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 36px;
  --csms-studio-btn-padding-y: 7px;
  --csms-studio-btn-padding-left: 16px;
  --csms-studio-btn-padding-right: 16px;
  --csms-studio-btn-padding-svg: 14px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-input-group-btn-svg-size: 16px;
}
.input-group-xsm > .form-control,
.input-group-xsm > .form-select {
  --csms-studio-form-control-padding-y: 6px;
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
}
.input-group-xsm > .form-control,
.input-group-xsm > .form-select,
.input-group-xsm > .input-group-text {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 36px;
}
.input-group-xsm + .form-text,
.input-group-xsm + .vd-error-message {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.input-group-md > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-input-group-btn-svg-size: 18px;
  --csms-studio-input-group-btn-padding-left: 16px;
  --csms-studio-input-group-btn-padding-right: 14px;
}
.input-group-md > .input-group-text {
  --csms-studio-input-group-text-padding-left: 16px;
  --csms-studio-input-group-text-padding-right: 14px;
}
.input-group-md > .form-control,
.input-group-md > .form-select {
  --csms-studio-form-control-padding-y: 10px;
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
}
.input-group-md > .form-control,
.input-group-md > .form-select,
.input-group-md > .input-group-text {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 44px;
}

.input-group-lg > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 48px;
  --csms-studio-btn-padding-y: 11px;
  --csms-studio-btn-padding-left: 20px;
  --csms-studio-btn-padding-right: 20px;
  --csms-studio-btn-padding-svg: 18px;
  --csms-studio-btn-svg-size: 18px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-input-group-btn-svg-size: 20px;
  --csms-studio-input-group-btn-padding-left: 16px;
  --csms-studio-input-group-btn-padding-right: 14px;
}
.input-group-lg > .input-group-text {
  --csms-studio-input-group-text-padding-left: 16px;
  --csms-studio-input-group-text-padding-right: 14px;
}
.input-group-lg > .form-control,
.input-group-lg > .form-select {
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
}
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 48px;
}

.input-group-xlg > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 52px;
  --csms-studio-btn-padding-y: 13px;
  --csms-studio-btn-padding-left: 24px;
  --csms-studio-btn-padding-right: 24px;
  --csms-studio-btn-padding-svg: 22px;
  --csms-studio-btn-svg-size: 18px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  font-weight: 400;
  --csms-studio-input-group-btn-svg-size: 22px;
  --csms-studio-input-group-btn-padding-left: 16px;
  --csms-studio-input-group-btn-padding-right: 14px;
}
.input-group-xlg > .input-group-text {
  --csms-studio-input-group-text-padding-left: 16px;
  --csms-studio-input-group-text-padding-right: 14px;
}
.input-group-xlg > .form-control,
.input-group-xlg > .form-select {
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
}
.input-group-xlg > .form-control,
.input-group-xlg > .form-select,
.input-group-xlg > .input-group-text {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 52px;
}

.vd-error-message {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-semantic-nega-primary);
}

.form-floating > label {
  color: var(--csms-studio-tx-hierarchy-quinary);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
  color: var(--csms-studio-tx-hierarchy-quinary);
}

.csms-studio-form-floating > .form-control,
.csms-studio-form-floating > .form-control-plaintext,
.csms-studio-form-floating > .form-select {
  height: 56px;
  min-height: 56px;
  line-height: 1.5;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-form-floating > label {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quinary);
  padding: 15px 14px;
}
.csms-studio-form-floating > .form-control,
.csms-studio-form-floating > .form-control-plaintext {
  padding: 15px 14px;
}
.csms-studio-form-floating > .form-control::placeholder,
.csms-studio-form-floating > .form-control-plaintext::placeholder {
  color: transparent;
}
.csms-studio-form-floating > .form-control:focus, .csms-studio-form-floating > .form-control:not(:placeholder-shown),
.csms-studio-form-floating > .form-control-plaintext:focus,
.csms-studio-form-floating > .form-control-plaintext:not(:placeholder-shown) {
  padding-top: 25px;
  padding-bottom: 5px;
}
.csms-studio-form-floating > .form-control:-webkit-autofill,
.csms-studio-form-floating > .form-control-plaintext:-webkit-autofill {
  padding-top: 25px;
  padding-bottom: 5px;
}
.csms-studio-form-floating > .form-select {
  padding-top: 25px;
  padding-bottom: 5px;
}
.csms-studio-form-floating > .form-control:focus ~ label,
.csms-studio-form-floating > .form-control:not(:placeholder-shown) ~ label,
.csms-studio-form-floating > .form-control-plaintext ~ label,
.csms-studio-form-floating > .form-select ~ label {
  color: var(--csms-studio-tx-hierarchy-quinary);
  transform: scale(0.75) translateY(-7.5px) translateX(5px);
}
.csms-studio-form-floating > .form-control:focus ~ label::after,
.csms-studio-form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.csms-studio-form-floating > .form-control-plaintext ~ label::after,
.csms-studio-form-floating > .form-select ~ label::after {
  position: absolute;
  inset: inherit;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: transparent;
  border-radius: 8px;
}
.csms-studio-form-floating > .form-control:-webkit-autofill ~ label {
  color: var(--csms-studio-tx-hierarchy-quinary);
  transform: scale(0.75) translateY(-7.5px) translateX(5px);
}
.csms-studio-form-floating > .form-control-plaintext ~ label {
  border-width: 1px 0;
}
.csms-studio-form-floating > :disabled ~ label,
.csms-studio-form-floating > .form-control:disabled ~ label {
  color: rgba(0, 0, 0, 0.38);
}
.csms-studio-form-floating > :disabled ~ label::after,
.csms-studio-form-floating > .form-control:disabled ~ label::after {
  background-color: #e9ecef;
}

textarea.form-control {
  --csms-studio-form-control-height: inherit;
}

input[type=number].form-control-spin-hide::-webkit-inner-spin-button, input[type=number].form-control-spin-hide::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number].form-control-spin-hide {
  -moz-appearance: textfield;
}

.csms-studio-dropdown .dropdown-toggle-icon, .dropdown-item-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.csms-studio-dropdown .dropdown-toggle-icon img, .dropdown-item-icon img {
  width: var(--csms-studio-dropdown-item-icon-image-size);
  height: var(--csms-studio-dropdown-item-icon-image-size);
  border-radius: 50%;
}
.csms-studio-dropdown .dropdown-toggle-icon .svg-icon, .dropdown-item-icon .svg-icon {
  flex: 0 0 auto;
}
.csms-studio-dropdown .dropdown-toggle-icon .svg-icon svg, .dropdown-item-icon .svg-icon svg {
  width: var(--csms-studio-dropdown-item-icon-svg-size);
  height: var(--csms-studio-dropdown-item-icon-svg-size);
}
.csms-studio-dropdown .dropdown-toggle-icon .svg-icon svg .svg-color[stroke], .dropdown-item-icon .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-dropdown-item-icon-svg-color);
}
.csms-studio-dropdown .dropdown-toggle-icon .svg-icon svg .svg-color[fill], .dropdown-item-icon .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-dropdown-item-icon-svg-color);
}
.csms-studio-dropdown .dropdown-toggle-icon .svg-select, .dropdown-item-icon .svg-select {
  margin-left: auto;
  flex: 0 0 auto;
  display: none;
}
.csms-studio-dropdown .dropdown-toggle-icon .svg-select svg, .dropdown-item-icon .svg-select svg {
  width: var(--csms-studio-dropdown-item-icon-svg-select-size);
  height: var(--csms-studio-dropdown-item-icon-svg-select-size);
}
.csms-studio-dropdown .dropdown-toggle-icon .svg-select svg .svg-color[stroke], .dropdown-item-icon .svg-select svg .svg-color[stroke] {
  stroke: var(--csms-studio-dropdown-item-icon-svg-select-color);
}
.csms-studio-dropdown .dropdown-toggle-icon .svg-select svg .svg-color[fill], .dropdown-item-icon .svg-select svg .svg-color[fill] {
  fill: var(--csms-studio-dropdown-item-icon-svg-select-color);
}
.csms-studio-dropdown .dropdown-toggle-icon .svg-caret, .dropdown-item-icon .svg-caret {
  margin-left: auto;
  flex: 0 0 auto;
}
.csms-studio-dropdown .dropdown-toggle-icon .svg-caret svg, .dropdown-item-icon .svg-caret svg {
  width: var(--csms-studio-dropdown-item-icon-svg-select-size);
  height: var(--csms-studio-dropdown-item-icon-svg-select-size);
}
.csms-studio-dropdown .dropdown-toggle-icon .svg-caret svg .svg-color[stroke], .dropdown-item-icon .svg-caret svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.csms-studio-dropdown .dropdown-toggle-icon .svg-caret svg .svg-color[fill], .dropdown-item-icon .svg-caret svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.csms-studio-dropdown {
  --csms-studio-dropdown-item-icon-image-size: 24px;
  --csms-studio-dropdown-item-icon-svg-size: 20px;
  --csms-studio-dropdown-item-icon-svg-select-size: 18px;
  --csms-studio-dropdown-item-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-dropdown-item-icon-svg-select-color: var(--csms-studio-fg-semantic-info);
  --csms-studio-dropdown-item-icon-svg-menu-color: var(--csms-studio-fg-hierarchy-secondary);
}
.csms-studio-dropdown .dropdown-toggle {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-body-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --bs-form-select-bg-img: url("data:image/svg+xml,<svg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M5.36321 8.36321C5.71469 8.01174 6.28453 8.01174 6.63601 8.36321L11.9996 13.7268L17.3632 8.36321C17.7147 8.01174 18.2845 8.01174 18.636 8.36321C18.9875 8.71469 18.9875 9.28453 18.636 9.63601L12.636 15.636C12.2845 15.9875 11.7147 15.9875 11.3632 15.636L5.36321 9.63601C5.01174 9.28453 5.01174 8.71469 5.36321 8.36321Z%27 fill=%27#2c2f32%27/%3E%3C/svg%3E");
  --bs-form-select-bg-img-disabled: url("data:image/svg+xml,<svg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M5.36321 8.36321C5.71469 8.01174 6.28453 8.01174 6.63601 8.36321L11.9996 13.7268L17.3632 8.36321C17.7147 8.01174 18.2845 8.01174 18.636 8.36321C18.9875 8.71469 18.9875 9.28453 18.636 9.63601L12.636 15.636C12.2845 15.9875 11.7147 15.9875 11.3632 15.636L5.36321 9.63601C5.01174 9.28453 5.01174 8.71469 5.36321 8.36321Z%27 fill=%27rgba%2844, 47, 50, 0.4%29%27/></svg>");
  --csms-studio-form-select-bg-size: 18px;
  --csms-studio-form-control-height: 40px;
  --csms-studio-form-control-padding-y: 10px;
  --csms-studio-form-control-padding-x: 14px;
  --csms-studio-form-control-padding-x-right: calc(var(--csms-studio-form-select-bg-size) + 14px);
  --csms-studio-form-control-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-form-control-placeholder-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-hover-background-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-background-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-form-control-disabled-placeholder-color: var(--csms-studio-tx-hierarchy-senary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-info-30p);
}
.csms-studio-dropdown .dropdown-toggle:not([multiple]) {
  height: var(--csms-studio-form-control-height);
}
.csms-studio-dropdown .dropdown-toggle {
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x-right) var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
  background-color: var(--csms-studio-form-control-background-color);
  background-size: var(--csms-studio-form-select-bg-size) var(--csms-studio-form-select-bg-size);
  background-position: right var(--csms-studio-form-control-padding-x) center;
}
.csms-studio-dropdown .dropdown-toggle.hover:not(.disabled, :disabled, .ss-disabled, .focus, :focus), .csms-studio-dropdown .dropdown-toggle:hover:not(.disabled, :disabled, .ss-disabled, .focus, :focus) {
  --bs-border-color: var(--csms-studio-form-control-hover-border-color);
  background-color: var(--csms-studio-form-control-hover-background-color);
}
.csms-studio-dropdown .dropdown-toggle.focus, .csms-studio-dropdown .dropdown-toggle:focus {
  --bs-border-color: var(--csms-studio-form-control-focus-border-color);
  border-color: var(--bs-border-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.csms-studio-dropdown .dropdown-toggle.disabled, .csms-studio-dropdown .dropdown-toggle:disabled {
  --bs-border-color: var(--csms-studio-form-control-disabled-border-color);
  background-color: var(--csms-studio-form-control-disabled-background-color);
  background-image: var(--bs-form-select-bg-img-disabled);
}
.csms-studio-dropdown .dropdown-toggle.is-invalid, .csms-studio-dropdown .dropdown-toggle.vd-error {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-nega-30p);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.csms-studio-dropdown .dropdown-toggle.is-invalid.disabled, .csms-studio-dropdown .dropdown-toggle.is-invalid:disabled, .csms-studio-dropdown .dropdown-toggle.vd-error.disabled, .csms-studio-dropdown .dropdown-toggle.vd-error:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.csms-studio-dropdown .dropdown-toggle.is-valid, .csms-studio-dropdown .dropdown-toggle.vd-success {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-posi-30p);
}
.csms-studio-dropdown .dropdown-toggle.is-valid.disabled, .csms-studio-dropdown .dropdown-toggle.is-valid:disabled, .csms-studio-dropdown .dropdown-toggle.vd-success.disabled, .csms-studio-dropdown .dropdown-toggle.vd-success:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-30p);
}
.csms-studio-dropdown .dropdown-toggle {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-form-control-padding-x-right: var(--csms-studio-form-control-padding-x);
}
.csms-studio-dropdown .dropdown-toggle-icon::after {
  content: "";
  display: none;
}
.csms-studio-dropdown hr {
  border-color: var(--csms-studio-bo-hierarchy-primary);
  margin: 1px 0;
  opacity: 1;
}

.dropdown-item {
  display: flex;
  align-items: center;
  --bs-dropdown-item-border-radius: 6px;
  --bs-dropdown-item-padding-y: 10px;
  --bs-dropdown-item-padding-x: 14px;
  --bs-dropdown-item-padding-x-right: 8px;
  --bs-dropdown-link-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-dropdown-link-hover-color: var(--csms-studio-tx-hierarchy-primary-subtle);
  --bs-dropdown-link-hover-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --bs-dropdown-link-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-dropdown-link-active-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --bs-dropdown-link-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-dropdown-link-negative-color: var(--csms-studio-tx-semantic-nega-primary);
  --csms-studio-dropdown-link-focus-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-dropdown-link-disabled-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-dropdown-link-bg: var(--csms-studio-bg-neutral-white);
  --csms-studio-dropdown-link-height: 40px;
  background-color: var(--csms-studio-dropdown-link-bg);
  min-height: var(--csms-studio-dropdown-link-height);
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x-right) var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.dropdown-item.hover, .dropdown-item:hover, .dropdown-item:focus-within {
  color: var(--bs-dropdown-link-hover-color);
  background-color: var(--bs-dropdown-link-hover-bg);
}
.dropdown-item.focus, .dropdown-item:focus {
  background-color: var(--csms-studio-dropdown-link-bg);
  color: var(--bs-dropdown-link-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-item.disabled, .dropdown-item:disabled {
  opacity: 0.4;
  font-style: inherit;
}
.dropdown-item.negative {
  color: var(--csms-studio-dropdown-link-negative-color);
}

.dropdown-item-icon .svg-menu {
  margin-left: auto;
  flex: 0 0 auto;
}
.dropdown-item-icon .svg-menu svg {
  width: var(--csms-studio-dropdown-item-icon-svg-select-size);
  height: var(--csms-studio-dropdown-item-icon-svg-select-size);
}
.dropdown-item-icon .svg-menu svg .svg-color[stroke] {
  stroke: var(--csms-studio-dropdown-item-icon-svg-menu-color);
}
.dropdown-item-icon .svg-menu svg .svg-color[fill] {
  fill: var(--csms-studio-dropdown-item-icon-svg-menu-color);
}
.dropdown-item-icon.focus, .dropdown-item-icon:focus {
  background-color: var(--csms-studio-dropdown-link-focus-bg);
}
.dropdown-item-icon.disabled, .dropdown-item-icon:disabled {
  background-color: var(--csms-studio-dropdown-link-disabled-bg);
}
.dropdown-item-icon.selected .svg-select {
  display: block;
}
.dropdown-item-icon .dropdown-item::after {
  display: none;
}

.dropdown-menu {
  --bs-dropdown-bg: var(--csms-studio-bg-neutral-white);
  --bs-dropdown-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --bs-dropdown-padding-x: 8px;
  --bs-dropdown-padding-y: 8px;
  --bs-dropdown-border-radius: 8px;
  --csms-studio-dropdown-item-title-padding-y: 4px;
  --csms-studio-dropdown-item-title-padding-x: 10px;
  --csms-studio-dropdown-item-title-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-dropdown-item-width: 100%;
  width: var(--csms-studio-dropdown-item-width);
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}
.dropdown-menu .dropdown-item-title {
  padding: var(--csms-studio-dropdown-item-title-padding-y) var(--csms-studio-dropdown-item-title-padding-x);
  color: var(--csms-studio-dropdown-item-title-color);
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}
.dropdown-menu > li + li,
.dropdown-menu > .dropdown-item + .dropdown-item {
  margin-top: 1px;
}
.dropdown-menu.dropdown-menu-160 {
  width: 160px;
}
.dropdown-menu.dropdown-menu-padding-lg {
  --bs-dropdown-padding-y: 12px;
}

.csms-studio-dropdown-xsm {
  --csms-studio-dropdown-item-icon-image-size: 24px;
  --csms-studio-dropdown-item-icon-svg-size: 18px;
  --csms-studio-dropdown-item-icon-svg-select-size: 16px;
}
.csms-studio-dropdown-xsm .dropdown-toggle {
  --csms-studio-form-control-height: 36px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  padding-top: 6px;
  padding-bottom: 6px;
}
.csms-studio-dropdown-xsm .dropdown-item {
  --bs-dropdown-item-padding-x: 10px;
  --bs-dropdown-item-padding-x-right: 8px;
  --bs-dropdown-item-padding-y: 6px;
  --csms-studio-dropdown-link-height: 36px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-dropdown-sm {
  --csms-studio-dropdown-item-icon-image-size: 24px;
  --csms-studio-dropdown-item-icon-svg-size: 18px;
  --csms-studio-dropdown-item-icon-svg-select-size: 16px;
}
.csms-studio-dropdown-sm .dropdown-toggle {
  --csms-studio-form-control-height: 40px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-dropdown-sm .dropdown-item {
  --bs-dropdown-item-padding-x: 10px;
  --bs-dropdown-item-padding-x-right: 8px;
  --bs-dropdown-item-padding-y: 6px;
  --csms-studio-dropdown-link-height: 40px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-dropdown-lg {
  --csms-studio-dropdown-item-icon-image-size: 28px;
  --csms-studio-dropdown-item-icon-svg-size: 22px;
  --csms-studio-dropdown-item-icon-svg-select-size: 20px;
}
.csms-studio-dropdown-lg .dropdown-toggle {
  --csms-studio-form-control-height: 48px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-dropdown-lg .dropdown-item {
  --csms-studio-dropdown-link-height: 48px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-dropdown-xlg {
  --csms-studio-dropdown-item-icon-image-size: 28px;
  --csms-studio-dropdown-item-icon-svg-size: 24px;
  --csms-studio-dropdown-item-icon-svg-select-size: 22px;
}
.csms-studio-dropdown-xlg .dropdown-toggle {
  --csms-studio-form-control-height: 52px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-dropdown-xlg .dropdown-item {
  --csms-studio-dropdown-link-height: 52px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

/*
.dropdown-submenu {
    .dropdown-menu > li:hover > .dropdown-submenu {
        display: block;
    }
}
*/
/* 2차 드롭다운 위치 조정 */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  bottom: 0;
  left: calc(100% + 5px);
  margin-top: -1px;
  display: none;
}
@media (max-width: 575.98px) {
  .dropdown-submenu > .dropdown-menu {
    left: 50px;
  }
}

/* hover 시 2차 메뉴 표시 */
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.csms-studio-chips {
  --csms-studio-chips-gap: 4px;
  --csms-studio-chips-svg-size: 16px;
  --csms-studio-chips-svg-color: transparent;
  --csms-studio-chips-font-weight: "medium";
  --csms-studio-chips-color: var(--csms-studio-tx-hierarchy-secondary);
  display: flex;
  align-items: center;
  gap: var(--csms-studio-chips-gap);
  flex-shrink: 0;
  color: var(--csms-studio-chips-color);
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-chips svg {
  width: var(--csms-studio-chips-svg-size);
  height: var(--csms-studio-chips-svg-size);
}
.csms-studio-chips svg .svg-color[stroke] {
  stroke: var(--csms-studio-chips-svg-color);
}
.csms-studio-chips svg .svg-color[fill] {
  fill: var(--csms-studio-chips-svg-color);
}
.csms-studio-chips.csms-studio-chips-dot {
  --csms-studio-chips-gap: 2px;
}

.csms-studio-chips-bg {
  display: flex;
  height: 24px;
  padding: 0 4px 0 2px;
  justify-content: center;
  align-items: center;
  gap: 2px;
  border-radius: var(--csms-studio-border-radius-8);
  background: var(--csms-studio-bg-neutral-w50p);
}

.csms-studio-chips-red {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-nega);
}

.csms-studio-chips-orange {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-prog);
}

.csms-studio-chips-yellow {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-warn-primary);
}

.csms-studio-chips-blue {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-info);
}

.csms-studio-chips-green {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-posi);
}

.csms-studio-chips-purple {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-etc);
}

.csms-studio-chips-gray-dark {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-tertiary);
}

.csms-studio-chips-gray-deep {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-quaternary);
}

.csms-studio-chips-gray {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-quinary);
}

.csms-studio-chips-gray-light {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-senary);
}

.csms-studio-chips-sm {
  --csms-studio-chips-svg-size: 14px;
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-chips-date.csms-studio-chips-sm {
  --csms-studio-chips-svg-size: 12px;
}

.csms-studio-chips-md {
  --csms-studio-chips-svg-size: 16px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-chips-date.csms-studio-chips-md {
  --csms-studio-chips-svg-size: 14px;
}

.csms-studio-chips-lg {
  --csms-studio-chips-svg-size: 20px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-chips-date.csms-studio-chips-lg {
  --csms-studio-chips-svg-size: 16px;
}

.csms-studio-chips-activity {
  --csms-studio-chips-activity-gap: 4px;
  --csms-studio-chips-activity-background: transparent;
  --csms-studio-chips-activity-padding: 4px 6px;
  --csms-studio-chips-activity-height: 24px;
  --csms-studio-chips-activity-border-radius: 4px;
  display: flex;
  align-items: center;
  gap: var(--csms-studio-chips-activity-gap);
  flex-shrink: 0;
  color: var(--csms-studio-tx-hierarchy-secondary);
  padding: var(--csms-studio-chips-activity-padding);
  height: var(--csms-studio-chips-activity-height);
  border-radius: var(--csms-studio-chips-activity-border-radius);
}
.csms-studio-chips-activity img {
  width: var(--csms-studio-chips-svg-size);
  height: var(--csms-studio-chips-svg-size);
}
.csms-studio-chips-activity.csms-studio-chips-activity-bg {
  background-color: var(--csms-studio-chips-activity-background);
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-chips-activity-forum {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-warn-quinary);
}

.csms-studio-chips-activity-quiz {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-nega-senary);
}

.csms-studio-chips-activity-assign {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-posi-senary);
}

.csms-studio-chips-activity-url {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-info-senary);
}

.csms-studio-chips-activity-ubfile {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-posi-senary);
}

.csms-studio-chips-activity-resource {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-posi-senary);
}

.csms-studio-chips-activity-vod {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-nega-senary);
}

.csms-studio-chips-activity-econtents {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-hierarchy-secondary);
}

.csms-studio-chips-activity-xncommons {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-info-senary);
}

.csms-studio-chips-activity-ubboard {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-prog-senary);
}

.csms-studio-chips-activity-feedback {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-etc-senary);
}

.csms-studio-chips-activity-zoom {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-info-senary);
}

.csms-studio-chips-activity-webexactivity {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-info-senary);
}

.csms-studio-chips-tag {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-chips-tag-gap: 4px;
  --csms-studio-chips-tag-background: transparent;
  --csms-studio-chips-tag-padding: 4px 8px;
  --csms-studio-chips-tag-border-radius: var(--csms-studio-border-radius-4);
  --csms-studio-chips-tag-height: 24px;
  --csms-studio-chips-tag-svg-color: var(--csms-studio-fg-semantic-posi);
  display: inline-flex;
  align-items: center;
  color: var(--csms-studio-tx-hierarchy-secondary);
  gap: var(--csms-studio-chips-tag-gap);
  background-color: var(--csms-studio-chips-tag-background);
  padding: var(--csms-studio-chips-tag-padding);
  border-radius: var(--csms-studio-chips-tag-border-radius);
  height: var(--csms-studio-chips-tag-height);
}
.csms-studio-chips-tag svg .svg-color[stroke] {
  stroke: var(--csms-studio-chips-tag-svg-color);
}
.csms-studio-chips-tag svg .svg-color[fill] {
  fill: var(--csms-studio-chips-tag-svg-color);
}
.csms-studio-chips-tag.csms-studio-chips-tag-red {
  --csms-studio-chips-tag-svg-color: var(--csms-studio-fg-semantic-nega);
}
.csms-studio-chips-tag.csms-studio-chips-tag-hyflex {
  color: var(--csms-studio-tx-semantic-info-tertiary);
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-info-quinary);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 5%; /* 0.6px */
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.csms-studio-chips-tag.csms-studio-chips-hyflex {
  --csms-studio-chips-tag-padding: 0;
  --csms-studio-chips-tag-background: none;
}

.csms-studio-chips-tag-blue {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-info-quinary);
}

.csms-studio-chips-tag-red {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-nega-quinary);
}

.csms-studio-chips-tag-green {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-posi-quinary);
}

.csms-studio-chips-tag-yellow {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-warn-quinary);
}

.csms-studio-chips-tag-purple {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-etc-quinary);
}

.csms-studio-chips-tag-gray {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-hierarchy-tertiary);
}

.csms-studio-chips-tag-time-1 {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-info-quinary);
}

.csms-studio-chips-tag-time-2 {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-posi-quinary);
}

.csms-studio-chips-tag-time-3 {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-warn-quinary);
}

.csms-studio-chips-tag-time-4 {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-etc-quinary);
}

.csms-studio-chips-date {
  --csms-studio-chips-svg-size: 14px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 5%; /* 0.6px */
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.csms-studio-chips-date-dday {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-chips-color: var(--csms-studio-tx-semantic-nega-primary);
  --csms-studio-label-font-weight: 700;
}

.csms-studio-chips-date-before {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-chips-color: var(--csms-studio-tx-hierarchy-quaternary);
}

.csms-studio-chips-date-ing {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-info);
  --csms-studio-chips-color: var(--csms-studio-tx-semantic-info-primary);
  text-decoration: none;
}

.csms-studio-chips-date-lateness {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-prog);
  --csms-studio-chips-color: var(--csms-studio-tx-semantic-prog-primary);
}

.csms-studio-chips-date-end {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-chips-color: var(--csms-studio-tx-hierarchy-secondary);
  text-decoration: none;
}

.pagination {
  --bs-pagination-padding-x: 0;
  --bs-pagination-padding-y: 0;
  --bs-pagination-color: var(--csms-studio-tx-hierarchy-quinary);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-width: 0;
  --bs-pagination-border-color: transparent;
  --bs-pagination-border-radius: 8px;
  --bs-pagination-hover-color: var(--csms-studio-tx-hierarchy-quinary);
  --bs-pagination-hover-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --bs-pagination-focus-color: var(--csms-studio-tx-hierarchy-quinary);
  --bs-pagination-focus-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --bs-pagination-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-pagination-active-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-pagination-disabled-color: var(--csms-studio-tx-hierarchy-senary);
  --bs-pagination-disabled-bg: transparent;
  --csms-studio-pagination-page-link-width: 32px;
  --csms-studio-pagination-page-link-height: 32px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0;
}
.pagination .page-link {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  width: var(--csms-studio-pagination-page-link-width);
  height: var(--csms-studio-pagination-page-link-height);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bs-pagination-border-radius);
}
.pagination .page-link:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.pagination .page-item:not(:first-child) .page-link {
  margin-left: 0;
}
.pagination .page-item-prev {
  margin-right: 4px;
}
.pagination .page-item-next {
  margin-left: 4px;
}

.short-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}
.short-pagination .page-info {
  display: flex;
  align-items: center;
  gap: 2px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quinary);
}
.short-pagination .page-info .current {
  color: var(--csms-studio-tx-hierarchy-tertiary);
}
.short-pagination .page-link:hover {
  border-color: var(--csms-studio-btn-icon-border-color);
}

.csms-studio-box-shadow-xsm {
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.csms-studio-box-shadow-sm {
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.csms-studio-box-shadow-md {
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}

.csms-studio-box-shadow-lg {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.csms-studio-box-shadow-xl {
  box-shadow: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-2xl {
  box-shadow: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-3xl {
  box-shadow: 0 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
}

/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

.csms-studio-heading-2xlg {
  --csms-studio-heading-font-weight: 700;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-xlg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 40px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 56px;
  margin-bottom: 0;
}

.csms-studio-heading-lg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 32px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 45px;
  margin-bottom: 0;
}

.csms-studio-heading-md {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 28px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-sm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm-semibold {
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-label-xlg-bold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-semibold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-medium {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-normal {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-bold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-semibold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-medium {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-normal {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-bold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-semibold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-medium {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-normal {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-bold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-semibold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-medium {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-normal {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-bold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-semibold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-medium {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-normal {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-bold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-semibold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-medium {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-normal {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-caption-lg {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-md {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-sm {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 10px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 12px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-csms-studio-icon {
  --csms-studio-btn-icon-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-svg-color: --csms-studio-fg-hierarchy-secondary;
  --csms-studio-btn-icon-svg-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--csms-studio-btn-icon-border-color);
  border-radius: var(--csms-studio-btn-icon-border-radius);
  background-color: var(--csms-studio-btn-icon-background-color);
  color: var(--csms-studio-btn-icon-svg-color);
  width: var(--csms-studio-btn-icon-size);
  height: var(--csms-studio-btn-icon-size);
  padding: 0;
}
.btn-csms-studio-icon.hover, .btn-csms-studio-icon:hover {
  background-color: var(--csms-studio-btn-icon-hover-background-color);
}
.btn-csms-studio-icon.focus, .btn-csms-studio-icon:focus {
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-icon.active, .btn-csms-studio-icon:active {
  background-color: var(--csms-studio-btn-icon-active-background-color);
}
.btn-csms-studio-icon:disabled, .btn-csms-studio-icon.disabled, .btn-csms-studio-icon[disabled=disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-csms-studio-icon:disabled:hover, .btn-csms-studio-icon:disabled.hover, .btn-csms-studio-icon.disabled:hover, .btn-csms-studio-icon.disabled.hover, .btn-csms-studio-icon[disabled=disabled]:hover, .btn-csms-studio-icon[disabled=disabled].hover {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.btn-csms-studio-icon:disabled:active, .btn-csms-studio-icon:disabled.active, .btn-csms-studio-icon.disabled:active, .btn-csms-studio-icon.disabled.active, .btn-csms-studio-icon[disabled=disabled]:active, .btn-csms-studio-icon[disabled=disabled].active {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.btn-csms-studio-icon svg {
  width: var(--csms-studio-btn-icon-svg-size);
  height: var(--csms-studio-btn-icon-svg-size);
}
.btn-csms-studio-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-svg-color);
}
.btn-csms-studio-icon svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-svg-color);
}

.btn-csms-studio-icon-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-primary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-neutral-white-solid);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-primary.focus, .btn-csms-studio-icon-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-icon-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-outline-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-coursemos-primary);
}

.btn-csms-studio-icon-outline-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}

.btn-csms-studio-icon-outline-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-coursemos-primary);
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.btn-csms-studio-icon-outline-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.btn-csms-studio-icon-nospace-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-nospace-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-neutral-b10p);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-quinary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-neutral-white-solid);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-senary-subtle);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-primary.disabled, .btn-csms-studio-icon-gray-primary:disabled {
  background-color: var(--csms-studio-bg-hierarchy-senary);
}
.btn-csms-studio-icon-gray-primary.focus, .btn-csms-studio-icon-gray-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-icon-gray-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bo-coursemos-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-quaternary.focus, .btn-csms-studio-icon-gray-quaternary:focus {
  background-color: var(--csms-studio-bg-coursemos-quinary);
}

.btn-csms-studio-icon-gray-outline-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}

.btn-csms-studio-icon-gray-outline-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover, .btn-csms-studio-icon-gray-outline-secondary:hover {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-secondary:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-secondary:hover svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.active, .btn-csms-studio-icon-gray-outline-secondary:active {
  color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-secondary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-secondary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-icon-gray-outline-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.btn-csms-studio-icon-gray-outline-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover, .btn-csms-studio-icon-gray-outline-quaternary:hover {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-quaternary:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-quaternary:hover svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active, .btn-csms-studio-icon-gray-outline-quaternary:active {
  color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-quaternary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-quaternary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-icon-gray-nospace-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-neutral-b6p-hovered);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-neutral-b15p);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-nospace-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover, .btn-csms-studio-icon-gray-nospace-secondary:hover, .btn-csms-studio-icon-gray-nospace-secondary.active, .btn-csms-studio-icon-gray-nospace-secondary:active {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary:hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary:hover svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-csms-studio-icon-gray-nospace-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-info-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-2xsm {
  --csms-studio-btn-icon-size: 20px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 12px;
}

.btn-csms-studio-icon-xsm {
  --csms-studio-btn-icon-size: 24px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 14px;
}

.btn-csms-studio-icon-sm {
  --csms-studio-btn-icon-size: 28px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 16px;
}

.btn-csms-studio-icon-md {
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 18px;
}

.btn-csms-studio-icon-lg {
  --csms-studio-btn-icon-size: 36px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 18px;
}

.btn-csms-studio-icon-xlg {
  --csms-studio-btn-icon-size: 40px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 20px;
}

.btn-csms-studio-icon-2xlg {
  --csms-studio-btn-icon-size: 48px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 24px;
}

.btn-csms-studio-svgicon {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-bg-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-svgicon-size-md: 16px;
  --csms-studio-btn-svgicon-size-lg: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon.hover, .btn-csms-studio-svgicon:hover {
  color: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.hover svg .svg-color[stroke], .btn-csms-studio-svgicon:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.hover svg .svg-color[fill], .btn-csms-studio-svgicon:hover svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.focus, .btn-csms-studio-svgicon:focus {
  color: var(--csms-studio-btn-svgicon-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon.active, .btn-csms-studio-svgicon:active {
  color: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon.active svg .svg-color[stroke], .btn-csms-studio-svgicon:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon.active svg .svg-color[fill], .btn-csms-studio-svgicon:active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon:disabled, .btn-csms-studio-svgicon.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-csms-studio-svgicon svg {
  width: var(--csms-studio-btn-svgicon-size-md);
  height: var(--csms-studio-btn-svgicon-size-md);
}

.btn-csms-studio-svgicon {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-tertiary);
}

.btn-csms-studio-svgicon-help {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active svg .svg-color[stroke], .btn-csms-studio-svgicon-help:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active svg .svg-color[fill], .btn-csms-studio-svgicon-help:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active, .btn-csms-studio-svgicon-help:active {
  background-color: var(--csms-studio-btn-svgicon-bg-color);
}

.btn-csms-studio-svgicon-eye {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-svgicon-eye.active svg .svg-color[stroke], .btn-csms-studio-svgicon-eye:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-svgicon-eye.active svg .svg-color[fill], .btn-csms-studio-svgicon-eye:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-svgicon-home {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home.active svg .svg-color[stroke], .btn-csms-studio-svgicon-home:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home.active svg .svg-color[fill], .btn-csms-studio-svgicon-home:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home svg {
  width: --csms-studio-btn-svgicon-size-lg;
  height: --csms-studio-btn-svgicon-size-lg;
}
.btn-csms-studio-svgicon-home {
  border-radius: 0 !important;
}

.btn-csms-studio-svgicon-circle {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle.hover, .btn-csms-studio-svgicon-circle:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle.focus, .btn-csms-studio-svgicon-circle:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle.active, .btn-csms-studio-svgicon-circle:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle:disabled, .btn-csms-studio-svgicon-circle.disabled {
  opacity: 0.4;
}

.btn-csms-studio-svgicon-circle-arrow {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle-arrow svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-arrow svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-arrow svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle-arrow.hover, .btn-csms-studio-svgicon-circle-arrow:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle-arrow.focus, .btn-csms-studio-svgicon-circle-arrow:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle-arrow.active, .btn-csms-studio-svgicon-circle-arrow:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle-arrow:disabled, .btn-csms-studio-svgicon-circle-arrow.disabled {
  opacity: 0.4;
}
.btn-csms-studio-svgicon-circle-arrow {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-circle-size: 36px;
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.btn-csms-studio-svgicon-circle-help {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle-help svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-help svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-help svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle-help.hover, .btn-csms-studio-svgicon-circle-help:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle-help.focus, .btn-csms-studio-svgicon-circle-help:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle-help.active, .btn-csms-studio-svgicon-circle-help:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle-help:disabled, .btn-csms-studio-svgicon-circle-help.disabled {
  opacity: 0.4;
}
.btn-csms-studio-svgicon-circle-help {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-size: 40px;
}

.btn-csms-studio-like {
  --csms-studio-btn-icon-like-padding-y: 10px;
  --csms-studio-btn-icon-like-padding-x: 16px;
  --csms-studio-btn-icon-like-padding-x-round: 20px;
  --csms-studio-btn-icon-like-background: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-icon-like-hover-background: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-icon-like-active-svg-color: #fd6d6d;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-btn-icon-like-background);
  padding: var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x) var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x-round);
  border-radius: var(--csms-studio-border-radius-full) 0 0 var(--csms-studio-border-radius-full);
}
.btn-csms-studio-like svg {
  width: 20px;
  height: 20px;
}
.btn-csms-studio-like svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-like svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-like {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-csms-studio-like.hover, .btn-csms-studio-like:hover {
  background: var(--csms-studio-btn-icon-like-hover-background);
}
.btn-csms-studio-like.focus, .btn-csms-studio-like:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-like.is-active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-like.is-active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-like.is-active svg .svg-thumb-bg {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}

.btn-csms-studio-dislike {
  --csms-studio-btn-icon-like-padding-y: 10px;
  --csms-studio-btn-icon-like-padding-x: 16px;
  --csms-studio-btn-icon-like-padding-x-round: 20px;
  --csms-studio-btn-icon-like-background: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-icon-like-hover-background: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-icon-like-active-svg-color: #fd6d6d;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-btn-icon-like-background);
  padding: var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x-round) var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x);
  border-radius: 0 var(--csms-studio-border-radius-full) var(--csms-studio-border-radius-full) 0;
}
.btn-csms-studio-dislike svg {
  width: 20px;
  height: 20px;
}
.btn-csms-studio-dislike svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-dislike svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-dislike {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-csms-studio-dislike.hover, .btn-csms-studio-dislike:hover {
  background: var(--csms-studio-btn-icon-like-hover-background);
}
.btn-csms-studio-dislike.focus, .btn-csms-studio-dislike:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-dislike.is-active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-dislike.is-active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-dislike.is-active svg .svg-thumb-bg {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}

.btn-csms-studio-like-container {
  display: flex;
  align-items: center;
}
.btn-csms-studio-like-container .btn-csms-studio-like + .btn-csms-studio-dislike {
  margin-left: -1px;
}

.csms-studio-box-shadow-xsm {
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.csms-studio-box-shadow-sm {
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.csms-studio-box-shadow-md {
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}

.csms-studio-box-shadow-lg {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.csms-studio-box-shadow-xl {
  box-shadow: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-2xl {
  box-shadow: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-3xl {
  box-shadow: 0 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
}

.alert {
  --csms-studio-alert-padding-y: 12px;
  --csms-studio-alert-padding-x: 16px;
  --csms-studio-alert-border-radius: var(--csms-studio-border-radius-8);
}
.alert .btn-close {
  margin-left: auto;
  flex-shrink: 0;
  --csms-studio-btn-icon-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-svg-color: --csms-studio-fg-hierarchy-secondary;
  --csms-studio-btn-icon-svg-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--csms-studio-btn-icon-border-color);
  border-radius: var(--csms-studio-btn-icon-border-radius);
  background-color: var(--csms-studio-btn-icon-background-color);
  color: var(--csms-studio-btn-icon-svg-color);
  width: var(--csms-studio-btn-icon-size);
  height: var(--csms-studio-btn-icon-size);
  padding: 0;
}
.alert .btn-close.hover, .alert .btn-close:hover {
  background-color: var(--csms-studio-btn-icon-hover-background-color);
}
.alert .btn-close.focus, .alert .btn-close:focus {
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.alert .btn-close.active, .alert .btn-close:active {
  background-color: var(--csms-studio-btn-icon-active-background-color);
}
.alert .btn-close:disabled, .alert .btn-close.disabled, .alert .btn-close[disabled=disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.alert .btn-close:disabled:hover, .alert .btn-close:disabled.hover, .alert .btn-close.disabled:hover, .alert .btn-close.disabled.hover, .alert .btn-close[disabled=disabled]:hover, .alert .btn-close[disabled=disabled].hover {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.alert .btn-close:disabled:active, .alert .btn-close:disabled.active, .alert .btn-close.disabled:active, .alert .btn-close.disabled.active, .alert .btn-close[disabled=disabled]:active, .alert .btn-close[disabled=disabled].active {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.alert .btn-close svg {
  width: var(--csms-studio-btn-icon-svg-size);
  height: var(--csms-studio-btn-icon-svg-size);
}
.alert .btn-close svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-svg-color);
}
.alert .btn-close svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-svg-color);
}
.alert .btn-close {
  --csms-studio-btn-icon-size: 28px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 16px;
  margin-top: 7px;
  margin-right: 7px;
}
.alert svg {
  width: 16px;
  height: 16px;
}
.alert {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.alert .description {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.alert.alert-warning {
  background-color: var(--csms-studio-bg-semantic-nega-senary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .btn-close {
  opacity: inherit;
}
.alert.alert-warning .btn-close.focus, .alert.alert-warning .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.alert.alert-warning .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.alert.alert-info, .alert.alert-guide {
  background-color: var(--csms-studio-bg-semantic-info-senary);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.alert.alert-info .svg-icon svg .svg-color[stroke], .alert.alert-guide .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-info);
}
.alert.alert-info .svg-icon svg .svg-color[fill], .alert.alert-guide .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-info);
}
.alert.alert-info .btn-close, .alert.alert-guide .btn-close {
  opacity: inherit;
}
.alert.alert-info .btn-close.focus, .alert.alert-info .btn-close:focus, .alert.alert-guide .btn-close.focus, .alert.alert-guide .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.alert.alert-info .btn-close, .alert.alert-guide .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.alert.alert-warning, .alert.alert-caution {
  background-color: var(--csms-studio-bg-semantic-warn-quinary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .svg-icon svg .svg-color[stroke], .alert.alert-caution .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-prog);
}
.alert.alert-warning .svg-icon svg .svg-color[fill], .alert.alert-caution .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-prog);
}
.alert.alert-warning .btn-close, .alert.alert-caution .btn-close {
  opacity: inherit;
}
.alert.alert-warning .btn-close.focus, .alert.alert-warning .btn-close:focus, .alert.alert-caution .btn-close.focus, .alert.alert-caution .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.alert.alert-warning .btn-close, .alert.alert-caution .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.alert.alert-danger {
  background-color: var(--csms-studio-bg-semantic-nega-senary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-danger .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-nega-quinary);
}
.alert.alert-danger .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-nega-quinary);
}
.alert.alert-danger .btn-close {
  opacity: inherit;
}
.alert.alert-danger .btn-close.focus, .alert.alert-danger .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}

.csms-studio-alert {
  --csms-studio-alert-gap: 4px;
  --csms-studio-alert-svg-color: var(--csms-studio-fg-semantic-info);
}
.csms-studio-alert .alert-content {
  display: flex;
  align-items: flex-start;
  gap: var(--csms-studio-alert-gap);
  min-height: 28px;
}
.csms-studio-alert .alert-content .svg-icon {
  margin-top: 4px;
  display: flex;
  align-self: flex-start;
  padding: 2px 0;
}
.csms-studio-alert .alert-content .svg-icon svg {
  width: 16px;
  height: 16px;
}
.csms-studio-alert .alert-content .alert-text {
  margin-top: 3.5px;
}
.csms-studio-alert .alert-content .btn-close {
  box-sizing: border-box;
  margin-top: 0;
  margin-right: 0;
}

.csms-studio-alert-header {
  --csms-studio-alert-gap: 8px;
  --bs-alert-padding-x: 24px;
  --bs-alert-bg: var(--csms-studio-bg-semantic-info-senary-subtle);
  --bs-alert-color: var(--csms-studio-tx-hierarchy-tertiary);
  margin-bottom: 24px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csms-studio-alert-header .alert-content {
  flex-wrap: wrap;
}
.csms-studio-alert-header .alert-content .svg-icon {
  margin-top: 6px;
}
.csms-studio-alert-header .alert-content .svg-icon svg {
  width: 18px;
  height: 18px;
}
.csms-studio-alert-header .alert-content .alert-text {
  margin-top: 5.5px;
}
.csms-studio-alert-header .alert-content .alert-button {
  margin-left: auto;
}
.csms-studio-alert-header .alert-content .btn-ghost {
  margin-top: 4px;
  color: var(--csms-studio-btn-color);
  font-weight: var(--csms-studio-caption-font-weight);
}
@media (max-width: 575.98px) {
  .csms-studio-alert-header .alert-content form {
    width: 100%;
    justify-content: flex-end;
  }
  .csms-studio-alert-header .alert-content .alert-button {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .csms-studio-alert-header .alert-content .btn-ghost {
    width: auto;
    margin: 0;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.csms-studio-toast-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.csms-studio-toast-container .toast {
  margin-bottom: 0;
}

.csms-studio-toast {
  --bs-toast-padding-x: 16px;
  --bs-toast-padding-y: 14px;
  --bs-toast-box-shadow: none;
  --bs-toast-max-width: 100%;
  --csms-studio-toast-border-top-left-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-border-top-right-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-border-bottom-left-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-border-bottom-right-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-body-min-height: 28px;
  --csms-studio-toast-icon-margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
  border: 0;
  border-radius: var(--csms-studio-toast-border-top-left-radius) var(--csms-studio-toast-border-top-right-radius) var(--csms-studio-toast-border-bottom-right-radius) var(--csms-studio-toast-border-bottom-left-radius);
  padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
}
.csms-studio-toast .toast-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  min-height: var(--csms-studio-toast-body-min-height);
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-toast .toast-body .svg-icon {
  align-self: flex-start;
}
.csms-studio-toast .toast-body .svg-icon svg {
  width: 20px;
  height: 20px;
}
.csms-studio-toast .toast-body .svg-icon {
  margin-top: var(--csms-studio-toast-icon-margin-top);
}
.csms-studio-toast .toast-body .toast-text {
  display: flex;
  align-items: center;
  gap: 4px 8px;
  flex-wrap: wrap;
}
.csms-studio-toast .btn-close {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: var(--csms-studio-toast-icon-margin-top);
}
.csms-studio-toast.csms-studio-toast-warning {
  background-color: var(--csms-studio-bg-semantic-nega-senary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-warning .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-warning .btn-close.focus, .csms-studio-toast.csms-studio-toast-warning .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-warning .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-nega);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-nega);
}
.csms-studio-toast.csms-studio-toast-guide {
  background-color: var(--csms-studio-bg-semantic-info-senary);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csms-studio-toast.csms-studio-toast-guide .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-info);
}
.csms-studio-toast.csms-studio-toast-guide .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-info);
}
.csms-studio-toast.csms-studio-toast-guide .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-guide .btn-close.focus, .csms-studio-toast.csms-studio-toast-guide .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-guide .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.csms-studio-toast.csms-studio-toast-caution {
  background-color: var(--csms-studio-bg-semantic-warn-quinary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-caution .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-prog);
}
.csms-studio-toast.csms-studio-toast-caution .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-prog);
}
.csms-studio-toast.csms-studio-toast-caution .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-caution .btn-close.focus, .csms-studio-toast.csms-studio-toast-caution .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-caution .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.csms-studio-toast.csms-studio-toast-success {
  background-color: var(--csms-studio-bg-semantic-posi-senary);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csms-studio-toast.csms-studio-toast-success .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-posi);
}
.csms-studio-toast.csms-studio-toast-success .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-posi);
}
.csms-studio-toast.csms-studio-toast-success .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-success .btn-close.focus, .csms-studio-toast.csms-studio-toast-success .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-success .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-posi-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-posi-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.csms-studio-toast-button {
  --csms-studio-toast-body-min-height: 44px;
  --csms-studio-toast-icon-margin-top: 10px;
}

.csms-studio-toast-slide-down {
  --csms-studio-toast-border-top-left-radius: 0;
  --csms-studio-toast-border-top-right-radius: 0;
  animation: slideDown 0.5s ease-in-out;
  margin-bottom: 1px;
}

.csms-studio-toast-slide-up {
  --csms-studio-toast-border-bottom-left-radius: 0;
  --csms-studio-toast-border-bottom-right-radius: 0;
  animation: slideUp 0.5s ease-in-out;
  margin-top: 1px;
}

.csms-studio-toast-default-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 760px;
  height: auto;
  padding: 14px 16px;
  box-sizing: border-box;
  border-bottom-right-radius: var(--csms-studio-border-radius-16);
  border-bottom-left-radius: var(--csms-studio-border-radius-16);
  z-index: 1000;
  margin: 0 auto;
}

.progress {
  --bs-progress-height: 8px;
  --bs-progress-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-progress-border-radius: var(--csms-studio-border-radius-full);
  --bs-progress-box-shadow: none;
  --bs-progress-bar-color: #fff;
  --bs-progress-bar-bg: var(--csms-studio-bg-semantic-prog-primary);
  --bs-progress-bar-transition: width 0.6s ease;
}
.progress .progress-bar {
  --bs-progress-bar-bg: var(--csms-studio-tx-semantic-prog-primary);
  border-radius: var(--csms-studio-border-radius-full);
  transition: width 0.3s ease-in-out;
  animation: animateBar 1.2s 1;
}
.progress .progress-striped {
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.progress-wrap span {
  flex: 0 0 auto;
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-semantic-prog-primary);
}
.progress-wrap .progress {
  flex: 1;
}

@keyframes animateBar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.form-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
  margin-bottom: 0;
  min-height: 24px;
}
.form-check .form-check-input {
  --bs-form-check-bg: var(--csms-studio-bg-neutral-white);
  --bs-border-width: 2px;
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-check-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-form-check-hover-border-color: var(--csms-studio-bo-hierarchy-quaternary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-info-primary);
  --csms-studio-form-check-checked-border-color: transparent;
  --csms-studio-form-check-checekd-hover-background-color: var(--csms-studio-bg-semantic-info-secondary);
  --csms-studio-form-check-checked-hover-border-color: transparent;
  --csms-studio-form-check-disabled-background-color: var(--csms-studio-bg-neutral-b10p);
  --csms-studio-form-check-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-check-background-size: auto;
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-info-30p);
  --bs-form-valid-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --bs-form-invalid-border-color: var(--csms-studio-bo-semantic-nega-primary);
  width: 20px;
  height: 20px;
  float: none;
  margin: 0;
  vertical-align: middle;
  filter: none;
}
.form-check .form-check-input[type=checkbox] {
  border-radius: 6px;
}
.form-check .form-check-input.hover, .form-check .form-check-input:hover, .form-check .form-check-input.active, .form-check .form-check-input:active {
  background-color: var(--csms-studio-form-check-hover-background-color);
  border-color: var(--csms-studio-form-check-hover-border-color);
}
.form-check .form-check-input.focus, .form-check .form-check-input:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.form-check .form-check-input.active, .form-check .form-check-input:active {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.form-check .form-check-input:checked {
  background-color: var(--csms-studio-form-check-checked-background-color);
  border-color: var(--csms-studio-form-check-checked-border-color);
  background-size: var(--csms-studio-form-check-background-size);
}
.form-check .form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,<svg width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path d=%27M5.06052 7.98144L5.04203 7.99994L0.423828 3.38174L1.92761 1.87796L5.06058 5.01094L10.0715 0L11.5753 1.50378L5.07908 8L5.06052 7.98144Z%27 fill=%27white%27/></svg>");
}
.form-check .form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,<svg width=%278%27 height=%278%27 viewBox=%270 0 8 8%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><rect width=%278%27 height=%278%27 rx=%274%27 fill=%27white%27/></svg>");
}
.form-check .form-check-input:checked.hover, .form-check .form-check-input:checked:hover, .form-check .form-check-input:checked.active, .form-check .form-check-input:checked:active {
  background-color: var(--csms-studio-form-check-checekd-hover-background-color);
  border-color: var(--csms-studio-form-check-checked-hover-border-color);
}
.form-check .form-check-input[disabled], .form-check .form-check-input:disabled {
  background-color: var(--csms-studio-form-check-disabled-background-color) !important;
  border-color: var(--csms-studio-form-check-disabled-border-color) !important;
  opacity: 50% !important;
}
.form-check .form-check-input[disabled]:checked, .form-check .form-check-input:disabled:checked {
  background-color: var(--csms-studio-form-check-checked-background-color) !important;
  border-color: var(--csms-studio-form-check-checked-border-color) !important;
}
.form-check .form-check-input[disabled] ~ .form-check-label, .form-check .form-check-input:disabled ~ .form-check-label {
  cursor: default;
  opacity: 50%;
}
.form-check .form-check-input[type=checkbox]:indeterminate {
  background-color: var(--csms-studio-form-check-checked-background-color);
  border-color: var(--csms-studio-form-check-checked-border-color);
  --bs-form-check-bg-image: url("data:image/svg+xml,<svg width=%2710%27 height=%273%27 viewBox=%270 0 10 3%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><rect y=%270.25%27 width=%2710%27 height=%272.4%27 fill=%27white%27/></svg>");
  background-size: auto;
}
.form-check .form-check-input[type=checkbox]:indeterminate.hover, .form-check .form-check-input[type=checkbox]:indeterminate:hover, .form-check .form-check-input[type=checkbox]:indeterminate.active, .form-check .form-check-input[type=checkbox]:indeterminate:active {
  --csms-studio-form-check-checekd-hover-background-color: var(--csms-studio-bg-semantic-info-secondary);
  --csms-studio-form-check-checked-hover-border-color: transparent;
}
.form-check .form-check-input.is-valid {
  --bs-border-color: var(--bs-form-valid-border-color);
  --csms-studio-form-check-hover-border-color: var(--csms-studio-bo-semantic-posi-secondary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-posi-primary);
  --csms-studio-form-check-checekd-hover-background-color: var(--csms-studio-bg-semantic-posi-secondary);
  --csms-studio-form-check-disabled-border-color: var(--bs-form-valid-border-color);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-posi-30p);
}
.form-check .form-check-input.is-invalid, .form-check .form-check-input.vd-error {
  --bs-border-color: var(--bs-form-invalid-border-color);
  --csms-studio-form-check-hover-border-color: var(--csms-studio-bo-semantic-nega-secondary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-nega-primary);
  --csms-studio-form-check-checekd-hover-background-color: var(--csms-studio-bg-semantic-nega-secondary);
  --csms-studio-form-check-disabled-border-color: var(--bs-form-invalid-border-color);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-nega-30p);
}
.form-check .form-check-label {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}

.form-switch {
  padding-left: 0;
}
.form-switch .form-check-input {
  --csms-studio-form-check-svg-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-form-check-hover-border-color: transparent;
  --csms-studio-form-check-hover-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-info-primary);
  --bs-border-width: 1px;
  --bs-border-color: transparent;
  --bs-form-valid-border-color: transparent;
  --bs-form-invalid-border-color: transparent;
  --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27><circle cx=%278%27 cy=%278%27 r=%278%27 fill=%27white%27/></svg>");
  background-position: 2px center;
  background-size: auto;
  background-color: var(--csms-studio-form-check-svg-background-color);
}
.form-switch .form-check-input::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  --csms-studio-input-switch-box-shadow-x: 1px;
  box-shadow: var(--csms-studio-input-switch-box-shadow-x) 0px 2px 1px var(--csms-studio-bg-neutral-b6p-hovered);
}
.form-switch .form-check-input {
  width: 36px;
  padding: 2px;
  margin-left: 0;
}
.form-switch .form-check-input[type=checkbox] {
  border-radius: 10px;
}
.form-switch .form-check-input.hover, .form-switch .form-check-input:hover, .form-switch .form-check-input.focus, .form-switch .form-check-input:focus, .form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27><circle cx=%278%27 cy=%278%27 r=%278%27 fill=%27white%27/></svg>");
}
.form-switch .form-check-input.focus, .form-switch .form-check-input:focus {
  border-color: var(--csms-studio-form-check-hover-border-color);
}
.form-switch .form-check-input.active, .form-switch .form-check-input:active {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.form-switch .form-check-input.active, .form-switch .form-check-input:active {
  background-color: var(--csms-studio-form-check-svg-background-color);
}
.form-switch .form-check-input:checked {
  background-position: right 2px center;
}
.form-switch .form-check-input:checked::after {
  position: relative;
  left: 16px;
  --csms-studio-input-switch-box-shadow-x: -1px;
}
.form-switch .form-check-input:checked[type=checkbox] {
  background-size: auto;
}
.form-switch .form-check-input.disabled, .form-switch .form-check-input:disabled {
  background-color: var(--csms-studio-form-check-svg-background-color) !important;
}
.form-switch .form-check-input.is-valid {
  --bs-border-color: transparent;
  --csms-studio-form-check-svg-background-color: var(--csms-studio-bg-semantic-posi-quinary);
  --csms-studio-form-check-hover-border-color: transparent;
  --csms-studio-form-check-hover-background-color: var(--csms-studio-bg-semantic-posi-quaternary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-posi-primary);
  --csms-studio-form-check-disabled-background-color: var(--csms-studio-bg-semantic-posi-primary);
}
.form-switch .form-check-input.is-invalid, .form-switch .form-check-input.vd-error {
  --bs-border-color: transparent;
  --csms-studio-form-check-svg-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-form-check-hover-border-color: transparent;
  --csms-studio-form-check-hover-background-color: var(--csms-studio-bg-semantic-nega-quaternary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-nega-primary);
  --csms-studio-form-check-disabled-background-color: var(--csms-studio-bg-semantic-nega-primary);
}

.form-switch-svg {
  position: relative;
}
.form-switch-svg .form-check-input {
  border-width: 0;
  background-image: none;
  transition: none;
}
.form-switch-svg .form-check-input::after {
  display: none;
}
.form-switch-svg .svg {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 4px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  transition: transform 0.15s ease-in-out;
  transform: translate(0, 0);
  --csms-studio-form-switch-svg-svg-color: transparent;
}
.form-switch-svg .svg .svg-color {
  fill: var(--csms-studio-form-switch-svg-svg-color);
}
.form-switch-svg .svg svg {
  position: static;
  width: inherit;
  height: inherit;
  border-radius: 0;
  transition: none;
  transform: none;
}
.form-switch-svg .form-check-input:checked ~ .svg {
  transform: translate(16px, 0);
  --csms-studio-form-switch-svg-svg-color: var(--csms-studio-fg-semantic-info);
}
.form-switch-svg .form-check-input:checked.is-valid ~ .svg {
  --csms-studio-form-switch-svg-svg-color: var(--csms-studio-fg-semantic-posi);
}
.form-switch-svg .form-check-input:checked.is-invalid ~ .svg, .form-switch-svg .form-check-input:checked.vd-error ~ .svg {
  --csms-studio-form-switch-svg-svg-color: var(--csms-studio-fg-semantic-nega);
}

.form-switch-editmode {
  --csms-studio-form-switch-editmode-width: 68px;
  --csms-studio-form-switch-editmode-height: 36px;
  --csms-studio-form-switch-svg-size: 40px;
}
.form-switch-editmode .form-check-input {
  --csms-studio-form-check-svg-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  width: var(--csms-studio-form-switch-editmode-width);
  height: var(--csms-studio-form-switch-editmode-height);
  padding: 0;
}
.form-switch-editmode .form-check-input[type=checkbox] {
  border-radius: 99px;
}
.form-switch-editmode .form-check-input:checked {
  background-color: var(--csms-studio-bg-coursemos-primary);
}
.form-switch-editmode .form-check-input:checked::after {
  left: 28px;
}
.form-switch-editmode .svg {
  width: var(--csms-studio-form-switch-svg-size);
  height: var(--csms-studio-form-switch-svg-size);
  border-radius: 999px;
  background-color: var(--csms-studio-bg-hierarchy-secondary);
  border: 1px solid var(--csms-studio-bo-hierarchy-tertiary);
  top: -2px;
  left: 0;
}
.form-switch-editmode .svg svg {
  width: 16px;
  height: 16px;
}
.form-switch-editmode .form-check-input:checked ~ .svg {
  transform: translate(28px, 0);
}
.form-switch-editmode svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.form-switch-editmode svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.form-switch-editmode.form-switch-editmode-sm {
  --csms-studio-form-switch-editmode-width: 64px;
  --csms-studio-form-switch-editmode-height: 32px;
  --csms-studio-form-switch-svg-size: 36px;
}

[data-bs-theme=light-red] {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-primary {
  color: #161819;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-quinary {
  color: #899199;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-white {
  color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-black {
  color: #000000;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-black-solid {
  color: #000000;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-primary {
  color: #8a130a;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-secondary {
  color: #6e0f08;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-tertiary {
  color: #530b06;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-quaternary {
  color: #f1afb6;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-quinary {
  color: #f8d7da;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-senary {
  color: #fbebed;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-primary-30p {
  color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-quaternary {
  color: #044890;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-quinary {
  color: #033973;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-white {
  border-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-black {
  border-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-primary {
  border-color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-secondary {
  border-color: #a5170c;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-tertiary {
  border-color: #8a130a;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-quaternary {
  border-color: #f1afb6;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-quinary {
  border-color: #f8d7da;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-senary {
  border-color: #f7e8ea;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-secondary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-tertiary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-quaternary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-quinary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-senary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-white {
  background-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-black {
  background-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-secondary {
  background-color: #1582FF;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-tertiary {
  background-color: #2F90FF;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-quaternary {
  background-color: #004696;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-quinary {
  background-color: #002F64;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-quinary-subtle {
  background-color: #001732;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-senary {
  background-color: #00234B;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-white {
  background-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-black {
  background-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-primary {
  background-color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-secondary {
  background-color: #dc1e11;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-tertiary {
  background-color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-quaternary {
  background-color: #e35f6d;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-quinary {
  background-color: #f8d7da;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-senary {
  background-color: #fbebed;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-nega {
  background-color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-info {
  background-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}
[data-bs-theme=light-red] .csms-studio-ut-school-primary {
  background-color: #a5170c;
}
[data-bs-theme=light-red] .csms-studio-ut-school-secondary {
  background-color: #ea8791;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}
[data-bs-theme=light-red] {
  --csms-studio-tx-hierarchy-primary: #161819;
  --csms-studio-tx-hierarchy-secondary: #2c2f32;
  --csms-studio-tx-hierarchy-tertiary: #575e64;
  --csms-studio-tx-hierarchy-quaternary: #6d767e;
  --csms-studio-tx-hierarchy-quinary: #899199;
  --csms-studio-tx-hierarchy-senary: #c4c8cc;
  --csms-studio-tx-hierarchy-senary-subtle: #e0e3e5;
  --csms-studio-tx-neutral-white: #ffffff;
  --csms-studio-tx-neutral-black: #000000;
  --csms-studio-tx-neutral-black-solid: #000000;
  --csms-studio-tx-neutral-white-solid: #ffffff;
  --csms-studio-tx-neutral-b20p-disabled: rgba(0, 0, 0, 0.2);
  --csms-studio-tx-neutral-w80p-disabled: rgba(255, 255, 255, 0.8);
  --csms-studio-tx-coursemos-primary: #8a130a;
  --csms-studio-tx-coursemos-secondary: #6e0f08;
  --csms-studio-tx-coursemos-tertiary: #530b06;
  --csms-studio-tx-coursemos-quaternary: #f1afb6;
  --csms-studio-tx-coursemos-quinary: #f8d7da;
  --csms-studio-tx-coursemos-senary: #fbebed;
  --csms-studio-tx-coursemos-primary-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-tx-semantic-nega-primary: #f04438;
  --csms-studio-tx-semantic-nega-secondary: #dc1e11;
  --csms-studio-tx-semantic-nega-tertiary: #c11a0e;
  --csms-studio-tx-semantic-nega-quaternary: #8a130a;
  --csms-studio-tx-semantic-nega-quinary: #530b06;
  --csms-studio-tx-semantic-nega-senary: #fbebed;
  --csms-studio-tx-semantic-info-primary: #1181f9;
  --csms-studio-tx-semantic-info-secondary: #0673e7;
  --csms-studio-tx-semantic-info-tertiary: #0564ca;
  --csms-studio-tx-semantic-info-quaternary: #044890;
  --csms-studio-tx-semantic-info-quinary: #033973;
  --csms-studio-tx-semantic-info-senary: #e0eefe;
  --csms-studio-tx-semantic-posi-primary: #1ea465;
  --csms-studio-tx-semantic-posi-secondary: #188351;
  --csms-studio-tx-semantic-posi-tertiary: #157347;
  --csms-studio-tx-semantic-posi-quaternary: #0f5233;
  --csms-studio-tx-semantic-posi-quinary: #09311e;
  --csms-studio-tx-semantic-posi-senary: #e4faf0;
  --csms-studio-tx-semantic-noti-primary: #ffc107;
  --csms-studio-tx-semantic-prog-primary: #fd7e14;
  --csms-studio-tx-semantic-etc-primary: #6f42c1;
  --csms-studio-bo-hierarchy-primary: #eeeff0;
  --csms-studio-bo-hierarchy-secondary: #e0e3e5;
  --csms-studio-bo-hierarchy-tertiary: #d3d6d9;
  --csms-studio-bo-hierarchy-quaternary: #c4c8cc;
  --csms-studio-bo-hierarchy-quaternary-subtle: #6d767e;
  --csms-studio-bo-hierarchy-quinary: #41474b;
  --csms-studio-bo-hierarchy-senary: #161819;
  --csms-studio-bo-neutral-white: #ffffff;
  --csms-studio-bo-neutral-black: #000000;
  --csms-studio-bo-neutral-white-solid: #ffffff;
  --csms-studio-bo-neutral-black-solid: #000000;
  --csms-studio-bo-neutral-b30p: rgba(0, 0, 0, 0.3);
  --csms-studio-bo-coursemos-primary: #c11a0e;
  --csms-studio-bo-coursemos-secondary: #a5170c;
  --csms-studio-bo-coursemos-tertiary: #8a130a;
  --csms-studio-bo-coursemos-quaternary: #f1afb6;
  --csms-studio-bo-coursemos-quinary: #f8d7da;
  --csms-studio-bo-coursemos-senary: #f7e8ea;
  --csms-studio-bo-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bo-semantic-nega-primary: #f04438;
  --csms-studio-bo-semantic-nega-secondary: #dc1e11;
  --csms-studio-bo-semantic-nega-tertiary: #c11a0e;
  --csms-studio-bo-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bo-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-bo-semantic-info-primary: #1181f9;
  --csms-studio-bo-semantic-info-secondary: #1181f9;
  --csms-studio-bo-semantic-info-tertiary: #1181f9;
  --csms-studio-bo-semantic-info-quaternary: #1181f9;
  --csms-studio-bo-semantic-info-quinary: #1181f9;
  --csms-studio-bo-semantic-info-senary: #1181f9;
  --csms-studio-bo-semantic-info-40p: rgba(17, 129, 249, 0.4);
  --csms-studio-bo-semantic-posi-primary: #1ea465;
  --csms-studio-bo-semantic-posi-secondary: #188351;
  --csms-studio-bo-semantic-posi-tertiary: #157347;
  --csms-studio-bo-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bo-semantic-warn-primary: #ffc107;
  --csms-studio-bo-semantic-noti-primary: #ffc107;
  --csms-studio-bo-semantic-prog-primary: #fd7e14;
  --csms-studio-bo-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-hierarchy-primary: #fcfcfc;
  --csms-studio-bg-hierarchy-primary-subtle: #f5f5f5;
  --csms-studio-bg-hierarchy-secondary: #f0f1f2;
  --csms-studio-bg-hierarchy-secondary-subtle: #eeeff0;
  --csms-studio-bg-hierarchy-tertiary: #e0e3e5;
  --csms-studio-bg-hierarchy-quaternary: #d3d6d9;
  --csms-studio-bg-hierarchy-quinary: #899199;
  --csms-studio-bg-hierarchy-senary: #6d767e;
  --csms-studio-bg-hierarchy-senary-subtle: #575e64;
  --csms-studio-bg-neutral-white: #ffffff;
  --csms-studio-bg-neutral-black: #000000;
  --csms-studio-bg-neutral-white-solid: #ffffff;
  --csms-studio-bg-neutral-black-solid: #000000;
  --csms-studio-bg-neutral-b6p-hovered: rgba(0, 0, 0, 0.06);
  --csms-studio-bg-neutral-b10p: rgba(0, 0, 0, 0.1);
  --csms-studio-bg-neutral-b15p: rgba(0, 0, 0, 0.15);
  --csms-studio-bg-neutral-b60p: rgba(0, 0, 0, 0.6);
  --csms-studio-bg-neutral-b80p: rgba(0, 0, 0, 0.8);
  --csms-studio-bg-neutral-w90p: rgba(255, 255, 255, 0.9);
  --csms-studio-bg-neutral-w50p: rgba(255, 255, 255, 0.5);
  --csms-studio-bg-neutral-w30p: rgba(255, 255, 255, 0.3);
  --csms-studio-bg-neutral-w20p: rgba(255, 255, 255, 0.2);
  --csms-studio-bg-neutral-w5p: rgba(255, 255, 255, 0.05);
  --csms-studio-bg-neutral-w1p: rgba(255, 255, 255, 0.01);
  --csms-studio-bg-coursemos-primary: #0075F8;
  --csms-studio-bg-coursemos-secondary: #1582FF;
  --csms-studio-bg-coursemos-tertiary: #2F90FF;
  --csms-studio-bg-coursemos-quaternary: #004696;
  --csms-studio-bg-coursemos-quinary: #002F64;
  --csms-studio-bg-coursemos-quinary-subtle: #001732;
  --csms-studio-bg-coursemos-senary: #00234B;
  --csms-studio-bg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bg-semantic-nega-primary: #f04438;
  --csms-studio-bg-semantic-nega-secondary: #dc1e11;
  --csms-studio-bg-semantic-nega-tertiary: #c11a0e;
  --csms-studio-bg-semantic-nega-quaternary: #ea8791;
  --csms-studio-bg-semantic-nega-quinary: #f8d7da;
  --csms-studio-bg-semantic-nega-senary: #fbebed;
  --csms-studio-bg-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bg-semantic-info-primary: #1181f9;
  --csms-studio-bg-semantic-info-secondary: #0564ca;
  --csms-studio-bg-semantic-info-tertiary: #0456ad;
  --csms-studio-bg-semantic-info-quaternary: #c0defd;
  --csms-studio-bg-semantic-info-quinary: #d5e9fe;
  --csms-studio-bg-semantic-info-senary: #e0eefe;
  --csms-studio-bg-semantic-info-senary-subtle: #eaf4fe;
  --csms-studio-bg-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bg-semantic-posi-primary: #1ea465;
  --csms-studio-bg-semantic-posi-secondary: #188351;
  --csms-studio-bg-semantic-posi-tertiary: #157347;
  --csms-studio-bg-semantic-posi-quaternary: #5fe2a5;
  --csms-studio-bg-semantic-posi-quinary: #caf5e1;
  --csms-studio-bg-semantic-posi-senary: #e4faf0;
  --csms-studio-bg-semantic-posi-30p: rgba(30, 164, 101, 0.3);
  --csms-studio-bg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-posi-50p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-warn-primary: #ffc107;
  --csms-studio-bg-semantic-warn-secondary: #d09c00;
  --csms-studio-bg-semantic-warn-tertiary: #9c7500;
  --csms-studio-bg-semantic-warn-quaternary: #ffda69;
  --csms-studio-bg-semantic-warn-quinary: #fff3cd;
  --csms-studio-bg-semantic-warn-senary: #fff9e6;
  --csms-studio-bg-semantic-prog-primary: #fd7e14;
  --csms-studio-bg-semantic-prog-secondary: #d54d03;
  --csms-studio-bg-semantic-prog-tertiary: #ba4303;
  --csms-studio-bg-semantic-prog-quaternary: #fda271;
  --csms-studio-bg-semantic-prog-quinary: #fee0d0;
  --csms-studio-bg-semantic-prog-senary: #fff0e7;
  --csms-studio-bg-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-semantic-etc-secondary: #58339d;
  --csms-studio-bg-semantic-etc-tertiary: #4d2d89;
  --csms-studio-bg-semantic-etc-quaternary: #a98eda;
  --csms-studio-bg-semantic-etc-quinary: #e2d9f3;
  --csms-studio-bg-semantic-etc-senary: #f1ecf9;
  --csms-studio-fg-hierarchy-primary: #161819;
  --csms-studio-fg-hierarchy-secondary: #2c2f32;
  --csms-studio-fg-hierarchy-tertiary: #575e64;
  --csms-studio-fg-hierarchy-quaternary: #6d767e;
  --csms-studio-fg-hierarchy-quinary: #899199;
  --csms-studio-fg-hierarchy-senary: #c4c8cc;
  --csms-studio-fg-hierarchy-senary-subtle: #e0e3e5;
  --csms-studio-fg-neutral-white: #ffffff;
  --csms-studio-fg-neutral-black: #000000;
  --csms-studio-fg-neutral-white-solid: #ffffff;
  --csms-studio-fg-neutral-black-solid: #000000;
  --csms-studio-fg-neutral-w50p-solid: rgba(255, 255, 255, 0.5);
  --csms-studio-fg-neutral-w80p-solid: rgba(255, 255, 255, 0.8);
  --csms-studio-fg-coursemos-primary: #f04438;
  --csms-studio-fg-coursemos-secondary: #dc1e11;
  --csms-studio-fg-coursemos-tertiary: #c11a0e;
  --csms-studio-fg-coursemos-quaternary: #e35f6d;
  --csms-studio-fg-coursemos-quinary: #f8d7da;
  --csms-studio-fg-coursemos-senary: #fbebed;
  --csms-studio-fg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-fg-coursemos-primary-50p: rgba(0, 117, 248, 0.5);
  --csms-studio-fg-semantic-nega: #f04438;
  --csms-studio-fg-semantic-nega-quinary: #530b06;
  --csms-studio-fg-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-warn-primary: #ffc107;
  --csms-studio-fg-semantic-warn-senary: #ffda69;
  --csms-studio-fg-semantic-posi: #1ea465;
  --csms-studio-fg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-fg-semantic-info: #1181f9;
  --csms-studio-fg-semantic-prog: #fd7e14;
  --csms-studio-fg-semantic-etc: #6f42c1;
  --csms-studio-ut-school-primary: #a5170c;
  --csms-studio-ut-school-secondary: #ea8791;
}

[data-bs-theme=dark] {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-primary {
  color: #e0e3e5;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-secondary {
  color: #c4c8cc;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-tertiary {
  color: #899199;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-quinary {
  color: #575e64;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-senary {
  color: #41474b;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-senary-subtle {
  color: #2c2f32;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-white {
  color: #000000;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-black {
  color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-black-solid {
  color: #000000;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-b20p-disabled {
  color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark] .csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-primary {
  color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-secondary {
  color: #2F90FF;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-tertiary {
  color: #499EFF;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-quaternary {
  color: #004696;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-quinary {
  color: #002F64;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-senary {
  color: #00234B;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 93, 200, 0.4);
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-secondary {
  color: #e35f6d;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-tertiary {
  color: #e6737f;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-quaternary {
  color: #c11a0e;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-quinary {
  color: #8a130a;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-senary {
  color: #530b06;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-primary {
  color: #439cfa;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-secondary {
  color: #58a7fb;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-tertiary {
  color: #6db2fb;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-quaternary {
  color: #044890;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-quinary {
  color: #033973;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-senary {
  color: #022b57;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-secondary {
  color: #29d886;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-tertiary {
  color: #44dd95;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-quaternary {
  color: #157347;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-quinary {
  color: #0f5233;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-senary {
  color: #09311e;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-primary {
  border-color: #1f2124;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-secondary {
  border-color: #2c2f32;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-tertiary {
  border-color: #373b3f;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-quaternary {
  border-color: #41474b;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-quinary {
  border-color: #a7adb2;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-senary {
  border-color: #e0e3e5;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-white {
  border-color: #000000;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-black {
  border-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-b30p {
  border-color: rgba(255, 255, 255, 0.3);
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-secondary {
  border-color: #2F90FF;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-tertiary {
  border-color: #499EFF;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-quaternary {
  border-color: #003A7D;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-quinary {
  border-color: #00234B;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-senary {
  border-color: #001732;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-secondary {
  border-color: #e35f6d;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-tertiary {
  border-color: #e6737f;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-primary {
  border-color: #439cfa;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-secondary {
  border-color: #58a7fb;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-tertiary {
  border-color: #6db2fb;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-quaternary {
  border-color: #044890;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-quinary {
  border-color: #033973;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-senary {
  border-color: #022b57;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-posi-secondary {
  border-color: #29d886;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-posi-tertiary {
  border-color: #44dd95;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-primary {
  background-color: #0b0c0d;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-primary-subtle {
  background-color: #1f2124;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-secondary {
  background-color: #212326;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #232629;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-tertiary {
  background-color: #2c2f32;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-quaternary {
  background-color: #373b3f;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-quinary {
  background-color: #575e64;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-senary-subtle {
  background-color: #899199;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-white {
  background-color: #000000;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-black {
  background-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(255, 255, 255, 0.06);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b10p {
  background-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b15p {
  background-color: rgba(255, 255, 255, 0.15);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b60p {
  background-color: rgba(255, 255, 255, 0.6);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b80p {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w90p {
  background-color: rgba(0, 0, 0, 0.85);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w50p {
  background-color: rgba(0, 0, 0, 0.5);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w30p {
  background-color: rgba(0, 0, 0, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w20p {
  background-color: rgba(0, 0, 0, 0.2);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w5p {
  background-color: rgba(0, 0, 0, 0.05);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w1p {
  background-color: rgba(0, 0, 0, 0.01);
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-secondary {
  background-color: #1582FF;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-tertiary {
  background-color: #2F90FF;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-quaternary {
  background-color: #004696;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-quinary {
  background-color: #002F64;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-quinary-subtle {
  background-color: #001732;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-senary {
  background-color: #00234B;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-secondary {
  background-color: #e35f6d;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-tertiary {
  background-color: #e6737f;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-quaternary {
  background-color: #a5170c;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-quinary {
  background-color: #6e0f08;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-senary {
  background-color: #530b06;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-tertiary {
  background-color: #82bdfc;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-quaternary {
  background-color: #044890;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-quinary {
  background-color: #022b57;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-senary {
  background-color: #011d3a;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-senary-subtle {
  background-color: #010e1d;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-secondary {
  background-color: #29d886;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-tertiary {
  background-color: #44dd95;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-quaternary {
  background-color: #12623d;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-quinary {
  background-color: #0c4229;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-senary {
  background-color: #09311e;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.5);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-secondary {
  background-color: #ffcd37;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-tertiary {
  background-color: #ffda69;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-quaternary {
  background-color: #9c7500;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-quinary {
  background-color: #684e00;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #826200;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-senary {
  background-color: #4e3b00;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-secondary {
  background-color: #fc8342;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-tertiary {
  background-color: #fc935a;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-quaternary {
  background-color: #a03902;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-quinary {
  background-color: #6a2602;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-senary {
  background-color: #501d01;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-secondary {
  background-color: #8c68ce;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-tertiary {
  background-color: #9a7bd4;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-quaternary {
  background-color: #422676;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-quinary {
  background-color: #2c194f;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-senary {
  background-color: #21133b;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-primary {
  background-color: #e0e3e5;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-secondary {
  background-color: #c4c8cc;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-tertiary {
  background-color: #899199;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-quinary {
  background-color: #575e64;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-senary {
  background-color: #2c2f32;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-senary-subtle {
  background-color: #161819;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-white {
  background-color: #000000;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-black {
  background-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}
[data-bs-theme=dark] .csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-secondary {
  background-color: #2F90FF;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-tertiary {
  background-color: #499EFF;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-quaternary {
  background-color: #005DC8;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-quinary {
  background-color: #002F64;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-senary {
  background-color: #00234B;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}
[data-bs-theme=dark] .csms-studio-fg-semantic-nega {
  background-color: #f04438;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-nega-quinary {
  background-color: #8a130a;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark] .csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-warn-senary {
  background-color: #9c7500;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark] .csms-studio-fg-semantic-info {
  background-color: #1181f9;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}
[data-bs-theme=dark] .csms-studio-ut-school-primary {
  background-color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-ut-school-secondary {
  background-color: #005DC8;
}
[data-bs-theme=dark] .csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}
[data-bs-theme=dark] .csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}
[data-bs-theme=dark] .csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}
[data-bs-theme=dark] .csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}
[data-bs-theme=dark] .csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}
[data-bs-theme=dark] .csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}
[data-bs-theme=dark] .csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}
[data-bs-theme=dark] {
  --csms-studio-tx-hierarchy-primary: #e0e3e5;
  --csms-studio-tx-hierarchy-secondary: #c4c8cc;
  --csms-studio-tx-hierarchy-tertiary: #899199;
  --csms-studio-tx-hierarchy-quaternary: #6d767e;
  --csms-studio-tx-hierarchy-quinary: #575e64;
  --csms-studio-tx-hierarchy-senary: #41474b;
  --csms-studio-tx-hierarchy-senary-subtle: #2c2f32;
  --csms-studio-tx-neutral-white: #000000;
  --csms-studio-tx-neutral-black: #ffffff;
  --csms-studio-tx-neutral-black-solid: #000000;
  --csms-studio-tx-neutral-white-solid: #ffffff;
  --csms-studio-tx-neutral-b20p-disabled: rgba(255, 255, 255, 0.2);
  --csms-studio-tx-neutral-w80p-disabled: rgba(255, 255, 255, 0.2);
  --csms-studio-tx-coursemos-primary: #0075F8;
  --csms-studio-tx-coursemos-secondary: #2F90FF;
  --csms-studio-tx-coursemos-tertiary: #499EFF;
  --csms-studio-tx-coursemos-quaternary: #004696;
  --csms-studio-tx-coursemos-quinary: #002F64;
  --csms-studio-tx-coursemos-senary: #00234B;
  --csms-studio-tx-coursemos-primary-30p: rgba(0, 93, 200, 0.4);
  --csms-studio-tx-semantic-nega-primary: #f04438;
  --csms-studio-tx-semantic-nega-secondary: #e35f6d;
  --csms-studio-tx-semantic-nega-tertiary: #e6737f;
  --csms-studio-tx-semantic-nega-quaternary: #c11a0e;
  --csms-studio-tx-semantic-nega-quinary: #8a130a;
  --csms-studio-tx-semantic-nega-senary: #530b06;
  --csms-studio-tx-semantic-info-primary: #439cfa;
  --csms-studio-tx-semantic-info-secondary: #58a7fb;
  --csms-studio-tx-semantic-info-tertiary: #6db2fb;
  --csms-studio-tx-semantic-info-quaternary: #044890;
  --csms-studio-tx-semantic-info-quinary: #033973;
  --csms-studio-tx-semantic-info-senary: #022b57;
  --csms-studio-tx-semantic-posi-primary: #1ea465;
  --csms-studio-tx-semantic-posi-secondary: #29d886;
  --csms-studio-tx-semantic-posi-tertiary: #44dd95;
  --csms-studio-tx-semantic-posi-quaternary: #157347;
  --csms-studio-tx-semantic-posi-quinary: #0f5233;
  --csms-studio-tx-semantic-posi-senary: #09311e;
  --csms-studio-tx-semantic-noti-primary: #ffc107;
  --csms-studio-tx-semantic-prog-primary: #fd7e14;
  --csms-studio-tx-semantic-etc-primary: #6f42c1;
  --csms-studio-bo-hierarchy-primary: #1f2124;
  --csms-studio-bo-hierarchy-secondary: #2c2f32;
  --csms-studio-bo-hierarchy-tertiary: #373b3f;
  --csms-studio-bo-hierarchy-quaternary: #41474b;
  --csms-studio-bo-hierarchy-quaternary-subtle: #6d767e;
  --csms-studio-bo-hierarchy-quinary: #a7adb2;
  --csms-studio-bo-hierarchy-senary: #e0e3e5;
  --csms-studio-bo-neutral-white: #000000;
  --csms-studio-bo-neutral-black: #ffffff;
  --csms-studio-bo-neutral-white-solid: #ffffff;
  --csms-studio-bo-neutral-black-solid: #000000;
  --csms-studio-bo-neutral-b30p: rgba(255, 255, 255, 0.3);
  --csms-studio-bo-coursemos-primary: #0075F8;
  --csms-studio-bo-coursemos-secondary: #2F90FF;
  --csms-studio-bo-coursemos-tertiary: #499EFF;
  --csms-studio-bo-coursemos-quaternary: #003A7D;
  --csms-studio-bo-coursemos-quinary: #00234B;
  --csms-studio-bo-coursemos-senary: #001732;
  --csms-studio-bo-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bo-semantic-nega-primary: #f04438;
  --csms-studio-bo-semantic-nega-secondary: #e35f6d;
  --csms-studio-bo-semantic-nega-tertiary: #e6737f;
  --csms-studio-bo-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bo-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-bo-semantic-info-primary: #439cfa;
  --csms-studio-bo-semantic-info-secondary: #58a7fb;
  --csms-studio-bo-semantic-info-tertiary: #6db2fb;
  --csms-studio-bo-semantic-info-quaternary: #044890;
  --csms-studio-bo-semantic-info-quinary: #033973;
  --csms-studio-bo-semantic-info-senary: #022b57;
  --csms-studio-bo-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bo-semantic-info-40p: rgba(17, 129, 249, 0.4);
  --csms-studio-bo-semantic-posi-primary: #1ea465;
  --csms-studio-bo-semantic-posi-secondary: #29d886;
  --csms-studio-bo-semantic-posi-tertiary: #44dd95;
  --csms-studio-bo-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bo-semantic-warn-primary: #ffc107;
  --csms-studio-bo-semantic-noti-primary: #ffc107;
  --csms-studio-bo-semantic-prog-primary: #fd7e14;
  --csms-studio-bo-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-hierarchy-primary: #0b0c0d;
  --csms-studio-bg-hierarchy-primary-subtle: #1f2124;
  --csms-studio-bg-hierarchy-secondary: #212326;
  --csms-studio-bg-hierarchy-secondary-subtle: #232629;
  --csms-studio-bg-hierarchy-tertiary: #2c2f32;
  --csms-studio-bg-hierarchy-quaternary: #373b3f;
  --csms-studio-bg-hierarchy-quinary: #575e64;
  --csms-studio-bg-hierarchy-senary: #6d767e;
  --csms-studio-bg-hierarchy-senary-subtle: #899199;
  --csms-studio-bg-neutral-white: #000000;
  --csms-studio-bg-neutral-black: #ffffff;
  --csms-studio-bg-neutral-white-solid: #ffffff;
  --csms-studio-bg-neutral-black-solid: #000000;
  --csms-studio-bg-neutral-b6p-hovered: rgba(255, 255, 255, 0.06);
  --csms-studio-bg-neutral-b10p: rgba(255, 255, 255, 0.1);
  --csms-studio-bg-neutral-b15p: rgba(255, 255, 255, 0.15);
  --csms-studio-bg-neutral-b60p: rgba(255, 255, 255, 0.6);
  --csms-studio-bg-neutral-b80p: rgba(255, 255, 255, 0.8);
  --csms-studio-bg-neutral-w90p: rgba(0, 0, 0, 0.85);
  --csms-studio-bg-neutral-w50p: rgba(0, 0, 0, 0.5);
  --csms-studio-bg-neutral-w30p: rgba(0, 0, 0, 0.3);
  --csms-studio-bg-neutral-w20p: rgba(0, 0, 0, 0.2);
  --csms-studio-bg-neutral-w5p: rgba(0, 0, 0, 0.05);
  --csms-studio-bg-neutral-w1p: rgba(0, 0, 0, 0.01);
  --csms-studio-bg-coursemos-primary: #0075F8;
  --csms-studio-bg-coursemos-secondary: #1582FF;
  --csms-studio-bg-coursemos-tertiary: #2F90FF;
  --csms-studio-bg-coursemos-quaternary: #004696;
  --csms-studio-bg-coursemos-quinary: #002F64;
  --csms-studio-bg-coursemos-quinary-subtle: #001732;
  --csms-studio-bg-coursemos-senary: #00234B;
  --csms-studio-bg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bg-semantic-nega-primary: #f04438;
  --csms-studio-bg-semantic-nega-secondary: #e35f6d;
  --csms-studio-bg-semantic-nega-tertiary: #e6737f;
  --csms-studio-bg-semantic-nega-quaternary: #a5170c;
  --csms-studio-bg-semantic-nega-quinary: #6e0f08;
  --csms-studio-bg-semantic-nega-senary: #530b06;
  --csms-studio-bg-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bg-semantic-info-primary: #1181f9;
  --csms-studio-bg-semantic-info-secondary: #6db2fb;
  --csms-studio-bg-semantic-info-tertiary: #82bdfc;
  --csms-studio-bg-semantic-info-quaternary: #044890;
  --csms-studio-bg-semantic-info-quinary: #022b57;
  --csms-studio-bg-semantic-info-senary: #011d3a;
  --csms-studio-bg-semantic-info-senary-subtle: #010e1d;
  --csms-studio-bg-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bg-semantic-posi-primary: #1ea465;
  --csms-studio-bg-semantic-posi-secondary: #29d886;
  --csms-studio-bg-semantic-posi-tertiary: #44dd95;
  --csms-studio-bg-semantic-posi-quaternary: #12623d;
  --csms-studio-bg-semantic-posi-quinary: #0c4229;
  --csms-studio-bg-semantic-posi-senary: #09311e;
  --csms-studio-bg-semantic-posi-30p: rgba(30, 164, 101, 0.3);
  --csms-studio-bg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-posi-50p: rgba(30, 164, 101, 0.5);
  --csms-studio-bg-semantic-warn-primary: #ffc107;
  --csms-studio-bg-semantic-warn-secondary: #ffcd37;
  --csms-studio-bg-semantic-warn-tertiary: #ffda69;
  --csms-studio-bg-semantic-warn-quaternary: #9c7500;
  --csms-studio-bg-semantic-warn-quinary: #684e00;
  --csms-studio-bg-semantic-warn-quinary-subtle: #826200;
  --csms-studio-bg-semantic-warn-senary: #4e3b00;
  --csms-studio-bg-semantic-prog-primary: #fd7e14;
  --csms-studio-bg-semantic-prog-secondary: #fc8342;
  --csms-studio-bg-semantic-prog-tertiary: #fc935a;
  --csms-studio-bg-semantic-prog-quaternary: #a03902;
  --csms-studio-bg-semantic-prog-quinary: #6a2602;
  --csms-studio-bg-semantic-prog-senary: #501d01;
  --csms-studio-bg-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-semantic-etc-secondary: #8c68ce;
  --csms-studio-bg-semantic-etc-tertiary: #9a7bd4;
  --csms-studio-bg-semantic-etc-quaternary: #422676;
  --csms-studio-bg-semantic-etc-quinary: #2c194f;
  --csms-studio-bg-semantic-etc-senary: #21133b;
  --csms-studio-fg-hierarchy-primary: #e0e3e5;
  --csms-studio-fg-hierarchy-secondary: #c4c8cc;
  --csms-studio-fg-hierarchy-tertiary: #899199;
  --csms-studio-fg-hierarchy-quaternary: #6d767e;
  --csms-studio-fg-hierarchy-quinary: #575e64;
  --csms-studio-fg-hierarchy-senary: #2c2f32;
  --csms-studio-fg-hierarchy-senary-subtle: #161819;
  --csms-studio-fg-neutral-white: #000000;
  --csms-studio-fg-neutral-black: #ffffff;
  --csms-studio-fg-neutral-white-solid: #ffffff;
  --csms-studio-fg-neutral-black-solid: #000000;
  --csms-studio-fg-neutral-w50p-solid: rgba(255, 255, 255, 0.5);
  --csms-studio-fg-neutral-w80p-solid: rgba(255, 255, 255, 0.8);
  --csms-studio-fg-coursemos-primary: #0075F8;
  --csms-studio-fg-coursemos-secondary: #2F90FF;
  --csms-studio-fg-coursemos-tertiary: #499EFF;
  --csms-studio-fg-coursemos-quaternary: #005DC8;
  --csms-studio-fg-coursemos-quinary: #002F64;
  --csms-studio-fg-coursemos-senary: #00234B;
  --csms-studio-fg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-fg-coursemos-primary-50p: rgba(0, 117, 248, 0.5);
  --csms-studio-fg-semantic-nega: #f04438;
  --csms-studio-fg-semantic-nega-quinary: #8a130a;
  --csms-studio-fg-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-warn-primary: #ffc107;
  --csms-studio-fg-semantic-warn-senary: #9c7500;
  --csms-studio-fg-semantic-posi: #1ea465;
  --csms-studio-fg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-fg-semantic-info: #1181f9;
  --csms-studio-fg-semantic-prog: #fd7e14;
  --csms-studio-fg-semantic-etc: #6f42c1;
  --csms-studio-ut-school-primary: #0075F8;
  --csms-studio-ut-school-secondary: #005DC8;
}

[data-bs-theme=dark-red] {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  --bs-body-color: #adb5bd;
  --bs-body-color-rgb: 173, 181, 189;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(255, 255, 255, 0.75);
  --bs-secondary-color-rgb: 255, 255, 255;
  --bs-secondary-bg: rgba(255, 255, 255, 0.15);
  --bs-secondary-bg-rgb: 255, 255, 255;
  --bs-tertiary-color: rgba(255, 255, 255, 0.5);
  --bs-tertiary-color-rgb: 255, 255, 255;
  --bs-tertiary-bg: rgba(255, 255, 255, 0.1);
  --bs-tertiary-bg-rgb: 255, 255, 255;
  --bs-heading-color: #fff;
  --bs-link-color: #86b7fe;
  --bs-link-hover-color: #9ec5fe;
  --bs-link-color-rgb: 134, 183, 254;
  --bs-link-hover-color-rgb: 158, 197, 254;
  --bs-code-color: #e685b5;
  --bs-highlight-color: #fff;
  --bs-highlight-bg: #664d03;
  --bs-border-color: rgba(255, 255, 255, 0.2);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-primary {
  color: #e0e3e5;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-secondary {
  color: #c4c8cc;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-tertiary {
  color: #899199;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-quinary {
  color: #575e64;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-senary {
  color: #41474b;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-senary-subtle {
  color: #2c2f32;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-white {
  color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-black {
  color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-black-solid {
  color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-b20p-disabled {
  color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-primary {
  color: #ed9ba4;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-secondary {
  color: #f1afb6;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-tertiary {
  color: #f4c3c8;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-quaternary {
  color: #6e0f08;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-quinary {
  color: #370804;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-senary {
  color: #290603;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-primary-30p {
  color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-secondary {
  color: #e35f6d;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-tertiary {
  color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-quaternary {
  color: #c11a0e;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-quinary {
  color: #8a130a;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-senary {
  color: #530b06;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-primary {
  color: #439cfa;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-secondary {
  color: #58a7fb;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-tertiary {
  color: #6db2fb;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-quaternary {
  color: #044890;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-quinary {
  color: #033973;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-senary {
  color: #022b57;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-secondary {
  color: #29d886;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-tertiary {
  color: #44dd95;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-quaternary {
  color: #157347;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-quinary {
  color: #0f5233;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-senary {
  color: #09311e;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-primary {
  border-color: #1f2124;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-secondary {
  border-color: #2c2f32;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-tertiary {
  border-color: #373b3f;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-quaternary {
  border-color: #41474b;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-quinary {
  border-color: #a7adb2;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-senary {
  border-color: #e0e3e5;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-white {
  border-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-black {
  border-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-b30p {
  border-color: rgba(255, 255, 255, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-primary {
  border-color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-secondary {
  border-color: #ea8791;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-tertiary {
  border-color: #ed9ba4;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-quaternary {
  border-color: #6e0f08;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-quinary {
  border-color: #370804;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-senary {
  border-color: #290603;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-secondary {
  border-color: #e35f6d;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-tertiary {
  border-color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-primary {
  border-color: #439cfa;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-secondary {
  border-color: #58a7fb;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-tertiary {
  border-color: #6db2fb;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-quaternary {
  border-color: #044890;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-quinary {
  border-color: #033973;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-senary {
  border-color: #022b57;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-posi-secondary {
  border-color: #29d886;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-posi-tertiary {
  border-color: #44dd95;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-primary {
  background-color: #0b0c0d;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-primary-subtle {
  background-color: #1f2124;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-secondary {
  background-color: #212326;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #232629;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-tertiary {
  background-color: #2c2f32;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-quaternary {
  background-color: #373b3f;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-quinary {
  background-color: #575e64;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-senary-subtle {
  background-color: #899199;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-white {
  background-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-black {
  background-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(255, 255, 255, 0.06);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b10p {
  background-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b15p {
  background-color: rgba(255, 255, 255, 0.15);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b60p {
  background-color: rgba(255, 255, 255, 0.6);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b80p {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w90p {
  background-color: rgba(0, 0, 0, 0.85);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w50p {
  background-color: rgba(0, 0, 0, 0.5);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w30p {
  background-color: rgba(0, 0, 0, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w20p {
  background-color: rgba(0, 0, 0, 0.2);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w5p {
  background-color: rgba(0, 0, 0, 0.05);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w1p {
  background-color: rgba(0, 0, 0, 0.01);
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-secondary {
  background-color: #1582FF;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-tertiary {
  background-color: #2F90FF;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-quaternary {
  background-color: #004696;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-quinary {
  background-color: #002F64;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-quinary-subtle {
  background-color: #001732;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-senary {
  background-color: #00234B;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-secondary {
  background-color: #e35f6d;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-tertiary {
  background-color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-quaternary {
  background-color: #a5170c;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-quinary {
  background-color: #6e0f08;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-senary {
  background-color: #530b06;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-primary {
  background-color: #2e91fa;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-tertiary {
  background-color: #82bdfc;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-quaternary {
  background-color: #033973;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-quinary {
  background-color: #022b57;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-senary {
  background-color: #011d3a;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-senary-subtle {
  background-color: #010e1d;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-secondary {
  background-color: #29d886;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-tertiary {
  background-color: #44dd95;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-quaternary {
  background-color: #12623d;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-quinary {
  background-color: #0c4229;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-senary {
  background-color: #09311e;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.5);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-secondary {
  background-color: #ffcd37;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-tertiary {
  background-color: #ffda69;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-quaternary {
  background-color: #9c7500;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-quinary {
  background-color: #684e00;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-senary {
  background-color: #4e3b00;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-secondary {
  background-color: #fc8342;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-tertiary {
  background-color: #fc935a;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-quaternary {
  background-color: #a03902;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-quinary {
  background-color: #6a2602;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-senary {
  background-color: #501d01;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-secondary {
  background-color: #8c68ce;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-tertiary {
  background-color: #9a7bd4;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-quaternary {
  background-color: #422676;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-quinary {
  background-color: #2c194f;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-senary {
  background-color: #21133b;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-primary {
  background-color: #e0e3e5;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-secondary {
  background-color: #c4c8cc;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-tertiary {
  background-color: #899199;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-quinary {
  background-color: #575e64;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-senary {
  background-color: #2c2f32;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-senary-subtle {
  background-color: #161819;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-white {
  background-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-black {
  background-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-primary {
  background-color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-secondary {
  background-color: #e35f6d;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-tertiary {
  background-color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-quaternary {
  background-color: #dc1e11;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-quinary {
  background-color: #6e0f08;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-senary {
  background-color: #530b06;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-nega {
  background-color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-nega-quinary {
  background-color: #8a130a;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-warn-senary {
  background-color: #9c7500;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.6);
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-info {
  background-color: #1181f9;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}
[data-bs-theme=dark-red] .csms-studio-ut-school-primary {
  background-color: #a5170c;
}
[data-bs-theme=dark-red] .csms-studio-ut-school-secondary {
  background-color: #a5170c;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}
[data-bs-theme=dark-red] {
  --csms-studio-tx-hierarchy-primary: #e0e3e5;
  --csms-studio-tx-hierarchy-secondary: #c4c8cc;
  --csms-studio-tx-hierarchy-tertiary: #899199;
  --csms-studio-tx-hierarchy-quaternary: #6d767e;
  --csms-studio-tx-hierarchy-quinary: #575e64;
  --csms-studio-tx-hierarchy-senary: #41474b;
  --csms-studio-tx-hierarchy-senary-subtle: #2c2f32;
  --csms-studio-tx-neutral-white: #000000;
  --csms-studio-tx-neutral-black: #ffffff;
  --csms-studio-tx-neutral-black-solid: #000000;
  --csms-studio-tx-neutral-white-solid: #ffffff;
  --csms-studio-tx-neutral-b20p-disabled: rgba(255, 255, 255, 0.2);
  --csms-studio-tx-neutral-w80p-disabled: rgba(255, 255, 255, 0.2);
  --csms-studio-tx-coursemos-primary: #ed9ba4;
  --csms-studio-tx-coursemos-secondary: #f1afb6;
  --csms-studio-tx-coursemos-tertiary: #f4c3c8;
  --csms-studio-tx-coursemos-quaternary: #6e0f08;
  --csms-studio-tx-coursemos-quinary: #370804;
  --csms-studio-tx-coursemos-senary: #290603;
  --csms-studio-tx-coursemos-primary-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-tx-semantic-nega-primary: #f04438;
  --csms-studio-tx-semantic-nega-secondary: #e35f6d;
  --csms-studio-tx-semantic-nega-tertiary: #e6737f;
  --csms-studio-tx-semantic-nega-quaternary: #c11a0e;
  --csms-studio-tx-semantic-nega-quinary: #8a130a;
  --csms-studio-tx-semantic-nega-senary: #530b06;
  --csms-studio-tx-semantic-info-primary: #439cfa;
  --csms-studio-tx-semantic-info-secondary: #58a7fb;
  --csms-studio-tx-semantic-info-tertiary: #6db2fb;
  --csms-studio-tx-semantic-info-quaternary: #044890;
  --csms-studio-tx-semantic-info-quinary: #033973;
  --csms-studio-tx-semantic-info-senary: #022b57;
  --csms-studio-tx-semantic-posi-primary: #1ea465;
  --csms-studio-tx-semantic-posi-secondary: #29d886;
  --csms-studio-tx-semantic-posi-tertiary: #44dd95;
  --csms-studio-tx-semantic-posi-quaternary: #157347;
  --csms-studio-tx-semantic-posi-quinary: #0f5233;
  --csms-studio-tx-semantic-posi-senary: #09311e;
  --csms-studio-tx-semantic-noti-primary: #ffc107;
  --csms-studio-tx-semantic-prog-primary: #fd7e14;
  --csms-studio-tx-semantic-etc-primary: #6f42c1;
  --csms-studio-bo-hierarchy-primary: #1f2124;
  --csms-studio-bo-hierarchy-secondary: #2c2f32;
  --csms-studio-bo-hierarchy-tertiary: #373b3f;
  --csms-studio-bo-hierarchy-quaternary: #41474b;
  --csms-studio-bo-hierarchy-quaternary-subtle: #6d767e;
  --csms-studio-bo-hierarchy-quinary: #a7adb2;
  --csms-studio-bo-hierarchy-senary: #e0e3e5;
  --csms-studio-bo-neutral-white: #000000;
  --csms-studio-bo-neutral-black: #ffffff;
  --csms-studio-bo-neutral-white-solid: #ffffff;
  --csms-studio-bo-neutral-black-solid: #000000;
  --csms-studio-bo-neutral-b30p: rgba(255, 255, 255, 0.3);
  --csms-studio-bo-coursemos-primary: #e6737f;
  --csms-studio-bo-coursemos-secondary: #ea8791;
  --csms-studio-bo-coursemos-tertiary: #ed9ba4;
  --csms-studio-bo-coursemos-quaternary: #6e0f08;
  --csms-studio-bo-coursemos-quinary: #370804;
  --csms-studio-bo-coursemos-senary: #290603;
  --csms-studio-bo-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bo-semantic-nega-primary: #f04438;
  --csms-studio-bo-semantic-nega-secondary: #e35f6d;
  --csms-studio-bo-semantic-nega-tertiary: #e6737f;
  --csms-studio-bo-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bo-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-bo-semantic-info-primary: #439cfa;
  --csms-studio-bo-semantic-info-secondary: #58a7fb;
  --csms-studio-bo-semantic-info-tertiary: #6db2fb;
  --csms-studio-bo-semantic-info-quaternary: #044890;
  --csms-studio-bo-semantic-info-quinary: #033973;
  --csms-studio-bo-semantic-info-senary: #022b57;
  --csms-studio-bo-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bo-semantic-info-40p: rgba(17, 129, 249, 0.4);
  --csms-studio-bo-semantic-posi-primary: #1ea465;
  --csms-studio-bo-semantic-posi-secondary: #29d886;
  --csms-studio-bo-semantic-posi-tertiary: #44dd95;
  --csms-studio-bo-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bo-semantic-warn-primary: #ffc107;
  --csms-studio-bo-semantic-noti-primary: #ffc107;
  --csms-studio-bo-semantic-prog-primary: #fd7e14;
  --csms-studio-bo-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-hierarchy-primary: #0b0c0d;
  --csms-studio-bg-hierarchy-primary-subtle: #1f2124;
  --csms-studio-bg-hierarchy-secondary: #212326;
  --csms-studio-bg-hierarchy-secondary-subtle: #232629;
  --csms-studio-bg-hierarchy-tertiary: #2c2f32;
  --csms-studio-bg-hierarchy-quaternary: #373b3f;
  --csms-studio-bg-hierarchy-quinary: #575e64;
  --csms-studio-bg-hierarchy-senary: #6d767e;
  --csms-studio-bg-hierarchy-senary-subtle: #899199;
  --csms-studio-bg-neutral-white: #000000;
  --csms-studio-bg-neutral-black: #ffffff;
  --csms-studio-bg-neutral-white-solid: #ffffff;
  --csms-studio-bg-neutral-black-solid: #000000;
  --csms-studio-bg-neutral-b6p-hovered: rgba(255, 255, 255, 0.06);
  --csms-studio-bg-neutral-b10p: rgba(255, 255, 255, 0.1);
  --csms-studio-bg-neutral-b15p: rgba(255, 255, 255, 0.15);
  --csms-studio-bg-neutral-b60p: rgba(255, 255, 255, 0.6);
  --csms-studio-bg-neutral-b80p: rgba(255, 255, 255, 0.8);
  --csms-studio-bg-neutral-w90p: rgba(0, 0, 0, 0.85);
  --csms-studio-bg-neutral-w50p: rgba(0, 0, 0, 0.5);
  --csms-studio-bg-neutral-w30p: rgba(0, 0, 0, 0.3);
  --csms-studio-bg-neutral-w20p: rgba(0, 0, 0, 0.2);
  --csms-studio-bg-neutral-w5p: rgba(0, 0, 0, 0.05);
  --csms-studio-bg-neutral-w1p: rgba(0, 0, 0, 0.01);
  --csms-studio-bg-coursemos-primary: #0075F8;
  --csms-studio-bg-coursemos-secondary: #1582FF;
  --csms-studio-bg-coursemos-tertiary: #2F90FF;
  --csms-studio-bg-coursemos-quaternary: #004696;
  --csms-studio-bg-coursemos-quinary: #002F64;
  --csms-studio-bg-coursemos-quinary-subtle: #001732;
  --csms-studio-bg-coursemos-senary: #00234B;
  --csms-studio-bg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bg-semantic-nega-primary: #f04438;
  --csms-studio-bg-semantic-nega-secondary: #e35f6d;
  --csms-studio-bg-semantic-nega-tertiary: #e6737f;
  --csms-studio-bg-semantic-nega-quaternary: #a5170c;
  --csms-studio-bg-semantic-nega-quinary: #6e0f08;
  --csms-studio-bg-semantic-nega-senary: #530b06;
  --csms-studio-bg-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bg-semantic-info-primary: #2e91fa;
  --csms-studio-bg-semantic-info-secondary: #6db2fb;
  --csms-studio-bg-semantic-info-tertiary: #82bdfc;
  --csms-studio-bg-semantic-info-quaternary: #033973;
  --csms-studio-bg-semantic-info-quinary: #022b57;
  --csms-studio-bg-semantic-info-senary: #011d3a;
  --csms-studio-bg-semantic-info-senary-subtle: #010e1d;
  --csms-studio-bg-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bg-semantic-posi-primary: #1ea465;
  --csms-studio-bg-semantic-posi-secondary: #29d886;
  --csms-studio-bg-semantic-posi-tertiary: #44dd95;
  --csms-studio-bg-semantic-posi-quaternary: #12623d;
  --csms-studio-bg-semantic-posi-quinary: #0c4229;
  --csms-studio-bg-semantic-posi-senary: #09311e;
  --csms-studio-bg-semantic-posi-30p: rgba(30, 164, 101, 0.3);
  --csms-studio-bg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-posi-50p: rgba(30, 164, 101, 0.5);
  --csms-studio-bg-semantic-warn-primary: #ffc107;
  --csms-studio-bg-semantic-warn-secondary: #ffcd37;
  --csms-studio-bg-semantic-warn-tertiary: #ffda69;
  --csms-studio-bg-semantic-warn-quaternary: #9c7500;
  --csms-studio-bg-semantic-warn-quinary: #684e00;
  --csms-studio-bg-semantic-warn-senary: #4e3b00;
  --csms-studio-bg-semantic-prog-primary: #fd7e14;
  --csms-studio-bg-semantic-prog-secondary: #fc8342;
  --csms-studio-bg-semantic-prog-tertiary: #fc935a;
  --csms-studio-bg-semantic-prog-quaternary: #a03902;
  --csms-studio-bg-semantic-prog-quinary: #6a2602;
  --csms-studio-bg-semantic-prog-senary: #501d01;
  --csms-studio-bg-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-semantic-etc-secondary: #8c68ce;
  --csms-studio-bg-semantic-etc-tertiary: #9a7bd4;
  --csms-studio-bg-semantic-etc-quaternary: #422676;
  --csms-studio-bg-semantic-etc-quinary: #2c194f;
  --csms-studio-bg-semantic-etc-senary: #21133b;
  --csms-studio-fg-hierarchy-primary: #e0e3e5;
  --csms-studio-fg-hierarchy-secondary: #c4c8cc;
  --csms-studio-fg-hierarchy-tertiary: #899199;
  --csms-studio-fg-hierarchy-quaternary: #6d767e;
  --csms-studio-fg-hierarchy-quinary: #575e64;
  --csms-studio-fg-hierarchy-senary: #2c2f32;
  --csms-studio-fg-hierarchy-senary-subtle: #161819;
  --csms-studio-fg-neutral-white: #000000;
  --csms-studio-fg-neutral-black: #ffffff;
  --csms-studio-fg-neutral-white-solid: #ffffff;
  --csms-studio-fg-neutral-black-solid: #000000;
  --csms-studio-fg-neutral-w50p-solid: rgba(255, 255, 255, 0.5);
  --csms-studio-fg-neutral-w80p-solid: rgba(255, 255, 255, 0.8);
  --csms-studio-fg-coursemos-primary: #f04438;
  --csms-studio-fg-coursemos-secondary: #e35f6d;
  --csms-studio-fg-coursemos-tertiary: #e6737f;
  --csms-studio-fg-coursemos-quaternary: #dc1e11;
  --csms-studio-fg-coursemos-quinary: #6e0f08;
  --csms-studio-fg-coursemos-senary: #530b06;
  --csms-studio-fg-coursemos-primary-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-fg-coursemos-primary-50p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-nega: #f04438;
  --csms-studio-fg-semantic-nega-quinary: #8a130a;
  --csms-studio-fg-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-warn-primary: #ffc107;
  --csms-studio-fg-semantic-warn-senary: #9c7500;
  --csms-studio-fg-semantic-posi: #1ea465;
  --csms-studio-fg-semantic-posi-40p: rgba(30, 164, 101, 0.6);
  --csms-studio-fg-semantic-info: #1181f9;
  --csms-studio-fg-semantic-prog: #fd7e14;
  --csms-studio-fg-semantic-etc: #6f42c1;
  --csms-studio-ut-school-primary: #a5170c;
  --csms-studio-ut-school-secondary: #a5170c;
}

/**
 * 작업시 유의 사항
 * Figma에서 2xlg 같이 이름을 지정한 경우 xxlg로 치환을 시켜서 사용해야 합니다.
 * 이유는 class 이름 규칙에 숫자로 시작되면 안되도록 되어 있습니다.
 */
.btn-noborder {
  border: 0;
  background: transparent;
}

.row .col-form-check,
.row .col-form-label {
  text-align: right;
  font-weight: 700;
}
@media (max-width: 575.98px) {
  .row .col-form-check,
  .row .col-form-label {
    text-align: left;
  }
}

.row-csms {
  margin-bottom: 8px;
}
.row-csms:last-child {
  margin-bottom: 0;
}
.row-csms .col-form-label {
  text-align: left;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quaternary);
}

.form-switch.form-switch-right {
  padding-left: 0;
}
.form-switch.form-switch-right .form-check-input {
  margin-left: 0;
  float: right;
}
.form-switch.form-switch-right .form-check-label {
  margin-right: 0.5em;
}

.badge.badge-sm {
  padding: 0.35em 0.45em;
}

.text-bg-default {
  background-color: transparent;
  color: var(--bs-body-color);
}

.cursor-move {
  cursor: move;
}

.bd-mode-toggle {
  z-index: 9999;
}
.bd-mode-toggle .btn-bd-primary {
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #6528e0;
  --bs-btn-hover-border-color: #6528e0;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #5a23c8;
  --bs-btn-active-border-color: #5a23c8;
}
.bd-mode-toggle .btn-bd-primary .bi {
  vertical-align: -0.125em;
  fill: currentColor;
}

/*
.form-check {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: inherit;
    margin-bottom: 0;
    padding-left: 24px;

    .form-check-input {
        width: 24px;
        height: 24px;
        margin-top: 0;
        vertical-align: middle;
    }

    .form-check-label {
        font-weight: $font-weight-medium;
        font-size: 14px;
        line-height: 150%;
    }
}
*/
.visibility-hidden {
  visibility: hidden;
}

.csmsmedia-studio-modal-content {
  width: 1072px;
  height: 880px;
}

@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .hide-on-wide {
    display: none !important;
  }
}

#warning-require-pc {
  font-size: 14px;
  color: var(--csms-studio-tx-hierarchy-secondary);
  text-align: center;
  margin-top: 20%;
  padding-bottom: 40px;
}

.csmsmedia-studio-modal.MuiModal-root {
  overflow-x: auto;
}
.csmsmedia-studio-modal.MuiModal-root .MuiModal-container {
  overflow-x: auto;
  min-width: 100vw;
  padding: 0;
  min-width: max(100vw, 1072px);
}

.csmsmedia-studio-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  border-radius: 16px;
  background-color: var(--csms-studio-bg-hierarchy-secondary-subtle);
  transition: width 0.3s ease, height 0.3s ease, top 0.3s ease, left 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 1072px) {
  .csmsmedia-studio-modal-content {
    left: 0;
    transform: translate(0, -50%);
    width: 100vw;
  }
}
.csmsmedia-studio-modal-content *::-webkit-scrollbar {
  scrollbar-gutter: stable;
  width: 8px;
}
.csmsmedia-studio-modal-content *::-webkit-scrollbar-track {
  background: transparent;
}
.csmsmedia-studio-modal-content *::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.csmsmedia-studio-modal-content *::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}
.csmsmedia-studio-modal-content * {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.csmsmedia-studio-modal-content .MuiModal-backdrop {
  border-radius: 12px;
}
.csmsmedia-studio-modal-content.maximized {
  top: 0;
  left: 0;
  transform: none;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}
.csmsmedia-studio-modal-content.maximized .moodle-container-wrapper {
  width: 100%;
  height: 100%;
  padding: 0 24px;
}
.csmsmedia-studio-modal-content.maximized .moodle-detail-container-wrapper {
  width: 100%;
  height: 100%;
  padding: 0 24px;
}
.csmsmedia-studio-modal-content.maximized .csmsmedia-studio-modal-content-header-minimize-btn {
  display: block;
}
.csmsmedia-studio-modal-content.maximized .csmsmedia-studio-modal-content-header-maximize-btn {
  display: none;
}
.csmsmedia-studio-modal-content.content-list-container {
  height: 880px;
  overflow-y: auto;
}
.csmsmedia-studio-modal-content.content-list-container .moodle-detail-container-wrapper {
  height: 100%;
}
@media (max-width: 768px) {
  .csmsmedia-studio-modal-content.content-list-container .moodle-detail-container-wrapper {
    height: 100%;
  }
}
.csmsmedia-studio-modal-content.sub-chap-edit-container {
  height: 908px;
  position: relative;
}
.csmsmedia-studio-modal-content.sub-chap-edit-container .moodle-detail-container-wrapper {
  height: 812px;
}
.csmsmedia-studio-modal-content.maximized.sub-chap-edit-container {
  top: 0;
  left: 0;
  transform: none;
  width: 100vw;
  height: 100%;
  border-radius: 0;
}
.csmsmedia-studio-modal-content.maximized.sub-chap-edit-container .moodle-container-wrapper {
  width: 100%;
  height: 100%;
  padding: 0 24px;
}
.csmsmedia-studio-modal-content.maximized.sub-chap-edit-container .moodle-detail-container-wrapper {
  width: 100%;
  height: 100%;
  padding: 0 24px;
}
.csmsmedia-studio-modal-content.maximized.sub-chap-edit-container .csmsmedia-studio-modal-content-header-minimize-btn {
  display: block;
}
.csmsmedia-studio-modal-content.maximized.sub-chap-edit-container .csmsmedia-studio-modal-content-header-maximize-btn {
  display: none;
}
.csmsmedia-studio-modal-content.summary-edit-container {
  width: 1072px;
  height: 880px;
}
.csmsmedia-studio-modal-content.summary-edit-container .moodle-detail-container-wrapper {
  height: 100%;
}
.csmsmedia-studio-modal-content.maximized.summary-edit-container {
  top: 0;
  left: 0;
  transform: none;
  width: 100vw;
  height: 100%;
  border-radius: 0;
}
.csmsmedia-studio-modal-content.maximized.summary-edit-container .moodle-container-wrapper {
  width: 100%;
  height: 100%;
  padding: 0 24px;
}
.csmsmedia-studio-modal-content.maximized.summary-edit-container .moodle-detail-container-wrapper {
  width: 100%;
  height: 100%;
  padding: 0 24px;
}
.csmsmedia-studio-modal-content.maximized.summary-edit-container .csmsmedia-studio-modal-content-header-minimize-btn {
  display: block;
}
.csmsmedia-studio-modal-content.maximized.summary-edit-container .csmsmedia-studio-modal-content-header-maximize-btn {
  display: none;
}
.csmsmedia-studio-modal-content .csms-studio-toast-default-wrapper {
  height: 64px;
}
.csmsmedia-studio-modal-content .toast-wrapper-modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 760px;
  max-width: calc(100% - 32px);
  height: 64px;
  padding: 14px 16px;
  box-sizing: border-box;
  border-bottom-right-radius: var(--csms-studio-border-radius-16);
  border-bottom-left-radius: var(--csms-studio-border-radius-16);
  z-index: 1000;
  margin: 0 auto;
}
.csmsmedia-studio-modal-content .toast-body-center {
  justify-content: center;
}
.csmsmedia-studio-modal-content .toast-text-center {
  width: 700px;
  height: 28px;
  min-height: 28px;
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.csmsmedia-studio-modal-content .btn-close-toast {
  width: 16px;
  height: 16px;
  margin: 0 !important;
}
.csmsmedia-studio-modal-content .moodle-container-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1024px;
  height: 784px;
}
.csmsmedia-studio-modal-content .moodle-detail-container-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100% - 64px);
  transition: width 0.3s ease, height 0.3s ease, top 0.3s ease, left 0.3s ease, transform 0.3s ease;
}
.csmsmedia-studio-modal-content .csmsmedia-studio-modal-content-header-minimize-btn {
  display: none;
}
.csmsmedia-studio-modal-content .csmsmedia-studio-modal-content-header {
  position: relative;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
}
.csmsmedia-studio-modal-content .csmsmedia-studio-modal-content-header .csmsmedia-studio-modal-content-header-btns {
  display: flex;
  align-items: center;
  height: 24px;
  gap: 16px;
}
.csmsmedia-studio-modal-content .csmsmedia-studio-modal-content-header .csmsmedia-studio-modal-content-header-btns div {
  width: 24px;
  height: 24px;
  color: var(--csms-studio-fg-hierarchy-secondary);
  cursor: pointer;
}
.csmsmedia-studio-modal-content .csmsmedia-studio-modal-content-body {
  width: 100%;
  height: calc(100% - 64px);
  display: flex;
  justify-content: center;
  flex: 1;
  padding: 0 24px 32px 24px;
}
.csmsmedia-studio-modal-content .csmsmedia-studio-modal-content-body .moodle-loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.csmsmedia-studio-modal-content {
  /* 공통 탭 컨테이너 스타일 */
}
.csmsmedia-studio-modal-content .moodle-detail-container {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  padding: 0 24px 0px 24px;
  align-items: center;
  justify-content: center;
  background-color: var(--csms-studio-bg-neutral-white);
  transition: width 0.3s ease, height 0.3s ease, top 0.3s ease, left 0.3s ease, transform 0.3s ease;
  /* summary, subtitle, chapter 탭 공통 스타일 */
}
.csmsmedia-studio-modal-content .moodle-detail-container .tab-video-summary,
.csmsmedia-studio-modal-content .moodle-detail-container .tab-video-subtitle,
.csmsmedia-studio-modal-content .moodle-detail-container .tab-video-chapter {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
@media (max-width: 768px) {
  .csmsmedia-studio-modal-content .moodle-detail-container .tab-video-summary,
  .csmsmedia-studio-modal-content .moodle-detail-container .tab-video-subtitle,
  .csmsmedia-studio-modal-content .moodle-detail-container .tab-video-chapter {
    display: none;
  }
}
.csmsmedia-studio-modal-content .moodle-detail-container .tab-video-summary .list-button,
.csmsmedia-studio-modal-content .moodle-detail-container .tab-video-subtitle .list-button,
.csmsmedia-studio-modal-content .moodle-detail-container .tab-video-chapter .list-button {
  width: 72px;
  height: 36px;
  border-radius: 8px;
  padding: 0 16px;
  gap: 4px;
  background-color: var(--csms-studio-bg-neutral-white);
  border: 1px solid var(--csms-studio-bo-hierarchy-quaternary);
  text-align: center;
  line-height: 36px;
  cursor: pointer;
}
.csmsmedia-studio-modal-content .moodle-detail-container {
  /* 공통 리스트 버튼 박스 스타일 */
}
.csmsmedia-studio-modal-content .moodle-detail-container .box-summary-list-btn-box,
.csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-list-btn-box,
.csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-list-btn-box {
  width: 100%;
  min-height: 36px;
  margin-top: 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.csmsmedia-studio-modal-content .moodle-detail-container .box-summary-list-btn-box-left,
.csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-list-btn-box-left,
.csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-list-btn-box-left {
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .csmsmedia-studio-modal-content .moodle-detail-container .box-summary-list-btn-box-left,
  .csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-list-btn-box-left,
  .csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-list-btn-box-left {
    flex-wrap: wrap;
  }
}
.csmsmedia-studio-modal-content .moodle-detail-container .box-summary-list-btn-box-left .total-count-text,
.csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-list-btn-box-left .total-count-text,
.csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-list-btn-box-left .total-count-text {
  display: flex;
  align-items: center;
  margin-right: 10px;
  color: var(--csms-studio-tx-hierarchy-secondary);
  gap: 4px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .csmsmedia-studio-modal-content .moodle-detail-container .box-summary-list-btn-box-left .total-count-text,
  .csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-list-btn-box-left .total-count-text,
  .csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-list-btn-box-left .total-count-text {
    margin-right: 8px;
  }
}
.csmsmedia-studio-modal-content .moodle-detail-container .box-summary-list-btn-box-left .total-count-text .total-count-number,
.csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-list-btn-box-left .total-count-text .total-count-number,
.csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-list-btn-box-left .total-count-text .total-count-number {
  color: var(--csms-studio-tx-coursemos-primary);
}
.csmsmedia-studio-modal-content .moodle-detail-container .box-summary-list-btn-box-left .page-range-text,
.csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-list-btn-box-left .page-range-text,
.csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-list-btn-box-left .page-range-text {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .csmsmedia-studio-modal-content .moodle-detail-container .box-summary-list-btn-box-left .page-range-text,
  .csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-list-btn-box-left .page-range-text,
  .csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-list-btn-box-left .page-range-text {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}
.csmsmedia-studio-modal-content .moodle-detail-container .box-summary-list-btn-box-left .page-range-text div,
.csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-list-btn-box-left .page-range-text div,
.csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-list-btn-box-left .page-range-text div {
  display: flex;
  align-items: center;
}
.csmsmedia-studio-modal-content .moodle-detail-container .box-summary-list-btn-box-left .page-range-text,
.csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-list-btn-box-left .page-range-text,
.csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-list-btn-box-left .page-range-text {
  gap: 4px;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csmsmedia-studio-modal-content .moodle-detail-container .box-summary-list-btn-box-left .page-range-text .page-range-nav-button,
.csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-list-btn-box-left .page-range-text .page-range-nav-button,
.csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-list-btn-box-left .page-range-text .page-range-nav-button {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--csms-studio-fg-hierarchy-quinary);
  flex-shrink: 0;
}
.csmsmedia-studio-modal-content .moodle-detail-container .box-summary-list-btn-box-left .page-range-text .page-range-nav-button:disabled,
.csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-list-btn-box-left .page-range-text .page-range-nav-button:disabled,
.csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-list-btn-box-left .page-range-text .page-range-nav-button:disabled {
  cursor: not-allowed;
}
.csmsmedia-studio-modal-content .moodle-detail-container .box-summary-list-btn-box-left .page-range-text .page-index-text,
.csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-list-btn-box-left .page-range-text .page-index-text,
.csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-list-btn-box-left .page-range-text .page-index-text {
  color: var(--csms-studio-tx-hierarchy-quinary);
  flex-shrink: 0;
}
.csmsmedia-studio-modal-content .moodle-detail-container .box-summary-list-btn-box-left .sort-button,
.csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-list-btn-box-left .sort-button,
.csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-list-btn-box-left .sort-button {
  width: 57px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  cursor: pointer;
  color: var(--csms-studio-tx-hierarchy-quinary);
  flex-shrink: 0;
}
.csmsmedia-studio-modal-content .moodle-detail-container {
  /* 공통 선택 바 스타일 */
}
.csmsmedia-studio-modal-content .moodle-detail-container .box-summary-selection-bar,
.csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-selection-bar,
.csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-selection-bar {
  width: 128px;
  height: 36px;
  padding: 4px 4px 4px 6px;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 8px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .box-summary-selection-bar .selection-info,
.csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-selection-bar .selection-info,
.csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-selection-bar .selection-info {
  width: 49px;
  height: 21px;
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--csms-studio-tx-hierarchy-secondary);
  margin-right: 8px;
  flex-shrink: 0;
}
.csmsmedia-studio-modal-content .moodle-detail-container .box-summary-selection-bar .selection-info .selection-count,
.csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-selection-bar .selection-info .selection-count,
.csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-selection-bar .selection-info .selection-count {
  color: var(--csms-studio-tx-semantic-info-primary);
}
.csmsmedia-studio-modal-content .moodle-detail-container .box-summary-selection-bar .selection-delete-button,
.csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-selection-bar .selection-delete-button,
.csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-selection-bar .selection-delete-button {
  width: 71px;
  height: 36px;
  gap: 4px;
  padding: 0 14px 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--csms-studio-bo-hierarchy-quaternary);
  border-radius: var(--csms-studio-border-radius-8);
  background-color: var(--csms-studio-bg-neutral-white);
  text-transform: none;
}
.csmsmedia-studio-modal-content .moodle-detail-container .box-summary-selection-bar .selection-delete-button .selection-delete-text,
.csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-selection-bar .selection-delete-button .selection-delete-text,
.csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-selection-bar .selection-delete-button .selection-delete-text {
  line-height: 1;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csmsmedia-studio-modal-content .moodle-detail-container .box-summary-selection-bar .selection-delete-button .selection-delete-icon,
.csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-selection-bar .selection-delete-button .selection-delete-icon,
.csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-selection-bar .selection-delete-button .selection-delete-icon {
  color: var(--csms-studio-fg-semantic-nega);
}
.csmsmedia-studio-modal-content .moodle-detail-container .box-summary-selection-bar .selection-delete-button:hover,
.csmsmedia-studio-modal-content .moodle-detail-container .box-subtitle-selection-bar .selection-delete-button:hover,
.csmsmedia-studio-modal-content .moodle-detail-container .box-chapter-selection-bar .selection-delete-button:hover {
  border-color: var(--csms-studio-tx-semantic-nega-primary);
  background-color: rgba(240, 68, 56, 0.08);
}
.csmsmedia-studio-modal-content .moodle-detail-container {
  /* 공통 테이블 스타일 */
  /* 공통 테이블 리스트 컨테이너 */
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
  overflow-x: auto;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .table-video-list,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .table-video-list,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .table-video-list,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .table-video-list {
  table-layout: auto;
  width: 100%;
  min-width: 100%;
  display: table;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .table-video-list .moodle-table-head-fixed,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .table-video-list .moodle-table-head-fixed,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .table-video-list .moodle-table-head-fixed,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .table-video-list .moodle-table-head-fixed {
  position: relative;
  z-index: 10;
  background-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  height: 40px;
  border-top: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  border-bottom: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  display: table-header-group;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root {
  color: var(--csms-studio-tx-hierarchy-primary);
  text-align: center;
  background-color: var(--csms-studio-bg-hierarchy-primary);
  border-bottom: none;
  box-sizing: border-box;
  overflow: hidden;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 150% !important;
  letter-spacing: -0.07px !important;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(1),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(1),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(1),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(1) {
  width: 4.76%;
  min-width: 4.76%;
  max-width: 4.76%;
  padding: 8px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(2),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(2),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(2),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(2) {
  width: 9.52%;
  min-width: 9.52%;
  max-width: 9.52%;
  padding: 8px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(3),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(3),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(3),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(3) {
  width: 14.76%;
  min-width: 14.76%;
  max-width: 14.76%;
  padding: 8px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(4),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(4),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(4),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(4) {
  width: 20%;
  min-width: 20%;
  max-width: 20%;
  padding: 8px;
  text-align: left;
}
@media (max-width: 768px) {
  .csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(4),
  .csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(4),
  .csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(4),
  .csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(4) {
    white-space: normal;
    word-break: break-word;
  }
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(5),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(5),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(5),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(5) {
  width: 9.52%;
  min-width: 9.52%;
  max-width: 9.52%;
  padding: 8px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(6),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(6),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(6),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(6) {
  width: 9.52%;
  min-width: 9.52%;
  max-width: 9.52%;
  padding: 8px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(7),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(7),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(7),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(7) {
  width: 14.29%;
  min-width: 14.29%;
  max-width: 14.29%;
  padding: 8px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(8),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(8),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(8),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(8) {
  width: 10.48%;
  min-width: 10.48%;
  max-width: 10.48%;
  padding: 8px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(9),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(9),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(9),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(9) {
  width: 7.14%;
  min-width: 7.14%;
  max-width: 7.14%;
  padding: 8px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root .file-cell,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root .file-cell,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root .file-cell,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root .file-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root .table-header-cell-with-icon,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root .table-header-cell-with-icon,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root .table-header-cell-with-icon,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root .table-header-cell-with-icon {
  display: flex;
  align-items: center;
  gap: 4px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root .table-header-icon,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root .table-header-icon,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root .table-header-icon,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root .table-header-icon {
  font-size: 16px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root.table-header-select-button-cell .MuiButton-root,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root.table-header-select-button-cell .MuiButton-root,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root.table-header-select-button-cell .MuiButton-root,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root.table-header-select-button-cell .MuiButton-root {
  color: var(--csms-studio-tx-hierarchy-tertiary);
  border-color: var(--csms-studio-bo-hierarchy-tertiary);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  padding: 6px 12px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root.table-header-select-button-cell .MuiButton-root:hover,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root.table-header-select-button-cell .MuiButton-root:hover,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root.table-header-select-button-cell .MuiButton-root:hover,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root.table-header-select-button-cell .MuiButton-root:hover {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: var(--csms-studio-bo-hierarchy-tertiary);
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: auto;
  position: relative;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list {
  table-layout: fixed;
  width: 100%;
  display: table;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll {
  width: 100%;
  display: table-row-group;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .MuiTableCell-root,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .MuiTableCell-root,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .MuiTableCell-root,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .MuiTableCell-root {
  text-align: center;
  border-bottom: none;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-empty-message,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-empty-message,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-empty-message,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-empty-message {
  padding: 0;
  flex: 1;
  min-height: 0;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-empty-message .video-list-empty-state,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-empty-message .video-list-empty-state,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-empty-message .video-list-empty-state,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-empty-message .video-list-empty-state {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--csms-studio-tx-hierarchy-tertiary);
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-empty-message .video-list-empty-state .video-list-empty-state-icon,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-empty-message .video-list-empty-state .video-list-empty-state-icon,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-empty-message .video-list-empty-state .video-list-empty-state-icon,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-empty-message .video-list-empty-state .video-list-empty-state-icon {
  color: var(--csms-studio-fg-hierarchy-senary);
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-empty-message .video-list-empty-state .video-list-empty-state-message,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-empty-message .video-list-empty-state .video-list-empty-state-message,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-empty-message .video-list-empty-state .video-list-empty-state-message,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-empty-message .video-list-empty-state .video-list-empty-state-message {
  display: block;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row {
  width: 100%;
  border-bottom: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  min-height: 48px;
}
@media (max-width: 768px) {
  .csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row,
  .csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row,
  .csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row,
  .csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row {
    height: auto;
  }
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row.last-row-no-border,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row.last-row-no-border,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row.last-row-no-border,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row.last-row-no-border {
  border-bottom: none;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row.is-checked,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row.is-checked,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row.is-checked,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row.is-checked {
  background-color: var(--csms-studio-bg-coursemos-senary, #E5F1FF);
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row.is-checked:hover,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row.is-checked:hover,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row.is-checked:hover,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row.is-checked:hover {
  background-color: var(--csms-studio-bg-coursemos-senary, #E5F1FF);
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row:hover,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row:hover,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row:hover,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row:hover {
  background-color: rgba(0, 0, 0, 0.02);
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root {
  padding: 0;
  min-height: 48px;
  vertical-align: middle;
  text-align: center;
  color: var(--csms-studio-tx-hierarchy-secondary);
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root,
  .csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root,
  .csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root,
  .csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root {
    height: auto;
    padding: 8px;
  }
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(1),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(1),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(1),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(1) {
  width: 4.76%;
  min-width: 4.76%;
  max-width: 4.76%;
  padding: 8px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(2),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(2),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(2),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(2) {
  width: 9.52%;
  min-width: 9.52%;
  max-width: 9.52%;
  padding: 8px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(3),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(3),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(3),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(3) {
  width: 14.76%;
  min-width: 14.76%;
  max-width: 14.76%;
  padding: 8px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(4),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(4),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(4),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(4) {
  width: 20%;
  min-width: 20%;
  max-width: 20%;
  padding: 8px;
  text-align: left;
  color: var(--csms-studio-tx-hierarchy-quaternary) !important;
}
@media (max-width: 768px) {
  .csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(4),
  .csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(4),
  .csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(4),
  .csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(4) {
    white-space: normal;
    word-break: break-word;
    line-height: 1.5;
  }
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(5),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(5),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(5),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(5) {
  width: 9.52%;
  min-width: 9.52%;
  max-width: 9.52%;
  padding: 0px;
  gap: 8px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(6),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(6),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(6),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(6) {
  width: 9.52%;
  min-width: 9.52%;
  max-width: 9.52%;
  gap: 8px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(6) .btn-csms-studio-icon,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(6) .btn-csms-studio-icon,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(6) .btn-csms-studio-icon,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(6) .btn-csms-studio-icon {
  padding: 0px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(7),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(7),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(7),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(7) {
  width: 14.29%;
  min-width: 14.29%;
  max-width: 14.29%;
  padding: 8px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(8),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(8),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(8),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(8) {
  width: 10.48%;
  min-width: 10.48%;
  max-width: 10.48%;
  padding: 8px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(9),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(9),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(9),
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(9) {
  width: 7.14%;
  min-width: 7.14%;
  max-width: 7.14%;
  padding: 8px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container] {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container] [class*=-state-dot],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container] [class*=-state-dot],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container] [class*=-state-dot],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container] [class*=-state-dot] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container] [class*=-state-dot][class*=-waiting],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container] [class*=-state-dot][class*=-waiting],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container] [class*=-state-dot][class*=-waiting],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container] [class*=-state-dot][class*=-waiting] {
  background-color: #899199;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container] [class*=-state-dot][class*=-progress],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container] [class*=-state-dot][class*=-progress],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container] [class*=-state-dot][class*=-progress],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container] [class*=-state-dot][class*=-progress] {
  background-color: #FD7E14;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container] [class*=-state-dot][class*=-completed],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container] [class*=-state-dot][class*=-completed],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container] [class*=-state-dot][class*=-completed],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-state-dot-container-wrapper] [class*=-state-dot-container] [class*=-state-dot][class*=-completed] {
  background-color: #1181F9;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-more-button],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-more-button],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-more-button],
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-more-button] {
  width: 28px;
  height: 28px;
  border-radius: var(--csms-studio-border-radius-6);
  padding: 0;
  color: var(--csms-studio-tx-hierarchy-tertiary);
  background: transparent;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-more-button]:hover,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-more-button]:hover,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-more-button]:hover,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-more-button]:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-more-button] .MuiSvgIcon-root,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-more-button] .MuiSvgIcon-root,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-more-button] .MuiSvgIcon-root,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-more-button] .MuiSvgIcon-root {
  font-size: 18px;
}
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-more-button].is-open,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-more-button].is-open,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-more-button].is-open,
.csmsmedia-studio-modal-content .moodle-detail-container .moodle-container-video-list .moodle-table-body-wrapper .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root [class*=-more-button].is-open {
  background: var(--csms-studio-bg-neutral-b15p);
}

.moodle-add-modal.MuiDialog-root {
  overflow-x: auto;
}
.moodle-add-modal .MuiDialog-container {
  overflow-x: auto;
}
.moodle-add-modal .MuiDialog-paper {
  border-radius: 12px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
}
.moodle-add-modal .moodle-add-modal-paper {
  border-radius: 12px;
}
.moodle-add-modal .moodle-add-modal-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 12px;
  backdrop-filter: blur(2px);
}
.moodle-add-modal .moodle-add-modal-loading-overlay .subtitle-saving-spinner {
  width: 160px;
  display: flex;
  justify-content: center;
}
.moodle-add-modal .moodle-add-modal-title {
  height: 56px;
  padding: 0 12px 0 20px;
  margin: 0;
  display: flex;
}
.moodle-add-modal .moodle-add-modal-title .moodle-add-modal-title-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.moodle-add-modal .moodle-add-modal-title .moodle-add-modal-title-content .moodle-add-modal-close-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  color: var(--csms-studio-tx-hierarchy-tertiary);
}
.moodle-add-modal .moodle-add-modal-title .moodle-add-modal-title-content .moodle-add-modal-close-btn:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.moodle-add-modal .moodle-add-modal-content {
  padding: 10px 20px 0px 20px;
  display: flex;
  flex-direction: column;
}
.moodle-add-modal .moodle-add-modal-content .moodle-add-modal-options {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  justify-content: space-between;
}
.moodle-add-modal .moodle-add-modal-content .moodle-add-modal-options.hide-auto .moodle-add-modal-option_manual {
  width: 100%;
}
.moodle-add-modal .moodle-add-modal-content .moodle-add-modal-options .moodle-add-modal-option {
  position: relative;
  padding: 16px;
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  border-radius: 16px;
  background-color: var(--csms-studio-bg-hierarchy-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.moodle-add-modal .moodle-add-modal-content .moodle-add-modal-options .moodle-add-modal-option:hover {
  border-color: var(--csms-studio-bo-coursemos-primary);
  background-color: var(--csms-studio-bg-coursemos-senary);
}
.moodle-add-modal .moodle-add-modal-content .moodle-add-modal-options .moodle-add-modal-option.selected {
  border-color: var(--csms-studio-bo-coursemos-primary);
  background-color: var(--csms-studio-bg-coursemos-senary);
}
.moodle-add-modal .moodle-add-modal-content .moodle-add-modal-options .moodle-add-modal-option.selected .moodle-add-modal-option-check {
  display: flex;
}
.moodle-add-modal .moodle-add-modal-content .moodle-add-modal-options .moodle-add-modal-option_manual {
  width: 220px;
  height: 87px;
}
.moodle-add-modal .moodle-add-modal-content .moodle-add-modal-options .moodle-add-modal-option_auto {
  width: 220px;
  height: 87px;
}
.moodle-add-modal .moodle-add-modal-content .moodle-add-modal-options .moodle-add-modal-option .moodle-add-modal-option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9.5px;
  color: var(--csms-studio-tx-hierarchy-tertiary);
  height: 24px;
}
.moodle-add-modal .moodle-add-modal-content .moodle-add-modal-options .moodle-add-modal-option .moodle-add-modal-option-check {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--csms-studio-bg-coursemos-primary);
  color: var(--csms-studio-tx-neutral-white-solid);
}
.moodle-add-modal .moodle-add-modal-content .moodle-add-modal-options .moodle-add-modal-option .moodle-add-modal-option-description {
  height: 23px;
  color: var(--csms-studio-tx-hierarchy-secondary);
  display: flex;
  align-items: center;
}
.moodle-add-modal .moodle-add-modal-content .moodle-add-modal-options .moodle-add-modal-option .moodle-add-modal-option-description svg {
  margin-right: 4px;
}
.moodle-add-modal .moodle-add-modal-lang-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.moodle-add-modal .moodle-add-modal-lang-section .moodle-add-modal-lang-label {
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.moodle-add-modal .moodle-add-modal-lang-section .moodle-add-modal-lang-dropdown-wrapper {
  position: relative;
}
.moodle-add-modal .moodle-add-modal-lang-section .moodle-add-modal-lang-dropdown-wrapper .moodle-add-modal-lang-autocomplete {
  width: 100%;
}
.moodle-add-modal .moodle-add-modal-lang-section .moodle-add-modal-lang-dropdown-wrapper .moodle-add-modal-lang-autocomplete .MuiOutlinedInput-root {
  height: 44px;
  border-radius: var(--csms-studio-border-radius-8);
  background-color: var(--csms-studio-bg-neutral-white);
}
.moodle-add-modal .moodle-add-modal-lang-section .moodle-add-modal-lang-dropdown-wrapper .moodle-add-modal-lang-autocomplete .MuiOutlinedInput-root fieldset {
  border: 1px solid var(--csms-studio-bo-hierarchy-tertiary);
}
.moodle-add-modal .moodle-add-modal-lang-section .moodle-add-modal-lang-dropdown-wrapper .moodle-add-modal-lang-autocomplete .MuiOutlinedInput-root:hover fieldset {
  border-color: var(--csms-studio-bo-hierarchy-secondary);
}
.moodle-add-modal .moodle-add-modal-lang-section .moodle-add-modal-lang-dropdown-wrapper .moodle-add-modal-lang-autocomplete .MuiOutlinedInput-root.Mui-focused fieldset {
  border-color: var(--csms-studio-tx-coursemos-primary);
}
.moodle-add-modal .moodle-add-modal-actions {
  padding: 0 24px 24px 24px;
  display: flex;
  justify-content: center;
}
.moodle-add-modal .moodle-add-modal-actions .generate-button {
  width: 72px;
  height: 36px;
  border: 0;
  border-radius: var(--csms-studio-border-radius-8);
  padding: 0 12px;
  background-color: #0075F8;
  color: var(--csms-studio-tx-neutral-white-solid);
  cursor: pointer;
}
.moodle-add-modal .moodle-add-modal-actions .generate-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.moodle-add-modal-lang-autocomplete-paper {
  height: 236px;
  padding: 8px;
  overflow: hidden;
  position: relative;
}

.moodle-add-modal-lang-autocomplete-listbox {
  max-height: 220px;
  height: 100%;
  overflow-y: auto;
  position: relative;
  padding-bottom: 0;
}
.moodle-add-modal-lang-autocomplete-listbox .MuiAutocomplete-option {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* 공통 삭제 모달 */
.csmsmedia-studio-delete-modal .MuiDialog-paper {
  width: 320px;
  height: 166px;
  box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.04), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
  border-radius: 12px;
}
.csmsmedia-studio-delete-modal .csmsmedia-studio-delete-modal-paper {
  border-radius: 12px;
}
.csmsmedia-studio-delete-modal {
  /* title */
}
.csmsmedia-studio-delete-modal .csmsmedia-studio-delete-modal-title {
  height: 56px;
  padding: 0 12px 0 20px;
  margin: 0;
  display: flex;
}
.csmsmedia-studio-delete-modal .csmsmedia-studio-delete-modal-title .csmsmedia-studio-delete-modal-title-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.csmsmedia-studio-delete-modal .csmsmedia-studio-delete-modal-title .csmsmedia-studio-delete-modal-title-content .csmsmedia-studio-delete-modal-close-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--csms-studio-tx-hierarchy-tertiary);
}
.csmsmedia-studio-delete-modal .csmsmedia-studio-delete-modal-title .csmsmedia-studio-delete-modal-title-content .csmsmedia-studio-delete-modal-close-btn:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.csmsmedia-studio-delete-modal .csmsmedia-studio-delete-modal-content {
  width: 100%;
  padding: 0;
}
.csmsmedia-studio-delete-modal .csmsmedia-studio-delete-modal-content .csmsmedia-studio-delete-modal-body {
  width: 100%;
  height: 37px;
  padding: 8px 20px 8px 20px;
}
.csmsmedia-studio-delete-modal .csmsmedia-studio-delete-modal-content .csmsmedia-studio-delete-modal-body .csmsmedia-studio-delete-modal-loading,
.csmsmedia-studio-delete-modal .csmsmedia-studio-delete-modal-content .csmsmedia-studio-delete-modal-body .csmsmedia-studio-delete-modal-message {
  width: 280px;
  height: 21px;
  color: var(--csms-studio-tx-hierarchy-tertiary);
}
.csmsmedia-studio-delete-modal {
  /* bottom */
}
.csmsmedia-studio-delete-modal .csmsmedia-studio-delete-modal-actions {
  display: flex;
  justify-content: right;
  align-items: center;
  padding-bottom: 20px;
  padding-right: 20px;
  height: 73px;
}
.csmsmedia-studio-delete-modal .csmsmedia-studio-delete-modal-actions .MuiButton-root {
  width: 72px;
  height: 36px;
  border-radius: var(--csms-studio-border-radius-8);
  padding: 0px 16px;
  gap: 4px;
}
.csmsmedia-studio-delete-modal .csmsmedia-studio-delete-modal-actions .MuiButton-root.csmsmedia-studio-delete-modal-cancel-btn {
  background: var(--csms-studio-bg-neutral-white);
  border: 1px solid var(--csms-studio-bo-hierarchy-quaternary);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csmsmedia-studio-delete-modal .csmsmedia-studio-delete-modal-actions .MuiButton-root.csmsmedia-studio-delete-modal-cancel-btn:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.csmsmedia-studio-delete-modal .csmsmedia-studio-delete-modal-actions .MuiButton-root.csmsmedia-studio-delete-modal-confirm-btn {
  background: var(--csms-studio-bg-semantic-nega-primary);
  color: var(--csms-studio-tx-neutral-white-solid);
  border: none;
}
.csmsmedia-studio-delete-modal .csmsmedia-studio-delete-modal-actions .MuiButton-root.csmsmedia-studio-delete-modal-confirm-btn:hover {
  background-color: #D32F2F;
}
.csmsmedia-studio-delete-modal .csmsmedia-studio-delete-modal-actions .MuiButton-root.csmsmedia-studio-delete-modal-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 공통 확인 모달 */
.csmsmedia-studio-confirm-modal .MuiDialog-paper {
  width: 360px;
  min-height: 166px;
  overflow: hidden;
  border-radius: 12px;
}
.csmsmedia-studio-confirm-modal .csmsmedia-studio-confirm-modal-paper {
  border-radius: 12px;
}
.csmsmedia-studio-confirm-modal {
  /* title */
}
.csmsmedia-studio-confirm-modal .csmsmedia-studio-confirm-modal-title {
  height: 56px;
  padding: 0 12px 0 20px;
  margin: 0;
  display: flex;
}
.csmsmedia-studio-confirm-modal .csmsmedia-studio-confirm-modal-title .csmsmedia-studio-confirm-modal-title-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.csmsmedia-studio-confirm-modal .csmsmedia-studio-confirm-modal-title .csmsmedia-studio-confirm-modal-title-content .csmsmedia-studio-confirm-modal-close-btn {
  width: 32px;
  height: 32px;
  padding: 0;
}
.csmsmedia-studio-confirm-modal .csmsmedia-studio-confirm-modal-title .csmsmedia-studio-confirm-modal-title-content .csmsmedia-studio-confirm-modal-close-btn svg {
  width: 18px;
  height: 18px;
}
.csmsmedia-studio-confirm-modal .csmsmedia-studio-confirm-modal-content {
  width: 100%;
  padding: 0;
}
.csmsmedia-studio-confirm-modal .csmsmedia-studio-confirm-modal-content .csmsmedia-studio-confirm-modal-body {
  width: 100%;
  min-height: 37px;
  padding: 8px 20px 8px 20px;
}
.csmsmedia-studio-confirm-modal .csmsmedia-studio-confirm-modal-content .csmsmedia-studio-confirm-modal-body .csmsmedia-studio-confirm-modal-message {
  color: var(--csms-studio-tx-hierarchy-tertiary);
}
.csmsmedia-studio-confirm-modal .csmsmedia-studio-confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
}

.translate-select-modal.MuiModal-root {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1300 !important;
}
.translate-select-modal .MuiBackdrop-root, .translate-select-modal__backdrop {
  z-index: 1299 !important;
}
.translate-select-modal__dialog {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  outline: none !important;
  margin: 0 !important;
  z-index: 1300 !important;
  pointer-events: auto !important;
}
.translate-select-modal__content {
  position: relative;
  z-index: 1300 !important;
  overflow: visible;
  background-color: #FFFFFF;
  width: 500px;
  min-height: 286px;
  border-radius: 12px;
  border: none;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 !important;
}
.translate-select-modal__header {
  height: 56px !important;
  border-bottom: 0;
  padding: 0 20px !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
}
.translate-select-modal__title {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.translate-select-modal__close-btn {
  background: none;
  border: 1px solid transparent;
  padding: 0;
  margin: 0;
  margin-left: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--csms-studio-tx-hierarchy-secondary);
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.translate-select-modal__close-btn:hover {
  background-color: #E0E3E5;
  color: var(--csms-studio-tx-hierarchy-secondary);
  border-color: transparent;
}
.translate-select-modal__close-btn:active {
  background-color: var(--csms-studio-bg-hierarchy-tertiary);
  border-color: var(--csms-studio-focus-ring-color);
  box-shadow: 0 0 0 2px var(--csms-studio-fg-coursemos-primary-30p);
}
.translate-select-modal__close-btn:focus-visible {
  outline: none;
  border-color: var(--csms-studio-focus-ring-color);
  box-shadow: 0 0 0 2px var(--csms-studio-fg-coursemos-primary-30p);
}
.translate-select-modal__body {
  overflow: visible;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  margin: 0 !important;
  flex: 1 1 auto;
}
.translate-select-modal__body:has(~ .translate-select-modal__footer) {
  padding-bottom: 0;
}
.translate-select-modal__guide {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-primary);
  margin-bottom: 12px;
  font-weight: 500 !important;
}
.translate-select-modal__guide-accent {
  color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.translate-select-modal__source-language {
  width: 100%;
  min-height: 48px;
  padding: 8px 16px;
  background-color: #ffffff;
  border: 1px solid var(--csms-studio-bo-hierarchy-tertiary);
  border-radius: 12px;
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.translate-select-modal__source-language:hover {
  border-color: var(--csms-studio-bo-hierarchy-secondary);
}
.translate-select-modal__source-language:focus-visible {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.translate-select-modal__source-language-text {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-primary);
}
.translate-select-modal__chip,
.translate-select-modal .MuiAutocomplete-tag {
  background-color: var(--csms-studio-bg-semantic-info-senary-subtle) !important;
  border: 1px solid var(--csms-studio-bo-semantic-info-quaternary) !important;
  border-radius: 999px !important;
  height: 40px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.translate-select-modal__chip .MuiChip-label,
.translate-select-modal .MuiAutocomplete-tag .MuiChip-label {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-primary) !important;
}
.translate-select-modal__chip .MuiChip-deleteIcon,
.translate-select-modal .MuiAutocomplete-tag .MuiChip-deleteIcon {
  color: var(--csms-studio-tx-hierarchy-tertiary) !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  margin-right: 4px !important;
  padding: 2px !important;
  cursor: pointer !important;
  font-size: 16px !important;
}
.translate-select-modal__chip .MuiChip-deleteIcon:hover,
.translate-select-modal .MuiAutocomplete-tag .MuiChip-deleteIcon:hover {
  color: var(--csms-studio-tx-hierarchy-secondary) !important;
  background-color: transparent !important;
}
.translate-select-modal__chip .MuiChip-deleteIcon svg,
.translate-select-modal .MuiAutocomplete-tag .MuiChip-deleteIcon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}
.translate-select-modal__chip .csms-autocomplete__closeIcon,
.translate-select-modal .MuiAutocomplete-tag .csms-autocomplete__closeIcon {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
}
.translate-select-modal__chevron {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  margin-top: 8px;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.translate-select-modal .MuiStack-root {
  width: 460px !important;
  max-width: 460px !important;
}
.translate-select-modal__guide-input {
  width: 460px !important;
  padding-right: 12px !important;
  text-align: right;
  margin-top: 8px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
  font-weight: 400 !important;
  color: #899199 !important;
}
.translate-select-modal .MuiAutocomplete-root {
  width: 460px !important;
  max-width: 460px !important;
  flex-shrink: 0 !important;
}
.translate-select-modal .MuiAutocomplete-root .MuiTextField-root {
  width: 460px !important;
  max-width: 460px !important;
}
.translate-select-modal .MuiAutocomplete-root .MuiInputBase-root {
  width: 460px !important;
  max-width: 460px !important;
  min-width: 460px !important;
  border-radius: 8px !important;
}
.translate-select-modal .MuiAutocomplete-root .MuiInputBase-root input {
  font-size: 16px !important;
  font-weight: 500 !important;
}
.translate-select-modal .MuiAutocomplete-root .MuiInputBase-root input::placeholder {
  font-weight: 400 !important;
}
.translate-select-modal .MuiAutocomplete-root .MuiInputBase-root.Mui-focused, .translate-select-modal .MuiAutocomplete-root .MuiInputBase-root:focus, .translate-select-modal .MuiAutocomplete-root .MuiInputBase-root:focus-visible {
  border-color: var(--csms-studio-bo-hierarchy-tertiary) !important;
  border-width: 1px !important;
  box-shadow: 0px 0px 0px 2px #B5D7FB;
}
.translate-select-modal .MuiAutocomplete-root .MuiAutocomplete-popupIndicator {
  margin-right: 10px !important;
  transition: none !important;
  transform: none !important;
}
.translate-select-modal .MuiAutocomplete-root .MuiAutocomplete-popupIndicator[aria-expanded=true], .translate-select-modal .MuiAutocomplete-root .MuiAutocomplete-popupIndicator[aria-expanded=false] {
  transform: none !important;
}
.translate-select-modal .MuiAutocomplete-root .MuiAutocomplete-popupIndicator svg {
  transform: none !important;
  transition: none !important;
}
.translate-select-modal .MuiAutocomplete-root .MuiOutlinedInput-root.Mui-focused fieldset {
  border-color: var(--csms-studio-bo-hierarchy-tertiary) !important;
  border-width: 1px !important;
}
.translate-select-modal .MuiAutocomplete-root fieldset {
  border-radius: 8px !important;
}
.translate-select-modal .MuiAutocomplete-root fieldset.Mui-focused {
  border-color: var(--csms-studio-bo-hierarchy-tertiary) !important;
  border-width: 1px !important;
}
.translate-select-modal__clear-icon {
  border-radius: 50%;
  background-color: #7f868c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 22px;
  height: 22px;
}
.translate-select-modal__popper {
  z-index: 1500 !important;
}
.translate-select-modal__paper,
.translate-select-modal .MuiAutocomplete-paper {
  margin-top: 4px;
  border-radius: 8px !important;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
  border: 1px solid var(--csms-studio-bo-hierarchy-primary);
  max-height: 240px !important;
  height: auto !important;
  overflow-y: auto !important;
  width: 460px !important;
}
.translate-select-modal__paper::-webkit-scrollbar,
.translate-select-modal .MuiAutocomplete-paper::-webkit-scrollbar {
  width: 6px !important;
}
.translate-select-modal__paper::-webkit-scrollbar-track,
.translate-select-modal .MuiAutocomplete-paper::-webkit-scrollbar-track {
  background: transparent !important;
}
.translate-select-modal__paper::-webkit-scrollbar-thumb,
.translate-select-modal .MuiAutocomplete-paper::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-radius: 4px !important;
}
.translate-select-modal__paper::-webkit-scrollbar-thumb:hover,
.translate-select-modal .MuiAutocomplete-paper::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3) !important;
}
.translate-select-modal__paper,
.translate-select-modal .MuiAutocomplete-paper {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important;
}
.translate-select-modal__paper .MuiAutocomplete-listbox,
.translate-select-modal .MuiAutocomplete-paper .MuiAutocomplete-listbox {
  padding: 6px 6px 6px 6px !important;
  max-height: none !important;
  overflow: visible !important;
}
.translate-select-modal__paper .MuiAutocomplete-option,
.translate-select-modal__paper li[role=option],
.translate-select-modal__paper .MuiAutocomplete-listbox > li,
.translate-select-modal .MuiAutocomplete-paper .MuiAutocomplete-option,
.translate-select-modal .MuiAutocomplete-paper li[role=option],
.translate-select-modal .MuiAutocomplete-paper .MuiAutocomplete-listbox > li {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
.translate-select-modal__paper .MuiAutocomplete-option[aria-selected=true],
.translate-select-modal__paper li[role=option][aria-selected=true],
.translate-select-modal__paper .MuiAutocomplete-listbox > li[aria-selected=true],
.translate-select-modal .MuiAutocomplete-paper .MuiAutocomplete-option[aria-selected=true],
.translate-select-modal .MuiAutocomplete-paper li[role=option][aria-selected=true],
.translate-select-modal .MuiAutocomplete-paper .MuiAutocomplete-listbox > li[aria-selected=true] {
  background-color: transparent !important;
}
.translate-select-modal__paper .MuiAutocomplete-option:hover,
.translate-select-modal__paper li[role=option]:hover,
.translate-select-modal__paper .MuiAutocomplete-listbox > li:hover,
.translate-select-modal .MuiAutocomplete-paper .MuiAutocomplete-option:hover,
.translate-select-modal .MuiAutocomplete-paper li[role=option]:hover,
.translate-select-modal .MuiAutocomplete-paper .MuiAutocomplete-listbox > li:hover {
  background-color: var(--csms-studio-bg-neutral-bg);
}
.translate-select-modal__submit {
  width: auto !important;
  min-width: 86px;
  height: 36px;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--csms-studio-tx-neutral-white-solid);
  white-space: nowrap;
  box-sizing: border-box;
  --bs-btn-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-bg: var(--csms-studio-bg-coursemos-primary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-hover-bg: var(--csms-studio-bg-coursemos-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-active-bg: var(--csms-studio-bg-coursemos-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-disabled-bg: var(--csms-studio-bg-coursemos-primary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-coursemos-primary);
}
.translate-select-modal__submit svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-neutral-white-solid);
}
.translate-select-modal__submit svg .svg-color[fill] {
  fill: var(--csms-studio-fg-neutral-white-solid);
}
.translate-select-modal__submit {
  background-color: var(--csms-studio-bg-coursemos-primary) !important;
  border-color: transparent !important;
}
.translate-select-modal__submit:focus, .translate-select-modal__submit.focus {
  box-shadow: 0px 0px 0px 2px #B5D7FB;
}
.translate-select-modal__submit:active, .translate-select-modal__submit.active {
  background-color: var(--csms-studio-bg-coursemos-primary) !important;
}
.translate-select-modal__submit.selected, .translate-select-modal__submit.is-selected, .translate-select-modal__submit[aria-pressed=true] {
  background-color: var(--csms-studio-bg-coursemos-tertiary) !important;
}
.translate-select-modal__submit:hover:not(:disabled) {
  background-color: var(--csms-studio-bg-coursemos-secondary) !important;
}
.translate-select-modal__submit:disabled, .translate-select-modal__submit.disabled {
  opacity: 0.4;
}
.translate-select-modal__footer {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border-top: none !important;
  margin: 0 20px;
  margin-top: auto !important;
  padding: 20px 0 20px 0 !important;
}

@media (max-height: 1147px) {
  .csmsmedia-studio-modal-content.info-container {
    height: 90%;
  }
  .csmsmedia-studio-modal-content.info-container .csmsmedia-studio-modal-content-body {
    height: calc(100% - 64px);
  }
  .csmsmedia-studio-modal-content.info-container .csmsmedia-studio-modal-content-body .moodle-detail-container-wrapper {
    height: 100%;
  }
  .csmsmedia-studio-modal-content.info-container .csmsmedia-studio-modal-content-body .moodle-detail-container-wrapper .container-video-wrapper .video-converting__wrapper {
    height: 100%;
  }
}
@media (max-height: 880px) {
  .csmsmedia-studio-modal-content.content-list-container {
    height: auto;
  }
  .csmsmedia-studio-modal-content.content-list-container .csmsmedia-studio-modal-content-body .moodle-loading-container {
    height: calc(90vh - 64px);
  }
  .csmsmedia-studio-modal-content.content-list-container .moodle-detail-container-wrapper {
    height: auto;
  }
  .csmsmedia-studio-modal-content.content-list-container .moodle-detail-container-wrapper .container-video-wrapper {
    height: 100%;
  }
  .csmsmedia-studio-modal-content.content-list-container .moodle-detail-container-wrapper .container-video-wrapper-content {
    height: calc(100% - 56px);
  }
  .csmsmedia-studio-modal-content .moodle-container-wrapper {
    width: 100%;
    height: auto !important;
  }
  .moodle-container-wrapper {
    height: auto;
  }
}
@media (max-height: 908px) {
  .csmsmedia-studio-modal-content.sub-chap-edit-container {
    height: 90%;
  }
  .csmsmedia-studio-modal-content.sub-chap-edit-container .csmsmedia-studio-modal-content-body {
    height: calc(100% - 64px);
  }
  .csmsmedia-studio-modal-content.sub-chap-edit-container .csmsmedia-studio-modal-content-body .moodle-detail-container-wrapper {
    height: 100%;
  }
  .csmsmedia-studio-modal-content.sub-chap-edit-container .csmsmedia-studio-modal-content-body .moodle-detail-container-wrapper .container-subtitle-editor {
    height: 100%;
  }
  .content-subtitle-editor .subtitle-editor-layout .col-left .player-wrapper {
    height: calc(100% - 168px) !important;
  }
  .container-chapter-editor {
    height: 100% !important;
  }
  .container-chapter-editor .wrapper-chapter-editor {
    height: calc(100% - 44px) !important;
  }
  .container-chapter-editor .wrapper-chapter-editor .content-chapter-editor .chapter-editor-layout .col-left .player-wrapper {
    height: 100% !important;
  }
}
@media (max-height: 880px) {
  .csmsmedia-studio-modal-content.summary-edit-container,
  .csmsmedia-studio-modal-content.content-list-container {
    height: 90%;
  }
  .csmsmedia-studio-modal-content.summary-edit-container .csmsmedia-studio-modal-content-body,
  .csmsmedia-studio-modal-content.content-list-container .csmsmedia-studio-modal-content-body {
    height: calc(100% - 64px);
  }
  .csmsmedia-studio-modal-content.summary-edit-container .csmsmedia-studio-modal-content-body .moodle-detail-container-wrapper,
  .csmsmedia-studio-modal-content.content-list-container .csmsmedia-studio-modal-content-body .moodle-detail-container-wrapper {
    height: 100%;
  }
}
.moodle-detail-container {
  /* video detail container */
}
.moodle-detail-container .moodle-container-video-tabs {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.moodle-detail-container .moodle-container-video-tabs .moodle-container-video-tabs-error {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
}
.moodle-detail-container .tab-panel-full-height {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.moodle-detail-container .tab-panel-full-height .tab-panel-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.moodle-detail-container {
  /* summary container */
}
.moodle-detail-container .tab-video-summary .box-summary-list-btn-box {
  flex-shrink: 0;
}
.moodle-detail-container {
  /* summary container */
}
.moodle-detail-container .moodle-container-summary-list {
  width: 100%;
  border-top: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  border-bottom: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  margin-bottom: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.moodle-detail-container .moodle-container-summary-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root {
  height: 24px;
  padding: 8px 0;
}
.moodle-detail-container .moodle-container-summary-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(6) {
  width: 10%;
  min-width: 10%;
  max-width: 10%;
  padding: 4px 8px;
}
.moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(6) {
  width: 10%;
  min-width: 10%;
  padding: 6px 8px;
}
.moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(6) .btn-csms-studio-icon {
  border: 1px solid var(--csms-studio-bo-hierarchy-tertiary);
  border-radius: var(--csms-studio-border-radius-6);
}
.moodle-detail-container .moodle-container-summary-list .moodle-table-body-wrapper .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(8) {
  width: 11%;
  min-width: 11%;
  padding: 6px 8px;
  gap: 8px;
}
.moodle-detail-container .box-summary-list-btn-box .add-summary-button {
  width: 96px;
  height: 36px;
  cursor: pointer;
}
.moodle-detail-container .box-summary-list-btn-box .add-summary-button .csms-studio-label-xsm-medium {
  margin-right: 4px;
}
.moodle-detail-container .box-summary-list-btn-box .add-summary-button svg {
  width: 14px !important;
  height: 14px !important;
}
.moodle-detail-container .summary-container {
  width: 100%;
  height: 100%;
  padding-top: 16px;
}
.moodle-detail-container .summary-container.is-readonly .EasyMDEContainer {
  pointer-events: none !important;
  cursor: default !important;
}
.moodle-detail-container .summary-container .summary-header {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.moodle-detail-container .summary-container .summary-header .btn-csms-studio-icon {
  margin-right: 4.5px;
  cursor: pointer;
}
.moodle-detail-container .summary-container .summary-header .summary-header-title {
  display: flex;
  align-items: center;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.moodle-detail-container .summary-container .summary-header .summary-header-title .summary-header-title-lang {
  color: var(--csms-studio-tx-coursemos-primary);
  margin-right: 4px;
}
.moodle-detail-container .summary-container .summary-content {
  width: 100%;
  height: calc(100% - 52px);
  display: flex;
  flex-direction: column;
}
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper {
  flex: 1;
  min-height: 0;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  /* 둥근 모서리 밖으로 안 튀어나오게 */
}
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .simplemde-editor-1-wrapper {
  height: 100%;
}
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .EasyMDEContainer {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: none;
}
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper {
  /* 위/아래는 높이 고정 */
}
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .editor-toolbar,
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .editor-statusbar {
  flex: 0 0 auto;
  border: none;
}
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper {
  /* 에디터 툴바 스타일 리셋 (Moodle 등에서 상속받는 스타일 방지) */
}
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .editor-toolbar {
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid #ddd;
  opacity: 1 !important;
  display: flex;
  align-items: center;
}
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .editor-toolbar a,
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .editor-toolbar button {
  background: transparent;
  outline: none;
  padding: 0;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  color: #444 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  box-shadow: none !important;
  cursor: pointer;
}
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .editor-toolbar a:before,
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .editor-toolbar button:before {
  font-size: 16px !important;
}
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .editor-toolbar a.active, .moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .editor-toolbar a:hover,
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .editor-toolbar button.active,
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .editor-toolbar button:hover {
  background-color: #f5f5f5 !important;
  border: 1px solid #ddd !important;
}
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .editor-toolbar a,
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .editor-toolbar button {
  /* 아이콘이 텍스트로 보일 경우 대비 */
  font-weight: normal !important;
  text-decoration: none !important;
}
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .editor-toolbar a i.fa,
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .editor-toolbar button i.fa {
  font-size: 16px !important;
}
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .editor-toolbar .separator {
  border-left: 1px solid #ddd !important;
  border-right: none !important;
  width: 0 !important;
  margin: 0 6px !important;
  height: 16px;
  display: inline-block;
}
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper {
  /* 가운데 에디터 영역이 나머지 전체를 차지 */
}
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .CodeMirror {
  flex: 1 1 auto;
  height: 100% !important;
  border: none;
  border-top: 1px solid #ddd;
  font-family: inherit;
}
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .CodeMirror .CodeMirror-placeholder {
  color: var(--csms-studio-tx-hierarchy-quinary) !important;
}
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .CodeMirror-measure {
  position: absolute;
  visibility: hidden;
}
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper {
  /* 실제 스크롤 되는 영역 */
}
.moodle-detail-container .summary-container .summary-content .summary-mde-wrapper .CodeMirror-scroll {
  width: 100%;
  margin: 0;
  padding: 10px;
}
.moodle-detail-container .summary-container .summary-content .summary-footer {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.moodle-detail-container .summary-container .summary-content .summary-footer .summary-footer-btn {
  width: 80px;
  height: 36px;
  gap: 4px;
  border-radius: var(--csms-studio-border-radius-8);
  padding: 0 16px;
  background-color: var(--csms-studio-bg-coursemos-primary);
  color: var(--csms-studio-tx-neutral-white-solid);
  cursor: pointer;
}
.moodle-detail-container .summary-container .summary-content .summary-footer .temp-save-button {
  width: 80px;
  height: 36px;
  border-radius: 8px;
  padding: 0 10px;
  margin-right: 8px;
  background-color: var(--csms-studio-bg-neutral-white);
  border: 1px solid var(--csms-studio-bo-hierarchy-quaternary);
  color: var(--csms-studio-tx-hierarchy-quaternary);
  cursor: pointer;
  text-align: center;
  line-height: 36px;
}
.moodle-detail-container .summary-container .summary-content .summary-footer .temp-save-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.moodle-detail-container {
  /* video detail container */
}
.moodle-detail-container .moodle-container-video-tabs {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.moodle-detail-container .moodle-container-video-tabs .moodle-container-video-tabs-error {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
}
.moodle-detail-container .tab-panel-full-height {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.moodle-detail-container .tab-panel-full-height .tab-panel-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.moodle-detail-container {
  /* subtitle tab container */
}
.moodle-detail-container .tab-video-subtitle .box-subtitle-list-btn-box {
  flex-shrink: 0;
}
.moodle-detail-container {
  /* subtitle container */
}
.moodle-detail-container .moodle-container-subtitle-list {
  width: 100%;
  height: 520px;
  margin-bottom: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.moodle-detail-container .moodle-container-subtitle-list .moodle-table-body-wrapper .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(6) .btn-csms-studio-icon {
  margin: 0 auto;
  border: 1px solid var(--csms-studio-bo-hierarchy-tertiary);
  border-radius: var(--csms-studio-border-radius-6);
}
.moodle-detail-container .subtitle-upload-button {
  width: 90px;
  height: 36px;
  gap: 4px;
  display: flex;
  align-items: center;
  border: 1px solid var(--csms-studio-bo-hierarchy-quaternary);
  border-radius: var(--csms-studio-border-radius-8);
  background-color: var(--csms-studio-bg-neutral-white);
  margin-left: 15px;
  cursor: pointer;
}
.moodle-detail-container .subtitle-upload-button .subtitle-upload-button-text {
  display: flex;
  align-items: center;
  color: var(--csms-studio-tx-hierarchy-tertiary);
}
.moodle-detail-container .subtitle-upload-button .subtitle-upload-button-icon {
  color: var(--csms-studio-fg-coursemos-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.moodle-detail-container .subtitle-upload-button .subtitle-upload-button-icon svg {
  width: 14px !important;
  height: 14px !important;
}
.moodle-detail-container .box-subtitle-list-btn-box .add-subtitle-button {
  width: 96px;
  height: 36px;
  cursor: pointer;
}
.moodle-detail-container .box-subtitle-list-btn-box .add-subtitle-button .csms-studio-label-xsm-medium {
  margin-right: 4px;
}
.moodle-detail-container .box-subtitle-list-btn-box .add-subtitle-button svg {
  width: 14px !important;
  height: 14px !important;
}

.csmsmedia-studio-modal-content .toast-wrapper-subtitle-modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 760px;
  max-width: calc(100% - 32px);
  height: 64px;
  padding: 14px 16px;
  box-sizing: border-box;
  border-bottom-right-radius: var(--csms-studio-border-radius-16);
  border-bottom-left-radius: var(--csms-studio-border-radius-16);
  z-index: 1000;
  margin: 0 auto;
}

.moodle-detail-container {
  /* video detail container */
}
.moodle-detail-container .moodle-container-video-tabs {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.moodle-detail-container .moodle-container-video-tabs .moodle-container-video-tabs-error {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
}
.moodle-detail-container .tab-panel-full-height {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.moodle-detail-container .tab-panel-full-height .tab-panel-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.moodle-detail-container {
  /* chapter tab container */
}
.moodle-detail-container .tab-video-chapter .box-chapter-list-btn-box {
  flex-shrink: 0;
}
.moodle-detail-container {
  /* chapter container */
}
.moodle-detail-container .moodle-container-chapter-list {
  width: 100%;
  height: 520px;
  margin-bottom: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.moodle-detail-container .moodle-container-chapter-list .moodle-table-body-wrapper .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(6) .btn-csms-studio-icon {
  border: 1px solid var(--csms-studio-bo-hierarchy-tertiary);
  border-radius: var(--csms-studio-border-radius-6);
  margin: 0 auto;
}
.moodle-detail-container .box-chapter-list-btn-box .add-chapter-button {
  width: 96px;
  height: 36px;
  cursor: pointer;
}
.moodle-detail-container .box-chapter-list-btn-box .add-chapter-button .csms-studio-label-xsm-medium {
  margin-right: 4px;
}
.moodle-detail-container .box-chapter-list-btn-box .add-chapter-button svg {
  width: 14px !important;
  height: 14px !important;
}

.csmsmedia-studio-modal-content .toast-wrapper-chapter-modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 760px;
  max-width: calc(100% - 32px);
  height: 64px;
  padding: 14px 16px;
  box-sizing: border-box;
  border-bottom-right-radius: var(--csms-studio-border-radius-16);
  border-bottom-left-radius: var(--csms-studio-border-radius-16);
  z-index: 1000;
  margin: 0 auto;
}

.moodle-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  padding-right: 24px;
  padding-left: 24px;
  padding-bottom: 20px;
  align-items: center;
  justify-content: center;
  background-color: var(--csms-studio-bg-neutral-white);
}
.moodle-container .video-upload-button {
  width: 119px;
  height: 36px;
  gap: 4px;
  display: flex;
  align-items: center;
  border: 1px solid var(--csms-studio-bo-hierarchy-quaternary);
  border-radius: var(--csms-studio-border-radius-8);
  background-color: var(--csms-studio-bg-neutral-white);
  cursor: pointer;
}
.moodle-container .video-upload-button .video-upload-button-text {
  display: flex;
  align-items: center;
  color: var(--csms-studio-tx-hierarchy-tertiary);
}
.moodle-container .video-upload-button .video-upload-button-icon {
  color: var(--csms-studio-fg-coursemos-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.moodle-container .video-upload-button .video-upload-button-icon svg {
  width: 14px !important;
  height: 14px !important;
}
.moodle-container .video-list {
  width: 100%;
  height: 100%;
}
.moodle-container .video-list .content-header-box {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.moodle-container .video-list .content-header-box .content-header-title {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.moodle-container .video-list .box-video-search {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 6px 8px 6px 8px;
  gap: 16px;
  background-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  margin-bottom: 8px;
}
.moodle-container .video-list .box-video-search .box-video-search-item {
  width: 301px;
  height: 32px;
  gap: 16px;
  display: flex;
  align-items: center;
}
.moodle-container .video-list .box-video-search .box-video-search-item .box-video-search-item-text {
  height: 20px;
  display: flex;
  align-items: center;
  color: #2C2F32;
  flex: none;
  order: 0;
  flex-grow: 0;
}
.moodle-container .video-list .box-video-search .box-video-search-item .box-video-search-item-textfield-box {
  width: 251px;
  height: 32px;
  gap: 4px;
  display: flex;
  align-items: center;
}
.moodle-container .video-list .box-video-search .box-video-search-item .box-video-search-item-textfield-box .box-video-search-item-textfield {
  width: 200px;
  height: 32px;
  opacity: 1;
  margin-right: 4px;
  flex-shrink: 0;
  background-color: var(--csms-studio-bg-neutral-white);
}
.moodle-container .video-list .box-video-search .box-video-search-item .box-video-search-item-textfield-box .box-video-search-item-textfield .MuiOutlinedInput-root {
  height: 32px !important;
  padding: 0 10px;
  border-radius: var(--csms-studio-border-radius-6) !important;
  background-color: var(--csms-studio-bg-neutral-white) !important;
  opacity: 1 !important;
}
.moodle-container .video-list .box-video-search .box-video-search-item .box-video-search-item-textfield-box .box-video-search-item-textfield .MuiOutlinedInput-root .MuiOutlinedInput-input {
  padding: 0 !important;
}
.moodle-container .video-list .box-video-search .box-video-search-item .box-video-search-item-textfield-box .box-video-search-item-textfield .MuiOutlinedInput-root .MuiInputAdornment-root {
  display: none !important;
}
.moodle-container .video-list .box-video-search .box-video-search-item .box-video-search-item-textfield-box .box-video-search-item-textfield .MuiFormHelperText-root {
  display: none !important;
}
.moodle-container .video-list .box-video-search .box-video-search-item .box-video-search-item-textfield-box .box-video-search-item-button {
  width: 47px;
  height: 32px;
  background-color: var(--csms-studio-bg-hierarchy-quinary);
  color: var(--csms-studio-tx-neutral-white-solid);
  border-radius: var(--csms-studio-border-radius-6);
  box-sizing: border-box;
  padding: 0 12px;
  gap: 4px;
  text-transform: none;
  min-width: 47px;
  cursor: pointer;
}
.moodle-container .video-list .box-video-search .box-video-search-item .box-video-search-item-textfield-box .search-cancel-button {
  width: 72px;
  height: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.moodle-container .video-list .box-video-list-table {
  width: 100%;
  flex: 1;
  min-height: 0;
  gap: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.moodle-container .box-video-list-btn-box {
  width: 100%;
  min-height: 36px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.moodle-container .box-video-list-btn-box .box-video-list-btn-box-left {
  display: flex;
  align-items: center;
  gap: 4px;
}
.moodle-container .box-video-list-btn-box .box-video-list-btn-box-left .total-count-text {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.moodle-container .box-video-list-btn-box .box-video-list-btn-box-left .total-count-text .total-count-number {
  color: var(--csms-studio-tx-coursemos-primary);
}
.moodle-container .box-video-list-btn-box .box-video-list-btn-box-left .page-range-text {
  display: flex;
  align-items: center;
}
.moodle-container .box-video-list-btn-box .box-video-list-btn-box-left .page-range-text div {
  display: flex;
  align-items: center;
}
.moodle-container .box-video-list-btn-box .box-video-list-btn-box-left .page-range-text {
  gap: 4px;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.moodle-container .box-video-list-btn-box .box-video-list-btn-box-left .page-range-text .page-range-nav-button {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--csms-studio-fg-hierarchy-quinary);
}
.moodle-container .box-video-list-btn-box .box-video-list-btn-box-left .page-range-text .page-range-nav-button:disabled {
  cursor: not-allowed;
}
.moodle-container .box-video-list-btn-box .box-video-list-btn-box-left .page-range-text .page-index-text {
  color: var(--csms-studio-tx-hierarchy-quinary);
}
.moodle-container .box-video-list-btn-box .box-video-selection-bar {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.moodle-container .box-video-list-btn-box .box-video-selection-bar .selection-info {
  height: 21px;
  display: flex;
  align-items: center;
  color: var(--csms-studio-tx-hierarchy-secondary);
  margin-right: 8px;
  flex-shrink: 0;
}
.moodle-container .box-video-list-btn-box .box-video-selection-bar .selection-info .selection-count {
  color: var(--csms-studio-tx-semantic-info-primary);
}
.moodle-container .box-video-list-btn-box .box-video-selection-bar .selection-delete-button {
  width: 71px;
  height: 36px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--csms-studio-bo-hierarchy-quaternary);
  border-radius: var(--csms-studio-border-radius-8);
  background-color: var(--csms-studio-bg-neutral-white);
  text-transform: none;
  overflow-x: hidden;
  cursor: pointer;
}
.moodle-container .box-video-list-btn-box .box-video-selection-bar .selection-delete-button .selection-delete-text {
  margin-right: 4px;
  line-height: 1;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.moodle-container .box-video-list-btn-box .box-video-selection-bar .selection-delete-button .selection-delete-icon {
  color: var(--csms-studio-fg-semantic-nega);
}
.moodle-container .box-video-list-btn-box .box-video-selection-bar .selection-delete-button:hover {
  border-color: var(--csms-studio-tx-semantic-nega-primary);
  background-color: rgba(240, 68, 56, 0.08);
}
.moodle-container {
  /* video list table */
}
.moodle-container .moodle-video-table-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.moodle-container .moodle-video-table-wrapper .video-list-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.moodle-container .moodle-video-table-wrapper .video-list-empty-state .video-list-empty-state-icon {
  color: var(--csms-studio-fg-hierarchy-senary);
  width: 31.54px;
  height: 32px;
  margin-bottom: 8px;
}
.moodle-container .moodle-video-table-wrapper .video-list-empty-state .video-list-empty-state-message {
  width: 100%;
  text-align: center;
  height: 21px;
  color: var(--csms-studio-tx-hierarchy-quinary);
  margin-bottom: 16px;
  --csms-studio-label-font-size: 14px;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  position: relative;
  width: 100%;
  max-height: 100%;
  border-top: 1px solid var(--csms-studio-bo-hierarchy-quaternary);
  align-items: flex-start;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list {
  table-layout: auto;
  width: 100%;
  min-width: 100%;
  height: auto !important;
  flex-grow: 0;
  flex-shrink: 0;
  position: relative;
  touch-action: pan-x pan-y;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  height: 40px !important;
  border-bottom: 1px solid var(--csms-studio-bo-hierarchy-quaternary);
  width: 100%;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableRow-root {
  border-bottom: 1px solid var(--csms-studio-bo-hierarchy-tertiary);
  height: 40px !important;
  width: 100%;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root {
  color: var(--csms-studio-tx-hierarchy-primary);
  background-color: var(--csms-studio-bg-hierarchy-primary);
  border-bottom: none;
  box-sizing: border-box;
  overflow: hidden;
  height: 40px !important;
  padding: 0 !important;
  line-height: 40px !important;
  font-size: 14px;
  font-weight: 500;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(1) {
  padding: 0 8px !important;
  width: 5%;
  min-width: 40px;
  text-align: center;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(1) .MuiCheckbox-root {
  padding: 4px;
  color: var(--csms-studio-tx-hierarchy-tertiary);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(1) .MuiCheckbox-root:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root.table-header-spacer {
  flex: 1;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(2) {
  width: 40%;
  min-width: 320px;
  padding: 0 8px !important;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(3) {
  width: 15%;
  min-width: 150px;
  padding: 0 8px !important;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(4) {
  width: 10%;
  min-width: 100px;
  padding: 0 8px !important;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(5) {
  width: 10%;
  min-width: 80px;
  padding: 0 8px !important;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root:nth-child(6) {
  width: 5%;
  min-width: 50px;
  padding: 0 8px !important;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root .file-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root .table-header-cell-with-icon {
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root .table-header-cell-with-icon:hover {
  color: var(--csms-studio-tx-hierarchy-primary);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root .table-header-cell-with-icon svg {
  transition: transform 0.2s ease;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root .table-header-cell-with-icon svg.sort-asc {
  transform: rotate(180deg);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root .table-header-cell-with-icon svg.sort-desc {
  transform: rotate(0deg);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root .table-header-icon {
  font-size: 16px;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root.table-header-select-button-cell .MuiButton-root {
  color: var(--csms-studio-tx-hierarchy-tertiary);
  border-color: var(--csms-studio-bo-hierarchy-tertiary);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  padding: 6px 12px;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-head-fixed .MuiTableCell-root.table-header-select-button-cell .MuiButton-root:hover {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: var(--csms-studio-bo-hierarchy-tertiary);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll {
  width: 100%;
  height: auto;
  max-height: 500px;
  overflow-y: auto;
  position: relative;
  flex-grow: 0;
  flex-shrink: 0;
  padding-top: 0;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row {
  width: 100%;
  border-bottom: 1px solid var(--csms-studio-bo-hierarchy-quaternary);
  height: 100px !important;
  max-height: 100px !important;
  flex-grow: 0;
  flex-shrink: 0;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row.is-checked {
  background-color: var(--csms-studio-bg-coursemos-senary, #E5F1FF);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row.is-checked:hover {
  background-color: var(--csms-studio-bg-coursemos-senary, #E5F1FF);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row:hover {
  background-color: rgba(0, 0, 0, 0.02);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root {
  padding: 12px 16px;
  color: var(--csms-studio-tx-hierarchy-secondary);
  vertical-align: middle;
  box-sizing: border-box;
  overflow: hidden;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(1) {
  padding: 10px 8px;
  width: 5%;
  min-width: 40px;
  text-align: center;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(1) .MuiCheckbox-root {
  padding: 4px;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(1) .MuiCheckbox-root:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root .moodle-custom-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--csms-studio-bo-hierarchy-tertiary);
  background-color: var(--csms-studio-bg-neutral-white);
  border-radius: var(--csms-studio-border-radius-6);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(2), .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-thumbnail-filename {
  width: 40%;
  min-width: 320px;
  padding: 10px 8px;
  gap: 8px;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(2) .moodle-row-thumbnail-filename, .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-thumbnail-filename .moodle-row-thumbnail-filename {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(2) .moodle-row-thumbnail-filename .moodle-thumbnail-container, .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-thumbnail-filename .moodle-row-thumbnail-filename .moodle-thumbnail-container {
  position: relative;
  width: 120px;
  height: 68px;
  flex-shrink: 0;
  overflow: hidden;
  background-color: var(--csms-studio-bg-hierarchy-primary-subtle);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(2) .moodle-row-thumbnail-filename .moodle-thumbnail-container .moodle-thumbnail-skeleton, .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-thumbnail-filename .moodle-row-thumbnail-filename .moodle-thumbnail-container .moodle-thumbnail-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(2) .moodle-row-thumbnail-filename .moodle-thumbnail-container .moodle-thumbnail-img, .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-thumbnail-filename .moodle-row-thumbnail-filename .moodle-thumbnail-container .moodle-thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(2) .moodle-row-thumbnail-filename .moodle-thumbnail-container .moodle-thumbnail-progress-overlay, .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-thumbnail-filename .moodle-row-thumbnail-filename .moodle-thumbnail-container .moodle-thumbnail-progress-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(2) .moodle-row-thumbnail-filename .moodle-thumbnail-container .moodle-thumbnail-progress-overlay .moodle-thumbnail-progress-bar, .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-thumbnail-filename .moodle-row-thumbnail-filename .moodle-thumbnail-container .moodle-thumbnail-progress-overlay .moodle-thumbnail-progress-bar {
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(2) .moodle-row-thumbnail-filename .moodle-thumbnail-container .moodle-thumbnail-progress-overlay .moodle-thumbnail-progress-bar .moodle-thumbnail-progress-fill, .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-thumbnail-filename .moodle-row-thumbnail-filename .moodle-thumbnail-container .moodle-thumbnail-progress-overlay .moodle-thumbnail-progress-bar .moodle-thumbnail-progress-fill {
  height: 100%;
  background-color: var(--csms-studio-bg-coursemos-primary, #0066E0);
  transition: width 0.3s ease;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(2) .moodle-row-thumbnail-filename .moodle-thumbnail-container .moodle-thumbnail-progress-overlay .moodle-thumbnail-progress-text, .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-thumbnail-filename .moodle-row-thumbnail-filename .moodle-thumbnail-container .moodle-thumbnail-progress-overlay .moodle-thumbnail-progress-text {
  color: white;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(2) .moodle-row-thumbnail-filename .moodle-filename-text, .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-thumbnail-filename .moodle-row-thumbnail-filename .moodle-filename-text {
  flex: 1;
  min-width: 0;
  color: var(--csms-studio-tx-hierarchy-secondary);
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(3), .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-date {
  width: 15%;
  min-width: 150px;
  color: var(--csms-studio-tx-hierarchy-secondary);
  padding: 10px 8px;
  gap: 8px;
  border-right: 1px solid var(--csms-studio-bo-hierarchy-secondary);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(4), .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-duration {
  width: 10%;
  min-width: 100px;
  color: var(--csms-studio-tx-hierarchy-secondary);
  padding: 10px 8px;
  gap: 8px;
  border-right: 1px solid var(--csms-studio-bo-hierarchy-secondary);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(5), .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-select-button {
  width: 10%;
  min-width: 80px;
  padding: 10px 20px;
  gap: 8px;
  text-align: center;
  border-right: 1px solid var(--csms-studio-bo-hierarchy-secondary);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(5) .moodle-select-button, .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-select-button .moodle-select-button {
  width: 55px;
  height: 36px;
  border: 0;
  border-radius: var(--csms-studio-border-radius-8);
  background-color: var(--csms-studio-bg-coursemos-primary);
  color: var(--csms-studio-tx-neutral-white-solid);
  cursor: pointer;
  padding: 0px 16px;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(5) .moodle-select-button:hover, .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-select-button .moodle-select-button:hover {
  background-color: #0066E0;
  box-shadow: none;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(6), .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-more {
  width: 5%;
  min-width: 50px;
  padding: 12px 16px;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(6) .moodle-more-button, .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-more .moodle-more-button {
  width: 28px;
  height: 28px;
  border-radius: var(--csms-studio-border-radius-6);
  padding: 0;
  color: var(--csms-studio-tx-hierarchy-tertiary);
  background: transparent;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(6) .moodle-more-button:hover, .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-more .moodle-more-button:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(6) .moodle-more-button .MuiSvgIcon-root, .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-more .moodle-more-button .MuiSvgIcon-root {
  font-size: 20px;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root:nth-child(6) .moodle-more-button.is-open, .moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-table-cell-more .moodle-more-button.is-open {
  background: var(--csms-studio-bg-neutral-b15p);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .table-video-list .moodle-table-body-scroll .moodle-table-row .MuiTableCell-root.moodle-empty-message {
  text-align: center;
  padding: 40px 20px;
  color: var(--csms-studio-tx-hierarchy-tertiary);
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .form-check {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .form-check .form-check-input {
  width: 20px;
  height: 20px;
  border: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width=%2720%27 height=%2720%27 viewBox=%270 0 20 20%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M9.59961 1H10.4004C12.0968 1 13.3095 1.00048 14.2598 1.07812C15.198 1.15481 15.7924 1.30188 16.2695 1.54492C17.2103 2.02429 17.9757 2.78966 18.4551 3.73047C18.6981 4.20761 18.8452 4.80201 18.9219 5.74023C18.9995 6.69051 19 7.90316 19 9.59961V10.4004C19 12.0968 18.9995 13.3095 18.9219 14.2598C18.8452 15.198 18.6981 15.7924 18.4551 16.2695C17.9757 17.2103 17.2103 17.9757 16.2695 18.4551C15.7924 18.6981 15.198 18.8452 14.2598 18.9219C13.3095 18.9995 12.0968 19 10.4004 19H9.59961C7.90316 19 6.69051 18.9995 5.74023 18.9219C4.80201 18.8452 4.20761 18.6981 3.73047 18.4551C2.78966 17.9757 2.02429 17.2103 1.54492 16.2695C1.30188 15.7924 1.15481 15.198 1.07812 14.2598C1.00048 13.3095 1 12.0968 1 10.4004V9.59961C1 7.90316 1.00048 6.69051 1.07812 5.74023C1.15481 4.80201 1.30188 4.20761 1.54492 3.73047C2.02429 2.78966 2.78966 2.02429 3.73047 1.54492C4.20761 1.30188 4.80201 1.15481 5.74023 1.07812C6.69051 1.00048 7.90316 1 9.59961 1Z%27 fill=%27white%27 stroke=%27%23D3D6D9%27 stroke-width=%272%27/%3E%3C/svg%3E");
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .form-check .form-check-input:checked {
  background-color: var(--csms-studio-bg-semantic-info-primary);
  background-image: url("data:image/svg+xml,%3Csvg width=%2720%27 height=%2720%27 viewBox=%270 0 20 20%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M9.59961 1H10.4004C12.0968 1 13.3095 1.00048 14.2598 1.07812C15.198 1.15481 15.7924 1.30188 16.2695 1.54492C17.2103 2.02429 17.9757 2.78966 18.4551 3.73047C18.6981 4.20761 18.8452 4.80201 18.9219 5.74023C18.9995 6.69051 19 7.90316 19 9.59961V10.4004C19 12.0968 18.9995 13.3095 18.9219 14.2598C18.8452 15.198 18.6981 15.7924 18.4551 16.2695C17.9757 17.2103 17.2103 17.9757 16.2695 18.4551C15.7924 18.6981 15.198 18.8452 14.2598 18.9219C13.3095 18.9995 12.0968 19 10.4004 19H9.59961C7.90316 19 6.69051 18.9995 5.74023 18.9219C4.80201 18.8452 4.20761 18.6981 3.73047 18.4551C2.78966 17.9757 2.02429 17.2103 1.54492 16.2695C1.30188 15.7924 1.15481 15.198 1.07812 14.2598C1.00048 13.3095 1 12.0968 1 10.4004V9.59961C1 7.90316 1.00048 6.69051 1.07812 5.74023C1.15481 4.80201 1.30188 4.20761 1.54492 3.73047C2.02429 2.78966 2.78966 2.02429 3.73047 1.54492C4.20761 1.30188 4.80201 1.15481 5.74023 1.07812C6.69051 1.00048 7.90316 1 9.59961 1Z%27 fill=%27%230066E0%27 stroke=%27transparent%27 stroke-width=%272%27/%3E%3Cpath d=%27M6.5 10L9 12.5L13.5 8%27 stroke=%27white%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .form-check .form-check-input:indeterminate {
  background-color: var(--csms-studio-bg-semantic-info-primary);
  background-image: url("data:image/svg+xml,<svg width=%2720%27 height=%2720%27 viewBox=%270 0 20 20%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path d=%27M9.59961 1H10.4004C12.0968 1 13.3095 1.00048 14.2598 1.07812C15.198 1.15481 15.7924 1.30188 16.2695 1.54492C17.2103 2.02429 17.9757 2.78966 18.4551 3.73047C18.6981 4.20761 18.8452 4.80201 18.9219 5.74023C18.9995 6.69051 19 7.90316 19 9.59961V10.4004C19 12.0968 18.9995 13.3095 18.9219 14.2598C18.8452 15.198 18.6981 15.7924 18.4551 16.2695C17.9757 17.2103 17.2103 17.9757 16.2695 18.4551C15.7924 18.6981 15.198 18.8452 14.2598 18.9219C13.3095 18.9995 12.0968 19 10.4004 19H9.59961C7.90316 19 6.69051 18.9995 5.74023 18.9219C4.80201 18.8452 4.20761 18.6981 3.73047 18.4551C2.78966 17.9757 2.02429 17.2103 1.54492 16.2695C1.30188 15.7924 1.15481 15.198 1.07812 14.2598C1.00048 13.3095 1 12.0968 1 10.4004V9.59961C1 7.90316 1.00048 6.69051 1.07812 5.74023C1.15481 4.80201 1.30188 4.20761 1.54492 3.73047C2.02429 2.78966 2.78966 2.02429 3.73047 1.54492C4.20761 1.30188 4.80201 1.15481 5.74023 1.07812C6.69051 1.00048 7.90316 1 9.59961 1Z%27 fill=%27%230066E0%27 stroke=%27transparent%27 stroke-width=%272%27/><rect x=%275%27 y=%278.5%27 width=%2710%27 height=%273%27 fill=%27white%27/></svg>");
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .form-check .form-check-input:hover:not(:checked):not(:disabled) {
  opacity: 0.8;
}
.moodle-container .moodle-video-table-wrapper .moodle-container-video-list .form-check .form-check-input:disabled {
  cursor: not-allowed;
  background-image: url("data:image/svg+xml,%3Csvg width=%2720%27 height=%2720%27 viewBox=%270 0 20 20%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M9.59961 1H10.4004C12.0968 1 13.3095 1.00048 14.2598 1.07812C15.198 1.15481 15.7924 1.30188 16.2695 1.54492C17.2103 2.02429 17.9757 2.78966 18.4551 3.73047C18.6981 4.20761 18.8452 4.80201 18.9219 5.74023C18.9995 6.69051 19 7.90316 19 9.59961V10.4004C19 12.0968 18.9995 13.3095 18.9219 14.2598C18.8452 15.198 18.6981 15.7924 18.4551 16.2695C17.9757 17.2103 17.2103 17.9757 16.2695 18.4551C15.7924 18.6981 15.198 18.8452 14.2598 18.9219C13.3095 18.9995 12.0968 19 10.4004 19H9.59961C7.90316 19 6.69051 18.9995 5.74023 18.9219C4.80201 18.8452 4.20761 18.6981 3.73047 18.4551C2.78966 17.9757 2.02429 17.2103 1.54492 16.2695C1.30188 15.7924 1.15481 15.198 1.07812 14.2598C1.00048 13.3095 1 12.0968 1 10.4004V9.59961C1 7.90316 1.00048 6.69051 1.07812 5.74023C1.15481 4.80201 1.30188 4.20761 1.54492 3.73047C2.02429 2.78966 2.78966 2.02429 3.73047 1.54492C4.20761 1.30188 4.80201 1.15481 5.74023 1.07812C6.69051 1.00048 7.90316 1 9.59961 1Z%27 fill=%27%23E6E6E6%27 stroke=%27%23D3D6D9%27 stroke-width=%272%27/%3E%3C/svg%3E");
}
.moodle-container .moodle-video-table-wrapper .moodle-pagination-fixed {
  flex-shrink: 0;
  padding-top: 16px;
}

.csmsmedia-studio-modal-content .thumbnail-modal__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  min-height: 338px;
  max-height: 90vh;
  background-color: var(--csms-studio-bg-neutral-white);
  box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.04), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
  border-radius: 12px;
  border: none;
  outline: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.csmsmedia-studio-modal-content .thumbnail-modal__container .csms-studio-toast .toast-body {
  width: 100%;
}
.csmsmedia-studio-modal-content .thumbnail-modal__container .modal-content {
  overflow: visible;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 !important;
  max-height: 90vh;
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-header {
  height: 56px !important;
  border-bottom: 0;
  padding: 0 12px 0 20px !important;
  margin: 0 !important;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-header .modal-title {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-header .btn-close-custom {
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  margin-left: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2C2F32;
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-header-spacer {
  width: 460px;
  height: 1px;
  margin: 0 20px;
  background-color: var(--csms-studio-bo-hierarchy-secondary);
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body {
  overflow: visible;
  padding: 10px 20px 20px 20px !important;
  margin: 0 !important;
  flex: 1 1 auto;
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-area {
  position: relative;
  width: 100%;
  height: 263px;
  min-height: 56px;
  gap: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid var(--csms-studio-bo-hierarchy-secondary, #E0E3E5);
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-area.drag-active {
  background-color: var(--csms-studio-bg-semantic-info-senary-subtle);
  border: 1px dashed var(--csms-studio-bo-semantic-info-primary);
  border-radius: 8px;
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-area.drag-reject {
  background-color: var(--csms-studio-bg-semantic-nega-senary);
  border: 1px dashed var(--csms-studio-bo-semantic-nega-primary);
  border-radius: 8px;
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-area .file-add-button {
  width: 96px;
  height: 36px;
  cursor: pointer;
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-area .file-add-button .file-add-button-text {
  width: 48;
  height: 20px;
  color: var(--csms-studio-tx-hierarchy-secondary);
  margin-right: 4px;
  cursor: pointer;
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-active-content,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-reject-content,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-active-content .dropzone-icon,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-reject-content .dropzone-icon,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-content .dropzone-icon {
  margin-bottom: 8px;
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-active-content .dropzone-content-text,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-reject-content .dropzone-content-text,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-content .dropzone-content-text {
  width: 100%;
  height: 21px;
  text-align: center;
  color: var(--csms-studio-tx-hierarchy-quinary);
  margin-bottom: 8px;
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-active-content .dropzone-content-text-description,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-reject-content .dropzone-content-text-description,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-content .dropzone-content-text-description {
  color: var(--csms-studio-tx-hierarchy-quaternary);
  margin-bottom: 16px;
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-active-content,
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-reject-content {
  width: 100%;
  height: 100%;
  justify-content: center;
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-active-content .dropzone-content-text-description {
  color: var(--csms-studio-tx-coursemos-secondary);
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-reject-content .dropzone-content-text-description {
  color: var(--csms-studio-tx-semantic-nega-quaternary);
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .dropzone-icon {
  color: var(--csms-studio-tx-hierarchy-senary);
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .thumbnail-preview-container {
  margin-top: 16px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .thumbnail-preview-container .thumbnail-preview-wrapper {
  position: relative;
  display: inline-block;
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .thumbnail-preview-container .thumbnail-preview-wrapper .thumbnail-preview-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  display: block;
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .thumbnail-preview-container .thumbnail-preview-wrapper .thumbnail-preview-remove-button {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--csms-studio-bg-hierarchy-quinary);
  border: none;
  border-radius: 6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-body .thumbnail-preview-container .thumbnail-preview-wrapper .thumbnail-preview-remove-button svg path {
  fill: #fff !important;
}
.csmsmedia-studio-modal-content .thumbnail-modal__guide {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-primary);
  margin-bottom: 16px;
}
.csmsmedia-studio-modal-content .thumbnail-modal__guide-accent {
  color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csmsmedia-studio-modal-content .thumbnail-modal .thumbnail-modal__submit-container {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  gap: 4px;
}
.csmsmedia-studio-modal-content .thumbnail-modal .thumbnail-modal__submit {
  width: auto !important;
  min-width: 75px;
  height: 36px;
  padding: 0 16px !important;
  border-radius: 8px !important;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-neutral-white-solid);
  white-space: nowrap;
  box-sizing: border-box;
  --bs-btn-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-bg: var(--csms-studio-bg-coursemos-primary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-hover-bg: var(--csms-studio-bg-coursemos-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-active-bg: var(--csms-studio-bg-coursemos-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-disabled-bg: var(--csms-studio-bg-coursemos-primary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-coursemos-primary);
}
.csmsmedia-studio-modal-content .thumbnail-modal .thumbnail-modal__submit svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-neutral-white-solid);
}
.csmsmedia-studio-modal-content .thumbnail-modal .thumbnail-modal__submit svg .svg-color[fill] {
  fill: var(--csms-studio-fg-neutral-white-solid);
}
.csmsmedia-studio-modal-content .thumbnail-modal .thumbnail-modal__submit {
  background-color: var(--csms-studio-bg-coursemos-primary) !important;
  border-color: transparent !important;
}
.csmsmedia-studio-modal-content .thumbnail-modal .thumbnail-modal__submit:hover {
  background-color: var(--csms-studio-bg-coursemos-secondary) !important;
}
.csmsmedia-studio-modal-content .thumbnail-modal .thumbnail-modal__submit:focus, .csmsmedia-studio-modal-content .thumbnail-modal .thumbnail-modal__submit.focus {
  box-shadow: 0px 0px 0px 2px #B5D7FB;
}
.csmsmedia-studio-modal-content .thumbnail-modal .thumbnail-modal__submit:active, .csmsmedia-studio-modal-content .thumbnail-modal .thumbnail-modal__submit.active {
  background-color: var(--csms-studio-bg-coursemos-primary) !important;
}
.csmsmedia-studio-modal-content .thumbnail-modal .thumbnail-modal__submit.selected, .csmsmedia-studio-modal-content .thumbnail-modal .thumbnail-modal__submit.is-selected, .csmsmedia-studio-modal-content .thumbnail-modal .thumbnail-modal__submit[aria-pressed=true] {
  background-color: var(--csms-studio-bg-coursemos-tertiary) !important;
}
.csmsmedia-studio-modal-content .thumbnail-modal .thumbnail-modal__submit:disabled, .csmsmedia-studio-modal-content .thumbnail-modal .thumbnail-modal__submit.disabled {
  background-color: #97C6FA !important;
  opacity: 1 !important;
}
.csmsmedia-studio-modal-content .thumbnail-modal .thumbnail-modal__cancel {
  width: auto !important;
  min-width: 75px;
  height: 36px;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csmsmedia-studio-modal-content .thumbnail-modal .modal-footer {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border-top: none !important;
  margin: 0 20px;
  margin-top: auto !important;
  padding: 20px 0 20px 0 !important;
}

.studio-video-list-more-menu {
  box-sizing: border-box;
  width: 142px;
  border-radius: 8px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  gap: 1px;
  position: relative;
  background: var(--csms-studio-bg-neutral-white);
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1) !important;
  margin-top: 1px;
}
.studio-video-list-more-menu .MuiList-root {
  padding: 0;
  width: 100%;
}
.studio-video-list-more-menu .video-list-more-menu-item {
  height: 36px;
  padding: 10px 8px 10px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--csms-studio-bg-neutral-white);
}
.studio-video-list-more-menu .video-list-more-menu-item:hover, .studio-video-list-more-menu .video-list-more-menu-item.Mui-focusVisible, .studio-video-list-more-menu .video-list-more-menu-item.Mui-selected {
  background-color: var(--csms-studio-bg-hierarchy-primary-subtle);
}
.studio-video-list-more-menu .video-list-more-menu-item .video-list-more-menu-item-icon-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;
  width: 116px;
  height: 21px;
  flex: 1;
}
.studio-video-list-more-menu .video-list-more-menu-item .video-list-more-menu-item-icon-container > * {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
}
.studio-video-list-more-menu .video-list-more-menu-icon {
  width: 18px;
  min-width: 18px !important;
  height: 18px;
  color: var(--csms-studio-tx-hierarchy-secondary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px;
  flex: none;
  order: 0;
  flex-grow: 0;
}
.studio-video-list-more-menu .video-list-more-menu-text-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 1px;
  width: auto;
  height: 21px;
  flex: none;
  order: 1;
  flex-grow: 0;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.studio-video-list-more-menu .video-list-more-menu-text-danger {
  color: var(--csms-studio-tx-semantic-nega-primary);
}

@media (max-height: 915.2px) {
  .box-video-list-table {
    height: calc(90vh - 64px - 32px - 56px - 8px - 56px - 8px - 36px - 8px - 20px) !important;
  }
}
@media (max-width: 768px) {
  .video-list .box-video-list-table {
    height: calc(90vh - 64px - 32px - 56px - 8px - 80px - 8px - 36px - 8px - 20px) !important;
  }
  .video-list .moodle-pagination-fixed {
    padding: 12px 0;
  }
  .video-list .moodle-pagination-fixed .MuiPagination-ul {
    gap: 4px;
  }
}
/*!*****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/resources/assets/styles/subtitle.scss ***!
  \*****************************************************************************************************************************************************************/
@charset "UTF-8";
/* =====================
   Subtitle Module Styles
   ===================== */
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- Subtitle Tabs --- */
}
#csms-studio .tab-video-subtitle,
.csmsmedia-studio-modal-content .tab-video-subtitle {
  height: 100%;
}
#csms-studio .tab-video-subtitle .no-subcontent-root,
.csmsmedia-studio-modal-content .tab-video-subtitle .no-subcontent-root {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 20px 0;
}
#csms-studio .tab-video-subtitle .no-subcontent-inner,
.csmsmedia-studio-modal-content .tab-video-subtitle .no-subcontent-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 80%;
}
#csms-studio .tab-video-subtitle .no-subcontent-title,
.csmsmedia-studio-modal-content .tab-video-subtitle .no-subcontent-title {
  color: var(--theme-text-color);
}
#csms-studio .tab-video-subtitle .no-subcontent-desc,
.csmsmedia-studio-modal-content .tab-video-subtitle .no-subcontent-desc {
  text-align: center;
  color: var(--theme-text-color);
  font-size: 15px;
}
#csms-studio .tab-video-subtitle .no-subcontent-form,
.csmsmedia-studio-modal-content .tab-video-subtitle .no-subcontent-form {
  width: 250px;
}
#csms-studio .tab-video-subtitle .no-subcontent-selected-lang,
.csmsmedia-studio-modal-content .tab-video-subtitle .no-subcontent-selected-lang {
  min-height: 30px;
}
#csms-studio .tab-video-subtitle .no-subcontent-btn-group,
.csmsmedia-studio-modal-content .tab-video-subtitle .no-subcontent-btn-group {
  display: flex;
  flex-direction: column;
  background-color: var(--theme-background-paper);
  gap: 16px;
  width: 100%;
}
#csms-studio .tab-video-subtitle .no-subcontent-textfield .MuiInputBase-input,
#csms-studio .tab-video-subtitle .no-subcontent-textfield .MuiInputLabel-root,
.csmsmedia-studio-modal-content .tab-video-subtitle .no-subcontent-textfield .MuiInputBase-input,
.csmsmedia-studio-modal-content .tab-video-subtitle .no-subcontent-textfield .MuiInputLabel-root {
  font-size: 15px;
}
#csms-studio .tab-video-subtitle .wrapper-subtitle-content,
.csmsmedia-studio-modal-content .tab-video-subtitle .wrapper-subtitle-content {
  height: 100%;
}
#csms-studio .tab-video-subtitle .btns-no-subtitle,
.csmsmedia-studio-modal-content .tab-video-subtitle .btns-no-subtitle {
  width: 100%;
  height: 600px;
  text-align: center;
  padding-top: 300px;
}
#csms-studio .tab-video-subtitle .box-language-selector,
.csmsmedia-studio-modal-content .tab-video-subtitle .box-language-selector {
  width: 100%;
  display: flex;
  padding: 20px 30px 0 30px;
  justify-content: space-between;
  align-items: center;
}
#csms-studio .tab-video-subtitle .box-language-selector .language-selector .language-selector-form,
.csmsmedia-studio-modal-content .tab-video-subtitle .box-language-selector .language-selector .language-selector-form {
  width: 165px;
}
#csms-studio .tab-video-subtitle .box-language-selector .language-selector,
.csmsmedia-studio-modal-content .tab-video-subtitle .box-language-selector .language-selector {
  display: flex;
  align-items: center;
  gap: 10px;
}
#csms-studio .tab-video-subtitle .btn-sub-edit,
.csmsmedia-studio-modal-content .tab-video-subtitle .btn-sub-edit {
  font-size: 12px;
  padding: 10px 16px;
  color: #fff;
  margin-right: 15px;
}
#csms-studio .tab-video-subtitle #subtitle-language-select,
.csmsmedia-studio-modal-content .tab-video-subtitle #subtitle-language-select {
  font-size: 14px;
  padding: 9.5px 12px;
}
#csms-studio .tab-video-subtitle .MuiMenuItem-root,
.csmsmedia-studio-modal-content .tab-video-subtitle .MuiMenuItem-root {
  font-size: 14px;
}
#csms-studio .tab-video-subtitle .language-switch input[type=checkbox],
.csmsmedia-studio-modal-content .tab-video-subtitle .language-switch input[type=checkbox] {
  display: none;
}
#csms-studio .tab-video-subtitle .btn-sub-set-state,
.csmsmedia-studio-modal-content .tab-video-subtitle .btn-sub-set-state {
  width: 280px;
  justify-content: space-between;
  border-color: #ddd;
  background-color: white;
  padding: 8px 16px;
}
#csms-studio .tab-video-subtitle .btn-sub-set-state:hover,
.csmsmedia-studio-modal-content .tab-video-subtitle .btn-sub-set-state:hover {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- Subtitle Editor --- */
}
#csms-studio .container-subtitle-editor,
.csmsmedia-studio-modal-content .container-subtitle-editor {
  width: 100%;
  height: 100%;
  padding-top: 8px;
}
#csms-studio .container-subtitle-editor .subtitle-header,
.csmsmedia-studio-modal-content .container-subtitle-editor .subtitle-header {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
#csms-studio .container-subtitle-editor .subtitle-header .subtitle-header-left,
.csmsmedia-studio-modal-content .container-subtitle-editor .subtitle-header .subtitle-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
#csms-studio .container-subtitle-editor .subtitle-header .subtitle-header-left .btn-csms-studio-icon,
.csmsmedia-studio-modal-content .container-subtitle-editor .subtitle-header .subtitle-header-left .btn-csms-studio-icon {
  margin-right: 8px;
  cursor: pointer;
}
#csms-studio .container-subtitle-editor .subtitle-header .subtitle-header-right,
.csmsmedia-studio-modal-content .container-subtitle-editor .subtitle-header .subtitle-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
#csms-studio .container-subtitle-editor .subtitle-header .subtitle-header-right .btn-csms-studio-icon,
.csmsmedia-studio-modal-content .container-subtitle-editor .subtitle-header .subtitle-header-right .btn-csms-studio-icon {
  cursor: pointer;
  margin-right: 0;
}
#csms-studio .container-subtitle-editor .subtitle-header .subtitle-header-title,
.csmsmedia-studio-modal-content .container-subtitle-editor .subtitle-header .subtitle-header-title {
  display: flex;
  align-items: center;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
#csms-studio .container-subtitle-editor .subtitle-header .subtitle-header-title .subtitle-header-title-lang,
.csmsmedia-studio-modal-content .container-subtitle-editor .subtitle-header .subtitle-header-title .subtitle-header-title-lang {
  color: var(--csms-studio-tx-coursemos-primary);
  margin-right: 4px;
}
#csms-studio .container-subtitle-editor .wrapper-subtitle-editor,
.csmsmedia-studio-modal-content .container-subtitle-editor .wrapper-subtitle-editor {
  position: relative;
  padding: 0;
  width: 100%;
  height: calc(100% - 44px - 8px);
}
#csms-studio .container-subtitle-editor .content-subtitle-editor,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor {
  width: 100%;
  height: 100%;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout {
  display: flex;
  height: 100%;
  min-width: 0;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout > .col-subtitle,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout > .col-player,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout > .col-subtitle,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout > .col-player {
  min-width: 0;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-left,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-left {
  width: 49.7950819672%;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-left .player-wrapper,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-left .player-wrapper {
  width: 100%;
  flex: 1;
  min-height: 0;
  position: relative;
  min-width: 0;
  overflow: hidden;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-left .player-wrapper .video-container,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-left .player-wrapper .box-video,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-left .player-wrapper .video-container,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-left .player-wrapper .box-video {
  height: 100% !important;
  padding-bottom: 0 !important;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right {
  width: 58.1967213115%;
  min-width: 0;
  height: 100%;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle {
  width: 100%;
  height: calc(100% - 41px - 56px);
  overflow-y: scroll;
  padding-bottom: 20px;
  gap: 1px;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper {
  position: relative;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper:hover,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper:hover {
  z-index: 10;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList {
  padding: 10px 0px 10px 0px;
  position: relative;
  display: flex;
  height: 100px;
  cursor: pointer;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list.changed,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList.changed,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list.changed,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList.changed {
  background-color: var(--csms-studio-bg-hierarchy-primary-subtle) !important;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list.active,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList.active,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list.active,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList.active {
  background-color: var(--csms-studio-bg-hierarchy-primary-subtle);
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list.inactive,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList.inactive,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list.inactive,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList.inactive {
  opacity: 0.7;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .col-index-subtitle,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .col-index-subtitle,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .col-index-subtitle,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .col-index-subtitle {
  width: 5.8098591549%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .col-time-subtitle,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .col-time-subtitle,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .col-time-subtitle,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .col-time-subtitle {
  width: 19.8943661972%;
  height: 100%;
  color: var(--csms-studio-tx-hierarchy-primary);
  display: flex;
  justify-content: center;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .col-time-subtitle .time-inputs,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .col-time-subtitle .time-inputs,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .col-time-subtitle .time-inputs,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .col-time-subtitle .time-inputs {
  height: 100%;
  width: 94.6902654867%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .col-time-subtitle .time-inputs .editable-time,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .col-time-subtitle .time-inputs .editable-time,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .col-time-subtitle .time-inputs .editable-time,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .col-time-subtitle .time-inputs .editable-time {
  width: 100%;
  height: 36px;
  border: 1px solid var(--csms-studio-bo-hierarchy-tertiary);
  border-radius: 8px;
  text-align: center;
  background-color: var(--csms-studio-bg-neutral-white);
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .col-text-subtitle,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .col-text-subtitle,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .col-text-subtitle,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .col-text-subtitle {
  width: 64.4366197183%;
  height: 100%;
  border: 1px solid var(--csms-studio-bo-hierarchy-tertiary);
  border-radius: 8px;
  background-color: var(--csms-studio-bg-neutral-white);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  overflow-y: auto;
  margin-left: 6px;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .col-text-subtitle .col-text-subtitle-input,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .col-text-subtitle .col-text-subtitle-input,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .col-text-subtitle .col-text-subtitle-input,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .col-text-subtitle .col-text-subtitle-input {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow-y: auto;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .col-text-subtitle .editable-text,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .col-text-subtitle .editable-text,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .col-text-subtitle .editable-text,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .col-text-subtitle .editable-text {
  cursor: text;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .col-text-subtitle div,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .col-text-subtitle div,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .col-text-subtitle div,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .col-text-subtitle div {
  width: 100%;
  height: 100%;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .col-text-subtitle div p,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .col-text-subtitle div p,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .col-text-subtitle div p,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .col-text-subtitle div p {
  padding: 10px 0;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .btns-subtitle,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .btns-subtitle,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .btns-subtitle,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .btns-subtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 9.8591549296%;
  height: 100%;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .btns-subtitle .btn-del,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .btns-subtitle .btn-del,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list .sub-list-content .btns-subtitle .btn-del,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList .sub-list-content .btns-subtitle .btn-del {
  width: 32px;
  height: 32px;
  display: none;
  text-align: center;
  cursor: pointer;
  padding: 6px 0;
  color: var(--csms-studio-fg-semantic-nega);
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .btn-add-subtitle,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .btn-add-subtitle {
  display: none;
  cursor: pointer;
  position: absolute;
  width: 100%;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .btn-add-subtitle .btn-add-line,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .btn-add-subtitle .btn-add-line {
  width: 45%;
  height: 1px;
  background-color: var(--csms-studio-bo-hierarchy-secondary);
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .btn-add-subtitle .btn-add-icon,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .btn-add-subtitle .btn-add-icon {
  width: 24px;
  height: 24px;
  background-color: var(--csms-studio-bg-coursemos-primary);
  color: var(--csms-studio-fg-neutral-white-solid);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper:hover .btn-add-subtitle,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list.active ~ .btn-add-subtitle,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList.active ~ .btn-add-subtitle,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper:hover .btn-add-subtitle,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list.active ~ .btn-add-subtitle,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList.active ~ .btn-add-subtitle {
  display: flex !important;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list:hover,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list.active,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList:hover,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList.active,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list:hover,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list.active,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList:hover,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList.active {
  background-color: var(--csms-studio-bg-semantic-info-senary-subtle);
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list:hover .btn-del,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list.active .btn-del,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList:hover .btn-del,
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList.active .btn-del,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list:hover .btn-del,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .sub-list.active .btn-del,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList:hover .btn-del,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .lists-subtitle .subList-wrapper .subList.active .btn-del {
  display: block !important;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .subtitle-list-header,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .subtitle-list-header {
  width: 100%;
  height: 41px;
  display: flex;
  align-items: center;
  padding: 20px 30px 20px 15px;
  background-color: #FCFCFC;
  border-top: 1px solid var(--csms-studio-bo-hierarchy-primary);
  border-bottom: 1px solid var(--csms-studio-bo-hierarchy-primary);
  color: var(--csms-studio-tx-hierarchy-quinary);
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .subtitle-list-header > div:first-child,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .subtitle-list-header > div:first-child {
  width: 5.8098591549%;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .subtitle-list-header > div:nth-child(2),
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .subtitle-list-header > div:nth-child(2) {
  width: 19.8943661972%;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .subtitle-list-header > div:nth-child(3),
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .subtitle-list-header > div:nth-child(3) {
  width: 74.2957746479%;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .subtitle-list-footer,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .subtitle-list-footer {
  width: 100%;
  height: 56px;
  border-top: 1px solid var(--csms-studio-bo-hierarchy-primary);
  border-bottom: 1px solid var(--csms-studio-bo-hierarchy-primary);
  padding: 0 24px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .subtitle-list-footer .save-button,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .subtitle-list-footer .save-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 80px;
  height: 36px;
  border: 0;
  border-radius: var(--csms-studio-border-radius-8);
  background-color: #0075F8;
  color: var(--csms-studio-tx-neutral-white-solid);
  cursor: pointer;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .subtitle-list-footer .save-button span,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .subtitle-list-footer .save-button span {
  color: #fff;
}
#csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .subtitle-list-footer .save-button:disabled,
.csmsmedia-studio-modal-content .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-right .subtitle-list-footer .save-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor {
  z-index: 1;
  width: 100%;
  height: 168px;
  box-sizing: border-box;
  border-top: 1px solid lightgray;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor .timeline-container,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor .timeline-container {
  width: 100%;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor .timeline-container .timeline-layout,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor .timeline-container .timeline-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor .timeline-container .timeline-layout .col-play-time,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor .timeline-container .timeline-layout .col-play-time {
  padding-top: 20px;
  padding-left: 20px;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor .timeline-container .timeline-layout .col-play-time div,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor .timeline-container .timeline-layout .col-play-time div {
  width: 150px;
  line-height: 35px;
  border: 1px solid lightgray;
  border-radius: 4px;
  text-align: center;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor .timeline-container .timeline-layout .spacer,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor .timeline-container .timeline-layout .spacer {
  flex-grow: 1;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor .timeline-container .timeline-layout .col-zoom-slider,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor .timeline-container .timeline-layout .col-zoom-slider {
  padding: 0;
  padding-right: 20px;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor .timeline-container .timeline-layout .col-zoom-slider .box-zoom-slider,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor .timeline-container .timeline-layout .col-zoom-slider .box-zoom-slider {
  display: flex;
  align-items: center;
  padding: 10px 0;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor .timeline-wrapper,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor .timeline-wrapper {
  flex: 1;
  width: 100%;
  overflow: hidden;
  min-width: 0;
  display: flex;
  position: relative;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor #waveform,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor #waveform {
  width: 100%;
  margin: 0;
  padding: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor #waveform > div,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor #waveform > div {
  width: 100% !important;
  max-width: 100% !important;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor #waveform [data-ws-wrapper],
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor #waveform [data-ws-wrapper] {
  width: 100% !important;
  max-width: 100% !important;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor #waveform [data-ws-scroll-container],
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor #waveform [data-ws-scroll-container] {
  width: 100% !important;
  max-width: 100% !important;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor #waveform canvas,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor #waveform canvas {
  max-width: 100% !important;
  height: auto !important;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor {
  /* WaveSurfer v7 scroll 영역 width 강제 고정 */
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor #waveform::part(scroll),
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor #waveform::part(scroll) {
  width: 100% !important;
  max-width: 100%;
  overflow-x: hidden;
  /* 스크롤 필요 없으면 */
  box-sizing: border-box;
  display: block;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor input,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor input {
  margin-top: 5px;
  width: 90%;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor .edit-btn,
#csms-studio .container-subtitle-editor .footer-subtitle-editor .editBtn,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor .edit-btn,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor .editBtn {
  width: 20px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 777;
  cursor: pointer;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor .edit-input,
#csms-studio .container-subtitle-editor .footer-subtitle-editor .editInput,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor .edit-input,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor .editInput {
  width: calc(100% - 10px);
  height: 100%;
  position: absolute;
  top: 0;
  left: 5px;
  border: 0 none;
  margin: 0;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor .edit-input:focus,
#csms-studio .container-subtitle-editor .footer-subtitle-editor .editInput:focus,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor .edit-input:focus,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor .editInput:focus {
  outline: none;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor .waveform-controls,
#csms-studio .container-subtitle-editor .footer-subtitle-editor .waveformControls,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor .waveform-controls,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor .waveformControls {
  padding: 30px;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor #waveform ::part(wrapper),
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor #waveform ::part(wrapper) {
  --box-size: 10px;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor #waveform ::part(region),
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor #waveform ::part(region) {
  top: 20%;
  height: 50% !important;
  padding: 10px;
  border-radius: 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor #waveform ::part(activeRegion),
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor #waveform ::part(activeRegion) {
  top: 20%;
  height: 50% !important;
  padding: 10px;
  border-radius: 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor #waveform ::part(region-content),
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor #waveform ::part(region-content) {
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  position: relative;
  border-radius: 5px;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor #waveform ::part(range),
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor #waveform ::part(range) {
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor #waveform ::part(region-handle),
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor #waveform ::part(region-handle) {
  border: 0;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor .zoom-slider,
#csms-studio .container-subtitle-editor .footer-subtitle-editor .zoomSlider,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor .zoom-slider,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor .zoomSlider {
  display: flex;
  justify-content: right;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 12px;
  z-index: 900;
}
#csms-studio .container-subtitle-editor .footer-subtitle-editor #zoom-level-slider,
#csms-studio .container-subtitle-editor .footer-subtitle-editor #zoomLevelSlider,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor #zoom-level-slider,
.csmsmedia-studio-modal-content .container-subtitle-editor .footer-subtitle-editor #zoomLevelSlider {
  width: 100px;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- Skeleton Placeholder --- */
}
#csms-studio .skeleton-subtitle-placeholder .sub-list,
.csmsmedia-studio-modal-content .skeleton-subtitle-placeholder .sub-list {
  padding: 10px 16px 0px;
  position: relative;
  display: flex;
  height: 100px;
}
#csms-studio .skeleton-subtitle-placeholder .sub-list .col-text-subtitle,
.csmsmedia-studio-modal-content .skeleton-subtitle-placeholder .sub-list .col-text-subtitle {
  width: 80%;
  height: 100%;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  overflow-y: auto;
}
#csms-studio .skeleton-subtitle-placeholder .sub-list .btns-subtitle,
.csmsmedia-studio-modal-content .skeleton-subtitle-placeholder .sub-list .btns-subtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5%;
  height: 100%;
}
#csms-studio .skeleton-subtitle-placeholder .sub-list .btns-subtitle .btn-del,
.csmsmedia-studio-modal-content .skeleton-subtitle-placeholder .sub-list .btns-subtitle .btn-del {
  display: none;
}
#csms-studio .skeleton-subtitle-placeholder .sub-list .col-time-subtitle,
.csmsmedia-studio-modal-content .skeleton-subtitle-placeholder .sub-list .col-time-subtitle {
  width: 15%;
  min-width: 126px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- Language Status and Translation --- */
}
#csms-studio .language-status-container,
.csmsmedia-studio-modal-content .language-status-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}
#csms-studio .language-item,
.csmsmedia-studio-modal-content .language-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
#csms-studio .language-name,
.csmsmedia-studio-modal-content .language-name {
  font-size: 16px;
  font-weight: bold;
}
#csms-studio .language-switch,
.csmsmedia-studio-modal-content .language-switch {
  margin-left: 10px;
}
#csms-studio .translate-language-box,
.csmsmedia-studio-modal-content .translate-language-box {
  min-width: 300px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 16px;
  padding: 8px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
#csms-studio .translate-language-text,
.csmsmedia-studio-modal-content .translate-language-text {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #2c3e50;
  font-size: 0.95rem;
}
#csms-studio .translate-language-divider,
.csmsmedia-studio-modal-content .translate-language-divider {
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, #3498db 0%, #e74c3c 100%);
  border-radius: 2px;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- 추가 보강 스타일 --- */
  /* MUI Box 컴포넌트 스타일 보강 */
}
#csms-studio .MuiBox-root.timeline-skeleton,
.csmsmedia-studio-modal-content .MuiBox-root.timeline-skeleton {
  border-top: 1px solid #ddd;
}
#csms-studio .MuiBox-root.timeline-skeleton .MuiSkeleton-root.MuiSkeleton-rectangular,
.csmsmedia-studio-modal-content .MuiBox-root.timeline-skeleton .MuiSkeleton-root.MuiSkeleton-rectangular {
  border-radius: 4px;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- Translate Subtitle Modal Styles --- */
}
#csms-studio .translate-subtitle-modal,
.csmsmedia-studio-modal-content .translate-subtitle-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background-color: var(--theme-background-paper, #fff);
  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
  padding: 32px;
  border-radius: 10px;
}
#csms-studio .translate-subtitle-modal-buttons,
.csmsmedia-studio-modal-content .translate-subtitle-modal-buttons {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
#csms-studio .translate-subtitle-modal-cancel-btn,
.csmsmedia-studio-modal-content .translate-subtitle-modal-cancel-btn {
  margin-right: 1rem;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- Add Subtitle Modal Styles --- */
}
#csms-studio .container-add-subtitle-modal,
.csmsmedia-studio-modal-content .container-add-subtitle-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background-color: var(--theme-background-paper, #fff);
  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
  padding: 32px;
  border-radius: 10px;
}
#csms-studio .btn-group-add-subtitle-modal,
.csmsmedia-studio-modal-content .btn-group-add-subtitle-modal {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
#csms-studio .btn-add-subtitle-modal,
.csmsmedia-studio-modal-content .btn-add-subtitle-modal {
  margin-right: 8px;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- Saving Modal Styles --- */
}
#csms-studio .subtitle-saving-text,
.csmsmedia-studio-modal-content .subtitle-saving-text {
  font-size: 14px !important;
  color: #333 !important;
  font-weight: 500 !important;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- Language Selector Panel Styles --- */
}
#csms-studio .language-selector-panel .skeleton-loading.skeleton-btn,
.csmsmedia-studio-modal-content .language-selector-panel .skeleton-loading.skeleton-btn {
  border-radius: 4px;
  margin-right: 8px;
}
#csms-studio .language-selector-panel .skeleton-loading.skeleton-btn:last-child,
.csmsmedia-studio-modal-content .language-selector-panel .skeleton-loading.skeleton-btn:last-child {
  margin-right: 0;
}
#csms-studio .language-selector-panel .skeleton-loading.skeleton-form,
.csmsmedia-studio-modal-content .language-selector-panel .skeleton-loading.skeleton-form {
  border-radius: 4px;
}
#csms-studio .language-selector-panel .btn-set-state .btn-set-state-content,
.csmsmedia-studio-modal-content .language-selector-panel .btn-set-state .btn-set-state-content {
  display: flex;
  align-items: center;
  gap: 8px;
}
#csms-studio .language-selector-panel .btn-set-state .btn-set-state-content .btn-set-state-icon,
.csmsmedia-studio-modal-content .language-selector-panel .btn-set-state .btn-set-state-content .btn-set-state-icon {
  font-size: 18px;
  color: var(--theme-text-secondary);
}
#csms-studio .language-selector-panel .btn-set-state .btn-set-state-content .btn-set-state-text,
.csmsmedia-studio-modal-content .language-selector-panel .btn-set-state .btn-set-state-content .btn-set-state-text {
  color: var(--theme-text-secondary);
  font-size: 12px;
}
#csms-studio .language-selector-panel .btn-set-state .btn-set-state-actions,
.csmsmedia-studio-modal-content .language-selector-panel .btn-set-state .btn-set-state-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
#csms-studio .language-selector-panel .btn-set-state .btn-set-state-actions .btn-set-state-chip,
.csmsmedia-studio-modal-content .language-selector-panel .btn-set-state .btn-set-state-actions .btn-set-state-chip {
  background-color: var(--theme-chip-background);
  color: var(--theme-chip-color);
  font-weight: 500;
  font-size: 11px;
}
#csms-studio .language-selector-panel .btn-set-state .btn-set-state-actions .btn-set-state-chip.chip-active,
.csmsmedia-studio-modal-content .language-selector-panel .btn-set-state .btn-set-state-actions .btn-set-state-chip.chip-active {
  background-color: rgba(16, 185, 129, 0.1);
  color: rgb(6, 95, 70);
}
#csms-studio .language-selector-panel .btn-set-state .btn-set-state-actions .btn-set-state-chip.chip-inactive,
.csmsmedia-studio-modal-content .language-selector-panel .btn-set-state .btn-set-state-actions .btn-set-state-chip.chip-inactive {
  background-color: rgba(239, 68, 68, 0.1);
  color: rgb(153, 27, 27);
}
#csms-studio .language-selector-panel .btn-set-state .btn-set-state-actions .btn-set-state-arrow,
.csmsmedia-studio-modal-content .language-selector-panel .btn-set-state .btn-set-state-actions .btn-set-state-arrow {
  font-size: 18px;
  color: var(--theme-text-secondary);
}
#csms-studio .language-selector-panel .btn-set-state .btn-set-state-content-inner,
.csmsmedia-studio-modal-content .language-selector-panel .btn-set-state .btn-set-state-content-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}
#csms-studio .language-selector-panel .btn-set-state .btn-set-state-content-inner .btn-set-state-lang-name,
.csmsmedia-studio-modal-content .language-selector-panel .btn-set-state .btn-set-state-content-inner .btn-set-state-lang-name {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content {
  padding: 16px;
  width: 252px;
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content .popover-title,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content .popover-title {
  font-size: 14px;
  margin-bottom: 8px;
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content .popover-current-language,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content .popover-current-language {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content .popover-current-language .current-language-info,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content .popover-current-language .current-language-info {
  display: flex;
  align-items: center;
  gap: 16px;
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content .popover-current-language .current-language-info .current-language-icon,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content .popover-current-language .current-language-info .current-language-icon {
  font-size: 16px;
  color: var(--theme-text-muted);
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content .popover-current-language .current-language-info .current-language-name,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content .popover-current-language .current-language-info .current-language-name {
  font-size: 12px;
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content .popover-current-language .current-language-actions,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content .popover-current-language .current-language-actions {
  display: flex;
  align-items: center;
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content .popover-current-language .current-language-actions .current-language-chip,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content .popover-current-language .current-language-actions .current-language-chip {
  background-color: var(--theme-chip-background);
  color: var(--theme-chip-color);
  font-weight: 500;
  font-size: 11px;
  margin-right: 8px;
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content .popover-current-language .current-language-actions .current-language-chip.chip-active,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content .popover-current-language .current-language-actions .current-language-chip.chip-active {
  background-color: rgba(16, 185, 129, 0.1);
  color: rgb(6, 95, 70);
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content .popover-current-language .current-language-actions .current-language-chip.chip-inactive,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content .popover-current-language .current-language-actions .current-language-chip.chip-inactive {
  background-color: rgba(239, 68, 68, 0.1);
  color: rgb(153, 27, 27);
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content .popover-current-language .current-language-actions .btn-delete-language,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content .popover-current-language .current-language-actions .btn-delete-language {
  margin-right: 8px;
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content .popover-other-languages,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content .popover-other-languages {
  margin-top: 16px;
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content .popover-other-languages .other-languages-title,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content .popover-other-languages .other-languages-title {
  font-size: 14px;
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content .popover-other-languages .other-language-item,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content .popover-other-languages .other-language-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-name,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-name {
  font-size: 12px;
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions {
  display: flex;
  align-items: center;
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions .other-language-chip,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions .other-language-chip {
  background-color: var(--theme-chip-background);
  color: var(--theme-chip-color);
  font-weight: 500;
  font-size: 11px;
  margin-right: 8px;
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions .other-language-chip.chip-active,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions .other-language-chip.chip-active {
  background-color: rgba(16, 185, 129, 0.1);
  color: rgb(6, 95, 70);
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions .other-language-chip.chip-inactive,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions .other-language-chip.chip-inactive {
  background-color: rgba(239, 68, 68, 0.1);
  color: rgb(153, 27, 27);
}
#csms-studio .language-selector-panel .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions .btn-delete-other-language,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions .btn-delete-other-language {
  margin-right: 8px;
}
#csms-studio .language-selector-panel .popover-language-settings .popover-no-settings,
.csmsmedia-studio-modal-content .language-selector-panel .popover-language-settings .popover-no-settings {
  padding: 16px;
}
#csms-studio .language-selector-panel .menu-item-language,
.csmsmedia-studio-modal-content .language-selector-panel .menu-item-language {
  font-size: 14px;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- SubEditor Styles --- */
}
#csms-studio .subtitle-editor .skeleton-player,
.csmsmedia-studio-modal-content .subtitle-editor .skeleton-player {
  position: absolute;
  top: 25%;
  width: 100%;
  height: 50%;
}
#csms-studio .subtitle-editor .timeline-skeleton,
.csmsmedia-studio-modal-content .subtitle-editor .timeline-skeleton {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  width: 100%;
}
#csms-studio .subtitle-editor .timeline-skeleton .timeline-skeleton-header,
.csmsmedia-studio-modal-content .subtitle-editor .timeline-skeleton .timeline-skeleton-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#csms-studio .subtitle-editor .timeline-skeleton .timeline-skeleton-content,
.csmsmedia-studio-modal-content .subtitle-editor .timeline-skeleton .timeline-skeleton-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#csms-studio .subtitle-editor .timeline-skeleton .timeline-skeleton-content .timeline-skeleton-bar,
.csmsmedia-studio-modal-content .subtitle-editor .timeline-skeleton .timeline-skeleton-content .timeline-skeleton-bar {
  flex: 1;
  margin: 0 1px;
  height: 20px;
}
#csms-studio .subtitle-editor .timeline-skeleton .timeline-skeleton-footer,
.csmsmedia-studio-modal-content .subtitle-editor .timeline-skeleton .timeline-skeleton-footer {
  height: 20px;
  width: 100%;
}
#csms-studio .subtitle-editor .zoom-slider,
.csmsmedia-studio-modal-content .subtitle-editor .zoom-slider {
  width: 150px;
  margin: 0 8px;
}
#csms-studio .subtitle-editor.is-readonly .editable-text,
#csms-studio .subtitle-editor.is-readonly .editable-time,
.csmsmedia-studio-modal-content .subtitle-editor.is-readonly .editable-text,
.csmsmedia-studio-modal-content .subtitle-editor.is-readonly .editable-time {
  pointer-events: none !important;
  cursor: default !important;
  color: var(--csms-studio-tx-hierarchy-quinary, rgba(0, 0, 0, 0.38)) !important;
}
#csms-studio .subtitle-editor.is-readonly .editable-time,
#csms-studio .subtitle-editor.is-readonly .col-text-subtitle,
.csmsmedia-studio-modal-content .subtitle-editor.is-readonly .editable-time,
.csmsmedia-studio-modal-content .subtitle-editor.is-readonly .col-text-subtitle {
  background-color: #f5f5f5 !important;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- SubRow Styles --- */
}
#csms-studio .subtitle-row .video-thumbnail,
.csmsmedia-studio-modal-content .subtitle-row .video-thumbnail {
  width: 30%;
  padding-left: 30px;
}
#csms-studio .subtitle-row .video-filename,
.csmsmedia-studio-modal-content .subtitle-row .video-filename {
  width: 30%;
  text-align: left;
}
#csms-studio .subtitle-row .video-created-at,
.csmsmedia-studio-modal-content .subtitle-row .video-created-at {
  width: 30%;
  text-align: center;
}
#csms-studio .subtitle-row .lang-row-toggle,
.csmsmedia-studio-modal-content .subtitle-row .lang-row-toggle {
  cursor: pointer;
  display: flex;
  justify-content: center;
}
#csms-studio .subtitle-row .lang-row-toggle .lang-row-icon.open,
.csmsmedia-studio-modal-content .subtitle-row .lang-row-toggle .lang-row-icon.open {
  transform: rotate(180deg);
}
#csms-studio .subtitle-row .lang-row-toggle .lang-row-count,
.csmsmedia-studio-modal-content .subtitle-row .lang-row-toggle .lang-row-count {
  margin-left: 5px;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- Translate Content Styles --- */
}
#csms-studio .translate-content,
.csmsmedia-studio-modal-content .translate-content {
  display: flex;
  justify-content: center;
  width: 100%;
}
#csms-studio .translate-content .translate-content-container,
.csmsmedia-studio-modal-content .translate-content .translate-content-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 80%;
}
#csms-studio .translate-content .translate-content-container .translate-content-title,
.csmsmedia-studio-modal-content .translate-content .translate-content-container .translate-content-title {
  font-size: 1.25rem;
  font-weight: 500;
}
#csms-studio .translate-content .translate-content-container .translate-content-description,
.csmsmedia-studio-modal-content .translate-content .translate-content-container .translate-content-description {
  text-align: center;
  color: var(--theme-text-secondary);
  margin-bottom: 24px;
}
#csms-studio .translate-content .translate-content-container .translate-content-form,
.csmsmedia-studio-modal-content .translate-content .translate-content-container .translate-content-form {
  width: 250px;
  display: flex;
  align-items: center;
}
#csms-studio .translate-content .translate-content-container .translate-content-form .translate-content-autocomplete,
.csmsmedia-studio-modal-content .translate-content .translate-content-container .translate-content-form .translate-content-autocomplete {
  width: 100%;
}
#csms-studio .translate-content .translate-content-container .translate-content-form .translate-content-autocomplete .translate-content-textfield,
.csmsmedia-studio-modal-content .translate-content .translate-content-container .translate-content-form .translate-content-autocomplete .translate-content-textfield {
  width: 100%;
  font-size: 15px;
}
#csms-studio .translate-content .translate-content-container .translate-content-form .translate-content-autocomplete .translate-content-textfield .translate-content-input,
.csmsmedia-studio-modal-content .translate-content .translate-content-container .translate-content-form .translate-content-autocomplete .translate-content-textfield .translate-content-input {
  font-size: 15px;
}
#csms-studio .translate-content .translate-content-container .translate-content-form .translate-content-autocomplete .translate-content-textfield .translate-content-label,
.csmsmedia-studio-modal-content .translate-content .translate-content-container .translate-content-form .translate-content-autocomplete .translate-content-textfield .translate-content-label {
  font-size: 15px;
}
#csms-studio .translate-content .translate-content-container .translate-content-form .translate-content-autocomplete .translate-content-textfield .translate-content-icon,
.csmsmedia-studio-modal-content .translate-content .translate-content-container .translate-content-form .translate-content-autocomplete .translate-content-textfield .translate-content-icon {
  font-size: 15px;
}
#csms-studio .translate-content .translate-content-container .translate-content-spacer,
.csmsmedia-studio-modal-content .translate-content .translate-content-container .translate-content-spacer {
  height: 50px;
}
#csms-studio .translate-content .translate-content-container .translate-content-actions,
.csmsmedia-studio-modal-content .translate-content .translate-content-container .translate-content-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* 반응형 대응 */
}
@media (max-width: 1024px) {
  #csms-studio #csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout,
  .csmsmedia-studio-modal-content #csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout {
    flex-direction: column;
  }
  #csms-studio #csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-subtitle,
  #csms-studio #csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-player,
  .csmsmedia-studio-modal-content #csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-subtitle,
  .csmsmedia-studio-modal-content #csms-studio .container-subtitle-editor .content-subtitle-editor .subtitle-editor-layout .col-player {
    flex: none;
    width: 100%;
    height: 50%;
  }
}
#csms-studio .delete-subtitle-modal .MuiPaper-root,
.csmsmedia-studio-modal-content .delete-subtitle-modal .MuiPaper-root {
  width: 400px;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- Subtitle More Button Styles --- */
}
#csms-studio .subtitle-more-button.Mui-disabled,
.csmsmedia-studio-modal-content .subtitle-more-button.Mui-disabled {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}
@media (max-width: 768px) {
  #csms-studio #csms-studio .tab-video-subtitle .box-language-selector,
  .csmsmedia-studio-modal-content #csms-studio .tab-video-subtitle .box-language-selector {
    flex-direction: column;
    gap: 15px;
    padding: 15px;
  }
  #csms-studio #csms-studio .container-subtitle-editor .footer-subtitle-editor,
  .csmsmedia-studio-modal-content #csms-studio .container-subtitle-editor .footer-subtitle-editor {
    height: 200px;
  }
  #csms-studio #csms-studio .container-subtitle-editor .footer-subtitle-editor .timeline-container .timeline-layout .col-zoom-slider,
  .csmsmedia-studio-modal-content #csms-studio .container-subtitle-editor .footer-subtitle-editor .timeline-container .timeline-layout .col-zoom-slider {
    display: none;
  }
}

.saving-spinner-modal .saving-spinner-spinner {
  width: 160px;
}
.saving-spinner-modal .MuiDialog-container {
  padding: 20px !important;
}
.saving-spinner-modal .MuiDialog-paper {
  border-radius: 12px !important;
  padding: 20px !important;
  min-width: 200px !important;
  height: 160px;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center;
  gap: 16px !important;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15) !important;
  margin: 0 !important;
}
/*!****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/resources/assets/styles/chapter.scss ***!
  \****************************************************************************************************************************************************************/
/* Chapter Tabs */
#csms-studio .tab-video-chapter,
.csmsmedia-studio-modal-content .tab-video-chapter {
  height: 100%;
}
#csms-studio .tab-video-chapter .wrapper-chapter-content,
.csmsmedia-studio-modal-content .tab-video-chapter .wrapper-chapter-content {
  height: 100%;
}
#csms-studio .tab-video-chapter .btns-no-chapter,
.csmsmedia-studio-modal-content .tab-video-chapter .btns-no-chapter {
  width: 100%;
  height: 600px;
  text-align: center;
  padding-top: 300px;
}
#csms-studio .tab-video-chapter .container-no-chap,
.csmsmedia-studio-modal-content .tab-video-chapter .container-no-chap {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 20px 0;
}
#csms-studio .tab-video-chapter .container-no-chap-content,
.csmsmedia-studio-modal-content .tab-video-chapter .container-no-chap-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 80%;
}
#csms-studio .tab-video-chapter .text-no-chap-title,
.csmsmedia-studio-modal-content .tab-video-chapter .text-no-chap-title {
  color: var(--theme-text-color);
}
#csms-studio .tab-video-chapter .text-no-chap-description,
.csmsmedia-studio-modal-content .tab-video-chapter .text-no-chap-description {
  text-align: center;
  color: var(--theme-text-color);
  font-size: 15px;
}
#csms-studio .tab-video-chapter .form-no-chap-select,
.csmsmedia-studio-modal-content .tab-video-chapter .form-no-chap-select {
  width: 250px;
}
#csms-studio .tab-video-chapter .text-no-chap-selected,
.csmsmedia-studio-modal-content .tab-video-chapter .text-no-chap-selected {
  min-height: 30px;
}
#csms-studio .tab-video-chapter .container-no-chap-buttons,
.csmsmedia-studio-modal-content .tab-video-chapter .container-no-chap-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
#csms-studio .tab-video-chapter .input-no-chap-autocomplete .MuiInputBase-input,
#csms-studio .tab-video-chapter .input-no-chap-autocomplete .MuiInputLabel-root,
.csmsmedia-studio-modal-content .tab-video-chapter .input-no-chap-autocomplete .MuiInputBase-input,
.csmsmedia-studio-modal-content .tab-video-chapter .input-no-chap-autocomplete .MuiInputLabel-root {
  font-size: 15px;
}
#csms-studio .tab-video-chapter .box-language-selector,
.csmsmedia-studio-modal-content .tab-video-chapter .box-language-selector {
  width: 100%;
  height: 76px;
  display: flex;
  padding: 20px 30px 0 30px;
  justify-content: space-between;
  align-items: center;
}
#csms-studio .tab-video-chapter .box-language-selector .box-chapEdit-btns,
.csmsmedia-studio-modal-content .tab-video-chapter .box-language-selector .box-chapEdit-btns {
  display: flex;
}
#csms-studio .tab-video-chapter .box-language-selector .language-selector,
.csmsmedia-studio-modal-content .tab-video-chapter .box-language-selector .language-selector {
  display: flex;
  align-items: center;
  gap: 10px;
}
#csms-studio .tab-video-chapter .box-language-selector .language-selector .language-selector-form,
.csmsmedia-studio-modal-content .tab-video-chapter .box-language-selector .language-selector .language-selector-form {
  width: 165px;
}
#csms-studio .tab-video-chapter .chapEditBtn,
.csmsmedia-studio-modal-content .tab-video-chapter .chapEditBtn {
  font-size: 12px;
  padding: 10px 16px;
  color: #ffffff;
  margin-right: 15px;
}
#csms-studio .tab-video-chapter #chapter-language-select,
#csms-studio .tab-video-chapter .MuiMenuItem-root,
.csmsmedia-studio-modal-content .tab-video-chapter #chapter-language-select,
.csmsmedia-studio-modal-content .tab-video-chapter .MuiMenuItem-root {
  font-size: 14px;
}
#csms-studio .tab-video-chapter .language-switch input[type=checkbox],
.csmsmedia-studio-modal-content .tab-video-chapter .language-switch input[type=checkbox] {
  display: none;
}
#csms-studio .tab-video-chapter .chapSetStateBtn,
.csmsmedia-studio-modal-content .tab-video-chapter .chapSetStateBtn {
  width: 260px;
  justify-content: space-between;
  border-color: #ddd;
  background-color: white;
  padding: 8px 16px;
}
#csms-studio .tab-video-chapter .chapSetStateBtn:hover,
.csmsmedia-studio-modal-content .tab-video-chapter .chapSetStateBtn:hover {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}
#csms-studio .tab-video-chapter,
.csmsmedia-studio-modal-content .tab-video-chapter {
  /* --- Chapter Header Specific Styles --- */
}
#csms-studio .tab-video-chapter .skeleton-chap-btn,
.csmsmedia-studio-modal-content .tab-video-chapter .skeleton-chap-btn {
  border-radius: 4px;
  margin-right: 8px;
}
#csms-studio .tab-video-chapter .skeleton-chap-selector,
.csmsmedia-studio-modal-content .tab-video-chapter .skeleton-chap-selector {
  border-radius: 4px;
}
#csms-studio .tab-video-chapter .container-chap-btn-content,
.csmsmedia-studio-modal-content .tab-video-chapter .container-chap-btn-content {
  display: flex;
  align-items: center;
  gap: 8px;
}
#csms-studio .tab-video-chapter .icon-chap-language,
.csmsmedia-studio-modal-content .tab-video-chapter .icon-chap-language {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.6);
}
#csms-studio .tab-video-chapter .text-chap-state,
.csmsmedia-studio-modal-content .tab-video-chapter .text-chap-state {
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
}
#csms-studio .tab-video-chapter .container-chap-chip,
.csmsmedia-studio-modal-content .tab-video-chapter .container-chap-chip {
  display: flex;
  align-items: center;
  gap: 4px;
}
#csms-studio .tab-video-chapter .chip-chap-state,
.csmsmedia-studio-modal-content .tab-video-chapter .chip-chap-state {
  font-weight: 500;
  font-size: 11px;
}
#csms-studio .tab-video-chapter .chip-chap-state.chip-chap-active,
.csmsmedia-studio-modal-content .tab-video-chapter .chip-chap-state.chip-chap-active {
  background-color: rgba(16, 185, 129, 0.1);
  color: rgb(6, 95, 70);
}
#csms-studio .tab-video-chapter .chip-chap-state.chip-chap-inactive,
.csmsmedia-studio-modal-content .tab-video-chapter .chip-chap-state.chip-chap-inactive {
  background-color: rgba(239, 68, 68, 0.1);
  color: rgb(153, 27, 27);
}
#csms-studio .tab-video-chapter .icon-chap-arrow,
.csmsmedia-studio-modal-content .tab-video-chapter .icon-chap-arrow {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.6);
}
#csms-studio .tab-video-chapter .container-chap-btn-content-inner,
.csmsmedia-studio-modal-content .tab-video-chapter .container-chap-btn-content-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}
#csms-studio .tab-video-chapter .container-chap-btn-content-inner .text-chap-lang-name,
.csmsmedia-studio-modal-content .tab-video-chapter .container-chap-btn-content-inner .text-chap-lang-name {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content {
  padding: 16px;
  width: 252px;
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content .popover-title,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content .popover-title {
  font-size: 14px;
  margin-bottom: 8px;
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content .popover-current-language,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content .popover-current-language {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content .popover-current-language .current-language-info,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content .popover-current-language .current-language-info {
  display: flex;
  align-items: center;
  gap: 16px;
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content .popover-current-language .current-language-info .current-language-icon,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content .popover-current-language .current-language-info .current-language-icon {
  font-size: 16px;
  color: var(--theme-text-muted);
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content .popover-current-language .current-language-info .current-language-name,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content .popover-current-language .current-language-info .current-language-name {
  font-size: 12px;
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content .popover-current-language .current-language-actions,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content .popover-current-language .current-language-actions {
  display: flex;
  align-items: center;
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content .popover-current-language .current-language-actions .current-language-chip,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content .popover-current-language .current-language-actions .current-language-chip {
  background-color: var(--theme-chip-background);
  color: var(--theme-chip-color);
  font-weight: 500;
  font-size: 11px;
  margin-right: 8px;
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content .popover-current-language .current-language-actions .current-language-chip.chip-active,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content .popover-current-language .current-language-actions .current-language-chip.chip-active {
  background-color: rgba(16, 185, 129, 0.1);
  color: rgb(6, 95, 70);
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content .popover-current-language .current-language-actions .current-language-chip.chip-inactive,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content .popover-current-language .current-language-actions .current-language-chip.chip-inactive {
  background-color: rgba(239, 68, 68, 0.1);
  color: rgb(153, 27, 27);
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content .popover-current-language .current-language-actions .btn-delete-language,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content .popover-current-language .current-language-actions .btn-delete-language {
  margin-right: 8px;
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content .popover-other-languages,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content .popover-other-languages {
  margin-top: 16px;
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content .popover-other-languages .other-languages-title,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content .popover-other-languages .other-languages-title {
  font-size: 14px;
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content .popover-other-languages .other-language-item,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content .popover-other-languages .other-language-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-name,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-name {
  font-size: 12px;
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions {
  display: flex;
  align-items: center;
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions .other-language-chip,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions .other-language-chip {
  background-color: var(--theme-chip-background);
  color: var(--theme-chip-color);
  font-weight: 500;
  font-size: 11px;
  margin-right: 8px;
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions .other-language-chip.chip-active,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions .other-language-chip.chip-active {
  background-color: rgba(16, 185, 129, 0.1);
  color: rgb(6, 95, 70);
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions .other-language-chip.chip-inactive,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions .other-language-chip.chip-inactive {
  background-color: rgba(239, 68, 68, 0.1);
  color: rgb(153, 27, 27);
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions .btn-delete-other-language,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-content .popover-other-languages .other-language-item .other-language-actions .btn-delete-other-language {
  margin-right: 8px;
}
#csms-studio .tab-video-chapter .popover-language-settings .popover-no-settings,
.csmsmedia-studio-modal-content .tab-video-chapter .popover-language-settings .popover-no-settings {
  padding: 16px;
}
#csms-studio .tab-video-chapter .item-chap-menu,
.csmsmedia-studio-modal-content .tab-video-chapter .item-chap-menu {
  font-size: 14px;
}
#csms-studio .tab-video-chapter,
.csmsmedia-studio-modal-content .tab-video-chapter {
  /* --- No Chapter Content Specific Styles --- */
}
#csms-studio .tab-video-chapter .container-no-chap,
.csmsmedia-studio-modal-content .tab-video-chapter .container-no-chap {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 20px 0;
}
#csms-studio .tab-video-chapter .container-no-chap-content,
.csmsmedia-studio-modal-content .tab-video-chapter .container-no-chap-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 80%;
}
#csms-studio .tab-video-chapter .text-no-chap-title,
.csmsmedia-studio-modal-content .tab-video-chapter .text-no-chap-title {
  color: inherit;
}
#csms-studio .tab-video-chapter .text-no-chap-description,
.csmsmedia-studio-modal-content .tab-video-chapter .text-no-chap-description {
  text-align: center;
  font-size: 15px;
}
#csms-studio .tab-video-chapter .form-no-chap-select,
.csmsmedia-studio-modal-content .tab-video-chapter .form-no-chap-select {
  width: 250px;
}
#csms-studio .tab-video-chapter .input-no-chap-autocomplete .MuiInputBase-input,
.csmsmedia-studio-modal-content .tab-video-chapter .input-no-chap-autocomplete .MuiInputBase-input {
  font-size: 15px;
}
#csms-studio .tab-video-chapter .input-no-chap-autocomplete .MuiInputLabel-root,
.csmsmedia-studio-modal-content .tab-video-chapter .input-no-chap-autocomplete .MuiInputLabel-root {
  font-size: 15px;
}
#csms-studio .tab-video-chapter .text-no-chap-selected,
.csmsmedia-studio-modal-content .tab-video-chapter .text-no-chap-selected {
  min-height: 30px;
}
#csms-studio .tab-video-chapter .container-no-chap-buttons,
.csmsmedia-studio-modal-content .tab-video-chapter .container-no-chap-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
#csms-studio .container-chapter-editor,
.csmsmedia-studio-modal-content .container-chapter-editor {
  width: 100%;
  height: 100%;
  padding-top: 8px;
}
#csms-studio .container-chapter-editor.is-readonly .editable-time,
#csms-studio .container-chapter-editor.is-readonly .editable-text,
#csms-studio .container-chapter-editor.is-readonly .chapter-thumbnail label,
#csms-studio .container-chapter-editor.is-readonly .btns-chapter,
.csmsmedia-studio-modal-content .container-chapter-editor.is-readonly .editable-time,
.csmsmedia-studio-modal-content .container-chapter-editor.is-readonly .editable-text,
.csmsmedia-studio-modal-content .container-chapter-editor.is-readonly .chapter-thumbnail label,
.csmsmedia-studio-modal-content .container-chapter-editor.is-readonly .btns-chapter {
  pointer-events: none !important;
  cursor: default !important;
}
#csms-studio .container-chapter-editor.is-readonly .editable-time,
#csms-studio .container-chapter-editor.is-readonly .editable-text,
.csmsmedia-studio-modal-content .container-chapter-editor.is-readonly .editable-time,
.csmsmedia-studio-modal-content .container-chapter-editor.is-readonly .editable-text {
  color: var(--csms-studio-tx-hierarchy-quinary, rgba(0, 0, 0, 0.38)) !important;
}
#csms-studio .container-chapter-editor.is-readonly .editable-time,
#csms-studio .container-chapter-editor.is-readonly .col-text-chapter,
#csms-studio .container-chapter-editor.is-readonly .chapter-thumbnail,
.csmsmedia-studio-modal-content .container-chapter-editor.is-readonly .editable-time,
.csmsmedia-studio-modal-content .container-chapter-editor.is-readonly .col-text-chapter,
.csmsmedia-studio-modal-content .container-chapter-editor.is-readonly .chapter-thumbnail {
  background-color: #f5f5f5 !important;
}
#csms-studio .container-chapter-editor .chapter-header,
.csmsmedia-studio-modal-content .container-chapter-editor .chapter-header {
  position: relative;
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
#csms-studio .container-chapter-editor .chapter-header .chapter-header-left,
.csmsmedia-studio-modal-content .container-chapter-editor .chapter-header .chapter-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
#csms-studio .container-chapter-editor .chapter-header .chapter-header-left .btn-csms-studio-icon,
.csmsmedia-studio-modal-content .container-chapter-editor .chapter-header .chapter-header-left .btn-csms-studio-icon {
  margin-right: 8px;
  cursor: pointer;
}
#csms-studio .container-chapter-editor .chapter-header .chapter-header-right,
.csmsmedia-studio-modal-content .container-chapter-editor .chapter-header .chapter-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
#csms-studio .container-chapter-editor .chapter-header .chapter-header-right .btn-csms-studio-icon,
.csmsmedia-studio-modal-content .container-chapter-editor .chapter-header .chapter-header-right .btn-csms-studio-icon {
  cursor: pointer;
  margin-right: 0;
}
#csms-studio .container-chapter-editor .chapter-header .chapter-header-title,
.csmsmedia-studio-modal-content .container-chapter-editor .chapter-header .chapter-header-title {
  display: flex;
  align-items: center;
  color: var(--csms-studio-tx-hierarchy-secondary);
}
#csms-studio .container-chapter-editor .chapter-header .chapter-header-title .chapter-header-title-lang,
.csmsmedia-studio-modal-content .container-chapter-editor .chapter-header .chapter-header-title .chapter-header-title-lang {
  color: var(--csms-studio-tx-coursemos-primary);
  margin-right: 4px;
}
#csms-studio .container-chapter-editor .wrapper-chapter-editor,
.csmsmedia-studio-modal-content .container-chapter-editor .wrapper-chapter-editor {
  position: relative;
  width: 100%;
  height: calc(100% - 44px);
  padding: 0;
}
#csms-studio .container-chapter-editor .content-chapter-editor,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor {
  width: 100%;
  height: 100%;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout {
  display: flex;
  height: 100%;
  min-width: 0;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-chapter,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout > .col-player,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-chapter,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout > .col-player {
  min-width: 0;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-left,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-left {
  width: 50%;
  height: 100%;
  min-width: 0;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-left .player-wrapper,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-left .player-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  min-width: 0;
  overflow: hidden;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-left #videoEl,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-left #videoEl {
  border-radius: 0px;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right {
  width: 50%;
  min-width: 0;
  height: 100%;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter {
  width: 100%;
  height: calc(100% - 41px - 56px);
  overflow-y: scroll;
  padding-bottom: 20px;
  gap: 1px;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList {
  padding: 20px 0px 10px 16px;
  position: relative;
  display: flex;
  height: 130px;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list.changed,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList.changed,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list.changed,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList.changed {
  background-color: var(--csms-studio-bg-semantic-info-senary-subtle) !important;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list.active,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList.active,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list.active,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList.active {
  background-color: #f0f0f0;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list.inactive,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList.inactive,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list.inactive,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList.inactive {
  opacity: 0.7;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-index-chapter,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-index-chapter,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-index-chapter,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-index-chapter {
  width: 5.8098591549%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-time-chapter,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-time-chapter,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-time-chapter,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-time-chapter {
  width: 22.8873239437%;
  height: 100%;
  color: var(--csms-studio-tx-hierarchy-primary);
  display: flex;
  justify-content: center;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-time-chapter .time-inputs,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-time-chapter .time-inputs,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-time-chapter .time-inputs,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-time-chapter .time-inputs {
  height: 100%;
  width: 94.6902654867%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-time-chapter .time-inputs .editable-time,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-time-chapter .time-inputs .editable-time,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-time-chapter .time-inputs .editable-time,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-time-chapter .time-inputs .editable-time {
  width: 100%;
  height: 36px;
  border: 1px solid var(--csms-studio-bo-hierarchy-tertiary);
  border-radius: 8px;
  text-align: center;
  background-color: var(--csms-studio-bg-neutral-white);
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-time-chapter .time-inputs .chapter-thumbnail,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-time-chapter .time-inputs .chapter-thumbnail,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-time-chapter .time-inputs .chapter-thumbnail,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-time-chapter .time-inputs .chapter-thumbnail {
  width: 100%;
  height: 77px;
  border: 1px solid var(--csms-studio-bo-hierarchy-tertiary);
  border-radius: 8px;
  background-color: var(--csms-studio-bg-neutral-white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-time-chapter .time-inputs .chapter-thumbnail .thumbnail-placeholder,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-time-chapter .time-inputs .chapter-thumbnail .thumbnail-placeholder,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-time-chapter .time-inputs .chapter-thumbnail .thumbnail-placeholder,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-time-chapter .time-inputs .chapter-thumbnail .thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--csms-studio-tx-hierarchy-quinary);
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-time-chapter .time-inputs .chapter-thumbnail input,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-time-chapter .time-inputs .chapter-thumbnail input,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-time-chapter .time-inputs .chapter-thumbnail input,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-time-chapter .time-inputs .chapter-thumbnail input {
  display: none;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-time-chapter .time-inputs .chapter-thumbnail .thumbnail-image,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-time-chapter .time-inputs .chapter-thumbnail .thumbnail-image,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-time-chapter .time-inputs .chapter-thumbnail .thumbnail-image,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-time-chapter .time-inputs .chapter-thumbnail .thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-text-chapter,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-text-chapter,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-text-chapter,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-text-chapter {
  width: 23.5915492958%;
  height: 100%;
  border: 1px solid var(--csms-studio-bo-hierarchy-tertiary);
  border-radius: 8px;
  background-color: var(--csms-studio-bg-neutral-white);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  overflow-y: auto;
  margin-left: 6px;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-text-chapter .col-text-chapter-input,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-text-chapter .col-text-chapter-input,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-text-chapter .col-text-chapter-input,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-text-chapter .col-text-chapter-input {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow-y: auto;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-text-chapter .editable-text,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-text-chapter .editable-text,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-text-chapter .editable-text,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-text-chapter .editable-text {
  cursor: text;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-text-chapter div,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-text-chapter div,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-text-chapter div,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-text-chapter div {
  width: 100%;
  height: 100%;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-text-chapter div p,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-text-chapter div p,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-text-chapter div p,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-text-chapter div p {
  padding: 10px 0;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-text-chapter.col-text-chapter-desc,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-text-chapter.col-text-chapter-desc,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .col-text-chapter.col-text-chapter-desc,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .col-text-chapter.col-text-chapter-desc {
  width: 39.6126760563%;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .btns-chapter,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .btns-chapter,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .btns-chapter,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .btns-chapter {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 9.8591549296%;
  height: 100%;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .btns-chapter .btn-del,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .btns-chapter .btn-del,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .chap-list-content .btns-chapter .btn-del,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .chap-list-content .btns-chapter .btn-del {
  width: 32px;
  height: 32px;
  display: none;
  text-align: center;
  cursor: pointer;
  padding: 6px 0;
  color: var(--csms-studio-fg-semantic-nega);
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .btn-add-chapter,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .btn-add-chapter,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .btn-add-chapter,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .btn-add-chapter {
  display: none;
  cursor: pointer;
  position: absolute;
  width: 100%;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .btn-add-chapter .btn-add-line,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .btn-add-chapter .btn-add-line,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .btn-add-chapter .btn-add-line,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .btn-add-chapter .btn-add-line {
  width: 45%;
  height: 1px;
  background-color: var(--csms-studio-bo-hierarchy-secondary);
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .btn-add-chapter .btn-add-icon,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .btn-add-chapter .btn-add-icon,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list .btn-add-chapter .btn-add-icon,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList .btn-add-chapter .btn-add-icon {
  width: 24px;
  height: 24px;
  background-color: var(--csms-studio-bg-coursemos-primary);
  color: var(--csms-studio-fg-neutral-white-solid);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list:hover,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list.active,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList:hover,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList.active,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list:hover,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list.active,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList:hover,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList.active {
  background-color: var(--csms-studio-bg-semantic-info-senary-subtle);
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list:hover .btn-del,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list.active .btn-del,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList:hover .btn-del,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList.active .btn-del,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list:hover .btn-del,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list.active .btn-del,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList:hover .btn-del,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList.active .btn-del {
  display: block !important;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list:hover .btn-add-chapter,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list.active .btn-add-chapter,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList:hover .btn-add-chapter,
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList.active .btn-add-chapter,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list:hover .btn-add-chapter,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chap-list.active .btn-add-chapter,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList:hover .btn-add-chapter,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .lists-chapter .chapList.active .btn-add-chapter {
  display: flex !important;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .chapter-list-header,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .chapter-list-header {
  width: 100%;
  height: 41px;
  display: flex;
  align-items: center;
  padding: 0 0 0 16px;
  background-color: #FCFCFC;
  border-top: 1px solid var(--csms-studio-bo-hierarchy-primary);
  border-bottom: 1px solid var(--csms-studio-bo-hierarchy-primary);
  color: var(--csms-studio-tx-hierarchy-quinary);
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .chapter-list-header > div:first-child,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .chapter-list-header > div:first-child {
  width: 8.4507042254%;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .chapter-list-header > div:nth-child(2),
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .chapter-list-header > div:nth-child(2) {
  width: 22.8873239437%;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .chapter-list-header > div:nth-child(3),
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .chapter-list-header > div:nth-child(3) {
  width: 22.8873239437%;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .chapter-list-header > div:nth-child(4),
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .chapter-list-header > div:nth-child(4) {
  width: 45.7746478873%;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .chapter-list-footer,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .chapter-list-footer {
  width: 100%;
  height: 56px;
  border-top: 1px solid var(--csms-studio-bo-hierarchy-primary);
  border-bottom: 1px solid var(--csms-studio-bo-hierarchy-primary);
  padding: 0 24px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .chapter-list-footer .save-button,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .chapter-list-footer .save-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 80px;
  height: 36px;
  border: 0;
  border-radius: var(--csms-studio-border-radius-8);
  background-color: #0075F8;
  color: var(--csms-studio-tx-neutral-white-solid);
  cursor: pointer;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .chapter-list-footer .save-button span,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .chapter-list-footer .save-button span {
  color: #fff;
}
#csms-studio .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .chapter-list-footer .save-button:disabled,
.csmsmedia-studio-modal-content .container-chapter-editor .content-chapter-editor .chapter-editor-layout .col-right .chapter-list-footer .save-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#csms-studio #tab-panel-chapter,
.csmsmedia-studio-modal-content #tab-panel-chapter {
  padding: 0;
  height: calc(100% - 49px);
}
#csms-studio #tab-panel-chapter .MuiBox-root,
.csmsmedia-studio-modal-content #tab-panel-chapter .MuiBox-root {
  padding: 0;
  height: 100%;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- Modal & Dialog Styles --- */
}
#csms-studio .delete-chapter-modal .MuiPaper-root,
.csmsmedia-studio-modal-content .delete-chapter-modal .MuiPaper-root {
  width: 400px;
}
#csms-studio .modal-content-box,
.csmsmedia-studio-modal-content .modal-content-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  padding: 32px;
  border-radius: 10px;
  outline: none;
}
#csms-studio .modal-footer-box,
.csmsmedia-studio-modal-content .modal-footer-box {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
#csms-studio .modal-cancel-button,
.csmsmedia-studio-modal-content .modal-cancel-button {
  margin-right: 8px;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- No Chapter Content --- */
}
#csms-studio .no-chap-content-wrapper,
.csmsmedia-studio-modal-content .no-chap-content-wrapper {
  width: 30%;
  margin: 0 auto;
  padding-top: 10%;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- Loading --- */
}
#csms-studio .loading-container,
.csmsmedia-studio-modal-content .loading-container {
  width: 100%;
  text-align: center;
  padding: 20px;
}
#csms-studio .loading-text,
.csmsmedia-studio-modal-content .loading-text {
  padding: 10px 0;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* --- Unavailable Language Message --- */
}
#csms-studio .unavailable-lang-message-container,
.csmsmedia-studio-modal-content .unavailable-lang-message-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#csms-studio .unavailable-lang-message-text,
.csmsmedia-studio-modal-content .unavailable-lang-message-text {
  margin-bottom: 50px;
}
#csms-studio .unavailable-lang-message-button-container,
.csmsmedia-studio-modal-content .unavailable-lang-message-button-container {
  display: flex;
  gap: 10px;
}
#csms-studio .error-content-wrapper,
.csmsmedia-studio-modal-content .error-content-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 400px;
}
#csms-studio .error-message,
.csmsmedia-studio-modal-content .error-message {
  text-align: center;
  padding: 40px;
  background: var(--theme-card-background);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
}
#csms-studio .error-message h3,
.csmsmedia-studio-modal-content .error-message h3 {
  color: var(--theme-error-color, #f56565);
  margin-bottom: 16px;
  font-size: 24px;
}
#csms-studio .error-message p,
.csmsmedia-studio-modal-content .error-message p {
  color: var(--theme-text-color);
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.5;
}
#csms-studio .error-message .btn,
.csmsmedia-studio-modal-content .error-message .btn {
  padding: 12px 24px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}
#csms-studio .error-message .btn.btn-primary,
.csmsmedia-studio-modal-content .error-message .btn.btn-primary {
  background: var(--theme-primary-color, #3182ce);
  color: white;
}
#csms-studio .error-message .btn.btn-primary:hover,
.csmsmedia-studio-modal-content .error-message .btn.btn-primary:hover {
  background: var(--theme-primary-hover-color, #2c5aa0);
  transform: translateY(-1px);
}
/*!*****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/resources/assets/styles/_sidebar.scss ***!
  \*****************************************************************************************************************************************************************/
#wrapper-left-sidebar {
  box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.1);
  background-color: var(--theme-primary);
  color: var(--theme-primary-text);
}
#wrapper-left-sidebar #wrapper-sidebar-menu {
  max-height: calc(100vh - 52px);
  overflow-y: auto;
}
#wrapper-left-sidebar .ps-menuitem-root .ps-menu-button:hover {
  background-color: var(--theme-secondary);
}
#wrapper-left-sidebar .ps-submenu-content {
  left: -5px !important;
}
#wrapper-left-sidebar .ps-submenu-content .ps-menu-button {
  background-color: var(--theme-secondary);
  color: var(--theme-primary-text);
}
#wrapper-left-sidebar .ps-submenu-content .ps-menu-button:hover {
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
}
#wrapper-left-sidebar .ps-menu-label {
  font-size: 14px;
}
#wrapper-left-sidebar .ps-sidebar-container {
  background-color: inherit !important;
}
#wrapper-left-sidebar.ps-collapsed .ps-submenu-expand-icon {
  display: none !important;
}
#wrapper-left-sidebar .left-sidebar-head {
  padding: 0px 0px;
  height: 55px;
  background-color: var(--left-sidebar-header-bg);
  color: var(--left-sidebar-header-color);
}
#wrapper-left-sidebar .left-sidebar-head .btn-ctr-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
@media (max-width: 600px) {
  #wrapper-left-sidebar .left-sidebar-head {
    height: 58px;
  }
}
#wrapper-left-sidebar .left-sidebar-head button {
  color: white;
  height: 35px;
  overflow: hidden;
}
#wrapper-left-sidebar .left-sidebar-head:hover {
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  /* // for IE8 */
  filter: alpha(opacity=80);
  /* //for IE5-7 */
}
#wrapper-left-sidebar .ps-menu-root {
  overflow-x: hidden;
}
#wrapper-left-sidebar .css-1umw9bq-MuiSvgIcon-root {
  font-size: 20px;
}
#wrapper-left-sidebar .ps-sidebar-root-test-id {
  border-right: 0px;
}

#csms-studio .wrapper-video .__dbk__container.Horizontal {
  padding-right: 0;
  height: 100%;
}
#csms-studio .wrapper-video .__dbk__gutter.Dark {
  background: #ddd;
  height: auto;
  padding: 0 1px;
}
#csms-studio .wrapper-video .__dbk__dragger.Horizontal {
  width: 3px;
}
#csms-studio .wrapper-video .__dbk__child-wrapper {
  height: 100%;
  overflow-y: auto;
}
/*!****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/resources/assets/styles/csmsdoc.scss ***!
  \****************************************************************************************************************************************************************/
.csmsdoc-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.csmsdoc-table {
  height: calc(100vh - 200px);
  overflow: auto;
}
.csmsdoc-table.MuiPaper-root,
.csmsdoc-table .MuiTableContainer-root {
  box-shadow: none !important;
  background-color: transparent !important;
}
.csmsdoc-table .MuiTable-root {
  border-collapse: separate;
}
.csmsdoc-table .MuiTableCell-root {
  background-color: white !important;
  text-align: left !important;
  padding-left: 50px !important;
  color: #000 !important;
  border-bottom: 1px solid #e0e0e0 !important;
}
.csmsdoc-table .MuiTableHead-root .MuiTableCell-root {
  border-top: 1px solid #e0e0e0 !important;
}
.csmsdoc-table .MuiTableRow-root.csmsdoc-table-row {
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}
.csmsdoc-table .MuiTableRow-root.csmsdoc-table-row:hover {
  background-color: #f5f5f5 !important;
}
.csmsdoc-table .MuiTableRow-root.csmsdoc-table-row:hover .MuiTableCell-root {
  background-color: #f5f5f5 !important;
}
.csmsdoc-table .MuiTableRow-root.csmsdoc-table-row:active {
  background-color: #e0e0e0 !important;
}
.csmsdoc-table .MuiTableRow-root.csmsdoc-table-row:active .MuiTableCell-root {
  background-color: #e0e0e0 !important;
}

.csmsdoc-search-box {
  padding: 2px;
  margin: 12px 0 12px 20px;
  width: 50%;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  min-height: 37px;
  display: flex;
  align-items: center;
}

.csmsdoc-complete-message {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

.csmsdoc-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  height: 100%;
  min-height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 1;
}

#doc-body-container {
  height: calc(100vh - 120px) !important;
  overflow: hidden !important;
  max-height: calc(100vh - 120px) !important;
}

.doc-translate-file-info {
  padding: 16px 32px !important;
  display: none !important;
  border-right: 1px solid #e0e0e0 !important;
  height: 100% !important;
  overflow: auto !important;
}
@media (min-width: 1200px) {
  .doc-translate-file-info {
    display: block !important;
  }
}

.doc-translate-table {
  box-shadow: none !important;
}
.doc-translate-table .MuiTableCell-root {
  border-bottom: none !important;
  padding: 4px 6px !important;
}

.doc-translate-label {
  font-size: 16px !important;
  width: 20% !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  width: 100px !important;
}

.doc-translate-value {
  font-size: 16px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 0 !important;
}

.doc-translate-list {
  height: 100% !important;
  overflow: auto !important;
}

.doc-translate-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid #e0e0e0 !important;
  padding: 16px !important;
}

.doc-translate-item-left {
  flex: 1 !important;
}

.doc-translate-item-title {
  font-weight: bold !important;
}

.doc-translate-item-lang {
  display: flex !important;
  gap: 16px !important;
  margin-top: 8px !important;
}

.doc-translate-lang-group {
  display: flex !important;
  gap: 4px !important;
  margin-right: 8px !important;
}
.doc-translate-lang-group:last-child {
  margin-left: 16px !important;
}

.doc-translate-status-label {
  font-weight: 500 !important;
  font-size: 14px !important;
  color: #666 !important;
  transition: color 0.2s ease !important;
  user-select: none !important;
}

.doc-translate-add-button-container {
  text-align: center !important;
  margin-top: 16px !important;
}

.doc-translate-add-button {
  border-radius: 4px !important;
  width: 53px !important;
  height: 38px !important;
  font-size: 24px !important;
  min-width: unset !important;
  padding: 0 !important;
  margin-bottom: 8px !important;
}

.doc-modal {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 550px !important;
  height: 600px !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: white !important;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
  border-radius: 8px !important;
  border: none !important;
  outline: none !important;
}

.doc-modal-header {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  align-items: center !important;
  width: 100% !important;
  margin: 8px !important;
  padding: 0 16px !important;
  column-gap: 12px !important;
  min-width: 0 !important;
}

.doc-modal-header-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.doc-modal-select-btn {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(0, 0, 0, 0.87) !important;
}
.doc-modal-select-btn.disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.doc-modal-btn-inline {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
}

.doc-modal-btn-label {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: center !important;
  max-width: calc(100% - 20px) !important;
}

.doc-modal-btn-icon {
  flex: 0 0 auto !important;
  margin-left: 4px !important;
}

.doc-modal-translate-button {
  width: auto !important;
  min-width: unset !important;
  justify-self: center !important;
  align-self: center !important;
  color: rgba(0, 0, 0, 0.87) !important;
  border-color: #e0e0e0 !important;
  font-size: 13px !important;
}

.doc-modal-search-field {
  padding-left: 0 !important;
}
.doc-modal-search-field .MuiInputBase-root {
  border-top: 1px solid #e0e0e0 !important;
  border-bottom: 1px solid #e0e0e0 !important;
  border-left: none !important;
  border-right: none !important;
  height: 44px !important;
  font-size: 14px !important;
}

.doc-modal-language-list {
  flex: 1 !important;
  overflow: auto !important;
}

.doc-modal-language-item {
  padding-left: 12px !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  background-color: transparent !important;
}
.doc-modal-language-item:hover {
  background-color: #f5f5f5 !important;
}
.doc-modal-language-item.selected {
  background-color: #CDE0FC !important;
}
.doc-modal-language-item.selected:hover {
  background-color: #CDE0FC !important;
}

.doc-modal-language-inline {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.doc-modal-language-text {
  padding: 8px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

.doc-modal-language-check {
  margin-left: 4px !important;
  flex: 0 0 auto !important;
}

.doc-modal-header-close {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 8px !important;
  border-bottom: 1px solid #e0e0e0 !important;
}
/*!*****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/resources/assets/styles/settings.scss ***!
  \*****************************************************************************************************************************************************************/
#csms-studio .container-settings .settings-header-container {
  width: 100%;
}
#csms-studio .container-settings .settings-header-container .settings-header-content {
  display: flex;
  align-items: end;
}
#csms-studio .container-settings .wrapper-settings {
  display: flex;
}
#csms-studio .container-settings .wrapper-settings .settings-sidebar-container {
  width: 250px;
  height: 100%;
  overflow-y: auto;
}
#csms-studio .container-settings .wrapper-settings .settings-sidebar-container .settings-item {
  padding: 10px 30px;
  color: var(--theme-text-color);
}
#csms-studio .container-settings .wrapper-settings .settings-sidebar-container .settings-item.selected {
  background-color: var(--theme-secondary);
  color: var(--theme-primary-text);
}
#csms-studio .container-settings .wrapper-settings .settings-sidebar-container .vod-item {
  padding: 10px 30px;
  color: var(--theme-text-color);
}
#csms-studio .container-settings .wrapper-settings .settings-content-container {
  width: calc(100% - 250px);
  height: 100%;
  overflow-y: auto;
  background-color: var(--theme-secondary);
  color: var(--theme-primary-text);
  padding: 30px;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper {
  padding: 30px;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .settings-content-header {
  border-bottom: 1px solid #ddd;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .box-settings {
  padding: 30px 10px;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .box-settings .theme-container:hover {
  cursor: pointer;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .box-settings .theme-container:hover .theme-box-outer {
  transform: scale(1.05);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .box-settings .theme-box-outer {
  width: 200px;
  height: 200px;
  position: relative;
  display: flex;
  font-weight: bold;
  font-size: 14px;
  border: 1px solid #ddd;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .box-settings .theme-box-inner {
  width: 70%;
  height: 70%;
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .box-settings .theme-box-label {
  width: 100%;
  text-align: center;
  font-size: 12px;
  margin-top: 10;
  padding: 20px 0;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .box-settings .language-button {
  padding: 5px 20px;
  border-radius: 0px;
  height: auto;
  margin-bottom: 15px;
  border-color: #D1D1D1;
  color: #333;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .list-device {
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid rgb(221, 221, 221);
  margin-bottom: 10px;
  padding: 20px;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .list-device .list-device-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .device-card {
  display: grid;
  grid-template-columns: 200px 1fr 60px;
  border: 1px solid #e0e0e0;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
  min-height: 80px;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .device-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  border-color: #d0d7de;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .device-os-column {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #f0f0f0;
  padding: 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: #495057;
  position: relative;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .device-os-column::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: linear-gradient(to bottom, transparent, #dee2e6, transparent);
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .device-info-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  background: #ffffff;
  gap: 8px;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .device-action-column {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #ffffff;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .device-id {
  font-weight: 600;
  font-size: 0.9rem;
  color: #212529;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .device-user-agent {
  font-size: 0.8rem;
  color: #6c757d;
  line-height: 1.3;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .security-device-title {
  margin-bottom: 16px !important;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .security-empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  gap: 16px;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .security-empty-icon {
  font-size: 48px !important;
  color: rgba(0, 0, 0, 0.38) !important;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .security-empty-text {
  text-align: center !important;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .security-empty-subtext {
  text-align: center !important;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .security-loading-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  gap: 16px;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .security-error-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  gap: 16px;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .security-retry-button {
  margin-top: 8px;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .device-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .device-login-status {
  color: #28a745 !important;
  font-weight: 500 !important;
  padding: 6px 12px;
  background: #d4edda;
  border-radius: 20px;
  border: 1px solid #c3e6cb;
  white-space: nowrap;
  text-align: right;
  min-width: 140px;
  font-size: 0.85rem;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .device-remove-button {
  color: rgba(0, 0, 0, 0.54) !important;
  transition: all 0.2s ease !important;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .device-remove-button:hover {
  color: #f44336 !important;
  background-color: rgba(244, 67, 54, 0.1) !important;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .device-divider {
  margin: 16px 0 !important;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .device-os-content {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
#csms-studio .container-settings .wrapper-settings .settings-content-container .settings-content-wrapper .device-os-text {
  display: flex;
  flex-direction: column;
}
#csms-studio .container-settings-nav-list {
  width: 100%;
}
#csms-studio .container-security-mfa {
  border: 1px solid #ddd;
  height: 100px;
  margin-bottom: 16px;
}
#csms-studio .container-notification-settings-text {
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 16px;
}
#csms-studio .container-vod-notification-settings-text {
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 16px;
}
/*!************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/resources/assets/styles/ibt.scss ***!
  \************************************************************************************************************************************************************/
#ibt-usage-container #ibt-menu-icon {
  display: none;
}
@media (max-width: 1199px) {
  #ibt-usage-container #ibt-menu-icon {
    position: absolute;
    padding: 16px 4px;
    display: block !important;
    cursor: pointer;
  }
}
#ibt-usage-container .border-radius-0 {
  border-radius: 0px;
}
#ibt-usage-container .border-0 {
  border: 0px;
}
#ibt-usage-container .border-1 {
  border: 1px solid var(--theme-line-color);
}
#ibt-usage-container .border-top-1 {
  border-top: 1px solid var(--theme-line-color);
}
#ibt-usage-container .border-bottom-1 {
  border-bottom: 1px solid var(--theme-line-color);
}
#ibt-usage-container .border-right-1 {
  border-right: 1px solid var(--theme-line-color);
}
#ibt-usage-container .border-left-1 {
  border-left: 1px solid var(--theme-line-color);
}
#ibt-usage-container .ibt-text-color {
  color: #0075f8;
}
#ibt-usage-container .text-color-red {
  color: #ff0000;
}
#ibt-usage-container .text-color-blue {
  color: #0075f8;
}
#ibt-usage-container .section-scroll {
  height: 100%;
  overflow: auto;
}
#ibt-usage-container .btn-search {
  background-color: #0075f8;
  color: white;
  font-weight: bold;
}
#ibt-usage-container .flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
#ibt-usage-container .flex-between {
  display: flex;
  justify-content: space-between;
}
#ibt-usage-container .flex-between .box-gap {
  gap: 16px;
}
#ibt-usage-container .flex-between .flex-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
#ibt-usage-container #ibt-summary-header {
  padding: 10px 20px;
  /*
  .summary-detail-header {
      padding: 0px 24px;
  }
  .header-center-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 48px;
      text-align: center;
  }
  .inner-txt-top {
  }
  .inner-txt-bottom {
  }
  */
}
#ibt-usage-container #ibt-body-container {
  height: 100%;
}
#ibt-usage-container #ibt-search-filters {
  padding: 16px 24px;
  margin: 16px;
}
#ibt-usage-container #ibt-search-filters .select-box-style {
  min-width: 120px;
  margin: 0px;
}
#ibt-usage-container #ibt-search-filters .txt-input-padding .MuiInputBase-input {
  padding: 6.5px 12px !important;
}
#ibt-usage-container .ibt-sidebar-container {
  height: 100%;
}
#ibt-usage-container .ibt-sidebar-container fieldset {
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-bottom: 1px solid var(--theme-line-color);
  border-radius: 0px;
}
#ibt-usage-container .ibt-sidebar-container .ibt-sidebar {
  height: calc(100% - 40px);
  overflow: auto;
}
#ibt-usage-container .ibt-sidebar-container .ibt-sidebar .txt-input-padding .MuiOutlinedInput-root {
  border-radius: 0px;
}
#ibt-usage-container .ibt-sidebar-container .ibt-sidebar .ibt-sidebar-item:hover {
  /*
  cursor: pointer;
  background-color: #F4F4F4;
  */
  cursor: pointer;
  color: var(--theme-text-color);
  background-color: rgba(0, 0, 0, 0.04);
}
#ibt-usage-container .ibt-sidebar-container .ibt-sidebar .item-active {
  font-weight: bold;
  background-color: #dcdcdc;
}
#ibt-usage-container .ibt-sidebar-container .ibt-sidebar .no-quiz {
  height: calc(100% - 40px);
}
#ibt-usage-container #ibt-result-list .content-section-padding {
  padding: 10px 20px;
}
#ibt-usage-container #ibt-result-list .tab-state-container .btn-active {
  background-color: var(--theme-secondary);
  color: white;
  font-weight: bold;
}
#ibt-usage-container #ibt-result-list {
  /*
  .ibt-pagination {
      padding: 16px 0px;
  }
  .txt-input-padding {
      .MuiInputBase-input {
          padding: 6.5px 12px !important;
      }
  }
  */
}
#ibt-usage-container .ibt-loading {
  height: 20px;
  width: 20px;
  margin: 0px auto;
  -webkit-animation: rotation 0.6s infinite linear;
  -moz-animation: rotation 0.6s infinite linear;
  -o-animation: rotation 0.6s infinite linear;
  animation: rotation 0.6s infinite linear;
  border-left: 6px solid rgba(0, 117, 248, 0.15);
  border-right: 6px solid rgba(0, 117, 248, 0.15);
  border-bottom: 6px solid rgba(0, 117, 248, 0.15);
  border-top: 6px solid rgba(0, 117, 248, 0.8);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#ibt-usage-container .sidebar-loading-wrapper {
  height: calc(100% - 40px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.MuiDrawer-anchorLeft .ibt-sidebar {
  height: 100%;
}
.MuiDrawer-anchorLeft .ibt-sidebar fieldset {
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-bottom: 1px solid var(--theme-line-color);
}
.MuiDrawer-anchorLeft .ibt-sidebar .txt-input-padding .MuiOutlinedInput-root {
  border-radius: 0px;
}
.MuiDrawer-anchorLeft .ibt-sidebar .ibt-sidebar-item {
  border-bottom: 1px solid var(--theme-line-color);
}
.MuiDrawer-anchorLeft .ibt-sidebar .ibt-sidebar-item:hover {
  /*
  cursor: pointer;
  background-color: #F4F4F4;
  */
  cursor: pointer;
  color: var(--theme-text-color);
  background-color: rgba(0, 0, 0, 0.04);
}
.MuiDrawer-anchorLeft .ibt-sidebar .item-active {
  font-weight: bold;
  background-color: #dcdcdc;
}
.MuiDrawer-anchorLeft .ibt-sidebar .no-quiz {
  height: calc(100% - 40px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.MuiDrawer-anchorLeft {
  /*
  .ibt-sidebar {
      height: 100%;
      fieldset {
          border-top: 0px;
          border-right: 0px;
          border-left: 0px;
          border-bottom: 1px solid var(--theme-line-color);
      }

      .txt-input-padding {
          .MuiOutlinedInput-root {
              border-radius: 0px;
          }
      }
      .ibt-sidebar-item:hover {
          cursor: pointer;
          background-color: #F4F4F4;
      }
  }
  */
}
.MuiDrawer-anchorLeft .ibt-loading {
  height: 20px;
  width: 20px;
  margin: 0px auto;
  -webkit-animation: rotation 0.6s infinite linear;
  -moz-animation: rotation 0.6s infinite linear;
  -o-animation: rotation 0.6s infinite linear;
  animation: rotation 0.6s infinite linear;
  border-left: 6px solid rgba(0, 117, 248, 0.15);
  border-right: 6px solid rgba(0, 117, 248, 0.15);
  border-bottom: 6px solid rgba(0, 117, 248, 0.15);
  border-top: 6px solid rgba(0, 117, 248, 0.8);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.MuiDrawer-anchorLeft .sidebar-loading-wrapper {
  height: calc(100% - 40px);
  display: flex;
  justify-content: center;
  align-items: center;
}
/*!**************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/resources/assets/styles/login.scss ***!
  \**************************************************************************************************************************************************************/
#csms-studio .pageMain {
  padding-top: 80px;
}
#csms-studio .pageMain .btn-login {
  background-color: #1d2088 !important;
  color: white !important;
  width: 100%;
  padding: 15px 0px;
  text-align: center;
  font-size: 20px;
}
#csms-studio .pageMain #organizationLogo {
  margin-top: 20px;
  min-height: 150px;
  text-align: center;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-top: 100%;
}
#csms-studio .pageMain #mainOrganizationBox {
  margin-top: 20px;
}
#csms-studio .pageMain #form-login {
  margin-top: 40px;
}
#csms-studio .pageMain #AppVersion {
  position: fixed;
  bottom: 6px;
  right: 6px;
  font-size: 10px;
}
#csms-studio .pageMain .selectOrganization {
  font-size: 18.75px;
}
#csms-studio .pageMain #form-login {
  margin-top: 4px;
}
#csms-studio .pageMain .form-group {
  margin-bottom: 10px;
}
#csms-studio .container-form-login {
  width: 100%;
}
#csms-studio .btn-login-submit {
  margin-top: 16px;
}
#csms-studio .login-container-centered {
  width: 380px;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
#csms-studio .login-logo {
  width: 100%;
  max-width: 250px;
  height: auto;
}
#csms-studio .signInContainer {
  padding: 20px;
  margin-top: 10vh;
  position: relative;
}
#csms-studio .signInContainer::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%));
  background-repeat: no-repeat;
}
#csms-studio .darkMode::before {
  background-image: radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%));
}
#csms-studio .card {
  display: flex;
  flex-direction: column;
  align-self: center;
  width: 100%;
  padding: 16px;
  gap: 16px;
  margin: auto;
  box-shadow: hsla(220, 30%, 5%, 0.05) 0px 5px 15px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px;
}
@media (min-width: 600px) {
  #csms-studio .card {
    max-width: 450px;
  }
}
#csms-studio .card.dark {
  box-shadow: hsla(220, 30%, 5%, 0.5) 0px 5px 15px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px;
}
#csms-studio .formBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 16px;
}
#csms-studio .formControl {
  display: flex;
  flex-direction: column;
}
#csms-studio .formControlLabel {
  display: flex;
  justify-content: space-between;
}
#csms-studio .typographyCenter {
  text-align: center;
}
#csms-studio .divider {
  margin: 16px 0;
}
#csms-studio .container-unavailable {
  display: flex;
  width: 100%;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#csms-studio .container-unavailable-paper {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 32px;
  text-align: center;
  overflow: hidden;
  border-radius: 16px;
}
#csms-studio .container-unavailable-content {
  position: relative;
  z-index: 1;
}
#csms-studio .container-unavailable-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(244, 67, 54, 0.1);
  margin: 0 auto;
  margin-bottom: 24px;
}
#csms-studio .icon-unavailable-warning {
  font-size: 40px;
}
#csms-studio .text-unavailable-description {
  margin-bottom: 24px;
}
/*!*****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/resources/assets/styles/_commons.scss ***!
  \*****************************************************************************************************************************************************************/
#csms-studio .custom-modal__paper,
.csmsmedia-studio-modal-content .custom-modal__paper {
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
#csms-studio .custom-modal__title,
.csmsmedia-studio-modal-content .custom-modal__title {
  padding-bottom: 8px;
}
#csms-studio .custom-modal__title-content,
.csmsmedia-studio-modal-content .custom-modal__title-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#csms-studio .custom-modal__title-left,
.csmsmedia-studio-modal-content .custom-modal__title-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
#csms-studio .custom-modal__close-button,
.csmsmedia-studio-modal-content .custom-modal__close-button {
  color: rgba(0, 0, 0, 0.54);
}
#csms-studio .custom-modal__content,
.csmsmedia-studio-modal-content .custom-modal__content {
  padding-bottom: 16px;
}
#csms-studio .custom-modal__message,
.csmsmedia-studio-modal-content .custom-modal__message {
  white-space: pre-line;
}
#csms-studio .custom-modal__actions,
.csmsmedia-studio-modal-content .custom-modal__actions {
  padding: 0 24px 24px 24px !important;
}
#csms-studio .custom-modal__button,
.csmsmedia-studio-modal-content .custom-modal__button {
  min-width: 100px;
}
#csms-studio .custom-modal__cancel-button,
.csmsmedia-studio-modal-content .custom-modal__cancel-button {
  min-width: 100px;
}
#csms-studio .custom-modal__confirm-button,
.csmsmedia-studio-modal-content .custom-modal__confirm-button {
  min-width: 100px;
}
#csms-studio .modal-error,
.csmsmedia-studio-modal-content .modal-error {
  background-color: #fef2f2;
}
#csms-studio .modal-warning,
.csmsmedia-studio-modal-content .modal-warning {
  background-color: #fffbeb;
}
#csms-studio .modal-info,
.csmsmedia-studio-modal-content .modal-info {
  background-color: #eff6ff;
}
#csms-studio .modal-default,
.csmsmedia-studio-modal-content .modal-default {
  background-color: #f9fafb;
}
#csms-studio .rainbow-button,
.csmsmedia-studio-modal-content .rainbow-button {
  position: relative;
  overflow: hidden;
  border: none !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  padding: 5px !important;
}
#csms-studio .rainbow-button::before,
.csmsmedia-studio-modal-content .rainbow-button::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  background: transparent;
  border-radius: inherit;
  z-index: 0;
  transition: all 0.3s ease;
}
#csms-studio .rainbow-button::after,
.csmsmedia-studio-modal-content .rainbow-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3, #54a0ff);
  background-size: 400% 400%;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: none;
}
#csms-studio .rainbow-button .MuiButton-startIcon,
#csms-studio .rainbow-button .MuiButton-label,
.csmsmedia-studio-modal-content .rainbow-button .MuiButton-startIcon,
.csmsmedia-studio-modal-content .rainbow-button .MuiButton-label {
  position: relative;
  z-index: 10;
}
#csms-studio .rainbow-button:hover:not(:disabled),
.csmsmedia-studio-modal-content .rainbow-button:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
#csms-studio .rainbow-button:hover:not(:disabled) .MuiButton-startIcon,
.csmsmedia-studio-modal-content .rainbow-button:hover:not(:disabled) .MuiButton-startIcon {
  color: var(--theme-text-color, #333) !important;
}
#csms-studio .rainbow-button:hover:not(:disabled) .rainbow-button-text,
.csmsmedia-studio-modal-content .rainbow-button:hover:not(:disabled) .rainbow-button-text {
  z-index: 10;
  color: var(--theme-text-color, #333) !important;
}
#csms-studio .rainbow-button:hover:not(:disabled)::before,
.csmsmedia-studio-modal-content .rainbow-button:hover:not(:disabled)::before {
  background: #f5f5f5;
}
#csms-studio .rainbow-button:hover:not(:disabled)::after,
.csmsmedia-studio-modal-content .rainbow-button:hover:not(:disabled)::after {
  opacity: 1;
  animation: rainbow-gradient 3s ease infinite;
}
#csms-studio .rainbow-button:active:not(:disabled),
.csmsmedia-studio-modal-content .rainbow-button:active:not(:disabled) {
  transform: translateY(0) scale(1);
}
#csms-studio .rainbow-button .MuiButton-startIcon,
.csmsmedia-studio-modal-content .rainbow-button .MuiButton-startIcon {
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.1));
  transition: all 0.3s ease;
}
#csms-studio .rainbow-button .MuiButton-label,
.csmsmedia-studio-modal-content .rainbow-button .MuiButton-label {
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
#csms-studio .rainbow-button:hover:not(:disabled) .MuiButton-startIcon,
.csmsmedia-studio-modal-content .rainbow-button:hover:not(:disabled) .MuiButton-startIcon {
  animation: icon-glow 2s ease-in-out infinite alternate;
}
#csms-studio .rainbow-button:disabled,
.csmsmedia-studio-modal-content .rainbow-button:disabled {
  background: transparent;
  border: 1px solid #ccc !important;
  animation: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: none;
  cursor: not-allowed;
}
#csms-studio .rainbow-button:disabled::after,
.csmsmedia-studio-modal-content .rainbow-button:disabled::after {
  display: none;
}
#csms-studio .rainbow-button:disabled .MuiButton-startIcon,
.csmsmedia-studio-modal-content .rainbow-button:disabled .MuiButton-startIcon {
  animation: none;
  filter: none;
  color: rgba(0, 0, 0, 0.26) !important;
}
#csms-studio .rainbow-button:disabled .MuiButton-label,
.csmsmedia-studio-modal-content .rainbow-button:disabled .MuiButton-label {
  color: rgba(0, 0, 0, 0.26) !important;
  text-shadow: none;
}

@keyframes rainbow-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes icon-glow {
  0% {
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
  }
  100% {
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
  }
}
.csms-studio-loader {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
  margin: 15px auto;
  position: relative;
  color: #0277FD;
  left: -100px;
  box-sizing: border-box;
  animation: shadowRolling 2s linear infinite;
}

@keyframes shadowRolling {
  0% {
    box-shadow: 0px 0 rgba(2, 119, 253, 0), 0px 0 rgba(2, 119, 253, 0), 0px 0 rgba(2, 119, 253, 0), 0px 0 rgba(2, 119, 253, 0);
  }
  12% {
    box-shadow: 100px 0 #0277FD, 0px 0 rgba(2, 119, 253, 0), 0px 0 rgba(2, 119, 253, 0), 0px 0 rgba(2, 119, 253, 0);
  }
  25% {
    box-shadow: 110px 0 #0277FD, 100px 0 #0277FD, 0px 0 rgba(2, 119, 253, 0), 0px 0 rgba(2, 119, 253, 0);
  }
  36% {
    box-shadow: 120px 0 #0277FD, 110px 0 #0277FD, 100px 0 #0277FD, 0px 0 rgba(2, 119, 253, 0);
  }
  50% {
    box-shadow: 130px 0 #0277FD, 120px 0 #0277FD, 110px 0 #0277FD, 100px 0 #0277FD;
  }
  62% {
    box-shadow: 200px 0 rgba(2, 119, 253, 0), 130px 0 #0277FD, 120px 0 #0277FD, 110px 0 #0277FD;
  }
  75% {
    box-shadow: 200px 0 rgba(2, 119, 253, 0), 200px 0 rgba(2, 119, 253, 0), 130px 0 #0277FD, 120px 0 #0277FD;
  }
  87% {
    box-shadow: 200px 0 rgba(2, 119, 253, 0), 200px 0 rgba(2, 119, 253, 0), 200px 0 rgba(2, 119, 253, 0), 130px 0 #0277FD;
  }
  100% {
    box-shadow: 200px 0 rgba(2, 119, 253, 0), 200px 0 rgba(2, 119, 253, 0), 200px 0 rgba(2, 119, 253, 0), 200px 0 rgba(2, 119, 253, 0);
  }
}
/*!*************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/resources/assets/styles/main.scss ***!
  \*************************************************************************************************************************************************************/
@charset "UTF-8";
/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

:root,
[data-bs-theme=light] {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-transparent: transparent;
  --csms-studio-tx-hierarchy-primary: #161819;
  --csms-studio-tx-hierarchy-secondary: #2c2f32;
  --csms-studio-tx-hierarchy-tertiary: #575e64;
  --csms-studio-tx-hierarchy-quaternary: #6d767e;
  --csms-studio-tx-hierarchy-quinary: #899199;
  --csms-studio-tx-hierarchy-senary: #c4c8cc;
  --csms-studio-tx-hierarchy-senary-subtle: #e0e3e5;
  --csms-studio-tx-neutral-white: #ffffff;
  --csms-studio-tx-neutral-black: #000000;
  --csms-studio-tx-neutral-black-solid: #000000;
  --csms-studio-tx-neutral-white-solid: #ffffff;
  --csms-studio-tx-neutral-b20p-disabled: rgba(0, 0, 0, 0.2);
  --csms-studio-tx-neutral-w80p-disabled: rgba(255, 255, 255, 0.8);
  --csms-studio-tx-coursemos-primary: #0075F8;
  --csms-studio-tx-coursemos-secondary: #005DC8;
  --csms-studio-tx-coursemos-tertiary: #0052AF;
  --csms-studio-tx-coursemos-quaternary: #97C8FF;
  --csms-studio-tx-coursemos-quinary: #CBE3FF;
  --csms-studio-tx-coursemos-quinary-subtle: #D9EAFF;
  --csms-studio-tx-coursemos-senary: #E5F1FF;
  --csms-studio-tx-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-tx-semantic-nega-primary: #f04438;
  --csms-studio-tx-semantic-nega-secondary: #dc1e11;
  --csms-studio-tx-semantic-nega-tertiary: #c11a0e;
  --csms-studio-tx-semantic-nega-quaternary: #8a130a;
  --csms-studio-tx-semantic-nega-quinary: #530b06;
  --csms-studio-tx-semantic-nega-senary: #fbebed;
  --csms-studio-tx-semantic-info-primary: #1181f9;
  --csms-studio-tx-semantic-info-secondary: #0673e7;
  --csms-studio-tx-semantic-info-tertiary: #0564ca;
  --csms-studio-tx-semantic-info-quaternary: #c0defd;
  --csms-studio-tx-semantic-info-quinary: #d5e9fe;
  --csms-studio-tx-semantic-info-senary: #e0eefe;
  --csms-studio-tx-semantic-posi-primary: #1ea465;
  --csms-studio-tx-semantic-posi-secondary: #188351;
  --csms-studio-tx-semantic-posi-tertiary: #157347;
  --csms-studio-tx-semantic-posi-quaternary: #0f5233;
  --csms-studio-tx-semantic-posi-quinary: #09311e;
  --csms-studio-tx-semantic-posi-senary: #e4faf0;
  --csms-studio-tx-semantic-noti-primary: #ffc107;
  --csms-studio-tx-semantic-prog-primary: #fd7e14;
  --csms-studio-tx-semantic-etc-primary: #6f42c1;
  --csms-studio-bo-hierarchy-primary: #eeeff0;
  --csms-studio-bo-hierarchy-secondary: #e0e3e5;
  --csms-studio-bo-hierarchy-tertiary: #d3d6d9;
  --csms-studio-bo-hierarchy-quaternary: #c4c8cc;
  --csms-studio-bo-hierarchy-quaternary-subtle: #6d767e;
  --csms-studio-bo-hierarchy-quinary: #41474b;
  --csms-studio-bo-hierarchy-senary: #161819;
  --csms-studio-bo-neutral-white: #ffffff;
  --csms-studio-bo-neutral-black: #000000;
  --csms-studio-bo-neutral-white-solid: #ffffff;
  --csms-studio-bo-neutral-black-solid: #000000;
  --csms-studio-bo-neutral-b30p: rgba(0, 0, 0, 0.3);
  --csms-studio-bo-coursemos-primary: #0075F8;
  --csms-studio-bo-coursemos-secondary: #005DC8;
  --csms-studio-bo-coursemos-tertiary: #0052AF;
  --csms-studio-bo-coursemos-quaternary: #97C8FF;
  --csms-studio-bo-coursemos-quinary: #CBE3FF;
  --csms-studio-bo-coursemos-senary: #E5F1FF;
  --csms-studio-bo-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bo-semantic-nega-primary: #f04438;
  --csms-studio-bo-semantic-nega-secondary: #dc1e11;
  --csms-studio-bo-semantic-nega-tertiary: #c11a0e;
  --csms-studio-bo-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bo-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-bo-semantic-info-primary: #1181f9;
  --csms-studio-bo-semantic-info-secondary: #0673e7;
  --csms-studio-bo-semantic-info-tertiary: #0564ca;
  --csms-studio-bo-semantic-info-quaternary: #c0defd;
  --csms-studio-bo-semantic-info-quinary: #d5e9fe;
  --csms-studio-bo-semantic-info-senary: #e0eefe;
  --csms-studio-bo-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bo-semantic-info-40p: rgba(17, 129, 249, 0.4);
  --csms-studio-bo-semantic-posi-primary: #1ea465;
  --csms-studio-bo-semantic-posi-secondary: #188351;
  --csms-studio-bo-semantic-posi-tertiary: #157347;
  --csms-studio-bo-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bo-semantic-warn-primary: #ffc107;
  --csms-studio-bo-semantic-noti-primary: #ffc107;
  --csms-studio-bo-semantic-prog-primary: #fd7e14;
  --csms-studio-bo-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-hierarchy-primary: #fcfcfc;
  --csms-studio-bg-hierarchy-primary-subtle: #f5f5f5;
  --csms-studio-bg-hierarchy-secondary: #f0f1f2;
  --csms-studio-bg-hierarchy-secondary-subtle: #eeeff0;
  --csms-studio-bg-hierarchy-tertiary: #e0e3e5;
  --csms-studio-bg-hierarchy-quaternary: #d3d6d9;
  --csms-studio-bg-hierarchy-quinary: #899199;
  --csms-studio-bg-hierarchy-senary: #6d767e;
  --csms-studio-bg-hierarchy-senary-subtle: #575e64;
  --csms-studio-bg-neutral-white: #ffffff;
  --csms-studio-bg-neutral-black: #000000;
  --csms-studio-bg-neutral-white-solid: #ffffff;
  --csms-studio-bg-neutral-black-solid: #000000;
  --csms-studio-bg-neutral-b6p-hovered: rgba(0, 0, 0, 0.06);
  --csms-studio-bg-neutral-b10p: rgba(0, 0, 0, 0.1);
  --csms-studio-bg-neutral-b15p: rgba(0, 0, 0, 0.15);
  --csms-studio-bg-neutral-b60p: rgba(0, 0, 0, 0.6);
  --csms-studio-bg-neutral-b80p: rgba(0, 0, 0, 0.8);
  --csms-studio-bg-neutral-w90p: rgba(255, 255, 255, 0.9);
  --csms-studio-bg-neutral-w50p: rgba(255, 255, 255, 0.5);
  --csms-studio-bg-neutral-w30p: rgba(255, 255, 255, 0.3);
  --csms-studio-bg-neutral-w20p: rgba(255, 255, 255, 0.2);
  --csms-studio-bg-neutral-w5p: rgba(255, 255, 255, 0.05);
  --csms-studio-bg-neutral-w1p: rgba(255, 255, 255, 0.01);
  --csms-studio-bg-coursemos-primary: #0075F8;
  --csms-studio-bg-coursemos-secondary: #0069E1;
  --csms-studio-bg-coursemos-tertiary: #005DC8;
  --csms-studio-bg-coursemos-quaternary: #97C8FF;
  --csms-studio-bg-coursemos-quinary: #CBE3FF;
  --csms-studio-bg-coursemos-quinary-subtle: #D9EAFF;
  --csms-studio-bg-coursemos-senary: #E5F1FF;
  --csms-studio-bg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bg-semantic-nega-primary: #f04438;
  --csms-studio-bg-semantic-nega-secondary: #dc1e11;
  --csms-studio-bg-semantic-nega-tertiary: #c11a0e;
  --csms-studio-bg-semantic-nega-quaternary: #ea8791;
  --csms-studio-bg-semantic-nega-quinary: #f8d7da;
  --csms-studio-bg-semantic-nega-senary: #fbebed;
  --csms-studio-bg-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bg-semantic-info-primary: #1181f9;
  --csms-studio-bg-semantic-info-secondary: #0564ca;
  --csms-studio-bg-semantic-info-tertiary: #0456ad;
  --csms-studio-bg-semantic-info-quaternary: #c0defd;
  --csms-studio-bg-semantic-info-quinary: #d5e9fe;
  --csms-studio-bg-semantic-info-senary: #e0eefe;
  --csms-studio-bg-semantic-info-senary-subtle: #eaf4fe;
  --csms-studio-bg-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bg-semantic-posi-primary: #1ea465;
  --csms-studio-bg-semantic-posi-secondary: #188351;
  --csms-studio-bg-semantic-posi-tertiary: #157347;
  --csms-studio-bg-semantic-posi-quaternary: #5fe2a5;
  --csms-studio-bg-semantic-posi-quinary: #caf5e1;
  --csms-studio-bg-semantic-posi-senary: #e4faf0;
  --csms-studio-bg-semantic-posi-30p: rgba(30, 164, 101, 0.3);
  --csms-studio-bg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-posi-50p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-warn-primary: #ffc107;
  --csms-studio-bg-semantic-warn-secondary: #d09c00;
  --csms-studio-bg-semantic-warn-tertiary: #9c7500;
  --csms-studio-bg-semantic-warn-quaternary: #ffda69;
  --csms-studio-bg-semantic-warn-quinary: #fff3cd;
  --csms-studio-bg-semantic-warn-quinary-subtle: #ffecb4;
  --csms-studio-bg-semantic-warn-senary: #fff9e6;
  --csms-studio-bg-semantic-prog-primary: #fd7e14;
  --csms-studio-bg-semantic-prog-secondary: #d54d03;
  --csms-studio-bg-semantic-prog-tertiary: #ba4303;
  --csms-studio-bg-semantic-prog-quaternary: #fda271;
  --csms-studio-bg-semantic-prog-quinary: #fee0d0;
  --csms-studio-bg-semantic-prog-senary: #fff0e7;
  --csms-studio-bg-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-semantic-etc-secondary: #58339d;
  --csms-studio-bg-semantic-etc-tertiary: #4d2d89;
  --csms-studio-bg-semantic-etc-quaternary: #a98eda;
  --csms-studio-bg-semantic-etc-quinary: #e2d9f3;
  --csms-studio-bg-semantic-etc-senary: #f1ecf9;
  --csms-studio-fg-hierarchy-primary: #161819;
  --csms-studio-fg-hierarchy-secondary: #2c2f32;
  --csms-studio-fg-hierarchy-tertiary: #575e64;
  --csms-studio-fg-hierarchy-quaternary: #6d767e;
  --csms-studio-fg-hierarchy-quinary: #899199;
  --csms-studio-fg-hierarchy-senary: #c4c8cc;
  --csms-studio-fg-hierarchy-senary-subtle: #e0e3e5;
  --csms-studio-fg-neutral-white: #ffffff;
  --csms-studio-fg-neutral-black: #000000;
  --csms-studio-fg-neutral-white-solid: #ffffff;
  --csms-studio-fg-neutral-black-solid: #000000;
  --csms-studio-fg-neutral-w50p-solid: rgba(255, 255, 255, 0.5);
  --csms-studio-fg-neutral-w80p-solid: rgba(255, 255, 255, 0.8);
  --csms-studio-fg-coursemos-primary: #0075F8;
  --csms-studio-fg-coursemos-secondary: #005DC8;
  --csms-studio-fg-coursemos-tertiary: #0052AF;
  --csms-studio-fg-coursemos-quaternary: #2F90FF;
  --csms-studio-fg-coursemos-quinary: #CBE3FF;
  --csms-studio-fg-coursemos-senary: #E5F1FF;
  --csms-studio-fg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-fg-coursemos-primary-50p: rgba(0, 117, 248, 0.5);
  --csms-studio-fg-semantic-nega: #f04438;
  --csms-studio-fg-semantic-nega-quinary: #530b06;
  --csms-studio-fg-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-warn-primary: #ffc107;
  --csms-studio-fg-semantic-warn-senary: #ffda69;
  --csms-studio-fg-semantic-posi: #1ea465;
  --csms-studio-fg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-fg-semantic-info: #1181f9;
  --csms-studio-fg-semantic-prog: #fd7e14;
  --csms-studio-fg-semantic-etc: #6f42c1;
  --csms-studio-ut-school-primary: #0075F8;
  --csms-studio-ut-school-secondary: #2F90FF;
  --csms-studio-ut-graph-gray-primary: #a7adb2;
  --csms-studio-ut-graph-gray-secondary: #eeeff0;
  --csms-studio-ut-graph-blue-primary: #0673e7;
  --csms-studio-ut-graph-blue-secondary: #6db2fb;
  --csms-studio-ut-graph-blue-tertiary: #7DBAFF;
  --csms-studio-ut-graph-blue-quaternary: #CBE3FF;
  --csms-studio-ut-graph-blue-quinary: #D9EAFF;
  --csms-studio-ut-graph-green-primary: #57ae00;
  --csms-studio-ut-graph-green-secondary: #cbea00;
  --csms-studio-ut-graph-green-quaternary: #d7f0ac;
  --csms-studio-ut-graph-violet-primary: #7d55c8;
  --csms-studio-ut-graph-yellow-secondary: #ffe082;
  --csms-studio-border-radius-4: 4px;
  --csms-studio-border-radius-6: 6px;
  --csms-studio-border-radius-8: 8px;
  --csms-studio-border-radius-10: 10px;
  --csms-studio-border-radius-12: 12px;
  --csms-studio-border-radius-16: 16px;
  --csms-studio-border-radius-32: 32px;
  --csms-studio-border-radius-full: 999px;
  --csms-studio-space-2: 2px;
  --csms-studio-space-4: 4px;
  --csms-studio-space-6: 6px;
  --csms-studio-space-8: 8px;
  --csms-studio-space-10: 10px;
  --csms-studio-space-12: 12px;
  --csms-studio-space-16: 16px;
  --csms-studio-space-18: 18px;
  --csms-studio-space-20: 20px;
  --csms-studio-space-24: 24px;
  --csms-studio-space-28: 28px;
  --csms-studio-space-32: 32px;
  --csms-studio-space-40: 40px;
  --csms-studio-space-80: 80px;
  --csms-studio-gap-2: 2px;
  --csms-studio-gap-4: 4px;
  --csms-studio-gap-6: 6px;
  --csms-studio-gap-8: 8px;
  --csms-studio-gap-10: 10px;
  --csms-studio-gap-12: 12px;
  --csms-studio-gap-16: 16px;
  --csms-studio-gap-18: 18px;
  --csms-studio-gap-20: 20px;
  --csms-studio-gap-24: 24px;
  --csms-studio-gap-28: 28px;
  --csms-studio-gap-32: 32px;
  --csms-studio-gap-40: 40px;
  --csms-studio-gap-80: 80px;
}

.csms-studio-box-shadow-xsm {
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.csms-studio-box-shadow-sm {
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.csms-studio-box-shadow-md {
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}

.csms-studio-box-shadow-lg {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.csms-studio-box-shadow-xl {
  box-shadow: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-2xl {
  box-shadow: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-3xl {
  box-shadow: 0 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
}

/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

.csms-studio-heading-2xlg {
  --csms-studio-heading-font-weight: 700;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-xlg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 40px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 56px;
  margin-bottom: 0;
}

.csms-studio-heading-lg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 32px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 45px;
  margin-bottom: 0;
}

.csms-studio-heading-md {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 28px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-sm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm-semibold {
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-label-xlg-bold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-semibold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-medium {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-normal {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-bold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-semibold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-medium {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-normal {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-bold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-semibold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-medium {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-normal {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-bold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-semibold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-medium {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-normal {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-bold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-semibold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-medium {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-normal {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-bold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-semibold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-medium {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-normal {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-caption-lg {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-md {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-sm {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 10px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 12px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  padding: 20px;
  border-radius: var(--csms-studio-border-radius-8);
}
.csms-studio-search-container .search-title {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csms-studio-search-container .search-box {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.csms-studio-search-container .search-box .search-box-select-input {
  display: flex;
  align-items: center;
  gap: 4px;
}

.csms-studio-flex-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.csms-studio-flex-box.csms-studio-flex-box-sm {
  gap: 4px;
}

.csms-studio-user-picture {
  display: flex;
  align-items: center;
  gap: 8px;
}
.csms-studio-user-picture img {
  border-radius: 50%;
}
.csms-studio-user-picture.csms-studio-user-picture-sm {
  gap: 4px;
}

.csms-studio-box .csms-studio-box-header .button-container .bar, .csms-studio-bar {
  --csms-studio-bar-height: 32px;
  width: 1px;
  height: var(--csms-studio-bar-height);
  background-color: var(--csms-studio-bo-hierarchy-secondary);
}

.csms-studio-bar-10 {
  --csms-studio-bar-height: 10px;
}

.csms-studio-bar-32 {
  --csms-studio-bar-height: 32px;
}

.csms-studio-horizontal-bar {
  width: 100%;
  height: 1px;
  background-color: var(--csms-studio-bo-hierarchy-secondary);
}

.card {
  --bs-card-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --bs-card-color: var(--csms-studio-tx-hierarchy-secondary);
}

.card-csms {
  --bs-card-spacer-y: 16px;
  --bs-card-spacer-x: 16px;
  --bs-card-border-radius: 16px;
  --bs-card-inner-border-radius: 16px 16px 0 0;
  /*
  .card-body {
      padding: 16px;
  }
  */
}
.card-csms .card-body {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-title-xlg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
}

.csms-studio-title-lg {
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
}

.csms-studio-title-md {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
  margin: 0;
}

.csms-studio-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
}
.csms-studio-box.csms-studio-box-gap-none {
  gap: 0;
}
.csms-studio-box .csms-studio-box-header {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 36px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
  margin: 0;
}
.csms-studio-box .csms-studio-box-header .csms-studio-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
  margin: 0;
  margin-bottom: 0;
}
.csms-studio-box .csms-studio-box-header .totalcount {
  display: flex;
  align-items: center;
  gap: 2px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-box .csms-studio-box-header .totalcount span {
  color: var(--csms-studio-tx-coursemos-primary);
}
.csms-studio-box .csms-studio-box-header .button-container {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.csms-studio-box .csms-studio-box-header .button-container .button-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.csms-studio-box .csms-studio-box-content {
  width: 100%;
}

.csms-studio-box-lg .csms-studio-box-header {
  gap: 4px;
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
}
.csms-studio-box-lg .csms-studio-box-header .btn-csms-studio-icon {
  flex-shrink: 0;
}
.csms-studio-box-lg .csms-studio-box-header .csms-studio-title {
  display: flex;
  align-items: center;
  gap: 4px;
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
  margin-bottom: 0;
}
.csms-studio-box-lg .csms-studio-box-header .csms-studio-title span {
  color: var(--csms-studio-tx-coursemos-primary);
}

.csms-studio-box-xlg .csms-studio-box-header {
  gap: 8px;
  padding-left: 8px;
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
}
.csms-studio-box-xlg .csms-studio-box-header .title-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
.csms-studio-box-xlg .csms-studio-box-header .title-badge .csms-studio-title {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
  color: var(--csms-studio-tx-hierarchy-primary);
  margin: 0;
  margin-bottom: 0;
}
.csms-studio-box-xlg .csms-studio-box-header .title-badge .badge {
  flex-shrink: 0;
  display: flex;
  padding: 2px 8px;
  justify-content: center;
  align-items: center;
  border-radius: var(--csms-studio-border-radius-6);
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-bg-neutral-white);
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-semantic-info-primary);
}
.csms-studio-box-xlg .csms-studio-box-header .date {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}

.csms-studio-container {
  --csms-studio-container-gap: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--csms-studio-container-gap);
}
.csms-studio-container > * {
  width: 100%;
}

.csms-studio-container-lg {
  --csms-studio-container-gap: 40px;
}

.csms-studio-container-xlg {
  --csms-studio-container-gap: 56px;
}

.btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn.focus, .btn:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn.focus.hover, .btn:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn:disabled, .btn.disabled {
  opacity: 0.4;
}
.btn.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}

.btn-primary,
.btn-csms-studio-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-primary.hover,
.btn-csms-studio-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-primary.focus, .btn-primary:focus,
.btn-csms-studio-primary.focus,
.btn-csms-studio-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-primary.focus.hover, .btn-primary:focus:hover,
.btn-csms-studio-primary.focus.hover,
.btn-csms-studio-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-primary:disabled, .btn-primary.disabled,
.btn-csms-studio-primary:disabled,
.btn-csms-studio-primary.disabled {
  opacity: 0.4;
}
.btn-primary.btn-csms-studio-svg,
.btn-csms-studio-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-primary.btn-csms-studio-svg-right,
.btn-csms-studio-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-primary svg,
.btn-csms-studio-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-primary svg .svg-color[stroke],
.btn-csms-studio-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-primary svg .svg-color[fill],
.btn-csms-studio-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-primary,
.btn-csms-studio-primary {
  --bs-btn-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-bg: var(--csms-studio-bg-coursemos-primary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-hover-bg: var(--csms-studio-bg-coursemos-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-active-bg: var(--csms-studio-bg-coursemos-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-disabled-bg: var(--csms-studio-bg-coursemos-primary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-coursemos-primary);
}
.btn-primary svg .svg-color[stroke],
.btn-csms-studio-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-neutral-white-solid);
}
.btn-primary svg .svg-color[fill],
.btn-csms-studio-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-neutral-white-solid);
}
.btn-primary.focus, .btn-primary:focus,
.btn-csms-studio-primary.focus,
.btn-csms-studio-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-secondary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-secondary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-secondary.focus, .btn-csms-studio-secondary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-secondary.focus.hover, .btn-csms-studio-secondary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-secondary:disabled, .btn-csms-studio-secondary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-secondary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-secondary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-secondary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-secondary {
  --bs-btn-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-coursemos-quinary-subtle);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-coursemos-quinary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-coursemos-quaternary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-coursemos-quinary-subtle);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-coursemos-quinary-subtle);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-coursemos-senary);
}

.btn-csms-studio-tertiary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-tertiary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-tertiary.focus, .btn-csms-studio-tertiary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-tertiary.focus.hover, .btn-csms-studio-tertiary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-tertiary:disabled, .btn-csms-studio-tertiary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-tertiary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-tertiary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-tertiary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-tertiary {
  --bs-btn-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-quaternary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-hierarchy-secondary);
}

.btn-csms-studio-nega-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-nega-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-nega-primary.focus, .btn-csms-studio-nega-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-nega-primary.focus.hover, .btn-csms-studio-nega-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-nega-primary:disabled, .btn-csms-studio-nega-primary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-nega-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-nega-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-nega-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-nega-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-nega-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-nega-primary {
  --bs-btn-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-bg: var(--csms-studio-bg-semantic-nega-primary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-hover-bg: var(--csms-studio-bg-semantic-nega-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-active-bg: var(--csms-studio-bg-semantic-nega-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-disabled-bg: var(--csms-studio-bg-semantic-nega-primary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-semantic-nega-primary);
}
.btn-csms-studio-nega-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-neutral-white-solid);
}
.btn-csms-studio-nega-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-neutral-white-solid);
}
.btn-csms-studio-nega-primary.focus, .btn-csms-studio-nega-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-outline-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-outline-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-outline-primary.focus, .btn-csms-studio-outline-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-outline-primary.focus.hover, .btn-csms-studio-outline-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-outline-primary:disabled, .btn-csms-studio-outline-primary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-outline-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-outline-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-primary {
  --bs-btn-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-hover-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-coursemos-senary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-active-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-coursemos-quinary);
  --bs-btn-active-border-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-disabled-color: var(--csms-studio-bo-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-coursemos-primary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}

.btn-csms-studio-outline-secondary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-outline-secondary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-outline-secondary.focus, .btn-csms-studio-outline-secondary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-outline-secondary.focus.hover, .btn-csms-studio-outline-secondary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-outline-secondary:disabled, .btn-csms-studio-outline-secondary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-outline-secondary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-secondary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-secondary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-outline-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-secondary {
  --bs-btn-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-coursemos-quaternary);
  --bs-btn-hover-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-coursemos-senary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-coursemos-quaternary);
  --bs-btn-active-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-coursemos-quinary);
  --bs-btn-active-border-color: var(--csms-studio-bo-coursemos-quaternary);
  --bs-btn-disabled-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-coursemos-quaternary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}

.btn-csms-studio-outline-tertiary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-outline-tertiary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-outline-tertiary.focus, .btn-csms-studio-outline-tertiary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-outline-tertiary.focus.hover, .btn-csms-studio-outline-tertiary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-outline-tertiary:disabled, .btn-csms-studio-outline-tertiary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-outline-tertiary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-tertiary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-outline-tertiary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-outline-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-outline-tertiary {
  --bs-btn-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-hover-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-active-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-disabled-color: var(--csms-studio-tx-coursemos-primary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}

.btn-csms-studio-gray-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-primary.focus, .btn-csms-studio-gray-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-primary.focus.hover, .btn-csms-studio-gray-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-primary:disabled, .btn-csms-studio-gray-primary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-primary {
  --bs-btn-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-bg: var(--csms-studio-bg-hierarchy-quinary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-senary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-senary-subtle);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-neutral-white-solid);
  --bs-btn-disabled-bg: var(--csms-studio-bg-hierarchy-quinary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-hierarchy-quinary);
}
.btn-csms-studio-gray-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-neutral-white-solid);
}
.btn-csms-studio-gray-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-neutral-white-solid);
}
.btn-csms-studio-gray-primary.focus, .btn-csms-studio-gray-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-gray-secondary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-secondary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-secondary.focus, .btn-csms-studio-gray-secondary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-secondary.focus.hover, .btn-csms-studio-gray-secondary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-secondary:disabled, .btn-csms-studio-gray-secondary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-secondary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-secondary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-secondary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-secondary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-quaternary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-hierarchy-secondary);
}

.btn-csms-studio-gray-tertiary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-tertiary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-tertiary.focus, .btn-csms-studio-gray-tertiary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-tertiary.focus.hover, .btn-csms-studio-gray-tertiary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-tertiary:disabled, .btn-csms-studio-gray-tertiary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-tertiary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-tertiary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-tertiary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-tertiary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-border-color: var(--csms-studio-transparent);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-hover-border-color: var(--csms-studio-transparent);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-quaternary);
  --bs-btn-active-border-color: var(--csms-studio-transparent);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-disabled-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-hierarchy-secondary);
}
.btn-csms-studio-gray-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-gray-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-csms-studio-gray-outline-primary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-outline-primary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-outline-primary.focus, .btn-csms-studio-gray-outline-primary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-outline-primary.focus.hover, .btn-csms-studio-gray-outline-primary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-outline-primary:disabled, .btn-csms-studio-gray-outline-primary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-outline-primary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-outline-primary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-outline-primary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-outline-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-outline-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-outline-primary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}

.btn-default,
.btn-secondary,
.btn-csms-studio-gray-outline-secondary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-default.hover,
.btn-secondary.hover,
.btn-csms-studio-gray-outline-secondary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-default.focus, .btn-default:focus,
.btn-secondary.focus,
.btn-secondary:focus,
.btn-csms-studio-gray-outline-secondary.focus,
.btn-csms-studio-gray-outline-secondary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-default.focus.hover, .btn-default:focus:hover,
.btn-secondary.focus.hover,
.btn-secondary:focus:hover,
.btn-csms-studio-gray-outline-secondary.focus.hover,
.btn-csms-studio-gray-outline-secondary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-default:disabled, .btn-default.disabled,
.btn-secondary:disabled,
.btn-secondary.disabled,
.btn-csms-studio-gray-outline-secondary:disabled,
.btn-csms-studio-gray-outline-secondary.disabled {
  opacity: 0.4;
}
.btn-default.btn-csms-studio-svg,
.btn-secondary.btn-csms-studio-svg,
.btn-csms-studio-gray-outline-secondary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-default.btn-csms-studio-svg-right,
.btn-secondary.btn-csms-studio-svg-right,
.btn-csms-studio-gray-outline-secondary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-default svg,
.btn-secondary svg,
.btn-csms-studio-gray-outline-secondary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-default svg .svg-color[stroke],
.btn-secondary svg .svg-color[stroke],
.btn-csms-studio-gray-outline-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-default svg .svg-color[fill],
.btn-secondary svg .svg-color[fill],
.btn-csms-studio-gray-outline-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-default,
.btn-secondary,
.btn-csms-studio-gray-outline-secondary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}
.btn-default svg .svg-color[stroke],
.btn-secondary svg .svg-color[stroke],
.btn-csms-studio-gray-outline-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-default svg .svg-color[fill],
.btn-secondary svg .svg-color[fill],
.btn-csms-studio-gray-outline-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-csms-studio-gray-outline-tertiary {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-focus-color: var(--csms-studio-bg-semantic-info-30p);
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  flex: 0 0 auto;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-csms-studio-gray-outline-tertiary.hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-csms-studio-gray-outline-tertiary.focus, .btn-csms-studio-gray-outline-tertiary:focus {
  background-color: var(--csms-studio-btn-focus-bg);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-btn-focus-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-gray-outline-tertiary.focus.hover, .btn-csms-studio-gray-outline-tertiary:focus:hover {
  background-color: var(--bs-btn-hover-bg);
}
.btn-csms-studio-gray-outline-tertiary:disabled, .btn-csms-studio-gray-outline-tertiary.disabled {
  opacity: 0.4;
}
.btn-csms-studio-gray-outline-tertiary.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-outline-tertiary.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-csms-studio-gray-outline-tertiary svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-csms-studio-gray-outline-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-outline-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-gray-outline-tertiary {
  --bs-btn-color: var(--csms-studio-tx-hierarchy-quaternary);
  --bs-btn-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-hover-color: var(--csms-studio-tx-hierarchy-quaternary);
  --bs-btn-hover-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-btn-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-active-color: var(--csms-studio-tx-hierarchy-quaternary);
  --bs-btn-active-bg: var(--csms-studio-bg-hierarchy-tertiary);
  --bs-btn-active-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-btn-disabled-color: var(--csms-studio-tx-hierarchy-quaternary);
  --bs-btn-disabled-bg: var(--csms-studio-bg-neutral-white);
  --bs-btn-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-btn-focus-bg: var(--csms-studio-bg-neutral-white);
}
.btn-csms-studio-gray-outline-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-gray-outline-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}

.btn-xlg {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 52px;
  --csms-studio-btn-padding-y: 13px;
  --csms-studio-btn-padding-left: 24px;
  --csms-studio-btn-padding-right: 24px;
  --csms-studio-btn-padding-svg: 22px;
  --csms-studio-btn-svg-size: 18px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-lg {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 48px;
  --csms-studio-btn-padding-y: 11px;
  --csms-studio-btn-padding-left: 20px;
  --csms-studio-btn-padding-right: 20px;
  --csms-studio-btn-padding-svg: 18px;
  --csms-studio-btn-svg-size: 18px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-md {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-sm {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 40px;
  --csms-studio-btn-padding-y: 8px;
  --csms-studio-btn-padding-left: 16px;
  --csms-studio-btn-padding-right: 16px;
  --csms-studio-btn-padding-svg: 14px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-xsm {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 36px;
  --csms-studio-btn-padding-y: 7px;
  --csms-studio-btn-padding-left: 16px;
  --csms-studio-btn-padding-right: 16px;
  --csms-studio-btn-padding-svg: 14px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-2xsm {
  --bs-btn-border-radius: 6px;
  --csms-studio-btn-height: 32px;
  --csms-studio-btn-padding-y: 5px;
  --csms-studio-btn-padding-left: 12px;
  --csms-studio-btn-padding-right: 12px;
  --csms-studio-btn-padding-svg: 10px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-3xsm {
  --bs-btn-border-radius: 6px;
  --csms-studio-btn-height: 28px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 12px;
  --csms-studio-btn-padding-right: 12px;
  --csms-studio-btn-padding-svg: 10px;
  --csms-studio-btn-svg-size: 12px;
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-4xsm {
  --bs-btn-border-radius: 6px;
  --csms-studio-btn-height: 24px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 10px;
  --csms-studio-btn-padding-right: 10px;
  --csms-studio-btn-padding-svg: 8px;
  --csms-studio-btn-svg-size: 12px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-5xsm {
  --bs-btn-border-radius: 6px;
  --csms-studio-btn-height: 22px;
  --csms-studio-btn-padding-y: 3px;
  --csms-studio-btn-padding-left: 10px;
  --csms-studio-btn-padding-right: 10px;
  --csms-studio-btn-padding-svg: 8px;
  --csms-studio-btn-svg-size: 12px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-ghost {
  --csms-studio-btn-gap: 2px;
  --csms-studio-btn-border-radius: 8px;
  --csms-studio-btn-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-height: 28px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 6px;
  --csms-studio-btn-padding-right: 6px;
  --csms-studio-btn-padding-svg: 4px;
  --csms-studio-btn-svg-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--csms-studio-btn-gap);
  border: 1px solid var(--csms-studio-btn-border-color);
  border-radius: var(--csms-studio-btn-border-radius);
  background-color: var(--csms-studio-btn-background-color);
  color: var(--csms-studio-btn-color);
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-right) var(--csms-studio-btn-padding-y) var(--csms-studio-btn-padding-left);
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.btn-ghost.hover, .btn-ghost:hover {
  background-color: var(--csms-studio-btn-hover-background-color);
}
.btn-ghost.focus, .btn-ghost:focus {
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-ghost.active, .btn-ghost:active {
  background-color: var(--csms-studio-btn-active-background-color);
}
.btn-ghost:disabled, .btn-ghost.disabled {
  opacity: 0.4;
}
.btn-ghost.btn-csms-studio-svg {
  padding-left: var(--csms-studio-btn-padding-svg);
}
.btn-ghost.btn-csms-studio-svg-right {
  padding-right: var(--csms-studio-btn-padding-svg);
}
.btn-ghost svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}
.btn-ghost svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-info);
}
.btn-ghost svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-info);
}

.btn-ghost-primary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
}

.btn-ghost-secondary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bg-coursemos-quinary);
}

.btn-ghost-gray-primary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
}
.btn-ghost-gray-primary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-primary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-ghost-gray-secondary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
}
.btn-ghost-gray-secondary.hover, .btn-ghost-gray-secondary:hover, .btn-ghost-gray-secondary.active, .btn-ghost-gray-secondary:active {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-ghost-gray-secondary.hover svg .svg-color[stroke], .btn-ghost-gray-secondary:hover svg .svg-color[stroke], .btn-ghost-gray-secondary.active svg .svg-color[stroke], .btn-ghost-gray-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-secondary.hover svg .svg-color[fill], .btn-ghost-gray-secondary:hover svg .svg-color[fill], .btn-ghost-gray-secondary.active svg .svg-color[fill], .btn-ghost-gray-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-secondary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-ghost-gray-secondary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}

.btn-ghost-gray-tertiary {
  --csms-studio-btn-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-btn-hover-background-color: var(--csms-studio-bo-semantic-info-senary);
  --csms-studio-btn-active-background-color: var(--csms-studio-bo-semantic-info-quinary);
}
.btn-ghost-gray-tertiary.hover, .btn-ghost-gray-tertiary:hover, .btn-ghost-gray-tertiary.active, .btn-ghost-gray-tertiary:active, .btn-ghost-gray-tertiary.focus, .btn-ghost-gray-tertiary:focus {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-ghost-gray-tertiary.hover svg .svg-color[stroke], .btn-ghost-gray-tertiary:hover svg .svg-color[stroke], .btn-ghost-gray-tertiary.active svg .svg-color[stroke], .btn-ghost-gray-tertiary:active svg .svg-color[stroke], .btn-ghost-gray-tertiary.focus svg .svg-color[stroke], .btn-ghost-gray-tertiary:focus svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-tertiary.hover svg .svg-color[fill], .btn-ghost-gray-tertiary:hover svg .svg-color[fill], .btn-ghost-gray-tertiary.active svg .svg-color[fill], .btn-ghost-gray-tertiary:active svg .svg-color[fill], .btn-ghost-gray-tertiary.focus svg .svg-color[fill], .btn-ghost-gray-tertiary:focus svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-ghost-gray-tertiary svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-ghost-gray-tertiary svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}

.btn-ghost-xlg {
  --csms-studio-btn-gap: 4px;
  --csms-studio-btn-border-radius: 8px;
  --csms-studio-btn-height: 32px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 8px;
  --csms-studio-btn-padding-right: 8px;
  --csms-studio-btn-padding-svg: 6px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-ghost-lg {
  --csms-studio-btn-gap: 4px;
  --csms-studio-btn-border-radius: 8px;
  --csms-studio-btn-height: 32px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 8px;
  --csms-studio-btn-padding-right: 8px;
  --csms-studio-btn-padding-svg: 6px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-ghost-sm {
  --csms-studio-btn-gap: 2px;
  --csms-studio-btn-border-radius: 6px;
  --csms-studio-btn-height: 24px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 6px;
  --csms-studio-btn-padding-right: 6px;
  --csms-studio-btn-padding-svg: 4px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-ghost-xsm {
  --csms-studio-btn-gap: 2px;
  --csms-studio-btn-border-radius: 6px;
  --csms-studio-btn-height: 20px;
  --csms-studio-btn-padding-y: 4px;
  --csms-studio-btn-padding-left: 4px;
  --csms-studio-btn-padding-right: 4px;
  --csms-studio-btn-padding-svg: 2px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-csms-studio-link {
  --csms-studio-btn-gap: 4px;
  --csms-studio-btn-border-radius: 0;
  --csms-studio-btn-border-width: 0;
  --csms-studio-btn-border-color: var(--csms-studio-transpa rent);
  --csms-studio-btn-color: var(--csms-studio-transparent);
  --csms-studio-btn-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-height: 20px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--csms-studio-btn-gap);
  border: var(--csms-studio-btn-border-width) solid var(--csms-studio-btn-border-color);
  border-radius: var(--csms-studio-btn-border-radius);
  background-color: var(--csms-studio-btn-background-color);
  color: var(--csms-studio-btn-color);
  height: var(--csms-studio-btn-height);
  padding: var(--csms-studio-btn-padding);
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  text-decoration: var(--csms-studio-text-decoration);
  color: var(--csms-studio-btn-color);
}
.btn-csms-studio-link .text {
  text-decoration: var(--csms-studio-text-decoration);
  color: var(--csms-studio-btn-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-csms-studio-link.hover, .btn-csms-studio-link:hover {
  background-color: var(--csms-studio-btn-hover-background-color);
}
.btn-csms-studio-link.focus, .btn-csms-studio-link:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-link.active, .btn-csms-studio-link:active {
  background-color: var(--csms-studio-btn-active-background-color);
}
.btn-csms-studio-link:disabled, .btn-csms-studio-link.disabled {
  opacity: 0.4;
}
.btn-csms-studio-link.btn-csms-studio-svg-right {
  --csms-studio-btn-gap: 2px;
}
.btn-csms-studio-link.hover, .btn-csms-studio-link:hover {
  color: var(--csms-studio-btn-hover-color);
}
.btn-csms-studio-link.hover .text, .btn-csms-studio-link:hover .text {
  --csms-studio-text-decoration: underline;
  color: var(--csms-studio-btn-hover-color);
}
.btn-csms-studio-link.active, .btn-csms-studio-link:active {
  color: var(--csms-studio-btn-active-color);
}
.btn-csms-studio-link.active .text, .btn-csms-studio-link:active .text {
  --csms-studio-text-decoration: none;
  color: var(--csms-studio-btn-active-color);
}
.btn-csms-studio-link.btn-csms-studio-underline {
  text-decoration: underline !important;
}
.btn-csms-studio-link svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-info);
}
.btn-csms-studio-link svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-info);
}
.btn-csms-studio-link svg {
  width: var(--csms-studio-btn-svg-size);
  height: var(--csms-studio-btn-svg-size);
}

.btn-csms-studio-link-gray {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
}

.btn-csms-studio-link-gray-secondary {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-hover-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
}

.btn-csms-studio-link-tertiary {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-tertiary);
  --csms-studio-btn-hover-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
}

.btn-csms-studio-link-xlg {
  --csms-studio-btn-height: 23px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-csms-studio-link-lg {
  --csms-studio-btn-height: 21px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-csms-studio-link-sm {
  --csms-studio-btn-height: 18px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.btn-csms-studio-link-xsm {
  --csms-studio-btn-height: 13px;
  --csms-studio-btn-svg-size: 12px;
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-csms-studio-link {
  --csms-studio-btn-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-hover-color: var(--csms-studio-tx-semantic-info-primary);
  --csms-studio-btn-active-color: var(--csms-studio-tx-hierarchy-secondary);
}

.csms-studio-box-shadow-xsm {
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.csms-studio-box-shadow-sm {
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.csms-studio-box-shadow-md {
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}

.csms-studio-box-shadow-lg {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.csms-studio-box-shadow-xl {
  box-shadow: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-2xl {
  box-shadow: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-3xl {
  box-shadow: 0 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
}

/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

.csms-studio-heading-2xlg {
  --csms-studio-heading-font-weight: 700;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-xlg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 40px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 56px;
  margin-bottom: 0;
}

.csms-studio-heading-lg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 32px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 45px;
  margin-bottom: 0;
}

.csms-studio-heading-md {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 28px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-sm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm-semibold {
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-label-xlg-bold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-semibold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-medium {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-normal {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-bold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-semibold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-medium {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-normal {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-bold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-semibold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-medium {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-normal {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-bold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-semibold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-medium {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-normal {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-bold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-semibold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-medium {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-normal {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-bold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-semibold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-medium {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-normal {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-caption-lg {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-md {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-sm {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 10px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 12px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-csms-studio-icon {
  --csms-studio-btn-icon-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-svg-color: --csms-studio-fg-hierarchy-secondary;
  --csms-studio-btn-icon-svg-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--csms-studio-btn-icon-border-color);
  border-radius: var(--csms-studio-btn-icon-border-radius);
  background-color: var(--csms-studio-btn-icon-background-color);
  color: var(--csms-studio-btn-icon-svg-color);
  width: var(--csms-studio-btn-icon-size);
  height: var(--csms-studio-btn-icon-size);
  padding: 0;
}
.btn-csms-studio-icon.hover, .btn-csms-studio-icon:hover {
  background-color: var(--csms-studio-btn-icon-hover-background-color);
}
.btn-csms-studio-icon.focus, .btn-csms-studio-icon:focus {
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-icon.active, .btn-csms-studio-icon:active {
  background-color: var(--csms-studio-btn-icon-active-background-color);
}
.btn-csms-studio-icon:disabled, .btn-csms-studio-icon.disabled, .btn-csms-studio-icon[disabled=disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-csms-studio-icon:disabled:hover, .btn-csms-studio-icon:disabled.hover, .btn-csms-studio-icon.disabled:hover, .btn-csms-studio-icon.disabled.hover, .btn-csms-studio-icon[disabled=disabled]:hover, .btn-csms-studio-icon[disabled=disabled].hover {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.btn-csms-studio-icon:disabled:active, .btn-csms-studio-icon:disabled.active, .btn-csms-studio-icon.disabled:active, .btn-csms-studio-icon.disabled.active, .btn-csms-studio-icon[disabled=disabled]:active, .btn-csms-studio-icon[disabled=disabled].active {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.btn-csms-studio-icon svg {
  width: var(--csms-studio-btn-icon-svg-size);
  height: var(--csms-studio-btn-icon-svg-size);
}
.btn-csms-studio-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-svg-color);
}
.btn-csms-studio-icon svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-svg-color);
}

.btn-csms-studio-icon-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-primary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-neutral-white-solid);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-primary.focus, .btn-csms-studio-icon-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-icon-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-outline-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-coursemos-primary);
}

.btn-csms-studio-icon-outline-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}

.btn-csms-studio-icon-outline-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-coursemos-primary);
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.btn-csms-studio-icon-outline-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.btn-csms-studio-icon-nospace-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-nospace-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-neutral-b10p);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-quinary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-neutral-white-solid);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-senary-subtle);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-primary.disabled, .btn-csms-studio-icon-gray-primary:disabled {
  background-color: var(--csms-studio-bg-hierarchy-senary);
}
.btn-csms-studio-icon-gray-primary.focus, .btn-csms-studio-icon-gray-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-icon-gray-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bo-coursemos-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-quaternary.focus, .btn-csms-studio-icon-gray-quaternary:focus {
  background-color: var(--csms-studio-bg-coursemos-quinary);
}

.btn-csms-studio-icon-gray-outline-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}

.btn-csms-studio-icon-gray-outline-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover, .btn-csms-studio-icon-gray-outline-secondary:hover {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-secondary:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-secondary:hover svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.active, .btn-csms-studio-icon-gray-outline-secondary:active {
  color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-secondary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-secondary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-icon-gray-outline-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.btn-csms-studio-icon-gray-outline-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover, .btn-csms-studio-icon-gray-outline-quaternary:hover {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-quaternary:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-quaternary:hover svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active, .btn-csms-studio-icon-gray-outline-quaternary:active {
  color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-quaternary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-quaternary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-icon-gray-nospace-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-neutral-b6p-hovered);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-neutral-b15p);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-nospace-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover, .btn-csms-studio-icon-gray-nospace-secondary:hover, .btn-csms-studio-icon-gray-nospace-secondary.active, .btn-csms-studio-icon-gray-nospace-secondary:active {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary:hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary:hover svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-csms-studio-icon-gray-nospace-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-info-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-2xsm {
  --csms-studio-btn-icon-size: 20px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 12px;
}

.btn-csms-studio-icon-xsm {
  --csms-studio-btn-icon-size: 24px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 14px;
}

.btn-csms-studio-icon-sm {
  --csms-studio-btn-icon-size: 28px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 16px;
}

.btn-csms-studio-icon-md {
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 18px;
}

.btn-csms-studio-icon-lg {
  --csms-studio-btn-icon-size: 36px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 18px;
}

.btn-csms-studio-icon-xlg {
  --csms-studio-btn-icon-size: 40px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 20px;
}

.btn-csms-studio-icon-2xlg {
  --csms-studio-btn-icon-size: 48px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 24px;
}

.btn-csms-studio-svgicon {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-bg-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-svgicon-size-md: 16px;
  --csms-studio-btn-svgicon-size-lg: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon.hover, .btn-csms-studio-svgicon:hover {
  color: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.hover svg .svg-color[stroke], .btn-csms-studio-svgicon:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.hover svg .svg-color[fill], .btn-csms-studio-svgicon:hover svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.focus, .btn-csms-studio-svgicon:focus {
  color: var(--csms-studio-btn-svgicon-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon.active, .btn-csms-studio-svgicon:active {
  color: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon.active svg .svg-color[stroke], .btn-csms-studio-svgicon:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon.active svg .svg-color[fill], .btn-csms-studio-svgicon:active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon:disabled, .btn-csms-studio-svgicon.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-csms-studio-svgicon svg {
  width: var(--csms-studio-btn-svgicon-size-md);
  height: var(--csms-studio-btn-svgicon-size-md);
}

.btn-csms-studio-svgicon {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-tertiary);
}

.btn-csms-studio-svgicon-help {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active svg .svg-color[stroke], .btn-csms-studio-svgicon-help:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active svg .svg-color[fill], .btn-csms-studio-svgicon-help:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active, .btn-csms-studio-svgicon-help:active {
  background-color: var(--csms-studio-btn-svgicon-bg-color);
}

.btn-csms-studio-svgicon-eye {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-svgicon-eye.active svg .svg-color[stroke], .btn-csms-studio-svgicon-eye:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-svgicon-eye.active svg .svg-color[fill], .btn-csms-studio-svgicon-eye:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-svgicon-home {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home.active svg .svg-color[stroke], .btn-csms-studio-svgicon-home:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home.active svg .svg-color[fill], .btn-csms-studio-svgicon-home:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home svg {
  width: --csms-studio-btn-svgicon-size-lg;
  height: --csms-studio-btn-svgicon-size-lg;
}
.btn-csms-studio-svgicon-home {
  border-radius: 0 !important;
}

.btn-csms-studio-svgicon-circle {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle.hover, .btn-csms-studio-svgicon-circle:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle.focus, .btn-csms-studio-svgicon-circle:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle.active, .btn-csms-studio-svgicon-circle:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle:disabled, .btn-csms-studio-svgicon-circle.disabled {
  opacity: 0.4;
}

.btn-csms-studio-svgicon-circle-arrow {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle-arrow svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-arrow svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-arrow svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle-arrow.hover, .btn-csms-studio-svgicon-circle-arrow:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle-arrow.focus, .btn-csms-studio-svgicon-circle-arrow:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle-arrow.active, .btn-csms-studio-svgicon-circle-arrow:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle-arrow:disabled, .btn-csms-studio-svgicon-circle-arrow.disabled {
  opacity: 0.4;
}
.btn-csms-studio-svgicon-circle-arrow {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-circle-size: 36px;
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.btn-csms-studio-svgicon-circle-help {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle-help svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-help svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-help svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle-help.hover, .btn-csms-studio-svgicon-circle-help:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle-help.focus, .btn-csms-studio-svgicon-circle-help:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle-help.active, .btn-csms-studio-svgicon-circle-help:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle-help:disabled, .btn-csms-studio-svgicon-circle-help.disabled {
  opacity: 0.4;
}
.btn-csms-studio-svgicon-circle-help {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-size: 40px;
}

.btn-csms-studio-like {
  --csms-studio-btn-icon-like-padding-y: 10px;
  --csms-studio-btn-icon-like-padding-x: 16px;
  --csms-studio-btn-icon-like-padding-x-round: 20px;
  --csms-studio-btn-icon-like-background: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-icon-like-hover-background: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-icon-like-active-svg-color: #fd6d6d;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-btn-icon-like-background);
  padding: var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x) var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x-round);
  border-radius: var(--csms-studio-border-radius-full) 0 0 var(--csms-studio-border-radius-full);
}
.btn-csms-studio-like svg {
  width: 20px;
  height: 20px;
}
.btn-csms-studio-like svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-like svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-like {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-csms-studio-like.hover, .btn-csms-studio-like:hover {
  background: var(--csms-studio-btn-icon-like-hover-background);
}
.btn-csms-studio-like.focus, .btn-csms-studio-like:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-like.is-active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-like.is-active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-like.is-active svg .svg-thumb-bg {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}

.btn-csms-studio-dislike {
  --csms-studio-btn-icon-like-padding-y: 10px;
  --csms-studio-btn-icon-like-padding-x: 16px;
  --csms-studio-btn-icon-like-padding-x-round: 20px;
  --csms-studio-btn-icon-like-background: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-icon-like-hover-background: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-icon-like-active-svg-color: #fd6d6d;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-btn-icon-like-background);
  padding: var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x-round) var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x);
  border-radius: 0 var(--csms-studio-border-radius-full) var(--csms-studio-border-radius-full) 0;
}
.btn-csms-studio-dislike svg {
  width: 20px;
  height: 20px;
}
.btn-csms-studio-dislike svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-dislike svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-dislike {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-csms-studio-dislike.hover, .btn-csms-studio-dislike:hover {
  background: var(--csms-studio-btn-icon-like-hover-background);
}
.btn-csms-studio-dislike.focus, .btn-csms-studio-dislike:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-dislike.is-active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-dislike.is-active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-dislike.is-active svg .svg-thumb-bg {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}

.btn-csms-studio-like-container {
  display: flex;
  align-items: center;
}
.btn-csms-studio-like-container .btn-csms-studio-like + .btn-csms-studio-dislike {
  margin-left: -1px;
}

.csms-studio-cons {
  --csms-studio-cons-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-cons-border-radius: 99px;
  --csms-studio-cons-border-color: var(--csms-studio-bo-semantic-info-quaternary);
  --csms-studio-cons-background-color: var(--csms-studio-bg-semantic-info-senary-subtle);
  --csms-studio-cons-background-active-color: var(--csms-studio-bg-semantic-info-primary);
  --csms-studio-cons-background-hover-color: var(--csms-studio-bg-semantic-info-senary);
  --csms-studio-cons-svg-size: 16px;
  --csms-studio-cons-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-cons-padding-x: 20px;
  --csms-studio-cons-padding-y: 8px;
  --csms-studio-cons-height: 44px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--csms-studio-cons-border-color);
  border-radius: var(--csms-studio-cons-border-radius);
  background-color: var(--csms-studio-cons-background-color);
  color: var(--csms-studio-cons-color);
  padding: var(--csms-studio-cons-padding-y) var(--csms-studio-cons-padding-x);
  height: var(--csms-studio-cons-height);
}
.csms-studio-cons.hover, .csms-studio-cons:hover {
  background-color: var(--csms-studio-cons-background-hover-color);
}
.csms-studio-cons.focus, .csms-studio-cons:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.csms-studio-cons.active, .csms-studio-cons:active {
  background-color: var(--csms-studio-cons-background-active-color);
}
.csms-studio-cons:disabled, .csms-studio-cons.disabled {
  opacity: 0.4;
}
.csms-studio-cons svg {
  width: var(--csms-studio-cons-svg-size);
  height: var(--csms-studio-cons-svg-size);
}
.csms-studio-cons svg .svg-color[stroke] {
  stroke: var(--csms-studio-cons-svg-color);
}
.csms-studio-cons svg .svg-color[fill] {
  fill: var(--csms-studio-cons-svg-color);
}

.csms-studio-cons-gray {
  --csms-studio-cons-color: var(--csms-studio-tx-hierarchy-quaternary);
  --csms-studio-cons-background-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-cons-background-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-cons-background-active-color: var(--csms-studio-bg-semantic-info-senary-subtle);
  --csms-studio-cons-border-color: var(--csms-studio-bo-hierarchy-secondary);
}

.vd-error-message {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-semantic-nega-primary);
  text-align: left;
  margin-top: 6px;
}

.form-text {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-secondary-color: var(--csms-studio-tx-hierarchy-tertiary);
  margin-top: 6px;
}
.form-text.form-text-sm {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quinary);
  margin-top: 0;
}

.form-control {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-body-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --bs-background-image: transparent;
  --csms-studio-form-control-height: 40px;
  --csms-studio-form-control-padding-y: 10px;
  --csms-studio-form-control-padding-x: 14px;
  --csms-studio-form-control-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-form-control-placeholder-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-hierarchy-quaternary);
  --csms-studio-form-control-hover-background-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-info-primary);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-form-control-disabled-placeholder-color: var(--csms-studio-tx-hierarchy-senary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-info-30p);
  height: var(--csms-studio-form-control-height);
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
  background-color: var(--csms-studio-form-control-background-color);
}
.form-control::placeholder {
  color: var(--csms-studio-form-control-placeholder-color);
}
.form-control.hover:not(.disabled, :disabled, .read-only, :read-only, .focus, :focus), .form-control:hover:not(.disabled, :disabled, .read-only, :read-only, .focus, :focus) {
  --bs-border-color: var(--csms-studio-form-control-hover-border-color);
  background-color: var(--csms-studio-form-control-hover-background-color);
}
.form-control.focus, .form-control:focus {
  --bs-border-color: var(--csms-studio-form-control-focus-border-color);
  border-color: var(--bs-border-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.form-control.read-only, .form-control:read-only, .form-control.disabled, .form-control:disabled {
  --bs-border-color: var(--csms-studio-form-control-disabled-border-color);
  background-color: var(--csms-studio-form-control-disabled-background-color);
}
.form-control.read-only::placeholder, .form-control:read-only::placeholder, .form-control.disabled::placeholder, .form-control:disabled::placeholder {
  color: var(--csms-studio-form-control-disabled-placeholder-color);
}
.form-control.is-invalid, .form-control.vd-error {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-nega-secondary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-nega-30p);
}
.form-control.is-invalid.disabled, .form-control.is-invalid:disabled, .form-control.vd-error.disabled, .form-control.vd-error:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.form-control.is-invalid + .form-text, .form-control.vd-error + .form-text {
  color: var(--csms-studio-tx-semantic-nega-primary);
}
.form-control.is-valid, .form-control.vd-success {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-posi-secondary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-posi-30p);
}
.form-control.is-valid.disabled, .form-control.is-valid:disabled, .form-control.vd-success.disabled, .form-control.vd-success:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-30p);
}
.form-control + .vd-error-message,
.form-control + .form-text {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.form-control + .vd-error-message.form-text-sm,
.form-control + .form-text.form-text-sm {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quinary);
  margin-top: 0;
}

.form-select {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-body-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --bs-form-select-bg-img: url("data:image/svg+xml,<svg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M5.36321 8.36321C5.71469 8.01174 6.28453 8.01174 6.63601 8.36321L11.9996 13.7268L17.3632 8.36321C17.7147 8.01174 18.2845 8.01174 18.636 8.36321C18.9875 8.71469 18.9875 9.28453 18.636 9.63601L12.636 15.636C12.2845 15.9875 11.7147 15.9875 11.3632 15.636L5.36321 9.63601C5.01174 9.28453 5.01174 8.71469 5.36321 8.36321Z%27 fill=%27#2c2f32%27/%3E%3C/svg%3E");
  --bs-form-select-bg-img-disabled: url("data:image/svg+xml,<svg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M5.36321 8.36321C5.71469 8.01174 6.28453 8.01174 6.63601 8.36321L11.9996 13.7268L17.3632 8.36321C17.7147 8.01174 18.2845 8.01174 18.636 8.36321C18.9875 8.71469 18.9875 9.28453 18.636 9.63601L12.636 15.636C12.2845 15.9875 11.7147 15.9875 11.3632 15.636L5.36321 9.63601C5.01174 9.28453 5.01174 8.71469 5.36321 8.36321Z%27 fill=%27rgba%2844, 47, 50, 0.4%29%27/></svg>");
  --csms-studio-form-select-bg-size: 18px;
  --csms-studio-form-control-height: 40px;
  --csms-studio-form-control-padding-y: 10px;
  --csms-studio-form-control-padding-x: 14px;
  --csms-studio-form-control-padding-x-right: calc(var(--csms-studio-form-select-bg-size) + 14px);
  --csms-studio-form-control-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-form-control-placeholder-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-hover-background-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-background-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-form-control-disabled-placeholder-color: var(--csms-studio-tx-hierarchy-senary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-info-30p);
}
.form-select:not([multiple]) {
  height: var(--csms-studio-form-control-height);
}
.form-select {
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x-right) var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
  background-color: var(--csms-studio-form-control-background-color);
  background-size: var(--csms-studio-form-select-bg-size) var(--csms-studio-form-select-bg-size);
  background-position: right var(--csms-studio-form-control-padding-x) center;
}
.form-select.hover:not(.disabled, :disabled, .ss-disabled, .focus, :focus), .form-select:hover:not(.disabled, :disabled, .ss-disabled, .focus, :focus) {
  --bs-border-color: var(--csms-studio-form-control-hover-border-color);
  background-color: var(--csms-studio-form-control-hover-background-color);
}
.form-select.focus, .form-select:focus {
  --bs-border-color: var(--csms-studio-form-control-focus-border-color);
  border-color: var(--bs-border-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.form-select.disabled, .form-select:disabled {
  --bs-border-color: var(--csms-studio-form-control-disabled-border-color);
  background-color: var(--csms-studio-form-control-disabled-background-color);
  background-image: var(--bs-form-select-bg-img-disabled);
}
.form-select.is-invalid, .form-select.vd-error {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-nega-30p);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.form-select.is-invalid.disabled, .form-select.is-invalid:disabled, .form-select.vd-error.disabled, .form-select.vd-error:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.form-select.is-valid, .form-select.vd-success {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-posi-30p);
}
.form-select.is-valid.disabled, .form-select.is-valid:disabled, .form-select.vd-success.disabled, .form-select.vd-success:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-30p);
}
.form-select:invalid {
  color: var(--csms-studio-tx-hierarchy-quinary);
}

.form-select-3xsm,
.form-control-3xsm {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 16px;
  --csms-studio-form-control-height: 28px;
  --csms-studio-form-control-padding-y: 6px;
  --bs-border-radius: 6px;
}
.form-select-3xsm + .vd-error-message,
.form-select-3xsm + .form-text,
.form-control-3xsm + .vd-error-message,
.form-control-3xsm + .form-text {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.form-select-2xsm,
.form-control-2xsm {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 16px;
  --csms-studio-form-control-height: 32px;
  --csms-studio-form-control-padding-y: 6px;
  --bs-border-radius: 6px;
}
.form-select-2xsm + .vd-error-message,
.form-select-2xsm + .form-text,
.form-control-2xsm + .vd-error-message,
.form-control-2xsm + .form-text {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.form-select-xsm,
.form-control-xsm {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 16px;
  --csms-studio-form-control-height: 36px;
  --csms-studio-form-control-padding-y: 6px;
}

.form-select-md,
.form-control-md {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 44px;
}

.form-select-lg,
.form-control-lg {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 20px;
  --csms-studio-form-control-height: 48px;
}

.form-select-xlg,
.form-control-xlg {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-select-bg-size: 22px;
  --csms-studio-form-control-height: 52px;
}

.input-group > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 40px;
  --csms-studio-btn-padding-y: 8px;
  --csms-studio-btn-padding-left: 16px;
  --csms-studio-btn-padding-right: 16px;
  --csms-studio-btn-padding-svg: 14px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --csms-studio-input-group-btn-svg-gap: 4px;
  --csms-studio-input-group-btn-svg-size: 16px;
  --csms-studio-input-group-btn-padding-left: 14px;
  --csms-studio-input-group-btn-padding-right: 12px;
  --csms-studio-input-group-btn-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-input-group-btn-border-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-input-group-btn-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-input-group-btn-focus-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-input-group-btn-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  gap: var(--csms-studio-input-group-btn-svg-gap);
  padding: 0 var(--csms-studio-input-group-btn-padding-right) 0 var(--csms-studio-input-group-btn-padding-left);
  background-color: var(--csms-studio-input-group-btn-background-color);
  border-color: var(--csms-studio-input-group-btn-border-color);
}
.input-group > .btn svg {
  width: var(--csms-studio-input-group-btn-svg-size);
  height: var(--csms-studio-input-group-btn-svg-size);
}
.input-group > .btn svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.input-group > .btn svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.input-group > .btn.hover, .input-group > .btn:hover {
  background-color: var(--csms-studio-input-group-btn-hover-background-color);
  border-color: var(--csms-studio-input-group-btn-border-color);
}
.input-group > .btn.focus, .input-group > .btn:focus {
  background-color: var(--csms-studio-input-group-btn-focus-background-color);
  border-color: var(--csms-studio-input-group-btn-border-color);
}
.input-group > .btn.active, .input-group > .btn:active {
  background-color: var(--csms-studio-input-group-btn-active-background-color);
  border-color: var(--csms-studio-input-group-btn-border-color);
}
.input-group > .input-group-text {
  --bs-body-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-tertiary-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --csms-studio-form-control-height: 40px;
  --csms-studio-input-group-text-padding-left: 14px;
  --csms-studio-input-group-text-padding-right: 12px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  padding: 0 var(--csms-studio-input-group-text-padding-right) 0 var(--csms-studio-input-group-text-padding-left);
  height: var(--csms-studio-form-control-height);
}
.input-group > .form-control,
.input-group > .form-select {
  --csms-studio-form-control-padding-y: 6px;
  --csms-studio-form-control-padding-x: 14px;
}
.input-group + .vd-error-message,
.input-group + .form-text {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.input-group-xsm > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 36px;
  --csms-studio-btn-padding-y: 7px;
  --csms-studio-btn-padding-left: 16px;
  --csms-studio-btn-padding-right: 16px;
  --csms-studio-btn-padding-svg: 14px;
  --csms-studio-btn-svg-size: 14px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-input-group-btn-svg-size: 16px;
}
.input-group-xsm > .form-control,
.input-group-xsm > .form-select {
  --csms-studio-form-control-padding-y: 6px;
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
}
.input-group-xsm > .form-control,
.input-group-xsm > .form-select,
.input-group-xsm > .input-group-text {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 36px;
}
.input-group-xsm + .form-text,
.input-group-xsm + .vd-error-message {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.input-group-md > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 44px;
  --csms-studio-btn-padding-y: 9px;
  --csms-studio-btn-padding-left: 18px;
  --csms-studio-btn-padding-right: 18px;
  --csms-studio-btn-padding-svg: 16px;
  --csms-studio-btn-svg-size: 16px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-input-group-btn-svg-size: 18px;
  --csms-studio-input-group-btn-padding-left: 16px;
  --csms-studio-input-group-btn-padding-right: 14px;
}
.input-group-md > .input-group-text {
  --csms-studio-input-group-text-padding-left: 16px;
  --csms-studio-input-group-text-padding-right: 14px;
}
.input-group-md > .form-control,
.input-group-md > .form-select {
  --csms-studio-form-control-padding-y: 10px;
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
}
.input-group-md > .form-control,
.input-group-md > .form-select,
.input-group-md > .input-group-text {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 44px;
}

.input-group-lg > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 48px;
  --csms-studio-btn-padding-y: 11px;
  --csms-studio-btn-padding-left: 20px;
  --csms-studio-btn-padding-right: 20px;
  --csms-studio-btn-padding-svg: 18px;
  --csms-studio-btn-svg-size: 18px;
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-input-group-btn-svg-size: 20px;
  --csms-studio-input-group-btn-padding-left: 16px;
  --csms-studio-input-group-btn-padding-right: 14px;
}
.input-group-lg > .input-group-text {
  --csms-studio-input-group-text-padding-left: 16px;
  --csms-studio-input-group-text-padding-right: 14px;
}
.input-group-lg > .form-control,
.input-group-lg > .form-select {
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
}
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 48px;
}

.input-group-xlg > .btn {
  --bs-btn-border-radius: 8px;
  --csms-studio-btn-height: 52px;
  --csms-studio-btn-padding-y: 13px;
  --csms-studio-btn-padding-left: 24px;
  --csms-studio-btn-padding-right: 24px;
  --csms-studio-btn-padding-svg: 22px;
  --csms-studio-btn-svg-size: 18px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  font-weight: 400;
  --csms-studio-input-group-btn-svg-size: 22px;
  --csms-studio-input-group-btn-padding-left: 16px;
  --csms-studio-input-group-btn-padding-right: 14px;
}
.input-group-xlg > .input-group-text {
  --csms-studio-input-group-text-padding-left: 16px;
  --csms-studio-input-group-text-padding-right: 14px;
}
.input-group-xlg > .form-control,
.input-group-xlg > .form-select {
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
}
.input-group-xlg > .form-control,
.input-group-xlg > .form-select,
.input-group-xlg > .input-group-text {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-form-control-height: 52px;
}

.vd-error-message {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-semantic-nega-primary);
}

.form-floating > label {
  color: var(--csms-studio-tx-hierarchy-quinary);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
  color: var(--csms-studio-tx-hierarchy-quinary);
}

.csms-studio-form-floating > .form-control,
.csms-studio-form-floating > .form-control-plaintext,
.csms-studio-form-floating > .form-select {
  height: 56px;
  min-height: 56px;
  line-height: 1.5;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-form-floating > label {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quinary);
  padding: 15px 14px;
}
.csms-studio-form-floating > .form-control,
.csms-studio-form-floating > .form-control-plaintext {
  padding: 15px 14px;
}
.csms-studio-form-floating > .form-control::placeholder,
.csms-studio-form-floating > .form-control-plaintext::placeholder {
  color: transparent;
}
.csms-studio-form-floating > .form-control:focus, .csms-studio-form-floating > .form-control:not(:placeholder-shown),
.csms-studio-form-floating > .form-control-plaintext:focus,
.csms-studio-form-floating > .form-control-plaintext:not(:placeholder-shown) {
  padding-top: 25px;
  padding-bottom: 5px;
}
.csms-studio-form-floating > .form-control:-webkit-autofill,
.csms-studio-form-floating > .form-control-plaintext:-webkit-autofill {
  padding-top: 25px;
  padding-bottom: 5px;
}
.csms-studio-form-floating > .form-select {
  padding-top: 25px;
  padding-bottom: 5px;
}
.csms-studio-form-floating > .form-control:focus ~ label,
.csms-studio-form-floating > .form-control:not(:placeholder-shown) ~ label,
.csms-studio-form-floating > .form-control-plaintext ~ label,
.csms-studio-form-floating > .form-select ~ label {
  color: var(--csms-studio-tx-hierarchy-quinary);
  transform: scale(0.75) translateY(-7.5px) translateX(5px);
}
.csms-studio-form-floating > .form-control:focus ~ label::after,
.csms-studio-form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.csms-studio-form-floating > .form-control-plaintext ~ label::after,
.csms-studio-form-floating > .form-select ~ label::after {
  position: absolute;
  inset: inherit;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: transparent;
  border-radius: 8px;
}
.csms-studio-form-floating > .form-control:-webkit-autofill ~ label {
  color: var(--csms-studio-tx-hierarchy-quinary);
  transform: scale(0.75) translateY(-7.5px) translateX(5px);
}
.csms-studio-form-floating > .form-control-plaintext ~ label {
  border-width: 1px 0;
}
.csms-studio-form-floating > :disabled ~ label,
.csms-studio-form-floating > .form-control:disabled ~ label {
  color: rgba(0, 0, 0, 0.38);
}
.csms-studio-form-floating > :disabled ~ label::after,
.csms-studio-form-floating > .form-control:disabled ~ label::after {
  background-color: #e9ecef;
}

textarea.form-control {
  --csms-studio-form-control-height: inherit;
}

input[type=number].form-control-spin-hide::-webkit-inner-spin-button, input[type=number].form-control-spin-hide::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number].form-control-spin-hide {
  -moz-appearance: textfield;
}

.dropdown-item-icon, .csms-studio-dropdown .dropdown-toggle-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dropdown-item-icon img, .csms-studio-dropdown .dropdown-toggle-icon img {
  width: var(--csms-studio-dropdown-item-icon-image-size);
  height: var(--csms-studio-dropdown-item-icon-image-size);
  border-radius: 50%;
}
.dropdown-item-icon .svg-icon, .csms-studio-dropdown .dropdown-toggle-icon .svg-icon {
  flex: 0 0 auto;
}
.dropdown-item-icon .svg-icon svg, .csms-studio-dropdown .dropdown-toggle-icon .svg-icon svg {
  width: var(--csms-studio-dropdown-item-icon-svg-size);
  height: var(--csms-studio-dropdown-item-icon-svg-size);
}
.dropdown-item-icon .svg-icon svg .svg-color[stroke], .csms-studio-dropdown .dropdown-toggle-icon .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-dropdown-item-icon-svg-color);
}
.dropdown-item-icon .svg-icon svg .svg-color[fill], .csms-studio-dropdown .dropdown-toggle-icon .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-dropdown-item-icon-svg-color);
}
.dropdown-item-icon .svg-select, .csms-studio-dropdown .dropdown-toggle-icon .svg-select {
  margin-left: auto;
  flex: 0 0 auto;
  display: none;
}
.dropdown-item-icon .svg-select svg, .csms-studio-dropdown .dropdown-toggle-icon .svg-select svg {
  width: var(--csms-studio-dropdown-item-icon-svg-select-size);
  height: var(--csms-studio-dropdown-item-icon-svg-select-size);
}
.dropdown-item-icon .svg-select svg .svg-color[stroke], .csms-studio-dropdown .dropdown-toggle-icon .svg-select svg .svg-color[stroke] {
  stroke: var(--csms-studio-dropdown-item-icon-svg-select-color);
}
.dropdown-item-icon .svg-select svg .svg-color[fill], .csms-studio-dropdown .dropdown-toggle-icon .svg-select svg .svg-color[fill] {
  fill: var(--csms-studio-dropdown-item-icon-svg-select-color);
}
.dropdown-item-icon .svg-caret, .csms-studio-dropdown .dropdown-toggle-icon .svg-caret {
  margin-left: auto;
  flex: 0 0 auto;
}
.dropdown-item-icon .svg-caret svg, .csms-studio-dropdown .dropdown-toggle-icon .svg-caret svg {
  width: var(--csms-studio-dropdown-item-icon-svg-select-size);
  height: var(--csms-studio-dropdown-item-icon-svg-select-size);
}
.dropdown-item-icon .svg-caret svg .svg-color[stroke], .csms-studio-dropdown .dropdown-toggle-icon .svg-caret svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.dropdown-item-icon .svg-caret svg .svg-color[fill], .csms-studio-dropdown .dropdown-toggle-icon .svg-caret svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.csms-studio-dropdown {
  --csms-studio-dropdown-item-icon-image-size: 24px;
  --csms-studio-dropdown-item-icon-svg-size: 20px;
  --csms-studio-dropdown-item-icon-svg-select-size: 18px;
  --csms-studio-dropdown-item-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-dropdown-item-icon-svg-select-color: var(--csms-studio-fg-semantic-info);
  --csms-studio-dropdown-item-icon-svg-menu-color: var(--csms-studio-fg-hierarchy-secondary);
}
.csms-studio-dropdown .dropdown-toggle {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --bs-body-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --bs-form-select-bg-img: url("data:image/svg+xml,<svg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M5.36321 8.36321C5.71469 8.01174 6.28453 8.01174 6.63601 8.36321L11.9996 13.7268L17.3632 8.36321C17.7147 8.01174 18.2845 8.01174 18.636 8.36321C18.9875 8.71469 18.9875 9.28453 18.636 9.63601L12.636 15.636C12.2845 15.9875 11.7147 15.9875 11.3632 15.636L5.36321 9.63601C5.01174 9.28453 5.01174 8.71469 5.36321 8.36321Z%27 fill=%27#2c2f32%27/%3E%3C/svg%3E");
  --bs-form-select-bg-img-disabled: url("data:image/svg+xml,<svg width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M5.36321 8.36321C5.71469 8.01174 6.28453 8.01174 6.63601 8.36321L11.9996 13.7268L17.3632 8.36321C17.7147 8.01174 18.2845 8.01174 18.636 8.36321C18.9875 8.71469 18.9875 9.28453 18.636 9.63601L12.636 15.636C12.2845 15.9875 11.7147 15.9875 11.3632 15.636L5.36321 9.63601C5.01174 9.28453 5.01174 8.71469 5.36321 8.36321Z%27 fill=%27rgba%2844, 47, 50, 0.4%29%27/></svg>");
  --csms-studio-form-select-bg-size: 18px;
  --csms-studio-form-control-height: 40px;
  --csms-studio-form-control-padding-y: 10px;
  --csms-studio-form-control-padding-x: 14px;
  --csms-studio-form-control-padding-x-right: calc(var(--csms-studio-form-select-bg-size) + 14px);
  --csms-studio-form-control-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-form-control-placeholder-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-hover-background-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-control-disabled-background-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-form-control-disabled-placeholder-color: var(--csms-studio-tx-hierarchy-senary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-info-30p);
}
.csms-studio-dropdown .dropdown-toggle:not([multiple]) {
  height: var(--csms-studio-form-control-height);
}
.csms-studio-dropdown .dropdown-toggle {
  padding: var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x-right) var(--csms-studio-form-control-padding-y) var(--csms-studio-form-control-padding-x);
  background-color: var(--csms-studio-form-control-background-color);
  background-size: var(--csms-studio-form-select-bg-size) var(--csms-studio-form-select-bg-size);
  background-position: right var(--csms-studio-form-control-padding-x) center;
}
.csms-studio-dropdown .dropdown-toggle.hover:not(.disabled, :disabled, .ss-disabled, .focus, :focus), .csms-studio-dropdown .dropdown-toggle:hover:not(.disabled, :disabled, .ss-disabled, .focus, :focus) {
  --bs-border-color: var(--csms-studio-form-control-hover-border-color);
  background-color: var(--csms-studio-form-control-hover-background-color);
}
.csms-studio-dropdown .dropdown-toggle.focus, .csms-studio-dropdown .dropdown-toggle:focus {
  --bs-border-color: var(--csms-studio-form-control-focus-border-color);
  border-color: var(--bs-border-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.csms-studio-dropdown .dropdown-toggle.disabled, .csms-studio-dropdown .dropdown-toggle:disabled {
  --bs-border-color: var(--csms-studio-form-control-disabled-border-color);
  background-color: var(--csms-studio-form-control-disabled-background-color);
  background-image: var(--bs-form-select-bg-img-disabled);
}
.csms-studio-dropdown .dropdown-toggle.is-invalid, .csms-studio-dropdown .dropdown-toggle.vd-error {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-nega-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-nega-30p);
  --csms-studio-form-control-disabled-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.csms-studio-dropdown .dropdown-toggle.is-invalid.disabled, .csms-studio-dropdown .dropdown-toggle.is-invalid:disabled, .csms-studio-dropdown .dropdown-toggle.vd-error.disabled, .csms-studio-dropdown .dropdown-toggle.vd-error:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-nega-30p);
}
.csms-studio-dropdown .dropdown-toggle.is-valid, .csms-studio-dropdown .dropdown-toggle.vd-success {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-hover-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-control-focus-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-posi-30p);
}
.csms-studio-dropdown .dropdown-toggle.is-valid.disabled, .csms-studio-dropdown .dropdown-toggle.is-valid:disabled, .csms-studio-dropdown .dropdown-toggle.vd-success.disabled, .csms-studio-dropdown .dropdown-toggle.vd-success:disabled {
  --bs-border-color: var(--csms-studio-bo-semantic-posi-30p);
}
.csms-studio-dropdown .dropdown-toggle {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-form-control-padding-x-right: var(--csms-studio-form-control-padding-x);
}
.csms-studio-dropdown .dropdown-toggle-icon::after {
  content: "";
  display: none;
}
.csms-studio-dropdown hr {
  border-color: var(--csms-studio-bo-hierarchy-primary);
  margin: 1px 0;
  opacity: 1;
}

.dropdown-item {
  display: flex;
  align-items: center;
  --bs-dropdown-item-border-radius: 6px;
  --bs-dropdown-item-padding-y: 10px;
  --bs-dropdown-item-padding-x: 14px;
  --bs-dropdown-item-padding-x-right: 8px;
  --bs-dropdown-link-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-dropdown-link-hover-color: var(--csms-studio-tx-hierarchy-primary-subtle);
  --bs-dropdown-link-hover-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --bs-dropdown-link-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-dropdown-link-active-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --bs-dropdown-link-disabled-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-dropdown-link-negative-color: var(--csms-studio-tx-semantic-nega-primary);
  --csms-studio-dropdown-link-focus-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-dropdown-link-disabled-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-dropdown-link-bg: var(--csms-studio-bg-neutral-white);
  --csms-studio-dropdown-link-height: 40px;
  background-color: var(--csms-studio-dropdown-link-bg);
  min-height: var(--csms-studio-dropdown-link-height);
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x-right) var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.dropdown-item.hover, .dropdown-item:hover, .dropdown-item:focus-within {
  color: var(--bs-dropdown-link-hover-color);
  background-color: var(--bs-dropdown-link-hover-bg);
}
.dropdown-item.focus, .dropdown-item:focus {
  background-color: var(--csms-studio-dropdown-link-bg);
  color: var(--bs-dropdown-link-color);
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-item.disabled, .dropdown-item:disabled {
  opacity: 0.4;
  font-style: inherit;
}
.dropdown-item.negative {
  color: var(--csms-studio-dropdown-link-negative-color);
}

.dropdown-item-icon .svg-menu {
  margin-left: auto;
  flex: 0 0 auto;
}
.dropdown-item-icon .svg-menu svg {
  width: var(--csms-studio-dropdown-item-icon-svg-select-size);
  height: var(--csms-studio-dropdown-item-icon-svg-select-size);
}
.dropdown-item-icon .svg-menu svg .svg-color[stroke] {
  stroke: var(--csms-studio-dropdown-item-icon-svg-menu-color);
}
.dropdown-item-icon .svg-menu svg .svg-color[fill] {
  fill: var(--csms-studio-dropdown-item-icon-svg-menu-color);
}
.dropdown-item-icon.focus, .dropdown-item-icon:focus {
  background-color: var(--csms-studio-dropdown-link-focus-bg);
}
.dropdown-item-icon.disabled, .dropdown-item-icon:disabled {
  background-color: var(--csms-studio-dropdown-link-disabled-bg);
}
.dropdown-item-icon.selected .svg-select {
  display: block;
}
.dropdown-item-icon .dropdown-item::after {
  display: none;
}

.dropdown-menu {
  --bs-dropdown-bg: var(--csms-studio-bg-neutral-white);
  --bs-dropdown-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --bs-dropdown-padding-x: 8px;
  --bs-dropdown-padding-y: 8px;
  --bs-dropdown-border-radius: 8px;
  --csms-studio-dropdown-item-title-padding-y: 4px;
  --csms-studio-dropdown-item-title-padding-x: 10px;
  --csms-studio-dropdown-item-title-color: var(--csms-studio-tx-hierarchy-quinary);
  --csms-studio-dropdown-item-width: 100%;
  width: var(--csms-studio-dropdown-item-width);
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}
.dropdown-menu .dropdown-item-title {
  padding: var(--csms-studio-dropdown-item-title-padding-y) var(--csms-studio-dropdown-item-title-padding-x);
  color: var(--csms-studio-dropdown-item-title-color);
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}
.dropdown-menu > li + li,
.dropdown-menu > .dropdown-item + .dropdown-item {
  margin-top: 1px;
}
.dropdown-menu.dropdown-menu-160 {
  width: 160px;
}
.dropdown-menu.dropdown-menu-padding-lg {
  --bs-dropdown-padding-y: 12px;
}

.csms-studio-dropdown-xsm {
  --csms-studio-dropdown-item-icon-image-size: 24px;
  --csms-studio-dropdown-item-icon-svg-size: 18px;
  --csms-studio-dropdown-item-icon-svg-select-size: 16px;
}
.csms-studio-dropdown-xsm .dropdown-toggle {
  --csms-studio-form-control-height: 36px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  padding-top: 6px;
  padding-bottom: 6px;
}
.csms-studio-dropdown-xsm .dropdown-item {
  --bs-dropdown-item-padding-x: 10px;
  --bs-dropdown-item-padding-x-right: 8px;
  --bs-dropdown-item-padding-y: 6px;
  --csms-studio-dropdown-link-height: 36px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-dropdown-sm {
  --csms-studio-dropdown-item-icon-image-size: 24px;
  --csms-studio-dropdown-item-icon-svg-size: 18px;
  --csms-studio-dropdown-item-icon-svg-select-size: 16px;
}
.csms-studio-dropdown-sm .dropdown-toggle {
  --csms-studio-form-control-height: 40px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-dropdown-sm .dropdown-item {
  --bs-dropdown-item-padding-x: 10px;
  --bs-dropdown-item-padding-x-right: 8px;
  --bs-dropdown-item-padding-y: 6px;
  --csms-studio-dropdown-link-height: 40px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-dropdown-lg {
  --csms-studio-dropdown-item-icon-image-size: 28px;
  --csms-studio-dropdown-item-icon-svg-size: 22px;
  --csms-studio-dropdown-item-icon-svg-select-size: 20px;
}
.csms-studio-dropdown-lg .dropdown-toggle {
  --csms-studio-form-control-height: 48px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-dropdown-lg .dropdown-item {
  --csms-studio-dropdown-link-height: 48px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-dropdown-xlg {
  --csms-studio-dropdown-item-icon-image-size: 28px;
  --csms-studio-dropdown-item-icon-svg-size: 24px;
  --csms-studio-dropdown-item-icon-svg-select-size: 22px;
}
.csms-studio-dropdown-xlg .dropdown-toggle {
  --csms-studio-form-control-height: 52px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-dropdown-xlg .dropdown-item {
  --csms-studio-dropdown-link-height: 52px;
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

/*
.dropdown-submenu {
    .dropdown-menu > li:hover > .dropdown-submenu {
        display: block;
    }
}
*/
/* 2차 드롭다운 위치 조정 */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  bottom: 0;
  left: calc(100% + 5px);
  margin-top: -1px;
  display: none;
}
@media (max-width: 575.98px) {
  .dropdown-submenu > .dropdown-menu {
    left: 50px;
  }
}

/* hover 시 2차 메뉴 표시 */
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.csms-studio-chips {
  --csms-studio-chips-gap: 4px;
  --csms-studio-chips-svg-size: 16px;
  --csms-studio-chips-svg-color: transparent;
  --csms-studio-chips-font-weight: "medium";
  --csms-studio-chips-color: var(--csms-studio-tx-hierarchy-secondary);
  display: flex;
  align-items: center;
  gap: var(--csms-studio-chips-gap);
  flex-shrink: 0;
  color: var(--csms-studio-chips-color);
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-chips svg {
  width: var(--csms-studio-chips-svg-size);
  height: var(--csms-studio-chips-svg-size);
}
.csms-studio-chips svg .svg-color[stroke] {
  stroke: var(--csms-studio-chips-svg-color);
}
.csms-studio-chips svg .svg-color[fill] {
  fill: var(--csms-studio-chips-svg-color);
}
.csms-studio-chips.csms-studio-chips-dot {
  --csms-studio-chips-gap: 2px;
}

.csms-studio-chips-bg {
  display: flex;
  height: 24px;
  padding: 0 4px 0 2px;
  justify-content: center;
  align-items: center;
  gap: 2px;
  border-radius: var(--csms-studio-border-radius-8);
  background: var(--csms-studio-bg-neutral-w50p);
}

.csms-studio-chips-red {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-nega);
}

.csms-studio-chips-orange {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-prog);
}

.csms-studio-chips-yellow {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-warn-primary);
}

.csms-studio-chips-blue {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-info);
}

.csms-studio-chips-green {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-posi);
}

.csms-studio-chips-purple {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-etc);
}

.csms-studio-chips-gray-dark {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-tertiary);
}

.csms-studio-chips-gray-deep {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-quaternary);
}

.csms-studio-chips-gray {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-quinary);
}

.csms-studio-chips-gray-light {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-senary);
}

.csms-studio-chips-sm {
  --csms-studio-chips-svg-size: 14px;
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-chips-date.csms-studio-chips-sm {
  --csms-studio-chips-svg-size: 12px;
}

.csms-studio-chips-md {
  --csms-studio-chips-svg-size: 16px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-chips-date.csms-studio-chips-md {
  --csms-studio-chips-svg-size: 14px;
}

.csms-studio-chips-lg {
  --csms-studio-chips-svg-size: 20px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-chips-date.csms-studio-chips-lg {
  --csms-studio-chips-svg-size: 16px;
}

.csms-studio-chips-activity {
  --csms-studio-chips-activity-gap: 4px;
  --csms-studio-chips-activity-background: transparent;
  --csms-studio-chips-activity-padding: 4px 6px;
  --csms-studio-chips-activity-height: 24px;
  --csms-studio-chips-activity-border-radius: 4px;
  display: flex;
  align-items: center;
  gap: var(--csms-studio-chips-activity-gap);
  flex-shrink: 0;
  color: var(--csms-studio-tx-hierarchy-secondary);
  padding: var(--csms-studio-chips-activity-padding);
  height: var(--csms-studio-chips-activity-height);
  border-radius: var(--csms-studio-chips-activity-border-radius);
}
.csms-studio-chips-activity img {
  width: var(--csms-studio-chips-svg-size);
  height: var(--csms-studio-chips-svg-size);
}
.csms-studio-chips-activity.csms-studio-chips-activity-bg {
  background-color: var(--csms-studio-chips-activity-background);
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-chips-activity-forum {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-warn-quinary);
}

.csms-studio-chips-activity-quiz {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-nega-senary);
}

.csms-studio-chips-activity-assign {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-posi-senary);
}

.csms-studio-chips-activity-url {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-info-senary);
}

.csms-studio-chips-activity-ubfile {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-posi-senary);
}

.csms-studio-chips-activity-resource {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-posi-senary);
}

.csms-studio-chips-activity-vod {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-nega-senary);
}

.csms-studio-chips-activity-econtents {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-hierarchy-secondary);
}

.csms-studio-chips-activity-xncommons {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-info-senary);
}

.csms-studio-chips-activity-ubboard {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-prog-senary);
}

.csms-studio-chips-activity-feedback {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-etc-senary);
}

.csms-studio-chips-activity-zoom {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-info-senary);
}

.csms-studio-chips-activity-webexactivity {
  --csms-studio-chips-activity-background: var(--csms-studio-bg-semantic-info-senary);
}

.csms-studio-chips-tag {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  --csms-studio-chips-tag-gap: 4px;
  --csms-studio-chips-tag-background: transparent;
  --csms-studio-chips-tag-padding: 4px 8px;
  --csms-studio-chips-tag-border-radius: var(--csms-studio-border-radius-4);
  --csms-studio-chips-tag-height: 24px;
  --csms-studio-chips-tag-svg-color: var(--csms-studio-fg-semantic-posi);
  display: inline-flex;
  align-items: center;
  color: var(--csms-studio-tx-hierarchy-secondary);
  gap: var(--csms-studio-chips-tag-gap);
  background-color: var(--csms-studio-chips-tag-background);
  padding: var(--csms-studio-chips-tag-padding);
  border-radius: var(--csms-studio-chips-tag-border-radius);
  height: var(--csms-studio-chips-tag-height);
}
.csms-studio-chips-tag svg .svg-color[stroke] {
  stroke: var(--csms-studio-chips-tag-svg-color);
}
.csms-studio-chips-tag svg .svg-color[fill] {
  fill: var(--csms-studio-chips-tag-svg-color);
}
.csms-studio-chips-tag.csms-studio-chips-tag-red {
  --csms-studio-chips-tag-svg-color: var(--csms-studio-fg-semantic-nega);
}
.csms-studio-chips-tag.csms-studio-chips-tag-hyflex {
  color: var(--csms-studio-tx-semantic-info-tertiary);
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-info-quinary);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 5%; /* 0.6px */
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.csms-studio-chips-tag.csms-studio-chips-hyflex {
  --csms-studio-chips-tag-padding: 0;
  --csms-studio-chips-tag-background: none;
}

.csms-studio-chips-tag-blue {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-info-quinary);
}

.csms-studio-chips-tag-red {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-nega-quinary);
}

.csms-studio-chips-tag-green {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-posi-quinary);
}

.csms-studio-chips-tag-yellow {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-warn-quinary);
}

.csms-studio-chips-tag-purple {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-etc-quinary);
}

.csms-studio-chips-tag-gray {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-hierarchy-tertiary);
}

.csms-studio-chips-tag-time-1 {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-info-quinary);
}

.csms-studio-chips-tag-time-2 {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-posi-quinary);
}

.csms-studio-chips-tag-time-3 {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-warn-quinary);
}

.csms-studio-chips-tag-time-4 {
  --csms-studio-chips-tag-background: var(--csms-studio-bg-semantic-etc-quinary);
}

.csms-studio-chips-date {
  --csms-studio-chips-svg-size: 14px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 5%; /* 0.6px */
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.csms-studio-chips-date-dday {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-chips-color: var(--csms-studio-tx-semantic-nega-primary);
  --csms-studio-label-font-weight: 700;
}

.csms-studio-chips-date-before {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-chips-color: var(--csms-studio-tx-hierarchy-quaternary);
}

.csms-studio-chips-date-ing {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-info);
  --csms-studio-chips-color: var(--csms-studio-tx-semantic-info-primary);
  text-decoration: none;
}

.csms-studio-chips-date-lateness {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-semantic-prog);
  --csms-studio-chips-color: var(--csms-studio-tx-semantic-prog-primary);
}

.csms-studio-chips-date-end {
  --csms-studio-chips-svg-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-chips-color: var(--csms-studio-tx-hierarchy-secondary);
  text-decoration: none;
}

.pagination {
  --bs-pagination-padding-x: 0;
  --bs-pagination-padding-y: 0;
  --bs-pagination-color: var(--csms-studio-tx-hierarchy-quinary);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-width: 0;
  --bs-pagination-border-color: transparent;
  --bs-pagination-border-radius: 8px;
  --bs-pagination-hover-color: var(--csms-studio-tx-hierarchy-quinary);
  --bs-pagination-hover-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --bs-pagination-focus-color: var(--csms-studio-tx-hierarchy-quinary);
  --bs-pagination-focus-bg: var(--csms-studio-bg-hierarchy-primary-subtle);
  --bs-pagination-active-color: var(--csms-studio-tx-hierarchy-secondary);
  --bs-pagination-active-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-pagination-disabled-color: var(--csms-studio-tx-hierarchy-senary);
  --bs-pagination-disabled-bg: transparent;
  --csms-studio-pagination-page-link-width: 32px;
  --csms-studio-pagination-page-link-height: 32px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0;
}
.pagination .page-link {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  width: var(--csms-studio-pagination-page-link-width);
  height: var(--csms-studio-pagination-page-link-height);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bs-pagination-border-radius);
}
.pagination .page-link:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.pagination .page-item:not(:first-child) .page-link {
  margin-left: 0;
}
.pagination .page-item-prev {
  margin-right: 4px;
}
.pagination .page-item-next {
  margin-left: 4px;
}

.short-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}
.short-pagination .page-info {
  display: flex;
  align-items: center;
  gap: 2px;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quinary);
}
.short-pagination .page-info .current {
  color: var(--csms-studio-tx-hierarchy-tertiary);
}
.short-pagination .page-link:hover {
  border-color: var(--csms-studio-btn-icon-border-color);
}

.csms-studio-box-shadow-xsm {
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.csms-studio-box-shadow-sm {
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.csms-studio-box-shadow-md {
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}

.csms-studio-box-shadow-lg {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.csms-studio-box-shadow-xl {
  box-shadow: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-2xl {
  box-shadow: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-3xl {
  box-shadow: 0 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
}

/* 아래 값은 /theme/coursemos/lib.php => theme_coursemos_get_pre_scss() 함수에서 처리 됩니다.
ex:
$csms-studio-color-coursemos-cos05: #000C19;
$csms-studio-color-coursemos-cos10: #001732;
...
*/
.csms-studio-tx-hierarchy-primary {
  color: #161819;
}

.csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}

.csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}

.csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}

.csms-studio-tx-hierarchy-quinary {
  color: #899199;
}

.csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}

.csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}

.csms-studio-tx-neutral-white {
  color: #ffffff;
}

.csms-studio-tx-neutral-black {
  color: #000000;
}

.csms-studio-tx-neutral-black-solid {
  color: #000000;
}

.csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}

.csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}

.csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}

.csms-studio-tx-coursemos-primary {
  color: #0075F8;
}

.csms-studio-tx-coursemos-secondary {
  color: #005DC8;
}

.csms-studio-tx-coursemos-tertiary {
  color: #0052AF;
}

.csms-studio-tx-coursemos-quaternary {
  color: #97C8FF;
}

.csms-studio-tx-coursemos-quinary {
  color: #CBE3FF;
}

.csms-studio-tx-coursemos-quinary-subtle {
  color: #D9EAFF;
}

.csms-studio-tx-coursemos-senary {
  color: #E5F1FF;
}

.csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 117, 248, 0.3);
}

.csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}

.csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}

.csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}

.csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}

.csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}

.csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}

.csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}

.csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}

.csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}

.csms-studio-tx-semantic-info-quaternary {
  color: #c0defd;
}

.csms-studio-tx-semantic-info-quinary {
  color: #d5e9fe;
}

.csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}

.csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}

.csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}

.csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}

.csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}

.csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}

.csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}

.csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}

.csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}

.csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}

.csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}

.csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}

.csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}

.csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}

.csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}

.csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}

.csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}

.csms-studio-bo-neutral-white {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black {
  border-color: #000000;
}

.csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}

.csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}

.csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}

.csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}

.csms-studio-bo-coursemos-secondary {
  border-color: #005DC8;
}

.csms-studio-bo-coursemos-tertiary {
  border-color: #0052AF;
}

.csms-studio-bo-coursemos-quaternary {
  border-color: #97C8FF;
}

.csms-studio-bo-coursemos-quinary {
  border-color: #CBE3FF;
}

.csms-studio-bo-coursemos-senary {
  border-color: #E5F1FF;
}

.csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}

.csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}

.csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}

.csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}

.csms-studio-bo-semantic-info-secondary {
  border-color: #0673e7;
}

.csms-studio-bo-semantic-info-tertiary {
  border-color: #0564ca;
}

.csms-studio-bo-semantic-info-quaternary {
  border-color: #c0defd;
}

.csms-studio-bo-semantic-info-quinary {
  border-color: #d5e9fe;
}

.csms-studio-bo-semantic-info-senary {
  border-color: #e0eefe;
}

.csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}

.csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}

.csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}

.csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}

.csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}

.csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}

.csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}

.csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}

.csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}

.csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}

.csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}

.csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}

.csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}

.csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}

.csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}

.csms-studio-bg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black {
  background-color: #000000;
}

.csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}

.csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}

.csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}

.csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}

.csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}

.csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}

.csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}

.csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}

.csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}

.csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}

.csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-bg-coursemos-secondary {
  background-color: #0069E1;
}

.csms-studio-bg-coursemos-tertiary {
  background-color: #005DC8;
}

.csms-studio-bg-coursemos-quaternary {
  background-color: #97C8FF;
}

.csms-studio-bg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-bg-coursemos-quinary-subtle {
  background-color: #D9EAFF;
}

.csms-studio-bg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}

.csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}

.csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}

.csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}

.csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}

.csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}

.csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}

.csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}

.csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}

.csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}

.csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}

.csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}

.csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}

.csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}

.csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}

.csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}

.csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}

.csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}

.csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}

.csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}

.csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}

.csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}

.csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}

.csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}

.csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}

.csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}

.csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #ffecb4;
}

.csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}

.csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}

.csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}

.csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}

.csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}

.csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}

.csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}

.csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}

.csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}

.csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}

.csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}

.csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}

.csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}

.csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}

.csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}

.csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}

.csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}

.csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}

.csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}

.csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}

.csms-studio-fg-neutral-white {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black {
  background-color: #000000;
}

.csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}

.csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}

.csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}

.csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}

.csms-studio-fg-coursemos-secondary {
  background-color: #005DC8;
}

.csms-studio-fg-coursemos-tertiary {
  background-color: #0052AF;
}

.csms-studio-fg-coursemos-quaternary {
  background-color: #2F90FF;
}

.csms-studio-fg-coursemos-quinary {
  background-color: #CBE3FF;
}

.csms-studio-fg-coursemos-senary {
  background-color: #E5F1FF;
}

.csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}

.csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}

.csms-studio-fg-semantic-nega {
  background-color: #f04438;
}

.csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}

.csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}

.csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}

.csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}

.csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}

.csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}

.csms-studio-fg-semantic-info {
  background-color: #1181f9;
}

.csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}

.csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}

.csms-studio-ut-school-primary {
  background-color: #0075F8;
}

.csms-studio-ut-school-secondary {
  background-color: #2F90FF;
}

.csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}

.csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}

.csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}

.csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}

.csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}

.csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}

.csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}

.csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}

.csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}

.csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}

.csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}

.csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}

.csms-studio-gap-2 {
  gap: 2px;
}

.csms-studio-column-gap-2 {
  column-gap: 2px;
}

.csms-studio-row-gap-2 {
  row-gap: 2px;
}

.csms-studio-gap-4 {
  gap: 4px;
}

.csms-studio-column-gap-4 {
  column-gap: 4px;
}

.csms-studio-row-gap-4 {
  row-gap: 4px;
}

.csms-studio-gap-6 {
  gap: 6px;
}

.csms-studio-column-gap-6 {
  column-gap: 6px;
}

.csms-studio-row-gap-6 {
  row-gap: 6px;
}

.csms-studio-gap-8 {
  gap: 8px;
}

.csms-studio-column-gap-8 {
  column-gap: 8px;
}

.csms-studio-row-gap-8 {
  row-gap: 8px;
}

.csms-studio-gap-10 {
  gap: 10px;
}

.csms-studio-column-gap-10 {
  column-gap: 10px;
}

.csms-studio-row-gap-10 {
  row-gap: 10px;
}

.csms-studio-gap-12 {
  gap: 12px;
}

.csms-studio-column-gap-12 {
  column-gap: 12px;
}

.csms-studio-row-gap-12 {
  row-gap: 12px;
}

.csms-studio-gap-16 {
  gap: 16px;
}

.csms-studio-column-gap-16 {
  column-gap: 16px;
}

.csms-studio-row-gap-16 {
  row-gap: 16px;
}

.csms-studio-gap-18 {
  gap: 18px;
}

.csms-studio-column-gap-18 {
  column-gap: 18px;
}

.csms-studio-row-gap-18 {
  row-gap: 18px;
}

.csms-studio-gap-20 {
  gap: 20px;
}

.csms-studio-column-gap-20 {
  column-gap: 20px;
}

.csms-studio-row-gap-20 {
  row-gap: 20px;
}

.csms-studio-gap-24 {
  gap: 24px;
}

.csms-studio-column-gap-24 {
  column-gap: 24px;
}

.csms-studio-row-gap-24 {
  row-gap: 24px;
}

.csms-studio-gap-28 {
  gap: 28px;
}

.csms-studio-column-gap-28 {
  column-gap: 28px;
}

.csms-studio-row-gap-28 {
  row-gap: 28px;
}

.csms-studio-gap-32 {
  gap: 32px;
}

.csms-studio-column-gap-32 {
  column-gap: 32px;
}

.csms-studio-row-gap-32 {
  row-gap: 32px;
}

.csms-studio-gap-40 {
  gap: 40px;
}

.csms-studio-column-gap-40 {
  column-gap: 40px;
}

.csms-studio-row-gap-40 {
  row-gap: 40px;
}

.csms-studio-gap-80 {
  gap: 80px;
}

.csms-studio-column-gap-80 {
  column-gap: 80px;
}

.csms-studio-row-gap-80 {
  row-gap: 80px;
}

body {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  /* Window, Mac 등 운영체제마다 일관된 품질을 유지하려면 font-weight이 더 바람직하다는데,
   * 테스트가 필요할듯함.
   * 윈도우에서는 확실히 좀 더 부드럽게는 보임.
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  */
}

.csms-studio-heading-2xlg {
  --csms-studio-heading-font-weight: 700;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-xlg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 40px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 56px;
  margin-bottom: 0;
}

.csms-studio-heading-lg {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 32px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 45px;
  margin-bottom: 0;
}

.csms-studio-heading-md {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 28px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 39px;
  margin-bottom: 0;
}

.csms-studio-heading-sm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 24px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 34px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm-semibold {
  --csms-studio-heading-font-weight: 600;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-heading-xsm {
  --csms-studio-heading-font-weight: 700;
  --csms-studio-heading-font-size: 20px;
  font-size: var(--csms-studio-heading-font-size);
  font-weight: var(--csms-studio-heading-font-weight);
  line-height: 28px;
  margin-bottom: 0;
}

.csms-studio-label-xlg-bold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-semibold {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-medium {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xlg-normal {
  --csms-studio-label-font-size: 18px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 27px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-bold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-semibold {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-medium {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-lg-normal {
  --csms-studio-label-font-size: 16px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 24px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-bold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-semibold {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-medium {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-md-normal {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-bold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-semibold {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-medium {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-sm-normal {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-bold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-semibold {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-medium {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-xsm-normal {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-bold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 700;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-semibold {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 600;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-medium {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-label-2xsm-normal {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}

.csms-studio-caption-lg {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 12px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 14px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-md {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 11px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 13px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.csms-studio-caption-sm {
  --csms-studio-caption-font-weight: 600;
  --csms-studio-caption-font-size: 10px;
  font-size: var(--csms-studio-caption-font-size);
  font-weight: var(--csms-studio-caption-font-weight);
  line-height: 12px;
  letter-spacing: calc(var(--csms-studio-caption-font-size) * -0.005);
}

.btn-csms-studio-icon {
  --csms-studio-btn-icon-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-svg-color: --csms-studio-fg-hierarchy-secondary;
  --csms-studio-btn-icon-svg-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--csms-studio-btn-icon-border-color);
  border-radius: var(--csms-studio-btn-icon-border-radius);
  background-color: var(--csms-studio-btn-icon-background-color);
  color: var(--csms-studio-btn-icon-svg-color);
  width: var(--csms-studio-btn-icon-size);
  height: var(--csms-studio-btn-icon-size);
  padding: 0;
}
.btn-csms-studio-icon.hover, .btn-csms-studio-icon:hover {
  background-color: var(--csms-studio-btn-icon-hover-background-color);
}
.btn-csms-studio-icon.focus, .btn-csms-studio-icon:focus {
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.btn-csms-studio-icon.active, .btn-csms-studio-icon:active {
  background-color: var(--csms-studio-btn-icon-active-background-color);
}
.btn-csms-studio-icon:disabled, .btn-csms-studio-icon.disabled, .btn-csms-studio-icon[disabled=disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-csms-studio-icon:disabled:hover, .btn-csms-studio-icon:disabled.hover, .btn-csms-studio-icon.disabled:hover, .btn-csms-studio-icon.disabled.hover, .btn-csms-studio-icon[disabled=disabled]:hover, .btn-csms-studio-icon[disabled=disabled].hover {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.btn-csms-studio-icon:disabled:active, .btn-csms-studio-icon:disabled.active, .btn-csms-studio-icon.disabled:active, .btn-csms-studio-icon.disabled.active, .btn-csms-studio-icon[disabled=disabled]:active, .btn-csms-studio-icon[disabled=disabled].active {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.btn-csms-studio-icon svg {
  width: var(--csms-studio-btn-icon-svg-size);
  height: var(--csms-studio-btn-icon-svg-size);
}
.btn-csms-studio-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-svg-color);
}
.btn-csms-studio-icon svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-svg-color);
}

.btn-csms-studio-icon-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-primary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-neutral-white-solid);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-primary.focus, .btn-csms-studio-icon-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-icon-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-outline-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-coursemos-primary);
}

.btn-csms-studio-icon-outline-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}

.btn-csms-studio-icon-outline-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-coursemos-primary);
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.btn-csms-studio-icon-outline-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.btn-csms-studio-icon-nospace-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-nospace-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-coursemos-primary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-neutral-b10p);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-quinary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-neutral-white-solid);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-senary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-senary-subtle);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-primary.disabled, .btn-csms-studio-icon-gray-primary:disabled {
  background-color: var(--csms-studio-bg-hierarchy-senary);
}
.btn-csms-studio-icon-gray-primary.focus, .btn-csms-studio-icon-gray-primary:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}

.btn-csms-studio-icon-gray-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-coursemos-senary);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-coursemos-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bo-coursemos-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-quaternary.focus, .btn-csms-studio-icon-gray-quaternary:focus {
  background-color: var(--csms-studio-bg-coursemos-quinary);
}

.btn-csms-studio-icon-gray-outline-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}

.btn-csms-studio-icon-gray-outline-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover, .btn-csms-studio-icon-gray-outline-secondary:hover {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-secondary:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-secondary:hover svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-secondary.active, .btn-csms-studio-icon-gray-outline-secondary:active {
  color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-secondary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-secondary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-icon-gray-outline-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.btn-csms-studio-icon-gray-outline-quaternary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover, .btn-csms-studio-icon-gray-outline-quaternary:hover {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-quaternary:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-quaternary:hover svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active, .btn-csms-studio-icon-gray-outline-quaternary:active {
  color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-outline-quaternary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-icon-gray-outline-quaternary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-outline-quaternary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-icon-gray-nospace-primary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-neutral-b6p-hovered);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-neutral-b15p);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-gray-nospace-secondary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover, .btn-csms-studio-icon-gray-nospace-secondary:hover, .btn-csms-studio-icon-gray-nospace-secondary.active, .btn-csms-studio-icon-gray-nospace-secondary:active {
  color: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary:hover svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary.active svg .svg-color[stroke], .btn-csms-studio-icon-gray-nospace-secondary:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-icon-gray-nospace-secondary.hover svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary:hover svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary.active svg .svg-color[fill], .btn-csms-studio-icon-gray-nospace-secondary:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}

.btn-csms-studio-icon-gray-nospace-tertiary {
  --csms-studio-btn-icon-background-color: var(--csms-studio-bg-neutral-w1p);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-info-quaternary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.btn-csms-studio-icon-2xsm {
  --csms-studio-btn-icon-size: 20px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 12px;
}

.btn-csms-studio-icon-xsm {
  --csms-studio-btn-icon-size: 24px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 14px;
}

.btn-csms-studio-icon-sm {
  --csms-studio-btn-icon-size: 28px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 16px;
}

.btn-csms-studio-icon-md {
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 18px;
}

.btn-csms-studio-icon-lg {
  --csms-studio-btn-icon-size: 36px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 18px;
}

.btn-csms-studio-icon-xlg {
  --csms-studio-btn-icon-size: 40px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 20px;
}

.btn-csms-studio-icon-2xlg {
  --csms-studio-btn-icon-size: 48px;
  --csms-studio-btn-icon-border-radius: 8px;
  --csms-studio-btn-icon-svg-size: 24px;
}

.btn-csms-studio-svgicon {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-bg-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-svgicon-size-md: 16px;
  --csms-studio-btn-svgicon-size-lg: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-color);
}
.btn-csms-studio-svgicon.hover, .btn-csms-studio-svgicon:hover {
  color: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.hover svg .svg-color[stroke], .btn-csms-studio-svgicon:hover svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.hover svg .svg-color[fill], .btn-csms-studio-svgicon:hover svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-hover-color);
}
.btn-csms-studio-svgicon.focus, .btn-csms-studio-svgicon:focus {
  color: var(--csms-studio-btn-svgicon-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon.active, .btn-csms-studio-svgicon:active {
  color: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon.active svg .svg-color[stroke], .btn-csms-studio-svgicon:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon.active svg .svg-color[fill], .btn-csms-studio-svgicon:active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-active-color);
}
.btn-csms-studio-svgicon:disabled, .btn-csms-studio-svgicon.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-csms-studio-svgicon svg {
  width: var(--csms-studio-btn-svgicon-size-md);
  height: var(--csms-studio-btn-svgicon-size-md);
}

.btn-csms-studio-svgicon {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-tertiary);
}

.btn-csms-studio-svgicon-help {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active svg .svg-color[stroke], .btn-csms-studio-svgicon-help:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active svg .svg-color[fill], .btn-csms-studio-svgicon-help:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.btn-csms-studio-svgicon-help.active, .btn-csms-studio-svgicon-help:active {
  background-color: var(--csms-studio-btn-svgicon-bg-color);
}

.btn-csms-studio-svgicon-eye {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-svgicon-eye.active svg .svg-color[stroke], .btn-csms-studio-svgicon-eye:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quinary);
}
.btn-csms-studio-svgicon-eye.active svg .svg-color[fill], .btn-csms-studio-svgicon-eye:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quinary);
}

.btn-csms-studio-svgicon-home {
  --csms-studio-btn-svgicon-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-hover-color: var(--csms-studio-fg-hierarchy-quaternary);
  --csms-studio-btn-svgicon-focus-color: var(--csms-studio-fg-hierarchy-quinary);
  --csms-studio-btn-svgicon-active-color: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home.active svg .svg-color[stroke], .btn-csms-studio-svgicon-home:active svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home.active svg .svg-color[fill], .btn-csms-studio-svgicon-home:active svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-quaternary);
}
.btn-csms-studio-svgicon-home svg {
  width: --csms-studio-btn-svgicon-size-lg;
  height: --csms-studio-btn-svgicon-size-lg;
}
.btn-csms-studio-svgicon-home {
  border-radius: 0 !important;
}

.btn-csms-studio-svgicon-circle {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle.hover, .btn-csms-studio-svgicon-circle:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle.focus, .btn-csms-studio-svgicon-circle:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle.active, .btn-csms-studio-svgicon-circle:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle:disabled, .btn-csms-studio-svgicon-circle.disabled {
  opacity: 0.4;
}

.btn-csms-studio-svgicon-circle-arrow {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle-arrow svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-arrow svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-arrow svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle-arrow.hover, .btn-csms-studio-svgicon-circle-arrow:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle-arrow.focus, .btn-csms-studio-svgicon-circle-arrow:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle-arrow.active, .btn-csms-studio-svgicon-circle-arrow:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle-arrow:disabled, .btn-csms-studio-svgicon-circle-arrow.disabled {
  opacity: 0.4;
}
.btn-csms-studio-svgicon-circle-arrow {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-bg-neutral-white);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-circle-size: 36px;
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.btn-csms-studio-svgicon-circle-help {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-border-color: var(--csms-studio-bo-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-transparent);
  --csms-studio-btn-svgicon-circle-svg-size: 18px;
  --csms-studio-btn-svgicon-circle-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  width: var(--csms-studio-btn-svgicon-circle-size);
  height: var(--csms-studio-btn-svgicon-circle-size);
  border: 1px solid var(--csms-studio-btn-svgicon-circle-border-color);
  background-color: var(--csms-studio-btn-svgicon-circle-bg-color);
  opacity: 1;
}
.btn-csms-studio-svgicon-circle-help svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-help svg .svg-color[fill] {
  fill: var(--csms-studio-btn-svgicon-circle-color);
}
.btn-csms-studio-svgicon-circle-help svg {
  width: var(--csms-studio-btn-svgicon-circle-svg-size);
  height: var(--csms-studio-btn-svgicon-circle-svg-size);
}
.btn-csms-studio-svgicon-circle-help.hover, .btn-csms-studio-svgicon-circle-help:hover {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-hover-color);
}
.btn-csms-studio-svgicon-circle-help.focus, .btn-csms-studio-svgicon-circle-help:focus {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-focus-color);
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-svgicon-circle-help.active, .btn-csms-studio-svgicon-circle-help:active {
  background-color: var(--csms-studio-btn-svgicon-circle-bg-active-color);
}
.btn-csms-studio-svgicon-circle-help:disabled, .btn-csms-studio-svgicon-circle-help.disabled {
  opacity: 0.4;
}
.btn-csms-studio-svgicon-circle-help {
  --csms-studio-btn-svgicon-circle-color: var(--csms-studio-fg-hierarchy-tertiary);
  --csms-studio-btn-svgicon-circle-bg-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-svgicon-circle-bg-hover-color: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-svgicon-circle-bg-focus-color: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-svgicon-circle-bg-active-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-btn-svgicon-circle-size: 40px;
}

.btn-csms-studio-like {
  --csms-studio-btn-icon-like-padding-y: 10px;
  --csms-studio-btn-icon-like-padding-x: 16px;
  --csms-studio-btn-icon-like-padding-x-round: 20px;
  --csms-studio-btn-icon-like-background: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-icon-like-hover-background: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-icon-like-active-svg-color: #fd6d6d;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-btn-icon-like-background);
  padding: var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x) var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x-round);
  border-radius: var(--csms-studio-border-radius-full) 0 0 var(--csms-studio-border-radius-full);
}
.btn-csms-studio-like svg {
  width: 20px;
  height: 20px;
}
.btn-csms-studio-like svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-like svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-like {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-csms-studio-like.hover, .btn-csms-studio-like:hover {
  background: var(--csms-studio-btn-icon-like-hover-background);
}
.btn-csms-studio-like.focus, .btn-csms-studio-like:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-like.is-active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-like.is-active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-like.is-active svg .svg-thumb-bg {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}

.btn-csms-studio-dislike {
  --csms-studio-btn-icon-like-padding-y: 10px;
  --csms-studio-btn-icon-like-padding-x: 16px;
  --csms-studio-btn-icon-like-padding-x-round: 20px;
  --csms-studio-btn-icon-like-background: var(--csms-studio-bg-hierarchy-primary);
  --csms-studio-btn-icon-like-hover-background: var(--csms-studio-bg-hierarchy-primary-subtle);
  --csms-studio-btn-icon-like-active-svg-color: #fd6d6d;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--csms-studio-bo-hierarchy-secondary);
  background: var(--csms-studio-btn-icon-like-background);
  padding: var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x-round) var(--csms-studio-btn-icon-like-padding-y) var(--csms-studio-btn-icon-like-padding-x);
  border-radius: 0 var(--csms-studio-border-radius-full) var(--csms-studio-border-radius-full) 0;
}
.btn-csms-studio-dislike svg {
  width: 20px;
  height: 20px;
}
.btn-csms-studio-dislike svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-dislike svg .svg-color[fill] {
  fill: var(--csms-studio-fg-hierarchy-secondary);
}
.btn-csms-studio-dislike {
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.btn-csms-studio-dislike.hover, .btn-csms-studio-dislike:hover {
  background: var(--csms-studio-btn-icon-like-hover-background);
}
.btn-csms-studio-dislike.focus, .btn-csms-studio-dislike:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.btn-csms-studio-dislike.is-active svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-dislike.is-active svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
}
.btn-csms-studio-dislike.is-active svg .svg-thumb-bg {
  fill: var(--csms-studio-btn-icon-like-active-svg-color);
  stroke: var(--csms-studio-btn-icon-like-active-svg-color);
}

.btn-csms-studio-like-container {
  display: flex;
  align-items: center;
}
.btn-csms-studio-like-container .btn-csms-studio-like + .btn-csms-studio-dislike {
  margin-left: -1px;
}

.csms-studio-box-shadow-xsm {
  box-shadow: 0px 1px 1px 0px rgba(16, 24, 40, 0.05);
}

.csms-studio-box-shadow-sm {
  box-shadow: 0px 1px 1px 0px rgba(10, 13, 18, 0.15);
}

.csms-studio-box-shadow-md {
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1);
}

.csms-studio-box-shadow-lg {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.csms-studio-box-shadow-xl {
  box-shadow: 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-2xl {
  box-shadow: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
}

.csms-studio-box-shadow-3xl {
  box-shadow: 0 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
}

.alert {
  --csms-studio-alert-padding-y: 12px;
  --csms-studio-alert-padding-x: 16px;
  --csms-studio-alert-border-radius: var(--csms-studio-border-radius-8);
}
.alert .btn-close {
  margin-left: auto;
  flex-shrink: 0;
  --csms-studio-btn-icon-color: var(--csms-studio-tx-hierarchy-secondary);
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-size: 32px;
  --csms-studio-btn-icon-svg-color: --csms-studio-fg-hierarchy-secondary;
  --csms-studio-btn-icon-svg-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--csms-studio-btn-icon-border-color);
  border-radius: var(--csms-studio-btn-icon-border-radius);
  background-color: var(--csms-studio-btn-icon-background-color);
  color: var(--csms-studio-btn-icon-svg-color);
  width: var(--csms-studio-btn-icon-size);
  height: var(--csms-studio-btn-icon-size);
  padding: 0;
}
.alert .btn-close.hover, .alert .btn-close:hover {
  background-color: var(--csms-studio-btn-icon-hover-background-color);
}
.alert .btn-close.focus, .alert .btn-close:focus {
  box-shadow: inset 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
  outline: none;
}
.alert .btn-close.active, .alert .btn-close:active {
  background-color: var(--csms-studio-btn-icon-active-background-color);
}
.alert .btn-close:disabled, .alert .btn-close.disabled, .alert .btn-close[disabled=disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.alert .btn-close:disabled:hover, .alert .btn-close:disabled.hover, .alert .btn-close.disabled:hover, .alert .btn-close.disabled.hover, .alert .btn-close[disabled=disabled]:hover, .alert .btn-close[disabled=disabled].hover {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.alert .btn-close:disabled:active, .alert .btn-close:disabled.active, .alert .btn-close.disabled:active, .alert .btn-close.disabled.active, .alert .btn-close[disabled=disabled]:active, .alert .btn-close[disabled=disabled].active {
  background-color: var(--csms-studio-btn-icon-background-color);
}
.alert .btn-close svg {
  width: var(--csms-studio-btn-icon-svg-size);
  height: var(--csms-studio-btn-icon-svg-size);
}
.alert .btn-close svg .svg-color[stroke] {
  stroke: var(--csms-studio-btn-icon-svg-color);
}
.alert .btn-close svg .svg-color[fill] {
  fill: var(--csms-studio-btn-icon-svg-color);
}
.alert .btn-close {
  --csms-studio-btn-icon-size: 28px;
  --csms-studio-btn-icon-border-radius: 6px;
  --csms-studio-btn-icon-svg-size: 16px;
  margin-top: 7px;
  margin-right: 7px;
}
.alert svg {
  width: 16px;
  height: 16px;
}
.alert {
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.alert .description {
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.alert.alert-warning {
  background-color: var(--csms-studio-bg-semantic-nega-senary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .btn-close {
  opacity: inherit;
}
.alert.alert-warning .btn-close.focus, .alert.alert-warning .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.alert.alert-warning .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.alert.alert-info, .alert.alert-guide {
  background-color: var(--csms-studio-bg-semantic-info-senary);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.alert.alert-info .svg-icon svg .svg-color[stroke], .alert.alert-guide .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-info);
}
.alert.alert-info .svg-icon svg .svg-color[fill], .alert.alert-guide .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-info);
}
.alert.alert-info .btn-close, .alert.alert-guide .btn-close {
  opacity: inherit;
}
.alert.alert-info .btn-close.focus, .alert.alert-info .btn-close:focus, .alert.alert-guide .btn-close.focus, .alert.alert-guide .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.alert.alert-info .btn-close, .alert.alert-guide .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.alert.alert-warning, .alert.alert-caution {
  background-color: var(--csms-studio-bg-semantic-warn-quinary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-warning .svg-icon svg .svg-color[stroke], .alert.alert-caution .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-prog);
}
.alert.alert-warning .svg-icon svg .svg-color[fill], .alert.alert-caution .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-prog);
}
.alert.alert-warning .btn-close, .alert.alert-caution .btn-close {
  opacity: inherit;
}
.alert.alert-warning .btn-close.focus, .alert.alert-warning .btn-close:focus, .alert.alert-caution .btn-close.focus, .alert.alert-caution .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.alert.alert-warning .btn-close, .alert.alert-caution .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.alert.alert-danger {
  background-color: var(--csms-studio-bg-semantic-nega-senary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.alert.alert-danger .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-nega-quinary);
}
.alert.alert-danger .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-nega-quinary);
}
.alert.alert-danger .btn-close {
  opacity: inherit;
}
.alert.alert-danger .btn-close.focus, .alert.alert-danger .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}

.csms-studio-alert {
  --csms-studio-alert-gap: 4px;
  --csms-studio-alert-svg-color: var(--csms-studio-fg-semantic-info);
}
.csms-studio-alert .alert-content {
  display: flex;
  align-items: flex-start;
  gap: var(--csms-studio-alert-gap);
  min-height: 28px;
}
.csms-studio-alert .alert-content .svg-icon {
  margin-top: 4px;
  display: flex;
  align-self: flex-start;
  padding: 2px 0;
}
.csms-studio-alert .alert-content .svg-icon svg {
  width: 16px;
  height: 16px;
}
.csms-studio-alert .alert-content .alert-text {
  margin-top: 3.5px;
}
.csms-studio-alert .alert-content .btn-close {
  box-sizing: border-box;
  margin-top: 0;
  margin-right: 0;
}

.csms-studio-alert-header {
  --csms-studio-alert-gap: 8px;
  --bs-alert-padding-x: 24px;
  --bs-alert-bg: var(--csms-studio-bg-semantic-info-senary-subtle);
  --bs-alert-color: var(--csms-studio-tx-hierarchy-tertiary);
  margin-bottom: 24px;
  --csms-studio-label-font-size: 14px;
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 21px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csms-studio-alert-header .alert-content {
  flex-wrap: wrap;
}
.csms-studio-alert-header .alert-content .svg-icon {
  margin-top: 6px;
}
.csms-studio-alert-header .alert-content .svg-icon svg {
  width: 18px;
  height: 18px;
}
.csms-studio-alert-header .alert-content .alert-text {
  margin-top: 5.5px;
}
.csms-studio-alert-header .alert-content .alert-button {
  margin-left: auto;
}
.csms-studio-alert-header .alert-content .btn-ghost {
  margin-top: 4px;
  color: var(--csms-studio-btn-color);
  font-weight: var(--csms-studio-caption-font-weight);
}
@media (max-width: 575.98px) {
  .csms-studio-alert-header .alert-content form {
    width: 100%;
    justify-content: flex-end;
  }
  .csms-studio-alert-header .alert-content .alert-button {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .csms-studio-alert-header .alert-content .btn-ghost {
    width: auto;
    margin: 0;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.csms-studio-toast-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.csms-studio-toast-container .toast {
  margin-bottom: 0;
}

.csms-studio-toast {
  --bs-toast-padding-x: 16px;
  --bs-toast-padding-y: 14px;
  --bs-toast-box-shadow: none;
  --bs-toast-max-width: 100%;
  --csms-studio-toast-border-top-left-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-border-top-right-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-border-bottom-left-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-border-bottom-right-radius: var(--csms-studio-border-radius-16);
  --csms-studio-toast-body-min-height: 28px;
  --csms-studio-toast-icon-margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
  border: 0;
  border-radius: var(--csms-studio-toast-border-top-left-radius) var(--csms-studio-toast-border-top-right-radius) var(--csms-studio-toast-border-bottom-right-radius) var(--csms-studio-toast-border-bottom-left-radius);
  padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
}
.csms-studio-toast .toast-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  min-height: var(--csms-studio-toast-body-min-height);
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
}
.csms-studio-toast .toast-body .svg-icon {
  align-self: flex-start;
}
.csms-studio-toast .toast-body .svg-icon svg {
  width: 20px;
  height: 20px;
}
.csms-studio-toast .toast-body .svg-icon {
  margin-top: var(--csms-studio-toast-icon-margin-top);
}
.csms-studio-toast .toast-body .toast-text {
  display: flex;
  align-items: center;
  gap: 4px 8px;
  flex-wrap: wrap;
}
.csms-studio-toast .btn-close {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: var(--csms-studio-toast-icon-margin-top);
}
.csms-studio-toast.csms-studio-toast-warning {
  background-color: var(--csms-studio-bg-semantic-nega-senary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-warning .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-warning .btn-close.focus, .csms-studio-toast.csms-studio-toast-warning .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-warning .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-nega);
}
.csms-studio-toast.csms-studio-toast-warning .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-nega);
}
.csms-studio-toast.csms-studio-toast-guide {
  background-color: var(--csms-studio-bg-semantic-info-senary);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csms-studio-toast.csms-studio-toast-guide .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-info);
}
.csms-studio-toast.csms-studio-toast-guide .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-info);
}
.csms-studio-toast.csms-studio-toast-guide .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-guide .btn-close.focus, .csms-studio-toast.csms-studio-toast-guide .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-guide .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-info-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.csms-studio-toast.csms-studio-toast-caution {
  background-color: var(--csms-studio-bg-semantic-warn-quinary);
  color: var(--csms-studio-tx-semantic-nega-quinary);
}
.csms-studio-toast.csms-studio-toast-caution .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-prog);
}
.csms-studio-toast.csms-studio-toast-caution .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-prog);
}
.csms-studio-toast.csms-studio-toast-caution .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-caution .btn-close.focus, .csms-studio-toast.csms-studio-toast-caution .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-caution .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-semantic-nega-quinary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-warn-quinary-subtle);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}
.csms-studio-toast.csms-studio-toast-success {
  background-color: var(--csms-studio-bg-semantic-posi-senary);
  color: var(--csms-studio-tx-hierarchy-secondary);
}
.csms-studio-toast.csms-studio-toast-success .svg-icon svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-semantic-posi);
}
.csms-studio-toast.csms-studio-toast-success .svg-icon svg .svg-color[fill] {
  fill: var(--csms-studio-fg-semantic-posi);
}
.csms-studio-toast.csms-studio-toast-success .btn-close {
  opacity: inherit;
}
.csms-studio-toast.csms-studio-toast-success .btn-close.focus, .csms-studio-toast.csms-studio-toast-success .btn-close:focus {
  background-color: var(--csms-studio-bg-neutral-w1p);
}
.csms-studio-toast.csms-studio-toast-success .btn-close {
  --csms-studio-btn-icon-background-color: var(--csms-studio-transparent);
  --csms-studio-btn-icon-svg-color: var(--csms-studio-fg-hierarchy-secondary);
  --csms-studio-btn-icon-hover-background-color: var(--csms-studio-bg-semantic-posi-quinary);
  --csms-studio-btn-icon-active-background-color: var(--csms-studio-bg-semantic-posi-quinary);
  --csms-studio-btn-icon-border-color: var(--csms-studio-transparent);
}

.csms-studio-toast-button {
  --csms-studio-toast-body-min-height: 44px;
  --csms-studio-toast-icon-margin-top: 10px;
}

.csms-studio-toast-slide-down {
  --csms-studio-toast-border-top-left-radius: 0;
  --csms-studio-toast-border-top-right-radius: 0;
  animation: slideDown 0.5s ease-in-out;
  margin-bottom: 1px;
}

.csms-studio-toast-slide-up {
  --csms-studio-toast-border-bottom-left-radius: 0;
  --csms-studio-toast-border-bottom-right-radius: 0;
  animation: slideUp 0.5s ease-in-out;
  margin-top: 1px;
}

.csms-studio-toast-default-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 760px;
  height: auto;
  padding: 14px 16px;
  box-sizing: border-box;
  border-bottom-right-radius: var(--csms-studio-border-radius-16);
  border-bottom-left-radius: var(--csms-studio-border-radius-16);
  z-index: 1000;
  margin: 0 auto;
}

.progress {
  --bs-progress-height: 8px;
  --bs-progress-bg: var(--csms-studio-bg-hierarchy-secondary);
  --bs-progress-border-radius: var(--csms-studio-border-radius-full);
  --bs-progress-box-shadow: none;
  --bs-progress-bar-color: #fff;
  --bs-progress-bar-bg: var(--csms-studio-bg-semantic-prog-primary);
  --bs-progress-bar-transition: width 0.6s ease;
}
.progress .progress-bar {
  --bs-progress-bar-bg: var(--csms-studio-tx-semantic-prog-primary);
  border-radius: var(--csms-studio-border-radius-full);
  transition: width 0.3s ease-in-out;
  animation: animateBar 1.2s 1;
}
.progress .progress-striped {
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.progress-wrap span {
  flex: 0 0 auto;
  --csms-studio-label-font-size: 12px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 18px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-semantic-prog-primary);
}
.progress-wrap .progress {
  flex: 1;
}

@keyframes animateBar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.form-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
  margin-bottom: 0;
  min-height: 24px;
}
.form-check .form-check-input {
  --bs-form-check-bg: var(--csms-studio-bg-neutral-white);
  --bs-border-width: 2px;
  --bs-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-check-hover-background-color: var(--csms-studio-bg-hierarchy-secondary);
  --csms-studio-form-check-hover-border-color: var(--csms-studio-bo-hierarchy-quaternary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-info-primary);
  --csms-studio-form-check-checked-border-color: transparent;
  --csms-studio-form-check-checekd-hover-background-color: var(--csms-studio-bg-semantic-info-secondary);
  --csms-studio-form-check-checked-hover-border-color: transparent;
  --csms-studio-form-check-disabled-background-color: var(--csms-studio-bg-neutral-b10p);
  --csms-studio-form-check-disabled-border-color: var(--csms-studio-bo-hierarchy-tertiary);
  --csms-studio-form-check-background-size: auto;
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-info-30p);
  --bs-form-valid-border-color: var(--csms-studio-bo-semantic-posi-primary);
  --bs-form-invalid-border-color: var(--csms-studio-bo-semantic-nega-primary);
  width: 20px;
  height: 20px;
  float: none;
  margin: 0;
  vertical-align: middle;
  filter: none;
}
.form-check .form-check-input[type=checkbox] {
  border-radius: 6px;
}
.form-check .form-check-input.hover, .form-check .form-check-input:hover, .form-check .form-check-input.active, .form-check .form-check-input:active {
  background-color: var(--csms-studio-form-check-hover-background-color);
  border-color: var(--csms-studio-form-check-hover-border-color);
}
.form-check .form-check-input.focus, .form-check .form-check-input:focus {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.form-check .form-check-input.active, .form-check .form-check-input:active {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-form-check-focus-ring-color);
}
.form-check .form-check-input:checked {
  background-color: var(--csms-studio-form-check-checked-background-color);
  border-color: var(--csms-studio-form-check-checked-border-color);
  background-size: var(--csms-studio-form-check-background-size);
}
.form-check .form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,<svg width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><path d=%27M5.06052 7.98144L5.04203 7.99994L0.423828 3.38174L1.92761 1.87796L5.06058 5.01094L10.0715 0L11.5753 1.50378L5.07908 8L5.06052 7.98144Z%27 fill=%27white%27/></svg>");
}
.form-check .form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,<svg width=%278%27 height=%278%27 viewBox=%270 0 8 8%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><rect width=%278%27 height=%278%27 rx=%274%27 fill=%27white%27/></svg>");
}
.form-check .form-check-input:checked.hover, .form-check .form-check-input:checked:hover, .form-check .form-check-input:checked.active, .form-check .form-check-input:checked:active {
  background-color: var(--csms-studio-form-check-checekd-hover-background-color);
  border-color: var(--csms-studio-form-check-checked-hover-border-color);
}
.form-check .form-check-input[disabled], .form-check .form-check-input:disabled {
  background-color: var(--csms-studio-form-check-disabled-background-color) !important;
  border-color: var(--csms-studio-form-check-disabled-border-color) !important;
  opacity: 50% !important;
}
.form-check .form-check-input[disabled]:checked, .form-check .form-check-input:disabled:checked {
  background-color: var(--csms-studio-form-check-checked-background-color) !important;
  border-color: var(--csms-studio-form-check-checked-border-color) !important;
}
.form-check .form-check-input[disabled] ~ .form-check-label, .form-check .form-check-input:disabled ~ .form-check-label {
  cursor: default;
  opacity: 50%;
}
.form-check .form-check-input[type=checkbox]:indeterminate {
  background-color: var(--csms-studio-form-check-checked-background-color);
  border-color: var(--csms-studio-form-check-checked-border-color);
  --bs-form-check-bg-image: url("data:image/svg+xml,<svg width=%2710%27 height=%273%27 viewBox=%270 0 10 3%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27><rect y=%270.25%27 width=%2710%27 height=%272.4%27 fill=%27white%27/></svg>");
  background-size: auto;
}
.form-check .form-check-input[type=checkbox]:indeterminate.hover, .form-check .form-check-input[type=checkbox]:indeterminate:hover, .form-check .form-check-input[type=checkbox]:indeterminate.active, .form-check .form-check-input[type=checkbox]:indeterminate:active {
  --csms-studio-form-check-checekd-hover-background-color: var(--csms-studio-bg-semantic-info-secondary);
  --csms-studio-form-check-checked-hover-border-color: transparent;
}
.form-check .form-check-input.is-valid {
  --bs-border-color: var(--bs-form-valid-border-color);
  --csms-studio-form-check-hover-border-color: var(--csms-studio-bo-semantic-posi-secondary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-posi-primary);
  --csms-studio-form-check-checekd-hover-background-color: var(--csms-studio-bg-semantic-posi-secondary);
  --csms-studio-form-check-disabled-border-color: var(--bs-form-valid-border-color);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-posi-30p);
}
.form-check .form-check-input.is-invalid, .form-check .form-check-input.vd-error {
  --bs-border-color: var(--bs-form-invalid-border-color);
  --csms-studio-form-check-hover-border-color: var(--csms-studio-bo-semantic-nega-secondary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-nega-primary);
  --csms-studio-form-check-checekd-hover-background-color: var(--csms-studio-bg-semantic-nega-secondary);
  --csms-studio-form-check-disabled-border-color: var(--bs-form-invalid-border-color);
  --csms-studio-form-check-focus-ring-color: var(--csms-studio-bg-semantic-nega-30p);
}
.form-check .form-check-label {
  --csms-studio-label-font-size: 15px;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  --csms-studio-label-font-weight: 400;
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 23px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-secondary);
}

.form-switch {
  padding-left: 0;
}
.form-switch .form-check-input {
  --csms-studio-form-check-svg-background-color: var(--csms-studio-bg-hierarchy-tertiary);
  --csms-studio-form-check-hover-border-color: transparent;
  --csms-studio-form-check-hover-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-info-primary);
  --bs-border-width: 1px;
  --bs-border-color: transparent;
  --bs-form-valid-border-color: transparent;
  --bs-form-invalid-border-color: transparent;
  --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27><circle cx=%278%27 cy=%278%27 r=%278%27 fill=%27white%27/></svg>");
  background-position: 2px center;
  background-size: auto;
  background-color: var(--csms-studio-form-check-svg-background-color);
}
.form-switch .form-check-input::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  --csms-studio-input-switch-box-shadow-x: 1px;
  box-shadow: var(--csms-studio-input-switch-box-shadow-x) 0px 2px 1px var(--csms-studio-bg-neutral-b6p-hovered);
}
.form-switch .form-check-input {
  width: 36px;
  padding: 2px;
  margin-left: 0;
}
.form-switch .form-check-input[type=checkbox] {
  border-radius: 10px;
}
.form-switch .form-check-input.hover, .form-switch .form-check-input:hover, .form-switch .form-check-input.focus, .form-switch .form-check-input:focus, .form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27><circle cx=%278%27 cy=%278%27 r=%278%27 fill=%27white%27/></svg>");
}
.form-switch .form-check-input.focus, .form-switch .form-check-input:focus {
  border-color: var(--csms-studio-form-check-hover-border-color);
}
.form-switch .form-check-input.active, .form-switch .form-check-input:active {
  box-shadow: 0px 0px 0px 2px var(--csms-studio-bg-semantic-info-30p);
}
.form-switch .form-check-input.active, .form-switch .form-check-input:active {
  background-color: var(--csms-studio-form-check-svg-background-color);
}
.form-switch .form-check-input:checked {
  background-position: right 2px center;
}
.form-switch .form-check-input:checked::after {
  position: relative;
  left: 16px;
  --csms-studio-input-switch-box-shadow-x: -1px;
}
.form-switch .form-check-input:checked[type=checkbox] {
  background-size: auto;
}
.form-switch .form-check-input.disabled, .form-switch .form-check-input:disabled {
  background-color: var(--csms-studio-form-check-svg-background-color) !important;
}
.form-switch .form-check-input.is-valid {
  --bs-border-color: transparent;
  --csms-studio-form-check-svg-background-color: var(--csms-studio-bg-semantic-posi-quinary);
  --csms-studio-form-check-hover-border-color: transparent;
  --csms-studio-form-check-hover-background-color: var(--csms-studio-bg-semantic-posi-quaternary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-posi-primary);
  --csms-studio-form-check-disabled-background-color: var(--csms-studio-bg-semantic-posi-primary);
}
.form-switch .form-check-input.is-invalid, .form-switch .form-check-input.vd-error {
  --bs-border-color: transparent;
  --csms-studio-form-check-svg-background-color: var(--csms-studio-bg-semantic-nega-quinary);
  --csms-studio-form-check-hover-border-color: transparent;
  --csms-studio-form-check-hover-background-color: var(--csms-studio-bg-semantic-nega-quaternary);
  --csms-studio-form-check-checked-background-color: var(--csms-studio-bg-semantic-nega-primary);
  --csms-studio-form-check-disabled-background-color: var(--csms-studio-bg-semantic-nega-primary);
}

.form-switch-svg {
  position: relative;
}
.form-switch-svg .form-check-input {
  border-width: 0;
  background-image: none;
  transition: none;
}
.form-switch-svg .form-check-input::after {
  display: none;
}
.form-switch-svg .svg {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 4px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  transition: transform 0.15s ease-in-out;
  transform: translate(0, 0);
  --csms-studio-form-switch-svg-svg-color: transparent;
}
.form-switch-svg .svg .svg-color {
  fill: var(--csms-studio-form-switch-svg-svg-color);
}
.form-switch-svg .svg svg {
  position: static;
  width: inherit;
  height: inherit;
  border-radius: 0;
  transition: none;
  transform: none;
}
.form-switch-svg .form-check-input:checked ~ .svg {
  transform: translate(16px, 0);
  --csms-studio-form-switch-svg-svg-color: var(--csms-studio-fg-semantic-info);
}
.form-switch-svg .form-check-input:checked.is-valid ~ .svg {
  --csms-studio-form-switch-svg-svg-color: var(--csms-studio-fg-semantic-posi);
}
.form-switch-svg .form-check-input:checked.is-invalid ~ .svg, .form-switch-svg .form-check-input:checked.vd-error ~ .svg {
  --csms-studio-form-switch-svg-svg-color: var(--csms-studio-fg-semantic-nega);
}

.form-switch-editmode {
  --csms-studio-form-switch-editmode-width: 68px;
  --csms-studio-form-switch-editmode-height: 36px;
  --csms-studio-form-switch-svg-size: 40px;
}
.form-switch-editmode .form-check-input {
  --csms-studio-form-check-svg-background-color: var(--csms-studio-bg-hierarchy-quaternary);
  width: var(--csms-studio-form-switch-editmode-width);
  height: var(--csms-studio-form-switch-editmode-height);
  padding: 0;
}
.form-switch-editmode .form-check-input[type=checkbox] {
  border-radius: 99px;
}
.form-switch-editmode .form-check-input:checked {
  background-color: var(--csms-studio-bg-coursemos-primary);
}
.form-switch-editmode .form-check-input:checked::after {
  left: 28px;
}
.form-switch-editmode .svg {
  width: var(--csms-studio-form-switch-svg-size);
  height: var(--csms-studio-form-switch-svg-size);
  border-radius: 999px;
  background-color: var(--csms-studio-bg-hierarchy-secondary);
  border: 1px solid var(--csms-studio-bo-hierarchy-tertiary);
  top: -2px;
  left: 0;
}
.form-switch-editmode .svg svg {
  width: 16px;
  height: 16px;
}
.form-switch-editmode .form-check-input:checked ~ .svg {
  transform: translate(28px, 0);
}
.form-switch-editmode svg .svg-color[stroke] {
  stroke: var(--csms-studio-fg-coursemos-primary);
}
.form-switch-editmode svg .svg-color[fill] {
  fill: var(--csms-studio-fg-coursemos-primary);
}
.form-switch-editmode.form-switch-editmode-sm {
  --csms-studio-form-switch-editmode-width: 64px;
  --csms-studio-form-switch-editmode-height: 32px;
  --csms-studio-form-switch-svg-size: 36px;
}

[data-bs-theme=light-red] {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-primary {
  color: #161819;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-secondary {
  color: #2c2f32;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-tertiary {
  color: #575e64;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-quinary {
  color: #899199;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-senary {
  color: #c4c8cc;
}
[data-bs-theme=light-red] .csms-studio-tx-hierarchy-senary-subtle {
  color: #e0e3e5;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-white {
  color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-black {
  color: #000000;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-black-solid {
  color: #000000;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-b20p-disabled {
  color: rgba(0, 0, 0, 0.2);
}
[data-bs-theme=light-red] .csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-primary {
  color: #8a130a;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-secondary {
  color: #6e0f08;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-tertiary {
  color: #530b06;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-quaternary {
  color: #f1afb6;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-quinary {
  color: #f8d7da;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-senary {
  color: #fbebed;
}
[data-bs-theme=light-red] .csms-studio-tx-coursemos-primary-30p {
  color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-secondary {
  color: #dc1e11;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-tertiary {
  color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-quaternary {
  color: #8a130a;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-quinary {
  color: #530b06;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-nega-senary {
  color: #fbebed;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-primary {
  color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-secondary {
  color: #0673e7;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-tertiary {
  color: #0564ca;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-quaternary {
  color: #044890;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-quinary {
  color: #033973;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-info-senary {
  color: #e0eefe;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-secondary {
  color: #188351;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-tertiary {
  color: #157347;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-quaternary {
  color: #0f5233;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-quinary {
  color: #09311e;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-posi-senary {
  color: #e4faf0;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}
[data-bs-theme=light-red] .csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-primary {
  border-color: #eeeff0;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-secondary {
  border-color: #e0e3e5;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-tertiary {
  border-color: #d3d6d9;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-quaternary {
  border-color: #c4c8cc;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-quinary {
  border-color: #41474b;
}
[data-bs-theme=light-red] .csms-studio-bo-hierarchy-senary {
  border-color: #161819;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-white {
  border-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-black {
  border-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-bo-neutral-b30p {
  border-color: rgba(0, 0, 0, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-primary {
  border-color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-secondary {
  border-color: #a5170c;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-tertiary {
  border-color: #8a130a;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-quaternary {
  border-color: #f1afb6;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-quinary {
  border-color: #f8d7da;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-senary {
  border-color: #f7e8ea;
}
[data-bs-theme=light-red] .csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-secondary {
  border-color: #dc1e11;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-tertiary {
  border-color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-primary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-secondary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-tertiary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-quaternary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-quinary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-senary {
  border-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-posi-secondary {
  border-color: #188351;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-posi-tertiary {
  border-color: #157347;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}
[data-bs-theme=light-red] .csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-primary {
  background-color: #fcfcfc;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-primary-subtle {
  background-color: #f5f5f5;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-secondary {
  background-color: #f0f1f2;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #eeeff0;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-tertiary {
  background-color: #e0e3e5;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-quaternary {
  background-color: #d3d6d9;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-quinary {
  background-color: #899199;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}
[data-bs-theme=light-red] .csms-studio-bg-hierarchy-senary-subtle {
  background-color: #575e64;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-white {
  background-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-black {
  background-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(0, 0, 0, 0.06);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b10p {
  background-color: rgba(0, 0, 0, 0.1);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b15p {
  background-color: rgba(0, 0, 0, 0.15);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b60p {
  background-color: rgba(0, 0, 0, 0.6);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-b80p {
  background-color: rgba(0, 0, 0, 0.8);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w90p {
  background-color: rgba(255, 255, 255, 0.9);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w50p {
  background-color: rgba(255, 255, 255, 0.5);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w30p {
  background-color: rgba(255, 255, 255, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w20p {
  background-color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w5p {
  background-color: rgba(255, 255, 255, 0.05);
}
[data-bs-theme=light-red] .csms-studio-bg-neutral-w1p {
  background-color: rgba(255, 255, 255, 0.01);
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-secondary {
  background-color: #1582FF;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-tertiary {
  background-color: #2F90FF;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-quaternary {
  background-color: #004696;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-quinary {
  background-color: #002F64;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-quinary-subtle {
  background-color: #001732;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-senary {
  background-color: #00234B;
}
[data-bs-theme=light-red] .csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-secondary {
  background-color: #dc1e11;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-tertiary {
  background-color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-quaternary {
  background-color: #ea8791;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-quinary {
  background-color: #f8d7da;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-senary {
  background-color: #fbebed;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-secondary {
  background-color: #0564ca;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-tertiary {
  background-color: #0456ad;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-quaternary {
  background-color: #c0defd;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-quinary {
  background-color: #d5e9fe;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-senary {
  background-color: #e0eefe;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-senary-subtle {
  background-color: #eaf4fe;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-secondary {
  background-color: #188351;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-tertiary {
  background-color: #157347;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-quaternary {
  background-color: #5fe2a5;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-quinary {
  background-color: #caf5e1;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-senary {
  background-color: #e4faf0;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-secondary {
  background-color: #d09c00;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-tertiary {
  background-color: #9c7500;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-quaternary {
  background-color: #ffda69;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-quinary {
  background-color: #fff3cd;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-warn-senary {
  background-color: #fff9e6;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-secondary {
  background-color: #d54d03;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-tertiary {
  background-color: #ba4303;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-quaternary {
  background-color: #fda271;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-quinary {
  background-color: #fee0d0;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-prog-senary {
  background-color: #fff0e7;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-secondary {
  background-color: #58339d;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-tertiary {
  background-color: #4d2d89;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-quaternary {
  background-color: #a98eda;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-quinary {
  background-color: #e2d9f3;
}
[data-bs-theme=light-red] .csms-studio-bg-semantic-etc-senary {
  background-color: #f1ecf9;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-primary {
  background-color: #161819;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-secondary {
  background-color: #2c2f32;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-tertiary {
  background-color: #575e64;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-quinary {
  background-color: #899199;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-senary {
  background-color: #c4c8cc;
}
[data-bs-theme=light-red] .csms-studio-fg-hierarchy-senary-subtle {
  background-color: #e0e3e5;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-white {
  background-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-black {
  background-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}
[data-bs-theme=light-red] .csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-primary {
  background-color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-secondary {
  background-color: #dc1e11;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-tertiary {
  background-color: #c11a0e;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-quaternary {
  background-color: #e35f6d;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-quinary {
  background-color: #f8d7da;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-senary {
  background-color: #fbebed;
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=light-red] .csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-nega {
  background-color: #f04438;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-nega-quinary {
  background-color: #530b06;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-warn-senary {
  background-color: #ffda69;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-info {
  background-color: #1181f9;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}
[data-bs-theme=light-red] .csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}
[data-bs-theme=light-red] .csms-studio-ut-school-primary {
  background-color: #a5170c;
}
[data-bs-theme=light-red] .csms-studio-ut-school-secondary {
  background-color: #ea8791;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}
[data-bs-theme=light-red] .csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}
[data-bs-theme=light-red] {
  --csms-studio-tx-hierarchy-primary: #161819;
  --csms-studio-tx-hierarchy-secondary: #2c2f32;
  --csms-studio-tx-hierarchy-tertiary: #575e64;
  --csms-studio-tx-hierarchy-quaternary: #6d767e;
  --csms-studio-tx-hierarchy-quinary: #899199;
  --csms-studio-tx-hierarchy-senary: #c4c8cc;
  --csms-studio-tx-hierarchy-senary-subtle: #e0e3e5;
  --csms-studio-tx-neutral-white: #ffffff;
  --csms-studio-tx-neutral-black: #000000;
  --csms-studio-tx-neutral-black-solid: #000000;
  --csms-studio-tx-neutral-white-solid: #ffffff;
  --csms-studio-tx-neutral-b20p-disabled: rgba(0, 0, 0, 0.2);
  --csms-studio-tx-neutral-w80p-disabled: rgba(255, 255, 255, 0.8);
  --csms-studio-tx-coursemos-primary: #8a130a;
  --csms-studio-tx-coursemos-secondary: #6e0f08;
  --csms-studio-tx-coursemos-tertiary: #530b06;
  --csms-studio-tx-coursemos-quaternary: #f1afb6;
  --csms-studio-tx-coursemos-quinary: #f8d7da;
  --csms-studio-tx-coursemos-senary: #fbebed;
  --csms-studio-tx-coursemos-primary-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-tx-semantic-nega-primary: #f04438;
  --csms-studio-tx-semantic-nega-secondary: #dc1e11;
  --csms-studio-tx-semantic-nega-tertiary: #c11a0e;
  --csms-studio-tx-semantic-nega-quaternary: #8a130a;
  --csms-studio-tx-semantic-nega-quinary: #530b06;
  --csms-studio-tx-semantic-nega-senary: #fbebed;
  --csms-studio-tx-semantic-info-primary: #1181f9;
  --csms-studio-tx-semantic-info-secondary: #0673e7;
  --csms-studio-tx-semantic-info-tertiary: #0564ca;
  --csms-studio-tx-semantic-info-quaternary: #044890;
  --csms-studio-tx-semantic-info-quinary: #033973;
  --csms-studio-tx-semantic-info-senary: #e0eefe;
  --csms-studio-tx-semantic-posi-primary: #1ea465;
  --csms-studio-tx-semantic-posi-secondary: #188351;
  --csms-studio-tx-semantic-posi-tertiary: #157347;
  --csms-studio-tx-semantic-posi-quaternary: #0f5233;
  --csms-studio-tx-semantic-posi-quinary: #09311e;
  --csms-studio-tx-semantic-posi-senary: #e4faf0;
  --csms-studio-tx-semantic-noti-primary: #ffc107;
  --csms-studio-tx-semantic-prog-primary: #fd7e14;
  --csms-studio-tx-semantic-etc-primary: #6f42c1;
  --csms-studio-bo-hierarchy-primary: #eeeff0;
  --csms-studio-bo-hierarchy-secondary: #e0e3e5;
  --csms-studio-bo-hierarchy-tertiary: #d3d6d9;
  --csms-studio-bo-hierarchy-quaternary: #c4c8cc;
  --csms-studio-bo-hierarchy-quaternary-subtle: #6d767e;
  --csms-studio-bo-hierarchy-quinary: #41474b;
  --csms-studio-bo-hierarchy-senary: #161819;
  --csms-studio-bo-neutral-white: #ffffff;
  --csms-studio-bo-neutral-black: #000000;
  --csms-studio-bo-neutral-white-solid: #ffffff;
  --csms-studio-bo-neutral-black-solid: #000000;
  --csms-studio-bo-neutral-b30p: rgba(0, 0, 0, 0.3);
  --csms-studio-bo-coursemos-primary: #c11a0e;
  --csms-studio-bo-coursemos-secondary: #a5170c;
  --csms-studio-bo-coursemos-tertiary: #8a130a;
  --csms-studio-bo-coursemos-quaternary: #f1afb6;
  --csms-studio-bo-coursemos-quinary: #f8d7da;
  --csms-studio-bo-coursemos-senary: #f7e8ea;
  --csms-studio-bo-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bo-semantic-nega-primary: #f04438;
  --csms-studio-bo-semantic-nega-secondary: #dc1e11;
  --csms-studio-bo-semantic-nega-tertiary: #c11a0e;
  --csms-studio-bo-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bo-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-bo-semantic-info-primary: #1181f9;
  --csms-studio-bo-semantic-info-secondary: #1181f9;
  --csms-studio-bo-semantic-info-tertiary: #1181f9;
  --csms-studio-bo-semantic-info-quaternary: #1181f9;
  --csms-studio-bo-semantic-info-quinary: #1181f9;
  --csms-studio-bo-semantic-info-senary: #1181f9;
  --csms-studio-bo-semantic-info-40p: rgba(17, 129, 249, 0.4);
  --csms-studio-bo-semantic-posi-primary: #1ea465;
  --csms-studio-bo-semantic-posi-secondary: #188351;
  --csms-studio-bo-semantic-posi-tertiary: #157347;
  --csms-studio-bo-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bo-semantic-warn-primary: #ffc107;
  --csms-studio-bo-semantic-noti-primary: #ffc107;
  --csms-studio-bo-semantic-prog-primary: #fd7e14;
  --csms-studio-bo-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-hierarchy-primary: #fcfcfc;
  --csms-studio-bg-hierarchy-primary-subtle: #f5f5f5;
  --csms-studio-bg-hierarchy-secondary: #f0f1f2;
  --csms-studio-bg-hierarchy-secondary-subtle: #eeeff0;
  --csms-studio-bg-hierarchy-tertiary: #e0e3e5;
  --csms-studio-bg-hierarchy-quaternary: #d3d6d9;
  --csms-studio-bg-hierarchy-quinary: #899199;
  --csms-studio-bg-hierarchy-senary: #6d767e;
  --csms-studio-bg-hierarchy-senary-subtle: #575e64;
  --csms-studio-bg-neutral-white: #ffffff;
  --csms-studio-bg-neutral-black: #000000;
  --csms-studio-bg-neutral-white-solid: #ffffff;
  --csms-studio-bg-neutral-black-solid: #000000;
  --csms-studio-bg-neutral-b6p-hovered: rgba(0, 0, 0, 0.06);
  --csms-studio-bg-neutral-b10p: rgba(0, 0, 0, 0.1);
  --csms-studio-bg-neutral-b15p: rgba(0, 0, 0, 0.15);
  --csms-studio-bg-neutral-b60p: rgba(0, 0, 0, 0.6);
  --csms-studio-bg-neutral-b80p: rgba(0, 0, 0, 0.8);
  --csms-studio-bg-neutral-w90p: rgba(255, 255, 255, 0.9);
  --csms-studio-bg-neutral-w50p: rgba(255, 255, 255, 0.5);
  --csms-studio-bg-neutral-w30p: rgba(255, 255, 255, 0.3);
  --csms-studio-bg-neutral-w20p: rgba(255, 255, 255, 0.2);
  --csms-studio-bg-neutral-w5p: rgba(255, 255, 255, 0.05);
  --csms-studio-bg-neutral-w1p: rgba(255, 255, 255, 0.01);
  --csms-studio-bg-coursemos-primary: #0075F8;
  --csms-studio-bg-coursemos-secondary: #1582FF;
  --csms-studio-bg-coursemos-tertiary: #2F90FF;
  --csms-studio-bg-coursemos-quaternary: #004696;
  --csms-studio-bg-coursemos-quinary: #002F64;
  --csms-studio-bg-coursemos-quinary-subtle: #001732;
  --csms-studio-bg-coursemos-senary: #00234B;
  --csms-studio-bg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bg-semantic-nega-primary: #f04438;
  --csms-studio-bg-semantic-nega-secondary: #dc1e11;
  --csms-studio-bg-semantic-nega-tertiary: #c11a0e;
  --csms-studio-bg-semantic-nega-quaternary: #ea8791;
  --csms-studio-bg-semantic-nega-quinary: #f8d7da;
  --csms-studio-bg-semantic-nega-senary: #fbebed;
  --csms-studio-bg-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bg-semantic-info-primary: #1181f9;
  --csms-studio-bg-semantic-info-secondary: #0564ca;
  --csms-studio-bg-semantic-info-tertiary: #0456ad;
  --csms-studio-bg-semantic-info-quaternary: #c0defd;
  --csms-studio-bg-semantic-info-quinary: #d5e9fe;
  --csms-studio-bg-semantic-info-senary: #e0eefe;
  --csms-studio-bg-semantic-info-senary-subtle: #eaf4fe;
  --csms-studio-bg-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bg-semantic-posi-primary: #1ea465;
  --csms-studio-bg-semantic-posi-secondary: #188351;
  --csms-studio-bg-semantic-posi-tertiary: #157347;
  --csms-studio-bg-semantic-posi-quaternary: #5fe2a5;
  --csms-studio-bg-semantic-posi-quinary: #caf5e1;
  --csms-studio-bg-semantic-posi-senary: #e4faf0;
  --csms-studio-bg-semantic-posi-30p: rgba(30, 164, 101, 0.3);
  --csms-studio-bg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-posi-50p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-warn-primary: #ffc107;
  --csms-studio-bg-semantic-warn-secondary: #d09c00;
  --csms-studio-bg-semantic-warn-tertiary: #9c7500;
  --csms-studio-bg-semantic-warn-quaternary: #ffda69;
  --csms-studio-bg-semantic-warn-quinary: #fff3cd;
  --csms-studio-bg-semantic-warn-senary: #fff9e6;
  --csms-studio-bg-semantic-prog-primary: #fd7e14;
  --csms-studio-bg-semantic-prog-secondary: #d54d03;
  --csms-studio-bg-semantic-prog-tertiary: #ba4303;
  --csms-studio-bg-semantic-prog-quaternary: #fda271;
  --csms-studio-bg-semantic-prog-quinary: #fee0d0;
  --csms-studio-bg-semantic-prog-senary: #fff0e7;
  --csms-studio-bg-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-semantic-etc-secondary: #58339d;
  --csms-studio-bg-semantic-etc-tertiary: #4d2d89;
  --csms-studio-bg-semantic-etc-quaternary: #a98eda;
  --csms-studio-bg-semantic-etc-quinary: #e2d9f3;
  --csms-studio-bg-semantic-etc-senary: #f1ecf9;
  --csms-studio-fg-hierarchy-primary: #161819;
  --csms-studio-fg-hierarchy-secondary: #2c2f32;
  --csms-studio-fg-hierarchy-tertiary: #575e64;
  --csms-studio-fg-hierarchy-quaternary: #6d767e;
  --csms-studio-fg-hierarchy-quinary: #899199;
  --csms-studio-fg-hierarchy-senary: #c4c8cc;
  --csms-studio-fg-hierarchy-senary-subtle: #e0e3e5;
  --csms-studio-fg-neutral-white: #ffffff;
  --csms-studio-fg-neutral-black: #000000;
  --csms-studio-fg-neutral-white-solid: #ffffff;
  --csms-studio-fg-neutral-black-solid: #000000;
  --csms-studio-fg-neutral-w50p-solid: rgba(255, 255, 255, 0.5);
  --csms-studio-fg-neutral-w80p-solid: rgba(255, 255, 255, 0.8);
  --csms-studio-fg-coursemos-primary: #f04438;
  --csms-studio-fg-coursemos-secondary: #dc1e11;
  --csms-studio-fg-coursemos-tertiary: #c11a0e;
  --csms-studio-fg-coursemos-quaternary: #e35f6d;
  --csms-studio-fg-coursemos-quinary: #f8d7da;
  --csms-studio-fg-coursemos-senary: #fbebed;
  --csms-studio-fg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-fg-coursemos-primary-50p: rgba(0, 117, 248, 0.5);
  --csms-studio-fg-semantic-nega: #f04438;
  --csms-studio-fg-semantic-nega-quinary: #530b06;
  --csms-studio-fg-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-warn-primary: #ffc107;
  --csms-studio-fg-semantic-warn-senary: #ffda69;
  --csms-studio-fg-semantic-posi: #1ea465;
  --csms-studio-fg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-fg-semantic-info: #1181f9;
  --csms-studio-fg-semantic-prog: #fd7e14;
  --csms-studio-fg-semantic-etc: #6f42c1;
  --csms-studio-ut-school-primary: #a5170c;
  --csms-studio-ut-school-secondary: #ea8791;
}

[data-bs-theme=dark] {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-primary {
  color: #e0e3e5;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-secondary {
  color: #c4c8cc;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-tertiary {
  color: #899199;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-quinary {
  color: #575e64;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-senary {
  color: #41474b;
}
[data-bs-theme=dark] .csms-studio-tx-hierarchy-senary-subtle {
  color: #2c2f32;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-white {
  color: #000000;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-black {
  color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-black-solid {
  color: #000000;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-tx-neutral-b20p-disabled {
  color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark] .csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-primary {
  color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-secondary {
  color: #2F90FF;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-tertiary {
  color: #499EFF;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-quaternary {
  color: #004696;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-quinary {
  color: #002F64;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-senary {
  color: #00234B;
}
[data-bs-theme=dark] .csms-studio-tx-coursemos-primary-30p {
  color: rgba(0, 93, 200, 0.4);
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-secondary {
  color: #e35f6d;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-tertiary {
  color: #e6737f;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-quaternary {
  color: #c11a0e;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-quinary {
  color: #8a130a;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-nega-senary {
  color: #530b06;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-primary {
  color: #439cfa;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-secondary {
  color: #58a7fb;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-tertiary {
  color: #6db2fb;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-quaternary {
  color: #044890;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-quinary {
  color: #033973;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-info-senary {
  color: #022b57;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-secondary {
  color: #29d886;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-tertiary {
  color: #44dd95;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-quaternary {
  color: #157347;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-quinary {
  color: #0f5233;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-posi-senary {
  color: #09311e;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}
[data-bs-theme=dark] .csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-primary {
  border-color: #1f2124;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-secondary {
  border-color: #2c2f32;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-tertiary {
  border-color: #373b3f;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-quaternary {
  border-color: #41474b;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-quinary {
  border-color: #a7adb2;
}
[data-bs-theme=dark] .csms-studio-bo-hierarchy-senary {
  border-color: #e0e3e5;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-white {
  border-color: #000000;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-black {
  border-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}
[data-bs-theme=dark] .csms-studio-bo-neutral-b30p {
  border-color: rgba(255, 255, 255, 0.3);
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-primary {
  border-color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-secondary {
  border-color: #2F90FF;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-tertiary {
  border-color: #499EFF;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-quaternary {
  border-color: #003A7D;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-quinary {
  border-color: #00234B;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-senary {
  border-color: #001732;
}
[data-bs-theme=dark] .csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-secondary {
  border-color: #e35f6d;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-tertiary {
  border-color: #e6737f;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-primary {
  border-color: #439cfa;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-secondary {
  border-color: #58a7fb;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-tertiary {
  border-color: #6db2fb;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-quaternary {
  border-color: #044890;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-quinary {
  border-color: #033973;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-senary {
  border-color: #022b57;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-posi-secondary {
  border-color: #29d886;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-posi-tertiary {
  border-color: #44dd95;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark] .csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}
[data-bs-theme=dark] .csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-primary {
  background-color: #0b0c0d;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-primary-subtle {
  background-color: #1f2124;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-secondary {
  background-color: #212326;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #232629;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-tertiary {
  background-color: #2c2f32;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-quaternary {
  background-color: #373b3f;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-quinary {
  background-color: #575e64;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}
[data-bs-theme=dark] .csms-studio-bg-hierarchy-senary-subtle {
  background-color: #899199;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-white {
  background-color: #000000;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-black {
  background-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(255, 255, 255, 0.06);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b10p {
  background-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b15p {
  background-color: rgba(255, 255, 255, 0.15);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b60p {
  background-color: rgba(255, 255, 255, 0.6);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-b80p {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w90p {
  background-color: rgba(0, 0, 0, 0.85);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w50p {
  background-color: rgba(0, 0, 0, 0.5);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w30p {
  background-color: rgba(0, 0, 0, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w20p {
  background-color: rgba(0, 0, 0, 0.2);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w5p {
  background-color: rgba(0, 0, 0, 0.05);
}
[data-bs-theme=dark] .csms-studio-bg-neutral-w1p {
  background-color: rgba(0, 0, 0, 0.01);
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-secondary {
  background-color: #1582FF;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-tertiary {
  background-color: #2F90FF;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-quaternary {
  background-color: #004696;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-quinary {
  background-color: #002F64;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-quinary-subtle {
  background-color: #001732;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-senary {
  background-color: #00234B;
}
[data-bs-theme=dark] .csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-secondary {
  background-color: #e35f6d;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-tertiary {
  background-color: #e6737f;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-quaternary {
  background-color: #a5170c;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-quinary {
  background-color: #6e0f08;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-senary {
  background-color: #530b06;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-primary {
  background-color: #1181f9;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-tertiary {
  background-color: #82bdfc;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-quaternary {
  background-color: #044890;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-quinary {
  background-color: #022b57;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-senary {
  background-color: #011d3a;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-senary-subtle {
  background-color: #010e1d;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-secondary {
  background-color: #29d886;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-tertiary {
  background-color: #44dd95;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-quaternary {
  background-color: #12623d;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-quinary {
  background-color: #0c4229;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-senary {
  background-color: #09311e;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.5);
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-secondary {
  background-color: #ffcd37;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-tertiary {
  background-color: #ffda69;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-quaternary {
  background-color: #9c7500;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-quinary {
  background-color: #684e00;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-quinary-subtle {
  background-color: #826200;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-warn-senary {
  background-color: #4e3b00;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-secondary {
  background-color: #fc8342;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-tertiary {
  background-color: #fc935a;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-quaternary {
  background-color: #a03902;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-quinary {
  background-color: #6a2602;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-prog-senary {
  background-color: #501d01;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-secondary {
  background-color: #8c68ce;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-tertiary {
  background-color: #9a7bd4;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-quaternary {
  background-color: #422676;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-quinary {
  background-color: #2c194f;
}
[data-bs-theme=dark] .csms-studio-bg-semantic-etc-senary {
  background-color: #21133b;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-primary {
  background-color: #e0e3e5;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-secondary {
  background-color: #c4c8cc;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-tertiary {
  background-color: #899199;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-quinary {
  background-color: #575e64;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-senary {
  background-color: #2c2f32;
}
[data-bs-theme=dark] .csms-studio-fg-hierarchy-senary-subtle {
  background-color: #161819;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-white {
  background-color: #000000;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-black {
  background-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=dark] .csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}
[data-bs-theme=dark] .csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-primary {
  background-color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-secondary {
  background-color: #2F90FF;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-tertiary {
  background-color: #499EFF;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-quaternary {
  background-color: #005DC8;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-quinary {
  background-color: #002F64;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-senary {
  background-color: #00234B;
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark] .csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(0, 117, 248, 0.5);
}
[data-bs-theme=dark] .csms-studio-fg-semantic-nega {
  background-color: #f04438;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-nega-quinary {
  background-color: #8a130a;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark] .csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-warn-senary {
  background-color: #9c7500;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark] .csms-studio-fg-semantic-info {
  background-color: #1181f9;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}
[data-bs-theme=dark] .csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}
[data-bs-theme=dark] .csms-studio-ut-school-primary {
  background-color: #0075F8;
}
[data-bs-theme=dark] .csms-studio-ut-school-secondary {
  background-color: #005DC8;
}
[data-bs-theme=dark] .csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}
[data-bs-theme=dark] .csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}
[data-bs-theme=dark] .csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}
[data-bs-theme=dark] .csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}
[data-bs-theme=dark] .csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}
[data-bs-theme=dark] .csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}
[data-bs-theme=dark] .csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}
[data-bs-theme=dark] .csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}
[data-bs-theme=dark] {
  --csms-studio-tx-hierarchy-primary: #e0e3e5;
  --csms-studio-tx-hierarchy-secondary: #c4c8cc;
  --csms-studio-tx-hierarchy-tertiary: #899199;
  --csms-studio-tx-hierarchy-quaternary: #6d767e;
  --csms-studio-tx-hierarchy-quinary: #575e64;
  --csms-studio-tx-hierarchy-senary: #41474b;
  --csms-studio-tx-hierarchy-senary-subtle: #2c2f32;
  --csms-studio-tx-neutral-white: #000000;
  --csms-studio-tx-neutral-black: #ffffff;
  --csms-studio-tx-neutral-black-solid: #000000;
  --csms-studio-tx-neutral-white-solid: #ffffff;
  --csms-studio-tx-neutral-b20p-disabled: rgba(255, 255, 255, 0.2);
  --csms-studio-tx-neutral-w80p-disabled: rgba(255, 255, 255, 0.2);
  --csms-studio-tx-coursemos-primary: #0075F8;
  --csms-studio-tx-coursemos-secondary: #2F90FF;
  --csms-studio-tx-coursemos-tertiary: #499EFF;
  --csms-studio-tx-coursemos-quaternary: #004696;
  --csms-studio-tx-coursemos-quinary: #002F64;
  --csms-studio-tx-coursemos-senary: #00234B;
  --csms-studio-tx-coursemos-primary-30p: rgba(0, 93, 200, 0.4);
  --csms-studio-tx-semantic-nega-primary: #f04438;
  --csms-studio-tx-semantic-nega-secondary: #e35f6d;
  --csms-studio-tx-semantic-nega-tertiary: #e6737f;
  --csms-studio-tx-semantic-nega-quaternary: #c11a0e;
  --csms-studio-tx-semantic-nega-quinary: #8a130a;
  --csms-studio-tx-semantic-nega-senary: #530b06;
  --csms-studio-tx-semantic-info-primary: #439cfa;
  --csms-studio-tx-semantic-info-secondary: #58a7fb;
  --csms-studio-tx-semantic-info-tertiary: #6db2fb;
  --csms-studio-tx-semantic-info-quaternary: #044890;
  --csms-studio-tx-semantic-info-quinary: #033973;
  --csms-studio-tx-semantic-info-senary: #022b57;
  --csms-studio-tx-semantic-posi-primary: #1ea465;
  --csms-studio-tx-semantic-posi-secondary: #29d886;
  --csms-studio-tx-semantic-posi-tertiary: #44dd95;
  --csms-studio-tx-semantic-posi-quaternary: #157347;
  --csms-studio-tx-semantic-posi-quinary: #0f5233;
  --csms-studio-tx-semantic-posi-senary: #09311e;
  --csms-studio-tx-semantic-noti-primary: #ffc107;
  --csms-studio-tx-semantic-prog-primary: #fd7e14;
  --csms-studio-tx-semantic-etc-primary: #6f42c1;
  --csms-studio-bo-hierarchy-primary: #1f2124;
  --csms-studio-bo-hierarchy-secondary: #2c2f32;
  --csms-studio-bo-hierarchy-tertiary: #373b3f;
  --csms-studio-bo-hierarchy-quaternary: #41474b;
  --csms-studio-bo-hierarchy-quaternary-subtle: #6d767e;
  --csms-studio-bo-hierarchy-quinary: #a7adb2;
  --csms-studio-bo-hierarchy-senary: #e0e3e5;
  --csms-studio-bo-neutral-white: #000000;
  --csms-studio-bo-neutral-black: #ffffff;
  --csms-studio-bo-neutral-white-solid: #ffffff;
  --csms-studio-bo-neutral-black-solid: #000000;
  --csms-studio-bo-neutral-b30p: rgba(255, 255, 255, 0.3);
  --csms-studio-bo-coursemos-primary: #0075F8;
  --csms-studio-bo-coursemos-secondary: #2F90FF;
  --csms-studio-bo-coursemos-tertiary: #499EFF;
  --csms-studio-bo-coursemos-quaternary: #003A7D;
  --csms-studio-bo-coursemos-quinary: #00234B;
  --csms-studio-bo-coursemos-senary: #001732;
  --csms-studio-bo-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bo-semantic-nega-primary: #f04438;
  --csms-studio-bo-semantic-nega-secondary: #e35f6d;
  --csms-studio-bo-semantic-nega-tertiary: #e6737f;
  --csms-studio-bo-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bo-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-bo-semantic-info-primary: #439cfa;
  --csms-studio-bo-semantic-info-secondary: #58a7fb;
  --csms-studio-bo-semantic-info-tertiary: #6db2fb;
  --csms-studio-bo-semantic-info-quaternary: #044890;
  --csms-studio-bo-semantic-info-quinary: #033973;
  --csms-studio-bo-semantic-info-senary: #022b57;
  --csms-studio-bo-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bo-semantic-info-40p: rgba(17, 129, 249, 0.4);
  --csms-studio-bo-semantic-posi-primary: #1ea465;
  --csms-studio-bo-semantic-posi-secondary: #29d886;
  --csms-studio-bo-semantic-posi-tertiary: #44dd95;
  --csms-studio-bo-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bo-semantic-warn-primary: #ffc107;
  --csms-studio-bo-semantic-noti-primary: #ffc107;
  --csms-studio-bo-semantic-prog-primary: #fd7e14;
  --csms-studio-bo-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-hierarchy-primary: #0b0c0d;
  --csms-studio-bg-hierarchy-primary-subtle: #1f2124;
  --csms-studio-bg-hierarchy-secondary: #212326;
  --csms-studio-bg-hierarchy-secondary-subtle: #232629;
  --csms-studio-bg-hierarchy-tertiary: #2c2f32;
  --csms-studio-bg-hierarchy-quaternary: #373b3f;
  --csms-studio-bg-hierarchy-quinary: #575e64;
  --csms-studio-bg-hierarchy-senary: #6d767e;
  --csms-studio-bg-hierarchy-senary-subtle: #899199;
  --csms-studio-bg-neutral-white: #000000;
  --csms-studio-bg-neutral-black: #ffffff;
  --csms-studio-bg-neutral-white-solid: #ffffff;
  --csms-studio-bg-neutral-black-solid: #000000;
  --csms-studio-bg-neutral-b6p-hovered: rgba(255, 255, 255, 0.06);
  --csms-studio-bg-neutral-b10p: rgba(255, 255, 255, 0.1);
  --csms-studio-bg-neutral-b15p: rgba(255, 255, 255, 0.15);
  --csms-studio-bg-neutral-b60p: rgba(255, 255, 255, 0.6);
  --csms-studio-bg-neutral-b80p: rgba(255, 255, 255, 0.8);
  --csms-studio-bg-neutral-w90p: rgba(0, 0, 0, 0.85);
  --csms-studio-bg-neutral-w50p: rgba(0, 0, 0, 0.5);
  --csms-studio-bg-neutral-w30p: rgba(0, 0, 0, 0.3);
  --csms-studio-bg-neutral-w20p: rgba(0, 0, 0, 0.2);
  --csms-studio-bg-neutral-w5p: rgba(0, 0, 0, 0.05);
  --csms-studio-bg-neutral-w1p: rgba(0, 0, 0, 0.01);
  --csms-studio-bg-coursemos-primary: #0075F8;
  --csms-studio-bg-coursemos-secondary: #1582FF;
  --csms-studio-bg-coursemos-tertiary: #2F90FF;
  --csms-studio-bg-coursemos-quaternary: #004696;
  --csms-studio-bg-coursemos-quinary: #002F64;
  --csms-studio-bg-coursemos-quinary-subtle: #001732;
  --csms-studio-bg-coursemos-senary: #00234B;
  --csms-studio-bg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bg-semantic-nega-primary: #f04438;
  --csms-studio-bg-semantic-nega-secondary: #e35f6d;
  --csms-studio-bg-semantic-nega-tertiary: #e6737f;
  --csms-studio-bg-semantic-nega-quaternary: #a5170c;
  --csms-studio-bg-semantic-nega-quinary: #6e0f08;
  --csms-studio-bg-semantic-nega-senary: #530b06;
  --csms-studio-bg-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bg-semantic-info-primary: #1181f9;
  --csms-studio-bg-semantic-info-secondary: #6db2fb;
  --csms-studio-bg-semantic-info-tertiary: #82bdfc;
  --csms-studio-bg-semantic-info-quaternary: #044890;
  --csms-studio-bg-semantic-info-quinary: #022b57;
  --csms-studio-bg-semantic-info-senary: #011d3a;
  --csms-studio-bg-semantic-info-senary-subtle: #010e1d;
  --csms-studio-bg-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bg-semantic-posi-primary: #1ea465;
  --csms-studio-bg-semantic-posi-secondary: #29d886;
  --csms-studio-bg-semantic-posi-tertiary: #44dd95;
  --csms-studio-bg-semantic-posi-quaternary: #12623d;
  --csms-studio-bg-semantic-posi-quinary: #0c4229;
  --csms-studio-bg-semantic-posi-senary: #09311e;
  --csms-studio-bg-semantic-posi-30p: rgba(30, 164, 101, 0.3);
  --csms-studio-bg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-posi-50p: rgba(30, 164, 101, 0.5);
  --csms-studio-bg-semantic-warn-primary: #ffc107;
  --csms-studio-bg-semantic-warn-secondary: #ffcd37;
  --csms-studio-bg-semantic-warn-tertiary: #ffda69;
  --csms-studio-bg-semantic-warn-quaternary: #9c7500;
  --csms-studio-bg-semantic-warn-quinary: #684e00;
  --csms-studio-bg-semantic-warn-quinary-subtle: #826200;
  --csms-studio-bg-semantic-warn-senary: #4e3b00;
  --csms-studio-bg-semantic-prog-primary: #fd7e14;
  --csms-studio-bg-semantic-prog-secondary: #fc8342;
  --csms-studio-bg-semantic-prog-tertiary: #fc935a;
  --csms-studio-bg-semantic-prog-quaternary: #a03902;
  --csms-studio-bg-semantic-prog-quinary: #6a2602;
  --csms-studio-bg-semantic-prog-senary: #501d01;
  --csms-studio-bg-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-semantic-etc-secondary: #8c68ce;
  --csms-studio-bg-semantic-etc-tertiary: #9a7bd4;
  --csms-studio-bg-semantic-etc-quaternary: #422676;
  --csms-studio-bg-semantic-etc-quinary: #2c194f;
  --csms-studio-bg-semantic-etc-senary: #21133b;
  --csms-studio-fg-hierarchy-primary: #e0e3e5;
  --csms-studio-fg-hierarchy-secondary: #c4c8cc;
  --csms-studio-fg-hierarchy-tertiary: #899199;
  --csms-studio-fg-hierarchy-quaternary: #6d767e;
  --csms-studio-fg-hierarchy-quinary: #575e64;
  --csms-studio-fg-hierarchy-senary: #2c2f32;
  --csms-studio-fg-hierarchy-senary-subtle: #161819;
  --csms-studio-fg-neutral-white: #000000;
  --csms-studio-fg-neutral-black: #ffffff;
  --csms-studio-fg-neutral-white-solid: #ffffff;
  --csms-studio-fg-neutral-black-solid: #000000;
  --csms-studio-fg-neutral-w50p-solid: rgba(255, 255, 255, 0.5);
  --csms-studio-fg-neutral-w80p-solid: rgba(255, 255, 255, 0.8);
  --csms-studio-fg-coursemos-primary: #0075F8;
  --csms-studio-fg-coursemos-secondary: #2F90FF;
  --csms-studio-fg-coursemos-tertiary: #499EFF;
  --csms-studio-fg-coursemos-quaternary: #005DC8;
  --csms-studio-fg-coursemos-quinary: #002F64;
  --csms-studio-fg-coursemos-senary: #00234B;
  --csms-studio-fg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-fg-coursemos-primary-50p: rgba(0, 117, 248, 0.5);
  --csms-studio-fg-semantic-nega: #f04438;
  --csms-studio-fg-semantic-nega-quinary: #8a130a;
  --csms-studio-fg-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-warn-primary: #ffc107;
  --csms-studio-fg-semantic-warn-senary: #9c7500;
  --csms-studio-fg-semantic-posi: #1ea465;
  --csms-studio-fg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-fg-semantic-info: #1181f9;
  --csms-studio-fg-semantic-prog: #fd7e14;
  --csms-studio-fg-semantic-etc: #6f42c1;
  --csms-studio-ut-school-primary: #0075F8;
  --csms-studio-ut-school-secondary: #005DC8;
}

[data-bs-theme=dark-red] {
  --bs-body-bg: var(--csms-studio-bg-hierarchy-primary);
  --bs-body-color: #adb5bd;
  --bs-body-color-rgb: 173, 181, 189;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(255, 255, 255, 0.75);
  --bs-secondary-color-rgb: 255, 255, 255;
  --bs-secondary-bg: rgba(255, 255, 255, 0.15);
  --bs-secondary-bg-rgb: 255, 255, 255;
  --bs-tertiary-color: rgba(255, 255, 255, 0.5);
  --bs-tertiary-color-rgb: 255, 255, 255;
  --bs-tertiary-bg: rgba(255, 255, 255, 0.1);
  --bs-tertiary-bg-rgb: 255, 255, 255;
  --bs-heading-color: #fff;
  --bs-link-color: #86b7fe;
  --bs-link-hover-color: #9ec5fe;
  --bs-link-color-rgb: 134, 183, 254;
  --bs-link-hover-color-rgb: 158, 197, 254;
  --bs-code-color: #e685b5;
  --bs-highlight-color: #fff;
  --bs-highlight-bg: #664d03;
  --bs-border-color: rgba(255, 255, 255, 0.2);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-primary {
  color: #e0e3e5;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-secondary {
  color: #c4c8cc;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-tertiary {
  color: #899199;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-quaternary {
  color: #6d767e;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-quinary {
  color: #575e64;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-senary {
  color: #41474b;
}
[data-bs-theme=dark-red] .csms-studio-tx-hierarchy-senary-subtle {
  color: #2c2f32;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-white {
  color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-black {
  color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-black-solid {
  color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-white-solid {
  color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-b20p-disabled {
  color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark-red] .csms-studio-tx-neutral-w80p-disabled {
  color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-primary {
  color: #ed9ba4;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-secondary {
  color: #f1afb6;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-tertiary {
  color: #f4c3c8;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-quaternary {
  color: #6e0f08;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-quinary {
  color: #370804;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-senary {
  color: #290603;
}
[data-bs-theme=dark-red] .csms-studio-tx-coursemos-primary-30p {
  color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-primary {
  color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-secondary {
  color: #e35f6d;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-tertiary {
  color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-quaternary {
  color: #c11a0e;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-quinary {
  color: #8a130a;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-nega-senary {
  color: #530b06;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-primary {
  color: #439cfa;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-secondary {
  color: #58a7fb;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-tertiary {
  color: #6db2fb;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-quaternary {
  color: #044890;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-quinary {
  color: #033973;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-info-senary {
  color: #022b57;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-primary {
  color: #1ea465;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-secondary {
  color: #29d886;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-tertiary {
  color: #44dd95;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-quaternary {
  color: #157347;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-quinary {
  color: #0f5233;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-posi-senary {
  color: #09311e;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-noti-primary {
  color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-prog-primary {
  color: #fd7e14;
}
[data-bs-theme=dark-red] .csms-studio-tx-semantic-etc-primary {
  color: #6f42c1;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-primary {
  border-color: #1f2124;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-secondary {
  border-color: #2c2f32;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-tertiary {
  border-color: #373b3f;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-quaternary {
  border-color: #41474b;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-quaternary-subtle {
  border-color: #6d767e;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-quinary {
  border-color: #a7adb2;
}
[data-bs-theme=dark-red] .csms-studio-bo-hierarchy-senary {
  border-color: #e0e3e5;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-white {
  border-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-black {
  border-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-white-solid {
  border-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-black-solid {
  border-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-bo-neutral-b30p {
  border-color: rgba(255, 255, 255, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-primary {
  border-color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-secondary {
  border-color: #ea8791;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-tertiary {
  border-color: #ed9ba4;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-quaternary {
  border-color: #6e0f08;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-quinary {
  border-color: #370804;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-senary {
  border-color: #290603;
}
[data-bs-theme=dark-red] .csms-studio-bo-coursemos-primary-30p {
  border-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-primary {
  border-color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-secondary {
  border-color: #e35f6d;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-tertiary {
  border-color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-30p {
  border-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-nega-40p {
  border-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-primary {
  border-color: #439cfa;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-secondary {
  border-color: #58a7fb;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-tertiary {
  border-color: #6db2fb;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-quaternary {
  border-color: #044890;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-quinary {
  border-color: #033973;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-senary {
  border-color: #022b57;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-30p {
  border-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-info-40p {
  border-color: rgba(17, 129, 249, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-posi-primary {
  border-color: #1ea465;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-posi-secondary {
  border-color: #29d886;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-posi-tertiary {
  border-color: #44dd95;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-posi-40p {
  border-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-warn-primary {
  border-color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-noti-primary {
  border-color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-prog-primary {
  border-color: #fd7e14;
}
[data-bs-theme=dark-red] .csms-studio-bo-semantic-etc-primary {
  border-color: #6f42c1;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-primary {
  background-color: #0b0c0d;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-primary-subtle {
  background-color: #1f2124;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-secondary {
  background-color: #212326;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-secondary-subtle {
  background-color: #232629;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-tertiary {
  background-color: #2c2f32;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-quaternary {
  background-color: #373b3f;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-quinary {
  background-color: #575e64;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-senary {
  background-color: #6d767e;
}
[data-bs-theme=dark-red] .csms-studio-bg-hierarchy-senary-subtle {
  background-color: #899199;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-white {
  background-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-black {
  background-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b6p-hovered {
  background-color: rgba(255, 255, 255, 0.06);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b10p {
  background-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b15p {
  background-color: rgba(255, 255, 255, 0.15);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b60p {
  background-color: rgba(255, 255, 255, 0.6);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-b80p {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w90p {
  background-color: rgba(0, 0, 0, 0.85);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w50p {
  background-color: rgba(0, 0, 0, 0.5);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w30p {
  background-color: rgba(0, 0, 0, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w20p {
  background-color: rgba(0, 0, 0, 0.2);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w5p {
  background-color: rgba(0, 0, 0, 0.05);
}
[data-bs-theme=dark-red] .csms-studio-bg-neutral-w1p {
  background-color: rgba(0, 0, 0, 0.01);
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-primary {
  background-color: #0075F8;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-secondary {
  background-color: #1582FF;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-tertiary {
  background-color: #2F90FF;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-quaternary {
  background-color: #004696;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-quinary {
  background-color: #002F64;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-quinary-subtle {
  background-color: #001732;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-senary {
  background-color: #00234B;
}
[data-bs-theme=dark-red] .csms-studio-bg-coursemos-primary-30p {
  background-color: rgba(0, 117, 248, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-primary {
  background-color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-secondary {
  background-color: #e35f6d;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-tertiary {
  background-color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-quaternary {
  background-color: #a5170c;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-quinary {
  background-color: #6e0f08;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-senary {
  background-color: #530b06;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-nega-30p {
  background-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-primary {
  background-color: #2e91fa;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-tertiary {
  background-color: #82bdfc;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-quaternary {
  background-color: #033973;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-quinary {
  background-color: #022b57;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-senary {
  background-color: #011d3a;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-senary-subtle {
  background-color: #010e1d;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-info-30p {
  background-color: rgba(17, 129, 249, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-primary {
  background-color: #1ea465;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-secondary {
  background-color: #29d886;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-tertiary {
  background-color: #44dd95;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-quaternary {
  background-color: #12623d;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-quinary {
  background-color: #0c4229;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-senary {
  background-color: #09311e;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-30p {
  background-color: rgba(30, 164, 101, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-posi-50p {
  background-color: rgba(30, 164, 101, 0.5);
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-secondary {
  background-color: #ffcd37;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-tertiary {
  background-color: #ffda69;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-quaternary {
  background-color: #9c7500;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-quinary {
  background-color: #684e00;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-warn-senary {
  background-color: #4e3b00;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-primary {
  background-color: #fd7e14;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-secondary {
  background-color: #fc8342;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-tertiary {
  background-color: #fc935a;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-quaternary {
  background-color: #a03902;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-quinary {
  background-color: #6a2602;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-prog-senary {
  background-color: #501d01;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-primary {
  background-color: #6f42c1;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-secondary {
  background-color: #8c68ce;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-tertiary {
  background-color: #9a7bd4;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-quaternary {
  background-color: #422676;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-quinary {
  background-color: #2c194f;
}
[data-bs-theme=dark-red] .csms-studio-bg-semantic-etc-senary {
  background-color: #21133b;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-primary {
  background-color: #e0e3e5;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-secondary {
  background-color: #c4c8cc;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-tertiary {
  background-color: #899199;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-quaternary {
  background-color: #6d767e;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-quinary {
  background-color: #575e64;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-senary {
  background-color: #2c2f32;
}
[data-bs-theme=dark-red] .csms-studio-fg-hierarchy-senary-subtle {
  background-color: #161819;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-white {
  background-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-black {
  background-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-white-solid {
  background-color: #ffffff;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-black-solid {
  background-color: #000000;
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-w50p-solid {
  background-color: rgba(255, 255, 255, 0.5);
}
[data-bs-theme=dark-red] .csms-studio-fg-neutral-w80p-solid {
  background-color: rgba(255, 255, 255, 0.8);
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-primary {
  background-color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-secondary {
  background-color: #e35f6d;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-tertiary {
  background-color: #e6737f;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-quaternary {
  background-color: #dc1e11;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-quinary {
  background-color: #6e0f08;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-senary {
  background-color: #530b06;
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-primary-30p {
  background-color: rgba(220, 30, 17, 0.3);
}
[data-bs-theme=dark-red] .csms-studio-fg-coursemos-primary-50p {
  background-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-nega {
  background-color: #f04438;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-nega-quinary {
  background-color: #8a130a;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-nega-40p {
  background-color: rgba(220, 30, 17, 0.4);
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-warn-primary {
  background-color: #ffc107;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-warn-senary {
  background-color: #9c7500;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-posi {
  background-color: #1ea465;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-posi-40p {
  background-color: rgba(30, 164, 101, 0.6);
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-info {
  background-color: #1181f9;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-prog {
  background-color: #fd7e14;
}
[data-bs-theme=dark-red] .csms-studio-fg-semantic-etc {
  background-color: #6f42c1;
}
[data-bs-theme=dark-red] .csms-studio-ut-school-primary {
  background-color: #a5170c;
}
[data-bs-theme=dark-red] .csms-studio-ut-school-secondary {
  background-color: #a5170c;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-gray-primary {
  background-color: #a7adb2;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-gray-secondary {
  background-color: #eeeff0;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-primary {
  background-color: #0673e7;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-secondary {
  background-color: #6db2fb;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-tertiary {
  background-color: #7DBAFF;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-quaternary {
  background-color: #CBE3FF;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-blue-quinary {
  background-color: #D9EAFF;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-green-primary {
  background-color: #57ae00;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-green-secondary {
  background-color: #cbea00;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-green-quaternary {
  background-color: #d7f0ac;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-violet-primary {
  background-color: #7d55c8;
}
[data-bs-theme=dark-red] .csms-studio-ut-graph-yellow-secondary {
  background-color: #ffe082;
}
[data-bs-theme=dark-red] {
  --csms-studio-tx-hierarchy-primary: #e0e3e5;
  --csms-studio-tx-hierarchy-secondary: #c4c8cc;
  --csms-studio-tx-hierarchy-tertiary: #899199;
  --csms-studio-tx-hierarchy-quaternary: #6d767e;
  --csms-studio-tx-hierarchy-quinary: #575e64;
  --csms-studio-tx-hierarchy-senary: #41474b;
  --csms-studio-tx-hierarchy-senary-subtle: #2c2f32;
  --csms-studio-tx-neutral-white: #000000;
  --csms-studio-tx-neutral-black: #ffffff;
  --csms-studio-tx-neutral-black-solid: #000000;
  --csms-studio-tx-neutral-white-solid: #ffffff;
  --csms-studio-tx-neutral-b20p-disabled: rgba(255, 255, 255, 0.2);
  --csms-studio-tx-neutral-w80p-disabled: rgba(255, 255, 255, 0.2);
  --csms-studio-tx-coursemos-primary: #ed9ba4;
  --csms-studio-tx-coursemos-secondary: #f1afb6;
  --csms-studio-tx-coursemos-tertiary: #f4c3c8;
  --csms-studio-tx-coursemos-quaternary: #6e0f08;
  --csms-studio-tx-coursemos-quinary: #370804;
  --csms-studio-tx-coursemos-senary: #290603;
  --csms-studio-tx-coursemos-primary-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-tx-semantic-nega-primary: #f04438;
  --csms-studio-tx-semantic-nega-secondary: #e35f6d;
  --csms-studio-tx-semantic-nega-tertiary: #e6737f;
  --csms-studio-tx-semantic-nega-quaternary: #c11a0e;
  --csms-studio-tx-semantic-nega-quinary: #8a130a;
  --csms-studio-tx-semantic-nega-senary: #530b06;
  --csms-studio-tx-semantic-info-primary: #439cfa;
  --csms-studio-tx-semantic-info-secondary: #58a7fb;
  --csms-studio-tx-semantic-info-tertiary: #6db2fb;
  --csms-studio-tx-semantic-info-quaternary: #044890;
  --csms-studio-tx-semantic-info-quinary: #033973;
  --csms-studio-tx-semantic-info-senary: #022b57;
  --csms-studio-tx-semantic-posi-primary: #1ea465;
  --csms-studio-tx-semantic-posi-secondary: #29d886;
  --csms-studio-tx-semantic-posi-tertiary: #44dd95;
  --csms-studio-tx-semantic-posi-quaternary: #157347;
  --csms-studio-tx-semantic-posi-quinary: #0f5233;
  --csms-studio-tx-semantic-posi-senary: #09311e;
  --csms-studio-tx-semantic-noti-primary: #ffc107;
  --csms-studio-tx-semantic-prog-primary: #fd7e14;
  --csms-studio-tx-semantic-etc-primary: #6f42c1;
  --csms-studio-bo-hierarchy-primary: #1f2124;
  --csms-studio-bo-hierarchy-secondary: #2c2f32;
  --csms-studio-bo-hierarchy-tertiary: #373b3f;
  --csms-studio-bo-hierarchy-quaternary: #41474b;
  --csms-studio-bo-hierarchy-quaternary-subtle: #6d767e;
  --csms-studio-bo-hierarchy-quinary: #a7adb2;
  --csms-studio-bo-hierarchy-senary: #e0e3e5;
  --csms-studio-bo-neutral-white: #000000;
  --csms-studio-bo-neutral-black: #ffffff;
  --csms-studio-bo-neutral-white-solid: #ffffff;
  --csms-studio-bo-neutral-black-solid: #000000;
  --csms-studio-bo-neutral-b30p: rgba(255, 255, 255, 0.3);
  --csms-studio-bo-coursemos-primary: #e6737f;
  --csms-studio-bo-coursemos-secondary: #ea8791;
  --csms-studio-bo-coursemos-tertiary: #ed9ba4;
  --csms-studio-bo-coursemos-quaternary: #6e0f08;
  --csms-studio-bo-coursemos-quinary: #370804;
  --csms-studio-bo-coursemos-senary: #290603;
  --csms-studio-bo-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bo-semantic-nega-primary: #f04438;
  --csms-studio-bo-semantic-nega-secondary: #e35f6d;
  --csms-studio-bo-semantic-nega-tertiary: #e6737f;
  --csms-studio-bo-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bo-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-bo-semantic-info-primary: #439cfa;
  --csms-studio-bo-semantic-info-secondary: #58a7fb;
  --csms-studio-bo-semantic-info-tertiary: #6db2fb;
  --csms-studio-bo-semantic-info-quaternary: #044890;
  --csms-studio-bo-semantic-info-quinary: #033973;
  --csms-studio-bo-semantic-info-senary: #022b57;
  --csms-studio-bo-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bo-semantic-info-40p: rgba(17, 129, 249, 0.4);
  --csms-studio-bo-semantic-posi-primary: #1ea465;
  --csms-studio-bo-semantic-posi-secondary: #29d886;
  --csms-studio-bo-semantic-posi-tertiary: #44dd95;
  --csms-studio-bo-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bo-semantic-warn-primary: #ffc107;
  --csms-studio-bo-semantic-noti-primary: #ffc107;
  --csms-studio-bo-semantic-prog-primary: #fd7e14;
  --csms-studio-bo-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-hierarchy-primary: #0b0c0d;
  --csms-studio-bg-hierarchy-primary-subtle: #1f2124;
  --csms-studio-bg-hierarchy-secondary: #212326;
  --csms-studio-bg-hierarchy-secondary-subtle: #232629;
  --csms-studio-bg-hierarchy-tertiary: #2c2f32;
  --csms-studio-bg-hierarchy-quaternary: #373b3f;
  --csms-studio-bg-hierarchy-quinary: #575e64;
  --csms-studio-bg-hierarchy-senary: #6d767e;
  --csms-studio-bg-hierarchy-senary-subtle: #899199;
  --csms-studio-bg-neutral-white: #000000;
  --csms-studio-bg-neutral-black: #ffffff;
  --csms-studio-bg-neutral-white-solid: #ffffff;
  --csms-studio-bg-neutral-black-solid: #000000;
  --csms-studio-bg-neutral-b6p-hovered: rgba(255, 255, 255, 0.06);
  --csms-studio-bg-neutral-b10p: rgba(255, 255, 255, 0.1);
  --csms-studio-bg-neutral-b15p: rgba(255, 255, 255, 0.15);
  --csms-studio-bg-neutral-b60p: rgba(255, 255, 255, 0.6);
  --csms-studio-bg-neutral-b80p: rgba(255, 255, 255, 0.8);
  --csms-studio-bg-neutral-w90p: rgba(0, 0, 0, 0.85);
  --csms-studio-bg-neutral-w50p: rgba(0, 0, 0, 0.5);
  --csms-studio-bg-neutral-w30p: rgba(0, 0, 0, 0.3);
  --csms-studio-bg-neutral-w20p: rgba(0, 0, 0, 0.2);
  --csms-studio-bg-neutral-w5p: rgba(0, 0, 0, 0.05);
  --csms-studio-bg-neutral-w1p: rgba(0, 0, 0, 0.01);
  --csms-studio-bg-coursemos-primary: #0075F8;
  --csms-studio-bg-coursemos-secondary: #1582FF;
  --csms-studio-bg-coursemos-tertiary: #2F90FF;
  --csms-studio-bg-coursemos-quaternary: #004696;
  --csms-studio-bg-coursemos-quinary: #002F64;
  --csms-studio-bg-coursemos-quinary-subtle: #001732;
  --csms-studio-bg-coursemos-senary: #00234B;
  --csms-studio-bg-coursemos-primary-30p: rgba(0, 117, 248, 0.3);
  --csms-studio-bg-semantic-nega-primary: #f04438;
  --csms-studio-bg-semantic-nega-secondary: #e35f6d;
  --csms-studio-bg-semantic-nega-tertiary: #e6737f;
  --csms-studio-bg-semantic-nega-quaternary: #a5170c;
  --csms-studio-bg-semantic-nega-quinary: #6e0f08;
  --csms-studio-bg-semantic-nega-senary: #530b06;
  --csms-studio-bg-semantic-nega-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-bg-semantic-info-primary: #2e91fa;
  --csms-studio-bg-semantic-info-secondary: #6db2fb;
  --csms-studio-bg-semantic-info-tertiary: #82bdfc;
  --csms-studio-bg-semantic-info-quaternary: #033973;
  --csms-studio-bg-semantic-info-quinary: #022b57;
  --csms-studio-bg-semantic-info-senary: #011d3a;
  --csms-studio-bg-semantic-info-senary-subtle: #010e1d;
  --csms-studio-bg-semantic-info-30p: rgba(17, 129, 249, 0.3);
  --csms-studio-bg-semantic-posi-primary: #1ea465;
  --csms-studio-bg-semantic-posi-secondary: #29d886;
  --csms-studio-bg-semantic-posi-tertiary: #44dd95;
  --csms-studio-bg-semantic-posi-quaternary: #12623d;
  --csms-studio-bg-semantic-posi-quinary: #0c4229;
  --csms-studio-bg-semantic-posi-senary: #09311e;
  --csms-studio-bg-semantic-posi-30p: rgba(30, 164, 101, 0.3);
  --csms-studio-bg-semantic-posi-40p: rgba(30, 164, 101, 0.4);
  --csms-studio-bg-semantic-posi-50p: rgba(30, 164, 101, 0.5);
  --csms-studio-bg-semantic-warn-primary: #ffc107;
  --csms-studio-bg-semantic-warn-secondary: #ffcd37;
  --csms-studio-bg-semantic-warn-tertiary: #ffda69;
  --csms-studio-bg-semantic-warn-quaternary: #9c7500;
  --csms-studio-bg-semantic-warn-quinary: #684e00;
  --csms-studio-bg-semantic-warn-senary: #4e3b00;
  --csms-studio-bg-semantic-prog-primary: #fd7e14;
  --csms-studio-bg-semantic-prog-secondary: #fc8342;
  --csms-studio-bg-semantic-prog-tertiary: #fc935a;
  --csms-studio-bg-semantic-prog-quaternary: #a03902;
  --csms-studio-bg-semantic-prog-quinary: #6a2602;
  --csms-studio-bg-semantic-prog-senary: #501d01;
  --csms-studio-bg-semantic-etc-primary: #6f42c1;
  --csms-studio-bg-semantic-etc-secondary: #8c68ce;
  --csms-studio-bg-semantic-etc-tertiary: #9a7bd4;
  --csms-studio-bg-semantic-etc-quaternary: #422676;
  --csms-studio-bg-semantic-etc-quinary: #2c194f;
  --csms-studio-bg-semantic-etc-senary: #21133b;
  --csms-studio-fg-hierarchy-primary: #e0e3e5;
  --csms-studio-fg-hierarchy-secondary: #c4c8cc;
  --csms-studio-fg-hierarchy-tertiary: #899199;
  --csms-studio-fg-hierarchy-quaternary: #6d767e;
  --csms-studio-fg-hierarchy-quinary: #575e64;
  --csms-studio-fg-hierarchy-senary: #2c2f32;
  --csms-studio-fg-hierarchy-senary-subtle: #161819;
  --csms-studio-fg-neutral-white: #000000;
  --csms-studio-fg-neutral-black: #ffffff;
  --csms-studio-fg-neutral-white-solid: #ffffff;
  --csms-studio-fg-neutral-black-solid: #000000;
  --csms-studio-fg-neutral-w50p-solid: rgba(255, 255, 255, 0.5);
  --csms-studio-fg-neutral-w80p-solid: rgba(255, 255, 255, 0.8);
  --csms-studio-fg-coursemos-primary: #f04438;
  --csms-studio-fg-coursemos-secondary: #e35f6d;
  --csms-studio-fg-coursemos-tertiary: #e6737f;
  --csms-studio-fg-coursemos-quaternary: #dc1e11;
  --csms-studio-fg-coursemos-quinary: #6e0f08;
  --csms-studio-fg-coursemos-senary: #530b06;
  --csms-studio-fg-coursemos-primary-30p: rgba(220, 30, 17, 0.3);
  --csms-studio-fg-coursemos-primary-50p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-nega: #f04438;
  --csms-studio-fg-semantic-nega-quinary: #8a130a;
  --csms-studio-fg-semantic-nega-40p: rgba(220, 30, 17, 0.4);
  --csms-studio-fg-semantic-warn-primary: #ffc107;
  --csms-studio-fg-semantic-warn-senary: #9c7500;
  --csms-studio-fg-semantic-posi: #1ea465;
  --csms-studio-fg-semantic-posi-40p: rgba(30, 164, 101, 0.6);
  --csms-studio-fg-semantic-info: #1181f9;
  --csms-studio-fg-semantic-prog: #fd7e14;
  --csms-studio-fg-semantic-etc: #6f42c1;
  --csms-studio-ut-school-primary: #a5170c;
  --csms-studio-ut-school-secondary: #a5170c;
}

/**
 * 작업시 유의 사항
 * Figma에서 2xlg 같이 이름을 지정한 경우 xxlg로 치환을 시켜서 사용해야 합니다.
 * 이유는 class 이름 규칙에 숫자로 시작되면 안되도록 되어 있습니다.
 */
.btn-noborder {
  border: 0;
  background: transparent;
}

.row .col-form-check,
.row .col-form-label {
  text-align: right;
  font-weight: 700;
}
@media (max-width: 575.98px) {
  .row .col-form-check,
  .row .col-form-label {
    text-align: left;
  }
}

.row-csms {
  margin-bottom: 8px;
}
.row-csms:last-child {
  margin-bottom: 0;
}
.row-csms .col-form-label {
  text-align: left;
  --csms-studio-label-font-size: 13px;
  --csms-studio-label-font-weight: 500;
  /* 피그마 화면상에서 PC/Mobile 분리할려고 하는것 같은데
   * 아직 정확하게 알수 없는 관계로 샘플 코드만 남겨놓습니다.
  @include media-breakpoint-down($csms-studio-text-breakpoint) {
      font-size: 20px;
  }
  */
  font-size: var(--csms-studio-label-font-size);
  font-weight: var(--csms-studio-label-font-weight);
  line-height: 20px;
  letter-spacing: calc(var(--csms-studio-label-font-size) * -0.005);
  color: var(--csms-studio-tx-hierarchy-quaternary);
}

.form-switch.form-switch-right {
  padding-left: 0;
}
.form-switch.form-switch-right .form-check-input {
  margin-left: 0;
  float: right;
}
.form-switch.form-switch-right .form-check-label {
  margin-right: 0.5em;
}

.badge.badge-sm {
  padding: 0.35em 0.45em;
}

.text-bg-default {
  background-color: transparent;
  color: var(--bs-body-color);
}

.cursor-move {
  cursor: move;
}

.bd-mode-toggle {
  z-index: 9999;
}
.bd-mode-toggle .btn-bd-primary {
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #6528e0;
  --bs-btn-hover-border-color: #6528e0;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #5a23c8;
  --bs-btn-active-border-color: #5a23c8;
}
.bd-mode-toggle .btn-bd-primary .bi {
  vertical-align: -0.125em;
  fill: currentColor;
}

/*
.form-check {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: inherit;
    margin-bottom: 0;
    padding-left: 24px;

    .form-check-input {
        width: 24px;
        height: 24px;
        margin-top: 0;
        vertical-align: middle;
    }

    .form-check-label {
        font-weight: $font-weight-medium;
        font-size: 14px;
        line-height: 150%;
    }
}
*/
.visibility-hidden {
  visibility: hidden;
}

#csms-studio .fl {
  float: left;
}
#csms-studio .fr {
  float: right;
}
#csms-studio .cr {
  clear: both;
}
#csms-studio .mr-1 {
  margin-right: 4px;
}
#csms-studio .mr-2 {
  margin-right: 8px;
}
#csms-studio .mr-3 {
  margin-right: 12px;
}
#csms-studio .mr-4 {
  margin-right: 16px;
}
#csms-studio .mr-5 {
  margin-right: 20px;
}
#csms-studio .ml-1 {
  margin-left: 4px;
}
#csms-studio .ml-2 {
  margin-left: 8px;
}
#csms-studio .ml-3 {
  margin-left: 12px;
}
#csms-studio .ml-4 {
  margin-left: 16px;
}
#csms-studio .ml-5 {
  margin-left: 20px;
}
#csms-studio .pl-1 {
  padding-left: 4px;
}
#csms-studio .pl-2 {
  padding-left: 8px;
}
#csms-studio .pl-3 {
  padding-left: 12px;
}
#csms-studio .pl-4 {
  padding-left: 16px;
}
#csms-studio .pl-5 {
  padding-left: 20px;
}
#csms-studio .pr-1 {
  padding-right: 4px;
}
#csms-studio .pr-2 {
  padding-right: 8px;
}
#csms-studio .pr-3 {
  padding-right: 12px;
}
#csms-studio .pr-4 {
  padding-right: 16px;
}
#csms-studio .pr-5 {
  padding-right: 20px;
}
#csms-studio .pt-1 {
  padding-top: 4px;
}
#csms-studio .pt-2 {
  padding-top: 8px;
}
#csms-studio .pt-3 {
  padding-top: 12px;
}
#csms-studio .pt-4 {
  padding-top: 16px;
}
#csms-studio .pt-5 {
  padding-top: 20px;
}
#csms-studio .pb-1 {
  padding-bottom: 4px;
}
#csms-studio .pb-2 {
  padding-bottom: 8px;
}
#csms-studio .pb-3 {
  padding-bottom: 12px;
}
#csms-studio .pb-4 {
  padding-bottom: 16px;
}
#csms-studio .pb-5 {
  padding-bottom: 20px;
}
#csms-studio .fs-0 {
  font-size: 14px;
}
#csms-studio .fs-1 {
  font-size: 16px;
}
#csms-studio .fs-2 {
  font-size: 20px;
}
#csms-studio .fs-3 {
  font-size: 24px;
}
#csms-studio .fs-4 {
  font-size: 28px;
}
#csms-studio .fs-5 {
  font-size: 32px;
}
#csms-studio .fw-bold {
  font-weight: bold;
}
#csms-studio .text-align-right {
  text-align: right;
}
#csms-studio .text-align-left {
  text-align: left;
}
#csms-studio .text-align-center {
  text-align: center;
}
#csms-studio .btn-border-1 {
  border-radius: 4px;
}
#csms-studio .btn-border-2 {
  border-radius: 8px;
}
#csms-studio .cursor-pointer {
  cursor: pointer;
}

* {
  font-family: Pretendard, NanumSquare, sans-serif;
}

body {
  height: 100vh;
  font-family: Pretendard, NanumSquare, sans-serif;
}

.csms-studio-custom-tooltip {
  border-radius: 4px !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 1px 1px 0 rgba(10, 13, 18, 0.15) !important;
}

#csms-studio .MuiButtonBase-root.MuiTab-root,
#csms-studio [class*=MuiButtonBase-root-MuiTab-root],
.csmsmedia-studio-modal-content .MuiButtonBase-root.MuiTab-root,
.csmsmedia-studio-modal-content [class*=MuiButtonBase-root-MuiTab-root] {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  background-color: transparent;
  outline: 0;
  border: 0;
  margin: 0;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  text-decoration: none;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  min-width: auto;
  min-height: auto;
}
#csms-studio .MuiTableCell-root,
#csms-studio [class*=MuiTableCell-root],
.csmsmedia-studio-modal-content .MuiTableCell-root,
.csmsmedia-studio-modal-content [class*=MuiTableCell-root] {
  all: unset;
  box-sizing: border-box;
  display: table-cell;
  vertical-align: inherit;
  border-bottom: 1px solid rgb(224, 224, 224);
  text-align: left;
  padding: 16px;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}
#csms-studio main,
.csmsmedia-studio-modal-content main {
  width: 100%;
  height: 100%;
  transition: width 0.3s ease-in-out;
}
#csms-studio .ml-auto,
.csmsmedia-studio-modal-content .ml-auto {
  margin-left: auto;
}
#csms-studio .mr-auto,
.csmsmedia-studio-modal-content .mr-auto {
  margin-right: auto;
}
#csms-studio .btn,
.csmsmedia-studio-modal-content .btn {
  border: 0px !important;
}
#csms-studio .fl,
.csmsmedia-studio-modal-content .fl {
  float: left;
}
#csms-studio .fr,
.csmsmedia-studio-modal-content .fr {
  float: right;
}
#csms-studio .btn-custom-outline-secondary,
.csmsmedia-studio-modal-content .btn-custom-outline-secondary {
  color: white !important;
  border-color: white;
}
#csms-studio .btn-custom-outline-secondary:hover,
.csmsmedia-studio-modal-content .btn-custom-outline-secondary:hover {
  color: black !important;
  background-color: white;
  border-color: white;
}
#csms-studio #app,
.csmsmedia-studio-modal-content #app {
  height: 100%;
}
#csms-studio .container-app,
.csmsmedia-studio-modal-content .container-app {
  background-color: #fff;
  display: flex;
  height: 100%;
}
#csms-studio input:-webkit-autofill,
.csmsmedia-studio-modal-content input:-webkit-autofill {
  -webkit-box-shadow: none !important;
  -webkit-text-fill-color: #5f5e5e !important;
  caret-color: #5f5e5e !important;
}
#csms-studio label.MuiFormLabel-root,
.csmsmedia-studio-modal-content label.MuiFormLabel-root {
  color: #988787 !important;
}
#csms-studio,
.csmsmedia-studio-modal-content {
  /* 컨테이너 공통 헤더 스타일 */
}
#csms-studio .header-container,
.csmsmedia-studio-modal-content .header-container {
  width: 100%;
  height: 100%;
  padding: 0px 15px 0px 40px;
  background-color: var(--header-bg);
  border-bottom: 1px solid #ddd;
  color: var(--theme-text-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#csms-studio .header-container-content,
.csmsmedia-studio-modal-content .header-container-content {
  display: flex;
  align-items: flex-end;
}
#csms-studio .header-container-buttons button,
.csmsmedia-studio-modal-content .header-container-buttons button {
  color: var(--theme-primary);
}
#csms-studio .header-container-title,
.csmsmedia-studio-modal-content .header-container-title {
  font-size: 20px;
  font-weight: bold;
  margin-right: 15px;
}
#csms-studio .header-container-title h5,
.csmsmedia-studio-modal-content .header-container-title h5 {
  line-height: normal;
  margin: 0;
}
#csms-studio .header-container-description,
.csmsmedia-studio-modal-content .header-container-description {
  font-size: 12px;
  color: #7a848d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  flex-grow: 1;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
#csms-studio .wrapper-content,
.csmsmedia-studio-modal-content .wrapper-content {
  width: 100%;
  height: calc(100% - 55px);
}
#csms-studio .wrapper-content #content-header,
.csmsmedia-studio-modal-content .wrapper-content #content-header {
  height: 60px;
}
#csms-studio .wrapper-content #content-header .btn-content-header,
.csmsmedia-studio-modal-content .wrapper-content #content-header .btn-content-header {
  padding: 17px 0px;
  min-width: 62px;
  color: var(--theme-text-color);
}
#csms-studio .wrapper-content #content-header .btn-content-header .icon-content-header,
.csmsmedia-studio-modal-content .wrapper-content #content-header .btn-content-header .icon-content-header {
  width: 25px;
  height: 25px;
}
#csms-studio .wrapper-content #content-header .btn-content-header--active,
.csmsmedia-studio-modal-content .wrapper-content #content-header .btn-content-header--active {
  background-color: transparent;
  color: var(--theme-primary);
}
#csms-studio .wrapper-content .wrapper-content-header,
.csmsmedia-studio-modal-content .wrapper-content .wrapper-content-header {
  width: 100%;
  height: 60px;
}
#csms-studio .wrapper-content .content-body,
.csmsmedia-studio-modal-content .wrapper-content .content-body {
  width: 100%;
  height: calc(100% - 60px);
}
#csms-studio .nav-breadcrumb-text--current,
.csmsmedia-studio-modal-content .nav-breadcrumb-text--current {
  font-size: 18px;
  float: left;
}
#csms-studio .nav-breadcrumb-link,
.csmsmedia-studio-modal-content .nav-breadcrumb-link {
  color: var(--bs-body-color);
  text-decoration: none;
  font-size: 18px;
  float: left;
}
#csms-studio .nav-breadcrumb-link:hover,
.csmsmedia-studio-modal-content .nav-breadcrumb-link:hover {
  text-decoration: underline;
  font-weight: 500;
}
#csms-studio .nav-breadcrumb-separator,
.csmsmedia-studio-modal-content .nav-breadcrumb-separator {
  font-size: 14px;
  padding: 2px 10px;
  float: left;
}
#csms-studio .editable-text,
.csmsmedia-studio-modal-content .editable-text {
  outline: 0px solid transparent;
}
#csms-studio .editable-text.error,
.csmsmedia-studio-modal-content .editable-text.error {
  border: 1px solid red !important;
  color: red !important;
}
#csms-studio .editable-text:empty:before,
.csmsmedia-studio-modal-content .editable-text:empty:before {
  content: attr(placeholder);
  display: block;
  color: #aaa;
}
#csms-studio button:focus,
.csmsmedia-studio-modal-content button:focus {
  outline: none !important;
}
#csms-studio button:focus:not(:active),
.csmsmedia-studio-modal-content button:focus:not(:active) {
  box-shadow: none;
}

@media (max-width: 600px) {
  #csms-studio .wrapper-content {
    height: calc(100% - 66px);
  }
}
#wrapper-left-sidebar {
  box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.1);
  background-color: var(--theme-primary);
  color: var(--theme-primary-text);
}
#wrapper-left-sidebar #wrapper-sidebar-menu {
  max-height: calc(100vh - 52px);
  overflow-y: auto;
}
#wrapper-left-sidebar .ps-menuitem-root .ps-menu-button:hover {
  background-color: var(--theme-secondary);
}
#wrapper-left-sidebar .ps-submenu-content {
  left: -5px !important;
}
#wrapper-left-sidebar .ps-submenu-content .ps-menu-button {
  background-color: var(--theme-secondary);
  color: var(--theme-primary-text);
}
#wrapper-left-sidebar .ps-submenu-content .ps-menu-button:hover {
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
}
#wrapper-left-sidebar .ps-menu-label {
  font-size: 14px;
}
#wrapper-left-sidebar .ps-sidebar-container {
  background-color: inherit !important;
}
#wrapper-left-sidebar.ps-collapsed .ps-submenu-expand-icon {
  display: none !important;
}
#wrapper-left-sidebar .left-sidebar-head {
  padding: 0px 0px;
  height: 55px;
  background-color: var(--left-sidebar-header-bg);
  color: var(--left-sidebar-header-color);
}
#wrapper-left-sidebar .left-sidebar-head .btn-ctr-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
@media (max-width: 600px) {
  #wrapper-left-sidebar .left-sidebar-head {
    height: 58px;
  }
}
#wrapper-left-sidebar .left-sidebar-head button {
  color: white;
  height: 35px;
  overflow: hidden;
}
#wrapper-left-sidebar .left-sidebar-head:hover {
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  /* // for IE8 */
  filter: alpha(opacity=80);
  /* //for IE5-7 */
}
#wrapper-left-sidebar .ps-menu-root {
  overflow-x: hidden;
}
#wrapper-left-sidebar .css-1umw9bq-MuiSvgIcon-root {
  font-size: 20px;
}
#wrapper-left-sidebar .ps-sidebar-root-test-id {
  border-right: 0px;
}

#csms-studio .wrapper-video .__dbk__container.Horizontal {
  padding-right: 0;
  height: 100%;
}
#csms-studio .wrapper-video .__dbk__gutter.Dark {
  background: #ddd;
  height: auto;
  padding: 0 1px;
}
#csms-studio .wrapper-video .__dbk__dragger.Horizontal {
  width: 3px;
}
#csms-studio .wrapper-video .__dbk__child-wrapper {
  height: 100%;
  overflow-y: auto;
}

/*# sourceMappingURL=csms-studio-beta.css.map*/