/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html,
body {
    background: $background;
    color: $textColor;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0 0 1px rgba(0,0,0,0.3);
    cursor: default;
    height: 100%;
}

/** Reset style */

ul {
    margin: 0;
    padding: 0;
}

/** Button style */

.btn {
    $glow: inset 0 1px 0 rgba(255, 255, 255, 0.2),  0 1px 7px rgba(0, 0, 0, 1);
    @include glow($glow);
    @include border-radius($borderRadiusSmall);
    text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.btn-success {
    @include gradient ($btnSuccessBackground, 0.7);
}

.btn-info {
    @include gradient ($btnInfoBackground, 0.7);
}

.btn-success:hover {
    @include gradient ($btnSuccessBackgroundHighlight, 0.7);
}

.btn-info:hover {
    @include gradient ($btnInfoBackgroundHighlight, 0.7);
}

.btn-flat {
    filter:progid:DXImageTransform.Microsoft.gradient(enabled='false');
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-image:none;
    border:0;
    text-shadow: none;
}

/** Helpers style */

.full-height {
    height: 100%;
}

.full-width {
    width: 100%;
}

.text-error {
    color: $colorError;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.one-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.no-overflow {
    overflow: hidden;
}

.fixed-table {
    table-layout: fixed;
    width:100%;
}

.rounded {
    @include border-radius($borderRadiusSmall);
}

/** Recaptcha style */

#recaptcha_widget .btn-toolbar {
    width: 300px;
}

#recaptcha_widget .btn-toolbar .btn {
    min-width: 20%;
}

#recaptcha_widget table tr td {
    text-align: center;
}

#recaptcha_image {
    width: 100% !important;
}

#recaptcha_image img {
    width: 100% !important;
}

.footer a {
    color: $footerLinkColor;
}

.footer a:hover {
    color: $footerLinkColorHover;
}

/** Alert style */

.alert {
    padding: 0px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    line-height: 16px;
    $glow: 0 1px 7px rgba(0, 0, 0, 1);
    @include glow($glow);
}

.alert .alert-block-close {
    width:45px;
    text-align: center;
    font-size:36px;
}

.alert table {
    border-collapse: separate;
}

.alert .alert-block-logo {
    width: 45px;
    vertical-align: top;
    text-align: center;
}

.alert .alert-block-close a:hover {
    text-decoration: none;
}

.alert.alert-success .alert-block-content {
    border-right: 1px solid lighten($successBackground, 10%);
}

.alert.alert-success .alert-block-close {
    border-left: 1px solid darken($successBackground, 20%);
}

.alert.alert-success .alert-block-close a {
  color: $successText;
}

.alert.alert-error .alert-block-content {
    border-right: 1px solid lighten($errorBackground, 10%);
}

.alert.alert-error .alert-block-close {
    border-left: 1px solid darken($errorBackground, 20%);
}

.alert.alert-error .alert-block-close a {
  color: $errorText;
}

.alert.alert-info .alert-block-content {
    border-right: 1px solid lighten($infoBackground, 10%);
}

.alert.alert-info .alert-block-close {
    border-left: 1px solid darken($infoBackground, 20%);
}

.alert.alert-info .alert-block-close a {
    color: $infoText;
}

.alert.alert-warning .alert-block-content {
    border-right: 1px solid lighten($warningBackground, 10%);
}

.alert.alert-warning .alert-block-close {
    border-left: 1px solid darken($warningBackground, 20%);
}

.alert.alert-warning .alert-block-close a {
    color: $warningText;
}

.alert .close {
    position: static;
}

.alert table {
    table-layout: fixed;
    width: 100%;
}

.alert table td {
   padding: 9px 5px;
}

/** blockquote style */

blockquote {
    page-break-inside: avoid;
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    margin: 1.5rem 10px;
    padding: 0.5rem 10px;
    quotes: "\201C""\201D""\2018""\2019";
    color: #333;
}

blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}

blockquote p {
    display: inline;
}
/** app css */

.help-block-error {
    border: 1px solid $colorError;
}

.well-large {
    padding: 20px;
}

.close {
    color: $white;
    opacity: 1;
}

.btn-trigger {
    padding: 7px 12px;
    min-width: 100px;
}

