$bluish_white: rgb(189,216,255);
$lavender: rgb(174,168,248);
$spacechalk_red: rgb(255,141,135);
$neon_magenta: rgb(242,137,249);
$light_pink: rgb(255,175,249);
$orange: rgb(253,205,54);
$soft_yellow: rgb(249,249,134);
$soft_green: rgb(193,255,135);
$spacechalk_lime: rgb(168,253,87);
$sky_blue: rgb(92,201,253);
$cornflower: rgb(95,135,255);
$light_cornflower: rgb(122,162,247);
$blue_gray: rgb(86,95,137);
$dark_gray: rgb(58,58,58);
$navy: rgb(35,35,54);

/* base container for the whole screen */
#bitwarden-modal-container {
    width: 90%;
    height: 60%;
    align: center middle;
    background: $navy 50%;
}

/* box with border and inputs and button */
#credentials-box {
    align: center middle;
    content-align: center middle;
    padding: 1;
    border: round $cornflower;
    border-title-color: $soft_green;
    grid-gutter: 1;
    grid-rows: 0.25fr 1fr 0.25fr;
}

/* help blurb */
#bitwarden-help-text {
    color: $blue_gray;
    width: 100%;
    margin-left: 1;
}

#all-bitwarden-inputs {
    align: center middle;
    content-align: center middle;
    grid-gutter: 1;
    padding-left: 1;
}

/* bitwarden label and input row */
.bitwarden-input-row {
    grid-size: 2;
    grid-columns: 0.42fr 1fr;
    height: auto;
    align: center middle;
    content-align: center middle;
}

/* bitwarden input label */
.bitwarden-label {
    content-align: left middle;
    color: $light_cornflower 80%;
    width: 100%;
    height: 3;
}

/* bitwarden input */
.bitwarden-inputs {
    height: 100%;
    content-align: left middle;
}

/* submit button */
#bitwarden-button-box {
    grid-size: 2;
    align: center middle;
    margin-bottom: 1;
}

#bitwarden-submit {
}