/* Positioning */
/* Box Model */
/* Typography */
/* Visuals */
/* Visiblity */
/* Transitions & Animations */
/* Miscellaneous */
/* Media Queries */
/* Base Styles */
/* Main Styles */
/* Unscripted Logo */
/* Registration Form */
/* Form Fields */
/* Hover */
/* Focus */

/* ----------------------------------------------------- */

/* Base Body */

/* ----------------------------------------------------- */

/* Home Main */

.home_main {
    /* Positioning */
    display: flex;
    flex-direction: column;
}

/* Home Main Hero */

.home_main__hero {
    /* Positioning */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Box Model */
    min-height: calc(100vh - var(--base_body_header_height));
    padding: 1rem;
    /* Typography */
    font-family: 'Roboto';
}

.home_main__hero__container {
    /* Positioning */
    display: flex;
    flex-direction: column;
}

.home_main__hero__container h1 {
    /* Box Model */
    margin-top: 0;
    margin-bottom: 0;
    /* Typography */
    font-size: 3rem;
}

.home_main__hero__container p {
    /* Box Model */
    /* Typography */
    font-size: 1.2rem;
    color: #232323;
}

.home_main__hero__container a {
    /* Box Model */
    width: 5.6rem;
    background-color: #000058;
    padding: 0.5rem;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    border: none;
    border-radius: 0.2rem;
    /* Typography */
    font-family: 'Roboto';
    color: #ffffff;
    text-decoration: none;
}

.home_main__hero__container a:hover {
    /* Box Model */
    background-color: #000023;
    /* Typography */
    /* Miscellaneous */
    cursor: pointer;
}

/* Home Main About */

#about_section {
    /* Positioning */
    scroll-margin-top: 16vh;   
}

.home_main__about {
    /* Box Model */
    min-height: calc(100vh - var(--base_body_header_height));
    background-color: #121241;
    padding: 1rem;
    /* Typography */
    font-family: 'Roboto';
    color: white;
}

.home_main__about__container {
    /* Positioning */
    display: flex;
    flex-direction: column;
    /* Box Model */
    padding: 0rem;
}

.home_main__about__container__title {
    /* Box Model */
    align-self: center;
}

.home_main__about__container__info {
    /* Box Model */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Desktop styles */
@media (min-width: 1441px) {
    .home_main__about__container__info { 
        /* Positioning */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        /* Box Model */
    }
}

.home_main__about__container__info__description {
    /* Typography */
    text-align: center;
}

/* Tablet (portrait/landscape) styles */
@media (min-width: 768px) and (max-width: 1367px) {
    .home_main__about__container__info__description {
        /* Box Model */
        width: 100%;
    }
}

/* Desktop styles */
@media (min-width: 1368px) {
    .home_main__about__container__info__description {
        /* Box Model */
        width: 50%;
    }
}

/* Home Main Service */

#service_section {
    /* Positioning */
    scroll-margin-top: 16vh;
}

:root {
    /* Service */

    /* Positioning */
    --service_translateY: -1rem;
    /* Box Model */
    --service_background_color: #ffffff;
    --service_padding: 1rem;
    --service_border: 1px solid #a9a9a9;
    --service_border_radius: 1rem;
    --service_margin: 1rem;
    /* Typography */
    --service_font: 'Roboto';

    /* Service Learn More Button */

    /* Box Model */
    --service_button_background_color: #000032;
    --service_button_padding: 0.6rem;
    --service_button_border_radius: 0.2rem;
    /* Typography */
    --service_button_color: #ffffff;
    --service_button_text_align: center;
}

.home_main__service {
    /* Positioning */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Box Model */
    background-image: url('/static/static_images/backgrounds/nano_technology_background.png');
}

.home_main__service__title {
    /* Typography */
    font-family: 'Roboto';
}