.facebook-badge {
    background-color: $colorFacebook;
    @include gradient($colorFacebook, 0.8);
}

.google-plus-badge {
    background-color: $colorGooglePlus;
    @include gradient($colorGooglePlus, 0.8);
}

.viadeo-badge {
    background-color: $colorViadeo;
    @include gradient($colorViadeo, 0.8);
}

.twitter-badge {
    background-color: $colorTwitter;
    @include gradient($colorTwitter, 0.8);
}

.github-badge {
    background-color: $colorGithub;
    @include gradient($colorGithub, 0.8);
}

.linkedin-badge {
    background-color: $colorLinkedin;
    @include gradient($colorLinkedin, 0.8);
}

.match-hint {
    font-size: 13px;
}

.input-block-level {
    min-height: 36px;
}

.dropdown-menu {
    border-radius: 0px;
    min-width: 60px;
    @include glow($dropDownLanguageGlow);
}

#authentication-sidebar-language button {
    background-color: $backgroundSideBar;
    color: $textColor;
    border-radius: 0px;
    text-shadow: none;
    border-left: 1px solid $inputOutsideBorder;
    background-image: none;
    font-size: $fontSizeSmall;
    padding: 0 12px;
}

#authentication-sidebar-language li a {
    font-size: $fontSizeSmall
}

#authentication-sidebar-language .language {
    margin-right: 8px;
}

#authentication-sidebar-language .caret {
   margin:9px 0px 0px 7px;
   border-top-color: $languageCaretColor;
}

.left-content h1 {
    font-size: $fontSizeLarge;
}

.left-content .logo img {
    max-height: 100px;
}

.forget-password-link {
    font-size: $fontSizeSmall;
    text-decoration: underline;
}

label[for=remember-me]{
    padding-top: 5px;
}

.logo,
.header {
    padding: 10px 0;
}

button[type=submit] {
    margin: 30px 0px 0px 0px;
    width: 100%;
}

.authentication-sidebar {
    min-height: 100%;
    height: auto;
    background: $backgroundSideBar;
    border-radius: 0;
    @include glow($sideBarGlow);
    padding-bottom:50px;
}

.authentication-sidebar .text-title {
    margin: 15px 0;
}

.authentication-sidebar form .input-prepend {
    margin-left: 0px;
}

.authentication-sidebar form input {
    padding: 8px 5px;
}

.authentication-sidebar form label {
    margin-top: 15px;
}

.authentication-sidebar form .switch label {
    margin-top: 0;
}

.authentication-sidebar .switch-control {
    margin-top: 15px;
}

.authentication-sidebar form table {
    width: 100%;
    table-layout: fixed;
}

.authentication-sidebar form table tr {
    border:1px solid $inputOutsideBorder;
}

.authentication-sidebar form table td.icon {
    width: 20px;
    padding-left: 8px;
}

.authentication-sidebar form .field-error {
    position: relative;
    display: block;
    margin: 15px;
    color: $white;
    max-width: none;
    background-color: $colorError;
    color: $white;
    border: 1px solid lighten($colorError, 10%);
    @include border-radius($borderRadiusSmall);
    line-height: 16px;
}

.authentication-sidebar form .field-error table {
    table-layout: fixed;
    width: 100%;
}

.authentication-sidebar form .field-error table tr {
    border: none;
}

.authentication-sidebar form .field-error td {
    vertical-align: middle;
}

.authentication-sidebar form .field-error table td.icon {
    width:30px;
}

.authentication-sidebar form .field-error.bottom .arrow::after {
     border-bottom-color: $colorError;
}

.sidebar-block {
    border-radius :0px;
    border-bottom: 1px solid $sideBarBlockBorderColorBottom;
    border-top: 1px solid $sideBarBlockBorderColorTop;
}

.sidebar-block:first-child {
    border-top: none;
}

.sidebar-block:last-child {
    border-bottom: none;
}

.authentication-no-account {
    padding: 4px 12px;
}

.sidebar-hint {
    margin: 10px 0;
    font-size: $fontSizeSmall;
}
.sidebar-hint-large {
    font-size: 16px;
}

.text-title {
    font-size: 36px;
    line-height: 36px;
}

#forgot-password {
    margin-top: 50px;
}

