:root {
    --white: #FFFFFF;
    --primary: #19585f;
    --secondary: #393939;
    --active: #428bca; /** bleu #428bca orange: #FF7043  **/
    --grey: #F9F7FA;
    /*--ternary: #0e474d;*/
    --error: #c62828;

    --shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
    --border-primary: #e3e3e3;
    --border-radius: 8px;

    --family-primary: "Quicksand", sans-serif;
}

/*#region -- Html */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
}

body {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}
body::-webkit-scrollbar-thumb {
    display: block !important;
}
body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
body::-webkit-scrollbar-track {
    background: transparent;
}
body::-webkit-scrollbar-thumb {
    background: #bcc0c4;
    border-radius: 5px;
    max-height: 100px;
    height: 100px;
    border: 1px solid #c8cbce;
}
body::-webkit-scrollbar-thumb:hover {
    background: #888;
}

a, button {
    font-weight: 500;
    outline: 0;
    text-decoration: none;
}
a {
    color: var(--primary);
    -webkit-tap-highlight-color: transparent;
}
a:active, a:hover {
    text-decoration: none;
}
a.icon{
    display: flex;
    align-items: center;
    justify-content: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    margin: 0;
    padding: 0;
}

ul{
    list-style: none;
}

/*#endregion*/

/*#region -- Helpers */

.mt-10{ margin-top: 10px; }
.mt-20{ margin-top: 20px; }
.mt-30{ margin-top: 30px; }

.mb-10{ margin-bottom: 10px; }
.mb-20{ margin-bottom: 20px; }
.mb-30{ margin-bottom: 30px; }



.p-10{ padding: 10px }
.p-20{ padding: 20px }
.p-30{ padding: 30px } .\!p-30{ padding: 30px !important; }
.p-40{ padding: 40px } .\!p-40{ padding: 40px !important; }

.pr-10{ padding-right: 10px }
.pr-20{ padding-right: 20px }
.pr-30{ padding-right: 30px }



.fw-500{ font-weight: 500; }
.\!fw-500{ font-weight: 500 !important; }
.fw-600{ font-weight: 600; }
.fw-700{ font-weight: 700; }

.text-small{ font-size: 0.85em; }
.\!text-small{ font-size: 0.85em !important; }

.fs-0\.5em { font-size: 0.5em; } .\!fs-0\.5em { font-size: 0.5em !important; }
.fs-0\.65em { font-size: 0.65em; } .\!fs-0\.65em { font-size: 0.65em !important; }
.fs-0\.85em { font-size: 0.85em; } .\!fs-0\.85em { font-size: 0.85em !important; }

.text-truncate {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



.flex-1{
    flex: 1;
}
.fixed{
    position: fixed;
}
.hidden {
    display: none !important;
    visibility: hidden !important;
}

.k-prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.blurred {
    filter: blur(5px);
}

/*#endregion*/

.material-symbols-outlined {
    font-variation-settings:
            'FILL' 0,
            'wght' 0,
            'GRAD' 0,
            'opsz' 24
}

.material-symbols-rounded {
    font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24
}
.md-18{ font-size: 18px !important; }
.md-22{ font-size: 22px !important; }
.md-32{ font-size: 32px !important; }

.md-icon{
    border-radius: 50%;
    background: transparent !important;
    padding: 3px !important;


    transition: background-color 0.3s ease-in-out !important;
    /*transition: transform 0.1s, opacity 0.2s !important;*/
}
.md-icon:hover{
    /*background-color: #f1f1f1 !important;*/
    animation: subtleBounce .3s;
    /*animation: slideOutIn 0.3s ease;*/
}

@keyframes subtleBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-6px);
    }
    60% {
        transform: translateY(-2px);
    }
}

@keyframes slideOutIn {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    25% {
        transform: translateX(-20%);
        opacity: 0.5;
    }
    50% {
        transform: translateX(-50%);
        opacity: 0;
    }
    75% {
        transform: translateX(50%);
        opacity: 0.5;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
















#lock{
    content: ' ';
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    z-index: 88888888888888888888;
    top: 0;
    left: 0;
}
#lock_orientation{
    content: ' ';
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 7777777777;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#lock_orientation i{
    font-size: 60px;
    color: var(--primary);
    animation: rotateAnimation 2s infinite;
}
@keyframes rotateAnimation {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.wrapper{
    /*background: #f1f1f1;*/
    margin: 0 auto;
    max-width: 1320px;
}
.scrollable{}





.card{
    display: block;
    width: 100%;
}
.card-content{
    padding: 20px;
    display: block;
}







/*#region -- Btn */
.btn {
    background: #fff;
    border: none;
    border-radius: 25px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
    min-height: 31px;
    min-width: 70px;
    padding: 2px 16px;
    text-align: center;
    text-shadow: none;
    text-transform: uppercase;
    -webkit-transition: all 280ms cubic-bezier(.4, 0, .2, 1);
    transition: all 280ms cubic-bezier(.4, 0, .2, 1);
    color: #212121;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-appearance: none;
    display: inline-block;
    vertical-align: middle;
    font-family: var(--family-primary);
    font-weight: 600;
}
.btn:active, .btn:focus, .btn:hover, .uk-button-dropdown.uk-open>.btn {
    background: #fff;
    outline: 0;
    text-decoration: none;
    color: #212121;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}
.btn-flat {
    box-shadow: none!important;
    background: 0 0;
}
.btn-flat:focus, .btn-flat:hover {
    background: rgba(153, 153, 153, .2);
}
.btn-flat:active {
    background: rgba(153, 153, 153, .4);
}
.btn-flat-danger, .btn-flat-danger:active, .btn-flat-danger:focus, .btn-flat-danger:hover {
    color: #e53935;
}
.btn-flat-danger:active, .btn-flat-danger:focus, .btn-flat-danger:hover {
    background: #fceaea;
}
.btn-flat-primary, .btn-flat-primary:active, .btn-flat-primary:focus, .btn-flat-primary:hover {
    color: #19585f;
}
.btn-flat-primary:active, .btn-flat-primary:focus, .btn-flat-primary:hover {
    /*background: #e3f2fd;*/
    background: #e3e3e3;
}
.btn-flat-success, .btn-flat-success:active, .btn-flat-success:focus, .btn-flat-success:hover {
    color: #7cb342;
}
.btn-flat-success:active, .btn-flat-success:focus, .btn-flat-success:hover {
    background: #e1efd2;
}
.btn-flat-warning, .btn-flat-warning:active, .btn-flat-warning:focus, .btn-flat-warning:hover {
    color: #ffa000;
}
.btn-flat-warning:active, .btn-flat-warning:focus, .btn-flat-warning:hover {
    background: #ffeccc;
}
.btn-flat.disabled {
    background: 0 0!important;
}
.btn-danger, .btn-danger:active, .btn-danger:focus, .btn-danger:hover {
    background: #e53935;
    color: #fff;
}
.btn-primary, .btn-primary:active, .btn-primary:focus, .btn-primary:hover {
    background: #19585f;
    color: #fff;
}
.btn-success, .btn-success:active, .btn-success:focus, .btn-success:hover {
    background: #7cb342;
    color: #fff;
}
.btn-warning, .btn-warning:active, .btn-warning:focus, .btn-warning:hover {
    background: #ffa000;
    color: #fff;
}
.btn.disabled, .btn.disabled:active, .btn.disabled:focus, .btn.disabled:hover {
    color: #a8a8a8;
    background: #eaeaea;
    box-shadow: none!important;
    cursor: default;
    pointer-events: none;
}
.btn-small {
    line-height: 27px;
    min-width: 14px;
    font-size: 11px;
}
.btn-large {
    line-height: 42px;
    font-size: 16px;
}
.btn::-moz-focus-inner {
    border: 0;
    padding: 0;
}
.btn+.btn {
    margin-left: 8px;
}
.btn-block {
    width: 100%
}
/*#endregion*/