/*
 * Regularly used fonts
 */
@font-face {
    font-family: 'montserrat_extralight';
    src: url('/fonts/Montserrat-ExtraLight.ttf');
}

@font-face {
    font-family: 'montserrat_italic';
    src: url('/fonts/Montserrat-Italic.ttf');
}

@font-face {
    font-family: 'montserrat_light';
    src: url('/fonts/Montserrat-Light.ttf');
}

@font-face {
    font-family: 'montserrat_medium';
    src: url('/fonts/Montserrat-Medium.ttf');
}

@font-face {
    font-family: 'montserrat_regular';
    src: url('/fonts/Montserrat-Regular.ttf');
}

@font-face {
    font-family: 'montserrat_bold';
    src: url('/fonts/Montserrat-Bold.ttf');
}

/*
 * CSS variables
 */
:root {
    /*
    * Regularly used colors
    */


    /* The primary color */
    --primary_color: #eb3c3c;
    /* The secondary color */
    --secondary_color: #e7745d;
    /* An accent or fade-out color */
    --accent_color: #f0f0f0;
    /* Used for situations where a light tint is desired  */
    --subtitle_color: #4a4a4a;
    /* Color used for success messaging. */
    --success_color: #33b535;
    /* Color used for error messaging. */
    --error_color: #d21129;

    /*
     * Size variables
     */

    --sidebar_width: 275px;
    --topbar_height: 55px;
    --main_padding: 35px;
}
/*
 * General styling of the main elements
 */
html,body
{
    font-family: montserrat_regular, sans-serif;
    background-color: var(--accent_color);
}

/** Topbar styling */
#topbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--primary_color);
    z-index: 10;
}

#topbar-flex-container {
    display: flex;
    align-items: center;
    height: var(--topbar_height);
    margin-left: var(--sidebar_width);
    padding-left: var(--main_padding);
    padding-right: var(--main_padding);
    justify-content: flex-end;

    /* Animation */
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

#page-header {
    margin-right: auto;
}

#page-header, #logout{
    color:white !important;
    font-size:20px;
}

#logged-in-as {
    color: white;
    padding-right: 25px;
}

#logged-in-as span:first-child {
    font-family: montserrat_extralight, sans-serif;
}

#logged-in-as span:nth-child(2) {
    font-family: montserrat_regular, sans-serif;
}

#logout, .navbar-toggler, #logged-in-as {
    justify-content: flex-end;
}

.navbar-toggler {
    display:none;
}

#sidebar-toggler{
    display:none;
    margin-right: -15px;
    padding-right: 15px;
    margin-left: 20px;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
    cursor: pointer;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox='0%200%2030%2030'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20stroke='rgba(255,%20255,%20255,%2001)'%20stroke-width='2'%20stroke-linecap='round'%20stroke-miterlimit='10'%20d='M4%207h22M4%2015h22M4%2023h22'/%3E%3C/svg%3E");
}

/** Main styling */
main {
    display: flex;
    margin-left: var(--sidebar_width);
    margin-top: var(--topbar_height);
    flex: 1;

    /* Animation */
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

#main-flex-container {
    display: flex;
    overflow: hidden;
    padding: var(--main_padding);
    flex-direction: column;
    flex: 1;
}

/** Sidebar styling */
#sidebar {
    position: fixed;
    top: 0;
    height: 100vh;
    background-color: white;
    width: var(--sidebar_width);
    z-index: 20;

    /* Animation */
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

#sidebar-flex-container {
    height: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
}

#side-menu {
    height: 100%;
    max-height: calc(100% - 165px);
    overflow-y: auto;
}

#sidebar li {
    border-bottom: 1px solid #e7e7e7;
}

#brand-box:hover, #page-header, #logout {
    text-decoration: none;
}

#brand-head{
    padding-top: 15px;
    color: var(--primary_color) !important;
    font-size: 20px;
    font-family: montserrat_bold, sans-serif;
    text-align: center;
    text-shadow: 0.5px 1px 0.75px rgba(0,0,0,0.3);
}

#brand-subhead{
    font-size: 14px;
    font-family: montserrat_extralight, sans-serif;
    text-align: center;
    padding-bottom: 15px;
    color: black;
}

