:root {
    --corp-green: #00a07e;
    --corp-green-active: #d1fae5;
    --sidebar-bg: #ffffff;
    --content-bg: #ffffff;

    --table-input-border: #766565;

    --table-title: rgb(96, 98, 99);
    --table-span: rgb(107, 109, 114);

    --details-btn: rgb(107, 109, 114);
    --details-btn-hover: rgba(107, 109, 114, 0.75);

    --delete-btn: rgb(217, 29, 29);
    --delete-btn-hover: rgba(217, 29, 29, 0.75);

    --page-btn-bg: #d1fae5;
    --page-btn: #00a07e;

    --details-sidepanel-bg: #ffffff;
}

/*#region Overriding Bootstrap Classes */

.container-fluid {
    padding: 0 !important;
}

.col {
    padding: 0 !important;
}

/*endregion*/

/*#region Wrapper */

#wrapper {
    overflow-x: hidden;
    font-family: Poppins;
}

/*endregion*/

/*#region Sidebar */

#sidebar-wrapper {
    min-height: 100vh;
    width: 400px;
    background-color: var(--sidebar-bg);
    margin-left: -15rem;
    margin-right: 6px;
    padding: 0;

    -webkit-transition: margin .25s ease-out;
    -moz-transition: margin .25s ease-out;
    -o-transition: margin .25s ease-out;
    transition: margin .25s ease-out;

    -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);;
    -moz-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

#sidebar-wrapper .sidebar-heading {
    padding: 20px 0 5px 25px;
}

#sidebar-wrapper .sidebar-heading h4 {
    color: var(--corp-green);
    font-size: 24px;
}

#sidebar-wrapper .list-group {
    width: 100%;
}

#sidebar-wrapper .list-group-item {
    background-color: transparent !important;
    margin: 5px 35px 5px 0;
    padding: 12px 28px;

    color: var(--corp-green);
    font-size: 18px;
    font-weight: 500;

    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;

    border: 0 !important;
}

#sidebar-wrapper .list-group-item.active {
    background-color: var(--corp-green-active) !important;
    border: 0 !important;
}

#sidebar-wrapper .list-group-item:hover {
    background-color: var(--corp-green-active) !important;
    text-decoration: none;
}

#wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
}

/*endregion*/

/*#region Page Content */

#page-content-wrapper {
    min-width: 100vw;
    background-color: var(--content-bg);
}

#page-content-wrapper .content-tab {
    padding: 20px 15px;
}

#page-content-wrapper .content-tab .alert {
    width: 400px;
}

/*endregion*/

/*region Table Design*/

#page-content-wrapper .content-tab table {
    width: 99%;
}

#page-content-wrapper .content-tab thead {
    background-color: #f7f7f7;
}

#page-content-wrapper .content-tab thead th {
    color: var(--table-title);
    font-weight: 600;
}

#page-content-wrapper .content-tab tbody span {
    color: var(--table-span);
    font-weight: 400;
}

#data-table-search-box {
    width: 220px;
    height: 40px;
    border-radius: 4px;

    margin-right: 15px;
}

#data-table-search-box:focus, #data-table-select-box:focus {
    border-color: var(--table-input-border);
    box-shadow: none !important;
}

.show-details {
    color: var(--details-btn);
}

.show-details:hover {
    color: var(--details-btn-hover);;
    text-decoration: none;
}

.delete-point, .confirm-delete-point {
    color: var(--delete-btn);
}

.delete-point:hover, .confirm-delete-point:hover {
    color: var(--delete-btn-hover);;
    text-decoration: none;
}

.abort-delete-point:hover {
    text-decoration: none;
}

#data-table-pagination {
    margin-right: 15px;
}

.page-item.active .page-link {
    color: #275756;
    background-color: var(--page-btn-bg);
    border-color: #dee2e6;
}

.page-link {
    color: #275756;
}

.page-link:hover {
    background-color: var(--page-btn-bg);
}

.page-link:focus {
    box-shadow: none;
}

table.dataTable > thead .sorting::before, table.dataTable > thead .sorting_asc::before, table.dataTable > thead .sorting_desc::before, table.dataTable > thead .sorting_asc_disabled::before, table.dataTable > thead .sorting_desc_disabled::before, table.dataTable > thead .sorting:after, table.dataTable > thead .sorting_asc:after, table.dataTable > thead .sorting_desc:after, table.dataTable > thead .sorting_asc_disabled:after, table.dataTable > thead .sorting_desc_disabled:after {
    font-size: 30px; /* change size of sorting icons */
}

table.dataTable > thead .sorting:before, table.dataTable > thead .sorting:after, table.dataTable > thead .sorting_asc:before, table.dataTable > thead .sorting_asc:after, table.dataTable > thead .sorting_desc:before, table.dataTable > thead .sorting_desc:after, table.dataTable > thead .sorting_asc_disabled:before, table.dataTable > thead .sorting_asc_disabled:after, table.dataTable > thead .sorting_desc_disabled:before, table.dataTable > thead .sorting_desc_disabled:after {
    bottom: .07em !important; /* change position of sorting icons */

}

