/* CSS Document */
@charset "UTF-8";
/*
@import url("/___/_AoTo/ow_designs/_animations.css") screen;
*/

#ow {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

#competences {
    line-height: 2;
    margin: 40px 0 60px;
}
  
.ow_admin_inpage {
    border:solid 1px var(--warning);
    border-style: groove;
}



#section {
    padding: 0px 0;
}

#adminblock_content #section {
    padding: 0;
}

#section section {
	margin-top:0px;
    margin-bottom: 5rem;
}

body.Pip footer {
    position: fixed;
    bottom: 5px;
}

body.WebFab-Apps #section,
body.Accueil-David_Mourvillier #section {
    padding: 0;
}
/*
.ls-wp-container {
	display:none;
}
*/


#header .navbar.logo_only.loaded, .navbar.logo_only.undisplay  {
 /*   margin-top: -50px;
*/
	transform: translate(0,-60px);
	-o-transform: translate(0,-60px);
	-moz-transform: translate(0,-60px);
	-webkit-transform: translate(0,-60px);
	-ms-transform: translate(0,-60px);
}


#header .navbar.logo_only.loaded #logo, 
#header .navbar.logo_only.undisplay #logo,
.navbar.logo_only.undisplay.display #header_logo span {
    background: var(--dark);
    position: absolute;
    border-radius: 40px;
    padding: 4px 0 0 3px;
    width: 60px;
    height: 60px;
    display: block;
    margin-top: 0px;
    z-index: 1;
}

#ow_codeexplain_owv_vars {
    width: 100%;
}

.upload_box {
    width: 50%;
    min-width: 300px;
    float: right;
    top: 0;
}

.logo_only.loaded #header_logo, 
.logo_only.undisplay #header_logo {
    margin-top: 85px;
    position: absolute;
}

#header_logo span,
.navbar.logo_only.display #header_logo span {
    display: none !important;
}

.navbar.logo_only.loaded #header_logo span,
.navbar.logo_only.undisplay:not(.display) #header_logo span {
    position: absolute;
    margin: 14px 0 0 20px;
	padding: 9px 30px 10px 45px;
    font-size: 12px;
/*    
    font-family: unset;
*/    line-height: 1;
    background: var(--dark);
    z-index: 0;
    width: auto;
    white-space: nowrap;
    border-radius: 15px;
    height: 33px;
}

.navbar.logo_only #header_logo span a {
    color: var(--light);
	padding:0 0 0 0;
	display:block;
    text-shadow: none;
}



#header_logo span, .navbar.logo_only.display #header_logo span {
    display: none !important;
}
.navbar.logo_only.loaded #header_logo:hover span, .navbar.logo_only.undisplay:not(.display) #header_logo:hover span {
    display: block !important;
}

.navbar.logo_only #header_logo span a:hover {
	padding:0 0 2px 0;
	text-decoration: underline;
}




.website.card .suivis,
.website.card .docs,
.website.card .hbgmt,
.website.card .access {
	display:none;
}
.website.card.suivis .suivis,
.website.card.docs .docs,
.website.card.hbgmt .hbgmt,
.website.card.access .access {
	display:block;
}

.websitenav a {
	display:inline-block;
	margin-right:10px;
	padding:3px;
}
.websitenav a:hover, .websitenav a.on {
	background:#ddddee;
}



h2 small {
    display: block;
}

h1 small, h3 small, h4 small, h5 small, h6 small {
    display: inline-block;
    margin-left:1.3rem;
}

#adminblock_content .fixed-top {
    position: relative;
    top: unset;
    right: unset;
    left: unset;
    z-index: unset;
    width: calc(100% + 60px);
	margin: 0 -30px 0 -30px;
}

body.Modeles-Bootstrap footer {
    display: none !important;
}

#owslider_ctn {
    margin-top: -16px;
}

.ow_slider_navbar.navbar.navbar-expand-lg.fixed-top {
    background: transparent !important;
}

.ow_slider_navbar.navbar.navbar-expand-lg.fixed-top #navbarResponsive {
    display:none;
}
.dropdown-menu.show[aria-labelledby="looks"],
.dropdown-menu.show[aria-labelledby="mise_en_page"] {
    display: flex;
    width: 420px;
    flex-wrap: wrap;
}