.nav-link {
    color: black;
    -o-transition:0.15s;
    -moz-transition:0.15s;
    -webkit-transition:0.15s;
    transition:0.15s;
    padding: 15px 15px 15px 30px !important;
    font-size: 16px;
    font-family: montserrat_medium, sans-serif;
    text-transform: uppercase;
}

.nav-link:hover {
    color: var(--secondary_color) !important;
    text-shadow: 0 0 0.25px grey;
    background-color: rgb(238,238,238);
}

.menu-icon {
    color: var(--secondary_color) !important;
    font-size: 18px;
    padding-right: 30px;
}

/** Brand logo in the bottom left */
.menu-logo {
    position:absolute;
    padding-left: calc(var(--sidebar_width) / 2 - 77px); /* 144 is the width of the image */
    padding-bottom: 15px;
    bottom: 0;
}

/*
 * Styling for input elements
 */
input[type=text]:not(.full-input), input[type=search]:not(.select2-search__field), input[type=number], .select2-selection, textarea {
    font-family: montserrat_extralight, sans-serif;
    border-radius:30px !important;
    border-style: none !important;
    box-shadow: 1px 2px 3px lightgrey, -1px 2px 3px lightgrey;
    transition: box-shadow 0.15s ease-in-out;
}


input[type=text]:not(.full-input), input[type=search]:not(.select2-search__field), input[type=number] {
    line-height: 32px;
}

/* Hide step counter input type number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}


.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
}

.select2-container--default .select2-selection--single {
    height: 34px;
}

.select2-selection__arrow {
    height: 30px !important;
}


input[type=text]:not(.full-input), input[type=search]:not(.select2-search__field), input[type=number], textarea, .select2-selection__rendered {
    padding-left: 13px;
    padding-right: 13px;
}

input[type=text]:not(.full-input):focus, input[type=search]:focus, input[type=number]:focus, .select2-selection[aria-expanded=true], textarea:focus {
    border-color: var(--primary_color);
    box-shadow: 0 0 8px var(--primary_color) !important;
    outline: none;
}

textarea {
    height: 106px !important;
    border-radius:7px !important;
    padding-top: 5px;
    padding-bottom: 5px;
    transition: box-shadow 0.15s ease-in-out;
}

.select2-selection {
    outline: none;
}

.select2-results__option {
    text-align: left;
    margin-top: 0;
    padding-left: 7px;
}

.select2-container--default .select2-results__option--highlighted {
    background-color: var(--primary_color) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--secondary_color);
    color:white;
}

/**Datepicker styling */
.bootstrap-datetimepicker-widget th, .bootstrap-datetimepicker-widget td {
    padding: 5px;
}

.bootstrap-datetimepicker-widget .today:not(.active)::before {
    border-bottom-color: var(--primary_color) !important;
}

.bootstrap-datetimepicker-widget .active{
    background-color: var(--primary_color) !important;
}

.bootstrap-datetimepicker-widget .picker-switch {
    padding-top: 7.5px;
    padding-bottom: 7.5px;
}

.bootstrap-datetimepicker-widget a {
    color: var(--primary_color);
}

.timepicker {
    margin-top: 7px;
}

/*
 * Styling for the DataTables
 */
.dataTable {
    border-spacing: 0 7px !important;
    border-bottom: 0 !important;
}

/* Table headers */
.dataTable > thead th {
    border-bottom: 0 !important;
    font-family: montserrat_regular, sans-serif;
}

/* Table cells */
.dataTable > tbody tr, .dataTable > thead tr {
    font-family: montserrat_extralight, sans-serif;
    /** It is better to color the cells instead of the rows */
    background-color: var(--accent_color) !important;
}

.dataTable td, .dataTable th {
    background-color: white !important;
}

/* Styling specific to sorted columns */
.dataTable th.sorting_asc, .dataTable th.sorting_desc {
    font-family: montserrat_bold, sans-serif;
}

.dataTable td.sorting_1 {
    font-family: montserrat_regular, sans-serif;
}

/*Rounding each table row */
.dataTable tr td:first-child, tr th:first-child {
    border-radius: 15px 0 0 15px;
    -moz-border-radius: 15px 0 0 15px;
}
.dataTable tr td:last-child, tr th:last-child {
    border-radius: 0 15px 15px 0;
    -moz-border-radius: 0 15px 15px 0;
}

.dataTables_empty {
    border-radius: 15px 15px 15px 15px !important;
}

/* The 'Show x entries' section */
.dataTables_length {
    margin-top: 4px;
}