/*endregion*/

/*region Details Sidepanel*/

#details-sidepanel {
    height: 100vh; /* Specify a height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 10; /* Stay on top */
    top: 0;
    right: 0;
    background-color: var(--details-sidepanel-bg); /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 450ms; /* 0.5 second transition effect to slide in the sidepanel */

    -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);;
    -moz-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

#details-sidepanel .sidepanel-wrapper {
    width: 700px; /* must match with the const value in DetailsSidepanelController */
}

#details-sidepanel .image-wrapper {
    position: relative;
    height: 300px;
}

#details-sidepanel .image-wrapper div {
    position: absolute;
    top: 0;
    background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0.7), transparent);
    height: 100%;
    width: 100%;
}

#details-sidepanel img {
    width: 100%;
    height: 100%;
}

#details-sidepanel .close-button-wrapper {
    height: 30px;
    width: 30px;

    position: absolute;
    top: 10px;
    right: 10px;

    padding: 0;

    background-color: #f7f7f7;
    border-radius: 30px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#details-sidepanel .close-button {
    margin: 0;

    font-size: 30px;
    color: rgb(96, 98, 99);
}

#details-sidepanel .close-button:hover {
    text-decoration: none;
}

#details-sidepanel .content-wrapper {
    margin: 1.5rem 2rem 1.5rem 1rem;
}

#details-sidepanel .content-wrapper input, textarea {
    border: 1px solid lightgrey;
    border-radius: 5px;
    padding: 0 1rem;
}

#details-sidepanel .content-wrapper input:focus {
    outline: none;
}

#details-sidepanel .content-wrapper #title {
    display: inline-block;
    width: 100%;
    resize: none;
    font-size: xx-large;
    text-align: left;
}

#details-sidepanel #open-hours-selector label {
    color: darkslategray;
}

#details-sidepanel #description {
    height: 320px;

    background-color: #fff;

    border: 1px groove rgba(90, 90, 90, 0.08);

    overflow-y: auto;
}

#details-sidepanel .controls-wrapper {
    margin: 2rem 2rem 2rem 1rem;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

#contacts-wrapper label {
    color: darkslategray;
}

#location-wrapper {
    height: 500px;
    width: 100%;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
}

#edit-button {
    display: flex;
    align-items: center;
    padding: .5rem 2rem;
    background-color: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
    color: var(--corp-green);
}

#edit-button:focus {
    outline: none;
}

#edit-button:hover {
    border: 1px solid var(--corp-green);
    box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px;
}

#cancel-edit-button {
    align-items: center;
    padding: .5rem 2rem;
    background-color: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
    color: orangered;
}

#cancel-edit-button:hover {
    border: 1px solid orangered;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px;
}

#cancel-edit-button:focus {
    outline: none;
}

.green-button {
    display: flex;
    align-items: center;
    padding: .5rem 2rem;
    background-color: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
    color: var(--corp-green);
}

.green-button:focus {
    outline: none;
}

.green-button:hover {
    border: 1px solid var(--corp-green);
    box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px;
}

#delete-button {
    align-items: center;
    padding: .5rem 2rem;
    background-color: #fcefea;
    border: 1px solid orangered;
    border-radius: 4px;
    color: orangered;
}

#delete-button:hover {
    border: 1px solid orangered;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px;
}

#delete-button:focus {
    outline: none;
}

/*endregion*/

/*region Custom dropdown*/
.custom-dropdown{
    position: relative;
    height: 2.1rem;
    display: flex;
    align-items: center;

    background-color: white;
    border: 1px solid #ced4da;
    border-radius: 4px;

    cursor: pointer;

}

.custom-dropdown section {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.custom-dropdown:hover {
    /*box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px;*/
}

.custom-dropdown .fa-chevron-down {
    color: var(--corp-green);
    transition: 200ms;
}

.custom-dropdown div {
    display: none;
    position: absolute;
    z-index: 99;
    border-radius: 10px 0 10px 10px;
    top: 2.3rem;
    right: 0;
    width: 120%;
    background-color: white;
}

.custom-dropdown ul {
    padding: .5rem 0;
    margin: 0;
}

.custom-dropdown li {
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding: .5rem 1rem;
}

.custom-dropdown li p {
    margin: 0;
    padding: 0;
}

.custom-dropdown li:hover {
    background-color: var(--corp-green);
    color: white !important;
}

.flip {
    transform: rotate(180deg);
}
/*endregion*/

/*region Shadows*/
.box-shadow-1 {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
/*endregion*/

@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0;
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: -15rem;
    }
}

.main-nav-color {
    color: #275756 !important;
}