.dropdown-menu.show[aria-labelledby="looks"] .dropdown-item ,
.dropdown-menu.show[aria-labelledby="mise_en_page"] .dropdown-item {
	min-width: 33.333%;
	width: auto;
}

.dropdown-menu.show[aria-labelledby="sliders"] {
    display: flex;
    width: 840px;
    flex-wrap: wrap;
    justify-items: center;
    align-items: center;
}

.dropdown-menu.show[aria-labelledby="sliders"] .dropdown-item {
    width: auto;
    min-width: 33.333%;
    flex-shrink: unset;
    flex-grow: 2;
    max-width: 66.666%;
}

#owslider_ctn .ls-fullscreen-wrapper, 
#owslider_ctn .ls-fullscreen-wrapper > div {
	max-height: calc(100% - 50px) !important;
}


.hidden {
	display:none !important;	
}

.clear {
	clear:both;
}

.ow_content {
    width: inherit;
}

.aoprop_elementvalue {
	width:100%;
	display: inline-block;
}
.aoprop_label {
	width:25%;
	display: inline-block;
}
.aoprop_label::after {
	content:" : ";
}
.aoprop_elementvalue.labelled {
	width:75%;
}


.bd_navrow {
    padding: 0;
    margin: 0;
}

.navbar-dark.bg-dark {
    color: var(--light);
}

.bd_prevnext_results input {
    padding-right: 8px;
    padding-left: 8px;
}

.bd_navrow .navbar-collapse .row {
    margin: 0 -20px 0 -20px;
    max-width: calc(100% + 60px);
    width: calc(100% + 60px);
}

.bd_navrow input, .bd_navrow select {
    text-align: center;
}
.bd_navrow select {
    padding-right: 2px;
    padding-left: 2px;
}

textarea.ow_dbfield {
    height: 36px;
}

.ow_dbgestion .s_footer div form {
    text-align: center;
}

#ow_codeexplain_display {
    display: block;
    width: 100%;
}

.ow_code_item {
	float:left;
	margin-bottom: 1em; 
}

.ow_code_item.inobject, .ow_code_item p.inobject  {
    display: block;
}
.vars_inobjects .ow_code_item.inobject  p.inobject {
    display: block;
}

.owvar_array_select {
}

.ow_code_item > select + h5 {
	display:none;
}

.ow_db_card > .s_in_s {
    padding: 15px 0 10px 0;
    border-bottom: 1px solid var(--gray);
}
.dbfield_checkbox {
    display: none;
}
.dbfield_checkbox.show {
    display: unset;
}

.a-modal + .modal {
	display:none;
}

.a-modal.active + .modal,
.ow_code_item.modal-active .modal {
	display:block;
}

.ow_code_item .modal-header, 
.ow_code_item .modal-header > h5, 
.ow_code_item .modal-header > div {
    flex: none;
    display: block;
}

.ow_code_item .modal-header {
    padding-bottom: 0;
}

.ow_code_item .modal-header .close {
	position:absolute;
	top: 10px;
	right: 15px;	
}

.ow_code_item .modal-header .nav.nav-tabs {
    margin-bottom: -1px;
}

.ow_code_item .a-modal {
    position: absolute;
    right: 2em;
    top: 1em;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--info);
    color: var(--light);
    text-align: center;
    line-height: 1.7;
    font-weight: bold;
    opacity: 0.4;
	transition:opacity 0.4s 0.1s ease-in;
	
}

.ow_code_item .a-modal {
    opacity: 1;
}

.ow_code_item .ow_selectable {
    background: var(--light);
    height: 46px;
    border-radius: 2px;
    border: 1px solid var(--info);
}

.ow_code_item .ow_selectable h5 {
    padding: 12px 15px;
    font-size: 1.15em;
}

.ow_code_item .ow_selectable select {
	width: calc(100% - 2.5em);
	max-height:40px;
	margin:3px;
}

.modal-dialog {
    max-height: calc(100% - 40px);
    overflow: auto;
}

.smarty {
    display: none;
}

.owce_translations select.owvar_array_select {
    display: none;
}

.owce_translations .smarty.show {
    display: block;
}

#translate_to_select {
    display:none;
}


.tab-pane.owce_translations .owtranslations_forms > div {
    margin: 20px -2px 10px;
    display: inline-block;
}

