body {
    background-color: #f1f1f1;
    color: #454545;
    font: 1em arial;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

#main_wrap {
    width: 100%;
    min-height: 100lvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

#site_content {
    margin-top: 100px;
    flex-grow: 1;
}


#estimated_price {
    padding: 8px;
    display: flex;
    align-items: center;
    font-weight: bold;
}


#login_menu {
    position: absolute;
    right: 10%;
    top: 20px;
}

#login_link a {
    color: #03496b;
    font-size: 12px;
}

.icon_mini {
    margin-right: 5px;
    vertical-align: middle;
}

.member_menu {
    float: right;
    margin-right: 15%;
    margin-top: 14px;
}

.member_menu a {
    color: #03496b;
}


#console_btn {
    background-color: #f7eedc;
    border: 1px solid #acacac;
    color: #c49b44;
    cursor: pointer;
    font-weight: bold;
    height: 18px;
    left: 82%;
    padding: 4px;
    position: relative;
    text-align: center;
    top: -73px;
    width: 4%;
}


#console {
    background-color: #effcfb;
    border: 1px solid #cecece;
    font-family: -moz-fixed;
    font-size: 12px;
    height: 120px;
    margin-bottom: 63px;
    overflow-y: scroll;
    padding: 4px;
    width: 62%;
}

.right {
    float: right;
}


.tag_cloud {
    color: black;
    font-family: monospace;
    line-height: 33px;
    margin-left: -18px;
    padding: 34px;
    text-align: justify;
}

.phrase_grid {
    background-color: #fdfdfd;
    border: 1px solid #cecece;
    display: inline-block;
    margin-bottom: 2%;
    margin-left: 2%;
    padding: 4%;
    width: 48%;
}

.phrase_list_grid {
    border: 1px solid #e1e1e1;
    min-height: 460px;
    padding: 0;
}

.phrase_grid_item {
    border: 1px solid #e1e1e1;
    margin: 2px;
    padding: 2px;
}

.topline {
    background-color: #fdfdfd;
}

.table_container {
    display: flex;
    flex-direction: row;
    width: 100%;
}

#top_tab {
    /* float: left; */
    height: 461px;
    margin-left: 0;
    margin-right: 1%;
    overflow-y: scroll;
    width: 49%;
}

#medium_tab {
    /* float: left; */
    height: 461px;
    margin-bottom: 31px;
    margin-left: 1%;
    margin-right: 1%;
    overflow-y: scroll;
    width: 48%;
}

.plg {
    background-color: #f9f9f9;
    border-bottom: 1px solid #ececec;
    border-left: 1px solid #e4e4e4;
    display: inline-block;
    font-size: 12px;
    padding-bottom: 3px;
    padding-left: 0.4%;
    padding-top: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phrase {
    border-right: 1px solid #cecece;
    width: 40%;
}

.freq {
    width: 12%;
}

.occ_doc {
    width: 16%;
}

.doc_words_avg {
    width: 16%;
}

.rank_doc {
    width: 12%;
}

hr.space {
    background-color: white !important;
    border: medium none;
    color: white !important;
    float: left;
    height: 14px;
}


/* Ajoutez ceci à votre fichier CSS */
@keyframes dots {
    0% {
        content: "";
    }

    33% {
        content: ".";
    }

    66% {
        content: "..";
    }

    100% {
        content: "...";
    }
}

.dots::after {
    content: "";
    animation: dots 1s steps(3, end) infinite;
}





.blue {
    background-color: #e5f3ff;
    border: 1px solid #8abdea;
}

.orange {
    background-color: #f4df97;
    border: 1px solid #ddae11;
}

.green {
    background-color: #dbfcbf;
    border: 1px solid #68aa31;
}

.red {
    background-color: #ffe5e0;
    border: 1px solid #c6634f;
}

.sem_tab {
    width: 504px;
}

@media only screen and (min-width: 0px) and (max-width: 360px) {
    .phrase_list_grid {
        border: 1px solid #e1e1e1;
        min-height: 1200px;
        padding: 0.5%;
    }

    #top_tab {
        height: 600px;
        margin: 1% 0.5%;
        overflow-y: scroll;
        width: 96%;
    }

    #medium_tab {
        height: 600px;
        margin: 1% 0.5%;
        overflow-y: scroll;
        width: 96%;
    }

    .plg {
        background-color: #f9f9f9;
        border-bottom: 1px solid #ececec;
        border-left: 1px solid #e4e4e4;
        display: inline-block;
        font-size: 0.7em;
        padding-bottom: 1%;
        padding-left: 0.4%;
        padding-top: 1%;
        width: 20.6%;
    }

    .phrase {
        border-right: 1px solid #cecece;
        width: 40%;
    }

    .freq {
        width: 13%;
    }

    .occ_doc {
        width: 13%;
    }

    .doc_words_avg {
        width: 13%;
    }

    .rank_doc {
        width: 13%;
    }
}