/* Desktop styles */
@media (min-width: 1368px) {
    .home_main__service__services {
        /* Positioning */
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
}

.home_main__service__services__basic_service {
    /* Positioning */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Box Model */
    background-color: var(--service_background_color);
    padding: var(--service_padding);
    border: var(--service_border);
    border-radius: var(--service_border_radius);
    margin: var(--service_margin);
    /* Typography */
    font-family: var(--service_font);
    /* Visibility */
    opacity: 0;
    /* Transitions & Animations */
    transition: 0.3s ease, opacity 1.6s ease;
}

.home_main__service__services__basic_service.visible {
    /* Visibility */
    opacity: 1;
}

.home_main__service__services__basic_service:hover {
    /* Positioning */
    transform: translateY(var(--service_translateY));
}

.home_main__service__services__basic_service__learn_more_button {
    /* Box Model */
    background-color: var(--service_button_background_color);
    padding: var(--service_button_padding);
    border-radius: var(--service_button_border_radius);
    /* Typography */
    color: var(--service_button_color);
    text-align: var(--service_button_text_align);
}

.home_main__service__services__basic_service__learn_more_button a {
    /* Typography */
    color: #ffffff;
    text-decoration: none;
}

.home_main__service__services__basic_service__learn_more_button:hover {
    /* Box Model */
    background-color: #00001f;
}

.home_main__service__services__basic_service__learn_more_button:hover a {
    /* Typography */
    color: #d0d0d0;
    text-decoration: none;
}

.home_main__service__services__standard_service {
    /* Box Model */
    background-color: var(--service_background_color);
    padding: var(--service_padding);
    border: var(--service_border);
    border-radius: var(--service_border_radius);
    margin: var(--service_margin);
    margin-top: 2rem;
    /* Typography */
    font-family: var(--service_font);
    /* Visibility */
    opacity: 0;
    /* Transitions & Animations */
    transition: 0.3s ease, opacity 1.6s ease;
}

.home_main__service__services__standard_service.visible {
    /* Visibility */
    opacity: 1;
}

.home_main__service__services__standard_service:hover {
    /* Positioning */
    transform: translateY(var(--service_translateY));
}

.home_main__service__services__standard_service__learn_more_button {
    /* Box Model */
    background-color: var(--service_button_background_color);
    padding: var(--service_button_padding);
    border-radius: var(--service_button_border_radius);
    /* Typography */
    color: var(--service_button_color);
    text-align: var(--service_button_text_align);
}

.home_main__service__services__standard_service__learn_more_button a {
    /* Typography */
    color: #ffffff;
    text-decoration: none;
}

.home_main__service__services__standard_service__learn_more_button:hover {
    /* Box Model */
    background-color: #00001f;
}

.home_main__service__services__standard_service__learn_more_button:hover a {
    /* Typography */
    color: #d0d0d0;
    text-decoration: none;
}

/* Desktop styles */
@media (min-width: 1368px) {
    .home_main__service__services__basic_service {
        /* Box Model */
        width: 40%;
        /* Miscellaneous */
        cursor: pointer;
        margin-top: var(--service_margin);
    }

    .home_main__service__services__standard_service {
        /* Box Model */
        width: 40%;
        /* Miscellaneous */
        cursor: pointer;
        margin-top: var(--service_margin);
    }
}

/* Home Main Web Design Process */

#web_design_process_section {
    /* Positioning */
    scroll-margin-top: 16vh;
}

.home_main__web_design_process {
    /* Positioning */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Box Model */
    min-height: calc(100vh - var(--base_body_header_height));
    background-image: url('/static/static_images/backgrounds/blueprint_background.png');
    /* Typography */
    font-family: 'Roboto';
    color: white;
}

.home_main__web_design_process__title {
    /* Typography */
    text-align: center;
}

/* Home Main Action */

#action_section {
    /* Positioning */
    scroll-margin-top: 16vh;
}

.home_main__action {
    /* Positioning */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Box Model */
    min-height: calc(100vh - var(--base_body_header_height));
    background-image: url('/static/static_images/backgrounds/nano_technology_2_background.png');
    border-top: 1px solid #dddddd;
    /* Typography */
    font-family: 'Roboto';
    
}

.home_main__action__caption {
    /* Positioning */
    display: flex;
    flex-direction: column;
    align-items: left;
    /* Box Model */
    padding: 1.5rem;
    /* Typography */
    text-align: left;
    /* Visibility */
    opacity: 0;
    /* Transitions & Animations */
    transition: opacity 1.6s ease, transform 0.8s ease;
}

