/*
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;
}
.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;
}
.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.on {
  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;
}