:root {
    --selected-background-color: #e3eae0;
    --selected-border-color: #0ba229;
    --cama-color: #A20B57;
    --cama-hover-color: #830444;    
    --bulma-link: #A20B57!important;
  }

 html {
    zoom: 1;    
}

/* load google font montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* load google font lato */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* Set all H tags to montserrat */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Sans', sans-serif;
   }
.gradient-underline {
    padding-bottom: 4px;
    position: relative;
    text-decoration: none;
}

.gradient-underline::after {
    background: linear-gradient(to right, var(--cama-color) 0%, transparent 100%);
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    height: 5px;
    width: 50%;
 }
.content h2 {
    margin-bottom: 0px;
    font-weight: 900;
    color: #333;
}
/* START Body / overall styles */
body, html { 
    background: #f7f7f7;
    height: auto;
    overflow: visible;
    font-family: 'Noto Sans', sans-serif;
}
.navbar-profile {
    font-size: 14px; 
    margin-left: 10px;
    font-family: 'Noto Sans', sans-serif;
}


.main-content-wrapper {
    width: 96%!important; 
    max-width: 96%!important;
}

/* welcome */
.welcome-grey-wrap {
    background: #f7f7f7;
    padding: 25px;
    font-size: 2rem;
    display: flex;
    gap: 25px;
    margin-bottom: 20px;
}

.flag-dropdown .flag {
    height: 20px;
    background-repeat: no-repeat;
    background-position: 10px center;
    padding: 0 0 0 45px;
}

.flag-dropdown .navbar-dropdown a {
    padding-left: 40px;
    font-size: 0.9rem;
    height: 30px;
  
}

.flag-dropdown .navbar-dropdown .flag:not(:last-child) {
    margin-bottom: 5px;
}

.flag span {
    width: 20px;
    height: 15px;
    margin-left: -20px;
    margin-right: 10px;
}

/* BULMA overrides */
.box, .card, .button {
    border-radius: 5px!important;
}
.card-header {
    border-radius: 5px 5px 0 0!important;
}

.is-primary, .is-link {
    background-color: var(--cama-color)!important;
    color: white;

}
a, .cama-color {
    color: var(--cama-color);
}

.fas {
    color: var(--cama-color);
}

tr .fas {
    cursor: pointer;
}

.card-header-icon .fas, .scroll-to-top .fas {
    color: white;
}

.menu-list .fas {
    width: 20px;  /* Adjust as needed */
    display: inline-block;
    text-align: center;    
}

.menu-list .is-active {
    background: #f0f2f4;
}

.scroll-to-top {
    position: fixed;
    z-index: 9 ;
    bottom: 12px;
    right: 20px;
    background: var(--cama-color);
    color: white;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    display: none;
}

/* END BULMA overrides */

.navbar {
  min-height: 75px;
  position: sticky;
  top: 0px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
}

.sidebar-box {
    position: sticky;
    top: 100px;
}

.container.is-fullwidth {
    max-width: 100%!important;
}

.cama-wrapper {
    max-width: 1200px!important;
    margin-bottom: 125px;
}

.cama-header {
    margin-bottom: 20px;
}

.cama-wrapper .card-header-title {
    margin-bottom: 0px!important;
}

/* START Typopgraphy */
.title {
    color: var(--cama-color);
}
/* END Typopgraphy */

/* END Body / overall styles */

/* START custom column gaps */
.small-gap {
    column-gap: 0px!important;
}

.medium-gap {
    column-gap: 20px!important;
}


/* END custom column gaps */