#iframes_block {
    margin: 10px 0;
}

.owtr_klang {
    display: block;
    float: right;
    background: var(--secondary);
    color: var(--light);
    position: absolute;
    right: 20px;
    margin-top: -21px;
    padding: 2px 15px;
    font-size: 12px;
    border-radius: 10px 10px 0 0;
}

.owtr_klang a {
    color: var(--light);
    margin: 0 10px 0 0;
    text-decoration: underline;
}

.owce_translations .ow_code_item .modal-dialog {
    width: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

.owce_translations .ow_code_item .modal-dialog .modal-content {
    box-shadow: 2px 2px 6px #666 !important;
}

#owce_translate {
    width: 100%;
    height: 600px;
    border: none;
    padding: 0;
    margin: 0;
}

.owce_translate_varname {
    margin: 0 30px 3px 140px;
}

.owce_translate_varname::before {
    content: "variable $";
    margin-left: -40px;
}

.owce_translations > nav a {
    margin: 0 20px 0 0px;
}

.opacity_light {
    display:none !important;
}

.show_all .opacity_light {
    opacity:0.2;
    display:block  !important;
}
.opacity_medium {
    opacity:0.5;
}
.opacity_full {
    opacity:1;
}

.opacity_medium.modal-active,
.opacity_light.modal-active {
    opacity:1;
}

body.saving {
    opacity: 0.2;
}
#mask {
    display:none;
    top: 0;
    bottom: 0;
    width:100%;
    height:100%;
    position:absolute;
    
}
body.saving #mask {
    display:block;
}

#LoadingBox {
    position: static;
    top: 0;
    width: 1px;
    height: 0px;
	display:none;
}

#LoadingBox .waiting {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1002;
    background-color: var(--secondary);
    top: 0;
    display: table-row;
}

#LoadingBox .waiting > div {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}



/**************************************
    * LOADING APPLICATIONS EXTERIEURES *     
***************************************/
#ow_appboxes_ctn {
	position: fixed;
	top: 101%;
	width: 100%;
	background-color: var(--light);
	height: 0px;
	z-index: 10000;
	background: rgba(0,0,0,0.5);
	
	margin: 0;

	transition: height ease-out 1s 0.3s, margin-top ease-out 1s 0.3s;
	
}

#ow_appboxes_ctn > ul {
    margin-top: -30px;

}

#ow_appboxes_ctn ul#ow_appboxes_tabslinks {
	border:1px solid var(--gray);
	box-shadow:1px -1px 2px 2px var(--dark);
}

#ow_appboxes_ctn ul#ow_appboxes_displaylinks {
    position: absolute;
    right: 30px;
    z-index: 1;
    border: none;
	margin-top: -47px;
}





#ow_appboxes_ctn > div {
    display:none;
}

#ow_appboxes_ctn.on {
	top: 0px;
	height: 100%;
}

#AGR_controls {
	margin-top:4px;	
	float:left;
}
#external_app_urlinfo {
    clear: both;
    margin-top: 4px;
}
#ow_appboxes_ctn.on > ul {
	border:none;
	box-shadow:none;
}
#ow_appboxes_ctn.on > div {
    display:block;
}

#ow_appboxes_ctn > ul#ow_appboxes_tabslinks {
    position: absolute;
    width: calc(100% - 72px);
    margin: -40px 36px 0px;
    z-index: 1;
    background: var(--light);
    border: 1px solid var(--gray);
    box-shadow: 1px -1px 3px 0px var(--gray);
}

#ow_appboxes_ctn.on > ul#ow_appboxes_tabslinks {
	margin-top: 28px;
	box-shadow: none;
	border: none;
	padding-top: 3px;
	border-bottom: 2px solid white;
}
#ow_appboxes_tabs {
	width: calc(100% - 70px);
	height: calc(100% - 38px);
	margin: 28px 0 0 35px !important;
	position: absolute;
	padding: 40px 0 0 0;
	display: block;
	padding: 0;
}


#ow_appboxes_tabs .tab-pane {
    width: 100%;
    height: 100%;	
	margin:0;
	padding: 40px 0 0 0;
}
#ow_appboxes_ctn #ow_appboxes_tabs iframe {
    width: 100%;
    border: none;
    height: 100%;
	overflow: auto;
	margin:0;
	padding:0;
}


