﻿/* 
    Piedmont Color Scheme 
    dark blue:#5425
    light blue: #c2ddf0 
    yellow: #f6f11a

    foursite-red: #bb2d26;
    secondary: #8c9fb5;
    text-secondary: #757982;
    white: #ffffff;
*/

/* General Styling */

.main-content {
    margin-left: 5rem;
    margin-right: 5rem;
    margin-bottom: 5rem;
}

.bottom-spacer-1 {
    margin-bottom: 1rem;
}

.bottom-spacer-2 {
    margin-bottom: 2rem;
}

.bottom-spacer-3 {
    margin-bottom: 3rem;
}

.spacer-1 {
    height: 1rem;
}

.spacer-2 {
    height: 2rem;
}

.spacer-3 {
    height: 3rem;
}

.child-component-additional-top-dropdown {
    margin-top: -1.5rem;
}
.negate-child-component-additional-top-dropdown {
    margin-top: 1.5rem;
}

.text-gray {
    color: #999999 !important;
}

.drop-down-label {
    color: #757982;
}

.responsive-img {
    width: 100%;
    height: auto;
}

.no-border {
    border-style: none !important;
}

.drop-down-button {
    margin-top: 1.6rem;
}

.match-body-background-color {
    background-color: #eee;
}

.next-to-dropdown {
    margin-top: -1.5rem;
}

.next-to-dropdown-br {
    display: none;
}

/* Text Styling */
.text-primary {
    color: #bb2d26 !important;
}

/* Button Styling */
.button-lg {
    width: 10rem !important;
}

.button-sm {
    width: 7rem !important;
}

/* Body Styling */
body {
    background-color: #eee;
    color: #3C4858;
    font-weight: 300;
}

/* Card Styling */

.card-body-padding {
    padding: 1.25rem 1.25rem;
}

.custom-card {
    border-style: solid;
    border-width: 1px;
    border-color: #8c9fb5;
    border-radius: 25px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.customer-card-stretch-wrapper-event-details {
    height: 24rem;
}

.custom-card-header {
    font-weight: bold;
    color: #757982;
    padding-bottom: 1rem;
}

//-no-padding- will not be recognized at the end of .custom-card-header
//so I needed to put it in the middle.
.custom-no-padding-card-header {
    font-weight: bold;
    color: #757982;
}

.customer-dashboard-stats {
    height: 8rem;
}

.custom-customer-card-header {
    font-weight: bold;
    color: #757982;
    padding-top: 1em;
    height: 30%
}

.custom-card-content {
    color: #bb2d26 !important;
    padding-bottom: 2em;
    height: 70%;
}

.custom-card-content-no-padding {
    color: #bb2d26 !important;
}

.custom-customer-card-content {
    color: #bb2d26 !important;
    padding-bottom: 1em;
}

.card-in-tab-view {
    border: none;
}

/* Telerik Text Box Styling */
.admin-filter-text-box {
    width: 12rem !important;
}

/* Telerik Dialog Styling */
.k-dialog-wrapper {
    z-index: 1000 !important; /* It's Important to keep this z-index so we can use radzen dropdowns on Telerik dialogs */
}

/* Telerik Window Dialog Styling */
.k-window-titlebar {
    white-space: normal;
    font-weight: 700;
}

/* Telerik Grid Styling */
.k-grid {
    max-height: 40rem;
}

.k-grid-container {
    min-height: 10rem;
}

.k-grid .k-grid-header th .k-cell-inner,
.k-grid .k-grid-header th .k-cell-inner > .k-link {
    display: block; /*defaults to flex which makes aligning text harder in it*/
    white-space: normal;
}

.k-column-title {
    white-space: normal;
}

.k-header > .k-cell-inner {
    margin: 0;
}

/* Telerik Grid Pagination Styling */
.k-pager-numbers .k-link.k-state-selected {
    border-color: #8c9fb5;
    color: #ffffff;
    background-color: #8c9fb5;
}

.k-pager-nav.k-link, .k-pager-refresh {
    border-color: #dee2e6;
    color: #8c9fb5;
    background-color: #ffffff;
}

/* Telerik Button Styling */
.excel-export-button {
    background-color: #ffffff;
    border: none;
    color: #000000;
}

.excel-export-button:hover {
    background-color: #8c9fb5;
    color: #ffffff;
}

.admin-filter-search-button {
    margin-top: 1.5rem;
}

.k-button {
    color: #fff;
    background-color: #8c9fb5;
}

.grid-action-button {
    width: 2.5rem;
}

/* Telerik Tab View Styling */
.rz-tabview-panels {
    border: solid 1px #8c9fb5;
}

.rz-tabview-nav .rz-tabview-selected {
    border-top-color: #8c9fb5;
    border-left-color: #8c9fb5;
    border-right-color: #8c9fb5;
}

.rz-state-active a[role='tab'] {
    color: #8c9fb5;
}

.rz-state-active a[role='tab'] .rz-tabview-title {
    color: black;
}

.rz-state-active a[role='tab']:hover {
    border-top-color: #8c9fb5;
}

/* General Telerik Styling */
.telerik-components-desktop {
    display: block;
}

.telerik-components-mobile {
    display: none;
}

/* Radzen Grid Styling */
.rz-datatable-thead th, .rz-grid-table thead th {
    white-space: normal;
    word-break: break-all;
}

.rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data {
    white-space: normal;
    word-break: break-all;
}

.rz-datatable-tfoot td, .rz-grid-table tfoot td {
    white-space: normal;
    word-break: break-all;
}

/* Radzen Button Styling */
.rz-button, .rz-paginator-first, .rz-paginator-prev, .rz-paginator-last, .rz-paginator-next {
    color: #fff;
    background-color: #8c9fb5 !important;
}

/* Radzen Tab Styling */
ul[role=tablist] {
    flex-wrap: wrap;
}

/* Mobile Styling */
@media(max-width: 943px) {
    .next-to-dropdown-br {
        display: block;
    }

    .next-to-dropdown-button {
        margin-top: 0.35rem;
    }
}

@media(max-width: 835px) {
    .customer-card-stretch-wrapper-event-details {
        height: 28rem;
    }
}

@media(max-width: 767px) {
    .customer-card-stretch-wrapper-event-details {
        height: 24rem;
    }
}

@media(max-width: 750px) {
    .main-content {
        margin-left: 1rem;
        margin-right: 1rem;
        margin-bottom: 1rem;
    }

    /* Telerik Grid Pagination Styling */
    .k-pager-numbers-wrap {
        display: none;
    }
}

@media(max-width: 575px) {
    .drop-down-button {
        margin-top: 0;
    }

    /* General Telerik Styling */
    .telerik-components-desktop {
        display: none;
    }

    .telerik-components-mobile {
        display: block;
    }
}

@media(max-width: 486px) {
    .next-to-dropdown-mobile {
        margin-top: 0.35rem;
    }
}

@media(max-width: 430px) {
    .customer-card-stretch-wrapper-event-details {
        height: 28rem;
    }
}