.order_container {
    display: flex;
    flex-flow: column nowrap;
}
.order_container h4 {
    background-color: #2a354b;
    padding: 8px 12px;
    color: white;
    border-style: none none solid none;
    border-color: white;
    border-width: 1px;
    margin: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    font-size: 11pt;
    z-index: 999;
    height: 35px;
}
.order_container h4 img {
    max-height: 20px;
    cursor: pointer;
}
.order_container select {
    background-color: rgba(0,0,0,0);
    border: none;
    outline: 0;
    border-radius: 5px;
    font-size: inherit;
    font-family: inherit;
}
.order_container .core_information {
    display: grid;
    grid-auto-rows: auto;
    overflow: hidden;
}
.order_container .core_information .middle_header {
    background-color: #2a354b;
    color: white;
    padding: 8px 12px;
    border-style: none none solid none;
    border-color: white;
    border-width: 1px;
    font-size: 10pt;
}
.order_container .core_information .team_members {
    display: flex;
    flex-flow: column nowrap;
    overflow: hidden auto;
    gap: 5px;
    transition: all .3s ease-in-out;
}
.order_container .core_information .team_members .team_member span {
    border: revert;
    padding: revert;
}
.order_container .core_information .team_members .team_member {
    padding: 12px 16px;
    border-style: none none solid none;
    border-color: white;
    border-width: 1px;
    display: flex;
    justify-content: space-between;
}
.order_container .core_information .team_members .team_member input {
    background-color: rgba(0,0,0,0);
    border-style: none none solid none;
    border-width: 1px;
    border-color: gray;
    outline: 0;
}
.order_container .core_information .team_members .team_member input[type="number"] {
    width: 35px;
    text-align: right;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}
