@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;600;700&display=swap');

* {font-family: Gabarito, sans-serif;}

body {
    background-color: #311A3B;
}

#login_form {
    padding-top:3rem;
}

.navi_row {
    border-top: 2px solid #6F2A8E !important;
    border-bottom: 2px solid #6F2A8E !important;
    background-color: white !important;
}

.navi {
    background-color: white !important;
    border-radius: 0 !important;
}

.navi, .navi *, .navi a:hover {
    color: #6F2A8E !important;
    font-size:1.3rem !important;
}

.support_footer {
    border-radius: .3rem;
    background-color: #dedede;
}

.support_footer a, .support_footer * {
    color: #333 !important;
}

.support_footer a {
    text-decoration: underline !important;
}

.support_footer i {
    display: inline-block;
    font-size: 1.6em; /* Increase the size as you see fit */
    vertical-align: middle;
    margin-right: 0.5em; /* Optional: adds some spacing between the icon and the text */
    background-color:white;
    border: 1px solid white;
}

.btn-primary {
    background-color: #47AA42 !important;
    border-color: #47AA42 !important;
}

.btn-primary:hover {
    background-color: #267122 !important;
    border-color: #267122 !important;
}

.top_login_spacer {
    display: none !important;
}

button.sel, .btn-primary.sel, .tag_button.sel, .btn-primary.button_if_preview {
    background-color: #6F2A8E !important;
    border-color: #6F2A8E !important;
}

.root_tool_box {
    display: none !important;
}

.content_box {
    border: 2px solid #666;
    border-radius:.5rem;
    padding:.8rem;
}

.blue_box {
    border: 0;
    background-color: #E1F1F7;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.readmore, .readmore:hover {
    background-color: transparent !important;
    border: 1px dashed #6F2A8E !important;
    color: #6F2A8E !important;
}

.topline {
    color: #6F2A8E !important;
}

.page_navi {
    background-color: #6F2A8E !important;
    color: white !important;
}

.pages_nav_row {
    padding: .3rem .8rem .3rem .8rem !important;
    background-color: #6F2A8E !important;
    color: white !important;
    margin-bottom: 1rem;
}

.pages_nav a {
    text-decoration: none;
    color: white !important;
    font-size: 1.2rem !important;
}

.pages_nav a:hover {
    text-decoration: underline !important;
}

.related {
    color: #267BD9 !important;
}

.well.seasonal_well {
    border:2px solid skyblue;
    border-radius: .5rem;
    padding:.5rem;
    background: linear-gradient(to bottom, #F8FCFF 100%, #E8F2F9 0%);
    height: auto !important;
}

.link_box {
    border:3px solid skyblue;
    border-radius: .5rem;
    background: linear-gradient(to bottom, #F8FCFF 100%, #E8F2F9 0%);
}

.category_heading {
    color: #6F2A8E !important;
}

.ribbon-wrapper {
    position: relative;
    overflow: hidden;
    /* Set the size as needed, possibly to match .col */
}

.XXnew_notice {
    position: absolute;
    top: 0;
    right: -20px; /* Adjust as needed */
    transform: rotate(45deg);
    background-color: red;
    color: white;
    padding: 5px 20px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    /* Additional styling */
}

.new_notice {
    font-weight: bold !important;
    text-align: center !important;
    position: absolute;
    top: 0;
    left: -30px; /* Adjust to position the ribbon at the left edge */
    transform: rotate(-45deg); /* Rotate the ribbon to align it diagonally at the top left */
    background-color: red; /* Ribbon color */
    color: white; /* Text color */
    padding: 5px 40px 5px 30px; /* Padding for the ribbon text */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3); /* Shadow for a 3D effect */
    /* You can add more styling as per your design needs */
}

#edit_item_modal_product_chooser {
    max-height: 30vh !important;
    overflow-y: auto !important;
    border:2px solid #666;
    margin: .5rem 0 .5rem 0;
}

[data-date_range] {
    display:none;
}

[data-date_range].show_me {
    display:block;
}