/*=========== TABLE OF CONTENTS ===========
1. Button CSS
2. Input CSS
3. Switch CSS
4. Selectbox CSS
5. Text CSS
6. Heading CSS
7. Container CSS
==========================================*/

/*-------------------------------------
  1. Button CSS
--------------------------------------*/
.ui.button.round {
    border-radius: var(--radius-xs);
  }
  
  .ui.button.size-xs {
    height: 52px;
    padding-left: 22px;
    padding-right: 22px;
    font-size: 16px;
  }
  
  @media (max-width: 768px) {
    .ui.button.size-xs {
      height: 42px;
      padding-left: 16px;
      padding-right: 16px;
      font-size: 14px;
    }
  }
  
  .ui.button.fill.white_a700 {
    background-color: var(--white_a700);
    color: var(--black_900_01);
  }
  
  .ui.button {
    text-align: center;
    display: flex;
    cursor: pointer;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    color: var(--black_900_01);
    font-size: 16px;
    background-color: var(--white_a700);
    min-width: 264px;
    border-radius: var(--radius-xs);
  }
  
  @media (max-width: 768px) {
    .ui.button {
      min-width: 200px;
      font-size: 14px;
    }
  }
  
  /*-------------------------------------
    2. Input CSS
  --------------------------------------*/
  .ui.input.square {
    border-radius: 0px;
  }
  
  .ui.input.size-xs {
    height: 56px;
    padding-left: 22px;
    padding-right: 22px;
    font-size: 14px;
  }
  
  @media (max-width: 768px) {
    .ui.input.size-xs {
      height: 46px;
      padding-left: 16px;
      padding-right: 16px;
      font-size: 12px;
    }
  }
  
  .ui.input.fill.white_a700 {
    background-color: var(--white_a700);
    box-shadow: inset 0 -1px 1px 0 #31465a3f;
    color: var(--black_900_01);
  }
  
  .ui.input {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: text;
    color: var(--black_900_01);
    font-size: 14px;
    background-color: var(--white_a700);
    box-shadow: inset 0 -1px 1px 0 #31465a3f;
  }
  
  /*-------------------------------------
    3. Switch CSS
  --------------------------------------*/
  .ui.switch input[type="checkbox"] {
    width: 0;
    height: 0;
    visibility: hidden;
  }
  
  .ui.switch.square label {
    border-radius: 0px;
  }
  
  .ui.switch.size-xs label {
    height: 20px;
  }
  
  .ui.switch.swtoutlinegray600 input:checked + label {
    background-color: var(--white_a700);
    border-radius: var(--radius-lg);
    border: 2px solid var(--gray_600);
  }
  
  .ui.switch.swtoutlinegray600 label {
    background-color: var(--teal_50);
    display: block;
    position: relative;
    cursor: pointer;
    border-radius: var(--radius-lg);
    border: 2px solid var(--gray_600);
  }
  
  /*-------------------------------------
    4. Selectbox CSS
  --------------------------------------*/
  .ui.selectbox.square {
    border-radius: 0px;
  }
  
  .ui.selectbox.round {
    border-radius: var(--radius-xs);
  }
  
  .ui.selectbox.size-sm {
    height: 56px;
    padding-left: var(--space-xl);
    padding-right: var(--space-lg);
    font-size: 14px;
  }
  
  .ui.selectbox.size-xs {
    height: 32px;
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
    font-size: 14px;
  }
  
  @media (max-width: 768px) {
    .ui.selectbox.size-sm {
      height: 46px;
      font-size: 12px;
    }
  
    .ui.selectbox.size-xs {
      height: 28px;
      font-size: 12px;
    }
  }
  
  .ui.selectbox.fill.white_a700 {
    background-color: var(--white_a700);
    box-shadow: inset 0 -1px 1px 0 #31465a3f;
    color: var(--black_900_01);
  }
  
  .ui.selectbox.outline.black_900_7f {
    color: var(--black_900_01);
    border: 1px solid var(--black_900_7f);
  }
  
  .ui.selectbox {
    display: flex;
  }
  
  /*-------------------------------------
    5. Text CSS
  --------------------------------------*/
  .ui.text.size-textxs {
    font-size: 14px;
    font-weight: 400;
  }
  
  @media (max-width: 768px) {
    .ui.text.size-textxs {
      font-size: 12px;
    }
  }
  
  .ui.text.size-texts {
    font-size: 16px;
    font-weight: 400;
  }
  
  @media (max-width: 768px) {
    .ui.text.size-texts {
      font-size: 14px;
    }
  }
  
  .ui.text.size-textmd {
    font-size: 18px;
    font-weight: 400;
  }
  
  @media (max-width: 768px) {
    .ui.text.size-textmd {
      font-size: 16px;
    }
  }
  
  .ui.text.size-textlg {
    font-size: 22px;
    font-weight: 400;
  }
  
  @media (max-width: 768px) {
    .ui.text.size-textlg {
      font-size: 18px;
    }
  }
  
  .ui.text.size-textxl {
    font-size: 28px;
    font-weight: 400;
  }
  
  @media (max-width: 1050px) {
    .ui.text.size-textxl {
      font-size: 26px;
    }
  }
  
  @media (max-width: 550px) {
    .ui.text.size-textxl {
      font-size: 24px;
    }
  }
  
  .ui.text {
    color: var(--black_900_01);
    font-family: Roboto;
  }
  
  /*-------------------------------------
    6. Heading CSS
  --------------------------------------*/
  .ui.heading.size-headingxs {
    font-size: 14px;
    font-weight: 600;
  }
  
  @media (max-width: 768px) {
    .ui.heading.size-headingxs {
      font-size: 12px;
    }
  }
  
  .ui.heading {
    color: var(--blue_gray_800);
    font-family: Roboto;
  }
  
  /*-------------------------------------
    7. Container CSS
  --------------------------------------*/
  .container-xs {
    max-width: 1110px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  @media (max-width: 1200px) {
    .container-xs {
      max-width: 960px;
    }
  }
  
  @media (max-width: 768px) {
    .container-xs {
      max-width: 100%;
      padding: 0 16px;
    }
  }