.content a {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .section_main {
        padding: 20px 5px 20px 5px;
    }

    .section_main h1:first-child {
        margin-left: 0px;
    }
}

/* borderless .box */
.box-borderless {
    border-top: 1px;
    box-shadow: none;
    padding: 0px;
}

/*navigation styling*/
#main-navigation .section-icon {
    color: cornflowerblue;
    font-size: 1.8em;
    vertical-align: middle;
    margin-right: 0.2em;
}

.aside__links .navSection {
    font-size: 1.2em;
    color: #103e59
}

/*border-red*/
.border-red {
    border: 1px solid red;
}

/*form*/
.decorated-form {
    border: 1px solid #d2d6de;
    padding: 1em;
    border-radius: 5px;
    margin-bottom: 1em;
}

.decorated-form .form-control {
    /*width: auto;*/
}

/* app buttons */
.view-order-button {
    display: inline-block;
    border: 1px solid #358EB8;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 0.5em;
    margin-right: 0.5em;
    box-shadow: 4px 4px lightgrey;
}

.view-order-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    cursor: pointer;
}

/* override theme button with extra styling (shadow) */
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    cursor: pointer;
}


/* Request order status button */
.statusButton {
    color: #bd9124;
    border-color: #926d11;
}

.statusButton:hover {
    color: white;
    text-decoration: none;
    background-color: #bd9124;;
}

/* Filemanager button */
.filemanagerButton {
    color: #386aad;
    border-color: #386aad;
}

.filemanagerButton:hover {
    color: white;
    text-decoration: none;
    background-color: #386aad;;
}

/* Order messagesboard button */
.messageboardButton {
    color: #187f1d;
    border-color: #187f1d;
}

.messageboardButton:hover {
    color: white;
    text-decoration: none;
    background-color: #187f1d;;
}

/* Rate order button */
.rateOrderButton {
    color: #c77724;
    border-color: #c77724;
}

.rateOrderButton:hover {
    color: white;
    text-decoration: none;
    background-color: #c77724;;
}

/* Rate order button */
.upgradeOrderButton {
    color: #216892;
    border-color: #216892;
}

.upgradeOrderButton:hover {
    color: white;
    text-decoration: none;
    background-color: #216892;
}
/* Download order button */
.downloadOrderButton {
    color: #358EB8;
    border-color: #358EB8;
}

.downloadOrderButton:hover {
    color: white;
    text-decoration: none;
    background-color: #358EB8;;
}

/* Request revision and cancel order buttons */

.revisionOrderButton, .cancelOrderButton {
    color: #8A000D;
    border-color: #8A000D;
}

.revisionOrderButton:hover, .cancelOrderButton:hover {
    color: white;
    text-decoration: none;
    background-color: #8A000D;;
}

.app-button-small {
    display: inline-block;
    border: 1px solid #358EB8;
    padding: 2px;
    border-radius: 5px;
    margin-bottom: 0.2em;
}

.app-button-small:hover {
    text-decoration: none;
}

/* Wrapping long lines in the container */
/*https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/*/
.dont-break-out {

    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* DropZone component */
.dropZone-default {
    position: relative;
    width: 100%;
    height: auto;
    border-width: 2px;
    border-color: rgb(102, 102, 102);
    border-style: solid;
    border-radius: 5px;
    text-align: center;
    vertical-align: middle;
}

.dropZone-default:hover {
    cursor: pointer;
    border-color: white;
}

.dropZone-active {
    border-color: green;
    border-style: solid;
    opacity: 0.2;
}

.dropZone-accepted {
    border-color: green;
    border-style: solid;
    opacity: 0.2;
}

/* File manager */
.attachment-item {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

.attachment-item:hover {
    background-color: #F5F5F5;
}

/* orderS table (overrides specific table styling in theme.css) */
.ordersTable > thead > tr > th {
    text-align: center;
}

.ordersTable > tbody > tr > th,
.ordersTable > tfoot > tr > th,
.ordersTable > thead > tr > td,
.ordersTable > tbody > tr > td,
.ordersTable > tfoot > tr > td {
    vertical-align: middle;
    color: #1A698F;
}

.cursor-pointer:hover {
    cursor: pointer;
}

/* order statuses for badges*/
.openOrderStatus {
    background-color: #1173B7;
    color: white;
}

.pendingOrderStatus {
    background-color: #FB841C;
    color: white;
}

.revisionOrderStatus {
    background-color: #DD4B38;
    color: white;
}

.completedOrderStatus {
    background-color: #2BA659;
    color: white;
}

.canceledOrderStatus {
    background-color: #F49C13;
    color: white;
}

/* order statuses colors */
.openOrderStatusColor {
    color: #1173B7;
}

.pendingOrderStatusColor {
    color: #FB841C;
}

.revisionOrderStatusColor {
    color: #DD4B38;
}

.completedOrderStatusColor {
    color: #2BA659;
}

/** Chat **/
.chatMessage {
    background-color: #FAF8F7;
    padding: 0.5em;
    border-radius: 5px;
    margin-bottom: 1em;
}

.customerChatMessage {
    background-color: #ECF9FD;
}

.writerChatMessage {
    background-color: #edfcee;
}

.supportChatMessage {
    background-color: #f9f9ed;
}

.systemChatMessage {
    background-color: #FAF8F7;
}