.content { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; min-height: 0; align-self: stretch; } .contentContainer { display: flex; align-items: flex-start; height: calc(100vh - 240px); flex: 1; align-self: stretch; } .heading { display: none; flex-direction: column; align-items: flex-start; gap: 16px; padding: 0 16px; align-self: stretch; background: #191a24; } .heading > div { display: flex; align-items: flex-start; gap: 16px; align-self: stretch; } .heading p { display: flex; padding: 24px 4px 16px 4px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 5px; color: #85869b; font-family: Inter; font-size: 18px; font-weight: 400; } .heading .active { border-bottom: 1px solid #959aff; color: #959aff; } .fieldsContainerCreateNew { display: flex; padding-top: 36px; flex-direction: column; align-items: flex-start; gap: 36px; background: #191a24; height: calc(100vh - 170px); min-height: 0; flex: 1; overflow-y: scroll; scrollbar-width: none; } .projectDetails { display: flex; padding: 0 20px; flex-direction: column; align-items: flex-start; gap: 10px; align-self: stretch; } .projectDetailsHeader { display: flex; padding-bottom: 24px; align-items: flex-start; gap: 17px; align-self: stretch; } .projectDetailsHeader p { color: #d2d3e1; font-size: 20px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 0.2px; } .fieldsCreateNew { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; align-self: stretch; } .radioButtonContainer { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; align-self: stretch; } .radioButtonContainer > div { display: flex; align-items: flex-start; gap: 24px; padding: 20px 0; } .textarea { display: flex; height: 120px; padding: 12px; width: 100%; flex-direction: column; align-items: flex-start; background-color: transparent; gap: 10px; align-self: stretch; border-radius: 4px; border: 1px solid #4b4f6d; resize: none; color: #85869b; font-size: 16px; font-family: inter; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 0.16px; outline: none; } .textarea:focus { border-radius: 6px; border: 1px solid #959aff; background: rgba(75, 79, 109, 0.25); } .textarea:focus::placeholder { color: #4b4f6d; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } .resource { display: flex; padding: 0 20px; flex-direction: column; align-items: flex-start; align-self: stretch; } .resourceFields { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; align-self: stretch; } .fieldsCreateNew > div, .resourceFields > div { display: flex; justify-content: center; align-items: center; gap: 8px; align-self: stretch; } .fieldsCreateNew > div:nth-child(1) { display: flex; padding: 16px 0; justify-content: center; align-items: center; gap: 4px; align-self: stretch; } .fieldsCreateNew > div > div, .resourceFields > div > div { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; flex: 1 0 0; } .fieldsCreateNew > div > div p, .resourceFields > div > div p { color: #d2d3e1; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 0.16px; } .fieldsCreateNew > div > div p > span, .resourceFields > div > div p > span { color: #85869b; } .repositoryForm { display: flex; padding: 12px; flex-direction: column; align-items: center; justify-content: center; gap: 10px; align-self: stretch; border-radius: 4px; border: 1px dashed #5980f1; color: #5980f1; text-align: center; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 0.16px; cursor: pointer; } .repositoryForm:hover { background: rgba(83, 89, 242, 0.1); } .additionalDetails { display: flex; padding: 16px; flex-direction: column; align-items: flex-start; gap: 16px; align-self: stretch; } .additionalDetails > div { display: flex; padding: 20px; flex-direction: column; align-items: flex-start; gap: 10px; align-self: stretch; border-radius: 6px; background: #1d1e2a; } .additionalDetails > div > div { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; align-self: stretch; } .additionalDetailsHeader { display: flex; padding-bottom: 24px; align-items: flex-start; gap: 17px; align-self: stretch; } .additionalDetailsHeader div { display: flex; justify-content: space-between; align-items: center; flex: 1 0 0; } .additionalDetailsHeader p { color: #d2d3e1; font-size: 20px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 0.2px; } .additionalDetailsFields { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; align-self: stretch; } .additionalDetailsFields > div { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; align-self: stretch; } .additionalDetailsFields > div > div { display: flex; justify-content: center; align-items: center; gap: 16px; align-self: stretch; } .additionalDetailsFields > div > div > div { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; flex: 1; } .additionalDetailsFields p { color: #d2d3e1; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 0.16px; } .noDisplay { display: none; } .hasDisplay { display: flex; } @media (max-width: 768px) { .heading { display: flex; } .fieldsContainerCreateNew { height: calc(100vh - 262px); } .content { padding: 0; } .fieldsCreateNew .inputGroup, .additionalDetailsFields > div .inputGroup, .resourceFields .inputGroup { display: flex; flex-direction: column; gap: 16px; } .fieldsCreateNew .inputGroup div, .additionalDetailsFields > div .inputGroup div, .resourceFields .inputGroup div { width: 100%; } }