app-MAIL-temp/static/style.css

.profile-picture {
    /* make a square container */
    width: 150px;
    height: 150px;

    /* round the edges to a circle with border radius 1/2 container size */
    border-radius: 50%;

    margin-top: 10px;
}

.client-icon {
    /* make a square container */
    width: 150px;
    height: 150px;

    /* round the edges to a circle with border radius 1/2 container size */
    border-radius: 10%;

    margin-top: 10px;
}

.small-client-icon {
    /* make a square container */
    width: 40px;
    height: 40px;

    /* round the edges to a circle with border radius 1/2 container size */
    border-radius: 10%;

    margin-top: 10px;
}

.small-profile-picture {
    /* make a square container */
    width: 60px;
    height: 60px;

    /* round the edges to a circle with border radius 1/2 container size */
    border-radius: 50%;

    margin-top: 10px;
}

/* highlighted table row */
.highlight-row {
    border: solid #5675E2;
}

.arrow {
    width: 20px;
}

em {
    font-style: normal;
    background-color: #FFFF00;
}

.small-text {
    font-size: 12px;
    font-weight: 300;
    margin-bottom: 0px;
}

.copy-btn {
    font-size: 0.6rem;
    line-height: 0.75;
}

.cursor {
    cursor: pointer;
}

/*Left border for alert zone*/
.alert-primary {
    border-left: 5px #467fcf solid;
}

.alert-info {
    border-left: 5px cadetblue solid;
}

.alert-danger {
    border-left: 5px #6b1110 solid;
}

.alert-danger::before {
    content: "⚠️";
}

.dns-record {
    border: 1px dotted #E3156A;
}

/**
 * Form Validation Errors
 */
.error {
    border-color: red;
}

.error-message {
    color: red;
    font-style: italic;
    margin-bottom: 1em;
}

.footer-item {
    padding-left: 0 !important;
    font-size: 14px;
}

.footer-list-group {
    list-style: none;
    padding-left: 0;
}

.subheader{
    font-size: .625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.6;
    color: #656d77;
}


.disabled-content {
    pointer-events: none;
    opacity: 0.4;
}

/* Parsley CSS */
input.parsley-success,
select.parsley-success,
textarea.parsley-success {
    color: #468847;
    background-color: #DFF0D8;
    border: 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
    color: #B94A48;
    background-color: #F2DEDE;
    border: 1px solid #EED3D7;
}

.parsley-errors-list {
    margin: 2px 0 3px;
    padding: 0;
    list-style-type: none;
    font-size: 0.9em;
    line-height: 0.9em;
    opacity: 0;
    color: #B94A48;

    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
    opacity: 1;
}
/* END Parsley CSS */

.domain_detail_content {
    font-size: 15px;
}

/* Only show the help button on desktop */
@media only screen and (max-width: 500px) {
    #help-btn {
        display: none;
    }
}

@media only screen and (min-width: 500px) {
    #help-btn {
        display: flex;
    }

    #help-menu-item {
        display: none;
    }
}

.proton-button {
    border-color:#6d4aff;
    background-color:white;
    color:#6d4aff;
}
.proton-button:hover {
    background-color: #1b1340;
}

/* CSS technique for a horizontal line with words in the middle */
.middle-line {
  display: flex;
  flex-direction: row;
}
.middle-line:before, .middle-line:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid;
  margin: auto;
}
.middle-line:before {
  margin-right: 10px
}
.middle-line:after {
  margin-left: 10px
}

.italic {
    font-style: italic;
}

/* dashed outline to indicate droppable area */
.dashed-outline {
    outline: 4px dashed gray;
}