#ow_appboxes_ctn.on > ul#ow_appboxes_displaylinks {
    margin-top: 23px;
}
#ow_appboxes_ctn > ul#ow_appboxes_displaylinks li {
    border: none;
}
#ow_appboxes_ctn > ul#ow_appboxes_displaylinks .close {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    text-align: center;
}

#ow_appboxes_displaylinks .close.on {
	background-color:var(--warning);
}

#ow_appboxes_displaylinks .close.hide, #ow_appboxes_displaylinks .close.minimize, #ow_appboxes_displaylinks .close.on {
    transform: rotate(90deg) scale(0.5);
    background-color: var(--secondary);
    margin: 0 -20px;
    font-weight: bold;
    padding: 0px 2px 5px 2px;
    font-size: 32px;
}
#ow_appboxes_displaylinks .close.on {
	transform:rotate(90deg) scale(0.5);
	background-color:var(--primary);
}

#ow_appboxes_ctn.on.mini { 
    top: calc(60% - 0px);
    height: 33%;	
	background: none;
}

#ow_appboxes_ctn.on.mini #ow_appboxes_tabs {
    height: 100%;
    box-shadow: 1px -1px 10px 2px var(--dark);
}


#ow_appboxes_displaylinks .close.hide {
    letter-spacing: -0.35em;
}

#ow_appboxes_displaylinks .close.minimize {
    letter-spacing: 0.01em;
}

#ow_appboxes_displaylinks .close.on {
    letter-spacing: 0.2em;
}

#ow_appboxes_displaylinks .close.on {
    padding-left: 8px;
}
#ow_appboxes_displaylinks .close.minimize {
    letter-spacing: 0.01em;
    margin: 0 0.01em;
}



#from_to_selectors label {
    display: inline-block;
    margin: 0 20px 0 5px;
}


.lang_chkbx {
    z-index: 1;
    position: absolute;
    margin: 10px 0 0 10px;
}

label.lang_chkbx_label {
    display: inline-block;
    margin: 0 10px 0 5px;
    background: var(--light);
    padding-left: 30px;
}

.upload_box input#filestotranslate {
    display: none;
}
button.dropdown-toggle {
    border:#000;
    background:#fff;
}
#ow_appboxes_ctn.on.mini > ul {
    margin-top: 40px;
}

#ow_codeexplain_owv_vars h4 {
    display: block;
    width: 100%;
    float: none;
    clear: both;
    margin-left: 15px;
}

.ow_code_translations .menu > div, #from_to_selectors > div {
    display: inline-block;
    margin-right: 20px;
}

#from_to_selectors > div.owce_translats_btns {
    display: none;
}

#ow_codeexplain_owv_vars .ow_code_item .modal.border-info {
    background-color: rgba(0,0,0,0.5);
}


#header_content.off, #page_content.off {
	height:0px;
	padding:0px;
	overflow:hidden;
	position:absolute;
	margin-top:0;
	transition:height ease-out 1s 0.3s, margin-top ease-out 1s 0.3s;
	
}

/**************************************
    * VISITE APIs et CONSTRUCTION DE REQUETES *     
***************************************/

.obj_element, .obj_key, .obj_val {
	padding:2px;
}
.obj_element {
	display:table;
}
.obj_element_in {
	display:table-row;
}
.obj_key, .obj_val {
	display:table-cell;
	vertical-align:top;
}
.obj_key {
	background:#dde;
	padding : 4px 4px;
	width:auto;
}
.obj_key::after {
	content:" : ";
}
.obj_element, .obj_val {
	border:2px solid #dde;
}

.obj_element.obj_deep_0 {
	width:100%;
}

.clear {
    float: none !important;
    clear: both;
    display: block;
    position: relative;
    height: 5px;
    width: 100% !important;
}

#AGR_controls .tools {
	display:inline-block;	
}


