:root {
    --main-rgb: 33, 49, 64;
    --main-color: rgba(var(--main-rgb), 1);
    --main-bg:rgba(var(--main-rgb), 0.04);
    --secondary-bg: #F7F7F7;
    --secondary-color: #FFF;
    --third-color: #707070;
    --delete-color: #EA0129;
    --header-height: 12.5vh;
    --font-family-regular: 'PTSans-Regular';
    --font-family-bold: 'PTSans-Bold';
    --font-family-bold-italic: "PTSans-BoldItalic";
    --font-family-italic: "PTSans-Italic";
}

body {
    /* background-color: #3d3d3d; */
    margin: 0;
    height: 100vh;
    font-family: var(--font-family-regular);
    overflow: hidden;
}

.main {
    display: flex;
    background-color: var(--main-bg);
    height: calc(99vh - var(--header-height));
    padding: 0 3vw 0 3vw;
}


.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    color: inherit;
}

.input {
    outline: none;
    border: 1px solid #DDDDDD;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 0 10px 0 10px;
} 


.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    height: 100%;
    width: 100%;
}

.modal {
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(var(--main-rgb), 0.90)
}

.modal>div {
    background-color: var(--secondary-bg);
    border-radius: 25px;
}


.noselect {
    cursor: default;
    /* iOS Safari */
    -webkit-touch-callout: none;
    /* Safari */
    -webkit-user-select: none;
    /* Konqueror HTML */
    -khtml-user-select: none;
    /* Old versions of Firefox */
    -moz-user-select: none;
    /* Internet Explorer/Edge */
    -ms-user-select: none;
    /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
    user-select: none;
}


/* Hide scrollbar for Chrome, Safari and Opera */
.hidescroll::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hidescroll {
    overflow-y: scroll;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}


/* gestion scrollbar */
.custom-scrollbar {
    --custom-scrollbar-color: #D9D9D9;
    --custom-scrollbar-background: transparent;
    /* Firefox */
    scrollbar-color: var(--custom-scrollbar-color) var(--custom-scrollbar-background);
}

/* Chrome, Safari, Edge */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--custom-scrollbar-background);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--custom-scrollbar-color);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

/* fin gestion scrollbar */


.image-container {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;

}

img {
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

}
.unselectable {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }