/* generics */
:root {
    --bs-font-family: "Inter", sans-serif;
    --bs-border-radius: 4px;
}

html, body {width: 100%;  font-family: 'Inter', sans-serif; font-size: 14px}
body {overflow-x: hidden; overflow-y: scroll; padding: 0; margin: 0; background: #fcfcfc;}
a {text-decoration: none;}
h1 {font-size: 18px; color: rgb(11, 14, 20); font-weight: 600; }
h2 {font-size: 17px;}


body.modal-open header .dropdown {margin-right: 15px}

/* swup */
/*
.transition-main {transition-property:opacity,transform;transition-duration:250ms;transition-timing-function:cubic-bezier(.77,0,.175,1);transform:translateX(0);opacity:1}
html.is-animating .transition-main, html.is-animating.to-left .transition-main {opacity:0}
html.is-animating .transition-main {transform:translateX(-1em)}
html.is-animating.to-left .transition-main {transform:translateX(1em)}
*/
.swup-progress-bar {height: 1px; background-color: violet;}




/* utils */
.fs-larger {font-size: larger;}
.img-avatar {width: 40px!important; height: 40px!important; object-fit: cover; border-radius: 50%; }
.img-avatar-sm {width: 30px!important; height: 30px!important;}
.min  {width: 10px; white-space: nowrap;}
th.left, td.left  {text-align: left;}
th.center, td.center  {text-align: center;}
th.right, td.right  {text-align: right;}
.ucfirst::first-letter {text-transform: uppercase}
.upper, .uppercase {text-transform: uppercase}
.lower, .lowercase {text-transform: lowercase}


/* forms */
.form-control {padding: .3rem .5rem; border-radius: 0}
.form-select {border-radius: 0; padding: .3rem .5rem;}
textarea.form-control {min-height: 80px;}
textarea.code {
    font-family: monospace !important;
    font-size: 12px;
    line-height: 1.5;
    tab-size: 2;
    resize: vertical;
}

.badge {font-weight: 400; vertical-align: middle;}
.input-password-wrapper {position: relative; display: inline-block; /*width: 100%;*/}
.input-password-toggle {padding-right: 40px;}

.btn-toggle-password {
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #6c757d;
    font-size: 1.2rem;
}

.btn-toggle-password:hover {color: #000;}

.modal-header, .modal-footer {border: 0}
.modal-dialog-scrollable .modal-body {overflow-x: hidden;}
.modal-body {padding-top: 0}

.modal-error .modal-body {min-height: 100px}

.form-check-input, .form-select {cursor: pointer;}

input::placeholder {color: #ccc!important;}
input[type="date"]:placeholder-shown, input[type="datetime-local"]:placeholder-shown, input[type="time"]:placeholder-shown
    {color: #ccc!important;}

input[type=search] {
    padding-left: 30px!important;

    /*
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23676a6d' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
    */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 24 24"><path d="M 10 2 C 5.5965257 2 2 5.5965291 2 10 C 2 14.403471 5.5965257 18 10 18 C 11.752132 18 13.370523 17.422074 14.691406 16.458984 L 19.845703 21.613281 A 1.250125 1.250125 0 1 0 21.613281 19.845703 L 16.458984 14.691406 C 17.422074 13.370523 18 11.75213 18 10 C 18 5.5965291 14.403474 2 10 2 z M 10 4.5 C 13.052375 4.5 15.5 6.947627 15.5 10 C 15.5 13.052373 13.052375 15.5 10 15.5 C 6.9476251 15.5 4.5 13.052373 4.5 10 C 4.5 6.947627 6.9476251 4.5 10 4.5 z"></path></svg>');

    background-repeat: no-repeat;
    background-position: 8px center;
    background-size: 16px;
}

input[type=search].is-invalid {
    /*
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23676a6d' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E")!important;
     */

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 24 24"><path d="M 10 2 C 5.5965257 2 2 5.5965291 2 10 C 2 14.403471 5.5965257 18 10 18 C 11.752132 18 13.370523 17.422074 14.691406 16.458984 L 19.845703 21.613281 A 1.250125 1.250125 0 1 0 21.613281 19.845703 L 16.458984 14.691406 C 17.422074 13.370523 18 11.75213 18 10 C 18 5.5965291 14.403474 2 10 2 z M 10 4.5 C 13.052375 4.5 15.5 6.947627 15.5 10 C 15.5 13.052373 13.052375 15.5 10 15.5 C 6.9476251 15.5 4.5 13.052373 4.5 10 C 4.5 6.947627 6.9476251 4.5 10 4.5 z"></path></svg>');
    background-repeat: no-repeat!important;
    background-position: 8px center!important;
    background-size: 16px!important;
}


input[type='number'] {width: 150px; text-align: center;}
input[type='date'] {max-width: 150px; text-align: center;}
input[type='time'] {max-width: 150px; text-align: center;}
input[type='tel'] {max-width: 200px;}

.input-group .btn {line-height: normal; height: 32px;}
.input-group .input-group-text {line-height: normal; height: 31.5px;}
.input-group .btn.border {height: 31px;}


.dropzone-image {height: 100px; overflow: hidden; border:2px dotted #ccc; margin-bottom: 5px}
.dropzone-image:hover {border-color:#000; cursor: pointer;}
.dropzone-image img {max-width: 100%; max-height: 100%;}


/* select 2 */
.select2-search--dropdown .select2-search__field {padding: 2px;}
.select2-container--default .select2-selection--single {border-radius: 0}
.select2-selection {border-color: rgb(222, 226, 230)!important;}
.select2 {margin-bottom: 6px; width: 100%!important;}
.select2-container .select2-selection--single {height: 32px; padding-top: 2px!important; padding-left: 3px!important;}
.select2-search__field {outline: none; border-color: rgb(222, 226, 230)!important;}
.select2-container--default .select2-selection--single .select2-selection__arrow {right: 7px;}
select.is-invalid + .select2 .select2-selection {border-color: #dc3545!important;}
.select2-container--default .select2-selection--single .select2-selection__clear {left: -10px; top: -3px; font-weight: 300;}
.select2-container--default .select2-search--inline .select2-search__field {padding-left: 5px!important;}

.select2-container--default .select2-selection--multiple .select2-selection__choice {font-size: 11px}

.input-group .select2 {width: 80%!important;}
.select2-results__option[aria-disabled="true"] {display:none!important;}

/* nav */
.nav-pills .nav-link {font-size:15px; color: #000; border-radius: 0!important; padding-bottom: 15px; }
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {font-weight: bold; background-color: transparent; color: var(--bs-primary); border-bottom: 2px solid var(--bs-primary);}


/*== interface ==*/
.app-header { height: 55px; background: #fff; z-index: 1030; position: fixed }
.app-header > .container-fluid { height: 100%; }
.app-header .d-flex { height: 100%; }
.app-header a { height: 100%; display: flex; align-items: center; }
.app-header img { height: 100%; width: auto; object-fit: contain; max-width: 100%; }

.app-header-end {white-space: nowrap; display: flex; align-items: center; gap: 10px}
.app-header-end a.app-header--icon {font-size: 28px; color: #666; margin-right: 8px}
.app-header-end a.app-header--icon:hover {color: #000}


.app-menu {top: 55px; background: var(--bs-dark); position: fixed; z-index: 1001;}
.app-menu ul {margin: 0; padding: 0; list-style: none;}
.app-menu .category {list-style: none;}

.app-menu .category a {width: 50px; display: block; text-align: center; text-decoration: none; padding: 6px 4px; }
.app-menu .category i {color: #fff; opacity: 0.5; font-size: 20px}

.app-menu .category:hover > a {background: var(--hover-bg, #000);}

.app-menu .category:hover i {opacity: 1;}
.app-menu .category:hover ul {display: block;}

.app-menu .category ul {margin: 0; list-style: none; position: fixed; z-index: 999999; top: 55px; left: 50px; min-width: 350px; background: #f5f6fa; bottom: 0; padding: 15px 0px; display: none;}
.app-menu .category ul li.category-title {font-size:13px; letter-spacing: 1px; color: #000; padding: 0 25px; text-transform: uppercase; margin-bottom: 10px}
.app-menu .category ul li {}
.app-menu .category ul li a {width: 100%; padding: 5px 25px; text-align: left; color: #666; white-space: nowrap; margin: 0px;}
.app-menu .category ul li a:hover {color: #000; background: #e7eaf0; }
.app-menu .category ul li i {color: #666; font-size: 16px; margin-right: 5px;}

.app-main {margin-left:60px; width:calc(100vw - 75px); margin-top: 90px;}
h1.main-fixed {position: fixed;  width: 100vw; z-index: 10; left: 50px; top: 55px; background: #fafafa; padding-left:20px; padding-top: 15px; padding-bottom: 15px; border-bottom:1px solid #e5e5e5;}

.dashboard-wrapper {margin-top: -40px!important;}


.dropdown-menu {min-width: 200px; border-radius: 0;}
.min-w-auto {min-width: auto}
.dropdown-divider {opacity: 0.2}

.row-hover:hover {background-color: #f5f5f5;}


/* color editor */
.CodeMirror {font-size: 12px; height: 500px}
textarea.sm + .CodeMirror {height: 300px}
textarea.lg + .CodeMirror {height: 700px}
.CodeMirror .cm-comment {background-color: black; color: lightgreen!important; font-weight: bold!important;}
.CodeMirror-fullscreen-button {position: absolute; z-index: 1; margin-top: 10px; right: 20px;}

/* auth */
.card-login {max-width: 400px; margin-top: -150px;}


/* top-search */
.top-search {position: fixed; z-index: 1050; top:10px; width: 400px; left: calc(50vw - (450px / 2) - 10px); opacity: 0.5}
.top-search:focus-within, .top-search:hover {opacity: 1}
.top-search input {border-color: transparent; width: 100%!important;}

/* link-tuile */
.link-tuile {min-width: 250px; height: auto; display: inline-block; border-radius: 4px; border: 1px solid #e5e5e5; text-align: center; margin-right: 10px; padding: 15px 10px; color: #333;}
.link-tuile i {font-size:24px}
.link-tuile:hover {background: var(--bs-primary); border-color: var(--bs-primary); color: white;}

.widget-bookmarks .link-tuile {min-width: 150px; height: 100px; padding: 10px;}
.widget-bookmarks .link-tuile i {font-size: 20px}

.popover-bookmarks { max-width:none; }
.popover-bookmarks .popover-body { padding:8px; }
.popover-bookmarks .link-tuile { min-width:120px; width:120px; height:100px; padding:10px 5px; margin:0; font-size:12px; }
.popover-bookmarks .link-tuile i { font-size:24px; }


[data-sortable="true"] > * i:hover {cursor: move}

/* form */
.form-header-buttons {position:fixed; top: 65px; right:15px; text-align: right; z-index: 1020; }
body.modal-open .form-header-buttons {margin-right: 15px;}

.datagrid-toolbar-top-wrapper {position:fixed; top: 65px; right:0px; text-align: right; z-index: 1020; width: auto;}
body.modal-open .datagrid-toolbar-top-wrapper {margin-right: 15px;}

.cockpit-btn:hover { background: #f8f9fa !important;}