@import url(//fonts.googleapis.com/css2?family=Poppins:300,400,500,600,700);

body { font-family: 'Poppins', sans-serif; overflow: hidden; }/*overflow-x: hidden;*/
#header-modale .title-white { color: #fff; font-size: 18px; line-height: 54px; font-weight: 600; margin: 0; float:left; max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#header-modale .closeIMG { height: 18px; width: 18px; float: right; margin-top: 18px; position: relative; right: -25px; }
#header-modale, #content-modale { width: calc(100% - 80px); } /* 842 */
#header-modale { height: 54px; background-color: #04359c; padding: 0 40px 0 40px; position: fixed; z-index: 9; }
#content-modale { background-color: #fff; padding: 40px 40px; position: relative; top: 54px; height: calc(100% - 128px); overflow-y: scroll; }/*94 40 40*/
#content-modale.test { height: fit-content; }
#content-modale .mtop0 { margin-top: 0 !important; padding-top: 0 !important; }
#content-modale .mtop10 { margin-top: 10 !important; }
#content-modale .mbot0 { margin-bottom: 0 !important; padding-bottom: 0 !important; }
#content-modale .mtop80 { margin-top: 80px !important; }
#content-modale h2 { font-size: 18px; line-height: 28px; color: #001136; text-align: center; margin: 40px 0 20px; } /*22/32*/
#content-modale h2.top0 { margin-top: 0; }
#content-modale img { padding: 20px 0 0;}
#content-modale a, #content-modale a:hover, #content-modale a:visited, #content-modale a:focus { color: #f60; }
#content-modale img.w100 { width: 100%; height: auto; }
#content-modale img.p0 { padding: 0 }
#content-modale img.pb20 { padding-bottom: 20px; }
#content-modale p.title { font-size: 18px; line-height: 28px; color: #001136; font-weight: bold; margin: 40px 0 20px; } /*22/32*/
#content-modale p.title span.fw400 { font-weight: 400; }
#content-modale p.title.mb10 { margin-bottom: 10px; }
#content-modale p.title.text-center { text-align: center; }
#content-modale p.title.top40 { margin-top: 40px; }
#content-modale p.content-block.mt40 { margin-top: 40px; margin-bottom: 0; text-align: center; }
#content-modale p.content-block.mt30 { margin-top: 30px; margin-bottom: 0; }
#content-modale p.content-block.mt30mb20 { margin-top: 30px; margin-bottom: 20px; }
#content-modale p.content-block.text-center { text-align: center; }
#content-modale p.content-block { font-size: 16px; line-height: 26px; color: #4D5163; } /*18/26*/
#content-modale p.content-block.tiny { font-size: 13px !important; line-height: 20px !important; }
#content-modale p.content-block a.btn-cmde { font-family: 'Poppins', sans-serif; font-size: 20px; line-height: 30px; font-weight: 600; padding: 9px 30px 5px; margin-top: 30px; background: #ff6600; color: white !important; border-bottom: 2px solid #A54200; text-decoration: none!important; display: block; margin: auto; }
#content-modale p.content-block span.list-number { font-size: 18px; line-height: 28px; font-weight: 600; margin-right: 15px; vertical-align: middle; } /*22/32*/
#content-modale p.title-list { font-size: 18px; line-height: 28px; color: #001136; font-weight: bold; margin: 0; padding: 20px 0 20px 27px; } /*22/32*/
#content-modale p.title-list-float { font-size: 18px; line-height: 28px; color: #001136; font-weight: bold; margin: 0; padding: 15px 0 20px 27px; } /*22/32*/
#content-modale ul.list_modale { margin: 0; padding-left: 27px; }
#content-modale ul.list_modale.mt20 { margin-top: 20px; }
#content-modale ul.list_modale li { font-size: 16px; line-height: 24px; color: #4D5163; list-style-type: none; text-indent: -27px; } /*18/26*/
#content-modale ul.list_modale.space15 li { margin-bottom: 15px; }
#content-modale ul.list_modale.space15 li:last-child { margin-bottom: 0; }
#content-modale ul.list_modale li::before { content: "\f10c"; font-family: Flaticon; font-size: 15px; font-style: normal; margin-right: 12px; color: #00A716; }
#content-modale div.cols2float { margin: 40px 0; display: inline-flex; align-items: center; }
#content-modale div.cols2float.valign { align-items: center; }
#content-modale div.cols2float.mb0 { margin-bottom: 0; }
#content-modale div.cols2float div:first-child { float: left; width: 336px; margin: auto; }
#content-modale div.cols2float div:first-child img { width: 336px; height: auto; }
#content-modale div.cols2float div:last-child { float: right; margin-left: 40px; }
#content-modale div.cols2float div:last-child p.title-cols { font-size: 22px; line-height: 32px; color: #001136; font-weight: bold; }
#content-modale div.cols2float ul.list_modale { padding-left: 28px }
#content-modale div.cols2float ul.list_modale.mb20 { margin-bottom: 20px }
#content-modale div.cols2float img { padding: 0; }
#content-modale div.cols2float a.ml33 { margin-left: 0px; }
#content-modale div.cols2-50 div:first-child { display: inline-block; width: calc(50% - 10px); padding-right: 10px; }
#content-modale div.cols2-50 div:first-child p { margin-left: 60px; position: relative; }
#content-modale div.cols2-50 div:first-child p:first-child::before { content: ""; position: absolute; background: url("../images/popup/woocommerce.png") no-repeat; left: -59px; top: -3px; width: 39px; height: 24px; }
#content-modale div.cols2-50 div:last-child p { margin-left: 50px; position: relative; }
#content-modale div.cols2-50 div:last-child p:first-child::before { content: ""; position: absolute; background: url("../images/popup/prestashop.png") no-repeat; left: -50px; top: -7px; width: 30px; height: 30px; }
#content-modale div.cols2-50 div:last-child { display: inline-block; float: right; width: calc(50% - 10px); padding-left: 10px; }
#content-modale div.cols2-50 div p img { margin-right: 20px; padding-top: 0; }
#content-modale p.img-cms img { margin-right: 20px; }
#content-modale p.img-cms img:first-child { position: relative; top: 5px; }
#content-modale p.img-cms img:last-child { margin-left: 40px; position: relative; top: 7px; }
/*#content-modale div.cols2-50 div:first-child p:not(:first-child) { margin-left: 60px; }
#content-modale div.cols2-50 div:last-child p:not(:first-child)  { margin-left: 50px; }*/
#content-modale iframe { display: block; margin: 30px auto 40px; box-shadow: 2px 2px 25px #1E499B40; }
#content-modale div.grid-modale { display: grid; grid-template-columns: repeat(4, 1fr); grid-row-gap: 30px; grid-column-gap: 30px; margin-top: 40px; }
#content-modale div.grid-modale.grid-theme { grid-template-columns: repeat(3, 1fr); grid-row-gap: 20px; grid-column-gap: 20px; margin-top: 30px; }
#content-modale div.grid-modale div.content-grid { width: 100%; margin: auto; }
#content-modale div.grid-modale div.content-grid img { width: 100%; height: auto; padding: 0; }
#content-modale table { margin-top: 40px; width: 100%; border-collapse: collapse; }
#content-modale table tr td { border: 1px solid #1E499B; }
#content-modale table tr:not(:last-child) td { border-bottom: 1px solid rgba(30, 73, 155, 0.3); }
#content-modale table tr:first-child td:first-child { border: none; }
#content-modale table tr td:nth-child(2), #content-modale table tr td:nth-child(3) { border-right: 1px solid #5EAB11; }
#content-modale table.plugins tr td:nth-child(2), #content-modale table.plugins tr td:nth-child(3) { border-right: 1px solid #1E499B; }
#content-modale table.comparatif-boutique tr td:nth-child(2), #content-modale table tr td:nth-child(3) { border-right: 1px solid #1E499B; }
#content-modale table.plugins tr:first-child td img { margin-right: 15px; vertical-align: middle; }
#content-modale table.plugins tr:first-child td:nth-child(2) { border-right: 1px solid #fff; }
#content-modale table.plugins tr:not(:first-child) td { text-align: left; }
#content-modale table tr:first-child td { font-size: 20px; line-height: 26px; color: #fff; text-align: center; vertical-align: middle; height: 90px; }
#content-modale table tr:first-child td:nth-child(3) { background-color: #5EAB11; }
#content-modale table tr:first-child td.no_offer { background-color: #1E499B !important; }
#content-modale table tr:first-child td:nth-child(2), #content-modale table tr:first-child td:nth-child(4) { background-color: #1E499B;  }
#content-modale table tr td:first-child { font-size: 16px; line-height: 20px; color: #233B6C; text-align: left; vertical-align: center; }
#content-modale table tr td:not(:first-child) { text-align: center; vertical-align: middle; }
#content-modale table tr:not(:first-child) td { padding: 15px 20px; }
#content-modale table tr td span[class^="flaticon-"]:before { margin-left: 0; color: #5EAB11; font-size: 16px; }
#content-modale table tr td img { width: 15px; height: 15px; padding: 0; }
#content-modale table tr td p.title-table { font-size: 16px; line-height: 20px; font-weight: 600; color: #4D5163; }
#content-modale table tr td p.content-table { font-size: 15px; line-height: 20px; color: #4D5163; }
#content-modale div.grid-exemple { display: grid; grid-template-columns: repeat(3, 1fr); grid-row-gap: 60px; grid-column-gap: 20px; margin-top: 30px; text-align: center; }
#content-modale div.grid-exemple img { width: auto; height: 169px; max-width: 100%; padding: 0; }
#content-modale div.grid-exemple p.title { margin: 20px 0 0; }
#content-modale div.grid-exemple p.content-block { margin: 10px 0 0; }
#content-modale div.flex-space-between { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 30px 80px; justify-content: center; align-items: center; }

#content-modale div.content_liste { font-size: 16px; line-height: 25px; margin-top: 30px; padding: 30px 40px; box-shadow: 0 0 10px 2px rgb(0 0 0 / 10%); background: #fff; }
#content-modale div.content_liste:first-of-type { margin-top: 0; }
#content-modale div.content_liste div.head { width: 100%; line-height: 16px; height: 28px; }
#content-modale div.content_liste div.head p.title { float: left; font-size: 20px; line-height: 28px; font-weight: 600; color: #001136; margin: auto; max-width: 60%; }
#content-modale div.content_liste div.head p.title span { font-size: 16px; line-height: 28px; font-weight: 400; }
#content-modale div.content_liste div.head p.title img { display: inline-block; position: relative; top: 0px; width: 15px; height: 15px; padding: 0; }
#content-modale div.content_liste div.head p.title > img:last-child { margin-right: 5px; }
#content-modale div.content_liste div.head p.star { float: right; font-weight: 600; position: relative; top: 5px; margin: 0; }
#content-modale div.content_liste div.head p.star img { display: inline-block; position: relative; top: 2px; width: 15px; height: 15px; padding: 0; }
#content-modale div.content_liste div.head p.star > img:first-child { margin-left: 5px; }
#content-modale div.content_liste div.content, #content-modale div.content_liste div.content p { margin-top: 20px; }
#content-modale div.content_liste div.content ul { list-style: none; padding-left: 0px; }
#content-modale div.content_liste div.content ul li { position: relative; padding-left: 27px; }
#content-modale div.content_liste div.content ul li:before { content: ""; position: absolute; width: 15px; height: 10px; left: 0px; top: 10px; background: url(../images/theme2021/svg/check_vert.svg) no-repeat 50% 50% / contain; }

#content-modale table.os_vps { margin-top: 40px; width: 100%; border: none; padding: 20px; }
#content-modale table.os_vps thead tr th { width: 235px; font-size: 20px; line-height: 26px; padding: 20px; color: #fff; }
#content-modale table.os_vps thead tr th:nth-child(2) { background: #0D2A6B; }
#content-modale table.os_vps thead tr th:nth-child(3) { background: #1E499B; border-left: 1px solid #fff; }
/*#content-modale table.os_vps thead tr th:not(:first-child) { box-shadow: 2px 2px 25px #1e499b40; }*/
#content-modale table.os_vps thead tr th img { width: auto; height: 48px; padding-top: 0; }
#content-modale table.os_vps thead tr th span { font-size: 16px; font-weight: 400; }
#content-modale table.os_vps thead tr th:first-child { width: calc(100% - (235px * 2)); }
/*#content-modale table.os_vps tbody { box-shadow: 2px 2px 25px #1e499b40; }*/
#content-modale table.os_vps tbody tr:nth-child(2n+1) td { background: #FFF; }
#content-modale table.os_vps tbody tr:nth-child(2n) td { background: #F4F5F8; }
#content-modale table.os_vps tbody tr td { font-size: 16px; line-height: 26px; color: #4D5163; padding: 20px; border: 1px solid #1E499B40 !important; }
#content-modale table.os_vps tbody tr td:not(:first-child) { text-align: center; vertical-align: middle; }
#content-modale table.os_vps tbody tr td:nth-child(2) { border-left: 1px solid #1E499B40; border-right: 1px solid #1E499B40; }
#content-modale table.os_vps tbody tr td span[class^="icon-"] { position: relative; }
#content-modale table.os_vps tbody tr td span.icon-checked::before { content: ''; background-image: url(../images/theme2021/svg/check_vert.svg); position: absolute; width: 21px !important; height: 15px !important; background-repeat: no-repeat; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#content-modale table.os_vps tbody tr td span.icon-cross::before { content: ''; background-image: url(../images/theme2021/svg/croix_rouge.svg); position: absolute; width: 17px !important; height: 17px !important; background-repeat: no-repeat; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#content-modale table.os_vps.options_domaine thead tr th:nth-child(2) { background: #1E499B; }
#content-modale table.os_vps.options_domaine thead tr th:nth-child(3) { background: #0D2A6B; border-left: 1px solid #fff; }
#content-modale table.os_vps.options_domaine thead tr th { width: 150px; }
#content-modale table.os_vps.options_domaine thead tr th:first-child { width: calc(100% - (150px * 2)); }
#content-modale table.os_vps.options_domaine tbody { box-shadow: 2px 2px 25px #1e499b40; }
#content-modale table.os_vps.options_domaine tbody tr { box-shadow: none; }

#content-modale table.os_vps.details_domaine tbody tr td { width: 145px; }
#content-modale table.os_vps.details_domaine tbody tr td:first-child img { display: inline-block; height: 20px; width: auto; vertical-align: sub; margin-right: 12px; }
#content-modale table.os_vps.details_domaine tbody tr td:nth-child(2) { width: calc(100% - 255px); }
#content-modale table.os_vps.details_domaine tbody tr td:nth-child(3) { width: 110px; }

#content-modale table.os_vps.service_mutu thead tr th:nth-child(2) { background: #1E499B; }
#content-modale table.os_vps.service_mutu thead tr th:nth-child(3) { background: #1E499B; border-left: 1px solid #fff; }
#content-modale table.os_vps.service_mutu thead tr th:nth-child(4) { background: #1E499B; border-left: 1px solid #fff; }
#content-modale table.os_vps.service_mutu tbody tr td:nth-child(4) { border-left: 1px solid #1E499B40; }
#content-modale table.os_vps.service_mutu thead tr th { width: 150px; }
#content-modale table.os_vps.service_mutu thead tr th:first-child { width: calc(100% - (150px * 3)); }

#content-modale table.os_vps.service_mutu.comparatif_cloud tr:first-child td { height: auto; }
#content-modale table.os_vps.service_mutu.comparatif_cloud tbody tr td { padding: 20px; }
#content-modale table.os_vps.service_mutu.comparatif_cloud tbody tr td:first-child { /*font-weight: 600;*/ }


#content-modale ul.inline-li { list-style: none; padding-left: 0; margin-top: 40px; }
#content-modale ul.inline-li li { position: relative; padding-left: 20px; display: inline-block; width: calc((100% / 2) - 22px); margin-bottom: 15px; }
#content-modale ul.inline-li li:before { content: ""; position: absolute; width: 12px; height: 15px; left: 0px; top: 3px; }
#content-modale ul.inline-li li.deb:before { background: url(../images/theme2021/svg/debian.svg) no-repeat 50% 50% / contain; }
#content-modale ul.inline-li li.centos:before { background: url(../images/theme2021/svg/centos.svg) no-repeat 50% 50% / contain; }
#content-modale ul.inline-li li.ubuntu:before { background: url(../images/theme2021/svg/ubuntu.svg) no-repeat 50% 50% / contain; }

div.clear { clear: both; font-size: 1px; line-height: 1px; display: block; height: 0; }

#content-modale::-webkit-scrollbar { width: 25px; background: #F4F5F8; }
#content-modale::-webkit-scrollbar-thumb { background: #D1D5E1; border: 9px solid transparent; background-clip: content-box; max-height: 379px; }
#content-modale::-webkit-scrollbar-track { background: #F4F5F8; border-radius: 10px; }

@media (max-width: 900px) {
    #content-modale div.grid-exemple img { width: auto; height: auto; max-width: 100%; padding: 0; }
}

@media (max-width: 767px) {
    #content-modale div.cols2float { display: block !important;}
    #content-modale div.cols2float div:first-child { float: none; width: 100%; text-align: center; margin: auto; }
    #content-modale div.cols2float div:last-child { float: none; margin: 30px auto 15px; }
    #content-modale div.cols2float div:first-child img { width: 100%; }
    #content-modale p.title-list-float { padding: 15px 0 20px 0; }
    #header-modale a { position: absolute; right: 10px; }
    #header-modale .closeIMG { right: 0; }
    #header-modale { padding: 0 60px 0 20px; }
    #header-modale span.title-white { text-overflow: ellipsis; width: 100%; overflow: hidden; white-space: nowrap; }
    #content-modale div.grid-modale.cols2 { grid-template-columns: repeat(2, 1fr); }
    #content-modale .d-none-767 { display: none !important; }
    #content-modale div.grid-exemple { grid-template-columns: repeat(2, 1fr); }
    #content-modale div.grid-exemple img { width: auto; height: 169px; }
    #content-modale div.grid-modale.grid-theme { grid-template-columns: repeat(2, 1fr); grid-row-gap: 40px; }
    #content-modale table.os_vps.details_domaine tbody tr td { width: calc(100% - 35px) !important; text-align: center; display: block; max-height: fit-content; height: auto; }
    #content-modale table.os_vps tbody tr td:nth-child(2) { border: none; }

    #content-modale table.os_vps.service_mutu { max-width: 100% !important; }
    #content-modale table.os_vps.service_mutu thead tr th { display: none; }
    #content-modale table.os_vps.service_mutu tbody tr { display: flex; flex-direction: column; margin-bottom: 20px; }
    #content-modale table.os_vps.service_mutu tbody tr:first-of-type td { height: auto !important; }
    #content-modale table.os_vps.service_mutu tbody tr td:first-of-type { font-size: 18px !important; font-weight: 900; text-align: center !important; }
    #content-modale table.os_vps.service_mutu tbody tr td:nth-child(2) strong,
    #content-modale table.os_vps.service_mutu tbody tr td:nth-child(3) strong,
    #content-modale table.os_vps.service_mutu tbody tr td:nth-child(4) strong { font-weight: 400 !important; }
    #content-modale table.os_vps.service_mutu tbody tr td:nth-child(2)::before { content: 'Formule Basic : '; font-weight: 600; }
    #content-modale table.os_vps.service_mutu tbody tr td:nth-child(3)::before { content: 'Formule Business : '; font-weight: 600; }
    #content-modale table.os_vps.service_mutu tbody tr td:nth-child(4)::before { content: 'Formule Critical : '; font-weight: 600; }
    #content-modale table.os_vps.service_mutu tbody tr td:nth-child(1) { border-bottom: none !important; padding: 20px 20px 10px; }
    #content-modale table.os_vps.service_mutu tbody tr td:nth-child(2),
    #content-modale table.os_vps.service_mutu tbody tr td:nth-child(3) { border-top: none !important; border-bottom: none !important; padding: 10px 20px; }
    #content-modale table.os_vps.service_mutu tbody tr td:nth-child(4) { border-top: none !important; padding: 10px 20px 20px; }
    #content-modale table.os_vps.service_mutu tbody tr td span.icon-checked,
    #content-modale table.os_vps.service_mutu tbody tr td span.icon-cross { margin-left: 15px; }
    #content-modale table.os_vps.service_mutu tbody tr td ul { width: 100%; max-width: 100%; margin: 1em auto 0 !important; }
    #content-modale table.os_vps.service_mutu tbody tr td ul li { text-align: left !important; font-weight: 400 !important; }
    #content-modale table.os_vps.service_mutu tbody tr td ul li:not(first-of-type) { margin-top: 5px; }
}

@media(max-width: 767px) {
    
}

@media (max-width: 575px) {
    #content-modale div.grid-exemple { grid-template-columns: repeat(1, 1fr); }
    #content-modale div.grid-exemple img { width: auto; height: 169px; }
    #content-modale table.os_vps.options_domaine thead tr th:nth-child(2),
    #content-modale table.os_vps.options_domaine tbody tr td:nth-child(2) { display: none; }
}

@media (max-width: 499px) {
    #content-modale div.cols2-50 div:first-child, #content-modale div.cols2-50 div:last-child { width: 100%; }
    #content-modale div.cols2-50 div:last-child { float: none; }
    #content-modale div.grid-modale.grid-theme { grid-template-columns: repeat(1, 1fr); grid-row-gap: 40px; }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) { 
    _::-webkit-full-page-media, _:future, :root , table tr td span[class^="icon-"] { display: inline-block; top: -5px; }
}

/* Scroll bar */
/*@media screen AND (-webkit-min-device-pixel-ratio:0) AND (min-resolution:.001dpcm) AND (min-width: 908px ) {
    body { overflow-y: hidden; }
    #content-modale { overflow-y: scroll; height: calc(100% - 134px); position: relative; top: 54px; padding: 40px; }
    ::-webkit-scrollbar { width: 30px; background-color: #EAECF3; }
    ::-webkit-scrollbar-thumb { background-color: #B4B8C5; border: 6px solid transparent; border-radius: 30px; background-clip: content-box; }
    
}*/