/* Admin CSS for Drupal 11
   This file contains styles for the admin interface of a Drupal site.
   It includes styles for various admin elements, forms, and widgets.
*/

.field--widget-paragraphs .field-multiple-table{
  box-shadow: 0 2px 0.25rem rgba(0, 0, 0, 0.1);
  border: 1px solid #dedfe4;
  padding: 10px;
}

.field--widget-paragraphs .field-multiple-table .form-element {
  width: 100%;
}

.theme_setting_row{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin: 24px 0;
}
.theme_setting_row > div, .theme_setting_row > fieldset{
  margin-bottom: 0;
  margin-top: 0;
  flex: 1;
}
.theme_setting_row fieldset{
  margin-top: 0;
}


/**

 */

.cinematheque_module_slider--bottom{
  padding: 2rem;
  margin: auto;
  display: table;
}
.cinematheque_module_slider--head{
  padding: 1rem 0;
}
.cinematheque_module_slider--container{
  background-color: white;
  overflow: hidden;
  position: relative;
}
.cinematheque_module_slider--container .overlay{
  position: absolute;
  z-index: 10;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0, 0.5);
  top: 0;
  left: 0;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
}
.cinematheque_module_slider--container .picto{
  width: 100px;
  position: absolute;
  top: 2rem;
  left: 2rem;
}
.cinematheque_module_slider--container:after{
  content:"";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: calc((  100% - 1100px )/ 2 );
  bottom: 0;
  z-index: 3;
  pointer-events: none;
  background-color: rgba(30, 30, 30, 0.9);
}
.cinematheque_module_slider--container:before{
  content:"";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: calc((  100% - 1100px )/ 2 );
  bottom: 0;
  z-index: 3;
  pointer-events: none;
  background-color: rgb(30, 30, 30, 0.9);
}
.cinematheque_module_slider--wrapper{
  position: relative;
  padding: 4rem;
}
.cinematheque_module_slider--wrapper:after{
  content:"";
  display: block;
  position: absolute;
  bottom: 0;
  left: calc(50% - 550px);
  width: 1100px;
  height: 4rem;
  z-index: 3;
  pointer-events: none;
  background-color: rgb(30, 30, 30, 0.9);
}
.cinematheque_module_slider--wrapper:before{
  content:"";
  display: block;
  position: absolute;
  top: 0;
  left: calc(50% - 550px);
  width: 1100px;
  height: 4rem;
  z-index: 3;
  pointer-events: none;
  background-color: rgb(30, 30, 30, 0.9);
}
.cinematheque_module_slider--image{
  width: 1100px;
  height: 845px;
  position: relative;
  margin: auto;
  user-select: none;
  /*overflow: hidden;*/
}
.cinematheque_module_slider--image:after{
  content:"";
  display: block;
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 307px;
  width: 100%;
  pointer-events: none;
  background-image: url("../images/ticket-mask--gray-1.svg");
  background-repeat: no-repeat;
  opacity: 0.9;
  background-position: -115px -156px;
}
.cinematheque_module_slider--image .mask{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  z-index: 2;
  /*overflow: hidden;*/
}

.cinematheque_module_slider--image img{
  height: 100%;
  width: auto;
  object-fit: cover;
  max-width: none;
  /*object-position: left top;*/
  position: absolute;
  top: 0;
  touch-action: none;
}
.cinematheque_image-cadre{
  position: absolute;
  z-index: 2;
  outline: 2px solid #0074bd;
  pointer-events: none;
}
.cinematheque_image-cadre:after{
  content:"";
  display: block;
  width: 10px;
  height: 10px;
  background-color: white;
  border: 2px solid #0074bd;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cinematheque_image-cadre:before{
  content:"";
  display: block;
  width: 10px;
  height: 10px;
  background-color: white;
  border: 2px solid #0074bd;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  pointer-events: none;
}
.cinematheque_image-cadre div:after{
  content:"";
  display: block;
  width: 10px;
  height: 10px;
  background-color: white;
  border: 2px solid #0074bd;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cinematheque_image-cadre div:before{
  content:"";
  display: block;
  width: 10px;
  height: 10px;
  background-color: white;
  border: 2px solid #0074bd;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(50%, 50%);
  pointer-events: none;
}

/* Cinematheque module slider - end */

.cm-block-content-table-img{
  font-size: 13px;
  font-style: italic;
}
.cm-block-content-table-img img{
  width: 120px;
  /*height: 90px;*/
  aspect-ratio: 14/9;
  object-fit: cover;
  border: 2px solid #003ecc;
}

/* */
.language-tabs{
  display: flex;
  position: relative;
  border-bottom: 1px solid rgb(194, 194, 194);
}

.language-tabs > a{
  display: block;
  padding: 12px 2rem;
  line-height: 1.2rem;
  color: black;
  text-decoration: none;
  border-radius: 2px 2px 0 0;
  position: relative;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: bold;
}
.language-tabs a.is-active {
  color: #003ecc;
}
.language-tabs a.is-active:before {
  content:"";
  display: block;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.1875rem;
  border-right: none;
  border-bottom: 3px solid #003ecc;
  border-left: none;
  position: absolute;
}
.language-tabs a:hover{
  background: #e5edff;
}

.cin_row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cin_row .cin_col{
  flex: 0 calc(50% - 10px);
  min-width: calc(50% - 10px);
}

.cin_row .cin_col .media-library-selection .media-library-item--grid{
  width: 100%;
}



.cin-information-block-content{
  background-color: #fcf1d4;
  border: 1px dashed #b4a888;
  padding: 30px;
  margin-bottom: 10px;
}


.echo-table{
  margin: auto;
}
.echo-table .is-invalid{
  color: red;
}

.cin_display_flex{
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.cin_display_flex:last-child{
  margin-bottom: 40px;
}

.cin_btn{
  padding: 5px 15px;
  background-color: #d3d4d9;
  display: inline-block;
  border-radius: 2px;
  font-weight: 700;
  font-size: 12.64px;
  color: #232429;
}

.cin_btn:hover{
  background-color: #c1c2c7;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  color: #232429;
  cursor: pointer;
}


.cin_display_none{
  display: none!important;
}

tr.cin_active td{
  background-color: #e9ffe9;
}