#secretForm {
    /* display: flex; */
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.instructions-section {
    width: auto;
    height: 100%;
    display: grid;
    flex-direction: column;
    display: inline;
    flex-direction: initial;
}

.instruction-header {
    position: relative;
    width: 100%;
    height: 113px;
    display: flex;
    margin-bottom: 40px;
}

.instruction-header h3 {
    position: relative;
    color: #000;
    font-family: "Roboto";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    top: 40px;
    left: 149px;
    height: 113px;
}

.ins{
    flex-direction: initial;
    width: 100%;
    padding-left: 149px;
    padding-right: 20px;
    height: 100%;
    gap: 200px;
}

.instruction-1, .instruction-2, .instruction-3 {
    display: flex;
    flex-direction: row;
    position: relative;
    gap: 10px;
    width: 100%;
}

.instruction-1 {
    margin-bottom: 256px;
}

.instruction-2 {
    margin-bottom: 120px;
}

.instruction-1-img, .instruction-2-img, .instruction-3-img {
    display: flex;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    gap: 10px;
}

.instruction-1-description, .instruction-2-description, .instruction-3-description {
    position: relative;
    color: #3B434B;
    font-family: "Roboto";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

.divider {
    position: relative;
    width: 2px;
    background-color: #EAEAEB;
    flex-shrink: 0;
    top: 30px;
    margin-bottom: 30px;
}

.generate-secret-section {
    height: 100%;
    width: 100%;
    display: inline;
    flex-direction: initial;
    /*position: relative;*/
    gap: 20px;
    padding-right: 149px;
    padding-left: 49px;
}

.create-secret-header {
    position: relative;
    width: 100%;
    height: 113px;
    display: flex;
    margin-bottom: 35px;
}

.create-secret-header h3 {
    position: relative;
    color: #000;
    font-family: "Roboto";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    top: 40px;
}

.secret-area {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 5px;
    color: #000;
    font-family: "Roboto";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
}

.secret-area-header {
    display: flex;
    flex-direction: row;
    color: #000;
    font-family: "Roboto";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    margin-bottom: 10px;
}

.red-star {
    display: flex;
    width: 5px;
    height: 5px;
    flex-shrink: 0;
}

.secret-text {
    width: 100%;
    height: 32px;
    padding: 5px 8px;
    font-family: "Roboto";
    font-size: 14px;
    border: 1px solid #C7C9CB;
    outline: none;
    background-color: #fff;
    color: #6E7378;
    cursor: text;
    z-index: 1; 
    top: 10px;
    margin-bottom: 23px;
}

.secret-text::placeholder {
    color: var(--LightTheme-Onsurface-GrayTechnicalFont, #6E7378);
    opacity: 1;
}

.attachment {
    display: flex;
    width: 100%;
    height: auto;
    padding: 16px;
    flex-direction: column;
    align-items: center;
    border: 1px dashed var(--LightTheme-Onsurface-GrayBorders, #C7C9CB);
    background: var(--LightTheme-Surface-Level2, #F1F1F2);
    margin-bottom: 10px;
    cursor: pointer;
}

.attachment-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
}

.file-prompt {
    color: var(--LightTheme-Onsurface-Elevated, #1D242C);
    text-align: center;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 0px;
    width: 387px;
}

.file-size-warning {
    color: var(--LightTheme-Onsurface-GrayTechnicalFont, #6E7378);
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    width: 387px;
}

#fileAttachment {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    display: none;
}

.attachment:hover, 
.attachment.dragover {
    border-color: #007bff;
    background-color: #eef5ff;
}

.file-name {
    width: 100%;
    height: auto;
    flex-direction: row;
    display: none;
    justify-content: space-between;
}

.file-icon {
    position: relative;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    margin-left: 4px;
    margin-top: 3px;
    margin-bottom: 3px;
}

.file-name-text {
    color: var(--LightTheme-PrimaryBlue-Default, #1869B7);
    font-family: "Roboto";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    width: 92%;
}

.line {
    position: "absolute";
    background-color: #EAEAEB;
    height: 2px;
    width: 100%;
    margin-top: 30px;
}

.privacy-options {
    flex-direction: initial;
    margin-top: 30px;
}

.privacy-options-header {
    color: #000;
    font-family: "Roboto";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    margin-bottom: 10px;
}

.passphrase-box {
    width: 100%;
    height: 32px;
    background: var(--LightTheme-Surface-Overlay, #FFF);
    border: 1px solid var(--LightTheme-Onsurface-GrayBorders, #C7C9CB);
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 30px;
}

.passphrase{
    flex: 1;
    width: calc(100% - 28px);
    padding: 5px 8px;
    font-family: "Roboto";
    font-size: 14px;
    outline: none;
    background-color: #fff;
    color: var(--LightTheme-Onsurface-GrayTechnicalFont, #6E7378);
    cursor: text;
    line-height: 20px;
    z-index: 1;
}

.passphrase::-ms-reveal,
.passphrase::-ms-clear {
    display: none;
}

.passphrase::placeholder {
    color: var(--LightTheme-Onsurface-GrayTechnicalFont, #6E7378);
    opacity: 1;
}

.passphrase-toggle {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    cursor: pointer;
}

.expiration {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    height: 32px;
    background: var(--LightTheme-Surface-Overlay, #FFF);
    border: 1px solid var(--LightTheme-Onsurface-GrayBorders, #C7C9CB);
    outline: none;
    color: var(--LightTheme-Onsurface-GrayTechnicalFont, #6E7378);
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    padding: 5px 8px;
}

.expiration-selections {
    background-color: #fff;
    color: var(--LightTheme-Onsurface-GrayTechnicalFont, #6E7378);
    width: 100%;
    outline: none;
}

.recipient {
    flex-direction: initial;
    margin-top: 30px;
}

.recipient-header {
    color: #000;
    font-family: "Roboto";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    margin-bottom: 10px;
}

.email-input-container {
    border: 1px solid var(--LightTheme-Onsurface-GrayBorders, #C7C9CB);
    background: var(--LightTheme-Surface-Overlay, #FFF);
    padding: 5px 8px;
    width: 100%;
    flex: 1 0 0;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.recipient-email {
    width: 90%;
    font-family: "Roboto";
    color: var(--LightTheme-Onsurface-GrayTechnicalFont, #6E7378);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    outline: none;
    align-self: stretch;
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    box-shadow: 0 0 0px 1000px white inset;
}

.recipient-email:-webkit-autofill,
.recipient-email:-webkit-autofill:hover, 
.recipient-email:-webkit-autofill:focus, 
.recipient-email:-webkit-autofill:active {
    width: 90%;
    font-family: "Roboto";
    color: var(--LightTheme-Onsurface-GrayTechnicalFont, #6E7378) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    background-color: transparent !important;
    -webkit-text-fill-color: var(--LightTheme-Onsurface-GrayTechnicalFont, #6E7378) !important;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    box-shadow: 0 0 0px 1000px white inset !important;
    transition: background-color 5000s ease-in-out 0s;
    outline: none;
}

.email-icon {
    width: 20px;
    height: 20px;
    display: none;
}

.recipient p {
    width: 100%;
    color: var(--DarkTheme-Onsurface-GrayTechnicalFont, #9EA1A5);
    /* ResponsiveWeb/LargeScreens/BodySmall */
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

.generate-secret-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 50px;
}

.generate-secret-button {
    height: auto;
    width: auto;
    padding: 8px 16px;
    background-color: #1869B7;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--LightTheme-Surface-Overlay, #FFF);
    font-family: "Roboto";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    cursor: pointer;
    outline: none;
}

.generate-secret-button:hover:enabled {
    background-color: #145A9E;
    transform: scale(1.05);
}

.generate-secret-button:enabled:active {
    background-color: #0E4A7F;
    transform: scale(0.98);
}

.disabled-button {
    background-color: #EBEBF0;
    color: var(--LightTheme-Surface-Overlay, #8C8C94);
    cursor: not-allowed;
}

.disabled-button:hover {
    opacity: 0.7;
}

#secretText:disabled { 
    background-color: white;
    color: black;
    cursor: not-allowed;
    opacity: 1;
}