.input-table textarea:hover,
.input-table input:hover,
.input-table textarea:active,
.input-table input:active,
.input-table textarea:focus,
.input-table input:focus {
  outline: none;
  border: none !important;
  box-shadow: none !important;
  box-radius: $inputBorderRadius !important;
}

.input-table input, .input-table select, .input-table textarea {
    border: $inputBorder !important;
    background-color: $inputBackground !important;
    color: $textColor  !important;
    margin: 0 !important;
}

.input-table.input-table-error tr {
    border: 1px solid $colorError;
}

.input-table.input-table-error td {
    color: $colorError;
}

.input-table.input-table-error input {
    color: $colorError;
}

.input-table.input-table-error input::-webkit-input-placeholder {
  color: $colorError;
}

.input-table.input-table-error input:-moz-placeholder {
  color: $colorError;
}

.input-table.input-table-error input:-ms-input-placeholder {
  color: $colorError;
}

.input-table.input-table-success tr {
    border: 1px solid $colorSuccess;
}

.input-table.input-table-success td {
    color: $colorSuccess;
}

.input-table.input-table-success input {
    color: $colorSuccess;
}

.input-table.input-table-success input::-webkit-input-placeholder {
  color: $colorSuccess;
}

.input-table.input-table-success input:-moz-placeholder {
  color: $colorSuccess;
}

.input-table.input-table-success input:-ms-input-placeholder {
  color: $colorSuccess;
}

.input-table td {
    background-color: $inputBackground;
}

form[name=forgottenPasswordForm] {
    margin-top: 50px;
}

form[name=loginForm] label,form[name=register] label {
    font-size: $fontSizeLarge;
}

form[name=loginForm] label[for=remember-me],
form[name=registerForm] label[for=terms-of-use] {
    font-size: $fontSizeSmall;
}

form[name=loginForm] label[for=remember-me] input,
form[name=registerForm] label[for=terms-of-use] input{
    margin-right: 5px !important;
}

.provider-list li {
    padding: 0;
}

.provider-badge table {
    table-layout: fixed;
    width: 100%;
}

.cgu-content {
    margin: 50px 0;
}

.left-content .content {
    border-radius: 0;
    min-height: 550px;
    height: 100%;
}

#main-bar {
    margin-top: 40px;
}

.brand .section-title {
    color: $grayLight;
}

input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
    min-height: 30px;
}

legend {
    color: $grayLighter;
}

.footer {
    padding: 20px 0px;
}

.footer-list {
    margin: 0;
    padding: 0;
    height: 16px;
}

.footer-list li {
    border-left: 1px solid $textColor;
    padding: 0 10px;
    line-height: 16px;
}

.footer-list li.item-first{
    border: none;
    padding: 0 10px 0 0;
}

.container {
    max-width: 980px;
}

.provider-badge {
    margin: 15px 0 5px 0;
    min-height: 55px;
    $glow: 0 1px 7px rgba(0, 0, 0, 1);
    @include glow($glow);
}

.provider-badge img {
    height: 55px;
    max-width: 55px;
}

.provider-badge .pseudo {
    font-size: 15px;
    min-width: 80px;
}

.provider-badge .email {
    font-size: $fontSizeSmall;
    min-width: 80px;
}

.provider-badge ul {
    margin: 5px 0 5px 10px;;
}

.authentication-user-pres-phraseanet {
    margin: 5px 0;
    padding: 15px 15px 20px 15px;
    color: $identityPhraseanetColor;
    background: $identityPhraseanetBackgroundColor;
    font-size: $fontSizeSmall;
}

.authentication-user-pres-phraseanet i {
    color: $identityPhraseanetIconColor;
}

.authentication-user-pres-phraseanet ul li{
    height: 25px;
    line-height: 25px;
}

.authentication-user-pres-phraseanet ul li  i {
    padding: 5px;
}

.switch {
    background: none;
}

#headerDetail {
    height: auto;
    margin: 15px 0;
}

.icon {
    background-color: $black;
}

.app-name {
    color: $colorSuccess;
    font-weight: bold;
    font-size: 22px;
}

.authorize-panel {
    margin-top: 30px;
}

.authorize-panel a:not(.btn) {
    text-decoration: underline;
}