@media only screen and (min-width: 361px) and (max-width: 767px) {
    .phrase_list_grid {
        border: 1px solid #e1e1e1;
        min-height: 1200px;
        padding: 0.5%;
    }

    #top_tab {
        height: 600px;
        margin: 1% 0.5%;
        overflow-y: scroll;
        width: 96%;
    }

    #medium_tab {
        height: 600px;
        margin: 1% 0.5%;
        overflow-y: scroll;
        width: 96%;
    }

    .plg {
        background-color: #f9f9f9;
        border-bottom: 1px solid #ececec;
        border-left: 1px solid #e4e4e4;
        display: inline-block;
        font-size: 0.8em;
        padding-bottom: 1%;
        padding-left: 0.4%;
        padding-top: 1%;
        width: 20.6%;
    }

    .phrase {
        border-right: 1px solid #cecece;
        width: 40%;
    }

    .freq {
        width: 13%;
    }

    .occ_doc {
        width: 13%;
    }

    .doc_words_avg {
        width: 13%;
    }

    .rank_doc {
        width: 13%;
    }
}

#footer {
    background-color: rgb(69, 69, 69);
    margin-left: auto;
    margin-right: auto;
    padding: 25px;
    text-align: center;
    width: 100%;
}

#footer a {
    color: rgb(255, 255, 255);
    font-size: 12px;
    padding: 25px;
}

.int_case {
    border-right: 1px solid #cecece;
    display: inline-block;
    width: 41px;
}

.project_row .stats_sim_avg {
    background-color: #e8f7b9;
    border-right: 1px solid #cecece;
    color: #91a358;
    float: left;
    font-weight: bold;
    height: 14px;
    padding: 3px;
    width: 39px;
}

.div_box {
    background-color: #fafafa;
    border: 1px solid #cecece;
    border-radius: 8px;
    padding: 1px 20px 20px;
}

.project_row .stats_good_sim_avg {
    background-color: #d7f4b5;
    border-right: 1px solid #cecece;
    color: #74b728;
    float: left;
    font-weight: bold;
    height: 14px;
    padding: 3px;
    width: 39px;
}

.project_row .stats_bad_sim_avg {
    background-color: #f4e9b5;
    border-right: 1px solid #cecece;
    color: #c99534;
    float: left;
    font-weight: bold;
    height: 14px;
    padding: 3px;
    width: 39px;
}

.project_row .stats_null_sim_avg {
    background-color: #f9cbca;
    border-right: 1px solid #cecece;
    color: #a82f2d;
    float: left;
    font-weight: bold;
    height: 14px;
    padding: 3px;
    width: 39px;
}

.project_row .stats_potens {
    background-color: #d8edcb;
    border-right: 1px solid #cecece;
    color: #5c9639;
    float: left;
    font-weight: bold;
    height: 14px;
    padding: 3px;
    width: 39px;
}

#project_tab {
    background-color: #fefefe;
    border: 1px solid #e6e6e6;
    margin-left: 15px;
    width: 96%;
}

.poly_btn {
    background-color: #f9f7e3;
    border-right: 2px solid #cecece;
    float: left;
    height: 20px;
    margin-right: 8px;
    padding-left: 0;
    padding-right: 10px;
    width: 44px;
}

.mfa_btn {
    background-color: #ecf7e6;
    border-right: 2px solid #cecece;
    float: left;
    height: 20px;
    margin-left: 0;
    padding-left: 0;
    padding-right: 10px;
    width: 40px;
}