/* Tablet (portrait/landscape) styles */
@media (min-width: 768px) and (max-width: 1367px) {
    .home_main__action__caption {
        /* Positioning */
        align-items: center;
    }
}

/* Desktop styles */
@media (min-width: 1368px) {
    .home_main__action__caption {
        /* Positioning */
        align-items: center;
    }
}

.home_main__action__caption.visible {
    /* Visibility */
    opacity: 1;
}

.home_main__action__caption__heading h1 {
    /* Box Model */
    margin: 0rem;
    /* Typography */
    font-size: 2.5rem;
}

.home_main__action__caption__text p { 
    /* Typography */
    font-size: 1.3rem;
}

/* Tablet (portrait/landscape) styles */
@media (min-width: 768px) and (max-width: 1367px) {
    .home_main__action__caption__heading h1 {
        /* Typography */
        font-size: 3rem;
    }

    .home_main__action__caption__text p {
        /* Typography */
        font-size: 2rem;
    }
}

.home_main__action__caption__cta_link {
    /* Box Model */
    width: 12rem;
    height: 3rem;
}

/* Tablet (portrait/landscape) styles */
@media (min-width: 768px) and (max-width: 1367px) {
    .home_main__action__caption__cta_link {
        /* Positioning */
        align-items: center;
        /* Box Model */
        width: 12rem;
        height: 3rem;
    }
}

/* Desktop styles */
@media (min-width: 1368px) {
    .home_main__action__caption__cta_link {
        /* Positioning */
        align-items: center;
        /* Box Model */
        width: 24vh;
        height: 5vh;
    }
}

.home_main__action__caption__cta_link a {
    /* Positioning */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Box Model */
    width: 100%;
    height: 100%;
    background-color: #000058;
    border-radius: 0.2rem;
    /* Typography */
    font-size: 1.1rem;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    /* Transitions & Animations */
    transition: transform 0.5s ease;
    /* Miscellaneous */
    cursor: pointer;
}

/* Desktop styles */
@media (min-width: 1368px) {
    .home_main__action__caption__cta_link a {
        /* Typography */
        font-size: 1.0rem;
    }
}

.home_main__action__caption__cta_link a:hover {
    /* Box Model */
    background-color: #010133;
}

.home_main__action__caption__cta_link a:active {
    /* Typography */
    color: #d6d6d6;
}

/* ----------------------------------------------------- */

/* About Me Code Editor */

.about_me_code_editor {
    /* Positioning */
    /* Box Model */
    width: 90%;
    background-color: #1e1e1e;
    border: 1px solid #404040;
    margin: 1rem;
    /* Typography */
    font-family: 'Fira Code', monospace;
    color: #d4d4d4;
}

/* Tablet (portrait/landscape) styles */
@media (min-width: 768px) and (max-width: 1367px) {
    .about_me_code_editor {
        /* Box Model */
        width: 100%;
    }
}

/* Desktop styles */
@media (min-width: 1368px) {
    .about_me_code_editor {
        /* Box Model */
        width: 50%;
    }
}

.about_me_code_editor__header {
    /* Positioning */
    display: flex;
    align-items: center;
    /* Box Model */
    background-color: #2d2d2d;
    /* Typography */
    font-weight: bold;
    color: #9a9a9a;
}

.about_me_code_editor__header img {
    /* Box Model */
    width: 5%;
    height: 5%;
    padding-left: 0.2rem;
}

/* Tablet (portrait/landscape) styles */
@media (min-width: 768px) and (max-width: 1367px) {
    .about_me_code_editor__header img {
        /* Box Model */
        width: 3%;
        height: 3%;
        padding-left: 0.2rem;
    }
}

/* Desktop styles */
@media (min-width: 1368px) {
    .about_me_code_editor__header img {
        /* Box Model */
        width: 3%;
        height: 3%;
        padding-left: 0.2rem;
    }
}

.about_me_code_editor__header__file_name {
    /* Positioning */
    /* Box Model */
    padding: 0.2rem;
    /* Typography */
    font-family: monospace;
}

