/* on.ornitho.css -- feuille de page de l'application d'identification.
 *
 * Remplace /css/id.2.0.css (910 lignes) et /css/menu_hide.css, tous deux a
 * supprimer une fois index.cgi bascule sur le socle v3.
 *
 * Produite par admin/_prod/util/decouper_css_ornitho.pl a partir d'id.2.0.css :
 * les regles d'en-tete, de menu et de pied de page sont jetees -- le socle les
 * porte -- et tout le reste est passe sous .on-centre, dans @layer pages.
 * Aucune declaration n'a ete reecrite.
 *
 * Les !important qui subsistent dans le bloc mobile ne sont pas une facilite :
 * Jcrop pose des styles EN LIGNE sur #cropbox, #ImgG et .recadre pendant le
 * recadrage. Une regle de feuille, si specifique soit-elle, ne les bat pas.
 * Les retirer casserait le recadrage sur telephone.
 */

@layer pages {

  /* Taille de base du contenu.
   *
   * Le socle sert 16 px, et toute cette feuille est ecrite en em : les
   * tailles se sont donc trouvees majorees d'un coup, au point de faire
   * deborder la zone de depot de la photo. On ramene la base ici, une seule
   * fois, plutot que de retoucher les 30 declarations font-size du fichier.
   *
   * Regle sur .on-centre : elle ne sort pas du contenu, l'en-tete et le pied
   * de page gardent la taille du socle.
   */
  .on-centre {
    font-size: 0.9rem;
  }

  .on-centre a {
    text-decoration: none;
    color:#8484ff;}
  
  .on-centre .ordre a:hover,
  .on-centre .famille a:hover,
  .on-centre #box_ia1:hover,
  .on-centre #box_ia2:hover,
  .on-centre a:hover {
    color:#ffa633;}
  
  .on-centre .ordre a,
  .on-centre .famille a,
  .on-centre .fiche {
    text-decoration: none;
    color:#838cc0;
    background: no-repeat right center/14px url(https://www.oiseaux.net/images/externe.png) ;
    padding: 0 17px 0 0;}
  
  .on-centre .ordre a,
  .on-centre .famille a {
    font-size:1.2em;}
  
  .on-centre div h1,
  .on-centre div h2 {
    text-align: center;
    margin:auto;}
  
  .on-centre .contenu {
    min-width: 300px;
    width: 90%;
    margin:auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: normal;}
  
  .on-centre .resultats {
    display: flex;
    flex-direction: column;
    padding: 5px 10px;
    width: 100%;
    font-size:1.1em;
    color: #000;}
  
  .on-centre .resultats h1,
  .on-centre .resultats h2 {
    margin: 0;
    padding: 0;
    font-size:1.3em;
    color: #000;}
  
  .on-centre .resultats h1 {
    width: 100%;
    margin: 0 0 10px 0;
    font-size:1.6em;
    color: #000;
    text-align:center;}
  
  .on-centre .titre-esp {
    width: 100%;
    background-color:#eeecec;
    font-size:1.1em;
    text-align: center;
    padding: 3px 0;}
  
  .on-centre .photo-img {
    margin: 5px 0 15px 0;
    margin-right:10px;
    min-height:150px;
    float:left;}
  
  .on-centre .titre-ia {
    text-align: left;
    margin: 25px 0 15px 0;}
  
  .on-centre .titre-ia p:first-child {
    font-weight:700;
    font-size:1.4em;
    color: #707070;
    background-color:#dbdbdb;
    padding: 2px 0 2px 15px;}
  
  .on-centre .texte-ia {
    font-size:1.1em;
    padding: 2px 0 10px 0;}
  
  .on-centre #box_ia1,
  .on-centre #box_ia2 {
    font-size:.7em;
    font-style:italic;
    cursor:pointer;
    color:#545e95;}
  
  .on-centre .titre-ia span:last-child {
    width: 100%;
    padding: 2px 0 2px 15px;}
  
  .on-centre .titre-ia span:nth-child(2) {
    font-size:1.1em;
    padding: 2px 0 2px 15px;}
  
  .on-centre .gen-spe {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border: 1px solid #111;}
  
  .on-centre .flex-col {
    display: flex;
    flex-direction: column;
    justify-content:center;
     align-content: stretch;
    width: 100%;
    min-height:30px;}
  
  .on-centre .flex-row,
  .on-centre .genre {
    display: flex;
    justify-content: space-between;}
  
  .on-centre .genre {
    border-left: 1px solid #919191;}
  
  .on-centre .flex-row {
    border-bottom: 1px solid #bebebe;}
  
  .on-centre .flex-row div:nth-child(2) {
    padding-left:10px;
    border-left: 1px solid #919191;}
  
  .on-centre .genres {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    min-height:30px;}
  
  .on-centre .flex-row,
  .on-centre .flex-row div:nth-child(2),
  .on-centre .genres,
  .on-centre .especes,
  .on-centre .genre,
  .on-centre .species {
    width: 100%;}
  
  .on-centre .genre {
    border-bottom: 1px solid #bebebe;}
  
  .on-centre .genre:last-child {
    border-bottom: 0 none;}
  
  .on-centre .genus {
    min-width: 170px;
    width: 170px;
    padding-left:10px;}
  
  .on-centre .col1,
  .on-centre .pour100 {
    width:80px;
    min-width: 80px;
    text-align:center;
    margin: auto; /* Important */}
  
  .on-centre .pour100 {
    width:110px;
    min-width: 110px;
    max-width: 110px;
    font-weight:700;
    font-size:1.1em}
  
  .on-centre .fam-img {
    align-items: center;
    align-content: center;
    text-align: center;
    margin: auto; /* Important */
    border-left: 1px solid #919191;
    min-width: 110px;
    max-width: 110px;}
  
  .on-centre .fam-img img {
    width: 90px;
    opacity: .3;
    vertical-align: bottom;}
  
  .on-centre /* ************ espèces ************ */ .especes {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    align-content: normal;
    margin: 10px 0 30px 0;}
  
  .on-centre .espece {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 250px;
    max-width: 250px;
    width: 250px;
    min-height: 390px;
    max-height: 390px;
    height: 390px;
    margin-top: 10px;
    padding:0 10px 10px 10px;
    background-color:#f4f4f4;
    border: 1px solid #919191;
    text-align: center;}
  
  .on-centre .especes .espece:nth-child(odd) {
    background-color:#fff;}
  
  .on-centre .pour100esp {
    width: 100%;
    min-height: 30px;
    max-height: 30px;
    font-weight: 700;
    font-size: 1.3em;
    text-align: center;
    margin-left: -10px;
    padding-right: 20px;
    background-color:#e5e5e5;}
  
  .on-centre .species {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    justify-content: center;
    align-items: center;
    width: 100%;}
  
  .on-centre .esp {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: auto; /* Important */
    text-align:center;
    font-size:1.4em;
    color:#838cc0;
    font-weight:900;
    max-height: 54px;}
  
  .on-centre .esp a {
    line-height: 1em;}
  
  .on-centre .latin,
  .on-centre .anglais {
    font-size:1.1em;
    margin-left:15px;}
  
  .on-centre .latin {
    font-style: italic;}
  
  .on-centre .spec-img {
    align-items: center;
    align-content: center;
    text-align: center;
    min-width: 250px;
    max-width: 250px;
    min-height: 250px;
    max-height: 250px;}
  
  .on-centre .spec-img img {
    vertical-align: bottom;
    width: 250px;}
  
  .on-centre .accueil_id {
    position: absolute;
    top:0;
    left:0;
    margin: 20px 30px 20px 30px;}
  
  .on-centre .accueil_id a,
  .on-centre .accueil_id a:hover {
    font-size: 1.4em;
    margin: 0 20px 0 20px;
    padding: 0 7px 1px 7px;
    border: 1px dashed #009578;
    border-radius: 10px;
    background-color: #f7f7f7;
    color: #7477a3;}
  
  .on-centre .accueil_id a:hover {
    border: 1px dashed #000;
    background-color: #fff;
    color: orange;}
  
  .on-centre .message,
  .on-centre .erreur {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    margin:5px;}
  
  .on-centre .message {
    margin:5px;
    color:red;}
  
  .on-centre .copyright {
    margin:20px;
    padding:20px;
    display: block;
    margin:auto;
    font-size:1em;
    text-align: center;
    font-style: italic;}
  
  .on-centre .copyright img {
    width:80px;
    height:50px;}
  
  .on-centre .recadre {
    position: relative;
    width: 100%;
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;}
  
  .on-centre .boutons {
    display: flex;
    width: 100%;
    margin:auto;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin-top: 30px;}
  
  .on-centre .validez,
  .on-centre .annuler {
    margin-right: 15px;
    padding: 5px 15px;
    border: 1px solid #222;
    border-radius: 5px;
    font-size:1.4em;}
  
  .on-centre .reponses {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;}
  
  .on-centre .reponses figure {
    width:200px;
    padding: 1px 5px;
    border: 1px solid #919191;}
  
  .on-centre .reponses figure figcaption {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin: 2px 0 0 0;
    width:200px;
    background-color: #FFF;
    border: 0 none;
    text-align: center;
    min-height:50px;
    font-size:1.2em;}
  
  .on-centre .reponses figure div {
    align-items: center;
    justify-content: space-around;
    width:200px;}
  
  .on-centre .reponses figure img {
    border: none 0;
    margin: 0;
    padding: 0;
    width:200px;
    height:200px;}
  
  .on-centre .drop {
    max-width: 400px;
    width: 400px;
    height: 400px;
    margin: 15px;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 500;
    font-size: 20px;
    cursor: pointer;
    color: #c3c3c3;
    border: 4px dashed #009578;
    border-radius: 10px;
    background-color: white;}
  
  .on-centre .drop p,
  .on-centre .drop span {
    text-align: center;
    hyphens: inherit;
    font-size: 1.2em;}
  
  .on-centre .drop--over {
    border-style: solid;}
  
  .on-centre .drop__input {
    display: none;}
  
  .on-centre .drop_erreur {
    color: red;
    font-size: 1.4em;}
  
  .on-centre .drop__thumb {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background-color: #cccccc;
    background-size: cover;
    position: relative;}
  
  .on-centre .drop__thumb::after {
    content: attr(data-label);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 5px 0;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.75);
    font-size: 14px;
    text-align: center;}
  
  .on-centre .jcrop-handle {
    height: 16px;
    width: 16px;}
  
  .on-centre .jcrop-handle.ord-n {left:50%;margin-left:-8px;margin-top:-8px;top:0;}
  
  .on-centre .jcrop-handle.ord-s {bottom:0;left:50%;margin-bottom:-8px;margin-left:-8px;}
  
  .on-centre .jcrop-handle.ord-e {margin-right:-8px;margin-top:-8px;right:0;top:50%;}
  
  .on-centre .jcrop-handle.ord-w {left:0;margin-left:-8px;margin-top:-8px;top:50%;}
  
  .on-centre .jcrop-handle.ord-nw {left:0;margin-left:-8px;margin-top:-8px;top:0;}
  
  .on-centre .jcrop-handle.ord-ne {margin-right:-8px;margin-top:-8px;right:0;top:0;}
  
  .on-centre .jcrop-handle.ord-se {bottom:0;margin-bottom:-8px;margin-right:-8px;right:0;}
  
  .on-centre .jcrop-handle.ord-sw {bottom:0;left:0;margin-bottom:-8px;margin-left:-8px;}
  
  .on-centre .info_ia1,
  .on-centre .info_ia2 {
      display:none;
      position:relative;
      top:0;
      width:100%;
      padding:0;
      margin:0 auto;
      overflow:auto;
      background-color:#feffd7;
      color:#000;
      z-index:50000;
      border:1px solid #6c6c6c;
      filter:drop-shadow(2px 2px 2px #000)}
  
  .on-centre .info_ia1 p,
  .on-centre .info_ia2 p {
      padding:10px;}
  
  .on-centre .info_ia1 h3,
  .on-centre .info_ia2 h3 {
      margin-left:10px;
      color:#333;
      font-size:1.2em;}
  
  .on-centre .ferme_ia1,
  .on-centre .ferme_ia2 {
    margin:0;
    padding:0;
    width:100%;
    height:25px;
    text-align:right;
    font-weight:600;
    border-bottom:1px solid #555;
    background-color:#f1f1f1}
  
  .on-centre .ferme_ia1 a,
  .on-centre .ferme_ia2 a {
    margin:0;
    padding:0 7px 0 7px;
    background-color:#FFF;
    color:#000;
    font-size:16px}
  
  .on-centre .ferme_ia1 a:hover,
  .on-centre .ferme_ia2 a:hover {
    background-color:#CECECE;}
  
  .on-centre /* ===================================================== NOUVEAUX STYLES POUR V2 - FILTRAGE GÉOGRAPHIQUE ===================================================== */ /* Écran d'accueil - Choix géolocalisation */ .choix-geo {
  	max-width: 800px;
  	margin: 0 auto 40px auto;
  	padding: 30px;
  	background: #f9f9f9;
  	border-radius: 12px;
  	box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
  
  .on-centre .choix-geo h2 {
  	font-size: 24px;
  	color: #2c5530;
  	margin-bottom: 15px;
  	text-align: center;}
  
  .on-centre .choix-geo .explication {
  	font-size: 16px;
  	color: #666;
  	margin-bottom: 30px;
  	text-align: center;
  	line-height: 1.6;}
  
  .on-centre .boutons-choix {
  	display: flex;
  	gap: 20px;
  	justify-content: center;
  	flex-wrap: wrap;}
  
  .on-centre .btn-choix {
  	flex: 1;
  	min-width: 280px;
  	max-width: 350px;
  	padding: 30px 20px;
  	background: white;
  	border: 2px solid #ddd;
  	border-radius: 10px;
  	cursor: pointer;
  	transition: all 0.3s ease;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	text-align: center;}
  
  .on-centre .btn-choix:hover {
  	border-color: #4a7c4e;
  	box-shadow: 0 4px 12px rgba(74, 124, 78, 0.2);
  	transform: translateY(-2px);}
  
  .on-centre .btn-sans-geo:hover {
  	background: #f0f8f1;}
  
  .on-centre .btn-avec-geo:hover {
  	background: #e8f5e9;}
  
  .on-centre .titre-btn {
  	font-size: 20px;
  	font-weight: bold;
  	color: #2c5530;
  	margin-bottom: 10px;
  	display: block;}
  
  .on-centre .desc-btn {
  	font-size: 14px;
  	color: #666;
  	line-height: 1.4;
  	display: block;}
  
  .on-centre /* Sélection du pays */ .selection-pays {
  	max-width: 600px;
  	margin: 0 auto 40px auto;
  	padding: 30px;
  	background: #f9f9f9;
  	border-radius: 12px;
  	box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
  
  .on-centre .selection-pays h2 {
  	font-size: 24px;
  	color: #2c5530;
  	margin-bottom: 15px;
  	text-align: center;}
  
  .on-centre .selection-pays .explication {
  	font-size: 16px;
  	color: #666;
  	margin-bottom: 25px;
  	text-align: center;}
  
  .on-centre .select-wrapper {
  	margin: 20px 0;}
  
  .on-centre .select-wrapper select {
  	width: 100%;
  	padding: 15px;
  	font-size: 16px;
  	border: 2px solid #ddd;
  	border-radius: 8px;
  	background: white;
  	cursor: pointer;
  	transition: border-color 0.3s;}
  
  .on-centre .select-wrapper select:hover,
  .on-centre .select-wrapper select:focus {
  	border-color: #4a7c4e;
  	outline: none;}
  
  .on-centre .btn-valider {
  	width: 100%;
  	padding: 15px;
  	font-size: 18px;
  	font-weight: bold;
  	color: white;
  	background: #4a7c4e;
  	border: none;
  	border-radius: 8px;
  	cursor: pointer;
  	transition: background 0.3s;
  	margin-top: 15px;}
  
  .on-centre .btn-valider:hover {
  	background: #3a6c3e;}
  
  .on-centre .retour {
  	margin-top: 20px;
  	text-align: center;}
  
  .on-centre .retour a {
  	color: #4a7c4e;
  	text-decoration: none;
  	font-size: 14px;}
  
  .on-centre .retour a:hover {
  	text-decoration: underline;}
  
  .on-centre /* Info pays affichée */ .info-pays {
  	background: #e8f5e9;
  	padding: 12px 20px;
  	border-radius: 8px;
  	text-align: center;
  	font-size: 16px;
  	color: #2c5530;
  	margin: 15px 0;
  	border-left: 4px solid #4a7c4e;}
  
  .on-centre .info-filtrage {
  	padding: 10px 0;
  	text-align: left;
  	font-size: 1.1em;
  	color: #000;
  	margin: 15px 0;}
  
  .on-centre /* Badges de distribution */ .badge-present,
  .on-centre .badge-accidentel,
  .on-centre .badge-introduit,
  .on-centre .badge-rare,
  .on-centre .badge-absent,
  .on-centre .badge-inconnu {
  	display: inline-block;
  	padding: 4px 10px;
  	border-radius: 12px;
  	font-size: 12px;
  	font-weight: bold;
  	margin-left: 8px;
  	white-space: nowrap;}
  
  .on-centre .badge-present {
  	background: #d4edda;
  	color: #155724;
  	border: 1px solid #c3e6cb;}
  
  .on-centre .badge-accidentel {
  	background: #fff3cd;
  	color: #856404;
  	border: 1px solid #ffeaa7;}
  
  .on-centre .badge-introduit {
  	background: #d1ecf1;
  	color: #0c5460;
  	border: 1px solid #bee5eb;}
  
  .on-centre .badge-rare {
  	background: #f8d7da;
  	color: #721c24;
  	border: 1px solid #f5c6cb;}
  
  .on-centre .badge-absent {
  	background: #f8d7da;
  	color: #cc0000;
  	border: 1px solid #cc0000;}
  
  .on-centre .badge-inconnu {
  	background: #e2e3e5;
  	color: #6c757d;
  	border: 1px solid #adb5bd;}
  
  .on-centre /* Bloc introduction nouvelle version (page d'accueil) */ .version-intro {
  	margin-bottom: 18px;}
  
  .on-centre .badge-new {
  	display: inline-block;
  	background: #e8f0fe;
  	color: #1a56db;
  	font-weight: bold;
  	font-size: 0.82em;
  	padding: 3px 12px;
  	border-radius: 20px;
  	letter-spacing: 0.03em;
  	border: 1px solid #c3d4f8;
  	margin-bottom: 10px;}
  
  .on-centre /* Localisation de la prise de vue */ .alerte-localisation {
  	padding: 4px 0;
  	margin: 4px 0 0 0;
  	font-size: 1.1em;
  	font-style: normal;
  	color: #444;}
  
  .on-centre /* Alerte espèces hors zone */ .alerte-hors-zone {
  	padding: 0;
  	margin: 5px 0;
  	text-align: left;
  	font-size: 1.25em;
  	background: none;
  	border: none;}
  
  .on-centre /* Texte contextuel (localisation,
  .on-centre phrase explicative) */ .alerte-contexte {
  	color: #666;
  	font-style: italic;
  	font-weight: normal;}
  
  .on-centre /* Mots-clés critiques : statut alarmant ou absence */ .alerte-critique {
  	color: #cc0000;
  	font-weight: bold;
  	font-style: normal;}
  
  .on-centre /* Adaptation mobile */ @media (max-width: 768px) {
    .boutons-choix {
      flex-direction: column;
      align-items: center;
    }
  
    .btn-choix {
      max-width: 100%;
      width: 100%;
    }
  
    .choix-geo,
    .selection-pays {
      padding: 5px;
      margin: 10px 0;
      width: 98%;
    }
    .selection-pays {
        text-align: center;
    }
    .selection-pays h2 {
      font-size: 20px;
      margin-bottom: 10px;
    }
    .select-wrapper {
        text-align: center;
    }
    .select-wrapper select {
      width: 90%;
      padding: 10px;
  
    }
    .btn-valider {
      width: 90%;
    }}
  
  @media only screen and (max-width: 640px) {
    .on-centre div h1,
    .on-centre div h2 {
      font-size: 1.3em;}
    .on-centre .recadre {
      width: auto !important;
      max-width: 100% !important;
      height: auto !important;}
    .on-centre #ImgG_Fond {
      display: none !important;}
    .on-centre #ImgG {
      position: relative !important;
      width: 100% !important;
      height: auto !important;
      left: auto !important;
      top: auto !important;}
    .on-centre #cropbox {
      max-width: 100% !important;
      height: auto !important;}
    .on-centre .especes,
    .on-centre .reponses {
      justify-content: center;
      gap: 10px;}
    .on-centre .espece {
      min-height: auto;
      height: auto;}
    .on-centre .copyright {
        margin: 10px;
        font-size: 0.8em;}
    .on-centre .contenu {
      min-width: 93%;
      width: 93%;}
    .on-centre .resultats {
      padding: 0;
    
      font-size: 1em;}
    .on-centre .drop {
      max-width: 300px;
      width: 300px;
      height: 300px;
      margin: 5px;
      padding: 15px;
      font-size: 12px;}
    .on-centre .accueil_id {
      position: absolute;
      top:0;
      left:0;
      margin: 5px 30px 20px 0px;}
    .on-centre .titre-ia {
      font-size: 0.9em;
      margin: 40px 0 5px 0;}
    .on-centre .texte-ia {
      font-size: 1em;
      padding: 2px 0 10px 0;
      width: 100%;}
  }
  
  @media (max-width: 450px) {
    .on-centre .fam-img {
      display: none;}
  }
  

  /* Zone de depot : hauteur imposee a 400 px alors que le texte d'aide en
   * demande davantage. Le debordement passe PAR-DESSUS le titre et le bouton
   * -- defaut anterieur au socle v3, et non introduit par lui : a 16 px de
   * base, l'ancienne chaine debordait plus encore.
   *
   * La boite garde sa taille minimale, mais grandit si le texte l'exige.
   * Une hauteur fixe sur un contenu qu'on ne maitrise pas est un pari.
   */
  .on-centre .drop {
    height: auto;
    min-height: 400px;
  }

  /* Consequence directe du height:auto ci-dessus, et regression constatee en
   * ligne le 10/08 : la vignette de la photo deposee est en height:100%.
   * Un pourcentage rapporte a un parent en hauteur AUTOMATIQUE vaut zero --
   * la vignette existait, avec son image de fond, mais haute de 0 pixel.
   * On lui donne une hauteur reelle : etiree sur la hauteur de la boite,
   * avec un plancher.
   */
  .on-centre .drop__thumb {
    align-self: stretch;
    height: auto;
    min-height: 350px;
  }

  /* « Images similaires » : quatre vignettes sur une ligne.
   *
   * Les cartes font 200 px mais portent 40 px de marge de chaque cote, soit
   * un pas de 280 px. Quatre en demandaient 1120 pour 1060 disponibles : la
   * quatrieme passait seule a la ligne suivante, pour 60 pixels. Marges
   * ramenees a 10 px, donc un pas de 220 px -- les quatre tiennent, et il
   * reste de quoi respirer.
   */
  .on-centre .reponses > * {
    margin-left: 10px;
    margin-right: 10px;
  }

  @media only screen and (max-width: 640px) {
    .on-centre .drop {
      height: auto;
      min-height: 300px;
    }
    .on-centre .drop__thumb {
      min-height: 250px;
    }
  }
}

.on-centre .jcrop-handle {
  width: 16px;
  height: 16px;
}
.on-centre .jcrop-handle.ord-n  { margin-left: -8px;   margin-top: -8px; }
.on-centre .jcrop-handle.ord-s  { margin-left: -8px;   margin-bottom: -8px; }
.on-centre .jcrop-handle.ord-e  { margin-right: -8px;  margin-top: -8px; }
.on-centre .jcrop-handle.ord-w  { margin-left: -8px;   margin-top: -8px; }
.on-centre .jcrop-handle.ord-nw { margin-left: -8px;   margin-top: -8px; }
.on-centre .jcrop-handle.ord-ne { margin-right: -8px;  margin-top: -8px; }
.on-centre .jcrop-handle.ord-se { margin-right: -8px;  margin-bottom: -8px; }
.on-centre .jcrop-handle.ord-sw { margin-left: -8px;   margin-bottom: -8px; }