.poly_submit_btn {
    background-color: #f9f6e8;
    border: medium none;
    color: #91773e;
    cursor: pointer;
    font-weight: normal;
}

.mfa_submit_btn {
    background-color: #ecf7e6;
    border: medium none;
    color: #75a857;
    cursor: pointer;
    font-weight: normal;
}

.project_row.strong {
    background-color: #e6e6e6;
    border: 1px solid #d3d3d3;
    box-shadow: 1px 1px 2px #cecece;
}

.project_row {
    background-color: #f5f5f5;
    border: 1px solid #dfdfdf;
    box-shadow: 0 0 3px #d6d6d6;
    height: 20px;
    margin: 4px;
    padding: 3px;
    text-align: center;
    width: 98%;
}

.project_new {
    background-color: #e6e6e6;
    border: 1px solid #d3d3d3;
    box-shadow: 1px 1px 2px #cecece;
    height: 30px;
    margin: 6px;
    padding: 0;
    text-align: center;
    width: 98%;
}

.project_new input {
    border: 1px solid #cecece;
    margin-top: 3px;
    padding: 2px;
}

.project_row .title {
    border-right: 1px solid #cecece;
    color: #383838;
    float: left;
    margin-left: 5px;
    margin-top: 1px;
    padding-right: 10px;
    text-align: left;
    width: 23%;
}

.project_row .date {
    border-right: 1px solid #cecece;
    color: #383838;
    float: left;
    font-size: 9px;
    margin-left: 8px;
    margin-top: 3px;
    padding-right: 10px;
    text-align: left;
    width: 88px;
}

.project_row .delete {
    color: #383838;
    cursor: pointer;
    float: right;
    margin-left: -1px;
    margin-top: -2px;
    padding-right: 10px;
    text-align: left;
    width: 15px;
}

.project_row .stats_light {
    background-color: #ffffff;
    border-right: 1px solid #cecece;
    float: left;
    height: 14px;
    padding: 3px;
    width: 36px;
}

.project_row .stats_mots {
    background-color: #efefef;
    border-right: 1px solid #cecece;
    float: left;
    height: 14px;
    padding: 3px;
    width: 28px;
}

.project_row .stats_poly {
    background-color: #fcf0bf;
    border-right: 1px solid #bebebe;
    color: #c49852;
    float: left;
    font-weight: bold;
    height: 14px;
    padding: 3px 3px 3px 4px;
    width: 24px;
}

.project_row .stats_good_poly {
    background-color: #fce68f;
    border-right: 1px solid #cecece;
    color: #af792d;
    float: left;
    font-weight: bold;
    height: 14px;
    padding: 3px;
    width: 25px;
}

.project_row .stats_bad_poly {
    background-color: #fcf6e0;
    border-right: 1px solid #cecece;
    color: #c6a16d;
    float: left;
    font-weight: bold;
    height: 14px;
    padding: 3px;
    width: 25px;
}

.project_row .stats_null_poly {
    background-color: #fcf8ed;
    border-right: 1px solid #cecece;
    color: #afab9e;
    float: left;
    font-weight: bold;
    height: 14px;
    padding: 3px;
    width: 25px;
}

.project_row .stats_low {
    background-color: #efefef;
    border-right: 1px solid #cecece;
    color: #898989;
    float: left;
    height: 14px;
    padding: 3px;
    width: 22px;
}

#spinning_zone {
    background-color: #ffffff;
    border: 1px solid #cecece;
    font-family: monospace;
    font-size: 14px;
    line-height: 23px;
    padding: 20px;
}

.pack_container {
    border: 1px dotted #898989;
    height: 324px;
    padding: 20px;
    min-height: 800px;
}

.pack_item {
    background-color: #f7f5ef;
    border: 1px solid #ccdeac;
    float: left;
    height: 300px;
    margin-left: 10px;
    padding: 10px;
    width: 20%;
}

.pack_container_abo {
    background-color: #fcfcfc;
    border: 1px dotted #898989;
    height: 471px;
    padding: 20px;
}