.about_me_code_editor__header__run_terminal_button {
    /* Box Model */
    background-color: #ffffff00;
    border: none;
    /* Typography */
    color: #949494;
    /* Miscellaneous */
    cursor: pointer;
}

.about_me_code_editor__header__run_terminal_button:hover {
    /* Box Model */
    background-color: #ffffff00;
    border: none;
    /* Typography */
    color: #e4e4e4;
    /* Miscellaneous */
    cursor: pointer;
}

.about_me_code_editor__content {
    /* Positioning */
    display: flex;
    flex-direction: column;
    align-items: left;
    /* Box Model */
    padding-top: 0.2rem;
    padding-bottom: 0.4rem;
    padding-left: 0.3rem;
    padding-right: 0.2rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
    /* Typography */
    white-space: pre;
    /* Visibility */
    overflow: scroll;
}

.about_me_code_editor__terminal {
    /* Positioning */
    display: flex;
    /* Box Model */
    height: 100%;
    background-color: #000000;
    padding: 0.4rem;
    padding-left: 0.6rem;
    margin: 0rem;
    /* Visibility */
    overflow: scroll;
}

/* ----------------------------------------------------- */

/* About Me Code Editor Styles */

.code_line {
    /* Positioning */
    display: flex;
}

.line_number {
    /* Positioning */
    display: inline-block;
    /* Box Model */
    margin-right: 0.5rem;
    /* Typography */
    color: #858585;
    text-align: right;
}

.keyword { 
    /* Typography */
    color: #569cd6; 
}

.return { 
    /* Typography */
    color: #c586c0;
}

.class { 
    /* Typography */
    color: #4ec9a2; 
}

.function { 
    /* Typography */
    color: #ffffbb;
}

.variable { 
    /* Typography */
    color: #86caec; 
}

.string { 
    /* Typography */
    color: #ce9178;
}

.enclose {
    /* Typography */
    color: #ffd705;
}

.comment { 
    /* Typography */
    color: #6a9955; 
}

/* ----------------------------------------------------- */

/* Web Design Process Web */

.web_design_process_web {
    /* Positioning */
    /* Box Model */
    width: 90%;
    background-color: #ffffff;
    border-radius: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    /* Visibility */
    opacity: 0;
    /* Transitions & Animations */
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.web_design_process_web.visible {
  /* Visibility */
  opacity: 1;
}

.web_design_process_web__window_bar {
    /* Positioning */
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.web_design_process_web__window_bar__logo {
    /* Box Model */
    width: 10%;
    height: 100%;
}

.web_design_process_web__window_bar__logo img {
    /* Box Model */
    width: 100%;
    height: 5%;
}

.web_design_process_web__window_bar__options {
    /* Positioning */
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Box Model */
    width: 20%;
}

/* Tablet (portrait/landscape) styles */
@media (min-width: 768px) and (max-width: 1367px) {
    .web_design_process_web__window_bar__options {
        /* Box Model */
        width: 12%;
    }
}

/* Desktop styles */
@media (min-width: 1368px) {
    .web_design_process_web__window_bar__options {
        /* Box Model */
        width: 6%;
    }
}

:root {
    /* Browser Button */
    --browser_button_width: 22%;
    --browser_button_border_radius: 1rem;
    --browser_button_margin: 0.15rem;
}

/* ID */
#hide_browser_button {
    /* Positioning */
    display: flex;
    justify-content: center;
    /* Box Model */
    width: var(--browser_button_width);
    background-color: #78dfff;
    border: 2px solid #0084ac;
    border-radius: var(--browser_button_border_radius);
    margin: var(--browser_button_margin);
    /* Typography */
    font-family: 'Roboto';
    color: #ffffff;
    /* Miscellaneous */
    cursor: pointer;
}

#hide_browser_button:hover {
    /* Box Model */
    background-color: #0084ac;
}

/* ID */
#enlarge_browser_button {
    /* Positioning */
    display: flex;
    justify-content: center;
    /* Box Model */
    width: var(--browser_button_width);
    background-color: #fff900;
    border: 2px solid #a8a407;
    border-radius: var(--browser_button_border_radius);
    margin: var(--browser_button_margin);
    /* Typography */
    font-family: 'Roboto';
    color: #ffffff; 
    /* Miscellaneous */
    cursor: pointer;
}