form[name=desktop_code] {
    margin-top:30px;
}

form[name=registerForm] .btn-group {
    width: 100%;
}

form[name=registerForm] .multiselect {
    text-align: left;
}

form[name=registerForm] .multiselect-container {
    width: 100%;
    z-index: 1020;
}

form[name=registerForm] .multiselect-container input[type=checkbox] {
    float: left;
    margin-left: -20px;
}

form[name=registerForm] .multiselect-container li label {
    margin: 0;
    min-height: 20px;
    padding-left: 20px;
}

form[name=registerForm] .multiselect-container li.active label {
    margin: 0;
}

form[name=registerForm] .multiselect b.caret {
    float: right;

}

form[name=registerForm] .multiselect-group {
    font-weight: bold;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    font-size: $fontSizeLarge;
}

.password_strength_widget,  .password_strength_widget tr, .password_strength_widget td {
    border: none !important;
}

.password_strength_label, .password_strength_desc {
    font-size: $fontSizeMini;
    color: lighten($backgroundSideBar, 5%) ;
}

.password_strength_desc {
    text-align: right;
}

.password_strength_container {
    position: relative;
    width: 100%;
    margin: 5px auto 0 auto;
    height: 10px;
}

.password_strength_bg {
    height: 4px;
    background-color: lighten($backgroundSideBar, 5%);
    width: 100%;
    position: absolute;
    left: 0;
}

.password_strength {
    height: 4px;
    background-color: #c81818;
    width: 0%;
    position: absolute;
    left: 0;
}

.password_strength_separator {
    height: 4px;
    width: 2px;
    background-color: $backgroundSideBar;
    position: absolute;
    left: 0;
}

.geocompleter-menu {
    background: $backgroundSideBar;
    @include glow($sideBarGlow);
}

.geocompleter-menu .ui-menu-item a.ui-state-focus,
.geocompleter-menu .ui-menu-item a.ui-state-hover,
.geocompleter-menu .ui-menu-item a.ui-state-active {
    text-decoration: none;
}

.geocompleter-menu .ui-menu-item {
     padding: 5px 10px;
}

.geocompleter-menu .ui-menu-item:nth-child(odd) {
     background: lighten($backgroundSideBar, 25%);
     border: 1px solid lighten($backgroundSideBar, 25%);
}

.geocompleter-menu .ui-menu-item:nth-child(even) {
     border: 1px solid $backgroundSideBar;
}

.geocompleter-menu .ui-menu-item.selected {
        border: 1px solid $green;
}

.geocompleter-menu .region {
    font-size:  $fontSizeMini;
}

.geocompleter-menu .ui-state-highlight {
    background: $green;
}

.geocompleter-input.input-loading {
    background: url('/assets/common/images/icons/loader-black.gif') $black center right no-repeat;
}

/** IE Fixes */

.lt-ie8 #authentication-sidebar-language .caret {
   margin:0;
}

.lt-ie8 .inline li {
    display: inline;
    zoom: 1;
}

.lt-ie9 .input-table {
    border: 1px solid $inputOutsideBorder;
}

.lt-ie9 .input-table input,
.lt-ie9 .input-table .input {
   background-color: $inputIEBackground !important;
   color: contrast($inputIEBackground) !important;
  /** If font family is issued front google fonts hidden dot characters will always be white */
   font-family: Arial !important;
}


/* Portrait tablet to landscape and desktop */
@media (max-width: 979px) {
    .authentication-sidebar-title {
        font-size: $fontSizeLarge;
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    #recaptcha_widget .btn {
        min-width:33%;
    }

    #authentication-sidebar-language {
        position: absolute;
        top: 0;
        left: 20px;
        right: 20px;
    }

    .left-content .text-title,
    .right-content .text-title {
        font-size :26px;
    }

    #headerDetail {
        height: 0;
    }

    .footer-block {
        text-align: center;
    }

    .header,
    .logo,
    .footer {
        background-color: $backgroundSideBar;
        @include border-radius(0px);
        padding: 20px;
    }

    .logo {
        padding-top: 40px;
    }

    .authentication-sidebar {
         border-top: 1px solid $sideBarBlockBorderColorTop;
         @include glow(none);
    }

    .header {
        border-bottom: 1px solid $black;
    }

    .container {
        @include glow($sideBarGlow);
    }

    .footer .footer-block {
        padding: 15px 0;
    }
}