.pack_item_abo {
    background-color: white;
    border: 1px solid #69b758;
    box-shadow: 1px -1px 3px #cecece;
    float: left;
    height: 450px;
    margin-left: 10px;
    padding: 10px;
    width: 20%;
}

.edit_article {
    float: right;
}

.article_photo {
    margin-bottom: 3%;
    margin-left: 5%;
    margin-top: 3%;
    max-height: 55%;
    max-width: 55%;
}

.article_content {
    margin-left: 8%;
    max-width: 55%;
}

.article_item {
    background-color: #ffffff;
    border: 1px dotted #676767;
    border-radius: 11px;
    float: left;
    height: 126px;
    margin: 7px;
    min-width: 324px;
    padding: 7px;
    width: 46%;
}

.article_container {
    background-color: #f3f3f3;
    border: 1px solid #cecece;
    border-radius: 8px;
    min-height: 501px;
    width: 78%;
}

.social_bar {
    background-color: #ffffff;
    border-radius: 10px;
    height: 127px;
    margin-left: -143px;
    padding: 0 10px 10px;
    position: fixed;
    top: 235px;
    width: 93px;
}

.blog_side_bar {
    background-color: #f3f3f3;
    border: 1px solid #bebebe;
    border-radius: 10px;
    float: right;
    margin-top: 82px;
    min-height: 440px;
    min-width: 14em;
    padding: 0 10px 10px;
    top: 235px;
    width: 18%;
}

.nyroModalCont {
    min-height: 500px !important;
    min-width: 400px !important;
}

.tuto_photo {
    background-color: #ffffff;
    border: 1px solid #cecece;
    float: left;
    margin: 10px;
    padding: 10px;
    vertical-align: top;
}

blockquote {
    background-color: #fafafa;
    border: 1px dotted #acacac;
    border-radius: 8px;
    margin: 15px 0;
    padding: 17px;
}

#mother_contener {}

.form_gdp {
    margin-left: 30px;
    margin-right: 7px;
}

.new_project_textarea {
    margin: 20px;
    max-width: 95%;
    width: 95%;
}

.cs_paragraphe {
    background-color: #f4f9fc;
    border: 1px solid #a1adce;
    border-radius: 5px;
    box-shadow: 1px 0 5px #bfbfbf;
    margin-bottom: 45px;
    padding: 4px;
}

.cs_variation {
    background-color: #f3f7ea;
    border: 1px solid #bcc99f;
    border-radius: 3px;
    box-shadow: 0 1px 4px #dedede;
    margin-bottom: 14px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 8px;
}

.cs_p_text {
    border: 0 solid #565656;
}

.cs_p_form {
    float: right;
    margin-right: 27px;
    margin-top: -21px;
    padding: 0;
    width: 69%;
}

.minibox a {}

.minibox form {
    margin-bottom: 0;
}

.minibox {
    display: inline-block;
    float: left;
    margin-right: 45px;
    text-align: left;
}

.bg_header {
    margin-left: auto;
    margin-right: auto;
    margin-top: -10px;
    width: 1000px;
}

a,
a:link,
a:visited,
a:hover {
    color: #2698d2;
    cursor: pointer;
    text-decoration: none;
}



.form_span {
    color: #565656;
    display: inline-block;
    font-family: arial;
    width: 221px;
}

form textarea {
    background-color: #fefefe;
    border: 1px dotted #989898;
    border-radius: 10px;
    color: #583787;
    font-family: arial;
    font-size: 13px;
    height: 167px;
    padding-left: 10px;
    padding-top: 5px;
    vertical-align: middle;
}

#login_space {
    float: right;
    margin-right: 14%;
    margin-top: 15px;
}

.input_form {
    background-color: #fafafa;
    border: 1px solid #cfcfcf;
    border-radius: 7px;
    box-shadow: 1px 1px 4px #d9d9d9;
    color: #704484;
    cursor: pointer;
    font-family: arial;
    font-size: 15px;
    height: 32px;
    margin-bottom: 7px;
    padding-left: 15px;
    padding-right: 3px;
}

h1 {
    font-size: 24px;
    margin-top: -4px;
}

h2 {
    /* padding-left: 10px; */
    /* text-transform: uppercase; */
}

h3 {
    color: #516a99;
    font-family: arial;
    font-size: 20px;
    font-weight: normal;
    margin-bottom: 5px;
    margin-top: 0;
    text-align: left;
}

h4 {
    color: #879b58;
    font-family: arial;
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 5px;
    margin-top: -5px;
    text-align: left;
}

p {
    padding-left: 0;
}

.green_span {
    background-color: #e6fcd6;
    border: 1px solid #6ca317;
    text-align: right;
}

#main_header {
    border-bottom: 1px solid #d3d3d3;
    border-top: 6px solid #c70700;
    height: 125px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -9px;
    padding: 10px;
    width: 940px;
}

#banner {
    margin-left: 7%;
    margin-right: 7%;
    margin-top: -5px;
}

#main_menu {
    background-image: linear-gradient(#73c7eb, #1d5894);
    border: 1px solid #d3d3d3;
    height: 30px;
    margin-left: 7%;
    margin-right: 7%;
}

#main_menu a {
    border-right: 1px solid #b2e5ff;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    padding: 6px;
    text-decoration: none;
    text-transform: uppercase;
}

.item_menu {
    border-right: 1px solid #d3d3d3;
    display: inline-block;
    padding: 15px;
}

.item_menu a,
a:visited {
    font-family: arial;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
}

#error_zone {
    background-color: #fce0d4;
    border: 1px solid #ff0000;
    border-radius: 6px;
    display: none;
    margin-bottom: -6px;
    padding: 10px;
    width: 621px;
}

#main_title {
    background-image: url("http://www.plateforme-redacteur.fr/wp-content/themes/swagger/assets/images/colors/light/featured-bg.png");
    border-bottom: 1px solid #d3d3d3;
    border-top: 1px solid #d3d3d3;
    color: #565656;
    font-family: arial;
    font-size: 25px;
    font-weight: bold;
    height: 30px;
    margin-top: -1px;
    padding: 23px 23px 23px 200px;
}

#main_container {
    border: 1px solid #d3d3d3;
    font-size: 13px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    min-height: 1571px;
    width: 960px;
}

#pack_explain {
    background-color: #fcf8d4;
    border: 1px solid #d3d3d3;
    color: #676767;
    font-family: arial;
    margin: 10px;
    padding: 15px;
}

#pack_detail {
    background-color: #e6fcd6;
    border: 1px solid #6ca317;
    border-radius: 6px;
    color: #343434;
    float: right;
    height: 500px;
    margin-right: 12px;
    margin-top: 60px;
    padding: 10px;
    width: 258px;
}

#pack_form {
    float: left;
    height: 1326px;
    margin-left: 10px;
    padding: 3px;
    width: 642px;
}

#societe_detail {
    display: none;
}

.page_content {}

.left_img {
    float: left;
}

.page_p_basic {
    background-color: #fcf6d1;
    border: 1px solid #c6bc71;
    margin-left: 113px;
}

.form_input {
    background-color: #e5f7ff;
    border: 1px solid #5b9ebd;
    color: #054563;
    height: 17px;
    margin: 5px;
    padding: 8px;
    width: 250px;
}

.info_span {
    background-color: #d8ecff;
    border: 1px solid #5e9edb;
    border-radius: 0 10px 10px 0;
    display: none;
    margin-left: -11px;
    padding: 14px;
    position: absolute;
    top: 504px;
    width: 517px;
}

.green_h {
    color: #008000;
}

.green_p {
    background-color: #d4f9b1;
    border: 1px solid #008000;
    color: #008000;
    margin-bottom: 15px;
    padding: 10px;
}

.command_container {
    border: 1px solid #d3d3d3;
    border-radius: 10px;
    font-size: 12px;
    padding: 20px;
}

.item_commande {
    background-color: #fbfcdb;
    border: 1px dotted #d3d3d3;
    margin-bottom: 10px;
    padding: 12px;
}

.id_command {
    border-right: 1px solid #808080;
    display: inline-block;
    padding-left: 10px;
    padding-right: 7px;
    width: 32px;
}

