#orders {
    
}

#orders > h2 {
    margin-bottom: 5px;

    font-family: var(--alt-font);
    font-size: 26px;
    letter-spacing: 1px;
    color: var(--color-link);
}

    #orders > h2:not(:first-child) {
        margin-top: 20px;
    }

#orders .list {
    margin: 0;
    padding: 0;
    
    list-style: none;
}

    #orders .list li {
        margin-bottom: 10px;
        padding: 10px 0;
        
        background-color: var(--bg-coloor-alt);
        border-radius: 3px;
    }
    
        #orders .list li .quick-info {
            overflow: hidden;
            padding: 0 10px;
            
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: flex-start;
        }
        
            #orders .list li .quick-info > div {
                float: left;
                margin: 0 20px 0 0;
            }
            
            #orders .list li .quick-info > div.nav {
                float: right;
                margin: 0;
            }
            
            #orders .list li .quick-info > div.nav a {
                display: inline-block;
            }
            
            #orders .list li .quick-info strong {
                display: block;
            }
            
    #orders .basket {
        width: 100%;
        margin-top: 15px;
        border-top: 4px solid rgba(255, 255, 255, 0.2);
    }
    
    #orders .basket th, #orders .basket td {
        padding: 5px 10px;
    }
    
        #orders .basket thead th {
            width: 1%;

            font-family: var(--alt-font);
            font-size: 22px;
            font-weight: normal;
            letter-spacing: 1px;
            text-align: center;
        }
        
        #orders .basket thead th:first-child {
            width: auto;
            text-align: left;
        }
        
        #orders .basket tbody strong {
            display: block;
            
        }
        
        #orders .basket tbody td {
            background: rgba(255, 255, 255, 0.3);
        }
        
            #orders .basket tbody td.price {
                white-space: nowrap;
                text-align: right;
            }

            #orders .basket tbody td.quantity {
                text-align: center;
            }

            #orders .basket tbody td.total {
                white-space: nowrap;
                text-align: right;
            }
            
            #orders .basket tfoot .discount,
            #orders .basket tfoot .voucher {
                font-weight: bold;
            }
            
                #orders .basket tfoot .voucher td:not(:first-child):last-child {
                    text-align: right;
                    font-weight: normal;
                }
            
                #orders .basket tfoot .discount td:last-child {
                    text-align: right;
                    font-weight: normal;
                }
                
                #orders .basket tfoot .ups-direct td:first-child {
                    text-align: right;
                }
                #orders .basket tfoot .ups-direct td:last-child {
                    text-align: right;
                }
                
                #orders .basket tfoot .rank-discount td:first-child {
                    text-align: right;
                }                
                #orders .basket tfoot .rank-discount td:last-child {
                    text-align: right;
                }
                
                #orders .basket tfoot .total-price td:first-child {
                    text-align: right;
                    font-weight: bold;
                    color: var(--color-link);
                }                
                #orders .basket tfoot .total-price td:last-child {
                    text-align: right;
                }
                
#orders .logs {
    margin: 0;
    padding: 0;
    
    list-style: none;
}

    #orders .logs > li {
        margin: 0 0 5px 0;
        padding: 5px 10px;
        background-color: var(--bg-coloor-alt);
    }
        #orders .logs > li.from-user {
            margin: 0 0 5px 50px;
            background-color: rgba(0, 0, 0, 0.2);
        }
    
        #orders .logs > li small i {
            margin-right: 3px;
        }
        
        #orders .logs > li small span {
            margin-right: 10px;
        }
        
#feedback-form {
    padding: 10px 10px 15px 10px;
    background-color: var(--bg-coloor-alt);
}

    #feedback-form .faq {
        
    }
    
        #feedback-form .faq .text {
            display: none;
            margin: 0 0 15px 0;
            padding: 0;
        }
        
        #feedback-form .faq .current .text {
            display: block;
            animation: fade-in 0.3s ease-out;
        }
        
        #feedback-form .faq > div {
            padding: 0 5px;
        }

        #feedback-form .faq h6 {
            margin-bottom: 5px;
            font-size: 16px;
            color: var(--color-link);
            cursor: pointer;
            
            text-decoration: underline;
        }
        #feedback-form .faq h6:hover {
            text-decoration: none;
        }
        
        #feedback-form .faq button {
            display: none;
            margin-top: 10px;
            
            border: none;
            background: none;
               
            font-weight: bold;
            font-size: 16px;
            color: var(--color-link);
            text-decoration: underline;
            cursor: pointer;
        }
            #feedback-form .faq button:hover {
                text-decoration: none;
            }
        
        #feedback-form .faq.active button {
            display: block;
        }
        
        #feedback-form .faq > div:last-child .text {
            margin-bottom: 0;
        }
        
        #feedback-form.with-faq .question, #feedback-form.with-faq nav {
            display: none;
        }
        
        #feedback-form.with-faq .active {
            display: block;
        }
        
        #feedback-form.with-faq .question.active, #feedback-form.with-faq nav.active {
            animation: fade-in 0.3s ease-out;
        }