.order_container .core_information .team_members .team_member .team_values {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.order_container .core_information .attr, .order_container .core_information .attr_value {
    position: relative;
    padding: 8px 12px;
    border-style: none none solid none;
    border-color: white;
    border-width: 1px;
    font-size: 10pt;
}
.order_container .core_information .attr_value {
    background-color: lightgray;
}
.order_container .core_information .attr {
    background-color: #ababab;
}
.order_container .core_information .user {
    background-color: #96ffad;
}
.order_container .core_information .intern {
    border-right-color: red;
    border-right-width: 2px;
    border-right-style: solid;
}
.order_container .core_information .group_intern {
    border-right-color: cyan;
    border-right-width: 2px;
    border-right-style: solid;
}
.order_container .core_information .foreigner {
    background-color: #de90ca;
}

.order_container .core_information .file {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    font-size: 10pt;
    border-style: none none solid none;
    border-color: white;
    border-width: 1px;
}

.order_container .core_information .comment_header, .order_container .core_information .comment {
    display: flex;
    flex-flow: column nowrap;
    gap: 10px;
    font-size: 10pt;
    padding: 12px 16px;
}
.comment_header {
    word-break: break-all;
}
.order_container .core_information .comment {
    overflow: hidden auto;
    max-height: 1000px;
    background-color: lightgray;
}
.order_container .core_information h5 {
    color: white;
    margin: 0;
    padding: 6px 8px;
    border-radius: 12px;
}
.order_container .core_information .comment .value_content {
    border: none;
}
.order_container .core_information .system {
    background-color: #ffb1b1;
}
.order_container .show_hide {
    max-height: 20px;
    cursor: pointer;
    transition: all .3s ease-in-out;
}
.order_container .file_spaces {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    overflow: auto hidden;
    justify-content: flex-start;
}
.order_container .file_spaces .item {
    transition: all .3s ease-in-out;
    border-style: none none solid none;
    border-color: #2a354b;
    border-width: 1px;
    padding: 6px 8px;
}
.order_container .file_spaces .item:hover {
    background-color: #46587d;
    border-style: none none solid none;
    border-color: red;
    border-width: 1px;
    cursor: pointer;
}
.order_container .file_spaces .active {
    border-style: none none solid none;
    border-color: red;
    border-width: 1px;
}
.order_container .write_comment {
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    font-size: 10pt;
    padding: 12px 16px;
    background-color: lightgray;
    border-style: none none solid none;
    border-color: white;
    border-width: 1px;
}
.order_container .write_comment .is_mail_true {
    display: none;
    flex-flow: column wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}
.order_container .write_comment input[type="text"], .order_container .write_comment textarea, .order_container .write_comment select {
    border-style: none none solid none;
    border-color: black;
    border-width: 1px;
    background-color: rgba(0,0,0,0);
    outline: 0;
    font-size: 10pt;
    font-family: inherit;
    padding: 4px 6px;
    min-width: 400px;
    max-width: 400px;
}
.order_container .write_comment textarea {
    height: 150px;
}
.order_container .write_comment .is_mail {
    display: flex;
    flex-flow: row nowrap;
    gap: 10px;
    align-items: center;
}
.comment_attachments {
    padding: 4px 6px;
    width: 400px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: standard_italic;
    font-size: 9pt;
    border: 1px solid gray;
    cursor: pointer;
    border-radius: 0.25rem;
    word-break: break-all;
}
.attachment_table {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    font-size: 9pt;
    border: 1px solid gray;
    gap: 10px;
    padding: 6px 8px;
    width: calc(100% - 16px);
}
.attachment_table i {
    text-decoration: underline;
    transition: all .3s ease-in-out;
}
.attachment_table i:hover {
    cursor: pointer;
    text-decoration-color: red;
}
.tag, .actions {
    display: flex;
    width: 100%;
    gap: 10px;
}
.inner_tag {
	display: flex;
	flex-flow: row nowrap;
	gap: 20px;
}
.delete_comment, .edit_comment {
    transition: all .3s ease-in-out;
    border-radius: 35%;
    padding: 4px;
}
.delete_comment:hover {
    cursor: pointer;
    background-color: #fc5044;
}
.edit_comment:hover {
    cursor: pointer;
    background-color: #b8b8b8;
}
.actions { justify-content: flex-end; }
.file_upload { height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-box-shadow:inset 0px 0px 0px 2px #919191; -moz-box-shadow:inset 0px 0px 0px 2px #919191; box-shadow:inset 0px 0px 0px 2px #919191; }
.file_upload_highlight { -webkit-box-shadow:inset 0px 0px 0px 2px red; -moz-box-shadow:inset 0px 0px 0px 2px red; box-shadow:inset 0px 0px 0px 2px red; }

.group_list {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-auto-rows: auto;
    row-gap: 5px;
    max-width: 400px;
    min-width: 400px;
    text-align: center;
}
.group_list > div {
    display: flex;
    flex-flow: column nowrap;
    gap: 5px;
    border: 1px solid rgb(128, 128, 128);
    padding: 12px;
}
.group_list > div > div {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.group_list > div > div > img {
    transform: rotate(90deg);
    max-height: 15px;
    cursor: pointer;
}

/* MOBILE CHANGES */

@media only screen and (min-width: 800px) {
    .order_container .core_information { grid-template-columns: 220px auto; }
	.order_container .core_information .middle_header { grid-column: 1/3; }
	.order_container .core_information .comment_header, .order_container .core_information .comment { align-items: flex-start; }
	.order_container .core_information .file > img { max-height: 400px; max-width: 100%; }
	.tag, .actions { align-items: center; justify-content: space-between; flex-flow: row wrap; }
	.order_container .core_information .file { flex-flow: row wrap; align-items: center; }
    .span_header_desktop {
        cursor: pointer;
        margin-right: auto;
        margin-left: 15px;
        max-width: calc(100% - 250px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .span_header_mobile { display: none; }
}
@media only screen and (max-width: 800px) {
    .order_container .core_information { grid-template-columns: 100%; }
	.order_container .core_information .middle_header { grid-column: 1/2; }
	.order_container .core_information .comment_header, .order_container .core_information .comment { align-items: center; }
	.order_container .core_information .comment_header > img { max-height: 20px!important }
	.order_container .core_information .file > img { max-width: 100%; }
	.order_container .core_information .file { flex-flow: column nowrap; align-items: center; }
	.tag, .actions { align-items: center; flex-flow: column nowrap; }
    #order_content { overflow: auto hidden; }
    .order_container .write_comment input[type="text"],
    .order_container .write_comment textarea,
    .order_container .write_comment select {
        min-width: calc(100% - 12px);
        max-width: calc(100% - 12px);
    }
    .span_header_desktop { display: none; }
    .span_header_mobile {
        margin-right: auto;
        margin-left: 5px;
        max-width: calc(100% - 15px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .group_list {
        display: grid;
        grid-template-columns: 100%;
        grid-auto-rows: auto;
        row-gap: 5px;
        max-width: 100%;
        min-width: 100%;
        text-align: center;
    }
    .gr_ls_avail { grid-row: 1; }
    .gr_ls_sel { grid-row: 3; }
    .comment_attachments { width: calc(100% - 12px)}
    .is_mail_true { width: 100%; }
    .comment { padding: 6px!important; }
    .order_container h4 { font-size: 9pt!important; }
    #open_comment_creation { font-size: 9pt!important; }
}