.ndd_command {
    border-right: 1px solid #808080;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    padding-left: 11px;
    padding-right: 10px;
    width: 213px;
}

.pack_command {
    border-right: 1px solid #808080;
    display: inline-block;
    font-weight: bold;
    padding-left: 21px;
    width: 170px;
}

.date_command {
    border-right: 1px solid #808080;
    display: inline-block;
    height: 13px;
    padding-left: 10px;
    padding-right: 10px;
    width: 188px;
}

.title_commande {
    background-color: #e2e095;
    border: 1px solid #808080;
    margin-bottom: 13px;
    padding: 5px 5px 5px 11px;
}

#content {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    padding: 14px;
}

#content .center {
    margin: 0;
    padding: 0;
    width: auto;
}

.boxinbox {
    background-color: #fefefe;
    border: 1px solid #f2f2f2;
    border-radius: 3px;
    margin-bottom: 20px;
    padding: 14px 5px 5px;
}

#content img.right,
#content img.left {
    border: 2px solid #e2e2e2;
    margin: 0 0 10px 15px;
    padding: 2px;
}

#content img.left {
    margin: 3px 15px 15px 0;
}

p.attribution {
    color: #aaaaaa;
    font-size: 12px;
    font-style: italic;
    margin-top: 20px;
    text-align: center;
}

p.attribution span {
    padding-right: 15px;
}

button.nice {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #bfe3f4;
    border-color: #67aac9;
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 2px;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.15);
    color: #3b7496;
    cursor: pointer;
    font-weight: bold;
    line-height: 32px;
    margin: 10px;
    outline: medium none;
    padding: 9px 15px;
    text-decoration: none;
    text-shadow: 0 1px 0 #eeeeee;
}

#demo-thumbnails {
    background-color: #ffffff;
    border: 2px solid #dddddd;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.15);
    margin: 60px auto 0;
    padding: 0;
    width: 800px;
}

#demo-thumbnails h2 {
    background-color: #eeeeee;
    margin: 0;
    padding: 20px;
    text-align: center;
}

#demo-thumbnails .cloud {
    line-height: 50px;
    margin: 0;
    padding: 20px;
    text-align: center;
    vertical-align: middle;
}

#demo-thumbnails .cloud a {
    padding: 0 4px;
}

#demo-thumbnails .cloud1 {
    font-size: 14px;
}

#demo-thumbnails .cloud2 {
    font-size: 17px;
}

#demo-thumbnails .cloud3 {
    font-size: 21px;
}

#demo-thumbnails .cloud4 {
    font-size: 26px;
}

#demo-thumbnails .cloud5 {
    font-size: 32px;
}

#demo-thumbnails .cloud6 {
    font-size: 40px;
}

#demo-thumbnails .cloud7 {
    font-size: 45px;
}

#demo-thumbnails .cloud8 {
    font-size: 51px;
}

#demo-googlemap h2 {
    margin: 0 0 20px;
    padding: 0;
    text-align: center;
}

#demo-googlemap .first {
    margin-left: 130px;
}

#demo-googlemap .left {
    margin-right: 30px;
    text-align: center;
}

#demo-googlemap img.thumb {
    cursor: pointer;
    display: block;
}



#demo-googlemap div.credit {
    font-size: 12px;
    font-style: italic;
}

#demo-forum {
    background-color: #edf1f5;
    border: 2px solid #dddddd;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    margin: 40px auto;
    width: 900px;
}

#demo-forum .side {
    background-color: #edf1f5;
    border-right: 1px solid #dde4eb;
    margin-right: -1px;
    padding: 5px 30px;
}

#demo-forum .side li {
    margin-top: 5px;
}

#demo-forum .side .status {
    color: #a2d959;
    font-weight: bold;
    list-style-position: inside;
    list-style-type: disc;
    margin-left: -5px;
}

#demo-forum .side .status span {
    color: #333333;
}

#demo-forum .main {
    background-color: #f9f9f9;
    border-left: 1px solid #dde4eb;
    overflow: hidden;
}

#demo-forum .main p {
    padding: 5px 10px;
}

#demo-forum .main h4 {
    background-color: #f1f1f1;
    font-size: 16px;
    line-height: 16px;
    margin: 0 0 10px;
    padding: 10px;
}

