/* MAIN LAYOUT FOR DESKTOP */

@media(min-width:999px) {
    .desktop-home-layout {
        display: grid;
        grid-template-columns: auto 1fr 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "sidebar header header"
            "sidebar section section"
            "sidebar footer footer";
        min-height: 100vh;
    }

    header {
        grid-area: header;
        padding: 10px;
    }

    .aside-sidebar {
        grid-area: sidebar;
        background: white;
        border-right: 1px solid lightgrey;
        padding: 0px 10px 10px 10px;
    }

    section {
        grid-area: section;
    }

    footer {
        grid-area: footer;
        color: #fff;
        padding: 10px;
    }
}

/* ROOT/GLOBAL CSS */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #29AAE3;
    --bs-btn-border-color: #29AAE3;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2793c2;
    --bs-btn-hover-border-color: #2793c2;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #29AAE3;
    --bs-btn-active-border-color: #29AAE3;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #2c7594;
    --bs-btn-disabled-border-color: #29AAE3;
}
.row>*{
    margin-top: 5px;
}

.theme-container{
    background:white;
    border-radius: 12px;
    box-shadow: 0px 0px 3px 1px;
    background: white;
    margin-bottom: 1rem;
    padding: 1rem;
}





/* AGENDA */
.agenda-box{
    padding: 25px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: black;
    background: white;
    gap:25px;
    border-radius: 12px;
    box-shadow: 0px 0px 3px 1px;

}
.select-range {
    background: white;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0px 0px 5px 0px;
    margin-bottom: 10px;
}



.accordion-button:not(.collapsed) {
    color: unset;
    background-color: white;
    box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.accordion-button:focus {
    box-shadow: none;
}

button.user-dropdown.dropdown-item,
button.dropdown-item {
    padding: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

/* IVET CUSTOM BUTTON */
button.btn.btn-ivet-bt {
    display: flex;
    align-items: center;
    background: whitesmoke;
    border: 1px solid #333;
    border-radius: 9px;
    font-weight: 500;
    text-wrap: nowrap;
}

/* ANIMATED MENU */


span.chevron-text-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: inherit;
    width: 100%;
}

.dropdown-custom-toggle-close::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: 0;
    border-right: .3em solid transparent;
    border-bottom: .3em solid;
    border-left: .3em solid transparent;
}

.dropdown-custom-toggle-open::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}



.show-text {
    opacity: 1;
    width: 120px;
    max-width: 120px;
    transition: all 0.4s ease;
    margin-left: 20px;
}

.hide-text {
    opacity: 0;
    transition: all 0.2s ease;
    width: 0;
    max-width: 0;
    pointer-events: none;
    z-index: -1;
}

.menu-item {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-wrap: nowrap;
    font-weight: 400;
    border-bottom: 1px solid lightgrey;
}



.menu-item:hover {
    background-color: #29AAE3;
    color: white;
}



.aside-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

}

.aside-sidebar .sidebar-head.link-cursor.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 8vh;
    top: 0;
    z-index: 100;
    position: sticky;
    padding: 10px;
}

.aside-sidebar .accordion {
    position: sticky;
    top: 15%;
    z-index: 100;
    color: #333;

}

.sidebar-head .logo {
    width: 110px;
}



/* Main Body----------------------------------------------*/
body {
    background: url("./BackgroundPage.jpg");
    margin: 0;
    padding: 0;
}

body.dragging,
body.dragging * {
    cursor: move !important;
}

a {
    text-decoration: none;
    color: #29AAE3;
}


/* Globals
----------------------------------------------*/

.link-cursor {
    cursor: pointer;
}