h1, h2, h3, h4 {
    font-weight: 100;
}

.content{
    min-height: 500px;
}

.url_callback_input input {
    margin: 0;
}

.modal {
    color: $black;
}

.app-list {
    border: 1px solid $grayDark;
    background: lighten($background, 2%);
    @include border-radius($baseBorderRadius);
}

.app-list li {
    padding: 10px;
    border-top: 1px solid $grayDark;
}

.app-list li:first-child {
    border-top:none;
}

.app-list li .app-row {
    line-height: $fontSizeLarge * 1.25;
    padding-bottm: 5px;
}

.app-list li .app-row a {
    font-size: $fontSizeLarge * 1.25;
}

.text-success {
    color: $green;
}

.text-error {
    color: $red;
}

.control-span {
    padding-top: 5px;
    line-height: 20px;
}

#updatingDemand .icon-box {
    display: inline-block;
    width:2%;
    height: 29px;
}

#updatingDemand .icon-box input {
    position: relative;
    bottom: 0.4rem;
}

#updatingDemand .coll-name {
    width:48%;
    padding-left:2%;
    display: inline-block;
    line-height: 1.8rem;
    height: 100%;
}

#updatingDemand h3 {
    border: 1px solid whitesmoke;
    margin: 2rem 0;
    text-align: center;
}

#updatingDemand .coll-name span{
    font-size:initial;
}

#updatingDemand .cgu-block {
    margin:1.6rem auto;
}

#updatingDemand .base-block {
    font-size: 0;
}

#updatingDemand .status {
    font-size:initial;
    padding-left: 0.6rem;
}

#updatingDemand .status-box {
    display: inline-block;
    width:48%;
    line-height: 1.2rem;
}

#updatingDemand .registration {
    width:100%;
    display: inline-block;
    position:relative;
    line-height: 0.8rem;
    border: 1px solid #333333;
    height: 30px;
}

#updatingDemand h3:after {
    content: "";
    font-family: FontAwesome;
    font-weight: 400;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    display: inline;
    width: auto;
    height: auto;
    line-height: normal;
    vertical-align: baseline;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    margin-top: 0;
    font-size:2.3rem;
    color:#a1a1a1;
    float: right;
    position: relative;
    right: 10px;
    -webkit-transition:-webkit-transform .5s;
    -moz-transition:-moz-transform .5s;
    -o-transition:-o-transform .5s;
    -ms-transition:-ms-transform .5s;
    transition:transform .5s;
    -ms-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    top: 2px;
}

#updatingDemand h3.toggled:after {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

#updatingDemand .icon {
    width: 20px;
    height:20px;
    border-radius:10px;
    display:inline-block;
    position: relative;
    top: 0.35rem;
}

#updatingDemand .icon.active {
    background-color:#61BD4F;
}

#updatingDemand .status.active {
    color: #61BD4F;
}

#updatingDemand .icon.registrable {
    background-color:#F2D600;
}

#updatingDemand .status.registrable {
    color: #F2D600;
}

#updatingDemand .icon.in-time {
    background-color:#0079BF;
}

#updatingDemand .status.in-time {
    color: #0079BF;
}

#updatingDemand .icon.out-dated {
    background-color:#EB5A46;
}

#updatingDemand .status.out-dated {
    color: #EB5A46;
}

#updatingDemand .icon.pending {
    background-color:#FFAB4A;
}

#updatingDemand .status.pending {
    color: #FFAB4A;
}

#updatingDemand .icon.rejected {
    background-color:red;
}

#updatingDemand .status.rejected {
    color: red;
}

#updatingDemand .icon.accepted {
    background-color:#61BD4F;
}

#updatingDemand .status.accepted {
    color: #61BD4F;
}

#updatingDemand .registration:nth-of-type(even) {
    background: #333;
}

form[name="changeEmail"] .control-label {
    width: 200px;
}

form[name="changeEmail"] .controls {
    margin-left: 220px;
}

/* Landscape phones and down */
@media (max-width: 480px) {

}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}