#demo-forum .main h4.right {
    color: #a2d959;
}

.demo-flot h2 {
    text-align: center;
}

#flot {
    margin: 0 auto;
}

.demo-tablesorter .tablesorter {
    margin: 0 auto;
    width: 700px;
}

.demo-tablesorter .tablesorter .pager {
    position: static !important;
    text-align: center;
}

.demo-tablesorter .tablesorter .pager span {
    cursor: pointer;
}

#demo-translate {
    margin-top: 30px;
}

.demo-translate span {
    color: #353535;
    cursor: help;
    font-weight: normal;
}

.demo-translate h3 {
    margin: 0 0 12px;
}

#demo-imdb {
    padding: 20px;
    width: 500px;
}

#demo-imdb h2 {
    margin: 0 0 10px;
}

#demo-imdb ul {
    color: #555555;
    list-style: inside none decimal;
    margin-left: 15px;
}

#demo-imdb p {
    margin: 15px 0 0;
}

.demo-modal button {
    height: 40px;
    left: 50%;
    margin: -20px 0 0 -160px;
    padding: 5px 0;
    position: absolute;
    top: 50%;
    width: 320px;
}

#demo-imagemap,
#demo-imagemap h3 {
    text-align: center;
}

#demo-imagemap img {
    border: 2px solid #dddddd;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    margin: 10px 0 0;
    padding: 10px 25px;
}

#demo-tips {
    margin-top: 150px;
}

#demo-tips .structure {
    background-color: #fafafa;
    border: 1px solid #cccccc;
    display: block;
    line-height: 220px;
    margin: 0 auto;
    padding: 7px;
    width: 575px;
}

.ui-tooltip-tipsdemo .ui-tooltip-titlebar,
.ui-tooltip-tipsdemo .ui-tooltip-content {
    text-align: center;
}

#demo-flickr {
    margin-top: 30px;
}

#demo-flickr h2 {
    margin: 10px 0 15px;
    text-align: center;
}

#demo-flickr table {
    margin: 0 auto;
}

#demo-flickr td {
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}

#demo-steps .target {
    background-color: #f1f1f1;
    border: 2px solid #cccccc;
    float: left;
    height: 70px;
    margin: 20px 60px 20px 20px;
    padding: 10px;
    text-align: center;
    width: 70px;
}

#demo-steps #target1 {
    margin-left: 230px;
}

#demo-steps #next {
    float: right;
}

#demo-steps #prev {
    float: left;
}

#demo-growl {
    margin-top: 120px;
    padding: 5px;
    width: 525px;
}

#demo-growl button {
    float: left;
}

.demo-mouse {
    overflow: hidden;
}

#save_button {
    background-image: url("/render/img/save_icon.png");
    background-position: 3px center;
    background-repeat: no-repeat;
    padding-left: 23px;
}

#regist_button {
    background-image: url("/render/img/go_icon.png");
    background-position: 141px center;
    background-repeat: no-repeat;
    padding-right: 33px;
}

#demo-mouse {
    bottom: 10px;
    height: 95%;
    left: 10px;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 97%;
}

#demo-mouse h3 {
    left: 50%;
    margin-left: -260px;
    margin-top: -12px;
    position: absolute;
    top: 50%;
}

#demo-simple {
    margin-top: 45px;
}

#demo-dialogues button {
    height: 40px;
    left: 50%;
    margin: -100px 0 0 -160px;
    padding: 5px 0;
    position: absolute;
    top: 50%;
    width: 320px;
}

button#prompt {
    margin-top: -50px;
}

button#confirm {
    margin-top: 0;
}

body.demo-youtube .box,
body.demo-vimeo .box {
    margin-top: 50px;
}

.div_box_blocks {
    background-color: #f5fcea;
    border: 1px solid #b6c1a6;
    border-radius: 5px;
    margin-bottom: 20px;
    padding: 10px;
    width: 427px;
}

#tool_box {
    background-color: #f7f7f7;
    display: block;
    height: 25px;
    margin-bottom: 10px;
    margin-top: 0;
    padding: 5px;
    position: relative;
}

