/*form error message*/
.invalid-feedback {
    font-size: inherit;
}

/* fonts */
.fw-semibold {
     font-weight: 600 !important; 
}
/* fonts ends*/

/* buttons */
.btn-color-orange:hover {
    background-color: #9F460C;
}
.btn-color-orange:focus-visible {
    box-shadow: 0 0 0 2px #F2F2F2, 0 0 0 4px var(--orange-clr);
    outline: 5px solid transparent;
}

.btn-color-green:focus-visible, .btn-success:focus-visible {
    box-shadow: 0 0 0 2px #F2F2F2, 0 0 0 4px var(--green-clr);
    outline: 5px solid transparent;
}

.btn-success-reverse {
    color: #54802D;
    background-color: #FFF;
    outline: 1px solid #54802D;

}
.btn-success-reverse:is(:hover, :focus) {
    background-color: oklch(98% 0 0);

}

.btn-success-reverse:focus-visible {
    box-shadow: 0 0 0 4px #54802D;
    outline: 2px solid transparent;
}

/*buttons ends*/

/* Select-role page */
.role-label input:focus ~ .radiobutton {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.role-label input:checked:checked:focus-visible ~ .radiobutton {
    outline: 4px solid #000;
}
/* Select-role page ends*/

/*dashboard */
.accordion-header {
    margin:0;
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.accordion-button {
    background-color: #E4EEE0;
    border: 0;
    padding: 1.25rem 1.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}
.accordion-button::after {
    height: 25px;
    width: 25px;
    content: '';
    margin-left: auto;
    background-image: url('/assets/image/common/minus-green.svg') ;
    background-size: cover;
    transition: background-image 0.3s ease;
    background-repeat: no-repeat;
    position: absolute;
    right: 5px;
}
.accordion-button.collapsed::after {
     background-image: url('/assets/image/common/plus-green.svg') ;
}

.accordion-button:is(:hover, :focus) {
    background-color: #DCE6D8;
}
.accordion-button:focus-visible {
    outline: 2px solid #54802D;
}
/*dashboard ends */
/*Edit my info*/
.accordion-form-header {
    border: none;
}
.accordion-form-header .accordion-button {
    border-radius: 0.25rem;
}
/*Edit my info ends*/

/*FAQ*/
.faq-title .accordion-header {
    border: 0;
}
.accordion-button-faq {
    background-color: transparent;
    color: #444444; 
    color:var(--main-text-clr);
    padding: 1rem 1.80rem 1rem 1rem;
}
.accordion-button-faq:is(:hover, :focus) {
    background-color: #E4EEE0;
}
/*FAQ*/

/*psla - pslae report*/
.cat_1_title-accordion-header {
    background-color: hsl(44, 82%, 72%);
    background-color: var(--accent-clr-cc);
}
.cat_2_title-accordion-header {
  /* background-color: #F8B7BF; */
  background-color: hsl(353, 82%, 85%);
  background-color: var(--accent-clr-si);
}
.cat_3_title-accordion-header {
  /* background-color: #D9E7D4; */
  background-color: hsl(104, 28%, 87%);
  background-color: var(--accent-clr-pscm);
}

.cat_4_title-accordion-header {
  /* background-color: #B6C6D6; */
  background-color: hsl(210, 28%, 78%);
  background-color: var(--accent-clr-ss);
}

.cat_5_title-accordion-header {
    background-color: #E3AD80;
}

.report-accordion-button {
    background-color: transparent;
    border: 0;
    padding: 5px 1rem 5px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%
}
.report-accordion-button .percentage-container::after {
    height: 35px;
    width: 35px;
    content: '';
    margin-left: auto;
    background-image: url('/assets/image/common/minus-black.svg') ;
    background-size: contain;
    transition: background-image 0.3s ease;
}

.report-accordion-button.collapsed .percentage-container::after {
     background-image: url('/assets/image/common/plus-black.svg') ;
}

.report-accordion-button:is(:hover) {
    background-color: rgba(255,255,255,.25);
}
.report-accordion-button:focus-visible {
    outline: 3px solid #000;
}
/*psla - pslae report ends*/

/* Dialog as Toast UI */

dialog[data-ui='toast'] {
	margin-block-start: var(--flow-space, 1rem);
  position: fixed;
  inset: unset;
  top: 0;
  bottom: 100%;
  right: 0;
  width: min(70ch, 100%);
  border-radius: 0.5em;
  border-color: none;
  z-index: 1021;
}

dialog[open] {
  animation: animate-toast 0.5s ease forwards;
}

@keyframes animate-toast {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    top: 2vh;
    right: 2vw;
    opacity: 1;
  }
}

[data-ui='toast'].animate {
  animation-name: animate-toast;
}

.dialog-title {
  font-size: 1.25rem;
}

/* If we have Close icon starts */
[data-ui='toast'] .btn-close {
  background-image: none;
  width: 30px;
  height: 30px;
  opacity: 1;
}

[data-ui='toast'] .btn-close--secondary-reverse {
  background-color: var(--clr-secondary);
  color: var(--clr-neutral-100);
  outline: 1px solid var(--clr-neutral-100);
}

[data-ui='toast'] .btn-close--secondary-reverse:is(:hover, :focus) {
  --clr-neutral-100: oklch(98% 0 0);
  background-color: var(--clr-neutral-100);
  color: var(--clr-secondary);
}

[data-ui='toast'] .btn-close--secondary-reverse:focus-visible {
  box-shadow: 0 0 0 4px var(--clr-neutral-100);
  outline: 2px solid var(--clr-secondary);
}

/* If we have Close icon ends */

[data-icon-wrapper='toast'] {
  width: 32px;
  height: 32px;
}

[data-dialog='content'] {
  padding: 1.5rem;
}

.dialog-section {
  container: dialog-section / inline-size;
}

@container dialog-section (min-width: 380px) {
  [data-dialog='wrapper'] {
    display: flex;
    flex-direction: row;
    gap: 1rem;
  }

  [data-dialog-icon='wrapper'] {
    padding-block: 0;
    padding-inline: 0.5rem;
  }

  [data-dialog='content'] {
    margin-inline-end: auto;
  }

  [data-dialog='btn-wrapper'] {
    padding-inline-end: 1.5rem;
  }
}

@container dialog-section (max-width: 379px) {
  [data-dialog='wrapper'] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  [data-dialog-icon='wrapper'] {
    padding-block: 1rem;
    padding-inline: 0;
  }

  [data-dialog='content'] {
    margin-inline-end: 0;
  }

  [data-dialog='btn-wrapper'] {
    padding-block-end: 1rem;
    padding-inline-end: 0;
  }
}

.dialog-body {
  font-size: 1rem;
}

.dialog-body > * + * {
  margin-block-end: 0.2rem;
}

.dialog-body p {
  margin-block-end: 0.2rem;
}

.dialog-body > p:last-child {
  margin-block-end: 0;
}

.dialog-body :is(a, a:hover, a:focus) {
  color: currentColor;
}

/* Dialog as Toast UI Ends */

/*toogle tip */

.disabled-toggletip-container {
	position: relative;
	display: inline-block;
}

.disabled-toggletip-bubble {
	display: flex;
	position: absolute;
	left: 0;
	right: 100%;
	top: 0;
	bottom: 0;
	width: 20em;
	align-items: center;
	padding: 2em;
	background-color: #000;
	color: #fff;
	border-radius: 4px;
	z-index: 999;
}
/*toogle tip ends */


/* Take PSLA and tek-psla-e mobil tweak*/
.xs-only-show {
  display: none;
}


@media only screen and (max-width: 576px) {
  .panel10 {
    padding-left: 5px;
    padding-right: 5px;
  }
  .flex-div.question-options-container {
    flex-direction: column;
    text-align: left;
    border: 2px solid #dedede;
  }
  .xs-only-show {
    display: block;
  }
  .xs-flex-dir-col {
    flex-direction: column;
  }
  .flex-div-2 .flex-item-2 label{
		width: 100%;
    padding: 10px;
    gap: 7px;
	}

  .xs-d-none{
    display: none;
  }
}