#enlarge_browser_button:hover {
    /* Box Model */
    background-color: #a8a407; 
}

/* ID */
#close_browser_button {
    /* Positioning */
    display: flex;
    justify-content: center;
    /* Box Model */
    width: var(--browser_button_width);
    background-color: #ed0000;
    border: 2px solid #7d0505;
    border-radius: var(--browser_button_border_radius);
    margin: var(--browser_button_margin);
    /* Typography */
    font-family: 'Roboto';
    color: #ffffff;
    /* Miscellaneous */
    cursor: pointer;
}

#close_browser_button:hover {
    /* Box Model */
    background-color: #7d0505;
}

.web_design_process_web__search_bar {
    /* Box Model */
    background-color: #ffffff;
    border: 1px solid #e1e1e1;
}

.web_design_process_web__search_bar__url_path__tabs {
    /* Positioning */
    display: flex;
    flex-direction: row;
    /* Box Model */
    background-color: #e1e1e1;
    border: 1px solid #939393;
    /* Typography */
    font-family: 'Roboto';
}

.web_design_process_web__search_bar__url_path__tabs div {
    /* Box Model */
    background-color: #dddddd;
    padding: 0.5rem;
    border-top: 1px solid #939393;
    border-bottom: 1px solid #939393;
    border-left: 1px solid #939393;
    border-right: 1px solid #939393;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-top: 0.6rem;
    margin-left: 0.4rem;
    /* Typography */
    color: #000000;
    /* Miscellaneous */
    cursor: pointer;
}

.web_design_process_web__search_bar__url_path__tabs div:hover {
    /* Box Model */
    background-color: #ffffff;
}

.web_design_process_web__search_bar__url_path__link_bar {
    /* Box Model */
    background-color: #ffffff;
    padding: 0.4rem;
    padding-left: 0.7rem;
    border: 1px solid #e1e1e1;
    border-radius: 2rem;
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
    margin-left: 0.8rem;
    margin-right: 0.8rem;
    /* Typography */
    font-family: 'Roboto';
    color: #000000;
}

.web_design_process_web__content {
    /* Box Model */
    height: auto;
    background-color: #ffffff;
    border-bottom: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    /* Typography */
    color: black;
    /* Visibility */
    overflow: scroll;
}

.web_design_process_web__content h2 {
    /* Box Model */
    margin: 0rem;
}

.web_design_process_web__content p {
    /* Box Model */
    margin: 0rem;
}

:root {
    /* Web Design Process Web Content Caption */

    /* Box Model */
    --web_design_process_web_content_caption_background_color: #083147;
    /* Typography */
    --web_design_process_web_content_caption_font: 'Roboto';
    --web_design_process_web_content_caption_color: #ffffff;
}

.web_design_process_web__content__kickoff {
    /* Positioning */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Box Model */
    height: 100%;
    background-color: #040f15;
}

.web_design_process_web__content__kickoff__caption {
    /* Box Model */
    background-color: var(--web_design_process_web_content_caption_background_color);
    padding: 1rem;
    /* Typography */
    font-family: var(--web_design_process_web_content_caption_font);
    color: var(--web_design_process_web_content_caption_color);
}

.web_design_process_web__content__html {
    /* Positioning */
    display: none;
}

.web_design_process_web__content__html__caption {
    /* Box Model */
    background-color: var(--web_design_process_web_content_caption_background_color);
    padding: 1rem;
    /* Typography */
    font-family: var(--web_design_process_web_content_caption_font);
    color: var(--web_design_process_web_content_caption_color);
}

.web_design_process_web__content__css {
    /* Positioning */
    display: none;
}

.web_design_process_web_content__css__caption {
    /* Box Model */
    background-color: var(--web_design_process_web_content_caption_background_color);
    padding: 1rem;
    /* Typography */
    font-family: var(--web_design_process_web_content_caption_font);
    color: var(--web_design_process_web_content_caption_color);
}

.web_design_process_web__content__javascript {
    /* Positioning */
    display: none;
}

