*{
   max-width:100%;
   box-sizing:border-box;
   margin:0;
   padding:0;
   font-family:system-ui,sans-serif;
   font-size:16px;
}

::selection{
   background-color:#31586D;
   color:#fefefe;
}

body{
   background-color:#fafafa;
}

ul,ol{
   list-style:none;
}

a{
   cursor:pointer;
   text-decoration:none;
   font-size:15px;
   font-weight:500;
}

h1{
   font-size:20px;
}
h2,h3,h4,h5,h6{
   font-size:18px;
}

.main-head{
   width:100vw;
   display:flex;
   justify-content:center;
   align-items:center;
   padding:4px 12px;
   margin-top:12px;
}
.main-head-title{
   width:100%;
   display:flex;
   justify-content:flex-start;
   align-items:center;
   flex-wrap:wrap;
   padding:4px 8px;
}
.main-nav{
   width:100vw;
   display:block;
   background-color:#fff;
   padding:0;
   box-shadow:
   0px -2px 3px -2px #d1d1d1,
   0px 2px 3px -2px #d1d1d1;
   position:sticky;
   top:0;
   z-index:999;
}

.main-menu{
   width:100%;
   display:flex;
   justify-content:flex-end;
   align-items:stretch;
   flex-wrap:wrap;
   row-gap:12px;
   column-gap:32px;
   padding:12px 4px;
}

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

.main-menu-links,
.main-menu-links:visited{
   color:#1a2f3a;
   padding:12px 6px;
}
.main-menu-links:hover,
.main-menu-links:focus{
   color:#fefefe;
   background-color:#1a2f3a;
}

.invert-cta,
.invert-cta:visited{
   color:#A21A1A;
}
.invert-cta:hover,
.invert-cta:focus{
   color:#fefefe;
   background-color:#A21A1A;
}

.main-content{
   padding:24px 12px;
}

.error-sections{
   width:max-content;
   max-width:720px;
   display:flex;
   flex-direction:column;
   justify-content:center;
   align-items:center;
   gap:12px;
   margin:16px auto;
   background-color:#A21A1A;
   color:#fefefe;
   padding:32px 16px;
   border-radius:2px;
}
.error-sections-title{
   width:100%;
   font-family:sans-serif;
}
.error-sections p{
   width:100%;
   font-family:sans-serif;
   line-height:2;
}

.error-sections a,
.error-sections p a,
.error-sections a:visited,
.error-sections p a:visited{
   display:inline-block;
   color:#fafafa;
   border:2px solid #fafafa;
   margin-top:4px;
   margin-bottom:4px;
   padding:6px 8px;
   transition:background-color .125s ease-in-out, color .125s ease-in-out;
}.error-sections a:hover,
.error-sections p a:hover{
   cursor:pointer;
   background-color:#fafafa;
   color:#A21A1A;

}

.main-sections{
   min-width:350px;
   width:calc(100% - 32px);
   display:flex;
   flex-direction:column;
   justify-content:flex-start;
   align-items:stretch;
   gap:12px;
   padding:18px 12px;
   background-color:#1a2f3a;
   color:#fefefe;
   margin:0 auto;
}
.main-sections-title{
   width:max-content;
   display:flex;
   justify-content:center;
   align-items:center;
   flex-wrap:wrap;
   padding:4px;
   text-align:center;
}

form{
   width:100%;
   max-width:350px;
   display:grid;
   grid-auto-flow:row dense;
   gap:8px;
   margin:0 auto;
   padding:12px 8px;
   position:relative;
}

.newsletter-form{
   max-width:840px;
}

form textarea{
   width:840px;
   min-width:840px;
   max-width:840px;
   display:block;
   border:none;
   line-height:2;
   padding:2px 4px;
   mix-blend-mode: luminosity;
}

.form-checkbox{
   width:100%;
   display:flex;
   justify-content:flex-start;
   align-items:center;
   flex-wrap:wrap;
   line-height:2;
   gap:8px;
}

input[type="checkbox"],
input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked{
   cursor: pointer;
   outline: none;
   width:18px;
   height:18px;
   background-color:#31586D;
   border:2px solid transparent;
   -webkit-appearance: none;
   border-radius:50%;
   box-shadow:none;
   margin:auto 0;
   transition:border .125s ease-in-out, box-shadow .125s ease-in-out, background-color .125s ease-in-out;
}
input[type="checkbox"]:checked{
   border:4px solid #335C71;
   box-shadow:0px 0px 1px 2px #335C71;
   background-color:#fefefe;
}
input[type="checkbox"]:hover{
   border:4px solid #335C71;
   box-shadow:0px 0px 1px 2px #335C71;
}
form input[type="checkbox"] + label{
   display:inline-block;
}

form input:disabled{
   background-color:#fefefe;
   opacity:0.8;
}

form input:not([type="submit"]){
   width:100%;
   border:none;
   line-height:2;
   padding:2px 4px;
   mix-blend-mode: luminosity;
   margin-bottom:8px;
}

form input[type="submit"]{
   width:250px;
   display:flex;
   justify-content:center;
   align-items:center;
   flex-wrap:wrap;
   gap:8px;
   border:none;
   line-height:1.5;
   padding:8px 16px;
   border-radius:2px;
   margin:20px auto auto auto;
   mix-blend-mode: luminosity;
   cursor:pointer;
}

