@import "../../styles/varibale.scss";
.supportContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.title {
  font-weight: 700;
  font-size: 46px;
  color: $primaryColor;
  text-align: center;
}
.buttonCustomer {
  background: $fourthColor;
  color: $primaryColor;
  font-size: 14px;
  font-weight: 700;
  height: 50px;
  display: flex;
  width: 280px;
  align-items: center;
  justify-content: center;
  &:hover {
    background: $fourthColor;
    color: $primaryColor;
  }
  &:focus {
    background: $fourthColor;
    color: $primaryColor;
  }
}
.finalButton{
  font-size: 14px;
  font-weight: 700;
  height: 50px;
  display: flex;
  width: 280px;
  align-items: center;
  justify-content: center;
  margin: 1rem 0;
}
.finalButton > span{
  padding-left: 0.5rem;
}
.addressCardTitle {
  font-weight: 600;
  font-size: 26px;
  color: $primaryColor;
}
.addressCardSubTitle{
font-weight: 500;
font-size: 18px;
line-height: 1.2;
text-align: center;

color: #30343A;
}
.modalContent{
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  }
.buttonCustomer > span{
    padding-left: 0.5rem;
}
.buttonCustomer:active {
  background: $fourthColor;
  color: $primaryColor;
}
.leftButton{
    display: flex !important;
    align-items:flex-end;
    justify-content: flex-end;
}
.stepsMain{
  background: red;
}
.stepValue{
  background: $fourthColor;
  color: $primaryColor;
  display: flex;
  align-items: center;
  padding-left: 8px !important;
 
  :global(.ant-steps-item-title::after) {
      position: absolute;
      left: 100%;
      display: block;
      width: 99999px;
      height: 4px;
      background: transparent !important;
      content: '';
      left: -40px;
      right: -50px !important;
      top:50px !important;
  
  };
  :global(.ant-steps-item-container){
    outline: none;
    display: flex;
    align-items: center;
}
:global(.ant-steps-item-icon){
  background-color: $fourthColor;
  border-color: $primaryColor;

  }
 

}
.checkboxContainer{
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: $primaryColor;
}
.checkboxContainer > label{
  padding: 0.5rem;
}

.stepValue > div > div > div{
  line-break: auto !important;
  width: 200px !important ;
  line-break: auto !important;
  overflow: inherit !important;
  white-space: break-spaces !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  padding: 0.5rem;
  position: relative;
 
}



.tabPaneContainer{
  background: $white;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
}
.detailsContainer{
  background: $white;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
margin: 1rem;
padding: 0.75rem;
}
.problemContainer{
  background: $white;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
  padding: 3rem 1rem;
  margin: 1rem 0;
}
.checkBoxContainer{
  color:$white;
  border:1px solid $primaryColor;
  padding: 0.5rem;
  border-radius: 4px;
  background:$primaryColor ;
}
.checkboxContainerRadio{
  color:$primaryColor;
  
  padding: 0.5rem;
  border-radius: 4px;
}
.dropdownContainer{
  width: calc(100% - 10px);

}
@media (max-width: 768px) {
    .leftButton{
        display: flex !important;
        align-items:center;
        justify-content: center;
    } 
    .rightButton{
        display: flex !important;
        align-items:center;
        justify-content: center;
        padding: 1rem 0;
    }
}