.dropdown-menu[data-bs-popper] {
    margin-top: 0;
    border-radius: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.dropdown-menu.show {
    opacity: 1;
    transform: scale(1) translateY(0);
}


/* Under Construction */

.under-construction {
    min-height: 87vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
}

/* Scrollbar Customization
----------------------------------------------*/
/* For Firefox */

::-moz-scrollbar {
    width: 12px;
    height: 12px;
}

::-moz-scrollbar-thumb {
    background: #29AAE3;
    border-radius: 6px;
    border: 3px solid transparent;
    background-clip: content-box;
}

::-moz-scrollbar-track {
    background: #2B3F53;
}

/* For WebKit (Chrome, Safari, etc.) */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background: #29AAE3;
    border-radius: 6px;
    border: 3px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-track {
    background: #2B3F53;
}

/* HOVER EFFECT */
.hover-effe {
    transition: transform 0.3s ease;
}

.hover-effe:hover {
    transform: scale(1.1);
}

.non-selectable {
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
}

/*INTERNAL LINK FIX FOR A TAGS */

.internalLink {
    pointer-events: inherit;
    cursor: pointer;
}

/*OFFCANVAS FIX FOR THE RIGHT SIDE*/
.offcanvas.offcanvas-end {
    left: unset;
}

/*FIX SHIFTING WHEN MODAL OFFCANVAS OPENS*/
body.modal-open {
    padding-right: 0px !important;
    overflow: visible !important;
}

button.navbar-toggler.ml-auto {
    margin-right: 0px !important;
}


/*HEADER BURGERMENU*/
.header-container {
    width: 100%;
    height: 8vh;
    background: white;
    border-bottom: 1px solid lightgrey;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.main-header {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.header-logo {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icons-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.single-icon {
    height: inherit;
    width: 100%;
}


.logo {
    height: -webkit-fill-available;
    align-self: center;
}


.ivet-burger,
.ivet-user {
    width: auto;
    height: -webkit-fill-available;
    max-height: 40%;
}



text#menu-text {
    text-wrap: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}

/*SIDEBAR*/
.MainMenuSidebar {
    background: white;
}

.menu-item-mobile {
    color: #333;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
}




.UserPanelSidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    background-color: #fff;
    background-position-y: bottom;
    background-repeat: no-repeat;
    border-color: #2B3F53;
    padding-left: 0;
    height: 100vh;
    background-size: cover;
}

.UserPanelSidebar .dropdown-toggle {
    text-wrap: balance;
    text-align: right;
}

.companyOptions {
    text-wrap: wrap;
}

.UserPanelSidebar .companyOptions::after {
    content: " -";
}



.sidebar-icon-container span {
    font-weight: bold;

}

.offcanvas-header {

    color: white;
    background-color: #2B3F53;
}

.sidebar-icon-container {
    color: white;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 2rem;
}

.menuItems a,
.menuItems span {
    font-size: 0.9rem;
}

.sidebar-header {
    background: white;
    padding: 1.5vw;
}

.sidebar-container {
    display: flex;
    width: 20vw;
    max-width: 100vw;
    display: none;
}

nav.sidebar {
    z-index: 1000;
    margin-bottom: 0;
    margin-left: 0;
    float: left;
}

.sidebar-wrapper {
    position: relative;
}

li.dropdown-item.flagSvg.menuItems {
    display: flex;
    justify-content: space-between;
}

.menuItems .internalLink {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav:hover .forAnimate {
    opacity: 1;
    background-color: transparent;
}



img.flag.flag-gb {
    vertical-align: baseline;
}

ul.dropdown-menu.forAnimate.show {
    position: initial;
    background-color: transparent;
    border: 0;
    border-radius: 0px;
}


div#navbarTogglerSide {
    background-color: rgba(13, 36, 60, .85);
}

.navbar-expand-md .navbar-collapse {
    align-content: start;
    width: 100%;
}

nav#mainSidebar {
    display: flex;
    flex-direction: column;
}

#mainSidebar a {
    text-decoration: none;
    border-bottom: 1px solid white;
}

#mainSidebar .submenu a {
    padding: 15px;
    border-bottom: 1px solid white;
}


.navbar-collapse {
    align-items: start;
}

.sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: 100%;
}

nav.sidebar .navbar {
    position: fixed;

}

nav.sidebar .forAnimate {
    border-top: 0;
}

nav.sidebar .forAnimate li a {
    padding-top: 5px;
    padding-bottom: 5px;
}

nav.sidebar li {
    width: 100%;
}



/*SIDE BAR*/

.sidebar-container {
    z-index: 99;
    min-height: 100vh;
    position: fixed;
}

.offcanvas-body {
    flex-grow: 1;
    padding: 0;
    overflow-y: hidden;
}



div#navbarTogglerMenu {
    display: flex;
    justify-content: end;
    align-items: center;
    padding-inline: 2vw;
}



.navbar-light .navbar-toggle:hover,
.navbar-light .navbar-toggle:focus {
    background-color: transparent;
}

.navbar-light .navbar-toggle .icon-bar {
    background-color: #f2f2f2;
}

.navbar-space {
    padding-left: 0;
}

.navbar {
    padding: 0px;
}

nav.sidebar .li {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 3px;
    padding-top: 3px;
}



/*FOOTER*/

footer .logistic-i-logo {
    width: 100px;
}

.pn-footer {
    max-height: inherit;
}

.footer-container {
    background-color: #2B3F53;
    color: white;
    width: 100%;
    height:auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    padding: 0;
    min-height: 5vh;
}


.footer-info {
    display: flex;
    width: 100%;
    padding: 10px;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    flex-grow: 1;
}

.creator {
    width: 100%;
    display: flex;
    justify-content: center;
    background: black;
}



/*LANGUAGE SELECTION*/

.language-selector,
.company-selector {
    width: 100%;
    --bs-accordion-border-radius: 0;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-bg: white;

}

.language-selector.accordion-button:not(.collapsed) {
    background-color: white;
    color: #333;
}

.language-selector .accordion-button:focus {
    box-shadow: none;
}

.langSelection {
    width: 100%;
    background-color: #29AAE3;
}

.flag-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-inline: 15px;
}

.flag-container:hover {
    background: #29AAE3;
    color: white;
}


#langArea {
    padding: 10px;
}

.dropdown-item:hover {
    background-color: #29AAE3;
    color: white;
}



.dropdown-menu.langSelection.show {
    background: transparent;
    border: none;
}

#langDropdown {
    display: flex;
    justify-content: center;
    align-items: center;
}


/*MAIN CONTAINER*/
.myContainer {
    min-height: 87vh;
}




/*CARDS*/

.card {
    margin: 2%;
    border-radius: 12px;
    background-color: rgba(215, 235, 255, 0.5);
    backdrop-filter: blur(10px);
    transition: all .6s ease-in-out;
    
}



.card-header {
    padding: .5rem 1.25rem;
}

.card:hover {
    box-shadow: 0px 0px 6px 1px;
    transition: all .6s ease-in-out;
}

/* SAVE BUTTON */
.save-row.row {
    width: 100%;
    padding-inline: 2%;
    margin-bottom: 10px;
}

.row {
    margin-bottom: calc(-1* var(--bs-gutter-y));
}

.dx-texteditor-label {
    color: #666 !important;
}

/* AGENDA */


/*DATAGRID*/
.dx-datagrid-borders > .dx-datagrid-headers {  
    border-top-left-radius: 12px;  
    border-top-right-radius: 12px;  
  }  
  .dx-datagrid-borders > .dx-datagrid-total-footer,  
  .dx-datagrid-borders > .dx-datagrid-rowsview {  
    border-bottom-left-radius: 12px;  
    border-bottom-right-radius: 12px;  
  }  

.dx-datagrid {
    padding: 12px;
    border-radius: 0.375rem;
}

.dx-datagrid.dx-gridbase-container.dx-datagrid-borders{
    box-shadow: 0px 0px 3px 1px; 
    border-radius: 12px;
}