.dataTables_length .select2-container {
    margin-left: 3px;
    margin-right: 3px;
    width: 55px !important;
}


/** Paginate buttons */
.dataTables_wrapper .dataTables_paginate {
    border-radius: 5px;
    padding: 0 !important;
    margin-top: 10px !important;
    border: 1px solid #ddd !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--primary_color) !important;
    margin: 0 !important;
    border-right: 1px solid #ddd !important;
}

/** On hover non-disabled paginate buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: white !important;
    background: none;
    background-color: var(--secondary_color) !important;
    border-color: var(--secondary_color) !important;
}

/** On hover disabled paginate buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: none;
    margin: 0 !important;
    border-color: #ddd !important;
    background-color: #eee !important;
    border-right: 1px solid #ddd !important;
}

/** Current pagination button normal and on hover */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: none;
    color: #ffffff !important;
    border-color: var(--primary_color) !important;
    background-color: var(--primary_color) !important;
    cursor: default !important;
}

/*
 * Button styling.
 * Whenever you use buttons, use at least class button and one of the below.
 *
 * button-success is used for actions with a positive expectation.
 * button-fail is used for negative actions
 * button-cancel is used for neutral actions.
 */
.button {
    padding: 7px 18px;
    border-radius: 20px;
    border-style: none;
    cursor: pointer;
    font-family: montserrat_bold, sans-serif !important;
    text-transform: uppercase;
    width: 125px;
    height: 40px;
}

.button-success {
    background-color: var(--primary_color);
    color: white; !important;
    width: fit-content;
}

.button-cancel {
    background-color: white;
    border: 1px solid var(--primary_color);
    color: var(--primary_color);
    width: fit-content;
}

.button-fail {
    background-color: var(--error_color);
    color: white;
    width: fit-content;
}

/*
 * Modal styling
 */

.modal input[type=text], .modal input[type=number], .modal textarea, .modal .select2-container {
    width: 100% !important;
    margin-bottom: 15px;
}

.modal-header {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    border-bottom: 0;
}

.modal-body {
    padding-left: 2rem;
    padding-right: 2rem;
}

.modal-title {
    font-family: montserrat_bold, sans-serif;
    text-transform: uppercase;
}

/* Center the buttons in the footer*/

.modal-footer {
    justify-content: center;
    padding-bottom: 25px;
    border-top: none;
}

.modal-footer * {
    margin-left: 12px !important;
    margin-right: 12px !important;
}


/*
 * Flash session message styling
 */
.alert-danger{
    color: white;
    border-radius: 0;
    margin-bottom: 10px !important;
    background-color: var(--error_color);
    border: none;
}

.alert-success{
    color: white;
    border-radius: 0;
    margin-bottom: 10px !important;
    background-color: var(--success_color);
    border: none;
}

.alert-warning{
    color: white;
    border-radius: 0;
    margin-bottom: 10px !important;
    background-color: rgba(242, 146, 13, 0.7);
    border: none;
}

.alert-info{
    color: white;
    border-radius: 0;
    margin-bottom: 10px !important;
    background-color: rgba(42, 143, 215, 0.70);
    border: none;
}

/**
 * Image Upload styling
 */
.image-holder > img{
    width: 100%;
    margin-bottom: 15px;
}

label.custom-file-upload input[type="file"] {
    position: fixed;
    opacity: 0;
}

.custom-file-upload {
    display: block;
}

/*
 * Loading icons
 */
#loading-icon {
    top:calc(50% - 50px);
    position:absolute;
    left:calc(50% - 50px);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: spin ease-in-out 0.5s infinite;
    display: none;
    border: 16px solid var(--secondary_color); /* Light grey */
    border-top: 16px solid var(--primary_color);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*
 * Media Queries
 * Media Queries
 * Media Queries
/*

/*
 * Media query large size: < 1280px width
 */
@media screen and (max-width:1280px){
    #sidebar-toggler {
        display: block;
    }
    main, #topbar-flex-container {
        margin-left: 0;
    }
    #logged-in-as {
        display: none;
    }
}
/*
 * Media query medium size: < 770px width
 */
@media screen and (max-width:770px){
    .create-button {
        margin: 15px auto 0;
    }
}

/*
 * Media query small size < 525px.
 */
@media screen and (max-width:525px){
}

.datatable-price {
    width: 75px;
}