.pack_item {
    background-color: #fff;
    border: 1px solid #ccdeac;
    box-shadow: 2px 2px 4px #d3d3d3;
    float: left;
    font-size: 12px;
    height: 295px;
    margin-left: -1px;
    margin-top: 8px;
    padding: 5px;
    width: 250px;
}

.pack_container_abo {
    background-color: #f3f3f9;
    border: 1px solid #cecece;
    height: 390px;
    padding: 20px;
}

.pack_item_abo {
    background-color: #f7f5ef;
    border: 1px solid #ccdeac;
    float: left;
    height: 450px;
    margin-left: 10px;
    padding: 10px;
    width: 20%;
}


.box_price {
    margin: 30px auto;
    width: 90%;
    padding: 20px;
}

.plan_title {
    color: #454545;
    text-align: center;
}

.plan_description {
    color: #454545;
    text-align: center;
    margin: 1.5rem 0;
}

.plan_container {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    gap: 1rem;
}



.plan_container .plan_price {
    color: #454545;
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
    margin: 0rem;
}

.plan_item {
    width: 30%;
    background-color: #ecf0f1;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    height: fit-content;
}

/* Pour les tablettes (à partir de 768px) */
@media screen and (min-width: 768px) {
    .plan_container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .plan_item {
        width: calc(50% - 1rem);
        /* 2 colonnes avec un espace entre */
    }
}

/* Pour les grands écrans (à partir de 1024px) */
@media screen and (min-width: 1024px) {
    .plan_container {
        flex-wrap: nowrap;
    }

    .plan_item {
        width: calc(33.33% - 1rem);
        /* 3 colonnes avec un espace entre */
    }
}

/* Cible le deuxième .plan_item dans son conteneur */
.plan_item:nth-child(2) {
    background: linear-gradient(145deg, #64B4DC, #64B4DC);
    box-shadow: 0 12px 8px rgba(0, 0, 0, 0.1);
    padding: 40px;
}

.plan_item:nth-child(2) p {
    color: #fff;
}

.plan_item:nth-child(2) button {
    background-color: rgb(60, 102, 169) !important;
}

.plan_item h2 {
    margin-top: 0;
    padding-left: 0;
}

.plan_item ul {
    list-style: none;
    padding: 1rem;
    background-color: #f5f5f5;
    border-radius: 10px;
}

.plan_item ul li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
}

.plan_item button {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    color: white;
    font-size: 16px;
    margin-top: 10px;
}

.plan_item p {
    font-size: 14px;
    color: #333;
}

.plan_credits {
    font-size: 14px;
    color: #333 !important;
    font-weight: bold;
}
.plan_credits:nth-child(2) {
    color: aqua;
}

/* ... existing CSS ... */











.dashboard-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-header th {
    background-color: #f4f4f4;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.dashboard-header th:first-child {
    border-left: 1px solid #ddd;
}

.dashboard-row td {
    padding: 8px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #ddd;
    text-align: right;
}

.dashboard-row td:first-child {
    border-left: 1px solid #ddd;
    text-align: left;

}

.phrase-cell a {
    color: #0645ad;
    text-decoration: none;
}

.phrase-cell a:hover {
    text-decoration: underline;
}

.delete-btn {
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid #f44336;
    color: #f44336;
    transition: all 0.3s ease;
}

.delete-btn:hover {
    background-color: #f44336;
    color: white;
}

.show-btn {
    padding: 6px 12px;
    background-color: #4CAF50; /* Couleur verte */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.show-btn:hover {
    background-color: #45a049; /* Un vert légèrement plus foncé pour l'effet hover */
}

.pagination {
    margin-top: 20px;
    text-align: center;
}

.pagination a {
    margin: 0 2px;
    color: #0645ad;
    text-decoration: none;
}

.pagination a:hover {
    text-decoration: underline;
}

.pagination {
    margin-top: 20px;
    text-align: center;
}

.page-number {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 2px;
    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
}

.page-number.current-page {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.page-ellipsis {
    display: inline-block;
    padding: 5px;
    margin: 0 2px;
}

.total-count {
    margin: 10px 0;
    font-size: 16px;
    color: #333;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    text-align: center;
}