.dashboard-links,
.dashboard-links:visited{
   width:250px;
   display:flex;
   justify-content:center;
   align-items:center;
   flex-wrap:wrap;
   gap:8px;
   text-align:center;
   margin:8px auto;
   background-color:#fefefe;
   padding:12px 8px;
   color:#1a2f3a;
   word-wrap:break-word;
   transition:background-color .075s ease-in-out, color .075s ease-in-out;
}
.dashboard-links:hover{
   background-color:#31586D;
   color:#fefefe;
}

.client-cards{
   width:100%;
   display:flex;
   flex-direction:column;
   justify-content:flex-start;
   align-items:center;
   gap:6px;
   margin:0 auto;
   padding:8px 16px;
   background-color:#294a5b;
}
.client-cards-name{
   font-size:16px;
}
.client-cards-links,
.client-cards-links:visited{
   width:max-content;
   display:flex;
   justify-content:center;
   align-items:center;
   flex-wrap:wrap;
   color:#1a2f3a;
   background-color:#C7E4FF;
   border:2px solid #fefefe;
   margin:18px auto auto auto;
   padding:6px 12px;
   transition:background-color .075s ease-in-out, color .075s ease-in-out;
   mix-blend-mode:darken;
}
.client-cards-links:hover{
   cursor:pointer;
   color:#294a5b;
   background-color:#F3F5F7;
   mix-blend-mode:normal;
}

form.search{
   width:100%;
   max-width:100%;
   grid-template-columns:1fr 250px 1fr;
   grid-auto-rows:minmax(40px, auto);
   grid-auto-flow:row dense;
   gap:12px;
   margin:0 auto;
   padding:4px;
}
form.search label{
   display:flex;
   justify-content:flex-end;
   align-items:center;
   flex-wrap:wrap;
   font-size:12px;
}
form.search input:not([type="submit"]){
   width:250px;
}
form.search input[type="submit"]{
   max-width:60px;
   margin:0;
}

.newsletter-img{
   display:flex;
   justify-content:flex-start;
   align-items:center;
   margin:12px auto;
   max-width:350px;
   height:auto;
   max-height:200px;
   -webkit-aspect-ratio:6/2;
   aspect-ratio:6/2;
   object-fit:cover;
}

.newsletters-nav{
   width:100%;
   display:block;
}
.newsletters-menu{
   width:100%;
   display:flex;
   justify-content:space-around;
   align-items:stretch;
   flex-wrap:wrap;
   gap:16px;
   margin:0 auto;
   padding:4px 6px;
}
.newsletters-items{
   width:100%;
   min-width:350px;
   max-width:350px;
   display:flex;
   flex-direction:column;
   justify-content:flex-start;
   align-items:stretch;
   gap:4px;
   background-color:#091115;
   padding:8px 12px;
}

.newsletters-preview-id,
.newsletters-preview-creation-date{
   font-size:14px;
   font-weight:500;
   width:100%;
   display:flex;
   justify-content:center;
   align-items:center;
   text-align:center;
   font-family:monospace;
   padding:2px;
}

.newsletter-preview{
   width:100%;
   background-color:#fff;
   padding:4px;
   color:#000;
   display:flex;
   flex-direction:column;
   justify-content:center;
   align-items:stretch;
   gap:4px;
}

.newsletters-title-preview{
   font-weight:500;
   font-size:12px;
   padding:4px 8px;
}

.newsletters-content-preview{
   font-size:10px;
   max-height:150px;
   overflow-y:auto;
   padding:4px 8px;
}

.newsletters-img-preview{
   width:100%;
   max-width:100%;
   max-height:80px;
   -webkit-aspect-ratio:3/1;
   aspect-ratio:3/1;
   object-fit:cover;
}

.modification-img-preview{
   max-height:180px;
}

.newsletter-links,
.newsletter-links:visited{
   width:250px;
   display:flex;
   justify-content:center;
   align-items:center;
   flex-wrap:wrap;
   word-wrap:break-word;
   gap:8px;
   text-align:center;
   margin:24px auto;
   background-color:#31586D;
   color:#fefefe;
   padding:12px 8px;
   transition:background-color .075s ease-in-out, color .075s ease-in-out;
}
.newsletter-links:hover{
   background-color:#294a5b;
   color:#fefefe;
}


.gestion-newsletters-block{
   width:max-content;
   max-width:100%;
   display:flex;
   justify-content:flex-start;
   align-items:center;
   flex-wrap:wrap;
   gap:16px;
   background-color:#6FA4BE;
   padding:4px 6px;
   margin:auto auto 0 auto;
   border-radius:2px;
}

form.newsletters-send{
   margin:0 auto;
   justify-content:center;
   border-radius:0;
}

form.newsletters-actions{
   width:max-content;
   margin:0;
   padding:0;
}

form input[type="submit"].dashboard-links-mini{
   width:max-content;
   margin:0;
   font-size:14px;
   font-weight:500;
   mix-blend-mode:normal;
   cursor:pointer;
}

@media only screen and (max-width:960px){
   .error-sections{
      max-width:590px;
   }

   .newsletter-form{
      max-width:640px;
   }

   .newsletter-form textarea{
      width:640px;
      min-width:640px;
      max-width:640px;
   }

   .newsletters-items{
      max-width:350px;
   }

   .main-menu-links{
      font-size:15px;
   }
}
@media only screen and (max-width:720px){
   .error-sections{
      max-width:350px;
   }

   .newsletter-form{
      max-width:350px;
   }

   .newsletter-form textarea{
      width:350px;
      min-width:350px;
      max-width:350px;
   }

   .newsletters-items{
      max-width:380px;
   }

   .main-nav{
      position:relative;
   }

   .main-menu{
      justify-content:flex-start;
   }

   .main-menu-links{
      font-size:15px;
   }
}