@font-face {
  font-family: 'Spectral';
  src: url('../font/Spectral/Spectral-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* REGULAR (400) */
@font-face {
  font-family: 'Spectral';
  src: url('../font/Spectral/Spectral-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* MEDIUM (500) */
@font-face {
  font-family: 'Spectral';
  src: url('../font/Spectral/Spectral-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spectral';
  src: url('../font/Spectral/Spectral-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* SEMIBOLD (600) */
@font-face {
  font-family: 'Spectral';
  src: url('../font/Spectral/Spectral-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* BOLD (700) */
@font-face {
  font-family: 'Spectral';
  src: url('../font/Spectral/Spectral-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ----- Montserrat ----- */
/* LIGHT MONTSERRAT (300) */
@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat/Montserrat-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* REGULAR MONTSERRAT (400) */
@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* MEDIUM MONTSERRAT (500) */
@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* SEMIBOLD MONTSERRAT (600) */
@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* BOLD MONTSERRAT (700) */
@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


:root {
	/* WARNA */
	--warna-primer: #717272; /* abu" */
	--warna-sekunder: #7A7369; /* coklat */
	/* --------------------- */
	--warna-aksen: #E8E3DC; /* cream */
	--warna-teks: #878787; /* dark" */
	--warna-latar: #ffffff; /* putih */
	--warna-batas: #BDBDBD; /* abu" muda */
  --warna-dark: #333333;
	
	/* FONT */
	--font-utama: 'Spectral', Helvetica, Arial, sans-serif;
	--font-sekunder: 'Montserrat', Helvetica, Arial, sans-serif;

	
	/* SPASI & UKURAN */
	--spasi-sm: 8px;
	--spasi-md: 16px;
	--spasi-lg: 24px;
	--radius-md: 8px;
  --mobile: 480px;
}
.font-primary {font-family: var(--font-utama);}
.font-secondary {font-family: var(--font-sekunder);}

/* RESET DASAR */
input,
select,
textarea {
  width: 100%;
  font-size: 1rem;
  padding: 7px 5px;
  height: 47px;
}

.judul {
  margin-bottom: 0;
  font-family: var(--font-utama);
}
.subjudul {
  font-family: var(--font-sekunder);
}

.number_circle {
  border: solid 2px var(--warna-sekunder);
  width: 1.5rem;
  height: 1.5rem;
  font-size: .7rem;
  font-weight: bold;
  color: var(--warna-sekunder);
  background-color: white;
  line-height: 20px;
  border-radius: 100%;
  @media (max-width: 480px) {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.number_circle_select {
  border-radius: 100%;
  border: solid 2px var(--warna-sekunder);
  width: 1.5rem;
  height: 1.5rem;
  font-size: .7rem;
  font-weight: bold;
  color: white;
  background-color: var(--warna-sekunder);
  line-height: 20px;
  @media (max-width: 480px) {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.number_line {
  background-image: linear-gradient(var(--warna-sekunder), var(--warna-sekunder));
  background-size: calc(100% - var(--spasi-md)) 3px;
  /* add your height of the line here*/
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /*place it in the middle */
}

.form-check-input:checked {
  background-color: var(--warna-sekunder) !important;
  border-color: var(--warna-sekunder) !important;
}

/* menghilangkan panah bawah pada list input */
input::-webkit-calendar-picker-indicator {
  opacity: 0;
}

.select2-container .select2-selection--single {
  height: 47px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 43px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 43px;
  right: 8px;
}

.select2-container--default .select2-selection--single {
  border: 1px solid var(--warna-sekunder);
  border-radius: 0;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 10px;
}

.select2-container--default .select2-results>.select2-results__options {
  /* max-height: unset; */
  max-height: 350px;
  border: 1px solid;
  margin-left: -1px;
  margin-right: -1px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--warna-aksen);
  color: #333;
}

.select2-dropdown {
  z-index: 1030;
  /* margin-top: 1px; */
}


.rowRoomDetail {
  display: flex;
}

.columnRoomImage {
  flex: 40%;
  padding: 5px;
  align-self: center;
}

.columnRoomDetail {
  flex: 60%;
  padding: 5px;
}

.inputReview {
  border: none !important;
  margin-top: -4px
}

#form-room select,
#form-room textarea,
#form-room input {
  padding: 10px !important;
  border: 1px solid var(--warna-sekunder);
  color: var(--warna-dark);
  font-family: var(--font-sekunder);
  font-weight: 400;
  font-size: 1rem;
  background-color: var(--warna-latar);
  outline: none !important;
}
#form-room button {
  padding: 15px !important;
  border: none;
  border: 1px solid var(--warna-sekunder);
  background-color: var(--warna-sekunder);
  color: var(--warna-latar);
  font-family: var(--font-sekunder);
  font-weight: 400;
  font-size: .7em;
  cursor: pointer;
  width: 100%;
  max-width: 200px;
  @media (max-width: 480px) {
    max-width: 480px;
  }
}
.px-1 .form-input {
  padding: 0;
  @media (max-width: 480px) {
    width: 100%;
  }
}
#flexCheckDefault {
  width: fit-content;
}

.col-md-6 {
  width: 48% !important;
  @media (max-width: 480px) {
    width: 100% !important;
  }
}

label,
div strong {
  font-family: var(--font-sekunder);
}
.flex-nowrap { flex-wrap: nowrap; }
/*.wrap-navigasi {}*/
.wrap-navigasi .col-md-2 {
  font-size: .5rem;
  @media (max-width: 480px) {
    width: 85px;
  }
}

.col-md-3 {
  @media (max-width: 480px) {
    width: 50%;
  }
}
.col-md-9 {
  @media (max-width: 480px) {
    width: 100%;
  }
}

.col-md-6.title-part {
  @media (max-width: 480px) {
    display: inline-block; 
    width: auto !important;
    padding-right: 10px;
  }
}

.col-md-6[align="right"] {
  @media (max-width: 480px) {
    float: right;
    display: inline-block;
    width: auto !important;
  }
}