.custom-file{
    min-width: 300px;
    max-width: 600px;
}
#my_alerts{
    margin:0px;
}

#myUL{
    max-height:350px;
  overflow-y: scroll;
}

.cadre{
    border-radius: 10px;
    //border-style: solid;
    border-width: 1px;
    padding: 20px;
    background-color : #f2f2f2;
}
.button_traitment{

  //border: 3px solid #73AD21;// lors de survol ajouter bordure
  padding: 10px;
    font-family: "DM Sans", Sans-serif;
    font-size: 13px;
    font-weight: 900;
    line-height: 25px;
    letter-spacing: 1.3px;
    word-spacing: 0px;
    fill: #FFFFFF;
    color: #FFFFFF;
    background-color: #1A2455;;
    border-radius: 30px 30px 30px 30px;
    padding: 12px 20px 12px 20px;
    text-transform: uppercase;
}
.clearfix::after {// utile pour forcer a garder le bouton dans le cadre
  content: "";
  clear: both;
  display: table;

}
.layout_1{
    //background-color: coral;
   // margin:auto;//attention bouge differemment que navigation et logo
    //max-width : 1280px;
    //font-family : 'DM Sans';
}

.title_bloc{
    margin:0px;
    

}
h1{
    font-family : 'DM Sans';
    font-size : 42px;
    color : #1A2455;
    font-weight: bold;
    line-height: 48px;
    margin-bottom: 0.5rem;
}

h3 {
  color: #1A2455;
}

ol.demo {
    margin: 0;
    padding: 0;
    //list-style: none;
    list-style-position: inside;


}
.accroche{
    width:80%;
    font-size: 15px;
    color : #1A2455;
    //margin-bottom: 0.5rem;
    //margin-bottom: 50px;
    //margin-bottom: min(60px, 4%);
    //margin-bottom: min(60px, 4%);
    margin-bottom: 4%;
    
}
@media (max-width: 1500px), (max-height: 950px)
{
  .accroche{
    font-size: 15px;
    color : #1A2455;
    //margin-bottom: 0.5rem;
    //margin-bottom: 50px;
    margin-bottom: 20px;
  }
}

.content_bloc{
    //background-color: yellow;//pour test
    //padding: 2px;//pour test

}

.display_bloc{
    //padding: 4px;
    //background-color: black;
    //padding: 4px;
    //height: 400px;

}
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  //background-color: lightblue;//pour test
  //box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

}
.navig_bloc{
    margin-top: 10px;
    //background-color: white;//red;
    padding: 2px;
}
.prev_bt{
    //background-color: white;
    //float: left;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

    font-family: "DM Sans", Sans-serif;
    font-size: 13px;
    font-weight: 900;
    line-height: 25px;
    letter-spacing: 1.3px;
    word-spacing: 0px;
    fill: #FFFFFF;
    color: #FFFFFF;
    background-color: #1A2455;;
    border-radius: 30px 30px 30px 30px;
    padding: 12px 20px 12px 20px;
    text-transform: uppercase;



}
.espace_vertical_vide{
    height : 40%;
}
.troisquart{
    height : 80%;

}
.unquart{
    height : 20%
}


.next_bt{
     background-color: white;
     //float: right;
     /*box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);*/

    font-family: "DM Sans", Sans-serif;
    font-size: 13px;
    font-weight: 900;
    line-height: 25px;
    letter-spacing: 1.3px;
    word-spacing: 0px;
    fill: #FFFFFF;
    color: #FFFFFF;
    background-color: #1A2455;;
    border-radius: 30px 30px 30px 30px;
    padding: 12px 20px 12px 20px;
    text-transform: uppercase;
    border-style: none;
}

.dropdown_button{
  background-color: #1A2455;
  border-radius: 30px 30px 30px 30px;
  padding: 8px 16px 10px 16px;
  text-transform: uppercase;
  line-height: 25px;
    letter-spacing: 1.3px;
    word-spacing: 0px;
    fill: #FFFFFF;
    color: #FFFFFF;
}