.dx-datagrid-borders > .dx-datagrid-filter-panel, .dx-datagrid-borders > .dx-datagrid-headers {
    border-radius: 12px;
}

.dx-widget.dx-datagrid-pager.dx-pager {
    border-radius: 0rem 0rem 0.375rem 0.375rem;
}
.dx-datagrid-scrollable-simulated.dx-datagrid-content.dx-datagrid-scroll-container {
    border-radius: 0.375rem 0.375rem 0rem 0rem;
}

.dx-datagrid-header-panel {
    padding: 10px;
}

tr.dx-row.dx-column-lines.dx-header-row {
    background-color: #e6e6e6;
}

/* Pager */
.dx-widget.dx-datagrid-pager.dx-pager {
    padding-inline: 2%;
}

.dx-widget.dx-datagrid-pager.dx-pager,
tr.dx-row.dx-column-lines.dx-header-row {
    background: #2B3F53;
    color: white;
}

.dx-page-size:hover, .dx-page:hover {
    background: #cdcdcd;
    color:black
}




.dx-datagrid-headers {
    color: white !important;
}

.dx-datagrid .dx-data-row>td {
    background-color: #cdcdcd !important;
}

.dx-datagrid .dx-row-alt>td,
.dx-datagrid .dx-row-alt>tr>td {
    background-color: #f0f0f0 !important;
}


td.dx-cell-focus-disabled.dx-master-detail-cell {
    padding-top: 15px !important;
    padding-right: 40px !important;
    padding-bottom: 15px !important;
}


.dragged {
    position: absolute;
    opacity: .5;
    z-index: 2000;
}

ul.defualtList li.placeholder {
    position: relative;
}

ul.defualtList li.placeholder:before {
    position: absolute;
}

.dList {
    max-height: 18rem;
    min-height: 10rem;
    overflow-y: auto;
    background-color: rgba(194, 233, 255, .28);
}

.check-input-color {
    width: 2.1rem;
    height: 100%;
    margin-top: 0;
}

.textarea10 {
    min-height: 10rem;
}





/* SUBMENUS FOR EACH SIDEBAR */
.submenu-Item {
    background: whitesmoke;
}


.submenu {
    padding: 0;
}

.UserPanelSidebar .submenuItem {
    padding-right: 10px;
}

.myCloseBtn {
    position: absolute;
    right: 1rem;
    padding-top: .5rem;
    cursor: pointer;
}


.space05 {
    height: .5rem;
}

.spaceNormal,
.spaceNormalMid {
    white-space: normal;
}

.spaceNormalMid {
    height: auto;
}

.space1 {
    height: 1rem;
}

.space2 {
    height: 2rem;
}

.space3 {
    height: 3rem;
}

.space4 {
    height: 4rem;
}

.space5 {
    height: 5rem;
}

.badge-remove {
    cursor: pointer;
}

.ivetform {
    width: 100%;
}

.vMiddle,
.spaceNormalMid {
    vertical-align: middle !important;
}