#menus_API #SELLSY_menus div, #menus_API #XKPLANS_menus div {
	float:left;
    width:25%;
}
#menus_API #SELLSY_menus div#SELLSY_menu_params, #menus_API #XKPLANS_menus div#XKPLANS_menu_params {
    width:75%;
}
#menus_API #XKPLANS_menus #XKPLANS_usages {
	clear:both;
    width:100%;	
}
#menus_API #XKPLANS_menus #XKPLANS_usages div {
    width:50%;	
}
#menus_API #SELLSY_menus div#SELLSY_menu_params textarea {
    height:136px;
}
#menus_API #XKPLANS_menus div#XKPLANS_menu_params textarea {
    height:68px;
}
button#XKPLANS_display_doc {
	width:70%;
	float:left;
}        
button#XKPLANS_display_infos {
	width:30%;
	float:left;
}     

#XKPLANS_API_biblio, #SELLSY_API_biblio {
    clear: both;
    padding-top: 10px;
    float: none;
}

#XKPLANS_action, #XKPLANS_method {
	float:left;
}        
#XKPLANS_action {
	width:25%;
}        
#XKPLANS_method {
	width:75%;
}        



/**************************************
    * ADMINISTRATION *     
***************************************/

body.G-_Admin-evenements .owdbrow {
	margin-bottom:6px;
	padding-bottom:2px;
	border-bottom:1px solid #eee;
}
body.G-_Admin-evenements .dbfield_title {
	font-weight:bold;
}
body.G-_Admin-evenements .dbfield_explain {
	color:#666;
}
body.G-_Admin-evenements .dbfield_checkbox {
	display:none;
}
		
#evt_datetime_creation_dbrow, #evt_group_id_dbrow, #evt_id_dbrow, .ow_db_menus, #evt_history_dbrow {
    display: none;
}

.ow_db_menus.new_modify {
    display: block;
}
#adminblock_content .ow_db_menus {
    display: block;
}
/*
div#adminblock_content {
	font-family: "Raleway", sans-serif;
	font-weight: 300;
	background-color:white;
	color: #121212;
}
*/
#adminblock_content footer#footer_content {
	position:relative;	
}

#listeheader select {
    max-width: 150px;
}

.TableBoutons ._Admin___reservations_by_eventsgroup_CSV_export,
.TableBoutons ._Admin___reservations {
	display:none;
}

body.G-_Admin-utilisateurs form.BD_AjaxVals {
    display: block !important;
    margin: 5px 0;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
}




/**************************************
    * ADMINISTRATION / CodeEdit *     
***************************************/




body.G-CodeEdit .CodeMirror {
    height: calc(100% - 30px);
}
body.G-CodeEdit #menugeneral_codeedit {
    background: #c2c1d5;
}
body.G-CodeEdit div.elmt_box {
    border-width: 1px;
}
body.G-CodeEdit #codeedit_files_list .DivOuvrant {
    padding: 3px 5px;
    margin: 0;
    border-top-style: solid;
	border-top-width: 0px;
}


.fixed_ifscroll {
}

#admin_module.fixed_scroll_on .fixed_scroll_on {
    position: fixed;
    width: 100%;
    z-index: 5;
    background: #e4e4e8;
	height: 32px;
}

#admin_module.fixed_scroll_on .DivOuvrant .fixed_scroll_on {
    top: 33px;
    padding-top: 4px;
    height: 36px;

}

#admin_module.fixed_scroll_on #codeedit_files_list {
    position: relative;
    z-index: 0;
    margin-top: 37px;
    display: block;
}

#admin_module.fixed_scroll_on #menugeneral_codeedit.elmt_box, #admin_module.fixed_scroll_on .elmt_box h3 {
	display:none;
}

.elmt_box h3 {
	display:inline-block; 
	margin:7px 0px 0px 12px;
	
}
#admin_module.fixed_scroll_on .elmt_box h3 {
	display:none;
}

div.elmt_box > div.btns_menus_toggle {
	display:none;
	width:auto;
	float:right;
	font-weight:bold;
	margin-top: -29px;
	margin-right: 17px;
}
#admin_module.fixed_scroll_on div.elmt_box > div.btns_menus_toggle {
	display:block;
}

.google_ifr {
	height:calc(100% - 100px);
	position:static;
	top:70px;
	width:100%;
	margin:10px;
	border:#000 solid 1px;
	box-shadow:1px 1px 3px 5px #335;
	display:block;
}	
.google_ifr_hidden {
	display:none;
}	


.logo_only.loaded #header_logo, .logo_only.undisplay #header_logo {
    margin-top: 85px;
    position: absolute;
    margin-left: -55px;
    transform: scale(0.5);
}