.web_design_process_web__content__javascript__caption {
    /* Box Model */
    background-color: var(--web_design_process_web_content_caption_background_color);
    padding: 1rem;
    /* Typography */
    font-family: var(--web_design_process_web_content_caption_font);
    color: var(--web_design_process_web_content_caption_color);
}

.web_design_process_web__content__django {
    /* Positioning */
    display: none;
}

.web_design_process_web__content__django__caption {
    /* Box Model */
    background-color: var(--web_design_process_web_content_caption_background_color);
    padding: 1rem;
    /* Typography */
    font-family: var(--web_design_process_web_content_caption_font);
    color: var(--web_design_process_web_content_caption_color);
}

/* ----------------------------------------------------- */

/* Client Chat Window */

.client_chat_window {
    /* Positioning */
    position: relative;
    display: flex;
    flex-direction: column;
    /* Box Model */
    width: 95%;
    height: auto;
    border: 1px solid #bebebe;
    border-radius: 15px;
    margin-top: 2%;
    margin-bottom: 2%;
    /* Visibility */
    overflow: hidden;
    /* Transitions & Animations */
    transition: max-height 2s;
}

/* Desktop styles */
@media (min-width: 1368px) {
    .client_chat_window { 
        /* Box Model */
        width: 35%;
    }
}

.client_chat_window::after {
    /* Positioning */
    position: absolute;
    bottom: 0;
    left: 0;
    /* Box Model */
    width: 100%;
    height: 15%;
    background: linear-gradient(to bottom, rgba(249, 250, 251, 0), rgb(36 36 36));
    content: "";
}

.client_chat_window__client_info {
    /* Positioning */
    display: flex;
    align-items: center;
    justify-content: space-between;;
    /* Box Model */
    background-color: #337e42;
    padding: 2%;
    /* Typography */
    font-family: 'Roboto';
    color: white;
}

.client_chat_window__client_info__hamburger {
    /* Box Model */
    width: 16%;
    height: 90%;
}

.client_chat_window__client_info__hamburger img {
    /* Box Model */
    width: 100%;
    height: 100%;
}

.client_chat_window__client_info__name {
    /* Positioning */
    display: flex;
    align-items: center;
    /* Box Model */
    width: 60%;
    margin-right: 3rem;
}

.client_chat_window__client_info__name span {
    /* Positioning */
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Box Model */
}

.client_chat_window__client_info__name img {
    /* Box Model */
    width: 10%;
    height: 10%;
    border: 2px solid #ffffff;
    border-radius: 50%;
    margin-right: 0.4rem;
}

.client_chat_window__chat {
    /* Positioning */
    display: flex;
    flex-direction: column;
    /* Box Model */
    background-color: #2b2c30;
}

.client_chat_window__chat__message {
    /* Box Model */
    width: 80%;
    padding: 1rem;
    /* Typography */
    color: #ffffff;
    /* Visibility */
    opacity: 0;
    transform: translateY(10px);
    /* Transitions & Animations */
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.client_chat_window__chat__message.visible {
    /* Visibility */
    opacity: 1;
    transform: translateY(0);
}

.client_chat_window__chat__message__sender {
    /* Positioning */
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Box Model */
    margin-bottom: 0.3rem;
}

.client_chat_window__chat__message__sender img {
    /* Box Model */
    width: 8%;
    height: 8%;
    border-radius: 30px;
}

.client_chat_window__chat__message__sender span {
    /* Box Model */
    margin-left: 0.5rem;
}

.client_message {
    /* Positioning */
    align-self: start;
    /* Typography */
    font-family: 'Roboto';
}

.client_message .client_chat_window__chat__message__content {
    /* Positioning */
    align-self: start;
    /* Box Model */
    background-color: #54565d;
    padding: 0.6rem;
    border: 1px solid #1f1f22;
    border-radius: 0.2rem;
}

.proton_studios_message {
    /* Positioning */
    align-self: end;
    /* Typography */
    font-family: 'Roboto';
}

.proton_studios_message .client_chat_window__chat__message__content {
    /* Positioning */
    align-self: end;
    /* Box Model */
    background-color: #36ae4e;
    padding: 0.6rem;
    border: 1px solid #174420;
    border-radius: 0.2rem;
}

/* ----------------------------------------------------- */