/*################################################################################################*/
/*-------------------------->  Styles defini par defaut  pour le site <---------------------------*/
/*################################################################################################*/

html,
body {
height: 100%;
margin: 0;
padding: 0;
}

body {
display: flex;
flex-direction: column;
min-height: 100vh;
}

.wrapper {
display: flex;
flex: 1;
}

main {
flex: 1;
margin-left: 30vh;
display: flex;
flex-direction: column;
}

/*################################################################################################*/
/*------------------------------------->     Bootstrap      <-------------------------------------*/
/*################################################################################################*/

/* Custom Bootstrap Theme - Dark Blue */
body {
background-color: #191f2b;
color: #EEEEEE;
}

/* Dark Blue Borders */
.border-dark {
border-color: #3a465b !important;
}

/* Dark Blue Buttons */
.btn-default {
background-color: #3a465b;
color: #EEEEEE;
border-color: #3a465b;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open>.dropdown-toggle.btn-default {
background-color: #2a3140;
border-color: #2a3140;
}

/* Dark Blue Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
color: #EEEEEE;
}

:root,
[data-bs-theme=dark] {
--bs-link-color: #a8b1c2;
--bs-link-hover-color: #EEEEEE;

--bs-tertiary-bg: #2a3140;
--bs-body-color: #EEEEEE;
--bs-border-color: #3a465b;
--bs-nav-tabs-border-color: #EEEEEE;
}



.btn-primary {
--bs-btn-color: #EEEEEE;
--bs-btn-bg: #3a465b;
--bs-btn-border-color: #2a3140;
--bs-btn-hover-bg: #2a3140;
--bs-btn-active-bg: #1e2531;
}

.text-bg-primary,
.bg-primary {
--bs-bg-opacity: 1;
background-color: #3a465b !important;
}

.page-link.active,
.active>.page-link {
z-index: 3;
color: var(--bs-pagination-active-color);
background-color: #2a3140;
border-color: #3a465b;
}

.btn-outline-secondary {
--bs-btn-color: #EEEEEE;
--bs-btn-border-color: #3a465b;
--bs-btn-hover-bg: #2a3140;
}

body>div.wrapper>nav>ul>li.nav-item.dropdown>div {
position: relative;
border-radius: 0px;
background-color: hsl(221deg 21% 17%);
border: 0px;
padding: 0px;
}

body>div.wrapper>nav>ul>li.nav-item.dropdown>span {
background-color: #3a465b;
}

.form-control {
--bs-body-color: #EEEEEE;
background-color: #2a3140;
border-color: hsl(220 20% 40% / 1);
}

.form-control:focus {
--bs-body-color: #EEEEEE;
background-color: #2a3140;
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.list-group {
--bs-list-group-color: #EEEEEE;
--bs-list-group-bg: #2a3140;
}

.btn {
--bs-btn-color: #EEEEEE;
}

/*################################################################################################*/
/*--------------------------------------->     header      <--------------------------------------*/
/*################################################################################################*/

header {}

div#head {}

span#header_print {
display: none;
}

#logo> {}

/*################################################################################################*/
/*------------------------------------->        Skin           <----------------------------------*/
/*################################################################################################*/

.carousel-inner {
border-radius: 15px;
}

.note-editor.note-frame,
.note-editor.note-airframe {
border: 1px solid #3a465b;
}

.note-btn {
border: 1px solid #2a3140;
color: #EEEEEE;
background-color: #3a465b;
}

.note-editor.note-frame .note-statusbar,
.note-editor.note-airframe .note-statusbar {
background-color: #2a3140;
}

.note-btn:active,
.note-btn.active {
color: #3a465b;
border: 1px solid #EEEEEE;
background-color: #2a3140;
}

.note-toolbar {
border-bottom: 1px solid #2a3140;
background-color: #2a3140;
}

/*################################################################################################*/
/*------------------------------------->         Nav           <----------------------------------*/
/*################################################################################################*/

nav {
width: 200px;
height: 100vh;
position: fixed;
color: #EEEEEE !important;
background-color: #191f2b !important;
width: 30vh;
text-align: center;
}

#logo {
width: 80%;
margin-top: 3vh;
margin-bottom: 4vh;
}

.dropdown-menu {
text-align: center;
}

.nav-link {
color: #EEEEEE;
}

.nav-link:hover {
color: #2a3140;
background-color: aliceblue;
}


.dropdown-item:hover {
color: #2a3140;
background-color: aliceblue;
}

/*################################################################################################*/
/*--------------------------------->          Article            <--------------------------------*/
/*################################################################################################*/

.note-editor.note-frame,
.note-editor.note-frame,
article {
background-color: hsl(219 21% 17% / 1);
}

article {
flex: 1;
padding: 60px;
}


/*################################################################################################*/
/*------------------------------------>         Page            <---------------------------------*/
/*################################################################################################*/

pre#pre_kas {
width: 290px;
font: 1em 'Open Sans', sans-serif, Verdana;
background: #2a3140;
border: 1px solid #3a465b;
padding: 8px;
color: #EEEEEE;
}

div#cadreblanc {
background: #2a3140;
border: 1px solid #3a465b;
}

.tr1 {
background: #2a3140;
}

.tr2 {
background: #3a465b;
}

/*################################################################################################*/
/*--------------------------------->          Galleries            <------------------------------*/

/*################################################################################################*/
/*--------------------------------->          Form            <-----------------------------------*/
/*################################################################################################*/

input,
textarea,
select {
background-color: #2a3140;
color: #EEEEEE;
border: 1px solid #3a465b;
}


/*################################################################################################*/
/*--------------------------------->          Special            <--------------------------------*/
/*################################################################################################*/

div#link_div table {
left: 25px;
}

td#link a {
text-decoration: none;
background-color: #2a3140;
color: #EEEEEE;
display: block;
text-align: center;
border: 1px solid #3a465b;
padding: 10px;
width: 300px;
}

td#link a:hover {
background-color: #4a5671;
color: #EEEEEE;
}

.nav-tabs {
--bs-nav-tabs-border-color: #ffffff;
}

.tab-item,
.bookmark-item {
padding: 10px;
margin: 5px;
background-color: #191f2b;
border-radius: 4px;
cursor: move;
position: relative;
}

.tab-item:hover,
.bookmark-item:hover {
background-color: #5c6b8a;
}

#addTabBtn,
#addBookmarkBtn,
#saveBtn {
color: #FFF;
Background-color: #59a884;
}

#addTabBtn:hover,
#addBookmarkBtn:hover,
#saveBtn:hover {
color: #FFF;
Background-color: hsl(153 60% 40% / 1);
}

.modal-content {
background-color: hsl(219 21% 17% / 1);
}

.btn-close {
filter: invert(1);
}

/*################################################################################################*/
/*------------------------------------>        Footer         <-----------------------------------*/
/*################################################################################################*/

footer {
background-color: #14181f;
color: white;
text-align: center;
padding: 10px;
margin-top: auto;
}

span#mention {
text-align: center;
position: absolute;
display: block;
top: 10px;
left: 50%;
margin-left: -100px;
}

span#mention a {
color: #EEEEEE;
text-decoration: none;
}

span#mention a:hover {
color: #4a5671;
}


/*################################################################################################*/
/*------------------------------------>        @media         <-----------------------------------*/
/*################################################################################################*/

@media (max-width: 768px) {
.wrapper {
flex-direction: column;
}

nav {
width: 100%;
height: auto;
position: relative;
}

main {
margin-left: 0;
}
}