.logo_only.loaded #header_logo:hover, .logo_only.undisplay #header_logo:hover {
    margin-left: -75px;
    transform: scale(1);
    
}

#InfosSocietes {
    margin: 3em 0 1em 0;
}


	
option.named_datasource {
    color:var(--gray);
}
    
option.named_datasource.object_linked {
    color:var(--dark);
}

option.named_datasource.default_datasource {
    color:var(--primary);
}



/*//////////////////////////////////////////////////
OW_TRANSLATIONS
/////////////////////////////////////////////////*/

.ow_field_display {
    background-color: rgba(255,255,255,0.5);
    background-color: var(--light);
    
    padding: 0.2em 1em;
    margin-bottom: 2px;
    
    display:block;
}
    
.nav-tabs {
    border-bottom: 2px solid #fff;
}    
    
#rgpd_save_btns .dropdown-menu {
    padding: 10px 20px 20px !important;
    min-width: 260px;
    margin-right: -30px;
}    
#rgpd_tabs ol li {
    padding-bottom: 10px !important;
}
li.separator {
    list-style-type: none;
} 
    
    
#ow_rgpdapp_terms {
    padding-bottom: 40px;
}    
    
#ow_rgpdapp_terms .close.bottom {
    top: 10px;
}    


/* Cas de texte à traduire non encore traduit
Régle aussi présente dans SiAdmin.css ( CSS de l'administration oTo_web )
*/
.not_translated {
	
}
  
/*///////////////////
MULTI SLIDERS SHOWROOM PAGE
//////////////////*/

div#sliders {
    width: 103%;
    height: auto;
    margin: 20px 0 0px -1%;
    padding: 0 0 0 1%;
}

div#sliders div {
    width: 300px;
    height: auto;
    margin: 0 0.5% 1% 0;
    padding: 15px;
    border: #999 1% solid;
    background-color: var(--light);
    border-radius: 20px;
    display: inline-block;
}

div#sliders div div {
    width: auto;
    margin: 0;
    display: block;
    padding: 0 1% 0 1%;
    white-space: nowrap;
    border-radius: 0px;
}

div#sliders div iframe, div#sliders div a {
}
div#sliders div iframe {
    overflow: hidden;
    height: 196px;
    width: 100%;
    
}


/*/////////////////// 
OW_TRANSLATIONS APP PAGE
//////////////////*/


.ow_code_translations .ax-main-title, .ow_code_translations .ax-upload-all, .ow_code_translations .ax-clear, .ow_code_translations .upload_box .explain {
    display: none;
}

.ow_code_translations .upload_box,
.ow_code_translations .upload_box div {
    display: inline !important;
    width: auto !important;
    min-width: unset;
    float: none;
}

.ow_code_translations .ax-file-list {
    position:absolute;
}

.ow_requests {
background-color: var(--secondary);
    padding: 2px;
    max-height: 280px;
    overflow: auto;
    margin: 0 0 20px 0;
    border-bottom: 2px solid var(--secondary);
    border-radius: 5px;

}
.ow_requests > div {
    border-radius: 10px;

}
.ow_db_card.ao_request {
    background-color: var(--light);
    margin: 0.25rem 0 0.25rem 0;
    padding: 5px;
}

.ow_dbgestion, .dbsetfield {
    width: 100%;
    font-size: 0.9rem;
    background: var(--light);
    padding: 0.85rem 1rem 0.5rem 1rem;
    border: var(--gray) 1px solid;
    margin-top: -2.8rem;
}

.dbfield_label {
    font-size: 0.7rem;
    position: absolute;
    z-index: 1;
    margin: -2.7rem 0 0 2.1rem;
    height: 10px;
}

span.dropdown-item:hover {
    background: transparent;
}
span.dropdown-item:hover a {
    text-decoration: underline;
}

#ow_extest_ctn {
    background: var(--white);
    border: 1px solid var(--secondary);
    position: absolute;
    width: 300px;
    height: 280px;
    bottom: 0;
    left: 0;
    margin: 10px;
    border-radius: 20px;
    box-shadow: 1px 1px 10px 1px #000;
    padding: 10px;
    white-space: normal;
    overflow: auto;
    z-index: 1;
    display: none;
}