.dropdown_button:link { text-decoration: none; }
.dropdown_button:visited { text-decoration: none; }
.dropdown_button:hover {
    text-decoration: none;
     color: #FFFFFF;}
.dropdown_button:active { text-decoration: none; }

.dropdown_menu-minwidth{
  min-width: 1rem;
}



.base_bt{
     //background-color: white;
     //float: right;
     //box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

     //font-family: "DM Sans", Sans-serif;
    font-size: 13px;
    //font-weight: 900;

    line-height: 25px;
    letter-spacing: 1.3px;
    word-spacing: 0px;
    fill: #FFFFFF;
    color: #FFFFFF;
    background-color: #1A2455;
    border-radius: 30px 30px 30px 30px;
    padding: 12px 20px 12px 20px;
    text-transform: uppercase;
    box-shadow: none; /* Remove shadows */
    outline: none; /* Remove the outline on focus */
    -webkit-appearance: none; /* Remove default styling on WebKit browsers */
    -moz-appearance: none; /* Remove default styling on Mozilla browsers */
    appearance: none; /* Standard way to remove default styling */
}
.base_bt:link {
    text-decoration: none;
     box-shadow: none; /* Remove shadows */
    outline: none; /* Remove the outline on focus */
    -webkit-appearance: none; /* Remove default styling on WebKit browsers */
    -moz-appearance: none; /* Remove default styling on Mozilla browsers */
    appearance: none; /* Standard way to remove default styling */}
.base_bt:visited {
    text-decoration: none;
     box-shadow: none; /* Remove shadows */
    outline: none; /* Remove the outline on focus */
    -webkit-appearance: none; /* Remove default styling on WebKit browsers */
    -moz-appearance: none; /* Remove default styling on Mozilla browsers */
    appearance: none; /* Standard way to remove default styling */}
.base_bt:hover {
    text-decoration: none;
     color: #FFFFFF;}
.base_bt:active { text-decoration: none; }

.submit_bt{
     background-color: white;
     //float: right;
     /*box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);*/
     font-family: "DM Sans", Sans-serif;
    font-size: 13px;
    font-weight: 900;
    line-height: 25px;
    letter-spacing: 1.3px;
    word-spacing: 0px;
    fill: #FFFFFF;
    color: #FFFFFF;
    background-color: #1A2455;;
    border-radius: 30px 30px 30px 30px;
    padding: 12px 20px 12px 20px;
    text-transform: uppercase;
}

.center{
  display: flex;
  align-items: center;
  justify-content: center;
}



.flex-container > div {
  //background-color: #f1f1f1;
  //width: 100px;
  margin: 1px;
  //text-align: center;
  //line-height: 75px;
  //font-size: 30px;
}
.canevas_bloc{
    vertical-align: top;
    width: 800px;
    height: 600px;
    padding: 0px;
}
.comment_bloc{
    width: 30% ;//width: 420px;
    min-width : 400px;
    height: 600px;
    font-size: 15px;
    color : #1A2455;
    line-height: 2;

    //border: 3px solid ;
    //border-color: #1A2455;
    //background-color: #f2f2f2;
    //border-right:3px solid ;
    //border-color: #1A2455;


}
.small_height{
    height: 100px;
}
.tool_bloc{
    width: 60px;
    //padding-left: 30px;
    //margin : 20px;
    align:center;

}

.shadowss{
    /* offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    }

.hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}

div.item {
    /* To correctly align image, regardless of content height: */
    vertical-align: top;
    display: inline-block;
    /* To horizontally center images and caption */
    text-align: center;
    /* The width of the container also implies margin around the images. */
    width: 120px;
}
img {
    //width: 50px;
    //height: 50px;
    //background-color: grey;
}
.caption {
    /* Make the caption a block so it occupies its own line. */
    display: block;
}

.pointer {cursor: pointer;}
.no-drop {cursor: no-drop;}

button:disabled,
button[disabled]{
  //border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}


/*  BOUTON RADIO*/
/*----------------*/


/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 13px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #1A2455;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

.lm_description_field{

    overflow: hidden; 
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    cursor: pointer;
    /* border-radius: 15px; */
}



.lm_description_field_extend{
  /* background-color: #1A2455; */
  display: -webkit-box;
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical; 
  overflow: visible;
  /* border-radius: 15px; */

}
.description:hover{
  background-color: rgb(255, 171, 44);
}

.description{
  margin:0px;
  text-align: center;
  position: relative;

  background-color: orange;
  
  color:white;
  
  animation-name: movingDescription;

  animation-duration: 2300ms;

  animation-iteration-count: initial;

  animation-direction: alternate; 

  /* -webkit-animation-play-state: paused; */
}
.cadre_description{
  /* height:32px; */
  background-color: rgba(255,155,0,0.5);
  /* overflow: hidden; */
  border-color: orange;
  border-width: 1px;
  border-style: solid;
}
@keyframes movingDescription{
  0% {
    transform: translate(0, 0);
    color:orange;
    /* opacity: 0.3; */
  }

  20%{
    transform: translate(0px, 35px);
    color:orange;
  }

  20.1%{
    transform: translate(0px, -25px);
    color:white;
  }
  40%{
    transform: translate(0px, 0px);
  }
}