/* START BOX override */
div.box {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

div.card .nested {
    text-align: center;
    border: solid 1px #d9d9d9;
    box-shadow: none;
}

div.box .nested img, form img {
    border-radius: 10px;
}

div.box.transparent {
    background: transparent;
    box-shadow: none;
}
    /* START Radio / checkbox */
    .radio-checker, .checkbox-checker {
        cursor: pointer;
        border-radius: 5px;
        border: solid 1px #d9d9d9;
    }

    .radio-checker:hover, .checkbox-checker:hover, div.transparent.radio-checker:hover  {
        background: var(--selected-background-color);
        border: solid 1px var(--selected-border-color);
    }

    .radio-checker.radio-selected, .checkbox-checker.radio-selected, div.transparent.radio-checker.radio-selected {
        background: var(--selected-background-color);
        border: solid 1px var(--selected-border-color);
    }
    
    /* Labels act as buttons */
    label.radio-checker, label.checkbox-checker  {
        padding: 5px 15px;
    }

    /* END Radio */
/* END BOX override */

/* START Form styles */
.small-form-img {
    max-height: 150px;;
}

p.sub-title {
    background: #efefef;
    border-radius: 5px;
    padding: 5px 15px;
    font-weight: 500;
}

form label i.fas {
    color: #c4c4c4!important;
}

.columns {
    gap: 3rem;
}

.control.select.is-full, .control.select.is-full select {
    width: 100%;
}

/* vertical radio buttons */
.vradio-img img {
    max-width: 100px;
}

.file-list-wrapper {
    border-radius: 5px;
    background-color: white;
    padding: 10px;
}

/* END Form styles*/

/* images */
#saved-fileList {
    display: flex;
    gap: 15px;
}

#saved-fileList img {
    max-height: 100px;
    border-radius: 5px;
}


/* rise table*/
table.rise-table label {
    min-width: 100px;
}

/* Dynamic visibility based on input elements */

/* START installation above/below staircase */
#above-staircase-selection, 
#below-staircase-selection {
    display: none;
}
/* END installation above/below staircase */

/* START Main switch location */
#top-switch-selection,
#bottom-switch-selection,
#bottom-control-box-selection-wired,
#bottom-control-box-selection-wireless,
#top-control-box-selection-wired,
#top-control-box-selection-wireless {
    display: none;
}
/* END Main switch location */

/* START obstacles */
#bulkhead-selection {
    display: none;
}
/* END obstacles */

/* cards */
.card-header {
    background-color: var(--cama-color);
    color: white;
    cursor: pointer;
}

.card-header {
    transition: all 0.3s;
}
.card-header.collapsed {
    border-radius: 5px!important;
}

.card-header-icon {
    cursor: pointer;
    color: white;
}
.card-header-title {
    color: white;
}

.fas, .fa-angle-down {
    transition: all 0.3s;
}

.collapsed .fa-angle-down {
    transform: rotate(180deg);
}

.invalid {
    border-color: red;
}

/* template wrapper (sidebar / content columns) */

/* from tablet to desktop */
@media screen and (min-width: 768px) {
    .template-wrapper {
        display: grid!important;
        /* .template-sidebar should be 20% of the screen and .template-content should be 80% */
        grid-template-columns: 20% 1fr;

        
    }
}

/* START datatables */
.content ul.pagination-list li {
    margin-top: .25rem;
    
    
}

tr:hover {
    background: #ae185724!important;
}

table.dataTable tbody td {
    vertical-align: middle;
    padding: 12px;
}


div.dt-container .dt-paging .dt-paging-button.current {
    background: var(--cama-color)!important;
    color: white!important;
    border: none;
    border-radius: 5px;
}

/* Top and bottom border of datatables */
#listLiftsTable th, div.dt-container.dt-empty-footer tbody>tr:last-child>* {
    border-bottom: solid 1px #d9d9d9;
}

table.dataTable tbody td {
    vertical-align: middle;
  }

td.dt-center {
    text-align: center!important;
}
.dt-left {
    text-align: left!important;

}

.edit-icon:hover, .delete-icon:hover {
    color: var(--cama-color);
    cursor: pointer;
}

.pagination-link {
    background-color: var(--cama-color);
    color: white;
    border-color: var(--cama-color);
}

.pagination-link:hover {
    background-color: var(--cama-hover-color);
    color: white;
    border-color: var(--cama-hover-color);
}

/* END datatables */

/* START footer navbar */
.footer-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: white;
    z-index: 5;
    height: 70px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

.footer-bar .fas {
    margin-right: 10px;
}

