/* input[type="color"] {
    appearance: none;
    width: 50px;
    height: 50px;
    border: none;
    cursor: pointer;
    background-color: transparent;
} */


html {
    scrollbar-color: #007db8 #c4c4c4;;
}

/* Customizing for WebKit browsers */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}


.form-options-popup {
    position: fixed;
    top: 10%;
    padding: 0;
    box-shadow: 0px 0px 12px gray;
    /* max-width: 80em; */
    min-width: 20em;
    /* width: 60em; */
}

.hovered-content-popup {
    position: fixed;
    top: 2%;
    left: 50%;
    padding: 0;
    box-shadow: 0px 0px 12px gray;
    max-width: 60em;
    max-height: 60em;
    min-width: 10em;
    /* height: 18em; */
}

.word-document-popup {
    position: fixed;
    top: 2%;
    /* left: 50%; */
    padding: 0;
    box-shadow: 0px 0px 12px gray;
    max-width: 60em;
    max-height: 60em;
    min-width: 46em;
    /* height: 18em; */
}

.form-template-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 1em;
}

.data-type-menu {
    max-width: 4em;
}

.view-form-template-content-section {
    padding: 1em;
    overflow: auto;
    max-height: 48em;
}

.form-template-name-label {
    font-weight: bold;
    font-style: italic;
    font-size: 1.2em;
}

.form-field-option-symbol-and-label-section {
    display: flex;
    gap: 1em;
    margin-top: 1em;
}

.form-field-option-edit-and-delete-section {
    display: flex;
    gap: 1em;
    margin-top: 1em;
    width: fit-content;
    margin-bottom: 2em;
}

/* Chrome, Safari, Edge, Opera */
.header-and-field-order-input::-webkit-outer-spin-button,
.header-and-field-order-input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

/* Firefox */
.header-and-field-order-input {
    appearance: textfield;
}


.view-template-flex-item {
    flex: 1;
    /* width: 20%; */
    white-space: nowrap;
}

.square {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid black;
}

.circle {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid black;
    border-radius: 50%;
}

.field-option-square-placeholder {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid black;
}

.field-option-circle-placeholder {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid black;
    border-radius: 50%;
}
/* 
.field-options-user-input-container {
    padd
} */

.form-field-with-options-user-input {
    display: flex;
    gap: 2em;
    margin-top: 1em;
    /* margin-bottom: 2em; */
}

.field-option-button {
    width: 100%;
    height: 100%;
    font-weight: bold;
    /* font-size: 1.5em; */
    box-sizing: border-box;
    background-color: transparent;
    border: none;
    /* border-radius: 50%; */
}

.field-option-color-input {
    padding: 0;
    background: none;
    border: none;
    margin-top: -0.25em;
    margin-left: -0.25em;
    box-sizing: border-box;
    width: calc( 100% + 0.5em );
    height: calc( 100% + 0.5em );
}

.field-option-square-user-input {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid #00a0d1;
}

.field-option-circle-user-input {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid #46be00;
    border-radius: 50%;
}

.unapplied-field-option {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid transparent;
}

.green-square {
    background-color: #52e000;
}
.periwinkle-square {
    background-color: #82a9ff;
}
.white-square {
    background-color: white;
}
.gray-square {
    background-color: gray;
}
.yellow-square {
    background-color: yellow;
}
.orange-square {
    background-color: orange;
}
.light-blue-square {
    background-color: #3fd2ff;
}
.purple-square {
    background-color: #9d53ff;
}
.red-square {
    background-color: red;
}
.black-square {
    background-color: black;
}
.unique-field-option-triangle-placeholder {
    /* border: 2px solid black;
    width: 22px;
    height: 22px;
    background-color: #b40069;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); */
    width: 0;
    height: 0;
    /* Side borders must be transparent */
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    /* Bottom border creates the upward triangle */
    border-bottom: 50px solid #007bff;
}
.pink-background {
    background-color: pink;
}
.dark-green-square {
    background-color: green;
}
.dark-red-square {
    background-color: darkred;
}



.triangle-container {
  /* This element acts as the black border */
  width: 110px; /* Outer width/height (adjust as needed) */
  height: 110px;
  background-color: black;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* Defines the triangle shape */
  position: relative;
}

.triangle-inner {
  /* This element acts as the inner fill (e.g., white background) */
  position: absolute;
  top: 3px; /* Controls border thickness (adjust as needed) */
  left: 3px;
  width: calc(100% - 6px); /* Adjust width to account for top/left offset */
  height: calc(100% - 6px); /* Adjust height to account for top/left offset */
  background-color: white; /* Inner color */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* Same shape as outer */
}