.petColorsArea {
    min-height: 135px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.overflow350 {
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
}

.colorCheckBox {
    width: 55px;
    padding-right: 0;
    margin-left: 5px;
}

.colorCheckBox input[type="checkbox"],
.colorCheckBox input[type="radio"] {
    width: 34px;
    margin-top: 0;
}

.pull-right {
    float: right;
}

i.pull-right.hidden-xs.showopacity.fa {
    font-size: 20px;
}
.main .row {
    padding: 0;
    margin: 0;
}
.bg-darkBlue {
    background-color: #2d4155;
    border-color: #484747;
    align-items: center;
}

.bg-darkBlue .navbar-text {
    color: #f2f2f2;
    padding-right: 5px;
}

.bg-darkBlue .nav-link {
    color: #f2f2f2 !important;
}

.bg-darkBlue .nav-selectBox {
    color: #f2f2f2;
    background-color: #4f82b5;
}

/*.nav-selectBox {
    margin-top: 4px;
}*/

.navbar-nav.bg-darkBlue {
    padding-right: 20px;
}

nav.navbar.navbar-expand-lg.navbar-light.bg-darkBlue {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}



.dropdown-mobile {
    padding-left: 2px;
    padding-bottom: 0;
    margin-bottom: 0;
}




.alert-validation {
    margin: 0;
    padding: 0;
}

.input-group-text {
    padding-top: 4px;
    padding-bottom: 4px;
}

select.form-control {
    margin-bottom: 15px;
    height: 2.1rem !important;
    padding-top: 4px;
}

.modal-xlg {
    max-width: 1200px;
}



.swal2-popup .swal2-select {
    min-width: 100% !important;
}

.dxColumnWordWrap {
    white-space: nowrap;
    max-width: 250px;
}

.dxDatagridButton {
    padding: 0 !important;
    vertical-align: middle !important;
}

.dx-selectbox {
    margin-bottom: 13px;
    height: 38px;
    border-radius: .25rem;
}

.dx-selectbox.dx-tagbox {
    height: auto;
}

.dropdown-toggle-no-carret::after {
    display: none;
}

.dx-popup-content-fix {
    height: 100% !important;
    height: fit-content !important;
}

.dx-fileuploader-file-container div:nth-child(2) {
    display: none;
}

.dx-overlay-shader {
    background-color: rgba(0, 0, 0, .4) !important;
}

.dx-overlay-shader.loadpanel {
    z-index: 2001 !important;
}

.dx-fileuploader-content>.dx-fileuploader-upload-button {
    display: none;
}

.dx-datagrid .dx-data-row>td {
    background-color: #f2f2f2;
}

.dx-datagrid .dx-row-alt>td {
    background-color: #fff;
}


tr.dx-row.dx-column-lines.dx-datagrid-filter-row {
    background-color: #fff;
}

td.dx-command-expand.dx-datagrid-group-space {
    background-color: inherit;
    border-right: 1px solid #ddd !important;
}

.dx-toolbar {
    background-color: inherit;
    padding-left: 5px;
    padding-top: 5px;
}

.form-control .dx-texteditor-input {
    padding-top: 0;
}

.dx-overlay-content.dx-popup-normal.dx-popup-draggable.dx-resizable {
    height: auto !important;
}

.dx-datebox.dx-textbox.dx-texteditor {
    width: 100% !important;
}

.dx-field-label {
    font-size: initial;
}

.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-list-item-selected {
    background-color: rgba(51, 122, 183, .7) !important;
    color: #fff;
}

.dx-border-right-0 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}




#scheduler {
    overflow: auto;
    max-height: 730px;
}

.legedFieldSet {
    padding: 10px;
}

.legedFieldSet .legend {
    border-style: none;
    border-width: 0;
    font-size: 17px;
    line-height: 23px;
    margin-bottom: 0;
    width: auto;
    padding: 0 10px;
    border: 1px solid #ced4da;
    font-weight: 600;
}

.legedFieldSet .legendNoTitle {
    border: 0;
}

.legedFieldSet .pointer {
    cursor: pointer;
}

.fileUploaderImg {
    max-width: 60px;
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 10px;
}

.fileUploaderImgColse {
    position: absolute;
    transform: translate(42px, -2px);
    -ms-transform: translate(42px, -2px);
}

.validationMessage {
    color: #920000;
}


.flagSvg {
    width: 25px;
}


li .flagSvg {
    padding: 5px;
}


.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.gridOwnerPets {
    box-shadow: 0 0 20px -5px;
}

#gridOwneres,
#gridIncidents {
    box-shadow: 0 0 20px -5px;
}

.toolIcons {
    width: 37px;
}



.pointer {
    cursor: pointer;
}

.logoutBtn {
    cursor: pointer;
}

.sizing {
    width: 100%;
}

.sortHandle {
    padding: 7px;
    cursor: pointer;
    background-color: #d3d3d3;
}