.footer-bar .submit-button .fas {
    color: white;
}

.is-light {
    color: black;
}

.submit-button {
    padding: 10px 20px;
    border-radius: 5px;
    background-color: var(--cama-color);
    color: white;
    cursor: pointer;
    transition: all 0.3s;
}

#export-button a {
    color: black;
}

.error-container {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: none;
    padding: 20px 10px 20px 20px; 
    max-height: 500px;
    /* overflow scroll y */
    overflow-y: auto;
    position: relative;
}

.error-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 2;

}

.error-message-container {
    /* Enable scrollbar */
    overflow-y: scroll;
    /* Set the height to your preference */
    max-height: 300px;
    padding-right: 10px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.error-message-container::-webkit-scrollbar {
    width: 8px;
}

/* Handle */
.error-message-container::-webkit-scrollbar-thumb {
    background: var(--cama-color);
    border-radius: 10px;
}

/* Handle on hover */
.error-message-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.error-container.show {
    display: block;
}

.rotate-icon {
    transform: rotate(180deg);
}

.error-container .delete {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}

/* header with show/hide icon for error-container */
.error-header {
    position: relative;
    margin-bottom: 15px;
    /* Your other styles */
}

.error-message {
    padding: 10px;
    border-radius: 5px;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 0.9rem;
}

/* sweet alert */
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    background-color: var(--cama-color);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgb(130 9 70 / 30%);
}

/* login */
.hero.login-wrapper {
    background-image: url('../img/cama-bg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

.hero.login-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgb(114,28,36);
    background: linear-gradient(54deg, rgba(114,28,36,0.9) 0%, rgba(110,28,114,0.9) 35%, rgba(114,28,36,0.9) 100%);
    
}

.hero.login-wrapper a {
    color: white;
}

.hero.login-wrapper div.box {
        box-shadow: rgb(0 0 0 / 38%) 0px 2px 8px 0px;

}

.input:focus, .input:focus-within, .is-focused.input, .is-focused.textarea, .select select.is-focused, .select select:focus, .select select:focus-within, .textarea:focus, .textarea:focus-within {
    border-color: hsl(329.8deg 87.28% 33.92% / 59%);
    box-shadow: 0 0 0 0.1875rem hsl(329.8deg 87.28% 33.92% / 20%) !important
}



/* Responsive */

/* from desktop */
@media screen and (min-width: 1024px) and (max-width: 1920px) {
    .title.is-3 {
        font-size: 1.4rem;
    }

    .template-wrapper {
        display: grid!important;
        grid-template-columns: 20% 1fr!important;
        gap: 10px;
    }

    .template-sidebar {
        z-index: 6;
    }

    .error-container {
        padding-top: 15px!important;
    }

    .error-header {
        margin-bottom: 8px;
    }
    .error-message-container {
        max-height: 200px!important;
    }

    .cama-wrapper {
        padding: 0px 75px;
    }
}

/* from widescreen */
@media screen and (min-width: 1921px) {
    .template-wrapper {
        display: grid!important;
        grid-template-columns: 20% 1fr!important;
        gap: 10px;
    }

    .error-message-container {
        max-height: 400px!important;
    }

}

/* render options hover menus */
.render-options-menu {
    display: none;
    position: absolute;
    background-color: white;
    padding: 10px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-left: -152px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 300;
    width: 200px;
    

}

.no-option-cursor {
    cursor: default!important;

}

.render-options-menu ul {
    padding: 0!important;
    margin-inline-start: 0;
    margin-top: 0;    
}

.render-options-menu li {
    list-style-type: none;
    padding: 5px;
    cursor: pointer;
    padding: 12px 0px;
}

.render-options-menu li:hover {
    background-color: #f0f2f4;
}


.render-hover:hover .render-options-menu {
    display: block;
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

.numbered-label {
    display: inline-block;
    height: 20px;
    width: 20px;
    line-height: 20px;
    border-radius: 50%;
    color: white;
    text-align: center;
    background: #000;
    margin-right: 10px;
}